/* ========================================================================== Site header Mirrors the source site's header config, read from its data-current-styles: layout navRight · mobile logoLeftNavRight · doubleLineHamburger @1px headerStyle "theme" / sectionTheme "bright" → cream ground, indigo nav border-bottom 0px · menuOverlayTheme "dark-bold" → indigo overlay drop shadow off · opacity 100% · header-width-full fixed header, style "scroll-back" (tweak-fixed-header-style-scroll-back) Collapses to the hamburger at 768px, the Squarespace 7.1 default. ========================================================================== */ /* --- Skip link ----------------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: var(--z-skiplink); transform: translateY(-200%); padding: var(--space-2xs) var(--space-sm); background: var(--indigo); color: var(--pure-white); font-family: var(--font-ui); font-size: var(--type-cta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-cta); text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); transition: transform var(--duration-fast) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Sticky shell -------------------------------------------------------- */ /* The announcement bar and header travel together, so "scroll back to reveal" hides both as one block. */ .announcement-bar, .site-header { position: fixed; left: 0; right: 0; z-index: var(--z-header); } .announcement-bar { top: 0; } .site-header { top: var(--announcement-height, 0px); transition: transform var(--duration-normal) var(--ease); } .announcement-bar { transition: transform var(--duration-normal) var(--ease); } /* scroll-back: hidden while scrolling down, revealed on any upward scroll */ .site-header.is-hidden, .announcement-bar.is-hidden { transform: translateY(calc(-100% - var(--announcement-height, 0px))); } /* Page offset so content is not sat on by the fixed header. Applied to by site-chrome.js via --chrome-offset. */ body { padding-top: var(--chrome-offset, var(--header-height)); } @media (prefers-reduced-motion: reduce) { .site-header, .announcement-bar, .skip-link { transition: none; } } /* --- Announcement bar ---------------------------------------------------- */ .announcement-bar { background: var(--color-announce-bg); color: var(--color-announce-fg); min-height: var(--announcement-height); display: flex; align-items: center; } .announcement-bar__inner { width: 100%; padding: var(--space-2xs) var(--page-gutter); text-align: center; } .announcement-bar__text { margin: 0; font-family: var(--font-body); font-size: var(--type-small); font-weight: var(--weight-bold); line-height: var(--leading-tight); } .announcement-bar__text a { color: inherit; text-underline-offset: 3px; } /* --- Header bar ---------------------------------------------------------- */ .site-header { background: var(--color-header-bg); color: var(--color-header-fg); border-bottom: var(--header-border-width) solid var(--color-header-border); } .site-header__inner { /* Source body class is header-width-full: the contents span the viewport inset only by --pagePadding (4vw), with no max-width cap. Capping it here would pull the CTA ~80px left of where the live site puts it at 1440px. */ min-height: var(--header-height); padding-inline: var(--page-gutter); display: flex; align-items: center; gap: var(--space-md); } /* --- Logo ---------------------------------------------------------------- */ /* 1:1 circular seal (source art 1500x1500). */ .site-header__logo { flex: 0 0 auto; display: block; line-height: 0; border-radius: 50%; } .site-header__logo img { display: block; width: var(--logo-size); height: var(--logo-size); object-fit: contain; } /* --- Desktop nav (layout: navRight) -------------------------------------- */ .site-nav { margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: var(--space-md); margin: 0; padding: 0; list-style: none; } .site-nav__item { position: relative; } .site-nav__link, .site-nav__folder-toggle { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: var(--space-2xs) 0; border: 0; background: none; color: inherit; font-family: var(--font-nav); font-size: var(--type-nav); font-weight: var(--weight-bold); line-height: var(--leading-nav); letter-spacing: var(--tracking-nav); text-transform: uppercase; text-decoration: none; cursor: pointer; } .site-nav__link::after, .site-nav__folder-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease); } .site-nav__link:hover::after, .site-nav__folder-toggle:hover::after, .site-nav__item:focus-within .site-nav__link::after, .site-nav__item:focus-within .site-nav__folder-toggle::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .site-nav__link::after, .site-nav__folder-toggle::after { transition: none; } } /* Folder caret — matches the source's closedArrowHeadFilled at 1em */ .site-nav__caret { width: 0.5em; height: 0.5em; transition: transform var(--duration-fast) var(--ease); } .site-nav__folder-toggle[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); } /* --- Desktop dropdown ---------------------------------------------------- */ .site-nav__folder { position: absolute; top: calc(100% + var(--space-2xs)); left: 50%; translate: -50% 0; min-width: 15rem; margin: 0; padding: var(--space-2xs); list-style: none; background: var(--pure-white); color: var(--indigo); border-radius: var(--radius-sm); box-shadow: 0 8px 24px hsla(var(--indigo-hsl), 0.18); opacity: 0; visibility: hidden; /* Only opacity is animated. visibility flips instantly on open and is delayed to the end of the fade on close. Putting visibility in the transition list instead makes it a discrete transition that flips at 50% progress, so the menu is unusable for the first ~75ms and stays hidden entirely if frames stall. */ transition: opacity var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fast); } .site-nav__folder-toggle[aria-expanded="true"] + .site-nav__folder { opacity: 1; visibility: visible; transition: opacity var(--duration-fast) var(--ease), visibility 0s linear 0s; } .site-nav__folder-link { display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); color: inherit; font-family: var(--font-body); font-size: var(--type-small); text-decoration: none; } .site-nav__folder-link:hover, .site-nav__folder-link:focus-visible { background: var(--cream); } /* --- Actions ------------------------------------------------------------- */ .site-header__actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; } /* Source: primary-button-style-solid + primary-button-shape-rounded */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--button-pad-y) var(--button-pad-x); border: 0; /* source: primary-button-shape-rounded → 6.4px, not a pill */ border-radius: var(--radius-button); font-family: var(--font-ui); font-size: var(--type-cta); font-weight: var(--weight-bold); letter-spacing: var(--tracking-cta); line-height: var(--leading-tight); /* --header-button-font-text-transform is "none": the label is literally "DONATE" in the CMS, so no transform is applied here. */ text-decoration: none; cursor: pointer; transition: opacity var(--duration-fast) var(--ease); } .btn--cta { background: var(--color-cta-bg); color: var(--color-cta-fg); } .btn--cta:hover { opacity: 0.85; } .btn--block { display: flex; width: 100%; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* --- Burger (source: doubleLineHamburger, 1px bars) ---------------------- */ .burger { display: none; /* shown below the breakpoint */ place-items: center; width: 44px; /* 44px hit target */ height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .burger__box { position: relative; display: block; width: 24px; height: 12px; } .burger__bar { position: absolute; left: 0; width: 100%; height: 1px; /* source inlined .top-bun/.patty/.bottom-bun{height:1px} */ background: currentColor; transition: transform var(--duration-fast) var(--ease), top var(--duration-fast) var(--ease); } .burger__bar--top { top: 0; } .burger__bar--bottom { top: 11px; } .burger[aria-expanded="true"] .burger__bar--top { top: 5px; transform: rotate(45deg); } .burger[aria-expanded="true"] .burger__bar--bottom { top: 5px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .burger__bar { transition: none; } } /* --- Mobile overlay ------------------------------------------------------ */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-overlay); padding-top: var(--chrome-offset, var(--header-height-mobile)); background: var(--color-overlay-bg); overflow-y: auto; opacity: 0; transition: opacity var(--duration-normal) var(--ease); } .mobile-nav.is-open { opacity: 1; } /* source menuOverlayAnimation: fade */ .mobile-nav[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .mobile-nav { transition: none; } } .mobile-nav__panel { max-width: var(--page-max); margin-inline: auto; padding: var(--space-md) var(--page-gutter) var(--space-2xl); } .mobile-nav__list { margin: 0 0 var(--space-lg); padding: 0; list-style: none; } .mobile-nav { color: var(--color-overlay-fg); } .mobile-nav__item { border-bottom: 1px solid hsla(var(--cream-hsl), 0.25); } .mobile-nav__link, .mobile-nav__folder-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; padding: var(--space-sm) 0; border: 0; background: none; color: var(--color-overlay-fg); font-family: var(--font-nav); font-size: 1.25rem; text-transform: uppercase; font-weight: var(--weight-bold); text-align: left; text-decoration: none; cursor: pointer; } .mobile-nav__folder-toggle .site-nav__caret { width: 0.6em; height: 0.6em; } .mobile-nav__folder { margin: 0; padding: 0 0 var(--space-sm) var(--space-sm); list-style: none; } .mobile-nav__folder[hidden] { display: none; } .mobile-nav__folder-link { display: block; padding: var(--space-2xs) 0; color: var(--color-overlay-fg); font-family: var(--font-body); font-size: var(--type-body); text-decoration: none; } /* The overlay ground is indigo (source menuOverlayTheme "dark-bold") and so is --color-cta-bg, so the default CTA renders as bare yellow text with no button shape on top of it. Invert inside the overlay: yellow fill, indigo label. Measured 8.11:1, comfortably AA. */ .mobile-nav .btn--cta { background: var(--cta-yellow); color: var(--indigo); } /* --- Breakpoint (768px — keep in sync with --bp-mobile) ------------------ */ @media (max-width: 767.98px) { :root { --announcement-height: var(--announcement-height-mobile); } .site-header__inner { min-height: var(--header-height-mobile); } .site-header__logo img { width: var(--logo-size-mobile); height: var(--logo-size-mobile); } .site-nav { display: none; } /* mobile layout: logoLeftNavRight */ .burger { display: grid; } .site-header__actions { margin-left: auto; } .site-header__actions .btn--cta { display: none; } /* CTA moves into overlay */ } @media (min-width: 768px) { .mobile-nav { display: none !important; } } /* --- Focus ---------------------------------------------------------------- */ .site-header :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 2px; } /* The overlay and the bar are indigo grounds, so an indigo ring would be invisible against them. */ .mobile-nav :focus-visible, .announcement-bar :focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 2px; } /* Scroll lock applied while the overlay is open */ body.chrome-scroll-locked { overflow: hidden; }