/* =========================================================== Social Lizard Agency — custom design tokens & utilities Converted from the original Lovable/React Tailwind v4 theme. Colors are defined as "R G B" CSS variables and wired into Tailwind (via the inline tailwind.config in each page's ) so standard Tailwind utilities like bg-primary, text-primary/60, border-border, etc. all work with full opacity-modifier support. =========================================================== */ :root { --radius: 1rem; --color-background: 2 2 2; --color-foreground: 245 245 245; --color-surface: 14 11 10; --color-surface-elevated: 23 18 15; --color-card: 12 9 8; --color-primary: 245 100 43; --color-primary-foreground: 2 2 2; --color-amber: 252 159 48; --color-secondary: 23 18 15; --color-muted: 23 18 15; --color-muted-foreground: 158 150 148; --color-border: 60 50 47; --color-input: 34 26 23; --color-ring: 245 100 43; --gradient-primary: linear-gradient(135deg, #F05A28 0%, #F7A823 100%); --gradient-text: linear-gradient(135deg, #F5F5F5 0%, #F7A823 60%, #F05A28 100%); --shadow-glow: 0 20px 60px -20px rgba(245, 100, 43, 0.45); --shadow-elevated: 0 30px 80px -30px rgba(0, 0, 0, 0.8); } * { border-color: rgb(var(--color-border) / 0.6); } html { scroll-behavior: smooth; } body { background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: "Fraunces", ui-serif, Georgia, serif; letter-spacing: -0.02em; } ::selection { background: rgba(245, 100, 43, 0.4); color: #fff; } /* ---- custom utilities not covered by Tailwind's defaults ---- */ .gradient-primary { background-image: var(--gradient-primary); } .gradient-text { background-image: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .glass { background: rgb(var(--color-surface) / 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgb(var(--color-border) / 0.6); } .glow-primary { box-shadow: var(--shadow-glow); } .btn-gradient { background-image: var(--gradient-primary); color: #0B0B0B; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.2s ease; } .btn-gradient:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); filter: brightness(1.05); } .card-elevated { background-color: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border) / 0.6); border-radius: 1.25rem; transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .card-elevated:hover { transform: translateY(-4px); border-color: rgb(var(--color-primary) / 0.4); background-color: rgb(var(--color-surface-elevated)); } /* ---- animations ---- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } } .animate-fade-up { animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-glow-pulse { animation: glow-pulse 5s ease-in-out infinite; } /* ---- FAQ accordion ---- */ .faq-answer { display: none; padding: 0 1.5rem 1.5rem; font-size: 0.875rem; line-height: 1.625; color: rgb(var(--color-muted-foreground)); } @media (min-width: 640px) { .faq-answer { font-size: 1rem; } } .faq-item.open .faq-answer { display: block; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.2s ease; } /* ---- mobile nav ---- */ .mobile-nav { display: none; } .mobile-nav.open { display: block; }