/* ============================================================ SHADEHOLT — Design System Dark · cinematic · editorial. Crafted in the shadows. (Fonts are loaded via in each page .) ============================================================ */ :root { /* — Surfaces (deep night) — */ --bg: oklch(0.145 0.014 260); --bg-2: oklch(0.185 0.016 260); --bg-3: oklch(0.225 0.018 262); --line: oklch(0.98 0.01 260 / 0.10); --line-2: oklch(0.98 0.01 260 / 0.18); /* — Text — */ --text: oklch(0.955 0.006 260); --dim: oklch(0.74 0.012 260); --faint: oklch(0.56 0.014 262); /* — Accents (shared L & C, varied hue) — */ --moon: oklch(0.84 0.11 215); /* cold moonlight */ --moon-deep: oklch(0.66 0.12 235); --amber: oklch(0.84 0.11 73); /* owl-eye glow */ /* — Type — */ --serif: 'Spectral', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* — Metrics — */ --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --radius: 16px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* Cinematic atmosphere: moon glow + film grain + vignette */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 78% -10%, oklch(0.66 0.12 235 / 0.22), transparent 55%), radial-gradient(90% 60% at 12% 4%, oklch(0.84 0.11 73 / 0.06), transparent 50%), radial-gradient(140% 120% at 50% 120%, oklch(0.10 0.02 262 / 0.9), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } main, header, footer { position: relative; z-index: 1; } /* ---------- Skip link (a11y) ---------- */ .skip-link { position: absolute; left: 0; top: -48px; background: var(--bg-2); color: var(--text); padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 0 0 8px 0; z-index: 100; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } section { padding-block: clamp(72px, 11vw, 150px); } .divider { height: 1px; background: var(--line); border: 0; } /* ---------- Type ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; } .display { font-size: clamp(3rem, 9.5vw, 7.2rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.03em; } .display em { font-style: italic; font-weight: 400; color: var(--moon); } h2.title { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 300; letter-spacing: -0.022em; } h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); } .lead { font-size: clamp(1.08rem, 1.7vw, 1.3rem); color: var(--dim); font-weight: 300; max-width: 56ch; } p { text-wrap: pretty; } .eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--moon); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--moon)); } .eyebrow.center::before { display: none; } .eyebrow.center { white-space: nowrap; } /* ---------- Focus visibility (a11y) ---------- */ :focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; padding: 0.95em 1.6em; border-radius: 100px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all 0.35s cubic-bezier(0.2,0.8,0.2,1); white-space: nowrap; } .btn .arrow { transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1); } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover { background: var(--moon); box-shadow: 0 0 40px -8px oklch(0.84 0.11 215 / 0.6); } .btn-primary:disabled { opacity: 0.7; cursor: default; box-shadow: none; } .btn-ghost { background: oklch(0.98 0.01 260 / 0.04); color: var(--text); border-color: var(--line-2); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--moon); color: var(--moon); } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: oklch(0.145 0.014 260 / 0.55); border-bottom: 1px solid transparent; transition: border-color 0.4s, background 0.4s; } .site-header.scrolled { border-bottom-color: var(--line); background: oklch(0.135 0.014 260 / 0.82); } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: inline-flex; align-items: center; gap: 0.7em; text-decoration: none; color: var(--text); } .brand .mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line-2); background: oklch(0.98 0.01 260 / 0.03); overflow: hidden; } .brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand .name { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -0.01em; } .brand .name b { font-weight: 500; } .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); } .nav-links a { font-size: 0.92rem; color: var(--dim); text-decoration: none; font-weight: 400; transition: color 0.25s; position: relative; white-space: nowrap; } .nav-links a:not(.btn):hover { color: var(--text); } .nav-links a.active { color: var(--text); } /* Language selector */ .lang { position: relative; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em; } .lang summary { list-style: none; cursor: pointer; color: var(--dim); display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.7em; border: 1px solid var(--line); border-radius: 8px; transition: border-color 0.25s, color 0.25s; } .lang summary::-webkit-details-marker { display: none; } .lang[open] summary, .lang summary:hover { color: var(--text); border-color: var(--line-2); } .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 60px -20px #000; } .lang-menu a { color: var(--dim); text-decoration: none; padding: 0.5em 0.7em; border-radius: 6px; font-size: 0.8rem; transition: background 0.2s, color 0.2s; } .lang-menu a:hover { background: oklch(0.98 0.01 260 / 0.05); color: var(--text); } .lang-menu a[aria-current="true"] { color: var(--moon); } .nav-toggle { display: none; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 96px) 40px; } .footer-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; } .footer-tag { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; max-width: 18ch; letter-spacing: -0.02em; } .footer-tag em { font-style: italic; color: var(--moon); } .footer-cols { display: flex; gap: clamp(40px, 8vw, 90px); flex-wrap: wrap; } .footer-col h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 500; } .footer-col a { display: block; color: var(--dim); text-decoration: none; font-size: 0.95rem; padding: 5px 0; transition: color 0.2s; white-space: nowrap; } .footer-col a:hover { color: var(--text); } .footer-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(48px, 7vw, 80px); padding-top: 28px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.84rem; } .footer-base .mono { font-family: var(--mono); letter-spacing: 0.04em; } /* ---------- Reveal animation (never hides content as a frozen state) ---------- */ .reveal { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: om-rise 0.8s cubic-bezier(0.2,0.8,0.2,1) both; } .reveal.d1.in { animation-delay: 0.07s; } .reveal.d2.in { animation-delay: 0.14s; } .reveal.d3.in { animation-delay: 0.21s; } .reveal.d4.in { animation-delay: 0.28s; } @keyframes om-rise { from { transform: translateY(22px); } to { transform: none; } } } /* ---------- Utilities ---------- */ .tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-2); border-radius: 100px; padding: 0.45em 0.9em; display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; } .tag.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); } .tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 8px var(--moon); } .glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent); border: 0; } /* Media: real images fill their frame; empty .slot shows a cinematic moonlight panel */ .slot { display: block; --slot-bg: oklch(0.185 0.016 260); background: radial-gradient(130% 90% at 50% -10%, oklch(0.42 0.06 235 / 0.30), transparent 62%), radial-gradient(90% 70% at 80% 115%, oklch(0.42 0.05 73 / 0.10), transparent 60%), var(--slot-bg); } img.slot { object-fit: cover; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .nav-links { gap: 22px; } .nav-links .nav-link { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; } .mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 12px var(--pad) 24px; border-bottom: 1px solid var(--line); background: oklch(0.135 0.014 260 / 0.96); backdrop-filter: blur(14px); } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--dim); text-decoration: none; padding: 12px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .mobile-menu a:last-child { border-bottom: 0; } } @media (min-width: 861px) { .mobile-menu { display: none; } }