/* ───────────────────────────────────────────────────────────────────── tfe-demo.css — Texas Find 'Em components, lifted for /texas-find-em. EVERYTHING derived from texasfindem.com lives in this file and in tfe-demo.js. Neither is loaded by any other page on this site, and nothing here touches a Lankford Labs class or token. That separation is the point: the case study shows the real product's own CSS, and the site it sits on does not inherit a line of it. Two rules if you edit this: 1. Tokens are scoped to `.tfe`, NOT to `:root`. On texasfindem.com they are root-level, because there the whole page is the app. Here the app is a panel inside a paper-coloured page, and a root token would repaint the case study. 2. Class names are kept EXACTLY as they are on texasfindem.com (.feat, .stop, .pill, .seg, .cbx) but every one is namespaced under `.tfe`. Renaming them would make this file useless as a reference; leaving them unscoped would collide with the host page. ───────────────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Bungee&family=Overpass:wght@400;600;700;900&family=Overpass+Mono:wght@400;700&display=swap"); /* ── The eight schemes, verbatim from index.html:216–290 ───────────── They are Texas college rally cries. All eight are dark; the site has no light mode, which is itself a decision — it is used in a truck. */ .tfe[data-theme="lonestar"]{ --bg:#001233; --sunk:#001A47; --panel:#00265C; --land:#003074; --key:#F2F4F8; --key-rgb:242,244,248; --accent:#D9383C; --accent-ink:#FFFFFF; --accent-text:#E36A6D; } .tfe[data-theme="hookem"]{ --bg:#14100C; --sunk:#1D160F; --panel:#2B2018; --land:#3A2A1C; --key:#F5F0E8; --key-rgb:245,240,232; --accent:#E87500; --accent-ink:#14100C; --accent-text:#E87500; } .tfe[data-theme="gigem"]{ --bg:#1E0000; --sunk:#2B0505; --panel:#500000; --land:#661414; --key:#F3EAE4; --key-rgb:243,234,228; --accent:#F3EAE4; --accent-ink:#500000; --accent-text:#F3EAE4; } .tfe[data-theme="sicem"]{ --bg:#06231A; --sunk:#0A3126; --panel:#154734; --land:#1C5A42; --key:#F0F4F0; --key-rgb:240,244,240; --accent:#FFB81C; --accent-ink:#06231A; --accent-text:#FFB81C; } .tfe[data-theme="wreckem"]{ --bg:#0D0D0D; --sunk:#171717; --panel:#242424; --land:#343434; --key:#F0F0F0; --key-rgb:240,240,240; --accent:#E6202A; --accent-ink:#FFFFFF; --accent-text:#ED5A61; } .tfe[data-theme="whosehouse"]{ --bg:#2A0510; --sunk:#3B0A18; --panel:#7C0A22; --land:#94152E; --key:#F7F2EC; --key-rgb:247,242,236; --accent:#D9D3C6; --accent-ink:#7C0A22; --accent-text:#D9D3C6; } .tfe[data-theme="riffram"]{ --bg:#180628; --sunk:#230C38; --panel:#4D1979; --land:#5E2490; --key:#F4EFFA; --key-rgb:244,239,250; --accent:#C9A9E8; --accent-ink:#23093B; --accent-text:#C9A9E8; } .tfe[data-theme="ponyup"]{ --bg:#0B1430; --sunk:#121F45; --panel:#2A3D8F; --land:#3549A3; --key:#F2F5FC; --key-rgb:242,245,252; --accent:#D2262F; --accent-ink:#FFFFFF; --accent-text:#EB9DA1; } .tfe{ --dim:rgba(var(--key-rgb),.63); --faint:rgba(var(--key-rgb),.55); --hair:rgba(var(--key-rgb),.40); background: var(--bg); color: var(--key); font: 400 15px/1.5 'Overpass', system-ui, sans-serif; border-radius: 14px; padding: 20px 20px 22px; margin: 2rem 0 0; overflow: hidden; box-shadow: 0 1px 2px rgba(22,24,29,.09), 0 14px 40px rgba(22,24,29,.16); } .tfe *, .tfe *::before, .tfe *::after { box-sizing: border-box; } .tfe p { color: var(--dim); max-width: none; margin: 0; } .tfe button { font-family: 'Overpass', system-ui, sans-serif; } .tfe :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ── Frame chrome: the caption strip and the scheme picker ───────── */ .tfe-bar{ display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--hair); } .tfe-tag{ font-family:'Overpass Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); } .tfe-themes{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; } .tfe-sw{ width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0; border:2px solid rgba(var(--key-rgb),.25); position:relative; transition:transform .14s, border-color .14s; } .tfe-sw:hover{ transform:scale(1.14); } .tfe-sw[aria-pressed="true"]{ border-color:var(--key); transform:scale(1.14); } .tfe-note{ font-size:12.5px; color:var(--faint); margin-top:14px !important; padding-top:12px; border-top:1px solid var(--hair); } .tfe-note a{ color:var(--key); text-decoration-color:var(--hair); } /* ── The wordmark, verbatim (index.html:334–375) ─────────────────── */ .tfe .wordmark{ font-family:'Bungee',sans-serif; font-size:clamp(26px,4.4vw,40px); line-height:.92; letter-spacing:.005em; margin:0; text-shadow:0 2px 0 rgba(0,0,0,.35); } .tfe .wordmark em{ font-style:normal; color:var(--accent); } .tfe .tagline{ margin:9px 0 0 !important; font-weight:600; font-size:12px; letter-spacing:.11em; line-height:1.45; text-transform:uppercase; color:var(--dim); } .tfe .beta{ display:inline-block; margin-left:10px; vertical-align:2px; font-family:'Overpass Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); border-radius:4px; padding:3px 8px; } /* The mark is set INSIDE the name, between "Texas" and "Find 'Em" — punctuation, not a badge beside it. .7357em is Bungee's cap height; 116/74 is the mark's aspect once the box is cropped to its own ink. */ .tfe .imk{ --cap:calc(1em * .7357); --imk-scale:1.2; --imk-gap:.0603em; display:inline-block; position:relative; vertical-align:baseline; margin:0 var(--imk-gap); height:var(--cap); width:calc(var(--cap) * var(--imk-scale) * 116 / 74); } .tfe .imk svg{ position:absolute; left:0; display:block; width:auto; height:calc(var(--cap) * var(--imk-scale)); bottom:calc((var(--cap) * var(--imk-scale) - var(--cap)) / -2); } .tfe .wm-space{ font-size:0; } /* ── Labels, chips, segmented controls ───────────────────────────── */ .tfe .lbl,.tfe .grouplbl,.tfe .seglbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--faint); } .tfe .fgroup{ margin-top:16px; } .tfe .fgroup .grouplbl{ margin-bottom:9px; } .tfe .feats{ display:flex; gap:7px; flex-wrap:wrap; } .tfe .feat{ cursor:pointer; background:transparent; border:2px solid var(--hair); color:var(--dim); border-radius:6px; padding:6px 11px; font-size:13px; font-weight:600; letter-spacing:.02em; transition:all .15s; } .tfe .feat:hover{ border-color:var(--faint); color:var(--key); } .tfe .feat[aria-pressed=true]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; } .tfe .feat .n{ font-family:'Overpass Mono',monospace; font-size:11px; opacity:.55; margin-left:5px; } .tfe .feat.is-none{ opacity:.35; } .tfe .chainpick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } .tfe .cbx{ cursor:pointer; display:flex; align-items:center; gap:9px; text-align:left; background:var(--sunk); border:2px solid var(--hair); border-radius:9px; padding:10px 12px; color:var(--dim); transition:border-color .15s,color .15s,background-color .15s; } .tfe .cbx:hover{ border-color:var(--faint); color:var(--key); } .tfe .cbx[aria-pressed=true]{ border-color:var(--accent); color:var(--key); background:rgba(var(--key-rgb),.06); } .tfe .cbx-dot{ flex:0 0 auto; width:13px; height:13px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(0,0,0,.45); } .tfe .cbx-name{ flex:1 1 auto; font-size:14px; font-weight:700; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tfe .cbx-n{ flex:0 0 auto; font-family:'Overpass Mono',monospace; font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.02em; } .tfe .cbx[aria-pressed=true] .cbx-n{ color:var(--accent-text); } .tfe .seg{ display:flex; border:2px solid var(--hair); border-radius:8px; overflow:hidden; flex:0 0 auto; } .tfe .seg button{ cursor:pointer; background:transparent; border:none; color:var(--dim); padding:7px 14px; font-size:12px; font-weight:700; letter-spacing:.06em; border-right:1px solid var(--hair); transition:background .15s,color .15s; flex:1 1 0; text-align:center; white-space:nowrap; } /* Keep the last divider transparent rather than removing it — dropping the border costs a pixel and re-skews the row. */ .tfe .seg button:last-child{ border-right-color:transparent; } .tfe .seg button:hover{ color:var(--key); } .tfe .seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); } .tfe .findem{ font-family:'Bungee',sans-serif; cursor:pointer; background:var(--accent); color:var(--accent-ink); border:2px solid var(--accent); border-radius:8px; padding:11px 20px; font-size:14px; letter-spacing:.02em; line-height:1; display:inline-flex; align-items:center; gap:10px; transition:filter .15s; } .tfe .findem:hover{ filter:brightness(1.1); } /* ── The result card ─────────────────────────────────────────────── */ .tfe .reshead{ display:flex; align-items:center; gap:10px 14px; padding:0 4px 12px; flex-wrap:wrap; } .tfe .reshead h3{ font-family:'Bungee',sans-serif; font-size:14px; letter-spacing:.02em; margin:0; font-weight:400; text-transform:uppercase; color:var(--key); max-width:none; } .tfe .rescount{ font-family:'Overpass Mono',monospace; font-size:12.5px; color:var(--dim); letter-spacing:.04em; margin-left:auto; } .tfe .list{ display:flex; flex-direction:column; gap:11px; } /* The card is a div wrapping a button, not a button: the actions row underneath carries real links to Apple and Google Maps, and a link inside a button is invalid HTML. */ .tfe .stop{ display:flex; width:100%; background:var(--panel); border-radius:10px; box-shadow:0 0 0 2px var(--bg); overflow:hidden; position:relative; color:var(--key); transition:transform .14s, box-shadow .14s; } .tfe .stop:hover{ transform:translateX(3px); box-shadow:0 0 0 2px var(--bg),-3px 0 0 var(--accent); } .tfe .stop-band{ flex:0 0 8px; } .tfe .stop-col{ flex:1 1 auto; min-width:0; } .tfe .stop-main{ padding:14px 16px 13px; min-width:0; } .tfe .stop-brand{ font-family:'Overpass Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .tfe .stop-name{ font-size:18px; font-weight:700; letter-spacing:-.01em; margin:2px 0 3px; line-height:1.22; } .tfe .stop-where{ font-size:13.5px; color:var(--dim); display:flex; gap:6px; flex-wrap:wrap; align-items:baseline; } .tfe .stop-where .stop-id{ font-family:'Overpass Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--key); } .tfe .sep{ opacity:.38; margin:0 2px; } .tfe .stop-hours{ font-size:13px; margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; align-items:baseline; } .tfe .stop-hours.open{ color:var(--key); } .tfe .stop-hours.shut{ color:var(--dim); } .tfe .stop-hours.none{ color:var(--dim); font-style:italic; } .tfe .stop-hours .hours-note{ color:var(--dim); font-size:12px; } .tfe .stop-feats{ display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; } .tfe .stop-feats:empty{ display:none; } /* Borderless on purpose: an outline at this size is a button, and this is not one. */ .tfe .pill{ font-size:11.5px; font-weight:600; letter-spacing:.02em; border:none; background:rgba(var(--key-rgb),.085); border-radius:4px; padding:4px 9px; color:var(--dim); white-space:nowrap; } .tfe .pill.on{ background:var(--accent); color:var(--accent-ink); font-weight:700; } .tfe .stop-dist{ flex:0 0 auto; align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 15px; border-left:1px solid var(--hair); font-family:'Overpass Mono',monospace; min-width:88px; } .tfe .stop-dist b{ font-size:20px; font-weight:700; line-height:1; } .tfe .stop-dist span{ font-size:9.5px; letter-spacing:.16em; color:var(--faint); margin-top:4px; } /* Solid, where .soon-tag is dashed — a record is a fact a chain published and "coming soon" is a promise. */ .tfe .wr-tag{ display:inline-block; vertical-align:2px; font-family:'Overpass Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:999px; border:1px solid var(--accent); color:var(--accent-text); background:transparent; white-space:nowrap; } .tfe .wr-detail{ font-size:11.5px; color:var(--faint); } .tfe .soon-tag{ display:inline-block; vertical-align:2px; font-family:'Overpass Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:999px; border:1px dashed var(--key); color:var(--key); background:transparent; white-space:nowrap; } .tfe .empty{ border:2px dashed var(--hair); border-radius:10px; padding:30px 24px; text-align:center; color:var(--dim); } .tfe .empty b{ display:block; font-family:'Bungee',sans-serif; font-weight:400; font-size:16px; color:var(--key); margin-bottom:7px; } .tfe .featnote{ font-size:13.5px; color:var(--dim); margin:14px 0 0 !important; line-height:1.5; } .tfe .featnote b{ color:var(--key); } /* ── The map figure ──────────────────────────────────────────────── */ .tfe-map{ display:block; width:100%; height:auto; } .tfe-map .tfe-m-land{ fill:var(--land); stroke:var(--hair); stroke-width:2; } .tfe-map g{ transition:opacity .25s ease; } .tfe-map g circle{ opacity:.9; } .tfe-map.is-focus g{ opacity:.11; } .tfe-map.is-focus g.is-on{ opacity:1; } .tfe-legend{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; } .tfe-legend .cbx{ flex:1 1 150px; } @media (max-width: 620px){ .tfe{ padding:16px 14px 18px; } .tfe .chainpick{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tfe .stop-dist{ min-width:70px; padding:0 10px; } } @media (prefers-reduced-motion: reduce){ .tfe *{ transition:none !important; animation:none !important; } } /* ═══════════════════════════════════════════════════════════════════ STATIC SPECIMENS — Roadtrip Mode and Yer Stuff. These two are pictures, not working widgets: the real behavior needs the route table, the hours engine and the storage layer, and none of that belongs on a case study. Every class name, color, size and string below is taken from the live component so the picture is accurate rather than approximate. Nothing here is clickable, and nothing pretends to be — no hover lift, no pressed states. ═══════════════════════════════════════════════════════════════════ */ .tfe-spec { pointer-events: none; } .tfe-spec .stop:hover { transform: none; box-shadow: 0 0 0 2px var(--bg); } /* ── The trip tray ──────────────────────────────────────────────── Accent border says "live", the note says "not saved yet", and the only way into Yer Stuff is the button that says so. */ .tfe .tray{ background:var(--sunk); border:2px solid var(--accent); border-radius:10px; padding:12px 14px; margin:0 0 14px; } .tfe .tray-top{ display:flex; align-items:center; gap:9px 12px; flex-wrap:wrap; } .tfe .tray-lbl{ font-family:'Overpass Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); flex:0 0 auto; } .tfe .tray-name{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; } .tfe .tray-n{ font-family:'Overpass Mono',monospace; font-size:11.5px; color:var(--faint); letter-spacing:.06em; font-weight:700; } .tfe .tray-spacer{ flex:1 1 auto; min-width:0; } /* Save and Clear are one decision offered two ways, so they wrap as a pair. */ .tfe .tray-btns{ display:inline-flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; } .tfe .tray-note{ font-size:12.5px; color:var(--dim); line-height:1.55; margin:10px 0 0 !important; } /* ── Action buttons ─────────────────────────────────────────────── */ .tfe .act{ cursor:default; background:transparent; border:2px solid var(--hair); color:var(--key); border-radius:6px; padding:8px 13px; min-height:34px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; } /* Marked reads the same here as a ticked amenity does, on purpose — the page should have only one way of saying "this one is on". */ .tfe .act[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } /* Save, and only Save: the one control that does the thing its tray exists for gets the filled treatment, so it isn't hunted for. */ .tfe .act.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .tfe .act .gl{ font-size:13px; line-height:1; letter-spacing:0; } .tfe .act-bm{ padding:8px 11px; } /* Filled with the button's own color: key on a transparent button, and the accent's ink once pressed. One drawing, both states. */ .tfe .act-bm .bm{ width:13px; height:13px; display:block; fill:currentColor; } .tfe .stop-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 16px; padding:12px 0 14px; border-top:1px solid var(--hair); } /* ── The distance column, roadtrip variant ──────────────────────── */ .tfe .stop-dist.trip b{ font-size:17px; } .tfe .stop-dist .off{ font-size:9.5px; letter-spacing:.04em; color:var(--faint); margin-top:5px; padding-top:5px; border-top:1px solid var(--hair); width:100%; text-align:center; } /* ── Yer Stuff: tabs, itinerary card, the numbered spine ────────── */ /* The tab bar is not a new control — .seg is already how this page says "pick exactly one of these". What is new is that it switches a panel, which is why the live one carries real tab semantics. */ .tfe .stuff-tabs{ margin:0 0 20px; } .tfe .stuff-tabs button{ display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 11px; } .tfe .stuff-tabs .n{ font-family:'Overpass Mono',monospace; font-size:11px; font-weight:700; opacity:.8; } /* .seg paints its pressed state off aria-pressed; a tab uses aria-selected, so the same fill is spelled twice rather than the tab pretending to be pressed. */ .tfe .stuff-tabs button[aria-selected="true"]{ background:var(--accent); color:var(--accent-ink); } .tfe .stuff-trip{ background:var(--sunk); border:1px solid var(--hair); border-radius:9px; padding:13px 14px; } .tfe .stuff-sum{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; } .tfe .stuff-sum .nm{ font-size:15.5px; font-weight:700; } .tfe .stuff-sum .n, .tfe .stuff-sum .day{ font-family:'Overpass Mono',monospace; font-size:11.5px; color:var(--faint); letter-spacing:.06em; font-weight:700; white-space:nowrap; } .tfe .stuff-sum .grow{ flex:1 1 auto; } .tfe .stuff-trip-body{ margin-top:14px; } .tfe .stuff-master{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 9px; } .tfe .stuff-note{ font-size:12px; color:var(--faint); line-height:1.55; margin:0 0 15px !important; } /* A and B are where the drive starts and finishes, not places to shop, so they sit outside the numbered list and are drawn as ends. The end disc is 15px and a stop disc is 24px: ends are not stops. */ .tfe .trip-end-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; } .tfe .ab{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:'Overpass Mono',monospace; font-size:9.5px; font-weight:700; flex:0 0 auto; } .tfe .trip-end-row .nm{ font-size:13.5px; font-weight:700; } .tfe .trip-end-row .wh{ font-size:12px; color:var(--faint); } .tfe .trip-when{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:12px 0 4px; font-size:13px; color:var(--dim); } .tfe .trip-when span.fld{ font-size:13px; min-height:38px; padding:0 9px; display:inline-flex; align-items:center; gap:8px; color:var(--key); border:1px solid rgba(var(--key-rgb),.28); border-radius:4px; font-variant-numeric:tabular-nums; } .tfe .trip-when span.fld svg{ width:13px; height:13px; opacity:.6; fill:none; stroke:currentColor; stroke-width:2; } /* OSRM's own number for the whole route, stated beside the controls so the per-stop arithmetic isn't a black box. */ .tfe .trip-when .when-leg{ flex:1 0 100%; font-size:12px; opacity:.75; font-family:'Overpass Mono',monospace; letter-spacing:.02em; } /* The stops are drawn as a path: a numbered disc each, joined by a dotted line that stops at the last one. The disc takes --accent filled and --accent-ink numbered, out of the theme rather than typed — a disc filled --key is one color on itself in the three schemes whose accent IS their key color. */ .tfe .trip-spine ol{ list-style:none; counter-reset:tripstop; margin:0; padding:2px 0; display:flex; flex-direction:column; gap:14px; } .tfe .trip-spine li{ position:relative; counter-increment:tripstop; padding-left:36px; } .tfe .trip-spine li::before{ content:counter(tripstop); position:absolute; left:0; top:-1px; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:'Overpass Mono',monospace; font-size:11.5px; font-weight:700; display:grid; place-items:center; z-index:1; } .tfe .trip-spine li::after{ content:""; position:absolute; left:11px; top:24px; bottom:-17px; border-left:2px dotted var(--faint); } .tfe .trip-spine li:last-child::after{ content:none; } .tfe .trip-spine .nm{ font-size:13.5px; font-weight:700; line-height:1.25; } .tfe .trip-spine .wh{ font-size:12.5px; color:var(--dim); margin-top:2px; line-height:1.4; } .tfe .trip-spine .lk{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .tfe .stuff-feats{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; } /* One line per stop, three states, sitting where the amenity pills start so the eye finds it in the same place every row. */ .tfe .trip-open{ font-size:13px; margin:4px 0 0; } .tfe .trip-open.open{ color:var(--key); } .tfe .trip-open.shut{ color:var(--dim); } .tfe .trip-open.none{ color:var(--dim); font-style:italic; } /* ── Consensus specimen cards ───────────────────────────────────── */ .tfe .say{ background:var(--sunk); border:1px solid var(--hair); border-radius:9px; padding:14px 15px; } .tfe .say + .say{ margin-top:10px; } .tfe .say-q{ font-size:14.5px; font-weight:700; margin:0 0 7px !important; color:var(--key); } .tfe .say-a{ font-size:13.5px; margin:0 !important; color:var(--dim); line-height:1.5; } .tfe .say-a b{ color:var(--key); font-weight:700; } .tfe .say-c{ display:inline-block; margin-top:10px; font-family:'Overpass Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:4px; padding:3px 7px; } .tfe .say-c.strong{ background:var(--accent); color:var(--accent-ink); } .tfe .say-c.common{ background:transparent; color:var(--faint); border:1px solid var(--hair); } /* ── The map, at figure scale ───────────────────────────────────── */ .tfe-mapbox{ background:var(--sunk); border:1px solid var(--hair); border-radius:10px; padding:12px; } /* ═══════════════════════════════════════════════════════════════════ HOST COMPONENTS INSIDE THE DARK PANEL. The case study's own .pull, .stat and .ch-* components are set in Lankford Labs ink on Lankford Labs paper. Dropped inside .tfe they kept that ink and painted it on a #001233 panel, which rendered the pull quotes and every source line as near-black on near-black — invisible, and only caught by looking at it. That is precisely the failure the case study describes the audits catching: text measured against the color ACTUALLY painted behind it, not the color the stylesheet assumed. So these rules restate the same components in the panel's own tokens. They are scoped under .tfe and change nothing on the host page. ═══════════════════════════════════════════════════════════════════ */ .tfe .pull{ border-left-color: var(--accent); } .tfe .pull p{ color: var(--key); } .tfe .pull .src, .tfe .pull .src a{ color: var(--dim); } .tfe .stat{ border-top-color: var(--key); } .tfe .stat .v{ color: var(--key); } .tfe .stat p{ color: var(--dim); } .tfe .stat .src, .tfe .stat .src a{ color: var(--dim); } .tfe .ch-what{ color: var(--key); } .tfe .ch-why{ border-left-color: var(--hair); color: var(--dim); } .tfe .ch-why span{ color: var(--faint); } .tfe .say-q, .tfe .featnote b, .tfe .tray-note b{ color: var(--key); } /* The host page styles bare elements — `li`, `p strong`, `td` — in Lankford Labs ink. An element selector beats inheritance, so those won inside the panel and painted dark text on a dark ground in the two specimens. Restate them in the panel's tokens; scoped to .tfe, so the host page is untouched. */ .tfe li, .tfe td, .tfe th{ color: var(--key); max-width: none; } .tfe p strong, .tfe strong, .tfe b{ color: var(--key); } .tfe .stop-dist span, .tfe .stop-dist .off{ color: var(--faint); } .tfe .tfe-note strong{ color: var(--key); } /* The two static specimens use where the live component uses