/* IcyCastle — base styles, three visual directions, light/dark, density. */ :root { /* Foundation — set by .light/.dark on */ --bg: oklch(0.985 0.004 80); --bg-soft: oklch(0.965 0.005 80); --fg: oklch(0.18 0.01 60); --fg-soft: oklch(0.42 0.01 60); --fg-muted: oklch(0.62 0.008 60); --hairline: oklch(0.18 0.01 60 / 0.14); --hairline-strong: oklch(0.18 0.01 60 / 0.28); --hover-bg: oklch(0.18 0.01 60 / 0.04); /* Accent — overridden by Tweaks. Default is "navy". */ --accent: oklch(0.42 0.13 250); --accent-soft: oklch(0.42 0.13 250 / 0.10); /* Type stacks — overridden per direction */ --font-display: "Instrument Serif", "Source Serif 4", Georgia, serif; --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Density */ --pad-section: 120px; --gap-1: 8px; --gap-2: 16px; --gap-3: 24px; --gap-4: 40px; --gap-5: 80px; /* Maxwidths */ --maxw: 1320px; --maxw-text: 720px; } html.dark { --bg: oklch(0.155 0.006 60); --bg-soft: oklch(0.195 0.006 60); --fg: oklch(0.96 0.005 80); --fg-soft: oklch(0.78 0.006 80); --fg-muted: oklch(0.58 0.008 80); --hairline: oklch(0.96 0.005 80 / 0.14); --hairline-strong: oklch(0.96 0.005 80 / 0.28); --hover-bg: oklch(0.96 0.005 80 / 0.05); --accent-soft: oklch(0.62 0.16 25 / 0.16); } html.dark { --accent: oklch(0.72 0.13 250); } /* Accent variants — set by .acc-* on . Tuned per-mode for contrast. */ html.acc-navy { --accent: oklch(0.42 0.13 250); --accent-soft: oklch(0.42 0.13 250 / 0.10); } html.acc-forest { --accent: oklch(0.43 0.10 155); --accent-soft: oklch(0.43 0.10 155 / 0.10); } html.acc-oxblood { --accent: oklch(0.40 0.12 25); --accent-soft: oklch(0.40 0.12 25 / 0.10); } html.acc-ink { --accent: oklch(0.18 0.01 60); --accent-soft: oklch(0.18 0.01 60 / 0.10); } html.dark.acc-navy { --accent: oklch(0.72 0.13 250); --accent-soft: oklch(0.72 0.13 250 / 0.16); } html.dark.acc-forest { --accent: oklch(0.74 0.13 155); --accent-soft: oklch(0.74 0.13 155 / 0.16); } html.dark.acc-oxblood { --accent: oklch(0.70 0.14 25); --accent-soft: oklch(0.70 0.14 25 / 0.16); } html.dark.acc-ink { --accent: oklch(0.96 0.005 80); --accent-soft: oklch(0.96 0.005 80 / 0.10); } /* ── Direction: Editorial ──────────────────────────────── */ html.dir-editorial { --font-display: "Instrument Serif", "Source Serif 4", Georgia, serif; --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; } html.dir-editorial .h-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.018em; } html.dir-editorial .h-display em { font-style: italic; } /* ── Direction: Brutalist (mono everywhere) ────────────── */ html.dir-brutalist { --font-display: "JetBrains Mono", ui-monospace, monospace; --font-text: "JetBrains Mono", ui-monospace, monospace; --font-mono: "JetBrains Mono", ui-monospace, monospace; } html.dir-brutalist .h-display { letter-spacing: -0.04em; font-weight: 500; } html.dir-brutalist body { letter-spacing: -0.005em; } /* ── Direction: Quiet ──────────────────────────────────── */ html.dir-quiet { --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-text: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; } html.dir-quiet .h-display { font-weight: 500; letter-spacing: -0.025em; } /* ── Density ───────────────────────────────────────────── */ html.den-compact { --pad-section: 80px; --gap-5: 56px; --gap-4: 28px; } html.den-roomy { --pad-section: 160px; --gap-5: 112px; --gap-4: 56px; } /* ── Reset + base ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--fg); } body { font-family: var(--font-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--bg); } /* ── Layout primitives ─────────────────────────────────── */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .wrap { padding: 0 20px; } } .hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; } .hairline-strong { border-top-color: var(--hairline-strong); } .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); font-weight: 500; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .tnum { font-variant-numeric: tabular-nums; } /* ── Headings ──────────────────────────────────────────── */ .h-display { font-family: var(--font-display); font-size: clamp(48px, 7.5vw, 112px); line-height: 0.96; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } .h-section { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .h-card { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.015em; margin: 0; } .lede { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; color: var(--fg-soft); max-width: 56ch; text-wrap: pretty; margin: 0; } /* ── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; font-family: var(--font-text); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); border-radius: 0; cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease; } .btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn .arrow { transition: transform .15s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--fg); } .btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); } /* ── Reveal on scroll ──────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ── Nav ───────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid var(--hairline); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; font-family: var(--font-text); font-size: 14px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.01em; } .nav-brand img { width: 32px; height: 32px; display: block; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 28px; color: var(--fg-soft); } .nav-links a { transition: color .12s ease; position: relative; } .nav-links a:hover { color: var(--fg); } .nav-links a.cta { color: var(--fg); display: inline-flex; align-items: center; gap: 6px; } .nav-links a.cta::after { content: "→"; font-family: var(--font-mono); transition: transform .12s ease; } .nav-links a.cta:hover::after { transform: translateX(3px); } @media (max-width: 720px) { .nav-links { gap: 14px; font-size: 12px; } .nav-links a:nth-child(n+4) { display: none; } } /* ── Footer ────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--hairline); padding: 80px 0 48px; } .footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 16px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--fg-soft); transition: color .1s ease; } .footer-col a:hover { color: var(--accent); } .footer-tag { font-family: var(--font-display); font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; } .footer-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }