/** * Severn Dean Lions brand accents. * * The primary Lions blue (#00338D) is applied through Olivero's * "base primary colour" setting, which drives all of Olivero's --color--primary * shades. This file adds the gold accent (#E6B800) and the front-page hero / * footer treatments that the core setting cannot express. */ :root { --sdl-blue: #045197; --sdl-gold: #e6b800; --sdl-gold-dark: #c99e00; --sdl-ink: #1a1a1a; } /* ============================================================ Header — one solid Lions-blue brand band. Olivero only paints --color--primary-50 (a slot meant to be a pale tint, but navy here because the primary colour is a dark navy) behind the branding, leaving the rest of the bar white — an inconsistent half-blue header with a hard seam. Force the whole bar to the brand blue so it reads as a single band that flows into the hero, with a gold stripe on top. ============================================================ */ .site-header, header.site-header { border-top: 5px solid var(--sdl-gold); background-color: var(--sdl-blue); /* faint divider so the header still reads as distinct from the hero */ box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18); } /* Two classes (0,2,0) so this beats Olivero's own `.site-header__inner { background: var(--color--white) }` (0,1,0), which loads after this module's CSS. The slide-in mobile drawer (.header-nav) and the level-2 dropdown paint their own white backgrounds over this, so they stay legible. */ .site-header .site-header__initial, .site-header .site-header__inner { background-color: var(--sdl-blue); } /* Olivero gives the branding block a navy gradient panel that breaks out of the container, so the header reads as a two-tone band that stops short. Flatten it: one solid brand blue across the whole bar. */ .site-header .site-branding { background-image: none; background-color: var(--sdl-blue); } /* ============================================================ Full-width banner + remove Olivero's droplet background. Olivero (1) tiles a faint "teardrop" SVG over the grey background and (2) caps the whole page at --max-bg-color (1570px), so on wide desktops the blue banner stops short and a patterned grey gutter shows. Drop the pattern, let the page run full width, and let the banner (header + front-page hero) span the entire viewport while the text content stays in a centred column. ============================================================ */ /* `html body` (0,0,2) and the `#page-wrapper` id (1,0,0) so these beat Olivero's own `body` / `.page-wrapper` rules, which load after this module's CSS. */ html body { background-image: none; background-color: #fff; } #page-wrapper.page-wrapper { max-width: none; } @media (min-width: 75rem) { /* Remove the social-sidebar offset so the hero can reach full width; the social region is unused on this site. */ .layout-main .main-content { width: 100%; margin-inline: 0; } } /* Front-page hero spans the full main-content width (= full viewport). */ .region--hero { width: 100%; } /* Keep the readable text column centred now that the page is full width. */ .main-content__container.container { margin-inline: auto; } /* Mobile "Menu" toggle: white label + burger icon on the blue bar (Olivero colours these with the now-navy --color--primary-50). */ .mobile-nav-button__label { color: #fff; } .mobile-nav-button__icon, .mobile-nav-button__icon::before, .mobile-nav-button__icon::after { border-top-color: #fff; } /* Inline (wide) primary nav, when shown on the blue bar: whiten the top-level links, search and account chrome. Scoped to the non-mobile state and to level 1 only — the slide-in mobile drawer and the level-2 dropdown both keep Olivero's white background with dark links, which must stay legible. */ body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1, body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner, body:not(.is-always-mobile-nav) .primary-nav__button-toggle, body:not(.is-always-mobile-nav) .secondary-nav__menu-link, body:not(.is-always-mobile-nav) .block-search-wide__button { color: #fff; } body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1:hover, body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1:focus { color: var(--sdl-gold); } /* The search bar at the top of the menu drawer ships black in Olivero; bring it into the brand blue so the menu shares the theme. Its input text and search icon are already white, so they stay legible. */ .site-header .block-search-narrow { background: var(--sdl-blue); } /* ---- Gold call-to-action button utility (used in hero + content) ---- */ .lions-cta, a.lions-cta { display: inline-block; margin: 0.35rem 0.5rem 0.35rem 0; padding: 0.85rem 1.7rem; border: 2px solid var(--sdl-gold); border-radius: 4px; background: var(--sdl-gold); color: var(--sdl-ink) !important; font-weight: 700; line-height: 1.2; text-decoration: none; } .lions-cta:hover, .lions-cta:focus { background: var(--sdl-gold-dark); border-color: var(--sdl-gold-dark); color: var(--sdl-ink) !important; } /* Outline variant for use on the blue hero. */ .lions-cta--ghost { background: transparent; border-color: #fff; color: #fff !important; } .lions-cta--ghost:hover, .lions-cta--ghost:focus { background: rgba(255, 255, 255, 0.15); color: #fff !important; } /* ---- Front-page hero block ---- */ .sdl-hero { padding: 3.5rem 1.5rem; background: var(--sdl-blue); color: #fff; text-align: center; } .sdl-hero h2 { margin-top: 0; color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); } .sdl-hero p { max-width: 48rem; margin: 0 auto 1.6rem; font-size: 1.15rem; line-height: 1.5; } .sdl-hero .lions-cta { margin-top: 0.5rem; } /* ---- Footer charity-info block ---- */ .sdl-footer-info { font-size: 0.95rem; line-height: 1.65; } .sdl-footer-info strong { color: var(--sdl-gold); } .sdl-footer-info a { color: #fff; } /* Emphasise the Donate item in the primary navigation. Gold reads on both the blue inline bar and the white mobile drawer. */ .primary-nav__menu-link[href$="/donate"] .primary-nav__menu-link-inner { font-weight: 700; } body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-1[href$="/donate"] { color: var(--sdl-gold); } body.is-always-mobile-nav .primary-nav__menu-link[href$="/donate"] { color: var(--sdl-gold-dark); } /* Brand the pull-quote: recolour Olivero's accent bar + quote mark to gold rather than stacking a second border beside the grey one. */ .text-content blockquote::after { background: var(--sdl-gold); } .text-content blockquote::before { color: var(--sdl-gold); } /* Keep pull-quotes at body scale inside the compact news teasers. Three classes (0,3,0) to beat Olivero's `.text-content blockquote` font-size, including its larger md/lg breakpoint values. */ .teaser .text-content blockquote { margin-block: 0.75rem; font-size: 1.05rem; line-height: 1.5; } .teaser .text-content blockquote::before { font-size: 28px; } /* ---- Photo gallery grid ---- */ .sdl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; } .sdl-gallery img { width: 100%; height: 190px; object-fit: cover; border-radius: 4px; border: 3px solid var(--sdl-blue); } /* ---- Event listing meta ---- */ .views-field-field-event-date, .views-field-field-event-location { font-weight: 600; color: var(--sdl-blue); } /* ============================================================ Front page — frame the article list as a "Latest news" section instead of a raw node dump. ============================================================ */ /* Branded section heading (injected by sdl_brand_preprocess_views_view). */ .sdl-section-title { margin: 2.75rem 0 1.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--sdl-gold); color: var(--sdl-blue); font-size: clamp(1.4rem, 3vw, 1.9rem); } /* The lone "Home" breadcrumb on the home page is redundant noise. */ .path-frontpage .region--breadcrumb { display: none; } /* Drop the "By admin, " byline from the home-page teasers. */ .path-frontpage .teaser__meta { display: none; } /* Tidy, evenly separated teasers with trimmed bodies so a long article can't dominate the page. */ .path-frontpage .views-row + .views-row { margin-top: 1.25rem; } .path-frontpage .teaser { padding-bottom: 1.75rem; border-bottom: 1px solid #e6e6e6; } .path-frontpage .teaser__content .field--name-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } /* Some articles are image-only (e.g. an event poster); the line clamp can't trim a single block image, so cap its height in the teaser so it can't dominate the home page. */ .path-frontpage .teaser__content img { max-height: 260px; width: auto; }