/* ===== .flwr/styles/tokens.css (flwr Run) ===== */ /* ============================================================================ Flower v1.0 — Tokens (full LUMOS-rich variable system) ---------------------------------------------------------------------------- COLLECTIONS (12): v1.1 note — canonical count is 12 per README/meta; the list enumerates 14 namespaces, but Component (tier-3) and Runtime (private) are NOT Webflow Variable Collections, so they don't count toward the 12. 1. Palette Raw OKLCH seeds + 9-stop derived ramps. NO modes. 2. Theme Semantic surface/text/border/accent. MODES: Light/Dark/Brand. 3. Section Theme Per-section palette swaps. MODES: Default/Inverse/Brand/Subtle/Accent Soft (v1.1: added Accent Soft, 5 modes). 4. Typography Family + clamp() size scale + leading + tracking. NO modes. 5. Text Style Indirection layer for f-heading / f-paragraph variants. 6. Spacing 8-step fluid scale. MODES: Comfortable / Compact / Spacious. 7. Layout Column count, gutter, max-content, breakout grid. NO modes. 8. Column Count 1..12 driver for grid systems. NO modes. 9. Gap 0..8 + gutter + inherit. NO modes. 10. Alignment Single value drives text + flex + grid alignment. 11. Button Style Surface + text + border + hover variants (Primary/Secondary/Ghost/Danger). 12. State / Trigger hover/focus/checked/open/expanded variable inversion (LUMOS pattern). — Component Tier-3 tokens for shipped components (card, field, nav, etc.) — not a Variable Collection. — Runtime Private framework internals (flwr-rt namespace) — not a Variable Collection. ============================================================================ */ /* ============================================================================ BOX MODEL RESET ---------------------------------------------------------------------------- flwr is border-box-native. This matches Webflow's own global `* { box-sizing: border-box }` default, so the web preview, the web deploy, and the Webflow paste all render the box model identically. It also signals the Flowriter/Jayson converter that the source is already border-box, so the content-box compatibility shim (for legacy/LUMOS content-box sources) is skipped for flwr — never forcing content-box onto flwr's padded fixed-width boxes. Scoped to [data-flwr] so it can't leak into a host page's chrome. ============================================================================ */ [data-flwr], [data-flwr] *, [data-flwr] *::before, [data-flwr] *::after { box-sizing: border-box; } :root { /* ==================================================================== TIER 1 — PALETTE (raw OKLCH seeds + derived ramps) ==================================================================== */ /* ==================================================================== PALETTE CATEGORIES (4) core — primary brand identity (Flowriter pink #f085ff; lime moved to alternate-2) positive — secondary brand / Pro / aspirational (Flowriter purple) negative — destructive / errors / warnings (red) neutral — grays anchored to Flowriter canvas + text Plus four small status palettes (success/warning/info/focus) shipped separately. Numeric stops 50→900 are CANONICAL and universal — clear ordering, no metaphor. ==================================================================== */ /* ---- core — Flowriter pink (#f085ff). 9 stops derive from one OKLCH seed. ---- */ --_palette---core--seed: oklch(0.77 0.20 322); /* #f085ff — Flowriter brand */ /* v1.2: ramp re-tuned for the pink seed (L 0.77). The previous stops were tuned for the lime seed (L 0.93) and were non-monotonic once pink took over: 600 (L 0.85) was LIGHTER than 500 (L 0.77), so light-mode links (core--600 on neutral--0) rendered at 1.62:1. Lightness now descends 0.975 → 0.34 without reversal; 700 is the first stop that clears 4.5:1 on the light surface, 400 is the first that clears 10:1 for ink text on it. */ --_palette---core--50: oklch(from var(--_palette---core--seed) 0.975 calc(c * 0.15) h); --_palette---core--100: oklch(from var(--_palette---core--seed) 0.95 calc(c * 0.30) h); --_palette---core--200: oklch(from var(--_palette---core--seed) 0.92 calc(c * 0.50) h); --_palette---core--300: oklch(from var(--_palette---core--seed) 0.88 calc(c * 0.70) h); --_palette---core--400: oklch(from var(--_palette---core--seed) 0.83 calc(c * 0.88) h); --_palette---core--500: var(--_palette---core--seed); --_palette---core--600: oklch(from var(--_palette---core--seed) 0.66 c h); --_palette---core--700: oklch(from var(--_palette---core--seed) 0.55 c h); --_palette---core--800: oklch(from var(--_palette---core--seed) 0.45 calc(c * 0.90) h); --_palette---core--900: oklch(from var(--_palette---core--seed) 0.34 calc(c * 0.80) h); /* ---- positive — Flowriter vibrant purple (#8255ff). Pro / secondary brand. ---- */ --_palette---alternate--seed: oklch(0.60 0.25 285); /* #8255ff */ --_palette---alternate--50: oklch(from var(--_palette---alternate--seed) 0.97 calc(c * 0.20) h); --_palette---alternate--100: oklch(from var(--_palette---alternate--seed) 0.93 calc(c * 0.40) h); --_palette---alternate--200: oklch(from var(--_palette---alternate--seed) 0.85 calc(c * 0.60) h); --_palette---alternate--300: oklch(from var(--_palette---alternate--seed) 0.76 calc(c * 0.80) h); --_palette---alternate--400: oklch(from var(--_palette---alternate--seed) 0.68 calc(c * 0.92) h); --_palette---alternate--500: var(--_palette---alternate--seed); --_palette---alternate--600: oklch(from var(--_palette---alternate--seed) 0.52 c h); --_palette---alternate--700: oklch(from var(--_palette---alternate--seed) 0.42 c h); --_palette---alternate--800: oklch(from var(--_palette---alternate--seed) 0.32 calc(c * 0.85) h); --_palette---alternate--900: oklch(from var(--_palette---alternate--seed) 0.22 calc(c * 0.70) h); /* ---- alternate-2 — Flowriter lime (#beff0d), the original brand color, now repurposed as the third brand. Add alternate-3, alternate-4, etc. for more. ---- */ --_palette---alternate-2--seed: oklch(0.93 0.22 125); /* #beff0d — Flowriter lime (legacy brand, now alternate-2) */ /* v1.2: the lime seed sits at L 0.93, so stops 50–400 must live in the 0.985–0.945 band above it. The previous ramp put 400 at L 0.77 and 500 at L 0.93 (a reversal). */ --_palette---alternate-2--50: oklch(from var(--_palette---alternate-2--seed) 0.985 calc(c * 0.15) h); --_palette---alternate-2--100: oklch(from var(--_palette---alternate-2--seed) 0.975 calc(c * 0.30) h); --_palette---alternate-2--200: oklch(from var(--_palette---alternate-2--seed) 0.965 calc(c * 0.50) h); --_palette---alternate-2--300: oklch(from var(--_palette---alternate-2--seed) 0.955 calc(c * 0.70) h); --_palette---alternate-2--400: oklch(from var(--_palette---alternate-2--seed) 0.945 calc(c * 0.88) h); --_palette---alternate-2--500: var(--_palette---alternate-2--seed); --_palette---alternate-2--600: oklch(from var(--_palette---alternate-2--seed) 0.80 c h); --_palette---alternate-2--700: oklch(from var(--_palette---alternate-2--seed) 0.66 c h); --_palette---alternate-2--800: oklch(from var(--_palette---alternate-2--seed) 0.52 calc(c * 0.90) h); --_palette---alternate-2--900: oklch(from var(--_palette---alternate-2--seed) 0.38 calc(c * 0.80) h); /* ---- accent — refined teal that bridges purple/pink and lime. Lower chroma than a vibrant cyan; reads as sophisticated rather than neon. Different from "alternate" which is a SECOND BRAND — accent is SPOT color. ---- */ --_palette---accent--seed: oklch(0.74 0.13 200); /* refined teal */ --_palette---accent--50: oklch(from var(--_palette---accent--seed) 0.97 calc(c * 0.20) h); --_palette---accent--100: oklch(from var(--_palette---accent--seed) 0.94 calc(c * 0.40) h); --_palette---accent--200: oklch(from var(--_palette---accent--seed) 0.88 calc(c * 0.60) h); --_palette---accent--300: oklch(from var(--_palette---accent--seed) 0.82 calc(c * 0.78) h); --_palette---accent--400: oklch(from var(--_palette---accent--seed) 0.77 calc(c * 0.92) h); --_palette---accent--500: var(--_palette---accent--seed); --_palette---accent--600: oklch(from var(--_palette---accent--seed) 0.62 c h); --_palette---accent--700: oklch(from var(--_palette---accent--seed) 0.50 c h); --_palette---accent--800: oklch(from var(--_palette---accent--seed) 0.38 calc(c * 0.85) h); --_palette---accent--900: oklch(from var(--_palette---accent--seed) 0.26 calc(c * 0.70) h); /* ---- accent-2 — warm peach/coral that complements the cool teal accent. Sits in the warm range between alert red and the lime alternate-2. Extend with accent-3, accent-4, etc. ---- */ --_palette---accent-2--seed: oklch(0.78 0.14 50); /* warm peach */ --_palette---accent-2--50: oklch(from var(--_palette---accent-2--seed) 0.97 calc(c * 0.20) h); --_palette---accent-2--100: oklch(from var(--_palette---accent-2--seed) 0.94 calc(c * 0.40) h); --_palette---accent-2--200: oklch(from var(--_palette---accent-2--seed) 0.88 calc(c * 0.60) h); --_palette---accent-2--300: oklch(from var(--_palette---accent-2--seed) 0.82 calc(c * 0.78) h); --_palette---accent-2--400: oklch(from var(--_palette---accent-2--seed) 0.77 calc(c * 0.92) h); --_palette---accent-2--500: var(--_palette---accent-2--seed); --_palette---accent-2--600: oklch(from var(--_palette---accent-2--seed) 0.62 c h); --_palette---accent-2--700: oklch(from var(--_palette---accent-2--seed) 0.50 c h); --_palette---accent-2--800: oklch(from var(--_palette---accent-2--seed) 0.38 calc(c * 0.85) h); --_palette---accent-2--900: oklch(from var(--_palette---accent-2--seed) 0.26 calc(c * 0.70) h); /* ---- alert — coral-red, slightly pink-leaning to harmonize with core pink. ---- */ --_palette---alert--seed: oklch(0.62 0.20 22); /* coral-red, brand-aligned */ --_palette---alert--50: oklch(from var(--_palette---alert--seed) 0.97 calc(c * 0.18) h); --_palette---alert--100: oklch(from var(--_palette---alert--seed) 0.93 calc(c * 0.35) h); --_palette---alert--200: oklch(from var(--_palette---alert--seed) 0.85 calc(c * 0.55) h); --_palette---alert--300: oklch(from var(--_palette---alert--seed) 0.78 calc(c * 0.75) h); --_palette---alert--400: oklch(from var(--_palette---alert--seed) 0.72 calc(c * 0.92) h); --_palette---alert--500: var(--_palette---alert--seed); --_palette---alert--600: oklch(from var(--_palette---alert--seed) 0.55 c h); --_palette---alert--700: oklch(from var(--_palette---alert--seed) 0.45 c h); --_palette---alert--800: oklch(from var(--_palette---alert--seed) 0.35 calc(c * 0.85) h); --_palette---alert--900: oklch(from var(--_palette---alert--seed) 0.25 calc(c * 0.70) h); /* ---- neutral — anchored to Flowriter canvas (#161516) + text (#efedf4). Slight warm hue 30°. ---- */ --_palette---neutral--seed: oklch(0.50 0.005 30); --_palette---neutral--0: oklch(0.96 0.005 285); /* #efedf4 — Flowriter text */ --_palette---neutral--50: oklch(0.92 0.005 285); --_palette---neutral--100: oklch(0.85 0.006 285); --_palette---neutral--200: oklch(0.74 0.006 285); --_palette---neutral--300: oklch(0.62 0.006 285); --_palette---neutral--400: oklch(0.52 0.006 285); --_palette---neutral--500: var(--_palette---neutral--seed); --_palette---neutral--600: oklch(0.40 0.006 30); --_palette---neutral--700: oklch(0.28 0.006 30); --_palette---neutral--800: oklch(0.20 0.006 30); --_palette---neutral--900: oklch(0.14 0.006 30); /* #161516 — Flowriter canvas */ --_palette---neutral--1000: oklch(0.08 0.004 30); /* ---- Status palettes (semantic — separate from category system above) ---- */ --_palette---success--seed: oklch(0.74 0.15 150); /* botanical green — fresh, not neon */ --_palette---success--soft: oklch(from var(--_palette---success--seed) 0.93 calc(c * 0.45) h); --_palette---success--main: var(--_palette---success--seed); --_palette---success--bold: oklch(from var(--_palette---success--seed) calc(l - 0.20) c h); --_palette---warning--seed: oklch(0.82 0.13 75); /* warm amber — soft, not harsh yellow */ --_palette---warning--soft: oklch(from var(--_palette---warning--seed) 0.95 calc(c * 0.45) h); --_palette---warning--main: var(--_palette---warning--seed); --_palette---warning--bold: oklch(from var(--_palette---warning--seed) calc(l - 0.20) c h); --_palette---info--seed: oklch(0.70 0.13 250); /* refined periwinkle blue. v1.1: projects with a no-blue brand should reseed this (info is the only remaining fixed-hue seed) */ --_palette---info--soft: oklch(from var(--_palette---info--seed) 0.93 calc(c * 0.45) h); --_palette---info--main: var(--_palette---info--seed); --_palette---info--bold: oklch(from var(--_palette---info--seed) calc(l - 0.20) c h); --_palette---focus--seed: var(--_palette---alternate--seed); /* v1.1: derive focus ring from the alternate brand seed so it follows the brand automatically (N58 had to hand-fix a fixed-blue focus ring) */ /* Translucent neutrals for overlays/scrims (LUMOS -o20 pattern, but OKLCH) */ --_palette---overlay--light: color-mix(in oklch, var(--_palette---neutral--0) 80%, transparent); --_palette---overlay--dark: color-mix(in oklch, var(--_palette---neutral--900) 70%, transparent); --_palette---scrim--subtle: color-mix(in oklch, var(--_palette---neutral--900) 8%, transparent); --_palette---scrim--strong: color-mix(in oklch, var(--_palette---neutral--900) 40%, transparent); /* ==================================================================== TIER 2 — THEME (semantic tokens, Light mode default) Modes: Light / Dark / Brand — declared as mode override blocks below ==================================================================== */ /* Surface */ --_theme---surface--main: var(--_palette---neutral--0); --_theme---surface--raised: var(--_palette---neutral--50); --_theme---surface--sunken: var(--_palette---neutral--100); --_theme---surface--inverse: var(--_palette---neutral--900); --_theme---surface--overlay: var(--_palette---overlay--light); --_theme---surface--scrim: var(--_palette---scrim--subtle); /* Text */ --_theme---text--main: var(--_palette---neutral--900); --_theme---text--strong: var(--_palette---neutral--1000); --_theme---text--muted: var(--_palette---neutral--600); --_theme---text--subtle: var(--_palette---neutral--400); --_theme---text--inverse: var(--_palette---neutral--0); --_theme---text--accent: var(--_palette---core--700); /* v1.2: 700 is the first pink stop at ≥4.5:1 on the light surface (600 was 1.62:1 with the old ramp, 3.05:1 with the new one) */ --_theme---text--link: var(--_palette---core--700); --_theme---text--link-hover: var(--_palette---core--800); --_theme---text--success: var(--_palette---success--bold); --_theme---text--warning: var(--_palette---warning--bold); --_theme---text--alert: var(--_palette---alert--700); /* Border */ --_theme---border--subtle: var(--_palette---neutral--200); --_theme---border--main: var(--_palette---neutral--300); --_theme---border--strong: var(--_palette---neutral--500); --_theme---border--inverse: var(--_palette---neutral--0); --_theme---border--focus: var(--_palette---focus--seed); --_theme---border--accent: var(--_palette---core--500); /* Border-width scale + active width. The active width cascades — utilities (.f-border-N) and modifiers (.is-border-collapse) read it so collapse math always matches the applied border, never hardcoded. */ --_theme---border--width-1: 1px; --_theme---border--width-2: 2px; --_theme---border--width-4: 4px; --_theme---border--width: var(--_theme---border--width-1); /* Accent */ --_theme---accent--soft: var(--_palette---core--100); --_theme---accent--main: var(--_palette---core--500); --_theme---accent--hover: var(--_palette---core--600); --_theme---accent--active: var(--_palette---core--700); --_theme---accent--text: var(--_palette---neutral--900); /* v1.1: base default said neutral--0 (white) while .f-mode-light says neutral--900 — white-on-pink was ~1.9:1 contrast. Base must match light mode: ink on light accents. */ /* Selection — opaque accent-fill for memorable on-brand highlight. Per theme/section overrides below cascade through the global ::selection rule. */ --_theme---selection--background: var(--_palette---core--500); --_theme---selection--text: var(--_palette---neutral--900); /* v1.1: match accent--text contrast fix */ /* Focus ring */ --_theme---focus--ring: 0 0 0 3px color-mix(in oklch, var(--_palette---focus--seed) 40%, transparent); /* Status (theme-level semantic status fills — retuned per mode below) — v1.1: components consume these instead of leaking raw --_palette---*--500 stops, so dark/brand modes can retune them. */ --_theme---status--success: var(--_palette---success--main); --_theme---status--warning: var(--_palette---warning--main); --_theme---status--alert: var(--_palette---alert--500); --_theme---status--info: var(--_palette---info--main); /* Elevation / shadow (theme-level box-shadow scale + elevation ring) — v1.1: built from the scrim palette so f-shadow-* utilities are dark-aware. elevation-ring is a subtle 1px light ring dark-mode elevated components use (transparent in light). */ --_theme---shadow--sm: 0 1px 2px var(--_palette---scrim--subtle); --_theme---shadow--md: 0 1px 2px var(--_palette---scrim--subtle), 0 8px 24px var(--_palette---scrim--subtle); --_theme---shadow--lg: 0 4px 8px var(--_palette---scrim--subtle), 0 16px 48px var(--_palette---scrim--strong); --_theme---elevation-ring: transparent; /* v1.1: TIER 2 — SECTION THEME defaults moved to the re-resolution scope rule below (see INDIRECTION TIERS) */ /* ==================================================================== TIER 2 — TYPOGRAPHY (font primitives + clamp() lerp scale) ==================================================================== */ /* Viewport bounds for fluid lerp (rem). 320px → 1440px at 16px base */ --_typography---viewport-min: 20; --_typography---viewport-max: 90; /* Font families — Flowriter ships Zalando Sans Expanded as primary */ --_typography---family--sans: "Zalando Sans Expanded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --_typography---family--display: "Zalando Sans Expanded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --_typography---family--serif: "Source Serif Pro", "Iowan Old Style", Georgia, "Times New Roman", serif; --_typography---family--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Weights */ --_typography---weight--thin: 100; --_typography---weight--extralight: 200; --_typography---weight--light: 300; --_typography---weight--regular: 400; --_typography---weight--medium: 500; --_typography---weight--semibold: 600; --_typography---weight--bold: 700; --_typography---weight--extrabold: 800; --_typography---weight--black: 900; /* Font-size scale — fluid clamp between viewport-min (20rem) and viewport-max (90rem) */ --_typography---size--display: clamp(2.75rem, calc(2.75rem + ((min(1vw, 1cqi) - 0.2rem) * 4.643)), 7rem); --_typography---size--h1: clamp(2.25rem, calc(2.25rem + ((min(1vw, 1cqi) - 0.2rem) * 3.000)), 5rem); --_typography---size--h2: clamp(1.875rem, calc(1.875rem + ((min(1vw, 1cqi) - 0.2rem) * 2.232)), 3.875rem); --_typography---size--h3: clamp(1.625rem, calc(1.625rem + ((min(1vw, 1cqi) - 0.2rem) * 1.563)), 3rem); --_typography---size--h4: clamp(1.375rem, calc(1.375rem + ((min(1vw, 1cqi) - 0.2rem) * 1.071)), 2.25rem); --_typography---size--h5: clamp(1.125rem, calc(1.125rem + ((min(1vw, 1cqi) - 0.2rem) * 0.625)), 1.625rem); --_typography---size--h6: clamp(1rem, calc(1rem + ((min(1vw, 1cqi) - 0.2rem) * 0.357)), 1.25rem); --_typography---size--lead: clamp(1.125rem, calc(1.125rem + ((min(1vw, 1cqi) - 0.2rem) * 0.357)), 1.375rem); --_typography---size--body: clamp(1rem, calc(1rem + ((min(1vw, 1cqi) - 0.2rem) * 0.179)), 1.125rem); --_typography---size--small: 0.875rem; --_typography---size--tiny: 0.75rem; --_typography---size--micro: 0.6875rem; /* Leading (line-height ratios, semantic naming) */ --_typography---leading--squashed: 0.9; --_typography---leading--display: 0.95; /* v1.1: dedicated tight leading for multiline display type (N58 pulled display to 0.95); keeps `tight` free for body-ish headings */ --_typography---leading--tight: 1.05; /* v1.1: was 1.1 — read airy on multiline display/heading type */ --_typography---leading--snug: 1.25; --_typography---leading--normal: 1.5; --_typography---leading--relaxed: 1.7; --_typography---leading--loose: 2; /* Tracking (letter-spacing) */ --_typography---tracking--tightest: -0.04em; --_typography---tracking--tighter: -0.03em; --_typography---tracking--tight: -0.02em; --_typography---tracking--normal: 0em; --_typography---tracking--wide: 0.04em; --_typography---tracking--wider: 0.08em; --_typography---tracking--widest: 0.12em; /* Text transform tokens */ --_typography---transform--none: none; --_typography---transform--upper: uppercase; --_typography---transform--lower: lowercase; --_typography---transform--capitalize: capitalize; /* Font-metric trim (leading-trim emulation, LUMOS pattern) */ --_typography---trim-top: 0.33em; --_typography---trim-bottom: 0.38em; /* ==================================================================== TIER 2 — TEXT STYLE (indirection layer for variants) ==================================================================== */ --_text-style---family: var(--_typography---family--sans); --_text-style---size: var(--_typography---size--body); --_text-style---weight: var(--_typography---weight--regular); --_text-style---leading: var(--_typography---leading--normal); --_text-style---tracking: var(--_typography---tracking--normal); --_text-style---transform: var(--_typography---transform--none); --_text-style---margin-top: 0; --_text-style---margin-bottom: 0; --_text-style---trim-top: var(--_typography---trim-top); --_text-style---trim-bottom: var(--_typography---trim-bottom); /* ==================================================================== TIER 2 — SPACING (8-step fluid scale + section/container/page-margin) Modes (responsive, applied via Webflow Variable Modes when paste-deployed): - Comfortable (default) - Compact (90% of comfortable) - Spacious (120% of comfortable) ==================================================================== */ --_spacing---step--0: 0; --_spacing---step--1: clamp(0.25rem, calc(0.25rem + ((min(1vw, 1cqi) - 0.2rem) * 0.179)), 0.375rem); --_spacing---step--2: clamp(0.5rem, calc(0.5rem + ((min(1vw, 1cqi) - 0.2rem) * 0.179)), 0.625rem); --_spacing---step--3: clamp(0.75rem, calc(0.75rem + ((min(1vw, 1cqi) - 0.2rem) * 0.357)), 1rem); --_spacing---step--4: clamp(1rem, calc(1rem + ((min(1vw, 1cqi) - 0.2rem) * 0.357)), 1.25rem); --_spacing---step--5: clamp(1.25rem, calc(1.25rem + ((min(1vw, 1cqi) - 0.2rem) * 0.446)), 1.625rem); --_spacing---step--6: clamp(1.5rem, calc(1.5rem + ((min(1vw, 1cqi) - 0.2rem) * 0.625)), 2rem); --_spacing---step--7: clamp(2rem, calc(2rem + ((min(1vw, 1cqi) - 0.2rem) * 0.893)), 2.75rem); --_spacing---step--8: clamp(2.5rem, calc(2.5rem + ((min(1vw, 1cqi) - 0.2rem) * 1.250)), 3.5rem); /* Section vertical rhythm */ --_spacing---section--xs: clamp(2rem, calc(2rem + ((min(1vw, 1cqi) - 0.2rem) * 1.250)), 3rem); --_spacing---section--sm: clamp(3rem, calc(3rem + ((min(1vw, 1cqi) - 0.2rem) * 2.232)), 5rem); --_spacing---section--md: clamp(4rem, calc(4rem + ((min(1vw, 1cqi) - 0.2rem) * 3.348)), 7rem); --_spacing---section--lg: clamp(5.5rem, calc(5.5rem + ((min(1vw, 1cqi) - 0.2rem) * 5.020)), 10rem); --_spacing---section--xl: clamp(7rem, calc(7rem + ((min(1vw, 1cqi) - 0.2rem) * 6.696)), 14rem); --_spacing---section--page-top: clamp(8rem, calc(8rem + ((min(1vw, 1cqi) - 0.2rem) * 5.357)), 14rem); /* Container max-widths */ --_spacing---container--xs: 28rem; /* 448px */ --_spacing---container--sm: 40rem; /* 640px */ --_spacing---container--md: 48rem; /* 768px */ --_spacing---container--lg: 64rem; /* 1024px */ --_spacing---container--xl: 80rem; /* 1280px */ --_spacing---container--xxl: 96rem; /* 1536px */ --_spacing---container--full: 100%; /* Page margin (gutter from viewport edge) */ --_spacing---page-margin: clamp(1rem, calc(1rem + ((min(1vw, 1cqi) - 0.2rem) * 2.232)), 3rem); /* ==================================================================== TIER 2 — LAYOUT ==================================================================== */ --_layout---column-count: 12; --_layout---gutter: var(--_spacing---step--4); --_layout---max-content: var(--_spacing---container--xl); --_layout---column-width: calc((min(var(--_layout---max-content), 100% - var(--_spacing---page-margin) * 2) - var(--_layout---gutter) * (var(--_layout---column-count) - 1)) / var(--_layout---column-count)); /* Breakout grid template — for full-bleed elements escaping the content column */ --_layout---breakout: [full-start] minmax(var(--_spacing---page-margin), 1fr) [content-start] repeat(var(--_layout---column-count), [col-start] minmax(0, var(--_layout---column-width)) [col-end]) [content-end] minmax(var(--_spacing---page-margin), 1fr) [full-end]; /* ==================================================================== TIER 2 — COLUMN COUNT (1..12 driver for grid systems) Single variable — utility classes rewrite it to switch grid count. ==================================================================== */ --_column-count---value: var(--_layout---column-count); /* ==================================================================== TIER 2 — GAP (single variable + 0..8 + gutter + inherit) ==================================================================== */ --_gap---size: var(--_layout---gutter); /* ==================================================================== TIER 2 — ALIGNMENT Single variable drives text-align + flex justify + flex/grid align ==================================================================== */ --_alignment---direction: start; /* v1.1: TIER 2 — BUTTON STYLE moved to the re-resolution scope rule below (see INDIRECTION TIERS) */ /* ==================================================================== TIER 2 — STATE / TRIGGER (LUMOS variable-inversion pattern) Flipped by [data-state] / [data-trigger] / :hover / :focus selectors. Components blend tokens via color-mix() weighted by these flags → state visual changes WITHOUT pseudo-class rules per element. ==================================================================== */ --_state---true: 0; /* Inverted by data-state="checked|open|active|expanded|current|external" */ --_state---false: 1; --_state---blend: 0; /* Convenience: 0 = false, 1 = true */ --_trigger---on: 0; /* Inverted by [data-flwr-trigger~="hover"]:hover, [data-flwr-trigger~="focus"]:focus-visible */ --_trigger---off: 1; --_trigger---blend: 0; /* v1.1: TIER 3 — COMPONENT moved to the re-resolution scope rule below (see INDIRECTION TIERS) */ /* ==================================================================== RUNTIME (private — flwr-rt namespace, authors should NOT touch) ==================================================================== */ --_flwr-rt---transition-fast: 120ms; --_flwr-rt---transition-medium: 240ms; --_flwr-rt---transition-slow: 400ms; --_flwr-rt---ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --_flwr-rt---ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --_flwr-rt---ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --_flwr-rt---ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* ==================================================================== TIER 2 — MOTION (durations + easing as first-class tokens) IX3 / GSAP can read these, ensures consistent motion language. ==================================================================== */ --_motion---duration-instant: 60ms; --_motion---duration-fast: 120ms; --_motion---duration-base: 240ms; --_motion---duration-slow: 400ms; --_motion---duration-slower: 600ms; --_motion---duration-slowest: 1000ms; --_motion---ease-linear: linear; --_motion---ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --_motion---ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --_motion---ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --_motion---ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --_motion---ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --_motion---ease-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55); --_motion---ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Motion primitives consumed by 3D + slide + scrollytelling components */ --_motion---perspective: 1200px; /* 3D depth for flip cards, parallax */ --_motion---blur-soft: 5px; /* gentle defocus (slide out, hover blur) */ --_motion---blur-strong: 12px; /* heavy defocus (modal scrims, bg blur) */ --_motion---distance-xs: 0.5rem; /* hover lift, micro-shifts */ --_motion---distance-sm: 1rem; /* small slide / parallax delta */ --_motion---distance-md: 2rem; /* default slide-in/out distance */ --_motion---distance-lg: 4rem; /* large reveal */ /* ==================================================================== TIER 2 — FOCUS (focus-ring offset, color, width, blur as separate tokens) ==================================================================== */ --_focus---ring-color: var(--_palette---focus--seed); --_focus---ring-width: 3px; --_focus---ring-offset: 2px; --_focus---ring-style: solid; --_focus---ring-blur: 0; --_focus---ring: 0 0 0 var(--_focus---ring-width) color-mix(in oklch, var(--_focus---ring-color) 40%, transparent); --_focus---outline-brand: 2px solid var(--_palette---core--500); --_focus---outline-accent: 2px solid var(--_palette---alternate--500); /* v1.1: alternate--core does not exist → invalid color voided the outline (dead focus ring); use the real 500 stop */ /* ==================================================================== TIER 2 — BORDER WIDTHS (numeric scale for flwr_* + utilities) ==================================================================== */ --_border---hairline: 1px; --_border---thin: 1px; --_border---base: 2px; --_border---thick: 3px; --_border---heavy: 4px; --_border---bold: 6px; --_border---max: 12px; /* ==================================================================== TIER 2 — RADIUS (corner-radius scale for flwr_* + utilities) v1.1: single canonical radius scale so components + f-radius-* utilities stop hardcoding rem values. Card radius re-points here (see below). ==================================================================== */ --_radius---xs: 0.25rem; --_radius---sm: 0.375rem; --_radius---md: 0.5rem; --_radius---lg: 0.75rem; --_radius---xl: 1rem; --_radius---full: 9999px; --_component---button--radius: var(--_radius---sm); /* ==================================================================== TIER 2 — STICKY SECTION (scrollytelling anchor defaults) Override per instance OR globally to retune any flwr_sticky_* layout. runway = padding-block-end on the wrap (extends scroll distance) trigger = inner trigger height (one viewport by default) element-h = the pinned element height element-top = top offset (raise this to clear a fixed nav) half = the .is-half modifier height ==================================================================== */ --_sticky---runway: 100vh; --_sticky---trigger: 100vh; --_sticky---element-h: 100vh; --_sticky---element-top: 0; --_sticky---half: 50vh; /* ==================================================================== TIER 2 — BREAKPOINT (viewport sizes as named tokens, for media-query reuse) Matches Webflow's native breakpoints: tiny ≤478, small ≤767, medium ≤991, large ≥992, xl ≥1280, xxl ≥1920. ==================================================================== */ --_breakpoint---tiny: 478px; --_breakpoint---small: 767px; --_breakpoint---medium: 991px; --_breakpoint---large: 1280px; --_breakpoint---xl: 1440px; --_breakpoint---xxl: 1920px; /* ==================================================================== TIER 2 — Z-INDEX SCALE (named tiers as tokens) ==================================================================== */ --_z---base: 0; --_z---raise: 1; --_z---raise-2: 2; --_z---raise-3: 3; --_z---dropdown: 1000; --_z---sticky: 1100; --_z---backdrop: 1150; /* v1.1: navbar/dropdown dimming backdrop — above sticky (1100), below nav bar + mobile menu (1200) so it never collides with the mobile menu */ --_z---nav: 1200; --_z---overlay: 1300; --_z---modal: 1400; --_z---popover: 1500; --_z---toast: 1600; --_z---tooltip: 1700; --_z---max: 9999; } /* ============================================================================ THEME MODE OVERRIDES (CSS fallback — Webflow Variable Modes take precedence) In paste flow, Jayson emits ---mode--collection-{themeUUID}: mode-{UUID} and these blocks become unnecessary. Kept for standalone CSS use. ============================================================================ */ /* Mode wrappers paint themselves AND explicitly redeclare every theme token so descendants using f-text-color-* / f-bg-* utilities resolve correctly, regardless of ambient parent context (light wrapper inside dark styleguide etc.) */ [data-flwr] .f-mode-light, [data-flwr].f-mode-light { background-color: var(--_palette---neutral--0); color: var(--_palette---neutral--900); --_theme---surface--main: var(--_palette---neutral--0); --_theme---surface--raised: var(--_palette---neutral--50); --_theme---surface--sunken: var(--_palette---neutral--100); --_theme---surface--inverse: var(--_palette---neutral--900); --_theme---text--main: var(--_palette---neutral--900); --_theme---text--strong: var(--_palette---neutral--1000); --_theme---text--muted: oklch(0.40 0.006 30); --_theme---text--subtle: oklch(0.55 0.006 30); --_theme---text--inverse: var(--_palette---neutral--0); --_theme---text--accent: var(--_palette---core--700); /* v1.2: see base block — 700 clears AA on neutral--0 */ --_theme---text--link: var(--_palette---core--700); --_theme---text--link-hover: var(--_palette---core--800); --_theme---border--subtle: var(--_palette---neutral--100); --_theme---border--main: var(--_palette---neutral--300); --_theme---border--strong: oklch(0.40 0.006 30); --_theme---accent--soft: var(--_palette---core--50); --_theme---accent--main: var(--_palette---core--500); --_theme---accent--hover: var(--_palette---core--600); --_theme---accent--active: var(--_palette---core--700); --_theme---accent--text: var(--_palette---neutral--900); /* v1.1: status + elevation redeclared so a light wrapper nested in a dark/brand ancestor resolves to light values (matches this block's stated invariant) */ --_theme---status--success: var(--_palette---success--main); --_theme---status--warning: var(--_palette---warning--main); --_theme---status--alert: var(--_palette---alert--500); --_theme---status--info: var(--_palette---info--main); --_theme---shadow--sm: 0 1px 2px var(--_palette---scrim--subtle); --_theme---shadow--md: 0 1px 2px var(--_palette---scrim--subtle), 0 8px 24px var(--_palette---scrim--subtle); --_theme---shadow--lg: 0 4px 8px var(--_palette---scrim--subtle), 0 16px 48px var(--_palette---scrim--strong); --_theme---elevation-ring: transparent; } [data-flwr] .f-mode-dark, [data-flwr].f-mode-dark { background-color: var(--_palette---neutral--900); color: var(--_palette---neutral--50); --_theme---surface--main: var(--_palette---neutral--900); --_theme---surface--raised: var(--_palette---neutral--800); --_theme---surface--sunken: var(--_palette---neutral--1000); --_theme---surface--inverse: var(--_palette---neutral--0); --_theme---surface--overlay: var(--_palette---overlay--dark); --_theme---text--main: var(--_palette---neutral--50); --_theme---text--strong: var(--_palette---neutral--0); --_theme---text--muted: var(--_palette---neutral--300); --_theme---text--subtle: var(--_palette---neutral--500); --_theme---text--inverse: var(--_palette---neutral--900); --_theme---text--accent: var(--_palette---core--300); --_theme---text--link: var(--_palette---core--300); --_theme---text--link-hover: var(--_palette---core--200); --_theme---border--subtle: var(--_palette---neutral--800); --_theme---border--main: var(--_palette---neutral--700); --_theme---border--strong: var(--_palette---neutral--500); --_theme---border--inverse: var(--_palette---neutral--900); --_theme---accent--soft: color-mix(in oklab, var(--_palette---core--500) 25%, var(--_palette---neutral--800)); /* v1.1: oklab — oklch hue-interpolates through red when mixing a chromatic accent with a near-neutral (322°→30° lands ~13° = maroon mud) */ --_theme---accent--main: var(--_palette---core--400); --_theme---accent--hover: var(--_palette---core--300); --_theme---accent--active: var(--_palette---core--200); --_theme---accent--text: var(--_palette---neutral--900); /* Selection: brighter accent on dark surface, deepest neutral for text contrast */ --_theme---selection--background: var(--_palette---core--400); --_theme---selection--text: var(--_palette---neutral--1000); /* v1.1: status lifted for dark surfaces (alert → lighter 400 stop; success/warning/info seeds are already high-lightness so --main reads on dark). Shadows built from the darkest neutral at higher alpha (scrim on a dark surface is too weak). Elevation ring = subtle text-tint so elevated components separate from the surface. */ --_theme---status--success: var(--_palette---success--main); --_theme---status--warning: var(--_palette---warning--main); --_theme---status--alert: var(--_palette---alert--400); --_theme---status--info: var(--_palette---info--main); --_theme---shadow--sm: 0 1px 2px color-mix(in oklch, var(--_palette---neutral--1000) 50%, transparent); --_theme---shadow--md: 0 2px 4px color-mix(in oklch, var(--_palette---neutral--1000) 45%, transparent), 0 8px 24px color-mix(in oklch, var(--_palette---neutral--1000) 55%, transparent); --_theme---shadow--lg: 0 4px 8px color-mix(in oklch, var(--_palette---neutral--1000) 50%, transparent), 0 16px 48px color-mix(in oklch, var(--_palette---neutral--1000) 65%, transparent); --_theme---elevation-ring: color-mix(in oklch, var(--_theme---text--main) 8%, transparent); } [data-flwr] .f-mode-brand, [data-flwr].f-mode-brand { /* Brand surface = core pink (LIGHT color, L 0.77) → text MUST be DARK for contrast */ background-color: var(--_palette---core--500); color: var(--_palette---neutral--900); --_theme---surface--main: var(--_palette---core--500); --_theme---surface--raised: var(--_palette---core--400); --_theme---surface--sunken: var(--_palette---core--600); --_theme---surface--inverse: var(--_palette---neutral--900); --_theme---text--main: var(--_palette---neutral--900); --_theme---text--strong: var(--_palette---neutral--1000); --_theme---text--muted: color-mix(in oklch, var(--_palette---neutral--900) 75%, transparent); --_theme---text--subtle: color-mix(in oklch, var(--_palette---neutral--900) 55%, transparent); --_theme---text--inverse: var(--_palette---neutral--0); --_theme---text--accent: var(--_palette---neutral--900); --_theme---text--link: var(--_palette---neutral--900); --_theme---text--link-hover: var(--_palette---neutral--1000); --_theme---border--subtle: color-mix(in oklch, var(--_palette---neutral--900) 18%, transparent); --_theme---border--main: color-mix(in oklch, var(--_palette---neutral--900) 35%, transparent); --_theme---border--strong: color-mix(in oklch, var(--_palette---neutral--900) 60%, transparent); /* In brand mode, accent buttons render dark surface + lime text (good contrast) */ --_theme---accent--main: var(--_palette---neutral--900); --_theme---accent--hover: var(--_palette---neutral--700); --_theme---accent--active: var(--_palette---neutral--800); --_theme---accent--text: var(--_palette---core--500); /* Selection: surface is already brand-color, so INVERT — deep neutral fill + brand text */ --_theme---selection--background: var(--_palette---neutral--900); --_theme---selection--text: var(--_palette---core--500); /* v1.1: brand surface is light lime → status colors use the bolder/darker stops so they stay legible (a green success would vanish into lime at --main). Shadows reuse the scrim scale (dark scrim reads on the light surface). Elevation ring = subtle dark text-tint. */ --_theme---status--success: var(--_palette---success--bold); --_theme---status--warning: var(--_palette---warning--bold); --_theme---status--alert: var(--_palette---alert--700); --_theme---status--info: var(--_palette---info--bold); --_theme---shadow--sm: 0 1px 2px var(--_palette---scrim--subtle); --_theme---shadow--md: 0 1px 2px var(--_palette---scrim--subtle), 0 8px 24px var(--_palette---scrim--subtle); --_theme---shadow--lg: 0 4px 8px var(--_palette---scrim--subtle), 0 16px 48px var(--_palette---scrim--strong); --_theme---elevation-ring: color-mix(in oklch, var(--_theme---text--main) 8%, transparent); } /* ============================================================================ SECTION THEME OVERRIDES (per-section palette swap, scoped via .f-section-*) ============================================================================ */ /* ============================================================================ v1.1 — INDIRECTION TIERS (section-theme defaults · button-style · component) ---------------------------------------------------------------------------- WHY THIS RULE EXISTS: custom properties substitute var() references at the element where they are DECLARED, and descendants inherit the RESOLVED value. Declared only on :root, these tiers pre-resolve against the LIGHT defaults, so a page with f-mode-dark on the [data-flwr] wrapper (the normal case — mode classes are forbidden on /) still painted light navbars, cards, badges, etc. Re-declaring the indirection tiers at every mode / density / section scope makes them re-resolve against that scope's theme. Placed BEFORE the .f-section-* override blocks so section overrides win. v1.2: the wrapper entry matches only the OUTERMOST [data-flwr] element. A bare [data-flwr] also matched every component root (data-flwr="marquee" etc.), which re-declared these tiers at its own scope and discarded any override an ancestor had set. :where keeps the specificity at 0,1,0. ============================================================================ */ :root, [data-flwr]:where(:not([data-flwr] [data-flwr])), [data-flwr].f-mode-light, [data-flwr].f-mode-dark, [data-flwr].f-mode-brand, [data-flwr] .f-mode-light, [data-flwr] .f-mode-dark, [data-flwr] .f-mode-brand, [data-flwr].f-density-compact, [data-flwr].f-density-spacious, [data-flwr] .f-density-compact, [data-flwr] .f-density-spacious, [data-flwr] .f-section-default, [data-flwr] .f-section-inverse, [data-flwr] .f-section-brand, [data-flwr] .f-section-subtle, [data-flwr] .f-section-accent-soft { /* ==================================================================== TIER 2 — SECTION THEME (per-section palette overrides) Modes: Default / Inverse / Brand / Subtle / Accent Soft (v1.1: 5 modes — name matches .f-section-accent-soft) Applied via .f-section-{default|inverse|brand|subtle|accent-soft} ==================================================================== */ --_section-theme---surface: var(--_theme---surface--main); --_section-theme---text: var(--_theme---text--main); --_section-theme---heading: var(--_theme---text--strong); --_section-theme---muted: var(--_theme---text--muted); --_section-theme---border: var(--_theme---border--subtle); --_section-theme---accent: var(--_theme---accent--main); --_section-theme---button-bg: var(--_theme---accent--main); --_section-theme---button-text: var(--_theme---accent--text); /* ==================================================================== TIER 2 — BUTTON STYLE (LUMOS-style indirection for component variants) One ruleset, infinite variants, just by rewriting these vars. ==================================================================== */ --_button-style---surface: var(--_theme---accent--main); --_button-style---surface-hover: var(--_theme---accent--hover); --_button-style---surface-active: var(--_theme---accent--active); --_button-style---text: var(--_theme---accent--text); --_button-style---text-hover: var(--_theme---accent--text); --_button-style---text-active: var(--_theme---accent--text); --_button-style---border: transparent; --_button-style---border-hover: transparent; --_button-style---border-active: transparent; --_button-style---ring: transparent; --_button-style---ring-focus: var(--_theme---focus--ring); /* ==================================================================== TIER 3 — COMPONENT (tokens for shipped components) ==================================================================== */ /* Card */ --_component---card--surface: var(--_theme---surface--raised); --_component---card--surface-hover: var(--_theme---surface--main); --_component---card--border: var(--_theme---border--subtle); --_component---card--border-hover: var(--_theme---border--main); --_component---card--text: var(--_theme---text--main); --_component---card--shadow: 0 1px 2px var(--_palette---scrim--subtle), 0 8px 24px var(--_palette---scrim--subtle); --_component---card--shadow-hover: 0 1px 2px var(--_palette---scrim--subtle), 0 16px 48px var(--_palette---scrim--strong); --_component---card--radius: var(--_radius---lg); /* v1.1: was 0.75rem — re-pointed to the radius scale (--_radius---lg === 0.75rem, identical computed value) */ --_component---card--padding: var(--_spacing---step--5); /* Card stack — direction-aware peek geometry used by flwr_card_stack_*. Each card behind shifts by (offset-x × direction-x, offset-y × direction-y), optionally scales down + fades. Default scale-step is 0 (no scale, like Dr. Mush) for the smoothest cycle animation — opt in by overriding. Cycle is a TWO-STEP "deck-riffle" motion: the top card winds up by translating OPPOSITE the peek direction (--wind-up-distance) for wind-up-duration, then is re-parented to the back. The natural transition between indices then slides every card to its new layer. */ --_component---card-stack--offset-x: var(--_spacing---step--3); --_component---card-stack--offset-y: var(--_spacing---step--3); --_component---card-stack--scale-step: 0; --_component---card-stack--opacity-step: 0.15; --_component---card-stack--max-depth: 3; --_component---card-stack--aspect-ratio: 4 / 5; --_component---card-stack--z-base: 10; --_component---card-stack--shadow-strength: 0.3; --_component---card-stack--wind-up-distance: 1; /* fraction of offset — 1.0 = same magnitude as a single layer offset (matches Dr. Mush's 10px-out-of-30) */ --_component---card-stack--cycle-duration: 500ms; /* matches Dr. Mush's 0.5s back-slide */ --_component---card-stack--wind-up-duration: 300ms; /* matches Dr. Mush's 0.3s wind-up */ --_component---card-stack--cycle-ease: cubic-bezier(0.25, 0.8, 0.25, 1); /* Dr. Mush's exact ease-out — softer than --_motion---ease-decelerate */ --_component---card-stack--wind-up-ease: ease-in-out; /* matches Dr. Mush exactly */ /* Marquee — flwr_marquee_*. Defaults are sane; data-flwr-marquee-{speed, direction, hover-pause, hover-ease, draggable, scale-text} override per instance. speed is "ms for one full cycle" — bigger = slower. */ --_component---marquee--speed: 20000ms; --_component---marquee--gap: var(--_spacing---step--5); --_component---marquee--hover-ease: 0.15; --_component---marquee--cursor-grab: grab; --_component---marquee--cursor-dragging: grabbing; /* Swiper — flwr_swiper_*. Wraps Swiper.js (loaded by user) with sane flwr-themed defaults for navigation arrows, pagination dots, edges. */ --_component---swiper--speed: 600; /* unitless ms — Swiper expects a number */ --_component---swiper--autoplay-delay: 4000; /* idem */ --_component---swiper--gap: var(--_spacing---step--4); --_component---swiper--arrow-size: 2.75rem; --_component---swiper--arrow-bg: var(--_theme---surface--main); --_component---swiper--arrow-bg-hover: var(--_theme---surface--raised); --_component---swiper--arrow-color: var(--_theme---text--main); --_component---swiper--arrow-border: 1px solid var(--_theme---border--subtle); --_component---swiper--bullet-size: 0.5rem; --_component---swiper--bullet-active-w: 1.5rem; --_component---swiper--bullet-bg: var(--_theme---border--main); --_component---swiper--bullet-active-bg: var(--_theme---accent--main); /* Map — flwr_map_*. Theme-aware Leaflet wrapper. Override per instance via data-flwr-map-theme="dark|light|voyager" and data-flwr-map-tint= "duotone-light|duotone-dark|duotone-brand". */ --_component---map--bg: var(--_theme---surface--inverse); --_component---map--popup-bg: var(--_theme---surface--main); --_component---map--accent: var(--_theme---accent--main); --_component---map--text: var(--_theme---text--main); --_component---map--text-muted: var(--_theme---text--muted); --_component---map--border: var(--_theme---border--subtle); --_component---map--marker-size: 1.25rem; --_component---map--popup-radius: var(--_component---card--radius); /* Scrubber — flwr_scrubber_*. Hover-driven image-sequence player. */ --_component---scrubber--fade-duration: 150ms; --_component---scrubber--fade-ease: linear; --_component---scrubber--cursor: ew-resize; /* Vertical tabs — flwr_tabs_* with .is-vertical modifier */ --_component---tabs-vertical--sidebar-width: 16rem; --_component---tabs-vertical--gap: var(--_spacing---step--6); --_component---tabs-vertical--trigger-pad: var(--_spacing---step--3); --_component---tabs-vertical--indicator-w: 3px; --_component---tabs-vertical--indicator-color: var(--_theme---accent--main); /* Document search — flwr_search_* */ --_component---search--bar-pad-block: var(--_spacing---step--3); --_component---search--bar-pad-inline: var(--_spacing---step--4); --_component---search--bar-radius: 9999px; --_component---search--bar-bg: var(--_theme---surface--raised); --_component---search--bar-border: var(--_theme---border--main); --_component---search--icon-size: 1rem; --_component---search--highlight-bg: color-mix(in oklch, var(--_theme---accent--main) 35%, transparent); --_component---search--highlight-active: var(--_theme---accent--main); --_component---search--highlight-text: var(--_theme---accent--text); /* Full-screen menu — flwr_fullscreen_menu_* */ --_component---fsmenu--surface: var(--_theme---surface--inverse); --_component---fsmenu--text: var(--_theme---text--inverse); --_component---fsmenu--accent: var(--_palette---core--400); --_component---fsmenu--padding: var(--_spacing---step--7); --_component---fsmenu--link-size: var(--_typography---size--h1); --_component---fsmenu--link-gap: var(--_spacing---step--3); --_component---fsmenu--enter-duration: 400ms; --_component---fsmenu--enter-ease: var(--_motion---ease-emphasized); /* Toggle variants — extends flwr_toggle_* */ --_component---toggle-position--track-w: 5rem; --_component---toggle-position--track-h: 2.5rem; --_component---toggle-position--circle: 1.5rem; --_component---toggle-position--border: 2px; --_component---toggle-position--accent: var(--_theme---accent--main); --_component---toggle-position--duration: var(--_motion---duration-base); --_component---toggle-bulb--size: 1.4rem; --_component---toggle-bulb--border: 2px; --_component---toggle-bulb--accent: var(--_theme---accent--main); --_component---toggle-bulb--glow-strength: 0.6; /* Card overlay — flwr_card_overlay_* */ --_component---card-overlay--corner-size: 3rem; --_component---card-overlay--corner-bg: var(--_theme---accent--main); --_component---card-overlay--corner-color: var(--_theme---accent--text); --_component---card-overlay--scrim: color-mix(in oklch, var(--_palette---neutral--1000) 75%, transparent); --_component---card-overlay--text: var(--_palette---neutral--0); --_component---card-overlay--duration: var(--_motion---duration-base); --_component---card-overlay--ease: var(--_motion---ease-emphasized); --_component---card-overlay--pad: var(--_spacing---step--5); /* Navbar — flwr_navbar_* (extends flwr_nav_main with banner + dropdowns) */ --_component---navbar--height: 4.5rem; --_component---navbar--banner-height: 2rem; --_component---navbar--height-total: calc(var(--_component---navbar--height) + var(--_component---navbar--banner-height)); --_component---navbar--surface: var(--_theme---surface--main); --_component---navbar--surface-scrolled: color-mix(in oklch, var(--_theme---surface--main) 92%, transparent); --_component---navbar--text: var(--_theme---text--main); --_component---navbar--accent: var(--_theme---accent--main); --_component---navbar--border: var(--_theme---border--subtle); --_component---navbar--mobile-bp: 65em; --_component---navbar--dropdown-open-duration: 300ms; --_component---navbar--dropdown-close-duration: 200ms; --_component---navbar--menu-open-duration: 400ms; --_component---navbar--menu-close-duration: 300ms; /* Collapse — animated height-auto via grid-template-rows trick. Used by accordion items, dropdown panels, expand-collapse cards. */ --_component---collapse--duration: var(--_motion---duration-base); --_component---collapse--ease: var(--_motion---ease-standard); /* Grid breakout single — alternative to --_layout---breakout for sites that don't need named column tracks; just full-bleed escape from container padding via [full-start] / [content-start] / [content-end] / [full-end] line names. */ --_layout---breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--_spacing---page-margin) * 2)) [content-end] minmax(0, 1fr) [full-end]; /* Field (form input) */ --_component---field--surface: var(--_theme---surface--main); --_component---field--surface-hover: var(--_theme---surface--raised); --_component---field--border: var(--_theme---border--main); --_component---field--border-hover: var(--_theme---border--strong); --_component---field--border-focus: var(--_theme---border--focus); --_component---field--text: var(--_theme---text--main); --_component---field--placeholder: var(--_theme---text--subtle); --_component---field--ring-focus: var(--_theme---focus--ring); --_component---field--radius: 0.5rem; --_component---field--padding-block: var(--_spacing---step--3); --_component---field--padding-inline: var(--_spacing---step--4); /* Nav */ --_component---nav--surface: var(--_theme---surface--main); --_component---nav--text: var(--_theme---text--main); --_component---nav--text-hover: var(--_theme---text--accent); --_component---nav--border: var(--_theme---border--subtle); --_component---nav--height: 4rem; --_component---nav--blur: 12px; /* Dialog */ --_component---dialog--surface: var(--_theme---surface--main); --_component---dialog--scrim: var(--_palette---scrim--strong); --_component---dialog--radius: 1rem; --_component---dialog--shadow: 0 24px 64px var(--_palette---scrim--strong); /* Tooltip */ --_component---tooltip--surface: var(--_theme---surface--inverse); --_component---tooltip--text: var(--_theme---text--inverse); --_component---tooltip--radius: 0.375rem; /* Tag */ --_component---tag--surface: var(--_theme---accent--soft); --_component---tag--surface-hover: var(--_theme---accent--main); --_component---tag--text: var(--_theme---text--accent); --_component---tag--text-hover: var(--_theme---accent--text); --_component---tag--border: transparent; --_component---tag--radius: 9999px; /* Toggle */ --_component---toggle--surface-off: var(--_theme---border--main); --_component---toggle--surface-on: var(--_theme---accent--main); --_component---toggle--knob: var(--_theme---surface--main); } [data-flwr] .f-section-default { --_section-theme---surface: var(--_theme---surface--main); --_section-theme---text: var(--_theme---text--main); --_section-theme---heading: var(--_theme---text--strong); --_section-theme---muted: var(--_theme---text--muted); --_section-theme---border: var(--_theme---border--subtle); --_section-theme---accent: var(--_theme---accent--main); --_section-theme---button-bg: var(--_theme---accent--main); --_section-theme---button-text: var(--_theme---accent--text); background-color: var(--_section-theme---surface); color: var(--_section-theme---text); } [data-flwr] .f-section-inverse { --_section-theme---surface: var(--_theme---surface--inverse); --_section-theme---text: var(--_theme---text--inverse); --_section-theme---heading: var(--_theme---text--inverse); --_section-theme---muted: color-mix(in oklch, var(--_theme---text--inverse) 75%, transparent); --_section-theme---border: color-mix(in oklch, var(--_theme---text--inverse) 20%, transparent); --_section-theme---accent: var(--_palette---core--300); --_section-theme---button-bg: var(--_theme---accent--main); /* v1.1: was surface--main, which the remap below flips — accent buttons read correctly on the inverted surface */ --_section-theme---button-text: var(--_theme---accent--text); /* v1.1: COMPOSITION FIX — remap the core theme tokens so f-text-color-* / f-bg-* utilities and (indirection-re-resolved) component tokens adapt inside the section. RHS only references tokens NOT redeclared on this element (cycle-safe). Nested double-inverse does not re-invert (known limitation, documented). */ --_theme---surface--main: var(--_theme---surface--inverse); --_theme---surface--raised: color-mix(in oklab, var(--_theme---surface--inverse) 97%, var(--_theme---text--inverse)); --_theme---surface--sunken: color-mix(in oklab, var(--_theme---surface--inverse) 93%, var(--_theme---text--inverse)); --_theme---text--main: var(--_theme---text--inverse); --_theme---text--strong: var(--_theme---text--inverse); --_theme---text--muted: color-mix(in oklch, var(--_theme---text--inverse) 72%, transparent); --_theme---text--subtle: color-mix(in oklch, var(--_theme---text--inverse) 55%, transparent); --_theme---border--subtle: color-mix(in oklch, var(--_theme---text--inverse) 15%, transparent); --_theme---border--main: color-mix(in oklch, var(--_theme---text--inverse) 30%, transparent); --_theme---border--strong: color-mix(in oklch, var(--_theme---text--inverse) 55%, transparent); /* Selection on dark section: brighter accent + deep neutral text */ --_theme---selection--background: var(--_palette---core--300); --_theme---selection--text: var(--_palette---neutral--1000); background-color: var(--_section-theme---surface); color: var(--_section-theme---text); } [data-flwr] .f-section-brand { --_section-theme---surface: var(--_theme---accent--main); --_section-theme---text: var(--_theme---accent--text); --_section-theme---heading: var(--_theme---accent--text); --_section-theme---muted: color-mix(in oklch, var(--_theme---accent--text) 80%, transparent); --_section-theme---border: color-mix(in oklch, var(--_theme---accent--text) 25%, transparent); --_section-theme---accent: var(--_theme---accent--text); --_section-theme---button-bg: var(--_theme---accent--text); --_section-theme---button-text: var(--_theme---accent--main); /* v1.1: COMPOSITION FIX — see .f-section-inverse note. RHS references only accent--main/accent--text, which this block does not redeclare. */ --_theme---surface--main: var(--_theme---accent--main); --_theme---surface--raised: color-mix(in oklab, var(--_theme---accent--main) 94%, var(--_theme---accent--text)); --_theme---surface--sunken: color-mix(in oklab, var(--_theme---accent--main) 88%, var(--_theme---accent--text)); --_theme---text--main: var(--_theme---accent--text); --_theme---text--strong: var(--_theme---accent--text); --_theme---text--muted: color-mix(in oklch, var(--_theme---accent--text) 78%, transparent); --_theme---border--subtle: color-mix(in oklch, var(--_theme---accent--text) 20%, transparent); --_theme---border--main: color-mix(in oklch, var(--_theme---accent--text) 35%, transparent); /* Selection on accent-fill section: INVERT — text-color fills, accent paints text */ --_theme---selection--background: var(--_theme---accent--text); --_theme---selection--text: var(--_theme---accent--main); background-color: var(--_section-theme---surface); color: var(--_section-theme---text); } [data-flwr] .f-section-subtle { --_section-theme---surface: var(--_theme---surface--sunken); --_section-theme---text: var(--_theme---text--main); --_section-theme---heading: var(--_theme---text--strong); --_section-theme---muted: var(--_theme---text--muted); --_section-theme---border: var(--_theme---border--main); --_section-theme---accent: var(--_theme---accent--main); /* v1.1: COMPOSITION FIX — surface utilities inside a subtle section sit on the sunken tone (text tokens unchanged; sunken not redeclared here). */ --_theme---surface--main: var(--_theme---surface--sunken); background-color: var(--_section-theme---surface); color: var(--_section-theme---text); } [data-flwr] .f-section-accent-soft { --_section-theme---surface: var(--_theme---accent--soft); --_section-theme---text: var(--_theme---text--main); --_section-theme---heading: var(--_theme---text--strong); --_section-theme---accent: var(--_theme---accent--main); /* v1.1: COMPOSITION FIX — surface utilities inside sit on the soft wash (accent--soft not redeclared here; text tokens unchanged). */ --_theme---surface--main: var(--_theme---accent--soft); /* Selection on soft accent wash: full accent fill for punch */ --_theme---selection--background: var(--_theme---accent--main); --_theme---selection--text: var(--_theme---accent--text); background-color: var(--_section-theme---surface); color: var(--_section-theme---text); } /* ============================================================================ SPACING DENSITY MODES (Compact / Spacious overrides for entire scale) ============================================================================ */ [data-flwr] .f-density-compact, [data-flwr].f-density-compact { --_spacing---step--1: clamp(0.1875rem, calc(0.1875rem + ((min(1vw, 1cqi) - 0.2rem) * 0.134)), 0.28rem); --_spacing---step--2: clamp(0.375rem, calc(0.375rem + ((min(1vw, 1cqi) - 0.2rem) * 0.134)), 0.47rem); --_spacing---step--3: clamp(0.5625rem, calc(0.5625rem + ((min(1vw, 1cqi) - 0.2rem) * 0.268)), 0.75rem); --_spacing---step--4: clamp(0.75rem, calc(0.75rem + ((min(1vw, 1cqi) - 0.2rem) * 0.268)), 0.94rem); --_spacing---step--5: clamp(0.9375rem, calc(0.9375rem + ((min(1vw, 1cqi) - 0.2rem) * 0.335)), 1.22rem); --_spacing---step--6: clamp(1.125rem, calc(1.125rem + ((min(1vw, 1cqi) - 0.2rem) * 0.469)), 1.5rem); --_spacing---step--7: clamp(1.5rem, calc(1.5rem + ((min(1vw, 1cqi) - 0.2rem) * 0.670)), 2.06rem); --_spacing---step--8: clamp(1.875rem, calc(1.875rem + ((min(1vw, 1cqi) - 0.2rem) * 0.938)), 2.625rem); } [data-flwr] .f-density-spacious, [data-flwr].f-density-spacious { --_spacing---step--1: clamp(0.3rem, calc(0.3rem + ((min(1vw, 1cqi) - 0.2rem) * 0.215)), 0.45rem); --_spacing---step--2: clamp(0.6rem, calc(0.6rem + ((min(1vw, 1cqi) - 0.2rem) * 0.215)), 0.75rem); --_spacing---step--3: clamp(0.9rem, calc(0.9rem + ((min(1vw, 1cqi) - 0.2rem) * 0.428)), 1.2rem); --_spacing---step--4: clamp(1.2rem, calc(1.2rem + ((min(1vw, 1cqi) - 0.2rem) * 0.428)), 1.5rem); --_spacing---step--5: clamp(1.5rem, calc(1.5rem + ((min(1vw, 1cqi) - 0.2rem) * 0.535)), 1.95rem); --_spacing---step--6: clamp(1.8rem, calc(1.8rem + ((min(1vw, 1cqi) - 0.2rem) * 0.750)), 2.4rem); --_spacing---step--7: clamp(2.4rem, calc(2.4rem + ((min(1vw, 1cqi) - 0.2rem) * 1.072)), 3.3rem); --_spacing---step--8: clamp(3rem, calc(3rem + ((min(1vw, 1cqi) - 0.2rem) * 1.500)), 4.2rem); } /* ============================================================================ LAYOUT MODES (site-wide switch — flips ALL containers + page margin at once) ---------------------------------------------------------------------------- Apply ONE class to root wrapper (or ): .f-layout-constrained Default. Containers use named max-widths. Page-margin gutter. .f-layout-wide Content cap bumped from xl (80rem) to xxl (96rem). Same gutter. .f-layout-narrow Content cap reduced (md = 48rem). Reading-optimized sites. .f-layout-fluid Containers stretch to (100% - 2 × page-margin). No max cap. .f-layout-edge True edge-to-edge: containers = 100% AND page-margin = 0. This is a real gap in LUMOS (which only has per-section .u-container-full) and Client-First (no concept). One class on body changes the entire site. ============================================================================ */ [data-flwr] .f-layout-constrained, [data-flwr].f-layout-constrained { /* default — explicit for completeness */ --_spacing---container--xs: 28rem; --_spacing---container--sm: 40rem; --_spacing---container--md: 48rem; --_spacing---container--lg: 64rem; --_spacing---container--xl: 80rem; --_spacing---container--xxl: 96rem; --_spacing---container--full: 100%; --_spacing---page-margin: clamp(1rem, calc(1rem + ((min(1vw, 1cqi) - 0.2rem) * 2.232)), 3rem); --_layout---max-content: var(--_spacing---container--xl); } [data-flwr] .f-layout-wide, [data-flwr].f-layout-wide { /* Bump default content cap from xl → xxl */ --_spacing---container--md: 56rem; --_spacing---container--lg: 72rem; --_spacing---container--xl: 96rem; --_spacing---container--xxl: 112rem; --_layout---max-content: var(--_spacing---container--xl); } [data-flwr] .f-layout-narrow, [data-flwr].f-layout-narrow { /* Reading-first sites — pulls every container in */ --_spacing---container--md: 40rem; --_spacing---container--lg: 48rem; --_spacing---container--xl: 56rem; --_spacing---container--xxl: 64rem; --_layout---max-content: var(--_spacing---container--lg); } [data-flwr] .f-layout-fluid, [data-flwr].f-layout-fluid { /* No hard max-content; respects page-margin gutter */ --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_spacing---container--full: 100%; --_layout---max-content: 100%; } [data-flwr] .f-layout-edge, [data-flwr].f-layout-edge { /* True edge-to-edge — kills page margin too. Useful for art-directed sites, full-bleed dashboards, immersive landings. Section-level f-page-margin can still re-add gutter on individual sections that need it. */ --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_spacing---container--full: 100%; --_spacing---page-margin: 0px; --_layout---max-content: 100%; --_layout---gutter: var(--_spacing---step--3); } /* Responsive layout-mode variants — flip the whole site at a breakpoint. Pattern: f-layout-{mode}-on-{tablet|mobile|mobile-portrait} Example: site is constrained on desktop, edge-to-edge on mobile: */ @media (max-width: 991px) { [data-flwr] .f-layout-fluid-on-tablet, [data-flwr].f-layout-fluid-on-tablet { --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_layout---max-content: 100%; } [data-flwr] .f-layout-edge-on-tablet, [data-flwr].f-layout-edge-on-tablet { --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_spacing---page-margin: 0px; --_layout---max-content: 100%; } } @media (max-width: 767px) { [data-flwr] .f-layout-fluid-on-mobile, [data-flwr].f-layout-fluid-on-mobile { --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_layout---max-content: 100%; } [data-flwr] .f-layout-edge-on-mobile, [data-flwr].f-layout-edge-on-mobile { --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_spacing---page-margin: 0px; --_layout---max-content: 100%; } [data-flwr] .f-layout-narrow-on-mobile, [data-flwr].f-layout-narrow-on-mobile { --_spacing---container--md: 28rem; --_spacing---container--lg: 32rem; --_spacing---container--xl: 36rem; --_spacing---container--xxl: 40rem; } } @media (max-width: 478px) { [data-flwr] .f-layout-edge-on-mobile-portrait, [data-flwr].f-layout-edge-on-mobile-portrait { --_spacing---container--xs: 100%; --_spacing---container--sm: 100%; --_spacing---container--md: 100%; --_spacing---container--lg: 100%; --_spacing---container--xl: 100%; --_spacing---container--xxl: 100%; --_spacing---page-margin: 0px; --_layout---max-content: 100%; } } /* ============================================================================ STATE / TRIGGER FLIPS (LUMOS pattern — variable inversion via data attrs) ============================================================================ */ [data-flwr] [data-flwr-state~="checked"], [data-flwr] [data-flwr-state~="open"], [data-flwr] [data-flwr-state~="active"], [data-flwr] [data-flwr-state~="expanded"], [data-flwr] [data-flwr-state~="current"], [data-flwr] [data-flwr-state~="external"] { --_state---true: 1; --_state---false: 0; --_state---blend: 1; } [data-flwr] [data-flwr-trigger~="hover"]:hover, [data-flwr] [data-flwr-trigger~="focus"]:focus-visible, [data-flwr] [data-flwr-trigger~="active"]:active { --_trigger---on: 1; --_trigger---off: 0; --_trigger---blend: 1; } [data-flwr] [data-flwr-trigger~="group"]:hover [data-flwr-trigger~="member"], [data-flwr] [data-flwr-trigger~="group"]:focus-within [data-flwr-trigger~="member"] { --_trigger---on: 1; --_trigger---off: 0; --_trigger---blend: 1; } /* ============================================================================ REDUCED MOTION (accessibility default) ============================================================================ */ @media (prefers-reduced-motion: reduce) { /* v1.1: brand-critical motion (tickers, preloaders) opts out via data-flwr-motion="keep" — the marked element AND its subtree keep motion */ [data-flwr] *:not([data-flwr-motion~="keep"]):not([data-flwr-motion~="keep"] *), [data-flwr] *:not([data-flwr-motion~="keep"]):not([data-flwr-motion~="keep"] *)::before, [data-flwr] *:not([data-flwr-motion~="keep"]):not([data-flwr-motion~="keep"] *)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== .flwr/styles/utilities.css (flwr Run) ===== */ /* ============================================================================ Flower v1.0 — Utilities (f-* prefix) ---------------------------------------------------------------------------- 719 utility classes (737 catalogued in classes.json; see the drift audit). Every utility reads from the token system — change a token, all utilities that consume it update at once. Known exception: f-radius-* still hardcodes rem values instead of the --_radius--- scale. Converter note: 191 of these rules use shorthand (padding, margin, gap, inset, border-radius, overflow…). Webflow styleLess wants longhand; the longhand rewrite is P0 in the 2026-08-28 inspection. ============================================================================ */ /* ==================================================================== STRUCTURE ==================================================================== */ [data-flwr] .f-page-wrap { display: block; } [data-flwr] .f-main-wrap { display: block; } /* ---- Page baseline — the browser-default normalization flwr pages rely on. v1.1: box-sizing:border-box is already set on [data-flwr] + descendants in tokens.css (not repeated here). This adds the rest of the gaps N58 hand-patched five separate times: the font/color/surface baseline (so an un-classed page still renders in-brand instead of Times-on-white), the UA 8px margin kill, and the stacked heading/paragraph/list margin reset (flwr owns vertical rhythm via gap + spacing utilities; UA margins double up with those gaps). Applies to the [data-flwr] wrapper and the .f-page class so either can be the page root. v1.2: only the OUTERMOST [data-flwr] element matches (:where keeps the specificity at 0,1,0). Component roots carry data-flwr="" and must inherit from their context, not be repainted surface--main and reset to the body size. */ [data-flwr]:where(:not([data-flwr] [data-flwr])), [data-flwr] .f-page { font-family: var(--_typography---family--sans); color: var(--_theme---text--main); background-color: var(--_theme---surface--main); font-size: var(--_typography---size--body); line-height: var(--_typography---leading--normal); -webkit-font-smoothing: antialiased; } [data-flwr] h1, [data-flwr] h2, [data-flwr] h3, [data-flwr] h4, [data-flwr] h5, [data-flwr] h6, [data-flwr] p, [data-flwr] ul, [data-flwr] ol, [data-flwr] figure, [data-flwr] blockquote { margin-top: 0; margin-bottom: 0; } body:has([data-flwr]) { margin: 0; } [data-flwr] .f-section { padding-block: var(--_spacing---section--md); } [data-flwr] .f-section-xs { padding-block: var(--_spacing---section--xs); } [data-flwr] .f-section-sm { padding-block: var(--_spacing---section--sm); } [data-flwr] .f-section-md { padding-block: var(--_spacing---section--md); } [data-flwr] .f-section-lg { padding-block: var(--_spacing---section--lg); } [data-flwr] .f-section-xl { padding-block: var(--_spacing---section--xl); } [data-flwr] .f-section-page-top { padding-block-start: var(--_spacing---section--page-top); } [data-flwr] .f-page-margin { padding-inline: var(--_spacing---page-margin); } [data-flwr] .f-page-margin-x0 { padding-inline: 0; } [data-flwr] .f-container, [data-flwr] .f-container-md { max-width: var(--_spacing---container--md); margin-inline: auto; container: threshold-md / inline-size; } [data-flwr] .f-container-xs { max-width: var(--_spacing---container--xs); margin-inline: auto; container: threshold-sm / inline-size; } [data-flwr] .f-container-sm { max-width: var(--_spacing---container--sm); margin-inline: auto; container: threshold-sm / inline-size; } [data-flwr] .f-container-lg { max-width: var(--_spacing---container--lg); margin-inline: auto; container: threshold-lg / inline-size; } [data-flwr] .f-container-xl { max-width: var(--_spacing---container--xl); margin-inline: auto; container: threshold-lg / inline-size; } [data-flwr] .f-container-xxl { max-width: var(--_spacing---container--xxl); margin-inline: auto; container: threshold-lg / inline-size; } [data-flwr] .f-container-full { max-width: 100%; container: threshold-lg / inline-size; } [data-flwr] .f-content-wrapper { display: flex; flex-direction: column; gap: var(--_spacing---step--5); align-items: var(--_alignment---direction); text-align: var(--_alignment---direction); } /* ==================================================================== SPACING — padding & margin (numeric scale 0..8 + auto) ==================================================================== */ /* Padding all sides */ [data-flwr] .f-padding-0 { padding: var(--_spacing---step--0); } [data-flwr] .f-padding-1 { padding: var(--_spacing---step--1); } [data-flwr] .f-padding-2 { padding: var(--_spacing---step--2); } [data-flwr] .f-padding-3 { padding: var(--_spacing---step--3); } [data-flwr] .f-padding-4 { padding: var(--_spacing---step--4); } [data-flwr] .f-padding-5 { padding: var(--_spacing---step--5); } [data-flwr] .f-padding-6 { padding: var(--_spacing---step--6); } [data-flwr] .f-padding-7 { padding: var(--_spacing---step--7); } [data-flwr] .f-padding-8 { padding: var(--_spacing---step--8); } /* Padding axes */ [data-flwr] .f-padding-x-0 { padding-inline: var(--_spacing---step--0); } [data-flwr] .f-padding-x-1 { padding-inline: var(--_spacing---step--1); } [data-flwr] .f-padding-x-2 { padding-inline: var(--_spacing---step--2); } [data-flwr] .f-padding-x-3 { padding-inline: var(--_spacing---step--3); } [data-flwr] .f-padding-x-4 { padding-inline: var(--_spacing---step--4); } [data-flwr] .f-padding-x-5 { padding-inline: var(--_spacing---step--5); } [data-flwr] .f-padding-x-6 { padding-inline: var(--_spacing---step--6); } [data-flwr] .f-padding-x-7 { padding-inline: var(--_spacing---step--7); } [data-flwr] .f-padding-x-8 { padding-inline: var(--_spacing---step--8); } [data-flwr] .f-padding-y-0 { padding-block: var(--_spacing---step--0); } [data-flwr] .f-padding-y-1 { padding-block: var(--_spacing---step--1); } [data-flwr] .f-padding-y-2 { padding-block: var(--_spacing---step--2); } [data-flwr] .f-padding-y-3 { padding-block: var(--_spacing---step--3); } [data-flwr] .f-padding-y-4 { padding-block: var(--_spacing---step--4); } [data-flwr] .f-padding-y-5 { padding-block: var(--_spacing---step--5); } [data-flwr] .f-padding-y-6 { padding-block: var(--_spacing---step--6); } [data-flwr] .f-padding-y-7 { padding-block: var(--_spacing---step--7); } [data-flwr] .f-padding-y-8 { padding-block: var(--_spacing---step--8); } /* Padding sides */ [data-flwr] .f-padding-top-0 { padding-block-start: var(--_spacing---step--0); } [data-flwr] .f-padding-top-1 { padding-block-start: var(--_spacing---step--1); } [data-flwr] .f-padding-top-2 { padding-block-start: var(--_spacing---step--2); } [data-flwr] .f-padding-top-3 { padding-block-start: var(--_spacing---step--3); } [data-flwr] .f-padding-top-4 { padding-block-start: var(--_spacing---step--4); } [data-flwr] .f-padding-top-5 { padding-block-start: var(--_spacing---step--5); } [data-flwr] .f-padding-top-6 { padding-block-start: var(--_spacing---step--6); } [data-flwr] .f-padding-top-7 { padding-block-start: var(--_spacing---step--7); } [data-flwr] .f-padding-top-8 { padding-block-start: var(--_spacing---step--8); } [data-flwr] .f-padding-bottom-0 { padding-block-end: var(--_spacing---step--0); } [data-flwr] .f-padding-bottom-1 { padding-block-end: var(--_spacing---step--1); } [data-flwr] .f-padding-bottom-2 { padding-block-end: var(--_spacing---step--2); } [data-flwr] .f-padding-bottom-3 { padding-block-end: var(--_spacing---step--3); } [data-flwr] .f-padding-bottom-4 { padding-block-end: var(--_spacing---step--4); } [data-flwr] .f-padding-bottom-5 { padding-block-end: var(--_spacing---step--5); } [data-flwr] .f-padding-bottom-6 { padding-block-end: var(--_spacing---step--6); } [data-flwr] .f-padding-bottom-7 { padding-block-end: var(--_spacing---step--7); } [data-flwr] .f-padding-bottom-8 { padding-block-end: var(--_spacing---step--8); } [data-flwr] .f-padding-left-0 { padding-inline-start: var(--_spacing---step--0); } [data-flwr] .f-padding-left-1 { padding-inline-start: var(--_spacing---step--1); } [data-flwr] .f-padding-left-2 { padding-inline-start: var(--_spacing---step--2); } [data-flwr] .f-padding-left-3 { padding-inline-start: var(--_spacing---step--3); } [data-flwr] .f-padding-left-4 { padding-inline-start: var(--_spacing---step--4); } [data-flwr] .f-padding-left-5 { padding-inline-start: var(--_spacing---step--5); } [data-flwr] .f-padding-left-6 { padding-inline-start: var(--_spacing---step--6); } [data-flwr] .f-padding-left-7 { padding-inline-start: var(--_spacing---step--7); } [data-flwr] .f-padding-left-8 { padding-inline-start: var(--_spacing---step--8); } [data-flwr] .f-padding-right-0 { padding-inline-end: var(--_spacing---step--0); } [data-flwr] .f-padding-right-1 { padding-inline-end: var(--_spacing---step--1); } [data-flwr] .f-padding-right-2 { padding-inline-end: var(--_spacing---step--2); } [data-flwr] .f-padding-right-3 { padding-inline-end: var(--_spacing---step--3); } [data-flwr] .f-padding-right-4 { padding-inline-end: var(--_spacing---step--4); } [data-flwr] .f-padding-right-5 { padding-inline-end: var(--_spacing---step--5); } [data-flwr] .f-padding-right-6 { padding-inline-end: var(--_spacing---step--6); } [data-flwr] .f-padding-right-7 { padding-inline-end: var(--_spacing---step--7); } [data-flwr] .f-padding-right-8 { padding-inline-end: var(--_spacing---step--8); } /* Margin all sides + auto */ [data-flwr] .f-margin-0 { margin: var(--_spacing---step--0); } [data-flwr] .f-margin-1 { margin: var(--_spacing---step--1); } [data-flwr] .f-margin-2 { margin: var(--_spacing---step--2); } [data-flwr] .f-margin-3 { margin: var(--_spacing---step--3); } [data-flwr] .f-margin-4 { margin: var(--_spacing---step--4); } [data-flwr] .f-margin-5 { margin: var(--_spacing---step--5); } [data-flwr] .f-margin-6 { margin: var(--_spacing---step--6); } [data-flwr] .f-margin-7 { margin: var(--_spacing---step--7); } [data-flwr] .f-margin-8 { margin: var(--_spacing---step--8); } [data-flwr] .f-margin-auto { margin: auto; } /* Margin axes */ [data-flwr] .f-margin-x-auto { margin-inline: auto; } [data-flwr] .f-margin-x-0 { margin-inline: var(--_spacing---step--0); } [data-flwr] .f-margin-x-3 { margin-inline: var(--_spacing---step--3); } [data-flwr] .f-margin-x-4 { margin-inline: var(--_spacing---step--4); } [data-flwr] .f-margin-x-5 { margin-inline: var(--_spacing---step--5); } [data-flwr] .f-margin-y-0 { margin-block: var(--_spacing---step--0); } [data-flwr] .f-margin-y-3 { margin-block: var(--_spacing---step--3); } [data-flwr] .f-margin-y-4 { margin-block: var(--_spacing---step--4); } [data-flwr] .f-margin-y-5 { margin-block: var(--_spacing---step--5); } [data-flwr] .f-margin-y-6 { margin-block: var(--_spacing---step--6); } /* Margin sides */ [data-flwr] .f-margin-top-0 { margin-block-start: var(--_spacing---step--0); } [data-flwr] .f-margin-top-1 { margin-block-start: var(--_spacing---step--1); } [data-flwr] .f-margin-top-2 { margin-block-start: var(--_spacing---step--2); } [data-flwr] .f-margin-top-3 { margin-block-start: var(--_spacing---step--3); } [data-flwr] .f-margin-top-4 { margin-block-start: var(--_spacing---step--4); } [data-flwr] .f-margin-top-5 { margin-block-start: var(--_spacing---step--5); } [data-flwr] .f-margin-top-6 { margin-block-start: var(--_spacing---step--6); } [data-flwr] .f-margin-top-7 { margin-block-start: var(--_spacing---step--7); } [data-flwr] .f-margin-top-8 { margin-block-start: var(--_spacing---step--8); } [data-flwr] .f-margin-top-auto { margin-block-start: auto; } [data-flwr] .f-margin-bottom-0 { margin-block-end: var(--_spacing---step--0); } [data-flwr] .f-margin-bottom-1 { margin-block-end: var(--_spacing---step--1); } [data-flwr] .f-margin-bottom-2 { margin-block-end: var(--_spacing---step--2); } [data-flwr] .f-margin-bottom-3 { margin-block-end: var(--_spacing---step--3); } [data-flwr] .f-margin-bottom-4 { margin-block-end: var(--_spacing---step--4); } [data-flwr] .f-margin-bottom-5 { margin-block-end: var(--_spacing---step--5); } [data-flwr] .f-margin-bottom-6 { margin-block-end: var(--_spacing---step--6); } [data-flwr] .f-margin-bottom-7 { margin-block-end: var(--_spacing---step--7); } [data-flwr] .f-margin-bottom-8 { margin-block-end: var(--_spacing---step--8); } [data-flwr] .f-margin-bottom-auto { margin-block-end: auto; } [data-flwr] .f-margin-left-auto { margin-inline-start: auto; } [data-flwr] .f-margin-right-auto { margin-inline-end: auto; } /* Margin trim — strip first/last child margins (LUMOS u-margin-trim) */ [data-flwr] .f-margin-trim > :first-child { margin-block-start: 0; } [data-flwr] .f-margin-trim > :last-child { margin-block-end: 0; } /* ==================================================================== GAP — single variable + 0..8 + gutter (LUMOS pattern) Setting --_gap---size cascades into both row + column gap automatically ==================================================================== */ [data-flwr] .f-gap-0 { --_gap---size: var(--_spacing---step--0); gap: var(--_gap---size); } [data-flwr] .f-gap-1 { --_gap---size: var(--_spacing---step--1); gap: var(--_gap---size); } [data-flwr] .f-gap-2 { --_gap---size: var(--_spacing---step--2); gap: var(--_gap---size); } [data-flwr] .f-gap-3 { --_gap---size: var(--_spacing---step--3); gap: var(--_gap---size); } [data-flwr] .f-gap-4 { --_gap---size: var(--_spacing---step--4); gap: var(--_gap---size); } [data-flwr] .f-gap-5 { --_gap---size: var(--_spacing---step--5); gap: var(--_gap---size); } [data-flwr] .f-gap-6 { --_gap---size: var(--_spacing---step--6); gap: var(--_gap---size); } [data-flwr] .f-gap-7 { --_gap---size: var(--_spacing---step--7); gap: var(--_gap---size); } [data-flwr] .f-gap-8 { --_gap---size: var(--_spacing---step--8); gap: var(--_gap---size); } [data-flwr] .f-gap-gutter { --_gap---size: var(--_layout---gutter); gap: var(--_gap---size); } [data-flwr] .f-gap-inherit { gap: inherit; } [data-flwr] .f-gap-row-0 { row-gap: var(--_spacing---step--0); } [data-flwr] .f-gap-row-1 { row-gap: var(--_spacing---step--1); } [data-flwr] .f-gap-row-2 { row-gap: var(--_spacing---step--2); } [data-flwr] .f-gap-row-3 { row-gap: var(--_spacing---step--3); } [data-flwr] .f-gap-row-4 { row-gap: var(--_spacing---step--4); } [data-flwr] .f-gap-row-5 { row-gap: var(--_spacing---step--5); } [data-flwr] .f-gap-row-6 { row-gap: var(--_spacing---step--6); } [data-flwr] .f-gap-row-7 { row-gap: var(--_spacing---step--7); } [data-flwr] .f-gap-row-8 { row-gap: var(--_spacing---step--8); } [data-flwr] .f-gap-column-0 { column-gap: var(--_spacing---step--0); } [data-flwr] .f-gap-column-1 { column-gap: var(--_spacing---step--1); } [data-flwr] .f-gap-column-2 { column-gap: var(--_spacing---step--2); } [data-flwr] .f-gap-column-3 { column-gap: var(--_spacing---step--3); } [data-flwr] .f-gap-column-4 { column-gap: var(--_spacing---step--4); } [data-flwr] .f-gap-column-5 { column-gap: var(--_spacing---step--5); } [data-flwr] .f-gap-column-6 { column-gap: var(--_spacing---step--6); } [data-flwr] .f-gap-column-7 { column-gap: var(--_spacing---step--7); } [data-flwr] .f-gap-column-8 { column-gap: var(--_spacing---step--8); } /* Gap collapse — merges 1px borders of adjacent grid/flex children into a single shared edge instead of stacking into 2px. Each direct child shifts -1px right and -1px down so adjacent borders overlap. Pair with border utilities (f-border-1, f-border-subtle, etc.) on children. */ [data-flwr] .f-gap-collapse > * { margin-right: calc(var(--_theme---border--width) * -1); margin-bottom: calc(var(--_theme---border--width) * -1); } /* ==================================================================== TYPOGRAPHY — sizes (variants set --_text-style--- vars; utilities apply directly) ==================================================================== */ [data-flwr] .f-text-display { font-size: var(--_typography---size--display); line-height: var(--_typography---leading--squashed); letter-spacing: var(--_typography---tracking--tighter); font-weight: var(--_typography---weight--bold); } [data-flwr] .f-text-h1 { font-size: var(--_typography---size--h1); line-height: var(--_typography---leading--tight); letter-spacing: var(--_typography---tracking--tight); font-weight: var(--_typography---weight--bold); } [data-flwr] .f-text-h2 { font-size: var(--_typography---size--h2); line-height: var(--_typography---leading--tight); letter-spacing: var(--_typography---tracking--tight); font-weight: var(--_typography---weight--bold); } [data-flwr] .f-text-h3 { font-size: var(--_typography---size--h3); line-height: var(--_typography---leading--snug); letter-spacing: var(--_typography---tracking--tight); font-weight: var(--_typography---weight--semibold); } [data-flwr] .f-text-h4 { font-size: var(--_typography---size--h4); line-height: var(--_typography---leading--snug); letter-spacing: var(--_typography---tracking--normal); font-weight: var(--_typography---weight--semibold); } [data-flwr] .f-text-h5 { font-size: var(--_typography---size--h5); line-height: var(--_typography---leading--snug); letter-spacing: var(--_typography---tracking--normal); font-weight: var(--_typography---weight--semibold); } [data-flwr] .f-text-h6 { font-size: var(--_typography---size--h6); line-height: var(--_typography---leading--normal); letter-spacing: var(--_typography---tracking--normal); font-weight: var(--_typography---weight--semibold); } [data-flwr] .f-text-lead { font-size: var(--_typography---size--lead); line-height: var(--_typography---leading--relaxed); letter-spacing: var(--_typography---tracking--normal); font-weight: var(--_typography---weight--regular); } [data-flwr] .f-text-body { font-size: var(--_typography---size--body); line-height: var(--_typography---leading--normal); letter-spacing: var(--_typography---tracking--normal); } [data-flwr] .f-text-small { font-size: var(--_typography---size--small); line-height: var(--_typography---leading--normal); } [data-flwr] .f-text-tiny { font-size: var(--_typography---size--tiny); line-height: var(--_typography---leading--snug); } [data-flwr] .f-text-micro { font-size: var(--_typography---size--micro); line-height: var(--_typography---leading--snug); } /* Weights */ [data-flwr] .f-text-thin { font-weight: var(--_typography---weight--thin); } [data-flwr] .f-text-extralight { font-weight: var(--_typography---weight--extralight); } [data-flwr] .f-text-light { font-weight: var(--_typography---weight--light); } [data-flwr] .f-text-regular { font-weight: var(--_typography---weight--regular); } [data-flwr] .f-text-medium { font-weight: var(--_typography---weight--medium); } [data-flwr] .f-text-semibold { font-weight: var(--_typography---weight--semibold); } [data-flwr] .f-text-bold { font-weight: var(--_typography---weight--bold); } [data-flwr] .f-text-extrabold { font-weight: var(--_typography---weight--extrabold); } [data-flwr] .f-text-black { font-weight: var(--_typography---weight--black); } /* Families */ [data-flwr] .f-font-sans { font-family: var(--_typography---family--sans); } [data-flwr] .f-font-display { font-family: var(--_typography---family--display); } [data-flwr] .f-font-serif { font-family: var(--_typography---family--serif); } [data-flwr] .f-font-mono { font-family: var(--_typography---family--mono); } /* Style */ [data-flwr] .f-text-italic { font-style: italic; } [data-flwr] .f-text-not-italic { font-style: normal; } [data-flwr] .f-text-underline { text-decoration: underline; text-underline-offset: 0.2em; } [data-flwr] .f-text-strike { text-decoration: line-through; } [data-flwr] .f-text-no-decor { text-decoration: none; } /* Transform */ [data-flwr] .f-text-uppercase { text-transform: uppercase; } [data-flwr] .f-text-lowercase { text-transform: lowercase; } [data-flwr] .f-text-capitalize { text-transform: capitalize; } [data-flwr] .f-text-normal-case { text-transform: none; } /* Alignment — direct */ [data-flwr] .f-text-left { text-align: left; } [data-flwr] .f-text-center { text-align: center; } [data-flwr] .f-text-right { text-align: right; } [data-flwr] .f-text-justify { text-align: justify; } /* Leading utilities */ [data-flwr] .f-leading-squashed { line-height: var(--_typography---leading--squashed); } [data-flwr] .f-leading-tight { line-height: var(--_typography---leading--tight); } [data-flwr] .f-leading-snug { line-height: var(--_typography---leading--snug); } [data-flwr] .f-leading-normal { line-height: var(--_typography---leading--normal); } [data-flwr] .f-leading-relaxed { line-height: var(--_typography---leading--relaxed); } [data-flwr] .f-leading-loose { line-height: var(--_typography---leading--loose); } /* Tracking */ [data-flwr] .f-tracking-tightest { letter-spacing: var(--_typography---tracking--tightest); } [data-flwr] .f-tracking-tighter { letter-spacing: var(--_typography---tracking--tighter); } [data-flwr] .f-tracking-tight { letter-spacing: var(--_typography---tracking--tight); } [data-flwr] .f-tracking-normal { letter-spacing: var(--_typography---tracking--normal); } [data-flwr] .f-tracking-wide { letter-spacing: var(--_typography---tracking--wide); } [data-flwr] .f-tracking-wider { letter-spacing: var(--_typography---tracking--wider); } [data-flwr] .f-tracking-widest { letter-spacing: var(--_typography---tracking--widest); } /* Line clamp — truncates with ellipsis after N lines */ [data-flwr] .f-text-1-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; } [data-flwr] .f-text-2-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } [data-flwr] .f-text-3-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } [data-flwr] .f-text-4-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } [data-flwr] .f-text-5-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } [data-flwr] .f-text-6-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } /* Highlight grow — animated text-width fill. Add .is-active to trigger. */ [data-flwr] .f-text-highlight { background-image: linear-gradient(to right, var(--_theme---accent--main), var(--_theme---accent--main)); background-size: 0% 100%; background-repeat: no-repeat; padding: 0 0.15em; transition: background-size var(--_motion---duration-slow) var(--_motion---ease-emphasized), color var(--_motion---duration-base) var(--_motion---ease-standard); } [data-flwr] .f-text-highlight.is-active { background-size: 100% 100%; color: var(--_theme---accent--text); } /* Display contents — wrapper exists in DOM but contributes no box to layout */ [data-flwr] .f-display-contents { display: contents; } /* Cover absolute extended — for cover backgrounds that need slight overflow to hide subpixel gaps. Use with position: relative parent. */ [data-flwr] .f-cover-absolute-extended { position: absolute; inset: -1%; } /* Vertical text rotation — 90° counter-clockwise. Pair with the layout reservation runtime (data-flwr="vertical-text") if you need the wrapper to take up only the rotated bounding-box width. */ [data-flwr] .f-rotate-vertical { transform: rotate(-90deg); transform-origin: center; white-space: nowrap; } [data-flwr] .f-rotate-vertical-cw { transform: rotate(90deg); transform-origin: center; white-space: nowrap; } /* Empty-state hide modifiers — runtime tags containers/inputs with these */ [data-flwr] .f-hide-when-empty.is-empty { display: none !important; } [data-flwr] .is-empty-select { color: color-mix(in oklch, currentColor 55%, transparent); } /* Disabled wrap — runtime adds .is-disabled to a wrap when it contains a disabled control. Replaces the :has() pattern that needs an embed. */ [data-flwr] .is-disabled { opacity: 0.5; pointer-events: none; } /* ==================================================================== COLOR — text + background + border ==================================================================== */ /* Text color */ [data-flwr] .f-text-color-main { color: var(--_theme---text--main); } [data-flwr] .f-text-color-strong { color: var(--_theme---text--strong); } [data-flwr] .f-text-color-muted { color: var(--_theme---text--muted); } [data-flwr] .f-text-color-subtle { color: var(--_theme---text--subtle); } [data-flwr] .f-text-color-inverse { color: var(--_theme---text--inverse); } [data-flwr] .f-text-color-accent { color: var(--_theme---text--accent); } [data-flwr] .f-text-color-link { color: var(--_theme---text--link); } [data-flwr] .f-text-color-success { color: var(--_theme---text--success); } [data-flwr] .f-text-color-warning { color: var(--_theme---text--warning); } [data-flwr] .f-text-color-alert { color: var(--_theme---text--alert); } [data-flwr] .f-text-color-inherit { color: inherit; } /* f-color-cascade — forces ALL descendants to inherit currentColor + paints SVG icons via fill/stroke=currentColor. Solves "icon won't recolor inside a colored button" without touching every child class. */ [data-flwr] .f-color-cascade, [data-flwr] .f-color-cascade * { color: inherit; } [data-flwr] .f-color-cascade svg, [data-flwr] .f-color-cascade svg * { fill: currentColor; stroke: currentColor; } /* Background */ [data-flwr] .f-bg-surface { background-color: var(--_theme---surface--main); } [data-flwr] .f-bg-surface-raised { background-color: var(--_theme---surface--raised); } [data-flwr] .f-bg-surface-sunken { background-color: var(--_theme---surface--sunken); } [data-flwr] .f-bg-surface-inverse { background-color: var(--_theme---surface--inverse); } [data-flwr] .f-bg-accent { background-color: var(--_theme---accent--main); } [data-flwr] .f-bg-accent-soft { background-color: var(--_theme---accent--soft); } [data-flwr] .f-bg-success { background-color: var(--_palette---success--soft); } [data-flwr] .f-bg-warning { background-color: var(--_palette---warning--soft); } [data-flwr] .f-bg-alert { background-color: var(--_palette---alert--100); } [data-flwr] .f-bg-info { background-color: var(--_palette---info--soft); } [data-flwr] .f-bg-transparent { background-color: transparent; } [data-flwr] .f-bg-overlay { background-color: var(--_theme---surface--overlay); } [data-flwr] .f-bg-scrim { background-color: var(--_theme---surface--scrim); } /* Border color/style */ [data-flwr] .f-border { border: var(--_theme---border--width) solid var(--_theme---border--main); } [data-flwr] .f-border-subtle { border-color: var(--_theme---border--subtle); } [data-flwr] .f-border-main { border-color: var(--_theme---border--main); } [data-flwr] .f-border-strong { border-color: var(--_theme---border--strong); } [data-flwr] .f-border-accent { border-color: var(--_theme---border--accent); } [data-flwr] .f-border-focus { border-color: var(--_theme---border--focus); } [data-flwr] .f-border-inverse { border-color: var(--_theme---border--inverse); } [data-flwr] .f-border-none { border-style: none; } [data-flwr] .f-border-solid { border-style: solid; } [data-flwr] .f-border-dashed { border-style: dashed; } [data-flwr] .f-border-dotted { border-style: dotted; } /* Border-width utilities reset --_theme---border--width so the active width cascades to children + sibling modifiers (.is-border-collapse). */ [data-flwr] .f-border-1 { --_theme---border--width: var(--_theme---border--width-1); border-width: var(--_theme---border--width); border-style: solid; } [data-flwr] .f-border-2 { --_theme---border--width: var(--_theme---border--width-2); border-width: var(--_theme---border--width); border-style: solid; } [data-flwr] .f-border-4 { --_theme---border--width: var(--_theme---border--width-4); border-width: var(--_theme---border--width); border-style: solid; } [data-flwr] .f-border-top-1 { border-block-start: var(--_theme---border--width-1) solid var(--_theme---border--main); } [data-flwr] .f-border-bottom-1 { border-block-end: var(--_theme---border--width-1) solid var(--_theme---border--main); } [data-flwr] .f-border-left-1 { border-inline-start: var(--_theme---border--width-1) solid var(--_theme---border--main); } [data-flwr] .f-border-right-1 { border-inline-end: var(--_theme---border--width-1) solid var(--_theme---border--main); } /* ==================================================================== RADIUS, SHADOW, EFFECTS ==================================================================== */ [data-flwr] .f-radius-none { border-radius: 0; } [data-flwr] .f-radius-xs { border-radius: 0.25rem; } [data-flwr] .f-radius-sm { border-radius: 0.375rem; } [data-flwr] .f-radius-md { border-radius: 0.5rem; } [data-flwr] .f-radius-lg { border-radius: 0.75rem; } [data-flwr] .f-radius-xl { border-radius: 1rem; } [data-flwr] .f-radius-2xl { border-radius: 1.5rem; } [data-flwr] .f-radius-3xl { border-radius: 2rem; } [data-flwr] .f-radius-full { border-radius: 9999px; } /* Line-height (leading) — compose with any text size to override its default. */ [data-flwr] .f-leading-none { line-height: 1; } [data-flwr] .f-leading-tight { line-height: var(--_typography---leading--tight); } [data-flwr] .f-leading-snug { line-height: var(--_typography---leading--snug); } [data-flwr] .f-leading-normal { line-height: var(--_typography---leading--normal); } [data-flwr] .f-leading-relaxed { line-height: var(--_typography---leading--relaxed); } /* Text wrap — balance short headings (even lines, no lone last word) / pretty (prevents orphan last words in longer copy). */ [data-flwr] .f-text-balance { text-wrap: balance; } [data-flwr] .f-text-pretty { text-wrap: pretty; } /* Notch — cuts a diagonal slant out of the top-right corner (signature shape). Works on any block: divs, sections, image/media wrappers. Tune the cut with --f-notch-size, or use the -sm / -lg sizes. clip-path overrides border-radius, so the remaining corners read sharp. */ [data-flwr] .f-notch { --f-notch-size: 1rem; clip-path: polygon(0 0, calc(100% - var(--f-notch-size)) 0, 100% var(--f-notch-size), 100% 100%, 0% 100%, 0% 0%); } [data-flwr] .f-notch-sm { --f-notch-size: 0.5rem; clip-path: polygon(0 0, calc(100% - var(--f-notch-size)) 0, 100% var(--f-notch-size), 100% 100%, 0% 100%, 0% 0%); } [data-flwr] .f-notch-lg { --f-notch-size: 2rem; clip-path: polygon(0 0, calc(100% - var(--f-notch-size)) 0, 100% var(--f-notch-size), 100% 100%, 0% 100%, 0% 0%); } /* Radius inner — straightens internal corners of a grid/flex container so the whole group reads as one rounded block. Children's corners reset to 0; the 4 outermost corners (or 2 ends in flex-row/col) inherit the parent's radius via `inherit` — so any f-radius-* on the parent flows through to only the outer corners. Pair with: f-radius-{xs..3xl} on the parent + (optionally) f-gap-collapse on the parent so internal cell borders merge into single shared lines. Caveat: grid variants assume a complete last row. Partial last rows break :nth-last-child(N) targeting. */ [data-flwr] .f-radius-inner-2 > *, [data-flwr] .f-radius-inner-3 > *, [data-flwr] .f-radius-inner-4 > *, [data-flwr] .f-radius-inner-6 > *, [data-flwr] .f-radius-inner-row > *, [data-flwr] .f-radius-inner-col > * { border-radius: 0; } [data-flwr] .f-radius-inner-2 > :first-child { border-top-left-radius: inherit; } [data-flwr] .f-radius-inner-2 > :nth-child(2) { border-top-right-radius: inherit; } [data-flwr] .f-radius-inner-2 > :nth-last-child(2) { border-bottom-left-radius: inherit; } [data-flwr] .f-radius-inner-2 > :last-child { border-bottom-right-radius: inherit; } [data-flwr] .f-radius-inner-3 > :first-child { border-top-left-radius: inherit; } [data-flwr] .f-radius-inner-3 > :nth-child(3) { border-top-right-radius: inherit; } [data-flwr] .f-radius-inner-3 > :nth-last-child(3) { border-bottom-left-radius: inherit; } [data-flwr] .f-radius-inner-3 > :last-child { border-bottom-right-radius: inherit; } [data-flwr] .f-radius-inner-4 > :first-child { border-top-left-radius: inherit; } [data-flwr] .f-radius-inner-4 > :nth-child(4) { border-top-right-radius: inherit; } [data-flwr] .f-radius-inner-4 > :nth-last-child(4) { border-bottom-left-radius: inherit; } [data-flwr] .f-radius-inner-4 > :last-child { border-bottom-right-radius: inherit; } [data-flwr] .f-radius-inner-6 > :first-child { border-top-left-radius: inherit; } [data-flwr] .f-radius-inner-6 > :nth-child(6) { border-top-right-radius: inherit; } [data-flwr] .f-radius-inner-6 > :nth-last-child(6) { border-bottom-left-radius: inherit; } [data-flwr] .f-radius-inner-6 > :last-child { border-bottom-right-radius: inherit; } [data-flwr] .f-radius-inner-row > :first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } [data-flwr] .f-radius-inner-row > :last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } [data-flwr] .f-radius-inner-col > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } [data-flwr] .f-radius-inner-col > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } [data-flwr] .f-shadow-none { box-shadow: none; } [data-flwr] .f-shadow-xs { box-shadow: 0 1px 2px var(--_palette---scrim--subtle); } /* v1.1: sm/md/lg consume the theme-layer shadow tokens (Batch T) so dark mode retunes them stronger against dark surfaces — raw scrim shadows read invisible on dark. xs/xl/2xl/inner keep their bespoke raw-scrim values. */ [data-flwr] .f-shadow-sm { box-shadow: var(--_theme---shadow--sm); } [data-flwr] .f-shadow-md { box-shadow: var(--_theme---shadow--md); } [data-flwr] .f-shadow-lg { box-shadow: var(--_theme---shadow--lg); } [data-flwr] .f-shadow-xl { box-shadow: 0 1px 2px var(--_palette---scrim--subtle), 0 24px 48px var(--_palette---scrim--strong); } [data-flwr] .f-shadow-2xl { box-shadow: 0 1px 2px var(--_palette---scrim--subtle), 0 32px 64px var(--_palette---scrim--strong); } [data-flwr] .f-shadow-inner { box-shadow: inset 0 2px 4px var(--_palette---scrim--subtle); } /* v1.1: subtle 1px elevation ring — pairs with f-shadow-* on dark surfaces where a shadow alone doesn't separate an elevated card from its background. Border longhands (not box-shadow) so it composes with a shadow instead of colliding on the single box-shadow property. Light mode ring is transparent (see Batch T). */ [data-flwr] .f-elevation-ring { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: var(--_theme---elevation-ring); border-right-color: var(--_theme---elevation-ring); border-bottom-color: var(--_theme---elevation-ring); border-left-color: var(--_theme---elevation-ring); } [data-flwr] .f-blur-sm { filter: blur(4px); } [data-flwr] .f-blur-md { filter: blur(8px); } [data-flwr] .f-blur-lg { filter: blur(16px); } [data-flwr] .f-backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-flwr] .f-backdrop-blur-md { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-flwr] .f-backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-flwr] .f-opacity-0 { opacity: 0; } [data-flwr] .f-opacity-25 { opacity: 0.25; } [data-flwr] .f-opacity-50 { opacity: 0.5; } [data-flwr] .f-opacity-75 { opacity: 0.75; } [data-flwr] .f-opacity-100 { opacity: 1; } /* ==================================================================== LAYOUT — flex, grid, alignment ==================================================================== */ [data-flwr] .f-flex { display: flex; } [data-flwr] .f-flex-row { display: flex; flex-direction: row; } [data-flwr] .f-flex-row-reverse { display: flex; flex-direction: row-reverse; } [data-flwr] .f-flex-column { display: flex; flex-direction: column; } [data-flwr] .f-flex-column-reverse { display: flex; flex-direction: column-reverse; } [data-flwr] .f-flex-wrap { flex-wrap: wrap; } [data-flwr] .f-flex-nowrap { flex-wrap: nowrap; } [data-flwr] .f-flex-wrap-reverse { flex-wrap: wrap-reverse; } [data-flwr] .f-flex-stack { display: flex; flex-direction: column; } [data-flwr] .f-flex-cluster { display: flex; flex-wrap: wrap; gap: var(--_spacing---step--3); } [data-flwr] .f-flex-grow-0 { flex-grow: 0; } [data-flwr] .f-flex-grow-1 { flex-grow: 1; } [data-flwr] .f-flex-shrink-0 { flex-shrink: 0; } [data-flwr] .f-flex-shrink-1 { flex-shrink: 1; } [data-flwr] .f-flex-1 { flex: 1 1 0%; } [data-flwr] .f-flex-auto { flex: 1 1 auto; } [data-flwr] .f-flex-none { flex: none; } [data-flwr] .f-flex-initial { flex: 0 1 auto; } [data-flwr] .f-justify-start { justify-content: flex-start; } [data-flwr] .f-justify-center { justify-content: center; } [data-flwr] .f-justify-end { justify-content: flex-end; } [data-flwr] .f-justify-between { justify-content: space-between; } [data-flwr] .f-justify-around { justify-content: space-around; } [data-flwr] .f-justify-evenly { justify-content: space-evenly; } [data-flwr] .f-items-start { align-items: flex-start; } [data-flwr] .f-items-center { align-items: center; } [data-flwr] .f-items-end { align-items: flex-end; } [data-flwr] .f-items-stretch { align-items: stretch; } [data-flwr] .f-items-baseline { align-items: baseline; } [data-flwr] .f-self-auto { align-self: auto; } [data-flwr] .f-self-start { align-self: flex-start; } [data-flwr] .f-self-center { align-self: center; } [data-flwr] .f-self-end { align-self: flex-end; } [data-flwr] .f-self-stretch { align-self: stretch; } [data-flwr] .f-place-start { place-items: start; } [data-flwr] .f-place-center { place-items: center; } [data-flwr] .f-place-end { place-items: end; } /* ---- Alignment driver (LUMOS pattern — ONE variable, multiple properties) ---- */ [data-flwr] .f-alignment-start { --_alignment---direction: flex-start; text-align: left; align-items: var(--_alignment---direction); justify-content: var(--_alignment---direction); } [data-flwr] .f-alignment-center { --_alignment---direction: center; text-align: center; align-items: var(--_alignment---direction); justify-content: var(--_alignment---direction); } [data-flwr] .f-alignment-end { --_alignment---direction: flex-end; text-align: right; align-items: var(--_alignment---direction); justify-content: var(--_alignment---direction); } /* ---- Grid + column-count driver ---- */ [data-flwr] .f-grid { display: grid; grid-template-columns: repeat(var(--_column-count---value), minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-1 { --_column-count---value: 1; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-2 { --_column-count---value: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-3 { --_column-count---value: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-4 { --_column-count---value: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-5 { --_column-count---value: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-6 { --_column-count---value: 6; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-8 { --_column-count---value: 8; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-12 { --_column-count---value: 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--_gap---size); } /* Auto-fit / auto-fill responsive grids */ [data-flwr] .f-grid-autofit-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-autofit-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-autofit-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-autofill-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-autofill-md { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--_gap---size); } [data-flwr] .f-grid-autofill-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--_gap---size); } /* Subgrid for child track inheritance */ [data-flwr] .f-grid-subgrid { display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; } /* Breakout grid (LUMOS pattern) */ [data-flwr] .f-grid-breakout { display: grid; grid-template-columns: var(--_layout---breakout); } [data-flwr] .f-content { grid-column: content-start / content-end; } [data-flwr] .f-full-bleed { grid-column: full-start / full-end; } /* ---- is-border-collapse —— composable modifier for any flex/grid container. Children with f-border-* sit edge-to-edge; adjacent borders fully overlap into a single line of pixels (no double-thickness). The negative-margin amount is read from --_theme---border--width which children set via .f-border-1/-2/-4 — so the math is always correct, never hardcoded. Mix with any f-grid-N, f-flex, f-grid-autofit-*, etc. */ [data-flwr] .is-border-collapse { gap: 0; } [data-flwr] .is-border-collapse > * { margin-inline-end: calc(-1 * var(--_theme---border--width)); margin-block-end: calc(-1 * var(--_theme---border--width)); } /* ---- Per-element layout escape hatches (work regardless of layout mode) ---- */ /* f-bleed — escapes parent container, takes 100vw, recenters via negative margin trick. Use on a child of a constrained .f-container-* when you want one element to break out. */ [data-flwr] .f-bleed { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); } /* f-edge — same as f-bleed but kills horizontal padding too. Useful for full-bleed images. */ [data-flwr] .f-edge { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 0; } /* f-unbleed — for descendants of f-bleed/f-edge that need to re-enter the content column */ [data-flwr] .f-unbleed { max-width: var(--_layout---max-content); margin-inline: auto; padding-inline: var(--_spacing---page-margin); } /* ---- Column-count driver (1..12 directly, LUMOS pattern) ---- */ [data-flwr] .f-cols-1 { --_column-count---value: 1; } [data-flwr] .f-cols-2 { --_column-count---value: 2; } [data-flwr] .f-cols-3 { --_column-count---value: 3; } [data-flwr] .f-cols-4 { --_column-count---value: 4; } [data-flwr] .f-cols-5 { --_column-count---value: 5; } [data-flwr] .f-cols-6 { --_column-count---value: 6; } [data-flwr] .f-cols-7 { --_column-count---value: 7; } [data-flwr] .f-cols-8 { --_column-count---value: 8; } [data-flwr] .f-cols-9 { --_column-count---value: 9; } [data-flwr] .f-cols-10 { --_column-count---value: 10; } [data-flwr] .f-cols-11 { --_column-count---value: 11; } [data-flwr] .f-cols-12 { --_column-count---value: 12; } /* ---- Column placement (grid item) ---- */ [data-flwr] .f-col-1 { grid-column: span 1 / span 1; } [data-flwr] .f-col-2 { grid-column: span 2 / span 2; } [data-flwr] .f-col-3 { grid-column: span 3 / span 3; } [data-flwr] .f-col-4 { grid-column: span 4 / span 4; } [data-flwr] .f-col-5 { grid-column: span 5 / span 5; } [data-flwr] .f-col-6 { grid-column: span 6 / span 6; } [data-flwr] .f-col-7 { grid-column: span 7 / span 7; } [data-flwr] .f-col-8 { grid-column: span 8 / span 8; } [data-flwr] .f-col-9 { grid-column: span 9 / span 9; } [data-flwr] .f-col-10 { grid-column: span 10 / span 10; } [data-flwr] .f-col-11 { grid-column: span 11 / span 11; } [data-flwr] .f-col-12 { grid-column: span 12 / span 12; } [data-flwr] .f-col-full { grid-column: 1 / -1; } [data-flwr] .f-col-start-1 { grid-column-start: 1; } [data-flwr] .f-col-start-2 { grid-column-start: 2; } [data-flwr] .f-col-start-3 { grid-column-start: 3; } [data-flwr] .f-col-start-4 { grid-column-start: 4; } [data-flwr] .f-col-start-5 { grid-column-start: 5; } [data-flwr] .f-col-start-6 { grid-column-start: 6; } [data-flwr] .f-col-start-7 { grid-column-start: 7; } [data-flwr] .f-col-start-8 { grid-column-start: 8; } [data-flwr] .f-col-start-auto { grid-column-start: auto; } [data-flwr] .f-row-1 { grid-row: span 1 / span 1; } [data-flwr] .f-row-2 { grid-row: span 2 / span 2; } [data-flwr] .f-row-3 { grid-row: span 3 / span 3; } [data-flwr] .f-row-4 { grid-row: span 4 / span 4; } [data-flwr] .f-row-5 { grid-row: span 5 / span 5; } [data-flwr] .f-row-6 { grid-row: span 6 / span 6; } /* ==================================================================== SIZING ==================================================================== */ [data-flwr] .f-w-full { width: 100%; } [data-flwr] .f-w-screen { width: 100vw; } [data-flwr] .f-w-auto { width: auto; } [data-flwr] .f-w-fit { width: fit-content; } [data-flwr] .f-w-min { width: min-content; } [data-flwr] .f-w-max { width: max-content; } [data-flwr] .f-w-half { width: 50%; } [data-flwr] .f-w-third { width: 33.333%; } [data-flwr] .f-w-quarter { width: 25%; } [data-flwr] .f-max-w-xs { max-width: var(--_spacing---container--xs); } [data-flwr] .f-max-w-sm { max-width: var(--_spacing---container--sm); } [data-flwr] .f-max-w-md { max-width: var(--_spacing---container--md); } [data-flwr] .f-max-w-lg { max-width: var(--_spacing---container--lg); } [data-flwr] .f-max-w-xl { max-width: var(--_spacing---container--xl); } [data-flwr] .f-max-w-xxl { max-width: var(--_spacing---container--xxl); } [data-flwr] .f-max-w-full { max-width: 100%; } [data-flwr] .f-max-w-prose { max-width: 65ch; } [data-flwr] .f-max-w-10ch { max-width: 10ch; } [data-flwr] .f-max-w-20ch { max-width: 20ch; } [data-flwr] .f-max-w-30ch { max-width: 30ch; } [data-flwr] .f-max-w-40ch { max-width: 40ch; } [data-flwr] .f-max-w-50ch { max-width: 50ch; } [data-flwr] .f-max-w-60ch { max-width: 60ch; } [data-flwr] .f-max-w-80ch { max-width: 80ch; } [data-flwr] .f-min-w-0 { min-width: 0; } [data-flwr] .f-min-w-full { min-width: 100%; } [data-flwr] .f-h-full { height: 100%; } [data-flwr] .f-h-screen { height: 100vh; } [data-flwr] .f-h-svh { height: 100svh; } [data-flwr] .f-h-dvh { height: 100dvh; } [data-flwr] .f-h-auto { height: auto; } [data-flwr] .f-h-fit { height: fit-content; } [data-flwr] .f-min-h-screen { min-height: 100vh; } [data-flwr] .f-min-h-svh { min-height: 100svh; } [data-flwr] .f-min-h-dvh { min-height: 100dvh; } [data-flwr] .f-min-h-full { min-height: 100%; } [data-flwr] .f-min-h-0 { min-height: 0; } [data-flwr] .f-max-h-full { max-height: 100%; } [data-flwr] .f-max-h-screen { max-height: 100vh; } /* ==================================================================== POSITION, Z-INDEX, OVERFLOW, DISPLAY ==================================================================== */ [data-flwr] .f-position-static { position: static; } [data-flwr] .f-position-relative { position: relative; } [data-flwr] .f-position-absolute { position: absolute; } [data-flwr] .f-position-fixed { position: fixed; } [data-flwr] .f-position-sticky { position: sticky; } [data-flwr] .f-inset-0 { inset: 0; } [data-flwr] .f-inset-x-0 { left: 0; right: 0; } [data-flwr] .f-inset-y-0 { top: 0; bottom: 0; } [data-flwr] .f-top-0 { top: 0; } [data-flwr] .f-right-0 { right: 0; } [data-flwr] .f-bottom-0 { bottom: 0; } [data-flwr] .f-left-0 { left: 0; } [data-flwr] .f-cover { position: absolute; inset: 0; width: 100%; height: 100%; } /* Named z-tiers (semantic, not numeric) */ [data-flwr] .f-z-base { z-index: 0; } [data-flwr] .f-z-1 { z-index: 1; } [data-flwr] .f-z-2 { z-index: 2; } [data-flwr] .f-z-3 { z-index: 3; } [data-flwr] .f-z-dropdown { z-index: 1000; } [data-flwr] .f-z-sticky { z-index: 1100; } [data-flwr] .f-z-nav { z-index: 1200; } [data-flwr] .f-z-overlay { z-index: 1300; } [data-flwr] .f-z-modal { z-index: 1400; } [data-flwr] .f-z-popover { z-index: 1500; } [data-flwr] .f-z-toast { z-index: 1600; } [data-flwr] .f-z-tooltip { z-index: 1700; } [data-flwr] .f-z-max { z-index: 9999; } [data-flwr] .f-z-negative { z-index: -1; } [data-flwr] .f-overflow-visible { overflow: visible; } [data-flwr] .f-overflow-hidden { overflow: hidden; } [data-flwr] .f-overflow-clip { overflow: clip; } [data-flwr] .f-overflow-scroll { overflow: scroll; } [data-flwr] .f-overflow-auto { overflow: auto; } [data-flwr] .f-overflow-x-hidden { overflow-x: hidden; } [data-flwr] .f-overflow-y-hidden { overflow-y: hidden; } [data-flwr] .f-overflow-x-auto { overflow-x: auto; } [data-flwr] .f-overflow-y-auto { overflow-y: auto; } [data-flwr] .f-overflow-x-scroll { overflow-x: scroll; } [data-flwr] .f-overflow-y-scroll { overflow-y: scroll; } [data-flwr] .f-display-block { display: block; } [data-flwr] .f-display-inline { display: inline; } [data-flwr] .f-display-inline-block { display: inline-block; } [data-flwr] .f-display-inline-flex { display: inline-flex; } [data-flwr] .f-display-inline-grid { display: inline-grid; } [data-flwr] .f-display-contents { display: contents; } [data-flwr] .f-display-none { display: none; } /* ==================================================================== VISIBILITY (responsive variants — desktop/tablet/mobile) Maps to Webflow native breakpoints: medium ≤991, small ≤767, tiny ≤478 ==================================================================== */ [data-flwr] .f-hide { display: none; } @media (max-width: 991px) { [data-flwr] .f-hide-on-tablet { display: none; } } @media (max-width: 767px) { [data-flwr] .f-hide-on-mobile { display: none; } } @media (max-width: 478px) { [data-flwr] .f-hide-on-mobile-portrait { display: none; } } /* v1.1: rebuilt desktop-first (max-width only). min-width queries don't evaluate in the Webflow Designer canvas, so the DEFAULT (no-media) state must be the desktop state. show-on-* now self-hide at non-target breakpoints (no paired f-hide needed); rendered result matches the intended responsive visibility. */ [data-flwr] .f-show-on-desktop { display: revert; } [data-flwr] .f-hide-on-desktop { display: none; } [data-flwr] .f-show-on-tablet { display: none; } [data-flwr] .f-show-on-mobile { display: none; } @media (max-width: 991px) { [data-flwr] .f-show-on-desktop { display: none; } [data-flwr] .f-hide-on-desktop { display: revert; } [data-flwr] .f-show-on-tablet { display: revert; } } @media (max-width: 767px) { [data-flwr] .f-show-on-tablet { display: none; } [data-flwr] .f-show-on-mobile { display: revert; } } /* ==================================================================== INTERACTION & MISC ==================================================================== */ [data-flwr] .f-cursor-pointer { cursor: pointer; } [data-flwr] .f-cursor-default { cursor: default; } [data-flwr] .f-cursor-not-allowed { cursor: not-allowed; } [data-flwr] .f-cursor-grab { cursor: grab; } [data-flwr] .f-cursor-grabbing { cursor: grabbing; } [data-flwr] .f-cursor-text { cursor: text; } [data-flwr] .f-pointer-events-auto { pointer-events: auto; } [data-flwr] .f-pointer-events-none { pointer-events: none; } [data-flwr] .f-select-none { user-select: none; } [data-flwr] .f-select-text { user-select: text; } [data-flwr] .f-select-all { user-select: all; } [data-flwr] .f-touch-auto { touch-action: auto; } [data-flwr] .f-touch-none { touch-action: none; } [data-flwr] .f-touch-manipulation { touch-action: manipulation; } [data-flwr] .f-touch-pan-x { touch-action: pan-x; } [data-flwr] .f-touch-pan-y { touch-action: pan-y; } [data-flwr] .f-isolate { isolation: isolate; } [data-flwr] .f-isolate-auto { isolation: auto; } [data-flwr] .f-mix-blend-multiply { mix-blend-mode: multiply; } [data-flwr] .f-mix-blend-screen { mix-blend-mode: screen; } [data-flwr] .f-mix-blend-overlay { mix-blend-mode: overlay; } [data-flwr] .f-mix-blend-difference { mix-blend-mode: difference; } [data-flwr] .f-mix-blend-luminosity { mix-blend-mode: luminosity; } [data-flwr] .f-object-cover { object-fit: cover; } [data-flwr] .f-object-contain { object-fit: contain; } [data-flwr] .f-object-fill { object-fit: fill; } [data-flwr] .f-object-scale-down { object-fit: scale-down; } [data-flwr] .f-object-none { object-fit: none; } [data-flwr] .f-object-center { object-position: center; } [data-flwr] .f-object-top { object-position: top; } [data-flwr] .f-object-bottom { object-position: bottom; } /* ==================================================================== TRANSITIONS (motion utilities) ==================================================================== */ [data-flwr] .f-transition { transition: all var(--_flwr-rt---transition-medium) var(--_flwr-rt---ease-standard); } [data-flwr] .f-transition-fast { transition-duration: var(--_flwr-rt---transition-fast); } [data-flwr] .f-transition-slow { transition-duration: var(--_flwr-rt---transition-slow); } [data-flwr] .f-ease-standard { transition-timing-function: var(--_flwr-rt---ease-standard); } [data-flwr] .f-ease-decelerate { transition-timing-function: var(--_flwr-rt---ease-decelerate); } [data-flwr] .f-ease-accelerate { transition-timing-function: var(--_flwr-rt---ease-accelerate); } [data-flwr] .f-ease-back { transition-timing-function: var(--_flwr-rt---ease-back); } /* ==================================================================== ACCESSIBILITY HELPERS ==================================================================== */ [data-flwr] .f-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [data-flwr] .f-focus-ring:focus-visible { outline: none; box-shadow: var(--_theme---focus--ring); } /* ==================================================================== RICH TEXT SCOPE (descendants of .f-rich-text inherit Flower typography) ==================================================================== */ [data-flwr] .f-rich-text > h1 { font-size: var(--_typography---size--h1); line-height: var(--_typography---leading--tight); font-weight: var(--_typography---weight--bold); margin-block: 0 var(--_spacing---step--5); } [data-flwr] .f-rich-text > h2 { font-size: var(--_typography---size--h2); line-height: var(--_typography---leading--tight); font-weight: var(--_typography---weight--bold); margin-block: var(--_spacing---step--6) var(--_spacing---step--4); } [data-flwr] .f-rich-text > h3 { font-size: var(--_typography---size--h3); line-height: var(--_typography---leading--snug); font-weight: var(--_typography---weight--semibold); margin-block: var(--_spacing---step--6) var(--_spacing---step--3); } [data-flwr] .f-rich-text > h4 { font-size: var(--_typography---size--h4); line-height: var(--_typography---leading--snug); font-weight: var(--_typography---weight--semibold); margin-block: var(--_spacing---step--5) var(--_spacing---step--3); } [data-flwr] .f-rich-text > h5 { font-size: var(--_typography---size--h5); font-weight: var(--_typography---weight--semibold); margin-block: var(--_spacing---step--5) var(--_spacing---step--2); } [data-flwr] .f-rich-text > h6 { font-size: var(--_typography---size--h6); font-weight: var(--_typography---weight--semibold); margin-block: var(--_spacing---step--4) var(--_spacing---step--2); } [data-flwr] .f-rich-text > p { font-size: var(--_typography---size--body); line-height: var(--_typography---leading--relaxed); margin-block: 0 var(--_spacing---step--4); } [data-flwr] .f-rich-text > ul, [data-flwr] .f-rich-text > ol { padding-inline-start: var(--_spacing---step--5); margin-block: 0 var(--_spacing---step--4); } [data-flwr] .f-rich-text > ul > li, [data-flwr] .f-rich-text > ol > li { margin-block-end: var(--_spacing---step--2); } [data-flwr] .f-rich-text > blockquote { border-inline-start: 4px solid var(--_theme---border--accent); padding-inline-start: var(--_spacing---step--4); font-size: var(--_typography---size--lead); font-style: italic; color: var(--_theme---text--muted); margin-block: var(--_spacing---step--5); } [data-flwr] .f-rich-text a { color: var(--_theme---text--link); text-decoration: underline; text-underline-offset: 0.2em; } [data-flwr] .f-rich-text a:hover { color: var(--_theme---text--link-hover); } [data-flwr] .f-rich-text img { max-width: 100%; height: auto; border-radius: var(--_component---card--radius); margin-block: var(--_spacing---step--5); } [data-flwr] .f-rich-text figure { margin-block: var(--_spacing---step--5); } [data-flwr] .f-rich-text figcaption { font-size: var(--_typography---size--small); color: var(--_theme---text--muted); margin-block-start: var(--_spacing---step--2); text-align: center; } [data-flwr] .f-rich-text code { font-family: var(--_typography---family--mono); font-size: 0.9em; background: var(--_theme---surface--sunken); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } [data-flwr] .f-rich-text pre { background: var(--_theme---surface--sunken); padding: var(--_spacing---step--4); border-radius: var(--_component---card--radius); overflow-x: auto; margin-block: var(--_spacing---step--5); } [data-flwr] .f-rich-text hr { border: none; border-block-start: 1px solid var(--_theme---border--subtle); margin-block: var(--_spacing---step--6); } /* ==================================================================== GRADIENT UTILITIES — backgrounds + text ==================================================================== */ [data-flwr] .f-bg-gradient-brand { background: linear-gradient(135deg, var(--_palette---core--500), var(--_palette---core--600)); } [data-flwr] .f-bg-gradient-accent { background: linear-gradient(135deg, var(--_palette---alternate--500), var(--_palette---alternate--600)); } [data-flwr] .f-bg-gradient-mix { background: linear-gradient(135deg, var(--_palette---core--500), var(--_palette---alternate--500)); } [data-flwr] .f-bg-gradient-sunset { background: linear-gradient(135deg, var(--_palette---core--400), var(--_palette---alternate--500)); } [data-flwr] .f-bg-gradient-aurora { background: linear-gradient(135deg, var(--_palette---alternate--500), var(--_palette---core--500), var(--_palette---alternate--300)); } [data-flwr] .f-bg-gradient-dawn { background: linear-gradient(180deg, var(--_palette---neutral--0), var(--_palette---core--50)); } [data-flwr] .f-bg-gradient-dusk { background: linear-gradient(180deg, var(--_palette---alternate--900), var(--_palette---neutral--900)); } [data-flwr] .f-bg-gradient-radial-brand { background: radial-gradient(circle at 50% 0%, var(--_palette---core--500), transparent 60%); } [data-flwr] .f-bg-gradient-radial-accent { background: radial-gradient(circle at 50% 0%, var(--_palette---alternate--500), transparent 60%); } [data-flwr] .f-text-gradient-brand, [data-flwr] .f-text-gradient-accent, [data-flwr] .f-text-gradient-mix { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-flwr] .f-text-gradient-brand { background-image: linear-gradient(120deg, var(--_palette---core--500), var(--_palette---core--600)); } [data-flwr] .f-text-gradient-accent { background-image: linear-gradient(120deg, var(--_palette---alternate--500), var(--_palette---alternate--600)); } [data-flwr] .f-text-gradient-mix { background-image: linear-gradient(120deg, var(--_palette---core--500), var(--_palette---alternate--500)); } /* ==================================================================== GLASS / FROST / GLOW EFFECTS ==================================================================== */ [data-flwr] .f-glass { background: color-mix(in oklch, var(--_theme---surface--main) 60%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in oklch, var(--_theme---text--main) 8%, transparent); } [data-flwr] .f-glass-dark { background: color-mix(in oklch, var(--_palette---neutral--900) 60%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in oklch, var(--_palette---neutral--0) 10%, transparent); } [data-flwr] .f-glass-light { background: color-mix(in oklch, var(--_palette---neutral--0) 60%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in oklch, var(--_palette---neutral--900) 8%, transparent); } [data-flwr] .f-glow-brand { box-shadow: 0 0 32px color-mix(in oklch, var(--_palette---core--500) 35%, transparent); } [data-flwr] .f-glow-accent { box-shadow: 0 0 32px color-mix(in oklch, var(--_palette---alternate--500) 35%, transparent); } [data-flwr] .f-glow-soft { box-shadow: 0 0 24px color-mix(in oklch, var(--_palette---neutral--0) 15%, transparent); } [data-flwr] .f-glow-pulse { box-shadow: 0 0 0 0 color-mix(in oklch, var(--_palette---core--500) 60%, transparent); animation: flwr-rt-pulse 2s var(--_motion---ease-emphasized) infinite; } @keyframes flwr-rt-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--_palette---core--500) 60%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--_palette---core--500) 0%, transparent); } } [data-flwr] .f-noise { position: relative; } [data-flwr] .f-noise::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.4; mix-blend-mode: overlay; } /* ==================================================================== MASK FADES (edge-fade utilities for hero images, scroll containers) ==================================================================== */ [data-flwr] .f-mask-fade-top { mask-image: linear-gradient(to bottom, transparent, black 20%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%); } [data-flwr] .f-mask-fade-bottom { mask-image: linear-gradient(to top, transparent, black 20%); -webkit-mask-image: linear-gradient(to top, transparent, black 20%); } [data-flwr] .f-mask-fade-left { mask-image: linear-gradient(to right, transparent, black 20%); -webkit-mask-image: linear-gradient(to right, transparent, black 20%); } [data-flwr] .f-mask-fade-right { mask-image: linear-gradient(to left, transparent, black 20%); -webkit-mask-image: linear-gradient(to left, transparent, black 20%); } [data-flwr] .f-mask-fade-edges { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } /* ==================================================================== SCROLL UTILITIES (snap + scrollbar styling) ==================================================================== */ [data-flwr] .f-scroll-smooth { scroll-behavior: smooth; } [data-flwr] .f-scroll-auto { scroll-behavior: auto; } [data-flwr] .f-snap-x { scroll-snap-type: x var(--_flwr-rt---snap-strictness, mandatory); } [data-flwr] .f-snap-y { scroll-snap-type: y var(--_flwr-rt---snap-strictness, mandatory); } [data-flwr] .f-snap-mandatory { --_flwr-rt---snap-strictness: mandatory; } [data-flwr] .f-snap-proximity { --_flwr-rt---snap-strictness: proximity; } [data-flwr] .f-snap-start { scroll-snap-align: start; } [data-flwr] .f-snap-center { scroll-snap-align: center; } [data-flwr] .f-snap-end { scroll-snap-align: end; } [data-flwr] .f-snap-none { scroll-snap-align: none; } [data-flwr] .f-snap-stop-always { scroll-snap-stop: always; } [data-flwr] .f-snap-stop-normal { scroll-snap-stop: normal; } [data-flwr] .f-overscroll-contain { overscroll-behavior: contain; } [data-flwr] .f-overscroll-none { overscroll-behavior: none; } [data-flwr] .f-scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--_theme---border--strong) transparent; } [data-flwr] .f-scrollbar-none { scrollbar-width: none; } [data-flwr] .f-scrollbar-none::-webkit-scrollbar { display: none; } [data-flwr] .f-scrollbar-brand { scrollbar-color: var(--_palette---core--500) transparent; } [data-flwr] .f-scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; } [data-flwr] .f-scrollbar-thin::-webkit-scrollbar-track { background: transparent; } [data-flwr] .f-scrollbar-thin::-webkit-scrollbar-thumb { background: var(--_theme---border--strong); border-radius: 9999px; } /* ==================================================================== TEXT TRUNCATE / WRAP / DECORATION ==================================================================== */ [data-flwr] .f-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-flwr] .f-break-words { overflow-wrap: break-word; } [data-flwr] .f-break-all { word-break: break-all; } [data-flwr] .f-break-keep { word-break: keep-all; } [data-flwr] .f-hyphens-auto { hyphens: auto; } [data-flwr] .f-hyphens-none { hyphens: none; } [data-flwr] .f-decoration-thin { text-decoration-thickness: 1px; } [data-flwr] .f-decoration-base { text-decoration-thickness: 2px; } [data-flwr] .f-decoration-thick { text-decoration-thickness: 3px; } [data-flwr] .f-underline-offset-1 { text-underline-offset: 0.1em; } [data-flwr] .f-underline-offset-2 { text-underline-offset: 0.2em; } [data-flwr] .f-underline-offset-3 { text-underline-offset: 0.3em; } [data-flwr] .f-underline-offset-4 { text-underline-offset: 0.4em; } /* ==================================================================== LIST UTILITIES ==================================================================== */ [data-flwr] .f-list-disc { list-style-type: disc; list-style-position: outside; padding-inline-start: var(--_spacing---step--5); } [data-flwr] .f-list-decimal { list-style-type: decimal; list-style-position: outside; padding-inline-start: var(--_spacing---step--5); } [data-flwr] .f-list-square { list-style-type: square; list-style-position: outside; padding-inline-start: var(--_spacing---step--5); } [data-flwr] .f-list-circle { list-style-type: circle; list-style-position: outside; padding-inline-start: var(--_spacing---step--5); } [data-flwr] .f-list-none { list-style: none; padding-inline-start: 0; } [data-flwr] .f-list-inside { list-style-position: inside; } [data-flwr] .f-list-outside { list-style-position: outside; } /* ==================================================================== DIVIDE (border between adjacent children, Tailwind-style) ==================================================================== */ [data-flwr] .f-divide-y > * + * { border-block-start: 1px solid var(--_theme---border--subtle); } [data-flwr] .f-divide-x > * + * { border-inline-start: 1px solid var(--_theme---border--subtle); } [data-flwr] .f-divide-y-strong > * + * { border-block-start: 1px solid var(--_theme---border--strong); } [data-flwr] .f-divide-x-strong > * + * { border-inline-start: 1px solid var(--_theme---border--strong); } [data-flwr] .f-divide-dashed > * + * { border-style: dashed; } [data-flwr] .f-divide-dotted > * + * { border-style: dotted; } /* ==================================================================== COLOR-SCHEME (sets native form-control + scrollbar color scheme) ==================================================================== */ [data-flwr] .f-color-scheme-light { color-scheme: light; } [data-flwr] .f-color-scheme-dark { color-scheme: dark; } [data-flwr] .f-color-scheme-auto { color-scheme: light dark; } /* ==================================================================== MOTION GATES (explicit motion control) ==================================================================== */ @media (prefers-reduced-motion: no-preference) { [data-flwr] .f-motion-safe { animation: var(--flwr-motion-safe-animation, none); transition: var(--flwr-motion-safe-transition, none); } } @media (prefers-reduced-motion: reduce) { [data-flwr] .f-motion-reduce { animation: none !important; transition: none !important; } } /* ==================================================================== PRINT ==================================================================== */ @media print { [data-flwr] .f-print-hide { display: none !important; } [data-flwr] .f-print-only { display: revert !important; } [data-flwr] .f-print-break-before { break-before: page; } [data-flwr] .f-print-break-after { break-after: page; } [data-flwr] .f-print-break-avoid { break-inside: avoid; } } [data-flwr] .f-print-only { display: none; } /* ==================================================================== PERFORMANCE / RENDERING HINTS ==================================================================== */ [data-flwr] .f-content-visibility-auto { content-visibility: auto; contain-intrinsic-size: 0 500px; } [data-flwr] .f-will-change-transform { will-change: transform; } [data-flwr] .f-will-change-opacity { will-change: opacity; } [data-flwr] .f-will-change-auto { will-change: auto; } [data-flwr] .f-contain-paint { contain: paint; } [data-flwr] .f-contain-layout { contain: layout; } [data-flwr] .f-contain-strict { contain: strict; } /* ==================================================================== FOCUS UTILITIES (using new Focus collection tokens) ==================================================================== */ [data-flwr] .f-focus-ring:focus-visible { outline: none; box-shadow: var(--_focus---ring); } [data-flwr] .f-focus-outline:focus-visible { outline: var(--_focus---ring-width) solid var(--_focus---ring-color); outline-offset: var(--_focus---ring-offset); box-shadow: none; } [data-flwr] .f-focus-brand:focus-visible { outline: var(--_focus---outline-brand); outline-offset: var(--_focus---ring-offset); } [data-flwr] .f-focus-accent:focus-visible { outline: var(--_focus---outline-accent); outline-offset: var(--_focus---ring-offset); } /* ==================================================================== GOLDEN / CINEMA RATIOS (extended aspect ratios) ==================================================================== */ [data-flwr] .f-ratio-golden { aspect-ratio: 1.618 / 1; } [data-flwr] .f-ratio-cinema-2-35 { aspect-ratio: 2.35 / 1; } [data-flwr] .f-ratio-cinema-2-39 { aspect-ratio: 2.39 / 1; } [data-flwr] .f-ratio-ultrawide { aspect-ratio: 21 / 9; } [data-flwr] .f-ratio-poster { aspect-ratio: 27 / 40; } /* ==================================================================== EXTRA TYPOGRAPHY SIZE — giant (above display) ==================================================================== */ [data-flwr] .f-text-giant { font-size: clamp(4rem, calc(4rem + ((min(1vw, 1cqi) - 0.2rem) * 7.143)), 10rem); line-height: var(--_typography---leading--squashed); letter-spacing: var(--_typography---tracking--tightest); font-weight: var(--_typography---weight--black); } /* ============================================================================ TIER 1 ADDITIONS — layout/structure utilities (parity with LUMOS + CF) ============================================================================ */ /* ---- Named padding utilities (use layout vars, not the spacing scale) ---- */ [data-flwr] .f-padding-gutter { padding: var(--_layout---gutter); } [data-flwr] .f-padding-page-margin { padding: var(--_spacing---page-margin); } [data-flwr] .f-padding-x-gutter { padding-inline: var(--_layout---gutter); } [data-flwr] .f-padding-x-page-margin { padding-inline: var(--_spacing---page-margin); } [data-flwr] .f-padding-y-gutter { padding-block: var(--_layout---gutter); } /* ---- Section padding utilities (one-off section-sized padding on any element) ---- */ [data-flwr] .f-padding-section-xs { padding-block: var(--_spacing---section--xs); } [data-flwr] .f-padding-section-sm { padding-block: var(--_spacing---section--sm); } [data-flwr] .f-padding-section-md { padding-block: var(--_spacing---section--md); } [data-flwr] .f-padding-section-lg { padding-block: var(--_spacing---section--lg); } [data-flwr] .f-padding-section-xl { padding-block: var(--_spacing---section--xl); } /* ---- Column-indent (offset by one column, LUMOS u-column-indent) ---- */ [data-flwr] .f-col-indent { grid-column-start: 2; } /* ---- Column-start 9..12 (we previously only shipped 1..8) ---- */ [data-flwr] .f-col-start-9 { grid-column-start: 9; } [data-flwr] .f-col-start-10 { grid-column-start: 10; } [data-flwr] .f-col-start-11 { grid-column-start: 11; } [data-flwr] .f-col-start-12 { grid-column-start: 12; } /* ---- Row-start 1..6 (different from f-row-N which is span) ---- */ [data-flwr] .f-row-start-auto { grid-row-start: auto; } [data-flwr] .f-row-start-1 { grid-row-start: 1; } [data-flwr] .f-row-start-2 { grid-row-start: 2; } [data-flwr] .f-row-start-3 { grid-row-start: 3; } [data-flwr] .f-row-start-4 { grid-row-start: 4; } [data-flwr] .f-row-start-5 { grid-row-start: 5; } [data-flwr] .f-row-start-6 { grid-row-start: 6; } /* ---- Section spacer (empty div with section-height — for absolute-positioned heroes) ---- */ [data-flwr] .f-section-spacer-xs { height: var(--_spacing---section--xs); } [data-flwr] .f-section-spacer-sm { height: var(--_spacing---section--sm); } [data-flwr] .f-section-spacer-md { height: var(--_spacing---section--md); } [data-flwr] .f-section-spacer-lg { height: var(--_spacing---section--lg); } [data-flwr] .f-section-spacer-xl { height: var(--_spacing---section--xl); } /* ============================================================================ TIER 1 ADDITIONS — layout helpers ============================================================================ */ /* ---- Child contain — children can't visually escape parent bounds ---- */ [data-flwr] .f-child-contain { overflow: clip; isolation: isolate; } /* ---- Hide if empty — auto-hide blocks that have no rendered content ---- */ [data-flwr] .f-hide-if-empty:empty { display: none; } /* ---- SVG sizing helper — for icon SVG direct children ---- */ [data-flwr] .f-svg { width: 100%; height: 100%; display: block; fill: currentColor; color: currentColor; } [data-flwr] .f-svg > svg { width: 100%; height: 100%; display: block; } /* ---- SVG path color hookup — common pattern for inline SVGs ---- */ [data-flwr] .f-path, [data-flwr] .f-path path, [data-flwr] .f-path circle, [data-flwr] .f-path rect, [data-flwr] .f-path polygon, [data-flwr] .f-path line { fill: currentColor; stroke: currentColor; } /* ---- Spacing clean — wipe margins on this element + descendants (CF spacing-clean) ---- */ [data-flwr] .f-spacing-clean, [data-flwr] .f-spacing-clean * { margin: 0 !important; } /* ============================================================================ TIER 1 ADDITIONS — typography ============================================================================ */ [data-flwr] .f-text-color-faded { color: inherit; opacity: 0.6; } [data-flwr] .f-text-color-faded-strong { color: inherit; opacity: 0.4; } /* Inline link styling on a non-anchor element */ [data-flwr] .f-text-link { color: var(--_theme---text--link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; transition: color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .f-text-link:hover { color: var(--_theme---text--link-hover); } /* Inline quote styling — italic + accent border-left + relaxed leading */ [data-flwr] .f-text-quote { font-style: italic; color: var(--_theme---text--muted); line-height: var(--_typography---leading--relaxed); border-inline-start: 3px solid var(--_theme---border--accent); padding-inline-start: var(--_spacing---step--3); } /* All-caps typographic style (uppercase + tracked + slightly smaller) — common pattern */ [data-flwr] .f-text-allcaps { text-transform: uppercase; letter-spacing: var(--_typography---tracking--wider); font-weight: var(--_typography---weight--semibold); } /* ============================================================================ TIER 1 ADDITIONS — sizing ============================================================================ */ /* Extra max-width steps (LUMOS ships these intermediate values) */ [data-flwr] .f-max-w-12ch { max-width: 12ch; } [data-flwr] .f-max-w-14ch { max-width: 14ch; } [data-flwr] .f-max-w-16ch { max-width: 16ch; } [data-flwr] .f-max-w-18ch { max-width: 18ch; } [data-flwr] .f-max-w-70ch { max-width: 70ch; } [data-flwr] .f-max-w-90ch { max-width: 90ch; } [data-flwr] .f-max-w-100ch { max-width: 100ch; } /* f-cover-absolute — distinct from f-cover (which is also absolute but combined w/ width/height) */ [data-flwr] .f-cover-absolute { position: absolute; inset: 0; width: 100%; height: 100%; } /* Icon variants — distinguish square vs height-only sizing (CF distinction) */ [data-flwr] .f-icon-1x1-xs { width: 0.875rem; height: 0.875rem; aspect-ratio: 1 / 1; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-1x1-sm { width: 1rem; height: 1rem; aspect-ratio: 1 / 1; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-1x1-md { width: 1.25rem; height: 1.25rem; aspect-ratio: 1 / 1; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-1x1-lg { width: 1.75rem; height: 1.75rem; aspect-ratio: 1 / 1; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-1x1-xl { width: 2.5rem; height: 2.5rem; aspect-ratio: 1 / 1; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-h-xs { height: 0.875rem; width: auto; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-h-sm { height: 1rem; width: auto; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-h-md { height: 1.25rem; width: auto; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-h-lg { height: 1.75rem; width: auto; flex-shrink: 0; display: inline-flex; } [data-flwr] .f-icon-h-xl { height: 2.5rem; width: auto; flex-shrink: 0; display: inline-flex; } /* ============================================================================ TIER 1 ADDITIONS — z-index, overflow, radius extras ============================================================================ */ [data-flwr] .f-z-0 { z-index: 0; } [data-flwr] .f-z-unset { z-index: unset; } [data-flwr] .f-z-auto { z-index: auto; } [data-flwr] .f-overflow-hidden-left { overflow-x: clip; overflow-clip-margin: 0 100vw 0 0; } [data-flwr] .f-radius-inherit { border-radius: inherit; } /* ============================================================================ TIER 1 ADDITIONS — alignment driver consumers (completes LUMOS pattern) ============================================================================ */ [data-flwr] .f-self-variable { align-self: var(--_alignment---direction); justify-self: var(--_alignment---direction); } [data-flwr] .f-justify-variable { justify-content: var(--_alignment---direction); } [data-flwr] .f-items-variable { align-items: var(--_alignment---direction); } /* ============================================================================ TIER 1 ADDITIONS — escape-hatch slots + flex-center convenience ============================================================================ */ /* Project-specific custom slots — undefined by default, override per-project */ [data-flwr] { --_spacing---custom-1: 0; --_spacing---custom-2: 0; --_spacing---custom-3: 0; } [data-flwr] .f-padding-custom-1 { padding: var(--_spacing---custom-1); } [data-flwr] .f-padding-custom-2 { padding: var(--_spacing---custom-2); } [data-flwr] .f-padding-custom-3 { padding: var(--_spacing---custom-3); } [data-flwr] .f-margin-custom-1 { margin: var(--_spacing---custom-1); } [data-flwr] .f-margin-custom-2 { margin: var(--_spacing---custom-2); } [data-flwr] .f-margin-custom-3 { margin: var(--_spacing---custom-3); } /* Combined center utility — sets flex + justify + items in one class */ [data-flwr] .f-flex-center { display: flex; justify-content: center; align-items: center; } [data-flwr] .f-grid-center { display: grid; place-items: center; } /* v1.1: combined row/column flex utilities — set display + direction + the two alignment axes in one class (the most common flex recipes). */ [data-flwr] .f-row-center { display: flex; align-items: center; justify-content: center; } [data-flwr] .f-row-between { display: flex; align-items: center; justify-content: space-between; } [data-flwr] .f-row-start { display: flex; align-items: center; justify-content: flex-start; } [data-flwr] .f-row-end { display: flex; align-items: center; justify-content: flex-end; } [data-flwr] .f-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } [data-flwr] .f-col-start { display: flex; flex-direction: column; align-items: flex-start; } /* ============================================================================ v1.1: PER-BREAKPOINT OVERRIDES — responsive one-offs (max-width only) Follows the naming of the layout-mode -on-tablet / -on-mobile variants: the default (desktop) state is untouched; the class only bites at the named breakpoint. Desktop-first so the Designer canvas shows the base state. ============================================================================ */ /* Section padding downshift at tablet (991) */ @media (max-width: 991px) { [data-flwr] .f-section-sm-on-tablet { padding-block: var(--_spacing---section--sm); } [data-flwr] .f-section-xs-on-tablet { padding-block: var(--_spacing---section--xs); } } @media (max-width: 767px) { /* Section padding downshift at mobile-landscape (767) */ [data-flwr] .f-section-sm-on-mobile { padding-block: var(--_spacing---section--sm); } [data-flwr] .f-section-xs-on-mobile { padding-block: var(--_spacing---section--xs); } /* Gap downshift at mobile (767) — sets both row + column gap */ [data-flwr] .f-gap-2-on-mobile { row-gap: var(--_spacing---step--2); column-gap: var(--_spacing---step--2); } [data-flwr] .f-gap-3-on-mobile { row-gap: var(--_spacing---step--3); column-gap: var(--_spacing---step--3); } [data-flwr] .f-gap-4-on-mobile { row-gap: var(--_spacing---step--4); column-gap: var(--_spacing---step--4); } /* Heading size downshift at mobile (767) — map to the h2/h3 text-style sizes */ [data-flwr] .f-text-h2-on-mobile { font-size: var(--_typography---size--h2); line-height: var(--_typography---leading--tight); } [data-flwr] .f-text-h3-on-mobile { font-size: var(--_typography---size--h3); line-height: var(--_typography---leading--snug); } } /* ===== .flwr/styles/components.css (flwr Run) ===== */ /* ============================================================================ Flower v1.0 — Components (flwr_* prefix) ---------------------------------------------------------------------------- Block components with snake_case naming. Each consumes Tier-3 Component tokens and exposes [data-flwr-target] hooks for IX3 / GSAP timelines. Naming convention: flwr__ e.g. flwr_card_default_wrap, flwr_card_default_media, flwr_card_default_body State convention: .is- (e.g. flwr_button_primary.is-loading) [data-flwr-state~=""] (e.g. data-state="open expanded") [data-flwr-trigger~=""] (e.g. data-trigger="hover focus") Color animation uses LUMOS-style trigger inversion via color-mix: color: color-mix(in oklab, var(--_button-style---text) calc(100% * var(--_trigger---off)), var(--_button-style---text-hover) calc(100% * var(--_trigger---on)) ); v1.1 note: hardcoded border-radius literals were swept to the --_radius---* token scale (C11): 0.25rem→xs, 0.375rem→sm, 0.5rem→md, 0.75rem→lg, 1rem→xl, 9999px→full. Non-scale radii (0.125rem, 0.625rem, 0.875rem, 50%) were left untouched. Individual rules carry their own "v1.1:" comment notes for non-mechanical changes. ============================================================================ */ /* ==================================================================== BUTTONS — flwr_button_* Variants via .is-secondary / .is-ghost / .is-alert / .is-link Sizes via .is-sm / .is-lg / .is-icon-only ==================================================================== */ [data-flwr] .flwr_button_primary, [data-flwr] .flwr_button_secondary, [data-flwr] .flwr_button_ghost, [data-flwr] .flwr_button_alert, [data-flwr] .flwr_button_link { display: inline-flex; align-items: center; justify-content: center; gap: var(--_spacing---step--2); padding-block: var(--_spacing---step--3); padding-inline: var(--_spacing---step--5); font-family: var(--_typography---family--sans); font-size: var(--_typography---size--body); font-weight: var(--_typography---weight--semibold); line-height: 1; text-decoration: none; border-radius: var(--_component---button--radius); /* v1.1: buttons use their own radius token (was card radius) */ border: 1px solid var(--_button-style---border); background-color: color-mix(in oklab, /* v1.1: oklab, hue-safe */ var(--_button-style---surface) calc(100% * var(--_trigger---off)), var(--_button-style---surface-hover) calc(100% * var(--_trigger---on)) ); color: color-mix(in oklab, /* v1.1: oklab, hue-safe */ var(--_button-style---text) calc(100% * var(--_trigger---off)), var(--_button-style---text-hover) calc(100% * var(--_trigger---on)) ); transition: background-color var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard), color var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard), box-shadow var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard), transform var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* v1.1: removed duplicate .is-small size modifier — .is-sm is the single small size (see Sizes block below; now also covers flwr_button_link). */ /* Outline style — at rest the button is hollow (transparent fill) with a currentColor (variant) border + text. On hover/focus it fills with the ink face and the label keeps the variant color (e.g. primary reads as a dark chip with lime text). No raised/offset-shadow effect. Pair with any color variant + size. In light-mode sections add .is-outline-ink so the resting border/text read as neutral ink (hover still fills dark with the variant color). */ [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link).is-outline { background-color: transparent; border-width: 2px; border-style: solid; border-color: var(--_button-style---text); color: var(--_button-style---text); box-shadow: none; } [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link).is-outline.is-outline-ink { border-color: var(--_palette---neutral--900); color: var(--_palette---neutral--900); } [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link).is-outline:is(:hover, :focus-visible) { background-color: var(--_palette---neutral--900); border-color: var(--_button-style---text); color: var(--_button-style---text); } /* Inverted fill — the variant colour fills the button and the label + border read as neutral ink (the opposite of the default ink fill + coloured label). For CTAs placed on light / brand-coloured sections. */ [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link).is-invert { background-color: var(--_button-style---text); border-color: var(--_palette---neutral--900); color: var(--_palette---neutral--900); } [data-flwr] .flwr_button_primary[data-flwr-trigger~="hover"]:hover, [data-flwr] .flwr_button_secondary[data-flwr-trigger~="hover"]:hover, [data-flwr] .flwr_button_ghost[data-flwr-trigger~="hover"]:hover, [data-flwr] .flwr_button_alert[data-flwr-trigger~="hover"]:hover, [data-flwr] .flwr_button_link[data-flwr-trigger~="hover"]:hover { --_trigger---on: 1; --_trigger---off: 0; } /* v1.1: bare :hover fallback — buttons authored WITHOUT data-flwr-trigger still get hover feedback. Sets the same on/off weighting the attribute rule uses, so applying both is idempotent (hover resolves to the identical end colour either way). */ [data-flwr] .flwr_button_primary:hover, [data-flwr] .flwr_button_secondary:hover, [data-flwr] .flwr_button_ghost:hover, [data-flwr] .flwr_button_alert:hover, [data-flwr] .flwr_button_link:hover { --_trigger---on: 1; --_trigger---off: 0; } [data-flwr] .flwr_button_primary:focus-visible, [data-flwr] .flwr_button_secondary:focus-visible, [data-flwr] .flwr_button_ghost:focus-visible, [data-flwr] .flwr_button_alert:focus-visible, [data-flwr] .flwr_button_link:focus-visible { /* v1.1: link now shares the focus ring */ outline: none; box-shadow: var(--_button-style---ring-focus); } [data-flwr] .flwr_button_primary:active, [data-flwr] .flwr_button_secondary:active, [data-flwr] .flwr_button_ghost:active, [data-flwr] .flwr_button_alert:active, [data-flwr] .flwr_button_link:active { /* v1.1: link now shares the active press */ transform: scale(0.98); } /* Variant: Secondary — outlined */ [data-flwr] .flwr_button_secondary { --_button-style---surface: transparent; --_button-style---surface-hover: var(--_theme---surface--sunken); --_button-style---text: var(--_theme---text--main); --_button-style---text-hover: var(--_theme---text--strong); --_button-style---border: var(--_theme---border--main); --_button-style---border-hover: var(--_theme---border--strong); } /* Variant: Ghost — text-only with hover surface */ [data-flwr] .flwr_button_ghost { --_button-style---surface: transparent; --_button-style---surface-hover: var(--_theme---accent--soft); --_button-style---text: var(--_theme---text--accent); --_button-style---text-hover: var(--_theme---accent--hover); --_button-style---border: transparent; } /* Variant: Danger */ [data-flwr] .flwr_button_alert { --_button-style---surface: var(--_palette---alert--500); --_button-style---surface-hover: var(--_palette---alert--700); --_button-style---text: var(--_palette---neutral--0); --_button-style---text-hover: var(--_palette---neutral--0); --_button-style---border: transparent; } /* Variant: Link — text only, underlined */ [data-flwr] .flwr_button_link { background: transparent; border: none; padding: 0; color: var(--_theme---text--link); text-decoration: underline; text-underline-offset: 0.2em; } [data-flwr] .flwr_button_link[data-flwr-trigger~="hover"]:hover, [data-flwr] .flwr_button_link:hover { /* v1.1: bare :hover fallback (link colour is set directly, not via the trigger color-mix) */ color: var(--_theme---text--link-hover); } /* Sizes */ [data-flwr] .flwr_button_primary.is-sm, [data-flwr] .flwr_button_secondary.is-sm, [data-flwr] .flwr_button_ghost.is-sm, [data-flwr] .flwr_button_alert.is-sm, [data-flwr] .flwr_button_link.is-sm { /* v1.1: is-sm now also covers link (absorbed the deleted is-small) */ padding-block: var(--_spacing---step--2); padding-inline: var(--_spacing---step--4); font-size: var(--_typography---size--small); } [data-flwr] .flwr_button_primary.is-lg, [data-flwr] .flwr_button_secondary.is-lg, [data-flwr] .flwr_button_ghost.is-lg, [data-flwr] .flwr_button_alert.is-lg { padding-block: var(--_spacing---step--4); padding-inline: var(--_spacing---step--6); font-size: var(--_typography---size--lead); } [data-flwr] .flwr_button_primary.is-icon-only, [data-flwr] .flwr_button_secondary.is-icon-only, [data-flwr] .flwr_button_ghost.is-icon-only, [data-flwr] .flwr_button_alert.is-icon-only { padding: var(--_spacing---step--3); aspect-ratio: 1 / 1; } /* Icons inside any button — keep intrinsic aspect ratio, never squish. Covers / children and the icon-leading / icon-trailing hooks. Sized by height so non-square logos (e.g. a mascot) keep their proportions. */ [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link) > :is(img, svg), [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link) [data-flwr-target~="icon-leading"], [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link) [data-flwr-target~="icon-trailing"] { height: 1.25em; width: auto; flex-shrink: 0; object-fit: contain; } [data-flwr] :is(.flwr_button_primary, .flwr_button_secondary, .flwr_button_ghost, .flwr_button_alert, .flwr_button_link).is-icon-only > :is(img, svg) { height: 1.5em; } /* States */ [data-flwr] .flwr_button_primary.is-disabled, [data-flwr] .flwr_button_secondary.is-disabled, [data-flwr] .flwr_button_ghost.is-disabled, [data-flwr] .flwr_button_alert.is-disabled, [data-flwr] .flwr_button_primary[disabled], [data-flwr] .flwr_button_secondary[disabled], [data-flwr] .flwr_button_ghost[disabled], [data-flwr] .flwr_button_alert[disabled] { opacity: 0.5; pointer-events: none; cursor: not-allowed; } [data-flwr] .flwr_button_primary.is-loading, [data-flwr] .flwr_button_secondary.is-loading, [data-flwr] .flwr_button_ghost.is-loading, [data-flwr] .flwr_button_alert.is-loading { color: transparent; pointer-events: none; position: relative; } [data-flwr] .flwr_button_primary.is-loading::after, [data-flwr] .flwr_button_secondary.is-loading::after, [data-flwr] .flwr_button_ghost.is-loading::after, [data-flwr] .flwr_button_alert.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border-radius: var(--_radius---full); border: 2px solid currentColor; border-top-color: transparent; color: var(--_button-style---text); animation: flwr-rt-spin 0.7s linear infinite; } @keyframes flwr-rt-spin { to { transform: rotate(360deg); } } /* Button group */ [data-flwr] .flwr_button_group { display: flex; flex-wrap: wrap; gap: var(--_spacing---step--3); align-items: center; } /* ==================================================================== CARDS — flwr_card_* Variants: default / interactive / featured ==================================================================== */ [data-flwr] .flwr_card_default_wrap, [data-flwr] .flwr_card_interactive_wrap, [data-flwr] .flwr_card_featured_wrap { display: flex; flex-direction: column; background-color: var(--_component---card--surface); color: var(--_component---card--text); border: 1px solid var(--_component---card--border); border-radius: var(--_component---card--radius); overflow: hidden; position: relative; } [data-flwr] .flwr_card_interactive_wrap { cursor: pointer; transition: background-color var(--_flwr-rt---transition-medium) var(--_flwr-rt---ease-standard), border-color var(--_flwr-rt---transition-medium) var(--_flwr-rt---ease-standard), box-shadow var(--_flwr-rt---transition-medium) var(--_flwr-rt---ease-standard), transform var(--_flwr-rt---transition-medium) var(--_flwr-rt---ease-standard); } [data-flwr] .flwr_card_interactive_wrap[data-flwr-trigger~="hover"]:hover { background-color: var(--_component---card--surface-hover); border-color: var(--_component---card--border-hover); box-shadow: var(--_component---card--shadow-hover); transform: translateY(-2px); } [data-flwr] .flwr_card_featured_wrap { background: linear-gradient(135deg, var(--_palette---core--500), var(--_palette---alternate--500)); color: var(--_palette---neutral--0); border-color: transparent; box-shadow: var(--_component---card--shadow); } [data-flwr] .flwr_card_default_media, [data-flwr] .flwr_card_interactive_media, [data-flwr] .flwr_card_featured_media { aspect-ratio: 16 / 9; background-color: var(--_theme---surface--sunken); overflow: hidden; } [data-flwr] .flwr_card_default_media > img, [data-flwr] .flwr_card_interactive_media > img, [data-flwr] .flwr_card_featured_media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; } [data-flwr] .flwr_card_default_body, [data-flwr] .flwr_card_interactive_body, [data-flwr] .flwr_card_featured_body { display: flex; flex-direction: column; gap: var(--_spacing---step--3); padding: var(--_component---card--padding); flex: 1; } [data-flwr] .flwr_card_default_eyebrow, [data-flwr] .flwr_card_interactive_eyebrow, [data-flwr] .flwr_card_featured_eyebrow { font-size: var(--_typography---size--tiny); font-weight: var(--_typography---weight--semibold); text-transform: uppercase; letter-spacing: var(--_typography---tracking--wider); color: var(--_theme---text--muted); } [data-flwr] .flwr_card_default_title, [data-flwr] .flwr_card_interactive_title, [data-flwr] .flwr_card_featured_title { font-size: var(--_typography---size--h4); line-height: var(--_typography---leading--snug); font-weight: var(--_typography---weight--semibold); letter-spacing: var(--_typography---tracking--tight); margin: 0; } [data-flwr] .flwr_card_default_description, [data-flwr] .flwr_card_interactive_description, [data-flwr] .flwr_card_featured_description { font-size: var(--_typography---size--body); line-height: var(--_typography---leading--relaxed); color: var(--_theme---text--muted); margin: 0; } [data-flwr] .flwr_card_default_footer, [data-flwr] .flwr_card_interactive_footer, [data-flwr] .flwr_card_featured_footer { display: flex; align-items: center; gap: var(--_spacing---step--3); margin-block-start: auto; padding-block-start: var(--_spacing---step--3); } /* ==================================================================== FIELDS (form inputs) — flwr_field_* ==================================================================== */ [data-flwr] .flwr_field_wrap { display: flex; flex-direction: column; gap: var(--_spacing---step--2); } [data-flwr] .flwr_field_label { font-size: var(--_typography---size--small); font-weight: var(--_typography---weight--medium); color: var(--_theme---text--main); letter-spacing: var(--_typography---tracking--normal); } [data-flwr] .flwr_field_text, [data-flwr] .flwr_field_textarea, [data-flwr] .flwr_field_select { display: block; width: 100%; padding-block: var(--_component---field--padding-block); padding-inline: var(--_component---field--padding-inline); font-family: var(--_typography---family--sans); font-size: var(--_typography---size--body); line-height: var(--_typography---leading--snug); color: var(--_component---field--text); background-color: var(--_component---field--surface); border: 1px solid var(--_component---field--border); border-radius: var(--_component---field--radius); transition: border-color var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard), box-shadow var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard), background-color var(--_flwr-rt---transition-fast) var(--_flwr-rt---ease-standard); -webkit-appearance: none; appearance: none; } [data-flwr] .flwr_field_text::placeholder, [data-flwr] .flwr_field_textarea::placeholder { color: var(--_component---field--placeholder); } [data-flwr] .flwr_field_text:hover, [data-flwr] .flwr_field_textarea:hover, [data-flwr] .flwr_field_select:hover { background-color: var(--_component---field--surface-hover); border-color: var(--_component---field--border-hover); } [data-flwr] .flwr_field_text:focus-visible, [data-flwr] .flwr_field_textarea:focus-visible, [data-flwr] .flwr_field_select:focus-visible { outline: none; border-color: var(--_component---field--border-focus); box-shadow: var(--_component---field--ring-focus); } [data-flwr] .flwr_field_textarea { min-height: 6rem; resize: vertical; line-height: var(--_typography---leading--relaxed); } [data-flwr] .flwr_field_select { /* v1.1: chevron drawn with two theme-coloured gradients. Was an SVG data-URI with fill='currentColor' — currentColor never resolves inside a background image, so the arrow rendered black and vanished on dark themes. A native
…
…
Data attributes (on wrap): data-flwr-swiper-autoplay="true|false" data-flwr-swiper-autoplay-delay="4000" data-flwr-swiper-loop="true|false" data-flwr-swiper-speed="600" data-flwr-swiper-mousewheel="true|false" data-flwr-swiper-follow-finger="true|false" data-flwr-swiper-free-mode="true|false" data-flwr-swiper-slide-to-clicked="true|false" ==================================================================== */ [data-flwr] .flwr_swiper_wrap { position: relative; width: 100%; overflow: hidden; } [data-flwr] .flwr_swiper_track { display: flex; gap: var(--_component---swiper--gap); } [data-flwr] .flwr_swiper_slide { flex: 0 0 auto; min-width: 0; } [data-flwr] .flwr_swiper_arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--_component---swiper--arrow-size); height: var(--_component---swiper--arrow-size); background-color: var(--_component---swiper--arrow-bg); color: var(--_component---swiper--arrow-color); border: var(--_component---swiper--arrow-border); border-radius: var(--_radius---full); cursor: pointer; transition: background-color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_swiper_arrow:hover { background-color: var(--_component---swiper--arrow-bg-hover); } [data-flwr] .flwr_swiper_arrow.swiper-button-disabled { opacity: 0.4; pointer-events: none; } [data-flwr] .flwr_swiper_pagination { display: flex; justify-content: center; gap: var(--_spacing---step--2); margin-block-start: var(--_spacing---step--4); } [data-flwr] .flwr_swiper_bullet { width: var(--_component---swiper--bullet-size); height: var(--_component---swiper--bullet-size); border-radius: var(--_radius---full); background-color: var(--_component---swiper--bullet-bg); border: none; padding: 0; cursor: pointer; transition: background-color var(--_motion---duration-fast) var(--_motion---ease-standard), width var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_swiper_bullet.is-active { width: var(--_component---swiper--bullet-active-w); background-color: var(--_component---swiper--bullet-active-bg); } /* ==================================================================== MAP — flwr_map_* Theme-aware Leaflet wrapper (Leaflet loaded by user). Multi-marker from CMS data attributes, theme-driven popup styling, optional duotone tile tinting via SVG filters, ctrl+wheel zoom guard. Pattern adapted from Alttura's map_component. Markup:
Open in Google Maps
==================================================================== */ [data-flwr] .flwr_map_wrap { position: relative; width: 100%; background-color: var(--_component---map--bg); } [data-flwr] .flwr_map_canvas { position: relative; width: 100%; height: 100%; background-color: var(--_component---map--bg); } /* THEME OVERRIDES — set --_component---map--* per theme */ [data-flwr] .flwr_map_wrap[data-flwr-map-theme="light"] { --_component---map--bg: var(--_theme---surface--main); --_component---map--popup-bg: var(--_theme---surface--main); --_component---map--text: var(--_theme---text--main); --_component---map--text-muted: var(--_theme---text--muted); --_component---map--border: var(--_theme---border--subtle); } [data-flwr] .flwr_map_wrap[data-flwr-map-theme="voyager"] { --_component---map--bg: var(--_theme---surface--sunken); --_component---map--popup-bg: var(--_theme---surface--main); } /* DUOTONE TILE TINTING via SVG filters (defs in styleguide) */ [data-flwr] .flwr_map_wrap[data-flwr-map-tint="duotone-light"] .leaflet-tile-pane { filter: url(#flwr-duotone-light); } [data-flwr] .flwr_map_wrap[data-flwr-map-tint="duotone-dark"] .leaflet-tile-pane { filter: url(#flwr-duotone-dark); } [data-flwr] .flwr_map_wrap[data-flwr-map-tint="duotone-brand"] .leaflet-tile-pane { filter: url(#flwr-duotone-brand); } /* Markers — flwr-themed circles */ [data-flwr] .flwr_map_wrap .leaflet-marker-icon.flwr_map_marker { background-color: transparent; border: 2px solid var(--_component---map--accent); border-radius: 50%; width: var(--_component---map--marker-size) !important; height: var(--_component---map--marker-size) !important; cursor: pointer; transition: transform var(--_motion---duration-base) var(--_motion---ease-emphasized), border-width var(--_motion---duration-base) var(--_motion---ease-emphasized), background-color var(--_motion---duration-base) var(--_motion---ease-emphasized); } [data-flwr] .flwr_map_wrap .leaflet-marker-icon.flwr_map_marker:hover { transform: scale(1.2); } [data-flwr] .flwr_map_wrap .leaflet-marker-icon.flwr_map_marker.is-active { background-color: var(--_component---map--accent); transform: scale(1.3); border-width: 3px; } /* Popups — themed */ [data-flwr] .flwr_map_wrap .leaflet-popup-content-wrapper { background-color: var(--_component---map--popup-bg) !important; color: var(--_component---map--text) !important; border: 1px solid var(--_component---map--border); border-radius: var(--_component---map--popup-radius); padding: 0; box-shadow: 0 8px 32px color-mix(in oklch, var(--_palette---neutral--1000) 30%, transparent); overflow: hidden; } [data-flwr] .flwr_map_wrap .leaflet-popup-content { margin: 0; padding: var(--_spacing---step--4); font-family: inherit; font-size: var(--_typography---size--small); min-width: 12rem; max-width: 18rem; } [data-flwr] .flwr_map_wrap .leaflet-popup-tip { background-color: var(--_component---map--popup-bg) !important; border: 1px solid var(--_component---map--border); border-top: none; border-right: none; } [data-flwr] .flwr_map_wrap .leaflet-popup-close-button { color: var(--_component---map--text) !important; background-color: transparent !important; border: none !important; opacity: 0.6; } [data-flwr] .flwr_map_wrap .leaflet-popup-close-button:hover { opacity: 1; } [data-flwr] .flwr_map_wrap .flwr_map_popup_title { font-weight: var(--_typography---weight--semibold); margin: 0 0 var(--_spacing---step--2); text-transform: uppercase; letter-spacing: var(--_typography---tracking--tight); } [data-flwr] .flwr_map_wrap .flwr_map_popup_address { color: var(--_component---map--text-muted); margin: 0; line-height: var(--_typography---leading--relaxed); } /* Hide Leaflet's default attribution + zoom-control restyle */ [data-flwr] .flwr_map_wrap .leaflet-control-attribution { display: none !important; } [data-flwr] .flwr_map_wrap .leaflet-bar a { background-color: var(--_component---map--bg) !important; border-color: var(--_component---map--accent) !important; color: var(--_component---map--accent) !important; } [data-flwr] .flwr_map_wrap .leaflet-bar a:hover { background-color: var(--_component---map--accent) !important; color: var(--_component---map--bg) !important; } /* Action button (Google Maps fallback / external) */ [data-flwr] .flwr_map_action { position: absolute; bottom: var(--_spacing---step--4); right: var(--_spacing---step--4); z-index: 1000; padding: var(--_spacing---step--3) var(--_spacing---step--5); background-color: transparent; color: var(--_component---map--text); border: 1px solid var(--_component---map--border); border-radius: var(--_radius---full); font-size: var(--_typography---size--small); text-decoration: none; cursor: pointer; transition: background-color var(--_motion---duration-base) var(--_motion---ease-emphasized), color var(--_motion---duration-base) var(--_motion---ease-emphasized), transform var(--_motion---duration-base) var(--_motion---ease-emphasized); } [data-flwr] .flwr_map_action:hover { background-color: var(--_component---map--accent); color: var(--_component---map--bg); transform: translateY(-2px); } /* ==================================================================== SCRUBBER — flwr_scrubber_* Hover-driven image-sequence player. Mouse X position across the wrap maps to a frame in the layer stack. Cross-fades between adjacent frames for smooth scrubbing. Touch supported. Pattern adapted from Alttura's tod-scrubber. Markup:
…
==================================================================== */ [data-flwr] .flwr_scrubber_wrap { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: var(--_component---scrubber--cursor); border-radius: inherit; } [data-flwr] .flwr_scrubber_layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity var(--_component---scrubber--fade-duration) var(--_component---scrubber--fade-ease); pointer-events: none; user-select: none; -webkit-user-drag: none; border-radius: inherit; will-change: opacity; } /* First frame visible by default (overridden by JS once initialized) */ [data-flwr] .flwr_scrubber_layer:first-child { opacity: 1; } /* ==================================================================== VERTICAL TABS — flwr_tabs_* with .is-vertical modifier Sidebar list of tabs + content panel area side-by-side. Use with [data-flwr="tabs"] runtime hydration. ==================================================================== */ [data-flwr] .flwr_tabs_wrap.is-vertical { display: grid; grid-template-columns: var(--_component---tabs-vertical--sidebar-width) 1fr; gap: var(--_component---tabs-vertical--gap); align-items: start; border-bottom: none; } [data-flwr] .flwr_tabs_wrap.is-vertical > .flwr_tabs_list { flex-direction: column; border-bottom: none; border-right: 1px solid var(--_theme---border--subtle); gap: 0; padding-inline-end: var(--_spacing---step--3); } [data-flwr] .flwr_tabs_wrap.is-vertical .flwr_tabs_trigger { text-align: start; padding: var(--_component---tabs-vertical--trigger-pad) var(--_spacing---step--4); border-radius: var(--_radius---sm); display: flex; align-items: center; gap: var(--_spacing---step--3); position: relative; } [data-flwr] .flwr_tabs_wrap.is-vertical .flwr_tabs_trigger[aria-selected="true"]::after, [data-flwr] .flwr_tabs_wrap.is-vertical .flwr_tabs_trigger.is-active::after { left: auto; right: calc(-1 * var(--_spacing---step--3) - 1px); top: 0; bottom: 0; width: var(--_component---tabs-vertical--indicator-w); height: auto; background-color: var(--_component---tabs-vertical--indicator-color); } [data-flwr] .flwr_tabs_trigger_icon { display: inline-flex; width: 1.125rem; height: 1.125rem; flex-shrink: 0; } [data-flwr] .flwr_tabs_trigger_match { margin-inline-start: auto; font-size: var(--_typography---size--tiny); background: var(--_theme---accent--soft); color: var(--_theme---text--accent); padding: 0.125rem 0.5rem; border-radius: var(--_radius---full); min-width: 1.5rem; text-align: center; display: none; } [data-flwr] .flwr_tabs_trigger_match[data-count]:not([data-count="0"]) { display: inline-block; } /* ==================================================================== TAB SWAP TITLES — flwr_tabs_* with [data-flwr-tabs-title-swap] The tab heading lives outside the panels and slides in/out as the active panel changes. JS animates --_tabs-swap---progress 0→1. Pattern adapted from Alttura. ==================================================================== */ [data-flwr] .flwr_tabs_swap_title { display: block; overflow: hidden; --_tabs-swap---progress: 0; } [data-flwr] .flwr_tabs_swap_title_inner { display: inline-block; transform: translateX(calc(-120% * var(--_tabs-swap---progress))); opacity: calc(1 - var(--_tabs-swap---progress) * 1.2); transition: transform var(--_motion---duration-base) var(--_motion---ease-emphasized), opacity var(--_motion---duration-base) var(--_motion---ease-emphasized); } [data-flwr] .flwr_tabs_swap_title.is-entering .flwr_tabs_swap_title_inner { /* JS toggles is-entering for the new title so it slides in from right */ transform: translateX(120%); opacity: 0; transition: none; } /* ==================================================================== DOCUMENT SEARCH — flwr_search_* In-document text search with highlight, prev/next navigation, match counter, clear button. JS uses TreeWalker to mark matches. Pattern adapted from Alttura legal page. ==================================================================== */ [data-flwr] .flwr_search_bar { position: relative; display: flex; align-items: center; gap: var(--_spacing---step--2); padding: var(--_component---search--bar-pad-block) var(--_component---search--bar-pad-inline); background-color: var(--_component---search--bar-bg); border: 1px solid var(--_component---search--bar-border); border-radius: var(--_component---search--bar-radius); width: 100%; } [data-flwr] .flwr_search_input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--_theme---text--main); font: inherit; font-size: var(--_typography---size--small); } [data-flwr] .flwr_search_input::placeholder { color: var(--_theme---text--subtle); } /* v1.2: keyboard focus was invisible (outline: none on the base rule, no replacement). */ [data-flwr] .flwr_search_input:focus-visible { box-shadow: var(--_component---field--ring-focus); border-radius: var(--_radius---sm); } [data-flwr] .flwr_search_icon { width: var(--_component---search--icon-size); height: var(--_component---search--icon-size); color: var(--_theme---text--muted); flex-shrink: 0; } [data-flwr] .flwr_search_navigation { display: none; align-items: center; gap: var(--_spacing---step--2); } [data-flwr] .flwr_search_navigation.is-active { display: inline-flex; } [data-flwr] .flwr_search_match_counter { font-size: var(--_typography---size--tiny); color: var(--_theme---text--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-flwr] .flwr_search_nav_btn, [data-flwr] .flwr_search_clear_btn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--_theme---text--muted); border-radius: var(--_radius---full); transition: background-color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_search_nav_btn:hover, [data-flwr] .flwr_search_clear_btn:hover { background-color: var(--_theme---surface--sunken); color: var(--_theme---text--main); } /* Highlight styling injected by runtime.js into the searched content */ [data-flwr] .flwr_search_highlight { background-color: var(--_component---search--highlight-bg); color: var(--_theme---text--main); border-radius: 0.125rem; padding: 0 0.0625em; } [data-flwr] .flwr_search_highlight.is-current { background-color: var(--_component---search--highlight-active); color: var(--_component---search--highlight-text); } /* ==================================================================== SLIDER THUMBNAILS — extends flwr_swiper_* with thumbs config. Markup pattern:
main slider
...
Runtime auto-creates a second Swiper for the thumbs track and wires .controller / .thumbs between main and thumbs. ==================================================================== */ [data-flwr] .flwr_swiper_thumbs_wrap { margin-block-start: var(--_spacing---step--3); overflow: hidden; } [data-flwr] .flwr_swiper_thumbs_track { display: flex; gap: var(--_spacing---step--2); } [data-flwr] .flwr_swiper_thumb { flex: 0 0 auto; width: 5rem; aspect-ratio: 4/3; padding: 0; background: transparent; border: 2px solid transparent; border-radius: var(--_radius---sm); overflow: hidden; cursor: pointer; opacity: 0.55; transition: opacity var(--_motion---duration-fast) var(--_motion---ease-standard), border-color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_swiper_thumb:hover { opacity: 0.85; } [data-flwr] .flwr_swiper_thumb.is-active, [data-flwr] .flwr_swiper_thumb.swiper-slide-thumb-active { opacity: 1; border-color: var(--_theme---accent--main); } [data-flwr] .flwr_swiper_thumb img, [data-flwr] .flwr_swiper_thumb > * { width: 100%; height: 100%; object-fit: cover; } /* ==================================================================== FULL-SCREEN MENU — flwr_fullscreen_menu_* Native taking full viewport. Logo + giant link list + footer (contact + socials + lang switch). Backdrop with optional media slot. Pattern adapted from Alttura fullscreen_menu. ==================================================================== */ [data-flwr] .flwr_fullscreen_menu_wrap { position: fixed; inset: 0; width: 100vw; max-width: 100vw; /* dvh = dynamic viewport height: on mobile 100vh is the LARGE viewport (the area behind the browser address/toolbar), so a 100vh menu is taller than the visible screen and its footer CTAs hide behind the chrome. dvh tracks the actually-visible area and reflows as the toolbar shows/hides. 100vh kept as the fallback first. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 0; border: none; background-color: var(--_component---fsmenu--surface); color: var(--_component---fsmenu--text); overflow: hidden; } [data-flwr] .flwr_fullscreen_menu_wrap[open] { display: grid; grid-template-columns: 1fr 1fr; /* v1.1: 2-col is the desktop DEFAULT (Designer-safe); collapses to 1-col at ≤991px below (was a min-width:56em query the Designer canvas ignored) */ } @media (max-width: 991px) { [data-flwr] .flwr_fullscreen_menu_wrap[open] { grid-template-columns: 1fr; } } [data-flwr] .flwr_fullscreen_menu_wrap::backdrop { background: color-mix(in oklch, var(--_palette---neutral--1000) 70%, transparent); backdrop-filter: blur(8px); } [data-flwr] .flwr_fullscreen_menu_close { position: absolute; top: var(--_spacing---step--4); right: var(--_spacing---step--4); width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--_component---fsmenu--text); border: 1px solid color-mix(in oklch, var(--_component---fsmenu--text) 25%, transparent); border-radius: var(--_radius---full); cursor: pointer; font-size: 1.5rem; line-height: 1; z-index: 10; } [data-flwr] .flwr_fullscreen_menu_close:hover { background: color-mix(in oklch, var(--_component---fsmenu--text) 12%, transparent); } [data-flwr] .flwr_fullscreen_menu_media { display: block; /* v1.1: media column shown by DEFAULT (desktop/Designer canvas); hidden at ≤991px below */ background-color: var(--_theme---surface--sunken); background-size: cover; background-position: center; } @media (max-width: 991px) { [data-flwr] .flwr_fullscreen_menu_media { display: none; } } [data-flwr] .flwr_fullscreen_menu_content { display: flex; flex-direction: column; /* flex-start (not space-between) + margin-block:auto on the links block below. space-between on an overflow-y:auto container clips the TOP when the content is taller than the viewport (many links / small screens): the first item is pushed above the scrollable origin and can't be reached. flex-start keeps the scroll origin at the top; the links' auto block-margins centre them exactly like space-between when everything fits, and collapse to 0 when it overflows so the whole menu scrolls cleanly from the top. */ justify-content: flex-start; padding: var(--_component---fsmenu--padding); /* v1.1: extra top clearance so the logo/first link never sits under the pinned close button (2.75rem tall at top: step--4). Pairs with the flex-start + margin-block:auto overflow fix above. */ padding-block-start: calc(var(--_component---fsmenu--padding) + var(--_spacing---step--6)); overflow-y: auto; } [data-flwr] .flwr_fullscreen_menu_logo { margin-block-end: var(--_spacing---step--6); } [data-flwr] .flwr_fullscreen_menu_links { list-style: none; padding: 0; margin-inline: 0; margin-block: auto; display: flex; flex-direction: column; gap: var(--_component---fsmenu--link-gap); } [data-flwr] .flwr_fullscreen_menu_link { font-size: var(--_component---fsmenu--link-size); font-weight: var(--_typography---weight--semibold); line-height: 1; color: var(--_component---fsmenu--text); text-decoration: none; display: inline-block; transition: color var(--_motion---duration-fast) var(--_motion---ease-standard), transform var(--_motion---duration-fast) var(--_motion---ease-back); } [data-flwr] .flwr_fullscreen_menu_link:hover { color: var(--_component---fsmenu--accent); transform: translateX(0.25rem); } [data-flwr] .flwr_fullscreen_menu_link.is-active { color: var(--_component---fsmenu--accent); } [data-flwr] .flwr_fullscreen_menu_footer { display: flex; flex-wrap: wrap; gap: var(--_spacing---step--5); margin-block-start: var(--_spacing---step--6); padding-block-start: var(--_spacing---step--5); border-top: 1px solid color-mix(in oklch, var(--_component---fsmenu--text) 18%, transparent); font-size: var(--_typography---size--small); } [data-flwr] .flwr_fullscreen_menu_socials { display: flex; gap: var(--_spacing---step--3); } [data-flwr] .flwr_fullscreen_menu_social { width: 1.5rem; height: 1.5rem; color: var(--_component---fsmenu--text); opacity: 0.7; transition: opacity var(--_motion---duration-fast) var(--_motion---ease-standard), color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_fullscreen_menu_social:hover { opacity: 1; color: var(--_component---fsmenu--accent); } /* ==================================================================== TOGGLE VARIANTS — extends flwr_toggle_* Three variants: .is-position → switch with sliding circle that flips L↔R (brand-switch style) .is-bulb → glowing circle indicator (lang-bulb style) Pattern adapted from Alttura. ==================================================================== */ /* Position variant — wider track, larger circle, optional [data-position="left|right"] hook */ [data-flwr] .flwr_toggle_wrap.is-position { display: inline-flex; align-items: center; cursor: pointer; } [data-flwr] .flwr_toggle_wrap.is-position .flwr_toggle_track { width: var(--_component---toggle-position--track-w); height: var(--_component---toggle-position--track-h); border: var(--_component---toggle-position--border) solid currentColor; border-radius: var(--_radius---full); background: transparent; position: relative; transition: border-color var(--_component---toggle-position--duration) var(--_motion---ease-standard); } [data-flwr] .flwr_toggle_wrap.is-position:hover .flwr_toggle_track { border-color: var(--_component---toggle-position--accent); } [data-flwr] .flwr_toggle_wrap.is-position .flwr_toggle_knob { position: absolute; top: 50%; left: calc(var(--_component---toggle-position--border) + 0.25rem); width: var(--_component---toggle-position--circle); height: var(--_component---toggle-position--circle); background: var(--_component---toggle-position--accent); border-radius: 50%; transform: translateY(-50%); transition: left var(--_component---toggle-position--duration) var(--_motion---ease-emphasized); } [data-flwr] .flwr_toggle_wrap.is-position[data-flwr-state~="checked"] .flwr_toggle_knob, [data-flwr] .flwr_toggle_wrap.is-position[data-position="right"] .flwr_toggle_knob { left: calc(100% - var(--_component---toggle-position--circle) - var(--_component---toggle-position--border) - 0.25rem); } /* Bulb variant — circular indicator that lights up + glows on active */ [data-flwr] .flwr_toggle_wrap.is-bulb { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; padding: 0; } [data-flwr] .flwr_toggle_wrap.is-bulb .flwr_toggle_knob { width: var(--_component---toggle-bulb--size); height: var(--_component---toggle-bulb--size); border-radius: 50%; border: var(--_component---toggle-bulb--border) solid var(--_component---toggle-bulb--accent); background: transparent; transition: background-color var(--_motion---duration-base) var(--_motion---ease-standard), box-shadow var(--_motion---duration-base) var(--_motion---ease-standard); } [data-flwr] .flwr_toggle_wrap.is-bulb:hover .flwr_toggle_knob { box-shadow: 0 0 8px color-mix(in oklch, var(--_component---toggle-bulb--accent) calc(var(--_component---toggle-bulb--glow-strength) * 100%), transparent); } [data-flwr] .flwr_toggle_wrap.is-bulb[data-flwr-state~="checked"] .flwr_toggle_knob, [data-flwr] .flwr_toggle_wrap.is-bulb.is-active .flwr_toggle_knob { background: var(--_component---toggle-bulb--accent); box-shadow: 0 0 10px var(--_component---toggle-bulb--accent), 0 0 20px color-mix(in oklch, var(--_component---toggle-bulb--accent) 60%, transparent), 0 0 30px color-mix(in oklch, var(--_component---toggle-bulb--accent) 40%, transparent); } /* ==================================================================== CARD WITH CORNER OVERLAY — flwr_card_overlay_* Card with a corner trigger that reveals a full-card overlay on hover/focus or click. Corner stays visible at all times; overlay slides/fades in over the content. Modifiers on the wrap: .is-corner-tl / -tr / -bl / -br where the trigger sits .is-trigger-hover (default) / .is-trigger-click ==================================================================== */ [data-flwr] .flwr_card_overlay_wrap { position: relative; display: flex; flex-direction: column; background-color: var(--_component---card--surface); color: var(--_component---card--text); border: var(--_theme---border--width) solid var(--_component---card--border); border-radius: var(--_component---card--radius); overflow: hidden; isolation: isolate; } [data-flwr] .flwr_card_overlay_corner { position: absolute; z-index: 3; width: var(--_component---card-overlay--corner-size); height: var(--_component---card-overlay--corner-size); display: inline-flex; align-items: center; justify-content: center; background-color: var(--_component---card-overlay--corner-bg); color: var(--_component---card-overlay--corner-color); border: none; border-radius: var(--_radius---full); cursor: pointer; transition: transform var(--_component---card-overlay--duration) var(--_component---card-overlay--ease); } [data-flwr] .flwr_card_overlay_wrap.is-corner-tl .flwr_card_overlay_corner { top: var(--_spacing---step--3); left: var(--_spacing---step--3); } [data-flwr] .flwr_card_overlay_wrap.is-corner-tr .flwr_card_overlay_corner, [data-flwr] .flwr_card_overlay_wrap:not([class*="is-corner-"]) .flwr_card_overlay_corner { top: var(--_spacing---step--3); right: var(--_spacing---step--3); } [data-flwr] .flwr_card_overlay_wrap.is-corner-bl .flwr_card_overlay_corner { bottom: var(--_spacing---step--3); left: var(--_spacing---step--3); } [data-flwr] .flwr_card_overlay_wrap.is-corner-br .flwr_card_overlay_corner { bottom: var(--_spacing---step--3); right: var(--_spacing---step--3); } [data-flwr] .flwr_card_overlay_corner:hover { transform: scale(1.1); } [data-flwr] .flwr_card_overlay_panel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--_component---card-overlay--pad); background: var(--_component---card-overlay--scrim); color: var(--_component---card-overlay--text); opacity: 0; transform: translateY(1rem); transition: opacity var(--_component---card-overlay--duration) var(--_component---card-overlay--ease), transform var(--_component---card-overlay--duration) var(--_component---card-overlay--ease); pointer-events: none; } /* Hover trigger (default) */ [data-flwr] .flwr_card_overlay_wrap:not(.is-trigger-click):hover .flwr_card_overlay_panel, [data-flwr] .flwr_card_overlay_wrap:not(.is-trigger-click):focus-within .flwr_card_overlay_panel { opacity: 1; transform: translateY(0); pointer-events: auto; } [data-flwr] .flwr_card_overlay_wrap:not(.is-trigger-click):hover .flwr_card_overlay_corner, [data-flwr] .flwr_card_overlay_wrap:not(.is-trigger-click):focus-within .flwr_card_overlay_corner { transform: rotate(45deg); } /* Click trigger — runtime.js toggles [data-flwr-state="open"] on the wrap */ [data-flwr] .flwr_card_overlay_wrap.is-trigger-click[data-flwr-state~="open"] .flwr_card_overlay_panel { opacity: 1; transform: translateY(0); pointer-events: auto; } [data-flwr] .flwr_card_overlay_wrap.is-trigger-click[data-flwr-state~="open"] .flwr_card_overlay_corner { transform: rotate(45deg); } /* ==================================================================== NAVBAR — flwr_navbar_* Full-featured nav system: skip link, optional banner row, desktop logo + menu + dropdowns + actions, mobile hamburger w/ clip-path menu animation, dropdown backdrop, body-scroll-lock when open. Container-query mobile/desktop swap at --_component---navbar--mobile-bp. ==================================================================== */ [data-flwr] .flwr_navbar_wrap { position: relative; z-index: var(--_z---nav); /* v1.1: z token */ background-color: var(--_component---navbar--surface); color: var(--_component---navbar--text); border-bottom: 1px solid var(--_component---navbar--border); container-type: inline-size; } [data-flwr] .flwr_navbar_wrap.is-sticky { position: sticky; top: 0; } [data-flwr] .flwr_navbar_wrap.is-fixed { position: fixed; top: 0; left: 0; right: 0; } [data-flwr] .flwr_navbar_wrap.is-scrolled { background-color: var(--_component---navbar--surface-scrolled); backdrop-filter: blur(12px); } /* Auto-hide / transparent-at-top navbar — opt-in via data-flwr-navbar-scroll="auto-hide" (pair with .is-fixed so it overlays a dark hero). Transparent, borderless and blur-free at the top; the runtime adds .is-scrolled (solid blur bg + border) once you scroll, and .is-hidden (slides up) when scrolling down — returns on scroll up. */ [data-flwr] .flwr_navbar_wrap[data-flwr-navbar-scroll="auto-hide"] { background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: transform var(--_motion---duration-slow) cubic-bezier(0.16, 1, 0.3, 1), background-color var(--_motion---duration-base) var(--_motion---ease-standard), border-color var(--_motion---duration-base) var(--_motion---ease-standard), backdrop-filter var(--_motion---duration-base) var(--_motion---ease-standard); } [data-flwr] .flwr_navbar_wrap[data-flwr-navbar-scroll="auto-hide"].is-scrolled { background-color: var(--_component---navbar--surface-scrolled); border-bottom-color: var(--_component---navbar--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-flwr] .flwr_navbar_wrap[data-flwr-navbar-scroll="auto-hide"].is-hidden { transform: translateY(-100%); } [data-flwr] .flwr_navbar_skip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -150%); padding: var(--_spacing---step--2) var(--_spacing---step--4); background: var(--_theme---accent--main); color: var(--_theme---accent--text); border-radius: 0 0 var(--_radius---md) var(--_radius---md); /* v1.1: radius tokens */ text-decoration: none; z-index: 10; } [data-flwr] .flwr_navbar_skip:focus { transform: translate(-50%, 0); } [data-flwr] .flwr_navbar_banner { height: var(--_component---navbar--banner-height); display: flex; align-items: center; justify-content: center; padding-inline: var(--_spacing---step--4); background-color: var(--_theme---surface--inverse); color: var(--_theme---text--inverse); font-size: var(--_typography---size--small); position: relative; } [data-flwr] .flwr_navbar_banner_close { position: absolute; right: var(--_spacing---step--3); background: transparent; border: none; color: inherit; cursor: pointer; padding: 0.25rem 0.5rem; } [data-flwr] .flwr_navbar_inner { height: var(--_component---navbar--height); display: flex; align-items: center; gap: var(--_spacing---step--5); padding-inline: var(--_spacing---step--5); max-width: var(--_layout---max-content); margin: 0 auto; } [data-flwr] .flwr_navbar_logo { flex-shrink: 0; font-weight: var(--_typography---weight--semibold); text-decoration: none; color: inherit; } [data-flwr] .flwr_navbar_menu { display: flex; /* v1.1: desktop menu visible by DEFAULT so the Webflow Designer canvas (which does not evaluate container/min-width queries) shows the real desktop nav; hidden at ≤991px below */ align-self: stretch; align-items: center; gap: var(--_spacing---step--2); list-style: none; margin: 0; padding: 0; } [data-flwr] .flwr_navbar_actions { display: flex; align-items: center; gap: var(--_spacing---step--3); margin-inline-start: auto; } [data-flwr] .flwr_navbar_link { display: inline-flex; align-items: center; padding: var(--_spacing---step--2) var(--_spacing---step--3); font-size: var(--_typography---size--body); /* v1.1: nav links match body/buttons — never smaller (N58) */ color: inherit; text-decoration: none; border-radius: var(--_radius---sm); transition: background-color var(--_motion---duration-fast) var(--_motion---ease-standard), color var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_navbar_link:hover { background-color: color-mix(in oklch, currentColor 10%, transparent); } [data-flwr] .flwr_navbar_link.is-active, [data-flwr] .flwr_navbar_link[aria-current="page"] { color: var(--_component---navbar--accent); } /* Dropdown — uses the grid-template-rows: 0fr → 1fr trick for animated auto height */ [data-flwr] .flwr_navbar_dropdown { position: relative; align-self: stretch; display: flex; align-items: center; } [data-flwr] .flwr_navbar_dropdown_trigger { display: inline-flex; align-items: center; gap: 0.25rem; background: transparent; border: none; cursor: pointer; font: inherit; color: inherit; padding: var(--_spacing---step--2) var(--_spacing---step--3); border-radius: var(--_radius---sm); } [data-flwr] .flwr_navbar_dropdown_trigger:hover { background-color: color-mix(in oklch, currentColor 10%, transparent); } [data-flwr] .flwr_navbar_dropdown_trigger::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-inline-start: 0.25rem; transition: transform var(--_motion---duration-fast) var(--_motion---ease-standard); } [data-flwr] .flwr_navbar_dropdown[data-flwr-state~="open"] .flwr_navbar_dropdown_trigger::after { transform: rotate(225deg) translate(-2px, -2px); } [data-flwr] .flwr_navbar_dropdown_menu { position: absolute; top: calc(100% + 0.85rem); left: 0; min-width: 12rem; background-color: var(--_theme---surface--main); border: 1px solid var(--_component---navbar--border); border-radius: var(--_radius---md); box-shadow: 0 12px 32px color-mix(in oklch, var(--_palette---neutral--1000) 25%, transparent); margin: 0; padding: var(--_spacing---step--1) 0; list-style: none; overflow: hidden; display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows var(--_component---navbar--dropdown-close-duration) var(--_motion---ease-standard), opacity var(--_component---navbar--dropdown-close-duration) var(--_motion---ease-standard), visibility 0s linear var(--_component---navbar--dropdown-close-duration); } [data-flwr] .flwr_navbar_dropdown_menu > * { overflow: hidden; } [data-flwr] .flwr_navbar_dropdown[data-flwr-state~="open"] .flwr_navbar_dropdown_menu { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows var(--_component---navbar--dropdown-open-duration) var(--_motion---ease-standard), opacity var(--_component---navbar--dropdown-open-duration) var(--_motion---ease-standard), visibility 0s linear 0s; } [data-flwr] .flwr_navbar_dropdown_item { display: block; padding: var(--_spacing---step--2) var(--_spacing---step--4); color: var(--_theme---text--main); text-decoration: none; font-size: var(--_typography---size--small); line-height: 1.3; } /* Nested sub-dropdown (flyout) — a dropdown item that reveals a second-level menu to its right on hover/focus. For product categories that hold multiple products (e.g. Cuentas -> account types). CSS-only: the desktop nav is hover-driven, so no runtime hook is needed. A menu that contains a sub-dropdown opts out of the grid-rows clip animation (via :has) so the flyout can escape. */ [data-flwr] .flwr_navbar_dropdown_menu:has(.flwr_navbar_dropdown_sub) { display: block; overflow: visible; padding-top: var(--_spacing---step--1); padding-bottom: var(--_spacing---step--1); } [data-flwr] .flwr_navbar_dropdown_menu:has(.flwr_navbar_dropdown_sub) > * { overflow: visible; } [data-flwr] .flwr_navbar_dropdown_sub { position: relative; } [data-flwr] .flwr_navbar_dropdown_subtrigger { display: flex; align-items: center; justify-content: space-between; column-gap: var(--_spacing---step--2); } [data-flwr] .flwr_navbar_dropdown_caret { width: 0.6em; height: 0.6em; flex-shrink: 0; opacity: 0.55; transition: transform 0.18s var(--_motion---ease-standard), opacity 0.18s var(--_motion---ease-standard); } [data-flwr] .flwr_navbar_dropdown_sub:hover > .flwr_navbar_dropdown_subtrigger .flwr_navbar_dropdown_caret, [data-flwr] .flwr_navbar_dropdown_sub:focus-within > .flwr_navbar_dropdown_subtrigger .flwr_navbar_dropdown_caret { transform: translateX(2px); opacity: 1; } [data-flwr] .flwr_navbar_dropdown_submenu { position: absolute; top: calc(-1 * var(--_spacing---step--1)); left: 100%; min-width: 13rem; margin: 0; padding-top: var(--_spacing---step--1); padding-bottom: var(--_spacing---step--1); padding-left: 0; padding-right: 0; list-style: none; background-color: var(--_theme---surface--main); border: 1px solid var(--_component---navbar--border); border-radius: var(--_radius---md); box-shadow: 0 12px 32px color-mix(in oklch, var(--_palette---neutral--1000) 25%, transparent); opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 0.18s var(--_motion---ease-standard), transform 0.18s var(--_motion---ease-standard), visibility 0s linear 0.18s; z-index: 2; } [data-flwr] .flwr_navbar_dropdown_sub:hover > .flwr_navbar_dropdown_submenu, [data-flwr] .flwr_navbar_dropdown_sub:focus-within > .flwr_navbar_dropdown_submenu { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 0.18s var(--_motion---ease-standard), transform 0.18s var(--_motion---ease-standard), visibility 0s linear 0s; } [data-flwr] .flwr_navbar_dropdown_item:hover { background-color: color-mix(in oklch, currentColor 10%, transparent); color: var(--_component---navbar--accent); } [data-flwr] .flwr_navbar_dropdown_backdrop { position: fixed; /* Full-viewport cover; the navbar + mobile menu (z --_z---nav 1200) stay above this (z --_z---backdrop 1150), so the bar reads sharp while everything below blurs — and there is no top gap when the navbar height differs from --_component---navbar--height-total. */ inset: 0; background: color-mix(in oklch, var(--_palette---neutral--1000) 25%, transparent); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--_component---navbar--dropdown-close-duration) var(--_motion---ease-standard); z-index: var(--_z---backdrop); /* v1.1: 1150 — above sticky content, below nav bar + mobile menu (1200) */ } [data-flwr] .flwr_navbar_wrap[data-flwr-state~="dropdown-open"] ~ .flwr_navbar_dropdown_backdrop, [data-flwr] .flwr_navbar_wrap:has(.flwr_navbar_dropdown[data-flwr-state~="open"]) .flwr_navbar_dropdown_backdrop { opacity: 1; } /* Mobile hamburger + menu */ [data-flwr] .flwr_navbar_hamburger { display: none; /* v1.1: hidden by DEFAULT (desktop/Designer canvas); shown at ≤991px below */ align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: transparent; border: 1px solid var(--_component---navbar--border); border-radius: var(--_radius---sm); cursor: pointer; margin-inline-start: auto; } [data-flwr] .flwr_navbar_hamburger_lines { display: inline-flex; flex-direction: column; gap: 4px; } [data-flwr] .flwr_navbar_hamburger_lines::before, [data-flwr] .flwr_navbar_hamburger_lines::after, [data-flwr] .flwr_navbar_hamburger_lines > span { content: ""; display: block; width: 18px; height: 2px; background-color: currentColor; transition: transform var(--_motion---duration-base) var(--_motion---ease-standard), opacity var(--_motion---duration-base) var(--_motion---ease-standard); } [data-flwr] .flwr_navbar_hamburger_lines > span { display: block; } [data-flwr] .flwr_navbar_wrap[data-flwr-state~="menu-open"] .flwr_navbar_hamburger_lines::before { transform: translateY(6px) rotate(45deg); } [data-flwr] .flwr_navbar_wrap[data-flwr-state~="menu-open"] .flwr_navbar_hamburger_lines > span { opacity: 0; } [data-flwr] .flwr_navbar_wrap[data-flwr-state~="menu-open"] .flwr_navbar_hamburger_lines::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu — clip-path open/close animation (Alttura pattern) */ @keyframes flwr-rt-navbar-menu-open { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes flwr-rt-navbar-menu-close { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } } [data-flwr] .flwr_navbar_mobile_menu { position: fixed; inset: var(--_component---navbar--height-total) 0 0 0; background-color: var(--_theme---surface--main); padding: var(--_spacing---step--6); overflow-y: auto; z-index: var(--_z---nav); /* v1.1: 1200 — above the dropdown backdrop (1150) */ display: none; /* v1.1: hidden by DEFAULT (desktop/Designer canvas); shown as flex at ≤991px below */ flex-direction: column; gap: var(--_spacing---step--3); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } [data-flwr] .flwr_navbar_wrap[data-flwr-state~="menu-open"] .flwr_navbar_mobile_menu { animation: flwr-rt-navbar-menu-open var(--_component---navbar--menu-open-duration) ease-in-out forwards; } [data-flwr] .flwr_navbar_wrap:not([data-flwr-state~="menu-open"]) .flwr_navbar_mobile_menu { animation: flwr-rt-navbar-menu-close var(--_component---navbar--menu-close-duration) ease-in-out forwards; } [data-flwr] .flwr_navbar_mobile_link { display: block; padding: var(--_spacing---step--3) var(--_spacing---step--4); font-size: var(--_typography---size--h5); font-weight: var(--_typography---weight--medium); color: var(--_theme---text--main); text-decoration: none; border-bottom: 1px solid var(--_component---navbar--border); } /* v1.1: mobile/desktop swap is now a Webflow-safe max-width media query (was an @container query — the Designer canvas evaluates neither container nor min-width queries, so it always rendered the mobile nav). Desktop is the default state above; this collapses to the mobile nav at the tablet breakpoint. */ @media (max-width: 991px) { [data-flwr] .flwr_navbar_menu { display: none; } [data-flwr] .flwr_navbar_hamburger { display: inline-flex; } [data-flwr] .flwr_navbar_mobile_menu { display: flex; } } /* Body scroll lock when nav menu open */ body:has(.flwr_navbar_wrap[data-flwr-state~="menu-open"]) { overflow: hidden; } /* ==================================================================== COLLAPSE — flwr_collapse_* Animated height-auto via the grid-template-rows: 0fr → 1fr trick. Toggle .is-open on the wrap (runtime.js handles click on [data-flwr-target="trigger"] elements). Use for accordions, FAQ items, expand/collapse panels, dropdown bodies. Fully styleLess-compatible — no :has() / [aria-expanded] / @container needed. ==================================================================== */ [data-flwr] .flwr_collapse_wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--_component---collapse--duration) var(--_component---collapse--ease); } [data-flwr] .flwr_collapse_wrap.is-open { grid-template-rows: 1fr; } [data-flwr] .flwr_collapse_inner { overflow: hidden; min-height: 0; } /* Convenience: trigger button + chevron rotation when open */ [data-flwr] .flwr_collapse_trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--_spacing---step--3); padding: var(--_spacing---step--3) var(--_spacing---step--4); background: transparent; border: none; width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; } [data-flwr] .flwr_collapse_trigger_icon { transition: transform var(--_motion---duration-base) var(--_motion---ease-standard); } [data-flwr] .flwr_collapse_wrap.is-open + .flwr_collapse_trigger .flwr_collapse_trigger_icon, [data-flwr] [data-flwr="collapse"].is-open .flwr_collapse_trigger_icon { transform: rotate(180deg); } /* ===== .flwr/styles/runtime.css (flwr Run) ===== */ /* ============================================================================ Flower v1.0 — Runtime ---------------------------------------------------------------------------- The single CSS embed Flower needs at the page level. Goal: <3KB, ~115 lines, lives in Webflow Site Settings → Custom Code → Head. Contains: cascade layers, container queries, scroll-driven animations, anchor positioning for components, text-balance/aspect-ratio fallbacks for properties Webflow rejects in styleLess. Scoped to [data-flwr] so it never leaks into non-Flower sections. ============================================================================ */ @layer flwr.reset, flwr.tokens, flwr.runtime, flwr.utilities; @layer flwr.runtime { /* ===== Container queries — named threshold containers ===== */ /* Establishes a container context on the wrapper; descendants query its width */ [data-flwr] .f-container-sm { container: threshold-sm / inline-size; } [data-flwr] .f-container-md { container: threshold-md / inline-size; } [data-flwr] .f-container-lg { container: threshold-lg / inline-size; } /* Threshold breakpoints — sm 30em, md 48em, lg 62em */ /* v1.1: canonical semantics — `-below` applies BELOW the threshold, `-above` ABOVE it. grid-below/grid-above were previously swapped (grid-below fired at >= 48em). flwr-shim.css's named-threshold (sm/md/lg) variants mirror these. */ @container threshold-md (width < 48em) { [data-flwr] .f-grid-below { display: flex; flex-direction: column; } [data-flwr] .f-order-unset-below { order: unset; } [data-flwr] .f-all-unset-below { all: unset; } } @container threshold-md (width >= 48em) { [data-flwr] .f-grid-above { display: flex; flex-direction: column; } [data-flwr] .f-order-unset-above { order: unset; } [data-flwr] .f-all-unset-above { all: unset; } } /* ===== Scroll-driven animations — compositor thread, zero JS ===== */ @media (prefers-reduced-motion: no-preference) { [data-flwr] .f-fade-in-on-scroll { animation: flwr-rt-fade-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-fade-up-on-scroll { animation: flwr-rt-fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-fade-down-on-scroll { animation: flwr-rt-fade-down linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-slide-in-left-on-scroll { animation: flwr-rt-slide-left linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-slide-in-right-on-scroll { animation: flwr-rt-slide-right linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-scale-in-on-scroll { animation: flwr-rt-scale-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] .f-parallax-slow { animation: flwr-rt-parallax-slow linear; animation-timeline: scroll(root block); } [data-flwr] .f-parallax-fast { animation: flwr-rt-parallax-fast linear; animation-timeline: scroll(root block); } } /* v1.1: keyframes hoisted out of the PRM gate — definitions are inert until referenced, so declaring them unconditionally lets keep-marked elements use them under reduced-motion (see the reduce block below). */ @keyframes flwr-rt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes flwr-rt-fade-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } } @keyframes flwr-rt-fade-down { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: none; } } @keyframes flwr-rt-slide-left { from { opacity: 0; transform: translateX(-3rem); } to { opacity: 1; transform: none; } } @keyframes flwr-rt-slide-right { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } } @keyframes flwr-rt-scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } @keyframes flwr-rt-parallax-slow { from { transform: translateY(-8%); } to { transform: translateY(8%); } } @keyframes flwr-rt-parallax-fast { from { transform: translateY(-15%); } to { transform: translateY(15%); } } /* v1.1: brand-critical scroll motion opts out of PRM via data-flwr-motion="keep". The reveal/parallax utilities above stay gated behind no-preference (correct — view()/scroll()-timeline animations ignore animation-duration, so the tokens.css reduced-motion killer can't stop them; the gate is the only reliable off-switch). Re-open the gate for keep-marked elements only, consistent with tokens.css exempting data-flwr-motion="keep" from the global motion killer. */ @media (prefers-reduced-motion: reduce) { [data-flwr] [data-flwr-motion~="keep"].f-fade-in-on-scroll { animation: flwr-rt-fade-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-fade-up-on-scroll { animation: flwr-rt-fade-up linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-fade-down-on-scroll { animation: flwr-rt-fade-down linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-slide-in-left-on-scroll { animation: flwr-rt-slide-left linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-slide-in-right-on-scroll { animation: flwr-rt-slide-right linear both;animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-scale-in-on-scroll { animation: flwr-rt-scale-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } [data-flwr] [data-flwr-motion~="keep"].f-parallax-slow { animation: flwr-rt-parallax-slow linear; animation-timeline: scroll(root block); } [data-flwr] [data-flwr-motion~="keep"].f-parallax-fast { animation: flwr-rt-parallax-fast linear; animation-timeline: scroll(root block); } } /* ===== View Transitions API — page morph hooks ===== */ [data-flwr] .f-page-transition-hero { view-transition-name: flwr-hero; } [data-flwr] .f-page-transition-title { view-transition-name: flwr-title; } [data-flwr] .f-page-transition-image { view-transition-name: flwr-image; } [data-flwr] .f-page-transition-card { view-transition-name: flwr-card; } /* ===== Anchor positioning — dropdowns, popovers, tooltips (zero JS) ===== */ /* @scope used to keep anchor name local to each component instance */ @scope ([data-flwr="dropdown"]) { [data-flwr-target="trigger"] { anchor-name: --flwr-anchor-dropdown; } [data-flwr-target="menu"] { position-anchor: --flwr-anchor-dropdown; position: absolute; top: anchor(bottom); left: anchor(left); margin-top: var(--_spacing---step--2); } } @scope ([data-flwr="tooltip"]) { [data-flwr-target="trigger"] { anchor-name: --flwr-anchor-tooltip; } [data-flwr-target="bubble"] { position-anchor: --flwr-anchor-tooltip; position: absolute; bottom: anchor(top); left: anchor(center); translate: -50% calc(-1 * var(--_spacing---step--2)); } } @scope ([data-flwr="popover"]) { [data-flwr-target="trigger"] { anchor-name: --flwr-anchor-popover; } [data-flwr-target="panel"] { position-anchor: --flwr-anchor-popover; position: absolute; top: anchor(bottom); left: anchor(center); translate: -50% var(--_spacing---step--2); } } /* ===== Webflow-rejected properties (must live in embed) ===== */ /* text-wrap — Webflow rejects in styleLess, fully Baseline 2026 in browsers */ [data-flwr] .f-text-balance { text-wrap: balance; } [data-flwr] .f-text-pretty { text-wrap: pretty; } [data-flwr] .f-text-nowrap { text-wrap: nowrap; } /* aspect-ratio — Webflow rejects, native CSS supported */ [data-flwr] .f-ratio-square { aspect-ratio: 1 / 1; } [data-flwr] .f-ratio-video { aspect-ratio: 16 / 9; } [data-flwr] .f-ratio-widescreen { aspect-ratio: 21 / 9; } [data-flwr] .f-ratio-portrait { aspect-ratio: 3 / 4; } [data-flwr] .f-ratio-landscape { aspect-ratio: 4 / 3; } [data-flwr] .f-ratio-1-1 { aspect-ratio: 1 / 1; } [data-flwr] .f-ratio-16-9 { aspect-ratio: 16 / 9; } [data-flwr] .f-ratio-3-2 { aspect-ratio: 3 / 2; } [data-flwr] .f-ratio-2-3 { aspect-ratio: 2 / 3; } [data-flwr] .f-ratio-4-5 { aspect-ratio: 4 / 5; } [data-flwr] .f-ratio-5-4 { aspect-ratio: 5 / 4; } /* ===== Ratio clamp — responsive media frames ===== The f-ratio-* classes above answer "what shape is this?". These answer "how does that shape CHANGE across screens?" — the question every project otherwise hand-writes per component per breakpoint, and gets inconsistent. A frame declares TWO shapes; the system derives the rest. --_frame---wide ratio on desktop --_frame---narrow ratio on mobile --_frame---mid tablet — auto-derived as the average of the two --_frame---cap svh ceiling, so a portrait frame can never push the rest of the page below the fold --_frame---focus object-position. A portrait crop of a landscape photo eats the SIDES, so this is mostly a horizontal call. Ratios are unitless NUMBERS (1.3333, not 4 / 3) because a number can be interpolated and a ratio literal cannot — that is what makes is-fluid work. Lives in the runtime embed because Webflow rejects aspect-ratio in styleLess, same reason as the f-ratio-* block above. */ [data-flwr] { --_ratio---ultra: 2.4; /* 12:5 cinematic band */ --_ratio---wide: 1.7778; /* 16:9 video */ --_ratio---photo: 1.5; /* 3:2 35mm */ --_ratio---classic: 1.3333; /* 4:3 classic */ --_ratio---square: 1; /* 1:1 */ --_ratio---portrait: 0.8; /* 4:5 editorial */ --_ratio---tall: 0.6667; /* 2:3 poster */ /* Viewport progress: 0 at the phone anchor (375px), 1 at the desktop anchor (1440px), in px on purpose: the stepped mode keys off px breakpoints, and rem anchors drift with the root font-size (a styleguide running an 18px root reached only t=0.84 at 1440px). CSS cannot divide a length by a length, so through tan(atan2(, 1px)) — the standard length → number cast. Only is-fluid reads this; the stepped default needs no math. */ --_ratio---t: clamp(0, calc(tan(atan2(100vw - 375px, 1px)) / 1065), 1); } [data-flwr] .f-frame { --_frame---wide: var(--_ratio---classic); --_frame---narrow: var(--_ratio---portrait); --_frame---mid: calc((var(--_frame---wide) + var(--_frame---narrow)) / 2); --_frame---cap: 78svh; --_frame---focus: 50% 50%; box-sizing: border-box; position: relative; width: 100%; /* aspect-ratio + max-height IS the clamp: the box keeps its shape until that shape would get too tall, then it stops growing and the image crops. */ aspect-ratio: var(--_frame---wide); max-height: var(--_frame---cap); overflow: hidden; } /* Custom properties inherit, so the image reads the frame's focal point without a relational selector — the class alone is enough, and Webflow keeps both classes editable. */ [data-flwr] .f-frame-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--_frame---focus); } /* Behaviours — each is just a pair of endpoints. */ [data-flwr] .f-frame.is-hero { --_frame---wide: var(--_ratio---classic); --_frame---narrow: var(--_ratio---portrait); --_frame---cap: 72svh; } [data-flwr] .f-frame.is-editorial { --_frame---wide: var(--_ratio---photo); --_frame---narrow: var(--_ratio---classic); } [data-flwr] .f-frame.is-tile { --_frame---wide: var(--_ratio---square); --_frame---narrow: var(--_ratio---square); } [data-flwr] .f-frame.is-band { --_frame---wide: var(--_ratio---ultra); --_frame---narrow: var(--_ratio---wide); --_frame---cap: 64svh; } [data-flwr] .f-frame.is-portrait { --_frame---wide: var(--_ratio---portrait); --_frame---narrow: var(--_ratio---portrait); --_frame---cap: 88svh; } /* Focal point — portrait crops eat the sides, so say which side to keep. */ [data-flwr] .f-frame.is-focus-left { --_frame---focus: 0% 50%; } [data-flwr] .f-frame.is-focus-right { --_frame---focus: 100% 50%; } [data-flwr] .f-frame.is-focus-top { --_frame---focus: 50% 0%; } [data-flwr] .f-frame.is-focus-bottom { --_frame---focus: 50% 100%; } [data-flwr] .f-frame.is-focus-face { --_frame---focus: 50% 28%; } /* The two steps. Tablet is the average — declared once, never per component. */ @media (max-width: 991px) { [data-flwr] .f-frame { aspect-ratio: var(--_frame---mid); } } @media (max-width: 767px) { [data-flwr] .f-frame { aspect-ratio: var(--_frame---narrow); } } /* is-fluid — no steps at all: the ratio itself interpolates across the viewport range, so the frame morphs landscape → square → portrait smoothly instead of snapping at 991/767. Outranks the breakpoint rules above on specificity, so it wins wherever it is applied. Needs tan()/atan2() (Chrome 111+, Safari 15.4+, Firefox 108+) — a lower bar than the oklch(from …) relative colours flwr already requires. */ [data-flwr] .f-frame.is-fluid { aspect-ratio: calc(var(--_frame---narrow) + (var(--_frame---wide) - var(--_frame---narrow)) * var(--_ratio---t)); } /* hyphens / user-select — also Webflow-rejected */ [data-flwr] .f-hyphens-auto { hyphens: auto; } [data-flwr] .f-user-select-none { user-select: none; } [data-flwr] .f-user-select-text { user-select: text; } /* container-type — Webflow-rejected, needed for f-container-* */ /* (already declared above via container shorthand) */ /* Subgrid — works in browsers, Webflow may strip — declare here for safety */ [data-flwr] .f-grid-subgrid { display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; } /* ===== Leading-trim implementation (LUMOS pattern) ===== Reads --_text-style---trim-top/-bottom tokens and compensates for half-leading via pseudo-element negative margins. Apply f-leading-trim to any block that should optically align (heading next to button, stacked headings, hero text). Eliminates visual whitespace inconsistency. Future-proof: when CSS leading-trim ships natively, this becomes a no-op fallback. */ @supports not (text-box-trim: both) { [data-flwr] .f-leading-trim::before { content: ""; display: block; height: 0; margin-top: calc(-0.5lh + var(--_text-style---trim-top, 0.33em)); } [data-flwr] .f-leading-trim::after { content: ""; display: block; height: 0; margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom, 0.38em)); } } @supports (text-box-trim: both) { [data-flwr] .f-leading-trim { text-box-trim: both; text-box-edge: cap alphabetic; } } /* Auto-applied to f-text-* heading utilities by default — opt out with f-no-leading-trim */ [data-flwr] .f-text-display:not(.f-no-leading-trim), [data-flwr] .f-text-h1:not(.f-no-leading-trim), [data-flwr] .f-text-h2:not(.f-no-leading-trim), [data-flwr] .f-text-h3:not(.f-no-leading-trim), [data-flwr] .f-text-h4:not(.f-no-leading-trim), [data-flwr] .f-text-h5:not(.f-no-leading-trim), [data-flwr] .f-text-h6:not(.f-no-leading-trim) { /* Inherits the leading-trim behavior via the f-leading-trim pattern */ } @supports (text-box-trim: both) { [data-flwr] .f-text-display:not(.f-no-leading-trim), [data-flwr] .f-text-h1:not(.f-no-leading-trim), [data-flwr] .f-text-h2:not(.f-no-leading-trim), [data-flwr] .f-text-h3:not(.f-no-leading-trim), [data-flwr] .f-text-h4:not(.f-no-leading-trim), [data-flwr] .f-text-h5:not(.f-no-leading-trim), [data-flwr] .f-text-h6:not(.f-no-leading-trim) { text-box-trim: both; text-box-edge: cap alphabetic; } } } /* ============================================================================ RESPONSIVE GRID COLLAPSE — UNLAYERED (must override unlayered f-grid-N defaults in utilities.css). Cascade-layer precedence rule: unlayered styles always win over @layered styles, so these rules sit OUTSIDE @layer flwr.runtime to take precedence over the rigid grid defaults. f-grid-2/3/4/6/8 reorganize automatically at common widths. Add `is-rigid` on the same element to opt out and lock N columns. Both @media (browser viewport) and @container (any inline-size container — styleguide sim + user f-container-*) fire in parallel. ============================================================================ */ @media (max-width: 991px) { [data-flwr] .f-grid-3:not(.is-rigid), [data-flwr] .f-grid-4:not(.is-rigid), [data-flwr] .f-grid-6:not(.is-rigid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 767px) { [data-flwr] .f-grid-2:not(.is-rigid), [data-flwr] .f-grid-3:not(.is-rigid), [data-flwr] .f-grid-4:not(.is-rigid) { grid-template-columns: 1fr; } [data-flwr] .f-grid-6:not(.is-rigid), [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 478px) { [data-flwr] .f-grid-6:not(.is-rigid), [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: 1fr; } } @container (width < 62rem) { /* v1.1: rem not em — em resolves against the container's FLUID font-size, collapsing grids ~9% early on large viewports */ [data-flwr] .f-grid-3:not(.is-rigid), [data-flwr] .f-grid-4:not(.is-rigid), [data-flwr] .f-grid-6:not(.is-rigid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container (width < 48rem) { /* v1.1: rem (see above) */ [data-flwr] .f-grid-2:not(.is-rigid), [data-flwr] .f-grid-3:not(.is-rigid), [data-flwr] .f-grid-4:not(.is-rigid) { grid-template-columns: 1fr; } [data-flwr] .f-grid-6:not(.is-rigid), [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (width < 30rem) { /* v1.1: rem (see above) */ [data-flwr] .f-grid-6:not(.is-rigid), [data-flwr] .f-grid-8:not(.is-rigid) { grid-template-columns: 1fr; } } /* ============================================================================ BROWSER POLISH — global rules for the browser-level details that ship with every flwr site. Selection, scrollbars, caret, tap highlight, focus rings, autofill, placeholder, list markers, dialog backdrop, view transitions, image drag, form spinners, print basics. All theme-token driven so they cascade with f-mode-* changes. Unlayered so they're not overridden by component utilities. ============================================================================ */ /* ---- Text selection ---- Tokens are declared per theme (.f-mode-*) and per section (.f-section-*) in tokens.css so this single global rule paints whatever cascades. Images opt out — dragging selection across media should not paint a colored box. */ [data-flwr] ::selection { background-color: var(--_theme---selection--background); color: var(--_theme---selection--text); } [data-flwr] img::selection, [data-flwr] svg::selection, [data-flwr] video::selection, [data-flwr] picture::selection { background-color: transparent; } /* ---- Scrollbars (Firefox standard + WebKit) ---- */ [data-flwr] { scrollbar-color: color-mix(in oklch, var(--_theme---text--main) 22%, transparent) transparent; scrollbar-width: thin; } [data-flwr] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-flwr] ::-webkit-scrollbar-track { background: transparent; } [data-flwr] ::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--_theme---text--main) 18%, transparent); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } [data-flwr] ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--_theme---text--main) 35%, transparent); } [data-flwr] ::-webkit-scrollbar-corner { background: transparent; } /* ---- Caret color (text inputs + contenteditable) ---- */ [data-flwr] input, [data-flwr] textarea, [data-flwr] [contenteditable] { caret-color: var(--_theme---accent--main); } /* ---- Mobile tap highlight (the blue/grey flash on tap) ---- */ [data-flwr] { -webkit-tap-highlight-color: color-mix(in oklch, var(--_theme---accent--main) 22%, transparent); } /* ---- Default focus-visible ring on ALL focusable elements ---- */ [data-flwr] :focus-visible { outline: var(--_focus---ring-width) solid var(--_focus---ring-color); outline-offset: var(--_focus---ring-offset); } [data-flwr] :focus:not(:focus-visible) { outline: none; } /* ---- Placeholder (Firefox defaults to 0.54 opacity, normalize) ---- */ [data-flwr] ::placeholder { color: var(--_theme---text--subtle); opacity: 1; } /* ---- Form autofill (Chrome/Safari) — kill yellow autofill, match theme ---- */ [data-flwr] input:-webkit-autofill, [data-flwr] input:-webkit-autofill:hover, [data-flwr] input:-webkit-autofill:focus, [data-flwr] input:-webkit-autofill:active, [data-flwr] textarea:-webkit-autofill, [data-flwr] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--_theme---surface--raised) inset; -webkit-text-fill-color: var(--_theme---text--main); caret-color: var(--_theme---accent--main); transition: background-color 999999s ease-in-out 0s; } /* ---- Native list markers ---- */ [data-flwr] ::marker { color: var(--_theme---text--muted); } /* ---- Native backdrop ---- */ [data-flwr] dialog::backdrop { background: color-mix(in oklch, var(--_palette---neutral--1000) 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ---- View Transitions (Chromium 111+, Safari 18+) ---- */ @supports (view-transition-name: from) { [data-flwr] ::view-transition-group(*) { animation-duration: var(--_motion---duration-base); animation-timing-function: var(--_motion---ease-emphasized); } [data-flwr] ::view-transition-old(root), [data-flwr] ::view-transition-new(root) { animation-duration: var(--_motion---duration-slow); } } /* ---- Image drag prevention (UI images shouldn't be draggable as files) ---- */ [data-flwr] img { -webkit-user-drag: none; } /* ---- Number input spinners — soften the default browser styling ---- */ [data-flwr] input[type="number"] { -moz-appearance: textfield; } [data-flwr] input[type="number"]::-webkit-inner-spin-button, [data-flwr] input[type="number"]::-webkit-outer-spin-button { opacity: 0.4; cursor: pointer; } [data-flwr] input[type="number"]:hover::-webkit-inner-spin-button, [data-flwr] input[type="number"]:focus::-webkit-inner-spin-button { opacity: 1; } /* ---- Search input cancel button — themed X icon ---- */ [data-flwr] input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 1em; width: 1em; background-color: var(--_theme---text--subtle); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); cursor: pointer; } [data-flwr] input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--_theme---text--main); } /* ---- File-selector button styling ---- */ [data-flwr] input[type="file"]::file-selector-button { margin-inline-end: var(--_spacing---step--3); padding: var(--_spacing---step--2) var(--_spacing---step--3); background: var(--_theme---surface--raised); color: var(--_theme---text--main); border: 1px solid var(--_theme---border--main); border-radius: var(--_component---field--radius, 0.5rem); font-family: inherit; font-size: var(--_typography---size--small); font-weight: var(--_typography---weight--medium); cursor: pointer; transition: background-color 120ms var(--_motion---ease-standard); } [data-flwr] input[type="file"]::file-selector-button:hover { background: var(--_theme---surface--sunken); border-color: var(--_theme---border--strong); } /* ---- HR (horizontal rule) ---- */ [data-flwr] hr { border: none; border-block-start: 1px solid var(--_theme---border--subtle); margin-block: var(--_spacing---step--6); } /* ---- Print basics ---- */ @media print { /* v1.1: scope the print reset to the wrapper itself — data-flwr sits on a div, so `[data-flwr] body` never matched (body is an ancestor, not a descendant). */ [data-flwr] { background: white !important; color: black !important; } [data-flwr] a { color: black; text-decoration: underline; } /* Strip styleguide chrome from print output */ [data-flwr] .flwr-control-bar, [data-flwr] .flwr-control-drawer, [data-flwr] .flwr-mode-badge, [data-flwr] .flwr-styleguide_sidebar { display: none !important; } /* Avoid breaking inside cards/sections */ [data-flwr] .flwr_card_default_wrap, [data-flwr] .flwr_card_interactive_wrap, [data-flwr] .flwr_card_featured_wrap, [data-flwr] .flwr-styleguide_section { break-inside: avoid; } }