/* ════════════════════════════════════════════════════════════════════════ * Testroute — Contact page · v1.0.0 * Self-contained: carries the shared trh- hero shell (lifted verbatim from * about.css so heights, type and rhythm match 1:1), then the page-specific * trc- styles. !important throughout = Cornerstone. * * HEADER SPACING (the recurring "too much padding" issue) * Only .trh-hero > .trh-w carries the top padding, as * calc(var(--hdr-total-h,72px) + gap). * --hdr-total-h is published by header.js on . Cornerstone injects its * own row padding; .trh-root and its children are reset to padding:0 below, * so the ONLY vertical space under the header is that calc(). Never add a * second top padding on the section, and never hard-code a header height. * * NO CORNERSTONE WRAPPER RESET HERE. No other page has one, and adding one * makes this page sit tighter under the header than every sibling. * * TOKEN NOTE, worth reading before "fixing" anything: * · --ease in .trh-root is cubic-bezier(.4,0,.2,1), the same as about.css * and help.css. The .22,1,.36,1 curve exists only on .tr-cta and * .tr-link svg, which is where the CTA system puts it. * · --r-sm / --r-md / --r-lg are declared here as 8 / 12 / 16. help.css * calls var(--r-sm,12px) on one line and var(--r-sm,8px) on another * without ever declaring it; those fallbacks disagree with each other. * Declared once here so this page cannot inherit that ambiguity. * ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ── overflow, scoped to this page ───────────────────────────── The breakout uses width:100vw, and 100vw counts the scrollbar on desktop, so without a clip there is a dozen pixels of sideways scroll. It must be clip and not hidden: hidden creates a scroll container and kills position:sticky anywhere inside, which is what help.css ran into. */ body:has(.trc-page){overflow-x:clip !important} .x-section:has(.trc-page), .x-row:has(.trc-page), .x-col:has(.trc-page){overflow:visible !important} /* ══ root + tokens · about.css lines 20 to 33, verbatim ══════════════════ */ .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-oefen:#122131 !important; --c-deep:#152536 !important; --c-close:#1b2e42 !important; --c-off:#f8f9fa !important; --c-amber:#f0997b !important; --r-sm:8px !important; --r-md:12px !important; --r-lg:16px !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; } /* ONE class. Two would outrank .trh-w and kill the gutters. */ .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} .trh-root fieldset{border:0 !important;min-width:0 !important} .trh-root input,.trh-root textarea,.trh-root button,.trh-root select{font-family:inherit !important} .trh-w{max-width:1200px !important;margin:0 auto !important;padding:0 16px !important} @media(min-width:700px){.trh-w{padding:0 32px !important}} /* ══ hero shell · about.css, verbatim ═══════════════════════════════════ */ .trh-hero{background:var(--c-navy) !important;position:relative !important;overflow:hidden !important} .trh-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){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}} @media(min-width:769px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}} @media(min-width:1100px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px clamp(44px, 6.5vh, 100px) !important}} .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;align-items:stretch !important}} .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} .trh-hero-bread{display:none !important;font-size:12px !important;color:rgba(255,255,255,.55) !important; margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !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,.55) !important;text-decoration:none !important} .trh-hero-bread a:hover{color:#fff !important} .trh-hero-bread-sep{color:rgba(255,255,255,.3) !important;flex:none !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 auto 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-h1{max-width:600px !important;margin:0 0 clamp(.875rem,.65rem + .8vw,1.25rem) !important; letter-spacing:-.03em !important;line-height:1.08 !important;text-wrap:balance !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} .trh-hero-vis{position:relative !important;display:none !important} @media(min-width:900px){.trh-hero-vis{display:block !important}} /* ══ CTA system · tr-cta-system.css, the classes this page uses ═════════ */ .tr-cta{box-sizing:border-box !important;display:inline-flex !important;align-items:center !important; justify-content:center !important;gap:9px !important;height:44px !important;padding:0 22px !important; font-family:inherit !important;font-size:14.5px !important;font-weight:700 !important;line-height:1 !important; color:#0c1927 !important;background:#03c988 !important;border:none !important;border-radius:8px !important; cursor:pointer !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), border-color .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1) !important} .tr-cta:hover{background:#02a873 !important;transform:translateY(-1px) !important} .tr-cta:active{transform:translateY(0) !important} .tr-cta:focus-visible{outline:2px solid #03c988 !important;outline-offset:2px !important} .tr-cta svg{flex:none !important;width:1em !important;height:1em !important; transition:transform .18s cubic-bezier(.22,1,.36,1) !important} .tr-cta:hover svg{transform:translateX(3px) !important} .tr-cta--lg{height:48px !important;padding:0 26px !important;font-size:15px !important} .tr-cta--sm{height:36px !important;padding:0 16px !important;font-size:13.5px !important;gap:7px !important} .tr-cta--neutral{background:rgba(255,255,255,.05) !important;border:1.5px solid rgba(255,255,255,.16) !important; color:#f8f9fa !important} .tr-cta--neutral:hover{background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.28) !important;transform:translateY(-1px) !important} .tr-link{display:inline-flex !important;align-items:center !important;gap:6px !important; font-family:inherit !important;font-weight:600 !important;font-size:14px !important;color:#fff !important; background:none !important;border:none !important;border-bottom:1px solid rgba(255,255,255,.28) !important; padding:0 0 2px !important;cursor:pointer !important;text-decoration:none !important; transition:color .15s,border-color .15s !important} .tr-link:hover{color:#03c988 !important;border-bottom-color:#03c988 !important} .tr-link--quiet{color:rgba(255,255,255,.62) !important;border-bottom-color:rgba(255,255,255,.16) !important; font-weight:500 !important} .tr-link--quiet:hover{color:#fff !important;border-bottom-color:rgba(255,255,255,.4) !important} .tr-link svg{flex:none !important;transition:transform .15s cubic-bezier(.22,1,.36,1) !important} .tr-link:hover svg{transform:translateX(3px) !important} /* .tr-chip arrives globally from assets/css/tr-cta-system.css, which now hardens its padding against this file's own root reset. The copy that used to sit here was the wrong fix: CTA-SYSTEM.md says you reuse those classes rather than copy them onto a page, and a copy only fixes the one page that has it. */ /* ══ fields · share-routes.css .trsr-in / .trsr-fielderr, verbatim ══════ */ .trsr-in{width:100% !important;padding:10px 12px !important;border-radius:var(--r-sm) !important; background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important; color:#fff !important;font-family:inherit !important;font-size:13.5px !important; line-height:1.5 !important;outline:none !important; transition:border-color .15s,background .15s !important} .trsr-in:focus{border-color:rgba(3,201,136,.6) !important;background:rgba(255,255,255,.07) !important} .trsr-in::placeholder{color:rgba(255,255,255,.3) !important} .trsr-in.is-bad{border-color:rgba(240,153,123,.7) !important;background:rgba(240,153,123,.06) !important} .trsr-in.is-bad:focus{border-color:var(--c-amber) !important; box-shadow:0 0 0 3px rgba(240,153,123,.16) !important} .trsr-fielderr{display:block !important;margin-top:6px !important;font-size:12px !important; line-height:1.5 !important;color:var(--c-amber) !important} .trsr-check{display:flex !important;align-items:flex-start !important;gap:9px !important; margin-top:10px !important;font-size:13px !important;line-height:1.5 !important; color:rgba(255,255,255,.72) !important;cursor:pointer !important} .trsr-check input{width:16px !important;height:16px !important;margin-top:1px !important; flex:none !important;accent-color:var(--c-green) !important;cursor:pointer !important} /* ══ page ══════════════════════════════════════════════════════════════ */ .trc-intro{font-size:17px !important;line-height:1.6 !important; color:rgba(255,255,255,.72) !important;max-width:540px !important; margin:0 0 clamp(1.75rem,.8rem + 1.55vw,2rem) !important;text-wrap:pretty !important} .trc-page .trh-hero-vis{display:block !important} .trc-aside{position:relative !important;height:100% !important;display:flex !important; flex-direction:column !important;justify-content:center !important; padding:20px !important;border-radius:var(--r-lg) !important; background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.08) !important} @media(min-width:900px){.trc-aside{padding:24px !important}} @media(max-width:899px){.trc-aside{height:auto !important;margin-top:28px !important}} .trc-aside-k{display:block !important;font-size:11px !important;font-weight:700 !important; letter-spacing:.12em !important;text-transform:uppercase !important; color:rgba(255,255,255,.34) !important;margin-bottom:12px !important} .trc-aside-t{font-size:17px !important;font-weight:700 !important;letter-spacing:-.02em !important; color:#fff !important;margin-bottom:8px !important;text-wrap:balance !important} .trc-aside-b{font-size:14px !important;line-height:1.6 !important; color:rgba(255,255,255,.55) !important;margin-bottom:16px !important;text-wrap:pretty !important} .trc-aside .tr-link{align-self:flex-start !important} /* Last section on the page, so it lands in the footer the way every other page does. #0f1d2c would be a two-point step off the #0c1927 hero and read as a rendering artefact, so with only two sections the form takes the next visible rung, --c-oefen. One value to change back if you disagree. */ .trc-form-sec{background:linear-gradient(to bottom, var(--c-oefen,#122131) 0, var(--c-oefen,#122131) 60px, var(--ftr-bg,#0d1b2a) 100%) !important; padding:clamp(32px,4.5vh,72px) 0 clamp(44px,6.5vh,100px) !important} /* help.css settled this one: a heading at 820 and its own answer at 512 reads as a ragged edge, not as a measure. The column carries the width and nothing inside it declares its own, so every block ends on the same line. */ .trc-col{max-width:680px !important} /* ── HORIZONTAL SPACE ON A PHONE ──────────────────────────────────────── WCAG 1.4.10 asks that everything work at 320 CSS px with no sideways scroll, so 320 is the number every box below is measured against: 320 viewport -32 .trh-w gutter, 16 each side (unchanged from every other page) =288 the column -32 a page card, 16 each side (.trsr-card is the house value) =256 inside the playback block -26 an inner panel, 13 each side (.trsr-task is the house value) =230 inside the readout, which is the deepest nesting on the page 45px per side at the deepest point, 28% of a 320px screen. That is the ceiling: a fourth level of padded box would start wrapping the readout chips one word per line. Add depth by removing a level, not by shaving the gutter, because the H1 clamp subtracts a hard 32px and would stop tracking the column the moment 16 changes. ── */ .trc-fld{margin-bottom:16px !important} .trc-subfld{margin-top:12px !important;margin-bottom:0 !important} .trc-lbl{display:block !important;font-size:13.5px !important;font-weight:600 !important; color:var(--c-off) !important;letter-spacing:-.01em !important;margin-bottom:7px !important} .trc-lbl:has(+ .trc-hint){margin-bottom:5px !important} .trc-lbl--leg{margin-bottom:0 !important} .trc-hint{display:block !important;font-size:13px !important;line-height:1.5 !important; color:rgba(255,255,255,.45) !important;margin:0 0 8px !important} /* the house optional marker, .trwwu-opt */ .trc-opt{display:inline-block !important;margin-left:6px !important;padding:2px 6px !important; border-radius:5px !important;font-size:10px !important;font-weight:700 !important; letter-spacing:.05em !important;text-transform:uppercase !important; vertical-align:middle !important;color:rgba(255,255,255,.35) !important; background:rgba(255,255,255,.05) !important} .trc-ta{resize:vertical !important;min-height:132px !important;font-size:14.5px !important; line-height:1.6 !important} .trc-fs{border:0 !important;margin-bottom:26px !important} /* category cards, shaped like .trsr-task so it is not a new component */ .trc-cats{display:grid !important;gap:8px !important;margin-top:12px !important} .trc-cat{position:relative !important;display:flex !important;align-items:flex-start !important;gap:12px !important; padding:13px !important;border-radius:var(--r-md) !important; border:1px solid rgba(255,255,255,.1) !important;background:rgba(255,255,255,.04) !important; cursor:pointer !important;text-align:left !important; transition:background .15s,border-color .15s,transform .15s var(--ease) !important} .trc-cat:hover{background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.2) !important;transform:translateY(-1px) !important} /* SELECTED STATE, from the input rather than from JavaScript. The prototype drove this with React state and the port lost the binding, so the card never tinted and the ring never filled: the radio was being selected all along, it just never said so, which reads as a dead control. Three layers, on purpose: · input:checked ~ .trc-cat-box the ring. A sibling selector, so it works in every browser and with JavaScript switched off entirely. · :has(input:checked) the card tint. :has is the only way to reach a parent, and it is baseline in every current browser. · .is-on set by contact.js, so the card still responds if :has is unavailable. Any one of the three is enough. */ .trc-cat.is-on, .trc-cat:has(input:checked){background:rgba(3,201,136,.08) !important;border-color:rgba(3,201,136,.45) !important} .trc-cat input{position:absolute !important;opacity:0 !important;width:1px !important;height:1px !important} .trc-cat-box{flex:0 0 18px !important;width:18px !important;height:18px !important;margin-top:2px !important; border-radius:50% !important;border:1.5px solid rgba(255,255,255,.28) !important; transition:border-color .15s,box-shadow .15s !important} .trc-cat.is-on .trc-cat-box, .trc-cat input:checked ~ .trc-cat-box{border-color:var(--c-green) !important; box-shadow:inset 0 0 0 4px var(--c-green) !important} /* The ring also carries the focus outline, so a keyboard user sees where they are even where :has is not available to light the whole card. */ .trc-cat input:focus-visible ~ .trc-cat-box{outline:2px solid var(--c-green) !important; outline-offset:3px !important} .trc-cat:has(input:focus-visible){outline:2px solid var(--c-green) !important;outline-offset:2px !important} .trc-cat-t{flex:1 !important;min-width:0 !important} .trc-cat-t b{display:block !important;font-size:15px !important;font-weight:600 !important; color:#fff !important;letter-spacing:-.01em !important;margin-bottom:3px !important} .trc-cat-t span{display:block !important;font-size:13px !important;line-height:1.55 !important; color:rgba(255,255,255,.5) !important} /* the playback block: the five things, two of them already answered */ .trc-diag{margin:0 0 26px !important;padding:16px !important;border-radius:var(--r-lg) !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.08) !important} .trc-diag > *:last-child{margin-bottom:0 !important} .trc-diag-head{margin-bottom:16px !important} .trc-diag-k{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:8px !important} .trc-diag-s{font-size:13.5px !important;line-height:1.55 !important; color:rgba(255,255,255,.55) !important} /* the payment note. Quieter than the playback block: it is something to read, not something to fill in, so no card weight and no green. */ .trc-note{margin:0 0 26px !important;padding:16px 0 0 !important; border-top:1px solid var(--line) !important} .trc-note-k{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:10px !important} .trc-note-b{font-size:14.5px !important;line-height:1.6 !important; color:rgba(255,255,255,.62) !important;text-wrap:pretty !important} .trc-note-ask{margin-top:16px !important} .trc-note-q{display:block !important;margin-bottom:8px !important;font-size:11.5px !important; font-weight:600 !important;color:rgba(255,255,255,.45) !important} .trc-note-topics{display:flex !important;flex-wrap:wrap !important;gap:7px !important} .trc-readout{margin-bottom:20px !important;padding:13px !important;border-radius:var(--r-md) !important; background:rgba(12,25,39,.5) !important;border:1px solid rgba(255,255,255,.07) !important} .trc-readout-k{display:block !important;font-size:11.5px !important;font-weight:600 !important; color:rgba(255,255,255,.4) !important;margin-bottom:9px !important} .trc-readout-row{display:flex !important;flex-wrap:wrap !important;gap:7px !important} .trc-rd{display:inline-flex !important;align-items:center !important;gap:7px !important; padding:6px 11px !important;border-radius:999px !important; background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.09) !important; font-size:12.5px !important;font-weight:600 !important;color:rgba(255,255,255,.78) !important} .trc-rd svg{color:rgba(255,255,255,.35) !important;flex:none !important} .trc-check{margin-top:10px !important;padding:4px 0 !important;font-size:12.5px !important; color:rgba(255,255,255,.55) !important;min-height:28px !important;align-items:center !important} .trc-syms{display:flex !important;flex-wrap:wrap !important;gap:7px !important;margin-top:2px !important} .trc-shotnote{font-size:13px !important;line-height:1.55 !important; color:rgba(255,255,255,.45) !important;margin-top:16px !important; padding-top:14px !important;border-top:1px solid rgba(255,255,255,.06) !important} /* honeypot: off screen through a class, never an inline display:none */ .trc-pot{position:absolute !important;left:-9999px !important;top:auto !important; width:1px !important;height:1px !important;overflow:hidden !important} .trc-pot.is-shown{position:relative !important;left:0 !important;width:auto !important; height:auto !important;overflow:visible !important;margin-bottom:22px !important; padding:12px !important;border:1px dashed rgba(240,153,123,.5) !important; border-radius:var(--r-md) !important} .trc-pot.is-shown label{display:block !important;font-size:12px !important; color:var(--c-amber) !important;margin-bottom:6px !important} .trc-pot.is-shown input{width:100% !important;padding:8px 10px !important; background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.1) !important; border-radius:6px !important;color:#fff !important} .trc-privacy{font-size:13px !important;line-height:1.6 !important; color:rgba(255,255,255,.45) !important;margin-bottom:20px !important} .trhp-a{color:rgba(255,255,255,.7) !important;text-decoration:underline !important; text-decoration-color:rgba(3,201,136,.5) !important;text-underline-offset:3px !important; text-decoration-thickness:1.5px !important;transition:color .15s,text-decoration-color .15s !important} .trhp-a:hover{color:var(--c-green) !important;text-decoration-color:var(--c-green) !important} .trc-actions{display:flex !important;flex-wrap:wrap !important;align-items:center !important; gap:14px !important} @media(max-width:430px){ .trc-actions .tr-cta:not(#_trcta){width:100% !important} } /* error summary · GDS pattern: summary plus inline, always both */ .trc-errsum{margin-bottom:26px !important;padding:16px !important; border-radius:var(--r-md) !important;border:2px solid var(--c-amber) !important; background:rgba(240,153,123,.07) !important;outline:none !important} .trc-errsum-t{font-size:17px !important;font-weight:700 !important;color:#fff !important; letter-spacing:-.01em !important;margin-bottom:10px !important} .trc-errsum-l{list-style:none !important} .trc-errsum-l li{margin-bottom:6px !important} .trc-errsum-l a{color:var(--c-amber) !important;font-size:14.5px !important; text-decoration:underline !important;text-underline-offset:3px !important; text-decoration-thickness:1.5px !important} .trc-errsum-l a:hover{color:#fff !important} /* confirmation */ .trc-done-panel{display:flex !important;flex-direction:column !important; align-items:flex-start !important;padding:20px !important;margin-bottom:26px !important; border-radius:var(--r-lg) !important;background:rgba(3,201,136,.08) !important; border:1px solid rgba(3,201,136,.28) !important} .trc-done-tick{width:40px !important;height:40px !important;border-radius:50% !important; display:flex !important;align-items:center !important;justify-content:center !important; background:rgba(3,201,136,.16) !important;border:1px solid rgba(3,201,136,.3) !important; color:var(--c-green) !important;margin-bottom:14px !important} .trc-done-t{font-size:clamp(1.375rem,calc((100vw - 32px) * .089),2rem) !important; line-height:1.16 !important;font-weight:800 !important;letter-spacing:-.03em !important; color:#fff !important;margin-bottom:8px !important} .trc-done-ref{font-size:14px !important;color:rgba(255,255,255,.6) !important; font-variant-numeric:tabular-nums !important} .trc-done-ref strong{color:#fff !important;font-weight:700 !important;letter-spacing:.02em !important} .trc-sub{font-size:17px !important;font-weight:700 !important;color:#fff !important; letter-spacing:-.01em !important;margin-bottom:10px !important} .trc-body{font-size:17px !important;line-height:1.6 !important; color:rgba(255,255,255,.72) !important;margin-bottom:14px !important; text-wrap:pretty !important} .trc-body strong{color:#fff !important;font-weight:600 !important;overflow-wrap:anywhere !important} .trc-again{margin-top:10px !important} .trc-sr{position:absolute !important;width:1px !important;height:1px !important; padding:0 !important;margin:-1px !important;overflow:hidden !important; clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important} /* The conditional blocks, on reveal. Attached to the attribute rather than a class the JS would have to add: the block is already in the DOM and only unhidden, so there is nothing to mount and nothing to time. The .22 curve is the CTA system's, which is where this page is allowed to use it. */ .trc-page [data-when]:not([hidden]), .trc-page #trc-devwrap:not([hidden]){ animation:trcIn .22s cubic-bezier(.22,1,.36,1) both !important} @keyframes trcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .trc-page *{transition:none !important;animation:none !important} } /* ── conditional blocks ──────────────────────────────────────── [hidden] is a browser default of display:none, and the reset above sets padding and margin but never display, so nothing here fights it. The reveal is a class toggle rather than element.style: an inline style loses to a stylesheet rule carrying !important, every time. */ .trc-page [hidden]{display:none !important} /* ── the send button, mid-flight ─────────────────────────────── Disabled and dimmed, never replaced. Swapping the label for a spinner loses the arrow and the width, and the row jumps. */ .trc-form.is-sending .tr-cta{opacity:.55 !important;pointer-events:none !important} /* The one failure the sender can act on. Amber, like every other error on the page, and it never clears the textarea. */ .trc-fail{margin-top:14px !important;font-size:14px !important;line-height:1.6 !important; color:var(--c-amber) !important} /* ════════════════════════════════════════════════════════════════════════ * THE FORM SECTION IS TWO COLUMNS * * It used to be one 680px column inside a 1200px container, which left 456 * pixels doing nothing. That does not read as whitespace, it reads as a * broken promise: the hero above sets up two columns and the form abandons * them, so the eye keeps waiting for a right-hand column that never comes. * * What this is NOT: the form fields side by side. Baymard's testing found * single column forms produce fewer skipped fields, fewer misread fields * and fewer errors, because attention travels in one direction. And the * column is not widened either: 680px is already about 94 characters at the * size the message box uses. * * The shape is Help's, deliberately. .trhp-grid is minmax(0,760px) 240px * with a sticky rail, and Help is the page people arrive here from, so the * two now read as a pair rather than as two unrelated pages. * * THE FORM TRACK FLEXES, THE RAIL IS FIXED, AND .trc-col STILL CAPS THE * FORM AT 680. That matters: the slack lands in the gap as air instead of * stretching the measure. A 1fr track without the cap would put the message * box at 780px, which is the thing this whole layout was meant to avoid. * * The hero is now a single column, which is not a compromise: Help's hero * is single column too. * ════════════════════════════════════════════════════════════════════════ */ /* ── HET GRID STOND UIT ─────────────────────────────────────────────── Hier stond `.trc-page .trh-hero-grid{display:block}`. Dat is 0,2,0 aan specificiteit tegen 0,1,0 van de @media(min-width:900px) die er een grid van maakt, dus deze won altijd en de hero was overal één kolom. Zolang er geen illustratie in de template stond viel dat niet op. Zodra die er wel is, valt hij ónder de tekst in plaats van ernaast, en dan wordt ook de chiprij te breed: over de volle kolom passen er vier op de eerste rij en blijft er één alleen achter. Twee kolommen, zoals elke andere pagina. De chiprij breekt daarmee als 3 + 2 in plaats van 4 + 1. */ .trc-page .trh-hero-grid{position:relative !important;z-index:2 !important} .trc-grid{display:block !important} @media(min-width:960px){ .trc-grid{display:grid !important; grid-template-columns:minmax(0,1fr) 300px !important; gap:56px !important;align-items:start !important} } /* Sticky is why the expectation is worth moving here at all: it has to stay on screen while somebody types, or it is no better than the line beside the button that it replaced. It works because .trc-page already sets overflow-x:clip rather than hidden on the ancestors; hidden creates a scroll container and sticky silently stops working inside one. */ /* Gone once the confirmation is up. See the note in contact.js: the rail and the confirmation are the same three sentences, one as a promise and one as a receipt, and only one of them should be on screen at a time. */ .trc-grid.is-done .trc-rail{display:none !important} .trc-rail{margin-top:36px !important} @media(min-width:960px){ .trc-rail{position:sticky !important;align-self:start !important; margin-top:0 !important; top:calc(var(--hdr-total-h,72px) + 24px) !important; max-height:calc(100svh - var(--hdr-total-h,72px) - 48px) !important; overflow-y:auto !important;overscroll-behavior:contain !important; scrollbar-width:thin !important; scrollbar-color:rgba(255,255,255,.1) transparent !important} .trc-rail::-webkit-scrollbar{width:6px !important} .trc-rail::-webkit-scrollbar-track{background:transparent !important} .trc-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12) !important; border-radius:999px !important} } .trc-rail-k{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:14px !important} /* A track, not bullets. Same idea as .trhp-rail-list, and it costs one border: without it three lines read as a shopping list rather than as a sequence in time. */ .trc-rail-l{list-style:none !important;margin:0 !important;padding:0 !important; border-left:1px solid var(--line) !important} .trc-rail-l li{list-style:none !important; margin:0 !important;padding:0 0 14px 14px !important; font-size:14px !important;line-height:1.55 !important; color:rgba(255,255,255,.62) !important;text-wrap:pretty !important} .trc-rail-l li:last-child{padding-bottom:0 !important} .trc-rail-l li::before{content:none !important;display:none !important} .trc-rail-foot{margin-top:24px !important;padding-top:20px !important; border-top:1px solid var(--line) !important} /* In the rail the aside stops being a card. A card inside a column that is already visually separate is a box in a box. */ .trc-aside--compact{position:static !important;height:auto !important; display:block !important;margin:0 !important;padding:0 !important; background:none !important;border:0 !important;border-radius:0 !important} .trc-aside--compact .trc-aside-t{font-size:15px !important} .trc-aside--compact .trc-aside-b{font-size:13.5px !important;margin-bottom:14px !important} /* ════════════════════════════════════════════════════════════════════════ * HARDENING — the form controls, against the theme * * WHAT WENT WRONG, AND WHY THE PROTOTYPE COULD NOT SHOW IT * * .trsr-in is a single class, so it computes at 0,1,0. A theme rule written * as input[type="text"] computes at 0,1,1 and outranks it. !important does * not settle that: it only lifts a declaration above normal ones, and * between two !important declarations the more specific selector still * wins. So the fields rendered as plain white browser boxes while every * .trc- rule on the same page worked perfectly, because nothing in the * theme has an opinion about .trc-lbl. * * A React preview has no theme in it, so this class of bug is invisible * until the page is on the site. It is the same wall tr-cta-system.css hit * with .x-content a. * * THE FIX IS THE ONE THIS PLUGIN ALREADY DOCUMENTS * :not(#_trcin) matches everything, because nothing carries that id, but it * computes WITH an id. The rule lands at 1,2,0 and no theme selector short * of a real id can reach it. Identical trick, identical reason, to * .tr-cta:not(#_trcta). * * Scoped to .trc-page so share-routes and work with us keep their own * behaviour and none of this leaks off the contact page. * ════════════════════════════════════════════════════════════════════════ */ /* appearance:none is doing real work here, not tidying: without it iOS keeps its own inner shadow and rounding, and several themes ship a native-looking input that survives every colour override. */ .trc-page .trsr-in:not(#_trcin){ -webkit-appearance:none !important; appearance:none !important; box-sizing:border-box !important; display:block !important; width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:10px 12px !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:var(--r-sm, 8px) !important; background:rgba(255,255,255,.05) !important; background-image:none !important; box-shadow:none !important; color:#fff !important; font-family:inherit !important; font-size:13.5px !important; font-weight:400 !important; line-height:1.5 !important; letter-spacing:normal !important; text-transform:none !important; outline:none !important; transition:border-color .15s, background .15s !important; } .trc-page .trsr-in:not(#_trcin):focus{ border-color:rgba(3,201,136,.6) !important; background:rgba(255,255,255,.07) !important; box-shadow:none !important; outline:none !important; } .trc-page .trsr-in:not(#_trcin):focus-visible{ outline:2px solid var(--c-green) !important; outline-offset:2px !important; } .trc-page .trsr-in:not(#_trcin)::placeholder{color:rgba(255,255,255,.3) !important;opacity:1 !important} .trc-page .trsr-in.is-bad:not(#_trcin){ border-color:rgba(240,153,123,.7) !important; background:rgba(240,153,123,.06) !important; } .trc-page .trsr-in.is-bad:not(#_trcin):focus{ border-color:var(--c-amber) !important; box-shadow:0 0 0 3px rgba(240,153,123,.16) !important; } /* The textarea keeps its own height and its grab handle. */ .trc-page .trc-ta:not(#_trcin){ resize:vertical !important; min-height:132px !important; font-size:14.5px !important; line-height:1.6 !important; } /* Chrome autofill paints its own yellow background and there is no property to turn it off. An inset shadow the size of the field is the standard way to cover it, and -webkit-text-fill-color is the only thing that reaches the text colour once autofill has claimed it. */ .trc-page .trsr-in:not(#_trcin):-webkit-autofill, .trc-page .trsr-in:not(#_trcin):-webkit-autofill:hover, .trc-page .trsr-in:not(#_trcin):-webkit-autofill:focus{ -webkit-text-fill-color:#fff !important; -webkit-box-shadow:0 0 0 60px #16273a inset !important; caret-color:#fff !important; } /* NOT appearance:none. A checkbox with its appearance removed and nothing drawn in its place is an invisible control. accent-color restyles the native one, which is what we want. */ .trc-page .trsr-check input:not(#_trcin){ -webkit-appearance:auto !important; appearance:auto !important; width:16px !important; height:16px !important; min-height:0 !important; margin:1px 0 0 !important; padding:0 !important; flex:none !important; accent-color:var(--c-green) !important; background:none !important; border:0 !important; box-shadow:none !important; cursor:pointer !important; } /* The white rule under "What is your message about?" was the theme's, not ours. Normalize-derived stylesheets give legend width:100% and some themes add a border under it, which is why it spanned the whole column. */ /* NO margin OR padding IN THESE TWO RULES, and that is not an oversight. .trh-root * already zeroes both, and it does so at 0,1,0, which is the same weight as .trc-fs and .trc-fld and .trc-lbl. Those come later in the file and so win, which is exactly how the spacing was designed to work. Repeating margin:0 here at 1,1,1 took that back: the category fieldset lost its 26px bottom margin, so the block that opens underneath it sat flush against the last card. Fight the theme for the things the reset does not cover, and nothing else. */ .trc-page fieldset:not(#_trcin){ border:0 !important; min-width:0 !important; background:none !important; box-shadow:none !important; } .trc-page legend:not(#_trcin){ display:block !important; float:none !important; width:auto !important; max-width:none !important; border:0 !important; background:none !important; font-size:13.5px !important; font-weight:600 !important; line-height:1.5 !important; letter-spacing:-.01em !important; color:var(--c-off) !important; text-transform:none !important; } /* The error summary list, for the same reason: themes style ul and li inside content, and a bulleted, indented error list is not what GDS asks for. */ .trc-page .trc-errsum-l:not(#_trcin){list-style:none !important;margin:0 !important;padding:0 !important} .trc-page .trc-errsum-l li:not(#_trcin){list-style:none !important;margin:0 0 6px !important;padding:0 !important} .trc-page .trc-errsum-l li:not(#_trcin)::before{content:none !important;display:none !important} /* ── LAST RULE IN THE FILE, deliberately ─────────────────────── Safari zooms the whole page whenever a focused field computes under 16px, and it does not zoom back out. Raising the field is the fix; a maximum-scale on the viewport also blocks anyone who zooms by choice and fails WCAG 1.4.4. It carries the same :not(#_trcin) as the hardening above so it is not outranked, and it sits at the END because equal specificity is settled by source order. Anything appended below this line will beat it. */ @media(max-width:768px){ .trc-page .trsr-in:not(#_trcin), .trc-page .trc-ta:not(#_trcin){font-size:16px !important} } /* ── DE CATEGORIEËN IN DE HERO ──────────────────────────────────────── Vijf chips uit het gedeelde CTA-systeem. Ze passen op deze breedte niet op één regel en dat is prima: twee rijen lezen als een keuzelijst. Gemeten kost de rij 112px (2 x 34 + 8 gap + 36 marge), en dat is het blok dat deze hero van 375 naar ongeveer 603 brengt. De rest van de winst zijn kleine dingen: de wachttijdregel, twee intro-regels erbij en een marge die hier krapper stond dan elders. */ .trc-hero-cats{display:flex !important;flex-wrap:wrap !important;gap:8px !important; margin-top:36px !important;max-width:600px !important} @media(max-width:599px){.trc-hero-cats{gap:6px !important;max-width:none !important}} /* ── WACHTTIJD ──────────────────────────────────────────────────────── Zelfde vorm als .trh-hero-status op road-signs, show-tell, test-routes en sinds vandaag help. */ .trh-hero-status{display:flex !important;align-items:center !important;gap:10px !important; margin-bottom:16px !important;font-size:13px !important;font-weight:500 !important; color:rgba(255,255,255,.62) !important} /* De illustratiekolom: de CSS hieronder verwachtte al een .trh-hero-vis, alleen stond het element niet in de template. Nu wel. */ .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} /* ── SPRINGDOELEN ───────────────────────────────────────────────────── Een ankersprong zet het doel tegen de bovenrand van de viewport en houdt geen rekening met de plakkende header eroverheen. Dit was de eerste van drie pogingen voor de chips. Die zijn inmiddels knoppen en rekenen hun eindpunt zelf uit in contact.js, dus ze leunen hier niet meer op. De regel blijft staan voor wat dat wél doet: de foutsamenvatting die op submit focus krijgt, het bedanktpaneel dat scrollIntoView doet, en elke gewone ankerlink op deze pagina. Op [id] en niet per anker, zoals pricing het al doet. */ .trc-page [id]{scroll-margin-top:calc(var(--hdr-total-h,56px) + 20px) !important} @media(min-width:769px){ .trc-page [id]{scroll-margin-top:calc(var(--hdr-total-h,72px) + 24px) !important} }