/* ===================================================================== Dawaco sites · shared component stylesheet · v1.0 · 24-09-2026 One file, identical on dawaco/ and phrea/. Site differences are driven by the body class: or . All colours come from tokens.css (semantic --c-* tokens). No raw hex here except inside the explicit .ground plane that tokens.css already defines. Class reference: sites/COMPONENTS.md ===================================================================== */ @import url("/phrea-site/assets/css/tokens.css"); /* ---------- 0. Base ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-padding-top: 88px; } @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } } body{ min-height: 100vh; display: flex; flex-direction: column; } main{ flex: 1 0 auto; display: block; } h1,h2,h3,h4{ font-family: var(--font-display); color: var(--c-ink); margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; } @media (max-width: 640px){ h1,h2,h3,h4{ hyphens: auto; -webkit-hyphens: auto; } } h1{ font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } h2{ font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h3{ font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); } h4{ font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); } p{ margin: 0 0 var(--space-4); max-width: var(--measure); } p:last-child{ margin-bottom: 0; } ul, ol{ max-width: var(--measure); } a{ color: var(--c-link); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover{ text-decoration-thickness: 2px; } strong, b{ font-weight: 700; color: var(--c-ink); } abbr[title]{ text-decoration: underline dotted; text-underline-offset: .2em; } code, kbd{ font-family: var(--font-mono); font-size: .88em; } hr{ border: 0; border-top: 1px solid var(--c-line); margin: var(--space-7) 0; } img{ display: block; } button{ font: inherit; } :focus-visible{ outline: var(--focus-ring); outline-offset: var(--focus-offset); } .visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip{ position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-dialog); background: var(--c-action-bg); color: var(--c-action-fg); padding: 10px 14px; border-radius: var(--radius-1); font-weight: 600; text-decoration: none; } .skip:focus{ top: 12px; } /* Logo theme swap (brand book): never override display on these with a more specific selector */ .on-dark{ display: none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .on-dark{ display: inline-block; } :root:not([data-theme="light"]) .on-light{ display: none; } } :root[data-theme="dark"] .on-dark{ display: inline-block; } :root[data-theme="dark"] .on-light{ display: none; } .ground .on-dark{ display: inline-block; } .ground .on-light{ display: none; } /* ---------- 1. Type helpers ---------- */ .display{ font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } .lead{ font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text); } .muted{ color: var(--c-muted); } .small{ font-size: var(--fs-small); } .label{ font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .mono{ font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .kicker{ display: inline-flex; align-items: center; gap: 10px; font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--space-4); } .hl{ color: var(--c-live-text); } /* one highlighted word in a headline; never on white body copy */ .prose > * + *{ margin-top: var(--space-4); } .prose h2{ margin-top: var(--space-7); } .prose h3{ margin-top: var(--space-6); } .prose ul{ padding-left: 1.2em; } .prose li + li{ margin-top: var(--space-2); } .footnote{ font-size: var(--fs-small); color: var(--c-muted); max-width: 72ch; } .footnote::before{ content: "* "; font-family: var(--font-mono); } /* ---------- 2. Layout ---------- */ .wrap{ width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); } .wrap--narrow{ max-width: calc(var(--container) - 160px); } .section{ padding: var(--space-section) 0; position: relative; } .section--tight{ padding: var(--space-8) 0; } .section--sunken{ background: var(--c-sunken); } .section--surface{ background: var(--c-surface); } .section--rule{ border-top: 1px solid var(--c-line); } .ground.section, .section.ground{ background: var(--c-bg); } .section-head{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--space-5) var(--space-7); align-items: end; margin-bottom: var(--space-7); } .section-head > p{ margin: 0; } .split{ display: grid; gap: var(--space-7); grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: start; } .split--8-4{ grid-template-columns: minmax(0,8fr) minmax(0,4fr); } .split--5-7{ grid-template-columns: minmax(0,5fr) minmax(0,7fr); } .split--6-6{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .split--center{ align-items: center; } .stack > * + *{ margin-top: var(--space-5); } .cluster{ display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } @media (max-width: 900px){ .section-head, .split, .split--8-4, .split--5-7, .split--6-6{ grid-template-columns: minmax(0,1fr); gap: var(--space-6); } } /* Section marker: 1px ink rule with a mono label (and optional coordinate) on it */ .marker{ display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--c-ink); padding-top: var(--space-3); margin-bottom: var(--space-6); font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .marker > :first-child{ color: var(--c-ink); } /* ---------- 3. Small parts ---------- */ .dot{ display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-dot); background: var(--c-live); flex: none; box-shadow: 0 0 0 2px var(--c-surface); vertical-align: middle; } .dot--water{ background: var(--c-water); } @media (prefers-reduced-motion: no-preference){ .dot.pulse{ position: relative; } .dot.pulse::after{ content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--c-live); animation: halo var(--dur-pulse) var(--ease-out) infinite; } @keyframes halo{ from{ transform: scale(1); opacity: .7; } to{ transform: scale(2.6); opacity: 0; } } } .tag{ display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) var(--fs-label)/1 var(--font-mono); letter-spacing: .02em; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); padding: 6px 9px; background: var(--c-surface); white-space: nowrap; } .tag::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-live); } .tag--water::before{ background: var(--c-water); } .tag--plain::before{ display: none; } .badge-module{ display: inline-block; font: var(--fw-medium) 12.5px/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-1); padding: 4px 6px; vertical-align: 3px; margin-left: 6px; white-space: nowrap; } .icon{ display: block; width: 40px; height: 40px; color: var(--c-ink); flex: none; } .icon svg{ display: block; width: 40px; height: 40px; } /* Buttons: one primary per view */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; font: var(--fw-semibold) var(--fs-body)/1.1 var(--font-body); padding: 12px 18px; border-radius: var(--radius-1); text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn .arr{ font-family: var(--font-mono); font-weight: 500; } .btn.primary{ background: var(--c-action-bg); color: var(--c-action-fg); } .btn.primary:hover{ background: var(--c-action-hover); } .btn.secondary{ background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); } .btn.secondary:hover{ border-color: var(--c-ink); } .btn.ghost{ background: transparent; color: var(--c-link); padding-left: 0; padding-right: 0; min-height: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .btn.small{ min-height: 38px; padding: 8px 13px; font-size: var(--fs-small); } .btn-row{ display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-6); } @media (prefers-reduced-motion: no-preference){ .btn{ transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn .arr{ transition: transform var(--dur-fast) var(--ease-out); } .btn:hover .arr{ transform: translateX(3px); } } .link-arrow{ font-weight: 600; text-decoration: none; color: var(--c-link); display: inline-flex; gap: 8px; align-items: baseline; } .link-arrow::after{ content: "→"; font-family: var(--font-mono); font-weight: 500; } .link-arrow:hover{ text-decoration: underline; } /* ---------- 4. Header ---------- */ .site-header{ position: sticky; top: 0; z-index: var(--z-sticky); background: var(--c-bg); border-bottom: 1px solid var(--c-line); } .site-header.is-scrolled{ box-shadow: 0 10px 30px -24px rgba(7,20,31,.55); } .site-header__bar{ display: flex; align-items: center; gap: var(--space-5); min-height: 68px; } .brand{ display: inline-flex; align-items: center; flex: none; text-decoration: none; padding: 6px 0; } .brand img{ height: auto; } .brand .logo-dawaco{ width: 132px; } .brand .logo-phrea{ width: 168px; } .nav{ margin-left: auto; } .nav ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; max-width: none; } .nav a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--c-ink); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: var(--radius-1); position: relative; white-space: nowrap; } .nav a:hover{ color: var(--c-link); } .nav a[aria-current="page"]::after{ content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: var(--c-live); } .nav .nav-cross{ margin-left: 8px; border: 1px solid var(--c-line-strong); gap: 8px; min-height: 38px; } .nav .nav-cross::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-live); } .nav .nav-cross:hover{ border-color: var(--c-ink); } .header-tools{ display: flex; align-items: center; gap: var(--space-2); flex: none; } .lang{ display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); font: var(--fw-medium) 12.5px/1 var(--font-mono); letter-spacing: .04em; } .lang > *{ display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 36px; padding: 0 8px; color: var(--c-muted); text-decoration: none; } .lang [aria-current]{ color: var(--c-ink); background: var(--c-sunken); } .lang a:hover{ color: var(--c-ink); } .theme-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); cursor: pointer; } .theme-toggle:hover{ border-color: var(--c-ink); } .theme-toggle svg{ width: 18px; height: 18px; } .theme-toggle .t-sun, .theme-toggle .t-moon{ display: none; } :root[data-theme="light"] .theme-toggle .t-auto, :root[data-theme="dark"] .theme-toggle .t-auto{ display: none; } :root[data-theme="light"] .theme-toggle .t-sun{ display: block; } :root[data-theme="dark"] .theme-toggle .t-moon{ display: block; } .header-cta{ flex: none; } .menu-toggle{ display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); font-weight: 600; cursor: pointer; } .menu-toggle .bars{ position: relative; width: 16px; height: 2px; background: currentColor; } .menu-toggle .bars::before, .menu-toggle .bars::after{ content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; } .menu-toggle .bars::before{ top: -5px; } .menu-toggle .bars::after{ top: 5px; } .menu-toggle[aria-expanded="true"] .bars{ background: transparent; } .menu-toggle[aria-expanded="true"] .bars::before{ top: 0; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .bars::after{ top: 0; transform: rotate(-45deg); } .nav-panel{ display: none; } html.menu-open{ overflow: hidden; } @media (max-width: 1439px){ .site-header__bar{ gap: var(--space-3); } .nav, .header-cta, .header-tools .theme-toggle{ display: none; } .header-tools{ margin-left: auto; } .menu-toggle{ display: inline-flex; } .nav-panel{ position: fixed; left: 0; right: 0; top: var(--header-h, 69px); bottom: 0; z-index: var(--z-sticky); border-top: 1px solid var(--c-line); background: var(--c-bg); padding: var(--space-4) 0 var(--space-6); overflow-y: auto; overscroll-behavior: contain; } .nav-panel.is-open{ display: block; } .nav-panel ul{ list-style: none; margin: 0 0 var(--space-5); padding: 0; max-width: none; } .nav-panel li{ border-bottom: 1px solid var(--c-line); } .nav-panel li a{ display: flex; justify-content: space-between; align-items: center; min-height: 52px; color: var(--c-ink); font: var(--fw-semibold) 18px/1.2 var(--font-body); text-decoration: none; } .nav-panel li a::after{ content: "→"; font-family: var(--font-mono); color: var(--c-muted); } .nav-panel li a[aria-current="page"]{ color: var(--c-link); } .nav-panel li a[aria-current="page"]::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-live); margin-right: 10px; order: -1; } .nav-panel li a[aria-current="page"]{ justify-content: flex-start; } .nav-panel li a[aria-current="page"]::after{ margin-left: auto; } .nav-panel .panel-tools{ display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .nav-panel .panel-tools .theme-toggle{ display: inline-flex; width: auto; padding: 0 12px; gap: 8px; } } @media (max-width: 420px){ .brand .logo-dawaco{ width: 112px; } .brand .logo-phrea{ width: 150px; } .menu-toggle .menu-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .theme-toggle .t-text{ font-size: var(--fs-small); font-weight: 600; } .site-header .theme-toggle .t-text{ display: none; } .nav-panel .theme-toggle .t-text{ display: inline; } /* Phrea: header on the ground plane */ .site-phrea .site-header{ background: var(--c-bg); border-bottom-color: var(--c-line); } /* ---------- 5. Heroes ---------- */ .hero{ position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line); } .hero__bg{ position: absolute; inset: 0; pointer-events: none; } .hero__bg svg{ position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } .hero__inner{ position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--space-7); align-items: end; padding-top: var(--space-9); padding-bottom: var(--space-8); } .hero h1{ margin: 0 0 var(--space-5); } .hero .display{ margin: 0 0 var(--space-5); } .hero__copy .lead{ max-width: 58ch; } .hero__copy .lead, .hero__copy .kicker{ background: color-mix(in srgb, var(--c-bg) 84%, transparent); } .hero__meta{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } /* map hero: contours behind text at ≤60% */ .hero--map .hero__bg{ opacity: .6; } /* section hero: the doorsnede device on the right (Phrea signature) */ .hero--section .hero__inner{ align-items: center; } .hero__device{ margin: 0; } .hero__device svg{ display: block; width: 100%; height: auto; } /* shot hero: full product screen under the headline */ .hero--shot .hero__inner{ grid-template-columns: minmax(0,1fr); padding-bottom: 0; gap: var(--space-6); } .hero--shot .hero__copy{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--space-7); align-items: end; } .hero--shot .hero__copy > div + div{ padding-bottom: 6px; } .hero--shot .shot{ margin-bottom: calc(-1 * var(--space-8)); } .hero--shot + *{ padding-top: calc(var(--space-section) + var(--space-8)); } .hero--shot{ overflow: visible; border-bottom: 0; } /* page hero: compact, for subpages */ .hero--page .hero__inner{ padding-top: var(--space-8); padding-bottom: var(--space-7); align-items: end; } .hero--page h1{ font-size: var(--fs-h1); } .crumbs{ font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--space-5); } .crumbs ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs li + li::before{ content: "/"; margin-right: 6px; color: var(--c-line-strong); } .crumbs a{ color: var(--c-muted); text-decoration: none; } .crumbs a:hover{ color: var(--c-ink); text-decoration: underline; } @media (max-width: 900px){ .hero__inner, .hero--shot .hero__copy{ grid-template-columns: minmax(0,1fr); gap: var(--space-6); padding-top: var(--space-8); } .hero--shot .shot{ margin-bottom: calc(-1 * var(--space-7)); } .hero--shot + *{ padding-top: calc(var(--space-section) + var(--space-7)); } } /* ---------- 6. Readout (big-number instrument panel) ---------- */ .readout{ background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--space-5) var(--space-5) var(--space-4); box-shadow: var(--elev-2); } .readout .val{ display: block; font: var(--fw-medium) var(--fs-stat)/1 var(--font-mono); letter-spacing: -.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; } .readout .unit{ font-size: .42em; letter-spacing: 0; color: var(--c-muted); margin-left: .3em; } .readout .meta{ display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); font: var(--fw-medium) 12px/1.4 var(--font-mono); color: var(--c-muted); } .readout dl{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: var(--space-4) 0 0; border-top: 1px solid var(--c-line); } .readout dl div{ padding: var(--space-3) var(--space-3) 0 0; } .readout dt{ font: var(--fw-medium) 12.5px/1.3 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .readout dd{ margin: 2px 0 0; font: var(--fw-semibold) var(--fs-small) var(--font-body); color: var(--c-ink); } /* ---------- 7. Screenshot frame ---------- */ .shot{ margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--elev-2); } .shot img{ display: block; width: 100%; height: auto; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .shot{ border-color: var(--c-line-strong); } :root:not([data-theme="light"]) .shot img{ filter: brightness(.92); } } :root[data-theme="dark"] .shot{ border-color: var(--c-line-strong); } :root[data-theme="dark"] .shot img{ filter: brightness(.92); } .shot__link{ display: block; position: relative; cursor: zoom-in; } .shot__link:focus-visible{ outline-offset: -4px; } .shot figcaption{ display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--c-line); font: var(--fw-medium) 12.5px/1.45 var(--font-mono); color: var(--c-muted); letter-spacing: .02em; } .shot figcaption .dot{ margin-right: 6px; width: 7px; height: 7px; } .shots{ display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--space-5); align-items: start; } @media (max-width: 860px){ .shots{ grid-template-columns: minmax(0,1fr); } } /* Callout: a numbered annotation on a screen (only when the sequence is real) */ .shot-notes{ list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: none; } .shot-notes li{ display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; font-size: var(--fs-small); } .shot-notes li b{ display: block; } /* ---------- 8. Feature grid (hairline grid, not cards) ---------- */ .features{ list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--c-line); } .features--2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .features--4{ grid-template-columns: repeat(4, minmax(0,1fr)); } .feature{ padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--c-line); position: relative; } .feature + .feature{ padding-left: var(--space-6); border-left: 1px solid var(--c-line); } .features > .feature:nth-child(3n+1){ padding-left: 0; border-left: 0; } .features--2 > .feature:nth-child(3n+1){ padding-left: var(--space-6); border-left: 1px solid var(--c-line); } .features--2 > .feature:nth-child(2n+1){ padding-left: 0; border-left: 0; } .features--4 > .feature:nth-child(3n+1){ padding-left: var(--space-6); border-left: 1px solid var(--c-line); } .features--4 > .feature:nth-child(4n+1){ padding-left: 0; border-left: 0; } .feature .icon{ margin-bottom: var(--space-4); } .feature h3{ font-size: var(--fs-h4); margin-bottom: var(--space-3); } .feature p{ font-size: 16px; color: var(--c-text); } .feature .link-arrow{ margin-top: var(--space-3); } .feature--lead{ grid-column: span 2; } @media (prefers-reduced-motion: no-preference){ .feature .icon{ transition: color var(--dur-fast) var(--ease-out); } .feature:hover .icon{ color: var(--c-water); } } @media (max-width: 1080px){ .features, .features--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } .features > .feature:nth-child(n){ padding-left: var(--space-6); border-left: 1px solid var(--c-line); } .features > .feature:nth-child(2n+1){ padding-left: 0; border-left: 0; } } @media (max-width: 640px){ .features, .features--2, .features--4{ grid-template-columns: minmax(0,1fr); } .features > .feature:nth-child(n){ padding: var(--space-5) 0; border-left: 0; } .feature--lead{ grid-column: auto; } } /* Workflow rail: a REAL sequence (Verzamelen → … → Aanleveren) */ .flow{ list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 2px solid var(--c-water); counter-reset: step; } .flow li{ padding: var(--space-4) var(--space-4) 0 0; position: relative; counter-increment: step; } .flow li::before{ content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-water); } .flow li:last-child::before{ background: var(--c-live); border-color: var(--c-live); } .flow b{ display: block; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--c-ink); margin: var(--space-2) 0 var(--space-2); } .flow span{ font-size: var(--fs-small); color: var(--c-muted); display: block; } .flow li > .label::before{ content: counter(step, decimal-leading-zero) " · "; } @media (max-width: 1080px){ .flow{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: var(--space-6); } } @media (max-width: 560px){ .flow{ grid-template-columns: minmax(0,1fr); border-top: 0; border-left: 2px solid var(--c-water); padding-left: var(--space-5); row-gap: var(--space-5); } .flow li{ padding-top: 0; } .flow li::before{ top: 4px; left: calc(-1 * var(--space-5) - 7px); } } /* ---------- 9. Proof strip + logo wall ---------- */ .proof{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); margin: 0; } .proof > div{ padding: var(--space-5) var(--space-5) var(--space-5) 0; } .proof > div + div{ padding-left: var(--space-5); border-left: 1px solid var(--c-line); } .proof dt{ font: var(--fw-medium) var(--fs-stat)/1 var(--font-mono); letter-spacing: -.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; } .proof dt small{ display: block; margin-top: var(--space-2); font: var(--fw-medium) var(--fs-label)/1.3 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .proof dd{ margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--c-text); max-width: 32ch; } @media (max-width: 900px){ .proof{ grid-template-columns: repeat(2, minmax(0,1fr)); } .proof > div:nth-child(3){ padding-left: 0; border-left: 0; } .proof > div:nth-child(n+3){ border-top: 1px solid var(--c-line); } } @media (max-width: 480px){ .proof{ grid-template-columns: minmax(0,1fr); } .proof > div + div{ padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); } } .logo-wall{ list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); } .logo-wall li{ display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--space-4); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-surface); font: var(--fw-semibold) var(--fs-small)/1.3 var(--font-body); color: var(--c-muted); text-align: center; } .logo-wall img{ max-height: 44px; width: auto; filter: grayscale(1); opacity: .85; } @media (prefers-reduced-motion: no-preference){ .logo-wall img{ transition: filter var(--dur-fast), opacity var(--dur-fast); } .logo-wall li:hover img{ filter: none; opacity: 1; } } /* ---------- 10. "What one product changes" (comparison without names) ---------- */ .shift{ border-top: 1px solid var(--c-ink); } .shift__head, .shift__row{ display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: var(--space-4); align-items: start; } .shift__head{ padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); } .shift__row{ padding: var(--space-5) 0; border-bottom: 1px solid var(--c-line); } .shift__from{ color: var(--c-muted); } .shift__from b{ color: var(--c-muted); font-weight: 600; } .shift__to b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--c-ink); line-height: var(--lh-snug); margin-bottom: 4px; } .shift__arrow{ font: var(--fw-medium) 20px/1.4 var(--font-mono); color: var(--c-water); text-align: center; } @media (max-width: 700px){ .shift__head{ display: none; } .shift__row{ grid-template-columns: minmax(0,1fr); gap: var(--space-2); } .shift__arrow{ text-align: left; transform: rotate(90deg); width: 20px; } .shift__from::before, .shift__to::before{ content: attr(data-label); display: block; font: var(--fw-medium) 12.5px/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); margin-bottom: 4px; } } /* Checklist: "Wat u van een modern grondwaterplatform mag verwachten" */ .checklist{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: none; } .checklist--2{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5) var(--space-7); } .checklist li{ position: relative; padding-left: 36px; min-height: 24px; font-weight: 600; color: var(--c-ink); } .checklist li::before{ content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border: 1.6px solid var(--c-ink); border-radius: 50%; } .checklist li::after{ content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border-right: 2.4px solid var(--c-live); border-bottom: 2.4px solid var(--c-live); transform: rotate(45deg); } .checklist li span{ display: block; font-weight: 400; color: var(--c-muted); font-size: var(--fs-small); margin-top: 2px; } @media (max-width: 760px){ .checklist--2{ grid-template-columns: minmax(0,1fr); } } /* ---------- 11. Timeline ---------- */ .timeline{ list-style: none; margin: 0; padding: 0; max-width: none; position: relative; } .timeline::before{ content: ""; position: absolute; left: 148px; top: 6px; bottom: 6px; width: 1px; background: var(--c-line-strong); } .timeline li{ display: grid; grid-template-columns: 124px minmax(0,1fr); gap: 49px; padding: 0 0 var(--space-6); position: relative; } .timeline li::before{ content: ""; position: absolute; left: 143px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-bg); border: 1.6px solid var(--c-navy); } .timeline__when{ font: var(--fw-medium) 15px/1.5 var(--font-mono); color: var(--c-ink); text-align: right; font-variant-numeric: tabular-nums; } .timeline__body h3{ font-size: var(--fs-h4); margin-bottom: var(--space-2); } .timeline__body p{ color: var(--c-text); } .timeline li.is-now::before{ background: var(--c-live); border-color: var(--c-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-live) 25%, transparent); } .timeline li.is-now .timeline__when{ color: var(--c-live-text); } @media (max-width: 640px){ .timeline::before{ left: 5px; } .timeline li{ grid-template-columns: minmax(0,1fr); gap: var(--space-2); padding-left: var(--space-6); } .timeline li::before{ left: 0; } .timeline__when{ text-align: left; } } /* ---------- 12. Trust / security block ---------- */ .trust{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--c-line); margin: 0; } .trust > div{ display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--c-line); } .trust > div:nth-child(2n){ padding-left: var(--space-5); border-left: 1px solid var(--c-line); } .trust dt{ font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--c-ink); line-height: var(--lh-snug); margin-bottom: var(--space-2); } .trust dd{ margin: 0; font-size: 16px; } .trust .icon{ color: var(--c-ink); } .trust-note{ margin-top: var(--space-5); font-size: var(--fs-small); color: var(--c-muted); } @media (max-width: 760px){ .trust{ grid-template-columns: minmax(0,1fr); } .trust > div:nth-child(2n){ padding-left: 0; border-left: 0; } } /* ---------- 13. CTA band ---------- */ .cta-band{ position: relative; overflow: hidden; padding: var(--space-9) 0; } .cta-band .hero__bg{ opacity: .5; } .cta-band__inner{ position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: var(--space-7); align-items: end; } .cta-band h2{ font-size: var(--fs-h1); margin-bottom: var(--space-4); } .cta-band .btn-row{ margin-top: 0; justify-content: flex-start; } .cta-band__contact{ margin-top: var(--space-5); font: var(--fw-medium) 13px/1.6 var(--font-mono); color: var(--c-muted); } .cta-band__contact a{ color: var(--c-ink); } @media (max-width: 900px){ .cta-band__inner{ grid-template-columns: minmax(0,1fr); gap: var(--space-5); } } /* ---------- 14. FAQ ---------- */ .faq{ border-top: 1px solid var(--c-ink); max-width: 920px; } .faq details{ border-bottom: 1px solid var(--c-line); } .faq summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) 28px; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; font: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display); color: var(--c-ink); } .faq summary::-webkit-details-marker{ display: none; } .faq summary::after{ content: "+"; font: var(--fw-medium) 22px/1 var(--font-mono); color: var(--c-water); text-align: center; } .faq details[open] summary::after{ content: "−"; } .faq summary:hover{ color: var(--c-link); } .faq .faq__a{ padding: 0 0 var(--space-5); max-width: 70ch; } /* ---------- 15. Video player ---------- */ .video{ margin: 0; } .video__frame{ background: #07141F; border: 1px solid var(--c-line); border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--elev-2); aspect-ratio: 16 / 9; } .video__frame video{ display: block; width: 100%; height: 100%; object-fit: contain; background: #07141F; } .video video::cue{ font-family: "Manrope", system-ui, sans-serif; font-weight: 600; font-size: 70%; line-height: 1.3; background: rgba(7,20,31,.62); color: #FFFFFF; } .video figcaption{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-4); padding-top: var(--space-4); font-size: var(--fs-small); } .video__credit{ font: var(--fw-medium) 12.5px/1.5 var(--font-mono); color: var(--c-muted); margin: 0; max-width: none; } .video__chapters{ list-style: none; margin: var(--space-5) 0 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-2); } .video__chapters button{ display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); cursor: pointer; font: var(--fw-semibold) var(--fs-small)/1 var(--font-body); } .video__chapters button .mono{ color: var(--c-muted); font-size: 12px; } .video__chapters button:hover{ border-color: var(--c-ink); } .video__chapters button[aria-current="true"]{ border-color: var(--c-water); box-shadow: inset 0 -2px 0 var(--c-live); } .video__transcript{ margin-top: var(--space-5); border-top: 1px solid var(--c-line); } .video__transcript summary{ cursor: pointer; padding: var(--space-4) 0; font-weight: 600; color: var(--c-ink); } @media (max-width: 640px){ .video figcaption{ grid-template-columns: minmax(0,1fr); } } /* ---------- 16. Forms (preview only: never submit) ---------- */ .form{ display: grid; gap: var(--space-5); max-width: 720px; } .form__row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5); } .field{ display: grid; gap: 6px; } .field label, .field legend{ font-weight: 600; color: var(--c-ink); font-size: 15px; } .field .hint{ font-size: var(--fs-small); color: var(--c-muted); } .field input, .field select, .field textarea{ width: 100%; min-height: 46px; padding: 10px 12px; font: var(--fw-body) 16px/1.4 var(--font-body); color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); } .field textarea{ min-height: 140px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--c-ink); } .field input:user-invalid, .field textarea:user-invalid{ border-color: var(--c-error); } .field fieldset, fieldset.field{ border: 0; padding: 0; margin: 0; } .choice{ display: flex; gap: 10px; align-items: flex-start; font-weight: 400; min-height: 32px; } .choice input{ width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--brand-navy); } .form-note{ border-left: 3px solid var(--c-live); background: var(--c-live-soft); color: var(--c-ink); padding: var(--space-4) var(--space-5); font-size: 16px; } .form-note[hidden]{ display: none; } @media (max-width: 640px){ .form__row{ grid-template-columns: minmax(0,1fr); } } /* Contact card: selectable details + copy button */ .contact-list{ margin: 0; display: grid; gap: var(--space-4); } .contact-list div{ border-top: 1px solid var(--c-line); padding-top: var(--space-3); } .contact-list dt{ font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .contact-list dd{ margin: 4px 0 0; font-size: var(--fs-lead); color: var(--c-ink); user-select: all; -webkit-user-select: all; } .copy-btn{ margin-left: 10px; min-height: 30px; padding: 0 10px; font: var(--fw-medium) 12px/1 var(--font-mono); color: var(--c-muted); background: transparent; border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); cursor: pointer; user-select: none; vertical-align: middle; } .copy-btn:hover{ color: var(--c-ink); border-color: var(--c-ink); } /* ---------- 17. News / insight list (dated real posts only) ---------- */ .posts{ list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--c-line); } .post{ display: grid; grid-template-columns: 140px minmax(0,1fr) auto; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--c-line); align-items: baseline; } .post time{ font: var(--fw-medium) 13px/1.5 var(--font-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; } .post h3{ font-size: var(--fs-h4); } .post h3 a{ color: var(--c-ink); text-decoration: none; } .post h3 a:hover{ text-decoration: underline; color: var(--c-link); } .post p{ margin-top: var(--space-2); font-size: 16px; } @media (max-width: 700px){ .post{ grid-template-columns: minmax(0,1fr); gap: var(--space-2); } } .filters{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .filters button{ min-height: 38px; padding: 0 12px; background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); font: var(--fw-semibold) var(--fs-small)/1 var(--font-body); cursor: pointer; } .filters button[aria-pressed="true"]{ background: var(--c-action-bg); color: var(--c-action-fg); border-color: var(--c-action-bg); } /* Quote (verbatim, sourced only) */ .quote{ margin: 0; border-left: 3px solid var(--c-live); padding: var(--space-2) 0 var(--space-2) var(--space-6); } .quote blockquote{ margin: 0; font: var(--fw-semibold) var(--fs-h3)/1.3 var(--font-display); color: var(--c-ink); letter-spacing: var(--tracking-heading); } .quote figcaption{ margin-top: var(--space-4); font-size: var(--fs-small); color: var(--c-muted); } /* Integration / engine list */ .inline-list{ list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ---------- 18. Footer (always on the ground plane) ---------- */ .site-footer{ margin-top: auto; padding: var(--space-9) 0 var(--space-6); border-top: 1px solid var(--c-line); font-size: 15px; } .site-footer a{ color: var(--c-text); text-decoration: none; } .site-footer a:hover{ color: var(--c-ink); text-decoration: underline; } .footer__top{ display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2fr)) minmax(0,3fr); gap: var(--space-6); } .footer__brand img{ width: 132px; height: auto; margin-bottom: var(--space-4); } .footer__brand .logo-phrea{ width: 168px; } .footer__brand p{ color: var(--c-muted); } .footer__promise{ font: var(--fw-semibold) var(--fs-h4)/1.3 var(--font-display); color: var(--c-ink) !important; margin-bottom: var(--space-4); max-width: 26ch; } .footer__col h2{ font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--space-4); } .footer__col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer__col address{ font-style: normal; color: var(--c-text); line-height: 1.7; } .footer__col address .num{ white-space: nowrap; user-select: all; -webkit-user-select: all; } .footer__col address .lbl{ display: block; margin-top: var(--space-2); font: var(--fw-medium) 12.5px/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } .footer__col address .lbl + .num + br{ display: none; } .footer__cross{ border: 1px solid var(--c-line); padding: var(--space-5); align-self: start; } .footer__cross img{ width: 150px; height: auto; margin-bottom: var(--space-3); } .footer__cross p{ color: var(--c-muted); font-size: var(--fs-small); margin-bottom: var(--space-3); } .footer__cross a{ color: var(--c-link); font-weight: 600; } .footer__notes{ margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--c-line); display: grid; gap: 6px; font: var(--fw-medium) 12.5px/1.6 var(--font-mono); color: var(--c-muted); } .footer__notes p{ max-width: none; margin: 0; } .footer__legal{ margin-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-small); color: var(--c-muted); } .footer__social{ display: flex; gap: var(--space-4); } @media (max-width: 1080px){ .footer__top{ grid-template-columns: repeat(3, minmax(0,1fr)); } .footer__brand, .footer__cross{ grid-column: 1 / -1; } } @media (max-width: 600px){ .footer__top{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } /* ---------- 19. Devices (inline SVG) ---------- */ .device{ margin: 0; } .device svg{ display: block; width: 100%; height: auto; } .device--framed{ border: 1px solid var(--c-line); background: var(--c-surface); } .device figcaption{ padding: var(--space-3) 0 0; font: var(--fw-medium) 12.5px/1.4 var(--font-mono); color: var(--c-muted); } /* ---------- 20. Print ---------- */ @media print{ .site-header, .nav-panel, .theme-toggle, .lang, .video__chapters, .hero__bg{ display: none !important; } .ground{ background: #FFFFFF !important; color: #000000 !important; } a{ color: #000000; } } /* ---------- 21. Review fixes (24-09-2026) ---------- */ /* flow rails with 4 or 5 steps */ .flow--4{ grid-template-columns: repeat(4, minmax(0,1fr)); } .flow--5{ grid-template-columns: repeat(5, minmax(0,1fr)); } .flow b{ overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 1080px){ .flow--4{ grid-template-columns: repeat(2, minmax(0,1fr)); } .flow--5{ grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 560px){ .flow--4, .flow--5{ grid-template-columns: minmax(0,1fr); } } /* the overlapping hero screenshot sits above the next section's rule */ .hero--shot .shot{ position: relative; z-index: 1; } .hero--shot + .section--rule{ border-top: 0; } /* display headlines never hyphenate above phone width */ h1, h2, .display{ hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } @media (max-width: 640px){ h1, h2, .display{ hyphens: auto; -webkit-hyphens: auto; } } /* page heroes: lead runs wide, tags sit under it */ .hero--page .hero__inner{ grid-template-columns: minmax(0,1fr); gap: var(--space-5); } .hero--page .hero__copy .lead{ max-width: 68ch; } .hero--page .hero__meta{ margin-top: 0; } /* add-on module line: plain note, no asterisk */ .module-note{ max-width: 72ch; } /* dl.trust with the icon inside the dt (valid dt/dd pairs) */ .trust > div{ display: block; position: relative; padding-left: calc(40px + var(--space-4)); } .trust > div:nth-child(2n){ padding-left: calc(var(--space-5) + 40px + var(--space-4)); } .trust dt .icon{ position: absolute; left: 0; top: var(--space-5); } .trust > div:nth-child(2n) dt .icon{ left: var(--space-5); } .trust > div:last-child:nth-child(odd){ grid-column: 1 / -1; } @media (max-width: 760px){ .trust > div:nth-child(2n){ padding-left: calc(40px + var(--space-4)); } .trust > div:nth-child(2n) dt .icon{ left: 0; } } /* hidden items never render */ [data-approval]{ display: none !important; } /* reference list: typographic, no table borders */ .logo-wall{ border: 0; border-top: 1px solid var(--c-line); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: var(--space-5); } .logo-wall li{ border: 0; background: none; min-height: 0; justify-content: flex-start; text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-grid); font-weight: var(--fw-medium); } /* dated facts */ .dated{ list-style: none; margin: var(--space-5) 0 0; padding: 0; max-width: none; border-top: 1px solid var(--c-line); } .dated li{ display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); } .dated time{ font: var(--fw-medium) var(--fs-label)/1.6 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); } /* integrations */ .integrations{ margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--c-ink); } .integrations > div{ padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: 1px solid var(--c-line); } .integrations > div:nth-child(2n){ padding-left: var(--space-5); border-left: 1px solid var(--c-line); } .integrations dt{ font: var(--fw-medium) var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--space-2); } .integrations dd{ margin: 0; color: var(--c-ink); font-weight: var(--fw-medium); } @media (max-width: 760px){ .integrations{ grid-template-columns: minmax(0,1fr); } .integrations > div:nth-child(2n){ padding-left: 0; border-left: 0; } } .ask-examples{ margin: var(--space-2) 0 var(--space-4); padding-left: 1.2em; font-style: italic; color: var(--c-ink); } /* poster card that links to the video page */ .video-card{ display: block; position: relative; border: 1px solid var(--c-line); border-radius: var(--radius-3); overflow: hidden; box-shadow: var(--elev-2); text-decoration: none; background: var(--c-surface); } .video-card img{ display: block; width: 100%; height: auto; } .video-card__play{ position: absolute; left: 50%; top: 42%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--c-action-bg); box-shadow: var(--elev-2); } .video-card__play::after{ content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--c-action-fg); } .video-card__label{ display: block; padding: 12px 16px; border-top: 1px solid var(--c-line); font-weight: 600; color: var(--c-link); } .video-card:hover .video-card__label{ text-decoration: underline; } /* form: static preview notice */ .form-preview{ margin: 0 0 var(--space-3); } /* very wide screenshots: pan inside the frame on phones instead of shrinking to noise */ @media (max-width: 640px){ .shot--pan .shot__link{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .shot--pan .shot__link img{ width: auto; min-width: 640px; max-width: none; } } /* always-dark bands stay distinct from the dark page */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .section.ground, :root:not([data-theme="light"]) .cta-band.ground, :root:not([data-theme="light"]) .site-footer.ground{ background: #0D1E2C; border-block: 1px solid #22394D; } } :root[data-theme="dark"] .section.ground, :root[data-theme="dark"] .cta-band.ground, :root[data-theme="dark"] .site-footer.ground{ background: #0D1E2C; border-block: 1px solid #22394D; } /* ---------- v1.1 ---------- */ /* a page outside the top nav marks its parent section: aria-current="true" on the parent's nav link */ .nav a[aria-current="true"]::after{ content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px; background: var(--c-live); } @media (max-width: 1279.98px){ .nav-panel li a[aria-current="true"]{ color: var(--c-link); } } /* brand illustrations: figure.device.device--illus (+ --inset for a sunken panel) */ .device--illus{ max-width: 100%; } .device--illus svg{ max-height: 70vh; } .device--inset{ background: var(--c-sunken); border: 1px solid var(--c-line); padding: clamp(12px, 3vw, var(--space-6)); } .device--illus figcaption{ max-width: 60ch; } /* product glimpse */ .glimpse{ margin: 0; position: relative; max-width: 1100px; } .glimpse--hero{ max-width: 1400px; } .glimpse__media{ position: relative; overflow: hidden; border-radius: var(--radius-3); background: var(--c-surface); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 98%); mask-image: linear-gradient(to right, #000 62%, transparent 98%); } .glimpse__media img{ display: block; width: 100%; height: auto; } .glimpse--fade-b .glimpse__media{ -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); } .glimpse--fade-l .glimpse__media{ -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 98%); mask-image: linear-gradient(to left, #000 62%, transparent 98%); } .glimpse--fade-rb .glimpse__media{ -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 98%), linear-gradient(to bottom, #000 62%, transparent 98%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 62%, transparent 98%), linear-gradient(to bottom, #000 62%, transparent 98%); mask-composite: intersect; } /* focus: labels away from the focal area fade into the page (a "fog" rather than a blur: backdrop-filter + mask is not reliable across browsers). Set --gx/--gy (focus centre, % of the image) on the figure. */ .glimpse--focus .glimpse__media::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8; background: radial-gradient(ellipse 58% 68% at var(--gx, 40%) var(--gy, 50%), transparent 42%, var(--c-bg) 100%); } /* slight perspective (hero only, wide screens only: no overflow on phones) */ @media (min-width: 900px){ .glimpse--tilt{ perspective: 1600px; } .glimpse--tilt .glimpse__media{ transform: rotateY(-7deg) rotateX(2deg); transform-origin: 0 50%; box-shadow: var(--elev-2); } } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .glimpse__media img{ filter: brightness(.92); } } :root[data-theme="dark"] .glimpse__media img{ filter: brightness(.92); } .glimpse__tag{ position: absolute; z-index: 1; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font: var(--fw-medium) var(--fs-label)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius-1); } .glimpse__tag::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-live); } .glimpse figcaption{ display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: 9px; border-top: 1px solid var(--c-line); font: var(--fw-medium) 12.5px/1.45 var(--font-mono); color: var(--c-muted); letter-spacing: .02em; } .glimpse figcaption .dot{ margin-right: 6px; width: 7px; height: 7px; } /* a glimpse in a shot hero fades into the hero instead of overlapping the next section */ .hero--shot .glimpse{ margin-bottom: var(--space-7); } .hero--shot:has(.glimpse) + *{ padding-top: var(--space-section); } /* ---- round 2 (25-09-2026): forecast-safe fade, headline hyphenation, phone fallbacks ---- */ /* fade the OLDEST years (left) and the bottom, so the forecast, the 'nu' line and the GxG chips stay at full opacity */ .glimpse--fade-lb .glimpse__media{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%), linear-gradient(to bottom, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 100%), linear-gradient(to bottom, #000 78%, transparent 100%); mask-composite: intersect; } /* the demo-data tag in the top-right corner, clear of the map markers */ .glimpse--tag-r .glimpse__tag{ left: auto; right: 12px; } /* headlines never hyphenate automatically (key words such as 'model' must not split); break points come from */ h1, .hero h1{ hyphens: manual; -webkit-hyphens: manual; } /* phones: a model glimpse is unreadable at ~200 px, so it is swapped for the brand illustration via