/* ============================================================ sled-theme.css — Stellar Learning Experience Designer One file. Two size sets. WCAG 2.1 AA. HOW TO USE - Put class "sled-theme" on to get the look. - Add "sled-app" for app screens (tighter text, smaller gaps, full width). - Leave it off for document pages (reading sizes, 800px centred column). (You can also write "sled-doc" to be explicit; it matches the default.) COLOUR RULE FOR ACCESSIBILITY - Orange (#FF7B33) is for FILLS and LINES (nav bar, buttons, borders) and for LARGE display text only. It is too light for small text on a light background. - For text that should look orange on white, use the dark orange #BF5300 (--sled-orange-text). - Where the background is not white (the grey table header), small text is BLACK, and the brand orange shows up as a line instead. See SCB-Accessibility-Specs-v1 for the full contrast table. ============================================================ */ /* ---- the app's three faces, self-hosted (assets/fonts) ---- Nothing is fetched over the network: a page renders the same on the tenth run as the first, which is what makes screenshot comparison trustworthy. These are the same Google files the @import used to pull — the latin subset, variable where Google ships variable, so one file covers 400-700. Playfair italic is not among them: it never was, so in a display heading stays browser-synthesised exactly as before. */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap; src:url('assets/fonts/playfair-display-var.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:normal;font-weight:400 700;font-display:swap; src:url('assets/fonts/raleway-var.woff2') format('woff2');} @font-face{font-family:'Raleway';font-style:italic;font-weight:400 700;font-display:swap; src:url('assets/fonts/raleway-italic-var.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');} :root{ --sled-stage-width:980px; /* one container width for every phase — change here, all screens follow */ --sled-arrival-cap-top:153.98px; /* the shared arrival line: viewport Y where every screen's first text starts its capital letters, measured optically from the question-screen kicker at rest (nav bottom 109.5 + 40px nav margin + 4.48px cap offset, 1280×900, entry animation settled). The kicker defines this line and does not move; other screens meet it. Recorded for reference — the working correction lives on .sled-threshold h1. */ /* ---- brand and fixed colours ---- */ --sled-orange:#FF7B33; /* secondary brand: fills and lines (nav, buttons, borders), large display */ --sled-orange-text:#BF5300; /* fresh orange for SMALL text on white — passes AA (~4.7:1). Fills/large/status use #DC5900 (--sled-status-not-started). */ --sled-btn-ledge:color-mix(in srgb, var(--sled-orange) 62%, #000); /* darker orange ledge under the raised button */ --sled-black:#000000; /* dominant brand: hero and footer backgrounds */ --sled-accent:#CE6222; /* tertiary: rules, dividers, large display only (~3.9:1 — passes AA at large sizes). For small orange text on white use --sled-orange-text (#BF5300). */ --sled-white:#FFFFFF; --sled-page:#FFFFFF; /* V3: white app page; cards lift off it via their #e7e7e7 borders */ --sled-grey:#E1E1E1; /* table header row */ --sled-neutral:#E7E7E7; /* tables, neutral callouts, neutral card */ --sled-line:#CCCCCC; /* thin lines inside parts */ --sled-caption:#1E1E1E; /* image caption text */ /* ---- light tints: real values, with the auto colour-mix as the method ---- */ --sled-tint-secondary:#FFF1E9; /* V3 secondary tint */ --sled-tint-dominant:#F0F0F0; /* V3 dominant tint */ --sled-tint-tertiary:#FDF0E8; /* V3 tertiary tint */ /* ---- text colour on brand backgrounds (the auto white/black rule, set to the readable choice) ---- */ --sled-on-orange:#000000; /* black reads best on orange (about 8:1) */ --sled-on-black:#FFFFFF; /* ---- app layer: muted text + status traffic light (used by app screens, not documents) ---- */ --sled-ink-soft:#5E5E5E; /* muted secondary text — about 6.5:1 on white */ /* ---- status colours (Handoff Note 5) — separated from brand ---- */ --sled-status-not-started:#DC5900; /* orange — dots, fills, large only */ --sled-status-pending:#EAA444; /* amber */ --sled-status-accomplished:#318C22; /* green */ --sled-status-not-started-dark:#FF7B33; /* dark theme placeholders — not active */ --sled-status-pending-dark:#FCD344; --sled-status-accomplished-dark:#1EC655; --sled-border-card:#C8C8C8; /* darker card/callout border, distinct from --sled-line */ --sled-card:#FFFFFF; /* card background */ --sled-shadow-card:0 1px 2px rgba(30,22,12,.04),0 4px 10px rgba(30,22,12,.05); /* ---- traffic-light aliases now point at the status colours above ---- */ --sled-ready:var(--sled-status-accomplished); --sled-ready-text:#2A7D1C; /* done / ready (fill green #318C22, text #2A7D1C ~5.2:1 AA) */ --sled-doing:var(--sled-status-pending); --sled-doing-text:#A85F00; /* in progress */ --sled-not:var(--sled-line); --sled-not-text:var(--sled-orange-text); /* not started: grey dot, orange text */ --sled-ring-gap:rgba(220,89,0,0.3); /* orange glow on the current tracker stop */ /* ---- fonts ---- */ --sled-font-display:'Playfair Display', Georgia, 'Times New Roman', serif; --sled-font-text:'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ---- corners ---- */ --sled-radius:15px; /* ===================== SIZE SET: READING (document) — default ===================== */ --sled-w:800px; /* centred reading column */ --sled-pad:24px; /* side padding */ --sled-h1:40px; --sled-h2:36px; --sled-h3:24px; --sled-eyebrow:14px; --sled-herosub:20px; --sled-body:22px; --sled-util:18px; --sled-nav:13px; --sled-num:88px; --sled-numlabel:16px; --sled-caption-size:14px; --sled-lh-head:1.2; --sled-lh-body:1.3; --sled-stack:50px; /* heading-to-paragraph and paragraph-to-paragraph */ --sled-side:50px; /* gap between side-by-side things */ --sled-sec-top:50px; --sled-sec-bottom:50px; /* V3: standard section padding 50/50; dividers sit in the 100px gap */ } @media (max-width:680px){ :root{ --sled-h1:32px; --sled-h2:28px; --sled-h3:20px; --sled-herosub:16px; --sled-body:18px; --sled-util:16px; --sled-num:64px; --sled-numlabel:14px; } } /* ===================== SIZE SET: APP (compact) — add class "sled-app" ===================== */ .sled-app{ --sled-w:none; /* full width allowed */ --sled-pad:20px; /* App type scale: base 16px = 1rem, each step is 1.125x the one below it. Sizes are in rem so they follow the reader's own browser text-size setting. The px in each comment is what you get at the 16px default. */ --sled-h1:1.802rem; /* 28.8px — step +5 — screen title */ --sled-h2:1.424rem; /* 22.8px — step +3 — big heading / card title */ --sled-h3:1.266rem; /* 20.3px — step +2 — section / unit title */ --sled-herosub:1.125rem; /* 18.0px — step +1 — lead line / card description */ --sled-body:1rem; /* 16.0px — step 0 — base size (the readable floor) */ --sled-util:0.889rem; /* 14.2px — step -1 — secondary text, status labels */ --sled-eyebrow:0.79rem; /* 12.6px — step -2 — small caps labels, kickers */ --sled-nav:0.889rem; /* 14.2px — step -1 */ --sled-num:3rem; /* 48.0px — featured stat, a chosen display size off the ladder */ --sled-numlabel:0.79rem; /* 12.6px */ --sled-caption-size:0.79rem; /* 12.6px */ --sled-lh-body:1.5; /* roomy lines for 16px text — matches the accessibility spec */ --sled-stack:16px; --sled-side:20px; --sled-sec-top:28px; --sled-sec-bottom:40px; } /* app screens sit on the warm off-white page; white cards lift off it */ .sled-app{ background:var(--sled-page); } @media (max-width:680px){ .sled-app{ /* body stays on the 16px floor; only the big headings ease down a step */ --sled-h1:1.602rem; /* 25.6px */ --sled-h2:1.266rem; /* 20.3px */ } } /* ===================== BASE ===================== */ .sled-theme{ margin:0; background:var(--sled-white); color:var(--sled-black); font-family:var(--sled-font-text); font-weight:500; /* Raleway Medium is the body weight */ font-size:var(--sled-body); line-height:var(--sled-lh-body); -webkit-font-smoothing:antialiased; } .sled-theme *{ box-sizing:border-box; } /* visible keyboard focus on everything you can click or tab to */ .sled-theme a:focus-visible, .sled-theme button:focus-visible, .sled-theme summary:focus-visible, .sled-theme [tabindex]:focus-visible{ outline:3px solid var(--sled-orange-text); outline-offset:2px; border-radius:3px; } /* text fields get the same visible dark-orange focus ring */ .sled-theme input[type=text]:focus, .sled-theme input[type=email]:focus, .sled-theme input[type=search]:focus, .sled-theme input:not([type]):focus, .sled-theme textarea:focus{ outline:3px solid var(--sled-orange-text); outline-offset:2px; } /* the centred reading column; full width in app mode because --sled-w is none */ .sled-container{ max-width:var(--sled-w); margin:0 auto; padding-left:var(--sled-pad); padding-right:var(--sled-pad); } /* ===================== TYPE ===================== */ .sled-theme h1{ font-family:var(--sled-font-display); font-weight:700; font-size:var(--sled-h1); line-height:var(--sled-lh-head); color:var(--sled-black); margin:0 0 var(--sled-stack); } .sled-theme h2{ font-family:var(--sled-font-text); font-weight:400; font-size:var(--sled-h2); line-height:var(--sled-lh-head); color:var(--sled-black); margin:0 0 var(--sled-stack); } .sled-theme h3{ font-family:var(--sled-font-text); font-weight:700; font-size:var(--sled-h3); line-height:1.3; text-transform:uppercase; color:var(--sled-orange-text); /* dark orange so it passes at small app size too */ margin:0 0 var(--sled-stack); } .sled-theme p{ margin:0 0 var(--sled-stack); } .sled-theme p:last-child{ margin-bottom:0; } .sled-theme b, .sled-theme strong{ font-weight:700; } .sled-theme i, .sled-theme em{ font-style:italic; } .sled-eyebrow{ display:block; font-family:var(--sled-font-text); font-weight:700; font-size:var(--sled-eyebrow); letter-spacing:.12em; text-transform:uppercase; color:var(--sled-orange-text); margin:0 0 12px; /* dark orange on white; hero eyebrow stays orange below */ } .sled-herosub{ font-weight:500; font-size:var(--sled-herosub); line-height:1.4; } .sled-util{ font-size:var(--sled-util); line-height:var(--sled-lh-body); } /* links — dark orange, bold and underlined (underline is a non-colour cue) */ .sled-theme a{ color:var(--sled-orange-text); font-weight:700; text-decoration:underline; } .sled-theme a:hover{ color:color-mix(in srgb, var(--sled-orange-text) 85%, #000); } /* anchor-based buttons and pills are never underlined — they match their