/* Box Sizing Reset */ *, *::before, *::after { box-sizing: border-box; } /* Prevent Horizontal Scrolling Globally */ html, body { max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; } /* Ensure images and media stay within parent bounds */ img, video, iframe { max-width: 100%; height: auto; } /* ================================================================= SPARKLE PK — LUXURY JEWELLERY E-COMMERCE THEME sparklepk.online ----------------------------------------------------------------- Palette : Deep Slate + Champagne Gold + Ivory Pearl Headings : Playfair Display (serif, heritage/luxury) Body/UI : Inter (sans-serif, clean & legible) Wired to : your actual site markup (header, hero, collection-card, royal, testimonials, footer, product page, etc.) ================================================================= */ /* ----------------------------------------------------------------- 1. FONTS — already linked in your HTML , kept here too as a safe fallback so the theme works standalone. ----------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ----------------------------------------------------------------- 2. CSS VARIABLES — single source of truth. Change a value here and it cascades across the entire site. ----------------------------------------------------------------- */ :root{ /* Brand colours */ --color-primary: #1A252C; /* Deep slate/charcoal – text, header, structure */ --color-primary-soft: #2B3941; /* Lighter slate for gradients / dark surfaces */ --color-accent: #E5C158; /* Champagne gold – CTAs, prices, active states */ --color-accent-dark: #C9A23F; /* Darker gold – hover / pressed states */ --color-accent-light: #F3DFA0; /* Pale gold – subtle highlights */ /* Backgrounds */ --bg-canvas: #FAF8F5; /* Soft ivory – main page background */ --bg-surface: #FFFFFF; /* Pure white – cards, panels, sections */ /* Muted / supporting tones */ --text-muted: #7F8C8D; /* Secondary text, meta info */ --text-sage: #8A9A86; /* Secondary accent for tags/labels */ --border-soft: #E8E4DC; /* Hairline borders on light surfaces */ /* Status colours */ --color-success: #3E8E5A; --color-error: #B3452F; /* Typography */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; /* Radii & shadows */ --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px; --radius-pill: 999px; --shadow-sm: 0 6px 16px rgba(26,37,44,0.05); --shadow-md: 0 10px 30px rgba(26,37,44,0.08); --shadow-lg: 0 20px 45px rgba(26,37,44,0.12); --shadow-gold: 0 10px 24px rgba(229,193,88,0.35); /* Motion */ --ease: cubic-bezier(.4,0,.2,1); --transition-fast: .2s var(--ease); --transition-med: .35s var(--ease); } /* ----------------------------------------------------------------- 3. RESET & BASE ----------------------------------------------------------------- */ *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family: var(--font-body); background: var(--bg-canvas); color: var(--color-primary); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } button,input,select,textarea{ font-family:inherit; border:none; outline:none; background:none; color:inherit; } h1,h2,h3,h4{ font-family: var(--font-heading); color: var(--color-primary); font-weight:600; line-height:1.25; } :focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ----------------------------------------------------------------- 4. LAYOUT HELPERS ----------------------------------------------------------------- */ .container{ width:min(1240px,92%); margin-inline:auto; } section{ padding:96px 0; } .section-header{ text-align:center; max-width:620px; margin:0 auto 52px; } .section-header h2{ font-size:clamp(30px,4vw,44px); margin-bottom:12px; } .section-header p{ color:var(--text-muted); font-size:16px; } /* ----------------------------------------------------------------- 5. BUTTONS .btn-primary — solid dark, reveals a gold gradient on hover .btn-secondary — ghost/outline button (used on dark sections) .btn-buy — full-width "Add to Cart / Order" button on product page ----------------------------------------------------------------- */ .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 36px; border-radius:var(--radius-pill); background:var(--color-primary); color:#fff; font-size:14px; font-weight:600; letter-spacing:.3px; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; box-shadow:var(--shadow-sm); transition:color var(--transition-med), transform var(--transition-fast), box-shadow var(--transition-med); } .btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg, var(--color-accent-light), var(--color-accent) 60%, var(--color-accent-dark)); opacity:0; transform:scale(1.04); transition:opacity var(--transition-med), transform var(--transition-med); } .btn-primary:hover{ color:var(--color-primary); transform:translateY(-2px); box-shadow:var(--shadow-gold); } .btn-primary:hover::before{ opacity:1; transform:scale(1); } .btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 34px; border-radius:var(--radius-pill); border:1.5px solid rgba(255,255,255,.4); color:#fff; font-weight:600; font-size:14px; transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn-secondary:hover{ background:rgba(255,255,255,.08); border-color:var(--color-accent); color:var(--color-accent); } /* Full-width commerce CTA on the product detail page */ .btn-buy{ display:flex; justify-content:center; align-items:center; gap:12px; width:100%; padding:18px; background:#25D366; color:#fff; font-size:18px; font-weight:700; border-radius:14px; text-decoration:none; transition:.35s; } .btn-buy:hover{ background:#1db954; transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,211,102,.35); } .btn-buy:active{ transform:scale(.99); } /* ----------------------------------------------------------------- 6. HEADER / NAVIGATION Sticky, translucent ivory, gold underline on hover/active. ----------------------------------------------------------------- */ .header{ position: sticky; top: 0; left: 0; z-index: 9999; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,.93); box-shadow: 0 12px 35px rgba(0,0,0,.08); transition: .35s; } .header-main-inner{ display:flex; align-items:center; gap:32px; padding:18px 0; } .logo a{ font-family:var(--font-heading); font-size:26px; font-weight:700; color:var(--color-primary); } .logo span{ color:var(--color-accent-dark); } .nav-main{ flex:1; } .nav-main ul{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; } .nav-main a{ position:relative; font-weight:600; color:#222; transition:.3s; padding:8px 0; } .nav-main a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#E5C158; transition:.35s; } .nav-main a:hover{ color:#E5C158; } .nav-main a:hover::after{ width:100%; } /* Search box in header */ .search-box{ display:flex; align-items:center; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:6px 6px 6px 18px; transition:border-color var(--transition-fast); } .search-box:focus-within{ border-color:var(--color-accent); } .search-box input{ background:none; color:var(--color-primary); font-size:13.5px; width:150px; } .search-box input::placeholder{ color:#B5AFA3; } .search-box button{ width:34px; height:34px; border-radius:50%; background:var(--color-accent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition-fast); flex-shrink:0; } .search-box button:hover{ background:var(--color-accent-dark); } /* Mobile hamburger */ .hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; width:26px; } .hamburger span{ height:2px; background:var(--color-primary); border-radius:2px; transition:var(--transition-fast); } /* Secondary category strip under main nav */ .header-categories{ border-top:1px solid var(--border-soft); background:var(--bg-surface); } .header-categories ul{ display:flex; gap:28px; padding:12px 0; overflow-x:auto; scrollbar-width:none; } .header-categories ul::-webkit-scrollbar{ display:none; } .header-categories a{ font-size:12.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; transition:color var(--transition-fast); } .header-categories a:hover,.header-categories a.active{ color:var(--color-accent-dark); } /* ----------------------------------------------------------------- 7. HERO ----------------------------------------------------------------- */ .hero{ position:relative; padding:120px 0; overflow:hidden; background:linear-gradient(135deg,#fffdf8,#faf6ed); min-height:85vh; display:flex; align-items:center; } .hero-bg-image{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.05); transition:8s linear; } .hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg,rgba(15,15,15,.35),rgba(15,15,15,.75)), radial-gradient(circle at top right,rgba(229,193,88,.22),transparent 45%); } .hero-content-wrapper{ position:relative; z-index:2; width:min(700px,92%); margin:auto; text-align:center; } .hero-badge{ display:inline-block; background:rgba(229,193,88,.14); border:1px solid rgba(229,193,88,.4); color:var(--color-accent-light); padding:9px 22px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:28px; } .hero-brand{ font-size:clamp(58px,8vw,96px); line-height:.95; font-weight:800; letter-spacing:2px; color:#fff; margin-bottom:15px; text-shadow:0 12px 35px rgba(0,0,0,.45); } .hero-sub{ font-family:var(--font-heading); font-style:italic; font-size:clamp(18px,2.4vw,26px); color:var(--color-accent); margin-bottom:16px; } .hero-desc{ font-size:18px; line-height:1.9; color:#ececec; max-width:600px; margin:auto; margin-bottom:20px; } .hero-price{ font-size:14.5px; color:#8B939A; margin-bottom:32px; } /* ----------------------------------------------------------------- 8. TRUST BAR ----------------------------------------------------------------- */ .trust{ background:var(--bg-surface); padding:52px 0; border-bottom:1px solid var(--border-soft); } .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; } .trust-item{ padding:0 20px; position:relative; } .trust-item:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:70%; width:1px; background:var(--border-soft); } .trust-number,.trust-rating{ display:block; font-family:var(--font-heading); font-size:30px; color:var(--color-accent-dark); margin-bottom:6px; } .trust-item p{ color:var(--text-muted); font-size:14px; } .trust-stars{ color:var(--color-accent); font-size:14px; letter-spacing:3px; margin-bottom:8px; } /* ----------------------------------------------------------------- 9. COLLECTIONS / CATEGORY FILTERS ----------------------------------------------------------------- */ .collections-home{ background:var(--bg-canvas); } .collection-categories{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:50px; } .cat-btn{ padding:11px 26px; border-radius:var(--radius-pill); border:1px solid var(--border-soft); background:var(--bg-surface); color:var(--color-primary); font-weight:600; font-size:13.5px; cursor:pointer; transition:all var(--transition-fast); } .cat-btn:hover{ border-color:var(--color-accent); color:var(--color-accent-dark); } .cat-btn.active{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; } /* ----------------------------------------------------------------- 10. PRODUCT GRID & CARDS Pure white surface, soft realistic shadow, matte imagery, gold price highlight, translateY(-4px) tactile hover. ----------------------------------------------------------------- */ .collection-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:32px; width:min(1240px,92%); margin-inline:auto; padding:50px 0 50px; } .collection-card{ position:relative; max-width:380px; width:100%; background:var(--bg-surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--transition-med), box-shadow var(--transition-med); } .collection-card h3{ font-size:26px; font-weight:700; color:#1A252C; line-height:1.3; margin-bottom:10px; transition:.3s; } .collection-card:hover h3{ color:var(--color-accent-dark); } .old-price{ color:#999; text-decoration:line-through; margin-right:10px; font-size:18px; } .sale-price{ color:var(--color-accent-dark); font-size:28px; font-weight:700; } .sale-badge{ position:absolute; top:18px; right:18px; background:#D4AF37; color:#fff; font-size:12px; font-weight:700; padding:8px 14px; border-radius:30px; z-index:10; box-shadow:0 10px 25px rgba(212,175,55,.35); } .collection-card:hover{ transform:translateY(-8px); box-shadow:0 30px 70px rgba(0,0,0,.14); } .collection-card img{ width:100%; height:260px; object-fit:cover; display:block; transition:transform .45s ease; } .collection-card-content{ padding:24px; } .card-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:8px; flex:1; } .collection-card:hover img{ transform:scale(1.045); } /* Quick-view icon revealed on hover */ .quick-view{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); width:46px; height:46px; border-radius:50%; background:#fff; color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:16px; opacity:0; box-shadow:var(--shadow-md); transition:opacity var(--transition-med), transform var(--transition-med); } .collection-card:hover .quick-view{ opacity:1; transform:translate(-50%,-50%) scale(1); } .card-body{ padding:22px 22px 24px; } .card-body h4{ font-size:18px; margin-bottom:8px; transition:color var(--transition-fast); } .collection-card:hover .card-body h4{ color:var(--color-accent-dark); } .card-body p{ color:var(--text-sage); font-size:12.5px; letter-spacing:.3px; text-transform:uppercase; font-weight:600; margin-bottom:14px; } .price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .price span:first-child{ font-family:var(--font-heading); font-size:20px; font-weight:700; color:var(--color-accent-dark); } .price del,.price .old-price{ color:var(--text-muted); font-size:14px; font-weight:500; text-decoration:line-through; } /* ----------------------------------------------------------------- 11. PRODUCT BADGES — Sale / New / Trending Add class="sale-badge" / "new-badge" / "trending-badge" as an absolutely-positioned child inside .collection-card. ----------------------------------------------------------------- */ .sale-badge,.new-badge,.trending-badge{ position:absolute; top:16px; z-index:2; padding:6px 14px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); } .sale-badge{ left:16px; background:var(--color-primary); color:#fff; } .new-badge{ left:16px; background:var(--color-success); color:#fff; } .trending-badge{ right:16px; background:linear-gradient(120deg, var(--color-accent-light), var(--color-accent)); color:var(--color-primary); } .sale-badge + .trending-badge, .new-badge + .trending-badge{ top:56px; } /* ----------------------------------------------------------------- 12. ROYAL / FEATURE BAND (dark editorial section) ----------------------------------------------------------------- */ .royal{ background:var(--color-primary); color:#F2EFE8; position:relative; overflow:hidden; } .royal::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 25%, rgba(229,193,88,.14), transparent 55%); } .royal-content{ position:relative; z-index:1; max-width:680px; } .royal-content h2{ color:#fff; font-size:clamp(30px,4vw,44px); margin-bottom:20px; } .royal-content > p{ color:#B7BEC3; font-size:16px; margin-bottom:36px; max-width:560px; } .royal-buttons{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:48px; } .royal-stats{ display:flex; gap:48px; flex-wrap:wrap; margin-bottom:32px; } .royal-stats .stat{ display:flex; flex-direction:column; } .stat-number{ font-family:var(--font-heading); font-size:32px; color:var(--color-accent); } .stat-label{ font-size:12.5px; color:#8B939A; margin-top:4px; } .royal-badges{ display:flex; gap:12px; flex-wrap:wrap; } .badge{ border:1px solid rgba(229,193,88,.4); color:var(--color-accent-light); padding:8px 18px; border-radius:var(--radius-pill); font-size:12px; font-weight:600; } /* ----------------------------------------------------------------- 13. TESTIMONIALS & STAR RATINGS ----------------------------------------------------------------- */ .testimonials{ background:var(--bg-surface); } .testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; margin-bottom:52px; } .testimonial-card{ background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:30px 26px; transition:transform var(--transition-fast), box-shadow var(--transition-med); } .testimonial-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); } /* Star rating — used both in .stars (reviews) and .trust-stars/.rating */ .stars,.rating{ color:var(--color-accent); font-size:13px; letter-spacing:2px; margin-bottom:12px; } .testimonial-card p{ color:var(--text-muted); font-size:14.5px; margin-bottom:14px; } .testimonial-card p strong{ color:var(--color-primary); font-size:14px; } .testimonial-card .author{ font-weight:700; font-size:14px; margin-top:12px; display:flex; align-items:center; gap:6px; } .testimonial-card .author i{ color:var(--color-accent-dark); } .testimonial-card .verified{ color:var(--color-success); font-size:12px; margin-top:4px; display:flex; align-items:center; gap:6px; } .testimonial-stats{ display:flex; justify-content:center; gap:60px; flex-wrap:wrap; text-align:center; padding-top:36px; border-top:1px solid var(--border-soft); } .testimonial-stats .stat-item .stat-number{ color:var(--color-accent-dark); } .testimonial-stats .stat-item .stat-label{ color:var(--text-muted); } /* ----------------------------------------------------------------- 14. FEATURED / PROMO BAND ----------------------------------------------------------------- */ .featured{ background:linear-gradient(135deg, var(--color-primary), var(--color-primary-soft)); color:#fff; text-align:center; } .featured-tag{ display:inline-block; color:var(--color-accent-light); font-size:13px; font-weight:700; letter-spacing:1px; margin-bottom:16px; } .featured-content h2{ color:#fff; font-size:clamp(28px,4vw,40px); margin-bottom:18px; } .featured-content p{ color:#C9CDD1; max-width:560px; margin:0 auto 32px; } .featured .btn-primary{ background:var(--color-accent); color:var(--color-primary); } .featured .btn-primary::before{ background:linear-gradient(120deg,#fff,var(--color-accent-light)); } /* ----------------------------------------------------------------- 15. FOOTER ----------------------------------------------------------------- */ .footer{ position:relative; background:var(--color-primary); color:#AEB4B8; padding:80px 0 0; overflow:hidden; } .footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--color-accent) 20%, #fff 50%, var(--color-accent) 80%, transparent ); background-size:200% 100%; animation:footerEdgeShine 6s linear infinite; } @keyframes footerEdgeShine{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); } /* ---- Signature: shimmering wordmark ---- */ .footer-brand h3{ position:relative; display:inline-block; font-size:28px; letter-spacing:.5px; margin-bottom:16px; background:linear-gradient(100deg, #fff 30%, var(--color-accent) 45%, #fff 60% ); background-size:250% 100%; background-position:200% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:wordmarkShine 5s ease-in-out infinite; } @keyframes wordmarkShine{ 0%, 20%{ background-position:200% 0; } 60%, 100%{ background-position:-50% 0; } } .footer-brand p{ font-size:14px; line-height:1.8; max-width:320px; margin-bottom:16px; color:#9EA5AA; } .footer-rating{ color:var(--color-accent); font-size:14px; letter-spacing:3px; } .footer-rating span{ display:inline-block; animation:starPulse 2.4s ease-in-out infinite; } .footer-rating span:nth-child(2){ animation-delay:.15s; } .footer-rating span:nth-child(3){ animation-delay:.3s; } .footer-rating span:nth-child(4){ animation-delay:.45s; } .footer-rating span:nth-child(5){ animation-delay:.6s; } @keyframes starPulse{ 0%, 100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.92); } } .footer-links h4{ color:#fff; font-size:14.5px; font-weight:600; letter-spacing:.3px; margin-bottom:20px; position:relative; padding-bottom:10px; } .footer-links h4::after{ content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background:var(--color-accent); transition:width var(--transition-fast); } .footer-links:hover h4::after{ width:36px; } .footer-links ul{ display:flex; flex-direction:column; gap:12px; } .footer-links a{ position:relative; display:inline-flex; align-items:center; font-size:13.5px; color:#9EA5AA; transition:color var(--transition-fast), padding-left var(--transition-fast); } .footer-links a::before{ content:"→"; position:absolute; left:-16px; opacity:0; color:var(--color-accent); transition:opacity var(--transition-fast), left var(--transition-fast); } .footer-links a:hover{ color:var(--color-accent); padding-left:16px; } .footer-links a:hover::before{ left:0; opacity:1; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px; padding:24px 0; font-size:12.5px; color:#7B8288; border-top:1px solid rgba(255,255,255,.05); } .footer-bottom p{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .footer-bottom a{ color:var(--color-accent); transition:opacity var(--transition-fast); } .footer-bottom a:hover{ opacity:.8; } .footer-domain{ color:#5F676C; } .footer-credit{ color:#7B8288; } .footer-credit a{ position:relative; color:var(--color-accent); font-weight:600; transition:opacity var(--transition-fast); } .footer-credit a:hover{ opacity:.8; } /* ========================================================== Motion respect ========================================================== */ @media (prefers-reduced-motion: reduce){ .footer::before, .footer-brand h3, .footer-rating span{ animation:none; } .footer-brand h3{ color:#fff; background:none; } } /* ========================================================== Responsive ========================================================== */ @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } .footer-brand{ grid-column:1 / -1; } .footer-brand p{ max-width:100%; } } @media (max-width:560px){ .footer{ padding:56px 0 0; } .footer-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:36px; } .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; } } .footer-credit{ display:flex; align-items:center; gap:8px; color:#7B8288; } .credit-mark{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:10px; font-weight:700; color:#7B8288; border:1px solid rgba(255,255,255,.15); border-radius:4px; transition:color var(--transition-fast), border-color var(--transition-fast); } .footer-credit:hover .credit-mark{ color:var(--color-accent); border-color:var(--color-accent); } .footer-credit a{ color:#C7CCD0; font-weight:600; letter-spacing:.4px; transition:color var(--transition-fast); } .footer-credit a:hover{ color:var(--color-accent); } /* ----------------------------------------------------------------- 16. INTERIOR PAGE BANNER (contact, blog, categories, policies) ----------------------------------------------------------------- */ .page-banner{ position:relative; background:var(--color-primary); color:#fff; text-align:center; padding:90px 0 70px; overflow:hidden; } .page-banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(229,193,88,.18), transparent 60%); } .page-banner .container{ position:relative; z-index:1; } .page-banner h1{ font-size:clamp(32px,5vw,48px); color:#fff; margin-bottom:14px; display:inline-flex; align-items:center; gap:12px; } .page-banner h1 i{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--color-accent-light),var(--color-accent)); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:16px; } .page-banner p{ font-family:var(--font-heading); font-style:italic; color:var(--color-accent-light); font-size:clamp(16px,2vw,19px); } .page-content{ padding:76px 0; } .page-content .container{ max-width:720px; } .page-content h2{ font-size:clamp(22px,3vw,27px); margin:40px 0 14px; position:relative; padding-left:18px; } .page-content h2::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark)); } .page-content > .container > h2:first-of-type ~ p:first-of-type{ font-size:18px; line-height:1.9; color:var(--color-primary); } .page-content p{ color:var(--text-muted); margin-bottom:14px; font-size:15.5px; line-height:1.85; } .page-content ul{ margin:14px 0; display:flex; flex-direction:column; gap:10px; } .page-content li{ color:var(--text-muted); font-size:15px; padding-left:20px; position:relative; } .page-content li::before{ content:"◆"; color:var(--color-accent-dark); font-size:9px; position:absolute; left:0; top:6px; } .highlight-box{ position:relative; background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:26px 28px 26px 56px; margin:32px 0; } .highlight-box::before{ content:"✦"; position:absolute; left:20px; top:26px; color:var(--color-accent-dark); font-size:18px; } .highlight-box p{ margin-bottom:0; color:var(--color-primary); } .collection-toolbar{ display:flex; align-items:center; margin-top: 6px; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid var(--border-soft); border-top:3px solid var(--color-accent); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:34px; box-shadow:var(--shadow-md); } .collection-toolbar input{ flex:1 1 240px; min-width:0; background:var(--bg-canvas) url('data:image/svg+xml;utf8,') no-repeat 16px center; border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:12px 18px 12px 44px; font-size:14px; color:var(--color-primary); transition:border-color var(--transition-fast); } .collection-toolbar input::placeholder{ color:#A5ABAF; } .collection-toolbar input:focus{ border-color:var(--color-accent); } .collection-toolbar select{ flex:0 0 auto; appearance:none; -webkit-appearance:none; background:var(--bg-canvas) linear-gradient(45deg, transparent 50%, var(--text-muted) 50%) calc(100% - 18px) center / 5px 5px no-repeat, linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) calc(100% - 13px) center / 5px 5px no-repeat; border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:12px 36px 12px 18px; font-size:14px; color:var(--color-primary); width:170px; cursor:pointer; transition:border-color var(--transition-fast); } .collection-toolbar select:focus{ border-color:var(--color-accent); } /* ----------------------------------------------------------------- 17. CONTACT PAGE ----------------------------------------------------------------- */ .contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:46px; align-items:start; } .contact-form{ background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:42px; box-shadow:var(--shadow-sm); } .contact-form h2{ font-size:25px; margin-bottom:24px; } .contact-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; } .contact-form input,.contact-form textarea{ width:100%; background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:14px 16px; font-size:14px; margin-bottom:20px; transition:border-color var(--transition-fast), background var(--transition-fast); } .contact-form textarea{ min-height:130px; resize:vertical; } .contact-form input:focus,.contact-form textarea:focus{ border-color:var(--color-accent); background:#fff; } .contact-details{ background:var(--bg-surface); border:1px solid var(--border-soft); border-top:3px solid var(--color-accent); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow-sm); } .contact-details h3{ margin-bottom:24px; font-size:21px; } .detail-item{ display:flex; gap:15px; margin-bottom:24px; } .detail-item i{ width:37px; height:37px; border-radius:var(--radius-sm); background:var(--color-primary); color:var(--color-accent-light); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; } .detail-item strong{ display:block; font-size:14.5px; margin-bottom:4px; } .detail-item p{ color:var(--text-muted); font-size:13.5px; margin:0; } /* ----------------------------------------------------------------- 18. TRACK ORDER ----------------------------------------------------------------- */ .track-box{ max-width:540px; margin:0 auto; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:42px; text-align:center; box-shadow:var(--shadow-sm); } .track-input-group{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; } .track-input-group input{ flex:1; min-width:200px; background:var(--bg-canvas); border:1px solid var(--border-soft); border-radius:var(--radius-pill); padding:13px 20px; font-size:14px; } .track-input-group input:focus{ border-color:var(--color-accent); } /* ----------------------------------------------------------------- 19. BLOG ----------------------------------------------------------------- */ .blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:30px; } .blog-card{ background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--transition-fast), box-shadow var(--transition-med); } .blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .blog-card img{ height:205px; width:100%; object-fit:cover; } .blog-thumb{ position:relative; height:205px; width:100%; display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--color-primary); overflow:hidden; } .blog-thumb::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%); } .blog-thumb i{ position:relative; z-index:1; transition:transform var(--transition-med); } .blog-card:hover .blog-thumb i{ transform:scale(1.12) rotate(-4deg); } .blog-thumb-style{ background:linear-gradient(135deg,#F3DFA0,#E5C158); } .blog-thumb-care{ background:linear-gradient(135deg,#DCE9E0,#8A9A86); color:#fff; } .blog-thumb-trend{ background:linear-gradient(135deg,#1A252C,#2B3941); color:var(--color-accent); } .blog-thumb-culture{ background:linear-gradient(135deg,#F3DFA0,#C9A23F); } .blog-body{ padding:24px; } .blog-tag{ display:inline-block; background:rgba(229,193,88,.14); color:var(--color-accent-dark); font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:5px 12px; border-radius:var(--radius-pill); margin-bottom:12px; } .blog-body h3{ font-size:18px; margin-bottom:8px; line-height:1.4; } .blog-body p{ color:var(--text-muted); font-size:14px; margin-bottom:12px; } .blog-body a{ color:var(--color-accent-dark); font-weight:700; font-size:13.5px; transition:gap var(--transition-fast); display:inline-flex; align-items:center; gap:4px; } .blog-body a:hover{ gap:8px; } /* ----------------------------------------------------------------- 20. PRODUCT DETAIL PAGE ----------------------------------------------------------------- */ .product-page{ padding:56px 0 96px; background:var(--bg-canvas); } .product-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; } .back-btn{ display:inline-flex; align-items:center; gap:8px; color:var(--color-primary); font-size:13.5px; font-weight:600; transition:color var(--transition-fast); } .back-btn:hover{ color:var(--color-accent-dark); } .product-top .logo a{ font-size:21px; } .single-product{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:start; margin-top:36px; } .product-gallery{ position:sticky; top:120px; } .main-image{ width:100%; height:650px; object-fit:cover; border-radius:20px; background:#fff; border:1px solid #eee; transition:.35s; } .main-image:hover{ transform:scale(1.02); } .thumbnail-row{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; } .thumb{ width:90px; height:90px; object-fit:cover; border-radius:12px; cursor:pointer; border:2px solid transparent; transition:.3s; } .thumb:hover{ border-color:#D4AF37; transform:translateY(-3px); } .product-info{ display:flex; flex-direction:column; gap:18px; } .product-category{ display:inline-block; background:#f8f4e7; color:#b48b18; padding:8px 18px; border-radius:50px; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; width:max-content; } .product-title{ font-size:48px; font-weight:800; line-height:1.2; color:#222; } .rating{ display:flex; align-items:center; gap:12px; font-size:16px; color:#ffc107; } .rating span{ color:#777; font-size:14px; } .product-price{ display:flex; align-items:center; gap:15px; flex-wrap:wrap; } .sale-price{ font-size:42px; font-weight:800; color:#222; } .old-price{ font-size:24px; color:#999; text-decoration:line-through; } .discount-badge{ background:#D4AF37; color:#fff; padding:8px 14px; border-radius:40px; font-size:14px; font-weight:700; } .sale-price{ font-family:var(--font-heading); font-size:32px; color:var(--color-accent-dark); font-weight:700; } .old-price{ font-size:17px; color:var(--text-muted); text-decoration:line-through; } .discount-badge{ background:var(--color-primary); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); } .stock-badge{ display:inline-flex; align-items:center; gap:10px; background:#eef8ef; padding:12px 18px; border-radius:40px; color:#138a36; font-weight:600; width:max-content; } .product-description{ font-size:17px; line-height:1.9; color:#555; } .product-extra{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px; } .product-extra div{ background:#fafafa; padding:20px; border-radius:14px; text-align:center; font-weight:600; transition:.3s; } .product-extra div:hover{ background:#fff6df; transform:translateY(-4px); } .qty-box{ display:inline-flex; align-items:center; border:1px solid var(--border-soft); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:20px; } .qty-box button{ width:42px; height:42px; font-size:17px; font-weight:700; cursor:pointer; transition:background var(--transition-fast); } .qty-box button:hover{ background:var(--bg-canvas); color:var(--color-accent-dark); } .qty-box input{ width:50px; text-align:center; font-weight:700; font-size:15px; } .loading{ text-align:center; padding:90px 0; color:var(--text-muted); font-size:15px; } /* ----------------------------------------------------------------- 21. RELATED PRODUCTS ----------------------------------------------------------------- */ .related-products{ background:var(--bg-surface); padding:84px 0; } .related-products h2{ text-align:center; font-size:clamp(25px,3vw,34px); margin-bottom:44px; } /* ----------------------------------------------------------------- 22. RESPONSIVE — Tablet & Mobile ----------------------------------------------------------------- */ @media(max-width:1100px){ .single-product{ grid-template-columns:1fr; } .product-gallery{ position:relative; top:auto; } .main-image{ height:420px; } .contact-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:900px){ section{ padding:64px 0; } .hamburger{ display:flex; } .nav-main{ position:fixed; top:0; right:-100%; width:min(300px,80%); height:100vh; background:var(--bg-surface); padding:96px 28px 28px; box-shadow:var(--shadow-lg); transition:right var(--transition-med); z-index:1100; } .nav-main.open{ right:0; } .nav-main ul{ flex-direction:column; gap:22px; } .search-box{ display:none; } .trust-grid{ grid-template-columns:1fr; gap:24px; } .trust-item:not(:last-child)::after{ display:none; } .royal-stats{ gap:30px; } .testimonial-stats{ gap:34px; } } @media(max-width:640px){ .hero{ min-height:74vh; } .footer-grid{ grid-template-columns:1fr; gap:32px; } .product-info{ padding:26px; } .product-extra{ grid-template-columns:1fr 1fr; } .collection-toolbar{ flex-direction:column; } .main-image{ height:320px; } .collection-grid{ grid-template-columns:1fr; } } @media(max-width:480px){ .collection-grid{ grid-template-columns:1fr; gap:18px; } .collection-card img{ height:250px; } .card-body{ padding:16px; } .card-body h4{ font-size:20px; line-height:1.3; } .price{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .hero-brand{ font-size:38px; } } .active-thumb{ border:2px solid #D4AF37 !important; } .in-stock{ background:#eef8ef; color:#1f8f46; } .out-stock{ background:#ffe9e9; color:#d62828; } .qty-box button:disabled{ opacity:.45; cursor:not-allowed; } .disabled-btn{ background:#999 !important; pointer-events:none; cursor:not-allowed; opacity:.75; } /* Loader */ .loader{ position:fixed; inset:0; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:99999; transition:.4s; } .loader.hide{ opacity:0; visibility:hidden; } .loader-ring{ width:70px; height:70px; border:5px solid #eee; border-top:5px solid #D4AF37; border-radius:50%; animation:spin 1s linear infinite; } .loader p{ margin-top:20px; font-size:16px; color:#555; font-weight:600; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ========================== SCROLL TO TOP ========================== */ .scroll-top{ position:fixed; right:30px; bottom:30px; width:55px; height:55px; border:none; border-radius:50%; background:linear-gradient(135deg,#D4AF37,#b8860b); color:#fff; font-size:22px; font-weight:bold; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(20px); transition:.35s; box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:999; } .scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .scroll-top:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(212,175,55,.45); } /* ========================== TOAST NOTIFICATION ========================== */ .toast{ position:fixed; top:30px; right:30px; background:#1A252C; color:#fff; padding:16px 22px; border-radius:12px; font-size:15px; font-weight:600; box-shadow:0 15px 35px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateX(120px); transition:.35s; z-index:99999; min-width:260px; } .toast.show{ opacity:1; visibility:visible; transform:translateX(0); } .toast.success{ border-left:5px solid #22c55e; } .toast.error{ border-left:5px solid #ef4444; } .toast.warning{ border-left:5px solid #f59e0b; } /* ========================== 404 PAGE ========================== */ .error-page{ min-height:100vh; display:flex; justify-content:center; align-items:center; padding:40px; background:#faf8f2; } .error-box{ background:#fff; padding:60px; border-radius:20px; text-align:center; box-shadow:0 15px 40px rgba(0,0,0,.08); max-width:600px; width:100%; } .error-box h1{ font-size:120px; color:#D4AF37; margin-bottom:10px; line-height:1; } .error-box h2{ font-size:36px; margin-bottom:15px; color:#222; } .error-box p{ color:#666; font-size:17px; line-height:1.8; margin-bottom:30px; } .error-box .btn-primary{ display:inline-block; padding:15px 35px; background:#D4AF37; color:#fff; border-radius:12px; text-decoration:none; font-weight:600; transition:.3s; } .error-box .btn-primary:hover{ background:#b98e18; transform:translateY(-3px); } .load-more-wrapper{ display:flex; justify-content:center; margin:50px 0; } #loadMoreBtn{ width:220px; } #loadMoreBtn:disabled{ opacity:.5; cursor:not-allowed; }