/* ============================================
ORBITAL CREATIVE NEXUS
Linear-inspired design with warm brand accents
============================================ */
/* ---------- Tokens ----------
Two themes (Douglas, Nov 3): dark = charcoal + orange (the default and the :root values),
light = sand + orange. The light set is applied when the visitor's system prefers light and
no choice is stored, or when theme.js has set data-theme="light". Every color on the site is one
of these tokens; nothing outside the two blocks names a literal color except device frames and
overlays that are the same in both themes. Run `npm run contrast` after any change — it checks
both sets. */
:root {
/* Ground and surfaces */
--bg-primary: #141517;
--bg-secondary: #1A1C1F;
--bg-elevated: #202327;
--bg-hover: #25282D; /* a card or row one step lighter, on hover / open */
--bg-band: rgba(255, 255, 255, 0.025); /* the alternating section band; translucent so the backdrop shows through */
--bg-input: rgba(0, 0, 0, 0.20); /* inputs, drop zones, inset panels */
--bg-tint: rgba(255, 255, 255, 0.03); /* a whisper of surface: eyebrow pills, nav hover, chips */
--bg-tint-2: rgba(255, 255, 255, 0.06); /* a stronger tint: code chips, inline tags */
--bg-warm: #FCF0DE; /* the Ko-fi "window" card stays sand on the dark page */
--bg-warm-deep: #F5E5CC;
/* Text */
--text-primary: #F5F7FA;
--text-secondary: #A9AEB5;
--text-tertiary: #8C9198;
--text-on-accent: #FFFFFF; /* on --accent-deep fills */
--text-warm-primary: #333333; /* 80% gray on sand (Douglas), 11.2:1 */
--text-warm-secondary: #5A5650; /* 6.5:1 */
/* Borders and lines */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-medium: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.18);
--border-warm: rgba(51, 51, 51, 0.12);
--grid-line: rgba(238, 154, 102, 0.28); /* the floor grid in the fixed backdrop */
--cycle-blue: #4FC3FF; /* light cycles on the grid */
--cycle-blue-glow: rgba(79, 195, 255, 0.55);
--cycle-red: #FF5A4E;
--cycle-red-glow: rgba(255, 90, 78, 0.55);
--cycle-head: #FFFFFF; /* the white-hot tip of each trail */
/* Accent — orange. --accent is the fill/ring/glow orange; --accent-text is the orange for links,
chips and markers (6.6:1 on the ground, 5.7:1 on cards); --accent-deep is the deep orange for
white-on fills and for orange text on sand; --accent-pale starts the button border gradient. */
--accent: #E8803F;
--accent-text: #E8803F;
--accent-pale: #FFD9BF;
--accent-deep: #A33E0C;
--accent-soft: rgba(232, 128, 63, 0.12);
--accent-glow: rgba(232, 128, 63, 0.35);
--border-accent: rgba(232, 128, 63, 0.50);
--heading-end: #FFD9BF; /* end of the H1/H2 gradient (starts at --text-primary) */
--btn-glow: 0 2px 8px rgba(232, 128, 63, 0.40), inset 0 -2px 12px rgba(232, 128, 63, 0.50);
--btn-glow-hover: 0 4px 20px rgba(232, 128, 63, 0.55), inset 0 -2px 14px rgba(232, 128, 63, 0.65);
/* Status colors: errors and "removed" are red now that orange is the brand accent */
--danger: #F47C7C;
--danger-soft: rgba(244, 124, 124, 0.14);
--accent-green: #4ADE80;
--accent-green-soft: rgba(34, 197, 94, 0.14);
--accent-green-border: rgba(34, 197, 94, 0.35);
/* Shadows */
--shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
--shadow-window: 0 24px 60px rgba(0, 0, 0, 0.30);
--shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.60);
--shadow-cover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.60), 0 18px 36px -12px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04);
--overlay: rgba(5, 8, 16, 0.72);
/* Aliases kept for pages with their own styles (src/ai-guide.html) and older rules */
--accent-blue: var(--accent);
--accent-blue-hover: var(--accent-text);
--accent-blue-pale: var(--accent-pale);
--accent-blue-soft: var(--accent-soft);
--accent-blue-glow: var(--accent-glow);
--accent-cta: var(--accent-text);
--accent-cta-hover: var(--accent-pale);
--accent-cta-text: var(--accent-text);
--accent-terracotta: var(--danger);
--accent-terracotta-soft: var(--danger-soft);
/* Type: one sans. Headings are Onest 500 (no serif — Douglas, Nov 3). */
--font-sans: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-display: var(--font-sans);
/* Layout */
--container: 1180px;
--container-narrow: 880px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-btn: 8px; /* buttons and tags: the AI X+ look is rounded, not pill */
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--theme-sun: block; /* the nav toggle shows the mode you would switch to */
--theme-moon: none;
color-scheme: dark;
}
/* Light theme = sand + orange. Applied by the system preference when nothing is stored, and by
theme.js (data-theme="light") when the visitor picks it. The two blocks are identical on purpose. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg-primary: #FCF0DE;
--bg-secondary: #F7E8D0;
--bg-elevated: #FFF8EC;
--bg-hover: #FFFCF5;
--bg-band: rgba(51, 51, 51, 0.03);
--bg-input: rgba(255, 255, 255, 0.55);
--bg-tint: rgba(51, 51, 51, 0.04);
--bg-tint-2: rgba(51, 51, 51, 0.07);
--bg-warm: #FFF8EC;
--bg-warm-deep: #F5E5CC;
--text-primary: #333333;
--text-secondary: #5A5650;
--text-tertiary: #6B665E;
--border-subtle: rgba(51, 51, 51, 0.08);
--border-medium: rgba(51, 51, 51, 0.12);
--border-strong: rgba(51, 51, 51, 0.22);
--grid-line: rgba(163, 62, 12, 0.20);
--cycle-blue: #1E5FD6;
--cycle-blue-glow: rgba(30, 95, 214, 0.35);
--cycle-red: #C4281C;
--cycle-red-glow: rgba(196, 40, 28, 0.35);
--cycle-head: #333333;
--cycle-head: #333333;
--accent: #D9601F;
--accent-text: #A33E0C;
--accent-pale: #F2A777;
--accent-deep: #A33E0C;
--accent-soft: rgba(217, 96, 31, 0.12);
--accent-glow: rgba(217, 96, 31, 0.28);
--border-accent: rgba(217, 96, 31, 0.50);
--heading-end: #8A3A12;
--btn-glow: 0 2px 8px rgba(217, 96, 31, 0.28), inset 0 -2px 12px rgba(217, 96, 31, 0.32);
--btn-glow-hover: 0 4px 20px rgba(217, 96, 31, 0.38), inset 0 -2px 14px rgba(217, 96, 31, 0.45);
--danger: #B3261E;
--danger-soft: rgba(179, 38, 30, 0.12);
--accent-green: #176B33;
--accent-green-soft: rgba(23, 107, 51, 0.12);
--accent-green-border: rgba(23, 107, 51, 0.35);
--shadow-card: 0 12px 32px rgba(51, 51, 51, 0.12);
--shadow-window: 0 20px 44px rgba(51, 51, 51, 0.12);
--shadow-pop: 0 24px 60px rgba(51, 51, 51, 0.25);
--shadow-cover: 0 30px 60px -20px rgba(51, 51, 51, 0.30), 0 18px 36px -12px rgba(51, 51, 51, 0.20), 0 0 0 1px rgba(51, 51, 51, 0.06);
--overlay: rgba(51, 51, 51, 0.55);
--theme-sun: none;
--theme-moon: block;
color-scheme: light;
}
}
:root[data-theme="light"] {
--bg-primary: #FCF0DE;
--bg-secondary: #F7E8D0;
--bg-elevated: #FFF8EC;
--bg-hover: #FFFCF5;
--bg-band: rgba(51, 51, 51, 0.03);
--bg-input: rgba(255, 255, 255, 0.55);
--bg-tint: rgba(51, 51, 51, 0.04);
--bg-tint-2: rgba(51, 51, 51, 0.07);
--bg-warm: #FFF8EC;
--bg-warm-deep: #F5E5CC;
--text-primary: #333333;
--text-secondary: #5A5650;
--text-tertiary: #6B665E;
--border-subtle: rgba(51, 51, 51, 0.08);
--border-medium: rgba(51, 51, 51, 0.12);
--border-strong: rgba(51, 51, 51, 0.22);
--grid-line: rgba(163, 62, 12, 0.20);
--cycle-blue: #1E5FD6;
--cycle-blue-glow: rgba(30, 95, 214, 0.35);
--cycle-red: #C4281C;
--cycle-red-glow: rgba(196, 40, 28, 0.35);
--accent: #D9601F;
--accent-text: #A33E0C;
--accent-pale: #F2A777;
--accent-deep: #A33E0C;
--accent-soft: rgba(217, 96, 31, 0.12);
--accent-glow: rgba(217, 96, 31, 0.28);
--border-accent: rgba(217, 96, 31, 0.50);
--heading-end: #8A3A12;
--btn-glow: 0 2px 8px rgba(217, 96, 31, 0.28), inset 0 -2px 12px rgba(217, 96, 31, 0.32);
--btn-glow-hover: 0 4px 20px rgba(217, 96, 31, 0.38), inset 0 -2px 14px rgba(217, 96, 31, 0.45);
--danger: #B3261E;
--danger-soft: rgba(179, 38, 30, 0.12);
--accent-green: #176B33;
--accent-green-soft: rgba(23, 107, 51, 0.12);
--accent-green-border: rgba(23, 107, 51, 0.35);
--shadow-card: 0 12px 32px rgba(51, 51, 51, 0.12);
--shadow-window: 0 20px 44px rgba(51, 51, 51, 0.12);
--shadow-pop: 0 24px 60px rgba(51, 51, 51, 0.25);
--shadow-cover: 0 30px 60px -20px rgba(51, 51, 51, 0.30), 0 18px 36px -12px rgba(51, 51, 51, 0.20), 0 0 0 1px rgba(51, 51, 51, 0.06);
--overlay: rgba(51, 51, 51, 0.55);
--theme-sun: none;
--theme-moon: block;
color-scheme: light;
}
/* ---------- Reset ---------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* The hidden attribute must win over any display rule on the same element
(e.g. .form__success is display:flex and starts hidden until a submit succeeds). */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* No sideways wiggle on phones: nothing may widen the page past the viewport. `clip` (not `hidden`)
so the sticky category nav and position: sticky still work; iOS Safari needs it on too. */
html, body { overflow-x: clip; }
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 16px;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s var(--ease);
}
img, svg { display: block; max-width: 100%; }
button {
font-family: inherit;
border: none;
background: none;
cursor: pointer;
color: inherit;
}
input, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
::selection {
background: var(--accent-deep);
color: white;
}
/* ---------- Backdrop: the stage, pinned to the bottom of the window (Douglas, Nov 3) ----------
A floor grid in perspective whose lines converge on a glowing horizon, position: fixed at the bottom
edge and behind every page section (z-index -1; sections are transparent or a translucent band so it
shows through). Cards and panels stay opaque, so text sits on a solid surface wherever it matters.
The grid grows out from a glowing horizon (the far lines fade into the glow before they turn to moiré), and
two light cycles, one blue and one red, ride grid lines in opposite directions — the Tron nod. Markup: base.njk. */
.backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(40vh + var(--sky));
z-index: -1;
overflow: hidden;
pointer-events: none;
--sky: 140px; /* room above the horizon, so its light can spread up as well as down */
--glow-y: calc(var(--sky) + 150px); /* where the grid visibly emerges (its farthest ~30% is faded to avoid moiré) — the light sits here */
/* The floor plane's own horizon sits d·cot(θ) above the perspective origin: 520px · cot(68°) ≈ 210px.
With the origin at sky + 210px, the grid's vanishing line lands exactly on the horizon line. */
perspective: 520px;
perspective-origin: 50% calc(var(--sky) + 210px);
}
/* The horizon light: a wide soft glow centred on the horizon (spreading up into the sky and down onto the
floor), a tighter bright band, and a hairline core that fades out at both ends. */
.backdrop__horizon {
position: absolute;
left: 0;
right: 0;
top: calc(var(--glow-y) - 140px);
height: 280px;
background:
radial-gradient(ellipse 34% 22% at 50% 50%, var(--accent-glow) 0%, transparent 100%),
radial-gradient(ellipse 65% 50% at 50% 50%, var(--accent-soft) 0%, transparent 100%);
filter: blur(10px);
}
.backdrop__line {
position: absolute;
left: 8%;
right: 8%;
top: calc(var(--glow-y) - 1px);
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent-pale) 50%, var(--accent) 75%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
filter: blur(0.6px);
box-shadow: 0 0 14px 2px var(--accent-glow);
opacity: 0.75;
}
/* The floor: a very deep, wide plane so its far edge reaches the horizon and its sides fill the window.
It is brightest where it meets the horizon and grows out toward the viewer (mask runs far → near). */
.backdrop__floor {
position: absolute;
left: -150%;
right: -150%;
bottom: 0;
height: 2400px;
transform: rotateX(68deg);
transform-origin: 50% 100%;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 64px 64px;
background-position: center bottom;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.9) 40%, #000 60%, rgba(0, 0, 0, 0.6) 100%);
mask-image: linear-gradient(to bottom, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.9) 40%, #000 60%, rgba(0, 0, 0, 0.6) 100%);
}
/* Light cycles: a blue and a red trail riding grid lines in opposite directions, on the floor plane so they
take its perspective. Each lane spans the floor; the trail is the lane-wide element with a bright head at
one end and a fading tail, slid across the visible middle of the lane. Gone under reduced motion. */
.cycle {
position: absolute;
left: 0;
right: 0;
height: 14px; /* thick in floor space: tilted 68° and shrunk by distance it draws ~1.5–2px */
overflow: visible;
}
.cycle--blue { bottom: 377px; } /* on a grid line, nearer */
.cycle--red { bottom: 761px; } /* on a grid line, farther out */
/* Rows sit on lines at 64n px from the floor's bottom edge; columns on lines at 50% − 32px + 64n. */
.cycle--chase { bottom: 377px; } /* the blue lane: a red chases the blue down it */
.cycle--deep { /* runs along a column, from the horizon toward the viewer */
top: 0;
bottom: 0;
left: calc(50% + 160px - 7px);
right: auto;
width: 14px;
height: auto;
}
.cycle > span {
position: absolute;
inset: 0;
opacity: 0;
}
.cycle--blue > span {
background: linear-gradient(90deg, transparent 80%, var(--cycle-blue-glow) 94%, var(--cycle-blue) 99.6%, var(--cycle-head) 100%);
filter: drop-shadow(0 0 6px var(--cycle-blue-glow));
animation: cycle-ltr 9s linear infinite 2s;
}
.cycle--red > span {
background: linear-gradient(270deg, transparent 80%, var(--cycle-red-glow) 94%, var(--cycle-red) 99.6%, var(--cycle-head) 100%);
filter: drop-shadow(0 0 6px var(--cycle-red-glow));
animation: cycle-rtl 15s linear infinite 5.5s;
}
.cycle--chase > span {
background: linear-gradient(90deg, transparent 84%, var(--cycle-red-glow) 95%, var(--cycle-red) 99.6%, var(--cycle-head) 100%);
filter: drop-shadow(0 0 6px var(--cycle-red-glow));
animation: cycle-ltr 9s linear infinite 4.2s; /* same run as the blue, 2.2 s behind it: a clear gap after its tail */
}
.cycle--deep > span {
background: linear-gradient(180deg, transparent 80%, var(--cycle-blue-glow) 93%, var(--cycle-blue) 99.6%, var(--cycle-head) 100%);
filter: drop-shadow(0 0 6px var(--cycle-blue-glow));
animation: cycle-ttb 13s linear infinite 8s;
}
@keyframes cycle-ttb {
0% { transform: translateY(-72%); opacity: 0; }
3% { opacity: 1; }
24% { opacity: 1; }
27% { transform: translateY(0%); opacity: 0; }
100% { transform: translateY(0%); opacity: 0; }
}
@keyframes cycle-ltr {
0% { transform: translateX(-72%); opacity: 0; }
3% { opacity: 1; }
32% { opacity: 1; }
36% { transform: translateX(-28%); opacity: 0; }
100% { transform: translateX(-28%); opacity: 0; }
}
@keyframes cycle-rtl {
0% { transform: translateX(72%); opacity: 0; }
2% { opacity: 1; }
22% { opacity: 1; }
25% { transform: translateX(28%); opacity: 0; }
100% { transform: translateX(28%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cycle { display: none; } }
@media print { .backdrop { display: none; } }
/* ---------- Utility ---------- */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* Overhaul 1.5: labels are plain sans, not uppercase mono. JetBrains Mono is for data only
(numbers, file names, row counts, code). */
.mono-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
color: var(--text-tertiary);
}
/* Eyebrow = the AI X+ tag: a small bordered pill with a blue dot, above a heading. One per section header. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 10px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--text-secondary);
background: var(--bg-tint);
border: 1px solid var(--border-medium);
border-radius: 999px;
margin-bottom: 18px;
}
.eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
.eyebrow--warm { color: var(--text-secondary); }
/* Heading gradient (AI X+): white into pale blue, on H1/H2 only. The fallback color is the solid text color. */
.text-gradient,
.heading-gradient {
color: var(--text-primary);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.heading-gradient {
background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-pale) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.text-gradient {
background: linear-gradient(135deg, var(--accent-text) 0%, var(--accent-pale) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--radius-btn);
font-weight: 500;
font-size: 14.5px;
letter-spacing: -0.005em;
transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.3s var(--ease), color 0.2s var(--ease);
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.btn--sm { padding: 9px 16px; font-size: 13.5px; }
.btn--lg { padding: 14px 26px; font-size: 15px; }
.btn--full { width: 100%; }
/* Primary = the AI X+ button: a charcoal fill with a hairline blue gradient border and a blue glow
(a ring under the bottom edge plus a soft halo). The label stays white: 17:1. Hover widens the halo. */
.btn--primary {
color: var(--text-primary);
border-color: transparent;
background:
linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
linear-gradient(135deg, var(--accent-pale), var(--accent)) border-box;
box-shadow: var(--btn-glow);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background:
linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
linear-gradient(135deg, var(--accent-pale), var(--accent)) border-box;
box-shadow: var(--btn-glow-hover);
}
/* Secondary = transparent with a 1 px outline, white label */
.btn--ghost {
background: transparent;
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
background: var(--bg-tint);
border-color: var(--border-accent);
box-shadow: 0 0 0 1px var(--accent-soft), 0 4px 18px var(--accent-soft);
}
.btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.btn svg { transition: transform 0.2s var(--ease); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(2px); }
/* ============================================
NAV
============================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
transition: all 0.3s var(--ease);
padding: 16px 0;
}
.nav.is-scrolled {
background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border-subtle);
padding: 12px 0;
}
.nav__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 16px;
}
.nav__logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.nav__logo svg { color: var(--accent); }
.nav__links {
display: flex;
align-items: center;
gap: 4px;
margin-inline: auto; /* logo left, links centred, actions right */
}
.nav__links a {
font-size: 14px;
color: var(--text-secondary);
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: all 0.2s var(--ease);
}
.nav__links a:hover {
color: var(--text-primary);
background: var(--bg-tint);
}
.nav__cta { display: flex; align-items: center; }
/* Light/dark toggle (theme.js). Shows the mode you would switch to; stays visible at every width. */
.nav__theme {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border-medium);
background: var(--bg-tint);
color: var(--text-secondary);
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
flex-shrink: 0;
}
.nav__theme:hover { color: var(--text-primary); border-color: var(--border-strong); }
.nav__theme:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.nav__theme-sun { display: var(--theme-sun); }
.nav__theme-moon { display: var(--theme-moon); }
.nav__menu-btn {
display: none;
flex-direction: column;
gap: 4px;
padding: 8px;
}
@media (max-width: 1080px) { .nav__theme { margin-left: auto; } } /* keep in step with the compact-menu breakpoint below */
.nav__menu-btn span {
display: block;
width: 20px;
height: 1.5px;
background: var(--text-primary);
transition: all 0.2s var(--ease);
}
.nav__mobile {
display: none;
flex-direction: column;
gap: 8px;
padding: 24px;
background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-subtle);
}
.nav__mobile a {
padding: 12px 16px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 15px;
}
.nav__mobile a:hover { background: var(--bg-tint); color: var(--text-primary); }
.nav__mobile .btn { margin-top: 8px; justify-content: center; }
/* ============================================
HERO
============================================ */
/* About 70% of the window tall (Douglas, Nov 3), so the Services section shows below the fold line.
The padding is the tightest that still clears the fixed nav; on short windows the hero is content-height. */
.hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
padding: 112px 0 56px;
overflow: hidden;
background: transparent;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 45% at 50% 0%, var(--accent-soft), transparent 60%);
z-index: 0;
}
/* The stage (glow + floor grid) is the fixed .backdrop now; heroes carry no glow of their own. */
.hero__content {
position: relative;
z-index: 2;
text-align: center;
max-width: 960px; /* the H1 sits on two lines at desktop widths */
}
.hero__title {
font-size: clamp(2.5rem, 5vw, 3.4rem); /* the AI X+ H1 is 54px */
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 500;
margin-bottom: 24px;
color: var(--text-primary);
text-wrap: balance;
}
.hero__sub {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.55;
color: var(--text-secondary);
max-width: 680px;
margin: 0 auto 32px;
}
.hero__ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 36px;
}
.hero__meta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: var(--bg-tint);
border: 1px solid var(--border-subtle);
border-radius: 999px;
font-size: 13.5px;
color: var(--text-secondary);
}
.hero__meta-list {
letter-spacing: -0.005em;
}
/* ============================================
SECTIONS
============================================ */
.section {
padding: 120px 0;
position: relative;
background: var(--bg-band); /* translucent: the fixed backdrop shows through */
}
.section__header {
max-width: 720px;
margin-bottom: 64px;
}
.section__header--center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section__title {
font-size: clamp(1.75rem, 3.2vw, 2.4rem);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 500;
margin-bottom: 16px;
color: var(--text-primary);
text-wrap: balance;
}
/* Display type (overhaul 1.3, revised Nov 3): Onest 500 for H1/H2, the AI X+ weight, with the
white-to-pale-blue heading gradient. The gradient only applies where background-clip: text is
supported; elsewhere the heading is plain white. */
.hero__title, .product-hero__title, .promise__title {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.1;
}
.section__title, .guide__title, .download-band__title {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.2;
font-size: clamp(1.75rem, 3.2vw, 2.4rem);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.hero__title, .product-hero__title, .promise__title,
.section__title, .guide__title, .download-band__title, .cat-group__title {
background: linear-gradient(135deg, var(--text-primary) 0%, var(--heading-end) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.section__sub {
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.55;
max-width: 580px;
}
.section__header--center .section__sub { margin-left: auto; margin-right: auto; }
/* ---------- Grid ---------- */
.grid {
display: grid;
gap: 16px;
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* ---------- Card ---------- */
/* Cards (AI X+): a bordered panel one step above the ground. Hover: the border turns blue with a
faint halo and the panel steps one shade lighter. No lift, no translate (overhaul §Phase 2). */
.card {
background: var(--bg-elevated);
border: 1px solid var(--border-medium);
border-radius: var(--radius-lg);
padding: 28px 24px;
transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.card:hover {
border-color: var(--border-accent);
background: var(--bg-hover);
box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-card);
}
.card:hover::before { opacity: 1; }
.card__icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-soft);
border: 1px solid var(--accent-soft);
border-radius: var(--radius-md);
color: var(--accent-text);
margin-bottom: 22px;
}
.card__title {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 8px;
color: var(--text-primary);
}
.card__body {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
}
/* ============================================
GUIDE / BUY SECTION
============================================ */
.section--guide {
background: transparent;
position: relative;
overflow: hidden;
}
.section--guide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
}
.guide__container {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 80px;
align-items: center;
}
/* Cover with floating glow */
.guide__cover {
position: relative;
display: flex;
justify-content: center;
perspective: 1000px;
}
.guide__cover-glow {
position: absolute;
inset: -40px;
background: radial-gradient(
ellipse at center,
var(--accent-glow) 0%,
var(--accent-soft) 40%,
transparent 70%
);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
.guide__cover-img {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-cover);
transform: rotate(-1.5deg);
transition: transform 0.5s var(--ease-out);
}
/* FX-17: covers and photo cards zoom to 1.03 on hover */
.guide__cover:hover .guide__cover-img {
transform: rotate(0deg) scale(1.03);
}
/* Info panel */
.guide__title {
font-size: clamp(1.85rem, 3.4vw, 2.6rem);
line-height: 1.12;
letter-spacing: -0.028em;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-primary);
}
.guide__sub {
font-size: 1.1rem;
line-height: 1.55;
color: var(--text-secondary);
margin-bottom: 32px;
}
.guide__bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 36px;
}
.guide__bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
line-height: 1.55;
color: var(--text-primary);
}
.guide__bullets svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
color: var(--accent-text);
padding: 2px;
background: var(--accent-soft);
border-radius: 50%;
}
/* Price row */
.guide__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 24px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
margin-bottom: 24px;
flex-wrap: wrap;
}
.guide__price {
display: flex;
flex-direction: column;
gap: 2px;
}
.guide__price-amount {
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1;
}
.guide__price-meta {
font-size: 12.5px;
color: var(--text-tertiary);
}
/* Meta strip */
.guide__meta {
display: flex;
gap: 32px;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.guide__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13.5px;
color: var(--text-primary);
}
/* Free chapter preview link */
.guide__preview-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--accent-text);
margin-bottom: 28px;
transition: all 0.2s var(--ease);
font-weight: 500;
}
.guide__preview-link:hover {
color: var(--text-primary);
gap: 10px;
}
.guide__preview-link svg {
flex-shrink: 0;
opacity: 0.8;
}
/* ============================================
PROMISE (warm break section)
============================================ */
/* The promise is the AI X+ "CTA panel": a bordered panel with its own soft glow. (Was the mist band.) */
.promise {
background: transparent;
padding: 40px 0 120px;
position: relative;
}
.promise__inner {
position: relative;
overflow: hidden;
text-align: center;
max-width: var(--container);
margin: 0 auto;
padding: 96px 24px;
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-xl);
}
.promise__inner::before {
content: '';
position: absolute;
left: 50%;
bottom: -20%;
transform: translateX(-50%);
width: 80%;
height: 70%;
background: radial-gradient(ellipse at 50% 100%, var(--accent-glow) 0%, transparent 65%);
filter: blur(30px);
pointer-events: none;
}
.promise__inner > * { position: relative; z-index: 1; }
.promise__title {
font-size: clamp(2rem, 4.2vw, 3rem);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 20px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.promise__title-accent { color: var(--accent-text); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
.promise__title-accent {
background: linear-gradient(135deg, var(--accent-text) 0%, var(--accent-pale) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.promise__body {
font-size: 1.15rem;
line-height: 1.55;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* ============================================
ABOUT
============================================ */
.section--about { background: transparent; }
.about__grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: start;
}
.about__right p {
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 20px;
}
.about__values {
list-style: none;
margin-top: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.about__values li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14.5px;
color: var(--text-primary);
padding: 10px 14px;
background: var(--bg-tint);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.about__values .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* ============================================
FAQ
============================================ */
.section--faq { background: var(--bg-band); }
.faq__container { max-width: var(--container-narrow); }
.faq {
display: flex;
flex-direction: column;
gap: 8px;
}
.faq__item {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
transition: border-color 0.2s var(--ease);
overflow: hidden;
}
.faq__item:hover { border-color: var(--border-strong); }
.faq__item[open] {
border-color: var(--border-accent);
background: var(--bg-hover);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
font-weight: 500;
font-size: 1rem;
letter-spacing: -0.005em;
cursor: pointer;
list-style: none;
color: var(--text-primary);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev {
color: var(--text-secondary);
transition: transform 0.25s var(--ease);
flex-shrink: 0;
}
.faq__item[open] .faq__chev { transform: rotate(180deg); color: var(--accent-text); }
.faq__body {
padding: 0 24px 22px;
font-size: 14.5px;
line-height: 1.6;
color: var(--text-secondary);
}
/* ============================================
CONTACT
============================================ */
.section--contact {
background: transparent;
position: relative;
overflow-x: clip; /* its 600px glow is wider than a phone; without this the page pans sideways */
}
.section--contact::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
filter: blur(60px);
pointer-events: none;
}
.contact__container {
position: relative;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: start;
}
.contact__sub {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 16px 0 32px;
}
.contact__meta {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
background: var(--bg-tint);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 14.5px;
color: var(--text-primary);
width: fit-content;
}
/* Form */
.contact__form {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.field label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: -0.005em;
}
.field input,
.field textarea {
background: var(--bg-input);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: 14.5px;
color: var(--text-primary);
transition: all 0.2s var(--ease);
width: 100%;
font-family: inherit;
resize: vertical;
}
.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field.has-error input,
.field.has-error textarea {
border-color: var(--danger);
}
.field__error {
font-size: 12.5px;
color: var(--danger);
min-height: 0;
transition: min-height 0.2s var(--ease);
}
.field.has-error .field__error { min-height: 16px; }
.form__success {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--accent-green-soft);
border: 1px solid var(--accent-green-border);
border-radius: var(--radius-md);
color: var(--accent-green);
font-size: 14px;
font-weight: 500;
}
.btn--loading {
opacity: 0.7;
pointer-events: none;
}
.btn--loading .btn__label::after {
content: '...';
animation: dots 1.2s steps(3, end) infinite;
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
/* ============================================
FOOTER
============================================ */
.footer {
background: transparent;
border-top: 1px solid var(--border-subtle);
padding-top: 64px;
}
.footer__inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 64px;
padding-bottom: 48px;
}
.footer__brand .nav__logo { margin-bottom: 16px; }
.footer__tag {
color: var(--text-secondary);
font-size: 14.5px;
max-width: 320px;
}
.footer__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.footer__col {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__col .mono-label { margin-bottom: 4px; }
.footer__col a {
color: var(--text-secondary);
font-size: 14px;
transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--accent-text); }
.footer__bottom {
border-top: 1px solid var(--border-subtle);
padding: 20px 0;
}
.footer__bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text-tertiary);
}
/* ============================================
ANIMATIONS — the scroll reveals live in fx.css / fx.js (overhaul Phase 2)
============================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 960px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.about__grid,
.contact__container,
.guide__container { grid-template-columns: 1fr; gap: 48px; }
.footer__inner { grid-template-columns: 1fr; gap: 40px; }
.guide__cover-img { max-width: 340px; }
}
/* Nav collapses below 1080px. With seven links (Games added Nov 2026) plus "Work with me" and the theme
toggle, the full row needs ~1014px; below that the links wrap to a second row and the bar grows.
The .nav__theme margin rule near the top of the nav styles uses the same breakpoint. */
@media (max-width: 1080px) {
.nav__links,
.nav__cta { display: none; }
.nav__menu-btn { display: flex; }
.nav__mobile.is-open { display: flex; }
}
@media (max-width: 720px) {
.hero { padding: 104px 0 56px; min-height: auto; }
.section { padding: 80px 0; }
.promise { padding: 24px 0 80px; }
.promise__inner { padding: 64px 20px; }
.grid--4 { grid-template-columns: 1fr; }
.about__values { grid-template-columns: 1fr; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.hero__ctas .btn { width: 100%; }
.hero__meta { flex-direction: column; gap: 4px; text-align: center; }
.guide__cover-img { max-width: 280px; }
.guide__price-row { flex-direction: column; align-items: stretch; }
.guide__price-row .btn { width: 100%; }
.guide__meta { gap: 20px; }
.contact__form { padding: 24px; }
.footer__cols { grid-template-columns: 1fr; gap: 32px; }
.footer__bottom-inner { flex-direction: column; gap: 8px; }
}
/* ============================================
V2 ADDITIONS — catalog, product, local, pitch
(same tokens; everything below reuses the
existing .section / .card / .btn system)
============================================ */
.container--narrow { max-width: var(--container-narrow); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid--3 { grid-template-columns: 1fr; } }
/* cards that are links */
.card--link { display: block; color: inherit; }
.card--link:hover { border-color: var(--border-accent); }
.card--link:hover .card__title { color: var(--accent-text); }
/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Compact hero (local, pitch, catalogs) ---------- */
.hero--compact { min-height: auto; padding: 150px 0 80px; }
.hero--compact .hero__title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
/* ---------- Product cards ---------- */
.product-card { padding: 0; display: flex; flex-direction: column; }
.product-card__cover {
width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top;
border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary);
}
.product-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card__body .card__title { margin: 2px 0 0; }
.product-card__foot {
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle);
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.product-card__price { font-weight: 600; color: var(--text-primary); }
.product-card__format { font-weight: 400; color: var(--text-tertiary); }
.empty {
padding: 48px 32px; border: 1px dashed var(--border-medium); border-radius: var(--radius-lg);
text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; gap: 20px;
}
/* ---------- Product page ---------- */
.product-hero { position: relative; padding: 150px 0 90px; background: transparent; overflow: hidden; }
.product-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.product-hero__title { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 8px 0 14px; }
.product-hero__sub { font-size: 1.15rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 28px; max-width: 560px; }
.product-hero__fine { margin-top: 20px; font-size: 0.85rem; color: var(--text-tertiary); }
.product-hero__cover .guide__cover { max-width: 420px; margin: 0 auto; }
.crumb { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 22px; }
.crumb:hover { color: var(--text-primary); }
@media (max-width: 960px) {
.product-hero__grid { grid-template-columns: 1fr; gap: 40px; }
.product-hero__cover { order: -1; }
.product-hero__cover .guide__cover { max-width: 300px; }
}
.includes { list-style: none; display: grid; gap: 10px; }
.includes li {
padding: 14px 18px 14px 44px; position: relative;
background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
color: var(--text-primary);
}
.includes li::before {
content: '✓'; position: absolute; left: 18px; top: 13px; color: var(--accent-text); font-weight: 700;
}
/* long-form markdown on dark */
.prose-dark { max-width: 44rem; font-size: 1.08rem; line-height: 1.7; color: var(--text-secondary); }
.prose-dark h2 { font-size: 1.6rem; color: var(--text-primary); letter-spacing: -0.02em; margin: 2.2rem 0 0.8rem; }
.prose-dark h3 { font-size: 1.2rem; color: var(--text-primary); margin: 1.8rem 0 0.6rem; }
.prose-dark p { margin: 0 0 1.1em; }
.prose-dark strong { color: var(--text-primary); font-weight: 600; }
.prose-dark a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose-dark ul, .prose-dark ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose-dark li { margin: 0.35em 0; }
.prose-dark li::marker { color: var(--accent-text); }
.prose-dark blockquote { border-left: 3px solid var(--accent-text); padding-left: 1.2rem; margin: 1.6rem 0; color: var(--text-primary); font-size: 1.2rem; }
.prose-dark code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-elevated); padding: 0.15em 0.4em; border-radius: 4px; }
/* ---------- Pricing cards (local) ---------- */
.price-card { display: flex; flex-direction: column; gap: 10px; }
.price-card__amount { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1; margin: 6px 0 4px; }
.price-card__per { font-size: 1rem; color: var(--text-tertiary); font-weight: 500; margin-left: 2px; }
.price-card--featured { border-color: var(--border-accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-card); }
.fineprint-dark { margin-top: 24px; font-size: 0.82rem; color: var(--text-tertiary); }
.fineprint-dark code { font-family: var(--font-mono); }
/* ---------- Pitch page ---------- */
.mockup { margin: 0; border: 1px solid var(--border-medium); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-elevated); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.mockup img { display: block; width: 100%; height: auto; }
.mockup figcaption { padding: 14px 20px; font-size: 0.9rem; color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); }
.audit { list-style: none; display: grid; gap: 12px; max-width: 44rem; }
.audit li {
padding: 16px 20px 16px 48px; position: relative; font-size: 1.05rem; line-height: 1.55;
background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary);
}
.audit li::before { content: '!'; position: absolute; left: 18px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.note { padding: 32px 36px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); border-left: 3px solid var(--danger); }
.note__sig { color: var(--text-primary); font-weight: 500; margin-top: 1.4rem !important; }
.offer { padding: 36px; }
.offer .includes { margin: 18px 0 10px; }
.offer .btn { align-self: flex-start; margin-top: 10px; }
.offer__timeline { color: var(--text-secondary); }
/* ---------- Thanks ---------- */
.page-narrow { padding: 170px 0 120px; }
.thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.thanks__check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-deep); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
/* ---------- Email signup strip ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signup { background: transparent; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 96px 0; }
.signup__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.signup__text .section__title { margin-bottom: 12px; }
.signup__form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.signup__form .signup__field { margin: 0; }
.signup__form input[type="email"] {
width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: 0.85em 1em;
background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: var(--radius-md); color: var(--text-primary);
}
.signup__form input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.signup__form .btn { white-space: nowrap; padding-top: 0.9em; padding-bottom: 0.9em; }
.signup__form .form__success, .signup__fine { grid-column: 1 / -1; }
.signup__fine { font-size: 0.8rem; color: var(--text-tertiary); margin: 0; }
@media (max-width: 960px) { .signup__inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 720px) { .signup__form { grid-template-columns: 1fr; } .signup__form .btn { width: 100%; } }
/* ---------- Home: services + steps ---------- */
.service-card { display: flex; flex-direction: column; }
.service-card__cta { margin-top: auto; padding-top: 16px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--accent-text); }
.step-card .card__title { margin-top: 10px; font-size: 1.15rem; }
.product-card--browse { border-style: dashed; }
.product-card--browse .product-card__body { justify-content: center; }
/* ---------- Local pricing v2 ---------- */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid--2 { grid-template-columns: 1fr; } }
.pricing-grid .price-card { padding: 26px 22px; }
.price-card__alt { margin: -2px 0 2px; font-size: 0.9rem; color: var(--text-secondary); }
.price-card__alt strong { color: var(--text-primary); font-weight: 600; }
.price-card__tag { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; margin: 4px 0 6px; }
.price-card__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.price-card__list li { position: relative; padding-left: 20px; font-size: 0.92rem; line-height: 1.45; color: var(--text-primary); }
.price-card__list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-text); font-weight: 700; font-size: 0.85rem; }
.price-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.45; }
.price-card .price-card__amount { font-size: 2.1rem; }
@media (max-width: 1100px) and (min-width: 721px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Pitch preview ribbon ---------- */
.preview-ribbon {
position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 28px;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--accent-deep); color: var(--text-on-accent);
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-ribbon__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.9; animation: ribbonPulse 1.6s ease-in-out infinite; }
@keyframes ribbonPulse { 0%,100% { opacity: 0.9 } 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) { .preview-ribbon__dot { animation: none; } }
body:has(.preview-ribbon) .nav { top: 28px; }
body:has(.preview-ribbon) .hero--compact { padding-top: 178px; }
.pitch-preview-cta { margin: 28px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pitch-preview-cta .fineprint-dark { margin: 0; }
/* ---------- Info row (wide card that links somewhere) ---------- */
.info-row { display: flex; align-items: center; gap: 22px; padding: 24px 28px; }
.info-row .card__icon { margin: 0; flex-shrink: 0; }
.info-row__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.info-row__text .card__title { margin: 0; }
.info-row__cta { margin: 0; padding: 0; white-space: nowrap; }
.info-row--spaced { margin-top: 16px; }
@media (max-width: 720px) {
.info-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ---------- Pitch page v3: free fixes + embedded preview ---------- */
.fixes { list-style: none; display: grid; gap: 12px; max-width: 44rem; }
.fixes li {
padding: 16px 20px 16px 48px; position: relative; font-size: 1.05rem; line-height: 1.55;
background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary);
}
.fixes li::before { content: '✓'; position: absolute; left: 18px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
/* Commission math (restaurant pitches: client.pitch.commission) */
.math { display: grid; gap: 0; max-width: 44rem; margin: 0 0 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); overflow: hidden; }
.math__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); }
.math__row:first-child { border-top: 0; }
.math dt { color: var(--text-secondary); font-size: 1rem; line-height: 1.45; }
.math dd { margin: 0; color: var(--text-primary); font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.math__notes { margin-bottom: 16px; }
.math__notes li::before { content: 'i'; background: var(--accent-soft); color: var(--accent-text); }
/* Ordering options (client.pitch.orderingOptions) */
.opts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; counter-reset: opt; }
.opt { position: relative; padding: 18px 20px 16px 58px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); counter-increment: opt; }
.opt::before { content: counter(opt); position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 0.9rem; }
.opt--tagged { border-color: var(--accent-border, var(--accent)); }
.opt__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.opt__name { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.opt__tag { font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.opt__how { margin: 8px 0 10px; color: var(--text-secondary); line-height: 1.55; }
.opt__facts { display: grid; gap: 6px; margin: 0; }
.opt__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; }
.opt__facts dt { color: var(--text-muted, var(--text-secondary)); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.opt__facts dd { margin: 0; color: var(--text-primary); line-height: 1.5; }
@media (max-width: 520px) { .opt { padding-left: 20px; padding-top: 52px; } .opt::before { top: 16px; left: 20px; } .opt__facts div { grid-template-columns: 1fr; gap: 0; } }
.opts__rec { max-width: 44rem; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--text-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* "Try this on your phone" (client.pitch.tryThis) */
.try { max-width: 40rem; margin: 28px auto 8px; padding: 18px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); text-align: left; }
.try__title { margin: 0 0 10px; font-size: 1.05rem; color: var(--text-primary); }
.try__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; color: var(--text-secondary); line-height: 1.5; }
/* The preview, framed like a phone. On phones the frame is pointless — the button opens the real thing. */
.phone { display: none; justify-content: center; }
.phone__frame {
width: 400px; height: 780px; padding: 12px; border-radius: 44px;
background: #0d0f14; border: 1px solid var(--border-medium);
box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.phone__screen { width: 100%; height: 100%; border: 0; border-radius: 34px; background: #fff; display: block; }
@media (min-width: 860px) { .phone { display: flex; } .pitch-mockup .pitch-preview-cta { align-items: center; text-align: center; } }
/* ---------- Templates: row on /local/, gallery, detail page (v4) ---------- */
.section--templates { background: transparent; border-bottom: 1px solid var(--border-subtle); }
.tpl-row { align-items: stretch; }
.tpl-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 20px; }
.tpl-card--row { text-decoration: none; }
.tpl-card--row:hover { border-color: var(--border-accent); }
.tpl-card--row .card__title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.tpl-card__shot { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); background: #fff; }
.tpl-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tpl-card__poster { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; width: 100%; height: 100%; padding: 10% 8% 9%; background: var(--pp); color: var(--pi); }
.tpl-card__poster-badge { position: absolute; top: 9%; left: 8%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pa); opacity: 0.85; }
.tpl-card__poster-name { font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.45rem); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; color: var(--pa); margin-bottom: 4px; }
.tpl-card__poster-row { height: 6px; width: 72%; border-radius: 3px; background: var(--pl); }
.tpl-card__poster-row:nth-of-type(2) { width: 54%; }
.tpl-card__poster-row:nth-of-type(3) { width: 63%; }
.tpl-card .mono-label { margin-top: 4px; }
.tpl-card .card__title { font-size: 1.1rem; }
.tpl-card .card__title a { color: inherit; }
.tpl-card .card__title a:hover { color: var(--accent-text); }
.tpl-card__line { font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); }
.tpl-card--other { border-style: dashed; justify-content: center; }
.tpl-card--other .card__body { font-size: 0.92rem; color: var(--text-secondary); }
.tpl-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.tpl-card[hidden] { display: none; }
.tpl-row__more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.tpl-row__more .fineprint-dark { margin: 0; }
/* Gallery chips */
.chips { display: grid; gap: 12px; margin-bottom: 20px; }
.chips__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips__group .mono-label { margin-right: 6px; }
.chip {
font: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2;
color: var(--text-secondary); background: var(--bg-elevated);
border: 1px solid var(--border-medium); border-radius: 999px; padding: 7px 14px;
cursor: pointer; transition: all 0.2s var(--ease);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { color: var(--text-primary); background: var(--accent-soft); border-color: var(--accent); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips__count { margin-bottom: 20px; }
.tpl-grid .tpl-card h2.card__title { margin: 0; }
/* Detail page: the demo in a desktop frame and the phone frame side by side */
.tpl-frames { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1100px) { .tpl-frames { grid-template-columns: minmax(0, 1fr) 400px; } }
.desk { border: 1px solid var(--border-medium); border-radius: var(--radius-lg); overflow: hidden; background: #0d0f14; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.desk__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.desk__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: none; }
.desk__bar > .desk__url { flex: 1 1 auto; width: auto; height: auto; border-radius: 0; background: transparent; margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk__viewport { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; background: #fff; container-type: inline-size; }
.desk__screen { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(tan(atan2(100cqw, 1280px))); }
.tpl-showcase .pitch-preview-cta { margin-top: 32px; }
/* Standard vs custom, and "what's in it" — two cards */
.tpl-standard { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 860px) { .tpl-standard { grid-template-columns: 1fr 1fr; } }
.tpl-standard .price-card { display: flex; flex-direction: column; }
.tpl-standard .price-card__list { margin-top: 12px; }
.tpl-standard--custom .price-card__list li::before { content: '→'; }
.tpl-standard .price-card__foot a { color: var(--accent-text); }
/* Select fields (the Template picker on the quote form) */
.field select {
width: 100%; font-family: inherit; font-size: 14.5px; color: var(--text-primary);
background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-md);
padding: 12px 40px 12px 14px; appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
transition: all 0.2s var(--ease);
}
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field select option, .field select optgroup { color: #1A1F2E; background: #fff; }
.field__hint { font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); }
.field__hint strong { color: var(--text-primary); font-weight: 600; }
.field__hint a { color: var(--accent-text); }
/* Catalog categories (layouts/catalog.njk with groupBy: toolCategories): sticky jump nav + one section per category. */
.cat-nav { position: sticky; top: 72px; z-index: 20; margin: 0 -24px 8px; padding: 12px 24px; background: color-mix(in srgb, var(--bg-primary) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.cat-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cat-nav__list::-webkit-scrollbar { display: none; }
.cat-nav .chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.cat-nav .chip[aria-current="true"] { color: var(--text-primary); background: var(--accent-soft); border-color: var(--accent); }
.cat-nav__count { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.75; }
.cat-group { padding-top: 40px; scroll-margin-top: calc(72px + 64px); }
.cat-group__head { margin-bottom: 20px; }
.cat-group__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; }
.cat-group__blurb { margin: 0; color: var(--text-secondary); font-size: 0.98rem; max-width: 60ch; }
.cat-notice { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 12px 6px 10px; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); background: var(--accent-green-soft); border: 1px solid var(--accent-green-border); border-radius: 999px; cursor: help; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.cat-notice:hover { border-color: var(--accent-green); }
.cat-notice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cat-notice svg { flex-shrink: 0; color: var(--accent-green); }
@media (prefers-reduced-motion: reduce) { .cat-notice { transition: none; } }
/* Shared lightbox (native