/* ════════════════════════════════════════════════════════════════════════ Andinas Køreskole — hero.css ──────────────────────────────────────────────────────────────────────── KONTROLPANEL FOR HELE TOPBOKSEN (hero'en) PÅ ALLE SIDER. Denne fil erstatter de to gamle filer hero-overlay.css og hero-label.css. De er lagt sammen 13-08-2026, så ALT om topboksen nu står ét sted. Topboksen er den store sektion øverst med billede eller video, hvor der står en lille orange linje, en stor overskrift, en undertekst, to knapper og en stjernelinje: ┌──────────────────────────────────────────────┐ │ <- 0. kassen│ │ KØREKORT I AARHUS C <- 1. lille linje │ │ Gennemskuelige priser <- 2. overskrift │ │ Ingen skjulte gebyrer… <- 3. undertekst │ │ [Tilmeld dig] [Ring] <- 4. knapper │ │ ★★★★★ 5,0 på Google <- 5. stjerner │ └──────────────────────────────────────────────┘ ✅ DETTE ER DET ENESTE STED, DE SEKS DELE STYRES. Både på computer og på mobil. Ret et tal her, og det slår igennem på alle sider på én gang. INDSÆT som den ALLERSIDSTE i på hver side: ⚠ Når du har rettet noget her, så tæl tallet i "?v=11" én op på alle sider (fx til ?v=12) — HVER GANG, også ved små rettelser. Ellers henter browseren ikke filen forfra, og du ser din egen gamle version, selvom den nye ligger på serveren. ⚠ Knapperne i topboksen hedder "topknap" — IKKE "hero-knap". De to er ikke det samme. "hero-knap" er de knapper, der ligger nede i kortene og sektionerne længere nede på siderne, og dem styres IKKE herfra. ════════════════════════════════════════════════════════════════════════ */ /* ╔════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ▼ ▼ ▼ RET KUN HERINDE ▼ ▼ ▼ ║ ║ ║ ╚════════════════════════════════════════════════════════════════════╝ */ :root { /* ══════════════════════════════════════════════════════════════════ 0) SELVE KASSEN Billedet øverst og den usynlige ramme, teksten ligger i. Her styres billedets højde, hvor teksten står, og hvor mørkt billedet dæmpes, så den hvide tekst kan læses. ══════════════════════════════════════════════════════════════════ */ /* — Billedet — */ /* Billedets højde. clamp(mindst, skaleret, størst) betyder: højden vokser med skærmen, men aldrig under det første og aldrig over det sidste tal */ --hk-billedhoejde: clamp(230px, 47vh, 530px); /* Hvilket udsnit af billedet der vises, når det beskæres. Første tal = venstre/højre · andet tal = op/ned center 38% = lidt over midten (nuværende) center 50% = præcis midten · center 20% = højere oppe */ --hk-billedudsnit: center 38%; /* Den mørkeblå dæmpning hen over billedet, så teksten kan læses. Sidste tal er styrken: 0 = ingen dæmpning · 0.6 = nuværende · 0.8 = mørkere · 0.3 = lysere */ --hk-daempning: rgba(9, 21, 49, 0.6); /* — Tekstens placering i kassen — */ /* Lodret placering på computer. flex-start = teksten er forankret i TOPPEN (nuværende). Overkanten står samme sted på alle sider, uanset hvor lang teksten er. Bliver en overskrift til to linjer, vokser den nedad — toppen flytter sig ikke. Hvor langt nede toppen ligger, justeres med --hk-tekst-juster lidt længere nede. center = teksten centreres i billedet (det gamle). Så vokser en to-linjers tekst i BEGGE retninger, og overskriften rykker sig lidt op på de sider, hvor teksten er lang. flex-end = teksten forankres i bunden */ --hk-placering-desktop: flex-start; /* Lodret placering på mobil (til og med 899px). flex-end = i bunden (nuværende) · center = midt i billedet */ --hk-placering-mobil: flex-end; /* Hvor bredt teksten må gå, før den centreres på store skærme */ --hk-maxbredde: 1400px; /* — Luft indeni kassen — */ /* På computer: hvor langt NED i billedet teksten begynder. Teksten er forankret i toppen, så den vokser nedad. Men hvor skal toppen så ligge? Svaret er: præcis dér, hvor teksten lå i forvejen — dengang den blev centreret i billedet. Det regnes ud fra en "typisk" topboks herunder. Sider med kort tekst flytter sig derfor slet ikke, og sider med to linjer beholder samme top og vokser nedad i stedet for opad. Det er en BEREGNING og ikke et fast antal pixels, fordi billedet er lavere på små skærme. Beregningen følger med ned; et fast tal kunne få teksten til at løbe ud under billedet. VIL DU FLYTTE TEKSTEN OP ELLER NED? Brug --hk-tekst-juster. Den lægges oveni til allersidst: -20px = hele teksten 20 px HØJERE op 20px = hele teksten 20 px LÆNGERE ned Rør ikke de to andre — de skal bare passe til virkeligheden. */ /* Målestok: højden på en typisk topboks-tekst. Lille orange linje + én linjes overskrift + én linjes undertekst + knapper + stjernelinje. Skal kun ændres, hvis du tilføjer eller fjerner en hel del i topboksen. */ --hk-reference-hoejde: 228px; /* Den luft foroven, teksten oprindeligt blev centreret indenfor */ --hk-luft-top-basis: 50px; /* Din finjustering — se forklaringen ovenfor */ --hk-tekst-juster: 0px; /* Selve beregningen. Rør den ikke. */ --hk-luft-top-desktop: calc((var(--hk-luft-top-basis) + var(--hk-billedhoejde) - var(--hk-reference-hoejde)) / 2 + var(--hk-tekst-juster)); /* Luft ind fra venstre og højre kant på computer */ --hk-luft-sider-desktop: 32px; /* På mobil (til og med 900px). Teksten står i bunden, så her er det luften ind fra kanterne og ned til underkanten */ --hk-luft-sider-mobil: 15px; --hk-luft-bund-mobil: 15px; /* Hvor højt kassen ligger i "lagdelingen". 2 = over billedet (nuværende). Rør den kun, hvis noget lægger sig hen over teksten */ --hk-lagdeling: 2; /* — Forsiden — Forsiden har en video i fuld skærmhøjde i stedet for et billede. Uden det her ville teksten blive centreret midt i HELE videoen og dermed stå meget lavere end på alle de andre sider. Derfor tvinges forsidens tekst ind i præcis samme bånd som billedet på de øvrige sider — så boksen står ens overalt. Gælder kun på computer; mobil styres af forsidens egne regler. Vil du tilbage til det gamle, hvor teksten centreres i hele videoen, så skriv i stedet: --hk-forside-baand: auto; --hk-forside-bund: var(--anm-plads, 240px); */ --hk-forside-baand: var(--hk-billedhoejde); --hk-forside-bund: auto; /* ══════════════════════════════════════════════════════════════════ 1) DEN LILLE ORANGE LINJE "KØREKORT I AARHUS C", "PRISER", "FAQ" osv. ══════════════════════════════════════════════════════════════════ */ /* Farve. Sitets orange: #B25C0A · hvid: #ffffff · mørkeblå: #091531 */ --hl-farve: #B25C0A; /* Store bogstaver: uppercase = ALT MED STORT · none = som skrevet */ --hl-versaler: uppercase; /* Afstand mellem bogstaverne. 0 = normal · 0.1em = luftig */ --hl-tegnafstand: 0.1em; /* — På computer (900px og opefter) — */ --hl-stoerrelse-desktop: 1.25rem; /* 1.25rem = 20px */ --hl-tykkelse-desktop: 800; /* 400 normal … 800 ekstra fed */ --hl-linjeafstand-desktop: 1.6; --hl-margin-desktop: 0px 0 4px 0; /* top højre bund venstre */ --hl-padding-desktop: 0px 0px 0px 0px; /* — På mobil (til og med 899px) — */ --hl-stoerrelse-mobil: 0.9375rem; /* 0.9375rem = 15px */ --hl-tykkelse-mobil: 700; --hl-linjeafstand-mobil: normal; --hl-margin-mobil: 0px 0 4px 0; --hl-padding-mobil: 0px 0px 0px 0px; /* ══════════════════════════════════════════════════════════════════ 2) DEN STORE OVERSKRIFT "Gennemskuelige priser", "Kørekort i Aarhus" osv. ══════════════════════════════════════════════════════════════════ */ --ht-farve: #ffffff; /* — På computer — clamp(mindst, skaleret, størst) betyder: teksten vokser med skærmen, men aldrig under det første og aldrig over det sidste tal */ --ht-stoerrelse-desktop: clamp(1.875rem, 3vw, 2rem); /* 30px–32px */ --ht-tykkelse-desktop: 800; --ht-linjeafstand-desktop: 1.15; --ht-margin-desktop: 0 0 5px 0; --ht-maxbredde-desktop: 620px; /* hvor bredt teksten må gå */ /* — På mobil — */ --ht-stoerrelse-mobil: 1.275rem; /* ca. 20px */ --ht-tykkelse-mobil: 800; --ht-linjeafstand-mobil: 1.15; --ht-margin-mobil: 0 0 20px 0; --ht-maxbredde-mobil: 100%; /* Når skærmen er meget lav (under 560px høj) bliver overskriften mindre, så der er plads til resten */ --ht-stoerrelse-lav-skaerm: 1.5rem; /* ══════════════════════════════════════════════════════════════════ 3) UNDERTEKSTEN "Ingen skjulte gebyrer — se præcis, hvad pakken dækker." ══════════════════════════════════════════════════════════════════ */ --hu-farve: rgba(255,255,255,0.88); /* — På computer — */ --hu-stoerrelse-desktop: 1.125rem; /* 18px */ --hu-tykkelse-desktop: 500; --hu-linjeafstand-desktop: 1.6; --hu-margin-desktop: 0 0 30px 0; --hu-maxbredde-desktop: 480px; /* — På mobil — Underteksten er SKJULT på mobil i dag, fordi der ikke er plads. none = skjult (nuværende) · block = vis den alligevel */ --hu-vis-mobil: none; --hu-stoerrelse-mobil: 0.9375rem; /* bruges kun hvis du viser den */ --hu-margin-mobil: 0 0 30px 0; /* Skjules også når skærmen er under 700px høj. none = skjult (nuværende) · block = vis den alligevel */ --hu-vis-lav-skaerm: none; /* ══════════════════════════════════════════════════════════════════ 4) KNAPPERNE ("topknap") Den orange og den hvide knap i topboksen. ══════════════════════════════════════════════════════════════════ */ /* — Afstande — */ --tk-afstand-mellem: 14px; /* luft mellem de to knapper */ /* Luft under knap-rækken. Rækkefølge: top højre bund venstre */ --tk-margin-raekke-desktop: 0 0 10px 0; --tk-margin-raekke-mobil: 0 0 10px 0; /* — Form og skrift — */ --tk-afrunding: 8px; /* 0 = firkantet · 999px = pille */ --tk-tekststoerrelse: clamp(0.875rem, 1.1vw, 1rem); /* 14px–16px */ --tk-tykkelse: 700; /* Knappens indvendige luft = dens højde og bredde. Rækkefølge: op/ned venstre/højre */ --tk-padding-desktop: clamp(10px, 1.6vh, 14px) clamp(18px, 2vw, 26px); --tk-padding-mobil: clamp(9px, 1.5vh, 12px) 20px; /* — Den ORANGE knap — */ --tk-orange-baggrund: #B25C0A; --tk-orange-tekst: #ffffff; --tk-orange-baggrund-hover: #8F4A08; /* når musen er over */ /* — Den HVIDE knap — */ --tk-hvid-baggrund: #ffffff; --tk-hvid-tekst: #091531; --tk-hvid-baggrund-hover: #e8ecf4; /* Hvor meget knappen løfter sig, når musen er over. 0 = ingen bevægelse · -1px = nuværende · -3px = tydeligt løft */ --tk-loeft-hover: -1px; /* ══════════════════════════════════════════════════════════════════ 5) STJERNELINJEN "★★★★★ 5,0 på Google · 22 anmeldelser" ══════════════════════════════════════════════════════════════════ */ --hs-tekstfarve: rgba(255,255,255,0.85); --hs-stoerrelse: clamp(0.8125rem, 0.95vw, 0.875rem); /* 13px–14px */ --hs-tykkelse: 500; --hs-linjeafstand: 1.6; --hs-afstand-til-tekst: 8px; /* luft mellem stjerner og tekst */ /* Luft omkring stjernelinjen. Rækkefølge: top højre bund venstre. På mobil er teksten forankret i BUNDEN, så en bundmargen her skubber hele tekstblokken opad. */ --hs-margin-desktop: 0; --hs-margin-mobil: 0; /* Selve stjernerne ★★★★★ */ --hs-stjernefarve: #f5a623; --hs-stjerneafstand: 2px; /* luft mellem hver stjerne */ /* Skjules når skærmen er under 560px høj. none = skjult (nuværende) · inline-flex = vis den alligevel */ --hs-vis-lav-skaerm: none; /* ══════════════════════════════════════════════════════════════════ 6) DEN LILLE ORANGE LINJE PÅ MEGET LAVE SKÆRME (under 560px høj — fx en mobil lagt ned på siden) none = skjul · block = vis alligevel ══════════════════════════════════════════════════════════════════ */ --hl-vis-lav-skaerm: none; } /* ╔════════════════════════════════════════════════════════════════════╗ ║ ▲ ▲ ▲ SLUT PÅ DET, DU SKAL RETTE ▲ ▲ ▲ ║ ╚════════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════════════════════════ HERUNDER ER REN TEKNIK — DU BEHØVER IKKE RØRE NOGET AF DET. Fem ting er med vilje: 1) #main-content står TO gange i selektoren. Det er et lovligt CSS-trick, der gør reglen stærk nok til at vinde over alt andet på siden — også over