/* ========================================================================== DealRoute waitlist landing — shared styles - Self-hosted fonts (GDPR-friendly: no Google Fonts requests) - Variant gating: only the active variant (data-variant on ) renders - Most visual styling lives inline in index.html (faithful to the designs) ========================================================================== */ /* ---- Fonts: Archivo (electric headings) ---- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: optional; src: url('fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: optional; src: url('fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: optional; src: url('fonts/archivo-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* ---- Fonts: Instrument Sans (body, both variants) ---- */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: optional; src: url('fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: optional; src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Fonts: Baloo 2 (playful headings) ---- */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: optional; src: url('fonts/baloo2-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: optional; src: url('fonts/baloo2-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 500 800; font-display: optional; src: url('fonts/baloo2-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* ---- Resets (from the designs' helmet) ---- */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: #EFEDFB; } /* electric bg, prevents a white flash before CSS var paints */ [data-variant="playful"] body { background: #EAF6E4; } input, select, button, textarea { font-family: inherit; } [data-lp] ::placeholder { color: rgba(255,255,255,.5); opacity: 1; } [data-lp] select { appearance: none; -webkit-appearance: none; } /* ---- Variant gating: render only the active variant, no flash ---- Both variants ship in the DOM. decides which one is shown. Default markup assumes "electric"; this rule is the single source of truth so the swap is a pure CSS toggle (no reflow flicker). */ [data-variant="electric"] [data-lp="playful"] { display: none !important; } [data-variant="playful"] [data-lp="electric"] { display: none !important; } /* ---- First-visit gate / branded splash ---- While the variant is being decided (first visit, before Remote Config resolves), hides the page content and shows the splash so the user never sees electric flip to playful. The splash is display:none by default, so returning visitors (cached variant) and the no-Firebase path never see it — they reveal instantly. */ #dr-splash { display: none; } [data-gate] #dr-splash { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; background: #EFEDFB; /* electric background, so reveal-to-electric is seamless */ overflow: hidden; /* contain the logo as it expands past the viewport */ } [data-gate] [data-lp] { visibility: hidden !important; } /* keep layout, hide flicker */ [data-gate] #dr-consent { display: none !important; } /* don't flash consent over splash */ /* The brand mark: pops in centered, then idles with a gentle pulse while we wait for Remote Config. On reveal (data-revealing) it expands to fill the whole screen (violet floods outward) and the splash fades away beneath it. */ #dr-splash .dr-splash-mark { width: 56px; height: 56px; border-radius: 16px; background: #7A2EE6; display: flex; align-items: center; justify-content: center; transform-origin: center center; opacity: 1; /* Entrance is a subtle scale pop (never touches opacity), then a gentle idle pulse. Keeping opacity fixed at 1 means the logo is ALWAYS visible — it can never get stuck invisible if the animation is paused (e.g. background tab). */ animation: dr-splash-in .42s cubic-bezier(.2,.8,.2,1) both, dr-splash-pulse 1.4s ease-in-out .42s infinite; } #dr-splash .dr-splash-mark svg { transition: opacity .2s ease; } /* Expand-to-fill on reveal. The tile scales up to comfortably exceed the viewport (40x ≈ 2240px from 56px), corners flatten, checkmark fades out. */ [data-revealing] #dr-splash .dr-splash-mark { animation: dr-splash-expand .5s cubic-bezier(.7,0,.84,0) forwards; } [data-revealing] #dr-splash .dr-splash-mark svg { opacity: 0; } [data-revealing] #dr-splash { animation: dr-splash-fade .28s ease .34s forwards; /* fade the cover near the end */ } @keyframes dr-splash-in { 0% { transform: scale(.55); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes dr-splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } } @keyframes dr-splash-expand { 0% { transform: scale(1); border-radius: 16px; } 100% { transform: scale(40); border-radius: 0; } } @keyframes dr-splash-fade { to { opacity: 0; } } /* Reduced motion: no pop/pulse/expand — splash just appears and disappears. */ @media (prefers-reduced-motion: reduce) { #dr-splash .dr-splash-mark, [data-revealing] #dr-splash .dr-splash-mark, [data-revealing] #dr-splash { animation: none; } } /* ---- Accessibility: visible keyboard focus everywhere ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [data-chip]:focus-visible { outline: 3px solid #111; outline-offset: 2px; border-radius: 6px; } /* On dark form panels a light focus ring reads better */ [data-lp] form :focus-visible { outline-color: #fff; } /* ---- Visually-hidden helper (for accessible labels) ---- */ .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; } /* ---- iOS: prevent zoom-on-focus ---- Mobile Safari auto-zooms when you focus a form control whose font-size is < 16px. The designs use 14–15px inputs, so force ≥16px on small screens. (We do NOT disable pinch-zoom in the viewport meta — that's an a11y anti-pattern; bumping the font-size is the correct fix.) */ @media (max-width: 760px) { [data-lp] input, [data-lp] select, [data-lp] textarea { font-size: 16px !important; } } /* ---- Responsive: collapse the two-column grids on small screens ---- */ @media (max-width: 760px) { [data-lp] .dr-hero { grid-template-columns: 1fr !important; gap: 28px !important; } [data-lp] .dr-grid-3 { grid-template-columns: 1fr !important; } [data-lp] .dr-stat { flex-direction: column; align-items: flex-start !important; } [data-lp] h1 { font-size: 44px !important; } [data-lp] .dr-section { padding-left: 22px !important; padding-right: 22px !important; } [data-lp] .dr-nav-wrap { padding-left: 22px !important; padding-right: 22px !important; } } /* On phones, drop the header "Join the waitlist" CTA entirely. It otherwise wraps to an awkward second line, and it's redundant — the waitlist form sits right below the hero, plus there's a CTA in the footer section. The nav then is just logo + EN/DE toggle, which always fits. */ @media (max-width: 640px) { [data-lp] .dr-nav-wrap nav [data-navcta] { display: none !important; } } @media (max-width: 460px) { [data-lp] h1 { font-size: 36px !important; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* ========================================================================== Cookie / consent banner (GDPR — GA4 Consent Mode) ========================================================================== */ #dr-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 560px; margin: 0 auto; background: #161616; color: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.32); font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; display: none; } #dr-consent.dr-show { display: block; } #dr-consent p { margin: 0 0 14px; color: rgba(255,255,255,.86); } #dr-consent a { color: #fff; text-decoration: underline; } #dr-consent .dr-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; } #dr-consent button { border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 800; font-size: 13.5px; cursor: pointer; font-family: 'Archivo', 'Baloo 2', sans-serif; } #dr-consent .dr-accept { background: #CBF73A; color: #161616; } #dr-consent .dr-decline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); } #dr-consent .dr-accept:hover { filter: brightness(.95); } #dr-consent .dr-decline:hover { background: rgba(255,255,255,.08); }