/* Chicago Lifts — WP-environment shims for the ported design system. * The design CSS (cl-styles/cl-components/page css) is verbatim from the * prototype; this file adapts the handful of environment differences. */ /* Content width (improvement — Tariq 2026-07-06): the prototype's --max:1440px * lets content sprawl to the screen edges on wide displays, so left-aligned * headings and body hug the left with dead space on the right. Tighten the * shared measure so every page reads centered and balanced on 1440px+ monitors. * One token → applies everywhere via .container. */ :root { --max: 1200px; } /* Density (improvement — Tariq 2026-07-06): the prototype's editorial section * padding runs up to 96–120px vertical, which reads as excess empty space in the * WP build — content feels spread out and needs a lot of scrolling. Tighten the * vertical rhythm on the big content / CTA sections so related info sits closer. */ .ud-cta, .ud-history, .ud-included, .svc-cta, .svc-promises, .svc-calc, .uptime-sla, .uptime-grandfather, .product-picker, .svc-faq, .prod-breadth, .prod-compare, .csv-cta, .bsv-models, .csv-related, .prod-grid-sec { padding-top: clamp(28px, 3vw, 52px); padding-bottom: clamp(28px, 3vw, 52px); } /* Detail-hero actions (improvement — Tariq): Reserve + Make-offer share the top * row, Call sits full-width below (the prototype's 2+1 layout), independent of * container width so it doesn't collapse to 1+1+1 on the narrower measure. */ .ud-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .ud-hero__actions > .btn:nth-child(1), .ud-hero__actions > .btn:nth-child(2) { flex: 1 1 calc(50% - 6px); } .ud-hero__actions > .btn:nth-child(3) { flex: 1 1 100%; } /* FAQ accordion: the prototype mounts answers conditionally in React. * Server-rendered pages keep all answers in the DOM and toggle a class. */ .city-faq__item .city-faq__a { display: none; } .city-faq__item.is-open .city-faq__a { display: block; } /* Mobile drawer accordion (server-rendered): a group's children stay collapsed * until its chevron toggles .is-expanded (cl-pages.js); rotate the chevron open. * Verbatim drawer markup, WP just needs the display toggle the React conditional * gave it for free. */ .cl-nav__mobile-children { display: none; } .cl-nav__mobile-group.is-expanded .cl-nav__mobile-children { display: block; } .cl-nav__mobile-toggle svg { transition: transform .18s ease; } .cl-nav__mobile-group.is-expanded .cl-nav__mobile-toggle svg { transform: rotate(180deg); } /* The prototype's secondary util-nav styles target