/* ============================================================================ 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; } /* 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; } :root[data-theme="dark"] { --paper: #121416; --paper-2: #181B1E; --bg: var(--paper); --bg-tint: var(--paper-2); --surface: #1A1D20; --surface-2: var(--paper-2); --ink: #F2EFE9; --ink-2: #C3C8CC; --muted: #9AA3AA; --faint: #7E878E; --line: #2A2F33; --line-2: #3A4046; --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .85); 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)); } /* ==================================================== 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} }