/* ============================================================ mobile.css — GBS Insider Club mobile/readability layer Additive & reversible: remove the to revert any page. Reading-mode light theme, theme toggle, diagram zoom, 1A nav. Loaded LAST in so token overrides win on source order. Default (dark, desktop) is unchanged — brand & desktop intact. ============================================================ */ /* 1 -- READING MODE: LIGHT THEME ---------------------------------------- White "tile" cards on a soft cool page; tokens flip via custom props. */ html[data-theme="light"]{ --void:#f4f6fb; --surface:#ffffff; --surface-2:#fbfcfe; --surface-3:#f2f5fb; --teal:#1558d6; --gold:#9a6b00; --sky:#0e8fd6; --green:#0f9d63; --purple:#6d4df0; --text:#11161f; --text-2:#3a4660; --text-3:#64718a; --border:#e6eaf2; --border-2:#d7dde9; --teal-glow:rgba(21,88,214,.10); --gold-bg:rgba(154,107,0,.09); --body-bright:#3a4660; /* site.css glass layer applies background:var(--glass-bg)!important to .cluster-card/.stats-panel/.why-card/etc. Default --glass-bg is a translucent DARK that never flips, so those cards render grey on light pages. Redefining the tokens here (html[data-theme] beats :root) makes the same !important rule resolve to frosted white. One fix, all glass cards. */ --glass-bg:rgba(255,255,255,.85); --glass-brd:rgba(16,24,40,.12); } html[data-theme="light"] body{ background:var(--void); color:var(--text-2); } /* readable text: force the known white/near-white text classes dark. Safe because in light mode no section keeps a dark background. */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6, html[data-theme="light"] .card-title, html[data-theme="light"] [class$="-title"], html[data-theme="light"] [class$="-name"], html[data-theme="light"] .brand-name, html[data-theme="light"] .brand b, html[data-theme="light"] .nav-label, html[data-theme="light"] .sidebar-item span.nav-label{ color:var(--text) !important; } html[data-theme="light"] .lead, html[data-theme="light"] p, html[data-theme="light"] li, html[data-theme="light"] td, html[data-theme="light"] dd{ color:var(--text-2); } /* keep intentionally-dark belt badges readable (don't flip their text) */ html[data-theme="light"] .belt-badge.black, html[data-theme="light"] .belt-badge.master{ color:#fff !important; } /* crisp white tiles: clean border + soft shadow so cards read as tiles */ html[data-theme="light"] .card, html[data-theme="light"] .cta-block, html[data-theme="light"] .tension-box, html[data-theme="light"] .disclaimer-box, html[data-theme="light"] [class$="-card"], html[data-theme="light"] [class$="-box"]{ border:1px solid var(--border); box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05); } /* site.css gives .concept-fig img / .side-visual a translucent-DARK backing (rgba(8,11,16,.5-.6)) that reads as grey on a light page. These hold diagrams, so frame them as solid dark panels — consistent with the dark-framed zoomable diagrams. */ html[data-theme="light"] .concept-fig img, html[data-theme="light"] .side-visual{ background:#0e1219 !important; border-color:#222c3e !important; } /* 1c -- WHITE-TEXT CARD-HEADER BANDS ---------------------------------------- Several card components set color:#fff on the header and a PALE tint as the header background (var(--teal-glow)/--gold-bg/low-alpha rgba). In light mode the tint goes pale, so the white title disappears. Design call: give these header bands a solid dark background and keep white text; the colored top-border (var(--teal/gold/sky/purple)) preserves the colour coding. */ html[data-theme="light"] .audience-card-header, html[data-theme="light"] .career-card-header, html[data-theme="light"] .cfo-card-header, html[data-theme="light"] .owner-card-header, html[data-theme="light"] .method-col-head--ls, html[data-theme="light"] .method-col-head--tt{ background:#141922 !important; border-bottom-color:#222c3e !important; } html[data-theme="light"] .audience-card-header, html[data-theme="light"] .career-card-header, html[data-theme="light"] .cfo-card-header, html[data-theme="light"] .owner-card-header, html[data-theme="light"] .method-col-head h4{ color:#fff !important; } /* recognition bar is a LIGHT section banner -> its white texts go dark */ html[data-theme="light"] .recognition-header-text h3, html[data-theme="light"] .recognition-conclusion{ color:var(--text) !important; } /* small white-on-pale link/badge chips -> solid accent so white reads */ html[data-theme="light"] .tile-link, html[data-theme="light"] .path-card a.pc-link{ background:var(--teal) !important; } html[data-theme="light"] .tier-applied{ background:#9a6b00 !important; color:#fff !important; } /* 1d -- PILLAR TILES (homepage / overview grid): frosted white reads as flat against the light page. Give them a subtle cool tint + clear border + soft lift so each tile reads as a distinct card. Content stays dark/readable. Uniform tint by choice; trivially switchable to per-pillar accents. */ html[data-theme="light"] .pillar-tile{ background:#eef2fb !important; border-color:#d4ddf0 !important; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.06); -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } html[data-theme="light"] .pillar-tile:hover{ background:#e4eafb !important; border-color:var(--teal) !important; box-shadow:0 2px 4px rgba(16,24,40,.06), 0 10px 24px rgba(16,24,40,.10); } /* 1f -- DAYLIGHT GLASS CARDS (path pages) -------------------------------- Path pages set .card/.step-card/.mod-card to a translucent DARK glass with !important (rgba(20,25,34,.55) + backdrop blur). Over the dark void it reads as frosted glass; over a light page it reads as a muddy grey slab. Light-mode counterpart keeps the same material language, lit: glossy white gradient tile + teal->sky gradient hairline (signature) + soft blue-tinted lift. Specificity beats the page rule among !important declarations (html[data-theme] .card > .card). */ html[data-theme="light"] .card, html[data-theme="light"] .step-card, html[data-theme="light"] .mod-card{ background:linear-gradient(180deg,#ffffff 0%,#f6f8fc 100%) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border-color:#dfe6f2 !important; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 28px -12px rgba(21,88,214,.14); } html[data-theme="light"] .card::before, html[data-theme="light"] .step-card::before, html[data-theme="light"] .mod-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--teal),var(--sky)); opacity:.85; pointer-events:none; } html[data-theme="light"] .card:hover, html[data-theme="light"] .step-card:hover, html[data-theme="light"] .mod-card:hover{ border-color:#bcd0f0 !important; box-shadow:0 2px 4px rgba(16,24,40,.06), 0 18px 40px -14px rgba(21,88,214,.22) !important; } html[data-theme="light"] .card:hover::before, html[data-theme="light"] .step-card:hover::before, html[data-theme="light"] .mod-card:hover::before{ opacity:1; } /* gated template tiles keep their download affordance readable */ html[data-theme="light"] .tpl-dl .dl-go{ color:var(--teal); } /* 1e -- HOMEPAGE HERO stays a dark cinematic band in light mode too. hero-julian.webp is intrinsically dark (the boardroom's left side is near black), so a translucent light overlay only muddied it into a grey block. Instead, scope the DARK palette tokens onto .hero (and give it a dark base colour): every hero descendant that uses var(--text/gold/teal/void) now resolves to its dark-mode value, so the text is white/bright, the ::before overlay goes dark again, and the photo blends — identical to dark mode. The rest of the light page is untouched. */ html[data-theme="light"] #hero{ --void:#080b10; --surface:#0e1219; --surface-2:#141922; --surface-3:#1b2130; --text:#ffffff; --text-2:#c8d0de; --text-3:#7a8799; --teal:#1d6aff; --gold:#e8b800; --sky:#38bdf8; --purple:#a78bfa; --border:#1e2636; --border-2:#2a3347; background-color:#080b10; } /* re-assert the original DARK overlay (overrides any lighter attempt) */ html[data-theme="light"] #hero::before{ background: linear-gradient(90deg, var(--void) 0%, rgba(8,11,16,0.6) 60%, rgba(8,11,16,0.3) 100%), linear-gradient(180deg, rgba(8,11,16,0.3) 0%, transparent 15%, transparent 85%, var(--void) 100%) !important; } /* the global light-mode heading/lead flips use var(--text*), which now resolve dark-on-hero -> white; this keeps the white sub-copy highlight white too. */ html[data-theme="light"] #hero .hero-sub strong{ color:#fff !important; } /* 1b -- DIAGRAMS IN LIGHT MODE: frame as intentional dark panels -------- Robust by design: we do NOT recolor each SVG's internals (that is fragile — it misses fills and can cause white-on-white). The diagram keeps its native, internally-consistent dark palette, placed inside a tidy dark card so it reads as a deliberate figure on the light page. */ html[data-theme="light"] .gbs-zoomable{ background:#0e1219; border:1px solid #222c3e; border-radius:14px; padding:12px; box-shadow:0 2px 12px rgba(16,24,40,.10); } /* 2 -- THEME TOGGLE CONTROL (fixed, above the sticky topbar) ------------- */ .gbs-theme-toggle{ position:fixed; top:10px; right:12px; z-index:9990; display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--border-2); color:var(--text-2); border-radius:99px; padding:7px 12px 7px 10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.25); } .gbs-theme-toggle svg{ width:15px; height:15px; flex-shrink:0; } .gbs-theme-toggle:hover{ border-color:var(--teal); } @media(max-width:600px){ .gbs-theme-toggle{ padding:7px 11px; } } /* 3 -- DIAGRAM TAP-TO-ZOOM ---------------------------------------------- */ .gbs-zoomable{ position:relative; display:block; } .gbs-zoomable .gbs-zbadge{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:var(--gold); color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; padding:3px 8px; border-radius:4px; pointer-events:none; } html[data-theme="light"] .gbs-zoomable .gbs-zbadge{ color:#fff; } .gbs-zoomable .gbs-zbadge svg{ width:13px; height:13px; } .gbs-zoomable > svg{ cursor:zoom-in; } .gbs-zoomov{ position:fixed; inset:0; z-index:9999; background:rgba(6,9,14,.95); display:none; flex-direction:column; align-items:center; justify-content:center; padding:16px; } html[data-theme="light"] .gbs-zoomov{ background:rgba(20,28,42,.92); } .gbs-zoomov.show{ display:flex; } .gbs-zoomov svg{ width:100%; max-height:80vh; background:#0e131b; border:1px solid #2a3347; border-radius:12px; padding:14px; box-sizing:border-box; } html[data-theme="light"] .gbs-zoomov svg{ background:#0e1219; border-color:#222c3e; } .gbs-zoomov .gbs-zclose{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#c8d0de; background:#141922; border:1px solid #2a3347; border-radius:7px; padding:9px 16px; cursor:pointer; } /* 4 -- 1A MOBILE NAVIGATION (mobile only, <=1024px) --------------------- */ .gbs-bottombar, .gbs-scrim, .gbs-sheet{ display:none; } @media(max-width:1024px){ body.gbs-nav-on{ padding-bottom:78px; } .gbs-bottombar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--surface); border-top:1px solid var(--border-2); padding:7px 6px calc(7px + env(safe-area-inset-bottom)); } .gbs-bb-item{ flex:1; background:none; border:0; color:var(--text-3); display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; } .gbs-bb-item svg{ width:21px; height:21px; } .gbs-bb-item.cur{ color:var(--teal); } .gbs-scrim{ display:block; position:fixed; inset:0; background:rgba(5,7,10,.65); opacity:0; pointer-events:none; transition:opacity .2s; z-index:70; } .gbs-scrim.show{ opacity:1; pointer-events:auto; } .gbs-sheet{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80; max-height:80vh; flex-direction:column; background:var(--surface); border:1px solid var(--border-2); border-radius:16px 16px 0 0; transform:translateY(110%); transition:transform .28s cubic-bezier(.2,.7,.2,1); } .gbs-sheet.show{ transform:translateY(0); } .gbs-grab{ width:38px; height:4px; border-radius:99px; background:var(--border-2); margin:9px auto 4px; } .gbs-sheet-head{ display:flex; gap:8px; padding:10px 14px 12px; border-bottom:1px solid var(--border); } .gbs-sheet-head button{ flex:1; background:transparent; border:1px solid var(--border); color:var(--text-3); border-radius:7px; padding:8px; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; } .gbs-sheet-head button.on{ background:var(--teal-glow); border-color:var(--teal); color:var(--text); } .gbs-sheet-search{ padding:10px 14px; border-bottom:1px solid var(--border); } .gbs-sheet-search input{ width:100%; background:var(--surface-2); border:1px solid var(--border-2); color:var(--text); border-radius:7px; padding:9px 11px; font-size:14px; font-family:inherit; } .gbs-sheet-body{ overflow:auto; padding:6px 0 16px; } .gbs-grouplbl{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); padding:12px 16px 6px; } .gbs-nav-item{ display:flex; align-items:center; gap:11px; padding:11px 16px; text-decoration:none; color:var(--text-2); font-size:14px; } .gbs-nav-item .gbs-num{ width:22px; height:22px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); flex-shrink:0; } .gbs-nav-item.active{ color:var(--text); } .gbs-nav-item.active .gbs-num{ border-color:var(--teal); color:var(--teal); background:var(--teal-glow); } .gbs-nav-item .gbs-dot{ width:6px; height:6px; border-radius:50%; background:var(--text-3); flex-shrink:0; margin:0 8px 0 6px; } .gbs-nav-item.cur{ color:var(--text); } .gbs-nav-item.cur .gbs-dot{ background:var(--gold); } } /* 1g -- MOBILE DIAGRAM FIT: inline diagrams were forced to min-width 680px inside an overflow-x frame -> squeezed/scrollable and unreadable on phones. Let them scale to fit; the "Tap to zoom" badge opens the full-size readable version. */ @media(max-width:768px){ .svg-frame svg,.side-visual svg{ min-width:0 !important; } .svg-frame{ overflow-x:visible !important; padding:16px !important; } .gbs-zoomable .gbs-zbadge{ top:8px; right:8px; border-radius:6px; box-shadow:0 2px 8px rgba(8,11,16,.4); } } /* 1h -- COMMENTS (replaces the vote widget). Anon submit -> moderation -> approved display. */ .pc{margin:34px 0 12px;padding:18px 20px;background:var(--surface-2,#141922);border:1px solid var(--border,#1e2535);border-radius:10px} .pc-head{font-size:14px;font-weight:500;color:var(--text,#d4dbe8);margin:0 0 12px} .pc-name,.pc-body{width:100%;box-sizing:border-box;background:var(--surface-3,#1b2130);border:1px solid var(--border-2,#252e40);border-radius:7px;color:var(--text,#d4dbe8);font-family:inherit;font-size:14px;padding:9px 11px;margin:0 0 9px} .pc-body{resize:vertical;min-height:64px;line-height:1.5} .pc-name:focus,.pc-body:focus{outline:none;border-color:var(--teal,#1d6aff)} .pc-submit{font-family:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--teal,#1d6aff);border:none;border-radius:7px;padding:9px 20px;cursor:pointer} .pc-submit:disabled{opacity:.55;cursor:default} .pc-msg{font-size:13px;color:var(--green,#34d399);margin-left:12px} .pc-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:none;border:none;color:var(--text-2,#8a96ab);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:0} .pc-toggle:hover{color:var(--teal,#1d6aff)} .pc-toggle::before{content:"\25B8";display:inline-block;transition:transform .15s;color:var(--gold,#e8b800)} .pc-toggle[aria-expanded="true"]::before{transform:rotate(90deg)} .pc-list{margin-top:14px;display:flex;flex-direction:column;gap:12px} .pc-item{border-left:2px solid var(--border-2,#252e40);padding:2px 0 2px 14px} .pc-item-name{font-size:13px;font-weight:600;color:var(--text,#d4dbe8)} .pc-item-date{font-size:11px;color:var(--text-3,#4e5a6e);margin-left:8px;font-family:"JetBrains Mono",monospace} .pc-item-body{font-size:14px;color:var(--text-2,#8a96ab);line-height:1.55;margin:4px 0 0;white-space:pre-wrap} .pc-empty{font-size:13px;color:var(--text-3,#4e5a6e);font-style:italic} /* 1i -- MEMBER UI SUPPRESSION: hide upsell for VIPs, signup prompts for logged-in users. Real content is server-gated (fail-closed) so this is UI-only. gbs-vip / gbs-authed set on by mobile.js. data-vip-hide / data-authed-hide = manual opt-in hooks. */ html.gbs-vip .gate-panel, html.gbs-vip .preview-banner, html.gbs-vip .lock-tag, html.gbs-vip [data-vip-hide]{ display:none !important; } html.gbs-authed [data-authed-hide]{ display:none !important; } .vip-only{ display:none !important; } html.gbs-vip .vip-only{ display:block !important; }