/* ============================================================================ RandomSynergy — brand layer The parts theme.json can't express: terminal/CRT surface, eyebrow, button chrome, focus ring, transform-only motion, and the radar-mark supergraphic. Colours reference the theme.json preset vars so this tracks dark + light. ========================================================================== */ /* ---- Self-hosted brand faces (CDN-free): Chakra Petch static (400/500/600/700) + IBM Plex Sans / JetBrains Mono variable. OFL 1.1 — see ../fonts/LICENSES/. ---- */ @font-face { font-family: "Chakra Petch"; src: url("../fonts/ChakraPetch-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Chakra Petch"; src: url("../fonts/ChakraPetch-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Chakra Petch"; src: url("../fonts/ChakraPetch-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Chakra Petch"; src: url("../fonts/ChakraPetch-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* ---- Color scheme: dark is the theme.json default. The "Olive Paper" light palette (styles/light.json values, mirrored here) applies two ways: automatically when the OS prefers light and the visitor hasn't chosen (:root without a data-theme pin), or explicitly via the header toggle (data-theme="light" on , persisted in localStorage). Keep these values in lockstep with styles/light.json. ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --wp--preset--color--base: #eef1ea; --wp--preset--color--void: #e3e8dc; --wp--preset--color--surface: #f7f9f1; --wp--preset--color--surface-raised: #f7f9f1; --wp--preset--color--surface-hover: #e7ebdd; --wp--preset--color--contrast: #14150f; --wp--preset--color--fg-2: #4b4d44; --wp--preset--color--fg-3: #6d6e70; --wp--preset--color--accent: #a6b01a; --wp--preset--color--accent-2: #7e8914; --wp--preset--color--accent-text: #566c11; --wp--preset--color--accent-deep: #3d4d0d; --wp--preset--color--on-accent: #14150f; --wp--preset--color--line: rgba(20, 21, 15, 0.16); --wp--preset--color--success: #12894f; --wp--preset--color--danger: #c62f35; --wp--preset--color--warning: #b06a08; --wp--preset--color--info: #0f7fb0; color-scheme: light; } :root:not([data-theme="dark"]) body::before { opacity: 0.45; } } :root[data-theme="light"] { --wp--preset--color--base: #eef1ea; --wp--preset--color--void: #e3e8dc; --wp--preset--color--surface: #f7f9f1; --wp--preset--color--surface-raised: #f7f9f1; --wp--preset--color--surface-hover: #e7ebdd; --wp--preset--color--contrast: #14150f; --wp--preset--color--fg-2: #4b4d44; --wp--preset--color--fg-3: #6d6e70; --wp--preset--color--accent: #a6b01a; --wp--preset--color--accent-2: #7e8914; --wp--preset--color--accent-text: #566c11; --wp--preset--color--accent-deep: #3d4d0d; --wp--preset--color--on-accent: #14150f; --wp--preset--color--line: rgba(20, 21, 15, 0.16); --wp--preset--color--success: #12894f; --wp--preset--color--danger: #c62f35; --wp--preset--color--warning: #b06a08; --wp--preset--color--info: #0f7fb0; color-scheme: light; } :root[data-theme="light"] body::before { opacity: 0.45; } /* theme.json paints body background/text with literal values at :root level — re-tie them to the (now switchable) presets so the whole page flips. */ body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--fg-2); } /* ---- Theme toggle: compact bordered chrome button in the masthead. Shows the mode you'd switch TO (sun while dark, moon while light). ---- */ .rs-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--wp--preset--color--line); border-radius: 4px; color: var(--wp--preset--color--fg-2); cursor: pointer; transition: color 0.14s ease, border-color 0.14s ease; } .rs-theme-toggle:hover { color: var(--wp--preset--color--accent-text); border-color: var(--wp--preset--color--accent); } .rs-theme-toggle svg { width: 16px; height: 16px; display: none; } .rs-theme-toggle:not([data-current="light"]) .rs-icon-sun { display: block; } .rs-theme-toggle[data-current="light"] .rs-icon-moon { display: block; } /* ---- Terminal / CRT surface: lime phosphor bloom + fine scanlines, fixed to the viewport so it reads as the screen, not the page. Content sits above. */ .wp-site-blocks { position: relative; z-index: 1; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 70% at 50% -12%, rgba(166, 176, 26, 0.16) 0%, transparent 58%), repeating-linear-gradient(to bottom, rgba(194, 203, 30, 0.045) 0 1px, transparent 1px 3px); background-size: 100% 100%, 100% 3px; } ::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); } /* ---- Eyebrow: the "// mono kicker" ---- */ .rs-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--accent-text); } /* ============================================================================ Design-system component layer — ported from RandomSynergy-DesignSystem (components/components.css) and remapped from the DS's local vars onto this theme's --wp--preset--* tokens. Class names match the DS (.rs-*) so the markup in block patterns mirrors the design system 1:1. Local aliases keep the ports readable and single-sourced: ========================================================================== */ :root { --rs-line-strong: rgba(232, 234, 224, 0.28); --rs-accent-soft: rgba(194, 203, 30, 0.10); --rs-shadow-brand: 0 8px 24px -8px rgba(194, 203, 30, 0.5); --rs-shadow-lift: 0 12px 28px -12px rgba(0, 0, 0, 0.55); } :root[data-theme="light"], :root:not([data-theme="dark"]) { --rs-line-strong: rgba(20, 21, 15, 0.28); } /* ---- Section band: full-bleed alternating surface with top/bottom hairline. Put on an alignfull group; content stays constrained by the inner layout. */ .rs-band { background: var(--wp--preset--color--surface); } /* ---- Sectioned pages (page.html): the H1 already carries main's blockGap below it, so the first section's own top padding double-stacks into an oversized gap. */ .entry-content > .wp-block-group.alignfull:first-child { padding-top: 0 !important; } /* ---- Card grid: sits in the content column; 3-up for triples, 2×2 for quads (.is-2col), single column on phones. ---- */ .rs-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows: 1fr; /* every row the same height → all cards equal */ gap: var(--wp--preset--spacing--40); align-items: stretch; } /* WP's flow layout injects a top margin on each child after the first; on a grid that offsets cards 2/3/4 inside their cells. Cancel it. */ .rs-cardgrid > * { margin-block: 0 !important; } .rs-cardgrid.is-2col { grid-template-columns: repeat(2, 1fr); } @media (max-width: 600px) { .rs-cardgrid, .rs-cardgrid.is-2col { grid-template-columns: 1fr; } } /* ---- Forward arrow "→" in link text: mono, nudges on hover ---- */ .rs-arrow { font-family: var(--wp--preset--font-family--mono); display: inline-block; transition: transform 0.14s ease; } a:hover .rs-arrow { transform: translateX(3px); } /* ---- Stat row: content-width grid of stat cards (aligns with body prose) ---- */ .rs-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--wp--preset--spacing--50); align-items: start; } /* WP flow layout injects margin-block-start on every stat card after the first, staggering them inside their grid cells. Reset it so the row top-aligns. */ .rs-statrow > * { margin-block: 0 !important; } /* ---- Flat card: 1px hairline, angular corners; interactive lifts on hover ---- */ .rs-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: var(--wp--preset--spacing--40); transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; } .rs-card--accent { background: var(--wp--preset--gradient--ink); border-color: var(--rs-line-strong); } /* Outlined card: keep the hairline border, drop the fill (a ghost stat/metric card). */ .rs-card--outline { background: transparent; } .rs-card--interactive:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); box-shadow: var(--rs-shadow-lift), var(--rs-shadow-brand); } /* whole card is one link: no underline, inherit colour, and a clean full-card focus ring for keyboard users (the is the single focus target). */ a.rs-card { height: 100%; box-sizing: border-box; text-decoration: none; color: inherit; } a.rs-card:hover { text-decoration: none; } a.rs-card:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-color: var(--wp--preset--color--accent); } a.rs-card:focus-visible :where(h3, .rs-badge) { color: var(--wp--preset--color--accent-text); } /* ---- Icon badge: tinted square tile holding a stroke icon ---- */ .rs-iconbadge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 4px; color: var(--wp--preset--color--accent-text); background: color-mix(in oklab, currentColor 14%, transparent); border: 1px solid color-mix(in oklab, currentColor 30%, transparent); } .rs-iconbadge svg { width: 24px; height: 24px; } .rs-iconbadge--lg { width: 64px; height: 64px; } .rs-iconbadge--brand { color: var(--wp--preset--color--accent-text); } .rs-iconbadge--success { color: var(--wp--preset--color--success); } .rs-iconbadge--info { color: var(--wp--preset--color--info); } .rs-iconbadge--warning { color: var(--wp--preset--color--warning); } .rs-iconbadge--danger { color: var(--wp--preset--color--danger); } .rs-iconbadge--neutral { color: var(--wp--preset--color--fg-3); } /* ---- Status badge: mono uppercase pill + glowing dot. intent → ink colour. ---- */ .rs-badge { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; border: 1px solid transparent; line-height: 1.2; white-space: nowrap; } .rs-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 6px currentColor; } .rs-badge--neutral { color: var(--wp--preset--color--fg-2); } .rs-badge--accent { color: var(--wp--preset--color--accent-text); } .rs-badge--success { color: var(--wp--preset--color--success); } .rs-badge--info { color: var(--wp--preset--color--info); } .rs-badge--warning { color: var(--wp--preset--color--warning); } .rs-badge--danger { color: var(--wp--preset--color--danger); } .rs-badge--soft { background: color-mix(in oklab, currentColor 15%, transparent); border-color: color-mix(in oklab, currentColor 32%, transparent); } .rs-badge--outline { background: transparent; border-color: color-mix(in oklab, currentColor 48%, transparent); } /* ---- Skill chip: mono tech tag; hover lifts to accent ---- */ .rs-chip { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: var(--wp--preset--color--fg-2); background: var(--wp--preset--color--surface-raised); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: 6px 12px; transition: transform 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.26s ease; } .rs-chip:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); box-shadow: var(--rs-shadow-brand); } .rs-chiprow { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding-left: 0; margin: 0; } .rs-chiprow li { margin: 0; } /* ---- Stat card: big gradient number + label + mono sub ---- */ .rs-statcard { display: flex; flex-direction: column; gap: 0.4rem; } .rs-statcard__value { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.01em; background: var(--wp--preset--gradient--synergy-bright); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; } .rs-statcard__label { font-weight: 600; color: var(--wp--preset--color--contrast); font-size: 1rem; } .rs-statcard__sub { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; color: var(--wp--preset--color--fg-3); } /* ---- Project meta panel: the spec-sheet beside a case study ---- */ .rs-metapanel { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .rs-metapanel__row { display: flex; flex-direction: column; gap: 0.35rem; } .rs-metapanel__key { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--fg-3); } @media (min-width: 782px) { .rs-metapanel { position: sticky; top: 88px; } } /* ---- Timeline: gradient dots + fading connector for chronologies ---- */ .rs-timeline { display: grid; grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--50); } .rs-timeline__rail { position: relative; display: flex; flex-direction: column; align-items: center; } .rs-timeline__dot { width: 14px; height: 14px; border-radius: 999px; background: var(--wp--preset--gradient--synergy-bright); border: 2px solid var(--wp--preset--color--base); box-shadow: 0 0 0 1px var(--rs-line-strong); flex-shrink: 0; margin-top: 6px; } .rs-timeline__connector { width: 2px; flex: 1; margin-top: 4px; background: linear-gradient(var(--rs-line-strong), transparent); } .rs-timeline__body { padding-bottom: var(--wp--preset--spacing--50); } /* ---- Eyebrow "// mark" modifier (auto-prefix) + section-heading grouping ---- */ .rs-eyebrow--mark::before { content: "// "; opacity: 0.7; } /* ---- Buttons: hover lifts + lime glow; active settles back ---- */ .wp-block-button__link, .wp-element-button { border-radius: 4px; transition: transform 0.14s ease, box-shadow 0.26s ease, background-color 0.14s ease; } .wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--wp--preset--color--accent), 0 8px 24px -8px rgba(194, 203, 30, 0.5); } .wp-block-button__link:active, .wp-element-button:active { transform: translateY(0); } /* Outline variant → secondary "ghost" button */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--accent-text); border: 1px solid var(--wp--preset--color--line); } .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); box-shadow: none; } /* ---- Button rows (rs-btnrow): authored as a Custom HTML block so custom markup (icons, obfuscation classes) is CMS-valid, which means core's wp-block-buttons flex layout isn't guaranteed to load. Own it here so the row lays out regardless. ---- */ .rs-btnrow { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); align-items: center; } .rs-btnrow .wp-block-button { margin: 0; } /* Icon buttons: a leading mark aligned to and sized with the label, in the button's own text color. */ .rs-btnrow .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5em; } .rs-btn-ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; } /* ---- Signals list: each post (title, date, blurb) is a row, separated from the next by a hairline divider so entries read distinctly. ---- */ .rs-postlist .wp-block-post-template { list-style: none; margin: 0; padding-left: 0; display: block; } .rs-postlist li.wp-block-post { padding: var(--wp--preset--spacing--40) 0; } .rs-postlist li.wp-block-post + li.wp-block-post { border-top: 1px solid var(--wp--preset--color--line); } .rs-postlist li.wp-block-post > * { margin-top: 0.35rem; margin-bottom: 0; } .rs-postlist li.wp-block-post > :first-child { margin-top: 0; } /* ---- Subscribe form (mu-plugin randomsynergy-subscribe) ---- */ .rs-subform { display: flex; flex-direction: column; gap: 0.75rem; max-width: 34rem; } .rs-subform__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; } .rs-subform__email { flex: 1 1 16rem; min-width: 0; padding: 0.85em 1em; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: 1rem; } .rs-subform__email::placeholder { color: var(--wp--preset--color--fg-3); } .rs-subform__btn { flex: 0 0 auto; } /* Honeypot: off-screen, never shown to humans. */ .rs-subform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .rs-subform__status { margin: 0; min-height: 1.2em; font-size: 0.9375rem; } .rs-subform__status--ok { color: var(--wp--preset--color--accent-text); } .rs-subform__status--err { color: #e06c6c; } .rs-subform__fineprint { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--fg-3); } .rs-subnotice { padding: 0.75em 1em; border-radius: 4px; border: 1px solid var(--wp--preset--color--line); } .rs-subnotice--ok { color: var(--wp--preset--color--accent-text); } .rs-subnotice--err { color: #e06c6c; } /* ---- Focus: global 2px accent ring at 2px offset ---- */ :where(a, button, input, select, textarea, .wp-block-button__link):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* ---- Navigation: mono, uppercase, terminal-small ---- */ .wp-block-navigation { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.08em; text-transform: uppercase; } .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-text); } /* Dropdown submenu panel: core paints it white unless the block sets colors — theme it as a raised terminal surface instead. */ .wp-block-navigation .wp-block-navigation__submenu-container { background: var(--wp--preset--color--surface) !important; color: var(--wp--preset--color--contrast) !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 4px; padding: 0.25rem; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--fg-2); padding: 0.5em 0.9em; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-text); } /* Mobile overlay: colors come from the nav block's native overlay attributes (base/contrast); here only alignment + rhythm. The block's desktop justifyContent:right propagates in via a CSS var — force the stack left-aligned and full-width, and flatten submenus into an indented list (the bordered surface panel is a desktop-hover treatment). */ .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--40); width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start !important; align-items: flex-start !important; text-align: left; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: none !important; padding: 0 0 0 1rem; align-items: flex-start !important; } /* ---- Nav CTA: the persistent "Contact" item styled as an accent button — core/navigation has no native button item type, so this is a className hook on that one wp:navigation-link (see wp_navigation post, id 4). Core's own nav CSS sets color:inherit via a specificity-boosted `.wp-block-navigation-item__content.wp-block-navigation-item__content` selector — match that exact class (not just `a`) to actually win. ---- */ .wp-block-navigation-item.rs-nav-cta > a.wp-block-navigation-item__content { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border-radius: 4px; padding: 0.5em 1em; transition: transform 0.14s ease, box-shadow 0.26s ease, background-color 0.14s ease; } .wp-block-navigation-item.rs-nav-cta > a.wp-block-navigation-item__content .wp-block-navigation-item__label { color: inherit; } .wp-block-navigation-item.rs-nav-cta > a.wp-block-navigation-item__content:hover { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--on-accent); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--wp--preset--color--accent), 0 8px 24px -8px rgba(194, 203, 30, 0.5); } /* ---- Footer nav: grouped link columns (spec: content 00-index §2). Quiet, list-style-free, small; links sit in fg-2 and lift to accent on hover. ---- */ .rs-footer-list { list-style: none; padding-left: 0; margin: var(--wp--preset--spacing--20) 0 0; font-size: var(--wp--preset--font-size--x-small); } .rs-footer-list li { margin-bottom: 0.35em; } /* The footer nav sits quieter than body eyebrows: dial the whole section down a step and tighten the label tracking so longer labels (// ventures) don't wrap. */ .rs-footer .rs-eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; } /* Bottom line: centered, one step smaller than the columns, with small linked icons (name shown on hover via title). */ .rs-footer .rs-footer-bottom { font-size: var(--wp--preset--font-size--x-small); } .rs-footer-bottom a { color: inherit; text-decoration: none; } .rs-footer-bottom a:hover { color: var(--wp--preset--color--accent-text); } .rs-footer-ico { display: inline-flex; vertical-align: -0.22em; } .rs-footer-ico svg { width: 1.05em; height: 1.05em; fill: currentColor; } .rs-footer-list a { color: var(--wp--preset--color--fg-2); text-decoration: none; } .rs-footer-list a:hover { color: var(--wp--preset--color--accent-text); text-decoration: underline; } /* ---- Masthead: hairline under the header; nudge the olive wordmark so it reads on near-black ---- */ /* ---- Masthead: sticky glass bar — blurs the page behind it, hairline bottom border, compact height. Mirrors the design-system Navbar. The sticky + glass live on the full-width template-part wrapper (the inner .rs-masthead is constrained, so its background wouldn't span the bar); the wrapper is a child of the full-height page, so sticky has room. ---- */ header.wp-block-template-part { position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--wp--preset--color--base) 76%, transparent); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); border-bottom: 1px solid var(--wp--preset--color--line); } /* The mobile menu overlay is position:fixed. backdrop-filter on the header creates a containing block for fixed descendants, which would trap the overlay inside the 72px bar — so drop the glass while the menu is open and the overlay fills the whole viewport. */ header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-bottom-color: transparent; } .wp-block-site-logo { line-height: 0; } .wp-block-site-logo img { filter: saturate(1.05) brightness(1.06); max-height: 46px; width: auto; } /* active nav item flips to accent (WP marks the current page's link) */ .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .current_page_item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content[aria-current] { color: var(--wp--preset--color--accent-text); } /* keep the Contact CTA button's own colour even when it's the current page */ .wp-block-navigation .rs-nav-cta.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .rs-nav-cta .wp-block-navigation-item__content[aria-current] { color: var(--wp--preset--color--on-accent); } /* ---- Hero headline: two lines, one sentence each. The
splits the sentences; nowrap stops either sentence breaking mid-phrase into a third line; the fluid clamp shrinks the type so the longer sentence ("Synergistic outcomes.") always fits the column, down to mobile. ---- */ .rs-hero h1 { font-size: clamp(1.5rem, 7vw, 3.9rem); white-space: nowrap; } /* ---- Radar / target supergraphic: cropped large, faded, off-canvas behind heroes ---- */ .rs-hero { position: relative; overflow: clip; isolation: isolate; } .rs-hero::after { content: ""; position: absolute; top: 50%; right: -16%; transform: translateY(-50%); width: min(72vw, 760px); aspect-ratio: 1 / 1; background: var(--rs-mark, none) center / contain no-repeat; opacity: 0.12; z-index: -1; pointer-events: none; } /* ---- Small screens: rein in the pixel wordmark (site-logo carries width:190 as a block attr) and keep an arc of the radar mark visible behind the hero instead of cropping it fully off-canvas. ---- */ @media (max-width: 600px) { .wp-block-site-logo img { max-width: 140px; height: auto; } .rs-hero::after { width: 130vw; right: -55vw; opacity: 0.1; } } /* ---- Motion: real-content entrances are transform-only (print/PDF/no-JS never see opacity:0). Everything honours reduced-motion. ---- */ @keyframes rs-rise { from { transform: translateY(8px); } to { transform: none; } } .rs-rise { animation: rs-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } /* ---- One-shot scroll reveal (design system: motion.js + [data-reveal]). The resting style IS the end state, so no-JS / reduced-motion / print render content immediately. motion.js adds .rs-motion to only when JS runs and motion is allowed; each element then holds a FROM state until it scrolls into view, transitions once (.rs-in), and stays. Usage: data-reveal (rise+fade) · data-reveal="fade" · --rs-reveal-delay for per-item stagger within a group. ---- */ @media (prefers-reduced-motion: no-preference) { .rs-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--rs-reveal-delay, 0ms), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--rs-reveal-delay, 0ms); will-change: opacity, transform; } .rs-motion [data-reveal="fade"] { transform: none; } .rs-motion [data-reveal].rs-in { opacity: 1; transform: none; } } @media print { .rs-motion [data-reveal] { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }