/* Single Location | Prefix: uq-location * * THE SMALLEST POSSIBLE SHEET, and that is the point. * * The body of the page renders .uq-project-details -- the component Service * Details already reuses -- so the 1200px container, the 2fr/1fr grid, the 380px * sticky aside, the card padding/border/radius/shadow, the long-form prose * rules, the shared H2/H3/H4 content ladder, the map frame and every breakpoint * all come from style.css and are NOT restated here. The breadcrumbs render * .uq-project-breadcrumbs, so they are not here either. The H1 is registered in * the shared module-title rule in style.css, so its SIZE is not here. * * What is left is the two things a Location genuinely adds: * 1. the header block -- one lead image under a title, the Blog header's * composition without the Blog's tokens; * 2. the NAP / Business Hours rows inside the shared sidebar card. * * EVERY VALUE BELOW IS AN EXISTING TOKEN: * --uq-theme-border / #e5e5e5 the site hairline * --uq-theme-primary #104E8B brand blue * --uq-theme-text #3F4B58 body copy * --uq-module-description-* 16px / 400 / 1.4, 15px under 767px * --uq-module-card-title-* 18px / 500 / 1.35 / -0.015em * --uq-site-font-body / -heading the site's two faces * 12px radius the site's MEDIA radius (.uq-blog-header__image, * .uq-service-areas__grid) -- media frames use 12px * where bordered content cards use 10px * 1200 / 991 / 767 / 479 the site's four breakpoints, unchanged */ .uq-location-page, .uq-location-page *, .uq-location-page *::before, .uq-location-page *::after { box-sizing: border-box; } /* ========================================== Header ========================================== breadcrumbs -> H1 -> lead image. The same order, and the same 5vw gutter and 1200px box, the Project and Service pages open on. */ .uq-location-header { --uq-lh-border: var(--uq-theme-border, #e5e5e5); --uq-lh-primary: var(--uq-theme-primary, #104E8B); width: 100%; padding: 40px 5vw 0; background: #ffffff; font-family: var(--uq-site-font-body, Arial, sans-serif); } .uq-location-header__container { width: 100%; max-width: 1200px; margin: 0 auto; } /* The breadcrumb partial brings its own .uq-project-breadcrumbs container, which already applies the 1200px box and the 5vw gutters. Nested inside this header's container both would apply twice, so the inner one is neutralised -- the same composition note css/hub.css writes for .uq-hub-page .uq-faq. */ .uq-location-header .uq-project-breadcrumbs { padding-right: 0; padding-left: 0; } .uq-location-header .uq-project-breadcrumbs__container { max-width: none; padding-right: 0; padding-left: 0; } .uq-location-header__text { width: 100%; /* The Blog Header's own measure, so a Location opens on the same column the article pages do. */ max-width: 960px; margin: 14px 0 0; } /* NO font-size. .uq-location-header__title is listed in the shared module-title rule in style.css alongside .uq-blog-header__title and .uq-hub__title, so it resolves to --uq-module-title-* (clamp(40px, 3.4vw, 48px) / 40 / 36 / 32) with every other page title on the site. Declaring a size here would beat that rule -- this sheet loads later -- and re-create exactly the private scale the brief rules out. 1.08 / -0.035em are the Default values .uq-hub__title and a Default Project Details title carry. */ /* THE MODIFIER JOINS THIS GROUP, IT DOES NOT COPY IT. .uq-location-header--page is the same header on a Page that is linked to a Location (template-parts/page/location-header.php). It has no .uq-location-page ancestor -- page.php's
is not the Location CPT's -- so it is added to the selector here instead, at the same (0,2,0) and with not one declaration restated. Both contexts therefore render the identical H1 and always will. */ .uq-location-page .uq-location-header__title, .uq-location-header--page .uq-location-header__title { margin: 0; padding: 0; color: var(--uq-lh-primary); font-family: var(--uq-site-font-heading, Arial, sans-serif); text-align: left; text-transform: none; text-wrap: balance; } .uq-location-header__title:not([class*="uq-heading-"]) { font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } /* The theme draws decorative ::before/::after on some headings. */ .uq-location-page .uq-location-header__title::before, .uq-location-page .uq-location-header__title::after, .uq-location-header--page .uq-location-header__title::before, .uq-location-header--page .uq-location-header__title::after { display: none; content: none; } /* ---------- Lead image ---------- THE BLOG HEADER'S LEAD-IMAGE TREATMENT, TO THE VALUE. Measured from css/blog.css rather than chosen: 36px above, a 1px hairline, a 12px radius, the #eef1f4 placeholder ground, `object-fit: cover` on a centred origin, and the band expressed as an ASPECT-RATIO so the space is reserved before the image arrives and the header does not shift as it loads. 2 / 1 is the client's own current value for a lead photograph on this site -- css/blog.css documents it as the deliberate step back from 16/9 when they asked for a shorter header, with 21/9 rejected as too cinematic. A Location's lead image is the same kind of object on the same width of column, so it takes the same ratio instead of a private one. The 16/9 phone step below is that sheet's too, and for its stated reason: the column is narrow there, so the desktop ratio would read as a strip rather than a photograph. Rendered only when a featured image exists: there is no placeholder rule here because there is no placeholder element -- the whole
is inside the conditional in header.php, so an imageless Location simply has no media box and no reserved space. */ .uq-location-header__media { display: block; width: 100%; margin: 36px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--uq-lh-border); border-radius: 12px; background: #eef1f4; } .uq-location-header__image { display: block; width: 100%; height: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center; } /* ========================================== NAP list ========================================== Inside the shared .uq-project-details__card, so the padding, border, radius and shadow are the card's own and none of them are restated. */ .uq-location-nap { margin: 0; padding: 0; } .uq-location-nap__row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--uq-theme-border, #e5e5e5); } .uq-location-nap__row:first-child { padding-top: 0; } .uq-location-nap__row:last-child { padding-bottom: 0; border-bottom: 0; } .uq-location-nap__label { margin: 0; color: var(--uq-theme-text, #3F4B58); font-family: var(--uq-site-font-body, Arial, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase; } .uq-location-nap__value { margin: 0; color: #111111; font-family: var(--uq-site-font-body, Arial, sans-serif); font-size: var(--uq-module-description-size, 16px); font-weight: var(--uq-module-description-weight, 400); line-height: var(--uq-module-description-line-height, 1.4); overflow-wrap: anywhere; } /* THE GLOBAL ANCHOR RULES HAVE TO BE ANSWERED, and each needs the specificity named beside it -- the same three style.css traps .uq-hub-card__heading-link documents: a { color: #FDBB2F } -> (0,0,1), so (0,1,0) here wins a { font-weight: 600 } -> same a:hover { color: #FDBB2F } -> (0,1,1), so the hover rule below is (0,2,0) The FACE needs no !important because these links stay in the BODY face, which is what :root's `body, p, a, li, ... { font-family: ... !important }` already sets them to. */ .uq-location-nap__link { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-decoration: none; transition: color 0.2s ease; } .uq-location-nap__link:hover, .uq-location-nap__link:focus-visible { color: var(--uq-theme-primary, #104E8B); text-decoration: underline; text-underline-offset: 2px; } .uq-location-nap__link:focus-visible { outline: 2px solid var(--uq-theme-primary, #104E8B); outline-offset: 3px; } /* ========================================== Business hours ========================================== */ /* The site's shared card-title scale, so this sits exactly where a Service card title does. Every property the global `h2 { font-size: 38px; font-weight: 700; color: #104E8B; margin: 0 0 15px }` sets is restated, because a class beats an element selector only for the properties it actually declares. */ .uq-location-page .uq-location-hours__title, .uq-linked-location .uq-location-hours__title { margin: 22px 0 10px; padding: 0; color: #111111; font-family: var(--uq-site-font-heading, Arial, sans-serif) !important; font-size: var(--uq-module-card-title-size, 18px); font-weight: var(--uq-module-card-title-weight, 500); line-height: var(--uq-module-card-title-line-height, 1.35); letter-spacing: var(--uq-module-card-title-letter-spacing, -0.015em); text-transform: none; } .uq-location-page .uq-location-hours__title::before, .uq-location-page .uq-location-hours__title::after, .uq-linked-location .uq-location-hours__title::before, .uq-linked-location .uq-location-hours__title::after { display: none; content: none; } /* The NAP list above ends on a borderless row; the hours block opens on one, so the two read as one card rather than two stacked ones. */ .uq-location-nap + .uq-location-hours__title { padding-top: 22px; border-top: 1px solid var(--uq-theme-border, #e5e5e5); } .uq-location-hours { margin: 0; padding: 0; } .uq-location-hours__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 7px 0; } .uq-location-hours__row:first-child { padding-top: 0; } .uq-location-hours__row:last-child { padding-bottom: 0; } .uq-location-hours__day, .uq-location-hours__value { margin: 0; min-width: 0; font-family: var(--uq-site-font-body, Arial, sans-serif); font-size: var(--uq-module-description-size, 16px); line-height: var(--uq-module-description-line-height, 1.4); overflow-wrap: anywhere; } .uq-location-hours__day { color: #111111; font-weight: 500; } .uq-location-hours__value { color: var(--uq-theme-text, #3F4B58); font-weight: var(--uq-module-description-weight, 400); text-align: right; } /* ========================================== Responsive ========================================== The site's own breakpoints -- 1200 / 991 / 767 / 479 -- so this page changes shape at the same widths as every other. The H1 steps are NOT here: they come from the shared module-title rule in style.css at exactly these widths. */ @media screen and (max-width: 991px) { .uq-location-header { padding-top: 32px; } } @media screen and (max-width: 767px) { .uq-location-header { padding-top: 24px; } .uq-location-header__text { margin-top: 12px; } /* css/blog.css's own two phone steps for a lead image, unchanged. */ .uq-location-header__media { margin-top: 28px; } .uq-location-header__image { aspect-ratio: 16 / 9; } .uq-location-nap__value, .uq-location-hours__day, .uq-location-hours__value { font-size: var(--uq-module-description-size-mobile, 15px); } /* A narrow card stacks the day and its hours rather than squeezing them onto one line with two words each. */ .uq-location-hours__row { flex-direction: column; gap: 1px; } .uq-location-hours__value { text-align: left; } } @media screen and (max-width: 479px) { .uq-location-header { padding-right: 16px; padding-left: 16px; } } @media (prefers-reduced-motion: reduce) { .uq-location-page *, .uq-location-page *::before, .uq-location-page *::after, .uq-linked-location *, .uq-linked-location *::before, .uq-linked-location *::after { transition-duration: 0.01ms !important; } } /* ========================================== Linked Location module (Page Builder) ========================================== Markup: template-parts/flexible-content/linked-location-details.php. ONE PANEL, NOT TWO CARDS. Earlier versions of this module put the details in one .uq-project-details__card and the map in another, separated by the component's 48px gap -- and that is exactly what it looked like: a data card and a map that happened to be adjacent. The border, the radius and the shadow now belong to ONE element, .uq-linked-location__panel, which clips its contents; the two halves meet on a single hairline with no gap and no second frame. THE PANEL IS .uq-project-details__card, and it stays that. It takes that component's border, 10px radius, shadow and white ground -- none of which is restated here, so this panel changes when the Project's and the Service's cards change -- and overrides exactly one property, `padding`, to 0. That is the same move .uq-project-details__map-card already makes for the Project, and for the same reason: the card is the frame, so its children own the padding. WHAT IS STILL INHERITED AND NOT REWRITTEN: the section's container and its 5vw/1200px measure, the card's frame, the map's own sizing hooks, the NAP and hours lists above in this file, the shared card-heading step, and all four of the site's breakpoints. NOTHING BELOW CAN REACH THE SINGLE LOCATION PAGE. Every selector is under .uq-linked-location, which only this module emits -- so the composition and spacing work in this pass leaves single-location.php rendering exactly as it does today. */ .uq-linked-location { --uq-lld-border: var(--uq-theme-border, #e5e5e5); --uq-lld-primary: var(--uq-theme-primary, #104E8B); --uq-lld-text: var(--uq-theme-text, #3F4B58); /* The panel's own inner padding. 32px on desktop rather than the card's own 24px: with no second frame inside it, the copy needs the extra air to read as an editorial block instead of a dense admin panel. Both values are the site's own 8px spacing steps. */ --uq-lld-pad: 32px; } /* ---------- The panel ---------- */ /* overflow: hidden is what makes this ONE component: it clips the map to the card's own 10px corners, so the map has no radius of its own to disagree with and no second border can appear inside the frame. padding: 0 at (0,2,0) also answers style.css's responsive `.uq-project-details__card { padding: 20px }` at 767px, which is (0,1,0) -- without this the panel would grow a 20px frame around both halves on mobile and the map would stop meeting its edges. One column by default. That IS the mobile layout, and it is also the layout for a panel that has only one half to show, so neither needs a rule of its own. */ .uq-linked-location .uq-linked-location__panel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; } /* ---------- Desktop: INFORMATION | MAP ---------- */ /* 2fr / 3fr is the 40 / 60 split, as a ratio rather than a fixed width so it holds at every viewport instead of only at 1200px. align-items: stretch is what lets the map fill the full height of its side: the row is as tall as the information column, and the map fills the row. The single-half panels keep the one-column default above, so there is no empty track to collapse. The information-only panel is additionally capped -- a short contact list stretched across 1200px stops reading as a card -- and left-aligned on the container, which is where the module's content sits now that there is no centred header above it. */ @media screen and (min-width: 992px) { .uq-linked-location .uq-linked-location__panel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; } .uq-linked-location .uq-linked-location__panel--info-only, .uq-linked-location .uq-linked-location__panel--map-only { grid-template-columns: minmax(0, 1fr); } .uq-linked-location .uq-linked-location__panel--info-only { max-width: 520px; } } /* ---------- The information side ---------- */ .uq-linked-location__info { min-width: 0; padding: var(--uq-lld-pad); } /* THE ONE SEAM. A hairline, not a gap: the two halves touch, and the line is the card's own border colour, so it reads as one component divided rather than as two objects. It moves from the bottom edge to the left edge at 992px with the layout, and it is omitted entirely when there is no map on the other side of it -- otherwise a panel with only an information side would carry a stray rule along its bottom. */ .uq-linked-location .uq-linked-location__panel:not(.uq-linked-location__panel--info-only) .uq-linked-location__info { border-bottom: 1px solid var(--uq-lld-border); } @media screen and (min-width: 992px) { .uq-linked-location .uq-linked-location__panel:not(.uq-linked-location__panel--info-only) .uq-linked-location__info { border-right: 1px solid var(--uq-lld-border); border-bottom: 0; } } /* ---------- The eyebrow ---------- */ /* OPT-IN AND QUIET, and deliberately the SAME step as the NAP labels below it -- 11px / 700 / 0.08em uppercase in the muted text colour -- so the panel has one small-label voice rather than two. That step is the site's own: .uq-project-details__map-eyebrow and .uq-service-comparison__service-eyebrow already carry it inside a card. The accent pill treatment is not used here; it belongs to centred section headers, and this module has none. */ .uq-linked-location .uq-linked-location__eyebrow { display: block; margin: 0 0 10px; padding: 0; color: var(--uq-lld-text); font-family: var(--uq-site-font-body, Arial, sans-serif); font-size: 11px; font-weight: 700; /* Tracking is what makes 11px uppercase read as a designed label rather than as cramped small text. */ letter-spacing: 0.08em; line-height: 1.2; text-align: left; text-transform: uppercase; } /* ---------- The title ---------- */ /* THE SITE'S CARD-HEADING STEP, NOT A NEW ONE, AND NOT THE PAGE-SECTION STEP. Every value is .uq-service-details__card-title's, which is itself .uq-project-details__map-title's: 24px / 500 / 1.2 / -0.01em in primary blue, stepping to 22 at 767 and 20 at 479. That is the whole answer to "the page H1 must stay the only large heading": the element is an

for the document outline, and 24px for the eye. NO font-family DECLARATION. The theme's global `h1,h2,h3,h4,h5,h6 { font-family: var(--uq-site-font-heading) !important }` already pins every heading to Roobert, and a plain declaration here could not beat it anyway. The copy below it is on the body face for the mirror reason -- `body, p, a, li, ... { font-family: ... !important }` -- so both faces are the site's without this file setting either. (0,2,0) beats the bare `h2 { font-size: 38px; font-weight: 700 }` at (0,0,1), so there is no doubled class and no !important. */ .uq-linked-location .uq-linked-location__title { display: block; margin: 0 0 22px; padding: 0; color: var(--uq-lld-primary); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-align: left; text-transform: none; overflow-wrap: anywhere; } /* The theme decorates some headings with rules through ::before/::after; this one opts out exactly as the two card headings it borrows from do. */ .uq-linked-location .uq-linked-location__title::before, .uq-linked-location .uq-linked-location__title::after { display: none; content: none; } /* ---------- The NAP list, made editorial ---------- */ /* THE HAIRLINES BETWEEN ROWS ARE REMOVED HERE, AND ONLY HERE. On the single Location page the NAP list is the whole card and the rules give it structure; inside this panel they were the thing that made it read as a spec table in an admin screen. Space does that job instead -- 20px between rows, 5px between a label and its value -- which is the calmer, more editorial reading the brief asks for. The single Location page keeps its rules: every selector here is under .uq-linked-location. The LABELS drop from 13px / 400 / 0.04em to the 11px / 700 / 0.08em step the eyebrow above uses, so the panel has one small-label voice and the values are clearly the thing being read. The VALUES are untouched -- still the shared --uq-module-description-* tokens, 16px and 15px under 767px. */ .uq-linked-location .uq-location-nap__row { gap: 5px; padding: 0 0 20px; border-bottom: 0; } .uq-linked-location .uq-location-nap__row:last-child { padding-bottom: 0; } .uq-linked-location .uq-location-nap__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; } /* ---------- Business hours ---------- */ /* THE PANEL'S ONE INTERNAL RULE, and it earns its place: it separates two different kinds of information rather than decorating rows of the same kind. Only drawn when a NAP list actually precedes it -- (0,3,0), so it beats the base rule below it -- so hours alone open the panel with no stray line above them. */ .uq-linked-location .uq-location-hours__title { margin: 0 0 14px; padding-top: 0; border-top: 0; } .uq-linked-location .uq-location-nap + .uq-location-hours__title { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--uq-lld-border); } .uq-linked-location .uq-location-hours__row { padding: 8px 0; } .uq-linked-location .uq-location-hours__row:first-child { padding-top: 0; } .uq-linked-location .uq-location-hours__row:last-child { padding-bottom: 0; } /* ---------- The map side ---------- */ /* THE MAP IS UNCHANGED -- same container, same saved coordinates, same marker, same js/project-map.js renderer, same API loader. What changes is only the frame around it: the panel is the frame now, so the map's own 1px border and 10px radius are cleared and it fills its half edge to edge. The panel's overflow: hidden is what rounds its outer corners. aspect-ratio is switched off in favour of height: 100%, which is what "fills the full height of its side" means: on desktop the grid row is as tall as the information column and the map matches it exactly, whatever the Location's hours add up to. min-height is the floor for the two cases where nothing else sets the height -- a sparse Location beside a short information column, and the stacked mobile layout, where the row has no other content to take its height from. */ /* display: grid so the map stretches to the side's full height on its own, as a grid item, rather than depending on `height: 100%` resolving against a stretched parent that has no height of its own. The height declaration below stays as the belt to this braces. */ .uq-linked-location__map-side { display: grid; min-width: 0; } .uq-linked-location .uq-linked-location__map-side .uq-project-details__map { aspect-ratio: auto; width: 100%; height: 100%; min-height: 300px; max-height: none; border: 0; border-radius: 0; } @media screen and (min-width: 992px) { .uq-linked-location .uq-linked-location__map-side .uq-project-details__map { min-height: 360px; } } /* ---------- Responsive ---------- */ /* The site's own breakpoints. The title steps 24 / 22 / 20, the same two steps .uq-service-details__card-title and .uq-project-details__map-title take at the same widths; the panel's padding steps 32 / 24 / 20 on the site's 8px scale so a phone does not spend a quarter of its width on a card frame. The NAP and hours type steps need no entry at all -- the shared rules above in this file already move them to --uq-module-description-size-mobile at 767px. */ @media screen and (max-width: 767px) { .uq-linked-location { --uq-lld-pad: 24px; } .uq-linked-location .uq-linked-location__title { margin-bottom: 18px; font-size: 22px; } } @media screen and (max-width: 479px) { .uq-linked-location { --uq-lld-pad: 20px; } .uq-linked-location .uq-linked-location__title { font-size: 20px; } }