/** * Brookstone brand retheme of Olivero (public site + client portal). * * Olivero derives its whole palette from a few HSL variables, so remapping those * recolors the entire theme from one place (buttons, links, header, footer, * forms, cards) instead of touching every component. Warm & immersive: brand * orange primary, warmed neutrals, paper page background, Oswald headings — to * match the /winterize pages. Brand tokens come from bo-tokens.css (site-wide). * * FIRST PASS — reviewed + refined on dev. Loaded after Olivero's base in the * subtheme global library, so these overrides win. */ :root { /* NOTE: the PRIMARY color (buttons, links, focus, accents) is NOT set here. olivero.theme injects --color--primary-hue/saturation/lightness as an inline style on from the `base_primary_color` theme setting, and an inline element style beats any stylesheet :root. So primary = brand orange #CB6015 is set via that theme setting (brookstone_olivero.settings:base_primary_color), not CSS. These remaining vars are NOT inline-injected, so overriding here works. */ /* Warm the neutral grays toward the brand paper/sand/ink family (was blue-cool). */ --color--gray-hue: 30; --color--gray-saturation: 12%; /* Secondary accent → brand green. */ --color--green: #007a33; } /* Warm, immersive page background (cards/surfaces stay white for contrast) + Source Serif 4 body prose to match the winterize pages. */ body { background-color: var(--bo-paper, #faf7f2); background-image: none; /* remove Olivero's decorative droplet/leaf pattern */ font-family: "Source Serif 4", Georgia, "Times New Roman", serif; /* M2: Olivero sets `hyphens: auto` on body (inherited everywhere), which broke words across lines ("installa-tion"). Turn it off + keep prose left-aligned. */ hyphens: manual; text-align: left; } /* Keep UI chrome crisp in the sans face — form fields and menus read better sans-serif; headings and buttons are Oswald (below). */ input, textarea, select, optgroup, .primary-nav__menu-link { font-family: var(--font-sans); } /* Links rest at the true brand orange (#CB6015 = primary-50) and DARKEN on hover. Olivero ships this backwards (resting = darker primary-40, hover = brighter primary-50), which made resting links read too dark. */ a { color: var(--color--primary-50); } a:hover, a:focus { color: var(--color--primary-30); } /* Primary menu links → brand orange (were dark ink), matching body links. */ .primary-nav__menu-link { color: var(--color--primary-50); } .primary-nav__menu-link:hover, .primary-nav__menu-link:focus { color: var(--color--primary-30); } /* Primary buttons rest at bright brand orange (#CB6015 = primary-50) and darken on hover. Olivero ships them at the darker primary-40, darkening to -30. */ .button--primary { border-color: var(--color--primary-50); background-color: var(--color--primary-50); } .button--primary:hover, .button--primary:focus { border-color: var(--color--primary-40); background-color: var(--color--primary-40); } .button--primary:active { border-color: var(--color--primary-50); background-color: var(--color--primary-50); } /* Footer → flat brand ink (matches the winterize footer), warm light text, orange link hover. Olivero already ships a dark gray-5→gray-10 gradient; this pins it to the exact brand tone. */ .site-footer { background: var(--bo-ink, #1a1613); color: #d8cfc4; } .site-footer a:hover, .site-footer a:focus { color: var(--color--primary-60); } /* Oswald display headings site-wide — matches the winterize pages. Body text keeps Olivero's readable face. !important because Olivero sets heading fonts via higher-specificity class selectors (.page-title, .text-content h2, …). */ h1, h2, h3, h4, h5, h6, .page-title, .site-title__name, .block__title, .field--name-title, .text-content h1, .text-content h2, .text-content h3, .text-content h4, .cta-link__link, .button { font-family: "Oswald", "Arial Narrow", sans-serif !important; letter-spacing: 0.01em; } /* Sitewide brand lockup (matches the /winterize header): round emblem + "BROOKSTONE OUTDOORS" in Oswald + tagline. Rendered by the branding block override (block--system-branding-block.html.twig). */ .bo-brand { display: flex; align-items: center; gap: 15px; } .bo-brand__logo-link { display: block; flex: none; line-height: 0; } .bo-brand__logo { width: 78px; height: 78px; display: block; } .bo-brand__text { text-decoration: none; display: block; } .bo-brand__text:hover { text-decoration: none; } .bo-brand__name { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 21px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bo-ink, #1A1613); display: flex; align-items: baseline; gap: .38em; line-height: 1.1; } /* "Brookstone" is the logo font (Fractus) as an image — embedding is restricted, so it ships as artwork, not a webfont. Sized so its cap height sits a touch above the Oswald "Outdoors" beside it; bottom aligns to the text baseline. */ .bo-brand__wordmark { height: 1.02em; width: auto; display: block; } .bo-brand__outdoors { display: block; line-height: 1; } /* Same Fractus "Brookstone" wordmark reused in the marketing topbar + footers (ink art on light surfaces, white art on dark). The containers flex so the image baseline-aligns with the "Outdoors" text next to it. */ .bo-wordmark { height: 1.02em; width: auto; display: block; } .bo-topbar__name, .bo-footer__name { display: flex; align-items: baseline; gap: .34em; } .bo-brand__tag { font-size: 13.5px; font-style: italic; color: var(--bo-muted, #6b5d4f); display: block; } @media (max-width: 60rem) { .bo-brand__logo { width: 54px; height: 54px; } .bo-brand__name { font-size: 17px; } .bo-brand__tag { font-size: 12px; } } /* Drop the tagline on phones — the logo + wordmark + hamburger crowd it out. */ @media (max-width: 48rem) { .bo-brand__tag { display: none; } } /* Header bar: one continuous surface in the warm sand tone (matches the page sections). The header/toggle KEEP Olivero's default geometry (that's what the live site uses and it looks right) — this only recolors, never resizes. */ .site-header__inner, .site-branding, .site-branding--bg-gray, .site-branding--bg-white { background: var(--bo-sand, #F2E9DC); } /* Float the logo + text vertically centered in the header (was bottom-aligned, which clipped the top of the logo as the header shrank on scroll). */ .site-branding { display: flex; align-items: center; } /* Shrink the tall (180px) desktop header down to fit the logo, and center the content. Desktop only (>=75rem); mobile hamburger breakpoint untouched. CRITICAL: the sticky-toggle tab is `height: var(--sp6)` = 108px, so if the header is shorter than that the toggle clips/vanishes (this is what broke it before). We shrink the toggle to match the header, so both stay in sync. */ @media (min-width: 75rem) { :root { --site-header-height-wide: 6rem; } /* 180px -> 96px, fits the ~78px lockup */ .sticky-header-toggle { height: 6rem; } /* was --sp6 (108px); match the header so it can't clip */ } .site-header__fixable { align-items: center; } /* Center the toggle (X / hamburger) in its orange tab — Olivero bottom-aligns it (flex-end), which leaves a big empty orange gap above the icon. */ .site-header__initial { align-items: center; } /* When the header sticks on scroll, Olivero pulls it UP by --sp4 (72px) — sized for the old 180px bar. On our shorter 96px header that pull-up clips the logo and toggle off the top. Remove the pull-up so the short header stays fully visible when fixed (the nav still slides left / toggle still reveals it). */ @media (min-width: 75rem) { body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed { inset-block-start: var(--drupal-displace-offset-top, 0px); } } /* The menu region (.header-nav) paints itself white — unify it with the sand bar (the mobile slide-in nav becomes sand too, which reads fine). */ .header-nav, body:not(.is-always-mobile-nav) .header-nav { background-color: var(--bo-sand, #F2E9DC); } /* When the header sticks on scroll and the sand bar (.site-header__inner) slides left, the area it vacates should be BLACK instead of the white page behind it. Paint ONLY the outer
(.site-header) — NOT .site-header__fixable (the toggle's parent, which broke the hamburger). The sand bar + orange toggle sit on top, so this black shows only in the vacated area during the slide. */ .site-header { background-color: var(--bo-ink, #1A1613); } /* Services dropdown caret: the box behind the arrow was white (wrong on sand) — blend it into the header with a brand-blue chevron. */ body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { background-color: transparent; } body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after { /* Bolder + larger chevron so it doesn't get lost in the header. */ width: 0.62rem; height: 0.62rem; border-right: solid 3px var(--bo-blue, #62B5E5); border-bottom: solid 3px var(--bo-blue, #62B5E5); opacity: 1; } /* M1 (round 2b) — keep the mobile header on ONE line so the phone doesn't wrap under the wordmark. Branding shrinks, phone is pushed to the right just before the hamburger. Below the desktop-nav breakpoint only. */ @media (max-width: 74.9375em) { .site-header__inner__container { flex-wrap: nowrap; align-items: center; } .site-branding.bo-brand { flex: 0 1 auto; min-width: 0; gap: 10px; } .bo-brand__logo { width: 46px; height: 46px; } .bo-brand__name { font-size: 15px; } #block-bos-homepage-phone-mobile { flex: 0 0 auto; margin-inline-start: auto; } #block-bos-homepage-phone-mobile .bo-header-phone { font-size: .95rem; white-space: nowrap; } .mobile-buttons { flex: 0 0 auto; } } /* On the smallest phones, drop the phone number text to the glyph only so the logo + wordmark + call button + hamburger still fit one line. */ @media (max-width: 26rem) { #block-bos-homepage-phone-mobile .bo-header-phone { font-size: 0; } #block-bos-homepage-phone-mobile .bo-header-phone__icon { font-size: 20px; } }