/** * 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; --fx-bg-soft: #f6f5f8; /* Lavender-grå sektionsbaggrund (--e-global-color-919d7a3) */ --fx-bg-muted: #eeecf2; /* -------- Grænser -------- */ --fx-border: #e5e7eb; --fx-border-soft: #f0f0f4; /* -------- 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.04); --fx-shadow: 0 4px 16px rgba(22, 59, 107, 0.08); --fx-shadow-lg: 0 8px 32px rgba(22, 59, 107, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04); /* -------- 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 */ --fx-gutter: 24px; --fx-section-py: 96px; --fx-col-gap: 96px; /* KONVENTION — gap mellem kolonner i 2-kolonne content-sektioner (hero, opshub, image- accordion, partnership, example-flow, system-of-record osv.). Desktop: 96px · Tablet: 48px · Mobil: 24px. 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: 72px; --fx-col-gap: 48px; } } /* 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: 72px; --fx-col-gap: 24px; } } /* ------------------------------------------------------------- * 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); /* Bevidst INGEN margin-reset her — post-body, Gutenberg-blokke * og andre flow-content kontekster relyer på browser-default * margin for vertikal rytme mellem heading + næste afsnit. * Sektion-komponenter (.fx-*__title osv.) sætter margin: 0 * lokalt hvor det er ønsket. */ } 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): * * * 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; }