/* ========================================================================== Signal Transportation — design system v3 (LIGHT) All colour, type and spacing tokens live here and nowhere else. ========================================================================== */ /* Colours live in css/tokens.css, generated from THEME in _src/content.py. Everything below is layout, type and spacing only. */ :root{ /* type */ --dis:'Bebas Neue','Arial Narrow',Impact,sans-serif; --body:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif; --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace; /* geometry */ --wrap:1280px; --gut:24px; --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --sec:clamp(64px,8vw,112px); /* effects */ --shadow:0 1px 2px rgba(10,34,51,.05),0 8px 24px -12px rgba(10,34,51,.15); --shadow-lg:0 24px 60px -26px rgba(10,34,51,.33); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;background:var(--bg);color:var(--txt); font:400 17px/1.62 var(--body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* NOT overflow-x:hidden. That turns into a scroll container, which makes position:fixed elements (the chat bubble) drift with the page on phones. overflow-x:clip hides the same overflow WITHOUT doing that. */ overflow-x:clip; } html{overflow-x:clip} img,svg,video{max-width:100%;display:block} img{height:auto} a{color:var(--bl);text-underline-offset:3px} h1,h2{font-family:var(--dis);font-weight:400;line-height:.92;letter-spacing:.005em; text-transform:uppercase;margin:0 0 .4em;color:var(--txt)} h3,h4{font-family:var(--body);font-weight:800;line-height:1.22;letter-spacing:-.015em;margin:0 0 .5em;color:var(--txt)} h1{font-size:clamp(3.1rem,7vw,6rem)} h2{font-size:clamp(2.3rem,4.4vw,3.7rem)} h3{font-size:1.3rem;line-height:1.22;letter-spacing:-.012em} p{margin:0 0 1.05em;max-width:66ch} ul,ol{margin:0 0 1.05em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%} .sec{padding:var(--sec) 0;position:relative} .sec--light{background:var(--bg-1)} .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--txt-2);line-height:1.58} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--bl);color:#fff;padding:12px 20px;font-weight:600;border-radius:0 0 var(--r-sm) 0} .skip:focus{left:0} :focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:2px} /* eyebrow -------------------------------------------------------------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font:600 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase; color:var(--cy);margin:0 0 18px; } .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.65} /* live dot -------------------------------------------------------------- */ .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;position:relative} .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);opacity:.5;animation:ping 2.4s ease-out infinite} @keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}} /* ========================================================================== Buttons ========================================================================== */ .btn{ font-weight:700; display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:52px;padding:0 26px;border-radius:var(--r-sm); font:600 1rem/1 var(--body);letter-spacing:-.005em; text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .btn svg{flex:none;transition:transform .18s ease} .btn:hover svg{transform:translateX(3px)} .btn--pri{background:var(--am);color:#22180A;font-weight:800;box-shadow:0 8px 22px -10px rgba(232,160,32,.9)} .btn--pri:hover{background:#F5B03A;transform:translateY(-1px)} .btn--cy{background:var(--bl);color:#fff;box-shadow:0 8px 22px -10px rgba(var(--bl-rgb),.8)} .btn--cy:hover{background:var(--bl-hover);transform:translateY(-1px)} .btn--ghost{border-color:var(--line-2);color:var(--txt);background:#fff} .btn--ghost:hover{background:var(--bg-3);border-color:var(--txt-3)} .btn--ink{border-color:var(--txt);color:var(--txt);background:transparent} .btn--ink:hover{background:var(--txt);color:#fff} .btn--sm{min-height:44px;padding:0 18px;font-size:.94rem} .btn--wide{width:100%} /* buttons sitting on a dark panel */ .on-dark .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)} .on-dark .btn--ghost:hover{background:#fff;color:var(--txt)} /* ========================================================================== Top bar + header (light) ========================================================================== */ .topbar{background:var(--bg-1);border-bottom:1px solid var(--line);font-size:.86rem;color:var(--txt-2)} .topbar .wrap{display:flex;align-items:center;gap:22px;min-height:38px;flex-wrap:wrap} .topbar a{color:var(--txt-2);text-decoration:none} .topbar a:hover{color:var(--bl)} .topbar__live{display:inline-flex;align-items:center;gap:8px;color:var(--txt-2);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600} .topbar__live.is-closed .dot{background:var(--am-ink)} .topbar__live.is-closed .dot::after{border-color:var(--am-ink);animation:none;opacity:0} .topbar__r{margin-left:auto;display:flex;gap:20px;align-items:center} .topbar__r a[href^="tel:"]{font-weight:600;color:var(--txt)} .topbar__r a[href^="tel:"]:hover{color:var(--bl)} /* Solid, not frosted: backdrop-filter costs 15-30% FPS on real phones and Core Web Vitals feed Google ranking. */ .hdr{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .25s ease} .hdr.is-stuck{background:rgba(255,255,255,.97);box-shadow:0 8px 28px -20px rgba(11,29,48,.45)} .hdr__in{display:flex;align-items:center;gap:16px;min-height:74px} .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none} .brand__mark{height:42px;width:auto;flex:none} .brand__wm{line-height:.92} .brand__wm b{display:block;font:700 22px/1 var(--dis);letter-spacing:-.022em;color:var(--txt)} .brand__wm i{display:block;font:500 8.2px/1 var(--body);letter-spacing:.3em;font-style:normal;color:var(--txt-3);margin-top:4px} .nav{display:flex;align-items:center;gap:2px;margin-left:12px} /* NOT position:relative - the mega panel must size against .hdr, not the 58px-wide nav item, or its contents spill across the page. */ .nav__item{position:static} .nav__link,.nav__btn{ display:inline-flex;align-items:center;gap:6px;padding:9px 12px;white-space:nowrap;border-radius:var(--r-xs); font:500 .95rem/1 var(--body);color:var(--txt-2);text-decoration:none; background:none;border:0;cursor:pointer;font-family:var(--body); transition:color .15s,background .15s; } .nav__link:hover,.nav__btn:hover,.nav__btn[aria-expanded="true"]{color:var(--txt);background:var(--bg-3)} .nav__link[aria-current="page"]{color:var(--bl);background:rgba(var(--bl-rgb),.09);box-shadow:inset 0 0 0 1px rgba(var(--bl-rgb),.2)} .nav__btn svg{transition:transform .2s} .nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)} .nav > .btn{display:none} .mega{ position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%); width:min(calc(100vw - (var(--gut) * 2)), var(--wrap)); background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 30px 70px -28px rgba(10,34,51,.45);padding:22px;display:none;z-index:95; } .mega.is-open{display:block;opacity:1;animation:megaIn .18s ease} @keyframes megaIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)} to{opacity:1;transform:translateX(-50%)}} .mega__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .mega__grid--4{grid-template-columns:repeat(4,1fr)} .mega a{display:flex;gap:13px;padding:14px;border-radius:var(--r);text-decoration:none;color:var(--txt);transition:background .15s} .mega a:hover,.mega a[aria-current="page"]{background:var(--bg-1)} .mega__ico{width:36px;height:36px;border-radius:var(--r-xs);background:rgba(var(--bl-rgb),.09);color:var(--bl);display:grid;place-items:center;flex:none} .mega strong{display:block;font-weight:600;font-size:.97rem;color:var(--txt);margin-bottom:2px} .mega span{display:block;font-size:.85rem;color:var(--txt-3);line-height:1.4} .mega__foot{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.9rem;color:var(--txt-3)} .hdr__cta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none} .hdr__login{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);text-decoration:none;font:600 .92rem/1 var(--body);color:var(--txt);background:var(--bg);white-space:nowrap;transition:border-color .16s,background .16s,color .16s} .hdr__login:hover{border-color:var(--bl);color:var(--bl);background:var(--bg-3)} .hdr__login svg{flex:none} .nav > .hdr__login{display:none} .hdr__tel{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1.15} .hdr__tel span{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)} .hdr__tel b{font:600 .98rem/1.25 var(--body);color:var(--txt)} .burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:#fff;cursor:pointer;padding:0} .burger span{display:block;width:19px;height:2px;background:var(--txt);margin:4.5px auto;border-radius:2px;transition:transform .2s,opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ========================================================================== Hero — light, photo on the right ========================================================================== */ .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--hero-tint) 0%,var(--bg) 62%);isolation:isolate} .hero__grid{ position:relative;display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:center; padding:clamp(48px,6vw,88px) var(--gut) clamp(52px,6vw,84px); } .hero__grid > *,.tech__grid > *,.split > *,.form-wrap > *,.phero__grid > *,.shead > *{min-width:0} .hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 45%;opacity:.5} .hero__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(96deg,var(--hero-tint) 0%,rgba(var(--hero-tint-rgb),.97) 34%,rgba(var(--hero-tint-rgb),.72) 52%,rgba(var(--hero-tint-rgb),.25) 72%,rgba(var(--hero-tint-rgb),.1) 100%), linear-gradient(0deg,var(--bg) 1%,rgba(255,255,255,0) 40%); } .hero__grid-lines{position:absolute;inset:0;z-index:-1;opacity:.85;pointer-events:none; background-image:linear-gradient(rgba(11,29,48,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,29,48,.05) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(720px 400px at 20% 40%,#000 8%,transparent 76%); mask-image:radial-gradient(720px 400px at 20% 40%,#000 8%,transparent 76%); } .hero h1{margin-bottom:.34em} .hero h1 em{font-style:normal;color:var(--bl)} .hero .lead{max-width:54ch;margin-bottom:30px} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px} .hero__trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)} .rating{display:flex;align-items:center;gap:11px} .rating b{font:700 2rem/1 var(--dis);color:var(--txt)} .stars{color:var(--am);letter-spacing:1.5px;font-size:.95rem} .rating span{display:block;font-size:.84rem;color:var(--txt-3)} .rating a{color:var(--txt-2);text-decoration:none;font-size:.84rem} .rating a:hover{color:var(--bl);text-decoration:underline} .hero__badges{display:flex;gap:8px;flex-wrap:wrap} .badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);font:500 .82rem/1 var(--body);color:var(--txt-2);background:#fff} .ribbon{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;pointer-events:none;opacity:.85} .ribbon path{fill:none;stroke-linecap:round} .ribbon .r-base{stroke:rgba(11,29,48,.1);stroke-width:2} .ribbon .r-run{stroke:var(--bl-bright);stroke-width:2.6;stroke-dasharray:14 320;animation:runner 7s linear infinite} @keyframes runner{to{stroke-dashoffset:-1336}} /* ========================================================================== Lane checker — white card ========================================================================== */ .console{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden} .console__top{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--bg-1)} .console__top b{font:600 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--txt-2)} .console__body{padding:22px} .console h2{font-size:1.5rem;margin-bottom:6px} .console > .console__body > p{color:var(--txt-3);font-size:.93rem;margin-bottom:18px} .route-io{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:6px} .route-io__from{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line);font-weight:600} .route-io__pin{width:10px;height:10px;border-radius:50%;background:var(--am);box-shadow:0 0 0 4px rgba(255,176,32,.22);flex:none} .route-io__lbl{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);display:block;margin-bottom:7px} .route-io select{ width:100%;min-height:52px;padding:0 42px 0 15px;border-radius:var(--r); font:600 1.02rem var(--body);color:var(--txt);background:#fff;border:1.5px solid var(--line-2); appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2344607A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .route-io select:focus{border-color:var(--bl);outline:none;box-shadow:0 0 0 3px rgba(var(--bl-rgb),.18)} .readout{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);min-height:150px} .readout__eta{font:700 2.5rem/1 var(--dis);color:var(--bl);letter-spacing:-.03em;margin-bottom:4px} .readout__meta{color:var(--txt-2);font-size:.9rem;margin:0 0 16px;line-height:1.5} .readout__row{display:flex;gap:18px;margin:0 0 16px;flex-wrap:wrap} .readout__row div{font-size:.82rem;color:var(--txt-3)} .readout__row b{display:block;font:600 .95rem var(--mono);color:var(--txt);margin-top:2px} .readout__links{display:flex;gap:9px;flex-wrap:wrap} /* ========================================================================== Stat strip ========================================================================== */ .stats{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)} .stats li{padding:34px 26px;border-right:1px solid var(--line)} .stats li:last-child{border-right:0} .stats b{display:block;font:700 clamp(2.1rem,3.4vw,2.9rem)/1 var(--dis);color:var(--txt);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stats b em{font-style:normal;color:var(--bl)} .stats span{display:block;font:600 10.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);margin-top:9px} /* ========================================================================== Section head ========================================================================== */ .shead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px} .shead > div{max-width:62ch} .shead h2{margin-bottom:.32em} .shead p{margin:0} /* ========================================================================== Bento cards ========================================================================== */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .card{ position:relative;display:flex;flex-direction:column;padding:28px;border-radius:var(--r-lg); text-decoration:none;color:var(--txt);background:#fff;border:1px solid var(--line); overflow:hidden;box-shadow:var(--shadow); transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease; } .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .22s ease; background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(var(--bl-rgb),.06),transparent 70%)} .card:hover{border-color:var(--bl);transform:translateY(-3px);box-shadow:0 18px 44px -22px rgba(var(--bl-rgb),.5)} .card:hover::after{opacity:1} .card--2{grid-column:span 2} .card--3{grid-column:span 3} .card--4{grid-column:span 4} .card__ico{width:46px;height:46px;border-radius:var(--r-sm);background:rgba(var(--bl-rgb),.08);color:var(--bl);display:grid;place-items:center;margin-bottom:20px;flex:none;border:1px solid rgba(var(--bl-rgb),.16)} .card h3{margin-bottom:8px} .card p{color:var(--txt-2);font-size:.96rem;margin:0 0 20px;flex:1} .card__go{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--body);color:var(--bl);margin-top:auto} .card__go svg{transition:transform .22s} .card:hover .card__go svg{transform:translateX(4px)} .card__tag{position:absolute;top:22px;right:22px;font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--cy);border:1px solid var(--line-2);padding:5px 9px;border-radius:999px;background:var(--bg-1)} /* ========================================================================== Network map — light ========================================================================== */ .netmap{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:thin} .map{width:100%;height:auto;min-width:820px;display:block} .map .border-line{stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:5 9} .map .border-label{fill:var(--txt-3);font:600 12px var(--mono);letter-spacing:.14em} .map .route{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.3;transition:opacity .3s,stroke-width .3s} .map .route--x{stroke:var(--bl-bright)} .map .route--d{stroke:var(--am)} .map .route.is-on{opacity:1;stroke-width:9} .map .flow{fill:none;stroke:#fff;stroke-width:2.6;stroke-dasharray:2 15;stroke-linecap:round;opacity:0} .map .flow.is-on{opacity:.95;animation:flow 1.1s linear infinite} @keyframes flow{to{stroke-dashoffset:-17}} .map .stop{fill:#fff;stroke:var(--txt);stroke-width:2.6;transition:fill .25s,stroke .25s} .map a:hover .stop,.map a:focus .stop{fill:var(--bl);stroke:var(--bl)} .map .hub{fill:var(--am);stroke:var(--txt);stroke-width:3} .map .hub-ring{fill:none;stroke:var(--am);stroke-width:1.4;opacity:.5} .map .city{fill:var(--txt);font:600 17px var(--body)} .map .when{fill:var(--txt-3);font:500 12.5px var(--mono)} .map .hub-label{fill:var(--txt);font:700 23px var(--dis)} .map a{cursor:pointer} .map a:hover .city,.map a:focus .city{fill:var(--bl)} .map-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px;color:var(--txt-2);font-size:.89rem} .map-legend i{display:inline-block;width:24px;height:6px;border-radius:3px;vertical-align:middle;margin-right:9px} .map-swipe{display:none;color:var(--txt-3);font-size:.86rem;margin:0 0 12px} /* ========================================================================== Technology band — light, with one dark "screen" ========================================================================== */ .tech{background:#fff} .tech__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .tech__list{list-style:none;margin:30px 0 30px;padding:0;display:grid;gap:2px} .tech__list li{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)} .tech__list li:first-child{border-top:1px solid var(--line)} .tech__list svg{flex:none;color:var(--bl);margin-top:3px} .tech__list b{display:block;color:var(--txt);font-weight:600;margin-bottom:3px} .tech__list span{color:var(--txt-2);font-size:.94rem} /* the dispatch board stays dark on purpose — it is a picture of a screen */ .panel{background:linear-gradient(168deg,var(--ink-bg-2),var(--ink-bg));border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .panel__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)} .panel__bar b{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A6BCD1} .panel__bar .dot{background:#34D399} .panel__bar .dot::after{border-color:#34D399} .panel__body{padding:8px 0} .load{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)} .load:last-child{border-bottom:0} .load__id{font:500 11.5px/1 var(--mono);color:#8FA8C0;letter-spacing:.04em} .load__route{font-weight:600;font-size:.95rem;color:#fff} .load__route span{display:block;font:500 11px var(--mono);color:#8FA8C0;margin-top:4px;letter-spacing:.03em} .pill{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;white-space:nowrap} .pill--ok{background:rgba(52,211,153,.15);color:#4ADE9E;box-shadow:inset 0 0 0 1px rgba(52,211,153,.3)} .pill--go{background:rgba(52,211,153,.15);color:#7BE0A4;box-shadow:inset 0 0 0 1px rgba(52,211,153,.3)} .pill--wait{background:rgba(255,176,32,.15);color:#FFC24D;box-shadow:inset 0 0 0 1px rgba(255,176,32,.3)} /* ========================================================================== Showcase — photo + reasons ========================================================================== */ .showcase{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .showcase__photo{position:relative;min-height:420px} .showcase__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .showcase__body{padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px)} .showcase__list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px} .showcase__list li{border-top:2px solid var(--bl);padding-top:15px} .showcase__list h3{font-size:1.16rem;margin-bottom:7px} .showcase__list p{margin:0;color:var(--txt-2);font-size:.94rem} /* ========================================================================== Feature grid / steps ========================================================================== */ .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .feats > div{background:#fff;padding:30px 26px} .feats h3{margin-bottom:9px;font-size:1.16rem} .feats p{color:var(--txt-2);margin:0;font-size:.94rem} .feats__n{font:600 10.5px/1 var(--mono);color:var(--cy);letter-spacing:.14em;display:block;margin-bottom:16px} .sec--light .feats > div{background:#fff} .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s} .steps li{counter-increment:s;position:relative;padding-top:30px;border-top:2px solid var(--line-2)} .steps li::before{ content:"0" counter(s);position:absolute;top:-1px;left:0; font:600 11px/1 var(--mono);color:var(--cy);letter-spacing:.14em; background:var(--bg-1);padding-right:12px;transform:translateY(-50%); } .sec:not(.sec--light) .steps li::before{background:var(--bg)} .steps h3{font-size:1.16rem;margin-bottom:8px} .steps p{color:var(--txt-2);margin:0;font-size:.94rem} /* ========================================================================== Reviews ========================================================================== */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .rev{margin:0;padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)} .rev blockquote{margin:14px 0 20px;font-size:1.03rem;line-height:1.55;color:var(--txt);quotes:none} .rev figcaption{font-weight:700;color:var(--txt);font-size:.95rem} .rev figcaption span{display:block;font-weight:400;color:var(--txt-3);font-size:.83rem;margin-top:3px;font-family:var(--mono)} .gscore{display:flex;align-items:center;gap:14px} .gscore b{font:700 3.1rem/1 var(--dis);color:var(--txt);letter-spacing:-.03em} /* ========================================================================== Service areas ========================================================================== */ .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .area{ display:flex;flex-direction:column;gap:5px;padding:20px 22px;border-radius:var(--r); background:#fff;border:1px solid var(--line);text-decoration:none; transition:border-color .2s,transform .2s,box-shadow .2s; } .area:hover{border-color:var(--bl);transform:translateY(-2px);box-shadow:var(--shadow)} .area b{color:var(--txt);font-weight:600;font-size:1.02rem} .area span{color:var(--txt-3);font-size:.84rem;font-family:var(--mono)} /* ========================================================================== FAQ ========================================================================== */ .faq{max-width:900px} .faq details{border-bottom:1px solid var(--line)} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;position:relative;padding:24px 52px 24px 0;font:600 1.08rem/1.45 var(--body);color:var(--txt)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:8px;top:30px;width:11px;height:11px;border-right:2px solid var(--bl);border-bottom:2px solid var(--bl);transform:rotate(45deg);transition:transform .22s} .faq details[open] summary::after{transform:rotate(-135deg);top:34px} .faq details > p{color:var(--txt-2);margin:0 0 24px;max-width:78ch} .faq summary:hover{color:var(--bl)} /* ========================================================================== CTA band — the one strong colour block ========================================================================== */ .cta{position:relative;overflow:hidden;background:linear-gradient(112deg,var(--cta-a) 0%,var(--cta-b) 52%,var(--cta-c) 100%);color:#fff} .cta::before{content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(620px 300px at 80% 50%,#000,transparent 75%); mask-image:radial-gradient(620px 300px at 80% 50%,#000,transparent 75%)} .cta .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;padding-top:clamp(50px,6vw,74px);padding-bottom:clamp(50px,6vw,74px)} .cta h2{margin-bottom:8px;color:#fff} .cta p{color:rgba(255,255,255,.86);margin:0;font-size:1.06rem} .cta__actions{display:flex;gap:12px;flex-wrap:wrap} .cta .btn--ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08)} .cta .btn--ghost:hover{background:#fff;color:var(--txt)} /* ========================================================================== Footer — light ========================================================================== */ .foot{background:var(--bg-1);border-top:1px solid var(--line);padding:clamp(52px,6vw,80px) 0 26px;font-size:.94rem;color:var(--txt-2)} .foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px} .foot h3{color:var(--txt);font:700 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:11px} .foot a{color:var(--txt-2);text-decoration:none;transition:color .15s} .foot a:hover{color:var(--bl);text-decoration:underline} .foot .brand{margin-bottom:20px} .foot address{font-style:normal;line-height:1.85;color:var(--txt-2)} .foot address b{display:block;color:var(--txt);margin-bottom:6px;font-weight:700} .foot__tagline{margin:18px 0 0;font:600 .9rem/1.4 var(--body);color:var(--bl);letter-spacing:.01em} .foot__hours{display:inline-block;margin-top:8px;color:var(--txt-3);font-size:.88rem} .foot__nap{margin-top:18px;font-family:var(--mono);font-size:.78rem;color:var(--txt-3);letter-spacing:.02em;line-height:1.7} .foot__bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--txt-3)} .foot__bottom nav{display:flex;gap:18px;flex-wrap:wrap} /* ========================================================================== Inner page hero + prose ========================================================================== */ .phero{position:relative;overflow:hidden;padding:40px 0 clamp(46px,5vw,70px); background:linear-gradient(180deg,var(--hero-tint) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)} .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:linear-gradient(90deg,var(--cy) 0 30%,var(--bl-bright) 30% 62%,var(--am) 62%)} .phero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center} .phero__grid--solo{grid-template-columns:1fr;max-width:72ch} .phero h1{font-size:clamp(2.2rem,4.4vw,3.7rem)} .phero .lead{margin-bottom:26px} .phero img{border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line);box-shadow:var(--shadow)} .phero__actions{display:flex;flex-wrap:wrap;gap:12px} .crumbs{font-size:.85rem;margin-bottom:22px} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--txt-3)} .crumbs li+li::before{content:"/";margin-right:7px;color:var(--txt-3);opacity:.7} .crumbs a{color:var(--txt-2);text-decoration:none} .crumbs a:hover{color:var(--bl);text-decoration:underline} .crumbs [aria-current]{color:var(--txt-3)} .split{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:start} .prose h2{margin-top:0} .prose > p{color:var(--txt-2)} .prose > h2:not(:first-child){margin-top:2em} .prose > h3{margin-top:1.7em} .prose ul{padding-left:1.15em;color:var(--txt-2)} .prose li{margin-bottom:.55em} .prose strong{color:var(--txt);font-weight:700} .aside-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;position:sticky;top:96px;box-shadow:var(--shadow)} .aside-box h2{font-size:1.4rem;margin-bottom:16px} .checklist{list-style:none;margin:0;padding:0} .checklist li{position:relative;padding:13px 0 13px 32px;border-bottom:1px solid var(--line);color:var(--txt-2);font-size:.95rem} .checklist li:last-child{border-bottom:0;padding-bottom:0} .checklist li::before{content:"";position:absolute;left:0;top:17px;width:18px;height:18px;border-radius:50%;background:rgba(var(--bl-rgb),.1);border:1px solid rgba(var(--bl-rgb),.3)} .checklist li::after{content:"";position:absolute;left:5.6px;top:22px;width:7px;height:4px;border-left:2px solid var(--bl);border-bottom:2px solid var(--bl);transform:rotate(-45deg)} .spec{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 28px 20px;position:sticky;top:96px;box-shadow:var(--shadow)} .spec h2{font-size:1.32rem;margin:24px 0 6px} .spec dl{margin:0} .spec div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)} .spec dt{font:600 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)} .spec dd{margin:0;font-weight:500;color:var(--txt);font-size:.94rem} .spec dd.hot{color:var(--bl);font:700 1.45rem/1.15 var(--dis);letter-spacing:-.02em} .cities{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:18px 0 0;padding:0} .cities li{border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:500;color:var(--txt-2);background:var(--bg-1);border:1px solid var(--line)} .related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px} .related a{display:block;padding:24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:1.04rem;color:var(--txt);transition:border-color .2s,transform .2s,box-shadow .2s} .related a span{display:block;font-weight:400;color:var(--txt-3);font-size:.88rem;margin-top:5px} .related a:hover{border-color:var(--bl);transform:translateY(-2px);box-shadow:var(--shadow)} .coverage{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px} .coverage > div{padding:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)} .coverage b{display:block;color:var(--txt);font-size:1.02rem;margin-bottom:3px} .coverage span{color:var(--txt-3);font-size:.85rem;font-family:var(--mono)} /* ========================================================================== Forms ========================================================================== */ .form-wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:start} .form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)} .form fieldset{border:0;margin:0 0 32px;padding:0} .form fieldset:last-of-type{margin-bottom:24px} .form legend{font:700 1.35rem/1.2 var(--dis);color:var(--txt);margin-bottom:16px;padding:0;letter-spacing:-.018em} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form__row--3{grid-template-columns:repeat(3,1fr)} .form-note{color:var(--txt-3);font-size:.88rem;margin-bottom:22px} .field{margin-bottom:18px} .field label,.field .label{display:block;font:600 .9rem/1.4 var(--body);margin-bottom:7px;color:var(--txt)} .form .field legend.label{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--txt);margin-bottom:9px} .req{color:var(--hot)} .field input,.field select,.field textarea{ width:100%;min-height:52px;padding:13px 15px; font:400 1rem var(--body);color:var(--txt);background:#fff; border:1.5px solid var(--line-2);border-radius:var(--r); transition:border-color .16s,box-shadow .16s; } .field input::placeholder,.field textarea::placeholder{color:var(--txt-3)} .field select{appearance:none;cursor:pointer;padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2344607A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center} .field textarea{min-height:132px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bl);outline:none;box-shadow:0 0 0 3px rgba(var(--bl-rgb),.18)} .field .hint{display:block;font-size:.84rem;color:var(--txt-3);margin-top:6px} .field--inline{display:flex;gap:9px} .field--inline select{width:auto;min-width:96px} .choices{display:flex;flex-wrap:wrap;gap:10px 22px} .choices label{display:flex;align-items:center;gap:10px;font-weight:400;min-height:44px;cursor:pointer;color:var(--txt-2)} .choices input{width:19px;height:19px;accent-color:var(--bl);min-height:0} .field [aria-invalid="true"]{border-color:var(--hot);box-shadow:0 0 0 3px rgba(192,38,30,.14)} .error{display:none;color:var(--hot);font-size:.85rem;margin-top:6px} .error.is-shown{display:block} .form__status{font-weight:600;color:var(--hot);min-height:1px;margin-bottom:12px} .form__success{display:none;background:#EAF7F0;border:1px solid #9AD3B5;border-radius:var(--r-lg);padding:34px} .form__success.is-shown{display:block} .form__success h2{color:var(--ok)} .hp{position:absolute;left:-9999px} .contact-list{list-style:none;margin:0;padding:0} .contact-list li{padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--txt-2)} .contact-list li:last-child{border-bottom:0;padding-bottom:0} .contact-list b{display:block;color:var(--txt);font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px} .contact-list a{color:var(--bl);text-decoration:none} .contact-list a:hover{text-decoration:underline} .map-embed{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow)} .map-embed iframe{display:block;width:100%;height:290px;border:0} /* ========================================================================== Scroll reveal ========================================================================== */ /* Fail-safe: content is VISIBLE by default. We only hide it to animate when the flag proves JavaScript is running. If the script fails, is blocked, or the observer misses, the page still shows everything. */ .rv{opacity:1;transform:none} .js .rv{opacity:0;transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)} .js .rv.is-in{opacity:1;transform:none} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1460px){ .hdr__tel{display:none} } @media (max-width:1180px){ .hdr__login span,.hdr__login{font-size:.88rem} .nav__link,.nav__btn{padding:9px 9px} .nav__link,.nav__btn{padding:9px 10px;font-size:.92rem} .bento{grid-template-columns:repeat(2,1fr)} .card--2,.card--3,.card--4{grid-column:span 1} .areas{grid-template-columns:repeat(3,1fr)} } @media (max-width:1000px){ :root{--gut:20px} .burger{display:block} .nav{ display:none;position:absolute;top:100%;left:0;right:0;background:#fff; border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;margin:0; padding:10px var(--gut) 26px;max-height:calc(100dvh - 74px);overflow:auto; box-shadow:0 26px 50px -22px rgba(11,29,48,.4); } .nav.is-open{display:flex} .nav__link,.nav__btn{width:100%;justify-content:space-between;padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:1.02rem} .mega{position:static;transform:none;width:auto;display:none;box-shadow:none;border:0;border-radius:0;padding:6px 0 14px;background:transparent} .mega.is-open{display:block;animation:none;transform:none} .mega__grid,.mega__grid--4{grid-template-columns:1fr;gap:0} .mega a{padding:13px 10px} .mega__foot{display:none} .nav > .btn{display:inline-flex;margin-top:18px} .hdr__cta .btn,.hdr__cta .hdr__login{display:none} /* Hide the BOX, not just its contents. It is empty at this width but it still sits in the flex row carrying margin-left:auto - and .burger has margin-left:auto too. Two auto margins split the free space between them, which left the menu button stranded ~34px short of the right gutter instead of lining up with the logo on the left. */ .hdr__cta{display:none} /* The burger BUTTON sat at the 16px gutter, but the three bars are centred inside a 46px box, so what the eye actually sees sat 30px in while the logo started at 16px. Measured off a real screenshot, not guessed. Pull the box out by half the difference so the BARS line up with the logo, and drop the faint border that made it read as a floating chip. The hit area stays 46px and now reaches the screen edge, which is easier to hit, not harder. */ /* Left as-is deliberately. Measured off a screenshot: the logo's visible ink starts at x=28 and the burger's bars end 30px from the right edge - already optically balanced within 2px. Pulling the icon out to the 16px box gutter made the bars land at 17px against the logo's 28px, which reads MORE lopsided, not less. The box gutter is not the thing the eye measures; the ink is. */ .nav > .hdr__login{display:inline-flex;justify-content:center;margin-top:10px} .hero__grid,.tech__grid,.phero__grid,.split,.form-wrap,.showcase{grid-template-columns:1fr;gap:38px} .showcase{gap:0} .showcase__photo{min-height:300px} .showcase__list{grid-template-columns:1fr} .phero__grid--solo{max-width:none} .stats ul{grid-template-columns:1fr 1fr} .stats li{border-bottom:1px solid var(--line)} .stats li:nth-child(2n){border-right:0} .stats li:nth-last-child(-n+2){border-bottom:0} .feats{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr;gap:32px} .rev-grid{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr 1fr;gap:36px} .aside-box,.spec{position:static} .related,.coverage{grid-template-columns:1fr 1fr} .map{min-width:900px} .map-swipe{display:block} .tech__grid > .panel{order:-1} } @media (max-width:620px){ :root{--gut:16px} .brand__mark{height:36px} body{font-size:16px} .topbar__r{display:none} .stats ul{grid-template-columns:1fr} .stats li{border-right:0;padding:24px 0} .stats li:last-child{border-bottom:0} .bento,.feats,.steps,.areas,.related,.coverage{grid-template-columns:1fr} .feats{border-radius:var(--r)} .form{padding:22px} .form__row,.form__row--3{grid-template-columns:1fr;gap:0} .spec div{grid-template-columns:1fr;gap:4px} .hero__actions .btn,.cta__actions .btn,.phero__actions .btn{width:100%} .foot__grid{grid-template-columns:1fr} .console__body{padding:18px} .readout__eta{font-size:2.1rem} } /* ========================================================================== Motion / print ========================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} } @media print{ .topbar,.hdr,.cta,.burger,.ribbon,.hero__bg,.hero__grid-lines,.map-scroll{display:none!important} body{background:#fff;color:#000;font-size:11pt} .sec{padding:12pt 0} a{color:#000;text-decoration:underline} .card,.rev,.panel,.aside-box,.spec,.form{border:1px solid #999;background:#fff;box-shadow:none} .panel,.panel *{background:#fff!important;color:#000!important} .foot{background:#fff;border-top:1px solid #999} } /* ========================================================================== Chat assistant (bottom corner). Markup is injected by js/chat.js. ========================================================================== */ .chat{position:fixed;right:20px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:12px; bottom:20px;bottom:max(20px,env(safe-area-inset-bottom)); will-change:auto;contain:layout} .chat__fab{ display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 20px; border:0;border-radius:999px;cursor:pointer; background:var(--bl);color:#fff;font:600 .96rem/1 var(--body); box-shadow:0 10px 30px -10px rgba(var(--bl-rgb),.75),0 2px 8px rgba(10,34,51,.2); transition:transform .18s ease,background .18s ease; } .chat__fab:hover{background:var(--bl-hover);transform:translateY(-2px)} .chat__fab-ico{display:grid;place-items:center;width:22px;height:22px} .chat__fab-ico svg{width:22px;height:22px} .chat.is-open .chat__fab-txt{display:none} .chat.is-open .chat__fab{padding:0;width:52px;justify-content:center} .chat__panel[hidden]{display:none} .chat__panel{ width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 130px)); display:flex;flex-direction:column;overflow:hidden; background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 30px 70px -24px rgba(10,34,51,.45); } .chat__head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-1)} .chat__avatar{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--logo)} .chat__avatar svg{width:26px} .chat__who b{display:block;font:600 .97rem/1.2 var(--body);color:var(--txt)} .chat__who span{display:flex;align-items:center;gap:7px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--txt-3);margin-top:5px} .chat__x{margin-left:auto;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--txt-3);font-size:22px;line-height:1;cursor:pointer} .chat__x:hover{background:var(--bg-3);color:var(--txt)} .chat__log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin} .chat__row{display:flex} .chat__row--you{justify-content:flex-end} .chat__bubble{ max-width:86%;padding:11px 14px;border-radius:14px;font-size:.94rem;line-height:1.5; background:var(--bg-1);color:var(--txt);border:1px solid var(--line); } .chat__row--you .chat__bubble{background:var(--bl);color:#fff;border-color:transparent;border-bottom-right-radius:5px} .chat__row--bot .chat__bubble{border-bottom-left-radius:5px} .chat__bubble a{color:var(--bl);font-weight:600} .chat__bubble strong{color:var(--txt);font-weight:700} .chat__typing{display:flex;gap:4px;align-items:center;padding:14px} .chat__typing i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);animation:chatdot 1.2s infinite ease-in-out} .chat__typing i:nth-child(2){animation-delay:.16s} .chat__typing i:nth-child(3){animation-delay:.32s} @keyframes chatdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .chat__chips{display:flex;flex-wrap:wrap;gap:7px} .chat__chip{ font:500 .84rem/1 var(--body);padding:9px 13px;border-radius:999px;cursor:pointer; background:var(--bg);color:var(--bl);border:1px solid var(--line-2);text-decoration:none; transition:background .15s,border-color .15s; } .chat__chip:hover{background:var(--bg-3);border-color:var(--bl)} .chat__form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)} .chat__input{ flex:1;min-width:0;min-height:44px;padding:10px 13px;font:400 .94rem var(--body); color:var(--txt);background:var(--bg);border:1.5px solid var(--line-2);border-radius:10px; } .chat__input:focus{border-color:var(--bl);outline:none;box-shadow:0 0 0 3px rgba(var(--bl-rgb),.18)} .chat__send{width:44px;height:44px;flex:none;border:0;border-radius:10px;background:var(--bl);color:#fff;cursor:pointer;display:grid;place-items:center} .chat__send:hover{background:var(--bl-hover)} .chat__note{margin:0;padding:0 14px 12px;font-size:.76rem;color:var(--txt-3);max-width:none} .chat__note a{color:var(--txt-2)} @media (max-width:620px){ .chat{right:14px;bottom:14px} .chat__panel{max-height:calc(100dvh - 110px)} } @media print{.chat{display:none!important}} /* ========================================================================== Blog ========================================================================== */ .bento--blog{grid-template-columns:repeat(3,1fr)} /* blog cards stack the tag above the date instead of overlapping it */ .bento--blog .card__tag{position:static;align-self:flex-start;margin-bottom:14px} .bento--blog .card{padding-top:24px} .post__date{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--txt-3);margin:0 0 12px;text-transform:uppercase} .post__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--txt-3);text-transform:uppercase;margin:0} .post__meta span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-2);margin-right:14px;vertical-align:middle} .post__wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:60px;align-items:start} .post__body{max-width:70ch} .post__body > h2{margin-top:2em} .post__body > p,.post__body > ul,.post__body > ol{font-size:1.06rem;line-height:1.72} .post__body li{margin-bottom:.6em} .post__aside{position:sticky;top:96px} .post__asidep{font-size:.9rem;color:var(--txt-2);margin:14px 0 0} .post__aside .post__asidep:first-of-type{margin:0 0 18px} .pull{ margin:2em 0;padding:4px 0 4px 24px;border-left:3px solid var(--bl); font:600 1.22rem/1.5 var(--body);color:var(--txt);max-width:60ch; } .note{ display:block;margin:2em 0;padding:18px 20px;border-radius:var(--r); background:var(--bg-1);border:1px solid var(--line);border-left:3px solid var(--am); font-size:.98rem;color:var(--txt-2);max-width:70ch; } .tbl-wrap{overflow-x:auto;margin:1.8em 0;border:1px solid var(--line);border-radius:var(--r)} .tbl{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem} .tbl th{ text-align:left;padding:13px 16px;background:var(--bg-1);color:var(--txt); font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase; border-bottom:1px solid var(--line); } .tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--txt-2);vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl td:first-child{color:var(--txt);font-weight:600} @media (max-width:1000px){ .bento--blog{grid-template-columns:repeat(2,1fr)} .post__wrap{grid-template-columns:1fr;gap:40px} .post__aside{position:static} } @media (max-width:620px){ .bento--blog{grid-template-columns:1fr} .pull{font-size:1.08rem;padding-left:18px} } /* ========================================================================== Border-clearance flow diagram ========================================================================== */ .flow{margin:2.4em 0;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)} .flow__key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)} .flow__keyitem{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3)} .flow__keyitem i{width:10px;height:10px;border-radius:3px;flex:none} .flow__keyitem--you i{background:var(--txt-3)} .flow__keyitem--sig i{background:var(--bl)} .flow__keyitem--brk i{background:var(--bl-bright)} .flow__keyitem--bdr i{background:var(--am)} .flow__list{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:f} .flow__step{position:relative;display:grid;grid-template-columns:44px 26px 1fr;align-items:start;gap:14px;padding:14px 0} /* the connecting line */ .flow__step::before{content:"";position:absolute;left:56px;top:34px;bottom:-14px;width:2px;background:var(--line-2)} .flow__step:last-child::before{display:none} .flow__num{font:600 11px/1.8 var(--mono);letter-spacing:.1em;color:var(--txt-3)} .flow__dot{width:14px;height:14px;border-radius:50%;margin-top:3px;flex:none;position:relative;z-index:1; box-shadow:0 0 0 4px var(--bg-1)} .flow__step--you .flow__dot{background:var(--txt-3)} .flow__step--sig .flow__dot{background:var(--bl)} .flow__step--brk .flow__dot{background:var(--bl-bright)} .flow__step--bdr .flow__dot{background:var(--am)} .flow__txt b{display:block;color:var(--txt);font-weight:700;font-size:1.02rem;margin-bottom:3px} .flow__txt span{color:var(--txt-2);font-size:.94rem;line-height:1.5} .flow__step--sig .flow__txt b::after{content:"us";margin-left:9px;font:600 9.5px/1 var(--mono); letter-spacing:.12em;text-transform:uppercase;color:var(--bl); background:rgba(var(--bl-rgb),.1);padding:4px 7px;border-radius:999px;vertical-align:2px} @media (max-width:620px){ .flow{padding:18px} .flow__step{grid-template-columns:26px 1fr;gap:12px} .flow__num{display:none} .flow__step::before{left:12px} } /* ========================================================================== Border diagram: steps arrive one at a time as it scrolls into view. Costs nothing - it reuses the .rv observer already in js/site.js and is pure CSS. No video, no extra download, no effect on page weight. ========================================================================== */ .flow__step{opacity:1;transform:none} .js .flow__step{opacity:0;transform:translateY(10px); transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)} .js .flow__step::before{transform:scaleY(0);transform-origin:top; transition:transform .4s ease .15s} .flow.is-in .flow__step{opacity:1;transform:none} .flow.is-in .flow__step::before{transform:scaleY(1)} .flow.is-in .flow__step:nth-child(1){transition-delay:.05s} .flow.is-in .flow__step:nth-child(2){transition-delay:.17s} .flow.is-in .flow__step:nth-child(3){transition-delay:.29s} .flow.is-in .flow__step:nth-child(4){transition-delay:.41s} .flow.is-in .flow__step:nth-child(5){transition-delay:.53s} .flow.is-in .flow__step:nth-child(6){transition-delay:.65s} .flow.is-in .flow__step:nth-child(1)::before{transition-delay:.20s} .flow.is-in .flow__step:nth-child(2)::before{transition-delay:.32s} .flow.is-in .flow__step:nth-child(3)::before{transition-delay:.44s} .flow.is-in .flow__step:nth-child(4)::before{transition-delay:.56s} .flow.is-in .flow__step:nth-child(5)::before{transition-delay:.68s} /* the dot pulses once as its step lands */ .flow.is-in .flow__dot{animation:flowpop .5s ease both} .flow.is-in .flow__step:nth-child(2) .flow__dot{animation-delay:.17s} .flow.is-in .flow__step:nth-child(3) .flow__dot{animation-delay:.29s} .flow.is-in .flow__step:nth-child(4) .flow__dot{animation-delay:.41s} .flow.is-in .flow__step:nth-child(5) .flow__dot{animation-delay:.53s} .flow.is-in .flow__step:nth-child(6) .flow__dot{animation-delay:.65s} @keyframes flowpop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}} /* anyone who asked their device to reduce motion just sees it finished */ @media (prefers-reduced-motion:reduce){ .flow__step{opacity:1;transform:none} .flow__step::before{transform:scaleY(1)} .flow.is-in .flow__dot{animation:none} } /* ========================================================================== Explanatory diagrams. All CSS, no images, no extra downloads. ========================================================================== */ .diag__cap{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--txt-3);margin:0 0 22px} /* ---- same-day timeline ---- */ .tline{margin:2.4em 0;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)} .tline__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .tline__list li{position:relative;padding-top:30px} .tline__list li::before{content:"";position:absolute;top:6px;left:0;right:-18px;height:2px;background:var(--line-2)} .tline__list li:last-child::before{right:0} .tline__when{display:block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--bl);margin-bottom:10px} .tline__dot{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%; background:var(--bl);box-shadow:0 0 0 4px var(--bg-1)} .tline__list b{display:block;color:var(--txt);font-size:1rem;margin-bottom:5px} .tline__list li > span:last-child{color:var(--txt-2);font-size:.9rem;line-height:1.5} /* ---- trailer deck ---- */ .decks{margin:0 0 2.4em;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)} .decks__pair{display:grid;grid-template-columns:1fr 1fr;gap:26px} .deck{margin:0} .deck figcaption{font-size:.98rem;color:var(--txt-2);margin-bottom:14px} .deck figcaption b{color:var(--txt)} .deck__van{display:flex;align-items:stretch;gap:3px;margin-bottom:14px} .deck__cab{width:26px;flex:none;border-radius:7px 3px 3px 7px;background:var(--line-2)} .deck__grid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px; padding:6px;border:2px solid var(--line-2);border-radius:4px;background:var(--bg)} .deck__grid i{display:block;aspect-ratio:1;border-radius:2px;background:var(--line); transition:background .4s ease,transform .4s ease} .deck__grid i.is-yours{background:var(--bl)} .deck p{margin:0;color:var(--txt-2);font-size:.9rem;line-height:1.5} /* ---- container transload ---- */ .tload{margin:2.4em 0;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)} .tload__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tload__stage{flex:1;min-width:150px;text-align:center} .tload__box{display:block;padding:22px 12px;border-radius:var(--r-xs);background:var(--txt-3); color:#fff;font:600 .9rem/1.2 var(--body); box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),inset 0 0 0 6px transparent} .tload__hub{display:block;padding:22px 12px;border-radius:var(--r-xs);background:var(--bl); color:#fff;font:700 .95rem/1.2 var(--body)} .tload__lbl{display:block;margin-top:10px;font-size:.85rem;color:var(--txt-2);line-height:1.45} .tload__out{list-style:none;margin:0;padding:0;display:grid;gap:5px} .tload__out li{padding:8px 10px;border-radius:var(--r-xs);background:var(--bg); border:1px solid var(--line-2);font-size:.84rem;color:var(--txt);font-weight:600} .tload__arrow{flex:none;width:26px;height:2px;background:var(--line-2);position:relative} .tload__arrow::after{content:"";position:absolute;right:-1px;top:-4px; border-left:8px solid var(--line-2);border-top:5px solid transparent;border-bottom:5px solid transparent} /* ---- scroll-in, same trick as the border diagram ---- */ .js .tline__list li,.js .deck,.js .tload__stage,.js .tload__arrow{opacity:0;transform:translateY(10px); transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)} .tline.is-in .tline__list li,.decks.is-in .deck,.tload.is-in .tload__stage, .tload.is-in .tload__arrow{opacity:1;transform:none} .tline.is-in .tline__list li:nth-child(2){transition-delay:.1s} .tline.is-in .tline__list li:nth-child(3){transition-delay:.2s} .tline.is-in .tline__list li:nth-child(4){transition-delay:.3s} .tline.is-in .tline__list li:nth-child(5){transition-delay:.4s} .decks.is-in .deck:nth-child(3){transition-delay:.14s} .tload.is-in .tload__stage:nth-child(3){transition-delay:.14s} .tload.is-in .tload__stage:nth-child(5){transition-delay:.28s} .tload.is-in .tload__arrow:nth-child(2){transition-delay:.08s} .tload.is-in .tload__arrow:nth-child(4){transition-delay:.22s} /* your pallets fill in one at a time */ .decks.is-in .deck__grid i.is-yours{animation:deckfill .4s ease both} .decks.is-in .deck__grid i.is-yours:nth-child(2){animation-delay:.12s} .decks.is-in .deck__grid i.is-yours:nth-child(3){animation-delay:.24s} @keyframes deckfill{0%{transform:scale(.5);background:var(--line)}100%{transform:scale(1);background:var(--bl)}} @media (max-width:1000px){ .tline__list{grid-template-columns:1fr 1fr} .tline__list li::before{display:none} } @media (max-width:620px){ .tline,.decks,.tload{padding:18px} .tline__list{grid-template-columns:1fr;gap:22px} .decks__pair{grid-template-columns:1fr;gap:22px} .tload__row{flex-direction:column;align-items:stretch} .tload__arrow{width:2px;height:22px;align-self:center} .tload__arrow::after{right:-4px;top:auto;bottom:-1px; border-left:5px solid transparent;border-right:5px solid transparent; border-top:8px solid var(--line-2);border-bottom:0} } @media (prefers-reduced-motion:reduce){ .tline__list li,.deck,.tload__stage,.tload__arrow{opacity:1;transform:none} .decks.is-in .deck__grid i.is-yours{animation:none} } /* ========================================================================== HERO v2 — full-bleed photograph, condensed headline, stats over the image. Modelled on the live signaltransportation.ca hero, which has more impact than a tinted background ever will. ========================================================================== */ .hero{position:relative;overflow:hidden;background:var(--screen);isolation:isolate} .hero__bg{position:absolute;inset:0;z-index:-2} /* opacity:1 is required - the v1 hero rule above still sets .5, which washed the photograph into the navy behind it. */ /* 16% pushes the truck to the RIGHT of the headline. Higher values slide the crop window right, which drags the truck LEFT under the text. */ .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:16% 52%;opacity:1} /* Dark enough on the left for white text to hold AA contrast, then clears completely by 76% so the truck is actually visible. */ .hero__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(9,40,92,.96) 0%,rgba(9,40,92,.93) 26%,rgba(9,40,92,.82) 40%, rgba(9,40,92,.50) 52%,rgba(9,40,92,.16) 64%,rgba(9,40,92,0) 74%), linear-gradient(0deg,rgba(9,40,92,.90) 0%,rgba(9,40,92,.60) 14%,rgba(9,40,92,.16) 30%,rgba(9,40,92,0) 48%); } .hero__grid{position:relative;display:block;padding:clamp(48px,6vw,86px) var(--gut) clamp(92px,10vw,140px)} .hero__copy{max-width:60ch} .hero__flag{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px; border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12); backdrop-filter:blur(4px); font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff} .hero__pin{width:8px;height:8px;border-radius:50%;background:var(--am);flex:none} .hero h1{color:#fff;margin-bottom:.3em;text-shadow:0 2px 24px rgba(9,40,92,.5)} .hero h1 em{font-style:normal;color:var(--am)} .hero h1 i{font-style:normal;color:#9FC2E8} .hero .lead{color:#E4ECF8;max-width:46ch;margin-bottom:32px;font-weight:500; text-shadow:0 1px 12px rgba(9,40,92,.85)} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} .btn--onphoto{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1)} .btn--onphoto:hover{background:#fff;color:var(--txt);border-color:#fff} /* stats sitting on the photo, like the live site */ .hero__stats{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:clamp(20px,3vw,34px)} .hero__stats ul{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,1fr); gap:18px;border-top:1px solid rgba(255,255,255,.25)} .hero__stats b{display:block;font:400 clamp(2.1rem,3.6vw,3rem)/1 var(--dis);color:#fff;letter-spacing:.01em} .hero__stats b em{font-style:normal;color:var(--am)} .hero__stats span{display:block;font:700 10px/1.4 var(--body);letter-spacing:.14em; text-transform:uppercase;color:#B7C9E2;margin-top:7px} /* lane check band, now its own section under the hero */ .lanecheck{background:var(--bg-1);border-bottom:1px solid var(--line)} .lanecheck__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .lanecheck .hero__trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding-top:24px;border-top:1px solid var(--line);margin-top:26px} .lanecheck .rating b{color:var(--txt)} .lanecheck .rating a{color:var(--txt-2)} .lanecheck .badge{background:#fff} @media (max-width:1000px){ /* On narrow screens the text spans the full width, so a side gradient cannot protect it. Darken top-to-bottom instead: the truck stays as texture and every word keeps AA contrast. */ .hero__bg img{object-position:34% 50%} .hero__bg::after{ background: linear-gradient(180deg,rgba(9,40,92,.74) 0%,rgba(9,40,92,.62) 34%, rgba(9,40,92,.72) 64%,rgba(9,40,92,.88) 100%); } .hero__grid{padding-bottom:clamp(120px,22vw,170px)} .hero__copy{max-width:none} .hero__stats ul{grid-template-columns:1fr 1fr;gap:14px} .lanecheck__grid{grid-template-columns:1fr;gap:34px} } @media (max-width:620px){ .hero__bg img{object-position:68% 50%} .hero__stats ul{padding-top:16px} .hero__stats b{font-size:1.8rem} .hero__stats span{font-size:9px;letter-spacing:.1em} } /* ---- chat: the greeting that appears on its own -------------------------- */ .chat__teaser{ display:flex;align-items:flex-start;gap:11px;position:relative; width:min(288px,calc(100vw - 40px));padding:13px 34px 13px 13px;cursor:pointer; background:var(--bg);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 16px 40px -14px rgba(9,40,92,.4); opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right; transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1); } .chat__teaser.is-up{opacity:1;transform:none} .chat__teaser-ava{width:34px;height:34px;flex:none;display:grid;place-items:center; border-radius:9px;background:var(--bg-1);border:1px solid var(--line);color:var(--logo)} .chat__teaser-ava svg{width:24px} .chat__teaser-txt b{display:block;font:800 .88rem/1.2 var(--body);color:var(--txt);margin-bottom:3px} .chat__teaser-txt span{display:block;font-size:.85rem;line-height:1.4;color:var(--txt-2)} .chat__teaser-x{position:absolute;top:5px;right:6px;width:24px;height:24px;border:0; border-radius:6px;background:transparent;color:var(--txt-3);font-size:17px;line-height:1;cursor:pointer} .chat__teaser-x:hover{background:var(--bg-3);color:var(--txt)} .chat.is-open .chat__teaser{display:none} @media (prefers-reduced-motion:reduce){ .chat__teaser{transition:none;opacity:1;transform:none} } /* ========================================================================== MOBILE LEGIBILITY AND TAP TARGETS -------------------------------------------------------------------------- Measured on real phone widths (390px and 430px), not guessed. The layout was already sound - no sideways scroll anywhere - but two things failed a person holding a phone: * label text rendering at 9px and 10px, which is not readable * inline links only 18-21px tall, and a 13px checkbox, which are not reliably tappable (Google asks for 44px, Apple for 44pt) Everything here is inside a phone-only media query, so the desktop design is untouched. Nothing below changes a colour or a layout - only size. ========================================================================== */ @media (max-width:620px){ /* --- readable label text ------------------------------------------- */ .hero__stats span, .stats span {font-size:12px;letter-spacing:.06em;line-height:1.35} .route-io__lbl {font-size:12px} .contact-list li b {font-size:12px} .eyebrow {font-size:12px} .topbar, .topbar__live {font-size:12px} .foot h3 {font-size:13px} .hero__flag, .hero__pin {font-size:12px} /* --- tappable links ------------------------------------------------- Padding rather than height, so the text stays where it is and only the hit area grows. inline-flex keeps them on their own line without turning every link into a full-width block. */ .contact-list li a, .foot a, .foot__bottom a {display:inline-flex;align-items:center;min-height:44px} /* Inline links inside running prose are NOT padded out - doing that wrecks paragraph line spacing. They are read, not aimed at. */ .prose p a, .prose li a {min-height:0;display:inline} /* Standalone links that are NOT running prose do need a real hit area: breadcrumbs, related-post links, the small buttons. */ .related a, .crumbs a, .btn--sm {display:inline-flex;align-items:center;min-height:44px} /* --- checkboxes and radios ------------------------------------------ */ .form input[type="checkbox"], .form input[type="radio"]{width:22px;height:22px;flex:0 0 22px} .form label:has(input[type="checkbox"]), .form label:has(input[type="radio"]){min-height:44px;display:flex;align-items:center;gap:10px} /* --- the small review link under the hero --------------------------- */ .rev-link, .hero a[href*="review"] {display:inline-flex;align-items:center;min-height:44px} /* --- remaining small type, found by measurement not by eye ----------- */ .brand__wm i {font-size:10px;letter-spacing:.22em} .card__tag {font-size:11px} .diag__cap {font-size:11px} /* --- the last small hit areas --------------------------------------- */ .crumbs a, .rating a, .hero__trust a {display:inline-flex;align-items:center;min-height:44px} /* The lane map is an SVG diagram. Its city labels are links, but they are positioned inside the drawing, so padding them would break the map. Every one of them also appears as a normal link in the lane list below, which IS tappable - so nothing is unreachable on a phone. */ /* --- the last of the 10.5px mono labels ----------------------------- */ .console__top b, .stats span, .panel__bar b, .feats__n, .spec dt, .tline__when, .chat__who span {font-size:11.5px} /* --- the last of the small hit areas -------------------------------- */ .brand {min-height:44px} .gscore a {display:inline-flex;align-items:center;min-height:44px} .chat__teaser-x {width:44px;height:44px;top:0;right:0;box-sizing:border-box} }