/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #07110b #22332a #f5faf3 #2f7a4f #357950 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f5faf3; --surface: #fbfdfa; --surface-2: #e9eee7; --border: #d4d9d3; --border-strong: #aeb4ad; --ink: #22332a; --muted: #646f67; --accent: #2f7a4f; --accent-hover: #286843; --accent-ink: #ffffff; --accent-text: #357950; --accent-strong: #2b7049; --accent-soft: #d9e8dc; --accent-border: #9cc0a9; --success: #15803d; --success-ink: #ffffff; --success-soft: #daebdd; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ede6d7; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #eedfd9; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #07110b; --surface: #202923; --surface-2: #131d17; --border: #2a322d; --border-strong: #515854; --ink: #f5faf3; --muted: #969d96; --accent: #2f7a4f; --accent-hover: #4e8e69; --accent-ink: #ffffff; --accent-text: #4f8f6a; --accent-strong: #5d9876; --accent-soft: #10281a; --accent-border: #19402a; --success: #15803d; --success-ink: #ffffff; --success-soft: #0a2916; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2d200b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2e130f; --danger-strong: #d16969; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* --------------------------------------------------------------------- Retune the system: a softer, more organic field-guide feel — rounder corners, a slightly gentler lifted shadow. --------------------------------------------------------------------- */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-raised: 0 18px 40px -18px color-mix(in srgb, var(--ink) 28%, transparent); } /* --------------------------------------------------------------------- Hero band — the one gradient moment on the app, on the landing page. Copy on the left, a photo mosaic on the right; wraps to a single column with the mosaic below the copy on narrow screens. --------------------------------------------------------------------- */ .hero-band { position: relative; display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 2.5rem; overflow: hidden; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-strong), var(--accent) 55%, var(--accent-hover)); isolation: isolate; } .hero-band::before, .hero-band::after { content: ""; position: absolute; border-radius: 999px; background: color-mix(in srgb, var(--accent-ink) 14%, transparent); z-index: -1; } .hero-band::before { width: 300px; height: 300px; top: -140px; right: -60px; } .hero-band::after { width: 180px; height: 180px; bottom: -100px; left: 8%; background: color-mix(in srgb, var(--accent-ink) 8%, transparent); } .hero-copy { flex: 1 1 340px; position: relative; z-index: 1; } .hero-copy p { color: color-mix(in srgb, var(--accent-ink) 88%, transparent); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent-ink) 16%, transparent); font-size: var(--t-xs); font-weight: var(--fw-semi, 600); text-transform: uppercase; letter-spacing: 0.06em; } .hero-btn-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent-strong); font-weight: var(--fw-semi, 600); } .hero-btn-primary:hover { background: color-mix(in srgb, var(--accent-ink) 88%, transparent); border-color: color-mix(in srgb, var(--accent-ink) 88%, transparent); } .hero-btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent); color: var(--accent-ink); } .hero-btn-ghost:hover { background: color-mix(in srgb, var(--accent-ink) 14%, transparent); border-color: var(--accent-ink); } .hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-inline: 0; } .hero-stats > div { display: flex; flex-direction: column; } .hero-stats > div > * + * { margin-top: 0.2rem; } .hero-stats dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; color: color-mix(in srgb, var(--accent-ink) 80%, transparent); } .hero-stats dd { margin: 0; font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.01em; } .hero-mosaic { flex: 0 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.85rem; width: 100%; max-width: 380px; height: 300px; } .mosaic-item { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-raised); border: 3px solid color-mix(in srgb, var(--accent-ink) 25%, transparent); } .mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .mosaic-main { grid-row: 1 / 3; } @media (max-width: 640px) { .hero-mosaic { max-width: 100%; height: 220px; } .hero-stats { gap: 1.25rem; } } /* --------------------------------------------------------------------- Section heads used between the hero and the catalog. --------------------------------------------------------------------- */ .section-head { display: flex; flex-direction: column; } .section-head > * + * { margin-top: 0.15rem; } /* --------------------------------------------------------------------- Browse-by-category cards. --------------------------------------------------------------------- */ .category-card { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: left; cursor: pointer; transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out; } .category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: var(--accent-border); } .category-card:focus-visible { outline: none; box-shadow: var(--ring); } .category-card-media { flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--radius); overflow: hidden; } .category-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .category-card-body { display: flex; flex-direction: column; min-width: 0; } .category-card-body > * + * { margin-top: 0.15rem; } .category-card-name { font-weight: var(--fw-semi, 600); font-size: var(--t-md); color: var(--ink); } .category-card-blurb { font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .category-card-count { font-size: var(--t-xs); color: var(--accent-strong); font-weight: var(--fw-medium); } /* --------------------------------------------------------------------- Bird cards --------------------------------------------------------------------- */ .bird-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .bird-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); } .bird-card .media { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); } .bird-card-name { display: block; font-weight: var(--fw-semi, 600); font-size: var(--t-lg); color: var(--ink); text-decoration: none; line-height: 1.25; } .bird-card-name:hover { color: var(--accent-strong); } /* --------------------------------------------------------------------- Detail page — a big photo banner with the name and category overlaid. --------------------------------------------------------------------- */ .back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); text-decoration: none; font-size: var(--t-sm); } .back-link:hover { color: var(--accent-strong); } .detail-banner { position: relative; overflow: hidden; height: 340px; } .detail-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-banner-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.5rem; background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 78%, transparent) 0%, transparent 65%); } .detail-banner-text { display: flex; flex-direction: column; } .detail-banner-text > * + * { margin-top: 0.4rem; } .detail-title { /* Mixed FROM tokens, the same way .media-credit pairs its wash with its text: the scrim below is color-mix(--ink), and pairing the title with --canvas keeps it legible against that scrim whichever theme is active, since the two flip together. */ margin: 0; color: var(--canvas); font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 50%, transparent); } .detail-side-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; } .detail-side-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } @media (max-width: 640px) { .detail-banner { height: 260px; } .detail-banner-overlay { flex-direction: column; align-items: flex-start; } .detail-title { font-size: var(--t-3xl); } } .fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .fact-list > * + * { margin-top: 0.75rem; } .fact-list li { display: flex; align-items: flex-start; gap: 0.6rem; } .fact-list li svg { margin-top: 0.15rem; flex-shrink: 0; } /* --------------------------------------------------------------------- Filter bar --------------------------------------------------------------------- */ .filter-bar .cluster { flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .bird-card, .bird-card:hover, .category-card, .category-card:hover, .detail-side-card, .detail-side-card:hover { transition: none; transform: none; } }