/* VeraScripts — design tokens */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Anton&display=swap'); :root { /* blacks */ --void: #09090c; --surface: #0b0b10; --elevated: #14141b; --elevated-2: #1a1a23; --hairline: #1d1d27; --hairline-2: #26262f; /* ink */ --ink-0: #fafafb; --ink-1: #e4e4e7; --ink-2: #a1a1aa; --ink-3: #71717a; --ink-4: #52525b; /* VeraScripts house brand — light blue + white */ --brand: oklch(0.84 0.13 245); /* icy sky blue (~#8FBEFF) */ --brand-ink: #06121f; /* deep navy for text on brand bg */ --brand-soft: oklch(0.84 0.13 245 / 0.18); --brand-glow: oklch(0.84 0.13 245 / 0.55); --white: #ffffff; /* per-product accents */ --vera: oklch(0.78 0.16 75); /* amber */ --vera-ink: #18120a; --demon: oklch(0.66 0.22 22); /* crimson */ --demon-ink: #1a0808; --fadeaway: oklch(0.67 0.24 295); /* violet */ --fadeaway-ink: #0f0818; --vortex: oklch(0.78 0.14 210); /* cyan */ --vortex-ink: #041215; /* system */ --good: oklch(0.72 0.17 150); --warn: oklch(0.78 0.16 75); --bad: oklch(0.66 0.22 22); /* "current" accent — defaults to brand, overridden per product via body[data-product] */ --accent: var(--brand); --accent-ink: var(--brand-ink); /* fonts */ --f-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-display: 'Anton', 'Geist', sans-serif; /* motion */ --ease-out-soft: cubic-bezier(.22,.8,.32,1); --ease-in-out-soft: cubic-bezier(.65,.05,.36,1); } /* per-product accent cascade — set to theme the page */ body[data-product="vera-plus"] { --accent: var(--vera); --accent-ink: var(--vera-ink); } body[data-product="demon"] { --accent: var(--demon); --accent-ink: var(--demon-ink); } body[data-product="fadeaway"] { --accent: var(--fadeaway); --accent-ink: var(--fadeaway-ink); } body[data-product="vortex"] { --accent: var(--vortex); --accent-ink: var(--vortex-ink); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--void); color: var(--ink-1); font-family: var(--f-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } /* utility primitives */ .mono { font-family: var(--f-mono); font-feature-settings: 'ss02', 'cv11'; } .tight { letter-spacing: -0.02em; } .tighter { letter-spacing: -0.04em; } .up { text-transform: uppercase; letter-spacing: 0.12em; } .hairline { border: 1px solid var(--hairline); } .hairline-t { border-top: 1px solid var(--hairline); } .hairline-b { border-bottom: 1px solid var(--hairline); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--hairline-2); background: transparent; color: var(--ink-0); transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; cursor: pointer; border-radius: 2px; } .btn:hover { border-color: var(--ink-2); background: var(--elevated); } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 0 0 transparent; } .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 40px -15px var(--accent), inset 0 0 0 1px color-mix(in oklab, white 20%, var(--accent)); } .btn.ghost { border-color: var(--hairline); color: var(--ink-2); } .btn.ghost:hover { color: var(--ink-0); } .btn .arrow { width: 12px; height: 10px; position: relative; transition: transform 120ms ease-out; } .btn:hover .arrow { transform: translateX(3px); } /* nav shell shared by most pages */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--void) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); } .topbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-0); } .logo-mark { width: 22px; height: 22px; background: var(--brand); clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: 0 0 18px -2px var(--brand-glow); transition: transform 220ms var(--ease-out-soft), box-shadow 220ms ease-out; } .logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 0 24px -2px var(--brand-glow); } .nav-links { display: flex; gap: 28px; } .nav-links a { position: relative; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); transition: color 160ms ease-out; padding: 4px 0; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out-soft); } .nav-links a:hover, .nav-links a.active { color: var(--ink-0); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } /* page chrome */ .page { max-width: 1440px; margin: 0 auto; padding: 0 32px; } /* sharp card */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 2px; } /* grid placeholder — diagonal hairline fill */ .placeholder { position: relative; overflow: hidden; background: var(--elevated); background-image: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--accent) 10%, transparent) 10px 11px); } .placeholder::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } /* footer */ .site-foot { margin-top: 120px; border-top: 1px solid var(--hairline); padding: 48px 0 36px; } .site-foot-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .site-foot h5 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; font-weight: 500; } .site-foot a { display: block; color: var(--ink-2); padding: 4px 0; font-size: 14px; } .site-foot a:hover { color: var(--ink-0); } .site-foot .colophon { max-width: 1440px; margin: 40px auto 0; padding: 24px 32px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; } /* focus */ :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } /* scroll reveal — elements opt in by having .rev; toggled to .in by motion.js */ .rev { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease-out-soft), transform 520ms var(--ease-out-soft); } .rev.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rev, .rev.in { opacity: 1; transform: none; transition: none; } .logo:hover .logo-mark { transform: none; } } /* generic smooth-scroll */ html { scroll-behavior: smooth; }