/* * Archents — token-driven component layer with switchable design systems. * * Every color flows from the --am-* custom properties below. Five complete * skins are defined; the active one is chosen by [data-theme] on * (set by the bootstrap script in functions.php). The floating switcher on * the dev site lets leadership preview each skin; scripts/set-theme.sh * locks the winner. See BRAND-STRATEGY.md. * * Skins: enterprise-blue (default) · midnight · carbon · sapphire · ivory * Class prefix: am- */ /* ================= Theme tokens ================= */ :root { /* Enterprise Blue — light-first, brand blue #3361AE (default) */ color-scheme: light; --am-base: #FFFFFF; --am-surface: #F4F6FA; --am-elev: #FFFFFF; --am-text: #26314A; --am-heading: #10213F; --am-muted: #5B667E; --am-border: #E3E8F2; --am-ghost-bg: #FFFFFF; --am-ghost-border: #C9D4E8; --am-primary: #3361AE; --am-primary-hover: #274E9B; --am-on-primary: #FFFFFF; --am-accent: #4E8FDF; --am-eyebrow: #3361AE; --am-grad-a: #3361AE; --am-grad-b: #4E8FDF; --am-hero-tint-1: rgba(51, 97, 174, 0.09); --am-hero-tint-2: rgba(78, 143, 223, 0.07); --am-hero-grid: rgba(51, 97, 174, 0.05); --am-card-bg: #FFFFFF; --am-card-shadow: 0 4px 18px rgba(16, 33, 63, 0.05); --am-card-shadow-hover: 0 18px 44px rgba(16, 33, 63, 0.13); --am-media-shadow: 0 24px 60px rgba(16, 33, 63, 0.14); --am-header-bg: rgba(255, 255, 255, 0.88); --am-band-1: #0A1428; --am-band-2: #10203E; --am-band-border: rgba(51, 97, 174, 0.3); --am-band-text: #C4D0E4; --am-band-muted: #93A3BF; --am-band-eyebrow: #7FA9E8; --am-band-link: #A9C6F2; --am-metric: #FFFFFF; --am-footer-bg: #0A1428; --am-logo-blue: block; --am-logo-light: none; } [data-theme="midnight"] { /* Agentic Midnight — the original dark: indigo, cyan, signal lime */ color-scheme: dark; --am-base: #0B1020; --am-surface: #111832; --am-elev: #111832; --am-text: #E5E7EB; --am-heading: #FFFFFF; --am-muted: #9AA4C2; --am-border: #26305A; --am-ghost-bg: transparent; --am-ghost-border: #26305A; --am-primary: #4F46E5; --am-primary-hover: #6366F1; --am-on-primary: #FFFFFF; --am-accent: #22D3EE; --am-eyebrow: #22D3EE; --am-grad-a: #818CF8; --am-grad-b: #22D3EE; --am-hero-tint-1: rgba(79, 70, 229, 0.30); --am-hero-tint-2: rgba(34, 211, 238, 0.14); --am-hero-grid: rgba(129, 140, 248, 0.05); --am-card-bg: linear-gradient(180deg, rgba(21, 29, 59, 0.85), rgba(17, 24, 50, 0.85)); --am-card-shadow: none; --am-card-shadow-hover: 0 18px 45px rgba(5, 8, 20, 0.6); --am-media-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --am-header-bg: rgba(11, 16, 32, 0.82); --am-band-1: #151C3E; --am-band-2: #0E1530; --am-band-border: rgba(129, 140, 248, 0.35); --am-band-text: #C7CEE4; --am-band-muted: #9AA4C2; --am-band-eyebrow: #22D3EE; --am-band-link: #A5B4FC; --am-metric: #A3E635; --am-footer-bg: #070B18; --am-logo-blue: none; --am-logo-light: block; } [data-theme="carbon"] { /* Carbon Violet — Accenture-inspired: near-black, one electric purple */ color-scheme: dark; --am-base: #0A0A0A; --am-surface: #131313; --am-elev: #161616; --am-text: #E6E6E6; --am-heading: #FFFFFF; --am-muted: #9CA3AF; --am-border: #262626; --am-ghost-bg: transparent; --am-ghost-border: #3F3F46; --am-primary: #9333EA; --am-primary-hover: #A855F7; --am-on-primary: #FFFFFF; --am-accent: #C4B5FD; --am-eyebrow: #C4B5FD; --am-grad-a: #A855F7; --am-grad-b: #D8B4FE; --am-hero-tint-1: rgba(147, 51, 234, 0.16); --am-hero-tint-2: rgba(168, 85, 247, 0.08); --am-hero-grid: rgba(168, 85, 247, 0.06); --am-card-bg: #141414; --am-card-shadow: none; --am-card-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.6); --am-media-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --am-header-bg: rgba(10, 10, 10, 0.85); --am-band-1: #18181B; --am-band-2: #101012; --am-band-border: rgba(168, 85, 247, 0.3); --am-band-text: #D4D4D8; --am-band-muted: #A1A1AA; --am-band-eyebrow: #C4B5FD; --am-band-link: #D8B4FE; --am-metric: #FFFFFF; --am-footer-bg: #060606; --am-logo-blue: none; --am-logo-light: block; } [data-theme="sapphire"] { /* Deep Sapphire — disciplined dark in the brand's own blue family */ color-scheme: dark; --am-base: #071120; --am-surface: #0C1A30; --am-elev: #0D1D36; --am-text: #D7E1F2; --am-heading: #FFFFFF; --am-muted: #8FA1C0; --am-border: #1C3050; --am-ghost-bg: transparent; --am-ghost-border: #2A4468; --am-primary: #3E77CE; --am-primary-hover: #4E8FDF; --am-on-primary: #FFFFFF; --am-accent: #8FBFF5; --am-eyebrow: #7FA9E8; --am-grad-a: #4E8FDF; --am-grad-b: #A8CDF8; --am-hero-tint-1: rgba(78, 143, 223, 0.16); --am-hero-tint-2: rgba(78, 143, 223, 0.08); --am-hero-grid: rgba(127, 169, 232, 0.05); --am-card-bg: #0C1A30; --am-card-shadow: none; --am-card-shadow-hover: 0 18px 45px rgba(2, 8, 18, 0.6); --am-media-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); --am-header-bg: rgba(7, 17, 32, 0.85); --am-band-1: #0D2240; --am-band-2: #081428; --am-band-border: rgba(78, 143, 223, 0.3); --am-band-text: #C4D4EC; --am-band-muted: #8FA1C0; --am-band-eyebrow: #8FBFF5; --am-band-link: #A8CDF8; --am-metric: #FFFFFF; --am-footer-bg: #050D18; --am-logo-blue: none; --am-logo-light: block; } [data-theme="ivory"] { /* Ivory Teal — warm light alternative with deep teal accent */ color-scheme: light; --am-base: #FBFAF7; --am-surface: #F2F0EA; --am-elev: #FFFFFF; --am-text: #2A3330; --am-heading: #1C2724; --am-muted: #5F6B66; --am-border: #E4E2D9; --am-ghost-bg: #FFFFFF; --am-ghost-border: #CFCDC2; --am-primary: #0F766E; --am-primary-hover: #115E59; --am-on-primary: #FFFFFF; --am-accent: #14B8A6; --am-eyebrow: #0F766E; --am-grad-a: #0F766E; --am-grad-b: #14B8A6; --am-hero-tint-1: rgba(15, 118, 110, 0.08); --am-hero-tint-2: rgba(20, 184, 166, 0.05); --am-hero-grid: rgba(15, 118, 110, 0.05); --am-card-bg: #FFFFFF; --am-card-shadow: 0 4px 18px rgba(28, 39, 36, 0.05); --am-card-shadow-hover: 0 18px 44px rgba(28, 39, 36, 0.12); --am-media-shadow: 0 24px 60px rgba(28, 39, 36, 0.14); --am-header-bg: rgba(251, 250, 247, 0.88); --am-band-1: #132B27; --am-band-2: #0D211E; --am-band-border: rgba(20, 184, 166, 0.3); --am-band-text: #C8D6D2; --am-band-muted: #93A6A0; --am-band-eyebrow: #5EEAD4; --am-band-link: #99F6E4; --am-metric: #FFFFFF; --am-footer-bg: #0D211E; --am-logo-blue: block; --am-logo-light: none; } /* Re-point the WordPress preset variables (used by theme.json-driven styles: body colors, headings, links, buttons) at the active skin's tokens. `html body` outranks the `body{}` rule global styles emit. */ html body { --wp--preset--color--base: var(--am-base); --wp--preset--color--surface: var(--am-surface); --wp--preset--color--text: var(--am-text); --wp--preset--color--muted: var(--am-muted); --wp--preset--color--border: var(--am-border); --wp--preset--color--primary: var(--am-primary); --wp--preset--color--primary-bright: var(--am-primary-hover); --wp--preset--color--indigo-tint: var(--am-accent); --wp--preset--color--cyan: var(--am-accent); --wp--preset--color--lime: var(--am-accent); } /* ================= Base polish ================= */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--am-primary) 85%, transparent); color: #fff; } :where(a):focus-visible, :where(button):focus-visible, :where(.wp-block-button__link):focus-visible { outline: 2px solid var(--am-primary); outline-offset: 3px; border-radius: 4px; } /* ================= Media placeholders ================= */ .am-media { position: relative; margin: 0; } .am-media img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 18px; border: 1px solid var(--am-border); box-shadow: var(--am-media-shadow); display: block; } .am-media::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(10, 20, 40, 0) 70%, rgba(10, 20, 40, 0.22) 100%); pointer-events: none; } .am-media-square img { aspect-ratio: 4 / 3; } .am-card .am-media img, .am-card .am-media::after { border-radius: 12px; } .am-card .am-media img { box-shadow: none; } .am-media-hero img { aspect-ratio: 21 / 9; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--am-primary) 25%, transparent); box-shadow: var(--am-media-shadow); } /* ================= Header ================= */ .am-header { position: sticky; top: 0; z-index: 100; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); background: var(--am-header-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--am-border); } .am-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--heading); font-size: 0.95rem; font-weight: 500; color: var(--am-text); text-decoration: none; } .am-header .wp-block-navigation a:hover, .am-header .wp-block-navigation .current-menu-item > a { color: var(--am-eyebrow); } .am-header .wp-block-navigation__submenu-container { background: var(--am-elev) !important; border: 1px solid var(--am-border) !important; border-radius: 12px; padding: 0.5rem !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); } /* Frameworks dropdown: brand names in the mono chip voice, no captions */ .am-nav-fw .wp-block-navigation__submenu-container a { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; } .am-header .wp-block-navigation__submenu-container a { border-radius: 8px; padding: 0.55rem 0.8rem !important; } .am-header .wp-block-navigation__submenu-container a:hover { background: color-mix(in srgb, var(--am-primary) 10%, transparent); } /* ================= Mobile & small screens ================= */ /* Anchor jumps land below the sticky header */ html { scroll-padding-top: 84px; } /* WP's mobile menu breakpoint is 600px. Below it: - drop the header blur: backdrop-filter creates a containing block that traps the fixed-position menu overlay inside the header bar - keep the header to one row: logo | primary CTA | hamburger */ @media (max-width: 599px) { .am-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--am-elev); } .am-header > .wp-block-group { flex-wrap: nowrap; min-width: 0; } .am-header .wp-block-navigation { order: 3; } .am-header .wp-block-button__link { padding: 0.55rem 1rem; } } /* Hide the secondary header button until there is room for the full logo + nav + two buttons row (keeps the header to a single line) */ @media (max-width: 1160px) { .am-header .wp-block-buttons .am-btn-ghost { display: none; } } /* Tablets (600–899px): the full nav can't fit on one row, so keep the hamburger instead of letting links wrap into a three-row header */ @media (min-width: 600px) and (max-width: 899px) { .am-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .am-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .am-header > .wp-block-group { flex-wrap: nowrap; } .am-header .wp-block-navigation { order: 3; } } /* Just above the hamburger cutoff, tighten the nav so it stays on one row */ @media (min-width: 900px) and (max-width: 1160px) { .am-header .wp-block-navigation__container { gap: 0.9rem !important; } .am-header .wp-block-navigation a { font-size: 0.88rem; } } /* Hamburger: generous tap target, theme-aware color */ .wp-block-navigation__responsive-container-open { padding: 0.6rem; color: var(--am-heading); } /* Mobile menu overlay: readable on every design system */ .wp-block-navigation__responsive-container.is-menu-open { background: var(--am-elev) !important; color: var(--am-heading) !important; padding: 4.5rem 1.6rem 2.5rem !important; } .wp-block-navigation__responsive-container.is-menu-open a, .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { color: var(--am-heading) !important; } .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.05rem; padding: 0.4rem 0; } /* Left-align the overlay menu (desktop nav is right-justified) */ .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, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: 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; box-shadow: none; padding: 0 0 0 1rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { font-size: 0.95rem; color: var(--am-muted) !important; } /* Tighter vertical rhythm and full-width CTAs on phones */ @media (max-width: 599px) { .am-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .am-hero { padding-top: 3.5rem !important; padding-bottom: 3rem !important; } .am-hero .wp-block-buttons, .am-cta .wp-block-buttons { flex-direction: column; align-items: stretch; } .am-hero .wp-block-button, .am-cta .wp-block-button { width: 100%; } .am-hero .wp-block-button__link, .am-cta .wp-block-button__link { display: block; width: 100%; text-align: center; } .am-metric-number { font-size: 2rem; } /* The floating switcher shrinks out of the way of thumb reach */ .am-switcher { right: 12px; bottom: 12px; } } /* Dual logo: blue wordmark on light skins, light wordmark on dark skins */ .am-logo-blue { display: var(--am-logo-blue); } .am-logo-light { display: var(--am-logo-light); } /* ================= Buttons ================= */ .wp-block-button__link { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--am-primary) 30%, transparent); } .am-btn-gradient .wp-block-button__link { background: linear-gradient(135deg, var(--am-grad-a) 0%, var(--am-grad-b) 130%); color: var(--am-on-primary); } .am-btn-ghost .wp-block-button__link { background: var(--am-ghost-bg); border: 1px solid var(--am-ghost-border); color: var(--am-text); } .am-btn-ghost .wp-block-button__link:hover { border-color: var(--am-primary); color: var(--am-eyebrow); box-shadow: 0 10px 26px color-mix(in srgb, var(--am-primary) 15%, transparent); } /* High-emphasis CTA: primary on light canvas, inverted white inside dark bands */ .am-btn-lime .wp-block-button__link { background: var(--am-primary); color: var(--am-on-primary); } .am-btn-lime .wp-block-button__link:hover { background: var(--am-primary-hover); } .am-cta .am-btn-lime .wp-block-button__link, .am-dexa .am-btn-lime .wp-block-button__link, .am-metric-strip .am-btn-lime .wp-block-button__link { background: #ffffff; color: #10213F; } .am-cta .am-btn-lime .wp-block-button__link:hover, .am-dexa .am-btn-lime .wp-block-button__link:hover, .am-metric-strip .am-btn-lime .wp-block-button__link:hover { background: #EDF2FA; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } .am-cta .am-btn-ghost .wp-block-button__link, .am-dexa .am-btn-ghost .wp-block-button__link { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } .am-cta .am-btn-ghost .wp-block-button__link:hover, .am-dexa .am-btn-ghost .wp-block-button__link:hover { border-color: #ffffff; color: #ffffff; } @media (prefers-reduced-motion: reduce) { .wp-block-button__link { transition: none; } .wp-block-button__link:hover { transform: none; } } /* ================= Section scaffolding ================= */ .am-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); } .am-section-tight { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } .am-eyebrow, .am-eyebrow-lime { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-eyebrow); } /* Section headers (eyebrow, title, lead) share the WIDE grid box so their left edge lines up with the card grids below — not a centered 760px column that looks indented next to full-width content. */ .am-section > .am-eyebrow, .am-section > h2, .am-section > .am-lead { max-width: var(--wp--style--global--wide-size, 1200px); } .am-lead { font-size: var(--wp--preset--font-size--large); color: var(--am-muted); max-width: 46em; } /* Echo of the logo's underline motif */ .am-kicker-line { display: inline-block; width: 44px; height: 3px; background: var(--am-primary); border-radius: 2px; vertical-align: middle; } /* Gradient headline word */ .am-gradient-text { background: linear-gradient(100deg, var(--am-grad-a) 0%, var(--am-grad-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ================= Hero ================= */ .am-hero { position: relative; overflow: hidden; background: radial-gradient(1100px 560px at 75% -15%, var(--am-hero-tint-1), transparent 60%), radial-gradient(800px 480px at 5% 5%, var(--am-hero-tint-2), transparent 55%), var(--am-base); } .am-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--am-hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--am-hero-grid) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 75%); pointer-events: none; } .am-hero > * { position: relative; } .am-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--am-eyebrow); background: color-mix(in srgb, var(--am-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--am-primary) 30%, transparent); border-radius: 999px; padding: 0.4rem 0.9rem; } .am-hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--am-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--am-accent) 80%, transparent); } /* ================= Cards ================= */ .am-card { background: var(--am-card-bg); border: 1px solid var(--am-border); border-radius: 14px; padding: 1.75rem !important; box-shadow: var(--am-card-shadow); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; height: 100%; } .am-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--am-primary) 50%, var(--am-border)); box-shadow: var(--am-card-shadow-hover); } @media (prefers-reduced-motion: reduce) { .am-card { transition: none; } .am-card:hover { transform: none; } } /* Card rhythm: air after the icon, title tight to its description */ .am-card h3, .am-card h4 { margin-top: 0; margin-bottom: 0.5rem; } .am-card :is(h3, h4) + p { margin-top: 0; } .am-card .am-card-icon { margin-bottom: 1.1rem; } .am-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--am-primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--am-primary) 25%, transparent); font-size: 1.3rem; line-height: 1; color: var(--am-eyebrow); } /* Framework card: mono code-chip name */ .am-chip, .am-chip-lime, .am-chip-indigo { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--am-eyebrow); background: color-mix(in srgb, var(--am-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--am-primary) 28%, transparent); border-radius: 6px; padding: 0.2rem 0.55rem; } /* Tag row under card titles */ .am-tag-row { display: flex; flex-wrap: wrap; gap: 0.45rem; } /* ================= Metric strip — statement band ================= */ .am-metric-strip { background: linear-gradient(135deg, var(--am-band-1) 0%, var(--am-band-2) 100%); border-top: 1px solid var(--am-band-border); border-bottom: 1px solid var(--am-band-border); } .am-metric-number { font-family: var(--wp--preset--font-family--heading); /* Sized so even the longest metric ($40M → $12M) stays on one line inside a 4-up column; never allow a mid-metric wrap. */ font-size: clamp(1.7rem, 2.1vw + 0.35rem, 2.7rem); font-weight: 700; line-height: 1; color: var(--am-metric); letter-spacing: -0.02em; white-space: nowrap; } .am-metric-label { color: var(--am-band-muted); font-size: 0.95rem; max-width: 22em; } /* Checkmark list — used in lead-magnet and offer sections */ .am-check-list { list-style: none; padding-left: 0; display: grid; gap: 0.55rem; } .am-check-list li { position: relative; padding-left: 1.7em; color: var(--am-text); } .am-check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--am-primary); } /* ================= Section band variants ================= */ .am-band-soft { background: var(--am-surface); border-top: 1px solid var(--am-border); border-bottom: 1px solid var(--am-border); } .am-band-gradient { background: radial-gradient(900px 420px at 85% 0%, color-mix(in srgb, var(--am-primary) 8%, transparent), transparent 60%), var(--am-surface); border-top: 1px solid var(--am-border); border-bottom: 1px solid var(--am-border); } /* ================= Dark band typography ================= */ .am-metric-strip :is(h1, h2, h3, h4, p), .am-cta :is(h1, h2, h3, h4), .am-dexa :is(h1, h2, h3, h4), .am-footer :is(h1, h2, h3, h4) { color: #ffffff; } .am-cta p, .am-cta .am-lead, .am-dexa p, .am-dexa .am-lead, .am-dexa li { color: var(--am-band-text); } .am-dexa .am-muted, .am-cta .am-muted, .am-dexa .am-gate-note, .am-cta .am-gate-note { color: var(--am-band-muted); } .am-cta .am-eyebrow, .am-dexa .am-eyebrow, .am-cta .am-eyebrow-lime, .am-dexa .am-eyebrow-lime { color: var(--am-band-eyebrow); } .am-dexa .am-chip, .am-cta .am-chip { color: var(--am-band-link); background: rgba(255, 255, 255, 0.06); border-color: color-mix(in srgb, var(--am-band-link) 35%, transparent); } .am-dexa a:not(.wp-block-button__link), .am-cta a:not(.wp-block-button__link) { color: var(--am-band-link); } .am-dexa .am-card { background: rgba(255, 255, 255, 0.04); border-color: color-mix(in srgb, var(--am-band-link) 25%, transparent); box-shadow: none; } .am-dexa .am-card ul { color: var(--am-band-text); } /* ================= CTA band ================= */ .am-cta { position: relative; overflow: hidden; background: radial-gradient(700px 340px at 20% 110%, color-mix(in srgb, var(--am-band-link) 18%, transparent), transparent 60%), linear-gradient(135deg, var(--am-band-2) 0%, var(--am-band-1) 100%); border: 1px solid var(--am-band-border); border-radius: 20px; } /* ================= DEXA spotlight ================= */ .am-dexa { position: relative; overflow: hidden; background: radial-gradient(800px 400px at 80% -20%, color-mix(in srgb, var(--am-band-link) 12%, transparent), transparent 55%), radial-gradient(700px 400px at 10% 110%, color-mix(in srgb, var(--am-primary) 22%, transparent), transparent 60%), linear-gradient(135deg, var(--am-band-1) 0%, var(--am-band-2) 100%); border-top: 1px solid var(--am-band-border); border-bottom: 1px solid var(--am-band-border); } .am-gate-note { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--am-muted); } /* ================= Footer ================= */ .am-footer { background: var(--am-footer-bg); border-top: 1px solid var(--am-band-border); color: var(--am-band-text); padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); } .am-footer p { color: var(--am-band-text); } .am-footer a { color: var(--am-band-muted); text-decoration: none; } .am-footer a:hover { color: #ffffff; } .am-footer-heading { font-family: var(--wp--preset--font-family--heading); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-band-eyebrow); } .am-footer-fine, .am-footer .am-footer-fine { color: var(--am-band-muted); font-size: 0.85rem; } /* ================= Prose defaults inside content ================= */ .am-section :where(p) { color: var(--am-text); } .am-muted, .am-section :where(p.am-muted) { color: var(--am-muted); } /* Lists inside cards */ .am-card ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--am-muted); } .am-card ul li { margin-bottom: 0.35rem; } .am-card ul li::marker { color: var(--am-eyebrow); } /* ================= Motion layer ================= Research-backed (see BRAND-STRATEGY.md): purposeful motion only — transforms/opacity, compositor-friendly, reduced-motion respected. */ @media (prefers-reduced-motion: no-preference) { .js .am-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .am-reveal.is-visible { opacity: 1; transform: none; } /* Hero entrance: badge, headline, lead cascade in once */ .am-hero .am-hero-badge, .am-hero h1, .am-hero .am-lead, .am-hero .wp-block-buttons { animation: am-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .am-hero h1 { animation-delay: 0.08s; } .am-hero .am-lead { animation-delay: 0.16s; } .am-hero .wp-block-buttons { animation-delay: 0.24s; } @keyframes am-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Signature moment: the highlighted headline word sweeps in its gradient */ .am-hero .am-gradient-text { background-size: 220% 100%; animation: am-shimmer 1.6s ease-out 0.35s both; } @keyframes am-shimmer { from { background-position: 130% 0; } to { background-position: 0% 0; } } } /* Scroll progress bar — guided-scrolling wayfinding, compositor-only. Uses CSS scroll-driven animations; browsers without support get nothing. */ @supports (animation-timeline: scroll()) { body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 10000; background: linear-gradient(90deg, var(--am-grad-a), var(--am-grad-b)); transform-origin: 0 50%; transform: scaleX(0); animation: am-progress linear; animation-timeline: scroll(root); pointer-events: none; } @keyframes am-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* Cursor spotlight on cards — a soft brand-color glow tracks the pointer. --mx/--my are set by main.js only on fine-pointer, motion-allowed devices. */ .am-card { position: relative; overflow: hidden; } .am-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--am-primary) 10%, transparent), transparent 65%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .am-card:hover::before { opacity: 1; } /* Primary CTAs carry a forward arrow that nudges on hover (momentum motif) */ .am-btn-gradient .wp-block-button__link::after, .am-btn-lime .wp-block-button__link::after { content: "\2192"; display: inline-block; margin-left: 0.5em; transition: transform 0.18s ease; } .am-btn-gradient .wp-block-button__link:hover::after, .am-btn-lime .wp-block-button__link:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .am-btn-gradient .wp-block-button__link::after, .am-btn-lime .wp-block-button__link::after { transition: none; } } /* ================= Utilities ================= */ .am-divider { border: none; border-top: 1px solid var(--am-border); margin: 0; } .am-center { text-align: center; } .am-grid > .wp-block-column { min-width: 0; } /* 404 */ .am-404-code { font-family: var(--wp--preset--font-family--mono); font-size: clamp(4rem, 12vw, 8rem); font-weight: 500; line-height: 1; background: linear-gradient(135deg, var(--am-grad-a), var(--am-grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Page header */ .am-page-header { background: radial-gradient(800px 300px at 70% -40%, var(--am-hero-tint-1), transparent 60%), var(--am-base); border-bottom: 1px solid var(--am-border); } /* Post/archive cards */ /* Comparison tables in posts and pages */ .am-table { overflow-x: auto; } .am-table table { border-collapse: collapse; width: 100%; font-size: 0.92rem; } .am-table th, .am-table td { border: 1px solid var(--am-border); padding: 0.75rem 0.95rem; text-align: left; vertical-align: top; color: var(--am-text); } .am-table thead th { font-family: var(--wp--preset--font-family--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--am-eyebrow); background: color-mix(in srgb, var(--am-primary) 6%, transparent); } .am-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--am-primary) 3%, transparent); } .am-post-card { background: var(--am-card-bg); border: 1px solid var(--am-border); border-radius: 14px; overflow: hidden; box-shadow: var(--am-card-shadow); } .am-post-card .wp-block-post-title a { color: var(--am-heading); text-decoration: none; } .am-post-card .wp-block-post-title a:hover { color: var(--am-eyebrow); } /* Forms (CF7) */ .wpcf7 input:not([type="submit"]), .wpcf7 textarea, .wpcf7 select { background: var(--am-elev); border: 1px solid var(--am-ghost-border); border-radius: 8px; color: var(--am-text); padding: 0.65rem 0.85rem; width: 100%; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid color-mix(in srgb, var(--am-primary) 50%, transparent); outline-offset: 1px; border-color: var(--am-primary); } .wpcf7 input[type="submit"] { background: var(--am-primary); color: var(--am-on-primary); border: none; border-radius: 10px; padding: 0.8rem 1.6rem; font-weight: 600; font-family: var(--wp--preset--font-family--heading); cursor: pointer; } .wpcf7 input[type="submit"]:hover { background: var(--am-primary-hover); } /* ================= Theme switcher (dev preview) ================= */ .am-switcher { position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: var(--wp--preset--font-family--body); } .am-switcher-toggle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--am-border); background: var(--am-elev); color: var(--am-text); font-size: 1.35rem; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .am-switcher-toggle:hover { border-color: var(--am-primary); } .am-switcher-panel { position: absolute; right: 0; bottom: 64px; width: 240px; background: var(--am-elev); border: 1px solid var(--am-border); border-radius: 14px; padding: 0.9rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); display: none; } .am-switcher.is-open .am-switcher-panel { display: block; } .am-switcher-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--am-muted); margin: 0 0 0.6rem; } .am-switcher-option { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--am-text); font-size: 0.88rem; font-weight: 500; cursor: pointer; text-align: left; } .am-switcher-option:hover { background: color-mix(in srgb, var(--am-primary) 8%, transparent); } .am-switcher-option[aria-pressed="true"] { border-color: var(--am-primary); background: color-mix(in srgb, var(--am-primary) 10%, transparent); } .am-switcher-dots { display: inline-flex; flex-shrink: 0; } .am-switcher-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, 0.35); margin-left: -4px; } .am-switcher-dots span:first-child { margin-left: 0; } .am-switcher-note { font-size: 0.7rem; color: var(--am-muted); margin: 0.6rem 0 0; line-height: 1.4; }