/* ========================================================================== FleetTag — style.css Thema via custom properties + .dark class op (zie theme.js). ========================================================================== */ :root { --bg: #ffffff; --fg: #171717; --fg-muted: #525252; --fg-soft: #737373; --line: #e5e5e5; --line-soft: rgba(23, 23, 23, 0.08); --surface: #ffffff; --brand-dark: #040a10; /* Monospace-stack voor eyebrows/kickers (lokaal gehost, zie fonts/). */ --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Accentkleuren als HSL-componenten, zodat ze in gradients en color-mix herbruikbaar zijn. --accent is het blauw dat overal in de UI terugkomt. */ --accent-blue: 230 85% 55%; --accent-red: 328 80% 50%; --accent: hsl(var(--accent-blue)); --gradient-accent: linear-gradient( 90deg, hsl(var(--accent-blue)) 0%, hsl(var(--accent-red)) 100% ); --nav-bg: rgba(255, 255, 255, 0.75); --btn-primary-bg: #040a10; --btn-primary-fg: #ffffff; --btn-primary-hover: #12202e; --shadow-card: 0 1px 2px rgba(4, 10, 16, 0.06), 0 8px 24px rgba(4, 10, 16, 0.08); --shadow-mockup: 0 2px 6px rgba(4, 10, 16, 0.06), 0 24px 64px -16px rgba(4, 10, 16, 0.18); } /* .theme-dark forceert het donkere palet op een subtree (bv. de hero) ook in het lichte thema; .nav--on-dark doet dat voor de navigatiebalk boven de hero. */ .dark, .theme-dark, .nav--on-dark { --bg: #040a10; --fg: #ededed; --fg-muted: #a3a3a3; --fg-soft: #8a9199; --line: #1c2733; --line-soft: rgba(237, 237, 237, 0.1); --surface: #0a1420; /* Lichtere tinten van dezelfde tonen voor leesbaarheid op de donkere achtergrond; --accent en --gradient-accent erven uit :root en pakken deze waarden automatisch op. */ --accent-blue: 230 95% 70%; --nav-bg: rgba(4, 10, 16, 0.75); --btn-primary-bg: #ffffff; --btn-primary-fg: #040a10; --btn-primary-hover: #e2e8f0; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-mockup: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 64px -16px rgba(0, 0, 0, 0.6); } /* Basis-tekstkleur binnen een donkere scope, zodat geërfde kleuren (bv. hero__title, die z'n kleur van de body erft) de donkere --fg gebruiken. */ .theme-dark, .nav--on-dark { color: var(--fg); } /* De browser-mockup blijft het site-thema volgen (wit in licht thema), ook al staat 'ie in de donkere hero: reset de relevante variabelen. */ .theme-dark .browser-mockup { --surface: #ffffff; --line: #e5e5e5; --line-soft: rgba(23, 23, 23, 0.08); --fg-soft: #737373; } .dark .theme-dark .browser-mockup { --surface: #0a1420; --line: #1c2733; --line-soft: rgba(237, 237, 237, 0.1); --fg-soft: #8a9199; } /* -------------------------------------------------------------------------- Basis -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- Knoppen -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 0; border-radius: 8px; font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .btn:active { transform: scale(0.98); } .btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .btn--primary:hover { background: var(--btn-primary-hover); } .btn--secondary { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(4, 10, 16, 0.05); } .btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--fg-soft), 0 1px 2px rgba(4, 10, 16, 0.05); } /* -------------------------------------------------------------------------- Navigatie -------------------------------------------------------------------------- */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease; } .nav--scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-soft); } .nav__inner { max-width: 80rem; margin-inline: auto; height: 4rem; padding-inline: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav__logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--fg); } .nav__logo-img { display: block; height: 1.75rem; width: auto; } /* Donkere wordmark in licht thema, witte in donker thema. */ .nav__logo-img--white { display: none; } .dark .nav__logo-img--dark { display: none; } .dark .nav__logo-img--white { display: block; } /* Nav boven de donkere hero (in licht thema): witte wordmark, lichte tekst. */ .nav--on-dark .nav__logo-img--dark { display: none; } .nav--on-dark .nav__logo-img--white { display: block; } .nav__links { display: none; gap: 0.25rem; } .nav__links a { padding: 0.375rem 0.75rem; border-radius: 8px; font-size: 0.875rem; color: var(--fg-muted); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .nav__links a:hover { color: var(--fg); background: var(--line-soft); } .nav__actions { display: flex; align-items: center; gap: 0.5rem; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-muted); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .theme-toggle:hover { color: var(--fg); background: var(--line-soft); } /* Actie-patroon: toon het icoon van het thema waar je NAARTOE gaat. Licht thema → maan (klik = donker); donker thema → zon (klik = licht). */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } .dark .theme-toggle__moon { display: none; } .dark .theme-toggle__sun { display: block; } .nav__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; } .nav__hamburger-close { display: none; } .nav__hamburger[aria-expanded="true"] .nav__hamburger-open { display: none; } .nav__hamburger[aria-expanded="true"] .nav__hamburger-close { display: block; } .nav__menu { background: var(--bg); border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; } /* Author-declaratie boven de UA-regel [hidden]{display:none}: expliciet verbergen wanneer het hidden-attribuut staat, anders is het menu altijd open. */ .nav__menu[hidden] { display: none; } .nav__menu nav { display: flex; flex-direction: column; } .nav__menu a:not(.btn) { padding: 0.75rem 0.25rem; font-size: 1rem; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-soft); } .nav__menu .btn { align-self: stretch; } @media (min-width: 64rem) { .nav__links { display: flex; } .nav__hamburger, .nav__menu { display: none; } .nav__inner { padding-inline: 1.25rem; } } @media (max-width: 40rem) { .nav__cta { display: none; } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); } .hero__topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Zachte overloop zodat de contourlijnen de tekst nooit in de weg zitten, plus een uitvloeiing onderaan zodat de lijnen niet abrupt stoppen. */ .hero__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient( ellipse 80% 65% at 30% 34%, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 34%, transparent) 42%, transparent 70% ), linear-gradient( to bottom, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent) 85%, var(--bg) 100% ); pointer-events: none; } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: 80rem; margin-inline: auto; padding: 8.5rem 1.25rem 4rem; } /* Subkop + speclijst in de hero (o.a. integraties: "Enterprise-ready"). */ .hero__subtitle { margin: 2.25rem 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .hero__specs { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; max-width: 50rem; } .hero__specs li { position: relative; padding-left: 1.5rem; color: var(--fg-muted); line-height: 1.5; } .hero__specs li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); } /* Eyebrows/kickers: monospace in klein kapitaal, als label boven de kop. */ .hero__eyebrow, .section__kicker { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } .hero__eyebrow { margin: 0 0 1.5rem; } .hero__title { margin: 0; max-width: 50rem; font-size: clamp(2.625rem, 6.5vw, 4.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; } /* Accentwoorden in koppen: het verloop blauw→roze loopt over de tekst zelf. */ .text-gradient, .hero__title-accent, .problem__quote { background-image: var(--gradient-accent); background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero__sub { margin: 1.75rem 0 0; max-width: 50rem; font-size: 1.25rem; line-height: 1.5; color: var(--fg-muted); } .hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.875rem; } .hero__mockup { margin: 4.5rem 0 -100px; position: relative; z-index: 3; } /* De mockup steekt 100px onder de (donkere) hero uit, in de witte sectie eronder; de topolijnen stoppen hard bij de sectierand (geen uitvloeiing). Alleen op hero's mét mockup (index, systeem), niet op de tekst-hero. */ .hero:has(.hero__mockup) { overflow: visible; } .hero:has(.hero__mockup) .hero__inner { padding-bottom: 0; } .hero:has(.hero__mockup) .hero__scrim { background: radial-gradient( ellipse 80% 65% at 30% 34%, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 34%, transparent) 42%, transparent 70% ); } /* -------------------------------------------------------------------------- Browser-mockup -------------------------------------------------------------------------- */ .browser-mockup { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-mockup); } .browser-mockup__bar { position: relative; display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line-soft); } .browser-mockup__dots { display: inline-flex; gap: 0.4rem; } .browser-mockup__dots i { width: 0.65rem; height: 0.65rem; border-radius: 50%; } .browser-mockup__dots i:nth-child(1) { background: #ff5f57; } .browser-mockup__dots i:nth-child(2) { background: #febc2e; } .browser-mockup__dots i:nth-child(3) { background: #28c840; } .browser-mockup__url { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.8125rem; color: var(--fg-soft); } .browser-mockup img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } /* -------------------------------------------------------------------------- Hero-showcase — tab-menu boven de mockup dat tussen schermen wisselt -------------------------------------------------------------------------- */ .hero__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .hero__tab { appearance: none; font: inherit; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--fg-muted); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .hero__tab:hover { color: var(--fg); } .hero__tab.is-active { color: #fff; background: var(--accent); border-color: var(--accent); } /* De mockup-figure zit hier binnen de showcase-wrapper; standaard-figuremarge weg. */ .hero__showcase .browser-mockup { margin: 0; } .browser-mockup__screens { position: relative; } .browser-mockup__screen { display: block; } .browser-mockup__screen[hidden] { display: none; } .browser-mockup__screen.is-active { animation: showcase-fade 0.4s ease both; } @keyframes showcase-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .browser-mockup__screen.is-active { animation: none; } } /* -------------------------------------------------------------------------- Entrance-animaties -------------------------------------------------------------------------- */ @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero__eyebrow, .hero__title, .hero__sub, .hero__actions, .hero__mockup { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero__title { animation-delay: 0.08s; } .hero__sub { animation-delay: 0.16s; } .hero__actions { animation-delay: 0.24s; } .hero__mockup { animation-delay: 0.36s; } /* Zonder JS (of vóór boot) geen lege pagina: animatie alleen mét JS. */ .no-js .hero__eyebrow, .no-js .hero__title, .no-js .hero__sub, .no-js .hero__actions, .no-js .hero__mockup { animation: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__eyebrow, .hero__title, .hero__sub, .hero__actions, .hero__mockup { animation: none; } .btn, .nav, .hero__eyebrow a { transition: none; } } /* -------------------------------------------------------------------------- Secties (generiek) -------------------------------------------------------------------------- */ :root { --world-dot: #d4d4d4; } .dark { --world-dot: #33404d; } .section { position: relative; padding: 1.25rem; overflow: hidden; /* Ruimte onder de vaste nav bij het scrollen naar een sectie (deeplinks). */ scroll-margin-top: 5rem; } .section__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; } .section__kicker { margin: 0 0 1.25rem; } /* -------------------------------------------------------------------------- Blok: Het probleem -------------------------------------------------------------------------- */ .problem { display: flex; align-items: center; min-height: 84vh; /* Extra ruimte bovenaan zodat de content niet tegen de uitstekende hero-mockup (100px overhang) aan komt te staan. */ margin-top: 4rem; padding: 8.5rem 0 4rem; } /* Zelfde 80rem-container + linkerrand als de hero. */ .problem__inner { max-width: 80rem; width: 100%; margin-inline: auto; padding-inline: 1.25rem; text-align: left; } /* Mobiel: geen extra marge boven en compactere sectie-padding. */ @media (max-width: 40rem) { .problem { margin-top: 0; padding: 6rem 1.25rem 2rem; } } /* Smalle tekstkolom links (over Amerika); rechts blijft de kaart vrij. */ .problem__col { position: relative; z-index: 1; max-width: 34rem; padding-block: 0.5rem; } /* Witte gradient die de kaart links wegvaagt zodat de tekst leesbaar is. */ .problem__scrim { position: absolute; left: 0; right: 0; bottom: 0; /* Loopt met de kaart mee omhoog (zelfde -10vh als .world) zodat de linker-fade ook valt op het deel van de kaart dat achter de hero-mockup doorloopt (o.a. Noord-Amerika). */ top: -10vh; /* Gelijk aan .world (z1) maar DOM-later → blijft boven de kaart, onder de tekst. */ z-index: 1; pointer-events: none; background: linear-gradient( to right, var(--bg) 0%, var(--bg) 20%, color-mix(in srgb, var(--bg) 60%, transparent) 42%, transparent 60% ); } .problem__lead { margin: 0 0 1.75rem; font-size: 2.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .problem__body p { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); } .problem__answer { color: var(--fg); font-weight: 600; } /* -------------------------------------------------------------------------- Dotted wereldkaart met oplichtende assets -------------------------------------------------------------------------- */ .world { position: absolute; left: 0; right: 0; bottom: 0; /* Begint 10vh onder de bovenkant van de problem-sectie. */ top: 10vh; /* Boven de topolines (hero__topo z0) en de hero-scrim (z1, gelijk maar DOM-later), maar onder de hero-mockup (hero__inner z2). */ z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; -webkit-mask-image: radial-gradient( ellipse 78% 66% at 50% 46%, #000 48%, transparent 90% ); mask-image: radial-gradient( ellipse 78% 66% at 50% 46%, #000 48%, transparent 90% ); } .world__svg { display: block; width: 100%; /* Niet krimpen tot onleesbaar op smalle schermen: minimaal ~1000px, gecentreerd en aan de zijkanten geclipt (zie .world overflow:hidden). */ min-width: 1000px; height: auto; color: var(--world-dot); } /* Alleen de basisdots dimmen — de pulsen blijven vol blauw. */ .world__svg circle:not(.world__hit):not(.world__ping) { opacity: 0.85; } .world__hit, .world__ping { transform-box: fill-box; transform-origin: center; } .world__hit { fill: var(--accent); filter: drop-shadow(0 0 0.35px var(--accent)); animation: world-hit 2.8s ease-out forwards; } .world__ping { fill: none; stroke: var(--accent); stroke-width: 0.09; animation: world-ping 2.8s ease-out forwards; } @keyframes world-hit { 0% { opacity: 0; transform: scale(0.3); } 8% { opacity: 1; transform: scale(1.45); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.05); } } @keyframes world-ping { 0% { opacity: 0.8; transform: scale(0.3); } 55% { opacity: 0.3; } 100% { opacity: 0; transform: scale(4.5); } } @media (prefers-reduced-motion: reduce) { .world__hit, .world__ping { animation: none; } } /* Mobiel: tekst staat vol breed, dus de linker-scrim wordt een centrale radiale backdrop; kaart blijft eromheen zichtbaar. */ @media (max-width: 48rem) { .problem { min-height: 72vh; } .problem__inner { padding-inline: 0; } /* Lichte lift zodat de tekst leesbaar blijft, maar de (ingezoomde) kaart duidelijk doorschijnt. */ .problem__scrim { background: radial-gradient( ellipse 135% 80% at 50% 46%, color-mix(in srgb, var(--bg) 60%, transparent) 22%, color-mix(in srgb, var(--bg) 28%, transparent) 55%, transparent 82% ); } } /* -------------------------------------------------------------------------- Blok: Hoe het werkt (3 stappen, bento) -------------------------------------------------------------------------- */ :root { --card: #ffffff; --card-border: rgba(15, 23, 42, 0.08); --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.06); --field: #f4f6f9; --field-border: rgba(15, 23, 42, 0.09); } .dark, .theme-dark, .nav--on-dark { --card: #0a121c; --card-border: rgba(255, 255, 255, 0.09); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --field: #101b28; --field-border: rgba(255, 255, 255, 0.1); } .how { scroll-margin-top: 5.5rem; /* Alleen verticale padding op de sectie; de 1.25rem links/rechts zit op de inner (zelfde patroon als hero/probleem) zodat de content overal uitlijnt. */ padding: 6rem 0; background: #f5f5f5; } /* Donker thema: geen lichte band — sectie blijft op de donkere achtergrond. */ .dark .how { background: transparent; } .how__inner { max-width: 80rem; padding-inline: 1.25rem; } .how__head { text-align: center; margin-bottom: 3.25rem; } .how__title { margin: 0 auto; max-width: 100%; font-size: 2.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .how__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-rows: auto auto; gap: 1.5rem; } .how-card--tag { grid-column: 1; grid-row: 1 / span 2; } .how-card--locaties { grid-column: 2; grid-row: 1; } .how-card--dashboard { grid-column: 2; grid-row: 2; } .how-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--card-border); border-radius: 1.5rem; box-shadow: var(--card-shadow); } .how-card__body { padding: 2.25rem; } .how-card__step { margin: 0 0 0.7rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); } .how-card__title { margin: 0 0 0.85rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; } .how-card__text { margin: 0; color: var(--fg-muted); line-height: 1.65; } /* Opeenvolgende alinea's in de kaarttekst krijgen onderlinge ruimte. */ .how-card__text + .how-card__text { margin-top: 1rem; } /* Stap 1 — form-mockup (placeholder) */ .how-card--tag .how-card__body { padding-bottom: 1.5rem; } .how-card__media--form { position: relative; flex: 1 1 0; min-height: 12rem; overflow: hidden; margin-top: 0.5rem; } /* Aangeleverd form-beeld: vult de volledige kaartbreedte. Is het beeld hoger dan de beschikbare ruimte, dan clipt de container en faadt de onderkant met een gradient naar de kaartkleur (wit in licht thema). */ .how-card__shot { display: block; width: 100%; height: auto; } .how-card__media--form::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5.5rem; background: linear-gradient(to top, var(--card), transparent); pointer-events: none; } /* Stap 2 — locaties gedekt: reader met pulserende ringen rechts van de tekst. */ .how-card--locaties { position: relative; display: block; min-height: 22rem; } /* Subtiele topo-achtergrond achter alles (z-index 0). */ .how-card--locaties::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../img/bg.png") center / cover no-repeat; pointer-events: none; } /* Lijnen zijn donker op wit; in dark thema omkeren zodat ze subtiel oplichten. */ .dark .how-card--locaties::before { filter: invert(1); opacity: 0.5; } .how-card--locaties .how-card__body { position: relative; z-index: 2; max-width: 58%; } /* Reader rechts, achter de tekst (z-index 1) zodat de ringen achter de tekst door sweepen, maar boven de topo-achtergrond. */ .loc-reader { position: absolute; z-index: 1; top: 50%; right: 2rem; transform: translateY(-50%); width: 16rem; aspect-ratio: 1; } .loc-reader__svg { width: 100%; height: 100%; /* Ringen mogen buiten de viewBox uitdijen; de kaart clipt ze aan de rand. */ overflow: visible; } .loc-reader__housing { /* var(--fg) is wit in donker thema, donker in licht thema → blijft altijd zichtbaar tegen de kaart. Vol gevuld i.p.v. vaag. */ fill: var(--fg); opacity: 1; } .loc-reader__beacon { fill: var(--accent); filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent)); } /* Pulserende ringen — dun beginnen, dikker worden terwijl ze uitdijen en naar 0 opacity faden (stroke schaalt mee), precies zoals de wereldkaart-puls. */ .loc-reader__ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; /* Eén puls per ring; JS spawnt ze met een willekeurige pauze van 1–3 s. */ animation: loc-reader-ping 4s ease-out forwards; } @keyframes loc-reader-ping { 0% { opacity: 0; transform: scale(0.4); } 10% { opacity: 0.5; } 100% { opacity: 0; transform: scale(5.5); } } /* Auto's: standaard 100% transparant. JS voegt .loc-car--lit toe zodra de puls hun positie bereikt (snel oplichten), en haalt 'm weg als de puls voorbij is (zacht uitfaden). */ .loc-car { fill: var(--accent); opacity: 0; transition: opacity 0.4s ease; filter: drop-shadow(0 0 1.6px color-mix(in srgb, var(--accent) 65%, transparent)); } .loc-car--lit { opacity: 1; transition: opacity 0.16s ease-out; } @media (prefers-reduced-motion: reduce) { .loc-reader__ring { animation: none; } } /* Stap 3 — dashboard: beeld groot, links-onderin, achter de tekst. */ .how-card--dashboard { position: relative; display: block; min-height: 36rem; } .how-card__media--dash { position: absolute; right: 0; bottom: 0; z-index: 0; width: 85%; } .how-card__media--dash img { display: block; width: 100%; height: auto; } .how-card--dashboard .how-card__body { position: relative; z-index: 2; margin-right: auto; max-width: 100%; } /* Mobiel: bento wordt één kolom; kaarten stapelen. */ @media (max-width: 60rem) { .how__grid { grid-template-columns: 1fr; grid-template-rows: none; } .how-card--tag, .how-card--locaties, .how-card--dashboard { grid-column: 1; grid-row: auto; } .how-card--dashboard { display: flex; flex-direction: column; min-height: 0; } .how-card--dashboard .how-card__body { max-width: 100%; margin-right: 0; } /* Tekst boven, afbeelding onderop en rechts-onder tegen de container. */ .how-card__media--dash { order: 1; position: static; width: 100%; padding: 0 0 0 1.5rem; } .how-card--locaties .how-card__body { max-width: 100%; } .loc-reader { position: static; transform: none; width: 13rem; margin: 0.5rem auto 0; } } /* -------------------------------------------------------------------------- Blok: In cijfers (stats) -------------------------------------------------------------------------- */ .stats { /* Ruimere marge zodat het blok losstaat; horizontale padding op de inner (uitlijnen met de andere blokken). */ padding: 6rem 0; } .stats__inner { max-width: 80rem; padding-inline: 1.25rem; } .stats__head { max-width: 100%; margin: 0 auto 3.5rem; text-align: center; } .stats__title { margin: 0.75rem 0 1rem; font-size: 2.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .stats__intro { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); } /* Afsluitend impact-blok onder het cijferraster. */ .stats__outro { max-width: 100%; margin: 4.5rem 0 0; text-align: center; } .stats__outro-title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--accent); } .stats__outro p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); } .stats__outro p:last-child { margin-bottom: 0; } .stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.5rem; } /* Verticale scheidingslijn links van elke kolom, zoals de referentie — behalve de eerste kolom van een rij. */ .stat { padding: 0.25rem 2.25rem; border-left: 1px solid var(--card-border); } /* Eerste kolom van elke rij (3-koloms raster) krijgt geen scheidingslijn links. :where() houdt alle borderregels op gelijke specificiteit, zodat een latere breakpoint ze zonder verrassingen overschrijft. */ .stat:where(:nth-child(3n + 1)) { border-left: 0; } /* Buitenranden vlak met de container: linkerkolom geen padding-links, rechterkolom geen padding-rechts. */ .stat:where(:nth-child(3n + 1)) { padding-left: 0; } .stat:where(:nth-child(3n)) { padding-right: 0; } .stat__value { margin: 0 0 0.85rem; font-size: clamp(2.5rem, 3.4vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--fg); } .stat__label { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--fg); } .stat__text { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--fg-muted); } /* Smal: twee kolommen. */ @media (max-width: 44rem) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { border-left: 1px solid var(--card-border); padding-inline: 2.25rem; } .stat:where(:nth-child(2n + 1)) { border-left: 0; padding-left: 0; } .stat:where(:nth-child(2n)) { padding-right: 0; } } /* Mobiel: één kolom, geen scheidingslijnen meer. */ @media (max-width: 30rem) { .stats__grid { grid-template-columns: 1fr; row-gap: 2.25rem; } .stat { padding-inline: 0; border-left: 0; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { /* Zelfde lichte band als blok 3 (alleen licht thema); donker blijft ongewijzigd. */ background: #f5f5f5; padding: 6rem 0 3rem; } .dark .footer { background: transparent; } .footer__inner { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; display: grid; grid-template-columns: 1.5fr 1fr 2fr; gap: 2.5rem 2rem; } .footer__logo-img { display: block; height: 1.75rem; width: auto; } /* Donkere wordmark in licht thema, witte in donker thema (zoals de nav). */ .footer__logo-img--white { display: none; } .dark .footer__logo-img--dark { display: none; } .dark .footer__logo-img--white { display: block; } .footer__tagline { margin: 1.25rem 0 0; max-width: 30rem; font-size: 0.9375rem; line-height: 2; color: var(--fg-muted); } .footer__heading { margin: 0 0 1.1rem; font-size: 0.875rem; font-weight: 600; color: var(--fg); } .footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .footer__links a { font-size: 0.9375rem; color: var(--fg-muted); text-decoration: none; transition: color 0.15s ease; } .footer__links a:hover { color: var(--fg); } /* Product-links: op desktop twee kolommen onder één "Product"-kop; op mobiel één doorlopende lijst (geen zwevende kolom zonder kop meer). */ @media (min-width: 60rem) { .footer__links--product { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0.7rem 2rem; } } .footer__bar { max-width: 80rem; margin: 3.5rem auto 0; padding: 1.75rem 1.25rem 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; } .footer__copy { margin: 0; font-size: 0.75rem; color: var(--fg-soft); } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footer__legal a { font-size: 0.75rem; color: var(--fg-soft); text-decoration: none; transition: color 0.15s ease; } .footer__legal a:hover { color: var(--fg); } @media (max-width: 60rem) { .footer__inner { grid-template-columns: 1fr 1fr; } /* Brand-kolom over de volle breedte boven de linkkolommen. */ .footer__brand { grid-column: 1 / -1; } } @media (max-width: 40rem) { .footer__inner { grid-template-columns: 1fr; gap: 2.25rem; } } /* -------------------------------------------------------------------------- Integraties-pagina: info-secties, FAQ-accordion, demo + formulier -------------------------------------------------------------------------- */ /* Verticale ademruimte voor de tekstsecties. */ .info { padding-block: 3.5rem; } .demo { padding-block: 6rem; } /* FAQ als grijze band over de volle breedte (alleen licht thema). */ .faq { padding-block: 6rem; background: #f5f5f5; } .dark .faq { background: transparent; } .info__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); } .info__body { margin-top: 1.5rem; max-width: 46rem; display: flex; flex-direction: column; gap: 1.15rem; } .info__body p { margin: 0; color: var(--fg-muted); line-height: 1.7; } /* Subkop + speclijst binnen een info-blok (o.a. "Ontworpen voor groei"). */ .info__subtitle { margin: 0.75rem 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .info__specs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; } .info__specs li { position: relative; padding-left: 1.5rem; color: var(--fg-muted); line-height: 1.5; } .info__specs li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); } /* Schaalbaar: groei-chart als volledige sectie-achtergrond, tekst rechts eroverheen. */ .info--schaalbaar { position: relative; overflow: hidden; padding: 6rem 0; } .info--schaalbaar .section__inner { position: relative; z-index: 1; } /* Tekst naar rechts drukken; blijft binnen de 80rem-container. */ .schaal__text { max-width: 40rem; margin-left: auto; } /* Onderaan verankerde, full-width golfband over 90% van de sectiehoogte. De curve zelf start op 30% en eindigt op 90% van die hoogte (zie de pad-y's in integraties.php: y=267 → y=3 binnen een viewBox van 400). */ .schaal__chart { position: absolute; left: 0; right: 0; bottom: 0; height: 90%; margin: 0; pointer-events: none; z-index: 0; } .schaal__chart svg { display: block; width: 100%; height: 100%; } /* Lijn en fill worden samen door één clip onthuld (schaal.js zet de clip-breedte per frame). Geen CSS-transition: de voortgang volgt de scroll. */ .schaal__stop--from { stop-color: hsl(var(--accent-blue)); } .schaal__stop--to { stop-color: hsl(var(--accent-red)); } .schaal__line { fill: none; stroke: url(#schaalStroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* FAQ-accordion */ .faq__list { margin: 1.75rem 0 0; max-width: 100%; border-top: 1px solid var(--line-soft); } .faq__item { border-bottom: 1px solid var(--line-soft); } .faq__q { list-style: none; cursor: pointer; position: relative; padding: 1.15rem 2.25rem 1.15rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--fg); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: 0.35rem; top: 1.5rem; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--fg-soft); border-bottom: 2px solid var(--fg-soft); transform: rotate(45deg); transition: transform 0.2s ease; } .faq__item[open] .faq__q::after { transform: rotate(-135deg); } .faq__a { padding: 0 2.25rem 1.35rem 0; } .faq__a p { margin: 0; color: var(--fg-muted); line-height: 1.7; } /* Demo + formulier: tekst links, formulier ernaast. */ .demo__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: start; } .demo__body { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.15rem; } /* Bevestiging/fout na versturen van het formulier. */ .form__status { margin: 0 0 1.25rem; padding: 0.85rem 1rem; border-radius: 0.6rem; font-size: 0.9375rem; line-height: 1.5; } .form__status--ok { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--fg); } .form__status--error { background: color-mix(in srgb, #dc2626 14%, transparent); color: var(--fg); } @media (max-width: 60rem) { .demo__grid { grid-template-columns: 1fr; gap: 2rem; } } .demo__body p { margin: 0; color: var(--fg-muted); line-height: 1.7; } .demo__card { padding: 2rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 1.25rem; box-shadow: var(--card-shadow); } .demo__card-title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } .demo__card-note { margin: 0.4rem 0 1.5rem; font-size: 0.875rem; color: var(--fg-soft); } .form { display: grid; gap: 1rem; } /* Honeypot: verborgen voor mensen, zichtbaar voor bots. */ .form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form__field { display: flex; flex-direction: column; gap: 0.4rem; } .form__field label { font-size: 0.875rem; font-weight: 500; color: var(--fg); } .form__field input, .form__field textarea { font: inherit; font-size: 0.9375rem; color: var(--fg); background: var(--field); border: 1px solid var(--card-border); border-radius: 0.6rem; padding: 0.7rem 0.85rem; width: 100%; box-sizing: border-box; } .form__field input:focus, .form__field textarea:focus { outline: none; border-color: var(--accent); } .form__field textarea { min-height: 6rem; resize: vertical; } .form .btn { justify-self: start; } @media (max-width: 34rem) { .form__row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Juridische pagina's (privacybeleid, algemene voorwaarden) -------------------------------------------------------------------------- */ .legal { /* Ruimte onder de vaste navigatiebalk. */ padding: 8.5rem 0 5rem; } /* Volledige containerbreedte: tekst links, sticky inhoudsopgave rechts. */ .legal__inner { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 3.5rem; align-items: start; } .legal__body { max-width: 50rem; } .legal h1 { margin: 0.75rem 0 0.5rem; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .legal__updated { margin: 0 0 2rem; font-size: 0.9375rem; color: var(--fg-soft); } .legal__intro { font-size: 1.0625rem; } /* Anker-offset zodat een aangeklikt hoofdstuk niet onder de nav valt. */ .legal__section { scroll-margin-top: 6rem; } .legal h2 { margin: 2.5rem 0 0.75rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; } .legal__body p, .legal__body li { color: var(--fg-muted); line-height: 1.65; } .legal__body p { margin: 0 0 1.1rem; } .legal__body ul { margin: 0 0 1.1rem; padding-left: 1.25rem; } .legal__body li { margin-bottom: 0.45rem; } .legal__body strong { color: var(--fg); font-weight: 600; } .legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* --- Sticky inhoudsopgave + scroll-spy --- */ .legal__toc { position: sticky; top: 6rem; } .legal__toc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.15rem; } .legal__toc-item a { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; font-size: 0.8125rem; line-height: 1.35; color: var(--fg-soft); text-decoration: none; transition: color 0.2s ease; } /* Streepje vóór het hoofdstuk; wordt breder en fel wanneer actief. */ .legal__toc-item a::before { content: ""; flex: none; width: 0.9rem; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.5; transition: width 0.25s ease, opacity 0.2s ease; } .legal__toc-item a:hover { color: var(--fg-muted); } .legal__toc-item--active a { color: var(--accent); font-weight: 500; } .legal__toc-item--active a::before { width: 1.8rem; opacity: 1; } /* Entrance: inhoud rijst gestaggerd op bij het laden (zelfde curve als de hero). De koptekst loopt op; de hoofdstukken en de inhoudsopgave volgen als groep. */ .legal__body > *, .legal__toc { animation: hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .legal__body > :nth-child(1) { animation-delay: 0s; } .legal__body > :nth-child(2) { animation-delay: 0.06s; } .legal__body > :nth-child(3) { animation-delay: 0.12s; } .legal__body > :nth-child(4) { animation-delay: 0.18s; } .legal__body > :nth-child(n + 5) { animation-delay: 0.24s; } .legal__toc { animation-delay: 0.32s; } /* Zonder JS (of vóór boot): geen animatie, dus nooit een lege pagina. */ .no-js .legal__body > *, .no-js .legal__toc { animation: none; } @media (prefers-reduced-motion: reduce) { .legal__body > *, .legal__toc { animation: none; } } /* Smallere schermen: geen sticky kolom, tekst op leesbare breedte. */ @media (max-width: 64rem) { .legal__inner { grid-template-columns: 1fr; gap: 0; } .legal__toc { display: none; } .legal__body { max-width: 46rem; } } /* -------------------------------------------------------------------------- Systeem-pagina -------------------------------------------------------------------------- */ .sys { padding-block: 5rem; } .sys__inner { max-width: 80rem; padding-inline: 1.25rem; } /* Eerste blok: ruimte onder de vaste nav. */ .sys-dashboard { padding-top: 8.5rem; } /* Consistent met .problem op de homepage. */ .sys-parts { margin-top: 4rem; padding: 8.5rem 0 4rem; } .sys__title { margin: 0.75rem 0 1.25rem; font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .sys__text { margin: 0 0 1.1rem; color: var(--fg-muted); line-height: 1.65; } .sys__lead { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); } .sys__head { max-width: 100%; margin: 0 auto 3rem; text-align: center; } /* --- Blok 1: dashboard + border-beam-kaart --- */ .sys-dashboard__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; } @property --beam-angle { syntax: ""; inherits: false; initial-value: 0deg; } .beam-card { position: relative; border-radius: 14px; padding: 1.5px; overflow: hidden; background: var(--card-border); box-shadow: var(--shadow-mockup); } /* Ronddraaiende lichtbundel over de rand (border-beam). */ .beam-card::before { content: ""; position: absolute; inset: -40%; background: conic-gradient( from var(--beam-angle), transparent 0 60%, color-mix(in srgb, var(--accent) 45%, transparent) 74%, var(--accent) 84%, #ffffff 90%, transparent 100% ); animation: beam-spin 6s linear infinite; } @keyframes beam-spin { to { --beam-angle: 360deg; } } .beam-card__inner { position: relative; border-radius: 12.5px; overflow: hidden; background: var(--card); } .beam-card__inner img { display: block; width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .beam-card::before { animation: none; } } /* --- Blok 2: drie onderdelen --- */ .sys-parts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .sys-part { padding: 2rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 1.25rem; box-shadow: var(--card-shadow); } .sys-part__media { margin: 0 0 1.5rem; border-radius: 0.85rem; overflow: hidden; background: var(--field); } .sys-part__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .sys-part__title { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .sys-part__text { margin: 0; color: var(--fg-muted); line-height: 1.65; } .sys-parts__result { max-width: 100%; margin: 2.5rem auto 0; text-align: center; font-size: 0.875rem; color: var(--fg-soft); } /* --- Blok 3: features --- */ .sys-features { padding-bottom: 6rem; } .sys-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .feature { padding: 2rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 1.25rem; box-shadow: var(--card-shadow); } .feature__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: 1.1rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.9375rem; font-weight: 600; } .feature__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } .feature__badge { padding: 0.15rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .feature__text { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted); } /* --- Blok 4: technologie (grijze band) + CPU-visual --- */ .sys-tech { position: relative; overflow: hidden; padding: 6rem 0; background: #f5f5f5; } /* Donker thema: geen afwijkende band, gewoon de donkere achtergrond. */ .dark .sys-tech { background: transparent; } /* De animatie als grote achtergrond, links, achter de tekst. */ .sys-tech__visual { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 82%; max-width: 62rem; z-index: 0; pointer-events: none; } .cpu-arch { display: block; width: 100%; height: auto; color: var(--fg-muted); } /* Vulling achter de controller zodat de lijnen erachter verdwijnen en netjes tegen de rand lijken aan te sluiten (de controller-omtrek is transparant). */ .cpu-hub-bg { fill: #f5f5f5; } .dark .cpu-hub-bg { fill: #040a10; } /* Donkere controller-illustratie omkeren zodat 'ie licht is op donker thema. SVG-filter (url) i.p.v. CSS invert(1) — Safari past CSS-filterfuncties niet betrouwbaar toe op SVG-elementen. */ .dark .cpu-hub { filter: url(#cpu-invert); } /* Reader-dots (marker-cirkels) meekleuren met het thema. */ .dark .cpu-marker-dot { fill: #f5f5f5; stroke: #cbd5e1; } /* Scrim veegt de animatie rechts weg zodat de tekst (rechts) leesbaar blijft. */ .sys-tech__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to left, #f5f5f5 0%, #f5f5f5 24%, color-mix(in srgb, #f5f5f5 55%, transparent) 46%, transparent 64% ); } .dark .sys-tech__scrim { background: linear-gradient( to left, var(--bg) 0%, var(--bg) 24%, color-mix(in srgb, var(--bg) 55%, transparent) 46%, transparent 64% ); } .sys-tech .section__inner { position: relative; z-index: 2; } /* Tekst aan de rechterkant. */ .sys-tech__body { max-width: 34rem; margin-left: auto; } /* Subkoppen binnen het technologie-blok (kenmerken, slotalinea). */ .sys-tech__subtitle { margin: 2rem 0 0.75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .sys-tech__specs { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; } .sys-tech__specs li { position: relative; padding-left: 1.5rem; color: var(--fg-muted); line-height: 1.5; } .sys-tech__specs li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); } /* CPU-architectuur: lichtjes die over de paden naar de kern lopen. */ .cpu-architecture { offset-anchor: 10px 0px; animation: cpu-path; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99); } .cpu-line-1 { offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30"); animation-duration: 5s; animation-delay: 1s; } .cpu-line-2 { offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40"); animation-duration: 2s; animation-delay: 6s; } .cpu-line-3 { offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25"); animation-duration: 6s; animation-delay: 4s; } .cpu-line-4 { offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65"); animation-duration: 3s; animation-delay: 3s; } .cpu-line-5 { offset-path: path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35"); animation-duration: 4s; animation-delay: 9s; } .cpu-line-6 { offset-path: path("M 94.8 95 v -46"); animation-duration: 7s; animation-delay: 3s; } .cpu-line-7 { offset-path: path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28"); animation-duration: 4s; animation-delay: 4s; } .cpu-line-8 { offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35"); animation-duration: 3s; animation-delay: 3s; } @keyframes cpu-path { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } @media (prefers-reduced-motion: reduce) { .cpu-architecture { animation: none; opacity: 0; } } /* --- Prijzen --- */ .sys-pricing { scroll-margin-top: 5.5rem; padding: 6rem 0; } .pricing__toggle { display: inline-flex; gap: 0.25rem; margin-top: 1.75rem; padding: 0.25rem; border-radius: 999px; background: var(--field); border: 1px solid var(--card-border); } .pricing__toggle button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--fg-muted); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pricing__toggle button.is-active { background: var(--card); color: var(--fg); box-shadow: var(--card-shadow); } .pricing__save { padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.6875rem; font-weight: 600; } .pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; /* Even hoge kaarten: alle tiers rekken tot de hoogste. */ align-items: stretch; text-align: left; } .tier { position: relative; display: flex; flex-direction: column; padding: 2rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 1.25rem; box-shadow: var(--card-shadow); } .tier--featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--card-shadow); } .tier__badge { position: absolute; top: -0.75rem; left: 2rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--accent); color: #ffffff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .tier__name { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; } .tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin: 0; } .tier__from { font-size: 0.8125rem; color: var(--fg-soft); } .tier__amount { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); } .tier__amount--quote { font-size: 2.25rem; } .tier__per { font-size: 0.9375rem; color: var(--fg-muted); } .tier__note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--fg-soft); } .tier__cta { width: 100%; margin: 1.5rem 0 1.75rem; } .tier__features { margin: 0; padding: 1.5rem 0 0; list-style: none; display: grid; gap: 0.7rem; border-top: 1px solid var(--card-border); } .tier__features li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; line-height: 1.45; color: var(--fg-muted); } .tier__features li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat; } .pricing__footnote { max-width: 100%; margin: 2.5rem auto 0; text-align: center; font-size: 0.875rem; color: var(--fg-soft); } .pricing__footnote a { color: var(--accent); } @media (max-width: 60rem) { .pricing__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } } /* --- Responsief --- */ @media (max-width: 60rem) { .sys-dashboard__grid { grid-template-columns: 1fr; } .sys-parts__grid, .sys-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Animatie als grote, ingetogen achtergrond; scrim veegt het geheel wat weg. */ .sys-tech__visual { left: -25%; width: 130%; opacity: 0.4; } .sys-tech__scrim { background: color-mix(in srgb, #f5f5f5 40%, transparent); } .dark .sys-tech__scrim { background: color-mix(in srgb, var(--bg) 45%, transparent); } } @media (max-width: 40rem) { .sys-parts__grid, .sys-features__grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Scroll-reveal (fade-up bij in beeld scrollen) -------------------------------------------------------------------------- */ /* Alleen mét JS verbergen (theme-init verwijdert .no-js), anders blijft de inhoud zonder JS altijd zichtbaar. :where() houdt de specificiteit laag zodat .is-visible de verberg-regel kan overschrijven. */ :where(html:not(.no-js)) [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Gestaggerde vertraging voor blokken die als groep in beeld komen. */ .sys-dashboard__grid > [data-reveal]:nth-child(2), .sys-tech__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.1s; } .sys-parts__grid > [data-reveal]:nth-child(2), .pricing__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; } .sys-parts__grid > [data-reveal]:nth-child(3), .pricing__grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; } .sys-features__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.06s; } .sys-features__grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.12s; } .sys-features__grid > [data-reveal]:nth-child(4) { --reveal-delay: 0.18s; } .sys-features__grid > [data-reveal]:nth-child(5) { --reveal-delay: 0.24s; } .sys-features__grid > [data-reveal]:nth-child(6) { --reveal-delay: 0.3s; } /* Homepage-grids (Hoe het werkt, De cijfers). */ .how__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.08s; } .how__grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.16s; } .stats__grid > [data-reveal]:nth-child(2) { --reveal-delay: 0.06s; } .stats__grid > [data-reveal]:nth-child(3) { --reveal-delay: 0.12s; } .stats__grid > [data-reveal]:nth-child(4) { --reveal-delay: 0.18s; } .stats__grid > [data-reveal]:nth-child(5) { --reveal-delay: 0.24s; } .stats__grid > [data-reveal]:nth-child(6) { --reveal-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { :where(html:not(.no-js)) [data-reveal] { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- Mobiel: compactere verticale ruimte voor de grote secties (3rem 0). Aan het eind van het bestand zodat dit de sectie-eigen padding overschrijft. -------------------------------------------------------------------------- */ @media (max-width: 40rem) { /* Basis-sys-secties (o.a. sys-parts) iets ruimer bovenaan; sys-tech en sys-pricing hieronder staan later en winnen zo hun eigen 3rem 0. */ .sys { padding: 8rem 0 4rem; } .how, .stats, .footer, .sys-tech, .sys-pricing, .info--schaalbaar, .faq, .demo { padding: 3rem 0; } }