/* ════════════════════════════════════════════════════════════════ TestRoute DTC - Frontend v10.0 (HBO Max hero + stats row) Design system synced with homepage: Inter, dark navy hero, accent lines, glass stat cards, horizontal sliders. All selectors scoped under .trdtc Uses !important for Cornerstone override protection. ════════════════════════════════════════════════════════════════ */ /* ─── Reset ─── */ .trdtc, .trdtc *, .trdtc *::before, .trdtc *::after{box-sizing:border-box!important;margin:0!important;padding:0!important;text-transform:none!important} /* ─── Page wrapper - full-bleed breakout ─── */ .trdtc{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} /* ─── Tokens ─── */ /* Mercury depth ladder - continuous lightening (v2.71.1+, "Subtiel" step, +3R +4G +5B). These five tokens are the base palette / first rungs and still drive the zone classes' TEXT + accent colour. As of v2.71.3 the actual backgrounds are assigned PER SECTION (see the per-section ladder block below the zone classes), so adjacent sections no longer share a colour. Synced with the homepage (same anchor + step). One narrow navy band, green sole accent. --c-navy #0c1927 (anchor) · --c-navy-2 #0f1d2c · --c-oefen #122131 --c-info #152536 · --c-deep #18293b (full 9-rung ladder lives below) */ .trdtc{--c-navy:#0c1927;--c-navy-2:#0f1d2c;--c-oefen:#122131;--c-info:#152536;--c-deep:#18293b;--c-off:#f8f9fa;--c-whi:#fff;--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;--r-lg:16px;--ease:cubic-bezier(.4,0,.2,1);--dur:.2s} /* ─── Container ─── */ .trdtc-w{max-width:1200px!important;margin:0 auto!important;padding:0 16px!important} @media(min-width:700px){.trdtc-w{padding:0 16px!important}} /* Hero container overrides handled in HERO section below */ .trdtc-center{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important} /* Icon utility */ /* ─── Sections ─── */ .trdtc-sec{padding:56px 0!important} @media(min-width:700px){.trdtc-sec{padding:80px 0!important}} .trdtc-sec--nav{background:var(--c-navy)!important;color:#fff!important} .trdtc-sec--nav2{background:var(--c-navy-2)!important;color:#fff!important} .trdtc-sec--oefen{background:var(--c-oefen)!important;color:#fff!important} .trdtc-sec--info{background:var(--c-info)!important;color:#fff!important} .trdtc-sec--deep{background:var(--c-deep)!important;color:#fff!important} .trdtc-sec--off{background:var(--c-off)!important;color:var(--c-ink)!important} .trdtc-sec--whi{background:var(--c-whi)!important;color:var(--c-ink)!important} /* ─── Per-section depth ladder (v2.71.3) ─── Every section gets its OWN rung instead of sharing a zone, overriding the zone-class backgrounds above via ID (the zone classes still drive text + accent colour). Continuous lightening, Subtiel +3R/+4G/+5B per step, hero anchor → faq. The last section (faq) fades to the FOOTER colour so the page bottoms out into the footer with no seam. Keep #0d1b2a in sync with the footer's color_bg setting. hero #0c1927 (anchor, on .trdtc-hero) routes #0f1d2c junctions #122131 manoeuvres #152536 prep #18293b about #1b2d40 nearby #1e3145 pricing #21354a faq #24394f → footer #0d1b2a (bridge) */ #trdtc-routes{ background:#0f1d2c !important; } #trdtc-failpoints{ background:#122131 !important; } #trdtc-maneuvers{ background:#152536 !important; } #trdtc-prep{ background:#18293b !important; } #trdtc-about{ background:#1b2d40 !important; } #trdtc-nearby{ background:#1e3145 !important; } #trdtc-pricing{ background:#21354a !important; } #trdtc-faq{ background:linear-gradient(to bottom, #24394f 0, #24394f 60px, #0d1b2a 100%) !important; } /* ─── Section headings ─── */ .trdtc-sec-head{margin-bottom:24px!important} @media(min-width:700px){.trdtc-sec-head{margin-bottom:32px!important}} .trdtc-accent-line{width:28px!important;height:1.5px!important;border-radius:1px!important;margin-bottom:14px!important} .trdtc-sec--nav .trdtc-accent-line, .trdtc-sec--nav2 .trdtc-accent-line, .trdtc-sec--oefen .trdtc-accent-line, .trdtc-sec--info .trdtc-accent-line, .trdtc-sec--deep .trdtc-accent-line{background:rgba(3,201,136,.35)!important} .trdtc-sec--off .trdtc-accent-line, .trdtc-sec--whi .trdtc-accent-line{background:rgba(3,201,136,.5)!important} .trdtc-h2{font-size:20px!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.2!important;margin:0 0 6px!important} @media(min-width:700px){.trdtc-h2{font-size:28px!important}} .trdtc-sec--off .trdtc-h2, .trdtc-sec--whi .trdtc-h2{color:var(--c-ink)!important} .trdtc-sec--nav .trdtc-h2, .trdtc-sec--nav2 .trdtc-h2, .trdtc-sec--deep .trdtc-h2{color:rgba(255,255,255,.92)!important} .trdtc-sub{font-size:12px!important;margin:0 0 24px!important} .trdtc-sec--off .trdtc-sub, .trdtc-sec--whi .trdtc-sub{color:var(--c-sub)!important} .trdtc-sec--nav .trdtc-sub, .trdtc-sec--nav2 .trdtc-sub, .trdtc-sec--deep .trdtc-sub{color:rgba(255,255,255,.55)!important} .trdtc-sub--lead{font-size:12.5px!important;line-height:1.6!important;margin:0 0 6px!important;max-width:640px!important} .trdtc-sec--nav .trdtc-sub--lead, .trdtc-sec--nav2 .trdtc-sub--lead, .trdtc-sec--info .trdtc-sub--lead, .trdtc-sec--deep .trdtc-sub--lead{color:rgba(255,255,255,.55)!important} .trdtc-sub--names{font-size:12.5px!important;line-height:1.6!important;margin:0!important;max-width:640px!important} .trdtc-sec--nav .trdtc-sub--names, .trdtc-sec--nav2 .trdtc-sub--names, .trdtc-sec--deep .trdtc-sub--names{color:rgba(255,255,255,.55)!important} /* ─── Unified sub-text for the video + fail-point sections only ─── Scoped to #trdtc-routes / #trdtc-failpoints (existing section IDs) so the later sections - which reuse .trdtc-sec--nav / --deep and await their own redesign - keep their current 12px styling untouched. Matches the hero intro's weight (14px, opacity .55) to give these three sections one voice. */ #trdtc-routes .trdtc-sub, #trdtc-routes .trdtc-sub--lead, #trdtc-routes .trdtc-sub--names, #trdtc-maneuvers .trdtc-sub, #trdtc-maneuvers .trdtc-sub--lead, #trdtc-failpoints .trdtc-sub, #trdtc-failpoints .trdtc-sub--lead, #trdtc-failpoints .trdtc-sub--names{font-size:14px!important;line-height:1.6!important;color:rgba(255,255,255,.55)!important;max-width:560px!important} /* ════════════════════════════════════════════════════════════════ HERO - HBO Max split layout (v4) Two-column: text left, animated route visual right. Brand tokens: navy bg, green accent, Inter font. ════════════════════════════════════════════════════════════════ */ /* ─── Section ─── */ .trdtc-hero{background:var(--c-navy)!important;position:relative!important;overflow:hidden!important} /* Hero top padding = (live total header height) + breathing room. --hdr-total-h is set by header.js to the FULL header height INCLUDING the notification/promo bar when present, so the hero clears both. The literal fallbacks apply only before JS runs (or if it fails): they mirror the bare header height, which is 56px at <=768 and 72px above 768 (the header bar switches at max-width:768). The 769px breakpoint exists to make that fallback correct on tablet; keep it separate from the 700px side-padding breakpoint. */ .trdtc-hero>.trdtc-w{max-width:1200px!important;padding:calc(var(--hdr-total-h,56px) + 20px) 16px 0!important} @media(min-width:700px){.trdtc-hero>.trdtc-w{padding:calc(var(--hdr-total-h,56px) + 20px) 16px 0!important}} @media(min-width:769px){.trdtc-hero>.trdtc-w{padding:calc(var(--hdr-total-h,72px) + 20px) 16px 0!important}} @media(min-width:1100px){.trdtc-hero>.trdtc-w{padding:calc(var(--hdr-total-h,72px) + 24px) 16px 0!important}} /* ─── Grid: text left + visual right ─── */ .trdtc-hero-grid{display:block!important;position:relative!important;z-index:2!important} @media(min-width:900px){.trdtc-hero-grid{display:grid!important;grid-template-columns:minmax(340px,460px) 1fr!important;min-height:80vh!important;gap:0!important}} /* ─── Left column ─── No top padding on mobile: the hero's own padding-top already provides the space below the header, so an additional top pad here just doubled the gap above the breadcrumb. Bottom padding retained. */ .trdtc-hero-left{position:relative!important;z-index:3!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:0 0 40px!important} @media(min-width:900px){.trdtc-hero-left{padding:0 0 40px!important}} /* ─── Breadcrumb: full trail (tablet + desktop, ≥700px) ─── */ .trdtc-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){.trdtc-hero-bread{display:flex!important}} .trdtc-hero-bread a{color:rgba(255,255,255,.5)!important;text-decoration:none!important} .trdtc-hero-bread a:hover{color:rgba(255,255,255,.78)!important} .trdtc-hero-bread-sep{color:rgba(255,255,255,.22)!important;flex-shrink:0!important} .trdtc-hero-bread-cur{color:rgba(255,255,255,.65)!important;font-weight:500!important} /* ─── Breadcrumb: single back-link (mobile, <700px) ─── Tap target kept generous for touch via padding. Padding is weighted to the BOTTOM so the text sits near the top of the touch zone rather than floating in the middle of a tall box (which previously read as a gap below the header). */ .trdtc-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){.trdtc-hero-bread-back{display:none!important}} .trdtc-hero-bread-back:hover{color:rgba(255,255,255,.82)!important} .trdtc-hero-bread-back-ico{flex-shrink:0!important;color:rgba(255,255,255,.4)!important} /* ─── Eyebrow / status line ─── */ .trdtc-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){.trdtc-hero-status{margin-bottom:20px!important}} .trdtc-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} .trdtc-hero-updated-ico{flex-shrink:0!important;color:var(--c-green)!important;opacity:.7!important} .trdtc-hero-change{font-size:12px!important;color:rgba(255,255,255,.5)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.15)!important;text-underline-offset:3px!important} .trdtc-hero-change:hover{color:rgba(255,255,255,.78)!important} /* ─── H1 - city white, descriptor muted ─── */ .trdtc-hero-h1{margin:0 0 16px!important;letter-spacing:-.02em!important;line-height:1.05!important;text-transform:none!important} .trdtc-hero-h1 span{text-transform:none!important} .trdtc-hero-lead{display:block!important;font-size:clamp(22px,3vw,32px)!important;font-weight:700!important;color:#fff!important;line-height:1.1!important} .trdtc-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.0!important;margin-top:4px!important} /* 4.76.0: a per-centre H1 override is one line, between the lead and the city in size */ .trdtc-hero-custom{display:block!important;font-size:clamp(30px,4.6vw,48px)!important;font-weight:800!important;color:var(--c-green)!important;letter-spacing:-.03em!important;line-height:1.05!important} /* ─── Intro ─── */ .trdtc-hero-intro{font-size:15px!important;color:rgba(255,255,255,.52)!important;line-height:1.6!important;margin:0 0 24px!important;max-width:420px!important} /* ─── CTA ─── */ .trdtc-hero-cta{display:flex!important;align-items:center!important;gap:16px!important;margin-top:24px!important;flex-wrap:wrap!important} .trdtc-hero-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;background:var(--c-green)!important;color:var(--c-ink)!important;border:none!important;border-radius:var(--r-sm)!important;padding:14px 26px!important;font-size:15px!important;font-weight:700!important;text-decoration:none!important;cursor:pointer!important;font-family:inherit!important;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)!important} .trdtc-hero-btn:hover{background:var(--c-green-d)!important;transform:translateY(-1px)!important} .trdtc-hero-login{font-size:14px!important;color:rgba(255,255,255,.5)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.15)!important;text-underline-offset:3px!important;font-weight:500!important} .trdtc-hero-login:hover{color:rgba(255,255,255,.78)!important} /* ─── Trustpilot ─── */ .trdtc-hero-tp{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;row-gap:6px!important;margin-top:28px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.06)!important;text-decoration:none!important;color:inherit!important} .trdtc-hero-tp-label{font-size:15px!important;font-weight:700!important;color:rgba(255,255,255,.85)!important;flex-shrink:0!important} .trdtc-hero-tp-stars{height:17px!important;width:auto!important;flex-shrink:0!important;display:block!important;image-rendering:-webkit-optimize-contrast!important} .trdtc-hero-tp-stars-svg{display:flex!important;gap:2px!important;flex-shrink:0!important} .trdtc-hero-tp-stars-svg svg{display:block!important;width:16px!important;height:16px!important} .trdtc-hero-tp-sep{font-size:11px!important;color:rgba(255,255,255,.2)!important;flex-shrink:0!important} .trdtc-hero-tp-count{font-size:13px!important;color:rgba(255,255,255,.55)!important;flex-shrink:0!important;white-space:nowrap!important} .trdtc-hero-tp-star{flex-shrink:0!important;display:block!important} .trdtc-hero-tp-name{font-size:15px!important;font-weight:700!important;color:rgba(255,255,255,.85)!important;flex-shrink:0!important} .trdtc-hero-tp-logo{height:18px!important;width:auto!important;flex-shrink:0!important;display:block!important;image-rendering:-webkit-optimize-contrast!important} /* Mobile (<700px): step the lockup down one notch so the full bar (label · stars · count · logo) stays on ONE line in the ~358px column. At desktop sizes it measures ~377px and wraps to two lines. Desktop sizes above are unchanged. */ @media(max-width:699px){ .trdtc-hero-tp{gap:6px!important} .trdtc-hero-tp-label{font-size:13px!important} .trdtc-hero-tp-stars{height:15px!important} .trdtc-hero-tp-count{font-size:12px!important} .trdtc-hero-tp-name{font-size:13px!important} .trdtc-hero-tp-logo{height:16px!important} } /* ─── Hero visual - right column SVG route map ─── */ .trdtc-hero-vis{position:relative!important;display:none!important} @media(min-width:900px){.trdtc-hero-vis{display:block!important}} .trdtc-hero-vis-inner{position:absolute!important;top:20px!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important;border-radius:12px!important} .trdtc-hero-vis-bg{position:absolute!important;inset:0!important} .trdtc-hero-vis-svg{position:relative!important;width:100%!important;height:100%!important;display:block!important} /* Route draw animation - stroke-dasharray/offset set inline on the polyline */ .trdtc-hero-vis-route{animation:trdtc-draw 2.5s cubic-bezier(.25,.46,.45,.94) .3s forwards!important} @keyframes trdtc-draw{to{stroke-dashoffset:0}} /* Waypoint + DTC fade-in keyframe (referenced by inline styles on SVG elements) */ @keyframes trdtc-fi{from{opacity:0}to{opacity:1}} /* DTC pulse keyframe (referenced by inline style on pulse circle) */ @keyframes trdtc-pulse{0%,100%{stroke-opacity:.15}50%{stroke-opacity:.04}} /* Edge fade gradients */ .trdtc-hero-vis-fade{position:absolute!important;pointer-events:none!important} .trdtc-hero-vis-fade--l{top:0!important;left:0!important;bottom:0!important;width:20%!important;background:linear-gradient(to right,var(--c-navy),transparent)!important} .trdtc-hero-vis-fade--t{top:0!important;left:0!important;right:0!important;height:8%!important;background:linear-gradient(to bottom,var(--c-navy),transparent)!important} .trdtc-hero-vis-fade--b{bottom:0!important;left:0!important;right:0!important;height:15%!important;background:linear-gradient(to top,var(--c-navy),transparent)!important} .trdtc-hero-vis-fade--r{top:0!important;right:0!important;bottom:0!important;width:5%!important;background:linear-gradient(to left,var(--c-navy),transparent)!important} /* Route label glass card overlay */ .trdtc-hero-vis-label{position:absolute!important;bottom:12px!important;left:12px!important;right:12px!important;z-index:5!important;display:flex!important;align-items:center!important;gap:10px!important;background:rgba(12,25,39,.5)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:10px!important;padding:10px 14px!important;text-decoration:none!important;cursor:pointer!important;transition:background .15s var(--ease),border-color .15s var(--ease)!important} .trdtc-hero-vis-label:hover{background:rgba(12,25,39,.65)!important;border-color:rgba(255,255,255,.12)!important} .trdtc-hero-vis-label-play{width:28px!important;height:28px!important;border-radius:50%!important;background:var(--c-green)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--c-ink)!important;flex-shrink:0!important;transition:background .15s var(--ease)!important} .trdtc-hero-vis-label:hover .trdtc-hero-vis-label-play{background:var(--c-green-d)!important} .trdtc-hero-vis-label-text{display:block!important;min-width:0!important} .trdtc-hero-vis-label-title{display:block!important;font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,.7)!important} .trdtc-hero-vis-label-meta{display:block!important;font-size:10px!important;color:rgba(255,255,255,.25)!important} /* ─── Stats seam - floating "plank" bridging hero (navy) → routes (navy-2) ─── .trdtc-seam paints the colour change itself: a hard-stop gradient, navy on the top half, navy-2 on the bottom half. The stats grid sits on top with a downward shadow, so the seam line is hidden behind the cards and the row reads as one physical shelf spanning the two sections. No melt needed - the hero ends flush, routes begins flush, the plank does the bridging. */ .trdtc-seam{background:linear-gradient(to bottom,var(--c-navy) 0%,var(--c-navy) 50%,var(--c-navy-2) 50%,var(--c-navy-2) 100%)!important;position:relative!important;z-index:2!important} .trdtc-hero-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;border-radius:14px!important;box-shadow:0 18px 40px -14px rgba(0,0,0,.55)!important} @media(min-width:700px){.trdtc-hero-stats{grid-template-columns:repeat(4,1fr)!important;gap:1px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.09)!important;overflow:hidden!important}} /* Cards: solid surface (navy-2 tinted) so the seam can't bleed through gaps. On desktop the 1px grid gap + card bg become hairline dividers. */ .trdtc-hero-stat{background:#16273a!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:12px!important;padding:18px 16px!important} @media(min-width:700px){.trdtc-hero-stat{border:0!important;border-radius:0!important}} .trdtc-hero-stat-v{font-size:26px!important;font-weight:700!important;color:rgba(255,255,255,.82)!important;letter-spacing:-.03em!important;line-height:1!important;font-feature-settings:'tnum' 1!important} .trdtc-hero-stat-l{font-size:9px!important;font-weight:600!important;color:rgba(255,255,255,.32)!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-top:7px!important} .trdtc-hero-stat-sub{font-size:10px!important;color:rgba(255,255,255,.2)!important;margin-top:3px!important} /* First stat's sub is the "above avg" signal - tint it green like the homepage */ .trdtc-hero-stat:first-child .trdtc-hero-stat-sub{color:var(--c-green)!important;opacity:.85!important} /* 4.73.0 · one caption line under the strip: "Stats source: gov.uk Last updated: August 2026". Small-label grey (.34) like the stat labels above it; the link a step brighter (.5) so it is findable, never green. */ .trdtc-stats-src{display:flex!important;flex-wrap:wrap!important;gap:4px 22px!important;margin:12px 2px 0!important;font-size:11px!important;line-height:1.4!important;color:rgba(255,255,255,.34)!important;letter-spacing:-.005em!important} .trdtc-stats-src-item{white-space:nowrap!important} .trdtc-stats-src a{color:rgba(255,255,255,.5)!important;text-decoration:underline!important;text-decoration-color:rgba(255,255,255,.18)!important;text-underline-offset:2px!important;text-decoration-thickness:1px!important;transition:color .15s var(--ease)!important} .trdtc-stats-src a:hover{color:rgba(255,255,255,.8)!important;text-decoration-color:rgba(255,255,255,.4)!important} /* Seam spacing: symmetric vertical padding centres the plank on the 50% cut. The hero ends flush (no melt), so the seam's navy top half visually continues the hero; its navy-2 bottom half flows into routes below. */ .trdtc-seam{padding-top:34px!important;padding-bottom:34px!important} @media(min-width:700px){.trdtc-seam{padding-top:44px!important;padding-bottom:44px!important}} /* Routes sits flush under the seam - trim its top padding so the plank's shadow lands on the section rather than a big empty gap. */ #trdtc-routes{padding-top:36px!important} @media(min-width:700px){#trdtc-routes{padding-top:52px!important}} /* ─── Mobile (<900px): hide the route visual entirely ─── It is decorative, crowds the limited mobile viewport, and pushes the H1 / value proposition down. Hiding it also stops the draw animation and SVG paint/composite work on mobile (a small Core Web Vitals win). Note: the inline SVG markup still ships in the HTML - removing those bytes safely would require a device-aware cache, which this site doesn't use. */ @media(max-width:899px){ .trdtc-hero-vis{display:none!important} .trdtc-hero-grid{display:flex!important;flex-direction:column!important} /* Belt-and-braces: ensure the draw animation never runs on mobile even if the element is somehow painted, so no main-thread animation cost is incurred. */ .trdtc-hero-vis-route{animation:none!important;stroke-dashoffset:0!important} } /* ════════════════════════════════════════════════════════════════ INTRO PROSE ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ ROUTES - cinematographic card design ════════════════════════════════════════════════════════════════ */ .trdtc-routes{display:flex!important;flex-direction:column!important;gap:24px!important} @media(min-width:700px){.trdtc-routes{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:16px!important;row-gap:32px!important}} /* Card */ .trdtc-route{position:relative!important;z-index:1!important} .trdtc-route.is-hov{z-index:20!important} @media(min-width:700px){.trdtc-route.is-hov .trdtc-route-media{transform:scale(1.03)!important;box-shadow:0 12px 32px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3)!important}} /* Thumbnail area */ .trdtc-route-media{position:relative!important;aspect-ratio:16/9!important;background-color:var(--c-navy)!important;overflow:hidden!important;cursor:pointer!important;border-radius:var(--r-sm)!important;box-shadow:0 1px 4px rgba(0,0,0,.25)!important;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)!important} .trdtc-detail-media--play{cursor:pointer!important} .trdtc-detail-media--play:focus{outline:none!important} .trdtc-detail-media--play:focus-visible{outline:2px solid var(--c-green)!important;outline-offset:-2px!important} /* Fallback road visual */ .trdtc-route-fallback{position:absolute!important;inset:0!important;z-index:0!important;display:grid!important;place-items:end center!important;padding-bottom:16px!important;background:#0a1628!important;color:rgba(255,255,255,.34)!important;font-size:13px!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase!important} /* Thumbnail image */ .trdtc-route-thumb{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important;pointer-events:none!important;display:block!important;margin:0!important;padding:0!important;border:none!important} /* 4.104.0 · geen blur meer op een dichte route (Mick, 8 okt 2026: klanten vonden er te veel vaag). Het slot, het chipje "Full route in 4K" en de groene knop zeggen dat hij dicht is; de thumbnail laat zien wat je krijgt. */ .trdtc-route.is-locked .trdtc-route-thumb{filter:none!important;transform:none!important} /* Scrim */ .trdtc-route-scrim{position:absolute!important;top:0!important;left:0!important;right:0!important;height:56%!important;background:linear-gradient(to bottom,rgba(7,15,24,.92) 0%,rgba(7,15,24,.42) 45%,rgba(7,15,24,.08) 75%,transparent 100%)!important;z-index:1!important;pointer-events:none!important;transition:height .4s cubic-bezier(.22,1,.36,1),background .4s,opacity .35s ease!important} .trdtc-route.is-hov .trdtc-route-scrim, .trdtc-route.is-mob .trdtc-route-scrim{height:62%!important;background:linear-gradient(to bottom,rgba(7,15,24,.96) 0%,rgba(7,15,24,.5) 45%,rgba(7,15,24,.12) 75%,transparent 100%)!important} /* Top badges */ .trdtc-route-tag{display:inline-block!important;background:var(--c-green)!important;color:var(--c-ink)!important;font-size:9px!important;padding:3px 8px!important;border-radius:5px!important;font-weight:600!important;letter-spacing:.02em!important;margin-bottom:6px!important} .trdtc-route-badges{position:absolute!important;top:12px!important;right:12px!important;z-index:4!important;display:flex!important;align-items:center!important;gap:6px!important} /* Locked route - centered lock affordance (Option A). The whole blurred media is a link to checkout; the disc + "Get access" sit in the upper area so the route title/meta at the bottom stay readable. Navy-tinted glass, matching the action buttons and badges. */ .trdtc-route-lock{position:absolute!important;inset:0!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;text-decoration:none!important;pointer-events:none!important;transition:background .2s cubic-bezier(.4,0,.2,1)!important} .trdtc-route-lock:hover{background:rgba(12,25,39,.18)!important} .trdtc-route-lock-disc{pointer-events:auto!important;cursor:pointer!important;width:52px!important;height:52px!important;border-radius:50%!important;background:rgba(22,39,58,.7)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(20px) saturate(1.1)!important;backdrop-filter:blur(20px) saturate(1.1)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:rgba(255,255,255,.92)!important;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important} .trdtc-route-lock-disc:hover{background:rgba(30,49,70,.85)!important;border-color:rgba(255,255,255,.3)!important;transform:scale(1.04)!important} .trdtc-route-lock-disc svg{display:block!important} .trdtc-route-lock-text{pointer-events:auto!important;cursor:pointer!important;font-size:11px!important;font-weight:600!important;color:rgba(255,255,255,.82)!important;letter-spacing:.02em!important} @media(max-width:699px){.trdtc-route-lock-disc{width:46px!important;height:46px!important}} /* Preview affordance - mirror of the lock, but inviting: a green play disc + "Watch preview", centered on the (un-blurred) media. Same layout language as the lock so the locked/preview states read as one family. The whole media is covered for centering; pointer-events let the action row below stay clickable. */ .trdtc-route-preview{position:absolute!important;inset:0!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;border:0!important;background:transparent!important;font-family:inherit!important;pointer-events:none!important} .trdtc-route-preview-disc{pointer-events:auto!important;cursor:pointer!important;width:52px!important;height:52px!important;border-radius:50%!important;background:rgba(22,39,58,.7)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(20px) saturate(1.1)!important;backdrop-filter:blur(20px) saturate(1.1)!important;color:rgba(255,255,255,.92)!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important} .trdtc-route-preview-disc:hover{background:rgba(30,49,70,.85)!important;border-color:rgba(255,255,255,.3)!important;transform:scale(1.04)!important} .trdtc-route-preview-disc svg{display:block!important;margin-left:2px!important} .trdtc-route-preview-text{pointer-events:auto!important;cursor:pointer!important;font-size:11px!important;font-weight:600!important;color:rgba(255,255,255,.92)!important;letter-spacing:.02em!important;text-shadow:0 1px 6px rgba(0,0,0,.5)!important} @media(max-width:699px){.trdtc-route-preview-disc{width:46px!important;height:46px!important}} /* Direction B - subtle centre disc on the CARD only (modal .trdtc-mplay-overlay keeps its own larger disc) */ .trdtc-route-media .trdtc-route-preview-disc,.trdtc-route-media .trdtc-route-lock-disc{width:46px!important;height:46px!important;background:rgba(13,27,42,.5)!important;border:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important} .trdtc-route-media .trdtc-route-preview-disc:hover,.trdtc-route-media .trdtc-route-lock-disc:hover{background:rgba(13,27,42,.66)!important;border-color:rgba(255,255,255,.4)!important;transform:scale(1.08)!important} /* Free route - decorative play disc; the whole media is the click target (JS), so this is pointer-events:none */ .trdtc-route-freedisc{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:3!important;width:46px!important;height:46px!important;border-radius:50%!important;background:rgba(13,27,42,.5)!important;border:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;color:#fff!important;display:grid!important;place-items:center!important;pointer-events:none!important;transition:opacity .25s var(--ease)!important} .trdtc-route-freedisc svg{display:block!important;margin-left:2px!important} .trdtc-route.is-hov .trdtc-route-freedisc{opacity:0!important} /* Green play disc - the watch affordance (lock disc stays glass). v2.97.0 */ .trdtc-route-media .trdtc-route-preview-disc,.trdtc-route-freedisc{background:var(--c-green)!important;border:none!important;color:var(--c-ink)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 6px 20px -4px rgba(3,201,136,.5)!important} .trdtc-route-media .trdtc-route-preview-disc:hover{background:var(--c-green-d)!important;border:none!important;box-shadow:0 8px 24px -4px rgba(3,201,136,.6)!important} .trdtc-route-4k{box-sizing:border-box!important;height:20px!important;display:inline-flex!important;align-items:center!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} .trdtc-route-diff{box-sizing:border-box!important;height:20px!important;display:inline-flex!important;align-items:center!important;gap:5px!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} .trdtc-diff-bars{display:flex!important;gap:2px!important;align-items:flex-end!important;height:9px!important} .trdtc-diff-bar{width:2px!important;border-radius:1px!important;background:rgba(255,255,255,.25)!important} .trdtc-diff-bar.on{background:rgba(255,255,255,.85)!important} .trdtc-diff-bar:nth-child(1){height:30%!important}.trdtc-diff-bar:nth-child(2){height:50%!important}.trdtc-diff-bar:nth-child(3){height:70%!important}.trdtc-diff-bar:nth-child(4){height:85%!important}.trdtc-diff-bar:nth-child(5){height:100%!important} /* Bottom overlay - title + subtitle + action buttons */ .trdtc-route-head{position:absolute!important;top:12px!important;left:14px!important;right:14px!important;z-index:3!important} @media(max-width:699px){.trdtc-route-head{top:11px!important;left:12px!important;right:12px!important}} .trdtc-route-title{font-size:15px!important;font-weight:600!important;color:#fff!important;margin:0!important;line-height:1.3!important;letter-spacing:-.01em!important;text-shadow:0 1px 4px rgba(0,0,0,.55)!important;max-width:62%!important} @media(max-width:699px){.trdtc-route-title{font-size:14px!important}} .trdtc-route-sub{display:flex!important;align-items:center!important;font-size:11px!important;color:rgba(255,255,255,.6)!important;line-height:1.3!important;margin-top:4px!important;text-shadow:0 1px 4px rgba(0,0,0,.55)!important;font-feature-settings:'tnum' 1!important} .trdtc-route-sub-text{min-width:0!important;flex:1 1 auto!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .trdtc-route-sub-more{flex:0 0 auto!important;margin-left:6px!important;color:rgba(255,255,255,.45)!important;font-weight:600!important;white-space:nowrap!important} @media(max-width:480px){.trdtc-more-word{display:none!important}} .trdtc-route-sub b{color:rgba(255,255,255,.82)!important;font-weight:600!important} /* Action buttons row - always visible on desktop (no hover reveal). overflow:visible so the larger primary button's green glow isn't clipped. Mobile keeps the existing model: bar hidden, centre play hint + tap-to-detail. */ .trdtc-route-actions{display:flex!important;align-items:center!important;gap:8px!important;overflow:visible!important;margin-top:11px!important} @media(max-width:699px){.trdtc-route-actions{gap:7px!important;margin-top:10px!important}} /* utilities sized to match the watch button height */ .trdtc-route-actions .trdtc-cbtn{width:42px!important;height:42px!important;border-radius:10px!important} @media(max-width:699px){.trdtc-route-actions .trdtc-cbtn{width:40px!important;height:40px!important}} .trdtc-route-actions .trdtc-cbtn--label{width:auto!important;height:42px!important;padding:0 14px!important} @media(max-width:699px){.trdtc-route-actions .trdtc-cbtn--label{height:40px!important;padding:0 12px!important}} /* Access chip on the poster (free-preview expectation / locked reward) */ .trdtc-route-chip{position:absolute!important;left:12px!important;bottom:12px!important;z-index:3!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:5px 10px!important;border-radius:999px!important;background:rgba(8,18,28,.6)!important;-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;border:1px solid rgba(255,255,255,.12)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.02em!important;color:rgba(255,255,255,.9)!important;line-height:1!important} .trdtc-route-chip svg{display:block!important} @media(max-width:699px){.trdtc-route-chip{left:10px!important;bottom:10px!important;font-size:10.5px!important;padding:4px 9px!important}} /* Map/GPX utilities: icon-only on mobile, icon + label on desktop */ .trdtc-clabel{display:none!important} @media(min-width:700px){.trdtc-route-actions .trdtc-cbtn--util{width:auto!important;padding:0 13px!important;gap:6px!important}.trdtc-route-actions .trdtc-cbtn--util .trdtc-clabel{display:inline!important;font-size:12.5px!important;font-weight:600!important}} /* Secondary action button - frosted glass, 8px rounded square (mini-toolbar). Always visible (no hover reveal). Matches the homepage glass language. */ .trdtc-cbtn{width:40px!important;height:40px!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;padding:0!important;flex-shrink:0!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;transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)!important;opacity:1!important} @media(max-width:699px){.trdtc-cbtn{width:38px!important;height:38px!important}} .trdtc-cbtn:hover{background:rgba(30,49,70,.7)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important} .trdtc-cbtn svg{display:block!important;flex-shrink:0!important} /* Labelled action button (Details) - wider glass pill with text + chevron. */ .trdtc-cbtn--label{width:auto!important;padding:0 13px!important;gap:6px!important;font-size:12px!important;font-weight:600!important;font-family:inherit!important;white-space:nowrap!important} /* Direction B - primary labelled Watch button below the card (the main CTA) */ .trdtc-route-watch{flex:1 1 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;height:42px!important;padding:0 16px!important;border:none!important;border-radius:10px!important;background:var(--c-green)!important;color:var(--c-ink)!important;font-size:13.5px!important;font-weight:700!important;font-family:inherit!important;cursor:pointer!important;text-decoration:none!important;box-shadow:0 2px 10px rgba(3,201,136,.22)!important;transition:background .15s var(--ease),box-shadow .15s var(--ease)!important} .trdtc-route-watch:hover{background:var(--c-green-d)!important;box-shadow:0 4px 14px rgba(3,201,136,.34)!important} .trdtc-route-watch svg{display:block!important;flex-shrink:0!important} @media(max-width:699px){.trdtc-route-watch{height:40px!important;font-size:13px!important}} /* Watch button in non-locked states: glass like the utility buttons; green lives on the disc. v2.97.0 */ .trdtc-route-watch--glass{background:rgba(22,39,58,.55)!important;color:rgba(255,255,255,.86)!important;font-weight:600!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;box-shadow:none!important} .trdtc-route-watch--glass:hover{background:rgba(30,49,70,.7)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important;box-shadow:none!important} /* Locked card action row */ /* Lock dot on locked action buttons (Play/Map/Download) - small padlock badge */ .trdtc-cbtn--lock{position:relative!important} /* SEO - screen-reader-only text */ /* Expand button */ .trdtc-expand{display:flex;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;max-width:320px!important;margin:14px auto 0!important;padding:14px!important;background:var(--c-whi)!important;color:var(--c-ink)!important;border:1px solid rgba(13,27,42,.12)!important;border-radius:10px!important;font-size:13px!important;font-weight:600!important;cursor:pointer!important;font-family:inherit!important;transition:background .15s!important} .trdtc-expand:hover{background:rgba(248,249,250,.8)!important} .trdtc-sec--nav .trdtc-expand, .trdtc-sec--nav2 .trdtc-expand, .trdtc-sec--deep .trdtc-expand{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.1)!important} .trdtc-sec--nav .trdtc-expand:hover, .trdtc-sec--nav2 .trdtc-expand:hover, .trdtc-sec--deep .trdtc-expand:hover{background:rgba(255,255,255,.1)!important} .trdtc-expand.trdtc-hidden{display:none!important} .trdtc-expand-n{background:var(--c-green)!important;color:var(--c-ink)!important;font-size:10px!important;font-weight:700!important;padding:2px 7px!important;border-radius:999px!important} /* ════════════════════════════════════════════════════════════════ MORE DETAILS - Netflix glassmorphism SEO cards ════════════════════════════════════════════════════════════════ */ /* 1200-width content sections (routes, junctions, more-details). Padding is set to 32px at >=700 to match the hero and header left edge (the base .trdtc-w pads 20px, which would leave these 12px out of alignment with the logo). */ .trdtc-md-w{max-width:1200px!important} @media(min-width:700px){.trdtc-md-w{padding-left:32px!important;padding-right:32px!important}} /* Glass card base */ /* ── Detail modal - Netflix-style route info ─────────────────── */ .trdtc-modal-detail{max-width:920px!important;background:var(--c-navy)!important;color:#fff!important;border-radius:12px!important} @media(max-width:699px){.trdtc-modal-detail{border-radius:16px 16px 0 0!important}} .trdtc-modal-detail .trdtc-modal-embed{border-radius:12px 12px 0 0!important;overflow:hidden!important} .trdtc-modal .trdtc-detail-scrim, .trdtc-detail-scrim{position:absolute!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;height:50%!important;width:100%!important;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 100%)!important;pointer-events:none!important;z-index:1!important} .trdtc-modal .trdtc-detail-title, .trdtc-detail-title{position:absolute!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;height:auto!important;max-height:none!important;z-index:3!important;padding:0 24px 20px!important;margin:0!important;width:100%!important;text-align:left!important} .trdtc-modal .trdtc-detail-title h3, .trdtc-detail-title h3{font-family:'Inter', 'Inter Fallback',-apple-system,BlinkMacSystemFont,sans-serif!important;font-size:24px!important;font-weight:700!important;color:#fff!important;margin:0!important;padding:0!important;line-height:1.2!important;letter-spacing:-.02em!important;text-transform:none!important;text-shadow:0 2px 6px rgba(0,0,0,.5)!important;border:none!important} .trdtc-detail-title h3::before, .trdtc-detail-title h3::after{display:none!important;content:none!important} @media(max-width:699px){.trdtc-detail-title h3{font-size:20px!important}.trdtc-detail-title{padding:0 16px 16px!important}} .trdtc-detail-body{padding:20px 24px 24px!important} @media(max-width:699px){.trdtc-detail-body{padding:16px 16px 20px!important}} .trdtc-detail-actions{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:20px!important} .trdtc-detail-watch{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;background:var(--c-green)!important;color:var(--c-ink)!important;border:none!important;border-radius:var(--r-sm)!important;padding:10px 20px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;font-family:inherit!important} .trdtc-detail-watch svg{display:block!important;flex-shrink:0!important} .trdtc-detail-cbtn{width:38px!important;height:38px!important;border-radius:50%!important;background:transparent!important;border:1.5px solid rgba(255,255,255,.2)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:rgba(255,255,255,.6)!important;cursor:pointer!important} .trdtc-detail-cbtn:hover{border-color:rgba(255,255,255,.5)!important;color:#fff!important} .trdtc-detail-meta{display:flex!important;align-items:center!important;gap:14px!important;margin-bottom:18px!important;padding-bottom:18px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;font-size:12.5px!important;color:rgba(255,255,255,.6)!important;flex-wrap:wrap!important} .trdtc-detail-meta-dur b, .trdtc-detail-meta-dist b{color:rgba(255,255,255,.85)!important;font-weight:700!important} .trdtc-detail-desc{font-size:14px!important;color:rgba(255,255,255,.64)!important;line-height:1.7!important;margin:0 0 22px!important} .trdtc-detail-roads-label{font-size:10.5px!important;font-weight:700!important;color:rgba(255,255,255,.45)!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:12px!important} .trdtc-detail-roads{font-size:14px!important;color:rgba(255,255,255,.7)!important;line-height:1.9!important;margin:0!important} /* Locked Details: the remaining roads as a count with the lock (4.104.0: no blur; full list stays in the crawlable SEO block) */ .trdtc-detail-roads-locked{position:relative!important;margin-top:4px!important} .trdtc-detail-roads-pill{display:inline-flex!important;align-items:center!important;gap:5px!important;font-size:11px!important;font-weight:600!important;color:rgba(255,255,255,.7)!important} .trdtc-detail-roads-pill svg{display:block!important} /* 4K + lock badges on the image */ .trdtc-detail-4k{box-sizing:border-box!important;height:20px!important;position:absolute!important;top:16px!important;left:18px!important;z-index:4!important;display:inline-flex!important;align-items:center!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} .trdtc-detail-premium{box-sizing:border-box!important;height:20px!important;position:absolute!important;top:16px!important;left:62px!important;z-index:4!important;display:inline-flex!important;width:auto!important;max-width:max-content!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} .trdtc-detail-premium svg{display:block!important;flex-shrink:0!important;width:9px!important;height:9px!important} /* Defensive: the X/Cornerstone theme must not paint a border/outline on the hero media or its layers (a green accent border was leaking through). */ .trdtc-detail-media, .trdtc-detail-media .trdtc-detail-thumb, .trdtc-detail-media .trdtc-detail-fallback, .trdtc-modal-detail .trdtc-modal-embed{outline:none!important;border:none!important;box-shadow:none!important} .trdtc-detail-premium svg{display:block!important;flex-shrink:0!important;width:11px!important;height:11px!important} .trdtc-detail-media.is-locked .trdtc-detail-thumb{filter:none!important;transform:none!important} /* 4.104.0: geen blur */ /* Details locked hero fallback backdrop (shows when no thumbnail) + clean shape. The X/Cornerstone theme applies border-radius to images; on the blurred thumb that clips it into an oval. Force a clean full-bleed rectangle. */ .trdtc-detail-media{position:relative!important;overflow:hidden!important} .trdtc-detail-media .trdtc-detail-thumb, .trdtc-detail-media .trdtc-detail-fallback{border-radius:0!important;max-width:none!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important} .trdtc-detail-fallback{position:absolute!important;inset:0!important;background:linear-gradient(135deg,#1b2f48 0%,#0d1b2a 100%)!important;z-index:0!important} .trdtc-detail-fallback svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:.10!important} /* Real video preview layer (Netflix-style), fades in over the poster. A bare native