/* * Storefront footer — premium redesign * --------------------------------------------------------------------------- * Global (loaded in alongside theme-tokens.css/redesign.css since the * footer renders on every frontend page). Uses this project's own real * design tokens (dark charcoal nav + gold brand accent, see theme-tokens.css) * rather than the unrelated black/green palette of any outside reference. * All content driven by real data already shared into every frontend view * ($generalsetting, $contact, $socialicons, $pages, $pagesright) plus the * real customer-account routes — no invented links, payment badges, or app * store buttons, since this project doesn't have real data to back those. */ .site-footer { font-family: var(--font-base); } /* ---------------------------------------------------------------------- */ /* Tier 1 — brand + social */ /* ---------------------------------------------------------------------- */ .site-footer__top { background: var(--nav-bg); color: var(--nav-text); padding: var(--space-6) 0; } .site-footer__top .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); } .site-footer__brand { max-width: 420px; } .site-footer__logo { max-height: 44px; width: auto; margin-bottom: var(--space-3); } .site-footer__address { margin: 0 0 var(--space-2); font-size: 13.5px; color: var(--nav-text-muted); line-height: 1.6; } .site-footer__hotline { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand-primary-light); font-weight: 700; font-size: 14px; text-decoration: none; } .site-footer__hotline:hover { color: var(--brand-primary-light); text-decoration: underline; } .site-footer__social { text-align: center; } .site-footer__social-label { display: block; font-size: 12px; font-weight: 600; color: var(--nav-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); } .site-footer__social-icons { display: flex; align-items: center; gap: var(--space-3); } .site-footer__social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--nav-bg-elevated); border: 1px solid var(--nav-border); color: var(--nav-text); font-size: 15px; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .site-footer__social-icon:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-primary-contrast); transform: translateY(-2px); } .site-footer__social-icon--whatsapp:hover { background: #25d366; border-color: #25d366; } /* ---------------------------------------------------------------------- */ /* Tier 2 — link columns */ /* ---------------------------------------------------------------------- */ .site-footer__links { background: var(--nav-bg-elevated); padding: var(--space-6) 0 var(--space-5); border-top: 1px solid var(--nav-border); } .site-footer__col { margin-bottom: var(--space-5); } .site-footer__heading { color: var(--brand-primary-light); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); } .site-footer__list { list-style: none; margin: 0; padding: 0; } .site-footer__list li { /* This theme's style.css carries a global `li { display: inline-block }` reset (meant for horizontal nav menus) that would otherwise make every link in this list sit side-by-side and wrap like text. Overriding it here — a class+element selector beats the bare element selector on specificity regardless of stylesheet load order. */ display: block; width: 100%; margin-bottom: var(--space-2); } .site-footer__list a { display: inline-block; color: var(--nav-text-muted); font-size: 13.5px; text-decoration: none; transition: color var(--transition-fast); } .site-footer__list a:hover { color: var(--brand-primary-light); } .site-footer__list--plain li { display: block; width: 100%; color: var(--nav-text-muted); font-size: 13.5px; line-height: 1.6; } .site-footer__list--plain a { color: var(--nav-text-muted); } .site-footer__list--plain a:hover { color: var(--brand-primary-light); } /* ---------------------------------------------------------------------- */ /* Tier 3 — bottom bar */ /* ---------------------------------------------------------------------- */ .site-footer__bottom { background: var(--nav-bg); border-top: 2px solid var(--brand-primary); padding: var(--space-3) 0; } .site-footer__copyright { margin: 0; text-align: center; font-size: 12.5px; color: var(--nav-text-muted); } .site-footer__copyright a { color: var(--brand-primary-light); text-decoration: none; font-weight: 600; } .site-footer__copyright a:hover { text-decoration: underline; } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width: 767.98px) { .site-footer__top .container { flex-direction: column; align-items: flex-start; text-align: left; } .site-footer__social { text-align: left; } .site-footer__social-icons { justify-content: flex-start; } }