/* Promidata design system — shared across all pages. See design-tokens.md for the source values. */ /* Trilingual content: every translatable element exists 3x in the DOM (data-lang="en|nl|de"). The active language is chosen by a tiny inline script in reading ?lang= from the URL, which sets [data-lang-active] on before first paint. CSS below shows only the matching set. */ [data-lang] { display: none !important; } html[data-lang-active="en"] [data-lang="en"], html[data-lang-active="nl"] [data-lang="nl"], html[data-lang-active="de"] [data-lang="de"] { display: revert !important; } .lang-switch-link { font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; color: #8a8f99; transition: color 0.2s var(--ease-spring), background-color 0.2s var(--ease-spring); } .lang-switch-link:hover { color: var(--color-navy); background: var(--color-surface-muted); } html[data-lang-active="en"] [data-lang-link="en"], html[data-lang-active="nl"] [data-lang-link="nl"], html[data-lang-active="de"] [data-lang-link="de"] { color: var(--color-accent-dark); background: var(--color-accent-soft); } :root { --color-accent: #f5a623; --color-accent-dark: #d9860a; --color-accent-soft: #fdefd8; --color-ink: #16181d; --color-navy: #12263f; --color-navy-soft: #1b3a5c; --color-surface: #ffffff; --color-surface-muted: #f2f3f5; --color-border: #e4e6ea; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 28px; --shadow-raised: 0 1px 2px rgba(18, 38, 63, 0.06), 0 8px 24px -8px rgba(18, 38, 63, 0.12); --shadow-floating: 0 2px 4px rgba(245, 166, 35, 0.18), 0 12px 28px -10px rgba(245, 166, 35, 0.35); --shadow-navy: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -8px rgba(0, 0, 0, 0.45); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", system-ui, sans-serif; color: var(--color-ink); background: var(--color-surface); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .font-display { font-family: "Sora", system-ui, sans-serif; } h1, h2 { letter-spacing: -0.03em; } h3, h4 { letter-spacing: -0.02em; } /* Focus ring — matches brand, never the browser default */ :focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; border-radius: 4px; } .accent-highlight { color: var(--color-accent); } /* Layered depth system: base < raised < floating */ .card-raised { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring); } .card-raised:hover { transform: translateY(-4px); box-shadow: var(--shadow-floating); } .card-navy { background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-soft) 100%); border-radius: var(--radius-md); box-shadow: var(--shadow-navy); color: #fff; } .illustration-panel { background: var(--color-surface-muted); border-radius: var(--radius-lg); } /* CTA button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-md); font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; background: var(--color-accent); color: #fff; box-shadow: var(--shadow-floating); transition: transform 0.2s var(--ease-spring), background-color 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .btn:hover { background: var(--color-accent-dark); transform: translateY(-2px); } .btn:active { transform: scale(0.97); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 27px; border-radius: var(--radius-md); font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 0.95rem; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; transition: transform 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), background-color 0.2s var(--ease-spring); } .btn-ghost:hover { border-color: var(--color-accent); background: rgba(245, 166, 35, 0.12); transform: translateY(-2px); } .btn-ghost:active { transform: scale(0.97); } /* Navigation */ .nav-link { position: relative; font-weight: 500; color: var(--color-ink); padding: 8px 2px; transition: color 0.2s var(--ease-spring); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0%; height: 2px; background: var(--color-accent); border-radius: 2px; transition: width 0.25s var(--ease-spring); } .nav-link:hover { color: var(--color-accent-dark); } .nav-link:hover::after, .nav-link.is-active::after { width: 100%; } .nav-link.is-active { color: var(--color-accent-dark); } /* Desktop nav dropdown — pure CSS hover/focus reveal, no JS needed */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; } .nav-dropdown-chevron { transition: transform 0.2s var(--ease-spring); } .nav-dropdown:hover .nav-dropdown-chevron, .nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); } .nav-dropdown-panel { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); width: max-content; min-width: 260px; margin-top: 14px; padding: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), visibility 0.2s; z-index: 60; } /* invisible bridge so the pointer can travel from link to panel without the gap closing it */ .nav-dropdown-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .nav-dropdown-link { display: block; padding: 10px 14px; border-radius: 8px; font-family: "Inter", system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--color-ink); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav-dropdown-link:hover, .nav-dropdown-link:focus-visible { background: var(--color-accent-soft); color: var(--color-accent-dark); } .nav-dropdown-divider { height: 1px; background: var(--color-border); margin: 6px 4px; } .nav-dropdown-link-muted { font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 0.78rem; color: var(--color-navy-soft); text-transform: uppercase; letter-spacing: 0.02em; } /* Mobile nav accordion group (Promotional / Workwear submenus in the slide-down mobile menu) */ .mobile-nav-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer; } .mobile-nav-chevron { transition: transform 0.25s var(--ease-spring); flex-shrink: 0; } .mobile-nav-group.is-open .mobile-nav-chevron { transform: rotate(180deg); } .mobile-nav-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s var(--ease-spring); } .mobile-nav-panel > div { overflow: hidden; } .mobile-nav-group.is-open .mobile-nav-panel { grid-template-rows: 1fr; } .mobile-nav-sublink { display: block; padding: 10px 12px 10px 20px; font-size: 0.9rem; color: var(--color-ink); border-radius: 8px; } .mobile-nav-sublink:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); } #site-header { transition: box-shadow 0.3s var(--ease-spring), background-color 0.3s var(--ease-spring); } #site-header.is-scrolled { box-shadow: var(--shadow-raised); } #mobile-nav { transform-origin: top; transition: transform 0.3s var(--ease-spring), opacity 0.25s var(--ease-spring); } #mobile-nav.is-closed { transform: scaleY(0.95) translateY(-8px); opacity: 0; pointer-events: none; } #mobile-nav.is-open { transform: scaleY(1) translateY(0); opacity: 1; } #nav-toggle .bar { transition: transform 0.25s var(--ease-spring), opacity 0.2s var(--ease-spring); } #nav-toggle[aria-expanded="true"] .bar-top { transform: translateY(6px) rotate(45deg); } #nav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; } #nav-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(-6px) rotate(-45deg); } /* Wordmark chip — used for supplier/partner names where no logo file exists */ .wordmark-chip { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--color-navy); white-space: nowrap; transition: transform 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .wordmark-chip:hover { border-color: var(--color-accent); box-shadow: var(--shadow-raised); transform: translateY(-2px); } /* Supplier logo chip — same shell as .wordmark-chip, holds a real logo image */ .supplier-logo { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); transition: transform 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .supplier-logo:hover { border-color: var(--color-accent); box-shadow: var(--shadow-raised); transform: translateY(-2px); } .supplier-logo img { height: 28px; width: auto; max-width: 120px; object-fit: contain; } /* Numbered step badge */ .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: 1.5px solid var(--color-accent); color: var(--color-accent-dark); font-family: "Sora", system-ui, sans-serif; font-weight: 700; } .divider { border-top: 1px solid var(--color-border); } /* Form inputs */ .field-input { width: 100%; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-surface); font-family: "Inter", system-ui, sans-serif; transition: border-color 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .field-input:hover { border-color: #c9ccd2; } .field-input:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); outline: none; } /* FAQ accordion */ .faq-item { border-bottom: 1px solid var(--color-border); } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; text-align: left; font-family: "Sora", system-ui, sans-serif; font-weight: 600; color: var(--color-ink); transition: color 0.2s var(--ease-spring); } .faq-trigger:hover { color: var(--color-accent-dark); } .faq-icon { flex-shrink: 0; transition: transform 0.3s var(--ease-spring); } .faq-item.is-open .faq-icon { transform: rotate(45deg); } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-spring); } .faq-item.is-open .faq-panel { max-height: 480px; } .faq-panel-inner { padding-bottom: 24px; color: #4a4f58; } /* Ambient float used on hero illustration accents */ @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .float-accent { animation: float-y 5s var(--ease-spring) infinite; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fade-in-up 0.6s var(--ease-spring) both; } @media (prefers-reduced-motion: reduce) { .float-accent, .fade-in-up, html { animation: none !important; scroll-behavior: auto !important; } }