/* ============================================================================ VAELITH · shared design system ---------------------------------------------------------------------------- Loaded LAST in on every page. It refines the brand that is already there (near-black, red accent, Space Grotesk + Inter) rather than replacing it. It deliberately touches only tokens, typography, surfaces, motion and interaction states. It never changes layout (widths, grids, padding of containers, --maxw), so no page can break from it. Both variable dialects used across the site are mapped to the same values: marketing pages : --bg-0 --panel --panel-2 --line --line-2 --text-hi/mid/low research pages : --bg --panel --line --hi/--mid/--low ============================================================================ */ /* Fonts are loaded by each page's existing Google Fonts (IBM Plex Mono is appended there at build time), so this sheet makes no network requests. */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ /* surfaces */ --bg-0:#040405; --bg:#040405; --bg-1:#08080a; --bg-2:#0c0c0f; --panel:#0c0c0f; --panel-2:#111115; --panel-3:#16161b; /* hairlines */ --line:rgba(255,255,255,0.085); --line-2:rgba(255,255,255,0.15); --line-hi:rgba(255,255,255,0.24); --panel-border:rgba(255,255,255,0.10); /* text (low lifted slightly for legibility on true black) */ --text-hi:#f5f5f7; --hi:#f5f5f7; --text-mid:#a8a8b0; --mid:#a8a8b0; --text-low:#71717a; --low:#71717a; /* accent */ --red:#ff2b3d; --red-2:#ff4553; --red-deep:#c60f20; --red-dim:#8f0f1c; --red-soft:rgba(255,43,61,0.10); --red-glow:rgba(255,43,61,0.32); --gold:#c9a24a; --green:#54e894; /* type */ --font-display:'Space Grotesk',Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* shape + motion */ --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.28s; --dur-slow:.6s; /* depth */ --edge:inset 0 1px 0 rgba(255,255,255,0.06); --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8); --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.9); --shadow-glow:0 0 0 1px rgba(255,43,61,.35), 0 10px 30px -10px var(--red-glow); color-scheme:dark; accent-color:var(--red); } /* ---------- 2. Base ------------------------------------------------------ */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-optical-sizing:auto; } /* Headings: guarantee a sans fallback everywhere (some pages declared 'Space Grotesk' alone, which drops to a serif if the webfont is slow). */ h1,h2,h3,h4,h5, article h1,article h2,article h3, .faq h3,.wordmark,.section-head h2,.page-head h1{ font-family:var(--font-display); } /* balance only section-level titles; long hero h1s keep each page's own wrapping */ h2,h3,h4,article h2,article h3,.faq h3,.section-head h2{ text-wrap:balance; } h1{ letter-spacing:-0.022em; } h2{ letter-spacing:-0.016em; } h3{ letter-spacing:-0.008em; } p,li,blockquote,.lead,.sub{ text-wrap:pretty; } /* numerals line up in specs, stats and prices */ .stat .value,.stat .num,.spec .v,.price,.feat-price,.pstat, [data-num],time,.k,.crumb,.meta-row,.ruo-bar,.eyebrow,.tag{ font-variant-numeric:tabular-nums; } /* the lab-report signature: eyebrow labels in mono */ .section-head .tag,.eyebrow,.crumb,.meta-row,.k, .foot-tag,.scroll-cue,.hero-trust .tag{ font-family:var(--mono); font-weight:500; letter-spacing:0.14em; text-transform:uppercase; } .section-head .tag{ font-size:11.5px; color:var(--red); } .eyebrow{ font-size:11.5px; } /* selection + focus + scrollbar = the small things people feel */ ::selection{ background:rgba(255,43,61,.32); color:#fff; } :focus{ outline:none; } :focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; box-shadow:0 0 0 5px var(--red-soft); } *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(255,43,61,.6); border:2px solid transparent; background-clip:content-box; } img,svg,video{ max-width:100%; } img{ image-rendering:auto; } hr{ border:0; border-top:1px solid var(--line); } /* ---------- 3. Links ----------------------------------------------------- */ a{ transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); } article a:not(.btn),.prose a:not(.btn),main p a:not(.btn){ color:var(--red-2); text-decoration:underline; text-decoration-color:rgba(255,43,61,.35); text-decoration-thickness:1px; text-underline-offset:3px; } article a:not(.btn):hover,.prose a:not(.btn):hover,main p a:not(.btn):hover{ color:#fff; text-decoration-color:var(--red); } /* ---------- 4. Header / nav ---------------------------------------------- */ header{ backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); background:rgba(4,4,5,0.74); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 40px -24px rgba(0,0,0,.9); } .nav-links a{ position:relative; color:var(--text-mid); transition:color var(--dur) var(--ease); } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left center; transition:transform var(--dur) var(--ease-out); } .nav-links a:hover{ color:var(--text-hi); text-decoration:none; } .nav-links a:hover::after,.nav-links a.active::after,.nav-links a[aria-current]::after{ transform:scaleX(1); } .nav-logo img,.brand img,.logo img{ transition:opacity var(--dur) var(--ease), filter var(--dur) var(--ease); } .nav-logo:hover img,.brand:hover img{ opacity:.92; filter:drop-shadow(0 0 10px rgba(255,43,61,.22)); } /* research-use bar: a touch crisper */ .ruo-bar{ font-family:var(--mono); letter-spacing:0.14em; background:linear-gradient(180deg,#0a0a0c,#07070a); border-bottom:1px solid rgba(201,162,74,.18); } /* ---------- 5. Buttons --------------------------------------------------- */ .btn,.btn-primary,.btn-ghost,button.btn,a.btn{ transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease); will-change:transform; text-decoration:none; } .btn-primary,a.btn-primary,button.btn-primary{ background:linear-gradient(180deg,var(--red-2) 0%,var(--red-deep) 100%); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.6), 0 8px 24px -8px var(--red-glow); } .btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.08) brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.6), 0 14px 34px -10px rgba(255,43,61,.55); } .btn-primary:active,a.btn-primary:active,button.btn-primary:active{ transform:translateY(0) scale(.985); filter:brightness(.96); box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 4px 14px -8px var(--red-glow); } .btn-ghost,a.btn-ghost,button.btn-ghost{ background:rgba(255,255,255,.025); border:1px solid var(--line-2); color:var(--text-hi); box-shadow:var(--edge); } .btn-ghost:hover,a.btn-ghost:hover,button.btn-ghost:hover{ transform:translateY(-1px); border-color:rgba(255,43,61,.7); background:var(--red-soft); box-shadow:var(--edge), 0 10px 26px -14px var(--red-glow); } .btn-ghost:active,a.btn-ghost:active,button.btn-ghost:active{ transform:translateY(0) scale(.985); } /* research-page .btn (solid red, rounded rect) */ article .btn,.cta .btn,main .btn:not(.btn-ghost):not(.btn-primary){ background:linear-gradient(180deg,var(--red-2),var(--red-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px -10px var(--red-glow); } article .btn:hover,.cta .btn:hover{ transform:translateY(-1px); text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 30px -12px rgba(255,43,61,.55); } .cta .ghost,.btn.ghost{ background:rgba(255,255,255,.025); border:1px solid var(--line-2); box-shadow:var(--edge); } .cta .ghost:hover,.btn.ghost:hover{ border-color:rgba(255,43,61,.65); background:var(--red-soft); } /* ---------- 6. Cards & surfaces ------------------------------------------ */ .pillar,.cat-card,.feat-card,.quote,.verify-strip,.wt-card,.value, .spec,.callout,.card,.panel,.band,.tile{ transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease), background-color var(--dur) var(--ease); } .pillar,.cat-card,.quote,.verify-strip,.wt-card,.value,.spec,.callout,.card,.panel{ box-shadow:var(--edge), var(--shadow-1); } .feat-card{ box-shadow:var(--edge), var(--shadow-1); } /* hover: lift + brighten hairline + faint red bloom, only on pointer devices */ @media (hover:hover) and (pointer:fine){ .pillar:hover,.cat-card:hover,.wt-card:hover,.value:hover,.card:hover{ transform:translateY(-4px); border-color:var(--line-hi); box-shadow:var(--edge), var(--shadow-2), 0 0 0 1px rgba(255,43,61,.10), 0 24px 60px -30px var(--red-glow); } .feat-card:hover{ transform:translateY(-4px); border-color:rgba(255,43,61,.6); box-shadow:var(--edge), var(--shadow-2), 0 24px 60px -30px rgba(255,43,61,.6); } .quote:hover{ border-color:var(--line-hi); } } /* lit top edge on the big cards, the premium hairline */ .cat-card,.quote,.verify-strip,.wt-card,.value{ position:relative; } .cat-card::before,.quote::before,.verify-strip::before,.wt-card::before,.value::before{ content:''; position:absolute; top:0; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); pointer-events:none; border-radius:inherit; } /* stat numbers: cool white gradient, tabular */ .stat .value{ font-family:var(--font-display); letter-spacing:-0.03em; background:linear-gradient(180deg,#ffffff 0%,#c9c9d1 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff; } .stat .value .accent,.stat .value.accent{ background:linear-gradient(180deg,var(--red-2),var(--red)); -webkit-background-clip:text; background-clip:text; } /* research spec table: zebra + row hover + aligned values */ .spec{ background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005)); } .spec div:nth-child(even){ background:rgba(255,255,255,.015); } .spec div{ transition:background-color var(--dur) var(--ease); } .spec div:hover{ background:rgba(255,43,61,.045); } .spec div:last-child{ border-bottom:0; } .spec .k{ color:var(--text-low); } .spec .v{ color:var(--text-hi); font-weight:500; } .callout{ background:linear-gradient(90deg,rgba(255,43,61,.06),rgba(255,255,255,.015)); border-left-width:2px; } /* quotes / reviews stars */ .quote .stars{ letter-spacing:3px; filter:drop-shadow(0 0 6px rgba(255,210,63,.25)); } /* ---------- 7. Section rhythm & prose ------------------------------------ */ .section-head h2{ letter-spacing:-0.02em; } .section-head p{ color:var(--text-mid); } article h2{ padding-top:6px; } article h2::after{ content:''; display:block; width:34px; height:2px; margin-top:10px; background:linear-gradient(90deg,var(--red),transparent); border-radius:2px; opacity:.85; } article p,article li{ color:#d2d2d7; } article strong,.prose strong{ color:var(--text-hi); font-weight:600; } article ul li::marker,.prose ul li::marker{ color:var(--red); } blockquote{ border-left:2px solid var(--red); padding-left:16px; color:var(--text-mid); } code,kbd,samp{ font-family:var(--mono); font-size:.92em; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:6px; padding:1px 6px; } /* ---------- 8. Forms ----------------------------------------------------- */ input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea,select{ transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); caret-color:var(--red); } input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, textarea:focus,select:focus{ border-color:rgba(255,43,61,.7) !important; box-shadow:0 0 0 4px var(--red-soft), var(--edge); outline:none; } input::placeholder,textarea::placeholder{ color:var(--text-low); opacity:1; } /* ---------- 9. Footer ---------------------------------------------------- */ footer{ border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 40%); } footer a{ transition:color var(--dur) var(--ease); } footer a:hover{ color:var(--text-hi); text-decoration:none; } .foot-legal,.disc{ color:var(--text-low); } /* ---------- 10. Motion --------------------------------------------------- */ .reveal{ transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); } @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 !important; transform:none !important; } } /* ---------- 11. Print ---------------------------------------------------- */ @media print{ header,footer,.ruo-bar,.bg-grid,.bg-blob,.vae-head,.vae-msgs,[class^="vae-"],.vlt-ag-card{ display:none !important; } body{ background:#fff !important; color:#000 !important; } a{ color:#000 !important; text-decoration:underline; } .spec,.callout,.pillar,.cat-card{ box-shadow:none !important; border-color:#bbb !important; } } /* ---------- 12. Cross-page transitions ---------------------------------- */ /* Same-origin navigations fade softly between pages (browsers that support it; others ignore). */ @view-transition{ navigation:auto; } ::view-transition-old(root){ animation:vlt-vt-out .16s ease both; } ::view-transition-new(root){ animation:vlt-vt-in .26s ease both; } @keyframes vlt-vt-out{ to{ opacity:0; } } @keyframes vlt-vt-in{ from{ opacity:0; } } @media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } } /* ---------- 13. 3D structure viewer (molecule.js) ------------------------ */ .vlt-mol{ margin:26px 0; padding:0; border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:16px; overflow:hidden; background:#0b0b0e; position:relative; isolation:isolate; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.9); } .vlt-mol:empty{ border:0; margin:0; min-height:1px; box-shadow:none; background:transparent; } .vlt-mol:empty::before{ display:none; } .vlt-mol::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); z-index:2; pointer-events:none; } .vlt-mol-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px 12px; border-bottom:1px solid var(--line,rgba(255,255,255,.09)); background:rgba(255,255,255,.015); } .vlt-mol-title{ display:flex; flex-direction:column; gap:2px; min-width:0; } .vlt-mol-eyebrow{ font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--low,#66666d); } .vlt-mol-name{ font-family:'Space Grotesk',var(--font-display,sans-serif); font-weight:600; font-size:15px; color:#fff; letter-spacing:-.01em; } .vlt-mol-ctl{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .vlt-mol-ctl button{ appearance:none; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--mid,#a4a4aa); font:500 11.5px/1 var(--mono,'IBM Plex Mono',ui-monospace,monospace); letter-spacing:.06em; padding:8px 11px; border-radius:8px; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease; } .vlt-mol-ctl button:hover{ color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); text-decoration:none; } .vlt-mol-ctl button:active{ transform:translateY(1px); } .vlt-mol-ctl button.on{ color:#fff; border-color:rgba(255,43,61,.55); background:rgba(255,43,61,.12); box-shadow:0 0 0 1px rgba(255,43,61,.12) inset; } .vlt-mol-ctl button[data-act="spin"][aria-pressed="false"]{ color:var(--low,#66666d); } .vlt-mol-sep{ width:1px; height:18px; background:rgba(255,255,255,.1); margin:0 4px; } .vlt-mol-stage{ position:relative; aspect-ratio:16/10; min-height:260px; max-height:520px; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,43,61,.07), transparent 70%), radial-gradient(ellipse 90% 90% at 50% 120%, rgba(255,255,255,.03), transparent 60%), linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/28px 28px, #0a0a0d; } .vlt-mol-stage::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 80px 20px rgba(5,5,6,.75); } .vlt-mol-view{ position:absolute; inset:0; } .vlt-mol-view canvas{ display:block; outline:none; } .vlt-mol-skel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; z-index:3; font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--low,#66666d); background:rgba(10,10,13,.6); backdrop-filter:blur(2px); } .vlt-mol-skel span{ width:8px; height:8px; border-radius:50%; background:var(--red,#ff2b3d); box-shadow:0 0 0 0 rgba(255,43,61,.6); animation:vlt-mol-pulse 1.6s ease-out infinite; } @keyframes vlt-mol-pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,43,61,.55);} 100%{ box-shadow:0 0 0 14px rgba(255,43,61,0);} } .vlt-mol.is-fallback .vlt-mol-skel{ text-transform:none; letter-spacing:0; font-family:inherit; font-size:13.5px; color:var(--mid,#a4a4aa); } .vlt-mol.is-fallback .vlt-mol-skel span{ display:none; } .vlt-mol-arm{ position:absolute; inset:0; z-index:4; width:100%; border:0; cursor:pointer; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; padding:0 0 14px; font:600 12px/1 var(--mono,'IBM Plex Mono',ui-monospace,monospace); letter-spacing:.1em; text-transform:uppercase; opacity:0; transition:opacity .25s ease; } .vlt-mol-arm b{ font-weight:600; } .vlt-mol-arm em{ font-style:normal; font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:none; color:var(--mid,#a4a4aa); } .vlt-mol.is-ready .vlt-mol-arm{ opacity:1; } .vlt-mol-stage:hover .vlt-mol-arm{ background:linear-gradient(180deg,transparent 55%,rgba(5,5,6,.75)); } .vlt-mol-stage.is-armed .vlt-mol-arm{ display:none; } @media (hover:none){ .vlt-mol-arm{ background:linear-gradient(180deg,transparent 55%,rgba(5,5,6,.75)); } .vlt-mol-arm em::before{ content:"Drag to rotate · pinch to zoom"; } .vlt-mol-arm em{ font-size:0; } .vlt-mol-arm em::before{ font-size:11px; } } .vlt-mol-cap{ padding:12px 16px 14px; border-top:1px solid var(--line,rgba(255,255,255,.09)); background:rgba(255,255,255,.015); } .vlt-mol-facts{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:8px; font-size:13px; color:#e9e9ec; } .vlt-mol-facts span{ display:inline-flex; align-items:baseline; gap:8px; } .vlt-mol-facts i{ font-style:normal; font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--low,#66666d); } .vlt-mol-facts sub,.vlt-mol-facts sup{ font-size:.72em; } .vlt-mol-facts a{ color:#e9e9ec; border-bottom:1px solid rgba(255,255,255,.18); } .vlt-mol-facts a:hover{ color:#fff; border-color:var(--red,#ff2b3d); text-decoration:none; } .vlt-mol-note{ margin:0 !important; font-size:12.5px; line-height:1.55; color:var(--low,#66666d) !important; } @media (max-width:640px){ .vlt-mol-stage{ aspect-ratio:4/3; min-height:240px; } .vlt-mol-head{ padding:12px 14px 10px; } .vlt-mol-ctl button{ padding:8px 9px; } .vlt-mol-cap{ padding:12px 14px; } } @media print{ .vlt-mol{ display:none !important; } }