/** * Orbit Theme Stylesheet * * Table of Contents: * 1. Reset & Base Styles * 2. Layout & Containers * 3. Typography & Text * 4. Forms & Inputs * 5. Tooltips * 6. Header & Navigation * 7. Mobile Navigation * 8. Posts & Archives * 9. Grid & Flex Utilities * 10. 404 Page * 11. Media Queries * 12. Ambient Group overlays */ /* ========================================================================== 1. RESET & BASE STYLES ========================================================================== */ html { line-height: 1.1; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; box-sizing: border-box; scroll-padding-top: 81px; } *, *:before, *:after { box-sizing: border-box; } body { margin: 0; } /* ----- Screen-reader-only utility ----- Canonical WordPress accessibility pattern. Visually hides content while keeping it in the accessibility tree (used by the skip-link, pagination, comment nav, form labels, etc.). Without this rule those "hidden" labels render as visible on-screen text. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } /* Reveal sr-only interactive controls (notably the skip-link) when they receive keyboard focus, so sighted keyboard users can see and use them. */ .screen-reader-text:focus { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--ink, #0f0b22); clip: auto !important; clip-path: none; display: block; width: auto; height: auto; left: 16px; top: 16px; z-index: 100000; padding: 12px 20px; border-radius: var(--wp--custom--border--radius--small, 6px); box-shadow: 0 2px 12px rgba(15, 11, 34, 0.18); font-size: var(--wp--preset--font-size--normal); font-weight: 600; text-decoration: none; outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* The skip-link target wrapper shouldn't show a focus ring when focus falls back to it (the skip link normally lands on the first focusable child). */ #main-content:focus { outline: none; } /* Temporary highlight applied by global.js to whatever element the skip link sends focus to, so keyboard users clearly see where they landed. Added on activation, removed on blur. !important overrides the #main-content:focus reset above when focus falls back to the region itself. */ .skip-link-target { outline: 3px solid var(--wp--preset--color--primary) !important; outline-offset: 3px; border-radius: 4px; scroll-margin-top: 90px; } figure { margin: 0; } img { border-style: none; } iframe { display: block; } hr { box-sizing: content-box; height: 0; overflow: visible; } blockquote { margin: 0; } template { display: none; } [hidden] { display: none; } details { display: block; } summary { display: list-item; } /* ========================================================================== 2. LAYOUT & CONTAINERS ========================================================================== */ .wrap { margin: auto; max-width: var(--wp--style--global--content-size); width: 100%; padding-left: var(--wp--preset--spacing--medium); padding-right: var(--wp--preset--spacing--medium); } /* ========================================================================== 3. TYPOGRAPHY & TEXT ========================================================================== */ a { background-color: transparent; color: inherit; word-break: break-word; outline-offset: 2px; text-decoration: underline; } a:focus-visible { outline: 2px solid #276EF1; } b, strong { font-weight: 700; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /* ========================================================================== 4. FORMS & INPUTS ========================================================================== */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type=search] { box-sizing: border-box; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0; border: none; margin: 0; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Placeholders */ ::-moz-placeholder { color: var(--wp--preset--color--primary); opacity: 1; } ::-ms-input-placeholder { color: var(--wp--preset--color--primary); } ::-webkit-input-placeholder { color: var(--wp--preset--color--primary); } /* ========================================================================== 5. TOOLTIPS ========================================================================== */ [data-tooltip] { position: relative; z-index: 10; } [data-tooltip]::after { content: attr(data-tooltip); visibility: hidden; width: max-content; max-width: 150px; background-color: var(--wp--preset--color--black); color: var(--wp--preset--color--white); text-align: center; padding: 8px 10px; border-radius: var(--wp--custom--border--radius--small); position: absolute; z-index: 1000; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; } [data-tooltip]::before { content: ''; visibility: hidden; position: absolute; z-index: 1000; width: 0; height: 0; border: 7px solid transparent; opacity: 0; bottom: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--wp--preset--color--black); } [data-tooltip].visible::after, [data-tooltip].visible::before { visibility: visible; opacity: 1; } /* Tooltip: Below */ [data-tooltip].below::after { bottom: auto; top: calc(100% + 10px); transform: translateX(-50%); } [data-tooltip].below::before { bottom: auto; top: calc(100% - 4px); border-top-color: transparent; border-bottom-color: var(--wp--preset--color--black); } /* Tooltip: Right */ [data-tooltip].right::after { bottom: auto; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); } [data-tooltip].right::before { top: 50%; left: calc(100% + 5px); right: auto; transform: translateY(-50%) rotate(45deg); border-bottom-color: #333; border-left-color: #333; border-top-color: transparent; border-right-color: transparent; } /* Tooltip: Left */ [data-tooltip].left::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 5px); transform: translateY(-50%); } [data-tooltip].left::before { top: 50%; left: auto; right: calc(100% + 5px); transform: translateY(-50%) rotate(-45deg); border-bottom-color: #333; border-right-color: #333; border-top-color: transparent; border-left-color: transparent; } .tooltip-desc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ========================================================================== 6. HEADER & NAVIGATION ========================================================================== */ /* Desktop Navigation */ #nav-menu { display: none; } /* Submenu Button */ .submenu-btn { border: 0; padding: 0; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* Submenu Dropdown */ .submenu { position: absolute; top: 45px; left: 50%; opacity: 0; visibility: hidden; transform: translate(-50%, -5%); transition: visibility 0ms ease 0ms, pointer-events 0ms ease 0ms, all 0.25s cubic-bezier(0.4, 0.01, 0.1, 1); z-index: 9999; padding-top: 30px; } #nav-menu li.menu-item-has-children:hover .submenu, #nav-menu li.menu-item-has-children:focus .submenu, #nav-menu li.menu-item-has-children:focus-within .submenu, #nav-menu li.menu-item-has-children.is-open .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0%); } .site-header #nav-menu .current_page_item a { color: var(--wp--preset--color--quaternary); } #nav-menu .submenu ul li.current_page_item::before {background: var(--wp--preset--color--quaternary);} #nav-menu .submenu ul li.current_page_item::after {border-color:var(--wp--preset--color--quaternary);} /* Visible keyboard focus for the desktop disclosure trigger and submenu links. */ #nav-menu .menu-item-has-children > a.pseudo:focus-visible, #nav-menu .submenu a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 2px; } .submenu-inner-wrap { min-width: 325px; background-color: #48445b; background-image: url(data:image/png;base64,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); pointer-events: none; border-radius: inherit; mix-blend-mode: hard-light; color: var(--wp--preset--color--white); padding: var(--wp--preset--spacing--medium); border-radius: var(--wp--custom--border--radius--small); transition: visibility 0ms ease 0ms, pointer-events 0ms ease 0ms, all 0.25s cubic-bezier(0.4, 0.01, 0.1, 1); } /* The wrap above is purely decorative (hard-light blend + texture) and sets pointer-events:none so that layer never sits "in front of" the links. The content lives in .submenu-inner, so re-enable interaction there - otherwise the inherited pointer-events:none makes every submenu link unclickable. */ .submenu-inner { pointer-events: auto; } #nav-menu .submenu-inner a { color: var(--wp--preset--color--black); } #nav-menu .submenu ul li a { text-transform: capitalize; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--small); color: var(--wp--preset--color--white, #FFFFFF); font-weight: 500; margin: 0; width: 100%; padding: 10px 0; border-bottom: 1px solid #ffffff40; } #nav-menu .submenu ul li:last-child a {border-bottom:0;} /* Submenu Items */ .submenu-inner .menu-items { display: flex; padding: 0 0 0 30px; margin: 0; flex-direction: column; gap: 10px; } .submenu-inner .menu-items>li:hover .submenu-btn { animation: bounce 2s ease infinite; } #nav-menu .submenu-inner .sub-menu { display: none; width: 100%; background: var(--wp--preset--color--grey); margin: 0 0 10px 0; padding: 0; border-radius: var(--wp--custom--border--radius--small); overflow: hidden; } #nav-menu .submenu-inner .sub-menu li { width: 100%; display: block; } #nav-menu .submenu-inner .sub-menu li a { display: flex; align-items: center; width: 100%; font-size: 14px; font-weight: 500; padding: 10px 15px; border: 0; color: var(--wp--preset--color--primary); outline-offset: 0; } #nav-menu .submenu-inner .sub-menu li a:hover { text-decoration: underline; } /* Mobile Toggle */ #toggle-wrap { position: relative; display: flex; align-items: center; justify-content: flex-end; z-index: 9999; } #toggle { height: 40px; width: 40px; position: relative; display: flex; border: 0; padding: 0; -webkit-appearance: none; appearance: none; border-radius: 100%; background: var(--wp--preset--gradient--ink-to-deep-purple); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; align-items: center; justify-content: center; border: 2px solid #000000; } #toggle:before { background: linear-gradient(135deg, #d61254, #fdc41f, #009fe3); border-radius: calc(50% + 1px); content: ""; inset: -1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.25px; pointer-events: none; position: absolute; z-index: 0; } #toggle:active { transform: scale(0.94); } #toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } #toggle .bar { height: 2px; width: 19px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; transform-origin: center; background-color: #fff; border-radius: 25px; /* Bars slide to centre, then pivot - a small stagger keeps the morph refined without any dead time before it starts. Same timing both ways so open and close feel identical. */ transition: top 0.2s ease, transform 0.2s ease 0.12s, opacity 0.15s ease; } #toggle .bar:nth-of-type(1) { top: 10px; } #toggle .bar:nth-of-type(2) { top: 17px; } #toggle .bar:nth-of-type(3) { top: 24px; } .active #toggle .bar:nth-of-type(1) { top: 17px; transform: rotate(45deg); } .active #toggle .bar:nth-of-type(2) { opacity: 0; } .active #toggle .bar:nth-of-type(3) { top: 17px; transform: rotate(-45deg); } /* Respect reduced-motion: keep the menu instant, drop the animation. */ @media (prefers-reduced-motion: reduce) { #mobile-nav-menu, .active #mobile-nav-menu, #toggle, #toggle .bar, #mobile-menu button svg, .submenu { transition-duration: 0.01ms !important; transition-delay: 0s !important; } } /* -------------------------------------------------------------------------- Header Nebula Orbit topbar treatment -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: white; border-bottom: 1px solid rgba(15, 11, 34, 0.04); transition: background 0.2s ease, border-color 0.2s ease; } .site-header > .wrap { max-width: var(--wp--style--global--wide-size, 1320px); margin: 0 auto; height: var(--wp--custom--header--height); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--wp--preset--spacing--tiny); } /* ----- Logo ----- */ .site-header__logo, .custom-logo-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--wp--preset--color--black, #1a1a1a); text-decoration: none; } .custom-logo-link .custom-logo { display: block; height: auto; width: 200px; max-height: 40px; } /* Text-fallback logo renders with a 3 grid of brand dots via an inline SVG. */ .site-header__logo::before { content: ""; display: inline-block; width: 30px; height: 20px; flex-shrink: 0; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } /* ----- Primary nav: pill capsule, centred ----- */ .site-header #nav-menu { justify-self: center; justify-content: center; height: auto; } .site-header #nav-menu ul.menu { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 5px; height: auto; background: #fff; border-radius: var(--wp--custom--border--radius--pill); box-shadow: 0 1px 2px rgba(15, 11, 34, 0.06), 0 0 0 1px rgba(15, 11, 34, 0.04); list-style: none; } .site-header #nav-menu .menu-item { position: relative; display: flex; align-items: center; height: auto; margin: 0; gap: 0; } #nav-menu .submenu ul li::after { content: ""; width: 21px; height: 21px; display: block; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; left: -28px; top: 12px; } #nav-menu .submenu ul li::before { content: ""; width: 5px; height: 5px; display: block; background: rgb(255, 255, 255); border-radius: 50%; position: absolute; left: -20px; top: 20px; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* Smooth fade-out when the user un-hovers mid-pulse: animation removal snaps the property back to this baseline, transition catches the snap. */ transition: box-shadow 0.4s ease; } #nav-menu .submenu ul li:hover::before { animation: submenu-sonar 1.2s ease-out infinite; } @keyframes submenu-sonar { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } } /* Top-level pill links (direct children of ul.menu only, so submenu links don't inherit the pill treatment). */ .site-header #nav-menu .menu > li > a { display: inline-flex; align-items: center; padding: 10px 18px; font-size: var(--wp--preset--font-size--normal); font-weight: 500; color: var(--wp--preset--color--ink, #212020); border: 0; margin: 0; border-radius: var(--wp--custom--border--radius--pill); text-decoration: none; transition: background 0.25s ease, color 0.25s ease; } .site-header #nav-menu .menu > li > a:hover, .site-header #nav-menu .menu > li > a:focus-visible { background: var(--wp--preset--color--senary-50, #f3f2f7); } .site-header #nav-menu .menu > .current-menu-item > a, .site-header #nav-menu .menu > .current_page_item > a, .site-header #nav-menu .menu > .current-menu-ancestor > a { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } .site-header #nav-menu .menu > .current-menu-item > a:hover, .site-header #nav-menu .menu > .current_page_item > a:hover, .site-header #nav-menu .menu > .current-menu-ancestor > a:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } /* Add CSS class "cta" to a top-level menu item */ .site-header #nav-menu .menu > li.cta > a { background: var(--wp--preset--color--black, #1a1a1a); color: #fff; } .site-header #nav-menu .menu > li.cta > a:hover, .site-header #nav-menu .menu > li.cta > a:focus-visible { background: var(--wp--preset--color--primary, #d61254); color: #fff; } /* Submenu links: plain text with underline-on-hover. No pill, no row highlight, regardless of nesting depth inside .submenu. */ .site-header #nav-menu .submenu a { background: transparent; border-radius: 0; text-decoration: none; } .site-header #nav-menu .submenu a:hover, .site-header #nav-menu .submenu a:focus-visible { background: transparent; text-decoration: underline; } /* ----- Submenu link chevrons + 50/50 promo layout ----------------------- */ /* Right-aligned chevron on every submenu link (injected in the walker). */ .submenu-inner .menu-items > li > a, #mobile-menu li ul li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .submenu-inner .menu-items > li > a > svg { flex: none; transition: transform 0.2s ease; } .submenu-inner .menu-items > li > a:hover > svg { transform: translateX(3px); } /* When a dropdown opts into the promo panel, split it into two columns. */ .submenu.has-promo .submenu-inner-wrap { min-width: 0; width: min(925px, 90vw); } .submenu.has-promo .submenu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--medium); align-items: stretch; } .submenu.has-promo .submenu-inner .menu-items { align-self: start; } /* Promo panel (right column on desktop, stacked below on mobile). */ .menu-promo { position: relative; display: flex; min-height: 220px; border-radius: var(--wp--custom--border--radius--small); overflow: hidden; background-color: var(--wp--preset--color--primary); background-size: cover; background-position: center; } .menu-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, #d61254 15%, #00000000 70%, #2a086f 100%); } .menu-promo__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; width: 100%; padding: var(--wp--preset--spacing--small); } .menu-promo__heading { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--white); } .menu-promo__text { margin: 0; font-size: var(--wp--preset--font-size--normal); line-height: var(--wp--custom--line-height--small); color: var(--wp--preset--color--white); opacity: 0.9; } /* CTA button - scoped to beat `.site-header #nav-menu .submenu a` (desktop) and `#mobile-menu a` (mobile), which otherwise reset link styling. */ .site-header #nav-menu .submenu a.menu-promo__cta, #mobile-menu .menu-promo a.menu-promo__cta { display: inline-flex; align-items: center; margin-top: 4px; padding: 10px 18px; border-radius: var(--wp--custom--border--radius--pill); background: var(--wp--preset--color--white); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--normal); font-weight: 600; text-decoration: none; transition: background 0.25s ease, color 0.25s ease; } .site-header #nav-menu .submenu a.menu-promo__cta:hover, .site-header #nav-menu .submenu a.menu-promo__cta:focus-visible, #mobile-menu .menu-promo a.menu-promo__cta:hover, #mobile-menu .menu-promo a.menu-promo__cta:focus-visible { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); text-decoration: none; } /* Mobile: promo stacks full-width below the links inside the open submenu. */ #mobile-menu .menu-promo-item { display: block; padding: 15px; } #mobile-menu .menu-promo-item .menu-promo { min-height: 180px; } /* ----- Right-side status chip (re-skinning #contact-button-wrap) ----- Edit the link text in inc/site-header.php (orbit_site_header()) to change "Donate Today" to the content shown here. */ .site-header #contact-button-wrap { justify-self: end; } .site-header #contact-button-wrap a { background: var(--wp--preset--gradient--purple-to-pink); color: var(--wp--preset--color--white); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 10px 18px; font-size: var(--wp--preset--font-size--normal); font-weight: 500; border: 0; margin: 0; border-radius: var(--wp--custom--border--radius--pill); text-decoration: none; transition: all 0.25s ease; } .site-header #contact-button-wrap a:hover { transform: translateY(-2px); box-shadow: rgb(214 18 84 / 65%) 0 1px 25px; } /* Envelope icon sits inside the CTA: hidden on desktop (text shows), swapped in as an icon-only round button on mobile so the header never wraps to a second line. */ .site-header #contact-button-wrap a svg { display: none; fill: currentColor; } @media (max-width: 600px) { .site-header #contact-button-wrap a { padding: 10px; } .site-header #contact-button-wrap a .contact-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .site-header #contact-button-wrap a svg { display: block; } } /* ----- Mobile toggle: darken bars so they read on the light bar ----- */ .site-header #toggle .bar { background-color: #FFF; } /* ========================================================================== 7. MOBILE NAVIGATION ========================================================================== */ #mobile-nav-menu { /* Fallback for browsers without dynamic-viewport units. */ height: calc(100vh - var(--wp--custom--header--height)); /* The active panel is shifted down to 81px (top:31px + 50px translate), so size it to the dynamic viewport minus that offset. Using 100dvh keeps the panel's bottom edge on the *visible* bottom even while the mobile URL bar is showing - with 100vh the box ran ~1 URL-bar past the fold, hiding the promo slot at the foot of an expanded submenu. */ height: calc(100dvh - 81px); opacity: 0; visibility: hidden; position: fixed; top: 31px; width: 100%; background: var(--wp--preset--color--white); /* No start delay: panel reacts the instant the toggle is tapped. visibility is held until the fade finishes on close (0s linear 0.3s), and flips on immediately when opening (see .active rule). */ transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; transform: translate(0px, -10px); z-index: 500; } .active #mobile-nav-menu { opacity: 1; visibility: visible; transform: translate(0px, 50px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s; } .menu-mobile-container { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; height: 100%; max-height: calc(100vh - 81px); max-height: calc(100dvh - 81px); width: 100vw; /* Breathing room (plus the iOS home-indicator safe area) so the promo panel at the foot of an expanded submenu is never flush against - or tucked under - the bottom of the viewport. */ padding-bottom: calc(var(--wp--preset--spacing--small, 24px) + env(safe-area-inset-bottom, 0px)); } #mobile-menu { list-style: none; margin: 0; padding: 0; } #mobile-menu a, #mobile-menu span { display: block; padding: 15px; font-size: var(--wp--preset--font-size--small); font-weight: 600; text-decoration: none; color: #000; cursor: pointer; } #mobile-menu li { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--senary-50); } #mobile-menu>li:first-child { border-top: 0; } #mobile-menu li.menu-item-has-children { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #mobile-menu li ul { display: none; width: 100%; background: var(--wp--preset--color--senary-50); margin: 0; padding: 0; } #mobile-menu li ul li { border-top: 1px solid #fff; } #mobile-menu li ul li a { font-size: var(--wp--preset--font-size--tiny); font-weight: 400; } #mobile-menu button { background: transparent; border: 0; width: 50px; height: 50px; padding: 5px 20px 5px 0; cursor: pointer; } #mobile-menu button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; border-radius: 4px; } #mobile-menu button svg { transition: top 0.3s ease 0.1s, transform 0.3s ease-out; } #mobile-menu .menu-item.active button svg { transform: rotateX(180deg); } /* ========================================================================== 8. POSTS & ARCHIVES ========================================================================== */ /* Search Layout */ .search main.site-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* Search Archive Form */ .search-archive > form .wp-block-search__inside-wrapper { border-radius: var(--wp--custom--border--radius--large); background: none; } .search-archive input#wp-block-search__input-1 { border-radius: var(--wp--custom--border--radius--large); background: none; } /* Archive Filter Bar */ .archive-filter-bar { margin: var(--wp--preset--spacing--x-large) 0; padding-top: 30px; } .archive-filter-bar .wrap { max-width: var(--wp--style--global--wide-size); margin: auto; padding-left: var(--wp--preset--spacing--medium); padding-right: var(--wp--preset--spacing--medium); } .archive-filters { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--small); align-items: center; max-width: 800px; } .archive-filters .filter-group { flex: 0 0 auto; } .archive-filters .filter-search { } .archive-filters select, .archive-filters input[type="text"] { padding: 0.75rem 1rem; border: 1px solid var(--wp--preset--color--light-grey, #ddd); border-radius: 4px; font-size: 0.9375rem; background-color: var(--wp--preset--color--white, #fff); min-width: 160px; } .archive-filters input[type="text"] { width: 100%; } .archive-filters select:focus, .archive-filters input[type="text"]:focus { outline: none; border-color: var(--wp--preset--color--primary); } .archive-filters .button { padding: 0.75rem 1.5rem; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); border: none; border-radius: 4px; font-size: 0.9375rem; cursor: pointer; transition: background-color 0.2s ease; } .archive-filters .button:hover { background: var(--wp--preset--color--secondary, #333); } .archive-filters .filter-reset { margin-left: 0.5rem; font-size: 0.875rem; color: var(--wp--preset--color--primary); } .archive-filters .filter-submit { display: flex; align-items: center; } @media (max-width: 768px) { .archive-filters { flex-direction: column; align-items: stretch; } .archive-filters .filter-group { width: 100%; } .archive-filters select { width: 100%; } .archive-filters .filter-submit { justify-content: space-between; } .archive-filters .button { flex: 1; } } /* Single Post Layout */ .post.content .site-inner { padding: 0; } .post.content .site-main { padding-left: var(--wp--custom--layout--padding); padding-right: var(--wp--custom--layout--padding); max-width: var(--wp--custom--layout--content); margin: auto; } /* Post Entry Header - Meredith's Mission Banner */ .post .entry-header { position: relative; background: #E86B5E; color: var(--wp--preset--color--white); min-height: 420px; overflow: visible; padding-bottom: 50px; } .post .entry-header .wrap { position: relative; z-index: 25; max-width: var(--wp--custom--layout--small-content); padding-top: calc(3 * var(--wp--preset--spacing--large)); padding-bottom: 180px; } .post .entry-header .entry-header-content { position: relative; } .post .entry-header a { text-decoration: none; } .post .entry-header a:hover { color: var(--wp--preset--color--white); opacity: 0.9; } /* Back to Blog Link */ .post .entry-header .back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; opacity: 0.95; } .entry-nav { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; } .post .entry-header .back:hover { opacity: 1; } /* Category Badge */ .post .entry-header .category-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.95); color: #E86B5E; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .post .entry-header .category-badge a { color: inherit; } .post .entry-header .category-badge svg { flex-shrink: 0; } /* Entry Title */ .post .entry-header .entry-title { font-family: 'Montserrat', var(--wp--preset--font-family--sans); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0 0 var(--wp--preset--spacing--medium) 0; max-width: 800px; } /* Metadata Row */ .post .entry-header .entry-meta-author, .post .entry-header .entry-meta-dates { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--tiny); font-size: 14px; opacity: 0.95; } .post .entry-header .entry-meta-author { margin-right: var(--wp--preset--spacing--medium); } .post .entry-header .entry-meta-author .author-icon { display: inline-flex; align-items: center; } .post .entry-header .entry-meta-author .author-name { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .post .entry-header .entry-meta-dates { flex-wrap: wrap; gap: 6px; } .post .entry-header .entry-meta-dates .meta-item { display: inline-flex; align-items: center; gap: 4px; } .post .entry-header .entry-meta-dates .meta-item:not(:last-child)::after { content: ''; display: inline-block; width: 4px; height: 4px; background: currentColor; border-radius: 50%; margin-left: 10px; opacity: 0.6; } .post .entry-header .entry-meta-dates .meta-label { opacity: 0.8; } /* Floating Hearts Animation - More Visible */ @keyframes float-heart { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 50% { transform: translateY(-20px) rotate(8deg); opacity: 0.7; } } @keyframes float-heart-alt { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; } 50% { transform: translateY(-15px) rotate(-5deg); opacity: 0.6; } } .post .entry-header .floating-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; } .post .entry-header .floating-heart { position: absolute; color: rgba(255, 255, 255, 0.5); animation: float-heart 4s ease-in-out infinite; } .post .entry-header .floating-heart svg { stroke: currentColor; stroke-width: 2; } .post .entry-header .heart-1 { top: 10%; left: 6%; animation-duration: 5s; animation-delay: 0s; } .post .entry-header .heart-2 { top: 6%; right: 18%; animation-duration: 4.5s; animation-delay: 0.5s; animation-name: float-heart-alt; } .post .entry-header .heart-3 { top: 3%; right: 6%; animation-duration: 5.5s; animation-delay: 1s; } .post .entry-header .heart-4 { top: 30%; left: 3%; animation-duration: 4s; animation-delay: 0.3s; animation-name: float-heart-alt; } .post .entry-header .heart-5 { top: 22%; right: 22%; animation-duration: 6s; animation-delay: 0.8s; } .post .entry-header .heart-6 { top: 45%; right: 4%; animation-duration: 4.2s; animation-delay: 1.2s; animation-name: float-heart-alt; } .post .entry-header .heart-7 { top: 55%; left: 10%; animation-duration: 5.8s; animation-delay: 0.6s; } .post .entry-header .heart-8 { top: 40%; right: 14%; animation-duration: 4.8s; animation-delay: 1.5s; animation-name: float-heart-alt; } .post .entry-header .heart-9 { top: 18%; left: 18%; animation-duration: 5.2s; animation-delay: 0.2s; } .post .entry-header .heart-10 { top: 65%; right: 8%; animation-duration: 4.6s; animation-delay: 0.9s; animation-name: float-heart-alt; } .post .entry-header .heart-11 { top: 70%; left: 4%; animation-duration: 5.4s; animation-delay: 1.3s; } .post .entry-header .heart-12 { top: 12%; right: 30%; animation-duration: 4.4s; animation-delay: 0.7s; animation-name: float-heart-alt; } /* Diagonal Edge with Layered Stripes */ .post .entry-header::after { content: ''; position: absolute; bottom: -22px; left: 0; right: 0; height: 150px; background-color: transparent; background-image: url('https://launchpad.nebula.design/mm/wp-content/uploads/2026/01/line-1.svg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; z-index: 15; } .post .entry-header::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 75px; background: #fff; z-index: 14; } /* Donate Button - Top Right Corner. (.entry-header-content is already position:relative above, providing the positioning context for this absolutely-positioned banner.) */ .post .entry-header .donate-button-banner { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 52px; width: 52px; background: #F5C547; border-radius: 26px; color: #3D3D3D; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); text-decoration: none; overflow: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease; z-index: 30; } .post .entry-header .donate-button-banner .donate-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; } .post .entry-header .donate-button-banner .donate-text { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.2s ease 0s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .post .entry-header .donate-button-banner:hover { width: 135px; background: #E5B83D; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .post .entry-header .donate-button-banner:hover .donate-text { opacity: 1; max-width: 80px; transition: opacity 0.2s ease 0.1s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .post .entry-header .donate-button-banner:hover .donate-icon { width: 30px; } .post .entry-header .donate-button-banner:active { transform: scale(0.97); } /* Responsive adjustments */ @media (max-width: 768px) { .post .entry-header { min-height: 380px; } .post .entry-header .wrap { padding-top: calc(2 * var(--wp--preset--spacing--large)); padding-bottom: 150px; } .post .entry-header .entry-title { font-size: clamp(1.5rem, 6vw, 2.25rem); } .post .entry-header .entry-meta-author { display: flex; margin-right: 0; margin-bottom: 8px; } .post .entry-header .entry-meta-dates { display: flex; } .post .entry-header .floating-heart { display: none; } .post .entry-header .floating-heart.heart-1, .post .entry-header .floating-heart.heart-2, .post .entry-header .floating-heart.heart-3, .post .entry-header .floating-heart.heart-4, .post .entry-header .floating-heart.heart-5 { display: block; } .post .entry-header .donate-button-banner { width: 46px; height: 46px; border-radius: 23px; } .post .entry-header .donate-button-banner .donate-icon { width: 46px; height: 46px; } .post .entry-header .donate-button-banner .donate-icon svg { width: 18px; height: 18px; } .post .entry-header .donate-button-banner:hover { width: 130px; } } /* Archive Header - Same Design as Post Banner */ .archive-header { position: relative; background: #E86B5E; color: var(--wp--preset--color--white); min-height: 420px; overflow: visible; padding-bottom: 50px; margin-bottom: 0; z-index: 1; } .archive-header .entry-header { position: relative; background: #E86B5E; color: var(--wp--preset--color--white); min-height: 420px; overflow: visible; padding-bottom: 50px; width: 100%; margin-top: 150px; } .archive-header .entry-header .wrap { position: relative; z-index: 25; max-width: var(--wp--custom--layout--small-content); padding-top: calc(3 * var(--wp--preset--spacing--large)); padding-bottom: 180px; } .archive-header .entry-header .entry-header-content { position: relative; } .archive-header .entry-header a { text-decoration: none; } .archive-header .entry-header a:hover { color: var(--wp--preset--color--white); opacity: 0.9; } /* Floating Hearts Animation for Archive Header */ .archive-header .entry-header .floating-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; } .archive-header .entry-header .floating-heart { position: absolute; color: rgba(255, 255, 255, 0.5); animation: float-heart 4s ease-in-out infinite; } .archive-header .entry-header .floating-heart svg { stroke: currentColor; stroke-width: 2; } .archive-header .entry-header .heart-1 { top: 10%; left: 6%; animation-duration: 5s; animation-delay: 0s; } .archive-header .entry-header .heart-2 { top: 6%; right: 18%; animation-duration: 4.5s; animation-delay: 0.5s; animation-name: float-heart-alt; } .archive-header .entry-header .heart-3 { top: 3%; right: 6%; animation-duration: 5.5s; animation-delay: 1s; } .archive-header .entry-header .heart-4 { top: 30%; left: 3%; animation-duration: 4s; animation-delay: 0.3s; animation-name: float-heart-alt; } .archive-header .entry-header .heart-5 { top: 22%; right: 22%; animation-duration: 6s; animation-delay: 0.8s; } .archive-header .entry-header .heart-6 { top: 45%; right: 4%; animation-duration: 4.2s; animation-delay: 1.2s; animation-name: float-heart-alt; } .archive-header .entry-header .heart-7 { top: 55%; left: 10%; animation-duration: 5.8s; animation-delay: 0.6s; } .archive-header .entry-header .heart-8 { top: 40%; right: 14%; animation-duration: 4.8s; animation-delay: 1.5s; animation-name: float-heart-alt; } .archive-header .entry-header .heart-9 { top: 18%; left: 18%; animation-duration: 5.2s; animation-delay: 0.2s; } .archive-header .entry-header .heart-10 { top: 65%; right: 8%; animation-duration: 4.6s; animation-delay: 0.9s; animation-name: float-heart-alt; } .archive-header .entry-header .heart-11 { top: 70%; left: 4%; animation-duration: 5.4s; animation-delay: 1.3s; } .archive-header .entry-header .heart-12 { top: 12%; right: 30%; animation-duration: 4.4s; animation-delay: 0.7s; animation-name: float-heart-alt; } /* Diagonal Edge with Layered Stripes for Archive Header */ .archive-header .entry-header::after { content: ''; position: absolute; bottom: -22px; left: 0; right: 0; height: 150px; background-color: transparent; background-image: url('https://launchpad.nebula.design/mm/wp-content/uploads/2026/01/line-1.svg'); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; z-index: 15; } .archive-header .entry-header::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 75px; background: #fff; z-index: 14; } /* Donate Button for Archive Header */ .archive-header .entry-header .donate-button-banner { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 52px; width: 52px; background: #F5C547; border-radius: 26px; color: #3D3D3D; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); text-decoration: none; overflow: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease; z-index: 30; } .archive-header .entry-header .donate-button-banner .donate-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; } .archive-header .entry-header .donate-button-banner .donate-text { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.2s ease 0s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .archive-header .entry-header .donate-button-banner:hover { width: 135px; background: #E5B83D; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } .archive-header .entry-header .donate-button-banner:hover .donate-text { opacity: 1; max-width: 80px; transition: opacity 0.2s ease 0.1s, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .archive-header .entry-header .donate-button-banner:hover .donate-icon { width: 30px; } .archive-header .entry-header .donate-button-banner:active { transform: scale(0.97); } /* Archive Inner Header Content */ .archive-header .archive-inner-header { } .archive-header .archive-title { margin: 0; color: var(--wp--preset--color--white); } .archive-header .archive-description { color: var(--wp--preset--color--white); } .archive-header .archive-description p { color: var(--wp--preset--color--white); opacity: 0.95; } /* Remove old archive-header pseudo-elements */ .archive-header:after { display: none; } .archive-header::before { display: none; } .archive-inner-header:after, .archive-inner-header:before { display: none; } /* Responsive adjustments for Archive Header */ @media (max-width: 768px) { .archive-header { min-height: 380px; } .archive-header .entry-header { min-height: 380px; } .archive-header .entry-header .wrap { padding-top: calc(2 * var(--wp--preset--spacing--large)); padding-bottom: 150px; } .archive-header .archive-title { font-size: clamp(1.5rem, 6vw, 2.25rem); } .archive-header .entry-header .floating-heart { display: none; } .archive-header .entry-header .floating-heart.heart-1, .archive-header .entry-header .floating-heart.heart-2, .archive-header .entry-header .floating-heart.heart-3, .archive-header .entry-header .floating-heart.heart-4, .archive-header .entry-header .floating-heart.heart-5 { display: block; } .archive-header .entry-header .donate-button-banner { width: 46px; height: 46px; border-radius: 23px; } .archive-header .entry-header .donate-button-banner .donate-icon { width: 46px; height: 46px; } .archive-header .entry-header .donate-button-banner .donate-icon svg { width: 18px; height: 18px; } .archive-header .entry-header .donate-button-banner:hover { width: 130px; } } /* Post Entry Content */ .post .entry-content { } .post .entry-content .wrap { max-width: var(--wp--custom--layout--small-content); } .post .entry-content .wrap p { margin-top: 0; } .post .entry-content .wrap p:last-of-type { margin-bottom: 0; } /* Post Images */ .post .wp-block-image.aligncenter { width: 100%; } .post .wp-block-image.aligncenter img { margin: auto; } .post article .entry-image .wrap { max-width: calc(var(--wp--custom--layout--small-content) * 1.25); } div#wpadminbar { z-index: 9999999; } /* ========================================================================== 9. GRID & FLEX UTILITIES ========================================================================== */ /* Flexbox */ .flex { display: flex; flex-wrap: wrap; margin-right: calc(0px - var(--wp--custom--layout--small-padding)); margin-left: calc(0px - var(--wp--custom--layout--small-padding)); } .flex>div { padding: var(--wp--custom--layout--small-padding); } .v-align { align-items: center; height: 100%; } .h-align { justify-content: center; } /* Flex Column Widths */ .col-100 { flex: 0 0 100%; } .col-75 { flex: 0 0 75%; } .col-66 { flex: 0 0 66.6666%; } .col-50 { flex: 0 0 50%; } .col-33 { flex: 0 0 33.3333%; } .col-25 { flex: 0 0 25%; } .col-20, .has-5-columns>div { flex: 0 0 20%; } .col-10 { flex: 0 0 10%; } /* CSS Grid */ .grid { display: grid; grid-column-gap: var(--wp--preset--spacing--medium); grid-row-gap: var(--wp--preset--spacing--medium); } .columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Responsive card / bento grids. Above 992px the authored layout stands: .columns-N sets the track count and WordPress' per-card .wp-container-content-*{grid-column:span N} rules form the bento. Below 992px we drop the fixed tracks AND neutralise those per-card spans so cards reflow fluidly by intrinsic min width — count- and span-agnostic, so every columns-N variation adapts without bespoke breakpoints. Two-class / attribute selectors (0,2,0) outrank the base .columns-N, WP's .wp-container-* parent rules and .wp-container-content-* span rules (all 0,1,0). Galleries use .is-layout-flex and are intentionally unmatched. */ @media (max-width: 992px) { .grid[class*="columns-"], .is-layout-grid[class*="columns-"] { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .grid[class*="columns-"] > *, .is-layout-grid[class*="columns-"] > * { grid-column: auto; grid-row: auto; } } /* ========================================================================== 10. MEDIA QUERIES ========================================================================== */ /* Desktop (1200px+) */ @media (min-width: 1200px) { .site-header { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); } #nav-menu { display: flex; } #mobile-nav-menu { display: none; } #toggle-wrap { display: none; } } /* Tablet & Below (782px) */ @media (max-width: 782px) { #wpadminbar { display: none !important; } } /* .error-404 lives in error-404.css (loaded conditionally on is_404()). */ /* ========================================================================== 20. CARD COMPONENT STYLES ========================================================================== */ /* Base Card (archive.php) */ .card { position: relative; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--border--radius--medium); box-shadow: 0 0 0 1px rgb(15 11 34 / 10%); overflow: hidden; transition: all 0.25s ease; height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px -12px rgba(15, 11, 34, .18), 0 0 0 1px rgba(15, 11, 34, .04); } .card a, .card .card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .card .card-thumbnail { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--grey); } .card .card-thumbnail img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .card .card-meta { padding: var(--wp--preset--spacing--medium); display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; gap: var(--wp--preset--spacing--small); } .card .card-category { position: absolute; top: 15px; left: 15px; background: rgba(255, 255, 255, 0.9); padding: 4px 10px; border-radius: var(--wp--custom--border--radius--small); font-size: var(--wp--preset--font-size--min); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; color: var(--wp--preset--color--black); backdrop-filter: blur(4px); } .card .card-date-block { display: none; /* Only for Events */ } .card .card-title { font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--line-height--small); margin: 0; } .card .card-byline, .card .event-date { margin-bottom: 15px; } .card .card-date { } .card .card-excerpt { font-size: var(--wp--preset--font-size--tiny); color: var(--wp--custom--color--neutral--700); margin-bottom: auto; /* Push read more to bottom */ line-height: var(--wp--custom--line-height--normal); } .card .card-readmore, .card .button { font-size: var(--wp--preset--font-size--tiny); font-weight: 700; color: var(--wp--preset--color--primary); text-transform: uppercase; letter-spacing: 1px; align-self: flex-start; } /* -------------------------------------------------------------------------- Special Variation: Event Card (archive-event.php) -------------------------------------------------------------------------- */ .card.type-event .card-thumbnail { aspect-ratio: 16 / 9; } .card.type-event .card-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 15px; left: 15px; width: 60px; height: 60px; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--border--radius--small); z-index: 5; box-shadow: var(--wp--preset--shadow--natural); text-align: center; line-height: 1; } .card.type-event .card-date-block .day { font-size: 24px; font-weight: 800; color: var(--wp--preset--color--primary); display: block; } .card.type-event .card-date-block .month { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--black); display: block; margin-top: 2px; } /* -------------------------------------------------------------------------- Special Variation: Team Card (archive-team.php) -------------------------------------------------------------------------- */ .card.type-team { text-align: center; background: transparent; box-shadow: none; border: 1px solid var(--wp--preset--color--grey); } .card.type-team:hover { border-color: var(--wp--preset--color--secondary); box-shadow: var(--wp--preset--shadow--subtle); background: var(--wp--preset--color--white); } .card.type-team .card-thumbnail { width: 150px; height: 150px; border-radius: 50%; margin: 30px auto 15px auto; aspect-ratio: 1 / 1; border: 4px solid var(--wp--preset--color--white); box-shadow: var(--wp--preset--shadow--natural); } .card.type-team .card-meta { align-items: center; padding-top: 0; } .card.type-team .card-title { font-size: var(--wp--preset--font-size--large); margin-bottom: 5px; } .card.type-team .team-role { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--primary); font-weight: 600; margin-bottom: 15px; display: block; } .card.type-team .card-social { display: flex; gap: 10px; margin-top: 15px; justify-content: center; } .card.type-team .card-social a { width: 32px; height: 32px; background: var(--wp--preset--color--octonary); border-radius: 50%; display: grid; place-items: center; color: var(--wp--preset--color--black); font-size: 14px; transition: all 0.2s ease; } .card.type-team .card-social a:hover { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white); } /* Mobile Adjustments */ @media screen and (max-width: 768px) { .card .card-meta { padding: var(--wp--preset--spacing--small); } .card .card-title { font-size: var(--wp--preset--font-size--normal); } } /* -------------------------------------------------------------------------- Special Variation: Our Work Card (archive-our_work.php) Matches the "A handful of other sites we've shipped lately" section of 4:3 cover image, padded body, outcome metrics row pinned to the bottom above a divider. -------------------------------------------------------------------------- */ .card.type-our_work { } .card.type-our_work:hover { } .card.type-our_work .card-thumbnail { } .card.type-our_work .card-meta { } .card.type-our_work .card-categories { font-size: var(--wp--preset--font-size--min); text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--custom--color--neutral--600); background: none; padding: 0; position: static; } .card.type-our_work .card-title { } .card.type-our_work .card-excerpt { color: var(--wp--custom--color--neutral--700); margin: 0; } .card.type-our_work .card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--small); margin-top: auto; padding-top: var(--wp--preset--spacing--small); border-top: 1px solid var(--wp--preset--color--grey); } .card.type-our_work .card-metrics .metric { display: flex; flex-direction: column; gap: 4px; } .card.type-our_work .card-metrics .metric strong { font-size: var(--wp--preset--font-size--medium); font-weight: 600; color: var(--metric-color, var(--wp--preset--color--primary)); line-height: 1; } .card.type-our_work .card-metrics .metric span { font-size: var(--wp--preset--font-size--min); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--custom--color--neutral--600); } /* ========================================================================== 12. BLOCK STYLES Ambient Group overlays Two radial colour-blobs layered behind a group's content. Registered as block styles in inc/block-styles.php; select via the Styles panel after adding a Group block and (optionally) a dark background colour. Each preset sets two CSS custom properties (--orbit-ambient-1 / -2). inc/block-styles.php can override these per-instance via inline style="", so future editor controls can expose manual colour pickers without touching this stylesheet. ========================================================================== */ .wp-block-group[class*="is-style-ambient-"], .wp-block-column[class*="is-style-ambient-"] { position: relative; overflow: hidden; isolation: isolate; } .wp-block-group[class*="is-style-ambient-"]::before, .wp-block-column[class*="is-style-ambient-"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 80% 20%, var(--orbit-ambient-1, transparent), transparent 60%), radial-gradient(600px 400px at 15% 110%, var(--orbit-ambient-2, transparent), transparent 60%); pointer-events: none; z-index: 0; } /* Content sits above the gradient overlay. */ .wp-block-group[class*="is-style-ambient-"] > *, .wp-block-column[class*="is-style-ambient-"] > * { position: relative; z-index: 1; } /* ----- Presets ----- */ .wp-block-group.is-style-ambient-sunset, .wp-block-column.is-style-ambient-sunset { --orbit-ambient-1: rgba(253, 196, 31, 0.22); /* quaternary / yellow */ --orbit-ambient-2: rgba(214, 18, 84, 0.28); /* primary / pink */ } .wp-block-group.is-style-ambient-twilight, .wp-block-column.is-style-ambient-twilight { --orbit-ambient-1: rgba(130, 55, 140, 0.28); /* tertiary / purple */ --orbit-ambient-2: rgba(42, 8, 111, 0.38); /* senary / deep */ } .wp-block-group.is-style-ambient-aurora, .wp-block-column.is-style-ambient-aurora { --orbit-ambient-1: rgba(47, 173, 102, 0.25); /* quinary / green */ --orbit-ambient-2: rgba(0, 159, 227, 0.28); /* secondary / blue */ } .wp-block-group.is-style-ambient-ember, .wp-block-column.is-style-ambient-ember { --orbit-ambient-1: rgba(214, 18, 84, 0.30); /* primary / pink */ --orbit-ambient-2: rgba(42, 8, 111, 0.38); /* senary / deep */ } .wp-block-group.is-style-ambient-nebula, .wp-block-column.is-style-ambient-nebula { --orbit-ambient-1: rgba(214, 18, 84, 0.28); /* primary / pink */ --orbit-ambient-2: rgba(0, 159, 227, 0.22); /* secondary / blue */ --orbit-ambient-3: rgba(253, 196, 31, 0.16); /* quaternary / yellow */ } .wp-block-group.is-style-ambient-nebula::before, .wp-block-column.is-style-ambient-nebula::before { background: radial-gradient(700px 500px at 12% 10%, var(--orbit-ambient-1), transparent 60%), radial-gradient(600px 500px at 88% 90%, var(--orbit-ambient-2), transparent 60%), radial-gradient(500px 400px at 70% 20%, var(--orbit-ambient-3), transparent 60%); } /* ----- Grid presets - ambient corner-blobs + fading pixel-grid overlay ----- Combines the ambient corner-blob radials (::before) with a centred, edge- fading 64 px pixel grid (::after). Same five palette presets as the ambient family; pairs well with dark backgrounds. */ .wp-block-group[class*="is-style-grid-"], .wp-block-column[class*="is-style-grid-"] { position: relative; overflow: hidden; isolation: isolate; } .wp-block-group[class*="is-style-grid-"]::before, .wp-block-column[class*="is-style-grid-"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 300px at 80% 20%, var(--orbit-ambient-1, transparent), transparent 60%), radial-gradient(600px 400px at 15% 110%, var(--orbit-ambient-2, transparent), transparent 60%); pointer-events: none; z-index: 0; } .wp-block-group[class*="is-style-grid-"]::after, .wp-block-column[class*="is-style-grid-"]::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%); pointer-events: none; z-index: 0; } .wp-block-group[class*="is-style-grid-"] > *, .wp-block-column[class*="is-style-grid-"] > * { position: relative; z-index: 1; } .wp-block-group.is-style-grid-sunset, .wp-block-column.is-style-grid-sunset { --orbit-ambient-1: rgba(253, 196, 31, 0.22); /* quaternary / yellow */ --orbit-ambient-2: rgba(214, 18, 84, 0.28); /* primary / pink */ } .wp-block-group.is-style-grid-twilight, .wp-block-column.is-style-grid-twilight { --orbit-ambient-1: rgba(130, 55, 140, 0.28); /* tertiary / purple */ --orbit-ambient-2: rgba(42, 8, 111, 0.38); /* senary / deep */ } .wp-block-group.is-style-grid-aurora, .wp-block-column.is-style-grid-aurora { --orbit-ambient-1: rgba(47, 173, 102, 0.25); /* quinary / green */ --orbit-ambient-2: rgba(0, 159, 227, 0.28); /* secondary / blue */ } .wp-block-group.is-style-grid-ember, .wp-block-column.is-style-grid-ember { --orbit-ambient-1: rgba(214, 18, 84, 0.30); /* primary / pink */ --orbit-ambient-2: rgba(42, 8, 111, 0.38); /* senary / deep */ } .wp-block-group.is-style-grid-nebula, .wp-block-column.is-style-grid-nebula { --orbit-ambient-1: rgba(214, 18, 84, 0.28); /* primary / pink */ --orbit-ambient-2: rgba(0, 159, 227, 0.22); /* secondary / blue */ --orbit-ambient-3: rgba(253, 196, 31, 0.16); /* quaternary / yellow */ } .wp-block-group.is-style-grid-nebula::before, .wp-block-column.is-style-grid-nebula::before { background: radial-gradient(700px 500px at 12% 10%, var(--orbit-ambient-1), transparent 60%), radial-gradient(600px 500px at 88% 90%, var(--orbit-ambient-2), transparent 60%), radial-gradient(500px 400px at 70% 20%, var(--orbit-ambient-3), transparent 60%); } /* ----- Halo presets - concentric central radial glows + orbital lines ----- Sibling family to the corner-blob ambient presets above. Each preset stacks 1-3 closest-side radials at the same centre (50% / 48%) with shrinking sizes so the colours read as one layered halo. Two thin orbital rings sit beyond the outermost halo, evoking the "Orbit" name. Stack order in the background shorthand (top - bottom): 1. Inner halo (smallest, most saturated) 2. Mid halo (nebula only) 3. Outer halo (largest, softest) 4. Inner ring (1300px) 5. Outer ring (1500px) Halos reuse --orbit-ambient-1/2/3 (shared with the corner-blob ambient family). Rings read --orbit-orbit-1/2 - defaults are subtle white so they read on the dark backgrounds these presets target; override per block via inline style="" if needed. */ .wp-block-group[class*="is-style-halo-"], .wp-block-column[class*="is-style-halo-"] { --orbit-orbit-1: rgba(255, 255, 255, 0.18); --orbit-orbit-2: rgba(255, 255, 255, 0.10); position: relative; overflow: hidden; isolation: isolate; } .wp-block-group[class*="is-style-halo-"]::before, .wp-block-column[class*="is-style-halo-"]::before { content: ""; position: absolute; inset: 0; background-position: 50% 48%; background-repeat: no-repeat; pointer-events: none; z-index: 0; } .wp-block-group[class*="is-style-halo-"] > *, .wp-block-column[class*="is-style-halo-"] > * { position: relative; z-index: 1; } .wp-block-group.is-style-halo-sunset, .wp-block-column.is-style-halo-sunset { --orbit-ambient-1: rgba(253, 196, 31, 0.35); /* quaternary / yellow */ --orbit-ambient-2: rgba(214, 18, 84, 0.45); /* primary / pink */ } .wp-block-group.is-style-halo-sunset::before, .wp-block-column.is-style-halo-sunset::before { background-image: radial-gradient(closest-side, var(--orbit-ambient-1), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-2), transparent 65%), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-1) 50%, transparent calc(50% + 1px)), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-2) 50%, transparent calc(50% + 1px)); background-size: 800px 800px, 1100px 1100px, 1300px 1300px, 1500px 1500px; } .wp-block-group.is-style-halo-twilight, .wp-block-column.is-style-halo-twilight { --orbit-ambient-1: rgba(130, 55, 140, 0.40); /* tertiary / purple */ --orbit-ambient-2: rgba(42, 8, 111, 0.50); /* senary / deep */ } .wp-block-group.is-style-halo-twilight::before, .wp-block-column.is-style-halo-twilight::before { background-image: radial-gradient(closest-side, var(--orbit-ambient-1), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-2), transparent 65%), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-1) 50%, transparent calc(50% + 1px)), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-2) 50%, transparent calc(50% + 1px)); background-size: 800px 800px, 1100px 1100px, 1300px 1300px, 1500px 1500px; } .wp-block-group.is-style-halo-aurora, .wp-block-column.is-style-halo-aurora { --orbit-ambient-1: rgba(47, 173, 102, 0.35); /* quinary / green */ --orbit-ambient-2: rgba(0, 159, 227, 0.40); /* secondary / blue */ } .wp-block-group.is-style-halo-aurora::before, .wp-block-column.is-style-halo-aurora::before { background-image: radial-gradient(closest-side, var(--orbit-ambient-1), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-2), transparent 65%), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-1) 50%, transparent calc(50% + 1px)), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-2) 50%, transparent calc(50% + 1px)); background-size: 800px 800px, 1100px 1100px, 1300px 1300px, 1500px 1500px; } .wp-block-group.is-style-halo-ember, .wp-block-column.is-style-halo-ember { --orbit-ambient-1: rgba(214, 18, 84, 0.45); /* primary / pink */ --orbit-ambient-2: rgba(42, 8, 111, 0.50); /* senary / deep */ } .wp-block-group.is-style-halo-ember::before, .wp-block-column.is-style-halo-ember::before { background-image: radial-gradient(closest-side, var(--orbit-ambient-1), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-2), transparent 65%), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-1) 50%, transparent calc(50% + 1px)), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-2) 50%, transparent calc(50% + 1px)); background-size: 800px 800px, 1100px 1100px, 1300px 1300px, 1500px 1500px; } .wp-block-group.is-style-halo-nebula, .wp-block-column.is-style-halo-nebula { --orbit-ambient-1: rgba(214, 18, 84, 0.45); /* primary / pink */ --orbit-ambient-2: rgba(0, 159, 227, 0.35); /* secondary / blue */ --orbit-ambient-3: rgba(253, 196, 31, 0.25); /* quaternary / yellow */ } .wp-block-group.is-style-halo-nebula::before, .wp-block-column.is-style-halo-nebula::before { background-image: radial-gradient(closest-side, var(--orbit-ambient-1), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-2), transparent 65%), radial-gradient(closest-side, var(--orbit-ambient-3), transparent 65%), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-1) 50%, transparent calc(50% + 1px)), radial-gradient(circle closest-side, transparent calc(50% - 1px), var(--orbit-orbit-2) 50%, transparent calc(50% + 1px)); background-size: 500px 500px, 800px 800px, 1100px 1100px, 1300px 1300px, 1500px 1500px; } /* ----- Orbiting corner labels (paired with halo presets) ----- Four paragraph children inside a halo Group, each tagged with one of .orbit-corner-{tl,tr,bl,br}, become absolutely-positioned corner credentials with a slight rotation - like satellites in orbit of the block. Use via the "Halo with orbiting corners" block pattern, or by adding the class manually to a core/paragraph inside any halo Group. Inset and font-size are clamped so corners stay legible from large desktop down to ~360 px without overlapping centred content (the pattern reserves xx-large padding on the parent Group). */ .wp-block-group[class*="is-style-halo-"] > [class*="orbit-corner-"], .wp-block-group[class*="is-style-grid-"] > [class*="orbit-corner-"], .wp-block-column[class*="is-style-halo-"] > [class*="orbit-corner-"], .wp-block-column[class*="is-style-grid-"] > [class*="orbit-corner-"] { position: absolute; z-index: 2; margin: 0; max-width: 40%; font-size: clamp(0.65rem, 1.1vw, 0.8rem); font-weight: 600; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; } .wp-block-group[class*="is-style-halo-"] > .orbit-corner-tl, .wp-block-group[class*="is-style-grid-"] > .orbit-corner-tl, .wp-block-column[class*="is-style-halo-"] > .orbit-corner-tl, .wp-block-column[class*="is-style-grid-"] > .orbit-corner-tl { top: clamp(0.75rem, 2.5vw, 1.75rem); left: clamp(0.75rem, 2.5vw, 1.75rem); transform-origin: top left; transform: rotate(-3deg); } .wp-block-group[class*="is-style-halo-"] > .orbit-corner-tr, .wp-block-group[class*="is-style-grid-"] > .orbit-corner-tr, .wp-block-column[class*="is-style-halo-"] > .orbit-corner-tr, .wp-block-column[class*="is-style-grid-"] > .orbit-corner-tr { top: clamp(0.75rem, 2.5vw, 1.75rem); right: clamp(0.75rem, 2.5vw, 1.75rem); transform-origin: top right; transform: rotate(3deg); text-align: right; } .wp-block-group[class*="is-style-halo-"] > .orbit-corner-bl, .wp-block-group[class*="is-style-grid-"] > .orbit-corner-bl, .wp-block-column[class*="is-style-halo-"] > .orbit-corner-bl, .wp-block-column[class*="is-style-grid-"] > .orbit-corner-bl { bottom: clamp(0.75rem, 2.5vw, 1.75rem); left: clamp(0.75rem, 2.5vw, 1.75rem); transform-origin: bottom left; transform: rotate(3deg); } .wp-block-group[class*="is-style-halo-"] > .orbit-corner-br, .wp-block-group[class*="is-style-grid-"] > .orbit-corner-br, .wp-block-column[class*="is-style-halo-"] > .orbit-corner-br, .wp-block-column[class*="is-style-grid-"] > .orbit-corner-br { bottom: clamp(0.75rem, 2.5vw, 1.75rem); right: clamp(0.75rem, 2.5vw, 1.75rem); transform-origin: bottom right; transform: rotate(-3deg); text-align: right; } @media (max-width: 600px) { .wp-block-group[class*="is-style-halo-"] > [class*="orbit-corner-"], .wp-block-group[class*="is-style-grid-"] > [class*="orbit-corner-"], .wp-block-column[class*="is-style-halo-"] > [class*="orbit-corner-"], .wp-block-column[class*="is-style-grid-"] > [class*="orbit-corner-"] { white-space: normal; max-width: 38%; opacity: 0.65; } } /* ========================================================================== BLOCK EXTENSION Gradient border (core/group, core/column) ========================================================================== */ .wp-block-group.has-gradient-border, .wp-block-column.has-gradient-border { position: relative; border: 1.5px solid #e2e8f0; } .wp-block-group.has-gradient-border::before, .wp-block-column.has-gradient-border::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: calc(24px + -1px); background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--quaternary), var(--wp--preset--color--secondary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ========================================================================== 13. BLOCK STYLES Glow Image drop-shadows Palette-tinted soft drop shadow on core/image. Registered as block styles in inc/block-styles.php; pick from the Styles panel after inserting an Image block. Each preset sets --orbit-glow, which inc/block-styles.php can override per-instance via inline style="" (so a future editor control can expose a ColorPalette picker without touching this stylesheet). The shadow lands on so it follows any border-radius set on the image; the custom property inherits from the
wrapper where WP puts the is-style-* class. ========================================================================== */ .wp-block-image[class*="is-style-glow-"] img { box-shadow: 0 60px 120px -40px var(--orbit-glow, transparent); } /* ----- Presets ----- */ .wp-block-image.is-style-glow-primary { --orbit-glow: rgba(214, 18, 84, 0.6); } /* primary / pink */ .wp-block-image.is-style-glow-secondary { --orbit-glow: rgba(0, 159, 227, 0.6); } /* secondary / blue */ .wp-block-image.is-style-glow-tertiary { --orbit-glow: rgba(130, 55, 140, 0.6); } /* tertiary / purple */ .wp-block-image.is-style-glow-quaternary { --orbit-glow: rgba(253, 196, 31, 0.6); } /* quaternary / yellow */ .wp-block-image.is-style-glow-quinary { --orbit-glow: rgba(47, 173, 102, 0.6); } /* quinary / green */ .wp-block-image.is-style-glow-senary { --orbit-glow: rgba(42, 8, 111, 0.6); } /* senary / deep */ /* ========================================================================== Sticky (core/group, core/column) Block style preset that pins the block to the top of the viewport once its parent container scrolls past. Registered in inc/block-styles.php; pick "Sticky on scroll" from the Styles panel after inserting a Group or Column. Requires the block's direct parent to be a flex/grid container (which is how core/columns already renders) and to be taller than the sticky item - otherwise there is nothing to scroll past. Offset from the top is controlled by --orbit-sticky-top (default 140px to clear the fixed header). Override per-instance with inline style="" or globally in theme.json. ========================================================================== */ .is-style-sticky { position: sticky; top: var(--orbit-sticky-top, 140px); align-self: start; } /* On mobile the layout is a single column, so sticky positioning just causes the element to overlap the content below it - turn it off. */ @media (max-width: 781px) { .is-style-sticky { position: static; top: auto; } } /* ========================================================================== Reusable page hero (.page-hero) Shared chrome for full-width intro bands: soft tinted background + two radial blobs + contained wrap + eyebrow + h1 + lede. Add a variant modifier for page-specific extras: .page-hero.page-hero--insights - search bar + counts row .page-hero.page-hero--post - back link + meta row + share row (variant rules live in single-post.css) ========================================================================== */ .page-hero { background: var(--wp--preset--color--senary-50); position: relative; overflow: hidden; padding: var(--wp--preset--spacing--small) 0 var(--wp--preset--spacing--x-large) 0; } .page-hero::before { content: ""; position: absolute; right: -140px; top: -140px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 18, 84, 0.18), transparent 70%); pointer-events: none; } .page-hero::after { content: ""; position: absolute; left: -160px; bottom: -160px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 196, 31, 0.16), transparent 70%); pointer-events: none; } .page-hero .hero-wrap { position: relative; padding-top: var(--wp--preset--spacing--xx-large); padding-bottom: var(--wp--preset--spacing--xx-large); } .page-hero .eyebrow { font-size: var(--wp--preset--font-size--min); text-transform: uppercase; letter-spacing: 0.25px; color: var(--wp--custom--color--ink-soft); display: inline-flex; gap: 12px; align-items: center; margin-bottom: var(--wp--preset--spacing--medium); } /* Pulse eyebrow. The .bar is the radar-ping dot from the eyebrow block (blocks/eyebrow/style.css): a small filled dot plus an expanding, fading ring (::after, a scaled clone via background-color:inherit). Keyframes are defined here so every page-hero eyebrow gets it without the block being on the page. Motion is dropped under prefers-reduced-motion, leaving a static halo. */ .page-hero .eyebrow .bar { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--primary); } .page-hero .eyebrow .bar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background-color: inherit; transform-origin: center; pointer-events: none; animation: eyebrow-sonar 1.8s ease-out infinite; } @keyframes eyebrow-sonar { 0% { transform: scale(1); opacity: 0.55; } 70% { opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .page-hero .eyebrow .bar::after { animation: none; transform: scale(2); opacity: 0.18; } } .page-hero .eyebrow .num { color: var(--wp--preset--color--ink); font-weight: 500; } .page-hero a.eyebrow { text-decoration: none; } .page-hero a.eyebrow:hover { color: var(--wp--preset--color--primary); } .page-hero h1 { font-size: var(--wp--preset--font-size--gargantuan); margin: 0; } .page-hero h1 em, .page-hero h1 mark { font-style: normal; color: var(--wp--preset--color--primary); background: transparent; display: inline; } .page-hero h1 .y { background: linear-gradient(180deg, transparent 70%, rgba(253, 196, 31, 0.55) 70%); } .page-hero .lede { margin: var(--wp--preset--spacing--x-large) 0; font-size: var(--wp--preset--font-size--medium); color: var(--wp--custom--color--ink-soft); max-width: 640px; line-height: var(--wp--custom--line-height--normal); } /* -------------------------------------------------------------------------- Post card variant (.card.type-post) Works anywhere a post card is rendered - insights index, single-post related grid, landing pages, etc. Use the base `.card` anatomy from the block above, plus this variant for post-specific typography + thumbnail treatment. Card anatomy that's universal (.card-badge, .card .meta, .card-foot, and the p1..p9 gradient palette) sits below so any .card can opt in. -------------------------------------------------------------------------- */ .card.type-post .card-thumbnail { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--wp--preset--gradient--pink-to-purple); } .card.type-post .card-title { font-size: var(--wp--preset--font-size--medium); letter-spacing: -0.02em; line-height: var(--wp--custom--line-height--small); font-weight: 600; color: var(--wp--preset--color--ink); } .card.type-post .card-excerpt { color: var(--wp--custom--color--ink-soft); font-size: var(--wp--preset--font-size--tiny); line-height: var(--wp--custom--line-height--normal); } /* Universal card-anatomy bits (usable on any .card) */ .card .card-badge { position: relative; z-index: 1; font-size: var(--wp--preset--font-size--min); letter-spacing: 0.25px; text-transform: uppercase; color: var(--wp--preset--color--white); padding: var(--wp--preset--spacing--tiny) var(--wp--preset--spacing--small); border-radius: var(--wp--custom--border--radius--large); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); } .card .meta { font-size: var(--wp--preset--font-size--min); letter-spacing: 0.25px; text-transform: uppercase; color: var(--wp--custom--color--mute); display: flex; gap: var(--wp--preset--spacing--tiny); align-items: center; margin-bottom: var(--wp--preset--spacing--small); } .card .meta .cat-tag { color: var(--wp--preset--color--ink); font-weight: 500; } .card .meta .cat-tag::after { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--wp--custom--color--mute); margin-left: 10px; vertical-align: middle; } .card .card-foot { margin-top: auto; padding-top: var(--wp--preset--spacing--small); border-top: 1px solid var(--wp--custom--color--line); display: flex; justify-content: space-between; align-items: center; color: var(--wp--custom--color--ink-soft); font-size: var(--wp--preset--font-size--min); letter-spacing: 0.25px; text-transform: uppercase; } .card .card-foot .card-readmore { color: var(--wp--preset--color--ink); font-weight: 500; } /* Gradient cover palette - use on any .card when there's no featured image */ .card.p1 .card-thumbnail { background: var(--wp--preset--gradient--pink-to-purple); } .card.p2 .card-thumbnail { background: var(--wp--preset--gradient--yellow-to-dark-yellow); } .card.p3 .card-thumbnail { background: var(--wp--preset--gradient--blue-to-dark-blue); } .card.p4 .card-thumbnail { background: var(--wp--preset--gradient--green-to-dark-blue); } .card.p5 .card-thumbnail { background: var(--wp--preset--gradient--purple-to-dark-blue); } .card.p6 .card-thumbnail { background: var(--wp--preset--gradient--pink-to-dark-blue); } .card.p7 .card-thumbnail { background: var(--wp--preset--color--ink); } .card.p8 .card-thumbnail { background: var(--wp--preset--gradient--blue-to-dark-blue); } .card.p9 .card-thumbnail { background: var(--wp--preset--gradient--yellow-to-dark-yellow); } .card.p2 .card-badge, .card.p9 .card-badge { color: var(--wp--preset--color--ink); border-color: rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.4); } /* ---------- core/table - default style matches nblocks/comparison-table ---------- */ .wp-block-table { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--grey); border-radius: var(--wp--custom--border--radius--medium); /* x: sideways scroll on narrow screens; y: hidden keeps the radius clip. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .wp-block-table table { width: 100%; border-collapse: collapse; } /* Below tablet width, stop columns crushing — hold a readable minimum and * let the figure scroll instead. */ @media (max-width: 781px) { .wp-block-table table { min-width: 640px; } } .wp-block-table thead { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); } .wp-block-table thead th { font-size: var(--wp--preset--font-size--tiny); line-height: var(--wp--custom--line-height--small); font-weight: 500; letter-spacing: 0.25px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); text-align: left; padding: 22px 28px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .wp-block-table thead th:last-child { border-right: none; } .wp-block-table tbody td, .wp-block-table:not(.has-fixed-layout) td { padding: 22px 28px; border-right: 1px solid var(--wp--preset--color--grey); border-top: 1px solid var(--wp--preset--color--grey); vertical-align: top; } .wp-block-table tbody tr:first-child td { border-top: none; } .wp-block-table tbody td:last-child, .wp-block-table:not(.has-fixed-layout) td:last-child { border-right: none; } .wp-block-table tfoot tr td { border-top: 1px solid var(--wp--preset--color--grey); } /* When the block has no WP still wraps all rows in ; the block * above already covers that. If the editor marks the first row as a header via * the header-row toggle, WP emits a , which gets the dark treatment. */ /* Caption: keep outside the rounded container's contrast zone. */ .wp-block-table figcaption { color: var(--wp--preset--color--charcoal); font-size: var(--wp--preset--font-size--tiny); margin-top: 8px; text-align: center; } @media (max-width: 768px) { .wp-block-table { overflow-x: auto; } .wp-block-table thead th, .wp-block-table tbody td, .wp-block-table:not(.has-fixed-layout) td { padding: 16px 18px; } } /* ========================================================================== Services page - block style variations (registered in inc/block-styles.php) Built against theme.json tokens; no literals. ========================================================================== */ /* ---------------------------------------------------------------- */ /* Checklist / Crosslist (core/list) - palette-aware fit & not-fit */ /* ---------------------------------------------------------------- */ /* Checklist (base in style.css) - the tick circle colour is controlled independently of the list's text colour via a `checkmark-{slug}` class added in the editor's Advanced - Additional CSS classes field. This keeps text formatting the editor's concern (via the standard colour controls) while the tick stays a design-system accent. Tick glyph is an SVG baked with stroke="white", so these rules only repaint the circle. */ .wp-block-list.is-style-checklist.checkmark-primary > li::before { background-color: var(--wp--preset--color--primary); } .wp-block-list.is-style-checklist.checkmark-secondary > li::before { background-color: var(--wp--preset--color--secondary); } .wp-block-list.is-style-checklist.checkmark-tertiary > li::before { background-color: var(--wp--preset--color--tertiary); } .wp-block-list.is-style-checklist.checkmark-quaternary > li::before { background-color: var(--wp--preset--color--quaternary); } .wp-block-list.is-style-checklist.checkmark-quinary > li::before { background-color: var(--wp--preset--color--quinary); } .wp-block-list.is-style-checklist.checkmark-senary > li::before { background-color: var(--wp--preset--color--senary); } .wp-block-list.is-style-checklist.checkmark-ink > li::before { background-color: var(--wp--preset--color--ink); } /* Crosslist - white circle with a currentColor border and a currentColor X. The X is a ::after layer using a CSS mask so its colour follows the list's text colour without needing explicit per-palette rules. */ .wp-block-list.is-style-crosslist, ul.is-style-crosslist { list-style: none; padding-left: 0; margin-left: 0; } .wp-block-list.is-style-crosslist > li, ul.is-style-crosslist > li { display: flex; align-items: flex-start; gap: 12px; margin: 0.5em 0; padding-left: 0; position: relative; } .wp-block-list.is-style-crosslist > li::before, ul.is-style-crosslist > li::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--primary-50); box-sizing: border-box; margin-top: calc((1.55em - 22px) / 2); } .wp-block-list.is-style-crosslist > li::after, ul.is-style-crosslist > li::after { content: ""; position: absolute; left: 0; top: calc((1.55em - 22px) / 2); width: 22px; height: 22px; background-color: var(--wp--preset--color--primary); -webkit-mask: url("data:image/svg+xml;utf8,") center / 10px 10px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 10px 10px no-repeat; pointer-events: none; } /* ---------------------------------------------------------------- */ /* Feature card (core/group) - icon square + heading + paragraph */ /* ---------------------------------------------------------------- */ .wp-block-group.is-style-feature-card, .wp-block-column.is-style-feature-card { background: var(--wp--preset--color--white); border-radius: var(--wp--custom--border--radius--medium); box-shadow: var(--wp--preset--shadow--natural); padding: var(--wp--preset--spacing--large); display: flex; flex-direction: column; gap: 14px; height: 100%; transition: box-shadow .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1); } .wp-block-group.is-style-feature-card:hover, .wp-block-column.is-style-feature-card:hover { box-shadow: var(--wp--preset--shadow--deep); transform: translateY(-2px); } /* The first child is expected to be an nblocks/icon block - give it the 52x52 rounded wash square styling without requiring the editor to nest extra wrappers. */ .wp-block-group.is-style-feature-card > .wp-block-nblocks-icon:first-child, .wp-block-column.is-style-feature-card > .wp-block-nblocks-icon:first-child { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; } .wp-block-group.is-style-feature-card h3, .wp-block-column.is-style-feature-card h3 { font-size: var(--wp--preset--font-size--large); font-weight: 700; letter-spacing: -0.01em; line-height: var(--wp--custom--line-height--small); margin: 0; } .wp-block-group.is-style-feature-card p, .wp-block-column.is-style-feature-card p { font-size: var(--wp--preset--font-size--normal); line-height: var(--wp--custom--line-height--medium); color: var(--wp--preset--color--charcoal); margin: 0; } /* ---------------------------------------------------------------- */ /* Stat band (core/group) - gradient section wrapper */ /* ---------------------------------------------------------------- */ .wp-block-group.is-style-stat-band { position: relative; overflow: hidden; background: var(--wp--preset--gradient--dark-blue-to-purple); color: var(--wp--preset--color--white); padding: var(--wp--preset--spacing--xx-large) var(--wp--preset--spacing--medium); border-radius: var(--wp--custom--border--radius--medium); } .wp-block-group.is-style-stat-band::before, .wp-block-group.is-style-stat-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); } .wp-block-group.is-style-stat-band::before { top: -40%; right: -10%; width: 520px; height: 520px; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--secondary) 35%, transparent), transparent 60%); } .wp-block-group.is-style-stat-band::after { bottom: -30%; left: -5%; width: 440px; height: 440px; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--quaternary) 25%, transparent), transparent 60%); } .wp-block-group.is-style-stat-band > .wp-block-group__inner-container, .wp-block-group.is-style-stat-band > * { position: relative; z-index: 1; } .wp-block-group.is-style-stat-band h2, .wp-block-group.is-style-stat-band h3 { color: var(--wp--preset--color--white); } .wp-block-group.is-style-stat-band p { color: color-mix(in srgb, var(--wp--preset--color--white) 82%, transparent); } /* Inside the band, each core/column's first heading should read as a stat. */ .wp-block-group.is-style-stat-band .wp-block-columns { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 33%, transparent); padding-top: var(--wp--preset--spacing--large); margin-top: var(--wp--preset--spacing--large); } .wp-block-group.is-style-stat-band .wp-block-column > :first-child { font-size: var(--wp--preset--font-size--gargantuan); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 14px; } .wp-block-group.is-style-stat-band .wp-block-column > :last-child { font-size: var(--wp--preset--font-size--min); text-transform: uppercase; letter-spacing: 0.25px; color: color-mix(in srgb, var(--wp--preset--color--white) 82%, transparent); line-height: var(--wp--custom--line-height--medium); margin: 0; } /* ---------------------------------------------------------------- */ /* CTA card (glass) - on dark gradient backgrounds */ /* ---------------------------------------------------------------- */ .wp-block-group.is-style-cta-card-glass, .wp-block-column.is-style-cta-card-glass { background: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: var(--wp--custom--border--radius--medium); padding: var(--wp--preset--spacing--large); display: flex; flex-direction: column; gap: 14px; color: var(--wp--preset--color--white); } .wp-block-group.is-style-cta-card-glass, .wp-block-column.is-style-cta-card-glass p { color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent); margin: 0; text-wrap: pretty; } /* ---------------------------------------------------------------- */ /* Stats row (core/columns) - dividers between stats. Vertical on */ /* desktop / tablet, horizontal once columns stack on mobile. */ /* ---------------------------------------------------------------- */ .wp-block-columns.is-style-stats-row { align-items: stretch; } .wp-block-columns.is-style-stats-row > .wp-block-column { border-right: 1px solid color-mix(in srgb, currentColor 16%, transparent); padding-right: 32px; } .wp-block-columns.is-style-stats-row > .wp-block-column:last-child { border-right: none; padding-right: 0; } /* Once columns stack vertically, swap the divider to a horizontal rule. */ @media (max-width: 781px) { .wp-block-columns.is-style-stats-row > .wp-block-column { border-right: none; padding-right: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); padding-bottom: var(--wp--preset--spacing--medium); } .wp-block-columns.is-style-stats-row > .wp-block-column:last-child { border-bottom: none; padding-bottom: 0; } } /* ---------------------------------------------------------------- */ /* Steps (smaller number circles) */ /* ---------------------------------------------------------------- */ .wp-block-nblocks-steps.is-style-compact .nblocks-step__number { width: 38px; height: 38px; font-size: var(--wp--preset--font-size--normal); } /* ---------------------------------------------------------------- */ /* Add Noise toggle (core/group, core/column, core/image) */ /* ---------------------------------------------------------------- */ .wp-block-group.has-noise, .wp-block-column.has-noise, .wp-block-image.has-noise { position: relative; isolation: isolate; } .wp-block-group.has-noise::after, .wp-block-column.has-noise::after, .wp-block-image.has-noise::after { content: ""; position: absolute; inset: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); pointer-events: none; border-radius: inherit; mix-blend-mode: hard-light; opacity: 0.85; z-index: 0; } /* Lift the inner blocks above the noise so it reads as a background texture behind text/content. */ .wp-block-group.has-noise > *, .wp-block-column.has-noise > * { position: relative; z-index: 1; } /* An Image block's only content is the itself - sitting behind it would hide the texture entirely, so keep it overlaid on top of the image. */ .wp-block-image.has-noise::after { z-index: 1; }