/* ========================================================================== 4BIT DIGITAL STUDIO — tokens.css Design tokens, reset, base typography, layout primitives ========================================================================== */ :root { /* ---- Brand gradient, sampled from the logo -------------------------- */ --brand-1: #F5453A; /* top-left square — warm red */ --brand-2: #EE2E5C; /* middle square — crimson */ --brand-3: #EA2A80; /* bottom-right — magenta */ --brand: var(--brand-2); --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%); --brand-grad-soft: linear-gradient(135deg, rgba(245,69,58,.16), rgba(234,42,128,.16)); /* ---- Surfaces — black with a cold ink tint, like the logo bg -------- */ --void: #05070C; --ink-0: #070A11; --ink-1: #0A0E18; --ink-2: #0F1420; --ink-3: #161C2B; /* ---- Text ---------------------------------------------------------- */ --text: #EEF0F5; --text-soft: #A8AEBF; --text-mute: #6C7386; --text-dim: #454B5C; /* ---- Liquid glass -------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, .034); --glass-bg-2: rgba(255, 255, 255, .055); --glass-brd: rgba(255, 255, 255, .085); --glass-brd-hi: rgba(255, 255, 255, .22); --glass-blur: 22px; --glass-shadow: 0 1px 0 0 rgba(255,255,255,.07) inset, 0 -1px 0 0 rgba(0,0,0,.35) inset, 0 24px 60px -20px rgba(0,0,0,.85), 0 2px 10px -4px rgba(0,0,0,.6); /* ---- Glows --------------------------------------------------------- */ --glow-brand: 0 0 0 1px rgba(238,46,92,.35), 0 10px 40px -8px rgba(238,46,92,.45); --glow-soft: 0 0 80px -20px rgba(238,46,92,.5); /* ---- Type ---------------------------------------------------------- */ --f-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --f-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* fluid scale */ --t-xs: clamp(.68rem, .64rem + .18vw, .76rem); --t-sm: clamp(.8rem, .76rem + .2vw, .89rem); --t-base: clamp(.95rem, .9rem + .25vw, 1.05rem); --t-md: clamp(1.05rem, .98rem + .4vw, 1.22rem); --t-lg: clamp(1.35rem, 1.15rem + .9vw, 1.9rem); --t-xl: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem); --t-2xl: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); --t-3xl: clamp(2.35rem, 1.1rem + 5.4vw, 6.6rem); /* ---- Space / layout ------------------------------------------------ */ --gap: clamp(1rem, .7rem + 1.2vw, 1.6rem); --section-y: clamp(5rem, 3rem + 9vw, 11rem); --container: 1240px; --pad-x: clamp(1.15rem, .6rem + 2.6vw, 2.75rem); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ---- Motion -------------------------------------------------------- */ --e-out: cubic-bezier(.22, 1, .36, 1); --e-in-out: cubic-bezier(.65, 0, .35, 1); --e-spring: cubic-bezier(.34, 1.56, .64, 1); --d-fast: .22s; --d-mid: .45s; --d-slow: .9s; --header-h: 76px; } /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } body { min-height: 100svh; background: var(--void); color: var(--text); font-family: var(--f-body); font-size: var(--t-base); font-weight: 400; line-height: 1.65; letter-spacing: .002em; /* `hidden` here would turn into a scroll container, which breaks scrollIntoView() and scroll-padding for anchor links. `clip` stops the horizontal overflow without that side effect. */ overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--brand-2); color: #fff; } :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; } /* Scrollbar */ @supports (scrollbar-color: red blue) { html { scrollbar-color: #22293a transparent; scrollbar-width: thin; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand-1), var(--brand-3)); border-radius: 99px; border: 3px solid var(--void); } /* ========================================================================== LAYOUT PRIMITIVES ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .section { position: relative; padding-block: var(--section-y); } .section__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section__head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; } .section__head--center .section__desc { max-width: 56ch; } @media (max-width: 800px) { .section__head { grid-template-columns: 1fr; align-items: start; } } .section__title { font-size: var(--t-2xl); margin-top: .5rem; } .section__desc { color: var(--text-soft); font-size: var(--t-md); max-width: 46ch; line-height: 1.6; } /* ========================================================================== SMALL SHARED BITS ========================================================================== */ .kicker { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--text-mute); } .kicker span { display: grid; place-items: center; min-width: 2.15em; padding: .18em .45em; border-radius: 5px; background: var(--brand-grad); color: #fff; font-weight: 700; letter-spacing: .12em; box-shadow: 0 4px 16px -4px rgba(238,46,92,.7); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--glass-brd); background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); } .pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #21D07A; box-shadow: 0 0 0 0 rgba(33,208,122,.6); animation: pulse 2.4s var(--e-out) infinite; } .link { color: var(--text); background-image: linear-gradient(var(--brand-2), var(--brand-2)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: background-size var(--d-fast) var(--e-out), color var(--d-fast); } .link:hover { color: var(--brand-2); background-size: 0% 1px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 50%; translate: -50% -200%; z-index: 300; padding: .7rem 1.2rem; border-radius: var(--r-pill); background: var(--brand-grad); color: #fff; font-weight: 600; transition: translate var(--d-fast) var(--e-out); } .skip-link:focus-visible { translate: -50% 0; } .sprite { position: absolute; } .sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }