/**
* Site Engine — base design-system stylesheet.
*
* The foundation every generated page inherits. It maps the per-client design
* tokens (the `--se-*` custom properties SE_Design emits into ) onto the
* semantic HTML the generator produces, so pages look branded without any
* per-page CSS. Enqueued on routed pages before the client repo's own
* assets/css/main.css, which may override anything here.
*
* Scoped under .se-page (the shell body class) so it never touches wp-admin or
* the active theme.
*/
.se-page {
--se-max-width: 72rem;
--se-measure: 44rem;
margin: 0;
overflow-x: clip;
color: var( --se-color-text, #0f172a );
background: var( --se-color-bg, #ffffff );
font-family: var( --se-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif );
font-size: var( --se-body-size, 1.05rem );
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.se-page *,
.se-page *::before,
.se-page *::after {
box-sizing: border-box;
}
.se-page main {
display: block;
max-width: var( --se-max-width );
margin: 0 auto;
padding: 2.5rem 1.25rem 4rem;
}
.se-page main > section {
margin-top: var( --se-section-gap, 2.75rem );
}
/* Typography */
.se-page h1,
.se-page h2,
.se-page h3,
.se-page h4 {
font-family: var( --se-font-heading, var( --se-font-body, system-ui, sans-serif ) );
color: var( --se-color-text, #0f172a );
line-height: 1.2;
margin: 0 0 0.5em;
text-wrap: balance;
}
.se-page h1 {
font-size: var( --se-h1, clamp( 2rem, 4vw, 3rem ) );
margin-bottom: 0.75rem;
}
.se-page h2 {
font-size: var( --se-h2, clamp( 1.5rem, 2.6vw, 2rem ) );
margin-top: 0.5em;
}
.se-page h3 {
font-size: var( --se-h3, 1.3rem );
}
.se-page h4 {
font-size: var( --se-h4, 1.05rem );
}
.se-page p,
.se-page ul,
.se-page ol {
max-width: var( --se-measure );
margin: 0 0 1.1rem;
}
.se-page li {
margin-bottom: 0.4rem;
}
.se-page a {
color: var( --se-color-primary, #2563eb );
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.se-page a:hover {
text-decoration: none;
}
/* Call-to-action button (generator marks primary CTAs with .se-button) */
.se-page .se-button {
display: inline-block;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.7rem 1.4rem;
background: var( --se-color-primary, #2563eb );
color: #fff;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border-radius: var( --se-radius, 8px );
transition: filter 0.15s ease;
}
.se-page .se-button:hover {
filter: brightness( 0.92 );
text-decoration: none;
}
/*
* Section vocabulary — the building blocks the generator composes pages from
* (se-hero, se-section, se-grid/se-card, se-cta, se-faq, se-contact). This is
* the always-works baseline; a per-client design.css (generated from the design
* direction) layers on top to give each site its own look.
*/
/* Hero: full-bleed band; with an ![]()
it becomes a
cover photo with a dark overlay and white text over it. */
.se-page .se-hero {
position: relative;
margin-left: calc( 50% - 50vw );
margin-right: calc( 50% - 50vw );
width: 100vw;
padding: clamp( 3rem, 8vw, 6.5rem ) max( 1.25rem, calc( 50vw - var( --se-max-width ) / 2 + 1.25rem ) );
margin-top: 0;
overflow: hidden;
background: var( --se-color-secondary, #1e293b );
color: #fff;
isolation: isolate;
}
.se-page .se-hero__media {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
}
.se-page .se-hero:has( .se-hero__media )::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient( 100deg, rgba( 0, 0, 0, 0.72 ), rgba( 0, 0, 0, 0.35 ) 60%, rgba( 0, 0, 0, 0.15 ) );
}
.se-page .se-hero > :not( .se-hero__media ) {
max-width: var( --se-measure );
}
.se-page .se-hero h1 {
color: #fff;
font-size: clamp( 2.2rem, 5vw, 3.4rem );
}
.se-page .se-hero > p:first-of-type,
.se-page .se-hero p {
font-size: 1.2rem;
max-width: var( --se-measure );
color: rgba( 255, 255, 255, 0.9 );
}
.se-page .se-hero a:not( .se-button ) {
color: #fff;
}
/* Hero CTAs pop in the accent color against the dark/photo hero. */
.se-page .se-hero .se-button {
background: var( --se-color-accent, #f59e0b );
color: #fff;
}
.se-page .se-hero .se-button + .se-button {
background: transparent;
box-shadow: inset 0 0 0 2px rgba( 255, 255, 255, 0.7 );
}
.se-page .se-section--alt {
background: color-mix( in srgb, var( --se-color-primary, #2563eb ) 5%, transparent );
border-radius: var( --se-radius-lg, 14px );
padding: 2rem 1.75rem;
}
/* Split: image beside text (or text beside image). */
.se-page .se-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
max-width: none;
margin: 3rem 0;
}
.se-page .se-split__media {
width: 100%;
max-width: none;
margin: 0;
border-radius: var( --se-radius-lg, 14px );
aspect-ratio: 4 / 3;
object-fit: cover;
box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 );
}
@media ( max-width: 720px ) {
.se-page .se-split {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.se-page .se-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
gap: 1.5rem;
max-width: none;
margin: 1.5rem 0;
padding: 0;
list-style: none;
}
.se-page .se-card {
margin: 0;
padding: 1.5rem;
background: var( --se-color-bg, #fff );
border: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 10%, transparent );
border-radius: var( --se-radius, 14px );
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
overflow: hidden;
}
/* An image as the first child of a card runs edge-to-edge at the top. */
.se-page .se-card__media {
display: block;
width: calc( 100% + 3rem );
max-width: none;
margin: -1.5rem -1.5rem 1.25rem;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.se-page .se-card > :last-child {
margin-bottom: 0;
}
/* Standalone image block. */
.se-page .se-media {
max-width: none;
margin: 2.5rem 0;
}
.se-page .se-media img {
width: 100%;
border-radius: var( --se-radius-lg, 14px );
}
.se-page main > .se-hero:first-child {
margin-top: -2.5rem;
}
.se-page .se-cta {
margin: 3rem 0 1rem;
padding: 2.25rem 1.75rem;
text-align: center;
background: color-mix( in srgb, var( --se-color-primary, #2563eb ) 10%, transparent );
border-radius: var( --se-radius-lg, 16px );
}
.se-page .se-cta > * {
margin-left: auto;
margin-right: auto;
}
.se-page .se-faq > * + * {
margin-top: 0.5rem;
}
.se-page .se-faq h3 {
margin-top: 1.5rem;
font-size: 1.15rem;
}
.se-page .se-contact {
display: flex;
flex-wrap: wrap;
gap: 1.5rem 3rem;
align-items: start;
}
/* Accents */
.se-page blockquote {
margin: 1.5rem 0;
padding: 0.75rem 1.25rem;
border-left: 4px solid var( --se-color-accent, #f59e0b );
background: color-mix( in srgb, var( --se-color-accent, #f59e0b ) 8%, transparent );
font-style: italic;
}
.se-page address {
font-style: normal;
line-height: 1.5;
}
.se-page img {
max-width: 100%;
height: auto;
}
.se-page hr {
border: 0;
border-top: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 12%, transparent );
margin: 2.5rem 0;
}
/* Reusable parts: header + footer chrome */
.se-header,
.se-footer {
max-width: var( --se-max-width );
margin: 0 auto;
padding: 1.25rem;
}
.se-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
border-bottom: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 10%, transparent );
}
.se-header__brand {
font-family: var( --se-font-heading, sans-serif );
font-size: 1.25rem;
font-weight: 700;
text-decoration: none;
color: var( --se-color-text, #0f172a );
}
.se-header nav ul,
.se-footer nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
max-width: none;
}
.se-header__nav {
margin-left: auto;
}
/* ---- Header menu + mega menu (used by the header part) ---- */
.se-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.se-menu__item {
position: relative;
}
.se-menu__item > a {
display: inline-block;
padding: 0.5rem 0;
font-weight: 500;
text-decoration: none;
color: var( --se-color-text, #0f172a );
}
.se-menu__item > a:hover {
color: var( --se-color-primary, #2563eb );
}
/* The dropdown / mega panel. */
.se-mega {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 520px;
max-width: 90vw;
padding: 1.25rem;
background: var( --se-color-background, #fff );
border: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 12%, transparent );
border-radius: var( --se-radius-lg, 12px );
box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.14 );
opacity: 0;
visibility: hidden;
transform: translateY( 6px );
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.se-menu__item--has-mega:hover > .se-mega,
.se-menu__item--has-mega:focus-within > .se-mega,
.se-menu__item--has-mega.is-open > .se-mega {
opacity: 1;
visibility: visible;
transform: translateY( 0 );
}
.se-mega__cols {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
gap: 1.5rem;
}
.se-mega__cols--2 {
grid-template-columns: repeat( 2, 1fr );
}
.se-mega__cols--3 {
grid-template-columns: repeat( 3, 1fr );
}
.se-mega__cols--4 {
grid-template-columns: repeat( 4, 1fr );
}
.se-mega__title {
margin: 0 0 0.5rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: color-mix( in srgb, var( --se-color-text, #0f172a ) 60%, transparent );
}
.se-mega__col ul {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
max-width: none;
}
.se-mega__col a {
text-decoration: none;
color: var( --se-color-text, #0f172a );
}
.se-mega__col a:hover {
color: var( --se-color-primary, #2563eb );
}
.se-mega__col--feature {
padding: 1rem;
background: color-mix( in srgb, var( --se-color-primary, #2563eb ) 8%, transparent );
border-radius: var( --se-radius, 8px );
}
.se-mega__media {
width: 100%;
margin-bottom: 0.5rem;
border-radius: var( --se-radius, 8px );
}
/* Mobile hamburger (shown only on small screens). */
.se-header__toggle {
display: none;
margin-left: auto;
padding: 0.4rem 0.6rem;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
background: transparent;
border: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 20%, transparent );
border-radius: 6px;
color: var( --se-color-text, #0f172a );
}
@media ( max-width: 860px ) {
.se-header__toggle {
display: inline-block;
}
.se-header__nav {
display: none;
flex-basis: 100%;
margin-left: 0;
}
.se-header__nav.is-open {
display: block;
}
.se-menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.se-menu__item {
border-top: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 8%, transparent );
}
.se-mega {
position: static;
display: none;
min-width: 0;
padding: 0 0 0.75rem 1rem;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.se-menu__item--has-mega.is-open > .se-mega {
display: block;
}
.se-mega__cols,
.se-mega__cols--2,
.se-mega__cols--3,
.se-mega__cols--4 {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* A caret on dropdown/mega items, rotating when open. */
.se-menu__item--has-mega > a::after {
content: "";
display: inline-block;
width: 0.6em;
height: 0.6em;
margin-left: 0.3em;
vertical-align: middle;
background-color: currentColor;
transition: transform 0.15s ease;
-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" ) no-repeat center / contain;
mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" ) no-repeat center / contain;
}
.se-menu__item--has-mega:hover > a::after,
.se-menu__item--has-mega:focus-within > a::after,
.se-menu__item--has-mega.is-open > a::after {
transform: rotate( 180deg );
}
/* Sticky header (add class "se-header--sticky" to the header). */
.se-header--sticky {
position: sticky;
top: 0;
z-index: 100;
background: var( --se-color-background, #fff );
transition: box-shadow 0.2s ease;
}
.se-header--sticky.is-scrolled {
box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.08 );
}
/* ---- Inline icon set (colored by the surrounding text via currentColor) ----
Use: . */
.se-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.se-icon--phone {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E" );
}
.se-icon--calendar {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E" );
}
.se-icon--location {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E" );
}
.se-icon--clock {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E" );
}
.se-icon--arrow {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E" );
}
.se-icon--check {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E" );
}
.se-icon--star {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E" );
}
.se-icon--email {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22 6 12 13 2 6'/%3E%3C/svg%3E" );
}
.se-icon--search {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E" );
}
.se-icon--heart {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E" );
}
.se-icon--shield {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E" );
}
.se-icon--award {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E" );
}
.se-icon--facebook {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E" );
}
.se-icon--instagram {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E" );
}
.se-icon--youtube {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E" );
}
.se-icon--linkedin {
-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E" );
mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E" );
}
/* ---- Reveal-on-scroll (add class "se-reveal"; JS adds "is-visible") ---- */
.se-reveal {
opacity: 0;
transform: translateY( 18px );
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
.se-reveal.is-visible {
opacity: 1;
transform: none;
}
/* Staggered reveal: direct children rise in sequence as the block appears. */
.se-reveal--stagger.is-visible > * {
animation: se-rise 0.6s ease both;
}
.se-reveal--stagger.is-visible > :nth-child( 2 ) {
animation-delay: 0.08s;
}
.se-reveal--stagger.is-visible > :nth-child( 3 ) {
animation-delay: 0.16s;
}
.se-reveal--stagger.is-visible > :nth-child( 4 ) {
animation-delay: 0.24s;
}
.se-reveal--stagger.is-visible > :nth-child( n + 5 ) {
animation-delay: 0.32s;
}
@keyframes se-rise {
from {
opacity: 0;
transform: translateY( 16px );
}
to {
opacity: 1;
transform: none;
}
}
/* ---- Numbered editorial eyebrow (section wayfinding label) ---- */
.se-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.9rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix( in srgb, var( --se-color-primary, #2563eb ) 75%, var( --se-color-text, #1c1917 ) );
}
.se-eyebrow__num {
font-variant-numeric: tabular-nums;
color: var( --se-color-primary, #2563eb );
}
.se-eyebrow::after {
content: "";
width: 2rem;
height: 1px;
background: currentColor;
opacity: 0.4;
}
.se-page .se-section--contrast .se-eyebrow,
.se-page .se-section--contrast .se-eyebrow__num {
color: #fff;
}
/* ---- High-contrast band: a full-bleed dark section for rhythm/contrast ---- */
.se-page .se-section--contrast {
position: relative;
background: var( --se-color-secondary, #1e293b );
color: #fff;
border-radius: var( --se-radius-lg, 14px );
padding: 3rem 2rem;
margin: 3.5rem 0;
}
.se-page .se-section--contrast :is( h1, h2, h3, h4, p, li, blockquote ) {
color: #fff;
}
.se-page .se-section--contrast a:not( .se-button ) {
color: #fff;
text-decoration: underline;
}
.se-page .se-section--contrast .se-card {
background: color-mix( in srgb, #fff 8%, transparent );
border-color: color-mix( in srgb, #fff 16%, transparent );
color: #fff;
}
.se-page .se-section--contrast .se-button {
background: #fff;
color: var( --se-color-primary, #2563eb );
border-color: #fff;
}
@media ( prefers-reduced-motion: reduce ) {
.se-reveal {
opacity: 1;
transform: none;
transition: none;
}
.se-reveal--stagger.is-visible > * {
animation: none;
}
}
/* ---- Lightbox (an around a thumb) ---- */
.se-lightbox {
display: inline-block;
cursor: zoom-in;
}
.se-lightbox__overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: rgba( 0, 0, 0, 0.85 );
cursor: zoom-out;
}
.se-lightbox__overlay img {
max-width: 100%;
max-height: 90vh;
border-radius: 6px;
box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}
/* ---- Carousel (JS adds arrows + dots; degrades to a scroll row) ---- */
.se-carousel {
position: relative;
}
.se-carousel__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1.5rem;
scrollbar-width: none;
}
.se-carousel__track::-webkit-scrollbar {
display: none;
}
.se-carousel__slide {
flex: 0 0 100%;
scroll-snap-align: center;
min-width: 0;
}
.se-carousel__btn {
position: absolute;
top: 50%;
transform: translateY( -50% );
z-index: 2;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix( in srgb, var( --se-color-text, #0f172a ) 15%, transparent );
border-radius: 50%;
background: var( --se-color-background, #fff );
color: var( --se-color-text, #0f172a );
cursor: pointer;
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
}
.se-carousel__btn--prev {
left: -0.5rem;
}
.se-carousel__btn--next {
right: -0.5rem;
}
.se-carousel__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.se-carousel__dot {
width: 0.6rem;
height: 0.6rem;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix( in srgb, var( --se-color-text, #0f172a ) 25%, transparent );
cursor: pointer;
}
.se-carousel__dot.is-active {
background: var( --se-color-primary, #2563eb );
}
/* ---- Map embed ---- */
.se-map {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var( --se-radius, 8px );
}
/* ---- Announcement bar (place above the header) ---- */
.se-announce {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.55rem 1rem;
font-size: 0.9rem;
text-align: center;
background: var( --se-color-primary, #2563eb );
color: #fff;
}
.se-announce.is-dismissed {
display: none;
}
.se-announce a {
color: #fff;
text-decoration: underline;
}
.se-announce__close {
margin-left: auto;
background: transparent;
border: 0;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
/* ---- Animated backgrounds (add to a hero or CTA section) ---- */
/* A slowly shifting brand-color gradient; text turns white for contrast. */
.se-bg-gradient {
position: relative;
overflow: hidden;
background: linear-gradient(
120deg,
var( --se-color-primary, #2563eb ),
var( --se-color-accent, #f59e0b ),
var( --se-color-secondary, #1e293b ),
var( --se-color-primary, #2563eb )
);
background-size: 300% 300%;
animation: se-gradient-shift 18s ease infinite;
}
.se-bg-gradient,
.se-bg-gradient h1,
.se-bg-gradient h2,
.se-bg-gradient h3,
.se-bg-gradient p,
.se-bg-gradient a {
color: #fff;
}
.se-bg-gradient .se-button {
background: #fff;
color: var( --se-color-primary, #2563eb );
border-color: #fff;
}
@keyframes se-gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Soft drifting color "aurora" blobs behind the content. */
.se-bg-aurora {
position: relative;
overflow: hidden;
isolation: isolate;
}
.se-bg-aurora::before,
.se-bg-aurora::after {
content: "";
position: absolute;
z-index: -1;
width: 45vw;
height: 45vw;
border-radius: 50%;
filter: blur( 60px );
opacity: 0.4;
}
.se-bg-aurora::before {
top: -12%;
left: -6%;
background: var( --se-color-primary, #2563eb );
animation: se-blob-a 16s ease-in-out infinite;
}
.se-bg-aurora::after {
right: -6%;
bottom: -16%;
background: var( --se-color-accent, #f59e0b );
animation: se-blob-b 20s ease-in-out infinite;
}
@keyframes se-blob-a {
0%,
100% {
transform: translate( 0, 0 );
}
50% {
transform: translate( 10%, 8% );
}
}
@keyframes se-blob-b {
0%,
100% {
transform: translate( 0, 0 );
}
50% {
transform: translate( -8%, -10% );
}
}
/* A drifting multi-point "mesh" gradient built from the brand palette. */
.se-bg-mesh {
position: relative;
overflow: hidden;
background-color: var( --se-color-secondary, #1e293b );
background-image:
radial-gradient( at 20% 20%, var( --se-color-primary, #2563eb ) 0, transparent 50% ),
radial-gradient( at 80% 15%, var( --se-color-accent, #f59e0b ) 0, transparent 50% ),
radial-gradient( at 25% 80%, var( --se-color-accent, #f59e0b ) 0, transparent 45% ),
radial-gradient( at 75% 75%, var( --se-color-primary, #2563eb ) 0, transparent 50% );
background-size: 200% 200%;
animation: se-mesh-drift 22s ease-in-out infinite;
}
.se-bg-mesh,
.se-bg-mesh h1,
.se-bg-mesh h2,
.se-bg-mesh h3,
.se-bg-mesh p,
.se-bg-mesh a {
color: #fff;
}
.se-bg-mesh .se-button {
background: #fff;
color: var( --se-color-primary, #2563eb );
border-color: #fff;
}
@keyframes se-mesh-drift {
0%,
100% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
}
/* A vanilla-canvas particle constellation; the script injects the