/** * assets/css/layout.css * * Styles for site-wide layout chrome: * - .site-header — top nav bar (white + blue variants) * - .site-nav — desktop navigation * - .lang-switcher — LV / EN language toggle * - .site-header__toggle / .mobile-menu — mobile navigation * - .site-footer — MIC 2 dark navy footer * - .skip-link — accessibility skip-to-content * * Enqueue this file alongside news.css in inc/assets.php (add a wp_enqueue_style * call for 'aic-layout' pointing at this file). * * FIGMA REFERENCE * --------------- * Header: "Menu LAT" symbol — logo left, nav right, lang switcher far right. * White text on hero; dark text ("blue" variant) on inner pages. * Footer: "Footer" frame (1:23) — dark navy, 470px, logo + social + contacts. * * @package AICenterwp * @since 1.0.0 */ /* ========================================================================== BASE ========================================================================== */ html { scroll-behavior: smooth; } /* Site-wide box-sizing baseline. Without this, `width` on any box with padding/border (e.g. .container's padding-inline: 24px) adds that padding ON TOP of the declared width instead of carving it out of it — which is exactly what was overflowing every .container-based section by ~40-48px on mobile. A handful of components (sandbox.css, front-page.css) already opted into border-box individually; this makes it the baseline everywhere instead of relying on each component to remember to set it. */ *, *::before, *::after { box-sizing: border-box; } /* Guard against any single element (image, absolutely-positioned art, a fixed-width band) silently widening the whole page on mobile — without this, position:absolute full-bleed elements (e.g. the header, which is pinned left:0/right:0 to ) can end up wider than the normal-flow content around them, since they'd stretch to match the widened page while sections sized by their own content stay at the intended viewport width. */ html, body { max-width: 100%; overflow-x: hidden; } img { max-width: 100%; height: auto; } /* ========================================================================== SKIP LINK (accessibility) ========================================================================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--color--base-foreground, #0d1b2a); color: #fff; padding: 12px 20px; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } /* screen-reader-text utility (WP standard) */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } .screen-reader-text:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; padding: 12px 20px; position: fixed; top: 0; left: 0; z-index: 9999; background: var(--color--base-foreground, #0d1b2a); color: #fff; } /* ========================================================================== SITE HEADER ========================================================================== */ .site-header { position: relative; z-index: 100; width: 100%; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 100px; gap: 24px; } /* --- Colour variants --- */ /* White variant — on dark/photographic hero (homepage, Smilškaste hero) */ .site-header--white { background: transparent; /* sits over the hero background */ color: #fff; } .site-header--white .site-nav__list a, .site-header--white .site-header__logo-text { color: #fff; } /* Blue variant — "Menu LAT blue" (Figma 108:85): periwinkle links on the lavender-grey inner page. Sits over the page background (transparent). */ .site-header--blue { background: transparent; color: var(--color--accent-primary, #7189bd); } .site-header--blue .site-nav__list a, .site-header--blue .site-header__logo-text { color: var(--color--accent-primary, #7189bd); /* periwinkle */ } /* Active / current menu item — coral & bold (Figma "News" = #fcab89 bold) */ .site-header--blue .site-nav__list .current-menu-item > a, .site-header--blue .site-nav__list .current_page_item > a, .site-header--blue .site-nav__list .current-menu-parent > a { color: var(--color--accent-coral, #fcab89); font-weight: 700; } /* --- Logo --- */ .site-header__logo { flex-shrink: 0; display: flex; align-items: center; } .site-header__logo img, .site-header__logo .custom-logo { display: block; width: 158px; /* Figma "Menu LAT blue" logo (108:83) */ height: auto; } /* The logo SVGs carry their own colours (periwinkle diamond + light text), which read correctly on both the dark hero and light inner pages. No recolour filter is applied. */ .site-header__logo-text { font-size: 18px; font-weight: 700; text-decoration: none; line-height: 1.1; } /* --- Desktop nav --- */ .site-header__nav { display: flex; align-items: center; gap: 22px; } .site-nav__list { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; } .site-nav__list a { font-size: 15px; font-weight: 300; text-decoration: none; transition: opacity 0.15s ease; } .site-nav__list a:hover, .site-nav__list a:focus-visible { opacity: 0.7; outline: none; } /* Active menu item — bold (Figma "Menu LAT blue": active "News" is Bold 700). 500 is not loaded as a font face, so use 700 which is. The blue-variant rule below also colours the active item coral. */ .site-nav__list .current-menu-item a, .site-nav__list .current_page_item a { font-weight: 700; } /* --- Language switcher --- */ .lang-switcher { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 15px; } .lang-switcher__item { display: inline-flex; align-items: center; } /* Separator "/" between languages */ .lang-switcher__item + .lang-switcher__item::before { content: '/'; margin-right: 4px; opacity: 0.6; } .lang-switcher__item a, .lang-switcher__item span { text-decoration: none; transition: opacity 0.15s ease; } /* Inactive language ("/ EN") — periwinkle (Figma 119:90) */ .lang-switcher__item a { color: var(--color--accent-primary, #7189bd); } /* The "/" separator also reads periwinkle */ .lang-switcher__item + .lang-switcher__item::before { color: var(--color--accent-primary, #7189bd); } .lang-switcher__item a:hover, .lang-switcher__item a:focus-visible { opacity: 0.7; outline: none; } /* Active language — coral, bold (Figma: LV in #fcab89) */ .lang-switcher__item--active span { color: var(--color--accent-coral, #fcab89); font-weight: 700; } /* ========================================================================== MOBILE NAV ========================================================================== */ /* Hamburger toggle — hidden on desktop */ .site-header__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 4px; } .site-header__toggle-bar { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; } /* Mobile menu panel — hidden by default, shown via JS */ .mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--color--base-foreground, #0d1b2a); color: #fff; overflow-y: auto; } .mobile-menu[hidden] { display: none; } .mobile-menu__inner { padding: 24px; min-height: 100%; } .mobile-menu__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; font-size: 32px; line-height: 1; background: transparent; border: none; color: #fff; cursor: pointer; } .mobile-menu__list { list-style: none; margin: 80px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 24px; } .mobile-menu__list a { font-size: 28px; font-weight: 300; color: #fff; text-decoration: none; } .lang-switcher--mobile { font-size: 20px; margin-top: 16px; } /* --- Responsive switch --- */ @media ( max-width: 1023px ) { /* Figma "Phone menu" is 64px tall — reduce from the 100px desktop bar. */ .site-header__inner { min-height: 64px; } .site-header__nav { display: none; /* hide desktop nav */ } .site-header__toggle { display: flex; /* show hamburger */ } /* When header-nav.js adds .is-open to .site-header, reveal the nav as a dropdown panel. (.site-header is position:relative, so this anchors to it.) header.css used to own this rule; it now lives here so the toggle keeps working after header.css was retired. */ .site-header.is-open .site-header__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: absolute; top: 100%; left: 0; right: 0; z-index: 150; padding: 24px 5%; background: #01162a; /* navy panel — keeps text readable */ color: #fff; } .site-header.is-open .site-nav__list { flex-direction: column; align-items: flex-start; gap: 20px; } /* Force readable colours on the navy panel. Links (incl. inactive languages) go white; the active language keeps its coral (#fcab89). */ .site-header.is-open .site-nav__list a, .site-header.is-open .lang-switcher__item a { color: #fff; } } /* ========================================================================== SITE FOOTER (MIC 2 design — redesigned 2025-06-18) Layout: 2-column grid (org info left, nav right); LinkedIn only; sprout centre-bottom. ========================================================================== */ .site-footer { position: relative; overflow: hidden; background: #01162a; color: #fff; padding-block: 56px; margin-top: auto; } .site-footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo social" "orginfo navmenu"; gap: 40px 80px; align-items: start; } .site-footer__logo { grid-area: logo; display: flex; align-items: flex-start; } .site-footer__social { grid-area: social; display: flex; align-items: flex-start; justify-content: flex-end; } .site-footer__orginfo { grid-area: orginfo; } .site-footer__navmenu { grid-area: navmenu; } .site-footer__logo-img img { display: block; height: 59px; width: auto; } .site-footer__social { list-style: none; margin: 0; padding: 0; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: opacity 0.15s ease; } .site-footer__social a img { display: block; width: 24px; height: 24px; } .site-footer__social a:hover, .site-footer__social a:focus-visible { opacity: 0.7; outline: 2px solid #7189bd; outline-offset: 4px; border-radius: 2px; } /* Organisation info block */ .site-footer__orginfo-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.4; } .site-footer__orginfo-line { font-size: 15px; font-weight: 300; color: #7189bd; margin-bottom: 8px; line-height: 1.5; } .site-footer__orginfo-line--email a { color: #f06334; text-decoration: none; transition: opacity 0.15s ease; } .site-footer__orginfo-line--email a:hover, .site-footer__orginfo-line--email a:focus-visible { opacity: 0.75; outline: none; } /* Footer nav menu */ .site-footer__navmenu .site-footer__navmenu-list { list-style: none; margin: 0; padding: 0; text-align: right; } .site-footer__navmenu .site-footer__navmenu-list li { margin-bottom: 12px; } .site-footer__navmenu .site-footer__navmenu-list a { font-size: 15px; font-weight: 300; color: #7189bd; text-decoration: none; transition: opacity 0.15s ease; } .site-footer__navmenu .site-footer__navmenu-list a:hover, .site-footer__navmenu .site-footer__navmenu-list a:focus-visible { opacity: 0.75; outline: none; } /* Sprout (asns) — anchored to full-width .site-footer, clipped by overflow:hidden. bottom uses vw so the clip fraction stays proportional to the image size at every zoom level (-46px / 1440px ≈ 3.2vw matches the original Figma overhang). */ .site-footer__sprout { position: absolute; left: 38.17%; bottom: -3.2vw; width: 35%; height: auto; pointer-events: none; z-index: 0; } @media ( max-width: 1023px ) { .site-footer__sprout { left: auto; right: 4%; bottom: -3.2vw; width: clamp(150px, 28vw, 260px); opacity: 0.7; } } @media ( max-width: 767px ) { .site-footer__inner { grid-template-columns: 1fr; grid-template-areas: "logo" "orginfo" "navmenu" "social"; gap: 32px; } .site-footer__social { border-top: 1px solid rgba(113, 137, 189, 0.3); padding-top: 24px; } .site-footer__navmenu .site-footer__navmenu-list { text-align: left; } }