/* DESIGN TRIAL (2026-09-25): Home and About in the Nameless Card Errata page's look. * * Jasper will judge this from screenshots and then decide whether it spreads site-wide, so * it is built to be removable in one move: delete this file, and the two {% block %} lines * in home.html and about.html that opt in. Nothing else on the site loads it. * * Borrowed from reference/errata.css, not linked to it: Barlow Condensed 500/700 for display, * Source Sans 3 400/600 for body, IBM Plex Mono 500 for figures, navy ink, the eyebrow / lede / * chip / table-box shapes. errata.css is not edited and not loaded here. * * GREEN, NOT RED (Jasper, 2026-09-26: "the red is just a poor look to me, I would prefer more * of a green like the current somworld.com logo"). The logo's green is #56F8CC; it is used as * is on dark grounds. On the light page it is far too pale for text, so light mode uses * #0C6E54, the same hue at a lower lightness: 6.22:1 on white, 5.70:1 on the page ground, * 5.61:1 on the mint tint (WCAG AA is 4.5). accounts/tests_design_trial.py measures these. * * The MENU is no longer styled here: it is static/menu.css, on every page. * * TWO RULES THAT KEEP IT CONTAINED (accounts/tests_design_trial.py pins both): * * 1. EVERY selector names body.ew, the class only Home and About put on , so no other * page body changes. And every rule other than the tokens and the body itself is under * `body.ew main`, so NOTHING here reaches the menu, which menu.css draws on every page. * Measured 2026-09-26: a plain `body.ew a` (0,1,2) beat menu.css's `nav a` (0,0,2) and * painted the menu's links navy on the navy bar, on these two pages only. * 2. EVERY custom property is --ew-*. site.css keeps --bg, --accent, --muted and friends on * :root, and errata.css had to be scoped because the same names collided (an earlier * unscoped copy turned every link on the site red). A prefix makes the collision * impossible rather than merely avoided. * * Dark mode uses the site's two doors, with the same values in each: the account's choice * (:root[data-theme="dark"]) and the device's (prefers-color-scheme, unless the account * chose light). A token defined under one door and not the other is the drift that * DarkModeCellRuleTests guards in site.css; the trial's own test guards it here. * * Fonts are the site's self-hosted copies in static/fonts/ (the same files menu.css declares; * declaring them here too keeps this file working on its own). Static storage is WhiteNoise's * CompressedStaticFilesStorage, which does not rewrite url()s, so /static/trial/../fonts/ * resolves to /static/fonts/. No request to Google, and no dependency on the reference app. */ @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")} /* ---- tokens -------------------------------------------------------------- */ body.ew { --ew-bg: #F3F5F8; --ew-surface: #FFFFFF; --ew-ink: #14213D; --ew-muted: #566079; --ew-rule: #D5DBE5; --ew-accent: #0C6E54; --ew-accent-soft: #E2F8F2; --ew-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --ew-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --ew-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.ew { color-scheme: dark; --ew-bg: #0F1522; --ew-surface: #172035; --ew-ink: #E6EAF2; --ew-muted: #9AA4B8; --ew-rule: #2A3550; --ew-accent: #56F8CC; --ew-accent-soft: #123A30; } } :root[data-theme="dark"] body.ew { color-scheme: dark; --ew-bg: #0F1522; --ew-surface: #172035; --ew-ink: #E6EAF2; --ew-muted: #9AA4B8; --ew-rule: #2A3550; --ew-accent: #56F8CC; --ew-accent-soft: #123A30; } /* ---- page ---------------------------------------------------------------- */ body.ew { background: var(--ew-bg); color: var(--ew-ink); font: 17px/1.6 var(--ew-body); min-height: 100vh; } body.ew main { max-width: 70rem; padding: 32px 16px 64px; } body.ew main a { color: var(--ew-ink); text-decoration: underline; text-decoration-color: var(--ew-muted); text-underline-offset: 3px; } body.ew main a:hover { color: var(--ew-accent); text-decoration-color: var(--ew-accent); text-decoration-thickness: 2px; } body.ew main a:focus-visible, body.ew main button:focus-visible { outline: 2px solid var(--ew-accent); outline-offset: 2px; } body.ew main small, body.ew main .muted { color: var(--ew-muted); } body.ew main p { margin: 0 0 12px; } body.ew main h1 { font: 700 clamp(46px, 10vw, 92px)/0.92 var(--ew-display); letter-spacing: 0.01em; margin: 0; text-wrap: balance; } body.ew main h2 { font: 700 21px/1.1 var(--ew-display); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; } body.ew main h2::after { content: ""; flex: 1; border-top: 1px solid var(--ew-rule); } /* The red kicker above a headline. */ body.ew main .ew-eyebrow { font: 700 14px/1.3 var(--ew-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ew-accent); margin: 0; } body.ew main .ew-eyebrow strong { font-weight: 700; } body.ew main .ew-lede { max-width: 60ch; color: var(--ew-muted); font-size: 19px; margin: 0; } /* ---- masthead ------------------------------------------------------------ */ body.ew main .ew-mast { display: grid; gap: 14px; padding: 8px 0 28px; margin-bottom: 28px; border-bottom: 3px solid var(--ew-ink); } /* The "rebuilt from the ground up" teaser: one line, set off like a notice. */ body.ew main .ew-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--ew-accent-soft); border-left: 4px solid var(--ew-accent); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 32px; } body.ew main .ew-note p { margin: 0; } /* ---- chips (errata's filter chips, used here as links) -------------------- */ body.ew main .ew-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ew-rule); background: var(--ew-surface); color: var(--ew-ink); border-radius: 999px; padding: 6px 14px; font: 600 15px/1.3 var(--ew-body); text-decoration: none; max-width: 100%; } body.ew main .ew-chip:hover { border-color: var(--ew-accent); color: var(--ew-accent); } body.ew main .ew-chip::after { content: "\2192"; color: var(--ew-accent); } body.ew main .ew-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } /* A figure in the mono face, on the accent-soft ground: the errata page's placeholder tag. */ body.ew main .ew-tag { font: 500 14px var(--ew-mono); background: var(--ew-accent-soft); color: var(--ew-accent); padding: 1px 7px; border-radius: 4px; white-space: nowrap; } /* ---- home: latest + side panel ------------------------------------------- */ body.ew main .ew-grid { display: grid; gap: 28px; } @media (min-width: 860px) { body.ew main .ew-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } } body.ew main .ew-box { background: var(--ew-surface); border: 1px solid var(--ew-rule); border-radius: 8px; overflow: hidden; } body.ew main ol.ew-latest { list-style: none; margin: 0; padding: 0; } body.ew main ol.ew-latest li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid var(--ew-rule); } body.ew main ol.ew-latest li:last-child { border-bottom: 0; } body.ew main ol.ew-latest a { font-weight: 600; text-decoration: none; } body.ew main ol.ew-latest a:hover { text-decoration: underline; } body.ew main ol.ew-latest small { font: 500 13px var(--ew-mono); color: var(--ew-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { body.ew main ol.ew-latest li { grid-template-columns: minmax(0, 1fr); } } body.ew main .ew-panel { background: var(--ew-surface); border: 1px solid var(--ew-rule); border-top: 4px solid var(--ew-accent); border-radius: 8px; padding: 18px 20px; } body.ew main .ew-panel .ew-eyebrow { margin-bottom: 10px; } body.ew main .ew-panel p:last-child { margin-bottom: 0; } body.ew main ul.ew-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } body.ew main ul.ew-links li { padding: 10px 0; border-bottom: 1px solid var(--ew-rule); color: var(--ew-muted); font-size: 15.5px; } body.ew main ul.ew-links li:first-child { padding-top: 0; } body.ew main ul.ew-links li:last-child { border-bottom: 0; padding-bottom: 0; } body.ew main ul.ew-links a { display: block; font: 700 19px/1.2 var(--ew-display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--ew-ink); } body.ew main ul.ew-links a:hover { color: var(--ew-accent); } body.ew main .ew-foot { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--ew-rule); font-size: 15px; } /* ---- about --------------------------------------------------------------- */ body.ew main .ew-section { margin: 0 0 40px; } body.ew main .ew-cards { display: grid; gap: 14px; } @media (min-width: 760px) { body.ew main .ew-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.ew main .ew-cards p { margin: 0; background: var(--ew-surface); border: 1px solid var(--ew-rule); border-top: 4px solid var(--ew-ink); border-radius: 8px; padding: 16px 18px; font-size: 16px; } body.ew main .ew-cards p:first-child { border-top-color: var(--ew-accent); } body.ew main .ew-intro { display: grid; gap: 8px 36px; } @media (min-width: 860px) { body.ew main .ew-intro { grid-template-columns: 17rem minmax(0, 1fr); } } body.ew main .ew-pull { font: 700 30px/1.08 var(--ew-display); letter-spacing: 0.01em; margin: 0; text-wrap: balance; } body.ew main .ew-prose { max-width: 66ch; } body.ew main .ew-owed { background: var(--ew-accent-soft); border-left: 4px solid var(--ew-accent); border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 0; max-width: 66ch; }