/* =========================================== TABLE OF CONTENTS ------------------------------------------- 1. CSS Custom Properties (Variables) 2. Reset & Base 3. Background & Canvas 4. Layout – Header / Main / Footer 5. Main Containers (Left / Content / Right) 6. Typography & Headings 7. Links 8. Icons & Images 9. Buttons – Control & Rocket 10. Buttons – Global & Color Variants 11. Buttons – Card System (parent/child/popup) 12. Stats 13. Star Points 14. Popup / Overlay (#popup-box) 15. Sidebar 16. Feedback Modal 17. Animations & Keyframes 18. Scrollbar Utility 19. Utility Classes 20. Accessibility 21. Media Queries 20a. iPad Portrait (max-width: 64em / 1024px) 20b. iPad Landscape (min-width: 48.0625em) – sidebar push 20c. Mobile (max-width: 48em / 768px) 20d. Extra Small (max-width: 30em / 480px) 20e. Reduced Motion 20f. High Contrast 20g. Print 22. Extra effects =========================================== */ /* =========================================== 1. CSS CUSTOM PROPERTIES =========================================== */ :root { /* Colours – Dark theme (default) */ --color-bg-primary: #0a0a2a; --color-bg-secondary: #1a1a4a; --color-bg-tertiary: #252550; --color-text-primary: #c0c0c0; --color-text-secondary: #8a8aaa; --color-text-muted: #6a6a8a; --color-accent-gold: #cc9966; --color-accent-gold-light: #d4a573; --color-accent-gold-border:#ccb06a; --color-accent-border: rgba(192, 192, 192, 0.8); --color-border-subtle: #3a3a6a; --color-overlay: rgba(0, 0, 0, 0.85); --star-color: 255, 255, 255; /* rgb, används av js/bgstars.js */ /* Gradients */ --gradient-gold: linear-gradient(to right, #ffedb3, #f7e589, #cc9966, #f7e589, #ffedb3); --gradient-silver: linear-gradient(to right, #8f8f8f, #c0c0c0, #e6e6e6, #c0c0c0, #8f8f8f); --gradient-header: linear-gradient(135deg, #1a1a4a 0%, #0a0a2a 100%); --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-sidebar: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(40, 40, 80, 0.95)); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Typography */ --font-primary: 'Orbitron', sans-serif; --font-secondary: 'Exo 2', sans-serif; --font-size-base: clamp(0.875rem, 0.8rem + 0.5vw, 1rem); --font-size-h1: clamp(1.5rem, 3.8vw, 3rem); --font-size-h2: clamp(1.25rem, 2.5vw, 2rem); /* Borders & Shadows */ --border-radius-sm: 0.375rem; --border-radius-md: 0.625rem; --border-radius-lg: 0.75rem; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.2); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease-out; /* Layout */ --header-height: 4rem; --footer-height: 3.5rem; --sidebar-width: 250px; --sidebar-right-width: 320px; --container-max-width: 90%; /* Z-index */ --z-canvas: -1; --z-content: 1; --z-sidebar: 1000; --z-overlay: 1001; --z-modal: 9999; } /* =========================================== 1b. BAKGRUNDSTEMAN =========================================== Väljs i högermenyn och sätts som data-theme på av js/ks-tema.js. Valet ligger i localStorage, inte IndexedDB: det måste läsas synkront innan sidan ritas, annars blinkar fel bakgrund förbi vid varje sidladdning. 'rymd' är standard och definieras av :root ovan. Guld och silver är sajtens signaturfärger och måste fungera i alla tre. Guldet ligger kvar oförändrat i rymd och hav; i det ljusa temat mörkas det ner, eftersom ljust guld mot vitt blir oläsligt. ─────────────────────────────────────────── */ /* ── Havsblå ────────────────────────────────────────────────────────── Djupt hav snarare än rymd. Mörk nog för att guld och silver ska lysa, men med en grönblå ton som skiljer den tydligt från rymdtemat. */ [data-theme="hav"] { --color-bg-primary: #062a3d; --color-bg-secondary: #0d4257; --color-bg-tertiary: #135a71; --color-text-primary: #dCe8ec; --color-text-secondary: #93b3bf; --color-text-muted: #6d8f9c; --color-border-subtle: #1d6a83; --color-accent-border: rgba(214, 231, 236, 0.75); --color-overlay: rgba(3, 22, 32, 0.88); --gradient-header: linear-gradient(135deg, #0d4257 0%, #062a3d 100%); --gradient-sidebar: linear-gradient(135deg, rgba(6, 42, 61, 0.98), rgba(19, 90, 113, 0.95)); --shadow-glow: 0 0 20px rgba(64, 164, 196, 0.25); /* Ljusa bubblor i stället för vita stjärnor. */ --star-color: 196, 232, 242; } /* ── Ljust ──────────────────────────────────────────────────────────── Det tidigare [data-theme="light"] täckte bara ett par variabler, så header, ramar och gradienter blev kvar i mörkt och texten försvann. Här är hela uppsättningen. */ [data-theme="ljus"] { --color-bg-primary: #ffffff; --color-bg-secondary: #f4f6f8; --color-bg-tertiary: #e7ebef; --color-text-primary: #23303a; --color-text-secondary: #55636f; --color-text-muted: #7d8994; --color-border-subtle: #ccd5dd; --color-accent-border: rgba(120, 135, 148, 0.55); --color-overlay: rgba(255, 255, 255, 0.95); /* Guldet mörkas ner – den ljusa gradienten blir osynlig mot vitt. */ --color-accent-gold: #9a6b2f; --color-accent-gold-light: #b07f3d; --color-accent-gold-border:#c8a45e; --gradient-gold: linear-gradient(to right, #a9762f, #8a5d22, #c8a45e, #8a5d22, #a9762f); --gradient-silver:linear-gradient(to right, #6f7b85, #97a3ad, #b9c3cb, #97a3ad, #6f7b85); --gradient-header: linear-gradient(135deg, #f4f6f8 0%, #e7ebef 100%); --gradient-sidebar: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(238,242,246,0.96)); --shadow-sm: 0 2px 8px rgba(35, 48, 58, 0.10); --shadow-md: 0 10px 30px rgba(35, 48, 58, 0.14); --shadow-glow: 0 0 18px rgba(35, 48, 58, 0.10); /* Mörka prickar syns mot vitt; vita stjärnor skulle försvinna helt. */ --star-color: 150, 168, 182; } /* ── Julröd ─────────────────────────────────────────────────────────── Visas bara i december. js/ks-tema.js filtrerar bort valet resten av året och låter ett sparat 'jul' falla tillbaka på rymd – valet skrivs inte över, så nästa december är det tillbaka av sig självt. Djup granröd snarare än klarröd: guldet måste fortfarande lysa, och en stark röd bakgrund blir tröttsam att läsa mot en hel lektion. Stjärnorna blir varmvita och läser som snöfall. */ /* ── Bakgrundsanimationen ───────────────────────────────────────────── js/bgstars.js döljer canvasen i det ljusa temat, men gör det i JavaScript. Regeln här gör samma sak i CSS, så stjärnorna aldrig hinner synas medan skripten laddar och inte heller blir kvar om laddordningen ändras på någon sida. */ [data-theme="ljus"] #spaceCanvas { display: none !important; } /* Popupens överlägg var alltid nästan svart, oavsett tema. I det ljusa temat blev hela skärmen mörk så fort man öppnade en kategori. */ [data-theme="ljus"] .popup-overlay, [data-theme="ljus"] #childPopupOverlay.popup-overlay { background: rgba(255, 255, 255, .82); } [data-theme="hav"] .popup-overlay, [data-theme="hav"] #childPopupOverlay.popup-overlay { background: rgba(4, 26, 38, .86); } /* ── Havstemat: fält, knappar och ytor ──────────────────────────────── Temat sätter bakgrund och text men lämnade kanter och ytor i de blågrå toner som hör till rymdtemat. Mot havsblått ser de smutsiga ut. Här får de en turkos ton som hör ihop med bakgrunden. */ [data-theme="hav"] input, [data-theme="hav"] select, [data-theme="hav"] textarea { background: rgba(255, 255, 255, .07); border-color: rgba(154, 214, 235, .35); color: #dbe9f2; } [data-theme="hav"] input::placeholder, [data-theme="hav"] textarea::placeholder { color: #8fb4c8; } [data-theme="hav"] input:focus, [data-theme="hav"] select:focus, [data-theme="hav"] textarea:focus { outline-color: #6fd3e8; border-color: #6fd3e8; } [data-theme="hav"] .control-btn, [data-theme="hav"] .btn-global, [data-theme="hav"] .popup-btn, [data-theme="hav"] .sidebar-button, [data-theme="hav"] .sidebar-category-title { color: #dbe9f2; } [data-theme="hav"] .control-btn:hover, [data-theme="hav"] .btn-global:hover, [data-theme="hav"] .popup-btn:hover, [data-theme="hav"] .sidebar-button:hover, [data-theme="hav"] .sidebar-category-title:hover { /* Guld syns dåligt mot havsblått – ljus turkos i stället. */ color: #8fe3f5; background: rgba(143, 227, 245, .12); } [data-theme="hav"] .sidebar-children { background: rgba(255, 255, 255, .04); border-left: 2px solid rgba(143, 227, 245, .28); } [data-theme="hav"] .g-gold, [data-theme="hav"] .section-title { color: #9fe4f2; } /* ── Ljusa temat: läsbarhet ─────────────────────────────────────────── Sajten är byggd för mörk botten, där ljus text och genomskinliga ytor fungerar. Mot vitt blir samma värden bleka: knapptext i guld mot vitt ligger runt 2 i kontrast, och paneler med rgba(255,255,255,.05) syns inte alls. Här får de ytor och den text som är gemensam för hela sajten värden som fungerar mot ljus botten. */ [data-theme="ljus"] .sidebar-button, [data-theme="ljus"] .sidebar-category-title, [data-theme="ljus"] .sidebar-children a { color: #1e2b36; } [data-theme="ljus"] .sidebar-button:hover, [data-theme="ljus"] .sidebar-category-title:hover, [data-theme="ljus"] .sidebar-children a:hover { /* Guld mot vitt är oläsligt. Mörknad ton plus en tydlig yta. */ color: #7a5312; background: rgba(0, 0, 0, .06); } /* Underkategorierna ska ha vit botten, inte den genomskinliga ytan som bara syns mot mörkt. */ [data-theme="ljus"] .sidebar-children { background: #ffffff; border-left: 2px solid rgba(0, 0, 0, .10); } /* Genomskinliga ytor som försvinner mot vitt. */ [data-theme="ljus"] .control-btn, [data-theme="ljus"] .btn-global, [data-theme="ljus"] .popup-btn { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .18); color: #1e2b36; } [data-theme="ljus"] .control-btn:hover, [data-theme="ljus"] .btn-global:hover, [data-theme="ljus"] .popup-btn:hover { background: rgba(0, 0, 0, .10); border-color: #7a5312; } /* Rubriker i guld: den ljusa guldgradienten är redan mörkad i temavariablerna, men ren guldfärgad text behöver samma behandling. */ [data-theme="ljus"] .g-gold, [data-theme="ljus"] h2.g-gold, [data-theme="ljus"] .section-title { color: #7a5312; } /* Fält och listor. */ [data-theme="ljus"] input, [data-theme="ljus"] select, [data-theme="ljus"] textarea { background: #ffffff; border-color: rgba(0, 0, 0, .22); color: #1e2b36; } [data-theme="ljus"] input::placeholder, [data-theme="ljus"] textarea::placeholder { color: #5d6e7c; } /* Ytor som är satta i mörkt rakt i koden och därför inte följer temat. De här klasserna återkommer på många sidor; en per sida hade blivit ohanterligt många ändringar. */ [data-theme="ljus"] .card, [data-theme="ljus"] .panel, [data-theme="ljus"] .popup-content, [data-theme="ljus"] .start-card { background: #ffffff; color: #1e2b36; border-color: rgba(0, 0, 0, .14); } [data-theme="ljus"] .sc-header { background: rgba(0, 0, 0, .05); border-bottom-color: rgba(0, 0, 0, .12); } [data-theme="ljus"] .sc-row { border-bottom-color: rgba(0, 0, 0, .08); color: #4a5c6b; } [data-theme="ljus"] .sc-text strong, [data-theme="ljus"] .sc-title { color: #1e2b36; } [data-theme="ljus"] .sc-start { background: rgba(0, 0, 0, .04); color: #7a5312; } /* Skiljelinjer som är satta i vitt syns inte mot vitt. */ [data-theme="ljus"] hr, [data-theme="ljus"] .sidebar-category + .sidebar-category { border-color: rgba(0, 0, 0, .12); } /* ── Ytor som sidorna ritar själva ──────────────────────────────────── 534 regler runt om på sajten sätter en hårdkodad mörk bakgrund på kort, rutor och knappar. De skrevs för mörk botten och ser rätt ut i rymdtemat, men i ljust och hav blir de mörka öar mitt i en ljus sida. Att skriva om alla vore ogörligt och riskabelt. I stället fångas här de klassnamn som faktiskt delas mellan sidor. Selektorerna är medvetet specifika (två klasser eller main-prefix) så att de vinner över sidans egen regel utan !important. Sidegna namn – .eb-*, .key, .pit och liknande – täcks inte. De hör till en enskild app och behöver gås igenom var för sig. */ /* ── Ljust ───────────────────────────────────────────────────────── */ [data-theme="ljus"] main .card, [data-theme="ljus"] main .panel, [data-theme="ljus"] main .container, [data-theme="ljus"] main .box, [data-theme="ljus"] main .modal, [data-theme="ljus"] main .popup, [data-theme="ljus"] main section, [data-theme="ljus"] .popup-content, [data-theme="ljus"] .modal-content { background: #ffffff; color: #1e2b36; border-color: rgba(0, 0, 0, .14); } /* Rutor inuti rutor ska skilja sig något, annars flyter allt ihop. */ [data-theme="ljus"] main .card .card, [data-theme="ljus"] main .panel .panel, [data-theme="ljus"] main .card .box { background: #f2f5f8; } [data-theme="ljus"] main .btn, [data-theme="ljus"] main button:not(.sc-start):not(.ks-tts-figur), [data-theme="ljus"] main .btn-secondary, [data-theme="ljus"] main .save-btn { background: #f0f3f6; color: #1e2b36; border-color: rgba(0, 0, 0, .2); } [data-theme="ljus"] main .btn:hover, [data-theme="ljus"] main button:not(.sc-start):not(.ks-tts-figur):hover, [data-theme="ljus"] main .btn-secondary:hover, [data-theme="ljus"] main .save-btn:hover { background: #e2e8ee; border-color: #7a5312; } /* Överlagringar bakom popuprutor: ljus dimma i stället för svart. */ [data-theme="ljus"] .popup-overlay, [data-theme="ljus"] .overlay, [data-theme="ljus"] #popup-overlay { background: rgba(230, 236, 242, .88); } /* ── Hav ───────────────────────────────────────────────────────────── Här är botten redan mörk, så ytorna behöver inte bytas ut – bara få havets ton i stället för rymdens blålila. Annars ser korten ut som klistrade från ett annat tema. */ [data-theme="hav"] main .card, [data-theme="hav"] main .panel, [data-theme="hav"] main .container, [data-theme="hav"] main .box, [data-theme="hav"] main .modal, [data-theme="hav"] main .popup, [data-theme="hav"] main section, [data-theme="hav"] .popup-content, [data-theme="hav"] .modal-content { background: #0b3a56; color: #dbe9f2; border-color: #1c5e84; } [data-theme="hav"] main .card .card, [data-theme="hav"] main .panel .panel, [data-theme="hav"] main .card .box { background: #114b6d; } [data-theme="hav"] main .btn, [data-theme="hav"] main button:not(.sc-start):not(.ks-tts-figur), [data-theme="hav"] main .btn-secondary, [data-theme="hav"] main .save-btn { background: #114b6d; color: #dbe9f2; border-color: #2b6f96; } [data-theme="hav"] main .btn:hover, [data-theme="hav"] main button:not(.sc-start):not(.ks-tts-figur):hover, [data-theme="hav"] main .btn-secondary:hover, [data-theme="hav"] main .save-btn:hover { background: #17608a; border-color: #4fa3c9; } [data-theme="hav"] .popup-overlay, [data-theme="hav"] .overlay, [data-theme="hav"] #popup-overlay { background: rgba(3, 20, 31, .88); } /* Fält: samma behandling i båda temana. */ [data-theme="hav"] input, [data-theme="hav"] select, [data-theme="hav"] textarea { background: #06283d; border-color: #2b6f96; color: #dbe9f2; } [data-theme="hav"] input::placeholder, [data-theme="hav"] textarea::placeholder { color: #8fb6cc; } [data-theme="jul"] { --color-bg-primary: #5c1114; --color-bg-secondary: #74191d; --color-bg-tertiary: #8d2328; --color-text-primary: #f3e3d2; --color-text-secondary: #d9b9a4; --color-text-muted: #b8927c; --color-border-subtle: #93353a; --color-accent-border: rgba(243, 227, 210, 0.75); --color-overlay: rgba(46, 8, 10, 0.88); --star-color: 255, 246, 235; --gradient-header: linear-gradient(135deg, #74191d 0%, #5c1114 100%); --gradient-sidebar: linear-gradient(135deg, rgba(92, 17, 20, 0.98), rgba(141, 35, 40, 0.95)); --shadow-glow: 0 0 20px rgba(214, 168, 96, 0.22); } /* Det gamla namnet "light" översätts till "ljus" av js/ks-tema.js, så sparade värden från tidigare fortsätter fungera. */ /* =========================================== 2. RESET & BASE =========================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; height: 100%; width: 100%; } body { color: var(--color-text-primary); font-family: var(--font-primary); font-size: var(--font-size-base); min-height: 100vh; width: 100vw; position: relative; display: flex; flex-direction: column; line-height: 1.6; background: transparent; margin: 0; padding: 0; } a, button, input, select, textarea { font-size: inherit; } .login-container { background: #000; color: #fff; border-radius: 10px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); overflow: hidden; width: 100%; max-width: 250px; } .login-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 20px 10px; } .login-header h1 { font-size: 16px; margin-bottom: 5px; } .login-header p { opacity: 0.9; font-size: 12px; } .login-form { padding: 10px; } .form-group { margin-bottom: 10px; } /* FIX: dessa var tidigare globala element-selektorer (label, input[type=text], input[type=password]) och slog igenom pa HELA sajten - alla formular pa alla sidor fick width:90%, ljusgra ram och vit blockad label. Nu scopade till .login-form. */ .login-form label { display: block; margin-bottom: 5px; font-weight: 600; color: #fff; } .login-form input[type="text"], .login-form input[type="password"] { width: 90%; padding: 12px; border: 2px solid #e1e5e9; border-radius: 5px; font-size: 16px; transition: border-color 0.3s ease; } .login-form input[type="text"]:focus, .login-form input[type="password"]:focus { outline: none; border-color: #667eea; } /* FIX: .btn-login {} var deklarerad tva ganger med identiskt innehall. Den harden ar borttagen - se sektion 10 (rad ~800). */ /* FIX: .message och .error ar extremt generiska klassnamn och krockade med andra sidors meddelanderutor. Scopade till .login-container. */ .login-container .message { background-color: #d4edda; color: #155724; padding: 12px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #c3e6cb; } .login-container .error { background-color: #f8d7da; color: #721c24; padding: 12px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #f5c6cb; } .forgot-password { text-align: center; margin-top: 20px; } .forgot-password a { color: #667eea; text-decoration: none; font-size: 14px; } .forgot-password a:hover { text-decoration: underline; } .attempts-warning { background-color: #fff3cd; color: #856404; padding: 10px; border-radius: 5px; margin-bottom: 15px; border: 1px solid #ffeaa7; font-size: 14px; } /* =========================================== 3. BACKGROUND & CANVAS =========================================== */ #spaceCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: var(--z-canvas); background-color: var(--color-bg-primary); } body:fullscreen #spaceCanvas, body:-webkit-full-screen #spaceCanvas, body:-moz-full-screen #spaceCanvas, body:-ms-fullscreen #spaceCanvas { width: 100vw; height: 100vh; top: 0; left: 0; } /* =========================================== 4. LAYOUT – HEADER / MAIN / FOOTER =========================================== */ header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); gap: var(--spacing-md); background: transparent; z-index: 100; height: var(--header-height); min-height: var(--header-height); max-width: 100vw; box-sizing: border-box; } .top-area-left { /* default desktop – ingen extra styling nödvändig */ } .top-area-middle { justify-self: center; } .top-area-right { /* default desktop */ } main { position: fixed; top: var(--header-height); bottom: var(--footer-height); left: 0; right: 0; width: 100%; /* FIX: ingen explicit height. top+bottom ger redan rätt höjd och calc(100vh - ...) blev för hög i mobil-/surfplatte-webbläsare (100vh räknar med adressfältet) -> innehållet la sig över footern. */ height: auto; min-height: 0; background: transparent; padding: var(--spacing-md); box-sizing: border-box; display: grid; /* minmax(0,1fr) hindrar att brett innehall spranger mittkolumnen */ grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: var(--spacing-lg); overflow: visible; } footer { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm); background: transparent; z-index: 100; /* FIX: fast hojd. Tidigare kunde footern vaxa forbi --footer-height (t.ex. nar texten radbrots) medan main:s bottom lag kvar pa --footer-height -> overlapp. */ height: var(--footer-height); min-height: var(--footer-height); max-width: 100vw; box-sizing: border-box; } footer p { margin: 0; line-height: 1.25; } footer #left { justify-self: start; } footer #middle { justify-self: center; } footer #right { justify-self: end; display: flex; align-items: center; gap: var(--spacing-sm); } /* Sidebar push content – desktop only (se sektion 20b) */ /* =========================================== 5. MAIN CONTAINERS =========================================== */ /* ── Message container ── */ .message-container { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-sm); border-radius: var(--border-radius-md); min-height: 1.5rem; align-items: center; justify-content: center; transition: all var(--transition-fast); } .message-container:empty { display: none; } /* ── Left container ── */ .left-container { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md), var(--shadow-glow); border: 2px solid var(--color-accent-border); overflow-y: auto; overflow-x: hidden; min-width: 250px; max-width: 350px; height: 100%; min-height: 0; box-sizing: border-box; } .left-container:empty, .left-container.is-blank { display: none; } /* ── Content container ── */ .content-container { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md), var(--shadow-glow); border: 2px solid var(--color-accent-border); overflow-y: auto; overflow-x: hidden; width: 100%; /* FIX: max-width utan centrering gjorde att rutan las sig till vanster i grid-kolumnen pa breda skarmar. */ justify-self: center; align-self: stretch; margin-inline: auto; height: 100%; /* FIX: min-height 300px kunde bli hogre an tillgangligt utrymme pa laga skarmar och tryckte ut rutan over footern. */ min-height: 0; min-width: 0; max-width: 1200px; box-sizing: border-box; } /* ── Right container ── */ .right-container { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md), var(--shadow-glow); border: 2px solid var(--color-accent-border); overflow-y: auto; overflow-x: hidden; min-width: 250px; max-width: 350px; min-height: 0; box-sizing: border-box; } .right-container:empty, .right-container.is-blank { display: none; } /* FIX: :empty matchar INTE en div som bara innehaller radbrytningar/blanksteg. Darfor markeras verkligt tomma paneler med .is-blank via JS i header.php. */ /* ── Ad section ── */ .ad-section { min-width: 12.5rem; padding: var(--spacing-lg); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md), var(--shadow-glow); border: 2px solid rgba(255, 215, 0, 0.3); position: relative; overflow: hidden; flex: 0 0 auto; height: 100%; box-sizing: border-box; } /* =========================================== 6. TYPOGRAPHY & HEADINGS =========================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 700; line-height: 1.2; } .container h1, .top-area-middle h1, #top-area-middle h1 { text-transform: uppercase; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } .g-gold { text-transform: uppercase; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } .g-silver { text-transform: uppercase; background: var(--gradient-silver); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } .gold-title { position: relative; display: inline-block; font-weight: 900; letter-spacing: 0.02em; /* Metallytan – hård reflexkant istället för mjuk övergång */ background: linear-gradient( 180deg, #fffdf0 0%, #fff6b8 8%, #ffe066 20%, #f5c02e 30%, #d18f06 40%, #8a5200 47%, /* mörkt reflexband på mitten */ #7a4600 50%, #b56b00 55%, #e8a418 66%, #ffd45a 78%, #ffeea0 88%, #f0b429 95%, #a35d00 100% /* varm orange underkant */ ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Tunn inre kant för att skärpa formen */ -webkit-text-stroke: 0.5px rgba(90, 52, 0, 0.9); /* Yttre glöd som på ikonerna */ filter: drop-shadow(0 0 6px rgba(255, 190, 40, 0.35)); } /* Tjock mörk kontur bakom texten */ .gold-title::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; -webkit-text-stroke: 6px #2e1a00; -webkit-text-fill-color: #2e1a00; color: #2e1a00; filter: drop-shadow(0 2px 0 #1a0f00) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); } /* Borstade metallinjer */ .gold-title::after { content: attr(data-text); position: absolute; inset: 0; font: inherit; letter-spacing: inherit; background: linear-gradient( 180deg, #ffefa8 0%, #ffe270 14%, #f7c62f 30%, #e0a512 42%, #7d4a00 47%, /* tunn mörk linje – bara 4% hög */ #b06a00 51%, #ffe98f 54%, /* skarp reflex direkt under */ #fff9d8 60%, #ffe066 72%, #f0b71f 85%, #e8a800 100% /* botten stannar ljus */ ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none; } /* En mycket subtil ljusreflex över metallen */ .gold-title::before { content: attr(data-text); position: absolute; inset: 0; font: inherit; letter-spacing: inherit; background: linear-gradient( 105deg, transparent 0%, transparent 38%, rgba(255,255,255,0.0) 43%, rgba(255,255,255,0.42) 48%, rgba(255,255,255,0.08) 52%, transparent 58%, transparent 100% ); background-size: 250% 100%; background-position: -150% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none; } .container h1 { font-size: var(--font-size-h1); } #top-area-middle h1{ font-size: var(--font-size-h2); } .h1section { margin-block: var(--spacing-lg) var(--spacing-md); } .h1first { margin-top: 0; } /* =========================================== 7. LINKS =========================================== */ a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } .footer-text { color: var(--color-text-primary); font-family: var(--font-primary); letter-spacing: 0.125rem; font-size: 0.875rem; } .footer-text:hover { color: var(--color-accent-gold); } .footer-icon { height: clamp(2.5rem, 2.4vw, 5rem); } /* =========================================== 8. ICONS & IMAGES =========================================== */ .header_icon { width: clamp(2.5rem, 2.4vw, 5rem); height: clamp(2.5rem, 2.4vw, 5rem); } .header_logo { height: clamp(2.8rem, 2.6vw, 6rem); /* FIX: bilden hade ingen breddbegränsning. headerlogo.png är en bred ordbild, så på smala skärmar blev den bredare än sin 50%-kolumn och la sig UNDER ikongrupperna till vänster och höger – rubriken såg ut att vara överskriven av ikoner. */ max-width: 100%; width: auto; object-fit: contain; display: block; } .imgrocket { width: clamp(2.5rem, 2.4vw, 5rem); height: clamp(2.5rem, 2.4vw, 5rem); object-fit: contain; } .imgstar { width: clamp(1.875rem, 2vw, 3.125rem); height: clamp(1.875rem, 2vw, 3.125rem); object-fit: contain; } .imginfo { width: clamp(2.5rem, 2.4vw, 5rem); height: clamp(2.5rem, 2.4vw, 5rem); object-fit: contain; } /* Star lit animation */ .star-points.lit { opacity: 1 !important; animation: starLit 0.5s ease forwards, twinkleLit 2s ease-in-out infinite !important; transform: scale(1.2) !important; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1)) !important; } /* =========================================== 9. BUTTONS – CONTROL & ROCKET =========================================== */ .control-btn { background: none; border: none; cursor: pointer; padding: var(--spacing-xs); transition: transform var(--transition-slow); display: inline-flex; align-items: center; justify-content: center; } .control-btn:hover { transform: translateY(-0.25rem); } .control-btn:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 2px; border-radius: var(--border-radius-sm); } .rocket-btn.launch { transform: rotate(-135deg) translateX(200vw); opacity: 0; transition: all var(--transition-slow); } .rocket-btn img { width: clamp(2.5rem, 2.4vw, 5rem); height: clamp(2.5rem, 2.4vw, 5rem); object-fit: contain; } /* ── Emoji-ikoner i topbaren ── */ .control-btn .hdr-icon { font-size: 22px; line-height: 1; font-family: 'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif; display: inline-block; } /* ── Raket-knappen: större knapp + 3-emoji-kluster (⭐ 🚀 🏠) ── */ .control-btn.rocket-btn { min-width: 76px; height: 58px; padding: 6px 12px; } .rocket-btn .hdr-cluster { position: relative; display: inline-block; width: 68px; height: 48px; vertical-align: middle; } .rocket-btn .hdr-orbit { position: absolute; inset: 0; display: grid; place-items: center; } .rocket-btn .hdr-pos-rocket { transform: none; z-index: 3; } .rocket-btn .hdr-pos-star { transform: translate(-25px, 5px) scale(.78) rotate(-12deg); z-index: 1; } .rocket-btn .hdr-pos-house { transform: translate(25px, 6px) scale(.78) rotate(12deg); z-index: 2; } .rocket-btn .hdr-emoji { font-size: 28px; line-height: 1; font-family: 'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); } /* Hover-våg – samma känsla som menykorten */ .rocket-btn:hover .hdr-emoji { animation: hdrWave .6s ease-in-out infinite alternate; } .rocket-btn:hover .hdr-pos-star .hdr-emoji { animation-delay: 0s; } .rocket-btn:hover .hdr-pos-rocket .hdr-emoji { animation-delay: .12s; } .rocket-btn:hover .hdr-pos-house .hdr-emoji { animation-delay: .24s; } @keyframes hdrWave { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } } /* ── Effekt 2: klick — cirkulera i led runt samma mitt ── Samma princip som .kr-spin i index.php-menyn, men med mindre radie (22px) eftersom .hdr-cluster bara ar 68x48px. Klassen .hdr-spin laggs pa .hdr-cluster via JS i php/header.php. */ .rocket-btn .hdr-cluster.hdr-spin .hdr-emoji { animation: none !important; } /* pausa vagen */ .rocket-btn .hdr-cluster.hdr-spin .hdr-orbit { animation-duration: 1.25s; animation-timing-function: cubic-bezier(.45, 0, .55, 1); animation-fill-mode: both; } .rocket-btn .hdr-cluster.hdr-spin .hdr-pos-star { animation-name: hdr-orbit-star; } .rocket-btn .hdr-cluster.hdr-spin .hdr-pos-rocket { animation-name: hdr-orbit-rocket; } .rocket-btn .hdr-cluster.hdr-spin .hdr-pos-house { animation-name: hdr-orbit-house; } /* 0/100% = viloplats (samma varden som .hdr-pos-* ovan, sa inget hopp), 18-82% = ut pa cirkeln (radie 22px) ett helt varv. */ @keyframes hdr-orbit-star { 0% { transform: translate(-25px, 5px) scale(.78) rotate(-12deg); } 18% { transform: rotate(240deg) translateY(-22px) rotate(-240deg) scale(.78); } 82% { transform: rotate(600deg) translateY(-22px) rotate(-600deg) scale(.78); } 100% { transform: translate(-25px, 5px) scale(.78) rotate(-12deg); } } @keyframes hdr-orbit-rocket { 0% { transform: translateY(0) scale(1); } 18% { transform: rotate(0deg) translateY(-22px) rotate(0deg) scale(1); } 82% { transform: rotate(360deg) translateY(-22px) rotate(-360deg) scale(1); } 100% { transform: translateY(0) scale(1); } } @keyframes hdr-orbit-house { 0% { transform: translate(25px, 6px) scale(.78) rotate(12deg); } 18% { transform: rotate(120deg) translateY(-22px) rotate(-120deg) scale(.78); } 82% { transform: rotate(480deg) translateY(-22px) rotate(-480deg) scale(.78); } 100% { transform: translate(25px, 6px) scale(.78) rotate(12deg); } } /* VIKTIGT: knappen far inte klippa ikonerna medan de snurrar ut ur rutan. Flera sidor (mindmap.php, multiplicationgame.php, vocabstar.php m.fl.) har egna