/* * Tratorganic — the Tratopedia design system. * Tokens and component classes. * * Created by djTratoh with Claude Design. * Licensed CC BY-SA 4.0, with the rest of this repository. See /LICENSE. * * Plain CSS on plain HTML: no JavaScript, no build step, no external host. * The typefaces are self-hosted from ../fonts/. * * Two palettes ship here. The default is the cool "Calm" set; opt a page or a * subtree into the warm "Organic" set with data-palette="organic" on , * , or any container. Both share one lightness scale, so components keep * their contrast relationships and only hue and chroma change. * * Typefaces: Caprasimo (headings) and Figtree (body), both SIL OFL 1.1. * See ../fonts/Caprasimo-OFL.txt and ../fonts/Figtree-OFL.txt. */ /* latin-ext */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/caprasimo-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/caprasimo-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/figtree-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/figtree-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/figtree-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --color-bg: #f7f9fb; --color-surface: #eef2f6; --color-text: #1e242b; --color-accent: #3f6d99; --color-accent-2: #4f8478; --color-divider: color-mix(in srgb, #1e242b 14%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f4f6f8; --color-neutral-200: #e6eaee; --color-neutral-300: #d1d7de; --color-neutral-400: #b3bcc6; --color-neutral-500: #939ea9; --color-neutral-600: #75808c; --color-neutral-700: #59636e; --color-neutral-800: #3e4650; --color-neutral-900: #262c33; --color-accent-100: #eef4fa; --color-accent-200: #d8e6f3; --color-accent-300: #b6d0e8; --color-accent-400: #86aed3; --color-accent-500: #5d8cb8; --color-accent-600: #3f6d99; --color-accent-700: #2c5278; --color-accent-800: #1d3a58; --color-accent-900: #14263a; --color-accent-2-100: #ecf6f3; --color-accent-2-200: #d5eae4; --color-accent-2-300: #b3d8ce; --color-accent-2-400: #8bbfb2; --color-accent-2-500: #6aa295; --color-accent-2-600: #4f8478; --color-accent-2-700: #3a655c; --color-accent-2-800: #274740; --color-accent-2-900: #192e2a; --font-heading: "Caprasimo", "Noto Serif TC Display", system-ui, serif; --font-heading-weight: 400; --font-body: "Figtree", "Noto Sans TC", system-ui, sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #262c33 12%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #262c33 14%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #262c33 18%, transparent); } /* ── Alternate palette: "Organic" ──────────────────────────────────────── Opt in per page or per subtree with data-palette="organic" (on , or any container). The system's original warm, terracotta-and-sage voice — for marketing and brand surfaces where the default Calm palette reads too quiet. Same lightness scale as the default ramps, so every component keeps its contrast relationships; only hue and chroma change. */ [data-palette="organic"] { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); } [data-palette="organic"]:not(html):not(body) { background: var(--color-bg); color: var(--color-text); } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } .washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)} /* ══════════════════════════════════════════════════════════════════════════ Components — built with the tokens above. Plain CSS on plain HTML: no JavaScript, no build step. Each class is documented in readme.md and demonstrated in foundations/ and components/. ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — the pair sits side by side in sign-up rows */ background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .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: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: none; } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* — rounded frame: everything softens, small controls go pill — */ .card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); } .btn, .tag, .seg, .input { border-radius: 999px; } .input { padding-inline: 14px; } /* ══════════════════════════════════════════════════════════════════════════ Documents — site chrome and the article block components. These style the pages that tools/build_pagedoc.py generates from data/{slug}/pagedoc.jsonl. The generator emits class names only; every dimension, colour and radius resolves through the tokens above, so an article follows a palette change like any other page. All of it is plain CSS on plain HTML. Nothing here needs JavaScript, which is what lets an article render completely with scripting switched off. ══════════════════════════════════════════════════════════════════════ */ /* — site chrome — */ .skip { position: absolute; left: -9999px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-bg); } .skip:focus { left: var(--space-3); top: var(--space-3); z-index: 10; } .site-head, .site-foot { max-width: 940px; margin: 0 auto; padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; } .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); } .site-nav a { font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-decoration: none; font-size: 16px; } .site-nav a:first-child { font-size: 20px; } .site-nav a:hover, .site-lang a:hover { text-decoration: underline; } .site-lang { display: flex; gap: var(--space-2); font-size: 14px; } .site-foot { margin-top: var(--space-8); border-top: 1px solid var(--color-divider); font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .site-foot p { margin: 0; max-width: 70ch; } /* — document frame — */ .doc { max-width: 940px; margin: 0 auto; padding: 0 var(--space-4); } .doc-section { margin-bottom: var(--space-8); } .doc-section-tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); } /* — masthead of the document itself — */ .doc-eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .doc-hdr { margin-bottom: var(--space-6); } .doc-kicker { font-size: 13px; margin-bottom: var(--space-2); color: var(--color-accent); } .doc-title { font-size: clamp(30px, 5vw, 46px); margin-bottom: var(--space-3); } .doc-lede { font-size: 18px; max-width: 68ch; } .doc-shead { font-size: 26px; margin: var(--space-6) 0 var(--space-3); } .doc-ann { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); } .doc-prose { max-width: 72ch; } /* — figure rows: the big-number strip — */ .doc-stats { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .doc-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .doc-stat-big { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 27px; line-height: 1.1; } .doc-stat-lbl { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); } /* — pillars: the card grid — */ .doc-pillars { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .doc-pillar .card-kicker { color: var(--color-accent); } .doc-pillar .card-kicker i { margin-right: var(--space-1); } .doc-bullets { margin: var(--space-2) 0 0; padding-left: 1.1em; font-size: 14px; } .doc-bullets li { margin-bottom: var(--space-1); } /* — tables — */ .doc-table-wrap { overflow-x: auto; margin-bottom: var(--space-4); } .doc-table { width: 100%; font-size: 14px; } .doc-table th[scope="row"] { text-align: left; font-weight: 600; } .doc-table .dim { color: color-mix(in srgb, var(--color-text) 55%, transparent); } .doc-table .c { font-variant-numeric: tabular-nums; white-space: nowrap; } /* — timeline — */ .doc-tline { list-style: none; margin: 0 0 var(--space-4); padding: 0; } .doc-tline-row { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); } .doc-tline-yr { font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: var(--color-accent); font-variant-numeric: tabular-nums; } /* — recommendations — */ .doc-recs { margin: 0 0 var(--space-4); padding-left: 1.1em; max-width: 72ch; } .doc-recs li { margin-bottom: var(--space-2); } /* — callouts beside a passage of prose — */ .doc-callouts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .doc-callout { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); border-left: 3px solid var(--color-accent-2); background: var(--color-surface); } .doc-callout-big { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; } .doc-callout-big i { margin-right: var(--space-2); color: var(--color-accent-2); } .doc-callout-txt { font-size: 13px; } /* — verdict: the emphasised closing card — */ .doc-verdict { margin-bottom: var(--space-3); border-left: 4px solid var(--color-accent); } .doc-verdict .card-title i { margin-right: var(--space-2); color: var(--color-accent); } .doc-verdict p { margin: 0; max-width: 72ch; } /* — numbered flow — */ .doc-flow { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .doc-step { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .doc-step-n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; color: var(--color-accent); } .doc-step-t { font-weight: 600; } .doc-step-t i { margin-right: var(--space-1); color: var(--color-accent-2); } .doc-step-s { font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } /* — source footer of the document — */ .doc-foot { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); } .doc-foot p { max-width: 80ch; margin: 0; } /* — index listings — */ .entry-list { list-style: none; margin: var(--space-4) 0; padding: 0; } .entry-list > li { margin-bottom: var(--space-3); } /* An entry is a gradient tile beside its text; the tile stacks above the text on a narrow screen rather than shrinking to a stripe. */ .entry-list .entry { flex-direction: row; align-items: stretch; gap: var(--space-3); } .entry-thumb { flex: 0 0 96px; align-self: stretch; min-height: 96px; display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--a), var(--b)); /* The tile is always a deep colour, so the glyph is set light rather than inheriting the page's dark text — which would leave it barely visible. */ color: color-mix(in srgb, #ffffff 92%, transparent); } .entry-list .card-body { flex: 1 1 auto; min-width: 0; } @media (max-width: 34rem) { .entry-list .entry { flex-direction: column; } .entry-thumb { flex-basis: auto; min-height: 72px; } } .entry-list .card-title { font-size: 22px; margin: var(--space-1) 0; } .entry-list .card-title a { text-decoration: none; color: var(--color-text); } .entry-list .card-title a:hover { color: var(--color-accent); text-decoration: underline; } .entry-summary { max-width: 76ch; font-size: 15px; margin: var(--space-2) 0 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .badges { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; font-size: 13px; } .badges .tag { text-decoration: none; } /* — bilingual chrome — */ .h-alt { font-size: 0.62em; margin-left: var(--space-2); color: color-mix(in srgb, var(--color-text) 55%, transparent); } .entry-alt { margin: var(--space-1) 0 0; font-size: 15px; } .entry-alt a { text-decoration: none; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .entry-alt a:hover { color: var(--color-accent); text-decoration: underline; }