/* ===================================================================== BARBEARIA FRITZ — styles.css Tokens, componentes e animações vêm do Design System (assets/design_system.html). Mobile first: estilos base para o celular, media queries min-width para telas maiores. 1. Tokens 5. Botões & badges 2. Reset & base 6. Hero 3. Fundos 7. Flutuantes (WhatsApp) 4. Navegação 8. Animações + prefers-reduced-motion ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ :root { --black: #0A0907; --black-light: #12100D; --black-medium: #1A1713; --black-soft: #24201A; --white: #F4EEE3; --white-dim: #E3DACB; --gray-light: #A89E8F; --gray: #7A7064; --gray-dark: #4A433A; --loden: #2F5D3F; --loden-light: #4E8A60; --loden-bright: #7FB98D; --loden-deep: #1A3426; --gold: #C9A253; --gold-light: #E4C98C; --gold-dark: #9C7A35; --wood-900: #1C130C; --wood-700: #3B2717; --wood-500: #6E4A2C; --pole-red: #A8443A; --pole-blue: #34557A; --pole-cream: #EFE6D6; --st-popular: var(--gold); --st-promo: #E2735C; --st-open: #6FD08C; --st-closed: #E0705E; --black-rgb: 10, 9, 7; --white-rgb: 244, 238, 227; --gold-rgb: 201, 162, 83; --loden-rgb: 78, 138, 96; --open-rgb: 111, 208, 140; --closed-rgb: 224, 112, 94; --line: rgba(var(--gold-rgb), 0.12); --line-strong: rgba(var(--gold-rgb), 0.24); --grad-feather: linear-gradient(120deg, #8C6A2C 0%, #C9A253 35%, #F3DFA8 50%, #C9A253 65%, #8C6A2C 100%); --grad-loden: linear-gradient(135deg, #3B7350 0%, #2F5D3F 45%, #1A3426 100%); --grad-night: radial-gradient(120% 80% at 80% 0%, rgba(var(--loden-rgb), 0.18), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(var(--gold-rgb), 0.10), transparent 60%); --grad-pole: repeating-linear-gradient(-45deg, var(--pole-red) 0 9px, var(--pole-cream) 9px 18px, var(--pole-blue) 18px 27px, var(--pole-cream) 27px 36px); --display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gothic: 'Grenze Gotisch', 'Playfair Display', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-display: clamp(4.1rem, 8vw + 1.6rem, 8.25rem); --gutter: 16px; --container: 1280px; --nav-h: 76px; --section-y: clamp(4.5rem, 8vw, 8rem); --r-sm: 3px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; --shadow-2: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line); --glow-gold: 0 0 0 1px rgba(var(--gold-rgb), 0.5), 0 12px 40px -10px rgba(var(--gold-rgb), 0.55); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-nav: 1000; --z-menu: 999; --tx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --tx-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='w' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .11' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.42 0 0 0 .05 .27 0 0 0 .03 .16 0 0 0 .015 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1200px) { :root { --gutter: 56px; --nav-h: 88px; } } @property --fz-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* ===================================================================== 2. RESET & BASE ===================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; scrollbar-width: thin; scrollbar-color: var(--gold-dark) var(--black); -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 1rem; line-height: 1.7; background: var(--black); color: var(--white); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* grão de filme global */ body::after { content: ''; position: fixed; inset: -50%; z-index: 4000; pointer-events: none; background-image: var(--tx-grain); opacity: 0.05; mix-blend-mode: overlay; animation: grainShift 1.2s steps(6) infinite; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; } ul { list-style: none; } ::selection { background: rgba(var(--gold-rgb), 0.35); color: var(--white); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 5000; padding: .7rem 1rem; background: var(--gold); color: var(--black); font-size: .8rem; font-weight: 600; border-radius: var(--r-sm); transform: translateY(-160%); transition: transform .3s var(--ease-out-expo); } .skip-link:focus-visible { transform: none; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .fz-ico { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .gold { color: var(--gold); } /* ===================================================================== 3. FUNDOS & TEXTURAS (DS · 03) ===================================================================== */ .bg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .bg-wood { background: var(--tx-wood), var(--wood-900); background-size: 100% 600px; } .bg-wood::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--black-rgb), .55), rgba(var(--black-rgb), .85)); } .bg-wood::after { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 40%, rgba(var(--gold-rgb), 0.07) 50%, transparent 60%); animation: woodSheen 14s var(--ease-in-out) infinite; } .bg-smoke span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--white-rgb), 0.05), transparent 70%); filter: blur(30px); animation: smokeDrift 28s var(--ease-in-out) infinite alternate; } .bg-smoke span:nth-child(1) { left: -25%; top: 5%; } .bg-smoke span:nth-child(2) { right: -25%; top: -25%; animation-duration: 36s; animation-delay: -8s; background: radial-gradient(closest-side, rgba(var(--loden-rgb), 0.13), transparent 70%); } .bg-smoke span:nth-child(3) { left: 25%; bottom: -45%; animation-duration: 42s; animation-delay: -16s; background: radial-gradient(closest-side, rgba(var(--gold-rgb), 0.06), transparent 70%); } .bg-spotlight { background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(var(--gold-rgb), 0.07), transparent 60%); } .gold-line-decor { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); opacity: 0.1; pointer-events: none; } .gold-line-decor::after { content: ''; position: absolute; left: -1px; width: 3px; height: 90px; top: -90px; background: linear-gradient(to bottom, transparent, var(--gold-light), transparent); animation: lineDrop 8s var(--ease-in-out) infinite; animation-delay: var(--delay, 0s); } .barber-pole { position: relative; width: 18px; height: 190px; border-radius: 9px; overflow: hidden; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; box-shadow: inset 5px 0 9px rgba(0,0,0,.55), inset -3px 0 7px rgba(255,255,255,.15), 0 0 0 1px rgba(var(--gold-rgb), .4); } .barber-pole::before, .barber-pole::after { content: ''; position: absolute; left: -4px; right: -4px; height: 12px; background: var(--grad-feather); border-radius: 6px; } .barber-pole::before { top: 0; } .barber-pole::after { bottom: 0; } .barber-pole i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 35%, rgba(255,255,255,.25) 55%, transparent 70%, rgba(0,0,0,.4)); } .fx-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ===================================================================== 4. NAVEGAÇÃO (DS · .nav / .nav-logo / .nav-links / .nav-cta / .mobile-nav) ===================================================================== */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-nav); height: var(--nav-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid transparent; transition: height .4s var(--ease-out-quart), background .4s ease, border-color .4s ease; } .nav.scrolled { height: 64px; background: rgba(var(--black-rgb), 0.86); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom-color: var(--line); } .nav.scrolled::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .5), transparent); } .nav-logo { display: flex; align-items: center; gap: .7rem; color: var(--white); position: relative; z-index: 1001; } .nav-logo .logo-mark { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition: transform .8s var(--ease-out-expo), width .4s var(--ease-out-quart), height .4s var(--ease-out-quart); } .nav.scrolled .nav-logo .logo-mark { width: 50px; height: 50px; } .nav-logo:hover .logo-mark { transform: rotate(-4deg) scale(1.06); } .footer-brand .logo-mark { width: 120px; height: 120px; } .nav-logo .logo-words { display: flex; flex-direction: column; line-height: 1; } .nav-logo .logo-ampersand { font-size: .55rem; letter-spacing: .42em; color: var(--gold); text-transform: uppercase; margin-bottom: 3px; } .nav-logo .logo-name { font-family: var(--display); font-size: 1.7rem; letter-spacing: .16em; } .nav-links { display: none; align-items: center; gap: 2.2rem; } .nav-links a { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-light); transition: color .3s ease; position: relative; padding: .4rem 0; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width .3s var(--ease-out-expo); } .nav-links a:hover { color: var(--gold); } .nav-links a:hover::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: 1rem; } .nav-cta { display: none; align-items: center; gap: .6rem; font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: .8rem 1.4rem; border: 1px solid var(--gold); color: var(--gold); transition: color .4s ease, background .4s ease, box-shadow .4s ease; } .nav-cta .fz-ico { font-size: 1rem; } .nav-cta:hover { background: var(--gold); color: var(--black); box-shadow: var(--glow-gold); } .nav-hamburger { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px; z-index: 1001; } .nav-hamburger span { display: block; width: 28px; height: 1px; background: var(--white); transition: transform .4s var(--ease-out-expo), opacity .3s ease, width .4s var(--ease-out-expo); } .nav-hamburger span:nth-child(2) { width: 18px; margin-left: auto; } .nav-hamburger:hover span:nth-child(2) { width: 28px; } .nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(10px); } .nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--black); display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 6rem var(--gutter) 2rem; clip-path: circle(0% at calc(100% - 36px) 38px); visibility: hidden; transition: clip-path .8s var(--ease-out-expo), visibility 0s linear .8s; } .mobile-nav.active { clip-path: circle(150% at calc(100% - 36px) 38px); visibility: visible; transition: clip-path .9s var(--ease-out-expo), visibility 0s; } .mobile-nav .pole-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; } .mobile-link { font-family: var(--display); font-size: 2.6rem; letter-spacing: .1em; line-height: 1.15; color: var(--white-dim); display: flex; align-items: baseline; gap: 1rem; opacity: 0; transform: translateY(30px); transition: color .3s ease, opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); } .mobile-link b { font-family: var(--mono); font-size: .7rem; font-weight: 400; color: var(--gold); } .mobile-link:hover { color: var(--gold); } .mobile-nav.active .mobile-link { opacity: 1; transform: none; } .mobile-nav.active .mobile-link:nth-of-type(1) { transition-delay: .15s; } .mobile-nav.active .mobile-link:nth-of-type(2) { transition-delay: .2s; } .mobile-nav.active .mobile-link:nth-of-type(3) { transition-delay: .25s; } .mobile-nav.active .mobile-link:nth-of-type(4) { transition-delay: .3s; } .mobile-nav.active .mobile-link:nth-of-type(5) { transition-delay: .35s; } .mobile-nav.active .mobile-link:nth-of-type(6) { transition-delay: .4s; } .mobile-nav-foot { margin-top: 2rem; display: grid; gap: 1rem; justify-items: start; opacity: 0; transform: translateY(20px); transition: all .6s var(--ease-out-expo) .4s; } .mobile-nav.active .mobile-nav-foot { opacity: 1; transform: none; } .mobile-nav-foot .btn { width: 100%; } .mobile-nav-foot p { font-size: .8rem; color: var(--gray-light); } @media (min-width: 640px) { .nav-cta { display: inline-flex; } } @media (min-width: 1100px) { .nav-links { display: flex; } .nav-hamburger { display: none; } } @media (min-width: 1100px) and (max-width: 1299px) { .nav-links { gap: 1.4rem; } .nav-links a { font-size: .66rem; letter-spacing: .16em; } } /* ===================================================================== 5. BOTÕES, STATUS & BADGES (DS · 4.1 / 4.5) ===================================================================== */ .status-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .7rem; border-radius: var(--r-pill); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; background: rgba(var(--white-rgb), .05); border: 1px solid rgba(var(--white-rgb), .12); color: var(--white-dim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); position: relative; flex-shrink: 0; } .status-pill .status-sub { color: var(--gray-light); letter-spacing: .04em; text-transform: none; font-weight: 400; } .status-pill.is-open { border-color: rgba(var(--open-rgb), .35); background: rgba(var(--open-rgb), .08); } .status-pill.is-open .dot { background: var(--st-open); box-shadow: 0 0 10px var(--st-open); } .status-pill.is-open .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--st-open); animation: pulseRing 1.8s var(--ease-out-quart) infinite; } .status-pill.is-closed { border-color: rgba(var(--closed-rgb), .35); background: rgba(var(--closed-rgb), .08); } .status-pill.is-closed .dot { background: var(--st-closed); } .badge { --bc: var(--gold); display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .62rem; border-radius: var(--r-pill); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--bc); background: color-mix(in srgb, var(--bc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent); white-space: nowrap; } .badge--popular { background: var(--grad-feather); background-size: 200% 100%; color: var(--black); box-shadow: 0 4px 14px -4px rgba(var(--gold-rgb), .6); animation: featherFlow 5s linear infinite; } .badge .fz-ico { font-size: .8rem; } .btn { --bh: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: var(--bh); padding: 0 1.75rem; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1; white-space: nowrap; isolation: isolate; cursor: pointer; transition: transform .4s var(--ease-out-expo), box-shadow .4s ease, background .4s ease, color .3s ease; -webkit-tap-highlight-color: transparent; } .btn > span { position: relative; z-index: 1; } .btn .fz-ico { font-size: 1.15rem; position: relative; z-index: 1; transition: transform .4s var(--ease-out-expo); } .btn:active { transform: translateY(1px) scale(.98); } /* CTA de conversão nº 1 */ .btn-whatsapp { --bh: 60px; color: #fff; background: linear-gradient(135deg, #3E8A57 0%, #2C6B43 50%, #1F5232 100%); border-radius: var(--r-pill); padding: 0 1.8rem 0 .5rem; box-shadow: 0 0 0 1px rgba(var(--loden-rgb), .7), 0 10px 30px -8px rgba(62, 160, 95, .55), inset 0 1px 0 rgba(255,255,255,.18); } .btn-whatsapp .wa-badge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); position: relative; z-index: 1; } .btn-whatsapp .wa-badge .fz-ico { font-size: 1.35rem; } .btn-whatsapp .wa-badge::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(160, 255, 190, .6); animation: pulseRing 2.2s var(--ease-out-quart) infinite; } .btn-whatsapp::before { content: ''; position: absolute; inset: -14px; border-radius: inherit; z-index: -1; background: radial-gradient(closest-side, rgba(62, 190, 105, .5), transparent); filter: blur(14px); opacity: .45; transition: opacity .5s ease, transform .5s var(--ease-out-expo); animation: haloBreath 3.2s var(--ease-in-out) infinite; } .btn-whatsapp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 47%, transparent 58%) no-repeat; background-size: 250% 100%; background-position: 140% 0; animation: razorGlint 4.5s var(--ease-in-out) 3s infinite; } .btn-whatsapp:hover { box-shadow: 0 0 0 1px rgba(160, 255, 190, .55), 0 18px 44px -8px rgba(62, 190, 105, .8), inset 0 1px 0 rgba(255,255,255,.25); } .btn-whatsapp:hover::before { opacity: 1; transform: scale(1.08); } .btn-whatsapp .arrow { transition: transform .4s var(--ease-out-expo); } .btn-whatsapp:hover .arrow { transform: translateX(4px) rotate(-45deg); } .btn-whatsapp:focus-visible { outline-offset: 5px; } /* link de texto com seta (DS base .btn-outline) */ .btn-outline { display: inline-flex; align-items: center; gap: .75rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--white-dim); transition: color .3s ease; position: relative; padding: .6rem 0; } .btn-outline::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--ease-out-expo); opacity: .6; } .btn-outline:hover { color: var(--gold); } .btn-outline:hover::after { transform: scaleX(1); } .btn-outline .fz-ico { font-size: 1.15rem; transition: transform .3s ease; } .btn-outline:hover .fz-ico { transform: translateX(4px); } /* ===================================================================== 6. HERO ===================================================================== */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--nav-h); background: var(--grad-night), var(--black); } .hero-bg { position: absolute; inset: 0; z-index: -1; } .hero-bg .bg-wood { opacity: .55; -webkit-mask-image: radial-gradient(90% 70% at 15% 30%, #000, transparent 75%); mask-image: radial-gradient(90% 70% at 15% 30%, #000, transparent 75%); } .hero-watermark { position: absolute; right: -4vw; top: 52%; transform: translateY(-50%); font-family: var(--gothic); font-weight: 700; font-size: 46vw; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), .07); pointer-events: none; user-select: none; white-space: nowrap; } .hero-inner { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3.5rem; padding-block: 2rem 3.5rem; } .strip-grid { position: relative; } /* ---------- texto ---------- */ .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-bottom: 1.8rem; } .hero-tag { display: inline-flex; align-items: center; gap: .9rem; } .hero-tag-line { width: 36px; height: 1px; background: var(--gold); position: relative; overflow: hidden; } .hero-tag-line::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--white); animation: tagLineRun 2.8s var(--ease-in-out) 2s infinite; } .hero-tag-text { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); } .hero-title { font-family: var(--display); font-weight: 400; font-size: min(21vw, 8.25rem); line-height: .88; letter-spacing: .015em; color: var(--white); margin-bottom: 1.6rem; } /* cada linha é uma máscara; o texto sobe de dentro dela */ .hero-title .line { display: block; overflow: hidden; padding: .12em 0 .08em; margin: -.12em 0 -.08em; } .hero-title .line > span { display: inline-block; position: relative; } .hero-title .title-stroke { -webkit-text-stroke: 1.5px var(--white); color: transparent; } .hero-title .title-stroke::after { /* reflexo de navalha (DS .glint) */ content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1.5px transparent; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 48%, var(--gold-light) 52%, transparent 62%); background-size: 250% 100%; background-position: 140% 0; -webkit-background-clip: text; background-clip: text; animation: razorGlint 6s var(--ease-in-out) 3s infinite; } .hero-title .line--gold { font-size: .38em; line-height: 1.3; margin-top: .45rem; white-space: nowrap; } @media (max-width: 639px) { .hero-title .line--gold { font-size: .34em; } .strip-value { font-size: 1.6rem; } .strip-label { font-size: .52rem; letter-spacing: .2em; } } .hero-title .title-gold { font-family: var(--serif); font-style: italic; letter-spacing: 0; color: var(--gold); } .hero-title .title-gold em { font-family: var(--gothic); font-style: normal; font-weight: 700; font-size: 1.12em; color: var(--gold-light); } .hero-desc { font-size: 1rem; line-height: 1.8; color: var(--gray-light); max-width: 510px; margin-bottom: 2.2rem; } .hero-desc strong { color: var(--white-dim); font-weight: 500; } .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; width: 100%; } .hero-actions .btn-agendar { width: 100%; } .hero-actions .btn-agendar .arrow { margin-left: auto; } .hero-actions .btn-outline { align-self: flex-start; } .hero-perks { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 2.2rem; } .hero-perks li { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--gray-light); } .hero-perks .fz-ico { font-size: 1.1rem; color: var(--gold); } /* ---------- foto de fundo: entra pela direita e se funde ao preto (DS · .hero-image) ---------- */ .hero-image { position: absolute; inset: 0; overflow: hidden; } .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; filter: saturate(.75) contrast(1.05) brightness(.6); scale: 1.05; } .hero-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--black-rgb), .62) 0%, rgba(var(--black-rgb), .82) 45%, var(--black) 100%), radial-gradient(80% 60% at 70% 20%, transparent, rgba(var(--black-rgb), .6)); } /* ---------- logo: emblema animado (DS · .emblem-wrap / .fz-emblem) ---------- */ .hero-visual { position: relative; z-index: 1; display: grid; place-items: center; } .hero-visual .fx-sparks { z-index: -1; inset: -15% -25%; width: 150%; height: 130%; } .emblem-wrap { position: relative; width: min(86vw, 400px); aspect-ratio: 1; perspective: 900px; } .emblem-wrap::before { /* halo */ content: ''; position: absolute; inset: -18%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--loden-rgb), .35), rgba(var(--gold-rgb), .08) 55%, transparent 72%); filter: blur(10px); animation: haloBreath 6s var(--ease-in-out) infinite; } .hero-logo { position: relative; width: 100%; height: 100%; transition: transform .3s ease-out; transform-style: preserve-3d; } .hero-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.65)); animation: floatT 7s var(--ease-in-out) 2.4s infinite; } .hero-logo-shine { /* reflexo de navalha passando só sobre os pixels da logo */ position: absolute; inset: 0; pointer-events: none; animation: floatT 7s var(--ease-in-out) 2.4s infinite; /* máscara = silhueta da logo (embutida para funcionar também abrindo o arquivo local) */ --logo-mask: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADdCAQAAAB6D9SvAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAADcoAMABAAAAAEAAADdAAAAAHTKue8AACNxSURBVHgB7V0HnBfF9X93HAdH7woKAgqIKERFBcWEYhdrjC1KFI3/2FuMsUSNURP9SywxiQka0WiAJOZvAkSjAexBLIAIghJQQZHe4bj2+39nd2d3Zmdmy6/c/crO73O3U96093ZmZ968ea+MisOVU1VAR3YEpBVoUkWBttvf7Ovoeqr3R7rhN+lSqnZDReEpK5BeVFEX6k498Sunz+k9/MluAM1Gusk10P70qSaxnG6kljSPltCqQiNsPo+49iBFb+pPA/DXi/ag9i7qN9MUuo02umGipXQ7PSmEZW89NZcj3NAxdBz8O2klfUzv0wf0Fm1x0xJPWhi4g77GKEgZf68JhGQVDKJaF7aOnqU76C6aSHOs2Hr6hqENP3bz2DWdZIBLoiNj4BRMYGaysZQ7pbIG0W4X/gM3pYyGYxJN0Rg3RvSU0ctuHlbiw5TPM5DY8rz270VfSGj1k/FjaiG0f6BAuClCPGG9eRvGo84diwWNWOphOiDEtTPEl3R0M3y99jK86RMktIooZv6N0nKkH+1yoZ+NhNEKes3NYZc9TJuvD62gv9EJVKlNLcHIPehcLCjm0TrahIXBjdRKwcFZPsTKpPuSOgg59qFtLvQMN76nplSeeLoLz8sdzZOkZ2taaEF+QD+kPlJKCQaOBslW+xD3GvXwYWIQ1fhgOIrZ8wUJem+sB3nqajqLRtLp9Cgm234SlBeopLkuPM93npcs+Z5zITfRZKxDTWtUKVOxBVrTOTSLGlxUcKSx50zsqkTXDst0MV3076SjRVDakzZoYBtosATlBc7XQP/YSxZ8VbTYB/sOXRwwkoWsxeLtTTfRIh8SRGKk6EJfV2cboT+m1hJsZ2UEs5LrDBuB1tp2PCGVyAMnadvwAZ3JAYr72Qp7K28yk8nlhf7mQ8JjWqQx+AZaQN8VoNtJa9C19Am+nQxOv568SlvubKE8zztZC8vKfsSwqPLyFoGvin6jncw8ojHfm76eXmpEmp3vAhe+CkwtXtZ7+FpWYbV6HD2AKVR1e4DFxWHF51LfVM1y9sTSSYSR/feohRdjzIH0ZQASGEpe9HX7SMPXkKPvIxfVLcD24rHP+UrxBx9yIXkO+7lBQ+ZrDbB2jl2GEe2vMevh8qyXGFTgRzQhKBlpc33py/G+B7mB2sWH/PVj+XuQx04fRN83FNmOuvlSKqTp2JeIYEs6TY1sjJjGJRxhMb0hoFtb6Rlf6jpsfoNcubvcZyPA5K6hD4Ud2C2+ZY2Xq4L29gKW7zA6xBfjD/b3RzROuLEJt5r+buxYLTbh//Wl1oNrH+x4D8qEMVUrZfkBPQjm2G4n7jDs8ZhbR+9K5wt2sn+DfQE1sxOM//2HtAfjZFAd8cbs+ZQwjJ6ngcYGjfDxB72vzE7ttHNj4DemgY5wampFy13I2dZqrxUOhc7GV5PVsMThazajf1vhrTQUhO4B5vMt9IqbL0UPSe3uRF8JaV5LRd/5Ug6iq5HjHRrhi837YEuci+1A0083trQCRy1ix0X/TlJ5F8cYoVnOee7ipA9tdyHraT7G0zLa6sbMctpzmxPzoNC+MrxovBX/EOIJu0oeb3ou8x0uEdgCDLaa7qO2Ull5HRjism393yqx2ZdL6JB5KDXKwqFXwO6vBqxf2zWnX0ul+hE9GWDN6DpsyO2UY8QG0SVu3g+FnZn/0MdfZgps7ZOlcljgu25Z79NIJTUPI8roSmHHU08/MrZxT1rvdm4bjcKXTTwwrQd6Rddcy+NgSFwrjM8LrBJrcWxai69ZNf44iWx0s7O7a9xaU5ggReeNrPXCuvIA4bxhGp2hsN/m0rFiIZa/gt4QaqmjmxWIPItoCWEC/xv5mDuN+Rs7yYWtwbeG6Nu+UXWXkKGtxBHhdfyXfkn7ClDd6RQ6nA6kg/Drb4k7fAOT1gn0HYymK8EdZcuFfnQr/RWc/k3YG4o8kg70T7c99XSkW+o9vlhv91eD2kdoj3nGu3lYS9eBAZDnrhXEBNQP+YvSiZnXhWOFbbX9tRkNQQVOFPb8Iwhgn395wgUbsKj/B1B2GQ3L4PvRHKd/QwWi9xA4LqxmjuqWYJrxFr1jTaBXuuGFXlckXw+JI/MkeDcF4fpiz8W7yp+L6FBN26uwyOcQ/6U2FsRQYVXI0moQPhEpd2B0PAxu/BF4CSo0ZWUa1QVzxSJhxG9wVsS3uC1MYZJljq0X7d8yw9nAEy5ECoJHBbQpuE9oOO/kekyEqrtDgOT8xv5gG/NcKVqD0TVEzZiTmEpIkY2hG2gq9pEpPPtZciq8LVuwrWDOW1Rt0M4kxwjiStWFtSE4XkA873YK3VE/0fvQZhf2Q/db2IP+AoLNA9d9LHW1kNXY/9qAU9IOfx7DOgUpTtt55/G7XH6N17420mt3v5dQCL49jPz/icrE4Z0qp+hpvPHcdc7JhMhLj/psBWbAC9aONIXFUScr21Huq1an4ZDe7aam8C0uoD2cjZLZQvO9Mcd8MwXiMNizJcgNOD7JP3cA3WMtUS6ymtZP2LZ4a0+71UMhVMv7WxOwf+tKP9eM1jzoufje8Y7w5yeQcfTcYIH1tRT7qqBLG14u1dcaq8QhNNpa+F9B12LxPx6j5XDEhnEZ1bJ0MW1BBvvMoIOwbj5FAm0BCWjeyxTWvWY3BHCf5eP371ihA15XuG+TsGW2uRW14BSeE3ti6Yyv0DkQiH0OB6/L8bWUN9t2bUxy7EFrl2hGY9yU37u9u0/KepMbn8IKtb2UJgfGWpCbMN/kmesmcEU4ucRnPf0K44Mt65/Azu3XGBnRXRW+LOPoMfAmvhZGq1i66t+NHWHv6FWEQHbAxsQWAlwpHAANEDhGtRpuildoHyy87DbWYnPRqK4MHIpJQN3LmKsP0tY8S3j7WCPrhEWy3eg6ego5O0Tenpbjrs0lkFhZGiispxKNx3xhEEDXNj808iC0hAkNPu8cI7WQxNgfM+Yvx15Ullm7FzePGsntjZUWR0cKvPcfaOr1GEUM8g+YrIZAvrFeyLfF2dBqMvuiWtJRdDdOE7wPv1d7HN9WkpnKvmpiB48E2SYg1150qnNsZLdmqbP+VAscSv8SMMDbPrFxVtAHKvKFddYlJbmZJ7sNXIWJjbupbuzzEaU0DsDByEcCa4x3Nr3naoHJxduU6bPcPQux21RncXrUUjvT/c7GQm77JuxaZTlSNW8WYoZpmb2zlOHeyzkF+48kl/ygRbiPnNPnsOZ0xBbcO12Tu5tu6J9ZWmWKbR+NV8trzxNikus/TxBi8mBTIPp+LkwOPaMdKUWxaubfIpGHNaACXDqW8kepNc8D8k5J1l9KlgJ70H8EdPhrTD88IQei452wWLI/A/Wk3vUZLH1axJbvpAOkPucocKKwbhKrZ2Kp7FhGdr+10P6FdDlpH2nb2QtLnFvod/hSzIAMytP0C3D8v+nslnpIfEK5tkxDr+JMewgYAZ2lC1py6+OHTnHGlCwS3wFfZ7MA8LT41cTPcaogAqCibh69ihHye1f2g7DDsqGuU6ZRVndf+j+BTymWt4amY8UWfCdOhE/PX4sF/WqcTszG2vZm8ET3ywIRu+ElrIaCAM+daTz+tVv9HQ80V76zIn5tdoFrYTt+xbAWkh/e8oS377GcTIPpEZHl2oEl1xS0fXjgxpm33vwcZB1PNccmZyzmkeD2fCbNRuYy004pw97Du6Ab3Bg2bZ5h1dTZPRTdrOHaXRfSqbBacpf+OeaC6/ClSv8crT3kuzyxDLZh8sSVxHb/b9oUiZixGdY+sjCPWL3qX2QdMHZxFjLv4Huius6a41a1pKaLqceRztN0vo8lrvZDF1OJKdNr+e8ghLsvlvxejO2rMdwg0pWYdlwnIP90el2p3N8YHh6NmkZYxH7cOB3obqbx/Pnz3IQt8zVQ1RHXXeYsSfi9oxb0uA97r2q//XHriQRfhcV9NJSyQ/57IR11RWC5T0UsLVqduYTageOoK2JyOw8DeztF/FyfIeInEttvfCBuspxYCU58FATdhHr70sEhtbfP0U4tSgvTgWE8jjONM4ja2Q4QQ99LiK4U1sprGvtsvyVE28I7bS9PhDYbvH0NG/rwGpoO4lPMJYMM/QmOHi0cPOn5K8H5M0xthVVXMNpWY2sbzXUPvSkXXFNTpe6A4oyTYnJgWtBLLt7q6VvREJRdqNbgcwSh7IeRqmuDTYYnnhdUXr6mvYvNtqiqw9ztSpygiNod5mvFaM35s5bSBtwNEzr/FOFNbAfRgsXGEkwl52P8MvBddNeUZVT38O2DzYL5cr4chNoJA19E6HOhRxStIZm4pCiIxvv9Jf0sVMjpf4QV5VbhemUOSBNWZAfpRpndiadCpoBm2NKK4q6864X/XIMly96BKLvQPY2bGQjXCIkdsbsRUf54yEnuKKikEeGLzb8atwKDBHhPgJgv6/PjjUCbkCo6Cae/jwZyAvrjXrdOCqvYiLcCX+9WRqwdYh395AHhCLw8+y36hbGxBH77T3DPuthIZO7P+wE3cXvTNOXSZgDqcpnErgTfHVDB2SFnUmYEFHLK3zTi6QFIaoqkq3x3R8U2HBqwbShkskRp+1b6aQz2mIi1JvaXY4JkF/hL+bcAly8LzqkKPEuRhKo+hqwSsjyrpdmFjcpBmYVXZN+Yh0Exe5gLwjWP2YbiBC8L5SRl1O9cEC6VUYuKJ7OtfCBH/ckF4XLU1IIrNjv38wzdTghnQEy+RyeEyx2FynJXNAVyGXNZbymUndNFWi5GXLI4aYTXMheE4yo9G6H5pVtFLghXutiUe14vB7MbYtfos+1yun/JdmNzWJ6JcAMhd7on5HPW4JL0kmzUfwQU2/aLXNAAHOn00ULn232cpuKUjtRgpwduBlW77PftkFmJP+cpx7VMycrLEQuyTXg9o2ka4Y5mU6Eqv+pVCdfWkuBeD+mBqfhjuhtSIcL6KoIvga4j6DUS6c3Mvx5Dx6uwmpjTcYOUcK9F55JVpY2VBgU5J+OwZx1kU+uhR+JqaENaA4ifCDpplQxKxHDoieknXaEEyBjrls3rES65M0u+Kdzs1F8//1Uy4iwMjFDQznRg8mtra6DH1tZndoMCZ4poD/VubJTOl4WzWjqiBmYN5rzAi63sz/Og75kQzp6yRc1lNorOsPDGJ/TXMd+9g5jFkfWY8Qtbn/svX95pFTw3REayrXNZ/RQfwXgwIZxNGlXdVRtJirsBGsm+bWE82o3w77ijdan/3vpAR+/3uZwG2ue1VmVLjcJoCeEY4Rq0So2/b+GOj7mJ+CwtRUyUq469Bft4L/npUubIKM8POATsBKv3rOK7/JndcEI4hp96jCfVtXFmK5t0G6FC6irA1llLPRXai6kQNLWnoM1dceMtoqToe0oKj7jdgtgZcMk2IRwji8lW5BUOhm3S3QBdDUx7/F84eg3PHwm5qnXq77o5Fw4X+z9/ToHdHTHY6YYKWPTDQiV280rxf61WdQGzKb5cwM8SLFB+hvAu2Ewwu2GS1NyLTG+fuI9jGddiSDI3ULFWakVDkrKb5ZlkB7X/k32cFi1O5FbpBsEA6Fj6DZRqtAzYiLeHLgePW5KCLkIthk9w3odPNUKdfR3VUMsDdbqygpOfacQRroeIpjVmgaBM8+wmo4IOW8UWx+gb8h7Oe0dauRYuuKYgL40XEXRfgKw3gldTus+6ABUGok7PWqw+B1r8y595iBZ83iaA4bJeo2jSBf6FM14+o45uHPMMcpRDaT+OAmQy4mwU62yc2GjqJSm1exqR7Hb9l9RFwKLtFTcBrFSul1YBZBHfcFXoyhdfucKMVwTbiLoCHnEIX7qjjfVcp1fQw5ZoNG0bLkZ+01KeeL0HYPkqJP2zTMnk/j4IKVjumtJaJVzXO8y9zSyqXpEyOoGEcPYrq3JOPGwNktQV34sEdvfpE8fOEIcTNwGszNt4gun5A3fM3O6CcG3MK0P1DSSEswkXfO1jiotjNkm2gSYilkvcPw+XNgHMVIy3tnTJInu6u6ZWvnKW/6PcW6VB5hDsUhLC2YTzWwORcTzCxSiDvhzcR7a/e8/lE3dwTgLsspjxzqPkAvQhzzTf3QCocO987w5YK/GSEsLZyJY1xnLs8Ge5pAJhIXbUt1pjjrPu+UkAJ9wDPGPw81vWx5JlWg/5iJFWkSw0K2RhwkpNCGcj+1vBKIbqe04U9jwV6wl27XqmheGz3ZMAGyaymaUK66TIzvQYtoZbnEouDGkMS05YXjbeRobgqtLSsmfDpqBq2MZcAwzm7uOqarVTd6uKpPwsL15XHRgx3I3HvDvRCqzEBfTEZQsDNZDO8dzR0Gr9S2s50g4sLtlI56OQUIns2sKONn8bJkGJHxtz0VTSJiMu2ogjMA49HKcg/0VQ8H039MNzvNvPBRrmYyAZf+gWUA0t+Q9j1j0oEJ4nJoSzET6KIyTgKe7UmC2CdrCkvMvFOytnV3yjZd2EM9cpOH/7a0ADxKSEcDbhjhORYvCLOE5BW0MbRdsZW9XHdpxryY4FjxG4KMEFJYSzCRdN0NGzdfw2FLo9JY22FOQw0zKIuJ9jLY015LUIGwGboAnhbMKNCX6/ndQKetKaEB8BX8Tmnti52f+tEXbNhko8JdoNEOCM5h7yvTVeQ0rLNzIaurD1HmOdlu8n2SxguIqmuFWppiM+lgcIzNDJCoQ+IiGc/YKO1KPHEFshGRBkJcx02V+aLKZ9HAM9BcuRZfhgcjc2xpUQnqeUn3WxOn+jz0jnVmjjq4lVggPczDrceQghT/v5zyMVlIw4Nl4aNGbJzOg7WpjZ7PF6Q6juWUNpp1ncsnrYEW4PnrVd2CqjKUmxkIRwDFs1EXe9DHPdlE3ATEhlvu+TQBBxrEh58cR2MHRZhkA5Tme30LkQgmVuL/qu9Qz+p5VBCs5ShKm1YF9Fc2W4gTNAAt1OP4Lp+EOA99juD84YY1Mlc0c6bObPfVw0O1X+f5+T1x6lpfp/o2LLUsaSF/J2chxXN+P7xvwfG6RbvbySr9I9mJktXC4Y5xw0TAs9h705IRwwsDKiPboRin2+6cDwKw4Ow8REBMINdzPt9Em/88P2lwz34nghlyWEAwYWBS3mOaowKj/1YWuVpVP9EEdsYU4EWw4o7FTYGrQvuLKBOtct3vbYkkgsZS02CX19qV7wNF9T+ARQWs/XPYQYfS0VGw4NuOxou4kWFhvCbwi3g31SGbWv+ircRxrUG+kBw3HDcF85cqmlEgq7xsGQq96Wf9LFOWd9BN3SAHAznAb5UbrKJ881XBJvYdBvapcqfX3SSf5ySyMcLlR1k4LxpZJRqWes9BrtPTuXvicqhTD0nuWmM4/u+tTzmg1FO3yYS4M4Qb28WsKdGhjvSvXwUnb7uMGDnU35JDWzF8M41OpPNMLegVZpIBpUaQjs/3JjgF1tXz7HnOQhV+M71xUv9vpwtwJny9ptC2I1vqkhSgp7d4+XeYizHfAqsn0TlOoosmFOf1nFE94N9rzZnacwuBhLuYWSYX9nVfGIkuIQpsKwzGgpqM5oYziP668WiqVwqbu1mJ9M7nJYPfYfj34FKyCq8rol9AerkHHU21+YPaIasOzQua9hQou7jQaYbRxAeC4U/KXpXYZDUJ0rh+2r3yh7s1q6DHLMOnc/tl6ERSIzGiw5TrgVUiwPiLf7Vzj8Sp7Gnwu4R3h+jKmgtN08bfcrcIVRc/Ee2oVmaOEJtwrut1IuMTE9xmm+cSt9i/17NTDV2rvLlfSRBrZ4vmDhPdGzh2/TYuVJw0fIpmUr+sDK9ZSetN1os6/Q3eCjyK6LxsjRr2QQN/S0r7TwrhYTxC6oe1JdLwXHrM8vh/J+j7M2DjX6Sx9jfMvTeRCEVt3+7smcjebJRu61rIilmIgSpS8LlK8Yw6VfFIiVNDeS7Jx9VvOWn/tZTuMcCUpmLPk+3P8fYVRQ0xYXgmbQQqgB+zPUGbETO70b6HsRonS3eGD089A1yiw0P8RIJ8dtV8eKs094iOnZYL/VkWVmK4T9HS9cflZY+vWKhxTxesKvSsk4GeUj3HtGPQtyPhY6xBpa7NKx4Gx7p6tD1RIJWSJ4H/A1M17XCxl6jeYSPkNYpSTHNcO39AtD6aG4P/WWXPJgcCF/SvuG5YyZfrSB01LIJInWdnZ5Q+964DJ+A17olRBNqNSDBMRWiF9O81cqoIRISS3xHZQlKSJlKwKgc/D9N7lyGopV5EcQfc0rJ9u2uL8kJ8vV0tFMzsjjMZEzrYLp9x4lFTJVYJhJCUUdmAbFB55rAV7J5V4w/3wDLN2n8jWHcnq95MZcPclX9svpXeAgmiBxE1C1g7X4r1a+aReVHOHmKCrS/mThYFy2qZKdqfJ6qJEiNLDB17wX6AtfTLEHf6ecodjf/XsiyYDHwE42CNeBxls1tpB3GYjbTJNitKXwQVdASZrsyh1puJ4UrltezhkSika4zjjI2w9/XYSDVa/gw539fBmWun43Ebo7Ssc9rpzC7euqTdOJMpSBU9mPBkPt4V5p7OsC8ToIWgDeBLtlO07YtkP7xnyIJXwP1YjO0xIwW8O9nFAy37mVmo2Adzl/sUSaFrhU9ShYzGtwOb8WfN1N2Ns9Aca+vKESsRzD341+LUlSenyDtfRb902y9ZvaabUa0aFerl4wL39x+nwsYGBa1Hn+tUvWSnxa7DM2FQ9ztKcyMYhGuNy6KHCsbMJZrs22+bMA97ZG5IUzsdVmFlPMJ5q7ArZ2LruXfGN+hKtUUt/7enpQWZnGIFw/x7qAvnAe+6I1ab4gEC6F60F+1yVSWbzMQn2q1zMOF1QfMNWGrYGYK6U4U1+ZIYm0XIvIW+eFEEObKhGuVrN+4tYMTA0t/PiZyijp4Zyh8b5V46sWnQl4XVp0I9voEa8y+LkeckgyxFpFprA5VIzJMMUV2qmsp6vcO09eT2tj4GBDOheJKyw1s16Ftm8XFireTR5/qhx+V5HTPNiwzJHzFWroXmV8RFf9uMunAorjQF3qKJX4I/oLxiBZMctxWjcK+40+0IN+GnR6LY/w5ni693jpt0fIxRtdWM/3fZqUCVhip27Bv90Yk9dC5qAfdsjD4XvDBy+KRnIchjzHSkVMUSwKdoR45pcSjNrEOt9JAWG1WZws5x10uA+fbX1fNxU7DfScMrmWQ4ZHNCTxqSLt7KtGDY4TiDLXIDbUGwYj1QaJMf9S5FIGKppzRPhC9av2Fi8NwcxniuAjp8EoYdrk2weeFuF5llDxVUb4ZnR94D243ZhY/e6CCFNIYRFwqvJ6loUsxOYE3OUlQfzx80AzOH7MWuFDhZtbV2oheOQJgUsO3QFicTHAPnS5IRwjBA3WTLOy6bdQ+R56OZmPa5RJQTAoUKxEx2ReDMMF3F2s4QfYaVVQodEH/H+zY0c9fnerYy3LH1+I4bXQ+iKedtt92NOIMZZeCXlkScRO6vgJgkD/SyB+bHeV8Ma8De5ZO18JlbAzGH474O++XHawGxjVpvexkOJ3Qperznka40292QghD/9LXY592w0CV3dNAHl1tTpxLUhmY62APq+eLnxnyDKbGiXGv+XmkD0D6LNI+cWy8s1fTxfJnXJDF0bq22YSDdqeQQskM0k1ru4Ft9ionrY4GdgpNGGm+6lshsPCaGj82njqO9Snnj1aefkEpZpo45jV3ZTXtXy7cCl/gGQ5dSn2gaEu6AN4EHRsHADW6EbI0P7ZvfF2GkZjNJeCrbN/G0CPQildDGn5H307rifqXRXGTj99khL7Io11hT26YASzGxur6FWaHrhyUIqJGjEt4nhjb9nUgEJHONZWdW9jfsfdFtCr82Ngp0ZYigQUmZ2kzpYytjocTogTqQnRNYF6cYZr9TiYysqP+HrsXs2us6LgSdfqWmBvt0Vg3YbJXLqUEjRVSoBOoDtsmL0FGcotOGTvDlWaJ2J521IH6MR9gbXXx8b0wZiCC0lMfTdW008Ye9McjCxxyaECLgW/6Q0szXaAnTUAP3ZhrcncECg2WhMwQSzzqXKTG7qPwlzVvaP5EbfByKpifWpFkwKwUIN1wiUhm28ZMyGhuCNOX1x3GgZZpe5g/2zE9LceW9BDMdL4BmIDeN/P6TMith3kV843puZPwie4UfqusTkH4sbTSCd1OywQzcbL3BVclE44YN1MKyAwvEiRuDQW1rQJXXBM74nEPKucMXitK8f0G+eQsSnG38vua+i1m/ua4dir2hlt67CNCjLFzvNk/MzOiDM1oxJssTHQTVyFr+IDEPIzu7HQ/sFHqBmqqVIehqGiamPlFTjmOgrT4Ff0NtQYrjTCFWlCH0wwTTGWwupcWxATeZO+FM1g2YIbGAxDZ2Olz1bkZ5oURflb+cGuNdbGIo25nh10V+BWJ3+x2EQtuyMvjlu3wIJiHruKiG2rwIK/Z/DRnqYk3WmfBkyIKsPyuQ0OcqO2S8iaZW8zEK6/cr6drUrYWZt93pbCdmFO/DvhUVeVx2O9lLhcYeCvIRwXTb1Rx8QGjILE5QoD2+IXHJVw88CySVxuMBB8imKoMyrh6qHVNHG5wcCSOMaieROiEo5w8LmOZ0qeWcXAlACujLGi6IRba9Riaiw8SYiAgV0BeogCskcnnK3bPKCoJCktDLwB23FpuDiEezvgSDSNqpMsFgbMB16BCIpDuOrIJtwDq0wSBQyshT69tFwcwhH9BbISicsmBmaku+SLR7hFYM4kLnsYSAVIBoTUEo9wKZocUl6SHAcDiyF4laaLRziif5SUpqA0kRo5W1o7OLv0uIRbnTCbI5MlDHBneju49AhH9ExYe5L0iBiYKVxni5jFA4s74gh8tcVe9sSXAQZsS1VpFhCfcNVQw5a4zDGwFMrsM3DxCUdYWepNbGXQjBLMOsm9/5RW59Mh3OdYWyYuMwxsgg3ojFw6hCMIjddlVGuSeXKARcdI2EmPcHPSOfqL1J7SANodcOcnIgbSI1xDsrKMiF892E5oZsrQpUe4FhpNsBk2pKSyt1cUQsXufnqEG4lLVYlLHwPluCuXoUuPcBlXm2GrCz/78ZGv+Bv6mg7h+hpUsxiqSKI1GGiNa5IZuXQId56r8ySjqks88wWZXSyOT7gqaLBKXOYY6AvFBxm4+IQbDbsUicsGBi6NfYlGqDU+4S4WcifeTDCQ0do8LuH2DVQ5k0k3Si9vJV2UfqfjEu7czD6p6Te0KHOebVRTF9rdeISrynQRG9qe0gLoEUVPnh4l8Qg3WjCFpC8viY2HgfHp3nmNR7hkYRKPLOHQw6APLS0Xh3B9k4VJWjgOylQBczhpuTiESxYmaaE4JNOZAcqyArJGJ1zLhGMSgMf0k7rSWelkjk64UYmOnXQQHCHPxekoB4lOuIsiNCEBSQcDh0CFW2wXlXB9kqOc2LiNmqEc5oJju6iEO1AxGhG7qiSDEQOylWcjmJhQJgYC/K1pdKDpkYCsVtKe0Fx5bJGyy3bhDsBC/H0JS0N1+F5VWJvqStg5LQf/3xsaKUFHGUG1aoODtBrcOvwiDIFNmb4/7O2KFtLMeusKJaUWuv6ugFLsptc8lnO6dqcbQ8xUFwrRNtOT+a1fL/u0bE3nwgJIXV7qg4322qyEfeF+2UdMYZR4JKR51xcg8d7H5Ni1MFCcu1b2opug2D3aW970UNugdeJEWIBLnIWBFtghPpv3Y28x3VFQNkka7eXqCeMnrzsWZ5p+bIkt2EB/gtWp1o2GiQKsqIwOhumF+cJuR0Rg4/t3wV7H5XlsDSHPSMyMTEyAYrLGJ5RXYy3NpVsbx2JHutiPyjlJt/x087XGHul0fP0ae9FdixE/Hb8F+a7KOF8JZxO8DXSvn4pz9/7p0j9Gvl0weTSD/gWjvYn26RhoCwJtTaPoIVyl9Kay7Pq2gFxXF5oYVH6POJGcVbBDdzL2UQeBeZsttw66tKbTLJgJKzhXOISzUduchuDLdxLWn0F2IsPJsBK32KdhA/J1OGgCkT0MlNEg2Cp9BfpW4k+aS2Dh7STqmL3GJCXFx0Bf+j6sjkbjeNbS+3QfHQ2TmInLEwz0gIW3KQEnfTswJf4Yk2sJnJrlCUViNaMr9n1P4SRZnDw3YoHPDjqL0BXa4iSMBB3BdzkVUlPNYZ91OkbayrAMSXo+YaAywzVnPvXF0Jb/B6ZUo4gno+qJAAAAAElFTkSuQmCC'); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(var(--gold-rgb), .45) 52%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 150% 0; mix-blend-mode: soft-light; } .is-ready .hero-logo-shine { animation: logoShine 5.5s var(--ease-in-out) 2.6s infinite, floatT 7s var(--ease-in-out) 2.4s infinite; } .fz-emblem-unused { display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .3s ease-out; } .price { font-family: var(--display); font-size: 1.6rem; color: var(--gold); letter-spacing: .02em; line-height: 1; display: inline-flex; align-items: baseline; gap: .15rem; font-variant-numeric: tabular-nums; } .price small { font-size: .5em; color: var(--gold-dark); letter-spacing: .08em; margin-right: .1rem; display: inline; } .price sup { font-size: .5em; vertical-align: .6em; line-height: 0; } /* CTA assinatura (DS · .btn-agendar): chanfro, aro cônico, reflexo e tesoura que corta */ .btn-agendar { --bh: 50px; --chamfer-poly: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); color: var(--white); padding: 0 1.6rem; filter: drop-shadow(0 12px 22px rgba(var(--loden-rgb), .45)); } .btn-agendar::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--chamfer-poly); background: conic-gradient(from var(--fz-angle), var(--gold-dark), var(--gold-light), var(--loden-bright), var(--gold), var(--gold-dark)); animation: borderSpin 4s linear infinite; } .btn-agendar::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: var(--chamfer-poly); background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 55%) no-repeat, var(--grad-loden); background-size: 250% 100%, 100% 100%; background-position: 130% 0, 0 0; transition: background-position 1s var(--ease-out-expo); } .btn-agendar:hover { transform: translateY(-2px); filter: drop-shadow(0 0 24px rgba(var(--loden-rgb), .75)) drop-shadow(0 0 8px rgba(var(--gold-rgb), .4)); } .btn-agendar:hover::after { background-position: -40% 0, 0 0; } .btn-agendar .snip .blade-a, .btn-agendar .snip .blade-b { transform-origin: 12px 11px; } .btn-agendar:hover .snip .blade-a { animation: snipA .9s var(--ease-in-out) infinite; } .btn-agendar:hover .snip .blade-b { animation: snipB .9s var(--ease-in-out) infinite; } .btn-agendar.is-block { width: 100%; } .btn-agendar.is-block .arrow { margin-left: auto; } .btn-agendar.is-lg { --bh: 60px; padding: 0 2rem; font-size: .74rem; } .btn-agendar:hover .arrow { transform: translateX(5px); } .badge--free { --bc: var(--loden-bright); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* hero cabe na primeira tela: título acompanha a altura disponível */ @media (min-width: 1024px) { .hero-title { font-size: max(3.6rem, min(8.25rem, calc((100svh - var(--nav-h)) * .13), 9vw)); } .hero-desc { max-width: 520px; } } @media (min-width: 1024px) and (max-height: 860px) { .hero-meta { margin-bottom: 1.2rem; } .hero-title { margin-bottom: 1.1rem; } .hero-desc { margin-bottom: 1.5rem; font-size: .98rem; line-height: 1.7; } .hero-perks { margin-top: 1.4rem; } .hero-inner { padding-block: .6rem 1.4rem; } } /* ---------- faixa inferior ---------- */ .hero-strip { position: relative; z-index: 2; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--black-rgb), .2), rgba(var(--black-rgb), .7)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .strip-grid::before { content: ''; position: absolute; top: -1px; left: var(--gutter); width: 80px; height: 1px; background: var(--gold); } .strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip-item { padding: 1.1rem .9rem; display: grid; gap: .3rem; align-content: start; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .strip-item:first-child { grid-column: 1 / -1; border-top: 0; border-left: 0; padding-left: 0; } .strip-item:nth-child(2) { border-left: 0; padding-left: 0; } .strip-label { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gray); display: inline-flex; align-items: center; gap: .45rem; } .strip-label .fz-ico { color: var(--gold); font-size: .9rem; } .strip-value { font-family: var(--display); font-size: 1.85rem; line-height: 1; color: var(--gold); letter-spacing: .02em; display: flex; align-items: baseline; gap: .2rem; font-variant-numeric: tabular-nums; } .strip-value small { font-size: .5em; color: var(--gold-light); } .strip-value .star { font-size: .55em; color: var(--gold-light); align-self: center; } .strip-hours { font-family: var(--mono); font-size: .78rem; line-height: 1.55; color: var(--white-dim); } .strip-hours span { color: var(--gray); } /* ---------- tablet ---------- */ @media (min-width: 640px) { .hero-actions .btn-agendar { width: auto; } .hero-actions .btn-agendar .arrow { margin-left: 0; } .hero-actions { flex-direction: row; align-items: center; width: auto; gap: 1.2rem 2rem; flex-wrap: wrap; } .hero-actions .btn-outline { align-self: center; } .emblem-wrap { width: 460px; } .strip-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .strip-item, .strip-item:nth-child(2) { padding: 1.4rem; border-top: 0; border-left: 1px solid var(--line); } .strip-item:first-child { grid-column: auto; padding-left: 0; border-left: 0; } } /* ---------- desktop ---------- */ @media (min-width: 1024px) { .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-block: 1rem 2.2rem; } .hero-visual { align-self: center; justify-self: center; } .strip-item, .strip-item:nth-child(2) { padding-block: 1.1rem; } .hero-image { left: 30%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); } .hero-image::after { background: linear-gradient(to right, rgba(var(--black-rgb), .45) 0%, rgba(var(--black-rgb), .2) 55%, rgba(var(--black-rgb), .55) 100%), linear-gradient(to top, var(--black) 0%, transparent 32%), linear-gradient(to bottom, rgba(var(--black-rgb), .65) 0%, transparent 25%); } .emblem-wrap { width: clamp(400px, calc(100svh - var(--nav-h) - 200px), 580px); max-width: 100%; } .hero-desc { font-size: 1.05rem; } } @media (min-width: 1440px) { .hero-inner { gap: 5rem; } } /* ===================================================================== 7. SERVIÇOS (cardápio real do AppBarber) ===================================================================== */ .services { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: 1.6rem 0 var(--section-y); background: linear-gradient(180deg, var(--black) 0%, var(--black-light) 55%, var(--black) 100%); } .services-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 85% 35%, rgba(var(--loden-rgb), .12), transparent 70%), radial-gradient(50% 35% at 5% 80%, rgba(var(--gold-rgb), .06), transparent 70%); } /* fitas (DS · .marquee-section.is-tape / Spectra scroll-left/right) */ .marquee-section { position: relative; overflow: hidden; padding: .95rem 0; } .marquee-section.is-tape { z-index: 2; background: var(--gold); transform: rotate(-1.4deg) scale(1.04); box-shadow: 0 20px 40px -20px rgba(0,0,0,.85); } .marquee-section.is-tape .marquee-item span { color: var(--black); } .marquee-section.is-tape .marquee-item .dot { background: var(--black); } .marquee-section.is-tape .marquee-item .fz-ico { color: var(--black); } .marquee-section.is-tape-2 { z-index: 1; margin-top: -.5rem; background: var(--black-medium); border-block: 1px solid var(--line); transform: rotate(1deg) scale(1.04); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; width: max-content; } .marquee-item { display: flex; align-items: center; gap: 2rem; padding: 0 2rem; white-space: nowrap; } .marquee-item span { font-family: var(--display); font-size: clamp(1.05rem, 1.1vw + .6rem, 1.5rem); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-light); } .marquee-item span.stroke { -webkit-text-stroke: 1px var(--gold); color: transparent; } .marquee-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } .marquee-item .fz-ico { font-size: 1.2rem; color: var(--gold); } .animate-scroll-left { animation: scroll-left 40s linear infinite; } .animate-scroll-right { animation: scroll-right 45s linear infinite; } /* cabeçalho de seção (DS · .section-tag / .section-title) */ .section-head { display: grid; gap: 1.2rem; margin: clamp(3.5rem, 7vw, 6rem) 0 2.6rem; } @media (min-width: 900px) { .section-head { grid-template-columns: 1fr minmax(0, 440px); align-items: end; gap: 3rem; } } .section-tag { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } .section-tag-line { width: 30px; height: 1px; background: var(--gold); } .section-tag-text { font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); } .section-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 4.5vw + 1rem, 5rem); line-height: 1; letter-spacing: .03em; } .section-title .italic { font-family: var(--serif); font-style: italic; color: var(--gold); letter-spacing: 0; font-size: .82em; } .section-lead { max-width: 460px; font-size: 1rem; line-height: 1.8; color: var(--gray-light); } /* filtros do cardápio */ .menu-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1.4rem; } .menu-count { font-family: var(--mono); font-size: .72rem; color: var(--gray-light); } .price-tabs { display: flex; gap: .4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; } .price-tabs::-webkit-scrollbar { display: none; } .price-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.05rem; border-radius: var(--r-pill); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-light); box-shadow: inset 0 0 0 1px var(--line-strong); transition: all .35s var(--ease-out-expo); } .price-tab b { font-family: var(--mono); font-weight: 400; font-size: .62rem; letter-spacing: 0; opacity: .7; } .price-tab:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .5); } .price-tab.is-active { color: var(--black); background: var(--gold); box-shadow: 0 8px 20px -10px rgba(var(--gold-rgb), .9); } /* cardápio em cards (DS · .service-card) */ .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 720px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } } @media (min-width: 1100px) { .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .menu-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .8rem; margin: 1.6rem 0 .2rem; font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: .1em; color: var(--white); } .menu-group:first-child { margin-top: 0; } .menu-group b { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: 0; color: var(--gold); } .menu-group::after { content: ''; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, var(--line-strong), transparent); } .service-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 170px; padding: 1rem .95rem .95rem; border-radius: var(--r-md); background: var(--black); box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--ease-out-expo), background .5s ease, box-shadow .4s ease; } .service-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--gold-rgb), .13), transparent 60%), linear-gradient(135deg, rgba(var(--gold-rgb), .06), transparent 50%); } .service-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad-feather); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out-expo); } .service-card:hover { transform: translateY(-5px); background: var(--black-light); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 40px -26px rgba(0, 0, 0, .9); } .service-card:hover::before { opacity: 1; } .service-card:hover::after { transform: scaleX(1); } .service-top { display: flex; align-items: center; margin-bottom: .9rem; padding-right: 1.6rem; } .service-icons { display: flex; } .si { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: var(--gold); background: var(--black-medium); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3), 0 0 0 3px var(--black); transition: margin .45s var(--ease-out-expo), transform .5s var(--ease-spring), box-shadow .5s ease; } .si + .si { margin-left: -9px; } .service-card:hover .si { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55), 0 0 0 3px var(--black-light); } .service-card:hover .si + .si { margin-left: 3px; } .service-card:hover .si:first-child { transform: rotate(-10deg) scale(1.08); } .service-name { font-family: var(--display); font-weight: 400; font-size: 1.12rem; letter-spacing: .05em; line-height: 1.12; color: var(--white); } .service-desc { display: none; margin-top: .45rem; font-size: .8rem; line-height: 1.6; color: var(--gray); } .service-price-row { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: auto; padding-top: .9rem; } .service-card .price { font-size: 1.5rem; } .service-duration { display: inline-flex; align-items: center; gap: .35rem; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-light); } .service-duration .fz-ico { font-size: .9rem; color: var(--gold); } .service-arrow { position: absolute; top: 1.05rem; right: 1rem; font-size: 1.1rem; color: var(--gold); opacity: .55; transition: opacity .4s ease, transform .4s var(--ease-out-expo); } .service-card:hover .service-arrow, .service-card:focus-visible .service-arrow { opacity: 1; transform: translate(2px, -2px); } @media (min-width: 720px) { .service-card { min-height: 220px; padding: 1.4rem 1.3rem 1.2rem; } .service-top { margin-bottom: 1.2rem; } .si { width: 36px; height: 36px; font-size: 1.05rem; } .service-name { font-size: 1.4rem; letter-spacing: .06em; } .service-desc { display: block; } .service-price-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); } .service-name + .service-price-row, .service-desc + .service-price-row { margin-top: auto; } .service-card .price { font-size: 1.8rem; } .service-duration { font-size: .64rem; letter-spacing: .15em; } .service-arrow { top: 1.4rem; right: 1.3rem; font-size: 1.2rem; } } /* espaço mínimo entre nome e preço quando o card estica */ .service-name { margin-bottom: .2rem; } /* convite para os combos (preenche a vaga dos grupos de 3 na grade de 4) */ .menu-promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-height: 170px; padding: 1rem .95rem; border-radius: var(--r-md); text-align: left; cursor: pointer; background: radial-gradient(120% 90% at 100% 0%, rgba(var(--loden-rgb), .2), transparent 65%), rgba(var(--white-rgb), .015); border: 1px dashed rgba(var(--gold-rgb), .38); transition: transform .5s var(--ease-out-expo), border-color .3s ease, background .5s ease; } .menu-promo:hover { transform: translateY(-5px); border-color: var(--gold); border-style: solid; } .mp-kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .mp-title { font-family: var(--display); font-size: 1.12rem; letter-spacing: .05em; line-height: 1.12; color: var(--white); } .mp-note { font-size: .74rem; line-height: 1.5; color: var(--gray-light); } .mp-note b { font-weight: 600; color: var(--gold-light); white-space: nowrap; } .mp-link { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--loden-bright); } .mp-link .fz-ico { transition: transform .4s var(--ease-out-expo); } .menu-promo:hover .mp-link .fz-ico { transform: translateX(4px); } @media (min-width: 720px) { .menu-promo { min-height: 220px; padding: 1.4rem 1.3rem 1.2rem; gap: .7rem; } .mp-title { font-size: 1.4rem; } .mp-note { font-size: .82rem; } } /* com 3 colunas os grupos de 3 já fecham a linha */ @media (min-width: 720px) and (max-width: 1099px) { .menu-promo { display: none; } } /* entrada em cascata: ao aparecer na tela e a cada troca de filtro */ .js .menu-grid > * { opacity: 0; } .menu-grid.is-in > * { opacity: 1; animation: cardRise .7s var(--ease-out-expo) backwards; animation-delay: calc(min(var(--i, 0), 14) * 45ms); } /* formas de pagamento e comodidades (mesmo estilo de card) */ .services-extra { display: grid; gap: 2.4rem; margin-top: clamp(3rem, 6vw, 4.5rem); } @media (min-width: 1100px) { .services-extra { grid-template-columns: 4fr 3fr; gap: 2rem; } } .extra-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; } .extra-title { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: .1em; } .extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .extra-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 720px) { .extra-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .extra-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .extra-card { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: start; align-content: space-between; gap: 1.1rem; min-height: 120px; padding: 1.1rem 1rem 1rem; border-radius: var(--r-md); background: var(--black); box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--ease-out-expo), background .5s ease, box-shadow .4s ease; } .extra-card::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--grad-feather); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out-expo); } .extra-card:hover { transform: translateY(-4px); background: var(--black-light); box-shadow: inset 0 0 0 1px var(--line-strong); } .extra-card:hover::after { transform: scaleX(1); } .extra-index { position: absolute; top: 1rem; right: 1rem; font-family: var(--mono); font-size: .62rem; color: var(--gray); } .extra-icon { font-size: 1.7rem; color: var(--gold); transition: transform .5s var(--ease-spring); } .extra-card:hover .extra-icon { transform: rotate(-10deg) scale(1.1); } .extra-name { font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--white-dim); } /* surgimento ao rolar (DS · .reveal → .visible) */ .js .reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); } .js .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; } /* ===================================================================== 8. EQUIPE (DS · .team-card) ===================================================================== */ .team { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0; background: var(--black-light); } .team > .pole-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px; opacity: .85; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; } .team-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .team-bg .bg-wood { opacity: .6; } .team-watermark { position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font-family: var(--gothic); font-weight: 700; font-size: 24vw; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), .08); } .team .section-head { margin-top: 0; } /* celular: carrossel com encaixe · desktop: 5 colunas */ .team-grid { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 14px; scroll-padding-inline: var(--gutter); } .team-grid::-webkit-scrollbar { display: none; } .team-card { flex: 0 0 72%; scroll-snap-align: start; } @media (min-width: 640px) { .team-card { flex-basis: 42%; } } @media (min-width: 1024px) { .team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; overflow: visible; margin-inline: 0; padding: 0; } } .team-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-md); background: var(--black); box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--ease-out-expo), box-shadow .4s ease; } .team-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 50px -30px rgba(0, 0, 0, .95); } .team-card-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black-medium); } .team-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(.85) contrast(1.05) brightness(.9); transition: filter .7s var(--ease-out-expo), scale .9s var(--ease-out-expo); } .team-card:hover .team-card-img img, .team-card:focus-within .team-card-img img { filter: grayscale(0) contrast(1.04) brightness(1); scale: 1.06; } .team-card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(var(--black-rgb), .92) 0%, rgba(var(--black-rgb), .25) 38%, transparent 60%), linear-gradient(to bottom, rgba(var(--black-rgb), .45), transparent 22%); } .team-card-img .monogram { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(rgba(var(--black-rgb), .45), rgba(var(--black-rgb), .78)), var(--tx-wood), var(--wood-900); background-size: auto, 600px 400px, auto; } .monogram span { font-family: var(--gothic); font-weight: 700; font-size: clamp(5rem, 8vw, 7rem); line-height: 1; color: rgba(var(--gold-rgb), .62); text-shadow: 0 3px 0 rgba(0, 0, 0, .55); transition: transform .7s var(--ease-spring), color .5s ease; } .team-card:hover .monogram span { transform: scale(1.08) rotate(-4deg); color: var(--gold-light); } .monogram small { position: absolute; top: 75%; font-size: .54rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gray-light); } .team-index { position: absolute; top: .9rem; left: 1rem; z-index: 2; font-family: var(--mono); font-size: .66rem; color: var(--white-dim); } .team-card-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid transparent; transition: inset .55s var(--ease-out-expo), border-color .5s ease; } .team-card:hover .team-card-frame { inset: 10px; border-color: rgba(var(--gold-rgb), .55); } .team-card-info { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem .5rem; } .team-card-name { font-family: var(--display); font-weight: 400; font-size: 1.65rem; letter-spacing: .08em; line-height: 1; } .team-card-role { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .team-card-role .fz-ico { font-size: .9rem; color: var(--gold-light); } /* Head Barber: contorno dourado, brilho suave e moldura sempre visível */ .team-card.is-lead { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55), 0 0 0 1px rgba(var(--gold-rgb), .12), 0 24px 50px -30px rgba(var(--gold-rgb), .45); } .team-card.is-lead:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 1px rgba(var(--gold-rgb), .2), 0 30px 60px -28px rgba(var(--gold-rgb), .55); } .team-card.is-lead .team-card-frame { inset: 10px; border-color: rgba(var(--gold-rgb), .35); } .team-card.is-lead:hover .team-card-frame { border-color: rgba(var(--gold-rgb), .7); } .team-card.is-lead .team-card-role { color: var(--gold-light); font-weight: 600; } .team-ig { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; color: var(--gray-light); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .3s ease, box-shadow .3s ease, transform .4s var(--ease-out-expo); } .team-ig:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-2px); } .team-book { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: auto 1.1rem 1.1rem; padding-top: .85rem; border-top: 1px dashed var(--line-strong); font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--loden-bright); transition: color .3s ease; } .team-book .fz-ico { font-size: 1rem; transition: transform .4s var(--ease-out-expo); } .team-book:hover { color: var(--white); } .team-book:hover .fz-ico, .team-card:hover .team-book .fz-ico { transform: translateX(4px); } /* entrada em cascata */ .js .team-grid > .team-card { opacity: 0; } .team-grid.is-in > .team-card { opacity: 1; animation: cardRise .8s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 90ms); } /* sem preferência */ .team-any { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md); background: rgba(var(--black-rgb), .55); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .team-any-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; color: var(--gold); background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); } .team-any p { flex: 1; min-width: 220px; font-size: .9rem; line-height: 1.6; color: var(--gray-light); } .team-any p b { color: var(--white-dim); font-weight: 500; } /* ===================================================================== 9. GALERIA ===================================================================== */ .gallery { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0; background: radial-gradient(70% 45% at 12% 18%, rgba(var(--loden-rgb), .12), transparent 70%), radial-gradient(60% 40% at 92% 88%, rgba(var(--gold-rgb), .06), transparent 70%), var(--black); } .gallery-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .gallery .section-head { margin-top: 0; } /* fotos: 2 colunas no celular, 4 no desktop */ .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } @media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; } } .gallery-card { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; cursor: zoom-in; border-radius: var(--r-md); background: var(--black-medium); box-shadow: inset 0 0 0 1px var(--line); } @media (min-width: 900px) { .gallery-card { aspect-ratio: 1; } } .gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) sepia(.12) brightness(.85); transition: filter .7s var(--ease-out-expo), scale .9s var(--ease-out-expo); } .gallery-card:hover img, .gallery-card:focus-visible img { filter: grayscale(0) sepia(0) brightness(1); scale: 1.07; } .gallery-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(var(--black-rgb), .88) 0%, rgba(var(--black-rgb), .1) 50%, transparent 70%); transition: opacity .5s ease; } .gallery-index { position: absolute; top: .8rem; left: .9rem; z-index: 2; font-family: var(--mono); font-size: .64rem; color: var(--white-dim); } .gallery-zoom { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; color: var(--gold); background: rgba(var(--black-rgb), .65); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); transform: scale(.6); opacity: 0; transition: transform .5s var(--ease-spring), opacity .3s ease; } .gallery-card:hover .gallery-zoom, .gallery-card:focus-visible .gallery-zoom { transform: none; opacity: 1; } .gallery-caption { position: absolute; left: .9rem; right: .9rem; bottom: .85rem; z-index: 2; display: grid; gap: .2rem; text-align: left; transform: translateY(6px); transition: transform .5s var(--ease-out-expo); } .gallery-card:hover .gallery-caption { transform: none; } .gallery-tag { font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .gallery-title { font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; line-height: 1.1; color: var(--white); } @media (min-width: 900px) { .gallery-title { font-size: 1.2rem; } } .gallery-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid transparent; border-radius: inherit; transition: inset .55s var(--ease-out-expo), border-color .5s ease; } .gallery-card:hover .gallery-frame, .gallery-card:focus-visible .gallery-frame { inset: 8px; border-color: rgba(var(--gold-rgb), .55); } .gallery-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* entrada: "corte de navalha" (DS · .reveal-cut) — recorte da esquerda com fio dourado */ .gallery-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 4; pointer-events: none; background: var(--gold-light); box-shadow: 0 0 18px 2px rgba(var(--gold-rgb), .9); opacity: 0; } .js .gallery-grid > .gallery-card { clip-path: inset(0 100% 0 0); } .gallery-grid.is-in > .gallery-card { clip-path: inset(0 0 0 0); animation: cutReveal 1.1s var(--ease-in-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); } .gallery-grid.is-in > .gallery-card::before { animation: cutLine 1.1s var(--ease-in-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); } /* antes & depois */ .ba-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: clamp(3rem, 6vw, 4.5rem) 0 1.1rem; } .ba-title { font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: .1em; line-height: 1; } .ba-title .italic { font-family: var(--serif); font-style: italic; color: var(--gold); letter-spacing: 0; } .ba-hint { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .7rem; color: var(--gray-light); } .ba-hint .fz-ico { color: var(--gold); } .ba-grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .ba-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } } @media (min-width: 640px) and (max-width: 899px) { .ba-card .ba-caption { flex-direction: column; align-items: flex-start; gap: .4rem; } } .ba-card { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--black-medium); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); } .js .ba-card { opacity: 0; transform: translateY(30px); } .ba-card.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 120ms); } .ba-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .ba-after { filter: saturate(.95) contrast(1.05); } .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .ba-before, .ba-after { object-position: var(--obj, 50% 50%); } .ba-card.is-simulated .ba-before { filter: grayscale(1) blur(2px) brightness(.6) contrast(.85); } .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 3; width: 2px; margin-left: -1px; pointer-events: none; background: var(--gold-light); box-shadow: 0 0 18px rgba(var(--gold-rgb), .85); } .ba-knob { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; color: var(--gold); background: rgba(var(--black-rgb), .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 24px rgba(0, 0, 0, .6); transition: transform .45s var(--ease-spring); } .ba-knob::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-light); animation: pulseRing 2.2s var(--ease-out-quart) infinite; } .ba-card.is-touched .ba-knob::after { animation: none; opacity: 0; } .ba-stage:hover .ba-knob { transform: translate(-50%, -50%) scale(1.08); } .ba-stage:has(.ba-range:focus-visible) .ba-knob { outline: 2px solid var(--gold); outline-offset: 4px; } .ba-label { position: absolute; top: 1rem; z-index: 2; padding: .4rem .75rem; border-radius: var(--r-pill); font-size: .56rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; pointer-events: none; } .ba-label.is-before { left: 1rem; color: var(--white-dim); background: rgba(var(--black-rgb), .72); box-shadow: inset 0 0 0 1px var(--line-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ba-label.is-after { right: 1rem; color: var(--black); background: var(--grad-feather); background-size: 200% 100%; animation: featherFlow 5s linear infinite; } .ba-sim { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; padding: .3rem .55rem; border-radius: var(--r-sm); font-family: var(--mono); font-size: .58rem; color: var(--gray-light); background: rgba(var(--black-rgb), .7); border: 1px dashed var(--line-strong); pointer-events: none; } .ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; } .ba-caption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); } .ba-service { display: block; margin-bottom: .3rem; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .ba-name { font-family: var(--display); font-size: 1.35rem; letter-spacing: .06em; line-height: 1.05; } .ba-book { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--loden-bright); transition: color .3s ease; } .ba-book .fz-ico { font-size: 1rem; transition: transform .4s var(--ease-out-expo); } .ba-book:hover { color: var(--white); } .ba-book:hover .fz-ico { transform: translateX(4px); } .gallery-more { display: flex; justify-content: center; margin-top: 2.4rem; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 4.5rem 1rem; visibility: hidden; pointer-events: none; } .lightbox.is-open { visibility: visible; pointer-events: auto; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(var(--black-rgb), .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; } .lightbox.is-open .lightbox-backdrop { opacity: 1; } .lightbox-figure { position: relative; margin: 0; display: grid; justify-items: center; gap: .9rem; max-width: min(1100px, 100%); opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); } .lightbox.is-open .lightbox-figure { opacity: 1; transform: none; } .lightbox-figure img { max-width: 100%; max-height: 74svh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line-strong), 0 40px 80px -20px rgba(0, 0, 0, .9); touch-action: pan-y; } .lightbox-figure img.is-shown { animation: fadeIn .45s ease; } .lightbox-figure figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .4rem 1rem; text-align: center; } .lb-tag { font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .lb-title { font-family: var(--display); font-size: 1.4rem; letter-spacing: .08em; } .lb-count { font-family: var(--mono); font-size: .7rem; color: var(--gray); } .lightbox-btn { position: fixed; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; color: var(--white); background: rgba(var(--black-rgb), .7); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .3s ease, box-shadow .3s ease, transform .4s var(--ease-out-expo); } .lightbox-btn:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } .lb-close { top: 1rem; right: 1rem; } .lb-close:hover { transform: rotate(90deg); } .lb-prev, .lb-next { bottom: 1.2rem; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } @media (min-width: 900px) { .lb-prev, .lb-next { bottom: auto; top: 50%; translate: 0 -50%; } .lb-prev { left: 1.5rem; } .lb-next { right: 1.5rem; } } /* ===================================================================== 10. PRODUTOS · prateleira ===================================================================== */ .products { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0; background: radial-gradient(70% 55% at 50% 42%, rgba(var(--loden-rgb), .2), transparent 72%), linear-gradient(180deg, #0c110d 0%, var(--black) 100%); } .products-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .products .section-head { margin-top: 0; } /* filtros, ordenação e setas */ .shelf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: .6rem; } .shelf-tools { display: flex; align-items: center; gap: .8rem; } .shelf-sort { display: inline-flex; align-items: center; gap: .2rem; padding: 4px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); } .shelf-sort-label { margin: 0 .45rem 0 .6rem; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gray); } .shelf-sort button { padding: .45rem .85rem; border-radius: var(--r-pill); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-light); transition: background .3s ease, color .3s ease; } .shelf-sort button:hover { color: var(--white); } .shelf-sort button.is-active { color: var(--black); background: var(--gold); } .shelf-arrows { display: none; gap: .4rem; } @media (min-width: 640px) { .shelf-arrows { display: flex; } } .shelf-arrow { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; color: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .4s var(--ease-out-expo); } .shelf-arrow:hover:not(:disabled) { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-2px); } .shelf-arrow:disabled { opacity: .28; cursor: default; } /* trilho: sai do container e alinha o 1º item com a coluna do conteúdo */ .shelf { position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); } .shelf-track { --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding: 1.6rem var(--edge) .6rem; scroll-padding-inline: var(--edge); } .shelf-track::-webkit-scrollbar { display: none; } .shelf-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .shelf-track.is-dragging .shelf-item { pointer-events: none; } .shelf-track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .shelf-item { flex: 0 0 clamp(196px, 21vw, 248px); display: flex; flex-direction: column; scroll-snap-align: start; } .si-stage { position: relative; height: 172px; display: flex; align-items: flex-end; justify-content: center; } .si-photo { position: relative; z-index: 1; width: 132px; aspect-ratio: 1; margin-bottom: -1px; overflow: hidden; border-radius: 14px; background: var(--black-medium); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .2), 0 18px 28px -14px rgba(0, 0, 0, .9); transform-origin: 50% 100%; transition: transform .6s var(--ease-spring), box-shadow .5s ease; } @media (min-width: 900px) { .si-stage { height: 186px; } .si-photo { width: 149px; } } .si-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .si-placeholder { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: .3rem; color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(var(--loden-rgb), .35), transparent 70%), var(--tx-wood), var(--wood-900); background-size: auto, 600px 400px, auto; } .si-placeholder .fz-ico { font-size: 3.4rem; stroke-width: 1.1; } .si-placeholder small { font-family: var(--mono); font-size: .62rem; color: var(--gold-light); } .si-shadow { position: absolute; bottom: -3px; left: 50%; width: 112px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent); filter: blur(3px); transition: transform .6s var(--ease-spring), opacity .5s ease; } .shelf-item:hover .si-photo, .shelf-item:focus-within .si-photo { transform: translateY(-14px) rotate(-2deg); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .55), 0 30px 34px -16px rgba(0, 0, 0, .95); } .shelf-item:hover .si-shadow, .shelf-item:focus-within .si-shadow { transform: translateX(-50%) scale(.62); opacity: .5; } /* a tábua: contínua porque os itens não têm espaço entre si */ .si-plank { display: block; height: 16px; position: relative; background: linear-gradient(180deg, rgba(var(--gold-rgb), .55) 0 1px, rgba(255, 255, 255, .08) 1px 3px, transparent 3px), var(--tx-wood), var(--wood-700); background-size: auto, 700px 400px, auto; background-position: 0 0, calc(var(--i, 0) * -230px) 0, 0 0; box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .55), 0 14px 18px -8px rgba(0, 0, 0, .85); } .si-plank::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: linear-gradient(180deg, #120c07, transparent); } /* etiqueta de preço pendurada */ .si-tag { position: relative; flex: 1; display: flex; flex-direction: column; gap: .35rem; margin: 1.15rem .5rem 0; padding: 1rem .9rem .9rem; border-radius: var(--r-md); background: linear-gradient(170deg, rgba(36, 32, 26, .92), rgba(10, 9, 7, .96)); box-shadow: inset 0 0 0 1px var(--line), 0 18px 30px -22px rgba(0, 0, 0, .9); transform-origin: 50% -1.15rem; transition: box-shadow .4s ease; } .shelf-item:hover .si-tag { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .5), 0 18px 30px -18px rgba(var(--gold-rgb), .25); animation: tagSwing 1.2s var(--ease-out-quart); } .si-pin { position: absolute; top: -1.15rem; left: 50%; width: 1px; height: 1.15rem; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold-dark), var(--gold-light)); } .si-pin::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--black-medium); } .si-brand { font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .si-name { min-height: 2.24em; font-family: var(--display); font-weight: 400; font-size: 1.12rem; letter-spacing: .05em; line-height: 1.12; color: var(--white); } .si-meta { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 22px; } .si-effect { padding: .25rem .5rem; border-radius: var(--r-pill); font-size: .52rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--loden-bright); background: rgba(var(--loden-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--loden-rgb), .4); } .si-size { padding: .22rem .5rem; border-radius: var(--r-pill); font-family: var(--mono); font-size: .62rem; color: var(--gray-light); box-shadow: inset 0 0 0 1px var(--line-strong); } .si-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .75rem; border-top: 1px dashed var(--line-strong); } .si-tag .price { font-size: 1.55rem; } .si-buy { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .7rem; border-radius: var(--r-pill); font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #3E8A57, #1F5232); box-shadow: 0 0 0 1px rgba(var(--loden-rgb), .6), 0 8px 18px -10px rgba(62, 190, 105, .7); transition: transform .4s var(--ease-out-expo), box-shadow .3s ease; } .si-buy .fz-ico { font-size: .95rem; } .si-buy:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(160, 255, 190, .55), 0 12px 24px -8px rgba(62, 190, 105, .85); } /* entrada em cascata (e a cada troca de filtro/ordem) */ .js .shelf-track > .shelf-item { opacity: 0; } .shelf-track.is-in > .shelf-item { opacity: 1; animation: shelfIn .8s var(--ease-out-expo) backwards; animation-delay: calc(min(var(--i, 0), 8) * 70ms); } .shelf-progress { position: relative; height: 2px; margin-top: 1.5rem; border-radius: 2px; background: rgba(var(--white-rgb), .08); overflow: hidden; } .shelf-progress span { position: absolute; top: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--loden-bright)); transition: left .15s linear, width .3s ease; } .shelf-help { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; padding: 1.1rem 1.3rem; border-radius: var(--r-md); background: rgba(var(--black-rgb), .55); box-shadow: inset 0 0 0 1px var(--line); } .shelf-help-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; color: var(--gold); background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); } .shelf-help p { flex: 1; min-width: 220px; font-size: .9rem; line-height: 1.6; color: var(--gray-light); } .shelf-help p b { color: var(--white-dim); font-weight: 500; } /* ===================================================================== 11. CLUBE FRITZ ===================================================================== */ .club { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0; background: radial-gradient(60% 45% at 85% 20%, rgba(var(--gold-rgb), .09), transparent 70%), radial-gradient(60% 50% at 10% 70%, rgba(var(--loden-rgb), .14), transparent 70%), var(--black-light); } .club > .pole-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px; opacity: .85; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; } .club-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .club-ghost { position: absolute; right: -10%; top: 6%; width: min(80vw, 720px); aspect-ratio: 1; object-fit: contain; opacity: .05; filter: grayscale(1) brightness(1.4); animation: floatT 12s linear infinite; } .club .section-head { margin-top: 0; } /* planos */ .plans-grid { display: grid; gap: 1.2rem; align-items: stretch; } @media (min-width: 640px) and (max-width: 899px) { .plans-grid { max-width: 560px; margin-inline: auto; } } @media (min-width: 900px) { .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; padding-top: 14px; } } .plan-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 1rem; padding: 1.8rem 1.5rem 1.5rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--black-medium), var(--black)); box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .5s var(--ease-out-expo), box-shadow .4s ease; } .plan-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55), 0 30px 50px -30px rgba(0, 0, 0, .95); } .plan-card.is-featured { background: radial-gradient(120% 70% at 50% 0%, rgba(var(--loden-rgb), .28), transparent 60%), linear-gradient(180deg, #172219, var(--black)); box-shadow: 0 30px 60px -30px rgba(var(--loden-rgb), .6); } .plan-card.is-featured::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--fz-angle), rgba(var(--gold-rgb), .15), var(--gold-light), rgba(var(--loden-rgb), .9), rgba(var(--gold-rgb), .15) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderSpin 6s linear infinite; } @media (min-width: 900px) { .plan-card.is-featured { transform: translateY(-12px); } .plan-card.is-featured:hover { transform: translateY(-18px); } } .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--r-pill); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--black); background: var(--grad-feather); background-size: 200% 100%; animation: featherFlow 5s linear infinite; box-shadow: 0 6px 18px -6px rgba(var(--gold-rgb), .7); } .plan-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .plan-ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; color: var(--gold); background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); } .plan-visits { font-family: var(--mono); font-size: .64rem; color: var(--gray-light); text-align: right; } .plan-name { font-family: var(--display); font-weight: 400; font-size: 2.1rem; letter-spacing: .08em; line-height: 1; } .plan-name small { display: block; margin-top: .4rem; font-family: var(--serif); font-style: italic; font-size: .98rem; letter-spacing: 0; color: var(--gold); } .plan-price { display: flex; align-items: baseline; gap: .45rem; } .plan-price .price { font-size: 3.2rem; } .plan-price .per { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); } .plan-compare { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .78rem; color: var(--gray-light); } .plan-compare s { color: var(--gray); text-decoration-color: var(--st-promo); text-decoration-thickness: 2px; } .plan-compare b { padding: .2rem .55rem; border-radius: var(--r-pill); font-size: .68rem; font-weight: 600; color: var(--loden-bright); background: rgba(var(--loden-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--loden-rgb), .4); } .plan-perks { display: grid; gap: .6rem; padding-top: .3rem; border-top: 1px dashed var(--line-strong); padding-top: 1rem; } .plan-perks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; line-height: 1.5; color: var(--white-dim); } .plan-perks .fz-ico { margin-top: .2rem; color: var(--loden-bright); } .plan-cta { margin-top: auto; } .plan-cta:not(.btn) { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: 0 1.2rem; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55); position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease; } .plan-cta:not(.btn)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out-expo); } .plan-cta:not(.btn):hover { color: var(--black); } .plan-cta:not(.btn):hover::before { transform: scaleY(1); } .plan-cta .arrow { transition: transform .4s var(--ease-out-expo); } .plan-cta:hover .arrow { transform: translateX(4px); } .js .plans-grid > .plan-card { opacity: 0; } .plans-grid.is-in > .plan-card { opacity: 1; animation: shelfIn .8s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 110ms); } /* como funciona */ .club-steps { display: grid; gap: 1.2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); counter-reset: none; } @media (min-width: 768px) { .club-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } .club-steps li { position: relative; display: flex; align-items: flex-start; gap: .9rem; } .club-steps b { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-family: var(--mono); font-size: .8rem; color: var(--gold-light); box-shadow: inset 0 0 0 1px var(--gold); background: var(--black); position: relative; z-index: 1; } .club-steps span { font-size: .82rem; line-height: 1.5; color: var(--gray-light); } .club-steps strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: .06em; color: var(--white); } /* ===================================================================== 12. AVALIAÇÕES · comandas ===================================================================== */ .reviews { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0 calc(var(--section-y) * .8); background: radial-gradient(60% 50% at 80% 30%, rgba(var(--gold-rgb), .08), transparent 70%), var(--black); } .reviews-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .reviews-watermark { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); font-family: var(--gothic); font-weight: 700; font-size: 30vw; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), .07); } .reviews .section-head { margin-top: 0; } .reviews-head .section-lead { margin-top: 1rem; } @media (min-width: 900px) { .reviews-head { grid-template-columns: 1fr auto; } } .rating { display: inline-flex; align-items: center; gap: 1.1rem; justify-self: start; padding: 1.1rem 1.4rem; border-radius: var(--r-lg); background: rgba(var(--black-rgb), .55); box-shadow: inset 0 0 0 1px var(--line-strong); } @media (min-width: 900px) { .rating { justify-self: end; } } .rating-value { font-family: var(--display); font-size: 4.4rem; line-height: .85; letter-spacing: .02em; color: var(--gold-light); font-variant-numeric: tabular-nums; } .rating-side { display: grid; gap: .45rem; } .rating-stars { position: relative; display: inline-flex; font-size: 1.25rem; } .rs-base, .rs-fill { display: flex; gap: 3px; } .rs-base { color: rgba(var(--white-rgb), .12); } .rs-fill { position: absolute; inset: 0; color: var(--gold); clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-out-expo) .2s; } .rating.is-in .rs-fill { clip-path: inset(0 calc(100% - var(--rate, 100%)) 0 0); } .rating-label { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gray-light); } /* esteiras de comandas */ .receipts { display: grid; gap: .6rem; margin-top: 1rem; } .receipts-row { overflow: hidden; padding: 1.4rem 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .receipts-track { display: flex; width: max-content; animation: scroll-left 75s linear infinite; } .receipts-row.is-reverse .receipts-track { animation-name: scroll-right; animation-duration: 85s; } .receipts-row:hover .receipts-track, .receipts-row:focus-within .receipts-track { animation-play-state: paused; } .receipts-set { display: flex; align-items: flex-start; gap: 1.4rem; padding-right: 1.4rem; } @media (prefers-reduced-motion: reduce) { .receipts-row { overflow-x: auto; } .receipts-set[aria-hidden] { display: none; } } .receipt { position: relative; isolation: isolate; flex: 0 0 286px; height: 430px; padding: 1.5rem 1.3rem 1.25rem; display: flex; flex-direction: column; /* todas do mesmo tamanho: o texto longo é cortado com reticências */ font-family: var(--mono); color: #2a221a; transform: rotate(-1.1deg); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .55)); transition: transform .5s var(--ease-out-expo); } .receipts-set .receipt:nth-child(even) { transform: rotate(1deg) translateY(10px); } .receipt::before { /* papel com serrilha em cima e embaixo */ content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 20% 0%, #fbf5e8, #efe5d1 60%, #e6dac2), var(--tx-grain); -webkit-mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 51% repeat-x, radial-gradient(circle at 8px 100%, transparent 5px, #000 5.5px) 0 100% / 16px 51% repeat-x; mask: radial-gradient(circle at 8px 0, transparent 5px, #000 5.5px) 0 0 / 16px 51% repeat-x, radial-gradient(circle at 8px 100%, transparent 5px, #000 5.5px) 0 100% / 16px 51% repeat-x; } .receipts-set .receipt:hover { transform: rotate(0) translateY(-6px); } .rc-head { display: grid; gap: .25rem; padding-bottom: .8rem; text-align: center; border-bottom: 1px dashed rgba(42, 34, 26, .4); } .rc-shop { font-family: var(--display); font-size: 1.45rem; letter-spacing: .16em; line-height: 1; color: #1b1510; } .rc-no { font-size: .6rem; color: #6d5f50; } .rc-line { display: flex; align-items: baseline; gap: .4rem; margin-top: .8rem; font-size: .68rem; line-height: 1.35; } .rc-line span:first-child { max-width: 62%; } .rc-line span:last-child { white-space: nowrap; } .rc-line i { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(42, 34, 26, .45); transform: translateY(-3px); } .rc-line.is-sub { margin-top: .35rem; color: #6d5f50; } .rc-stars { display: flex; gap: 2px; margin-top: .9rem; padding-top: .9rem; font-size: .95rem; color: #b0842f; border-top: 1px dashed rgba(42, 34, 26, .4); } .rc-quote { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; margin: .6rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: #1f1912; } .rc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; } .rc-lines { height: 3.4rem; } .rc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .rc-name { font-family: var(--display); font-size: 1.2rem; letter-spacing: .1em; color: #1b1510; } .rc-name::before { content: '— '; color: #9c7a35; } .rc-stamp { width: 76px; height: 76px; flex-shrink: 0; margin: -14px -8px -10px 0; color: #2f5d3f; opacity: .82; transform: rotate(-14deg); mix-blend-mode: multiply; } .rc-stamp text { font-family: var(--display); fill: currentColor; } .rc-stamp use { opacity: .9; } /* celular: carrossel de deslizar (sem esteira animada) */ .receipts-row.is-swipe { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1.2rem var(--gutter) 1.6rem; scroll-padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; } .receipts-row.is-swipe::-webkit-scrollbar { display: none; } .receipts-row.is-swipe .receipt { flex: 0 0 min(82vw, 300px); scroll-snap-align: start; transform: none; filter: none; } .receipts-row.is-swipe .receipt:nth-child(even) { transform: none; } .receipts-hint { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .2rem; font-family: var(--mono); font-size: .7rem; color: var(--gray-light); } .receipts-hint .fz-ico { color: var(--gold); } /* ===================================================================== 13. CONTATO · placa de fachada ===================================================================== */ .contact { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: var(--section-y) 0; background: var(--black-light); } .contact > .pole-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 3px; opacity: .85; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; } .contact-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .contact-bg .bg-wood { opacity: .45; } .contact-grid { display: grid; gap: 3.5rem; align-items: start; } .contact-main { display: flex; flex-direction: column; min-width: 0; } @media (min-width: 1024px) { /* colunas da mesma altura: o mapa estica até o fim do card de horário */ .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; align-items: stretch; } .contact-main .map-card { flex: 1; height: auto; min-height: 300px; } } .contact-title { font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 6vw + 1rem, 6.6rem); line-height: .92; letter-spacing: .02em; margin: .2rem 0 1.4rem; } .contact-title .title-stroke { position: relative; display: block; width: max-content; max-width: 100%; color: transparent; -webkit-text-stroke: 1.5px var(--white); } .contact-title .title-stroke::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1.5px transparent; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .95) 48%, var(--gold-light) 52%, transparent 62%); background-size: 250% 100%; background-position: 140% 0; -webkit-background-clip: text; background-clip: text; animation: razorGlint 6s var(--ease-in-out) 1s infinite; } .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; margin: 2rem 0 2.4rem; } @media (max-width: 639px) { .contact-actions .btn-whatsapp { width: 100%; justify-content: flex-start; font-size: .68rem; letter-spacing: .14em; } .contact-actions .btn-whatsapp .arrow { margin-left: auto; } } .contact-list { display: grid; gap: .6rem; } @media (min-width: 640px) { .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-list a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: .9rem 1rem; border-radius: var(--r-md); background: rgba(var(--black-rgb), .5); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, transform .4s var(--ease-out-expo); } .contact-list a:hover { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55); transform: translateY(-2px); } .contact-list .fz-ico { width: 38px; height: 38px; padding: 9px; flex-shrink: 0; border-radius: 50%; color: var(--gold); background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .3); } .contact-list span { font-size: .9rem; line-height: 1.35; color: var(--white-dim); min-width: 0; overflow-wrap: anywhere; } .contact-list small { display: block; margin-bottom: .15rem; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gray); } /* placa de madeira pendurada + plaquinha de porta */ .contact-side { display: grid; justify-items: center; gap: 2.4rem; } .signboard { position: relative; width: min(100%, 360px); padding-top: 54px; transform-origin: 50% 0; animation: signSwing 7s var(--ease-in-out) infinite; } .sb-chain { position: absolute; top: 0; width: 3px; height: 58px; background: repeating-linear-gradient(180deg, var(--gold) 0 5px, var(--gold-dark) 5px 7px, transparent 7px 10px); border-radius: 2px; } .sb-chain.is-left { left: 20%; transform: rotate(8deg); transform-origin: top; } .sb-chain.is-right { right: 20%; transform: rotate(-8deg); transform-origin: top; } .sb-chain::before { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--black-light); } .sb-board { position: relative; display: grid; place-items: center; aspect-ratio: 1.2; padding: 1.4rem; border-radius: 14px; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .45)), var(--tx-wood), var(--wood-700); background-size: auto, 700px 400px, auto; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55), inset 0 0 0 7px rgba(0, 0, 0, .35), inset 0 0 0 8px rgba(var(--gold-rgb), .3), 0 40px 60px -30px rgba(0, 0, 0, .95); } .sb-emblem { width: 80%; height: auto; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); } .sb-screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold-dark)); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .sb-screw.is-tl { top: 14px; left: 14px; } .sb-screw.is-tr { top: 14px; right: 14px; } .sb-screw.is-bl { bottom: 14px; left: 14px; } .sb-screw.is-br { bottom: 14px; right: 14px; } .door-sign { position: relative; width: 156px; margin: 0 auto; padding-top: 30px; perspective: 700px; transform-origin: 50% 0; animation: doorSwing 4.6s var(--ease-in-out) infinite; } .ds-string { position: absolute; top: 0; left: 50%; width: 66px; height: 32px; transform: translateX(-50%); border: 1px solid var(--gold-dark); border-bottom: 0; border-radius: 34px 34px 0 0; } .ds-card { position: relative; height: 64px; transform-style: preserve-3d; transition: transform 1.1s var(--ease-spring); } .door-sign.is-closed .ds-card { transform: rotateY(180deg); } .ds-face { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--display); font-size: 1.8rem; letter-spacing: .14em; line-height: 1; } .ds-face small { display: block; margin-bottom: .3rem; font-family: var(--sans); font-size: .5rem; letter-spacing: .26em; text-transform: uppercase; opacity: .85; } .ds-face.is-open { color: #eafff0; background: linear-gradient(160deg, #3E8A57, #1F5232); box-shadow: inset 0 0 0 1px rgba(160, 255, 190, .5), 0 0 30px -6px rgba(62, 190, 105, .7); text-shadow: 0 0 12px rgba(160, 255, 190, .8); } .ds-face.is-closed { color: #f6ddd6; background: linear-gradient(160deg, #6b2a22, #3a1612); box-shadow: inset 0 0 0 1px rgba(var(--closed-rgb), .5), 0 0 30px -10px rgba(var(--closed-rgb), .6); transform: rotateY(180deg); } .hours-card { width: min(100%, 420px); padding: 1.4rem 1.4rem 1rem; border-radius: var(--r-lg); background: rgba(var(--black-rgb), .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-strong); } .hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; } .hours-head h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: .1em; } .hours-table { width: 100%; margin-top: .8rem; border-collapse: collapse; } .hours-table tr { border-bottom: 1px solid var(--line); } .hours-table tr:last-child { border-bottom: 0; } .hours-table td { padding: .7rem .3rem; font-size: .86rem; color: var(--white-dim); } .hours-table td:last-child { text-align: right; font-family: var(--mono); font-size: .8rem; color: var(--gray-light); } .hours-table tr.is-closed td { color: var(--gray); } .hours-table tr.is-closed td:last-child { font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--st-closed); } .hours-table tr.is-today { background: linear-gradient(90deg, rgba(var(--gold-rgb), .12), transparent); } .hours-table tr.is-today td:first-child { color: var(--gold-light); font-weight: 500; } .hours-table em { margin-left: .5rem; padding: .15rem .45rem; border-radius: var(--r-pill); font-style: normal; font-size: .5rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--black); background: var(--gold); vertical-align: 2px; } /* mapa no tom da marca */ .map-card { position: relative; height: clamp(340px, 60vw, 420px); margin-top: 1.2rem; overflow: hidden; border-radius: var(--r-lg); background: #0f0e0b; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); } /* o mapa sobe 160px: o cartão e o botão do próprio Google ficam fora da área visível */ .map-card iframe { position: absolute; top: -160px; left: 0; width: 100%; height: calc(100% + 160px); border: 0; filter: grayscale(1) invert(.92) contrast(.88) sepia(.32) brightness(.92); } .map-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px 10px rgba(var(--black-rgb), .85); border-radius: inherit; } .map-info { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: rgba(var(--black-rgb), .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line-strong); } /* faixa compacta (o endereço completo já está na lista de contatos) */ .map-info { gap: .6rem .8rem; padding: .65rem .7rem .65rem .75rem; } .map-info .map-pin { width: 38px; height: 38px; } .map-info address { min-width: 0; font-size: .74rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .map-info address b { font-size: 1.05rem; } .map-info address br, .map-info address .addr-city { display: none; } .map-actions { flex-wrap: nowrap; } .map-copy { width: 42px; padding: 0; justify-content: center; } .map-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 639px) { .map-info address { flex: 1 1 calc(100% - 50px); } .map-actions { width: 100%; } .map-actions .btn { flex: 1; } } @media (min-width: 640px) { .map-info { flex-wrap: nowrap; } .map-actions { flex-shrink: 0; } } .map-pin { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(var(--gold-rgb), .15); animation: haloBreath 3s var(--ease-in-out) infinite; } .map-pin { overflow: hidden; } .map-pin img { width: 100%; height: 100%; object-fit: cover; } .map-info address { flex: 1; min-width: 180px; font-style: normal; font-size: .84rem; line-height: 1.5; color: var(--white-dim); } .map-info address b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: .1em; color: var(--white); } .map-actions { display: flex; flex-wrap: wrap; gap: .6rem; } .map-copy { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: 0 .95rem; border-radius: var(--r-pill); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-light); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .3s ease, box-shadow .3s ease; } .map-copy:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } .map-copy.is-done { color: var(--loden-bright); box-shadow: inset 0 0 0 1px var(--loden-bright); } .btn.is-sm { --bh: 42px; padding: 0 1.1rem; font-size: .62rem; letter-spacing: .16em; } .btn-primary { overflow: hidden; color: var(--white); background: var(--loden); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .4); } .btn-primary::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--loden-deep); transform: translateX(-101%); transition: transform .45s var(--ease-out-expo); } .btn-primary:hover::before { transform: none; } .btn-primary:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 14px 30px -14px rgba(var(--loden-rgb), .9); } /* ===================================================================== 14. RODAPÉ ===================================================================== */ .footer { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: 4.5rem 0 1.6rem; background: radial-gradient(60% 50% at 50% 100%, rgba(var(--gold-rgb), .08), transparent 70%), var(--black); } .footer > .pole-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .85; background: var(--grad-pole); background-size: 51px 51px; animation: poleSpin 2.4s linear infinite; } .footer-top { display: grid; gap: 2.6rem; } @media (min-width: 768px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .footer-top { grid-template-columns: 1.6fr 1fr 1.25fr 1fr; gap: 3rem; } } .footer-brand .nav-logo { position: static; } .footer-brand p { max-width: 34ch; margin: 1.2rem 0 1.4rem; font-size: .86rem; line-height: 1.8; color: var(--gray); } .footer-socials { display: flex; gap: .6rem; } .footer-social { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; color: var(--gray-light); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .3s ease, box-shadow .3s ease, transform .4s var(--ease-out-expo); } .footer-social:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-3px); } .footer-col h3 { margin-bottom: 1rem; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .16em; color: var(--white); } .footer-col ul { display: grid; gap: .65rem; } .footer-col li { font-size: .86rem; line-height: 1.6; color: var(--gray); } .footer-col a { color: var(--gray); transition: color .3s ease; } .footer-col a:hover { color: var(--gold); } .footer-hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 250px; } .footer-hours b { font-family: var(--mono); font-weight: 400; font-size: .78rem; color: var(--white-dim); } .footer-hours li.is-closed b { color: var(--st-closed); font-family: var(--sans); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; } /* "FRITZ" gigante: o dourado entra conforme a rolagem */ .footer-word { position: relative; margin: 3.5rem 0 1.2rem; font-family: var(--display); font-size: clamp(7rem, 30vw, 26rem); line-height: .78; letter-spacing: .05em; text-align: center; text-transform: uppercase; user-select: none; } .fw-outline { display: block; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), .3); } .fw-fill { position: absolute; inset: 0; display: block; color: transparent; background: var(--grad-feather); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0); animation: featherFlow 8s linear infinite; } /* celular: rodapé em blocos (marca ao lado do texto, links em 2 colunas, contato e horário lado a lado) */ @media (max-width: 767px) { .footer { padding-top: 3.2rem; } .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; } .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "logo text" "logo social"; align-items: center; gap: .3rem 1.1rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .footer-brand .nav-logo { grid-area: logo; align-self: start; } .footer-brand .logo-mark { width: 88px; height: 88px; } .footer-brand p { grid-area: text; margin: 0; max-width: none; font-size: .8rem; line-height: 1.6; } .footer-brand .footer-socials { grid-area: social; margin-top: .5rem; } .footer-social { width: 38px; height: 38px; font-size: 1rem; } .footer-col h3 { margin-bottom: .8rem; font-size: 1rem; } .footer-col li { font-size: .8rem; } .footer-top > nav.footer-col { grid-column: 1 / -1; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .footer-top > nav.footer-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.2rem; } .footer-col ul { gap: .55rem; } .footer-hours li { flex-direction: column; gap: .1rem; } .footer-word { margin-top: 2.4rem; } } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .footer-bottom p { font-size: .74rem; letter-spacing: .06em; color: var(--gray); } .footer-made span { font-family: var(--gothic); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: var(--gold); } .to-top { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 1.15rem; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); transition: color .3s ease, background .3s ease, transform .4s var(--ease-out-expo); } .to-top .fz-ico { transform: rotate(-45deg); } .to-top:hover { color: var(--black); background: var(--gold); transform: translateY(-3px); } @media (max-width: 639px) { .footer-bottom { flex-direction: column; text-align: center; } } /* ===================================================================== AJUSTES DE REVISÃO (toque no celular, cards compactos) ===================================================================== */ /* área de toque mínima de ~40px nos controles pequenos */ .team-book { padding-bottom: .55rem; min-height: 44px; } .ba-book { min-height: 44px; padding-inline: .2rem; } .shelf-sort button { min-height: 36px; } .si-buy { min-height: 38px; } /* pagamento e comodidades no celular: ícone ao lado do nome, sem cortar palavras */ @media (max-width: 559px) { .extra-grid, .extra-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .extra-grid.is-three .extra-card:last-child { grid-column: 1 / -1; } .extra-card { min-height: 0; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .9rem .85rem; } .extra-icon { font-size: 1.35rem; } .extra-index { display: none; } .extra-name { font-size: .82rem; overflow-wrap: anywhere; } } /* ===================================================================== 15. WHATSAPP FLUTUANTE ===================================================================== */ .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, #3E8A57, #1F5232); box-shadow: 0 0 0 1px rgba(160,255,190,.4), 0 12px 30px -6px rgba(62,190,105,.7); transform: translateY(120px); transition: transform .6s var(--ease-spring); } .wa-float.is-shown { transform: none; } .wa-float:not(.is-shown) { pointer-events: none; } .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(160,255,190,.6); animation: pulseRing 2.2s var(--ease-out-quart) infinite; } .wa-float:hover { transform: scale(1.08); } /* ===================================================================== 16. ANIMAÇÕES ===================================================================== */ /* Sequência de entrada: o JS adiciona .is-ready no quando as fontes carregam. Sem JS nada fica escondido (estados iniciais só sob .js). */ .js .nav { opacity: 0; transform: translateY(-14px); } .js .hero-meta, .js .hero-desc, .js .hero-actions, .js .hero-perks, .js .hero-strip { opacity: 0; transform: translateY(28px); } .js .hero-title .line > span { transform: translateY(105%); } .js .hero-image img { opacity: 0; scale: 1.2; } .js .hero-logo { opacity: 0; transform: scale(.7) rotate(-6deg); filter: blur(10px); } .js .hero-watermark { opacity: 0; } .is-ready .nav { animation: fadeDown .9s var(--ease-out-expo) .1s both; } .is-ready .hero-image img { animation: heroImgReveal 1.8s var(--ease-out-expo) .15s both; } .is-ready .hero-logo { animation: logoIn 1.4s var(--ease-spring) .5s both; } .is-ready .hero-meta { animation: fadeUp .9s var(--ease-out-expo) .45s both; } .is-ready .hero-title .line:nth-child(1) > span { animation: lineUp 1.1s var(--ease-out-expo) .55s both; } .is-ready .hero-title .line:nth-child(2) > span { animation: lineUp 1.1s var(--ease-out-expo) .68s both; } .is-ready .hero-title .line:nth-child(3) > span { animation: lineUp 1.1s var(--ease-out-expo) .82s both; } .is-ready .hero-desc { animation: fadeUp .9s var(--ease-out-expo) 1s both; } .is-ready .hero-actions { animation: fadeUp .9s var(--ease-out-expo) 1.12s both; } .is-ready .hero-perks { animation: fadeUp .9s var(--ease-out-expo) 1.24s both; } .is-ready .hero-strip { animation: fadeUp 1s var(--ease-out-expo) 1.4s both; } .is-ready .hero-watermark { animation: fadeIn 2.4s ease .4s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lineUp { from { transform: translateY(105%); } to { transform: translateY(0); } } @keyframes heroImgReveal { from { opacity: 0; scale: 1.2; } to { opacity: 1; scale: 1.05; } } @keyframes emblemDraw { to { stroke-dashoffset: 0; } } @keyframes emTextIn { from { opacity: 0; transform: rotate(var(--r0)); } to { opacity: 1; transform: rotate(0); } } @keyframes medalIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes hatDrop { 0% { opacity: 0; transform: translateY(-34px) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(0); } } @keyframes panelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes checkPop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes cardRise { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes cutReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes cutLine { 0% { left: 0; opacity: 1; } 92% { left: calc(100% - 2px); opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } } @keyframes shelfIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes tagSwing { 0% { transform: rotate(0); } 25% { transform: rotate(1.6deg); } 55% { transform: rotate(-1deg); } 80% { transform: rotate(.4deg); } 100% { transform: rotate(0); } } @keyframes signSwing { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } } @keyframes doorSwing { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } } @keyframes logoIn { from { opacity: 0; transform: scale(.7) rotate(-6deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } } @keyframes logoShine { 0% { background-position: 150% 0; } 40%, 100% { background-position: -50% 0; } } @keyframes floatT { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes razorGlint { 0% { background-position: 140% 0; } 35%, 100% { background-position: -60% 0; } } @keyframes tagLineRun { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(260%); } } @keyframes pulseRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } } @keyframes haloBreath { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes borderSpin { to { --fz-angle: 360deg; } } @keyframes emblemSpin { to { transform: rotate(360deg); } } @keyframes featherShine { 0% { transform: translateX(-60px); } 40%, 100% { transform: translateX(70px); } } @keyframes featherFlow { from { background-position: 0% 0; } to { background-position: 200% 0; } } @keyframes snipA { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(0); } 88% { transform: rotate(10deg); } } @keyframes snipB { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(0); } 88% { transform: rotate(-10deg); } } @keyframes poleSpin { from { background-position: 0 0; } to { background-position: 0 51px; } } @keyframes woodSheen { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } } @keyframes smokeDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, -6%) scale(1.15); } 100% { transform: translate(-6%, 4%) scale(.95); } } @keyframes lineDrop { 0% { top: -90px; } 60%, 100% { top: 100%; } } @keyframes grainShift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; } body::after { animation: none; } }