/* Fontes carregadas via no HTML para alta performance */ :root { --bg-pure-black: #000000; --bg-surface: #09090b; --bg-surface-elevated: #141418; --bg-card: rgba(18, 18, 22, 0.7); --text-primary: #ffffff; --text-secondary: #a1a1aa; --text-muted: #71717a; --border-subtle: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.16); --border-strong: rgba(255, 255, 255, 0.35); /* Curvas Emil Kowalski & Apple */ --ease-apple: cubic-bezier(0.16, 1, 0.3, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--bg-pure-black); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; overflow-x: hidden; selection-background-color: #ffffff; selection-color: #000000; } /* Tipografia Oficial da Marca João Mattos (Didone Serif) */ .font-brand { font-family: 'Bodoni Moda', 'Cinzel', 'Playfair Display', serif; letter-spacing: 0.14em; font-weight: 500; } .brand-subtitle { font-family: 'Inter', -apple-system, sans-serif; letter-spacing: 0.32em; font-weight: 400; } .font-tech { font-family: 'Space Grotesk', monospace, sans-serif; } .heading-display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; } .heading-sub { letter-spacing: -0.015em; line-height: 1.25; } .tracking-label { letter-spacing: 0.18em; text-transform: uppercase; } /* Glassmorphism */ .glass-nav { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border-subtle); } .glass-panel-monochrome { background: rgba(14, 14, 18, 0.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--border-subtle); transition: border-color 200ms var(--ease-apple), transform 200ms var(--ease-apple); } .glass-panel-monochrome:hover { border-color: var(--border-strong); } .text-gradient-white { background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Botões com Feedback Emil Kowalski (:active scale 0.97) */ .btn-white { background: #ffffff; color: #000000; font-weight: 600; border-radius: 9999px; transition: transform 160ms var(--ease-apple), opacity 160ms ease, box-shadow 160ms ease; will-change: transform; } .btn-white:hover { opacity: 0.92; box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); } .btn-white:active { transform: scale(0.97); } .btn-monochrome-outline { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); color: #ffffff; border-radius: 9999px; transition: transform 160ms var(--ease-apple), border-color 160ms ease, background 160ms ease; will-change: transform; } .btn-monochrome-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); } .btn-monochrome-outline:active { transform: scale(0.97); } button:active, .interactive-item:active { transform: scale(0.97); } /* Hero Section Smooth Dissolve */ #heroContent { will-change: transform, opacity, filter; transition: filter 0.1s linear, transform 0.1s linear, opacity 0.1s linear; } /* ======================================================== GSAP PINNED SCROLLYTELLING VIEWPORT & ALL-INTRA VIDEO ======================================================== */ .gsap-pin-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #000000; } .video-scrubber-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; background: #000000; } #inkVideoScrubber { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: contrast(110%) brightness(95%); pointer-events: none; display: block; } .section-entrance-fade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 70%, #000000 100%); pointer-events: none; z-index: 2; } .section-exit-fade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 70%, #000000 100%); pointer-events: none; z-index: 2; opacity: 0; } .video-overlay-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 75%, #000000 98%); pointer-events: none; z-index: 3; } /* Backdrop Diffusion nos Textos */ .slide-text-backdrop { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 80%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.5rem 3rem; border-radius: 36px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9); max-width: 900px; margin: 0 auto; } .text-glow-shadow { text-shadow: 0 4px 24px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 1); } .scrolly-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 4; opacity: 0; pointer-events: none; padding: 2rem; text-align: center; } /* Habilita cliques diretamente nos botões e links dos slides */ .scrolly-slide a, .scrolly-slide button, .slide-text-backdrop a, .slide-text-backdrop button { pointer-events: auto !important; cursor: pointer; position: relative; z-index: 20; } /* Microtextos laterais editoriais (Slide 1) */ .slide-sub-vertical { position: absolute; font-size: 0.65rem; letter-spacing: 0.25em; color: var(--text-muted); text-transform: uppercase; font-family: 'Space Grotesk', monospace; } .slide-sub-vertical.left { left: 2rem; top: 50%; transform: translateY(-50%) rotate(-90deg); } .slide-sub-vertical.right { right: 2rem; top: 50%; transform: translateY(-50%) rotate(90deg); } @media (max-width: 768px) { .slide-sub-vertical { display: none; } .slide-text-backdrop { padding: 1.5rem 1.5rem; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 85%); } } /* ======================================================== CARROSSEL DO ESTÚDIO (ENQUADRAMENTO REBAIXADO / BASE VISÍVEL) ======================================================== */ .studio-carousel-card { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--border-medium); background: #09090b; aspect-ratio: 4 / 3; } .studio-img-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; filter: none !important; transition: opacity 900ms var(--ease-apple), transform 900ms var(--ease-apple); } .studio-img-layer[data-pos="facade"] { object-position: center 85%; } .studio-img-layer[data-pos="procedures"] { object-position: center 65%; } .studio-img-layer[data-pos="lounge"] { object-position: center 75%; } .studio-img-layer[data-pos="private"] { object-position: center 65%; } .studio-img-layer.active { opacity: 1; transform: scale(1); z-index: 1; } .studio-img-layer.hidden-layer { opacity: 0; transform: scale(1.04); z-index: 0; } /* ======================================================== GALERIA DINÂMICA DE 6 CARDS COM ROTAÇÃO CONTÍNUA ======================================================== */ .gallery-dynamic-card { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--border-subtle); background: #08080a; cursor: pointer; aspect-ratio: 4 / 5; transition: border-color 220ms var(--ease-apple), transform 220ms var(--ease-apple); } .gallery-img-container { position: relative; width: 100%; height: 100%; } .gallery-img-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(10%) contrast(108%); transition: opacity 900ms var(--ease-apple), transform 900ms var(--ease-apple); } .gallery-img-layer.active { opacity: 1; transform: scale(1); z-index: 1; } .gallery-img-layer.hidden-layer { opacity: 0; transform: scale(1.05); z-index: 0; } @media (hover: hover) and (pointer: fine) { .gallery-dynamic-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .gallery-dynamic-card:hover .gallery-img-layer.active { transform: scale(1.06); filter: grayscale(0%) contrast(112%); } } /* Configurador */ .config-pill { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-subtle); border-radius: 14px; transition: all 180ms var(--ease-apple); cursor: pointer; } .config-pill:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--border-medium); } .config-pill.selected { background: #ffffff; color: #000000 !important; border-color: #ffffff; } .config-pill.selected * { color: #000000 !important; } .config-pill:active { transform: scale(0.97); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #000000; } ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #52525b; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }