@fluid-theme/core 2.2.4 → 2.2.6

package/themes/nocturne.css

@@ -0,0 +1,405 @@
+/* "nocturne": a child theme on the Fluid base v2. Dark-first and cinematic:
+   deep ink-blue, one soft glow of light behind the hero, the hero headline in
+   a silver gradient set in a tight display sans, cards as quiet translucent
+   panels with crisp 1px edges. The primary button is brushed silver, the same
+   metal as the headline; links and focus carry one pale steel-blue. A
+   deliberate light mode (grey-blue paper, ink headline, ink buttons) keeps
+   the same structure, and follows the OS or <html data-theme>.
+   Upstreamed from the parked-domain landing page (domain-landing,
+   public/themes/nocturne.css, written for Fluid 1.0); its landing-only rules
+   (the domain wordmark sizing, the two-form layout, message pages) stay there.
+   Fonts: none. System stacks only (SF Pro / Segoe UI Variable / Inter, with
+   a system serif for the hero subheadline); nothing downloads.
+   Link after the base: fluid.min.css, then this file. Theme-private tokens
+   are prefixed --nc-. */
+@layer reset, tokens, base, layouts, components, themes, utilities;
+
+@layer themes {
+
+  /* ---------- Tokens: dark first ---------- */
+  :root {
+    --nc-bg: oklch(15.5% 0.022 258);
+    --nc-bg-deep: oklch(12% 0.018 258);
+    --nc-surface: oklch(20% 0.024 256);
+    --nc-text: oklch(96.5% 0.006 250);
+    --nc-text-2: oklch(78% 0.022 250);
+    --nc-text-3: oklch(68% 0.022 250);
+    --nc-panel: oklch(21% 0.026 256 / 0.55);
+    --nc-panel-sheen: oklch(100% 0 0 / 0.028);
+    --nc-panel-edge: oklch(100% 0 0 / 0.085);
+    --nc-panel-hi: oklch(100% 0 0 / 0.05);
+    --nc-panel-glint: oklch(90% 0.05 230 / 0.5);
+    --nc-panel-shadow: 0 40px 80px -40px oklch(5% 0.02 258 / 0.75);
+    --nc-field: oklch(13% 0.02 258 / 0.72);
+    --nc-field-edge: oklch(50% 0.025 250);
+    --nc-field-edge-hover: oklch(64% 0.03 245);
+    /* Brushed silver: the headline's metal, used once more on the primary button. */
+    --nc-accent: oklch(91% 0.012 245);
+    --nc-accent-hover: oklch(96% 0.008 245);
+    --nc-on-accent: oklch(18% 0.03 258);
+    --nc-btn-top: oklch(98% 0.004 250);
+    --nc-btn-bottom: oklch(86% 0.02 242);
+    --nc-btn-top-hover: oklch(100% 0 0);
+    --nc-btn-bottom-hover: oklch(90% 0.018 242);
+    --nc-btn-hi: oklch(100% 0 0 / 0.75);
+    --nc-btn-shadow: 0 1px 0 oklch(0% 0 0 / 0.35), 0 8px 22px -14px oklch(80% 0.06 232 / 0.32);
+    --nc-link: oklch(84% 0.07 232);
+    --nc-ring: color-mix(in oklch, var(--nc-link) 26%, transparent);
+    --nc-line: oklch(100% 0 0 / 0.08);
+    --nc-head-top: oklch(99% 0.004 250);
+    --nc-head-bottom: oklch(82% 0.035 240);
+    --nc-glow-core: oklch(74% 0.09 228 / 0.36);
+    --nc-glow-halo: oklch(52% 0.09 246 / 0.28);
+    --nc-sub: oklch(86% 0.025 240);
+    --nc-horizon: oklch(85% 0.065 232 / 0.6);
+    --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aab8cb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    --nc-font-quote: ui-serif, "New York", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
+
+    /* Fluid knobs and colour roles, so every page and component follows. */
+    --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, "Helvetica Neue", system-ui, Arial, sans-serif;
+    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, "Helvetica Neue", system-ui, Arial, sans-serif;
+    --weight-display: 620;
+    --accent: var(--nc-accent);
+    --accent-ink: var(--nc-link);
+    --on-accent: var(--nc-on-accent);
+    --accent-hover: var(--nc-accent-hover);
+    --accent-fill: var(--nc-accent);
+    --accent-fill-hover: var(--nc-accent-hover);
+    --accent-subtle: color-mix(in oklch, var(--nc-link) 14%, var(--nc-bg));
+    --neutral-tint: oklch(50% 0.02 255);
+    --color-background: var(--nc-bg);
+    --color-surface: var(--nc-surface);
+    --color-surface-raised: var(--nc-surface);
+    --color-text: var(--nc-text);
+    --color-text-muted: var(--nc-text-2);
+    --color-text-subtle: var(--nc-text-3);
+    --color-border: var(--nc-field-edge);
+    --color-border-subtle: var(--nc-line);
+    --color-focus: var(--nc-link);
+    --color-selection: color-mix(in oklch, var(--nc-link) 30%, var(--nc-bg));
+    --shadow-color: oklch(5% 0.02 258);
+    --radius-card: 14px;
+    --radius-control: 10px;
+    --radius-pill: 9999px;
+    --border-width: 1px;
+    --shadow-style: 1;
+    --space-section: 4rem;
+    --space-gutter: 2rem;
+    --container-content: 62rem;
+    --motion-base: 320ms;
+  }
+
+  /* ---------- Light mode: the OS, or <html data-theme="light"> ---------- */
+  :root[data-theme="light"] {
+    --nc-bg: oklch(94.5% 0.012 252);
+    --nc-bg-deep: oklch(92% 0.014 252);
+    --nc-surface: oklch(97.6% 0.006 250);
+    --nc-text: oklch(21% 0.03 258);
+    --nc-text-2: oklch(44% 0.03 255);
+    --nc-text-3: oklch(50% 0.025 255);
+    --nc-panel: oklch(100% 0 0 / 0.6);
+    --nc-panel-sheen: oklch(100% 0 0 / 0.55);
+    --nc-panel-edge: oklch(30% 0.04 256 / 0.12);
+    --nc-panel-hi: oklch(100% 0 0 / 0.9);
+    --nc-panel-glint: oklch(55% 0.1 245 / 0.3);
+    --nc-panel-shadow: 0 1px 2px oklch(30% 0.04 256 / 0.05), 0 32px 64px -44px oklch(30% 0.05 256 / 0.24);
+    --nc-field: oklch(100% 0 0 / 0.92);
+    --nc-field-edge: oklch(62% 0.02 252);
+    --nc-field-edge-hover: oklch(50% 0.03 252);
+    /* Ink: the headline's colour, used once more on the primary button. */
+    --nc-accent: oklch(26% 0.04 258);
+    --nc-accent-hover: oklch(32% 0.05 256);
+    --nc-on-accent: oklch(98.5% 0.004 250);
+    --nc-btn-top: oklch(31% 0.045 256);
+    --nc-btn-bottom: oklch(23% 0.035 259);
+    --nc-btn-top-hover: oklch(37% 0.055 254);
+    --nc-btn-bottom-hover: oklch(28% 0.045 257);
+    --nc-btn-hi: oklch(100% 0 0 / 0.14);
+    --nc-btn-shadow: 0 1px 2px oklch(25% 0.04 258 / 0.2), 0 8px 18px -12px oklch(25% 0.05 258 / 0.42);
+    --nc-link: oklch(45% 0.11 248);
+    --nc-ring: color-mix(in oklch, var(--nc-link) 20%, transparent);
+    --nc-line: oklch(30% 0.04 256 / 0.1);
+    --nc-head-top: oklch(17% 0.03 260);
+    --nc-head-bottom: oklch(36% 0.06 250);
+    --nc-glow-core: oklch(100% 0 0 / 0.95);
+    --nc-glow-halo: oklch(99.5% 0.003 250 / 0.75);
+    --nc-sub: oklch(42% 0.03 255);
+    --nc-horizon: oklch(45% 0.11 248 / 0.45);
+    --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23515d70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    --shadow-color: oklch(30% 0.04 256);
+    --accent-subtle: color-mix(in oklch, var(--nc-link) 12%, var(--nc-bg));
+    --color-selection: color-mix(in oklch, var(--nc-link) 22%, var(--nc-bg));
+  }
+  @media (prefers-color-scheme: light) {
+    :root:not([data-theme="dark"]) {
+      --nc-bg: oklch(94.5% 0.012 252);
+      --nc-bg-deep: oklch(92% 0.014 252);
+      --nc-surface: oklch(97.6% 0.006 250);
+      --nc-text: oklch(21% 0.03 258);
+      --nc-text-2: oklch(44% 0.03 255);
+      --nc-text-3: oklch(50% 0.025 255);
+      --nc-panel: oklch(100% 0 0 / 0.6);
+      --nc-panel-sheen: oklch(100% 0 0 / 0.55);
+      --nc-panel-edge: oklch(30% 0.04 256 / 0.12);
+      --nc-panel-hi: oklch(100% 0 0 / 0.9);
+      --nc-panel-glint: oklch(55% 0.1 245 / 0.3);
+      --nc-panel-shadow: 0 1px 2px oklch(30% 0.04 256 / 0.05), 0 32px 64px -44px oklch(30% 0.05 256 / 0.24);
+      --nc-field: oklch(100% 0 0 / 0.92);
+      --nc-field-edge: oklch(62% 0.02 252);
+      --nc-field-edge-hover: oklch(50% 0.03 252);
+      /* Ink: the headline's colour, used once more on the primary button. */
+      --nc-accent: oklch(26% 0.04 258);
+      --nc-accent-hover: oklch(32% 0.05 256);
+      --nc-on-accent: oklch(98.5% 0.004 250);
+      --nc-btn-top: oklch(31% 0.045 256);
+      --nc-btn-bottom: oklch(23% 0.035 259);
+      --nc-btn-top-hover: oklch(37% 0.055 254);
+      --nc-btn-bottom-hover: oklch(28% 0.045 257);
+      --nc-btn-hi: oklch(100% 0 0 / 0.14);
+      --nc-btn-shadow: 0 1px 2px oklch(25% 0.04 258 / 0.2), 0 8px 18px -12px oklch(25% 0.05 258 / 0.42);
+      --nc-link: oklch(45% 0.11 248);
+      --nc-ring: color-mix(in oklch, var(--nc-link) 20%, transparent);
+      --nc-line: oklch(30% 0.04 256 / 0.1);
+      --nc-head-top: oklch(17% 0.03 260);
+      --nc-head-bottom: oklch(36% 0.06 250);
+      --nc-glow-core: oklch(100% 0 0 / 0.95);
+      --nc-glow-halo: oklch(99.5% 0.003 250 / 0.75);
+      --nc-sub: oklch(42% 0.03 255);
+      --nc-horizon: oklch(45% 0.11 248 / 0.45);
+      --nc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23515d70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      --shadow-color: oklch(30% 0.04 256);
+      --accent-subtle: color-mix(in oklch, var(--nc-link) 12%, var(--nc-bg));
+      --color-selection: color-mix(in oklch, var(--nc-link) 22%, var(--nc-bg));
+    }
+  }
+
+  /* ---------- Page ---------- */
+  html { background-color: var(--nc-bg-deep); }
+  body {
+    min-block-size: 100vh;
+    min-block-size: 100dvh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(180deg, var(--nc-bg) 0, var(--nc-bg) 28rem, var(--nc-bg-deep) 100%);
+    font-feature-settings: "kern", "calt";
+  }
+  body > main { flex: 1 0 auto; }
+  .section[data-bg="alt"] { background: transparent; }
+
+  /* Display tracking tightens with size. */
+  h1, .display { letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
+  h2 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
+  h3 { letter-spacing: -0.015em; }
+
+  /* ---------- Hero: the one bold place ---------- */
+  /* Let the glow fall below the hero without widening the page. */
+  @supports (overflow: clip) {
+    .hero { overflow: visible; overflow-x: clip; }
+  }
+  .hero:not([data-theme], [data-overlay]) { background: transparent; }
+  /* The glow: two radial layers with eased falloff (no visible rim), centred on the headline. */
+  .hero:not([data-theme], [data-overlay]) .hero__content::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset-block-start: 46%;
+    inset-inline-start: 50%;
+    inline-size: min(86rem, 230vw);
+    block-size: clamp(28rem, 22rem + 22vw, 50rem);
+    translate: -50% -50%;
+    background:
+      radial-gradient(closest-side,
+        var(--nc-glow-core) 0%,
+        color-mix(in oklab, var(--nc-glow-core) 62%, transparent) 28%,
+        color-mix(in oklab, var(--nc-glow-core) 28%, transparent) 55%,
+        color-mix(in oklab, var(--nc-glow-core) 8%, transparent) 80%,
+        transparent 100%) center / 58% 50% no-repeat,
+      radial-gradient(closest-side,
+        var(--nc-glow-halo) 0%,
+        color-mix(in oklab, var(--nc-glow-halo) 60%, transparent) 30%,
+        color-mix(in oklab, var(--nc-glow-halo) 26%, transparent) 58%,
+        color-mix(in oklab, var(--nc-glow-halo) 7%, transparent) 82%,
+        transparent 100%) center / 100% 100% no-repeat;
+    pointer-events: none;
+  }
+  /* The headline in the metal: a vertical gradient clipped to the text. */
+  .hero:not([data-theme], [data-overlay]) .hero__headline {
+    letter-spacing: -0.035em;
+    line-height: 1;
+    padding-block: 0.04em 0.1em;
+    color: var(--nc-head-top);
+    background: linear-gradient(180deg, var(--nc-head-top) 30%, var(--nc-head-bottom) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  @media (min-width: 48rem) {
+    .hero .hero__headline { letter-spacing: -0.04em; }
+  }
+  .hero__subheadline {
+    font-family: var(--nc-font-quote);
+    font-style: italic;
+    letter-spacing: 0.002em;
+    color: var(--nc-sub);
+  }
+  /* A hairline horizon under the glow. */
+  .hero:not([data-theme], [data-overlay])::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    margin-inline: auto;
+    inline-size: min(100% - 2rem, 56rem);
+    block-size: 1px;
+    background: linear-gradient(90deg, transparent, var(--nc-horizon) 50%, transparent);
+    pointer-events: none;
+  }
+
+  /* ---------- Cards: translucent panels ---------- */
+  .card {
+    background: linear-gradient(180deg, var(--nc-panel-sheen), transparent 10rem), var(--nc-panel);
+    border: 1px solid var(--nc-panel-edge);
+    border-radius: var(--radius-card);
+    box-shadow: inset 0 1px 0 var(--nc-panel-hi), var(--nc-panel-shadow);
+  }
+  /* Light catching the top edge of each panel. */
+  .card::before {
+    content: "";
+    position: absolute;
+    inset-block-start: -1px;
+    inset-inline: 12%;
+    block-size: 1px;
+    background: linear-gradient(90deg, transparent, var(--nc-panel-glint) 50%, transparent);
+    pointer-events: none;
+  }
+
+  /* ---------- Fields ---------- */
+  label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: -0.003em;
+    color: var(--nc-text);
+  }
+  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select) {
+    background-color: var(--nc-field);
+    border: 1px solid var(--nc-field-edge);
+    border-radius: var(--radius-control);
+    color: var(--nc-text);
+    box-shadow: none;
+    padding: 0.75rem 0.9375rem;
+    font-size: 1rem;
+    transition: border-color var(--duration-fast) var(--ease-fluid), box-shadow var(--duration-fast) var(--ease-fluid);
+  }
+  /* One height for every one-line control and every button, so a field and its button line up. */
+  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select) {
+    block-size: 3.25rem;
+    padding-block: 0;
+  }
+  textarea { min-block-size: 9rem; line-height: 1.55; resize: vertical; }
+  select:not([multiple], [size]) {
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: var(--nc-chevron);
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 12px 8px;
+    padding-inline-end: 2.75rem;
+    cursor: pointer;
+  }
+  select option { background-color: var(--nc-surface); color: var(--nc-text); }
+  :is(input, textarea)::placeholder { color: var(--nc-text-3); }
+  :is(input, textarea, select):hover { border-color: var(--nc-field-edge-hover); }
+  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select):focus {
+    border-color: var(--nc-link);
+    background-color: var(--nc-field);
+    box-shadow: 0 0 0 1px var(--nc-link), 0 0 0 5px var(--nc-ring);
+    outline: 2px solid transparent;
+  }
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--nc-text);
+    caret-color: var(--nc-text);
+    box-shadow: 0 0 0 100px var(--nc-surface) inset;
+  }
+  :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--color-error); }
+  :is(input, textarea, select)[aria-invalid="true"]:focus {
+    box-shadow: 0 0 0 1px var(--color-error), 0 0 0 5px color-mix(in oklch, var(--color-error) 22%, transparent);
+  }
+  .form-error { color: var(--color-error); font-size: 0.875rem; line-height: 1.5; }
+  .form-help { font-size: 0.8125rem; color: var(--nc-text-2); font-weight: 400; }
+  label .form-help { font-size: inherit; color: var(--nc-text-3); }
+
+  /* ---------- Buttons ---------- */
+  :is(button, .button) {
+    border-radius: var(--radius-control);
+    --_btn-min-height: 3.25rem;
+    --_btn-padding-inline: 1.5rem;
+    font-weight: 600;
+    font-size: 0.9375rem;
+    letter-spacing: -0.005em;
+    box-shadow: none;
+    transition: background-color var(--duration-fast) var(--ease-fluid), box-shadow var(--duration-fast) var(--ease-fluid);
+  }
+  /* The primary button in the headline's metal: a short vertical gradient and a lit top edge. */
+  :is(button, .button):not([data-variant]) {
+    background-image: linear-gradient(180deg, var(--nc-btn-top), var(--nc-btn-bottom));
+    box-shadow: inset 0 1px 0 var(--nc-btn-hi), var(--nc-btn-shadow);
+  }
+  :is(button, .button):not([data-variant]):hover:not(:disabled) {
+    background-image: linear-gradient(180deg, var(--nc-btn-top-hover), var(--nc-btn-bottom-hover));
+  }
+  :is(button, .button):focus-visible { outline: 2px solid var(--nc-link); outline-offset: 3px; }
+  :is(button, .button)[data-variant="outline"] {
+    --_btn-color: var(--nc-text);
+    --_btn-color-hover: var(--nc-text);
+    --_btn-bg: transparent;
+    --_btn-bg-hover: color-mix(in oklch, var(--nc-link) 12%, transparent);
+    --_btn-border: var(--nc-field-edge);
+  }
+  :is(button, .button)[data-variant="outline"]:hover:not(:disabled) { --_btn-border: var(--nc-field-edge-hover); }
+
+  /* ---------- Tables, footer, small things ---------- */
+  table { font-size: 0.9375rem; }
+  th, td { border-block-end-color: var(--nc-line); }
+  th { background: transparent; color: var(--nc-text-2); font-weight: 500; }
+
+  .site-footer {
+    --_footer-bg: transparent;
+    --_footer-text: var(--nc-text-2);
+    --_footer-border: var(--nc-line);
+    background: transparent;
+    border-block-start: 1px solid var(--nc-line);
+  }
+  .site-footer__copyright { font-size: 0.875rem; letter-spacing: -0.01em; }
+  .site-footer__copyright a { color: inherit; font-weight: 500; }
+  .site-footer__links { font-size: 0.875rem; }
+  .site-footer a:hover { color: var(--nc-text); }
+
+  .skip-link { background: var(--nc-accent); color: var(--nc-on-accent); box-shadow: none; }
+  .skip-link:focus { box-shadow: 0 0 0 2px var(--nc-bg), 0 0 0 4px var(--nc-link); }
+  ::selection { background: var(--color-selection); color: var(--nc-text); }
+
+  /* ---------- Motion and access ---------- */
+  @media (prefers-reduced-motion: no-preference) {
+    .hero:not([data-theme], [data-overlay]) .hero__content::before { animation: nc-breathe 16s ease-in-out infinite alternate; }
+  }
+  @keyframes nc-breathe {
+    from { opacity: 0.88; scale: 1; }
+    to { opacity: 1; scale: 1.05; }
+  }
+  @media (prefers-contrast: more) {
+    :root:root:root {   /* outranks the light-mode rules above */
+      --nc-text-2: var(--nc-text);
+      --nc-text-3: var(--nc-text);
+      --nc-sub: var(--nc-text);
+      --nc-field-edge: var(--nc-text-2);
+      --nc-panel-edge: var(--nc-field-edge);
+    }
+  }
+  @media (forced-colors: active) {
+    .hero .hero__headline { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
+    :is(button, .button):not([data-variant]) { background-image: none; }
+    .hero .hero__content::before, .hero::after, .card::before { display: none; }
+  }
+}

