/* ============================================================================= hc-ui.css: the Home Campus app design system (redesign plan 0.1, section 4) ----------------------------------------------------------------------------- Plain CSS, no build step, no framework. Load it on /app/ pages (AppBase.html) and on learn page v2. Everything is prefixed hc- so it cannot clash with the old homecampus.css, Flat UI or Bootstrap classes. THREE LAYERS (plan 4): 1. World .hc-world illustrated scene behind everything (per world) 2. Chrome .hc-glass translucent glass: navigation, cards, bubbles 3. Paper .hc-paper solid, high-contrast: questions, workspace, text Maths never sits on blur. Text that matters sits on paper. MODES AND THEMES: put both attributes on the same element (normally ): With no data-theme the page follows the system (prefers-color-scheme). With no data-mode the page is kid. The style guide sets both on panels. REDUCED GLASS: frosted solid surfaces, no blur, when backdrop-filter is not supported, on prefers-reduced-transparency, on prefers-reduced-motion, or when the class .reduced-glass is on (AppBase sets it when navigator.deviceMemory <= 4 or the child's setting turns glass off). CONTRAST (WCAG 2.x relative luminance; AA needs 4.5:1 for normal text, 3:1 for large text and UI parts). Measured for every token pair used for text: pair kid-L kid-D teen-L teen-D par-L par-D ink / paper 16.1 14.1 16.4 14.9 16.3 14.3 ink / paper-2 15.0 12.6 15.1 13.7 15.3 13.3 ink-2 / paper 7.7 9.6 7.5 9.6 7.6 9.1 ink-3 / paper 5.4 6.8 5.6 6.6 5.6 6.3 accent-ink / paper 7.9 7.5 6.7 8.8 7.8 7.7 good-ink / paper 5.9 9.9 6.3 9.6 6.3 8.8 bad-ink / paper 6.6 7.8 6.7 8.2 7.0 8.1 sun-ink / paper 6.2 10.8 6.5 10.6 6.8 10.1 on-accent / accent 6.3 4.9 5.4 5.2 6.7 4.8 ink / accent-soft 13.4 11.8 14.1 10.8 13.9 12.0 accent-ink / accent-soft 6.6 6.3 5.8 6.4 6.6 6.4 good-ink / good-soft 5.1 7.7 5.4 7.6 5.4 7.4 bad-ink / bad-soft 5.5 7.0 5.6 7.2 5.9 7.5 ink / sun-soft 14.5 11.4 14.5 12.1 14.4 12.4 sun-ink / sun-soft 5.5 8.7 5.7 8.7 6.0 8.8 glass-ink / frost 14.3 12.4 14.5 13.5 14.9 13.7 glass-ink-2 / frost 8.1 9.1 8.1 9.3 8.0 9.3 glass-ink / glass* 9.5 7.6 8.7 8.7 15.0 13.7 glass-ink-2 / glass* 5.4 5.6 4.9 6.0 8.1 9.3 glass-ink / glass-strong* 12.2 10.6 12.0 11.9 15.7 14.1 * glass = the tint composited over each world colour (sky, glow, hills, accents) and the lowest ratio taken: the worst case, before blur. Measured in Chromium from the tokens by style-guide.html ("Contrast"), which recomputes them live; every pair passes AA in every variant. Maths text uses --hc-ink on --hc-paper: at least 14:1 in every mode. ============================================================================= */ /* ----------------------------------------------------------------------------- 0. Font "HC Rounded" is Nunito (SIL Open Font License 1.1, fonts/OFL-Nunito.txt), self-hosted so no child's screen asks Google for anything (plan 4, 8.4). Variable weight 200 to 1000, Latin and Latin Extended, as Google Fonts serves them (fetched 22 October 2026). ----------------------------------------------------------------------------- */ @font-face { font-family: "HC Rounded"; src: url("fonts/hc-rounded-latin-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "HC Rounded"; src: url("fonts/hc-rounded-latin-ext-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ----------------------------------------------------------------------------- 1. Tokens that do not depend on colour ----------------------------------------------------------------------------- */ :root { /* Type */ --hc-font: "HC Rounded", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hc-font-maths: var(--hc-font); /* Spacing: steps of 4 and 8 */ --hc-s-1: 4px; --hc-s-2: 8px; --hc-s-3: 12px; --hc-s-4: 16px; --hc-s-5: 24px; --hc-s-6: 32px; --hc-s-7: 48px; --hc-s-8: 64px; --hc-s-9: 96px; /* Glass */ --hc-glass-blur: 22px; --hc-glass-sat: 175%; /* Motion. Durations, then curves. --hc-ease-spring overshoots a little (a damped spring sampled into linear(), see @supports below). */ --hc-dur-1: 120ms; --hc-dur-2: 220ms; --hc-dur-3: 380ms; --hc-dur-4: 620ms; --hc-ease-out: cubic-bezier(.22, 1, .36, 1); --hc-ease-in-out: cubic-bezier(.65, 0, .35, 1); --hc-ease-spring: cubic-bezier(.34, 1.45, .64, 1); --hc-ease-spring-soft: cubic-bezier(.3, 1.2, .6, 1); /* Layout */ --hc-nav-w: 92px; --hc-content-max: 1160px; /* Belts: the same in every mode and theme */ --hc-belt-white: #F7F8FB; --hc-belt-white-edge: #A9B1C6; --hc-belt-yellow: #FFC928; --hc-belt-yellow-edge: #B98500; --hc-belt-green: #22B06B; --hc-belt-green-edge: #127A47; --hc-belt-black: #1C1F2A; --hc-belt-black-edge: #000000; } /* The brand and the grades: the same in every mode and theme (the Home Campus green, COLOUR.md 1; the owner, 27 October 2026). Purple only for Secondary 1, blue only for links and P6. */ :root { --hc-brand-green: #43972A; /* today's site: the page ground, the buttons */ --hc-brand-green-deep: #2F7D22; /* the same green, deep enough for white text (5.2) */ --hc-brand-forest: #205012; /* the footer's foot */ --hc-brand-leaf: #A5CF9E; /* the footer's light top */ --hc-brand-amber: #F1B844; /* P3's amber: the Start free button on green */ --hc-link: #3D6CA3; /* today's link blue #4678B2, one step deeper for AA on the green wash */ --hc-grade-p3: #F1B844; --hc-grade-p4: #E2743B; --hc-grade-p5: #C52D1E; --hc-grade-p6: #569BF3; --hc-grade-s1: #8E3D92; } /* 1b. A grade's colour set (COLOUR.md 2): put data-grade="p3" ... "s1" (any case; "p7", the data's name for Secondary 1, is S1) on anything that belongs to one grade (a grade card, a grade page's head and chapters, a header chip, a child's card, a map world). --hc-gc the grade colour: edges, borders --hc-gc-head a solid head behind large text (20px bold and up, 3:1) --hc-gc-band-1/2 a solid area behind any text, with --hc-gc-on / --hc-gc-on-2 --hc-gc-ink grade-coloured text on paper or on --hc-gc-soft (changes in dark mode) --hc-gc-deep the same ink, fixed in dark mode too (a white chip inside a head) --hc-gc-soft a pale tint (changes in dark mode) */ [data-grade="p3" i] { --hc-gc-deep: #8A5A00; --hc-gc: #F1B844; --hc-gc-head: #F1B844; --hc-gc-band-1: #F1B844; --hc-gc-band-2: #E8A92A; --hc-gc-on: #2A1700; --hc-gc-on-2: #4A3200; --hc-gc-ink: #8A5A00; --hc-gc-soft: #FDF3DD; } [data-grade="p4" i] { --hc-gc-deep: #A84A18; --hc-gc: #E2743B; --hc-gc-head: #E2743B; --hc-gc-band-1: #C0561F; --hc-gc-band-2: #A84A18; --hc-gc-on: #FFFFFF; --hc-gc-on-2: #FFFFFF; --hc-gc-ink: #A84A18; --hc-gc-soft: #FBECE4; } [data-grade="p5" i] { --hc-gc-deep: #B02818; --hc-gc: #C52D1E; --hc-gc-head: #C52D1E; --hc-gc-band-1: #C52D1E; --hc-gc-band-2: #A3241A; --hc-gc-on: #FFFFFF; --hc-gc-on-2: rgba(255, 255, 255, .94); --hc-gc-ink: #B02818; --hc-gc-soft: #F8E4E1; } [data-grade="p6" i] { --hc-gc-deep: #2A67BA; --hc-gc: #569BF3; --hc-gc-head: #4A8DE8; --hc-gc-band-1: #2F74D0; --hc-gc-band-2: #245FB0; --hc-gc-on: #FFFFFF; --hc-gc-on-2: #FFFFFF; --hc-gc-ink: #2A67BA; --hc-gc-soft: #E7F1FD; } [data-grade="s1" i], [data-grade="p7" i] { --hc-gc-deep: #8E3D92; --hc-gc: #8E3D92; --hc-gc-head: #8E3D92; --hc-gc-band-1: #8E3D92; --hc-gc-band-2: #6F2E73; --hc-gc-on: #FFFFFF; --hc-gc-on-2: rgba(255, 255, 255, .92); --hc-gc-ink: #8E3D92; --hc-gc-soft: #F2E7F2; } /* Dark: heads and bands keep their colours (they carry their own text); the ink and the tint change for dark paper */ :root[data-theme="dark"] [data-grade="p3" i], [data-theme="dark"][data-grade="p3" i] { --hc-gc-ink: #F5C869; --hc-gc-soft: #3A3018; } :root[data-theme="dark"] [data-grade="p4" i], [data-theme="dark"][data-grade="p4" i] { --hc-gc-ink: #F29A6A; --hc-gc-soft: #3D2418; } :root[data-theme="dark"] [data-grade="p5" i], [data-theme="dark"][data-grade="p5" i] { --hc-gc-ink: #F07A6C; --hc-gc-soft: #3D1C19; } :root[data-theme="dark"] [data-grade="p6" i], [data-theme="dark"][data-grade="p6" i] { --hc-gc-ink: #8DBDFA; --hc-gc-soft: #1A2C45; } :root[data-theme="dark"] :is([data-grade="s1" i], [data-grade="p7" i]), [data-theme="dark"]:is([data-grade="s1" i], [data-grade="p7" i]) { --hc-gc-ink: #D49AD6; --hc-gc-soft: #33203A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-grade="p3" i] { --hc-gc-ink: #F5C869; --hc-gc-soft: #3A3018; } :root:not([data-theme="light"]) [data-grade="p4" i] { --hc-gc-ink: #F29A6A; --hc-gc-soft: #3D2418; } :root:not([data-theme="light"]) [data-grade="p5" i] { --hc-gc-ink: #F07A6C; --hc-gc-soft: #3D1C19; } :root:not([data-theme="light"]) [data-grade="p6" i] { --hc-gc-ink: #8DBDFA; --hc-gc-soft: #1A2C45; } :root:not([data-theme="light"]) :is([data-grade="s1" i], [data-grade="p7" i]) { --hc-gc-ink: #D49AD6; --hc-gc-soft: #33203A; } } @supports (transition-timing-function: linear(0, 1)) { :root { --hc-ease-spring: linear(0, 0.066, 0.225, 0.424, 0.624, 0.801, 0.94, 1.038, 1.097, 1.123, 1.125, 1.11, 1.088, 1.062, 1.038, 1.017, 1.002, 0.992, 0.986, 0.984, 0.985, 0.987, 0.99, 0.994, 0.996, 0.999, 1); --hc-ease-spring-soft: linear(0, 0.044, 0.149, 0.283, 0.424, 0.557, 0.676, 0.776, 0.855, 0.916, 0.961, 0.991, 1.011, 1.022, 1.027, 1.028, 1.027, 1.023, 1.019, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1.001, 1); } } /* ----------------------------------------------------------------------------- 2. Mode tokens (shape and size): kid bright and round, teen calmer, parent plain ----------------------------------------------------------------------------- */ :root, [data-mode="kid"] { --hc-fs-base: 17px; --hc-weight-head: 800; --hc-weight-strong: 700; --hc-r-xs: 10px; --hc-r-sm: 14px; --hc-r-md: 20px; --hc-r-lg: 28px; --hc-r-xl: 36px; --hc-press: .95; } [data-mode="teen"] { --hc-fs-base: 16px; --hc-weight-head: 700; --hc-weight-strong: 650; --hc-r-xs: 8px; --hc-r-sm: 12px; --hc-r-md: 16px; --hc-r-lg: 22px; --hc-r-xl: 28px; --hc-press: .97; } [data-mode="parent"] { --hc-fs-base: 16px; --hc-weight-head: 700; --hc-weight-strong: 600; --hc-r-xs: 6px; --hc-r-sm: 10px; --hc-r-md: 14px; --hc-r-lg: 18px; --hc-r-xl: 24px; --hc-press: .98; } /* ----------------------------------------------------------------------------- 3. Colour tokens: one block per mode and theme. Light blocks first; dark blocks twice (explicit data-theme, then the system preference). Keep the two dark copies identical. ----------------------------------------------------------------------------- */ /* Kid, light (also the default) */ :root, [data-mode="kid"] { color-scheme: light; --hc-belt-black-edge: #000000; --hc-bg: #B9D9FF; --hc-world-sky-1: #6EC6FF; --hc-world-sky-2: #C9B8FF; --hc-world-glow: #FFF0B8; --hc-world-hill-1: #8FE0BF; --hc-world-hill-2: #2FB58E; --hc-world-hill-3: #168A82; --hc-world-accent: #FFD166; --hc-world-accent-2: #FF8FB1; --hc-world-cloud: rgba(255, 255, 255, .78); --hc-paper: #FFFFFF; --hc-paper-2: #F5F7FD; --hc-paper-line: #DCE2F0; --hc-ink: #13203F; --hc-ink-2: #44527A; --hc-ink-3: #5D6A8C; --hc-accent: #2A821E; --hc-accent-2: #34892A; --hc-on-accent: #FFFFFF; --hc-accent-ink: #23701A; --hc-accent-soft: #E2F4D9; --hc-good: #14A06E; --hc-good-ink: #0A7350; --hc-good-soft: #DCF5EA; --hc-bad: #E0436A; --hc-bad-ink: #B21F47; --hc-bad-soft: #FDE5EB; --hc-sun: #FFB020; --hc-sun-ink: #8A5600; --hc-sun-soft: #FFF2D6; --hc-focus: #1F6BFF; --hc-glass-tint: rgba(255, 255, 255, .60); --hc-glass-tint-strong: rgba(255, 255, 255, .78); --hc-glass-edge: rgba(255, 255, 255, .95); --hc-glass-edge-2: rgba(255, 255, 255, .30); --hc-glass-sheen: rgba(255, 255, 255, .55); --hc-glass-ink: #13203F; --hc-glass-ink-2: #3A4770; --hc-frost: #EEF2FB; --hc-shadow: 34, 30, 90; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #2F7D22; --hc-band-2: #2B731F; --hc-band-3: #205012; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .94); --hc-band-hi: #FFF2CC; --hc-tint-a: #E2F3D9; --hc-tint-b: #FFF3D6; --hc-green: #43972A; --hc-green-ink: #23701A; --hc-green-soft: #E2F4D9; --hc-foot-1: #2B731F; --hc-foot-2: #205012; --hc-foot-ink: #FFFFFF; --hc-foot-ink-2: rgba(255, 255, 255, .86); --hc-foot-head: #FFE7A0; --hc-foot-line: rgba(255, 255, 255, .2); } /* Teen, light: calmer slate-blue world, teal accent */ [data-mode="teen"] { color-scheme: light; --hc-belt-black-edge: #000000; --hc-bg: #8FA3C6; --hc-world-sky-1: #5F7FB3; --hc-world-sky-2: #A6B6D4; --hc-world-glow: #E7E2F5; --hc-world-hill-1: #7C9CB0; --hc-world-hill-2: #4D6E86; --hc-world-hill-3: #3A566D; --hc-world-accent: #9FD8DC; --hc-world-accent-2: #C7B8E8; --hc-world-cloud: rgba(255, 255, 255, .45); --hc-paper: #FFFFFF; --hc-paper-2: #F4F6F9; --hc-paper-line: #DDE2EA; --hc-ink: #17202E; --hc-ink-2: #4A5568; --hc-ink-3: #5E6878; --hc-accent: #2B731F; --hc-accent-2: #35852A; --hc-on-accent: #FFFFFF; --hc-accent-ink: #256A1C; --hc-accent-soft: #E2F0DC; --hc-good: #15925F; --hc-good-ink: #0C6E47; --hc-good-soft: #DDF3E9; --hc-bad: #D3405F; --hc-bad-ink: #AE2244; --hc-bad-soft: #FBE4E9; --hc-sun: #F0A82A; --hc-sun-ink: #865300; --hc-sun-soft: #FCF0D9; --hc-focus: #1F6BFF; --hc-glass-tint: rgba(255, 255, 255, .62); --hc-glass-tint-strong: rgba(255, 255, 255, .80); --hc-glass-edge: rgba(255, 255, 255, .85); --hc-glass-edge-2: rgba(255, 255, 255, .22); --hc-glass-sheen: rgba(255, 255, 255, .40); --hc-glass-ink: #17202E; --hc-glass-ink-2: #3E4859; --hc-frost: #EEF1F6; --hc-shadow: 20, 30, 55; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #2B731F; --hc-band-2: #276A1C; --hc-band-3: #1B4510; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .94); --hc-band-hi: #FFF2CC; --hc-tint-a: #E2F0DC; --hc-tint-b: #F4F1E4; --hc-green: #43972A; --hc-green-ink: #256A1C; --hc-green-soft: #E2F0DC; --hc-foot-1: #276A1C; --hc-foot-2: #1B4510; --hc-foot-ink: #FFFFFF; --hc-foot-ink-2: rgba(255, 255, 255, .86); --hc-foot-head: #FFE7A0; --hc-foot-line: rgba(255, 255, 255, .2); } /* Parent, light: plain, almost no scene */ [data-mode="parent"] { color-scheme: light; --hc-belt-black-edge: #000000; --hc-bg: #E9F2E4; --hc-world-sky-1: #F1F7EC; --hc-world-sky-2: #E4F0DD; --hc-world-glow: #FFF4D6; --hc-world-hill-1: rgba(214, 222, 234, .55); --hc-world-hill-2: rgba(214, 222, 234, .0); --hc-world-hill-3: rgba(214, 222, 234, .0); --hc-world-accent: #D6ECCB; --hc-world-accent-2: #FFF0CC; --hc-world-cloud: rgba(255, 255, 255, 0); --hc-paper: #FFFFFF; --hc-paper-2: #F5F9F2; --hc-paper-line: #DCE7D5; --hc-ink: #172033; --hc-ink-2: #4A5468; --hc-ink-3: #56606F; --hc-accent: #2F7D22; --hc-accent-2: #3A8526; --hc-on-accent: #FFFFFF; --hc-accent-ink: #2A6E1E; --hc-accent-soft: #E4F2DD; --hc-good: #168A5B; --hc-good-ink: #0E6E48; --hc-good-soft: #E1F3EA; --hc-bad: #C93A5A; --hc-bad-ink: #A82342; --hc-bad-soft: #FBE7EC; --hc-sun: #E9A23B; --hc-sun-ink: #7F5200; --hc-sun-soft: #FBF0DC; --hc-focus: #1F6BFF; --hc-glass-tint: rgba(255, 255, 255, .70); --hc-glass-tint-strong: rgba(255, 255, 255, .86); --hc-glass-edge: rgba(255, 255, 255, .95); --hc-glass-edge-2: rgba(176, 206, 164, .5); --hc-glass-sheen: rgba(255, 255, 255, .5); --hc-glass-ink: #172033; --hc-glass-ink-2: #414B5E; --hc-frost: #F1F7EE; --hc-shadow: 25, 35, 60; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #2F7D22; --hc-band-2: #2B731F; --hc-band-3: #205012; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .94); --hc-band-hi: #FFF2CC; --hc-tint-a: #E2F1DA; --hc-tint-b: #FFF3D6; --hc-green: #43972A; --hc-green-ink: #2A6E1E; --hc-green-soft: #E4F2DD; --hc-foot-1: #2B731F; --hc-foot-2: #205012; --hc-foot-ink: #FFFFFF; --hc-foot-ink-2: rgba(255, 255, 255, .86); --hc-foot-head: #FFE7A0; --hc-foot-line: rgba(255, 255, 255, .2); } /* ---- Dark, explicit -------------------------------------------------------- */ :root[data-theme="dark"], [data-mode="kid"][data-theme="dark"] { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #1A2350; --hc-world-sky-1: #141B44; --hc-world-sky-2: #3A2C6E; --hc-world-glow: #6B5BD6; --hc-world-hill-1: #245E6E; --hc-world-hill-2: #18495A; --hc-world-hill-3: #0F3442; --hc-world-accent: #8A7CFF; --hc-world-accent-2: #C25C9A; --hc-world-cloud: rgba(160, 170, 230, .18); --hc-paper: #1A2344; --hc-paper-2: #212B52; --hc-paper-line: #34406A; --hc-ink: #F3F5FF; --hc-ink-2: #C5CCE8; --hc-ink-3: #A3ACCF; --hc-accent: #2F7D22; --hc-accent-2: #3A8A28; --hc-on-accent: #FFFFFF; --hc-accent-ink: #9BDB86; --hc-accent-soft: #1E3A24; --hc-good: #36D399; --hc-good-ink: #6CE5B5; --hc-good-soft: #143D3A; --hc-bad: #FF6B8E; --hc-bad-ink: #FF9DB4; --hc-bad-soft: #45213A; --hc-sun: #FFC247; --hc-sun-ink: #FFD27A; --hc-sun-soft: #3D3324; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(24, 30, 66, .58); --hc-glass-tint-strong: rgba(24, 30, 66, .78); --hc-glass-edge: rgba(255, 255, 255, .30); --hc-glass-edge-2: rgba(255, 255, 255, .06); --hc-glass-sheen: rgba(255, 255, 255, .10); --hc-glass-ink: #F3F5FF; --hc-glass-ink-2: #CDD3F0; --hc-frost: #232C55; --hc-shadow: 4, 6, 24; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #24611A; --hc-band-2: #1D4F15; --hc-band-3: #163D10; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1C3322; --hc-tint-b: #332D1A; --hc-green: #5FB548; --hc-green-ink: #9BDB86; --hc-green-soft: #1E3A24; --hc-foot-1: #1D4F15; --hc-foot-2: #0F2A0A; --hc-foot-ink: #F2F8EF; --hc-foot-ink-2: rgba(242, 248, 239, .8); --hc-foot-head: #FFE08A; --hc-foot-line: rgba(255, 255, 255, .12); --hc-link: #8DB8F0; } [data-mode="teen"][data-theme="dark"] { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #10162B; --hc-world-sky-1: #0E1428; --hc-world-sky-2: #1C2344; --hc-world-glow: #3E4A80; --hc-world-hill-1: #1B2B45; --hc-world-hill-2: #132036; --hc-world-hill-3: #0C1628; --hc-world-accent: #2E8F99; --hc-world-accent-2: #5D4E94; --hc-world-cloud: rgba(150, 165, 210, .12); --hc-paper: #171D2B; --hc-paper-2: #1D2433; --hc-paper-line: #2E3749; --hc-ink: #EEF1F7; --hc-ink-2: #BCC4D3; --hc-ink-3: #9AA3B5; --hc-accent: #2F7D22; --hc-accent-2: #388826; --hc-on-accent: #FFFFFF; --hc-accent-ink: #8FD47A; --hc-accent-soft: #1B3320; --hc-good: #2FBF85; --hc-good-ink: #62D9A8; --hc-good-soft: #15352C; --hc-bad: #F0657F; --hc-bad-ink: #FF97AA; --hc-bad-soft: #3D1E2A; --hc-sun: #F2B544; --hc-sun-ink: #F5C76B; --hc-sun-soft: #352C1C; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(20, 26, 40, .60); --hc-glass-tint-strong: rgba(20, 26, 40, .80); --hc-glass-edge: rgba(255, 255, 255, .22); --hc-glass-edge-2: rgba(255, 255, 255, .05); --hc-glass-sheen: rgba(255, 255, 255, .07); --hc-glass-ink: #EEF1F7; --hc-glass-ink-2: #C3CAD8; --hc-frost: #1E2535; --hc-shadow: 0, 2, 10; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #215A18; --hc-band-2: #1B4A14; --hc-band-3: #13350E; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1A2E1F; --hc-tint-b: #2B2A1E; --hc-green: #5FB548; --hc-green-ink: #8FD47A; --hc-green-soft: #1B3320; --hc-foot-1: #1B4A14; --hc-foot-2: #0D2509; --hc-foot-ink: #EEF5EB; --hc-foot-ink-2: rgba(238, 245, 235, .8); --hc-foot-head: #F5D985; --hc-foot-line: rgba(255, 255, 255, .1); --hc-link: #8DB8F0; } [data-mode="parent"][data-theme="dark"] { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #0F1712; --hc-world-sky-1: #0F1712; --hc-world-sky-2: #12201A; --hc-world-glow: #2A2716; --hc-world-hill-1: rgba(40, 50, 70, .35); --hc-world-hill-2: rgba(40, 50, 70, 0); --hc-world-hill-3: rgba(40, 50, 70, 0); --hc-world-accent: #173A1E; --hc-world-accent-2: #2C2914; --hc-world-cloud: rgba(0, 0, 0, 0); --hc-paper: #1A201C; --hc-paper-2: #1F2723; --hc-paper-line: #2E3B31; --hc-ink: #EEF1F6; --hc-ink-2: #BAC2D0; --hc-ink-3: #9AA2B2; --hc-accent: #2F7D22; --hc-accent-2: #3A8A28; --hc-on-accent: #FFFFFF; --hc-accent-ink: #8FD47A; --hc-accent-soft: #1D3A22; --hc-good: #2FB57E; --hc-good-ink: #66D3A4; --hc-good-soft: #163327; --hc-bad: #EE6681; --hc-bad-ink: #FF9AAE; --hc-bad-soft: #3A1E28; --hc-sun: #E9B04E; --hc-sun-ink: #F2C66E; --hc-sun-soft: #342A1B; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(26, 32, 48, .66); --hc-glass-tint-strong: rgba(26, 32, 48, .84); --hc-glass-edge: rgba(255, 255, 255, .16); --hc-glass-edge-2: rgba(255, 255, 255, .04); --hc-glass-sheen: rgba(255, 255, 255, .05); --hc-glass-ink: #EEF1F6; --hc-glass-ink-2: #C2C9D6; --hc-frost: #19221C; --hc-shadow: 0, 0, 0; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #24611A; --hc-band-2: #1D4F15; --hc-band-3: #163D10; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1B3121; --hc-tint-b: #2E2A19; --hc-green: #5FB548; --hc-green-ink: #8FD47A; --hc-green-soft: #1D3A22; --hc-foot-1: #1D4F15; --hc-foot-2: #0E2709; --hc-foot-ink: #EEF6EB; --hc-foot-ink-2: rgba(238, 246, 235, .8); --hc-foot-head: #F2D27A; --hc-foot-line: rgba(255, 255, 255, .1); --hc-link: #8DB8F0; } /* ---- Dark, from the system (same values as above; keep in sync) ------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-mode]), [data-mode="kid"]:not([data-theme="light"]) { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #1A2350; --hc-world-sky-1: #141B44; --hc-world-sky-2: #3A2C6E; --hc-world-glow: #6B5BD6; --hc-world-hill-1: #245E6E; --hc-world-hill-2: #18495A; --hc-world-hill-3: #0F3442; --hc-world-accent: #8A7CFF; --hc-world-accent-2: #C25C9A; --hc-world-cloud: rgba(160, 170, 230, .18); --hc-paper: #1A2344; --hc-paper-2: #212B52; --hc-paper-line: #34406A; --hc-ink: #F3F5FF; --hc-ink-2: #C5CCE8; --hc-ink-3: #A3ACCF; --hc-accent: #2F7D22; --hc-accent-2: #3A8A28; --hc-on-accent: #FFFFFF; --hc-accent-ink: #9BDB86; --hc-accent-soft: #1E3A24; --hc-good: #36D399; --hc-good-ink: #6CE5B5; --hc-good-soft: #143D3A; --hc-bad: #FF6B8E; --hc-bad-ink: #FF9DB4; --hc-bad-soft: #45213A; --hc-sun: #FFC247; --hc-sun-ink: #FFD27A; --hc-sun-soft: #3D3324; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(24, 30, 66, .58); --hc-glass-tint-strong: rgba(24, 30, 66, .78); --hc-glass-edge: rgba(255, 255, 255, .30); --hc-glass-edge-2: rgba(255, 255, 255, .06); --hc-glass-sheen: rgba(255, 255, 255, .10); --hc-glass-ink: #F3F5FF; --hc-glass-ink-2: #CDD3F0; --hc-frost: #232C55; --hc-shadow: 4, 6, 24; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #24611A; --hc-band-2: #1D4F15; --hc-band-3: #163D10; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1C3322; --hc-tint-b: #332D1A; --hc-green: #5FB548; --hc-green-ink: #9BDB86; --hc-green-soft: #1E3A24; --hc-foot-1: #1D4F15; --hc-foot-2: #0F2A0A; --hc-foot-ink: #F2F8EF; --hc-foot-ink-2: rgba(242, 248, 239, .8); --hc-foot-head: #FFE08A; --hc-foot-line: rgba(255, 255, 255, .12); --hc-link: #8DB8F0; } [data-mode="teen"]:not([data-theme="light"]) { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #10162B; --hc-world-sky-1: #0E1428; --hc-world-sky-2: #1C2344; --hc-world-glow: #3E4A80; --hc-world-hill-1: #1B2B45; --hc-world-hill-2: #132036; --hc-world-hill-3: #0C1628; --hc-world-accent: #2E8F99; --hc-world-accent-2: #5D4E94; --hc-world-cloud: rgba(150, 165, 210, .12); --hc-paper: #171D2B; --hc-paper-2: #1D2433; --hc-paper-line: #2E3749; --hc-ink: #EEF1F7; --hc-ink-2: #BCC4D3; --hc-ink-3: #9AA3B5; --hc-accent: #2F7D22; --hc-accent-2: #388826; --hc-on-accent: #FFFFFF; --hc-accent-ink: #8FD47A; --hc-accent-soft: #1B3320; --hc-good: #2FBF85; --hc-good-ink: #62D9A8; --hc-good-soft: #15352C; --hc-bad: #F0657F; --hc-bad-ink: #FF97AA; --hc-bad-soft: #3D1E2A; --hc-sun: #F2B544; --hc-sun-ink: #F5C76B; --hc-sun-soft: #352C1C; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(20, 26, 40, .60); --hc-glass-tint-strong: rgba(20, 26, 40, .80); --hc-glass-edge: rgba(255, 255, 255, .22); --hc-glass-edge-2: rgba(255, 255, 255, .05); --hc-glass-sheen: rgba(255, 255, 255, .07); --hc-glass-ink: #EEF1F7; --hc-glass-ink-2: #C3CAD8; --hc-frost: #1E2535; --hc-shadow: 0, 2, 10; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #215A18; --hc-band-2: #1B4A14; --hc-band-3: #13350E; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1A2E1F; --hc-tint-b: #2B2A1E; --hc-green: #5FB548; --hc-green-ink: #8FD47A; --hc-green-soft: #1B3320; --hc-foot-1: #1B4A14; --hc-foot-2: #0D2509; --hc-foot-ink: #EEF5EB; --hc-foot-ink-2: rgba(238, 245, 235, .8); --hc-foot-head: #F5D985; --hc-foot-line: rgba(255, 255, 255, .1); --hc-link: #8DB8F0; } [data-mode="parent"]:not([data-theme="light"]) { color-scheme: dark; --hc-belt-black-edge: #8E97B8; --hc-bg: #0F1712; --hc-world-sky-1: #0F1712; --hc-world-sky-2: #12201A; --hc-world-glow: #2A2716; --hc-world-hill-1: rgba(40, 50, 70, .35); --hc-world-hill-2: rgba(40, 50, 70, 0); --hc-world-hill-3: rgba(40, 50, 70, 0); --hc-world-accent: #173A1E; --hc-world-accent-2: #2C2914; --hc-world-cloud: rgba(0, 0, 0, 0); --hc-paper: #1A201C; --hc-paper-2: #1F2723; --hc-paper-line: #2E3B31; --hc-ink: #EEF1F6; --hc-ink-2: #BAC2D0; --hc-ink-3: #9AA2B2; --hc-accent: #2F7D22; --hc-accent-2: #3A8A28; --hc-on-accent: #FFFFFF; --hc-accent-ink: #8FD47A; --hc-accent-soft: #1D3A22; --hc-good: #2FB57E; --hc-good-ink: #66D3A4; --hc-good-soft: #163327; --hc-bad: #EE6681; --hc-bad-ink: #FF9AAE; --hc-bad-soft: #3A1E28; --hc-sun: #E9B04E; --hc-sun-ink: #F2C66E; --hc-sun-soft: #342A1B; --hc-focus: #8DB4FF; --hc-glass-tint: rgba(26, 32, 48, .66); --hc-glass-tint-strong: rgba(26, 32, 48, .84); --hc-glass-edge: rgba(255, 255, 255, .16); --hc-glass-edge-2: rgba(255, 255, 255, .04); --hc-glass-sheen: rgba(255, 255, 255, .05); --hc-glass-ink: #EEF1F6; --hc-glass-ink-2: #C2C9D6; --hc-frost: #19221C; --hc-shadow: 0, 0, 0; /* the Home Campus green (COLOUR.md 3, 4; the owner, 27 October 2026) */ --hc-band-1: #24611A; --hc-band-2: #1D4F15; --hc-band-3: #163D10; --hc-on-band: #FFFFFF; --hc-on-band-2: rgba(255, 255, 255, .9); --hc-band-hi: #FFE08A; --hc-tint-a: #1B3121; --hc-tint-b: #2E2A19; --hc-green: #5FB548; --hc-green-ink: #8FD47A; --hc-green-soft: #1D3A22; --hc-foot-1: #1D4F15; --hc-foot-2: #0E2709; --hc-foot-ink: #EEF6EB; --hc-foot-ink-2: rgba(238, 246, 235, .8); --hc-foot-head: #F2D27A; --hc-foot-line: rgba(255, 255, 255, .1); --hc-link: #8DB8F0; } } /* ----------------------------------------------------------------------------- 4. Derived tokens. Recomputed on every element that sets a mode or theme, so a panel in another mode gets its own values (custom properties inherit already-substituted values, so derived tokens must be re-declared here). ----------------------------------------------------------------------------- */ :root, [data-mode], [data-theme] { /* Type scale: ratio 1.2 from the mode's base size */ --hc-fs-xs: calc(var(--hc-fs-base) * .75); --hc-fs-sm: calc(var(--hc-fs-base) * .875); --hc-fs-md: var(--hc-fs-base); --hc-fs-lg: calc(var(--hc-fs-base) * 1.2); --hc-fs-xl: calc(var(--hc-fs-base) * 1.44); --hc-fs-2xl: calc(var(--hc-fs-base) * 1.728); --hc-fs-3xl: calc(var(--hc-fs-base) * 2.074); --hc-fs-4xl: calc(var(--hc-fs-base) * 2.488); --hc-fs-maths: calc(var(--hc-fs-base) * 1.3); /* Glass recipe */ --hc-glass-bg: var(--hc-glass-tint); --hc-glass-bg-strong: var(--hc-glass-tint-strong); --hc-glass-filter: blur(var(--hc-glass-blur)) saturate(var(--hc-glass-sat)); --hc-glass-rim: linear-gradient(155deg, var(--hc-glass-edge) 0%, var(--hc-glass-edge-2) 38%, var(--hc-glass-edge-2) 62%, var(--hc-glass-edge) 100%); /* Elevation */ --hc-e-0: none; --hc-e-1: 0 1px 2px rgba(var(--hc-shadow), .10), 0 2px 6px rgba(var(--hc-shadow), .08); --hc-e-2: 0 1px 2px rgba(var(--hc-shadow), .10), 0 8px 24px -6px rgba(var(--hc-shadow), .22); --hc-e-3: 0 2px 4px rgba(var(--hc-shadow), .10), 0 18px 48px -12px rgba(var(--hc-shadow), .34); --hc-e-4: 0 4px 8px rgba(var(--hc-shadow), .12), 0 32px 80px -20px rgba(var(--hc-shadow), .45); --hc-glass-shadow: inset 0 1px 0 0 var(--hc-glass-sheen), inset 0 -1px 0 0 rgba(255, 255, 255, .06), var(--hc-e-3); /* the band: deep green, with today's bright #43972A glowing in from the top right (behind the pictures, never behind text) */ --hc-band-bg: radial-gradient(55% 110% at 100% 0%, color-mix(in srgb, var(--hc-brand-green) 85%, transparent) 0%, transparent 75%), radial-gradient(36% 70% at 0% 100%, rgba(0, 0, 0, .08) 0%, transparent 72%), linear-gradient(120deg, var(--hc-band-1) 0%, var(--hc-band-2) 55%, var(--hc-band-3) 125%); /* the brand stripe: green to leaf to amber */ --hc-topline: linear-gradient(90deg, var(--hc-brand-green-deep), var(--hc-brand-green) 40%, var(--hc-brand-leaf) 72%, var(--hc-brand-amber)); --hc-tint-bg: linear-gradient(135deg, var(--hc-tint-a) 0%, var(--hc-tint-b) 100%); } /* ----------------------------------------------------------------------------- 5. Reduced glass: frosted solid surfaces, no blur ----------------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, [data-mode], [data-theme] { --hc-glass-bg: var(--hc-frost); --hc-glass-bg-strong: var(--hc-frost); --hc-glass-filter: none; } } @media (prefers-reduced-transparency: reduce) { :root, [data-mode], [data-theme] { --hc-glass-bg: var(--hc-frost); --hc-glass-bg-strong: var(--hc-frost); --hc-glass-filter: none; } } @media (prefers-reduced-motion: reduce) { :root, [data-mode], [data-theme] { --hc-glass-bg: var(--hc-frost); --hc-glass-bg-strong: var(--hc-frost); --hc-glass-filter: none; --hc-dur-1: 1ms; --hc-dur-2: 1ms; --hc-dur-3: 1ms; --hc-dur-4: 1ms; --hc-ease-spring: linear; --hc-ease-spring-soft: linear; } } .reduced-glass, .reduced-glass * { --hc-glass-bg: var(--hc-frost); --hc-glass-bg-strong: var(--hc-frost); --hc-glass-filter: none; } /* ----------------------------------------------------------------------------- 6. Base (only inside .hc-root, so the file can share a page with old CSS) ----------------------------------------------------------------------------- */ .hc-root { font-family: var(--hc-font); font-size: var(--hc-fs-base); line-height: 1.5; color: var(--hc-ink); background: var(--hc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01" 0; } .hc-root *, .hc-root *::before, .hc-root *::after { box-sizing: border-box; } .hc-root body, body.hc-root { margin: 0; min-height: 100vh; min-height: 100dvh; } .hc-root :where(h1, h2, h3, h4) { margin: 0; font-weight: var(--hc-weight-head); line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; } .hc-root :where(p) { margin: 0; text-wrap: pretty; } .hc-root :where(ul, ol) { margin: 0; padding: 0; } .hc-root :where(a) { color: var(--hc-accent-ink); text-underline-offset: .18em; } .hc-root :where(button, input, select, textarea) { font: inherit; color: inherit; } .hc-root :where(svg) { display: inline-block; vertical-align: middle; } .hc-root :where(:focus-visible) { outline: 3px solid var(--hc-focus); outline-offset: 3px; border-radius: var(--hc-r-xs); } .hc-num, .hc-root :where(.hc-q__text, .hc-frac, .hc-input) { font-variant-numeric: tabular-nums lining-nums; } .hc-h1 { font-size: var(--hc-fs-3xl); } .hc-h2 { font-size: var(--hc-fs-xl); } .hc-h3 { font-size: var(--hc-fs-lg); } .hc-lead { font-size: var(--hc-fs-lg); line-height: 1.4; } .hc-small { font-size: var(--hc-fs-sm); } .hc-muted { color: var(--hc-ink-2); } .hc-on-glass .hc-muted, .hc-glass .hc-muted { color: var(--hc-glass-ink-2); } .hc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hc-stack { display: flex; flex-direction: column; gap: var(--hc-gap, var(--hc-s-4)); } .hc-nowrap { white-space: nowrap; } .hc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-gap, var(--hc-s-3)); } .hc-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--hc-s-4); flex-wrap: wrap; } /* ----------------------------------------------------------------------------- 7. Layer 1: the world A fixed scene behind the page. CSS paints sky, glow and hills; a page may add an inline SVG scene (.hc-world__scene) for the world's landmarks. ----------------------------------------------------------------------------- */ /* parent pages: the root paints the world's lower sky, so a page taller than the window has no seam below it */ .hc-root[data-mode="parent"] { background: var(--hc-world-sky-2); } .hc-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(42% 46% at 82% 12%, var(--hc-world-glow) 0%, transparent 70%), radial-gradient(60% 50% at 10% 0%, var(--hc-world-accent-2) 0%, transparent 62%), linear-gradient(180deg, var(--hc-world-sky-1) 0%, var(--hc-world-sky-2) 72%); } .hc-world::before, .hc-world::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -2%; } .hc-world::before { height: 52%; background: radial-gradient(38% 62% at 18% 100%, var(--hc-world-hill-1) 99%, transparent 100%), radial-gradient(44% 70% at 62% 100%, var(--hc-world-hill-1) 99%, transparent 100%), radial-gradient(30% 54% at 98% 100%, var(--hc-world-hill-1) 99%, transparent 100%); opacity: .9; } .hc-world::after { height: 34%; background: radial-gradient(40% 72% at 34% 100%, var(--hc-world-hill-2) 99%, transparent 100%), radial-gradient(36% 64% at 88% 100%, var(--hc-world-hill-3) 99%, transparent 100%), radial-gradient(28% 60% at 0% 100%, var(--hc-world-hill-3) 99%, transparent 100%); } .hc-world__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .hc-world--plain::before, .hc-world--plain::after, .hc-world--plain .hc-world__scene { display: none; } /* A world inside a box (style guide, previews) instead of behind the page */ .hc-world--local { position: absolute; border-radius: inherit; } /* Scene parts (inline SVG classes; SVG attributes cannot read var()) */ .hc-scene-cloud { fill: var(--hc-world-cloud); } .hc-scene-hill-1 { fill: var(--hc-world-hill-1); } .hc-scene-hill-2 { fill: var(--hc-world-hill-2); } .hc-scene-hill-3 { fill: var(--hc-world-hill-3); } .hc-scene-accent { fill: var(--hc-world-accent); } .hc-scene-accent-2 { fill: var(--hc-world-accent-2); } .hc-scene-glow { fill: var(--hc-world-glow); } .hc-scene-trunk { fill: var(--hc-world-hill-3); } .hc-scene-line { fill: none; stroke: var(--hc-world-cloud); stroke-width: 3; stroke-linecap: round; } .hc-scene-river { fill: none; stroke: var(--hc-world-sky-1); stroke-width: 26; stroke-linecap: round; opacity: .8; } /* Content sits above the world */ .hc-layer { position: relative; z-index: 1; } /* ----------------------------------------------------------------------------- 8. Layer 2: glass Translucent tint + blur + saturation, a rim that catches light at the top left and bottom right, a soft sheen, depth from layered shadows. ----------------------------------------------------------------------------- */ .hc-glass { position: relative; isolation: isolate; color: var(--hc-glass-ink); border: 1px solid transparent; border-radius: var(--hc-r-lg); background: linear-gradient(var(--hc-glass-bg), var(--hc-glass-bg)) padding-box, var(--hc-glass-rim) border-box; -webkit-backdrop-filter: var(--hc-glass-filter); backdrop-filter: var(--hc-glass-filter); box-shadow: var(--hc-glass-shadow); } .hc-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 12% -8%, var(--hc-glass-sheen) 0%, transparent 52%); } .hc-glass--strong { background: linear-gradient(var(--hc-glass-bg-strong), var(--hc-glass-bg-strong)) padding-box, var(--hc-glass-rim) border-box; } .hc-glass--pill { border-radius: 999px; } .hc-glass--flat { box-shadow: inset 0 1px 0 0 var(--hc-glass-sheen), var(--hc-e-1); } /* ----------------------------------------------------------------------------- 9. Layer 3: paper (solid; maths and text that matters) ----------------------------------------------------------------------------- */ .hc-paper { position: relative; color: var(--hc-ink); background: var(--hc-paper); border: 1px solid var(--hc-paper-line); border-radius: var(--hc-r-lg); box-shadow: var(--hc-e-2); } .hc-paper--sunk { background: var(--hc-paper-2); box-shadow: inset 0 1px 2px rgba(var(--hc-shadow), .06); } .hc-paper--lift { box-shadow: var(--hc-e-4); } /* ----------------------------------------------------------------------------- 10. App shell and navigation Laptop: floating glass sidebar on the left. Below 1024px: bottom bar. ----------------------------------------------------------------------------- */ .hc-shell { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; padding: var(--hc-s-5) var(--hc-s-6) var(--hc-s-6) calc(var(--hc-nav-w) + var(--hc-s-5) * 2); } .hc-main { max-width: var(--hc-content-max); margin: 0 auto; } .hc-nav { position: fixed; z-index: 20; left: var(--hc-s-5); top: 50%; transform: translateY(-50%); width: var(--hc-nav-w); padding: var(--hc-s-3) var(--hc-s-2); border-radius: calc(var(--hc-r-xl) + 4px); } .hc-nav__brand { display: grid; place-items: center; margin: var(--hc-s-1) auto var(--hc-s-3); width: 44px; height: 44px; border-radius: 14px; color: var(--hc-on-accent); background: linear-gradient(160deg, var(--hc-accent-2), var(--hc-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--hc-e-1); font-weight: 800; font-size: 15px; letter-spacing: -.02em; text-decoration: none; } .hc-nav__list { list-style: none; display: flex; flex-direction: column; gap: var(--hc-s-1); } .hc-nav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--hc-s-2) var(--hc-s-1) 6px; border-radius: var(--hc-r-md); color: var(--hc-glass-ink-2); font-size: 13px; font-weight: 650; text-decoration: none; transition: background-color var(--hc-dur-2) var(--hc-ease-out), color var(--hc-dur-2) var(--hc-ease-out), transform var(--hc-dur-3) var(--hc-ease-spring); } .hc-nav__item svg { width: 26px; height: 26px; } .hc-nav__item:hover { color: var(--hc-glass-ink); background: rgba(255, 255, 255, .22); } .hc-nav__item:active { transform: scale(var(--hc-press)); } .hc-nav__item[aria-current="page"] { color: var(--hc-accent-ink); background: var(--hc-paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--hc-e-1); } /* Shown in place (style guide): the sidebar, or the bar it becomes below 1024px */ .hc-nav.hc-nav--inline { position: relative; left: auto; top: auto; bottom: auto; transform: none; translate: none; } .hc-nav--bar { width: auto; padding: 6px; border-radius: 999px; } .hc-nav--bar .hc-nav__brand { display: none; } .hc-nav--bar .hc-nav__list { flex-direction: row; gap: 2px; } .hc-nav--bar .hc-nav__item { min-width: 72px; padding: 6px var(--hc-s-3); border-radius: 999px; font-size: 12px; } @media (max-width: 1023.98px) { .hc-shell { padding: var(--hc-s-4) var(--hc-s-4) calc(96px + env(safe-area-inset-bottom, 0px)); } .hc-nav { top: auto; transform: none; left: 50%; bottom: calc(var(--hc-s-3) + env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: auto; max-width: calc(100% - var(--hc-s-5)); padding: 6px; border-radius: 999px; } .hc-nav__brand { display: none; } .hc-nav__list { flex-direction: row; gap: 2px; } .hc-nav__item { min-width: 72px; padding: 6px var(--hc-s-3); border-radius: 999px; font-size: 12px; } .hc-nav__item svg { width: 24px; height: 24px; } } /* ----------------------------------------------------------------------------- 11. Top bar, companion and stats ----------------------------------------------------------------------------- */ .hc-topbar { display: flex; align-items: center; gap: var(--hc-s-4); margin-bottom: var(--hc-s-4); } .hc-topbar__grow { flex: 1 1 auto; min-width: 0; } .hc-greeting { font-size: var(--hc-fs-2xl); font-weight: var(--hc-weight-head); line-height: 1.1; letter-spacing: -.02em; } .hc-greeting-sub { font-size: var(--hc-fs-md); color: var(--hc-glass-ink-2); margin-top: 2px; } .hc-world-text { color: var(--hc-glass-ink); text-shadow: 0 1px 12px rgba(255, 255, 255, .35); } [data-theme="dark"] .hc-world-text { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .hc-companion { flex: none; width: var(--hc-companion-size, 64px); height: var(--hc-companion-size, 64px); filter: drop-shadow(0 6px 10px rgba(var(--hc-shadow), .25)); transition: transform var(--hc-dur-4) var(--hc-ease-spring); } .hc-companion:hover { transform: rotate(-6deg) scale(1.06); } .hc-companion--sm { --hc-companion-size: 44px; } .hc-companion--lg { --hc-companion-size: 96px; } .hc-stat { display: inline-flex; align-items: center; gap: var(--hc-s-2); height: 48px; padding: 0 var(--hc-s-4) 0 var(--hc-s-2); border-radius: 999px; font-weight: 750; font-size: var(--hc-fs-md); white-space: nowrap; } .hc-stat__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hc-paper); box-shadow: var(--hc-e-1); } .hc-stat__icon svg { width: 22px; height: 22px; } .hc-stat small { font-weight: 600; color: var(--hc-glass-ink-2); font-size: var(--hc-fs-sm); } @media (max-width: 640px) { .hc-topbar { flex-wrap: wrap; gap: var(--hc-s-3); } .hc-topbar__grow { flex: 1 1 calc(100% - 96px); } .hc-greeting { font-size: var(--hc-fs-xl); } .hc-stat { height: 40px; } .hc-stat small { display: none; } } /* ----------------------------------------------------------------------------- 12. Buttons ----------------------------------------------------------------------------- */ .hc-btn { --hc-btn-h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-s-2); min-height: var(--hc-btn-h); padding: 0 calc(var(--hc-btn-h) * .45); border: 1px solid transparent; border-radius: 999px; font-weight: var(--hc-weight-strong); font-size: var(--hc-fs-md); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform var(--hc-dur-3) var(--hc-ease-spring), box-shadow var(--hc-dur-2) var(--hc-ease-out), background-color var(--hc-dur-2) var(--hc-ease-out), filter var(--hc-dur-2) var(--hc-ease-out); } .hc-btn:hover { transform: translateY(-2px); } .hc-btn:active { transform: translateY(0) scale(var(--hc-press)); transition-duration: var(--hc-dur-1); } .hc-btn svg { width: 1.25em; height: 1.25em; } .hc-btn[disabled], .hc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .hc-btn--primary { color: var(--hc-on-accent); background: linear-gradient(180deg, var(--hc-accent-2) 0%, var(--hc-accent) 100%); border-color: rgba(0, 0, 0, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 18px -6px var(--hc-accent), var(--hc-e-1); } .hc-btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 12px 28px -8px var(--hc-accent), var(--hc-e-2); } .hc-btn--good { color: #FFFFFF; background: linear-gradient(180deg, #1DB37C, #0E8A5C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .12), var(--hc-e-2); } .hc-btn--glass { color: var(--hc-glass-ink); background: linear-gradient(var(--hc-glass-bg-strong), var(--hc-glass-bg-strong)) padding-box, var(--hc-glass-rim) border-box; -webkit-backdrop-filter: var(--hc-glass-filter); backdrop-filter: var(--hc-glass-filter); box-shadow: inset 0 1px 0 var(--hc-glass-sheen), var(--hc-e-1); } .hc-btn--paper { color: var(--hc-ink); background: var(--hc-paper); border-color: var(--hc-paper-line); box-shadow: var(--hc-e-1); } .hc-btn--quiet { color: var(--hc-accent-ink); background: transparent; padding: 0 var(--hc-s-3); } .hc-btn--quiet:hover { background: var(--hc-accent-soft); transform: none; } /* Amber, dark ink (COLOUR.md 6): the one main action on a green band (Start free on the home hero, Add a child on Family). On green a white button would read as the white secondary beside it. */ .hc-btn--sun { color: #2A1700; background: linear-gradient(180deg, #FFCF62 0%, var(--hc-brand-amber) 100%); border-color: rgba(0, 0, 0, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 8px 20px -8px rgba(120, 80, 0, .7), var(--hc-e-1); } .hc-btn--sun:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 12px 28px -8px rgba(120, 80, 0, .8), var(--hc-e-2); } /* A quiet button on a band: a frosted white line (also .hc-band .hc-btn--quiet, section 33) */ .hc-btn--onband { color: var(--hc-on-band); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); } .hc-btn--onband:hover { background: rgba(255, 255, 255, .2); } .hc-btn--lg { --hc-btn-h: 60px; font-size: var(--hc-fs-lg); } .hc-btn--sm { --hc-btn-h: 36px; font-size: var(--hc-fs-sm); } .hc-btn--icon { padding: 0; width: var(--hc-btn-h); } .hc-kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .4em; border-radius: 6px; font-size: .85em; font-weight: 700; color: var(--hc-ink); background: var(--hc-paper); border: 1px solid var(--hc-paper-line); box-shadow: 0 2px 0 var(--hc-paper-line); } .hc-btn--primary .hc-kbd { color: var(--hc-on-accent); background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); box-shadow: none; } /* ----------------------------------------------------------------------------- 13. Chips ----------------------------------------------------------------------------- */ .hc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px; border-radius: 999px; font-size: var(--hc-fs-sm); font-weight: 650; line-height: 1.2; color: var(--hc-ink-2); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); white-space: nowrap; } .hc-chip svg { width: 16px; height: 16px; } .hc-chip--accent { color: var(--hc-accent-ink); background: var(--hc-accent-soft); border-color: transparent; } .hc-chip--good { color: var(--hc-good-ink); background: var(--hc-good-soft); border-color: transparent; } .hc-chip--bad { color: var(--hc-bad-ink); background: var(--hc-bad-soft); border-color: transparent; } .hc-chip--sun { color: var(--hc-sun-ink); background: var(--hc-sun-soft); border-color: transparent; } .hc-chip--green { color: var(--hc-green-ink); background: var(--hc-green-soft); border-color: transparent; } .hc-chip--grade { color: var(--hc-gc-ink); background: var(--hc-gc-soft); border-color: transparent; } /* needs data-grade */ .hc-chip--glass { color: var(--hc-glass-ink); background: var(--hc-glass-bg-strong); border-color: var(--hc-glass-edge); -webkit-backdrop-filter: var(--hc-glass-filter); backdrop-filter: var(--hc-glass-filter); } button.hc-chip { cursor: pointer; transition: transform var(--hc-dur-3) var(--hc-ease-spring); } button.hc-chip:active { transform: scale(var(--hc-press)); } .hc-chip[aria-pressed="true"], .hc-chip[aria-selected="true"] { color: var(--hc-on-accent); background: var(--hc-accent); border-color: transparent; } /* ----------------------------------------------------------------------------- 14. Cards ----------------------------------------------------------------------------- */ .hc-card { padding: var(--hc-s-5); } .hc-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hc-s-3); margin-bottom: var(--hc-s-4); } .hc-card__title { font-size: var(--hc-fs-lg); font-weight: var(--hc-weight-head); } .hc-card--interactive { transition: transform var(--hc-dur-4) var(--hc-ease-spring-soft), box-shadow var(--hc-dur-3) var(--hc-ease-out); } .hc-card--interactive:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 0 var(--hc-glass-sheen), var(--hc-e-4); } /* ----------------------------------------------------------------------------- 15. Hero: today's mission Glass frame, solid paper inside for the teacher's note and the three parts. ----------------------------------------------------------------------------- */ .hc-mission { padding: var(--hc-s-3); border-radius: var(--hc-r-xl); } .hc-mission__inner { padding: var(--hc-s-5) var(--hc-s-6); border-radius: calc(var(--hc-r-xl) - var(--hc-s-3)); } .hc-mission__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hc-s-4); } .hc-mission__head .hc-dots { margin-top: var(--hc-s-2); } .hc-mission__label { display: inline-flex; align-items: center; gap: var(--hc-s-2); font-size: var(--hc-fs-sm); font-weight: 750; color: var(--hc-accent-ink); } .hc-mission__title { font-size: var(--hc-fs-3xl); margin-top: 2px; } .hc-mission__note { display: flex; gap: var(--hc-s-3); align-items: flex-start; margin-top: var(--hc-s-3); padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-accent-soft); color: var(--hc-ink); font-size: var(--hc-fs-lg); font-weight: 650; line-height: 1.35; } .hc-mission__note svg { flex: none; width: 28px; height: 28px; margin-top: 1px; } .hc-mission__note-who { display: block; font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-accent-ink); margin-bottom: 2px; } .hc-mission__parts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-s-3); margin-top: var(--hc-s-4); counter-reset: part; } .hc-part { position: relative; padding: var(--hc-s-3) var(--hc-s-4) var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); counter-increment: part; } .hc-part__step { display: flex; align-items: center; gap: var(--hc-s-2); font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-ink-2); } .hc-part__step::before { content: counter(part); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--hc-on-accent); background: var(--hc-accent); } .hc-part__name { margin-top: var(--hc-s-2); font-weight: 750; font-size: var(--hc-fs-md); line-height: 1.25; } .hc-part__meta { margin-top: 2px; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); } .hc-part--main { background: var(--hc-paper); border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft); } .hc-mission__foot { display: flex; align-items: center; gap: var(--hc-s-4); margin-top: var(--hc-s-4); flex-wrap: wrap; } .hc-almost { display: flex; align-items: center; gap: var(--hc-s-3); margin-top: var(--hc-s-3); padding: var(--hc-s-2) var(--hc-s-4) var(--hc-s-2) var(--hc-s-2); border-radius: 999px; font-weight: 650; font-size: var(--hc-fs-md); } .hc-almost strong { font-weight: 800; } .hc-almost .hc-belt { flex: none; } @media (max-width: 1180px) { .hc-mission__inner { padding: var(--hc-s-5); } } @media (max-width: 760px) { .hc-mission__parts { grid-template-columns: 1fr; } .hc-mission__head { flex-direction: column; } } /* ----------------------------------------------------------------------------- 16. Progress ring (SVG) and mission dots ----------------------------------------------------------------------------- */ .hc-ring-wrap { position: relative; display: inline-grid; place-items: center; } .hc-ring-wrap > :not(svg) { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; } .hc-ring { width: var(--hc-ring-size, 96px); height: var(--hc-ring-size, 96px); transform: rotate(-90deg); overflow: visible; } .hc-ring__track { fill: none; stroke: var(--hc-ring-track, var(--hc-paper-line)); stroke-width: var(--hc-ring-w, 5); } .hc-ring__bar { fill: none; stroke: var(--hc-ring-color, var(--hc-accent)); stroke-width: var(--hc-ring-w, 5); stroke-linecap: round; stroke-dasharray: var(--value, 0) 100; transition: stroke-dasharray var(--hc-dur-4) var(--hc-ease-spring-soft); } .hc-ring--good { --hc-ring-color: var(--hc-good); } .hc-ring.is-empty .hc-ring__bar { visibility: hidden; } /* a round cap would show a dot at 0 */ .hc-ring-label { font-weight: 800; font-size: var(--hc-fs-lg); } .hc-ring-label small { display: block; font-size: var(--hc-fs-xs); font-weight: 650; color: var(--hc-ink-2); } .hc-dots { list-style: none; display: flex; align-items: center; gap: 6px; } .hc-dots li { width: 12px; height: 12px; border-radius: 50%; background: var(--hc-paper-line); box-shadow: inset 0 0 0 1px rgba(var(--hc-shadow), .12); transition: transform var(--hc-dur-3) var(--hc-ease-spring), width var(--hc-dur-3) var(--hc-ease-spring); } .hc-dots li[data-state="right"] { background: var(--hc-good); } .hc-dots li[data-state="wrong"] { background: var(--hc-sun); } .hc-dots li[data-state="current"] { width: 28px; border-radius: 999px; background: var(--hc-accent); } .hc-dots li[data-part-start] { margin-left: 8px; } /* ----------------------------------------------------------------------------- 17. Belt badges: [data-belt="white|yellow|green|black"] Markup: Green The SVG symbol paints with --belt and --belt-edge. ----------------------------------------------------------------------------- */ .hc-belt { display: inline-flex; align-items: center; gap: var(--hc-s-2); } .hc-belt svg { width: var(--hc-belt-size, 48px); height: calc(var(--hc-belt-size, 48px) * .75); overflow: visible; } .hc-belt[data-belt="white"] { --belt: var(--hc-belt-white); --belt-edge: var(--hc-belt-white-edge); --belt-stripe: #DDE1EC; } .hc-belt[data-belt="yellow"] { --belt: var(--hc-belt-yellow); --belt-edge: var(--hc-belt-yellow-edge); --belt-stripe: #FFE27A; } .hc-belt[data-belt="green"] { --belt: var(--hc-belt-green); --belt-edge: var(--hc-belt-green-edge); --belt-stripe: #5CD49A; } .hc-belt[data-belt="black"] { --belt: var(--hc-belt-black); --belt-edge: var(--hc-belt-black-edge); --belt-stripe: #454A5C; } .hc-belt[data-belt="none"] { --belt: transparent; --belt-edge: var(--hc-ink-3); --belt-stripe: transparent; } .hc-belt__fill { fill: var(--belt); stroke: var(--belt-edge); stroke-width: 1.6; stroke-linejoin: round; } .hc-belt__stripe { fill: none; stroke: var(--belt-stripe); stroke-width: 1.4; stroke-linecap: round; opacity: .9; } .hc-belt__shine { fill: #FFFFFF; opacity: .35; } .hc-belt[data-belt="none"] .hc-belt__fill { stroke-dasharray: 3 3; } .hc-belt__label { font-weight: 700; font-size: var(--hc-fs-sm); } .hc-belt-tile { display: flex; flex-direction: column; align-items: center; gap: var(--hc-s-2); padding: var(--hc-s-4) var(--hc-s-3) var(--hc-s-3); border-radius: var(--hc-r-md); background: var(--hc-paper); border: 1px solid var(--hc-paper-line); text-align: center; --hc-belt-size: 64px; transition: transform var(--hc-dur-4) var(--hc-ease-spring-soft); } .hc-belt-tile:hover { transform: translateY(-3px) rotate(-1deg); } .hc-belt-tile__skill { font-weight: 700; font-size: var(--hc-fs-sm); line-height: 1.25; color: var(--hc-ink); } .hc-belt-tile__belt { font-size: var(--hc-fs-xs); font-weight: 650; color: var(--hc-ink-2); } .hc-belt-tile.is-new { box-shadow: 0 0 0 3px var(--hc-sun-soft), var(--hc-e-2); border-color: var(--hc-sun); } .hc-belt-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--hc-s-3); } .hc-belt-tile--row { flex-direction: row; align-items: center; gap: var(--hc-s-3); padding: var(--hc-s-2) var(--hc-s-3); text-align: left; --hc-belt-size: 44px; } .hc-belt-tile__text { display: flex; flex-direction: column; min-width: 0; } .hc-belt-row--compact { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } /* ----------------------------------------------------------------------------- 18. World preview card ----------------------------------------------------------------------------- */ .hc-worldcard { padding: var(--hc-s-4); border-radius: var(--hc-r-xl); } .hc-worldcard__map { position: relative; overflow: hidden; border-radius: calc(var(--hc-r-xl) - var(--hc-s-3)); background: linear-gradient(180deg, var(--hc-world-sky-1), var(--hc-world-hill-1)); aspect-ratio: 16 / 10; } .hc-worldcard__map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .hc-worldcard__body { padding: var(--hc-s-4) var(--hc-s-2) var(--hc-s-1); } .hc-path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 11; } .hc-node { stroke: #FFFFFF; stroke-width: 3; } .hc-node--green { fill: var(--hc-belt-green); } .hc-node--yellow { fill: var(--hc-belt-yellow); } .hc-node--white { fill: var(--hc-belt-white); stroke: var(--hc-belt-white-edge); } .hc-node--todo { fill: var(--hc-world-hill-1); stroke: #FFFFFF; stroke-width: 2.5; } .hc-node--here { fill: var(--hc-accent); stroke: #FFFFFF; stroke-width: 4; } .hc-node-pulse { fill: none; stroke: #FFFFFF; stroke-width: 2; opacity: .8; transform-box: fill-box; transform-origin: center; animation: hc-pulse 2.4s var(--hc-ease-out) infinite; } @keyframes hc-pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } } /* ----------------------------------------------------------------------------- 19. The question screen Question on solid paper on the left, workspace on the right. Below 1024px the workspace stacks under the question. ----------------------------------------------------------------------------- */ .hc-qbar { display: flex; align-items: center; gap: var(--hc-s-4); padding: var(--hc-s-2) var(--hc-s-2) var(--hc-s-2) var(--hc-s-4); border-radius: 999px; margin-bottom: var(--hc-s-4); } .hc-qbar__title { font-weight: 750; white-space: nowrap; } .hc-qbar__grow { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } @media (max-width: 640px) { .hc-qbar { gap: var(--hc-s-2); padding-left: var(--hc-s-2); } .hc-qbar__title, .hc-qbar .hc-chip { display: none; } .hc-dots { gap: 4px; } .hc-dots li { width: 10px; height: 10px; } .hc-dots li[data-state="current"] { width: 20px; } .hc-dots li[data-part-start] { margin-left: 4px; } } .hc-q { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--hc-s-4); align-items: start; } .hc-q__question, .hc-q__work { padding: var(--hc-s-6); border-radius: var(--hc-r-xl); } .hc-q__question { min-height: 100%; } .hc-q__count { font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-ink-2); } .hc-q__skill { margin-top: 2px; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); } .hc-q__text { margin-top: var(--hc-s-5); font-family: var(--hc-font-maths); font-size: var(--hc-fs-maths); line-height: 1.65; font-weight: 550; color: var(--hc-ink); max-width: 34em; } .hc-q__text p + p { margin-top: var(--hc-s-4); } .hc-q__ask { font-weight: 750; } .hc-q__tools { display: flex; gap: var(--hc-s-2); margin-top: var(--hc-s-6); flex-wrap: wrap; } .hc-q__work { display: flex; flex-direction: column; gap: var(--hc-s-5); } .hc-q__work-title { font-size: var(--hc-fs-md); font-weight: 750; color: var(--hc-ink-2); } @media (max-width: 1023.98px) { .hc-q { grid-template-columns: 1fr; } .hc-q__question, .hc-q__work { padding: var(--hc-s-5); } } /* Maths fraction (display) */ .hc-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .12em; line-height: 1.05; font-size: .92em; font-weight: 700; } .hc-frac > span:first-child { padding: 0 .2em .08em; border-bottom: .1em solid currentColor; } .hc-frac > span:last-child { padding: .08em .2em 0; } /* Bar model / workspace drawing */ .hc-model { display: flex; flex-direction: column; gap: var(--hc-s-2); } .hc-model__bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; border: 2px solid var(--hc-ink); } .hc-model__bar > span { flex: 1; border-right: 1.5px solid var(--hc-ink); display: grid; place-items: center; font-size: var(--hc-fs-xs); font-weight: 700; } .hc-model__bar > span:last-child { border-right: 0; } .hc-model__bar > .is-shaded { background: var(--hc-accent-soft); color: var(--hc-accent-ink); } .hc-model__bar > .is-shaded-2 { background: var(--hc-sun-soft); color: var(--hc-sun-ink); } .hc-model__label { display: flex; justify-content: space-between; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); font-weight: 600; } .hc-scratch { min-height: 120px; padding: var(--hc-s-4); border-radius: var(--hc-r-md); background: repeating-linear-gradient(0deg, transparent 0 31px, var(--hc-paper-line) 31px 32px), var(--hc-paper-2); font-size: var(--hc-fs-lg); line-height: 32px; color: var(--hc-ink); } /* ----------------------------------------------------------------------------- 20. Answer inputs and choice buttons ----------------------------------------------------------------------------- */ .hc-answer { display: flex; align-items: center; gap: var(--hc-s-4); flex-wrap: wrap; } .hc-answer__label { font-weight: 750; font-size: var(--hc-fs-md); } .hc-input { width: 100%; min-height: 56px; padding: 0 var(--hc-s-4); border-radius: var(--hc-r-sm); border: 2px solid var(--hc-paper-line); background: var(--hc-paper); color: var(--hc-ink); font-size: var(--hc-fs-xl); font-weight: 700; text-align: center; transition: border-color var(--hc-dur-2) var(--hc-ease-out), box-shadow var(--hc-dur-2) var(--hc-ease-out); } .hc-input::placeholder { color: var(--hc-ink-3); font-weight: 600; } .hc-input:focus, .hc-input.is-active { outline: none; border-color: var(--hc-accent); box-shadow: 0 0 0 4px var(--hc-accent-soft); } .hc-input--short { width: 5.5em; } /* A text answer that can run long (a number in words is up to 90 characters): a textarea one line high, as tall as the input above, that grows with what is typed (field-sizing where the browser has it, else the page's script); the page's script makes Enter check, as in the other boxes. */ textarea.hc-input { display: block; height: auto; padding: max(0px, calc((52px - 1.35em) / 2)) var(--hc-s-4); line-height: 1.35; text-align: left; resize: none; overflow: hidden; overflow-wrap: break-word; field-sizing: content; } .hc-frac-input { display: inline-grid; grid-template-rows: auto 4px auto; gap: 6px; justify-items: center; } .hc-frac-input .hc-input { width: 4.2em; min-height: 52px; } .hc-frac-input__bar { width: 100%; height: 4px; border-radius: 2px; background: var(--hc-ink); } .hc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hc-s-3); } .hc-choice { display: flex; align-items: center; gap: var(--hc-s-3); min-height: 64px; padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); border: 2px solid var(--hc-paper-line); background: var(--hc-paper); color: var(--hc-ink); font-size: var(--hc-fs-lg); font-weight: 700; text-align: left; cursor: pointer; transition: transform var(--hc-dur-3) var(--hc-ease-spring), border-color var(--hc-dur-2) var(--hc-ease-out), box-shadow var(--hc-dur-2) var(--hc-ease-out); } .hc-choice:hover { border-color: var(--hc-accent); transform: translateY(-2px); } .hc-choice:active { transform: scale(var(--hc-press)); } .hc-choice__key { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: var(--hc-fs-sm); font-weight: 800; color: var(--hc-ink-2); background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); } .hc-choice[aria-pressed="true"], .hc-choice.is-selected { border-color: var(--hc-accent); box-shadow: 0 0 0 4px var(--hc-accent-soft); } .hc-choice[aria-pressed="true"] .hc-choice__key, .hc-choice.is-selected .hc-choice__key { color: var(--hc-on-accent); background: var(--hc-accent); border-color: transparent; } .hc-choice.is-right { border-color: var(--hc-good); background: var(--hc-good-soft); } .hc-choice.is-wrong { border-color: var(--hc-bad); background: var(--hc-bad-soft); } .hc-check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hc-s-4); flex-wrap: wrap; } .hc-hint-key { display: inline-flex; align-items: center; gap: var(--hc-s-2); color: var(--hc-ink-2); font-weight: 650; font-size: var(--hc-fs-sm); } .hc-feedback { display: flex; align-items: center; gap: var(--hc-s-3); padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); font-weight: 700; } .hc-feedback--right { color: var(--hc-good-ink); background: var(--hc-good-soft); } .hc-feedback--wrong { color: var(--hc-bad-ink); background: var(--hc-bad-soft); } /* ----------------------------------------------------------------------------- 21. Hint: step reveal (solid; it holds maths) ----------------------------------------------------------------------------- */ .hc-hint { padding: var(--hc-s-4) var(--hc-s-5); border-radius: var(--hc-r-md); background: var(--hc-sun-soft); border: 1px solid color-mix(in srgb, var(--hc-sun) 45%, transparent); } .hc-hint__head { display: flex; align-items: center; gap: var(--hc-s-2); font-weight: 750; color: var(--hc-sun-ink); font-size: var(--hc-fs-sm); } .hc-hint__head svg { width: 20px; height: 20px; } .hc-steps { list-style: none; display: flex; flex-direction: column; gap: var(--hc-s-2); margin-top: var(--hc-s-3); } .hc-step { display: grid; grid-template-columns: auto 1fr; gap: var(--hc-s-3); align-items: baseline; font-size: var(--hc-fs-md); line-height: 1.55; color: var(--hc-ink); } .hc-step__n { font-weight: 800; color: var(--hc-sun-ink); font-size: var(--hc-fs-sm); } .hc-step.is-revealed { animation: hc-reveal var(--hc-dur-4) var(--hc-ease-spring-soft) both; } .hc-step.is-locked { color: var(--hc-ink-2); } .hc-step.is-locked .hc-step__body { padding: 2px 10px; border-radius: 8px; border: 1.5px dashed color-mix(in srgb, var(--hc-sun-ink) 40%, transparent); font-size: var(--hc-fs-sm); font-weight: 650; } @keyframes hc-reveal { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } /* ----------------------------------------------------------------------------- 22. Teacher's note bubble (glass; short words only, no maths) ----------------------------------------------------------------------------- */ .hc-note { display: flex; align-items: flex-end; gap: var(--hc-s-3); } .hc-note__bubble { padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-lg) var(--hc-r-lg) var(--hc-r-lg) 6px; font-size: var(--hc-fs-md); font-weight: 650; line-height: 1.4; max-width: 36ch; } .hc-note__who { display: block; font-size: var(--hc-fs-xs); font-weight: 750; color: var(--hc-glass-ink-2); margin-bottom: 2px; } .hc-note--pop .hc-note__bubble { animation: hc-pop var(--hc-dur-4) var(--hc-ease-spring) both; transform-origin: 0 100%; } @keyframes hc-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } } /* ----------------------------------------------------------------------------- 23. Parent report rows: sentence + evidence count + "why?" + flag ----------------------------------------------------------------------------- */ .hc-verdict { padding: var(--hc-s-5) var(--hc-s-6); border-radius: var(--hc-r-xl); } .hc-verdict__label { font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-ink-2); } .hc-verdict__text { margin-top: var(--hc-s-2); font-size: var(--hc-fs-2xl); font-weight: var(--hc-weight-head); line-height: 1.22; letter-spacing: -.015em; } .hc-section { padding: var(--hc-s-5); border-radius: var(--hc-r-lg); container-type: inline-size; } .hc-section__title { display: flex; align-items: center; gap: var(--hc-s-2); font-size: var(--hc-fs-lg); font-weight: var(--hc-weight-head); margin-bottom: var(--hc-s-2); } .hc-section__title svg { width: 22px; height: 22px; flex: none; } .hc-section--good .hc-section__title svg { color: var(--hc-good-ink); } .hc-section--hard .hc-section__title svg { color: var(--hc-bad-ink); } .hc-section--fix .hc-section__title svg { color: var(--hc-accent-ink); } .hc-section--home .hc-section__title svg { color: var(--hc-sun-ink); } /* Each section's title is a tinted, full-width head with its icon in a paper tile (COLOUR.md 6); the modifier sets the colour: --good green, --hard rose, default and --fix the accent, --sun and --home amber, --green the brand green, --grade the grade's tint (needs data-grade) */ .hc-section { --hc-sec-pad: var(--hc-s-5); --hc-sec-soft: var(--hc-accent-soft); --hc-sec-ink: var(--hc-accent-ink); } .hc-section--good { --hc-sec-soft: var(--hc-good-soft); --hc-sec-ink: var(--hc-good-ink); } .hc-section--hard { --hc-sec-soft: var(--hc-bad-soft); --hc-sec-ink: var(--hc-bad-ink); } .hc-section--home, .hc-section--sun { --hc-sec-soft: var(--hc-sun-soft); --hc-sec-ink: var(--hc-sun-ink); } .hc-section--green, .hc-section--term { --hc-sec-soft: var(--hc-green-soft); --hc-sec-ink: var(--hc-green-ink); } /* parent home's This term */ .hc-section--grade { --hc-sec-soft: var(--hc-gc-soft); --hc-sec-ink: var(--hc-gc-ink); } .hc-section > .hc-section__title { margin: calc(var(--hc-sec-pad) * -1) calc(var(--hc-sec-pad) * -1) var(--hc-s-3); padding: 12px var(--hc-sec-pad); border-radius: calc(var(--hc-r-lg) - 1px) calc(var(--hc-r-lg) - 1px) 0 0; background: linear-gradient(90deg, var(--hc-sec-soft) 0%, color-mix(in srgb, var(--hc-sec-soft) 40%, var(--hc-paper)) 100%); border-bottom: 1px solid color-mix(in srgb, var(--hc-sec-ink) 14%, var(--hc-paper-line)); } .hc-section > .hc-section__title svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--hc-sec-ink); background: var(--hc-paper); box-shadow: 0 1px 2px rgba(var(--hc-shadow), .08); } @media (max-width: 560px) { .hc-section { --hc-sec-pad: var(--hc-s-4); } } /* The verdict as the parent page's band (.hc-verdict.hc-band) */ .hc-verdict.hc-band { padding: var(--hc-s-6) var(--hc-s-6) var(--hc-s-5); } .hc-verdict.hc-band .hc-verdict__text { max-width: 34ch; } @media (max-width: 560px) { .hc-verdict.hc-band { padding: var(--hc-s-5); } } .hc-report { list-style: none; } .hc-report__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--hc-s-2) var(--hc-s-4); align-items: center; padding: var(--hc-s-3) 0; border-top: 1px solid var(--hc-paper-line); } .hc-report__row:first-child { border-top: 0; } .hc-report__skill { display: block; font-size: var(--hc-fs-xs); font-weight: 700; color: var(--hc-ink-2); margin-bottom: 2px; } .hc-report__text { font-size: var(--hc-fs-md); line-height: 1.45; color: var(--hc-ink); } .hc-report__meta { display: flex; align-items: center; gap: var(--hc-s-2); justify-self: end; white-space: nowrap; } .hc-evidence { font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-ink-2); font-variant-numeric: tabular-nums; } .hc-why { font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; padding: 6px 4px; border-radius: 6px; } .hc-why:hover { background: var(--hc-accent-soft); } .hc-flag { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--hc-ink-3); cursor: pointer; } .hc-flag:hover { background: var(--hc-paper-2); color: var(--hc-bad-ink); } .hc-flag svg { width: 16px; height: 16px; } @container (max-width: 440px) { .hc-report__row { grid-template-columns: 1fr; gap: 2px; } .hc-report__meta { justify-self: start; margin-left: -4px; } } @media (max-width: 560px) { .hc-report__row { grid-template-columns: 1fr; } .hc-report__meta { justify-self: start; margin-left: -4px; } .hc-verdict { padding: var(--hc-s-5); } .hc-verdict__text { font-size: var(--hc-fs-xl); } .hc-section { padding: var(--hc-s-4); } } /* Child switcher (segmented control on glass) */ .hc-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; } .hc-switch__opt { display: inline-flex; align-items: center; gap: var(--hc-s-2); min-height: 40px; padding: 0 var(--hc-s-4) 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--hc-glass-ink-2); font-weight: 700; cursor: pointer; transition: background-color var(--hc-dur-2) var(--hc-ease-out), transform var(--hc-dur-3) var(--hc-ease-spring); } .hc-switch__opt:active { transform: scale(var(--hc-press)); } .hc-switch__opt[aria-pressed="true"] { color: var(--hc-ink); background: var(--hc-paper); box-shadow: var(--hc-e-1); } .hc-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #FFFFFF; background: linear-gradient(160deg, var(--hc-avatar-a, #2F7D22), var(--hc-avatar-b, #205012)); /* a child with no grade: the brand green */ } /* Meter: skills secure in a world */ .hc-meter { height: 10px; border-radius: 999px; background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); overflow: hidden; } .hc-meter > span { display: block; height: 100%; width: calc(var(--value, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--hc-good), color-mix(in srgb, var(--hc-good) 70%, #FFFFFF)); } /* ----------------------------------------------------------------------------- 24. Toast (glass, bottom centre; role="status") ----------------------------------------------------------------------------- */ .hc-toast { position: fixed; z-index: 40; left: 50%; bottom: var(--hc-s-6); translate: -50% 0; display: flex; align-items: center; gap: var(--hc-s-3); padding: var(--hc-s-2) var(--hc-s-5) var(--hc-s-2) var(--hc-s-2); border-radius: 999px; font-weight: 700; animation: hc-toast-in var(--hc-dur-4) var(--hc-ease-spring) both; } .hc-toast--static { position: relative; left: auto; bottom: auto; translate: none; display: inline-flex; } .hc-toast__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hc-good); color: #FFFFFF; } .hc-toast__icon svg { width: 20px; height: 20px; } @keyframes hc-toast-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } } @media (max-width: 1023.98px) { .hc-toast { bottom: 104px; } } /* ----------------------------------------------------------------------------- 25. Page layouts ----------------------------------------------------------------------------- */ /* Pages with their own SVG scene hide the CSS hills */ .hc-world--scene::before, .hc-world--scene::after { display: none; } /* Focus pages (the question screen): no sidebar, the glass bar leads */ .hc-shell--focus { padding: var(--hc-s-4) var(--hc-s-6) var(--hc-s-6); } @media (max-width: 1023.98px) { .hc-shell--focus { padding: var(--hc-s-3) var(--hc-s-4) var(--hc-s-6); } } /* Kid home */ .hc-home { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: var(--hc-s-5); align-items: start; } .hc-home__side { display: flex; flex-direction: column; gap: var(--hc-s-4); } .hc-home__belts { grid-column: 1 / -1; } @media (max-width: 1180px) { .hc-home { grid-template-columns: minmax(0, 1fr); } .hc-home .hc-worldcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--hc-s-2); } .hc-home .hc-worldcard__map { aspect-ratio: 16 / 8; } } @media (max-width: 640px) { .hc-home .hc-worldcard { display: block; } .hc-mission__inner { padding: var(--hc-s-5) var(--hc-s-4); } } /* Parent home */ .hc-parent { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--hc-s-4); align-items: start; } .hc-parent__col { display: flex; flex-direction: column; gap: var(--hc-s-4); min-width: 0; } .hc-parent__full { grid-column: 1 / -1; } @media (max-width: 900px) { .hc-parent { grid-template-columns: minmax(0, 1fr); } } .hc-parent-top { display: flex; align-items: center; justify-content: space-between; gap: var(--hc-s-3); flex-wrap: wrap; margin-bottom: var(--hc-s-4); } /* Section label that sits on the world (glass pill) */ .hc-label-pill { display: inline-flex; align-items: center; gap: var(--hc-s-2); padding: 6px 14px 6px 8px; border-radius: 999px; font-weight: 750; font-size: var(--hc-fs-md); } .hc-label-pill svg { width: 22px; height: 22px; } /* ----------------------------------------------------------------------------- 26. Old explanation markup inside new pages: wrap in .hc-legacy From a scan of src/Problems/Primary5 (22 Oct 2026): class FractionsTable (190 uses: fractions as  3 
 4), class side (37), Reports (8), tr.alt (6); tables with id explanation / ProblemTable and border/cellpadding attributes; (35); inline color:white (91, written for the old dark answer box), color:red (39), color:blue, color:black, background-color:#307554;color:#fff header cells (16); bar-model blocks; Flash / (91, dead). Inline styles need !important. ----------------------------------------------------------------------------- */ .hc-legacy { color: var(--hc-ink); font-size: var(--hc-fs-md); line-height: 1.5; } .hc-legacy table { border-collapse: collapse; margin: var(--hc-s-2) 0; color: inherit; font: inherit; } .hc-legacy td, .hc-legacy th { padding: 2px 6px; vertical-align: middle; color: inherit; } .hc-legacy table[border] td, .hc-legacy table[border] th { border: 1px solid var(--hc-paper-line); padding: 6px 10px; } .hc-legacy th { font-weight: 750; text-align: left; background: var(--hc-paper-2); } .hc-legacy .FractionsTable { font-family: inherit; font-size: 1em; } .hc-legacy .FractionsTable td { text-align: left; padding: 0 3px; border: none; vertical-align: middle; } .hc-legacy td[align="center"] { text-align: center; } .hc-legacy td[align="right"] { text-align: right; } /* A fraction: numerator
denominator. Turn the underline into a bar. */ .hc-legacy td > u { display: inline-block; text-decoration: none; border-bottom: 2px solid currentColor; line-height: 1.3; padding-bottom: 1px; } .hc-legacy .side { float: none; display: inline-block; width: auto !important; margin: 2px 0 2px var(--hc-s-2); padding: 2px 10px; border-radius: 8px; font: inherit; font-size: var(--hc-fs-sm) !important; font-style: italic; color: var(--hc-ink-2); background: var(--hc-paper-2); } .hc-legacy .Reports td, .hc-legacy #ProblemTable td { border: 1px solid var(--hc-paper-line); padding: 6px 12px; } .hc-legacy tr.alt td { background: var(--hc-paper-2); } .hc-legacy font { font: inherit; color: inherit; } .hc-legacy font[style*="color:yellow"], .hc-legacy font[style*="color: yellow"] { color: var(--hc-accent-ink) !important; font-style: italic !important; font-size: .9em !important; } .hc-legacy [style*="color:white"], .hc-legacy [style*="color: white"], .hc-legacy [style*="color:#fff"], .hc-legacy [style*="color: #fff"], .hc-legacy [style*="color:#FFF"], .hc-legacy [style*="color:black"], .hc-legacy [style*="color: black"] { color: inherit !important; } .hc-legacy [style*="color:yellow"]:not(font) { color: var(--hc-accent-ink) !important; } .hc-legacy [style*="color:red"], .hc-legacy [style*="color: red"] { color: var(--hc-bad-ink) !important; font-weight: 700; } .hc-legacy [style*="color:blue"], .hc-legacy [style*="color: blue"] { color: var(--hc-accent-ink) !important; } .hc-legacy [style*="background-color:#307554"] { background: var(--hc-good-soft) !important; color: var(--hc-good-ink) !important; font-weight: 750; } .hc-legacy img { max-width: 100%; vertical-align: middle; } /* Task T1: a fraction written inline in a generator's question text (, numerator row over denominator row) sits as in section 32's lessons: compact, its bar on the middle of the words, and every line of its block one even height */ .hc-legacy table[style*="display:inline"] { display: inline-table !important; vertical-align: middle !important; margin: 0 .15em !important; padding: 0 !important; font-size: .8em; line-height: 1 !important; } .hc-legacy table[style*="display:inline"] :is(tr, td) { padding: 0 .12em !important; line-height: 1 !important; } .hc-legacy table[style*="display:inline"] td[rowspan] { font-size: 1.25em; padding-right: .2em !important; } :is(.hc-legacy, .hc-legacy :is(div, p, li, td)):has(> table[style*="display:inline"], > :is(b, strong, span, em, i, font) > table[style*="display:inline"]) { line-height: 1.8; } .hc-legacy object, .hc-legacy embed { display: none; } /* Reading of 22 Oct 2026 (redesign/reading/p5): the bridge build turns an emphasis colour on an inline element (the operation done first, the rounding digit, the zeros added) into these classes; hc-em--2 is the second, cool colour where a step uses two. A table wider than the paper (a week of visitors, a place-value chart) scrolls inside the paper instead of spilling out of it; bordered tables are a little tighter. */ .hc-legacy .hc-em { color: var(--hc-accent-ink); font-weight: 800; } .hc-legacy .hc-em--2 { color: var(--hc-good-ink); } .hc-legacy { overflow-x: auto; overflow-y: hidden; } .hc-legacy table[border] { font-size: .9em; } .hc-legacy table[border] td, .hc-legacy table[border] th { padding: 4px 6px; } /* A question's bordered table of 8 columns or more (a week of days and its total; only P5 WholeNumbers.WordProblems Type119 to 121 have one) needs every column to solve it: smaller type and cells, so it fits the paper of a 1280 px laptop without scrolling (the app's question screen also gives that paper more of the width, app-core.css); narrower, it still scrolls inside the paper. */ .hc-q__text.hc-legacy table[border]:has(> tbody > tr > :nth-child(8)) { font-size: .76em; } .hc-q__text.hc-legacy table[border]:has(> tbody > tr > :nth-child(8)) :is(td, th) { padding: 3px 5px; } /* Picture models (block and brace images in table cells): the braces are fixed-size images drawn for the old page's tight cells (2px spacing, 1px padding, small line height). Wider or taller cells leave a brace covering 3 blocks of 4, or the plates of a stack of plates and bowls. Keep the old spacing. */ .hc-legacy table:has(img) { border-collapse: separate; border-spacing: 2px; line-height: 1.2; } .hc-legacy table:has(img) td { padding: 1px; } /* The braces themselves stretch to what they mark: a vertical brace alone in a cell spanning rows fills those rows (a 2 cm brace drawn over 3 plates no longer pushes the rows apart), a horizontal brace alone over or under blocks takes the width of its columns (several braces side by side in one cell keep their own widths, so the labels under them stay under their parts). */ .hc-legacy td[rowspan]:has(> img[src*="curly_braces"]:only-child) { position: relative; width: 24px; min-width: 24px; } .hc-legacy td[rowspan] > img[src*="curly_braces"]:only-child { position: absolute; top: 2px; left: 1px; width: 22px; height: calc(100% - 4px); max-width: none; } .hc-legacy td[colspan] > img[src*="up_curly_braces"]:only-of-type, .hc-legacy td[colspan] > img[src*="down_curly_braces"]:only-of-type { width: 100%; height: 24px; } /* Two labels side by side over their braces ("season-pass holders" | "non-pass holders") would touch: the second label's first line gets 10px in front of it. Only that line widens, so only a label wider than its 2 cm or 3 cm brace moves its column; cell padding would widen columns of blocks too and break even rows of equal parts. */ .hc-legacy table:has(img) td:has(> br):has(> img[src*="curly_braces"]) + td:has(> br):has(> img[src*="curly_braces_2cm"], > img[src*="curly_braces_3cm"])::before { content: ""; display: inline-block; width: 10px; } /* Written working with an italic side note in its own column (P5 decimals x 10, 100, 1000): the maths cells keep their line, the note wraps. */ .hc-legacy table:has(.side) td:not(:has(.side)) { white-space: nowrap; } /* Reading of 23 Oct 2026 (redesign/reading/p34): a centred "=" cell ("  =") in an ExplanationTable and the sum after it ("1000 ml + 100 ml + 90 ml", P3 Litres and Millilitres) keep their line; the label column wraps instead (the sum broke "90 / ml", and the "=" fell to a second line below its value). */ .hc-legacy .ExplanationTable td[style*="text-align:center"], .hc-legacy .ExplanationTable td[style*="text-align:center"] + td { white-space: nowrap; } /* A sentence laid out as one FractionsTable row ("At first Stacy has 9/11 m of fabric. After she uses ...") flows as a line of words and fractions instead of each cell wrapping on its own. */ .hc-legacy .FractionsTable:has(> tbody > tr:only-child), .hc-legacy .FractionsTable:has(> tbody > tr:only-child) > tbody, .hc-legacy .FractionsTable:has(> tbody > tr:only-child) > tbody > tr { display: block; } .hc-legacy .FractionsTable:has(> tbody > tr:only-child) > tbody > tr > td { display: inline-block; vertical-align: middle; } /* Launch reading, 24 Oct 2026: in a P6 question, the bridge takes a sentence out of its one-row FractionsTable and keeps each fraction in a small table of its own, marked hc-flow, that sits in the line of words (P6 Fractions, Ratio, Speed and Percentage word problems). No P3 to P5 question has the mark, so none moves. */ .hc-legacy .FractionsTable.hc-flow, .hc-legacy .FractionsTable.hc-flow:has(> tbody > tr:only-child) { display: inline-block; vertical-align: middle; margin: 0; } /* Geometry figures (js/DrawAngles.js, js/DrawShapes.js) draw black lines on a transparent canvas: give them a light card so they stay visible on dark paper. */ /* The model's braces, arrows and dotted blocks are black line drawings on a transparent ground: light lines on dark paper. */ [data-theme="dark"] .hc-legacy :is(img[src*="curly_braces"], img[src*="arrow"], img[src*="dotted_block"]) { filter: invert(1); } @media (prefers-color-scheme: dark) { [data-mode]:not([data-theme="light"]) .hc-legacy :is(img[src*="curly_braces"], img[src*="arrow"], img[src*="dotted_block"]) { filter: invert(1); } } /* Launch reading P3, 24 Oct 2026. P3's explanation pictures (braces, arrows, lines, distance marks: the files P3_* but its coloured place-value arrows, line*, right_arrow_2, *_curved_arrow*; no P4 to P6 type uses them) are white or yellow drawings made for the old page's dark board, so on light paper they vanished. They are drawn dark on light paper and as they are on dark paper. A P3 bar model's units lost their random fill when the bridge strips colours; the bridge marks them hc-bar, hc-bar--2, hc-bar--3 (the model's first, second, third colour). Only the border colour is set, and cells touch side by side: a unit drawn as two cells keeps its open side (border-right:0) and reads as one. */ .hc-legacy :is(img[src*="/explanation/P3_"]:not([src*="P3_model_arrow_"]), img[src*="/explanation/line"], img[src$="/explanation/right_arrow_2.png"], img[src*="_curved_arrow"]) { filter: brightness(0) opacity(.72); } [data-theme="dark"] .hc-legacy :is(img[src*="/explanation/P3_"]:not([src*="P3_model_arrow_"]), img[src*="/explanation/line"], img[src$="/explanation/right_arrow_2.png"], img[src*="_curved_arrow"]) { filter: none; } @media (prefers-color-scheme: dark) { [data-mode]:not([data-theme="light"]) .hc-legacy :is(img[src*="/explanation/P3_"]:not([src*="P3_model_arrow_"]), img[src*="/explanation/line"], img[src$="/explanation/right_arrow_2.png"], img[src*="_curved_arrow"]) { filter: none; } } /* A model's picture keeps its own width: in a wide model (8 units and a brace) max-width: 100% let the brace's cell squeeze it to nothing (P3 Division Type4a seed 0); the paper scrolls instead. */ .hc-legacy img[src*="/explanation/P3_model_"] { max-width: none; } .hc-legacy td.hc-bar { background: color-mix(in srgb, var(--hc-accent) 28%, var(--hc-paper)) !important; border-color: var(--hc-ink-3) !important; } .hc-legacy table:has(td.hc-bar) { border-spacing: 0 2px; } .hc-legacy td.hc-bar--2 { background: color-mix(in srgb, var(--hc-good) 32%, var(--hc-paper)) !important; } .hc-legacy td.hc-bar--3 { background: color-mix(in srgb, var(--hc-sun) 42%, var(--hc-paper)) !important; } /* Launch reading P3 round 1, 24 Oct 2026: P3 Fractions write a fraction as two paragraphs of line-height 20% ("N
__" over "
D"), laid out by the browser's own paragraph margins, which the design system takes away: the top number printed over the bottom one and the bar struck it through. Those paragraphs get their margins back (only P3 Fractions write them). */ .hc-legacy p:is([style*="line-height:20%"], [style*="line-height: 20%"], [style*="line-height:10%"], [style*="line-height: 10%"]) { margin: 1em 0; } /* P3 money working (ExplanationMoneyTable; only P3 writes it) is set right as on the old page, so a two-digit dollar written in one cell ("1   4") keeps its digits under the columns above it. */ .hc-legacy .ExplanationMoneyTable td { text-align: right; } /* Two P3 Perpendicular and Parallel pictures draw pure yellow lines that all but vanish on light paper: drawn a darker yellow with a fine dark edge (the question names the colour). */ .hc-legacy img:is([src$="/P3PP_Perpendicular_PT1g.png"], [src$="/P3PP_Parallel_PT5e.png"]) { filter: brightness(.82) drop-shadow(0 0 .6px #4a3b00); } [data-theme="dark"] .hc-legacy img:is([src$="/P3PP_Perpendicular_PT1g.png"], [src$="/P3PP_Parallel_PT5e.png"]) { filter: none; } @media (prefers-color-scheme: dark) { [data-mode]:not([data-theme="light"]) .hc-legacy img:is([src$="/P3PP_Perpendicular_PT1g.png"], [src$="/P3PP_Parallel_PT5e.png"]) { filter: none; } } .hc-legacy canvas, #canvasCrossBrowserDiv canvas, canvas#canvasCrossBrowser { background: #fff; border-radius: 8px; max-width: 100%; } /* ----------------------------------------------------------------------------- 27. Motion off: no movement, keep state changes ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hc-root *, .hc-root *::before, .hc-root *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .hc-node-pulse { display: none; } } /* Cross-document view transitions between app pages (progressive) */ @view-transition { navigation: auto; } /* ----------------------------------------------------------------------------- 28. Learn page v2 (plan 9.1): the old lesson markup on paper NotesPage2.html puts the lesson in .hc-root.hc-lessonpage inside the site's old chrome (MainPage.html: Bootstrap and homecampus.css still load), so each rule is scoped to .hc-lessonpage and undoes the old floats and widths. The lesson text itself is unchanged; only how it looks. Classes from a scan of templates/Notes/Primary5 (22 Oct 2026): learn-set (195), learn-set__question with an h4 (182), learn-set__answer and __nest, learn-set__video (75), concept-set (45, the "Concepts Explained" box), col-N / col-off-N (about 400, the old grid), hint-box (100), the red "Practice Unlimited Questions" button (btn-primary btn-embossed, 275), learn-heading (55), FractionsTable (20). ----------------------------------------------------------------------------- */ .hc-lessonpage { padding: var(--hc-s-6) var(--hc-s-5) var(--hc-s-9); background: linear-gradient(180deg, color-mix(in srgb, var(--hc-bg) 55%, var(--hc-paper)) 0, var(--hc-paper-2) 520px); color: var(--hc-ink); } .hc-lessonpage__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--hc-s-5); align-items: start; } .hc-lessonpage__grid--solo { grid-template-columns: minmax(0, 880px); justify-content: center; } .hc-lessonpage__aside { position: sticky; top: var(--hc-s-4); display: flex; flex-direction: column; gap: var(--hc-s-4); } @media (max-width: 1023.98px) { .hc-lessonpage { padding: var(--hc-s-4) var(--hc-s-4) calc(var(--hc-s-9) + 40px); } .hc-lessonpage__grid { grid-template-columns: minmax(0, 1fr); } .hc-lessonpage__aside { position: static; } } /* the lesson's own markup */ .hc-lesson { padding: var(--hc-s-7) var(--hc-s-8); border-radius: var(--hc-r-xl); font-size: var(--hc-fs-md); line-height: 1.6; overflow-wrap: anywhere; } .hc-lesson::after { content: ""; display: block; clear: both; } @media (max-width: 640px) { .hc-lessonpage { padding-left: var(--hc-s-1); padding-right: var(--hc-s-1); } .hc-lesson { padding: var(--hc-s-5) var(--hc-s-4); } .hc-lessonpage .hc-lesson h1 { font-size: var(--hc-fs-2xl); } .hc-lessonpage .learn-set__question h4 { font-size: var(--hc-fs-lg); } } .hc-lessonpage :is(.learn-heading, .learn-set, .learn-set__container, .learn-set__answer, .learn-set__nest, .learn-set__question, .concept-set, .concept-set__container, .concept-set__answer, .concept-set__question, [class^="col-"], [class*=" col-"]) { float: none; width: auto; min-height: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; text-indent: 0; } .hc-lessonpage .hc-lesson h1 { margin: 0 0 var(--hc-s-5); font-size: var(--hc-fs-3xl); font-weight: var(--hc-weight-head); line-height: 1.12; letter-spacing: -.02em; color: var(--hc-ink); text-align: left; text-transform: none; } .hc-lessonpage .hc-lesson :is(h2, h3) { color: var(--hc-ink); font-weight: 750; line-height: 1.25; margin: var(--hc-s-5) 0 var(--hc-s-3); } .hc-lessonpage .hc-lesson h2 { font-size: var(--hc-fs-xl); } .hc-lessonpage .hc-lesson h3 { font-size: var(--hc-fs-lg); } .hc-lessonpage .hc-lesson img { max-width: 100%; height: auto; vertical-align: middle; } .hc-lessonpage .hc-lesson table { max-width: 100%; } .hc-lessonpage .hc-lesson a:not(.hc-btn):not([class*="btn-"]) { color: var(--hc-accent-ink); } /* a concept, one per learn-set: a card with its heading */ .hc-lessonpage .learn-set { margin: 0; padding: var(--hc-s-6) 0 0; border-top: 1px solid var(--hc-paper-line); margin-top: var(--hc-s-6); } .hc-lessonpage .learn-set__container { border: 0; border-radius: 0; background: none; padding: 0; } .hc-lessonpage .learn-set__container > div { margin: var(--hc-s-3) 0; } .hc-lessonpage .learn-set__question h4 { margin: 0; font-size: var(--hc-fs-xl); font-weight: 750; line-height: 1.25; letter-spacing: -.01em; color: var(--hc-accent-ink); } .hc-lessonpage .learn-set__answer { font-size: var(--hc-fs-md); } .hc-lessonpage .learn-set__video { border: 0; width: auto; margin: var(--hc-s-4) 0; } .hc-lessonpage .learn-set__video > div { padding: 0; height: auto; overflow: visible; position: static; } /* "Concepts Explained": the lesson's contents */ .hc-lessonpage .concept-set { margin: 0 0 var(--hc-s-2); } .hc-lessonpage .concept-set__container { padding: var(--hc-s-4) var(--hc-s-5); border: 1px solid color-mix(in srgb, var(--hc-accent) 22%, transparent); border-radius: var(--hc-r-lg); background: var(--hc-accent-soft) !important; /* the template sets rgb(194, 237, 255) inline */ } .hc-lessonpage .concept-set__question h4 { margin: 0 0 var(--hc-s-2); font-size: var(--hc-fs-md); font-weight: 750; color: var(--hc-accent-ink); } .hc-lessonpage .concept-set__answer a { font-weight: 650; } /* the old grid's side-by-side boxes stack; a hint box is a callout */ .hc-lessonpage .hint-box { margin: var(--hc-s-3) 0; padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-sun-soft); border: 1px solid color-mix(in srgb, var(--hc-sun) 45%, transparent); } /* the old red "Practice Unlimited Questions" button, as a quiet paper button */ .hc-lessonpage .btn-primary.btn-embossed { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--hc-s-4); border-radius: 999px; border: 1px solid var(--hc-paper-line); background: var(--hc-paper) !important; /* the template sets #D7120F inline */ color: var(--hc-accent-ink); font-size: var(--hc-fs-sm); font-weight: 700; text-decoration: none; box-shadow: var(--hc-e-1); white-space: normal; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; text-align: center; } .hc-lessonpage .btn-primary.btn-embossed:hover { color: var(--hc-accent-ink); background: var(--hc-accent-soft) !important; box-shadow: var(--hc-e-2); } .hc-lessonpage div[style*="text-align: center"] > .btn-primary.btn-embossed { margin: 0 auto; } /* fractions written as tables */ .hc-lessonpage .FractionsTable { font: inherit; } .hc-lessonpage .FractionsTable td { padding: 0 3px; vertical-align: middle; } .hc-lessonpage .FractionsTable td > u { text-decoration: none; display: inline-block; border-bottom: 2px solid currentColor; line-height: 1.3; } .hc-lessonpage .homeVideo:empty { display: none !important; } /* the video: a picture until pressed (NotesPage2's script puts the player in) */ .hc-video { position: relative; max-width: 720px; margin: var(--hc-s-4) 0; aspect-ratio: 16 / 9; border-radius: var(--hc-r-lg); overflow: hidden; background: #0E1030; box-shadow: var(--hc-e-2); } .hc-video__play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .hc-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity var(--hc-dur-2) var(--hc-ease-out); } .hc-video__play:hover img { opacity: 1; } .hc-video__icon { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: linear-gradient(180deg, var(--hc-accent-2), var(--hc-accent)); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform var(--hc-dur-3) var(--hc-ease-spring); } .hc-video__icon svg { width: 34px; height: 34px; margin-left: 4px; } .hc-video__play:hover .hc-video__icon { transform: scale(1.06); } .hc-video__label { position: absolute; left: var(--hc-s-3); bottom: var(--hc-s-3); padding: 4px 12px; border-radius: 999px; font-size: var(--hc-fs-sm); font-weight: 700; color: #FFFFFF; background: rgba(14, 16, 48, .72); } .hc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* after the lesson: Try 3, study notes, the parents' strip */ .hc-trycard { padding: var(--hc-s-5); border-radius: var(--hc-r-xl); text-align: left; } .hc-trycard__ninja { width: 56px; height: 56px; display: block; margin-bottom: var(--hc-s-3); } .hc-trycard__title { font-size: var(--hc-fs-xl); font-weight: var(--hc-weight-head); } .hc-trycard__text { margin-top: var(--hc-s-2); color: var(--hc-ink-2); font-size: var(--hc-fs-sm); line-height: 1.5; } .hc-lessonpage .hc-trycard__btn { width: 100%; margin-top: var(--hc-s-4); color: var(--hc-on-accent); text-decoration: none; } .hc-notelink { display: block; padding: var(--hc-s-4) var(--hc-s-5); border-radius: var(--hc-r-lg); text-decoration: none; } .hc-notelink__kicker { display: block; font-size: var(--hc-fs-xs); font-weight: 700; color: var(--hc-ink-2); text-transform: uppercase; letter-spacing: .04em; } .hc-notelink__title { display: block; margin-top: 2px; font-weight: 750; color: var(--hc-accent-ink); } .hc-parentstrip { display: flex; flex-direction: column; gap: var(--hc-s-2); padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-paper); border: 1px solid var(--hc-paper-line); border-left: 4px solid var(--hc-accent); font-size: var(--hc-fs-sm); line-height: 1.45; color: var(--hc-ink); } .hc-lessonpage .hc-parentstrip__link { font-weight: 750; color: var(--hc-accent-ink); text-decoration: none; } .hc-lessonpage .hc-parentstrip__link:hover { text-decoration: underline; } .hc-trybar { display: none; } @media (max-width: 1023.98px) { .hc-trybar { display: flex; justify-content: center; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: var(--hc-s-3) var(--hc-s-4) calc(var(--hc-s-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--hc-paper) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-top: 1px solid var(--hc-paper-line); } .hc-lessonpage .hc-trybar__btn { width: 100%; max-width: 420px; color: var(--hc-on-accent); text-decoration: none; } .hc-lessonpage .hc-trycard { display: none; } /* the bar carries the button on phones and tablets */ } /* ----------------------------------------------------------------------------- 29. The front door (flask_app_front.py): Try 3, the Ninja Trial, save your map One question at a time on solid paper, centred; the glass bar leads. The question fragment from the question API: .hc-qfrag > .hc-q__text (old markup, in .hc-legacy) and one .hc-qpart per answer. ----------------------------------------------------------------------------- */ .hc-front { max-width: 860px; margin: 0 auto; } .hc-front [hidden] { display: none !important; } /* the script shows and hides buttons; .hc-btn's display must not win */ .hc-feedback__answer > br:first-child { display: none; } .hc-front .hc-qbar__lesson { font-weight: 600; } @media (max-width: 760px) { .hc-front .hc-qbar__lesson { display: none; } } .hc-dots li[data-state="done"] { background: color-mix(in srgb, var(--hc-accent) 45%, var(--hc-paper)); } .hc-play { padding: var(--hc-s-6) var(--hc-s-7); border-radius: var(--hc-r-xl); } .hc-play + .hc-play { margin-top: var(--hc-s-4); } @media (max-width: 640px) { .hc-play { padding: var(--hc-s-5) var(--hc-s-4); } } .hc-play--intro, .hc-play--end { display: flex; gap: var(--hc-s-5); align-items: flex-start; } .hc-play--intro[hidden], .hc-play--end[hidden], .hc-play[hidden] { display: none; } @media (max-width: 640px) { .hc-play--intro, .hc-play--end { flex-direction: column; gap: var(--hc-s-3); } } .hc-play__actions { margin-top: var(--hc-s-5); } .hc-play__question { margin-top: var(--hc-s-4); } .hc-qfrag .hc-q__text { margin-top: 0; max-width: none; } .hc-qfrag .hc-q__text table { max-width: 100%; } .hc-qpart { margin-top: var(--hc-s-5); } .hc-qpart__prompt { margin-bottom: var(--hc-s-3); font-weight: 650; } .hc-qpart .hc-answer { gap: var(--hc-s-3); } .hc-answer__unit { font-size: var(--hc-fs-lg); font-weight: 700; color: var(--hc-ink-2); } .hc-input--answer { width: min(14em, 100%); flex: 0 1 14em; text-align: left; } .hc-input--answer[readonly] { background: var(--hc-paper-2); } .hc-qpart textarea.hc-input--answer { flex: 1 1 100%; width: 100%; } .hc-choice__body { min-width: 0; } .hc-choice[disabled] { cursor: default; transform: none; } .hc-choice__body table { display: inline-table; } @media (max-width: 640px) { .hc-front .hc-choices { grid-template-columns: minmax(0, 1fr); } } .hc-play .hc-hint, .hc-play .hc-feedback, .hc-play__steps { margin-top: var(--hc-s-4); } .hc-feedback { flex-wrap: wrap; } .hc-feedback[hidden], .hc-hint[hidden], .hc-play__steps[hidden] { display: none; } .hc-feedback__answer { flex-basis: 100%; font-weight: 600; color: var(--hc-ink); } .hc-play__steps { padding: var(--hc-s-4) var(--hc-s-5); border-radius: var(--hc-r-md); background: var(--hc-paper-2); } .hc-play__steps-head { font-weight: 750; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); } .hc-play .hc-check-row { margin-top: var(--hc-s-5); } .hc-report { margin-top: var(--hc-s-3); font-size: var(--hc-fs-lg); line-height: 1.45; font-weight: 600; color: var(--hc-ink); } /* forms */ .hc-field { display: flex; flex-direction: column; gap: 6px; } .hc-field__label { font-weight: 700; font-size: var(--hc-fs-sm); } .hc-field__help { font-size: var(--hc-fs-xs); color: var(--hc-ink-2); } .hc-input--text { min-height: 48px; font-size: var(--hc-fs-md); font-weight: 600; text-align: left; } .hc-select { appearance: auto; } .hc-consent { display: flex; align-items: flex-start; gap: var(--hc-s-3); font-weight: 650; cursor: pointer; } .hc-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--hc-accent); flex: none; } /* the parent's pages */ .hc-frontbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--hc-s-5); } .hc-frontbar__brand { display: inline-flex; align-items: center; gap: var(--hc-s-2); font-weight: 800; color: var(--hc-glass-ink); text-decoration: none; letter-spacing: -.01em; } .hc-frontbar__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--hc-on-accent); background: linear-gradient(160deg, var(--hc-accent-2), var(--hc-accent)); font-size: 13px; box-shadow: var(--hc-e-1); } .hc-save { max-width: 1040px; } .hc-save__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--hc-s-4); align-items: start; } .hc-save__grid--solo { grid-template-columns: minmax(0, 640px); justify-content: center; } @media (max-width: 860px) { .hc-save__grid { grid-template-columns: minmax(0, 1fr); } } .hc-save__main { padding: var(--hc-s-7); border-radius: var(--hc-r-xl); } .hc-save__aside { padding: var(--hc-s-5); border-radius: var(--hc-r-lg); } @media (max-width: 640px) { .hc-save__main { padding: var(--hc-s-5) var(--hc-s-4); } } .hc-save__kicker { font-size: var(--hc-fs-xs); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--hc-accent-ink); margin-bottom: var(--hc-s-2); } .hc-save__actions { margin-top: var(--hc-s-5); } .hc-save__ways { display: flex; flex-direction: column; gap: var(--hc-s-4); margin-top: var(--hc-s-6); max-width: 420px; } .hc-save__way { display: flex; flex-direction: column; gap: var(--hc-s-3); } .hc-save__google { width: 100%; } .hc-save__google svg { width: 22px; height: 22px; } .hc-save__gsi { min-height: 44px; } .hc-save__gsi[hidden] { display: none; } .hc-save__or { display: flex; align-items: center; gap: var(--hc-s-3); color: var(--hc-ink-3); font-size: var(--hc-fs-sm); font-weight: 650; } .hc-save__or::before, .hc-save__or::after { content: ""; flex: 1; height: 1px; background: var(--hc-paper-line); } .hc-save__email .hc-btn { width: 100%; } .hc-save__fine { margin-top: var(--hc-s-5); max-width: 52ch; } .hc-save__form { margin-top: var(--hc-s-5); max-width: 420px; } .hc-save .hc-feedback { margin-top: var(--hc-s-4); } /* old explanations hold wide tables: they scroll inside their box, the page never sideways */ .hc-front .hc-step { grid-template-columns: auto minmax(0, 1fr); } .hc-front :is(.hc-step__body, .hc-q__text, .hc-feedback__answer, .hc-qpart__prompt) { min-width: 0; max-width: 100%; overflow-x: auto; } .hc-front .hc-legacy table[border] td, .hc-front .hc-legacy table[border] th { padding: 4px 8px; } .hc-lessonpage .hc-lesson :is(table, .FractionsTable) { display: block; max-width: 100%; overflow-x: auto; } .hc-lessonpage .hc-lesson table.FractionsTable, .hc-lessonpage .hc-lesson td table { display: table; } /* ----------------------------------------------------------------------------- 30. The Trial's counts per part of the map (Trial end, save page) ----------------------------------------------------------------------------- */ .hc-root .hc-trial-tiles { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .hc-root .hc-trial-tiles li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: var(--hc-radius-sm, 10px); background: var(--hc-paper-2, rgba(0,0,0,.04)); font-size: var(--hc-fs-sm, .9rem); } .hc-root .hc-trial-tiles b { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ----------------------------------------------------------------------------- 31. The site shell (SiteBase.html, Grade7Base.html; launch plan 4.1) From the design's launch mock-ups (redesign/mockups/launch/SPEC.md section 2, _src/css/10-shell.css), with the design's names: the glass site bar per visitor, the footer, the page strip (page_cta) and the door bar of Start and sign-in pages. One floating glass bar, the same height and place on every public, classic and parent page; the app's own pages keep the sidebar (section 10). Bootstrap 3's CSS shares these pages with the old content, so its element rules (a:hover, h2, p, ul) are answered here where they would reach the chrome. ----------------------------------------------------------------------------- */ :root { --hc-bar-h: 60px; --hc-site-max: 1200px; --hc-gutter: 24px; } @media (max-width: 640px) { :root { --hc-gutter: 16px; --hc-bar-h: 56px; } } html.hc-site { font-size: 18px; } /* the old base's root size (homecampus.min.css): old rem stays as it was */ .hc-site__body { margin: 0; min-height: 100vh; background: var(--hc-world-sky-2); } /* the world's lower sky, not --hc-bg: the fixed world covers the window, but a full-page screenshot (and an overscroll) shows the body below the first window's height, and --hc-bg there drew a lighter band (/Register at 390 px) */ .hc-site-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 8px 14px; border-radius: 999px; background: var(--hc-paper); color: var(--hc-ink); } .hc-site-skip:focus { left: 8px; } .hc-site :is(.hc-sitebar, .hc-sitefoot, .hc-pagecta, .hc-doorbar, .hc-doorfoot) { font-family: var(--hc-font); line-height: 1.5; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .hc-site :is(.hc-sitebar, .hc-sitefoot, .hc-pagecta, .hc-doorbar, .hc-doorfoot) * { box-sizing: border-box; } /* the Grade 7 book has no Bootstrap */ .hc-site :is(.hc-sitebar, .hc-sitefoot, .hc-pagecta, .hc-doorbar, .hc-doorfoot) :where(a):is(:hover, :focus) { text-decoration: none; } .hc-site :is(.hc-sitebar, .hc-sitefoot, .hc-pagecta, .hc-doorbar, .hc-doorfoot) :where(p, h2) { margin: 0; } /* Brand: the HC mark and the name (the mark is the sidebar's, smaller) */ .hc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hc-glass-ink); font-weight: 800; letter-spacing: -.015em; white-space: nowrap; } a.hc-brand:hover, a.hc-brand:focus { color: var(--hc-glass-ink); text-decoration: none; } .hc-brand__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #FFFFFF; background: linear-gradient(160deg, var(--hc-brand-green), var(--hc-brand-green-deep)); font-size: 13px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--hc-e-1); } .hc-brand__name { font-size: 17px; } /* The site bar */ .hc-sitebar { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: var(--hc-s-4); max-width: var(--hc-site-max); height: var(--hc-bar-h); margin: 12px auto 0; padding: 0 10px 0 12px; border-radius: 20px; width: calc(100% - var(--hc-gutter) * 2); } /* white, as today's header, with a light blur and a green-tinted shadow (COLOUR.md 6, section 31) */ .hc-sitebar.hc-glass { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-color: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(20, 50, 15, .06), 0 10px 26px -14px rgba(20, 60, 15, .35); } [data-theme="dark"] .hc-sitebar.hc-glass { background: rgba(26, 32, 30, .94); border-color: rgba(255, 255, 255, .08); } .hc-sitebar__nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; margin-left: var(--hc-s-3); } .hc-sitebar__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; color: var(--hc-glass-ink-2); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color var(--hc-dur-2) var(--hc-ease-out), color var(--hc-dur-2) var(--hc-ease-out); } a.hc-sitebar__link:hover, a.hc-sitebar__link:focus { color: var(--hc-glass-ink); background: rgba(255,255,255,.5); } a.hc-sitebar__link[aria-current="page"] { color: var(--hc-accent-ink); background: var(--hc-paper); box-shadow: var(--hc-e-1); } .hc-sitebar.hc-glass a.hc-sitebar__link:is(:hover, :focus) { background: var(--hc-accent-soft); } /* white bar: a white hover would vanish */ .hc-sitebar__grades { display: inline-flex; gap: 2px; padding: 3px; margin: 0 6px; border-radius: 13px; background: rgba(var(--hc-shadow), .05); } .hc-sitebar__grade { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--hc-glass-ink-2); text-decoration: none; font-variant-numeric: tabular-nums; } a.hc-sitebar__grade:hover, a.hc-sitebar__grade:focus { color: var(--hc-glass-ink); background: var(--hc-paper); } a.hc-sitebar__grade[aria-current="page"] { color: var(--hc-on-accent); background: var(--hc-accent); } /* each grade chip in its grade colour (data-grade); the current grade filled */ .hc-sitebar__grades:has(> [data-grade]) { background: transparent; gap: 4px; } .hc-sitebar__grade[data-grade] { color: var(--hc-gc-ink); background: transparent; } a.hc-sitebar__grade[data-grade]:is(:hover, :focus) { color: var(--hc-gc-ink); background: var(--hc-gc-soft); } a.hc-sitebar__grade[data-grade][aria-current="page"] { color: var(--hc-gc-on); background: var(--hc-gc-band-1); } .hc-sitebar__end { display: flex; align-items: center; gap: var(--hc-s-2); margin-left: auto; } .hc-sitebar__menu { display: none; position: relative; } .hc-sitebar__menu > summary { list-style: none; } .hc-sitebar__menu > summary::-webkit-details-marker { display: none; } .hc-sitebar__menu > summary svg { width: 20px; height: 20px; } .hc-sitebar__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 31; min-width: 240px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 18px; } .hc-sitebar__panel nav { display: flex; flex-direction: column; gap: 2px; } .hc-sitebar__panel .hc-sitebar__link { height: 44px; } .hc-sitebar__panel.hc-glass { background: var(--hc-paper); box-shadow: var(--hc-e-3); } /* solid: text under it must not show through */ .hc-sitebar__panel .hc-sitebar__grades { margin: 4px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .hc-sitebar__panel .hc-sitebar__grade { min-width: 44px; height: 40px; } .hc-bell { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: var(--hc-bad); } /* Buttons in the chrome: Bootstrap's a:hover must not recolour or underline them */ .hc-site :is(.hc-sitebar, .hc-pagecta, .hc-doorbar) a.hc-btn--primary:is(:hover, :focus, :visited) { color: var(--hc-on-accent); } .hc-site :is(.hc-sitebar, .hc-pagecta, .hc-doorbar) a.hc-btn--quiet:is(:hover, :focus, :visited) { color: var(--hc-accent-ink); } .hc-site :is(.hc-sitebar, .hc-pagecta, .hc-doorbar) a.hc-btn--paper:is(:hover, :focus, :visited) { color: var(--hc-ink); } .hc-site :is(.hc-sitebar, .hc-pagecta, .hc-doorbar) a.hc-btn--glass:is(:hover, :focus, :visited) { color: var(--hc-glass-ink); } @media (max-width: 1100px) { .hc-sitebar__link--wide { display: none; } } @media (max-width: 900px) { .hc-sitebar { gap: var(--hc-s-2); } .hc-sitebar__nav, .hc-sitebar__signin { display: none; } .hc-sitebar__menu { display: block; } } @media (max-width: 640px) { .hc-sitebar { top: 8px; margin-top: 8px; border-radius: 18px; padding: 0 8px 0 10px; } .hc-brand__mark { width: 34px; height: 34px; } } @media (max-width: 380px) { .hc-sitebar .hc-brand__name { display: none; } } /* page_cta: the strip under the bar on classic pages (Start free / Try 3 / Practise this) */ .hc-pagecta { position: relative; z-index: 2; max-width: var(--hc-site-max); margin: var(--hc-s-4) auto 0; padding: 0 var(--hc-gutter); } .hc-pagecta__in { display: flex; align-items: center; gap: var(--hc-s-4); padding: 10px 10px 10px 18px; border-radius: 18px; } .hc-pagecta__text { flex: 1 1 auto; font-weight: 700; min-width: 0; color: var(--hc-glass-ink); } .hc-pagecta__text span { font-weight: 600; color: var(--hc-glass-ink-2); } .hc-pagecta .hc-companion { --hc-companion-size: 36px; flex: 0 0 auto; } @media (max-width: 640px) { .hc-pagecta__text span { display: none; } } /* The footer: every link of today's Footer.html, plus the grades */ .hc-sitefoot { position: relative; z-index: 1; margin-top: var(--hc-s-7); color: var(--hc-foot-ink); /* today's footer, made modern (COLOUR.md 6): the light leaf edge at the top, above the text, then foot-1 to foot-2 */ background: linear-gradient(180deg, var(--hc-brand-leaf) 0, color-mix(in srgb, var(--hc-brand-green) 85%, var(--hc-foot-1)) 14px, var(--hc-foot-1) 40px, var(--hc-foot-2) 100%); } [data-theme="dark"] .hc-sitefoot { background: linear-gradient(180deg, #3E7A33 0, var(--hc-foot-1) 30px, var(--hc-foot-2) 100%); } .hc-sitefoot .hc-brand, .hc-sitefoot a.hc-brand:is(:hover, :focus) { color: var(--hc-foot-ink); } .hc-sitefoot .hc-brand__mark { color: #2A1700; background: linear-gradient(160deg, #FFD978, var(--hc-brand-amber)); } .hc-sitefoot__inner { max-width: var(--hc-site-max); margin: 0 auto; padding: var(--hc-s-7) var(--hc-gutter) var(--hc-s-5); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--hc-s-6); } .hc-sitefoot__brand p { margin-top: var(--hc-s-3); color: var(--hc-foot-ink-2); font-size: var(--hc-fs-sm); max-width: 34ch; } .hc-site .hc-sitefoot__brand p { margin-top: var(--hc-s-3); } .hc-sitefoot__contact { display: flex; align-items: center; gap: var(--hc-s-3); flex-wrap: wrap; } .hc-sitefoot__contact a { color: var(--hc-foot-ink-2); font-weight: 650; } .hc-sitefoot__contact a.hc-sitefoot__fb { color: var(--hc-foot-ink); } .hc-sitefoot__fb svg { width: 22px; height: 22px; } .hc-sitefoot nav { display: flex; flex-direction: column; gap: 8px; } .hc-sitefoot h2 { font-family: var(--hc-font); font-size: var(--hc-fs-xs); line-height: 1.4; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--hc-foot-head); margin-bottom: 4px; } .hc-site .hc-sitefoot h2 { margin: 0 0 4px; } .hc-sitefoot nav a { color: var(--hc-foot-ink); text-decoration: none; font-weight: 600; font-size: var(--hc-fs-sm); } .hc-sitefoot nav a:hover, .hc-sitefoot nav a:focus { color: var(--hc-foot-head); text-decoration: underline; } .hc-sitefoot__legal { max-width: var(--hc-site-max); margin: 0 auto; padding: var(--hc-s-4) var(--hc-gutter) var(--hc-s-6); color: var(--hc-foot-ink-2); font-size: var(--hc-fs-xs); border-top: 1px solid var(--hc-foot-line); } .hc-site .hc-sitefoot__legal { margin: 0 auto; } @media (max-width: 760px) { .hc-sitefoot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hc-s-5) var(--hc-s-4); padding-top: var(--hc-s-6); } .hc-sitefoot__brand { grid-column: 1 / -1; } } /* The door bar (Start, sign-in, token pages): brand and one quiet way out */ .hc-doorbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: 20px var(--hc-gutter) 0; } .hc-door { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: var(--hc-s-6) var(--hc-gutter) var(--hc-s-7); } .hc-doorfoot { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px var(--hc-s-5); font-size: var(--hc-fs-xs); } .hc-doorfoot a { color: var(--hc-glass-ink-2); font-weight: 650; text-decoration: none; } .hc-doorfoot { width: max-content; max-width: calc(100% - 32px); margin: 0 auto var(--hc-s-6); padding: 8px 18px; border-radius: 999px; background: var(--hc-glass-bg-strong); -webkit-backdrop-filter: var(--hc-glass-filter); backdrop-filter: var(--hc-glass-filter); } @media (max-width: 640px) { .hc-door { padding-top: var(--hc-s-5); } } /* Small shared pieces (the design's launch.css) */ .hc-kicker { font-size: var(--hc-fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--hc-accent-ink); } .hc-eyebrow { font-size: var(--hc-fs-sm); font-weight: 700; color: var(--hc-ink-2); } .hc-row { display: flex; align-items: center; gap: var(--hc-gap, var(--hc-s-3)); flex-wrap: wrap; } .hc-grow { flex: 1 1 auto; min-width: 0; } /* The Grade 7 book: its own style sheet styles the page's elements; the bar keeps its place */ .hc-site--book .hc-sitebar { position: relative; top: 0; } @media print { .hc-sitebar, .hc-sitefoot, .hc-pagecta, .hc-site-skip, .hc-doorbar, .hc-doorfoot, .hc-world { display: none !important; } } /* ----------------------------------------------------------------------------- 32. Compatibility layer: old content inside the shell (launch plan 4.1) The old styles reach only .hc-classic (homecampus.classic.css, every rule under :where(.hc-classic)). The old markup sits on one sheet of plain paper, no glass, so old widgets read cleanly (SPEC.md 7, "Classic pages"); the old base's own layout (the sticky-footer wrap) is undone. ----------------------------------------------------------------------------- */ .hc-site .hc-classic#hc-content { position: relative; z-index: 1; max-width: var(--hc-site-max); width: calc(100% - var(--hc-gutter) * 2); margin: var(--hc-s-5) auto 0; padding: var(--hc-s-2) 0; background: #FFFFFF; color: #333333; border: 1px solid var(--hc-paper-line); border-radius: 20px; box-shadow: var(--hc-e-1); } .hc-site .hc-classic #wrap { min-height: 0; height: auto; background: transparent; } /* the extra block (above main.main: the newsletters' month list) gets main's side padding, off the sheet's edge */ .hc-site .hc-classic #wrap > :not(main, script, style, link) { margin-left: 15px; margin-right: 15px; } @media (max-width: 767px) { .hc-site .hc-classic#hc-content { width: calc(100% - 16px); margin-top: var(--hc-s-3); border-radius: 14px; } .hc-site .hc-classic main.main { padding-left: 10px; padding-right: 10px; overflow-x: auto; } .hc-site .hc-classic #wrap > :not(main, script, style, link) { margin-left: 10px; margin-right: 10px; } .hc-site .hc-classic :is(table, pre) { max-width: 100%; } /* old fixed widths written inline (Manage Classroom's 780px form, report boxes, jqModal's 400px window) fit the phone; what they hold wraps, and anything still wider scrolls inside main.main */ .hc-site .hc-classic main.main :is(div, form, section, fieldset)[style*="width"], .hc-site .hc-classic .jqmWindow { max-width: 100%; } } /* Task T1 (owner, 28 October): a fraction written inline in an old lesson (the Notes macros frGen and mixNumGen:
, numerator row over denominator row, the bar the first row's border) is drawn like a printed textbook's: compact (0.8 em), its bar on the middle of the words, never pushing its line apart; a block that holds one gets one even line height. The stray indents the old markup writes with   after a
in a question are hidden by a font whose only glyph is a no-break space of no width. CSS only: the lesson's text and markup are as they were (search), and with the switch off nothing here is drawn (hc-ui.css is the new shell's). The app's question screen gets the same in section 26 (.hc-legacy). */ @font-face { font-family: "hc-nbsp0"; src: url(data:font/woff;base64,d09GRgABAAAAAAIwAAoAAAAAAmQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABWAAAACkAAABgRYBDBGNtYXAAAAGMAAAAKQAAADQADADzZ2x5ZgAAAcAAAAABAAAAAQAAAABoZWFkAAAA9AAAADYAAAA2LSU28GhoZWEAAAEsAAAAFwAAACQDIf86aG10eAAAAYQAAAAGAAAABgAAAABsb2NhAAABuAAAAAYAAAAGAAAAAG1heHAAAAFEAAAAEwAAACAAAwACbmFtZQAAAcQAAABUAAAAYyaLj+dwb3N0AAACGAAAABgAAAAuxt53zwABAAAAAQAA3xeZYV8PPPUAAwPoAAAAAOcHewgAAAAA5wd7CAAAAAAAAAAAAAAAAwACAAAAAAAAeJxjYGRgYFb4b8GAAIwMqIARACjTAV4AeJxjYGRgYGBigAEECwoAAJcABgB4nGNgZmBgnMDAysDCQBgwIXPsgQBILWBYwKwA4gPJE2jqgeIAl8QECgAAAAAAAAAAAAAAeJxjYGBgYmBgYAZiESDJCKZZGBSANAsQgvgL/v+HkP8TwXwGAFpiBvwAAAAAAAAAAAAAAAAAAAB4nC2IQQqAIAAERwuqS/WDXhB06iH+QEX0ECKK/0+jOSyzA4zcCDqC+duOZGpvQIxLKzvb75KVI9gzmpIu5Xx9dCZgOYkYCokLhcNTedDkF16VDCJ4nGNgYsAPgPKMTOx5ScUFicmpAAyRAus=) format("woff"); unicode-range: U+00A0; } .hc-site .hc-classic :is(.learn-set__question, .concept-set__question) :is(h3, h4, h5) { font-family: "hc-nbsp0", Voltaire, sans-serif; } .hc-site .hc-classic :is(.NotesPageContainer, .hc-lesson) table[style*="display:inline"] { display: inline-table !important; vertical-align: middle !important; margin: 0 .15em !important; padding: 0 !important; border-collapse: collapse; font-size: .8em; line-height: 1 !important; } .hc-site .hc-classic :is(.NotesPageContainer, .hc-lesson) table[style*="display:inline"] :is(tr, td) { padding: 0 .12em !important; line-height: 1 !important; vertical-align: middle; } .hc-site .hc-classic :is(.NotesPageContainer, .hc-lesson) table[style*="display:inline"] td[rowspan] { font-size: 1.25em; padding-right: .2em !important; } .hc-site .hc-classic :is(.NotesPageContainer, .hc-lesson) :is(h3, h4, h5, p, div, li, td):has(> table[style*="display:inline"], > :is(b, strong, span, em, i, font) > table[style*="display:inline"]) { line-height: 1.8; } /* ----------------------------------------------------------------------------- 33. Shared components of the new pages (launch plan 6, 7, 8): the door, forms, the family From the design's launch.css (redesign/mockups/launch/_src/css/30-door.css, 40-start.css, 60-family.css; SPEC.md sections 3 and 4) under the design's names, where the page streams each had a copy (front.css, family.css, hello.css). A stream's own sheet keeps its page parts (st-*, si-*, fp-*, fm-*, hl-*) and loads after this file, so its rules still win. ----------------------------------------------------------------------------- */ /* A page built new inside SiteBase ({% set site_page = 'new' %}): no classic sheet around it (SiteBase draws
); Bootstrap 3's a:hover must not recolour or underline its buttons */ .hc-site .hc-page a.hc-btn:is(:hover, :focus, :visited) { text-decoration: none; } .hc-site .hc-page a.hc-btn--primary:is(:hover, :focus, :visited) { color: var(--hc-on-accent); } .hc-site .hc-page a.hc-btn--quiet:is(:hover, :focus, :visited) { color: var(--hc-accent-ink); } .hc-site .hc-page a:is(.hc-btn--paper, .hc-btn--google):is(:hover, :focus, :visited) { color: var(--hc-ink); } .hc-site .hc-page a.hc-btn--glass:is(:hover, :focus, :visited) { color: var(--hc-glass-ink); } .hc-page [hidden] { display: none !important; } /* a component's own display must not show what the page hides */ /* Avatar tints: a child's face takes the child's grade colour (COLOUR.md 2; they were four free colours, .hc-av-a to -d). P3 takes dark ink on amber. -p7 is S1 under the data's name. */ .hc-av-p3 { --hc-avatar-a: #F6C65C; --hc-avatar-b: #E8A92A; color: #2A1700 !important; } .hc-av-p4 { --hc-avatar-a: #D4642A; --hc-avatar-b: #A84A18; } .hc-av-p5 { --hc-avatar-a: #D94434; --hc-avatar-b: #A3241A; } .hc-av-p6 { --hc-avatar-a: #4A8DE8; --hc-avatar-b: #245FB0; } .hc-av-s1, .hc-av-p7 { --hc-avatar-a: #A04FA4; --hc-avatar-b: #6F2E73; } /* the old place tints, where a page does not know the child's grade (the sign-in link's page): the brand green */ .hc-av-a, .hc-av-b, .hc-av-c, .hc-av-d { --hc-avatar-a: #2F7D22; --hc-avatar-b: #205012; } /* The door: one paper card holds the form; a glass side says what you get (laptop only) */ .hc-doorgrid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 400px); justify-content: center; gap: var(--hc-s-5); align-items: start; } .hc-doorgrid--solo { grid-template-columns: minmax(0, 560px); } .hc-doorcard { padding: var(--hc-s-7) var(--hc-s-7) var(--hc-s-6); border-radius: var(--hc-r-xl); box-shadow: var(--hc-e-3); } .hc-doorcard__title { font-size: var(--hc-fs-3xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } .hc-doorcard__lead { margin-top: var(--hc-s-2); font-size: var(--hc-fs-lg); color: var(--hc-ink-2); line-height: 1.4; } .hc-doorcard__body { display: grid; gap: var(--hc-s-4); margin-top: var(--hc-s-6); } .hc-doorcard__foot { margin-top: var(--hc-s-5); padding-top: var(--hc-s-4); border-top: 1px solid var(--hc-paper-line); font-size: var(--hc-fs-sm); color: var(--hc-ink-2); } .hc-doorcard__foot a { font-weight: 750; } .hc-door .hc-input { min-height: 52px; font-size: var(--hc-fs-md); font-weight: 650; } .hc-door .hc-field__label { font-size: var(--hc-fs-sm); } /* Step: "1 of 2" as two short bars */ .hc-stepbar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--hc-s-4); font-size: var(--hc-fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-ink-3); } .hc-stepbar i { width: 28px; height: 5px; border-radius: 999px; background: var(--hc-paper-line); } .hc-stepbar i.on { background: var(--hc-accent); } /* Ways in: full-width buttons, the Google one on paper; a rule with "or"; two small links at the ends of a row */ .hc-btn--block { width: 100%; } .hc-btn--google { color: var(--hc-ink); background: var(--hc-paper); border-color: var(--hc-paper-line); box-shadow: var(--hc-e-1); } .hc-btn--google svg { width: 22px; height: 22px; } .hc-or { display: flex; align-items: center; gap: var(--hc-s-3); color: var(--hc-ink-3); font-size: var(--hc-fs-sm); font-weight: 700; } .hc-or::before, .hc-or::after { content: ""; flex: 1; height: 1px; background: var(--hc-paper-line); } .hc-linkrow { display: flex; justify-content: space-between; gap: var(--hc-s-3); flex-wrap: wrap; font-size: var(--hc-fs-sm); font-weight: 700; } .hc-linkrow a { color: var(--hc-accent-ink); text-decoration: none; } .hc-linkrow a:hover { text-decoration: underline; } .hc-fine { font-size: var(--hc-fs-xs); color: var(--hc-ink-3); line-height: 1.5; } .hc-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* the mock-ups' underline (Bootstrap's a drops it) */ /* The glass side: what you get, in three ticked lines; one teacher sentence on paper */ .hc-doorside { padding: var(--hc-s-5); border-radius: var(--hc-r-xl); } .hc-doorside h2 { font-size: var(--hc-fs-lg); font-weight: 800; } .hc-ticks { list-style: none; display: grid; gap: var(--hc-s-3); margin-top: var(--hc-s-4); } .hc-ticks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 650; line-height: 1.4; } .hc-ticks svg { width: 22px; height: 22px; color: var(--hc-good-ink); margin-top: 1px; } .hc-ticks small { display: block; font-weight: 600; color: var(--hc-glass-ink-2); font-size: var(--hc-fs-sm); } .hc-quote { margin-top: var(--hc-s-5); padding: var(--hc-s-4); border-radius: var(--hc-r-md); background: var(--hc-paper); border: 1px solid var(--hc-paper-line); } .hc-quote p:first-child { font-size: var(--hc-fs-xs); font-weight: 750; color: var(--hc-ink-2); } .hc-quote p + p { margin-top: 4px; font-weight: 800; line-height: 1.3; } /* Six boxes for a code (email code: digits; short code: 6 letters and digits); --gap splits them 3 + 3 */ .hc-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; } .hc-otp > span { display: grid; place-items: center; height: 60px; border-radius: var(--hc-r-sm); border: 2px solid var(--hc-paper-line); background: var(--hc-paper); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hc-ink); } .hc-otp > span.is-active { border-color: var(--hc-accent); box-shadow: 0 0 0 4px var(--hc-accent-soft); } .hc-otp--gap { grid-template-columns: repeat(3, minmax(0, 52px)) 6px repeat(3, minmax(0, 52px)); } .hc-otp--gap::after { content: none; } .hc-otp--gap > span:nth-child(4) { grid-column: 5; } /* Segmented tabs on paper (Parent | Child) */ .hc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--hc-paper-2); border: 1px solid var(--hc-paper-line); } .hc-seg a, .hc-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; font-weight: 800; color: var(--hc-ink-2); text-decoration: none; cursor: pointer; } .hc-seg svg { width: 20px; height: 20px; } .hc-seg [aria-selected="true"], .hc-seg [aria-current="true"] { color: var(--hc-ink); background: var(--hc-paper); box-shadow: var(--hc-e-1); } /* Grade picker: P3 P4 P5 P6 S1 as one row of big radio chips (--hc-grades: how many; 5 by default) */ .hc-gradepick { display: grid; grid-template-columns: repeat(var(--hc-grades, 5), minmax(0, 1fr)); gap: 8px; } .hc-gradepick label { position: relative; display: grid; place-items: center; gap: 0; min-height: 60px; padding: 6px 4px; border-radius: var(--hc-r-md); border: 2px solid var(--hc-paper-line); background: var(--hc-paper); cursor: pointer; font-weight: 800; font-size: var(--hc-fs-lg); line-height: 1.1; } .hc-gradepick label small { font-size: 11px; font-weight: 700; color: var(--hc-ink-3); } .hc-gradepick input { position: absolute; opacity: 0; pointer-events: none; } .hc-gradepick label:has(input:checked) { border-color: var(--hc-accent); background: var(--hc-accent-soft); color: var(--hc-accent-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 18%, transparent); } .hc-gradepick label:has(input:checked) small { color: var(--hc-accent-ink); } /* Option cards: one of several (Secondary sign-in, plans, the holiday choice). The chosen one opens its fields */ .hc-options { display: grid; gap: var(--hc-s-3); } .hc-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px var(--hc-s-3); padding: var(--hc-s-4); border-radius: var(--hc-r-md); border: 2px solid var(--hc-paper-line); background: var(--hc-paper); cursor: pointer; } .hc-option > input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--hc-accent); } .hc-option__title { font-weight: 800; } .hc-option__sub { grid-column: 2; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); } .hc-option__more { grid-column: 2; display: grid; gap: var(--hc-s-3); margin-top: var(--hc-s-3); } .hc-option:has(> input:checked) { border-color: var(--hc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc-accent) 15%, transparent); } .hc-option:not(:has(> input:checked)) .hc-option__more { display: none; } /* A notice inside a card: one line with an icon on a soft tint */ .hc-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 0; padding: var(--hc-s-3) var(--hc-s-4); border-radius: var(--hc-r-md); font-size: var(--hc-fs-sm); font-weight: 650; line-height: 1.45; color: var(--hc-ink); background: var(--hc-accent-soft); } .hc-notice svg { width: 20px; height: 20px; color: var(--hc-accent-ink); margin-top: 1px; } .hc-notice--good { background: var(--hc-good-soft); } .hc-notice--good svg { color: var(--hc-good-ink); } .hc-notice--sun { background: var(--hc-sun-soft); } .hc-notice--sun svg { color: var(--hc-sun-ink); } .hc-notice--bad { background: var(--hc-bad-soft); } .hc-notice--bad svg { color: var(--hc-bad-ink); } /* The sheet: a paper card over the dimmed page (add a child, sign in on another device); a bottom sheet on a phone */ .hc-sheet { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--hc-s-5); overflow-y: auto; background: rgba(23, 32, 51, .38); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } .hc-sheet__card { position: relative; width: min(100%, 520px); padding: var(--hc-s-6); border-radius: var(--hc-r-xl); box-shadow: var(--hc-e-4); } .hc-sheet__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--hc-ink-2); background: var(--hc-paper-2); } .hc-sheet__close svg { width: 18px; height: 18px; } .hc-sheet__card h2 { font-size: var(--hc-fs-2xl); font-weight: 800; letter-spacing: -.02em; } .hc-sheet__body { display: grid; gap: var(--hc-s-4); margin-top: var(--hc-s-5); } .hc-sheet .hc-input { min-height: 52px; font-size: var(--hc-fs-md); font-weight: 650; } /* The printed sign-in card (a postcard, 148 x 105 mm; on screen about 600 x 420) */ .hc-print { display: grid; justify-items: center; gap: var(--hc-s-4); } .hc-print__note { font-size: var(--hc-fs-sm); font-weight: 650; color: var(--hc-ink-3); } .hc-pcard { width: min(100%, 600px); padding: 28px 32px 22px; border-radius: 18px; background: #fff; color: #172033; border: 2px dashed #B9C2D3; box-shadow: var(--hc-e-3); text-align: left; } .hc-pcard__head { display: flex; align-items: center; justify-content: space-between; } .hc-pcard__head .hc-brand { color: #172033; } .hc-pcard__ninja { --hc-companion-size: 56px; filter: none; } .hc-pcard .hc-pcard__name { margin: 10px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .hc-pcard .hc-pcard__cred { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; } .hc-pcard__cred div { min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #D5DBE6; } .hc-pcard__cred dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #5F687A; } .hc-pcard__cred dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .hc-pcard .hc-pcard__ways { list-style: none; counter-reset: w; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; } .hc-pcard__ways li { counter-increment: w; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; font-size: 14px; line-height: 1.35; } .hc-pcard__ways li::before { content: counter(w); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: #2F7D22; } .hc-pcard__ways b { font-weight: 800; } .hc-pcard__ways span { color: #4A5468; font-weight: 600; } .hc-pcard .hc-pcard__foot { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #E0E5EE; font-size: 13px; font-weight: 700; color: #4A5468; } /* ---- The Home Campus green (COLOUR.md 6, section 33; the owner, 27 October 2026) ---------------------------- */ /* .hc-band: one solid green area at the top of a key page (the home hero, the teacher's verdict, Family's and Subscribe's heads). Solid, so white text sits on it at AA everywhere (COLOUR.md 8). Text on a band uses only --hc-on-band, --hc-on-band-2 and --hc-band-hi. */ .hc-band { position: relative; isolation: isolate; overflow: hidden; color: var(--hc-on-band); background: var(--hc-band-bg); border: 0; border-radius: var(--hc-r-xl); box-shadow: 0 2px 4px rgba(var(--hc-shadow), .1), 0 22px 50px -18px color-mix(in srgb, var(--hc-band-2) 55%, transparent); } .hc-band :where(.hc-muted, .hc-eyebrow, .hc-verdict__label, .hc-evidence, small) { color: var(--hc-on-band-2); } .hc-band :where(a:not(.hc-btn)) { color: var(--hc-on-band); } .hc-band .hc-kicker { color: var(--hc-band-hi); } .hc-band .hc-why { color: var(--hc-on-band); } .hc-band .hc-why:hover { background: rgba(255, 255, 255, .14); } .hc-band .hc-btn--quiet { color: var(--hc-on-band); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); } .hc-band .hc-btn--quiet:hover { background: rgba(255, 255, 255, .2); } .hc-site .hc-page .hc-band a.hc-btn--quiet:is(:hover, :focus, :visited), .hc-site .hc-page a.hc-btn--onband:is(:hover, :focus, :visited) { color: var(--hc-on-band); } .hc-site .hc-page a.hc-btn--sun:is(:hover, :focus, :visited) { color: #2A1700; } /* .hc-band--grade: a band in a grade's colour (a grade page's head); needs data-grade on it or above it */ .hc-band--grade { --hc-on-band: var(--hc-gc-on); --hc-on-band-2: var(--hc-gc-on-2); color: var(--hc-gc-on); background: radial-gradient(40% 90% at 100% 0%, color-mix(in srgb, var(--hc-gc) 70%, transparent) 0%, transparent 70%), linear-gradient(120deg, var(--hc-gc-band-1) 0%, var(--hc-gc-band-2) 100%); box-shadow: 0 2px 4px rgba(var(--hc-shadow), .1), 0 22px 50px -18px color-mix(in srgb, var(--hc-gc-band-2) 55%, transparent); } /* .hc-band--sun: the amber strip (the price line), dark ink; its button is the green primary */ .hc-band--sun { --hc-on-band: #2A1700; --hc-on-band-2: #4A3200; color: #2A1700; background: linear-gradient(110deg, #FFD978 0%, var(--hc-brand-amber) 60%, #E8A92A 100%); box-shadow: 0 18px 40px -20px rgba(160, 110, 0, .7); } /* .hc-tint: a soft green-to-warm panel behind a whole section; the cards inside stay paper */ .hc-tint { padding: var(--hc-s-6); border-radius: var(--hc-r-xl); background: var(--hc-tint-bg); } @media (max-width: 640px) { .hc-tint { padding: var(--hc-s-5) var(--hc-s-4); border-radius: var(--hc-r-lg); } } /* .hc-topline: a 6px brand stripe across the top of a paper card (the door's card, the plan card, the example report) */ .hc-topline, .hc-doorcard, .hc-plancard { overflow: hidden; } .hc-topline, .hc-doorcard { position: relative; } @media (max-width: 900px) { .hc-plancard { position: relative; } } /* the plan card is static on a phone; the stripe needs it positioned */ .hc-topline::before, .hc-doorcard::before, .hc-plancard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hc-topline); pointer-events: none; } /* .hc-icontile: an icon in a soft coloured square */ .hc-icontile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--hc-accent-ink); background: var(--hc-accent-soft); } .hc-icontile svg { width: 20px; height: 20px; } .hc-icontile--green { color: var(--hc-green-ink); background: var(--hc-green-soft); } .hc-icontile--sun { color: var(--hc-sun-ink); background: var(--hc-sun-soft); } .hc-icontile--good { color: var(--hc-good-ink); background: var(--hc-good-soft); } .hc-icontile--bad { color: var(--hc-bad-ink); background: var(--hc-bad-soft); } /* The door's side panel is the band on the parent side; on the kid and teen worlds it stays glass */ [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) { color: var(--hc-on-band); background: var(--hc-band-bg); border-color: transparent; box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--hc-band-2) 55%, transparent); } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) :where(h2, h3) { color: var(--hc-on-band); } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) .hc-ticks svg { color: var(--hc-band-hi); } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) :is(.hc-ticks small, .hc-muted, p) { color: var(--hc-on-band-2); } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) .hc-quote { color: var(--hc-ink); border: 0; } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) .hc-quote p:first-child { color: var(--hc-ink-2); } [data-mode="parent"] .hc-doorside:not([data-mode="kid"], [data-mode="teen"]) a:not(.hc-btn) { color: var(--hc-on-band); } /* The step bar's done step, accent to the brand green */ .hc-stepbar i.on { background: linear-gradient(90deg, var(--hc-accent), var(--hc-brand-green)); } /* The Moving up? card: a warm wash from its sun edge */ .hc-moveup.hc-paper { background: linear-gradient(90deg, var(--hc-sun-soft) 0%, var(--hc-paper) 38%); } /* Map worlds wear their grade along the top (a P6 child's P6 worlds; Review P5 under them in P5's) */ .app-world[data-grade], .hc-worldcard[data-grade] { box-shadow: inset 0 4px 0 var(--hc-gc), var(--hc-e-2); } .mt-review[data-grade] .mt-review__list > li { box-shadow: inset 4px 0 0 var(--hc-gc), var(--hc-e-1); } .mt-review[data-grade] .hc-label-pill svg { color: var(--hc-gc-ink); } /* Links in a new page's body text are the site's blue, as on today's site (buttons, bars and bands keep theirs). Only pages built new (.hc-page, the app's .hc-root): an old page's content keeps its own colours. */ :where(.hc-site .hc-page, .hc-root[data-mode="parent"] .hc-main) :where(p) a:not([class]), .hc-site .hc-page .hm-free-links a, .hc-linkrow a, .hc-doorcard__foot a { color: var(--hc-link); } .hc-site .hc-page .hm-free-links a { text-decoration: underline; text-underline-offset: 3px; } .hc-doorcard__foot .hc-fine a { color: inherit; } /* the fine print's link keeps the fine print's grey, as in the mock-ups */ .hc-band :where(p) a:not([class]), .hc-doorside .hc-linkrow a { color: var(--hc-on-band); } @media (max-width: 900px) { .hc-doorgrid { grid-template-columns: minmax(0, 560px); } } @media (max-width: 640px) { .hc-doorcard { padding: var(--hc-s-5) var(--hc-s-4) var(--hc-s-5); border-radius: var(--hc-r-lg); } .hc-doorcard__title { font-size: var(--hc-fs-2xl); } .hc-doorcard__lead { font-size: var(--hc-fs-md); } .hc-doorcard__body { margin-top: var(--hc-s-5); } .hc-otp { gap: 6px; } .hc-otp > span { height: 52px; font-size: 22px; } .hc-gradepick { gap: 6px; } .hc-gradepick label { min-height: 54px; font-size: var(--hc-fs-md); } .hc-gradepick label small { display: none; } .hc-sheet { place-items: end stretch; padding: 0; } .hc-sheet__card { width: 100%; border-radius: var(--hc-r-xl) var(--hc-r-xl) 0 0; padding: var(--hc-s-5) var(--hc-s-4) var(--hc-s-6); } .hc-pcard { padding: 20px 18px 16px; } .hc-pcard .hc-pcard__cred { grid-template-columns: 1fr; } } @media print { .hc-print { margin: 0; } .hc-print__note { display: none !important; } .hc-pcard { box-shadow: none; width: 148mm; } } /* ----------------------------------------------------------------------------- 34. The Home Campus green on the launch pages (COLOUR.md 7; the owner, 27 October 2026) The page parts of the colour pass, kept here, next to the components they use, rather than spread over the streams' sheets: the home page and the grade and practice pages (front.css), Family, Subscribe and parent home (family.css), the map and kid home (grades.css). The streams' sheets load after this file, so every rule here is one step more specific than the rule it answers. A grade's colour comes from data-grade (section 1b). ----------------------------------------------------------------------------- */ /* Home: the hero is the band; Start free is the amber button */ .hm-hero.hc-band { padding: var(--hc-s-7); margin-top: var(--hc-s-2); } .hm-hero.hc-band .hm-h1 { color: var(--hc-on-band); } .hm-hero.hc-band :is(.hm-lead, .hm-fine, .hm-device-label) { color: var(--hc-on-band-2); } .hm-hero.hc-band .hm-pill { color: var(--hc-on-band); background: rgba(255, 255, 255, .14); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); -webkit-backdrop-filter: none; backdrop-filter: none; } .hm-hero.hc-band .hm-pill::before { display: none; } .hm-hero.hc-band .hm-pill svg { color: var(--hc-band-hi); } .hm-hero.hc-band .hm-phone__screen { color: #172033; } /* the phone is a light screen in every theme: its own dark text */ .hm-hero.hc-band .hm-laptop__base { background: linear-gradient(#E6EBE3, #B3BDB0); } /* Home (and the practice index): grade cards as on today's site, made modern: a solid head in the grade colour with the grade name, a white body, a 2px border in the grade colour */ .hm-grade[data-grade] { gap: 0; padding: 0; overflow: hidden; background: var(--hc-paper); border: 2px solid var(--hc-gc); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(var(--hc-shadow), .06), 0 14px 30px -18px color-mix(in srgb, var(--hc-gc) 70%, transparent); } .hm-grade[data-grade]::before { display: none; } .hm-grade[data-grade] .hm-grade__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px var(--hc-s-4); color: var(--hc-gc-on); background: var(--hc-gc-head); } .hm-grade[data-grade] .hm-grade__name { font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; } .hm-grade[data-grade] b { display: inline-grid; place-items: center; width: auto; height: auto; min-width: 34px; margin: 0; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--hc-gc-deep); background: #FFFFFF; box-shadow: none; } .hm-grade[data-grade] .hm-grade__topics { padding: var(--hc-s-3) var(--hc-s-4); } .hm-grade[data-grade] .hm-grade__go { margin: auto var(--hc-s-4) 0; padding: var(--hc-s-3) 0 var(--hc-s-4); border-top: 1px solid var(--hc-paper-line); color: var(--hc-link); } .hm-grades:has(.hm-grade[data-grade]) li { display: flex; flex-direction: column; } .hm-grades li > .hm-grade[data-grade] { flex: 1; display: flex; flex-direction: column; } /* Home: how it works on the tint, three coloured steps */ .hm-section.hm-tintsec { margin-top: var(--hc-s-8); } .hm-tintsec .hm-section__head { margin-bottom: var(--hc-s-4); } .hm-steps li:nth-child(1) .hm-steps__n { color: #FFFFFF; background: linear-gradient(160deg, var(--hc-brand-green), var(--hc-brand-green-deep)); } .hm-steps li:nth-child(2) .hm-steps__n { color: #2A1700; background: linear-gradient(160deg, #FFD978, var(--hc-brand-amber)); } .hm-steps li:nth-child(3) .hm-steps__n { color: #FFFFFF; background: linear-gradient(160deg, #2F7D22, var(--hc-brand-forest)); } /* Home: the example report's three labels in their colours */ .hm-report__rows li:nth-child(1) .hm-report__kind { color: var(--hc-good-ink); } .hm-report__rows li:nth-child(2) .hm-report__kind { color: var(--hc-bad-ink); } .hm-report__rows li:nth-child(3) .hm-report__kind { color: var(--hc-sun-ink); } /* Home: the price line is the amber strip, its button green */ .hm-price.hc-band--sun p { font-size: var(--hc-fs-lg); color: #2A1700; } /* Home: the three questions, each with a coloured top edge */ .hm-faq details.hc-paper { border-top: 4px solid var(--hc-brand-green); } .hm-faq details.hc-paper:nth-child(2) { border-top-color: var(--hc-brand-amber); } .hm-faq details.hc-paper:nth-child(3) { border-top-color: var(--hc-brand-forest); } @media (max-width: 900px) { .hm-hero.hc-band { padding: var(--hc-s-6); } } @media (max-width: 640px) { .hm-hero.hc-band { padding: var(--hc-s-5) var(--hc-s-4) var(--hc-s-4); margin: 0 calc(var(--hc-s-2) * -1); border-radius: var(--hc-r-lg); } .hm-section.hm-tintsec { margin-top: var(--hc-s-7); } .hm-grade[data-grade] .hm-grade__head { padding: 10px 12px; } .hm-grade[data-grade] .hm-grade__name { font-size: 19px; } .hm-grade[data-grade] b { display: none; } .hm-grade[data-grade] .hm-grade__go { margin: 0 12px; padding: 8px 0 10px; border-top: 0; } } /* The grade page and the practice landing: the head is a band in the grade's colour (green with no grade); every chapter wears the grade */ .gr-top.hc-band { padding: var(--hc-s-6); } .gr-top.hc-band .gr-h1 { color: var(--hc-on-band); } .gr-top.hc-band :is(.gr-lead, .gr-crumb, .gr-crumb a) { color: var(--hc-on-band-2); } .gr-top.hc-band .gr-top__cta { background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .45); } .gr-top.hc-band .gr-top__fine { color: var(--hc-ink-2); } [data-theme="dark"] .gr-top.hc-band .gr-top__cta { background: var(--hc-paper); } [data-grade] > .gr-worlds .gr-world, .gr-worlds[data-grade] .gr-world { border-top: 4px solid var(--hc-gc); } [data-grade] > .gr-worlds .gr-world__n, .gr-worlds[data-grade] .gr-world__n { color: var(--hc-gc-on); background: var(--hc-gc-band-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } [data-grade] > .gr-worlds .gr-world--tile, .gr-worlds[data-grade] .gr-world--tile { border-top-color: color-mix(in srgb, var(--hc-gc) 40%, var(--hc-paper-line)); } [data-grade] > .gr-worlds .gr-world--tile .gr-world__n, .gr-worlds[data-grade] .gr-world--tile .gr-world__n { color: var(--hc-gc-ink); background: var(--hc-gc-soft); border-color: transparent; box-shadow: none; } @media (max-width: 640px) { .gr-top.hc-band { padding: var(--hc-s-5) var(--hc-s-4); border-radius: var(--hc-r-lg); } } /* Family: the head is a compact green band (Add a child the amber button); each child's card has a solid head in that child's grade colour, as the grade cards do */ .fm-head.hc-band { align-items: center; padding: var(--hc-s-5) var(--hc-s-6); } .fm-head.hc-band h1 { color: var(--hc-on-band); } .fm-head.hc-band p { color: var(--hc-on-band-2); } .hc-kidcard[data-grade] { --hc-kid-pad: var(--hc-s-5); overflow: hidden; border: 2px solid var(--hc-gc); } .hc-kidcard[data-grade] > .hc-kidcard__head { margin: calc(var(--hc-kid-pad) * -1) calc(var(--hc-kid-pad) * -1) 0; padding: var(--hc-s-4) var(--hc-kid-pad); color: var(--hc-gc-on); background: linear-gradient(120deg, var(--hc-gc-band-1) 0%, var(--hc-gc-band-2) 100%); } .hc-kidcard[data-grade] .hc-kidcard__name { color: var(--hc-gc-on); } .hc-kidcard[data-grade] .hc-kidcard__grade { color: var(--hc-gc-on-2); } .hc-kidcard[data-grade] .hc-kidcard__head .hc-avatar { color: var(--hc-gc-deep) !important; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); } .hc-kidcard[data-grade] .hc-kidcard__edit { color: var(--hc-ink-2); background: var(--hc-paper); border-color: transparent; } .hc-root .fm-card h2 svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--hc-accent-soft); } .hc-root .fm-card:nth-of-type(2) h2 svg, .hc-root .fm-lower .fm-card + .fm-card h2 svg { color: var(--hc-sun-ink); background: var(--hc-sun-soft); } .hc-root .fm-device__icon { color: var(--hc-green-ink); background: var(--hc-green-soft); } @media (max-width: 760px) { .hc-kidcard[data-grade] { --hc-kid-pad: var(--hc-s-4); } .fm-head.hc-band { padding: var(--hc-s-4) var(--hc-s-5); } } /* Subscribe: the head is the band */ .hcs-hero.hc-band :is(h1, .hc-h1) { color: var(--hc-on-band); } .hcs-hero.hc-band p { color: var(--hc-on-band-2); } .hcs-hero.hc-band svg { color: var(--hc-band-hi); }