/* fsn.css — inter + playfair + unifraktur + abril faces, then FABLE CORE + ECORE */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fsn/inter-var-normal.woff2) format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fsn/inter-var-normal.woff2) format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fsn/inter-var-normal.woff2) format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fsn/inter-var-normal.woff2) format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/fsn/inter-var-normal.woff2) format('woff2');} @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/fsn/playfair-display-italic-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/fsn/playfair-display-var-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/fsn/playfair-display-var-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/fsn/playfair-display-var-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'UnifrakturMaguntia'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fsn/unifrakturmaguntia-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Abril Fatface'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fsn/abril-fatface-normal-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── FABLE language · tokens: light default, .fs-dark = dark ── */ #sn-x{ --f2-panel:#ffffff; --f2-panel2:#f2f4fb; --f2-line:#e3e7f2; --f2-line2:#d7dcef; --f2-text:#171c30; --f2-muted:#5f6783; --f2-faint:#636d8d; --f2-cyan:#077793; --f2-indigo:#5551e8; --f2-green:#0f9d6a; --f2-hover:#eef0f9; --f2-ring:linear-gradient(135deg,#ff2e93,#615dfa); font-family:Inter,-apple-system,"Segoe UI",sans-serif;color:var(--f2-text); } .fs-dark #sn-x{ --f2-panel:#171c30; --f2-panel2:#131830; --f2-line:#262a40; --f2-line2:#2e3452; --f2-text:#e8ecf8; --f2-muted:#8b93ad; --f2-faint:#6d7590; --f2-cyan:#41efff; --f2-indigo:#8d8aff; --f2-green:#3ddc97; --f2-hover:#1d2340; } #sn-x *{box-sizing:border-box} #sn-x{max-width:1280px;margin:0 auto} #sn-x .pnl{background:var(--f2-panel);border:1px solid var(--f2-line);border-radius:10px} #sn-x .pnl-h{display:flex;align-items:center;justify-content:space-between; padding:13px 16px 11px;border-bottom:1px solid var(--f2-line)} #sn-x .pnl-h b{font:700 12px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--f2-muted)} #sn-x .pnl-h a{font:600 12px/1 Inter;color:var(--f2-indigo);text-decoration:none} #sn-x .pnl-b{padding:14px 16px} #sn-x .hairline{position:relative;overflow:hidden} #sn-x .hairline::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--f2-ring)} /* page head */ #sn-x .ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px; flex-wrap:wrap;margin:2px 0 20px} #sn-x .ph-row h1{margin:0;font:800 26px/1.15 Inter;letter-spacing:-.02em} #sn-x .ph-row .sub{margin:6px 0 0;font:400 14px/1.5 Inter;color:var(--f2-muted);max-width:60ch} #sn-x .chips{display:flex;gap:6px;flex-wrap:wrap} #sn-x .chips a{padding:6px 12px;border:1px solid var(--f2-line);border-radius:99px; font:500 12px/1 Inter;color:var(--f2-muted);text-decoration:none;background:var(--f2-panel)} #sn-x .chips a.on{background:var(--f2-hover);color:var(--f2-text);border-color:var(--f2-line2)} #sn-x .chips a:hover{background:var(--f2-hover);color:var(--f2-text)} /* round member avatars (locked: members = circles; hex reserved) */ #sn-x .av{position:relative;width:40px;height:40px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; font:600 14px/1 Inter;color:#fff;letter-spacing:.02em} #sn-x .av.sm{width:30px;height:30px;font-size:11px} #sn-x .av.lg{width:72px;height:72px;font-size:24px} #sn-x .av.xl{width:96px;height:96px;font-size:31px} #sn-x .av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px; border-radius:50%;background:var(--f2-green);border:2px solid var(--f2-panel)} #sn-x .av.xl.on::after{width:16px;height:16px;border-width:3px;right:3px;bottom:3px} #sn-x .c1{background:#5551e8}#sn-x .c2{background:#0e7490}#sn-x .c3{background:#7c3aed} #sn-x .c4{background:#0f766e}#sn-x .c5{background:#b45309}#sn-x .c6{background:#be185d} #sn-x .c7{background:#475569} #sn-x .who{display:flex;align-items:center;gap:11px;min-width:0} #sn-x .who .nm{font:600 14.5px/1.25 Inter;color:var(--f2-text)} #sn-x .who .meta{font:400 12.5px/1.3 Inter;color:var(--f2-faint);margin-top:2px} #sn-x .lvl{display:inline-block;margin-left:7px;padding:2px 6px;border:1px solid var(--f2-line2); border-radius:5px;font:600 10px/1 Inter;letter-spacing:.06em;color:var(--f2-muted);vertical-align:1px} /* action row + Shift This */ #sn-x .acts{display:flex;align-items:center;gap:4px;padding:6px 10px 10px;margin:6px -8px 0} #sn-x .act{position:relative;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px; font:600 12.5px/1 Inter;color:var(--f2-muted);text-decoration:none;font-variant-numeric:tabular-nums} #sn-x .act i{font-size:14.5px} #sn-x .act:hover{background:var(--f2-hover);color:var(--f2-text)} #sn-x .act.shift i{background:var(--f2-ring);-webkit-background-clip:text;background-clip:text;color:transparent} #sn-x .act.shift:hover{color:var(--f2-indigo)} #sn-x .act.shift::after{content:"Shift This — 1 credit → author";position:absolute;left:0;bottom:calc(100% + 7px); white-space:nowrap;background:var(--f2-text);color:var(--f2-panel);padding:7px 11px;border-radius:7px; font:600 11.5px/1 Inter;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5} #sn-x .act.shift:hover::after{opacity:1} #sn-x .act.save{margin-left:auto} /* buttons — ONE primary per view */ #sn-x .btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;padding:9px 18px; font:600 13px/1 Inter;cursor:pointer;text-decoration:none;border:none} #sn-x .btn.go{background:#615dfa;color:#fff} #sn-x .btn.go:hover{background:#5551e8} #sn-x .btn.gh{background:none;border:1px solid var(--f2-line2);color:var(--f2-muted)} #sn-x .btn.gh:hover{background:var(--f2-hover);color:var(--f2-text)} #sn-x .btn.sm{padding:6px 13px;font-size:12px;border-radius:7px} /* progress bars */ #sn-x .bar{height:7px;border-radius:99px;background:var(--f2-panel2);overflow:hidden} #sn-x .bar b{display:block;height:100%;border-radius:99px;background:var(--f2-ring)} #sn-x .bar.thin{height:5px} /* eyebrow + story bits */ #sn-x .eyebrow{font:700 11px/1 Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--f2-cyan)} #sn-x .g-art{background:linear-gradient(140deg,#615dfa 0%,#41efff 120%);border-radius:9px;position:relative;overflow:hidden} #sn-x .g-art i{position:absolute;right:12px;bottom:10px;font-size:26px;color:rgba(255,255,255,.85)} #sn-x .g-art.mono{background:var(--f2-panel2);border:1px solid var(--f2-line)} #sn-x .g-art.mono i{color:var(--f2-faint)} /* misc rows */ #sn-x .row{display:flex;align-items:center;gap:12px} #sn-x .kv{font:500 12px/1 Inter;color:var(--f2-faint);font-variant-numeric:tabular-nums} #sn-x .kv b{color:var(--f2-text);font-weight:700} #sn-x .divide{display:flex;align-items:center;gap:14px;margin:26px 0 8px;color:var(--f2-faint); font:600 12px/1 Inter;letter-spacing:.1em;text-transform:uppercase} #sn-x .divide::before,#sn-x .divide::after{content:"";flex:1;height:1px;background:var(--f2-line)} #sn-x .wall{display:flex;align-items:center} #sn-x .wall .av{width:30px;height:30px;font-size:11px;border:2px solid var(--f2-panel);margin-right:-8px} #sn-x .wall span{margin-left:16px;font:500 12.5px/1 Inter;color:var(--f2-faint)} #sn-x .skill{display:inline-block;padding:5px 11px;border:1px solid var(--f2-line);border-radius:7px; background:var(--f2-panel2);font:500 12px/1 Inter;color:var(--f2-muted);margin:0 5px 6px 0} #sn-x .badge-tr{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--f2-line); border-radius:6px;font:600 11px/1 Inter;color:var(--f2-muted)} #sn-x .badge-tr i{font-size:11px;color:var(--f2-green)} /* tighter page frame — less empty side space (Hans round-2) */ main#content-slot{padding:20px 22px 90px !important} #sn-x{max-width:1380px !important} /* Shift This — spelled out, always */ #sn-x .act.shift .lb{font:600 12.5px/1 Inter;letter-spacing:.01em} #sn-x .act.shift{padding:7px 12px} /* ── AD SLOTS · fed by the MC Advertising module ── */ #sn-x .ad{position:relative;background:var(--f2-panel);border:1px solid var(--f2-line);border-radius:10px} #sn-x .ad .ad-tag{position:absolute;top:10px;right:12px;font:700 9px/1 Inter;letter-spacing:.14em; color:var(--f2-faint);text-transform:uppercase} #sn-x .ad-rail .ad-b{padding:16px} #sn-x .ad-rail .ad-art{height:110px;border-radius:8px;background:var(--f2-panel2); border:1px solid var(--f2-line);display:flex;align-items:center;justify-content:center; font-size:22px;color:var(--f2-faint);margin-bottom:11px} #sn-x .ad-rail b{display:block;font:700 13.5px/1.35 Inter} #sn-x .ad-rail p{margin:5px 0 11px;font:400 12px/1.55 Inter;color:var(--f2-muted)} #sn-x .ad-rail .ad-cta{display:inline-flex;padding:7px 14px;border:1px solid var(--f2-line2); border-radius:7px;font:600 12px/1 Inter;color:var(--f2-indigo);text-decoration:none} #sn-x .ad-rail .ad-cta:hover{background:var(--f2-hover)} #sn-x .ad-rail .ad-by{display:block;margin-top:10px;font:400 10.5px/1.4 Inter;color:var(--f2-faint)} /* in-feed sponsored post (admin-injected from MC) */ #sn-x .ad-feed{padding:16px 18px 12px} #sn-x .ad-feed .sp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} #sn-x .ad-feed .sp-logo{flex:none;width:36px;height:36px;border-radius:8px;background:var(--f2-panel2); border:1px solid var(--f2-line);display:flex;align-items:center;justify-content:center; font-size:14px;color:var(--f2-muted)} #sn-x .ad-feed .sp-head b{font:600 13.5px/1.25 Inter;display:block} #sn-x .ad-feed .sp-head span{font:400 11px/1.3 Inter;color:var(--f2-faint)} #sn-x .ad-feed p{margin:0 0 12px;font:400 14px/1.6 Inter} #sn-x .ad-feed .sp-cta{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 14px;background:var(--f2-panel2);border:1px solid var(--f2-line);border-radius:9px} #sn-x .ad-feed .sp-cta b{font:600 13px/1.35 Inter;display:block} #sn-x .ad-feed .sp-cta span{font:400 11.5px/1.35 Inter;color:var(--f2-faint)} /* sponsored reply (admin-injected between replies) */ #sn-x .ad-reply{display:flex;gap:11px;padding:12px 16px;background:var(--f2-panel2); border-top:1px solid var(--f2-line);border-bottom:1px solid var(--f2-line)} #sn-x .ad-reply .sp-logo{flex:none;width:30px;height:30px;border-radius:7px;background:var(--f2-panel); border:1px solid var(--f2-line);display:flex;align-items:center;justify-content:center; font-size:12px;color:var(--f2-muted)} #sn-x .ad-reply .bd{min-width:0;flex:1} #sn-x .ad-reply b{font:600 12.5px/1.4 Inter} #sn-x .ad-reply p{margin:2px 0 0;font:400 12.5px/1.5 Inter;color:var(--f2-muted)} #sn-x .ad-reply .ad-tag{position:static;margin-left:auto;align-self:flex-start} /* newspaper voice (Stories surfaces) */ #sn-x .serif{font-family:"Playfair Display",Georgia,serif} #sn-x .rule-d{border-top:3px double var(--f2-line2)} #sn-x .rule-s{border-top:1px solid var(--f2-line)} /* ── NET-EXAMPLE-TAG-0915 · ruling 503 — the "Example" tag ───────────────────────────── A small tag on the nine seeded example profiles' cards and on posts they wrote, so the first real member can tell an example from a member. Who is an example is unchanged: fs_member_profiles.account_provenance = 'seed_persona', read through fs_ex_is() (NET-SEED-EXAMPLES, ruling 448). Emitted by private_html/fsn_example_tag.php. DELIBERATELY UNSCOPED — not #sn-x. It renders inside the member drawer, the profile hero and XHR fragments, none of which is under #sn-x; a token that resolved only there would fall back to a light colour on a dark panel, which is the very defect this ruling names. The values ARE the shell's own tokens, written out: --f2-muted / --f2-line light, --f2-muted dark (#8b93ad) lifted to #9aa3bd for headroom / --f2-line2 dark. Contrast MEASURED FROM THE RENDERED COLOUR on the guarded rig — 232 measurements, every tag on /feed (seat and visitor), /members and an example's profile, at 1280 and 400 in both schemes: light 5.50–5.59:1, dark 6.70–7.39:1, every one over the 4.5:1 floor. No `opacity` and no `currentColor`: the pre-503 chip used both and therefore rendered at 13.07–17.75:1 — as loud as the member's own name — while the same markup beside a muted line composites to 4.03:1. Inter only; no new font, no new asset. */ .fs-ex-tag{display:inline-block;vertical-align:middle;margin:0 0 0 6px;padding:1px 6px; border:1px solid #e3e7f2;border-radius:999px;background:transparent;color:#5f6783; font:600 10px/1.6 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.04em; text-transform:uppercase;white-space:nowrap;text-decoration:none} .fs-dark .fs-ex-tag{border-color:#2e3452;color:#9aa3bd} @media (max-width:480px){.fs-ex-tag{font-size:9.5px;padding:1px 5px;margin-left:5px}} /* The search palette (assets/fs/css/fsn-search.css) styles `.fs-us-row .tx span` — a more specific selector than `.fs-ex-tag` — as a full-width block line, so without this the tag painted as a full-width pill on its own row (measured at 400 and 1280, both schemes). Scoped back to a pill here; the palette's own rows are otherwise untouched. Contrast in the palette: light 5.59:1 on the panel and 5.15:1 on a hovered row, dark 6.56:1 and 5.67:1. It leads the sub line, so a long headline is what ellipses, never the tag. */ .fs-us-row .tx span.fs-ex-tag{display:inline-block;width:auto;vertical-align:baseline; margin:0 7px 0 0;padding:1px 6px;font:600 9.5px/1.5 Inter,-apple-system,"Segoe UI",sans-serif; letter-spacing:.04em;text-transform:uppercase;color:#5f6783;white-space:nowrap; overflow:visible;text-overflow:clip} .fs-dark .fs-us-row .tx span.fs-ex-tag{color:#9aa3bd;border-color:#2e3452} /* EXAMPLE-TAGS-0926 BEGIN ex-tag-sites — ruling 503 on the surfaces NET-EXAMPLE-TAG-0915 left untagged (measured 26 Sep as harness seat 2: /boards 28 names / 0 tags, /projects 26/0, /campaigns 27/0, /clusters 18/0, /fundraising 13/0, /podcasts 26/1, /hire 39/5, the feed's podcast-episode cards and quote embeds, post.php's right-rail member rows; the shell's pre-hydration chat rail — six seed_persona names on EVERY page — is HIDDEN, not tagged: founder ruling 26 Sep). The chip `.fs-ex-tag` above is unchanged. These rules only (a) undo a container's own descendant-span styling where the tag sits inside one — the 0915 palette trap, on five more surfaces — (b) put the margin on the leading side where the tag leads a meta line, and (c) give the tag its dark colours on the three heroes that are dark in BOTH schemes. Every ratio below is re-measured from the rendered colour in evidence/plates/. */ /* (the shell's fallback chat rail carries NO chip: founder ruling 26 Sep "Hide them" — its example rows are excluded with fs_ex_sql(), like the hydrated rail) */ /* the feed's podcast-episode post cards: `#sn-x .pod .t span{font:400 12.5px…;color:faint}` (1,3,1) */ #sn-x .pod .t span.fs-ex-tag{font:600 10px/1.6 Inter,-apple-system,"Segoe UI",sans-serif;color:#5f6783;letter-spacing:.04em;text-transform:uppercase} .fs-dark #sn-x .pod .t span.fs-ex-tag{color:#9aa3bd} /* /podcasts show cards: `#sp-shows .show span{overflow:hidden;text-overflow:ellipsis}` — the tag LEADS the host line, so a long host name is what ellipses, never the tag */ #sp-shows .show span.fs-ex-tag{overflow:visible;text-overflow:clip;margin:0 6px 0 0;font:600 10px/1.6 Inter,-apple-system,"Segoe UI",sans-serif;color:#5f6783;letter-spacing:.04em;text-transform:uppercase} .fs-dark #sp-shows .show span.fs-ex-tag{color:#9aa3bd} /* /podcasts episode rows: `#sp-eps .t span{font:400 11.5px/1.5 Inter;color:faint}` (1,2,1) — measured 11.5px on the first sweep; restated at (1,2,2) */ #sp-eps .t span.fs-ex-tag{font:600 10px/1.6 Inter,-apple-system,"Segoe UI",sans-serif;color:#5f6783;letter-spacing:.04em;text-transform:uppercase} .fs-dark #sp-eps .t span.fs-ex-tag{color:#9aa3bd} /* /campaigns cards: `#camps .cc-owner-t span{display:flex;font:500 11px…;color:faint}` (1,2,1) */ #camps .cc-owner-t span.fs-ex-tag{display:inline-block;margin:2px 0 0;font:600 10px/1.6 Inter,-apple-system,"Segoe UI",sans-serif;color:#5f6783;letter-spacing:.04em;text-transform:uppercase} .fs-dark #camps .cc-owner-t span.fs-ex-tag{color:#9aa3bd} /* a campaign page's hero host line (fsn_campaign_view.php): `#hero .host span{display:block;…; color:#8b93ad}` (1,2,1) in the page's own