/* ========================================================================= Knowalot — site-specific styling layer ------------------------------------------------------------------------- This file is loaded AFTER template/css/style.css, so anything in here wins on the cascade. Template upgrades still flow through for everything we don't override here. Brand direction: warm orange (echoing the original knowalot palette, which used orange as a deliberately gender-neutral kid-friendly accent), complementary teal as secondary, Fredoka as the display font for headings. Designed to work in both light and dark themes. ========================================================================= */ /* Friendly rounded display font for headings (Fredoka) + Quicksand for body text. Quicksand is more visibly rounded than the default system font stack, so the personality change is obvious without sacrificing long-paragraph readability. Both fetched in one Google Fonts request. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap'); /* Body font — apply to AND a few high-specificity selectors so we beat the inline critical-CSS body{} rule that template/default-head.html ships in . Headings re-override to Fredoka further down. */ body, .site-main, .site-footer, .container, p, li, td, th, label, input, button, textarea, select { font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } body { font-weight: 500; /* Quicksand at 500 reads warmer than 400 */ } /* ------------------------------------------------------------------------- Light theme — colour overrides ------------------------------------------------------------------------- */ :root { /* Brand: warm orange + teal accent */ --primary-color: #ea580c; /* deep orange — buttons, links, brand */ --secondary-color: #0d9488; /* teal — secondary actions, accents */ /* Surfaces — keep mostly white but warm-tint the hover states. Header and footer get the same cream tint so the page is visually "bookended" in the brand colour. */ --card-hover-bg: #fff7ed; /* very light orange cream */ --background-alt: #fffaf3; /* subtle warm tint for alt bg */ --header-bg: #fff7ed; /* warm header (matches footer) */ --footer-bg: #fff7ed; /* warm footer */ /* Borders — softer warm grey instead of cool grey */ --border-color: #f3e8dd; --border-strong: #e7d4bf; } /* ------------------------------------------------------------------------- Dark theme — same identity, lifted contrast ------------------------------------------------------------------------- */ [data-theme="dark"] { /* Lighter orange so it pops against the dark slate background */ --primary-color: #fb923c; --secondary-color: #2dd4bf; /* brighter teal in dark mode */ --card-hover-bg: #1c2934; --background-alt: #182234; /* Header and footer in deep warm orange so the brand identity carries through both themes — light = cream-orange band, dark = deep-orange band. Dark enough that the page body content still dominates, warm enough that you can clearly see "this is the orange site". */ --header-bg: #431407; --footer-bg: #431407; --border-color: #2c3a4f; --border-strong: #3d506b; } /* ========================================================================= Typography — friendly rounded headings ========================================================================= */ h1, h2, h3, .kw-cat-card-title, .quiz-round-label, .qz-shell h2, .qz-shell h3 { font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; letter-spacing: -0.01em; } /* The body h1 — give it a hint of orange and a friendly weight */ .site-main h1, main h1 { color: var(--text-color); font-weight: 700; margin-bottom: 1rem; } /* Body h2 — section headings get an orange accent underline */ .site-main h2, main h2 { color: var(--text-color); border-bottom: 3px solid var(--primary-color); padding-bottom: 0.4rem; display: inline-block; margin-top: 2rem; } /* ========================================================================= Header — brand treatment Top accent stripe in primary orange to mirror the footer's top border, plus a soft warm tint on the header background so it visually separates from the page content without being heavy. ========================================================================= */ .site-header { border-top: 4px solid var(--primary-color); border-bottom: 4px solid var(--primary-color); background: var(--header-bg); } /* Site title / logo word inside the header — give it the brand colour and the friendly display font so the brand name reads as a logo, not just text. */ .site-header .site-title, .site-header .site-name, .site-header h1.site-title a, .site-header a[rel="home"] { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--primary-color); letter-spacing: -0.01em; } /* ========================================================================= Category card grid (homepage) Subtle playfulness: each card gets a top accent stripe in alternating colours so the grid reads as colourful but not chaotic. The card itself stays clean white in light mode / dark slate in dark mode. ========================================================================= */ .kw-cat-card { border-top: 4px solid var(--primary-color); border-radius: 12px; } .kw-cat-card:hover { transform: translateY(-3px); } /* Cycle through orange / teal / coral / amber on the top stripes so the grid doesn't read monotone. nth-child cycles automatically. */ .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+2) { border-top-color: var(--secondary-color); } .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+3) { border-top-color: #f59e0b; } /* warm amber */ .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+4) { border-top-color: #ef4444; } /* coral red */ .kw-cat-card-title { font-size: 1.25rem; color: var(--primary-color); } /* Category-card icons (Lucide inline SVG). Sit above the title; colour tracks the card's top-stripe cycle so icon + stripe read as a set. */ .kw-cat-card-icon { display: block; margin-bottom: 0.5rem; color: var(--primary-color); } .kw-cat-card-icon svg { width: 40px; height: 40px; } .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+2) .kw-cat-card-icon { color: var(--secondary-color); } .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+3) .kw-cat-card-icon { color: #f59e0b; } .kw-cat-grid-inner > .kw-cat-card:nth-child(4n+4) .kw-cat-card-icon { color: #ef4444; } /* Section icon at the top of L2 hubs and L3 quiz pages — gives every page in a section the same at-a-glance visual cue as its homepage card. The kw-section-icon-- hook is available for per-section colours later; default is the brand primary. */ .kw-section-icon { color: var(--primary-color); margin: 0 0 0.75rem; line-height: 0; } .kw-section-icon svg { width: 48px; height: 48px; } /* (Round-box label styling — .quiz-round-icon / .quiz-round-name — now lives in the shared template stylesheet so all CMS sites get it.) */ /* ========================================================================= Quiz round list (L2 hub pages) The template renders each round-link as a CARD with a coloured left accent bar (blue/green/amber by default). Don't fill the whole card — that fights the accent bar and makes the inner uppercase label unreadable. Just retune the accent bar colours to our palette and improve the inner text contrast. ========================================================================= */ /* Round-card wrapper — softer rounding + lift on hover */ .quiz-rounds .quiz-round { border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .quiz-rounds .quiz-round:hover { border-color: var(--primary-color); box-shadow: var(--shadow-md); transform: translateY(-2px); } /* "Round 7" label — full strength text colour, friendly font */ .quiz-round-label { font-size: 1.05rem; color: var(--text-color); } /* "· mixed quiz" + date — bump from light grey to readable secondary */ .quiz-round-type, .quiz-round-label .pe-list-date, .pe-list-date { color: var(--text-light); font-weight: 500; } /* Inner uppercase label inside each link card — was light grey #6b7280 on top of orange (unreadable). Restore proper contrast. */ .quiz-round-link-kind { color: var(--text-color); font-weight: 600; } .quiz-round-link-title { color: var(--text-color); } /* Repaint the left-accent bars in our palette: orange = primary action (Take the quiz), teal = secondary mode (Just the questions), coral = answers. The hover thickening from the template still works because it only changes border-left-color/width, not the rule. */ .quiz-round-link--q { border-left-color: var(--primary-color) !important; } .quiz-round-link--o { border-left-color: var(--secondary-color) !important; } .quiz-round-link--a { border-left-color: #ef4444 !important; } .quiz-round-link--q:hover { border-left-color: #c2410c !important; } .quiz-round-link--o:hover { border-left-color: #0f766e !important; } .quiz-round-link--a:hover { border-left-color: #b91c1c !important; } [data-theme="dark"] .quiz-round-link--q:hover { border-left-color: #fb923c !important; } [data-theme="dark"] .quiz-round-link--o:hover { border-left-color: #5eead4 !important; } [data-theme="dark"] .quiz-round-link--a:hover { border-left-color: #f87171 !important; } /* Subtle warm tint on hover so the whole card feels alive */ .quiz-round-link:hover { background: var(--card-hover-bg); border-color: var(--border-strong); } /* ========================================================================= Interactive quiz form ([quiz_interactive]) This is the main interactive surface — make options big and tappable for kids on tablets/phones, with clear visual feedback. ========================================================================= */ .qi-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; margin: 0.4rem 0; background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; font-size: 1rem; } .qi-opt:hover { background: var(--card-hover-bg); border-color: var(--primary-color); transform: translateX(2px); } .qi-opt input[type="radio"] { accent-color: var(--primary-color); width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } /* Selected state — softer than full primary so users can re-pick */ .qi-opt:has(input:checked) { background: var(--card-hover-bg); border-color: var(--primary-color); } /* ========================================================================= Quiz nav buttons (back / sibling / print at top of L3 pages) Inherit the round-link pill style for consistency ========================================================================= */ .quiz-nav-card { border-radius: 10px; border-color: var(--border-color); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .quiz-nav-card:hover { border-color: var(--primary-color); transform: translateY(-1px); } /* ========================================================================= Buttons (generic) — match the brand ========================================================================= */ button.cc-prefs-link, .btn-primary, button[type="submit"]:not(.qi-grade) { background: var(--primary-color); color: white; border: 0; border-radius: 999px; padding: 0.5rem 1.1rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } button.cc-prefs-link:hover { background: #c2410c; color: white; } /* ========================================================================= Footer polish ========================================================================= */ .site-footer { border-top: 3px solid var(--primary-color); }