/* Air — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see air.readme.md. Air is light and airy: a warm atmospheric ground — cool sky at the top of the viewport falling to warm sand at the bottom — with ink type, pale Haze panels, and translucent glass tiles that pick the ground up through them. Surfaces separate by tone, by a 1px hairline, or by refraction; never by a drop shadow. Whitespace is the main structural device. One saturated accent (Signal Blue) carries links and small emphasis; nothing else is coloured. Buttons are an ink fill or a ghost, never a solid colour fill. */ /* Figtree loads from Google Fonts via + in each page's . @import would block rendering and cannot be preloaded. LT Superior Serif (LyonsType, SIL Open Font License 1.1) is self-hosted from assets/fonts/ — it is not on Google Fonts. The woff2 files and the OFL licence text are committed there; see assets/fonts/README.md. The stack falls through to Georgia if they ever go missing, so headings degrade to a system serif rather than breaking. */ @font-face { font-family: "LT Superior Serif"; src: url("../assets/fonts/LTSuperiorSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "LT Superior Serif"; src: url("../assets/fonts/LTSuperiorSerif-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "LT Superior Serif"; src: url("../assets/fonts/LTSuperiorSerif-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* — core palette ————————————————————————————————————————————————— */ --color-whiteout: #ffffff; /* text on ink panels, button fills, glass highlights */ --color-haze: #f3efe9; /* card, panel and frame fill — warm, a half-step off the ground */ --color-ink: #1d1a17; /* body and heading text; the primary button fill */ --color-void: #000000; /* deepest contrast — used sparingly */ --color-twilight: #426188; /* secondary heading colour, 5.8:1 on the ground */ /* The atmosphere. A cool sky wash at the top of the viewport and a warm sand wash at the bottom, over a warm off-white base — this is what stops the page reading as sterile, and it is what the glass tiles refract. It is painted on with background-attachment: fixed, so it behaves as a backdrop the page scrolls over rather than a 3000px-long gradient. */ --color-canvas: #fdfaf5; --gradient-air: radial-gradient(125% 78% at 50% 0%, rgba(142, 190, 224, 0.5) 0%, rgba(142, 190, 224, 0) 58%), radial-gradient(135% 85% at 50% 100%, rgba(233, 190, 133, 0.52) 0%, rgba(233, 190, 133, 0) 62%), linear-gradient(180deg, #eff5f9 0%, var(--color-canvas) 46%, #fdf5e9 100%); /* Signal Blue in two steps. The bright one is Air's accent and is correct for icons, borders and large text; at body size it only reaches 3.8:1 on white, so inline links take the deep step instead (5.9:1). */ --color-signal: #2b7fff; --color-signal-deep: #1a5fd0; /* One functional alert colour for invalid form state. State only — never decoration, never a fill, never on a heading. */ --color-alert: #b3261e; /* Hairlines and muted text, expressed as ink at low alpha. Kept genuinely faint: a heavy rule is the fastest way to make a light page feel closed in. */ --color-hairline: rgba(29, 26, 23, 0.12); --color-hairline-strong: rgba(29, 26, 23, 0.28); --color-muted: rgba(29, 26, 23, 0.62); --color-muted-invert: rgba(255, 255, 255, 0.72); /* Glass. The blur radius and the saturation boost are the two values that decide whether a tile reads as glass or as dirty plastic — retune them together, and keep the fill translucent enough that the ground shows. */ --glass-fill: rgba(255, 255, 255, 0.42); --glass-fill-strong: rgba(255, 255, 255, 0.62); --glass-edge: rgba(255, 255, 255, 0.55); --glass-blur: blur(28px) saturate(170%); /* — type ————————————————————————————————————————————————————————— */ --font-heading: "LT Superior Serif", Georgia, "Times New Roman", serif; /* 400 / 700 / 800 are the faces that ship. 700 is the default; drop to 400 to soften the headlines or go to 800 for a heavier poster slab. A browser only downloads the face actually used, so this is a one-token change. */ --font-heading-weight: 700; --font-body: "Figtree", system-ui, sans-serif; --text-caption: 13px; --text-body: 16px; --text-subheading: 20px; --text-heading: 32px; --text-heading-lg: 56px; /* — spacing — a 4px base unit ——————————————————————————————————— */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-30: 120px; /* — radius — role-specific; do not invent new values ————————————— */ --radius-input: 4px; --radius-btn: 8px; --radius-img: 11px; --radius-card: 12px; --radius-pill: 9999px; /* — layout ——————————————————————————————————————————————————————— */ --page-max-width: 1150px; --section-gap: var(--space-12); --card-padding: var(--space-5); /* Air has no elevation model. There are deliberately no --shadow-* tokens: nothing casts a drop shadow. A surface separates by changing its fill, by a hairline, or — for glass — by refracting the ground behind it. The one inset highlight on .glass is an edge, not an elevation. */ } *, *::before, *::after { box-sizing: border-box; } /* The gradient lives on rather than so `fixed` resolves against the viewport: the atmosphere stays put and the page scrolls over it, which is what gives the glass tiles something live to refract at any scroll position. stays transparent so it does not paint over it. */ html { background: var(--color-canvas); background-image: var(--gradient-air); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } body { margin: 0; background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-4); } h1 { font-size: var(--text-heading-lg); line-height: 1; } h2 { font-size: var(--text-heading); } h3 { font-size: var(--text-subheading); line-height: 1.4; } h4 { font-size: var(--text-body); } h5 { font-size: var(--text-caption); } h6 { font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-4); } a { color: var(--color-signal-deep); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: var(--text-caption); margin-top: var(--space-2); color: var(--color-muted); } .text-muted { color: var(--color-muted); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-signal-deep); outline-offset: 2px; } ::selection { background: rgba(43, 127, 255, 0.22); color: var(--color-ink); } /* — rules ————————————————————————————————————————————————————————————— Air prefers whitespace to rules; where one is genuinely needed it is a single faint hairline, never a heavier divider. */ .hr { height: 1px; border: 0; margin: var(--space-16) 0; background: var(--color-hairline); } /* — buttons ——————————————————————————————————————————————————————————— Two voices only: an ink fill for the primary action, a ghost (transparent with a 1px ink hairline) for everything beside it. No solid colour fills, no pills — buttons take the 8px radius. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: var(--text-body); line-height: 1.2; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-btn); background: transparent; color: var(--color-ink); transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-ink); color: var(--color-whiteout); } .btn-primary:hover { background: var(--color-void); } .btn-primary:active { background: #333333; } .btn-secondary { border-color: var(--color-hairline-strong); color: var(--color-ink); } .btn-secondary:hover { border-color: var(--color-ink); background: rgba(27, 27, 27, 0.05); } .btn-secondary:active { background: rgba(27, 27, 27, 0.1); } .btn-ghost { color: var(--color-signal-deep); padding-inline: var(--space-2); } .btn-ghost:hover { background: rgba(43, 127, 255, 0.1); } .btn-ghost:active { background: rgba(43, 127, 255, 0.18); } .btn-icon { width: 40px; height: 40px; padding: 0; } .btn-block { width: 100%; } /* — forms —————————————————————————————————————————————————————————————— Inputs are Haze fields with ink text, at the 4px input radius. */ .field > label { display: block; font-size: var(--text-caption); margin-bottom: var(--space-1); color: var(--color-muted); } .input { width: 100%; min-height: 40px; padding: 10px; font: inherit; font-size: var(--text-body); color: var(--color-ink); caret-color: var(--color-signal-deep); background: var(--color-haze); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-input); } .input::placeholder { color: rgba(27, 27, 27, 0.42); } .input:hover { border-color: var(--color-hairline-strong); } .input:focus-visible { border-color: var(--color-signal-deep); outline: 2px solid var(--color-signal-deep); outline-offset: 0; } textarea.input { min-height: 110px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-body); } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: var(--radius-pill); border: 1px solid var(--color-hairline-strong); } .radio:hover .dot { border-color: var(--color-ink); } .radio input:checked + .dot { border-color: var(--color-ink); background: var(--color-ink); box-shadow: inset 0 0 0 4px var(--color-whiteout); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-signal-deep); outline-offset: 2px; } /* The pill radius is reserved for toggles and filters — this is one of them. */ .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-pill); } .seg-opt { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px; font-size: var(--text-caption); cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-hairline); } .seg-opt:has(input:checked) { background: var(--color-ink); color: var(--color-whiteout); } .seg-opt:not(:has(input:checked)):hover { background: rgba(27, 27, 27, 0.05); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-signal-deep); outline-offset: -2px; } /* — cards —————————————————————————————————————————————————————————————— The Haze card: a pale panel a half-step off the white ground. No border, no shadow — that small tonal difference is the whole separation, which is what keeps a page of them feeling open rather than gridded. */ .card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); border-radius: var(--radius-card); background: var(--color-haze); color: var(--color-ink); } .card-kicker { font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subheading); line-height: 1.2; letter-spacing: -0.02em; } .card-body { margin: 0; font-size: var(--text-body); color: var(--color-muted); flex: 1; } .card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--color-muted); } /* The outlined variant — a panel that stays on the white ground and is drawn only by its hairline. The lightest surface the system has. */ .card-outline { background: transparent; border: 1px solid var(--color-hairline); } /* The inverted variant — ink fill, light type. This is the system's emphasis device: with no accent fill available, a single dark panel among pale ones is how something gets marked as the recommendation. Use it once per view. */ .card-invert { background: var(--color-ink); color: var(--color-whiteout); border: 0; } .card-invert .card-kicker, .card-invert .card-body, .card-invert .card-meta { color: var(--color-muted-invert); } .card-invert a { color: var(--color-whiteout); } .card-invert .btn-primary { background: var(--color-whiteout); color: var(--color-ink); } .card-invert .btn-primary:hover { background: var(--color-haze); } .card-invert .btn-secondary { color: var(--color-whiteout); border-color: rgba(255, 255, 255, 0.4); } .card-invert .btn-secondary:hover { border-color: var(--color-whiteout); background: rgba(255, 255, 255, 0.1); } /* — glass —————————————————————————————————————————————————————————————— A translucent tile that takes its colour from the atmosphere behind it rather than carrying one of its own. Combine with .card for a glass panel: `class="card glass"`. Three parts make it read as glass rather than as a washed-out box: the translucent fill, the backdrop blur *with* a saturation boost (without the saturation the sampled ground goes grey and the tile looks dirty), and a bright top edge — an inset highlight, which is a specular edge rather than an elevation shadow, so it stays inside the system's no-shadow rule. */ .glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .glass-strong { background: var(--glass-fill-strong); } /* Without backdrop-filter there is no refraction, so a translucent fill would just look weak. Fall back to a near-opaque tile instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, 0.85); } } /* — tags ———————————————————————————————————————————————————————————————— Pills, outlined rather than filled. Signal Blue is the only colour here. */ .tag { display: inline-flex; align-items: center; font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.02em; padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-hairline-strong); color: var(--color-ink); } .tag-accent { border-color: rgba(43, 127, 255, 0.4); color: var(--color-signal-deep); } .tag-accent-2 { border-color: var(--color-hairline); color: var(--color-muted); } .tag-neutral { border-color: transparent; background: var(--color-haze); color: var(--color-ink); } .tag-outline { border-color: var(--color-ink); color: var(--color-ink); } .card-invert .tag { border-color: rgba(255, 255, 255, 0.4); color: var(--color-whiteout); } /* — navigation —————————————————————————————————————————————————————————— */ .nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-hairline); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subheading); letter-spacing: -0.02em; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: var(--text-body); font-weight: 500; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-signal-deep); } /* — tables —————————————————————————————————————————————————————————————— */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-body); } .table th { text-align: left; font-size: var(--text-caption); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-3); border-bottom: 1px solid var(--color-hairline-strong); } .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-hairline); } .table tbody tr:hover { background: var(--color-haze); } /* — dialog —————————————————————————————————————————————————————————————— */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: rgba(27, 27, 27, 0.4); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-whiteout); border: 1px solid var(--color-hairline); color: var(--color-ink); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-subheading); letter-spacing: -0.02em; } .dialog-body { font-size: var(--text-body); color: var(--color-muted); } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* — images ————————————————————————————————————————————————————————————— Photographs and screenshots are crisp — no wash, no filter — and take the 11px image radius. */ .img-radius { border-radius: var(--radius-img); overflow: hidden; }