/* ============================================================ SIRFETCH — Tema de Luxo (FONTE ÚNICA do visual) Edite só este arquivo para mudar tipografia/cores/efeitos de TODAS as páginas. Incluído via em cada página. ============================================================ */ :root { --gold: #A98F5D; --gold-soft: rgba(169, 143, 93, 0.55); --ink: #09090b; --pearl: #F5F5F1; } /* ── Tipografia editorial (Playfair Display) ── */ .font-display { font-family: 'Playfair Display', Georgia, serif !important; } .editorial-header h2, .brand-card-name, .editorial-banner-text h3 { font-family: 'Playfair Display', Georgia, serif !important; } .editorial-header h2 { font-weight: 500; letter-spacing: -0.01em; } .editorial-banner-text h3 { font-weight: 500; } /* ── Acento champagne sutil ── */ .brands-tape-dot { color: var(--gold-soft) !important; } .editorial-header p, .hero-eyebrow { color: var(--gold) !important; opacity: 0.85 !important; } .editorial-link:hover { border-color: var(--gold); color: var(--gold); } .text-gold { color: var(--gold); } /* ── Seleção de texto e foco acessível ── */ ::selection { background: var(--ink); color: var(--pearl); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; } /* ── Scrollbar discreta (desktop) ── */ @media (min-width: 768px) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #ECECE7; } ::-webkit-scrollbar-thumb { background: #C9C4B8; border-radius: 8px; border: 2px solid #ECECE7; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } } /* ── Hover premium de imagens de coleção ── */ .collection-tile img { transition: transform 0.9s cubic-bezier(.22,.61,.36,1), filter 0.9s ease !important; } .collection-tile:hover img { transform: scale(1.05); } /* ── Revelação no scroll (ativa só quando o tema marca ) ── */ @media (prefers-reduced-motion: no-preference) { html.sf-reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } html.sf-reveal [data-reveal].in { opacity: 1; transform: none; } /* Entrada do hero ao carregar a página */ html.sf-reveal .hero-intro { opacity: 0; transform: translateY(26px); animation: sfHeroIn 0.95s cubic-bezier(.22,.61,.36,1) 0.1s forwards; } html.sf-reveal h1.hero-intro { animation-delay: 0.22s; } } @keyframes sfHeroIn { to { opacity: 1; transform: none; } }