/* ============================================================ 42 DIGITAL — shared styles Charcoal + bone + electric-lime. Industrial / bold. ============================================================ */ /* Fonts are loaded asynchronously via in each page's (preconnect + non-blocking stylesheet) so they don't block first paint. Do not re-add @import. */ :root { /* core palette — pulled from the logo */ --ink: oklch(0.255 0.006 95); /* warm charcoal */ --ink-2: oklch(0.305 0.007 95); /* raised surface */ --ink-3: oklch(0.355 0.008 95); /* hover surface / borders */ --paper: oklch(0.930 0.012 95); /* bone / cream */ --paper-dim: oklch(0.930 0.012 95 / 0.74); --paper-faint:oklch(0.930 0.012 95 / 0.14); --line: oklch(0.930 0.012 95 / 0.12); --accent: oklch(0.875 0.190 124); /* electric lime */ --accent-ink: oklch(0.30 0.05 124); /* text on accent */ --accent-dim: oklch(0.875 0.190 124 / 0.16); --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); --r: 4px; --f-display: 'Archivo', system-ui, sans-serif; --f-body: 'Hanken Grotesk', system-ui, sans-serif; --f-mono: 'Space Mono', ui-monospace, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--f-body); background: var(--ink); color: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(72px, 11vw, 150px); position: relative; } .section--tight { padding-block: clamp(48px, 7vw, 90px); } .paper-bg { background: var(--paper); color: var(--ink); } .paper-bg ::selection { background: var(--ink); color: var(--paper); } /* ---------- type ---------- */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 900; line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; } .display { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.7rem, 8.2vw, 6.4rem); line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; } .h2 { font-size: clamp(2rem, 5vw, 3.6rem); text-transform: uppercase; letter-spacing: -0.03em; } .h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; } .lead { font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--paper-dim); font-weight: 400; max-width: 46ch; } .paper-bg .lead { color: oklch(0.255 0.006 95 / 0.78); } .kicker { font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.7em; } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .kicker--center::after { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; } .paper-bg .kicker { color: oklch(0.45 0.12 124); } .paper-bg .kicker::before, .paper-bg .kicker--center::after { background: oklch(0.55 0.14 124); } .accent-text { color: var(--accent); } .mono-tag { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--paper-dim); } /* ---------- brand wordmark (CSS recreation of logo) ---------- */ .brand { display: inline-flex; align-items: center; gap: 0.34em; font-size: 1.5rem; line-height: 1; user-select: none; } .brand__mark { display: grid; grid-template-rows: 1fr 1fr; place-items: center; width: 0.74em; height: 1.18em; background: var(--paper); color: var(--ink); border-radius: 2px; font-family: var(--f-display); font-weight: 900; line-height: 0.7; } .brand__mark span { font-size: 0.62em; } .brand__word { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--paper); } .paper-bg .brand__mark { background: var(--ink); color: var(--paper); } .paper-bg .brand__word { color: var(--ink); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--f-display); font-weight: 700; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.95em 1.5em; border-radius: var(--r); transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); position: relative; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--accent { background: var(--accent); color: var(--accent-ink); } .btn--accent:hover { box-shadow: 0 0 0 0 var(--accent), 0 14px 34px -12px var(--accent); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper); transform: translateY(-2px); } .paper-bg .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px oklch(0.255 0.006 95 / 0.2); } .paper-bg .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .btn--dark { background: var(--ink); color: var(--paper); } .btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px oklch(0.255 0.006 95 / 0.6); } .btn .arr { transition: transform 0.25s var(--ease); } .btn:hover .arr { transform: translateX(4px); } /* ---------- header / nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), backdrop-filter 0.3s; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav.is-stuck { background: oklch(0.255 0.006 95 / 0.82); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); } .nav__links { display: flex; align-items: center; gap: 2rem; } .nav__links a { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-dim); transition: color 0.2s; position: relative; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--paper); } .nav__links a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--accent); } .nav__cta { display: flex; align-items: center; gap: 1.2rem; } .nav .brand { font-size: 1.35rem; } .nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav__burger span, .nav__burger span::before, .nav__burger span::after { content:""; display:block; width:22px; height:2px; background: var(--paper); position: relative; transition: transform 0.3s var(--ease), opacity 0.2s; } .nav__burger span::before { position:absolute; top:-7px; } .nav__burger span::after { position:absolute; top:7px; } body.menu-open .nav__burger span { background: transparent; } body.menu-open .nav__burger span::before { transform: translateY(7px) rotate(45deg); } body.menu-open .nav__burger span::after { transform: translateY(-7px) rotate(-45deg); } /* mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: radial-gradient(520px 380px at 88% 12%, oklch(0.875 0.190 124 / 0.07), transparent 60%), linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 56px 100%, var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--pad); transform: translateY(-100%); transition: transform 0.45s var(--ease); pointer-events: none; } body.menu-open .mobile-menu { transform: translateY(0); pointer-events: auto; } .mobile-menu a:not(.btn) { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -0.02em; color: var(--paper); padding-block: 0.15em; } .mobile-menu a:not(.btn):active { color: var(--accent); } /* current-page link: black text on a green highlight */ .mobile-menu a:not(.btn)[aria-current="page"] { color: var(--accent-ink); background: var(--accent); width: fit-content; padding-inline: 0.3em; border-radius: var(--r); } .mobile-menu .btn { margin-top: 1.5rem; align-self: flex-start; } /* ---------- reveal animation ---------- opacity is intentionally NOT transitioned: it snaps to 1 the instant .in is added, so content is never trapped at opacity:0 if the transition clock is frozen (preview/screenshot engines). Only the transform slide is animated. */ .reveal { opacity: 0; transform: translateY(26px); transition: transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{ transition-delay: 0.08s; } .reveal[data-d="2"]{ transition-delay: 0.16s; } .reveal[data-d="3"]{ transition-delay: 0.24s; } .reveal[data-d="4"]{ transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- footer ---------- */ .footer { background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 80px) 36px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; } .footer h3 { font-family: var(--f-mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 1.1rem; } .footer__links { display: flex; flex-direction: column; gap: 0.7rem; } .footer__links a { color: var(--paper-dim); font-size: 0.95rem; transition: color 0.2s; width: fit-content; } .footer__links a:hover { color: var(--accent); } .footer__blurb { color: var(--paper-dim); max-width: 30ch; margin-top: 1rem; font-size: 0.95rem; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--paper-dim); } .footer__legal a { color: inherit; } .footer__legal a:hover { color: var(--accent); } /* ---------- generic cards / grids ---------- */ .grid { display: grid; gap: clamp(14px, 1.6vw, 22px); } .eyebrow-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); } /* utility */ .stack-sm { display: flex; flex-direction: column; gap: 0.6rem; } .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .muted { color: var(--paper-dim); } .divider { height: 1px; background: var(--line); border: 0; } /* ---------- responsive ---------- */ @media (max-width: 880px) { .nav__links, .nav__cta .btn { display: none; } .nav__burger { display: flex; } .nav__cta { gap: 0; } .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } } @media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }