/* ═══════════════════════════════════════════════════════════════ * TestRoute — Driving Test Routes hub — HERO * Rebuilt to mirror the DTC hero 1:1 (modules/dtc/assets/css/frontend.css * → .trdtc-hero*). Same structure, same values; the trh- selectors are a * straight port of the trdtc- ones so the two pages share one layout. * * Deliberate, noted differences from DTC: * 1. The CTA slot holds the search FINDER (reuses the homepage component * .tr-hp__search* + the --tr-* tokens aliased below), not a button. * 2. The right column is a floating route-preview CARD, not the route SVG. * 3. Hero content is TOP-aligned (DTC vertically centres). The hub has less * copy than a centre page, and centring would drop the breadcrumb lower * than DTC's; top-aligning keeps the breadcrumb on the same line. * * !important throughout — Cornerstone's cascade is aggressive. * ═══════════════════════════════════════════════════════════════ */ /* ─── Reset (from .trdtc) ─── */ /* ── EYEBROW ─────────────────────────────────────────────────── Grey, not green. It was var(--c-green), which put the colour reserved for the thing you click onto a label you cannot click. Green is for actions; an eyebrow is a caption. One set of values on every page that uses it. test-routes carried an extra opacity:.9 and show-tell an 11px margin, so the same component rendered three slightly different ways depending which page you were on. */ .trh-eyebrow{font-size:11.5px !important;font-weight:700 !important; letter-spacing:.14em !important;text-transform:uppercase !important; color:rgba(255,255,255,.34) !important;margin-bottom:14px !important} .trh-root, .trh-root *, .trh-root *::before, .trh-root *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important;text-transform:none !important;} /* ─── Root — full-bleed breakout + tokens (from .trdtc) ─── */ .trh-root{ position:relative !important;left:50% !important;right:50% !important; margin-left:-50vw !important;margin-right:-50vw !important; width:100vw !important;max-width:100vw !important;overflow-x:hidden !important; font-family:'Inter', 'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; -webkit-font-smoothing:antialiased !important;color:#fff !important;line-height:1.5 !important; background:#0d1b2a !important; /* DTC tokens (verbatim from .trdtc) */ --c-navy:#0c1927; --c-navy-2:#0f1d2c; --c-green:#03c988; --c-green-d:#02a873; --c-green-ink:#026644; --c-ink:#0d1b2a; --c-sub:#415a77; --c-accent:#778da9; --c-tp:#00b67a; --r-sm:8px; --r-md:12px; --ease:cubic-bezier(.4,0,.2,1); --dur:.2s; /* route-card tokens */ --green:#03c988; --green-d:#02a873; --sub:#9aa5b1; --plate:#0e1f30; --line:rgba(255,255,255,.09); --r-lg:24px; /* homepage finder tokens — the search bar/results reuse .tr-hp__* which read these --tr-* vars (declared on .tr-hp, out of scope here). Keep in sync. */ --tr-ink:#0d1b2a; --tr-sub:#415a77; --tr-green:#03c988; --tr-green-dark:#02a873; --tr-green-ink:#026644; --tr-tp-green:#00b67a; --tr-accent:#778da9; --tr-w08:rgba(255,255,255,.08); --tr-w12:rgba(255,255,255,.12); --tr-w45:rgba(255,255,255,.45); --tr-w65:rgba(255,255,255,.65); --tr-w78:rgba(255,255,255,.78); --tr-w92:rgba(255,255,255,.92); --tr-sp-2:8px; --tr-sp-3:12px; --tr-sp-4:16px; --tr-sp-5:20px; --tr-sp-6:24px; --tr-sp-8:32px; --tr-sp-12:48px; --tr-sp-16:64px; --tr-r-sm:8px; --tr-r-md:12px; --tr-r-lg:24px; --tr-ease:cubic-bezier(.4,0,.2,1); --tr-dur:.2s; } .trh-root :focus-visible{outline:2px solid var(--c-green) !important;outline-offset:3px !important;border-radius:8px !important;} /* ─── Hero shell (from .trdtc-hero) ─── */ .trh-hero{background:var(--c-navy) !important;position:relative !important;overflow:hidden !important;} /* Container + header-clear padding (from .trdtc-hero>.trdtc-w). --hdr-total-h is set live by header.js (full header incl. promo bar); the literal fallbacks mirror the bare header — 56px ≤768, 72px above — and apply only before JS. */ /* ── ONDERPADDING 0 → 40/48, ZOALS DE REST ───────────────────────────── Gemeten stond de inhoud van deze hero op 438px, tegen 437 bij manoeuvres: precies goed. De hero was toch 47px korter, en dat kwam volledig door de nul hieronder. Iedere andere pagina heeft 40 tot 48. Er is geen spoor van waarom die nul er stond. De sectie eronder heeft geen eigen bovenmarge die het compenseert, dus het was een gat, geen keuze. 40 op mobiel en 48 daarboven is de reeks van manoeuvres, road-signs en show-tell. */ .trh-hero>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:calc(var(--hdr-total-h,56px) + 20px) 16px 40px !important;} @media(min-width:700px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px 48px !important;}} @media(min-width:769px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px 48px !important;}} @media(min-width:1100px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px 48px !important;}} /* Grid: text left + visual right (from .trdtc-hero-grid) */ .trh-hero-grid{display:block !important;position:relative !important;z-index:2 !important;} @media(min-width:900px){.trh-hero-grid{display:grid !important;grid-template-columns:1.1fr .9fr !important;column-gap:56px !important;}} /* Left column (from .trdtc-hero-left). DTC uses justify-content:center; the hub tops its content so the breadcrumb sits where DTC's does despite less copy. */ .trh-hero-left{position:relative !important;z-index:3 !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;padding:0 0 8px !important;} /* Breadcrumb (from .trdtc-hero-bread) */ .trh-hero-bread{display:none !important;font-size:12px !important;color:rgba(255,255,255,.5) !important;margin-bottom:32px !important;align-items:center !important;gap:6px !important;} @media(min-width:700px){.trh-hero-bread{display:flex !important;}} .trh-hero-bread a{color:rgba(255,255,255,.5) !important;text-decoration:none !important;} .trh-hero-bread a:hover{color:rgba(255,255,255,.78) !important;} .trh-hero-bread-sep{color:rgba(255,255,255,.22) !important;flex-shrink:0 !important;} .trh-hero-bread-cur{color:rgba(255,255,255,.8) !important;font-weight:500 !important;} .trh-hero-bread-back{display:inline-flex !important;align-items:center !important;gap:6px !important;margin:0 0 2px -4px !important;padding:2px 4px 14px !important;font-size:13px !important;font-weight:500 !important;color:rgba(255,255,255,.55) !important;text-decoration:none !important;} @media(min-width:700px){.trh-hero-bread-back{display:none !important;}} .trh-hero-bread-back:hover{color:rgba(255,255,255,.82) !important;} .trh-hero-bread-back-ico{flex-shrink:0 !important;color:rgba(255,255,255,.4) !important;} /* Status / eyebrow (from .trdtc-hero-status) */ .trh-hero-status{display:flex !important;align-items:center !important;gap:10px !important;margin-bottom:16px !important;font-size:13px !important;color:rgba(255,255,255,.5) !important;font-weight:500 !important;flex-wrap:wrap !important;} @media(min-width:700px){.trh-hero-status{margin-bottom:20px !important;}} .trh-hero-updated{display:inline-flex !important;align-items:center !important;gap:6px !important;color:rgba(255,255,255,.5) !important;font-weight:500 !important;white-space:nowrap !important;} .trh-hero-updated-ico{flex-shrink:0 !important;color:var(--c-green) !important;opacity:.7 !important;} /* H1 (from .trdtc-hero-h1 / -lead / -city) */ .trh-hero-h1{margin:0 0 16px !important;letter-spacing:-.02em !important;line-height:1.05 !important;text-transform:none !important;} .trh-hero-h1 span{text-transform:none !important;} .trh-hero-lead{display:block !important;font-size:clamp(22px,3vw,32px) !important;font-weight:700 !important;color:#fff !important;line-height:1.1 !important;text-wrap:balance !important;} .trh-hero-city{display:block !important;font-size:clamp(40px,6.4vw,68px) !important;font-weight:800 !important;color:var(--c-green) !important;letter-spacing:-.03em !important;line-height:1 !important;margin-top:4px !important;text-wrap:balance !important;} /* Intro (from .trdtc-hero-intro) */ .trh-hero-intro{font-size:16.5px !important;color:rgba(255,255,255,.52) !important;line-height:1.65 !important;margin:0 0 24px !important;max-width:540px !important;} /* ─── Finder (occupies the .trdtc-hero-cta slot; bar itself from homepage.css) ─── */ .trh-find{margin-top:24px !important;max-width:540px !important;} .trh-find-lbl{font-size:12px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:rgba(255,255,255,.4) !important;margin-bottom:9px !important;display:block !important;} .trh-root .tr-hp__search-wrap{margin-top:0 !important;} .trh-quick{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important;margin-top:14px !important;font-size:13px !important;color:rgba(255,255,255,.4) !important;} .trh-browse{color:var(--c-green) !important;font-weight:700 !important;font-size:13px !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;gap:4px !important;cursor:pointer !important;} .trh-browse:hover{color:#fff !important;} /* ─── Trustpilot (spacing from .trdtc-hero-tp; hub markup) ─── */ .trh-trust{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important;row-gap:6px !important;margin-top:28px !important;padding-top:18px !important;border-top:1px solid rgba(255,255,255,.06) !important;font-size:13px !important;color:rgba(255,255,255,.55) !important;} .trh-trust strong{color:rgba(255,255,255,.88) !important;font-weight:700 !important;} .trh-stars{display:inline-flex !important;gap:2px !important;flex-shrink:0 !important;} .trh-stars svg{display:block !important;width:16px !important;height:16px !important;} .trh-tdot{font-size:11px !important;color:rgba(255,255,255,.2) !important;flex-shrink:0 !important;} .trh-tp-rating{font-size:14px !important;color:rgba(255,255,255,.7) !important;white-space:nowrap !important;} .trh-tp-rating strong{color:#fff !important;font-weight:700 !important;font-size:15px !important;} /* ─── Right column visual (occupies the .trdtc-hero-vis slot; hub card) ─── */ .trh-hero-vis{position:relative !important;display:none !important;} @media(min-width:900px){.trh-hero-vis{display:flex !important;align-items:center !important;justify-content:center !important;}} /* Right-column visual = a single 300px route-preview card (no pill), kept deliberately SUPPORTING. The hero split mirrors the Road signs page (1.1fr/.9fr, left-anchored, ~56px gap); the card is centred in the .9fr visual track with the intro widened to 540px. A soft glow sits behind for depth. */ .trh-art{position:relative !important;width:100% !important;max-width:300px !important;z-index:1 !important;} .trh-glow{position:absolute !important;inset:0 !important;margin:auto !important;width:420px !important;height:420px !important;border-radius:999px !important;background:radial-gradient(circle at center, rgba(3,201,136,.10), rgba(3,201,136,0) 68%) !important;pointer-events:none !important;z-index:0 !important;animation:trhGlow 12s var(--ease) infinite !important;} .trh-routecard{position:relative !important;width:100% !important;border-radius:var(--r-lg) !important;overflow:hidden !important;background:var(--plate) !important;border:1px solid var(--line) !important;box-shadow:0 40px 80px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05) !important;transform:rotate(-3deg);animation:trhFloat 6.5s var(--ease) infinite !important;} .trh-rc-head{display:flex !important;align-items:center !important;gap:9px !important;padding:13px 15px !important;background:rgba(255,255,255,.03) !important;border-bottom:1px solid rgba(255,255,255,.06) !important;} .trh-rc-dot{width:9px !important;height:9px !important;border-radius:999px !important;background:var(--green) !important;box-shadow:0 0 0 3px rgba(3,201,136,.2) !important;flex:none !important;} .trh-rc-title{color:#fff !important;font-weight:700 !important;font-size:13.5px !important;} .trh-rc-4k{margin-left:auto !important;font-size:10px !important;font-weight:800 !important;letter-spacing:.06em !important;color:#0c1927 !important;background:var(--green) !important;padding:3px 7px !important;border-radius:6px !important;} .trh-rc-map{position:relative !important;height:143px !important;} .trh-rc-bar{height:5px !important;background:rgba(255,255,255,.07) !important;position:relative !important;} .trh-rc-bar i{position:absolute !important;left:0 !important;top:0 !important;height:100% !important;width:62% !important;background:var(--green) !important;} .trh-rc-foot{display:flex !important;align-items:center !important;gap:9px !important;padding:11px 15px !important;background:rgba(255,255,255,.03) !important;} .trh-rc-play{width:34px !important;height:34px !important;border-radius:999px !important;background:var(--green) !important;display:grid !important;place-items:center !important;color:#04221a !important;flex:none !important;} .trh-rc-meta{font-size:12px !important;color:var(--sub) !important;} .trh-rc-meta b{color:#fff !important;} @keyframes trhFloat{0%,100%{transform:translateY(0) rotate(calc(var(--r,0deg) - .5deg));}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + .5deg));}} @keyframes trhGlow{0%,100%{transform:translate(0,0);}50%{transform:translate(-12px,16px);}} @media (prefers-reduced-motion: reduce){ .trh-root *{animation:none !important;transition:none !important;} .trh-rc-marker{display:none !important;} } /* ───────────────────────────────────────────────────────────── * EXPLAINED + STATS SECTION (zone 2, one rung lighter than hero) * Stats band on top (CRO zoom-in order: centres → routes → * junctions → roundabouts), then the first H2 + explainer prose. * Live numbers via tr_hp_get_global_stats(). * ───────────────────────────────────────────────────────────── */ .trh-explained{background:var(--c-navy-2) !important;position:relative !important;} .trh-explained>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:52px 16px 58px !important;} @media(min-width:700px){.trh-explained>.trh-w{padding:64px 32px 72px !important;}} .trh-stats{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:14px !important;} @media(min-width:760px){.trh-stats{grid-template-columns:repeat(4,1fr) !important;gap:16px !important;}} .trh-stat{background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:16px !important;padding:24px 22px !important;} .trh-stat-v{font-size:clamp(22px,5vw,46px) !important;font-weight:800 !important;color:#fff !important;line-height:1 !important;letter-spacing:-.03em !important;font-feature-settings:'tnum' 1 !important;font-variant-numeric:tabular-nums !important;} .trh-stat-l{font-size:13px !important;font-weight:600 !important;color:rgba(255,255,255,.62) !important;margin-top:12px !important;} .trh-stat-s{font-size:11.5px !important;color:rgba(255,255,255,.32) !important;margin-top:3px !important;} .trh-explain{margin-top:44px !important;} .trh-explain h2{margin:0 !important;font-size:30px !important;line-height:1.12 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.03em !important;} @media(min-width:700px){.trh-explain h2{font-size:36px !important;}} .trh-explain p{margin:18px 0 0 !important;max-width:660px !important;font-size:16.5px !important;line-height:1.7 !important;color:rgba(255,255,255,.72) !important;} .trh-explain p + p{color:rgba(255,255,255,.62) !important;margin-top:14px !important;} /* ═══════════════════════════════════════════════════════════════════════ FINDER SECTION (#trh-map) — z3 #122131, hard cut from the explained band. Added in v2.83.0. Reuses .trh-w + the navy/green system. Stat band above is untouched. All rules !important for Cornerstone. ═══════════════════════════════════════════════════════════════════════ */ .trh-finder{background:#122131 !important;position:relative !important;} .trh-finder>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:56px 16px 64px !important;} @media(min-width:700px){.trh-finder>.trh-w{padding:72px 32px 84px !important;}} /* quiet header (intentionally not a twin of the explained eyebrow + H2) */ .trh-fhead{margin-bottom:22px !important;} .trh-fhead h3{margin:0 !important;font-size:21px !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.02em !important;line-height:1.2 !important;} .trh-fhead p{margin:7px 0 0 !important;font-size:15px !important;line-height:1.55 !important;color:rgba(255,255,255,.6) !important;max-width:560px !important;} /* tools row */ .trh-tools{display:flex !important;flex-direction:column !important;gap:10px !important;margin:0 0 18px !important;} @media(min-width:620px){.trh-tools{flex-direction:row !important;align-items:center !important;}} .trh-filter{flex:1 !important;display:flex !important;align-items:center !important;gap:10px !important;min-height:48px !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:8px !important;padding:0 14px !important;transition:border-color .2s cubic-bezier(.22,1,.36,1),background .2s cubic-bezier(.22,1,.36,1) !important;} .trh-filter:focus-within{border-color:rgba(255,255,255,.2) !important;background:rgba(255,255,255,.09) !important;} .trh-filter input:focus,.trh-filter input:focus-visible{outline:none !important;box-shadow:none !important;} .trh-filter input::-webkit-search-cancel-button,.trh-filter input::-webkit-search-decoration{-webkit-appearance:none !important;appearance:none !important;display:none !important;} .trh-filter svg{flex-shrink:0 !important;color:rgba(255,255,255,.4) !important;} .trh-filter input{flex:1 !important;background:none !important;border:0 !important;outline:0 !important;color:#fff !important;font-size:15px !important;font-weight:500 !important;min-width:0 !important;} .trh-filter input::placeholder{color:rgba(255,255,255,.4) !important;} .trh-fclear{display:none !important;border:0 !important;background:rgba(255,255,255,.08) !important;color:rgba(255,255,255,.6) !important;width:26px !important;height:26px !important;border-radius:50% !important;cursor:pointer !important;font-size:13px !important;line-height:1 !important;flex-shrink:0 !important;} .trh-fclear.is-show{display:grid !important;place-items:center !important;} .trh-loc{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;min-height:48px !important;padding:0 18px !important;border-radius:8px !important;cursor:pointer !important;white-space:nowrap !important;background:rgba(3,201,136,.1) !important;border:1px solid rgba(3,201,136,.4) !important;color:#03c988 !important;font-size:14.5px !important;font-weight:600 !important;transition:background .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1) !important;} .trh-loc:hover{background:rgba(3,201,136,.16) !important;border-color:rgba(3,201,136,.6) !important;} .trh-loc:active{transform:scale(.98) !important;} .trh-loc svg{flex-shrink:0 !important;} .trh-loc.is-busy{opacity:.7 !important;pointer-events:none !important;} /* map */ .trh-mapwrap{position:relative !important;border-radius:12px !important;overflow:hidden !important;border:1px solid rgba(255,255,255,.08) !important;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset !important;background:#0b1623 !important;} .trh-map{width:100% !important;height:380px !important;} @media(min-width:700px){.trh-map{height:480px !important;}} .trh-map .maplibregl-canvas{outline:none !important;} .trh-chip{position:absolute !important;left:14px !important;bottom:14px !important;z-index:2 !important;display:inline-flex !important;align-items:center !important;gap:8px !important;padding:8px 13px !important;border-radius:999px !important;background:rgba(13,27,42,.82) !important;border:1px solid rgba(255,255,255,.12) !important;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;font-size:12.5px !important;font-weight:600 !important;color:rgba(255,255,255,.85) !important;} .trh-chip strong{color:#03c988 !important;font-weight:700 !important;} /* Alleen zichtbaar als er iets te melden is: de chip telt de lijst, de kaart tekent alleen wat coördinaten heeft, en dat verschil stond nergens. */ .trh-count-note{font-weight:500 !important;color:rgba(255,255,255,.5) !important;} .trh-chip-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#03c988 !important;box-shadow:0 0 8px rgba(3,201,136,.7) !important;} .trh-maperr{position:absolute !important;inset:0 !important;display:none !important;place-items:center !important;text-align:center !important;padding:24px !important;color:rgba(255,255,255,.55) !important;font-size:14px !important;font-weight:500 !important;} .trh-maperr.is-show{display:grid !important;} .trh-skel{position:absolute !important;inset:0 !important;z-index:1 !important;background:linear-gradient(100deg,#0b1623 30%,#11202f 50%,#0b1623 70%) !important;background-size:200% 100% !important;animation:trh-shim 1.4s linear infinite !important;} .trh-skel.is-done{display:none !important;} @keyframes trh-shim{0%{background-position:200% 0}100%{background-position:-200% 0}} /* map pins (HTML markers) */ .trh-mepin{width:16px !important;height:16px !important;border-radius:50% !important;background:#4ea1ff !important;border:2px solid #fff !important;box-shadow:0 0 0 6px rgba(78,161,255,.25),0 0 14px rgba(78,161,255,.6) !important;} /* MapLibre popups + controls (hub-scoped; matches the DTC map) */ .trh-finder .maplibregl-popup-content, .maplibregl-popup.trh-pop .maplibregl-popup-content{background:rgba(13,27,42,.94) !important;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:10px !important;padding:12px 14px !important;box-shadow:0 10px 30px rgba(0,0,0,.45) !important;color:#fff !important;min-width:150px !important;font-family:'Inter', 'Inter Fallback',system-ui,-apple-system,sans-serif !important;} .maplibregl-popup.trh-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:rgba(13,27,42,.94) !important;} .maplibregl-popup.trh-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:rgba(13,27,42,.94) !important;} .maplibregl-popup.trh-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:rgba(13,27,42,.94) !important;} .maplibregl-popup.trh-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:rgba(13,27,42,.94) !important;} .maplibregl-popup.trh-pop .maplibregl-popup-close-button{color:rgba(255,255,255,.45) !important;font-size:17px !important;padding:0 6px !important;} .trh-pop-name{font-weight:700 !important;font-size:14.5px !important;color:#fff !important;letter-spacing:-.01em !important;} .trh-pop-meta{font-size:12.5px !important;color:rgba(255,255,255,.6) !important;margin-top:2px !important;} .trh-pop-link{display:inline-flex !important;align-items:center !important;gap:5px !important;margin-top:11px !important;padding:9px 14px !important;border:0 !important;background:var(--c-green,#03c988) !important;color:#0c1927 !important;border-radius:6px !important;font-weight:700 !important;font-size:12.5px !important;line-height:1 !important;letter-spacing:.01em !important;text-decoration:none !important;white-space:nowrap !important;transition:background .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1) !important;} .trh-pop-link:hover{background:var(--c-green-d,#02a873) !important;color:#0c1927 !important;transform:translateY(-1px) !important;} .trh-pop-link:focus-visible{outline:none !important;box-shadow:0 0 0 2px rgba(13,27,42,.95),0 0 0 4px rgba(3,201,136,.6) !important;} .trh-pop-link svg{width:12px !important;height:12px !important;} .trh-finder .maplibregl-ctrl-group{background:rgba(13,27,42,.85) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:8px !important;overflow:hidden !important;box-shadow:none !important;} .trh-finder .maplibregl-ctrl-group button{background:transparent !important;border-bottom:1px solid rgba(255,255,255,.06) !important;} .trh-finder .maplibregl-ctrl-group button:hover{background:rgba(255,255,255,.06) !important;} .trh-finder .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(.7) !important;} .trh-finder .maplibregl-ctrl-attrib{background:rgba(13,27,42,.6) !important;} .trh-finder .maplibregl-ctrl-attrib a{color:rgba(255,255,255,.4) !important;} /* nearest-to-you strip */ .trh-near{margin:22px 0 4px !important;} .trh-near[hidden]{display:none !important;} .trh-near-h{display:flex !important;align-items:center !important;gap:8px !important;font-size:12.5px !important;font-weight:700 !important;letter-spacing:.04em !important;text-transform:uppercase !important;color:#03c988 !important;margin-bottom:6px !important;} .trh-near-row{display:flex !important;gap:10px !important;overflow-x:auto !important;padding-top:6px !important;padding-bottom:6px !important;} .trh-nchip{flex-shrink:0 !important;display:flex !important;flex-direction:column !important;gap:3px !important;min-width:150px !important;text-decoration:none !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;padding:12px 14px !important;cursor:pointer !important;transition:background .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1) !important;} .trh-nchip:hover{background:rgba(3,201,136,.08) !important;border-color:rgba(3,201,136,.4) !important;transform:translateY(-2px) !important;} .trh-nchip .trh-nm{font-weight:700 !important;font-size:14px !important;color:#fff !important;} .trh-nchip .trh-ds{font-size:12px !important;color:#03c988 !important;font-weight:600 !important;} .trh-nchip .trh-npc{font-size:11.5px !important;color:rgba(255,255,255,.45) !important;} /* directory */ .trh-dir{margin-top:34px !important;} .trh-dir-head{display:flex !important;align-items:baseline !important;gap:10px !important;flex-wrap:wrap !important;margin-bottom:20px !important;padding-top:24px !important;border-top:1px solid rgba(255,255,255,.06) !important;} .trh-dir-head h3{margin:0 !important;font-size:18px !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.01em !important;} .trh-dir-head span{font-size:13px !important;color:rgba(255,255,255,.45) !important;} .trh-tiles{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:8px !important;} @media(min-width:560px){.trh-tiles{grid-template-columns:repeat(3,1fr) !important;gap:10px !important;}} @media(min-width:900px){.trh-tiles{grid-template-columns:repeat(4,1fr) !important;}} .trh-tiles[hidden]{display:none !important;} .trh-tile{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;min-height:56px !important;padding:0 16px !important;border-radius:10px !important;cursor:pointer !important;text-align:left !important;background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.06) !important;transition:background .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1) !important;} .trh-tile:hover{background:rgba(3,201,136,.07) !important;border-color:rgba(3,201,136,.4) !important;transform:translateY(-2px) !important;} .trh-tl-name{font-size:14.5px !important;font-weight:600 !important;color:#fff !important;letter-spacing:-.01em !important;} .trh-tl-cnt{flex-shrink:0 !important;font-size:12px !important;font-weight:700 !important;color:#03c988 !important;background:rgba(3,201,136,.12) !important;padding:3px 9px !important;border-radius:999px !important;} .trh-panel[hidden]{display:none !important;} .trh-panel-bar{display:flex !important;align-items:center !important;gap:14px !important;margin-bottom:18px !important;flex-wrap:wrap !important;} .trh-back{display:inline-flex !important;align-items:center !important;gap:6px !important;padding:8px 14px 8px 10px !important;border-radius:8px !important;cursor:pointer !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.08) !important;color:rgba(255,255,255,.8) !important;font-size:13px !important;font-weight:600 !important;transition:background .15s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1) !important;} .trh-back:hover{background:rgba(255,255,255,.08) !important;color:#fff !important;} .trh-back svg{flex-shrink:0 !important;} .trh-panel-title{font-size:17px !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.01em !important;} .trh-rlist{margin-bottom:6px !important;} .trh-rlist[hidden]{display:none !important;} .trh-rlist-lab{margin:0 0 8px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:#03c988 !important;opacity:.85 !important;} .trh-rlist-lab[hidden]{display:none !important;} .trh-rlist ul{list-style:none !important;margin:0 !important;padding:0 !important;display:grid !important;grid-template-columns:1fr !important;gap:0 24px !important;} @media(min-width:520px){.trh-rlist ul{grid-template-columns:repeat(2,1fr) !important;}} @media(min-width:820px){.trh-rlist ul{grid-template-columns:repeat(3,1fr) !important;}} @media(min-width:1080px){.trh-rlist ul{grid-template-columns:repeat(4,1fr) !important;}} .trh-rlist li[hidden]{display:none !important;} .trh-rlist li a{display:flex !important;align-items:baseline !important;gap:8px !important;padding:7px 0 !important;text-decoration:none !important;color:rgba(255,255,255,.7) !important;font-size:14px !important;transition:color .14s cubic-bezier(.22,1,.36,1) !important;} .trh-rlist li a:hover{color:#03c988 !important;} .trh-rlist li a .trh-pc{font-size:11.5px !important;color:rgba(255,255,255,.38) !important;font-weight:500 !important;} .trh-rlist li a:hover .trh-pc{color:rgba(3,201,136,.55) !important;} .trh-fstar{color:#03c988 !important;font-size:11px !important;} .trh-dir-empty{padding:30px 0 !important;color:rgba(255,255,255,.5) !important;font-size:14.5px !important;text-align:center !important;} .trh-dir-empty[hidden]{display:none !important;} /* entrance + reduced motion */ @keyframes trh-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .trh-finder .trh-fhead, .trh-finder .trh-tools, .trh-finder .trh-mapwrap, .trh-finder .trh-dir{animation:trh-fade .6s cubic-bezier(.22,1,.36,1) both !important;} .trh-finder .trh-fhead{animation-delay:.02s !important;} .trh-finder .trh-tools{animation-delay:.08s !important;} .trh-finder .trh-mapwrap{animation-delay:.14s !important;} .trh-finder .trh-dir{animation-delay:.22s !important;} @media (prefers-reduced-motion: reduce){ .trh-finder .trh-fhead, .trh-finder .trh-tools, .trh-finder .trh-mapwrap, .trh-finder .trh-dir, .trh-skel{animation:none !important;opacity:1 !important;} } /* discreet map attribution line (OSM/CARTO/ONS-OGL) — kept small & low-contrast */ .trh-mapattr{margin:6px 2px 0 !important;font-size:10px !important;line-height:1.4 !important;color:rgba(255,255,255,.22) !important;text-align:right !important;letter-spacing:.01em !important;} /* ═════════════════════════════════════════════════════════════════ "WHAT YOU GET" / POSITIONING SECTION (.trh-wyg) — z4 #152536, hard cut from the finder (z3 #122131). Added in v2.85.0. Content-led & SEO-targeted (app / free / map clusters). Reuses .trh-w + .trh-eyebrow. No animation. ═════════════════════════════════════════════════════════════════ */ .trh-wyg{background:#152536 !important;position:relative !important;} .trh-wyg>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:60px 16px 68px !important;} @media(min-width:700px){.trh-wyg>.trh-w{padding:78px 32px 88px !important;}} .trh-wyg h2{margin:0 !important;font-size:30px !important;line-height:1.12 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.03em !important;max-width:680px !important;} @media(min-width:700px){.trh-wyg h2{font-size:36px !important;}} .trh-wyg-intro{margin:18px 0 0 !important;max-width:660px !important;font-size:16.5px !important;line-height:1.7 !important;color:rgba(255,255,255,.72) !important;} .trh-wyg-ic{flex-shrink:0 !important;width:46px !important;height:46px !important;border-radius:12px !important;display:grid !important;place-items:center !important;background:rgba(3,201,136,.10) !important;border:1px solid rgba(3,201,136,.22) !important;color:var(--c-green) !important;} @media(max-width:560px){.trh-wyg-ic{width:40px !important;height:40px !important;}} /* ═══ FAQ SECTION (.trh-faq) — z6 #1e3145, follows the pricing section. v2.98.0. Two-column, mirroring the homepage FAQ. Background fades into the footer (#0d1b2a). Reuses the homepage accordion component (.tr-hp__faq-*) plus its toggle JS, layout grid and microdata. The narrow left rail (.tr-hp__faq-left) is sticky. FAQPage JSON-LD is emitted in the template. ═══ */ /* ── PRICING (shared component; ladder step #1b2d40 = the homepage pricing colour). The component centres its own cards (max 980px); this shell only supplies the navy step + 1200px width container, matching the other sections. ── */ .trh-pricing{background:#1b2d40 !important;position:relative !important;} .trh-pricing>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:60px 16px 68px !important;} @media(min-width:700px){.trh-pricing>.trh-w{padding:78px 32px 86px !important;}} .trh-faq{background:linear-gradient(to bottom,#1e3145 0,#1e3145 60px,#0d1b2a 100%) !important;position:relative !important;} .trh-faq>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:62px 16px 70px !important;} @media(min-width:700px){.trh-faq>.trh-w{padding:80px 32px 90px !important;}} /* Two-column grid (narrow rail + wide list), left rail sticky like the homepage. */ .trh-faq .tr-hp__faq-layout{display:grid !important;grid-template-columns:1fr 1.7fr !important;gap:48px !important;align-items:start !important;} .trh-faq .tr-hp__faq-left{position:sticky !important;top:100px !important;text-align:left !important;} .trh-faq .tr-hp__faq-left .tr-hp__accent{width:32px !important;height:1.5px !important;background:rgba(3,201,136,.35) !important;border-radius:1px !important;margin:0 0 20px !important;} .trh-faq h2{margin:0 !important;font-size:24px !important;line-height:1.2 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.02em !important;max-width:none !important;text-align:left !important;} @media(min-width:700px){.trh-faq h2{font-size:28px !important;}} .trh-faq .tr-hp__faq-list{max-width:none !important;margin:0 !important;text-align:left !important;} .trh-faq .tr-hp__faq-q-text{display:block !important;} .trh-faq .tr-hp__faq-item.is-open .tr-hp__faq-a{max-height:700px !important;} /* Collapse to a single, centred column on phones, matching the homepage FAQ. */ @media(max-width:599px){ .trh-faq .tr-hp__faq-layout{grid-template-columns:1fr !important;gap:24px !important;} .trh-faq .tr-hp__faq-left{position:static !important;text-align:center !important;} .trh-faq .tr-hp__faq-left .tr-hp__accent{margin:0 auto 20px !important;} .trh-faq h2{text-align:center !important;} } /* ═══ STAGE: "HOW OUR ROUTES WORK" (.trh-st-*) — v2.90.0. Interactive split inside .trh-wyg (z4 shell, eyebrow/h2/intro reuse the existing rules above). One interactive layer: the four rail rows + the CTA. Everything inside the stage scenes is a static product shot (spans, pointer-events:none, aria-hidden). ALIGNMENT SYSTEM ≥900 split view: rail + stage 700-899 in-row scenes share the text's 80px left edge + 660px measure 561-699 text + scene both at 18px · ≤560 both at 16px PIN CLEAR-ZONE: floating labels never in the bottom 30% (overlay) nor the top-right badge corner. ═══ */ .trh-st-grid{margin-top:42px !important;display:flex !important;flex-direction:column !important;gap:22px !important;} /* v2.97.3: media top-aligned with the first rail row, so it stays put when rows expand/collapse */ @media(min-width:900px){.trh-st-grid{display:grid !important;grid-template-columns:1.04fr 1fr !important;column-gap:56px !important;align-items:start !important;}} @keyframes trh-st-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .trh-st-rail,.trh-st-stage{animation:trh-st-fade .6s cubic-bezier(.22,1,.36,1) both !important;} .trh-st-rail{animation-delay:.04s !important;} .trh-st-stage{animation-delay:.12s !important;} /* ── rail ── */ .trh-st-rail{display:flex !important;flex-direction:column !important;gap:10px !important;} .trh-st-row{background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:var(--r-md,12px) !important;transition:background .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1) !important;} .trh-st-row.is-on{background:rgba(3,201,136,.06) !important;border-color:rgba(3,201,136,.35) !important;} .trh-st-row:not(.is-on):hover{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.12) !important;} .trh-st-row h3{margin:0 !important;font-size:17.5px !important;font-weight:700 !important;letter-spacing:-.01em !important;line-height:1.25 !important;color:#fff !important;} .trh-st-rowbtn{all:unset !important;display:flex !important;align-items:center !important;gap:16px !important;width:100% !important;padding:15px 18px !important;cursor:pointer !important;font:inherit !important;color:inherit !important;box-sizing:border-box !important;} .trh-st-rowbtn:focus-visible{outline:2px solid var(--c-green,#03c988) !important;outline-offset:3px !important;border-radius:var(--r-md,12px) !important;} .trh-st-rowtitle{flex:1 1 auto !important;min-width:0 !important;} .trh-st-chev{flex-shrink:0 !important;color:rgba(255,255,255,.35) !important;transition:transform .3s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1) !important;} .is-on .trh-st-chev{transform:rotate(90deg) !important;color:var(--c-green,#03c988) !important;} .trh-st-body{display:grid !important;grid-template-rows:0fr !important;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1) !important;} .trh-st-row.is-on .trh-st-body{grid-template-rows:1fr !important;} .trh-st-body-in{overflow:hidden !important;} .trh-st-body p{margin:0 !important;padding:0 18px 16px 80px !important;font-size:15px !important;line-height:1.65 !important;color:rgba(255,255,255,.64) !important;max-width:660px !important;} .trh-st-rowscene{display:none !important;} @media(max-width:899px){ .trh-st-stage{display:none !important;} .trh-st-rowscene{display:block !important;padding:0 18px 18px 80px !important;} .trh-st-rowscene .trh-st-card{aspect-ratio:16/9 !important;height:auto !important;max-width:660px !important;} } @media(max-width:699px){ .trh-st-body p{padding:0 18px 14px 18px !important;} .trh-st-rowscene{padding:0 18px 18px !important;} } @media(max-width:560px){ .trh-st-rowbtn{gap:14px !important;padding:14px 16px !important;} .trh-st-body p{padding:0 16px 14px 16px !important;} .trh-st-rowscene{padding:0 16px 16px !important;} } /* ── CTA (site primary button language) ── */ .trh-st-cta-row{display:flex !important;align-items:center !important;gap:16px !important;flex-wrap:wrap !important;margin-top:26px !important;} .trh-st-cta{all:unset !important;display:inline-flex !important;align-items:center !important;gap:4px !important;padding:13px 16px !important;min-height:44px !important;box-sizing:border-box !important;background:var(--c-green,#03c988) !important;color:#0c1927 !important;border-radius:6px !important;cursor:pointer !important;font-family:inherit !important;font-size:13px !important;font-weight:700 !important;line-height:1 !important;white-space:nowrap !important;transition:background .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1) !important;} .trh-st-cta:hover{background:var(--c-green-d,#02a873) !important;transform:translateY(-1px) !important;color:#0c1927 !important;} .trh-st-cta:active{transform:translateY(0) !important;} .trh-st-cta:focus-visible{outline:2px solid var(--c-green,#03c988) !important;outline-offset:3px !important;} .trh-st-cta svg{width:12px !important;height:12px !important;flex-shrink:0 !important;} .trh-st-cta-note{font-size:13px !important;color:rgba(255,255,255,.4) !important;} /* ── stage + card (verbatim .trdtc-route anatomy) ── */ .trh-st-stage{position:relative !important;} .trh-st-stack{position:relative !important;aspect-ratio:16/9 !important;pointer-events:none !important;} .trh-st-scene{position:absolute !important;inset:0 !important;opacity:0 !important;transform:translateY(10px) scale(.99) !important;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1) !important;} .trh-st-scene.is-live{opacity:1 !important;transform:none !important;} .trh-st-card{height:100% !important;border-radius:var(--r-sm,8px) !important;overflow:hidden !important;position:relative !important;box-shadow:0 12px 32px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3) !important;} .trh-st-media{position:relative !important;height:100% !important;background:#0c1927 !important;overflow:hidden !important;} .trh-st-thumb,.trh-st-demo,.trh-st-mapart{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;} .trh-st-scrim{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;height:70% !important;z-index:1 !important;pointer-events:none !important;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.12) 72%,transparent 100%) !important;} .trh-st-tag{position:absolute !important;top:10px !important;left:10px !important;z-index:4 !important;background:var(--c-green,#03c988) !important;color:#0d1b2a !important;font-size:9px !important;padding:3px 8px !important;border-radius:5px !important;font-weight:400 !important;line-height:1.3 !important;} .trh-st-badges{position:absolute !important;top:12px !important;right:12px !important;z-index:4 !important;display:flex !important;align-items:center !important;gap:6px !important;} .trh-st-badge{box-sizing:border-box !important;height:20px !important;display:inline-flex !important;align-items:center !important;gap:4px !important;font-size:9px !important;font-weight:400 !important;color:rgba(255,255,255,.85) !important;padding:0 7px !important;border-radius:5px !important;background:rgba(22,39,58,.55) !important;-webkit-backdrop-filter:blur(20px) saturate(1.1) !important;backdrop-filter:blur(20px) saturate(1.1) !important;border:1px solid rgba(255,255,255,.12) !important;letter-spacing:.02em !important;line-height:1 !important;} .trh-st-badge--lg{height:24px !important;font-size:10.5px !important;font-weight:600 !important;padding:0 10px !important;color:#fff !important;} .trh-st-diff{display:flex !important;gap:2px !important;align-items:flex-end !important;height:9px !important;} .trh-st-diff i{width:2px !important;border-radius:1px !important;background:rgba(255,255,255,.25) !important;} .trh-st-diff i.on{background:rgba(255,255,255,.85) !important;} .trh-st-diff i:nth-child(1){height:30% !important}.trh-st-diff i:nth-child(2){height:50% !important}.trh-st-diff i:nth-child(3){height:70% !important}.trh-st-diff i:nth-child(4){height:85% !important}.trh-st-diff i:nth-child(5){height:100% !important} .trh-st-overlay{position:absolute !important;bottom:0 !important;left:0 !important;right:0 !important;z-index:2 !important;padding:0 14px 14px !important;} .trh-st-title{margin:0 !important;font-size:15px !important;font-weight:600 !important;color:#fff !important;line-height:1.3 !important;letter-spacing:-.01em !important;text-shadow:0 1px 4px rgba(0,0,0,.55) !important;} .trh-st-sub{display:flex !important;align-items:center !important;font-size:10px !important;color:rgba(255,255,255,.62) !important;line-height:1.3 !important;margin:3px 0 10px !important;text-shadow:0 1px 2px rgba(0,0,0,.3) !important;font-feature-settings:'tnum' 1 !important;font-variant-numeric:tabular-nums !important;} .trh-st-sub b{color:rgba(255,255,255,.82) !important;font-weight:600 !important;} .trh-st-sub-text{min-width:0 !important;flex:1 1 auto !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;} .trh-st-actions{display:flex !important;align-items:center !important;gap:10px !important;padding:2px 3px !important;margin:0 -3px !important;} @media(max-width:699px){.trh-st-actions{display:none !important;}} /* static product-shot chrome: no cursor, hover, focus or transitions */ .trh-st-cbtn{width:40px !important;height:40px !important;border-radius:8px !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;box-sizing:border-box !important;border:1px solid rgba(255,255,255,.12) !important;background:rgba(22,39,58,.55) !important;color:rgba(255,255,255,.74) !important;-webkit-backdrop-filter:blur(20px) saturate(1.1) !important;backdrop-filter:blur(20px) saturate(1.1) !important;} .trh-st-cbtn--pri{background:var(--c-green,#03c988) !important;border:none !important;border-radius:50% !important;color:#0d1b2a !important;width:42px !important;height:42px !important;box-shadow:0 2px 10px rgba(3,201,136,.25) !important;} .trh-st-cbtn--pri svg{margin-left:1.5px !important;} /* ── annotation layer: pins, tip card, fail points, zoom ── (single source of truth; pins obey the clear-zone rule) */ .trh-st-pin{position:absolute !important;z-index:3 !important;transform:translate(-50%,calc(-100% + 6px)) !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:7px !important;} .trh-st-pin-label{position:relative !important;display:inline-flex !important;align-items:center !important;padding:3px 9px !important;border-radius:7px !important;background:rgba(13,27,42,.82) !important;-webkit-backdrop-filter:blur(10px) !important;backdrop-filter:blur(10px) !important;border:1px solid rgba(255,255,255,.1) !important;box-shadow:0 2px 6px rgba(0,0,0,.35) !important;white-space:nowrap !important;font-size:11px !important;font-weight:600 !important;color:rgba(255,255,255,.92) !important;letter-spacing:-.01em !important;line-height:1.4 !important;} .trh-st-pin-label::after{content:"" !important;position:absolute !important;top:100% !important;left:50% !important;transform:translateX(-50%) !important;width:0 !important;height:0 !important;border-left:5px solid transparent !important;border-right:5px solid transparent !important;border-top:5px solid rgba(13,27,42,.82) !important;} .trh-st-pin-dot{width:11px !important;height:11px !important;border-radius:50% !important;background:var(--c-green,#03c988) !important;border:2.5px solid #0d1b2a !important;box-shadow:0 0 0 1px rgba(3,201,136,.5) !important;} .trh-st-pin-label--tip{flex-direction:column !important;align-items:flex-start !important;padding:6px 11px 7px !important;gap:1px !important;border-radius:8px !important;} .trh-st-tip-k{display:block !important;font-style:normal !important;font-size:8.5px !important;font-weight:800 !important;letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--c-green,#03c988) !important;line-height:1.3 !important;} .trh-st-fp{position:absolute !important;z-index:3 !important;display:flex !important;align-items:center !important;gap:8px !important;transform:translate(-13px,-50%) !important;} .trh-st-fp--left{flex-direction:row-reverse !important;transform:translate(calc(-100% + 13px),-50%) !important;} .trh-st-fp-play{width:26px !important;height:26px !important;border-radius:50% !important;background:var(--c-green,#03c988) !important;color:#0d1b2a !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;box-shadow:0 0 0 4px rgba(3,201,136,.18),0 2px 8px rgba(0,0,0,.4) !important;font-style:normal !important;} .trh-st-fp-play svg{margin-left:1px !important;} .trh-st-fp-label{background:rgba(11,22,35,.92) !important;border:1px solid rgba(255,255,255,.10) !important;border-radius:9px !important;padding:5px 11px !important;font-size:11.5px !important;font-weight:700 !important;color:#fff !important;white-space:nowrap !important;box-shadow:0 4px 14px rgba(0,0,0,.4) !important;line-height:1.4 !important;} .trh-st-zoom{position:absolute !important;right:12px !important;bottom:104px !important;z-index:3 !important;display:flex !important;flex-direction:column !important;gap:4px !important;} .trh-st-zoom i{width:24px !important;height:24px !important;border-radius:6px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-style:normal !important;font-size:13px !important;font-weight:600 !important;color:rgba(255,255,255,.8) !important;background:rgba(22,39,58,.7) !important;border:1px solid rgba(255,255,255,.12) !important;-webkit-backdrop-filter:blur(20px) saturate(1.1) !important;backdrop-filter:blur(20px) saturate(1.1) !important;} /* ── GPX modal scene (compact, overflow-proof) ── */ .trh-st-media--dim .trh-st-demo{filter:blur(2px) brightness(.7) !important;} .trh-st-dim{position:absolute !important;inset:0 !important;z-index:1 !important;background:rgba(8,16,26,.55) !important;} .trh-st-gpx{position:absolute !important;z-index:2 !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;width:min(86%,330px) !important;max-height:calc(100% - 16px) !important;overflow:hidden !important;background:#0c1927 !important;border-radius:16px !important;padding:16px 16px 12px !important;box-shadow:0 40px 80px rgba(0,0,0,.5) !important;} .trh-st-gpx-x{position:absolute !important;top:10px !important;right:10px !important;width:28px !important;height:28px !important;border-radius:50% !important;background:rgba(0,0,0,.5) !important;color:rgba(255,255,255,.7) !important;display:flex !important;align-items:center !important;justify-content:center !important;-webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;} .trh-st-gpx-head{display:flex !important;align-items:center !important;gap:10px !important;margin-bottom:12px !important;} .trh-st-gpx-ico{width:32px !important;height:32px !important;border-radius:10px !important;background:rgba(3,201,136,.12) !important;color:var(--c-green,#03c988) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;} .trh-st-gpx-title{display:block !important;font-size:15px !important;font-weight:700 !important;color:#fff !important;line-height:1.2 !important;} .trh-st-gpx-sub{display:block !important;font-size:12px !important;color:rgba(255,255,255,.45) !important;line-height:1.4 !important;} .trh-st-gpx-dl{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;padding:10px 18px !important;border-radius:11px !important;background:var(--c-green,#03c988) !important;color:#0d1b2a !important;font-weight:700 !important;font-size:13px !important;margin-bottom:10px !important;} .trh-st-gpx-app{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;margin-bottom:6px !important;padding:8px 11px !important;border-radius:11px !important;background:rgba(255,255,255,.025) !important;border:1px solid rgba(255,255,255,.04) !important;color:rgba(255,255,255,.5) !important;} .trh-st-gpx-app-name{display:flex !important;align-items:center !important;gap:7px !important;font-size:12.5px !important;font-weight:600 !important;color:rgba(255,255,255,.88) !important;} .trh-st-gpx-app-label{font-size:9.5px !important;font-weight:600 !important;color:rgba(255,255,255,.42) !important;background:rgba(255,255,255,.04) !important;padding:2px 6px !important;border-radius:5px !important;letter-spacing:.02em !important;line-height:1.4 !important;} /* ── mobile play hint + caption ── */ .trh-st-mob-play{display:none !important;} @media(max-width:699px){ .trh-st-mob-play{display:flex !important;position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;z-index:3 !important;width:44px !important;height:44px !important;border-radius:50% !important;align-items:center !important;justify-content:center !important;background:rgba(0,0,0,.4) !important;-webkit-backdrop-filter:blur(8px) !important;backdrop-filter:blur(8px) !important;border:1px solid rgba(255,255,255,.25) !important;color:#fff !important;padding-left:3px !important;box-sizing:border-box !important;} } .trh-st-cap{margin:14px 0 0 !important;display:flex !important;align-items:center !important;gap:8px !important;font-size:12.5px !important;font-weight:600 !important;color:rgba(255,255,255,.55) !important;} .trh-st-capdot{width:7px !important;height:7px !important;border-radius:50% !important;background:var(--c-green,#03c988) !important;box-shadow:0 0 8px rgba(3,201,136,.7) !important;flex:none !important;} /* ── mobile decorative mode: annotations + tertiary layers off ── */ @media(max-width:699px){ .trh-st-pin{display:none !important;} .trh-st-fp-label{display:none !important;} .trh-st-zoom{display:none !important;} .trh-st-d3{display:none !important;} .trh-st-gpx-app{display:none !important;} .trh-st-gpx{width:min(80%,300px) !important;} .trh-st-gpx-dl{margin-bottom:0 !important;} } @media (prefers-reduced-motion: reduce){ .trh-st-rail,.trh-st-stage{animation:none !important;} .trh-st-row,.trh-st-body,.trh-st-chev,.trh-st-scene,.trh-st-cta{transition:none !important;} .trh-st-marker{display:none !important;} } /* ════════════════════════════════════════════════════════════════ v3.8.0 — Hero redesign: off-white H1, 16/20/32-ritme, WCAG-kleuren ════════════════════════════════════════════════════════════════ */ .trh-hero-h1{max-width:600px !important;margin:0 0 clamp(.875rem,.65rem + .8vw,1.25rem) !important;letter-spacing:-.02em !important;line-height:1.08 !important;text-wrap:balance !important} /* v3.23.0 — Uniform one-line H1, one notch up (was 0.1118 / -0.02em / 2.75rem cap in 3.22.0). Tracking tightened to -0.03em (display-grade, same as the homepage accent), which buys the extra size at the SAME one-line budget: ±19-char titles ("Driving test routes/guides" = 8.62em incl. tracking, Inter 700, 1.5% safety) stay GUARANTEED single-line. Floor 1.75rem, cap 2.875rem (46px) from ±435px viewport. 360→37.5px · 390→40.9px · 414→43.6px · 430→45.5px · ≥435→46px. Longer titles never overflow: text-wrap:balance → two balanced lines. Applies to: test-routes, manoeuvres, road-signs, guides hub, show-tell. */ .trh-hero-lead,.trh-hero-city{display:inline !important;font-size:clamp(1.75rem,calc((100vw - 32px) * 0.1142),2.875rem) !important;font-weight:700 !important;color:#f8f9fa !important;letter-spacing:-.03em !important;line-height:1.08 !important;margin:0 !important} .trh-hero-bread{margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !important} .trh-hero-status{margin-bottom:16px !important} .trh-hero-intro{color:rgba(255,255,255,.62) !important;margin:0 0 clamp(1.75rem,.8rem + 1.55vw,2rem) !important} .trh-find{margin-top:0 !important} .trh-hero-bread a,.trh-hero-bread-back{color:rgba(255,255,255,.55) !important} .trh-hero-bread-back-ico{color:rgba(255,255,255,.55) !important} .trh-hero-bread-cur{color:rgba(255,255,255,.8) !important} .trh-hero-updated{color:rgba(255,255,255,.55) !important} .trh-hero-updated-ico{color:rgba(255,255,255,.55) !important;opacity:1 !important} .trh-find-lbl{color:rgba(255,255,255,.55) !important} .trh-quick{color:rgba(255,255,255,.55) !important} .trh-browse{color:rgba(255,255,255,.55) !important} .trh-browse:hover{color:rgba(255,255,255,.8) !important} .trh-trust{color:rgba(255,255,255,.55) !important;border-top-color:rgba(255,255,255,.10) !important} .trh-trust strong{color:rgba(255,255,255,.8) !important} /* Kaart: rust-tokens van .trm-act-btn; groen alleen op hover */ .trh-routecard{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.14) !important} .trh-rc-play{background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.14) !important;color:rgba(255,255,255,.55) !important} .trh-rc-play svg{fill:rgba(255,255,255,.55) !important} .trh-rc-play:hover{background:rgba(3,201,136,.14) !important;border-color:rgba(3,201,136,.4) !important;color:var(--green) !important} .trh-rc-play:hover svg{fill:var(--green) !important} .trh-rc-bar i{background:rgba(255,255,255,.45) !important} /* v3.8.3 — zoekresultaten mogen over de volgende sectie vallen (hero niet meer verticaal clippen) */ .trh-hero{overflow:visible !important} /* Hub hero fallback vector (v3.10.0) — integrated, no card */ .trh-herofill{position:relative !important;width:100% !important;max-width:300px !important;z-index:1 !important;} .trh-herofill-svg{display:block !important;width:100% !important;height:auto !important;} /* ── SPRINGDOEL ─────────────────────────────────────────────────────── Een ankersprong zet het doel tegen de bovenrand van de viewport en houdt geen rekening met de plakkende header eroverheen. Zonder deze regel verdwijnt de kop van dit blok erachter en begin je een stuk te laag. Dezelfde waarde als .tsmt-learn, .trwwu-get, .traff-earn en de rest: headerhoogte plus 24px lucht. */ #trh-map{scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important}