/* =======================================================================
roalds-overstyr.css — designsystemets siste ord
HVORFOR DENNE FILA FINNES
roalds-front.css lastes som stilark nr. 2 av 21. Alt det er ment å
overstyre lastes ETTER: WooCommerce (3–5), Elementor (8), kit 208 (9),
widget-stilene (10–14), sidemalene (15, 18–19). Ved lik spesifisitet
vinner den som lastes sist — altså taper designsystemet som standard.
Det er derfor roalds-front.css har 78 selektorer med doblet klasse
(.elementor-212.elementor-212 og lignende). Doblingen er en spesifisitets-
heis, ikke et designvalg, og den må huskes hver gang noen skriver en ny
regel.
Denne fila skrives ut SIST i , etter alt Elementor og WooCommerce
legger inn. Regler her trenger derfor ingen dobling — vanlig spesifisitet
holder.
NÅR SKAL EN REGEL HIT?
Bare når den må slå Elementor, kit-en eller WooCommerce. Alt annet —
tokens, komponenter, typografi, layout — hører hjemme i roalds-front.css
der det er lettere å finne.
MERK OM DE 78 EKSISTERENDE
De er IKKE flyttet hit. De virker som de er, og å flytte dem uten å
sammenligne hver side før og etter ville byttet en kjent, ufarlig
redundans mot en ukjent risiko. Flytt dem gjerne — men én blokk om
gangen, med visuell kontroll av de berørte sidene.
======================================================================= */
/* -----------------------------------------------------------------------
Samarbeidsportalen (moduler/samarbeid-portal.php)
Siden er en vanlig side, men Elementors kit-CSS lastes etter
roalds-front.css og vinner ved lik spesifisitet. Reglene hører derfor hit.
----------------------------------------------------------------------- */
.rt-portal {
max-width: 720px;
margin: 0 auto;
}
.rt-portal-sok label {
display: block;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 4px;
}
.rt-portal-hjelp {
color: var(--rt-dempet, #6b6760);
font-size: 0.95rem;
margin: 4px 0 0;
}
.rt-portal-rad {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0;
}
.rt-portal-rad input[type="search"],
.rt-portal-rad input[type="email"],
.rt-portal-rad input[type="text"] {
flex: 1 1 260px;
min-width: 0;
padding: 13px 15px;
font-size: 1rem;
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 3px;
background: #fff;
}
/* Svaret skal leses på ett blikk — ja eller nei, før noe annet. */
.rt-portal-svar {
margin: 28px 0;
padding: 22px 24px;
border-radius: 5px;
border: 1px solid var(--rt-linje, #dcd8ce);
background: var(--rt-kort, #fdfcf9);
}
.rt-portal-svar h2 {
margin-top: 0;
}
.rt-portal-ja {
border-left: 4px solid var(--rt-messing, #7a6413);
}
.rt-portal-sats {
font-size: 1.1rem;
font-weight: 600;
color: var(--rt-messing, #7a6413);
}
/* Husstandssetningen er det viktigste avsnittet på siden: uten den tror
forelderen at avtalen bare gjelder henne selv. */
.rt-portal-husstand {
margin: 16px 0;
padding: 14px 16px;
background: var(--rt-stripe, #efece5);
border-radius: 4px;
}
.rt-portal-kode {
margin-top: 18px;
}
.rt-portal-kodetekst {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 12px 18px;
background: var(--rt-stripe, #efece5);
border-radius: 4px;
display: inline-block;
margin: 6px 0;
}
.rt-portal-kvitt {
margin: 28px 0;
padding: 22px 24px;
border-radius: 5px;
background: var(--rt-stripe, #efece5);
}
.rt-portal-fortaler {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--rt-linje, #dcd8ce);
}
.rt-portal-fortaler h3 {
margin: 0 0 6px;
}
.rt-portal-liste .rt-portal-kort {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.rt-portal-kort-en {
padding: 18px;
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 4px;
background: var(--rt-kort, #fdfcf9);
}
.rt-portal-kort-en h3 {
margin-top: 0;
}
/* Adminhintet: skal ikke kunne forveksles med noe den besøkende ser. */
.rt-portal-adminhint {
margin: 0 0 18px;
padding: 14px 16px;
border-left: 4px solid #d63638;
background: #fcf0f1;
border-radius: 4px;
font-size: 0.95rem;
}
.rt-portal-adminhint p {
margin: 0 0 8px;
}
.rt-portal-adminhint ul {
margin: 0 0 8px;
padding-left: 20px;
}
.rt-portal-arbeidsgiver {
margin-top: 14px !important;
padding-top: 12px;
border-top: 1px dashed var(--rt-linje, #dcd8ce);
}
/* Søknadsskjemaet */
.rt-soknad-skjema h2 {
margin: 28px 0 4px;
font-size: 1.15rem;
}
.rt-soknad-rad {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.rt-soknad-felt {
flex: 1 1 240px;
min-width: 0;
margin-bottom: 12px;
}
.rt-soknad-felt label {
display: block;
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 4px;
}
.rt-soknad-felt input,
.rt-soknad-felt select,
.rt-soknad-felt textarea {
width: 100%;
padding: 11px 13px;
font-size: 1rem;
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 3px;
background: #fff;
font-family: inherit;
}
.rt-valgfri {
font-weight: 400;
color: var(--rt-dempet, #6b6760);
}
/* Svaret fra Enhetsregisteret under organisasjonsnummeret. */
.rt-soknad-hint {
display: block;
margin-top: 4px;
font-size: 0.9rem;
color: var(--rt-messing, #7a6413);
min-height: 1.2em;
}
.rt-soknad-samtykke {
margin: 18px 0;
padding: 14px 16px;
background: var(--rt-stripe, #efece5);
border-radius: 4px;
}
.rt-soknad-samtykke label {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.95rem;
}
/* Honninggryta: ekte brukere ser den aldri. Ikke display:none — enkelte bots
hopper over skjulte felt nettopp fordi de er skjult på den måten. */
.rt-portal-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* -----------------------------------------------------------------------
Kurspåmelding (moduler/kursskjema.php)
Gjenbruker .rt-soknad-* for kontaktfeltene. Det som er nytt her er
valggruppene: dette skjemaet er nesten bare avkryssing, og alternativene
skal kunne leses på ett blikk — de ER kartleggingen.
----------------------------------------------------------------------- */
.rt-kursskjema {
max-width: 720px;
margin: 0 auto;
scroll-margin-top: 90px; /* den klebrige toppmenyen skjuler ellers overskriften */
}
.rt-kursskjema-tittel {
margin-top: 0;
}
.rt-kursskjema-ingress {
color: var(--rt-sekundaer, #4a4740);
margin-bottom: 24px;
}
.rt-kursskjema-form h3 {
margin: 30px 0 10px;
font-size: 1.1rem;
}
.rt-kursskjema-gruppe {
margin: 0 0 22px;
padding: 0;
border: 0;
}
.rt-kursskjema-gruppe legend {
padding: 0;
font-weight: 600;
font-size: 0.95rem;
}
.rt-kursskjema-hjelp {
display: block;
margin: 2px 0 8px;
color: var(--rt-dempet, #6b6760);
font-size: 0.9rem;
}
.rt-kursskjema-valg {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 8px;
}
/* Avkryssingslistene er lange (åtte tema). To kolonner der det er plass, så
hele spørsmålet er synlig uten å rulle. Radioknappene står i én kolonne —
der er alternativene setninger, ikke stikkord. */
@media (min-width: 620px) {
.rt-kursskjema-valg.er-flervalg {
grid-template-columns: 1fr 1fr;
}
}
/* Hele raden er klikkflate. På mobil er en 16 px radioknapp et bomskudd. */
.rt-kursskjema-alt {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 11px 14px;
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 4px;
background: var(--rt-kort, #fdfcf9);
font-size: 0.97rem;
line-height: 1.35;
cursor: pointer;
}
.rt-kursskjema-alt:hover {
border-color: var(--rt-messing, #7a6413);
}
.rt-kursskjema-alt input {
margin: 2px 0 0;
flex: 0 0 auto;
accent-color: var(--rt-messing, #7a6413);
}
/* :has() dekkes av alle nettlesere fra des. 2023. Faller den bort, mister
valget bare uthevingen — avkryssingen vises fortsatt av selve boksen. */
.rt-kursskjema-alt:has(input:checked) {
border-color: var(--rt-messing, #7a6413);
background: var(--rt-stripe, #efece5);
}
.rt-kursskjema-alt:has(input:focus-visible) {
outline: 2px solid var(--rt-messing, #7a6413);
outline-offset: 2px;
}
.rt-kursskjema-fritekst {
margin-top: 4px;
}
.rt-kursskjema-kvitt {
margin: 28px auto;
padding: 24px 26px;
border-radius: 5px;
border-left: 4px solid var(--rt-messing, #7a6413);
background: var(--rt-stripe, #efece5);
}
.rt-kursskjema-kvitt h2 {
margin-top: 0;
}
/* -----------------------------------------------------------------------
Avtalefeltet i handlekurven (moduler/avtale-pris.php)
Ligger inne i WooCommerce' kurvmal, så Woos egne skjema- og knappestiler
lastes etter designsystemet og vinner uten disse reglene.
----------------------------------------------------------------------- */
.rt-avtale-felt {
margin: 0 0 20px;
padding: 16px 18px;
background: var(--rt-kort, #fdfcf9);
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 4px;
}
.rt-avtale-felt p {
margin: 0;
}
.rt-avtale-hjelp {
margin-bottom: 8px !important;
color: var(--rt-sekundaer, #4a4740);
font-size: 0.95rem;
}
.rt-avtale-rad {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rt-avtale-rad input[type="text"] {
flex: 1 1 180px;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--rt-linje, #dcd8ce);
border-radius: 3px;
background: #fff;
}
/* Aktiv avtale: bekreftelsen skal leses som et faktum, ikke som et skjema. */
.rt-avtale-aktiv {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: var(--rt-messing, #7a6413);
}
.rt-avtale-fjern {
padding: 0;
border: 0;
background: none;
color: var(--rt-dempet, #6b6760);
font-size: 0.9rem;
text-decoration: underline;
cursor: pointer;
}
/* Ordinærprisen gjennomstreket ved siden av avtaleprisen på kurvlinjen.
Uten dette ser kunden bare ett tall og kan ikke se at avtalen virket. */
.woocommerce .rt-pris-for,
.rt-avtale-felt ~ * .rt-pris-for {
color: var(--rt-dempet, #6b6760);
font-weight: 400;
}
.woocommerce .rt-avtalepris {
font-weight: 600;
}
/* -----------------------------------------------------------------------
Klasse-heroen (rt-bildehero) på mobil — /klasse-b/, /tilhenger/,
/motorsykkel/ (17. aug 2026)
roalds-front.css låser heroen til 480 px (`height: 480px !important`) og
den indre containeren til `height: 100% !important`. Elementor gir alle
containere `flex-wrap: wrap` som mobilstandard. I en kolonne-container
med LÅST høyde betyr wrap at det som ikke får plass i høyden legges i en
ny kolonne til høyre — utenfor skjermen. Kicker + H1 på tre linjer +
ingress + to knapper er mer enn 480 px på 375 px bredde, så CTA-knappene
havnet på x=365 (målt på /motorsykkel/ og /tilhenger/).
Fiks: la heroen VOKSE på mobil (min-height i stedet for height) og slå
av wrap. Reglene her må ha !important og minst samme spesifisitet som
dem de slår, fordi de slås mot !important i roalds-front.css.
----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
Overskrifter (SEO fase B4, 17. aug 2026)
1) Cookie-bannerets titler er i stedet for
(moduler/elementor.php). WPConsents CSS traff dem via
`.wpconsent-preferences-content h2 {margin:0}` og
`.wpconsent-preferences-header h2 {order:2}` — gjenta for id-ene.
2) Klassekortene på /kurs/ har (var h3, som
hoppet over h2 rett etter H1). Kit 208 setter h2-typografi med
(0,1,1)-spesifisitet og lastes etter roalds-front.css — derfor her,
med høyere spesifisitet, samme utseende som før.
----------------------------------------------------------------------- */
#wpconsent-banner-title,
#wpconsent-preferences-title {
margin: 0;
}
.wpconsent-preferences-header #wpconsent-preferences-title {
order: 2;
}
.rt-kurs-kort h2.rt-kurs-kort-tittel {
margin: 0;
font: 500 20px/1.2 Inter, sans-serif;
letter-spacing: normal;
text-transform: none;
}
@media (max-width: 767px) {
.e-con.e-con.e-con.rt-bildehero,
.rt-bildehero {
height: auto !important;
min-height: 480px;
}
.e-con.e-con.e-con.e-con.e-con.e-con.rt-bildehero-innhold,
.rt-bildehero-innhold {
height: auto !important;
min-height: 480px;
padding-top: 44px;
padding-bottom: 44px;
flex-wrap: nowrap !important;
}
}
/* -----------------------------------------------------------------------
Produktkortene på kategorisidene (moduler/produkter.php, D4 22. aug 2026)
Der er kortnavnet en , og kit 208 setter farge på h2 med høyere
spesifisitet (.elementor-kit-208 h2 = 0,1,1) enn .rt-bk-navn (0,1,0).
Verdien er identisk i dag (#201E1D = --rt-blekk), så ingenting synes — men
byttes kit-fargen, ville kortnavnene skiftet farge uten at noen rørte
suiten. Regelen her låser utseendet til klassen, uansett tag.
----------------------------------------------------------------------- */
.rt-butikk-kort h2.rt-bk-navn {
margin: 0;
font: 500 18px/1.3 Inter, sans-serif;
color: var(--rt-blekk);
}
/* -----------------------------------------------------------------------
Toppmenyen (Elementor-mal 241) — seks punkter på én linje (sept. 2026)
Raden brakk over to linjer på ALLE skjermbredder, også 1920 px: ni
menypunkter, kurv og to knapper trengte ~1 336 px, og malens beholder
(.e-con-inner) er låst til 1 300 px. Løsningen er strukturell, ikke CSS —
Gavekort og Delbetaling ligger nå under «Priser», Samarbeidsavtaler under
«Om oss» (Utseende → Menyer, WP-menyen «Hovedmeny»). Med seks punkter og
knappene på én linje trenger raden ~1 190 px, målt på den ekte siden.
Regelen her er sikringen rundt det: knappene («Elev-innlogging», «Bestill
opplæring») og ordmerket deles aldri over to linjer. Før ryddingen sto
«Elev-» / «innlogging» på to linjer også på skrivebord, fordi menyen
presset handlingskolonnen sammen. Gjelder alle bredder; den gamle varianten
lå i nettbrett-blokken i roalds-front.css og dekket ikke skrivebord.
Ikke løst her: mellom 1 025 og ~1 190 px (Elementors nettbrett-grense og
det raden trenger) brekker fortsatt siste punkt. Ingen vanlig enhet ligger
der; vil man tette det, er veien Elementors «Laptop»-brekkpunkt satt til
1 190 px og hamburger fra det, ikke mer CSS.
----------------------------------------------------------------------- */
.elementor-241 .elementor-element-4cfb43d .elementor-button,
.elementor-241 .elementor-element-ff9b03f .elementor-heading-title {
white-space: nowrap;
}
/* Handlingskolonnen (kurv + de to knappene) er låst til --width: 340px i
malen, men kurv, «Elev-innlogging» og «Bestill opplæring» på én linje
trenger ~373 px. Låst bredde + nowrap ga knapper som stakk ut av kolonnen
(målt: 3 px forbi kanten, og 1 px overlapp mellom knappene). Kolonnen får
derfor følge innholdet sitt; menyen har plass til overs nå. Samme selektor
som malens egen regel, så det er lasterekkefølgen som avgjør. */
.elementor-241 .elementor-element.elementor-element-7d21dae {
--width: auto;
width: auto;
flex: 0 0 auto;
}