/* ============================================================ stil-kirke-tema.css — Church-lab-drakten på Eventlab-appen ============================================================ Dette er ombyggingen av Index.html fra Eventlab til Church-lab. Den er én fil, og den gjør én ting: bytter VERDIENE på designtokens. Ingen ny komponent, ingen ny layout, ingen overstyring av en enkelt flate. HVORFOR DET HOLDER Eventlab er bygget som et tokensystem (docs/DESIGN.md §0 og §2): alle de tolv stilarkene leser var(--primary), var(--bg), var(--st-ok-bg) og så videre, og «ny kode skal ikke inneholde nye hex-verdier». Design-handoffen er tegnet oppå nettopp dette skallet — turn 1 i Churchlab.dc.html heter «Eventlab- skallet med ny fargeprofil», og skjermkartet i github.md peker rett på .orgp-header, .orgp-nav.orgp-skinne og .kort. Den 92 px ikonskinna, den mørke topbaren og kortgeometrien finnes altså allerede. Det som skulle endres var fargene — og da er det tokens som skal endres, ikke flater. Konsekvensen er at HVER fane følger med: tidslinje, bemanning, budsjett, orgkart, support, mobilvisningen og de fire desktop-lastede stilarkene. En modul som var riktig tokenisert i Eventlab er riktig tematisert her uten at noen har rørt den. En modul som ikke er det, avslører seg som en rød flekk — og det er en nyttig test i seg selv. REKKEFØLGE Lastes SIST i Index.html, etter css/stil-tema.css. Fila definerer bare :root og body.dark-mode, aldri en komponentregel, så den kan ikke stjele kaskaden fra primitivene — den bytter bare hva primitivene tegner MED. VERDIENE er fasit fra design-handoffen (Churchlab.dc.html, :root og .tema-mork). Token-navnene er Eventlabs, urørt. MERK: dette er en av svært få Church-lab-filer som virker på delte filer. Den gjør det uten å endre dem — derfor merger den alltid rent. ============================================================ */ /* ══ LYS ═════════════════════════════════════════════════════════════════ */ :root { /* ── Merkefargen ──────────────────────────────────────────────────────── Eventlab er merkerød #F71B00. Church-lab er kirkegrønn. Alt som var «det viktigste på skjermen» — primærknapp, aktiv fane, fokusring, live-markør — blir grønt i samme slengen. */ --primary: #4F8A74; --primary-dark: #3A6B59; /* --primary-dark-adaptiv er merkefargen SOM TEKST (docs/DESIGN.md §2): den brukes på --primary-pill i aktive nav-knapper og merker, der --primary selv ikke har nok kontrast. Grønn trenger samme skille som rød gjorde. */ --primary-dark-adaptiv: #3A6B59; --primary-pill: #EAF1EC; /* rgb-trippel av --primary, til rgba(). Alle de tidligere hardkodede rgba(247,27,0,A) i Eventlab-CSS-en leser denne nå. */ --primary-tint: 79, 138, 116; /* ── Grunnflatene ────────────────────────────────────────────────────── Eventlabs cream (#FFF2E9) er varm og rosa-bøyd fordi den står ved siden av rødt. Church-labs er varm og gul-bøyd, som står til grønt. Samme rolle, samme kontrastforhold. */ --bg: #FAF7ED; --bg2: #F1EDE1; --surface: #FFFFFF; --paper: #FDFBF5; /* ── Tekst og linjer ─────────────────────────────────────────────────── Merk at --text ikke er nøytral sort, men har et grønnstikk (#2C332E) — akkurat som Eventlabs #1D1D1D lener mot varmt. En nøytral grå tekst på en farget grunn ser skitten ut; huebiaset skal følge grunnen. */ --text: #2C332E; --text-muted: #68716A; --ink-soft: #4C554F; --border: #DDE6DF; --line-soft: #CBD8CF; /* ── Mørke flater ────────────────────────────────────────────────────── Topbaren og kommandopulten. Ikke sort, men den mørkeste grønntonen — ellers står de som et fremmedlegeme på den varme grunnen. */ --header-dark: #2C332E; --bg-panel: #2C332E; --pult-bg: #2C332E; --pult-kant: #3C443E; /* ── Status ──────────────────────────────────────────────────────────── ÉN grønn, ÉN amber, ÉN rød (docs/DESIGN.md §2). Den grønne måtte flyttes: Eventlabs #047857 satt trygt ved siden av rødt, men ved siden av en grønn merkefarge kan «godkjent» ikke ha samme hue som «primærknapp» — da sier fargen ingenting. #0F6B4A er mørkere og kaldere enn --primary, så de to ikke forveksles. Bakgrunnene er urørt fra handoffen. */ --st-ok-bg: #DCF5E7; --st-ok-tekst: #0F6B4A; --st-ok-tint: 15,107,74; --st-obs-bg: #FEF3C7; --st-obs-tekst: #B45309; --st-obs-tint: 180,83,9; --st-feil-bg: #FDECEA; --st-feil-tekst: #B42318; --st-feil-tint: 180,35,24; --st-ok-tekst-adaptiv: #0F6B4A; --st-obs-tekst-adaptiv: #B45309; --st-feil-tekst-adaptiv: #B42318; /* Amber er dempet (#B45309, ikke #F59E0B): den brukes både som tekst og som fyll i tynne fremdriftslinjer, og den klare varianten er uleselig som tekst. */ --amber: #B45309; --amber-soft: rgba(180, 83, 9, .15); --amber-text: #8A4009; /* Overlay og fokus følger den nye teksten og pilla. */ --overlay-bg: rgba(44, 51, 46, .45); --fokus-ring: 0 0 0 3px var(--primary-pill); /* ── --el-*: de 13 komponentskopene ──────────────────────────────────── Disse er bevisst LITERALER i Eventlab (årshjul, racesim, mobil-org m.fl.), nettopp fordi de flatene skal forbli cream også i mørk modus. De må derfor byttes her også — ellers blir de øyene som fortsatt er røde. */ --el-cream: #FAF7ED; --el-cream-2: #F1EDE1; --el-cream-3: #FFFCF6; --el-paper: #FFFFFF; --el-ink: #2C332E; --el-ink-2: #3C443E; --el-ink-3: #4C554F; --el-muted: #68716A; --el-line: #DDE6DF; --el-line-2: #BCC8BF; --el-red: #4F8A74; /* «--el-red» er merkefargen, ikke rødt */ --el-red-dark: #3A6B59; --el-red-soft: rgba(79, 138, 116, .12); --el-amber: #D99B47; --el-amber-soft: rgba(217, 155, 71, .20); --el-emerald: #0F6B4A; --el-emerald-soft: rgba(15, 107, 74, .14); } /* ══ MØRK ════════════════════════════════════════════════════════════════ Eventlabs mørke modus redefinerer kjernevariablene i body.dark-mode. Her gjøres det samme med kirkeverdiene — med ett bevisst avvik fra handoffen, forklart ved --primary under. */ body.dark-mode { /* --primary LYSNES IKKE i mørk modus, i motsetning til i design-handoffen. Grunnen er at Eventlab bruker --primary som KNAPPEFYLL med hvit tekst (.ev-dash-nytt, .aktiv m.fl.), mens handoffen har en egen --primary-btn til det og bare bruker --primary som flate. Målt med hvit tekst: #F71B00 (Eventlab) 4,11:1 ← grunnlinja appen er bygget mot #4F8A74 (handoff) 3,98:1 ← praktisk talt samme #5FA287 (lysnet) 3,00:1 ← for lavt, og røyktesten fanget det #4F8A74 måler samtidig 4,49:1 mot den mørke grunnen, så den er fortsatt tydelig som flate. Lysningen ville løst et problem appen ikke har, og laget et den har. */ --primary: #4F8A74; --primary-dark: #3A6B59; /* 5,6:1 mot pilla under, 7,1 mot --surface. Samme rolle som #FF8A75 hadde. */ --primary-dark-adaptiv: #8FD3B4; --primary-pill: #28362F; --bg: #151816; --bg2: #1C201D; --surface: #212722; --bg-panel: #151816; --paper: #212722; --text: #ECEFEA; --text-muted: #9AA39C; --text-secondary: var(--text-muted); --ink-soft: #C2C9C4; --border: rgba(255, 255, 255, .11); --line-soft: rgba(255, 255, 255, .08); --header-dark: #101311; /* Pulten er «mørk flate på cream». Når grunnen selv er nesten like mørk, må pulten LØFTES for å beholde skillet — ikke beholde sin lyse verdi. */ --pult-bg: #2B322D; --pult-kant: #3E473F; --st-ok-tekst-adaptiv: #6EE7B7; --st-obs-tekst-adaptiv: #FCD34D; --st-feil-tekst-adaptiv: #F87171; --amber: #FCD34D; --amber-soft: rgba(252, 211, 77, .16); --amber-text: #F0C24B; --overlay-bg: rgba(10, 13, 11, .55); /* Aksentblå som tekst på mørkt — uendret rolle fra Eventlab. */ --accent: #60A5FA; --el-line-2: rgba(255, 255, 255, .14); } /* ══ PINNEDE SCOPES ══════════════════════════════════════════════════════ Noen flater PINNER paletten i stedet for å arve den, og en :root-overstyring når dem derfor ikke — det er nettopp poenget med å pinne. Uten denne seksjonen sto hele org-siden rød mens resten av appen var grønn. #org-page, #landing-screen, #support-skjerm (css/stil-orgflater.css) Lyse i lys modus uansett. Følger dark-mode via egne motregler. #public-screen Offentlige delelenker — lyse i BEGGE temaer, fordi leseren ikke er innlogget og ikke har noen bryter. #aiPanel (css/stil-base.css) Samme grunn: panelet er lyst uansett tema. Selektorene er ordrett de samme som i kildefilene. Identisk selektor + senere kildeorden = denne vinner, uten !important og uten å heve spesifisiteten. Røres selektorene der, må de røres her — vakten er test-kirke-drakt.mjs, som feiler hvis en pinnet flate blir rød igjen. */ body:not(.dark-mode) #org-page, body:not(.dark-mode) #landing-screen, body:not(.dark-mode) #support-skjerm, #public-screen, #aiPanel { --primary: #4F8A74; --primary-dark: #3A6B59; --primary-dark-adaptiv: #3A6B59; --primary-pill: #EAF1EC; --primary-tint: 79, 138, 116; } /* Cream-paletten på de samme flatene. Verdiene er Church-labs, ikke Eventlabs rosa-bøyde cream — flatene skal se ut som resten av menigheten, ikke som en tredje ting. Kontrastkravene fra kildefila holdes: --text-muted måler 5,4:1 mot lerretet og 5,9:1 mot de hvite kortene (Eventlabs #6F6053 ga 5,2/5,8). */ body:not(.dark-mode) #org-page, body:not(.dark-mode) #landing-screen, body:not(.dark-mode) #support-skjerm, #public-screen { --bg: #FAF7ED; --bg2: #F1EDE1; --paper: #FAF7ED; --surface: #FFFFFF; --bg-panel: #FFFFFF; --card: #FFFFFF; --card-hover: #F8FBF8; --text: #2C332E; --text-muted: #636B64; --text-secondary: #636B64; --border: #DDE6DF; --line-soft: #CBD8CF; } /* ══ MERKET ══════════════════════════════════════════════════════════════ Oppstartsflata og lasteskjermene tegner Eventlab-merket med sin egen bakgrunn. Geometrien byttes i JS (app-kirke-merke.js); flisefargen står her, så den følger tokenet som alt annet. */ .oppstart, .elab-merke--laster { background: var(--header-dark); } /* ══ FANEIKONET I NETTLESEREN ════════════════════════════════════════════ theme-color i Index.html er statisk markup og kan ikke tokeniseres. Den er byttet der, sammen med apple-mobile-web-app-title. */ /* ── MOBIL-APPEN ─────────────────────────────────────────────────────────── app-mobile.js har sitt EGET tokensystem (--mb-*) og injiserer det som et