/* * Kirkepakka — main.css (ETT tema, fem akser) * ============================================================ * TILPASNINGSSYSTEM. Alle farger/fonter/radier er CSS custom properties * som redefineres per attributt paa . INGEN hardkodede farger i * komponent-CSS. * * FEM ORTOGONALE AKSER (B7-beslutning 2026-08-25, fase 10b): * data-mode lys | moerk * data-farge 13 kuraterte paletter — eller «egen» (fri farge, avledet * server-side med garantert AA; se inc/farge.php) * data-fontpar 10 self-hostede fontpar (kategorinavn, aldri fontnavn i UI) * data-form skarp | myk | rund (radius-skala) * data-uttrykk rolig | markant | varm — SIGNATUREN: grunnflater, skygge- * stil, hero-form, typografi-tone. Ikke farge, ikke font. * * `data-uttrykk="rolig"` er standard og roerer ingenting (basislaget under * ER rolig). Fram til 2026-08 het aksen `data-profil` og bar OGSAA farge og * fonter — de er nå egne akser, slik at enhver kombinasjon er mulig. * * Attributtene settes server-side av temaet (kp_profile_attrs()), ikke av * localStorage — kirken velger utseende via konfigurasjon. * Fonter self-hostet (WOFF2 i assets/fonts/) — ingen Google Fonts-kall * (ytelse + GDPR). De fleste er variable: ett woff2 per subset dekker hele * vektspennet (font-weight-range). * ============================================================ */ /* —— Self-hostede fonter (variable, latin + latin-ext) —— */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* —— Fontpar «massiv» og «lun» (latin-subset dekker norsk æøå) —— massiv: Archivo Black (display, statisk sort-master → vidt vektspenn hindrer syntetisk bold) + Archivo (body, variabel). lun: Fraunces (display, variabel serif) + Karla (body, variabel). Én woff2 per familie, self-hostet (ingen Google Fonts-kall). */ @font-face{font-family:'Archivo Black';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/archivo-black-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/karla-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* —— Oevrige fontpar (self-hostet; kun lastet naar valgt) —— Ett latin-subset woff2 per familie (æøå dekket av U+0000-00FF); variable der mulig, statiske display-familier (Anton/Bebas Neue) og Barlow 400/700. Ingen Google Fonts-kall. Par: sonisk=Sora/Inter · kinetisk=Chivo/Manrope · plakat=Anton/Inter · smal=Bebas Neue/Barlow · roleg=Newsreader/Mulish · naer=Bitter/Source Sans 3. */ @font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/sora-latin.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2')} @font-face{font-family:'Chivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/chivo-latin.woff2) format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2')} @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin.woff2) format('woff2')} @font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-latin.woff2) format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400-latin.woff2) format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700-latin.woff2) format('woff2')} @font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format('woff2')} @font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/mulish-latin.woff2) format('woff2')} @font-face{font-family:'Bitter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/bitter-latin.woff2) format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/source-sans-3-latin.woff2) format('woff2')} /* —— EKTE KURSIV for de tre antikva-parene (roleg/lun/naer) —— Paletten «pergament» markerer med SKRIFTSNITTET (--aksent-stil, se :root). Uten en selvhostet kursiv skraastiller nettleseren den rette fila syntetisk — en skjev antikva, ikke en kursiv: ingen enkeltetasjes «a», ingen kalligrafiske forbindelser, og seriffene blir staaende feil vei. Paa en serif ser det billig ut, og det var nettopp derfor den kursive aksenten ikke kunne leveres paa noen av de ni foerste parene. AKSEVALGET ER MAALT, ikke prinsipielt. Nettleseren slaar optisk stoerrelse paa av seg selv (font-optical-sizing:auto), saa en kursiv UTEN `opsz` ved siden av en rett MED `opsz` kan sprike. Vi maalte bredden paa aksentordet ved 56 px, med og uten aksen: Newsreader 44,41 px uten opsz vs 44,91 px med → 1,1 % — ikke verdt 83 kB Fraunces 52,90 px uten opsz vs 49,85 px med → 5,8 % — verdt 36 kB Derfor: Newsreader-kursiven er hentet med bare `wght` (64,5 kB i stedet for 147 kB), Fraunces-kursiven MED `opsz` (81,7 kB) fordi opsz-spennet der er 9–144 og faktisk endrer formene. Bitter har ingen opsz-akse i det hele tatt. KOSTNADEN ER BETINGET: nettleseren laster en @font-face-fil foerst naar en regel faktisk ber om det snittet. Ingen av disse tre lastes ned paa et palett som ikke bruker kursiv — altsaa paa alt annet enn pergament i dag. Deskriptorene er FAMILIENES EGNE spenn, ikke de rette filenes: Newsreader rett er deklarert `400 600` (for smalt, se KPX-aliasene i uttrykk-preview.css), mens kursiven her er sann fra foerste stund. */ @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2')} @font-face{font-family:'Bitter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/bitter-italic-latin.woff2) format('woff2')} /* —— Fontpar «katedral»: EN antikva til alt, rett og kursiv —— Source Serif 4 (Adobe, OFL). Samme familie i display og broedtekst er hele poenget med paret — se begrunnelsen i kp_akse_fontpar() i inc/akser.php. Variabel 200–900, saa en display-vekt paa 400 er ekte og ikke en klemt bunn. latin-ext foelger med fordi paret skal baere navn som «Krakow» uten aa falle til Georgia; unicode-range gjoer at den aldri lastes paa en ren norsk side. BEGGE snittene er hentet uten `opsz` — det er DET som teller: rett og kursiv har samme aksesett, saa nettleserens automatiske optiske stoerrelse ikke kan faa de to til aa sprike (fella vi maalte paa Fraunces over). Vil vi ha optisk stoerrelse her, maa BEGGE filene hentes paa nytt, og paret vokser fra 184 kB til 463 kB. */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* ============================================================ TOKEN-ARKITEKTUR ============================================================ */ :root{ /* Spacing (8px-grid) */ --s-1:8px;--s-2:16px;--s-3:24px;--s-4:40px;--s-5:64px;--s-6:104px; /* Lerret og takt (uttrykks-notatet 07.09, §4.3). NYE tokens med DAGENS verdier som standard: `varm` og `markant` skal være pikselidentiske, så alt som avviker bor bak preview-flagget i uttrykk-preview.css. --wrap-pad leses KUN fra 900px og opp (se .kp-wrap under) — under det beholder lerretet dagens --s-3, slik at mobilmargen aldri kan bli et uttrykksvalg. --sect-y/--s-6 røres ikke: Nucleus-målingen sier de har MINDRE vertikal luft enn oss, luften skal bli bredere, ikke høyere. --grid-gap eies av KORTRADENE som i dag står på --s-3: .kp-taler__grid, .kp-stab__grid, kalenderens «kort»-variant og fellesskapets «flis». .kp-steg-grid (--s-2) og de responsive nedtrappingene er ikke med — de er egne beslutninger om tettere raster, ikke om lerretets luft. */ --wrap-max:1200px; --wrap-pad:var(--s-3); --grid-gap:var(--s-3); /* Motion */ --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-smooth:cubic-bezier(0.25,0.46,0.45,0.94); --dur-fast:150ms;--dur-normal:250ms;--dur-slow:450ms; /* Finish (fase 9b) — elevasjon/heving/gloed. Profil-uavhengig standard; data-mode setter skygge-styrken, profil-lagene (Frimodig/Bygd) redefinerer signaturen (hard offset vs. myk lagvis). --signal-rgb/--shadow-rgb loeses ved bruk (satt i modus-lagene). */ --kp-lift:translateY(-3px); /* kort-heving ved hover */ --kp-btn-lift:translateY(-1px); /* knapp-heving ved hover */ --kp-skygge:transparent; /* solid offset-skygge (kun Frimodig) */ --kp-signal-glow:0 12px 34px rgba(var(--signal-rgb),.32); /* Aksent-STIL paa markerte ord i overskrifter (.kp-merk). Uttrykket eier nivaaet; `normal` er standarden og et no-op for rolig/markant/varm. «pergament» setter `italic` — referansen (trondheim.katolsk.no) markerer med SKRIFTSNITTET der vi ellers markerer med palettens aksentfarge. KAPABILITET HOS FONTPARET, NIVAA HOS UTTRYKKET. Fire av ti fontpar har en selvhostet EKTE kursiv (roleg, lun, naer og katedral-paret); resten har ingen kursiv hos kilden i det hele tatt. `--kursiv` er fontparets svar paa «taaler jeg dette?», og pergament-laget ber om `var(--kursiv)` i stedet for `italic` rett ut. Et par uten ekte kursiv faar dermed OPPREIST skrift — ikke nettleserens syntetiske skraastilling, som paa en antikva ser billig ut (skjeve serifer, ingen ekte kursivformer). Se kp_akse_fontpar() i inc/akser.php: `kursiv: true/false` er samme sannhet i PHP. */ --aksent-stil:normal; --kursiv:normal; /* Fonter — default = «grotesk» (Bricolage Grotesque + Figtree). data-fontpar redefinerer. */ --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Figtree',system-ui,sans-serif; /* Form/radius — default = «myk». data-form redefinerer. */ --radius-kort:16px;--radius-knapp:10px;--radius-bilde:16px;--radius-felt:6px; /* Media-tokens — foto-oeyer (hero, foto-scrim). Alltid moerke i BEGGE moduser. */ --media-ink:#F4F2EC; --media-ink-dim:#D3D2D8; --media-ink-rgb:244,242,236; --media-line:rgba(244,242,236,.20); --media-floor:#101014; --media-floor-rgb:16,16,20; --scrim-rgb:10,10,13; /* —— TONE-SETT (fase 10c) — det AVLEDEDE temasettet en seksjon kan velge fra. Dette er de NØYAKTIG SAMME verdiene som modus-lagene under bruker (og som kp_akse_flater() i inc/akser.php er sannhetskilde for) — bare navngitt, slik at [data-tone] kan plukke lys- eller moerk-settet uavhengig av sidens modus. Derfor er en tone-flippet seksjon AA-trygg by construction: den bruker et token-sett som allerede er validert mot alle 12 palettene, og fri-farge- motoren loeser accent-deep mot verst_lys OG accent-bright mot verst_mork ved hver lagring — begge polariteter finnes alltid. Verdiene under er «rolig»; markant/varm redefinerer i sine egne lag. */ --t-lys-bg:#F4F1EA;--t-lys-surface:#FBF9F4;--t-lys-surface-2:#E7E2D6; --t-lys-text:#201E24;--t-lys-text-dim:#56545C; --t-lys-text-rgb:32,30,36;--t-lys-bg-rgb:244,241,234;--t-lys-shadow-rgb:60,50,40; --t-lys-line:rgba(32,30,36,.16);--t-lys-skygge:#201E24; --t-mork-bg:#101014;--t-mork-surface:#1A1B21;--t-mork-surface-2:#22232B; --t-mork-text:#F4F2EC;--t-mork-text-dim:#A8A8B0; --t-mork-text-rgb:244,242,236;--t-mork-bg-rgb:16,16,20;--t-mork-shadow-rgb:0,0,0; --t-mork-line:rgba(244,242,236,.14);--t-mork-skygge:#F4F2EC; } /* ============================================================ AKSE 2: FARGE (data-farge) — 13 kuraterte paletter, globale ============================================================ Modus-uavhengige aksentfamilier. Paletten eier BARE fargen; grunnflater og signatur bor i uttrykk-aksen. Alle 13 er tilgjengelige uansett uttrykk (foer 10b var 4 av dem laast til hver profil). bright = uttrykket paa MOERK flate (moerk modus + hero/nyhetsbrev-oeyer) deep = uttrykket paa LYS flate — MAA vaere tekstsikkert (>=4.5:1) AA-maalt i design-loopen (fase 8b/9b). «egen» (fri farge) settes ikke her: den avledes server-side og skrives som inline