/* --- focalx-tokens --- */
/**
* FocalX — Design tokens (farver, skygger, radii, typografi, layout).
*
* Matcher Elementor kit (post-2194) så custom templates ser identiske ud
* med eksisterende (Elementor-byggede) sider under migrationen.
*
* Loader globalt. Alle komponenter bør bruge disse variabler.
*/
/* =============================================================
* Self-hosted Ubuntu (fonts ligger i /assets/fonts/)
*
* Vægt-mapping:
* 400 → Ubuntu-Light (site bruger Light som default "regular")
* 500 → Ubuntu-Medium
* 600 → Ubuntu-Medium (Ubuntu har ingen SemiBold — genbrug Medium)
* 700 → Ubuntu-Bold
*
* font-display: swap sikrer tekst er læsbar under font-load (ingen FOIT).
* ============================================================= */
@font-face {
font-family: "Ubuntu";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/Ubuntu-Light.woff2") format("woff2");
}
@font-face {
font-family: "Ubuntu";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../assets/fonts/Ubuntu-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Ubuntu";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../assets/fonts/Ubuntu-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Ubuntu";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../assets/fonts/Ubuntu-Bold.woff2") format("woff2");
}
/* =============================================================
* Animation: gør det muligt at animere til/fra `auto`/`fit-content`
* på fx. height/block-size. Bruges af vores accordions
* (::details-content transition).
*
* Graceful degrade: browsers uden support snapper bare open/close
* uden animation — indhold forbliver tilgængeligt.
* ============================================================= */
html {
interpolate-size: allow-keywords;
}
:root {
/* -------- Brand / accent farver (Elementor kit) -------- */
--fx-blue: #163b6b; /* Primary blue (--e-global-color-secondary/accent) */
--fx-blue-hover: #0f2d54;
--fx-blue-light: #2d5a9e;
--fx-mint: #e0f8de; /* Hero checkmark background */
--fx-dark-green: #004642; /* Hero checkmark icon */
--fx-yellow: #ffd978;
--fx-peach: #fea25f;
--fx-sky: #93e7fe;
--fx-pink: #faa9e4;
--fx-lilac: #d5cdec; /* Feature-grid tone (Elementor icon bg) */
/* -------- Tekstfarver (Elementor kit) -------- */
--fx-text: #2d2f31; /* H1-H6 + strong body (--e-global-color-primary) */
--fx-text-body: rgba(45, 47, 49, 0.8); /* #2d2f31CC — standard body */
--fx-text-muted: #5f6770; /* Meta, captions (--e-global-color-248826f) */
--fx-text-subtle: #babfc3; /* Disabled, placeholder (--e-global-color-3119dab) */
/* -------- Baggrunde -------- */
--fx-bg: #ffffff;
/* Lidt mere luft fra hvid — sektioner der skifter til “soft” føles tydeligere */
--fx-bg-soft: #f2f0f6;
--fx-bg-muted: #e9e6ef;
/* -------- Grænser (lidt skarpere end før — stadig neutrale) -------- */
--fx-border: #dde1e7;
--fx-border-soft: #e8eaef;
/* -------- Feedback -------- */
--fx-link: var(--fx-blue);
--fx-link-hover: var(--fx-blue-hover);
--fx-success: #1e7e34;
--fx-warning: #b85c00;
--fx-danger: #dc2626;
/* -------- Radii --------
*
* Generelle radii (kasser, billeder, kort, paneler).
*
* --fx-btn-radius er specifikt til CTA-knapper på sitet — defaulter
* til 50px ("kraftigt afrundet pill-stil"). Alle knapper i .fx-btn-
* systemet arver denne radius automatisk. Ønsker du en specifik
* knap med anden radius (fx fuld 999px pill, eller skarpere 12px)
* skal du eksplicit override border-radius på den enkelte knap-
* variant — fx .fx-btn--pill, .fx-header__cta osv.
*/
--fx-radius-sm: 6px;
--fx-radius: 12px;
--fx-radius-lg: 16px;
--fx-radius-xl: 24px;
--fx-btn-radius: 50px;
/* -------- Skygger -------- */
--fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--fx-shadow: 0 4px 20px rgba(22, 59, 107, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
--fx-shadow-lg: 0 12px 40px rgba(22, 59, 107, 0.09), 0 2px 10px rgba(0, 0, 0, 0.05);
/* -------- Typografi (Elementor kit) -------- */
--fx-font-heading: "Ubuntu", sans-serif;
--fx-font-body: "Ubuntu", sans-serif;
/* -------- Heading scale --------
*
* KONVENTION — overskrifter (h1–h6):
* Sitet bruger ÉN samlet skala for alle overskrifter på tværs af
* sektioner. Tokenset her definerer både size, line-height og
* letter-spacing pr. niveau, og selve `h1…h6` tags får defaults
* applied længere nede i filen (se "Default heading styles").
*
* Størrelser justeres pr. breakpoint (desktop → tablet → mobile)
* via @media-blokkene længere nede. Line-height og letter-spacing
* holdes derimod KONSTANT på tværs af breakpoints — typografiske
* ratioer ændrer sig ikke når størrelsen skaleres ned, kun det
* absolutte tal. Det giver et ensartet rytmisk look uanset device.
*
* Letter-spacing er let negativ på de største display-headings
* (h1/h2) for at modvirke visuel "luftighed" som store fonts har
* — moderne web-konvention. Mindre headings (h4–h6) har 0 så
* brødtekst-nært typografisk look bevares.
*
* Komponent-specifik override er stadig ok hvis en sektion har
* brug for fx en kæmpe hero-h1 eller en speciel feature-h3 —
* men brug ALTID disse tokens som baseline før du afviger.
*/
/* Sizes: desktop → tablet (≤1024) → mobile (≤767) — samme værdier
som Elementor-kittet bruger, så frontend matcher kit-vinduerne. */
--fx-text-base: 18px;
--fx-h1: 48px;
--fx-h2: 40px;
--fx-h3: 32px;
--fx-h4: 26px;
--fx-h5: 22px;
--fx-h6: 18px;
/* Line-heights — strammere på store display-headings, mere
åbne på små for læsbarhed. Konstante på tværs af breakpoints. */
--fx-h1-lh: 1.1;
--fx-h2-lh: 1.15;
--fx-h3-lh: 1.2;
--fx-h4-lh: 1.25;
--fx-h5-lh: 1.35;
--fx-h6-lh: 1.4;
/* Letter-spacing — subtil negativ tracking på display-headings,
neutral fra h4 og ned. */
--fx-h1-ls: -0.02em;
--fx-h2-ls: -0.015em;
--fx-h3-ls: -0.01em;
--fx-h4-ls: 0;
--fx-h5-ls: 0;
--fx-h6-ls: 0;
/* -------- Layout --------
*
* KONVENTION — sektion-bredde (1140px på desktop):
*
* ALLE sektioner på sitet skal som UDGANGSPUNKT have max-bredde
* 1140px på desktop. Det er en bevidst designbeslutning der
* matcher Elementor-kittets "boxed" container, så frontend-
* sektioner føles ensartet bredde uanset hvilken side de står
* på. Hvis du laver en ny sektion: følg konventionen — undlad
* IKKE at sætte max-width.
*
* KORREKT brug — vælg én af to:
* 1. Brug utility-klassen .fx-section__container (defineret
* længere nede i denne fil) som wrapper inde i sektionen:
*
*
*
* …content…
*
*
*
* 2. Eller brug tokenet eksplicit på din egen container-
* klasse (anbefales hvis du allerede har en BEM-wrapper
* med ekstra layout-styles):
*
* .fx-min-feature__container {
* max-width: var(--fx-max-content);
* margin: 0 auto;
* padding: 0 var(--fx-gutter);
* }
*
* UNDGÅ hardcoded `max-width: 1140px;` — brug ALTID tokenet, så
* hele sitet kan ændres ét sted hvis vi senere skifter til fx
* 1200px eller 1080px.
*
* UNDTAGELSER (kun hvis eksplicit ønsket):
* • Full-bleed sektioner (logo-carousel, video-baggrunde) må
* fylde 100% — set max-width: none + indre 1140px-wrapper.
* • Smallere INDRE wrappers er ok og har egne tokens:
* --fx-max-narrow (820px) — centreret intro/header-tekst
* --fx-max-prose (720px) — læsbar artikel-tekst
* Disse bruges INDE I 1140px-containeren — IKKE i stedet for.
* • Modaler/lightboxes har deres egne max-widths.
*
* Skal en specifik sektion afvige (fx en bevidst bredere
* compare-tabel, eller en smal compare-archive hero), override
* eksplicit på den enkelte komponent — men kommentér HVORFOR
* så det er tydeligt at det er bevidst.
*/
--fx-max-content: 1140px; /* Default sektion-bredde (desktop) */
--fx-max-narrow: 820px; /* Centreret tekst (header/intro) */
--fx-max-prose: 720px; /* Læsbar artikel-tekst */
/* Side-padding: mærkbart mere luft til kant end 24px, uden at klemme indhold */
--fx-gutter: 28px;
/* Vertikal padding mellem sektioner — øget vs. tidligere kit-værdier
(96/72/48) for et mere moderne, “premium” luftigt layout. */
--fx-section-py: 112px;
--fx-col-gap: 104px; /* KONVENTION — gap mellem kolonner i 2-kolonne
content-sektioner (hero, opshub, image-
accordion, partnership, example-flow,
system-of-record osv.).
Desktop: 104px · Tablet: 56px · Mobil: 28px.
Brug ALTID var(--fx-col-gap) på 2-kolonne
grid'en — undgå hard-codede værdier så hele
sitet rytmisk holder samme afstand mellem
venstre og højre kolonne. */
}
/* Tablet */
@media (max-width: 1024px) {
:root {
--fx-text-base: 17px;
--fx-h1: 40px;
--fx-h2: 34px;
--fx-h3: 28px;
--fx-h4: 24px;
--fx-h5: 19px;
--fx-h6: 17px;
--fx-section-py: 88px;
--fx-col-gap: 56px;
--fx-gutter: 26px;
}
}
/* Mobile */
@media (max-width: 767px) {
:root {
--fx-text-base: 16px;
--fx-h1: 32px;
--fx-h2: 28px;
--fx-h3: 24px;
--fx-h4: 21px;
--fx-h5: 18px;
--fx-h6: 16px;
--fx-section-py: 56px;
--fx-col-gap: 28px;
--fx-gutter: 22px;
}
}
/* -------------------------------------------------------------
* Default heading styles (site-wide)
*
* KONVENTION — én skala, alle sektioner:
* Native h1–h6 tags får automatisk size + line-height + letter-
* spacing fra tokens-skalaen. Det betyder:
*
* • Et nøgent
Foo
behøver
* IKKE selv at sætte font-size — det matcher resten af sitet.
* • Komponenter der allerede sætter font-size: var(--fx-h2) på
* en wrapper-klasse arver line-height fra h2-default'en, så
* vertikal rytme er konsistent overalt.
* • Skift af heading-tag (h2 → h3) ændrer både størrelse OG
* line-height korrekt automatisk.
*
* Hvis en specifik sektion behøver afvigelse (fx ekstra-stor hero-
* h1 eller specialiseret feature-h3), så override eksplicit på den
* pågældende klasse — men brug ALTID --fx-h*-tokens som baseline.
*
* Astra-parent / WP-core forsøger at injicere -apple-system /
* system-ui på iOS/macOS — derfor sætter vi font-family eksplicit
* på alle form-elementer her.
* ------------------------------------------------------------- */
html, body, input, select, textarea, button {
font-family: var(--fx-font-body);
}
/* -------------------------------------------------------------
* Sektion-container utility (site-wide)
*
* Default-wrapper for ALLE sektion-content. Sætter automatisk:
* • max-width 1140px (--fx-max-content)
* • horisontal centrering
* • side-gutter (24px desktop, mindre på smalle viewports via token)
*
* Brug INDE I sektioner hvor du ikke har en sektion-specifik
* BEM-container med egne layout-styles:
*
*
*
* …content…
*
*
*
* Hvis du allerede har en BEM-wrapper med ekstra layout (grid,
* flexbox osv.), så brug var(--fx-max-content) på den i stedet
* for at lægge denne klasse oveni — undgå unødig DOM/klasse-støj.
* ------------------------------------------------------------- */
.fx-section__container {
max-width: var(--fx-max-content);
margin: 0 auto;
padding: 0 var(--fx-gutter);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--fx-font-heading);
font-weight: 700;
color: var(--fx-text);
overflow-wrap: break-word;
word-wrap: break-word;
}
h1 {
font-size: var(--fx-h1);
line-height: var(--fx-h1-lh);
letter-spacing: var(--fx-h1-ls);
}
h2 {
font-size: var(--fx-h2);
line-height: var(--fx-h2-lh);
letter-spacing: var(--fx-h2-ls);
}
h3 {
font-size: var(--fx-h3);
line-height: var(--fx-h3-lh);
letter-spacing: var(--fx-h3-ls);
}
h4 {
font-size: var(--fx-h4);
line-height: var(--fx-h4-lh);
letter-spacing: var(--fx-h4-ls);
}
h5 {
font-size: var(--fx-h5);
line-height: var(--fx-h5-lh);
letter-spacing: var(--fx-h5-ls);
}
h6 {
font-size: var(--fx-h6);
line-height: var(--fx-h6-lh);
letter-spacing: var(--fx-h6-ls);
}
/* -------------------------------------------------------------
* Fælles eyebrow-pill (site-wide)
*
* Grøn pill-label der bruges over overskrifter som hint-badge i
* fx. hero-sektioner, operations-hub, image-accordion, system-of-record
* osv. Én fælles visuel identitet → samme farve/font/padding overalt.
* Marginen sættes pr. komponent da layout-afstanden varierer.
* ------------------------------------------------------------- */
.fx-eyebrow,
.fx-about-hero__eyebrow,
.fx-sor__eyebrow,
.fx-opshub__eyebrow,
.fx-image-accordion__eyebrow,
.fx-feature-grid__eyebrow,
.fx-example-flow__eyebrow,
.fx-securement__eyebrow,
.fx-industry-xlinks__eyebrow,
.fx-partnership__eyebrow,
.fx-dashboards__eyebrow,
.fx-height-detection__eyebrow {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: var(--fx-mint, #E0F8DE);
color: var(--fx-dark-green, #004642);
font-family: var(--fx-font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* -------------------------------------------------------------
* KONVENTION — checklist-ikon (site-wide)
*
* Standard "check"-ikon der bruges på checkpunkt-lister på tværs af
* sitet (fx "Inspections directly on the railcars" → bullet-liste,
* feature-bullets osv.). Mint-grøn cirkel-baggrund (#E0F8DE) med
* mørk grøn checkmark (#004642) — matcher eyebrow-pill-paletten,
* så lister visuelt kobles til brand-identiteten.
*
* BRUG (anbefalet — utility-klasser):
*
*
Vehicle damage
*
Vehicle spacing …
*
*
* Sektion-specifikke lister kan fortsat have egne klasser, men bør
* genbruge samme check-SVG som ::before-baggrund, så ikonet er ens
* overalt. Hvis du har behov for et HELT andet check-look (fx solid
* filled, eller en cirkulær tick uden baggrund), så override
* eksplicit på den enkelte komponent.
* ------------------------------------------------------------- */
.fx-checklist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.fx-checklist__item {
position: relative;
padding-left: 32px; /* 22px ikon + 10px luft */
min-height: 22px;
font-family: var(--fx-font-body, "Ubuntu", sans-serif);
font-size: 16px;
line-height: 1.5;
color: var(--fx-text, #2d2f31);
}
.fx-checklist__item::before {
content: "";
position: absolute;
left: 0;
top: 0.15em; /* aligner med første tekst-linje */
width: 22px;
height: 22px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* -------------------------------------------------------------
* Global polish (site-wide, moderne defaults)
*
* Supplerer Astra uden at hardcode konkurrent-layout. Typografi-skala
* for overskrifter styres stadig af h1–h6-blokkene ovenfor —
* typography.css overskriver ikke længere line-height på headings.
* ------------------------------------------------------------- */
body {
color: var(--fx-text-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: rgba(22, 59, 107, 0.2);
/* Bevar elementets tekstfarve (muted vs. heading); undgå tvungen sort + WebKit-hvid
når kun background er sat. */
color: inherit;
-webkit-text-fill-color: inherit;
}
::-moz-selection {
background: rgba(22, 59, 107, 0.2);
color: inherit;
}
/* Diskret focus-ring for tastatur (matcher brand-blå). */
:focus-visible {
outline: 2px solid var(--fx-blue, #163b6b);
outline-offset: 2px;
}
/* Museklik: undgå dobbelt-ring på links når browseren stadig viser :focus */
a:focus:not(:focus-visible) {
outline: none;
}
/* --- focalx-typography --- */
/**
* FocalX — Typography base styles.
*
* Globale defaults for overskrifter og body text: konsistent margin-bottom
* + line-height. Komponent-klasser (fx .fx-cta__title) overrider frit.
*
* Loader globalt efter tokens.css så alle sider og templates picker det op.
*/
h1, h2, h3, h4, h5, h6 {
margin: 0 0 16px;
font-weight: 700;
color: var(--fx-text, #2d2f31);
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
h1 { margin-bottom: 28px; }
h2 { margin-bottom: 24px; }
h3 { margin-bottom: 18px; }
h4 { margin-bottom: 16px; }
h5 { margin-bottom: 14px; }
h6 { margin-bottom: 14px; }
/* Body text: konsistent margin-bottom mellem paragraffer */
p {
margin: 0 0 24px;
line-height: 1.65;
}
p:last-child {
margin-bottom: 0;
}
/* Strong: altid primær text-color site-wide, så fremhævninger står klart
også i prose med muted body-color (fx .fx-vi-prose, .fx-ai-prose). */
strong, b {
color: var(--fx-text, #2d2f31);
font-weight: 700;
}
/* Fjern den globale margin på overskrifter der står som sidste barn i
en container (fx. kun-heading sektioner) — undgår visuel "luft" nedad. */
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
margin-bottom: 0;
}
/* --- focalx-global-landing --- */
/**
* FocalX — fælles polish for alle custom landingssider og PHP-skabeloner.
*
* Scopet til #fx-main så Astra-header/footer, widgets og evt. Elementor-
* sider uden #fx-main ikke påvirkes.
*
* Loader globalt efter typography.css (via functions.php).
*/
#fx-main.fx-main {
color: var(--fx-text-body);
}
/* Ingen global border mellem #fx-main-sektioner — hårgrænser på hvert skift
føltes tunge; rytme kommer fra hver sektions padding/background (logo-
carousel har stadig egen diskret top-border i logo-carousel.css). */
/* Lidt pænere linjeskift i løbende brødtekst (Chrome 117+, Safari 17.5+). */
@supports (text-wrap: pretty) {
#fx-main.fx-main p {
text-wrap: pretty;
}
}
/* Diskret typografi for citater i migreret indhold / WYSIWYG. */
#fx-main.fx-main blockquote {
margin: 1.25em 0;
padding: 0.35em 0 0.35em 1.15em;
border-left: 4px solid rgba(22, 59, 107, 0.28);
color: var(--fx-text-body);
font-style: italic;
}
#fx-main.fx-main blockquote p:last-child {
margin-bottom: 0;
}
/* Horisontal skillelinje: brug design tokens i stedet for browser-default grå. */
#fx-main.fx-main hr {
border: 0;
border-top: 1px solid var(--fx-border, #e5e7eb);
margin: 2em 0;
}
/* Lister uden egen BEM-klasse (fx. WYSIWYG) — luft og læsbarhed.
Undtag `.pill-track` (hero-ToC): `li + li`-margin er tænkt til vertikale
brødtekst-lister; i en horisontal flex-række giver det “første pill højere”. */
#fx-main.fx-main :is(ul, ol):not([class*="fx-"]):not([class*="wp-block"]):not(.pill-track) {
line-height: 1.65;
}
#fx-main.fx-main :is(ul, ol):not([class*="fx-"]):not([class*="wp-block"]):not(.pill-track) li + li {
margin-top: 0.35em;
}
/* --- focalx-buttons --- */
/**
* FocalX — Button utilities.
*
* Genbrugelige CTA-knapper på tværs af sitet. Bruges som:
* Text
*
*
* Afhænger af design tokens (css/tokens.css).
*
* KONVENTION — knap-radius:
* Alle knapper på sitet defaulter til border-radius: 50px (via
* --fx-btn-radius i tokens.css). Det er et bevidst design-valg så
* CTA'er er tydeligt afrundede og signalerer "klik". Hvis en specifik
* knap skal have en anden radius (fuld 999px pill, skarpere 12px,
* osv.), override da border-radius eksplicit på den enkelte knap-
* variant — fx .fx-btn--pill (999px) nedenfor.
*/
.fx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
min-height: 48px;
font-family: var(--fx-font-body);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--fx-btn-radius, 50px);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
white-space: nowrap;
-webkit-appearance: none;
appearance: none;
}
.fx-btn__label {
font-size: 16px;
}
.fx-btn:focus-visible {
outline: 2px solid var(--fx-blue);
outline-offset: 3px;
}
.fx-btn:active {
transform: translateY(1px);
}
/* -- Primary: filled brand blue -- */
.fx-btn--primary {
background: var(--fx-blue);
color: #ffffff;
border-color: var(--fx-blue);
}
.fx-btn--primary:hover,
.fx-btn--primary:focus {
background: var(--fx-blue-hover);
border-color: var(--fx-blue-hover);
color: #ffffff;
text-decoration: none;
}
/* -- Secondary: ghost / outline -- */
.fx-btn--secondary {
background: transparent;
color: var(--fx-text);
border-color: var(--fx-border);
}
.fx-btn--secondary:hover,
.fx-btn--secondary:focus {
background: var(--fx-bg-muted);
border-color: var(--fx-text);
color: var(--fx-text);
text-decoration: none;
}
/* -- Tertiary: text-only link-like button -- */
.fx-btn--link {
padding: 8px 4px;
min-height: auto;
background: transparent;
border-color: transparent;
color: var(--fx-link);
}
.fx-btn--link:hover,
.fx-btn--link:focus {
color: var(--fx-link-hover);
text-decoration: underline;
}
/* -- Size variants -- */
.fx-btn--sm {
padding: 8px 16px;
min-height: 36px;
font-size: 14px;
}
.fx-btn--lg {
padding: 16px 32px;
min-height: 56px;
font-size: 16px;
}
/* -- Full width (useful on mobile) -- */
.fx-btn--block {
width: 100%;
}
/*
* -- Pill: stærkt afrundet, subtil blå shadow --
*
* KONVENTION — knap-højde:
* Pill-knapper er sitets primære "store" CTA og deler højde med
* `.whiw-trigger` (Watch how it works) så de matcher pixel-perfekt
* når de står side-om-side i hero / CTA-rækker. Effective rendered
* height = 52px (arrow-bobblen `.fx-btn__arrow` er 24px + padding-y
* 12+12 + border 2+2). Vi sætter `min-height: 52px` så pills _uden_
* arrow også bliver 52px — så højden er ens uanset variant.
* Hvis du ændrer arrow-størrelsen eller padding, skal `.whiw-trigger`
* (css/watch-how-it-works-btn-popup.css) opdateres i samme ombæring.
*/
.fx-btn--pill {
border-radius: 999px;
padding: 12px 24px;
min-height: 52px;
font-size: 15px;
font-weight: 600;
box-shadow: 0 4px 14px rgba(22, 59, 107, 0.25);
transition:
background-color 0.2s ease,
box-shadow 0.25s ease,
transform 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.fx-btn--pill:hover,
.fx-btn--pill:focus-visible {
box-shadow: 0 8px 24px rgba(22, 59, 107, 0.38);
transform: translateY(-1px);
}
/* -- Arrow: pil der slider til højre on hover -- */
.fx-btn--arrow {
gap: 12px;
padding-right: 24px;
}
.fx-btn__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: currentColor;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
flex-shrink: 0;
}
.fx-btn__arrow svg {
width: 12px;
height: 12px;
display: block;
}
.fx-btn--arrow:hover .fx-btn__arrow,
.fx-btn--arrow:focus-visible .fx-btn__arrow {
transform: translateX(4px);
background: rgba(255, 255, 255, 0.24);
}
/* Secondary-variant: mørk arrow-bobble på lys baggrund */
.fx-btn--secondary .fx-btn__arrow {
background: rgba(45, 47, 49, 0.08);
}
.fx-btn--secondary:hover .fx-btn__arrow,
.fx-btn--secondary:focus-visible .fx-btn__arrow {
background: rgba(45, 47, 49, 0.14);
}
/* --- focalx-cta --- */
/**
* CTA section (.fx-cta)
*
* Reusable call-to-action sektion brugt på landingssider på tværs af sitet.
* Mørk baggrund (#2d2f31), hvid pill-knap, ét samlet vandret layout på desktop.
* Stables vertikalt på mobil med fuld-bredde knap.
*
* Bruger globale tokens fra tokens.css (--fx-*) og .fx-btn utility.
*/
.fx-cta {
padding: var(--fx-section-py) var(--fx-gutter);
background: #2d2f31;
}
.fx-cta__container {
max-width: var(--fx-max-content);
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
/* Afstand tekst ↔ knap: PC 96px / tablet 48px / mobil 24px
* (matcher sitewide 2-kolonne gap-konvention). */
gap: 96px;
}
.fx-cta__text {
text-align: left;
/* Bredde: PC 60% / tablet 50% / mobil 100% (se media queries). */
flex: 0 0 60%;
max-width: 60%;
min-width: 0;
}
/* Samme skala som øvrige sektioners h2 (tokens.css — var(--fx-h2) m.fl.). */
.fx-cta .fx-cta__title {
color: #fff;
font-size: var(--fx-h2);
line-height: var(--fx-h2-lh);
letter-spacing: var(--fx-h2-ls);
font-weight: 700;
margin: 0 0 10px;
}
.fx-cta__subtitle {
font-size: 18px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
margin: 0;
max-width: 640px;
}
.fx-cta__actions {
/* Fylder resten af rækken efter .fx-cta__text (60%/50%). */
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: 12px;
align-self: flex-start;
justify-content: flex-end;
}
.fx-cta .fx-cta__button {
background: #fff;
color: var(--fx-text);
border: 0;
border-radius: 999px;
padding: 18px 60px;
min-height: auto;
font-size: 16px;
font-weight: 600;
}
/* Tablet: mindre horisontal padding + container-gap */
@media (max-width: 1024px) {
.fx-cta__container {
gap: 48px;
}
.fx-cta__text {
flex: 0 0 50%;
max-width: 50%;
}
}
.fx-cta .fx-cta__button:hover,
.fx-cta .fx-cta__button:focus {
background: var(--fx-bg-soft);
color: var(--fx-text);
}
/* Mobil: tekst øverst, knap fuld-bredde i bunden */
@media (max-width: 767px) {
.fx-cta__container {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.fx-cta__text {
text-align: left;
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}
.fx-cta__actions {
flex: 1 1 100%;
width: 100%;
align-self: stretch;
justify-content: stretch;
}
.fx-cta__actions .fx-cta__button {
width: 100%;
justify-content: center;
padding: 18px 30px;
}
.fx-cta__subtitle { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.fx-cta__subtitle {
font-size: 17px;
}
.fx-cta .fx-btn.fx-cta__button {
padding: 18px 36px;
}
}
/* --- focalx-custom-astra-child-theme-theme-css --- */
/**
Theme Name: FocalX Custom Astra Child Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: focalx-custom-astra-child-theme
Template: astra
*/
img {
box-shadow: none !important;
}
.post-content a {
color: var(--fx-link, #163b6b);
text-decoration: underline;
text-underline-offset: 0.14em;
font-weight: 500;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.post-content a:hover {
color: var(--fx-link-hover, #0f2d54);
text-decoration: none;
font-weight: 500;
}
.open-text-area ol,
.open-text-area ul {
margin-left: 0 !important;
}
.image-container img {
overflow: visible;
z-index: 0;
}
.square-wrapper {
overflow: hidden;
border-radius: 24px;
}
.square-wrapper img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.square-wrapper-small {
overflow: hidden;
border-radius: 18px;
}
.square-wrapper-small img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.open-text-area {
max-width: 960px !important;
margin: auto !important;
p {
margin-bottom: 24px !important;
}
li {
margin-bottom: 20px !important;
}
}
.open-text-area h2 {
font-size: 32px !important;
line-height: 1.3 !important;
}
.open-text-area h3 {
font-size: 28px !important;
line-height: 1.4 !important;
}
.open-text-area h4 {
font-size: 20px !important;
line-height: 1.4 !important;
}
/* Tablet (maks 1024px) */
@media screen and (max-width: 1024px) {
.open-text-area h2 {
font-size: 28px !important;
line-height: 1.4 !important;
}
.open-text-area h3 {
font-size: 24px !important;
line-height: 1.4 !important;
}
.open-text-area h4 {
font-size: 18px !important;
line-height: 1.5 !important;
}
}
/* Mobil (maks 768px) */
@media screen and (max-width: 768px) {
.open-text-area h2 {
font-size: 24px !important;
line-height: 1.4 !important;
}
.open-text-area h3 {
font-size: 20px !important;
line-height: 1.5 !important;
}
.open-text-area h4 {
font-size: 16px !important;
line-height: 1.5 !important;
}
}
.e-n-tab-title {
box-shadow: none;
}
@media (max-width: 768px) {
.e-n-tabs-heading {
margin-right: -24px; /* Og i højre side */
margin-left: -24px; /* Og i højre side */
padding: 0 24px; /* Giv containeren sin egen “polstring” indeni */
padding-right: 24px; /* Giv containeren sin egen “polstring” indeni */
overflow-x: auto; /* Tillad vandret rulning */
white-space: nowrap; /* Undgå, at tabs bryder linjen */
}
}
/* Sikrer, at karusellen fylder 100% af sin container */
#reviewCarouselContainer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Overskrift og navigation */
.carousel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48px;
width: 100%;
}
/* Responsivt layout */
@media (max-width: 768px) {
.carousel-header {
flex-direction: column;
align-items: flex-start;
}
.carousel-nav {
margin-top: 12px;
align-self: flex-end;
}
}
/* Tekststørrelser for responsivitet */
@media (max-width: 1024px) {
.carousel-header h2 {
font-size: 48px;
}
}
@media (max-width: 768px) {
.carousel-header h2 {
font-size: 32px !important;
}
}
/* Overskrift styling */
.carousel-header h2 {
color: #fff !important;
margin: 0;
font-size: 52px;
font-weight: bold;
}
/* Navigation knapper */
.carousel-nav {
display: flex;
gap: 12px;
}
.carousel-nav button {
background: #fff;
border: none;
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.carousel-nav button i {
font-size: 24px;
color: #2d2f31;
}
/* Karusel styling */
.carousel {
display: flex;
width: 100%;
overflow: hidden;
position: relative;
touch-action: pan-y pinch-zoom; /* Tillader vertikal scroll men optimerer for swipe */
user-select: none; /* Forhindrer tekst-selektion under swipe */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Rækker med fleksibel højde */
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
flex-wrap: nowrap;
touch-action: pan-x pan-y; /* Tillader horisontal swipe og vertikal scroll */
}
/* Desktop: Vis 2 reviews side ved side i hver carousel-item */
@media (min-width: 769px) {
.carousel-inner {
display: flex !important;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
}
.carousel-item {
width: 100% !important;
min-width: 100% !important;
flex-shrink: 0;
}
.carousel-item.active {
display: flex !important;
width: 100% !important;
}
/* Sørg for at inactive items er skjult */
.carousel-item:not(.active) {
display: none !important;
}
/* Col-6 skal være 50% på desktop (2 side ved side) */
.carousel-item .col-6 {
max-width: 50% !important;
width: 50% !important;
}
/* Vis begge col-6's på desktop */
.carousel-item .col-6.mobile-hidden {
display: flex !important;
}
}
/* Sikrer, at kolonnerne fylder hele sektionen */
.carousel-item .row {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 0;
width: 100%;
align-items: stretch; /* Sørger for, at kolonnerne fylder hele højden */
}
/* Kolonner fylder altid hele sektionen */
.carousel-item .col-6 {
flex: 1;
max-width: 50%;
padding: 0;
display: flex;
}
/* Mobil: En kolonne pr. række */
@media (max-width: 768px) {
.carousel-item .col-6 {
max-width: 100%;
}
}
/* Kort fylder altid 100% af kolonnen */
.carousel .card {
background-color: #fff;
border-radius: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%; /* Sørger for, at kortene fylder kolonnen */
}
/* Kortindhold strækker sig for at udligne højden */
.card-body {
flex-grow: 1;
padding: 24px !important;
display: flex;
flex-direction: column;
min-height: 340px !important;
}
/* Footer i kort - Sørger for, at bunden holder sig stabil */
.review-footer {
display: flex;
align-items: center;
margin-top: auto; /* Skubber footeren til bunden */
padding: 24px;
}
.company-logo {
max-height: 125px;
max-width: 200px
}
/* Profilbillede i review-kort: se css/review-carousel.css (.review-photo-wrap). */
/* Stjerner */
.star-rating {
font-size: 20px;
margin-bottom: 24px;
color: #f0ad4e;
}
/* Tekststyling */
.review-text {
margin-bottom: 0;
font-size: 22px !important;
}
.name-text {
font-size: 24px !important;
font-weight: bold;
margin: 0;
}
.job-text {
font-size: 14px;
margin: 0;
}
/* Mobile styling */
@media (max-width: 768px) {
.review-text {
font-size: 18px !important;
}
.name-text {
font-size: 18px !important;
}
.job-text {
font-size: 14px;
}
}
/* Karusel-animation */
.carousel-item {
display: none;
width: 100%;
transition: transform 0.5s ease-in-out;
flex-shrink: 0;
}
.carousel-item.active {
display: flex;
}
/* Desktop: Sørg for at 2 items vises side ved side */
@media (min-width: 769px) {
.carousel-item.active {
display: flex !important;
}
}
/* Standard styling for kort (Desktop + Tablet) */
.carousel-item .row {
display: flex;
flex-wrap: wrap;
}
.carousel-item .col-6 {
flex: 1;
max-width: 50%;
padding: 0;
display: flex;
}
/* 📌 Mobil: Vis kun 1 item ad gangen */
@media (max-width: 768px) {
.carousel-inner {
flex-wrap: nowrap;
touch-action: pan-x pan-y; /* Tillader horisontal swipe */
}
.carousel {
touch-action: pan-x pan-y; /* Tillader horisontal swipe */
}
.carousel-item {
width: 100%;
min-width: 100%;
}
.carousel-item.active {
display: flex;
width: 100%;
}
.carousel-item .row {
width: 100%;
margin: 0;
}
.carousel-item .col-6 {
max-width: 100%;
width: 100%;
flex: none;
}
/* Skjul den anden review på mobil */
.carousel-item .col-6.mobile-hidden {
display: none !important;
}
.card {
max-width: 100%;
width: 100%;
}
}
.author-box{
display:flex;
align-items:center;
gap:16px;
}
.author-avatar{
width:64px;
height:64px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;
}
.author-avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.author-box__name{
font-weight:700;
color:#163B6B;
font-size:24px;
line-height:1.3;
}
@media (max-width:1024px){
.author-box__name{
font-size:21px;
}
}
.damage-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.damage-item {
display: flex;
align-items: center;
background-color: #fff;
border: 4px solid #F6F5F8;
padding: 6px 12px;
border-radius: 12px;
color: #163B6B;
min-width: 200px;
box-sizing: border-box;
}
.damage-item img {
height: 48px;
width: auto;
max-width: 72px;
object-fit: contain;
margin-right: 8px;
flex-shrink: 0;
}
@media (max-width: 700px) {
.damage-container {
gap: 6px;
}
.damage-item {
border: 2px solid #F6F5F8;
font-size: 14px;
flex: 1 1 calc(50% - 6px);
max-width: calc(50% - 6px);
min-width: 0;
padding: 6px 0;
}
.damage-item img {
height: 40px;
max-width: 50px;
margin-right: 6px;
}
.damage-item:nth-child(odd):last-child {
margin-left: auto;
margin-right: auto;
}
}
#ast-scroll-top {
right: 10px !important;
bottom: 10px !important;
}
#ast-scroll-top .ast-icon {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
width: 100%;
height: 100%;
}
#ast-scroll-top svg {
width: 18px !important;
height: 16px !important;
display: block;
}
.green-pill {
background: #E0F8DE;
border-radius: 50px;
}
/**
* Undgår “desktop-layout” på mobil: horisontal scroll, forkert skalering, Astra/container-fælder.
* Indlæses efter Astra-grundstyles.
*/
html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
max-width: 100%;
overflow-x: hidden; /* clip er nyere; hidden virker overalt */
}
/* Almindelige WP/Astra-wraps — min-width:0 lader flex/grid børn krympe */
#page,
.site,
#primary,
.site-content,
.site-content .ast-container,
.ast-separate-container .ast-article-single,
.ast-page-builder-template .site-content {
min-width: 0;
max-width: 100%;
}
/*
* FocalX (#fx-main): Astra bruger #page som flex-kolonne (min-height: 100vh)
* og .site-content { flex-grow: 1 }. Med builder-flex på .ast-container kan
* hovedkolonnen ellers ligne den er “trukket” i højden. Vi pakker indhold
* til dets naturlige højde; footer forbliver under .site-content.
*/
body:has(#fx-main) .site-content .ast-container:has(#fx-main) {
justify-content: flex-start;
min-height: 0;
}
#primary:has(#fx-main) {
min-height: 0;
}
#fx-main {
flex: 0 0 auto;
min-height: 0;
width: 100%;
max-width: 100%;
}
/* Medie og brede tabeller */
img,
video,
svg,
canvas {
max-width: 100%;
height: auto;
}
.entry-content {
overflow-wrap: anywhere;
word-wrap: break-word;
}
/* --- focalx-footer --- */
/**
* FocalX mega-footer — dark bar, WPML + social row, legal strip.
*/
.fx-site-footer {
--fx-footer-bg: var(--fx-text, #2d2f31);
--fx-footer-text: #babfc3;
--fx-footer-heading: #fff;
--fx-footer-link: #babfc3;
--fx-footer-muted: #989ea3;
/* Samme indholdsbredde som resten af sitet (tokens.css) */
--fx-footer-max: var(--fx-max-content, 1140px);
box-sizing: border-box;
width: 100%;
margin-top: auto;
margin-bottom: 0;
padding: var(--fx-section-py, 96px) var(--fx-gutter, 24px) 24px;
background: var(--fx-footer-bg);
color: var(--fx-footer-text);
font-family: var(--fx-font-body);
font-size: 15px;
line-height: 1.6;
}
.fx-site-footer *,
.fx-site-footer *::before,
.fx-site-footer *::after {
box-sizing: border-box;
}
.fx-site-footer__shell {
max-width: var(--fx-footer-max);
margin: 0 auto;
overflow: visible;
}
@media (max-width: 1024px) {
.fx-site-footer {
padding-top: var(--fx-section-py, 72px);
}
}
/* ----- Main columns ----- */
.fx-site-footer__grid {
display: grid;
grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr));
gap: 32px 28px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Tablet: 3 kolonner; 2. række: tom celle til venstre, About midt, Resources højre */
@media (max-width: 1100px) and (min-width: 601px) {
.fx-site-footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fx-site-footer__grid > .fx-site-footer__col:nth-child(4) {
grid-column: 2;
grid-row: 2;
}
.fx-site-footer__grid > .fx-site-footer__col:nth-child(5) {
grid-column: 3;
grid-row: 2;
}
}
@media (max-width: 600px) {
.fx-site-footer__grid {
grid-template-columns: 1fr;
}
}
.fx-site-footer__col--brand {
min-width: 0;
}
.fx-site-footer__logo {
display: inline-block;
line-height: 0;
margin-bottom: 16px;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.fx-site-footer__logo img {
display: block;
height: auto;
max-height: 28px;
width: auto;
max-width: 118px;
}
.fx-site-footer__tagline {
margin: 0 0 20px;
max-width: 320px;
color: var(--fx-footer-text);
font-size: 15px;
line-height: 1.6;
}
.fx-site-footer__contact {
margin: 0;
}
.fx-site-footer__mailto {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
font-weight: 500;
}
.fx-site-footer__mailto span {
color: #fff;
}
.fx-site-footer__mailto:hover,
.fx-site-footer__mailto:focus-visible {
color: #fff;
opacity: 0.92;
}
.fx-site-footer__mail-ico {
flex-shrink: 0;
opacity: 0.85;
}
/* h2: Astra kan overskrive farve — kolonneoverskrifter */
.fx-site-footer h2.fx-site-footer__heading,
.fx-site-footer .fx-site-footer__heading {
margin: 0 0 14px;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: #fff !important;
}
.fx-site-footer__links {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--fx-font-body);
display: flex;
flex-direction: column;
gap: 16px;
}
.fx-site-footer__links a {
color: var(--fx-footer-link);
text-decoration: none;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}
.fx-site-footer__links a:hover,
.fx-site-footer__links a:focus-visible {
color: #f2f4f7;
text-decoration: none;
}
.fx-site-footer__links a:focus {
outline: none;
}
.fx-site-footer__links a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px;
}
/* ----- Mid: language + social ----- */
.fx-site-footer__mid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 24px;
padding: 22px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
overflow: visible;
}
.fx-site-footer__lang-wrap {
min-width: 0;
overflow: visible;
}
/* Sprog: custom dropdown — aktivt sprog kun i trigger; menu = øvrige sprog med WPML-flag */
.fx-site-footer__lang-field {
display: inline-flex;
align-items: center;
gap: 10px;
}
.fx-site-footer__lang-dropdown-inner {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
min-width: min(280px, 100%);
max-width: 100%;
overflow: visible;
}
.fx-site-footer__lang-btn {
/* Nulstil Astra-default