/* Design tokens — mapped from Figma (BrightNumbers). Consumed via var(--ppc-*). */ :root { /* Brand (Figma variables: Color/Picton Blue *) */ --ppc-color-picton-blue-darkest: #172e44; --ppc-color-picton-blue-darker: #1e3e5b; --ppc-color-picton-blue-dark: #3d7cb7; --ppc-color-picton-blue: #319cff; --ppc-color-picton-blue-lightest: #edf5fc; /* Semantic colors */ --ppc-color-nav-text: var(--ppc-color-picton-blue-darker); --ppc-color-heading: var(--ppc-color-picton-blue-darker); --ppc-color-surface: #ffffff; --ppc-color-surface-muted: #f5f6f8; --ppc-color-surface-panel: #f2f6fe; /* CTA form banner left panel */ --ppc-color-accent: #62abff; /* CTA button */ --ppc-color-cta-text: #1d374f; --ppc-color-cta-surface: #f1f7ff; --ppc-color-cta-border: #fefefe; /* CTA button, scrolled state (Figma "scroll nav") */ --ppc-color-cta-text-scrolled: #ffffff; --ppc-color-cta-surface-scrolled: var(--ppc-color-picton-blue-dark); /* Navbar pill */ --ppc-color-navbar-surface: rgba(255, 255, 255, 0.64); --ppc-color-navbar-border: #ffffff; /* Hero */ --ppc-color-hero-cta: var(--ppc-color-picton-blue); --ppc-color-hero-cta-border: #0c7ce4; --ppc-color-hero-text: #ffffff; --ppc-color-hero-credit: var(--ppc-color-cta-text); --ppc-hero-overlay: linear-gradient(81deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 65%); --ppc-hero-cta-radius: 16px; /* Glossy "glow" of the filled maincta button (inset highlight + drop shadow). */ --ppc-shadow-maincta: 0 0 3px rgba(0, 0, 0, 0.04), 0 3px 7.7px rgba(0, 0, 0, 0.2), inset 3px 2px 3px rgba(217, 241, 255, 0.72), inset -4px -4px 3.6px rgba(0, 0, 0, 0.14); /* Typography */ --ppc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ppc-font-open-sans: 'Open Sans', var(--ppc-font-sans); --ppc-font-nav: var(--ppc-font-sans); --ppc-font-weight-medium: 500; --ppc-font-weight-semibold: 600; --ppc-font-weight-extrabold: 800; --ppc-font-size-nav: 1rem; --ppc-font-size-cta: 0.9375rem; --ppc-font-size-h1: clamp(2.5rem, 6vw, 4.5rem); --ppc-font-size-hero-subtitle: clamp(1.125rem, 2vw, 1.5rem); --ppc-line-height-tight: 1.2; /* Navbar layout */ --ppc-navbar-radius: 24px; --ppc-navbar-padding: 16px; /* Fluid but pinned to the Figma values at 1440px (gap 64px, inset 80px), tapering to a tight-but-tidy minimum so it still fits down to ~1000px. */ --ppc-navbar-gap: clamp(1rem, calc(10.9vw - 93px), 4rem); --ppc-navbar-blur: 36px; --ppc-navbar-shadow: 0 3px 16px rgba(0, 0, 0, 0.16); --ppc-header-inset-x: clamp(1rem, calc(14.5vw - 129px), 80px); --ppc-header-inset-y: clamp(1rem, 2.5vw, 32px); /* Rendered navbar height: pill (logo 36 + padding 2*16 + border 2*2 = 72) + header padding 2*inset-y. Lets a hero pull up behind the sticky, transparent navbar exactly. */ --ppc-header-h: calc(72px + 2 * var(--ppc-header-inset-y)); /* CTA layout */ --ppc-cta-radius: 12px; --ppc-cta-pad-y: 10px; --ppc-cta-pad-x: 16px; /* Section colour scheme 5 (blue) + cards — Figma "Wat maakt ons anders" */ --ppc-color-scheme5-bg: #4d9ce5; --ppc-color-scheme5-text: #ffffff; /* Scheme-5 sparkle wallpaper, 1:1 from the Figma pattern fill: star at its native 35px, spacing 57% (19.95px), brick tiling with horizontal direction -> half-drop rows. Tile = one 54.95px rhythm x two rows. Use with: background: var(--ppc-texture-scheme5) repeat left top / 54.95px 109.9px, var(--ppc-color-scheme5-bg); background-blend-mode: overlay, normal; */ --ppc-texture-scheme5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.95 109.9'%3E%3Cdefs%3E%3Cpath id='s' d='M13.322 0C13.322 0 15.9335 9.35702 20.7027 12.2881C25.472 15.2191 35 13.322 35 13.322C35 13.322 25.643 15.9335 22.7119 20.7027L22.5778 20.9299C19.8396 25.7677 21.6775 35.0001 21.6775 35.0001C21.6775 35.0001 19.1472 25.933 14.5189 22.8539L14.2973 22.7119C9.53453 19.7849 0.0258851 21.6723 0 21.6775C0.0294334 21.6693 9.07208 19.1397 12.1461 14.5189L12.2881 14.2973C15.2191 9.52804 13.322 0 13.322 0ZM14.6961 5.28858C14.6471 5.18243 14.4817 5.22229 14.486 5.33914C14.5942 8.3282 14.3473 12.0581 12.784 14.6018C11.2207 17.1456 8.00423 19.0503 5.28858 20.3039C5.18242 20.3529 5.22229 20.5183 5.33914 20.5141C8.32819 20.4058 12.0581 20.6527 14.6018 22.216C17.1455 23.7792 19.0503 26.9953 20.3039 29.7109C20.3529 29.817 20.5183 29.7777 20.5141 29.6609C20.4058 26.6718 20.6527 22.942 22.216 20.3982C23.7792 17.8545 26.9953 15.9497 29.7109 14.6961C29.817 14.6471 29.7777 14.4817 29.6609 14.486C26.6719 14.5942 22.942 14.3473 20.3982 12.784C17.8545 11.2207 15.9497 8.00424 14.6961 5.28858Z'/%3E%3C/defs%3E%3Cg fill='white' opacity='0.16'%3E%3Cuse href='%23s' transform='translate(0 0)'/%3E%3Cuse href='%23s' transform='translate(27.475 54.95)'/%3E%3Cuse href='%23s' transform='translate(-27.475 54.95)'/%3E%3C/g%3E%3C/svg%3E"); --ppc-color-card-surface: #f2f2f2; --ppc-color-card-border: rgba(0, 0, 0, 0.15); /* Scheme 6 (dark) + neutrals — Figma "Afb + tekst" */ --ppc-color-scheme6-bg: #0f2844; --ppc-color-scheme6-text: #ffffff; --ppc-color-scheme6-border: rgba(255, 255, 255, 0.2); --ppc-color-blue-zodiac: #133355; --ppc-color-neutral-darkest: #000000; --ppc-color-neutral-darker: #191919; --ppc-color-neutral-dark: #4c4c4c; --ppc-color-surface-light: #f9fafc; --ppc-color-pill-border: #93abc1; /* Pakketten Tabs (Figma "pakketten") */ --ppc-color-success: #10b981; --ppc-color-picton-blue-bright: #54aafa; --ppc-color-credit-text: #1d374f; --ppc-color-credit-sparkle-pale: #cddff2; --ppc-font-size-price: clamp(2.75rem, 4.5vw, 3.75rem); /* Design-system typography (Figma type tokens) */ --ppc-font-heading: var(--ppc-font-sans); --ppc-font-weight-bold: 700; --ppc-font-size-h2: clamp(2rem, 5vw, 3.25rem); --ppc-font-size-h4: clamp(1.75rem, 3vw, 2.25rem); --ppc-font-size-h5: clamp(1.5rem, 2.5vw, 1.75rem); --ppc-font-size-h6: 1.375rem; --ppc-font-size-tagline: 1rem; --ppc-font-size-lead: 1.125rem; --ppc-font-size-body: 1rem; --ppc-line-height-heading: 1.24; --ppc-line-height-h5: 1.4; --ppc-line-height-body: 1.6; --ppc-line-height-tagline: 1.5; --ppc-letter-spacing-heading: 0.01em; /* Radii + section spacing (Figma) */ --ppc-radius-medium: 16px; --ppc-radius-card: 32px; --ppc-section-pad-y: clamp(3rem, 8vw, 7rem); --ppc-section-inset-x: clamp(1.5rem, 5vw, 4rem); --ppc-container-width: 1280px; --ppc-measure: 768px; }