/* ============================================================ NAFH ARQUITETURA — DESIGN SYSTEM COMPLETO Glassmorphism + Utilidades + Animações Design System completo em CSS puro ============================================================ */ /* ---- Google Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ============================================================ 1. CSS VARIABLES — LIGHT MODE ============================================================ */ :root { --radius: 0.75rem; /* Backgrounds */ --background: #F0EDE9; --foreground: #4F565B; /* Cards & Popovers */ --card: #F0EDE9; --card-foreground: #4F565B; --popover: #F0EDE9; --popover-foreground: #4F565B; /* Primary — Terracotta */ --primary: #B27A61; --primary-foreground: #FFFFFF; /* Secondary — Cream */ --secondary: #E1CAC2; --secondary-foreground: #4F565B; /* Muted */ --muted: #F0EDE9; --muted-foreground: #70787D; /* Accent */ --accent: #F0EDE9; --accent-foreground: #4F565B; /* Destructive */ --destructive: #DC2626; /* Borders & Inputs */ --border: #E5E5E5; --input: #E5E5E5; --ring: #B27A61; /* Brand Colors */ --nafh-cream: #E1CAC2; --nafh-cream-light: #F5EAE6; --nafh-cream-dark: #C9B5AD; --nafh-terracotta: #B27A61; --nafh-terracotta-light: #C99A85; --nafh-terracotta-dark: #8B5A42; --nafh-slate: #70787D; --nafh-slate-light: #8A9196; --nafh-slate-dark: #4F565B; --nafh-white: #FFFFFF; } /* ============================================================ 2. CSS VARIABLES — DARK MODE (data-theme attribute based) ============================================================ */ html[data-theme="dark"] { --background: #0F0F0F; --foreground: #F5F5F5; --card: #1A1A1A; --card-foreground: #F5F5F5; --popover: #1A1A1A; --popover-foreground: #F5F5F5; --primary: #C99A85; --primary-foreground: #1A1A1A; --secondary: #C9B5AD; --secondary-foreground: #1A1A1A; --muted: #262626; --muted-foreground: #A3A3A3; --accent: #262626; --accent-foreground: #F5F5F5; --destructive: #EF4444; --border: rgba(255, 255, 255, 0.1); --input: rgba(255, 255, 255, 0.15); --ring: #C99A85; } /* ============================================================ 2b. SMOOTH THEME TRANSITIONS Transições suaves SÓ ocorrem quando a classe .theme-transitioning está presente no (adicionada no clique do botão e removida após 400ms). No carregamento inicial, NENHUMA transição ocorre, evitando flash visual (FOUC). ============================================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease !important; } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); outline-color: var(--ring); } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: "rlig" 1, "calt" 1; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul, ol { list-style: none; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #E1CAC2; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #B27A61; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4F565B; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #70787D; } /* ============================================================ 4. GLASSMORPHISM ============================================================ */ .glass { background: rgba(240, 237, 233, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(240, 237, 233, 0.3); } html[data-theme="dark"] .glass { background: rgba(26, 26, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); } .glass-card { background: rgba(240, 237, 233, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(225, 202, 194, 0.3); box-shadow: 0 8px 32px rgba(178, 122, 97, 0.1); } html[data-theme="dark"] .glass-card { background: rgba(26, 26, 26, 0.8); border: 1px solid rgba(201, 181, 173, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ============================================================ 5. LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } } .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-full { max-width: 100%; } .max-w-lg-mx0 { max-width: 32rem; margin-left: auto; margin-right: 0; } /* Width */ .w-full { width: 100%; } .w-auto { width: auto; } .w-1\.5 { width: 0.375rem; } .w-2 { width: 0.5rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-32 { width: 8rem; } .w-3\/4 { width: 75%; } /* Height */ .h-full { height: 100%; } .h-auto { height: auto; } .h-1 { height: 0.25rem; } .h-1\.5 { height: 0.375rem; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-28 { height: 7rem; } .h-screen { height: 100vh; } .min-h-screen { min-height: 100vh; } /* Min Width */ .min-w-0 { min-width: 0; } /* Display */ .block { display: block; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } /* Responsive lg: breakpoint utilities (≥1024px) — used by header nav */ @media (min-width: 1024px) { .lg\:flex { display: flex !important; } .lg\:block { display: block !important; } .lg\:hidden { display: none !important; } .lg\:inline-flex { display: inline-flex !important; } } /* Flex */ .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0{ flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } /* Align & Justify */ .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between{ justify-content: space-between; } .justify-end { justify-content: flex-end; } /* Gap */ .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5{ gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; } /* Grid Columns */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Position */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-4 { top: 1rem; } .bottom-4 { bottom: 1rem; } .right-4 { right: 1rem; } .left-4 { left: 1rem; } .top-full { top: 100%; } .top-1\/2 { top: 50%; } .left-1\/2{ left: 50%; } .left-4-neg { left: -1rem; } .right-6 { right: 1.5rem; } .bottom-6-neg { bottom: -1.5rem; } .right-6-neg { right: -1.5rem; } .-bottom-6 { bottom: -1.5rem; } .-right-6 { right: -1.5rem; } .z-10 { z-index: 10; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } /* Overflow */ .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } /* Aspect Ratio */ .aspect-video { aspect-ratio: 16/9; } .aspect-43 { aspect-ratio: 4/3; } /* ============================================================ 6. SPACING ============================================================ */ /* Padding */ .p-0 { padding: 0; } .p-2 { padding: 0.5rem; } .p-2\.5{ padding: 0.625rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .pt-2 { padding-top: 0.5rem; } .pt-8 { padding-top: 2rem; } .pt-24 { padding-top: 6rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pb-10 { padding-bottom: 2.5rem; } .pl-2 { padding-left: 0.5rem; } .pl-4 { padding-left: 1rem; } .pr-2 { padding-right: 0.5rem; } /* Margin */ .m-0 { margin: 0; } .mx-auto{ margin-left: auto; margin-right: auto; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-3 { margin-top: 0.75rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-16 { margin-bottom: 4rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .mr-2 { margin-right: 0.5rem; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } /* ============================================================ 7. TYPOGRAPHY ============================================================ */ .font-sans { font-family: 'Inter', sans-serif; } .font-serif { font-family: 'Playfair Display', Georgia, serif; } .font-mono { font-family: ui-monospace, monospace; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; } .tracking-tight { letter-spacing: -0.025em; } .tracking-normal { letter-spacing: 0; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .italic { font-style: italic; } .not-italic { font-style: normal; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .underline-offset-4 { text-underline-offset: 4px; } .capitalize { text-transform: capitalize; } /* ============================================================ 8. COLORS ============================================================ */ /* Text */ .text-primary { color: var(--primary); } .text-primary-foreground { color: var(--primary-foreground); } .text-foreground { color: var(--foreground); } .text-muted-foreground { color: var(--muted-foreground); } .text-card-foreground { color: var(--card-foreground); } .text-secondary-foreground { color: var(--secondary-foreground); } .text-destructive { color: var(--destructive); } .text-white { color: #FFFFFF; } .text-nafh-terracotta { color: var(--nafh-terracotta); } .text-nafh-cream { color: var(--nafh-cream); } /* Specific hex colors from original */ .text-brand-terracotta { color: #B27A61; } /* Background */ .bg-background { background-color: var(--background); } .bg-foreground { background-color: var(--foreground); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-muted { background-color: var(--muted); } .bg-card { background-color: var(--card); } .bg-accent { background-color: var(--accent); } .bg-border { background-color: var(--border); } .bg-white { background-color: #FFFFFF; } .bg-transparent { background-color: transparent; } .bg-nafh-cream { background-color: var(--nafh-cream); } .bg-footer { background-color: #E1CAC2; } /* Alpha colors */ .bg-primary-10 { background-color: rgba(178, 122, 97, 0.1); } .bg-primary-5 { background-color: rgba(178, 122, 97, 0.05); } .bg-primary-20 { background-color: rgba(178, 122, 97, 0.2); } .bg-primary-30 { background-color: rgba(178, 122, 97, 0.3); } .bg-primary-90 { background-color: rgba(178, 122, 97, 0.9); } .bg-white-10 { background-color: rgba(255, 255, 255, 0.1); } .bg-white-20 { background-color: rgba(255, 255, 255, 0.2); } .bg-white-90 { background-color: rgba(255, 255, 255, 0.9); } .bg-black-50 { background-color: rgba(0, 0, 0, 0.5); } /* Green for WhatsApp */ .bg-green-600 { background-color: #16a34a; } /* ============================================================ 9. BORDERS & RADIUS ============================================================ */ .border { border-width: 1px; border-style: solid; border-color: var(--border); } .border-0 { border: 0; } .border-2 { border-width: 2px; border-style: solid; } .border-t { border-top-width: 1px; border-top-style: solid; border-top-color: var(--border); } .border-l { border-left-width: 1px; border-left-style: solid; } .border-primary { border-color: var(--primary); } .border-border { border-color: var(--border); } .border-border-40 { border-color: rgba(229, 229, 229, 0.4); } .border-muted-foreground { border-color: var(--muted-foreground); } .border-primary-30 { border-color: rgba(178, 122, 97, 0.3); } .border-primary-20 { border-color: rgba(178, 122, 97, 0.2); } .border-primary-40 { border-color: rgba(178, 122, 97, 0.4); } .border-nafh-cream-30 { border-color: rgba(225, 202, 194, 0.3); } .border-white-30 { border-color: rgba(255, 255, 255, 0.3); } .rounded-sm { border-radius: calc(var(--radius) - 4px); } .rounded-md { border-radius: calc(var(--radius) - 2px); } .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius); } .rounded-xl { border-radius: calc(var(--radius) + 4px); } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full{ border-radius: 9999px; } /* ============================================================ 10. SHADOWS & EFFECTS ============================================================ */ .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); } .shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04); } .shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.25); } .shadow-elevation { box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.05); transition: box-shadow 0.5s ease-out, transform 0.5s ease-out; } .shadow-elevation:hover { box-shadow: 0 2px 4px rgba(178,122,97,0.05), 0 4px 8px rgba(178,122,97,0.08), 0 8px 16px rgba(178,122,97,0.1), 0 16px 32px rgba(178,122,97,0.12); } /* ============================================================ 11. GRADIENT BACKGROUNDS ============================================================ */ .gradient-hero { background: linear-gradient( 135deg, rgba(225,202,194,0.1) 0%, rgba(178,122,97,0.05) 50%, rgba(112,120,125,0.05) 100% ); } .gradient-nafh { background: linear-gradient(135deg, #E1CAC2 0%, #B27A61 50%, #70787D 100%); } .gradient-text { background: linear-gradient(135deg, #B27A61 0%, #70787D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-to-t-primary { background: linear-gradient(to top, rgba(178,122,97,0.2), transparent); } .gradient-instagram { background: linear-gradient(to bottom right, #a855f7, #ec4899, #fb923c); } /* ============================================================ 12. TRANSITIONS ============================================================ */ .transition { transition-property: color, background-color, border-color, transform, opacity, box-shadow; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-all { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); } .transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .transition-opacity { transition: opacity 0.2s ease; } .transition-transform{ transition: transform 0.3s ease; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4,0,0.2,1); } /* ============================================================ 13. TRANSFORM & 3D ============================================================ */ .perspective-1000 { perspective: 1000px; } .perspective-1500 { perspective: 1500px; } .preserve-3d { transform-style: preserve-3d; } .-translate-x-1\/2 { transform: translateX(-50%); } .-translate-y-1\/2 { transform: translateY(-50%); } .translate-y-0 { transform: translateY(0); } .translate-y-full { transform: translateY(100%); } .-translate-y-full { transform: translateY(-100%); } .translate-x-full { transform: translateX(100%); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .rotate-180 { transform: rotate(180deg); } /* ============================================================ 14. ANIMATIONS — KEYFRAMES ============================================================ */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(178,122,97,0.3); } 50% { box-shadow: 0 0 40px rgba(178,122,97,0.5); } } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Animation Classes */ .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } .animate-gradient { background-size: 200% 200%; animation: gradient-shift 8s ease infinite; } .animate-breathe { animation: breathe 2.5s ease-in-out infinite; } /* Scroll-triggered animation base */ [data-animate] { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; } [data-animate="fadeInUp"] { transform: translateY(30px); } [data-animate="fadeInLeft"] { transform: translateX(-50px); } [data-animate="fadeInRight"] { transform: translateX(50px); } [data-animate="scaleIn"] { transform: scale(0.8); } [data-animate="fadeIn"] { transform: none; } [data-animate].is-visible { opacity: 1; transform: none !important; } /* ============================================================ 15. MISC VISUAL ============================================================ */ .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .pointer-events-none { pointer-events: none; } .select-none { user-select: none; } .whitespace-nowrap { white-space: nowrap; } .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .opacity-0 { opacity: 0; } .opacity-60 { opacity: 0.6; } .opacity-80 { opacity: 0.8; } .opacity-100 { opacity: 1; } /* ============================================================ 16. ACCESSIBILITY ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .skip-link { position: absolute; top: -40px; left: 0; background: #B27A61; color: white; padding: 8px 16px; z-index: 100; transition: top 0.3s; border-radius: 0 0 4px 0; } .skip-link:focus { top: 0; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ============================================================ 17. HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.3s ease; padding: 1rem 0; } .site-header.scrolled { background: rgba(240, 237, 233, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(240, 237, 233, 0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 0.5rem 0; } html[data-theme="dark"] .site-header.scrolled { background: rgba(26, 26, 26, 0.7); border-bottom-color: rgba(255, 255, 255, 0.1); } .site-header .header-inner { display: flex; align-items: center; justify-content: space-between; } /* Nav Links — Desktop */ .nav-link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.5rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; transition: color 0.2s, background-color 0.2s; white-space: nowrap; flex-shrink: 0; /* Padrão desktop: rosa claro */ color: var(--nafh-cream); } /* Após scroll (header com fundo claro): texto muda para marrom */ .site-header.scrolled .nav-link { color: var(--nafh-terracotta-dark); } /* Hover: muda para branco no topo, laranja terroso após scroll */ .nav-link:hover { color: #FFFFFF; } .site-header.scrolled .nav-link:hover { color: #D4723C; } /* Item ativo (página atual): branco no topo, malva expressivo após scroll */ .nav-link.active { color: #FFFFFF; } .site-header.scrolled .nav-link.active { color: #D4723C; } .nav-link.active:hover { color: #FFFFFF; } /* Em dark mode — rosa claro no topo, laranja após scroll, branco no ativo scrolled */ html[data-theme="dark"] .nav-link { color: var(--nafh-cream); } html[data-theme="dark"] .site-header.scrolled .nav-link { color: #D4723C; } html[data-theme="dark"] .nav-link:hover { color: #FFFFFF; } html[data-theme="dark"] .site-header.scrolled .nav-link:hover { color: #FFFFFF; } html[data-theme="dark"] .nav-link.active { color: #FFFFFF; } html[data-theme="dark"] .site-header.scrolled .nav-link.active { color: #FFFFFF; } /* ============================================================ Nav Dropdown Links — mesma lógica do menu desktop ============================================================ */ .nav-dropdown-link { color: var(--nafh-terracotta-dark); } html[data-theme="dark"] .nav-dropdown-link { color: var(--nafh-terracotta-dark); } .nav-dropdown-link:hover { background-color: rgba(225,202,194,0.3); color: #FFFFFF; } html[data-theme="dark"] .nav-dropdown-link:hover { background-color: rgba(112,120,125,0.3); color: #FFFFFF; } /* Dropdown */ .nav-dropdown-wrapper { position: relative; } .nav-dropdown { position: absolute; top: 100%; left: 0; margin-top: 0.25rem; width: 12rem; padding: 0.5rem; border-radius: 0.75rem; box-shadow: 0 20px 25px rgba(0,0,0,0.1); opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 60; } html:not(.dark) .nav-dropdown { background: var(--nafh-cream-light); border: 1px solid rgba(178, 122, 97, 0.3); } html[data-theme="dark"] .nav-dropdown { background: rgba(26, 26, 26, 0.8); border: 1px solid rgba(201, 181, 173, 0.2); } .nav-dropdown-wrapper:hover .nav-dropdown { opacity: 1; transform: none; pointer-events: auto; } .nav-dropdown-link { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 0.5rem; transition: background-color 0.2s, color 0.2s; } /* Cor + hover definidos acima junto com o restante do menu */ /* Chevron in nav */ .nav-chevron { width: 1rem; height: 1rem; transition: transform 0.2s; } .nav-dropdown-wrapper:hover .nav-chevron { transform: rotate(180deg); } /* Header CTA Button */ .header-cta { display: inline-flex; align-items: center; padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: all 0.3s; background-color: rgba(255,255,255,0.1); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.3); } .header-cta:hover { background-color: rgba(255,255,255,0.2); } .site-header.scrolled .header-cta { background-color: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .site-header.scrolled .header-cta:hover { background-color: rgba(178,122,97,0.9); } /* Theme Toggle */ .theme-toggle { position: relative; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; transition: background-color 0.2s; overflow: hidden; flex-shrink: 0; } .theme-toggle:hover { background-color: rgba(255,255,255,0.1); } .site-header.scrolled .theme-toggle:hover { background-color: rgba(225,202,194,0.2); } .theme-toggle-icon { position: absolute; transition: opacity 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; } .theme-toggle-icon.hidden-icon { opacity: 0; transform: rotate(90deg) scale(0); } .theme-toggle-icon.visible-icon { opacity: 1; transform: rotate(0) scale(1); } .icon-sun { color: #FFFFFF; } .icon-moon { color: #FFFFFF; } .site-header.scrolled .icon-sun { color: var(--nafh-terracotta); } .site-header.scrolled .icon-moon { color: var(--nafh-cream); } /* Hamburger */ .hamburger { position: relative; z-index: 60; padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s; color: #FFFFFF; } .site-header.scrolled .hamburger { color: var(--foreground); } .hamburger:hover { background-color: rgba(255,255,255,0.1); } .site-header.scrolled .hamburger:hover { background-color: rgba(225,202,194,0.2); } /* ============================================================ 18. MOBILE MENU ============================================================ */ .mobile-menu-overlay { position: fixed; inset: 0; z-index: 40; background-color: rgba(240,237,233,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } html[data-theme="dark"] .mobile-menu-overlay { background-color: rgba(15,15,15,0.95); } .mobile-menu-overlay.open { opacity: 1; pointer-events: auto; } .mobile-menu-nav { height: 100%; padding-top: 6rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 2rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .mobile-menu-overlay.open .mobile-menu-nav { transform: translateX(0); } .mobile-menu-item { display: block; padding: 0.75rem 1rem; font-size: 1.125rem; font-weight: 500; border-radius: 0.75rem; transition: background-color 0.2s, color 0.2s; /* Mobile: tudo marrom */ color: var(--nafh-terracotta-dark); opacity: 0; transform: translateX(30px); transition: background-color 0.2s, color 0.2s, opacity 0.3s, transform 0.3s; } html[data-theme="dark"] .mobile-menu-item { color: var(--nafh-terracotta-dark); } .mobile-menu-overlay.open .mobile-menu-item { opacity: 1; transform: translateX(0); } .mobile-menu-item:hover { background-color: rgba(225,202,194,0.2); } html[data-theme="dark"] .mobile-menu-item:hover { background-color: rgba(112,120,125,0.2); } .mobile-menu-sub { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(225,202,194,0.3); } .mobile-menu-sub-link { display: block; padding: 0.5rem 1rem; font-size: 1rem; /* Mobile: marrom */ color: var(--nafh-terracotta-dark); transition: color 0.2s; } html[data-theme="dark"] .mobile-menu-sub-link { color: var(--nafh-terracotta-dark); } .mobile-menu-sub-link:hover { color: var(--primary); } /* Mobile menu footer section */ .mobile-menu-contact { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); } .mobile-menu-contact-link { display: flex; align-items: center; gap: 0.75rem; /* Mobile: marrom */ color: var(--nafh-terracotta-dark); transition: color 0.2s; margin-bottom: 1rem; } html[data-theme="dark"] .mobile-menu-contact-link { color: var(--nafh-terracotta-dark); } .mobile-menu-contact-link:hover { color: var(--primary); } .mobile-menu-socials { display: flex; gap: 1rem; margin-top: 1.5rem; } .mobile-social-btn { padding: 0.5rem; border-radius: 9999px; background-color: rgba(225,202,194,0.2); color: var(--foreground); transition: background-color 0.2s, color 0.2s; } html[data-theme="dark"] .mobile-social-btn { background-color: rgba(112,120,125,0.2); } .mobile-social-btn:hover { background-color: var(--primary); color: var(--primary-foreground); } .mobile-menu-cta { margin-top: 2rem; display: flex; width: 100%; align-items: center; justify-content: center; padding: 1.25rem 2rem; background-color: var(--primary); color: var(--primary-foreground); border-radius: 9999px; font-size: 1.125rem; font-weight: 500; transition: background-color 0.2s; } .mobile-menu-cta:hover { background-color: rgba(178,122,97,0.9); } /* ============================================================ 19. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: 1px solid transparent; outline: none; text-decoration: none; } .btn:disabled { pointer-events: none; opacity: 0.5; } /* Variants */ .btn-default { background-color: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .btn-default:hover { background-color: rgba(178,122,97,0.9); } .btn-outline { background-color: var(--background); border-color: var(--border); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .btn-outline:hover { background-color: var(--accent); color: var(--accent-foreground); } .btn-ghost { background-color: transparent; color: var(--foreground); } .btn-ghost:hover { background-color: var(--accent); color: var(--accent-foreground); } .btn-secondary { background-color: var(--secondary); color: var(--secondary-foreground); } .btn-secondary:hover { background-color: rgba(225,202,194,0.8); } /* Sizes */ .btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; border-radius: calc(var(--radius) - 2px); } .btn-default-size { height: 2.25rem; padding: 0 1rem; } .btn-lg { height: 2.5rem; padding: 0 1.5rem; border-radius: calc(var(--radius) - 2px); } .btn-icon{ width: 2.25rem; height: 2.25rem; padding: 0; } /* Rounded pill buttons */ .btn-pill { border-radius: 9999px; } .btn-pill-lg { border-radius: 9999px; padding: 0 2rem; height: 2.5rem; } /* Green WhatsApp */ .btn-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background-color: #16a34a; color: #FFFFFF; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: background-color 0.2s; box-shadow: 0 4px 16px rgba(22,163,74,0.25); } .btn-whatsapp:hover { background-color: #15803d; } /* ============================================================ 20. PAGE BANNER (Hero image) ============================================================ */ .page-banner { position: relative; width: 100%; } .page-banner img { width: 100%; height: auto; display: block; } /* ============================================================ 21. SERVICE CARDS — 3D TILT ============================================================ */ .services-section { position: relative; } .service-card-wrapper { perspective: 1000px; } .service-card { position: relative; height: 100%; border-radius: 1rem; padding: 1.5rem; overflow: hidden; background: linear-gradient(to bottom right, var(--background), var(--background), rgba(178,122,97,0.05)); border: 1px solid rgba(229,229,229,0.5); box-shadow: 0 10px 15px rgba(178,122,97,0.05); transition: box-shadow 0.5s ease-out, border-color 0.3s; transform-style: preserve-3d; will-change: transform; } html[data-theme="dark"] .service-card { background: linear-gradient(to bottom right, var(--card), var(--card), rgba(201,154,133,0.05)); border-color: rgba(255,255,255,0.1); } .service-card:hover { box-shadow: 0 25px 50px rgba(178,122,97,0.1); border-color: rgba(178,122,97,0.3); } .service-card-overlay { position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(to bottom right, rgba(178,122,97,0.1), transparent, rgba(178,122,97,0.05)); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .service-card-link:hover .service-card-overlay { opacity: 1; } .service-card-link { display: block; height: 100%; text-decoration: none; } .service-icon-box { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom right, rgba(178,122,97,0.1), rgba(178,122,97,0.05)); border: 1px solid rgba(178,122,97,0.2); transition: all 0.5s; transform: translateZ(30px); } .service-card-link:hover .service-icon-box { border-color: rgba(178,122,97,0.4); box-shadow: 0 10px 15px rgba(178,122,97,0.2); } .service-icon-box svg { color: var(--primary); transition: transform 0.5s; } .service-card-link:hover .service-icon-box svg { transform: scale(1.1); } .service-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--muted-foreground); transition: color 0.3s; transform: translateZ(20px); } .service-card-link:hover .service-card-title { color: var(--primary); } .service-card-desc { color: var(--muted-foreground); line-height: 1.625; margin-bottom: 1.5rem; transform: translateZ(10px); } .service-card-cta { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary); font-size: 0.875rem; font-weight: 500; transition: gap 0.3s; transform: translateZ(25px); } .service-card-link:hover .service-card-cta { gap: 0.75rem; } .service-card-cta svg { transition: transform 0.3s; } .service-card-link:hover .service-card-cta svg { transform: translateX(4px); } /* Bottom gradient line */ .service-card-line { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4px; border-radius: 9999px; background: linear-gradient(to right, transparent, var(--primary), transparent); transition: width 0.5s; } .service-card-link:hover .service-card-line { width: 75%; } /* SVG icon animations */ .service-icon-svg { transition: transform 0.5s; } .service-card-link:hover .service-icon-svg { transform: scale(1.1); } .service-icon-rays line { opacity: 0; transition: opacity 0.3s; } .service-card-link:hover .service-icon-rays line { opacity: 0.6; } /* ============================================================ 22. NEUROARCHITECTURE SECTION ============================================================ */ .neuro-image-wrapper { position: relative; aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 32px rgba(178,122,97,0.15); } .neuro-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; } .neuro-image-wrapper:hover img { transform: scale(1.05); } .neuro-image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(178,122,97,0.2), transparent); pointer-events: none; } .neuro-badge { position: absolute; bottom: -1.5rem; right: 1.5rem; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 20px 25px rgba(0,0,0,0.1); max-width: 20rem; display: flex; align-items: center; gap: 0.75rem; } .neuro-benefit-item { display: flex; align-items: center; gap: 1rem; } .neuro-benefit-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background-color: rgba(178,122,97,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s; } .neuro-benefit-item:hover .neuro-benefit-icon { background-color: var(--primary); transform: scale(1.1); } .neuro-benefit-icon svg { color: var(--primary); transition: color 0.3s; } .neuro-benefit-item:hover .neuro-benefit-icon svg { color: var(--primary-foreground); } .neuro-benefit-text { color: var(--muted-foreground); transition: color 0.3s; } .neuro-benefit-item:hover .neuro-benefit-text { color: var(--foreground); } /* ============================================================ 23. LEADERSHIP SECTION ============================================================ */ .leadership-image-wrapper { position: relative; width: 100%; max-width: 32rem; margin: 0 auto; border-radius: 1rem; overflow: hidden; } .leadership-image-wrapper img { width: 100%; height: auto; object-fit: contain; transition: transform 0.7s; } .leadership-image-wrapper:hover img { transform: scale(1.05); } /* ============================================================ 24. PROJECTS CAROUSEL ============================================================ */ .carousel-section { overflow: hidden; } .carousel-container { position: relative; width: 100%; } .carousel-viewport { position: relative; width: 100%; height: 300px; overflow: hidden; } @media (min-width: 640px) { .carousel-viewport { height: 400px; } } @media (min-width: 768px) { .carousel-viewport { height: 500px; } } @media (min-width: 1024px) { .carousel-viewport { height: 600px; } } .carousel-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out; pointer-events: none; } .carousel-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; } .carousel-slide.exit { opacity: 0; transform: scale(0.95); } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } .carousel-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(240,237,233,0.6), transparent); pointer-events: none; } html[data-theme="dark"] .carousel-gradient { background: linear-gradient(to top, rgba(15,15,15,0.6), transparent); } /* Dots */ .carousel-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 10; } .carousel-dot { height: 0.5rem; border-radius: 9999px; width: 0.5rem; background-color: rgba(178,122,97,0.4); transition: width 0.3s, background-color 0.3s; cursor: pointer; border: none; padding: 0; } .carousel-dot:hover { background-color: rgba(178,122,97,0.6); } .carousel-dot.active { width: 2rem; background-color: var(--primary); } /* Arrows */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; z-index: 10; color: var(--foreground); } .carousel-btn:hover { background-color: rgba(178,122,97,0.2); } .carousel-btn-prev { left: 1rem; } .carousel-btn-next { right: 1rem; } /* ============================================================ 25. FAQ ACCORDION ============================================================ */ .faq-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; border-radius: 9999px; background-color: rgba(178,122,97,0.1); color: var(--primary); font-size: 0.875rem; font-weight: 500; margin-bottom: 1rem; } .faq-item { border: 1px solid rgba(229,229,229,0.6); border-radius: 1rem; overflow: hidden; background-color: var(--card); transition: border-color 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } html[data-theme="dark"] .faq-item { border-color: rgba(255,255,255,0.1); } .faq-item:hover { border-color: rgba(178,122,97,0.4); } .faq-trigger { width: 100%; padding: 1.5rem; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; cursor: pointer; } .faq-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .faq-question { font-weight: 600; font-size: 1rem; color: var(--primary); padding-right: 0.5rem; line-height: 1.375; text-align: left; } @media (min-width: 640px) { .faq-question { font-size: 1.125rem; } } .faq-chevron-wrap { width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(178,122,97,0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.3s, transform 0.3s; } .faq-item.open .faq-chevron-wrap { transform: rotate(180deg); background-color: var(--primary); color: var(--primary-foreground); } .faq-item.open .faq-chevron-wrap svg { color: var(--primary-foreground); } .faq-answer-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-in-out, opacity 0.3s; opacity: 0; } .faq-item.open .faq-answer-wrapper { opacity: 1; } .faq-answer { padding: 0.5rem 1.5rem 1.5rem; border-top: 1px solid rgba(229,229,229,0.3); font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); } @media (min-width: 640px) { .faq-answer { font-size: 1rem; } } .faq-list { margin-top: 0.75rem; margin-bottom: 0.25rem; padding-left: 0.5rem; display: flex; flex-direction: column; gap: 0.625rem; } @media (min-width: 640px) { .faq-list { padding-left: 1rem; } } .faq-list-item { display: flex; align-items: flex-start; gap: 0.625rem; } .faq-bullet { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background-color: var(--primary); flex-shrink: 0; margin-top: 0.5rem; } /* ============================================================ 26. CONTACT SECTION ============================================================ */ .contact-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; transition: transform 0.3s; } .contact-item:hover { transform: translateY(-4px); } .contact-icon-box { width: 3.5rem; height: 3.5rem; border-radius: 9999px; background-color: rgba(178,122,97,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .contact-item:hover .contact-icon-box { background-color: var(--primary); box-shadow: 0 10px 15px rgba(178,122,97,0.3); } .contact-icon-box svg { color: var(--primary); transition: color 0.3s; } .contact-item:hover .contact-icon-box svg { color: var(--primary-foreground); } .contact-title { font-weight: 600; color: var(--muted-foreground); transition: color 0.3s; } .contact-item:hover .contact-title { color: var(--primary); } .contact-info { text-align: center; } .contact-info a, .contact-info p { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.2s; } .contact-info a:hover { color: var(--primary); } /* ============================================================ 27. FOOTER ============================================================ */ .site-footer { background-color: #E1CAC2; } .footer-brand-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; color: #B27A61; display: inline-block; margin-bottom: 1rem; } .footer-brand-title:hover { opacity: 0.8; } .footer-text { color: #B27A61; font-size: 0.875rem; line-height: 1.625; } .footer-heading { font-weight: 700; color: #B27A61; margin-bottom: 1rem; } .footer-link { color: #B27A61; font-size: 0.875rem; transition: color 0.2s; } .footer-link:hover { color: #8B5A42; } .footer-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background-color: #16a34a; color: #FFFFFF; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; margin-top: 1.5rem; box-shadow: 0 4px 16px rgba(22,163,74,0.25); transition: transform 0.2s, background-color 0.2s; } .footer-whatsapp:hover { background-color: #15803d; transform: scale(1.02); } .footer-whatsapp:active { transform: scale(0.98); } .footer-social-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: #FFFFFF; color: #B27A61; transition: background-color 0.2s, color 0.2s, transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .footer-social-btn:hover { background-color: #B27A61; color: #FFFFFF; transform: scale(1.1) translateY(-2px); } .footer-social-btn:active { transform: scale(0.95); } .footer-logo { height: 7rem; width: auto; } @media (min-width: 768px) { .footer-logo { height: 9rem; } } @media (min-width: 1024px) { .footer-logo { height: 11rem; } } .footer-logo-link { display: inline-block; transition: opacity 0.2s; } .footer-logo-link:hover { opacity: 0.8; } /* ============================================================ 28. COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 1rem; transform: translateY(100%); opacity: 0; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s; } .cookie-banner.visible { transform: translateY(0); opacity: 1; } .cookie-banner-inner { max-width: 56rem; margin: 0 auto; } .cookie-icon-box { flex-shrink: 0; padding: 0.5rem; background-color: rgba(178,122,97,0.1); border-radius: 0.5rem; } .cookie-toggle-box { width: 1.25rem; height: 1.25rem; border-radius: 0.375rem; border: 2px solid var(--muted-foreground); display: flex; align-items: center; justify-content: center; transition: all 0.2s; background-color: var(--background); } .cookie-toggle-box.checked { background-color: var(--primary); border-color: var(--primary); } .cookie-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; transition: background-color 0.2s; } .cookie-option:not(.disabled) { cursor: pointer; } .cookie-option:not(.disabled):hover { background-color: rgba(225,202,194,0.2); } html[data-theme="dark"] .cookie-option:not(.disabled):hover { background-color: rgba(112,120,125,0.2); } .cookie-option.disabled { opacity: 0.6; } /* ============================================================ 29. INSTAGRAM EMBED ============================================================ */ .instagram-embed-container { width: 100%; } /* ============================================================ 30. RESPONSIVE UTILITIES ============================================================ */ /* Mobile first — hidden by default */ .lg\:hidden { } /* controlled by media queries */ @media (max-width: 1023px) { .lg\:block { display: none; } .lg\:flex { display: none; } .lg\:grid { display: none; } } @media (min-width: 1024px) { .hidden-desktop { display: none; } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:order-1 { order: 1; } .lg\:order-2 { order: 2; } /* Large screen padding */ .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .lg\:gap-16{ gap: 4rem; } .lg\:gap-12{ gap: 3rem; } .lg\:mx-0 { margin-left: 0; margin-right: 0; } /* Grid layouts */ .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-custom { grid-template-columns: 0.75fr 1.25fr; } .lg\:right-6 { right: 1.5rem; } } @media (min-width: 768px) { .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:h-36 { height: 9rem; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .md\:text-3xl{ font-size: 1.875rem; } .md\:text-4xl{ font-size: 2.25rem; } .md\:text-5xl{ font-size: 3rem; } .md\:text-lg { font-size: 1.125rem; } .md\:flex-row{ flex-direction: row; } .md\:items-center { align-items: center; } .md\:gap-12 { gap: 3rem; } .md\:gap-6 { gap: 1.5rem; } } @media (min-width: 640px) { .sm\:text-xl { font-size: 1.25rem; } .sm\:text-2xl { font-size: 1.5rem; } .sm\:text-3xl { font-size: 1.875rem; } .sm\:text-4xl { font-size: 2.25rem; } .sm\:flex-row { flex-direction: row; } .sm\:hidden { display: none; } .sm\:block { display: block; } .sm\:pl-4 { padding-left: 1rem; } .sm\:text-base{ font-size: 1rem; } .sm\:text-lg { font-size: 1.125rem; } } /* Overflow for mobile menu open */ body.menu-open { overflow: hidden; } /* Safe area iOS */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); } } /* ============================================================ 31. SECTION LAYOUT HELPERS ============================================================ */ .section-py { padding-top: 5rem; padding-bottom: 5rem; } .section-py-lg { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 1024px) { .section-py-lg { padding-top: 8rem; padding-bottom: 8rem; } } /* ============================================================ 32. MIDIA PAGE SPECIFIC ============================================================ */ .instagram-icon-gradient-ring { width: 4rem; height: 4rem; border-radius: 9999px; padding: 2px; background: linear-gradient(to bottom right, #a855f7, #ec4899, #fb923c); } .instagram-icon-inner { width: 100%; height: 100%; border-radius: 9999px; background-color: rgba(225,202,194,0.3); display: flex; align-items: center; justify-content: center; } html[data-theme="dark"] .instagram-icon-inner { background-color: rgba(112,120,125,0.3); } .instagram-link-group { transition: opacity 0.2s; } .instagram-link-group:hover { opacity: 0.8; } .instagram-link-group:hover .instagram-link-text { color: var(--primary); } .instagram-link-text { color: var(--muted-foreground); transition: color 0.2s; } /* ============================================================ 33. HOUSE BACKGROUND (services section decoration) ============================================================ */ .house-bg-svg { position: absolute; left: 0; right: 0; top: -5rem; width: 100%; height: 600px; opacity: 0.07; pointer-events: none; user-select: none; color: var(--primary); } html[data-theme="dark"] .house-bg-svg { opacity: 0.04; } /* ============================================================ 34. RESPONSIVE - GRIDS & TYPOGRAPHY (migrados dos