@charset "UTF-8"; /* Design tokens: kek.academy palette (kid-friendly, calm) */ :root { --color-primary: #3fa9e0; --color-primary-dark: #2b8ac2; --color-primary-light: #eaf6fd; --color-secondary: #4ecdc4; --color-secondary-dark: #2f9a92; --color-secondary-light: #e7faf8; --color-accent: #ffa552; --color-accent-dark: #f2883a; --color-accent-light: #fff3e6; --color-danger: #ff6b6b; --color-danger-light: #ffecec; --bg: #f6fafd; --surface: #ffffff; --text: #33475b; --text-h: #1d2b3a; --text-muted: #7c93ac; --border: #e3ecf3; --shadow-sm: 0 1px 3px rgba(51, 71, 91, 0.08); --shadow-md: 0 4px 14px rgba(51, 71, 91, 0.1); --shadow-lg: 0 10px 30px rgba(51, 71, 91, 0.14); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --transition: 0.18s ease; --sans: system-ui, 'Segoe UI', Roboto, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme=default] { --color-primary: #5cc0f2; --color-primary-dark: #3fa9e0; --color-primary-light: rgba(63, 169, 224, 0.16); --color-secondary: #5fe0d6; --color-secondary-dark: #4ecdc4; --color-secondary-light: rgba(78, 205, 196, 0.16); --color-accent: #ffb670; --color-accent-dark: #ffa552; --color-accent-light: rgba(255, 165, 82, 0.16); --color-danger: #ff8787; --color-danger-light: rgba(255, 107, 107, 0.16); --bg: #131a20; --surface: #1b242c; --text: #b8c6d4; --text-h: #f1f5f8; --text-muted: #7c93ac; --border: #2a3540; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45); } } /* Site themes: fixed look each (no light/dark variant), selected per-child and stored in the DB (see Layout in App.tsx, which sets data-theme on ). --color-danger is intentionally left un-overridden everywhere — a destructive action should read the same in every theme. */ :root[data-theme=notebook] { --color-primary: #2f4374; --color-primary-dark: #1f2e52; --color-primary-light: #e7ebf5; --color-secondary: #5b7a56; --color-secondary-dark: #42603e; --color-secondary-light: #e9f0e6; --color-accent: #b2453f; --color-accent-dark: #8a3530; --color-accent-light: #f7e6e4; --bg: #f6efdf; --surface: #fbf6ea; --text: #3a3226; --text-h: #241f16; --text-muted: #7a705c; --border: #d8cdb0; } :root[data-theme=blackboard] { --color-primary: #8fd7ff; --color-primary-dark: #5cc0f2; --color-primary-light: rgba(143, 215, 255, 0.16); --color-secondary: #ffe37a; --color-secondary-dark: #f2cf4a; --color-secondary-light: rgba(255, 227, 122, 0.16); --color-accent: #ff9f7a; --color-accent-dark: #f2814f; --color-accent-light: rgba(255, 159, 122, 0.16); --bg: #1b1b19; --surface: #242422; --text: #e5e5e0; --text-h: #ffffff; --text-muted: #a8a8a0; --border: #3a3a35; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45); } :root[data-theme=boy] { --color-primary: #2f8fd6; --color-primary-dark: #1f6fae; --color-primary-light: #e3f2fc; --color-secondary: #3fc9c1; --color-secondary-dark: #28a49c; --color-secondary-light: #e1f8f6; --color-accent: #ff7a54; --color-accent-dark: #e85c37; --color-accent-light: #ffe6df; --bg: #eef7fb; --surface: #ffffff; --text: #33475b; --text-h: #1d2b3a; --text-muted: #7c93ac; --border: #dcebf4; } :root[data-theme=girl] { --color-primary: #ef8fb0; --color-primary-dark: #d96a91; --color-primary-light: #fdeef3; --color-secondary: #6bc9c3; --color-secondary-dark: #48a49d; --color-secondary-light: #e6f7f5; --color-accent: #ffb870; --color-accent-dark: #f29a45; --color-accent-light: #fff2e2; --bg: #fdf3f6; --surface: #ffffff; --text: #5b4152; --text-h: #3a2734; --text-muted: #9a7f8c; --border: #f3dbe4; } /* Shared component classes: buttons, cards, inputs, layout chrome */ .page { max-width: 960px; margin: 0 auto; padding: 32px 24px 60px; text-align: left; box-sizing: border-box; } .page--narrow { max-width: 440px; } .page-title { display: flex; align-items: center; gap: 10px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; font-size: 15px; font-weight: 600; font-family: var(--sans); border: none; border-radius: var(--radius-md); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), opacity var(--transition); } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); } .btn-secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; } .btn-secondary:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); } .btn-accent { background: var(--color-accent); color: #fff; } .btn-accent:hover:not(:disabled) { background: var(--color-accent-dark); } .btn-danger { background: var(--color-danger); color: #fff; } .btn-danger:hover:not(:disabled) { opacity: 0.9; } .btn-ghost { background: transparent; color: var(--color-primary); box-shadow: none; padding: 8px 12px; } .btn-ghost:hover:not(:disabled) { background: var(--color-primary-light); transform: none; } .btn-block { width: 100%; } .btn-sm { padding: 6px 14px; font-size: 13px; } /* Cards */ .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 20px 24px; text-align: left; transition: transform var(--transition), box-shadow var(--transition); } .card:hover { box-shadow: var(--shadow-lg); } .card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } /* Clickable "row" links styled as cards (classes/subjects/topics lists) */ .list-link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-h); font-weight: 600; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); } .list-link-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); background: var(--color-primary-light); color: var(--color-primary-dark); } .list-link-card__arrow { color: var(--color-primary); font-size: 18px; flex-shrink: 0; } /* Forms */ .field { margin-bottom: 16px; text-align: left; } .field label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-h); font-size: 14px; } .input { width: 100%; padding: 10px 14px; font-size: 15px; font-family: var(--sans); border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-h); box-sizing: border-box; transition: border-color var(--transition), box-shadow var(--transition); } .input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .otp-input { font-size: 22px; text-align: center; letter-spacing: 8px; font-weight: 700; } .form-error { background: var(--color-danger-light); color: var(--color-danger); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; font-weight: 500; } .form-success { background: var(--color-secondary-light); color: var(--color-secondary-dark); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; font-weight: 500; } .service-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: var(--color-danger-light); color: var(--color-danger); font-size: 14px; font-weight: 500; text-align: center; position: sticky; top: 0; z-index: 20; } .service-banner__close { background: none; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; white-space: nowrap; } .badge-success { background: var(--color-secondary-light); color: var(--color-secondary-dark); } .badge-warning { background: var(--color-accent-light); color: var(--color-accent-dark); } .badge-neutral { background: var(--border); color: var(--text-muted); } /* App chrome: header / sidebar / footer */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 10; } .app-header__brand { font-weight: 800; font-size: 20px; color: var(--color-primary-dark); display: flex; align-items: center; gap: 8px; text-decoration: none; } .app-header__actions { display: flex; align-items: center; gap: 12px; } .logout-button { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-danger-light); color: var(--color-danger); border: none; border-radius: var(--radius-full); font-weight: 700; font-size: 14px; font-family: var(--sans); cursor: pointer; transition: background var(--transition), color var(--transition); } .logout-button:hover { background: var(--color-danger); color: #fff; } .app-body { display: flex; flex: 1; align-items: stretch; } .app-main { flex: 1; min-width: 0; position: relative; } .theme-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 70%, transparent); z-index: 5; } .theme-loading-overlay__spinner { width: 36px; height: 36px; border: 4px solid var(--border); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: theme-loading-spin 0.7s linear infinite; } @keyframes theme-loading-spin { to { transform: rotate(360deg); } } .app-footer { padding: 14px 28px; text-align: center; color: var(--text-muted); font-size: 13px; background: var(--surface); border-top: 1px solid var(--border); } .sidebar { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; box-sizing: border-box; } .sidebar__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; transition: background var(--transition), color var(--transition); } .sidebar__link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .sidebar__link--active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .sidebar__link--active:hover { background: var(--color-primary-dark); color: #fff; } /* User switcher (child picker in header) */ .user-switcher { position: relative; } .user-switcher__trigger { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--color-primary-light); color: var(--color-primary-dark); border: none; border-radius: var(--radius-full); font-weight: 700; font-size: 14px; font-family: var(--sans); cursor: pointer; transition: background var(--transition), color var(--transition); } .user-switcher__trigger:hover { background: var(--color-primary); color: #fff; } .user-switcher__dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); list-style: none; margin: 0; padding: 6px; min-width: 200px; z-index: 20; } .user-switcher__dropdown li { padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background var(--transition), color var(--transition); } .user-switcher__dropdown li:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .user-switcher__dropdown ul { list-style: none; margin: 0; padding: 0; } .user-switcher__section + .user-switcher__section { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); } .user-switcher__section-label { padding: 4px 10px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .user-switcher__themes { display: flex; flex-direction: column; gap: 4px; } .theme-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: var(--radius-sm); font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; transition: background var(--transition), color var(--transition); } .theme-option:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .theme-option--active { background: var(--color-primary); color: #fff; font-weight: 700; } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(29, 43, 58, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal { background: var(--surface); padding: 32px; border-radius: var(--radius-lg); max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); text-align: left; } /* ===== Character companion + tic-tac-toe ===== */ @keyframes characterSlideIn { from { transform: translateX(-70px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes characterSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-70px); opacity: 0; } } @keyframes characterBounce { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } @keyframes bubbleFadeIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .character-companion { position: fixed; left: 216px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: characterSlideIn 0.5s ease-out; } .character-companion--leaving { animation: characterSlideOut 0.4s ease-in forwards; } .character-companion__close { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; line-height: 1; font-size: 14px; } .character-companion__sprite { width: 120px; height: auto; filter: drop-shadow(var(--shadow-md)); animation: characterBounce 2.4s ease-in-out infinite; } .character-companion__play { padding: 6px 16px; font-size: 14px; } .speech-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 8px 14px; max-width: 200px; text-align: center; font-size: 14px; animation: bubbleFadeIn 0.3s ease-out; } .tic-tac-toe-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; } .tic-tac-toe-cell { appearance: none; -webkit-appearance: none; aspect-ratio: 1; font-size: 32px; font-weight: 800; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--text-h); cursor: pointer; } .tic-tac-toe-cell:disabled { cursor: default; opacity: 1; } .tic-tac-toe-cell--x { color: var(--color-primary-dark); } .tic-tac-toe-cell--o { color: var(--color-accent-dark); } .tic-tac-toe-result { text-align: center; font-weight: 600; } @media (max-width: 768px) { .character-companion { left: 12px; bottom: 16px; } .character-companion__sprite { width: 160px; } .speech-bubble { max-width: 190px; font-size: 14px; } } /* Misc */ .loading-state { text-align: center; margin-top: 40px; color: var(--text-muted); font-size: 16px; } .empty-state { color: var(--text-muted); font-size: 15px; padding: 20px 0; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 10px; } .gap-sm { gap: 8px; } .mt-sm { margin-top: 8px; } .ml-sm { margin-left: 8px; } .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; } /* Children management */ .child-card__name { font-weight: 700; font-size: 17px; color: var(--text-h); } .child-card__birthdate { font-weight: 400; font-size: 14px; color: var(--text-muted); } .stats-table { width: 100%; border-collapse: collapse; font-size: 14px; } .stats-table th { text-align: left; padding: 8px 10px; background: var(--bg); color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; } .stats-table th:not(:first-child), .stats-table td:not(:first-child) { text-align: center; } .stats-table td { padding: 8px 10px; border-top: 1px solid var(--border); } .stats-table__num { font-weight: 600; color: var(--text-h); } /* Training session */ .progress-bar { height: 8px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; margin-top: 24px; } .progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); transition: width 0.3s ease; } .progress-label { margin-top: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; } .question-card { font-size: 24px; padding: 24px; background: var(--color-primary-light); border-radius: var(--radius-lg); text-align: center; font-weight: 700; color: var(--text-h); } .word-chip { padding: 8px 18px; border: none; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition); } .word-chip:hover:not(:disabled) { background: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); } .word-chip:disabled { opacity: 0.5; cursor: default; } .word-chip--selected { background: var(--color-secondary-light); color: var(--color-secondary-dark); } .sentence-drop-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; border: 2px dashed var(--border); padding: 12px; border-radius: var(--radius-md); background: var(--bg); } .feedback { font-size: 17px; font-weight: 700; padding: 14px 18px; border-radius: var(--radius-md); margin-top: 16px; } .feedback--correct { background: var(--color-secondary-light); color: var(--color-secondary-dark); } .feedback--incorrect { background: var(--color-danger-light); color: var(--color-danger); } .answer-choice-btn { padding: 10px 22px; margin-right: 8px; font-size: 18px; font-weight: 700; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-h); cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .answer-choice-btn:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-1px); } .answer-choice-btn:disabled { opacity: 0.5; cursor: not-allowed; } .answer-input { padding: 10px 14px; font-size: 18px; width: 100%; max-width: 220px; font-family: var(--sans); border: 1.5px solid var(--border); border-radius: var(--radius-sm); box-sizing: border-box; transition: border-color var(--transition), box-shadow var(--transition); } .answer-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .row--center { justify-content: center; } .row--between { justify-content: space-between; } .instruction-text { font-size: 17px; color: var(--text); } .word-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .selected-word-chip { background: var(--color-secondary-light); color: var(--color-secondary-dark); padding: 6px 14px; border-radius: var(--radius-full); font-weight: 600; } /* ===== Responsive (phone/tablet) ===== */ @media (max-width: 768px) { .app-header { padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; } .app-header__brand { font-size: 18px; } .app-header__actions { gap: 8px; } .app-body { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px; } .sidebar__nav-list { flex-direction: row; flex-wrap: wrap; gap: 6px; } .sidebar__link { padding: 8px 12px; font-size: 14px; } .page { padding: 20px 16px 40px; } } @media (max-width: 480px) { .app-header__brand { font-size: 16px; } .user-switcher__trigger, .logout-button { padding: 7px 12px; font-size: 13px; } .card { padding: 16px 18px; } .modal { padding: 20px; } .question-card { font-size: 19px; padding: 18px; } .stats-table { font-size: 12px; } .stats-table th, .stats-table td { padding: 6px 6px; } } /* ===================== Site themes: backgrounds ===================== Token colors live in variables.scss; this is the imagery layer, applied to .app-main (the content area) rather than .app-shell: the header/sidebar/footer sit on top with an opaque --surface background anyway, so theming .app-shell just wasted most of the image behind that chrome. background-size: 100% 100% stretches the art to exactly fill .app-main, so it's always fully visible (no cropping) at any screen size. Boy/girl themes are page-specific (targeted via :has() on the page--* modifier class each page renders, e.g. ChildrenManagement.tsx's "page page--children"), notebook/blackboard are site-wide. Kept in sync with learning/components.css and trainings/components.css. */ /* Notebook: checkered grid + red margin line + ink blot, pure CSS/SVG (no raster asset) */ :root[data-theme=notebook] .app-main { background-color: #f6efdf; background-image: linear-gradient(to right, rgba(174, 191, 214, 0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(174, 191, 214, 0.55) 1px, transparent 1px), linear-gradient(to right, transparent calc(9% - 1px), rgba(178, 69, 63, 0.55) calc(9% - 1px), rgba(178, 69, 63, 0.55) 9%, transparent 9%); background-size: 22px 22px, 22px 22px, 100% 100%; background-repeat: repeat, repeat, no-repeat; background-attachment: local, local, local; position: relative; } :root[data-theme=notebook] .app-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%232f4374' fill-opacity='0.12'%3E%3Ccircle cx='93' cy='90' r='7'/%3E%3Ccircle cx='97.5' cy='94' r='2.2'/%3E%3Ccircle cx='89' cy='95' r='1.4'/%3E%3C/g%3E%3Cg stroke='%23b2453f' stroke-opacity='0.55' stroke-width='0.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M3.2 21 Q4.5 19.5 6 21 Q7.5 22.5 4.8 23.3'/%3E%3Cpath d='M2.8 43 L4.6 45.5 L7.6 41'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; z-index: 0; } /* Blackboard: real generated art, site-wide (one narrower crop for small screens). Faded with a dark scrim (matching --bg) so it reads as a backdrop, not full-strength art. */ :root[data-theme=blackboard] .app-main { background-color: #1b1b19; background-image: linear-gradient(rgba(27, 27, 25, 0.28), rgba(27, 27, 25, 0.28)), url("/assets/board-BiIdtUAD.webp"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: local; } @media (max-width: 700px) { :root[data-theme=blackboard] .app-main { background-image: linear-gradient(rgba(27, 27, 25, 0.28), rgba(27, 27, 25, 0.28)), url("/assets/board-narrow-BD28tmGe.webp"); } } /* Boy / girl: page-specific art. A light scrim keeps the busier illustrations from competing with the foreground cards. background-position is dropped: with size 100% 100% the image already matches .app-main exactly, so a position offset would have no effect. */ :root[data-theme=boy] .app-main:has(.page--children) { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/boy-children-DXSMIBB2.webp"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: local; } :root[data-theme=boy] .app-main:has(.page--family) { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/boy-family-DpGN_g4W.webp"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: local; } :root[data-theme=girl] .app-main:has(.page--children) { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/girl-children-CEqNn4QB.webp"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: local; } :root[data-theme=girl] .app-main:has(.page--family) { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/girl-family-DTbaJjQg.webp"); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: local; } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.5 var(--sans); letter-spacing: 0.1px; color-scheme: light dark; color: var(--text); background: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #root { min-height: 100svh; display: flex; flex-direction: column; } h1, h2, h3 { font-family: var(--sans); font-weight: 700; color: var(--text-h); margin: 0 0 12px; } h1 { font-size: 32px; letter-spacing: -0.4px; } h2 { font-size: 24px; letter-spacing: -0.24px; } h3 { font-size: 18px; } p { margin: 0 0 8px; } a { color: var(--color-primary); } button { font-family: var(--sans); } code { font-family: ui-monospace, Consolas, monospace; font-size: 14px; padding: 3px 6px; border-radius: 4px; background: var(--border); color: var(--text-h); }