/** * Page shell - header/nav bar, footer, main content wrapper, and the * generic "page" bundle article wrapper. Applies sitewide via * page.html.twig, which is what gives every page (not just the 4 * priority pages) consistent nav/typography/spacing. */ .hes-site-header { border-bottom: 1px solid var(--hes-color-border); background: var(--hes-color-background); /* Keeps nav/search/account reachable without scrolling back up - reported as missing on a long page (the homepage's feature rows push CASE STUDIES/CONTACT well below the fold). z-sticky (200) is the token this project already reserves for exactly this role (see tokens.css's z-index scale doc comment). `top` uses core's --drupal-displace-offset-top custom property (set live by core/misc/displace.js, which the admin toolbar module already loads) instead of a literal 0 - an admin user's fixed Drupal toolbar (and its higher z-index) sits above this header, and pinning to top:0 made this sticky header scroll up underneath it, getting its top edge visually cut off/covered. Offsetting by the toolbar's live height keeps this header stuck just below the toolbar instead, and the property is simply unset (falls back to 0) for anonymous visitors with no toolbar at all. */ position: sticky; top: var(--drupal-displace-offset-top, 0px); z-index: var(--hes-z-sticky); } .hes-site-header__inner { display: flex; align-items: center; gap: var(--hes-space-5); padding-block: var(--hes-space-4); flex-wrap: wrap; } /* Pushes nav-bar and everything after it (the account link) to the right, keeping the brand pinned left - simpler than juggling justify-content across three flex children. */ .hes-site-header__inner .hes-nav-bar { margin-left: auto; } .hes-site-header__account .hes-link { font-weight: 600; font-size: var(--hes-text-small-size); text-decoration: none; color: var(--hes-color-text-primary); } .hes-site-header__account .hes-link:hover { color: var(--hes-color-secondary); } .hes-site-header__brand { display: inline-flex; align-items: center; font-weight: 800; font-size: 1.1rem; color: var(--hes-color-text-primary); text-decoration: none; } .hes-site-header__logo { height: 40px; width: auto; display: block; } /* Two logo images (see page.html.twig), toggled by data-theme - the configured logo (hes_logo_url) has black "HillsEditor Services" text baked into its pixels with no CSS-only way to retint a raster image, and was reported nearly illegible against the dark-mode header background. Only ever one visible at a time (display: none/block), so no absolute-positioning/stacking needed - an earlier version tried that and it collapsed .hes-site-header__brand to 0x0, since removing BOTH images from normal flow (one hidden, one positioned out) left nothing to size the flex container. */ .hes-site-header__logo--dark { display: none; } [data-theme="dark"] .hes-site-header__logo--light { display: none; } [data-theme="dark"] .hes-site-header__logo--dark { display: block; } /* Drupal's default breadcrumb template renders an
  1. list - reset list styling explicitly, or it shows browser-default numbering ("1. Home") and indentation, confirmed on the real /user/login page. */ .hes-breadcrumb { padding-block: var(--hes-space-3); font-size: var(--hes-text-small-size); color: var(--hes-color-text-secondary); } .hes-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--hes-space-2); margin: 0; padding: 0; list-style: none; } .hes-breadcrumb li { display: flex; align-items: center; gap: var(--hes-space-2); } /* No CSS-generated "/" separator here on purpose - Olivero's own breadcrumb.css already draws one (a rotated-border chevron on .breadcrumb__item, not a text character) on the same
  2. elements this selector matches. Having both showed as "Home / > Case Studies" on a real multi-level breadcrumb, reported directly. */ .hes-breadcrumb a { color: var(--hes-color-text-secondary); } .hes-breadcrumb a:hover { color: var(--hes-color-secondary); } .hes-main-content { padding-block: var(--hes-section-padding-default); } .hes-page-article__title { margin-top: 0; } .hes-page-article__body { max-width: 75ch; } .hes-case-study-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--hes-space-5); margin-top: var(--hes-space-5); } /* .hes-dark (applied in the template) correctly flips the CSS variables to their dark-scope values, but that alone doesn't make anything visually dark - background was never actually set here, so the footer stayed transparent/white while its text picked up the dark-scope's light color, giving near-invisible light-on-white text (confirmed from a real screenshot). */ .hes-site-footer { background: var(--hes-color-background); padding-block: var(--hes-space-8); } .hes-site-footer__inner p { margin: 0; font-size: var(--hes-text-small-size); color: var(--hes-color-text-secondary); } /* Footer menu block (system_menu_block:footer, Privacy Policy/Terms of Service/Contact Us) renders as a plain Drupal menu