/* ============================================================ Azaad — POLICIES PAGE (policies.css) Styles for /pages/policies.html Covers: Privacy Policy, Shipping Policy, Return Policy. This file extends the shared about.css which already provides: .breadcrumb-nav, .about-hero, .about-quicknav, .legal-content, .legal-disclaimer, .legal-updated Load order: AFTER about.css (both in ) Sections: 1. Policy Section Heading Block 2. Legal Content Extensions (ul / li / strong) 3. Policy CTA Banner 4. Responsive Overrides ============================================================ */ /* ===================================================== 1. POLICY SECTION HEADING BLOCK Centred eyebrow + h2 + subtitle above each policy. ===================================================== */ .policy-section__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); } .policy-section__head .about-hero__eyebrow { display: block; margin-bottom: var(--space-3); } .policy-section__head h2 { font-family: var(--font-serif); font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); font-weight: var(--weight-bold); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-3); } .policy-section__head p { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0; } /* ===================================================== 2. LEGAL CONTENT EXTENSIONS about.css defines .legal-content base rules; these add list and inline-emphasis support. ===================================================== */ .legal-content ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); list-style: disc; } .legal-content li { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-2); } .legal-content li::marker { color: var(--color-brand-gold); } .legal-content li:last-child { margin-bottom: 0; } .legal-content strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); } /* ===================================================== 3. POLICY CTA BANNER Shown at the bottom of the Return Policy section. ===================================================== */ .policy-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); max-width: 800px; margin: var(--space-10) auto 0; padding: var(--space-6) var(--space-7); background: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); transition: border-color var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out); } .policy-cta:hover { border-color: rgba(201, 169, 110, 0.28); box-shadow: var(--shadow-sm); } .policy-cta p { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0; } .policy-cta p strong { display: block; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); } /* WhatsApp button — extends .btn from components.css */ .btn--whatsapp { background: var(--btn-wa-bg, #25D366); color: var(--btn-wa-text, #ffffff); border-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md, 0.5rem); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; transition: background var(--duration-base) var(--ease-in-out); } .btn--whatsapp:hover { background: var(--btn-wa-bg-hover, #1EA952); } .btn--whatsapp:focus-visible { outline: 2px solid var(--color-whatsapp); outline-offset: 2px; } /* ===================================================== 4. RESPONSIVE OVERRIDES ===================================================== */ /* ── Tablet portrait (≤ 768px) ── */ @media (max-width: 768px) { .policy-section__head { margin-bottom: var(--space-8); } .policy-section__head h2 { font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl)); } .policy-cta { flex-direction: column; align-items: flex-start; padding: var(--space-5) var(--space-5); gap: var(--space-4); } .policy-cta .btn--whatsapp { width: 100%; justify-content: center; } } /* ── Mobile (≤ 480px) ── */ @media (max-width: 480px) { .policy-section__head h2 { font-size: var(--text-2xl); } .policy-cta { border-radius: var(--radius-lg); padding: var(--space-4); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .policy-cta { transition: none; } }