/** * This child theme's OWN live, directly-enqueued design-system CSS * (see functions.php's hexnity_wp_child_enqueue_meridian_assets(), * conditional on the "Meridian Home" page template). Written as plain, * browser-native CSS — no build step, no Tailwind, no npm — on * 2026-08-29, per explicit user instruction: "only use site-theme.css * and theme options.css dont create any other css." The former * `assets/css/template-meridian.css` duplicate-mirror file this * required (because the original Tailwind-`@theme`-based version of * this file couldn't run unbuilt in a browser) was deleted the same * day — the `@theme { ... }` at-rule at the top of this file was * converted to a plain `:root { ... }` block instead (Tailwind's own * `@theme` compiles to exactly that in its output CSS, so nothing * else in this file needed to change), which is enough on its own to * make every rule below work correctly in any browser with zero * processing. * * The parent theme (hex-wp-theme-template) still separately builds * its OWN copy of this same design system via its own real Tailwind * pipeline (compiled to hex-wp-theme-template/assets/css/tailwind.css, * enqueued as the 'hex-tailwind' handle) — that stays the source of * truth for every OTHER page on the site. This file, enqueued only on * the Meridian Home template, computes identical values for every * class the two files share (`.btn`/`.card`/`.badge`/h1-h6 etc., all * reading the exact same runtime --hex-* custom properties from * theme-options.css) — loading both on that one page is redundant but * harmless, and adds the components that page needs that the parent's * copy doesn't have yet (see the second @layer components block, * appended below the original one). * * The site's admin-configurable design tokens (Theme Options page, * managed by the parent theme "Hexnity WP AI Theme") — plus any * auto-detected custom tokens. Every token here is defined as * `var(--hex-{key}, {default})` — pointing at a runtime CSS custom * property declared in THIS child theme's own theme-options.css file * (a sibling of this file, enqueued directly by the parent's * inc/style-settings.php's hex_enqueue_child_theme_tokens()), * falling back to the hardcoded default here when nothing's been * saved yet, or a value was rejected as unsafe. This indirection is * what makes a change in the Theme Options admin page apply on the * front end immediately, with no rebuild — this file itself never * needs re-processing, only theme-options.css's stored values change. * * The 11 text-size tokens (`--text-h1`…`--text-h6`, `--text-body`, * `--text-lead`, `--text-large`, `--text-small`, `--text-meta`) each * have a flat px `{default}` fallback, used when nothing's been saved * yet, or a value was rejected as unsafe. `--hex-{key}-size` (once * theme-options.css has one, normally via a Theme Options save) still * wins outright over this fallback. * * The "Global" radius scale (--radius-sm/md/lg) is the one exception * to "every name here is just this file's own internal alias" — in * the parent's real Tailwind build, that specific pair of names also * overrides Tailwind's own built-in rounded-sm/md/lg utility classes * site-wide (irrelevant here, since this file isn't processed by * Tailwind and this page's own markup doesn't use those utilities * directly). * * Font families: use ONLY the 4 real Theme Options font fields * (--hex-font-heading, --hex-font-body, --hex-font-accent, * --hex-font-mono) — never a one-off font-family declaration in a * component rule. Headings (h1-h6) and body text get theirs for free * from the @layer base rules below; anything else needing the accent * or mono treatment uses the .font-accent / .font-mono utility * classes (see the second @layer components block) applied directly * in the HTML. * * 2026-08-29: a second @layer components block was appended at the * end of this file — the component classes built for the "Concept B: * Meridian" page template (.hero/.hero-card/.rows/.row-item/.dark-band/ * .stats-grid/.brand-grid/.quote-carousel/.compliance-box/.paths-split/ * .form-split/.footer-grid/.logo-strip/.hex-container, the * .font-accent/.font-mono utilities, plus a .btn-ghost button variant, * two badge variants (.badge-outline/.badge-mono), and a hover * underline added to the existing .nav-link) — written in the exact * same var(--hex-{key}, {default}) pattern as everything above. * * 2026-09-01: added .brand-intro/.brand-intro-logo (centered logo + * blurb band for template-broadband.php's "More" brand intro — see * that file and TEMPLATE-CONVERSION-GUIDE.md's inventory). * * @package HexnityWPChild */ :root { /* * Typography: heading levels (size/line-height/letter-spacing/weight). * --text-h{n}'s fallback is a flat px value (no clamp()/viewport * interpolation — removed per explicit user request; see the * parent's knoladge/fluid-typography-clamp.md) matching the same * desktop default the parent's hex_get_style_schema() ships. * --hex-h{n}-size (once this child theme's theme-options.css has * saved one via Theme Options) still wins outright over this * fallback. */ --text-h1: var(--hex-h1-size, 40px); --text-h2: var(--hex-h2-size, 32px); --text-h3: var(--hex-h3-size, 28px); --text-h4: var(--hex-h4-size, 24px); --text-h5: var(--hex-h5-size, 20px); --text-h6: var(--hex-h6-size, 16px); --leading-h1: var(--hex-h1-line-height, 1.2); --leading-h2: var(--hex-h2-line-height, 1.25); --leading-h3: var(--hex-h3-line-height, 1.3); --leading-h4: var(--hex-h4-line-height, 1.35); --leading-h5: var(--hex-h5-line-height, 1.4); --leading-h6: var(--hex-h6-line-height, 1.4); --tracking-h1: var(--hex-h1-letter-spacing, -0.8px); --tracking-h2: var(--hex-h2-letter-spacing, -0.32px); --tracking-h3: var(--hex-h3-letter-spacing, -0.28px); --tracking-h4: var(--hex-h4-letter-spacing, 0px); --tracking-h5: var(--hex-h5-letter-spacing, 0px); --tracking-h6: var(--hex-h6-letter-spacing, 0.32px); --font-weight-h1: var(--hex-h1-weight, 700); --font-weight-h2: var(--hex-h2-weight, 700); --font-weight-h3: var(--hex-h3-weight, 600); --font-weight-h4: var(--hex-h4-weight, 600); --font-weight-h5: var(--hex-h5-weight, 600); --font-weight-h6: var(--hex-h6-weight, 600); /* Typography: body-level text styles — same flat-fallback pattern as the headings above. */ --text-body: var(--hex-body-size, 16px); --text-lead: var(--hex-lead-size, 20px); --text-large: var(--hex-large-size, 18px); --text-small: var(--hex-small-size, 14px); --text-meta: var(--hex-meta-size, 13px); --leading-body: var(--hex-body-line-height, 1.6); --leading-lead: var(--hex-lead-line-height, 1.6); --leading-large: var(--hex-large-line-height, 1.6); --leading-small: var(--hex-small-line-height, 1.5); --leading-meta: var(--hex-meta-line-height, 1.4); --tracking-meta: var(--hex-meta-letter-spacing, 0.39px); --font-weight-meta: var(--hex-meta-weight, 600); /* Spacing. */ --spacing-xs: var(--hex-spacing-xs, 8px); --spacing-sm: var(--hex-spacing-sm, 16px); --spacing-md: var(--hex-spacing-md, 24px); --spacing-lg: var(--hex-spacing-lg, 32px); --spacing-xl: var(--hex-spacing-xl, 48px); --spacing-2xl: var(--hex-spacing-2xl, 64px); --spacing-section-sm: var(--hex-section-padding-sm, 32px); --spacing-section-md: var(--hex-section-padding-md, 48px); --spacing-section-lg: var(--hex-section-padding-lg, 64px); --spacing-section-xl: var(--hex-section-padding-xl, 96px); /* Colors: full palette. */ --color-site-primary: var(--hex-color-primary, #2563eb); --color-site-secondary: var(--hex-color-secondary, #475569); --color-site-tertiary: var(--hex-color-tertiary, #7c3aed); --color-site-accent: var(--hex-color-accent, #16a34a); --color-site-success: var(--hex-color-success, #16a34a); --color-site-warning: var(--hex-color-warning, #d97706); --color-site-danger: var(--hex-color-danger, #dc2626); --color-site-info: var(--hex-color-info, #0ea5e9); --color-site-muted: var(--hex-color-muted, #f1f5f9); --color-site-emphasis: var(--hex-color-emphasis, #111827); --color-site-body-bg: var(--hex-color-body-background, #ffffff); --color-site-body-text: var(--hex-color-body-text, #1f2937); --color-site-inverse-bg: var(--hex-color-inverse-background, #111827); --color-site-inverse-text: var(--hex-color-inverse-text, #f9fafb); --color-site-border: var(--hex-color-border, #e5e7eb); /* Sections: background variants. */ --color-site-section-default: var(--hex-section-background-default, #ffffff); --color-site-section-muted: var(--hex-section-background-muted, #f8fafc); --color-site-section-primary: var(--hex-section-background-primary, #2563eb); --color-site-section-secondary: var(--hex-section-background-secondary, #475569); /* Global radius scale — overrides Tailwind's own rounded-sm/md/lg. */ --radius-sm: var(--hex-radius-sm, 4px); --radius-md: var(--hex-radius-md, 8px); --radius-lg: var(--hex-radius-lg, 16px); /* Component-specific radius (distinct names, don't touch the global scale above). */ --radius-button: var(--hex-button-radius, 6px); --radius-card: var(--hex-card-radius, 8px); --radius-form: var(--hex-form-radius, 6px); /* Icon sizes. */ --size-icon-sm: var(--hex-icon-size-sm, 16px); --size-icon-md: var(--hex-icon-size-md, 24px); --size-icon-lg: var(--hex-icon-size-lg, 32px); } /* * Body-level defaults driven by the color tokens above. Element * selectors, so any more specific utility already in use (e.g. a * one-off bg-white on some wrapper) still wins via ordinary * specificity — this only sets the *default*. */ @layer base { body { background-color: var(--color-site-body-bg); color: var(--color-site-body-text); font-family: var(--hex-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: var(--text-body); line-height: var(--leading-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--hex-font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--font-weight-h1); margin-bottom: var(--hex-h1-margin-bottom, 24px); } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--font-weight-h2); margin-bottom: var(--hex-h2-margin-bottom, 20px); } h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--font-weight-h3); margin-bottom: var(--hex-h3-margin-bottom, 16px); } h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); font-weight: var(--font-weight-h4); margin-bottom: var(--hex-h4-margin-bottom, 16px); } h5 { font-size: var(--text-h5); line-height: var(--leading-h5); letter-spacing: var(--tracking-h5); font-weight: var(--font-weight-h5); margin-bottom: var(--hex-h5-margin-bottom, 12px); } h6 { font-size: var(--text-h6); line-height: var(--leading-h6); letter-spacing: var(--tracking-h6); font-weight: var(--font-weight-h6); margin-bottom: var(--hex-h6-margin-bottom, 12px); } /* * A global default link color, so any element that already has an * explicit Tailwind text-color utility (nav links, white text on * the dark header, etc.) still wins via ordinary specificity — * this only sets the color for links that don't otherwise specify * one. */ a { color: var(--hex-link-color, #2563eb); } a:hover { color: var(--hex-link-hover-color, #1d4ed8); } } @layer components { /* * Fluid text-size variables + classes (.hex-h1…hex-h6, .hex-body, * .hex-lead, .hex-large, .hex-small, .hex-meta) — two hard rules: * (1) exactly ONE shared clamp() calculation for every class below, * never one formula per class — each class only sets its own * --mobile-font-size/--desktop-font-size, and the single selector * list further down does the actual clamp() once; (2) the * breakpoints driving the interpolation * (--hex-static-breakpoint-s/-m/-l/-xl, :root block below) are * hardcoded here and NEVER stored in theme-options.css / admin- * editable — distinct from Theme Options' own * --hex-fluid-breakpoint-s/-m/-l/-xl (Global tab, feeds the * unrelated --text-h1 etc. chain above), keeping this layer's * *range* independent of Theme Options even though its * *endpoints* are not (see next paragraph). Same overall formula * shape as the parent's hex_build_fluid_clamp() * (inc/style-settings.php there) and the reference implementation * the user supplied, using real px lengths throughout (no * bare-number/"* 1px" trick — our --hex-{key}-size-mobile/-desktop * values are already real px lengths per the project's "always * px" rule, so multiplying by 1px again would produce an invalid * unit). See the parent's knoladge/fluid-typography-clamp.md. * * The mobile/desktop endpoints themselves ARE still * Theme-Options-driven (per the "always use Theme Options values" * rule): each class reads --hex-{key}-size-mobile/-desktop, * falling back to the same flat px defaults the parent's * hex_get_style_schema() ships when nothing's saved yet. Never * reference --mobile-font-size/--desktop-font-size (or the * --hex-* vars directly) on any selector other than its own class * — add the class instead. Apply one of these classes to ANY * element (not just a real

-

) for this fluid treatment. * Independent of bare h1-h6 (styled above via the --text-h1 etc. * chain, which stays flat/non-fluid per the earlier instruction) * and of .text-h1 etc. (the Tailwind-generated utilities for * those same --text-* tokens). */ :root { --hex-static-breakpoint-s: 640px; /* Small — Phone Landscape / Large Phones */ --hex-static-breakpoint-m: 960px; /* Medium — Tablet Landscape / Small Laptops */ --hex-static-breakpoint-l: 1200px; /* Large — Standard Desktops */ --hex-static-breakpoint-xl: 1600px; /* X-Large — Large Screens / High-Res Monitors */ } .hex-h1 { --mobile-font-size: var(--hex-h1-size-mobile, 28px); --desktop-font-size: var(--hex-h1-size-desktop, 40px); } .hex-h2 { --mobile-font-size: var(--hex-h2-size-mobile, 24px); --desktop-font-size: var(--hex-h2-size-desktop, 32px); } .hex-h3 { --mobile-font-size: var(--hex-h3-size-mobile, 22px); --desktop-font-size: var(--hex-h3-size-desktop, 28px); } .hex-h4 { --mobile-font-size: var(--hex-h4-size-mobile, 20px); --desktop-font-size: var(--hex-h4-size-desktop, 24px); } .hex-h5 { --mobile-font-size: var(--hex-h5-size-mobile, 18px); --desktop-font-size: var(--hex-h5-size-desktop, 20px); } .hex-h6 { --mobile-font-size: var(--hex-h6-size-mobile, 15px); --desktop-font-size: var(--hex-h6-size-desktop, 16px); } .hex-body { --mobile-font-size: var(--hex-body-size-mobile, 15px); --desktop-font-size: var(--hex-body-size-desktop, 16px); } .hex-lead { --mobile-font-size: var(--hex-lead-size-mobile, 18px); --desktop-font-size: var(--hex-lead-size-desktop, 20px); } .hex-large { --mobile-font-size: var(--hex-large-size-mobile, 16px); --desktop-font-size: var(--hex-large-size-desktop, 18px); } .hex-small { --mobile-font-size: var(--hex-small-size-mobile, 13px); --desktop-font-size: var(--hex-small-size-desktop, 14px); } .hex-meta { --mobile-font-size: var(--hex-meta-size-mobile, 12px); --desktop-font-size: var(--hex-meta-size-desktop, 13px); } /* * @tailwindcss/typography's own .prose rule sets a flat * `font-size: 1rem` directly on the .prose container itself (in * Tailwind's utilities layer) — every plain descendant (

,

  • , * etc. with no more specific override) inherits that flat value, * completely bypassing Theme Options and the fluid system, no * matter what 's own --text-body says. Give .prose the same * treatment as .hex-body so real post/page body copy is fluid too, * not just text explicitly wrapped in a .hex-body element. */ .prose { --mobile-font-size: var(--hex-body-size-mobile, 15px); --desktop-font-size: var(--hex-body-size-desktop, 16px); } .hex-h1, .hex-h2, .hex-h3, .hex-h4, .hex-h5, .hex-h6, .hex-body, .hex-lead, .hex-large, .hex-small, .hex-meta, .prose { font-size: clamp( var(--mobile-font-size), calc(var(--mobile-font-size) + (var(--desktop-font-size) - var(--mobile-font-size)) * ((100vw - var(--hex-static-breakpoint-s)) / (var(--hex-static-breakpoint-xl) - var(--hex-static-breakpoint-s)))), var(--desktop-font-size) ) !important; } /* Balanced line-wrapping reads better on short heading text; not applied to the body-level classes above, where it's not recommended on longer running text. */ .hex-h1, .hex-h2, .hex-h3, .hex-h4, .hex-h5, .hex-h6 { text-wrap: balance; } /* * So headings *inside* post/page content (typed by whoever edits a * post, not just bare

    -

    tags) also get the full H1-H6 * treatment, not just font-size. Selector pattern matches * @tailwindcss/typography's own documented technique for * overriding specific element styles within `.prose`. */ .prose :where(h1):not(:where([class~="not-prose"] *)) { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--font-weight-h1); } .prose :where(h2):not(:where([class~="not-prose"] *)) { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--font-weight-h2); } .prose :where(h3):not(:where([class~="not-prose"] *)) { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--font-weight-h3); } .prose :where(h4):not(:where([class~="not-prose"] *)) { font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: var(--font-weight-h4); } .prose :where(h5):not(:where([class~="not-prose"] *)) { font-size: var(--text-h5); font-weight: var(--font-weight-h5); } .prose :where(h6):not(:where([class~="not-prose"] *)) { font-size: var(--text-h6); font-weight: var(--font-weight-h6); } /* Button component — a real component (like YOOtheme's own button styles), not raw utility composition, so every button shares one definition Theme Options actually controls. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-button); padding-inline: var(--hex-button-padding-x, 20px); padding-block: var(--hex-button-padding-y, 10px); background-color: var(--hex-button-default-background, #e5e7eb); color: var(--hex-button-default-color, #111827); font-weight: var(--hex-button-font-weight, 600); line-height: 1.2; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } .btn:hover { background-color: var(--hex-button-default-hover-background, #d1d5db); color: var(--hex-button-default-hover-color, #111827); } .btn-primary { background-color: var(--hex-button-primary-background, #2563eb); color: var(--hex-button-primary-color, #fff); } .btn-primary:hover { background-color: var(--hex-button-primary-hover-background, #1d4ed8); color: var(--hex-button-primary-hover-color, #fff); } .btn-secondary { background-color: var(--hex-button-secondary-background, #475569); color: var(--hex-button-secondary-color, #fff); } .btn-secondary:hover { background-color: var(--hex-button-secondary-hover-background, #334155); color: var(--hex-button-secondary-hover-color, #fff); } .btn-danger { background-color: var(--hex-button-danger-background, #dc2626); color: var(--hex-button-danger-color, #fff); } .btn-danger:hover { background-color: var(--hex-button-danger-hover-background, #b91c1c); color: var(--hex-button-danger-hover-color, #fff); } .btn-text { background-color: transparent; color: var(--hex-button-text-color, #2563eb); padding-inline: 0; } .btn-text:hover { background-color: transparent; color: var(--hex-button-text-hover-color, #1d4ed8); } .btn-outline { background-color: transparent; color: var(--color-site-primary); box-shadow: inset 0 0 0 1px var(--color-site-primary); } .btn-outline:hover { background-color: var(--color-site-primary); color: #fff; } .btn-xs { padding-inline: var(--hex-button-padding-x-xs, 8px); padding-block: var(--hex-button-padding-y-xs, 4px); font-size: var(--text-meta); } .btn-sm { padding-inline: var(--hex-button-padding-x-sm, 12px); padding-block: var(--hex-button-padding-y-sm, 6px); font-size: var(--text-small); } .btn-lg { padding-inline: var(--hex-button-padding-x-lg, 28px); padding-block: var(--hex-button-padding-y-lg, 14px); font-size: var(--text-large); } .btn-xl { padding-inline: var(--hex-button-padding-x-xl, 36px); padding-block: var(--hex-button-padding-y-xl, 18px); font-size: var(--text-lead); } /* Card component. */ .card { background-color: var(--hex-card-background, #fff); border: 1px solid var(--hex-card-border-color, #e5e7eb); border-radius: var(--radius-card); padding: var(--hex-card-padding, 24px); box-shadow: var(--hex-card-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05)); transition: box-shadow 150ms ease; } .card:hover { box-shadow: var(--hex-card-shadow-hover, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)); } /* Form fields. */ .form-control { display: block; width: 100%; background-color: var(--hex-form-background, #fff); border: 1px solid var(--hex-form-border-color, #d1d5db); border-radius: var(--radius-form); padding-inline: var(--hex-form-padding-x, 12px); padding-block: var(--hex-form-padding-y, 8px); } .form-control-sm { padding-inline: var(--hex-form-padding-x-sm, 8px); padding-block: var(--hex-form-padding-y-sm, 4px); font-size: var(--text-small); } .form-control-lg { padding-inline: var(--hex-form-padding-x-lg, 16px); padding-block: var(--hex-form-padding-y-lg, 12px); font-size: var(--text-large); } .form-control::placeholder { color: var(--hex-form-placeholder-color, #9ca3af); } .form-control:focus { border-color: var(--hex-form-focus-border-color, #2563eb); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--hex-form-focus-border-color, #2563eb); } .form-label { display: block; margin-bottom: 6px; color: var(--hex-form-label-color, #374151); font-weight: 500; } /* Tables. */ .table-styled { width: 100%; border-collapse: collapse; } .table-styled th, .table-styled td { border-bottom: 1px solid var(--hex-table-border-color, #e5e7eb); padding: 12px 16px; text-align: left; } .table-styled thead th { background-color: var(--hex-table-header-background, #f3f4f6); color: var(--hex-table-header-color, #111827); } .table-styled tbody tr:nth-child(even) { background-color: var(--hex-table-stripe-background, #f9fafb); } /* Alerts. */ .alert { border-radius: var(--radius-md); padding: 16px 20px; } .alert-primary { background-color: var(--hex-alert-primary-background, #eff6ff); color: var(--hex-alert-primary-color, #1e3a8a); } .alert-success { background-color: var(--hex-alert-success-background, #f0fdf4); color: var(--hex-alert-success-color, #166534); } .alert-warning { background-color: var(--hex-alert-warning-background, #fffbeb); color: var(--hex-alert-warning-color, #92400e); } .alert-danger { background-color: var(--hex-alert-danger-background, #fef2f2); color: var(--hex-alert-danger-color, #991b1b); } /* Badges. */ .badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 10px; font-size: var(--text-small); font-weight: 600; } .badge-default { background-color: var(--hex-badge-default-background, #f3f4f6); color: var(--hex-badge-default-color, #111827); } .badge-primary { background-color: var(--hex-badge-primary-background, #dbeafe); color: var(--hex-badge-primary-color, #1e40af); } .badge-success { background-color: var(--hex-badge-success-background, #dcfce7); color: var(--hex-badge-success-color, #166534); } .badge-warning { background-color: var(--hex-badge-warning-background, #fef3c7); color: var(--hex-badge-warning-color, #92400e); } .badge-danger { background-color: var(--hex-badge-danger-background, #fee2e2); color: var(--hex-badge-danger-color, #991b1b); } /* Navigation — primary menu links (the parent theme's header.php's #primary-menu). */ .nav-menu { display: flex; align-items: center; gap: var(--hex-nav-gap, 24px); } .nav-link { display: block; padding-block: 4px; color: var(--hex-nav-link-color, #374151); font-size: var(--text-small); font-weight: var(--hex-nav-font-weight, 500); text-decoration: none; transition: color 150ms ease; } .nav-link:hover { color: var(--hex-nav-link-hover-color, #2563eb); } .current-menu-item > .nav-link, .current-menu-ancestor > .nav-link { color: var(--hex-nav-link-active-color, #2563eb); } /* * Accordion — CSS-only, zero JS: each item is a native
    , * whose built-in open/close behavior and keyboard support this * relies on entirely. Markup: *
    *
    * Question *
    Answer
    *
    * ... *
    */ .accordion { display: flex; flex-direction: column; gap: var(--hex-accordion-gap, 8px); } .accordion-item { background-color: var(--hex-accordion-background, #fff); border: 1px solid var(--hex-accordion-border-color, #e5e7eb); border-radius: var(--hex-accordion-radius, 8px); overflow: hidden; } .accordion-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: var(--hex-accordion-padding, 16px); background-color: var(--hex-accordion-header-background, #f9fafb); color: var(--hex-accordion-header-color, #111827); font-weight: 600; cursor: pointer; list-style: none; } .accordion-item > summary::-webkit-details-marker { display: none; } .accordion-item > summary:hover { background-color: var(--hex-accordion-header-hover-background, #f3f4f6); } .accordion-item > summary::after { content: '+'; flex-shrink: 0; font-size: 1.25em; line-height: 1; } .accordion-item[open] > summary::after { content: '\2212'; } .accordion-content { padding: var(--hex-accordion-padding, 16px); } /* * Tabs — CSS-only, zero JS: hidden radio inputs + labels drive which * panel shows via the :checked sibling selectors below (supports up * to 8 tabs per .tabs container). Inputs/labels/panels must all be * direct children of .tabs, inputs+labels first, in matching order. * Labels are inline-block so they wrap like text into a "nav row"; * panels are block-level so each naturally starts a new line below * it — no flexbox/positioning trick needed for the layout split. * Markup: *
    * * * * *
    Content A
    *
    Content B
    *
    */ .tabs-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .tabs-label { display: inline-block; padding-block: 8px; padding-inline: 4px; margin-inline-end: var(--hex-tabs-gap, 24px); color: var(--hex-tabs-label-color, #6b7280); font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; } .tabs-input:checked + .tabs-label { color: var(--hex-tabs-active-label-color, #2563eb); border-bottom-color: var(--hex-tabs-active-border-color, #2563eb); } .tabs-input:focus-visible + .tabs-label { outline: 2px solid var(--hex-tabs-active-border-color, #2563eb); outline-offset: 2px; } .tabs-panel { display: none; padding-block: var(--hex-tabs-padding, 16px); border-top: 1px solid var(--hex-tabs-border-color, #e5e7eb); } .tabs-input:nth-of-type(1):checked ~ .tabs-panel:nth-of-type(1), .tabs-input:nth-of-type(2):checked ~ .tabs-panel:nth-of-type(2), .tabs-input:nth-of-type(3):checked ~ .tabs-panel:nth-of-type(3), .tabs-input:nth-of-type(4):checked ~ .tabs-panel:nth-of-type(4), .tabs-input:nth-of-type(5):checked ~ .tabs-panel:nth-of-type(5), .tabs-input:nth-of-type(6):checked ~ .tabs-panel:nth-of-type(6), .tabs-input:nth-of-type(7):checked ~ .tabs-panel:nth-of-type(7), .tabs-input:nth-of-type(8):checked ~ .tabs-panel:nth-of-type(8) { display: block; } /* Icons. */ .icon { color: var(--hex-icon-color, #475569); width: var(--size-icon-md); height: var(--size-icon-md); } .icon:hover { color: var(--hex-icon-hover-color, #2563eb); } .icon-sm { width: var(--size-icon-sm); height: var(--size-icon-sm); } .icon-lg { width: var(--size-icon-lg); height: var(--size-icon-lg); } } /* * "Concept B: Meridian" page components — added 2026-08-29, corrected * 2026-08-29. See this file's header comment for the live-effect * caveat. IMPORTANT re: var(--hex-spacing-*, fallback) — the * --hex-spacing-xs...2xl scale is a fixed 6-step scale (8/16/24/32/ * 48/64) and was deliberately left unchanged (see theme-options.css's * own header comment) rather than force the concept's many one-off * gap/padding values onto it. Because those tokens ARE already * defined, writing var(--hex-spacing-md, 26px) does NOT fall back to * 26px — the real, already-set 24px wins outright, silently rendering * the wrong pixel value. So below, every spacing/padding/gap value * that doesn't exactly equal one of those six numbers is a plain * literal, not a var() call — pixel-perfect over false consistency. * Only radius/button/form/card fields and colors/fonts were actually * overwritten in theme-options.css to match the concept, so var() is * correct and safe to use for those. Two new .badge-* variants are * added here (.badge-outline, .badge-mono) because the concept uses * two distinct tag/pill treatments that don't match badge-default/ * -primary/etc. */ @layer components { /* Font-family utilities — the only two of the 4 real Theme Options font fields not already applied for free by the @layer base h1-h6/body rules above. */ .font-accent { font-family: var(--hex-font-accent, serif); } .font-mono { font-family: var(--hex-font-mono, ui-monospace, monospace); } .hex-container { max-width: 1160px; margin-inline: auto; padding-inline: 28px; } .spacer { flex: 1; } .section-tight-top { padding-top: 0; } .section-tight-bottom { padding-bottom: 0; } /* Button variant — mockup's outlined "ghost" button (neutral border, not the primary-colored .btn-outline above). */ .btn-ghost { background-color: transparent; color: var(--hex-color-body-text, #111827); box-shadow: inset 0 0 0 1px var(--hex-color-border-strong, #d1d5db); } .btn-ghost:hover { background-color: var(--hex-card-background, #fff); box-shadow: inset 0 0 0 1px var(--hex-color-body-text, #111827); } .btn-submit { justify-content: center; margin-top: 2px; } /* Badge variants — the concept's two distinct tag/pill treatments. */ .badge-outline { background-color: transparent; color: var(--hex-color-muted-text); font-weight: 400; padding: 4px 9px; border: 1px solid var(--hex-color-border-strong); } .badge-mono { background-color: var(--hex-color-muted); color: var(--hex-color-secondary); font-weight: 400; letter-spacing: .05em; padding: 9px 13px; border: 1px solid var(--hex-color-border-strong); border-radius: 6px; white-space: nowrap; } /* Nav link hover underline — additive to the .nav-link rule above. */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1.5px; background: var(--hex-nav-link-hover-color, #2563eb); transition: width 240ms ease; } .nav-link:hover::after { width: 100%; } /* Header nav / logo. */ .site-nav { display: flex; align-items: center; gap: 36px; height: 74px; } .site-logo { display: inline-flex; align-items: center; } .site-logo-img { display: block; height: 32px; width: auto; } .footer-grid .site-logo { margin-bottom: 18px; } .site-tel { color: var(--hex-color-secondary); } .lbl-short { display: none; } /* Eyebrow / lede text utilities. */ .eyebrow { letter-spacing: .14em; text-transform: uppercase; color: var(--hex-color-muted-text); display: block; margin-bottom: 20px; } .eyebrow b { color: var(--hex-color-accent); font-weight: 450; } .dark-band .eyebrow, .form-split-side .eyebrow { color: color-mix(in srgb, var(--hex-color-inverse-text) 50%, transparent); } .dark-band .eyebrow b { color: var(--hex-color-primary-light); } .lede { color: var(--hex-color-secondary); max-width: 58ch; line-height: 1.68; } .dark-band .lede { color: color-mix(in srgb, var(--hex-color-inverse-text) 72%, transparent); } .hero .lede { margin-top: 26px; } .dark-band-grid .lede { margin-top: 20px; } .sec-head p { margin-top: 18px; } .accent-text { font-style: italic; color: var(--hex-color-accent); } section { padding: var(--hex-section-padding-xl) 0; } .sec-head { max-width: 680px; margin-bottom: 56px; } /* * Page hero — a plain title/breadcrumb band for ordinary content * pages that use the parent's own header/footer (not the full * split hero + hero-card layout of .hero, which is only for the * standalone Meridian-style landing page). Generic name/pattern per * TEMPLATE-CONVERSION-GUIDE.md step 6 so any future non-landing- * page template can reuse it. */ .page-hero { padding: var(--hex-section-padding-xl) 0 var(--hex-section-padding-lg); background: var(--color-site-section-muted); } .page-hero h1 { max-width: 20ch; } .page-hero .lede { margin-top: 20px; } /* * Optional two-column variant of .page-hero — an image beside the * title/lede, for content pages that would otherwise be plain text * on an empty band. .page-hero-text is the existing text block; * .page-hero-image is new. */ .page-hero-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 48px; align-items: center; } .page-hero-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--hex-radius-lg, 16px); box-shadow: 0 24px 60px -20px rgba(20, 21, 15, .35); } .breadcrumb { display: block; margin-bottom: var(--spacing-md); color: var(--hex-color-muted-text); } .breadcrumb a { color: inherit; } .breadcrumb a:hover { color: var(--hex-color-primary); } /* Hero. */ .hero { padding: 86px 0 0; position: relative; } .hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; } .hero-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; } .hero-card { background: var(--hex-color-inverse-background); color: var(--hex-color-inverse-text); border-radius: var(--radius-md); padding: 34px 30px; position: relative; overflow: hidden; } .hero-card::after { content: ''; position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--hex-color-primary) 22%, transparent); filter: blur(50px); } .hero-card-label { letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--hex-color-inverse-text) 55%, transparent); margin-bottom: 22px; display: block; } .hero-card .hero-card-figure { line-height: 1; letter-spacing: -.03em; color: #fff; position: relative; } .hero-card .hero-card-figure em { font-style: italic; color: var(--hex-color-primary-light); } .hero-card p { color: color-mix(in srgb, var(--hex-color-inverse-text) 70%, transparent); margin-top: 12px; max-width: 26ch; } .hero-card-divider { height: 1px; background: rgba(255, 255, 255, .14); margin: 24px 0 20px; } .hero-card-stats { display: flex; gap: 26px; } .hero-card-stats b { display: block; line-height: 1.1; color: #fff; } .hero-card-stats span { color: color-mix(in srgb, var(--hex-color-inverse-text) 55%, transparent); } /* Logo strip. */ .logo-strip { margin-top: 84px; border-top: 1px solid var(--hex-color-border); border-bottom: 1px solid var(--hex-color-border); padding: 30px 0; } .logo-strip .hex-container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .logo-strip-label { max-width: 32ch; } .logo-strip-names { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; width: 100%; max-width: 100%; overflow: hidden; } .logo-strip-names span { font-weight: 600; color: var(--hex-color-muted-text); letter-spacing: -.01em; transition: color 200ms ease; } .logo-strip-names span:hover { color: var(--hex-color-body-text); } /* Numbered service rows. */ .rows { border-top: 1px solid var(--hex-color-border); } .row-item { display: grid; grid-template-columns: 70px 1.1fr 1.4fr auto; gap: 32px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--hex-color-border); transition: background 220ms ease; position: relative; } .row-item:hover { background: var(--hex-card-background, #fff); } .row-item-num { color: var(--hex-color-accent); padding-top: 6px; } .row-item-desc { color: var(--hex-color-secondary); padding-top: 5px; } .row-item-desc ul { list-style: none; margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } .row-item-go { align-self: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hex-color-border-strong); display: grid; place-items: center; transition: background 200ms ease, border-color 200ms ease; } .row-item-go .icon { color: var(--hex-color-body-text); } .row-item:hover .row-item-go { background: var(--hex-color-primary); border-color: var(--hex-color-primary); } .row-item:hover .row-item-go .icon { color: #fff; } /* * Services section image — sits beside the section intro * (eyebrow/heading/lede) only, not the full row list below it. */ .services-head-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: center; margin-bottom: 56px; } .services-head-grid .sec-head { margin-bottom: 0; } .services-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--hex-radius-lg, 16px); transform: rotate(-4deg); box-shadow: 0 24px 60px -20px rgba(20, 21, 15, .35); } /* Dark band section. */ .dark-band { background: var(--hex-color-inverse-background); color: var(--hex-color-inverse-text); } .dark-band h2 { color: #fff; } .dark-band h4 { color: #fff; } .dark-band-cta { margin-top: 32px; } .dark-band-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; } .feature-list { display: grid; border-top: 1px solid rgba(255, 255, 255, .14); } .feature-list > div { padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: 26px 1fr; gap: 18px; } .feature-list-index { color: var(--hex-color-primary-light); padding-top: 4px; } .feature-list p { color: color-mix(in srgb, var(--hex-color-inverse-text) 66%, transparent); } /* Platform (AI & Technology) image, shown after the CTA button. */ .dark-band-image { margin-top: 32px; } .dark-band-image img { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--hex-radius-lg, 16px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); } /* Stats grid. */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hex-color-border); border-bottom: 1px solid var(--hex-color-border); } .stats-grid > div { padding: 44px 30px 40px; border-right: 1px solid var(--hex-color-border); } .stats-grid > div:last-child { border-right: 0; } .stats-grid span { color: var(--hex-color-muted-text); display: block; max-width: 22ch; } .stats-figure { display: block; line-height: 1; letter-spacing: -.03em; margin-bottom: 12px; color: var(--hex-color-body-text); } .stats-figure em { font-style: italic; color: var(--hex-color-accent); } /* Brand cards grid — layout only, .card supplies background/border/radius. */ .brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .brand-card { padding: 36px 32px; transition: border-color 220ms ease, transform 220ms ease; } .brand-card:hover { border-color: var(--hex-color-border-strong); transform: translateY(-3px); } .brand-card-logo { display: block; height: 36px; width: auto; margin-bottom: 20px; } .brand-card .tag { letter-spacing: .13em; text-transform: uppercase; color: var(--hex-color-muted-text); display: block; margin-bottom: 16px; } .brand-card p { color: var(--hex-color-secondary); margin-bottom: 24px; } .brand-card .brand-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--hex-color-border); } .brand-card .brand-foot small { color: var(--hex-color-muted-text); } .brand-foot-images { display: flex; align-items: center; gap: 12px; } .brand-foot-images img { height: 22px; width: auto; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hex-color-primary); } .link-arrow .icon { color: inherit; } .link-arrow:hover .icon { transform: translateX(3px); } /* Pull quote — single slide's visual treatment, reused inside the testimonial carousel below (.quote-carousel wraps 1+ .quote-slide). */ .quote-slide { flex: 0 0 100%; min-width: 0; background: var(--hex-color-muted); border-radius: var(--radius-md); padding: 56px 52px; display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; } .quote-mark { line-height: .7; color: var(--hex-color-accent); opacity: .9; } .quote-slide p { line-height: 1.3; letter-spacing: -.015em; color: var(--hex-color-body-text); } .quote-who { margin-top: 22px; color: var(--hex-color-muted-text); } /* Testimonial carousel — wraps 2+ .quote-slide. Reveal animation (site-animate.js) targets this wrapper, not the individual slides, since slides past the first sit outside the track's visible area and would otherwise never be marked in-view. With JS off/blocked, translateX() is never applied, so the first slide alone shows in normal flow — same as the original static pull-quote. */ .quote-carousel { position: relative; } .quote-carousel-track { overflow: hidden; } .quote-carousel-slides { display: flex; transition: transform .5s ease; } .quote-carousel-nav { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; } .quote-carousel-dot { width: 9px; height: 9px; border-radius: 999px; border: none; padding: 0; background: var(--hex-color-border); cursor: pointer; transition: background .2s ease, transform .2s ease; } .quote-carousel-dot.is-active { background: var(--hex-color-accent); transform: scale(1.25); } .quote-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--hex-color-border); background: var(--hex-color-body-background); color: var(--hex-color-body-text); cursor: pointer; z-index: 1; } .quote-carousel-arrow:hover { border-color: var(--hex-color-accent); color: var(--hex-color-accent); } .quote-carousel-prev { left: -22px; } .quote-carousel-next { right: -22px; } /* Compliance box — layout only, .card supplies background/border/radius. */ .compliance-box { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-top: 26px; padding: 34px 36px; } .compliance-box p { color: var(--hex-color-secondary); max-width: 62ch; } .badge-row { display: flex; gap: 10px; flex-wrap: wrap; } .compliance-badges-img { max-width: 300px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--hex-radius-lg, 16px); } /* Two paths split. */ .paths-split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hex-color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; } .path-card { padding: 44px 40px; border-right: 1px solid var(--hex-color-border); transition: background 220ms ease; } .path-card:last-child { border-right: 0; } .path-card:hover { background: var(--hex-color-muted); } .path-card .path-k { letter-spacing: .13em; text-transform: uppercase; color: var(--hex-color-accent); display: block; margin-bottom: 16px; } .path-card p { color: var(--hex-color-secondary); margin-bottom: 26px; min-height: 52px; } /* Contact form split — layout only, .card supplies the outer box. */ .form-split { display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; padding: 0; } .form-split-side { padding: 48px 42px; background: var(--hex-color-inverse-background); color: var(--hex-color-inverse-text); display: flex; flex-direction: column; justify-content: space-between; } .form-split-side h2 { color: #fff; margin-bottom: 16px; } .form-split-side p { color: color-mix(in srgb, var(--hex-color-inverse-text) 72%, transparent); } .form-split-side .contact-list { margin-top: 40px; display: grid; gap: 14px; color: color-mix(in srgb, var(--hex-color-inverse-text) 85%, transparent); } .form-split-side .contact-list div { display: flex; gap: 12px; align-items: center; } .form-split-side .contact-list .icon { color: var(--hex-color-primary-light); } .form-split form { padding: 48px 42px; display: grid; gap: 18px; } .form-split .form-label { font-weight: 600; margin-bottom: 7px; } .form-split select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%23807F74' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; } .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fine-print { color: var(--hex-color-muted-text); } label i { color: var(--hex-color-accent); font-style: normal; } /* Footer grid. */ footer { background: var(--hex-color-inverse-background); color: color-mix(in srgb, var(--hex-color-inverse-text) 75%, transparent); padding: 72px 0 32px; } footer a { color: color-mix(in srgb, var(--hex-color-inverse-text) 78%, transparent); } footer a:hover { color: var(--hex-color-primary-light); } footer h5 { color: color-mix(in srgb, var(--hex-color-inverse-text) 45%, transparent); margin-bottom: 18px; text-transform: uppercase; } footer ul { list-style: none; display: grid; gap: 11px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; } .footer-blurb { max-width: 36ch; } .footer-subheading { margin-top: 26px; } .footer-bottom { margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: color-mix(in srgb, var(--hex-color-inverse-text) 50%, transparent); } /* * Brand intro — a centered brand logo image + short blurb, for a * page opening on one specific comparison brand rather than the * shared .page-hero title band. Generic name/pattern per * TEMPLATE-CONVERSION-GUIDE.md step 6 so any future brand-led page * can reuse it. Markup: *
    *
    * *

    Blurb

    *
    *
    */ .brand-intro { padding: var(--hex-section-padding-xl) 0 var(--hex-section-padding-lg); text-align: center; background: var(--color-site-section-muted); } .brand-intro .hex-container { max-width: 640px; } .brand-intro-logo { display: block; margin: 0 auto var(--hex-spacing-lg, 32px); max-height: 56px; width: auto; } /* * Step cards — a 3-up row of numbered cards, for a short ordered * process (e.g. template-broadband.php's "How it works" section) * where each step is equally weighted rather than a linked, * full-width list like .rows/.row-item. Built on the existing * .card component rather than a parallel lookalike. Markup: *
    *
    * ... * 01 *

    Title

    *

    Desc

    *
    *
    */ .step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hex-spacing-lg, 32px); } .step-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--hex-color-primary) 14%, transparent); color: var(--hex-color-primary); margin-bottom: var(--hex-spacing-md, 24px); } .step-card-icon .icon { color: inherit; } .step-card-num { display: block; color: var(--hex-color-accent); margin-bottom: var(--hex-spacing-sm, 16px); } .step-card h3 { margin-bottom: var(--hex-spacing-xs, 8px); } .step-card p { color: var(--hex-color-secondary); } /* * Responsive breakpoints for the Meridian layout. Font-size is * never touched here — every text element already carries one of * the 11 fluid .hex-* classes, which scale continuously on their * own; a breakpoint only ever needs to change layout (grid * columns, gaps, padding, show/hide), never re-declare a size. */ @media (max-width: 1000px) { .hero-inner, .dark-band-grid, .form-split, .compliance-box, .services-head-grid, .page-hero-grid { grid-template-columns: 1fr; gap: 40px; } .page-hero-image { order: -1; } .brand-grid, .paths-split, .step-cards { grid-template-columns: 1fr; } .services-image { order: -1; } .services-image img { transform: none; max-width: 420px; margin: 0 auto; } .path-card { border-right: 0; border-bottom: 1px solid var(--hex-color-border); } .stats-grid { grid-template-columns: 1fr 1fr; } .stats-grid > div:nth-child(2) { border-right: 0; } .row-item { grid-template-columns: 44px 1fr; gap: 8px 18px; padding: 28px 0; } .row-item-go { display: none; } .row-item-desc { grid-column: 2; padding-top: 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .site-nav .nav-menu { display: none; } section { padding: 76px 0; } .form-split-side, .form-split form { padding: 34px 26px; } .quote-slide { padding: 36px 28px; grid-template-columns: 1fr; } .quote-carousel-arrow { display: none; } } @media (max-width: 760px) { .logo-strip .hex-container { gap: 20px; } .logo-strip-names { gap: 8px 20px; width: 100%; } .site-nav { gap: 14px; height: 64px; } .site-tel, .lbl-long { display: none; } .lbl-short { display: inline; } .site-nav .btn { padding: 9px 16px; } } @media (max-width: 560px) { .hex-container { padding-inline: 20px; } .stats-grid { grid-template-columns: 1fr; } .stats-grid > div { border-right: 0; border-bottom: 1px solid var(--hex-color-border); } .footer-grid { grid-template-columns: 1fr; } .hero { padding-top: 56px; } .hero-cta .btn { flex: 1 1 100%; justify-content: center; } } /* * Site-wide scroll-reveal animation, driven by * assets/js/site-animate.js — applies to every template via bare * structural selectors (section/.hero/.page-hero/.brand-intro/ * .card/.path-card/.sec-head/.form-split/.compliance-box/ * .quote-carousel/.accordion-item/.stats-grid > div), not per-template * markup, so no template file needed editing to pick it up. * Progressive enhancement: content only ever gets hidden once JS * confirms it's running (document.documentElement carries * .hex-anim-ready, added by site-animate.js on DOMContentLoaded) — * with JS off, blocked, or unsupported, everything stays fully * visible. site-animate.js itself skips entirely when the visitor * has prefers-reduced-motion set, so .hex-anim-ready is never added * for them either. */ .hex-anim-ready .hex-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; } .hex-anim-ready .hex-reveal.hex-in-view { opacity: 1; transform: none; } }