/* ============================================================================
SJØLAPPEN · HYPERMODERNE 2026-LAG
Liquid glassmorphism · animert gradient-mesh · 3D-tilt · distinktiv type.
Lastes SIST. Scope: body.page-modul + body.page-dashboard.
Fonter: Clash Display (display) + General Sans (brødtekst) via Fontshare.
Brand: navy #0D2237 · rød #C41E2D · teal #128a7a. Lys-luminøs glass.
============================================================================ */
/* Playfair Display lastes via i på hver side (ikke @import —
@import er render-blocking; laster parallelt). */
/* ROLIG EDITORIAL (2026-06-02): vekk fra glass/mesh-slop. Tokenene styrer alt —
flatt papir, hårfine skiller, Playfair-display + Inter-brødtekst, én aksent. */
:root {
--sj-navy: #0D2237;
--sj-red: #C41E2D;
--sj-teal: #128a7a;
--sj-ink: #122334;
/* «glass»-tokenene er nå flate editorial-flater (ingen blur, ingen sheen) */
--sj-glass-bg: #ffffff;
--sj-glass-bg-strong: #ffffff;
--sj-glass-edge: rgba(13, 33, 55, 0.10);
--sj-glass-blur: none;
--sj-shadow-float: 0 12px 32px -22px rgba(13, 34, 55, 0.18);
--sj-sheen: 0 0 0 0 transparent;
--sj-display: "Playfair Display", Georgia, "Times New Roman", serif;
--sj-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
--sj-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---- Distinktiv typografi (overstyrer Inter-laget) ---- */
body.page-modul, body.page-modul *,
body.page-dashboard, body.page-dashboard * {
font-family: var(--sj-body) !important;
}
body.page-modul .k-logo, body.page-modul .k-logo *,
body.page-dashboard .k-logo, body.page-dashboard .k-logo * {
font-family: var(--sj-display) !important;
}
body.page-modul #modul-title,
body.page-modul #rich-blocks .rl-hero__title,
body.page-modul #rich-blocks .rl-concept__heading,
body.page-modul #rich-blocks .rl-quiz__question,
body.page-modul .rl-final .rl-final__card h2,
body.page-dashboard h1, body.page-dashboard h2, body.page-dashboard .dash-welcome__title {
font-family: var(--sj-display) !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
}
/* ============================================================================
ANIMERT GRADIENT-MESH BAKGRUNN (lys, brand-toner, drivende)
============================================================================ */
body.page-modul, body.page-dashboard {
background: #FFFDF7 !important;
position: relative;
}
/* Mesh fjernet — rolig papir, ikke drivende gradient-klatter */
body.page-modul::before, body.page-dashboard::before { display: none !important; }
/* fin grain-tekstur for dybde */
body.page-modul::after, body.page-dashboard::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes sj-mesh-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2.5vmax, -2vmax, 0) scale(1.06); }
100% { transform: translate3d(-2vmax, 2.5vmax, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
body.page-modul::before, body.page-dashboard::before { animation: none; }
}
/* Slå av gamle aurora/canvas-bakgrunner som kolliderer */
body.page-modul .sj-aurora, body.page-modul #bg-stage { display: none !important; }
/* ============================================================================
LIQUID-GLASS HEADER
============================================================================ */
body.page-modul .k-header, body.page-dashboard .k-header {
background: #FFFDF7 !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border-bottom: 1px solid rgba(13, 33, 55, 0.08) !important;
box-shadow: none !important;
}
/* Ekte logo i header */
body.page-modul .k-logo__mark, body.page-dashboard .k-logo__mark { display: none !important; }
.k-logo__img { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .k-logo__img { height: 26px; } }
/* ============================================================================
GLASS-KORT (leksjonsblokk) — flat, ingen 3D-tilt (fjernet: opplevdes irriterende)
============================================================================ */
body.page-modul #rich-blocks .rl-block {
background: var(--sj-glass-bg) !important;
backdrop-filter: var(--sj-glass-blur) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
border-radius: 30px !important;
box-shadow: var(--sj-sheen), var(--sj-shadow-float) !important;
transition: box-shadow 0.3s var(--sj-ease);
}
/* markør-glød fjernet (opplevdes som en mørk flekk som fulgte musen) */
body.page-modul #rich-blocks .rl-block::before { display: none !important; }
/* ============================================================================
GLASS-FREMDRIFTSLINJE (pille)
============================================================================ */
body.page-modul .rl-progress, body.page-modul #rich-blocks .rl-progress {
background: var(--sj-glass-bg-strong) !important;
backdrop-filter: var(--sj-glass-blur) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
box-shadow: var(--sj-sheen), 0 18px 40px -22px rgba(13, 34, 55, 0.30) !important;
}
/* ============================================================================
GLASS-KNAPPER + LIQUID PRIMÆR-CTA
============================================================================ */
body.page-modul .rl-quiz__option {
background: rgba(255, 255, 255, 0.5) !important;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: var(--sj-sheen);
transition: transform 0.3s var(--sj-ease), box-shadow 0.3s var(--sj-ease), border-color 0.3s var(--sj-ease);
}
body.page-modul .rl-quiz__option:hover {
transform: translateY(-3px) translateZ(40px);
box-shadow: var(--sj-sheen), 0 18px 34px -16px rgba(13, 34, 55, 0.30);
border-color: var(--sj-teal) !important;
}
body.page-modul .btn--primary {
background: linear-gradient(135deg, var(--sj-red), #e23b48) !important;
border: none !important;
box-shadow: 0 14px 30px -12px rgba(196, 30, 45, 0.55), var(--sj-sheen) !important;
letter-spacing: 0.01em;
}
/* ============================================================================
ENTRÉ-ANIMASJON (staggered glass-reveal)
============================================================================ */
/* Steg-inngang (Emil Kowalski): forelderen toner bare inn (opacity + lett blur,
INGEN translateY/scale) – barna bærer bevegelsen via stagger. Det fjerner den
doble bevegelsen (blokk + barn flyttet samtidig) og er kortere (0,42s) fordi
steget vises titalls ganger per økt → skal føles snappy, ikke tregt. */
@keyframes sj-block-in {
from { opacity: 0; filter: blur(4px); }
to { opacity: 1; filter: blur(0); }
}
body.page-modul #rich-blocks .rl-block.is-active {
animation: sj-block-in 0.42s var(--sj-ease) both;
}
body.page-modul #rich-blocks .rl-block.is-active > * {
animation-duration: 0.42s;
}
@media (prefers-reduced-motion: reduce){
body.page-modul #rich-blocks .rl-block.is-active,
body.page-modul #rich-blocks .rl-block.is-active > * { animation: none !important; filter: none !important; }
}
/* ============================================================================
DASHBOARD · glass-kort + 3D-løft
============================================================================ */
body.page-dashboard .dash-welcome,
body.page-dashboard .dash-action,
body.page-dashboard .dash-stat,
body.page-dashboard .modul-card {
background: var(--sj-glass-bg) !important;
backdrop-filter: var(--sj-glass-blur) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
border-radius: 24px !important;
box-shadow: var(--sj-sheen), var(--sj-shadow-float) !important;
transition: transform 0.45s var(--sj-ease), box-shadow 0.45s var(--sj-ease) !important;
}
body.page-dashboard .dash-action:hover,
body.page-dashboard .modul-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 16px 36px -24px rgba(13,34,55,0.24) !important;
}
/* De-yellow: gull-aksent → teal */
body.page-dashboard .dash-action--gold .dash-action__icon { background: var(--sj-teal) !important; color: #fff !important; }
body.page-dashboard .dash-stat__num { color: var(--sj-teal) !important; }
/* Liquid-glass header allerede dekket av .k-header-regelen over (page-dashboard) */
/* ============================================================================
BREDT GRUNNLAG · alle kurs-sider (login, pakker, profil, ai-instruktør …)
============================================================================ */
body[class*="page-"], body[class*="page-"] * { font-family: var(--sj-body) !important; }
body[class*="page-"] .k-logo, body[class*="page-"] .k-logo * { font-family: var(--sj-display) !important; }
body[class*="page-"] h1, body[class*="page-"] h2, body[class*="page-"] h3 {
font-family: var(--sj-display) !important; letter-spacing: -0.02em !important;
}
body[class*="page-"] .k-logo__mark { display: none !important; }
body[class*="page-"] .k-logo__img { height: 30px; width: auto; display: block; }
/* Mesh-bakgrunn på alle kurs-sider */
body[class*="page-"] { background: #FFFDF7 !important; position: relative; }
/* Mesh + full-bleed sjøfoto fjernet → rolig papir på alle sider */
body[class*="page-"]::before { display: none !important; }
body[class*="page-"] .bg-stage { display: none !important; }
/* Glass-header overalt */
body[class*="page-"] .k-header {
background: #FFFDF7 !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border-bottom: 1px solid rgba(13,33,55,0.08) !important;
box-shadow: none !important;
}
/* Generiske glass-kort (auth-/pris-/profil-kort som bruker .glass-card/.auth-card/.pakke-kort) */
body[class*="page-"] .auth-card,
body[class*="page-"] .glass-card,
body[class*="page-"] .pakke-card,
body[class*="page-"] .pris-kort,
body[class*="page-"] .cin-card,
body[class*="page-"] .profil-card {
background: var(--sj-glass-bg) !important;
backdrop-filter: var(--sj-glass-blur) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
border-radius: 24px !important;
box-shadow: var(--sj-sheen), var(--sj-shadow-float) !important;
}
/* ============================================================================
DE-YELLOW · overstyrer gamle gul/gull-variabler globalt (laster sist).
Påvirker kun kurs-sider som inkluderer dette laget.
============================================================================ */
:root {
--sunshine: #128a7a; /* var gul #FFD93D → teal */
--golden: #0e7e90; /* var oransje #FFB347 → teal-blå */
}
/* ============================================================================
UNIVERSELL EKTE LOGO · gjør enhver .k-logo til offisiell logo via bg-image
(skjuler gammel inline-SVG + wordmark-tekst). Krever bare CSS-lenken på siden.
============================================================================ */
body[class*="page-"] .k-logo {
width: 172px; height: 34px; padding: 0 !important; gap: 0 !important;
background: url("/kurs/img/logo/sjolappen-logo.svg") left center / contain no-repeat !important;
font-size: 0 !important; color: transparent !important; line-height: 0 !important;
}
body[class*="page-"] .k-logo > * { display: none !important; }
@media (max-width: 560px) { body[class*="page-"] .k-logo { width: 150px; height: 30px; } }
/* ============================================================================
DASHBOARD · fjern gjenværende varme/gule flater → glass/teal
============================================================================ */
body.page-dashboard .cin-hero,
body.page-dashboard .dash-welcome.cin-hero,
body.page-dashboard .streak-widget,
body.page-dashboard .repetition-widget {
background: var(--sj-glass-bg) !important;
backdrop-filter: var(--sj-glass-blur) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
border-radius: 24px !important;
box-shadow: var(--sj-sheen), var(--sj-shadow-float) !important;
}
body.page-dashboard .cin-hero::before,
body.page-dashboard .cin-hero::after { display: none !important; }
/* gull/amber-gradienter (streak-flamme, badges) → teal */
body[class*="page-"] .streak-widget__flame,
body[class*="page-"] [class*="badge--gold"],
body[class*="page-"] .cin-chip--gold {
background: linear-gradient(135deg, var(--sj-teal), #46c2ad) !important;
color: #fff !important;
}
:root { --cin-gradient-gold: linear-gradient(135deg, #128a7a 0%, #46c2ad 100%); }
/* Skjul gammel båt-bg-canvas/aurora overalt → kun mesh vises */
body[class*="page-"] #bg-stage,
body[class*="page-"] .sj-aurora { display: none !important; }
/* Dashboard velkomst: lesbar ink-tekst på lyst glass (var lys for mørk hero) */
body.page-dashboard .dash-welcome__lede,
body.page-dashboard .cin-hero .dash-welcome__lede,
body.page-dashboard .cin-hero__lede { color: var(--sj-ink) !important; opacity: 0.82; }
body.page-dashboard .dash-stat__label,
body.page-dashboard .cin-hero .dash-stat__label { color: var(--sj-ink) !important; opacity: 0.7; }
body.page-dashboard .dash-welcome h1,
body.page-dashboard .cin-hero h1 { color: var(--sj-ink) !important; }
body.page-dashboard .cin-hero h1 span,
body.page-dashboard .dash-welcome h1 span { color: var(--sj-red) !important; }
/* ============================================================================
BILDE-FØRST KONSEPT-LAYOUT
Full-bleed illustrasjon på topp + korte punkter under (ikke tekst|bilde).
============================================================================ */
/* Konsept-kort: rene kanter for full-bleed, dropp 3D-løft på innhold */
body.page-modul #rich-blocks .rl-block:has(.rl-concept){ overflow:hidden; }
body.page-modul #rich-blocks .rl-block:has(.rl-concept) > *{ transform:none !important; }
body.page-modul #rich-blocks .rl-concept{
display:flex !important; flex-direction:column; gap:0;
grid-template-columns:none !important; align-items:stretch !important;
}
/* Full-bleed illustrasjon øverst i kortet */
body.page-modul #rich-blocks .rl-concept__diagram{
order:-1; margin:0 0 clamp(26px,3vw,36px); padding:0;
margin-left:calc(-1 * clamp(28px,4.6vw,60px));
margin-right:calc(-1 * clamp(28px,4.6vw,60px));
margin-top:calc(-1 * clamp(28px,4.6vw,60px));
border-radius:30px 30px 0 0; overflow:hidden; background:#d7e6ea;
}
body.page-modul #rich-blocks .rl-concept__diagram img{
display:block; width:100%; height:clamp(220px,40vh,460px); object-fit:cover; margin:0; border-radius:0;
}
/* To diagrammer: legg dem side-ved-side under teksten */
body.page-modul #rich-blocks .rl-concept--two-diagrams .rl-concept__diagram{ border-radius:30px 30px 0 0; }
/* Tittel + punkter */
body.page-modul #rich-blocks .rl-concept__text{ max-width:860px; }
body.page-modul #rich-blocks .rl-concept__heading{ margin-bottom:16px; }
body.page-modul #rich-blocks .rl-concept__body p{ font-size:1.05rem; line-height:1.6; color:var(--sj-ink); margin:0 0 12px; }
body.page-modul #rich-blocks .rl-concept__body ul{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
body.page-modul #rich-blocks .rl-concept__body li{
position:relative; padding-left:42px; font-size:clamp(1.02rem,1.5vw,1.17rem); line-height:1.5; color:var(--sj-ink);
}
body.page-modul #rich-blocks .rl-concept__body li::before{
content:""; position:absolute; left:0; top:0; width:27px; height:27px; border-radius:50%;
background:linear-gradient(135deg, var(--sj-teal,#128a7a), #46c2ad);
box-shadow:0 6px 14px -6px rgba(18,138,122,.6);
}
body.page-modul #rich-blocks .rl-concept__body li::after{
content:""; position:absolute; left:8.5px; top:9px; width:9px; height:5px;
border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg);
}
body.page-modul #rich-blocks .rl-concept__body li strong{ color:var(--sj-navy,#0D2237); }
/* ── Lydspiller (Kaptein Olaf leser konseptet høyt) ───────────────── */
body.page-modul #rich-blocks .rl-audio{ margin:4px 0 22px; }
body.page-modul #rich-blocks .rl-audio__btn{
display:inline-flex; align-items:center; gap:10px;
padding:9px 16px 9px 13px; border:1px solid rgba(18,138,122,0.30);
background:linear-gradient(135deg, rgba(18,138,122,0.10), rgba(70,194,173,0.05));
color:var(--sj-teal,#128a7a); font:600 14px/1 inherit; border-radius:999px;
cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
body.page-modul #rich-blocks .rl-audio__btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(18,138,122,0.18);
background:linear-gradient(135deg, rgba(18,138,122,0.16), rgba(70,194,173,0.08));
}
body.page-modul #rich-blocks .rl-audio__btn:focus-visible{ outline:2px solid var(--sj-teal,#128a7a); outline-offset:2px; }
body.page-modul #rich-blocks .rl-audio__icon{ font-size:13px; line-height:1; }
body.page-modul #rich-blocks .rl-audio__wave{ display:none; align-items:flex-end; gap:2px; height:14px; }
body.page-modul #rich-blocks .rl-audio.is-playing .rl-audio__wave{ display:inline-flex; }
body.page-modul #rich-blocks .rl-audio__wave i{
width:3px; height:100%; border-radius:2px; background:var(--sj-teal,#128a7a);
transform-origin:bottom; animation:rlwave 0.9s ease-in-out infinite;
}
body.page-modul #rich-blocks .rl-audio__wave i:nth-child(2){ animation-delay:.15s; }
body.page-modul #rich-blocks .rl-audio__wave i:nth-child(3){ animation-delay:.3s; }
body.page-modul #rich-blocks .rl-audio__wave i:nth-child(4){ animation-delay:.45s; }
@keyframes rlwave{ 0%,100%{ transform:scaleY(0.35); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){
body.page-modul #rich-blocks .rl-audio__wave i{ animation:none; transform:scaleY(0.6); }
body.page-modul #rich-blocks .rl-audio__btn{ transition:none; }
}
/* ── Hero: levende video uten mørk gradient (brand-regel) ──────────────
Tekst plasseres naturlig på videoen, lesbarhet via lagdelt drop-shadow
— ALDRI mørk overlay/gradient bak teksten. */
body.page-modul #rich-blocks .rl-hero__overlay{
background: none !important;
/* hårfin bunn-vignett (kun nederste fjerdedel) — ikke en "boks" bak teksten.
Lesbarheten bæres primært av lagdelt drop-shadow under (brand-regel). */
background: linear-gradient(180deg, transparent 62%, rgba(13,33,55,0.22) 100%) !important;
}
/* Lagdelt skygge: en nær-solid glyph-halo (lokal kontrast på lyse partier)
pluss en mykere glød — gir lesbar hvit tekst uten mørk gradient-boks. */
body.page-modul #rich-blocks .rl-hero__title{
text-shadow: 0 1px 2px rgba(13,33,55,0.92), 0 2px 10px rgba(13,33,55,0.85), 0 4px 28px rgba(13,33,55,0.6) !important;
}
body.page-modul #rich-blocks .rl-hero__eyebrow,
body.page-modul #rich-blocks .rl-hero__lede{
text-shadow: 0 1px 2px rgba(13,33,55,0.92), 0 2px 10px rgba(13,33,55,0.8), 0 3px 18px rgba(13,33,55,0.55) !important;
}
/* videoen skal fylle hero-flaten pent */
body.page-modul #rich-blocks .rl-hero__video{
width:100%; height:100%; object-fit:cover;
}
/* ── Trykk-feedback (Emil Kowalski): knapper må føles trykkbare ──────────
scale(0.95–0.98) på :active gir umiddelbar taktil respons. Subtilt,
GPU-vennlig (kun transform), respekterer prefers-reduced-motion. */
body.page-modul .btn{ transition: transform 150ms var(--sj-ease,cubic-bezier(0.22,1,0.36,1)), box-shadow 150ms ease-out, background 150ms ease-out; }
body.page-modul .btn:active{ transform: scale(0.97) !important; }
body.page-modul #rich-blocks .rl-next:active{ transform: scale(0.97); }
body.page-modul #rich-blocks .rl-audio__btn{ transition: transform 150ms var(--sj-ease,cubic-bezier(0.22,1,0.36,1)), box-shadow .2s ease, background .2s ease; }
body.page-modul #rich-blocks .rl-audio__btn:active{ transform: scale(0.96); }
body.page-modul #rich-blocks .rl-quiz__option{ transition: transform 150ms var(--sj-ease,cubic-bezier(0.22,1,0.36,1)), border-color 150ms ease, background 150ms ease; }
body.page-modul #rich-blocks .rl-quiz__option:active:not(:disabled){ transform: scale(0.99); }
/* hover-løft kun på ekte hover-enheter (touch-tap gir ellers «stuck hover») */
@media (hover: hover) and (pointer: fine){
body.page-modul #rich-blocks .rl-audio__btn:hover{ transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce){
body.page-modul .btn:active,
body.page-modul #rich-blocks .rl-next:active,
body.page-modul #rich-blocks .rl-audio__btn:active,
body.page-modul #rich-blocks .rl-quiz__option:active:not(:disabled){ transform: none !important; }
}
/* ── Emil-runde 2: trim toppluft + snappy hover + touch-gating ─────────── */
/* (a) Mindre dødluft over leksjonsinnholdet i steg-modus — innholdet skal
starte høyere, ikke under folden. */
body.page-modul #view-rich { padding-top: 24px !important; }
body.page-modul .modul-head { margin-bottom: 18px; }
/* (3) Diskret diagram-hover skal være snappy (~220ms), ikke 0,5s. Den
kontinuerlige 3D-tilt-følgingen beholdes treg (egen regel, urørt). */
body.page-modul #rich-blocks .rl-concept__diagram {
transition: transform 220ms var(--sj-ease, cubic-bezier(0.22,1,0.36,1)),
box-shadow 220ms var(--sj-ease, cubic-bezier(0.22,1,0.36,1)) !important;
}
/* (4) Touch: nøytraliser «stuck hover» — hover-løft skal ikke henge igjen
etter tap på berøringsskjerm. */
@media (hover: none) {
body.page-modul #rich-blocks .rl-concept__diagram:hover,
body.page-modul #rich-blocks .rl-quiz__option:hover,
body.page-modul #rich-blocks .rl-dd2-item:hover,
body.page-modul #rich-blocks .rl-next:hover { transform: none !important; box-shadow: none; }
}
/* ════════════════════════════════════════════════════════════════════
LØFT FASE 1 — én rolig, fokusert leksjonsflate
Mål: drepe dødluft, samle topptekst+fremdrift+innhold til én helhet.
════════════════════════════════════════════════════════════════════ */
/* Fokusert innholdskolonne (leksjon = ett fokus, ikke full bredde) */
body.page-modul #view-head,
body.page-modul #view-rich {
max-width: 768px; margin-left: auto; margin-right: auto;
}
/* Kompakt topp: tittelen er en rolig etikett, ikke en halv-skjerm-H1 */
body.page-modul main.dash { padding-top: 22px !important; }
body.page-modul .modul-back { margin-bottom: 16px; }
body.page-modul .modul-head { margin-bottom: 14px !important; }
body.page-modul .modul-head__eyebrow {
font-size: 0.72rem !important; letter-spacing: 0.16em !important;
color: var(--sj-red) !important; margin-bottom: 4px !important;
}
body.page-modul #modul-title {
font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important;
line-height: 1.18 !important; letter-spacing: -0.015em !important;
margin: 0 !important; color: var(--sj-navy) !important;
}
/* Innholdet starter rett under toppen */
body.page-modul #view-rich { padding-top: 8px !important; }
/* Sticky, integrert fremdriftslinje — alltid synlig kontroll */
body.page-modul #rich-blocks .rl-progress {
position: sticky; top: 14px; z-index: 6;
}
/* ════════════════════════════════════════════════════════════════════════════
GLASS-MORPHISM PILLS · universelt (knapper · nav · faner · tilbake · chips)
Frostet glass over den cinematiske bakgrunnen. Lastes sist → vinner.
════════════════════════════════════════════════════════════════════════════ */
/* Alle knapper er piller */
body[class*="page-"] .btn { border-radius: 999px !important; }
/* Ghost-knapper + nav-CTA → frostet glass-pille */
body[class*="page-"] .k-nav .btn,
body[class*="page-"] .btn--ghost {
background: var(--sj-glass-bg) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
box-shadow: var(--sj-sheen), 0 10px 24px -16px rgba(13, 34, 55, 0.30) !important;
color: var(--sj-ink) !important;
transition: transform .22s var(--sj-ease), box-shadow .22s var(--sj-ease), background .22s var(--sj-ease) !important;
}
@media (hover: hover) {
body[class*="page-"] .k-nav .btn:hover,
body[class*="page-"] .btn--ghost:hover {
transform: translateY(-2px) !important;
background: var(--sj-glass-bg-strong) !important;
box-shadow: var(--sj-sheen), 0 18px 34px -16px rgba(13, 34, 55, 0.40) !important;
}
}
body[class*="page-"] .btn:active { transform: scale(0.97) !important; }
/* Primær-CTA → coral liquid-pille (solid + sheen + glød) */
body[class*="page-"] .btn--primary {
background: linear-gradient(135deg, var(--sj-red), #e23b48) !important;
border: none !important; color: #fff !important;
box-shadow: 0 14px 30px -12px rgba(196, 30, 45, 0.5), var(--sj-sheen) !important;
}
@media (hover: hover) {
body[class*="page-"] .btn--primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 20px 40px -14px rgba(196, 30, 45, 0.55), var(--sj-sheen) !important;
}
}
/* Segmenterte faner → glass pille-skinne med hvit aktiv-pille */
body[class*="page-"] .lb-tabs,
body[class*="page-"] .konk-tabs,
body[class*="page-"] .duell-toggle {
display: inline-flex !important; gap: 4px !important; padding: 4px !important; max-width: 100% !important;
background: rgba(13, 33, 55, 0.05) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
border: 1px solid rgba(13, 33, 55, 0.08) !important;
border-radius: 999px !important;
box-shadow: none !important;
}
body[class*="page-"] .lb-tab,
body[class*="page-"] .konk-tab,
body[class*="page-"] .duell-toggle__btn {
border: none !important; background: transparent !important;
border-radius: 999px !important; box-shadow: none !important;
color: var(--sj-ink) !important; font-weight: 600 !important;
transition: background .2s var(--sj-ease), color .2s, box-shadow .2s !important;
}
body[class*="page-"] .lb-tab[aria-selected="true"],
body[class*="page-"] .konk-tab[aria-selected="true"],
body[class*="page-"] .duell-toggle__btn[aria-pressed="true"] {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--sj-teal) !important;
box-shadow: 0 6px 16px -8px rgba(13, 34, 55, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* Tilbake-lenker → glass-pille */
body[class*="page-"] .gami-back,
body[class*="page-"] .pr-back,
body[class*="page-"] .modul-back {
display: inline-flex !important; align-items: center !important; gap: 7px !important;
padding: 9px 16px !important; border-radius: 999px !important;
background: var(--sj-glass-bg) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
box-shadow: var(--sj-sheen) !important;
color: var(--sj-ink) !important; text-decoration: none !important;
transition: transform .2s var(--sj-ease), box-shadow .2s var(--sj-ease) !important;
}
@media (hover: hover) {
body[class*="page-"] .gami-back:hover,
body[class*="page-"] .pr-back:hover,
body[class*="page-"] .modul-back:hover {
transform: translateX(-2px) !important;
box-shadow: var(--sj-sheen), 0 12px 24px -14px rgba(13, 34, 55, 0.34) !important;
}
}
/* Chips → glass-pille */
body[class*="page-"] .cin-chip,
body[class*="page-"] .dr-chip {
background: var(--sj-glass-bg) !important;
-webkit-backdrop-filter: var(--sj-glass-blur) !important;
backdrop-filter: var(--sj-glass-blur) !important;
border: 1px solid var(--sj-glass-edge) !important;
box-shadow: var(--sj-sheen) !important;
}
/* Mobil: fane-skinna blir full bredde med 3 like faner som wrapper (ikke klippes) */
@media (max-width: 560px) {
body[class*="page-"] .lb-tabs,
body[class*="page-"] .konk-tabs {
display: flex !important; width: 100% !important;
}
body[class*="page-"] .lb-tab,
body[class*="page-"] .konk-tab {
flex: 1 1 0 !important; min-width: 0 !important;
padding: 8px 6px !important; font-size: 0.82rem !important;
text-align: center !important; line-height: 1.15 !important; white-space: normal !important;
}
}
/* A11y: solide flater når bruker ber om redusert gjennomsiktighet */
@media (prefers-reduced-transparency: reduce) {
body[class*="page-"] .k-nav .btn,
body[class*="page-"] .btn--ghost,
body[class*="page-"] .lb-tabs,
body[class*="page-"] .konk-tabs,
body[class*="page-"] .duell-toggle,
body[class*="page-"] .gami-back,
body[class*="page-"] .pr-back,
body[class*="page-"] .modul-back,
body[class*="page-"] .cin-chip,
body[class*="page-"] .dr-chip {
background: #fff !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
}
/* ── Av-glass: flat editorial på kort-flater (gami/auth) — behold frostet header. 2026-06-03 ── */
.cin-glass,
body.page-daglig .daily-card,
body.page-daglig .question-card,
body.page-duell .lobby-card,
body.page-ai-instruktor .chat-window,
body.page-eksamen .question,
body.page-glemt-passord .container > div,
.cin-hero .dash-stat,
body.page-profil .stat-card {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: #fff !important;
}