/* Learn It With Me — the standard theme. ====================================================================== One set of colour and font tokens for every page (hub pages and interactives), in a light and a dark version. Loaded first by includes/site.php, so a page's own stylesheet only adds tokens for its own diagrams (see THEME-TOKENS.md). Which version shows: - by default, the computer's own setting (prefers-color-scheme) - or what the person picked with the light/dark switch in the header, which sets (js/theme.js; remembered in this browser) The three selectors below are the ones every page's own stylesheet uses too, so page tokens switch in step: :root · @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) · :root[data-theme="dark"] Colours are chosen for WCAG AA contrast: ink, ink-soft and muted text all reach at least 4.5:1 on both paper and panel, in both versions. */ :root { color-scheme: light; /* surfaces */ --paper: #EEF2F5; /* page background */ --panel: #FFFFFF; /* cards, panels, dialogs */ --panel-2: #F5F8FA; /* a panel inside a panel */ /* text */ --ink: #13202B; --ink-soft: #3F5163; --muted: #5B6B7B; /* lines */ --line: #D6DEE5; --line-strong: #B4C2CE; /* brand accents (the logo's blue and orange) */ --accent: #1A67AD; --accent-deep: #0B2A52; --accent-tint: #E2EDF8; --on-accent: #FFFFFF; /* text on an --accent background */ --accent-b: #B35716; --accent-b-deep: #7E3B0C; --accent-b-tint: #FBEBDD; /* status */ --ok: #2B7A4B; --ok-tint: #E0F1E7; --warn: #8A5D00; --warn-tint: #FFF1D1; --bad: #B3261E; --bad-tint: #FBE3E1; --hint: #5A48B0; --hint-tint: #ECE9FB; --active: #7C3AAE; /* in-progress working-out steps */ --active-tint: #F2E8FB; --focus: #1A67AD; --brand-grey: #6D6E71; --logo-plate: transparent; --logo-pad: 0px; --radius: 8px; --shadow: 0 1px 2px rgba(19, 32, 43, .06), 0 8px 24px -16px rgba(19, 32, 43, .28); /* fixed brand colours, the same in both versions (for white text on colour: banners, icons) */ --brand-navy: #0B2A52; --brand-blue: #1D6FB8; --brand-orange: #E07A2C; --brand-green: #3F9142; /* type */ --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-cjk: "Source Sans 3", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "Malgun Gothic", sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #0E151C; --panel: #151F29; --panel-2: #1B2733; --ink: #E6EDF3; --ink-soft: #B3C1CE; --muted: #93A3B2; --line: #2A3947; --line-strong: #3E5061; --accent: #5FAEEA; --accent-deep: #A6D0F2; --accent-tint: #132C42; --on-accent: #0E151C; --accent-b: #F0955A; --accent-b-deep: #F7BC92; --accent-b-tint: #3A2414; --ok: #6FC296; --ok-tint: #16301F; --warn: #E3B04B; --warn-tint: #3A2C10; --bad: #F08080; --bad-tint: #3B1A1A; --hint: #B0A4F2; --hint-tint: #262040; --active: #CDA3F4; --active-tint: #2E2140; --focus: #5FAEEA; --brand-grey: #A3ABB1; --logo-plate: transparent; --logo-pad: 0px; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0E151C; --panel: #151F29; --panel-2: #1B2733; --ink: #E6EDF3; --ink-soft: #B3C1CE; --muted: #93A3B2; --line: #2A3947; --line-strong: #3E5061; --accent: #5FAEEA; --accent-deep: #A6D0F2; --accent-tint: #132C42; --on-accent: #0E151C; --accent-b: #F0955A; --accent-b-deep: #F7BC92; --accent-b-tint: #3A2414; --ok: #6FC296; --ok-tint: #16301F; --warn: #E3B04B; --warn-tint: #3A2C10; --bad: #F08080; --bad-tint: #3B1A1A; --hint: #B0A4F2; --hint-tint: #262040; --active: #CDA3F4; --active-tint: #2E2140; --focus: #5FAEEA; --brand-grey: #A3ABB1; --logo-plate: transparent; --logo-pad: 0px; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8); } html { background: var(--paper); } /* ---- the light/dark switch (header of every page) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 9px; font: 600 13px/1 var(--font-body); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; flex: none; } /* ---- the light/dark switch: a sun and a moon on the track, the thumb slides to the one in use ---- */ .theme-switch { display: inline-flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 999px; } .theme-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .theme-switch-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 58px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink-soft); transition: background .2s, border-color .2s; } .theme-switch:hover .theme-switch-track { border-color: var(--accent); } .theme-switch svg { position: relative; z-index: 1; width: 14px; height: 14px; flex: none; transition: color .2s; } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; } .theme-switch .icon-sun { color: var(--on-accent); } /* light: thumb under the sun (data-bs-theme is set before the page draws) */ :root[data-bs-theme="dark"] .theme-switch-thumb { transform: translateX(28px); } :root[data-bs-theme="dark"] .theme-switch .icon-sun { color: var(--ink-soft); } :root[data-bs-theme="dark"] .theme-switch .icon-moon { color: var(--on-accent); } @media (prefers-reduced-motion: reduce) { .theme-switch-thumb, .theme-switch-track, .theme-switch svg { transition: none; } } /* ---- the brain watermark (every page, every theme except High contrast) ---- */ .liwm-watermark { position: fixed; left: 50%; top: 52%; z-index: 0; pointer-events: none; width: min(70vmin, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); background: url(/img/liwm-mark.svg) center / contain no-repeat; opacity: .045; } :root[data-theme="dark"] .liwm-watermark { opacity: .06; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .liwm-watermark { opacity: .06; } } @media print { .liwm-watermark, .liwm-decor, .liwm-decor-page { display: none !important; } } /* ---- theme decorations (drawn by js/decor.js; each theme's css/themes/.css styles them) ---- */ .liwm-decor { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .liwm-decor-page { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 3; pointer-events: none; } .liwm-decor-page > *, .liwm-decor > * { pointer-events: none; } .decor-p { position: absolute; top: -40px; left: var(--x, 50%); display: block; animation-duration: var(--d, 14s); animation-delay: var(--delay, 0s); animation-timing-function: linear; animation-iteration-count: infinite; scale: var(--s, 1); } /* ornaments at the page edges only where there's room beside the content */ @media (max-width: 1279px) { .decor-matariki, .decor-sun, .decor-blossom, .decor-lantern, .decor-fireworks, .decor-zodiac { display: none; } } @media (max-width: 640px) { .decor-pumpkin { width: 56px !important; height: 50px !important; } } /* animation off: the person's choice, their computer's reduce-motion setting, or while a game is played */ html.liwm-still .liwm-decor .decor-p, html.liwm-playing .liwm-decor .decor-p { display: none; } html.liwm-still .liwm-decor-page *, html.liwm-still .liwm-decor * { animation: none !important; } @media (prefers-reduced-motion: reduce) { .liwm-decor .decor-p { display: none; } .liwm-decor-page *, .liwm-decor * { animation: none !important; } } .motion-toggle[hidden] { display: none; } @keyframes liwm-fall { from { transform: translate(0, -5vh) rotate(0); } 50% { transform: translate(var(--drift, 30px), 52vh) rotate(180deg); } to { transform: translate(0, 110vh) rotate(360deg); } } @keyframes liwm-rise { from { transform: translate(0, 110vh); opacity: 0; } 10% { opacity: .8; } 50% { transform: translate(var(--drift, 30px), 55vh); } to { transform: translate(0, -10vh); opacity: 0; } } @keyframes liwm-drift { from { transform: translate(-12vw, 0); } 25% { transform: translate(28vw, -24px); } 50% { transform: translate(60vw, 10px); } 75% { transform: translate(90vw, -18px); } to { transform: translate(115vw, 0); } } @keyframes liwm-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .9; } } @keyframes liwm-glow { 0%, 100% { opacity: .75; filter: drop-shadow(0 0 2px #9CC0FF); } 50% { opacity: 1; filter: drop-shadow(0 0 10px #CFE0FF); } } @keyframes liwm-spin { to { transform: rotate(360deg); } } @keyframes liwm-waves { to { background-position: 200px 0; } } @keyframes liwm-burst { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } } @keyframes liwm-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } /* ---- a school's logo beside ours (from a custom theme) ---- */ .school-logo { height: 44px; max-width: 170px; width: auto; object-fit: contain; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); vertical-align: middle; } .navbar-brand .school-logo { height: 48px; } @media (max-width: 560px) { .school-logo { height: 32px; max-width: 110px; } } /* ---- page titles use the theme's title font (a decorative one never reaches buttons or labels) ---- */ :root h1, :root .display-5, body[data-page] h2 { font-family: var(--font-feature, var(--font-display)) !important; }