/* ==== SynMax Intelligence — brand stylesheet ==== */ /* ==== 0. FONTS ==== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-semibold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-bold.woff2') format('woff2'); } @font-face { font-family: 'Inter Fallback'; font-weight: 400; src: local('Arial'); size-adjust: 107.32%; ascent-override: 90.26%; descent-override: 22.48%; line-gap-override: 0.00%; } @font-face { font-family: 'Inter Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.06%; ascent-override: 95.86%; descent-override: 23.87%; line-gap-override: 0.00%; } @font-face { font-family: 'Inter Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.96%; ascent-override: 95.02%; descent-override: 23.66%; line-gap-override: 0.00%; } @font-face { font-family: 'Inter Fallback 2'; font-weight: 400; src: local('Roboto'); size-adjust: 107.07%; ascent-override: 90.48%; descent-override: 22.53%; line-gap-override: 0.00%; } @font-face { font-family: 'Inter Fallback 2'; font-weight: 600; src: local('Roboto Medium'), local('Roboto-Medium'); size-adjust: 108.05%; ascent-override: 89.65%; descent-override: 22.32%; line-gap-override: 0.00%; } @font-face { font-family: 'Inter Fallback 2'; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 108.42%; ascent-override: 89.35%; descent-override: 22.25%; line-gap-override: 0.00%; } /* ==== 1. TOKENS (:root) ==== */ :root { --sm-deep: #161F2D; --sm-royal: #001857; --sm-night: #05080F; --sm-white: #FFFFFF; --sm-body-dark: #C7D1E0; --sm-mute: #C2C6D8; --sm-edge: #E9E9E9; --sm-hud: #B2BFD1; --sm-paper: #FFFFFF; --sm-ink: #0E1722; --sm-ink-soft: #55657A; --sm-card: #F4F6F9; --sm-hairline: #E3E7ED; --sm-mist: #97A4B6; --sm-slate: #262F3F; --sm-steel: #5E6E82; --sm-theia: #00A1E1; --sm-hyperion: #00E96C; --sm-vulcan: #F85849; --sm-accent: var(--sm-theia); --sm-accent-rgb: 0,161,225; --sm-accent-deep-rgb: 4,90,129; --sm-grad-a: #00A1E1; --sm-grad-b: #00E96C; --sm-grad: linear-gradient(135deg, var(--sm-grad-a) 0%, var(--sm-grad-b) 100%); --sm-title-silver: linear-gradient(178.82deg, #FFFFFF 0%, #FFFFFF 79.26%, rgba(141,141,141,0.4) 100%); --sm-fs-display: clamp(46px, 5vw, 104px); --sm-lh-display: 1.0; --sm-fs-h1: clamp(38px, 5vw, 76px); --sm-lh-h1: 0.97; --sm-fs-h1-small: clamp(38px, 5vw, 68px); --sm-lh-h1-small: 0.97; --sm-fs-h2: clamp(29px, 5vw, 48px);/*48*/ --sm-lh-h2: 1.21; --sm-fs-h2-small: clamp(29px, 5vw, 40px); --sm-fs-h3: clamp(26px, 2.6vw, 32px); /*26*/ --sm-lh-h3: 1.15; --sm-fs-h4: clamp(21px, 2.6vw, 26px); --sm-lh-h4: 1.15; --sm-fs-h5: clamp(21px, 2.6vw, 24px); --sm-lh-h5: 1.15; --sm-fs-h6: clamp(18px, 2.6vw, 20px); --sm-lh-h6: 1.15; --sm-fs-lead: clamp(18px, 2.2vw, 22px); --sm-lh-lead: 1.42; --sm-fs-body: 18px; --sm-lh-body: 1.5; --sm-fs-p2: 16px; --sm-lh-p2: 1.37; --sm-fs-small: 15px; --sm-fs-split-sub: 14px; --sm-lh-split-sub: 1.25; --sm-fs-split-track: 10px; --sm-lh-split-track: 1; --sm-fs-eyebrow: 13px; --sm-fs-tagline: 12px; --sm-lh-tagline: 1.6; /*buttons*/ --sm-fs-nav-link: 14px; --sm-lh-nav-link: 1.3; --sm-fs-btn: 18px; --sm-lh-btn: 1.4; --sm-page: 1440px; --sm-container: 1248px; --sm-gutter: 96px; --sm-section-py: 120px; --sm-section-gap:40px; --sm-nav-h: 95px; --sm-radius-sm: 2px; --sm-radius-md: 4px; --sm-radius-lg: 8px; --sm-stroke-card: 1px; /* Every viewfinder bracket on all three sites derives from this one token (.sm-bracket::before --_bt). Was 2.29px = the Figma kit's TOK.stroke.bracket; thinned to the kit's hairline weight 2026-08-01 at request — brackets read as precision chrome, and 2.29 was landing heavy next to the 1px card outlines. */ --sm-stroke-bracket: 1px; --sm-border-alpha: 0.2; --sm-font: 'Graphie', 'Inter', 'Inter Fallback', 'Inter Fallback 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Mobile tokens — Figma "SynMax Maritime — Homepage (Dark) Mobile" (3731:11296): 24px gutters, 32px band padding, 30px section rhythm, 60px nav pill at top 31. */ @media (max-width: 600px) { :root { --sm-gutter: 24px; --sm-section-py: 32px; --sm-section-gap: 30px; --sm-nav-h: 91px; } } /* ==== 2. BASE ==== */ .synmax *, .synmax *::before, .synmax *::after, .editor-styles-wrapper .sm-section *, .editor-styles-wrapper .sm-section *::before, .editor-styles-wrapper .sm-section *::after { box-sizing: border-box; } .sm-section .wp-block-group > *, .sm-footer .wp-block-group > * { margin-block-start: 0; margin-top: 0; margin-bottom: 0; } body .wp-site-blocks > *, main.sm-main > * { margin-block-start: 0; margin-top: 0; } :root:root :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; } body.synmax, .editor-styles-wrapper { font-family: var(--sm-font); font-size: var(--sm-fs-body); line-height: var(--sm-lh-body); color: var(--sm-white); background: var(--sm-deep); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .synmax img { max-width: 100%; height: auto; display: block; } .synmax a { color: inherit; } /* ==== 3. SURFACES ==== */ .sm-section { background: var(--sm-deep); color: var(--sm-white); --txt: var(--sm-white); --txt-soft: var(--sm-body-dark); --card-bg: rgba(22,31,45,.28); --card-border:rgba(233,233,233,.2); --divider: rgba(234,234,234,.20); --card-divider: rgba(255,255,255,.14); --bracket: #FFFFFF; --eyebrow: #99B3D1; } .sm-section.is-light { background: var(--sm-paper); color: var(--sm-ink); --txt: var(--sm-ink); --txt-soft: var(--sm-ink-soft); --card-bg: var(--sm-paper); --card-border:rgba(38,47,63,.15); --divider: rgba(38,47,63,.18); --card-divider: rgba(38,47,63,.18); --bracket: var(--sm-slate); --eyebrow: var(--sm-steel); } /* ==== 4. SIGNATURE TREATMENTS ==== */ .sm-glass { background: rgba(22, 31, 45, 0.28); -webkit-backdrop-filter: blur(30px) saturate(115%); backdrop-filter: blur(30px) saturate(115%); border: 1px solid rgba(233, 233, 233, 0.2); border-radius: var(--sm-radius-sm); } .sm-section.is-light .sm-glass { background: var(--sm-paper); border-color: rgba(38, 47, 63, 0.15); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Viewfinder corner brackets. All four corners are painted by ::before alone — two background bars per corner, each gated by a 0/1 var — so ::after stays free for the block editor's selection ring (the old ::after corner hijacked it: a selected panel highlighted as a 28px square instead of the block). TL/BR default on, TR/BL default off; the editor's "Corner brackets" panel writes the sm-cnr-* classes below. Size feeds from --sm-bracket-size (--btn maps the legacy --bw into it), color from --bracket. */ .sm-bracket { position: relative; isolation: isolate; } /* --_bs (arm length) is registered so transitions animate the VAR, not background-size — Chromium freezes background-size transitions when the change arrives via a custom property on a pseudo-element. */ @property --_bs { syntax: ''; inherits: false; initial-value: 48px; } /* --_bc is the colour actually PAINTED. It defaults to --bracket, so nothing changes at rest, but it gives the hover state something to interpolate to without self-reference (a custom property may not reference itself, so `--bracket: var(--bracket)` would be a cycle). Registered so the colour BLENDS on hover instead of snapping. */ @property --_bc { syntax: ''; inherits: false; initial-value: #FFFFFF; } .sm-bracket::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; --_bs: var(--sm-bracket-size, 48px); --_bt: var(--sm-stroke-bracket); --_bc: var(--bracket); --_bi: linear-gradient(var(--_bc), var(--_bc)); background-image: var(--_bi), var(--_bi), var(--_bi), var(--_bi), var(--_bi), var(--_bi), var(--_bi), var(--_bi); background-repeat: no-repeat; background-position: 0 0, 0 var(--_bt), 100% 0, 100% var(--_bt), 0 100%, 0 calc(100% - var(--_bt)), 100% 100%, 100% calc(100% - var(--_bt)); background-size: calc(var(--sm-cnr-tl, 1) * var(--_bs)) var(--_bt), var(--_bt) calc(var(--sm-cnr-tl, 1) * (var(--_bs) - var(--_bt))), calc(var(--sm-cnr-tr, 0) * var(--_bs)) var(--_bt), var(--_bt) calc(var(--sm-cnr-tr, 0) * (var(--_bs) - var(--_bt))), calc(var(--sm-cnr-bl, 0) * var(--_bs)) var(--_bt), var(--_bt) calc(var(--sm-cnr-bl, 0) * (var(--_bs) - var(--_bt))), calc(var(--sm-cnr-br, 1) * var(--_bs)) var(--_bt), var(--_bt) calc(var(--sm-cnr-br, 1) * (var(--_bs) - var(--_bt))); } .sm-bracket--btn { --sm-bracket-size: var(--bw, 28px); } /* Corner-expansion hover, ported from the reference design's .corners-btn: arms grow from their resting length to a full frame and drop to 50% opacity over 1s. Only --_bs animates (it is @property-registered above precisely so the VAR interpolates — Chromium won't transition background-size driven by a custom property on a pseudo-element), so the 8 bars re-derive for free and the per-corner on/off switches keep working. Driven off .sm-bracket itself, NOT a new class: the markup is baked DB content, so a class would mean re-baking every page on all three sites. .sm-grid is the one exclusion — its resting arm is 0 (corners deliberately off), so expanding to 100% would CONJURE a full frame that isn't in the design. Per-corner switches still gate everything else: a corner set to 0 multiplies the 100% back to 0, so `off` corners stay off through the whole transition. */ body.synmax .sm-bracket:not(.sm-grid)::before { transition: --_bs 1s ease-in-out, opacity 1s ease-in-out, --_bc 1s ease-in-out; } body.synmax .sm-bracket:not(.sm-grid):is(:hover, :focus-visible)::before, body.synmax .sm-biocard:hover :is(.sm-biocard__view, .sm-biocard__panel).sm-bracket::before, body.synmax .sm-npvcard:hover .sm-npvcard__img.sm-bracket::before, body.synmax .sm-loccard:hover .sm-loccard__media.sm-bracket::before { --_bs: 100%; opacity: .5; /* Falls back to the resting colour, so brackets that are already legible are untouched. Only components whose bracket matches their own fill opt in via --sm-bracket-hover — a blanket white would erase the DARK brackets (.sm-btn--neutral #262F3F sits on a light fill and would vanish). */ --_bc: var(--sm-bracket-hover, var(--bracket)); } @media (prefers-reduced-motion: reduce) { body.synmax .sm-bracket:not(.sm-grid)::before { transition: none; } } /* Per-corner switches (doubled class so they outrank any single-class component default, and set on the pseudo so they never leak into nested brackets). */ .sm-cnr-tl-on.sm-cnr-tl-on::before { --sm-cnr-tl: 1; } .sm-cnr-tl-off.sm-cnr-tl-off::before { --sm-cnr-tl: 0; } .sm-cnr-tr-on.sm-cnr-tr-on::before { --sm-cnr-tr: 1; } .sm-cnr-tr-off.sm-cnr-tr-off::before { --sm-cnr-tr: 0; } .sm-cnr-bl-on.sm-cnr-bl-on::before { --sm-cnr-bl: 1; } .sm-cnr-bl-off.sm-cnr-bl-off::before { --sm-cnr-bl: 0; } .sm-cnr-br-on.sm-cnr-br-on::before { --sm-cnr-br: 1; } .sm-cnr-br-off.sm-cnr-br-off::before { --sm-cnr-br: 0; } .sm-brandgrid { position: relative; isolation: isolate; } .sm-brandgrid::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(94,209,255,.08) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, rgba(94,209,255,.08) 0 1px, transparent 1px 96px); mix-blend-mode: color-dodge; } .sm-section.is-light .sm-brandgrid::before { background-image: repeating-linear-gradient(0deg, rgba(38,47,63,.05) 0 1px, transparent 1px 96px), repeating-linear-gradient(90deg, rgba(38,47,63,.05) 0 1px, transparent 1px 96px); mix-blend-mode: normal; } .sm-brandgrid > * { position: relative; z-index: 1; } .sm-dots { display: grid; grid-template-columns: repeat(5, 3px); gap: 6px; width: max-content; } .sm-dots i { width: 3px; height: 3px; background: var(--sm-grad); display: block; } .sm-dots--faint i { background: rgba(255,255,255,.06); } .sm-dots--theia i { background: var(--sm-accent); } .sm-title-silver { background: var(--sm-title-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sm-section.is-light .sm-title-silver { background: none; -webkit-text-fill-color: var(--sm-ink); color: var(--sm-ink); } /* A text color picked in the editor must actually paint. WP marks colored blocks with .has-text-color, but these titles glyph-fill from a gradient (background-clip: text) that ignores `color` — so with a color set, on the block itself or a parent, the gradient steps aside and the chosen color fills the glyphs. Quadruple class outranks every treatment variant, including master.css's sub-hero silver, regardless of load order. */ .sm-title-silver.has-text-color.has-text-color.has-text-color, .has-text-color.has-text-color.has-text-color .sm-title-silver, .sm-statband__num.has-text-color.has-text-color.has-text-color, .has-text-color.has-text-color.has-text-color .sm-statband__num, .sm-hero--article .sm-hero__title.has-text-color.has-text-color, .sm-hero--article.has-text-color .sm-hero__title { background-image: none; color: inherit; -webkit-text-fill-color: currentColor; } /* ==== 5. LAYOUT SYSTEM ==== */ .sm-section { width: 100%; padding-block: var(--sm-section-py); } .sm-container { width: min(var(--sm-container), 100% - 2 * var(--sm-gutter)); margin-inline: auto; } .sm-section__inner { display: flex; flex-direction: column; gap: 0; } .sm-section__inner > .sm-sectionhead { margin-top: 0; } .sm-section__inner > .sm-title { margin-top: 20px; } .sm-section__inner > .sm-lead { margin-top: 30px; } .sm-section__inner > .sm-grid, .sm-section__inner > .sm-steps { margin-top: 48px; } .sm-stats .sm-section__inner > .sm-title { margin-top: 30px; } .sm-stats .sm-section__inner > .sm-grid { margin-top: 40px; } .sm-grid { display: grid; gap: 24px; } .sm-grid--3 { grid-template-columns: repeat(3, 1fr); } .sm-grid--4 { grid-template-columns: repeat(4, 1fr); } .sm-grid--connected { gap: 0; } @media (max-width: 980px) { .sm-grid--3 { grid-template-columns: repeat(2, 1fr); } .sm-grid--3 .sm-iconbox:last-of-type {grid-area: 2 / 1 / 3 / 3;} .sm-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .sm-grid--3, .sm-grid--4 { grid-template-columns: 1fr; } .sm-grid--3 .sm-iconbox:last-of-type {grid-area: auto;} } /* ==== 6. ATOMS ==== */ .sm-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--sm-radius-sm); font-size: var(--sm-fs-tagline); letter-spacing: 3px; text-transform: uppercase; line-height: var(--sm-lh-tagline); color: var(--txt-soft); font-weight: 300; } .sm-eyebrow.is-glass { background: var(--card-bg); border: 1px solid var(--card-border); } .sm-eyebrow__ic, .sm-eyebrow::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; display: block; background: currentColor; -webkit-mask: url('../icons/target.svg') center / contain no-repeat; mask: url('../icons/target.svg') center / contain no-repeat; } .sm-sectionhead { display: flex; align-items: center; gap: 8px; --edge: max(var(--sm-gutter), (var(--sm-wrap, var(--sm-container)) - var(--sm-container)) / 2); } .sm-sectionhead::before { content: ""; height: 1px; background: var(--divider); flex: 0 0 auto; width: calc(24px + var(--edge)); margin-left: calc(-1 * var(--edge)); } .sm-sectionhead::after { content: ""; height: 1px; background: var(--divider); flex: 1; margin-right: calc(-1 * var(--edge)); } .sm-rule { height: 1px; background: var(--divider); border: 0; } .sm-rule--lead { width: 24px; flex: 0 0 24px; } .sm-rule--fill { flex: 1; } .sm-title { color: var(--txt); font-weight: 700; line-height: 1.02; font-size: var(--sm-fs-h2); margin: 0; } .sm-lead { color: var(--txt-soft); font-size: var(--sm-fs-lead); line-height: 1.42; font-weight: 300; max-width: 780px; margin: 0; } .sm-body { color: var(--txt-soft); font-size: var(--sm-fs-body); line-height: var(--sm-lh-body); margin: 0; } .sm-divider { height: 1px; background: var(--card-divider); border: 0; width: 100%; } .sm-btn { position: relative; height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 15px 16px; border-radius: var(--sm-radius-sm); --bw: 23px; font-weight: 600; font-size: var(--sm-fs-nav-link); text-transform: capitalize; text-decoration: none; cursor: pointer; border: 0; line-height: 1; white-space: nowrap; min-width: 177px; } .sm-btn--neutral { background: rgba(228,228,228,.68); color: var(--sm-ink); --bracket: #262F3F; } /* Gradient buttons own their bracket colour — it tracks the button's OWN gradient instead of inheriting the surface's --bracket. Without this a gradient CTA that lands on an is-light surface gets the slate bracket and reads as black (the master home hero is a core/cover, and WP core stamps its own is-light class on covers — that collided with .sm-section.is-light and blackened both hero CTAs). */ /* --sm-bracket-hover: the expanding hover frame goes white on these, because the resting bracket deliberately MATCHES the fill (green on green, blue on blue) — legible at 28px in a corner, invisible once it stretches to a full 1px frame at 50% opacity across the same colour. Rest state is unchanged. */ .sm-btn--gradient { color: #fff; background: linear-gradient(180deg, rgba(0,233,108,.48), rgba(0,233,108,.32)); box-shadow: inset 0 0 22px rgba(0,233,108,.9); --bracket: var(--sm-hyperion); --sm-bracket-hover: #FFFFFF; } .sm-btn--ghost { background: rgba(0,0,0,0); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 22px rgba(255,255,255,.1); } .sm-btn--gradient.sm-btn--theia { background: linear-gradient(180deg, rgba(var(--sm-accent-rgb),.48), rgba(var(--sm-accent-rgb),.32)); box-shadow: inset 0 0 22px rgba(var(--sm-accent-rgb),.9); border-color: rgba(255,255,255,.5); --bracket: var(--sm-accent); } .sm-btn--gradient.sm-btn--vulcan { background: linear-gradient(180deg, rgba(248,88,73,.48), rgba(248,88,73,.32)); box-shadow: inset 0 0 22px rgba(248,88,73,.9); --bracket: var(--sm-vulcan); } .wp-block-buttons:where(.sm-cta__btns, .sm-hero__ctas, .sm-btnrow) { margin: 0; } .wp-block-button.sm-btn { padding: 0; } .wp-block-button.sm-btn > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 13px; width: 100%; height: 100%; padding: 18px 20px; box-sizing: border-box; background: transparent; color: inherit; border: 0; box-shadow: none; border-radius: inherit; font: inherit; letter-spacing: inherit; line-height: 1; text-decoration: none; white-space: nowrap; font-size: 18px; } .wp-block-button.sm-btn > .wp-block-button__link:focus, .wp-block-button.sm-btn > .wp-block-button__link:hover { color: inherit; } .sm-ic { width: 44px; height: 44px; flex: 0 0 44px; display: block; } .sm-ic svg, .sm-ic > svg { width: 44px; height: 44px; display: block; } /* ==== 7. SECTION COMPONENTS ==== */ .wp-site-blocks, .sm-main { overflow-x: clip; } @media (min-width: 1920px) { .wp-site-blocks { width: var(--sm-wrap, 1920px); margin-inline: auto; zoom: var(--sm-zoom, 1); } } .sm-section > *, .sm-grid > *, .sm-gap__row > * { max-width: none; } .sm-section :where(h1, h2, h3, h4, p) { margin: 0; } .sm-section, .sm-footer { --wp--style--block-gap: 0px; } .sm-section :where(.wp-block-group.is-layout-flow) > * + * { margin-block-start: 0; } .wp-block-image.sm-ic { margin: 0; display: block; } .wp-block-image.sm-ic img { width: 44px; height: 44px; max-width: none; } .sm-section hr.wp-block-separator.sm-divider, .sm-footer hr.wp-block-separator.sm-divider { width: 100%; max-width: none; height: 0; opacity: 1; border: 0; border-top: 1px solid var(--card-divider); background: none; } body:not(.home) .sm-main { padding-top: var(--sm-nav-h); } body:not(.home) .sm-main:has(.sm-hero) { padding-top: 0; } body:not(.home) .sm-main:has(.sm-article) { padding-top: 0; } .sm-kicker { font-size: var(--sm-fs-tagline);; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--txt-soft); } .sm-kicker--theia { color: var(--sm-accent); } .sm-title { font-size: var(--sm-fs-h2); line-height: var(--sm-lh-h2); font-weight: 700; color: var(--txt); text-transform: capitalize; letter-spacing: 0; max-width: none; width: 100%; } /* ==== HEADER (chrome) ==== */ .sm-site-header { position: absolute; top: 24px; left: 0; right: 0; z-index: 50; } .sm-site-header__inner { position: relative; width: min(var(--sm-container), 100% - 2 * var(--sm-gutter)); margin-inline: auto; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 26px 0 30px; background: rgba(8,14,22,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); } .sm-logo { display: inline-flex; align-items: center; } .sm-logo__mark { width: 140px; height: auto; display: block; filter: drop-shadow(0 1px 2.9px rgba(0,0,0,.4)); } .sm-logo__mark--wide { width: 196px; } .sm-nav { display: none; align-items: center; gap: 4px; } .sm-nav__item { display: inline-flex; } .sm-nav__item--drop { position: relative; } .sm-nav__link { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 9px 14px; background: none; border: 0; border-radius: 3px; color: #DCE3EC; font-family: 'Inter', var(--sm-font); font-weight: 400; font-size: var(--sm-fs-small); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .22s var(--sm-ease), background-color .22s var(--sm-ease); } .sm-nav__link:hover, .sm-nav__item:hover > .sm-nav__link, .sm-nav__item:focus-within > .sm-nav__link, .sm-nav__item.is-open > .sm-nav__link { color: #fff; background: rgba(255,255,255,.05); } .sm-nav__link--plain:hover { background: none; } .sm-nav__caret { transition: transform .22s var(--sm-ease); } .sm-nav__item:hover > .sm-nav__link .sm-nav__caret, .sm-nav__item:focus-within > .sm-nav__link .sm-nav__caret, .sm-nav__item.is-open > .sm-nav__link .sm-nav__caret { transform: rotate(180deg); } .sm-nav__drop { position: absolute; top: 100%; left: 0; padding-top: 12px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .24s var(--sm-ease), transform .24s var(--sm-ease), visibility 0s linear .24s; } .sm-nav__item--drop:hover .sm-nav__drop, .sm-nav__item--drop:focus-within .sm-nav__drop, .sm-nav__item--drop.is-open .sm-nav__drop { opacity: 1; visibility: visible; transform: none; transition: opacity .24s var(--sm-ease), transform .24s var(--sm-ease); } .sm-drop { list-style: none; margin: 0; padding: 8px; min-width: 232px; background: rgba(11,19,30,.98); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .sm-drop__link { display: block; padding: 11px 14px; border-radius: 0; color: #DCE3EC; font-family: 'Inter', var(--sm-font); font-size: var(--sm-fs-split-sub); text-decoration: none; transition: background-color .2s var(--sm-ease), color .2s var(--sm-ease); } .sm-drop__link:hover { background: rgba(var(--sm-accent-rgb),.10); color: #fff; } .sm-nav__mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 14px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .28s var(--sm-ease), transform .28s var(--sm-ease), visibility 0s linear .28s; } .sm-nav__item--mega:hover .sm-nav__mega, .sm-nav__item--mega:focus-within .sm-nav__mega, .sm-nav__item--mega.is-open .sm-nav__mega { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--sm-ease), transform .28s var(--sm-ease); } .sm-mega { display: flex; gap: 36px; padding: 32px; background: linear-gradient(180deg, #0E1622, #070B12); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 36px 90px rgba(0,0,0,.6); } .sm-mega__feature { flex: 0 0 300px; display: flex; flex-direction: column; background: #10151E; border: 1px solid #283341; border-radius: 0; overflow: clip; text-decoration: none; } .sm-mega__media { position: relative; height: 150px; background: linear-gradient(180deg, #142436, #0A0F17); border-bottom: 1px solid #1C2530; } .sm-mega__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; display: block; } .sm-mega__tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 3px; background: rgba(0,0,0,.35); color: #fff; font-family: 'Inter', var(--sm-font); font-size: 11px; } .sm-mega__tagdot { width: 6px; height: 6px; border-radius: 50%; background: #5FD0F2; } .sm-mega__fbody { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; } .sm-mega__ftitle { color: #fff; font-family: 'Inter', var(--sm-font); font-weight: 700; font-size: 19px; line-height: 1.12; } .sm-mega__fdesc { color: #6A7686; font-family: 'Inter', var(--sm-font); font-size: 13px; line-height: 1.55; } .sm-mega__list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; } /* Column count follows the child count so short menus don't leave an orphan in a 2-up grid. 2 is the default (maritime's 6-item Capabilities menu); 1 and 3 are the corporate site's Maritime (Theia) and Energy (Hyperion/Vulcan/BasinIQ). */ .sm-mega__list--n1 { grid-template-columns: 1fr; } .sm-mega__list--n3 { grid-template-columns: repeat(3, 1fr); } .sm-mega__item { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 0; text-decoration: none; transition: background-color .2s var(--sm-ease); } .sm-mega__item:hover { background: rgba(var(--sm-accent-rgb),.10); } .sm-mega__ico { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; background: rgba(var(--sm-accent-rgb),.10); } .sm-mega__ico img { width: 20px; height: 20px; display: block; } .sm-mega__tx { display: flex; flex-direction: column; gap: 2px; } .sm-mega__name { color: #fff; font-family: 'Inter', var(--sm-font); font-weight: 700; font-size: var(--sm-fs-split-sub); line-height: 1.2; } .sm-mega__desc { color: #6A7686; font-family: 'Inter', var(--sm-font); font-size: var(--sm-fs-tagline);; line-height: 1.45; } .sm-header__right { display: flex; align-items: center; gap: 16px; } /* header CTA = the hero button recipe (accent gradient + inner glow) at the base .sm-btn size */ .sm-btn-demo { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 15px 16px; border-radius: var(--sm-radius-sm); background: linear-gradient(180deg, rgba(var(--sm-accent-rgb),.48), rgba(var(--sm-accent-rgb),.32)); box-shadow: inset 0 0 22px rgba(var(--sm-accent-rgb),.9); color: #fff; font-weight: 600; font-size: var(--sm-fs-nav-link); line-height: var(--sm-lh-nav-link); text-transform: capitalize; text-decoration: none; white-space: nowrap; transition: filter .22s var(--sm-ease), box-shadow .22s var(--sm-ease); /* the header CTA's fill overrides .sm-btn--gradient's green, so its bracket must follow the accent too */ --bracket: var(--sm-accent); --sm-bracket-hover: #FFFFFF; } .sm-btn-demo:hover { background: linear-gradient(180deg, rgba(var(--sm-accent-rgb),.48), rgba(var(--sm-accent-rgb),.32)); box-shadow: inset 0 0 24px rgba(var(--sm-accent-rgb),.9); filter: brightness(1.15); box-shadow: inset 0 0 30px rgba(var(--sm-accent-rgb),1), 0 0 24px rgba(var(--sm-accent-rgb),.4); } .sm-header__right .sm-btn-demo { display: none; } .sm-menu-pill { display: flex; align-items: center; justify-content: space-between; width: 300px; max-width: 52vw; padding: 15px 18px; border-radius: var(--sm-radius-md); color: #fff; font-weight: 600; font-size: var(--sm-fs-split-sub); line-height: 22px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05); } .sm-menu-pill .sm-dots { grid-template-columns: repeat(5, 1.8px); gap: 3.5px; opacity: .9; } .sm-menu-pill .sm-dots i { width: 1.8px; height: 1.8px; background: #fff; } @media (min-width: 1080px) { .sm-nav { display: flex; } .sm-header__right .sm-btn-demo { display: inline-flex; } .sm-menu-pill { display: none; } } @media (max-width: 1079px) { .sm-nav__mega, .sm-nav__drop { display: none; } } /* ==== HERO ==== */ .sm-hero { position: relative; overflow: hidden; background: #161F2D; padding-block: 0; min-height: 871px; display: flex; justify-content: center; } /* The home hero fills the viewport exactly, so the scroll cue pinned to its bottom is always on screen. Divided by the zoom because .wp-site-blocks is zoomed above 1920px, which would otherwise multiply the 100vh. svh keeps mobile browser chrome from pushing the cue out of view. */ body.home .sm-hero { min-height: calc(100vh / var(--sm-zoom, 1)); min-height: calc(100svh / var(--sm-zoom, 1)); } /* The type scale is Figma's, drawn for an 871px hero. Once the band became 100vh it outgrew it — at a 1156px band the stack ended at 730 and the 68px title read small against 426px of dead air. --hx is the height the band gained over the design's 871, capped so it can't run away on very tall windows; the hero's type and rhythm ride it back up. Rates are set by what the band actually needs, NOT by the Figma ratio. A purely proportional scale leaves the hero airy, because a third of the stack cannot scale: the eyebrow chip, the CTA buttons and the stat labels are fixed chrome. At a 1156px band a proportional stack would be 627px tall and the Figma ratios only reach 566 — so the type carries the missing 61px and runs ahead of proportion (title 0.105 vs the Figma 0.078). The block is CENTRED rather than hung off a top padding. The design's fixed 258px top padding anchors the stack to the top of the band, so it grows downward and every increase in type size drops it lower — at a 1156px band it had drifted to 342px of air above and 204 below (250 under the nav against 96 over the scroll cue). With justify-content:center and EQUAL top/bottom padding the stack sits at (band - stack) / 2 whatever its height, so type changes no longer move it. The padding is then only a floor for short bands; 130px matches the design's bottom padding and clears the 108px cue band. Measured at 2560x1271 (zoom 1.1, band 1156): title 68 -> 97.9, lead 18/26 -> 20.8/31, stat numbers 26.5 -> 33, stack gap 30 -> 44. Stack 472 -> 610 (16px off the 626 proportional target), sitting at 273 with 181px of clearance under the nav and 165 over the cue. The title clamp is a hard no-wrap guard: "Even the ones gone dark." runs 11.3px of line per px of font-size, so 103px is 1160px against a 1248px container. --hx's 330px cap is what keeps the title at that ceiling — if you raise one, re-check the other. Maritime only; energy and the master brand keep their own rhythm. min-height:901 keeps this clear of the short-screen rules below, which tighten the same padding and must keep winning there. */ @media (min-width: 901px) and (min-height: 901px) { body.wp-child-theme-synmax-maritime.home .sm-hero { --hh: calc(100vh / var(--sm-zoom, 1)); --hx: clamp(0px, calc(var(--hh) - 871px), 330px); } @supports (height: 100svh) { body.wp-child-theme-synmax-maritime.home .sm-hero { --hh: calc(100svh / var(--sm-zoom, 1)); } } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-hero__content { justify-content: center; padding-top: 130px; padding-bottom: 130px; gap: calc(30px + var(--hx) * 0.049); } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-hero__head { gap: calc(8px + var(--hx) * 0.021); } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-hero__bottom { gap: calc(20px + var(--hx) * 0.035); } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-hero__title { font-size: clamp(68px, calc(68px + var(--hx) * 0.105), 103px); } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-hero__lead { font-size: calc(18px + var(--hx) * 0.010); line-height: calc(26px + var(--hx) * 0.0175); width: calc(633px + var(--hx) * 0.30); } body.wp-child-theme-synmax-maritime.home .sm-hero .sm-stat__num { font-size: calc(26.5px + var(--hx) * 0.023); } } .sm-hero__media { position: absolute; inset: 0; z-index: 0; } .sm-hero__night { position: absolute; inset: 0; background: #050A14; } .sm-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; object-fit: cover; opacity: .5; } .sm-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,31,45,.08) 0%, rgba(22,31,45,.92) 100%); } .sm-hero.wp-block-cover { padding: 0; background: #050A14; align-items: stretch; } .sm-hero > .wp-block-cover__image-background { opacity: .5; } .sm-hero > .wp-block-cover__inner-container { display: flex; justify-content: center; width: 100%; } .sm-hero > .wp-block-cover__inner-container, .sm-gap__panel > .wp-block-cover__inner-container { position: static; } /* Embed (Vimeo) cover backgrounds: an iframe can't object-fit, so a hero-sized frame letterboxes the video (huge gaps above/below on phones). Give the iframe the video's own ratio, oversized to cover and centered; .sm-hero clips the rest. Ratio = the live "Theia_v04-Website BG" Vimeo asset (426×240). */ .sm-hero .wp-block-cover__embed-background iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%; aspect-ratio: 426 / 240; border: 0; } .sm-gridfx { position: absolute; inset: 0; overflow: clip; } .sm-gridfx::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--gline) 1px, transparent 1px), linear-gradient(to bottom, var(--gline) 1px, transparent 1px); background-size: var(--gcw) var(--gch); background-position: 0 0; opacity: var(--gop); } .sm-gridfx__diag { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .sm-gridfx__quad { position: absolute; background: rgba(255,255,255,.05); pointer-events: none; } .sm-gridfx__quad--img { background: rgba(8,18,32,.55); border: 1px solid rgba(178,191,209,.22); overflow: clip; } .sm-gridfx__quad--img > img { width: 100%; height: 100%; object-fit: cover; display: block; } .sm-gridfx__quad--img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,18,32,.12), rgba(8,18,32,.5)); } .sm-hgt { will-change: opacity; } html.sm-anim .sm-hero__grid[data-imgs] .sm-gridfx__quad--img:not(.sm-hgt) { display: none; } .sm-gridfx__dot { position: absolute; display: block; pointer-events: none; } .sm-hero__grid { z-index: 1; } .sm-hero__content { position: relative; z-index: 2; width: min(var(--sm-container), 100% - 2 * var(--sm-gutter)); display: flex; flex-direction: column; gap: 30px; align-items: flex-start; padding-top: 258px; padding-bottom: 130px; } .sm-hero__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .sm-hero__eyebrow.is-glass { color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .sm-hero__title { font-size: var(--sm-fs-h1-small); line-height: var(--sm-lh-h1-small); font-weight: 700; letter-spacing: 0; margin: 0; } .sm-hero__bottom { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; width: 100%; } .sm-hero__lead { color: #C7D1E0; font-weight: 300; font-size: var(--sm-fs-body); line-height: var(--sm-lh-body); width: 633px; max-width: 100%; margin: 0; } .sm-hero__ctas { display: flex; gap: 28px; flex-wrap: wrap; margin: 0; } .sm-hero__ctas .sm-btn { min-width: 210px; } .sm-hero__rule { width: 800px; max-width: 100%; height: 1px; background: rgba(255,255,255,.4); flex: 0 0 1px; } .sm-hero__stats { display: flex; gap: 20px; flex-wrap: wrap; } .sm-stat { display: flex; flex-direction: column; gap: 3.5px; padding-right: 17.4px; } .sm-stat__num { font-size: 26.5px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: .35px; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback 2', sans-serif; } .sm-stat__label { font-size: var(--sm-fs-p2); line-height: 22px; color: #E9E9E9; } .sm-hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: .7; color: #B2BFD1; font-size: var(--sm-fs-split-sub); line-height: 20px; font-weight: 600; } @media (max-width: 900px) { .sm-hero { min-height: 0; } .sm-hero__content { padding-top: 160px; padding-bottom: 90px; } } /* The home hero's content needs ~472px; on a short screen the design's 258/130 padding pushes the scroll cue past the fold, so tighten it until the content and the cue both fit one viewport. The cue itself needs 108px (58 tall, 50 from the bottom), which is the floor for the bottom padding. */ @media (min-width: 901px) and (max-height: 900px) { body.home .sm-hero__content { padding-top: 180px; padding-bottom: 110px; } } @media (min-width: 901px) and (max-height: 760px) { body.home .sm-hero__content { padding-top: 120px; padding-bottom: 108px; } } /* ==== TRUST BAND ==== */ .sm-trust { padding-block: 36px; min-height: 0; background: #081220; display: flex; align-items: center; justify-content: center; } .sm-trust__inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .sm-trust__label { font-size: var(--sm-fs-tagline);; letter-spacing: 2.4px; line-height: 20px; text-transform: uppercase; color: #fff; } .sm-trust__sectors { font-size: var(--sm-fs-h6); line-height: var(--sm-lh-h6); font-weight: 600; color: #fff; } /* ==== THE GAP ==== */ .sm-gap .sm-section__inner > .sm-sectionhead { margin-bottom: 0; } .sm-gap .sm-section__inner > .sm-gap__row { margin-top: 28px; } .sm-gap__row { display: flex; align-items: stretch; width: 100%; } .sm-gap__card { background: #fff; border: 1px solid rgba(38,47,63,.15); padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 643px; flex: 1 1 643px; overflow: clip; } .sm-gap__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; } .sm-gap__head { display: flex; gap: 20px; align-items: center; width: 100%; } .sm-gap__dots { width: 39px; height: 39px; flex: 0 0 39px; display: block; } .sm-gap__title { font-size: var(--sm-fs-h3); font-size: var(--sm-lh-h3); font-weight: 700; color: #0E1722; text-transform: capitalize; margin: 0; width: 504px; max-width: 100%; } .sm-gap__divider { height: 1px; width: 100%; background: rgba(38,47,63,.18); } /* Flex + gap so EVERY child spaces evenly — copy blocks carry panels and checklists on some pages, not just paragraphs, and the margin reset left non-paragraph children flush against the text. */ .sm-gap__copy { display: flex; flex-direction: column; gap: 26px; } .sm-gap__copy p { font-size: var(--sm-fs-body); line-height: 26px; color: #55657A; margin: 0; } .sm-gap__panel { position: relative; overflow: clip; background: #081220; width: 605px; flex: 1 1 605px; min-height: 423px; } .sm-gap__grid { position: absolute; top: 0; left: -16.53%; height: 100%; min-height: 100%; width: 152.56%; max-width: none; } .sm-gap__reticle { position: absolute; left: 21.16%; top: 15.37%; width: 49.59%; height: auto; opacity: .7; } .sm-hud__chip { position: absolute; top: 19px; left: 24px; z-index: 3; background: rgba(0,0,0,.1); padding: 13px 18px; font-size: var(--sm-fs-split-sub); letter-spacing: 2px; line-height: 1; text-transform: uppercase; color: #B2BFD1; font-weight: 600; } .sm-hud__coord { position: absolute; top: 30px; right: 24px; z-index: 3; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #B2BFD1; font-weight: 600; } .sm-hud__latlon { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.5); font-size: var(--sm-fs-tagline);; font-weight: 600; letter-spacing: 1px; line-height: 1; text-transform: uppercase; color: #B2BFD1; } .sm-gap__panel.wp-block-cover { padding: 0; min-height: 423px; } .sm-gap__panel .wp-block-image { margin: 0; } .sm-gap__grid img { width: 100%; height: 100%; display: block; } .sm-gap__reticle img { width: 100%; height: auto; display: block; } .sm-hud__latlon p { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .sm-gap__panel:has(> .wp-block-cover__image-background) .sm-gap__grid, .sm-gap__panel:has(> .wp-block-cover__image-background) .sm-gap__reticle { display: none; } .sm-gap--box .sm-gap__row { border: 1px solid rgba(233,233,233,.2); padding: 0; gap: 0; } .sm-gap--rules .sm-gap__row { position: relative; padding: 16px; gap: 16px; border-inline: 1px solid rgba(233,233,233,.2); --edge: max(var(--sm-gutter), (var(--sm-wrap, var(--sm-container)) - var(--sm-container)) / 2); } .sm-gap--rules .sm-gap__row::before, .sm-gap--rules .sm-gap__row::after { content: ""; position: absolute; left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge)); height: 1px; background: rgba(233,233,233,.2); pointer-events: none; } .sm-gap--rules .sm-gap__row::before { top: 0; } .sm-gap--rules .sm-gap__row::after { bottom: 0; } /* ==== CONNECTED GRID (stats + industries) ==== */ .sm-grid--connected { gap: 0; border-top: 1px solid var(--card-border); border-left: 1px solid var(--card-border); } .sm-grid--connected > * { border: 0 solid var(--card-border); border-right-width: 1px; border-bottom-width: 1px; } .sm-grid--framed { gap: 28px; } .sm-grid--framed > * { border: 1px solid var(--card-border); } .sm-grid--framed .sm-iconbox .sm-ic, .sm-grid--framed .sm-iconbox .sm-ic img { width: 48px; height: 48px; } .sm-stats { position: relative; background: #081220; } .sm-stats > .sm-container { position: relative; z-index: 1; } .sm-stats::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 78% at 50% 112%, rgba(var(--sm-accent-rgb),.20) 0%, rgba(var(--sm-accent-deep-rgb),.13) 38%, rgba(8,18,32,0) 72%); } .sm-industries { position: relative; background: #161F2D; border-bottom: 1px solid rgba(233,233,233,.3); } .sm-industries > .sm-container { position: relative; z-index: 1; } .sm-industries::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 78% at 50% 112%, rgba(var(--sm-accent-rgb),.20) 0%, rgba(var(--sm-accent-deep-rgb),.13) 38%, rgba(8,18,32,0) 72%); } .sm-statcell { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; position: relative; min-height: 100%; } .sm-statcell::before { content: ""; position: absolute; top: 40px; right: 40px; width: 45px; height: 45px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Crect width='3' height='3' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 9px 9px; opacity: .35; pointer-events: none; } .sm-statcell__head { display: flex; align-items: center; gap: 16px; } .sm-statcell__ic { width: 44px; height: 44px; flex: 0 0 44px; display: block; } .sm-statcell__ic img { width: 44px; height: 44px; display: block; } .sm-statcell > .sm-statcell__title { font-size: var(--sm-fs-h6); font-weight: 600; color: #fff; line-height: var(--sm-lh-h6); margin-top: 16px; } .sm-statcell > .sm-divider { margin-top: 24px; } .sm-statcell > .sm-statcell__body { color: var(--sm-body-dark); font-size: var(--sm-fs-body); line-height: 1.44; margin-top: 24px; } .sm-statcell > .sm-statcell__metric { margin-top: auto; padding-top: 24px; color: #16B4E8; font-weight: 700; font-size: var(--sm-fs-p2); line-height: 22px; } /* ==== MULTI-STEP (kit multiStepCard: pad 32, gap 28, icon 44 ==== */ .sm-steps { gap: 24px; } .sm-step { padding: 32px; display: flex; flex-direction: column; border-radius: 0; min-height: 100%; } .sm-section.is-light .sm-step.sm-glass { background: var(--sm-card); border-color: rgba(38,47,63,.2); } .sm-step__head { display: flex; align-items: center; gap: 16px; } .sm-step__ic { width: 44px; height: 44px; flex: 0 0 44px; display: block; } .sm-step__ic img { width: 44px; height: 44px; display: block; } .sm-step .sm-kicker { color: #262F3F; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback 2', sans-serif; } .sm-step > .sm-step__title { font-size: var(--sm-fs-h6); font-weight: 600; line-height: var(--sm-lh-h6); color: #262F3F; margin-top: 16px; } .sm-step > .sm-divider { margin-top: 28px; } .sm-step > .sm-step__body { color: #262F3F; font-size: var(--sm-fs-body); line-height: 26px; margin-top: 28px; } /* ==== INDUSTRIES ==== */ .sm-iconbox { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 214px; } .sm-iconbox .sm-ic, .sm-iconbox .sm-ic img { width: 44px; height: 44px; } .sm-iconbox > .sm-iconbox__title { font-size: var(--sm-fs-h6); font-weight: 600; line-height: var(--sm-lh-h6); color: var(--txt); margin-top: 28px; } .sm-iconbox > .sm-iconbox__body { color: var(--txt-soft); font-size: var(--sm-fs-body); font-weight: 300; line-height: 26px; margin-top: 10px; } /* ==== TESTIMONIAL ==== */ .sm-testimonial { position: relative; overflow: hidden; padding-block: 48px; background: #161F2D; border-bottom: 1px solid rgba(233,233,233,.3); } .sm-testimonial__grid { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: color-dodge; pointer-events: none; z-index: 0; } .sm-testimonial__grid img { position: absolute; top: 0; left: -6.94%; width: 106.94%; height: 100%; min-height: 100%; max-width: none; display: block; } .sm-testimonial::after { content: ""; position: absolute; right: 0; bottom: -28%; width: 56%; height: 72%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, rgba(var(--sm-accent-rgb),.16), rgba(8,18,32,0) 70%); } .sm-testimonial__blk { position: absolute; z-index: 1; background: rgba(255,255,255,.04); pointer-events: none; } .sm-testimonial__blk--1 { right: 0; top: 28%; width: 192px; height: 101px; } .sm-testimonial__blk--2 { left: 0; top: 50%; width: 96px; height: 202px; } .sm-testimonial__dotgrid { position: absolute; left: 0; top: 84%; width: 96px; height: 89px; z-index: 1; pointer-events: none; display: block; } .sm-testimonial__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .sm-testimonial__inner > .sm-sectionhead, .sm-quote__footer { width: 100%; align-self: stretch; } /* Each quote is its own group so the editor can duplicate one to add a testimonial. .sm-quote carries the centring the section inner used to do for loose children, and both selectors below need 0,2,0 to restore the margins that the block-gap reset (line ~96) zeroes on every group child. */ .sm-quotes { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 64px; } .sm-quote { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } /* The __inner variants keep pages whose testimonial section is still baked in the pre-carousel shape (quote parts as loose children, no .sm-quote wrapper) rendering correctly — theme files deploy ahead of any page being re-baked. */ .sm-quote > .sm-quote__badge, .sm-testimonial__inner > .sm-quote__badge { margin-bottom: 16px; } .sm-quote > .sm-quote__cite, .sm-testimonial__inner > .sm-quote__cite { margin-top: 16px; } /* Carousel mode is added by testimonials.js, so with no JS — and in the block editor, where the script never runs — every quote stays stacked and editable. The transition is a full-width push: the outgoing quote is pinned absolutely (is-leaving) and exits one track-width in the travel direction while the incoming one enters from the opposite edge — since both cover the same 100%-wide box and move by the same delta, they read as one continuous strip. data-sm-dir (stamped by the JS, unset on the initial paint so slide 1 doesn't animate on load) flips the direction for prev; overflow clips the offscreen halves. The track's min-height is set inline by the JS to the tallest quote, so it is a fixed frame — nothing resizes mid-push and the footer rule below never moves. Quotes stay top-aligned in that frame, which keeps the badge and headline at a constant y across every slide. */ .sm-quotes.is-carousel { position: relative; overflow: hidden; } .sm-quotes.is-carousel > .sm-quote { display: none; } .sm-quotes.is-carousel > .sm-quote.is-active { display: flex; } .sm-quotes.is-carousel > .sm-quote.is-leaving { display: flex; position: absolute; top: 0; left: 0; width: 100%; } .sm-quotes.is-carousel[data-sm-dir] > .sm-quote.is-active { animation: sm-quote-in .6s cubic-bezier(.33,0,.2,1) both; } .sm-quotes.is-carousel[data-sm-dir] > .sm-quote.is-leaving { animation: sm-quote-out .6s cubic-bezier(.33,0,.2,1) both; } .sm-quotes.is-carousel[data-sm-dir="prev"] { --sm-in: -100%; --sm-out: 100%; } @keyframes sm-quote-in { from { transform: translateX(var(--sm-in, 100%)); } to { transform: none; } } @keyframes sm-quote-out { from { transform: none; } to { transform: translateX(var(--sm-out, -100%)); } } @media (prefers-reduced-motion: reduce) { .sm-quotes.is-carousel[data-sm-dir] > .sm-quote.is-active, .sm-quotes.is-carousel[data-sm-dir] > .sm-quote.is-leaving { animation: none; } } /* .sm-quote__pager sets display:flex, which would beat the [hidden] UA rule. */ .sm-quote__pager[hidden] { display: none; } .sm-quote__count { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.7); margin: 0; align-self: center; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; } .sm-quote__badge { display: inline-flex; align-items: center; justify-content: center; padding: 12px; color: #fff; margin: 0 0 16px; border: 1px solid rgba(255,255,255,.4); border-radius: var(--sm-radius-sm); } .sm-quote__badge svg { width: 53px; height: 46px; display: block; } .sm-quote__text { font-size: var(--sm-fs-h3); font-weight: 700; color: #fff; font-size: var(--sm-lh-h3); max-width: 591px; margin: 0; text-transform: capitalize; } .sm-testimonial hr.wp-block-separator.sm-quote__rule { max-width: 591px; margin: 0 auto; } .sm-quote__body { color: #fff; font-size: var(--sm-fs-body); line-height: 26px; max-width: 591px; margin: 0 auto; } .sm-quote__cite { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .sm-quote__name { color: var(--sm-accent); font-weight: 700; font-size: var(--sm-fs-p2); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback 2', sans-serif; } .sm-quote__org { color: #fff; font-size: var(--sm-fs-p2); font-family: 'Inter', 'Inter Fallback', 'Inter Fallback 2', sans-serif; } .sm-quote__footer { display: flex; align-items: center; gap: 16px; } .sm-quote__pager { display: flex; gap: 16px; } .sm-pager-btn { width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: var(--sm-radius-sm); color: #fff; cursor: pointer; } /* ==== CTA ==== */ .sm-cta { padding: 88px 0 100px; } .sm-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .sm-cta__inner > .sm-sectionhead { width: 100%; align-self: stretch; margin-top: 0; } .sm-cta .sm-eyebrow { color: #161F2D; } .sm-cta__inner > .sm-cta__title { font-size: clamp(38px, 6vw, 68px); line-height: .97; font-weight: 700; color: #161F2D; margin-top: 40px; letter-spacing: 0; } .sm-cta__inner > .sm-cta__body { color: #55657A; font-size: var(--sm-fs-body); font-weight: 300; line-height: 26px; max-width: 616px; margin-top: 28px; } .sm-cta__btns { position: relative; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .sm-cta__inner > .sm-cta__btns, .sm-cta__inner > .sm-signup { margin-top: 28px; } .sm-cta__btns::before { content: ""; position: absolute; right: 100%; bottom: 0; width: 100vw; height: 1px; background: rgba(38,47,63,.12); pointer-events: none; } .sm-cta__btns::after { content: ""; position: absolute; left: 100%; top: 0; width: 100vw; height: 1px; background: rgba(38,47,63,.12); pointer-events: none; } /* ==== FOOTER (chrome) ==== */ .sm-footer { background: #131A26; color: #fff; padding-block: 80px; } .sm-footer__inner { width: min(var(--sm-container), 100% - 2 * var(--sm-gutter)); margin-inline: auto; } .sm-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .sm-footer__brand { display: flex; flex-direction: column; gap: 20px; } .sm-footer__logo { width: 184px; height: auto; } .sm-footer__logo--wide { width: 244px; } .sm-footer__social { display: flex; gap: 32px; } .sm-footer__social a { width: 16px; height: 16px; color: #fff; opacity: .85; display: inline-flex; align-items: center; justify-content: center; } .sm-footer__social a:hover { opacity: 1; } .sm-footer__cols { display: flex; gap: 53px; flex-wrap: wrap; } .sm-footer__col { display: flex; flex-direction: column; gap: 0; min-width: 110px; } .sm-footer__head { font-size: var(--sm-fs-p2); font-weight: 700; line-height: var(--sm-lh-p2); color: #fff; margin: 0 0 8px; } .sm-footer__col a { color: #fff; font-size: var(--sm-fs-nav-link); line-height: var(--sm-lh-nav-link); text-decoration: none; padding: 12px 8px; } .sm-footer__col a:hover { color: var(--sm-accent); } .sm-footer__prod { text-transform: uppercase; letter-spacing: 2px; font-size: 10px; font-weight: 600; padding: 12px 0 !important; } .sm-footer__rule { height: 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 44px 0 28px; } .sm-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .sm-footer__copy { color: #fff; font-size: var(--sm-fs-p2); margin: 0; } .sm-footer__awards { display: flex; align-items: center; gap: 24px; color: #fff; } .sm-footer__awards-label { font-size: 16.5px; font-weight: 600; line-height: 1.15; width: 81px; } .sm-footer__awards-div { width: 1.5px; height: 44px; background: #fff; flex: 0 0 1.5px; } .suynmax img.sm-footer__award-img { height: 29px; width: auto; display: block; } .sm-footer__award-img--spire { height: 23px; } .sm-footer__legal { margin: 24px 0 0; } .sm-footer__legal a { color: #fff; font-size: var(--sm-fs-tagline);; text-decoration: none; } /* ==== RESPONSIVE ==== */ @media (max-width: 980px) { .sm-gap__row { grid-template-columns: 1fr; } .sm-gap__panel { min-height: 420px; } } @media (max-width: 760px) { .sm-footer__top { flex-direction: column; gap: 36px; } .sm-footer__bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .sm-hero__title { letter-spacing: -.01em; } .sm-btnrow { gap: 12px; } .sm-btnrow .sm-btn { flex: 1 1 100%; } .sm-cta__btns .sm-btn { width: 100%; } .sm-trust__inner { gap: 10px; } .sm-gap__card, .sm-statcell, .sm-iconbox, .sm-step { padding: 28px; } } /* ==== EDITOR CANVAS ==== */ .editor-styles-wrapper .sm-section, .editor-styles-wrapper .sm-footer { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .editor-styles-wrapper .sm-deco { position: static !important; } .editor-styles-wrapper .sm-cta__inner > .sm-deco { margin-top: 28px; } .editor-styles-wrapper * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .editor-styles-wrapper .sm-approach__chip1, .editor-styles-wrapper .sm-approach__chip2, .editor-styles-wrapper .sm-approach__coordtag, .editor-styles-wrapper .sm-approach__photo, .editor-styles-wrapper .sm-bento__card .sm-featcard__media, .editor-styles-wrapper .sm-bento__card .sm-featcard__scrim, .editor-styles-wrapper .sm-bento__card .sm-gap__dots, .editor-styles-wrapper .sm-bento__text, .editor-styles-wrapper .sm-biocard__cross, .editor-styles-wrapper .sm-biocard__dots, .editor-styles-wrapper .sm-biocard__media, .editor-styles-wrapper .sm-biocard__ovb, .editor-styles-wrapper .sm-biocard__ovt, .editor-styles-wrapper .sm-biocard__photo, .editor-styles-wrapper .sm-biocard__radar, .editor-styles-wrapper .sm-biocard__view, .editor-styles-wrapper .sm-biomodal__backdrop, .editor-styles-wrapper .sm-biomodal__botscrim, .editor-styles-wrapper .sm-biomodal__close, .editor-styles-wrapper .sm-biomodal__cutout, .editor-styles-wrapper .sm-biomodal__glow, .editor-styles-wrapper .sm-biomodal__guides, .editor-styles-wrapper .sm-biomodal__hud, .editor-styles-wrapper .sm-biomodal__plate, .editor-styles-wrapper .sm-biomodal__rscrim, .editor-styles-wrapper .sm-biomodal__shaft, .editor-styles-wrapper .sm-biomodal__tex, .editor-styles-wrapper .sm-biomodal__topfade, .editor-styles-wrapper .sm-cform, .editor-styles-wrapper .sm-featcard__media, .editor-styles-wrapper .sm-featcard__photo, .editor-styles-wrapper .sm-featcard__scrim, .editor-styles-wrapper .sm-gap__grid, .editor-styles-wrapper .sm-gap__photo, .editor-styles-wrapper .sm-gap__reticle, .editor-styles-wrapper .sm-genhero__bg, .editor-styles-wrapper .sm-genhero__earth, .editor-styles-wrapper .sm-genhero__fade, .editor-styles-wrapper .sm-genhero__media, .editor-styles-wrapper .sm-genhero__overlay, .editor-styles-wrapper .sm-genhero__royal, .editor-styles-wrapper .sm-genhero__scrim, .editor-styles-wrapper .sm-genhud, .editor-styles-wrapper .sm-gridfx, .editor-styles-wrapper .sm-gridfx__diag, .editor-styles-wrapper .sm-gridfx__dot, .editor-styles-wrapper .sm-gridfx__quad, .editor-styles-wrapper .sm-hero__media, .editor-styles-wrapper .sm-hero__night, .editor-styles-wrapper .sm-hero__photo, .editor-styles-wrapper .sm-hero__scrim, .editor-styles-wrapper .sm-hero__scroll, .editor-styles-wrapper .sm-hub__card, .editor-styles-wrapper .sm-hub__corner, .editor-styles-wrapper .sm-hub__cross, .editor-styles-wrapper .sm-hub__dotblock, .editor-styles-wrapper .sm-hub__explore, .editor-styles-wrapper .sm-hub__fadeB, .editor-styles-wrapper .sm-hub__fadeR, .editor-styles-wrapper .sm-hub__map, .editor-styles-wrapper .sm-hub__media, .editor-styles-wrapper .sm-hud__chip, .editor-styles-wrapper .sm-hud__coord, .editor-styles-wrapper .sm-hud__latlon, .editor-styles-wrapper .sm-inqcard .sm-eyebrow, .editor-styles-wrapper .sm-inqcard__cta, .editor-styles-wrapper .sm-inqcard__dots, .editor-styles-wrapper .sm-inqcard__rule, .editor-styles-wrapper .sm-inqcard__title, .editor-styles-wrapper .sm-loccard__coords, .editor-styles-wrapper .sm-loccard__cross, .editor-styles-wrapper .sm-loccard__dots, .editor-styles-wrapper .sm-loccard__locked, .editor-styles-wrapper .sm-loccard__map, .editor-styles-wrapper .sm-loccard__media, .editor-styles-wrapper .sm-loccard__reticle, .editor-styles-wrapper .sm-loccard__scrim, .editor-styles-wrapper .sm-loccard__target, .editor-styles-wrapper .sm-mega__tag, .editor-styles-wrapper .sm-nav__drop, .editor-styles-wrapper .sm-nav__mega, .editor-styles-wrapper .sm-navmenu__panel, .editor-styles-wrapper .sm-newscard__dots, .editor-styles-wrapper .sm-newsfeature__dots, .editor-styles-wrapper .sm-newsfeature__panel, .editor-styles-wrapper .sm-newsfeature__tags, .editor-styles-wrapper .sm-npvcard__dots, .editor-styles-wrapper .sm-npvfeature__dots, .editor-styles-wrapper .sm-npvfeature__img, .editor-styles-wrapper .sm-npvfeature__ov, .editor-styles-wrapper .sm-npvfeature__tags, .editor-styles-wrapper .sm-prow__cell, .editor-styles-wrapper .sm-prow__coord, .editor-styles-wrapper .sm-prow__frame, .editor-styles-wrapper .sm-prow__h, .editor-styles-wrapper .sm-prow__photo, .editor-styles-wrapper .sm-prow__scrim, .editor-styles-wrapper .sm-prow__v, .editor-styles-wrapper .sm-site-header, .editor-styles-wrapper .sm-split__chips, .editor-styles-wrapper .sm-split__coords, .editor-styles-wrapper .sm-split__hud, .editor-styles-wrapper .sm-split__monitor, .editor-styles-wrapper .sm-split__ovA, .editor-styles-wrapper .sm-split__ovB, .editor-styles-wrapper .sm-split__photo, .editor-styles-wrapper .sm-split__photo img, .editor-styles-wrapper .sm-split__track, .editor-styles-wrapper .sm-subhero__blk, .editor-styles-wrapper .sm-subhero__dots, .editor-styles-wrapper .sm-subhero__media, .editor-styles-wrapper .sm-subhero__photo, .editor-styles-wrapper .sm-subhero__scrim, .editor-styles-wrapper .sm-testimonial__blk, .editor-styles-wrapper .sm-testimonial__dotgrid, .editor-styles-wrapper .sm-testimonial__grid, .editor-styles-wrapper .sm-testimonial__grid img { position: absolute !important; } /* Deco chrome must not eat clicks in the editor canvas. The chrome (scrims, crosshairs, reticles, dot blocks) is absolutely positioned OVER the native wp:image beneath it and comes later in the DOM, so it wins the hit-test: clicking a photo selected the synmax/deco block and the image toolbar — Replace included — was unreachable (contact page location cards, 2026-08-01). Scoped to aria-hidden children so genuinely interactive deco output (the HubSpot forms, testimonial pager, resources board) stays clickable. */ .editor-styles-wrapper [data-type="synmax/deco"] [aria-hidden="true"] { pointer-events: none; } .editor-styles-wrapper .wp-block-group[class*="sm-"] > .components-placeholder, .editor-styles-wrapper .wp-block-group[class*="sm-"] > .block-editor-block-variation-picker { display: none; } /* ==== 8. MOTION — scroll reveals, intro timeline & micro-interactions ==== */ :root { --sm-ease: cubic-bezier(.22, 1, .36, 1); --sm-ease-soft: cubic-bezier(.16, 1, .3, 1); --sm-rv-dur: .75s; --sm-rv-y: 16px; } html.sm-anim { scroll-behavior: smooth; scroll-padding-top: calc(var(--sm-nav-h) + 24px); } html.sm-anim .sm-sectionhead, html.sm-anim .sm-title, html.sm-anim .sm-lead, html.sm-anim .sm-grid:not(.sm-grid--connected) > *, html.sm-anim .sm-statband__row > *, html.sm-anim .sm-grid--connected, html.sm-anim .sm-cta__inner > *, html.sm-anim .sm-trust__inner > *, html.sm-anim .sm-gap__card, html.sm-anim .sm-gap__panel, html.sm-anim .sm-hero__head > *, html.sm-anim .sm-hero__bottom > *, html.sm-anim .sm-hero__rule, html.sm-anim .sm-hero__stats, html.sm-anim .sm-quote__badge, html.sm-anim .sm-quote__text, html.sm-anim .sm-quote__rule, html.sm-anim .sm-quote__body, html.sm-anim .sm-quote__cite, html.sm-anim .sm-quote__footer, html.sm-anim .sm-footer__top > *, html.sm-anim .sm-footer__bottom, html.sm-anim .sm-footer__legal { transition: opacity var(--sm-rv-dur) var(--sm-ease), transform var(--sm-rv-dur) var(--sm-ease); } html.sm-anim .sm-quote__rule { transform-origin: center; } html.sm-anim .sm-grid.sm-bracket::before { transition: --_bs .6s var(--sm-ease) .5s; } html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-sectionhead, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-title, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-lead, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-grid:not(.sm-grid--connected) > *, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-statband__row > *, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-grid--connected, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-cta__inner > *, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-trust__inner > *, html.sm-anim:not(.sm-anim-off) .sm-hero:not(.is-in) .sm-hero__head > *, html.sm-anim:not(.sm-anim-off) .sm-hero:not(.is-in) .sm-hero__bottom > *, html.sm-anim:not(.sm-anim-off) .sm-hero:not(.is-in) .sm-hero__rule, html.sm-anim:not(.sm-anim-off) .sm-hero:not(.is-in) .sm-hero__stats, html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__text, html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__body, html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__cite, html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__footer, html.sm-anim:not(.sm-anim-off) .sm-footer:not(.is-in) .sm-footer__top > *, html.sm-anim:not(.sm-anim-off) .sm-footer:not(.is-in) .sm-footer__bottom, html.sm-anim:not(.sm-anim-off) .sm-footer:not(.is-in) .sm-footer__legal { opacity: 0; transform: translateY(var(--sm-rv-y)); pointer-events: none; } html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-grid--connected { transform: translateY(20px); } html.sm-anim:not(.sm-anim-off) .sm-gap:not(.is-in) .sm-gap__card { opacity: 0; transform: translateX(-30px); pointer-events: none; } html.sm-anim:not(.sm-anim-off) .sm-gap:not(.is-in) .sm-gap__panel { opacity: 0; transform: scale(.96); pointer-events: none; } html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__badge { opacity: 0; transform: scale(.82); pointer-events: none; } html.sm-anim:not(.sm-anim-off) .sm-testimonial:not(.is-in) .sm-quote__rule { opacity: 0; transform: scaleX(0); } html.sm-anim .sm-gap__row { overflow: clip; } html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-grid.sm-bracket::before { --_bs: 0px; } html.sm-anim .sm-sectionhead::before { transform-origin: left center; } html.sm-anim .sm-sectionhead::after { transform-origin: right center; } html.sm-anim .sm-cta__btns::before { transform-origin: left center; } html.sm-anim .sm-cta__btns::after { transform-origin: right center; } html.sm-anim .sm-sectionhead::before, html.sm-anim .sm-sectionhead::after { transition: transform .7s var(--sm-ease) .14s; } html.sm-anim .sm-cta__btns::before, html.sm-anim .sm-cta__btns::after { transition: transform .85s var(--sm-ease) .32s; } html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-sectionhead::before, html.sm-anim:not(.sm-anim-off) .sm-section:not(.is-in) .sm-sectionhead::after, html.sm-anim:not(.sm-anim-off) .sm-cta:not(.is-in) .sm-cta__btns::before, html.sm-anim:not(.sm-anim-off) .sm-cta:not(.is-in) .sm-cta__btns::after { transform: scaleX(0); } html.sm-anim .sm-section.is-in .sm-title { transition-delay: .08s; } html.sm-anim .sm-section.is-in .sm-lead { transition-delay: .16s; } html.sm-anim .sm-section.is-in .sm-grid--connected { transition-delay: .18s; } html.sm-anim .sm-section.is-in .sm-grid:not(.sm-grid--connected) > * { transition-delay: .18s; } html.sm-anim .sm-section.is-in .sm-grid:not(.sm-grid--connected) > :nth-child(2) { transition-delay: .28s; } html.sm-anim .sm-section.is-in .sm-grid:not(.sm-grid--connected) > :nth-child(3) { transition-delay: .38s; } html.sm-anim .sm-section.is-in .sm-grid:not(.sm-grid--connected) > :nth-child(4) { transition-delay: .48s; } html.sm-anim .sm-section.is-in .sm-statband__row > * { transition-delay: .18s; } html.sm-anim .sm-section.is-in .sm-statband__row > :nth-child(2) { transition-delay: .30s; } html.sm-anim .sm-section.is-in .sm-statband__row > :nth-child(3) { transition-delay: .42s; } html.sm-anim .sm-trust.is-in .sm-trust__inner > :nth-child(2) { transition-delay: .10s; } html.sm-anim .sm-gap.is-in .sm-gap__card { transition-delay: .12s; } html.sm-anim .sm-gap.is-in .sm-gap__panel { transition-delay: .22s; } html.sm-anim .sm-cta.is-in .sm-cta__inner > :nth-child(2) { transition-delay: .10s; } html.sm-anim .sm-cta.is-in .sm-cta__inner > :nth-child(3) { transition-delay: .20s; } html.sm-anim .sm-cta.is-in .sm-cta__inner > :nth-child(4) { transition-delay: .30s; } html.sm-anim .sm-testimonial.is-in .sm-quote__badge { transition-delay: .12s; } html.sm-anim .sm-testimonial.is-in .sm-quote__text { transition-delay: .22s; } html.sm-anim .sm-testimonial.is-in .sm-quote__rule { transition-delay: .34s; } html.sm-anim .sm-testimonial.is-in .sm-quote__body { transition-delay: .42s; } html.sm-anim .sm-testimonial.is-in .sm-quote__cite { transition-delay: .52s; } html.sm-anim .sm-testimonial.is-in .sm-quote__footer { transition-delay: .60s; } html.sm-anim .sm-footer.is-in .sm-footer__top > :nth-child(2) { transition-delay: .10s; } html.sm-anim .sm-footer.is-in .sm-footer__bottom { transition-delay: .18s; } html.sm-anim .sm-footer.is-in .sm-footer__legal { transition-delay: .24s; } html.sm-anim .sm-hero.is-in .sm-hero__head > :nth-child(1) { transition-delay: .14s; } html.sm-anim .sm-hero.is-in .sm-hero__head > :nth-child(2) { transition-delay: .26s; } html.sm-anim .sm-hero.is-in .sm-hero__bottom > :nth-child(1) { transition-delay: .42s; } html.sm-anim .sm-hero.is-in .sm-hero__bottom > :nth-child(2) { transition-delay: .54s; } html.sm-anim .sm-hero.is-in .sm-hero__rule { transition-delay: .66s; } html.sm-anim .sm-hero.is-in .sm-hero__stats { transition-delay: .76s; } html.sm-anim .sm-hero__media { inset: -9% 0; will-change: transform; } html.sm-anim .sm-hero__photo { animation: sm-kenburns 2.4s var(--sm-ease) both; will-change: transform, opacity; } html.sm-anim .sm-hero > .wp-block-cover__image-background { inset: -9% 0; height: auto; animation: sm-kenburns 2.4s var(--sm-ease) both; will-change: transform, opacity; } html.sm-anim .sm-hero__grid { animation: sm-fade 1.6s var(--sm-ease) .15s both; } @keyframes sm-kenburns { from { opacity: 0; transform: scale(1.14); } to { opacity: .5; transform: scale(1); } } @keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } } html.sm-anim .sm-site-header { animation: sm-header-in .9s var(--sm-ease) .1s both; } @keyframes sm-header-in { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } } html.sm-anim .sm-hero__scroll { opacity: 0; animation: sm-cue 1s var(--sm-ease) 1.25s forwards; } html.sm-anim .sm-hero__scroll svg { animation: sm-bob 1.9s ease-in-out 2s infinite; } @keyframes sm-cue { from { opacity: 0; } to { opacity: .7; } } @keyframes sm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } html.sm-anim.is-scrolled .sm-hero__scroll { animation: none; opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity .45s var(--sm-ease), transform .45s var(--sm-ease); } html.sm-anim.is-scrolled .sm-hero__scroll svg { animation: none; } html.sm-anim .sm-gap__reticle { animation: sm-breathe 4.5s ease-in-out infinite; } @keyframes sm-breathe { 0%, 100% { opacity: .7; } 50% { opacity: .42; } } html.sm-anim .sm-section.is-in .sm-gridfx__quad { animation: sm-cellfade var(--cyc-t, 9s) ease-in-out var(--cyc-d, 0s) infinite; } @keyframes sm-cellfade { 0%, 8% { opacity: 1; } 25%, 50% { opacity: 0; } 67%, 100% { opacity: 1; } } /* ==== 8.5 MICRO-INTERACTIONS (front end only) ==== */ /* Corner expansion is NOT redeclared here — the shared .sm-bracket rule in §4 owns it for every bracket on the site (it used to live here at .4s with no opacity/colour shift, which is why buttons animated differently from everything else). These rules keep only the lift/brightness. */ body.synmax .sm-btn { transition: transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease), background-color .28s var(--sm-ease), filter .28s var(--sm-ease); } body.synmax .sm-btn:hover { transform: translateY(-2px); filter: brightness(1.07); } body.synmax .sm-btn:active { transform: translateY(0); filter: brightness(1); } body.synmax .sm-btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); } body.synmax .sm-btn--neutral:hover { background: rgba(228,228,228,.92); } body.synmax .wp-block-read-more.sm-bracket--btn { transition: transform .28s var(--sm-ease), background-color .28s var(--sm-ease), filter .28s var(--sm-ease); } body.synmax .wp-block-read-more.sm-bracket--btn:hover { transform: translateY(-2px); filter: brightness(1.07); } body.synmax .sm-step { transition: transform .32s var(--sm-ease), box-shadow .32s var(--sm-ease), border-color .32s var(--sm-ease); } body.synmax .sm-step:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(5,8,15,.14); border-color: rgba(var(--sm-accent-rgb),.55); } body.synmax .sm-statcell, body.synmax .sm-iconbox { transition: background-color .32s var(--sm-ease), box-shadow .32s var(--sm-ease); } body.synmax .sm-statcell:hover, body.synmax .sm-iconbox:hover { background-color: rgba(var(--sm-accent-rgb),.06); box-shadow: inset 0 2px 0 0 var(--sm-accent); } body.synmax .sm-statcell__ic, body.synmax .sm-step__ic, body.synmax .sm-iconbox .sm-ic { transition: transform .32s var(--sm-ease); } body.synmax .sm-statcell:hover .sm-statcell__ic, body.synmax .sm-step:hover .sm-step__ic, body.synmax .sm-iconbox:hover .sm-ic { transform: scale(1.09); } body.synmax .sm-iconbox__title { margin-top: 28px; transition: color .3s var(--sm-ease); } body.synmax .sm-iconbox:hover .sm-iconbox__title { color: var(--sm-accent); } body.synmax .sm-pager-btn { transition: background-color .25s var(--sm-ease), border-color .25s var(--sm-ease), transform .25s var(--sm-ease); } body.synmax .sm-pager-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-1px); } body.synmax .sm-menu-pill { transition: background-color .3s var(--sm-ease), border-color .3s var(--sm-ease), transform .3s var(--sm-ease); } body.synmax .sm-menu-pill:hover { background: rgba(0,0,0,.42); border-color: rgba(255,255,255,.3); transform: translateY(-1px); } body.synmax .sm-footer__col a { transition: color .25s var(--sm-ease), transform .25s var(--sm-ease); } body.synmax .sm-footer__col a:hover { transform: translateX(4px); } body.synmax .sm-footer__social a { transition: transform .28s var(--sm-ease), opacity .28s var(--sm-ease); } body.synmax .sm-footer__social a:hover { transform: translateY(-3px) scale(1.12); } /* ==== 8.6 REDUCED MOTION — hard stop (belt & braces) ==== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.synmax *, body.synmax *::before, body.synmax *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.sm-anim .sm-hero__media { inset: 0; } html.sm-anim .sm-hero > .wp-block-cover__image-background { inset: 0; height: 100%; translate: none; } } /* ==== 9. MARITIME SUB-PAGES (capability + marketing pages) ==== */ .sm-hero--cap .sm-hero__content { justify-content: center; padding-top: 96px; padding-bottom: 96px; } .sm-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width:640px){ .sm-grid--2 { grid-template-columns: 1fr; } } .sm-section:not(.is-light):not(.sm-hero) + .sm-section:not(.is-light) { border-top: 1px solid rgba(233,233,233,.3); } .sm-section:not(.is-light):not(.sm-hero) + .sm-section:not(.is-light).sm-legal{border-top: none;} .sm-gap:not(.is-light) { background: #081220; } .sm-gap:not(.is-light) .sm-gap__card { background: rgba(22,31,45,.28); border-color: rgba(233,233,233,.2); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .sm-gap:not(.is-light) .sm-gap__title { color: #fff; } .sm-gap:not(.is-light) .sm-gap__divider { background: rgba(255,255,255,.14); } .sm-gap:not(.is-light) .sm-gap__copy p { color: var(--sm-body-dark); } .sm-gap__panel--img { background: #05080F; } .sm-gap__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .synmax .sm-gap__photo, .synmax .sm-featcard__photo { height: 100%; } .sm-multistep:not(.is-light) { background: #161F2D; } .sm-multistep:not(.is-light) .sm-step.sm-glass { background: rgba(22,31,45,.28); border-color: rgba(233,233,233,.2); } .sm-multistep:not(.is-light) .sm-step .sm-kicker { color: var(--sm-accent); } .sm-multistep:not(.is-light) .sm-step > .sm-step__title { color: #fff; } .sm-multistep:not(.is-light) .sm-step > .sm-step__body { color: var(--sm-body-dark); font-weight: 300; } .sm-statband { background: #081220; } .sm-statband__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; } .sm-section__inner > .sm-statband__row { margin-top: 40px; } .sm-statband__cell { background: rgba(0,0,0,.15); border: 1px solid rgba(233,233,233,.2); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .sm-statband__num { font-size: clamp(40px,5vw,48px); font-weight: 700; line-height: 1; background: var(--sm-title-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sm-statband__cap { font-size: var(--sm-fs-p2); line-height: 1.4; color: #69E0F5; width: min(300px, 100%); margin: 0; } /* Light statband — the shared is-light surface renders ink numbers on paper (master home "By the numbers" matches the main site's white band). */ .sm-section.is-light.sm-statband { background: var(--sm-paper); } .sm-section.is-light .sm-statband__cell { background: #FBFBFB; border-color: rgba(38,47,63,.12); } .sm-section.is-light .sm-statband__num { background: none; -webkit-text-fill-color: var(--sm-ink); color: var(--sm-ink); } .sm-section.is-light .sm-statband__cap { color: var(--sm-accent); } .sm-section.is-light .sm-statband__cap::before { background: rgba(38,47,63,.18); } .sm-statband__cap::before { content: ""; display: block; width: 100%; height: 1px; background: rgba(233,233,233,.32); margin: 0 auto 18px; } @media (max-width:760px){ .sm-statband__row { grid-template-columns: 1fr; } } .sm-usecases { background: #081220; } .sm-featcards { background: #081220; } .sm-featcards__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; } .sm-section__inner > .sm-featcards__row { margin-top: 40px; } .sm-featcard { position: relative; min-height: 544px; overflow: clip; border: 1px solid rgba(233,233,233,.2); display: flex; align-items: flex-end; } .sm-featcard__media { position: absolute; inset: 0; z-index: 0; } .sm-featcard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sm-featcard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,32,.12) 28%, rgba(8,18,32,.94) 100%); } figure.sm-featcard__media { margin: 0; } figure.sm-featcard__media img, .synmax figure.sm-featcard__media img { width: 100%; height: 100%; object-fit: cover; } figure.sm-featcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,32,.12) 28%, rgba(8,18,32,.94) 100%); } .sm-featcard__panel { min-height: 166px; position: relative; z-index: 1; width: 100%; margin: 0; padding: 24px; background: rgba(8,12,20,.55); border: 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 8px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .sm-featcard__kicker { font-size: var(--sm-fs-); letter-spacing: 2px; text-transform: uppercase; color: var(--sm-accent); font-weight: 600; margin: 0; } .sm-featcard__title { font-size: var(--sm-fs-h6); font-weight: 600; color: #fff; line-height: 1.2; margin: 0; } .sm-featcard__body { font-size: var(--sm-fs-small); font-weight: 300; line-height: 1.42; color: var(--sm-body-dark); margin: 0; } @media (max-width:900px){ .sm-featcards__row { grid-template-columns: 1fr; } .sm-featcard { min-height: 360px; } } .sm-featpara { border: 1px solid rgba(233,233,233,.2); background: linear-gradient(243deg, rgba(22,31,45,.2), rgba(22,31,45,.04)); padding: 36px 40px; text-align: center; } .sm-section__inner > .sm-featpara { margin-top: 24px; } .sm-featpara p { color: #fff; font-size: var(--sm-fs-body); line-height: 1.42; max-width: 840px; margin: 0 auto; } .sm-cta:not(.is-light) { background: #081220; } .sm-cta:not(.is-light) .sm-eyebrow { color: var(--eyebrow); } .sm-cta:not(.is-light) .sm-cta__title { color: #fff; } .sm-cta:not(.is-light) .sm-cta__body { color: var(--sm-body-dark); } .sm-cta:not(.is-light) .sm-cta__btns::before, .sm-cta:not(.is-light) .sm-cta__btns::after { background: rgba(255,255,255,.12); } .sm-cta:not(.is-light) .sm-btn--neutral { background: #fff; color: #04121A; --bracket: #2A3445; } .sm-cta:not(.is-light) .sm-btn--neutral:hover { background: #EAF6FF; } .sm-prose { display: flex; flex-direction: column; gap: 20px; max-width: 880px; } .sm-section__inner > .sm-prose { margin-top: 32px; } .sm-prose p { color: var(--sm-body-dark); font-size: var(--sm-fs-body); line-height: 1.5; margin: 0; } .sm-prose strong { color: #fff; font-weight: 600; } .sm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .sm-step > .sm-tags { margin-top: auto; padding-top: 20px; } .sm-tag { font-size: var(--sm-fs-tagline);; letter-spacing: .04em; color: #69E0F5; border: 1px solid rgba(105,224,245,.3); background: rgba(105,224,245,.06); padding: 5px 10px; border-radius: var(--sm-radius-sm); } .sm-panel { background: rgba(22,31,45,.4); border: 1px solid rgba(233,233,233,.2); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); padding: 40px; } .sm-section__inner > .sm-panel { margin-top: 40px; } .sm-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; } .sm-checklist li { position: relative; padding-left: 32px; color: var(--sm-body-dark); font-size: var(--sm-fs-p2); line-height: 1.45; } .sm-checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369E0F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } @media (max-width:760px){ .sm-checklist { grid-template-columns: 1fr; } } .sm-contact { background: #081220; } .sm-contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; width: 100%; } .sm-section__inner > .sm-contact__grid { margin-top: 8px; } @media (max-width:900px){ .sm-contact__grid { grid-template-columns: 1fr; gap: 40px; } } .sm-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sm-contact__grid .sm-contacts { margin-top: 28px; } .sm-contacts li { color: var(--sm-body-dark); font-size: var(--sm-fs-p2); line-height: 1.4; } .sm-contacts strong { color: #fff; font-weight: 600; display: inline-block; min-width: 116px; } .sm-contacts a { color: #69E0F5; text-decoration: none; } .sm-contacts a:hover { text-decoration: underline; } .sm-form { display: flex; flex-direction: column; gap: 20px; background: rgba(22,31,45,.4); border: 1px solid rgba(233,233,233,.2); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); padding: 36px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .sm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width:560px){ .sm-form__row { grid-template-columns: 1fr; } } .sm-field { display: flex; flex-direction: column; gap: 8px; } .sm-field__label { font-size: 13px; letter-spacing: .04em; color: #fff; font-weight: 600; } .sm-field__label em { color: var(--sm-body-dark); font-style: normal; font-weight: 400; } .sm-field__input { width: 100%; background: rgba(8,18,32,.6); border: 1px solid rgba(233,233,233,.22); color: #fff; font: inherit; font-size: var(--sm-fs-small); padding: 13px 14px; border-radius: var(--sm-radius-sm); box-sizing: border-box; } .sm-field__input::placeholder { color: #6B7689; } .sm-field__input:focus { outline: none; border-color: var(--sm-accent); box-shadow: 0 0 0 1px var(--sm-accent); } .sm-field__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2399B3D1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .sm-field__area { resize: vertical; min-height: 124px; line-height: 1.55; } .sm-form__submit { margin-top: 8px; align-self: flex-start; min-width: 200px; } /* --- lead-form chrome ---------------------------------------------------- */ /* The one declaration doing real work: without it the UA paints the native