/* ============================================================================= * Location page hero ("WORQ {Location} Coworking Space") + "Plan Your Visit" * section — single-location.php. * * Ported from the approved prototype (single, locked design). Everything here * is namespaced under .loc-hero (Section 1: hero) and .visit (Section 2: Plan * Your Visit) so nothing leaks into the rest of scud-style.css. * * Loaded as a plain tag with a filemtime cache-bust (see single-location.php) * because this template's header never calls wp_footer()/wp_head() in a way that * would print an enqueued stylesheet reliably for ad-hoc assets — same pattern as * hero-expand.css on the landing pages. * * Two colours are hardcoded rather than added as new CSS custom properties, * per design sign-off: * #f7f5ef — cream hero band background * #a25f01 — AA-safe burnt-orange accent (brand --worq-orange is only 2.37:1 on * the cream band, which fails WCAG AA for the building-name text) * All other colours reference the existing --worq-* custom properties defined in * scud-style.css :root. * * Contract with location-hero.js (do not rename without updating the JS): * #loc-hero-introwrap / #loc-hero-introtoggle — hero intro copy collapse (mobile only) * #visitmore / #visittoggle — Plan Your Visit column collapse (<=980px) * .is-collapsible / .is-expanded — state classes the JS toggles * With JS off, no state class is ever added, so both blocks render in full and * both toggle buttons stay hidden. * ========================================================================== */ /* ============ SECTION 1: HERO ============ */ /* Band background: scud-style.css sets `body { background: var(--white); }` and this template's wraps the hero with no intervening container, so a plain single-class rule can lose a same-specificity tie depending on how the page's stylesheets get concatenated/reordered (W3TC minify runs on the live/preview site). Scope to body + add !important so the cream band always wins here. */ body .loc-hero, .loc-hero { background: #f7f5ef !important; } .loc-hero-inner { max-width: 1380px; margin: 0 auto; padding: 36px 32px 44px; display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); gap: 48px; align-items: center; } /* --- media column --- */ .loc-hero-media { position: relative; border-radius: 18px; overflow: hidden; align-self: stretch; min-height: 380px; max-height: 560px; } .loc-hero-media > img { width: 100%; height: 100%; object-fit: cover; } .loc-hero-media-buttons { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; } .loc-hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; border-radius: 999px; /* Media pills keep Montserrat like the theme's own buttons (.location-overview-button: Montserrat, 600, 14px). */ font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 4px 14px rgba(14, 19, 24, .18); text-decoration: none !important; } .loc-hero-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 19, 24, .24); } .loc-hero-pill--light { background: rgba(255, 255, 255, .92); color: var(--worq-navy); } .loc-hero-pill--dark { background: rgba(29, 45, 68, .88); color: #fff; } .loc-hero-pill .pill-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .loc-hero-pill--light .pill-dot { background: var(--worq-navy); color: #fff; } .loc-hero-pill--dark .pill-dot { background: #fff; color: var(--worq-navy); } .loc-hero-pill .pill-dot svg { width: 12px; height: 12px; } /* The gallery/3D-tour/video anchors also carry the sitewide popup-binding classes .location-hero-gallery-link / .location-hero-3d-link (js/scud-script.js hooks the click handlers to those exact class names — do not remove them). But scud-style.css already styles those same classes into a large blurred blob (fixed height up to 10rem, translucent/white background, 2px border, huge right padding reserved for the old dot/arrow spans this markup no longer includes). Reset every legacy property those rules still contribute, scoped to this hero only so no other page that reuses .location-hero-gallery-link/.location-hero-3d-link is affected, then reassert the real pill look at the same (higher) specificity. !important guards against load-order/minify reshuffling on the live/preview site. */ .loc-hero-media .location-hero-gallery-link, .loc-hero-media .location-hero-3d-link { height: auto !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 9px 10px 9px 16px !important; border: none !important; border-radius: 999px !important; position: static !important; font-size: 14px !important; font-weight: 600 !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; box-shadow: 0 4px 14px rgba(14, 19, 24, .18) !important; } .loc-hero-media .location-hero-gallery-link.loc-hero-pill--light { background: rgba(255, 255, 255, .92) !important; color: var(--worq-navy) !important; } .loc-hero-media .location-hero-3d-link.loc-hero-pill--dark { background: rgba(29, 45, 68, .88) !important; color: #fff !important; } @media (max-width: 767px) { .loc-hero-media .location-hero-gallery-link, .loc-hero-media .location-hero-3d-link { font-size: 12.5px !important; padding: 8px 8px 8px 14px !important; } } /* Badge is body-level copy — the theme's body text is "PT Sans Caption", Helvetica, Arial (scud-style.css), not Montserrat; inherit it. */ .loc-hero-photocount { position: absolute; left: 16px; bottom: 16px; background: rgba(14, 19, 24, .55); color: #fff; font-size: 12px; font-weight: 400; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); } /* --- copy column --- */ .loc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; } /* Breadcrumb is body-level copy — inherit the theme's "PT Sans Caption" body font (scud-style.css) instead of Montserrat. */ .loc-hero-breadcrumb { font-size: 12px; color: var(--worq-grey); margin-bottom: 18px; } .loc-hero-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .loc-hero-breadcrumb a { color: var(--worq-grey); text-decoration: none; } .loc-hero-breadcrumb a:hover { color: var(--worq-orange); } .loc-hero-breadcrumb .sep { color: var(--worq-grey); opacity: .55; } .loc-hero-breadcrumb .active { color: var(--worq-navy); font-weight: 400; } .loc-hero-h1 { font-family: 'Montserrat', sans-serif; /* Match the theme's .location-title (scud-style.css): font-weight 600, no letter-spacing tweak. Size stays responsive (the old rule is a flat 2.6rem/3.5rem/4.2rem/4.8rem/5.2rem per breakpoint) via a clamp anchored to the same 2.6rem floor. */ font-weight: 600; line-height: 1.14; /* Raised max vs. the previous clamp so longer location names still get the presence of production's flat 52px .location-title at desktop widths. */ font-size: clamp(2.6rem, 3vw, 4.2rem); color: var(--worq-navy); letter-spacing: normal; margin: 0; /* PHP already outputs a literal lowercase "at "; force it, in case any heading-wide rule elsewhere applies text-transform. */ text-transform: none !important; } /* Weight 500 matches .location-overview-title (scud-style.css) — the closest theme analogue for a secondary building-name line under a location h1. */ .loc-hero-h1 .building { display: block; margin-top: 8px; font-size: .52em; font-weight: 500; line-height: 1.3; color: #a25f01; letter-spacing: 0; text-transform: none !important; } /* Address + chips are body-level copy — "PT Sans Caption" (scud-style.css), inherited, at 1.4rem to match .location-overview-address/-transport. */ .loc-hero-address { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 1.4rem; font-weight: 400; line-height: 1.55; color: var(--worq-grey); max-width: 52ch; } .loc-hero-address svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--worq-orange); } .loc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .loc-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e6e0d2; border-radius: 999px; padding: 6px 13px; font-size: 1.4rem; font-weight: 400; color: var(--worq-navy); } .loc-chip svg { width: 13px; height: 13px; color: var(--worq-orange); flex: none; } .loc-chip img { width: 13px; height: 13px; object-fit: contain; flex: none; } /* Intro copy is body-level — "PT Sans Caption" (scud-style.css), inherited, at 1.5rem to match .location-overview-subtitle (15px). */ .loc-hero-introwrap { position: relative; margin-top: 16px; } .loc-hero-intro { font-size: 1.5rem; font-weight: 400; line-height: 1.65; color: var(--worq-grey); max-width: 58ch; margin: 0; } /* collapsed state — JS adds .is-collapsible on mobile only; gradient mask fades the cut line */ .loc-hero-introwrap.is-collapsible:not(.is-expanded) .loc-hero-intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .loc-hero-introwrap.is-collapsible:not(.is-expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, rgba(247, 245, 239, 0), #f7f5ef); pointer-events: none; } /* Toggle label is body-level copy, not a CTA/button —