/* ============================================================ SOVAREQ — website styles Design tokens: sovaguard-design-tokens.md (verplicht basis) Website-specifieke tokens aangevuld onderaan tokens-sectie ============================================================ */ /* ── 1. Design tokens (dark default — light via data-theme="light") ── */ :root { /* Kleur — dark (altijd donker) */ --color-ink: #f3f4f6; --color-ink-muted: #9ca3af; --color-ink-subtle: #6b7280; --color-surface: #181a1f; --color-surface-muted: #1f2128; --color-surface-sunken: #13151a; --color-surface-subtle: #21232b; --color-border: #2d2f34; --color-border-strong: #4b4f58; --color-accent: #4d8bff; --color-accent-hover: #80a7ff; --color-accent-soft: #6698ff; --color-focus: #4d8bff; /* Typografie */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Schaal */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-2xl: 32px; /* Ruimte (4px-grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Hoekradius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; /* Randen */ --border-thin: 1px solid var(--color-border); --border-strong: 2px solid var(--color-ink); /* Layout */ --container-max: 1200px; --grid-gap: 20px; /* Website-specifieke tokens */ --header-h: 64px; --section-pad-v: clamp(64px, 8vw, 112px); --section-pad-h: clamp(20px, 5vw, 72px); --hero-logo-size: clamp(160px, 22vw, 280px); --label-tracking: 0.13em; } /* ── Light theme (via data-theme="light" op ) ─────── */ [data-theme="light"] { --color-ink: #14181f; --color-ink-muted: #363e4c; --color-ink-subtle: #6b7280; --color-surface: #ededef; --color-surface-muted: #e4e5e8; --color-surface-sunken: #d8d9dc; --color-surface-subtle: #e8e9ec; --color-border: #c8cacf; --color-border-strong: #9ea2ab; --color-accent: #0052c8; --color-accent-hover: #003f99; --color-focus: #0052c8; } /* ── 3. Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, blockquote { margin: 0; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ── 4. Header ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--section-pad-h); border-bottom: var(--border-thin); background: var(--color-surface); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; } .brand-mark { width: 36px; height: 36px; border-radius: 50%; display: block; border: var(--border-thin); } .brand-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--color-ink); } .main-nav { display: flex; align-items: center; gap: var(--space-1); } .main-nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); border-radius: var(--radius-md); transition: color 0.15s; } .main-nav a:hover { color: var(--color-ink); } .nav-cta { color: var(--color-surface) !important; background: var(--color-ink); border: var(--border-strong); border-radius: 0 !important; padding: 0 var(--space-5) !important; letter-spacing: 0.04em; transition: opacity 0.15s !important; } .nav-cta:hover { opacity: 0.82; } /* ── 5. Hero ───────────────────────────────────────────────── */ .hero { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(var(--space-10), 6vw, 96px); padding: var(--section-pad-v) var(--section-pad-h); border-bottom: var(--border-thin); } .hero-copy { max-width: 640px; } .hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; color: var(--color-ink); margin-top: var(--space-5); margin-bottom: var(--space-6); } .hero-sub { font-size: var(--text-lg); color: var(--color-ink-muted); line-height: 1.65; margin-bottom: var(--space-10); } .hero-visual { display: flex; align-items: center; justify-content: center; padding: var(--space-8); } .hero-logo { width: var(--hero-logo-size); height: var(--hero-logo-size); border-radius: 50%; display: block; border: var(--border-strong); } /* ── 6. Knoppen ────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-5); background: var(--color-ink); color: var(--color-surface); border: var(--border-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.82; } /* ── 7. Sectie-layout ──────────────────────────────────────── */ .section-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-v) var(--section-pad-h); } .section-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--color-ink-subtle); margin-bottom: var(--space-4); display: block; } /* ── 8. Sovaguard ──────────────────────────────────────────── */ .product-section { background: var(--color-surface-muted); border-bottom: var(--border-thin); } .product-section h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); } .product-sub { font-size: var(--text-lg); color: var(--color-ink-muted); max-width: 600px; line-height: 1.65; margin-bottom: var(--space-12); } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); margin-bottom: var(--space-10); } .feature-card { padding: var(--space-8); background: var(--color-surface); border: var(--border-strong); border-radius: 0; border-top: 3px solid var(--color-accent); } .feature-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-3); overflow-wrap: break-word; word-break: break-word; } .feature-card p { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.7; } .compliance-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .compliance-tag { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; color: var(--color-ink-subtle); padding: var(--space-2) var(--space-3); border: var(--border-thin); border-radius: var(--radius-sm); background: var(--color-surface-sunken); } /* ── 9. Aanpak ─────────────────────────────────────────────── */ .aanpak-section { border-bottom: var(--border-thin); } .aanpak-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--section-pad-v) var(--section-pad-h); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 6vw, 96px); align-items: start; } .aanpak-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; margin-top: var(--space-4); } .aanpak-body { display: flex; flex-direction: column; gap: var(--space-5); } .aanpak-body p { font-size: var(--text-base); color: var(--color-ink-muted); line-height: 1.75; } .aanpak-quote { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); border-left: 3px solid var(--color-accent); padding-left: var(--space-5); margin-top: var(--space-3); } /* ── 10. Contact ───────────────────────────────────────────── */ .contact-section { background: var(--color-surface-muted); border-bottom: var(--border-thin); } .contact-section h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-6); } .contact-email { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 600; color: var(--color-ink); border-bottom: var(--border-strong); padding-bottom: var(--space-1); transition: color 0.15s; } .contact-email:hover { color: var(--color-accent); } /* ── 11. Footer ────────────────────────────────────────────── */ .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding: var(--space-6) var(--section-pad-h); border-top: var(--border-thin); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--color-ink-subtle); letter-spacing: 0.05em; } /* ── 11b. Metrics strip ────────────────────────────────────── */ .metrics-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--color-surface-sunken); border-bottom: var(--border-thin); padding: 0 clamp(16px, 5vw, 72px); } .metric-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--section-pad-h); border-right: var(--border-thin); } .metric-item:last-child { border-right: none; } .metric-val { font-family: var(--font-mono); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; } .metric-lbl { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-subtle); letter-spacing: var(--label-tracking); text-transform: uppercase; } /* ── 11c. Site-overlay ─────────────────────────────────────── */ .site-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(76vw, calc(76vh * 360 / 435)); aspect-ratio: 360 / 435; pointer-events: none; z-index: 9999; color: var(--color-ink); } .overlay-svg { width: 100%; height: 100%; display: block; } /* Per-element opaciteiten: wit/neutraal → subtiel (0.07) blauw = Sovaguard → zichtbaar (0.25) */ .overlay-svg .ring-outer { stroke-opacity: 0.07; } .overlay-svg .ring-inner { stroke-opacity: 0.15; } .overlay-svg .rail { stroke-opacity: 0.07; } .overlay-svg .bar-white { fill-opacity: 0.07; } .overlay-svg .bar-blue { fill-opacity: 0.15; } .overlay-svg .overlay-text { fill-opacity: 0.07; font-family: var(--font-sans); font-weight: 700; } /* ── 12. Lang toggle ───────────────────────────────────────── */ .lang-toggle { display: inline-flex; align-items: center; border: var(--border-thin); overflow: hidden; margin: 0 var(--space-2); } .lang-btn { min-height: 32px; min-width: 36px; padding: 0 var(--space-2); background: none; border: none; border-right: var(--border-thin); border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-ink-muted); cursor: pointer; transition: color 0.12s, background 0.12s; } .lang-btn:last-child { border-right: none; } .lang-btn:hover { color: var(--color-ink); background: var(--color-surface-subtle); } .lang-btn.active { color: var(--color-surface); background: var(--color-ink); } .theme-btn { min-height: 32px; min-width: 44px; padding: 0 var(--space-3); background: none; border: var(--border-thin); border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-ink-muted); cursor: pointer; margin-left: var(--space-2); transition: color 0.12s, background 0.12s; } .theme-btn:hover { color: var(--color-ink); background: var(--color-surface-subtle); } .tone-toggle { display: inline-flex; align-items: center; border: var(--border-thin); overflow: hidden; margin: 0 var(--space-2); } .tone-btn { min-height: 32px; padding: 0 var(--space-2); background: none; border: none; border-right: var(--border-thin); border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-ink-muted); cursor: pointer; transition: color 0.12s, background 0.12s; } .tone-btn:last-child { border-right: none; } .tone-btn:hover { color: var(--color-ink); background: var(--color-surface-subtle); } .tone-btn.active { color: var(--color-surface); background: var(--color-ink); } /* ── 13. Responsive ────────────────────────────────────────── */ @media (max-width: 900px) { .metrics-strip { grid-template-columns: repeat(2, 1fr); } .metric-item { padding: var(--space-6) max(5vw, 20px); } .metric-item:nth-child(2) { border-right: none; } .metric-item:nth-child(3), .metric-item:nth-child(4) { border-top: var(--border-thin); } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-visual { order: -1; padding: 0; } .feature-grid { grid-template-columns: 1fr; } .aanpak-inner { grid-template-columns: 1fr; gap: var(--space-8); } } /* ── Hamburger toggle ───────────────────────────────────── */ .nav-toggle { display: none; } @media (max-width: 900px) { .site-header { height: var(--header-h); flex-direction: row; align-items: center; padding: 0 var(--section-pad-h); position: relative; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; background: none; border: none; color: var(--color-ink); font-size: 1.3rem; cursor: pointer; margin-left: auto; } .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--color-surface); border-bottom: var(--border-strong); padding: var(--space-2) var(--section-pad-h) var(--space-4); gap: var(--space-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .main-nav.open { display: flex; } .main-nav a { padding: var(--space-3) var(--space-2); border-bottom: var(--border-thin); min-width: 0; justify-content: flex-start; } .main-nav .nav-cta { margin-top: var(--space-2); border-bottom: none; text-align: center; justify-content: center; } .lang-toggle, .tone-toggle { margin: var(--space-2) 0 0; align-self: flex-start; } .theme-btn { margin-left: 0; align-self: flex-start; } .btn-primary { width: 100%; } } /* ── Portrait gate ─────────────────────────────────────────── */ .portrait-gate { display: none; position: fixed; inset: 0; height: 100dvh; z-index: 9999; background: var(--color-surface); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-8); gap: var(--space-5); } @media (orientation: portrait) and (max-width: 768px) { .portrait-gate { display: flex; } } .portrait-gate-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--color-ink-muted); } .portrait-gate-icon { display: block; width: 48px; height: 48px; animation: pg-rotate 2.4s ease-in-out infinite; } @keyframes pg-rotate { 0% { transform: rotate(0deg); } 40% { transform: rotate(0deg); } 70% { transform: rotate(90deg); } 100% { transform: rotate(90deg); } } .portrait-gate h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; margin: 0; } .portrait-gate p { font-size: var(--text-sm); color: var(--color-ink-muted); max-width: 260px; line-height: 1.65; margin: 0; } .portrait-gate-rule { font-family: var(--font-mono); font-size: .68rem; color: var(--color-accent); letter-spacing: .1em; opacity: .65; margin-top: var(--space-2); }