/* Theme Name: HBACF — Stockholm Child Theme URI: https://hbartandculture.org Description: Child theme for Stockholm. Applies the Hummingbird Art and Culture Foundation design system — deep navy, warm ivory and antique gold, with Cormorant Garamond display and Inter interface type. All customisation lives here so the parent theme can be updated safely. Author: HBACF Version: 1.1.0 Template: stockholm License: GNU General Public License v2 or later Text Domain: hbacf-child */ /* ========================================================================== IMPORTANT — the "Template:" line above must exactly match the parent theme's FOLDER name in wp-content/themes/. It is usually "stockholm". If your folder is named differently, change it to match or WordPress will refuse to activate this child theme. ========================================================================== */ /* ========================================================================== 1. DESIGN TOKENS Change a value here and it propagates across the whole site. ========================================================================== */ /* Navy and gold are sampled directly from the logo artwork — #061E36 and #BA9042 are the exact values in the brand files. */ :root{ --hb-navy: #061E36; --hb-navy-deep: #03121F; --hb-navy-soft: #0D2E4F; --hb-ivory: #F8F5EF; --hb-paper: #FFFFFF; --hb-gold: #BA9042; --hb-gold-soft: #D0AA6B; --hb-gold-dark: #9A7533; --hb-ink: #14181F; --hb-body: #4A505C; --hb-muted: #5B6270; --hb-faint: #8A8F99; --hb-line: #E4DED2; --hb-serif: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; --hb-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --hb-section: 120px; --hb-section-m: 78px; --hb-max: 1280px; } /* ========================================================================== 2. BASE TYPOGRAPHY Element-level, so it applies regardless of Stockholm's wrapper classes. ========================================================================== */ body, body p, body li, body td, body input, body textarea, body select, body button{ font-family: var(--hb-sans); font-weight: 300; } body{ font-size: 17px; line-height: 1.75; color: var(--hb-body); background: var(--hb-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p{ color: var(--hb-body); margin-bottom: 1.15em; } h1, h2, h3, h4, .title h1, .title h2, h1 a, h2 a, h3 a, h4 a{ font-family: var(--hb-serif); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; color: var(--hb-ink); } h5, h6{ font-family: var(--hb-sans); font-weight: 500; letter-spacing: 0.02em; color: var(--hb-ink); } h1{ font-size: clamp(2.9rem, 6vw, 5.2rem); } h2{ font-size: clamp(2.1rem, 3.8vw, 3.3rem); } h3{ font-size: clamp(1.5rem, 2.2vw, 1.95rem); } h4{ font-size: 1.3rem; } a{ color: var(--hb-gold); text-decoration: none; transition: color .3s ease; } a:hover{ color: var(--hb-gold-dark); } ::selection{ background: var(--hb-gold-soft); color: var(--hb-navy); } /* ========================================================================== 3. UTILITY CLASSES Add these in Elementor under Advanced > CSS Classes, or in the block editor under Advanced > Additional CSS class(es). ========================================================================== */ .hb-eyebrow{ font-family: var(--hb-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hb-gold); display: block; } .hb-lede{ font-size: 21px; line-height: 1.8; color: #3C424D; font-weight: 300; } .hb-rule::after{ content: ""; display: block; width: 52px; height: 1px; background: var(--hb-gold); margin: 26px 0; } .hb-serif{ font-family: var(--hb-serif) !important; font-weight: 300 !important; } .hb-sans { font-family: var(--hb-sans) !important; } .hb-navy-bg{ background: var(--hb-navy) !important; color: #fff; } .hb-navy-bg h1, .hb-navy-bg h2, .hb-navy-bg h3, .hb-navy-bg h4{ color: #fff; } .hb-navy-bg p{ color: rgba(255,255,255,.78); } .hb-ivory-bg{ background: var(--hb-ivory) !important; } .hb-badge{ display: inline-block; font-family: var(--hb-sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 13px; background: rgba(255,255,255,.94); color: var(--hb-navy); } .hb-badge--upcoming{ background: var(--hb-gold); color: #fff; } .hb-badge--current { background: var(--hb-navy); color: #fff; } .hb-badge--dev { background: transparent; color: var(--hb-gold); border: 1px solid var(--hb-gold); } .hb-meta{ font-family: var(--hb-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hb-faint); } .hb-recognition{ background: var(--hb-navy-deep); padding: 64px 0; } .hb-recognition ul{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } .hb-recognition li{ font-size: 13px; color: rgba(255,255,255,.74); padding: 0 34px; border-right: 1px solid rgba(255,255,255,.15); } .hb-recognition li:last-child{ border-right: 0; } /* ========================================================================== 4. BUTTONS Covers Stockholm's own button classes and Elementor's. ========================================================================== */ .q_button, .qode-btn, .qodef-btn, input[type="submit"], button[type="submit"], .elementor-button{ font-family: var(--hb-sans) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; padding: 15px 34px !important; border-radius: 0 !important; background-color: var(--hb-gold) !important; border: 1px solid var(--hb-gold) !important; color: #fff !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease !important; } .q_button:hover, .qode-btn:hover, .qodef-btn:hover, input[type="submit"]:hover, button[type="submit"]:hover, .elementor-button:hover{ background-color: var(--hb-gold-dark) !important; border-color: var(--hb-gold-dark) !important; color: #fff !important; } .hb-btn-outline, .hb-btn-outline .elementor-button{ background-color: transparent !important; border: 1px solid var(--hb-gold) !important; color: var(--hb-gold) !important; } .hb-btn-outline:hover, .hb-btn-outline .elementor-button:hover{ background-color: var(--hb-gold) !important; color: #fff !important; } .hb-btn-light, .hb-btn-light .elementor-button{ background-color: transparent !important; border: 1px solid rgba(255,255,255,.5) !important; color: #fff !important; } .hb-btn-light:hover, .hb-btn-light .elementor-button:hover{ background-color: #fff !important; border-color: #fff !important; color: var(--hb-navy) !important; } /* ========================================================================== 5. HEADER AND NAVIGATION ========================================================================== */ .header_inner_left .logo_wrapper a, .qodef-header-logo-link{ font-family: var(--hb-serif); } nav.main_menu > ul > li > a, .qodef-main-menu > ul > li > a, .main_menu > ul > li > a{ font-family: var(--hb-sans) !important; font-size: 13.5px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: none !important; } nav.main_menu > ul > li > a:hover, .qodef-main-menu > ul > li > a:hover{ color: var(--hb-gold) !important; } /* Donate item — assign CSS class hb-nav-donate to the menu item in Appearance > Menus (enable "CSS Classes" under Screen Options). */ .hb-nav-donate > a{ border: 1px solid var(--hb-gold) !important; padding: 10px 22px !important; font-size: 12.5px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--hb-gold) !important; transition: background-color .3s ease, color .3s ease !important; } .hb-nav-donate > a:hover{ background: var(--hb-gold) !important; color: #fff !important; } .drop_down .second .inner ul li a, .qodef-drop-down-second-inner ul li a{ font-family: var(--hb-sans) !important; font-size: 13px !important; letter-spacing: 0.03em !important; text-transform: none !important; } /* ========================================================================== 6. SECTION RHYTHM ========================================================================== */ .hb-section{ padding-top: var(--hb-section); padding-bottom: var(--hb-section); } .hb-section--tight{ padding-top: 78px; padding-bottom: 78px; } .hb-container{ max-width: var(--hb-max); margin: 0 auto; padding-left: 40px; padding-right: 40px; } /* ========================================================================== 7. CARDS — projects, programs, posts ========================================================================== */ .hb-card{ display: block; text-decoration: none; color: inherit; } .hb-card img{ display: block; width: 100%; height: auto; } .hb-card h3{ margin: 26px 0 12px; transition: color .3s ease; } .hb-card:hover h3{ color: var(--hb-gold); } .hb-card p{ font-size: 15.5px; line-height: 1.7; } .hb-card .hb-card__media{ overflow: hidden; position: relative; } .hb-card .hb-card__media img{ transition: transform 1.1s cubic-bezier(.2,.7,.3,1); } .hb-card:hover .hb-card__media img{ transform: scale(1.04); } /* ========================================================================== 8. FOOTER ========================================================================== */ .footer_top, .qodef-page-footer{ background: var(--hb-navy) !important; color: rgba(255,255,255,.66); font-size: 14px; } .footer_top h4, .footer_top h5, .qodef-page-footer h4, .qodef-page-footer h5{ font-family: var(--hb-sans) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--hb-gold-soft) !important; margin-bottom: 20px !important; } .footer_top a, .qodef-page-footer a{ color: rgba(255,255,255,.66); } .footer_top a:hover, .qodef-page-footer a:hover{ color: var(--hb-gold-soft); } .footer_bottom, .qodef-page-footer-bottom{ background: var(--hb-navy-deep) !important; font-size: 12.5px; color: rgba(255,255,255,.42); } /* ========================================================================== 9. FORMS ========================================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select{ font-family: var(--hb-sans) !important; font-size: 15px !important; font-weight: 300 !important; padding: 15px 18px !important; border: 1px solid var(--hb-line) !important; border-radius: 0 !important; background: #fff !important; color: var(--hb-ink) !important; } input:focus, textarea:focus, select:focus{ border-color: var(--hb-gold) !important; outline: none !important; } ::placeholder{ color: var(--hb-faint); opacity: 1; } /* ========================================================================== 10. THE EVENTS CALENDAR ========================================================================== */ .tribe-common, .tribe-common button, .tribe-common a{ font-family: var(--hb-sans) !important; } .tribe-events h1, .tribe-events h2, .tribe-events h3, .tribe-common h1, .tribe-common h2, .tribe-common h3{ font-family: var(--hb-serif) !important; font-weight: 300 !important; } .tribe-events .tribe-events-c-ical__link, .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button, .tribe-common .tribe-common-c-btn{ background-color: var(--hb-gold) !important; border-color: var(--hb-gold) !important; border-radius: 0 !important; color: #fff !important; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px !important; } /* ========================================================================== 11. ACCESSIBILITY — required by the brief (WCAG 2.2 AA) ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--hb-gold) !important; outline-offset: 3px !important; } .hb-skip-link{ position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--hb-navy); color: #fff; padding: 14px 22px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .hb-skip-link:focus{ left: 0; color: #fff; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 12. RESPONSIVE ========================================================================== */ @media (max-width: 1024px){ body{ font-size: 16px; } .hb-section{ padding-top: var(--hb-section-m); padding-bottom: var(--hb-section-m); } .hb-container{ padding-left: 24px; padding-right: 24px; } .hb-lede{ font-size: 19px; } .hb-recognition ul{ flex-direction: column; align-items: center; gap: 16px; } .hb-recognition li{ border-right: 0; padding: 0; } } @media (max-width: 680px){ h1{ font-size: 2.6rem; } h2{ font-size: 2rem; } .hb-section{ padding-top: 56px; padding-bottom: 56px; } } /* ========================================================================== 13. LOGO SIZING The wordmark is a wide lockup (roughly 5:1). Left unconstrained it dominates the header, so height is capped and width left automatic. ========================================================================== */ .header_inner_left .logo_wrapper a img, .qodef-header-logo-link img, .q_logo a img{ max-height: 54px !important; width: auto !important; } @media (max-width: 1024px){ .header_inner_left .logo_wrapper a img, .qodef-header-logo-link img, .q_logo a img{ max-height: 40px !important; } } /* ========================================================================== 14. HOMEPAGE TITLE AREA Stockholm prints a grey title bar showing the page name. On the homepage that means the word "Home" sits above the hero, which is not wanted. ========================================================================== */ .home .title, .home .title_outer, .home .qodef-page-title{ display: none !important; } /* ========================================================================== 15. LIVE-SITE OVERRIDES Anything added after reviewing the built pages goes below this line. ========================================================================== */ /* Stockholm forces uppercase on h1 and h2, and italic on h3 and h5. Both work against the editorial voice, so they are reset site-wide. */ h1, h2, h3, h4, h5, h6, .title h1, .title h2, .q_title, .qodef-page-title, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ text-transform: none !important; font-style: normal !important; } /* Card grids: keep the metadata line aligned across columns even when summaries run to different lengths. */ .hb-card-grid{ display: grid; align-items: start; } .hb-card-grid > *{ display: flex; flex-direction: column; height: 100%; } .hb-card-grid > * > .hb-meta{ margin-top: auto; } /* Every page now carries its OWN HERO BANDS, so Stockholm's grey page-title strip is redundant everywhere, not just on the homepage. */ .title, .title_outer, .qodef-page-title, .qodef-title{ display:none !important; } .content, .content .container{ padding-top:0 !important; margin-top:0 !important; } .content_inner > .container > .container_inner{ padding:0 !important; width:100% !important; } .full_width .full_width_inner{ padding:0 !important; } /* ========================================================================== HEADER — logo scale and the Donate pill ========================================================================== */ .q_logo img, .q_logo a img, .logo_wrapper img, header .q_logo img, img.normal, img.light, img.dark, img.sticky, img.mobile, .qodef-header-logo-link img{ max-height: 56px !important; width: auto !important; height: auto !important; } @media (max-width:1024px){ .q_logo img, .q_logo a img, .logo_wrapper img, header .q_logo img, img.normal, img.light, img.dark, img.sticky, img.mobile{ max-height: 40px !important; } } /* Donate sits on the menu row as an auto-height pill, not a full-height box. */ .hb-nav-donate{ display:inline-block !important; vertical-align:middle !important; float:none !important; } .hb-nav-donate > a{ display:inline-block !important; height:auto !important; line-height:1 !important; border:1px solid #BA9042 !important; padding:11px 22px !important; margin-left:18px !important; color:#BA9042 !important; font-size:11.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; font-weight:500 !important; } .hb-nav-donate > a:hover{ background:#BA9042 !important; color:#fff !important; } /* drop the divider that would otherwise sit between Contact and Donate */ .hb-nav-donate::before, .hb-nav-donate::after{ content:none !important; display:none !important; } nav.main_menu > ul > li:has(+ .hb-nav-donate)::after{ content:none !important; display:none !important; } /* ========================================================================== FOOTER — replaces Stockholm-s widgetised footer entirely ========================================================================== */ .footer_top, .footer_bottom, .footer_top_holder, .qodef-page-footer{ display:none !important; } .hb-footer{ background:#061E36; color:rgba(255,255,255,.66); font-family:var(--hb-sans); } .hb-footer__inner{ max-width:1280px; margin:0 auto; padding:82px 40px 50px; display:grid; grid-template-columns:1.9fr 1fr 1fr 1.2fr; gap:56px; } .hb-footer__logo{ max-width:250px; width:100%; height:auto; display:block; margin-bottom:26px; } .hb-footer__mission{ font-size:15px; line-height:1.75; color:rgba(255,255,255,.78); margin:0 0 16px; max-width:360px; } .hb-footer__legal{ font-size:13px; line-height:1.7; color:rgba(255,255,255,.48); margin:0; max-width:380px; } .hb-footer h4{ font-family:var(--hb-sans) !important; font-size:10px !important; letter-spacing:.2em; text-transform:uppercase; color:#D0AA6B !important; margin:0 0 20px; font-weight:500 !important; } .hb-footer ul{ list-style:none; margin:0; padding:0; } .hb-footer li{ margin-bottom:11px; } .hb-footer a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:14.5px; transition:color .3s ease; } .hb-footer a:hover{ color:#D0AA6B; } .hb-footer__addr{ font-size:14px; color:rgba(255,255,255,.48); margin-top:18px; } .hb-footer__bottom{ max-width:1280px; margin:0 auto; padding:24px 40px 44px; border-top:1px solid rgba(255,255,255,.13); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.45); } .hb-footer__links a{ font-size:12.5px; margin-left:20px; } .hb-footer__links a:first-child{ margin-left:0; } .hb-footer__credit{ color:rgba(255,255,255,.45); } .hb-footer__credit strong{ color:rgba(255,255,255,.72); font-weight:500; } @media (max-width:1024px){ .hb-footer__inner{ grid-template-columns:1fr 1fr; gap:40px; padding:56px 24px 36px; } .hb-footer__brand{ grid-column:1 / -1; } .hb-footer__bottom{ padding:22px 24px 36px; justify-content:flex-start; } } @media (max-width:600px){ .hb-footer__inner{ grid-template-columns:1fr; } } /* ALIGNMENT V2 ============================================================= Stockholm centres the logo with a percentage offset (.q_logo{top:50%} plus img{top:-50%}), which resolves against the anchor height. Constraining the logo height breaks that maths and the logo drifts upward. Flexbox centring does not depend on the image height, so it survives any logo we use. ========================================================================== */ .header_inner_left{ display:flex !important; align-items:center !important; height:100% !important; } .logo_wrapper{ display:flex !important; align-items:center !important; height:100% !important; float:none !important; } .q_logo{ position:static !important; top:auto !important; height:auto !important; display:flex !important; align-items:center !important; } .q_logo a{ position:static !important; height:auto !important; display:flex !important; align-items:center !important; } .q_logo img, .q_logo img.normal, .q_logo img.sticky, .q_logo img.dark, .q_logo img.light, .q_logo img.mobile{ position:static !important; top:auto !important; left:auto !important; transform:none !important; margin:0 !important; max-height:52px !important; width:auto !important; height:auto !important; display:block !important; } /* One shared centre line for the menu row and the Donate pill. */ nav.main_menu > ul{ display:flex !important; align-items:center !important; } nav.main_menu > ul > li{ float:none !important; } .hb-nav-donate{ display:flex !important; align-items:center !important; } .hb-nav-donate > a{ margin-left:18px !important; } /* CONTEMPORARY TYPE ======================================================== Single geometric sans across the whole site — Plus Jakarta Sans. Headings carry their weight through size and semibold rather than a contrasting serif, with tightened tracking at display sizes. ========================================================================== */ body, body p, body li, body td, body input, body textarea, body select, body button, h1, h2, h3, h4, h5, h6, .title h1, .title h2, .q_title, nav.main_menu > ul > li > a, .hb-footer, .hb-footer a, .hb-footer h4{ font-family: var(--hb-sans) !important; } body{ font-weight:400 !important; font-size:17px; line-height:1.7; letter-spacing:-.005em; } p{ font-weight:400; } h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a{ font-weight:600 !important; letter-spacing:-.022em !important; line-height:1.1 !important; } h5, h6{ font-weight:600 !important; letter-spacing:-.01em !important; } /* Display sizes trimmed — a semibold sans reads noticeably larger than a light serif. */ h1{ font-size: clamp(2.4rem, 4.6vw, 4.2rem) !important; } h2{ font-size: clamp(1.8rem, 3vw, 2.7rem) !important; } h3{ font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important; } .hb-lede{ font-weight:400; letter-spacing:-.01em; } /* MENU — no dividers, sentence case, medium weight, generous spacing. */ nav.main_menu > ul > li > a{ font-size:15px !important; font-weight:500 !important; letter-spacing:-.01em !important; text-transform:none !important; padding-left:16px !important; padding-right:16px !important; } nav.main_menu > ul > li::after, nav.main_menu > ul > li::before, nav.main_menu > ul > li > a::after, .main_menu > ul > li > .separator, nav.main_menu > ul > li > a > .item_inner > .menu_separator{ content:none !important; display:none !important; background:none !important; } nav.main_menu > ul > li{ background-image:none !important; } .hb-nav-donate > a{ font-size:14px !important; font-weight:600 !important; letter-spacing:-.005em !important; text-transform:none !important; padding:12px 24px !important; border-radius:2px !important; } /* CONTAINER ALIGNMENT ===================================================== Stockholm-s header container is 1100px wide while every content section uses max-width:1280px with 40px gutters. That mismatch pushed the logo in from the left edge of the copy and pulled Donate in from the right edge of the imagery. The header now uses identical box metrics, so the logo, the Donate pill, the body copy and the footer all sit on the same two rules. ========================================================================== */ header .container_inner, header .header_inner .container_inner, .header_bottom .container_inner, .header_top .container_inner{ max-width: 1280px !important; width: auto !important; margin: 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: content-box !important; } /* Footer uses the same metrics so its edges line up with the header. */ .hb-footer__inner, .hb-footer__bottom{ max-width:1280px !important; box-sizing:content-box !important; padding-left:40px !important; padding-right:40px !important; margin:0 auto !important; } @media (max-width:1024px){ header .container_inner, header .header_inner .container_inner, .header_bottom .container_inner, .header_top .container_inner, .hb-footer__inner, .hb-footer__bottom{ padding-left:24px !important; padding-right:24px !important; } } /* LOGO GUTTER ============================================================= .header_inner_left is absolutely positioned, so left:0 sits on the padding edge and the logo hangs 40px outside the text column. Offsetting it by the gutter puts the logo on the same left rule as the headline and the footer. ========================================================================== */ .header_inner_left{ left: 40px !important; } @media (max-width:1024px){ .header_inner_left{ left: 24px !important; } } /* MOBILE ================================================================== Page sections are written as inline-styled blocks, so every override here needs !important to beat the inline rule. Everything is scoped to .hb-sec so Stockholm-s own markup is untouched. ========================================================================== */ @media (max-width: 900px){ /* Every multi-column grid collapses to a single column. */ .hb-sec[style*="grid-template-columns"], .hb-sec div[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; gap: 30px !important; } /* Gutters drop from 40px to 22px. */ .hb-sec > div[style*="max-width:1280px"]{ padding-left: 22px !important; padding-right: 22px !important; } /* Vertical rhythm tightens. */ .hb-sec[style*="padding:110px"]{ padding: 60px 0 !important; } .hb-sec[style*="padding:100px"]{ padding: 56px 0 !important; } .hb-sec[style*="padding:90px"] { padding: 52px 0 !important; } .hb-sec[style*="padding:58px"] { padding: 40px 0 !important; } /* Panels that carried large desktop padding. */ .hb-sec > div[style*="padding:88px"]{ padding: 48px 22px !important; } /* Fixed-height imagery becomes fluid. */ .hb-sec img{ height: auto !important; min-height: 0 !important; max-height: 280px !important; width: 100% !important; object-fit: cover !important; } /* The hero photograph must still fill its section. */ .hb-sec img[style*="position:absolute"]{ height: 100% !important; max-height: none !important; position: absolute !important; } /* Hero sizing. */ .hb-sec[style*="min-height:84vh"]{ min-height: 74vh !important; } .hb-sec > div[style*="padding-top:170px"]{ padding-top: 130px !important; padding-bottom: 60px !important; } .hb-sec > div[style*="padding-top:150px"]{ padding-top: 120px !important; padding-bottom: 52px !important; } /* Vertical rules become horizontal ones when columns stack. */ .hb-sec a[style*="border-right"]{ border-right: 0 !important; border-bottom: 1px solid #E4DED2 !important; padding: 32px 0 !important; } .hb-sec a[style*="border-right"]:last-child{ border-bottom: 0 !important; } /* Recognition strip stacks and loses its dividers. */ .hb-sec span[style*="border-right"]{ border-right: 0 !important; display: block !important; padding: 7px 0 !important; text-align: center !important; } /* Body copy sizes down a step. */ .hb-sec p[style*="font-size:21px"]{ font-size: 18px !important; } .hb-sec p[style*="font-size:20px"]{ font-size: 17px !important; } .hb-sec p[style*="font-size:19px"]{ font-size: 17px !important; } /* Buttons go full width so they are comfortable to tap. */ .hb-sec a[style*="display:inline-block"][style*="padding:14px"], .hb-sec a[style*="display:inline-block"][style*="padding:13px"]{ display: block !important; text-align: center !important; margin: 0 0 12px 0 !important; padding: 15px 20px !important; } } /* Header and menu on small screens */ @media (max-width: 1024px){ .hb-nav-donate{ display: none !important; } .q_logo img{ max-height: 38px !important; } } @media (max-width: 600px){ body{ font-size: 16px; } .hb-sec > div[style*="max-width:1280px"]{ padding-left: 18px !important; padding-right: 18px !important; } .hb-sec > div[style*="padding:88px"]{ padding: 40px 18px !important; } .hb-sec img{ max-height: 230px !important; } } /* MOBILE HEADER =========================================================== On small screens Stockholm puts the burger button INSIDE .header_inner_left alongside the logo, and .header_inner_right collapses to zero width. So the flex row belongs on .header_inner_left: logo first, burger pushed right. ========================================================================== */ @media (max-width: 1024px){ header, .header_inner, .header_top_bottom_holder, .header_bottom{ height: auto !important; min-height: 0 !important; } header .header_bottom .container_inner{ display: block !important; position: relative !important; height: auto !important; min-height: 0 !important; padding: 14px 18px !important; width: auto !important; max-width: none !important; } .header_inner_left{ position: static !important; left: 0 !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; float: none !important; } .header_inner_left .logo_wrapper{ order: 1 !important; flex: 0 1 auto !important; } .header_inner_left .mobile_menu_button{ order: 2 !important; margin-left: auto !important; float: none !important; display: flex !important; align-items: center !important; height: auto !important; } .header_inner_left .mobile_menu_button span{ font-size: 24px !important; color: #061E36 !important; } .header_inner_right{ display: none !important; } .logo_wrapper, .q_logo, .q_logo a{ height: auto !important; min-height: 0 !important; width: auto !important; } .q_logo img{ max-height: 34px !important; } nav.mobile_menu{ width: 100% !important; float: none !important; } nav.mobile_menu ul li a{ font-size: 16px !important; padding: 14px 18px !important; } } /* MOBILE LOGO FLOW ======================================================== .logo_wrapper is absolutely positioned by Stockholm, so it sits outside the flex flow and ignores order/justify-content. Returning it to static lets the row place it: logo left, burger right. ========================================================================== */ @media (max-width: 1024px){ .header_inner_left .logo_wrapper{ position: static !important; left: auto !important; top: auto !important; transform: none !important; margin: 0 !important; } .header_inner_left{ min-height: 46px !important; } header .header_bottom .container_inner{ padding: 15px 18px !important; } .q_logo img.mobile-logo, .q_logo img{ max-height: 34px !important; width: auto !important; } } /* ADMIN BAR OFFSET ======================================================== The fixed header sits under the WordPress admin bar when logged in, which clips the logo. Visitors never see this, but editors do. ========================================================================== */ body.admin-bar header.page_header{ top: 32px !important; } @media (max-width: 782px){ body.admin-bar header.page_header{ top: 46px !important; } } /* Give the mobile header room so the logo is never cropped. */ @media (max-width: 1024px){ header.page_header, .header_inner, .header_top_bottom_holder, .header_bottom{ overflow: visible !important; } .header_inner_left{ min-height: 50px !important; } .logo_wrapper, .q_logo, .q_logo a{ overflow: visible !important; } } /* LIGHTBOX ================================================================ Posters sit at a readable size in the layout and open full screen on click. ========================================================================== */ .hb-zoom{ cursor: zoom-in; transition: opacity .25s ease; } .hb-zoom:hover{ opacity: .9; } #hb-lb{ position: fixed; inset: 0; z-index: 99999; background: rgba(3,18,31,.94); display: flex; align-items: center; justify-content: center; padding: 40px; } #hb-lb[hidden]{ display: none; } #hb-lb img{ max-width: 92vw; max-height: 90vh; width: auto; height: auto; display: block; box-shadow: 0 30px 80px rgba(0,0,0,.6); } #hb-lb-close{ position: absolute; top: 22px; right: 26px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 8px 14px; opacity: .8; } #hb-lb-close:hover{ opacity: 1; } #hb-lb-close:focus-visible{ outline: 2px solid #BA9042; outline-offset: 3px; } @media (max-width: 900px){ #hb-lb{ padding: 16px; } #hb-lb-close{ top: 8px; right: 10px; font-size: 34px; } } /* CONTACT FORM ============================================================ Rendered by the child theme so it inherits the site type and palette rather than a plugin’s own styling. ========================================================================== */ .hb-form{ margin:0; } .hb-form p{ margin:0 0 20px; } .hb-form label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#6B7280; font-weight:600; margin-bottom:8px; } .hb-form .hb-opt{ text-transform:none; letter-spacing:0; font-weight:400; color:#5C6673; font-size:12.5px; } .hb-form input[type=text], .hb-form input[type=email], .hb-form textarea, .hb-form select{ width:100% !important; background:#fff !important; border:1px solid #DDD6C8 !important; border-radius:2px !important; padding:14px 16px !important; font-size:16px !important; font-weight:400 !important; color:#14181F !important; } .hb-form input:focus, .hb-form textarea:focus, .hb-form select:focus{ border-color:#BA9042 !important; box-shadow:0 0 0 3px rgba(186,144,66,.14) !important; outline:none !important; } .hb-form textarea{ resize:vertical; min-height:150px; } .hb-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } .hb-form .hb-consent label{ text-transform:none; letter-spacing:0; font-size:14.5px; color:#4A505C; font-weight:400; line-height:1.6; display:flex; gap:11px; align-items:flex-start; } .hb-form .hb-consent input{ width:auto !important; margin-top:3px; flex:0 0 auto; } .hb-form-submit{ background:#BA9042 !important; color:#fff !important; border:0 !important; padding:15px 34px !important; font-size:14.5px !important; font-weight:600 !important; letter-spacing:-.005em !important; text-transform:none !important; border-radius:2px !important; cursor:pointer; transition:background-color .3s ease; width:auto !important; } .hb-form-submit:hover{ background:#9A7533 !important; } /* Honeypot — hidden from people, visible to bots. */ .hb-hp{ position:absolute !important; left:-9999px !important; height:0; overflow:hidden; } .hb-form-note{ padding:20px 22px; border-radius:2px; font-size:16px; line-height:1.7; } .hb-form-note--ok{ background:#EFF4EC; border-left:3px solid #5C7A4A; color:#2F4226; } .hb-form-note--err{ background:#FBF0EE; border-left:3px solid #A65442; color:#6B2C1E; } .hb-form-note a{ color:inherit; text-decoration:underline; } @media (max-width:700px){ .hb-form-row{ grid-template-columns:1fr; } } /* ========================================================================== MOBILE HEADER BALANCE V3 Two Stockholm defaults were breaking the mobile header: 1. .container_inner carries a 44px padding-top, which pushed the hero away from the header and left a grey band on every page. 2. The logo sits ~18px inside the container while the burger sits ~38px inside it, so the two ends were never symmetrical. Both are corrected here rather than per-page. ========================================================================== */ @media (max-width: 1000px){ /* Kill the empty band between header and first section. */ .content .container > .container_inner{ padding-top: 0 !important; } /* One shared gutter for both ends of the header. */ .header_bottom .container_inner{ padding-left: 20px !important; padding-right: 20px !important; } /* Logo flush to the left gutter. */ .header_bottom .header_inner_left, .header_bottom .logo_wrapper{ left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; } /* Burger flush to the right gutter, same optical inset as the logo. */ .mobile_menu_button, .side_menu_button_wrapper{ margin-right: 0 !important; padding-right: 0 !important; } .mobile_menu_button span, .side_menu_button_wrapper span{ margin-right: 0 !important; } /* Tighter header on small screens - 80px was too tall for the logo. */ .header_bottom, .header_bottom .container_inner, .header_inner_left{ height: 66px !important; } .logo_wrapper{ height: 66px !important; } .logo_wrapper img{ max-height: 38px !important; width: auto !important; } } @media (max-width: 480px){ .header_bottom .container_inner{ padding-left: 16px !important; padding-right: 16px !important; } .logo_wrapper img{ max-height: 34px !important; } } /* ========================================================================== MOBILE HEADER BALANCE V4 Two things V3 left behind, both visible under the header on a phone: 1. Grey band under the header. Stockholm's .content_top_margin keeps its desktop 100px offset while V3 shortened the mobile header to 66px. The 34px difference showed the grey .wrapper background as a band between the header and the hero. The offset now matches the header height exactly. 2. Burger sitting below the wordmark. The logo file (2112x425) is three stacked bands: HUMMINGBIRD occupies 7.5-46.6% of the height, the gold rule 58.1-70.1%, and ART & CULTURE FOUNDATION 82.1-92.2%. So the wordmark's optical centre is at 27.1% of the image, not 50%. Centring the burger on the whole logo therefore read as too low. It is lifted by 22.9% of the rendered logo height: 38px logo -> 9px, 34px logo -> 8px. ========================================================================== */ @media (max-width: 1000px){ /* 1. Content offset must equal the 66px mobile header, or a band appears. */ .content.content_top_margin{ margin-top: 66px !important; } /* 2. Both ends of the bar on one centred flex row. */ .header_bottom .container_inner{ display: flex !important; align-items: center !important; justify-content: space-between !important; } .header_bottom .header_inner_right, .header_bottom .side_menu_button_wrapper, .header_bottom .mobile_menu_button{ display: flex !important; align-items: center !important; height: 66px !important; float: none !important; } /* Lift the burger onto the HUMMINGBIRD line. */ .header_bottom .mobile_menu_button{ transform: translateY(-9px); } } @media (max-width: 480px){ /* Logo drops to 34px here, so the lift scales with it. */ .header_bottom .mobile_menu_button{ transform: translateY(-8px); } } /* ========================================================================== DARK SECTION TEXT COLOUR - GLOBAL GUARD Stockholm hard-sets every h1-h6 to rgb(20,24,31), near black. Each page's own CSS set the body copy on dark sections to ivory but never the headings, so card headings on navy rendered black-on-navy and were effectively invisible - "Opening Conversation" and the rest of the Forum Components cards were the case that surfaced it. Fixing this per page means it comes back on the next page someone builds, so the rule lives here and covers every dark section class in use: .navy, .deepnavy, .hb-navy-bg and the homepage .hb-flag band. Anything that legitimately needs a dark heading on a dark section - none today - can opt out with .keep-colour. ========================================================================== */ .navy h1:not(.keep-colour), .navy h2:not(.keep-colour), .navy h3:not(.keep-colour), .navy h4:not(.keep-colour), .navy h5:not(.keep-colour), .navy h6:not(.keep-colour), .deepnavy h1:not(.keep-colour), .deepnavy h2:not(.keep-colour), .deepnavy h3:not(.keep-colour), .deepnavy h4:not(.keep-colour), .deepnavy h5:not(.keep-colour), .deepnavy h6:not(.keep-colour), .hb-navy-bg h1:not(.keep-colour),.hb-navy-bg h2:not(.keep-colour), .hb-navy-bg h3:not(.keep-colour),.hb-navy-bg h4:not(.keep-colour), .hb-navy-bg h5:not(.keep-colour),.hb-navy-bg h6:not(.keep-colour), .hb-flag h1:not(.keep-colour), .hb-flag h2:not(.keep-colour), .hb-flag h3:not(.keep-colour), .hb-flag h4:not(.keep-colour){ color: #F8F5EF !important; } /* Bold runs inside dark cards inherit the same near-black. */ .navy strong, .navy b, .deepnavy strong, .deepnavy b, .hb-navy-bg strong, .hb-navy-bg b{ color: inherit; } /* ========================================================================== SYNC SOULS SUBMISSION FORM — additions to the shared .hb-form styling The contact form only needed text inputs, so three things it never used are defined here: the helper line under a field, the originality checkbox, and the submit button. The rest is inherited. ========================================================================== */ .hb-form .hb-form-hint{ display:block; margin-top:8px; font-size:13px; line-height:1.55; color:#6B7280; text-transform:none; letter-spacing:0; font-weight:400; } .hb-form p > .hb-form-hint{ margin-top:8px; } /* Checkbox rows read as a sentence, not as a field label, so the uppercase label treatment is deliberately switched off here. */ .hb-form .hb-form-check label{ display:flex; align-items:flex-start; gap:12px; text-transform:none; letter-spacing:0; font-weight:400; font-size:15px; line-height:1.6; color:#14181F; margin-bottom:0; } .hb-form .hb-form-check input[type="checkbox"]{ width:18px; height:18px; margin:3px 0 0; flex:0 0 auto; accent-color:#BA9042; } .hb-form button[type="submit"], .hb-form .hb-btn-solid{ display:inline-block; background:#BA9042; color:#03121F; border:0; border-radius:2px; padding:15px 34px; font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:background .25s ease; } .hb-form button[type="submit"]:hover, .hb-form .hb-btn-solid:hover{ background:#a87f37; } .hb-form button[type="submit"]:focus-visible{ outline:3px solid rgba(186,144,66,.5); outline-offset:2px; } /* ========================================================================== FOOTER — FIVE COLUMNS The grid was declared as 1.9fr 1fr 1fr 1.2fr, four tracks for four children: brand, Explore, Take part, Connect. Adding the Initiatives column gave it a fifth child with no track to sit in, so Connect wrapped onto a second row and the gaps went uneven. Five tracks now. Initiatives gets the widest of the link columns because its labels are the longest on the site, and the brand column gives back the width to pay for it. The gap tightens from 56px to 40px so the whole row still fits inside the 1280px container. ========================================================================== */ .hb-footer__inner{ grid-template-columns: 1.45fr 0.85fr 1.5fr 0.95fr 1.05fr !important; gap: 40px !important; } .hb-footer__inner .hb-footer__col a{ display:inline-block; } @media (max-width: 1200px){ /* Brand takes the full width, the four link columns sit under it. */ .hb-footer__inner{ grid-template-columns: repeat(4, 1fr) !important; gap: 36px 32px !important; } .hb-footer__brand{ grid-column: 1 / -1; } } @media (max-width: 860px){ .hb-footer__inner{ grid-template-columns: repeat(2, 1fr) !important; gap:34px 28px !important; } } @media (max-width: 520px){ .hb-footer__inner{ grid-template-columns: 1fr !important; gap:30px !important; padding:60px 20px 40px !important; } } /* ========================================================================== SOCIAL ICONS Same markup in the header and the footer, different colour context. In the header they sit to the left of the Donate pill, muted, and gain the gold on hover. They are hidden below 1000px on purpose: the mobile header is a two-item flex row that took real work to balance, and adding a third child would undo it. On a phone the icons are still reachable in the footer. ========================================================================== */ .hb-social{ display:flex; align-items:center; gap:14px; } .hb-social a{ display:inline-flex; align-items:center; justify-content:center; color:inherit; opacity:.72; transition:opacity .25s ease, color .25s ease; } .hb-social a:hover{ opacity:1; color:#BA9042; } .hb-social a:focus-visible{ outline:2px solid #BA9042; outline-offset:3px; border-radius:2px; } .hb-social svg{ display:block; } /* --- header --- */ .hb-nav-social{ display:flex !important; align-items:center; margin:0 18px 0 6px !important; } .hb-nav-social > a, .hb-nav-social::after{ display:none !important; } /* Stockholm adds separators */ .hb-social--nav{ color:#061E36; } .hb-social--nav a{ opacity:.55; } .hb-social--nav a:hover{ opacity:1; } @media (max-width:1000px){ .hb-nav-social{ display:none !important; } } /* --- footer --- */ .hb-footer__social{ margin-top:20px; gap:16px; color:rgba(255,255,255,.72); } .hb-footer__social a{ opacity:.8; } .hb-footer__social a:hover{ opacity:1; color:#D0AA6B; } .hb-footer__social svg{ width:20px; height:20px; } /* ========================================================================== STICKY HEADER — THE 46px GAP ON MOBILE Symptom: scroll on a phone and a strip of the page shows through above the sticky header, so the logo appears to float with content sliding behind and above it. Cause: WordPress renders #wpadminbar differently by width. - 783px and up : position fixed, 32px tall, always occupies the top - 782px and down: position absolute, 46px tall, scrolls away with the page The child theme pushed the fixed header down by 46px on mobile to clear the bar. That is right at scroll zero and wrong immediately after, because the bar has gone but the offset has not. The gap it leaves is transparent, which is why page content was visible through it. Fix: no offset on mobile. The header sits flush to the top once it becomes sticky, which is the only time the offset was doing anything. The desktop rule stays, because there the bar really is fixed and really is in the way. Only affects logged-in editors. Visitors have no admin bar and never saw the gap. ========================================================================== */ @media (max-width: 782px){ body.admin-bar header.page_header{ top: 0 !important; } } /* ========================================================================== STICKY HEADER — THE ADMIN BAR OFFSET WAS BEING APPLIED TWICE The real cause of the transparent strip above the logo. Stockholm already clears the admin bar itself: it puts padding-top on header.page_header equal to the bar's height. That padding is inside the header and it is transparent, because the white belongs to .header_bottom further in. The child theme then ALSO pushed the whole header down with top:32px. So the bar was cleared twice: once correctly, and once by moving the header down and leaving its own transparent padding sitting in open space below the bar. That padding is the strip page content was scrolling through. Removing the offset lets Stockholm's padding sit directly behind the fixed admin bar, where it is invisible, and the white header starts exactly where the bar ends. ========================================================================== */ body.admin-bar header.page_header{ top: 0 !important; } @media (max-width: 782px){ body.admin-bar header.page_header{ top: 0 !important; } } /* ========================================================================== TABLET HEADER — LOGO AND MENU WERE OVERLAPPING Measured on the live header: 1100px logo ends at 353, menu starts at 187 -> 166px of overlap 1200px logo ends at 353, menu starts at 287 -> 66px of overlap 1024px burger AND the full desktop menu both visible at once The desktop menu was switching on at 1001px, but the row only fits from about 1300px: a 268px logo, eight menu items, two social icons and the Donate pill. Between those two numbers the menu had nowhere to go and ran underneath the logo. Two changes: 1. The burger header now covers everything up to 1200px, so tablets get the same clean two-item header phones already had, and the burger and the desktop menu can never appear together. 2. Between 1201px and 1440px the logo steps down so the full row has room before the burger hands over. Above that it returns to full size. ========================================================================== */ @media (max-width: 1200px){ /* One navigation at a time. */ .header_bottom .main_menu, .header_bottom nav.main_menu{ display: none !important; } .header_bottom .mobile_menu_button, .header_bottom .side_menu_button_wrapper{ display: flex !important; align-items: center !important; } /* Social icons belong to the desktop row only. */ .hb-nav-social{ display: none !important; } /* Same balanced two-item row the phone header uses. */ .header_bottom .container_inner{ display: flex !important; align-items: center !important; justify-content: space-between !important; padding-left: 24px !important; padding-right: 24px !important; } .header_bottom, .header_bottom .container_inner, .header_inner_left, .logo_wrapper{ height: 72px !important; } .header_bottom .header_inner_left, .header_bottom .logo_wrapper{ left: 0 !important; margin-left: 0 !important; position: static !important; } .logo_wrapper img{ max-height: 42px !important; width: auto !important; } .header_bottom .mobile_menu_button{ height: 72px !important; } } /* The phone rules already set 66px and a 38px logo; keep them winning. */ @media (max-width: 1000px){ .header_bottom, .header_bottom .container_inner, .header_inner_left, .logo_wrapper{ height: 66px !important; } .logo_wrapper img{ max-height: 38px !important; } .header_bottom .mobile_menu_button{ height: 66px !important; } } /* Desktop, but not yet wide enough for a full-size logo alongside eight menu items, the icons and the pill. */ @media (min-width: 1201px) and (max-width: 1440px){ .logo_wrapper img{ max-height: 44px !important; width: auto !important; } .hb-social--nav{ gap: 10px; } .hb-nav-social{ margin: 0 12px 0 4px !important; } } /* -------------------------------------------------------------------------- Tablet header, part two. Hiding the desktop menu was not enough. Stockholm keeps the burger inside .header_inner_left together with the logo, and that block was still floated and 1466px wide inside a 995px container - which is why the burger ended up on the far left, in front of the logo, instead of opposite it. The phone rules already turn that block into a proper flex row. The same treatment now runs up to 1200px. -------------------------------------------------------------------------- */ @media (max-width: 1200px){ .header_bottom .header_inner_left{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; float: none !important; position: static !important; } .header_bottom .header_inner_right{ display: none !important; } .header_bottom .logo_wrapper{ position: static !important; float: none !important; display: flex !important; align-items: center !important; } .header_bottom .mobile_menu_button{ margin-left: auto !important; } } /* -------------------------------------------------------------------------- Tablet header, part three — source order and logo size. Measured inside .header_inner_left at 1100px: child 0 .mobile_menu_button 85-104 child 1 .logo_wrapper 124-1466 The burger comes FIRST in Stockholm's markup, so a plain flex row puts it on the left and pushes the logo out past the container. margin-left:auto could not fix that because it was already the first item. Explicit order settles it: logo first, burger last. .logo_wrapper was also stretching to 1466px inside a 995px container, so it is no longer allowed to flex-grow. And the logo image kept its 52-56px desktop cap here, which is what left no room in the first place - two parent rules set it with higher specificity than .logo_wrapper img, so the tablet cap matches them. -------------------------------------------------------------------------- */ @media (max-width: 1200px){ .header_bottom .header_inner_left .logo_wrapper{ order: 1 !important; flex: 0 1 auto !important; width: auto !important; max-width: 70% !important; } .header_bottom .header_inner_left .mobile_menu_button, .header_bottom .header_inner_left .side_menu_button_wrapper{ order: 2 !important; flex: 0 0 auto !important; margin-left: auto !important; } /* Match the specificity of the two parent rules that set 52px and 56px. */ .q_logo img, .q_logo a img, .q_logo img.normal, .logo_wrapper img, .logo_wrapper a img{ max-height: 42px !important; width: auto !important; height: auto !important; } } @media (max-width: 1000px){ .q_logo img, .q_logo a img, .q_logo img.normal, .logo_wrapper img, .logo_wrapper a img{ max-height: 38px !important; } } @media (max-width: 480px){ .q_logo img, .q_logo a img, .q_logo img.normal, .logo_wrapper img, .logo_wrapper a img{ max-height: 34px !important; } } /* -------------------------------------------------------------------------- Tablet header, part four — the last of the overlap. Measured again after part three: 1201px logo 85-353, menu starts 300 -> 53px overlap 1240px logo 85-353, menu starts 339 -> 15px overlap 1280px clear Two reasons it survived: 1. The 1201-1440 rule used .logo_wrapper img, which is exactly the selector that two Stockholm rules already beat with 52px and 56px. Computed max-height stayed at 54px, so the logo never shrank and the room it was supposed to free was never freed. 2. Even at a smaller logo, 1201-1280 is tight for eight menu items plus the icons and the pill. The burger now covers up to 1280 instead, which is a normal laptop breakpoint and leaves the desktop row only the widths it comfortably fits. -------------------------------------------------------------------------- */ @media (max-width: 1280px){ .header_bottom .main_menu, .header_bottom nav.main_menu{ display: none !important; } .header_bottom .mobile_menu_button, .header_bottom .side_menu_button_wrapper{ display: flex !important; align-items: center !important; } .hb-nav-social{ display: none !important; } .header_bottom .container_inner{ display: flex !important; align-items: center !important; justify-content: space-between !important; } .header_bottom .header_inner_left{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; float: none !important; position: static !important; } .header_bottom .header_inner_right{ display: none !important; } .header_bottom .header_inner_left .logo_wrapper{ order: 1 !important; flex: 0 1 auto !important; width: auto !important; position: static !important; float: none !important; } .header_bottom .header_inner_left .mobile_menu_button, .header_bottom .header_inner_left .side_menu_button_wrapper{ order: 2 !important; flex: 0 0 auto !important; margin-left: auto !important; } } /* Specific enough to beat the two parent rules that set 52px and 56px. */ @media (min-width: 1281px) and (max-width: 1500px){ .q_logo img, .q_logo a img, .q_logo img.normal, .logo_wrapper img, .logo_wrapper a img{ max-height: 44px !important; width: auto !important; height: auto !important; } .hb-social--nav{ gap: 10px; } .hb-nav-social{ margin: 0 12px 0 4px !important; } } /* -------------------------------------------------------------------------- Tablet header, part five — five logos in one wrapper. This is what was actually breaking it, and it explains the missing menu. Stockholm keeps FIVE logo images inside .logo_wrapper and swaps between them by context: normal, light, dark, mobile-logo and sticky. Only one is ever meant to be visible. Measured at 1280px, all five were laid out side by side: normal 85-353 light 353-622 dark 622-890 mobile-logo 890-1158 sticky 1158-1427 That made .logo_wrapper 1342px wide inside a 1176px row, so the burger was pushed to x=1427 - past the right edge of a 1280px screen. It was never missing, it was off the page. The earlier width/height overrides in this file are what let them fall into normal flow instead of stacking. Rather than unpick that, the tablet range now shows one logo and hides the rest outright. -------------------------------------------------------------------------- */ @media (max-width: 1280px){ .header_bottom .logo_wrapper img, .header_bottom .q_logo img{ display: none !important; } .header_bottom .logo_wrapper img.normal, .header_bottom .q_logo img.normal{ display: block !important; position: static !important; max-height: 42px !important; width: auto !important; height: auto !important; opacity: 1 !important; visibility: visible !important; } /* The wrapper must not stretch now that it holds a single image. */ .header_bottom .logo_wrapper{ flex: 0 0 auto !important; width: auto !important; } } @media (max-width: 1000px){ .header_bottom .logo_wrapper img.normal, .header_bottom .q_logo img.normal{ max-height: 38px !important; } } @media (max-width: 480px){ .header_bottom .logo_wrapper img.normal, .header_bottom .q_logo img.normal{ max-height: 34px !important; } } /* -------------------------------------------------------------------------- Tablet header, part six — logo and page content on the same left edge. Measured at 834px: header .container_inner starts at 45, 744px wide -> logo at 63 page content -> heading at 14 And at 1280px: logo at 85, heading at 32. The header was using Stockholm's own narrower, centred container while every page section uses max-width:1280px with a 40px gutter. Two different boxes, so the logo could never line up with the text under it. Below 1281px the header now uses the section container exactly, which is the same rule the rest of the site is built on: max-width 1280, centred, 40px gutter (20px on small screens). -------------------------------------------------------------------------- */ @media (max-width: 1280px){ .header_bottom .container_inner{ max-width: 1280px !important; width: 100% !important; margin: 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } } @media (max-width: 900px){ .header_bottom .container_inner{ padding-left: 20px !important; padding-right: 20px !important; } } /* -------------------------------------------------------------------------- Tablet header, part seven — the 45px was on .header_bottom itself. Walking the header's parents at 834px showed where the offset came from: .container_inner 45-774 padding 18px -> logo lands at 63 .container 45-774 padding 0 .header_bottom 0-819 padding 45px <- here Every previous attempt set padding on .container_inner, which is two levels too far in. The 45px on .header_bottom was never touched, so the whole header row stayed inset while page sections started at their own gutter, and the logo could never sit above the text. The gutter is now declared once, on the container, using the same box every section on the site uses: max-width 1280, centred, 40px (20px on small screens). The other two levels are zeroed so nothing adds to it. -------------------------------------------------------------------------- */ @media (max-width: 1280px){ .page_header .header_bottom{ padding-left: 0 !important; padding-right: 0 !important; } .page_header .header_bottom > .container{ max-width: 1280px !important; width: 100% !important; margin: 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } .page_header .header_bottom .container > .container_inner{ max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } } @media (max-width: 900px){ .page_header .header_bottom > .container{ padding-left: 20px !important; padding-right: 20px !important; } } /* -------------------------------------------------------------------------- Tablet header, part eight — the gutter number itself. After part seven the edges lined up exactly at 900px and below, but 901-1280 was still 16px out: the header used a 40px gutter while the pages use 24px. 24px is the documented container gutter for this site (max-width 1280, centred, 24px sides), and it is what every initiative page section uses. The header now matches it. -------------------------------------------------------------------------- */ @media (min-width: 901px) and (max-width: 1280px){ .page_header .header_bottom > .container{ padding-left: 24px !important; padding-right: 24px !important; } } /* -------------------------------------------------------------------------- ABOUT — MISSION & VALUES The section was seven items in a single column, each only 10-29 words, so it ran a long way down the page while every line was short. Same words, different shape: mission and vision two cards side by side, they carry the most weight the five values a six-track grid, 3 on the first row and the last two centred underneath, so nothing is left stranded The six-track trick is the same one the homepage flagship section uses, so the two pages stay consistent. -------------------------------------------------------------------------- */ @media (max-width: 1000px){ .hb-values{ grid-template-columns: repeat(2, 1fr) !important; } .hb-values > div{ grid-column: auto !important; } } @media (max-width: 640px){ .hb-values{ grid-template-columns: 1fr !important; gap: 16px !important; } .hb-values > div{ grid-column: auto !important; padding: 24px 22px !important; } } /* -------------------------------------------------------------------------- Tablet header, part nine — the burger opened nothing. Stockholm hides the panel globally: nav.mobile_menu, nav.mobile_menu ul { display: none } and only switches the panel back on inside its own breakpoint: @media (max-width: 1000px) { nav.mobile_menu { display: block } } The burger was moved up to 1280px but that rule was not, so between 1001px and 1280px the button toggled a panel that could never be shown. Only the nav is re-enabled here, not its ul. That is exactly how it behaves below 1000px: the nav is present, the list stays collapsed, and the theme's own toggle slides the list open. Re-enabling the ul too would leave the menu permanently expanded. -------------------------------------------------------------------------- */ @media (min-width: 1001px) and (max-width: 1280px){ nav.mobile_menu{ display: block; } } /* -------------------------------------------------------------------------- HOMEPAGE — "THREE AREAS OF WORK" CARDS ARE NOW LINKS The three cards had no anchor anywhere in the section, so they looked clickable and did nothing. Each one now covers itself with a stretched link to the matching section on the Programs page, which is the same whole-card pattern the flagship initiative cards already use. Anchor ids were added to the Programs page sections at the same time: #visual-arts, #film-storytelling, #community-dialogue and #music-artist-development. scroll-margin-top keeps the sticky header from covering the heading when you land on one. -------------------------------------------------------------------------- */ .hb-area{ transition: transform .35s ease; } .hb-area-link{ position: absolute; inset: 0; z-index: 3; font-size: 0; color: transparent; } .hb-area-link:focus-visible{ outline: 3px solid #BA9042; outline-offset: 4px; } .hb-area img{ transition: transform .6s ease; } .hb-area:hover img{ transform: scale(1.04); } .hb-area h3{ transition: color .25s ease; } .hb-area:hover h3{ color: #BA9042; } .hb-area-go{ display: inline-block; margin-top: 14px; color: #BA9042; font-size: 14px; font-weight: 600; letter-spacing: .01em; } /* Landing on an anchor should not put the heading behind the fixed header. */ #visual-arts, #film-storytelling, #community-dialogue, #music-artist-development{ scroll-margin-top: 120px; } @media (max-width: 1280px){ #visual-arts, #film-storytelling, #community-dialogue, #music-artist-development{ scroll-margin-top: 90px; } } /* ========================================================================== DARK SECTIONS — BODY COPY, NOT JUST HEADINGS The earlier guard only covered h1-h6. Measured on the HIFF page, the paragraphs in "The Vision Behind HIFF" were still coming through dark on deep navy: lede rgb(35,59,82) on rgb(3,18,31) contrast 1.64 body rgb(74,80,92) on rgb(3,18,31) contrast 2.34 Both are effectively invisible. Anything under about 4.5 fails, and 1.64 is barely a shade apart from the background. Paragraphs, list items and blockquotes inside a dark section now take the light body colour, the same way the headings already do. .keep-colour is still there as an opt-out. ========================================================================== */ /* :not([style*="color"]) matters. Where an element already declares its own colour inline, that was a deliberate decision by whoever built the page and this rule must not override it. The Creative Enterprise workshop cards are white panels inside a navy section with their own dark text; without this guard their copy was forced to near-white and measured 1.26 against the card - effectively invisible. This rule only supplies a colour where none was chosen. */ .navy p:not(.keep-colour):not([style*="color"]), .navy li:not(.keep-colour):not([style*="color"]), .navy blockquote:not(.keep-colour):not([style*="color"]), .deepnavy p:not(.keep-colour):not([style*="color"]), .deepnavy li:not(.keep-colour):not([style*="color"]), .deepnavy blockquote:not(.keep-colour):not([style*="color"]), .hb-navy-bg p:not(.keep-colour):not([style*="color"]), .hb-navy-bg li:not(.keep-colour):not([style*="color"]){ color: #DFE6EE !important; } /* Any white or ivory panel sitting inside a dark band keeps dark text, whatever class it happens to use. */ .navy .workshop p, .deepnavy .workshop p, .navy .card p, .deepnavy .card p, .navy .workshop .deliverables, .deepnavy .workshop .deliverables{ color: #334 !important; } .navy .workshop h3, .deepnavy .workshop h3, .navy .workshop .sub, .deepnavy .workshop .sub{ color: #14181F !important; } /* The lede sits a step brighter, as it does on the light sections. */ .navy .lede:not(.keep-colour):not([style*="color"]), .deepnavy .lede:not(.keep-colour):not([style*="color"]), .hb-navy-bg .lede:not(.keep-colour):not([style*="color"]){ color: #EEF3F8 !important; } /* A white card inside a dark section keeps its dark text - the rule above would otherwise wash it out. */ .navy .hb-card p, .deepnavy .hb-card p, .navy [style*="background:#fff"] p, .deepnavy [style*="background:#fff"] p{ color: #4A505C !important; } /* ========================================================================== HIFF — FESTIVAL EXPERIENCE Six items of 13-19 words each, stacked one under another, so the section ran a long way down while every line stopped short. Three across, two rows, same words. ========================================================================== */ .hiff-exp .in{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .hiff-exp .in > .eyebrow, .hiff-exp .in > .rule, .hiff-exp .in > .lede, .hiff-exp .in > h2{ grid-column: 1 / -1; } .hiff-exp .in > .lede{ margin-bottom: 8px; } .hiff-exp .experience-item{ background: #fff; border: 1px solid #E4DED2; border-top: 3px solid #BA9042; padding: 28px 26px; height: 100%; } .hiff-exp .experience-item h3{ margin: 0 0 10px; font-size: 1.05rem; } .hiff-exp .experience-item p{ margin: 0; font-size: 15px; line-height: 1.7; } @media (max-width: 1000px){ .hiff-exp .in{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .hiff-exp .in{ grid-template-columns: 1fr; gap: 16px; } } /* ========================================================================== GOLD TEXT ON LIGHT BACKGROUNDS Brand gold #BA9042 is the right colour on navy, where it measures 5.74 and 6.45. On white and ivory it only reaches 2.93 and 2.70, and every eyebrow, kicker and "Explore" link on the site is set in it. Stockholm's own active-menu gold #E6AE48 was worse at 2.00. Gold is kept, only darkened for light backgrounds. Same hue (38 degrees), same saturation, lightness dropped to 36%: #876731 on white 5.23 on ivory 4.81 Dark sections are excluded further down and keep #BA9042, because there the brighter gold is both correct and readable. Rules, borders, underlines and button fills are untouched - they carry no text, so contrast does not apply to them and the brand colour stays. ========================================================================== */ :root{ --hb-gold-ink: #876731; } /* Text set in gold through the stylesheet. */ .hb-area-go, .ivory .eyebrow, .hiff-exp .eyebrow, .l2h-white .eyebrow, .l2h-cream .eyebrow, .l2h-white .kicker, .l2h-cream .kicker, .ssm section:not(.navy):not(.deepnavy):not(.ssm-hero) .eyebrow, .hb-init .c .kicker, .hb-init .c .go{ color: var(--hb-gold-ink) !important; } /* Gold set inline, which is how most of the older pages were built. Only darkened where the surrounding band is known to be light. Scoping it this way round matters: an element I miss keeps the brighter brand gold, which is merely un-ideal, whereas darkening something that sits on navy makes it unreadable. The first attempt did exactly that to the hero eyebrows on the homepage and HIFF. */ section.hb-sec[style*="background:#F8F5EF"] [style*="color:#BA9042"], section.hb-sec[style*="background:#fff"] [style*="color:#BA9042"], section.hb-sec[style*="background:#FFF"] [style*="color:#BA9042"], section.hb-sec[style*="background:#F8F5EF"] [style*="color:#D0AA6B"], section.hb-sec[style*="background:#fff"] [style*="color:#D0AA6B"], section.hb-sec:not([style*="background"]) [style*="color:#BA9042"], section.hb-sec:not([style*="background"]) [style*="color:#D0AA6B"], .ivory [style*="color:#BA9042"], .l2h-white [style*="color:#BA9042"], .l2h-cream [style*="color:#BA9042"], .hb-values [style*="color:#BA9042"]{ color: var(--hb-gold-ink) !important; } /* Stockholm's own gold, used on the current menu item and on link hovers. */ .main_menu > ul > li.active > a, .main_menu > ul > li:hover > a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover{ color: var(--hb-gold-ink) !important; } /* The Donate pill was white on gold at 2.93. Navy on gold reads clearly and keeps the pill unmistakably gold. */ .hb-nav-donate a{ color: #03121F !important; } .hb-form button[type="submit"], .hb-form .hb-btn-solid, .l2h-btn-solid, .ssm-solid{ color: #03121F !important; } [style*="background:#BA9042"]{ color: #03121F !important; } /* --- dark sections keep the original brand gold ------------------------- */ .navy .eyebrow, .navy .kicker, .navy .go, .deepnavy .eyebrow, .deepnavy .kicker, .deepnavy .go, .hb-navy-bg .eyebrow, .hb-navy-bg .kicker, .hb-navy-bg .go, .hb-flag .kicker, .hb-flag .go, .navy [style*="color:#BA9042"], .deepnavy [style*="color:#BA9042"], .navy [style*="color:#D0AA6B"], .deepnavy [style*="color:#D0AA6B"], .hb-footer h4, .hb-init .intro .eyebrow{ color: #BA9042 !important; } .hb-footer__social a:hover{ color: #D0AA6B !important; } /* -------------------------------------------------------------------------- Gold, last pass — links written as color:var(--gold) Two links on HIFF were still at 2.93 and 2.69: "View project" and "Learn more", both inside white .card blocks. They set their colour as inline color:var(--gold), so the attribute selectors looking for the hex never matched them. Scoped to light bands only, and .card is deliberately not targeted on its own: on the Forum page .card is a translucent panel on navy, where the brighter gold is the correct colour. -------------------------------------------------------------------------- */ .hiff-wrap section:not(.navy):not(.deepnavy):not(.hero) .card a, .hiff-wrap section:not(.navy):not(.deepnavy):not(.hero) a[style*="--gold"], .hiff-wrap section:not(.navy):not(.deepnavy):not(.hero) [style*="color:var(--gold)"], .ivory .card a, .ivory [style*="color:var(--gold)"], .l2h-white [style*="color:var(--gold)"], .l2h-cream [style*="color:var(--gold)"]{ color: var(--hb-gold-ink) !important; } /* ========================================================================== DONATE PILL — HOVER STATE Stockholm's hover swaps the pill to a gold fill and sets the label white. White on #BA9042 measures 2.93, so at a glance the text looked like it had vanished into the gold. Two rules were fighting over the label and the outcome depended on source order. Declared explicitly here instead: gold fill, deep navy label, which measures about 6.4 and keeps the pill unmistakably gold. ========================================================================== */ .hb-nav-donate > a, .hb-nav-donate a{ transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .hb-nav-donate > a:hover, .hb-nav-donate > a:focus, .hb-nav-donate > a:focus-visible, .hb-nav-donate:hover > a{ background-color: #BA9042 !important; border-color: #BA9042 !important; color: #03121F !important; } .hb-nav-donate > a:hover *, .hb-nav-donate:hover > a *{ color: #03121F !important; } /* ========================================================================== CERTIFICATES — PORTRAIT OVER THE CERTIFICATE The recipient photograph sat as a 300px band directly above the certificate, so the column read as two unrelated pictures stacked. The certificate is the record; the portrait is context. It now sits as a circular crop overlapping the certificate's top-left corner, which reads as one figure rather than two. The ring is the section's own ivory, so the circle appears cut into the certificate rather than pasted on top of it. ========================================================================== */ .hb-cert-figure{ position: relative; } .hb-cert-portrait{ position: absolute; left: -30px; top: -30px; width: 138px; height: 138px; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 6px solid #F8F5EF; box-shadow: 0 12px 32px rgba(6,30,54,.24); background: #F8F5EF; cursor: zoom-in; z-index: 2; display: block; } @media (max-width: 900px){ .hb-cert-portrait{ width: 112px; height: 112px; left: -16px; top: -20px; border-width: 5px; } } @media (max-width: 560px){ .hb-cert-portrait{ width: 88px; height: 88px; left: -8px; top: -14px; border-width: 4px; } } /* ========================================================================== READING WIDTH Several intro blocks were capped at 700px inside a 1280px container, so a short paragraph broke to a new line around the halfway mark and the right-hand half of the page sat empty. 980px keeps the line length comfortable without leaving that gap. ========================================================================== */ /* Nine text blocks across seven pages were capped between 680px and 800px inside the 1280px container, so a paragraph broke to a new line around halfway and the right-hand side of the band sat empty. Measured on the live pages: about 760 Mission & values leadership 800 Governance programs 680 Work with us certificates 760 Completed certificates 800 The program certificates 760 More honorees pindi de gurucharan 680 The program award of excellence 760 Areas of recognition creative enterprise 800 pull quote All of them are plain text wrappers, none is a grid, so one rule covers the lot. 980px keeps the line length readable while using the width the band actually has. Grids are excluded so no column layout is disturbed. */ .hb-sec [style*="max-width:680px"]:not([style*="display:grid"]), .hb-sec [style*="max-width:700px"]:not([style*="display:grid"]), .hb-sec [style*="max-width:760px"]:not([style*="display:grid"]), .hb-sec [style*="max-width:800px"]:not([style*="display:grid"]){ max-width: 980px !important; } /* -------------------------------------------------------------------------- Certificates — the portrait must respect the page's left edge. left:-30px pushed the circle outside the 1280 container, so it broke the one line everything else on the site is aligned to: the logo, the body copy and the right edge of the Donate pill. Nothing should cross that. The figure is the first grid column, so its left edge already sits on the container line. left:0 puts the portrait flush with it. The circle still sits over the certificate's top corner and still lifts above it, which is what made it read as one figure — only the horizontal overhang is gone. -------------------------------------------------------------------------- */ .hb-cert-portrait{ left: 0 !important; top: -26px !important; } @media (max-width: 900px){ .hb-cert-portrait{ left: 0 !important; top: -20px !important; } } @media (max-width: 560px){ .hb-cert-portrait{ left: 0 !important; top: -14px !important; } } /* ========================================================================== COPYRIGHT BADGE ON THE FOUNDATION'S OWN IMAGES The wrapper is a span set to display:block so it can be injected inside any parent — including

and flex or grid cells — without breaking the surrounding markup. It inherits nothing of its own size: the image still controls the box, so no existing layout moves. ========================================================================== */ .hb-shot{ position: relative; display: block; line-height: 0; overflow: hidden; } .hb-shot > img{ display: block; width: 100%; height: auto; cursor: zoom-in; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; } /* Images that were given an explicit height keep it. */ .hb-shot > img[style*="height:"]{ height: inherit; } .hb-shot__mark{ position: absolute; right: 10px; bottom: 10px; font-size: 10px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: rgba(248,245,239,.78); background: rgba(3,18,31,.48); padding: 5px 9px; border-radius: 2px; pointer-events: none; z-index: 2; font-family: 'Plus Jakarta Sans', sans-serif; } /* Full-bleed hero backgrounds carry the heading, so the badge sits inset. */ .hb-shot > img[style*="inset:0"] + .hb-shot__mark, .hb-shot > img[style*="position:absolute"] + .hb-shot__mark{ right: 24px; bottom: 24px; } @media (max-width: 560px){ .hb-shot__mark{ font-size: 9px; padding: 4px 7px; right: 8px; bottom: 8px; } } /* ========================================================================== PROGRAMS — HIFF The section had the intro, a bullet list and the founder's quote all in one band, which is why it read as messy. It is now an image-and-text row, a seven-item grid of what the festival presents, and the quote lifted out into its own navy section so it lands as a statement rather than a footnote. ========================================================================== */ @media (max-width: 1100px){ .hb-hiff-grid{ grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 800px){ .hb-hiff-grid{ grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 520px){ .hb-hiff-grid{ grid-template-columns: 1fr !important; } } /* ========================================================================== CREATIVE ENTERPRISE — QUARTERLY WORKSHOP SERIES Four workshop cards were stacked at the full 1280px width, one under another. At that width each card is a wide, shallow band and the section runs a long way down while every line of text stops short. Two across reads as a set of four rather than four separate slabs, and halves the height of the section. ========================================================================== */ .workshop-grid, .navy .in:has(> .workshop), .deepnavy .in:has(> .workshop){ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; } /* The eyebrow, rule and lede stay full width above the cards. */ .navy .in:has(> .workshop) > .eyebrow, .navy .in:has(> .workshop) > .rule, .navy .in:has(> .workshop) > .lede, .navy .in:has(> .workshop) > h2, .deepnavy .in:has(> .workshop) > .eyebrow, .deepnavy .in:has(> .workshop) > .rule, .deepnavy .in:has(> .workshop) > .lede, .deepnavy .in:has(> .workshop) > h2{ grid-column: 1 / -1; } .workshop{ height: 100%; } @media (max-width: 900px){ .workshop-grid, .navy .in:has(> .workshop), .deepnavy .in:has(> .workshop){ grid-template-columns: 1fr; } } /* ========================================================================== MOTION A small, deliberate system rather than effects scattered about: 1. hero words arrive, left to right, once 2. the homepage adds a calligraphic stroke that draws itself 3. sections lift very slightly into place as you reach them, once Rules this obeys, because motion on a public site is easy to get wrong: - Nothing loops. Looping animation is distracting and costs battery. - Only opacity and transform are animated, so nothing shifts the layout and Cumulative Layout Shift stays at zero. - The hero IMAGE is never faded in. It is the Largest Contentful Paint element; delaying it would make the site measurably slower to load. Only the text over it moves. - prefers-reduced-motion turns all of it off. Anyone who has asked their system for less movement gets the page static, fully legible. This is the part a slider plugin would not have honoured. ========================================================================== */ /* --- 1. hero words ------------------------------------------------------ */ .hb-word{ display: inline-block; opacity: 0; transform: translateX(-14px); animation: hb-carry .7s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes hb-carry{ to{ opacity:1; transform:translateX(0); } } /* --- 2. calligraphic stroke, homepage hero only ------------------------- */ .hb-stroke{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .5; } .hb-stroke path{ fill: none; stroke: #BA9042; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: hb-draw 2.8s cubic-bezier(.4,0,.2,1) .35s forwards; } @keyframes hb-draw{ to{ stroke-dashoffset: 0; } } /* The hero text must sit above the stroke. */ .home .hb-sec:first-of-type .in, .home .hb-sec:first-of-type > div{ position: relative; z-index: 2; } /* --- 3. section reveal -------------------------------------------------- */ .hb-reveal{ opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .hb-reveal.hb-in{ opacity: 1; transform: none; will-change: auto; } /* Staggered children inside a grid or a split panel. */ .hb-reveal.hb-d1{ transition-delay: .08s; } .hb-reveal.hb-d2{ transition-delay: .16s; } .hb-reveal.hb-d3{ transition-delay: .24s; } /* --- off, for anyone who asked for less movement ------------------------ */ @media (prefers-reduced-motion: reduce){ .hb-word, .hb-stroke path, .hb-reveal{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* ========================================================================== 1. PAGE TRANSITIONS One at-rule. Moving between pages becomes a soft cross-fade instead of a white flash, across the whole site, with no JavaScript at all. The browser does the work: Chrome since 126, Safari since 18.2, Firefox partially from early 2026. Anywhere it is not supported the site simply navigates the way it always has. Nothing to maintain, nothing to break, and no library that will look dated in two years. ========================================================================== */ /* Turned off at the owner's request - the cross-fade between pages read as a dissolve rather than a transition, and a plain instant load is cleaner. The rule is kept here, commented, in case it is wanted later. @view-transition{ navigation: auto; } ::view-transition-old(root){ animation: hb-vt-out .22s ease both; } ::view-transition-new(root){ animation: hb-vt-in .32s cubic-bezier(.2,.7,.3,1) both; } @keyframes hb-vt-out{ to{ opacity:0; } } @keyframes hb-vt-in { from{ opacity:0; transform:translateY(8px); } } .page_header{ view-transition-name: hb-header; } .hb-footer{ view-transition-name: hb-footer; } */ /* ========================================================================== 2. SCROLL-DRIVEN REVEAL — CSS, not JavaScript The earlier JS version was removed because it hid content first and revealed it with a script: if the script failed, the page was blank. animation-timeline inverts that risk. It lives inside @supports, so a browser without it never applies the starting state at all and the content is simply there. The animation is also tied to scroll position rather than a timer, so it follows the reader instead of guessing. ========================================================================== */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .content section > .in, .content_inner section > .in, .content section > div:first-child, .content_inner section > div:first-child{ animation: hb-rise linear both; animation-timeline: view(); /* The range must finish while the element is still entering the viewport. "cover 26%" needed the page to keep scrolling past it, which the last section on a page can never do - it ran out of document and stopped part-way, leaving the heading permanently half-faded. Get Involved showed this clearly. Ending inside "entry" means every section completes, including the last. */ animation-range: entry 5% entry 65%; } /* The hero is already on screen when the page loads; it must not fade. */ .content section:first-of-type > .in, .content_inner section:first-of-type > .in, .content section:first-of-type > div:first-child, .content_inner section:first-of-type > div:first-child{ animation: none; } } } @keyframes hb-rise{ from{ opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } /* ========================================================================== 3. INK UNDERLINE A line that draws itself left to right, the same gesture as the hero stroke. Applied to focus as well as hover, so it is not decoration for mouse users only - keyboard visitors get the same signal, and on touch the link still reads as a link. ========================================================================== */ .content a:not(.button):not([class*="btn"]):not(.stretch):not(.hb-area-link):not(.ab-item), .content_inner a:not(.button):not([class*="btn"]):not(.stretch):not(.hb-area-link):not(.ab-item){ position: relative; text-decoration: none; } .content a:not(.button):not([class*="btn"]):not(.stretch):not(.hb-area-link):not(.ab-item)::after, .content_inner a:not(.button):not([class*="btn"]):not(.stretch):not(.hb-area-link):not(.ab-item)::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; transform: scaleX(0); transform-origin: left center; transition: transform .4s cubic-bezier(.2,.7,.3,1); } .content a:hover::after, .content a:focus-visible::after, .content_inner a:hover::after, .content_inner a:focus-visible::after{ transform: scaleX(1); } .content a:focus-visible, .content_inner a:focus-visible{ outline: 2px solid #BA9042; outline-offset: 3px; border-radius: 2px; } /* Cards already have their own hover treatment; no line inside them. */ .hb-flag a::after, .hb-init a::after, .hb-area a::after, .hb-shot a::after{ display: none; } /* ========================================================================== 4. THE HUMMINGBIRD Only the Foundation could use this: a hummingbird is the one bird that hovers, and hover is the interaction. It lands on a single card per page load, chosen at random, so a returning visitor finds it somewhere else. Desktop only, by nature - there is no hover on touch. Nothing is said here that is not also said in the text, so nobody misses information. ========================================================================== */ .hb-bird{ position: absolute; right: 12px; top: -28px; width: 68px; height: 68px; opacity: 0; transform: translate(16px,14px) rotate(-14deg) scale(.8); transition: opacity .34s ease, transform .62s cubic-bezier(.18,.72,.28,1); pointer-events: none; z-index: 5; filter: drop-shadow(0 6px 12px rgba(6,30,54,.18)); } .hb-nest{ position: relative; overflow: visible; } .hb-nest:hover .hb-bird{ opacity: 1; transform: translate(0,0) rotate(0) scale(1); } .hb-bird .hb-wing{ transform-origin: 52px 46px; } .hb-nest:hover .hb-bird .hb-wing{ animation: hb-flap .13s ease-in-out infinite alternate; } .hb-nest:hover .hb-bird .hb-body{ animation: hb-bob 1.5s ease-in-out infinite alternate; } @keyframes hb-flap{ from{ transform:rotate(-26deg) scaleY(.9); } to{ transform:rotate(18deg) scaleY(1.05); } } @keyframes hb-bob { from{ transform:translateY(0); } to{ transform:translateY(-2.5px); } } @media (max-width: 1024px){ .hb-bird{ display:none; } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root), .hb-bird, .hb-bird .hb-wing, .hb-bird .hb-body, .content a::after, .content_inner a::after{ animation: none !important; transition: none !important; } } /* ========================================================================== HUMMINGBIRD CURSOR OVER ENLARGEABLE IMAGES CSS cannot animate a cursor. cursor:url() takes a still image and a browser will only ever paint its first frame, so an animated GIF or SVG is pointless there. The only way to get wings that actually beat is to hide the real pointer and move an element with it. cursor:none is applied only under .hb-cursor-ready, a class the script adds to once it is running. If the script never runs, the pointer stays visible and images keep the ordinary zoom-in cursor - the failure is invisible rather than a page you cannot navigate. ========================================================================== */ .hb-cursor{ position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -30px; /* beak tip sits roughly on the pointer */ pointer-events: none; z-index: 100000; opacity: 0; transform: translate3d(-100px,-100px,0) scale(.7); transition: opacity .2s ease, scale .35s cubic-bezier(.18,.72,.28,1); will-change: transform; filter: drop-shadow(0 5px 10px rgba(6,30,54,.30)); } .hb-cursor.on{ opacity: 1; } .hb-cursor .hb-wing{ transform-origin: 52px 46px; } .hb-cursor.on .hb-wing{ animation: hb-flap .12s ease-in-out infinite alternate; } .hb-cursor.on .hb-body{ animation: hb-bob 1.4s ease-in-out infinite alternate; } /* Only while the script is alive, only on a real pointer, only desktop. */ @media (min-width: 1025px) and (hover: hover) and (pointer: fine){ .hb-cursor-ready .hb-zoom, .hb-cursor-ready .hb-shot img.hb-zoom{ cursor: none; } } @media (max-width: 1024px){ .hb-cursor{ display: none; } } @media (prefers-reduced-motion: reduce){ .hb-cursor{ display: none !important; } .hb-zoom, .hb-shot img.hb-zoom{ cursor: zoom-in !important; } } /* ---- HBACF cream band (global) ---------------------------------------- White, cream and blue are the three tones of the palette, but cream was only ever declared inside the HIFF page's own style block, so no other page could reach it. Declaring it here lets any page alternate its light sections the way the homepage does, without redeclaring the colour. */ .content section.ivory, .content section.cream{ background: #F8F5EF; } /* A quote attribution is tinted a muted blue-grey that reads well on the dark bands and falls to 2.4:1 on a light one. On light sections it retones to a slate that keeps the same quiet register and stays legible. */ .content section.ivory .ssm-quote cite, .content section.cream .ssm-quote cite, .content section.hb-sec:not([class*="navy"]):not([class*="hero"]):not([style*="background"]) .ssm-quote cite{ color: #4A5A6E; } /* The 12px card meta line ("Completed \u00b7 July 2026 \u00b7 Fairfax") is set inline to #8A8F99, which sits around 3:1 on the white and cream bands \u2014 short of the 4.5:1 small text needs. On light bands it retones to a slate that reads at 5.3:1 or better while keeping the same quiet, secondary register. The dark bands keep the original grey, where it already has plenty of separation. */ .content section:not([class*="navy"]):not([class*="hero"]):not([class*="dark"]) [style*="color:#8A8F99"]{ color: #5C6673 !important; } /* The "coming soon" placeholders are greyed to read as inert, but that grey was picked against a light band. Where the same markup sits on navy it drops to 3.5:1, so on dark bands it lifts to a lighter slate \u2014 still plainly quieter than the body text beside it, but readable. */ .content section[class*="navy"] [style*="color:#6B7280"]{ color:#94A0B0 !important; } /* ---- Maryland flag backdrop ------------------------------------------- The state flag sits behind the whole directory-listing band, the same way the About hero carries its photograph: full bleed, cropped to cover, and held far enough back that it reads as a tint rather than a picture. The copy sits above it on its own stacking layer. Opacity is the contrast control here. The flag's white and gold fields are the bright spots; at this level the gold eyebrow and button text still clear 4.5:1 against the lightest part of the composite. Raising it much further starts to eat that margin. */ .hb-flag-bg{ opacity:.16; filter:saturate(.78); pointer-events:none; user-select:none; } /* A navy scrim graded across the band. The copy occupies the left 58%, so the flag is held right back there and allowed to come through on the empty right side. Measured against the brightest pixel that actually falls behind the text, the gold eyebrow and button clear 4.5:1 — a flat opacity low enough to do that everywhere would have left the flag barely visible at all. */ .hb-flagband::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg, rgba(6,30,54,.80) 0%, rgba(6,30,54,.72) 42%, rgba(6,30,54,.34) 78%, rgba(6,30,54,.06) 100%); }