/* * NAVOXO — Design System v2.0 (Production Rebuild) * Themes: IVORY (default) · VOID (opt-in) * Fonts: Inter (UI/headings) · Cormorant Garamond (emotional) */ /* Font loading moved to tags in each page's for parallel, non-render-blocking fetch — @import here would serialize the font request behind this entire stylesheet's download, directly hurting LCP/FCP. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background-color: var(--bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: var(--font-sans); border: none; background: none; } input, textarea, select { font-family: var(--font-sans); } ul, ol { list-style: none; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* ── FONTS ── */ :root { --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-mono: 'DM Mono', 'SF Mono', 'Fira Code', monospace; } /* ── Z-INDEX SCALE (fix: scalable system) ── */ :root { --z-base: 1; --z-deco: 5; --z-content: 10; --z-sticky: 50; --z-nav: 900; --z-mobile-nav: 950; --z-modal: 1000; --z-toast: 1100; --z-skiplink: 9999; } /* ── IVORY (default) ── */ :root, [data-theme="ivory"] { --bg: #F7F5F0; --surface-1: #FFFFFF; --surface-2: #FBF9F5; --surface-3: #F1ECE2; --text-primary: #1A1815; --text-secondary: #5C5750; --text-tertiary: #8A8478; --ember: #D87C3E; --ember-hover: #C26A2E; --ember-subtle: rgba(216,124,62,0.10); --ember-border: rgba(216,124,62,0.20); --blue: #2F5FC4; --blue-subtle: rgba(47,95,196,0.10); --border: rgba(26,24,21,0.08); --border-strong: rgba(26,24,21,0.14); --border-focus: rgba(216,124,62,0.45); --nav-bg: rgba(247,245,240,0.88); --btn-primary-bg: #1A1815; --btn-primary-text: #FFFFFF; --btn-primary-hover: #322E28; --btn-ghost-text: #5C5750; --btn-ghost-border: rgba(26,24,21,0.14); --btn-ghost-hover: rgba(26,24,21,0.05); --toggle-bg: #FFFFFF; --toggle-active: #1A1815; --input-bg: #FFFFFF; --input-border: rgba(26,24,21,0.16); --input-focus: rgba(216,124,62,0.45); --shadow-card: 0 1px 2px rgba(26,24,21,0.04), 0 8px 24px rgba(26,24,21,0.06); --shadow-card-hover: 0 4px 8px rgba(26,24,21,0.05), 0 16px 36px rgba(26,24,21,0.10); --shadow-modal: 0 16px 56px rgba(26,24,21,0.16); --success: #2E7D4F; --error: #C4453A; } /* ── VOID (opt-in) ── */ [data-theme="void"] { --bg: #09090F; --surface-1: #0F1018; --surface-2: #161821; --surface-3: #1E2130; --text-primary: #F4F1EB; --text-secondary: #A6A3B2; /* lightened from #8E8B9A for contrast fix */ --text-tertiary: #6E6A80; /* lightened from #4A4860 for contrast fix */ --ember: #E8924A; --ember-hover: #C4703A; --ember-subtle: rgba(232,146,74,0.10); --ember-border: rgba(232,146,74,0.18); --blue: #5C8AEE; /* lightened from #4A7DE8 for contrast fix */ --blue-subtle: rgba(92,138,238,0.10); --border: rgba(232,146,74,0.08); --border-strong: rgba(232,146,74,0.18); --border-focus: rgba(232,146,74,0.45); --nav-bg: rgba(9,9,15,0.92); --btn-primary-bg: #E8924A; --btn-primary-text: #09090F; --btn-primary-hover: #C4703A; --btn-ghost-text: #A6A3B2; --btn-ghost-border: rgba(232,146,74,0.18); --btn-ghost-hover: rgba(232,146,74,0.07); --toggle-bg: #0F1018; --toggle-active: #E8924A; --input-bg: #0F1018; --input-border: rgba(232,146,74,0.18); --input-focus: rgba(232,146,74,0.45); --shadow-card: 0 1px 3px rgba(0,0,0,0.26), 0 4px 16px rgba(0,0,0,0.22); --shadow-card-hover: 0 4px 10px rgba(0,0,0,0.30), 0 16px 40px rgba(0,0,0,0.32); --shadow-modal: 0 8px 40px rgba(0,0,0,0.55); --success: #4FAE74; --error: #E0685C; } /* ── TRANSITIONS (fix: no global * transitions — explicit allowlist only) ── */ :root { --transition-theme: 350ms cubic-bezier(0.16,1,0.3,1); --transition-fast: 150ms cubic-bezier(0.16,1,0.3,1); --transition-base: 220ms cubic-bezier(0.16,1,0.3,1); --transition-slow: 450ms cubic-bezier(0.16,1,0.3,1); --transition-path: 600ms cubic-bezier(0.16,1,0.3,1); } /* Theme-aware elements — scoped, not a blanket `*` rule (perf + no fighting transitions) */ .theme-aware, body, .nav, .footer, .card, .card-flat, .btn, .form-input, .theme-toggle, .tt-option, .price-card, .story-card, .social-card, .article-card, .faq-item, .progress-track, .commit-card { transition: background-color var(--transition-theme), border-color var(--transition-theme), color var(--transition-theme); } /* Hover/interactive elements get an additional, separate transition layer */ .btn, .card, .social-card, .nav-link, .faq-icon, .price-card, .article-card { transition: background-color var(--transition-theme), border-color var(--transition-theme), color var(--transition-theme), transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base); } /* ── SPACING ── */ :root { --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --nav-h:68px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-full:100px; } /* ── TYPOGRAPHY ── */ /* ── LAYOUT ── */ .container { width:100%; max-width:1140px; margin:0 auto; padding:0 var(--sp-12); } .section { padding:var(--sp-24) var(--sp-12); } /* ── EYEBROW ── */ .eyebrow { display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ember); margin-bottom:var(--sp-4); } .eyebrow-line { display:inline-block; width:18px; height:1px; background:var(--ember); border-radius:1px; flex-shrink:0; } /* ── BUTTONS ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); font-weight:500; font-size:14px; letter-spacing:-.01em; border-radius:var(--radius-md); padding:11px 22px; border:1px solid transparent; white-space:nowrap; line-height:1; } .btn:focus-visible { outline:2px solid var(--ember); outline-offset:3px; } .btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; } .btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-bg); } .btn-primary:hover { background:var(--btn-primary-hover); border-color:var(--btn-primary-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.12); } .btn-primary:active { transform:translateY(0); } .btn-ember { background:var(--ember); color:#fff; border-color:var(--ember); } .btn-ember:hover { background:var(--ember-hover); border-color:var(--ember-hover); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.12); } .btn-ember:active { transform:translateY(0); } .btn-ghost { background:transparent; color:var(--btn-ghost-text); border-color:var(--btn-ghost-border); } .btn-ghost:hover { background:var(--btn-ghost-hover); color:var(--text-primary); } .btn-sm { font-size:13px; padding:8px 16px; } .btn-lg { font-size:15px; padding:13px 28px; } .btn-loading { position:relative; color:transparent !important; pointer-events:none; } .btn-loading::after { content:''; position:absolute; width:14px; height:14px; top:50%; left:50%; margin:-7px 0 0 -7px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:btnspin .7s linear infinite; } [data-theme="ivory"] .btn-ghost.btn-loading::after { border-color:rgba(17,16,24,.25); border-top-color:var(--text-primary); } @keyframes btnspin { to { transform:rotate(360deg); } } /* ── CHEVRON CTA (Parley-style: ember square chevron + dark pill label) ── */ /* ── CARDS ── */ .card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp-8); position:relative; overflow:hidden; } .card::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:var(--ember); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(0.16,1,0.3,1); } .card:hover { border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow-card-hover); } .card:hover::before { transform:scaleX(1); } .card-flat { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp-8); } /* ── INTERACTIVE REVEAL CARD ── (Parley "Why us" pattern: click/tap reveals detail panel) */ .reveal-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);} .reveal-card{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--sp-6);min-height:340px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;position:relative;overflow:hidden;transition:background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);} .reveal-card:hover,.reveal-card:focus-visible,.reveal-card.is-active{background:var(--surface-1);border-color:var(--border-strong);box-shadow:var(--shadow-card-hover);transform:translateY(-4px);} .reveal-card-num{font-family:var(--font-mono);font-size:34px;font-weight:500;color:var(--border-strong);line-height:1;transition:opacity var(--transition-base);} .reveal-card.is-active .reveal-card-num,.reveal-card:hover .reveal-card-num,.reveal-card:focus-visible .reveal-card-num{opacity:0;position:absolute;} .reveal-card-dots{position:absolute;top:var(--sp-6);right:var(--sp-6);width:90px;height:90px;opacity:0.5;transition:opacity var(--transition-base);} .reveal-card.is-active .reveal-card-dots,.reveal-card:hover .reveal-card-dots,.reveal-card:focus-visible .reveal-card-dots{opacity:0;} .reveal-card-mock{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--sp-4);box-shadow:var(--shadow-card);opacity:0;transform:translateY(8px);transition:opacity var(--transition-base),transform var(--transition-base);pointer-events:none;} .reveal-card.is-active .reveal-card-mock,.reveal-card:hover .reveal-card-mock,.reveal-card:focus-visible .reveal-card-mock{opacity:1;transform:translateY(0);} .reveal-card-title{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary);margin-top:var(--sp-4);} .reveal-card-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.65;margin-top:var(--sp-2);max-height:0;opacity:0;overflow:hidden;transition:max-height var(--transition-base),opacity var(--transition-base),margin-top var(--transition-base);} .reveal-card.is-active .reveal-card-desc,.reveal-card:hover .reveal-card-desc,.reveal-card:focus-visible .reveal-card-desc{max-height:120px;opacity:1;} /* ── TESTIMONIAL CARD STACK ── (Parley pattern: horizontal cards, center one is featured/orange, hover lifts) */ .testi-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);} .testi-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--sp-7);display:flex;flex-direction:column;justify-content:space-between;min-height:280px;transition:transform var(--transition-base),box-shadow var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base);cursor:pointer;} .testi-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(216,124,62,0.30);background:linear-gradient(160deg,var(--ember) 0%,#E8A368 100%);border-color:transparent;color:#fff;} .testi-quote{font-size:15px;line-height:1.65;color:var(--text-secondary);transition:color var(--transition-base);} .testi-card:hover .testi-quote{color:rgba(255,255,255,0.95);} .testi-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-6);} .testi-person{display:flex;align-items:center;gap:var(--sp-3);} .testi-avatar{width:42px;height:42px;border-radius:var(--radius-md);background:var(--surface-3);border:2px solid var(--surface-1);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-secondary);flex-shrink:0;transition:border-color var(--transition-base),background-color var(--transition-base),color var(--transition-base);} .testi-card:hover .testi-avatar{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.15);color:#fff;} .testi-name{font-size:14px;font-weight:600;color:var(--text-primary);transition:color var(--transition-base);} .testi-card:hover .testi-name{color:#fff;} .testi-role{font-size:12px;color:var(--text-tertiary);transition:color var(--transition-base);} .testi-card:hover .testi-role{color:rgba(255,255,255,0.75);} .testi-source{font-size:11px;font-weight:500;color:#fff;background:rgba(26,24,21,0.85);padding:5px 10px;border-radius:var(--radius-full);opacity:0;transform:translateY(4px);transition:opacity var(--transition-base),transform var(--transition-base);} .testi-card:hover .testi-source{opacity:1;transform:translateY(0);} /* ── FORMS ── */ .form-group { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); } .form-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); } .form-input { width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--radius-md); padding:12px 16px; font-size:14px; color:var(--text-primary); outline:none; transition:border-color var(--transition-fast), background-color var(--transition-theme); } .form-input::placeholder { color:var(--text-tertiary); } .form-input:focus { border-color:var(--input-focus); } .form-input.is-invalid { border-color:var(--error); } .form-error { font-size:12px; color:var(--error); margin-top:2px; display:none; } .form-error.is-visible { display:block; } .form-textarea { resize:vertical; min-height:120px; line-height:1.6; } /* ── ICONS ── */ .icon { display:inline-block; width:20px; height:20px; flex-shrink:0; } .icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } /* ── NAV ── */ .nav { position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-12); background:var(--nav-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border); } .nav-logo { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; } .nav-logo-mark { width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .nav-logo-mark img { width:100%; height:100%; object-fit:contain; } .nav-logo-name { font-weight:500; font-size:16px; letter-spacing:-.01em; color:var(--text-primary); } .nav-links { display:flex; align-items:center; gap:var(--sp-1); } .nav-link { font-size:14px; font-weight:400; color:var(--text-secondary); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); text-decoration:none; } .nav-link:hover, .nav-link.active { color:var(--text-primary); background:var(--ember-subtle); } .nav-link:focus-visible { outline:2px solid var(--ember); outline-offset:2px; } .nav-right { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; } /* Mobile nav toggle (fix: complete mobile nav system) */ .nav-burger { display:none; width:36px; height:36px; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:transparent; border:1px solid var(--border-strong); flex-shrink:0; } .nav-burger:focus-visible { outline:2px solid var(--ember); outline-offset:2px; } .nav-burger-icon { width:16px; height:11px; position:relative; } .nav-burger-icon span { position:absolute; left:0; width:100%; height:1.4px; background:var(--text-primary); border-radius:1px; transition:transform .25s, opacity .25s, top .25s; } .nav-burger-icon span:nth-child(1){ top:0; } .nav-burger-icon span:nth-child(2){ top:5px; } .nav-burger-icon span:nth-child(3){ top:10px; } .nav-burger.is-open .nav-burger-icon span:nth-child(1){ top:5px; transform:rotate(45deg); } .nav-burger.is-open .nav-burger-icon span:nth-child(2){ opacity:0; } .nav-burger.is-open .nav-burger-icon span:nth-child(3){ top:5px; transform:rotate(-45deg); } .mobile-nav { position:fixed; inset:0; z-index:var(--z-mobile-nav); background:var(--bg); display:flex; flex-direction:column; padding:calc(var(--nav-h) + var(--sp-8)) var(--sp-6) var(--sp-8); transform:translateX(100%); transition:transform var(--transition-slow); } .mobile-nav.is-open { transform:translateX(0); } .mobile-nav-links { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-10); } .mobile-nav-links a { font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--text-primary); padding:var(--sp-3) 0; border-bottom:1px solid var(--border); } .mobile-nav-actions { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:auto; } body.nav-locked { overflow:hidden; } /* ── THEME TOGGLE ── */ .theme-toggle { display:flex; align-items:center; background:var(--toggle-bg); border:1px solid var(--border-strong); border-radius:var(--radius-full); padding:3px; gap:0; } .theme-toggle:focus-within { outline:2px solid var(--ember); outline-offset:2px; } .tt-option { font-family:var(--font-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-full); color:var(--text-tertiary); user-select:none; white-space:nowrap; } .tt-option:focus-visible { outline:2px solid var(--ember); outline-offset:1px; } .tt-option.is-active { background:var(--toggle-active); color:#fff; } [data-theme="void"] .tt-option.is-active { color:#09090F; } /* ── FOOTER ── */ .footer { background:var(--surface-1); border-top:1px solid var(--border); padding:var(--sp-16) var(--sp-12) var(--sp-10); } .footer-grid { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-16); padding-bottom:var(--sp-12); border-bottom:1px solid var(--border); margin-bottom:var(--sp-8); } .footer-brand-desc { font-size:13.5px; color:var(--text-tertiary); line-height:1.7; max-width:230px; margin-top:var(--sp-3); } .footer-col-title { font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--sp-4); } .footer-col-links { display:flex; flex-direction:column; gap:var(--sp-3); } .footer-col-links a { font-size:13.5px; color:var(--text-tertiary); } .footer-col-links a:hover { color:var(--text-secondary); } .footer-bottom { max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-3); } .footer-copy { font-size:12.5px; color:var(--text-tertiary); } .footer-tagline { font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--text-tertiary); } /* ── SOCIAL: "Follow the Journey" ── */ .social-section { max-width:1140px; margin:0 auto; padding:var(--sp-10) 0 var(--sp-12); border-bottom:1px solid var(--border); margin-bottom:var(--sp-8); } .social-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--sp-6); gap:var(--sp-6); flex-wrap:wrap; } .social-title { font-size:20px; font-weight:600; letter-spacing:-.025em; color:var(--text-primary); margin-bottom:var(--sp-1); } .social-subtitle { font-size:13.5px; color:var(--text-tertiary); max-width:280px; line-height:1.6; } .social-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-tertiary); align-self:flex-start; padding-top:var(--sp-1); } .social-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); } .social-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-5); display:block; position:relative; overflow:hidden; } .social-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:var(--ember); transform:scaleX(0); transform-origin:left center; transition:transform .35s cubic-bezier(0.16,1,0.3,1); } .social-card:hover { border-color:var(--border-strong); } .social-card:hover::before { transform:scaleX(1); } .social-card:focus-visible { outline:2px solid var(--ember); outline-offset:2px; } .social-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--sp-3); } .social-card-icon { width:20px; height:20px; color:var(--text-secondary); } .social-card:hover .social-card-icon { color:var(--text-primary); } .social-card-handle { font-family:var(--font-mono); font-size:9px; letter-spacing:.10em; color:var(--text-tertiary); } .social-card-name { font-size:13px; font-weight:500; color:var(--text-primary); margin-bottom:var(--sp-1); letter-spacing:-.01em; } .social-card-desc { font-size:12px; color:var(--text-tertiary); line-height:1.6; } /* ── ANIMATIONS ── */ .reveal { opacity:0; transform:translateY(20px); transition:opacity var(--transition-slow) cubic-bezier(0.16,1,0.3,1), transform var(--transition-slow) cubic-bezier(0.16,1,0.3,1); } /* Failsafe: if JS never runs (blocked, errored, slow CDN), content must still become visible rather than stay permanently hidden. This covers every page-specific entrance system (.reveal, .hero-stage, .nav-cinematic) since they all start hidden via inline/page CSS and depend on JS to reveal. */ html:not(.js-ready) .reveal, html:not(.js-ready) .hero-stage, html:not(.js-ready) .nav-cinematic { opacity:1 !important; transform:none !important; transition:none !important; } .reveal.is-visible { opacity:1; transform:translateY(0); } /* Once revealed, hand transform timing back to the fast hover speed — otherwise hover lift (.card:hover etc.) inherits the slow 450ms reveal curve forever, which read as "hover feels broken / laggy". */ .reveal.is-visible { transition: opacity var(--transition-slow) cubic-bezier(0.16,1,0.3,1), transform var(--transition-base) cubic-bezier(0.16,1,0.3,1); } /* Fallback for no-JS: still staggers first 6 by DOM position */ .reveal-group .reveal:nth-child(1){transition-delay:0ms} .reveal-group .reveal:nth-child(2){transition-delay:80ms} .reveal-group .reveal:nth-child(3){transition-delay:160ms} .reveal-group .reveal:nth-child(4){transition-delay:240ms} .reveal-group .reveal:nth-child(5){transition-delay:320ms} .reveal-group .reveal:nth-child(6){transition-delay:400ms} /* JS-driven stagger overrides nth-child when present — correct regardless of non-.reveal siblings or group size beyond 6 */ .reveal-group .reveal[data-stagger-delay]{transition-delay:var(--stagger-delay,0ms)!important;} /* ── CHAT THREAD TYPING SYSTEM (shared across every Clarity Session / Decision Engine mockup site-wide — driven by AnimationController) ── */ .chat-msg{opacity:0;transform:translateY(6px);transition:opacity 350ms cubic-bezier(0.16,1,0.3,1),transform 350ms cubic-bezier(0.16,1,0.3,1);position:relative;} .chat-msg.is-typed{transform:translateY(0);} .chat-msg .chat-typing-dots{display:none;align-items:center;gap:4px;padding:10px 14px;} .chat-msg.is-typing .chat-bubble{display:none;} .chat-msg.is-typing{opacity:1;} .chat-msg.is-typing .chat-typing-dots{display:inline-flex;} .chat-msg.is-typed .chat-typing-dots{display:none;} .chat-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:chatDotPulse 1.1s ease-in-out infinite;} .chat-typing-dot:nth-child(2){animation-delay:.15s;} .chat-typing-dot:nth-child(3){animation-delay:.3s;} @keyframes chatDotPulse{0%,60%,100%{opacity:.3;transform:scale(0.85);}30%{opacity:1;transform:scale(1.1);}} .chat-thread-after > *{opacity:0;transform:translateY(8px);} @media (prefers-reduced-motion: reduce){ .chat-msg{opacity:1!important;transform:none!important;} .chat-msg.is-typing .chat-bubble{display:block!important;} .chat-msg .chat-typing-dots{display:none!important;} .chat-thread-after > *{opacity:1!important;transform:none!important;} } /* ── PAGE TRANSITIONS ── Skipped via :has() on pages that run their own entrance choreography (hero-stage system) to avoid two competing opacity animations on nested elements — this was the root cause of "animations fire inconsistently". */ html.page-entering body { opacity: 0; } html.page-entered body { opacity: 1; transition: opacity 380ms cubic-bezier(0.16,1,0.3,1); } html.page-entering:has(.hero-stage) body, html.page-entered:has(.hero-stage) body { opacity: 1; transition: none; } /* ── ACCESSIBILITY ── */ :focus-visible { outline:2px solid var(--ember); outline-offset:3px; border-radius:3px; } .skip-link { position:absolute; top:-100%; left:var(--sp-4); background:var(--ember); color:#fff; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-md); font-size:14px; font-weight:500; z-index:var(--z-skiplink); transition:top var(--transition-fast); } .skip-link:focus { top:var(--sp-4); } /* ── BACK TO WEBSITE LINK (auth pages + dashboard) ── */ .back-to-site{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text-secondary);} .back-to-site:hover{color:var(--text-primary);} .back-to-site svg{stroke:currentColor;flex-shrink:0;} @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } .mobile-nav { transition:none; } } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; } /* ── DIVIDER ── */ /* ── PRICING ── */ .price-card { background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--sp-8); display:flex; flex-direction:column; position:relative; transition:transform var(--transition-base),box-shadow var(--transition-base); } .price-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-card); } .price-card.is-featured { background:linear-gradient(165deg, var(--ember-subtle) 0%, var(--surface-1) 55%, var(--ember-subtle) 100%); border-color:var(--ember-border); box-shadow:0 0 0 1px var(--ember-subtle), var(--shadow-card-hover); } .price-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--btn-primary-bg); color:var(--btn-primary-text); font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:4px 14px; border-radius:var(--radius-full); white-space:nowrap; } .price-name { font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:23px; color:var(--text-primary); margin-bottom:var(--sp-5); } .price-amount { font-weight:600; font-size:42px; letter-spacing:-.03em; color:var(--text-primary); line-height:1; margin-bottom:var(--sp-1); } .price-period { font-size:14px; color:var(--text-tertiary); font-weight:400; } .price-features { flex:1; display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-7); } .price-cta { width:100%; justify-content:center; margin-top:auto; } .price-feature { display:flex; align-items:center; gap:var(--sp-3); font-size:14px; color:var(--text-secondary); line-height:1.4; } .price-feature-icon { width:16px; height:16px; flex-shrink:0; color:var(--ember); } .price-feature.is-unavailable { color:var(--text-tertiary); } .price-feature.is-unavailable .price-feature-icon { color:var(--text-tertiary); } /* ── DASHBOARD / COCKPIT ── */ /* cockpit-bg/-surface/-border utility classes removed — dashboard now uses var(--bg)/var(--surface-1)/var(--border) directly, no hardcoded hex anywhere */ .progress-track { height:4px; background:var(--surface-3); border-radius:2px; overflow:hidden; } .progress-fill { height:100%; border-radius:2px; background:var(--ember); transition:width 900ms cubic-bezier(0.16,1,0.3,1); } .progress-fill.blue { background:var(--blue); } /* ── BLOG ── */ .masthead-rule { height:1px; background:var(--ember); margin:var(--sp-4) 0; opacity:.6; } .article-card { background:transparent; border-bottom:1px solid var(--border); padding:var(--sp-8) 0; display:block; } .article-card:hover { border-bottom-color:var(--ember); } .article-category { font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--sp-3); } .article-title { font-weight:600; font-size:clamp(18px,2.5vw,24px); letter-spacing:-.025em; color:var(--text-primary); line-height:1.2; margin-bottom:var(--sp-3); } .article-card:hover .article-title { color:var(--ember); } .article-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); letter-spacing:.08em; } /* ── STORY CARDS ── */ .story-card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-6); } .story-tag { font-family:var(--font-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:var(--sp-4); padding-bottom:var(--sp-4); border-bottom:1px solid var(--border); } .story-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--sp-2); } .story-label.before { color:var(--text-tertiary); } .story-label.after { color:var(--ember); } .story-text { font-size:13px; color:var(--text-secondary); line-height:1.65; margin-bottom:var(--sp-4); } .story-text.result { color:var(--text-primary); font-weight:500; } .story-author { font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); letter-spacing:.08em; padding-top:var(--sp-3); border-top:1px solid var(--border); } /* ── AUTH ── */ .auth-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; } .auth-left { display:flex; flex-direction:column; justify-content:space-between; padding:var(--sp-10) var(--sp-12); } .auth-right { display:flex; align-items:center; justify-content:center; padding:var(--sp-10) var(--sp-12); } .auth-card { width:100%; max-width:400px; } .auth-title { font-weight:600; font-size:28px; letter-spacing:-.03em; color:var(--text-primary); margin-bottom:var(--sp-2); } .auth-subtitle { font-size:14px; color:var(--text-tertiary); margin-bottom:var(--sp-8); } .auth-divider { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0; font-size:12px; color:var(--text-tertiary); } .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border-strong); } .auth-footer { text-align:center; font-size:13px; color:var(--text-tertiary); margin-top:var(--sp-5); } .auth-footer a { color:var(--ember); } .auth-footer a:hover { text-decoration:underline; } .auth-terms { text-align:center; font-size:11.5px; color:var(--text-tertiary); margin-top:var(--sp-4); line-height:1.6; } .auth-terms a { color:var(--ember); } .btn-social { width:100%; display:flex; align-items:center; justify-content:center; gap:var(--sp-3); background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:12px; font-size:14px; color:var(--text-primary); font-weight:400; } .btn-social:hover { background:var(--surface-3); } .btn-social:focus-visible { outline:2px solid var(--ember); outline-offset:2px; } .btn-social-icon { width:18px; height:18px; flex-shrink:0; } /* ── HERO VISUAL SCAFFOLD (shared across all pages, theme-aware via currentColor/var()) ── */ .hero-visual{position:absolute;inset:0;z-index:var(--z-deco);pointer-events:none;overflow:hidden;} .hero-visual svg{width:100%;height:100%;} .hero-visual .hv-line{fill:none;stroke:var(--ember);stroke-width:1;opacity:0.35;} .hero-visual .hv-line-faint{fill:none;stroke:var(--border-strong);stroke-width:1;} .hero-visual .hv-node{fill:var(--ember);} .hero-visual .hv-node-ring{fill:none;stroke:var(--ember);stroke-width:1;opacity:0.3;} .hero-visual .hv-dest{fill:none;stroke:var(--blue);stroke-width:1.6;} .hero-visual .hv-dest-text{fill:var(--text-tertiary);font-family:var(--font-mono);} /* ── FAQ ── */ .faq-item { border-bottom:1px solid var(--border); } .faq-question { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-5) 0; font-size:15px; font-weight:500; color:var(--text-primary); user-select:none; gap:var(--sp-4); background:none; border:none; width:100%; text-align:left; } .faq-question:hover { color:var(--ember); } .faq-icon { width:18px; height:18px; flex-shrink:0; color:var(--ember); transition:transform var(--transition-base); } .faq-item.is-open .faq-icon { transform:rotate(45deg); } .faq-answer { font-size:14px; color:var(--text-secondary); line-height:1.75; padding-bottom:var(--sp-5); display:none; } .faq-item.is-open .faq-answer { display:block; } /* ── TOAST (fix: replaces silent failures with visible feedback) ── */ .toast { position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%) translateY(20px); z-index:var(--z-toast); background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:12px 20px; font-size:13px; color:var(--text-primary); opacity:0; pointer-events:none; box-shadow:var(--shadow-modal); transition:opacity var(--transition-base), transform var(--transition-base); } .toast.is-visible { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; } .toast.is-error { border-color:rgba(196,69,58,0.4); } /* ── RESPONSIVE ── */ @media (max-width:1100px) { .container { padding:0 var(--sp-8); } .section { padding:var(--sp-20) var(--sp-8); } .footer-grid { gap:var(--sp-8); } .social-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:768px) { .nav { padding:0 var(--sp-5); } .nav-links { display:none; } .nav-burger { display:flex; } .container { padding:0 var(--sp-5); } .section { padding:var(--sp-16) var(--sp-5); } .footer { padding:var(--sp-10) var(--sp-5) var(--sp-8); } .footer-grid { grid-template-columns:1fr 1fr; gap:var(--sp-8); } .social-grid { grid-template-columns:repeat(2,1fr); } .auth-wrap { grid-template-columns:1fr; } .auth-left { display:none; } .auth-right { min-height:100vh; padding:var(--sp-8) var(--sp-5); } .social-section { padding:var(--sp-8) 0 var(--sp-10); } } @media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } .social-grid { grid-template-columns:1fr 1fr; } .nav-right { gap:var(--sp-2); } .theme-toggle .tt-option { padding:4px 8px; font-size:8px; } .btn-lg { padding:12px 22px; font-size:14px; } }