/* ========================================================================== Retrivo forside — al styling for den nye forside. Alle klasser er præfikset med fs- så intet kolliderer med styles.css. Ingen opacity:0 i CSS — skjulte starttilstande sættes af js/forside.js. ========================================================================== */ :root { --fs-navy-1: #0a1628; --fs-navy-2: #0f2744; --fs-navy-3: #1a3a5c; --fs-accent: #3b82f6; --fs-accent-2: #60a5fa; --fs-accent-3: #93c5fd; --fs-light: #f5f7f9; } /* -------------------------------------------------------------------------- Fælles byggesten -------------------------------------------------------------------------- */ .fs-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 0; background: rgba(96, 165, 250, 0.12); color: var(--fs-accent-3); border: 1px solid rgba(96, 165, 250, 0.25); white-space: nowrap; } .fs-chip i { font-size: 0.7rem; } .fs-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.5rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .fs-btn i { font-size: 0.75rem; } .fs-btn--primary { background: var(--fs-accent); border-color: var(--fs-accent); color: #ffffff; } .fs-btn--primary:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } .fs-btn--light { background: #ffffff; border-color: #ffffff; color: var(--fs-navy-2); } .fs-btn--light:hover { background: #dbeafe; border-color: #dbeafe; color: var(--fs-navy-1); } .fs-btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } .fs-btn--outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); } .fs-btn--navy { background: var(--fs-navy-2); border-color: var(--fs-navy-2); color: #ffffff; } .fs-btn--navy:hover { background: #091a2e; border-color: #091a2e; } .fs-section-head { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; } .fs-section-head h2 { margin: 1rem 0 0.75rem; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-dark, #1a2b3c); } .fs-section-head p { font-size: 1rem; line-height: 1.7; color: var(--text-light, #5a6a7a); } .fs-section-head--dark h2 { color: #ffffff; } .fs-section-head--dark p { color: rgba(255, 255, 255, 0.65); } /* Fint linjegrid — bruges i hero og CTA */ .fs-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(147, 197, 253, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 197, 253, 0.05) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; z-index: 0; } /* Lys variant af linjegrid — til sektioner med lys baggrund */ .fs-grid-lines--light { background-image: linear-gradient(rgba(15, 39, 68, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 39, 68, 0.04) 1px, transparent 1px); } /* -------------------------------------------------------------------------- Pre-paint-tilstande — html.fs-preanim sættes af et inline-script i (kun med JS og uden reduced motion), så entrance-animerede elementer ikke blinker synlige før GSAP når at sætte inline-starttilstande ved DOMContentLoaded. forside.js fjerner klassen igen bagefter. -------------------------------------------------------------------------- */ html.fs-preanim .fs-word > span { transform: translateY(110%); } html.fs-preanim .fs-hero-sub, html.fs-preanim .fs-hero-actions, html.fs-preanim .fs-half-content, html.fs-preanim .fs-trust-point, html.fs-preanim .fs-hero-collage .fs-photo, html.fs-preanim .fs-hero-photo { opacity: 0; visibility: hidden; } /* Pladsreservation for ScrollTrigger-pins før JS kører — matcher pin-afstandene (end: '+=60%' / '+=330%', viewport-relative), så pin-spacernes padding ikke skubber indholdet efter første paint. Margin (ikke padding) så sektionens baggrund ikke strækkes. forside.js fjerner klassen umiddelbart før trigger-oprettelse. */ @media (min-width: 768px) { html.fs-pinspace .fs-hero:not(.fs-hero--debitor) { margin-bottom: 60vh; } html.fs-pinspace .fs-showcase { margin-bottom: 330vh; } } /* 3D-grid-foto som hero-baggrund (samme udtryk som landing og login) */ .fs-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('assets/images/abstract-3d-architecture-grid-lines-vector-design.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%); } /* -------------------------------------------------------------------------- Billed-pladsholder — skarp ramme, lagdelt navy-gradient og diskret ikon. Når et senere indsættes, fylder det rammen, og fallback-laget skjules. -------------------------------------------------------------------------- */ .fs-photo { position: relative; overflow: hidden; background: radial-gradient(circle at 28% 22%, rgba(59, 130, 246, 0.18), transparent 62%), linear-gradient(160deg, var(--fs-navy-3) 0%, var(--fs-navy-2) 55%, var(--fs-navy-1) 100%); border: 1px solid rgba(255, 255, 255, 0.16); border-left: 3px solid var(--fs-accent); border-radius: 0; } .fs-photo--portrait { aspect-ratio: 3 / 4; } .fs-photo--wide { aspect-ratio: 16 / 9; } /* Ramme-justering når pladsholderen står på lys baggrund */ .fs-photo--on-light { border-color: #dde3e9; border-left-color: var(--fs-accent); } .fs-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(147, 197, 253, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 197, 253, 0.06) 1px, transparent 1px); background-size: 32px 32px; } .fs-photo-fallback i { font-size: 2.6rem; color: rgba(147, 197, 253, 0.22); } .fs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; /* Dæmpet farvegradering, så fotos falder ind i den mørke navy-palette */ filter: saturate(0.65) contrast(1.04) brightness(0.94); } .fs-photo:has(img) .fs-photo-fallback { display: none; } /* Navy-tonet overlay oven på fotos — binder dem til temaet */ .fs-photo:has(img)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(165deg, rgba(15, 39, 68, 0.38) 0%, rgba(15, 39, 68, 0.16) 55%, rgba(26, 58, 92, 0.30) 100%); mix-blend-mode: multiply; } /* På lyse sektioner skal tonen være lettere, så billedet ikke bliver tungt */ .fs-photo--on-light:has(img)::after { background: linear-gradient(165deg, rgba(15, 39, 68, 0.22) 0%, rgba(15, 39, 68, 0.08) 60%, rgba(26, 58, 92, 0.16) 100%); } .fs-photo--on-light img { filter: saturate(0.7) contrast(1.03) brightness(0.97); } /* Glow-orbs (runde med vilje — ren baggrundsdekoration) */ .fs-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .fs-orb--1 { width: 480px; height: 480px; top: -120px; left: -110px; background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 70%); } .fs-orb--2 { width: 400px; height: 400px; bottom: 8%; right: -90px; background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 70%); } .fs-orb--3 { width: 300px; height: 300px; top: 32%; left: 58%; background: radial-gradient(circle, rgba(147, 197, 253, 0.14), transparent 70%); } .fs-orb--cta { width: 420px; height: 420px; top: -140px; right: -60px; background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%); } /* -------------------------------------------------------------------------- 1. Hero -------------------------------------------------------------------------- */ .fs-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 130px 20px 110px; background: linear-gradient(160deg, var(--fs-navy-1) 0%, var(--fs-navy-2) 55%, var(--fs-navy-3) 100%); overflow: hidden; } .fs-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center; } .fs-hero-title { margin: 1.6rem 0 1.25rem; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: #ffffff; } /* Maskeret ord-reveal: ydre span klipper, indre span animeres */ .fs-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; } .fs-word > span { display: inline-block; will-change: transform; } .fs-word--accent > span { background: linear-gradient(90deg, var(--fs-accent-2), var(--fs-accent-3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .fs-hero-sub { max-width: 620px; margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; color: rgba(255, 255, 255, 0.72); } /* Knaprække i hero */ .fs-hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; } /* KPI-række */ .fs-hero-kpis { display: flex; align-items: stretch; justify-content: center; gap: 2.5rem; margin: 2.75rem auto 0; } .fs-kpi-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; white-space: nowrap; } .fs-kpi-label { margin-top: 0.25rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } .fs-kpi-divider { width: 1px; background: rgba(255, 255, 255, 0.15); } /* Indgangskort */ .fs-entry-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin: 3.25rem auto 0; text-align: left; } .fs-entry-card { padding: 1.75rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid rgba(255, 255, 255, 0.12); border-radius: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .fs-entry-card:hover { background: rgba(255, 255, 255, 0.07); border-left-color: var(--fs-accent); transform: translateY(-4px); } .fs-entry-card h2 { margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 600; color: #ffffff; } .fs-entry-card p { margin-bottom: 1.4rem; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.65); } .fs-entry-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* Samme firkant-hover som navbaren: en lille firkantet prik toner frem foran teksten — ingen border eller baggrundsboks */ .fs-entry-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--fs-accent-3); text-decoration: none; transition: color 0.2s ease; } .fs-entry-link::before { content: ''; width: 4px; height: 4px; background: var(--fs-accent); opacity: 0; transition: opacity 0.2s ease; } .fs-entry-link i { font-size: 0.7rem; transition: transform 0.2s ease; } .fs-entry-link:hover { color: #bfdbfe; } .fs-entry-link:hover::before { opacity: 1; } .fs-entry-link:hover i { transform: translateX(3px); } .fs-entry-link:focus-visible { outline: none; color: #bfdbfe; } .fs-entry-link:focus-visible::before { opacity: 1; } .fs-scroll-hint { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.55); font-size: 1.5rem; animation: fs-scroll-bounce 2s ease-in-out infinite; } @keyframes fs-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; } 50% { transform: translateX(-50%) translateY(8px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fs-scroll-hint { animation: none; } } /* -------------------------------------------------------------------------- 1b. Landing (index) — bar fuldskærms-split mellem virksomhed og debitor -------------------------------------------------------------------------- */ .fs-landing { position: relative; display: flex; min-height: 100vh; background: var(--fs-navy-2); overflow: hidden; } /* Ét fælles PNG-baggrundslag over hele sektionen — blød fade i top og bund */ .fs-landing-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url('assets/images/abstract-3d-architecture-grid-lines-vector-design.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%); } /* Lodret skillelinje i midten — starter under logoet, gradient-fade i enderne */ .fs-landing-divider { position: absolute; top: 130px; bottom: 0; left: 50%; width: 1px; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100% ); } .fs-landing-logo { position: absolute; top: 2.25rem; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; } .fs-landing-logo img { display: block; height: 40px; width: auto; } .fs-half { position: relative; flex: 1 1 50%; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 130px 5vw 90px; } /* Begge halvdele deler topfarve, så overgangen ikke skærer gennem logoet; tonerne divergerer først nedad, hvor venstre bliver dybere end højre */ .fs-half--left { background: linear-gradient(180deg, var(--fs-navy-2) 0%, var(--fs-navy-1) 85%); } .fs-half--right { background: linear-gradient(180deg, var(--fs-navy-2) 0%, var(--fs-navy-3) 85%); } /* Bløde glød-orbs i halvdelenes ydre hjørner — diagonal komposition */ .fs-half--left .fs-orb--landing { width: 420px; height: 420px; bottom: -140px; left: -130px; background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 70%); } .fs-half--right .fs-orb--landing { width: 420px; height: 420px; top: -120px; right: -130px; background: radial-gradient(circle, rgba(96, 165, 250, 0.14), transparent 70%); } /* Hover: baggrunden lysner let */ .fs-half::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(147, 197, 253, 0.05); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .fs-half:hover::after { opacity: 1; } /* Hover: pilen i den primære knap glider */ .fs-half .fs-btn--primary i { transition: transform 0.25s ease; } .fs-half:hover .fs-btn--primary i { transform: translateX(4px); } .fs-half-content { position: relative; z-index: 2; width: 100%; max-width: 500px; } .fs-half-kicker { margin: 0 0 1.2rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fs-accent-3); } .fs-half-title { margin: 0 0 1.2rem; font-size: clamp(2.3rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; } .fs-half-content > p { margin-bottom: 2.1rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.68); } .fs-half-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } /* Lidt større indgangs-knapper end sitets standard */ .fs-half-actions .fs-btn { padding: 0.9rem 1.7rem; font-size: 0.9rem; } /* Vandret skillelinje mellem halvdelene, når de stables på mobil */ .fs-half--right::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; display: none; pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100% ); } /* Side-overgang: fuldskærms-overlay der sweeper ind fra den klikkede side. Forkanten markeres med en 3px accent-kant. */ .fs-page-overlay { position: fixed; inset: 0; z-index: 200; background: linear-gradient(135deg, #0f2744, #1a3a5c); border-right: 3px solid var(--fs-accent); transform: translateX(-101%); pointer-events: none; } .fs-page-overlay--from-right { border-right: 0; border-left: 3px solid var(--fs-accent); transform: translateX(101%); } /* Lave desktop-viewports (typisk 1366x768-laptops): stram lodret rytme, så halvdelene inkl. tryghedspunkter stadig fylder præcis én skærm */ @media (min-width: 900px) and (max-height: 780px) { .fs-half { padding-top: 92px; padding-bottom: 36px; } .fs-half-kicker { margin: 0.9rem 0 0.85rem; } .fs-half-content > p { margin-bottom: 1.25rem; } } @media (max-width: 899px) { .fs-landing { flex-direction: column; min-height: 100svh; } .fs-half { min-height: 50vh; padding: 130px 24px 60px; } .fs-half--right { padding-top: 70px; } .fs-landing-divider { display: none; } .fs-half--right::before { display: block; } } /* -------------------------------------------------------------------------- 1c. Debitor-hero — todelt: tekst venstre, billed-pladsholder højre -------------------------------------------------------------------------- */ .fs-hero--debitor { min-height: 100vh; } /* Hero'en står fast, mens resten af siden scroller op over den — navbar-skiftet styres af #saadan's position (se forside.js) */ .fs-hero--debitor { position: sticky; top: 0; z-index: 0; } .fs-page-soft .fs-process, .fs-page-soft .fs-tools, .fs-page-soft .fs-faq, .fs-page-soft .fs-cta, .fs-page-soft .fs-contact, .fs-page-soft .footer { position: relative; z-index: 1; } /* Debitor-hero: abstrakt 3D-gitter i stedet for det fine linjegrid */ .fs-hero--debitor .fs-grid-lines { background-image: url('assets/images/abstract-3d-architecture-grid-lines-vector-design.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.14; } .fs-hero-inner--split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: center; max-width: 1200px; text-align: left; } .fs-hero--debitor .fs-hero-title { margin-top: 0; font-size: clamp(2.2rem, 4.6vw, 3.6rem); } .fs-hero-inner--split .fs-hero-sub { margin: 0; max-width: 560px; } .fs-hero-inner--split .fs-hero-actions { justify-content: flex-start; } .fs-hero-photo { width: 100%; max-width: 400px; justify-self: end; } /* Foto-collage i debitor-hero: tre overlappende portrætter, midterste størst og forrest */ .fs-hero-collage { position: relative; width: 100%; max-width: 620px; aspect-ratio: 8 / 7; justify-self: end; /* Fælles 3D-rum: kortenes lagorden styres af translateZ (GSAP), ikke z-index — så lagskiftet er kontinuerligt uden hop */ perspective: 1600px; transform-style: preserve-3d; } .fs-collage-photo { position: absolute; width: 46%; aspect-ratio: 3 / 4; border-left: 3px solid var(--fs-accent); box-shadow: 0 18px 45px rgba(4, 12, 24, 0.4); /* translate-egenskaben er uafhængig af transform, så løftet kolliderer ikke med GSAP's entrance/parallax på transform */ translate: 0 0; will-change: translate, box-shadow, transform; /* Basen styrer exit: længere udglidning end enter, så kortet slipper blødere, end det griber */ transition: box-shadow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo--1 { left: 0; bottom: 0; } .fs-collage-photo--2 { left: 21%; top: 0; width: 58%; box-shadow: 0 28px 65px rgba(4, 12, 24, 0.5); } .fs-collage-photo--3 { right: 0; bottom: 7%; width: 44%; } /* Hover: kortet løfter sig blødt, billedet zoomer og vågner op i farve, og lagskiftet venter til bevægelsen er i gang, så det ikke "hopper". Zoom/farve ligger på img/::after, som GSAP ikke rører. */ /* img/::after: basen (uden hover) styrer exit — langsom og blød */ .fs-collage-photo img { transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo::after { transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo:hover { translate: 0 -8px; box-shadow: 0 34px 80px rgba(4, 12, 24, 0.6); /* Enter: lidt kvikkere end exit */ transition: box-shadow 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo:hover img { transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo:hover::after { transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-collage-photo:hover img { transform: scale(1.04); filter: saturate(0.95) contrast(1.02) brightness(1); } /* Baggrundsbillederne kører opad på siden i én samlet bevægelse, så de er løftet fri af stakken, når lagskiftet sker */ .fs-collage-photo--1:hover, .fs-collage-photo--3:hover { translate: 0 -30px; } .fs-collage-photo:hover::after { opacity: 0.35; } /* De øvrige billeder træder diskret tilbage, mens ét er i fokus */ .fs-hero-collage:hover .fs-collage-photo:not(:hover) img { filter: saturate(0.55) contrast(1.04) brightness(0.82); } /* Tryghedspunkter under hero-knapperne */ .fs-trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.75rem; max-width: 560px; } .fs-trust-point { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-left: 0.9rem; border-left: 2px solid rgba(147, 197, 253, 0.35); font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); translate: 0 0; transition: border-color 0.35s ease, color 0.35s ease, translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-trust-point i { font-size: 1rem; color: var(--fs-accent-3); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease; } /* Hover: punktet løfter sig let, striben og teksten lysner */ .fs-trust-point:hover { border-left-color: var(--fs-accent-2); color: rgba(255, 255, 255, 0.95); translate: 0 -3px; } .fs-trust-point:hover i { transform: scale(1.15); color: #ffffff; } /* -------------------------------------------------------------------------- 2. Integrationsbånd -------------------------------------------------------------------------- */ .fs-integrations { padding: 3rem 0 3.25rem; background: var(--fs-light); border-bottom: 1px solid #e8ecf0; } .fs-integrations-label { margin-bottom: 1.75rem; text-align: center; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #8a9aaa; } .fs-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .fs-marquee-inner { display: flex; width: max-content; } .fs-marquee-track { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; } /* Dubleret spor vises kun når JS/animation kører */ .fs-marquee-track--dup { display: none; } html.fs-anim .fs-marquee-track--dup { display: flex; } .fs-marquee-item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.02rem; font-weight: 600; color: #8a9aaa; white-space: nowrap; } .fs-marquee-item i { font-size: 0.72rem; color: #b6c2cd; } /* -------------------------------------------------------------------------- 3. Platform-showcase -------------------------------------------------------------------------- */ .fs-showcase { position: relative; display: flex; align-items: center; min-height: 100vh; padding: 6.5rem 0; background: linear-gradient(180deg, var(--fs-navy-1) 0%, var(--fs-navy-2) 100%); overflow: hidden; scroll-margin-top: 84px; } .fs-showcase .container { position: relative; z-index: 1; width: 100%; } /* Stage: på desktop ligger mockup, service-grid og tidslinje i samme grid-celle, så hvert lag kan tage det forriges plads i pin-forløbet. Sektionshovederne stables tilsvarende og krydsfades. */ @media (min-width: 768px) { .fs-showcase-heads { display: grid; } .fs-showcase-heads > .fs-section-head { grid-area: 1 / 1; } .fs-showcase-stage { display: grid; } .fs-showcase-stage > * { grid-area: 1 / 1; } .fs-showcase-stage .fs-mockup-wrap { /* Uden denne strækkes wrappen til hele den høje stage-celle, og float-kortet med bottom: -30px lander langt under browser-rammen */ align-self: center; width: 100%; } .fs-showcase-stage .fs-services-grid { /* Toppes i cellen, så kortene står tæt under sektionshovedet i stedet for at blive centreret i den høje stage-celle */ margin-top: 0; align-self: start; } .fs-showcase-stage .fs-tl-wrap { align-self: center; width: 100%; } } @media (max-width: 767px) { /* På mobil ligger lagene i normalt flow; tidslinje-hovedet udelades, da browser-rammens titel giver konteksten */ .fs-head--timeline { display: none; } .fs-showcase-stage .fs-tl-wrap { margin-top: 3rem; } } .fs-mockup-wrap { position: relative; max-width: 980px; margin: 0 auto; } .fs-browser { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; } .fs-browser-head { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .fs-browser-dots { display: flex; gap: 6px; } .fs-browser-dots span { width: 9px; height: 9px; background: rgba(255, 255, 255, 0.18); border-radius: 0; transition: background 0.2s ease; } /* Dæmpede macOS-trafiklysfarver — kun på den firkant, musen er over */ .fs-browser-dots span:nth-child(1):hover { background: #b85a56; } .fs-browser-dots span:nth-child(2):hover { background: #b99a4a; } .fs-browser-dots span:nth-child(3):hover { background: #4d9670; } .fs-browser-title { font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); } .fs-browser-body { display: grid; gap: 1.4rem; padding: 1.5rem; } /* Metric-kort */ .fs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .fs-metric { padding: 1.1rem 1.25rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid rgba(255, 255, 255, 0.08); transition: background 0.2s ease, border-color 0.2s ease; } .fs-metric:hover { background: rgba(255, 255, 255, 0.05); border-left-color: var(--fs-accent); } .fs-metric-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); } .fs-metric-top i { color: var(--fs-accent-2); font-size: 0.85rem; } .fs-metric-value { margin-top: 0.4rem; font-size: 1.45rem; font-weight: 700; color: #ffffff; white-space: nowrap; } /* Sagstabel */ .fs-case-table { border: 1px solid rgba(255, 255, 255, 0.08); } .fs-case-row { display: grid; /* Fast bredde på chip-kolonnen: hver række er sit eget grid, så en auto-kolonne ville lade chippens bredde forskyde de øvrige kolonner forskelligt fra række til række */ grid-template-columns: 1.25fr 1.5fr 0.8fr 160px; gap: 1rem; align-items: center; padding: 0.85rem 1.25rem; border-left: 3px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; } .fs-case-row + .fs-case-row { border-top: 1px solid rgba(255, 255, 255, 0.07); } .fs-case-row:hover { background: rgba(255, 255, 255, 0.04); border-left-color: var(--fs-accent); } .fs-case-number { font-size: 0.85rem; font-weight: 700; color: var(--fs-accent-3); white-space: nowrap; } .fs-case-debtor { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); } .fs-case-amount { font-size: 0.85rem; font-weight: 600; color: #ffffff; text-align: right; white-space: nowrap; } .fs-case-row .fs-status-chip { justify-self: end; } /* Status-chips — mørk tema-variant af .status-chip-mønstret */ .fs-status-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 0; border: 1px solid transparent; white-space: nowrap; } .fs-status-chip--positive { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.25); } .fs-status-chip--neutral { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.25); } .fs-status-chip--warning { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.3); } .fs-status-chip--info { background: rgba(96, 165, 250, 0.12); color: var(--fs-accent-3); border-color: rgba(96, 165, 250, 0.25); } /* Søjlediagram */ .fs-mock-chart { display: flex; align-items: flex-end; gap: 0.9rem; height: 130px; padding: 1.1rem 1.25rem 0; border: 1px solid rgba(255, 255, 255, 0.08); } .fs-bar { flex: 1; height: var(--h, 50%); background: linear-gradient(180deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.45)); transition: filter 0.2s ease; } .fs-bar:hover { filter: brightness(1.25); } /* Flydende notifikationskort */ .fs-float { position: absolute; z-index: 3; } .fs-float--1 { top: -26px; right: -42px; } .fs-float--2 { bottom: -30px; left: -46px; } .fs-float-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.2rem; background: rgba(15, 39, 68, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(4, 12, 24, 0.45); } .fs-float-card i { font-size: 1rem; color: var(--fs-accent-3); } .fs-float-card i.fs-float-icon--success { color: #34d399; } .fs-float-card strong { display: block; font-size: 0.82rem; font-weight: 600; color: #ffffff; white-space: nowrap; } .fs-float-card span { display: block; font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } /* Service-kort */ .fs-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 4.5rem; } .fs-service-card { padding: 1.6rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid rgba(255, 255, 255, 0.08); border-radius: 0; transition: background 0.2s ease, border-color 0.2s ease; } .fs-service-card:hover { background: rgba(255, 255, 255, 0.06); border-left-color: var(--fs-accent); } .fs-service-card > i { font-size: 1.15rem; color: var(--fs-accent-2); } .fs-service-card h3 { margin: 0.9rem 0 0.45rem; font-size: 1.02rem; font-weight: 600; color: #ffffff; } .fs-service-card p { font-size: 0.88rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } /* Lys variant af service-kortet — til hvide sektioner */ .fs-service-card--light { background: #ffffff; border: 1px solid #e8ecf0; border-left: 3px solid #dde3e9; } .fs-service-card--light:hover { background: var(--fs-light); border-left-color: var(--fs-accent); } .fs-service-card--light > i { color: var(--fs-accent); } .fs-service-card--light h3 { color: var(--text-dark, #1a2b3c); } .fs-service-card--light p { color: var(--text-light, #5a6a7a); } /* -------------------------------------------------------------------------- 3b. Tidslinje — sagens forløb fra start til slut i browser-ramme (indgår som tredje lag i fs-showcase-stage) -------------------------------------------------------------------------- */ .fs-tl-wrap { max-width: 860px; margin: 0 auto; } .fs-tl { /* Linjens x-position = datokolonne + kolonnegap + ikoncentrum */ --fs-tl-x: 123px; position: relative; padding: 0.25rem 0; } .fs-tl-line { position: absolute; top: 1.5rem; bottom: 1.5rem; left: var(--fs-tl-x); width: 2px; background: rgba(255, 255, 255, 0.08); } .fs-tl-line-fill { width: 100%; height: 100%; background: linear-gradient(180deg, var(--fs-accent), var(--fs-accent-2)); transform-origin: 50% 0%; } .fs-tl-item { display: grid; grid-template-columns: 84px 40px 1fr; gap: 1.25rem; align-items: flex-start; padding: 0.65rem 0; transition: background 0.2s ease; } .fs-tl-item:hover { background: rgba(255, 255, 255, 0.03); } .fs-tl-item .fs-tl-icon { transition: border-color 0.2s ease, color 0.2s ease; } .fs-tl-item:hover .fs-tl-icon { border-color: rgba(96, 165, 250, 0.7); color: #ffffff; } .fs-tl-item:hover .fs-tl-icon--warning { border-color: rgba(251, 191, 36, 0.7); } .fs-tl-item:hover .fs-tl-icon--success { border-color: rgba(52, 211, 153, 0.7); } .fs-tl-date { padding-top: 0.5rem; text-align: right; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); white-space: nowrap; } .fs-tl-date span { display: block; margin-top: 0.1rem; font-size: 0.7rem; font-weight: 400; color: rgba(255, 255, 255, 0.35); } .fs-tl-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--fs-navy-2); border: 1px solid rgba(96, 165, 250, 0.35); color: var(--fs-accent-3); font-size: 0.9rem; border-radius: 0; } .fs-tl-icon--warning { border-color: rgba(251, 191, 36, 0.35); color: #fcd34d; } .fs-tl-icon--success { border-color: rgba(52, 211, 153, 0.35); color: #6ee7b7; } .fs-tl-content { padding-top: 0.35rem; } .fs-tl-content strong { display: block; font-size: 0.95rem; font-weight: 600; color: #ffffff; } .fs-tl-content > span { display: block; margin-top: 0.2rem; font-size: 0.85rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } .fs-tl-content .fs-status-chip { display: inline-flex; margin-top: 0.6rem; } /* -------------------------------------------------------------------------- 4. Proces -------------------------------------------------------------------------- */ .fs-process { position: relative; padding: 6.5rem 0; background: var(--fs-light); scroll-margin-top: 84px; } .fs-process .container { position: relative; z-index: 1; } .fs-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1rem; } /* Variant med tre trin (debitor-siden) */ .fs-steps--three { grid-template-columns: repeat(3, 1fr); } .fs-process-line { position: absolute; top: 1.1rem; left: 1%; right: 1%; height: 2px; background: #dde3e9; z-index: 0; } .fs-process-line-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--fs-navy-2), var(--fs-navy-3)); transform-origin: left center; } .fs-step { position: relative; } .fs-step-num { position: relative; z-index: 1; display: inline-block; padding-right: 0.9rem; background: var(--fs-light); font-size: 2.2rem; font-weight: 700; line-height: 1; color: #c3ced8; transition: color 0.3s ease; } .fs-step--active .fs-step-num { color: var(--fs-navy-2); } .fs-step h3 { margin: 1.1rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-step p { font-size: 0.9rem; line-height: 1.65; color: var(--text-light, #5a6a7a); } /* Nøglefordele */ .fs-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4.5rem; } .fs-benefit { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.4rem; background: #ffffff; border: 1px solid #e8ecf0; border-left: 3px solid #dde3e9; border-radius: 0; transition: background 0.2s ease, border-color 0.2s ease; } .fs-benefit:hover { background: #fafbfc; border-left-color: var(--fs-accent); } .fs-benefit-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; background: #e8f0f8; color: var(--fs-navy-3); font-size: 1rem; } .fs-benefit strong { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-benefit span { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-light, #5a6a7a); } /* -------------------------------------------------------------------------- 5. Om os -------------------------------------------------------------------------- */ .fs-about { padding: 6.5rem 0; background: #ffffff; scroll-margin-top: 84px; } .fs-about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4.5rem; align-items: start; } .fs-label { margin-bottom: 0.9rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fs-accent); } .fs-about-text h2 { margin-bottom: 0.35rem; font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-dark, #1a2b3c); } .fs-lead { margin-bottom: 1rem; font-size: 1.12rem; line-height: 1.7; color: var(--text-dark, #1a2b3c); } .fs-about-text > p:not(.fs-lead) { margin-bottom: 2.25rem; font-size: 0.95rem; line-height: 1.7; color: var(--text-light, #5a6a7a); } .fs-about-features { display: grid; gap: 1rem; } .fs-about-feature { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; background: #ffffff; border: 1px solid #e8ecf0; border-left: 3px solid #dde3e9; border-radius: 0; transition: background 0.2s ease, border-color 0.2s ease; } .fs-about-feature:hover { background: var(--fs-light); border-left-color: var(--fs-accent); } .fs-about-feature i { margin-top: 0.15rem; font-size: 1.05rem; color: var(--fs-navy-3); } .fs-about-feature strong { display: block; font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-about-feature span { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.55; color: var(--text-light, #5a6a7a); } /* Højre kolonne: billed-pladsholder over statistikken */ .fs-about-side { display: grid; gap: 2rem; align-content: start; } /* Arbejdsprincipper i højre kolonne — direkte på den hvide baggrund, skudt ned så de ikke flugter med sektionsoverskriften */ .fs-about-principles { margin-top: 4.5rem; } .fs-about-principles .fs-label { margin-bottom: 1.75rem; } .fs-audit { position: relative; display: grid; gap: 1.6rem; /* Linjens x-position = ikoncentrum */ --fs-audit-x: 19px; } .fs-audit-line { position: absolute; top: 1.25rem; bottom: 1.25rem; left: var(--fs-audit-x); width: 2px; background: rgba(255, 255, 255, 0.08); } .fs-audit-line-fill { width: 100%; height: 100%; background: linear-gradient(180deg, var(--fs-accent), var(--fs-accent-2)); transform-origin: 50% 0%; } .fs-audit-item { display: grid; grid-template-columns: 38px 1fr; gap: 1.1rem; align-items: flex-start; } /* Hover-fladen ligger kun på tekstdelen, så den lodrette linje mellem punkterne aldrig dækkes */ .fs-audit-item .fs-audit-content { margin: -0.35rem -0.65rem; padding: 0.5rem 0.65rem 0.35rem; transition: background 0.2s ease; } .fs-audit-item .fs-audit-icon { transition: border-color 0.2s ease, color 0.2s ease; } .fs-audit-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--fs-navy-2); border: 1px solid rgba(96, 165, 250, 0.35); color: var(--fs-accent-3); font-size: 0.85rem; border-radius: 0; } .fs-audit-icon--success { border-color: rgba(52, 211, 153, 0.35); color: #6ee7b7; } .fs-audit-content { padding-top: 0.15rem; } .fs-audit-content strong { display: block; font-size: 0.92rem; font-weight: 600; color: #ffffff; } .fs-audit-content > span { display: block; margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.55; color: rgba(255, 255, 255, 0.6); } .fs-audit-content .fs-status-chip { display: inline-flex; margin-top: 0.55rem; } /* Lys variant til hvid baggrund */ .fs-audit--light .fs-audit-line { background: #e8ecf0; } .fs-audit--light .fs-audit-line-fill { background: linear-gradient(180deg, var(--fs-navy-2), var(--fs-navy-3)); } .fs-audit--light .fs-audit-icon { background: #ffffff; border-color: #dde3e9; color: var(--fs-navy-3); } .fs-audit--light .fs-audit-icon--success { border-color: rgba(5, 150, 105, 0.35); color: #059669; } .fs-audit--light .fs-audit-content strong { color: var(--text-dark, #1a2b3c); } .fs-audit--light .fs-audit-content > span { color: var(--text-light, #5a6a7a); } .fs-audit--light .fs-audit-item:hover .fs-audit-content { background: var(--fs-light); } .fs-audit--light .fs-audit-item:hover .fs-audit-icon { border-color: var(--fs-navy-3); } .fs-audit--light .fs-audit-item:hover .fs-audit-icon--success { border-color: rgba(5, 150, 105, 0.7); } /* Store tal i højre kolonne */ .fs-about-stats { border-top: 1px solid #e8ecf0; } /* Nøgletal som vandret bånd under om-grid'et */ .fs-about-stats--row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid #e8ecf0; } .fs-about-stats--row .fs-about-stat { padding: 2.25rem 2rem; border-bottom: 1px solid #e8ecf0; border-left: 1px solid #e8ecf0; transition: background 0.2s ease; } .fs-about-stats--row .fs-about-stat:first-child { border-left: 0; padding-left: 0; } .fs-about-stats--row .fs-about-stat:hover { background: var(--fs-light); } .fs-about-stat { padding: 2rem 0; border-bottom: 1px solid #e8ecf0; } .fs-about-stat-value { font-size: 2.8rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--fs-navy-2); white-space: nowrap; } .fs-about-stat-label { margin-top: 0.35rem; font-size: 0.9rem; color: var(--text-muted, #8a9aaa); } /* Informationsafsnit til debitorer */ .fs-info-box { margin-top: 4.5rem; padding: 1.75rem 2rem; background: var(--fs-light); border: 1px solid #e8ecf0; border-left: 3px solid var(--fs-accent); border-radius: 0; scroll-margin-top: 84px; } .fs-info-box h3 { margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-info-box p { margin-bottom: 0.9rem; max-width: 720px; font-size: 0.92rem; line-height: 1.65; color: var(--text-light, #5a6a7a); } .fs-info-box a { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--fs-navy-3); text-decoration: none; border-bottom: 1px solid rgba(26, 58, 92, 0.3); transition: color 0.2s ease, border-color 0.2s ease; } .fs-info-box a i { font-size: 0.7rem; } .fs-info-box a:hover { color: var(--fs-accent); border-bottom-color: var(--fs-accent); } /* -------------------------------------------------------------------------- 6. CTA-bånd -------------------------------------------------------------------------- */ .fs-cta { position: relative; padding: 5.5rem 0; background: linear-gradient(150deg, var(--fs-navy-1) 0%, var(--fs-navy-2) 60%, var(--fs-navy-3) 100%); overflow: hidden; text-align: center; } .fs-cta .container { position: relative; z-index: 1; } .fs-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; color: #ffffff; } .fs-cta p { max-width: 520px; margin: 1rem auto 2.25rem; font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.7); } .fs-cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- 7. Kontakt -------------------------------------------------------------------------- */ .fs-contact { position: relative; padding: 6.5rem 0; background: var(--fs-light); scroll-margin-top: 84px; } .fs-contact .container { position: relative; z-index: 1; } .fs-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; } .fs-contact-info { display: grid; gap: 1rem; } .fs-contact-item { padding: 1.25rem 1.4rem; background: #ffffff; border: 1px solid #e8ecf0; border-left: 3px solid #dde3e9; border-radius: 0; transition: background 0.2s ease, border-color 0.2s ease; } .fs-contact-item:hover { background: #fafbfc; border-left-color: var(--fs-accent); } .fs-contact-item h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-contact-item h3 i { font-size: 0.85rem; color: var(--fs-navy-3); } .fs-contact-item p { font-size: 0.9rem; line-height: 1.6; color: var(--text-light, #5a6a7a); } .fs-contact-form { padding: 2rem; background: #ffffff; border: 1px solid #e8ecf0; border-radius: 0; } .fs-form-group { margin-bottom: 1.1rem; } .fs-contact-form input, .fs-contact-form textarea { width: 100%; padding: 0.85rem 1rem; background: #ffffff; border: 1px solid #dde3e9; border-radius: 0; font-family: inherit; font-size: 0.92rem; color: var(--text-dark, #1a2b3c); transition: border-color 0.2s ease, box-shadow 0.2s ease; resize: vertical; } .fs-contact-form input::placeholder, .fs-contact-form textarea::placeholder { color: #8a9aaa; } .fs-contact-form input:focus, .fs-contact-form textarea:focus { outline: none; border-color: var(--fs-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } /* Kontakt uden formular (debitor-siden): kortene i to kolonner */ .fs-contact-grid--tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: 1rem; max-width: 880px; margin: 0 auto; } /* -------------------------------------------------------------------------- 8. Debitor-siden: selvbetjening og information om inkasso -------------------------------------------------------------------------- */ .fs-tools { padding: 6.5rem 0; background: #ffffff; scroll-margin-top: 84px; } .fs-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 900px; margin: 0 auto; } .fs-faq { position: relative; padding: 6.5rem 0; background: var(--fs-light); scroll-margin-top: 84px; } .fs-faq .container { position: relative; z-index: 1; } .fs-faq-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: stretch; } /* Fotoet fylder hele kolonnens højde ved siden af spørgsmålene */ .fs-faq-grid .fs-photo { aspect-ratio: auto; height: 100%; min-height: 480px; } /* Motivet sidder i venstre del af det brede billede — hold det i rammen, når der beskæres til højformat */ .fs-faq-grid .fs-photo img { object-position: 30% center; transition: filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Hover: rammen løfter sig blidt, og billedet vågner op i farve. Løftet kører på translate, og zoomen ejes af GSAP — de kolliderer ikke. */ .fs-faq-grid .fs-photo { translate: 0 0; transition: translate 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-faq-grid .fs-photo::after { transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); } .fs-faq-grid .fs-photo:hover { translate: 0 -6px; box-shadow: 0 24px 55px rgba(15, 39, 68, 0.18); } .fs-faq-grid .fs-photo:hover img { filter: saturate(0.95) contrast(1.02) brightness(1); } .fs-faq-grid .fs-photo:hover::after { opacity: 0.35; } @media (max-width: 1024px) { .fs-faq-grid .fs-photo { height: auto; min-height: 0; aspect-ratio: 16 / 9; } } .fs-faq-blocks { display: grid; gap: 1rem; } .fs-qa { padding: 1.5rem 1.75rem; background: #ffffff; border: 1px solid #e8ecf0; border-left: 3px solid #dde3e9; border-radius: 0; transition: background 0.2s ease, border-color 0.2s ease; } .fs-qa:hover { background: #fafbfc; border-left-color: var(--fs-accent); } .fs-qa h3 { margin-bottom: 0.45rem; font-size: 1rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-qa p { font-size: 0.9rem; line-height: 1.65; color: var(--text-light, #5a6a7a); } /* -------------------------------------------------------------------------- Priser — tre pakker (virksomhed.html #priser) -------------------------------------------------------------------------- */ .fs-pricing { position: relative; padding: 6.5rem 0; background: var(--fs-light); scroll-margin-top: 84px; overflow: hidden; } .fs-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; max-width: 1080px; margin: 0 auto; } .fs-pricing-card { position: relative; display: flex; flex-direction: column; margin: 1.25rem 0; padding: 2.25rem 2rem; background: #ffffff; border: 1px solid #e8ecf0; border-top: 3px solid #dde3e9; border-radius: 0; transition: border-color 0.45s ease, box-shadow 0.45s ease; } .fs-pricing-card:hover { border-top-color: var(--fs-accent); box-shadow: 0 16px 36px rgba(15, 39, 68, 0.14); } .fs-pricing-card--featured { margin: 0; background: var(--fs-navy-2); border-color: var(--fs-navy-2); border-top-color: var(--fs-accent); box-shadow: 0 24px 48px rgba(10, 22, 40, 0.28); } .fs-pricing-card--featured:hover { box-shadow: 0 30px 56px rgba(10, 22, 40, 0.36); } .fs-pricing-badge { position: absolute; top: 0; right: 1.5rem; transform: translateY(-50%); padding: 0.3rem 0.7rem; background: var(--fs-accent); color: #ffffff; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .fs-pricing-name { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fs-accent); } .fs-pricing-price { margin: 1rem 0 0.6rem; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-dark, #1a2b3c); } .fs-pricing-price span { margin-left: 0.25rem; font-size: 0.9rem; font-weight: 500; color: var(--text-light, #5a6a7a); } .fs-pricing-price--text { font-size: clamp(1.5rem, 2.2vw, 1.9rem); } .fs-pricing-terms { min-height: 3.2em; padding-bottom: 1.25rem; border-bottom: 1px solid #e8ecf0; font-size: 0.85rem; line-height: 1.6; color: var(--text-light, #5a6a7a); } .fs-pricing-incl { margin-top: 1.25rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light, #5a6a7a); } .fs-pricing-features { display: grid; gap: 0.7rem; margin: 1.25rem 0 2rem; padding: 0; list-style: none; font-size: 0.88rem; line-height: 1.5; color: var(--text-dark, #1a2b3c); } .fs-pricing-features i { margin-right: 0.5rem; font-size: 0.75rem; color: var(--status-success, #2d6a4f); } .fs-pricing-card .fs-btn { margin-top: auto; justify-content: center; } .fs-pricing-card--featured .fs-pricing-name { color: var(--fs-accent-3); } .fs-pricing-card--featured .fs-pricing-price { color: #ffffff; } .fs-pricing-card--featured .fs-pricing-price span, .fs-pricing-card--featured .fs-pricing-terms, .fs-pricing-card--featured .fs-pricing-incl { color: rgba(255, 255, 255, 0.65); } .fs-pricing-card--featured .fs-pricing-terms { border-bottom-color: rgba(255, 255, 255, 0.12); } .fs-pricing-card--featured .fs-pricing-features { color: rgba(255, 255, 255, 0.85); } .fs-pricing-card--featured .fs-pricing-features i { color: var(--fs-accent-2); } .fs-pricing-footnote { margin-top: 2.5rem; text-align: center; font-size: 0.8rem; color: var(--text-light, #5a6a7a); } @media (max-width: 992px) { .fs-pricing-grid { grid-template-columns: 1fr; gap: 1.5rem; } .fs-pricing-card { width: 100%; max-width: 520px; margin: 0 auto; } } @media (max-width: 768px) { .fs-pricing { padding: 4.5rem 0; } } /* -------------------------------------------------------------------------- Responsivt -------------------------------------------------------------------------- */ @media (max-width: 992px) { .fs-services-grid { grid-template-columns: repeat(2, 1fr); } .fs-hero-inner--split { grid-template-columns: 1fr; gap: 3rem; } .fs-hero-photo { justify-self: start; max-width: 420px; } .fs-hero-collage { justify-self: start; max-width: 560px; } .fs-faq-grid { grid-template-columns: 1fr; } .fs-steps--three { grid-template-columns: repeat(2, 1fr); } .fs-steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; } .fs-process-line { display: none; } .fs-benefits { grid-template-columns: 1fr; } .fs-about-grid { grid-template-columns: 1fr; gap: 3rem; } .fs-about-principles { margin-top: 0; } .fs-about-stats--row { grid-template-columns: 1fr; margin-top: 3rem; } .fs-about-stats--row .fs-about-stat { padding: 1.75rem 0; border-left: 0; } .fs-about-stats--row .fs-about-stat:first-child { border-left: 0; padding-left: 0; } .fs-contact-grid { grid-template-columns: 1fr; } .fs-float--1 { top: -20px; right: 8px; } .fs-float--2 { bottom: -22px; left: 8px; } } @media (max-width: 768px) { .fs-hero { padding: 110px 20px 90px; } .fs-tools-grid, .fs-contact-grid--tiles, .fs-steps--three { grid-template-columns: 1fr; } .fs-hero--debitor .fs-hero-collage { display: none; } .fs-hero--debitor .fs-scroll-hint { display: none; } .fs-trust-points { grid-template-columns: 1fr; gap: 1rem; max-width: none; } .fs-trust-point { flex-direction: row; align-items: center; gap: 0.6rem; } .fs-tools, .fs-faq { padding: 4.5rem 0; } .fs-hero-kpis { flex-direction: column; align-items: center; gap: 1.25rem; } .fs-kpi { text-align: center; } .fs-kpi-divider { display: none; } .fs-entry-cards { grid-template-columns: 1fr; } .fs-metrics { grid-template-columns: 1fr; } .fs-tl { --fs-tl-x: 86px; } .fs-tl-item { grid-template-columns: 56px 34px 1fr; gap: 0.9rem; } .fs-tl-icon { width: 34px; height: 34px; font-size: 0.8rem; } .fs-tl-date span { display: none; } .fs-case-row { grid-template-columns: 1fr auto; grid-template-areas: "number amount" "debtor chip"; gap: 0.35rem 1rem; } .fs-case-number { grid-area: number; } .fs-case-amount { grid-area: amount; } .fs-case-debtor { grid-area: debtor; } .fs-case-row .fs-status-chip { grid-area: chip; } .fs-float { display: none; } .fs-services-grid { grid-template-columns: 1fr; } .fs-steps { grid-template-columns: 1fr; gap: 2.5rem; } .fs-section-head { margin-bottom: 2.5rem; } .fs-showcase, .fs-process, .fs-about, .fs-contact { padding: 4.5rem 0; } .fs-cta { padding: 4rem 0; } .fs-about-stat-value { font-size: 2.3rem; } .fs-info-box { padding: 1.5rem; } .fs-contact-form { padding: 1.5rem; } } /* -------------------------------------------------------------------------- 10. Blød side-variant (body.fs-page-soft) — bruges på debitor.html. Samme tema og skarpe hjørner, men varmere baggrunde, roligere hero, normal case på knapper og bløde skygger i stedet for hårde kanter. -------------------------------------------------------------------------- */ .fs-page-soft { /* Varm off-white i stedet for kølig grå-blå */ --fs-light: #f7f5f1; } /* Roligere hero: blødere gradient, dæmpet gitter, én orb mindre */ .fs-page-soft .fs-hero { background: linear-gradient(168deg, var(--fs-navy-1) 0%, var(--fs-navy-2) 55%, #1c4666 100%); } .fs-page-soft .fs-hero--debitor .fs-grid-lines { opacity: 0.07; } .fs-page-soft .fs-orb--2 { display: none; } /* Normal case på knapper — samme skarpe kant, mindre hård tone */ .fs-page-soft .fs-btn { text-transform: none; letter-spacing: 0.015em; font-size: 0.92rem; } /* Blødere typografi: lettere overskrifter, mere luft i brødtekst */ .fs-page-soft .fs-section-head h2 { font-weight: 600; } .fs-page-soft .fs-section-head p, .fs-page-soft .fs-qa p { line-height: 1.75; } .fs-page-soft .fs-hero-sub { line-height: 1.8; } /* Bløde skygger og løft på hover i stedet for rene farveskift */ .fs-page-soft .fs-service-card--light, .fs-page-soft .fs-qa, .fs-page-soft .fs-contact-item { box-shadow: 0 14px 34px rgba(15, 39, 68, 0.05); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .fs-page-soft .fs-service-card--light:hover, .fs-page-soft .fs-qa:hover, .fs-page-soft .fs-contact-item:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(15, 39, 68, 0.09); background: #ffffff; } .fs-page-soft .fs-qa { padding: 1.75rem 2rem; } /* Ikonflade på service-kortene: primary-kvadrat med skarpe hjørner */ .fs-page-soft .fs-service-card--light > i { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--fs-navy-2); color: #ffffff; font-size: 1rem; } /* Accent-detaljer på lyse flader bruger primary i stedet for lyseblå */ .fs-page-soft .fs-service-card--light:hover, .fs-page-soft .fs-qa:hover, .fs-page-soft .fs-contact-item:hover { border-left-color: var(--fs-navy-2); } .fs-page-soft .fs-photo--on-light { border-left-color: var(--fs-navy-2); } /* Procestrin: udfyldt kvadrat i stedet for nøgne tal */ .fs-page-soft .fs-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; background: var(--fs-navy-2); box-shadow: 0 0 0 8px var(--fs-light); font-size: 1rem; font-weight: 600; color: #ffffff; opacity: 0.55; transition: opacity 0.3s ease; } .fs-page-soft .fs-step--active .fs-step-num { opacity: 1; } /* -------------------------------------------------------------------------- 10b. Dashboard-mockup i "Det kan du på din side" — spejler kortudtrykket fra debitor-dashboardet (dashboard-card med card-header og count-badge) -------------------------------------------------------------------------- */ .fs-tools-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: stretch; max-width: 1080px; margin: 0 auto; } .fs-tools-split .fs-tools-grid { max-width: none; margin: 0; } .fs-dash-mock { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e8ecf0; border-top: 3px solid var(--fs-navy-2); border-radius: 0; padding: 1.75rem; box-shadow: 0 20px 50px rgba(15, 39, 68, 0.09); } /* Kortet følger tools-grid'ets højde: indholdet fordeles lodret, og betalings-summary'en holdes fast i bunden */ .fs-dash-mock-body { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 0.5rem; } .fs-dash-mock-body .fs-dash-mock-summary { margin-top: auto; } .fs-dash-mock-header { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid #ebeef2; } .fs-dash-mock-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--fs-navy-2); border-radius: 0; font-size: 1.15rem; color: #ffffff; } .fs-dash-mock-badge { position: absolute; top: -6px; left: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background: #dc2626; border-radius: 0; font-size: 0.7rem; font-weight: 600; color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .fs-dash-mock-headtext { display: grid; gap: 0.15rem; } .fs-dash-mock-headtext strong { font-size: 1.05rem; font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-dash-mock-headtext span { font-size: 0.82rem; color: var(--text-light, #5a6a7a); } .fs-dash-mock-toggle { position: absolute; right: 0; top: 4px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #f5f7f9; border-radius: 0; font-size: 0.8rem; color: var(--text-light, #5a6a7a); } .fs-dash-mock-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 0.9rem 1rem; background: #f5f7f9; } .fs-dash-mock-summary-text { display: grid; gap: 0.1rem; } .fs-dash-mock-summary-text span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a9aaa; } .fs-dash-mock-summary-text strong { font-size: 1.1rem; font-weight: 700; color: var(--fs-navy-2); } .fs-dash-mock-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--fs-navy-2); border-radius: 0; font-size: 0.82rem; font-weight: 600; color: #ffffff; } .fs-dash-mock-btn i { font-size: 0.75rem; } /* Tab-menu i mockup'en: Oversigt / Dokumenter */ .fs-dash-mock-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.1rem; border-bottom: 1px solid #ebeef2; } .fs-dash-mock-tab { appearance: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-light, #5a6a7a); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .fs-dash-mock-tab:hover { color: var(--fs-navy-2); } .fs-dash-mock-tab.active { color: var(--fs-navy-2); border-bottom-color: var(--fs-navy-2); } .fs-dash-mock-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: #ebeef2; border-radius: 0; font-size: 0.68rem; color: var(--fs-navy-2); transition: background 0.2s ease, color 0.2s ease; } .fs-dash-mock-tab.active .fs-dash-mock-tab-count { background: var(--fs-navy-2); color: #ffffff; } .fs-dash-mock-pane { display: none; } .fs-dash-mock-pane.active { display: block; } /* Dokumenter i mockup'en — samme udtryk som dashboardets dokumentliste */ .fs-dash-mock-doc { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid #ebeef2; border-left: 3px solid #dde3e9; background: #ffffff; font-size: 0.82rem; color: var(--text-dark, #1a2b3c); transition: background 0.2s ease, border-color 0.2s ease; } .fs-dash-mock-doc + .fs-dash-mock-doc { margin-top: 0.4rem; } .fs-dash-mock-doc > i:first-child { font-size: 0.85rem; color: var(--fs-navy-2); } .fs-dash-mock-doc span { flex: 1; } .fs-dash-mock-doc em { font-style: normal; font-size: 0.72rem; letter-spacing: 0.03em; color: #8a9aaa; } .fs-dash-mock-doc-action { font-size: 0.75rem; color: #8a9aaa; transition: color 0.2s ease, transform 0.25s ease; } .fs-dash-mock-doc:hover { background: #fafbfc; border-left-color: var(--fs-navy-2); } .fs-dash-mock-doc:hover .fs-dash-mock-doc-action { color: var(--fs-navy-2); transform: translateY(2px); } /* Hover-liv i mockup'ens header og knap — ikonet beholder sin farve, kun badgen reagerer */ .fs-dash-mock-icon:hover .fs-dash-mock-badge { animation: fs-badge-pop 0.45s ease; } @keyframes fs-badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } } .fs-dash-mock-toggle { transition: background 0.25s ease, color 0.25s ease; } .fs-dash-mock-toggle i { transition: transform 0.35s ease; } .fs-dash-mock-toggle:hover { background: var(--fs-navy-2); color: #ffffff; } .fs-dash-mock-toggle:hover i { transform: rotate(180deg); } .fs-dash-mock-btn { transition: background 0.2s ease, translate 0.25s ease, box-shadow 0.25s ease; translate: 0 0; } .fs-dash-mock-btn:hover { background: #091a2e; translate: 0 -2px; box-shadow: 0 8px 18px rgba(15, 39, 68, 0.25); } /* Sagsvisning inde i mockup-kortet */ .fs-case-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .fs-case-card-chip { padding: 0.25rem 0.55rem; background: #e9f1ea; border-radius: 0; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #33613f; } .fs-case-card-number { font-size: 1.15rem; font-weight: 700; color: var(--fs-navy-2); } .fs-case-card-creditor { margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-light, #5a6a7a); } .fs-case-card-divider { height: 1px; background: #e8ecf0; margin: 1.1rem 0; } .fs-case-card-rows { display: grid; gap: 0.65rem; } .fs-case-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; } .fs-case-card-row span { color: var(--text-light, #5a6a7a); } .fs-case-card-row strong { font-weight: 600; color: var(--text-dark, #1a2b3c); } .fs-case-card-row .fs-case-card-highlight { font-size: 1.02rem; font-weight: 700; color: var(--fs-navy-2); } .fs-case-card-progress { margin-top: 1.25rem; } .fs-case-card-progress-top { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.75rem; color: #8a9aaa; } .fs-case-card-dots { display: flex; gap: 4px; } .fs-case-dot { flex: 1; height: 6px; background: #e4e9ee; transition: transform 0.3s ease, background 0.3s ease; } .fs-case-dot--paid { background: var(--fs-navy-2); } /* Subtilt liv i de betalte afdrag: segmentet vokser let og lysner */ .fs-case-dot--paid:hover { transform: scaleY(1.7); background: var(--fs-navy-3); } @media (max-width: 900px) { .fs-tools-split { grid-template-columns: 1fr; gap: 2rem; } .fs-dash-mock { width: 100%; max-width: 480px; margin: 0 auto; } }