/* * DGA tokens applied to the existing header/footer markup * (resources/views/sections/header.blade.php, sections/footer.blade.php) * * This does NOT swap in DGA's real / web components * (that requires loading the @platformscode/core Stencil runtime and is a * separate, bigger change). It reskins the CURRENT markup -- colors, * spacing, radius, typography -- to match DGA's real spec as closely as * possible without changing the HTML structure. * * Source of truth: the real dga-header / dga-footer component CSS pulled * from the public npm packages `@platformscode/core@0.0.52` and * `platformscode-new-react@0.1.45` (published a week ago by DGA's own * team, confirmed via `npm view`) -- NOT the reverse-engineered browser * scrape used for dga-tokens.css/dga-typography.css. Every selector's * values below (padding, colors, radius, the hover "pill" indicator) are * copied from DGA's actual compiled `.header`, `.header-menu__item`, and * `.footer` rules, so this is a high-fidelity match, not an approximation. * * Because the theme's own classes are Tailwind utilities with equal * specificity to a plain override, some rules use !important -- that's a * deliberate, scoped choice to reliably win over `bg-primary-700 * bg-transparent` etc. on the same elements, not a style to imitate * elsewhere in the theme. */ /* ============ HEADER ============ */ header { background-color: var(--background-menu) !important; } /* Site name / logo link */ header a.title-font { font-family: var(--font-family-arabic); color: var(--text-default); } /* Primary nav items (resources/views/sections/header.blade.php #headMenuItems) * * Values below are taken directly from a real DGA-compliant site's own * compiled CSS (client-supplied DevTools export), not approximated: * fill color + a separate ::after accent bar (5px tall, inset 8% from * each side, rounded-sm, at the item's bottom edge) for each state. * Hover: bg #F3F4F6 / accent #9DA4AE (both already match this theme's * --colors-neutral-100 / --colors-neutral-400 exactly). Current page: * bg = primary green / accent #54C08A, which matches * --colors-primary-sa-flag-400 exactly -- a lighter green, not a darker * one as an earlier pass assumed. */ #headMenuItems .menu-item-container { display: flex; align-items: center; /* text vertically centered in the full-height tab */ height: 100%; /* tab fills the nav row: flush top & bottom (DGA ref) */ font-family: var(--font-family-arabic); font-size: var(--font-size-text-md); /* 16px, matches DGA .text-md-medium */ line-height: var(--line-height-text-md); /* 24px */ font-weight: var(--font-weight-medium); /* 500 */ color: var(--text-default) !important; border-radius: 6px; /* rounded hover/active tab (DGA review) */ padding-block: 0; padding-inline: var(--spacing-3); /* 12px -- tightened so 7 top-level tabs fit the desktop nav row */ transition: background-color 0.15s ease, color 0.15s ease; } /* Full-height tabs: hover(#F3F4F6)/active(green) fill the whole nav row and touch top & bottom, per the DGA reference (industry.sa header screenshot). The desktop nav wrapper's Tailwind `items-center` + `py-3` otherwise centered a short pill with white bands above/below -- stretch the chain and drop that vertical padding so the tab reaches the nav's top and bottom edges. */ header nav.container { align-items: stretch; min-height: 72px; } header nav.container > div:first-child { align-items: stretch; padding-top: 0; padding-bottom: 0; } header nav #mega-menu-full, header nav #headMenuItems { align-items: stretch; } #headMenuItems > li { position: relative; display: flex; align-items: stretch; } /* The li is now a flex container, so the abspos submenu lost its static below-the-item position and jumped up over the bar -- anchor it explicitly to the bottom of the full-height item. */ #headMenuItems > li > .dga-menu { top: 100%; inset-inline-start: 0; } #headMenuItems .menu-item-container::after { content: ""; position: absolute; bottom: 0; left: 8%; right: 8%; height: 5px; border-radius: 6px; background-color: transparent; transition: background-color 0.15s ease; } /* Hover -- light gray fill + gray accent bar. Non-active items only, so it never fights the active item's own fill/accent below. */ #headMenuItems > li:not(.current-menu-item):not(.current_page_item):hover .menu-item-container { background-color: var(--background-neutral-100); color: var(--text-default) !important; } #headMenuItems > li:not(.current-menu-item):not(.current_page_item):hover .menu-item-container::after { background-color: var(--background-neutral-400); } /* Current-page item, when WordPress marks it (core `current-menu-item` / `current_page_item`) -- brand-filled tab + light-green accent bar, per DGA's real --active spec */ #headMenuItems > li.current-menu-item .menu-item-container, #headMenuItems > li.current_page_item .menu-item-container { background: var(--button-background-primary-default); color: var(--text-oncolor-primary) !important; font-weight: var(--font-weight-bold); } #headMenuItems > li.current-menu-item .menu-item-container::after, #headMenuItems > li.current_page_item .menu-item-container::after { background-color: var(--colors-primary-sa-flag-400); } /* Sticky header on scroll (client request -- site didn't have one). Only * the logo+menu bar sticks, not the thin verification/trust bar above it * (a separate element, partials/dga-verification-banner.blade.php, a * sibling BEFORE
in the markup) -- matches the common gov-site * pattern of letting the trust strip scroll away while the working nav * stays put. * * CORRECTED MECHANISM (2026-09-07): a plain `position: sticky` on the * nested `nav.container`/`#header-mobile` never actually worked.
* itself renders `position: absolute` by default on almost every page * (TemplateCustom::getHeaderStyle() defaults to 'absolute' site-wide, for * the transparent hero-overlay look) or `position: relative` on the rare * pages that opt out. Either way,
's own box is only as tall as * its content (mostly just the nav bar) -- and `position: sticky` needs * its PARENT to be taller than itself to have any room to visually * detach and pin as the page scrolls. With parent and child the same * height, the "stuck" state has zero pixels of scroll distance to exist * in, so it was never visibly reachable. * * Fixed by pinning
itself instead (its real ancestor -- the * page's own top-level wrapper -- is genuinely taller than it), toggled * via a scroll-position class rather than pure CSS `position: sticky`, * so the page-load appearance (transparent overlay directly over a hero * image, ignoring the verification banner's height) is completely * unchanged at scroll position 0 -- only scrolling switches
to * `position: fixed`, pinning nav + mobile-menu together (both children, * so they move with their now-fixed parent automatically; no separate * rule needed for #header-mobile). See assets/dga/dga-header-sticky.js * for the scroll listener that toggles `dga-header-stuck` on . * * !important needed: the Tailwind `.absolute`/`.relative` utility class * that $headerStyle puts directly on
(specificity 0,1,0) beats * a bare `header` element selector (0,0,1) regardless of load order. * * Client report (events archive page): a bare `header` element selector * matches ANY
tag on the page, not just this site's own one -- * The Events Calendar plugin renders its own semantic
elements * too (.tribe-events-header for the search/toolbar area, and one per row * inside .tribe-events-calendar-latest-past__event-header). Since * `dga-header-stuck` lives on , it was pinning EVERY one of those * to position:fixed; top:0/left:0/right:0 the moment the page scrolled, * yanking each past event's title/date/venue block out of flow to * overlap the real site header and each other. Scoped to `.z-40` -- * already on this
only (Tailwind utility from the markup below, * not used by any Tribe template) -- instead of the bare tag. */ html.dga-header-stuck header.z-40 { position: fixed !important; top: 0; left: 0; right: 0; background-color: var(--background-card); } /* Bottom border under the whole nav bar */ header nav { border-bottom: 1px solid var(--border-neutral-secondary); background-color: var(--background-card); } /* Mobile hamburger + weglot area inherit header text color */ header button[data-collapse-toggle] { color: var(--text-default); } /* Mobile menu bar (partials/mobile-menu.blade.php, #header-mobile) -- a separate
, not the
element, so it wasn't covered by the solid-background fix above. Its own class is bg-transparent, so on pages with a dark/image hero it let that show through behind the dark-colored logo + green hamburger icon -- poor contrast, logo/icon nearly blending into the background. Same solid light background as the desktop header, per DGA's real nav-header spec (always solid, never transparent-over-image). */ #header-mobile { background-color: var(--background-menu) !important; border-bottom: 1px solid var(--border-neutral-secondary); } /* Language-switcher wrapper (sections/header.blade.php #weglot_here parent) -- plain CSS instead of a Tailwind rtl: utility class deliberately: this theme ships a pre-compiled static CSS bundle (public/css/app.c449f6.css), not a live Tailwind build, so any new class/variant combination not already present in that bundle at build time silently has no effect (confirmed via DevTools -- rtl:ml-0/rtl:mr-8 produced no rule at all). */ .dga-header-weglot { margin-left: 2rem; } body.rtl .dga-header-weglot, [dir="rtl"] .dga-header-weglot { margin-left: 0; margin-right: 2rem; } /* Header search box (partials/header/search.blade.php) -- reuses the same .dga-search-box component built for the search results page (dga-search-page.css), just narrower/shorter to sit inline in the nav row. Scoped to .tabrespalign (the header's search+language wrapper), NOT .search-form-header -- that class is also used by the search PAGE's own full-width search box (partials/page-header-search.blade.php), and an earlier version of this rule targeted .search-form-header directly, which incorrectly shrank the search page's box down to header size too. */ .tabrespalign .dga-search-box { width: 160px; height: 36px; } /* Weglot's language-switcher dropdown (#weglot_here) hardcodes its arrow and text padding for LTR only (`padding-right`, `right: 8px` in Weglot's own front-css.css, no [dir=rtl] handling for this widget style) -- so in Arabic it kept the arrow on the same physical side as English instead of mirroring, unlike the rest of the header. Not a DGA token issue (this widget isn't part of the Platforms Code system), just a third-party RTL gap, fixed here by relocating the padding/arrow to the other side when the page is RTL. */ body.rtl .country-selector.weglot-dropdown .wgcurrent a, body.rtl .country-selector.weglot-dropdown .wgcurrent span, [dir="rtl"] .country-selector.weglot-dropdown .wgcurrent a, [dir="rtl"] .country-selector.weglot-dropdown .wgcurrent span { padding-right: 10px; padding-left: 60px; } /* Higher specificity + !important: the arrow is position:absolute, and if Weglot's `right:8px` stays applied alongside our `left`, an over-constrained absolute box resolves to the `right` edge in RTL -- putting the caret back on top of the Arabic text. Force `right:auto` decisively so only `left` positions it. */ body.rtl .country-selector.weglot-dropdown .wgcurrent:after, [dir="rtl"] .country-selector.weglot-dropdown .wgcurrent:after { right: auto !important; left: 8px !important; } /* Point the caret straight down (▾), matching the main nav menu's own dropdown chevrons (see header.blade.php), instead of Weglot's default sideways-pointing caret (rotate(-90deg) = points right › when closed). Weglot's base (unrotated) shape already points down, so rotate(0deg) is enough -- no separate RTL case needed since "down" doesn't mirror. Scoped to the closed state (input not checked) so Weglot's own open-state rotation (pointing up, to show "expanded") is left alone. */ .country-selector.weglot-dropdown input:not(:checked) ~ .wgcurrent:after { transform: rotate(0deg) !important; } /* Weglot's flag (.wglanguage-name:before) uses margin-right:10px for LTR (flag sits left of the label text). In RTL the flag moves to the right, so that gap must flip to margin-left, otherwise the flag/text crowd the arrow side and read as an overlap. */ body.rtl .country-selector.weglot-dropdown .wgcurrent .wglanguage-name:before, [dir="rtl"] .country-selector.weglot-dropdown .wgcurrent .wglanguage-name:before { margin-right: 0; margin-left: 10px; } /* ============ FOOTER ============ */ /* Rebuilt 2026-09-08 to match the DGA Unified Code Figma spec ("Home Page Template - Platforms Code") shown at the first DGA review meeting: a dark surface (was light neutral-100), 4 top columns (3 real content menus + a 4th Follow-us/Accessibility column instead of a plain link list), and a bottom "legal" bar carrying Sitemap/RSS/Legal-menu links + copyright. See resources/views/sections/footer.blade.php + app/View/Composers/Footer.php. */ .dga-footer { background-color: var(--colors-primary-sa-flag-900); color: var(--colors-base-white); } .dga-footer__columns { display: flex; flex-wrap: wrap; gap: var(--spacing-8); padding-top: var(--spacing-16); padding-bottom: var(--spacing-12); } .dga-footer__column { flex: 1 1 220px; min-width: 200px; } .dga-footer__column h6 { font-family: var(--font-family-arabic); font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); font-weight: var(--font-weight-semibold); color: var(--colors-base-white); padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--colors-alpha-alpha-white-20); } .dga-footer__column nav ul { list-style: none; margin: 0; padding: 0; } .dga-footer__column nav li { padding-bottom: var(--spacing-lg); } .dga-footer__column nav a { font-family: var(--font-family-arabic); font-size: var(--font-size-text-md); line-height: var(--line-height-text-md); color: var(--link-oncolor); transition: color 0.15s ease; } .dga-footer__column nav a:hover { color: var(--link-oncolor-hovered); text-decoration: underline; } .dga-footer__column nav a:active { color: var(--link-oncolor-pressed); } .dga-footer__column nav a:focus { color: var(--colors-base-white); outline: 2px solid var(--colors-base-white); border-radius: var(--radius-sm); } .dga-footer__column--tools { display: flex; flex-direction: column; gap: var(--spacing-6); } .dga-footer__group h6 { font-family: var(--font-family-arabic); font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); font-weight: var(--font-weight-semibold); color: var(--colors-base-white); padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--colors-alpha-alpha-white-20); } /* Social icons (resources/views/partials/socials.blade.php) -- white on the dark footer instead of their default brand-green (that green was tuned for the light-background socials use elsewhere on the site). */ .dga-footer__group i[class*="fa-"] { color: var(--colors-base-white) !important; } .dga-footer__group a:hover i[class*="fa-"] { color: var(--colors-alpha-alpha-white-70) !important; } /* DGA footer social buttons (slide 6): PNG brand icons in an outlined rounded box (industry.sa footer style, adapted for the dark footer -- translucent white border instead of gray). On hover the box fills subtly + border brightens. */ .dga-footer__group .dga-social-icons { display: flex; flex-wrap: wrap; gap: var(--spacing-3); } .dga-footer__group .dga-social-icons a { margin: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--colors-alpha-alpha-white-20); border-radius: var(--radius-md); background: transparent; transition: background-color 0.2s ease, border-color 0.2s ease; } .dga-footer__group .dga-social-icons a:hover { background: var(--colors-alpha-alpha-white-10); border-color: var(--colors-alpha-alpha-white-40); } .dga-footer__group .dga-social-icons img { width: 40px; height: 40px; object-fit: contain; } /* ---- Bottom legal bar ---- */ .dga-footer__legal { border-top: 1px solid var(--colors-alpha-alpha-white-20); } .dga-footer__legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-6); padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); } .dga-footer__logos { display: flex; align-items: center; gap: var(--spacing-6); } .dga-footer__logo { display: flex; align-items: center; } .dga-footer__logo img { max-height: 42px; width: auto; } .dga-footer__legal-links-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-sm); text-align: end; } .dga-footer__legal-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-lg); } .dga-footer__legal-links a { font-family: var(--font-family-arabic); font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); color: var(--link-oncolor); text-decoration: underline; } .dga-footer__legal-links a:hover { color: var(--link-oncolor-hovered); } .dga-footer__legal p, .dga-footer__signature { font-family: var(--font-family-arabic); font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); color: var(--colors-alpha-alpha-white-80); } @media (max-width: 767px) { .dga-footer__legal-inner { flex-direction: column; align-items: center; } .dga-footer__legal-links-wrap { align-items: center; text-align: center; } .dga-footer__legal-links ul { justify-content: center; } } /* Pre-footer CTA band (resources/views/partials/footer/pre-footer.blade.php) -- DGA's own footer CTA heading is Display 2xl/Bold; toned down to Display md here since this heading can be a full sentence, not a short statement, and 72px risks overflow. Adjust if the real copy is short. */ .pattern-black h2 { font-family: var(--font-family-arabic); font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-display-md); } /* Header nav real-fix for the "misalignment at 1024px" (and, once measured, * 1024-1439px generally) client comment. Root cause: the header