/**
* ASKPERTASK-PREMIUM-ENTRY-HOME-1A — admin-only homepage preview.
* Theme file: askpertask-child/assets/css/apt-home-preview-1a.css
*
* HARD SCOPE RULE: every single selector in this file is prefixed with
* `body.apt-home-preview-1a-active`. This file is also only ever enqueued
* when the preview gate is active (inc/apt-home-preview-1a.php), so the
* prefix is redundant defence-in-depth, not the only safeguard — even if
* this file were ever loaded elsewhere by mistake, it still could not
* apply anywhere without that exact body class present.
*
* Does NOT declare anything at :root. Does NOT modify any existing
* --aptv2-* value.
*
* R3 BRAND-COLOUR-RESTORE — the R2 experimental warm-beige/dark-green
* palette was not approved. Every --apt-home-* token below now reads
* directly from the site's real, already-live brand tokens (declared at
* :root in homepage-v2.css) instead of a separate invented palette, so
* this preview can never visually drift from the current brand again.
* R1/R2's layout, spacing and composition decisions (see their own
* comments throughout this file) are unchanged — only these token values.
*
* R4 PREMIUM-VISUAL-DEPTH — owner-approved: R3's colours are frozen and
* untouched below (still every --apt-home-* mapped to a real --aptv2-*
* token, zero new colours introduced). R4 adds a small, consistent
* shadow/radius/type-scale token set so depth/hierarchy come from
* geometry and typography, not from new colour. --apt-home-shadow-* all
* layer on top of the existing --aptv2-shadow-md token (never replace
* it) with additional neutral-grey ambient layers only.
*/
body.apt-home-preview-1a-active {
--apt-home-bg: var( --aptv2-bg, #FFFFFF );
--apt-home-surface: var( --aptv2-bg, #FFFFFF );
--apt-home-surface-elevated: var( --aptv2-bg, #FFFFFF );
--apt-home-surface-muted: var( --aptv2-bg-soft, #F7F8F7 );
--apt-home-text: var( --aptv2-text, #1A1A1A );
--apt-home-text-muted: var( --aptv2-text-muted, #6B7280 );
--apt-home-primary: var( --aptv2-green, #1FA34A );
--apt-home-primary-hover: var( --aptv2-green-dark, #168238 );
--apt-home-border: var( --aptv2-border, #E5E7EB );
/* R3 — the closing "For Professionals" panel's tint; the same light
green tint already used sitewide for section backgrounds/badges
(--aptv2-green-light), not a new colour. */
--apt-home-accent-tint: var( --aptv2-green-light, #EAF7EE );
--apt-home-map-overlay: rgba( 255, 255, 255, 0.94 );
/* R4 — radius scale: controls (buttons/pills) tighter than cards,
large panels (map, how-it-works panel) slightly looser. */
--apt-home-radius-sm: 12px;
--apt-home-radius: 16px;
--apt-home-radius-lg: 22px;
/* R6.1 — the "radius około 14-16px" card token now lives in the
--r6-* set below (--r6-radius-md) alongside the rest of this
batch's tokens. */
/* R4 — shadow scale: each level layers the existing sitewide
--aptv2-shadow-md token plus one extra neutral-grey ambient layer,
so nothing here invents a colour or a heavy/coloured shadow. */
--apt-home-shadow-xs: 0 1px 2px rgba( 16, 24, 40, 0.04 );
--apt-home-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.05 ), 0 6px 16px -10px rgba( 16, 24, 40, 0.12 );
--apt-home-shadow: var( --aptv2-shadow-md, 0 4px 12px rgba( 16, 24, 40, 0.06 ) ), 0 1px 2px rgba( 16, 24, 40, 0.04 );
--apt-home-shadow-lg: var( --aptv2-shadow-md, 0 4px 12px rgba( 16, 24, 40, 0.06 ) ), 0 24px 48px -20px rgba( 16, 24, 40, 0.20 );
/* R4 — type scale tokens: a real step between hero H1, section H2,
eyebrow labels, card titles and muted copy (contract §12). Existing
font stack untouched; these are size/weight/spacing only. */
--apt-home-fs-eyebrow: 0.78rem;
--apt-home-fs-h2: clamp( 1.7rem, 2.4vw, 2.05rem );
--apt-home-fs-card-title: 1.02rem;
--apt-home-fs-muted: 0.9rem;
/* R6 POLISH — very small, scoped Account-Hub-only icon-tint set, used
purely to help tile scanning (owner §5/§16 reference). Never touches
the real global --aptv2-* brand palette declared at :root — these
variables exist only inside this preview's own namespace and are
consumed by exactly one thing: the 5 tile icon circles below. */
--apt-home-tint-green-bg: var( --aptv2-green-light, #EAF7EE );
--apt-home-tint-green-fg: var( --aptv2-green-dark, #168238 );
--apt-home-tint-amber-bg: #FDF3E3;
--apt-home-tint-amber-fg: #B4790E;
--apt-home-tint-blue-bg: #E9F1FE;
--apt-home-tint-blue-fg: #2C64C9;
--apt-home-tint-violet-bg: #F1EBFC;
--apt-home-tint-violet-fg: #7A4FC4;
background: var( --apt-home-bg );
/* =====================================================
R6.1 — ADVANCED VISUAL SHELL: preview-local design tokens.
Every value below either reuses an existing real --aptv2-*/
--apt-home-* token or is a genuinely new value scoped ONLY to
body.apt-home-preview-1a-active — the real :root and every
--aptv2-* global token are never touched, so no other route on
the site is affected. ("--r6-*" prefix keeps this batch's
additions visually distinct in dev tools from the earlier
R5/R6 "--apt-home-*" set without renaming/breaking those.)
===================================================== */
--r6-bg: #F7F9F8;
--r6-surface: var( --apt-home-surface );
--r6-surface-soft: var( --apt-home-surface-muted );
--r6-surface-green: var( --apt-home-accent-tint );
--r6-text: var( --apt-home-text );
--r6-muted: var( --apt-home-text-muted );
--r6-green: var( --apt-home-primary );
--r6-green-deep: var( --apt-home-primary-hover );
--r6-border: rgba( 16, 24, 40, 0.09 );
--r6-border-soft: rgba( 16, 24, 40, 0.06 );
--r6-radius-sm: 10px;
--r6-radius-md: 14px;
--r6-radius-lg: 18px;
--r6-radius-xl: 22px;
--r6-shadow-card: 0 1px 2px rgba( 16, 24, 40, 0.03 ), 0 8px 24px rgba( 16, 24, 40, 0.05 );
--r6-shadow-panel: 0 2px 4px rgba( 16, 24, 40, 0.03 ), 0 16px 40px rgba( 16, 24, 40, 0.06 );
/* R6.2B §2 — preferred 1140px content width (owner's 1120-1160px
target band), shared by both the Hub card and the Hero container. */
--r6-content-width: 1140px;
background: var( --r6-bg );
position: relative;
overflow-x: hidden;
}
/* =====================================================
R6.2B — OPENING SHELL, exact 4-layer composition (owner §4).
One continuous fixed-position light field spanning header-bottom
through Hub through Hub->Hero through Hero/map — not separate
rectangular bands. Gradients/light only; line-art contour/node
accents remain section-scoped (.hub::before/::after, .hero::before,
.requests::before) and strictly secondary (~140-180px, owner §5).
===================================================== */
body.apt-home-preview-1a-active::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
/* LAYER 1 — left green ambience. */
radial-gradient( ellipse 720px 480px at 8% 18%, rgba( 31, 163, 74, 0.095 ), rgba( 31, 163, 74, 0.035 ) 40%, transparent 72% ),
/* LAYER 2 — centre light field (keeps the middle calm/readable
without going flat, per the "no visible dominant graphic"
acceptance rule, owner §28). */
radial-gradient( ellipse 900px 520px at 50% 34%, rgba( 255, 255, 255, 0.9 ), rgba( 255, 255, 255, 0.55 ) 48%, transparent 78% ),
/* LAYER 3 — right cool field, deliberately non-green. */
radial-gradient( ellipse 650px 440px at 96% 45%, rgba( 90, 130, 170, 0.045 ), transparent 72% ),
/* LAYER 4 — lower green bridge, continuing the field toward the
Hub->Hero transition. */
radial-gradient( ellipse 820px 300px at 58% 75%, rgba( 31, 163, 74, 0.045 ), transparent 75% );
}
/* Secondary, much quieter micro-texture layer (owner §16: "very sparse
dot/grid texture") — clearly secondary to Shapes A/B above, small
spacing, low opacity, masked to two small corner pockets only. */
body.apt-home-preview-1a-active::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient( circle, rgba( 16, 24, 40, 0.9 ) 1px, transparent 1px ),
radial-gradient( circle, rgba( 16, 24, 40, 0.9 ) 1px, transparent 1px );
background-size: 26px 26px, 26px 26px;
background-position: right -30px top -20px, left -20px bottom 300px;
background-repeat: repeat, repeat;
-webkit-mask-image:
radial-gradient( circle 220px at 100% 0%, #000 0%, transparent 100% ),
radial-gradient( circle 190px at 0% 600px, #000 0%, transparent 100% );
mask-image:
radial-gradient( circle 220px at 100% 0%, #000 0%, transparent 100% ),
radial-gradient( circle 190px at 0% 600px, #000 0%, transparent 100% );
opacity: 0.025;
}
/* R2 §1/§9 — wider main container (was the shared 1200px --aptv2-container)
so the whole preview fills more of the available width, per the owner's
"za mało i za szeroko rozstrzelony" note. Scoped to the preview body
class only — every other route keeps the shared 1200px value untouched. */
body.apt-home-preview-1a-active .aptv2__container {
max-width: 1260px;
}
body.apt-home-preview-1a-active [id^="apt-home-preview-1a"],
body.apt-home-preview-1a-active .apt-home-preview-1a {
color: var( --apt-home-text );
}
/* R4 — one consistent keyboard-focus ring for every real link inside the
preview header/main/footer (contract §15). Buttons already define their
own :focus-visible above the primary/secondary/tertiary variants; this
covers plain text links (nav, footer nav, section "view all" links,
card links) that previously had no visible focus state at all. */
body.apt-home-preview-1a-active .apt-home-preview-1a__header a:focus-visible,
body.apt-home-preview-1a-active .apt-home-preview-1a a:focus-visible,
body.apt-home-preview-1a-active .apt-home-preview-1a__footer a:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 2px;
border-radius: 4px;
}
/* -----------------------------------------------------------
R1 §1 BUG FIX — double footer.
page-homepage-v2.php's preview branch (unchanged this round) still
calls the real get_footer() after apt-home-preview-footer.php, on
purpose — the real footer template/hook is not touched, so every other
route keeps it exactly as-is. This rule ONLY hides that real Elementor
Theme Builder footer LOCATION's rendered output, and ONLY while the
preview gate's body class is present. Targets Elementor's own stable
structural marker (`data-elementor-type="footer"`), not a specific
template ID, so it keeps working if the assigned footer template is
ever swapped in wp-admin. `display:none` removes it from layout
entirely — no leftover margin/height, and (being display:none) it is
also automatically out of the tab order and accessibility tree, so
there is no invisible-but-clickable area left behind either.
----------------------------------------------------------- */
body.apt-home-preview-1a-active [data-elementor-type="footer"] {
display: none;
}
/* -----------------------------------------------------------
Shared button + container primitives (preview only)
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
/* R4 §13 — controls use the tighter radius tier; the 16px card radius
read slightly heavy on a pill-shaped action button. */
border-radius: var( --apt-home-radius-sm );
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid transparent;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn:focus-visible {
outline: 3px solid var( --apt-home-primary );
outline-offset: 2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--primary {
background: var( --apt-home-primary );
color: #FFFFFF;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--primary:hover {
background: var( --apt-home-primary-hover );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--secondary {
background: var( --apt-home-surface );
color: var( --apt-home-text );
border-color: var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--secondary:hover {
background: var( --apt-home-surface-muted );
}
/* R1 §4 — was a small underlined text link, which read as an accidental/
throwaway third action next to two real buttons. Still visibly lower
priority than primary/secondary (no fill, muted text colour) but now a
real quiet/outlined button — same tap-target height as the other two,
not a stray link. */
/* R4 §5 — was transparent; the contract now asks for a "pełnoprawny
control" (full-fledged control) rather than a ghost/ambiguous button.
A light muted-surface fill keeps it clearly the 3rd priority (still no
solid colour, still muted text) while reading as a real, tappable
button rather than an outline that could pass for disabled. */
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--tertiary {
background: var( --apt-home-surface-muted );
color: var( --apt-home-text-muted );
border-color: var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--tertiary:hover {
color: var( --apt-home-primary );
border-color: var( --apt-home-primary );
background: var( --apt-home-surface-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--tertiary svg {
flex-shrink: 0;
}
/* -----------------------------------------------------------
Reused shared header/footer classes (aptv2-header, aptv2-btn) —
restyled ONLY inside the preview body class. homepage-v2.css itself
is never edited; these rules simply win the cascade while present.
----------------------------------------------------------- */
/* R6.1 §4 — quiet, slightly translucent surface (owner: "rgba(255,255,255,.94)")
with a real backdrop-filter as a pure progressive enhancement — browsers
without support just see the solid fallback already declared first, no
functional difference either way. */
body.apt-home-preview-1a-active .apt-home-preview-1a__header {
background: var( --apt-home-surface );
background: rgba( 255, 255, 255, 0.94 );
-webkit-backdrop-filter: blur( 10px );
backdrop-filter: blur( 10px );
border-bottom: 1px solid var( --r6-border-soft );
/* R4 — bottom border stays as the primary separation signal; the very
light xs shadow underneath adds just enough lift to read as "above"
the page without becoming a visible drop-shadow band. */
box-shadow: var( --apt-home-shadow-xs );
}
/* R6.1 §4 — ~72-76px desktop header (was ~70px + 28px padding). */
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__inner {
min-height: 74px;
padding-top: 12px;
padding-bottom: 12px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__logo-mark {
/* R4 — small bump (was 44/56) now the header row itself has slightly
more vertical room; keeps the real logo asset's own aspect ratio. */
height: 46px;
max-width: 58px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__logo {
font-size: 1.6rem;
letter-spacing: -0.01em;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__logo small {
font-size: 0.78rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__nav {
/* R4 — slightly wider than R3's 28px now that the links themselves
get a visible hover/focus state (below); more breathing room reads
less cramped once the links are no longer perfectly static text. */
gap: 32px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__nav a {
color: var( --apt-home-text );
font-size: 0.98rem;
font-weight: 500;
/* R4 — nav links had no hover/focus state at all before; padding +
transparent border-bottom reserves the space so the coloured
underline on hover/focus doesn't shift layout. */
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__nav a:hover {
color: var( --apt-home-primary );
border-bottom-color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-btn--sm {
padding: 0.65rem 1.15rem;
font-size: 0.9rem;
min-height: 42px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-btn--green {
background: var( --apt-home-primary );
border-color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-btn--green:hover {
background: var( --apt-home-primary-hover );
}
/* R1 §3 — the shared homepage-v2.css shrinks the hamburger toggle to 36px
at <=520px (its own MOBILE-1A rule), which is below the 44x44 tap-target
floor. Higher-specificity override here (body class + 2 extra classes)
always wins regardless of source order, so the shared file itself is
never edited. */
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__toggle {
width: 44px;
height: 44px;
}
@media ( max-width: 768px ) {
/* R2 §2 — mobile header: ~58-60px (was the R1 56px), still well above
the old shared-default cramped feel. */
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__inner {
min-height: 58px;
padding-top: 10px;
padding-bottom: 10px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__logo-mark {
height: 34px;
max-width: 46px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__header .aptv2-header__logo {
font-size: 1.15rem;
}
}
/* -----------------------------------------------------------
R5 §3 — Welcome Box (replaces the old one-line return-strip)
----------------------------------------------------------- */
/* R6 — Account Hub: 3 levels inside ONE elevated card — Level 1
(identity+status), Level 2 (5 fixed account tiles), Level 3 (4 live
activity modules). Still never a second dashboard, still never eats
the first viewport. POLISH PASS — same structure/data, denser and more
differentiated presentation: one visible card boundary, tinted icon
circles per tile, explicit action links, softer borders/deeper shadow. */
/* R6.1 §2/§21 — the section itself is now transparent (no flat fill/
border-bottom): the scoped page-background layers on show
through around the hub-card, and a soft green-wash transition band
(below) bridges into the hero instead of a hard white/white edge. */
/* FINAL ATMOSPHERE §2 — bottom padding trimmed (was 3.25rem) to reduce
the dead gap before the Hero without touching Hub internals. */
/* BACKGROUND-DETAIL §9 — trimmed again (was 2.5rem) toward the owner's
~32-44px combined perceived-rhythm target with the Hero's own reduced
top padding below. */
/* R6.2 §13 — trimmed again (was 1.75rem) toward the owner's ~28-36px
combined Hub->Hero rhythm target with the Hero's own reduced top
padding below. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub {
position: relative;
padding: 1.1rem 0 1.25rem;
}
/* BACKGROUND-DETAIL PASS — Cluster A (SCALE 2, ~200px) top-left + a small
SCALE-3 micro-node fragment, both pushed mostly into the true outer
gutter (left of the hub-card, which starts around x:120px+ at 1440) so
nothing sits under the card's real content — the card is opaque anyway
(z-index:1) so anything "behind" it is invisible regardless; this keeps
the motif visible in the empty gutter specifically, per owner §11. Plus
the existing soft organic halo (SCALE 1, local echo), opacity trimmed
so no single layer dominates (owner §12: more/smaller, not fewer/bigger). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub::before {
content: "";
position: absolute;
inset: -40px 0 -60px;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.04%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M18%2C96%20C26%2C54%2066%2C16%20118%2C19%20C154%2C21%20182%2C52%20178%2C92%27%2F%3E%3Cpath%20d%3D%27M42%2C98%20C48%2C66%2082%2C42%20122%2C46%20C152%2C49%20168%2C70%20162%2C96%27%2F%3E%3Cpath%20d%3D%27M66%2C94%20C71%2C74%2096%2C60%20124%2C65%20C143%2C68%20150%2C80%20146%2C94%27%2F%3E%3Cpath%20d%3D%27M142%2C26%20C158%2C17%20176%2C23%20180%2C38%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left -65px top 30px / 175px 158px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20100%27%3E%3Cg%20fill%3D%27rgba%2831%2C163%2C74%2C0.045%29%27%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2735%27%20cy%3D%2745%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2714%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2782%27%20cy%3D%2748%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%27101%27%20cy%3D%2728%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2772%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2780%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2795%27%20cy%3D%2763%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2745%27%20cy%3D%2786%27%20r%3D%271.4%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M35%2C45%20L60%2C14%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.0315%29%27%20stroke-width%3D%270.75%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E") left 10px top 190px / 110px 90px no-repeat,
radial-gradient( ellipse 780px 420px at 50% 4%, rgba( 31, 163, 74, 0.07 ), transparent 70% );
}
/* Cluster B (SCALE 2, ~180px) on the right of the Hub->Hero transition
band + a small node fragment on the left, continuing the visual
language toward the map without a new content block. Trimmed radial
wash (SCALE 1 local echo). */
/* R6.2 §7.C / §14 — Shape C: the Hub->Hero light bridge, now a real
soft field (raised alpha) that is the PRIMARY thing carrying the eye
downward; the contour+node fragments remain, shrunk further, as a
secondary accent riding on top of it, not the other way round. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 220px;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.036%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M20%2C40%20C40%2C18%2090%2C10%20130%2C28%20C160%2C42%20172%2C72%20158%2C98%27%2F%3E%3Cpath%20d%3D%27M38%2C52%20C54%2C34%2092%2C28%20122%2C42%20C144%2C53%20152%2C74%20140%2C92%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right -55px bottom -25px / 160px 145px no-repeat,
radial-gradient( ellipse 1100px 300px at 30% 100%, rgba( 31, 163, 74, 0.075 ), transparent 72% ),
radial-gradient( ellipse 700px 260px at 85% 100%, rgba( 88, 128, 158, 0.04 ), transparent 70% );
}
/* R6.1 §5 — the single elevated "master panel" surface (owner §3/§17/§21):
everything from identity through Level 3 modules lives inside this one
rounded, softly-shadowed, slightly-narrower-than-page card, with a
near-imperceptible internal light gradient (top-left white -> bottom-
right pale green) for real depth instead of a flat fill. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-card {
position: relative;
/* Keeps the card's own opaque surface above the .hub::before/::after
decorative glows regardless of DOM paint order — without this, the
bottom transition-band glow (painted after the card in source
order) would tint the lower edge of the card's real content. */
z-index: 1;
/* R6.2B §2/§7 — deterministic box model: width min(100%-48px,1140px),
padding 22-24px vertical / 24-26px horizontal, radius 18-20px,
border/shadow/backdrop-filter per spec. */
width: min( calc( 100% - 48px ), var( --r6-content-width ) );
margin: 0 auto;
background: rgba( 255, 255, 255, 0.95 );
background-image: linear-gradient( 135deg, rgba( 255, 255, 255, 0.6 ) 0%, transparent 45%, var( --r6-surface-green ) 145% );
-webkit-backdrop-filter: blur( 8px );
backdrop-filter: blur( 8px );
border: 1px solid rgba( 20, 30, 25, 0.08 );
border-radius: 19px;
box-shadow: 0 2px 5px rgba( 16, 24, 40, 0.025 ), 0 14px 38px rgba( 16, 24, 40, 0.06 );
padding: 18px 22px;
}
/* ---- Level 1 — identity (left) + status (right) ---- */
/* R6.1 §6/§7 — tighter, more deliberate vertical rhythm (identity ->
divider ~22px, matching owner's 20-24px target). */
/* R6.2 §10 — Level 1 reads as a compact header strip now (was 1.35rem/
1rem), part of the overall ~10-15% Hub height reduction. */
/* R6.2B §8/§9 — tightened further (was 0.95rem/0.75rem) toward the
96-106px Level-1 height target. */
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — final approved
header structure: Identity | Calendar | Progress | Reputation, four
zones in one row separated by thin dividers. Identity gets the largest
share (name/chips/profile-setup/dashboard link need the most room);
the other three are compact metric zones. Wraps to a 2x2 grid at
<=1024px and stacks to one column at <=768px (see those breakpoints
below) — same box, no separate mobile-only markup. */
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — replaces the proportional fr-grid
with the approved target's real model: Identity is content-width
(never stretched or squeezed), Calendar is the one flexible zone
that absorbs all leftover row space (so it visibly widens instead of
fighting Identity/Progress/Reputation for a fixed share), Progress
and Reputation are fixed-width compact zones that never grow into
empty space. Same 4 zones/dividers, same real data — only the sizing
model changed. Wraps to a 2x2 grid at <=1024px and stacks to one
column at <=768px (see those breakpoints below). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-top {
display: flex;
align-items: stretch;
column-gap: 1.1rem;
padding: 0.35rem 0;
border-bottom: 1px solid var( --apt-home-border );
margin-bottom: 0.35rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-identity {
flex: 0 0 auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar {
flex: 1 1 0;
min-width: 200px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-progress {
flex: 0 0 190px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation {
flex: 0 0 180px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-divider {
width: 1px;
align-self: center;
height: 32px;
flex-shrink: 0;
background: var( --r6-border-soft );
}
/* R6.1 §7 — explicit grid (was flex): a fixed 56px avatar column keeps the
name/chips/Dashboard column's left edge perfectly aligned regardless of
avatar vs. initials-fallback width. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-identity {
display: grid;
grid-template-columns: 50px minmax( 0, 1fr );
column-gap: 14px;
align-items: center;
min-width: 0;
}
/* R6.2 §10 — 50px (within the owner's 48-52px target, was 56px). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-avatar img,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-avatar-fallback {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
background: var( --apt-home-surface );
color: var( --apt-home-primary );
font-weight: 700;
font-size: 1.15rem;
box-shadow: var( --apt-home-shadow-xs );
flex-shrink: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-identity-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-name {
margin: 0;
font-weight: 700;
font-size: 1.1rem;
line-height: 1.2;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
/* Deliberately neutral for every context chip (Helper/Professional/
Business/Local member/locality) — R3's frozen palette has no blue
token, so "tone: blue" reads as a calm neutral pill, not a new colour. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-chip {
display: inline-flex;
align-items: center;
min-height: 25px;
font-size: 0.74rem;
font-weight: 600;
padding: 0.24rem 0.6rem;
border-radius: 999px;
background: var( --apt-home-surface-muted );
color: var( --apt-home-text-muted );
border: 1px solid transparent;
}
/* R6 §4 — a real, quiet control (pill outline), not a bare underlined
link — reads as a sensible secondary action, compact directly under
identity (never a large empty gap between avatar/name/chips/Dashboard). */
/* OWNER-VISUAL-POLISH-1A — subtle green secondary CTA (was a neutral
grey outline, read as weak next to Spotlight's primary green CTA).
Still clearly secondary: soft tint fill, no shadow, no size change —
same 37px height, same compact footprint, header height unaffected. */
/* HOME-HUB-CORRECTIVE-1A §2 — owner: "the Dashboard entry/action
[should be] easier to see". Smallest possible change: same markup,
same position, same 37px height/footprint — only bolder weight and a
persistent (not just hover) shadow so it reads clearly at a glance
instead of only on interaction. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-dashboard {
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-height: 37px;
font-size: 0.78rem;
font-weight: 700;
color: var( --apt-home-tint-green-fg );
background: var( --apt-home-tint-green-bg );
border: 1px solid rgba( 31, 163, 74, 0.32 );
border-radius: 999px;
padding-inline: 14px;
padding-block: 0.3rem;
text-decoration: none;
box-shadow: 0 1px 4px rgba( 31, 163, 74, 0.16 );
transition: background 0.15s ease, box-shadow 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-dashboard:hover {
background: rgba( 31, 163, 74, 0.16 );
box-shadow: 0 2px 6px rgba( 31, 163, 74, 0.15 );
border-color: var( --apt-home-primary );
}
/* WELCOME-HUB-TRUST-PROGRESS-1A §2 — compact, INFORMATIVE profile-setup
status (replaces the old icon-only .hub-warning circle — owner: "too
cryptic... the user cannot immediately understand what it means").
Still the ONE profile-completion indicator, still the same real amber
tint pair, still semantically PROFILE SETUP only (never repeats a
Verification message — see $aptv2_p1a_profile_setup_missing in
apt-home-preview-body.php). */
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup {
position: relative;
display: inline-block;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.2;
color: var( --apt-home-tint-amber-fg );
background: var( --apt-home-tint-amber-bg );
border: 0;
border-radius: 999px;
cursor: pointer;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-trigger svg {
flex-shrink: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-trigger:focus-visible {
outline: 2px solid var( --apt-home-tint-amber-fg );
outline-offset: 2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-tip {
position: absolute;
z-index: 5;
top: calc( 100% + 8px );
left: 0;
display: flex;
flex-direction: column;
gap: 4px;
width: max-content;
max-width: 240px;
padding: 0.6rem 0.75rem;
font-size: 0.76rem;
line-height: 1.4;
font-weight: 500;
color: var( --apt-home-text );
background: var( --apt-home-surface-elevated );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius-sm );
box-shadow: var( --apt-home-shadow-sm );
opacity: 0;
visibility: hidden;
transform: translateY( -4px );
transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
pointer-events: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-tip strong {
color: var( --apt-home-text );
font-weight: 700;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-tip ul {
margin: 0;
padding: 0 0 0 1.1em;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-tip li {
margin: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-cta {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 2px;
font-size: 0.76rem;
font-weight: 600;
color: var( --apt-home-primary );
text-decoration: none;
width: fit-content;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup-cta:hover {
color: var( --apt-home-primary-hover );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup:hover .apt-home-preview-1a__profile-setup-tip,
body.apt-home-preview-1a-active .apt-home-preview-1a__profile-setup:focus-within .apt-home-preview-1a__profile-setup-tip {
opacity: 1;
visibility: visible;
transform: translateY( 0 );
pointer-events: auto;
}
/* WELCOME-HUB-VERIFICATION-DEDUP-1A — .hub-status (the Level-1 right-hand
slot), .hub-primary-action ("Continue verification" mega-CTA), and the
whole .hub-verification* status-card family are removed here — the
markup that used them no longer exists (see apt-home-preview-body.php).
WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — the old unified
Trust & Progress panel that used to occupy this same right-hand area is
retired (owner §4/§7/§9): canonical Trust stays backend-authoritative
but has no dedicated UI slot anywhere in this header now. Its real
Progress/Reputation data lives on in two independent header zones
below (.hub-progress / .hub-reputation), sharing the .hub-metric-*
classes with the new .hub-calendar zone. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-dashboard:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 2px;
}
/* ---- Shared compact metric-zone classes (Calendar/Progress/Reputation) ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-progress,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-label {
margin: 0 0 1px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-value {
font-size: 0.86rem;
font-weight: 700;
line-height: 1.25;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-value--muted {
font-size: 0.8rem;
font-weight: 500;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-facts {
font-size: 0.72rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-bar {
position: relative;
display: block;
width: 100%;
height: 6px;
margin: 2px 0;
background: var( --apt-home-border );
border-radius: 999px;
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-bar span {
position: relative;
display: block;
height: 100%;
background: linear-gradient( 90deg, var( --apt-home-primary ) 0%, #4ade80 100% );
border-radius: inherit;
}
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — rating gets stronger visual presence
(big bold number) with the review count demoted to a small muted
label beside it; same real rating/review-count data, only 3 spans
instead of 1 (see the reputation markup in apt-home-preview-body.php). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation-rating {
display: flex;
align-items: baseline;
gap: 6px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation-star {
align-self: center;
font-size: 1rem;
color: var( --apt-home-tint-amber-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation-number {
font-size: 1.35rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation-count {
font-size: 0.72rem;
color: var( --apt-home-text-muted );
}
/* The top hairline before Badges — only inside Reputation (Progress's
own .hub-metric-facts, "N XP to next level", stays undivided). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-badges--divided,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-metric-facts--divided {
margin-top: 3px;
padding-top: 7px;
border-top: 1px solid var( --r6-border-soft );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-badges {
display: flex;
align-items: center;
gap: 6px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-badge {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 50%;
background: var( --apt-home-tint-green-bg );
color: var( --apt-home-tint-green-fg );
font-size: 0.64rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-badge-more {
font-size: 0.7rem;
font-weight: 700;
color: var( --apt-home-text-muted );
}
/* ---- Calendar — compact strip + floating expanded month view ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-trigger {
all: unset;
display: flex;
flex-direction: column;
gap: 4px;
cursor: default;
width: 100%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-trigger:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 2px;
border-radius: 6px;
}
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — the 3 real day-cells now spread
evenly across the (now wider) Calendar zone via flex:1 each (was a
tight, left-packed cluster), with bigger, easier-to-read numbers and
a bordered today state instead of a background-only one. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-strip {
display: flex;
justify-content: space-between;
gap: 6px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 10px;
border-radius: 8px;
background: var( --apt-home-surface-muted );
border: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day--today {
background: var( --apt-home-accent-tint );
border-color: rgba( 31, 163, 74, 0.3 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day-short {
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day--today .apt-home-preview-1a__hub-calendar-day-short {
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day-num {
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day--today .apt-home-preview-1a__hub-calendar-day-num {
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: transparent;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-day--has-booking .apt-home-preview-1a__hub-calendar-day-dot {
background: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-next {
font-size: 0.7rem;
color: var( --apt-home-text-muted );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-next--empty {
font-style: italic;
}
/* Floating panel — same proven, no-reflow technique as .profile-setup-tip
(position:absolute, opacity/visibility transition, :hover/:focus-within
trigger) so the expanded month view can never resize the Hub or push
content (owner: "must NOT increase Welcome Hub height... cause layout
shift"). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-panel {
position: absolute;
z-index: 20;
top: calc( 100% + 10px );
left: 0;
width: 280px;
max-width: 86vw;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
background: var( --apt-home-surface-elevated );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius-sm );
box-shadow: var( --apt-home-shadow-sm );
opacity: 0;
visibility: hidden;
transform: translateY( -4px );
transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
pointer-events: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar:hover .apt-home-preview-1a__hub-calendar-panel,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar:focus-within .apt-home-preview-1a__hub-calendar-panel {
opacity: 1;
visibility: visible;
transform: translateY( 0 );
pointer-events: auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 700;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-panel-head a {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.72rem;
font-weight: 600;
color: var( --apt-home-primary );
text-decoration: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-month-grid {
display: grid;
grid-template-columns: repeat( 7, 1fr );
gap: 2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-weekday {
font-size: 0.58rem;
font-weight: 600;
text-align: center;
color: var( --apt-home-text-muted );
text-transform: uppercase;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-cell {
position: relative;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.66rem;
border-radius: 4px;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-cell--today {
background: var( --apt-home-primary );
color: #fff;
font-weight: 700;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-cell--has-booking:not( .apt-home-preview-1a__hub-calendar-cell--today )::after {
content: '';
position: absolute;
bottom: 2px;
width: 3px;
height: 3px;
border-radius: 50%;
background: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-upcoming {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var( --r6-border-soft );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-upcoming-item {
display: flex;
flex-direction: column;
gap: 1px;
text-decoration: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-upcoming-item strong {
font-size: 0.76rem;
font-weight: 600;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar-upcoming-item span {
font-size: 0.7rem;
color: var( --apt-home-text-muted );
}
/* ---- Quick Access — exactly 4 real tiles, 2x2 (owner §9) ---- */
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — was a 5-column
full-width row (incl. the now-retired Trust tile); now a 2x2 grid
inside the ~35% .hub-quick-access-col beside Spotlight. */
/* WELCOME-BOX-MICRO-FIX-1B — equal-height rows: without this, the two
grid rows (bookings+messages / offers+requests) sized independently,
so a tile with more real content (e.g. "My requests" with both a
subline and an "N open" secondary line) made its own row taller than
the other — all 4 tiles now share one grid-driven height, the
tallest real content among them, instead of each row sizing itself. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tiles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat( 2, 1fr );
grid-auto-rows: 1fr;
gap: 0.65rem;
flex: 1 1 auto;
}
/* R6.2B measurement fix — defaults to display:list-item even inside
a grid container in some engines, which was making CSS Grid's own
align-items:stretch behave inconsistently across the 5 tiles (4 sized
to their own content, 1 stretched taller) instead of deterministically
matching row height. Forcing block here makes the grid item behavior
consistent/predictable, per the owner's "deterministic" contract. */
/* WELCOME-BOX-MICRO-FIX-1B — real-browser QA on the live page (not just
the static harness) found `align-items:stretch` alone still isn't
reliable here: with grid-auto-rows:1fr, the computed row track height
correctly grows to fit the tallest tile ("My requests", real subline +
"N open" secondary line), but the 3 shorter tiles' stayed at
their own natural content height instead of stretching to match —
an 8px real mismatch, not just a static-mock artifact. `height:100%`
here makes each explicitly consume its full (now-equalized)
grid row area instead of depending on stretch alone. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile {
display: block;
box-sizing: border-box;
height: 100%;
}
/* GAP-REVIEW §3/§15 — real white card surface (was blending into the
hub's own off-white background) with a genuine border + very light
shadow, so each tile reads as its own raised, clickable surface. */
/* COMPACTNESS-PASS-1A — 82px (was 100px, itself rendering at ~220px due
to the .hub-main stretch bug fixed above): with that bug fixed, tiles
now size to their own real content — trimmed further for the owner's
"materially shorter" target while keeping value/subline/action text
comfortably readable at the same font sizes. */
/* WELCOME-BOX-MICRO-FIX-1B — box-sizing:border-box (was the browser
default content-box): `height:100%` here is meant to fill the
grid-equalized , but with content-box its own 18px padding + 2px
border added on top of that 100%, so this anchor was rendering ~20px
taller than its own grid cell — the two tile rows visually overlapped
by that amount. border-box keeps padding/border inside the 100%. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 3px;
box-sizing: border-box;
height: 100%;
min-height: 82px;
padding: 9px 10px;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: 14px;
box-shadow: var( --r6-shadow-card );
text-decoration: none;
/* R6.2B §30 — exact hover contract: 140ms, translateY(-1px), no scale. */
transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a:hover {
border-color: var( --apt-home-primary );
box-shadow: var( --r6-shadow-card ), 0 0 0 1px rgba( 31, 163, 74, 0.06 );
transform: translateY( -1px );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 2px;
}
/* R6 POLISH §4/§5 — tinted icon circle per tile; colour only helps
scanning (kept very soft), never the dominant visual element. Local,
scoped tint tokens only — global --aptv2-* brand palette untouched. */
/* GAP-REVIEW §4 — larger, more legible icon badge (owner: "wyraźniejszy
niż obecnie"). Still very soft tints, colour only aids scanning. */
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — rounded-square badge (was a circle),
30px (was 36px), matching the approved target's icon treatment. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
flex-shrink: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-icon svg {
width: 19px;
height: 19px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile--offers .apt-home-preview-1a__hub-tile-icon {
background: var( --apt-home-tint-green-bg );
color: var( --apt-home-tint-green-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile--requests .apt-home-preview-1a__hub-tile-icon {
background: var( --apt-home-tint-amber-bg );
color: var( --apt-home-tint-amber-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile--bookings .apt-home-preview-1a__hub-tile-icon {
background: var( --apt-home-tint-blue-bg );
color: var( --apt-home-tint-blue-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile--messages .apt-home-preview-1a__hub-tile-icon {
background: var( --apt-home-tint-violet-bg );
color: var( --apt-home-tint-violet-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 1px;
min-width: 0;
width: 100%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-value {
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.02em;
line-height: 1.05;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-subline {
font-size: 0.78rem;
font-weight: 600;
line-height: 1.15;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-secondary {
font-size: 0.7rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-progress {
display: block;
width: 100%;
height: 4px;
margin-top: 2px;
background: var( --apt-home-border );
border-radius: 999px;
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-progress span {
display: block;
height: 100%;
background: var( --apt-home-primary );
border-radius: inherit;
}
/* R6 POLISH §4/§8 — the explicit action line every tile now carries
("Continue", "View all", "View bookings"...), visually a small coloured
link with a chevron, distinct from the muted subline above it. */
/* WELCOME-BOX-MICRO-FIX-1B — margin-top:auto pins Action to the bottom
of every tile regardless of how many lines (value/subline/secondary)
sit above it, so the action links land on the same row across all 4
equal-height tiles instead of trailing right after whatever content
happens to be shorter. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile-action {
display: inline-flex;
align-items: center;
gap: 0.2rem;
margin-top: auto;
padding-top: 1px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.1;
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a:hover .apt-home-preview-1a__hub-tile-action {
color: var( --apt-home-primary-hover );
}
/* ---- MAIN — Spotlight ~65% / Quick Access ~35% (owner §8/§12) ---- */
/* COMPACTNESS-PASS-1A — align-items:start (grid default is stretch): the
Quick Access column was being force-stretched to match Spotlight's full
height, then its own 2x2 tile grid stretched again to fill that — real
measured cause of tiles rendering ~220px tall against a 100px min-height.
Both columns now size to their own real content instead. */
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — the requirement is specifically that
the Spotlight CARD's bottom aligns with Quick Access's bottom, with
Pro Tip sitting below that — unconstrained, not stealing from the
aligned row (owner: "Do not use Pro Tip to compensate for unequal
column heights"). A plain 2-column stretch (module+insight bundled
as one flex column vs quick-access) fails that: Pro Tip's own height
eats into the stretched budget, leaving the card short.
Fix: .hub-main becomes an explicit 2-row grid — row 1 is the
card/quick-access pair (stretched to equal height, same real
mechanism the approved target uses), row 2 is Pro Tip alone under
column 1 only. .hub-spotlight-col uses display:contents so its two
real children (.hub-module--spotlight, .hub-insight) become direct
grid items with their own row placement below, with ZERO markup
change — the wrapper div still exists in the DOM, it just doesn't
participate in layout anymore. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-main {
display: grid;
grid-template-columns: 1.85fr 1fr;
grid-template-rows: auto auto;
align-items: stretch;
column-gap: 1rem;
row-gap: 0.4rem;
margin-top: 0.65rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-col {
display: contents;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module--spotlight {
grid-column: 1;
grid-row: 1;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight {
grid-column: 1;
grid-row: 2;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-quick-access-col {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-quick-access-label {
margin: 0 0 0.45rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var( --apt-home-text-muted );
}
/* ---- Insight — compact reusable contextual slot below Spotlight ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 13px;
background: var( --apt-home-surface-muted );
border-left: 3px solid var( --apt-home-tint-blue-fg );
border-radius: 0 10px 10px 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight-icon {
flex-shrink: 0;
color: var( --apt-home-tint-blue-fg );
margin-top: 1px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight-body {
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight-type {
margin: 0 0 3px;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var( --apt-home-tint-blue-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight-text {
margin: 0 0 4px;
font-size: 0.78rem;
line-height: 1.5;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight-cta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.74rem;
font-weight: 600;
color: var( --apt-home-tint-blue-fg );
text-decoration: none;
}
/* ---- HOME-HUB-CORRECTIVE-1A — whole-Hub collapse control ---- */
/* Same quiet full-width row as .hub-expand below, but as a HEADER above
the Hub's content (border-bottom, not border-top; no top margin — this
is the first thing inside .hub-card) rather than a footer-style closer.
The inner button reuses .hub-expand-btn/.hub-expand-text/
.hub-expand-control/.hub-expand-label/.hub-expand-chevron verbatim —
same visual language, no new button style. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0 0 0.6rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var( --apt-home-border );
}
/* ACCOUNT-OVERVIEW-COLLAPSED-VISUAL-1A — real identity + quick actions
shown even while the panel below stays collapsed. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-identity {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-avatar,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-avatar-fallback {
width: 38px;
height: 38px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-avatar-fallback {
color: #fff;
font-weight: 700;
font-size: 0.85rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-name {
font-size: 0.85rem;
font-weight: 800;
margin: 0;
color: var( --apt-home-text );
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-role {
font-size: 0.72rem;
font-weight: 600;
margin: 1px 0 0;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-quick {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-qa {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 700;
color: var( --apt-home-text );
background: var( --apt-home-surface-muted );
border: 1px solid var( --apt-home-border );
padding: 0.3rem 0.6rem;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-qa:hover {
border-color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-qa--cta {
background: var( --apt-home-primary );
border-color: var( --apt-home-primary );
color: #fff;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-qa-badge {
background: var( --apt-home-primary );
color: #fff;
font-size: 0.65rem;
font-weight: 800;
padding: 0 0.35rem;
border-radius: 999px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-qa--cta .apt-home-preview-1a__hub-overview-qa-badge {
background: #fff;
color: var( --apt-home-primary );
}
/* Scoped modifier — this is the ONLY .hub-expand-btn instance that no
longer spans the full collapsed row (identity + quick actions now share
it); the OTHER .hub-expand-btn (Spotlight/Quick Access collapse) is a
completely separate element and is untouched by this rule. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-toggle-btn {
width: auto;
flex-shrink: 0;
}
@media ( max-width: 768px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-overview-quick {
width: 100%;
order: 3;
}
}
/* ---- ASKPERTASK-HOME-CONTENT-CONTROL-1A — Level 3 collapse control ---- */
/* OWNER-VISUAL-POLISH-1A — full-width quiet dashboard-section row (was a
centered pill that read as a primary CTA). Same collapse/expand JS
contract (id/aria-expanded/aria-controls), only the inner presentation
changed — see body.php comment at the call site. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand {
display: flex;
margin: 0.4rem 0 0;
padding-top: 0.25rem;
border-top: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 0.2rem 0.4rem;
font-family: inherit;
text-align: left;
color: var( --apt-home-text-muted );
background: transparent;
border: 1px solid transparent;
border-radius: var( --apt-home-radius-sm );
cursor: pointer;
transition: background 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn:hover {
background: var( --apt-home-surface-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-text strong {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.1;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-text span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.7rem;
font-weight: 400;
line-height: 1.15;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-control {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
font-size: 0.76rem;
font-weight: 600;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 2px;
}
/* Default (collapsed / aria-expanded="false"): show "More…", hide "Show
less". JS toggles the .is-expanded class on click — the underlying
aria-expanded attribute is the source of truth for assistive tech, this
class only drives which label text is visible. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-label--less {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn.is-expanded .apt-home-preview-1a__hub-expand-label--more {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn.is-expanded .apt-home-preview-1a__hub-expand-label--less {
display: inline;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-chevron {
transition: transform 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn.is-expanded .apt-home-preview-1a__hub-expand-chevron {
transform: rotate( 180deg );
}
/* §34 — optional attention dot; only ever server-rendered when a real,
currently-active AskPerTask Update has type=important — never a
fabricated unread/urgency signal, and its content is never exposed while
collapsed. Amber, not red — ordinary "important" is still not an
emergency (§23). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var( --apt-home-tint-amber-fg );
flex-shrink: 0;
}
/* ---- Level 3 — live activity modules ---- */
/* SPOTLIGHT-FIRST-PLANE-POLISH-1A — Spotlight is now the visually primary
Level-3 module (owner: "must attract attention BEFORE the secondary
update modules", "occupies approximately 2 module columns"). Achieved
with `order` + `grid-column`/`grid-row` span only — the 4 modules'
real DOM order/content in apt-home-preview-body.php is untouched (see
.hub-module--spotlight/.hub-module--updates below for the actual
spans; `order: -1` on Spotlight there is what moves it first in the
grid's placement sequence regardless of its real DOM position, and
is also why it's already first on the ≤600px single-column mobile
stack with no separate mobile-only reorder rule needed). */
/* WELCOME-HUB-DYNAMIC-PRIORITY-1A §B — grid-auto-flow:dense. The 3
reorderable modules now carry a real, data-driven inline `order`
(apt-home-preview-body.php) instead of a fixed value, and one of them
(Updates) spans 2 columns while the other two are 1x1 — with the
default "sparse" packing algorithm, certain real rank permutations at
the ≤1100px 2-column tier can strand a 1-column gap that a later 1x1
item's placement cursor never looks back to fill (verified by hand
against the grid math). "dense" repacks to fill any such gap
automatically — it only changes gap-filling, not the real order
sequence itself, so Spotlight's pin and the computed priority order
are both unaffected. */
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — Spotlight is
extracted (see .hub-main above), so Account Activity is now exactly 3
equal-weight modules (What's Happening / Updates for you / AskPerTask
Updates) — a plain 3-column grid, no more asymmetric spans needed.
grid-auto-flow:dense kept as harmless belt-and-braces (a no-op with 3
equal 1x1 items, but avoids re-litigating the gap-filling proof from
WELCOME-HUB-DYNAMIC-PRIORITY-1A if a 4th module is ever added later). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-modules {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat( 3, 1fr );
gap: 0.65rem;
}
/* Cascade-origin note: author rules beat the UA stylesheet's own
`[hidden] { display: none }` regardless of matching specificity (author >
user-agent takes priority at equal specificity), so the plain `display:
grid` rule above would otherwise silently defeat the real `hidden`
attribute JS relies on. This explicit, higher-specificity override
restores the native hidden behaviour — verified in QA (§40). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-modules[hidden] {
display: none;
}
/* R6.2 §12 — 182px (within the owner's 170-190px target, was 210px). */
/* R6.2B §17 — 180px preferred (within 174-188px), padding 15-16px. */
/* ASKPERTASK-HOME-WELCOME-SERVICES-FINAL-POLISH-1B §F — with the
"Recent bookings" module removed, Level 3 is exactly 4 cards now (was
5 crammed into 4 explicit columns, silently wrapping a 5th card onto
its own half-empty row). Border lightened to the same soft, low-alpha
token already used for the header hairline (--r6-border-soft) instead
of the harder --apt-home-border, and the fixed height trimmed slightly
— both toward the owner's "lighter borders... compact vertical
footprint" direction, without touching the shared card radius/shadow
language used across the rest of the Hub. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module {
position: relative;
background: var( --apt-home-surface );
border: 1px solid var( --r6-border-soft );
border-radius: 14px;
box-shadow: var( --r6-shadow-card );
padding: 13px 15px;
min-height: 168px;
height: 100%;
display: flex;
flex-direction: column;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-heading {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.035em;
text-transform: uppercase;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-heading svg {
flex-shrink: 0;
}
/* SPOTLIGHT-PROMO-CARD-REFINEMENT-1A — owner-approved Visual Braille box
model (presentation only — no change to Spotlight storage/query/
scheduling/audience/admin architecture). Spotlight is deliberately the
most visually distinct Level-3 card (owner: "najbardziej
charakterystyczna karta"): its own meta bar, a full-bleed media block,
and a real button CTA — richer than "What's happening now" / "Recent
bookings" / "AskPerTask Updates", while still sharing this file's base
card shell (radius/border/shadow tokens) and the shared grid gap. Still
never a fake promoted company/product — only real managed content or
real platform guidance text. */
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — Spotlight now
lives permanently in .hub-spotlight-col (see .hub-main above), not as
a grid child of .hub-modules — the grid-column/grid-row/order
placement rules that used to make it dominate that grid are gone
(meaningless outside a grid parent). Visual treatment (gradient
background, shadow, flex column) is unchanged. */
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — the outer card is plain/white again
(matching sibling modules); the strong green gradient moves onto
.hub-spotlight-content only, so it reads as ONE integrated feature
surface (label row above, green card below) instead of a tinted
wrapper around a separate pale media strip. display:grid with 2 rows
— metabar (row 1), then media+content sharing row 2 so the
decorative icon can sit BEHIND the text as one layered card instead
of a separate block above it (see .hub-spotlight-media /
.hub-spotlight-content below). flex:1 lets this card (not a fixed
height) absorb whatever extra space .hub-main's grid stretch gives
this column so it naturally bottom-aligns with Quick Access — see
.hub-main below for the stretch side of that. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module--spotlight {
padding: 0;
overflow: hidden;
background: var( --apt-home-surface );
display: grid;
grid-template-rows: auto 1fr;
height: auto;
min-height: 0;
}
/* ---- Meta bar (§2) ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-metabar {
grid-row: 1;
grid-column: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: 27px;
padding: 7px 12px;
flex-shrink: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-metabar-label {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.035em;
text-transform: uppercase;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-metabar-label svg {
flex-shrink: 0;
color: var( --apt-home-primary );
}
/* §2/§13 — the derived display-label badge. Sponsored is the required,
non-suppressible literal-text disclosure (see
apt_home_content_spotlight_display_label()); the other three variants
share the same pill treatment for one consistent visual language, never
a red/flashing/oversized "ad" appearance. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-badge {
flex-shrink: 0;
padding: 3px 9px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 999px;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-badge--sponsored {
background: var( --apt-home-tint-amber-bg );
color: var( --apt-home-tint-amber-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-badge--featured,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-badge--platform {
background: var( --apt-home-tint-green-bg );
color: var( --apt-home-tint-green-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-badge--partner {
background: var( --apt-home-tint-violet-bg );
color: var( --apt-home-tint-violet-fg );
}
/* ---- Media area (§3/§4/§15) — full-bleed, same footprint whether a real
image or the decorative fallback renders, so the card never changes
shape depending on whether one was uploaded. ---- */
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — media is now a decorative layer
BEHIND .hub-spotlight-content, both placed in the same grid cell
(row 2 of .hub-module--spotlight) so they overlap instead of
stacking as separate blocks — CSS Grid stacks same-cell items by DOM
order, content (below in markup) paints on top. No own background —
it now sits inside the green card, not above it — and the decorative
icon bleeds toward the right edge at low opacity, same real SVG
motif, no new asset. A real admin-uploaded image (rare; none live in
production today) would currently render tinted by the content
card's gradient on top of it — a real photo Spotlight would need a
follow-up if one is ever configured (flagged in the batch report). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-media {
grid-row: 2;
grid-column: 1;
z-index: 0;
margin: 0 16px 16px;
border-radius: 12px;
overflow: hidden;
pointer-events: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-media-fallback {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-deco {
width: 150px;
height: 150px;
margin-right: -25px;
color: #fff;
opacity: 0.16;
pointer-events: none;
}
/* ---- Content area (§6-§10) — now the green feature card itself ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-content {
grid-row: 2;
grid-column: 1;
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
margin: 0 16px 16px;
padding: 20px 22px;
border-radius: 12px;
background: linear-gradient( 138deg, #1a6b2f 0%, #237a38 52%, #2d9245 100% );
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.28;
color: #fff;
margin: 0 0 0.4rem;
max-width: 85%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-body {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin: 0 0 0.5rem;
font-size: 0.86rem;
line-height: 1.5;
color: rgba( 255, 255, 255, 0.8 );
max-width: 90%;
}
/* §10 — destination preview row: host-only text (see
apt_home_content_format_destination_label()) — never a full/tracking
URL, query string, or unsafe scheme. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-destination {
display: flex;
align-items: center;
gap: 0.3rem;
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 600;
color: rgba( 255, 255, 255, 0.72 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-destination svg {
flex-shrink: 0;
color: rgba( 255, 255, 255, 0.72 );
}
/* §11 — real button, inverted (white surface / green text) to sit on
top of the new green card, matching the approved target. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
min-height: 36px;
padding: 0.5rem 1.05rem;
font-size: 0.85rem;
font-weight: 700;
color: #1a6b2f;
background: rgba( 255, 255, 255, 0.94 );
border-radius: 8px;
text-decoration: none;
width: fit-content;
box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-cta:hover {
background: #fff;
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.16 );
transform: translateY( -1px );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-cta:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* §13 — Sponsored variant: the literal "Sponsored" text badge in the meta
bar is the actual, non-removable disclosure (never color-only); this is
only a very subtle additional border-tint cue, never red/warning styling. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module--sponsored {
border-color: rgba( 180, 121, 14, 0.28 );
}
/* ---- AskPerTask Updates — real managed list ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__updates-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow-y: auto;
max-height: 148px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__updates-list[hidden] {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 50%;
background: var( --apt-home-surface-muted );
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-icon svg {
width: 13px;
height: 13px;
}
/* Only type=important gets stronger presentation (§23) — an amber tint
accent, never red/emergency styling. */
body.apt-home-preview-1a-active .apt-home-preview-1a__update-item--important .apt-home-preview-1a__update-icon {
background: var( --apt-home-tint-amber-bg );
color: var( --apt-home-tint-amber-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-title {
font-size: 0.82rem;
font-weight: 700;
line-height: 1.3;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-desc {
font-size: 0.76rem;
line-height: 1.3;
color: var( --apt-home-text-muted );
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* WELCOME-HUB-CTA-HIERARCHY-1A §6/§8 — AskPerTask Updates is Level C
(informational), one tier quieter than the Level B green tile actions
(.hub-tile-action) — was previously the exact same green/weight, with
no visible difference from Level B. Neutral muted-grey text instead of
the brand green, and hover only darkens toward the base text colour
(never toward green), so this tier can never look as "clickable-
prominent" as Level B even on interaction. Purely a colour/weight
change — same size, same chevron, same position, same real cta_url/
cta_label data. */
body.apt-home-preview-1a-active .apt-home-preview-1a__update-cta {
display: inline-flex;
align-items: center;
gap: 0.2rem;
margin-top: 2px;
font-size: 0.74rem;
font-weight: 600;
color: var( --apt-home-text-muted );
text-decoration: none;
width: fit-content;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-cta:hover {
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-dismiss {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: auto;
padding: 0;
font-size: 1rem;
line-height: 1;
color: var( --apt-home-text-muted );
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-dismiss:hover {
color: var( --apt-home-text );
background: var( --apt-home-surface-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__update-dismiss:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: 1px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty {
margin: 0;
font-size: 0.76rem;
line-height: 1.3;
color: var( --apt-home-text-muted );
}
/* GAP-REVIEW §8/§9 — shared empty-state composition (Recent Bookings /
System Updates): centred icon + bold headline + muted secondary line,
never fake content, just a well-composed neutral state. Replaces the
flatter single-paragraph version. */
/* R6.2B §20/§21 — icon 40-44px (was 48px), tighter gap/padding, toward
the 174-188px module height target. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-state {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
text-align: center;
padding: 0.2rem 0.25rem;
}
/* Same author-vs-UA-stylesheet cascade note as .hub-modules[hidden] above —
the AskPerTask Updates module toggles this element's `hidden` attribute
between the real list and the empty state. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-state[hidden] {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-title {
font-size: 0.82rem;
font-weight: 700;
color: var( --apt-home-text-muted );
}
/* ASKPERTASK-HOME-WELCOME-SERVICES-FINAL-POLISH-1B §F — smaller, quieter
empty-state icon+title (was 40px / 0.9rem bold-dark) so a genuinely
empty module reads as a calm neutral placeholder, never competing for
attention with a sibling module that has real content (owner: "real
content gets more emphasis than empty states"). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: 0;
border-radius: 50%;
background: var( --apt-home-tint-blue-bg );
color: var( --apt-home-tint-blue-fg );
opacity: 0.85;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-icon svg {
width: 16px;
height: 16px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module-empty-icon--success {
background: var( --apt-home-tint-green-bg );
color: var( --apt-home-tint-green-fg );
}
/* What's Happening Now list */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-list li + li {
border-top: 1px solid var( --apt-home-border );
}
/* R6.1 §17 — explicit 3-column row grid (icon / flexible text / trailing
chevron-or-badge), matching the owner's literal column spec. */
/* R6.2B §18 — 28px icon column, 14px trailing (min, grows for the real
"New"/"Action needed" badge text), 8px gap, 46px row min-height. */
/* WHATS-HAPPENING-TRUNCATION-FIX-1A — second root-cause factor beyond the
nowrap/ellipsis rule above: the real "ACTION NEEDED"/"New" badge sat in
its own trailing grid column (minmax(14px,auto), auto-sized to the
badge's own ~90-100px content width), competing horizontally with the
text column on every row that has one. That was a minor squeeze in the
old 4-equal-column layout; in this card's now-narrower real width
(SPOTLIGHT-FIRST-PLANE-POLISH-1A, unchanged/approved) it left too
little room for the title to read even across 2 wrapped lines
(confirmed via real QA screenshot: "Booking / awaiti…" still clipped).
Fix: badge moves to its own row below the text (grid-template-areas),
so it no longer competes for width at all — title/body get the full
text column. The narrow trailing chevron (mutually exclusive with the
badge, see body.php) is unaffected — same trailing position as before. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-list a {
display: grid;
grid-template-columns: 28px minmax( 0, 1fr ) auto;
grid-template-areas:
"icon body chevron"
"icon badge badge";
align-items: start;
gap: 2px 8px;
padding: 0.5rem 0;
min-height: 46px;
text-decoration: none;
color: inherit;
border-radius: 6px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-list a:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: -2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-icon {
grid-area: icon;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 50%;
background: var( --apt-home-surface-muted );
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-icon svg {
width: 14px;
height: 14px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-body {
grid-area: body;
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
/* WHATS-HAPPENING-TRUNCATION-FIX-1A — root cause: white-space:nowrap +
text-overflow:ellipsis forced these onto a single line regardless of
available width. That was fine when this card was one of 4
equal-width columns; SPOTLIGHT-FIRST-PLANE-POLISH-1A narrowed this
card's real column share (owner-approved base layout, unchanged here),
so the same single-line rule now clips mid-word ("Book…",
"Garden servic…") well before the real text ends. Fix: allow real
wrapping, bounded to 2 lines (same clamp pattern already used for
.hub-spotlight-title) so long real strings stay fully readable without
letting the row grow unbounded tall. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-body strong {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.85rem;
line-height: 1.3;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-body span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.76rem;
line-height: 1.35;
color: var( --apt-home-text-muted );
}
/* WHATS-HAPPENING-TRUNCATION-FIX-1A — moved to its own row (grid-area:
badge, spanning the text+chevron columns below them) instead of
sharing the title's row — see the grid-template-areas comment above
for why. justify-self:start keeps it left-aligned under the text
rather than stretching full width. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-badge {
grid-area: badge;
justify-self: start;
margin-top: 2px;
flex-shrink: 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var( --apt-home-tint-green-fg );
background: var( --apt-home-tint-green-bg );
border-radius: 999px;
padding: 0.2rem 0.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-happening-chevron {
grid-area: chevron;
align-self: center;
flex-shrink: 0;
color: var( --apt-home-text-muted );
}
/* ASKPERTASK-HOMEPAGE-MESSAGING-MAP-BOOKINGS-POLISH-1A — Updates for you
(followed-professional activity), same row/typography language as the
happening-list above, 2-column (text / chevron) since there's no
per-item icon here. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-list li + li {
border-top: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-list a {
display: grid;
grid-template-columns: minmax( 0, 1fr ) 14px;
align-items: center;
gap: 8px;
padding: 0.5rem 0;
min-height: 42px;
text-decoration: none;
color: inherit;
border-radius: 6px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-list a:focus-visible {
outline: 2px solid var( --apt-home-primary );
outline-offset: -2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-body {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-body strong {
font-size: 0.85rem;
color: var( --apt-home-text );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-body span {
font-size: 0.76rem;
color: var( --apt-home-text-muted );
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-following-chevron {
flex-shrink: 0;
color: var( --apt-home-text-muted );
}
/* ASKPERTASK-HOME-WELCOME-SERVICES-FINAL-POLISH-1B §E — the "Recent
Bookings" module markup was removed (see apt-home-preview-body.php);
its now-orphaned .hub-bookings-list / .hub-booking-* rules were removed
here too. Bookings still has its own Level-2 tile above, and a real
booking event can still surface inside "What's happening now" (reusing
.hub-happening-* rules, not these). */
/* Small button-size modifier — still used elsewhere (hero CTAs share the
same base .btn), kept for any future compact action in this section. */
body.apt-home-preview-1a-active .apt-home-preview-1a__btn--sm {
padding: 0.55rem 1rem;
font-size: 0.85rem;
}
/* -----------------------------------------------------------
Hero — map-first
----------------------------------------------------------- */
/* R2 §1/§9 — less empty margin above/below (was 3.5rem both sides); the
hero should read as the dominant first-viewport moment, not a padded
band, while the header/return-strip above it are now more compact
too (§2), so overall above-the-fold density goes up without cramping
the CTAs. */
/* FINAL ATMOSPHERE §2 — top padding trimmed (was 2.75rem) to match the
Hub's own reduced bottom padding, so the two sections read as closer
together instead of "panel -> blank white -> hero". */
/* BACKGROUND-DETAIL §9 — trimmed again (was 2.15rem) toward the owner's
~32-44px combined perceived-rhythm target with the Hub's own reduced
bottom padding above. */
/* R6.2 §13 — trimmed again (was 1.1rem) toward the owner's ~28-36px
combined Hub->Hero rhythm target with the Hub's own reduced bottom
padding above. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero {
position: relative;
padding: 0.75rem 0 3rem;
}
/* R6.1 ATMOSPHERE PASS §6/§7 — embeds the hero in the same visual system
as the Hub above it: a soft organic green glow behind the headline
(left, balancing the visually heavy map on the right) and a faint
contour motif echoing toward the map (right). Sits behind both grid
children (they paint after this pseudo in source order) and never
overlaps the map image itself meaningfully (contour is anchored to the
far-right edge, mostly in the gutter beyond the rounded map frame). */
/* FINAL ATMOSPHERE §2 — extended further up (was -80px) so it visibly
overlaps the Hub's own bottom transition wash across the now-smaller
gap between the two sections, instead of two glows that don't quite
meet. */
/* BACKGROUND-DETAIL PASS — Cluster C (SCALE 2, ~190px) far-left, bled
mostly off-canvas into the true outer gutter so it never sits under
the headline text; Cluster D (SCALE 2, ~200px) + a small node fragment
near the map's right-hand gutter — the richest zone (owner §10), still
subtle, real map stays dominant. Both soft glows trimmed (SCALE 1
local echoes only, not the loudest thing on screen). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero::before {
content: "";
position: absolute;
inset: -130px 0;
pointer-events: none;
background:
/* §14 — warmer/green-white open area behind the headline (left)
and a slightly stronger cool ambient surface around the map
(right), so the Hero visibly shares the same lit environment
as the Hub above it rather than sitting on flat white. */
radial-gradient( ellipse 560px 460px at 2% 42%, rgba( 31, 163, 74, 0.065 ), transparent 68% ),
radial-gradient( ellipse 560px 460px at 100% 50%, rgba( 88, 128, 158, 0.055 ), transparent 66% ),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.035%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%2C60%20C22%2C30%2058%2C10%2096%2C16%20C126%2C21%20142%2C44%20134%2C68%27%2F%3E%3Cpath%20d%3D%27M30%2C68%20C38%2C46%2064%2C32%2092%2C38%20C112%2C42%20122%2C58%20114%2C74%27%2F%3E%3Cpath%20d%3D%27M50%2C76%20C55%2C62%2072%2C54%2090%2C60%20C102%2C64%20106%2C74%2098%2C82%27%2F%3E%3Cpath%20d%3D%27M120%2C120%20C132%2C112%20148%2C116%20152%2C130%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left -95px top 100px / 170px 153px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.04%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M20%2C40%20C40%2C18%2090%2C10%20130%2C28%20C160%2C42%20172%2C72%20158%2C98%27%2F%3E%3Cpath%20d%3D%27M38%2C52%20C54%2C34%2092%2C28%20122%2C42%20C144%2C53%20152%2C74%20140%2C92%27%2F%3E%3Cpath%20d%3D%27M58%2C64%20C68%2C52%2094%2C48%20112%2C58%20C126%2C66%20130%2C80%20120%2C88%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right -70px top 40px / 175px 158px no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%2080%27%3E%3Cg%20fill%3D%27rgba%2831%2C163%2C74%2C0.04%29%27%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2715%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2738%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2710%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2768%27%20cy%3D%2740%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2722%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2760%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2768%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2752%27%20r%3D%271.3%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M28%2C38%20L50%2C10%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.028%29%27%20stroke-width%3D%270.7%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E") right 20px top 380px / 100px 80px no-repeat;
}
/* R6.2B §23 — same 1140px content width as the Hub (overrides the
shared .aptv2__container's 1260px just for this dual-classed element;
every other section using .aptv2__container is untouched). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-inner {
position: relative;
width: min( calc( 100% - 48px ), var( --r6-content-width ) );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-inner {
display: grid;
/* R6.2B §23 — REAL BUG FOUND & FIXED (2nd pass): 45% of the OLD
1260px container (~549px) fit the locked "Right where you are."
headline on one line; 45% of the now-narrower 1140px container is
only ~495px, which still wraps it (confirmed by screenshot even
after widening hero-content's max-width, since the grid column
itself — not max-width — is the real constraint here). Bumped to
50% (~550px at this container width) to restore the same real
column width the headline was verified against. Copy is locked,
so layout accommodates it over the spec's literal 42-45% figure. */
grid-template-columns: 50% 1fr;
gap: 2.5rem;
align-items: center;
}
/* R6.2B §24 — caps the text column so the H1/lead never sprawl wider
than the owner's 420-460px target on a wide desktop grid column; in
practice the 50% grid column above (~550px) is the binding constraint,
this just guards against a wider container than 1140px. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-content {
max-width: 560px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-content h1 {
/* R2 §1 — larger, more decisive scale (was clamp(2.1rem,3.4vw,3rem));
capped at 3.35rem (not 3.6rem) so "Right where you are." still fits
its own line in the 45% column instead of wrapping to a 4th line. */
font-size: clamp( 2.5rem, 3.7vw, 3.35rem );
line-height: 1.08;
margin: 0 0 1.25rem;
font-weight: 700;
/* R4 §12 — slightly tighter tracking on the biggest type on the page,
consistent with the header wordmark's own -0.01em; keeps the
largest headline reading dense/decisive rather than loose. */
letter-spacing: -0.015em;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__accent {
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-lead {
font-size: 1.1rem;
/* R4 §12 — explicit line-height; the body font's default (~1.4-1.5)
read slightly cramped at this size next to the now-larger H1. */
line-height: 1.6;
color: var( --apt-home-text-muted );
max-width: 34rem;
margin: 0 0 1.9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
/* R4 §5 — compact trust strip under the CTA row: icon + short text only,
no counters, no cards. A hairline top rule (not a full card/border)
gives it a clear but very light separation from the CTA row above. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-trust {
list-style: none;
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var( --apt-home-border );
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-trust li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.86rem;
font-weight: 500;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-trust-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var( --apt-home-accent-tint );
color: var( --apt-home-primary );
}
/* LOCATION-TRUTH-1B — the outer `.hero-map` is a plain positioning
wrapper (holds the map-context caption + the map+sidebar widget). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map {
position: relative;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__map-context {
display: block;
margin-bottom: 0.75rem;
text-decoration: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__map-context strong {
display: block;
font-size: 1.1rem;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__map-context span {
display: block;
font-size: 0.9rem;
color: var( --apt-home-text-muted );
}
/* MAP-TOPBOTTOM-BARS-1C §1/§10 — the floating right-side sidebar is
replaced with a thin top context bar + full-width map + compact bottom
activity bar, stacked in ONE shared frame (radius/border/shadow live
here, on the OUTER widget) so the whole thing reads as a single
integrated map card. The map itself now gets almost the full card
width, at every breakpoint — no more row/column layout switch. */
body.apt-home-preview-1a-active .apt-home-preview-1a__map-widget {
display: flex;
flex-direction: column;
border-radius: var( --r6-radius-lg );
border: 1px solid var( --r6-border-soft );
overflow: hidden;
/* R6.2 §15 — stronger but still soft shadow (the map is meant to read
as the single strongest visual object below the Hub). */
box-shadow: var( --apt-home-shadow-lg ), 0 24px 56px -18px rgba( 16, 24, 40, 0.22 );
background: var( --apt-home-surface-muted );
}
/* -----------------------------------------------------------
Top context bar (MAP-TOPBOTTOM-BARS-1C §6) — ~12-16% of the card.
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1.1rem;
background: var( --apt-home-surface );
border-bottom: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-main {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var( --apt-home-primary );
display: inline-block;
flex: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-text {
display: flex;
flex-direction: column;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-town {
font-size: 0.98rem;
font-weight: 700;
color: var( --apt-home-text );
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-state {
font-size: 0.72rem;
font-weight: 600;
color: var( --apt-home-text-muted );
letter-spacing: 0.01em;
}
/* A genuinely LIVE device reading is the one state worth a stronger accent
— every other state (NONE/RECENT/MANUAL) keeps the neutral muted label
colour, restrained per §9. */
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar[data-state="device"] .apt-home-preview-1a__topbar-state {
color: var( --apt-home-primary );
}
/* HOMEPAGE-MAP-TOPBAR-WEATHER-1E — subtle, secondary to the location text
it sits beside (never bold, never accent-coloured); [hidden] already
removes it from layout whenever there is no real reading to show. */
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-weather {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
font-weight: 500;
color: var( --apt-home-text-muted );
white-space: nowrap;
flex: none;
}
/* HOMEPAGE-MAP-MARKER-POLISH-1A §7 — restrained weather glyph, same muted
colour as the text beside it (currentColor, no accent) — never larger or
busier than the number/condition text it sits next to. */
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar-weather svg {
width: 13px;
height: 13px;
flex: none;
}
/* -----------------------------------------------------------
Map frame — regains most of the card's width/height (§10).
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-frame {
position: relative;
width: 100%;
/* Wide, full-bleed aspect ratio now that nothing sits beside the map —
keeps the map the dominant visual element without an excessively
tall card. */
aspect-ratio: 21 / 9;
max-height: 480px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-link {
display: block;
width: 100%;
height: 100%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* HOMEPAGE-MAP-MARKER-POLISH-1A — branded activity-pin overlay. Positioned
entirely by apt-home-preview-1a.js (real lat/lng projected onto THIS
frame's actual rendered size, accounting for the img's object-fit:cover
crop — see projectToFrame()); this container only ever needs to sit above
the map image and never intercept clicks meant for the map link beneath
it. */
body.apt-home-preview-1a-active .apt-home-preview-1a__map-pins {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
/* Small (28px), circular, white-ringed — enough contrast to read as
"AskPerTask activity" above the native map without competing with it.
Deliberately restrained per the approved spec: no bounce, no per-pin
pulse, no popup card. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pin {
position: absolute;
top: 0;
left: 0;
transform: translate( -50%, -50% );
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba( 16, 24, 40, 0.35 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pin svg {
width: 14px;
height: 14px;
}
/* Same real per-type accent colours already used elsewhere on this card
(expert count/badge = green, request count/badge = warm orange) — one
source of truth in CSS custom properties, never a third hard-coded hex
duplicating aptv2_home_preview_1a_pin_colors() / PIN_ICON_SVG. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pin--expert {
background: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pin--request {
background: var( --apt-home-tint-amber-fg );
}
/* Current/selected-area indicator (§3) — always the exact centre of the
frame, since the map image is by construction always centred on the
point being shown, in every Location Truth state. A neutral "this is the
area" marker, never a "you are here" claim by itself (that distinction
lives in the top bar's real text, e.g. "Live near you" vs "Redditch,
UK"), so one static visual works for NONE/DEVICE/RECENT/MANUAL alike. */
body.apt-home-preview-1a-active .apt-home-preview-1a__map-center {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__map-center-ring {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
width: 46px;
height: 46px;
border-radius: 50%;
/* --apt-home-tint-blue-fg (#2C64C9) at low opacity — a soft translucent
halo, not a solid pastel disc. */
background: rgba( 44, 100, 201, 0.16 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__map-center-dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
width: 11px;
height: 11px;
border-radius: 50%;
background: var( --apt-home-tint-blue-fg );
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.35 );
}
/* LOCATION-CONSISTENCY-1A: before the device location is known the map is only a
labelled example area — no centre marker, so nothing reads as "you are here". */
body.apt-home-preview-1a-active .apt-home-preview-1a__map-widget:has( .apt-home-preview-1a__topbar[data-state="none"] ) .apt-home-preview-1a__map-center {
display: none;
}
/* -----------------------------------------------------------
Bottom activity bar (MAP-TOPBOTTOM-BARS-1C §8) — ~12-18% of the card.
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__activitybar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1.25rem;
padding: 0.85rem 1.1rem;
background:
linear-gradient( 180deg, rgba( 31, 163, 74, 0.035 ), rgba( 31, 163, 74, 0 ) 70% ),
var( --apt-home-surface );
border-top: 1px solid var( --apt-home-border );
}
/* Numbers read stronger than labels: value first (bold, coloured), label
beside it (small, muted) — inline pairs in one thin horizontal strip,
never the tall stacked column the old sidebar used. */
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1.35rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li {
display: flex;
align-items: baseline;
gap: 0.35rem;
/* A thin vertical divider between stat items (not the first) — the
"premium bar" grouping cue §9 asks for, without adding a card-within-
a-card border around each one. */
padding-left: 1.35rem;
border-left: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li:first-child {
padding-left: 0;
border-left: none;
}
/* HOMEPAGE-MAP-MARKER-POLISH-1A §8 — real counts read slightly stronger
(was 1.05rem/700) without touching the bar's height (line-height stays 1,
padding unchanged) or its structure. */
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats strong {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats span {
font-size: 0.78rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li[data-stat="experts"] strong {
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li[data-stat="requests"] strong {
color: var( --apt-home-tint-amber-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li[data-stat="marketplace"] strong {
color: var( --apt-home-tint-violet-fg );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-copy {
margin: 0;
font-size: 0.82rem;
color: var( --apt-home-text-muted );
flex: 1 1 auto;
}
/* [hidden] vs. a class-level `display` declaration are equal-specificity
attribute/class selectors, so without this the LATER class rule below
(display: flex/inline-flex) would win over the browser's own
`[hidden]{display:none}` default and the element would stay visible
despite JS setting/removing the `hidden` attribute (a real bug found in
QA: the DEVICE-state bar still showed "Use my location"/"Enter
postcode" beneath "Change location"). Applies to every activity-bar
element JS toggles via `hidden` that also carries its own `display`
value. */
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats[hidden],
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn[hidden],
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-search[hidden],
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-suggestions[hidden] {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font: inherit;
font-size: 0.78rem;
font-weight: 600;
padding: 0.5rem 0.7rem;
border-radius: 8px;
border: 1px solid var( --apt-home-border );
background: var( --apt-home-surface );
color: var( --apt-home-text );
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn:hover,
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn:focus-visible {
border-color: var( --apt-home-primary );
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn:disabled {
cursor: default;
opacity: 0.6;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--primary {
background: var( --apt-home-primary );
border-color: var( --apt-home-primary );
color: #fff;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--primary:hover,
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--primary:focus-visible {
color: #fff;
border-color: var( --apt-home-primary-hover );
background: var( --apt-home-primary-hover );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--saved {
text-align: left;
justify-content: flex-start;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--link {
background: none;
border: none;
padding: 0.2rem 0;
color: var( --apt-home-text-muted );
text-decoration: underline;
justify-content: flex-start;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--link:hover,
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-btn--link:focus-visible {
color: var( --apt-home-primary );
}
/* MANUAL town/postcode search (LOCATION TRUTH §3). Forces its own full-
width row within the flex-wrap activity bar rather than squeezing into
the stats/actions row. */
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-search {
flex: 1 1 100%;
margin-top: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
max-width: 26rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-search-label {
font-size: 0.72rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-search-input {
font: inherit;
font-size: 0.82rem;
padding: 0.45rem 0.6rem;
border: 1px solid var( --apt-home-border );
border-radius: 8px;
background: var( --apt-home-surface );
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-suggestions {
display: flex;
flex-direction: column;
border: 1px solid var( --apt-home-border );
border-radius: 8px;
overflow-y: auto;
max-height: 9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-sugg {
display: block;
width: 100%;
text-align: left;
font: inherit;
font-size: 0.78rem;
padding: 0.4rem 0.6rem;
border: none;
background: var( --apt-home-surface );
color: var( --apt-home-text );
cursor: pointer;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-sugg:hover,
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-sugg:focus-visible {
background: var( --apt-home-accent-tint );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-no-results {
margin: 0;
padding: 0.4rem 0.6rem;
font-size: 0.78rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-error {
margin: 0.3rem 0 0;
font-size: 0.72rem;
color: #B42318;
}
/* Privacy note + status message share one thin, full-width trailing line
in the activity bar — keeps the bar's total height down instead of
stacking two separate caption rows the way the old tall sidebar did. */
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-privacy {
flex: 1 1 100%;
margin: 0;
font-size: 0.7rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-status {
flex: 1 1 100%;
margin: 0;
font-size: 0.7rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-status:empty {
display: none;
}
/* -----------------------------------------------------------
Section header shared pattern
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__section-header h2 {
/* R4 §12 — switched to the shared --apt-home-fs-h2 token (fluid
1.7rem-2.05rem) so every section heading on the page (this one,
Trust Panel, How it works, Pro CTA) scales off one consistent step
instead of each carrying its own hand-picked rem value. */
font-size: var( --apt-home-fs-h2 );
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__section-link {
font-size: 0.9rem;
font-weight: 600;
color: var( --apt-home-primary );
text-decoration: none;
white-space: nowrap;
}
/* -----------------------------------------------------------
Services
----------------------------------------------------------- */
/* R6.1 §25/§26 — Zone A: transparent, lets the scoped page-atmosphere
background (body::before/::after) show through instead of another
flat white band. */
body.apt-home-preview-1a-active .apt-home-preview-1a__services {
position: relative;
padding: 2.5rem 0;
}
/* R2 §4 — exactly 6 real categories now (data limit changed at the
source, template §4 comment), so desktop shows one full even row of 6
instead of 4-per-row with an overflow line. */
body.apt-home-preview-1a-active .apt-home-preview-1a__services-grid {
display: grid;
grid-template-columns: repeat( 6, 1fr );
gap: 1rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
/* R4 §7 — bigger padding + an explicit min-height so all 6 cards sit
on one stable baseline regardless of label length (1-2 words). */
padding: 1.5rem 1.25rem;
min-height: 152px;
position: relative;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
text-decoration: none;
color: var( --apt-home-text );
/* R4 §13 — card-tier layered shadow token (was a single flat 1px
line) for real rest-state depth, still very subtle/neutral. */
box-shadow: var( --apt-home-shadow-sm );
transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card:hover {
box-shadow: var( --apt-home-shadow );
border-color: var( --apt-home-svc-accent, var( --apt-home-primary ) );
transform: translateY( -2px );
}
/* R4 §7 — icon now sits in its own light tinted circle (was a bare glyph
floating on the card background); color-mix keeps the tint tied to the
same real, non-fabricated category accent used for the icon itself, so
no new colour is introduced — just a lighter version of the existing
one, the same pattern --apt-home-accent-tint already uses for green. */
body.apt-home-preview-1a-active .apt-home-preview-1a__service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: color-mix( in srgb, var( --apt-home-svc-accent, var( --apt-home-primary ) ) 14%, var( --apt-home-surface ) );
color: var( --apt-home-svc-accent, var( --apt-home-primary ) );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-icon svg {
width: 26px;
height: 26px;
stroke-width: 2;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-label {
font-weight: 700;
font-size: var( --apt-home-fs-card-title );
padding-right: 1.25rem;
}
/* R4 §7 — a discreet navigation signal (not a decorative flourish): a
quiet chevron that sits still at rest and nudges forward on hover, the
same "there's more here" cue the section-header "Browse all" links
already give with an arrow-style affordance. Pure CSS content, no new
markup or DOM node. */
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card::after {
content: "\2192";
position: absolute;
top: 1.35rem;
right: 1.1rem;
font-size: 1rem;
color: var( --apt-home-text-muted );
opacity: 0.45;
transition: opacity 0.18s ease, transform 0.18s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card:hover::after {
opacity: 1;
color: var( --apt-home-primary );
transform: translateX( 3px );
}
/* -----------------------------------------------------------
APT-HOME-SERVICES-PHOTO-1A — photo-led variant
Same card footprint (grid cell, min-height, radius, rest shadow,
hover lift) as the icon card above; the interior changes from an
icon tile to one real, licensed category photo with a bottom-up
dark scrim so the category title stays clearly readable. No layout,
dimensions or section position change.
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo {
justify-content: flex-end;
align-items: stretch;
padding: 0;
gap: 0;
overflow: hidden;
border-color: transparent;
background: var( --apt-home-text, #0f1720 );
color: #fff;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-photo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.3s ease;
}
/* Readability scrim — strongest behind the label, near-clear at the top
so the photo still reads. Single flat colour, opacity only. */
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba( 12, 18, 25, 0.86 ) 0%,
rgba( 12, 18, 25, 0.55 ) 32%,
rgba( 12, 18, 25, 0.16 ) 64%,
rgba( 12, 18, 25, 0.04 ) 100%
);
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo .apt-home-preview-1a__service-label {
position: relative;
z-index: 2;
padding: 0.9rem 1.05rem 0.95rem;
color: #fff;
text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 );
}
/* Chevron sits above the photo + scrim, tinted for a dark backdrop. */
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo::after {
z-index: 2;
color: rgba( 255, 255, 255, 0.92 );
opacity: 0.92;
text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.55 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo:hover {
border-color: transparent;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo:hover::after {
color: #fff;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card--photo:hover .apt-home-preview-1a__service-photo-img {
transform: scale( 1.045 );
}
/* -----------------------------------------------------------
R5 §9/§10/§13 — Latest Requests + New Services
Shared "discovery card" primitives — thumbnail-led, marketplace-style,
deliberately lighter/more visual than the Trust Panel's identity-led
pro-card below (owner §13: "efekt bardziej marketplace/discovery").
Both sections reuse the exact same .cards-rail grid + mobile
cap-at-2/view-all pattern already proven on the Trusted Professionals
grid — one consistent mobile interaction model on the page, not a new
carousel/scroll framework.
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__requests,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-discovery {
padding: 2.5rem 0;
}
/* R6.2 §17 — Zone B: a soft surface band that now FADES in/out (was a
hard-edged flat fill) so the boundary with the transparent Zone A
sections around it is gradual, never a hard band — owner's explicit
"no hard bands, transitions must be gradual". */
body.apt-home-preview-1a-active .apt-home-preview-1a__requests {
position: relative;
background: linear-gradient( to bottom, transparent, var( --r6-surface-soft ) 18%, var( --r6-surface-soft ) 82%, transparent );
}
/* ATMOSPHERE PASS §10 — a very faint contour echo in this Zone B band's
left corner, continuing the same visual language from the Hub/Hero
above instead of the page suddenly going "flat" for the discovery
sections. Content (cards) is unaffected — this sits behind them. */
/* BACKGROUND-DETAIL PASS — Cluster E (SCALE 2, ~160px), the faintest of
the five, tucked into the top-left corner gutter of this zone. */
body.apt-home-preview-1a-active .apt-home-preview-1a__requests::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.03%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M18%2C96%20C26%2C54%2066%2C16%20118%2C19%20C154%2C21%20182%2C52%20178%2C92%27%2F%3E%3Cpath%20d%3D%27M42%2C98%20C48%2C66%2082%2C42%20122%2C46%20C152%2C49%20168%2C70%20162%2C96%27%2F%3E%3Cpath%20d%3D%27M66%2C94%20C71%2C74%2096%2C60%20124%2C65%20C143%2C68%20150%2C80%20146%2C94%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left -50px top -30px / 160px 145px no-repeat;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__requests .aptv2__container {
position: relative;
}
/* auto-fit (not a fixed repeat(4,1fr)) so a real count below 4 — e.g.
New Services after admin/staff accounts are correctly excluded — fills
the row evenly instead of leaving a dead trailing gap. At >=4 real
items this still renders as 4 even columns within the 1260px
container (4 * 240px + 3 * 1.25rem gap fits comfortably). */
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-rail {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
gap: 1.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-card,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-card {
display: flex;
flex-direction: column;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
overflow: hidden;
text-decoration: none;
color: var( --apt-home-text );
box-shadow: var( --apt-home-shadow-sm );
transition: box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-card:hover,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-card:hover {
box-shadow: var( --apt-home-shadow );
border-color: var( --apt-home-primary );
transform: translateY( -2px );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-media,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
background: var( --apt-home-surface-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-media img,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Real-category-derived fallback visual (owner-approved neutral cover
treatment, same aptv2_get_category_visual() mapping the service tiles
already use) for the real minority of cards without a usable photo —
never a fake photo, never a blank box. */
body.apt-home-preview-1a-active .apt-home-preview-1a__req-media-fallback,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-media-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-media-fallback svg,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-media-fallback svg {
width: 34px;
height: 34px;
stroke-width: 1.75;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: var( --apt-home-map-overlay );
color: var( --apt-home-text );
box-shadow: var( --apt-home-shadow-xs );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-body,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-body {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.9rem 1rem 1.1rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-category,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-category {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-title,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-title {
font-size: var( --apt-home-fs-card-title );
line-height: 1.3;
/* Real titles vary in length — clamp to 2 lines so card heights in a
row stay aligned regardless of content, no fixed magic-number height. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.85rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-foot {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.78rem;
color: var( --apt-home-text-muted );
margin-top: 0.15rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-chips {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.3rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-chip {
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: var( --apt-home-surface-muted );
color: var( --apt-home-text-muted );
border: 1px solid var( --apt-home-border );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-provider {
font-size: 0.85rem;
color: var( --apt-home-text-muted );
}
/* Trust row — max 3 real signals (owner §11), plain text/icon, never a
heavier badge treatment that would compete with the Trust Panel below. */
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
margin-top: 0.3rem;
font-size: 0.8rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-trust-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-trust-item--verified {
color: var( --apt-home-primary );
font-weight: 600;
}
/* ---- LIVE-REVIEW-CARD-HEIGHT-1A: one layout rule for both card rails (Latest Requests, New Services) ----
The grid already stretches every card to its row's height; these rules make the CONTENT line up inside it:
the body fills the card, the category line and the title reserve the same space in every card, and the
bottom block (request: badges + posted/offers; service: trust row) is anchored to the card's bottom edge.
Nothing is hidden or shortened beyond the existing title clamp (now 3 lines, 2 reserved). The reserved
heights apply only where cards sit side by side (>600px); stacked cards keep their natural height. */
body.apt-home-preview-1a-active .apt-home-preview-1a__req-body,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-body {
flex: 1 1 auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-media,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-media {
flex: 0 0 auto;
overflow: hidden;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-category:empty,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-category:empty {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-title,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-title {
-webkit-line-clamp: 3;
}
/* Bottom block: badges sit above posted / offers (visual order only), and the pair hugs the bottom edge; without
badges, posted / offers alone does. */
body.apt-home-preview-1a-active .apt-home-preview-1a__req-chips {
order: 1;
margin-top: auto;
padding-top: 0.3rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-foot {
order: 2;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-body > .apt-home-preview-1a__req-foot:last-child {
margin-top: auto;
padding-top: 0.15rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-trust {
margin-top: auto;
padding-top: 0.3rem;
}
@media ( min-width: 601px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__req-category,
body.apt-home-preview-1a-active .apt-home-preview-1a__req-category:empty,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-category,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-category:empty {
display: block;
min-height: 1.3em;
line-height: 1.3;
/* One line side by side ("Home Repairs (Plumbing, Heating, …)" wrapped and pushed its title down);
the full name stays in the title attribute. */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-title,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-title {
min-height: calc( 2 * 1.3em );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-meta {
min-height: 1.4em;
}
}
/* Same mobile "view all" pattern already proven on the Trusted
Professionals grid (R1 §6) — hidden by default, shown only ≤600px. */
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-mobile-viewall {
display: none;
align-items: center;
justify-content: center;
margin-top: 1.25rem;
padding: 0.75rem 1rem;
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
color: var( --apt-home-text );
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
background: var( --apt-home-surface );
}
/* R5 §8 — neutral empty-state panel for Latest Requests when zero real,
open, non-test requests exist (NO REAL DATA -> NO FAKE CARD). */
body.apt-home-preview-1a-active .apt-home-preview-1a__empty-panel {
text-align: center;
max-width: 28rem;
margin: 0 auto;
padding: 2rem 1.5rem;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
box-shadow: var( --apt-home-shadow-sm );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__empty-panel h2 {
font-size: 1.2rem;
margin: 0 0 0.4rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__empty-panel p {
margin: 0 0 1.1rem;
color: var( --apt-home-text-muted );
}
/* -----------------------------------------------------------
Trusted Local Professionals
----------------------------------------------------------- */
/* R6.2 §17 — same gradual-fade treatment as the Zone B band above. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pros {
padding: 2.5rem 0;
background: linear-gradient( to bottom, transparent, var( --apt-home-surface-muted ) 18%, var( --apt-home-surface-muted ) 82%, transparent );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pros-grid {
display: grid;
grid-template-columns: repeat( 4, 1fr );
gap: 1.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
padding: 1.25rem;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
text-decoration: none;
color: var( --apt-home-text );
box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.05 );
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-card:hover {
box-shadow: var( --apt-home-shadow );
transform: translateY( -2px );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-avatar img,
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-avatar-fallback {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
background: var( --apt-home-surface-muted );
color: var( --apt-home-primary );
font-weight: 700;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-name {
font-size: 1rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-category,
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-area,
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-rating {
font-size: 0.85rem;
color: var( --apt-home-text-muted );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: var( --apt-home-surface-muted );
color: var( --apt-home-primary );
border: 1px solid var( --apt-home-border );
}
/* R1 §6 — hidden by default (desktop/tablet keep only the section-header
"View all professionals" link); shown as a real block-level link only
at <=600px, see the mobile tier below. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pros-mobile-viewall {
display: none;
align-items: center;
justify-content: center;
margin-top: 1.25rem;
padding: 0.75rem 1rem;
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
color: var( --apt-home-text );
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
background: var( --apt-home-surface );
}
/* R2 §5 — premium trust/discovery panel replacing the small centred
fallback notice: 2-column on desktop (copy+CTA left, 3 real platform
advantages right). Same warm-tinted section background as before. */
/* R4 §8 — ~42/58 split (was ~47/53), matching the contract's requested
proportion so the 3-point advantage column reads as the visually
heavier, more "populated" side. */
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel {
display: grid;
grid-template-columns: minmax( 0, 0.72fr ) minmax( 0, 1fr );
gap: 3rem;
align-items: center;
}
/* R4 §8/§12 — eyebrow label above the headline: a real hierarchy step
(uppercase, wide tracking, small) between the section H2 and body copy,
using the shared --apt-home-fs-eyebrow token so any future section that
adds one stays visually consistent with this one. */
body.apt-home-preview-1a-active .apt-home-preview-1a__eyebrow {
margin: 0 0 0.6rem;
font-size: var( --apt-home-fs-eyebrow );
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel-copy h2 {
font-size: var( --apt-home-fs-h2 );
font-weight: 700;
margin: 0 0 0.75rem;
line-height: 1.15;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel-copy p {
font-size: 1.02rem;
color: var( --apt-home-text-muted );
margin: 0 0 1.5rem;
max-width: 30rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel-points {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point {
display: flex;
align-items: flex-start;
gap: 1.1rem;
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius );
padding: 1.25rem 1.4rem;
/* R4 §13/§8 — card-tier layered shadow (was a flat 1px line), plus a
transition so hover reads as a real interactive-feeling row, not a
static settings-style list item. */
box-shadow: var( --apt-home-shadow-sm );
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point:hover {
box-shadow: var( --apt-home-shadow );
border-color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
/* R4 — the same real accent-tint token the CTA section already uses
(not a new colour), so the icon circle reads as a deliberate brand
accent rather than a neutral grey placeholder. */
background: var( --apt-home-accent-tint );
color: var( --apt-home-primary );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point-icon svg {
width: 22px;
height: 22px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point strong {
display: block;
font-size: var( --apt-home-fs-card-title );
font-weight: 700;
margin-bottom: 0.2rem;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point span span {
display: block;
font-size: 0.87rem;
color: var( --apt-home-text-muted );
}
/* -----------------------------------------------------------
How AskPerTask Works
----------------------------------------------------------- */
body.apt-home-preview-1a-active .apt-home-preview-1a__how {
padding: 2.75rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how h2 {
text-align: center;
font-size: var( --apt-home-fs-h2 );
font-weight: 700;
margin: 0 0 1.75rem;
}
/* R2 §6 — one wide panel (was 3 separate cards); the 3 stages now sit
inside it as plain columns separated by a vertical divider line
("wyraźna linia 1 → 2 → 3"), a calmer and more robust choice than
absolutely-positioned arrow glyphs between grid columns.
R4 §9/§13 — large-panel radius + card-tier layered shadow (was the
flat 1px line every other card also used, so this "large panel" never
read as more substantial than a small service card next to it). */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-panel {
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: var( --apt-home-radius-lg );
box-shadow: var( --apt-home-shadow-sm );
padding: 2.75rem 2.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat( 3, 1fr );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li {
/* R4 §9 — position:relative anchors the connector glyph below. */
position: relative;
padding: 0 2rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:first-child {
padding-left: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:last-child {
padding-right: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:not( :first-child ) {
border-left: 1px solid var( --apt-home-border );
}
/* R4 §9 — a small "→" glyph centred on each divider, at the same height
as the number circles, so the 1 → 2 → 3 flow reads as a directional
process rather than three columns that merely happen to have a line
between them. Pure CSS ::before content, no new markup. Sits on the
page surface colour so it visually breaks the divider line at that
point rather than overlapping it awkwardly. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:not( :first-child )::before {
content: "\2192";
position: absolute;
left: 0;
top: 1.75rem;
transform: translate( -50%, -50% );
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 700;
color: var( --apt-home-text-muted );
background: var( --apt-home-surface );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-num {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
/* R4 §9 — bigger numbers (was 3rem/1.2rem), matching the contract's
"większe numery/ikony" for the desktop panel. */
width: 3.5rem;
height: 3.5rem;
font-size: 1.35rem;
border-radius: 50%;
background: var( --apt-home-primary );
color: #FFFFFF;
font-weight: 700;
margin-bottom: 1.1rem;
box-shadow: var( --apt-home-shadow-xs );
}
/* R4 §9 — a small, subtle checkmark badge on the final step only: a
quiet "start → finish" cue (contract's "subtelna różnica między
początkiem, środkiem i końcem") without changing the number, the copy,
or adding a 4th visual state — same green already used everywhere. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:last-child .apt-home-preview-1a__how-num::after {
content: "\2713";
position: absolute;
bottom: -2px;
right: -2px;
width: 1.15rem;
height: 1.15rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: 700;
color: var( --apt-home-primary );
background: var( --apt-home-surface );
border: 1px solid var( --apt-home-border );
border-radius: 50%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps h3 {
margin: 0 0 0.4rem;
font-size: var( --apt-home-fs-card-title );
font-weight: 700;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps p {
margin: 0;
color: var( --apt-home-text-muted );
font-size: var( --apt-home-fs-muted );
}
/* -----------------------------------------------------------
For Professionals CTA
----------------------------------------------------------- */
/* R3 — was the R2 experimental dark natural-green layer; now a light
panel on the same tinted-green surface already used sitewide
(--apt-home-accent-tint / --aptv2-green-light), with the ordinary
solid-green primary button. Layout (2-column, copy+benefits left, CTA
right) is unchanged from R2.
R4 §10/§13 — top/bottom hairline borders give the tinted band a
defined edge (contract's "subtelny border/shadow sekcji") instead of
the tint just bleeding into the white sections above/below. The
background-image is a very low-opacity dot grid built from color-mix()
of the existing primary green — no new colour, same technique as the
service-icon tint circles. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta {
padding: 3.75rem 0;
background-color: var( --apt-home-accent-tint );
background-image: radial-gradient( circle, color-mix( in srgb, var( --apt-home-primary ) 16%, transparent ) 1px, transparent 1px );
background-size: 20px 20px;
border-top: 1px solid var( --apt-home-border );
border-bottom: 1px solid var( --apt-home-border );
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-inner {
display: grid;
grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
gap: 2.5rem;
align-items: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-copy h2 {
margin: 0 0 0.65rem;
font-size: var( --apt-home-fs-h2 );
font-weight: 700;
line-height: 1.15;
color: var( --apt-home-text );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-copy p {
margin: 0 0 1.35rem;
color: var( --apt-home-text-muted );
font-size: 1.02rem;
line-height: 1.55;
max-width: 30rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-benefits {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-benefits li {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.94rem;
font-weight: 500;
color: var( --apt-home-text );
}
/* R4 §10 — a filled checkmark badge (was a plain 6px dot) reads as a
real "included/available" signal for each benefit, consistent with the
checkmark language already used in the Trust Panel/hero-trust icons. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-benefits li::before {
content: "\2713";
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var( --apt-home-surface );
color: var( --apt-home-primary );
font-size: 0.7rem;
font-weight: 700;
box-shadow: var( --apt-home-shadow-xs );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-action {
display: flex;
justify-content: flex-end;
}
/* -----------------------------------------------------------
Footer
----------------------------------------------------------- */
/* R3 — was the R2 dark natural-green layer; the real Elementor site
footer (hidden above, see the "double footer" rule) lives in a
protected uploads-CSS file this batch cannot read, so rather than
guess an unverified dark palette this preview-only footer band now
uses the same light brand surface/text/border tokens as the rest of
the page — consistent with §3's "obecny kolor stopki" direction
without fabricating a colour. Real logo unchanged (still the live PNG
asset). */
body.apt-home-preview-1a-active .apt-home-preview-1a__footer {
background: var( --apt-home-surface-muted );
border-top: 1px solid var( --apt-home-border );
/* R4 §11/§13 — same xs ambient token the header uses, applied upward
via a negative-offset-free inset-style top shadow read; kept tiny
so the footer stays visually light, not heavier than the header. */
box-shadow: var( --apt-home-shadow-xs );
padding: 1.85rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.75rem;
flex-wrap: wrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var( --apt-home-text );
font-weight: 700;
font-size: 1.02rem;
letter-spacing: -0.01em;
}
/* R4 §11 — logo mark scale bump (was the bare 36x28 attributes with no
CSS size rule at all), matching the header's own R4 logo-scale pass so
both brand marks feel like the same weight of asset. */
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-logo img {
width: 40px;
height: 31px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.75rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-nav a {
font-size: 0.86rem;
font-weight: 500;
color: var( --apt-home-text-muted );
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-nav a:hover {
color: var( --apt-home-primary );
border-bottom-color: var( --apt-home-primary );
}
/* -----------------------------------------------------------
Accessibility — reduced motion
----------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card,
body.apt-home-preview-1a-active .apt-home-preview-1a__service-card::after,
body.apt-home-preview-1a-active .apt-home-preview-1a__service-photo-img,
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-card,
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point,
body.apt-home-preview-1a-active .apt-home-preview-1a__how-num,
body.apt-home-preview-1a-active .apt-home-preview-1a__btn,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-dashboard,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-cta,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-btn,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-expand-chevron {
transition: none;
}
}
/* -----------------------------------------------------------
Responsive — matches required QA viewports (1440 / 1024 / 768 / 390)
----------------------------------------------------------- */
@media ( max-width: 1024px ) {
/* R6.2B §32 — moderately reduced ambience intensity, same 4-layer
composition scaled down (not removed). */
body.apt-home-preview-1a-active::before {
background:
radial-gradient( ellipse 560px 380px at 6% 14%, rgba( 31, 163, 74, 0.08 ), rgba( 31, 163, 74, 0.028 ) 40%, transparent 72% ),
radial-gradient( ellipse 700px 420px at 50% 32%, rgba( 255, 255, 255, 0.85 ), rgba( 255, 255, 255, 0.5 ) 48%, transparent 78% ),
radial-gradient( ellipse 500px 340px at 97% 40%, rgba( 90, 130, 170, 0.035 ), transparent 70% ),
radial-gradient( ellipse 640px 240px at 56% 74%, rgba( 31, 163, 74, 0.035 ), transparent 74% );
}
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — <=1024px: header
drops to a 2x2 grid (Identity+Calendar / Progress+Reputation),
dividers hidden (they only make sense in a single row); Quick
Access stays a clean 2x2 (now exactly 4 real tiles, no wrap
artifact to correct for); Spotlight/Quick Access keep their 65/35
split — still ample width at this tier. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-card {
padding: 1.1rem 1.15rem 1.25rem;
}
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — flex-wrap equivalent of the old
2x2 grid (the header row is flex now, not grid — see base rule). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-top {
flex-wrap: wrap;
row-gap: 0.9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-identity,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-progress,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation {
flex: 1 1 calc( 50% - 0.55rem );
min-width: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-divider {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-tile a {
padding: 0.7rem 0.7rem 0.65rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-inner {
grid-template-columns: 1fr;
}
/* MAP-TOPBOTTOM-BARS-1C §11 — tablet: the top bar and bottom activity
bar were already full-width, wrapping flex rows at every breakpoint
(no more row/column layout switch to make here) — the map frame just
gets a shorter aspect ratio so the card doesn't grow too tall once
the hero goes single-column. Contract §11 also requires headline/
copy first, map second; the hero markup already outputs hero-content
before hero-map in source order, so no `order` override is needed. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-frame {
aspect-ratio: 16 / 9;
max-height: 22rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar,
body.apt-home-preview-1a-active .apt-home-preview-1a__activitybar {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__services-grid,
body.apt-home-preview-1a-active .apt-home-preview-1a__pros-grid {
grid-template-columns: repeat( 3, 1fr );
}
/* R5 — richer, image-led cards read better at 2-up than 3-up on
tablet; 4 real cards become a clean 2x2. */
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-rail {
grid-template-columns: repeat( 2, 1fr );
}
/* A real (not padded) odd count — e.g. 3 New Services after admin
accounts are correctly excluded — would otherwise leave the last
card alone beside a dead empty column; centre it at normal card
width instead of stretching it to fill both columns. */
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-rail > :last-child:nth-child( odd ) {
grid-column: 1 / -1;
max-width: calc( 50% - 0.625rem );
margin: 0 auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps {
grid-template-columns: 1fr;
gap: 1.25rem;
}
/* Vertical dividers only make sense in a row; stacked to 1 column they
become horizontal top-dividers instead. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li {
padding: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:not( :first-child ) {
border-left: none;
border-top: 1px solid var( --apt-home-border );
padding-top: 1.25rem;
}
/* R4 §9 — the desktop "→" divider glyph only reads correctly between
side-by-side columns; single-column tablet/mobile layouts use the
top-border (here) or the continuous vertical line (<=600px) instead. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:not( :first-child )::before {
content: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel {
grid-template-columns: 1fr;
gap: 2rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-inner {
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-copy p {
margin-left: auto;
margin-right: auto;
}
/* R4 — benefits list is now a vertical column (was a wrapping row), so
centering it under the stacked/centred copy means centering the
column horizontally, not justifying along its own main axis. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-benefits {
align-items: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-action {
justify-content: center;
}
}
@media ( max-width: 768px ) {
body.apt-home-preview-1a-active .aptv2-header__nav {
display: none;
}
/* R6.2 §20 — "background simplified": Shape B (cool/right) and the
secondary micro-texture drop out entirely; Shape A (green) stays,
trimmed, as the one clear atmospheric signal at this width. */
body.apt-home-preview-1a-active::before {
background: radial-gradient( ellipse 420px 420px at 2% -8%, rgba( 31, 163, 74, 0.09 ) 0%, rgba( 31, 163, 74, 0.04 ) 45%, transparent 74% );
}
body.apt-home-preview-1a-active::after {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero::before {
background:
radial-gradient( ellipse 380px 320px at 0% 45%, rgba( 31, 163, 74, 0.05 ), transparent 68% );
}
/* WELCOME-HUB-HEADER-CALENDAR-PROGRESS-REPUTATION-1A — <=768px: header
stacks to one column (Identity, Calendar, Progress, Reputation in
that real DOM order — the owner's requested mobile sequence, no
extra reorder logic needed); Main stacks Spotlight above Quick
Access (still 2x2, still compact). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-top {
flex-direction: column;
row-gap: 0.85rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-identity,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-calendar,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-progress,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-reputation {
flex: 1 1 auto;
min-width: 0;
}
/* WELCOME-BOX-FIGMA-V12-DELTA-1A — single column: reset the desktop
row 1 pairing (card + quick-access side by side, stretched equal)
back to simple DOM-order auto-flow stacking (card, Pro Tip, Quick
Access), same order as before this delta. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-module--spotlight,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-insight,
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-quick-access-col {
grid-column: 1;
grid-row: auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-main {
grid-template-columns: 1fr;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero {
padding: 2rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-frame {
max-height: 16rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__services-grid {
grid-template-columns: repeat( 2, 1fr );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pros-grid {
grid-template-columns: repeat( 2, 1fr );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-inner {
flex-direction: column;
align-items: flex-start;
}
}
/* R1 §2/§6/§7/§10 — the phone-sized tier. 600px (not 480/390) because
every R1 target here (map height, services cap 6, pros cap 2,
how-it-works single panel, tighter section spacing) is meant for any
phone-class screen up to a small tablet, not only exactly 390px. */
@media ( max-width: 600px ) {
/* R6.2 §20 — mobile keeps exactly: 1 soft ambient glow (bumped to
match the new bolder desktop baseline), 1 small contour fragment
(~120px), and a faint micro-dot texture — every other cluster/node/
transition layer is switched off so nothing competes with the cards. */
body.apt-home-preview-1a-active::before {
background: radial-gradient( ellipse 460px 400px at 0% -6%, rgba( 31, 163, 74, 0.09 ) 0%, rgba( 31, 163, 74, 0.04 ) 45%, transparent 70% );
}
/* display:block overrides the 768px breakpoint's own display:none for
this layer — at <=600px the owner explicitly wants the faint
micro-dot texture back (just this one small masked pocket). */
body.apt-home-preview-1a-active::after {
display: block;
background-size: 24px 24px;
background-position: right -20px top -10px;
-webkit-mask-image: radial-gradient( circle 130px at 100% 0%, #000 0%, transparent 100% );
mask-image: radial-gradient( circle 130px at 100% 0%, #000 0%, transparent 100% );
opacity: 0.02;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub::before {
inset: -20px 0 -30px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20180%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%2831%2C163%2C74%2C0.035%29%27%20stroke-width%3D%271.0%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M18%2C96%20C26%2C54%2066%2C16%20118%2C19%20C154%2C21%20182%2C52%20178%2C92%27%2F%3E%3Cpath%20d%3D%27M42%2C98%20C48%2C66%2082%2C42%20122%2C46%20C152%2C49%20168%2C70%20162%2C96%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left -40px top 10px / 120px 108px no-repeat;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub::after,
body.apt-home-preview-1a-active .apt-home-preview-1a__hero::before,
body.apt-home-preview-1a-active .apt-home-preview-1a__requests::before {
display: none;
}
/* Fixed a real regression found in visual QA: R2's desktop headline
scale-up raised the clamp()'s own minimum bound too (2.1rem -> 2.5rem),
which also affects mobile since clamp() has no viewport ceiling of
its own — "Right where you are." wrapped to a 4th line at 390px
that R1 never had. Restored the R1-proven mobile size explicitly. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-content h1 {
font-size: 2.1rem;
}
/* Map: full width, fixed 240px — squarely inside the 220-260px target,
independent of container width so it can't drift out of range. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-map-frame {
aspect-ratio: unset;
height: 240px;
max-height: none;
}
/* MAP-TOPBOTTOM-BARS-1C §12 — mobile: a clean, full-width, vertically
stacked bottom bar (no horizontal squeezing, no side-by-side row like
the tablet strip) — real counts each on their own line, then location
controls, in that order. Top bar stays as-is (already a compact
2-line block). */
body.apt-home-preview-1a-active .apt-home-preview-1a__topbar {
padding: 0.7rem 0.9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__activitybar {
flex-direction: column;
align-items: stretch;
padding: 0.85rem 0.9rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
margin: 0 0 0.6rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-stats li {
padding-left: 0;
border-left: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__sidebar-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
/* Professionals: cap at 2 cards + reveal the mobile "view all" link. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-card--overflow {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__pros-mobile-viewall {
display: flex;
}
/* R5 §9 — Latest Requests / New Services: same cap-at-2 + "view all"
pattern, one column so each card's image reads at full width. */
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-rail {
grid-template-columns: 1fr;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__req-card--overflow,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-card--overflow {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__cards-mobile-viewall {
display: flex;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__requests,
body.apt-home-preview-1a-active .apt-home-preview-1a__svc-discovery {
padding: 2rem 0;
}
/* R6 §24 — Account Hub never eats the first viewport on phone: identity
stays compact, Level 1 stacks (identity, then status), 4 tiles become
a 2-column grid with Offers as its own full-width row, Recent
Bookings is dropped (Bookings tile + What's Happening already cover
it per the owner's own explicit mobile-simplification allowance). */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub {
padding: 0.85rem 0 1rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-card {
padding: 1rem 1rem 1.1rem;
border-radius: var( --apt-home-radius-sm );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-modules {
grid-template-columns: 1fr;
}
/* COMPACTNESS-PASS-1A: base desktop height (128px) already sits inside
the 120-150px mobile target — this override removed rather than left
inconsistent. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-content {
padding: 12px 14px 13px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-title {
font-size: 1rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-body {
-webkit-line-clamp: 2;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hub-spotlight-cta {
min-height: 34px;
padding: 0.45rem 0.9rem;
font-size: 0.82rem;
}
/* How it works: one shared panel instead of 3 separate cards; a plain
divider between rows is the "logical connection" the brief allows
as an alternative to a drawn vertical line. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how {
padding: 1.75rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how h2 {
font-size: 1.35rem;
margin-bottom: 1.25rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-panel {
padding: 0.25rem 1.1rem;
}
/* R4 §9 — was per-item top borders (visually reads as separate rows
stacked, not "jedna ciągła linia"); the ol itself now draws one
continuous vertical line behind the number circles, a step-by-step
product timeline rather than a bordered list. No new wrapper — the
existing is already the correct positioning context. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps {
display: block;
position: relative;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps::before {
content: "";
position: absolute;
top: 0.875rem;
bottom: 0.875rem;
left: 0.875rem;
width: 2px;
background: var( --apt-home-border );
}
/* Fixed a real bug found in visual QA: the previous absolute-positioned
circle + padding-left combination overlapped the first step's own
heading text (only the first item — its number/text vertical timing
differed just enough from items 2-3 to clip "Post" behind the "1"
circle). A plain flex row (circle + text column, both real, no
magic-number offsets) is robust regardless of heading length. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.85rem;
border: none;
border-radius: 0;
padding: 0.85rem 0;
}
/* The desktop "→" divider glyph only makes sense between side-by-side
columns; the continuous vertical line above replaces it here. */
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li::before {
content: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-num {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
font-size: 0.85rem;
margin-bottom: 0;
/* Sits opaque on top of the continuous line so the line reads as
passing "through" each numbered stop, the standard timeline cue. */
z-index: 1;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps li:last-child .apt-home-preview-1a__how-num::after {
width: 0.85rem;
height: 0.85rem;
font-size: 0.5rem;
bottom: -1px;
right: -1px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps h3 {
font-size: 0.95rem;
margin: 0 0 0.15rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__how-steps p {
font-size: 0.85rem;
}
/* Trust panel: compact rows, centred copy, full-width CTA. */
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel-copy {
text-align: center;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-panel-copy p {
margin-left: auto;
margin-right: auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point {
padding: 0.85rem 1rem;
gap: 0.75rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point-icon {
width: 2rem;
height: 2rem;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__trust-point-icon svg {
width: 18px;
height: 18px;
}
/* Pro CTA: tighter mobile padding, centred, compact benefit list. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta {
padding: 2rem 0;
}
/* R4 — benefits list is now a vertical column (was a wrapping row), so
centering it under the stacked/centred copy means centering the
column horizontally, not justifying along its own main axis. */
body.apt-home-preview-1a-active .apt-home-preview-1a__pro-cta-benefits {
align-items: center;
}
/* Section spacing: shorten the page below the hero without touching
hero breathing room (explicit contract priority). */
body.apt-home-preview-1a-active .apt-home-preview-1a__services,
body.apt-home-preview-1a-active .apt-home-preview-1a__pros {
padding: 2rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__section-header {
margin-bottom: 1rem;
}
/* Footer: simple 2-column link grid, adequate tap targets, no dead
space. */
body.apt-home-preview-1a-active .apt-home-preview-1a__footer {
padding: 1.5rem 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem 1rem;
width: 100%;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__footer-nav a {
display: inline-block;
padding: 0.3rem 0;
font-size: 0.88rem;
}
}
@media ( max-width: 480px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas {
flex-direction: column;
align-items: stretch;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__btn {
width: 100%;
min-height: var( --aptv2-tap-min, 44px );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__services-grid {
grid-template-columns: repeat( 2, 1fr );
gap: 0.75rem;
}
}
/* ==========================================================================
HOMEPAGE-REFINEMENT-1A — hero universal search
(inc/apt-universal-search.php, assets/js/apt-universal-search.js)
One prominent search card between the hero lead and the CTA row: scope
chips (real radio inputs, work without JS) above a single bar of
[keyword | place | Search]. Tokens and radii are the homepage's own; every
selector is scoped like the rest of this file. Inputs explicitly override
the parent theme's generic input[type="search"] / text-input chrome.
========================================================================== */
body.apt-home-preview-1a-active .apt-home-preview-1a__sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}
/* ==========================================================================
HOMEPAGE UNIVERSAL SEARCH — Figma 23:2 (desktop) / 23:72 (mobile)
One white module: a dark-navy scope strip (white active tab + red
underline), a white search panel (keyword / Town or postcode / green
Search) and a quiet "Popular right now" row. All rules are scoped
`apt-home-preview-1a__search*`.
The Figma desktop frame is 900px wide; the real hero text column is at most
~572px, so the module keeps the design language and proportions but stacks
the fields (keyword on its own row, town + Search beneath) instead of one
row that would clip "What do you need help with?". The module measures
itself (container query) so the same rules serve every column width:
> 540px full tabs
471-540px compact tabs (narrow two-column band)
<= 470px Figma mobile: wrapped filled chips, stacked full-width fields
========================================================================== */
body.apt-home-preview-1a-active .apt-home-preview-1a__search {
--apt-srch-navy: #062F54;
--apt-srch-navy-chip: #0A3A64;
--apt-srch-navy-line: #2F5678;
--apt-srch-ink: #092443;
--apt-srch-red: #F2212E;
--apt-srch-green: #0AA64A;
--apt-srch-green-hover: #098A3E;
--apt-srch-panel-line: #DDE5ED;
--apt-srch-field-line: #D9E1E9;
--apt-srch-field-text: #405979;
--apt-srch-help: #66758A;
--apt-srch-label: #526985;
--apt-srch-pop-line: #D7E0EA;
--apt-srch-pop-text: #163353;
container-type: inline-size;
container-name: aptsearch;
position: relative;
/* Hangs 12px past the text column, exactly like the previous frame, so the
module is the same width it always was and the hero does not move. */
margin: 0 calc( -0.75rem - 1px ) 1.25rem;
padding: 0 0 1rem;
background: #FFF;
border-radius: 18px;
box-shadow: 0 10px 14px rgba( 5, 15, 31, 0.14 );
color: var( --apt-srch-ink );
}
/* ---- scope strip ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-scopes {
display: block;
margin: 0;
padding: 10px 14px;
min-width: 0;
border: 0;
border-radius: 18px 18px 0 0;
background: var( --apt-srch-navy );
}
/* SEARCH-CATEGORY-SEGMENTS-1A: the segments themselves (icon + label,
category colours from the map Browse rail) are the shared component in
apt-search-segments.css; this strip is only their navy container. */
/* ---- search panel (overlaps the strip by 6px, like the frame) ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-panel {
position: relative;
margin: -6px 14px 0;
padding: 13px;
background: #FFF;
border: 1px solid var( --apt-srch-panel-line );
border-radius: 16px;
}
/* Module heading: names the panel as the search, sized to the card (not a
page heading). Explicit metrics so global theme h2/p rules cannot leak in. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-intro {
margin: 2px 2px 12px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-title {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-lede {
margin: 3px 0 0;
padding: 0;
font-size: 13.5px;
font-weight: 400;
line-height: 1.4;
color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-bar {
display: grid;
grid-template-columns: minmax( 0, 1fr ) auto;
grid-template-areas:
"q q"
"where submit";
gap: 8px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--q {
grid-area: q;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--where {
grid-area: where;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit {
grid-area: submit;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 56px;
padding: 0 17px;
background: #FFF;
/* ASKPERTASK-MAIN-HOMEPAGE-SEARCH-FRAME-1A: a clearly visible frame so the
boxes read as fields to type into (was --apt-srch-field-line, ~1.3:1 on
white). Same 1px width — no layout change — plus a faint lift. */
border: 1px solid var( --apt-srch-help );
border-radius: 12px;
box-shadow: 0 1px 2px rgba( 9, 36, 67, 0.08 );
color: #0A2342;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field:hover {
border-color: var( --apt-srch-label );
}
/* The keyword box is the primary input: one step firmer than the other
fields at rest and on hover. Still 1px, so the bar's spacing does not move;
:focus-within below still wins with the green ring. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--q {
border-color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--q:hover {
border-color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field:focus-within {
border-color: var( --apt-srch-green );
box-shadow: 0 0 0 3px rgba( 10, 166, 74, 0.18 );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field svg {
flex: 0 0 auto;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-fieldtext {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 8px 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: 0;
-webkit-appearance: none;
appearance: none;
font: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-overflow: ellipsis;
color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field input::placeholder {
color: var( --apt-srch-field-text );
opacity: 1;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field input::-webkit-search-cancel-button,
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field input::-webkit-search-decoration {
-webkit-appearance: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-help {
font-size: 12px;
font-weight: 400;
line-height: 1.2;
color: var( --apt-srch-help );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-sizing: border-box;
min-width: 168px;
min-height: 56px;
margin: 0;
padding: 0 28px;
border: 0;
border-radius: 12px;
background: var( --apt-srch-green );
box-shadow: 0 4px 5px rgba( 0, 89, 38, 0.2 );
color: #FFF;
font: inherit;
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-transform: none;
text-shadow: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit:hover {
background: var( --apt-srch-green-hover );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit:focus-visible {
outline: 3px solid var( --apt-srch-ink );
outline-offset: 2px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit:disabled {
opacity: 0.65;
cursor: progress;
}
/* ---- hint / error line ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-msg {
margin: 0.65rem 0.15rem 0;
font-size: 0.86rem;
line-height: 1.45;
color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-msg[hidden] {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-msg[data-kind="error"] {
color: #B42318;
}
/* ---- LIVE-REVIEW-HOMEPAGE-LOCATION-1A: Town box place picker (apt-place-search.js, townOnly) ----
The entry row keeps the field's existing flex layout; the chosen town replaces it in place; suggestions
drop below the field. Same tokens as the rest of the search module. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--where {
position: relative;
container: aptwhere / inline-size;
}
/* A narrow Town box keeps its room for typing: "Use my location" becomes a round icon button (its words stay
for screen readers); the words show again once the box is wide enough. */
body.apt-home-preview-1a-active .apt-usearch-place__geo {
justify-content: center;
min-width: 32px;
padding: 0;
width: 32px;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0 0 0 0 );
white-space: nowrap;
}
@container aptwhere ( min-width: 300px ) {
body.apt-home-preview-1a-active .apt-usearch-place__geo {
width: auto;
padding: 0 10px;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo span {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
}
}
body.apt-home-preview-1a-active .apt-usearch-place__entry,
body.apt-home-preview-1a-active .apt-usearch-place__chosen {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 8px;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-usearch-place__entry[hidden],
body.apt-home-preview-1a-active .apt-usearch-place__chosen[hidden],
body.apt-home-preview-1a-active .apt-usearch-place__geo[hidden],
body.apt-home-preview-1a-active .apt-usearch-place__use[hidden],
body.apt-home-preview-1a-active .apt-usearch-place__list[hidden] {
display: none;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo,
body.apt-home-preview-1a-active .apt-usearch-place__use,
body.apt-home-preview-1a-active .apt-usearch-place__change {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
min-height: 32px;
margin: 0;
padding: 0 10px;
border: 1px solid var( --apt-srch-help );
border-radius: 16px;
background: #FFF;
color: var( --apt-srch-ink );
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
cursor: pointer;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo:hover,
body.apt-home-preview-1a-active .apt-usearch-place__change:hover {
border-color: var( --apt-srch-label );
background: #FFF;
color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-usearch-place__use {
border-color: var( --apt-srch-green );
background: var( --apt-srch-green );
color: #FFF;
}
body.apt-home-preview-1a-active .apt-usearch-place__use:hover {
background: var( --apt-srch-green-hover );
color: #FFF;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo:focus-visible,
body.apt-home-preview-1a-active .apt-usearch-place__use:focus-visible,
body.apt-home-preview-1a-active .apt-usearch-place__change:focus-visible {
outline: 3px solid var( --apt-srch-green );
outline-offset: 2px;
}
body.apt-home-preview-1a-active .apt-usearch-place__geo:disabled {
opacity: 0.6;
cursor: progress;
}
body.apt-home-preview-1a-active .apt-usearch-place__chosen-text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.apt-home-preview-1a-active .apt-usearch-place__chosen-label {
overflow: hidden;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-usearch-place__chosen-from {
font-size: 12px;
line-height: 1.2;
color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-usearch-place__chosen-from:empty {
display: none;
}
/* Once a town is in use, the "from" line has done its job (it only explains a town that is waiting for "Use this town"). */
body.apt-home-preview-1a-active .apt-usearch-place__chosen:not( :has( .apt-usearch-place__use:not( [hidden] ) ) ) .apt-usearch-place__chosen-from {
display: none;
}
/* Waiting for "Use this town" (after Use my location): the town gets its own line, the two buttons sit under it. */
body.apt-home-preview-1a-active .apt-usearch-place__chosen:has( .apt-usearch-place__use:not( [hidden] ) ) {
flex-wrap: wrap;
row-gap: 6px;
padding: 8px 0;
}
body.apt-home-preview-1a-active .apt-usearch-place__chosen:has( .apt-usearch-place__use:not( [hidden] ) ) .apt-usearch-place__chosen-text {
flex-basis: 100%;
}
body.apt-home-preview-1a-active .apt-usearch-place__list {
position: absolute;
top: calc( 100% + 6px );
right: 0;
left: 0;
z-index: 30;
margin: 0;
padding: 6px;
list-style: none;
border: 1px solid var( --apt-srch-help );
border-radius: 12px;
background: #FFF;
box-shadow: 0 10px 24px rgba( 9, 36, 67, 0.16 );
}
body.apt-home-preview-1a-active .apt-usearch-place__list .apt-place__option {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
padding: 10px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1.3;
color: var( --apt-srch-ink );
cursor: pointer;
}
body.apt-home-preview-1a-active .apt-usearch-place__list .apt-place__option span {
color: var( --apt-srch-label );
font-size: 13px;
}
body.apt-home-preview-1a-active .apt-usearch-place__list .apt-place__option:hover,
body.apt-home-preview-1a-active .apt-usearch-place__list .apt-place__option[aria-selected="true"] {
background: rgba( 10, 166, 74, 0.1 );
}
body.apt-home-preview-1a-active .apt-usearch-place__status {
margin: 0.5rem 0.15rem 0;
font-size: 0.86rem;
line-height: 1.45;
color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-usearch-place__status:empty {
display: none;
}
/* ---- Popular right now ---- */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
padding: 14px 18px 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-label {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: var( --apt-srch-label );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
/* The parent theme's `ul li:not(:last-child)` margin outranks a one-class
rule, so the item margin is reset through this longer selector. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li {
margin: 0;
padding: 0;
list-style: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-pop {
display: inline-flex;
align-items: center;
box-sizing: border-box;
min-height: 36px;
padding: 0 14px;
background: #FFF;
border: 1px solid var( --apt-srch-pop-line );
border-radius: 18px;
color: var( --apt-srch-pop-text );
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-pop:hover {
border-color: var( --apt-srch-green );
background: #F1F9F4;
color: var( --apt-srch-ink );
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-pop:focus-visible {
outline: 3px solid var( --apt-srch-green );
outline-offset: 2px;
}
/* ---- desktop (module >= 650px): Figma 23:2 proportions, keyword + Town or
postcode + Search on ONE row. Below this width the bar stays stacked. ---- */
@container aptsearch ( min-width: 650px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__search-bar {
/* LIVE-REVIEW-HOMEPAGE-LOCATION-1A: was 1.37fr / 1fr — the Town box now also holds the location button. */
grid-template-columns: minmax( 0, 1.2fr ) minmax( 0, 1fr ) auto;
grid-template-areas: "q where submit";
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field {
gap: 10px;
padding: 0 14px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit {
min-width: 0;
padding: 0 22px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field--where {
gap: 8px;
padding-right: 8px;
}
/* One-row bar: "Change" as a compact text link so the town name keeps the room. */
body.apt-home-preview-1a-active .apt-usearch-place__change {
padding: 0 4px;
border-color: transparent;
text-decoration: underline;
text-underline-offset: 2px;
}
}
/* ---- narrow two-column band (module <= 540px): compact strip, and the
"Popular right now" label moves above its chips so they stay on one row ---- */
@container aptsearch ( max-width: 540px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__search-scopes {
padding-left: 10px;
padding-right: 10px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-label {
flex-basis: 100%;
}
}
/* ---- Figma mobile 23:72 (module <= 470px): segment grid strip, stacked
full-width fields, popular shortcuts as in the mobile frame ---- */
@container aptsearch ( max-width: 470px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__search {
padding-bottom: 20px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-scopes {
padding: 12px 14px;
border-radius: 18px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-panel {
margin: 0;
padding: 16px 16px 0;
border: 0;
border-radius: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-intro {
margin: 0 0 12px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-title {
font-size: 17px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-lede {
font-size: 13px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-bar {
grid-template-columns: minmax( 0, 1fr );
grid-template-areas:
"q"
"where"
"submit";
gap: 10px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field {
min-height: 58px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-fieldtext {
padding: 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field input {
font-size: 14px;
}
/* The mobile frame has no helper line under the keyword. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-help {
display: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit {
width: 100%;
min-height: 58px;
font-size: 17px;
box-shadow: none;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular {
gap: 12px;
padding: 24px 16px 0;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-pop {
min-height: 34px;
padding: 0 13px;
border-radius: 17px;
font-size: 12px;
}
/* Mobile frame order and set: Plumber, Bricks, Paint, Cleaner (no
Electrician). Items are Plumber, Cleaner, Electrician, Bricks, Paint. */
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li:nth-child( 1 ) {
order: 1;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li:nth-child( 4 ) {
order: 2;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li:nth-child( 5 ) {
order: 3;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li:nth-child( 2 ) {
order: 4;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__search-popular-list > li:nth-child( 3 ) {
display: none;
}
}
/* ---- phones: no hang past the text column ---- */
@media ( max-width: 600px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__search {
margin: 0 0 1.25rem;
}
}
@media ( prefers-reduced-motion: reduce ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__search-field,
body.apt-home-preview-1a-active .apt-home-preview-1a__search-submit,
body.apt-home-preview-1a-active .apt-home-preview-1a__search-pop {
transition: none;
}
}
/* ==========================================================================
HOMEPAGE SEARCH — wider desktop hero column (Figma 23:2 proportions)
The hero text column was capped at 546px, too narrow for keyword + Town or
postcode + Search on one row. From 1280px the hero takes the page's
standard container (the same 1260px every section below uses) and the map
column keeps its exact 506px, so only the text side grows. Everything
under 1280px is untouched.
========================================================================== */
@media ( min-width: 1280px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-inner {
width: min( calc( 100% - 48px ), 1260px );
grid-template-columns: minmax( 0, 1fr ) 506px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-content {
max-width: none;
}
/* Headline, lead and trust strip keep the width they always had. */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-trust {
max-width: 546px;
}
}
/* ==========================================================================
HERO CTA GROUP — Post a Request / Find a Professional / Explore Local Map
One component family: same height, radius, type and icon size. Post a
Request is the filled primary; the other two are the same white bordered
secondary. The group measures itself: one row when the three fit, otherwise
a clean full-width stack (never two buttons plus a stray third).
========================================================================== */
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas {
container-type: inline-size;
container-name: aptctas;
display: block;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas-row {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 12px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn {
flex: 0 0 auto;
box-sizing: border-box;
min-height: 48px;
padding: 0 18px;
gap: 8px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn--secondary {
background: #FFF;
border-color: #D5DEE8;
color: #092443;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn--secondary:hover {
background: #F6FBF8;
border-color: var( --apt-home-primary );
color: #092443;
}
/* Fits, but tight: compact padding and type. */
@container aptctas ( max-width: 599px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas-row {
gap: 8px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn {
padding: 0 12px;
gap: 7px;
font-size: 14px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn svg {
width: 16px;
height: 16px;
}
}
/* Does not fit on one row: stack, full width, same height. */
@container aptctas ( max-width: 519px ) {
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas-row {
flex-direction: column;
gap: 10px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn {
width: 100%;
padding: 0 18px;
font-size: 15px;
}
body.apt-home-preview-1a-active .apt-home-preview-1a__hero-ctas .apt-home-preview-1a__btn svg {
width: 18px;
height: 18px;
}
}