/* ========================================================================= Refokal — main.css Darkroom graphite. Onest + IBM Plex Mono. Photography carries the only color; blue exists solely as the :focus-visible outline. Fonts are declared in . Splash: wordmark logo front and center, tagline as small caps copy beneath. ========================================================================= */ :root { color-scheme: dark; /* Color tokens */ --bg: #131416; /* page background */ --surface-1: #1a1c1f; /* download band, cards, print bezel */ --surface-2: #222529; /* tonal buttons, inputs on surface-1, code */ --hairline: #2c2f34; /* separators, ledger rules */ --hairline-2:#3b3e44; /* stronger edge, ::selection bg */ --text: #ececee; /* 15.3:1 on --bg */ --text-2: #a8abb1; /* secondary copy */ --text-3: #7e8288; /* mono meta only */ --paper: #ececec; /* primary button fill */ --accent: #a7c8ff; /* :focus-visible outline ONLY */ /* Shape */ --radius-sm: 6px; /* inputs, link-row hover targets */ --radius-md: 10px; /* buttons */ --radius-lg: 16px; /* cards, image frames, code blocks */ /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms var(--ease); --dur-base: 160ms var(--ease); --dur-slow: 240ms var(--ease); --ease-luxe: cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo — the nav scrim glides in, then settles forever */ /* Type steps. Onest 600 display + body, Plex Mono meta. */ --size-t-2: 0.75rem; /* 12px mono meta, captions, status */ --size-t-1: 0.9375rem; /* 15px supporting text, nav, buttons */ --size-t0: 1.1875rem; /* 19px lead paragraphs */ --size-t1: 1.375rem; /* 22px h3: ledger titles, OS names */ --size-t2: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); /* section headings */ --size-t3: 2.375rem; /* 38px page h1, 404 */ --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --maxw: 80rem; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; background-color: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } ul, ol { list-style: none; } strong, b { font-weight: 600; } /* nothing above Onest 600 ships */ ::selection { background: var(--hairline-2); color: var(--text); } /* Scrollbar (dark, neutral) */ * { scrollbar-width: thin; scrollbar-color: var(--hairline-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 5px; border: 2px solid var(--bg); } /* The single blue use on the site */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Visually hidden but accessible to screen readers and crawlers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Anchored sections clear the fixed nav */ .how, .features, .download { scroll-margin-top: 4.5rem; } /* ---- Buttons ---- */ /* Paper primary. State layers baked into the fill. */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--paper); color: var(--bg); font-family: var(--font-body); font-weight: 600; font-size: var(--size-t-1); line-height: 1.55; padding: .75rem 1.5rem; border-radius: var(--radius-md); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4); transition: background-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); cursor: pointer; } .btn-primary:hover { background: #dedede; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.45); } .btn-primary:active { background: #d6d6d6; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4); } /* Tonal secondary. */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-weight: 600; font-size: var(--size-t-1); line-height: 1.55; padding: .75rem 1.5rem; border-radius: var(--radius-md); border: 0; transition: background-color var(--dur-base), transform var(--dur-base); } .btn-secondary:hover { background: #2e3136; transform: translateY(-1px); } .btn-secondary:active { background: #33363b; transform: none; } /* Over photography: glass instead of tonal fill. */ .hero .btn-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero .btn-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); } .hero .btn-secondary:active { background: rgba(255,255,255,.1); } /* ---- Navigation ---- The scrolled bar fades in and out: a scrim pseudo-element whose opacity (background + backdrop blur + border, all together) transitions. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; display: flex; align-items: center; } .nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(19,20,22,.82); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border-bottom: 1px solid var(--hairline); opacity: 0; transition: opacity 900ms var(--ease-luxe); } .nav--scrolled::before { opacity: 1; } .nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav__logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.01em; color: var(--text); } .nav__links { display: flex; align-items: center; gap: 1.25rem; margin-right: auto; margin-left: 2rem; } .nav__link { font-size: var(--size-t-1); font-weight: 600; line-height: 1.55; color: var(--text-2); padding: .5em .75em; border-radius: var(--radius-sm); transition: color var(--dur-fast), background-color var(--dur-fast); } .nav__link:hover, .nav__link--active { color: var(--text); background: rgba(255,255,255,.06); } .nav__actions { display: flex; align-items: center; gap: .9rem; } .nav .btn-primary { padding: .55rem 1.125rem; } .nav__toggle { display: none; align-items: center; justify-content: center; background: none; border: 1px solid var(--hairline-2); border-radius: var(--radius-sm); padding: .4rem; color: var(--text); transition: color var(--dur-fast); } .nav__toggle:hover { color: var(--text-2); background: rgba(255,255,255,.05); } .nav__toggle-close { display: none; } .nav__toggle.is-open .nav__toggle-open { display: none; } .nav__toggle.is-open .nav__toggle-close { display: block; } @media (max-width: 860px) { .nav__links { display: none; } .nav__toggle { display: inline-flex; } .nav__links.nav__links--open { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; position: absolute; top: 64px; left: 0; right: 0; background: rgba(19,20,22,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); padding: 1rem 1.5rem 1.5rem; margin: 0; } .nav__links.nav__links--open .nav__link { font-size: var(--size-t0); padding: .65rem .75rem; width: 100%; background: none; } } /* ---- Section heads ---- */ .section-head { max-width: 44rem; margin: 0 0 3rem; } .section-head__title { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t2); line-height: 1.15; letter-spacing: -.015em; color: var(--text); } .section-head__sub { margin-top: .875rem; font-size: var(--size-t0); line-height: 1.65; color: var(--text-2); } .section-head__note { margin-top: .375rem; font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); } /* ---- Splash hero ---- Full-viewport photo, wordmark logo dead center, tagline as small caps copy beneath it. */ .hero { position: relative; } .hero__banner { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-1); min-height: 34rem; min-height: clamp(34rem, 100svh, 52rem); } .hero__banner-media { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s linear, transform 9s linear; will-change: opacity, transform; } /* The transitions live on the base state so adding .is-active always animates the fade-in (and a slow settle-out zoom). The fade-out on class removal is invisible: it happens 800ms after the swap, when the next slide is already fully opaque on top. */ .hero__slide.is-active { opacity: 1; transform: scale(1); } /* Center vignette for logo legibility + top scrim for the nav */ .hero__banner::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 85% at 50% 46%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.22) 100%), linear-gradient(180deg, rgba(0,0,0,.42), transparent 30%); } .hero__banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 62%, rgba(19,20,22,.6)); } .hero__banner-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; max-width: calc(var(--maxw) + 3rem); margin: 0 auto; padding: 7rem 1.5rem 6rem; } .hero__logo { display: inline-block; } .hero__logo-svg { width: clamp(17rem, 40vw, 29rem); height: auto; color: var(--text); filter: drop-shadow(0 2px 20px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4)); } .hero__tagline { display: flex; align-items: center; justify-content: center; gap: 1.125rem; margin-top: 2.25rem; font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; letter-spacing: .42em; text-indent: .42em; /* balance the tracking */ text-transform: uppercase; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap; } .hero__tagline::before, .hero__tagline::after { content: ''; height: 1px; width: clamp(1.5rem, 6vw, 3.5rem); background: rgba(255,255,255,.35); flex-shrink: 0; } .hero__subtitle { margin-top: 1.25rem; max-width: 34rem; font-size: var(--size-t0); line-height: 1.65; color: rgba(236,236,238,.92); text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3); } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; } /* EXIF-style caption, bottom-center on the vertical scrim */ .hero__caption { position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 2; text-align: center; font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.55); } /* Entrance: content rises in, staggered */ @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero__banner-content > * { animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) both; } .hero__logo { animation-delay: .05s; } .hero__tagline { animation-delay: .18s; } .hero__subtitle { animation-delay: .30s; } .hero__actions { animation-delay: .42s; } @media (max-width: 640px) { .hero__tagline { letter-spacing: .3em; text-indent: .3em; } } /* ---- App screenshot, print bezel ---- Overlaps the bottom of the splash for depth. */ .shot { position: relative; z-index: 3; margin-top: -4.5rem; padding: 0 1.5rem; } .shot__inner { max-width: 72rem; margin: 0 auto; } .shot__frame { background: var(--surface-1); /* the print margin */ padding: .75rem; border-radius: var(--radius-lg); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 40px rgba(0,0,0,.45); } .shot__img { width: 100%; height: auto; border-radius: calc(var(--radius-sm) - 2px); } .shot__caption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text-3); } /* ---- How it works ---- */ .how { padding: 6rem 1.5rem 0; } .how__inner { max-width: var(--maxw); margin: 0 auto; } .how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .how__step { border-top: 1px solid var(--hairline); padding-top: 1.375rem; } .how__step h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t1); line-height: 1.2; margin-bottom: .65rem; } .how__step p { max-width: 38ch; font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); } @media (max-width: 860px) { .how__steps { grid-template-columns: 1fr; gap: 0; } .how__step { padding: 1.75rem 0; } .how__step:first-child { padding-top: 1.375rem; } .how__step + .how__step { border-top: none; } } /* ---- Features ledger ---- */ .features { padding: 6.5rem 1.5rem 3rem; } .features__inner { max-width: var(--maxw); margin: 0 auto; } .features__ledger { margin-top: 3rem; background: var(--surface-1); border-radius: var(--radius-lg); border: 1px solid var(--hairline); padding: 0.5rem 2rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .feature-row { display: grid; grid-template-columns: 17rem 1fr; align-items: center; column-gap: 1.5rem; padding: 1.35rem 1rem; margin-inline: -1rem; /* let the hover wash bleed past the text */ border-radius: var(--radius-sm); border-top: 1px solid var(--hairline); transition: background-color var(--dur-base); } .feature-row:first-child { border-top: none; } .feature-row:hover { background: rgba(255,255,255,.025); } .feature-row__left { display: block; min-width: 0; } .feature-row__title { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t1); line-height: 1.2; } .feature-row__desc { font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); max-width: 62ch; } @media (max-width: 860px) { .features__ledger { padding: 0.25rem 1.25rem; } .feature-row { grid-template-columns: 1fr; row-gap: .5rem; } } /* ---- Download band ---- */ .download { background: var(--surface-1); padding: 7rem 1.5rem; } .download__inner { max-width: var(--maxw); margin: 0 auto; } .download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 48rem; } .download-card { background: var(--surface-2); border-radius: var(--radius-lg); border: 1px solid var(--hairline); padding: 1.75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); } .download-card:hover { border-color: var(--hairline-2); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.28); } .download-card__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; } .os-icon { flex-shrink: 0; display: block; } .download-card__os { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t1); line-height: 1.2; } .download-card__desc { font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); margin-bottom: 1rem; } .download-card__links { display: flex; flex-direction: column; gap: 0.625rem; } .dl-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; background: var(--paper); border-radius: var(--radius-md); padding: 0.875rem 1.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4); transition: background-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); } .dl-row:hover { background: #dedede; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.45); } .dl-row:active { background: #d6d6d6; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4); } .dl-row__left { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .dl-row__name { font-family: var(--font-body); font-size: var(--size-t-1); font-weight: 600; line-height: 1.55; color: #131416; } .dl-row__plat { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.3; color: #5a5d62; font-weight: 400; } .dl-row__meta { font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: #4b4d50; white-space: nowrap; } .download-reqs { max-width: 48rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); display: grid; gap: .4rem; font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); } @media (max-width: 720px) { .download-grid { grid-template-columns: 1fr; } } /* ---- Signup ---- */ .signup-block { max-width: 32rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); } .signup-block__title { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t1); line-height: 1.2; } .signup-block__sub { margin-top: .5rem; font-size: var(--size-t-1); line-height: 1.55; color: var(--text-2); } .signup { margin-top: 1.5rem; } .signup--full { max-width: 32rem; } .signup--compact { max-width: 22rem; } .signup__label { display: block; font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text-2); margin-bottom: .5rem; } .signup__field { display: flex; gap: .5rem; } .signup__input { flex: 1; min-width: 0; background: var(--bg); /* recessed well, darker than the band */ border: 1px solid transparent; border-radius: var(--radius-sm); padding: .75rem 1rem; color: var(--text); font-family: var(--font-body); font-weight: 400; font-size: var(--size-t-1); line-height: 1.55; transition: border-color var(--dur-base), background-color var(--dur-base); } .signup__input:hover { border-color: var(--hairline-2); } .signup__input::placeholder { color: var(--text-3); } .signup__btn { flex-shrink: 0; background: var(--paper); color: var(--bg); border: none; border-radius: var(--radius-md); padding: .75rem 1.375rem; font-family: var(--font-body); font-weight: 600; font-size: var(--size-t-1); line-height: 1.55; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4); transition: background-color var(--dur-base); cursor: pointer; } .signup__btn:hover:not(:disabled) { background: #dedede; } .signup__btn:active:not(:disabled) { background: #d6d6d6; } .signup__btn:disabled { opacity: .6; cursor: default; } .signup__status { margin: .6rem 0 0; min-height: 1.2em; font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text-2); } @media (max-width: 480px) { .signup__field { flex-direction: column; } .signup__btn { justify-content: center; } } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--hairline); padding: 2.5rem 1.5rem; } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-footer__logo { display: block; max-height: 24px; width: auto; height: auto; } .site-footer__copy { font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text-3); } /* ---- Docs pages (.page__*) ---- */ .page { padding: 8rem 1.5rem 6rem; } .page__head { max-width: 68ch; margin: 0 auto 3rem; } .page__breadcrumb { font-family: var(--font-mono); font-weight: 400; font-size: var(--size-t-2); line-height: 1.5; color: var(--text-3); margin-bottom: 1rem; } .page__breadcrumb a { color: var(--text-3); transition: color var(--dur-fast); } .page__breadcrumb a:hover { color: var(--text-2); } .page__title { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t3); line-height: 1.12; letter-spacing: -.01em; } .page__desc { margin-top: 1rem; font-size: var(--size-t0); line-height: 1.65; color: var(--text-2); } .page__content { max-width: 68ch; margin: 0 auto; font-size: var(--size-t0); line-height: 1.65; } .page__content > * + * { margin-top: 1rem; } .page__content h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--size-t1); line-height: 1.2; margin-top: 2.5rem; } .page__content h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--size-t0); line-height: 1.3; margin-top: 2rem; } .page__content a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hairline-2); text-underline-offset: 3px; transition: color var(--dur-fast); } .page__content a:hover { color: var(--text); } .page__content ul { list-style: disc; padding-left: 1.5rem; } .page__content ol { list-style: decimal; padding-left: 1.5rem; } .page__content li + li { margin-top: .35rem; } .page__content code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); border-radius: var(--radius-sm); padding: .15em .4em; } .page__content pre { background: var(--surface-2); border-radius: var(--radius-md); padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--font-mono); font-size: var(--size-t-1); line-height: 1.55; } .page__content pre code { background: none; padding: 0; font-size: inherit; } .page__content pre.chroma { background: var(--surface-1); } /* ---- Chroma (Monokai tokens unchanged; surface retinted) ---- */ .chroma { background: var(--surface-1); color: #f8f8f2; } .chroma .err { color: #ff6e50; } .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; } .chroma .hl { background-color: #3b3b3b; } .chroma .lnt, .chroma .ln { color: #6a6c70; white-space: pre; } .chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt, .chroma .nt, .chroma .o, .chroma .ow { color: #f92672; } .chroma .na, .chroma .nc, .chroma .nf, .chroma .nn, .chroma .gh { color: #a6e22e; } .chroma .nb, .chroma .nv, .chroma .p, .chroma .w { color: #f8f8f2; } .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1 { color: #e6db74; } .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: #ae81ff; } .chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf, .chroma .gu { color: #75715e; } .chroma .gi { color: #a6e22e; } .chroma .gd { color: #f92672; } /* ---- 404 ---- */ .not-found { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8rem 1.5rem 4rem; } .not-found__code { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 12vw, 6rem); line-height: 1; letter-spacing: -.01em; color: var(--text); } .not-found__message { margin: 1.25rem 0 2rem; font-size: var(--size-t0); line-height: 1.65; color: var(--text-2); } /* ---- Vertical rhythm, small screens ---- */ @media (max-width: 640px) { .how { padding-top: 3rem; } .features { padding-top: 3.5rem; } .features__ledger { margin-top: 2rem; } .download { padding-top: 3.5rem; padding-bottom: 3.5rem; } .section-head { margin-bottom: 2rem; } .signup-block { margin-top: 2rem; padding-top: 1.5rem; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .hero__slide { transform: none; } }