/* NOTE: Fonts are loaded via non-blocking in index.html
(media="print" onload="this.media='all'" pattern) instead of this
file, so the @import does not block CSSOM construction. Do not add
@import back without also removing the corresponding tags. */
/* ───── Tokens ───────────────────────────────────────────────────── */
:root{
/* Surfaces (warm cream stack) */
--paper: #f6f1e9; /* main canvas */
--paper-warm: #fffdf8; /* card/surface, brighter */
--paper-deep: #ece5d4; /* subtle elevation, inset wells */
--paper-edge: #dbd2bf; /* divider against deep */
/* Ink (warm-leaning blacks) */
--ink: #1a1814; /* primary text + buttons */
--ink-soft: #3a342c; /* H2/H3 secondary */
--ink-mute: #6b6760; /* body subdued */
--ink-faint: #9c9588; /* hints, captions, meta */
/* Lines */
--line: #e6dfd2; /* hairline */
--line-strong: #d6cfc1; /* visible borders, button outlines */
/* Lavender — Nuvex thread */
--lav: #8b78d4; /* primary accent */
--lav-deep: #6e5cb8; /* hover/pressed */
--lav-soft: #b8a5e8; /* highlights, periods */
--lav-mist: #ede7fa; /* tints, selection bg */
--lav-glow: rgba(139,120,212,.35);
/* Type scale (fluid) */
--font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--fs-display: clamp(48px, 7.2vw, 92px); /* hero h1 */
--fs-h1: clamp(36px, 5vw, 60px);
--fs-h2: clamp(28px, 3.6vw, 44px);
--fs-h3: clamp(22px, 2.4vw, 28px);
--fs-lead: clamp(16px, 1.6vw, 19px); /* hero sub */
--fs-body: 16px;
--fs-small: 13.5px;
--fs-micro: 12px;
/* Spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
--s-9: 96px; --s-10:128px; --s-11:160px;
/* Radius */
--r-1: 6px; --r-2: 10px; --r-3: 14px;
--r-4: 18px; --r-5: 24px; --r-6: 32px;
--pill: 999px;
/* Shadows — warm, ink-tinted, not blue */
--shadow-1: 0 1px 2px rgba(26,24,20,.05);
--shadow-2: 0 8px 24px -8px rgba(26,24,20,.10), 0 2px 6px -2px rgba(26,24,20,.06);
--shadow-3: 0 24px 60px -16px rgba(26,24,20,.18), 0 8px 20px -8px rgba(26,24,20,.10);
--shadow-4: 0 40px 100px -24px rgba(26,24,20,.24), 0 16px 36px -12px rgba(26,24,20,.14);
--shadow-lav:0 16px 48px -12px var(--lav-glow), 0 4px 12px -4px rgba(110,92,184,.18);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
/* Motion */
--ease: cubic-bezier(.22, 1, .36, 1);
--ease-soft: cubic-bezier(.4, 0, .2, 1);
--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
--t-fast: .18s;
--t-base: .28s;
--t-slow: .55s;
--t-reveal:.85s;
/* Layout */
--max-w: 1200px;
--max-w-tight: 960px;
--max-w-text: 680px;
--gutter: clamp(20px, 4vw, 48px);
--section-pad: clamp(80px, 10vw, 140px);
/* Z-stack */
--z-base: 1;
--z-sticky: 50;
--z-overlay: 80;
--z-modal: 100;
/* ─── Backward-compat aliases ─────────────────────────────────────
Older modules (auth.js, intake-form.html, results.html, dashboard
pages, etc.) reference legacy variable names with hardcoded indigo
fallbacks. These aliases re-point them to the new cream-editorial
tokens so nothing has to change all at once. Remove once every page
is migrated to the new tokens. */
--bg: var(--paper);
--sf: var(--paper-warm);
--sf2: var(--paper-deep);
--sf3: var(--paper-edge);
--bd: var(--line);
--bd2: var(--line-strong);
--tx: var(--ink);
--tx2: var(--ink-mute);
--tx3: var(--ink-faint);
--ac: var(--lav);
--ac-h: var(--lav-deep);
--ac-l: var(--lav-soft);
--ac-ll:var(--lav-mist);
}
/* ───── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
text-rendering:optimizeLegibility;
}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.6;
letter-spacing:-.005em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"ss01","cv01","cv11";
overflow-x:hidden;
min-height:100vh;
}
a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg,video,picture{display:block;max-width:100%}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:var(--r-1)}
::selection{background:var(--lav-mist);color:var(--lav-deep)}
/* ───── Typography ───────────────────────────────────────────────── */
.serif{
font-family:var(--font-display);
font-weight:400;
letter-spacing:-.015em;
line-height:1.02;
}
.serif-i{
font-family:var(--font-display);
font-weight:400;
font-style:italic;
letter-spacing:-.005em;
line-height:1.02;
}
h1,h2,h3,h4{font-family:var(--font-body);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.h-display{
font-family:var(--font-display);
font-weight:400;
font-size:var(--fs-display);
line-height:1.0;
letter-spacing:-.022em;
color:var(--ink);
}
.h-1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.035em}
.h-2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.03em}
.h-3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-mute)}
.muted{color:var(--ink-mute)}
.faint{color:var(--ink-faint)}
/* The one accent we allow: italic period highlight on headlines */
.lav-period{color:var(--lav);font-style:italic}
/* ───── Layout primitives ────────────────────────────────────────── */
.section{padding:var(--section-pad) var(--gutter)}
.section-sm{padding:var(--s-9) var(--gutter)}
.section-tight{padding:var(--s-7) var(--gutter)}
.container{max-width:var(--max-w);margin:0 auto;width:100%}
.container-tight{max-width:var(--max-w-tight);margin:0 auto;width:100%}
.container-text{max-width:var(--max-w-text);margin:0 auto;width:100%}
.divider{height:1px;background:var(--line);width:100%}
/* ───── Eyebrow (small uppercase label) ──────────────────────────── */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-body);
font-size:11px;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;
color:var(--lav-deep);
}
.eyebrow::before{
content:"";width:18px;height:1px;background:currentColor;opacity:.5;
}
/* ───── Buttons ──────────────────────────────────────────────────── */
/* Rectangular, clean, modern. Inline arrow (no Appshots circular disc).
Use .btn-ink for primary, .btn-line for secondary, .btn-ghost for tertiary. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:46px;padding:0 22px;
border-radius:var(--r-3); /* 14px — rectangular w/ slight round */
font-family:var(--font-body);
font-size:14px;font-weight:600;letter-spacing:-.005em;
white-space:nowrap;border:1px solid transparent;
transition:transform var(--t-base) var(--ease),
background-color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
color var(--t-base) var(--ease);
cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{height:38px;padding:0 14px;font-size:13px;border-radius:10px}
.btn-lg{height:52px;padding:0 26px;font-size:14.5px;border-radius:var(--r-3)}
/* Primary: solid ink */
.btn-ink{
background:var(--ink);color:var(--paper);
box-shadow:var(--shadow-1);
}
.btn-ink:hover{background:#000;box-shadow:var(--shadow-2)}
/* Lavender: celebratory accent */
.btn-lav{
background:var(--lav);color:#fff;
box-shadow:0 6px 18px -6px var(--lav-glow);
}
.btn-lav:hover{background:var(--lav-deep);box-shadow:0 10px 26px -8px rgba(110,92,184,.45)}
/* Outlined: secondary */
.btn-line{
background:transparent;color:var(--ink);
border-color:var(--line-strong);
}
.btn-line:hover{border-color:var(--ink);background:var(--paper-warm)}
/* Cream: subtle elevated, for use against dark/lavender backgrounds */
.btn-cream{
background:var(--paper-warm);color:var(--ink);
border-color:var(--line-strong);
box-shadow:var(--shadow-1);
}
.btn-cream:hover{border-color:var(--ink);box-shadow:var(--shadow-2)}
/* Tertiary: text-style, no background until hover */
.btn-ghost{
height:38px;padding:0 12px;border-radius:10px;
color:var(--ink-soft);font-weight:500;
}
.btn-ghost:hover{color:var(--ink);background:var(--paper-deep)}
/* Inline arrow icon (NO circle disc — that's Appshots' signature, we don't use it) */
.btn .arr{
width:14px;height:14px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
transition:transform var(--t-base) var(--ease);
}
.btn .arr svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .arr{transform:translateX(3px)}
/* ───── Cards ────────────────────────────────────────────────────── */
.card{
background:var(--paper-warm);
border:1px solid var(--line);
border-radius:var(--r-4);
padding:var(--s-7);
transition:transform var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease);
}
.card-hover:hover{
transform:translateY(-4px);
border-color:var(--line-strong);
box-shadow:var(--shadow-3);
}
.card-flush{padding:0;overflow:hidden}
.card-bare{background:transparent;border:none;padding:0}
/* ───── Tag / Chip ───────────────────────────────────────────────── */
.tag{
display:inline-flex;align-items:center;gap:6px;
height:28px;padding:0 12px;border-radius:var(--pill);
background:var(--paper-warm);border:1px solid var(--line-strong);
font-size:11.5px;font-weight:600;letter-spacing:.04em;
color:var(--ink-soft);
}
.tag-lav{background:var(--lav-mist);border-color:transparent;color:var(--lav-deep)}
.tag-ink{background:var(--ink);border-color:transparent;color:var(--paper)}
.rv{
opacity:0;transform:translateY(28px);
transition:opacity var(--t-reveal) var(--ease),
transform var(--t-reveal) var(--ease);
will-change:opacity,transform;
}
.rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}
.rv-d5{transition-delay:.40s}
.rv-d6{transition-delay:.48s}
/* Stagger children when parent reveals */
.stagger > *{
opacity:0;transform:translateY(20px);
transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.stagger.vis > *:nth-child(1){opacity:1;transform:none;transition-delay:.0s}
.stagger.vis > *:nth-child(2){opacity:1;transform:none;transition-delay:.06s}
.stagger.vis > *:nth-child(3){opacity:1;transform:none;transition-delay:.12s}
.stagger.vis > *:nth-child(4){opacity:1;transform:none;transition-delay:.18s}
.stagger.vis > *:nth-child(5){opacity:1;transform:none;transition-delay:.24s}
.stagger.vis > *:nth-child(6){opacity:1;transform:none;transition-delay:.30s}
.stagger.vis > *:nth-child(7){opacity:1;transform:none;transition-delay:.36s}
.stagger.vis > *:nth-child(8){opacity:1;transform:none;transition-delay:.42s}
/* ───── Word-reveal headline (used in hero) ──────────────────────── */
.word-reveal{display:inline}
.word-reveal .w{
display:inline-block;opacity:0;
transform:translateY(.4em) rotate(2deg);
transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.word-reveal.go .w{opacity:1;transform:none}
.word-reveal.go .w:nth-child(1){transition-delay:.05s}
.word-reveal.go .w:nth-child(2){transition-delay:.12s}
.word-reveal.go .w:nth-child(3){transition-delay:.19s}
.word-reveal.go .w:nth-child(4){transition-delay:.26s}
.word-reveal.go .w:nth-child(5){transition-delay:.33s}
.word-reveal.go .w:nth-child(6){transition-delay:.40s}
.word-reveal.go .w:nth-child(7){transition-delay:.47s}
.word-reveal.go .w:nth-child(8){transition-delay:.54s}
.word-reveal.go .w:nth-child(9){transition-delay:.61s}
.word-reveal.go .w:nth-child(10){transition-delay:.68s}
/* ───── Texture: subtle paper grain ──────────────────────────────── */
.grain{position:relative}
.grain::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;opacity:.18;z-index:1;
}
/* ───── Marquee (auto-scrolling row) ─────────────────────────────── */
.marquee{
position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.marquee-track{
display:flex;gap:var(--s-4);
width:max-content;
animation:marquee 60s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
/* ───── Phone-ratio placeholder (compact — used in showcase grids) ── */
.phone-card{
flex-shrink:0;
width:160px;aspect-ratio:9/19.5;
border-radius:var(--r-4);
background:var(--paper-warm);
border:1px solid var(--line);
box-shadow:var(--shadow-1);
overflow:hidden;
display:flex;align-items:flex-end;justify-content:center;
position:relative;
transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.phone-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.phone-card img{width:100%;height:100%;object-fit:cover}
.phone-card .ph-label{
position:absolute;inset:auto 0 0 0;padding:16px 12px 18px;
background:linear-gradient(to top, rgba(26,24,20,.55), transparent);
color:var(--paper);font-size:10px;font-weight:600;text-align:center;
text-transform:uppercase;letter-spacing:.12em;
opacity:0;transition:opacity var(--t-base) var(--ease);
}
.phone-card:hover .ph-label{opacity:1}
/* Size variants — keep modest. Never larger than 220px. */
.phone-card.lg{width:180px}
.phone-card.xl{width:200px}
/* ───── Skip-to-content (a11y) ───────────────────────────────────── */
.skip{
position:fixed;top:-100px;left:16px;z-index:200;
background:var(--ink);color:var(--paper);
padding:10px 16px;border-radius:var(--r-2);font-size:13px;font-weight:600;
transition:top var(--t-base) var(--ease);
}
.skip:focus{top:16px}
/* ───── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.marquee-track{animation:none}
}
/* ───── Mobile tightening ────────────────────────────────────────── */
@media (max-width:720px){
:root{
--section-pad:80px;
--s-7:36px;--s-8:48px;--s-9:64px;--s-10:80px;
}
.btn{height:48px;padding:0 6px 0 22px}
.btn .arrow{width:32px;height:32px}
.phone-card{width:200px}
.phone-card.lg{width:240px}
.phone-card.xl{width:260px}
}