/* ========================================================================== Page signature elements — "Work Zone" v13 ========================================================================== One animated signature per page, in place of the old static detail drawings. Pure SVG + CSS; the only JS is tcp-sig.js, which adds `.play` when a signature scrolls into view (and runs the traffic-impact counters). Two gates, both fail-safe to the finished drawing: 1. prefers-reduced-motion — the whole motion block below is inside `no-preference`, so reduced-motion visitors get the static final frame. The base markup IS that frame; nothing is hidden by CSS. 2. html.sig-js — set by tcp-sig.js. The rewound start states only exist once the script that plays them forward has run, so a blocked or failed script leaves the drawing fully visible rather than blank. Motion verbs shared across the set: .d draw a stroke .f fade in .r rise + fade .p pop (cones) .t type (clip) .gx grow from left ========================================================================== */ /* The strip matches the content column, so the signature lines up with the section headings and cards above and below it. */ .drawing-strip { width: 100%; /* thank-you.html's is a column flex container, where `margin:0 auto` alone would shrink-to-fit */ max-width: var(--container, 1200px); margin: 0 auto; padding: 26px 24px 0; overflow: hidden; } .sig svg { width: 100%; height: auto; display: block; } .sig text { font-family: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Mobile: the drawing stays — it's cropped to its linework now, so it reads at phone width. Only the sub-10px mono callouts drop out; those were the "reads as noise" part that made v11 hide the whole strip. */ @media (max-width: 580px) { .drawing-strip { padding: 18px 20px 0; } .sig .lbl { display: none; } } @media (prefers-reduced-motion: no-preference) { /* ---------- Shared verbs ---------- */ html.sig-js .sig:not(.settled) .d { stroke-dasharray: 1; stroke-dashoffset: 1; } .sig.play .d { animation: sig-draw var(--t, .9s) var(--dl, 0s) cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes sig-draw { to { stroke-dashoffset: 0; } } html.sig-js .sig:not(.settled) .f { opacity: 0; } .sig.play .f { animation: sig-fade .8s var(--dl, 0s) ease forwards; } @keyframes sig-fade { to { opacity: 1; } } html.sig-js .sig:not(.settled) .r { opacity: 0; transform: translateY(8px); } .sig.play .r { animation: sig-rise .6s var(--dl, 0s) cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes sig-rise { to { opacity: 1; transform: translateY(0); } } html.sig-js .sig:not(.settled) .p { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: 50% 100%; } .sig.play .p { animation: sig-pop .5s var(--dl, 0s) cubic-bezier(.2, 1.35, .4, 1) forwards; } @keyframes sig-pop { to { opacity: 1; transform: scale(1); } } html.sig-js .sig:not(.settled) .t { clip-path: inset(-25% 100% -25% 0); } .sig.play .t { animation: sig-type .7s var(--dl, 0s) steps(14, end) forwards; } @keyframes sig-type { to { clip-path: inset(-25% 0% -25% 0); } } html.sig-js .sig:not(.settled) .gx { opacity: 0; transform: scaleX(0); transform-box: fill-box; transform-origin: left center; } .sig.play .gx { animation: sig-grow .7s var(--dl, 0s) cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes sig-grow { to { opacity: 1; transform: scaleX(1); } } /* Arrow-board lamp sequencer — 3-frame chevron, as fielded */ html.sig-js .sig:not(.settled) .la, html.sig-js .sig:not(.settled) .lb, html.sig-js .sig:not(.settled) .lc { opacity: .15; } .sig.play .la { animation: sig-lamp-a 1.3s var(--dl, 0s) infinite; } .sig.play .lb { animation: sig-lamp-b 1.3s var(--dl, 0s) infinite; } .sig.play .lc { animation: sig-lamp-c 1.3s var(--dl, 0s) infinite; } @keyframes sig-lamp-a { 0%, 74% { opacity: 1; } 75%, 100% { opacity: .15; } } @keyframes sig-lamp-b { 0%, 24% { opacity: .15; } 25%, 74% { opacity: 1; } 75%, 100% { opacity: .15; } } @keyframes sig-lamp-c { 0%, 49% { opacity: .15; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: .15; } } /* ---------- index.html + landing-tcp.html — centreline flow ---------- */ .sig.play .flow { animation: sig-flow 2.2s var(--dl, 0s) linear infinite; } @keyframes sig-flow { to { stroke-dashoffset: -20; } } /* ---------- services.html — PTCD lantern pulse ---------- */ .sig.play .ptcd-top { animation: sig-ptcd 2.2s var(--dl, 0s) infinite; } @keyframes sig-ptcd { 0%, 42% { opacity: 1; } 50%, 92% { opacity: .18; } 100% { opacity: 1; } } /* ---------- ctmp.html — TMA convoy walks positions 1 -> 2 -> 3 ---------- */ .sig.play .tma-conv { animation: sig-tma 10s var(--dl, 0s) cubic-bezier(.45, 0, .25, 1) infinite; } @keyframes sig-tma { 0% { transform: translateX(0); opacity: 1; } 6% { transform: translateX(0); } 21% { transform: translateX(160px); } 34% { transform: translateX(160px); } 49% { transform: translateX(320px); } 82% { transform: translateX(320px); opacity: 1; } 87% { transform: translateX(320px); opacity: 0; } 88% { transform: translateX(0); opacity: 0; } 95% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* ---------- swept-path-analysis.html — approach, sweep, hold, reset ---------- */ .sig.play .sw-all { animation: sig-sw-out 5.6s var(--dl, 0s) linear infinite; } @keyframes sig-sw-out { 0%, 80% { opacity: 1; } 85%, 96% { opacity: 0; } 100% { opacity: 1; } } .sig.play .sw-t { animation: sig-sw-move 5.6s var(--dl, 0s) cubic-bezier(.4, 0, .3, 1) infinite; } @keyframes sig-sw-move { 0% { transform: translateX(0); } 26%, 86% { transform: translateX(118px); } 87%, 100% { transform: translateX(0); } } .sig.play .sw-r { animation: sig-sw-turn 5.6s var(--dl, 0s) cubic-bezier(.45, 0, .3, 1) infinite; transform-origin: 318px 196px; } @keyframes sig-sw-turn { 0%, 26% { transform: rotate(0deg); } 74%, 86% { transform: rotate(90deg); } 87%, 100% { transform: rotate(0deg); } } html.sig-js .sig:not(.settled) .sw-arc { stroke-dasharray: 1; stroke-dashoffset: 1; } .sig.play .sw-arc { animation: sig-sw-arc 5.6s var(--dl, 0s) cubic-bezier(.45, 0, .3, 1) infinite; } @keyframes sig-sw-arc { 0%, 26% { stroke-dashoffset: 1; } 74%, 84% { stroke-dashoffset: 0; } 85%, 100% { stroke-dashoffset: 1; } } /* ---------- traffic-impact.html + ctmp.html — vehicle stream ---------- */ .sig.play .stream { animation: sig-stream 1.1s var(--dl, 0s) linear infinite; } @keyframes sig-stream { to { stroke-dashoffset: -13; } } /* ---------- car-park.html — one B85 reverses home ---------- */ html.sig-js .sig:not(.settled) .cp-car { opacity: 0; transform: translateY(112px); } .sig.play .cp-car { animation: sig-park 1s var(--dl, 0s) cubic-bezier(.45, 0, .25, 1) forwards; } @keyframes sig-park { 0% { opacity: 0; transform: translateY(112px); } 14% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } /* ---------- request-a-quote.html — bat flips STOP / SLOW ---------- */ .sig .batA, .sig .batB { transform-box: fill-box; transform-origin: 50% 50%; } html.sig-js .sig:not(.settled) .batB { opacity: 0; transform: scaleX(0); } .sig.play .batA { animation: sig-bat-a 7s var(--dl, 0s) ease-in-out infinite; } .sig.play .batB { animation: sig-bat-b 7s var(--dl, 0s) ease-in-out infinite; } @keyframes sig-bat-a { 0%, 44% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0); opacity: 1; } 50.1%, 93.9% { transform: scaleX(0); opacity: 0; } 94% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes sig-bat-b { 0%, 49.9% { transform: scaleX(0); opacity: 0; } 50% { transform: scaleX(0); opacity: 1; } 56% { transform: scaleX(1); opacity: 1; } 88% { transform: scaleX(1); opacity: 1; } 94% { transform: scaleX(0); opacity: 1; } 94.1%, 100% { transform: scaleX(0); opacity: 0; } } /* ---------- contact-traffic-planner.html — VMS frame rotation ---------- */ html.sig-js .sig:not(.settled) .vf1, html.sig-js .sig:not(.settled) .vf2, html.sig-js .sig:not(.settled) .vf3 { opacity: 0; } .sig.play .vf1 { animation: sig-vms-1 10.5s var(--dl, 0s) infinite; } .sig.play .vf2 { animation: sig-vms-2 10.5s var(--dl, 0s) infinite; } .sig.play .vf3 { animation: sig-vms-3 10.5s var(--dl, 0s) infinite; } @keyframes sig-vms-1 { 0% { opacity: 0; } 3%, 29% { opacity: 1; } 32%, 100% { opacity: 0; } } @keyframes sig-vms-2 { 0%, 33% { opacity: 0; } 36%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } } @keyframes sig-vms-3 { 0%, 66% { opacity: 0; } 69%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } } /* ---------- thank-you.html + traffic-guidance-scheme.html — demob / stamp ---------- */ .sig.play .gone { animation: sig-gone .55s var(--dl, 0s) ease-in forwards; } @keyframes sig-gone { to { opacity: 0; transform: translateY(12px); } } html.sig-js .sig:not(.settled) .stamp { opacity: 0; transform: scale(1.16); transform-box: fill-box; transform-origin: 50% 50%; } .sig.play .stamp { animation: sig-stamp .55s var(--dl, 0s) cubic-bezier(.2, .9, .3, 1.15) forwards; } @keyframes sig-stamp { 55% { opacity: 1; } to { opacity: 1; transform: scale(1); } } /* ---------- about-traffic-planner.html — prism blink ---------- */ .sig.play .blink { animation: sig-blink 2.8s var(--dl, 0s) infinite; } @keyframes sig-blink { 0%, 86% { opacity: .3; } 88%, 95% { opacity: 1; } 100% { opacity: .3; } } /* ---------- faq.html — message plates rotate through the frame ---------- */ html.sig-js .sig:not(.settled) .mq1, html.sig-js .sig:not(.settled) .ma1, html.sig-js .sig:not(.settled) .mq2, html.sig-js .sig:not(.settled) .ma2 { opacity: 0; transform: translateX(230px); } .sig.play .mq1 { animation: sig-mms-q1 9.5s var(--dl, 0s) cubic-bezier(.4, 0, .25, 1) infinite; } .sig.play .ma1 { animation: sig-mms-a1 9.5s var(--dl, 0s) cubic-bezier(.4, 0, .25, 1) infinite; } .sig.play .mq2 { animation: sig-mms-q2 9.5s var(--dl, 0s) cubic-bezier(.4, 0, .25, 1) infinite; } .sig.play .ma2 { animation: sig-mms-a2 9.5s var(--dl, 0s) cubic-bezier(.4, 0, .25, 1) infinite; } @keyframes sig-mms-q1 { 0% { transform: translateX(230px); opacity: 0; } 2% { opacity: 1; } 7% { transform: translateX(0); } 42% { transform: translateX(0); opacity: 1; } 47%, 100% { transform: translateX(-230px); opacity: 0; } } @keyframes sig-mms-a1 { 0%, 8% { transform: translateX(230px); opacity: 0; } 10% { opacity: 1; } 15% { transform: translateX(0); } 42% { transform: translateX(0); opacity: 1; } 47%, 100% { transform: translateX(-230px); opacity: 0; } } @keyframes sig-mms-q2 { 0%, 50% { transform: translateX(230px); opacity: 0; } 52% { opacity: 1; } 57% { transform: translateX(0); } 90% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(-230px); opacity: 0; } } @keyframes sig-mms-a2 { 0%, 58% { transform: translateX(230px); opacity: 0; } 60% { opacity: 1; } 65% { transform: translateX(0); } 90% { transform: translateX(0); opacity: 1; } 95%, 100% { transform: translateX(-230px); opacity: 0; } } /* ---------- privacy.html — barrier stripes slide home ---------- */ html.sig-js .sig:not(.settled) .bars { opacity: 0; transform: translateX(-46px); } .sig.play .bars { animation: sig-bars .9s var(--dl, 0s) cubic-bezier(.3, .7, .2, 1) forwards; } @keyframes sig-bars { to { opacity: 1; transform: translateX(0); } } } /* Ambient loops don't run forever. tcp-sig.js adds .settled after three cycles of the signature's longest loop; animations stop and the base markup — the finished drawing — is what remains. Gives motion-sensitive visitors who haven't set a system preference a page that comes to rest. */ @media (prefers-reduced-motion: no-preference) { .sig.settled, .sig.settled * { animation: none !important; } }