/** * ============================================================ * styles.css — Vansh Feeds | Master Stylesheet * ============================================================ * * TABLE OF CONTENTS * ───────────────── * 1. Google Fonts Import * 2. CSS Custom Properties (:root variables) * 3. Dark Mode — Variable Overrides * 4. Dark Mode — Component-Level Overrides * 5. Product Detail Zoom Layout * 6. CSS Reset & Base Styles * 7. Theme Transition Suppression (.no-theme-transition) * 8. Typography & Utility Classes * 9. Premium Text Animations * 10. Buttons * 11. Topbar (contact strip above navbar) * 12. Navbar & Logo * 13. Hero Section * 14. Feature Overlap Cards * 15. Bento Grid Layouts * 16. Product Cards * 17. Network / Distribution Section * 18. Footer * 19. Utility Grid Helpers * 20. Responsive Breakpoints * 21. Mobile Menu (active state) * 22. Scroll Reveal Animations * 23. Page Transition Overlay * 24. UI Controls (Language + Theme toggles) * 25. Misc Animations (float, spin) * * COLOUR SYSTEM * ───────────── * All colours are defined as CSS custom properties in :root. * Dark mode swaps those variables via [data-theme="dark"], * except for --always-* variables which never change — these * are used for elements that must look the same in both modes * (e.g. the footer background, overlay background). * * DARK MODE STRATEGY * ────────────────── * theme-init.js applies [data-theme="dark"] to BEFORE * the first CSS paint, so there is zero flash of the wrong theme. * The .no-theme-transition class (section 7) suppresses colour * transitions during that initial load. * ============================================================ */ /* ───────────────────────────────────────────────────────────────────────────── 2. CSS CUSTOM PROPERTIES (Design Tokens) All visual values are defined here as variables. Using these everywhere means: change one value here → the whole site updates instantly. Two categories: • Regular vars (--dark, --white, etc.) → FLIP in dark mode (see section 3) • Always vars (--always-dark, --always-white) → NEVER change — used for elements that must keep the same colour in both themes (footer, overlay). ───────────────────────────────────────────────────────────────────────────── */ :root { /* Kapila-inspired Vibrant Colors for Vansh Brand */ --primary: #15803D; /* Vibrant Green */ --primary-dark: #166534; --primary-light: #22C55E; --secondary: #F59E0B; /* Vibrant Orange/Gold */ --secondary-dark: #D97706; --accent-red: #DC2626; /* For alerts, strong CTAs */ --accent-yellow: #FACC15; --dark: #1E293B; --dark-light: #334155; --light: #F8FAFC; --white: #FFFFFF; --gray: #64748B; --gray-light: #E2E8F0; --always-dark: #1E293B; --always-darker: #0f172a; --always-white: #FFFFFF; /* Typography */ --font-main: 'Inter', sans-serif; --font-heading: 'Outfit', sans-serif; /* Layout */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 2rem; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08); --transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* ───────────────────────────────────────────────────────────────────────────── 3. DARK MODE — CSS VARIABLE OVERRIDES When theme-init.js sets data-theme="dark" on , these overrides replace the root variables. Notice how the roles FLIP: --dark (normally a dark colour) becomes a LIGHT colour in dark mode because it is used for body text, which must be light on dark bg. --white (normally white) becomes a dark card colour in dark mode. --always-* variables are defined in :root and NOT overridden here. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --dark: #F8FAFC; --dark-light: #E2E8F0; --light: #0f172a; --white: #1e293b; --gray: #94a3b8; --gray-light: #334155; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5); } /* ───────────────────────────────────────────────────────────────────────────── 4. DARK MODE — COMPONENT-LEVEL OVERRIDES Some elements use hardcoded colours in their inline styles or have backgrounds that don't automatically follow the CSS variables. These rules force them to use the correct dark-mode values. Most rules use !important to override inline styles on HTML elements. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f172a; color: #F8FAFC; } /* .product-card and .feat-card dark mode overrides moved to end of file (premium gradient version) */ [data-theme="dark"] .section { background: #0f172a; } [data-theme="dark"] .product-img-wrapper { background: #0f172a; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0f172a !important; color: #F8FAFC !important; border-color: #334155 !important; } [data-theme="dark"] .topbar { background: #0f172a; border-bottom: 1px solid #334155; } [data-theme="dark"] .controls-group { background: #0f172a; border-color: #334155; } [data-theme="dark"] .lang-btn.active { background: #1e293b; } [data-theme="dark"] .hero-bg { filter: brightness(0.4); } /* Dark mode: sections with explicit light backgrounds */ [data-theme="dark"] section[style*="background: var(--white)"], [data-theme="dark"] section[style*="background: var(--light)"] { background: #1e293b !important; } /* Dark mode product detail card panels */ [data-theme="dark"] .product-detail-img-panel { background: #0f172a !important; border-color: #334155 !important; } [data-theme="dark"] .product-detail-info-panel { background: #1e293b !important; border-color: #334155 !important; } /* Dark mode inline icon badges */ [data-theme="dark"] .icon-badge-green { background: rgba(34, 197, 94, 0.15) !important; } [data-theme="dark"] .icon-badge-gold { background: rgba(245, 158, 11, 0.15) !important; } /* Quality page dark cards */ [data-theme="dark"] [style*="background: var(--light)"] { background: #1e293b !important; } /* About, contact inline card panels */ [data-theme="dark"] [style*="background: var(--dark);"] { background: #020617 !important; } /* ───────────────────────────────────────────────────────────────────────────── 5. PRODUCT DETAIL — AMAZON-STYLE ZOOM LAYOUT The zoom feature uses two absolutely-positioned elements: #zoom-lens — the circular magnifier that follows the cursor #zoom-result — the floating panel showing the zoomed image Both are positioned relative to the .product-detail-img-panel wrapper. The zoom logic itself is in the