/* ============================================================ * 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; } /* ───────────────────────────────────────────────────────────────────── * AVIADOR · Heritage Extensions (Brazilian-Heritage Squad · 2026-05-01) * Adiciona tokens proprietários Aviador SEM substituir canon V3 * Princípio: paleta canon (--c-cobre, --c-midnight, --c-ivory) inalterada * + 3 heritage tokens accent específicos Aviador * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Aviador proprietary ─── */ /* USO restrito · max 2 instâncias por landing · accent §Virada · §Bio Gi */ --c-copper-aged: #7A4F2A; /* cobre oxidado machinaria 1906 · accent §Virada */ --c-cream-cordel: #EAE0CB; /* sépia papel cordel · pull-quote background */ --c-blue-bulcao: #1B4D6B; /* azul azulejo Bulcão · pattern background sutil */ /* RGB triples pra rgba() heritage */ --c-copper-aged-rgb: 122, 79, 42; --c-cream-cordel-rgb: 234, 224, 203; --c-blue-bulcao-rgb: 27, 77, 107; /* ─── HIERARQUIA SEMÂNTICA · Pod-Estética lock Synergy R1 ─── */ /* --c-cobre = ação (CTA · accent palavra) · canon V3 */ /* --c-sage = repouso (background §Garantia · §Bio) · canon V3 */ /* --c-midnight = autoridade (§Selos · §Oferta · §CTA-final) · canon V3 */ /* --c-ivory = repouso warm (§Macetes · §FAQ) · canon V3 */ /* --c-terracotta = emoção (§Problema · §Mostrar-peca) · canon V3 */ /* --c-copper-aged = heritage (§Virada · §Bio · max 2x) · NEW Aviador */ /* --c-blue-bulcao = pattern (§Macetes background sutil · §FAQ separator) · NEW Aviador */ /* ─── STITCH-LINE TOKENS · Pod-Experiência Wave 7 ─── */ --stitch-color: var(--c-cobre); --stitch-color-aged: var(--c-copper-aged); --stitch-stroke-width: 1.5px; --stitch-dash-length: 4px; --stitch-gap: 6px; /* ─── TIMELINE TOKENS · Synergy R1 Bússola 3 (ritmo 80ms múltiplos) ─── */ --beat-1: 80ms; --beat-2: 160ms; --beat-4: 320ms; --beat-6: 480ms; --beat-8: 640ms; --beat-10: 800ms; --beat-20: 1600ms; } /* ─── @supports · oklch heritage upgrade ─── */ @supports (color: oklch(0% 0 0)) { :root { --c-copper-aged-oklch: oklch(45% 0.07 60); --c-cream-cordel-oklch: oklch(89% 0.025 80); --c-blue-bulcao-oklch: oklch(38% 0.06 245); } } /* ─── REDUCED MOTION · system-wide complement (Synergy R1 P0 Foundations) ─── */ @media (prefers-reduced-motion: reduce) { :root { --beat-1: 1ms; --beat-2: 1ms; --beat-4: 1ms; --beat-6: 1ms; --beat-8: 1ms; --beat-10: 1ms; --beat-20: 1ms; } } /* ─── PROSE HEADING CLASSES · ativa V3 typescale (49 classes alvo) ─── */ .prose-display { font-family: var(--font-display); font-size: var(--prose-display-size); font-weight: var(--prose-display-weight); font-style: italic; line-height: var(--prose-display-leading); letter-spacing: var(--prose-display-tracking); max-width: var(--prose-display-max-width); text-wrap: balance; } .prose-h1 { font-family: var(--font-display); font-size: var(--prose-h1-size); font-weight: var(--prose-h1-weight); line-height: var(--prose-h1-leading); letter-spacing: var(--prose-h1-tracking); max-width: var(--prose-h1-max-width); text-wrap: balance; } .prose-h2 { font-family: var(--font-display); font-size: var(--prose-h2-size); font-weight: var(--prose-h2-weight); line-height: var(--prose-h2-leading); letter-spacing: var(--prose-h2-tracking); max-width: var(--prose-h2-max-width); text-wrap: balance; } .prose-h3 { font-family: var(--font-display); font-size: var(--prose-h3-size); font-weight: var(--prose-h3-weight); font-style: italic; line-height: var(--prose-h3-leading); letter-spacing: var(--prose-h3-tracking); max-width: var(--prose-h3-max-width); text-wrap: balance; } .prose-body { font-family: var(--font-sans); font-size: var(--prose-body-size); font-weight: var(--prose-body-weight); line-height: var(--prose-body-leading); letter-spacing: var(--prose-body-tracking); max-width: var(--prose-body-max-width); } /* ─── SACRAMENTO ACCENT · canon ≤7 instâncias por landing ─── */ .script-accent { font-family: var(--font-script); font-weight: 400; color: var(--c-cobre); font-size: 1.4em; line-height: 1; } /* ───────────────────────────────────────────────────────────────────── * AVIADOR V2 · Heritage Extensions ENHANCEMENT (Sebastião Salgado fotografia BR · 2026-05-01) * 3º brand layer: Bulcão (visual) + Santos Dumont (histórico) + Salgado (fotográfico) * NÃO substitui · ADICIONA * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Aviador V2 Sebastião Salgado fotografia BR ─── */ --c-grao-salgado: #1A1A1A; /* preto fotográfico · photo-grain overlay */ --c-prata-salgado: #A8A8A8; /* prata fotográfica preto-branco · borders */ --c-sepia-genesis: #7A6B52; /* sépia série Genesis 2013 · pull-quote bg */ /* RGB triples */ --c-grao-salgado-rgb: 26, 26, 26; --c-prata-salgado-rgb: 168, 168, 168; --c-sepia-genesis-rgb: 122, 107, 82; } @supports (color: oklch(0% 0 0)) { :root { --c-grao-salgado-oklch: oklch(15% 0 0); --c-prata-salgado-oklch: oklch(70% 0 0); --c-sepia-genesis-oklch: oklch(48% 0.04 75); } } /* ─── PHOTO-GRAIN OVERLAY · Aviador V2 §Mostrar-peca (Salgado textura fotográfica) ─── */ .photo-grain-salgado { 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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: overlay; opacity: 0.18; pointer-events: none; z-index: 2; } @media (forced-colors: active) { .photo-grain-salgado { display: none; } } @media (prefers-reduced-motion: reduce) { .photo-grain-salgado { opacity: 0.10; } } /* ─── BULCÃO PATTERNS MATERIALIZADOS · Aviador V2 (Brazilian-Heritage Squad pendente) ─── */ .bulcao-pattern-triangulo { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 8 L72 64 L8 64 Z' fill='none' stroke='%23B07A3D' stroke-width='1' opacity='0.10'/%3E%3C/svg%3E"); background-size: 100px 100px; pointer-events: none; z-index: 0; } .bulcao-pattern-diamante { display: inline-block; width: 100%; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M20 0 L40 6 L20 12 L0 6 Z' fill='%23B07A3D' opacity='0.32'/%3E%3C/svg%3E"); background-size: 40px 12px; background-repeat: repeat-x; } @media (forced-colors: active) { .bulcao-pattern-triangulo, .bulcao-pattern-diamante { display: none; } } /* ─── PHOTO-FRAME BORDER · Aviador V2 (Salgado preto-branco style) ─── */ .photo-frame-salgado { position: relative; } .photo-frame-salgado::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-prata-salgado, #A8A8A8); pointer-events: none; mix-blend-mode: overlay; } /* ─── PULL-QUOTE SÉPIA GENESIS · Aviador V2 §Threshold ─── */ .pull-quote-sepia-genesis { background: linear-gradient(180deg, transparent, rgba(122,107,82,0.06), transparent); border-left: 2px solid var(--c-sepia-genesis, #7A6B52); 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(1rem, 1.6vw, 1.25rem); color: var(--c-sepia-genesis, #7A6B52); max-width: 640px; margin: 0 auto; line-height: 1.45; } .pull-quote-sepia-genesis 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); } /* ───────────────────────────────────────────────────────────────────── * AVIADOR V3 · Heritage Extensions ENHANCEMENT (Anita Malfatti pioneira modernismo · 2026-05-01) * 4º brand layer cumulativo: Bulcão (V1) + Santos Dumont (V1) + Salgado (V2) + Anita Malfatti (V3) * Arco pioneirismo BR completo · 1906-2010s · 4 momentos pioneiros * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── HERITAGE PALETA · Aviador V3 Anita Malfatti pioneirismo modernismo ─── */ --c-amarelo-pioneiro: #F2C94C; /* "O Homem Amarelo" 1915-16 */ --c-vermelho-japonesa: #C2453F; /* "A Japonesa" 1915-16 */ --c-creme-boba: #EFE6CB; /* "Boba" 1916 */ /* RGB triples */ --c-amarelo-pioneiro-rgb: 242, 201, 76; --c-vermelho-japonesa-rgb: 194, 69, 63; --c-creme-boba-rgb: 239, 230, 203; } @supports (color: oklch(0% 0 0)) { :root { --c-amarelo-pioneiro-oklch: oklch(82% 0.16 90); --c-vermelho-japonesa-oklch: oklch(50% 0.15 25); --c-creme-boba-oklch: oklch(91% 0.04 80); } } /* ─── PINCELADA-PIONEIRA OVERLAY · Aviador V3 §Selos (Anita expressionismo) ─── */ .pincelada-pioneira-malfatti { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.015 0.7' numOctaves='2' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.79 0 0 0 0 0.30 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E"); background-repeat: repeat; mix-blend-mode: overlay; opacity: 0.12; pointer-events: none; z-index: 0; } @media (forced-colors: active) { .pincelada-pioneira-malfatti { display: none; } } @media (prefers-reduced-motion: reduce) { .pincelada-pioneira-malfatti { opacity: 0.07; } } /* ─── PULL-QUOTE PIONEIRA · Aviador V3 §Macetes (Anita curto) ─── */ .pull-quote-pioneira-malfatti { background: rgba(239,230,203,0.45); border-left: 2px solid var(--c-amarelo-pioneiro, #F2C94C); 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-pioneira-malfatti 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); } /* ───────────────────────────────────────────────────────────────────── * Wave 9 · Aviador Sub-Brand (Audit-driven · 2026-05-03) * Sub-brand sky blue dentro do master Costuragi V3 (cobre + ivory + midnight). * Cobre canon V3 PRESERVADO em CTAs como signature unificadora. * Squad-validated: Mira (V3 sóbrio · saturação ≤35%) · Iris · brand-squad. * Inspiração: Hermès aviator · Loro Piana cashmere blue · Pinterest vintage aviation. * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── AVIADOR SUB-BRAND · 5 tokens canônicos ─── */ --aviador-sky-primary: #5B7FA8; /* HSL 213° 31% 51% · vintage dusty serene · hero gradient principal */ --aviador-sky-deep: #3D5F87; /* HSL 212° 38% 38% · authority hover · CTA pressed · accent depth */ --aviador-sky-light: #A8C5DD; /* HSL 207° 35% 76% · whisper bg · highlights · light tone */ /* ─── AVIADOR SHADOW + OVERLAY (derivados do primary) ─── */ --aviador-sky-shadow: rgba(91, 127, 168, 0.18); /* glow halo · cards hover */ --aviador-sky-overlay: rgba(91, 127, 168, 0.05); /* section bg whisper · quase invisível */ --aviador-sky-tint: rgba(91, 127, 168, 0.22); /* tags · borders ativos */ /* ╔══════════════════════════════════════════════════════════════════╗ * ║ WAVE 10 · LUXURY FOUNDATION (W1 §0) ║ * ║ Source: porsche-design-system + geist-font + polaris-tokens ║ * ║ Adicionado em: 2026-05-03 · Score-alvo 9.8/10 ║ * ╚══════════════════════════════════════════════════════════════════╝ */ /* ─── TYPOGRAPHY · semantic aliases (alinhado bio-link refined) ─── */ /* Aliases para uso direto em components · mantém retrocompat com --fs-fluid-* */ --text-display: clamp(2.5rem, 5vw + 1rem, 7rem); /* 40 → 112px · hero/threshold mega */ --text-h1: clamp(2.25rem, 4vw + 0.75rem, 5.125rem); /* 36 → 82px · hero h1 */ --text-h2: clamp(1.75rem, 3vw + 0.5rem, 3.375rem); /* 28 → 54px · section h2 */ --text-h3: clamp(1.25rem, 2vw + 0.25rem, 2rem); /* 20 → 32px · card h3 */ --text-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.625rem); /* 18 → 26px · sub-h3 */ --text-lede: clamp(1.0625rem, 1vw + 0.5rem, 1.3125rem); /* 17 → 21px · paragraph destaque */ --text-body: clamp(0.875rem, 0.5vw + 0.6rem, 1.0625rem); /* 14 → 17px · corpo */ --text-caption: clamp(0.75rem, 0.4vw + 0.5rem, 0.875rem); /* 12 → 14px · meta · legenda */ --text-eyebrow: clamp(0.625rem, 0.3vw + 0.4rem, 0.75rem); /* 10 → 12px · uppercase tracked */ --text-num-big: clamp(3.375rem, 5vw + 1rem, 6rem); /* 54 → 96px · bio-num · roi-num */ --text-num-mega: clamp(4.5rem, 8vw + 1rem, 10rem); /* 72 → 160px · threshold counter */ /* ─── COBRE · opacity scale (Polaris-pattern derived states) ─── */ --cobre-04: rgba(196, 149, 106, 0.04); /* whisper bg · alternating row */ --cobre-08: rgba(196, 149, 106, 0.08); /* hover row · subtle tint */ --cobre-12: rgba(196, 149, 106, 0.12); /* tag bg · soft border */ --cobre-18: rgba(196, 149, 106, 0.18); /* hairline divider canon · selo border */ --cobre-24: rgba(196, 149, 106, 0.24); /* active border · stitch-frame */ --cobre-32: rgba(196, 149, 106, 0.32); /* tab indicator · accent line */ --cobre-50: rgba(196, 149, 106, 0.50); /* secondary text · meta */ --cobre-85: rgba(196, 149, 106, 0.85); /* primary cobre w/ slight transparency */ /* ─── IVORY · opacity scale (sobre dark bg) ─── */ --ivory-12: rgba(245, 237, 214, 0.12); /* hairline on dark · soft border */ --ivory-22: rgba(245, 237, 214, 0.22); /* divider on dark */ --ivory-50: rgba(245, 237, 214, 0.50); /* meta text on dark */ --ivory-72: rgba(245, 237, 214, 0.72); /* secondary text on dark */ --ivory-92: rgba(245, 237, 214, 0.92); /* primary text on dark · não-puro pra editorial */ /* ─── HAIRLINE · luxury dividers reusable (porsche signature) ─── */ --hairline-cobre: 1px solid var(--cobre-18); /* canon: 60×1px nas seções */ --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); /* stitch-frame style */ /* ─── EDITORIAL DIVIDER · centered hairline w/ width preset ─── */ --divider-width-sm: 40px; --divider-width-md: 60px; /* canon bio-link */ --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); /* easeOutQuart · porsche */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --ease-stand: cubic-bezier(0.4, 0, 0.2, 1); /* material standard */ } /* ╔══════════════════════════════════════════════════════════════════╗ * ║ MOBILE TYPOGRAPHY CANON · SSOT (Safari-validated · 2026-05-04) ║ * ║ Source: docs/22-MOBILE-TYPOGRAPHY-CANON.md (Safari commit f65c8a5)║ * ║ 15 canonical tokens cross-landing · Aviador application ║ * ║ NÃO substitui --text-* legacy · ADICIONA --type-* namespace ║ * ╚══════════════════════════════════════════════════════════════════╝ */ :root { /* ─── SIZES · clamp mobile-first (Safari-validated · canon doc §3) ─── */ --type-display: clamp(2rem, 8vw + 0.5rem, 3.5rem); /* 32→56px · hero h1 mobile-override */ --type-h2: clamp(28px, 4vw, 54px); /* 28→54px · §section h2 padrão (Safari global h2) */ --type-h2-section: clamp(28px, 3vw + 0.5rem, 40px); /* 28→40px · §section h2 mid (paletas · ocasioes · 3moldes) */ --type-h2-emphasis: clamp(54px, 7vw, 96px); /* 54→96px · §oferta · §problema decorative */ --type-h2-mega: clamp(36px, 5vw + 0.5rem, 64px); /* 36→64px · §threshold · §cta-final · §virada */ --type-h3-card: clamp(20px, 1.6vw + 0.5rem, 26px); /* 20→26px · card title cross-section canon */ --type-h3-emphasis: clamp(20px, 1.8vw + 0.5rem, 28px); /* 20→28px · entregaveis · paletas h3 strong */ --type-lede: clamp(18px, 1.4vw + 0.5rem, 26px); /* 18→26px · hero subtitle · h2 subtitle */ --type-pull-quote: clamp(17px, 1vw + 0.5rem, 22px); /* 17→22px · pull-quotes · depoimentos · bio quote */ --type-body-prose: clamp(14px, 0.5vw + 0.6rem, 17px); /* 14→17px · prose narrativa */ --type-body-card: clamp(13px, 0.7vw + 0.4rem, 15px); /* 13→15px · card body curto canon */ --type-body-tight: clamp(12px, 0.4vw + 0.5rem, 14px); /* 12→14px · disclaimer · macete card body */ --type-eyebrow: clamp(10px, 0.6vw + 0.4rem, 12px); /* 10→12px · eyebrow · tag canon */ --type-cta: clamp(15px, 1.3vw, 18px); /* 15→18px · CTA primary canon */ --type-cta-lg: clamp(16px, 1.5vw, 20px); /* 16→20px · CTA hero-lg canon */ --type-cta-micro: clamp(11px, 0.7vw + 0.25rem, 13px); /* 11→13px · cta-micro */ --type-num-big: clamp(40px, 6vw + 0.5rem, 64px); /* 40→64px · big-nums · price */ --type-num-mega: clamp(64px, 9vw, 112px); /* 64→112px · §quem-ensina mega-nums */ /* ─── LETTER-SPACING · canon V3 lock ─── */ --ls-eyebrow: 0.18em; /* canon eyebrow · tag · subtitle card */ --ls-eyebrow-wide: 0.32em; /* hero eyebrow ornamental */ --ls-display: -0.025em; /* hero h1 · §oferta h2 · §threshold */ --ls-h2: -0.02em; /* h2 padrão · big-nums */ --ls-h3: -0.01em; /* h3 cards · seal-num */ /* ─── LINE-HEIGHT · canon ─── */ --lh-body-card: 1.65; /* card body curto */ --lh-body-prose: 1.7; /* prose narrativo */ /* ─── WEIGHT · canon ─── */ --fw-display: 300; /* Cormorant Light · hero · h2 · big-nums */ --fw-card-title: 400; /* h3 card normal */ --fw-card-emphasis: 500; /* h3 card emphasis (entregaveis · paletas-strong) */ --fw-eyebrow: 700; /* eyebrow · tag canon V3 lock */ --fw-cta: 600; /* CTA · nav__cta */ } /* Normalizations applied inline at end of index.html