i sidens indhold ------------------------ */
/* Browserens standard-kursiv slås fra, så adressen matcher resten af
brødteksten (samme greb som .footer-address i footeren). */
/* Adressen skal stå som telefon og e-mail i samme kort: samme skriftstørrelse
og samme vægt. Farven forbliver navy og ikke accentgrøn — grøn betyder link
på denne side, og adressen er ikke klikbar. */
.contact-address {
color: var(--navy);
font-size: 1rem;
font-weight: 600;
font-style: normal;
line-height: 1.6;
}
/* --- .value-row — hero'ens tre værdipunkter ------------------------------- */
.value-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.value-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.value-item__text {
color: var(--muted);
font-size: 0.9375rem;
line-height: 1.5;
max-width: 18ch;
}
/* Tre kolonner bevares helt ned til ca. 420px (BRIEF §5.1). */
@media (min-width: 420px) {
.value-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
}
@media (min-width: 900px) {
.value-row {
gap: var(--space-5);
}
}
/* --- .panel — indrykkede farvede paneler ---------------------------------- */
.panel {
position: relative;
overflow: hidden;
border-radius: var(--radius-2xl);
padding: clamp(1.5rem, 4vw, 3rem);
}
.panel--navy {
background: var(--gradient-navy);
color: #fff;
box-shadow: var(--shadow-navy);
--focus-ring: #F2F8DF;
}
/* Blød grøn glød i panelets højre kant — erstatter plantefotoet i referencen. */
.panel--navy::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--panel-glow);
pointer-events: none;
}
.panel--navy > * {
position: relative;
z-index: 1;
}
.panel--orange {
background: var(--gradient-orange);
color: #fff;
box-shadow: var(--shadow-md);
--focus-ring: #F2F8DF;
}
.panel--surface {
background-color: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.panel--navy h1,
.panel--navy h2,
.panel--navy h3,
.panel--navy h4,
.panel--orange h1,
.panel--orange h2,
.panel--orange h3,
.panel--orange h4 {
color: #fff;
}
.panel__lead {
margin-top: var(--space-4);
max-width: 46ch;
color: var(--navy-ink-soft);
font-size: 1rem;
line-height: 1.6;
}
.panel--orange .panel__lead {
color: #fff;
}
/* Fremhævet afsluttende udsagn i et panel (fx afslutningsblokken på
om-iq-active.html). Større og federe end .panel__lead, altid hvid. */
.panel__statement {
margin-top: var(--space-3);
max-width: 46ch;
color: #fff;
font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
font-weight: 700;
line-height: 1.4;
}
/* Gitteret med de tre/fire ikonpunkter inde i et panel. */
.panel__grid {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.panel__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.panel__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel__grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.panel__grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Ét punkt i et panel: centreret ikon over titel og tekst. */
.panel-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.panel-item__title {
color: #fff;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
}
.panel-item__text {
color: var(--navy-ink-soft);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 32ch;
}
.section--orange .panel-item__text,
.panel--orange .panel-item__text {
color: #fff;
}
/* --- .page-hero — sidehero på undersider ---------------------------------- */
.page-hero {
background-color: var(--bg);
padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.25rem, 5vw, 3.5rem);
}
.page-hero__inner > * + * {
margin-top: var(--space-4);
}
.page-hero__title {
max-width: 20ch;
}
/* --- .breadcrumb ---------------------------------------------------------- */
.breadcrumb {
font-size: 0.875rem;
color: var(--muted);
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li {
display: flex;
align-items: center;
gap: var(--space-2);
}
.breadcrumb li + li::before {
content: "";
width: 0.35em;
height: 0.35em;
border-top: 1.5px solid var(--muted);
border-right: 1.5px solid var(--muted);
transform: rotate(45deg);
opacity: 0.55;
}
.breadcrumb a {
color: var(--navy-600);
text-decoration: underline;
text-decoration-color: rgba(59, 65, 128, 0.3);
}
.breadcrumb a:hover {
color: var(--accent-ink);
}
.breadcrumb [aria-current="page"] {
color: var(--muted);
font-weight: 500;
}
/* --- .bullet-list — punktliste med accentmærke ---------------------------- */
.bullet-list {
display: grid;
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.bullet-list li {
position: relative;
padding-left: 2rem;
color: var(--ink);
}
.bullet-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* --- .fact-box — nøgterne firmaoplysninger -------------------------------- */
.fact-box {
padding: clamp(1.25rem, 3vw, 2rem);
background-color: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--accent-underline);
border-radius: var(--radius-lg);
}
/* --- .brand-mark — IQ active-logoet som afsender i et kort --------------- */
/* Bruges både i faktaboksen på Om-siden og i kontaktkortet. Står øverst,
adskilt fra indholdet af en hårfin linje. Bredden holdes beskeden, så den
ikke konkurrerer med kortets overskrift. */
.brand-mark {
display: block;
width: 180px;
max-width: 60%;
height: auto;
margin-bottom: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--line);
}
.fact-box dl {
display: grid;
gap: var(--space-3);
margin: 0;
}
@media (min-width: 560px) {
.fact-box dl {
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
column-gap: var(--space-5);
row-gap: var(--space-3);
}
}
.fact-box dt {
color: var(--navy);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.fact-box dd {
margin: 0;
color: var(--ink);
}
/* --- .partner-mark — lille partnerlogo under en grafik ------------------- */
/* IQ nordic-mærket under cirkelgrafikken på Om-siden.
Bredden er bundet til 190px, så den harmonerer med cirklens 260px og med
brødtekstens vaegt. Uden en eksplicit bredde renderer logoet i sin fulde
filbredde på 900px — det var netop fejlen der opstod, da klassen tidligere
blev fjernet uden at markupen fulgte med. */
.partner-mark {
display: block;
width: 190px;
max-width: 100%;
margin: var(--space-6) auto 0;
border-radius: var(--radius-xs);
transition: opacity var(--t-fast);
}
.partner-mark:hover {
opacity: 0.8;
}
.partner-mark img {
display: block;
width: 100%;
height: auto;
}
/* --- .link-logo / .inline-logo — logo som del af en tekstlinje ---------- */
/* IQ nordic-logoet er selve linket i sætningen „… så klik ind på [logo]“.
Lå før som et selvstændigt mærke under tekstblokken. Det virkede løsrevet,
og en separat blok gav et tomrum mellem tekst og logo.
Højden sættes i em, så logoet skalerer med teksten omkring det og bliver
siddende på linjen når skriftstørrelsen ændrer sig. vertical-align finjusterer
optisk mod grundlinjen — logoets bogstaver har ingen underlængder, så en
ren baseline-justering ville få det til at ligge for højt.
Linkets tilgængelige navn kommer fra .visually-hidden-teksten, ikke fra
alt-teksten alene: en skærmlæser skal høre hvad linket fører til. */
.link-logo {
display: inline-block;
border-radius: var(--radius-xs);
transition: opacity var(--t-fast);
}
.link-logo:hover {
opacity: 0.75;
}
.inline-logo {
display: inline-block;
width: auto;
height: 1.45em;
vertical-align: -0.32em;
}
/* --- .cta-band — afsluttende centreret CTA -------------------------------- */
.cta-band {
background-color: var(--surface);
border-top: 1px solid var(--line);
padding-block: clamp(2.75rem, 6vw, 4.5rem);
text-align: center;
}
.cta-band__inner {
max-width: 60ch;
margin-inline: auto;
}
.cta-band__inner > * + * {
margin-top: var(--space-4);
}
.cta-band .cluster {
justify-content: center;
margin-top: var(--space-6);
}
/* --- .pill — lille etiket ------------------------------------------------- */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.35rem 0.85rem;
border-radius: var(--radius-pill);
background-color: var(--accent-soft);
color: var(--accent-ink);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* --- .divider-streger — dekorativ stregdeler (kun Børnemiljø) ------------- */
.divider-streger {
display: block;
width: min(240px, 70%);
height: auto;
margin-top: var(--space-3);
}
.section-head--center .divider-streger {
margin-inline: auto;
}
/* --- .reveal — fade/slide-in ved scroll ----------------------------------- */
/* .has-js sættes på af main.js, så indhold ALDRIG skjules uden JS. */
.has-js .reveal {
opacity: 0;
transform: translateY(18px);
transition:
opacity var(--t-reveal),
transform var(--t-reveal);
will-change: opacity, transform;
}
.has-js .reveal.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
/* Får et link eller en knap inde i blokken fokus, før observeren har meldt
tilbage, vises blokken med det samme — ellers ville tastaturfokus stå på et
usynligt element i op mod 640 ms (WCAG 2.4.7 Focus Visible). */
.has-js .reveal:focus-within {
opacity: 1;
transform: none;
transition: none;
}
.has-js .reveal--delay-1 {
transition-delay: 90ms;
}
.has-js .reveal--delay-2 {
transition-delay: 180ms;
}
.has-js .reveal--delay-3 {
transition-delay: 270ms;
}
/* =============================================================================
(g) HEADER, NAVIGATION, SØGEOVERLAY, BESKED
============================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: var(--surface);
border-bottom: 1px solid transparent;
transition: box-shadow var(--t), border-color var(--t);
}
.site-header.is-scrolled {
border-bottom-color: var(--line);
box-shadow: var(--shadow-sm);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: var(--header-h);
}
.site-logo {
display: inline-flex;
align-items: center;
margin-right: auto;
border-radius: var(--radius-xs);
text-decoration: none;
}
.site-logo img {
height: 36px;
width: auto;
}
@media (min-width: 900px) {
.site-logo img {
height: 44px;
}
}
/* --- Navigation ----------------------------------------------------------- */
/* Mobil: fuldhøjde-panel fra højre. Desktop (≥900px): vandret i flowet. */
.site-nav {
position: fixed;
top: var(--header-h);
right: 0;
bottom: 0;
z-index: var(--z-nav-panel);
width: min(22rem, 88vw);
padding: var(--space-6) var(--space-5) var(--space-9);
background-color: var(--surface);
border-left: 1px solid var(--line);
box-shadow: var(--shadow-lg);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(105%);
visibility: hidden;
transition:
transform var(--t-slow),
visibility 0s linear 420ms;
}
.site-nav.is-open {
transform: translateX(0);
visibility: visible;
transition: transform var(--t-slow), visibility 0s;
}
.site-nav__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__link {
position: relative;
display: inline-block;
padding: var(--space-3) 0;
color: var(--navy);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
transition: color var(--t-fast);
}
.site-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.35rem;
height: 3px;
border-radius: 2px;
background-color: var(--lime);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t);
}
.site-nav__link:hover {
color: var(--navy-900);
}
/* Den grønne streg vises kun ved hover og tastaturfokus — ikke som permanent
markering af den aktuelle side. Menuen skal se ens ud på alle sider, også
forsiden, hvor intet punkt er aktivt.
aria-current="page" bliver siddende i markupen: skærmlæsere annoncerer
fortsat hvilken side man er på. Kun den visuelle markering er fjernet. */
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
transform: scaleX(1);
}
.site-nav__ext-icon {
display: inline-block;
width: 0.7em;
height: 0.7em;
margin-left: 0.35em;
vertical-align: baseline;
opacity: 0.6;
}
@media (min-width: 900px) {
.site-nav {
position: static;
width: auto;
padding: 0;
background: none;
border: 0;
box-shadow: none;
overflow: visible;
transform: none;
visibility: visible;
transition: none;
}
.site-nav__list {
flex-direction: row;
align-items: center;
gap: clamp(1rem, 2.1vw, 2.1rem);
}
.site-nav__link {
padding: var(--space-2) 0;
font-size: 0.8125rem;
}
.site-nav__link::after {
bottom: -0.35rem;
}
}
/* --- Header-handlinger (søg + login) -------------------------------------- */
.header-actions {
display: flex;
align-items: center;
gap: var(--space-1);
}
.icon-btn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid transparent;
border-radius: var(--radius-btn);
color: var(--navy);
background-color: transparent;
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn svg {
width: 20px;
height: 20px;
pointer-events: none;
}
.icon-btn:hover {
background-color: var(--bg);
border-color: var(--line);
color: var(--navy-900);
}
.icon-btn:active {
background-color: var(--line);
}
/* --- Hamburger ------------------------------------------------------------ */
.nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--line);
border-radius: var(--radius-btn);
color: var(--navy);
background-color: var(--surface);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.nav-toggle:hover {
background-color: var(--bg);
border-color: rgba(26, 29, 86, 0.22);
}
/* „Menu"-etiketten ved siden af stregerne. Værdierne matcher .nav-toggle, men
er sat eksplicit, så etiketten ikke afhænger af arv fra forælderen. */
.nav-toggle__label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.nav-toggle__bars {
position: relative;
display: block;
width: 18px;
height: 12px;
flex: 0 0 auto;
}
.nav-toggle__bars span {
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
background-color: currentColor;
transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle__bars span:nth-child(1) {
top: 0;
}
.nav-toggle__bars span:nth-child(2) {
top: 5px;
}
.nav-toggle__bars span:nth-child(3) {
top: 10px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
@media (min-width: 900px) {
.nav-toggle {
display: none;
}
}
/* --- Baggrundsslør bag mobilpanelet --------------------------------------- */
.nav-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-nav-panel) - 1);
background-color: rgba(0, 25, 86, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--t), visibility 0s linear 220ms;
}
.nav-backdrop.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--t), visibility 0s;
}
@media (min-width: 900px) {
.nav-backdrop {
display: none;
}
}
/* Scroll-lås når mobilpanel eller søgeoverlay er åbent. */
body.is-locked {
overflow: hidden;
}
/* --- Søgeoverlay ---------------------------------------------------------- */
.search-overlay {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
display: grid;
align-content: start;
justify-items: center;
padding: clamp(4rem, 12vh, 9rem) var(--container-pad) var(--space-6);
background-color: rgba(0, 25, 86, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity var(--t), visibility 0s linear 220ms;
--focus-ring: #F2F8DF;
}
.search-overlay.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--t), visibility 0s;
}
.search-overlay__panel {
position: relative;
width: min(640px, 100%);
padding: clamp(1.5rem, 4vw, 2.25rem);
background-color: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
--focus-ring: var(--navy);
}
/* Overlayets titel er et (ikke et h2): overlayet står før i DOM'en,
og et h2 dér ville gøre dokumentets første overskrift til et h2 i stedet for
sidens h1. Dialogen navngives via aria-labelledby, som virker på ethvert
element. Typografien sættes derfor eksplicit her. */
.search-overlay__title {
padding-right: 3rem;
color: var(--navy);
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
}
.search-form {
margin-top: var(--space-4);
}
.search-form__row {
display: grid;
gap: var(--space-3);
}
@media (min-width: 560px) {
.search-form__row {
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}
}
.search-form__input {
width: 100%;
min-height: 48px;
padding: 0.7rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background-color: var(--surface);
color: var(--ink);
font-size: 1rem;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-form__input:hover {
border-color: rgba(26, 29, 86, 0.28);
}
.search-form__input:focus {
border-color: var(--navy);
box-shadow: var(--shadow-focus);
outline: none;
}
.search-overlay__note {
margin-top: var(--space-4);
color: var(--muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.search-overlay__note:empty {
display: none;
}
.search-overlay__close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
}
/* --- Diskret besked (toast) ----------------------------------------------- */
/* Bruges til „Login kommer snart" o.l. Skjules med opacity, aldrig display,
så role="status" bevares i tilgængelighedstræet. */
.toast {
position: fixed;
left: 50%;
bottom: var(--space-5);
z-index: var(--z-toast);
display: flex;
align-items: flex-start;
gap: var(--space-3);
width: min(30rem, calc(100vw - 2rem));
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
border-radius: var(--radius-md);
background: var(--gradient-navy);
color: #fff;
box-shadow: var(--shadow-navy);
opacity: 0;
transform: translate(-50%, 14px);
pointer-events: none;
transition: opacity var(--t), transform var(--t);
--focus-ring: #F2F8DF;
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.toast__text {
flex: 1 1 auto;
min-width: 0;
font-size: 0.9375rem;
line-height: 1.55;
}
.toast__close {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
color: #fff;
transition: background-color var(--t-fast);
}
.toast__close svg {
width: 16px;
height: 16px;
}
.toast__close:hover {
background-color: rgba(255, 255, 255, 0.16);
}
/* Selve .toast skjules kun med opacity, så bliver i
tilgængelighedstræet og bliver læst op. Lukkeknappen skal derimod UD af
tabulatorrækkefølgen, når beskeden er skjult — ellers er der et usynligt
tabstop før på alle fem sider (WCAG 2.4.7 Focus Visible). */
.toast:not(.is-visible) .toast__close {
visibility: hidden;
}
/* =============================================================================
(h) FOOTER
============================================================================= */
.site-footer {
background-color: var(--bg);
border-top: 1px solid var(--line);
padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-5);
}
.site-footer__grid {
display: grid;
gap: var(--space-7);
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.site-footer__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.1fr);
gap: var(--space-8);
}
}
.footer-col > * + * {
margin-top: var(--space-4);
}
.footer-logo img {
width: 240px;
max-width: 100%;
height: auto;
}
.footer-logo--nordic img {
width: 170px;
}
.footer-heading {
color: var(--navy);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.footer-list {
display: grid;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.footer-list a {
display: inline-block;
padding-block: 2px;
color: var(--navy-600);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
}
.footer-list a:hover {
color: var(--accent-ink);
text-decoration: underline;
}
.footer-contact {
display: grid;
gap: var(--space-3);
font-size: 0.9375rem;
}
.footer-contact a {
color: var(--navy-600);
font-weight: 600;
text-decoration: none;
}
.footer-contact a:hover {
color: var(--accent-ink);
text-decoration: underline;
}
/* Adressen skal stå som telefon og e-mail i samme kolonne: samme skriftstørrelse,
samme vægt, samme farve. Den var før --muted/vaegt 400 og faldt visuelt ud af
rækken. Den er ikke et link, men adskiller sig stadig ved ikke at få
understregning og farveskift ved hover. */
.footer-address {
color: var(--navy-600);
font-size: 0.9375rem;
font-weight: 600;
font-style: normal;
line-height: 1.6;
}
.footer-note {
color: var(--muted);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 34ch;
}
.footer-bottom {
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: var(--space-5);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.875rem;
text-align: center;
}
/* =============================================================================
(i) FORMULARER
============================================================================= */
.form {
display: grid;
gap: var(--space-5);
}
.form-grid {
display: grid;
gap: var(--space-5);
}
@media (min-width: 768px) {
.form-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.form-field {
display: grid;
gap: var(--space-2);
min-width: 0;
/* Uden dette strækker gridets rækker sig, når feltet står i samme række som
et højere felt (fx et med hjælpetekst under inputtet). Den ekstra højde
fordeles så ud på label-, input- og fejlrækken, og inputtet skubbes ned —
to felter side om side kom derved ikke til at flugte.
Med start pakkes rækkerne øverst, og alle inputs står på samme linje. */
align-content: start;
}
.form-label {
color: var(--navy);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.4;
}
.form-label .form-req {
color: var(--danger);
font-weight: 700;
margin-left: 0.15em;
}
.form-hint {
color: var(--muted);
font-size: 0.875rem;
line-height: 1.5;
}
.form-control {
width: 100%;
min-height: 50px;
padding: 0.7rem 0.95rem;
border: 1px solid var(--line);
border-radius: var(--radius-btn);
background-color: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
textarea.form-control {
min-height: 9.5rem;
resize: vertical;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
padding-right: 2.75rem;
background-image:
linear-gradient(45deg, transparent 50%, var(--navy) 50%),
linear-gradient(135deg, var(--navy) 50%, transparent 50%);
background-position:
calc(100% - 1.2rem) calc(50% + 2px),
calc(100% - 0.85rem) calc(50% + 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
/* Gælder også søgefeltet, som er sitets eneste felt med et placeholder-attribut.
#6F7484 på hvid giver 4,66:1 og opfylder dermed BRIEF §9. */
.form-control::placeholder,
.search-form__input::placeholder {
color: #6F7484;
opacity: 1;
}
.form-control:hover {
border-color: rgba(26, 29, 86, 0.28);
}
.form-control:focus {
border-color: var(--navy);
box-shadow: var(--shadow-focus);
outline: none;
}
.form-control:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
.form-control:disabled {
background-color: var(--bg);
color: var(--muted);
cursor: not-allowed;
}
.form-control[aria-invalid="true"] {
border-color: var(--danger);
background-color: var(--danger-soft);
}
.form-control[aria-invalid="true"]:focus {
box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.18);
}
/* --- .form-error — fejlbesked pr. felt ------------------------------------ */
.form-error {
display: flex;
align-items: flex-start;
gap: 0.4rem;
color: var(--danger);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.45;
}
.form-error:empty {
display: none;
}
.form-error::before {
content: "";
flex: 0 0 auto;
width: 1em;
height: 1em;
margin-top: 0.2em;
border-radius: 50%;
border: 2px solid currentColor;
background:
linear-gradient(currentColor, currentColor) center 0.18em / 2px 0.34em no-repeat,
linear-gradient(currentColor, currentColor) center 0.62em / 2px 2px no-repeat;
}
/* --- Samtykke-checkbox ---------------------------------------------------- */
.form-consent {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
}
.form-consent input[type="checkbox"] {
width: 1.35rem;
height: 1.35rem;
margin-top: 0.2rem;
accent-color: var(--accent);
flex: 0 0 auto;
cursor: pointer;
}
.form-consent label {
color: var(--ink);
font-size: 0.9375rem;
line-height: 1.55;
cursor: pointer;
}
.form-consent input[aria-invalid="true"] {
outline: 2px solid var(--danger);
outline-offset: 3px;
}
.form-consent .form-error {
grid-column: 1 / -1;
}
.form-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
}
/* --- .form-status — kvitteringsboks --------------------------------------- */
.form-status {
padding: var(--space-5);
border: 1px solid rgba(46, 125, 50, 0.35);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
background-color: var(--accent-soft);
color: var(--ink);
}
.form-status__title {
color: var(--accent-ink);
font-size: 1.0625rem;
font-weight: 700;
}
.form-status__text {
margin-top: var(--space-2);
font-size: 0.9375rem;
line-height: 1.6;
}
.form-status a {
color: var(--accent-ink);
font-weight: 700;
text-decoration: underline;
}
.form-status--error {
border-color: rgba(179, 38, 30, 0.35);
border-left-color: var(--danger);
background-color: var(--danger-soft);
}
.form-status--error .form-status__title,
.form-status--error a {
color: var(--danger);
}
/* =============================================================================
(j) TEMA: body.theme-born — Børnemiljø
Kun typografi, accentfarve og radius ændres. Alt andet er identisk.
============================================================================= */
body.theme-born {
--font-head: "Baloo Da 2", "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
--accent: var(--orange-deep);
--accent-hover: var(--orange-hover);
--accent-ink: var(--orange-ink);
--accent-soft: #FDEDE6;
--accent-underline: var(--orange);
--radius-lg: 20px;
--radius-xl: 22px;
--radius-2xl: 24px;
--radius-3xl: 28px;
--radius-btn: 14px;
}
body.theme-born h1,
body.theme-born h2,
body.theme-born h3 {
font-family: var(--font-head);
font-weight: 800;
letter-spacing: -0.005em;
}
body.theme-born h1 {
line-height: 1.08;
}
body.theme-born h2 {
line-height: 1.15;
}
body.theme-born h4,
body.theme-born h5,
body.theme-born h6 {
font-family: var(--font-body);
}
/* Nav og footer beholder Inter og navy, så sitet hænger sammen. */
body.theme-born .site-nav__link,
body.theme-born .footer-heading,
body.theme-born .footer-list a {
font-family: var(--font-body);
}
/* Aktiv nav-understregning på Børnemiljø bliver orange. */
body.theme-born .site-nav__link::after {
background-color: var(--orange);
}
body.theme-born .link,
body.theme-born .link-arrow {
color: var(--accent-ink);
}
body.theme-born .step-card__num::after,
body.theme-born .fact-box {
border-color: var(--line);
}
body.theme-born .bullet-list li::before {
background-color: var(--orange);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* =============================================================================
(k) UTILITIES
============================================================================= */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.u-text-center {
text-align: center;
}
.u-text-left {
text-align: left;
}
.u-center {
margin-inline: auto;
}
.u-muted {
color: var(--muted);
}
.u-navy {
color: var(--navy);
}
.u-accent {
color: var(--accent-ink);
}
.u-small {
font-size: 0.875rem;
}
.u-bold {
font-weight: 700;
}
.u-nowrap {
white-space: nowrap;
}
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }
.u-maxw-sm { max-width: 32ch; }
.u-maxw-md { max-width: 48ch; }
.u-maxw-lg { max-width: 64ch; }
.u-maxw-px-240 { max-width: 240px; }
.u-maxw-px-260 { max-width: 260px; }
.u-maxw-px-420 { max-width: 420px; }
.u-img-round {
border-radius: var(--radius-xl);
overflow: hidden;
}
.u-shadow {
box-shadow: var(--shadow-md);
}
.u-hide-mobile {
display: none;
}
@media (min-width: 768px) {
.u-hide-mobile {
display: block;
}
.u-hide-desktop {
display: none;
}
}
/* =============================================================================
(l) PRINT
============================================================================= */
@media print {
:root {
--header-h: 0px;
}
body {
background: #fff;
color: #000;
font-size: 11pt;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6,
.card__title,
.feature__title,
.footer-heading {
color: #000;
}
.site-header,
.site-nav,
.nav-toggle,
.nav-backdrop,
.header-actions,
.search-overlay,
.toast,
.skip-link,
.btn,
.cta-band,
.breadcrumb {
display: none !important;
}
.panel,
.panel--navy,
.panel--orange,
.section--orange,
.media-card__overlay,
.media-card__overlay--navy,
.card,
.step-card,
.fact-box,
.form-status {
background: #fff !important;
color: #000 !important;
border: 1px solid #999 !important;
box-shadow: none !important;
}
.panel--navy::after {
display: none !important;
}
.panel-item__title,
.panel-item__text,
.panel__lead,
.media-card__title,
.media-card__text,
.lead,
.card__text,
.feature__text,
.u-muted {
color: #000 !important;
}
.media-card__overlay {
position: static !important;
width: auto !important;
margin-top: 8pt;
}
.section,
.section--loose {
padding-block: 12pt;
}
a {
color: #000;
text-decoration: underline;
}
.has-js .reveal {
opacity: 1 !important;
transform: none !important;
}
.site-footer {
border-top: 1px solid #999;
}
img {
break-inside: avoid;
}
h2, h3 {
break-after: avoid;
}
}
/* =============================================================================
(m) PREFERS-REDUCED-MOTION
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.has-js .reveal,
.has-js .reveal.is-visible {
opacity: 1;
transform: none;
}
.btn:hover,
.card--link:hover,
.step-card:hover {
transform: none;
}
.card--link:hover .card__media img {
transform: none;
}
}
/* =============================================================================
TRYKFELTER PÅ KONTAKTLINKS (mobil)
-----------------------------------------------------------------------------
Telefon- og e-maillinks er sidens primære handling — især på Kontakt-siden.
Som inline-links er de undtaget WCAG 2.2 SC 2.5.8 (Target Size), men et
trykfelt på 17–21 px er upraktisk med en tommelfinger. Vi giver dem derfor
et reelt trykområde på små skærme uden at ændre den visuelle rytme.
.btn er undtaget — knapper har rigeligt trykfelt i forvejen.
============================================================================= */
@media (max-width: 767px) {
a[href^="tel:"]:not(.btn),
a[href^="mailto:"]:not(.btn) {
display: inline-block;
padding-block: 5px;
}
}