/* ─────────────────────────────────────────────────────────── beachzoom · theme bridge Maps the consumer site's existing CSS variables and selectors to the theme palette / typography / panel / icon vars injected by theme-applier.js. Load this AFTER style.css in . Every typography rule here uses `body` as an ancestor selector to guarantee higher specificity than style.css's plain class selectors — that way `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `font-style`, `text-transform`, `opacity`, and `color` set by the theme always win, regardless of CSS load order. Each typography selector also includes any in-element overrides (e.g., `.home-title strong`) reset to `inherit`, so a single theme weight/colour applies to the whole element rather than being cherry-picked by a hand-written CSS rule. ─────────────────────────────────────────────────────────── */ :root { /* Primary brand */ --gold: var(--bzYellow, #E8C766) !important; /* Teal family */ --teal-deep: var(--bzTeal, #1A7E78) !important; --teal-bright: var(--bzAlgae, #3FC8BD) !important; --teal-light: var(--bzAlgae, #93D6CD) !important; /* Neutrals */ --cream: var(--bzSand, #FAF2E1) !important; --sand: var(--bzSand, #F5E8C8) !important; --ink: var(--bzMidnight, #1A1815) !important; /* Pin / category palette */ --rest: var(--bzCoral, #F76659) !important; --play: var(--bzTeal, #1A8073) !important; --stay: var(--bzOcean, #1F4070) !important; } /* ═══════════════════════════════════════════════════════════ TYPOGRAPHY Every rule below uses `body` as ancestor to lift specificity above style.css's class-only rules, and sets every property from DEFAULT_TYPE_STYLE so the theme drives the full look. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ HIDE redundant slogan on the map screen The brand splash overlay (.bz-splash-tagline) already shows the tagline on first paint. The duplicate inside #screen-home was visually redundant; deleting it leaves the splash as the single point of truth. ═══════════════════════════════════════════════════════════ */ body #screen-home .home-tagline, body #screen-home .home-content { display: none !important; } /* ═══════════════════════════════════════════════════════════ SPLASH OVERLAY THEMING The BZSplash overlay (splash.js) creates its own DOM with .bz-splash-logo / .bz-splash-logo .io / .bz-splash-tagline. These don't pass through .home-title / .home-logo bridges, so we explicitly bind them to the same theme styles below. The splash's fade-in animation animates opacity from 0 → 1; our !important rule wins post-animation so the theme value lands. ═══════════════════════════════════════════════════════════ */ body .bz-splash-logo { font-family: var(--bzLogo-family) !important; font-size: var(--bzLogo-size) !important; line-height: var(--bzLogo-line-height) !important; font-weight: var(--bzLogo-weight) !important; letter-spacing: var(--bzLogo-letter-spacing) !important; font-style: var(--bzLogo-style) !important; text-transform: var(--bzLogo-transform) !important; color: var(--bzLogo-color, var(--gold)) !important; } body .bz-splash-logo .io { font-family: var(--bzLogoSuffix-family) !important; font-size: var(--bzLogoSuffix-size) !important; line-height: var(--bzLogoSuffix-line-height) !important; font-weight: var(--bzLogoSuffix-weight) !important; letter-spacing: var(--bzLogoSuffix-letter-spacing) !important; font-style: var(--bzLogoSuffix-style) !important; text-transform: var(--bzLogoSuffix-transform) !important; opacity: var(--bzLogoSuffix-opacity, 1) !important; color: var(--bzLogoSuffix-color, #FFFFFF) !important; } body .bz-splash-tagline, body .bz-splash-tagline .word { font-family: var(--bzDisplay-family) !important; font-size: var(--bzDisplay-size) !important; line-height: var(--bzDisplay-line-height) !important; font-weight: var(--bzDisplay-weight) !important; letter-spacing: var(--bzDisplay-letter-spacing) !important; font-style: var(--bzDisplay-style) !important; text-transform: var(--bzDisplay-transform) !important; color: var(--bzDisplay-color, var(--cream)) !important; } /* Opacity scoped to .bz-splash-tagline (NOT each .word) so the per-word fade-in animation still plays. After animation ends, this !important opacity on the container wins, and the final visible opacity is `tagline-opacity × word-opacity` (which ends at 1 from the keyframe). */ body .bz-splash-tagline { opacity: var(--bzDisplay-opacity, 1) !important; } /* bzLogo — "beachzoom" wordmark on landing + beach pages */ body .logo, body .home-logo { font-family: var(--bzLogo-family) !important; font-size: var(--bzLogo-size) !important; line-height: var(--bzLogo-line-height) !important; font-weight: var(--bzLogo-weight) !important; letter-spacing: var(--bzLogo-letter-spacing) !important; font-style: var(--bzLogo-style) !important; text-transform: var(--bzLogo-transform) !important; opacity: var(--bzLogo-opacity, 1) !important; color: var(--bzLogo-color, var(--gold)) !important; } /* bzLogoSuffix — the ".io" tail */ body .logo .io, body .home-logo .io { font-family: var(--bzLogoSuffix-family) !important; font-size: var(--bzLogoSuffix-size) !important; line-height: var(--bzLogoSuffix-line-height) !important; font-weight: var(--bzLogoSuffix-weight) !important; letter-spacing: var(--bzLogoSuffix-letter-spacing) !important; font-style: var(--bzLogoSuffix-style) !important; text-transform: var(--bzLogoSuffix-transform) !important; opacity: var(--bzLogoSuffix-opacity, 1) !important; color: var(--bzLogoSuffix-color, #FFFFFF) !important; } /* bzDisplay — the big landing tagline. .home-title contains for the emphasised phrase; style.css hardcodes `font-weight: 600` on that strong, which would escape the theme weight. We reset it to `inherit` so the whole slogan picks up the theme's weight uniformly. Same for any nested colour. */ body .home-title { font-family: var(--bzDisplay-family) !important; font-size: var(--bzDisplay-size) !important; line-height: var(--bzDisplay-line-height) !important; font-weight: var(--bzDisplay-weight) !important; letter-spacing: var(--bzDisplay-letter-spacing) !important; font-style: var(--bzDisplay-style) !important; text-transform: var(--bzDisplay-transform) !important; opacity: var(--bzDisplay-opacity, 1) !important; color: var(--bzDisplay-color, var(--cream)) !important; } body .home-title strong { font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; opacity: inherit; letter-spacing: inherit; } /* bzDisplayName — user display name in the avatar menu (ADC). Its own style so recolouring it doesn't drag bzCopy along. */ .bz-adc__name { font-family: var(--bzDisplayName-family) !important; font-size: var(--bzDisplayName-size) !important; line-height: var(--bzDisplayName-line-height) !important; font-weight: var(--bzDisplayName-weight) !important; letter-spacing: var(--bzDisplayName-letter-spacing) !important; font-style: var(--bzDisplayName-style) !important; text-transform: var(--bzDisplayName-transform) !important; opacity: var(--bzDisplayName-opacity, 1) !important; color: var(--bzDisplayName-color, var(--cream)) !important; } /* bzGenderOption — welcome-screen gender radio options. Own typography style so size + colour are tunable without affecting bzCopy. */ .auth-welcome .radio-item, .auth-welcome .radio-item span { font-family: var(--bzGenderOption-family) !important; font-size: var(--bzGenderOption-size) !important; line-height: var(--bzGenderOption-line-height) !important; font-weight: var(--bzGenderOption-weight) !important; letter-spacing: var(--bzGenderOption-letter-spacing) !important; font-style: var(--bzGenderOption-style) !important; text-transform: var(--bzGenderOption-transform) !important; opacity: var(--bzGenderOption-opacity, 1) !important; color: var(--bzGenderOption-color, var(--cream)) !important; } /* bzHelpers — field helper text only ("Mínimo 8 caracteres", "Esqueci a palavra-passe", etc). Split from bzSmallLetter so the operator can size/colour these independently of fine print + T&C. */ .field-helper { font-family: var(--bzHelpers-family) !important; font-size: var(--bzHelpers-size) !important; line-height: var(--bzHelpers-line-height) !important; font-weight: var(--bzHelpers-weight) !important; letter-spacing: var(--bzHelpers-letter-spacing) !important; font-style: var(--bzHelpers-style) !important; text-transform: var(--bzHelpers-transform) !important; opacity: var(--bzHelpers-opacity, 1) !important; color: var(--bzHelpers-color, var(--text-muted, rgba(15, 42, 58, 0.7))) !important; } /* bzSmallLetter — fine print + checkbox-row label (T&C line). */ .auth-fineprint, .checkbox-row span, .checkbox-row a { font-family: var(--bzSmallLetter-family) !important; font-size: var(--bzSmallLetter-size) !important; line-height: var(--bzSmallLetter-line-height) !important; font-weight: var(--bzSmallLetter-weight) !important; letter-spacing: var(--bzSmallLetter-letter-spacing) !important; font-style: var(--bzSmallLetter-style) !important; text-transform: var(--bzSmallLetter-transform) !important; opacity: var(--bzSmallLetter-opacity, 1) !important; color: var(--bzSmallLetter-color, var(--text-muted, rgba(15, 42, 58, 0.7))) !important; } /* bzCopy — landing sub-text */ body .home-sub { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; line-height: var(--bzCopy-line-height) !important; font-weight: var(--bzCopy-weight) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, rgba(250, 242, 225, 0.92)) !important; } /* bzHeading — beach name on the detail page */ body .beach-label .name { font-family: var(--bzHeading-family) !important; font-size: var(--bzHeading-size) !important; line-height: var(--bzHeading-line-height) !important; font-weight: var(--bzHeading-weight) !important; letter-spacing: var(--bzHeading-letter-spacing) !important; font-style: var(--bzHeading-style) !important; text-transform: var(--bzHeading-transform) !important; opacity: var(--bzHeading-opacity, 1) !important; color: var(--bzHeading-color, var(--cream)) !important; } /* bzSubheading — the "sup" city/region label above the beach name */ body .beach-label .sup { font-family: var(--bzSubheading-family) !important; font-size: var(--bzSubheading-size) !important; line-height: var(--bzSubheading-line-height) !important; font-weight: var(--bzSubheading-weight) !important; letter-spacing: var(--bzSubheading-letter-spacing) !important; font-style: var(--bzSubheading-style) !important; text-transform: var(--bzSubheading-transform) !important; opacity: var(--bzSubheading-opacity, 1) !important; color: var(--bzSubheading-color, rgba(250, 242, 225, 0.92)) !important; } /* bzWeatherNumber — large weather digit readings. `.val-num sup` (the °) is reset to inherit so the theme weight covers the unit symbol too. font-size is the only exception — the ° stays at 0.55em of its parent (which is whatever the theme sized .val-num to). */ body .val-stack .val-num, body .val .val-num { font-family: var(--bzWeatherNumber-family) !important; font-size: var(--bzWeatherNumber-size) !important; line-height: var(--bzWeatherNumber-line-height) !important; font-weight: var(--bzWeatherNumber-weight) !important; letter-spacing: var(--bzWeatherNumber-letter-spacing) !important; font-style: var(--bzWeatherNumber-style) !important; text-transform: var(--bzWeatherNumber-transform) !important; opacity: var(--bzWeatherNumber-opacity, 1) !important; color: var(--bzWeatherNumber-color, var(--cream)) !important; } body .val-stack .val-num sup, body .val .val-num sup { font-family: inherit; font-weight: inherit; font-style: inherit; color: inherit; opacity: inherit; } /* bzWeatherLabel — unit text beside the weather numbers */ body .val-stack .val-unit, body .val .val-unit { font-family: var(--bzWeatherLabel-family) !important; font-size: var(--bzWeatherLabel-size) !important; line-height: var(--bzWeatherLabel-line-height) !important; font-weight: var(--bzWeatherLabel-weight) !important; letter-spacing: var(--bzWeatherLabel-letter-spacing) !important; font-style: var(--bzWeatherLabel-style) !important; text-transform: var(--bzWeatherLabel-transform) !important; opacity: var(--bzWeatherLabel-opacity, 1) !important; color: var(--bzWeatherLabel-color, rgba(250, 242, 225, 0.85)) !important; } /* bzFlag — country flag in the weather stack */ body .val.flag .flag-text { font-family: var(--bzFlag-family) !important; font-size: var(--bzFlag-size) !important; line-height: var(--bzFlag-line-height) !important; font-weight: var(--bzFlag-weight) !important; letter-spacing: var(--bzFlag-letter-spacing) !important; font-style: var(--bzFlag-style) !important; text-transform: var(--bzFlag-transform) !important; opacity: var(--bzFlag-opacity, 1) !important; color: var(--bzFlag-color, var(--cream)) !important; } body .val.flag .flag-text small, body .val.flag .flag-text span { font-family: inherit; font-weight: inherit; color: inherit; opacity: inherit; } /* bzNav — prev/next beach navigation labels */ body .beach-nav { font-family: var(--bzNav-family) !important; font-size: var(--bzNav-size) !important; line-height: var(--bzNav-line-height) !important; font-weight: var(--bzNav-weight) !important; letter-spacing: var(--bzNav-letter-spacing) !important; font-style: var(--bzNav-style) !important; text-transform: var(--bzNav-transform) !important; opacity: var(--bzNav-opacity, 1) !important; color: var(--bzNav-color, var(--cream)) !important; } /* ═══════════════════════════════════════════════════════════ ICON GROUP COLOURS + OPACITY Every front-end icon strokes/fills with currentColor, so setting `color` on the icon recolours it. Each fallback reproduces the icon's ORIGINAL colour, so an unbound group leaves icons exactly as they shipped. ═══════════════════════════════════════════════════════════ */ body #val-stack > .val:not(.flag) .val-ico { color: var(--bzIconWeather-color, var(--cream)) !important; opacity: var(--bzIconWeather-opacity, 1) !important; } /* Animated flag panel — pole + circle use the weather icon colour */ body #flag-panel line, body #flag-panel circle { stroke: var(--bzIconWeather-color, #FFFFFF) !important; fill: var(--bzIconWeather-color, #FFFFFF) !important; } body .cat-btn svg { color: var(--bzIconBusiness-color, #FFFFFF) !important; opacity: var(--bzIconBusiness-opacity, 1) !important; } body .act svg { color: var(--bzIconAction-color, var(--cream)) !important; opacity: var(--bzIconAction-opacity, 1) !important; } body .beach-nav svg { color: var(--bzIconNav-color, var(--cream)) !important; opacity: var(--bzIconNav-opacity, 1) !important; } body .val.flag .val-ico { color: var(--bzIconFlag-color, var(--cream)) !important; opacity: var(--bzIconFlag-opacity, 1) !important; } /* ═══════════════════════════════════════════════════════════ PANEL BACKGROUNDS (v7 — Themes admin Panels tab) Each panel binding emits a CSS var via theme-applier.js as composed rgba (opacity baked in). The var() fallback keeps the panel's native background unchanged when unbound. ═══════════════════════════════════════════════════════════ */ body #screen-home, body #screen-beach { background: var(--bzPanel-screen-bg, transparent); } body .val-stack { background: var(--bzPanel-weather-bg, transparent); } body .val.flag { background: var(--bzPanel-flag-bg, transparent); } body .cat-stack { background: var(--bzPanel-business-bg, transparent); } body .cluster { background: var(--bzPanel-actions-bg, transparent); } body .beach-nav { background: var(--bzPanel-nav-bg, transparent); } body .bz-card { background: var(--bzPanel-card-bg, #FFFFFF); } /* Business category button backgrounds. `--bzIconBusiness-bg` is rgba composed by theme-applier, so opacity is baked into the colour and DOESN'T affect the icon inside. Fallbacks reproduce style.css's defaults. */ body .cat-btn[data-cat="rest"] { background: var(--bzIconBusinessRest-bg, #F76659); } body .cat-btn[data-cat="play"] { background: var(--bzIconBusinessPlay-bg, #1A8073); } body .cat-btn[data-cat="stay"] { background: var(--bzIconBusinessStay-bg, #1F4070); } /* ═══════════════════════════════════════════════════════════ SPACING — gap controls for the main flex stacks. ───────────────────────────────────────────────────────── bzDesign Properties → Stack is the only writer now. The legacy --bzGap-* theme-applier emission was retired with the val-stack consolidation; the fallback default dropped from 48 px / 14 px to 0 so an untouched stack renders flush instead of carrying a hidden floor that made Properties → Gap appear to "not compress". See CLAUDE.md "Icon ownership" for the single-writer architecture. ═══════════════════════════════════════════════════════════ */ body .val-stack { height: auto; /* no !important — inline from Layout admin can override */ justify-content: flex-start !important; gap: var(--bzd-stack-prop-gap, 0) !important; } body .beach-label { display: flex !important; flex-direction: column !important; gap: var(--bzGap-beachLabel, 4px) !important; } body .beach-label .sup { margin-bottom: 0 !important; } body .cat-stack { gap: var(--bzd-stack-prop-gap, 0) !important; } /* ════════════════════════════════════════════════════════════ Per-panel icon-size override ════════════════════════════════════════════════════════════ Each icon-bearing panel exposes a --bzPanel-{p}-icon-size CSS variable, set by the admin's Icon size control. When the variable is unset (no admin customisation), the original width/height rules from style.css apply — themes that don't touch the slider look identical to before. Affects BOTH original SVG icons (.val-ico, .cat-btn svg, etc.) and Weather Icons / Lucide font replacements (i.val-ico, etc.) — the slider is the master control regardless of source. ════════════════════════════════════════════════════════════ */ /* ── bzBeachZoom_Weather ── */ .val-ico { width: var(--bzPanel-weather-icon-size, 41px) !important; height: var(--bzPanel-weather-icon-size, 41px) !important; /* Force the .val-ico container to centre its inner glyph (SVG , Material Symbols , font icon ) instead of letting font metrics float the glyph to the bottom of its line-box. Without this, Item cross-align = center sits the icon visually lower than the digit. font-size matches the container so Material spans render at full box size. */ font-size: var(--bzPanel-weather-icon-size, 41px) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } i.val-ico { /* Font-icon variant (legacy Weather Icons / Lucide): width/height don't apply to , fall back to font-size + min-width. */ width: auto !important; height: auto !important; min-width: var(--bzPanel-weather-icon-size, 41px); } /* ── bzBeachZoom_Flag ── (the flag icon inside .val.flag) */ .val.flag .val-ico { width: var(--bzPanel-flag-icon-size, 41px) !important; height: var(--bzPanel-flag-icon-size, 41px) !important; } .val.flag i.val-ico { width: auto !important; height: auto !important; font-size: var(--bzPanel-flag-icon-size, 41px) !important; line-height: 1; min-width: var(--bzPanel-flag-icon-size, 41px); display: inline-flex; align-items: center; justify-content: center; } /* ── bzBeachZoom_Business ── (the round cat-btn icons) */ .cat-btn svg, .cat-btn i { width: var(--bzPanel-business-icon-size, 24px); height: var(--bzPanel-business-icon-size, 24px); } .cat-btn i { /* Font icons: use font-size for visual size, centre the glyph. */ width: auto; height: auto; font-size: var(--bzPanel-business-icon-size, 24px); line-height: 1; min-width: var(--bzPanel-business-icon-size, 24px); display: inline-flex; align-items: center; justify-content: center; } /* ── bzBeachZoom_Actions ── (share / location / close at bottom) */ .action-btn svg, .action-btn i { width: var(--bzPanel-actions-icon-size, 22px); height: var(--bzPanel-actions-icon-size, 22px); } .action-btn i { width: auto; height: auto; font-size: var(--bzPanel-actions-icon-size, 22px); line-height: 1; min-width: var(--bzPanel-actions-icon-size, 22px); display: inline-flex; align-items: center; justify-content: center; } /* ── bzBeachZoom_Nav ── (prev / next arrows on beach pager) */ .beach-nav svg, .beach-nav i { width: var(--bzPanel-nav-icon-size, 18px); height: var(--bzPanel-nav-icon-size, 18px); } .beach-nav i { width: auto; height: auto; font-size: var(--bzPanel-nav-icon-size, 18px); line-height: 1; min-width: var(--bzPanel-nav-icon-size, 18px); display: inline-flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════ AUTH SCREEN TYPOGRAPHY BRIDGES Each auth element binds to a theme typography style so the Properties → Type accordion (Stage 7) and the Swatches / typography editors drive the look without per-element overrides. Brand-locked fonts (Bebas, Montserrat) come through theme-applier vars, not from hard-coded CSS here. ═══════════════════════════════════════════════════════════ */ /* Logo (bzLogo / bzLogoSuffix wordmark — cloned from the splash so auth + splash stay visually identical. Two-span structure: "beachzoom" (bzLogo) + ".io" (bzLogoSuffix). Yellow on cream by default, every property bound through the typography tokens so the operator can retune from Properties → Type → Logo. */ body.auth-body .auth-head .logo { font-family: var(--bzLogo-family) !important; font-size: var(--bzLogo-size) !important; font-weight: var(--bzLogo-weight) !important; line-height: var(--bzLogo-line-height) !important; letter-spacing: var(--bzLogo-letter-spacing) !important; font-style: var(--bzLogo-style) !important; text-transform: var(--bzLogo-transform) !important; opacity: var(--bzLogo-opacity, 1) !important; color: var(--bzLogo-color, var(--bzYellow, #FFD300)) !important; } body.auth-body .auth-head .logo .io { font-family: var(--bzLogoSuffix-family, inherit) !important; font-size: var(--bzLogoSuffix-size, inherit) !important; font-weight: var(--bzLogoSuffix-weight, 400) !important; line-height: var(--bzLogoSuffix-line-height, inherit) !important; letter-spacing: var(--bzLogoSuffix-letter-spacing, inherit) !important; font-style: var(--bzLogoSuffix-style, inherit) !important; text-transform: var(--bzLogoSuffix-transform, inherit) !important; opacity: var(--bzLogoSuffix-opacity, 1) !important; color: var(--bzLogoSuffix-color, var(--bzSand, #FAF2E1)) !important; } /* Card title — "Entrar" / "Criar conta" / etc. */ body.auth-body .auth-title { font-family: var(--bzHeading-family) !important; font-size: var(--bzHeading-size) !important; font-weight: var(--bzHeading-weight) !important; line-height: var(--bzHeading-line-height) !important; letter-spacing: var(--bzHeading-letter-spacing) !important; font-style: var(--bzHeading-style) !important; text-transform: var(--bzHeading-transform) !important; opacity: var(--bzHeading-opacity, 1) !important; color: var(--bzHeading-color, var(--ink)) !important; } /* Card subtitle — small explainer below the title. */ body.auth-body .auth-sub { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; font-weight: var(--bzCopy-weight) !important; line-height: var(--bzCopy-line-height) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, #5A6B7B) !important; } /* Field labels (Email, Palavra-passe). */ body.auth-body .field > label { font-family: var(--bzCopySmall-family) !important; font-size: var(--bzCopySmall-size) !important; font-weight: var(--bzCopySmall-weight) !important; line-height: var(--bzCopySmall-line-height) !important; letter-spacing: var(--bzCopySmall-letter-spacing) !important; font-style: var(--bzCopySmall-style) !important; text-transform: var(--bzCopySmall-transform) !important; opacity: var(--bzCopySmall-opacity, 1) !important; color: var(--bzCopySmall-color, inherit) !important; } /* Field helpers + inline links (Esqueci a palavra-passe…). Bound to bzHelpers per operator request — split from bzCopyMicro so the field-helper line ("Mínimo 8 caracteres", "Como aparece em avaliações que escreva", "Esqueci a palavra-passe", etc) can be sized/coloured independently of the fine print + T&C copy. */ body.auth-body .field-helper { font-family: var(--bzHelpers-family) !important; font-size: var(--bzHelpers-size) !important; font-weight: var(--bzHelpers-weight) !important; line-height: var(--bzHelpers-line-height) !important; letter-spacing: var(--bzHelpers-letter-spacing) !important; font-style: var(--bzHelpers-style) !important; text-transform: var(--bzHelpers-transform) !important; opacity: var(--bzHelpers-opacity, 1) !important; color: var(--bzHelpers-color, inherit) !important; } /* Field inputs (email / password / text / textarea / number / date on every auth state). Bound to its OWN typography style (bzUserInput) so the typed-text styling can diverge from body copy — pickable from the Type tab as 'User input'. Vars fall back to bzCopy until the operator touches the dedicated style. */ body.auth-body .field input, body.auth-body .field textarea { font-family: var(--bzUserInput-family, var(--bzCopy-family)) !important; font-size: var(--bzUserInput-size, var(--bzCopy-size)) !important; font-weight: var(--bzUserInput-weight, var(--bzCopy-weight)) !important; line-height: var(--bzUserInput-line-height, var(--bzCopy-line-height)) !important; letter-spacing: var(--bzUserInput-letter-spacing, var(--bzCopy-letter-spacing)) !important; font-style: var(--bzUserInput-style, var(--bzCopy-style)) !important; opacity: var(--bzUserInput-opacity, 1) !important; /* IMPORTANT: don't fall back to bzCopy-color — body copy is usually set against the page background (often dark, with white text), but inputs sit on a cream/beige fill. Defaulting to dark navy keeps typed text legible until the operator explicitly customises bzUserInput-color. */ color: var(--bzUserInput-color, #1A1815) !important; } /* Field input PLACEHOLDER text — the grey 'o-seu@email.pt' / 'your@email' hints. Pseudo-element, so it can't be selected from bzDesign directly, but it inherits .field input typography via the same bzCopy tokens. We only override color + opacity so the placeholder reads dimmer than the actual typed value by default; the operator can tune --bzPlaceholder-* in the Type tab to break that link if they want. */ body.auth-body .field input::placeholder, body.auth-body .field textarea::placeholder { font-family: var(--bzUserInput-family, var(--bzCopy-family)) !important; font-size: var(--bzUserInput-size, var(--bzCopy-size)) !important; font-weight: var(--bzUserInput-weight, var(--bzCopy-weight)) !important; letter-spacing: var(--bzUserInput-letter-spacing, var(--bzCopy-letter-spacing)) !important; font-style: var(--bzUserInput-style, var(--bzCopy-style)) !important; color: var(--bzPlaceholder-color, var(--bzUserInput-color, var(--bzCopy-color, rgba(15,42,58,0.45)))) !important; opacity: var(--bzPlaceholder-opacity, 0.7) !important; } /* Primary CTA button — ENTRAR / CRIAR CONTA / etc. */ body.auth-body .btn-primary { font-family: var(--bzCTA-family) !important; font-size: var(--bzCTA-size) !important; font-weight: var(--bzCTA-weight) !important; line-height: var(--bzCTA-line-height) !important; letter-spacing: var(--bzCTA-letter-spacing) !important; font-style: var(--bzCTA-style) !important; text-transform: var(--bzCTA-transform) !important; opacity: var(--bzCTA-opacity, 1) !important; color: var(--bzCTA-color, inherit) !important; /* The button is display:flex (see style-auth.css). align-items reads from the Type tab's V-align control via --bzCTA-valign, defaulting to center so the label is vertically centred regardless of any explicit height the operator sets. */ align-items: var(--bzCTA-valign, center) !important; } /* OAuth (Google / Facebook) secondary buttons. */ body.auth-body .btn-oauth { font-family: var(--bzButton-family) !important; font-size: var(--bzButton-size) !important; font-weight: var(--bzButton-weight) !important; line-height: var(--bzButton-line-height) !important; letter-spacing: var(--bzButton-letter-spacing) !important; font-style: var(--bzButton-style) !important; text-transform: var(--bzButton-transform) !important; opacity: var(--bzButton-opacity, 1) !important; color: var(--bzButton-color, inherit) !important; align-items: var(--bzButton-valign, center) !important; } /* Divider "ou" + footer micro-copy ("Ainda não tem conta? …"). */ body.auth-body .auth-divider span, body.auth-body .auth-footer { font-family: var(--bzCopySmall-family) !important; font-size: var(--bzCopySmall-size) !important; font-weight: var(--bzCopySmall-weight) !important; line-height: var(--bzCopySmall-line-height) !important; letter-spacing: var(--bzCopySmall-letter-spacing) !important; font-style: var(--bzCopySmall-style) !important; text-transform: var(--bzCopySmall-transform) !important; opacity: var(--bzCopySmall-opacity, 1) !important; color: var(--bzCopySmall-color, inherit) !important; } /* ═══════════════════════════════════════════════════════════ PROFILE + PUBLIC-PROFILE TYPOGRAPHY BRIDGES profile.html and u.html share body.profile-body, so one set of rules drives both. Empty-state cards (loading / not-found / private) also live under body.profile-body via u.html's state machine. ═══════════════════════════════════════════════════════════ */ /* Headings — display name + empty-state titles. */ body.profile-body #u-displayname, body.profile-body .profile-empty-state h2 { font-family: var(--bzHeading-family) !important; font-size: var(--bzHeading-size) !important; font-weight: var(--bzHeading-weight) !important; line-height: var(--bzHeading-line-height) !important; letter-spacing: var(--bzHeading-letter-spacing) !important; font-style: var(--bzHeading-style) !important; text-transform: var(--bzHeading-transform) !important; opacity: var(--bzHeading-opacity, 1) !important; color: var(--bzHeading-color, inherit) !important; } /* Body copy — bio paragraph, empty-state body, info values. */ body.profile-body #u-bio, body.profile-body .profile-empty-state p, body.profile-body .profile-info-row .value { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; font-weight: var(--bzCopy-weight) !important; line-height: var(--bzCopy-line-height) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, inherit) !important; } /* Small copy — tagline + info labels. */ body.profile-body #u-since, body.profile-body .profile-info-row .label { font-family: var(--bzCopySmall-family) !important; font-size: var(--bzCopySmall-size) !important; font-weight: var(--bzCopySmall-weight) !important; line-height: var(--bzCopySmall-line-height) !important; letter-spacing: var(--bzCopySmall-letter-spacing) !important; font-style: var(--bzCopySmall-style) !important; text-transform: var(--bzCopySmall-transform) !important; opacity: var(--bzCopySmall-opacity, 1) !important; color: var(--bzCopySmall-color, inherit) !important; } /* CTA — edit-my-profile link + back-to-home links. */ body.profile-body #u-edit-link, body.profile-body .profile-edit-link { font-family: var(--bzCTA-family) !important; font-size: var(--bzCTA-size) !important; font-weight: var(--bzCTA-weight) !important; line-height: var(--bzCTA-line-height) !important; letter-spacing: var(--bzCTA-letter-spacing) !important; font-style: var(--bzCTA-style) !important; text-transform: var(--bzCTA-transform) !important; opacity: var(--bzCTA-opacity, 1) !important; color: var(--bzCTA-color, inherit) !important; } /* Profile-page form inputs — text/email/password/textarea/select. Same bzUserInput typography as auth-page inputs so the operator tunes ONE style and every field user types into follows. Vars fall back to bzCopy until the operator customises. */ body.profile-body .profile-form input, body.profile-body .profile-form textarea, body.profile-body .profile-form select { font-family: var(--bzUserInput-family, var(--bzCopy-family)) !important; font-size: var(--bzUserInput-size, var(--bzCopy-size)) !important; font-weight: var(--bzUserInput-weight, var(--bzCopy-weight)) !important; line-height: var(--bzUserInput-line-height, var(--bzCopy-line-height)) !important; letter-spacing: var(--bzUserInput-letter-spacing, var(--bzCopy-letter-spacing)) !important; font-style: var(--bzUserInput-style, var(--bzCopy-style)) !important; opacity: var(--bzUserInput-opacity, 1) !important; /* Same legibility-first default as auth-page inputs. */ color: var(--bzUserInput-color, #1A1815) !important; } body.profile-body .profile-form input::placeholder, body.profile-body .profile-form textarea::placeholder { font-family: var(--bzUserInput-family, var(--bzCopy-family)) !important; font-size: var(--bzUserInput-size, var(--bzCopy-size)) !important; font-style: var(--bzUserInput-style, var(--bzCopy-style)) !important; color: var(--bzPlaceholder-color, var(--bzUserInput-color, var(--bzCopy-color, rgba(15,42,58,0.45)))) !important; opacity: var(--bzPlaceholder-opacity, 0.7) !important; } /* ═══════════════════════════════════════════════════════════ BUSINESS PANEL TYPOGRAPHY BRIDGES (Stage 11) Drives both the live consumer popup (js/consumer-businesses.js buildCardHtml) AND the bzDesign preview page (business-preview.html). Selectors are identical on both surfaces, so editing a type style in bzDesign updates the live popup with zero rebinding. ═══════════════════════════════════════════════════════════ */ /* Business name — large Bebas-Neue title on the card head. */ .bz-card .bz-card-name { font-family: var(--bzBusinessTitle-family) !important; font-size: var(--bzBusinessTitle-size) !important; font-weight: var(--bzBusinessTitle-weight) !important; line-height: var(--bzBusinessTitle-line-height) !important; letter-spacing: var(--bzBusinessTitle-letter-spacing) !important; font-style: var(--bzBusinessTitle-style) !important; text-transform: var(--bzBusinessTitle-transform) !important; opacity: var(--bzBusinessTitle-opacity, 1) !important; color: var(--bzBusinessTitle-color, var(--rest)) !important; } /* Description / quote — paragraph copy under the head. */ .bz-card .bz-card-quote { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; font-weight: var(--bzCopy-weight) !important; line-height: var(--bzCopy-line-height) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, inherit) !important; } /* Tab buttons (PREÇÁRIO / SERVIÇOS) — uppercase CTA-style. */ .bz-card .bz-card-tab { font-family: var(--bzBusinessCTA-family) !important; font-size: var(--bzBusinessCTA-size) !important; font-weight: var(--bzBusinessCTA-weight) !important; line-height: var(--bzBusinessCTA-line-height) !important; letter-spacing: var(--bzBusinessCTA-letter-spacing) !important; font-style: var(--bzBusinessCTA-style) !important; text-transform: var(--bzBusinessCTA-transform) !important; opacity: var(--bzBusinessCTA-opacity, 1) !important; color: var(--bzBusinessCTA-color, inherit) !important; } /* CTA row buttons (Direções / Reservar / Contacto). */ .bz-card .bz-card-cta { font-family: var(--bzBusinessCTA-family) !important; font-size: var(--bzBusinessCTA-size) !important; font-weight: var(--bzBusinessCTA-weight) !important; line-height: var(--bzBusinessCTA-line-height) !important; letter-spacing: var(--bzBusinessCTA-letter-spacing) !important; font-style: var(--bzBusinessCTA-style) !important; text-transform: var(--bzBusinessCTA-transform) !important; opacity: var(--bzBusinessCTA-opacity, 1) !important; color: var(--bzBusinessCTA-color, inherit) !important; } /* Head row — no fav button anymore, so two columns (name + rating). */ .bz-card .bz-card-head { grid-template-columns: 1fr auto !important; } /* Rating tile inside the card head — same component as #beach-rate-trigger on the beach page. We turn the tile into a CSS container so the rating digit auto-scales with the tile's width — resizing the tile via bzDesign handles changes the inline width and the font follows. aspect-ratio:1 keeps it square so the user only needs to drag width. */ .bz-card .beach-rate-tile { container-type: inline-size; display: inline-block; width: var(--bzd-rate-tile-size, 64px); height: auto; aspect-ratio: 1 / 1; position: relative; } .bz-card .beach-rate-tile__num { font-family: var(--bzMetric-family, 'Montserrat', sans-serif) !important; font-weight: var(--bzMetric-weight, 700) !important; /* If the user sets --bzMetric-size via Type tab, that wins; otherwise the digit auto-scales with the tile width via 44cqw. */ font-size: var(--bzMetric-size, 44cqw) !important; line-height: var(--bzMetric-line-height, 1) !important; letter-spacing: var(--bzMetric-letter-spacing) !important; font-style: var(--bzMetric-style) !important; text-transform: var(--bzMetric-transform) !important; opacity: var(--bzMetric-opacity, 1) !important; color: var(--bzMetric-color, #FFFFFF) !important; } /* Same binding for the rating tile on the beach screen (standalone, not inside .bz-card). bzMetric is the existing big-number style; reusing it lets Type tab drive both contexts with one edit. PR #84 — was hard-coded Montserrat 700 28px before. */ body .beach-rate-tile__num { font-family: var(--bzMetric-family, 'Montserrat', sans-serif) !important; font-weight: var(--bzMetric-weight, 700) !important; font-size: var(--bzMetric-size, 28px) !important; line-height: var(--bzMetric-line-height, 1) !important; letter-spacing: var(--bzMetric-letter-spacing) !important; font-style: var(--bzMetric-style) !important; text-transform: var(--bzMetric-transform) !important; opacity: var(--bzMetric-opacity, 1) !important; color: var(--bzMetric-color, #FFFFFF) !important; } /* "PREÇOS" header above each price section. */ .bz-card .bz-prices-header { font-family: var(--bzCopyMicro-family) !important; font-size: var(--bzCopyMicro-size) !important; font-weight: var(--bzCopyMicro-weight) !important; line-height: var(--bzCopyMicro-line-height) !important; letter-spacing: var(--bzCopyMicro-letter-spacing) !important; font-style: var(--bzCopyMicro-style) !important; text-transform: var(--bzCopyMicro-transform) !important; opacity: var(--bzCopyMicro-opacity, 1) !important; color: var(--bzCopyMicro-color, inherit) !important; } /* Section title inside a price sheet ("MENU", "BEBIDAS"). */ .bz-card .bz-price-section-title { font-family: var(--bzSubheading-family) !important; font-size: var(--bzSubheading-size) !important; font-weight: var(--bzSubheading-weight) !important; line-height: var(--bzSubheading-line-height) !important; letter-spacing: var(--bzSubheading-letter-spacing) !important; font-style: var(--bzSubheading-style) !important; text-transform: var(--bzSubheading-transform) !important; opacity: var(--bzSubheading-opacity, 1) !important; color: var(--bzSubheading-color, inherit) !important; } /* Service rows — body copy. */ .bz-card .bz-service-row { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; font-weight: var(--bzCopy-weight) !important; line-height: var(--bzCopy-line-height) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, inherit) !important; } /* Price sheet copy — its own dedicated style (bzPriceCopy) so price names AND price values can be tuned together, independent of body copy and metric. Every property falls back to bzCopy until the user touches it in the Type tab. */ .bz-card .bz-price-name, .bz-card .bz-price-amount { font-family: var(--bzPriceCopy-family, var(--bzCopy-family)) !important; font-size: var(--bzPriceCopy-size, var(--bzCopy-size)) !important; font-weight: var(--bzPriceCopy-weight, var(--bzCopy-weight)) !important; line-height: var(--bzPriceCopy-line-height, var(--bzCopy-line-height)) !important; letter-spacing: var(--bzPriceCopy-letter-spacing, var(--bzCopy-letter-spacing)) !important; font-style: var(--bzPriceCopy-style, var(--bzCopy-style)) !important; text-transform: var(--bzPriceCopy-transform, var(--bzCopy-transform)) !important; opacity: var(--bzPriceCopy-opacity, var(--bzCopy-opacity, 1)) !important; color: var(--bzPriceCopy-color, var(--bzCopy-color, inherit)) !important; } /* The amount keeps its own weight authority (defaults bold) so the user can dial price values heavier than names while still sharing family/size with the rest of the sheet. */ .bz-card .bz-price-amount { font-weight: var(--bzPriceCopy-amount-weight, 700) !important; } /* ═══════════════════════════════════════════════════════════ INVITE EMAIL TEMPLATE TYPOGRAPHY BRIDGES (Stage 13) Drives invite-email-preview.html. Each .bz-email-* selector pulls all 9 Type-tab vars so the operator can fully restyle the email body in bzDesign. Once the look is locked, the operator copies the rendered HTML out and pastes it into Supabase Dashboard → Authentication → Email Templates. ═══════════════════════════════════════════════════════════ */ .bz-email-logo { font-family: var(--bzLogo-family) !important; font-size: var(--bzLogo-size) !important; font-weight: var(--bzLogo-weight) !important; line-height: var(--bzLogo-line-height) !important; letter-spacing: var(--bzLogo-letter-spacing) !important; font-style: var(--bzLogo-style) !important; text-transform: var(--bzLogo-transform) !important; opacity: var(--bzLogo-opacity, 1) !important; color: var(--bzLogo-color, #1a8073) !important; } .bz-email-logo .io { font-family: var(--bzLogoSuffix-family, inherit) !important; font-size: var(--bzLogoSuffix-size, inherit) !important; font-weight: var(--bzLogoSuffix-weight, 400) !important; color: var(--bzLogoSuffix-color, #e8c766) !important; } .bz-email-heading { font-family: var(--bzHeading-family) !important; font-size: var(--bzHeading-size) !important; font-weight: var(--bzHeading-weight) !important; line-height: var(--bzHeading-line-height) !important; letter-spacing: var(--bzHeading-letter-spacing) !important; font-style: var(--bzHeading-style) !important; text-transform: var(--bzHeading-transform) !important; opacity: var(--bzHeading-opacity, 1) !important; color: var(--bzHeading-color, #1a1815) !important; } .bz-email-paragraph { font-family: var(--bzCopy-family) !important; font-size: var(--bzCopy-size) !important; font-weight: var(--bzCopy-weight) !important; line-height: var(--bzCopy-line-height) !important; letter-spacing: var(--bzCopy-letter-spacing) !important; font-style: var(--bzCopy-style) !important; text-transform: var(--bzCopy-transform) !important; opacity: var(--bzCopy-opacity, 1) !important; color: var(--bzCopy-color, #4b4640) !important; } .bz-email-role-pill { font-family: var(--bzPill-family) !important; font-size: var(--bzPill-size) !important; font-weight: var(--bzPill-weight) !important; line-height: var(--bzPill-line-height) !important; letter-spacing: var(--bzPill-letter-spacing) !important; font-style: var(--bzPill-style) !important; text-transform: var(--bzPill-transform) !important; opacity: var(--bzPill-opacity, 1) !important; color: var(--bzPill-color, #1a8073) !important; } .bz-email-cta { font-family: var(--bzCTA-family) !important; font-size: var(--bzCTA-size) !important; font-weight: var(--bzCTA-weight) !important; line-height: var(--bzCTA-line-height) !important; letter-spacing: var(--bzCTA-letter-spacing) !important; font-style: var(--bzCTA-style) !important; text-transform: var(--bzCTA-transform) !important; opacity: var(--bzCTA-opacity, 1) !important; color: var(--bzCTA-color, #ffffff) !important; } .bz-email-fine { font-family: var(--bzCopyMicro-family) !important; font-size: var(--bzCopyMicro-size) !important; font-weight: var(--bzCopyMicro-weight) !important; line-height: var(--bzCopyMicro-line-height) !important; letter-spacing: var(--bzCopyMicro-letter-spacing) !important; font-style: var(--bzCopyMicro-style) !important; text-transform: var(--bzCopyMicro-transform) !important; opacity: var(--bzCopyMicro-opacity, 1) !important; color: var(--bzCopyMicro-color, inherit) !important; } /* Email footer — bound to its OWN style (bzEmailFooter) so its colour and typography can diverge from .bz-email-fine. Vars fall back to bzCopyMicro until the user touches the dedicated style. */ .bz-email-footer { font-family: var(--bzEmailFooter-family, var(--bzCopyMicro-family)) !important; font-size: var(--bzEmailFooter-size, var(--bzCopyMicro-size)) !important; font-weight: var(--bzEmailFooter-weight, var(--bzCopyMicro-weight)) !important; line-height: var(--bzEmailFooter-line-height, var(--bzCopyMicro-line-height)) !important; letter-spacing: var(--bzEmailFooter-letter-spacing, var(--bzCopyMicro-letter-spacing)) !important; font-style: var(--bzEmailFooter-style, var(--bzCopyMicro-style)) !important; text-transform: var(--bzEmailFooter-transform, var(--bzCopyMicro-transform)) !important; opacity: var(--bzEmailFooter-opacity, var(--bzCopyMicro-opacity, 1)) !important; color: var(--bzEmailFooter-color, var(--bzCopyMicro-color, inherit)) !important; } /* Scrollable price sheet WITHOUT a visible scrollbar. .bz-prices-header stays put, only .bz-price-section scrolls. */ .bz-card .bz-card-tab-panel[data-panel="precario"] { display: flex; flex-direction: column; overflow: hidden; } .bz-card .bz-card-tab-panel[data-panel="precario"] .bz-prices-header { flex: 0 0 auto; } .bz-card .bz-card-tab-panel[data-panel="precario"] .bz-price-section { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Hide scrollbar across engines while keeping scroll behaviour. */ scrollbar-width: none; } .bz-card .bz-card-tab-panel[data-panel="precario"] .bz-price-section::-webkit-scrollbar { display: none; }