/* Shared chalkboard design system, used by every page in the app. The browser hides [hidden] elements with a low-priority display:none that any author rule setting display (e.g. .challenge-save { display: flex }) silently beats. Every element toggled from JS via el.hidden relies on this rule. */ [hidden] { display: none !important; } /* ── Design tokens ──────────────────────────────────────────────────────────── */ :root { --board: #0c0c0c; --board-raised: rgba(255, 255, 255, 0.025); --chalk-white: #f0ece0; --chalk-dim: rgba(240, 236, 224, 0.55); --chalk-faint: rgba(240, 236, 224, 0.22); --chalk-orange: #e8650a; --chalk-orange-soft: rgba(232, 101, 10, 0.12); --chalk-orange-glow: rgba(232, 101, 10, 0.35); --chalk-gold: #f5cc42; --chalk-border: rgba(240, 236, 224, 0.1); --chalk-border-strong: rgba(240, 236, 224, 0.25); --font-chalk: "Caveat", cursive; --font-bistro: "Playfair Display", Georgia, serif; --font-graffiti: "Permanent Marker", cursive; /* Nøytral font for tabelldata/celletekst — lesbar ved mye tekst, i motsetning til håndskrift-fontene som brukes til overskrifter/knapper. */ --font-data: "Space Grotesk", "Segoe UI", sans-serif; /* Shared content column width for every page (nav header, quiz, practice, Facts/act/track/album, challenges, brukeradmin, bruksstatistikk). One responsive ramp here so every page uses the same wide layout on a big screen — pages must NOT redefine --max-w locally. */ --max-w: 900px; --card-pad: 2rem 1.75rem; /* Base button/input font sizes. Quiz/Trening scales these up further at wider breakpoints (see quiz.css) — these are the sane defaults for pages that only load this file. */ --fs-btn-primary: 1.65rem; --fs-btn-secondary: 1.15rem; --fs-input: 1.6rem; } /* Widen the shared content column on larger screens — applies to every page. */ @media (min-width: 768px) { :root { --max-w: 1100px; } } @media (min-width: 1200px) { :root { --max-w: 1400px; } } /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } h1, h2, p, ul { margin: 0; padding: 0; } /* ── Chalkboard background ──────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-chalk); color: var(--chalk-white); background-color: var(--board); /* Three-point vignette for board depth */ background-image: radial-gradient( ellipse 110% 55% at 50% 0%, rgba(26, 20, 10, 0.75) 0%, transparent 60% ), radial-gradient( ellipse 60% 65% at 5% 90%, rgba(30, 18, 5, 0.5) 0%, transparent 55% ), radial-gradient( ellipse 50% 45% at 95% 15%, rgba(18, 8, 0, 0.45) 0%, transparent 50% ); overflow-x: hidden; } /* Chalk grain overlay — subtle diagonal hatching imitates chalk texture */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient( 62deg, transparent 0px, transparent 4px, rgba(255, 255, 255, 0.0035) 4px, rgba(255, 255, 255, 0.0035) 5px ), repeating-linear-gradient( -62deg, transparent 0px, transparent 7px, rgba(255, 255, 255, 0.002) 7px, rgba(255, 255, 255, 0.002) 8px ); } /* ── Header / navigasjon (bygget av menu.js) ─────────────────────────────────── */ .site-header { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.5rem; text-align: center; } /* menu.js prepends its nav header (#menu-header) to . Some pages ALSO have their own static
(the page title block), which sits later in the DOM and would otherwise paint over the user dropdown that overflows out of #menu-header. Give the nav header a much higher stacking level so the dropdown always wins clicks. */ #menu-header { z-index: 10000; } .top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; } .nav-link { font-family: var(--font-chalk); font-size: 1.15rem; color: var(--chalk-dim); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s ease; padding: 0.1rem 0; border-bottom: 1px solid transparent; } .nav-link:hover { color: var(--chalk-orange); border-bottom-color: rgba(232, 101, 10, 0.4); } .nav-group { display: flex; align-items: center; gap: 0.6rem; } .nav-sep { color: var(--chalk-faint); font-size: 1.15rem; } .nav-profile-btn { background: none; border: none; border-bottom: 1px solid transparent; font: inherit; cursor: pointer; } /* Title block */ .title-block { display: flex; flex-direction: column; align-items: center; gap: 0; } .title-pre { font-family: var(--font-bistro); font-style: italic; font-weight: 400; font-size: 0.95rem; color: var(--chalk-orange); letter-spacing: 0.18em; opacity: 0.85; margin-bottom: -0.3rem; animation: fadeUp 0.6s 0.1s ease-out both; } .title-main { font-family: var(--font-chalk); font-weight: 700; font-size: clamp(5rem, 20vw, 8.5rem); color: var(--chalk-white); line-height: 0.92; letter-spacing: -0.01em; text-shadow: 0 0 50px rgba(240, 236, 224, 0.07), 3px 3px 0 rgba(0, 0, 0, 0.55); animation: chalkReveal 0.85s ease-out both; } .title-era { font-family: var(--font-bistro); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--chalk-dim); letter-spacing: 0.22em; margin-top: 0.1rem; animation: fadeUp 0.6s 0.3s ease-out both; } .title-ornament { margin-top: 1.1rem; color: var(--chalk-orange); font-family: var(--font-bistro); font-size: 0.7rem; letter-spacing: 1.3rem; opacity: 0.5; animation: fadeUp 0.5s 0.5s ease-out both; } /* ── Animations ─────────────────────────────────────────────────────────────── */ @keyframes chalkReveal { from { opacity: 0; filter: blur(14px); letter-spacing: 0.14em; } to { opacity: 1; filter: blur(0); letter-spacing: -0.01em; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Chalk card ──────────────────────────────────────────────────────────────── */ .chalk-card { background: var(--board-raised); border: 1px solid var(--chalk-border); border-radius: 5px; padding: var(--card-pad); animation: fadeUp 0.35s ease-out both; } /* ── Generic buttons / inputs ──────────────────────────────────────────────── */ .chalk-btn-primary { display: block; width: 100%; background: var(--chalk-orange); color: #0c0c0c; border: none; border-radius: 4px; font-family: var(--font-chalk); font-size: var(--fs-btn-primary); font-weight: 700; padding: 0.65rem 2rem; cursor: pointer; letter-spacing: 0.04em; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; box-shadow: 0 0 20px rgba(232, 101, 10, 0.28); } .chalk-btn-primary:hover { background: #ff7820; box-shadow: 0 0 32px rgba(232, 101, 10, 0.5); transform: translateY(-2px); } .chalk-btn-primary:active { transform: translateY(0); box-shadow: 0 0 14px rgba(232, 101, 10, 0.3); } .chalk-btn-secondary { background: transparent; border: 1px solid var(--chalk-border-strong); border-radius: 3px; color: var(--chalk-dim); font-family: var(--font-chalk); font-size: var(--fs-btn-secondary); padding: 0.35rem 1.1rem; cursor: pointer; letter-spacing: 0.04em; transition: color 0.2s ease, border-color 0.2s ease; } .chalk-btn-secondary:hover { color: var(--chalk-white); border-color: rgba(240, 236, 224, 0.5); } .chalk-input { flex: 1; background: transparent; border: none; border-bottom: 2px solid var(--chalk-border-strong); color: var(--chalk-white); font-family: var(--font-chalk); font-size: var(--fs-input); padding: 0.35rem 0; outline: none; min-width: 0; transition: border-color 0.2s ease; } .chalk-input::placeholder { color: var(--chalk-faint); font-style: italic; } .chalk-input:focus { border-bottom-color: var(--chalk-orange); } /* ── Modal ──────────────────────────────────────────────────────────────────── */ .chalk-modal { background: var(--board); background-image: none; color: var(--chalk-white); border: 1px solid var(--chalk-border-strong); border-radius: 5px; padding: var(--card-pad); width: 100%; max-width: 380px; } .chalk-modal::backdrop { background: rgba(0, 0, 0, 0.6); } .chalk-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .chalk-modal-title { font-family: var(--font-chalk); font-size: 1.45rem; font-weight: 600; color: var(--chalk-dim); letter-spacing: 0.05em; } .chalk-modal-close-btn { background: none; border: none; color: var(--chalk-dim); font-size: 1.5rem; line-height: 1; cursor: pointer; } .chalk-modal-close-btn:hover { color: var(--chalk-orange); } .chalk-modal-form { display: flex; flex-direction: column; gap: 0.4rem; } .chalk-modal-form label { font-size: 0.9rem; color: var(--chalk-dim); margin-top: 0.6rem; } .chalk-modal-form .chalk-input { border: 1px solid var(--chalk-border-strong); border-radius: 4px; padding: 0.5rem 0.7rem; font-size: 1.1rem; } .chalk-modal-form .chalk-btn-primary { margin-top: 1.4rem; font-size: 1.25rem; } .chalk-checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .chalk-checkbox-row label { margin-top: 0; } .chalk-modal-error, .chalk-modal-success { font-size: 0.9rem; margin-top: 0.5rem; } .chalk-modal-error { color: #ff8098; } .chalk-modal-success { color: #8affc4; } /* ── Header icon buttons (Spotify/Tidal/bruker, bygget av menu.js) ───────────── */ .header-tool-btn { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--chalk-border); border-radius: 4px; background: transparent; color: var(--chalk-dim); text-decoration: none; cursor: pointer; padding: 0; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .header-tool-btn:hover, .header-tool-btn:focus-visible { color: var(--chalk-white); border-color: var(--chalk-orange); outline: none; } .header-tool-btn svg { width: 1.15rem; height: 1.15rem; } /* ── User menu dropdown ───────────────────────────────────────────────────── */ .user-btn-wrap { position: relative; } /* "Admin ▾" trigger — a