/* ════════════════════════════════════════════════════════════════════ * Work With Us — front-end * testroute-core · Clear Drive * * Every value below is lifted from an existing page, not invented. Buttons * come from tr-cta-system.css and are not restyled here. * ════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ── shared root / tokens (identical to the other pillar pages) ── The negative-margin block is what breaks the section out of Cornerstone's column so it spans the viewport. Without it the whole page sits inset inside the page builder's container, which is exactly the too-narrow layout this replaced. */ .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:clip !important; --c-navy:#0c1927 !important; --c-navy-2:#0f1d2c !important; --c-green:#03c988 !important; --c-green-d:#02a873 !important; --c-off:#f8f9fa !important; --ease:cubic-bezier(.4,0,.2,1) !important; --line:rgba(255,255,255,.10) !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; } /* text-transform:none undoes the X theme's uppercase headings. Without this the H1 renders in caps and inherits Cornerstone's type styling. */ .trh-root *,.trh-root *::before,.trh-root *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important;text-transform:none !important} .trh-root :focus-visible{outline:2px solid var(--c-green) !important;outline-offset:3px !important;border-radius:8px !important} /* THE gutter: only .trh-w carries it. Single class on purpose, so the hero rule below (.trwwu-hero > .trh-w, two classes) OUTRANKS this and its top padding wins. A three-class version such as .trh-root .trh-w.trh-w would beat the hero rule, force padding:0 and kill the header clearance. That is the "no padding under the header" bug documented in about.css. */ .trh-w{max-width:1200px !important;margin:0 auto !important;padding:0 16px !important} @media(min-width:700px){.trh-w{padding:0 32px !important}} /* ════════════════════════════════════════════════════════════════════ * HEADER CLEARANCE — the thing that is easy to get wrong * * The padding goes on `.trh-hero > .trh-w`, NOT on the section. It is * calc(var(--hdr-total-h) + gap), where --hdr-total-h is written to * documentElement by header.js and equals barTop + barH, so it already * includes the admin bar and the notification bar. * * Two details that a hand-written value would miss: * 1. The FALLBACK changes from 56px to 72px at 769px, because the mobile * header is shorter. A single fallback is wrong on one of the two. * 2. The gap grows from 20px to 24px at 1100px. * * The bottom is clamp(44px, 6.5vh, 100px): the same viewport-relative * rhythm the About page uses, so the section squeezes on a short laptop * instead of holding a fixed value. * * Values copied verbatim from modules/about/assets/about.css. * ════════════════════════════════════════════════════════════════════ */ .trwwu-hero{background:var(--c-navy) !important} .trwwu-hero>.trh-w{ max-width:1200px !important; margin:0 auto !important; padding:calc(var(--hdr-total-h,56px) + 20px) 16px clamp(44px, 6.5vh, 100px) !important; } @media(min-width:700px){ .trwwu-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important} } @media(min-width:769px){ .trwwu-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important} } @media(min-width:1100px){ .trwwu-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px clamp(44px, 6.5vh, 100px) !important} } /* ── grid, breadcrumb en typografie: about.css ── */ .trh-hero-grid{display:block !important} @media(min-width:900px){ .trh-hero-grid{display:grid !important;grid-template-columns:1.1fr .9fr !important;column-gap:56px !important;align-items:center !important} } .trh-hero-bread{display:flex !important;align-items:center !important;gap:7px !important;font-size:12px !important;color:rgba(255,255,255,.55) !important;margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !important} .trh-hero-bread a{color:inherit !important;text-decoration:none !important} .trh-hero-bread a:hover{color:rgba(255,255,255,.85) !important} .trh-hero-bread-sep{color:rgba(255,255,255,.3) !important} .trh-hero-bread-cur{color:rgba(255,255,255,.8) !important;font-weight:500 !important} .trh-hero-h1{margin:0 !important} .trh-hero-lead{display:inline !important;font-size:clamp(1.75rem,calc((100vw - 32px) * 0.1142),2.875rem) !important;font-weight:700 !important;color:var(--c-off) !important;letter-spacing:-.03em !important;line-height:1.08 !important;text-transform:none !important} /* Only used when a forced second line is filled in. Left empty, the heading wraps naturally like every other H1 on the site. display:block rather than a max-width in ch, because a ch value shifts the moment the type size or the wording changes. */ .trwwu-h1-break{display:block !important} .trh-hero-intro{font-size:16.5px !important;color:rgba(255,255,255,.62) !important;line-height:1.65 !important;margin:clamp(1.1rem,.9rem + .6vw,1.35rem) 0 clamp(1.75rem,.8rem + 1.4vw,2rem) !important;max-width:540px !important} /* ── actierij: .trdtc-hero-cta uit de DTC-hero ── Primair eerst, tekstlink rechts ernaast. flex-wrap zorgt dat het op smalle schermen onder elkaar valt in plaats van te knellen. */ .trwwu-cta-row{display:flex !important;align-items:center !important;gap:16px !important;flex-wrap:wrap !important} /* ── illustration ── Rendered by tr_hero_visual( 'workwithus' ) from includes/hero-illustrations.php, so it shares the wrapper, the drawing language and the size with the other hub heroes. .trh-herofill is 300px here, matching show me tell me (road signs uses 330). Those illustrations use a LANDSCAPE viewBox of about 160x124 rather than a square, so 300px wide renders 232px tall. An earlier square 120x120 version rendered 300px tall at the same width, which is exactly why it looked a third larger than the one on show me tell me. That file also fixes the palette: slim #aebccb line work, an ambient green glow, and NO green element in the drawing, because green is reserved for CTAs. */ .trwwu-vis{display:none !important} @media(min-width:900px){.trwwu-vis{display:block !important}} .trh-herofill{position:relative !important;width:100% !important;max-width:300px !important;margin:0 auto !important;z-index:1 !important} .trh-herofill-svg{display:block !important;width:100% !important;height:auto !important} /* ── trust bar ── Shared .trh-trust, same values as the show me tell me and About heroes: 28px above, an 18px gap under a 1px rule, 13.5px type. Learner reviews on a page aimed at instructors look like the wrong proof at first glance. They are not: an instructor who hands out a discount code is putting their own name behind the product, so whether it is any good is more his problem than the learner's. */ .trh-trust{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:10px !important;row-gap:6px !important;margin-top:28px !important;padding-top:18px !important;border-top:1px solid var(--line) !important;font-size:13.5px !important;color:rgba(255,255,255,.55) !important} .trwwu-trust-sep{width:1px !important;height:12px !important;background:rgba(255,255,255,.14) !important} /* Hidden below 600px for the same reason as on the About hero: the Trustpilot block and a second line wrap onto two rows on a phone, which turns one trust signal into a stack. Trustpilot is the one a visitor can verify, so that is the one that stays. */ @media(max-width:599px){ .trwwu-trust-sep,.trwwu-trust-extra{display:none !important} } /* ════════════════════════════════════════════════════════════════════ * SECTION 2 — What you get * * Three values in one shape, with a hand-drawn marker under each. The * marker is a background-image and the animation is a scaleX transform on * the carrier: an earlier version animated stroke-dashoffset on a * non-uniformly stretched path, which made the stroke under the shortest * value render at 7px against 13px under the longest and made the whole * thing look broken. * * MARKER POSITION, from the W3C guidance on underlines: the offset is the * distance from the baseline to the TOP of the line, and 0.28em clears * Inter's descenders at roughly 0.22em. With line-height:1 the bottom of * the text box sits --md below the baseline, so the padding is * --mo + --mt - --md and the stroke hangs in it at bottom:0. Change the * thickness and the position follows. * * BREAKPOINT AT 860, not 760: at 760 a column is 203px while * "20% commission" needs about 217px, so it wrapped and the descriptions * stopped lining up. That is exactly iPad-portrait width. * Subgrid keeps the descriptions level even if the copy changes later. * ════════════════════════════════════════════════════════════════════ */ .trwwu-get{background:var(--c-navy-2,#0f1d2c) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important} .trwwu-get-head{max-width:620px !important;margin-bottom:40px !important} .trwwu-kicker{display:block !important;font-size:11px !important;line-height:1.4 !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.34) !important;margin-bottom:16px !important} /* Scales with the viewport instead of stepping at 700px, using the same formula as the hero H1 at 0.78 of its size. Fixed at 30px the longest heading here ran to four lines on a 360px phone: a block of 139px against 40px for the H1. Per letter the H1 was still bigger, but the mass was not, and mass is what you read. At 0.78 the ratio to the H1 is identical at every width. */ .trwwu-h2{font-size:clamp(1.375rem,calc((100vw - 32px) * 0.089),2.25rem) !important;line-height:1.16 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.03em !important;text-wrap:balance !important} .trwwu-gets{display:grid !important;grid-template-columns:1fr !important;gap:34px !important;margin:0 !important} @media(min-width:860px){ .trwwu-gets{grid-template-columns:repeat(3,1fr) !important;grid-template-rows:auto auto !important;column-gap:44px !important;row-gap:0 !important} .trwwu-get-item{display:grid !important;grid-template-rows:subgrid !important;grid-row:span 2 !important} } @media(min-width:1100px){.trwwu-gets{column-gap:64px !important}} .trwwu-get-item dt{font-size:28px !important;font-weight:800 !important;color:var(--c-off,#f8f9fa) !important;letter-spacing:-.03em !important;margin:0 !important} @media(min-width:700px){.trwwu-get-item dt{font-size:31px !important}} .trwwu-get-item dd{font-size:14.5px !important;line-height:1.68 !important;color:rgba(255,255,255,.5) !important;max-width:290px !important;margin:18px 0 0 !important} .trwwu-v{position:relative !important;display:inline-block !important;white-space:nowrap !important;line-height:1 !important;--mo:.28em;--mt:.34em;--md:.22em;padding-bottom:calc(var(--mo) + var(--mt) - var(--md)) !important} .trwwu-v-txt{position:relative !important;z-index:2 !important} /* TIMING, uit de richtlijnen voor scroll-onthullingen * * 700ms, midden in de aanbevolen band van 600 tot 800ms voor dit type. * * En een ANDERE curve dan de huiscurve, met opzet. cubic-bezier(.22,1,.36,1) * staat na 20 procent van de tijd al op 67 procent van de streep, waardoor * een animatie van een halve seconde in ongeveer 150ms klaar lijkt: je ziet * het eindresultaat en niet het tekenen. Die curve is gemaakt voor hovers * van 150 tot 200ms, waar fel juist goed voelt. * * cubic-bezier(.33,1,.68,1) staat op datzelfde moment op 49 procent en * verdeelt de beweging veel gelijkmatiger. Het blijft een ease-out, dus * dezelfde familie, alleen zachter. * * De waarnemer staat op 20 procent zichtbaarheid, niet op 60: dan is de * streep klaar voordat je er met scrollen langs bent. */ .trwwu-mark{position:absolute !important;left:-.06em !important;right:-.06em !important;bottom:0 !important;height:var(--mt) !important;z-index:1 !important;opacity:.45 !important;background-repeat:no-repeat !important;background-size:100% 100% !important;transform-origin:left center !important;transform:scaleX(0) !important;transition:transform 700ms cubic-bezier(.33,1,.68,1) var(--d,0ms) !important;will-change:transform !important} [data-wwu-mark][data-in="1"] .trwwu-mark{transform:scaleX(1) !important} @media (prefers-reduced-motion: reduce){ .trwwu-mark{transform:scaleX(1) !important;transition:none !important} } .trwwu-proof{margin:42px 0 0 !important;padding-top:26px !important;border-top:1px solid rgba(255,255,255,.07) !important} .trwwu-proof figcaption{margin-top:11px !important;font-size:12px !important;line-height:1.6 !important;color:rgba(255,255,255,.32) !important} .trwwu-get .trdtc-byline{display:flex !important;align-items:flex-start !important;gap:12px !important;padding:12px 14px !important;background:rgba(255,255,255,.03) !important;border:.5px solid rgba(255,255,255,.09) !important;border-radius:10px !important;max-width:440px !important} .trwwu-get .trdtc-byline-av{flex:0 0 36px !important;width:36px !important;height:36px !important;border-radius:50% !important;margin-top:1px !important;background:rgba(3,201,136,.09) !important;border:.5px solid rgba(3,201,136,.2) !important;display:grid !important;place-items:center !important;color:rgba(3,201,136,.8) !important} .trwwu-get .trdtc-byline-main{flex:1 !important;min-width:0 !important} .trwwu-get .trdtc-byline-line{font-size:12.5px !important;color:rgba(255,255,255,.68) !important;line-height:1.5 !important} /* ════════════════════════════════════════════════════════════════════ * SECTION 3 — What we ask * * ALIGNMENT: below 900px everything stacks, and then the heading, the * lead, the never-list and the mail all share ONE max-width of 520px so * there is a single right edge. Before, the heading ran to the full * container, the text stopped at 420 and the mail at 540: three edges with * a 284px jump on an iPad in portrait. * * 520px gives roughly 67 characters a line, mid-band for readability. * * The highlighted phrase carries white-space:nowrap. Without it the * heading can break between "six" and "minutes" below 1100px and the * marker falls in two. * ════════════════════════════════════════════════════════════════════ */ .trwwu-ask{background:var(--c-oefen,#122131) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important} .trwwu-ask-grid{display:grid !important;grid-template-columns:1fr !important;gap:36px !important} .trwwu-ask-left>*,.trwwu-mailwrap{max-width:520px !important} @media(min-width:900px){ /* center, not start: the left column is about 107px shorter than the mail, so top-aligning leaves a gap beside a full card. */ .trwwu-ask-grid{grid-template-columns:.85fr 1fr !important;column-gap:72px !important;align-items:center !important} .trwwu-ask-left>*{max-width:420px !important} .trwwu-ask-left .trwwu-h2{max-width:none !important} .trwwu-mailwrap{max-width:540px !important} } @media(min-width:1100px){.trwwu-ask-grid{column-gap:92px !important}} .trwwu-hl{position:relative !important;display:inline-block !important;white-space:nowrap !important;line-height:1 !important;--mo:.28em;--mt:.30em;--md:.22em;padding-bottom:calc(var(--mo) + var(--mt) - var(--md)) !important} .trwwu-hl-t{position:relative !important;z-index:2 !important} .trwwu-hl-m{position:absolute !important;left:-.05em !important;right:-.05em !important;bottom:0 !important;height:var(--mt) !important;z-index:1 !important;opacity:.45 !important;background-repeat:no-repeat !important;background-size:100% 100% !important} .trwwu-ask-lead{font-size:15.5px !important;line-height:1.75 !important;color:rgba(255,255,255,.58) !important;margin-top:16px !important} /* The three things you never have to do, struck through rather than explained. A strike says "not this" without a sentence, and it is the same family of mark as the stroke above. */ .trwwu-never{margin-top:24px !important;padding-top:20px !important;border-top:1px solid rgba(255,255,255,.10) !important} .trwwu-never-lbl{display:block !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.28) !important;margin-bottom:12px !important} .trwwu-never ul{list-style:none !important;display:flex !important;flex-wrap:wrap !important;gap:10px 22px !important;margin:0 !important;padding:0 !important} .trwwu-never li{position:relative !important;display:inline-block !important;font-size:15px !important;line-height:1.4 !important;color:rgba(255,255,255,.38) !important} .trwwu-strike-t{position:relative !important;z-index:2 !important} .trwwu-strike-s{position:absolute !important;left:-.08em !important;right:-.08em !important;top:50% !important;height:.34em !important;margin-top:-.17em !important;z-index:1 !important;opacity:.5 !important;background-repeat:no-repeat !important;background-size:100% 100% !important} .trwwu-mailwrap{min-height:290px !important} .trwwu-mail{border-radius:12px !important;background:rgba(255,255,255,.032) !important;border:1px solid rgba(255,255,255,.08) !important;overflow:hidden !important;opacity:0 !important;transform:translateY(10px) !important;transition:opacity .4s var(--tr-ease,cubic-bezier(.22,1,.36,1)),transform .4s var(--tr-ease,cubic-bezier(.22,1,.36,1)) !important} .trwwu-mailwrap[data-step="1"] .trwwu-mail,.trwwu-mailwrap[data-step="2"] .trwwu-mail,.trwwu-mailwrap[data-step="3"] .trwwu-mail,.trwwu-mailwrap[data-step="4"] .trwwu-mail{opacity:1 !important;transform:none !important} .trwwu-mail-head{display:flex !important;align-items:center !important;gap:11px !important;padding:13px 16px !important;border-bottom:1px solid rgba(255,255,255,.06) !important} .trwwu-mail-av{flex:0 0 28px !important;width:28px !important;height:28px !important;border-radius:8px !important;display:grid !important;place-items:center !important;background:rgba(255,255,255,.05) !important;color:rgba(255,255,255,.45) !important} .trwwu-mail-meta{display:flex !important;flex-direction:column !important;gap:1px !important;min-width:0 !important} .trwwu-mail-from{font-size:10.5px !important;letter-spacing:.07em !important;text-transform:uppercase !important;color:rgba(255,255,255,.32) !important;font-weight:700 !important} .trwwu-mail-subj{font-size:13.5px !important;font-weight:600 !important;color:rgba(255,255,255,.82) !important;letter-spacing:-.01em !important} .trwwu-mail-body{padding:16px 16px 4px !important;font-size:14px !important;line-height:1.7 !important;color:rgba(255,255,255,.56) !important} .trwwu-reply{margin:14px 16px 18px !important;padding-left:14px !important;border-left:2px solid rgba(255,255,255,.1) !important;opacity:0 !important;transition:opacity .3s !important} .trwwu-mailwrap[data-step="2"] .trwwu-reply,.trwwu-mailwrap[data-step="3"] .trwwu-reply,.trwwu-mailwrap[data-step="4"] .trwwu-reply{opacity:1 !important} .trwwu-reply-lbl{display:block !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.07em !important;text-transform:uppercase !important;color:rgba(255,255,255,.28) !important;margin-bottom:6px !important} .trwwu-reply-txt{font-size:14px !important;line-height:1.68 !important;color:rgba(255,255,255,.88) !important;min-height:47px !important} .trwwu-caret{display:none !important;width:1.5px !important;height:15px !important;background:rgba(255,255,255,.7) !important;margin-left:2px !important;vertical-align:-2px !important;animation:trwwu-blink 1s steps(1) infinite !important} .trwwu-mailwrap[data-step="2"] .trwwu-caret{display:inline-block !important} @keyframes trwwu-blink{0%,50%{opacity:1}51%,100%{opacity:0}} .trwwu-sent{display:inline-flex !important;align-items:center !important;gap:5px !important;margin-top:10px !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.04em !important;color:rgba(255,255,255,.4) !important;opacity:0 !important;transition:opacity .3s !important} .trwwu-mailwrap[data-step="3"] .trwwu-sent,.trwwu-mailwrap[data-step="4"] .trwwu-sent{opacity:1 !important} .trwwu-back{margin-top:16px !important;font-size:13.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.42) !important;font-style:italic !important;opacity:0 !important;transform:translateY(6px) !important;transition:opacity .4s,transform .4s !important} .trwwu-mailwrap[data-step="4"] .trwwu-back{opacity:1 !important;transform:none !important} @media (prefers-reduced-motion: reduce){ .trwwu-mail,.trwwu-reply,.trwwu-sent,.trwwu-back{opacity:1 !important;transform:none !important;transition:none !important} .trwwu-caret{display:none !important} } /* ════════════════════════════════════════════════════════════════════ * SECTION 4 — The doubts, and the form * * The five things an instructor thinks with the cursor over the button. * Answers stay VISIBLE: hiding them behind an accordion defeats the point * of having them. The button sits right after, which is where the research * says to repeat a CTA: straight after a block that removes objections. * * FORM SIZES, all from published testing rather than taste: * · one column, about 15s faster to complete than two * · labels above the field, up to 50% faster than left-aligned * · 16px between fields, inside the recommended 16 to 24 * · inputs 47px tall and the close button 44px, over the 44px minimum * · placeholders are format examples only, never the label (WCAG 2.2) * · errors carry an icon and text, never colour alone * ════════════════════════════════════════════════════════════════════ */ /* Fades into the footer, same construction as .tra-close on the About page: solid for the first 60px, then across to the footer colour. The ladder on this page climbs to #152536 and the footer drops back to #0d1b2a, and this is what bridges that step instead of leaving a hard edge. */ .trwwu-apply{background:linear-gradient(to bottom,var(--c-deep,#152536) 0,var(--c-deep,#152536) 60px,var(--ftr-bg,#0d1b2a) 100%) !important;padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important} .trwwu-apply-head{max-width:600px !important;margin-bottom:34px !important} .trwwu-doubts{display:grid !important;grid-template-columns:1fr !important;gap:0 !important;margin:0 !important} @media(min-width:820px){.trwwu-doubts{grid-template-columns:1fr 1fr !important;column-gap:56px !important}} .trwwu-doubt{padding:16px 0 !important;border-top:1px solid rgba(255,255,255,.10) !important} .trwwu-doubt:first-child{border-top:0 !important;padding-top:0 !important} @media(min-width:820px){.trwwu-doubt:nth-child(2){border-top:0 !important;padding-top:0 !important}} .trwwu-doubt dt{font-size:15px !important;font-weight:600 !important;color:rgba(255,255,255,.84) !important;line-height:1.45 !important;margin:0 !important} .trwwu-doubt dd{font-size:14.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.5) !important;margin:5px 0 0 !important} .trwwu-apply-cta{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:14px 20px !important;margin-top:34px !important;padding-top:26px !important;border-top:1px solid rgba(255,255,255,.10) !important} .trwwu-apply-note{font-size:13.5px !important;color:rgba(255,255,255,.38) !important} /* ── the modal ── * * Every value here comes from .tr-hp__browse-modal on the homepage, so the * two modals are the same object. What was wrong before, and why: * * 1. PADDING-TOP 120px, not 20. With 20 the box centres over the full * viewport height and its top slides behind the header. The homepage * modal reserves that 120px on purpose. * * 2. ONLY THE BODY SCROLLS. Before, the whole box had overflow-y:auto, * which gave a default browser scrollbar down the entire modal and let * the title scroll away. Here the header is sticky, the body scrolls * with a thin styled scrollbar, and the footer stays put so the submit * button is always reachable with a keyboard open. * ── */ /* Below the site header on purpose: 99991, 99990 and 99989 are the header's own layers, so 99900 leaves it visible and usable on top of the scrim. That is how a sheet behaves on iOS too, where the navigation bar stays. */ .trwwu-scrim{position:fixed !important;inset:0 !important;z-index:99900 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:calc(var(--hdr-total-h, 72px) + 48px) 20px 20px !important;background:rgba(5,10,20,.72) !important;-webkit-backdrop-filter:blur(8px) brightness(.45) !important;backdrop-filter:blur(8px) brightness(.45) !important;opacity:0 !important;transition:opacity .25s cubic-bezier(.4,0,.2,1) !important} .trwwu-scrim[hidden]{display:none !important} .trwwu-scrim.is-in{opacity:1 !important} .trwwu-modal{position:relative !important;z-index:1 !important;width:100% !important;max-width:640px !important;max-height:80vh !important;background:rgba(13,27,42,.95) !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:12px !important;-webkit-backdrop-filter:blur(20px) !important;backdrop-filter:blur(20px) !important;box-shadow:0 32px 100px rgba(0,0,0,.6) !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;padding:0 !important;transform:translateY(20px) !important;opacity:0 !important;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) !important} .trwwu-scrim.is-in .trwwu-modal{transform:translateY(0) !important;opacity:1 !important} /* On a phone a sheet from the bottom sits better with the keyboard up. */ /* ── mobile: a sheet that reads as a sheet ── * * Geometry copied from .tr-hp__browse-modal, which reserves 100px of scrim * at the top. That strip is the whole point: it is where you see the page * underneath, and it is what makes the thing read as a layer over a screen * rather than as a screen. Without it, and with the sheet at 92dvh, this * looked exactly like an ordinary form page. * * The header stays sticky, and only the header. That is not a second * scroller, so it does not get in the way of iOS bringing the next field * into view, and it keeps the close button on screen. Before, the button * was absolutely positioned inside the scroller and simply scrolled away, * which left no way out at all. * ── */ @media(max-width:560px){ /* The strip of visible scrim has to sit BELOW the header now that the header stays on top, so it is measured from --hdr-total-h rather than being a flat 100px. That also keeps it right when the notification bar is showing and the header is taller. */ .trwwu-scrim{padding:calc(var(--hdr-total-h, 56px) + 52px) 0 0 !important;align-items:flex-end !important} .trwwu-modal{max-width:100% !important;max-height:calc(100vh - var(--hdr-total-h, 56px) - 52px) !important;max-height:calc(100dvh - var(--hdr-total-h, 56px) - 52px) !important;border-radius:12px 12px 0 0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;transform:translateY(40px) !important} .trwwu-scrim.is-in .trwwu-modal{transform:translateY(0) !important} .trwwu-pane{display:block !important;min-height:0 !important;flex:none !important} /* Sticky, so the close button cannot scroll out of reach. */ .trwwu-mhead{position:sticky !important;top:0 !important;z-index:3 !important;padding:20px 16px 12px !important} .trwwu-mbody{display:block !important;overflow:visible !important;flex:none !important;padding:0 16px !important} .trwwu-mbody .trwwu-field{margin-bottom:16px !important} .trwwu-mfoot{position:static !important;border-top:0 !important;background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:4px 16px 24px !important} .trwwu-grip{display:block !important} .trwwu-x{top:10px !important;right:10px !important} } /* The grab handle. Desktop has a cursor and a visible scrim, so it does not need one; a phone does. */ .trwwu-grip{display:none;position:absolute;top:7px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);z-index:4} .trwwu-x{position:absolute !important;top:14px !important;right:14px !important;width:44px !important;height:44px !important;border-radius:50% !important;background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.06) !important;display:flex !important;align-items:center !important;justify-content:center !important;color:rgba(255,255,255,.6) !important;cursor:pointer !important;z-index:2 !important;transition:color .2s,background .2s !important} .trwwu-x:hover{color:#fff !important;background:rgba(255,255,255,.14) !important} .trwwu-pane{display:flex !important;flex-direction:column !important;min-height:0 !important;flex:1 !important} .trwwu-pane[hidden]{display:none !important} /* sticky header, as .tr-hp__browse-modal-header */ .trwwu-mhead{position:sticky !important;top:0 !important;z-index:3 !important;padding:24px 24px 16px !important;border-bottom:1px solid rgba(255,255,255,.06) !important;background:rgba(13,27,42,.98) !important;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important;flex-shrink:0 !important} @media(max-width:560px){.trwwu-mhead{padding:20px 16px 12px !important}} .trwwu-modal-t{font-size:18px !important;font-weight:700 !important;color:rgba(255,255,255,.92) !important;padding-right:46px !important;margin:0 !important;outline:none !important} .trwwu-modal-s{font-size:13.5px !important;line-height:1.6 !important;color:rgba(255,255,255,.5) !important;margin:6px 0 0 !important} /* scrolling body, as .tr-hp__browse-body */ /* Only a scroller from 561px up. Below that the modal itself scrolls and two nested scrollers with overscroll-behavior would fight each other. */ .trwwu-mbody{padding:20px 24px !important;display:flex !important;flex-direction:column !important;gap:16px !important} @media(min-width:561px){ .trwwu-mbody{flex:1 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;scrollbar-width:thin !important;scrollbar-color:rgba(255,255,255,.1) transparent !important;overscroll-behavior:contain !important} } @media(max-width:560px){.trwwu-mbody{padding:16px !important}} /* sticky footer: the button stays reachable with the keyboard open */ .trwwu-mfoot{flex-shrink:0 !important;padding:16px 24px 20px !important;border-top:1px solid rgba(255,255,255,.06) !important;background:rgba(13,27,42,.98) !important;-webkit-backdrop-filter:blur(12px) !important;backdrop-filter:blur(12px) !important} @media(max-width:560px){.trwwu-mfoot{padding:14px 16px 18px !important}} .trwwu-after{font-size:11.5px !important;line-height:1.55 !important;color:rgba(255,255,255,.34) !important;margin:10px 0 0 !important} .trwwu-field{display:flex !important;flex-direction:column !important;gap:7px !important} .trwwu-label{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:8px !important;font-size:13.5px !important;font-weight:500 !important;color:var(--c-off,#f8f9fa) !important} .trwwu-opt,.trwwu-pub{font-size:10px !important;font-weight:700 !important;letter-spacing:.05em !important;text-transform:uppercase !important;padding:2px 6px !important;border-radius:5px !important} .trwwu-opt{color:rgba(255,255,255,.35) !important;background:rgba(255,255,255,.05) !important} .trwwu-pub{color:rgba(255,255,255,.42) !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.09) !important} /* inputs match the search field in that modal: .06 background, .08 border, 44px */ /* 16px, not 15. iOS Safari and Chrome zoom the page in on any input under 16px and do not zoom back out afterwards, which is what made this form awkward on a phone. The alternative fix, maximum-scale=1 on the viewport, also blocks people who need to zoom by choice and fails WCAG. -webkit-appearance:none removes iOS's own inner shadow and rounding. */ .trwwu-field input{width:100% !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:8px !important;padding:12px 14px !important;min-height:48px !important;color:#fff !important;font-size:16px !important;font-family:inherit !important;outline:none !important;-webkit-appearance:none !important;appearance:none !important;transition:border-color .2s,background .2s !important} .trwwu-field input::placeholder{color:rgba(255,255,255,.25) !important} .trwwu-field input:focus{border-color:var(--c-green,#03c988) !important;background:rgba(255,255,255,.09) !important} .trwwu-field.is-err input{border-color:rgba(255,143,122,.55) !important} .trwwu-err{font-size:12.5px !important;line-height:1.5 !important;color:#ff8f7a !important} .trwwu-err[hidden]{display:none !important} .trwwu-note{font-size:11.5px !important;line-height:1.5 !important;color:rgba(255,255,255,.32) !important} .trwwu-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important} .trwwu-formerr{display:block !important;padding:11px 13px !important;border-radius:8px !important;background:rgba(255,143,122,.1) !important;border:1px solid rgba(255,143,122,.3) !important;font-size:13px !important;line-height:1.55 !important;color:#ff8f7a !important;margin:0 !important} .trwwu-formerr[hidden]{display:none !important} .tr-cta[data-busy]{opacity:.6 !important;pointer-events:none !important} .trwwu-done-in{padding:30px 24px 26px !important} .trwwu-done-ico{display:grid !important;place-items:center !important;width:46px !important;height:46px !important;border-radius:50% !important;background:rgba(3,201,136,.1) !important;border:1px solid rgba(3,201,136,.3) !important;color:var(--c-green,#03c988) !important;margin-bottom:18px !important} .trwwu-done-in .tr-cta{margin-top:22px !important} @media (prefers-reduced-motion: reduce){ .trwwu-scrim,.trwwu-modal{transition:none !important} } /* ── SPRINGRIJ ──────────────────────────────────────────────────────── Zelfde vorm als .tsmt-hero-jump op road-signs en show-tell: een rij chips onder de trust-rij die naar de secties hieronder springt. De chip komt uit het gedeelde CTA-systeem (.tr-chip, 34px hoog), niet uit een eigen kopie. Met de marge erboven kost de rij 70px, wat de inhoud van deze hero van 362 op 432 brengt — binnen de band van 425 tot 445 waar manoeuvres, show-tell, road-signs en share-routes in zitten. 36px marge, dezelfde afstand die show-tell aanhoudt tussen de trust-rij en de springrij. */ .trwwu-hero-jump{display:flex !important;flex-wrap:wrap !important;gap:8px !important; margin-top:36px !important;max-width:600px !important} @media(max-width:599px){.trwwu-hero-jump{gap:6px !important;margin-top:30px !important;max-width:none !important}}