/* ============================================================ * tokens.css · Costuragi Franquia · Wave 1 (Mission 1000-anos) * ------------------------------------------------------------ * Single source of truth pra design tokens da landing franquia. * Evolução incremental dos tokens inline existentes (index.html). * * Princípios: * - CSS-first · Baseline Widely Available * - Variable fonts (Cormorant Light + Montserrat + Sacramento) * - Modular scale 1.333 perfect-fourth (8 steps) * - oklch() pra cor moderna · hex fallback @supports * - 6 easings canônicos · 3 durações * - 8pt spacing grid + clamp() fluid scale * - @property declarations pra animations interpolation * * Integração: Wave 2+ vai @import este arquivo no . * Ordem de cascade: tokens.css → reset → base → components. * ========================================================== */ /* ── @property declarations · CSS Houdini · enables interpolation ── */ @property --scroll-progress { syntax: ''; inherits: true; initial-value: 0%; } @property --reveal-y { syntax: ''; inherits: false; initial-value: 0px; } @property --counter-value { syntax: ''; inherits: false; initial-value: 0; } @property --magnetic-x { syntax: ''; inherits: false; initial-value: 0px; } @property --magnetic-y { syntax: ''; inherits: false; initial-value: 0px; } /* ── ROOT TOKENS ── */ :root { /* ─── COLOR · base canônica (hex fallback) ─── */ --c-midnight: #1E2D4E; --c-midnight-canvas: #15233D; --c-midnight-surface: #1E2D4E; --c-midnight-frosted: rgba(30, 45, 78, 0.72); --c-midnight-light: #243758; --c-midnight-dark: #1A253F; --c-ivory: #F5EDD6; --c-ivory-warm: #F8F1DE; --c-ivory-deep: #EFE6CB; --c-cobre: #C4956A; /* alias semântico (cobre = brand) */ --c-copper: #C4956A; /* alias retro-compat */ --c-copper-50: #F5EAD9; --c-copper-100: #E8D2B0; --c-copper-600: #B08554; --c-copper-700: #94703F; /* ─── COLOR · semantic states (Wave 8.W1 · A3 Polaris-pattern) ─── */ /* Estados derivam do brand color por delta de lightness · sistemática Polaris */ /* default (canon) · hovered (-1.5pt) · pressed (-3pt) · focused (ring + alpha) */ --c-cobre-hovered: color-mix(in oklab, var(--c-cobre) 92%, black 8%); --c-cobre-pressed: color-mix(in oklab, var(--c-cobre) 85%, black 15%); --c-midnight-hovered: color-mix(in oklab, var(--c-midnight) 92%, white 8%); --c-midnight-pressed: color-mix(in oklab, var(--c-midnight) 85%, white 15%); --c-sage: #7B8F7A; --c-sage-text: #5F7360; --c-terracotta: #B5563A; --c-white: #FFFFFF; --c-gray-light: #F0EDE8; --c-gray-medium: #8C8478; --c-gray-darker: #6B6459; --c-graphite: #3D3530; --c-warm-black: #1A1410; --c-whatsapp: #25D366; --c-whatsapp-hover: #1ebe5a; /* RGB triples pra rgba() composition */ --c-midnight-rgb: 30, 45, 78; --c-ivory-rgb: 245, 237, 214; --c-copper-rgb: 196, 149, 106; --c-terracotta-rgb: 181, 86, 58; /* ─── COLOR · oklch upgrade (modern browsers) ─── */ /* Mantém hex como fallback · oklch ativa em @supports */ /* ─── TYPOGRAPHY · families ─── */ --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-script: 'Sacramento', 'Brush Script MT', cursive; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace; /* aliases retro-compat */ --f-display: var(--font-display); --f-body: var(--font-sans); --f-accent: var(--font-script); /* ─── TYPOGRAPHY · modular scale 1.333 (perfect-fourth) ─── */ /* base = 1rem = 16px · ratio 1.333 · 8 steps */ --fs-0: 0.5625rem; /* 9.0px · micro */ --fs-1: 0.75rem; /* 12.0px · caption */ --fs-2: 1rem; /* 16.0px · body base */ --fs-3: 1.333rem; /* 21.3px · lead */ --fs-4: 1.777rem; /* 28.4px · h4 */ --fs-5: 2.369rem; /* 37.9px · h3 */ --fs-6: 3.157rem; /* 50.5px · h2 */ --fs-7: 4.209rem; /* 67.3px · h1 */ --fs-8: 5.61rem; /* 89.7px · display */ --fs-9: 7.478rem; /* 119.6px · hero-mega */ /* ─── TYPOGRAPHY · fluid clamp() scale ─── */ /* min em 320px · max em 1440px · interpola fluido */ --fs-fluid-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-fluid-lead: clamp(1.125rem, 1rem + 0.625vw, 1.5rem); --fs-fluid-h4: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --fs-fluid-h3: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); --fs-fluid-h2: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); --fs-fluid-h1: clamp(3rem, 2.25rem + 3.75vw, 4.75rem); --fs-fluid-hero: clamp(3.75rem, 2.5rem + 6.25vw, 6rem); /* ─── TYPOGRAPHY · line-height ─── */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.75; --lh-loose: 2; /* ─── TYPOGRAPHY · letter-spacing ─── */ --ls-tighter: -0.025em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; --ls-widest: 0.32em; /* ─── TYPOGRAPHY · weight ─── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─── SPACING · 8pt grid (em rem pra escalar com user font-size) ─── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ /* aliases retro-compat */ --s-xs: var(--space-1); --s-sm: var(--space-2); --s-md: var(--space-4); --s-lg: var(--space-5); --s-xl: var(--space-7); --s-2xl: var(--space-8); --s-3xl: var(--space-9); --s-4xl: var(--space-10); /* fluid section padding */ --section-padding-fluid: clamp(3rem, 2rem + 5vw, 8rem); /* ─── FLUID SPACING SYSTEM (Wave 8.W5 · C2 Porsche-pattern) ─── */ /* Tokens com clamp() interno · permite usar gap/margin/padding sem repetir clamp em cada uso * Source: porsche-design-system/.../scss/_text.scss · pds-spacing-fluid-* family * Convention: --space-fluid-{xs|sm|md|lg|xl} · escala intermediária ao 8pt grid */ --space-fluid-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* 8 → 12px */ --space-fluid-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem); /* 12 → 18px */ --space-fluid-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); /* 16 → 24px */ --space-fluid-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); /* 24 → 40px */ --space-fluid-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem); /* 32 → 64px */ --space-fluid-2xl: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96px */ --space-fluid-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem); /* 64 → 144px */ /* ─── RADIUS ─── */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --r-circle: 50%; /* ─── EASING · 7 canonical (Wave 8.W1 · A2 Primer-pattern · semântica de uso) ─── */ /* Cada easing tem propósito documentado · alinhado com Primer org.primer.llm convention */ --ease-linear: linear; /* USO: progress-bar · loader · constant motion */ --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* USO: reveal entry · element appearing on screen (default) */ --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* USO: exit · element leaving viewport (rare standalone) */ --ease-quart-io: cubic-bezier(0.77, 0, 0.175, 1); /* USO: bidirectional motion · drawer · modal */ --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* USO: hover state changes · micro-interactions · button hover */ --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* USO: easter eggs · attention-grabbing · use sparingly */ --ease-spring: linear(0, 0.402, 0.79, 1.107, 1.246, 1.21, 1.085, 1, 0.972, 1); /* USO: physics-based · natural feel */ /* aliases retro-compat */ --ease-out: var(--ease-soft); --ease-in-out: var(--ease-quart-io); /* ─── DURATION · 5 canonical ─── */ --duration-instant: 80ms; --duration-fast: 180ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-cinema: 2400ms; /* M13 counter · stitch-line */ /* aliases retro-compat */ --dur-fast: var(--duration-fast); --dur-base: var(--duration-base); --dur-slow: var(--duration-slow); /* ─── SHADOW · elevation system ─── */ --shadow-1: 0 1px 2px rgba(var(--c-midnight-rgb), 0.10); --shadow-2: 0 4px 14px rgba(var(--c-midnight-rgb), 0.14); --shadow-3: 0 12px 32px rgba(var(--c-midnight-rgb), 0.18); --shadow-4: 0 24px 56px rgba(var(--c-midnight-rgb), 0.22); --shadow-card: 0 4px 20px rgba(var(--c-midnight-rgb), 0.08); --shadow-card-hover: 0 12px 36px rgba(var(--c-midnight-rgb), 0.14); --shadow-hero: 0 32px 80px rgba(0, 0, 0, 0.4); --shadow-hero-mobile: 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-cta: 0 8px 28px rgba(var(--c-copper-rgb), 0.35); --shadow-cta-hover: 0 12px 36px rgba(var(--c-copper-rgb), 0.5); --shadow-inset: inset 0 2px 4px rgba(var(--c-midnight-rgb), 0.06); /* ─── FOCUS RING (Wave 8.W1 · A6 Primer-pattern · WCAG 2.4.7 mandatory) ─── */ /* WCAG 2.4.7 (Focus Visible · AA): keyboard focus deve ser visualmente identificável. * WCAG 2.4.11 (Focus Appearance · AAA): contrast ≥3:1 com adjacent · area mínima 1px perimeter * Implementação: solid ring 3px + outline-offset 2px + box-shadow alpha layer (B2 shadcn-pattern) */ --ring: 3px solid var(--c-cobre); --ring-offset: 2px; --ring-color: var(--c-cobre); --ring-shadow-alpha: 0 0 0 6px rgba(196, 149, 106, 0.25); /* alpha 25% · duplo-ring effect */ /* ─── Z-INDEX scale ─── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-progress: 999; --z-overlay: 1000; --z-skip-link: 9999; } /* ── oklch upgrade · modern browsers ── */ @supports (color: oklch(0% 0 0)) { :root { /* tonalidades paramétricas · base canônica preservada visualmente */ --c-midnight-oklch: oklch(28% 0.04 256); --c-ivory-oklch: oklch(94% 0.03 90); --c-cobre-oklch: oklch(70% 0.07 65); --c-sage-oklch: oklch(58% 0.04 138); --c-terracotta-oklch: oklch(54% 0.13 35); } } /* ── @container query units · Baseline 2023 ── */ /* Componentes podem usar cqi/cqb/cqw/cqh · nada precisa registrar aqui · só lembrete */ /* ── REDUCED MOTION · system-wide ── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-cinema: 1ms; } } /* ── DARK MODE · futureproof scaffold (não-ativo Wave 1) ── */ /* Wave 12 · se decisão for ativar dark mode editorial */ @media (prefers-color-scheme: dark) { /* tokens redefinidos virão aqui se Rafael aprovar dark mode */ } /* ───────────────────────────────────────────────────────────────────── * Wave 8.W1 · Token Architecture Refactor (Fase VIII) * Patterns aplicados dos 39 DS do Alan Nicolas: * - A1 · 3-tier tokens (Primer Primitives) · base→functional→component * - A4 · Lightness scale (Polaris Tokens) · color-mix() systematic states * - A5 · Prose typescale (Porsche Design System) · semantic heading classes * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── FUNCTIONAL TIER · semantic tokens (A1 Primer-pattern) ─── */ /* base color tokens acima viram primitives · functional tokens abaixo viram semantic */ --color-text-primary: var(--c-graphite); /* body text · ratio 10.26:1 ivory bg AAA */ --color-text-secondary: var(--c-gray-darker); /* caption · ratio 5:1 ivory bg AA */ --color-text-on-dark: var(--c-ivory); /* text em fundo midnight · ratio 11.66:1 AAA */ --color-text-accent: var(--c-cobre); /* accent decorativo · brand */ --color-bg-canvas: var(--c-ivory); /* canvas main · landing default */ --color-bg-surface: var(--c-white); /* card · modal · elevated surface */ --color-bg-dark: var(--c-midnight); /* hero · oferta · virada · diferencial */ --color-bg-frosted: var(--c-midnight-frosted); /* nav scrolled · sticky bars */ --color-border-subtle: rgba(var(--c-copper-rgb), 0.18); --color-border-strong: rgba(var(--c-copper-rgb), 0.4); /* ─── PROSE HEADING TYPESCALE (A5 Porsche-pattern) ─── */ /* Encapsulação de heading semântica · 5 níveis editorial * Uso:

ou

· decoupling visual×semantic (B3 gestalt) * Cada nível encapsula font + weight + leading + letter-spacing como bloco coeso */ --prose-display-size: var(--fs-fluid-hero); /* clamp 3.75rem → 6rem · §Hero hero-mega */ --prose-display-weight: 300; /* Cormorant Light variable */ --prose-display-leading: 1.05; --prose-display-tracking: -0.025em; --prose-display-max-width: 16ch; --prose-h1-size: var(--fs-fluid-h1); /* clamp 3rem → 4.75rem */ --prose-h1-weight: 300; --prose-h1-leading: 1.1; --prose-h1-tracking: -0.02em; --prose-h1-max-width: 20ch; --prose-h2-size: var(--fs-fluid-h2); /* clamp 2.5rem → 3.5rem */ --prose-h2-weight: 400; --prose-h2-leading: 1.15; --prose-h2-tracking: -0.015em; --prose-h2-max-width: 24ch; --prose-h3-size: var(--fs-fluid-h3); /* clamp 2rem → 2.75rem */ --prose-h3-weight: 500; --prose-h3-leading: 1.2; --prose-h3-tracking: -0.01em; --prose-h3-max-width: 28ch; --prose-body-size: var(--fs-fluid-body); --prose-body-weight: 400; --prose-body-leading: 1.7; --prose-body-tracking: 0; --prose-body-max-width: 60ch; } /* ───────────────────────────────────────────────────────────────────── * SAFARI V3 · Heritage Extensions (Burle-Marx + Fitografia · 2026-05-01) * Adiciona tokens proprietários Safari V3 SEM substituir canon V3 * Princípio: paleta canon (--c-cobre · --c-midnight · --c-ivory) inalterada * + 4 heritage tokens accent específicos Safari (Burle Marx + Flora BR) * Diferenciação obrigatória vs Aviador (cobre-aged · cream-cordel · blue-bulcao) * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Safari V3 proprietary ─── */ /* USO restrito · max 2 instâncias por landing · diferenciado Aviador */ --c-jacaranda: #5C3A6B; /* roxo-jacarandá · §Virada accent · NEW Safari V3 */ --c-papel-canva: #F0E8D6; /* sépia botânica · pull-quote bg · NEW Safari V3 */ --c-verde-paineira: #3F5C42; /* sage profundo · §Garantia + §Bio bg · NEW Safari V3 */ --c-amarelo-ipe: #D9A648; /* amarelo solar · §Mostrar-peca accent · NEW Safari V3 */ /* RGB triples pra rgba() heritage Safari V3 */ --c-jacaranda-rgb: 92, 58, 107; --c-papel-canva-rgb: 240, 232, 214; --c-verde-paineira-rgb: 63, 92, 66; --c-amarelo-ipe-rgb: 217, 166, 72; /* ─── HIERARQUIA SEMÂNTICA · Synergy R1 lock Safari V3 ─── */ /* --c-cobre = ação (CTA · accent palavra) · canon V3 LOCK */ /* --c-jacaranda = heritage (§Virada · §Bio · max 2x) · NEW Safari V3 */ /* --c-amarelo-ipe = accent flora (§Mostrar-peca) · NEW Safari V3 */ /* --c-verde-paineira = repouso (§Garantia · §Bio bg) · NEW Safari V3 */ /* --c-papel-canva = pull-quote bg · NEW Safari V3 */ /* --c-terracotta = emoção (§Problema) · canon V3 LOCK */ /* ─── FOLHAGEM-LINE TOKENS · Safari V3 W2 ─── */ --folhagem-color: var(--c-verde-paineira); --folhagem-color-accent: var(--c-jacaranda); --folhagem-stroke-width: 1.4px; --folhagem-dash-length: 3px; --folhagem-gap: 4px; } /* ─── @supports · oklch heritage Safari V3 upgrade ─── */ @supports (color: oklch(0% 0 0)) { :root { --c-jacaranda-oklch: oklch(38% 0.07 305); --c-papel-canva-oklch: oklch(91% 0.025 80); --c-verde-paineira-oklch: oklch(40% 0.05 145); --c-amarelo-ipe-oklch: oklch(72% 0.13 80); } } /* ─── PULL-QUOTE EDITORIAL CLASS · Safari V3 W1 ─── */ .pull-quote-editorial { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; max-width: 680px; margin: var(--s-xl, 40px) auto; text-align: center; color: var(--c-graphite); padding: var(--s-lg, 24px) 0; position: relative; } .pull-quote-editorial::before, .pull-quote-editorial::after { content: ""; display: block; width: 40px; height: 1px; margin: var(--s-md, 16px) auto; background: var(--c-jacaranda); } .pull-quote-attribution { display: block; margin-top: var(--s-md, 16px); font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--c-gray-darker); } /* ─── HERITAGE DIVIDER · Safari V3 (jacarandá gradient) ─── */ .heritage-divider { display: block; width: 60px; height: 2px; margin: var(--s-lg, 24px) auto; background: linear-gradient(90deg, transparent, var(--c-jacaranda), transparent); } /* ───────────────────────────────────────────────────────────────────── * SAFARI V4 · Heritage Extensions ENHANCEMENT (Glauber Rocha Cinema Novo · 2026-05-01) * 3º layer brand: Burle Marx (visual) + Tarsila (textual) + Glauber (cinematográfico) * NÃO substitui · ADICIONA * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Safari V4 Glauber Rocha Cinema Novo ─── */ --c-sertao-glauber: #A8754A; /* cor terra sertão · §Threshold accent */ --c-luz-cinema: #E8C982; /* luz dramática Glauber · highlight pontual */ --c-sombra-cinema: rgba(0,0,0,0.55); /* vignette §Virada overlay */ /* RGB triples */ --c-sertao-glauber-rgb: 168, 117, 74; --c-luz-cinema-rgb: 232, 201, 130; /* ─── HIERARQUIA Safari V4 (V3 mantida + V4 expandida) ─── */ /* --c-cobre = ação CTA · canon V3 LOCK */ /* V3: --c-jacaranda heritage · --c-papel-canva pull-quote bg · --c-verde-paineira repouso · --c-amarelo-ipe accent */ /* V4 NEW: --c-sertao-glauber accent §Threshold · --c-luz-cinema highlight · --c-sombra-cinema vignette §Virada */ } @supports (color: oklch(0% 0 0)) { :root { --c-sertao-glauber-oklch: oklch(58% 0.10 60); --c-luz-cinema-oklch: oklch(85% 0.10 90); } } /* ─── CINEMATIC VIGNETTE · Safari V4 §Virada (Glauber Rocha overlay) ─── */ .cinematic-vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 35%, var(--c-sombra-cinema, rgba(0,0,0,0.55)) 100% ); pointer-events: none; z-index: 1; mix-blend-mode: multiply; } @media (forced-colors: active) { .cinematic-vignette { display: none; } } /* ─── PADRÃO BURLE MARX MATERIALIZADO · Heliconia background §Macetes ─── */ .burle-pattern-heliconia { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 Q15 25 30 50 Q45 25 30 5 Z' fill='none' stroke='%233F5C42' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E"); background-size: 80px 80px; pointer-events: none; z-index: 0; } @media (forced-colors: active) { .burle-pattern-heliconia { display: none; } } /* ───────────────────────────────────────────────────────────────────── * SAFARI V5 · Heritage Extensions ENHANCEMENT (Mestre Vitalino cerâmica popular · 2026-05-01) * 4º brand layer cumulativo: Burle Marx (V3) + Tarsila (V3) + Glauber (V4) + Vitalino (V5) * Único da hexalogy com 4 brand layers · arco BR completo (paisagismo + primitivismo + cinema + cerâmica popular) * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Safari V5 Mestre Vitalino popular Caruaru ─── */ --c-barro-vitalino: #B07050; /* barro Caruaru ocre-terracota */ --c-bege-cordel: #D4B896; /* bege papel cordel sertão */ --c-pifaro-escuro: #5C4033; /* figura escura Banda de Pífaros */ /* RGB triples */ --c-barro-vitalino-rgb: 176, 112, 80; --c-bege-cordel-rgb: 212, 184, 150; --c-pifaro-escuro-rgb: 92, 64, 51; } @supports (color: oklch(0% 0 0)) { :root { --c-barro-vitalino-oklch: oklch(58% 0.07 50); --c-bege-cordel-oklch: oklch(78% 0.04 70); --c-pifaro-escuro-oklch: oklch(35% 0.04 50); } } /* ─── TEXTURE-CLAY OVERLAY · Safari V5 §Bio Gi (Vitalino barro Caruaru) ─── */ .texture-clay-vitalino { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.69 0 0 0 0 0.44 0 0 0 0 0.31 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)' opacity='0.85'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: multiply; opacity: 0.12; pointer-events: none; z-index: 0; } @media (forced-colors: active) { .texture-clay-vitalino { display: none; } } @media (prefers-reduced-motion: reduce) { .texture-clay-vitalino { opacity: 0.08; } } /* ─── PULL-QUOTE BARRO VITALINO · Safari V5 §Macetes (curto · cultural) ─── */ .pull-quote-barro-vitalino { background: rgba(176,112,80,0.06); border-left: 2px solid var(--c-barro-vitalino, #B07050); padding: var(--s-md, 16px) var(--s-lg, 24px); font-family: var(--font-display, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: clamp(0.95rem, 1.5vw, 1.2rem); color: var(--c-graphite, #3D3530); max-width: 580px; margin: var(--s-xl, 40px) auto 0; line-height: 1.45; text-align: center; } .pull-quote-barro-vitalino cite { display: block; margin-top: var(--s-xs, 4px); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--c-gray-darker, #6B6459); } /* ───────────────────────────────────────────────────────────────────── * SAFARI · Sub-Brand Forest Green (Wave W1 · Foundation · 2026-05-04) * Sub-brand wild-adventure dentro do master Costuragi V3 (cobre + ivory + midnight). * Cobre canon V3 PRESERVADO em CTAs como signature unificadora. * Inspiração: ipê-amarelo, sertão mineiro, cerrado brasileiro (vs Aviador vintage flight). * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── SAFARI SUB-BRAND · 5 tokens canônicos (forest green) ─── */ --safari-forest-primary: #3F5C42; /* HSL 126° 18% 31% · forest mineiro · hero gradient principal */ --safari-forest-deep: #2A3F2D; /* HSL 126° 20% 21% · authority hover · CTA pressed · accent depth */ --safari-forest-light: #8FA593; /* HSL 128° 11% 60% · whisper bg · highlights · light tone */ /* ─── SAFARI SHADOW + OVERLAY (derivados do primary) ─── */ --safari-forest-shadow: rgba(63, 92, 66, 0.18); /* glow halo · cards hover */ --safari-forest-overlay: rgba(63, 92, 66, 0.05); /* section bg whisper · quase invisível */ --safari-forest-tint: rgba(63, 92, 66, 0.22); /* tags · borders ativos */ /* ╔══════════════════════════════════════════════════════════════════╗ * ║ WAVE 10 · LUXURY FOUNDATION (W1 §0) ║ * ║ Source: porsche-design-system + geist-font + polaris-tokens ║ * ║ Replicando Aviador validado · adapt Safari forest ║ * ╚══════════════════════════════════════════════════════════════════╝ */ /* ─── TYPOGRAPHY · semantic aliases ─── */ --text-display: clamp(2.5rem, 5vw + 1rem, 7rem); --text-h1: clamp(2.25rem, 4vw + 0.75rem, 5.125rem); --text-h2: clamp(1.75rem, 3vw + 0.5rem, 3.375rem); --text-h3: clamp(1.25rem, 2vw + 0.25rem, 2rem); --text-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.625rem); --text-lede: clamp(1.0625rem, 1vw + 0.5rem, 1.3125rem); --text-body: clamp(0.875rem, 0.5vw + 0.6rem, 1.0625rem); --text-caption: clamp(0.75rem, 0.4vw + 0.5rem, 0.875rem); --text-eyebrow: clamp(0.625rem, 0.3vw + 0.4rem, 0.75rem); --text-num-big: clamp(3.375rem, 5vw + 1rem, 6rem); --text-num-mega: clamp(4.5rem, 8vw + 1rem, 10rem); /* ─── COBRE · opacity scale (Polaris-pattern derived states) ─── */ --cobre-04: rgba(196, 149, 106, 0.04); --cobre-08: rgba(196, 149, 106, 0.08); --cobre-12: rgba(196, 149, 106, 0.12); --cobre-18: rgba(196, 149, 106, 0.18); --cobre-24: rgba(196, 149, 106, 0.24); --cobre-32: rgba(196, 149, 106, 0.32); --cobre-50: rgba(196, 149, 106, 0.50); --cobre-85: rgba(196, 149, 106, 0.85); /* ─── IVORY · opacity scale (sobre dark bg) ─── */ --ivory-12: rgba(245, 237, 214, 0.12); --ivory-22: rgba(245, 237, 214, 0.22); --ivory-50: rgba(245, 237, 214, 0.50); --ivory-72: rgba(245, 237, 214, 0.72); --ivory-92: rgba(245, 237, 214, 0.92); /* ─── HAIRLINE · luxury dividers reusable (porsche signature) ─── */ --hairline-cobre: 1px solid var(--cobre-18); --hairline-cobre-strong: 1px solid var(--cobre-32); --hairline-ivory: 1px solid var(--ivory-12); --hairline-ivory-strong: 1px solid var(--ivory-22); --hairline-tracked: 1px dashed var(--cobre-32); /* ─── EDITORIAL DIVIDER · centered hairline w/ width preset ─── */ --divider-width-sm: 40px; --divider-width-md: 60px; --divider-width-lg: 96px; /* ─── SHADOWS · luxury depth multi-layer (porsche signature) ─── */ --shadow-luxury-sm: 0 0 0 1px var(--cobre-04), 0 1px 2px rgba(15, 30, 55, 0.04), 0 4px 8px rgba(15, 30, 55, 0.04); --shadow-luxury-md: 0 0 0 1px var(--cobre-08), 0 2px 4px rgba(15, 30, 55, 0.04), 0 8px 16px rgba(15, 30, 55, 0.06), 0 16px 32px rgba(15, 30, 55, 0.04); --shadow-luxury-lg: 0 0 0 1px var(--cobre-12), 0 4px 8px rgba(15, 30, 55, 0.06), 0 16px 32px rgba(15, 30, 55, 0.08), 0 32px 64px rgba(15, 30, 55, 0.06); --shadow-luxury-hover: 0 0 0 1px var(--cobre-18), 0 6px 12px rgba(15, 30, 55, 0.08), 0 20px 40px rgba(15, 30, 55, 0.10), 0 40px 72px rgba(15, 30, 55, 0.08); /* ─── GLASSMORPHISM · sticky-cta + nav (frosted overlay) ─── */ --glass-midnight-bg: rgba(30, 45, 78, 0.78); --glass-midnight-blur: saturate(180%) blur(20px); --glass-ivory-bg: rgba(245, 237, 214, 0.85); --glass-ivory-blur: saturate(160%) blur(16px); /* ─── MOTION · canonical durations + easings (porsche reveal) ─── */ --motion-fast: 180ms; --motion-base: 280ms; --motion-slow: 420ms; --motion-slower: 640ms; --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-stand: cubic-bezier(0.4, 0, 0.2, 1); }