package/themes/nocturne.json

@@ -0,0 +1 @@
+{"name":"Nocturne","slug":"nocturne","added":"2026-11-01","niche":"Launch pages, product teasers, premium one-pagers","description":"Dark-first and cinematic: deep ink-blue, one soft glow behind a silver gradient headline, translucent panels and brushed-silver buttons, with a grey-blue paper light mode.","fonts":null,"origin":"Built for the parked-domain landing pages (Agile-Media-Agency/domain-landing)","status":"stable","changelog":[{"date":"2026-11-01","note":"Upstreamed from a project landing page."}]}

package/themes/swiss.json

@@ -0,0 +1,14 @@
+{
+  "name": "Swiss",
+  "slug": "swiss",
+  "added": "2026-10-30",
+  "niche": "Agencies, studios, product and tech companies",
+  "description": "One grotesk family, a heavy display over a light lede, an off-centre column with a rail for labels.",
+  "fonts": "fonts/archivo.css",
+  "origin": "Fluid Theme core (base v2 spec §15)",
+  "status": "stable",
+  "changelog": [
+    { "date": "2026-10-30", "note": "First shown as a look on the base v2 demo." },
+    { "date": "2026-11-01", "note": "Packaged as themes/swiss.css with self-hosted Archivo (PR #109)." }
+  ]
+}