/* reading sizes · baa.business one site, three reading sizes, picked from the three planet icons in the top ribbon (?view=small|normal|large, saved in localStorage "baa-view"). js/large-print.js sets one class on : .small-print | .size-normal (the default) | .large-print small dense newspaper: 15px root (body ~14-15px), line height 1.45, wider lines, two columns where a page has natural lists or card grids on wide screens normal the site as designed; on phones (<= 600px) the root goes 16 -> 18px, tap targets reach 48px, faint text is lifted to 4.5:1 (7:1 for body copy) and everything sits in one column. on desktop only too-small / too-faint text moves. large low vision: 22px root on phones, 23px on desktop, 1.6 line height, ~66ch, AAA contrast, 4px focus, 48px targets, motion off, charts "in words". sections: 1 the picker (all modes) · 2-5 large · 6 normal · 7 small */ /* ===================================================================== 1 · the picker: three planet icons (small, medium, large ringless circles) in one small capsule, always on the centre line wide (>= 900) on the hairline between the two tiers, under the number narrow (< 900) a two-row capsule: [menu] wordmark/number [saucer] [🪐 loop me in] [· o O] [🚀 boost us] ===================================================================== */ .txt-sizes { --sw: 30px; --sh: 24px; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgba(192, 132, 252, 0.3); border-radius: 999px; background: rgba(8, 7, 16, 0.92); } .txt-size { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--sw); height: var(--sh); min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: #b4b0c8; font-family: "Roboto", system-ui, -apple-system, sans-serif; font-weight: 400; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; } .txt-size::before { content: ""; position: absolute; inset: -10px -1px; border-radius: 12px; } /* taller touch area, no overlap */ .txt-size span { display: block; transform: translateY(-0.05em); pointer-events: none; } .txt-size-s span { font-size: 11px; } .txt-size-m span { font-size: 14px; } .txt-size-l span { font-size: 18px; } /* planet icons: line style, same lavender active state; the icon scales with the button height */ .txt-size .txt-ico { display: block; width: calc(var(--sh) * 0.78); height: calc(var(--sh) * 0.78); fill: none; stroke: currentColor; stroke-width: 1.5px; overflow: visible; pointer-events: none; } .txt-size .txt-ico circle { vector-effect: non-scaling-stroke; transition: fill 0.2s; } .txt-size[aria-pressed="true"] .txt-ico circle { fill: rgba(216, 180, 254, 0.3); } html.large-print .txt-size .txt-ico { stroke-width: 2px; width: calc(var(--sh) * 0.7); height: calc(var(--sh) * 0.7); } .txt-size[aria-pressed="true"] { color: #fff; background: rgba(192, 132, 252, 0.26); box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.75); } .txt-size:hover { color: #fff; } .txt-size:focus-visible { outline: none; box-shadow: 0 0 0 2px #e9d5ff; color: #fff; } @media (prefers-reduced-motion: reduce) { .txt-size { transition: none; } } /* wide: on the centre line between the tiers (the hairline runs behind the capsule) */ @media (min-width: 900px) { html:not(.large-print) { --nav-h: 122px; } html:not(.large-print):root:root:root { --nav-h: 122px; } html:not(.large-print) .site-nav.site-nav .container.container { grid-template-rows: 32px 20px 30px 40px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-links > a, html:not(.large-print) .site-nav.site-nav .container.container > .star-ufo { grid-row: 4; } html:not(.large-print) .site-nav.site-nav::before { top: 67px; } .site-nav.site-nav .container.container > .txt-sizes { grid-column: 3 / 8; grid-row: 3; justify-self: center; align-self: center; } } /* 900-1199: the site gives the tier links 14px touch padding, which reaches up into the planets row; fit them to their own row */ @media (min-width: 900px) and (max-width: 1199px) { html:not(.large-print) .site-nav.site-nav .container.container > .nav-links > a { padding-top: 9px; padding-bottom: 9px; } } /* narrow: two rows, the planets between the two pills */ @media (max-width: 899px) { html:not(.large-print):root:root:root { --nav-h: 112px; } html:not(.large-print) .site-nav.site-nav { --pill-w: 150px; --pill-h: 38px; --rb-gap: 8px; } html:not(.large-print) .site-nav.site-nav .container.container { width: min(720px, calc(100% - 20px)); border-radius: 30px; padding: 0 10px 4px; grid-template-columns: var(--pill-w) minmax(0, 1fr) auto minmax(0, 1fr) var(--pill-w); grid-template-rows: 46px 46px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -4px; } html:not(.large-print) .site-nav.site-nav .container.container > .wordmark { grid-column: 2 / 5; grid-row: 1; align-self: start; padding-top: 7px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-phone { grid-column: 2 / 5; grid-row: 1; align-self: end; padding: 0 2px 5px; } html:not(.large-print) .site-nav.site-nav .container.container > .star-ufo { grid-column: 5; grid-row: 1; justify-self: end; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-loop { grid-column: 1; grid-row: 2; justify-self: start; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-boost { grid-column: 5; grid-row: 2; justify-self: end; } .site-nav.site-nav .container.container > .txt-sizes { grid-column: 3; grid-row: 2; justify-self: center; align-self: center; --sw: 40px; --sh: 34px; } .txt-sizes .txt-size::before { inset: -7px -1px; } .txt-size-s span { font-size: 11px; } .txt-size-m span { font-size: 15px; } .txt-size-l span { font-size: 21px; } } @media (max-width: 619px) { html:not(.large-print) .site-nav.site-nav { --pill-w: 104px; --rb-gap: 4px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-pill { padding: 0 9px; gap: 5px; } } @media (max-width: 429px) { html:not(.large-print) .site-nav.site-nav .container.container > .txt-sizes { --sw: 34px; } } @media (max-width: 379px) { html:not(.large-print) .site-nav.site-nav { --pill-w: 98px; } html:not(.large-print) .site-nav.site-nav .container.container > .txt-sizes { --sw: 32px; } } @media (max-width: 349px) { html:not(.large-print) .site-nav.site-nav { --pill-w: 90px; } html:not(.large-print) .site-nav.site-nav .container.container > .txt-sizes { --sw: 28px; } } @media (max-width: 339px) { html:not(.large-print) .site-nav.site-nav { --pill-w: 82px; } html:not(.large-print) .site-nav.site-nav .container.container > .txt-sizes { --sw: 26px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-pill { padding: 0 6px; } html:not(.large-print) .site-nav.site-nav .nav-pill-i { display: none; } } /* the ribbon keeps its own px sizes in small and normal, so only the page text changes */ html:not(.large-print) .site-nav.site-nav .container.container > .wordmark { font-size: 15.2px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-phone { font-size: 10.6px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-pill { font-size: 11.8px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-links > a { font-size: 12.8px; } @media (max-width: 899px) { html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-phone { font-size: 11.5px; letter-spacing: 0.1em; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-center > .nav-pill { font-size: 12.5px; } html:not(.large-print) .site-nav.site-nav .container.container > .nav-links > a { font-size: 14.7px; min-height: 48px; display: flex; align-items: center; justify-content: center; } } /* loop me in (no ribbon): back link left, the planets right */ .txt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; align-self: stretch; } .txt-row .txt-sizes { --sw: 40px; --sh: 34px; } /* orbital trail: centred at the top (bottom strip while playing), square like the game */ .large-print-ot .txt-sizes { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 3px); left: 50%; transform: translateX(-50%); --sw: 36px; --sh: 32px; border-radius: 0; background: #120c2e; border-color: #5b43a6; } .large-print-ot .txt-size { border-radius: 0; color: #d6ccef; font-family: inherit; } .large-print-ot .txt-size::before { border-radius: 0; inset: -6px -1px; } .large-print-ot .txt-size[aria-pressed="true"] { background: #3b2d63; color: #fff; box-shadow: inset 0 0 0 1px #b7a3ea; } .large-print-ot body.playing .txt-sizes { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 3px); --sw: 30px; --sh: 24px; } .large-print-ot body.playing .txt-size::before { inset: -3px -1px; } html.large-print.large-print-ot body.playing .txt-sizes { bottom: env(safe-area-inset-bottom, 0px); --sw: 32px; --sh: 38px; gap: 2px; padding: 2px; } html.large-print.large-print-ot body.playing .txt-size::before { inset: 0 -1px; } @media (max-width: 480px) { html.large-print.large-print-ot body.playing .txt-sizes { --sw: 30px; } html.large-print.large-print-ot body.playing :is(.ot-home, .ot-sound) { font-size: 14px; letter-spacing: 0.02em; padding-inline: 6px; } html.large-print.large-print-ot body.playing .ot-home { left: 2px; } html.large-print.large-print-ot body.playing .ot-sound { right: 2px; } } @media (max-width: 379px) { html.large-print.large-print-ot body.playing .txt-sizes { --sw: 28px; } html.large-print.large-print-ot body.playing :is(.ot-home, .ot-sound) { font-size: 13px; letter-spacing: 0; } } /* ===================================================================== 2 · large mode: type, colour, focus, targets, motion (html.large-print) ===================================================================== */ @media (max-width: 600px) { html.large-print:root { font-size: 22px; } } html.large-print { font-size: 23px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; --text: #f6f4fb; --text-muted: #dcd7ea; --purple-bright: #d8b4fe; --line: rgba(255, 255, 255, 0.22); --lp-ink: #f6f4fb; --lp-soft: #dcd7ea; --lp-accent: #d8b4fe; --lp-measure: 66ch; } html.large-print body { font-size: 1rem; line-height: 1.6; font-weight: 400; overflow-wrap: break-word; } /* readable weight + colour for running text (light 300 weights read thin at low vision) */ html.large-print body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, summary, small, cite, time, caption, address, legend) { font-weight: 400; color: var(--lp-soft) !important; line-height: 1.6; } html.large-print body :is(p, li, dd, blockquote, figcaption, label, summary) { font-size: max(1em, 0.96rem); } html.large-print body :is(p, li, dd, td, blockquote, figcaption) a:not(nav a):not(.toc a):not([class*="btn"]):not([class*="chip"]) { color: var(--lp-accent) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } html.large-print body :is(h1, h2, h3, h4, h5, h6) { color: var(--lp-ink) !important; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; } html.large-print body :is(h1, h2, h3, h4, h5, h6) :is(em, i, span) { color: inherit; } html.large-print ::placeholder { color: #c9c3da; opacity: 1; } html.large-print body :is(input, textarea, select) { font-size: max(1rem, 22px); color: var(--lp-ink); } /* measure: running text is kept to ~66 characters by each page's own column widths (they are set in ch/em, so they shrink in characters as the type grows) plus the page fixes below. */ /* focus: a thick, unmistakable ring on everything */ html.large-print :focus-visible { outline: 4px solid #f0e2ff !important; outline-offset: 3px !important; box-shadow: 0 0 0 9px rgba(5, 5, 8, 0.9) !important; } html.large-print :focus:not(:focus-visible) { outline: none; } /* targets: buttons, inputs and stand-alone links are at least 48px tall */ html.large-print body :is(button, .btn, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, summary) { min-height: 48px; } html.large-print body .btn { display: inline-flex; align-items: center; justify-content: center; padding-block: 10px; font-size: 1rem; } html.large-print body .btn-primary { background: #6d28d9 !important; color: #fff !important; border-color: #6d28d9 !important; } html.large-print body .btn-primary:hover { background: #5b21b6 !important; } /* motion: large print is a still page. stars, twinkles, ken burns, parallax, shimmer and blinking all stop (js/large-print.js also answers "prefers reduced motion" for the site's own scripts, so the warp, the saucer and the reveal effects take their calm paths). */ html.large-print *, html.large-print *::before, html.large-print *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.large-print { scroll-behavior: auto !important; } html.large-print .site-nav .container::before, html.large-print .site-nav .container::after, html.large-print .site-nav::after, html.large-print .site-nav .nav-center > .nav-phone::before, html.large-print .stars, html.large-print .fx-stars { display: none !important; } html.large-print .ken-burns, html.large-print .hero-crossfade, html.large-print .hero-photo { transform: none !important; } /* ===================================================================== 3 · the ribbon in large mode same mirror, bigger parts. two layouts: >= 1240 the two centred tiers, planets (48px) on the centre line between them < 1240 a two-row capsule: [menu] wordmark/number [saucer] [loop me in] [a a A] [boost us] ===================================================================== */ html.large-print .site-nav.site-nav .container.container > .wordmark { font-size: 1rem; letter-spacing: 0.02em; color: #fff; } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-phone { font-size: 0.78rem; letter-spacing: 0.08em; color: #dcd7ea; text-shadow: none; } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-pill { font-size: 0.78rem; color: #e6e0f5; border-color: rgba(192, 132, 252, 0.5); gap: 8px; } html.large-print .site-nav .nav-pill-i .ti { width: 22px; height: 22px; } html.large-print .site-nav .nav-links a { color: #f2eefa; } html.large-print .site-nav .nav-links a.active, html.large-print .site-nav .nav-links a[aria-current] { color: #e9d5ff; } html.large-print .txt-sizes { --sw: 48px; --sh: 48px; gap: 3px; padding: 3px; border-color: rgba(192, 132, 252, 0.5); } html.large-print .txt-size { color: #e6e0f5; } html.large-print .txt-size::before { inset: 0; } html.large-print .txt-size[aria-pressed="true"] { background: rgba(192, 132, 252, 0.3); box-shadow: inset 0 0 0 2px #d8b4fe; } html.large-print .txt-size-s span { font-size: 16px; } html.large-print .txt-size-m span { font-size: 21px; } html.large-print .txt-size-l span { font-size: 28px; } html.large-print .site-nav.site-nav .container.container > .star-ufo { --star-size: 40px; } html.large-print .site-nav.site-nav .container.container > .nav-toggle { width: 48px; height: 48px; } html.large-print .site-nav.site-nav .container.container > .nav-toggle span { width: 26px; height: 2.5px; } @media (min-width: 1240px) { html.large-print:root:root:root { --nav-h: 182px; } html.large-print .site-nav.site-nav { --pill-w: 176px; --pill-h: 48px; --lw: 168px; --rb-gap: 14px; } html.large-print .site-nav.site-nav .container.container { grid-template-rows: 50px 26px 56px 50px; } html.large-print .site-nav.site-nav .container.container > .nav-links > a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 4px; font-size: 0.9rem; letter-spacing: 0.02em; grid-row: 4; } html.large-print .site-nav.site-nav .container.container > .star-ufo { grid-row: 4; } html.large-print .site-nav.site-nav .container.container > .txt-sizes { grid-column: 3 / 8; grid-row: 3; justify-self: center; align-self: center; } html.large-print .site-nav.site-nav .container.container > .nav-links > a::after { bottom: 6px; } html.large-print .site-nav.site-nav::before { top: 104px; background: linear-gradient(90deg, rgba(192,132,252,0), rgba(192,132,252,0.45) 50%, rgba(192,132,252,0)); } } /* the capsule, for every large-mode width under 1240 (re-states ribbon.css's narrow rules) */ @media (max-width: 1239px) { html.large-print:root:root:root { --nav-h: 148px; } html.large-print .site-nav.site-nav { --pill-w: 1fr; --pill-h: 50px; --rb-gap: 6px; } html.large-print .site-nav.site-nav, html.large-print .site-nav.site-nav.scrolled { background: linear-gradient(180deg, rgba(5, 5, 8, 0.97) 0%, rgba(5, 5, 8, 0.9) 76%, rgba(5, 5, 8, 0) 100%); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } html.large-print .site-nav.site-nav::before { content: none; } html.large-print .site-nav.site-nav .container.container { height: calc(var(--nav-h) - 16px); margin-top: 0; background: rgba(8, 7, 16, 0.94); border: 1px solid rgba(192, 132, 252, 0.4); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); width: min(860px, calc(100% - 16px)); border-radius: 32px; padding: 6px 10px 10px; row-gap: 6px; grid-template-columns: 48px minmax(0, 1fr) auto minmax(0, 1fr) 48px; grid-template-rows: 62px 56px; } html.large-print .site-nav.site-nav .container.container > .nav-toggle { display: flex; grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 0 -4px; } html.large-print .site-nav.site-nav .container.container > .wordmark { grid-column: 2 / 5; grid-row: 1; align-self: start; padding-top: 6px; font-size: clamp(18px, 4.9vw, 23px); } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-phone { grid-column: 2 / 5; grid-row: 1; align-self: end; padding: 0 2px 6px; font-size: clamp(15px, 4.1vw, 18px); letter-spacing: 0.06em; } html.large-print .site-nav.site-nav .container.container > .star-ufo { grid-column: 5; grid-row: 1; justify-self: end; align-self: center; } /* pills either side of the planets, mirrored */ html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-pill { grid-row: 2; width: auto; height: 50px; padding: 0 10px; font-size: clamp(16px, 4.4vw, 19px); letter-spacing: 0.02em; } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-loop { grid-column: 1 / 3; justify-self: end; width: min(100%, 280px); } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-boost { grid-column: 4 / 6; justify-self: start; width: min(100%, 280px); } html.large-print .site-nav.site-nav .container.container > .txt-sizes { grid-column: 3; grid-row: 2; justify-self: center; align-self: center; --sw: 44px; } html.large-print .site-nav.site-nav .container.container > .nav-links { display: flex; position: fixed; top: calc(var(--nav-h) - 4px); left: 50%; right: auto; bottom: auto; width: min(460px, calc(100% - 24px)); flex-direction: column; align-items: center; gap: 0; padding: 10px 24px 18px; background: rgba(8, 7, 16, 0.98); border: 1px solid rgba(192, 132, 252, 0.4); border-radius: 28px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px); } html.large-print .site-nav.site-nav .container.container > .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } html.large-print .site-nav.site-nav .container.container > .nav-links > a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 8px 0; font-size: 1.05rem; letter-spacing: 0.04em; grid-row: auto; grid-column: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } html.large-print .site-nav.site-nav .container.container > .nav-links > a:last-child { border-bottom: 0; } html.large-print .site-nav.site-nav .container.container > .nav-links > a::after { bottom: 10px; } } /* phones: the pill icons step aside so both labels and the planets fit on one row */ @media (max-width: 519px) { html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-pill .nav-pill-i { display: none; } html.large-print .site-nav.site-nav .container.container > .nav-center > .nav-pill { padding: 0 6px; } } @media (max-width: 379px) { html.large-print .site-nav.site-nav .container.container > .txt-sizes { --sw: 38px; } } /* ===================================================================== 4 · charts and diagrams in large mode js/large-print.js prints each chart's own description underneath (.lp-summary) ===================================================================== */ .lp-summary { display: none; } html.large-print .lp-summary { display: block; max-width: var(--lp-measure); margin: 14px auto 6px; padding: 14px 18px; border-left: 3px solid #c084fc; border-radius: 0 12px 12px 0; background: rgba(192, 132, 252, 0.08); font-size: 1rem; line-height: 1.55; color: var(--lp-ink) !important; text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; } html.large-print .lp-summary-k { display: block; margin-bottom: 4px; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e9d5ff; } /* ===================================================================== 5 · page fixes in large mode ===================================================================== */ /* stand-alone links in lists of links (tables of contents, footers, crumbs) get 48px rows */ html.large-print :is(.lesson-toc nav, .footer-links, .lesson-footer-nav) a, html.large-print .site-footer a, html.large-print .lesson-crumb a { display: inline-flex; align-items: center; min-height: 48px; } html.large-print sup, html.large-print sup a, html.large-print .cite, html.large-print .cite a { opacity: 1 !important; } html.large-print sup { line-height: 0; } /* ---- cosmic college lessons ---- */ html.large-print .lesson-layout { grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { html.large-print .lesson-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } } html.large-print .lesson-toc nav { gap: 0 22px; } html.large-print .lesson-toc a { font-size: 0.9rem; line-height: 1.3; padding: 4px 0; } html.large-print .lesson-toc p { font-size: 0.85rem; color: #e9d5ff !important; } html.large-print .lesson-body, html.large-print .lesson-body:has(.diagram) { max-width: min(var(--lp-measure), 100%); } html.large-print .lesson-header .lede, html.large-print .lesson-crumb { font-size: 1rem; } /* ---- homepage (snap panels become a calm scrolling page) ---- */ html.large-print.home-snap { scroll-snap-type: none; } html.large-print .home-snap .snap-panel { height: auto; max-height: none; min-height: 100svh; overflow: visible; scroll-snap-align: none; scroll-snap-stop: normal; } html.large-print .home-snap .snap-panel-inner { overflow: visible; } html.large-print .snap-dots, html.large-print .snap-hint { display: none !important; } html.large-print .snap-media { inset: 0; } html.large-print .hero-slide:not(.is-active) { display: none; } html.large-print .booster-band { position: relative; inset: auto; } html.large-print .booster-q { font-size: 1rem; } html.large-print .booster-btn { min-height: 48px; font-size: 1rem; } html.large-print .snap-copy-world, html.large-print .snap-copy { padding-bottom: 56px; } /* countdown rows: title, then the big numbers, then the note, stacked */ html.large-print .panel-countdowns { max-width: min(var(--lp-measure), 100%); } html.large-print .panel-countdowns .cd-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "units" "meta"; row-gap: 8px; padding: 14px 18px; background: rgba(5, 5, 8, 0.86); } html.large-print .cd-title { font-size: 1rem; color: var(--lp-ink) !important; } html.large-print .cd-units { gap: 18px; } html.large-print .cd-u b { font-size: 1.5rem; font-weight: 400; color: #e9d5ff; } html.large-print .cd-u i { font-size: 0.8rem; color: var(--lp-soft); } html.large-print .cd-meta, html.large-print .cd-status { font-size: 0.9rem; } /* what we offer: one column on phones, two from 860px, full text (no clamps) */ html.large-print #what-we-offer .wwd-inner { width: min(1120px, calc(100% - 40px)); } html.large-print #what-we-offer .wwd-grid-4 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 18px; } @media (min-width: 860px) { html.large-print #what-we-offer .wwd-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html.large-print #what-we-offer .wwd-grid-4 .wwd-card { padding: 22px 22px 16px; gap: 10px; } html.large-print #what-we-offer .wwd-card .pillar-label, html.large-print #what-we-offer .wwd-head .section-label { font-size: 0.85rem; letter-spacing: 0.12em; } html.large-print #what-we-offer .wwd-card .pillar-title { font-size: 1.4rem; } html.large-print #what-we-offer .wwd-head .section-title { font-size: 2rem; } html.large-print #what-we-offer .wwd-card .pillar-lede, html.large-print #what-we-offer p.st-latest#st-latest, html.large-print #what-we-offer .wwd-lede { font-size: 1rem; line-height: 1.55; overflow: visible; display: block; } html.large-print #what-we-offer p.st-latest#st-latest .st-latest-date { display: inline; } html.large-print #what-we-offer .wwd-grid-4 .wwd-link { font-size: 1rem; min-height: 48px; display: inline-flex; align-items: center; color: #e9d5ff; } html.large-print *, html.large-print *::before { -webkit-line-clamp: none !important; line-clamp: none !important; } /* contact */ html.large-print .channel-label, html.large-print .tip-inline-k { font-size: 0.85rem; } html.large-print .channel-value { font-size: 1rem; } html.large-print .channel-hint { font-size: 0.85rem; } html.large-print .contact-form label { font-size: 0.9rem; } html.large-print .contact-form :is(input, textarea) { min-height: 56px; padding: 12px 14px; border-color: rgba(255, 255, 255, 0.45); } html.large-print .contact-form textarea { min-height: 160px; } html.large-print .site-disclosure, html.large-print .sources h2, html.large-print .sources li { font-size: 0.9rem !important; } /* ---- stellar times v2 ---- */ html.large-print .st2 { --mu: #dcd7ea; --mu2: #d0cae2; --hl: rgba(242, 242, 245, 0.24); --hl2: rgba(242, 242, 245, 0.34); font-weight: 400; } html.large-print .slk { --s-mu: #dcd7ea; --s-mu2: #d0cae2; --s-hl: rgba(242, 242, 245, 0.24); --s-hl2: rgba(242, 242, 245, 0.34); font-weight: 400; } html.large-print .toc { position: static; margin: 16px 0 6px; } html.large-print .toc ul { flex-wrap: wrap; border-radius: 28px; gap: 4px; padding: 6px; max-width: 100%; } html.large-print .toc a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 16px; font-size: 0.85rem; color: #ece8f6; text-decoration: none; } @media (max-width: 760px) { html.large-print .toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } html.large-print .toc a { white-space: normal; text-align: center; } } html.large-print .od .od-side, html.large-print .od .od-stat { opacity: 1 !important; filter: none !important; } html.large-print .od-l, html.large-print .od-arct { font-size: 17px; fill: #f2eefa; } html.large-print .stamp, html.large-print .tag { font-size: 0.72rem; padding: 2px 8px; } html.large-print .tag.done, html.large-print .stamp { color: #07070c !important; } /* ---- reflow safety for every page: nothing in the content runs off the side ---- */ html.large-print main :is(p, span, small, b, strong, em, i, a, li, td, th, dd, dt, cite, label, h1, h2, h3, h4, h5, figcaption, time) { white-space: normal !important; } html.large-print main :is(td, th) { overflow-wrap: break-word; } html.large-print main a { overflow-wrap: break-word; } html.large-print .home-snap .snap-panel { overflow: clip visible; } html.large-print .orbit-band { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px; } html.large-print .orbit-band .ob-meta { padding-left: 0; grid-column: auto; font-size: 0.9rem; } html.large-print .orbit-band .ob-label { font-size: 0.85rem; } /* clocks: digits and their unit letters are sized here (they rebuild every second) */ html.large-print .cd-u i { font-size: 0.87rem; } html.large-print .mc-clock { font-size: clamp(1.5rem, 7.4vw, 3.2rem) !important; overflow-wrap: anywhere; line-height: 1.15; } html.large-print .mc-clock small { font-size: max(20px, 0.42em); color: #dcd7ea; } html.large-print .rail-clock, html.large-print .rail-clock small { font-size: max(20px, 1em); } /* ---- orbital trail ---- the message box, menu, name box and setup cards keep their fixed sizes (nothing moves while text types out); in large print each fixed size is scaled with its text. */ html.large-print.large-print-ot body { overflow-y: auto; } html.large-print .ot { height: auto; min-height: 100svh; } html.large-print .ot-sound, html.large-print .ot-home { font-size: 16px; color: #e6dcf7; opacity: 1; min-height: 44px; padding: 10px 10px; } html.large-print .ot-node span { font-size: 13px; color: #e6dcf7; } html.large-print .ot-day, html.large-print .ot-partybtn { font-size: 16px; color: #f3e6c4; } html.large-print .ot-stat { font-size: 17px; } html.large-print .ot-stat small { font-size: 14px; color: #e6dcf7; } html.large-print .ot-crewm { font-size: 16px; } html.large-print .ot-crewrow figcaption { font-size: 15px; color: #e6dcf7; } html.large-print .ot-msg { --lines: 4; --lh: 30px; --fxh: 26px; padding: 14px 16px 10px; } html.large-print .ot-msg #ot-msg { font-size: 21px; } html.large-print .ot-msg .fx { font-size: 17px; color: #e6dcf7; } html.large-print .ot-menu { height: 244px; } html.large-print .ot-menu button { font-size: 20px; min-height: 52px; color: #e6dcf7; } html.large-print .ot-menu button small { font-size: 16px; color: #d6ccef; } html.large-print .ot-menu button.big { font-size: 26px; min-height: 72px; } @media (min-width: 760px) { html.large-print .ot { max-height: none; } html.large-print .ot-bottom { grid-template-columns: 1fr 400px; } html.large-print .ot-msg { --lines: 4; --lh: 38px; --fxh: 30px; padding: 18px 26px 12px; } html.large-print .ot-msg #ot-msg { font-size: 26px; } html.large-print .ot-msg .fx { font-size: 19px; } html.large-print .ot-menu { height: calc(4 * 38px + 30px + 30px); } html.large-print .ot-menu button { font-size: 22px; min-height: 48px; } html.large-print .ot-stat { font-size: 19px; } html.large-print .ot-crewm { font-size: 18px; } html.large-print .ot-node span { font-size: 15px; } } html.large-print .ot-setup-card { width: min(100%, 520px); } html.large-print .ot-setup-card .k, html.large-print .ot-card .k { font-size: 16px; color: #e6dcf7; } html.large-print .ot-setup-card h2 { font-size: 34px; } html.large-print .ot-setup-card .note, html.large-print .ot-line, html.large-print .ot-card .end-text, html.large-print .ot-log li, html.large-print .ot-partylist li.empty { font-size: 19px; color: #f3e6c4; } html.large-print .ot-input { max-width: 360px; font-size: 26px; min-height: 64px; padding: 14px 16px; } html.large-print .ot-chips, html.large-print .ot-next { max-width: 360px; } html.large-print .ot-chip { font-size: 19px; min-height: 52px; } html.large-print .ot-mini, html.large-print .ot-skip { font-size: 17px; min-height: 48px; } html.large-print .ot-step { grid-template-columns: 52px minmax(0, 1fr) 52px; max-width: 420px; } html.large-print .ot-step-body { height: 150px; } html.large-print .ot-step-body b { font-size: 23px; } html.large-print .ot-step-body span { font-size: 17px; height: 2.8em; color: #e6dcf7; } html.large-print .ot-btn { font-size: 19px; min-height: 52px; } html.large-print .ot-card .score, html.large-print .ot-card .meta, html.large-print .ot-card .url, html.large-print .ot-partylist em, html.large-print .ot-partylist span { font-size: 16px; color: #e6dcf7; } html.large-print .ot-partylist b { font-size: 21px; } html.large-print .ot-maplabel b { font-size: 22px; } html.large-print .ot-maplabel span { font-size: 16px; color: #e6dcf7; } html.large-print .ot-start { font-size: clamp(26px, 7vw, 38px); } /* --- round 3 fixes (audit) --- */ html.large-print .wordmark span { color: #c9a8ff; } html.large-print .rail-clock small, html.large-print .cd-u small { font-size: 18px; } html.large-print .fx-metric dt { font-size: 20px; line-height: 1.35; } html.large-print .fx-phase-pill { font-size: 19px; } html.large-print .vbadge { opacity: 1; } html.large-print .tip-chip { min-height: 48px; } html.large-print .tip-other { min-height: 48px; display: inline-flex; align-items: center; } html.large-print .lp-chip { height: auto; min-height: 48px; font-size: 19px; } html.large-print .edbar a, html.large-print .ed-foot a { display: inline-flex; align-items: center; min-height: 48px; } html.large-print .ot-node span { font-size: 16px; } html.large-print .ot-stat small { font-size: 17px; } html.large-print .ot-edition, html.large-print .ot-maplabel b { color: #ff9a72 !important; } html.large-print .fx-jump a, html.large-print .bw-back a { min-height: 48px; display: inline-flex; align-items: center; } /* stellar times v1: the version badge keeps its corner; the flag starts below it */ html.large-print .edhero { padding-top: calc(var(--nav-h, 72px) + 130px); } html.large-print .vbadge { top: calc(var(--nav-h, 72px) + 18px); } /* v1 countdown track: a fixed-geometry picture, so it keeps its own label sizes */ html.large-print .mc-track { height: 100px; } html.large-print .mc-track .nd { min-height: 0; min-width: 0; } html.large-print .mc-track .pl { font-size: 15px; color: #ececf4; } html.large-print .mc-track .now b { font-size: 15px; } html.large-print .mc-track .yr { font-size: 16px; color: #cfcfdc; top: 60px; } html.large-print .mc-track .now { height: 74px; } html.large-print .mc-tab tr.past td { opacity: 1; } @media (max-width: 899px) { html.large-print .mc-track .pl, html.large-print .mc-track .now b { display: none; } html.large-print .mc-track .yr { display: none; } html.large-print .mc-track .yr:nth-child(4n+2) { display: block; } html.large-print .mc-tab, html.large-print .mc-tab tbody { display: block; width: 100%; } html.large-print .mc-tab tr { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 0.4em; padding: 14px 0; border-bottom: 1px solid rgba(242, 242, 245, 0.16); } html.large-print .mc-tab tr.past { display: none; } html.large-print .mc.past .mc-tab tr.past { display: grid; } html.large-print .mc-tab tr:first-child { display: none; } html.large-print .mc-tab td { display: block; padding: 2px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; } html.large-print .mc-tab td.n { grid-row: span 4; } html.large-print .mc-tab td:nth-child(n+3) { grid-column: 2; } html.large-print .mc-tab td { width: auto !important; } } @media (max-width: 720px) { html.large-print .mc-tab tr, html.large-print .mc.past .mc-tab tr.past { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; } html.large-print .mc-tab tr:first-child, html.large-print .mc-tab tr.past { display: none; } html.large-print .mc-tab td:is(.n, .dt) { display: none; } html.large-print .mc-tab td:nth-child(2) { flex: 1 1 100%; } } html.large-print .mc-track .nd { min-height: 0 !important; min-width: 0 !important; } html.large-print .mc-track .pl, html.large-print .mc-track .pl * { white-space: nowrap !important; } html.large-print .mc-track .now b { display: none; } /* v1 scroll reveals: shown at once in large mode (same as its reduced-motion rule); tall blocks would otherwise never reach the reveal threshold */ html.large-print :is(.reveal, .fadeup, .chart svg rect) { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } @media (max-width: 619px) { html.large-print .fx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.large-print .fx-metric:last-child { grid-column: span 2; } } html.large-print .fx-metric dt { min-height: 0; hyphens: auto; } /* stellar times v2 countdown list: name on top, numbers underneath on narrow screens */ @media (max-width: 899px) { html.large-print .st2 .cd-row { grid-template-columns: minmax(0, 1fr); } html.large-print .st2 .cd-main { grid-column: 1; grid-row: 1; } html.large-print .st2 .cd-side { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; text-align: left; gap: 6px 16px; } html.large-print .st2 .cd-side .tag { flex-basis: auto; text-align: left; } } /* v2 "two timelines" tracks: fixed-geometry pictures; labels stay on one line and the quotes and captions around them no longer tuck in with negative margins */ html.large-print .st2 .track .tr-y, html.large-print .st2 .track .tr-now b, html.large-print .st2 .track .trm-t b { font-size: 15px; white-space: nowrap !important; color: #e4e4ee; } html.large-print .st2 .track { margin-bottom: 30px; } html.large-print .st2 :is(.tr-q, .tr-lab, .tr-lab.trm-lab, .tr-q.trm-q) { margin-bottom: 6px !important; } html.large-print .st2 .tr-q.trm-q { margin-top: 26px !important; } html.large-print .st2 .tr-q .tr-qc { font-size: 17px; color: #d8d8e4; } html.large-print .ot-node.end:first-child { justify-items: start; grid-template-columns: 26px; } html.large-print .ot-node.end:last-child { justify-items: end; grid-template-columns: 26px; } /* orbital trail while playing: the corner buttons sit in a taller strip at the bottom */ @media (max-width: 759px) { html.large-print body.playing .ot { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 760px) { html.large-print body.playing .ot { padding-bottom: 54px; } } @media (min-width: 760px) { html.large-print .ot-stat { font-size: 21px; } html.large-print .ot-crewm { font-size: 20px; } html.large-print .ot-node span { font-size: 17px; } html.large-print .ot-day, html.large-print .ot-partybtn { font-size: 18px; } } /* last few targets under 48px */ html.large-print :is(.back-link, .lp-back, .arch-links a, .gazette-dateline a, .st2 a[href="#countdown"]) { display: inline-flex; align-items: center; min-height: 48px; } @media (max-width: 600px) { html.large-print .st2 .dateline a[href="#countdown"] { flex-direction: column; justify-content: center; line-height: 1.3; padding-block: 4px; } } html.large-print .st2 .dateline a[href="#countdown"] { gap: 0.4em; } /* ===================================================================== 6 · normal (the default): phones get a little bigger and cleaner desktop is left as designed; js lifts only text under 12px or under 4.5:1. ===================================================================== */ @media (max-width: 600px) { html.size-normal { font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 48px targets for buttons, fields, chips and stand-alone links (not the ribbon, not the game) */ html.size-normal:not(.large-print-ot) :is(main, footer, .site-footer) :is(button, .btn, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, summary) { min-height: 48px; } html.size-normal :is(.toc a, .lesson-toc a, .footer-inner a, .site-footer a, .lesson-crumb a, .back-link, .lp-back, .arch-links a, .gazette-dateline a, .fx-jump a, .bw-back a, .edbar a, .ed-foot a, .wwd-link, .tip-chip, .tip-other, .lp-chip, .lesson-footer-nav a) { display: inline-flex; align-items: center; min-height: 48px; } html.size-normal .lp-chip { height: auto; } html.size-normal .mc-track .nd { min-height: 0 !important; } /* one clean column */ html.size-normal :is(.od-grid, .slk-grid, .lessons-grid, .ladder-rungs, .wwd-grid, .fx-metrics) { grid-template-columns: minmax(0, 1fr) !important; } html.size-normal .fx-metric:last-child { grid-column: auto; } html.size-normal main :is(td, th) { overflow-wrap: break-word; } } /* ===================================================================== 7 · small: a dense newspaper for power readers 15px root (body ~14-15px), 1.45 line height, tighter rhythm, ~90-character lines, two columns for long lists and card grids on wide screens. motion stays on. ===================================================================== */ html.small-print { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.small-print:not(.large-print-ot) body :is(p, li, dd, blockquote, figcaption, td, th) { line-height: 1.45; } html.small-print:not(.large-print-ot) main :is(h1, h2, h3) { line-height: 1.15; } html.small-print:not(.large-print-ot) main :is(p, ul, ol, blockquote, figure) { margin-block-end: 0.7em; } html.small-print:not(.large-print-ot) main :is(h2, h3) { margin-block: 1.1em 0.45em; } /* wider running text: ~90 characters */ html.small-print .lesson-body { max-width: 44em; } html.small-print .lesson-layout { gap: 32px; } html.small-print .note-paper .prose, html.small-print .note-paper { max-width: 48em; } html.small-print .bw-footnotes { max-width: 52em; } /* two columns where the page has natural lists or card grids, on wide screens */ @media (min-width: 1100px) { html.small-print :is(section.sources, .st-sources) :is(ol, ul) { column-count: 2; column-gap: 40px; } html.small-print :is(section.sources, .st-sources) li { break-inside: avoid; } html.small-print #what-we-offer .wwd-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } html.small-print .bw-footnotes { column-count: 2; column-gap: 40px; max-width: none; } } /* touch screens keep 44px targets */ @media (pointer: coarse) { html.small-print:not(.large-print-ot) :is(main, footer, .site-footer) :is(button, .btn, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, summary) { min-height: 44px; } html.small-print :is(.toc a, .lesson-toc a, .footer-inner a, .lesson-crumb a, .back-link, .lp-back, .arch-links a, .fx-jump a, .bw-back a, .tip-chip, .lp-chip, .lesson-footer-nav a) { display: inline-flex; align-items: center; min-height: 44px; } html.small-print .mc-track .nd { min-height: 0 !important; } } /* ===================================================================== 8 · small + normal: shared contrast and touch fixes ===================================================================== */ /* the purple buttons: white on #a855f7 is 3.96:1, so they take the deeper purple (5.4:1, 7:1 on hover) */ html:not(.large-print) body .btn-primary { background: #9333ea; } html:not(.large-print) body .btn-primary:hover { background: #7e22ce; } /* stellar times v2 explainer: the dimmed side stats stay readable (≥4.5:1) while still stepping back */ html:not(.large-print) .od:is(.ex-s1, .ex-s2) .od-side, html:not(.large-print) .od.ex-s3 .od-side .od-stat:not(:nth-child(2)) { opacity: 0.72; } html:not(.large-print) .od:is(.ex-s1, .ex-s2, .ex-s3) .od-side :is(.od-k, .od-s) { color: #c4c4d2; } html:not(.large-print) .od:is(.ex-s1, .ex-s2, .ex-s3) .od-side b[data-od-win] { color: #d8b4fe; } /* touch: invisible hit areas so ribbon controls reach 48px on phones (44px in small on touch screens) */ @media (max-width: 600px) { html.size-normal .site-nav .nav-pill, html.size-normal .site-nav .nav-toggle, html.size-normal .dateline a, html.size-normal .tip-link, html.size-normal .booster-btn, html.size-normal .snap-hint { position: relative; } html.size-normal .site-nav .nav-pill::after { content: ""; position: absolute; inset: -5px 0; } html.size-normal .site-nav .nav-toggle::after { content: ""; position: absolute; inset: -4px; } html.size-normal .site-nav .star-ufo::before { inset: -8px; } html.size-normal .dateline a::after, html.size-normal .tip-link::after, html.size-normal .booster-btn::after, html.size-normal .snap-hint::after { content: ""; position: absolute; inset: -10px 0; } html.size-normal .snap-dot { position: relative; } html.size-normal .snap-dot::before { content: ""; position: absolute; inset: -4px -16px; } } @media (pointer: coarse) { html.small-print .site-nav .nav-pill, html.small-print .site-nav .nav-toggle, html.small-print .dateline a, html.small-print .tip-link, html.small-print .booster-btn, html.small-print .snap-hint, html.small-print .tip-other { position: relative; } html.small-print .site-nav .nav-pill::after { content: ""; position: absolute; inset: -3px 0; } html.small-print .site-nav .nav-toggle::after { content: ""; position: absolute; inset: -2px; } html.small-print .dateline a::after, html.small-print .tip-link::after, html.small-print .booster-btn::after, html.small-print .snap-hint::after, html.small-print .tip-other::after { content: ""; position: absolute; inset: -12px 0; } html.small-print .snap-dot { position: relative; } html.small-print .snap-dot::before { content: ""; position: absolute; inset: -4px -16px; } } /* the live clocks' d/h/m/s units (re-rendered every second, so set here rather than by the script) */ html.small-print [data-clock] small { font-size: max(0.6em, 12px); } @media (max-width: 600px) { html.size-normal [data-clock] small { font-size: max(0.6em, 15px); } html.size-normal .tip-pill { position: relative; } html.size-normal .tip-pill::after { content: ""; position: absolute; inset: -4px 0; } } @media (pointer: coarse) { html.small-print .tip-pill { position: relative; } html.small-print .tip-pill::after { content: ""; position: absolute; inset: -2px 0; } } html.large-print [data-clock] small { font-size: max(0.6em, 16px); } html.small-print:not(.large-print-ot) main :is(p, li, dd, blockquote, figcaption, td) { font-weight: 400; } /* faint labels the script can't judge: the translucent badge over the v1 hero photo, and the source numbers */ html:not(.large-print) .vbadge .vh { color: rgba(216, 180, 254, 0.85) !important; } html:not(.large-print) .vbadge .vf.vd { color: #d8b4fe !important; } html:not(.large-print) sup.cite a { opacity: 0.9; }