/* ============================================================================ datasite.css — IDENTITY A, "Editorial Data" Component + token layer for the 18-site data ring. Loads AFTER styles.css and deliberately RETOKENS it: styles.css is the shared base for the whole portfolio (and is owned elsewhere), so every Identity A decision is made here, as an override, rather than by forking the base. Reference standard: SuburbIQ. Warm paper, warm hairlines, serif display, sans figures, hairline-divided stat rows instead of boxes, tables typeset flush to the measure rather than inset in a widget. Palette validated with _shared/contrast-check.mjs — 132 text/background pairs, all ≥4.5:1 (≥3:1 for large display type and UI edges). Do not change an accent without re-running it: several of these hues (lux #7C5A22, fast #8A5A14, gym #7A4E1D) had to be darkened well past "looks nice" to clear AA on warm paper. ========================================================================== */ /* ============================================================ 1. the tokens */ :root { /* paper stack — warm off-white ground, pure-white surfaces laid on it */ --paper: #FBF9F5; --paper-2: #F4F1EA; --bg: var(--paper); --bg-tint: var(--paper-2); --surface: #FFFFFF; --surface-2: var(--paper-2); /* ink ramp — four real steps, never opacity-faded text */ --ink: #14181B; --ink-2: #454D53; --muted: #646C72; --faint: #7E868D; /* warm hairlines. The warmth is the single biggest contributor to the "printed" feel and the easiest thing to lose when porting. */ --line: #E7E1D6; --line-2: #D6CEC0; --rule: var(--line); --rule-2: var(--line-2); --grid: var(--line); /* one accent hue per site, injected on by shell(). Falls back to the ring's neutral slate if a site forgets. */ --accent: var(--site-accent, #3C4A55); --accent-2: var(--site-accent, #3C4A55); --accent-3: var(--site-accent, #3C4A55); --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--paper)); /* 8pt spacing scale */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; /* editorial radii — near-flat. Cards are defined by hairlines, not shadows. */ --radius: 6px; --radius-lg: 8px; --radius-sm: 4px; /* two shadows exist in the whole system, both functional */ --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-lg: 0 12px 34px -14px rgba(20, 24, 27, .28); --max: 1180px; --measure: 72ch; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: "Fraunces", Georgia, "Times New Roman", serif; --font: var(--sans); color-scheme: light; /* ---- AAA+++ STUDIO PREMIUM additions (2026-07-30) ------------------------ Strictly ADDITIVE. Nothing above is renamed — ~90,000 built pages resolve against those names. See _plans/AAA-PLUS-STUDIO-PREMIUM.md §2.1. */ /* The third voice. Identity A was Fraunces + Inter and nothing else, so no figure on any page read as *measured*. This is the specification register: dates, units, codes, source vintages, step numbers. System stack only — the zero-new-requests constraint is non-negotiable, so we never load a mono font file. */ --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace; --fs-mono: .8125rem; --paper-deep: #F0EBE0; /* band-raised sections; one step below --paper-2 */ --accent-deep: color-mix(in srgb, var(--accent) 78%, var(--ink)); --on-accent: #FFFFFF; --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--paper)); /* The ONE elevating shadow. Reserved for the single object per page that asks for action. Everything else is flat or a surface step. */ --shadow-lift: 0 1px 0 rgba(20, 24, 27, .05), 0 24px 48px -32px rgba(20, 24, 27, .25); --t-fast: 140ms; --t-med: 220ms; --t-slow: 420ms; --ease-out: cubic-bezier(0.25, 1, 0.4, 1); --ease-inout: cubic-bezier(0.45, 0.05, 0.25, 1); --fs-stat: clamp(2.8rem, 8vw, 4.8rem); /* tokenises the .answer .big magic number */ --track-label: .11em; --grain-alpha: .028; } /* Cluster I ships English today and Hindi later. Putting Noto Sans Devanagari in the stack now costs nothing (it is only fetched if a Devanagari glyph is actually rendered) and means the day a Hindi string lands it is already typeset rather than falling back to a system default. */ body[data-cluster="india"] { --sans: "Inter", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Dark mode is WARM BASALT, not a grey inversion. Identity A's whole material argument is warm paper; flipping to cool charcoal #121416 meant the brand became a different brand after sunset — the single strongest cue (warmth) died at night. Same doctrine as the trades pair's #171613. Contrast verified: #EDE9DF on #161512 = 14.4:1, #C7C1B4 = 9.6:1, #9C968A = 5.6:1. Re-run contrast-check.mjs if touched. */ :root[data-theme="dark"] { --paper: #161512; --paper-2: #1C1B17; --bg: var(--paper); --bg-tint: var(--paper-2); --surface: #1E1C18; --surface-2: var(--paper-2); --ink: #EDE9DF; --ink-2: #C7C1B4; --muted: #9C968A; --faint: #6E6960; --line: #312F28; --line-2: #413E35; --paper-deep: #131210; --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, .72); /* Dark elevation is a SURFACE STEP plus a hairline, never a shadow. A cast shadow on a dark ground is grey mush — it reads as a rendering artifact. */ --shadow-lift: none; color-scheme: dark; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 16.5px; line-height: 1.62; letter-spacing: -.006em; } @media (max-width: 640px) { body { font-size: 16px; } } .wrap { max-width: var(--max); padding: 0 28px; } @media (max-width: 640px) { .wrap { padding: 0 20px; } } /* Narrow the CHILDREN, not the container, so the left gutter stays aligned with every full-width section above and below it. */ .narrow { max-width: none; } .narrow > * { max-width: var(--measure); } /* ======================================================== 2. the type pair Fraunces for display; Inter for UI, body and every number a reader reads, compares or copies. A serif numeral looks handsome and reads slower — the whole product is numbers, so numbers are always sans. */ h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; font-variation-settings: "SOFT" 0, "WONK" 0; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; } h2 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.024em; } h3 { font-size: 1.12rem; line-height: 1.3; letter-spacing: -.018em; } .eyebrow { display: inline-block; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); } .lede, .deck { font-size: 1.14rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin-top: var(--s3); } a { color: var(--accent); text-underline-offset: 2px; } /* ---------------------------------------------------------- breadcrumbs */ .crumbs { border-bottom: 0; background: transparent; font-size: .82rem; } .crumbs .wrap { height: auto; padding-top: 20px; gap: 7px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--accent); text-decoration: underline; } .crumbs .sep { color: var(--line-2); } .crumbs [aria-current] { color: var(--ink-2); font-weight: 600; } /* ===================================================== 3. answer above fold The shared skeleton (§3): the number is visible without scrolling, then the method, then the full table, then related. */ .hero { padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--line); } .hero h1 { max-width: 20ch; } h1 .unit { font-family: var(--sans); font-size: .42em; font-weight: 500; color: var(--muted); letter-spacing: 0; } /* The generated one-sentence answer. Left accent bar, no card chrome. */ .answer { max-width: var(--measure); margin: var(--s4) 0 0; padding: var(--s4) var(--s4) var(--s4) var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: none; text-align: left; } .answer p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; } .answer p + p { margin-top: var(--s2); } .answer b, .answer strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* THE hero numeral. Sans, proportional figures, optically large. This is the "answer above the fold" and it is the same component on every site — only the accent and the unit change. */ .answer .big, .figure-hero { display: block; font-family: var(--sans); font-size: clamp(2.8rem, 8vw, 4.8rem); font-weight: 650; letter-spacing: -.045em; line-height: .96; color: var(--ink); font-variant-numeric: proportional-nums; margin-bottom: var(--s2); } .answer .big { color: var(--accent); } .figure-unit { font-size: .94rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: var(--s2); } /* Hairline stat row — not boxes. gap:0 and right-hairlines, zero left padding so the first stat sits flush with the wrap gutter. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 0; border-top: 1px solid var(--line); max-width: none; margin: var(--s4) 0 0; } .stat { background: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 18px 22px 18px 0; text-align: left; box-shadow: none; } .stat:last-child { border-right: 0; } @media (max-width: 720px) { .stat { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } .stat:last-child { border-bottom: 0; } } .stat .k { display: block; font-size: .71rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 0; } .stat .v { font-size: 1.72rem; font-weight: 620; letter-spacing: -.032em; margin-top: 7px; line-height: 1.1; font-variant-numeric: proportional-nums; } .stat .s { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; } /* ==================================================== 4. sections & rhythm */ .section { padding: var(--s6) 0; } h2.sec { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 500; letter-spacing: -.024em; margin-bottom: var(--s2); padding-bottom: 14px; border-bottom: 1px solid var(--line); } h3.sub { font-size: 1.08rem; font-weight: 500; letter-spacing: -.018em; margin: var(--s4) 0 var(--s2); } .sec-note { color: var(--muted); font-size: .93rem; margin-bottom: var(--s4); max-width: var(--measure); } .prose { max-width: var(--measure); } .prose h2 { font-size: 1.45rem; font-weight: 500; letter-spacing: -.024em; margin: var(--s5) 0 var(--s2); } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.08rem; font-weight: 500; margin: var(--s4) 0 var(--s2); } .prose p, .prose li { max-width: var(--measure); } .prose a { font-weight: 500; } .upd { font-size: .82rem; color: var(--muted); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); } /* --------------------------------------------------- the dated source line Doctrine #7 as a design element: every figure carries its provenance and its vintage, in the same place, on every page in the ring. */ .src, .srcline { display: block; font-size: .82rem; color: var(--muted); line-height: 1.55; margin-top: var(--s3); padding-top: 10px; border-top: 1px solid var(--line); max-width: var(--measure); } .src a, .srcline a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); } .src a:hover, .srcline a:hover { color: var(--accent); } .srcline b { color: var(--ink-2); font-weight: 600; } /* ================================================================ 5. tables Typeset, not boxed: no vertical rules, no zebra, no inset. Column 1 aligns flush with the wrap gutter; numerals align flush right and are tabular. */ .tablewrap { overflow-x: auto; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 440px; } table.data caption { text-align: left; padding: 0 0 12px; font-size: .82rem; color: var(--muted); caption-side: top; } table.data th, table.data td { padding: 11px 16px 11px 0; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; } table.data th:first-child, table.data td:first-child { text-align: left; font-variant-numeric: normal; white-space: normal; } table.data th:last-child, table.data td:last-child { padding-right: 0; } table.data thead th { position: sticky; top: 0; background: var(--paper); font-size: .7rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); z-index: 1; border-bottom: 1px solid var(--line-2); } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--paper-2); } table.data td a { text-decoration: none; font-weight: 550; color: var(--ink); border-bottom: 1px solid var(--line-2); } table.data td a:hover { color: var(--accent); border-color: var(--accent); } table.data .hi { color: var(--accent); font-weight: 600; } table.data tr.self { background: var(--accent-soft); } table.data tr.self td { font-weight: 600; } .tnote { font-size: .82rem; color: var(--muted); margin-top: 10px; } /* ================================================================ 6. search */ .search { position: relative; max-width: 560px; margin: var(--s4) 0 0; } .search input { width: 100%; padding: 14px 18px 14px 46px; font-size: 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-2); box-shadow: none; font-family: var(--sans); color: var(--ink); } .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .qr { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; max-height: 60vh; overflow-y: auto; } .qr a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 16px; text-decoration: none; color: var(--ink); font-size: .92rem; font-weight: 500; border-bottom: 1px solid var(--line); } .qr a:last-child { border-bottom: 0; } .qr a:hover { background: var(--paper-2); color: var(--accent); } .qr a em { font-style: normal; font-size: .78rem; color: var(--muted); flex: none; } .qr-none { padding: 14px 16px; color: var(--muted); font-size: .88rem; } /* ========================================================== 7. link grids */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); } .grid a { display: block; padding: 13px 18px 13px 0; text-decoration: none; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: .93rem; font-weight: 500; transition: color .16s; box-shadow: none; } .grid a:hover { color: var(--accent); transform: none; border-color: var(--line-2); } .grid a small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: 2px; } .grid-tight { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: .85rem; font-weight: 500; transition: .16s; box-shadow: none; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip b { color: var(--muted); font-weight: 500; font-size: .78rem; } .az { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--s4); } .az a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--ink-2); } .az a:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--s5); } .pager a, .pager span { min-width: 38px; height: 38px; padding: 0 11px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; font-size: .87rem; font-weight: 550; color: var(--ink-2); font-variant-numeric: tabular-nums; } .pager a:hover { border-color: var(--accent); color: var(--accent); } .pager .on { background: var(--accent); color: #fff; border-color: var(--accent); } .pager .gap { border: 0; background: none; color: var(--muted); } /* ================================================================== 8. FAQ */ .faqs { max-width: var(--measure); } .faqs details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; margin-bottom: 0; box-shadow: none; } .faqs summary { padding: 15px 0; font-weight: 550; font-size: .97rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faqs summary::-webkit-details-marker { display: none; } .faqs summary::after { content: "+"; color: var(--muted); font-size: 1.3rem; font-weight: 400; line-height: 1; flex: none; } .faqs details[open] summary::after { content: "−"; } .faqs details[open] summary { border-bottom: 0; } .faqs .a { padding: 0 0 18px; color: var(--ink-2); font-size: .95rem; line-height: 1.65; max-width: 66ch; } .faqs .a p + p { margin-top: 10px; } /* ================================================ 9. header / netbar / foot */ .netbar { background: var(--ink); } :root[data-theme="dark"] .netbar { background: #0B0D0F; border-bottom: 1px solid var(--line); } .netbar-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 450; } .nb-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; } .site-head { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--line); } .brand { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: 1.1rem; } .head-nav a { font-weight: 500; } .head-nav a:hover { background: var(--paper-2); } .icon-btn { border-radius: var(--radius-sm); border-color: var(--line-2); } .icon-btn:hover { transform: none; } .site-foot { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); background: var(--paper-2); } .foot-in { align-items: flex-start; } .foot-col { max-width: 46ch; } .foot-brand { font-family: var(--serif); font-weight: 500; color: var(--ink) !important; font-size: 1.02rem !important; margin-bottom: 6px; letter-spacing: -.02em; } .foot-note { font-size: .85rem !important; line-height: 1.55; color: var(--muted); } .foot-disclaimer { margin-top: var(--s2); } .foot-links a { color: var(--ink-2); font-size: .88rem; } .foot-links a:hover { color: var(--accent); } .foot-legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); } .foot-legal p { font-size: .8rem; color: var(--muted); max-width: 88ch; } /* ===================================================== 10. the footer ring */ .ring { padding: var(--s6) 0; border-top: 1px solid var(--line); background: var(--paper); } .ring-h { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); } .ring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--s3); } .ring-card { display: block; text-decoration: none; color: inherit; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; transition: border-color .16s; border-top: 2px solid var(--card-accent, var(--accent)); } .ring-card:hover { transform: none; border-color: var(--line-2); border-top-color: var(--card-accent, var(--accent)); } .ring-card h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: 6px; } .ring-card p { font-size: .87rem; color: var(--muted); line-height: 1.55; } .ring-card .go { display: inline-block; margin-top: 11px; font-size: .8rem; font-weight: 600; color: var(--card-accent, var(--accent)); font-family: var(--sans); } /* The single bridge card to the other cluster reads as a footnote, not a sibling — a dashed edge says "different family" without extra copy. */ .ring-bridge { border-style: dashed; border-top-style: solid; } .ring-more { margin-top: var(--s4); font-size: .88rem; } .ring-more a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); } .ring-more a:hover { color: var(--accent); } /* ================================================= 11. the /network hub page */ .hub-list { border-top: 1px solid var(--line-2); max-width: 980px; } .hub-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); } .hub-dot { width: 9px; height: 9px; border-radius: 50%; align-self: center; } .hub-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; letter-spacing: -.02em; } .hub-name a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); } .hub-name a:hover { color: var(--accent); border-color: var(--accent); } .hub-name em { font-style: normal; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 8px; } .hub-blurb { font-size: .95rem; color: var(--ink-2); line-height: 1.55; max-width: 66ch; margin-top: 4px; } .hub-host { font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .hub-row.is-self { background: var(--paper-2); } @media (max-width: 640px) { .hub-row { grid-template-columns: 10px minmax(0, 1fr); } .hub-host { display: none; } } /* =========================================== 12. the entity bridge (§2.3) The one sanctioned cross-cluster contextual link, set as an editorial pull-quote rather than a card: it is an argument ("the same food, counted two ways"), and it should read like one. */ .entity-bridge { max-width: var(--measure); margin: var(--s5) 0; padding: var(--s2) 0 var(--s2) var(--s4); border-left: 3px solid var(--accent); } .eb-kicker { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .eb-body { font-family: var(--serif); font-size: 1.16rem; font-weight: 400; line-height: 1.5; letter-spacing: -.015em; color: var(--ink); } .eb-go { margin-top: 12px; font-size: .95rem; font-weight: 550; } .eb-go a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .eb-go a:hover { border-color: var(--accent); } .eb-go a::after { content: " →"; } /* ============================================== 13. the house-ad slot (§2.5) Deliberately the ONLY dark, cinematic surface in the system. It should not look like editorial content, because it is not: it is labelled, nofollowed and UTM'd. Keeping it visually foreign is honest and also protects the editorial voice of everything around it. */ .pf-cinema { position: relative; max-width: 980px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, .08); background: #05070f; box-shadow: var(--shadow-lg); text-align: center; } .pfc-scene { position: absolute; inset: 0; pointer-events: none; } .pfc-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 50% 118%, #f97316 -18%, rgba(249, 115, 22, .28) 22%, transparent 60%), radial-gradient(600px 300px at 82% -10%, rgba(124, 140, 255, .22), transparent 65%), linear-gradient(180deg, #0b1224 0%, #0a0f1e 45%, #120b18 100%); } .pfc-stars { position: absolute; inset: 0 0 34% 0; opacity: .8; background-image: radial-gradient(1.2px 1.2px at 12% 28%, #fff, transparent), radial-gradient(1px 1px at 31% 12%, rgba(255,255,255,.8), transparent), radial-gradient(1.4px 1.4px at 47% 34%, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 63% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1.3px 1.3px at 78% 30%, #fff, transparent), radial-gradient(1px 1px at 89% 10%, rgba(255,255,255,.75), transparent), radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,.5), transparent), radial-gradient(1.1px 1.1px at 55% 52%, rgba(255,255,255,.55), transparent); animation: pfc-twinkle 5.5s ease-in-out infinite alternate; } @keyframes pfc-twinkle { from { opacity: .45; } to { opacity: .95; } } .pfc-ridge { position: absolute; left: -4%; right: -4%; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent 0%, #05070f 62%); clip-path: polygon(0 78%, 9% 58%, 18% 70%, 29% 40%, 38% 62%, 50% 30%, 61% 58%, 71% 44%, 82% 66%, 92% 50%, 100% 72%, 100% 100%, 0 100%); background-color: #060910; } .pfc-sweep { position: absolute; top: -30%; bottom: -30%; width: 34%; left: -40%; background: linear-gradient(100deg, transparent 0%, rgba(255, 209, 102, .07) 42%, rgba(255, 255, 255, .13) 50%, rgba(255, 209, 102, .07) 58%, transparent 100%); transform: skewX(-14deg); animation: pfc-sweep 7s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes pfc-sweep { 0% { left: -45%; } 55% { left: 115%; } 100% { left: 115%; } } @media (prefers-reduced-motion: reduce) { .pfc-sweep, .pfc-stars { animation: none; } } .pfc-in { position: relative; padding: 40px 26px 34px; } .pfc-adlabel { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .38); margin-bottom: 16px; } .pfc-hook { font-family: var(--serif); font-size: 1rem; color: rgba(255, 255, 255, .72); font-style: italic; margin-bottom: 14px; } .pfc-title { font-family: var(--sans); font-size: clamp(1.7rem, 5.4vw, 3rem); font-weight: 700; letter-spacing: .04em; color: #fff; line-height: 1.04; margin-bottom: 12px; } .pfc-title span { background: linear-gradient(92deg, #ffd166, #f97316 55%, #fb7185); -webkit-background-clip: text; background-clip: text; color: transparent; } .pfc-sub { color: rgba(255, 255, 255, .74); font-size: .97rem; max-width: 56ch; margin: 0 auto 22px; line-height: 1.6; } .pfc-sub strong { color: #ffd166; } .pfc-count { display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin-bottom: 24px; } .pfc-cell { min-width: 64px; padding: 10px 8px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); } .pfc-cell b { display: block; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; } .pfc-cell i { display: block; font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 5px; } .pfc-sep { color: rgba(255, 255, 255, .3); font-size: 1.5rem; font-weight: 600; line-height: 2.2; } .pfc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 10px; background: linear-gradient(93deg, #ffd166, #f97316); color: #1a0f02; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; transition: transform .16s; } .pfc-btn svg { width: 18px; height: 18px; } .pfc-btn:hover { transform: translateY(-1px); } .pfc-note { margin-top: 14px; font-size: .76rem; color: rgba(255, 255, 255, .4); } @media (max-width: 520px) { .pfc-in { padding: 32px 16px 28px; } .pfc-cell { min-width: 54px; } } /* legacy blocks still referenced by a few builds — retokened, not removed */ .pf-card { max-width: 860px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: #0d1117; border: 1px solid rgba(255,255,255,.09); position: relative; } .pf-in { position: relative; padding: 32px; } .pf-eyebrow { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 12px; } .pf-title { font-family: var(--serif); font-size: clamp(1.3rem, 3.4vw, 1.85rem); font-weight: 500; letter-spacing: -.024em; color: #fff; line-height: 1.15; margin-bottom: 11px; max-width: 24ch; } .pf-body { color: rgba(255,255,255,.7); font-size: .96rem; line-height: 1.62; max-width: 60ch; margin-bottom: 20px; } .pf-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: var(--radius-sm); background: #fff; color: #0d1117; text-decoration: none; font-weight: 600; font-size: .94rem; } .pf-btn svg { width: 17px; height: 17px; } .pf-note { margin-top: 14px; font-size: .76rem; color: rgba(255,255,255,.4); } .ik-banner { position: relative; max-width: 980px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.1); background: linear-gradient(115deg, #071426 0%, #0c2b45 46%, #b0491f 88%, #f9a03f 105%); } .ik-in { position: relative; padding: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; } .ik-copy { flex: 1 1 320px; min-width: 0; } .ik-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #f9c06b; margin-bottom: 8px; } .ik-title { font-family: var(--serif); font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 500; letter-spacing: -.024em; color: #fff; line-height: 1.18; margin-bottom: 8px; } .ik-sub { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.55; max-width: 52ch; } .ik-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: var(--radius-sm); background: #fff; color: #0c2b45; text-decoration: none; font-weight: 700; font-size: .95rem; } .ik-btn svg { width: 16px; height: 16px; } /* ========================================================== 14. calculators State-change feedback only. The result updates instantly; nothing animates in, nothing slides, nothing fades. */ .calc { max-width: 620px; margin: var(--s4) 0 0; padding: var(--s4); text-align: left; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: none; } .calc .row { grid-template-columns: 1fr 1fr; gap: var(--s3); } @media (max-width: 520px) { .calc .row { grid-template-columns: 1fr; } } .calc input, .calc select { font-family: var(--sans); border-radius: var(--radius-sm); border-color: var(--line-2); background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums; } .calc input:focus, .calc select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .calc .out { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); text-align: left; } .calc .out .v { font-family: var(--sans); font-size: clamp(2rem, 7vw, 3rem); font-weight: 650; letter-spacing: -.045em; color: var(--accent); line-height: 1; font-variant-numeric: proportional-nums; } .calc .out .k { font-size: .84rem; color: var(--muted); margin-top: var(--s2); } .unit-toggle { display: inline-flex; gap: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; } .unit-toggle button { border: 0; background: none; padding: 5px 11px; border-radius: 3px; font-size: .78rem; font-weight: 550; color: var(--muted); } .unit-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: none; border: 1px solid var(--line-2); } :root[data-theme="dark"] .unit-toggle button[aria-pressed="true"] { background: var(--surface); } .lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .lbl-row label { margin-bottom: 0; } /* ======================================================== 15. comparisons */ .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: stretch; max-width: 820px; margin: var(--s4) 0 0; } .vs-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: left; box-shadow: none; } .vs-side.win { border-color: var(--accent); box-shadow: none; border-left-width: 3px; } .vs-side h2 { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: 10px; } .vs-side .v { font-family: var(--sans); font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 650; letter-spacing: -.04em; color: var(--accent); font-variant-numeric: proportional-nums; line-height: 1.1; } .vs-side .s { font-size: .82rem; color: var(--muted); margin-top: 4px; } .vs-side .badge { display: inline-block; margin-top: 12px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; } .vs-mid { display: grid; place-items: center; font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } @media (max-width: 620px) { .vs { grid-template-columns: 1fr; } .vs-mid { padding: 4px 0; } } /* ================================================== 16. the diagram moments §5: each page keeps one interactive set piece an AI answer cannot replicate. Design and AI-Overview defence are the same work, so these are treated as first-class components, not decoration. */ /* ---- shared SVG figure chrome -------------------------------------------- */ .figure, .routemap, .plan, .dial-wrap, .bandchart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); box-shadow: none; overflow: hidden; } .figure svg, .routemap svg, .plan svg, .dial-wrap svg, .bandchart svg { width: 100%; height: auto; } .figure-cap { font-size: .82rem; color: var(--muted); margin-top: 10px; } /* SVG text scales with the viewBox — on a narrow screen an 11px label renders at about 5px. Bump it, or the diagram is decorative rather than readable. */ @media (max-width: 760px) { .figure text, .routemap text, .plan text, .dial-wrap text, .bandchart text { font-size: 20px; } .figure .lab-lg, .dial-wrap .lab-lg, .bandchart .lab-lg { font-size: 24px; } } /* fly — great-circle route strip */ .routemap .land { fill: color-mix(in srgb, var(--ink) 8%, transparent); } .routemap .grat { stroke: var(--line); stroke-width: .4; fill: none; } .routemap .arc { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; } .routemap .pin { fill: var(--accent); } .routemap .plab { fill: var(--ink-2); font-size: 7px; font-weight: 600; font-family: var(--sans); } /* lux — the ceiling plan, kept as-is structurally and simply retokened */ .plan .room { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: var(--ink-2); stroke-width: 1.6; } .plan .fix { fill: var(--accent); } .plan .fixring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .35; } .plan .dim { stroke: var(--muted); stroke-width: .7; } .plan .dimtext { fill: var(--muted); font-size: 9px; font-weight: 500; font-family: var(--sans); } .plan .beam { fill: color-mix(in srgb, var(--accent) 13%, transparent); } /* read — the pages ↔ hours progress bar (also used by any "X of Y" figure) */ .progress { display: grid; gap: 12px; margin-top: var(--s3); } .progress-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 14px; align-items: center; } .progress-track { display: block; height: 22px; position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: 0 3px 3px 0; } .progress-fill { display: block; height: 20px; background: var(--accent); border-radius: 0 3px 3px 0; min-width: 2px; } .progress-row .lbl { font-size: .9rem; color: var(--ink-2); } .progress-row .val { font-size: .94rem; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .progress-row .cnt { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .progress-row { grid-template-columns: 92px 1fr auto; gap: 10px; } } /* cook — the doneness-temperature dial */ .dial-wrap { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s4); align-items: center; } @media (max-width: 640px) { .dial-wrap { grid-template-columns: 1fr; } } .dial .track { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; } .dial .zone-rare { stroke: #B14A1E; } .dial .zone-med { stroke: #8A5A14; } .dial .zone-well { stroke: #2F6B3F; } .dial .zone { fill: none; stroke-width: 14; opacity: .32; } .dial .needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: transform .18s ease; transform-origin: 100px 100px; } .dial .hubdot { fill: var(--ink); } .dial .tick { stroke: var(--line-2); stroke-width: 1.4; } .dial .ticklab { fill: var(--muted); font-size: 9px; font-family: var(--sans); font-variant-numeric: tabular-nums; } .dial .readout { fill: var(--ink); font-family: var(--sans); font-size: 26px; font-weight: 650; font-variant-numeric: proportional-nums; } .dial .readsub { fill: var(--muted); font-family: var(--sans); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .dial .needle { transition: none; } } .dial-choices { display: flex; flex-wrap: wrap; gap: 6px; } .dial-choices button { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 550; } .dial-choices button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* sehat — the Asian-Indian vs Western BMI band comparison */ .bandchart .band-w { fill: color-mix(in srgb, var(--ink) 10%, transparent); } .bandchart .band-a { fill: color-mix(in srgb, var(--accent) 22%, transparent); } .bandchart .band-edge { stroke: var(--line-2); stroke-width: .8; } .bandchart .marker { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; } .bandchart .lab { fill: var(--muted); font-size: 10px; font-family: var(--sans); } .bandchart .lab-lg { fill: var(--ink); font-size: 12px; font-weight: 650; font-family: var(--sans); } .band-legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: .84rem; color: var(--muted); margin-top: 12px; } .band-legend span { display: inline-flex; align-items: center; gap: 7px; } .band-legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; } .bandchart { color: var(--ink); position: relative; } .bandchart svg { display: block; width: 100%; } .bc-axis { position: relative; height: 18px; margin-top: 2px; } .bc-axis span { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; } .bc-rows { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .bc-slide { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); font-size: .85rem; color: var(--muted); } .bc-slide input { flex: 1; min-width: 120px; accent-color: var(--accent); } .bc-slide output { font-family: var(--sans); font-size: 1.15rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right; } /* thali — katori / roti unit iconography beside every figure */ .unitfig { display: inline-flex; align-items: baseline; gap: 8px; } .unitfig svg { width: 20px; height: 20px; align-self: center; color: var(--accent); flex: none; } .unit-icon { color: var(--accent); vertical-align: -.2em; width: 18px; height: 18px; display: inline-block; flex: none; } .unit-icon-lg { width: clamp(30px, 6vw, 46px); height: clamp(30px, 6vw, 46px); stroke-width: 1.2; } .assume svg { color: var(--accent); } .serving-note { font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 6px; } /* gym — city page hero: count + a map-ish locality strip */ .city-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: end; } @media (max-width: 900px) { .city-hero { grid-template-columns: 1fr; gap: var(--s4); } } .citystrip { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--s3); } .citystrip svg { width: 100%; height: auto; } .citystrip .cs-grid { stroke: var(--line); stroke-width: .6; } .citystrip .cs-dot { fill: var(--accent); opacity: .55; } .citystrip .cs-dot.is-big { opacity: 1; } .citystrip .cs-lab { fill: var(--muted); font-size: 8px; font-family: var(--sans); } .citystrip-cap { font-size: .8rem; color: var(--muted); margin-top: 10px; } /* ============================================================== 17. callouts */ .note { border: 0; border-left: 3px solid var(--accent); background: none; border-radius: 0; padding: 2px 0 2px var(--s3); font-size: .93rem; color: var(--ink-2); line-height: 1.6; max-width: var(--measure); } .note strong { color: var(--ink); } /* ============================================================== 18. buttons */ .btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -.01em; } .btn-primary { background: var(--accent); color: #fff; box-shadow: none; } .btn-primary:hover { transform: none; background: var(--accent); filter: brightness(.92); } .btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); box-shadow: none; } .btn-ghost:hover { transform: none; border-color: var(--accent); color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* --- accent derivation (must live on body, not :root) ---------------------- shell() injects the hue as . Custom properties inherit DOWNWARD only, so the :root derivation above can never see it and every site silently painted the neutral slate fallback. Re-derived here, on the element that actually carries the variable. Dark cuts override --accent directly below, because the inline --site-accent outranks any stylesheet. */ body { --accent: var(--site-accent, #3C4A55); --accent-2: var(--site-accent, #3C4A55); --accent-3: var(--site-accent, #3C4A55); --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--paper)); /* AAA+++ FIX 2026-07-31: these two shipped in :root, where --accent still resolves to the #3C4A55 fallback because --site-accent is written on . Result: on EVERY Identity A site the kickers, method step numbers and the .formula wash painted slate next to a correctly-accented keel. Same reason --accent-soft is redeclared here — they must live on the element that actually carries the variable. */ --accent-deep: color-mix(in srgb, var(--accent) 78%, var(--ink)); --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--paper)); } /* ==================================================== 19. per-site accents ONE hue per site, set on by shell(). These blocks exist so that the dark theme can swap in a lighter cut of the same hue — a #7C5A22 ochre that is correct on warm paper is unreadable on near-black. Cluster G: slate / ochre / moss editorial range. Cluster I: a warmer band — saffron, deep green, chai brown — so the India ring reads as the same family at a different temperature. Every value below is validated by _shared/contrast-check.mjs. */ :root[data-theme="dark"] body[data-site="burn"] { --accent: #E8875A; --accent-2: #E8875A; --accent-3: #E8875A; --accent-soft: color-mix(in srgb, #E8875A 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="fuel"] { --accent: #6FBF86; --accent-2: #6FBF86; --accent-3: #6FBF86; --accent-soft: color-mix(in srgb, #6FBF86 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="fly"] { --accent: #63B4D6; --accent-2: #63B4D6; --accent-3: #63B4D6; --accent-soft: color-mix(in srgb, #63B4D6 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="lux"] { --accent: #D9A85C; --accent-2: #D9A85C; --accent-3: #D9A85C; --accent-soft: color-mix(in srgb, #D9A85C 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="watts"] { --accent: #A79BE8; --accent-2: #A79BE8; --accent-3: #A79BE8; --accent-soft: color-mix(in srgb, #A79BE8 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="read"] { --accent: #E4849B; --accent-2: #E4849B; --accent-3: #E4849B; --accent-soft: color-mix(in srgb, #E4849B 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="mpg"] { --accent: #5FC0AC; --accent-2: #5FC0AC; --accent-3: #5FC0AC; --accent-soft: color-mix(in srgb, #5FC0AC 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="cook"] { --accent: #E8887E; --accent-2: #E8887E; --accent-3: #E8887E; --accent-soft: color-mix(in srgb, #E8887E 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="thali"] { --accent: #E28A5C; --accent-2: #E28A5C; --accent-3: #E28A5C; --accent-soft: color-mix(in srgb, #E28A5C 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="sehat"] { --accent: #5CBFB2; --accent-2: #5CBFB2; --accent-3: #5CBFB2; --accent-soft: color-mix(in srgb, #5CBFB2 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="gym"] { --accent: #D2A468; --accent-2: #D2A468; --accent-3: #D2A468; --accent-soft: color-mix(in srgb, #D2A468 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="yoga"] { --accent: #C58FBA; --accent-2: #C58FBA; --accent-3: #C58FBA; --accent-soft: color-mix(in srgb, #C58FBA 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="move"] { --accent: #78B0DA; --accent-2: #78B0DA; --accent-3: #78B0DA; --accent-soft: color-mix(in srgb, #78B0DA 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="diet"] { --accent: #A2C464; --accent-2: #A2C464; --accent-3: #A2C464; --accent-soft: color-mix(in srgb, #A2C464 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="run"] { --accent: #E08F5C; --accent-2: #E08F5C; --accent-3: #E08F5C; --accent-soft: color-mix(in srgb, #E08F5C 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="grow"] { --accent: #5BC0AE; --accent-2: #5BC0AE; --accent-3: #5BC0AE; --accent-soft: color-mix(in srgb, #5BC0AE 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="fast"] { --accent: #D6A94F; --accent-2: #D6A94F; --accent-3: #D6A94F; --accent-soft: color-mix(in srgb, #D6A94F 14%, var(--paper)); } :root[data-theme="dark"] body[data-site="sugar"] { --accent: #E1857C; --accent-2: #E1857C; --accent-3: #E1857C; --accent-soft: color-mix(in srgb, #E1857C 14%, var(--paper)); } /* ============================================================== 20. motion None decorative. Only state-change feedback and the interactive diagrams, and all of it surrenders to prefers-reduced-motion (the base reset in styles.css nukes durations; these rules remove transforms too). */ @media (prefers-reduced-motion: reduce) { .ring-card:hover, .btn:hover, .grid a:hover, .pfc-btn:hover, .icon-btn:hover { transform: none !important; } } /* ====================================================== 14. the publisher row "Published by Amit Sharma" + follow links, above the legal footer on every page. Deliberately quiet: this is a masthead credit, not a call to action — the page has exactly one CTA and it is the house-ad slot above. Reads as provenance, which is the same reason the dated-source line is styled. */ .pub { border-top: 1px solid var(--rule); background: var(--paper); } .pub-in { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; justify-content: space-between; padding: 1.75rem 0; } .pub-k { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; } .pub-name { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 1.35rem; line-height: 1.1; margin: 0 0 .3rem; } .pub-name a { color: var(--ink); text-decoration: none; } .pub-name a:hover { text-decoration: underline; text-underline-offset: .18em; } .pub-tag { margin: 0; font-size: .85rem; color: var(--ink-2, var(--muted)); max-width: 46ch; } .pub-socs { display: flex; flex-wrap: wrap; gap: .5rem; } .pub-soc { --pub-ico-bg: var(--paper); display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .8rem; line-height: 1; background: var(--paper); transition: border-color .15s ease, color .15s ease, background .15s ease; } .pub-soc svg { width: 16px; height: 16px; flex: none; } .pub-soc:hover { border-color: var(--accent); color: var(--accent); } .pub-soc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 560px) { .pub-soc-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pub-soc { padding: .55rem; } } /* ============================================ 15. house-ad urgency flag (§2.5) The two facts that make the offer worth a click — it costs nothing and it ends — used to sit in 12px small print under the button. They now lead. */ .pfc-flag { margin: 0 0 .75rem; display: flex; justify-content: center; } .pfc-flag span { display: inline-block; padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.08); } /* per-site sheets (thali.css, gym.css, sehat.css …) load AFTER this file and may override anything above for their own set piece. */ /* --- Follow strip (social distribution) ------------------------------------ Sits at the top of the footer on tools/property/india cluster sites only — see SOCIAL_CLUSTERS in globalsite.mjs for why the global ring is excluded. Deliberately quiet: this is a standing credit line, not a house ad. It must never out-shout the page's own content or the one campaign banner. */ .soc-strip{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.75rem 1.25rem;padding:1rem 0 1.15rem;border-bottom:1px solid var(--rule); } .soc-lead{margin:0;font-size:.9rem;color:var(--muted);max-width:46ch} .soc-lead strong{color:var(--ink);font-weight:600} .soc-links{display:flex;flex-wrap:wrap;gap:.5rem} .soc-link{ display:inline-block;padding:.35rem .7rem;border:1px solid var(--rule); border-radius:999px;font-size:.82rem;line-height:1.35;color:var(--ink); text-decoration:none;background:var(--surface); } .soc-link:hover,.soc-link:focus-visible{ border-color:var(--site-accent);color:var(--site-accent); } @media (max-width:640px){ .soc-strip{flex-direction:column;align-items:flex-start} .soc-lead{max-width:none} } /* ============================================================================ 20. AAA+++ STUDIO PREMIUM — the mechanics layer Fable's spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §3, §4, §6.1. Everything here is NEW selectors or additive properties on existing ones. No rule below removes or overrides a layout property, so CLS stays 0.00. ========================================================================== */ /* ---- 20.1 the mono "spec" voice ---------------------------------------- */ /* Provenance, units, codes and vintages set as specification, not prose. This single register is the loudest signal that someone measured something. */ .spec, .srcline, .crumbs, .vintage, .freshness, .kicker, .eyebrow { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; } .spec { color: var(--muted); } /* display:block was only ever set inside .ymyl, so a kicker used as the eyebrow above an h1 — its whole purpose — ran inline with the heading. */ .kicker, .eyebrow { display: block; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-deep); } /* ---- 20.2 optical type scale + real Fraunces tuning -------------------- */ /* Fraunces is already served as a variable font with its opsz 9-144 axis. The axis was never used, which is why display type read like one weight applied everywhere — the tell that no typographer was paid. Two extremes per page. */ h1, .figure-hero-serif { font-optical-sizing: none; font-variation-settings: "opsz" 84, "SOFT" 0, "WONK" 0; } .stat-display { font-family: var(--serif); font-weight: 340; font-size: var(--fs-stat); line-height: .92; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; letter-spacing: -.02em; font-variant-numeric: proportional-nums lining-nums; } .stat-display .u { font-family: var(--mono); font-size: .26em; letter-spacing: .08em; color: var(--muted); vertical-align: .5em; margin-left: .3em; } /* FIX 2026-07-31: §3's `.answer p` (0,1,1) outranks `.stat-display` (0,1,0), so a hero figure marked up as a

inside the answer block rendered at BODY size on every Identity A site — the one number the page exists to show, silently shrunk to 16px. Matching specificity here rather than raising .stat-display's, so the rule stays scoped to where the collision happens. */ .answer .stat-display, .answer p.stat-display { font-size: var(--fs-stat); line-height: .92; color: var(--ink); } /* ---- 20.3 hairline discipline: the keel ------------------------------- */ /* Section anatomy borrowed from the trades pair. A 44x2 accent rule above the kicker gives every section a datum line, which is what stops a long page from reading as stacked boxes. */ h2.sec::before, .keel::before { content: ""; display: block; width: 44px; height: 2px; background: var(--accent); margin-bottom: 14px; } /* ---- 20.4 tabular numerals with intent -------------------------------- */ /* Compared or copied -> tabular (columns must not jiggle). Display typography -> proportional (handled in .stat-display above). */ .num, td.n, .result-v, table.data td, table.data th, .pager { font-variant-numeric: tabular-nums lining-nums; } /* ---- 20.5 grain: paper as material ----------------------------------- */ /* Pure CSS, one fixed non-interactive layer, zero requests. The dead-flat hex fill was what made the ground read as a CSS variable rather than paper. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-alpha); background-image: repeating-linear-gradient(0deg, rgba(20, 24, 27, .9) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(20, 24, 27, .7) 0 1px, transparent 1px 4px); background-size: 3px 3px, 4px 4px; mix-blend-mode: multiply; } :root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .02; } body > header, body > main, body > footer, .netbar, .site-head, .site-foot { position: relative; z-index: 1; } @media print { body::before { display: none; } } /* ---- 20.6 focus & hover with intent ---------------------------------- */ /* Hover on a text link DRAWS an underline; it does not swap a colour. Hover on a card darkens its hairline and never moves it (motion here would cost CLS and reads as a template animation). Focus is never removed. */ a.draw, .rel-card .rel-t, .entity-bridge a { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat; transition: background-size var(--t-med) var(--ease-out); } a.draw:hover, a.draw:focus-visible, .rel-card:hover .rel-t, .entity-bridge a:hover { background-size: 100% 1px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---- 20.7 elevation: exactly one shadow ------------------------------ */ .card, .rel-card, .stat, .tbl-wrap, .link-grid a { box-shadow: none; } .lift, .lead-panel { box-shadow: var(--shadow-lift); } :root[data-theme="dark"] .lift, :root[data-theme="dark"] .lead-panel { box-shadow: none; background: var(--surface); border-color: var(--line-2); } /* ---- 20.8 entrance choreography -------------------------------------- */ /* Above the fold, once, on load. Gated behind no-preference so reduced-motion and no-JS readers get the finished page rather than content stranded at opacity 0 — the failure mode that reveal-on-scroll libraries ship with. */ @media (prefers-reduced-motion: no-preference) { .reveal { animation: aaa-rise var(--t-slow) var(--ease-out) both; } .reveal-2 { animation-delay: 60ms; } .reveal-3 { animation-delay: 120ms; } @keyframes aaa-rise { from { opacity: 0; transform: translateY(12px); } } } /* ---- 20.9 the promoted source line (E-E-A-T as ornament) -------------- */ /* Doctrine: no figure without a source line, no source line without a date. Identical position under every figure, table and diagram, on every site. */ .srcline { display: block; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 12px; color: var(--muted); text-transform: uppercase; } .srcline .sep { color: var(--faint); margin: 0 .5em; } .srcline a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); } .srcline a:hover { color: var(--ink-2); border-bottom-color: var(--accent); } /* ---- 20.10 the answer block, unboxed --------------------------------- */ /* Was a bordered card with a 3px left accent — the Bootstrap-alert shape. The answer is the reason the page exists; it should be open typography on paper with one hairline under it, not a component. */ .answer.aaa { background: none; border: 0; padding: 0; border-radius: 0; } .answer.aaa .big { font-family: var(--serif); font-weight: 340; font-size: var(--fs-stat); line-height: .92; letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; } .answer.aaa > .srcline { margin-top: 16px; } /* ---- 20.11 the method mini-spec -------------------------------------- */ /* A prose paragraph titled "how we compute this" is skipped by every reader. Numbered, ruled, with the formula in the mono voice, it gets read — and it is the visible half of the E-E-A-T claim. */ .method { margin: var(--s5) 0; } .method ol { list-style: none; margin: 0; padding: 0; counter-reset: mstep; } .method li { counter-increment: mstep; border-top: 1px solid var(--line); padding: 14px 0 14px 44px; position: relative; color: var(--ink-2); } .method li:last-child { border-bottom: 1px solid var(--line); } .method li::before { content: counter(mstep, decimal-leading-zero); position: absolute; left: 0; top: 14px; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--accent-deep); } .method .formula { font-family: var(--mono); font-size: .875rem; background: var(--accent-wash); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0 0; overflow-x: auto; white-space: pre; } /* ---- 20.12 related cards that earn the click (spec 6.1) --------------- */ /* The old ring cards were identical rounded boxes with a generic blurb and a "go" arrow, i.e. the reader was given no reason to click. This is the one place where link design and SEO are literally the same work, so the reason line is mandatory and must not be transplantable to another card. */ .rel-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s4); } .rel-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; color: inherit; transition: border-color var(--t-fast) var(--ease-out); } .rel-card:hover { border-color: var(--line-2); border-top-color: var(--accent); } .rel-card .rel-t { font-weight: 650; color: var(--ink); font-size: 1.02rem; align-self: flex-start; } .rel-card .rel-why { color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin: 0; } .rel-card .freshness { margin-top: auto; padding-top: 10px; color: var(--faint); align-self: flex-end; } /* Exactly one bridge card per page; the dashed edge is its "different family" grammar, so a reader is never surprised by where it lands. */ .rel-card.bridge { border-style: dashed; border-top-style: solid; background: var(--paper-2); } /* ---- 20.13 netbar promoted from utility strip ------------------------- */ .netbar .net-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; } /* FIX 2026-07-31: this was written as .net-dot, but globalsite.mjs has always emitted .nb-dot — so the rule was dead code on all 24 ring sites. */ .netbar .nb-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .netbar a { transition: opacity var(--t-fast) var(--ease-out); } /* ---- 20.14 table caption vintage chip -------------------------------- */ table.data caption .vintage, .tbl-wrap .vintage { display: inline-block; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 2px 7px; color: var(--muted); text-transform: uppercase; margin-left: 10px; } /* ---- 20.15 YMYL armour band (spec 6.5) ------------------------------- */ /* Calm and ruled, never a red alert box. A scary banner above a health figure reads as liability panic; a hairline-ruled note reads as a journal. */ .ymyl { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin: var(--s4) 0; color: var(--ink-2); font-size: .93rem; } .ymyl .kicker { display: block; margin-bottom: 6px; } /* ---- 20.16 confident emptiness --------------------------------------- */ /* At least one full-width near-white breath per page. Cheap sites fill; expensive sites breathe. */ .breathe { min-height: 18vh; } @media (max-width: 640px) { .breathe { min-height: 10vh; } }