/* ═══════════════════════════════════════════════════════════════════ WSWRT THEME — Write Strokes With Right Thoughts™ Indian Tricolour Design System · Books & Courses Marketplace Loaded LAST in — overrides all inline store defaults. ═══════════════════════════════════════════════════════════════════ */ /* ── Google Fonts ────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi:ital@0;1&family=Hind:wght@300;400;500;600&family=Caveat:wght@400;600;700&display=swap'); /* ── WSWRT Design Tokens ─────────────────────────────────────────── */ :root { /* Tricolour Palette */ --saffron: #FF9933; --saffron-deep: #D4781A; --saffron-light: #FFF3E0; --green-india: #138808; --green-deep: #0D6B05; --green-light: #E8F5E9; --navy-chakra: #000080; --navy-mid: #1A237E; --navy-light: #E8EAF6; /* Whites & Parchment */ --white: #FFFFFF; --off-white: #FAFAF7; --parchment: #F5F0E8; /* Ink */ --ink: #1A1A2E; --ink-mid: #3D3A55; --ink-light: #6B6880; /* Store token remaps */ --blue: #FF9933; --blue-dk: #D4781A; --orange: #FF9933; --orange-dk: #D4781A; --dark: #000080; --body: #3D3A55; --muted: #6B6880; --faint: #A09CB0; --bg: #FAFAF7; --card: #FFFFFF; --border: #E0DDD6; --border-lt: #F0EDE8; --green: #138808; --red: #C62828; /* Typography */ --font-display: 'Tiro Devanagari Hindi', Georgia, serif; --font-body: 'Hind', system-ui, sans-serif; --font-script: 'Caveat', cursive; } /* ── Global Typography ───────────────────────────────────────────── */ body { font-family: var(--font-body); background: var(--off-white); color: var(--ink); line-height: 1.7; } h1, h2, h3 { font-family: var(--font-display); color: var(--navy-chakra); line-height: 1.25; } h4, h5, h6 { font-family: var(--font-body); font-weight: 600; color: var(--ink); } /* ── Microbar ────────────────────────────────────────────────────── */ .microbar { background: var(--navy-chakra) !important; } .microbar a:hover, .microbar span:hover { color: var(--saffron) !important; } /* ── Main Header ─────────────────────────────────────────────────── */ .main-header { background: #fff; border-bottom: none; } .logo { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--navy-chakra); letter-spacing: -.3px; line-height: 1.2; } .logo-dot { background: var(--saffron); } .logo:hover { color: var(--saffron-deep); } /* Search */ .search-btn { background: var(--saffron); } .search-btn:hover { background: var(--saffron-deep); } .search-shell:focus-within { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(255,153,51,.18); } .cat-btn:hover { color: var(--saffron-deep); } .hdr-icon:hover { border-color: var(--saffron); background: var(--saffron-light); color: var(--saffron-deep); } .search-drop-footer a { color: var(--saffron); } /* ── Nav Row — Tricolour bottom border ───────────────────────────── */ .nav-row { background: #fff; border-bottom: none; position: relative; } .nav-row::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--saffron) 33.33%, #F0EDE8 33.33% 66.66%, var(--green-india) 66.66% ); } .nav-inner a { font-family: var(--font-body); font-weight: 500; color: var(--ink-mid); } .nav-inner a:hover { color: var(--saffron-deep); } .nav-inner a.active { color: var(--saffron); border-bottom-color: var(--saffron); } .nav-inner .nav-sale { color: var(--green-india) !important; } .nav-inner .nav-sale:hover { border-bottom-color: var(--green-india) !important; } /* ── Drawer ──────────────────────────────────────────────────────── */ .drawer nav a:hover { background: var(--saffron-light); color: var(--saffron-deep); } .drawer-footer a:hover { background: var(--saffron-light); color: var(--saffron-deep); } /* ── Auth Modal ──────────────────────────────────────────────────── */ .auth-modal { border-top: 4px solid var(--saffron); } .auth-tab.active { color: var(--saffron); border-bottom-color: var(--saffron); } .auth-field input:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(255,153,51,.15); } .auth-submit { background: var(--navy-chakra); } .auth-submit:hover { background: var(--saffron); } .auth-switch button { color: var(--saffron); } .auth-otp-btn:hover { border-color: var(--saffron); color: var(--saffron-deep); } .otp-code-input:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(255,153,51,.15); } .otp-resend-link { color: var(--saffron); } /* ── Footer — Navy Chakra ────────────────────────────────────────── */ .site-footer { background: var(--navy-chakra); } .footer-top-strip { background: var(--navy-mid); } .footer-brand .footer-logo { font-family: var(--font-display); } .footer-brand .footer-logo span { color: var(--saffron); } .footer-social a:hover { background: var(--saffron); } .newsletter-form input:focus { border-color: var(--saffron); } .newsletter-form button { background: var(--saffron); color: #fff; font-family: var(--font-body); } .newsletter-form button:hover { background: var(--saffron-deep); } .footer-col a:hover { color: var(--saffron) !important; } /* Tricolour stripe at very bottom of footer */ .footer-bottom { position: relative; padding-bottom: 26px; } .footer-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--saffron) 33.33%, rgba(255,255,255,.25) 33.33% 66.66%, var(--green-india) 66.66% ); }