/* Grand Tour #11 - The Reader's Passport - FABLE redesign (20 Jul 2026) * "A small official document, issued by the house." * Drop-in replacement for LIVE_gt11_passport.css. Every original selector kept. * No new DOM required: the cover band, guilloche, document number, AWAITING * microtext and MRZ line are all built from existing elements + pseudo-elements. * Palette: Instrument tokens only. No external assets. Reversible. */ :root{ --gt11-cream:#F5EEE1; --gt11-card:#FBF6EB; --gt11-ink:#2A211B; --gt11-dark:#1A1714; --gt11-soft:#6E6253; --gt11-hair:#DED3BF; --gt11-orange:#C75B22; --gt11-otext:#A8481A; --gt11-green:#1D7A55; } /* Opt-in dark token set (bonus; site currently renders light). * Activate by adding class "gt11-dark" to - nothing else changes. */ :root.gt11-dark{ --gt11-cream:#1E1913; --gt11-card:#241E17; --gt11-ink:#F0E7D8; --gt11-dark:#141110; --gt11-soft:#A79A87; --gt11-hair:#3A322A; --gt11-orange:#D96F35; --gt11-otext:#E08A4F; } /* ---- the nav chip: a small laminated booklet cover ---- */ .gt11-chip{ display:inline-flex; align-items:center; gap:.45em; font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gt11-ink); background:var(--gt11-card); border:1px solid var(--gt11-hair); border-radius:14px; box-shadow:inset 0 0 0 2px var(--gt11-card), inset 0 0 0 3px var(--gt11-hair); /* fine double rule, like a cover frame */ padding:4px 11px; margin:0 3px; cursor:pointer; white-space:nowrap; -webkit-appearance:none; appearance:none; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; } .gt11-chip:hover{ border-color:var(--gt11-soft); } /* the dot becomes a tiny empty stamp ring; season ticket fills it */ .gt11-chip .gt11-dot{ width:7px; height:7px; border-radius:50%; background:transparent; border:1.5px solid var(--gt11-orange); opacity:.85; flex:0 0 auto; box-sizing:border-box; } /* two compact lines so the chip stays narrow and the nav has room to breathe */ .gt11-chip .gt11-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.06; } .gt11-chip .gt11-l1{ font-size:9px; font-weight:600; letter-spacing:.1em; } .gt11-chip .gt11-l2{ font-size:8px; letter-spacing:.12em; color:var(--gt11-soft); } .gt11-chip.is-season .gt11-l2{ color:var(--gt11-orange); } .gt11-chip.is-season{ border-color:var(--gt11-orange); border-width:1px; } .gt11-chip.is-season .gt11-dot{ opacity:1; background:var(--gt11-orange); } /* keep the nav from breaking on narrow widths: hide the inline chip once the nav collapses toward the hamburger layout. */ @media (max-width:980px){ .gt11-chip.gt11-in-nav{ display:none; } } /* fixed fallback mini-chip (only used when no nav slot was found) */ .gt11-chip.gt11-fixed{ position:fixed; top:14px; right:14px; z-index:99998; box-shadow:0 2px 10px rgba(42,33,27,.14); } /* ---- the panel: an open passport page under a dark cover band ---- */ .gt11-panel{ position:fixed; top:70px; right:16px; z-index:99999; width:min(348px, calc(100vw - 32px)); /* faint laid-paper texture: hairline horizontal lines on warm card stock */ background: repeating-linear-gradient(0deg, rgba(42,33,27,.016) 0 1px, transparent 1px 5px), var(--gt11-card); border:1px solid var(--gt11-hair); border-radius:16px; box-shadow:0 18px 44px rgba(42,33,27,.20); padding:16px 16px 13px; color:var(--gt11-ink); font-family:"IBM Plex Mono", ui-monospace, monospace; overflow:hidden; /* the cover band bleeds to the edges */ } .gt11-panel[hidden]{ display:none; } @keyframes gt11-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .gt11-panel:not([hidden]){ animation:gt11-open .22s ease-out both; } /* cover band: dark ink, engine-turned guilloche arcs, burnt-orange foot rule */ .gt11-head{ display:flex; align-items:center; justify-content:space-between; margin:-16px -16px 0; padding:11px 14px 10px; background: repeating-radial-gradient(circle at -12% 50%, transparent 0 5px, rgba(245,238,225,.055) 5px 6px), repeating-radial-gradient(circle at 112% 50%, transparent 0 5px, rgba(245,238,225,.055) 5px 6px), var(--gt11-dark); border-bottom:2px solid var(--gt11-orange); } /* official document header: mono kicker over a single small serif line */ /* the theme has an h2 rule that inflates this to ~35px on the live site (the Fable harness had no theme, so it looked right there). Force the one-line, document-header size that Miguel asked for. */ .gt11-panel .gt11-title{ font-family:"Newsreader", Georgia, serif; font-weight:500; font-size:13.5px !important; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap !important; color:var(--gt11-cream); margin:0 !important; line-height:1.15 !important; } .gt11-title::before{ content:"Cost & Profitability \00B7\00A0Grand Tour"; display:block; font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:7.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:rgba(245,238,225,.55); margin-bottom:4px; } :root.gt11-dark .gt11-title{ color:var(--gt11-ink); } .gt11-close{ -webkit-appearance:none; appearance:none; background:none; border:0; cursor:pointer; color:rgba(245,238,225,.6); font-size:17px; line-height:1; padding:2px 4px; font-family:inherit; } .gt11-close:hover{ color:var(--gt11-cream); } :root.gt11-dark .gt11-close:hover{ color:var(--gt11-ink); } /* data line: territory register on the left, document number on the right */ .gt11-sub{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gt11-soft); margin:13px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--gt11-hair); } .gt11-sub::after{ content:"N\00BA\00A0GT-11"; flex:0 0 auto; letter-spacing:.14em; color:var(--gt11-otext); } /* ---- stamp grid ---- */ .gt11-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px 6px; } .gt11-cell{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:5px 2px 4px; border-radius:10px; } .gt11-cell .gt11-lbl{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--gt11-soft); margin-top:6px; max-width:90px; } .gt11-svg-wrap{ width:76px; height:76px; position:relative; } .gt11-stamp{ width:100%; height:100%; display:block; transform:rotate(var(--gt11-rot,0deg)); } /* empty slots: quiet "awaiting stamp" reservations */ .gt11-cell.is-empty{ opacity:.38; } .gt11-cell.is-empty .gt11-svg-wrap{ filter:grayscale(1); } .gt11-cell.is-empty svg circle{ stroke:var(--gt11-hair); } .gt11-cell.is-empty .gt11-svg-wrap::after{ content:"Awaiting"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:6.5px; letter-spacing:.26em; text-indent:.26em; text-transform:uppercase; color:var(--gt11-soft); pointer-events:none; } /* clickable territory cells: go to that territory's page (in the reader's language) */ a.gt11-cell.gt11-link{ text-decoration:none; color:inherit; cursor:pointer; transition:background .16s ease, opacity .16s ease; } a.gt11-cell.gt11-link:hover{ background:var(--gt11-cream); } a.gt11-cell.gt11-link:hover .gt11-lbl{ color:var(--gt11-orange); } a.gt11-cell.is-empty.gt11-link{ opacity:.6; } /* clickable empties read brighter than dead ones */ a.gt11-cell.is-empty.gt11-link:hover{ opacity:1; } a.gt11-cell.is-empty.gt11-link:hover .gt11-svg-wrap{ filter:none; } a.gt11-cell.is-empty.gt11-link:hover svg circle{ stroke:var(--gt11-orange); } a.gt11-cell.is-empty.gt11-link:hover .gt11-svg-wrap::after{ color:var(--gt11-otext); } a.gt11-cell.gt11-link:focus-visible{ outline:2px solid var(--gt11-orange); outline-offset:2px; } /* the "thunk" settle on a freshly earned stamp */ @keyframes gt11-thunk{ 0%{transform:rotate(var(--gt11-rot,0deg)) scale(1.15);} 100%{transform:rotate(var(--gt11-rot,0deg)) scale(1);} } .gt11-stamp.is-fresh{ animation:gt11-thunk .28s cubic-bezier(.2,.8,.3,1) both; } @media (prefers-reduced-motion:reduce){ .gt11-stamp.is-fresh{ animation:none; } .gt11-panel:not([hidden]){ animation:none; } } /* ---- foot: machine-readable zone above the tally ---- */ .gt11-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:14px; padding-top:8px; border-top:1px solid var(--gt11-hair); } .gt11-foot::before{ content:"P