/* ============================================================ CG — components.css Themes 2.1 shared component styles. Source: generic-cld/assets/css/components.css Loaded by every Themes 2.1 theme decorator before theme.css. Theme-level overrides go in theme.css (higher specificity or custom property redefinition). Load order in decorator: /var.css — primitive + semantic tokens /assets/css/components.css — this file (resolves via generic/ fallback) /assets/css/navbar-primary.css /theme.css — theme overrides /site.css — site overrides Adding a new component: 1. Build the component in generic/ with a cg- prefixed file name 2. Add its styles here under a clearly labelled section 3. Do NOT call $website.addCss() from the component view LINK COLORS: cg- link tokens resolve as var(--body-link, var(--bs-link-color)) (and the -hover pair) — they PREFER the theme's --body-link authoring token and fall back to Bootstrap's --bs-link-color when a theme doesn't define it. This lets a theme recolor links (base AND cg- children) in any scope by setting only --body-link* there; --bs-link-color stays the Bootstrap-side default. ============================================================ */ /* ============================================================ SHARED TOKENS Override in var.css or site.css to change for all components. ============================================================ */ :root { --cg-icon-font: "Font Awesome 7 Pro"; /* Secondary nav surface — white by default. Both the theme's .header-row-secondary outer band and the generic .component-navbar-secondary .navbar-secondary surface consume these tokens so the row and the navbar render as a single unified strip. Override at any scope to retheme (e.g. set --cg-nav-sec-bg on :root or .site-header to recolor both). */ --cg-nav-sec-bg: #ffffff; --cg-nav-sec-color: #212529; } /* ============================================================ PAGE — suppress horizontal page scroll Themes 2.1 has full-bleed surfaces that intentionally break out past their container: a width=container-fluid dropdown panel is the current one, and any 100vw break-out behaves the same way. Two things make such an element overhang the usable width by a handful of pixels, and either is enough to raise a horizontal scrollbar: 1. 100vw INCLUDES the vertical scrollbar, while the usable width excludes it — so a 100vw element is ~15px too wide whenever the page scrolls. 2. The break-out centres on its containing block. If that block is not perfectly centred in the viewport (a reserved scrollbar gutter shifts centred containers a few px), the panel leans to one side. It compounds: the overhang raises a scrollbar, the scrollbar shifts centred content, and the panel leans further out. Declared on BODY, not html, and deliberately so. When the root element's overflow is `visible`, the UA applies the BODY's overflow to the viewport and body itself stays `visible` — so the viewport suppresses the horizontal scrollbar while body does NOT become a scroll container. That distinction matters: making body a scroll container would break `position: sticky` for everything inside it, and this family relies on sticky headers. This lives in the shared 2.1 layer so every theme inherits it. It was previously present only via site-level CSS on some sites, which is why the scroll appeared on themes that happened not to have it. ============================================================ */ body { overflow-x: hidden; } /* ============================================================ COMPONENT: navbar-primary ============================================================ */ /* Custom property hooks — define in theme.css to restyle without a template override. Values fall back to inherited behavior when not explicitly set. */ .component-navbar-primary { /* Top-level nav link size: 1rem in the collapsed menu, 1.15rem once the navbar expands (lg+). Stepped down on mobile because the stacked menu reads as a list, not a bar. The lg+ value is set in the media query right after this block. NOTE: navbar-primary.css re-declares this same token and loads AFTER this file (components.css → navbar-primary.css → theme.css), so it carries an identical pair. Change both or the later file wins. */ --cg-nav-link-font-size: 1rem; --cg-nav-link-font-weight: inherit; --cg-nav-link-text-transform: none; --cg-nav-link-letter-spacing: normal; --cg-nav-link-px: 0.75rem; --cg-nav-link-py: 0.75rem; /* Dropdown-panel interior rhythm. Distinct from the --cg-nav-link-* tokens above, which belong to the TOP-LEVEL navbar links only. Every clickable row inside a panel — .dropdown-item, a panel .nav-link, and .dropdown-panel-sub-header-link — shares this padding at every breakpoint so the panels read as one list. --indent is the left margin that gives nested