/* ============================================================ 3TN Osasco — Tokens "Registro & Tinta" Consolidado do design system (docs/design-system/tokens/*). Fontes carregadas via no (Spectral, Libre Franklin, Montserrat). ============================================================ */ :root { /* --- Brand blue (primary) — rampa com hue-shift --- */ --blue-50: #EAF1F9; --blue-100: #D2E2F1; --blue-200: #A6C6E6; --blue-300: #6C9BD3; --blue-400: #2F72BE; --blue-500: #0D4A9A; /* PRIMARY — azul institucional */ --blue-600: #0B3E86; --blue-700: #0B3168; --blue-800: #0A2650; --blue-900: #081C3C; --ink-blue: #0A2E63; /* azul-tinta — grandes áreas, cabeçalhos, footer */ /* --- Accent: ouro-gravação (selo/filete) — NUNCA em botão --- */ --gold-50: #F5EEDD; --gold-500: #C9A24B; --gold-600: #B0894B; --gold-700: #96733B; /* --- WhatsApp green (uso restrito) --- */ --green-whatsapp: #25D366; --green-whatsapp-dark: #1EB958; --green-whatsapp-50: #E9FBF0; /* --- Neutros FRIOS (papel frio, leve azul da marca) --- */ --white: #FFFFFF; --gray-50: #FBFCFE; /* quase-branco frio — superfície de card */ --gray-100: #F4F6FB; /* papel frio — fundo de página */ --gray-200: #E6EAF2; /* cinza-azulado claro — divisores */ --gray-300: #D3DAE6; /* borda default */ --gray-400: #AEB7C6; /* muted claro / disabled */ --gray-500: #7A8393; /* borda interativa / muted (>=3:1) */ --gray-600: #565E6C; /* texto secundário */ --gray-700: #323843; /* texto corpo */ --gray-800: #232833; --gray-900: #14181F; /* tinta quase-preta */ /* --- Semânticos --- */ --success-500: #1E7D4E; --success-50: #E4F1E9; --warning-500: #A85D00; --warning-50: #F7ECDD; --danger-500: #BC2E2E; --danger-50: #F8E7E7; --info-500: var(--blue-500); --info-50: var(--blue-50); /* --- Aliases semânticos --- */ --color-primary: var(--blue-500); --color-primary-hover: var(--blue-600); --color-primary-active: var(--blue-700); --color-navy: var(--ink-blue); --color-navy-deep: var(--blue-800); --color-accent: var(--green-whatsapp); --color-accent-hover: var(--green-whatsapp-dark); /* Acento de assinatura — agora MONO AZUL (antes ouro). */ --color-seal: var(--color-primary); /* filete/ícones em seções claras */ --color-seal-strong: var(--blue-200); /* acento claro sobre navy (eyebrow/selo) */ --color-seal-tint: var(--blue-50); /* Surfaces */ --surface-page: var(--gray-100); --surface-card: var(--gray-50); --surface-raised: var(--white); --surface-tint: var(--blue-50); --surface-band: var(--gray-200); --surface-navy: var(--ink-blue); --surface-navy-deep: var(--blue-800); /* Text */ --text-strong: var(--gray-900); --text-body: var(--gray-700); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-on-navy: var(--white); --text-on-navy-muted: rgba(255, 255, 255, 0.78); --text-on-seal: var(--gray-900); --text-link: var(--blue-500); /* Borders */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-500); --border-focus: var(--blue-500); --border-on-navy: rgba(255, 255, 255, 0.24); --ring-focus: 0 0 0 3px rgba(13, 74, 154, 0.35); /* Tipografia */ --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif; --font-brand: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --fs-display: 3.25rem; --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.25rem; --fs-body: 1.125rem; --fs-sm: 1rem; --fs-xs: 0.8125rem; --lh-tight: 1.14; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.65; --ls-heading: -0.01em; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.08em; --measure: 66ch; /* 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; --container-max: 1200px; --container-pad: 1.5rem; --section-pad: clamp(3rem, 6vw, 6rem); --section-pad-compact: clamp(2rem, 4vw, 3.5rem); --section-pad-ample: clamp(4rem, 9vw, 8rem); /* Raios / sombras / motion */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-pill: 999px; --shadow-xs: 0 1px 1px rgba(20, 24, 31, 0.04); --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05), 0 1px 1px rgba(20, 24, 31, 0.04); --shadow-md: 0 2px 4px rgba(20, 24, 31, 0.06), 0 1px 2px rgba(20, 24, 31, 0.05); --shadow-lg: 0 6px 14px rgba(20, 24, 31, 0.08), 0 2px 4px rgba(20, 24, 31, 0.05); --shadow-xl: 0 12px 28px rgba(20, 24, 31, 0.10), 0 4px 8px rgba(20, 24, 31, 0.06); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-normal: 220ms; --dur-slow: 360ms; } /* ============================================================ Base reset & element defaults ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button { font-family: inherit; } :focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Eyebrow / rótulo caps */ .eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-primary); } /* Numerais OpenType */ .num-oldstyle { font-feature-settings: "onum" 1; } .num-tabular { font-feature-settings: "lnum" 1, "tnum" 1; } .measure { max-width: var(--measure); } /* ===== Responsivo ===== */ .tn-grid { display: grid; grid-template-columns: var(--cols, 1fr); } @media (max-width: 900px) { .tn-grid { grid-template-columns: var(--cols-md, 1fr); } } @media (max-width: 560px) { .tn-grid { grid-template-columns: 1fr; } } .tn-nav-desktop { display: flex; align-items: center; gap: 0.25rem; } .tn-hamburger { display: none; } .tn-mobile-nav { display: none; } @media (max-width: 900px) { .tn-nav-desktop { display: none; } .tn-hamburger { display: inline-flex; } .tn-mobile-nav.is-open { display: block; } } /* ===== Signature ===== */ .guilloche-wm { -webkit-mask: url("../assets/guilloche-rosette.svg") center / contain no-repeat; mask: url("../assets/guilloche-rosette.svg") center / contain no-repeat; background-color: currentColor; pointer-events: none; } .seal-mark { -webkit-mask: url("../assets/3tn-seal.svg") center / contain no-repeat; mask: url("../assets/3tn-seal.svg") center / contain no-repeat; background-color: currentColor; pointer-events: none; } .rule-engraving { border: 0; height: 1px; background: var(--border-default); position: relative; overflow: visible; } .rule-engraving::after { content: ""; position: absolute; left: 0; top: 50%; width: 2.25rem; height: 2px; transform: translateY(-50%); background: var(--color-seal); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }