/* NOTE: This file is theme.css scoped to app pages only. Add: on app pages. Knowledge/profile pages should NOT have hg-app. */ /* ===================================================== HISTORY GO – THEME.CSS (REN OG STABIL VERSJON) ----------------------------------------------------- INNHOLDSFORTEGNELSE ----------------------------------------------------- 1) Variabler & grunnstil 3) Topplinje, main & toast 4) Paneler, kort, rutenett 5) Knapper, chips & badges 7) Sheets (bunnark: "Se flere i nærheten") 8) Modal (quiz) – overlay & innhold 9) Quiz-stiler, progresjon & animasjoner 10) Merker / badge-kort (grid & responsivitet) 11) Effekter & media (hover, små justeringer) 12) Reward-popup (belønningsmodal) 13) Person-galleri (personkort m/runde bilder) 14) Universal person/place-popup (hg-popup) 15) Ruter-seksjon – tematiske ruter-knapper 16) Ny mini-profil – History Go-panel ===================================================== */ /* ===================================================== */ /* 1) Variabler & grunnstil */ /* ===================================================== */ :root{ --bg: #0a1929; --panel: rgba(13,27,42,.86); --panel-border: rgba(255,255,255,.08); --text: #e6eef9; --muted: #9bb0c9; --primary: #1976d2; --ok: #2ecc71; --warn: #ffb703; --yellow: #f6c800; --cat-historie: #344B80; --cat-vitenskap: #9b59b6; --cat-kunst: #ffb703; --cat-by: #e63946; --cat-musikk: #ff66cc; --cat-litteratur: #f6c800; --cat-natur: #4caf50; --cat-sport: #2a9d8f; --cat-politikk: #c77dff; --cat-naeringsliv: #ff8800; --cat-populaerkultur: #ffb703; --cat-subkultur: #ff66cc; --cat-psykologi: #ff7aa2; --hist: var(--cat-historie); --kult: var(--cat-kunst); --sport: var(--cat-sport); --natur: var(--cat-natur); --urban: var(--cat-by); --viten: var(--cat-vitenskap); --psyko: var(--cat-psykologi); --radius: 12px; --shadow: 0 10px 24px rgba(0,0,0,.35); } body.hg-app *{ box-sizing: border-box; } body.hg-app{ margin: 0; overflow: hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; } body.hg-app .muted{ color: var(--muted); } /* ===================================================== */ /* WATERMARK – ENGINE VERSION */ /* ===================================================== */ body.hg-app::before{ content:""; position: absolute; left: 10px; bottom: 10px; width: 120px; height: 120px; background-image: url("../bilder/logo_historygo.PNG"); background-repeat: no-repeat; background-size: contain; background-position: bottom left; opacity: 0.34; pointer-events: none; z-index: 5; } /* Skjul watermark via klasse – ikke :has() */ body.hg-app.placecard-open::before{ opacity: 0; } /* ===================================================== */ /* HEADER – ENGINE VERSION */ /* ===================================================== */ body.hg-app header.site-header{ position: fixed; top: 0; left: 0; right: 0; height: var(--hg-visual-header-height, 74px); z-index: 120; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 6px; padding-bottom: 6px; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); background: #000; overflow: visible; } body.hg-app header.site-header #miniProfile{ flex: 0 0 auto; max-width: 320px; } /* ===================================================== */ /* MAIN: normalt klikkbart lag under header */ /* ===================================================== */ body.hg-app main{ position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } body.hg-app .panel{ position: relative; overflow: visible; } /* ===================================================== */ /* 3) Topplinje, main & toast – ENGINE VERSION */ /* ===================================================== */ /* Logo i header */ body.hg-app header.site-header .hg-brand{ position: absolute; left: calc(6px + env(safe-area-inset-left)); top: 2px; width: 112px; height: 112px; object-fit: contain; display: block; margin: 0; opacity: 0.98; pointer-events: none; z-index: 21; } /* Brand */ body.hg-app .brand{ display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; flex: 0 0 auto; min-width: max-content; } body.hg-app .brand-logo{ width: 45px; height: 45px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,0.1); padding: 2px; display: block; } body.hg-app .brand.brand-icononly .brand-logo{ width: 34px; height: 34px; object-fit: contain; } body.hg-app .brand-name{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; color: #f6c800; white-space: nowrap; line-height: 1; display: none; } body.hg-app .brand-name br{ display: none; } body.hg-app .brand-name *{ display: inline; } /* Actions */ body.hg-app .actions{ display: flex; gap: 10px; align-items: center; } body.hg-app .toggle{ display: flex; gap: 6px; align-items: center; font-size: 14px; } body.hg-app .toggle input{ accent-color: var(--primary); } /* Header actions */ body.hg-app header .actions{ gap: 6px; } body.hg-app header .actions > button.secondary{ height: 32px; line-height: 32px; padding: 0 10px; font-size: 14px; } /* Toast – engine */ #toast{ position: fixed; top: auto; bottom: calc(40px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(820px, calc(100vw - 40px)); max-width: calc(100vw - 40px); background: rgba(0,0,0,.86); color: #fff; padding: 26px 76px 26px 32px; border-radius: 28px; font-size: 20px; line-height: 1.2; font-weight: 800; text-align: left; box-shadow: 0 18px 44px rgba(0,0,0,.42); display: none; z-index: 20000; } #toast .toast-body{ font-size: inherit; line-height: inherit; font-weight: inherit; overflow-wrap: anywhere; } #toast .toast-close{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 1; font-weight: 800; cursor: pointer; } /* Top-actions */ .top-actions{ display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-left: 112px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; } /* Geo-status */ #geoStatus{ width: 24px; display: inline-flex; align-items: center; justify-content: center; } /* Icon buttons */ .iconbtn{ flex: 0 0 auto; } /* MiniProfile */ #miniProfile{ max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===================================================== */ /* 8) Sheets (bunnark) – ENGINE VERSION */ /* ===================================================== */ body.hg-app .sheet{ position: absolute; left: 0; right: 0; bottom: bottom: 80px; z-index: 13; background: rgba(13,27,42,0.95); border: 1px solid var(--panel-border); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); transform: translateY(100%); transition: transform .22s ease, opacity .2s ease; } body.hg-app .sheet[aria-hidden="false"]{ transform: none; } body.hg-app .sheet-head{ display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 16px 16px 0 0; } body.hg-app .sheet-body{ padding: 14px 16px 20px; display: grid; gap: 12px; overflow-y: auto; max-height: 520px; /* fast høyde */ } /* Kortene */ body.hg-app .sheet-body .card{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 14px; transition: background .2s ease, transform .2s ease; } body.hg-app .sheet-body .card:hover{ background: rgba(255,255,255,0.08); transform: translateY(-2px); } body.hg-app .sheet-body .name{ font-weight: 700; font-size: 16px; color: #fff; } body.hg-app .sheet-body .meta{ color: #a9b7c7; font-size: 14px; margin-bottom: 6px; } body.hg-app .sheet-body .desc{ color: #d0d8e4; font-size: 15px; line-height: 1.45; } body.hg-app .sheet-close{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.1); color: #fff; font-size: 22px; } /* ===================================================== */ /* 9) Modal (quiz) – ENGINE VERSION */ body.hg-app .modal{ position: absolute; inset: 0; z-index: 10050; display: none; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; } body.hg-app .modal[aria-hidden="false"]{ display: flex; } body.hg-app .modal .modal-body{ width: 680px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; position: relative; } body.hg-app .modal-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } #quizClose{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--panel-border); background: rgba(255,255,255,.08); color: #fff; font-size: 22px; } /* ===================================================== */ /* 10) Quiz-stiler */ /* ===================================================== */ #quizProgress{ color: var(--muted); margin-bottom: 6px; } #quizQuestion{ margin: 8px 0 10px; font-weight: 700; } .quiz-choices{ display: grid; gap: 8px; } .quiz-choices button{ text-align: left; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--panel-border); background: rgba(255,255,255,.03); color: #fff; transition: background .2s ease, border-color .2s ease; } .quiz-choices button.correct{ border-color: #1b7a4a; background: rgba(27,122,74,.18); } .quiz-choices button.wrong{ border-color: #7a1f25; background: rgba(122,31,37,.18); } .quiz-feedback{ min-height: 19px; font-weight: 700; } /* ===================================================== */ /* 10b) Quiz-progress-bar */ /* ===================================================== */ .quiz-progress{ width: 100%; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin-bottom: 10px; } .quiz-progress .bar{ height: 100%; width: 0%; background: var(--primary); transition: width .4s ease; } /* ===================================================== */ /* 10c) Quiz-fade effekt ved avslutning */ /* ===================================================== */ #quizModal.fade-out .modal-body{ animation: quizFadeOut 0.45s ease forwards; } @keyframes quizFadeOut{ 0%{ opacity: 1; transform: scale(1); } 100%{ opacity: 0; transform: scale(0.95); } } /* ===================================================== */ /* 10d) QUIZ – KNAPPER OG ANIMASJON VED PERFEKT SCORE */ /* ===================================================== */ button.quiz-done{ background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.5); color: #ffd700; cursor: default; font-weight: 600; position: relative; padding-left: 26px; } button.quiz-done::before{ content: "🏅"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; } @keyframes quizGlow{ 0% { box-shadow: 0 0 0px 0 rgba(255,215,0,0); } 40% { box-shadow: 0 0 16px 6px rgba(255,215,0,0.8); } 100% { box-shadow: 0 0 0px 0 rgba(255,215,0,0); } } button.quiz-done.blink{ animation: quizGlow 1.2s ease-out; } /* ===================================================== */ /* Hover-effekter */ /* ===================================================== */ body.hg-app .icon:hover, body.hg-app .sheet-close:hover, body.hg-app #quizClose:hover, body.hg-app #btnExitMap:hover{ filter: brightness(1.1); } /* ===================================================== */ /* Quiz button inside popup */ .hg-quiz-btn{ background: #FFD600; border: none; padding: 10px 14px; border-radius: 8px; font-size: 16px; font-weight: 600; margin-top: 10px; cursor: pointer; color: #000; width: 100%; } .hg-quiz-btn:hover{ background: #ffe45c; } /* ===================================================== */ /* Pulse animation */ @keyframes hgPulse{ 0% { transform: scale(0.7); opacity: .55; } 70% { transform: scale(2.2); opacity: .10; } 100% { transform: scale(2.4); opacity: 0; } } /* ===================================================== */ /* HEADER MENU – secondary topbar tools */ /* ===================================================== */ .header-menu{ position: relative; flex: 0 0 auto; } .header-menu-button{ min-width: 38px; font-size: 20px; line-height: 1; } .header-menu-panel{ position: absolute; top: calc(100% + 10px); right: 0; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - var(--hg-visual-header-height, 74px) - 24px); overflow-y: auto; box-sizing: border-box; padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: radial-gradient(circle at 88% 0%, rgba(246,200,0,.11), transparent 34%), linear-gradient(160deg, rgba(24,30,42,.985), rgba(8,12,19,.99) 72%); box-shadow: 0 28px 80px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(0,0,0,.25); color: #fff; backdrop-filter: blur(18px) saturate(1.15); z-index: 100000; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } .header-menu-intro{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 12px; } .header-menu-intro strong{ color: rgba(255,255,255,.94); font-size: 15px; font-weight: 780; letter-spacing: -.01em; } .header-menu-eyebrow{ color: #f6d15a; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } .header-menu-search{ position: relative; } .header-menu-search::before{ content: ""; position: absolute; top: 15px; left: 16px; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.62); border-radius: 50%; pointer-events: none; z-index: 1; } .header-menu-search::after{ content: ""; position: absolute; top: 28px; left: 28px; width: 7px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.62); transform: rotate(45deg); transform-origin: left center; pointer-events: none; z-index: 1; } .header-menu-actions{ display: grid; gap: 7px; margin-top: 14px; } .header-menu-action{ display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; box-sizing: border-box; padding: 7px 11px 7px 8px; border: 1px solid rgba(255,255,255,.105); border-radius: 15px; background: linear-gradient(110deg, rgba(255,255,255,.075), rgba(255,255,255,.045)); color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .header-menu-action:hover, .header-menu-action:focus-visible{ border-color: rgba(255,255,255,.24); background: linear-gradient(110deg, rgba(255,255,255,.14), rgba(255,255,255,.075)); outline: 2px solid transparent; transform: translateY(-1px); } .header-menu-action--featured{ border-color: rgba(246,200,0,.26); background: linear-gradient(110deg, rgba(246,200,0,.13), rgba(255,255,255,.055) 68%); } .header-menu-action--featured:hover, .header-menu-action--featured:focus-visible{ border-color: rgba(246,200,0,.48); background: linear-gradient(110deg, rgba(246,200,0,.19), rgba(255,255,255,.08) 72%); } .header-menu-action-icon{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(0,0,0,.2); box-shadow: 0 1px 0 rgba(255,255,255,.045) inset; font-size: 19px; } .header-menu-action-icon svg{ width: 22px; height: 22px; } .header-menu-action-label{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 720; letter-spacing: -.012em; } .header-menu-toggle{ margin-top: 3px; border-color: rgba(246,200,0,.18); background: linear-gradient(110deg, rgba(246,200,0,.085), rgba(255,255,255,.035)); cursor: pointer; } .header-menu-toggle .toggle{ position: relative; display: block; width: 44px; height: 26px; justify-self: end; flex: 0 0 auto; } .header-menu-toggle .toggle input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .header-menu-toggle .toggle > span{ position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.36); box-shadow: 0 1px 3px rgba(0,0,0,.32) inset; transition: border-color .18s ease, background .18s ease; } .header-menu-toggle .toggle > span::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f4f5f7; box-shadow: 0 2px 7px rgba(0,0,0,.38); transition: transform .18s ease, background .18s ease; } .header-menu-toggle .toggle input:checked + span{ border-color: rgba(246,200,0,.82); background: #caa500; } .header-menu-toggle .toggle input:checked + span::after{ background: #fff7d1; transform: translateX(18px); } .header-menu-toggle .toggle input:focus-visible + span{ outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 480px){ .header-menu-panel{ right: -2px; width: min(400px, calc(100vw - 16px)); padding: 13px; border-radius: 21px; } .header-menu-actions{ gap: 6px; } .header-menu-action{ min-height: 49px; } .header-menu-action-label{ font-size: 15px; } } body.hg-app .site-header .top-actions{ overflow: visible; }