/* ─── GS ODONTOLOGIA — DESIGN TOKENS ─────────────────────────────── Gerado via skill Frontend Design | Horizonte 360 Fonte da verdade: MANUAL ID REDES SOCIAIS - GS ODONTOLOGIA.pdf Cores do manual (as únicas 4 existentes): #ffffff branco #d0c9c1 areia / nude #0b2d54 azul marinho GS #000000 preto Tipografia do manual: Montserrat + Noto Serif Display Toda cor abaixo é uma dessas quatro ou uma derivação matemática delas (mistura com branco/preto). Nenhuma cor foi inventada. ───────────────────────────────────────────────────────────────── */ :root { /* ── PALETA PRIMÁRIA — Azul Marinho GS #0b2d54 ──────────────── hsl(212, 77%, 18.6%). Tons 50–400 = mistura com branco, 600–900 = mistura com preto. */ --gs-primary: #0b2d54; --gs-primary-50: #f3f4f6; /* + 95% branco */ --gs-primary-100: #e7eaee; /* + 90% branco */ --gs-primary-200: #ced5dd; /* + 80% branco */ --gs-primary-300: #aab6c3; /* + 65% branco */ --gs-primary-400: #6d8198; /* + 40% branco */ --gs-primary-500: #0b2d54; /* = primary */ --gs-primary-600: #0a284a; /* + 12% preto */ --gs-primary-700: #08223f; /* + 25% preto */ --gs-primary-800: #071b32; /* + 40% preto */ --gs-primary-900: #051426; /* + 55% preto */ /* ── PALETA SECUNDÁRIA — Areia #d0c9c1 ───────────────────────── */ --gs-secondary: #d0c9c1; --gs-secondary-light: #d9d4cd; /* + 20% branco */ --gs-secondary-dark: #a6a19a; /* + 20% preto */ --gs-secondary-50: #f8f7f6; /* + 85% branco */ --gs-secondary-100: #f0eeeb; /* + 70% branco */ /* ── ACENTO E CTAs ──────────────────────────────────────────── O manual não define uma 5ª cor de destaque. O acento é a própria primária — coerente com a marca e com o logo. */ --gs-accent: #0b2d54; --gs-accent-hover: #0a284a; /* 10% mais escuro */ --gs-accent-soft: #d0c9c1; /* acento quente sobre navy */ /* Verde oficial do WhatsApp — cor de terceiro, não da marca */ --gs-whatsapp: #25d366; --gs-whatsapp-dark: #1da851; /* ── NEUTROS ──────────────────────────────────────────────────── */ --gs-bg: #ffffff; --gs-bg-alt: #f8f7f6; /* areia + 85% branco */ --gs-bg-deep: #0b2d54; /* seções invertidas */ --gs-surface: #ffffff; --gs-surface-alt: #f0eeeb; /* areia + 70% branco */ --gs-border: #eae7e3; /* areia + 55% branco */ --gs-border-strong: #d0c9c1; /* areia pura */ --gs-text: #000000; --gs-text-muted: #666b71; /* preto 58% + 8% navy */ --gs-text-inverse: #ffffff; --gs-text-inverse-muted:#ced5dd; /* primary-200 */ /* ── SOBREPOSIÇÕES ────────────────────────────────────────────── */ --gs-overlay-light: rgba(255, 255, 255, 0.08); --gs-overlay-dark: rgba(0, 0, 0, 0.55); --gs-overlay-brand: rgba(11, 45, 84, 0.45); --gs-overlay-brand-deep:rgba(11, 45, 84, 0.82); --gs-overlay-sand: rgba(208, 201, 193, 0.16); /* Gradiente cinematográfico do hero: navy denso embaixo, translúcido em cima, para o vídeo respirar. */ --gs-hero-scrim: linear-gradient( to bottom, rgba(5, 20, 38, 0.72) 0%, rgba(8, 34, 63, 0.42) 32%, rgba(11, 45, 84, 0.52) 62%, rgba(5, 20, 38, 0.92) 100% ); /* ── TIPOGRAFIA (do manual) ───────────────────────────────────── */ --font-display: 'Noto Serif Display', 'Times New Roman', serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --font-accent: 'Montserrat', system-ui, sans-serif; /* ── ESCALA TIPOGRÁFICA ───────────────────────────────────────── */ --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3.5rem; --text-6xl: 5rem; --text-7xl: 7rem; /* fluidos */ --text-hero: clamp(2.5rem, 7.2vw, 6.5rem); --text-section: clamp(2rem, 4.6vw, 3.75rem); --text-lead: clamp(1.0625rem, 1.5vw, 1.375rem); /* ── LINE HEIGHTS ─────────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* ── LETTER SPACING ───────────────────────────────────────────── */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.22em; /* ── ESPAÇAMENTO ──────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; --space-48: 12rem; /* ritmo vertical das seções (fluido) */ --section-y: clamp(4.5rem, 9vw, 9rem); /* ── LARGURAS ─────────────────────────────────────────────────── */ --container: 1280px; --container-wide: 1560px; --container-text: 62ch; --gutter: clamp(1.25rem, 5vw, 4rem); /* ── BORDER RADIUS ──────────────────────────────────────────────── O logo é uma serifada Didone de alto contraste e traço reto: a marca pede geometria seca. Raios mínimos = premium. */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 14px; --radius-full: 9999px; /* ── SOMBRAS ──────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(11, 45, 84, 0.06), 0 1px 2px rgba(11, 45, 84, 0.04); --shadow-md: 0 4px 16px rgba(11, 45, 84, 0.08), 0 2px 4px rgba(11, 45, 84, 0.05); --shadow-lg: 0 10px 40px rgba(11, 45, 84, 0.10), 0 4px 8px rgba(11, 45, 84, 0.06); --shadow-xl: 0 20px 60px rgba(11, 45, 84, 0.16); --shadow-brand: 0 8px 32px rgba(11, 45, 84, 0.25); /* ── MOTION (skill: Scroll World) ─────────────────────────────── */ --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-expo: cubic-bezier(0.19, 1.00, 0.22, 1.00); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.00); --ease-cinematic: cubic-bezier(0.77, 0.00, 0.18, 1.00); --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00); --dur-instant: 0.1s; --dur-fast: 0.25s; --dur-base: 0.5s; --dur-slow: 0.9s; --dur-cinematic: 1.4s; --dur-epic: 2.2s; /* ── Z-INDEX ──────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-header: 40; --z-overlay: 50; --z-drawer: 100; --z-modal: 200; --z-toast: 300; --z-fab: 999; /* altura do header, usada em scroll-margin e cálculos de layout */ --header-h: 84px; } @media (max-width: 768px) { :root { --header-h: 68px; } } /* ── MODO REDUZIDO DE MOVIMENTO (acessibilidade) ─────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }