/* * Storefront — a Shopclass public theme. * Built on the Modern design system: Archivo type, a warm light ground with a * teal accent and coral secondary, tonal ramps generated on one shared lightness * scale, soft ink-tinted elevation, 2px section rules and gently rounded corners. * SPDX-License-Identifier: GPL-3.0-or-later */ /* Archivo, self-hosted: one variable file per subset covers every weight. Licence: fonts/OFL.txt. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ────────────────────────────────────────────────────────────────────────── Tokens — the source of truth for the look. Retune here. ────────────────────────────────────────────────────────────────────────── */ :root { --color-bg: #f7f5f1; --color-surface: #ffffff; --color-text: #0f2742; --color-accent: #12a6a0; --color-accent-2: #ff6b4a; /* Fixed palette — mode-INVARIANT colours that must NOT flip with the theme: text/icons on a teal or coral fill, a scrim that stays dark, a frosted chip or glass rim that stays light, the near-black lightbox stage. Never redefine these in the dark blocks. */ --color-fixed-ink: #0f2742; /* non-flipping navy: scrim + media-overlay fills, ink on frosted chips */ --color-fixed-light: #ffffff; /* non-flipping white: labels on accent fills, frosted/glass surfaces, text on dark overlays */ --color-scrim: color-mix(in srgb, var(--color-fixed-ink) 55%, transparent); /* dim behind drawers & dialogs */ --color-overlay: #0b1420; /* near-black lightbox stage */ --color-divider: color-mix(in srgb, #0f2742 16%, transparent); /* Secondary/muted text. Derived from --color-text so it re-resolves per theme; tuned to clear WCAG AA (>=4.5:1) on both bg and surface, light and dark. */ --color-muted: color-mix(in srgb, var(--color-text) 70%, transparent); /* Teal for text/links sitting on the page ground. --color-accent (#12a6a0) is mode-invariant and only clears ~2.8:1 on the sand ground, so it fails AA as text; this steps to a darker teal on light and a lighter one on dark, keeping teal text >=4.5:1 in both themes. Fills/buttons still use --color-accent. */ --color-accent-ink: var(--color-accent-700); /* Coral/amber/pink counterpart to --color-accent-ink, same rationale: any TEXT or meaningful icon coloured with accent-2 must flip with the theme (dark backgrounds need the lighter -300 step) rather than hard-coding a step tuned for the light ground only. Fills/chips still use --color-accent-2 directly. */ --color-accent-2-ink: var(--color-accent-2-700); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f2f3f5; --color-neutral-200: #e2e5e9; --color-neutral-300: #ccd2d9; --color-neutral-400: #a7b1bc; --color-neutral-500: #7d8a98; --color-neutral-600: #5f6d7c; --color-neutral-700: #435466; --color-neutral-800: #2c3c4e; --color-neutral-900: #16273a; --color-accent-100: #dcf4f2; --color-accent-200: #b7e8e5; --color-accent-300: #86d6d1; --color-accent-400: #4cc0ba; --color-accent-500: #12a6a0; --color-accent-600: #0f8c87; --color-accent-700: #0d716d; --color-accent-800: #0b5854; --color-accent-900: #0a413e; --color-accent-2-100: #ffe7e0; --color-accent-2-200: #ffcabd; --color-accent-2-300: #ffa88f; --color-accent-2-400: #ff8767; --color-accent-2-500: #ff6b4a; --color-accent-2-600: #ec4e2b; --color-accent-2-700: #c53c1e; --color-accent-2-800: #99301a; --color-accent-2-900: #6b2414; /* Solid-fill tokens for buttons/chips that carry --color-fixed-light text. The base accent (500) only clears ~2.8:1 against white, so white-on-accent fails AA as text; these resolve to the LIGHTEST ramp step that still clears >=4.5:1 against white, keeping fills as vibrant as AA allows. Fill-vs-white is mode-invariant (the ramps don't flip light/dark), so no dark-theme override is needed. Redefined per palette below since each hue reaches AA at a different step (teal needs 700; indigo/violet clear it already at 500). The -hover/-active steps are one/two steps further down the same ramp, so press states only ever gain contrast, never lose it. */ --color-accent-fill: var(--color-accent-700); --color-accent-fill-hover: var(--color-accent-800); --color-accent-fill-active: var(--color-accent-900); --color-accent-2-fill: var(--color-accent-2-700); --color-accent-2-fill-hover: var(--color-accent-2-800); --font-heading: "Archivo", system-ui, sans-serif; --font-heading-weight: 800; --font-body: "Archivo", system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; /* Elevation — soft ink-tinted shadows tuned to the light ground. */ --shadow-sm: 0 1px 3px color-mix(in srgb, #262c38 10%, transparent), 0 1px 2px color-mix(in srgb, #262c38 8%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, #262c38 12%, transparent), 0 2px 6px color-mix(in srgb, #262c38 8%, transparent); --shadow-lg: 0 18px 44px color-mix(in srgb, #262c38 18%, transparent), 0 6px 16px color-mix(in srgb, #262c38 10%, transparent); /* Layout */ --sf-container: 1200px; --sf-header-h: 66px; /* Legacy aliases — earlier markup referenced these; keep them resolving to the design tokens so every template stays on one palette. */ --sf-navy: var(--color-text); --sf-teal: var(--color-accent); --sf-teal-dark: var(--color-accent-600); --sf-slate: var(--color-neutral-700); --sf-surface: var(--color-bg); --sf-coral: var(--color-accent-2); --sf-bg: var(--color-surface); --sf-panel: var(--color-surface); --sf-ink: var(--color-text); --sf-muted: var(--color-neutral-700); --sf-line: var(--color-divider); --sf-shadow: var(--shadow-sm); --sf-radius: var(--radius-lg); --sf-radius-sm: var(--radius-md); --sf-gap: var(--space-6); /* Light is the default and the only theme that applies on its own. Dark still ships — set data-theme="dark" on to force it, or data-theme="auto" to follow the OS. With no attribute present the UI never darkens by itself. */ color-scheme: light; } /* Opt-in dark theme. Keep these tokens in sync with the data-theme="auto" block. */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0c1a2b; --color-surface: #12283f; --color-text: #eaf1f8; --color-divider: color-mix(in srgb, #eaf1f8 16%, transparent); --color-accent-ink: var(--color-accent-300); --color-accent-2-ink: var(--color-accent-2-300); --color-neutral-100: #16273a; --color-neutral-200: #1e3145; --color-neutral-300: #294056; --color-neutral-400: #3c566d; --color-neutral-500: #6b8299; --color-neutral-600: #93a6b8; --color-neutral-700: #b6c4d2; --color-neutral-800: #d3dde7; --color-neutral-900: #eaf1f8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .4); } /* data-theme="auto" tracks the OS setting; mirrors the tokens above. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --color-bg: #0c1a2b; --color-surface: #12283f; --color-text: #eaf1f8; --color-divider: color-mix(in srgb, #eaf1f8 16%, transparent); --color-accent-ink: var(--color-accent-300); --color-accent-2-ink: var(--color-accent-2-300); --color-neutral-100: #16273a; --color-neutral-200: #1e3145; --color-neutral-300: #294056; --color-neutral-400: #3c566d; --color-neutral-500: #6b8299; --color-neutral-600: #93a6b8; --color-neutral-700: #b6c4d2; --color-neutral-800: #d3dde7; --color-neutral-900: #eaf1f8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .4); } } /* Palette presets — swap only the accent (primary) and accent-2 (secondary) tonal ramps for `data-palette="indigo"|"violet"`; teal is the `:root` default so it needs no block. bg/surface/text/neutral/fixed tokens are untouched, so only the brand hue moves. Ramps are generated in OKLCH mirroring the teal ramp's own step-to-step LIGHTNESS shape (100 lightest … 900 darkest), anchored to each hue's true rendered lightness rather than the teal ramp's raw numbers — blue/violet renders noticeably darker than teal at matched OKLCH lightness, so a straight copy would crush the ramp. --color-accent-700 clears >=4.5:1 on the light ground and --color-accent-300 clears >=4.5:1 on the dark ground, so --color-accent-ink (which resolves to one of those two, see above) keeps passing text contrast under either preset. */ :root[data-palette="indigo"] { --color-accent: #4f46e5; --color-accent-2: #f59e0b; --color-accent-100: #aeb9ff; --color-accent-200: #9aa6ff; --color-accent-300: #7f89ff; --color-accent-400: #6465ff; --color-accent-500: #4f46e5; --color-accent-600: #4000de; --color-accent-700: #2e00a8; --color-accent-800: #1e0076; --color-accent-900: #0f004a; --color-accent-2-100: #fff3e5; --color-accent-2-200: #ffe4c5; --color-accent-2-300: #ffcf97; --color-accent-2-400: #ffb557; --color-accent-2-500: #f59e0b; --color-accent-2-600: #d68900; --color-accent-2-700: #9c6200; --color-accent-2-800: #955e00; --color-accent-2-900: #784b00; /* Indigo already clears 4.5:1 at 500, so fill sits two steps lighter than teal's; amber accent-2 only reaches AA at 700. */ --color-accent-fill: var(--color-accent-500); --color-accent-fill-hover: var(--color-accent-600); --color-accent-fill-active: var(--color-accent-700); --color-accent-2-fill: var(--color-accent-2-700); --color-accent-2-fill-hover: var(--color-accent-2-800); } :root[data-palette="violet"] { --color-accent: #7c3aed; --color-accent-2: #ec4899; --color-accent-100: #cbbeff; --color-accent-200: #bba9ff; --color-accent-300: #a789ff; --color-accent-400: #9261ff; --color-accent-500: #7c3aed; --color-accent-600: #6900d8; --color-accent-700: #4f00a6; --color-accent-800: #380079; --color-accent-900: #220050; --color-accent-2-100: #ffe7ef; --color-accent-2-200: #ffccdf; --color-accent-2-300: #ffa6ca; --color-accent-2-400: #ff73b2; --color-accent-2-500: #ec4899; --color-accent-2-600: #d90083; --color-accent-2-700: #b1006a; --color-accent-2-800: #8b0052; --color-accent-2-900: #69003d; /* Violet already clears 4.5:1 at 500, like indigo; pink accent-2 gets there one step earlier than teal/indigo's amber-or-coral, at 600. */ --color-accent-fill: var(--color-accent-500); --color-accent-fill-hover: var(--color-accent-600); --color-accent-fill-active: var(--color-accent-700); --color-accent-2-fill: var(--color-accent-2-600); --color-accent-2-fill-hover: var(--color-accent-2-700); } /* ────────────────────────────────────────────────────────────────────────── Base ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Neutralise the browser's default fieldset box. The theme groups fields with headings, not
, but plugins (the search_form / item custom-field hooks) wrap their fields in a bare
, which would otherwise draw a stray border. */ fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } body.sf { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } /* Ink token, not the raw --color-accent: base teal only clears ~2.8:1 on the page ground, so text/links route through the mode-flipping ink step instead. */ a { color: var(--color-accent-ink); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--color-accent-ink); text-decoration: underline; } img { display: block; max-width: 100%; height: auto; } .text-muted, .sf-muted { color: var(--color-muted); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .sf-container { width: 100%; max-width: var(--sf-container); margin-inline: auto; padding-inline: var(--space-6); } .sf-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-text); color: var(--color-bg); padding: 10px 16px; font-family: var(--font-heading); font-weight: 800; } .sf-skip:focus { left: 8px; top: 8px; border-radius: var(--radius-md); } /* ────────────────────────────────────────────────────────────────────────── Design-system components (available to every template) ────────────────────────────────────────────────────────────────────────── */ .btn, .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: calc(var(--space-2) * 0.85) var(--space-3); border-radius: var(--radius-md); transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; } .btn svg, .sf-btn svg { display: block; } .btn:hover, .sf-btn:hover { text-decoration: none; } .btn:active, .sf-btn:active { transform: translateY(1px); } .btn:disabled, .sf-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Fill token, not the raw --color-accent: base teal (500) only clears ~2.8:1 against the white label, so the AA-safe step (see --color-accent-fill above) is used instead. */ .btn-primary, .sf-btn--primary { background: var(--color-accent-fill); color: var(--color-fixed-light); } .btn-primary:hover, .sf-btn--primary:hover { background: var(--color-accent-fill-hover); color: var(--color-fixed-light); } .btn-primary:active, .sf-btn--primary:active { background: var(--color-accent-fill-active); } .btn-secondary, .sf-btn--ghost, .sf-btn--secondary { color: var(--color-text); border-color: var(--color-divider); } .btn-secondary:hover, .sf-btn--ghost:hover, .sf-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } .btn-secondary:active, .sf-btn--ghost:active, .sf-btn--secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } /* Fill token, not the raw --color-accent-2: base coral/amber/pink (500) fails AA against the white label in every palette (see --color-accent-2-fill above). */ .btn-accent, .sf-btn--accent { background: var(--color-accent-2-fill); color: var(--color-fixed-light); } .btn-accent:hover, .sf-btn--accent:hover { background: var(--color-accent-2-fill-hover); color: var(--color-fixed-light); } /* Solid destructive button — the confirm dialog's primary action. Uses the darker accent-2-700 fill so the white label clears AA (≈5.2:1); the -600 tint fails it. */ .sf-btn--danger { background: var(--color-accent-2-700); color: var(--color-fixed-light); border-color: transparent; } .sf-btn--danger:hover { background: var(--color-accent-2-800); border-color: transparent; color: var(--color-fixed-light); } .btn-ghost { color: var(--color-accent-ink); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } /* Touch targets: on a coarse pointer every button clears the 44px WCAG 2.5.5 size (the resting look stays denser on mouse/trackpad), and breadcrumb text links get a comfortable hit height without bloating the row. */ @media (pointer: coarse) { .btn, .sf-btn { min-height: 44px; } .btn-icon, .sf-btn--icon-only { width: 44px; height: 44px; } .sf-crumbs a { display: inline-flex; align-items: center; min-height: 32px; } } .btn-icon, .sf-btn--icon-only { width: 34px; height: 34px; padding: 0; flex: none; } .btn-block, .sf-btn--block { width: 100%; } .sf-btn--sm { font-size: 12px; padding: 4px var(--space-2); } /* A form's own action buttons match its 40px fields. */ @media not (pointer: coarse) { .sf-form .sf-btn[type=submit], .sf-comment-form .sf-btn[type=submit], .sf-dialog__actions .sf-btn { min-height: 40px; } } /* Screen-reader-only utility: keeps a label in the accessibility tree without occupying layout (used by icon-only controls and the price/keyword fields). */ .sf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Forms */ .field > label, .sf-field > label, .sf-field label:not(.sf-check) { display: block; font-size: 13px; margin-bottom: 5px; color: var(--color-muted); font-weight: 600; } .input, .sf-input, .sf-textarea, .sf-select, .sf-field input[type="text"], .sf-field input[type="email"], .sf-field input[type="password"], .sf-field input[type="tel"], .sf-field input[type="url"], .sf-field input[type="number"], .sf-field textarea, .sf-field select { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; } .input:hover, .sf-input:hover, .sf-textarea:hover, .sf-select:hover, .sf-field input:hover, .sf-field textarea:hover, .sf-field select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus, .input:focus-visible, .sf-input:focus, .sf-textarea:focus, .sf-select:focus, .sf-field input:focus, .sf-field textarea:focus, .sf-field select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); position: relative; z-index: 1; } textarea.input, .sf-textarea, .sf-field textarea { min-height: 96px; resize: vertical; } select.sf-select, .sf-field select { cursor: pointer; } .sf-field { margin-bottom: var(--space-4); } .sf-field--check label, .sf-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--color-text); margin: 0; } .sf-field--check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); } .sf-field__hint { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.45; color: var(--color-muted); } .sf-field input[type="file"] { max-width: 100%; font: inherit; font-size: 13px; color: var(--color-muted); } .sf-field input[type="file"]::file-selector-button { margin-inline-end: var(--space-3); padding: 6px var(--space-3); cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: var(--color-text); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); transition: background .15s ease; } .sf-field input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* Cards (generic surface) */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* Tags */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); font-weight: 600; } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-ink); } /* Tables */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-2); border-bottom: 2px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* Rule */ .hr, .sf-hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* Panel */ .sf-panel { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } /* ────────────────────────────────────────────────────────────────────────── Header / navigation ────────────────────────────────────────────────────────────────────────── */ .sf-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border-bottom: 2px solid var(--color-divider); } .sf-header__bar { display: flex; align-items: center; gap: var(--space-4); min-height: var(--sf-header-h); } .sf-logo { display: inline-flex; align-items: center; gap: 8px; margin-right: var(--space-4); font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-text); letter-spacing: -0.02em; } .sf-logo:hover { text-decoration: none; color: var(--color-text); } .sf-logo::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--color-accent); display: inline-block; } .sf-logo img { max-height: 34px; width: auto; } /* An inline SVG logo (viewBox only, no width/height attrs) has no intrinsic size, so a definite height is needed for the width to resolve from the aspect ratio — max-height alone computes to 0×0. max-width guards an over-wide wordmark SVG. */ .sf-logo svg { height: 34px; width: auto; max-width: 220px; } /* Hide the wordmark's brand bullet whenever a real logo is present — an uploaded raster (img) or an inline SVG mark. The ::before square is only the fallback mark for the plain-text wordmark. */ .sf-logo:has(.sf-logo__mark)::before, .sf-logo:has(img)::before { display: none; } .sf-wordmark { letter-spacing: -0.02em; } /* Compact logo mark — hidden by default; the header's mobile breakpoint below swaps it in for the full mark. Only rendered as its own element when a compact upload/SVG is set — otherwise the full mark stands in for it and just keeps showing at every width. */ .sf-logo__mark--compact { display: none; } /* The brand SVG paints its ink parts in fixed navy, which vanishes on the dark ground. */ :root[data-theme="dark"] .sf-logo svg [fill="#0f2742" i] { fill: var(--color-text); } :root[data-theme="dark"] .sf-logo svg [stroke="#0f2742" i] { stroke: var(--color-text); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .sf-logo svg [fill="#0f2742" i] { fill: var(--color-text); } :root[data-theme="auto"] .sf-logo svg [stroke="#0f2742" i] { stroke: var(--color-text); } } .sf-nav { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; } .sf-nav__link { color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: 14px; font-weight: 600; } .sf-nav__link:hover { color: var(--color-accent-ink); text-decoration: none; } .sf-nav__cta { margin-inline-start: var(--space-1); } .sf-nav-toggle { display: none; margin-inline-start: auto; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .sf-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; } /* Active nav item — a short teal underline so the current section is visible, not only announced via aria-current. */ .sf-nav__link { position: relative; } .sf-nav__link[aria-current] { color: var(--color-accent-ink); } .sf-nav__link[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; background: var(--color-accent); border-radius: 2px; } /* Account menu — one avatar+name control that opens a dropdown (desktop) or shows its items inline inside the mobile drawer. Replaces the old redundant icon+greeting pair. */ .sf-account { position: relative; } .sf-account__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 4px 6px 4px 4px; margin-inline-start: var(--space-1); background: none; border: 0; border-radius: var(--radius-md); font: inherit; color: var(--color-text); cursor: pointer; transition: background-color .15s ease; } .sf-account__toggle:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); } /* Higher specificity than the 60px .sf-avatar base so the header control stays compact. */ .sf-account__toggle .sf-account__avatar { width: 30px; height: 30px; border-radius: var(--radius-sm); box-shadow: none; } .sf-account__toggle .sf-avatar__monogram { font-size: 12px; font-weight: 800; } .sf-account__name { font-size: 14px; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-account__toggle > svg { color: var(--color-muted); transition: transform .15s ease; flex: none; } .sf-account__toggle[aria-expanded="true"] > svg { transform: rotate(180deg); } .sf-account__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } /* `display: flex` above would otherwise beat the UA `[hidden]{display:none}` (equal specificity, author wins), leaving the menu open on load; keep it closed until the toggle clears [hidden]. The mobile drawer re-shows it inline in its own rule below. */ .sf-account__menu[hidden] { display: none; } .sf-account__item { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 9px var(--space-3); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; } .sf-account__item:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-ink); text-decoration: none; } .sf-account__item svg { flex: none; color: currentColor; } .sf-account__sep { height: 1px; margin: var(--space-1) 0; border: 0; background: var(--color-divider); } .sf-account__item--logout { color: var(--color-accent-2-ink); } .sf-account__item--logout:hover { background: color-mix(in srgb, var(--color-accent-2) 12%, transparent); color: var(--color-accent-2-ink); } @media (prefers-reduced-motion: no-preference) { .sf-account__menu:not([hidden]) { animation: sf-menu-in .16s cubic-bezier(0.16, 1, 0.3, 1); } } @keyframes sf-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Scrim behind the open mobile nav drawer. Gated by the [hidden] attribute (JS toggles it), so it never shows on desktop where the drawer cannot open. */ .sf-nav-backdrop { position: fixed; inset: 0; top: var(--sf-header-h); z-index: 30; background: var(--color-scrim); } /* Compact inline search box (used on the 404 page). NB: the bare class must not be `.sf-search` — that collides with the `sf-search` body page-class. */ .sf-searchbox { display: flex; gap: 0; align-items: stretch; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .sf-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 15px; padding: 12px 14px; } .sf-search__input:focus { outline: none; } .sf-searchbox .sf-btn { border-radius: 0; padding-inline: var(--space-6); } /* ────────────────────────────────────────────────────────────────────────── Main ────────────────────────────────────────────────────────────────────────── */ .sf-main { display: block; flex: 1 0 auto; } body.sf > * { flex-shrink: 0; } .sf-main__pad { padding-block: var(--space-6) var(--space-8); } /* ── Home hero ── */ .sf-hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider); /* The home hero is a brand surface: a bright teal/coral field lifts it off the sand ground so it reads as the peak of the page, not another section. */ background: radial-gradient(115% 120% at 86% -12%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 56%), radial-gradient(92% 100% at -8% 118%, color-mix(in srgb, var(--color-accent-2) 15%, transparent), transparent 55%), var(--color-bg); } .sf-hero__inner { position: relative; z-index: 1; padding-block: clamp(var(--space-8), 8vw, 88px); } /* Content sits in a left column so the full-width search row never runs under the brand motif; the motif breathes in the right whitespace, behind the content. */ .sf-hero__content { position: relative; z-index: 1; max-width: 800px; } .sf-hero__title { font-size: clamp(46px, 7.4vw, 78px); line-height: 1.0; margin: 0 0 var(--space-4); max-width: 16ch; letter-spacing: -0.03em; text-wrap: balance; } .sf-hero__sub { color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: 52ch; font-size: clamp(16px, 1.5vw, 19px); margin-bottom: var(--space-6); text-wrap: pretty; } .sf-hero__decor { position: absolute; top: 0; right: 0; z-index: 0; width: min(40%, 440px); height: auto; pointer-events: none; opacity: 0.95; filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--color-accent) 24%, transparent)); } @media (max-width: 860px) { .sf-hero__decor { display: none; } } /* Hero entrance — one authored moment. Content elements rise into place with transform only, never opacity, so they stay fully visible even when a headless renderer or hidden tab captures the frame mid-animation. Only the decorative, aria-hidden motif fades in. The global reduced-motion rule collapses these. */ @keyframes sf-hero-rise { from { transform: translateY(18px); } to { transform: none; } } @keyframes sf-hero-pop { from { transform: scale(.92) rotate(-2deg); } to { transform: none; } } .sf-hero__title { animation: sf-hero-rise .6s cubic-bezier(.22, 1, .36, 1) both; } .sf-hero__sub { animation: sf-hero-rise .6s cubic-bezier(.22, 1, .36, 1) .05s both; } .sf-hero__glass { animation: sf-hero-rise .7s cubic-bezier(.22, 1, .36, 1) .1s both; } .sf-hero__popular { animation: sf-hero-rise .6s cubic-bezier(.22, 1, .36, 1) .16s both; } .sf-hero__decor { animation: sf-hero-pop .9s cubic-bezier(.22, 1, .36, 1) .05s both; } .sf-hero__glass { width: 100%; padding: var(--space-3); border-radius: 16px; background: color-mix(in srgb, var(--color-bg) 55%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid color-mix(in srgb, var(--color-fixed-light) 55%, transparent); box-shadow: var(--shadow-lg); } .sf-hero__search { display: flex; flex-wrap: nowrap; gap: 0; border: 1px solid var(--color-divider); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-bg); } .sf-hero__search .sf-hero__field { flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; } .sf-hero__search .sf-hero__field + .sf-hero__field { flex: 1 1 180px; border-inline-start: 1px solid var(--color-divider); } .sf-hero__search input, .sf-hero__search select { border: 0; background: transparent; font: inherit; font-size: 15px; height: 54px; color: var(--color-text); flex: 1; min-width: 0; } .sf-hero__search input:focus, .sf-hero__search select:focus { outline: none; } .sf-hero__search .sf-hero__cat { flex: 0 0 auto; display: flex; align-items: center; border-inline-start: 1px solid var(--color-divider); } .sf-hero__search .sf-hero__cat select { height: 54px; padding: 0 14px; cursor: pointer; font-size: 14px; } .sf-hero__search .sf-btn { border-radius: 0; padding-inline: var(--space-6); font-size: 14px; white-space: nowrap; } .sf-hero__icon { flex: none; color: var(--color-neutral-600); } .sf-hero__popular { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); align-items: center; } .sf-hero__popular > span { font-size: 12px; color: var(--color-muted); } .sf-hero__chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); border: 0; background: var(--color-neutral-100); color: var(--color-neutral-800); font: inherit; font-size: 12px; transition: background .15s ease, color .15s ease; } .sf-hero__chip:hover { background: var(--color-accent-100); color: var(--color-accent-800); text-decoration: none; } @media (max-width: 640px) { .sf-hero__search { flex-direction: column; } .sf-hero__search > * { border-inline-start: 0 !important; border-top: 1px solid var(--color-divider); } .sf-hero__search > *:first-child { border-top: 0; } /* Stacked: each control takes its natural height, so the horizontal flex-basis (300/180px) never inflates a field vertically. Matches the base rules' specificity so it wins inside the query. */ .sf-hero__search .sf-hero__field, .sf-hero__search .sf-hero__field + .sf-hero__field, .sf-hero__search .sf-hero__cat { flex: 0 0 auto; } .sf-hero__search .sf-btn { width: 100%; padding: 14px 20px; } } /* 2026-10-23: Exposé v5. The image mosaic is the visual header across the complete detail container. Only the content below it splits into reading column and contact rail. */ @media (min-width: 1121px) { .sf-detail__grid { grid-template-columns: minmax(0, 824px) minmax(320px, 360px); grid-template-areas: "media media" "intro aside" "body aside"; row-gap: 26px; } .sf-detail__media { width: 100%; } .sf-gallery--mosaic { grid-template-columns: minmax(0, 1.95fr) minmax(330px, .95fr); height: clamp(520px, 45vw, 620px); } .sf-gallery--mosaic .sf-gallery__thumbs { min-width: 0; } .sf-detail__aside { align-self: start; } } /* B2B acquisition pages: one visual and data contract for partners, media and pricing. */ .wa-b2b-page{color:#102a43;background:#fff}.wa-page-eyebrow{margin:0 0 9px;color:#08766f;font-size:12px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.wa-b2b-hero{padding:72px 0;background:linear-gradient(135deg,#edf9f7 0%,#fff 55%,#edf3f8 100%);border-bottom:1px solid #dce7e9}.wa-b2b-hero--ads{background:linear-gradient(135deg,#eef8f6 0%,#fff6ef 100%)}.wa-b2b-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:60px;align-items:center}.wa-b2b-hero h1{max-width:820px;margin:0;font-size:clamp(42px,5vw,68px);line-height:1.01;letter-spacing:-.045em;text-wrap:balance}.wa-b2b-hero__lead{max-width:760px;margin:22px 0 0;color:#4f6578;font-size:18px;line-height:1.65}.wa-b2b-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.wa-b2b-actions .sf-btn{min-height:52px;padding-inline:22px}.wa-b2b-proof{display:flex;flex-wrap:wrap;gap:10px 24px;margin:25px 0 0;padding:0;list-style:none;color:#405d70;font-size:13px;font-weight:700}.wa-b2b-proof li:before{content:'✓';margin-right:7px;color:#08766f}.wa-b2b-promo{padding:30px;border-radius:22px;background:#102f49;color:#fff;box-shadow:0 22px 52px rgba(13,43,69,.18)}.wa-b2b-promo>span{color:#79eadf;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.wa-b2b-promo>strong{display:block;margin:10px 0;font-size:30px;line-height:1.1}.wa-b2b-promo p{margin:0;color:#d6e4eb;line-height:1.6}.wa-b2b-promo a{display:inline-block;margin-top:20px;color:#fff;font-weight:800}.wa-b2b-section{padding:72px 0}.wa-b2b-section--soft{background:#f3f7f8}.wa-b2b-heading{max-width:820px;margin-bottom:30px}.wa-b2b-heading h2{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.035em}.wa-b2b-heading>p:last-child{margin:12px 0 0;color:#52687a;line-height:1.65}.wa-b2b-plans,.wa-ad-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.wa-b2b-plans>article,.wa-ad-products>article{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid #d9e4e8;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(15,42,67,.07)}.wa-b2b-plans>article.is-featured,.wa-ad-products>article.is-featured{border:2px solid #26b8ad;box-shadow:0 18px 45px rgba(9,118,111,.14)}.wa-b2b-plan__top{display:flex;align-items:center;justify-content:space-between;gap:16px}.wa-b2b-plan__top span,.wa-ad-products>article>span{padding:6px 10px;border-radius:999px;background:#e2f6f3;color:#08766f;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.wa-b2b-plan__top b{color:#617587;font-size:12px}.wa-b2b-plans h3,.wa-ad-products h3{margin:17px 0 7px;font-size:25px}.wa-b2b-plan__price{display:grid;gap:3px;margin:10px 0}.wa-b2b-plan__price strong,.wa-ad-products>article>strong{color:#08766f;font-size:31px}.wa-b2b-plan__price small{color:#607589}.wa-b2b-plans ul,.wa-ad-products ul{flex:1;padding-left:20px;color:#314a60;line-height:1.75}.wa-b2b-plans li::marker,.wa-ad-products li::marker{color:#21a99e}.wa-b2b-plans>article>a{display:block;margin-top:18px;padding:13px 15px;border-radius:10px;background:#08766f;color:#fff;text-align:center;text-decoration:none;font-weight:850}.wa-b2b-compare{margin-top:24px;overflow-x:auto;border:1px solid #d8e3e7;border-radius:17px}.wa-b2b-compare table{width:100%;min-width:620px;border-collapse:collapse;background:#fff}.wa-b2b-compare th,.wa-b2b-compare td{padding:14px 18px;border-bottom:1px solid #e4eaed;text-align:left}.wa-b2b-compare thead th{background:#102f49;color:#fff}.wa-b2b-compare tbody th{color:#173b52}.wa-b2b-compare td{color:#52677b}.wa-b2b-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.wa-b2b-steps article{padding:24px;border:1px solid #dae5e8;border-radius:17px;background:#fff}.wa-b2b-steps article>span{display:grid;place-items:center;width:40px;height:40px;margin-bottom:22px;border-radius:12px;background:#dff5f1;color:#08766f;font-weight:900}.wa-b2b-steps h3{margin:0 0 8px;font-size:18px}.wa-b2b-steps p{margin:0;color:#5d7384;font-size:13px;line-height:1.6}.wa-ad-products{grid-template-columns:repeat(4,minmax(0,1fr))}.wa-ad-products>article{padding:25px}.wa-ad-products>article>p{color:#5c7182;line-height:1.58}.wa-ad-products>article>strong{font-size:22px}.wa-ad-specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.8fr);gap:55px;align-items:center}.wa-ad-specs h2{margin:0;font-size:clamp(30px,4vw,47px);line-height:1.08}.wa-ad-specs>div>p:last-child{color:#52677b;line-height:1.65}.wa-ad-specs__cards{display:grid;gap:14px}.wa-ad-specs__cards article{padding:22px;border:1px solid #d8e4e7;border-radius:16px;background:#fff}.wa-ad-specs__cards span,.wa-ad-specs__cards strong{display:block}.wa-ad-specs__cards span{color:#08766f;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.wa-ad-specs__cards strong{margin:7px 0;font-size:18px}.wa-ad-specs__cards p{margin:0;color:#607589;font-size:13px}.wa-b2b-lead-wrap{padding-block:74px}.wa-lead-card{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:48px;padding:38px;border:1px solid #d7e4e6;border-radius:24px;background:linear-gradient(135deg,#f1faf8,#fff 42%);box-shadow:0 18px 50px rgba(15,42,67,.08);scroll-margin-top:95px}.wa-lead-card__intro h2{margin:0;font-size:clamp(28px,3.4vw,42px);line-height:1.1}.wa-lead-card__intro>p:not(.wa-page-eyebrow){color:#52677b;line-height:1.65}.wa-lead-card__intro ul{padding-left:20px;color:#355366;line-height:1.75}.wa-lead-form{position:relative;padding:26px;border:1px solid #dce6e9;border-radius:18px;background:#fff}.wa-lead-form__honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.wa-lead-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wa-lead-form label>span{display:block;margin-bottom:6px;color:#173b52;font-size:12px;font-weight:800}.wa-lead-form input,.wa-lead-form select,.wa-lead-form textarea{width:100%;min-height:47px;border:1px solid #b9c8d2;border-radius:9px;padding:10px 12px;background:#fff;color:#102a43;font:inherit}.wa-lead-form textarea{min-height:120px;resize:vertical}.wa-lead-form input:focus,.wa-lead-form select:focus,.wa-lead-form textarea:focus{outline:2px solid #54cec4;outline-offset:1px;border-color:#08766f}.wa-lead-form__wide{grid-column:1/-1}.wa-lead-form__consent{display:flex;align-items:flex-start;gap:9px;margin:18px 0;color:#52677b;font-size:12px;line-height:1.5}.wa-lead-form__consent input{width:16px;min-height:16px;margin-top:2px;flex:none}.wa-lead-form>.sf-btn{width:100%;min-height:50px}.wa-lead-form__note{margin:9px 0 0;color:#6a7e8e;font-size:11px;text-align:center}.wa-b2b-faq{padding:70px 0;background:#102f49;color:#fff}.wa-b2b-faq .wa-page-eyebrow{color:#79eadf}.wa-b2b-faq h2{color:#fff}.wa-b2b-faq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wa-b2b-faq details{padding:20px 22px;border:1px solid rgba(255,255,255,.17);border-radius:14px;background:rgba(255,255,255,.06)}.wa-b2b-faq summary{cursor:pointer;font-weight:800}.wa-b2b-faq details p{margin:13px 0 0;color:#d5e3ea;font-size:13px;line-height:1.65} @media(max-width:1080px){.wa-b2b-hero{padding:54px 0}.wa-b2b-hero__grid{grid-template-columns:minmax(0,1fr) 330px;gap:30px}.wa-ad-products{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-b2b-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-lead-card{grid-template-columns:1fr;gap:26px}.wa-ad-specs{grid-template-columns:1fr}.wa-footer-action__inner{min-height:0;align-items:flex-start;flex-direction:column;padding-block:38px}.wa-footer-action__buttons{width:100%}} @media(max-width:820px){.wa-b2b-hero__grid{grid-template-columns:1fr}.wa-b2b-promo{max-width:none}.wa-b2b-plans{grid-template-columns:1fr}.wa-b2b-hero h1{font-size:clamp(36px,7vw,52px)}.wa-b2b-section{padding:54px 0}.wa-b2b-lead-wrap{padding-block:54px}.wa-lead-card{padding:28px}.sf-footer__intro{align-items:flex-start}.sf-footer__trust{display:flex;flex-wrap:wrap;gap:6px 12px;text-align:left}.sf-footer__trust svg{flex:none}} @media(max-width:620px){.wa-b2b-hero{padding:40px 0}.wa-b2b-actions{flex-direction:column}.wa-b2b-actions .sf-btn{width:100%;justify-content:center}.wa-b2b-proof{display:grid;gap:8px}.wa-b2b-plans,.wa-ad-products,.wa-b2b-steps,.wa-b2b-faq__grid{grid-template-columns:1fr}.wa-b2b-plan__top{align-items:flex-start;flex-direction:column}.wa-lead-card{margin-inline:0;padding:22px 16px;border-radius:18px}.wa-lead-form{padding:18px 14px}.wa-lead-form__grid{grid-template-columns:1fr}.wa-lead-form__wide{grid-column:auto}.wa-ad-specs__cards{grid-template-columns:1fr}} .wa-ad-booking{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:28px;border:1px solid #d7e4e8;border-radius:20px;background:#f7fafb;box-shadow:0 14px 38px rgba(15,42,67,.08)}.wa-ad-booking label{display:grid;gap:7px;color:#173b52;font-size:13px;font-weight:800}.wa-ad-booking input,.wa-ad-booking select{min-width:0;width:100%;box-sizing:border-box;min-height:48px;padding:11px 12px;border:1px solid #b8c9d1;border-radius:9px;background:#fff;color:#102a43;font:inherit}.wa-ad-booking button{grid-column:1/-1;min-height:50px;border:0;border-radius:10px;background:#08766f;color:#fff;font-weight:850;font-size:1rem;cursor:pointer}.wa-ad-booking button:disabled{opacity:.55;cursor:wait}.wa-ad-booking [role=alert]{grid-column:1/-1;margin:0;padding:12px;border-radius:9px;background:#fff0eb;color:#8c3215}.wa-ad-booking-login{padding:28px;border:1px solid #d7e4e8;border-radius:20px;background:#f4f8f9}.wa-ad-booking-login h3{margin-top:0}.wa-ad-booking-login p{max-width:760px;color:#52677b;line-height:1.6}@media(max-width:820px){.wa-ad-booking{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.wa-ad-booking{grid-template-columns:1fr;padding:20px 16px}.wa-ad-booking button,.wa-ad-booking [role=alert]{grid-column:1}} /* Homepage: search is the primary action; provider entry points are separate. */ .wa-home-paths{padding:34px 0 42px;background:#fff;border-bottom:1px solid #e1e8eb}.wa-home-paths__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 30px;margin-bottom:20px}.wa-home-paths__head .wa-hero__eyebrow{grid-column:1/-1;color:#08766f}.wa-home-paths__head h2{max-width:720px;margin:0;color:#102f49;font-size:clamp(25px,3vw,36px);line-height:1.12}.wa-home-paths__head>a{color:#08766f;font-weight:800}.wa-home-paths__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wa-home-paths__grid>a{display:grid;gap:5px;padding:22px 24px;border:1px solid #d9e4e8;border-radius:16px;background:#f8fbfc;color:#102f49;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.wa-home-paths__grid>a:hover{transform:translateY(-2px);border-color:#8ccfc8;box-shadow:0 12px 30px rgba(15,42,67,.08)}.wa-home-paths__grid span{color:#08766f;font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.wa-home-paths__grid strong{font-size:20px}.wa-home-paths__grid small{color:#52677b;font-size:13px;line-height:1.45} /* Publishing choice and professional launch programme. */ .wa-sell-paths{scroll-margin-top:100px}.wa-sell-pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.wa-sell-path{display:flex;flex-direction:column;padding:30px;border:1px solid #d9e4e8;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(15,42,67,.07)}.wa-sell-path--business{border-color:#8dd4cd;background:linear-gradient(145deg,#fff,#edf9f7)}.wa-sell-path>span{width:max-content;padding:5px 9px;border-radius:999px;background:#e8f5f3;color:#08766f;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.wa-sell-path h3{margin:14px 0 8px;color:#102f49;font-size:25px}.wa-sell-path p{color:#52677b;line-height:1.6}.wa-sell-path>strong{margin:8px 0;color:#08766f;font-size:22px}.wa-sell-path ul{flex:1;padding-left:20px;color:#314a60;line-height:1.7}.wa-sell-path .sf-btn{margin-top:14px}.wa-sell-path__compare{margin-top:12px;color:#08766f;text-align:center;font-size:13px;font-weight:800} .wa-partner-page{color:#102f49}.wa-partner-hero{padding:38px 0;background:linear-gradient(135deg,#eef9f7,#fff)}.wa-partner-hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:42px;align-items:center}.wa-partner-hero h1{max-width:760px;margin:7px 0 16px;font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.035em}.wa-partner-hero>div>div>p:not(.wa-publish-eyebrow){max-width:760px;color:#40596e;font-size:17px;line-height:1.65}.wa-partner-hero aside{padding:26px;border-radius:18px;background:#102f49;color:#fff;box-shadow:0 18px 44px rgba(15,42,67,.16)}.wa-partner-hero aside span,.wa-partner-hero aside strong{display:block}.wa-partner-hero aside span{color:#79eadf;font-size:11px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.wa-partner-hero aside strong{margin:8px 0;font-size:28px}.wa-partner-hero aside p{margin:0;color:#d8e5ec;line-height:1.55}.wa-partner-section{padding:58px 0}.wa-partner-section--soft{background:#f4f8fa}.wa-partner-section h2{margin:6px 0 24px;font-size:clamp(28px,4vw,42px)}.wa-partner-plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wa-partner-plans article{padding:28px;border:1px solid #d8e3e8;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,42,67,.06)}.wa-partner-plans article.is-selected{border:2px solid #23b8ac;box-shadow:0 16px 38px rgba(11,118,111,.13)}.wa-partner-plans article>span{color:#08766f;font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.wa-partner-plans h3{margin:8px 0;font-size:25px}.wa-partner-plans p{margin:0;color:#607589}.wa-partner-plans>article>strong{display:block;margin:5px 0 14px;color:#08766f;font-size:30px}.wa-partner-plans ul{padding-left:20px;color:#314a60;line-height:1.75}.wa-partner-plans a{display:block;margin-top:18px;padding:13px;border-radius:9px;background:#08766f;color:#fff;text-align:center;text-decoration:none;font-weight:850}.wa-partner-section__note{max-width:850px;margin:22px 0 0;color:#52677b;line-height:1.6} @media(max-width:760px){.wa-home-paths__head,.wa-home-paths__grid,.wa-sell-pathgrid,.wa-partner-hero__grid,.wa-partner-plans{grid-template-columns:1fr}.wa-home-paths__head>a{margin-top:8px}.wa-partner-hero{padding:28px 0}.wa-partner-hero__grid{gap:24px}.wa-sell-path{padding:22px}.wa-partner-section{padding:42px 0}} /* ── Section wrapper ── */ .sf-section { border-bottom: 2px solid var(--color-divider); } .sf-section > .sf-container { padding-block: var(--space-6); } .sf-section:last-of-type { border-bottom: 0; } .sf-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .sf-section__title { font-size: 32px; margin: 0; } .sf-section__aside { font-size: 13px; color: var(--color-muted); } .sf-section__head > a { flex: none; white-space: nowrap; } .sf-empty { color: var(--color-muted); padding: var(--space-8); text-align: center; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); } .sf-empty > h4 { color: var(--color-text); } .sf-more { text-align: center; margin-top: var(--space-6); } /* ── Category grid ── */ /* Flex-wrap board: tiles grow to fill each row, so a partial final row never leaves empty cells for any category count. Hairlines are drawn by the tiles' inline-end/block-end borders against the board's inline-start/block-start edges. */ .sf-catgrid { display: flex; flex-wrap: wrap; background: var(--color-bg); border-inline-start: 1px solid var(--color-divider); border-block-start: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); list-style: none; margin: 0; padding: 0; } .sf-catgrid > li { flex: 1 1 200px; display: flex; } .sf-catgrid__item { flex: 1; display: flex; flex-direction: column; gap: 6px; background: var(--color-bg); padding: var(--space-4); min-height: 118px; border-top: 3px solid var(--color-accent); border-inline-end: 1px solid var(--color-divider); border-block-end: 1px solid var(--color-divider); color: var(--color-text); transition: background .15s ease; } .sf-catgrid__item:hover { background: var(--color-neutral-100); text-decoration: none; color: var(--color-text); } /* The tile hue is tuned for a border; mixing it toward the text colour keeps the number readable. */ .sf-catgrid__num { font-family: ui-monospace, monospace; font-size: 11px; color: color-mix(in srgb, var(--sf-hue, var(--color-accent)) 50%, var(--color-text)); } .sf-catgrid__name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-top: auto; } .sf-catgrid__count { font-size: 12px; color: var(--color-muted); } /* Legacy category chips (used by 404) */ .sf-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; padding: 0; list-style: none; } .sf-cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-text); font-weight: 600; font-size: 14px; } .sf-cat-chip:hover { border-color: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; } .sf-cat-chip__count { color: var(--color-muted); font-weight: 500; } /* ────────────────────────────────────────────────────────────────────────── Listing cards (ListingCardModern) ────────────────────────────────────────────────────────────────────────── */ .sf-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .sf-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; } .sf-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .sf-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-200); } /* Pin the image to the media box so it covers the exact space in every layout — the grid's 4:3 box and the list view's flex-stretched column alike. */ .sf-card__media img, .sf-card__noimg { position: absolute; inset: 0; width: 100%; height: 100%; } .sf-card__media img { object-fit: cover; } .sf-card__noimg { background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-300)); } .sf-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; } .sf-card__pricerow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } /* Ink token, not hard-coded accent-700: on the dark surface that step only clears ~2.9:1, so the price would nearly vanish on a dark card. */ .sf-card__price { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-accent-ink); letter-spacing: -0.01em; white-space: nowrap; } /* Category badge, overlaid on the listing image (bottom-left) so it never crowds or truncates the price. A frosted light chip with fixed ink text stays legible over any photo and over the noimg gradient, in both themes; the Featured badge keeps top-left. */ .sf-card__cat { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; z-index: 1; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: calc(var(--radius-md) * 0.75); background: color-mix(in srgb, var(--color-fixed-light) 88%, transparent); color: var(--color-fixed-ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-fixed-ink) 25%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sf-card__title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--color-text); margin: 0; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-card__title:hover { color: var(--color-accent-ink); text-decoration: none; } /* Description teaser: hidden in the grid, revealed in list view (below). */ .sf-card__desc { display: none; } .sf-card__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--color-neutral-700); } .sf-card__loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .sf-card__loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-card__date { white-space: nowrap; } /* Featured / urgent ribbon */ .sf-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .sf-badge--featured { background: var(--color-accent-100); color: var(--color-accent-800); } .sf-badge--urgent { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .sf-card--featured { border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-divider)); } /* Highlighted: a paid outline in the accent colour. */ .sf-card--highlight { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm); } /* List view (search show-as=list): horizontal rows */ body.sf-list .sf-cards { grid-template-columns: 1fr; gap: var(--space-3); } body.sf-list .sf-card { flex-direction: row; align-items: stretch; } body.sf-list .sf-card:hover { transform: translateX(3px); } body.sf-list .sf-card__media { flex: none; width: 190px; aspect-ratio: auto; } body.sf-list .sf-card__body { padding: var(--space-4); } body.sf-list .sf-card__title { font-size: 17px; -webkit-line-clamp: 1; } body.sf-list .sf-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); } @media (max-width: 620px) { body.sf-list .sf-card { flex-direction: column; } body.sf-list .sf-card__media { width: 100%; aspect-ratio: 4 / 3; } body.sf-list .sf-card__desc { -webkit-line-clamp: 2; } } /* ────────────────────────────────────────────────────────────────────────── Search page ────────────────────────────────────────────────────────────────────────── */ .sf-crumbs { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-neutral-700); margin-bottom: var(--space-3); } .sf-crumbs a { color: var(--color-neutral-700); } .sf-crumbs a:hover { color: var(--color-accent-ink); } .sf-searchlayout { display: flex; gap: var(--space-6); align-items: flex-start; } /* Main column is first in the DOM so the results

precedes the rail's sub-headings for a screen reader; order places the rail on the left visually. */ .sf-searchlayout__main { flex: 1; min-width: 0; order: 1; } .sf-searchlayout__side { flex: 0 0 280px; min-width: 280px; order: 0; position: sticky; top: calc(var(--sf-header-h) + var(--space-4)); /* Small inset so field focus rings clear the rail edges. */ padding: var(--space-1) var(--space-2); } /* Filter rail */ .sf-filters__head { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-bottom: 2px solid var(--color-divider); margin-bottom: var(--space-4); } .sf-filters__head h2 { margin: 0; margin-inline-end: auto; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; } .sf-filters__close { display: none; } .sf-filters__group { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); } .sf-filters__group:last-of-type { border-bottom: 0; } .sf-filters__label { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); } .sf-filters .sf-field { margin-bottom: var(--space-3); } .sf-filters .sf-field:last-child { margin-bottom: 0; } /* Distance field: the markup is core's osc_search_distance_field(). */ .sf-distance .osc-distance { border: 0; margin: 0; padding: 0; min-width: 0; } .sf-distance .osc-near-me { display: inline-flex; margin-top: var(--space-2); padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-accent); cursor: pointer; } .sf-distance .osc-near-me:hover { text-decoration: underline; } .sf-distance .osc-near-me:disabled { opacity: 0.6; cursor: progress; } .sf-card__distance::before { content: "\00b7"; margin-inline-end: 4px; } /* ────────────────────────────────────────────────────────────────────────── Custom fields (per-category, core-rendered) Core emits its own Bootstrap-derived markup for admin-defined fields — form-control / form-select / form-check / form-label / form-text / meta-radio-list / input-group — into two theme surfaces: the publish & edit form (injected into #plugin-hook as .meta_list) and the search rail (.sf-filters__plugin). Neither knows which field TYPES an install will configure, so every primitive core supports is bridged here — text, number, textarea, dropdown, radio, checkbox, url/email, date, and from/to date & number ranges — onto the theme's own field system so a custom field is indistinguishable from a native one, light and dark. Scoped to the two container classes so the generic core class names cannot leak onto anything else. accent-color + inherited color-scheme flip the native radio/checkbox/date controls at paint time. ────────────────────────────────────────────────────────────────────────── */ .meta_list, .sf-filters__plugin { accent-color: var(--color-accent); } /* Text-like controls, selects and textareas — the theme's input look. */ .meta_list .form-control, .meta_list .form-select, .meta_list input[type="text"], .meta_list input[type="number"], .meta_list input[type="url"], .meta_list input[type="email"], .meta_list input[type="date"], .meta_list select, .meta_list textarea, .sf-filters__plugin .form-control, .sf-filters__plugin .form-select, .sf-filters__plugin input[type="text"], .sf-filters__plugin input[type="number"], .sf-filters__plugin input[type="url"], .sf-filters__plugin input[type="date"], .sf-filters__plugin select, .sf-filters__plugin textarea { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); transition: border-color .15s ease, box-shadow .15s ease; } .meta_list .form-control:hover, .meta_list .form-select:hover, .meta_list select:hover, .meta_list textarea:hover, .meta_list input:hover, .sf-filters__plugin .form-control:hover, .sf-filters__plugin .form-select:hover, .sf-filters__plugin select:hover, .sf-filters__plugin textarea:hover, .sf-filters__plugin input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .meta_list .form-control:focus, .meta_list .form-select:focus, .meta_list select:focus, .meta_list textarea:focus, .meta_list input:focus, .sf-filters__plugin .form-control:focus, .sf-filters__plugin .form-select:focus, .sf-filters__plugin select:focus, .sf-filters__plugin textarea:focus, .sf-filters__plugin input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); position: relative; z-index: 1; } .meta_list textarea, .sf-filters__plugin textarea { min-height: 96px; resize: vertical; } .meta_list select, .sf-filters__plugin select { cursor: pointer; } /* Field title (stacked above its control). On the publish form core emits a .form-label — or a bare