/* ============================================================================ tv-10foot.css — EducationOS "10-foot" TV readability layer ---------------------------------------------------------------------------- PURPOSE Make the EXISTING EducationOS web UI comfortably readable and operable from a couch (~3 m away) on a TV, driven by a remote. This is a SIZE and LEGIBILITY pass only — NOT a redesign and NOT a re-skin. ACTIVATION / INERTNESS A companion JS engine adds the class `tv-mode` to the element only when running on a TV. EVERY rule below is scoped under `html.tv-mode`, so without that class this file is 100% inert and changes nothing. RULES OBSERVED (do not relax) - No @import, no external URLs, no web-font loads, no images. Pure CSS. - Conservative + additive: adjusts ONLY font-size, min tap-target size (min-height / padding), line-height, spacing, and TV overscan padding. - Never touches position / display / float / flex / grid on any container, so the app's layout structure is preserved. - No recolouring of components or brand. Brand tokens (teal #0A7D8F, coral #E87D56, amber #F5A623) are referenced only as documentation. - The focus ring is rendered elsewhere via `.tv-focus` (amber outline + box-shadow). This file does NOT override or remove it; it only adds a subtle scale/transition that does not fight the ring. - Fonts in use (Geist sans, Fraunces display) are already loaded; not referenced or loaded here. ============================================================================ */ /* --------------------------------------------------------------------------- 1. ROOT TYPE SCALE Bump the root font-size so every rem-based measurement in the app grows proportionally for couch viewing. This is the single biggest lever. --------------------------------------------------------------------------- */ html.tv-mode { font-size: 20px; /* default browsers ~16px -> +25% everywhere */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* --------------------------------------------------------------------------- 2. BODY: base reading size, line-height, and TV OVERSCAN safety padding Many TVs crop the outer edge of the picture. A modest inner pad keeps content off the danger zone. Kept small to avoid obvious double-padding against the app's own container gutters. --------------------------------------------------------------------------- */ html.tv-mode body { font-size: 1.15rem; /* comfortable base body copy */ line-height: 1.55; /* airier lines read better from afar */ padding: 24px 32px; /* overscan safety: 24px vertical / 32px horiz */ } /* --------------------------------------------------------------------------- 3. TEXT ELEMENTS: readable paragraphs and a sensible heading ladder Larger headings + relaxed line-height only. No colour, weight, or family changes so the brand typography is untouched. --------------------------------------------------------------------------- */ html.tv-mode p, html.tv-mode li, html.tv-mode dd, html.tv-mode dt, html.tv-mode td, html.tv-mode th, html.tv-mode label, html.tv-mode span { line-height: 1.55; } html.tv-mode p, html.tv-mode li { font-size: 1.15rem; } html.tv-mode h1 { font-size: 2.6rem; line-height: 1.2; } html.tv-mode h2 { font-size: 2.05rem; line-height: 1.25; } html.tv-mode h3 { font-size: 1.7rem; line-height: 1.3; } html.tv-mode h4 { font-size: 1.4rem; line-height: 1.35; } html.tv-mode h5 { font-size: 1.2rem; line-height: 1.4; } html.tv-mode h6 { font-size: 1.1rem; line-height: 1.4; } /* Small print (captions, hints, badges) — nudge up so it isn't lost on a TV. */ html.tv-mode small, html.tv-mode .caption, html.tv-mode .hint, html.tv-mode .subtitle { font-size: 1rem; } /* --------------------------------------------------------------------------- 4. INTERACTIVE ELEMENTS: comfortable tap / d-pad targets Enforce a generous minimum height and padding so remote-driven focus lands on obviously-sized controls. Only min-height, padding and font-size are set — no display/position/flex changes — so existing layouts stay intact. --------------------------------------------------------------------------- */ html.tv-mode button, html.tv-mode a, html.tv-mode input, html.tv-mode select, html.tv-mode textarea, html.tv-mode [role="button"], html.tv-mode .btn, html.tv-mode .button, html.tv-mode .tile, html.tv-mode .card { font-size: 1.1rem; line-height: 1.4; } /* Buttons and button-like controls: solid min tap target (~52px). */ html.tv-mode button, html.tv-mode [role="button"], html.tv-mode .btn, html.tv-mode .button, html.tv-mode input[type="button"], html.tv-mode input[type="submit"], html.tv-mode input[type="reset"] { min-height: 52px; padding: 12px 20px; } /* Text-entry controls: a touch taller for legibility, roomy inner padding. */ html.tv-mode input, html.tv-mode select, html.tv-mode textarea { min-height: 48px; padding: 12px 16px; } /* Checkboxes / radios are min-height-agnostic; scale the control box instead. */ html.tv-mode input[type="checkbox"], html.tv-mode input[type="radio"] { min-height: 0; /* undo the generic input min-height above */ width: 1.5rem; height: 1.5rem; } /* Standalone links (nav items, list actions): keep them reachable, but do not force a min-height on inline links inside running prose. */ html.tv-mode a { padding: 2px 4px; /* small hit-area cushion, layout-neutral */ } html.tv-mode nav a, html.tv-mode .menu a, html.tv-mode .nav-item, html.tv-mode [role="menuitem"] { min-height: 48px; padding: 12px 16px; } /* Cards / tiles: breathing room so content and focus ring aren't cramped. */ html.tv-mode .tile, html.tv-mode .card { padding: 20px; } /* --------------------------------------------------------------------------- 5. SPACING: gentle vertical rhythm between blocks so groups read cleanly from a distance. Margins only — never layout mode. --------------------------------------------------------------------------- */ html.tv-mode p, html.tv-mode ul, html.tv-mode ol, html.tv-mode figure, html.tv-mode table { margin-top: 0.85em; margin-bottom: 0.85em; } html.tv-mode li { margin-bottom: 0.4em; } html.tv-mode h1, html.tv-mode h2, html.tv-mode h3 { margin-top: 0.9em; margin-bottom: 0.5em; } /* --------------------------------------------------------------------------- 6. FOCUS AFFORDANCE (companion of the engine's ring — do NOT fight it) The `.tv-focus` amber outline + box-shadow is owned by the JS engine. Here we only add a subtle lift + smooth transition so the focused element feels responsive. No outline / box-shadow / colour is set, so the ring wins. --------------------------------------------------------------------------- */ html.tv-mode .tv-focus { transform: scale(1.02); transition: transform 120ms ease-out; } /* Give the scale room to grow without overlapping neighbours awkwardly. */ html.tv-mode .tv-focus { transform-origin: center; }