/* Homepage cinematic-chrome fix. NOT part of the signed-off design CSS (kept separate so parity of every page is preserved). The verbatim CSS pins .hdr.is-cinematic at top:0 — the same band the in-flow .utility-strip occupies — so the fixed header clips the contact row + brand name. Here we drop the fixed header to start just BELOW the utility strip, and offset for the WP admin bar when present. */ :root { --ww-strip-h: 40px; } /* utility strip: one line */ @media (max-width: 600px) { :root { --ww-strip-h: 60px; } } /* it wraps to two */ /* Header begins below the utility strip instead of on top of it. */ .hdr.is-cinematic { top: var(--ww-strip-h); } .hdr.is-cinematic::before { top: 0; } /* keep the scrim glued to the header */ /* Once the utility strip has scrolled out of view (JS adds .is-stuck), the header snaps flush to the very top — no empty gap where the strip was. */ .hdr.is-cinematic.is-stuck { top: 0; } .admin-bar .hdr.is-cinematic.is-stuck { top: 32px; } /* admin bar stays fixed */ @media (max-width: 782px) { .admin-bar .hdr.is-cinematic.is-stuck { top: 46px; } } /* Below 1100px the verbatim CSS makes this header position:sticky (in flow, no collision) — clear the offset so it doesn't float oddly. */ @media (max-width: 1100px) { .hdr.is-cinematic { top: 0; } } /* WordPress admin bar: only affects logged-in previewers, never the public client view. The relative strip is already pushed by WP's html margin; only the FIXED header needs the manual offset. */ .admin-bar .hdr.is-cinematic { top: calc(var(--ww-strip-h) + 32px); } @media (max-width: 782px) { .admin-bar .hdr.is-cinematic { top: calc(var(--ww-strip-h) + 46px); } } @media (max-width: 1100px) { .admin-bar .hdr.is-cinematic { top: 0; } } /* ---- Hero billboard descender spacing ---- The 'g'/'j' descenders of "Technologists." were colliding with the lede paragraph. Add space below the title; em-based so it scales with the clamped billboard font (a fixed px gap fails at the largest size, where the descender itself is huge). */ .hero-cinematic[data-variant="sticky"] .hero-title { margin-bottom: .22em; padding-bottom: .04em; } /* Mobile/tablet: the billboard's clamp() floor (80px) is far wider than a phone, so "Technologists." was clipped off both edges. Scale it down by viewport on smaller screens so the longest word stays inside the frame. keep-all stops mid-word breaking; the values are tuned by measurement. */ @media (max-width: 900px) { .hero-cinematic[data-variant="sticky"] .hero-title { /* The hero frame maxes out at ~389px wide, so the font must PLATEAU (cap), not keep growing with vw, or "Technologists." clips again. Cap chosen so the longest word fits the fixed frame with margin. */ font-size: clamp(40px, 13vw, 54px); line-height: 1.02; word-break: keep-all; overflow-wrap: normal; } } @media (max-width: 420px) { /* Narrow phones: frame = viewport - 48, so scale with vw (it never hits the 54 cap here) to stay as large as possible while fitting. */ .hero-cinematic[data-variant="sticky"] .hero-title { font-size: clamp(32px, 12vw, 54px); } } /* ---- Accessibility: in-text links not distinguishable by colour alone ---- The utility strip's phone/email links relied on colour only (WCAG 1.4.1). Underline them so they're distinguishable without colour. */ .utility-strip a { text-decoration: underline; text-underline-offset: 2px; } /* ---- Cookie bar dismissal fix ---- The signed-off CSS sets `.cookie-bar { display:flex }`, which overrides the HTML `hidden` attribute's default `display:none`. Result: the consent bar could never be dismissed ("Got it" had no effect) and reappeared for every visitor on every page, even after consent. `.cookie-bar[hidden]` (0,2,0) outranks `.cookie-bar` (0,1,0) so the attribute now actually hides it. Restores the intended JS behaviour: appear after 800ms for new visitors, dismiss on "Got it", stay hidden for returning visitors. */ .cookie-bar[hidden] { display: none; } /* ============================================================= * * R4 client feedback (2026-05-18) — isolated overrides only. * * Signed-off design CSS (_shared.css / v4.css) is NOT edited. * * ============================================================= */ /* ---- R4 item 1: unify label/eyebrow typeface ---- Client asked the small all-caps mono "eyebrow" label (e.g. the home-hero "Jamaica · since 2010 · Island-wide") to use the same readable typeface as the hero sub-line beneath it, applied consistently to every similar label site-wide. Switch the global .eyebrow from JetBrains-Mono to the body font (Inter, the readable sub-line typeface) but KEEP it as an uppercase tracked label (client decision). Keeps the brand yellow dash + spacing. */ .eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } /* ---- R4 item 7: footer logo aspect ratio ---- Footer logo looked stretched. The PNG is 4321x979; pin that ratio and let width follow height so it can never distort, whatever the column width. */ footer.site .brand-block img { height: 40px; width: auto; max-width: 100%; aspect-ratio: 4321 / 979; object-fit: contain; } /* ---- R4 item 3: notable clients as a horizontal auto-scroll carousel ---- Was a static 8-col grid that only showed a handful. Now an infinite marquee of all clients (track holds the set duplicated exactly twice, so a -50% translate loops seamlessly). Pauses on hover; respects prefers-reduced-motion (falls back to a centered wrap). */ .trusted-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .trusted-marquee .trusted-track { display: flex; width: max-content; animation: ww-marquee 70s linear infinite; } .trusted-marquee:hover .trusted-track, .trusted-marquee:focus-within .trusted-track { animation-play-state: paused; } .trusted-marquee .logo { flex: 0 0 auto; height: 48px; display: flex; align-items: center; padding: 0 30px; white-space: nowrap; font: 700 13px/1.2 var(--font-display); letter-spacing: .04em; color: rgba(255,255,255,.85); border-right: 1px solid rgba(255,255,255,.14); } @keyframes ww-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .trusted-marquee { -webkit-mask-image: none; mask-image: none; } .trusted-marquee .trusted-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; } .trusted-marquee .logo { border-right: 0; padding: 8px 18px; } } /* ---- R4 item 2: Services mega-menu ---- Desktop styling is the signed-off design CSS already in _shared.css / v4.css (.has-mega/.mega-trigger/.mega-panel/.mega-grid/.mega-item) — restored by the header.php markup + site.js. Only the MOBILE drawer accordion (the "done differently" mobile treatment) needs styling here. */ .mobile-nav .m-acc { display: flex; flex-direction: column; } .mobile-nav .m-acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .mobile-nav .m-acc-trigger .caret { font-size: .72em; transition: transform .2s ease; opacity: .7; } .mobile-nav .m-acc-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); } .mobile-nav .m-acc-panel { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; padding: 4px 0 4px 16px; border-left: 2px solid rgba(7,41,86,.16); } .mobile-nav .m-acc-panel[hidden] { display: none; } .mobile-nav .m-acc-panel a { font-size: .9em; opacity: .8; } .mobile-nav .m-acc-panel a.m-acc-all { font-weight: 700; opacity: 1; } .mobile-nav .m-acc-panel a.active { opacity: 1; } /* Center the mega panel under the whole nav (not the trigger) so it never clips at the viewport edge — and stays correct for ANY top-level item the client turns into a mega menu, wherever it sits in the nav. Desktop only; mobile uses the accordion above. */ @media (min-width: 1101px) { .primary-nav { position: relative; } .primary-nav .has-mega { position: static; } .primary-nav .mega-panel { left: 50%; right: auto; transform: translate(-50%, 8px); } .primary-nav .has-mega.is-open .mega-panel { transform: translate(-50%, 0); } } /* ============================================================= * * R5 client feedback (2026-05-23) — isolated overrides only. * * ============================================================= */ /* ---- R5 item A1: hero billboard line-gap ---- The signed-off design uses line-height .92 on the giant hero title for tight, billboard feel. At 800-weight Manrope that's tight enough that the descender of 'g' in 'Building' touches the dot of 'i' in 'Technologists.' below. Bump line-height just enough to clear the descenders without losing the billboard impact. */ .hero-cinematic[data-variant="sticky"] .hero-title { line-height: 1.02; } /* ---- R5 item D: project gallery lightbox with prev/next navigation ---- Custom lightbox (small vanilla JS in site.js) — works for single images and galleries alike. Single-image lightbox auto-hides the nav buttons. */ .ww-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(5,15,30,.96); display: none; align-items: center; justify-content: center; } .ww-lb.is-open { display: flex; } .ww-lb img.ww-lb-pic { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 18px 60px rgba(0,0,0,.6); border-radius: 4px; } .ww-lb .ww-lb-btn { background: rgba(255,255,255,.10); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font: 700 22px/1 system-ui; display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; } .ww-lb .ww-lb-btn:hover { background: rgba(255,255,255,.22); } .ww-lb .ww-lb-close { position: absolute; top: 18px; right: 18px; } .ww-lb .ww-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 28px; } .ww-lb .ww-lb-prev { left: 18px; } .ww-lb .ww-lb-next { right: 18px; } .ww-lb[data-only-one] .ww-lb-nav { display: none; } .ww-lb .ww-lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.72); font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 600px) { .ww-lb .ww-lb-nav { width: 44px; height: 44px; font-size: 24px; } .ww-lb .ww-lb-prev { left: 8px; } .ww-lb .ww-lb-next { right: 8px; } } /* ---- R5 item D: project galleries become a horizontal scrollable strip ---- On single-project pages with 2+ gallery images, render them as a swipe-able row (snap on each image, smooth wheel/touch scroll). Single images and the surrounding content layout are unaffected. Lightbox on click still fires via WP 6.4+ native interactivity. */ .single-project .wp-block-gallery.has-nested-images { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 10px; margin: 18px 0 24px; } .single-project .wp-block-gallery.has-nested-images > figure.wp-block-image, .single-project .wp-block-gallery.has-nested-images > .wp-block-image { flex: 0 0 88%; scroll-snap-align: start; margin: 0; max-width: none; } .single-project .wp-block-gallery.has-nested-images > figure.wp-block-image img, .single-project .wp-block-gallery.has-nested-images > .wp-block-image img { width: 100%; height: auto; border-radius: 6px; } @media (min-width: 800px) { .single-project .wp-block-gallery.has-nested-images > figure.wp-block-image, .single-project .wp-block-gallery.has-nested-images > .wp-block-image { flex: 0 0 62%; } } .single-project .wp-block-gallery.has-nested-images::-webkit-scrollbar { height: 8px; } .single-project .wp-block-gallery.has-nested-images::-webkit-scrollbar-thumb { background: rgba(7,41,86,.22); border-radius: 4px; } /* ---- R5 item C: glossary 2-column desktop, 1-column mobile ---- Client wants the glossary to read 2-up on desktop, single-column on phones, grouped by letter (existing letter-group markup is preserved). */ .gloss-letter-block .g-3 { grid-template-columns: 1fr; } @media (min-width: 800px) { .gloss-letter-block .g-3 { grid-template-columns: repeat(2, 1fr); } } /* ---- R5 item B: mega-panel scroll cap ---- With 12 services in a 5-col grid the 3rd row overflows the viewport. Cap the panel height and let it scroll inside, so the last 2 items stay reachable without losing the 5-col layout. */ @media (min-width: 1101px) { .primary-nav .mega-panel { max-height: min(76vh, 680px); overflow-y: auto; /* Subtle scrollbar so it doesn't dominate visually */ scrollbar-width: thin; scrollbar-color: rgba(7,41,86,.25) transparent; } .primary-nav .mega-panel::-webkit-scrollbar { width: 8px; } .primary-nav .mega-panel::-webkit-scrollbar-thumb { background: rgba(7,41,86,.25); border-radius: 4px; } .primary-nav .mega-panel::-webkit-scrollbar-thumb:hover { background: rgba(7,41,86,.45); } } /* ---- R5 item A3: readiness 31-70% "show what's missing" panel ---- The old anchor button bounced users back to the questionnaire. Replaced with an inline expandable panel that lists the user's actual gaps after they finish the quiz, then offers Book a Consultation. */ .sc-mid .sc-missing { margin-top: 14px; padding: 16px 16px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; text-align: left; } .sc-mid .sc-missing[hidden] { display: none; } .sc-mid .sc-missing-empty, .sc-mid .sc-missing-head { font: 600 12.5px/1.5 var(--font-body, system-ui); letter-spacing: .01em; margin: 0 0 10px; color: rgba(255,255,255,.78); } .sc-mid .sc-missing-head { color: #fff; } .sc-mid .sc-missing-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .sc-mid .sc-missing-list li { padding: 10px 12px; background: rgba(0,0,0,.18); border-radius: 6px; border-left: 3px solid var(--yellow, #f4b400); font: 500 13px/1.4 var(--font-body, system-ui); color: #fff; } .sc-mid .sc-cta-mid-book { display: inline-flex; width: 100%; justify-content: center; } /* ============================================================= * * R6 client feedback (2026-05-25) — isolated overrides only. * * ============================================================= */ /* ---- R6 B1: booking modal text colour on readiness page ---- readiness.css flips every `.display` and `.eyebrow` to white for the dark theme. The booking modal opens INSIDE body.readiness-page so its `` and `

` go invisible on the modal's white card. Force them back to navy whenever they're inside the modal, regardless of page theme. Specificity beats the readiness dark-theme rule (0,1,1 → here 0,2,1 / 0,2,2). */ body.readiness-page .booking-modal .modal-card .display, body.readiness-page .booking-modal .modal-card h2 { color: var(--navy); } body.readiness-page .booking-modal .modal-card .eyebrow { color: var(--slate); } body.readiness-page .booking-modal .modal-card label { color: var(--slate); } /* ---- R6 B2: Services nav trigger on readiness (dark) page ---- readiness.css line 473 styles `.hdr .primary-nav > a` to white, but the mega-trigger is a `