/* BUSINESS_NAME — Custom styles (supplements Tailwind CDN) */ /* ── Animation utilities (scroll-reveal, float, shimmer, hero mockup) ── */ @import url('./anim.css'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* ═══════════════════════════════════════════════════════════════════════════ THEME SYSTEM — dark by default, light when OS prefers it. A user toggle can be added later by toggling [data-theme] on . ═══════════════════════════════════════════════════════════════════════════ */ :root { --color-bg-base: #030712; --color-bg-card: #111827; --color-bg-surface: #1f2937; --color-border: #374151; --color-text-base: #f3f4f6; --color-text-sub: #d1d5db; --color-text-muted: #9ca3af; --color-nav-bg: #030712; --color-nav-border: #1f2937; --color-footer-bg: #111827; --hero-gradient-start: #0a0f1e; --hero-gradient-mid: #0d1a2e; --hero-gradient-end: #0a1628; } @media (prefers-color-scheme: light) { :root { --color-bg-base: #ffffff; --color-bg-card: #f9fafb; --color-bg-surface: #f3f4f6; --color-border: #e5e7eb; --color-text-base: #111827; --color-text-sub: #374151; --color-text-muted: #6b7280; --color-nav-bg: #ffffff; --color-nav-border: #e5e7eb; --color-footer-bg: #f9fafb; --hero-gradient-start: #EFF6FF; --hero-gradient-mid: #ffffff; --hero-gradient-end: #EFF6FF; } } html[data-theme="dark"] { --color-bg-base: #030712; --color-bg-card: #111827; --color-bg-surface: #1f2937; --color-border: #374151; --color-text-base: #f3f4f6; --color-text-sub: #d1d5db; --color-text-muted: #9ca3af; --color-nav-bg: #030712; --color-nav-border: #1f2937; --color-footer-bg: #111827; --hero-gradient-start: #0a0f1e; --hero-gradient-mid: #0d1a2e; --hero-gradient-end: #0a1628; } html[data-theme="light"] { --color-bg-base: #ffffff; --color-bg-card: #f9fafb; --color-bg-surface: #f3f4f6; --color-border: #e5e7eb; --color-text-base: #111827; --color-text-sub: #374151; --color-text-muted: #6b7280; --color-nav-bg: #ffffff; --color-nav-border: #e5e7eb; --color-footer-bg: #f9fafb; --hero-gradient-start: #EFF6FF; --hero-gradient-mid: #ffffff; --hero-gradient-end: #EFF6FF; } body { background-color: var(--color-bg-base); color: var(--color-text-base); } #nav { background-color: var(--color-nav-bg) !important; border-bottom-color: var(--color-nav-border) !important; } #nav a, #nav button { color: var(--color-text-sub); } #nav a:hover { color: var(--color-text-base); } footer { background-color: var(--color-footer-bg) !important; color: var(--color-text-muted); } footer h4 { color: var(--color-text-base); } footer a { color: var(--color-text-muted); } footer a:hover { color: var(--color-text-base); } footer .border-t { border-color: var(--color-border) !important; } .bg-gray-950 { background-color: var(--color-bg-base) !important; } .bg-gray-900 { background-color: var(--color-bg-card) !important; } .bg-gray-800 { background-color: var(--color-bg-surface) !important; } .border-gray-700 { border-color: var(--color-border) !important; } .border-gray-800 { border-color: var(--color-border) !important; } .text-gray-100 { color: var(--color-text-base) !important; } .text-gray-300 { color: var(--color-text-sub) !important; } .text-gray-400 { color: var(--color-text-muted) !important; } .hero-gradient { background: linear-gradient( 135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-mid) 50%, var(--hero-gradient-end) 100% ); } /* Gradient utilities */ .feature-card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(27, 111, 232, 0.1); } /* Pricing card highlight */ .pricing-popular { box-shadow: 0 8px 40px rgba(27, 111, 232, 0.18); border: 2px solid PRIMARY_COLOR_500; } /* CTA gradient */ .cta-gradient { background: linear-gradient(135deg, PRIMARY_COLOR_500 0%, #1559BA 100%); } /* Testimonial quote styling */ .testimonial-card::before { content: '\201C'; position: absolute; top: -8px; left: 20px; font-size: 4rem; color: PRIMARY_COLOR_500; opacity: 0.15; font-family: Georgia, serif; line-height: 1; } /* Form focus states */ input:focus, textarea:focus, select:focus { outline: none; border-color: PRIMARY_COLOR_500; box-shadow: 0 0 0 3px rgba(27, 111, 232, 0.1); } /* Blog post content */ .blog-content h2 { margin-top: 2rem; margin-bottom: 0.75rem; } .blog-content p { margin-bottom: 1rem; } .blog-content ul, .blog-content ol { margin-bottom: 1rem; padding-left: 1.5rem; } .blog-content li { margin-bottom: 0.5rem; } /* Subtle pattern for sections */ .dot-pattern { background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 24px 24px; } /* Hide Klaro service count links (e.g. "↓ 2 services") — purpose-only UI */ .klaro .cookie-modal .cm-list-description a { display: none !important; } /* ── Print: hide navigation ── */ /* ── Print: scale headings ── */ @media print { h1 { font-size: 1.5rem !important; } h2 { font-size: 1.2rem !important; } }