/* ============================================================ The Living Arkham — app styles Rincón Miskatonic · rinconmiskatonic.org Full-height app shell · six themes · WCAG 2.1 AA ============================================================ */ /* ---------- game fonts, only for the rendered Ultimatum/Boon cards ---------- Subset to Latin + typographic punctuation and served as woff2; a browser loads them only when a card that uses them is on screen, so no other page pays for it. 'ubtitle' is the blackletter card title; 'ubbody' is Arno Pro, the game's body face, declared across weight/style so / in a rule pick the right cut. */ @font-face{font-family:'ubtitle';src:url(../assets/fonts/ub/ub-title.woff2) format('woff2');font-display:swap} @font-face{font-family:'ubbody';src:url(../assets/fonts/ub/ub-body.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'ubbody';src:url(../assets/fonts/ub/ub-body-i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'ubbody';src:url(../assets/fonts/ub/ub-body-b.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'ubbody';src:url(../assets/fonts/ub/ub-body-bi.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap} /* The site's heading face (--ff-head). Same blackletter master as 'ubtitle' (Teutonic) but shipped WHOLE — only ~221 glyphs, so the full face is tiny (~30 KB) — and self-hosted here so EVERY visitor sees the headings in Teutonic, not only those who happen to have it installed (it looked right locally purely because the font was on the machine). Latin only: --ff-head falls the rest — Cyrillic, CJK, the Polish extras it lacks — through to a serif, which is correct, there is no blackletter for those scripts. Regenerate with tools/ub_fonts.py. */ @font-face{font-family:'teutonic';src:url(../assets/fonts/teutonic.woff2) format('woff2');font-display:swap} /* The site's body face (--ff-body): Arno Pro, the game's own book serif — the same master the cards use, self-hosted here in four styles (cut by tools/ub_fonts.py) so the running text reads in Arno for EVERY visitor, not in whatever serif they happen to have (it was Georgia, absent on stock Android/Linux, so the body silently changed face there). Latin + Cyrillic are in the cut; CJK (ko/zh) has no Arno glyph and falls through --ff-body's stack to a system serif. */ @font-face{font-family:'arno';src:url(../assets/fonts/arno.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'arno';src:url(../assets/fonts/arno-b.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'arno';src:url(../assets/fonts/arno-i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'arno';src:url(../assets/fonts/arno-bi.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap} /* The Drowned City's alien alphabet. The characters underneath are ordinary letters — the face is what makes them alien — so the text stays real text: selectable, searchable, and read out correctly by a screen reader. `swap` matters more than usual here: until it loads the reader sees the Latin letters, which is the honest fallback rather than a row of tofu. */ @font-face{font-family:'alienglyphs';src:url(../assets/fonts/alien-glyphs.woff2) format('woff2');font-display:swap} /* ---------- page reset ---------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;height:100%} body{background:var(--page,#1a1f26);font-family:Georgia,'Iowan Old Style',serif} /* body paints --page, which shows only if the shell (#tla-root) is ever shorter than the viewport — a transient during a mobile URL-bar move. The palette blocks below set --page on #tla-root, but body is an ANCESTOR of #tla-root and cannot inherit from it, so we mirror each theme's page colour onto here (body then inherits it). Keeps any seam theme-correct instead of a hardcoded dark stripe on the light themes. */ html[data-theme="slate"]{--page:#1a1f26} html[data-theme="moss"]{--page:#121711} html[data-theme="midnight"]{--page:#232936} html[data-theme="plum"]{--page:#0f0a10} html[data-theme="neon"]{--page:#0d0a0c} html[data-theme="parchment"]{--page:#e9e1cf} html[data-theme="fog"]{--page:#e3e8ee} .tla-skip{position:absolute;left:8px;top:-48px;z-index:300;background:var(--gold);color:var(--on-gold); font-family:var(--ff-ui);font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .15s} .tla-skip:focus{top:8px} /* ---------- themes ---------- Every colour the app uses is a token here, and NOTHING outside this block is keyed on a theme's name — a rule like `[data-theme=light] .tla-nav{…}` only ever describes one theme, and there are six. Add a theme by adding a block. Each block is listed twice: once for the page, once as `.tla-pal-`, which is what the picker's swatches wear. So a swatch is *derived from* the theme it offers and cannot drift away from it. House rules, from what makes palettes read as crafted rather than generated: · tinted near-blacks, never #000, and no gradient between accents · accents kept low-chroma — pigment, not backlight · greys never share their hue with the accent (slate greys + indigo accents are the same hue, which is half of why that pairing reads as "AI") */ #tla-root, html[data-theme="slate"] #tla-root, .tla-pal-slate{ /* SLATE — tinted deep slate, tarnished brass, eldritch teal. The house colours. */ --bg:#1a1f26; --bg2:#1f252d; --panel:#252d36; --panel2:#2f3945; --edge:rgba(200,214,222,.09); --edge2:rgba(200,214,222,.15); --ink:#d7dde2; --ink2:#abb5bd; --muted:#8b97a0; --gold:#b89a5f; --gold2:#cbae74; --teal:#6ba295; --green:#6fa86e; --teal2:#8fc2b6; --icon:#c6ad78; --on-gold:#17130a; --mark:rgba(184,154,95,.24); --mark-ink:#d6bd85; --new:#db9385; --new-bg:rgba(206,105,86,.16); --new-edge:rgba(206,105,86,.55); --shadow:0 14px 34px rgba(0,0,0,.42); --figbg:#121820; --bggrad:#222a34; --on-accent:#121820; --page:#1a1f26; --scrim:rgba(8,10,14,.55); --navtint:rgba(0,0,0,.10); --stickyshadow:0 10px 26px -12px rgba(0,0,0,.6); color-scheme:dark; } html[data-theme="moss"] #tla-root, .tla-pal-moss{ /* MOSS — charcoal and lichen. Green at low chroma reads as a substance; the same hue at high chroma reads as a terminal, which is the thing to avoid. */ --bg:#121711; --bg2:#171d16; --panel:#1c231a; --panel2:#262e24; --edge:rgba(197,201,197,.09); --edge2:rgba(197,201,197,.16); --ink:#ccd0cb; --ink2:#a6ada3; --muted:#8d958a; --gold:#8fb28f; --gold2:#abc9ab; --teal:#7fada4; --green:#86b07a; --teal2:#a4cabf; --icon:#a3c1a3; --on-gold:#0d110d; --mark:rgba(143,178,143,.20); --mark-ink:#bcd6bc; --new:#d08a84; --new-bg:rgba(196,116,110,.15); --new-edge:rgba(196,116,110,.5); --shadow:0 14px 34px rgba(0,0,0,.5); --figbg:#0d110c; --bggrad:#1a2118; --on-accent:#0d110c; --page:#121711; --scrim:rgba(7,9,7,.6); --navtint:rgba(0,0,0,.16); --stickyshadow:0 10px 26px -12px rgba(0,0,0,.7); color-scheme:dark; } html[data-theme="midnight"] #tla-root, .tla-pal-midnight{ /* MIDNIGHT — arctic blue-grey. One axis, nothing raising its voice. */ --bg:#232936; --bg2:#2a313f; --panel:#333b4c; --panel2:#3e4759; --edge:rgba(216,222,233,.10); --edge2:rgba(216,222,233,.17); --ink:#e2e7f0; --ink2:#bac3d3; --muted:#9aa5b8; --gold:#9fb6cc; --gold2:#c3d2e2; --teal:#7fb4cc; --green:#7ec185; --teal2:#a7d3e6; --icon:#aec4d8; --on-gold:#12161d; --mark:rgba(159,182,204,.20); --mark-ink:#d3e0ee; --new:#e59aa1; --new-bg:rgba(191,97,106,.18); --new-edge:rgba(191,97,106,.6); --shadow:0 14px 34px rgba(0,0,0,.45); --figbg:#1c212c; --bggrad:#2f3746; --on-accent:#12161d; --page:#232936; --scrim:rgba(9,12,18,.6); --navtint:rgba(0,0,0,.14); --stickyshadow:0 10px 26px -12px rgba(0,0,0,.6); color-scheme:dark; } html[data-theme="plum"] #tla-root, .tla-pal-plum{ /* PLUM — near-black with a plum tint, orchid accents, WARM greys. The purples sit at hue ~325: on the far side of purple from the indigo everything else is made of. Historical purple was red-leaning (Tyrian was nearer crimson); the blue-violet one is a modern dye-and-gamut accident. */ --bg:#0f0a10; --bg2:#150f16; --panel:#1c141d; --panel2:#271e28; --edge:rgba(205,202,198,.10); --edge2:rgba(205,202,198,.17); --ink:#e4e0dd; --ink2:#b3aeaa; --muted:#98928d; --gold:#a572a0; --gold2:#cbabc9; --teal:#a87ba2; --green:#8bb37f; --teal2:#c9a1c2; --icon:#bb93b5; --on-gold:#120a11; --mark:rgba(165,114,160,.22); --mark-ink:#dcbdd8; --new:#cf7f78; --new-bg:rgba(196,116,110,.16); --new-edge:rgba(196,116,110,.52); --shadow:0 14px 34px rgba(0,0,0,.55); --figbg:#0a060b; --bggrad:#1a121c; --on-accent:#0a060b; --page:#0f0a10; --scrim:rgba(5,3,6,.62); --navtint:rgba(0,0,0,.18); --stickyshadow:0 10px 26px -12px rgba(0,0,0,.75); color-scheme:dark; } html[data-theme="neon"] #tla-root, .tla-pal-neon{ /* NEON — black, hot pink and a tan spot. Loud on purpose; the text underneath still has to be legible, so the shouting is done by the accents only. */ --bg:#0d0a0c; --bg2:#141013; --panel:#1c161a; --panel2:#282027; --edge:rgba(242,233,238,.10); --edge2:rgba(242,233,238,.18); --ink:#f2e9ee; --ink2:#c9bcc4; --muted:#a89aa4; --gold:#ff4da3; --gold2:#ff8cc2; --teal:#d9b46a; --green:#5fe08a; --teal2:#efcf90; --icon:#ff6fb0; --on-gold:#16000c; --mark:rgba(255,77,163,.20); --mark-ink:#ffaed5; --new:#ff9a6b; --new-bg:rgba(255,120,70,.15); --new-edge:rgba(255,120,70,.5); --shadow:0 14px 34px rgba(0,0,0,.6); --figbg:#0a0709; --bggrad:#1d1219; --on-accent:#16000c; --page:#0d0a0c; --scrim:rgba(6,3,5,.62); --navtint:rgba(0,0,0,.2); --stickyshadow:0 10px 26px -12px rgba(0,0,0,.75); color-scheme:dark; } html[data-theme="parchment"] #tla-root, .tla-pal-parchment{ /* PARCHMENT — warm paper, oak gall ink. The only light one. */ --bg:#efe8d8; --bg2:#f5efe1; --panel:#f7f2e7; --panel2:#e9e0cd; --edge:rgba(60,44,18,.16); --edge2:rgba(60,44,18,.26); --ink:#241f16; --ink2:#43392a; --muted:#5f5540; --gold:#8a6c1c; --gold2:#6a5310; --teal:#3c7a6f; --green:#3f7a3c; --teal2:#215a50; --icon:#6f5714; --on-gold:#fff8ea; /* the wash under the open chapter: it used to be strong enough to take the gold text on it below 4.5:1, which axe cannot see through a gradient */ --mark:rgba(160,120,20,.18); --mark-ink:#4f3c0a; --new:#a43c28; --new-bg:rgba(164,60,40,.12); --new-edge:rgba(164,60,40,.45); --shadow:0 10px 28px rgba(70,52,20,.18); --figbg:#e5dcc6; --bggrad:#f8f2e6; --on-accent:#fff8ea; --page:#e9e1cf; --scrim:rgba(44,34,14,.34); --navtint:rgba(90,68,20,.05); --stickyshadow:0 12px 28px -14px rgba(70,52,20,.4); color-scheme:light; } html[data-theme="fog"] #tla-root, .tla-pal-fog{ /* FOG — a cool overcast light: haze off a New England coast, slate ink, tarnished brass. The counterweight to Parchment's warm paper, and the light echo of Midnight. */ --bg:#e6eaef; --bg2:#eef1f5; --panel:#f4f6f9; --panel2:#dde3e9; --edge:rgba(28,38,52,.13); --edge2:rgba(28,38,52,.22); --ink:#1c2330; --ink2:#39434f; --muted:#586372; --gold:#6f6a2a; --gold2:#514c14; --teal:#2f6d70; --green:#2f7442; --teal2:#1c5257; --icon:#5b6470; --on-gold:#f4f6f9; --mark:rgba(111,106,42,.18); --mark-ink:#4a4512; --new:#b23c2e; --new-bg:rgba(178,60,46,.12); --new-edge:rgba(178,60,46,.45); --shadow:0 10px 28px rgba(30,42,58,.16); --figbg:#dbe1e7; --bggrad:#f1f4f7; --on-accent:#f4f6f9; --page:#e3e8ee; --scrim:rgba(20,28,40,.34); --navtint:rgba(30,48,72,.05); --stickyshadow:0 12px 28px -14px rgba(30,44,64,.4); color-scheme:light; } #tla-root{ --ff-head:'teutonic','Cinzel',Georgia,'Times New Roman',serif; --ff-body:'arno',Georgia,'Iowan Old Style','Palatino Linotype',serif; --ff-ui:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; /* Type scale. One small set of sizes for the whole interface -- body at 18, labels a step down, headings up -- consolidated from ~37 ad-hoc values so the page reads at a consistent rhythm. This is the UI ONLY: the card faces (.tla-ubc*, and .tbc* in taboo.css) size their text in cqw off the plate and are deliberately left alone. Change a size here, not on a rule. */ --fs-micro:13px; /* the smallest: numeric badges, kbd, counts */ --fs-eyebrow:14px; /* uppercase eyebrows/labels, captions, meta */ --fs-small:16px; /* secondary controls: nav items, buttons, tabs */ --fs-body:18px; /* body reading text, inputs, primary controls */ --fs-lead:21px; /* lead paragraphs, emphasis, the smallest headings */ --fs-h3:25px; /* sub-section and section headings */ --fs-h2:31px; /* callout and the largest in-flow headings */ /* Icons are drawn at their true font size. On paper that is right; on a screen a touch larger reads better, without disturbing their proportions. */ --icon-scale:1.15; /* Symbol brand colours. The game's class/skill/token identity — Guardian blue, Mystic purple — which the book prints as small colour badges on its Quick Reference page. tools/quick_reference.py rips a starting point off those badges (see it for why the exact values want a human eye: the badges are tiny and edition-noisy, so the hue is trustworthy but the precise hex is not). They are game identity, not language, so they live here, once. Fixed, not theme-adapted: each symbol shows on a light chip whose background never changes, exactly as the book prints a badge on a light shield, so the colour reads the same on every theme. seeker/skull/elder-thing were the three the badge rip read badly (a highlight or a shadow, not the mark's colour); they are set here from the printed badges instead — amber, maroon, navy-purple. The glyph contour (.tla-symchip .ico) keeps any fill, pale or not, legible against the chip regardless. */ --sym-chip:#ece3cb; --sym-guardian:#0465aa; --sym-seeker:#9c7015; --sym-mystic:#3a2058; --sym-rogue:#0a7e5e; --sym-survivor:#ad2731; --sym-willpower:#004a73; --sym-intellect:#4b1848; --sym-combat:#6d2613; --sym-agility:#005439; --sym-wild:#725b07; --sym-eldersign:#348792; --sym-autofail:#64070f; --sym-skull:#7c2b26; --sym-cultist:#004a17; --sym-tablet:#0f2f4b; --sym-elderthing:#37335f; font-size:var(--fs-body); color:var(--ink); font-family:var(--ff-body); line-height:1.65; -webkit-font-smoothing:antialiased; /* height:var(--app-h) locks the shell to the LIVE viewport; a small head-time script keeps --app-h = window.innerHeight. The bare 100dvh stays as the no-JS fallback. Why not 100dvh alone: this root is overflow:hidden and the scroller is an inner rail (.tla-main), so the document never scrolls — and on Android Chrome a 100dvh that was resolved while the URL bar was shown can then fail to re-resolve when the bar retracts (no root-scroll signal), leaving the shell short and the dark body showing below the footer until a manual refresh. */ height:100dvh; height:var(--app-h,100dvh); display:flex; flex-direction:column; position:relative; overflow:hidden; background:radial-gradient(135% 92% at 50% -18%, var(--bggrad) 0%, var(--bg) 55%); } #tla-root a{color:var(--teal2); text-decoration:none} #tla-root a:hover{text-decoration:underline} #tla-root :focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px} .tla-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- header ---------- */ .tla-head{ flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; background:linear-gradient(180deg,rgba(0,0,0,.14),transparent),var(--bg2); border-bottom:1px solid var(--edge); z-index:40; } .tla-brand{display:flex; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none} .tla-brand:hover{text-decoration:none} .tla-sigil{width:40px;height:40px;flex:0 0 auto;color:var(--gold);filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))} .tla-titles{min-width:0; display:flex; flex-direction:column} .tla-title{font-family:var(--ff-head); font-size:var(--fs-h3); line-height:1; letter-spacing:.5px; color:var(--gold2); white-space:nowrap; display:flex; align-items:center} .tla-sub{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted); letter-spacing:.3px; margin-top:4px} .tla-spacer{flex:1 1 auto} /* search trigger (opens the overlay) — icon + "/" shortcut hint */ .tla-searchbtn{flex:0 0 auto; height:44px; padding:0 10px 0 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--edge2); color:var(--gold2)} .tla-searchbtn:hover{background:var(--panel2); border-color:var(--gold)} .tla-searchbtn > svg{width:19px;height:19px} .tla-searchbtn-kbd{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted); line-height:1.5; border:1px solid var(--edge2); border-radius:5px; padding:1px 7px; background:var(--bg)} .tla-theme{flex:0 0 auto; width:44px; height:44px; border-radius:10px; border:1px solid var(--edge2); background:var(--panel); color:var(--gold2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center} .tla-theme:hover{background:var(--panel2)} .tla-theme svg{width:20px;height:20px} .tla-theme[aria-expanded=true]{background:var(--panel2); border-color:var(--gold)} /* ---------- theme picker ---------- */ .tla-themewrap{position:relative; flex:0 0 auto} .tla-thememenu{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:220px; background:var(--panel); border:1px solid var(--edge2); border-radius:12px; box-shadow:var(--shadow); padding:10px} .tla-thememenu[hidden]{display:none} /* The first-visit nudge at the palette button. Anchored to .tla-themewrap, which is already position:relative. right:0 so it can never push the header wide, and max-width so a long translation wraps instead of leaving the screen. */ .tla-themetip{position:absolute; top:calc(100% + 8px); right:0; z-index:59; display:flex; align-items:center; gap:8px; width:max-content; max-width:min(74vw,260px); background:var(--gold); color:var(--on-gold); border-radius:10px; padding:8px 6px 8px 11px; box-shadow:var(--shadow); font-family:var(--ff-ui); font-size:var(--fs-eyebrow); line-height:1.3; animation:tlatip .5s ease both} /* the notch, pointing back at the button it is about */ .tla-themetip::before{content:''; position:absolute; top:-5px; right:15px; width:10px; height:10px; background:var(--gold); transform:rotate(45deg)} .tla-themetip-t{position:relative} .tla-themetip-x{flex:0 0 auto; width:26px; height:26px; border:0; border-radius:6px; cursor:pointer; background:transparent; color:var(--on-gold); font-size:var(--fs-body); line-height:1; display:inline-flex; align-items:center; justify-content:center} .tla-themetip-x:hover{background:rgba(0,0,0,.14)} @keyframes tlatip{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .tla-themetip{animation:none} } .tla-themeset{border:0; margin:0; padding:0} .tla-themeset-h{font-family:var(--ff-ui); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:0 6px 8px} .tla-themeopt{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; font-family:var(--ff-ui); font-size:var(--fs-small); color:var(--ink2); min-height:36px} .tla-themeopt:hover{background:var(--panel2); color:var(--ink)} /* the radio itself stays real and focusable — it is only moved out of sight, so the whole row is the label and the keyboard model is the browser's own */ .tla-themeopt input{position:absolute; width:1px; height:1px; opacity:0; margin:0} .tla-themeopt:has(input:focus-visible){outline:3px solid var(--gold); outline-offset:2px} .tla-themeopt:has(input:checked){background:var(--mark); color:var(--ink)} .tla-themeopt-n{flex:1 1 auto} /* selection is not signalled by colour alone: the chosen row gets a tick */ .tla-themeopt::after{content:''; flex:0 0 auto; width:16px; height:16px; opacity:0; background:var(--gold2); clip-path:polygon(41% 84%, 9% 52%, 19% 42%, 41% 64%, 81% 24%, 91% 34%)} .tla-themeopt:has(input:checked)::after{opacity:1} /* Each swatch wears the palette it offers (.tla-pal-), so it shows that theme's real colours rather than a copy of them that can rot. */ .tla-swatch{flex:0 0 auto; display:flex; gap:3px; padding:4px; border-radius:6px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--edge2)} .tla-swatch i{width:9px; height:14px; border-radius:2px; display:block} /* One button per language, built at runtime from data/languages.json. The [hidden] rule must be spelled out: `display:flex` would otherwise beat the browser's own [hidden] rule and a single-language site would show an empty box. */ /* position: the menu hangs off this box, so it must be the containing block. Not `overflow: hidden` any more — that clipped the menu it now holds. */ .tla-lang{position:relative; display:flex; border:1px solid var(--edge2); border-radius:10px; font-family:var(--ff-ui)} .tla-lang[hidden]{display:none} .tla-lang button{display:flex; align-items:center; gap:7px; min-height:44px; background:transparent; color:var(--ink2); border:0; padding:0 12px; font-size:var(--fs-small); font-weight:700; cursor:pointer; letter-spacing:.4px} .tla-lang button:hover{background:var(--panel)} .tla-lang button[aria-pressed=true]{background:var(--gold); color:var(--on-gold)} .tla-lang-cur{border-radius:9px} .tla-lang-cur[aria-expanded=true]{background:var(--panel)} .tla-lang-caret{width:10px; height:6px; opacity:.7; flex:none} .tla-lang-cur[aria-expanded=true] .tla-lang-caret{transform:rotate(180deg)} /* The menu of the other languages. Same shelf as the theme picker so the header behaves one way, and scrollable: eleven languages is taller than a short viewport. */ .tla-langmenu{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:210px; max-height:min(60vh,420px); overflow-y:auto; display:flex; flex-direction:column; background:var(--panel2); border:1px solid var(--edge2); border-radius:12px; padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.34)} .tla-langmenu[hidden]{display:none} .tla-langmenu button{width:100%; justify-content:flex-start; border-radius:8px; padding:0 10px} .tla-lang-nm{font-weight:500; letter-spacing:0; color:var(--ink2); white-space:nowrap} .tla-langmenu button:hover .tla-lang-nm{color:var(--ink)} /* The flag is a small chip: held back to the palette's muted register until its language is the live one, so it reads as part of the brass, not a sticker. */ .tla-flag{display:block; width:20px; height:14px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset, 0 0 0 1px var(--edge) ; filter:saturate(.55) brightness(.9); opacity:.75; transition:filter .15s, opacity .15s} .tla-lang button:hover .tla-flag{filter:saturate(.85); opacity:.95} .tla-lang button[aria-pressed=true] .tla-flag{filter:none; opacity:1; box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 0 1px rgba(0,0,0,.28)} .tla-burger{display:none; background:var(--panel); border:1px solid var(--edge2); color:var(--ink); width:44px;height:44px; border-radius:10px; cursor:pointer; font-size:var(--fs-lead); align-items:center; justify-content:center} /* ---------- search overlay (modal) ---------- */ .tla-searchmodal{position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center; padding:clamp(56px,11vh,132px) 16px 24px; background:var(--scrim); backdrop-filter:blur(3px)} .tla-searchmodal[hidden]{display:none} .tla-searchmodal-box{width:min(940px,100%); max-height:80vh; display:flex; flex-direction:column; overflow:hidden; background:var(--panel); border:1px solid var(--edge2); border-radius:14px; box-shadow:var(--shadow)} .tla-searchmodal-bar{display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--edge); flex:0 0 auto} .tla-searchmodal-bar > svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto} .tla-searchmodal-bar input{flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none; font-family:var(--ff-ui); font-size:var(--fs-body); color:var(--ink)} .tla-searchmodal-bar input::placeholder{color:var(--muted)} .tla-searchmodal-cancel{flex:0 0 auto; background:var(--bg); border:1px solid var(--edge2); color:var(--ink2); font-family:var(--ff-ui); font-size:var(--fs-eyebrow); font-weight:600; padding:8px 12px; border-radius:8px; cursor:pointer} .tla-searchmodal-cancel:hover{background:var(--panel2); color:var(--ink)} .tla-searchhint{display:flex; gap:16px; flex-wrap:wrap; padding:10px 15px; border-top:1px solid var(--edge); flex:0 0 auto; font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted)} .tla-searchhint kbd{border:1px solid var(--edge2); border-radius:4px; padding:0 5px; margin-right:3px; background:var(--bg); font-size:var(--fs-micro)} /* ---------- search results ---------- */ .tla-results{flex:1 1 auto; min-height:0; overflow:auto; display:none} .tla-results.on{display:block} .tla-res{padding:11px 14px; border-bottom:1px solid var(--edge); cursor:pointer; font-family:var(--ff-ui)} .tla-res:last-child{border-bottom:0} .tla-res:hover,.tla-res.sel{background:var(--panel2)} .tla-res .rt{font-weight:600; color:var(--ink); font-size:var(--fs-small)} /* Two selectors, not one. They were welded into ".tla-res .rt .tla-res .rs", which asks for a .rs inside a .tla-res inside a .rt inside a .tla-res — nothing on the page is that, so this was the only .rs rule in the file and it never matched. The chapter then rendered in the title's own size and weight with no gap: "Mazo de EncuentrosI · Glosario". */ .tla-res .rs{font-size:var(--fs-eyebrow); color:var(--gold2); margin-left:8px; font-weight:600} .tla-res .rt .ico{--icon:var(--gold2)} .tla-res .rx{font-size:var(--fs-eyebrow); color:var(--muted); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .tla-res mark{background:var(--mark); color:var(--mark-ink); border-radius:2px; padding:0 1px} .tla-res-empty{padding:18px; color:var(--muted); font-family:var(--ff-ui); font-size:var(--fs-small); text-align:center} /* The corpus divider in split search results (Grimoire / FAQ chapter 1). A label, not an option: sticky so the reader always knows which document the rows below belong to. */ .tla-res-grp{position:sticky; top:0; z-index:1; padding:7px 14px; font-family:var(--ff-ui); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold2); background:var(--panel2); border-bottom:1px solid var(--edge)} .tla-res-grpn{color:var(--muted); font-weight:600} /* Two corpora side by side: the Grimoire on the left, the FAQ chapter 1 on the right, split by a rule. Stacks to one column on a narrow screen. Each corpus keeps its own sticky heading; the shared scroll is the results container. */ .tla-res-cols{display:grid; grid-template-columns:1fr 1fr} .tla-res-col{min-width:0; border-left:1px solid var(--edge)} .tla-res-col:first-child{border-left:0} @media (max-width:640px){ .tla-res-cols{grid-template-columns:1fr} .tla-res-col{border-left:0; border-top:1px solid var(--edge2)} .tla-res-col:first-child{border-top:0} } .tla-faqlink svg{transform:none} /* Set/campaign/scenario icons recovered from the FAQ's vector art. Sized like a small square glyph sitting in a line of text; recoloured through the mask like every game icon (the .ico base sets background-color:var(--icon) and the mask props). */ .tla-seticon{width:calc(1.02em*var(--icon-scale)); height:calc(1.02em*var(--icon-scale)); vertical-align:-.16em} /* Cross-corpus confirm: a FAQ chapter 1 link that leads into the Grimoire names where it goes before following it. Above the lightbox (300) so it is never hidden. */ .tla-confirm{position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--scrim); backdrop-filter:blur(3px)} .tla-confirm-box{width:min(460px,100%); background:var(--panel); border:1px solid var(--edge2); border-radius:14px; box-shadow:var(--shadow); padding:20px} .tla-confirm-t{font-family:var(--ff-head); font-size:var(--fs-lead); color:var(--ink); margin:0 0 10px} .tla-confirm-d{font-family:var(--ff-ui); font-size:var(--fs-small); color:var(--ink2); line-height:1.55; margin:0 0 14px} .tla-confirm-d b{color:var(--ink)} .tla-confirm-rm{display:flex; align-items:center; gap:9px; font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted); margin-bottom:16px; cursor:pointer} /* Our own checkbox, so the "remember" toggle matches the book's ink and gold rather than the browser's default blue box. appearance:none removes the native control; the tick is a rotated border. Keyboard focus and the checked state stay clearly visible for WCAG. */ .tla-confirm-rm-cb{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:18px; height:18px; margin:0; border:1.5px solid var(--edge2); border-radius:5px; background:var(--bg); cursor:pointer; position:relative; transition:background .12s, border-color .12s} .tla-confirm-rm-cb:hover{border-color:var(--gold)} .tla-confirm-rm-cb:checked{background:var(--gold); border-color:transparent} .tla-confirm-rm-cb:checked::after{content:''; position:absolute; left:6px; top:2px; width:4px; height:9px; border:solid var(--on-gold); border-width:0 2px 2px 0; transform:rotate(45deg)} .tla-confirm-rm-cb:focus-visible{outline:2px solid var(--teal2); outline-offset:2px} .tla-confirm-btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap} .tla-confirm-cancel,.tla-confirm-ok{font-family:var(--ff-ui); font-size:var(--fs-small); font-weight:600; padding:9px 16px; border-radius:9px; cursor:pointer; border:1px solid var(--edge2)} .tla-confirm-cancel{background:var(--bg); color:var(--ink2)} .tla-confirm-cancel:hover{background:var(--panel2); color:var(--ink)} .tla-confirm-ok{background:var(--gold); color:var(--on-gold); border-color:transparent} .tla-confirm-ok:hover{filter:brightness(1.06)} /* ---------- app-shell layout (full height) ---------- */ .tla-body{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:308px minmax(0,1fr) 264px} /* The taboo card gallery reclaims the right-hand rail so two large cards fit side by side — but only on desktop widths, where that third column exists. Below 1181px the responsive rules further down already collapse the grid (280px|1fr, then 1fr); this rule is scoped so its higher specificity (two classes) can't override them and strand the section in a 308px strip on phones. */ @media(min-width:1181px){ .tla-body.is-wide{grid-template-columns:308px minmax(0,1fr) 0} .tla-body.is-wide .tla-toc{display:none} } .tla-nav,.tla-main,.tla-toc{height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain} .tla-nav{border-right:1px solid var(--edge); padding:18px 12px 40px; background:var(--navtint)} .tla-toc{border-left:1px solid var(--edge); padding:22px 18px 40px} .tla-main{padding:0 clamp(20px,3.6vw,56px) 90px} .tla-doc{max-width:1040px; margin:0 auto; padding-top:30px} /* …and the gallery's own doc breaks past the prose reading measure to use that reclaimed width. */ .tla-doc.tla-doc--wide{max-width:1360px} .tla-nav::-webkit-scrollbar,.tla-toc::-webkit-scrollbar,.tla-main::-webkit-scrollbar,.tla-results::-webkit-scrollbar,.tla-rel-body::-webkit-scrollbar{width:10px} .tla-nav::-webkit-scrollbar-thumb,.tla-toc::-webkit-scrollbar-thumb,.tla-main::-webkit-scrollbar-thumb,.tla-results::-webkit-scrollbar-thumb,.tla-rel-body::-webkit-scrollbar-thumb{background:var(--edge2); border-radius:6px} /* nav */ /* The shelf headings in the side menu. A rule above each one rather than a box around it: the menu is already a column of bordered things, and another border would read as one more item rather than as what separates them. */ /* A collapsible shelf. The summary is the whole clickable row; the h2 inside keeps the heading in the outline. The rule/spacing that used to live on the h2 moves to the summary so the fold line sits above the whole shelf, not just its label. */ .tla-navgrp{margin:0} .tla-nav-grp-s{display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; margin:14px 0 4px; padding:12px 10px 2px; border-top:1px solid var(--edge)} .tla-navgrp:first-of-type .tla-nav-grp-s{margin-top:2px; padding-top:0; border-top:0} .tla-nav-grp-s::-webkit-details-marker{display:none} .tla-nav-grp-s::before{content:''; flex:0 0 auto; width:6px; height:6px; margin-right:1px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s ease} .tla-navgrp[open] > .tla-nav-grp-s::before{transform:rotate(45deg)} .tla-nav-grp-s:hover{color:var(--ink)} .tla-nav-grp-s:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px} .tla-nav-grp{font-family:var(--ff-ui); font-size:var(--fs-micro); font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:0} .tla-nav-sec{margin-bottom:2px} /* Announced, not written: dimmer than a chapter, but never so dim it fails contrast — the word "Próximamente" is the whole content of the row. */ .tla-nav-cnt.is-soon{font-size:var(--fs-micro); letter-spacing:.4px; text-transform:uppercase; color:var(--teal2); border-color:var(--edge2); background:var(--panel)} .tla-nav-btn{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; background:transparent; border:0; color:var(--ink2); font-family:var(--ff-ui); font-size:var(--fs-body); padding:11px 11px; border-radius:9px; line-height:1.35; min-height:44px} .tla-nav-btn:hover{background:var(--panel); color:var(--ink)} .tla-nav-btn.active{background:linear-gradient(90deg,var(--mark),transparent); color:var(--gold2); box-shadow:inset 3px 0 0 var(--gold)} .tla-nav-num{font-family:var(--ff-head); font-size:var(--fs-small); color:var(--gold); min-width:28px; opacity:.9} .tla-nav-btn.active .tla-nav-num{opacity:1} .tla-nav-cnt{margin-left:auto; font-size:var(--fs-eyebrow); color:var(--muted); background:var(--bg); border:1px solid var(--edge); border-radius:11px; padding:1px 8px; font-family:var(--ff-ui)} .tla-sublist{margin:2px 0 10px 14px; padding-left:10px; border-left:1px solid var(--edge); display:none} .tla-nav-sec.open .tla-sublist{display:block} .tla-sublink{display:block; padding:8px 9px; font-family:var(--ff-ui); font-size:var(--fs-small); color:var(--muted); border-radius:7px; cursor:pointer; line-height:1.3; border:0; background:transparent; width:100%; text-align:left; min-height:36px} .tla-sublink:hover{background:var(--panel); color:var(--ink2)} .tla-sublink.active{color:var(--gold2)} /* A nav sublink is a label, not prose: entry titles that are set bold or italic in the text (the FAQ's "(1.1) …" rulings, its wholly-bold definition terms) must read as plain menu items here, not shout. */ #tla-root .tla-sublink strong,#tla-root .tla-sublink b{font-weight:400; color:inherit} #tla-root .tla-sublink em,#tla-root .tla-sublink i{font-style:normal} /* ---------- content ---------- */ .tla-crumb{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted); letter-spacing:.4px; margin-bottom:8px; text-transform:uppercase} .tla-h1{font-family:var(--ff-head); font-size:clamp(33px,4vw,46px); line-height:1.08; color:var(--gold2); margin:0 0 8px; letter-spacing:.4px; text-wrap:balance} .tla-h1 .tla-rn{color:var(--gold); opacity:.78; margin-right:.35em} .tla-rule{height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:16px 0 24px; opacity:.6} .tla-lead{font-size:var(--fs-lead); color:var(--ink2); margin:0 0 22px} /* ---------- landing ---------- */ .tla-landing{max-width:1040px} /* hero banner — artwork at assets/general_banner_01.webp (2000×700, 20:7). Layered scrims (centre vignette + bottom gradient) keep the white title legible over the busy art. If the file is missing, the fallback gradient shows automatically (no broken image). */ /* max-width:100% is load-bearing: with an aspect-ratio and a min-height that wins, the browser derives the WIDTH from the ratio (216 x 20/7 = 617px) and the banner pushes the whole landing sideways on a phone. */ .tla-hero{position:relative; margin:0 0 26px; border-radius:16px; overflow:hidden; aspect-ratio:20/7; max-height:400px; min-height:216px; max-width:100%; border:1px solid var(--edge2); background-color:var(--panel2); background-image: radial-gradient(78% 96% at 50% 52%, rgba(6,8,12,.64) 0%, rgba(6,8,12,.16) 60%, rgba(6,8,12,0) 82%), linear-gradient(180deg, rgba(6,8,12,.24) 0%, rgba(6,8,12,.10) 42%, rgba(6,8,12,.70) 100%), url(../assets/general_banner_01.webp), radial-gradient(120% 150% at 50% -20%, var(--bggrad), var(--bg)); background-size:cover, cover, cover, cover; background-position:center; background-repeat:no-repeat} .tla-hero-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px} .tla-hero-title{font-family:var(--ff-head); font-size:clamp(38px,6.4vw,64px); line-height:1; margin:0; color:#fff; letter-spacing:1px; text-shadow:0 2px 22px rgba(0,0,0,.6); display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center} .tla-hero-sub{font-family:var(--ff-ui); font-size:clamp(16px,2.3vw,21px); margin:0; color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(0,0,0,.6)} .tla-cards-h{font-family:var(--ff-head); font-size:var(--fs-h2); color:var(--gold2); margin:24px 0 4px; letter-spacing:.3px} /* ---------- pennants ---------- Two of these, explained once above the grid and then flown on the chapters they point at. A swallowtail cut and a slow wave: they should read as cloth on a pole, which is why the tail is notched rather than merely rounded. */ .tla-pennant{--flag:var(--gold); --flag-ink:var(--on-gold); position:relative; display:inline-block; flex:0 0 auto; font-family:var(--ff-ui); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.7px; text-transform:uppercase; white-space:nowrap; /* The box is 5px taller than the cloth top and bottom. That gap is headroom: a clip-path cannot draw outside its own box, so without it the fly could only ever pinch inwards — it could never wave UP. The right padding is the fly's length, keeping the text clear of the notch. */ padding:10px 40px 10px 11px; color:var(--flag-ink); background:var(--flag); /* Everything is in px, not %, because calc() interpolates in a clip-path (the midpoint of 34px and 26px really does compute to 30px). So the notch is the same length and the ripple the same depth whether the label is one word or four — with percentages both would stretch with the text. */ clip-path:polygon( 0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 5px, 100% 5px, calc(100% - 34px) 50%, 100% calc(100% - 5px), calc(100% - 28px) calc(100% - 5px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px)); animation:tlafly 3.8s ease-in-out infinite} .tla-pennant.is-relevant{--flag:var(--new); --flag-ink:var(--on-accent)} .tla-pennant.is-recommended{--flag:var(--teal); --flag-ink:var(--on-accent)} .tla-pennant.is-extra{--flag:var(--green); --flag-ink:var(--on-accent)} /* Landing notice: English-leads-translation, and how to help fill a gap. */ .tla-notice{display:flex; gap:12px; align-items:flex-start; margin:18px 0 2px; padding:14px 18px; border:1px solid var(--edge2); border-left:3px solid var(--teal); border-radius:12px; background:var(--bg2)} .tla-notice svg{width:20px; height:20px; flex:0 0 auto; color:var(--teal2); margin-top:2px} /* The machine-translation notice. Warmer than the teal one beside it, because it is about how much to trust this page's words rather than which edition it is built from. It sits directly above the "a project by" panel, which the shared 2px bottom margin left it touching, so it keeps a gap of its own. */ .tla-notice-mt{border-left-color:var(--gold); margin:18px 0 26px} .tla-notice-mt svg{color:var(--gold2)} .tla-notice p{margin:0; font-family:var(--ff-body); font-size:var(--fs-small); line-height:1.6; color:var(--ink2)} .tla-notice b{color:var(--gold2)} #tla-root .tla-notice a{color:var(--gold2); text-decoration:underline; text-underline-offset:2px} #tla-root .tla-notice a:hover{color:var(--ink)} /* the pole it hangs from */ .tla-pennant::before{content:''; position:absolute; left:0; top:3px; bottom:3px; width:2px; background:var(--flag); opacity:.55; border-radius:2px} /* Only the fly moves. The four points at the hoist and at `100% - 56px` are the same in every keyframe, so the body is a rectangle that cannot budge and the text keeps a straight edge to sit against. Past that, the cloth is loose. The fly FLAPS rather than pinches: top and bottom shift together, so the cloth keeps its thickness instead of squeezing — a flag bends, it does not deflate. The two loose points are out of phase (when the middle is up the tip is still coming down), so a wave travels out along the fly rather than the whole tip bobbing as one lump. That phase lag is the whole difference between cloth and a windscreen wiper, which is also why none of these numbers form a sine. */ @keyframes tlafly{ 0%,100%{clip-path:polygon(0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 5px, 100% 5px, calc(100% - 34px) 50%, 100% calc(100% - 5px), calc(100% - 28px) calc(100% - 5px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px))} 22% {clip-path:polygon(0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 1px, 100% 7px, calc(100% - 31px) 50%, 100% calc(100% - 3px), calc(100% - 28px) calc(100% - 9px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px))} 44% {clip-path:polygon(0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 6px, 100% 1px, calc(100% - 37px) 50%, 100% calc(100% - 9px), calc(100% - 28px) calc(100% - 4px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px))} 66% {clip-path:polygon(0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 9px, 100% 5px, calc(100% - 32px) 50%, 100% calc(100% - 5px), calc(100% - 28px) calc(100% - 1px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px))} 84% {clip-path:polygon(0 5px, calc(100% - 56px) 5px, calc(100% - 28px) 4px, 100% 8px, calc(100% - 35px) 50%, 100% calc(100% - 2px), calc(100% - 28px) calc(100% - 6px), calc(100% - 56px) calc(100% - 5px), 0 calc(100% - 5px))} } .tla-pennantkey{list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; margin:14px 0 0; padding:0} .tla-pennantkey-i{display:flex; align-items:center; gap:6px; min-width:0} .tla-pennant-d{font-family:var(--ff-ui); font-size:var(--fs-small); color:var(--muted)} /* on a card the pennant flies from the top-left corner, over the border */ .tla-cardpennant{position:absolute; top:8px; left:-5px; z-index:1; font-size:var(--fs-micro); padding:9px 38px 9px 9px; animation-duration:4.6s} .tla-card.has-pennant{padding-top:44px} /* Cloth does not flap for someone who asked the page to hold still. */ @media (prefers-reduced-motion:reduce){ .tla-pennant{animation:none} } .tla-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:24px 0 8px} /* A shelf heading over its own grid. h3 under the "Explorar" h2, so the outline runs h1 > h2 > h3 with nothing skipped. */ .tla-cards-grp{font-family:var(--ff-head); font-size:var(--fs-h2); color:var(--gold2); margin:26px 0 -10px; letter-spacing:.3px} .tla-card.is-soon{border-style:dashed} .tla-card.is-soon .tla-card-meta{color:var(--teal2)} /* The placeholder's own page: the promise, repeated, so a card that opens is not a card that opens onto nothing. */ .tla-soon{margin:18px 0 0; padding:22px 20px; text-align:center; border:1px dashed var(--edge2); border-radius:12px; background:var(--panel)} .tla-soon-h{font-family:var(--ff-head); font-size:var(--fs-lead); color:var(--teal2); margin:0 0 6px; letter-spacing:.3px} .tla-soon-d{font-family:var(--ff-body); font-size:var(--fs-small); color:var(--muted); margin:0} .tla-card{position:relative; display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; cursor:pointer; padding:18px 20px; border-radius:12px; border:1px solid var(--edge2); background:var(--panel); color:inherit; transition:transform .12s ease, border-color .12s, background .12s} .tla-card:hover{transform:translateY(-2px); border-color:var(--gold); background:var(--panel2)} .tla-card-top{display:flex; align-items:baseline; gap:11px} /* --gold2 not --gold: at 15px on the light panel, --gold measures 4.43:1 — just under the 4.5:1 minimum for body-size text. */ .tla-card-num{font-family:var(--ff-head); font-size:var(--fs-small); color:var(--gold2); min-width:22px; flex:0 0 auto} .tla-card-title{font-family:var(--ff-head); font-size:var(--fs-lead); line-height:1.15; color:var(--gold2)} .tla-card-meta{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted)} .tla-card.news{border-color:var(--new-edge); background:linear-gradient(120deg,var(--new-bg),transparent 68%),var(--panel)} .tla-card.news:hover{border-color:var(--new)} .tla-card.news .tla-card-num,.tla-card.news .tla-card-title{color:var(--new)} .tla-landing-about{margin-top:34px; padding-top:20px; border-top:1px solid var(--edge)} .tla-landing-about h2{font-family:var(--ff-head); font-size:var(--fs-lead); color:var(--gold2); margin:0 0 12px; letter-spacing:.3px} /* Rincón Miskatonic intro panel */ .tla-rm{display:flex; gap:24px; align-items:center; margin:0 0 6px; padding:22px 26px; border:1px solid var(--edge2); border-radius:14px; background:linear-gradient(115deg, var(--mark), transparent 62%), var(--panel)} .tla-rm-body{flex:1 1 auto; min-width:0} .tla-rm-title{font-family:var(--ff-head); font-size:var(--fs-h3); color:var(--gold2); margin:0 0 9px; letter-spacing:.3px} /* No measure cap here. The panel is a two-column band — prose, then the sigil — and capping the prose at 66ch inside a column that takes all the remaining width opened a dead gap between the two. The column itself is what sets the measure now. */ .tla-rm-body p{font-size:var(--fs-body); color:var(--ink2); margin:0 0 15px; line-height:1.7} .tla-rm-body p b{color:var(--gold2)} .tla-rm-body p i{color:var(--ink)} /* #tla-root prefix so these win over the ID-specific `#tla-root a` link colour */ #tla-root .tla-rm-cta{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-ui); font-weight:700; font-size:var(--fs-small); padding:11px 18px; border-radius:9px; background:var(--gold); color:var(--on-gold); border:1px solid var(--gold)} #tla-root .tla-rm-cta:hover{background:var(--gold2); color:var(--on-gold); text-decoration:none} /* The project name set in italics, in the CTA and the title (see rmName). It must take its context's colour — dark on the gold CTA, gold in the title — not the site-wide `em` ink2, which would drop it below contrast on the gold button. #tla-root beats that em rule. */ #tla-root .tla-rm-name{font-style:italic; color:inherit} .tla-rm-mark{flex:0 0 auto; margin-left:auto; width:124px; height:124px; color:var(--gold); opacity:.92; filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))} .tla-rm-mark .tla-sigil{width:100%; height:100%} @media(max-width:680px){.tla-rm{gap:0} .tla-rm-mark{display:none}} /* external link chip (e.g. retired-FAQ document that the PDF shows as a QR) */ #tla-root .tla-extlink{display:inline-flex; align-items:center; gap:7px; margin:2px 0 16px; font-family:var(--ff-ui); font-weight:600; font-size:var(--fs-small); padding:9px 15px; border-radius:9px; border:1px solid var(--teal); color:var(--teal2); background:transparent} #tla-root .tla-extlink:hover{background:var(--mark); color:var(--teal2); text-decoration:none} .tla-extlink svg{width:15px; height:15px; flex:0 0 auto} /* A-Z filter bar (glossary) — an opaque toolbar pinned to the top of the reading pane. It must hide everything that scrolls under it, so it bleeds out to the edges of the pane: a new entry's accent line hangs 19px further left than the text, and it used to show through at the top corners. Square at the top, where content scrolls up behind it and would leak through a rounded corner; rounded at the bottom, where nothing passes and it reads as a panel hanging from the top rather than a band across the page. */ .tla-azfilter{position:sticky; top:0; z-index:8; margin:0 calc(-1*clamp(20px,3.6vw,56px)) 22px; padding:13px clamp(20px,3.6vw,56px); background:var(--panel); border:0; border-bottom:1px solid var(--edge2); border-radius:0 0 12px 12px; box-shadow:var(--stickyshadow)} /* The whole header row is the toggle: a 27-letter bar is worth folding on a phone (five rows, a third of the screen) and worth folding on a desktop too once you know your letter. */ .tla-aztoggle{display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; background:transparent; border:0; padding:0; min-height:34px; text-align:left; color:inherit} .tla-azfilter .tla-azlabel{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:1px; color:var(--muted); flex:0 0 auto} .tla-azchev{width:18px; height:18px; flex:0 0 auto; color:var(--muted); transition:transform .18s ease} .tla-azfilter.is-folded .tla-azchev{transform:rotate(-90deg)} .tla-aztoggle:hover .tla-azlabel,.tla-aztoggle:hover .tla-azchev{color:var(--ink2)} .tla-azpanel{padding-top:10px} .tla-azpanel[hidden]{display:none} .tla-azrow{display:flex; flex-wrap:wrap; gap:6px; align-items:center} .tla-azbtn{min-width:36px; height:36px; padding:0 8px; border-radius:8px; border:1px solid var(--edge2); background:var(--bg2); color:var(--ink2); font-family:var(--ff-ui); font-size:var(--fs-small); font-weight:600; cursor:pointer} .tla-azbtn:hover{background:var(--panel2); color:var(--ink); border-color:var(--gold)} .tla-azbtn.active{background:var(--gold); color:var(--on-gold); border-color:var(--gold)} .tla-azbtn.all{width:auto; padding:0 14px} /* pushed right, and the last thing to be given up when the bar is narrow */ .tla-azcount{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--muted); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0} .tla-azfilter.is-folded .tla-azcount{color:var(--gold2)} /* Empty state: a version filter can leave a glossary letter (or the whole chapter) with nothing to show. Speak to it instead of a blank pane. */ .tla-glossnone{font-family:var(--ff-ui); font-size:var(--fs-small); color:var(--muted); margin:28px 0; padding:18px 20px; border:1px dashed var(--edge2); border-radius:10px; background:var(--bg2); text-align:center} /* Jumping to an entry must land it BELOW the pinned toolbar, not behind it. The toolbar's height changes with the alphabet and the width (it wraps to two rows on a narrow pane), so app.js measures it and sets --sticky-h. */ .tla-entry{scroll-margin-top:calc(var(--sticky-h,0px) + 24px); margin:0 0 30px; padding-top:4px} .tla-entry h2{font-family:var(--ff-head); font-size:var(--fs-h3); color:var(--gold2); margin:26px 0 10px; letter-spacing:.3px; display:flex; align-items:center; gap:8px} /* 24x24 minimum: the glyph is small, so the target is padded out around it (WCAG 2.5.8). inline-flex keeps it on the heading's baseline row. */ .tla-entry h2 .anchor{opacity:0; color:var(--muted); font-family:var(--ff-ui); font-size:var(--fs-body); text-decoration:none; transition:opacity .15s; display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; vertical-align:middle} .tla-entry:hover h2 .anchor,.tla-entry h2 .anchor:focus-visible{opacity:.75} /* A subsection heading: in the book it is set larger and in teal, with a rule under it, and it opens the run of entries that follow. It used to render SMALLER than them — the flag that marked it was read backwards. */ .tla-entry.is-subhead h2{color:var(--teal2); font-size:var(--fs-h2); margin-top:38px; padding-bottom:8px; border-bottom:1px solid var(--teal); display:block} .tla-entry.is-subhead h2 .anchor{float:right} /* STOP! — in the book a red-ruled callout in the margin, not a heading with a paragraph under it. It interrupts you on purpose, so it looks like it does. */ .tla-entry.is-callout{border:1px solid var(--new-edge); border-radius:14px; padding:20px 26px 22px; margin:30px 0; text-align:center; background:linear-gradient(180deg,var(--new-bg),transparent 70%),var(--panel)} .tla-entry.is-callout h2{justify-content:center; color:var(--new); font-size:var(--fs-h2); margin:0 0 4px; letter-spacing:1px} .tla-entry.is-callout .tla-p{color:var(--ink); max-width:62ch; margin:0 auto} .tla-entry.is-callout .tla-p:first-of-type{font-family:var(--ff-head); font-size:var(--fs-lead); color:var(--new); letter-spacing:.4px; margin-bottom:12px; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px} .tla-entry.is-callout .anchor{display:none} /* The FAQ's obsolete-Beta warning: the book's red STOP! energy, as a banner at the top of a retired section, pointing to the living rule in the Grimoire. */ .tla-obsolete{display:flex; align-items:center; gap:18px; margin:0 0 26px; padding:16px 20px; border:1px solid var(--new-edge); border-left:5px solid var(--new); border-radius:12px; background:linear-gradient(180deg,var(--new-bg),transparent 80%),var(--panel)} .tla-obsolete-tag{flex:0 0 auto; font-family:var(--ff-head); font-size:var(--fs-lead); font-weight:700; letter-spacing:1.5px; color:var(--new); text-transform:uppercase} .tla-obsolete-body{min-width:0} .tla-obsolete-lead{margin:0 0 6px; font-size:var(--fs-small); color:var(--ink); line-height:1.55} .tla-obsolete-p{margin:0; font-size:var(--fs-small); color:var(--ink2); line-height:1.6} /* The epigraph a document opens with — a quotation, so it is set as one: indented, with the attribution at the far end of the line rather than looking like another sentence of it. */ .tla-entry.is-epigraph .tla-p{padding-left:18px; border-left:2px solid var(--edge2)} .tla-entry.is-epigraph .tla-p:last-child{border-left-color:transparent; text-align:right; color:var(--muted)} /* The community's deeper timing reference: a real table, so it can be read, searched and translated. Three columns, a row per step; the free-window rows are tinted AND labelled, never tinted alone. Wide, so it scrolls inside its own box rather than the page. */ .tla-fm{margin:34px 0 0; padding-top:26px; border-top:1px solid var(--edge2)} .tla-fm-title{font-family:var(--ff-head); font-size:var(--fs-h3); margin:0 0 16px; color:var(--ink)} .tla-fm-wrap{overflow-x:auto; margin:18px 0 0; border:1px solid var(--edge2); border-radius:12px} .tla-fm-table{border-collapse:collapse; width:100%; min-width:640px; font-size:var(--fs-small)} .tla-fm-table th,.tla-fm-table td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--edge2)} .tla-fm-table thead th{font-family:var(--ff-ui); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); background:var(--bg2); position:sticky; top:0} .tla-fm-table tbody tr:last-child th,.tla-fm-table tbody tr:last-child td{border-bottom:0} .tla-fm-id{white-space:nowrap; font-family:var(--ff-ui); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; width:1%} /* The middle column is a short sentence and the right one is a long list, so the browser's automatic split starves the middle. Fixed shares instead, with a floor so it never collapses to one word per line. */ .tla-fm-desc{color:var(--ink); width:26%; min-width:170px} .tla-fm-order{width:auto} .tla-fm-order{color:var(--ink2); line-height:1.6} .tla-fm-table tr.is-window{background:var(--bg2)} .tla-fm-win{font-style:italic; font-weight:600; color:var(--ink2)} .tla-fm-wrap:focus-visible{outline:2px solid var(--gold); outline-offset:2px} .tla-fm-h{margin:12px 0 4px; font-weight:700; color:var(--ink)} .tla-fm-order>*:first-child{margin-top:0} .tla-fm-p,.tla-fm-eg{margin:0 0 4px} .tla-fm-eg{padding-left:14px; border-left:2px solid var(--edge2)} .tla-fm-credit{margin:14px 0 0; font-size:var(--fs-eyebrow); color:var(--ink2)} .tla-obsolete-lead+.tla-obsolete-p{margin-top:2px} #tla-root .tla-obsolete-go{display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-ui); font-weight:700; font-size:var(--fs-eyebrow); color:var(--new); text-decoration:underline; text-underline-offset:3px} #tla-root .tla-obsolete-go:hover{filter:brightness(1.12)} @media (max-width:560px){.tla-obsolete{flex-direction:column; align-items:flex-start; gap:10px}} /* ---------- phase diagrams ---------- */ /* The book draws these as boxes joined by fat arrows: teal for a numbered step, red for a player window. Same shapes here, built from the same text. */ .tla-diagbadge{font-family:var(--ff-ui); font-size:var(--fs-micro); font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--teal2); border:1px solid var(--teal); border-radius:6px; padding:1px 7px; vertical-align:middle; white-space:nowrap} .tla-toc a .tla-diagbadge{font-size:var(--fs-micro); padding:0 5px; margin-left:4px} .tla-flowwrap{position:relative; max-width:620px; margin:22px auto 30px} .tla-flow{list-style:none; margin:0; padding:0} /* the loops the book curves back up the right-hand side. The boxes' own words already say where each one goes, so these are decoration — JS only sets how far they reach, because that depends on how the text lays out. */ .tla-flow-loop{position:absolute; pointer-events:none; border:2px solid var(--teal); border-left:0; border-radius:0 10px 10px 0} .tla-flow-loop::before{content:''; position:absolute; top:-6px; left:-1px; border:6px solid transparent; border-right-color:var(--teal); border-left:0} .tla-flow-item{display:flex; flex-direction:column; align-items:center} .tla-flow-box{width:100%; border:2px solid var(--teal); border-radius:26px; padding:12px 22px; text-align:center; background:var(--panel); font-size:var(--fs-small); line-height:1.5; color:var(--ink)} .tla-flow-item.is-window .tla-flow-box{border-color:var(--new-edge); color:var(--new); font-family:var(--ff-ui); font-weight:700; font-size:var(--fs-small); padding:9px 22px} .tla-flow-item.is-window .ico{--icon:var(--new)} .tla-flow-item.is-goto .tla-flow-box{font-style:italic; font-weight:600} /* the arrow takes the colour of the box it leaves, as in the book */ .tla-flow-arrow{display:block; width:46px; height:26px; margin:0; flex:0 0 auto; background:var(--teal); clip-path:polygon(32% 0, 68% 0, 68% 42%, 100% 42%, 50% 100%, 0 42%, 32% 42%)} .tla-flow-item.is-window .tla-flow-arrow{background:var(--new-edge)} .tla-flow-box.flash{animation:flowflash 1.4s ease-out} @keyframes flowflash{from{border-color:var(--gold); box-shadow:0 0 0 4px var(--mark)} to{border-color:var(--teal); box-shadow:none}} /* a step number that the book loops back to */ /* ---------- diagrams-only switch ---------- */ /* A real fieldset with real radios: the segmented look is painted onto the labels, while the inputs stay real and focusable — moved out of sight, never hidden — so arrow keys, the single tab stop and "1 of 2" are the browser's own. */ /* Borderless, so the legend lays out as an ordinary line instead of being notched into a frame. The frame belongs to the row below it. */ .tla-diagpick{border:0; margin:0 0 18px; padding:0; min-width:0} .tla-diagpick-lg{font-family:var(--ff-ui); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:0 0 7px} /* The pill nests inside the frame's radius only because both are pills and the padding is EQUAL on all four sides: outer radius = inner radius + padding exactly. An asymmetric padding is what pushed the right-hand option's corner through the frame's curve. */ .tla-diagpick-row{display:inline-flex; align-items:center; gap:4px; max-width:100%; border:1px solid var(--edge2); border-radius:999px; padding:4px; background:var(--panel)} .tla-diagopt{position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; cursor:pointer; font-family:var(--ff-ui); font-size:var(--fs-eyebrow); color:var(--ink2); padding:0 14px; min-height:34px; text-align:center} .tla-diagopt:hover{background:var(--panel2); color:var(--ink)} .tla-diagopt input{position:absolute; width:1px; height:1px; opacity:0; margin:0} .tla-diagopt:has(input:focus-visible){outline:3px solid var(--gold); outline-offset:2px} /* Checked is not colour alone (WCAG 1.4.1): the pill is a filled shape a colour-blind reader still reads as "this one". */ .tla-diagopt:has(input:checked){background:var(--gold); color:var(--on-gold); font-weight:700} @media (max-width:560px){ .tla-diagpick-row{display:flex; width:100%; border-radius:14px} .tla-diagopt{flex:1 1 0; min-width:0} } /* Fallback for an engine without :has() (pre-2023). The visible label wraps the hidden radio, so :has() paints its focus ring and its checked fill; without it a keyboard user would see neither which option has focus (WCAG 2.4.7) nor which is selected. focus-within is old and universal, and the checked option is emphasised through the input's own sibling. Scoped to where :has() is missing so modern engines are untouched (there, focus-within would also fire on a mouse click). */ @supports not (selector(:has(*))){ .tla-themeopt:focus-within,.tla-diagopt:focus-within{outline:3px solid var(--gold); outline-offset:2px} .tla-themeopt input:checked ~ .tla-themeopt-n{color:var(--ink); font-weight:700} .tla-themeopt input:checked ~ .tla-themeopt-n::before{content:'\2713\00a0'} .tla-diagopt input:checked ~ span{text-decoration:underline; text-underline-offset:3px; font-weight:700} } /* A