/* ========================================================================== Shell — header and footer design.md §5.1 (.icon-btn) and §4.13 (the footer). Loaded on every page from library/bones.php, after lhi-foundation. ========================================================================== */ /* ========================================================================== Header — design.md header bar An opaque paper bar carrying the site nav inline, a filled CTA on the right, and a burger that only exists below the drawer breakpoint. It replaces a transparent bar that floated over the hero with a search opener and a burger as its only controls. Because it is opaque it no longer inverts, so the --hdr-ink machinery and avista_header_over_light() are gone. Kept `position: fixed` rather than moving to the prototype's `sticky`: computes `overflow: hidden` on this theme, which stops sticky from ever engaging. .main is offset by the bar's height instead, below. ========================================================================== */ :root { --lhi-header-h: 72px; } @media (max-width: 600px) { :root { --lhi-header-h: 64px; } } #header { background-color: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); } /* The theme pads the bar to 112px with a 3.6rem top inset. */ #header .container-fluid { padding-top: 0; padding-bottom: 0; } #header .header-body, #header .header-body > .row { min-height: var(--lhi-header-h); } #header .header-body > .row { flex-wrap: nowrap; align-items: center; } /* The bar no longer overlays the hero, so every page has to start below it. .pt-0 is Bootstrap's `padding-top: 0 !important`, which the templates put on
precisely because the old bar floated — hence the flag here. The +1px is the bar's own border, which otherwise lands on the hero's first row. */ .main, .main.pt-0 { padding-top: calc(var(--lhi-header-h) + 1px) !important; } /* In-page anchors have to clear the fixed bar, or the target lands under it. scroll-margin only ever applies when something scrolls to the element, so it is inert everywhere else. §6.5: the smooth scroll is opt-out. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } section[id], .lhi-section[id] { scroll-margin-top: calc(var(--lhi-header-h) + 8px); } /* ---------------------------- Logo -------------------------------------- */ /* The theme's `svg-html` script swaps each for an inline , so the sizing has to name the svg — and the wordmark's paths ship filled white, for the transparent bar that used to sit on a dark hero. On paper that is an invisible logo, so the fill follows the header's own colour. .logo is the full lockup (mark + "OPNI LHÍ"). .logo-small is the mark on its own in Open LHÍ green, and the theme showed it alongside the lockup — a duplicate mark and the one chromatic element in an otherwise mono bar. Hidden here; the Bootstrap display utilities on it are flagged. */ #header .header-logo-group { display: flex; align-items: center; } #header .header-logo-group .logo-small, #header .header-logo-group .logo-small-mobile { display: none !important; } /* The theme colours the lockup white for the old dark bar, so currentColor resolved to white and the fill below inherited it. The 2026 mark is Open LHÍ green in the header — §2.2's --green, the one chromatic element the design system reserves for this site. The footer and the drawer invert it to white with a filter instead, because both sit on ink. */ #header .header-logo-group .logo, #header .header-logo-group .logo a { color: var(--green); } #header .header-logo-group .logo svg, #header .header-logo-group .logo img { display: block; height: 30px; width: auto; } #header .header-logo-group .logo svg path, #header .header-logo-group .logo svg polygon, #header .header-logo-group .logo svg rect, #header .header-logo-group .logo svg circle { fill: currentColor; } @media (max-width: 600px) { #header .header-logo-group .logo svg, #header .header-logo-group .logo img { height: 24px; } } /* ---------------------------- Right group -------------------------------- */ .header-end { display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 2vw, 32px); } /* ---------------------------- Nav ---------------------------------------- */ .site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); } /* The panel is a short dropdown, not a full-width mega, so it anchors to its own item rather than to the header body. */ .site-nav-item { position: relative; } .site-nav-item > a { position: relative; display: inline-block; padding: 22px 0; font-size: 15px; font-weight: 500; line-height: 1.2; color: inherit; text-decoration: none; white-space: nowrap; } .site-nav-item > a:hover { color: inherit; text-decoration: none; } /* The underline sweeps in from the left rather than appearing. */ .site-nav-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .site-nav-item:hover > a::after, .site-nav-item:focus-within > a::after, .site-nav-item.current-menu-item > a::after, .site-nav-item.current-menu-ancestor > a::after { transform: scaleX(1); } .site-nav-item > a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .site-nav-item .caret { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform .25s ease, opacity .25s ease; } .site-nav-item:hover .caret, .site-nav-item:focus-within .caret { transform: translateY(0) rotate(-135deg); opacity: 1; } /* ---------------------------- Dropdown ----------------------------------- */ /* The children have to stay reachable now that the burger is gone above the drawer breakpoint. Same construction as the prototype's mega panel, sized to a two-item list rather than a full-width grid. */ .site-nav-panel { position: absolute; top: 100%; left: 0; min-width: 240px; padding: 10px 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s; transition-delay: .18s; z-index: 40; } .site-nav-item:hover > .site-nav-panel, .site-nav-item:focus-within > .site-nav-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } .site-nav-panel ul { list-style: none; margin: 0; padding: 0; } .site-nav-panel a { display: block; padding: 9px 20px; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; white-space: nowrap; transition: padding .2s ease, background .2s ease; } .site-nav-panel a:hover { background: var(--paper-2); padding-left: 26px; text-decoration: none; color: var(--ink); } .site-nav-panel a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } /* ---------------------------- CTA ---------------------------------------- */ /* §5.1's filled pill, at the header's 40px control height. */ .header-cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .header-cta:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); text-decoration: none; } .header-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* ---------------------------- Burger ------------------------------------- */ /* Drawer opener. Hidden above the breakpoint, where the nav is inline. */ #header .btn-menu { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; flex-shrink: 0; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } #header .btn-menu:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); } #header .btn-menu:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* The theme lays these three bars out for its old 54px square button: it sizes them `width: 100%` and positions them with `margin-top` of 1.9/2.9/3.9rem rather than `top`. Both survive into this rule unless reset — the margins add to `top`, which put the bars at 35/50/65px inside a 40px button, so two of the three fell outside it and the burger rendered as a single line. The margins are declared on the :nth-child selectors, which outrank this base rule, so each one has to clear its own. */ #header .btn-menu > span { position: absolute; left: 11px; right: 11px; width: auto; max-width: none; height: 1.4px; margin: 0; background: currentColor; transition: transform .3s ease, top .25s ease, opacity .2s ease; } /* Two bars 6px apart, centred in the 40px button — the prototype's .burger. */ #header .btn-menu > span:nth-child(1) { top: 17px; margin-top: 0; } #header .btn-menu > span:nth-child(2) { top: 20px; margin-top: 0; opacity: 0; } #header .btn-menu > span:nth-child(3) { top: 23px; margin-top: 0; } /* The open state carries its own margin-top (2.9rem) in the theme, so these have to clear it too or the X drops out of the button. */ .menu-opened #header .btn-menu > span:nth-child(1) { top: 20px; margin-top: 0; transform: rotate(45deg); } .menu-opened #header .btn-menu > span:nth-child(3) { top: 20px; margin-top: 0; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { #header .btn-menu, #header .btn-menu > span, .site-nav-item > a::after, .site-nav-item .caret, .site-nav-panel, .site-nav-panel a, .header-cta { transition: none; } } /* ========================================================================== Mobile drawer design.md's mobile menu: a full-screen ink panel, big section labels, the sub-lists as an accordion, utility rows on hairlines at the foot. This is the theme's .main-menu element restyled, not a new one — the theme's JS already opens it from .btn-menu and runs the sub-menu accordion with its own slideUp/slideDown. Those write inline `display`, so nothing here sets `display` on .sub-menu. ========================================================================== */ @media (min-width: 981px) { .main-menu { display: none !important; } } @media (max-width: 980px) { .site-nav { display: none; } #header .btn-menu { display: block; } .header-cta { padding: 0 16px; } .main-menu { position: fixed; inset: 0; top: 0; left: 0; right: 0; width: auto; max-height: none; height: 100%; margin-top: 0; padding: 20px var(--pad) 40px; background-color: var(--ink); color: var(--paper); border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .35s ease, transform .35s ease, visibility .35s; } .menu-opened .main-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ------------------------- Head --------------------------------------- */ .main-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .main-menu-logo img { height: 24px; width: auto; display: block; /* brightness(0) flattens the green to black, invert(1) takes it to white for the ink panel. */ filter: brightness(0) invert(1); } .main-menu-close { width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: transparent; color: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .main-menu-close:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .main-menu-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } /* ------------------------- Nav ---------------------------------------- */ .main-menu .main-menu-body { padding: 8px 0 0; flex: 1; } .main-menu .main-nav > ul { display: block; gap: 0; } .main-menu .main-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .main-menu .main-nav > ul > li > a { padding: 20px 0; font-size: clamp(26px, 6vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; } .main-menu .main-nav > ul > li > a:hover { text-decoration: none; } /* The theme's chevron, recoloured for ink and enlarged to the label. */ .main-menu .main-nav > ul > li.has-drop > a { padding-right: 40px; } .main-menu .main-nav > ul > li > ul { border-top: 0; padding: 0 0 20px; font-size: 15px; } .main-menu .main-nav > ul > li > ul > li { border-bottom: 0; padding-bottom: 0; } .main-menu .main-nav > ul > li > ul > li > a { padding: 5px 0; opacity: 0.78; } .main-menu .main-nav > ul > li > ul > li > a:hover { opacity: 1; padding-left: 0; } .main-menu a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } /* ------------------------- Foot --------------------------------------- */ .main-menu .main-menu-footer { padding: 24px 0 0; margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .main-menu .main-menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; } /* Text labels, matched to .foot-social. The theme sizes these as 2rem square icon frames with `overflow: hidden`, which clips a word to two letters — so the whole box has to be reset, not just the type. */ .main-menu .main-menu-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .main-menu .main-menu-social > li { display: block; padding: 0; } .main-menu .main-menu-social > li > a { position: static; max-width: none; flex: none; width: auto; height: auto; overflow: visible; font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); text-decoration: none; opacity: 0.75; transition: opacity .2s ease; } .main-menu .main-menu-social > li > a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } /* Unused on Opni — no menu is assigned to the secondary location. */ .main-menu .main-menu-secondary-nav { font-size: 13px; line-height: 1.4; } .main-menu .main-menu-secondary-nav > ul { margin: 0; gap: 10px 24px; } .main-menu .main-menu-secondary-nav > ul > li { padding: 0; } .main-menu .main-menu-secondary-nav > ul > li > a { color: var(--paper); opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .main-menu, .main-menu-close, .main-menu .main-menu-social > li > a { transition: none; } } } /* ========================================================================== Translate notice Only rendered when Google Translate is active (html[lang="en"]); on the Icelandic site it is display:none, so this is invisible day to day. ========================================================================== */ html[lang="en"] .translate-box { background-color: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18); font-size: 13px; line-height: 1.5; gap: 6px 18px; } .translate-box p { margin: 0; opacity: 0.75; } .translate-box .notranslate { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } /* ========================================================================== Footer §4.13. "The footer leads with a brand logo at the top of the first column, sitting above the 'Hafa samband' label and the address. The source SVG is dark, so it's inverted to white on the dark footer with filter: brightness(0) invert(1)." ========================================================================== */ .site-footer { margin-top: auto; background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 104px) 0 32px; /* Local hairline so the rules only have to be stated once. */ --foot-line: rgba(255, 255, 255, 0.15); } /* ---------------------------- Newsletter -------------------------------- */ .foot-subscribe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: clamp(40px, 5vw, 72px); margin-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--foot-line); } .foot-subscribe h2 { margin: 0 0 .4em; font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; } .foot-subscribe-copy p { margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; opacity: 0.75; max-width: 44ch; } /* The newsletter submit is a Gravity Forms button, and gf_make_submit_input_into_a_button_element() gives it the theme's dark fill — invisible now the footer is ink. §5.1 has no solid-light primary, so this is .btn.primary inverted for a dark surface: white fill, ink text, hovering to pink. The form markup itself belongs to the plugin, so this is the one thing the shell restyles rather than owns. */ .foot-subscribe .gform_wrapper .gform_footer button, .foot-subscribe .gform_wrapper button[type="submit"] { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 28px; cursor: pointer; transition: background .25s cubic-bezier(.2, .7, .2, 1), color .25s ease, border-color .25s ease; } .foot-subscribe .gform_wrapper .gform_footer button:hover, .foot-subscribe .gform_wrapper button[type="submit"]:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); } /* The Gravity Forms submit carries `btn btn-lg btn-dark` from gf_make_submit_input_into_a_button_element(), and .btn is `outline: 0 !important` in avista-styles.css — so this is flagged too. */ .foot-subscribe .gform_wrapper .gform_footer button:focus-visible, .foot-subscribe .gform_wrapper button[type="submit"]:focus-visible { outline: 2px solid var(--paper) !important; outline-offset: 3px; } /* Keep the field legible against ink, and pill it to sit with the button. The theme sets `border-radius: 0.4rem !important` on form fields, so this has to be flagged too. */ .foot-subscribe .form-controller input, .foot-subscribe .gform_wrapper input[type="text"], .foot-subscribe .gform_wrapper input[type="email"] { border-radius: 999px !important; border: 1px solid var(--paper); } /* ---------------------------- Top grid ---------------------------------- */ .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--foot-line); } .foot-top h4 { margin: 0 0 18px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.5; } .foot-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foot-top a { font-size: 16px; color: inherit; text-decoration: none; opacity: 0.9; transition: opacity .2s ease; } .foot-top a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .foot-top address { font-style: normal; font-size: 16px; line-height: 1.6; opacity: 0.75; max-width: 34ch; } .foot-top address p { margin: 0 0 .4em; } .foot-top address p:last-child { margin-bottom: 0; } /* The source SVG is dark, so it is inverted to white — §4.13. */ .foot-logo { display: inline-block; margin: 0 0 28px; transition: opacity .2s ease; } .foot-logo img { display: block; height: clamp(38px, 3.6vw, 46px); width: auto; filter: brightness(0) invert(1); } .foot-logo:hover { opacity: 0.8; } .foot-social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px !important; } .foot-social a { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; } /* ---------------------------- Bottom ------------------------------------ */ .foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: clamp(24px, 3vw, 36px); } .foot-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; } .foot-bottom a { font-size: 13px; color: inherit; text-decoration: none; opacity: 0.6; transition: opacity .2s ease; } .foot-bottom a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .foot-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } /* Partner marks are supplied in assorted colours; the footer is mono, so they are knocked back to white like the brand logo. */ .foot-partners img { display: block; height: clamp(24px, 2.4vw, 32px); width: auto; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity .2s ease; } .foot-partners li:hover img { opacity: 1; } @media (prefers-reduced-motion: reduce) { .foot-top a, .foot-bottom a, .foot-logo, .foot-partners img { transition: none; } } /* ---------------------------- Responsive -------------------------------- */ @media (max-width: 860px) { .foot-subscribe { grid-template-columns: minmax(0, 1fr); } .foot-top { grid-template-columns: 1fr 1fr; } .brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .foot-top { grid-template-columns: 1fr; } .foot-bottom { flex-direction: column; align-items: flex-start; } }