/* ========================================================================== Hubs and archives Blog Hub, Post archives, Projects Hub, projects taxonomy archives Loaded by uq_hub_assets() (inc/hub.php), gated on those contexts only. ========================================================================== THIS FILE CONTAINS NO CARD RULES, AND THAT IS THE POINT. The card is its own component -- .uq-hub-card in css/hub-card.css -- because the Related Projects carousel renders it too, on a page this sheet is not loaded on. What lives here is only the archive furniture: the page shell, the heading block, the navigation row, the grid columns and the pagination. Nothing here is a new colour, radius, shadow or type scale. Every value is a theme token or a value lifted from the reference archive so the hubs read as one family with the rest of the site: container 1200px, 5vw gutters as .uq-blog-page / .uq-project-details border #e5e5e5 --uq-theme-border blue #104E8B --uq-theme-primary body text #3F4B58 --uq-theme-text grid gaps 24px column / 40px row the reference's own archive grid H1 scale --uq-module-title-* declared in style.css, not here */ /* The theme has a global `main { float: right; width: 74% }` left over from the old sidebar layout. Projects, Services and the Blog each answer it with their own `main.uq-*-flex-page` rule; this is the hubs'. (0,1,1) beats the bare `main` selector, and this sheet loads after style.css. */ main.uq-hub-flex-page { display: block; float: none; clear: both; width: 100%; max-width: none; margin: 0; overflow: visible; } .uq-hub-page, .uq-hub-page *, .uq-hub-page *::before, .uq-hub-page *::after { box-sizing: border-box; } .uq-hub-page { --uq-hub-border: var(--uq-theme-border, #e5e5e5); --uq-hub-primary: var(--uq-theme-primary, #104E8B); --uq-hub-primary-dark: #0d3f71; --uq-hub-muted: var(--uq-theme-text, #3F4B58); --uq-hub-ink: #111111; /* The reference archive's own grid: 24px between columns, 40px between rows. Close rows keep the page compact rather than airy, which is what "do not make the grid overly spacious" asks for. */ --uq-hub-gap: 24px; --uq-hub-row-gap: 40px; --uq-hub-columns: 3; /* The category row sits in a band bounded by the site header's bottom rule above and the menu's own rule below, and the client asked for the row to be centred in it. The space above the row is the hub header's top padding and the space below it is the menu's bottom padding -- two different elements -- so ONE value drives both. Change it in a breakpoint and the row stays centred; set the two paddings separately and it will not. band height = --uq-hub-nav-space + the row + --uq-hub-nav-space 26px made that band ~86px on desktop, and the client's note on it is that the gap between the two lines is too tall now that the row is centred in it. 16px brings it to ~66px. Nothing else about the row changes -- the type, the colours, the left alignment, the 30px item gap and the two rules are all untouched, and the row stays centred because ONE value still drives both halves. The ladder below it moves by the same proportion, so the band is shorter at every width rather than only on desktop. */ --uq-hub-nav-space: 16px; width: 100%; background: #ffffff; color: #000000; font-family: var(--uq-site-font-body, Arial, sans-serif); } /* One inner box for every hub section -- the site's 1200px container. */ .uq-hub__container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ========================================== Header ========================================== THE ORDER IS: menu -> breadcrumbs -> title -> description, and nothing else. No hero, no marketing band, no filter panel. It used to be breadcrumbs -> menu -> title. The client asked for the trail to sit under the menu and above the title, which is also what the hairline under the Blog menu now makes visible: the menu belongs to the hub and is fenced off above the line, and the trail plus the heading -- which describe the one page you are on -- sit together below it. */ .uq-hub__header { width: 100%; padding: var(--uq-hub-nav-space) 5vw 0; background: #ffffff; } /* Second in the block now, between the menu and the H1. */ .uq-hub__breadcrumbs { margin: 0 0 14px; } .uq-hub__breadcrumbs .breadcrumbs { margin: 0; /* A long trail wraps inside the container instead of widening the page. */ overflow-wrap: anywhere; } /* The archive H1 and its standfirst share the Blog Header's own measure, so a hub opens on the same column the article pages do. */ .uq-hub__intro-text { width: 100%; max-width: 960px; } /* NO font-size here. .uq-hub__title is listed in the shared section-title rule in style.css alongside .uq-service-feature__title, .uq-project-details__title and .uq-blog-header__title, so it resolves to --uq-module-title-* (clamp(40px, 3.4vw, 48px) / 40 / 36 / 32) with every other module title. Declaring a size here would beat that rule -- this sheet loads later -- and re-create exactly the private hub scale the brief rules out. 1.08 / -0.035em are .uq-process__section-title's Default values, the same pair a Default Project Details and Blog Header title now carry. */ .uq-hub-page .uq-hub__title { margin: 0; padding: 0; color: var(--uq-hub-primary); font-family: var(--uq-site-font-heading, Arial, sans-serif); text-align: left; text-transform: none; text-wrap: balance; } .uq-hub__title:not([class*="uq-heading-"]) { font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; } /* "Blog / Roofing Tips" -- the hub's own name faded, the category prominent. Only a composed path is wrapped in these spans (see uq_hub_title_html()), so the Blog Hub's own H1, a Projects term title and a search heading are one plain text node and none of them is affected by anything here. Fading is opacity on the heading's OWN --uq-hub-primary rather than a second colour: it reads as the same word de-emphasized, which is what the reference does, and it introduces no new value to the palette. Family, size, weight, line-height and tracking all still come from the rules above -- the leaf needs no declaration at all, because full strength IS the H1. 0.6 keeps the faded half at 3.1:1 on white, past the 3:1 WCAG AA threshold for large text (this H1 is 40-48px). The slash is punctuation between two readable words rather than content, so it can sit a step lighter again. */ .uq-hub__title-root { opacity: 0.6; } /* Quo wraps the root AND the slash in ONE span at rgba(0,0,0,0.5) -- a single faded value, not two. Matching that, both carry the same 0.6 here. 0.6 rather than Quo's 0.5 because ours fades the brand blue instead of black: at 0.5 that lands on 2.6:1, under the 3:1 WCAG AA floor for large text, while 0.6 measures 3.14:1. Quo's own black at 0.5 is 3.95:1, so this keeps their ratio's INTENT and their result's accessibility on our palette. */ .uq-hub__title-sep { opacity: 0.6; } .uq-hub-page .uq-hub__title::before, .uq-hub-page .uq-hub__title::after { display: none; content: none; } /* The Blog Header standfirst treatment, to the value. */ .uq-hub__description { max-width: 860px; margin: 18px 0 0; color: var(--uq-hub-muted); font-size: 18px; font-weight: 400; line-height: 1.55; } /* ========================================== Archive navigation ========================================== A PLAIN CATEGORY MENU, NOT A TAB STRIP. The first pass drew this as a bordered row with a blue underline on the current item, and the client's note was that it read as a custom tabs/filter component rather than as the reference's ordinary archive navigation. So: removed border-top + border-bottom on .uq-hub-nav (the "double rule") removed box-shadow underline on .uq-hub-nav__link.is-current removed the 12px vertical padding those two needed to sit against What is left is text links with natural spacing. The current item is marked by WEIGHT AND COLOUR ONLY -- brand blue at 600 against #3F4B58 at 500 -- which is enough to read and carries no chrome. No pills, no backgrounds, no borders, no indicator bar. Every entry is a real to a real WordPress archive; the only script in the row is the Project Location dropdown's, and even that is optional (see the :focus-within fallback below). */ /* ONE LINE, WITH THE ROW CENTRED IN THE BAND ABOVE IT. This used to draw a rule above the row as well as below it. The client's note is that the top rule has to go -- the site header already ends in a hairline of its own, a few dozen pixels up, and a second one directly beneath it read as a double rule rather than as the top of anything. So the band the row sits in is now bounded by the SITE HEADER'S line above and this menu's line below, and the row is centred between those two. Centring it is not a property of this element alone. The space above the row belongs to .uq-hub__header's top padding and the space below it belongs to the padding here, so both read --uq-hub-nav-space and the row is centred by construction at every breakpoint. That is also why the padding here is bottom-only: the top half of the band is already paid for by the header. Removing the 1px top rule and splitting what is left evenly puts the line within a pixel of where it was, so the breadcrumbs, the H1 and the grid below do not move. The margin-bottom is untouched for the same reason. Still not the tab strip that an earlier pass rejected: the line spans the WHOLE row and nothing is drawn per item -- no underline on the current link, no pill, no background, no box. The current item is marked by weight and colour alone. The row is LEFT-ALIGNED, measured off quo.com/blog/ after the client asked for the menu to follow it: their .single-blog-nav__nav-items is flex with justify-content flex-start inside the same 1200px container, gap 27.3px. Ours stays 30px -- inside rounding for the eye, and already the top of this sheet's own responsive ladder (30/26/22/20). */ .uq-hub-nav { width: 100%; /* FIRST in the header -- above the breadcrumbs, which are above the H1. Quo puts its categories above the archive title too, so this order matches. */ margin: 0 0 18px; padding: 0 0 var(--uq-hub-nav-space); border-bottom: 1px solid var(--uq-hub-border); } .uq-hub-nav__list { display: flex; flex-wrap: wrap; align-items: center; /* No justify-content: flex-start is the default and it is what Quo's .single-blog-nav__nav-items computes to. Their row sits at the left edge of the same 1200px container the page below it uses, which is where this one now sits too. */ /* Row gap only shows once the row wraps on a narrow screen. */ gap: 6px 30px; min-width: 0; margin: 0; padding: 0; list-style: none; } .uq-hub-nav__item { position: relative; margin: 0; padding: 0; list-style: none; } /* The theme draws `article ul li::before { content: '-' }`. */ .uq-hub-nav__item::before, .uq-hub-nav__item::after, .uq-hub-nav__menu-item::before, .uq-hub-nav__menu-item::after { display: none; content: none; } /* Plain text. The small vertical padding is the touch target and the hover bridge to the dropdown panel -- it is not a box, and nothing is ever painted behind it. */ /* ONE COLOUR FOR EVERY ENTRY, CURRENT OR NOT. The client's direction: "Make the categories font in black and do not change color when choosing it because it shows the main title Blog/Roofing Tips which one it is." So the row no longer carries a selected COLOUR at all -- the heading above it already names the archive you are on (item #19's faded "Blog / Roofing Tips"), and two answers to the same question is one too many. --uq-hub-ink is this sheet's existing black, the same token the links used to reach on hover; nothing new is introduced and no brand blue is left anywhere in the row. The is-current CLASS and aria-current stay exactly as they are in archive-nav.php -- only the colour distinction is gone. The hover and is-current:hover rules that used to live here were colour-only and are removed rather than left restating the base: with every entry black there is nothing for them to change. `transition: color` is kept so a future hover treatment has it, and it is inert meanwhile. */ .uq-hub-nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; border: 0; background: none; color: var(--uq-hub-ink); font-family: var(--uq-site-font-body, Arial, sans-serif); font-size: 16px; /* Overrides the global `a { font-weight: 600 }`. */ font-weight: 500; line-height: 1.4; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.2s ease; } /* The outline is the focus indicator and stays -- it is not a selected state, and it is the only thing that shows a keyboard user where they are. */ .uq-hub-nav__link:focus-visible { outline: 2px solid var(--uq-hub-primary); outline-offset: 3px; } /* THE ARCHIVE YOU ARE ON GETS NO VISUAL TREATMENT AT ALL, and that is measured from Quo, not assumed: on quo.com/blog/category/guides/ the current "Guides" link carries aria-current="page" and computes to the SAME colour (black), the SAME weight (500), no underline, no border-bottom and no background as the other five. The heading above it -- "Blog / Guides" -- is what says where you are, exactly as the client put it. The previous pass removed the colour and kept a 600 weight; Quo keeps neither, so the rule that carried the weight is gone. is-current and aria-current are still emitted by archive-nav.php and are untouched. */ /* Small and quiet: it marks the one item that opens, it does not decorate it. Deliberately lighter than the label so the trigger still reads as a link. */ .uq-hub-nav__caret { display: block; width: 10px; height: 10px; flex: 0 0 auto; opacity: 0.65; transition: transform 0.2s ease; } .uq-hub-nav__toggle:hover .uq-hub-nav__caret, .uq-hub-nav__toggle.is-current .uq-hub-nav__caret { opacity: 1; } .uq-hub-nav__item--menu.is-open .uq-hub-nav__caret { transform: rotate(180deg); opacity: 1; } /* ---------- The Project Location dropdown ---------- The TRIGGER is a navigation link that happens to be a