/* ============================================================================ 11-FUN-MODE — OPT-IN COLORFUL THEME FOR YOUNGER STUDENTS Toggled from Settings > Appearance ("Fun Mode"). Stored client-side only (localStorage 'funMode'), applied as a `.fun-mode` class on alongside the existing theme-light/theme-dark/theme-default class (see index.html and AppearanceSection.razor). Intentionally light-mode-only: gated with `:not(.theme-dark)` everywhere so switching to Dark still looks normal. Approach: override the same design-system tokens every component already reads (see design-system/01-variables.css, theme.css) so brand colors, buttons, and cards go colorful for free. Semantic status colors (success/ warning/error — task overdue, exam urgent, etc.) are deliberately left alone so their meaning doesn't get lost in the brighter palette. A few purely decorative icon accents (soccer ball / flower / hockey stick / star) are added on repeating tiles and cards without touching their real, meaningful icon glyphs. ============================================================================ */ :root.fun-mode:not(.theme-dark) { /* Backgrounds — soft sky/lavender instead of slate */ --sf-bg-primary: #f1f6ff; --sf-bg-page: #f1f6ff; --sf-bg-sidebar: #eaf2ff; --sf-bg-secondary: #ffffff; --sf-bg-hover: #e3efff; /* Brand colors — vivid blue + green instead of muted ocean/teal */ --sf-primary-500: #4f8ef7; --sf-primary-600: #2f6fed; --sf-primary-700: #1d54c9; --sf-secondary-500: #22c55e; --sf-secondary-600: #16a34a; --sf-secondary-700: #15803d; --sf-link-text: #7c3aed; --sf-link-text-hover: #5b21b6; --sf-border-color: #cfe3ff; --sf-border-color-hover: #a9cdfb; /* Rounder corners everywhere these tokens are used */ --sf-radius-lg: 1rem; --sf-radius-xl: 1.25rem; --sf-radius-2xl: 1.5rem; /* Soft colorful shadows instead of plain grey */ --sf-shadow-sm: 0 2px 6px rgba(124, 58, 237, 0.12); --sf-shadow-md: 0 6px 16px rgba(47, 111, 237, 0.16); --sf-shadow-lg: 0 14px 30px rgba(34, 197, 94, 0.16); } /* ============================================================================ PAGE HEADER — colorful gradient badge around every page icon ============================================================================ */ :root.fun-mode:not(.theme-dark) .sf-page-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--sf-radius-full); background: linear-gradient(135deg, #60a5fa, #34d399, #fbbf24, #f472b6); color: #ffffff; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); } /* ============================================================================ BUTTONS — bolder, pill-shaped, gradient fills ============================================================================ */ :root.fun-mode:not(.theme-dark) .btn { border-radius: var(--sf-radius-full); font-weight: var(--sf-font-bold); } :root.fun-mode:not(.theme-dark) .btn-primary { background: linear-gradient(135deg, #60a5fa, #2f6fed); border-color: transparent; } :root.fun-mode:not(.theme-dark) .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #3b82f6, #1d54c9); transform: translateY(-2px) scale(1.02); } :root.fun-mode:not(.theme-dark) .btn-secondary { background: linear-gradient(135deg, #6ee7b7, #16a34a); border-color: transparent; } :root.fun-mode:not(.theme-dark) .btn-secondary:hover:not(:disabled) { background: linear-gradient(135deg, #4ade80, #15803d); } /* ============================================================================ CARDS & HUB TILES — rounder, slightly bolder borders ============================================================================ */ :root.fun-mode:not(.theme-dark) .card, :root.fun-mode:not(.theme-dark) .note-card, :root.fun-mode:not(.theme-dark) .exam-item, :root.fun-mode:not(.theme-dark) .assignment-item, :root.fun-mode:not(.theme-dark) .initiative-card, :root.fun-mode:not(.theme-dark) .hub-tile { border-radius: var(--sf-radius-2xl); border-width: 2px; transition: transform var(--sf-transition-fast), box-shadow var(--sf-transition-fast); } :root.fun-mode:not(.theme-dark) .hub-tile:hover { transform: translateY(-2px) scale(1.01); } /* Colorful icon badges on hub tiles — the real glyph (fa-tasks, fa-book, etc.) stays put; only its background gets a bright gradient, cycling by position so a grid of tiles reads as playful rather than flat. */ :root.fun-mode:not(.theme-dark) .hub-tile-icon { color: #ffffff; } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+1) .hub-tile-icon { background: linear-gradient(135deg, #60a5fa, #2f6fed); } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+2) .hub-tile-icon { background: linear-gradient(135deg, #f9a8d4, #f472b6); } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+3) .hub-tile-icon { background: linear-gradient(135deg, #6ee7b7, #16a34a); } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+4) .hub-tile-icon { background: linear-gradient(135deg, #fde68a, #f59e0b); } /* Small decorative corner sticker per tile — purely decorative, cycles through a soccer ball, flower, hockey sticks and a star. Kept low-opacity so it never competes with the tile's real icon or text for attention. */ :root.fun-mode:not(.theme-dark) .hub-tile { position: relative; } :root.fun-mode:not(.theme-dark) .hub-tile::after { font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; top: 0.4rem; right: 0.6rem; font-size: 0.7rem; opacity: 0.4; } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+1)::after { content: "\f1e3"; /* fa-futbol */ color: #2f6fed; } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+2)::after { content: "\f7ff"; /* fa-flower */ color: #f472b6; } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+3)::after { content: "\f454"; /* fa-hockey-sticks */ color: #16a34a; } :root.fun-mode:not(.theme-dark) .hub-tile:nth-of-type(4n+4)::after { content: "\f005"; /* fa-star */ color: #f59e0b; } /* ============================================================================ ASSESSMENT ANSWER OPTIONS — Kahoot-style colored tiles with shape icons Targets the multiple-choice rows in AssessmentItemView.razor (.response-options .form-check). Cycles the same 4-color/4-shape pattern Kahoot uses (red triangle, blue diamond, yellow circle, green square) so a question with more than 4 options just repeats the set rather than breaking. The letter/text label itself is untouched — only color, an icon, and the selected/hover treatment change. ============================================================================ */ :root.fun-mode:not(.theme-dark) .response-options .form-check { border-width: 3px; border-color: transparent; color: #ffffff; font-weight: var(--sf-font-bold); position: relative; } :root.fun-mode:not(.theme-dark) .response-options .form-check label { color: #ffffff !important; } :root.fun-mode:not(.theme-dark) .response-options .form-check:nth-of-type(4n+1) { background: linear-gradient(135deg, #f4536a, #e21b3c); } :root.fun-mode:not(.theme-dark) .response-options .form-check:nth-of-type(4n+2) { background: linear-gradient(135deg, #2f8ef0, #1368ce); } :root.fun-mode:not(.theme-dark) .response-options .form-check:nth-of-type(4n+3) { background: linear-gradient(135deg, #ffc93c, #ffa602); } :root.fun-mode:not(.theme-dark) .response-options .form-check:nth-of-type(4n+4) { background: linear-gradient(135deg, #4caf1f, #26890c); } :root.fun-mode:not(.theme-dark) .response-options .form-check:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.08); } :root.fun-mode:not(.theme-dark) .response-options .form-check.selected { border-color: #ffffff; box-shadow: 0 0 0 3px #ffffff, var(--sf-shadow-md); transform: scale(1.02); } :root.fun-mode:not(.theme-dark) .response-options .form-check.selected label { color: #ffffff !important; font-weight: var(--sf-font-bold); } :root.fun-mode:not(.theme-dark) .response-options .form-check input[type="radio"] { accent-color: #ffffff; } /* Course notes get a little flower sticker — these are the most "student" of the student pages (CourseNoteList, CourseDetail). */ :root.fun-mode:not(.theme-dark) .note-card { position: relative; } :root.fun-mode:not(.theme-dark) .note-card::before { content: "\f7ff"; /* fa-flower */ font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; top: -0.55rem; right: -0.55rem; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: var(--sf-radius-full); background: #ffffff; color: #f472b6; font-size: 0.85rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }