, so the first body
after it inherits `p + p`'s 1.1rem margin-top — zero it (needs higher specificity than `.split-text p + p`). */ .split-text .lead + p, .pb-text .lead + p { margin-top: 0; } /* Frontpage Compliance — text left (heading, bold sub-line, paragraphs, Sikkerhedsstandarder + list all stacked), photo right — mirrors the live page */ @media (min-width: 861px) { #compliance .split { grid-template-columns: 1.12fr 1fr; align-items: stretch; } } #compliance .split-text { align-self: start; } #compliance .split-media { align-self: stretch; } /* Sundheds-IT "FlexCare pleje- og patientplatform": full-width heading + lead span the section, then a WIDE text column on the left and the photo (nurse/patient) on the right shown at its NATURAL aspect — no cover-crop, no letterbox bands, square corners (client: the steel side-bands looked wrong; keep the whole photo, out to the right, and widen the copy). Still steel-toned via the photo-flush ::after (sized to the image since the media isn't stretched). */ #patientplatform .pp-head { max-width: none; margin-bottom: clamp(1.2rem, 2.2vw, 1.7rem); } /* Bold sub-headline sits tight directly above the body copy — no gap (mirrors live). */ #patientplatform .pp-sub, #viden .pp-sub, #funktioner .pp-sub, #implementering .pp-sub, #integrationer .pp-sub, #erfa .pp-sub, #nyt .pp-sub { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.5; margin-bottom: .25rem; } /* 2nd sub-head in the Implementering / ERFA split sits as a new block, with clear space above it. */ #implementering .split-text p + .pp-sub, #erfa .split-text p + .pp-sub { margin-top: 1.6rem; } /* Kill the inherited p+p top-margin on the first body paragraph so the bold sub-headline sits tight above the copy (needs higher specificity than `.split-text p + p`). */ #patientplatform .split-text .pp-sub + p, #viden .viden-col .pp-sub + p, #funktioner .funk-intro .pp-sub + p, #implementering .split-text .pp-sub + p, #integrationer .split-text .pp-sub + p, #erfa .split-text .pp-sub + p, #nyt .split-text .pp-sub + p { margin-top: 0; } /* ===== Videndeling case tiles + ERFA/Nyt media ===== */ #videndeling .viden-lead { max-width: none; margin: 0 0 .7rem; } #videndeling .viden-intro { max-width: none; margin-bottom: clamp(1.8rem,3.5vw,2.8rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.2rem); } #videndeling .viden-intro p { margin: 0; } @media (max-width: 760px) { #videndeling .viden-intro { grid-template-columns: 1fr; gap: 1rem; } } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem); } @media (max-width: 1000px) { .case-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .case-grid { grid-template-columns: 1fr; } } .case-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.65rem 1.45rem; box-shadow: var(--shadow-sm); transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .3s var(--ease); } /* steel-seam der ruller ind fra venstre på hover */ .case-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--brand), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .case-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(38,66,76,.55); border-color: var(--steel); } .case-card:hover::before { transform: scaleX(1); } /* svagt ghost-nummer i hjørnet */ .case-num { position: absolute; top: .35rem; right: 1.1rem; font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--brand); opacity: .07; letter-spacing: -.03em; } /* kategori-ikon i steel-badge */ .case-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: linear-gradient(140deg, var(--teal), var(--brand) 72%); color: #fff; box-shadow: 0 9px 20px -9px rgba(47,107,122,.75); transition: transform .32s var(--ease); } .case-ico svg { width: 24px; height: 24px; } .case-card:hover .case-ico { transform: translateY(-2px) rotate(-5deg); } .case-card .eyebrow { margin-top: .35rem; } .case-card h3 { font-size: 1.16rem; line-height: 1.28; color: var(--ink); margin: .1rem 0 0; transition: color .22s; } .case-card:hover h3 { color: var(--brand); } .case-card > p { color: var(--muted); font-size: .92rem; margin: 0; } .case-card .case-more { margin-top: auto; padding-top: 1.05rem; display: inline-flex; align-items: center; gap: .55rem; color: var(--brand); font-weight: 700; font-family: var(--font-display); font-size: .9rem; } .case-card .case-more svg { width: 16px; height: 16px; padding: 5px; box-sizing: content-box; border-radius: 50%; border: 1.5px solid var(--brand); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .case-card:hover .case-more svg { background: var(--brand); color: #fff; transform: translateX(3px); } /* Kreativ 6. flise — steel-fyldt "har I en case?"-CTA */ .case-invite { justify-content: flex-start; color: #fff; border-color: transparent; background: radial-gradient(130% 150% at 85% 0%, var(--brand), var(--brand-600) 55%, var(--footer)); } .case-invite::before { display: none; } .case-invite:hover { border-color: transparent; box-shadow: 0 24px 44px -20px rgba(38,66,76,.7); } .case-invite .case-ico { background: rgba(255,255,255,.16); box-shadow: none; } .case-invite .eyebrow::before { background: linear-gradient(90deg, #c6dde2, rgba(198,221,226,.4)); } .case-invite h3, .case-invite:hover h3 { color: #fff; } .case-invite > p { color: rgba(255,255,255,.85); } .case-invite .case-more { color: #fff; } .case-invite .case-more svg { border-color: rgba(255,255,255,.7); } .case-invite:hover .case-more svg { background: #fff; color: var(--brand); } .media-credit { display: block; margin-top: .6rem; color: var(--muted); font-size: .78rem; font-style: italic; } /* Nyt fra FlexCare — full-bleed band: news-card image as the section background, anchored RIGHT (shows in full colour there) and dimmed toward the LEFT into a dark steel veil where the white copy sits. */ .nyt-band { position: relative; overflow: hidden; background: #16262e; isolation: isolate; } .nyt-bg { position: absolute; inset: 0; z-index: -2; background: url("/assets/img/flexcare-nyt-cards-v3.jpg") no-repeat right center / auto 100%; } /* steel veil: opaque on the left (readable copy) → transparent on the right (image normal) */ .nyt-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #16262e 0%, rgba(22,38,46,.97) 24%, rgba(24,42,52,.82) 42%, rgba(28,48,60,.45) 60%, rgba(28,48,60,.12) 78%, rgba(28,48,60,0) 100%); } .nyt-band-wrap { position: relative; } .nyt-content { max-width: 46%; } .nyt-band h2 { color: #fff; } .nyt-band .lead { color: #fff; } .nyt-band p { color: rgba(255,255,255,.9); } /* Same overskrift → underskrift → tekst rhythm as the .split-text sections (eyebrow→h2 = mt-1 1rem; h2→underskrift = 1rem; underskrift→body tight; body p+p = 1.1rem). */ .nyt-content h2 { margin-bottom: 1rem; } .nyt-content .lead { margin-bottom: .3rem; } .nyt-content .lead + p { margin-top: 0; } .nyt-content p + p { margin-top: 1.1rem; } /* CTA matches the hero "Ring 70 22 32 35" button — white text + light outline (.btn-outline-light). */ .nyt-link { margin-top: 1.6rem; } .nyt-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .nyt-link:hover svg { transform: translateX(4px); } @media (max-width: 900px) { .nyt-content { max-width: none; } .nyt-bg::after { background: linear-gradient(90deg, rgba(22,38,46,.96) 0%, rgba(24,42,52,.9) 55%, rgba(28,48,60,.7) 100%); } } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); } @media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } } .news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 36px -26px rgba(38,66,76,.42); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .news-card:hover { transform: translateY(-5px); border-color: var(--brand-200, #cfe0e4); box-shadow: 0 26px 52px -26px rgba(38,66,76,.55); } .news-thumb { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--surface); } .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); } .news-card:hover .news-thumb img { transform: scale(1.04); } .news-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.35rem 1.4rem; } .news-title { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.3; color: var(--ink); margin: 0 0 .6rem; } .news-excerpt { color: var(--ink-2); font-size: .92rem; line-height: 1.55; margin: 0 0 1rem; } .news-link { margin-top: auto; align-self: flex-start; padding-top: .2rem; font-size: .88rem; } .news-hero { text-align: left; } /* Keep the intro line no wider than the heading — wrap onto a 2nd line. (compound selector to beat the later `.legal-hero .lead { max-width:none }`) */ .news-hero.legal-hero .lead { max-width: 820px; color: rgba(255,255,255,.9); } /* Dark steel PowerNet hero — same colour setup as the case sub-pages (.case-hero--media). */ .news-hero.page-hero { border-bottom: 0; color: #fff; background: radial-gradient(120% 140% at 82% 0%, var(--brand) 0%, var(--brand-600) 42%, var(--footer) 100%); } .news-hero.page-hero::before { display: none; } .news-hero .eyebrow { color: #c6dde2; } .news-hero h1 { color: #fff; } .news-hero-cta { margin-top: clamp(1.4rem, 2.6vw, 2rem); } .news-foot { margin-top: clamp(2rem, 3.6vw, 3rem); display: flex; justify-content: center; } .news-back { padding-top: 0; } .news-back:hover svg { transform: translateX(-4px); } /* Erfa: overskrift (række 1) + tekst (række 2) i venstre kolonne; billedet spænder BEGGE rækker i højre kolonne, så dets top flugter med overskriftens top (photo-flush cover udfylder højden). */ #erfa .media-credit { line-height: 1.4; flex: none; } @media (min-width: 901px) { #erfa .erfa-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } #erfa .erfa-head { grid-column: 1; grid-row: 1; margin-bottom: clamp(1rem, 2vw, 1.5rem); } #erfa .erfa-body { grid-column: 1; grid-row: 2; } #erfa .erfa-media-col { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; } #erfa .erfa-media { flex: 1 1 auto; min-height: 0; } } /* ===== FlexCare case detail pages (Videndeling om FlexCare) ===== */ .back-link { display: flex; width: max-content; align-items: center; gap: .45rem; color: var(--brand); font-weight: 600; font-family: var(--font-display); font-size: .92rem; text-decoration: none; margin-bottom: .2rem; } .back-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .back-link:hover svg { transform: translateX(-3px); } .case-hero .case-byline { color: var(--muted); font-size: .96rem; margin: .9rem 0 0; } /* Case-hero med produktbillede: dark steel PowerNet-baggrund, lys tekst, cut-out til højre */ .page-hero.case-hero--media { position: relative; overflow: hidden; border-bottom: 0; background: radial-gradient(120% 140% at 82% 0%, var(--brand) 0%, var(--brand-600) 42%, var(--footer) 100%); } .case-hero--media::before { display: none; } .case-hero--media .case-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } /* Alle case-hero-sektioner har præcis samme højde, uafhængigt af titel/billede */ @media (min-width: 821px) { .page-hero.case-hero--media { display: flex; align-items: center; min-height: 580px; } .page-hero.case-hero--media > .wrap { width: min(var(--wrap), 100% - 2.4rem); } } .case-hero--media .inner { max-width: 100%; } .case-hero--media .eyebrow { color: #c6dde2; } .case-hero--media h1 { color: #fff; } .case-hero--media .case-byline { color: rgba(255,255,255,.82); } .case-hero--media .back-link { color: #cfe4ea; } .case-hero--media .back-link:hover { color: #fff; } .case-hero-media { display: flex; align-items: center; justify-content: center; } .case-hero-media img { max-width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); } /* Hero-billedet i samme størrelse som "Hent specialet her" */ @media (min-width: 821px) { .case-hero--media .case-hero-media { justify-content: center; } .case-hero--media .case-hero-media img { max-width: 280px; } /* Arm-billedet (tidligibrugtagning / centralindholdskoordinering) i dobbelt størrelse */ .case-hero--media .case-hero-media img[src*="case-tbt-tablet"] { max-width: 560px; } } @media (max-width: 820px) { .case-hero--media .case-hero-grid { grid-template-columns: 1fr; } .case-hero-media { order: -1; max-width: 460px; margin-inline: auto; } } /* "Hent specialet her" — tekst venstre + tesis-forside højre */ .spec-split { grid-template-columns: 1.4fr .6fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); } .spec-media { display: flex; align-items: center; justify-content: center; } .spec-media img { max-width: 280px; width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(38,66,76,.28)); } @media (max-width: 820px) { .spec-split { grid-template-columns: 1fr; } .spec-media { order: 2; max-width: 320px; margin-inline: auto; } } .case-body .pp-sub { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.5; margin: 1.8rem 0 .25rem; } .case-body .pp-sub + p { margin-top: 0; } .case-body > p { margin: 0 0 1.05rem; } .case-body .bullet-list { margin: 1.4rem 0; } .case-body .bullet-list li { margin-bottom: .7rem; } .case-slides { margin-top: 1.8rem; } /* ===== Integrationer — full-width heading (one line) spanning over the image, then text left + the "hub" diagram right. The diagram is an infographic, NOT a photo, so it is NOT steel-toned — instead it's set into a round steel "orb": a circular steel radial-gradient disc whose tone matches the diagram's own light-steel background, so the landscape diagram melts into the circle (labels stay fully visible — the orb sits behind, nothing is cropped). A faint dashed ring + soft glow finish the round, premium look. ===== */ #integrationer .pp-head { max-width: none; margin-bottom: clamp(1.2rem, 2.2vw, 1.7rem); } @media (min-width: 861px) { #integrationer .pp-head h2 { white-space: nowrap; } } @media (min-width: 901px) { #integrationer .integr-split { grid-template-columns: 1.02fr .98fr; align-items: center; } } /* Tighter check-bullets (matches the compact list rhythm used elsewhere). */ #integrationer .feature-list { gap: .5rem; } #integrationer .std-head { margin-top: 1.6rem; } .integr-contact { margin-top: 1.4rem; color: var(--muted); } .integr-contact a { color: var(--brand); font-weight: 600; } .integr-contact a:hover { text-decoration: underline; } /* Diagram — as-is image, corners clipped to rounded so the square steel corners are replaced by the section background (image bytes untouched). */ #integrationer .split-media.integr-media { align-self: center; background: none; } #integrationer .split-media.integr-media img { width: 100%; height: auto; display: block; border-radius: 26px; box-shadow: none; object-fit: contain; } /* ===== Funktioner — two columns: intro + "Book et møde" CTA (left), a category accordion (right, same .ac-item pattern as the legal pages). Full-width heading on one line. ===== */ #funktioner .pp-head { max-width: none; margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); } @media (min-width: 861px) { #funktioner .pp-head h2 { white-space: nowrap; } } #funktioner .funk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.4rem); align-items: start; } #funktioner .funk-intro { display: flex; flex-direction: column; } #funktioner .funk-intro p + p { margin-top: 1rem; } #funktioner .funk-intro .btn { margin-top: 1.7rem; align-self: flex-start; } /* Shorter fold-out boxes: tighter row padding + smaller gap so the accordion column stays compact — keeps the left column's lower text and the button close together. */ #funktioner .funk-accordion { gap: .5rem; } #funktioner .funk-accordion .ac-head { padding-top: .72rem; padding-bottom: .72rem; } @media (max-width: 860px) { #funktioner .funk-cols { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 2.8rem); } } /* ===== Viden om FlexCare — TWO COLUMNS (mirrors live /flexcare/): each column stacks its two bold sub-heads + copy, then its media below. LEFT = film-text + tablet(video), RIGHT = publication-text + book. The tablet & book are transparent product images (NOT steel-toned). Tablet opens the FlexCare film modal; book cover opens the "Værd at vide om FlexCare" publication. ===== */ /* Full-width heading spanning over both text columns, on ONE line (desktop). */ #viden .pp-head { max-width: none; margin-bottom: clamp(1.2rem, 2.2vw, 1.7rem); } @media (min-width: 861px) { #viden .pp-head h2 { white-space: nowrap; } } /* Subgrid locks the two columns' rows onto the same baselines, so the 2nd sub-head ("Se FlexCare-filmen" / "Læs Værd at vide om FlexCare") and the media line up across columns even when the intro paragraphs differ in length. */ #viden .viden-cols { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: clamp(2rem, 5vw, 4rem); row-gap: clamp(1.4rem, 2.4vw, 1.9rem); align-items: start; } #viden .viden-col { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } #viden .viden-block { align-self: start; } @media (max-width: 760px) { #viden .viden-cols { grid-template-columns: 1fr; } #viden .viden-col { grid-row: auto; grid-template-rows: none; row-gap: 1.4rem; } } .viden-media { display: flex; justify-content: center; align-self: start; } /* Film-tabletten på sundheds-it bruger den samme genbrugelige tablet-ramme som case-videoerne — den fylder sin kolonne (ikke case-sidens 540px-cap). */ .viden-media .tablet-video { max-width: none; } /* Book rendered at the SAME visual SIZE as the tablet: the tablet (1200×859) fills the column; the book (600×541) is near-square, so at full width it'd be taller. Constrain the book's width to 79.4% (= 859/1200 × 600/541) so its HEIGHT matches the tablet's. */ .viden-book { align-items: center; } .book-open { display: block; width: 63.8%; margin-inline: auto; cursor: pointer; } .book-open img { width: 100%; height: auto; display: block; margin-inline: auto; filter: drop-shadow(0 22px 42px rgba(38,66,76,.34)); transition: transform .4s var(--ease); } .book-open:hover img, .book-open:focus-visible img { transform: translateY(-7px) rotate(-1.2deg); } /* Film modal — clean, edge-to-edge dark viewer (NO PowerNet frame/padding around it): the 16:9 video fills the dialog. */ /* Gælder ALLE film-modaler (både FlexCare-filmen og case-videoen) — ren kant-til-kant mørk viewer, ingen ramme */ .film-modal .film-dialog { width: min(980px, 100%); background: #0b1622; padding: 0; overflow: hidden; } .film-frame { position: relative; aspect-ratio: 16 / 9; background: #000; } .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; } /* Erfaringer-sektion: standard .wrap-bredde (= sundheds-it), tekst venstre + video-tablet højre. Override .split så teksten er bredest og videoen holdes kompakt til højre. */ .case-split { grid-template-columns: 1fr 1.42fr; align-items: center; } .case-split .lead { max-width: none; } .case-video-col { display: flex; align-items: center; justify-content: center; } /* Case-tabletten ~50% større end standard (klient 2026-09-02) — video-kolonnen driver bredden */ .case-video-col .tablet-video { max-width: 780px; } /* Video i den klient-leverede HVID tablet-ramme (PNG med transparent skærm + FlexCare-logo i bundrammen). Videoen (poster) ligger BAG rammen og vises gennem det transparente skærmvindue. */ .tablet-video { display: block; border: 0; padding: 0; background: none; cursor: pointer; width: 100%; max-width: 540px; } /* Blød, korrekt skygge der følger tablettens afrundede form (PNG'ens egen skygge er fjernet, så den ikke ser "afskåret" ud) — via drop-shadow på den transparente ramme-form. */ .tab-stage { position: relative; display: block; width: 100%; aspect-ratio: 1884 / 1084; filter: drop-shadow(0 22px 34px rgba(38,66,76,.20)) drop-shadow(0 6px 12px rgba(38,66,76,.12)); transition: transform .4s var(--ease); } /* Poster fylder præcist skærmvinduet i rammen (målt fra PNG'en) */ .tab-poster { position: absolute; left: 3.93%; top: 7.93%; width: 91.88%; height: 85.52%; object-fit: cover; display: block; background: #000; } .tab-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .tablet-video:hover .tab-stage, .tablet-video:focus-visible .tab-stage { transform: translateY(-5px); } .video-play-btn { position: absolute; top: 50.7%; left: 49.9%; z-index: 3; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: rgba(47,107,122,.92); color: #fff; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: transform .3s var(--ease), background .3s var(--ease); } .video-play-btn svg { width: 26px; height: 26px; margin-left: 3px; } .tablet-video:hover .video-play-btn, .tablet-video:focus-visible .video-play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--brand-600); } @media (max-width: 860px) { .case-split { grid-template-columns: 1fr; } .case-video-col { order: 2; } .tablet-video { max-width: 400px; margin-inline: auto; } } /* Slides-sektion: 2 kolonner (som live-siden), fuld .wrap-bredde. .bullet-list er display:grid — tving block+columns her, ellers ignoreres `columns`. */ .bullet-list.slides-cols { display: block; columns: 2; column-gap: clamp(1.8rem, 5vw, 4rem); margin-top: .4rem; } .slides-cols li { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: .85rem; } @media (max-width: 720px) { .bullet-list.slides-cols { columns: 1; } } .slides-cta { margin-top: clamp(1.8rem, 4vw, 2.6rem); } /* Indlejret underliste i en slides-bullet (fx "Konkrete effekter i praksis") */ .bullet-sub { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .28rem; } .bullet-sub li { position: relative; padding-left: 1rem; color: var(--ink-2); line-height: 1.5; font-size: .96em; margin: 0; } .bullet-sub li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); } .case-back { margin-top: 1.4rem; } /* Om Videndeling — reproduceret 1:1 fra originalen: underlinet versalt label + stor overskrift + bred prosa */ .vd-about { max-width: 960px; } .vd-label { display: block; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--ink-2); font-family: var(--font-body); font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 400; letter-spacing: .01em; margin: 0 0 .55rem; } .vd-title { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; color: var(--ink-2); line-height: 1.12; margin: 0 0 1.5rem; } .vd-about a { color: var(--brand); font-weight: 600; } .vd-about a:hover { text-decoration: underline; } .case-back a { color: var(--brand); font-weight: 600; text-decoration: none; } .case-back a:hover { text-decoration: underline; } /* Close button stays visible over light/video content (dark scrim) */ .film-modal .modal-close, #book-modal .modal-close { z-index: 6; background: rgba(11,22,34,.55); border-color: rgba(255,255,255,.5); } .film-modal .modal-close:hover, #book-modal .modal-close:hover { background: rgba(11,22,34,.82); } /* Flip-book viewer (self-hosted page images, vanilla JS in main.js) */ /* Book window = clean, edge-to-edge dark viewer (NO frame/padding around it), matching the film viewer. The dialog is sized to the page so the pages fill it edge-to-edge; a slim dark footer below holds the counter + Download PDF. Height-capped via the width calc so the footer always stays on-screen. */ #book-modal .book-dialog { width: min(94vw, calc(70vh * 1.414)); background: var(--ink); padding: 0; overflow: hidden; } .flip-viewer { position: relative; } .flip-stage { position: relative; width: 100%; aspect-ratio: 842 / 595; perspective: 2400px; } .flip-current { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; user-select: none; cursor: pointer; } .flip-leaf { position: absolute; inset: 0; transform-origin: left center; backface-visibility: hidden; will-change: transform; z-index: 2; } .flip-leaf[hidden] { display: none; } .flip-leaf.animate { transition: transform .62s cubic-bezier(.42,.12,.28,1); } .flip-leaf img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; user-select: none; } /* Round, semi-transparent page-turn buttons sitting over the left/right edges */ .flip-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); background: rgba(20,38,48,.34); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .2s var(--ease); } .flip-nav svg { width: 24px; height: 24px; } .flip-nav:hover { background: rgba(47,107,122,.72); border-color: #fff; transform: translateY(-50%) scale(1.06); } .flip-nav.prev { left: 14px; } .flip-nav.next { right: 14px; } .flip-nav[disabled] { opacity: .25; cursor: default; pointer-events: none; } /* Footer row — page counter + Download PDF button */ .flip-foot { display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding: .7rem 1rem; background: var(--ink); flex-wrap: wrap; } .flip-counter { color: rgba(255,255,255,.82); font-size: .85rem; letter-spacing: .04em; margin: 0; } .flip-download { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.06); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .02em; transition: background .2s, border-color .2s, transform .2s var(--ease); } .flip-download svg { width: 17px; height: 17px; } .flip-download:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); } @media (max-width: 620px) { .flip-nav.prev { left: 6px; } .flip-nav.next { right: 6px; } .flip-nav { width: 44px; height: 44px; } } @media (min-width: 861px) { #patientplatform .split { grid-template-columns: 1.05fr 1fr; align-items: center; } } #patientplatform .split-media.flexcare-media { align-self: center; background: none; } #patientplatform .split-media.flexcare-media img { position: static; width: 100%; height: auto; object-fit: contain; border-radius: 0; box-shadow: var(--shadow-md); } .compliance-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 400; color: var(--ink); line-height: 1.55; margin: 0 0 .3rem; } #compliance .split-text .compliance-lead + p { margin-top: 0; } .std-head { font-weight: 700; color: var(--ink); margin: 1.4rem 0 .5rem; } /* Implementering "Supporten …" sub-heading: extra space above + tight to the text below, so it clearly reads as the heading for the paragraph that follows. */ #implementering .std-head { margin-top: 2.5rem; margin-bottom: .3rem; } /* zero the following paragraph's top margin (it otherwise inherits p + p's 1.1rem), so the heading sits directly on top of the text it introduces */ #implementering .std-head + p { margin-top: 0; } #compliance .bullet-list { gap: .12rem; } #compliance .bullet-list li { line-height: 1.5; } .bullet-list { list-style: none; display: grid; gap: .45rem; } .bullet-list li { position: relative; padding-left: 1.05rem; color: var(--ink-2); line-height: 1.6; } .bullet-list li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #6f9aa8; } /* Site-wide: render every .bullet-list marker as the reduced steel checkmark box (same graphic as .feature-list .chk) instead of a dot. */ .bullet-list > li { padding-left: 1.55rem; } .bullet-list > li::before { left: 0; top: .18em; width: 13px; height: 13px; border-radius: 4px; background: var(--brand-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat; } /* PowerNet som arbejdsplads — mirrors the live section: full-bleed photo via `cover` (fills the whole band, so the vertically-centred text is always over the image and can never run past its bottom), dark text on the light right side. */ .workplace-band { position: relative; overflow: hidden; background: #d6d7e6; } /* Photo fills the whole section, edge to edge (cover). The laptop sits centre- left; the naturally light desk fills the right, where the narrow text column lives — so the copy never lands on the screen. */ .wp-figure { position: absolute; inset: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; } /* Steel tint on the photo (matches the toned hero images) on the left, washing to near-white on the right so the dark copy reads over the desk area. */ .wp-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.78) 64%, rgba(255,255,255,.86) 100%), linear-gradient(90deg, rgba(47,107,122,.34) 0%, rgba(47,107,122,.2) 38%, rgba(47,107,122,.05) 62%, rgba(47,107,122,0) 80%); } .wp-inner { position: relative; z-index: 2; width: min(var(--wrap), 100% - 2.4rem); margin-inline: auto; min-height: 0; display: flex; align-items: center; justify-content: flex-end; padding: clamp(1rem,1.8vw,1.5rem) 0; } .wp-text { width: 47%; max-width: 560px; color: #3F3F3F; } .wp-link { color: var(--brand); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; } .wp-link:hover { color: var(--brand-600); } .wp-text .eyebrow { margin-bottom: .55rem; } .wp-title { font-family: var(--font-body); font-weight: 600; color: #3F3F3F; font-size: clamp(25px, 2.7vw, 38px); line-height: 1.12; letter-spacing: 0; margin-bottom: .55rem; } .wp-text p { color: #3F3F3F; font-size: 15px; line-height: 1.5; } .wp-text p + p { margin-top: .45rem; } @media (max-width: 860px) { .workplace-band { background: #fff; } .wp-figure { position: relative; inset: auto; width: 100%; padding-top: 60%; background-position: left top; } .wp-figure::after { background: linear-gradient(180deg, rgba(255,255,255,0) 62%, #fff 100%); } .wp-inner { width: min(var(--wrap), 100% - 2.4rem); min-height: 0; justify-content: flex-start; padding-top: 1.6rem; } .wp-text { width: 100%; max-width: 100%; } } /* ----- Stats band ----- */ .band { background: var(--ink); color: #fff; position: relative; overflow: hidden; } .band::before { content:""; position:absolute; inset:0; background: radial-gradient(700px 400px at 15% -10%, rgba(132,173,182,.30), transparent 60%), radial-gradient(600px 400px at 100% 120%, rgba(247,148,29,.20), transparent 60%); } .band > * { position: relative; } .band h2, .band h3 { color: #fff; } .band p { color: rgba(255,255,255,.72); } .stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align: center; } @media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2,1fr); } } .stat-grid .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem,5vw,3.4rem); letter-spacing: -.01em; background: linear-gradient(120deg,#fff,#c6dde2); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-grid .lbl { color: rgba(255,255,255,.7); font-size: .92rem; margin-top: .3rem; } /* Fakta: no boxes — plain columns divided by a thin steel hairline (mirrors "Vores løsninger") */ .band .fact { padding: 0 clamp(1rem, 1.6vw, 1.9rem); display: flex; flex-direction: column; min-width: 0; hyphens: auto; } .band .fact:first-child { padding-left: 0; } .band .fact:last-child { padding-right: 0; } .band .fact + .fact { border-left: 1px solid rgba(132,173,182,.4); } /* Box titles: up to the live 20px on wide screens, scaling down on narrow so they never wrap to 2 lines */ .band .fact h3 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: clamp(14px, 1.15vw, 20px); line-height: 1.25; letter-spacing: -.01em; white-space: normal; overflow-wrap: break-word; hyphens: auto; margin-bottom: .7rem; } .band .fact p { color: rgba(255,255,255,.74); font-size: clamp(.78rem, .72vw, .9rem); line-height: 1.45; overflow-wrap: break-word; } /* Wide container so the 7 columns reach out toward the screen edges */ /* Match the fact row to the same content width as every other section (.wrap). */ .fact-wrap { width: min(var(--wrap), 100% - 2.4rem); margin-inline: auto; } /* Fakta: 7 equal-height columns on one row, left → right (no empty slot), zero gap so the hairline sits between */ .fact-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0; align-items: stretch; } /* Each value on its own line (matches the live site), with a hairline divider */ .fact-list { list-style: none; margin: 0; padding: 0; } .fact-list li { color: rgba(255,255,255,.74); font-size: .82rem; line-height: 1.35; padding: .3rem 0; overflow-wrap: break-word; } .fact-list li:first-child { padding-top: 0; } .fact-list li:last-child { padding-bottom: 0; } .fact-list li + li { border-top: 1px solid rgba(255,255,255,.09); } @media (max-width: 1180px) { .fact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.8rem; } .band .fact h3 { white-space: normal; } /* reset the single-row divider logic for the wrapped grid */ .band .fact { padding: 0 clamp(1rem, 1.6vw, 1.9rem); border-left: 1px solid rgba(132,173,182,.4); } .band .fact:first-child { padding-left: clamp(1rem, 1.6vw, 1.9rem); } .band .fact:nth-child(4n+1) { padding-left: 0; border-left: 0; } } @media (max-width: 720px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band .fact:nth-child(4n+1) { padding-left: clamp(1rem, 1.6vw, 1.9rem); border-left: 1px solid rgba(132,173,182,.4); } .band .fact:nth-child(odd) { padding-left: 0; border-left: 0; } } @media (max-width: 460px) { .fact-grid { grid-template-columns: 1fr; row-gap: 1.4rem; } .band .fact, .band .fact:first-child, .band .fact:last-child { padding: 0; border-left: 0; } .band .fact + .fact { border-top: 1px solid rgba(132,173,182,.28); padding-top: 1.4rem; } } /* Erhvervs-IT "Fakta om PowerNet IT" reuses the frontpage `.band` fact-grid verbatim, with two page-scoped tweaks: 8 columns instead of 7, and NO orange glow (the Erhvervs-IT page carries no orange — steel radial in both corners). */ .erhverv-page .band::before { background: radial-gradient(700px 400px at 15% -10%, rgba(132,173,182,.30), transparent 60%), radial-gradient(600px 400px at 100% 120%, rgba(132,173,182,.18), transparent 60%); } @media (min-width: 1181px) { .erhverv-page .fact-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .erhverv-page .band .fact h3 { white-space: normal; } } /* ----- CTA band ----- */ .cta-band { background: linear-gradient(120deg, var(--slate), var(--steel)); border-radius: var(--radius-lg); padding: clamp(2.4rem,5vw,4rem); color: #fff; position: relative; overflow: hidden; text-align: center; } .cta-band::before { content:""; position:absolute; width: 400px; height: 400px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%); border-radius: 50%; } .cta-band::after { content:""; position:absolute; width: 340px; height: 340px; left: -120px; bottom: -160px; background: radial-gradient(circle, rgba(247,148,29,.30), transparent 60%); border-radius: 50%; } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; margin-bottom: .8rem; } .cta-band p { color: rgba(255,255,255,.85); max-width: 46ch; margin: 0 auto 1.8rem; } .cta-band .hero-cta { justify-content: center; } /* ----- Process steps ----- */ .steps { counter-reset: step; display: grid; gap: 1.4rem; } .step { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .step::before { counter-increment: step; content: counter(step,decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--brand); background: var(--brand-050); width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; } .step h3 { font-size: 1.15rem; margin-bottom: .3rem; } .step p { color: var(--muted); font-size: .96rem; } /* ----- Pill / badges ----- */ .pillrow { display: flex; flex-wrap: wrap; gap: .6rem; } .pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; color: var(--ink-2); } .pill svg { width: 15px; height: 15px; color: var(--brand); } /* ----- Page hero (sub-pages) ----- */ .page-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(2.6rem,6vw,4.6rem) 0 clamp(2.6rem,6vw,4rem); position: relative; overflow: hidden; } .page-hero::before { content:""; position:absolute; width: 500px; height: 500px; right: -160px; top: -220px; background: radial-gradient(circle, rgba(22,86,255,.10), transparent 62%); border-radius:50%; } .page-hero .inner { position: relative; max-width: 720px; } .page-hero h1 { margin: 1rem 0; } /* Photo variant (Erhvervs-IT) — toned full-bleed image + white copy, mirrors the frontpage hero slides */ .page-hero--photo { background: #0e1a26; border-bottom: 0; color: #fff; padding: clamp(3.4rem,7vw,6rem) 0 clamp(3.2rem,7vw,5.4rem); } .page-hero--photo::before { display: none; } .page-hero--photo .ph-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 32%; } .page-hero--photo .ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,30,.88) 0%, rgba(10,20,30,.66) 44%, rgba(16,40,48,.28) 78%, rgba(16,40,48,.1) 100%); } /* Erhvervstelefoni hero: nudge the photo down so the man's face is fully in frame */ .tele-page .page-hero--photo .ph-bg { background-position: center 15%; } .sundhed-hero .ph-bg { background-position: center 28%; } .support-hero .ph-bg { background-position: center center; } /* "Sådan supporter vi" — body in TWO columns so the section is shorter; the wider text column makes the photo narrower + shorter (photo-flush matches text height). */ #supporter .supporter-head { max-width: none; margin-bottom: clamp(1.2rem,2.2vw,1.7rem); } @media (min-width: 861px) { #supporter .supporter-head h2 { white-space: nowrap; } } #supporter .supporter-cols { columns: 2; column-gap: clamp(1.4rem,3vw,2.4rem); } #supporter .supporter-cols p { break-inside: avoid; margin: 0 0 1rem; } #supporter .supporter-cols p:last-child { margin-bottom: 0; } @media (min-width: 901px) { /* Heading (row 1) + body (row 2) in column 1; the photo spans BOTH rows in column 2, so its top edge is flush with the top of the heading (taller photo). */ #supporter .supporter-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(2rem,4vw,3.5rem); } #supporter .supporter-head { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; } #supporter .split-text { grid-column: 1; grid-row: 2; } #supporter .split-media { grid-column: 2; grid-row: 1 / 3; position: relative; z-index: 1; } } @media (max-width: 760px) { #supporter .supporter-cols { columns: 1; } } /* Support hero CTAs equal width — both buttons size to the longer label ("Ring 70 22 32 35 (Tast 1)"); stack full-width on narrow screens. */ .support-hero .hero-cta { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .8rem; } @media (max-width: 560px) { .support-hero .hero-cta { grid-auto-flow: row; } } /* Fixed remote-support (TeamViewer) tab — sticks to the right screen edge, aligned with the hero CTA buttons' height; expands on hover/focus (support page only). */ .remote-tab { position: fixed; right: 0; top: 377px; z-index: 150; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; cursor: pointer; /* same graphic family as .btn-outline-light — white text + white-ish outline, transparent-ish; a faint dark glass keeps it legible once it scrolls over light sections. */ background: rgba(14,26,38,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; border: 1.5px solid rgba(255,255,255,.35); border-right: 0; border-radius: 999px 0 0 999px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; max-width: 56px; overflow: hidden; white-space: nowrap; transition: max-width .38s var(--ease), padding-right .38s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .remote-tab .remote-tab-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; } .remote-tab .remote-tab-ico svg { width: 26px; height: 26px; } .remote-tab .remote-tab-label { opacity: 0; transition: opacity .28s var(--ease); } .remote-tab:hover, .remote-tab:focus-visible { max-width: 260px; padding-right: 1.35rem; background: rgba(14,26,38,.62); outline: none; } .remote-tab:hover .remote-tab-label, .remote-tab:focus-visible .remote-tab-label { opacity: 1; } .remote-tab:focus-visible { box-shadow: 0 0 0 3px rgba(132,173,182,.55); } @media (max-width: 900px) { .remote-tab { top: 335px; } } @media (max-width: 600px) { .remote-tab { top: auto; bottom: 84px; max-width: 50px; padding: .75rem .85rem; } .remote-tab .remote-tab-ico, .remote-tab .remote-tab-ico svg { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .remote-tab, .remote-tab .remote-tab-label { transition: none; } } /* Support "Aftaler" — body runs in TWO columns so the block is ~half as tall; the photo-flush image matches that shorter text height, so the whole section is slimmer. */ #supportaftaler .aftale-cols { columns: 2; column-gap: clamp(1.4rem,3vw,2.4rem); } #supportaftaler .aftale-cols p { break-inside: avoid; margin: 0 0 1rem; } #supportaftaler .aftale-cols p:last-child { margin-bottom: 0; } @media (min-width: 901px) { #supportaftaler .aftale-split { grid-template-columns: 1.5fr 1fr; align-items: stretch; } } @media (max-width: 760px) { #supportaftaler .aftale-cols { columns: 1; } } /* Support — FAQ + Download side by side in one band. Headings share one grid row and the two box-lists share the next row, so the boxes/cards START on the same line. */ /* Stacked: FAQ heading + 2-col FAQ boxes on top, then Download heading + 3-across cards. */ #faq .faq-dl-stack .section-head { max-width: none; text-align: left; margin-bottom: clamp(1.2rem,2.5vw,1.8rem); } #faq .dl-head { margin-top: clamp(2.6rem,5vw,4rem); } /* FAQ items and Download cards = identical box style, same height + gap → rows line up. */ #faq .faq { border: 0; border-radius: 0; overflow: visible; background: transparent; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; } #faq .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); } #faq .faq summary { min-height: 78px; box-sizing: border-box; padding: 1rem 1.4rem; } #faq .faq .answer { padding: 0 1.4rem 1.3rem; } #faq .dl-group + .dl-group { margin-top: clamp(1.6rem, 3vw, 2.4rem); } #faq .dl-group-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.5; margin: 0 0 .9rem; } #faq .dl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } #faq .dl-cards .card { min-height: 78px; padding: 1rem 1.4rem; } #faq .dl-cards .card .ic { width: 44px; height: 44px; margin: 0; border-radius: 12px; flex: none; } #faq .dl-cards .card .ic svg { width: 22px; height: 22px; } @media (max-width: 1080px) { #faq .faq { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { #faq .faq { grid-template-columns: 1fr; } #faq .dl-cards { grid-template-columns: 1fr; } } .btn-sm { padding: .6rem 1.15rem; font-size: .9rem; } /* Two-line steel button: primary label + a small helper line (e.g. the phone number under "Ring til supporten", "Udfyld formularen" under "Skriv til supporten"). */ .btn-stack { flex-direction: column; gap: .05rem; line-height: 1.18; } .btn-stack small { font-weight: 600; font-size: .72rem; opacity: .9; letter-spacing: .01em; } /* "Skriv til supporten" form i modal — samme mørke PowerNet-vindue som øvrige modaler. Felterne (hvide inputs, hvide labels på mørk dialog) matcher live /support/ formularen. Poster til /api/contact → info@powernet.dk. */ #support-modal .modal-dialog { width: min(680px, 100%); } #support-modal .field { margin-bottom: 1rem; } #support-modal .btn-steel { margin-top: .5rem; } #support-modal .form-note { color: rgba(255,255,255,.72); } #support-modal .form-note a { color: #fff; text-decoration: underline; } /* Floating "Fordele" button — glides in from the right and rests in the lower-right of the hero image (clear of the man's face, over his dark suit = good contrast). White frame + white text, subtle dark glass fill for legibility. */ .hero-float-btn { position: absolute; z-index: 3; top: auto; right: clamp(1.1rem, 4vw, 3rem); bottom: clamp(1.4rem, 5vw, 3rem); border-color: #fff; color: #fff; background: rgba(10,20,30,.34); backdrop-filter: blur(3px); box-shadow: 0 14px 36px rgba(0,0,0,.42); animation: heroFloatIn .9s var(--ease) .5s both; } .hero-float-btn:hover { border-color: #fff; color: #fff; background: rgba(10,20,30,.5); transform: translateY(-3px); } .hero-float-btn:hover svg { transform: translateX(4px); } @keyframes heroFloatIn { 0% { opacity: 0; transform: translateX(140%); } 100% { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .hero-float-btn { animation: none; } } @media (max-width: 620px) { .hero-float-btn { right: 1rem; bottom: 1rem; white-space: normal; max-width: 68vw; text-align: left; } } /* "Fordele" modal (Erhvervstelefoni) — PowerNet-styled dialog (fakta-dark bg, logo-bar teal seam, white-bordered advantage boxes with white text) */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); } .modal-backdrop { position: absolute; inset: 0; background: rgba(10,20,30,.64); backdrop-filter: blur(3px); } .modal-dialog { position: relative; z-index: 1; width: min(1000px, 100%); max-height: 88vh; overflow: auto; background: var(--ink); color: #fff; border-top: 4px solid var(--teal); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.5); padding: clamp(1.7rem, 3.6vw, 2.8rem); animation: modalIn .28s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-dialog { animation: none; } } .modal-close { position: absolute; top: .9rem; right: .9rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .3s var(--ease); } .modal-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); } .modal-close svg { width: 20px; height: 20px; } .modal-head { max-width: 640px; margin-bottom: clamp(1.4rem, 3vw, 2rem); } .modal-head h2 { color: #fff; } .modal-sub { color: rgba(255,255,255,.8); margin-top: .5rem; } .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.2rem); } .adv-card { border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius); padding: 1.35rem 1.25rem; background: rgba(255,255,255,.03); transition: border-color .25s, background .25s, transform .25s var(--ease); } .adv-card:hover { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); transform: translateY(-3px); } .adv-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: .45rem; } .adv-card p { color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.55; } @media (max-width: 780px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .adv-grid { grid-template-columns: 1fr; } } body.modal-open { overflow: hidden; } /* Kontakt-modal — to store valgkort (skriv / ring) i PowerNet-stil på mørk dialog */ #kontakt-modal .modal-dialog { width: min(760px, 100%); } .kontakt-choices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); } .kontakt-choice { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 2.4vw, 1.9rem); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; text-decoration: none; transition: transform .25s var(--ease), background .25s, border-color .25s; } .kontakt-choice:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); } .kc-ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(148deg, var(--brand), #244f5b); color: #fff; margin-bottom: 1.05rem; } .kc-ico svg { width: 26px; height: 26px; } .kontakt-choice h3 { color: #fff; font-size: 1.2rem; margin-bottom: .35rem; } .kontakt-choice p { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.5; margin-bottom: .9rem; } .kc-value { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; color: #fff; margin-bottom: 1.1rem; word-break: break-word; } .kc-btn { margin-top: auto; pointer-events: none; } .kontakt-foot { text-align: center; margin-top: 1.4rem; color: rgba(255,255,255,.7); font-size: .9rem; } .kontakt-foot a { color: #fff; text-decoration: underline; } @media (max-width: 620px) { .kontakt-choices { grid-template-columns: 1fr; } } /* Abonnementer modal — checkmark text/box flip to white on the dark dialog (overrides .tele-page). */ .modal-dialog .feature-list { gap: .5rem; } .modal-dialog .feature-list span { color: #fff; font-size: .9rem; line-height: 1.4; } .modal-dialog .feature-list .chk { background: rgba(255,255,255,.18); color: #fff; } /* ============ Abonnementer-sektion — dekorativ steel-baggrund ============ Ren tonet steel-gradient bag to "løftede" glaskort med søjle-søm (--teal) og et ikon-badge, der bryder topkanten. (Intet mønster — klientønske.) */ .abon-section { position: relative; overflow: hidden; background: radial-gradient(130% 100% at 88% -12%, rgba(47,107,122,.12), transparent 58%), radial-gradient(95% 85% at -6% 112%, rgba(132,173,182,.18), transparent 55%), linear-gradient(180deg, #eef2f4 0%, #e5ecee 100%); } .abon-section .wrap { position: relative; z-index: 1; } .abon-section .section-head { max-width: 730px; margin-inline: auto; } .abon-section .section-head .lead { margin-top: .8rem; } .abon-grid-cards { align-items: stretch; margin-top: 3rem; } .card.abon-card { position: relative; overflow: visible; display: flex; flex-direction: column; background: rgba(255,255,255,.9); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.85); border-radius: var(--radius-lg); box-shadow: 0 26px 60px -34px rgba(38,66,76,.55); padding-top: clamp(2rem, 3.4vw, 2.6rem); } /* Minimalt pil-link nederst i abonnement-boksen ("Se mobilabonnementer →") */ .abon-link { margin-top: auto; align-self: flex-start; padding: 1.1rem 0 0; display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; cursor: pointer; color: var(--brand); font-weight: 700; font-family: var(--font-display); font-size: .95rem; } .abon-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .abon-link:hover { color: var(--brand-600); } .abon-link:hover svg { transform: translateX(4px); } .card.abon-card:hover { transform: translateY(-5px); box-shadow: 0 36px 72px -32px rgba(38,66,76,.62); border-color: rgba(111,154,168,.5); } .abon-ico { position: absolute; top: -27px; left: clamp(1.4rem, 3vw, 2.1rem); width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(148deg, var(--brand), #244f5b); color: #fff; box-shadow: 0 14px 28px -10px rgba(47,107,122,.7); } .abon-ico svg { width: 27px; height: 27px; } .card.abon-card h3 { font-size: 1.32rem; } @media (max-width: 720px) { .abon-grid-cards { margin-top: 2.4rem; } } /* Mobilabonnement plan cards — "Inkluderet i abonnementet:" label */ .adv-card .plan-incl { color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .7rem; } /* Branche-modaler — brochens billede som nedtonet baggrund bag teksten. En kraftig mørk scrim-gradient oven på billedet holder den hvide tekst fuldt læsbar. (background-attachment: scroll = baggrunden er fast på dialogen, så den dækker hele visningen også når indholdet scroller.) */ .branch-dialog { background-image: linear-gradient(180deg, rgba(16,26,34,.86) 0%, rgba(16,26,34,.92) 100%), var(--branch-bg); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Branche-modaler — brødtekst + sub-heading lyse på den mørke dialog */ .branch-modal-body { max-width: 800px; } .branch-modal-body p { color: rgba(255,255,255,.86); line-height: 1.7; margin-bottom: 1rem; } .branch-modal-body .lead { color: #fff; font-weight: 600; margin-bottom: .7rem; } .modal-dialog .std-head { color: #fff; margin-top: 1.6rem; margin-bottom: .7rem; } .modal-dialog .branch-modal-body .feature-list { gap: .45rem; margin-top: .2rem; } .branch-dl { margin-top: 1.5rem; } .branch-dl svg { width: 18px; height: 18px; } .page-hero--photo .wrap { position: relative; z-index: 1; } .page-hero--photo .inner { max-width: 640px; } .page-hero--photo .breadcrumb, .page-hero--photo .breadcrumb a, .page-hero--photo .breadcrumb span { color: rgba(255,255,255,.72); } .page-hero--photo .breadcrumb a:hover { color: #fff; } .page-hero--photo .lead { color: rgba(255,255,255,.92); max-width: 42ch; } .ph-title { margin: .35rem 0 1.1rem; color: #fff; } .ph-title .ph-area { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem,6vw,4.4rem); line-height: 1.0; letter-spacing: -.015em; } .ph-title .ph-tag { display: block; font-weight: 300; font-size: clamp(1.5rem,3.4vw,2.6rem); line-height: 1.1; color: rgba(255,255,255,.9); margin-top: .1em; } @media (max-width: 720px) { .page-hero--photo .ph-bg::after { background: linear-gradient(180deg, rgba(10,20,30,.6) 0%, rgba(10,20,30,.42) 40%, rgba(10,20,30,.82) 100%); } } .breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--muted); } .breadcrumb a:hover { color: var(--brand); } .breadcrumb svg { width: 14px; height: 14px; opacity: .5; } /* ----- Contact ----- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .field { margin-bottom: 1.1rem; } .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; } .field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; } .field textarea { min-height: 140px; resize: vertical; } .form-note { font-size: .82rem; color: var(--muted); margin-top: .8rem; } .form-status { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 12px; font-size: .95rem; display: none; } .form-status.ok { display: block; background: #e9f9f2; color: #0d7a54; border: 1px solid #b7ead3; } .form-status.err { display: block; background: #fdecea; color: #b13a26; border: 1px solid #f5c9c1; } .office { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); } .office h3 { font-size: 1.15rem; margin-bottom: .5rem; } .office p { color: var(--muted); font-size: .95rem; } .contact-line { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; } .contact-line svg { width: 20px; height: 20px; color: var(--brand); flex: none; } .contact-line a { font-weight: 500; } .contact-line a:hover { color: var(--brand); } /* ----- FAQ / accordion ----- */ .faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .faq details { border-bottom: 1px solid var(--line); } .faq details:last-child { border-bottom: none; } .faq summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; font-family: var(--font-display); font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.4rem; color: var(--brand); transition: transform .3s var(--ease); font-weight: 400; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .answer { padding: 0 1.5rem 1.4rem; color: var(--muted); } /* ----- Status page ----- */ .status-hero { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.8rem; border-radius: var(--radius); border: 1px solid #b7ead3; background: #e9f9f2; margin-bottom: 2rem; } .status-hero .big-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(20,184,166,.18); flex: none; } .status-hero b { font-family: var(--font-display); color: #0d7a54; font-size: 1.15rem; } .svc-row { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: .7rem; } .svc-row .svc-name { font-weight: 600; font-family: var(--font-display); } .svc-row .svc-state { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); } .svc-row .svc-state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); } /* ----- Prose (legal pages) ----- */ .prose { max-width: 760px; } .prose h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; } .prose h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; } .prose p, .prose li { color: var(--ink-2); margin-bottom: .9rem; } .prose ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; } .prose ul li { margin-bottom: .4rem; } .prose a { color: var(--brand); text-decoration: underline; } /* ----- Legal / terms page (Generelle betingelser) ----- */ .legal-wrap { max-width: 880px; } /* Hero content shares the same 880px column as the sections below, so the heading and intro line up with the accordion text */ .legal-hero .inner { max-width: 100%; } /* More breathing room between the breadcrumb line and the "Vilkår" eyebrow */ .legal-hero .breadcrumb { margin-bottom: 1.15rem; } /* Title matches the compliance section heading size (base h2, not the big h1) */ .legal-hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 700; } /* Intro reads as normal body text, not the large muted lead — full column width so lines run out to where the Dataansvarlig box ends (shorter hero) */ .legal-hero .lead { font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: none; } /* "Sidst opdateret" stamp — subtle line in the top section */ .legal-updated { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.2rem; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); } .legal-updated svg { width: 15px; height: 15px; color: var(--brand); flex: none; } /* Accordion (dropdown) sections */ .accordion { display: grid; gap: .7rem; } .ac-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .ac-item[open] { border-color: rgba(47,107,122,.35); box-shadow: 0 10px 30px -18px rgba(47,107,122,.5); } .ac-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem clamp(1rem,2.4vw,1.5rem); position: relative; } .ac-head::-webkit-details-marker { display: none; } .ac-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); transform: scaleY(0); transform-origin: center; transition: transform .22s; } .ac-item[open] .ac-head::before { transform: scaleY(1); } .ac-title { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: clamp(.98rem, 1.4vw, 1.12rem); line-height: 1.3; } .ac-head:hover .ac-title { color: var(--brand); } .ac-chevron { width: 20px; height: 20px; color: var(--brand); flex: none; transition: transform .25s ease; } .ac-item[open] .ac-chevron { transform: rotate(180deg); } .ac-body { padding: 0 clamp(1rem,2.4vw,1.5rem) 1.25rem; } .ac-body p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin-bottom: .8rem; } .ac-body p:last-child { margin-bottom: 0; } .ac-body .bullet-list { margin: .2rem 0 0; } /* Lettered sub-points (a., b., …) — spaced, slightly indented */ .ac-body .ac-point { padding-left: 1.2rem; margin: .35rem 0; } /* Second-level bullets ("o" in the PDF) nested under a bullet */ .ac-body .sub-list { list-style: circle; margin: .4rem 0 .2rem 1.3rem; padding: 0; } .ac-body .sub-list li { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; padding: .12rem 0; } .ac-body ol { margin: .2rem 0 .8rem 1.2rem; color: var(--ink-2); font-size: 15px; line-height: 1.7; } .ac-body ol li { margin-bottom: .25rem; } /* Sub-headings inside a section (Formål, Kategorier, …) */ .ac-sub { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: .92rem; letter-spacing: .01em; margin: 1.2rem 0 .4rem; } .ac-sub:first-child { margin-top: 0; } .ac-body p strong { color: var(--ink); } /* Info card (Dataansvarlig) */ .legal-lead { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin-bottom: 1.6rem; max-width: 72ch; } .info-card { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); background: var(--surface); padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; } .info-card h2 { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; margin-bottom: .5rem; } .info-card p { color: var(--ink-2); font-size: 15px; line-height: 1.65; margin: 0; } .info-card a { color: var(--brand); } .legal-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } /* Cookie declaration tables */ .cookie-cat { margin-top: 1.6rem; } .cookie-cat .ac-sub { color: var(--ink); font-size: 1rem; } .cookie-cat-desc { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin-bottom: .7rem; } .cookie-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; } .cookie-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; } .cookie-table th, .cookie-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; } .cookie-table thead th { background: var(--surface); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; } .cookie-table tbody tr:last-child td { border-bottom: 0; } .cookie-table td { color: var(--ink-2); line-height: 1.5; } .cookie-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; } .cookie-table td:nth-child(4) { white-space: nowrap; } .cookie-table td:nth-child(3) { min-width: 220px; } /* Bilag B sub-processor table (4 cols): let the description column wrap */ .legal-table td:nth-child(2) { white-space: nowrap; } .legal-table td:nth-child(3) { min-width: 180px; } .legal-table td:nth-child(4) { white-space: normal; min-width: 180px; } /* ----- Logos / trust ----- */ .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.4rem; opacity: .75; } .logos .lg { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 1.05rem; letter-spacing: -.01em; } /* ----- Footer ----- */ .site-footer { background: var(--footer); color: rgba(255,255,255,.72); padding: clamp(3rem,6vw,4.5rem) 0 2rem; border-top: 3px solid var(--teal); } .footer-top { padding-bottom: .5rem; } .footer-logo { display: inline-flex; margin-bottom: 1.9rem; } /* Addresses + contact/SoMe share one row, aligned at the TOP so the office headings and the Kontakt / SoMe labels sit on the same line */ .footer-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 760px) { .footer-row { grid-template-columns: 1fr; } } /* 3 office addresses under the logo — split by a thin steel hairline, same treatment as "Fakta om PowerNet" */ .footer-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .footer-office { padding: 0 clamp(1.1rem, 1.8vw, 1.7rem); } .footer-office:first-child { padding-left: 0; } .footer-office + .footer-office { border-left: 1px solid rgba(132,173,182,.4); } .footer-office h4 { font-family: var(--font-display); color: #fff; font-size: .98rem; letter-spacing: .02em; margin-bottom: .45rem; } .footer-office p { margin: 0; } .footer-office a { color: rgba(255,255,255,.66); font-size: .9rem; line-height: 1.55; transition: color .18s; } .footer-office a:hover { color: #fff; } @media (max-width: 620px) { .footer-offices { grid-template-columns: 1fr; } .footer-office, .footer-office:first-child { padding: 0; } .footer-office + .footer-office { border-left: 0; border-top: 1px solid rgba(132,173,182,.28); padding-top: 1.1rem; margin-top: 1.1rem; } } /* Meta: Kontakt | steel hairline | SoMe, pushed to the far right so SoMe lines up with "Tilgængelighedserklæring" in the bottom row */ .footer-meta { display: flex; justify-content: flex-end; align-items: flex-start; gap: clamp(1.4rem, 2.6vw, 2.6rem); } .footer-contact { display: grid; gap: 0; align-content: start; } .footer-contact a { color: rgba(255,255,255,.66); font-size: .9rem; line-height: 1.55; } .footer-contact a:hover { color: #fff; } .footer-some { border-left: 1px solid rgba(132,173,182,.4); padding-left: clamp(1.4rem, 2.6vw, 2.6rem); } /* "Kontakt" / "SoMe" headings match the left-hand city headings in size/weight/placement, but keep a toned-down colour (client preference) */ .footer-contact .lbl, .footer-some .lbl { display: block; font-family: var(--font-display); color: rgba(255,255,255,.45); font-weight: 700; font-size: .98rem; line-height: 1.14; letter-spacing: .02em; margin-bottom: .45rem; } .footer-some a { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.66); font-size: .9rem; line-height: 1.55; padding: 0; transition: color .18s; } .footer-some a:hover { color: #fff; } .footer-some svg { width: 18px; height: 18px; color: #9fc7d2; flex: none; } @media (max-width: 760px) { .footer-meta { justify-content: flex-start; margin-top: 2rem; } } .footer-bottom { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.5); } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover { color: #fff; } .footer-social { display: flex; gap: .6rem; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: rgba(255,255,255,.75); } .footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .footer-social svg { width: 18px; height: 18px; } /* ----- Reveal animation (progressive enhancement; hidden only when JS is on) ----- */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; } /* ----- Cookie banner ----- */ .cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.3rem 1.4rem; transform: translateY(160%); transition: transform .5s var(--ease); } .cookie.show { transform: none; } .cookie h4 { font-family: var(--font-display); margin-bottom: .4rem; } .cookie p { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; } .cookie .row { display: flex; gap: .6rem; } .cookie .btn { flex: 1; padding: .7rem 1rem; } /* ----- Utilities ----- */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .center { text-align: center; } .muted { color: var(--muted); } .hidden { display: none !important; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--brand); color:#fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; z-index: 300; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ----- Hero slider / carousel ----- */ /* Height = viewport − header (top) − matching gap (bottom, = header height 74px) */ .hero-slider { position: relative; height: calc(100dvh - 148px); min-height: 460px; overflow: hidden; background: #0e1a26; outline: none; } .hs-track { position: absolute; inset: 0; } .hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; will-change: opacity; transition: opacity 1.5s cubic-bezier(.33,0,.2,1), visibility 0s linear 1.5s; } .hs-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1.5s cubic-bezier(.33,0,.2,1), visibility 0s; } .hs-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 8s linear; } .hs-slide.is-active .hs-bg { transform: scale(1); } .hs-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,30,.86) 0%, rgba(10,20,30,.62) 42%, rgba(10,20,30,.18) 78%, rgba(10,20,30,.05) 100%); } @media (max-width: 720px) { .hs-bg::after { background: linear-gradient(180deg, rgba(10,20,30,.55) 0%, rgba(10,20,30,.35) 40%, rgba(10,20,30,.8) 100%); } } .hs-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; } .hs-content { max-width: 640px; color: #fff; } .hs-content .eyebrow { margin-bottom: 1rem; } .hs-content h2 { color: #fff; margin-bottom: 1rem; letter-spacing: -.01em; } .hs-title .hs-area { display: block; font-size: clamp(2.6rem, 6.2vw, 4.8rem); font-weight: 800; line-height: 1.0; } .hs-title .hs-tag { display: block; font-size: clamp(1.5rem, 3.6vw, 2.8rem); font-weight: 300; line-height: 1.1; letter-spacing: 0; color: rgba(255,255,255,.9); margin-top: .12em; } /* Intro band under the hero — "IT med omtanke" */ .intro-band { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.6rem, 6vw, 4.5rem); } .intro-title { font-weight: 300; color: var(--ink); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; } .intro-sub { margin: 1rem auto 0; color: var(--slate); font-weight: 300; font-size: clamp(1.1rem, 2.1vw, 1.45rem); line-height: 1.4; white-space: nowrap; } @media (max-width: 620px) { .intro-sub { white-space: normal; } } .hs-content .lead { color: rgba(255,255,255,.92); max-width: 40ch; } .hs-content .hero-cta { margin-top: 1.8rem; } .hs-content .btn { text-transform: uppercase; letter-spacing: .03em; } @media (max-width: 720px) { .hs-content { max-width: 100%; text-align: center; } .hs-content .lead { margin-inline: auto; } .hs-content .hero-cta { justify-content: center; } .hs-content .eyebrow { justify-content: center; } } .hs-arrow { position: absolute; bottom: 1.4rem; z-index: 5; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .2s; } .hs-arrow:hover { background: rgba(255,255,255,.28); } .hs-arrow:active { transform: scale(.94); } .hs-arrow.prev { right: clamp(4.2rem, 6vw, 5rem); } .hs-arrow.next { right: clamp(.8rem, 2vw, 1.4rem); } .hs-arrow svg { width: 22px; height: 22px; } @media (max-width: 720px) { .hs-arrow { display: none; } } .hs-dots { position: absolute; bottom: 1.85rem; left: clamp(1.2rem, 4vw, 2rem); z-index: 5; display: flex; gap: .5rem; } @media (max-width: 720px) { .hs-dots { left: 0; right: 0; justify-content: center; bottom: 1.3rem; } } .hs-dot { width: 36px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.42); border: none; padding: 0; cursor: pointer; transition: background .3s, transform .2s; } .hs-dot:hover { background: rgba(255,255,255,.7); } .hs-dot[aria-current="true"] { background: var(--brand); } @media (prefers-reduced-motion: reduce) { .hs-bg, .hs-slide.is-active .hs-bg { transform: none; transition: none; } .hs-slide { transition: opacity .2s linear; } } /* Trust strip under the slider */ .trust-strip { border-bottom: 1px solid var(--line); background: #fff; } .trust-strip .inner { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; justify-content: center; align-items: center; padding: 1.5rem 0; } .trust-strip .stat { text-align: center; } .trust-strip .stat b { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink); display: block; line-height: 1; } .trust-strip .stat span { font-size: .82rem; color: var(--muted); }