/* ==========================================================================
Mitos marketing site · site.css
One stylesheet for every page on mitos.pro. Design hand-off T-016. Plain CSS, no framework, no Tailwind.
To change the whole look, edit the `tokens` layer only (colours, fonts, type scale, spacing, radius).
Structure (cascade layers, lowest priority first):
tokens design tokens: the only place raw values live
reset box model, media, list defaults
base elements: body, headings, links, code
layout page grids: container, header, footer, section, hero, split, auto grids
components brand, nav, buttons, badges, panel, shot, code, card, tiles, tools, callout, tiers
pages reading pages (pricing, terms…) and landing-only rules
utilities billing switch, mono, visually-hidden
Rules
- Components use tokens only: no hex values or font names outside `tokens`.
- Page layout is CSS grid; flex only for one-dimensional rows inside a component (nav, button row, chips).
- Flat specificity: single classes, :where() for element defaults; no ids; no !important except the
billing switch, which must always win. No inline styles in the HTML.
- Every class the existing pages use is kept: header nav .brand main .updated .summary .btn .btn.ghost
.tiers .tier .price .per .planned footer .billing-on .billing-off
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
@layer tokens, reset, base, layout, components, pages, utilities;
/* -------------------------------------------------------------------------- */
@layer tokens {
:root {
color-scheme: dark;
/* colour: surfaces */
--color-bg: #0F1215;
--color-surface: #151A1F;
--color-inset: #12161A;
--color-line: #262B31;
--color-line-strong: #3A414A;
/* colour: text (all AA or better on --color-bg) */
--color-text: #E6E8EB;
--color-text-soft: #B4BCC5;
--color-text-muted: #9AA3AD;
/* colour: accent (one accent only) */
--color-accent: #F2A93B;
--color-accent-hover: #FFC66B;
--color-on-accent: #0F1215;
/* colour: status */
--color-danger: #F08A7E;
--color-ok: #7BD88F;
/* colour: code syntax */
--color-code: #C9D1D9;
--color-code-ref: #7FB4E0;
--color-code-type: #A8D49A;
--color-code-key: var(--color-accent);
--color-code-note: var(--color-text-muted);
/* type */
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--text-2xs: 0.75rem; /* 12 */
--text-xs: 0.8125rem; /* 13 */
--text-sm: 0.875rem; /* 14 */
--text-md: 0.9375rem; /* 15 */
--text-base: 1rem; /* 16 */
--text-lg: 1.0625rem; /* 17 */
--text-xl: 1.1875rem; /* 19 */
--text-h3: 1.25rem;
--text-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
--text-h1: clamp(2.25rem, 1.4rem + 3.2vw, 3.25rem);
--text-h1-read: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
--text-h2-read: 1.3125rem;
--text-price: 1.875rem;
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-body: 1.6;
--leading-code: 1.65;
--tracking-tight: -0.02em;
--tracking-snug: -0.01em;
--tracking-brand: 0.02em;
--tracking-label: 0.08em;
--weight-regular: 400;
--weight-medium: 500;
--weight-bold: 600;
/* space (4px base) */
--space-px: 2px;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-7: 2rem; /* 32 */
--space-8: 3rem; /* 48 */
--space-9: 4.5rem; /* 72 */
--space-section: clamp(var(--space-8), 6vw, var(--space-9));
--gutter: max(var(--space-5), env(safe-area-inset-left, 0px));
/* shape */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--border: 1px solid var(--color-line);
--border-strong: 1px solid var(--color-line-strong);
--border-accent: 1px solid var(--color-accent);
--focus-ring: 2px solid var(--color-accent);
/* size */
--width-page: 75rem; /* 1200 */
--width-read: 51.25rem; /* 820 */
--width-head: 45rem; /* 720, section headings */
--width-measure: 37.5rem; /* 600, lead text line length */
--tap: 2.75rem; /* 44, minimum touch target */
--tap-lg: 3rem;
--icon-brand: 22px;
--col-min-card: 15rem;
--col-min-tool: 18.75rem;
--col-min-tier: 12.5rem;
/* breakpoints (custom properties can't be used in media queries; keep these in step):
md 45rem (720) header shows in-page anchors
lg 60rem (960) hero, split and call-out go two-column */
/* motion */
--ease: cubic-bezier(.2, .7, .2, 1);
--duration: 160ms;
}
}
/* -------------------------------------------------------------------------- */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, pre, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
[hidden] { display: none !important; } /* a reset-layer !important beats any later layer's display */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
}
/* -------------------------------------------------------------------------- */
@layer base {
html { scroll-behavior: smooth; }
body {
font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
}
:where(h1, h2, h3) { font-weight: var(--weight-bold); line-height: var(--leading-snug); text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(a) { color: var(--color-accent); transition: color var(--duration) var(--ease); }
:where(a:hover) { color: var(--color-accent-hover); }
:where(strong) { color: var(--color-text); font-weight: var(--weight-bold); }
:where(code, pre, kbd) { font-family: var(--font-mono); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--space-px); }
}
/* -------------------------------------------------------------------------- */
@layer layout {
/* container: the one source of page width and side gutters */
.wrap, header, footer {
inline-size: 100%;
max-inline-size: calc(var(--width-page) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
/* header: brand | nav */
.site-top { border-block-end: var(--border); }
body:not(.landing) > header { border-block-end: var(--border); }
header {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-3) var(--space-6);
padding-block: var(--space-4);
}
header nav {
display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
gap: var(--space-2) var(--space-5);
font-size: var(--text-md);
}
/* footer: about / links / legal line */
footer {
display: block; /* older pages: links and a
inline in