/* ============================================================================ SOS V3 — DESIGNLAG. Eneste presentasjonsfil. De gamle stilarkene lastes ikke lenger (se functions.php). Alt som styrer tilstand ligger i v3-funksjon.css. Denne fila eier utseendet fullt ut, så ingenting kjemper mot noe annet. Malene, PHP-logikken, filtrene, tellerne, tilstandene og de 10 språkene er uendret — designet er lagt på det som allerede finnes. 0 tokens 1 grunn 2 meny 3 forside 4 kort 5 lister 6 filtre/søk 7 panel 8 sangside 9 korledere 10 om oss 11 tilstander 12 mørk modus ========================================================================= */ /* ---------- 0. TOKENS ---------------------------------------------------- */ :root { --het: #FF2E74; /* handling, karaoke */ --himmel: #4FA8FF; /* dans */ --gronn: #34D399; /* arkiv, lett */ --gul: #FFC93D; /* middels */ --lilla: #8A4DFF; /* korledere */ /* Aksentfargen skifter per seksjon (settes av sos-v3.js på ). Alt som er «handling» henter herfra, så fargen går igjen overalt: aktivt filter, hjerte, knapper, spinner, faner og merker. */ --aksent: #FF2E74; --aksent-mykt: #FF2E7416; --aksent-ink: #fff; --renne: 18px; --r: 16px; --tab: 62px; --sb: env(safe-area-inset-bottom, 0px); --fj: cubic-bezier(.34, 1.5, .5, 1); --mj: cubic-bezier(.22, .61, .36, 1); --bg: #FBF8F2; --bg2: #F2ECE0; --flate: #FFFFFF; --linje: #E0D7C6; --ink: #151220; --ink2: #4A4359; --ink3: #8A8299; --kant: 1.5px solid #151220; --skygge: 3px 3px 0 #15122014; --skygge2: 6px 6px 0 #15122014; } :root[data-tema="mork"] { --bg: #0C0A12; --bg2: #15121E; --flate: #1B1826; --linje: #2C2739; --ink: #F6F4FB; --ink2: #A79FBA; --ink3: #6F6784; --kant: 1px solid #2C2739; --skygge: 0 2px 12px #0006; --skygge2: 0 12px 34px #0009; } body[data-seksjon="karaoke"] { --aksent: #FF2E74; --aksent-mykt: #FF2E7416; --aksent-ink: #fff; } body[data-seksjon="dans"] { --aksent: #2E86FF; --aksent-mykt: #2E86FF18; --aksent-ink: #fff; } body[data-seksjon="arkiv"] { --aksent: #17A673; --aksent-mykt: #17A67318; --aksent-ink: #fff; } body[data-seksjon="favoritter"] { --aksent: #FF2E74; --aksent-mykt: #FF2E7416; --aksent-ink: #fff; } body[data-seksjon="korledere"] { --aksent: #7B3FE4; --aksent-mykt: #7B3FE418; --aksent-ink: #fff; } @media (min-width: 760px) { :root { --renne: 26px; --r: 20px; } } @media (min-width: 1000px) { :root { --renne: 34px; } } @media (min-width: 1500px) { :root { --renne: 44px; } } /* ---------- 1. GRUNN ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-tap-highlight-color: transparent; transition: background .3s, color .3s; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Hello Elementor gir alle knapper ramme og farge via attributt-selektorer. Nullstillingen må ha samme spesifisitet for å nå fram. */ button, [type="button"], [type="submit"], [type="reset"] { font: inherit; color: inherit; background: none; background-color: transparent; border: 0; border-radius: 0; cursor: pointer; padding: 0; text-align: inherit; display: inline-flex; } input, select, textarea { font: inherit; } [type="text"], [type="search"], [type="password"], input, textarea { border-radius: 0; border: 0; background: none; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; } p { margin: 0; } :focus-visible { outline: 2.5px solid var(--aksent); outline-offset: 3px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } main { display: block; min-height: 60vh; padding-bottom: calc(var(--tab) + var(--sb) + 26px); } @media (min-width: 1000px) { main { margin-left: 248px; padding-bottom: 90px; } } @media (min-width: 1500px) { main { margin-left: 280px; } } .page-container, .kl-wrap, .section-container, .single-content-wrapper { width: 100%; max-width: none; margin: 0; } /* Sidehode: tittel, teller, søk og filtre — alt på samme venstrelinje */ .page-header, .kl-head { display: flex; flex-direction: column; align-items: stretch; padding: 0 var(--renne) 6px; border: 0; background: none; } .page-title-section { display: block; } .page-title, .kl-title, .hero-title, .single-title { font-size: clamp(1.6rem, 5.6vw, 2.1rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; color: var(--ink); padding: 16px 0 7px; max-width: 22ch; } .results-counter, #archive-count, #favorites-count { font-size: .8rem; font-weight: 600; color: var(--ink3); text-align: left; padding: 0 0 14px; margin: 0; } /* Telleren i arkivet og favoritter ligger utenfor .page-header */ .archive-content > #archive-count, .archive-content > #favorites-count { padding: 0 var(--renne) 14px; } .site-footer { display: none; } /* ---------- 2. MENY ------------------------------------------------------ */ /* PC: sidemeny til venstre. Mobil: sidemenyen skjules, og sos-v3.js bygger bunnfaner av de samme lenkene — språk og aktiv side følger med. */ .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: 248px; display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--linje); overflow-y: auto; } @media (min-width: 1500px) { .sidebar { width: 280px; } } .sidebar-content { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 20px 14px; } .sidebar-logo { display: block; padding: 2px 8px 18px; } .sidebar-logo img { height: 34px; width: auto; } .sidebar-toggle, .mobile-header, .sidebar-divider { display: none; } .sidebar-section { display: flex; flex-direction: column; gap: 4px; } .sidebar-control-item { display: block; } .sidebar-btn { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 12px; font-weight: 700; font-size: .94rem; color: var(--ink2); transition: background .2s, color .2s; } .sidebar-btn:hover { background: var(--bg2); color: var(--ink); } .sidebar-btn.cp-active { background: var(--bg2); color: var(--ink); } .icon { width: 20px; height: 20px; flex-shrink: 0; background: currentColor; } /* Én farge per seksjon når den er aktiv, som i dag */ .sidebar-control-item:nth-child(1) .sidebar-btn.cp-active, .sidebar-control-item:nth-child(2) .sidebar-btn.cp-active { color: var(--het); } .sidebar-control-item:nth-child(3) .sidebar-btn.cp-active { color: var(--himmel); } .sidebar-control-item:nth-child(4) .sidebar-btn.cp-active { color: var(--gronn); } .sidebar-control-item:nth-child(5) .sidebar-btn.cp-active { color: var(--lilla); } .sidebar-btn-korledere.cp-active { color: var(--lilla); } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linje); display: flex; flex-direction: column; gap: 4px; } .cp-fav-badge { background: var(--het); margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--het); color: #fff; font-size: .62rem; font-weight: 900; text-align: center; } .cp-fav-badge.cp-pop { animation: v3Puls .5s var(--fj); } /* Språkvelger */ .language-dropdown { position: relative; } .language-selector { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 12px; background: var(--bg2); color: var(--ink); font-weight: 700; font-size: .88rem; } .language-selector:hover { background: var(--linje); } .flag-icon { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; } .dropdown-arrow { margin-left: auto; font-size: .7rem; color: var(--ink3); transition: transform .25s; } .language-dropdown.open .dropdown-arrow { transform: rotate(180deg); } .language-options { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 90; padding: 5px; border-radius: 14px; background: var(--flate); border: 1px solid var(--linje); box-shadow: var(--skygge2); max-height: 62vh; overflow-y: auto; transition: opacity .2s, visibility .2s; } .language-option { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-weight: 700; font-size: .88rem; color: var(--ink2); } .language-option:hover { background: var(--bg2); color: var(--ink); } .language-option.active { color: var(--aksent); } /* Temaveksler (lagt til av sos-v3.js) */ .v3-tema-knapp { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 14px; border-radius: 12px; color: var(--ink2); font-weight: 700; font-size: .94rem; } .v3-tema-knapp:hover { background: var(--bg2); color: var(--ink); } .v3-tema-ikon { width: 20px; height: 20px; flex-shrink: 0; background: currentColor; -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.2M12 19.4v2.2M2.4 12h2.2M19.4 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.2M12 19.4v2.2M2.4 12h2.2M19.4 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E"); } .v3-tema-knapp.er-mork .v3-tema-ikon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1Z'/%3E%3C/svg%3E"); } /* Bunnfaner */ .v3-faner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: none; height: calc(var(--tab) + var(--sb)); padding-bottom: var(--sb); background: var(--bg); border-top: 1px solid var(--linje); } .v3-fane { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; color: var(--ink3); transition: color .2s; } .v3-fane .icon { width: 21px; height: 21px; transition: transform .26s var(--fj); } .v3-fane-tekst { font-size: .6rem; font-weight: 800; } .v3-fane.is-active { color: var(--ink); } .v3-fane.is-active .icon { transform: translateY(-1px) scale(1.08); } .v3-fane.is-active::before { content: ""; position: absolute; top: 0; width: 24px; height: 2.5px; border-radius: 99px; background: var(--aksent); } @media (max-width: 999px) { .v3-faner { display: grid; } .sidebar { display: none; } } /* ---------- 3. FORSIDE --------------------------------------------------- */ .intro-section { padding: 0; background: none; border: 0; min-height: 0; } .intro-content { padding: 18px var(--renne) 4px; } .intro-title { font-size: clamp(1.62rem, 5.6vw, 2.1rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; max-width: 22ch; margin: 0; } .intro-subtitle { margin: 10px 0 0; font-size: .88rem; font-weight: 600; line-height: 1.55; color: var(--ink3); max-width: 60ch; } .content-section { margin: 26px 0 0; padding: 0; background: none; } .section-title-row { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 var(--renne) 10px; } .section-title { font-size: 1.16rem; font-weight: 900; letter-spacing: -.025em; margin: 0; } .see-all-btn { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 800; color: var(--aksent); white-space: nowrap; } .see-all-btn::after { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); } .see-all-btn:hover { color: var(--ink); } /* Hylla når skjermkanten. Rennelinja kommer fra padding på wrapperen. */ .content-section .swiper { overflow: hidden; padding: 0; margin: 0; } .content-section .swiper-wrapper { padding: 2px var(--renne) 16px; scroll-padding-left: var(--renne); box-sizing: content-box; } .content-section .swiper-slide { width: 158px; height: auto; } @media (min-width: 760px) { .content-section .swiper-slide { width: 200px; } } @media (min-width: 1000px) { .content-section .swiper-slide { width: 210px; } } .swiper-button-next, .swiper-button-prev { display: none; } @media (min-width: 1000px) { .swiper-button-next, .swiper-button-prev { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: -34px; border-radius: 999px; background: var(--flate); border: 1px solid var(--linje); box-shadow: var(--skygge2); color: var(--ink); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 13px; font-weight: 900; } .swiper-button-prev { left: calc(var(--renne) - 14px); } .swiper-button-next { right: 14px; } } /* ---------- 4. KORT ------------------------------------------------------ */ .karaoke-grid, .dans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px var(--renne) 0; } @media (min-width: 560px) { .karaoke-grid, .dans-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 1000px) { .karaoke-grid, .dans-grid { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 22px; } } .swiper-slide, .karaoke-card, .dans-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: none; transition: transform .16s var(--fj); cursor: pointer; } .swiper-slide:active, .karaoke-card:active, .dans-card:active { transform: scale(.96); } /* Bildene er 16:9 fra kilden. De vises i sitt eget format og med contain, så hele motivet er synlig — ingenting beskjæres bort. */ .slide-img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r); border: var(--kant); box-shadow: var(--skygge); background: var(--bg2); } .slide-info { display: flex; align-items: flex-start; gap: 8px; padding: 0; background: none; } .slide-title { flex: 1; min-width: 0; margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.26; letter-spacing: -.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Favoritthjertet står ved tittelen — malen plasserer det slik, som på live */ .sos-fav-heart { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--bg2); color: var(--ink3); display: grid; place-items: center; transition: background .18s, color .18s; } .sos-fav-heart svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; } .sos-fav-heart:hover { background: var(--linje); color: var(--ink); } .sos-fav-heart.is-fav { color: var(--aksent); background: var(--aksent-mykt); } .sos-fav-heart.is-fav svg { fill: var(--aksent); } .sos-fav-heart.just-added { animation: v3Puls .35s var(--fj); } @keyframes v3Puls { 50% { transform: scale(1.25); } } /* Vanskelighetsgrad: egen rad UNDER bildet. Oppå bildet dekket de motivet, og tre grader ble en klump i hjørnet. Malen legger dem først i kortet, så rekkefølgen settes med order. */ .dans-card { display: flex; flex-direction: column; } .dans-card .slide-img { order: 1; } .dans-card-diffs { order: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; pointer-events: none; } .dans-card .slide-info { order: 3; } .dans-diff-tag { padding: 3px 8px; border-radius: 7px; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; background: var(--bg2); color: var(--ink); } .dans-diff-tag-lett { background: var(--gronn); color: #06281c; } .dans-diff-tag-middels { background: var(--gul); color: #3d2a00; } .dans-diff-tag-vanskelig { background: var(--het); color: #fff; } /* ---------- 5. LISTER ---------------------------------------------------- */ .archive-content { padding: 0; } #archive-list, #favorites-list, .kl-list { padding: 0 var(--renne); max-width: 980px; } .song-card, .kl-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--flate); border: var(--kant); box-shadow: var(--skygge); transition: transform .15s var(--fj), box-shadow .15s; } .song-card:hover, .kl-card:hover { transform: translate(-1px, -1px); box-shadow: var(--skygge2); } .song-card:active { transform: scale(.99); } .song-title-btn, .kl-card-title { flex: 1; min-width: 0; text-align: left; font-weight: 800; font-size: .9rem; line-height: 1.3; color: var(--ink); white-space: normal; overflow-wrap: break-word; } .song-badges-container, .kl-card-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .song-badge, .kl-tag { padding: 3px 8px; border-radius: 6px; font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: var(--bg2); color: var(--ink2); white-space: nowrap; } .kl-tag-pensum { background: var(--het); color: #fff; } .kl-tag-units { background: var(--himmel); color: #04223f; } .kl-tag-aktiviteter { background: var(--gronn); color: #06281c; } .kl-tag-dokumenter { background: var(--gul); color: #3d2a00; } .kl-tag-tips { background: var(--lilla); color: #fff; } .song-fav { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--bg2); color: var(--ink3); display: grid; place-items: center; } .song-fav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; } .song-fav:hover { background: var(--linje); color: var(--ink); } .song-fav.is-fav { color: var(--aksent); background: var(--aksent-mykt); } .song-fav.is-fav svg { fill: var(--aksent); } /* ---------- 6. FILTRE OG SØK --------------------------------------------- */ .search-filter-container { display: block; } .search-container { padding: 0 0 12px; width: 100%; max-width: 560px; } .archive-content .search-container, .kl-tools { padding-left: var(--renne); padding-right: var(--renne); } .search-form { position: relative; } .search-form::before, .kl-tools::before { content: ""; position: absolute; left: 15px; top: 15px; width: 17px; height: 17px; background: var(--ink3); pointer-events: none; -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E"); } .kl-tools { position: relative; } .kl-tools::before { left: calc(var(--renne) + 15px); } .search-input, .kl-search, input.search-input, input.kl-search { width: 100%; padding: 12px 14px 12px 42px; border: var(--kant); border-radius: 12px; background: var(--bg2); color: var(--ink); font-weight: 600; font-size: .92rem; } .search-input::placeholder, .kl-search::placeholder { color: var(--ink3); } .kl-search { margin-bottom: 12px; } .filter-controls, .dans-filter-bar, .kl-filter { display: flex; gap: 7px; padding: 0 0 14px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .archive-content .filter-controls, .kl-filter { padding-left: var(--renne); padding-right: var(--renne); } .filter-controls::-webkit-scrollbar, .dans-filter-bar::-webkit-scrollbar, .kl-filter::-webkit-scrollbar { display: none; } .filter-group { display: contents; } .filter-button, .dans-filter, .kl-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 11px; background: var(--bg2); border: 1.5px solid transparent; font-weight: 700; font-size: .81rem; white-space: nowrap; color: var(--ink2); transition: all .18s var(--fj); } .filter-button:hover, .dans-filter:hover, .kl-filter-btn:hover { color: var(--ink); } .filter-button:active, .dans-filter:active, .kl-filter-btn:active { transform: scale(.94); } .filter-button.active, .dans-filter.is-active, .kl-filter-btn.is-active { background: var(--aksent); color: var(--aksent-ink); border-color: var(--aksent); } .dans-filter-lett.is-active { background: var(--gronn); color: #06281c; border-color: #06281c; } .dans-filter-middels.is-active { background: var(--gul); color: #3d2a00; border-color: #3d2a00; } .dans-filter-vanskelig.is-active { background: var(--het); color: #fff; border-color: var(--het); } .kl-filter-pensum.is-active { background: var(--het); color: #fff; border-color: var(--het); } .kl-filter-units.is-active { background: var(--himmel); color: #04223f; border-color: #04223f; } .kl-filter-aktiviteter.is-active { background: var(--gronn); color: #06281c; border-color: #06281c; } .kl-filter-dokumenter.is-active { background: var(--gul); color: #3d2a00; border-color: #3d2a00; } .kl-filter-tips.is-active { background: var(--lilla); color: #fff; border-color: var(--lilla); } .dans-filter-count { font-weight: 900; opacity: .55; font-size: .76rem; } /* «Tilbakestill filter» skal lese som opphevelse, ikke som et valg */ .reset-filter { display: contents; } #reset-filter { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 11px; background: transparent; border: 1px dashed var(--linje); color: var(--ink3); font-weight: 700; font-size: .81rem; white-space: nowrap; } #reset-filter:hover { color: var(--aksent); border-color: var(--aksent); } .pagination, #archive-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 24px var(--renne) 10px; } .pagination-button, #archive-pagination a { min-width: 38px; padding: 9px 12px; border-radius: 10px; background: var(--bg2); color: var(--ink2); font-weight: 800; font-size: .84rem; text-align: center; } .pagination-button:hover, #archive-pagination a:hover { color: var(--ink); } .pagination-button.active, #archive-pagination a[style*="bold"] { background: var(--aksent); color: var(--aksent-ink); text-decoration: none !important; } /* ---------- 7. PANEL OG AVSPILLER ---------------------------------------- To ulike former, fordi de gjør to ulike ting: · Arkiv → skuff fra høyre. Du leser kreditering og lyd ved siden av lista, og lista blir stående bak så du ikke mister plassen din. · Video → fullskjerm. En dansevideo skal fylle skjermen, ikke klemmes inn i en 470 px kolonne. ------------------------------------------------------------------------ */ .popup-overlay { position: fixed; inset: 0; z-index: 200; align-items: stretch; justify-content: flex-end; background: #15122099; backdrop-filter: blur(2px); } /* ---- Videoavspiller: fullskjerm ---- */ #video-popup { align-items: center; justify-content: center; padding: 0; background: #08060Ceb; backdrop-filter: blur(10px); } #video-popup .popup-content { width: 100%; height: 100dvh; max-width: none; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 56px); background: none; border: 0; box-shadow: none; overflow: visible; transform: scale(.96); opacity: 0; transition: transform .3s var(--mj), opacity .25s; } #video-popup.is-open .popup-content { transform: none; opacity: 1; } /* Flaten holder 16:9 og vokser til det største som får plass — både i bredden og i høyden — så videoen aldri blir kuttet. */ #video-popup .popup-video-stage { width: min(100%, calc((100dvh - 2 * clamp(12px, 4vw, 56px)) * 16 / 9)); max-height: calc(100dvh - 2 * clamp(12px, 4vw, 56px)); aspect-ratio: 16 / 9; border-radius: clamp(10px, 2vw, 20px); border: 0; box-shadow: 0 30px 90px #000000a6; background: #000; } #video-popup .video-loading { background: #14121c; } /* Lukkeknappen ligger fritt over videoen, ikke i en topplinje */ #video-popup .popup-close { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; background: #ffffff1f; backdrop-filter: blur(10px); color: #fff; } #video-popup .popup-close:hover { background: #ffffff33; } #video-popup .popup-close svg { width: 22px; height: 22px; } #video-popup .popup-no-video { background: #ffffff0f; border-color: #ffffff2b; color: #fff; } #video-popup .no-video-title { color: #ffffffb8; } /* Gradsfanene flyttes av sos-v3.js ned i linja under videoen, sammen med tittelen og pilene. Der står de i normal flyt. */ #video-popup .v3-vid-grader .dans-diff-tabs { position: static; transform: none; z-index: auto; width: auto; margin: 0; border: 0; box-shadow: none; background: #ffffff1f; backdrop-filter: blur(12px); } #video-popup .dans-diff-tab { flex: 0 0 auto; padding: 8px 16px; color: #ffffffbd; } #video-popup .dans-diff-tab.is-active { color: var(--ink); } @media (max-width: 559px) { /* På mobil står videoen midt på skjermen med luft over og under */ #video-popup .popup-content { padding: 0 12px; } #video-popup .popup-video-stage { width: 100%; } } .popup-content { width: min(470px, 100%); height: 100dvh; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--linje); box-shadow: -18px 0 50px #00000026; transform: translateX(100%); transition: transform .34s var(--mj); overflow: hidden; } .popup-overlay.is-open .popup-content { transform: none; } .popup-header { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 14px var(--renne); border-bottom: 1px solid var(--linje); } .popup-title-container { flex: 1; min-width: 0; } .popup-title { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; color: var(--ink); } .popup-close { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: var(--bg2); color: var(--ink); display: grid; place-items: center; } .popup-close:hover { background: var(--linje); } .popup-close svg { width: 18px; height: 18px; } .popup-body { flex: 1; overflow-y: auto; padding: var(--renne); } /* Videoflaten holder 16:9 i alle tilstander, også mens den laster */ .popup-video-stage, .popup-video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: var(--kant); } .popup-video-stage iframe, .popup-video-stage video, .video-slot iframe, .video-slot video, .video-wrapper iframe, .video-wrapper video { width: 100%; height: 100%; border: 0; display: block; } .video-slot { position: absolute; inset: 0; transition: opacity .25s; } .video-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg2); transition: opacity .25s; } .loading-spinner { width: 30px; height: 30px; border: 3px solid var(--linje); border-top-color: var(--aksent); border-radius: 999px; animation: v3Snurr .8s linear infinite; } @keyframes v3Snurr { to { transform: rotate(360deg); } } .popup-no-video, #no-video-message { display: grid; place-items: center; gap: 10px; padding: 52px 20px; text-align: center; border-radius: var(--r); background: var(--bg2); border: 1px dashed var(--linje); } .no-video-icon { font-size: 1.9rem; opacity: .5; } .no-video-title { font-size: .95rem; font-weight: 800; color: var(--ink3); margin: 0; } .popup-section-title { color: var(--aksent); margin: 22px 0 10px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .popup-image-section img { width: 100%; border-radius: var(--r); border: var(--kant); } .popup-credits-grid { display: flex; flex-direction: column; gap: 7px; } .popup-credit-item { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 11px; background: var(--bg2); } .popup-credit-label { font-size: .82rem; font-weight: 600; color: var(--ink3); } .popup-credit-value { font-size: .82rem; font-weight: 800; color: var(--ink); text-align: right; } .popup-playback-item, .popup-audio-item { padding: 13px 14px; margin-bottom: 9px; border-radius: 13px; background: var(--flate); border: var(--kant); box-shadow: var(--skygge); } .popup-playback-item h4, .popup-audio-item h4 { margin: 0 0 9px; font-size: .84rem; font-weight: 800; color: var(--ink); } audio { width: 100%; height: 36px; } .download-link, .audio-download, .kl-download-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .78rem; font-weight: 800; color: var(--aksent); } .kl-doc-link { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--bg2); color: var(--lilla); display: grid; place-items: center; } .kl-doc-link:hover { background: var(--linje); } .popup-footer { padding-top: 20px; } .slide-button, .card-button, .cta-button, .btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 20px; border-radius: 12px; background: var(--aksent); color: var(--aksent-ink); font-weight: 900; font-size: .9rem; transition: transform .15s var(--fj); } .popup-footer .slide-button { width: 100%; } .slide-button:active, .card-button:active, .cta-button:active { transform: scale(.97); } .btn-secondary { background: var(--bg2); color: var(--ink); } /* ---------- 8. SANGSIDE -------------------------------------------------- */ .single-content-wrapper { padding: 0 var(--renne) 40px; max-width: 900px; } .single-header-content { padding-top: 16px; } .back-button, .kl-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--bg2); color: var(--ink2); font-weight: 700; font-size: .82rem; } .back-button:hover, .kl-back:hover { color: var(--ink); background: var(--linje); } .single-title-section { padding: 0; } .type-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; } .type-badge { padding: 3px 9px; border-radius: 7px; font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: var(--bg2); color: var(--ink2); } .type-badge.type-karaoke { background: var(--het); color: #fff; } .type-badge.type-dans { background: var(--himmel); color: #04223f; } .type-badge.type-arkiv { background: var(--gronn); color: #06281c; } .type-tabs, .dans-diff-tabs, .split-tabs { display: flex; gap: 5px; padding: 4px; margin: 0 0 18px; border-radius: 12px; background: var(--bg2); overflow-x: auto; scrollbar-width: none; } .type-tabs::-webkit-scrollbar, .dans-diff-tabs::-webkit-scrollbar { display: none; } .type-tab, .dans-diff-tab, .split-tab { flex: 1; padding: 10px 15px; border-radius: 9px; font-weight: 800; font-size: .84rem; color: var(--ink3); white-space: nowrap; transition: background .2s, color .2s; } .type-tab.active, .dans-diff-tab.is-active, .split-tab.active { background: var(--flate); color: var(--ink); box-shadow: var(--skygge); } .dans-diff-tab[data-diff="lett"].is-active { background: var(--gronn); color: #06281c; } .dans-diff-tab[data-diff="middels"].is-active { background: var(--gul); color: #3d2a00; } .dans-diff-tab[data-diff="vanskelig"].is-active { background: var(--het); color: #fff; } .tab-content, .single-content-box { padding: 0; background: none; border: 0; } .video-wrapper, .dans-diff-pane.is-active { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: var(--kant); } .arkiv-top-section { display: grid; gap: 20px; margin-bottom: 22px; } @media (min-width: 760px) { .arkiv-top-section { grid-template-columns: 1fr 1.35fr; align-items: start; } } .arkiv-image img { width: 100%; border-radius: var(--r); border: var(--kant); } .post-text h3, .audio-section-clean h3, .kl-single h3 { margin: 0 0 9px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .post-text { line-height: 1.7; color: var(--ink2); font-size: .94rem; } .credits-box { margin-top: 16px; padding: 15px; border-radius: 13px; background: var(--bg2); } .credits-box h4 { margin: 0 0 10px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } .credit-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .86rem; } .credit-row span { color: var(--ink3); font-weight: 600; } .credit-row strong { color: var(--ink); font-weight: 800; text-align: right; } .audio-section-clean { margin-top: 26px; } .audio-grid { display: grid; gap: 10px; } .audio-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; background: var(--flate); border: var(--kant); box-shadow: var(--skygge); } .audio-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--bg2); display: grid; place-items: center; font-size: 1rem; } .audio-info { flex: 1; min-width: 0; } .audio-title { display: block; margin-bottom: 7px; font-weight: 800; font-size: .85rem; color: var(--ink); } .lyrics-box, .lyrics-paper { padding: 17px; border-radius: 13px; background: var(--bg2); white-space: pre-wrap; line-height: 1.65; font-size: .92rem; color: var(--ink2); } .no-video-msg { display: grid; place-items: center; padding: 48px 20px; text-align: center; border-radius: var(--r); background: var(--bg2); border: 1px dashed var(--linje); color: var(--ink3); font-weight: 700; font-size: .9rem; } /* ---------- 9. KORLEDERE ------------------------------------------------- */ .kl-wrap { padding-bottom: 40px; } .kl-intro { margin: 0 0 18px; font-size: .88rem; font-weight: 600; color: var(--ink3); max-width: 60ch; } .kl-gate { max-width: 400px; margin: 30px var(--renne) 0; } .kl-gate-card { padding: 34px 26px; text-align: center; border-radius: 22px; background: var(--flate); border: var(--kant); box-shadow: var(--skygge2); } .kl-gate-icon { width: 70px; height: 70px; margin: 0 auto 16px; border-radius: 999px; background: var(--bg2); color: var(--het); display: grid; place-items: center; } .kl-gate-title { margin: 0 0 6px; font-size: 1.3rem; } .kl-gate-intro { margin: 0 0 18px; font-size: .88rem; font-weight: 600; color: var(--ink3); } .kl-gate-error { margin: 0 0 12px; font-size: .82rem; font-weight: 700; color: var(--het); } .kl-gate-form { display: grid; gap: 9px; } .kl-gate-input, input.kl-gate-input { width: 100%; padding: 13px 16px; border-radius: 12px; background: var(--bg2); border: var(--kant); color: var(--ink); font-weight: 600; text-align: center; } .kl-gate-btn { width: 100%; padding: 13px; border-radius: 12px; background: var(--het); color: #fff; font-weight: 900; } .kl-single { padding: 0 var(--renne) 40px; max-width: 780px; } .kl-single-head { margin: 10px 0 18px; } .kl-single-title { margin-top: 8px; font-size: clamp(1.4rem, 4.8vw, 1.9rem); } .kl-rich { line-height: 1.7; color: var(--ink2); font-size: .94rem; } .kl-rich p { margin-bottom: 12px; } .kl-image img { width: 100%; margin: 20px 0; border-radius: var(--r); border: var(--kant); } /* ---------- 10. OM OSS --------------------------------------------------- */ .hero-section { padding: 34px var(--renne) 30px; background: var(--bg2); margin-bottom: 26px; } .hero-content { max-width: 68ch; } .hero-title { padding-top: 0; } .hero-subtitle { margin-top: 9px; font-size: .92rem; font-weight: 600; color: var(--ink3); } .section-container { padding: 0 var(--renne); max-width: 800px; } .about-section { margin-bottom: 28px; } .about-section .section-title { margin-bottom: 12px; font-size: 1.16rem; } .section-text { margin-bottom: 12px; line-height: 1.7; font-size: .94rem; color: var(--ink2); } .key-points, .resource-list { display: grid; gap: 10px; } .key-points li, .resource-list li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 13px; background: var(--bg2); line-height: 1.55; font-size: .9rem; color: var(--ink2); } .key-points li::before, .resource-list li::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 999px; background: var(--het); -webkit-mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.9'/%3E%3C/svg%3E"), linear-gradient(#000, #000); -webkit-mask-composite: xor; mask: center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.9'/%3E%3C/svg%3E"), linear-gradient(#000, #000); mask-composite: exclude; } .resource-list li::before { background: var(--himmel); } .resource-list li strong { color: var(--ink); } .feedback-section { margin-top: 28px; padding: 22px; border-radius: 18px; background: var(--flate); border: var(--kant); box-shadow: var(--skygge); } .feedback-section .section-title { margin-bottom: 8px; font-size: 1.1rem; } .feedback-section .cta-button { margin-top: 14px; } .back-to-top { position: fixed; right: 18px; bottom: calc(var(--tab) + var(--sb) + 16px); z-index: 90; width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 900; box-shadow: var(--skygge2); } @media (min-width: 1000px) { .back-to-top { right: 24px; bottom: 24px; } } /* ---------- 11. TILSTANDER ----------------------------------------------- */ .no-content, .kl-empty, #no-favorites-message { display: grid; place-items: center; gap: 10px; margin: 6px var(--renne) 0; padding: 56px 24px; text-align: center; border-radius: 18px; background: var(--bg2); border: 1px dashed var(--linje); } .no-content-message, .kl-empty { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); } .no-content .card-button { margin-top: 4px; } /* ---------- 12. MØRK MODUS ----------------------------------------------- */ /* Konturene hører til lys modus. I mørk modus bærer flatene seg selv. */ :root[data-tema="mork"] .slide-img { filter: brightness(.94); } :root[data-tema="mork"] .popup-overlay { background: #00000099; } /* ---------- 13. AVSPILLERLINJE, SØK I HJØRNET, VALGT RAD ------------------ */ /* Linja under videoen: forrige/neste, tittel og vanskelighetsgrad. Bygget av sos-v3.js — pilene kaller malens egen showVideoPopup(). */ .v3-vid-bunn { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 4; display: flex; align-items: center; gap: 14px; padding: 0 clamp(14px, 4vw, 40px); color: #fff; pointer-events: none; } .v3-vid-bunn > * { pointer-events: auto; } .v3-vid-midt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; } .v3-vid-tittel { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: #fff; max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 12px #000000a6; } .v3-vid-pil { width: 46px; height: 46px; flex-shrink: 0; border-radius: 999px; background: #ffffff1f; backdrop-filter: blur(10px); color: #fff; display: grid; place-items: center; transition: background .18s, transform .15s var(--fj); } .v3-vid-pil svg { width: 20px; height: 20px; } .v3-vid-pil:hover { background: #ffffff33; } .v3-vid-pil:active { transform: scale(.9); } .v3-vid-pil[disabled] { opacity: .3; pointer-events: none; } /* Gradsvelgeren flyttes hit fra videoflaten */ .v3-vid-grader[hidden] { display: none; } .v3-vid-grader .dans-diff-tabs { position: static; transform: none; width: auto; margin: 0; background: #ffffff1c; backdrop-filter: blur(12px); } .v3-vid-grader .dans-diff-tab { flex: 0 0 auto; padding: 8px 16px; color: #ffffffbd; } .v3-vid-grader .dans-diff-tab.is-active { color: var(--ink); } /* Videoen får plass til linja under seg */ #video-popup .popup-content { padding-bottom: clamp(96px, 16vh, 132px); } @media (max-width: 559px) { .v3-vid-bunn { gap: 8px; padding: 0 12px; } .v3-vid-pil { width: 42px; height: 42px; } .v3-vid-tittel { font-size: .9rem; } } /* ---- Søk i hjørnet ---- */ /* Søkeknappen ligger i hjørnet på høyde med sidetittelen, ikke på egen rad. */ .page-container, .kl-wrap { position: relative; } .v3-topp { position: absolute; top: 16px; right: var(--renne); z-index: 5; } .v3-topp ~ .page-header .page-title { max-width: calc(100% - 58px); } .v3-sok-knapp { width: 42px; height: 42px; border-radius: 13px; background: var(--aksent); color: var(--aksent-ink); display: grid; place-items: center; transition: transform .15s var(--fj), background .2s; } .v3-sok-knapp::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E"); } .v3-sok-knapp:active { transform: scale(.92); } .v3-sok-knapp.er-apen { background: var(--bg2); color: var(--ink); } .v3-sok-knapp.er-apen::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); } .v3-sok-lag { padding: 0 0 14px; animation: v3SokInn .22s var(--mj); } .v3-sok-lag .search-form { max-width: 560px; } @keyframes v3SokInn { from { opacity: 0; transform: translateY(-6px); } } /* ---- Valgt rad i arkivet ---- */ /* Hele raden er klikkflate, og den valgte får en tynn fargestripe langs tittelen så du ser hvilken sang panelet viser. */ .song-card { cursor: pointer; position: relative; } .song-card .song-title-btn { position: relative; padding-left: 0; transition: padding-left .18s var(--mj); } .song-card .song-title-btn::before { content: ""; position: absolute; left: -10px; top: 2px; bottom: 2px; width: 3px; border-radius: 99px; background: var(--aksent); opacity: 0; transform: scaleY(.4); transition: opacity .18s, transform .22s var(--fj); } .song-card.er-valgt { border-color: var(--aksent); } .song-card.er-valgt .song-title-btn { padding-left: 12px; color: var(--aksent); } .song-card.er-valgt .song-title-btn::before { left: 0; opacity: 1; transform: none; } /* ============================================================================ 14. C·BOLD — verdiene er lest rett ut av variant-c-bold.html --------------------------------------------------------------------------- Grunnform: hvit flate, 2,5 px blekkontur, MYK forskjøvet skygge (5px 5px 0 med 8 % blekk). Ved hover blir skyggen HEL farge og elementet løfter seg 2 px. Merkene er fylte gradienter med blekkontur og litt skrå. Hver innholdstype har sin egen farge — karaoke, dans og arkiv skal ikke se like ut. ========================================================================= */ :root { --blekk: #151220; --blekk-mykt: #15122014; /* Én gradient per innholdstype */ --g-karaoke: linear-gradient(135deg, #FF4D8D 0%, #8A4DFF 100%); --g-dans: linear-gradient(135deg, #22D3EE 0%, #4D7CFF 100%); --g-arkiv: linear-gradient(135deg, #A3E635 0%, #34D399 100%); --g-fmb: linear-gradient(135deg, #FBBF24 0%, #FF4D8D 100%); --g-innsp: linear-gradient(135deg, #8A4DFF 0%, #4D7CFF 100%); --g-playb: linear-gradient(135deg, #34D399 0%, #22D3EE 100%); --g-tekst: linear-gradient(135deg, #FF8A4D 0%, #FBBF24 100%); --f-karaoke: #FF4D8D; --f-dans: #4D7CFF; --f-arkiv: #34D399; --f-fmb: #FBBF24; --f-innsp: #8A4DFF; --f-playb: #22D3EE; --f-tekst: #FF8A4D; } :root[data-tema="mork"] { --blekk: #F6F4FB; --blekk-mykt: #00000059; } /* ---- 14.1 Rader: myk skygge, hel farge ved hover ---- */ #archive-list, #favorites-list, .kl-list { max-width: none; } .song-card, .kl-card { gap: 12px; padding: 15px 18px; border: 2.5px solid var(--blekk); border-radius: 20px; background: var(--flate); box-shadow: 5px 5px 0 var(--blekk-mykt); transition: transform .25s var(--mj), box-shadow .25s var(--mj); } .song-card:hover, .kl-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--aksent); } .song-card:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--aksent); } .song-title-btn, .kl-card-title { font-size: 1.04rem; font-weight: 700; line-height: 1.35; color: var(--ink); } /* Tittelen skal ikke skifte farge av seg selv ved hover — det er raden som svarer. Uten dette slår foreldretemaets lenkefarge inn. */ .song-card:hover .song-title-btn, .song-card .song-title-btn:hover, .kl-card:hover .kl-card-title, .kl-card .kl-card-title:hover { color: var(--ink); } .song-card.er-valgt { border-color: var(--aksent); box-shadow: 6px 6px 0 var(--aksent); } .song-card.er-valgt .song-title-btn { color: var(--ink); padding-left: 12px; } /* Pil ytterst */ .song-card::after, .kl-card::after { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: var(--ink3); transition: background .2s, transform .2s var(--fj); -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); } .song-card:hover::after, .kl-card:hover::after { background: var(--aksent); transform: translateX(3px); } /* ---- 14.2 Merker: fylt gradient, blekkontur, litt skrå ---- */ .song-badge, .dans-diff-tag, .kl-tag, .type-badge { padding: 5px 11px; border: 2px solid var(--blekk); border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink3); transform: rotate(-2deg); flex-shrink: 0; white-space: nowrap; } .song-badges-container .song-badge:nth-child(even) { transform: rotate(1.5deg); } .song-badge[data-type="karaoke"], .type-badge.type-karaoke { background: var(--g-karaoke); } .song-badge[data-type="dans"], .type-badge.type-dans { background: var(--g-dans); } .song-badge[data-type="arkiv"], .type-badge.type-arkiv { background: var(--g-arkiv); } .song-badge[data-type="fmb"] { background: var(--g-fmb); } .song-badge[data-type="innspilling"] { background: var(--g-innsp); } .song-badge[data-type="playback"] { background: var(--g-playb); } .song-badge[data-type="tekst"] { background: var(--g-tekst); color: #3d2a00; } .dans-diff-tag-lett { background: var(--g-arkiv); color: #06281c; } .dans-diff-tag-middels { background: var(--g-tekst); color: #3d2a00; } .dans-diff-tag-vanskelig { background: var(--g-karaoke); color: #fff; } .kl-tag-pensum { background: var(--g-karaoke); } .kl-tag-units { background: var(--g-dans); } .kl-tag-aktiviteter { background: var(--g-arkiv); color: #06281c; } .kl-tag-dokumenter { background: var(--g-fmb); } .kl-tag-tips { background: var(--g-innsp); } /* ---- 14.3 Filtre: én farge per type ---- */ /* Skyggen og løftet trenger plass — uten dette klipper rullefeltet dem bort */ .filter-controls, .dans-filter-bar, .kl-filter { gap: 9px; padding: 4px 0 18px; overflow: visible; flex-wrap: wrap; } .archive-content .filter-controls, .kl-filter { padding-left: var(--renne); padding-right: var(--renne); } /* Som i C·Bold brytes filtrene til flere rader pa mobil i stedet for a rulle — da ser du alle valgene med en gang. */ @media (max-width: 559px) { .filter-controls, .dans-filter-bar, .kl-filter { flex-wrap: wrap; overflow: visible; padding-bottom: 18px; } } .filter-button, .dans-filter, .kl-filter-btn { padding: 9px 17px; border: 2.5px solid var(--blekk); border-radius: 16px; background: var(--flate); box-shadow: 3px 3px 0 var(--blekk); font-weight: 800; font-size: .83rem; color: var(--ink); } .filter-button:hover, .dans-filter:hover, .kl-filter-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--blekk); color: var(--ink); } .filter-button:active, .dans-filter:active, .kl-filter-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--blekk); } /* Aktivt filter fylles med sin egen farge — ikke alle like */ .filter-button.active, .dans-filter.is-active, .kl-filter-btn.is-active { color: #fff; border-color: var(--blekk); box-shadow: 3px 3px 0 var(--blekk); background: var(--aksent); } .filter-button.active[href*="type=karaoke"] { background: var(--g-karaoke); } .filter-button.active[href*="type=dans"] { background: var(--g-dans); } .filter-button.active[href*="type=fmb"] { background: var(--g-fmb); color: #3d2a00; } .filter-button.active[href*="type=innspilling"] { background: var(--g-innsp); } .filter-button.active[href*="type=playback"] { background: var(--g-playb); color: #04223f; } .filter-button.active[href*="type=tekst"] { background: var(--g-tekst); color: #3d2a00; } /* Sorteringsfargen settes i seksjon 19, bundet til forste filtergruppe - href alene traff ogsa type- og Alle-knappene, som barer sort= videre. */ .dans-filter-lett.is-active { background: var(--g-arkiv); color: #06281c; } .dans-filter-middels.is-active { background: var(--g-tekst); color: #3d2a00; } .dans-filter-vanskelig.is-active { background: var(--g-karaoke); color: #fff; } .kl-filter-pensum.is-active { background: var(--g-karaoke); } .kl-filter-units.is-active { background: var(--g-dans); } .kl-filter-aktiviteter.is-active { background: var(--g-arkiv); color: #06281c; } .kl-filter-dokumenter.is-active { background: var(--g-fmb); color: #3d2a00; } .kl-filter-tips.is-active { background: var(--g-innsp); } .dans-filter-count { opacity: .7; font-weight: 900; } .dans-filter.is-active .dans-filter-count { opacity: .85; } #reset-filter { padding: 9px 17px; border: 2.5px dashed var(--ink3); border-radius: 16px; font-weight: 800; font-size: .83rem; } #reset-filter:hover { color: var(--aksent); border-color: var(--aksent); } /* ---- 14.4 Søkefelt ---- */ .search-input, .kl-search { padding: 12px 16px 12px 44px; border: 2.5px solid var(--blekk); border-radius: 18px; box-shadow: 4px 4px 0 var(--blekk); background: var(--flate); font-size: .92rem; font-weight: 600; } .search-input:focus, .kl-search:focus { outline: 0; box-shadow: 4px 4px 0 var(--aksent); } .search-form::before, .kl-tools::before { left: 17px; } .v3-sok-knapp { width: 46px; height: 46px; border: 2.5px solid var(--blekk); border-radius: 999px; box-shadow: 3px 3px 0 var(--blekk); } .v3-sok-knapp:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--blekk); } /* ---- 14.5 Hjertet: sirkel med blekkontur, fylles når den er valgt ---- */ .song-fav, .sos-fav-heart, .kl-doc-link { width: 40px; height: 40px; border: 2px solid var(--blekk); border-radius: 999px; background: var(--flate); color: var(--ink); transition: transform .3s var(--fj), background .2s; } .song-fav svg, .sos-fav-heart svg { width: 19px; height: 19px; } .song-fav:hover, .sos-fav-heart:hover { background: var(--bg2); } .song-fav:active, .sos-fav-heart:active { transform: scale(1.25); } .song-fav.is-fav, .sos-fav-heart.is-fav { background: var(--aksent); border-color: var(--blekk); } .song-fav.is-fav svg, .sos-fav-heart.is-fav svg { fill: #fff; stroke: #fff; } /* ---- 14.6 Kort ---- */ .slide-img { border: 2.5px solid var(--blekk); border-radius: 20px; box-shadow: 6px 6px 0 var(--blekk-mykt); transition: transform .25s var(--mj), box-shadow .25s var(--mj); } .swiper-slide:hover .slide-img, .karaoke-card:hover .slide-img { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--f-karaoke); } .dans-card:hover .slide-img { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--f-dans); } .front-page-main .swiper-slide:hover .slide-img { box-shadow: 10px 10px 0 var(--aksent); } /* ---- 14.7 Knapper, faner og flater ---- */ .slide-button, .card-button, .cta-button, .kl-gate-btn { border: 2.5px solid var(--blekk); border-radius: 18px; box-shadow: 5px 5px 0 var(--blekk); background: var(--aksent); color: #fff; } .slide-button:hover, .card-button:hover, .cta-button:hover, .kl-gate-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--blekk); } .slide-button:active, .card-button:active, .cta-button:active, .kl-gate-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--blekk); } .type-tabs, .split-tabs { border: 2.5px solid var(--blekk); border-radius: 18px; box-shadow: 3px 3px 0 var(--blekk-mykt); background: var(--flate); } .type-tab.active, .split-tab.active { background: var(--aksent); color: #fff; box-shadow: none; } .type-tab[data-tab="karaoke"].active { background: var(--g-karaoke); } .type-tab[data-tab="dans"].active { background: var(--g-dans); } .type-tab[data-tab="arkiv"].active { background: var(--g-arkiv); color: #06281c; } .pagination-button, #archive-pagination a { border: 2.5px solid var(--blekk); border-radius: 14px; box-shadow: 3px 3px 0 var(--blekk-mykt); font-weight: 800; } .pagination-button:hover, #archive-pagination a:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--blekk); } .pagination-button.active, #archive-pagination a[style*="bold"] { background: var(--aksent); color: #fff; box-shadow: 3px 3px 0 var(--blekk); } .credits-box, .lyrics-box, .lyrics-paper, .popup-credit-item, .key-points li, .resource-list li, .audio-card, .popup-playback-item, .popup-audio-item, .feedback-section, .kl-gate-card { border: 2.5px solid var(--blekk); border-radius: 18px; box-shadow: 4px 4px 0 var(--blekk-mykt); } .no-content, .kl-empty, #no-favorites-message, .no-video-msg { border: 2.5px dashed var(--blekk); border-radius: 24px; } /* ---- 14.8 Skuffen ---- */ #archive-popup .popup-content, #favorites-popup .popup-content { width: min(520px, 100%); border-left: 3px solid var(--blekk); transform: translateX(105%); transition: transform .4s var(--fj); } #archive-popup.is-open .popup-content, #favorites-popup.is-open .popup-content { transform: none; } #archive-popup .popup-image-section { margin: calc(var(--renne) * -1) calc(var(--renne) * -1) 18px; } #archive-popup .popup-image-section img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border: 0; border-radius: 0; border-bottom: 3px solid var(--blekk); box-shadow: none; } .popup-close { border: 2.5px solid var(--blekk); border-radius: 999px; box-shadow: 3px 3px 0 var(--blekk); background: var(--flate); transition: transform .25s var(--mj); } .popup-close:hover { transform: rotate(90deg); } #video-popup .popup-close { border: 0; box-shadow: none; background: #ffffff1f; } /* ---- 14.9 Markørstrek bak tittelen ---- */ body[data-seksjon] .page-title { position: relative; z-index: 0; width: fit-content; max-width: 100%; align-self: flex-start; } body[data-seksjon] .page-title::after { content: ""; position: absolute; left: 2px; right: -6px; bottom: 6px; height: .32em; z-index: -1; border-radius: 6px; background: var(--aksent); opacity: .32; transform: rotate(-1deg); } /* ---- 14.10 Mørk modus: konturen blir lysere, skyggene mykere ---- */ :root[data-tema="mork"] .song-card, :root[data-tema="mork"] .kl-card, :root[data-tema="mork"] .filter-button, :root[data-tema="mork"] .dans-filter, :root[data-tema="mork"] .kl-filter-btn, :root[data-tema="mork"] .search-input, :root[data-tema="mork"] .kl-search, :root[data-tema="mork"] .slide-img, :root[data-tema="mork"] .song-fav, :root[data-tema="mork"] .sos-fav-heart { border-color: var(--linje); box-shadow: 0 2px 14px #00000059; } :root[data-tema="mork"] .song-card:hover { box-shadow: 0 6px 22px #0009, 0 0 0 2px var(--aksent); transform: translateY(-2px); } :root[data-tema="mork"] .song-badge, :root[data-tema="mork"] .dans-diff-tag, :root[data-tema="mork"] .kl-tag { border-color: #00000059; } /* ---- 14.11 Søk: pille ved siden av tittelen på PC, rund knapp på mobil --- */ .v3-topp { position: absolute; top: 14px; right: var(--renne); z-index: 5; } .v3-topp ~ .page-header .page-title { max-width: calc(100% - 60px); } .page-container, .kl-wrap { position: relative; } @media (min-width: 760px) { .v3-topp { display: none; } .v3-sok-lag[hidden] { display: block; } .v3-topp ~ .page-header .page-title { max-width: 100%; } .page-header { position: relative; } .v3-sok-lag { position: absolute; top: 16px; right: var(--renne); width: min(340px, 40vw); padding: 0; animation: none; } .v3-sok-lag .search-form { max-width: none; } } /* ============================================================================ 15. FRA ØNSKELISTA (#1–#8) ========================================================================= */ /* #5 — Dus fargevask øverst på siden, som i C·Bold. Ligger bak innholdet og følger seksjonsfargen. */ .main-with-sidebar, .front-page-main, .om-oss-main { position: relative; isolation: isolate; } .main-with-sidebar::before, .front-page-main::before, .om-oss-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 300px; z-index: -1; border-radius: 0 0 48px 48px; background: linear-gradient(135deg, var(--aksent) 0%, var(--f-fmb) 100%); opacity: .13; pointer-events: none; } :root[data-tema="mork"] .main-with-sidebar::before, :root[data-tema="mork"] .front-page-main::before, :root[data-tema="mork"] .om-oss-main::before { opacity: .16; } /* #1 — Sangtittelen i arkivraden: litt større, og aldri brudd midt i et ord */ .song-title-btn, .kl-card-title { font-size: 1.12rem; line-height: 1.32; word-break: normal; overflow-wrap: break-word; hyphens: none; } @media (max-width: 559px) { .song-title-btn, .kl-card-title { font-size: 1rem; } } /* #2 og #3 — Type-filtrene bærer sin egen farge også når de ikke er valgt, så Dans og Karaoke kjennes igjen på samme farge som merkene sine. */ .filter-button[href*="type=karaoke"] { color: var(--f-karaoke); border-color: var(--f-karaoke); } .filter-button[href*="type=dans"] { color: var(--f-dans); border-color: var(--f-dans); } .filter-button[href*="type=fmb"] { color: #B07A00; border-color: var(--f-fmb); } .filter-button[href*="type=innspilling"] { color: var(--f-innsp); border-color: var(--f-innsp); } .filter-button[href*="type=playback"] { color: #0E90A6; border-color: var(--f-playb); } .filter-button[href*="type=tekst"] { color: #C2611F; border-color: var(--f-tekst); } .filter-button[href*="type=karaoke"] { box-shadow: 3px 3px 0 var(--f-karaoke); } .filter-button[href*="type=dans"] { box-shadow: 3px 3px 0 var(--f-dans); } .filter-button[href*="type=fmb"] { box-shadow: 3px 3px 0 var(--f-fmb); } .filter-button[href*="type=innspilling"] { box-shadow: 3px 3px 0 var(--f-innsp); } .filter-button[href*="type=playback"] { box-shadow: 3px 3px 0 var(--f-playb); } .filter-button[href*="type=tekst"] { box-shadow: 3px 3px 0 var(--f-tekst); } .filter-button[href*="type="]:hover { transform: translate(-1px, -1px); } .filter-button[href*="type=karaoke"]:hover { box-shadow: 4px 4px 0 var(--f-karaoke); } .filter-button[href*="type=dans"]:hover { box-shadow: 4px 4px 0 var(--f-dans); } .filter-button[href*="type=fmb"]:hover { box-shadow: 4px 4px 0 var(--f-fmb); } .filter-button[href*="type=innspilling"]:hover { box-shadow: 4px 4px 0 var(--f-innsp); } .filter-button[href*="type=playback"]:hover { box-shadow: 4px 4px 0 var(--f-playb); } .filter-button[href*="type=tekst"]:hover { box-shadow: 4px 4px 0 var(--f-tekst); } /* Valgt: full gradient og hvit tekst, blekkontur igjen */ .filter-button.active[href*="type="] { color: #fff; border-color: var(--blekk); } .filter-button.active[href*="type=fmb"], .filter-button.active[href*="type=tekst"] { color: #3d2a00; } .filter-button.active[href*="type=playback"] { color: #04223f; } /* #4 — Filtrene mindre og tynnere på mobil */ @media (max-width: 767px) { .filter-controls, .dans-filter-bar, .kl-filter { gap: 7px; padding-bottom: 14px; } .filter-button, .dans-filter, .kl-filter-btn, #reset-filter { padding: 6px 12px; border-width: 1.5px; border-radius: 12px; font-size: .76rem; font-weight: 700; box-shadow: 2px 2px 0 var(--blekk); } .filter-button[href*="type=karaoke"] { box-shadow: 2px 2px 0 var(--f-karaoke); } .filter-button[href*="type=dans"] { box-shadow: 2px 2px 0 var(--f-dans); } .filter-button[href*="type=fmb"] { box-shadow: 2px 2px 0 var(--f-fmb); } .filter-button[href*="type=innspilling"] { box-shadow: 2px 2px 0 var(--f-innsp); } .filter-button[href*="type=playback"] { box-shadow: 2px 2px 0 var(--f-playb); } .filter-button[href*="type=tekst"] { box-shadow: 2px 2px 0 var(--f-tekst); } .filter-button.active, .dans-filter.is-active, .kl-filter-btn.is-active { box-shadow: 2px 2px 0 var(--blekk); } .dans-filter-count { font-size: .7rem; } } /* #6 — Gradsmerkene på danskortene skal være små, ikke dominere kortet */ .dans-card-diffs { gap: 4px; margin-top: 2px; } .dans-diff-tag { padding: 2px 7px; border-width: 1.5px; font-size: .52rem; letter-spacing: .05em; transform: rotate(-1.5deg); } .dans-card-diffs .dans-diff-tag:nth-child(even) { transform: rotate(1deg); } /* #7 — Tre kort i bredden på PC, ikke fire */ @media (min-width: 1000px) { .dans-grid, .karaoke-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1700px) { .dans-grid, .karaoke-grid { grid-template-columns: repeat(4, 1fr); } } /* #8 — Større korttittel på PC */ @media (min-width: 1000px) { .slide-title { font-size: 1rem; line-height: 1.3; } .slide-info { gap: 10px; } } /* ---------- 16. FRA ØNSKELISTA (#9–#11) ---------------------------------- */ /* #9 — Hello Elementor gir alle knapper rosa BAKGRUNN ved hover og fokus, ikke bare rosa tekst. Nullstillingen må dekke tilstandene også, med samme spesifisitet som attributt-selektorene deres. */ button:hover, button:focus, button:active, [type="button"]:hover, [type="button"]:focus, [type="button"]:active, [type="submit"]:hover, [type="submit"]:focus, [type="submit"]:active, [type="reset"]:hover, [type="reset"]:focus, [type="reset"]:active { background-color: transparent; color: inherit; text-decoration: none; } /* …men knapper som skal ha farge, beholder sin. background-color: unset ville gitt gjennomsiktig her, siden bakgrunn ikke arves. */ .slide-button, .card-button, .cta-button, .kl-gate-btn, #popup-go-to-page { background-color: var(--aksent); } .v3-sok-knapp { background-color: var(--aksent); } .filter-button.active, .dans-filter.is-active, .kl-filter-btn.is-active, .pagination-button.active { background-color: var(--aksent); } .song-fav.is-fav, .sos-fav-heart.is-fav { background-color: var(--aksent); } .song-fav.is-fav, .sos-fav-heart.is-fav { background: var(--aksent); } .song-fav.is-fav:hover, .sos-fav-heart.is-fav:hover { background: var(--aksent); } .slide-button:hover, .card-button:hover, .cta-button:hover, .kl-gate-btn:hover { background: var(--aksent); color: #fff; } .v3-sok-knapp:hover { background: var(--aksent); color: var(--aksent-ink); } .filter-button.active:hover, .dans-filter.is-active:hover, .kl-filter-btn.is-active:hover { color: #fff; } .dans-filter-lett.is-active:hover { color: #06281c; } .dans-filter-middels.is-active:hover { color: #3d2a00; } .popup-close:hover { background: var(--flate); color: var(--ink); } /* #10 — Typemerkene over fanene sier det samme som fanene, og er overflødige. Fanene får i stedet merkenes farge og form. */ .single-title-section .type-badges { display: none; } .type-tabs { gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; } .type-tab { flex: 0 0 auto; padding: 9px 18px; border: 2.5px solid var(--blekk); border-radius: 999px; background: var(--flate); box-shadow: 3px 3px 0 var(--blekk-mykt); font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); transition: transform .2s var(--mj), box-shadow .2s var(--mj); } .type-tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--blekk); } .type-tab.active { color: #fff; box-shadow: 3px 3px 0 var(--blekk); transform: none; } .type-tab[data-tab="karaoke"].active { background: var(--g-karaoke); } .type-tab[data-tab="dans"].active { background: var(--g-dans); } .type-tab[data-tab="arkiv"].active { background: var(--g-arkiv); color: #06281c; } .type-tab[data-tab="karaoke"] { color: var(--f-karaoke); border-color: var(--f-karaoke); } .type-tab[data-tab="dans"] { color: var(--f-dans); border-color: var(--f-dans); } .type-tab[data-tab="arkiv"] { color: #0F8C5F; border-color: var(--f-arkiv); } .type-tab.active { border-color: var(--blekk); } /* #11 — Gradsfanene på sangsiden: samme pilleform, med gradens egen farge */ .dans-diff-tabs { gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 16px; } .dans-diff-tab { flex: 0 0 auto; padding: 8px 17px; border: 2.5px solid var(--blekk); border-radius: 999px; background: var(--flate); box-shadow: 3px 3px 0 var(--blekk-mykt); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; transition: transform .2s var(--mj), box-shadow .2s var(--mj); } .dans-diff-tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--blekk); } .dans-diff-tab[data-diff="lett"] { color: #0F8C5F; border-color: var(--f-arkiv); } .dans-diff-tab[data-diff="middels"] { color: #B07A00; border-color: var(--f-fmb); } .dans-diff-tab[data-diff="vanskelig"] { color: var(--f-karaoke); border-color: var(--f-karaoke); } .dans-diff-tab.is-active { border-color: var(--blekk); box-shadow: 3px 3px 0 var(--blekk); transform: none; } .dans-diff-tab[data-diff="lett"].is-active { background: var(--g-arkiv); color: #06281c; } .dans-diff-tab[data-diff="middels"].is-active { background: var(--g-fmb); color: #3d2a00; } .dans-diff-tab[data-diff="vanskelig"].is-active { background: var(--g-karaoke); color: #fff; } /* Fanene i fullskjermspilleren beholder sin egen form over videoen */ #video-popup .dans-diff-tab { border: 0; box-shadow: none; background: transparent; color: #ffffffbd; } #video-popup .dans-diff-tab.is-active { border: 0; } /* Fargen på en AKTIV fane må settes med minst like høy spesifisitet som basisfargen, ellers vinner utgangsfargen og teksten forsvinner i fyllet. */ .type-tab[data-tab="karaoke"].active { color: #fff; } .type-tab[data-tab="dans"].active { color: #fff; } .type-tab[data-tab="arkiv"].active { color: #06281c; } .dans-diff-tab[data-diff="lett"].is-active { color: #06281c; } .dans-diff-tab[data-diff="middels"].is-active { color: #3d2a00; } .dans-diff-tab[data-diff="vanskelig"].is-active { color: #fff; } #video-popup .dans-diff-tab.is-active { color: var(--ink); } /* ---------- 17. FRA ØNSKELISTA (#12–#15) --------------------------------- */ /* #12 — Farge bare når filteret er valgt. Ulagte filtre skal se helt like ut, som «Alle». (Opphever fargeleggingen fra #2/#3 i uvalgt tilstand.) */ .filter-button[href*="type="] { color: var(--ink); border-color: var(--blekk); box-shadow: 3px 3px 0 var(--blekk); } .filter-button[href*="type="]:hover { color: var(--ink); border-color: var(--blekk); box-shadow: 4px 4px 0 var(--blekk); transform: translate(-1px, -1px); } .filter-button.active[href*="type="] { border-color: var(--blekk); box-shadow: 3px 3px 0 var(--blekk); } @media (max-width: 767px) { .filter-button[href*="type="] { box-shadow: 2px 2px 0 var(--blekk); } } /* Samme regel for fanene på sangsiden: ren form til de er valgt */ .type-tab[data-tab] { color: var(--ink); border-color: var(--blekk); } .dans-diff-tab[data-diff] { color: var(--ink); border-color: var(--blekk); } .type-tab[data-tab="karaoke"].active, .type-tab[data-tab="dans"].active { color: #fff; } .type-tab[data-tab="arkiv"].active { color: #06281c; } .dans-diff-tab[data-diff="lett"].is-active { color: #06281c; } .dans-diff-tab[data-diff="middels"].is-active { color: #3d2a00; } .dans-diff-tab[data-diff="vanskelig"].is-active { color: #fff; } #video-popup .dans-diff-tab { color: #ffffffbd; border: 0; } #video-popup .dans-diff-tab.is-active { color: var(--ink); } /* #13 — Søkefeltet skal være hvitt, ikke kremfarget */ .search-input, .kl-search, .kl-gate-input, input.search-input, input.kl-search { background: #fff; color: var(--ink); } :root[data-tema="mork"] .search-input, :root[data-tema="mork"] .kl-search, :root[data-tema="mork"] .kl-gate-input { background: var(--flate); } /* #14 — Lydspillerne: en ren, rolig flate rundt de innebygde kontrollene */ .popup-playback-item, .popup-audio-item, .audio-card { background: var(--flate); } audio { width: 100%; height: 40px; border-radius: 999px; background: var(--bg2); outline: 0; } audio::-webkit-media-controls-enclosure { background: var(--bg2); border-radius: 999px; } audio::-webkit-media-controls-panel { background: var(--bg2); padding: 0 6px; } /* Ikonet er tegnet av nettleseren — det skal ikke males over. */ audio { accent-color: var(--aksent); } audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display { font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: .74rem; color: var(--ink2); } :root[data-tema="mork"] audio, :root[data-tema="mork"] audio::-webkit-media-controls-enclosure, :root[data-tema="mork"] audio::-webkit-media-controls-panel { background: #2A2538; } :root[data-tema="mork"] audio { filter: invert(.92) hue-rotate(180deg); } /* Tittel og nedlasting rundt spilleren får litt mer ro */ .popup-playback-item h4, .popup-audio-item h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); } .popup-playback-item .download-link, .popup-audio-item .download-link { margin-top: 10px; font-size: .76rem; } /* #15 — «Gå til sang»: hovereffekten skal være bevegelse, ikke fargeskifte. Teksten står stille; det er knappen som løfter seg og får dypere skygge. */ .slide-button, .card-button, .cta-button, .kl-gate-btn, #popup-go-to-page { color: #fff; transition: transform .18s var(--mj), box-shadow .18s var(--mj), filter .18s; } .slide-button:hover, .card-button:hover, .cta-button:hover, .kl-gate-btn:hover, #popup-go-to-page:hover { color: #fff; background: var(--aksent); filter: brightness(1.06); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--blekk); } .slide-button:active, .card-button:active, .cta-button:active, .kl-gate-btn:active, #popup-go-to-page:active { color: #fff; filter: none; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--blekk); } /* ---------- 18. FRA ØNSKELISTA (#17–#22) --------------------------------- */ /* #17 — Pilene i pagineringen er nå ikoner, ikke skrifttegn */ .v3-pag-pil { display: inline-grid; place-items: center; padding: 9px; min-width: 42px; } .v3-pag-pil svg { width: 16px; height: 16px; } /* #20 — Filterlinja på dans ligger utenfor .page-header og manglet renne */ .dans-filter-bar { padding-left: var(--renne); padding-right: var(--renne); } .page-header .dans-filter-bar { padding-left: 0; padding-right: 0; } /* #19 — Forsidens velkomst: tydelig hierarki og luft, ikke to like avsnitt */ .intro-content { padding: 30px var(--renne) 10px; max-width: 900px; } .intro-title { margin-bottom: 12px; } .intro-subtitle { font-size: 1rem; line-height: 1.6; color: var(--ink2); max-width: 54ch; padding-left: 16px; border-left: 3px solid var(--aksent); } @media (min-width: 1000px) { .intro-content { padding-top: 44px; } .intro-title { font-size: 2.5rem; } .intro-subtitle { font-size: 1.06rem; } } /* #18 — Større kort i forsidehyllene */ .content-section .swiper-slide { width: 190px; } @media (min-width: 760px) { .content-section .swiper-slide { width: 250px; } } @media (min-width: 1000px) { .content-section .swiper-slide { width: 288px; } } @media (min-width: 1500px) { .content-section .swiper-slide { width: 320px; } } .content-section .slide-title { font-size: .95rem; } @media (min-width: 1000px) { .content-section .slide-title { font-size: 1.02rem; } } .content-section .section-title { font-size: 1.35rem; } @media (min-width: 1000px) { .content-section .section-title { font-size: 1.6rem; } } /* #21 — Om oss: heltbildet får ro, og seksjonene tydelig rytme */ .hero-section { margin: 22px var(--renne) 28px; padding: 38px 30px 34px; border: 2.5px solid var(--blekk); border-radius: 26px; background: var(--flate); box-shadow: 6px 6px 0 var(--blekk-mykt); } .hero-title { padding: 0; } .hero-subtitle { margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--ink2); max-width: 54ch; } .about-section { margin-bottom: 34px; } .about-section .section-title { position: relative; display: inline-block; margin-bottom: 14px; padding-bottom: 3px; font-size: 1.3rem; z-index: 0; } .about-section .section-title::after { content: ""; position: absolute; left: 0; right: -5px; bottom: 2px; height: .3em; z-index: -1; border-radius: 6px; background: var(--aksent); opacity: .3; transform: rotate(-1deg); } /* Linjene ble korte og ujevne med 62ch; 72ch gir fyldigere avsnitt. */ .section-text { margin-bottom: 14px; font-size: 1rem; line-height: 1.72; max-width: 72ch; } /* #22 — Tilbakemeldingsboksen som et tydelig kort med egen farge */ .feedback-section { position: relative; margin-top: 34px; padding: 26px 26px 28px; border: 2.5px solid var(--blekk); border-radius: 24px; background: linear-gradient(135deg, var(--aksent) 0%, var(--f-fmb) 100%); box-shadow: 6px 6px 0 var(--blekk); overflow: hidden; } .feedback-section::before { content: ""; position: absolute; inset: 3px; border-radius: 20px; background: var(--flate); z-index: 0; } .feedback-section > * { position: relative; z-index: 1; } .feedback-section .section-title { margin-bottom: 8px; font-size: 1.2rem; } .feedback-section .section-title::after { display: none; } .feedback-section .section-text { margin-bottom: 0; max-width: 46ch; } .feedback-section .cta-button { width: auto; margin-top: 18px; } /* ---------- 19. FRA ØNSKELISTA (#23–#27) --------------------------------- */ /* #27 — Type-fargene traff feil knapp. Sorteringslenkene bevarer det aktive typefilteret, så «Nyeste» har også type=dans i adressen sin og fanget dansfargen. Fargene må derfor bindes til den ANDRE filtergruppa, der typene faktisk ligger — ikke til href alene. Første gruppe er sortering, andre er innholdstyper. */ /* Nullstill: ingen type-farge basert på href alene */ .filter-button[href*="type="], .filter-button.active[href*="type="] { background-image: none; } .filter-controls .filter-group:first-of-type .filter-button.active { background: var(--aksent); color: var(--aksent-ink); } .filter-group + .filter-group .filter-button.active[href*="type=karaoke"] { background-image: var(--g-karaoke); color: #fff; } .filter-group + .filter-group .filter-button.active[href*="type=dans"] { background-image: var(--g-dans); color: #fff; } .filter-group + .filter-group .filter-button.active[href*="type=arkiv"] { background-image: var(--g-arkiv); color: #06281c; } .filter-group + .filter-group .filter-button.active[href*="type=fmb"] { background-image: var(--g-fmb); color: #3d2a00; } .filter-group + .filter-group .filter-button.active[href*="type=innspilling"] { background-image: var(--g-innsp); color: #fff; } .filter-group + .filter-group .filter-button.active[href*="type=playback"] { background-image: var(--g-playb); color: #04223f; } .filter-group + .filter-group .filter-button.active[href*="type=tekst"] { background-image: var(--g-tekst); color: #3d2a00; } .filter-controls .filter-button.active { background-color: transparent; } .filter-controls .filter-group:first-of-type .filter-button.active, .filter-group + .filter-group .filter-button.active:not([href*="type="]) { background-color: var(--aksent); } /* #23 — Bildene fylte 16:9-flaten med contain, som ga kremfargede striper på sidene. Kildene er 16:9, så cover viser dem helt og lar bare skjeve bilder beskjæres litt i stedet for å ramme dem inn. */ .slide-img { object-fit: cover; background: var(--bg2); } /* #24 — Tom favorittliste hadde ramme både utenpå og inni */ #no-favorites-message { border: 0; padding: 0; margin: 0; background: none; display: block; } #no-favorites-message > .no-content { margin: 6px var(--renne) 0; } /* #25 — Luft over innholdet på om oss */ .om-oss-main { padding-top: 10px; } /* #26 — Heltbildet på om oss: roligere oppsett, større ingress */ .hero-section { margin: 26px var(--renne) 30px; padding: 34px clamp(22px, 4vw, 40px) 34px; } .hero-content { max-width: 60ch; } .hero-title { margin-bottom: 12px; } .hero-subtitle { margin-top: 0; font-size: 1.12rem; line-height: 1.62; font-weight: 500; color: var(--ink2); max-width: 48ch; } @media (min-width: 1000px) { .hero-section { padding: 42px 44px 40px; } .hero-title { font-size: 2.4rem; } .hero-subtitle { font-size: 1.2rem; } } /* ---------- 20. FRA ØNSKELISTA (#28–#31) --------------------------------- */ /* #28 — Mindre kort i lista på mobil */ @media (max-width: 559px) { .song-card, .kl-card { gap: 9px; padding: 11px 13px; margin-bottom: 7px; border-width: 2px; border-radius: 16px; box-shadow: 4px 4px 0 var(--blekk-mykt); } .song-title-btn, .kl-card-title { font-size: .92rem; line-height: 1.3; } .song-badge, .kl-tag { padding: 3px 8px; font-size: .54rem; border-width: 1.5px; } .song-fav, .kl-doc-link { width: 34px; height: 34px; } .song-fav svg { width: 16px; height: 16px; } .song-card::after, .kl-card::after { width: 18px; height: 18px; } } /* #29 — Egen lydavspiller. Det innebygde grensesnittet er skjult; JS-en styrer det samme