/* ============================================================ Vishnupriya Arts — premium design system Fonts: Marcellus (headings) + Inter (body) — loaded in Brand: Lotus Plum (from the lotus logo) on warm ivory, with antique gold as a decorative metallic garnish and deep aubergine dark surfaces. Full spec: THEME.md (project root). ============================================================ */ :root { /* Brand — Lotus Plum (sampled from the logo petals) */ --brand-bright: #d84f8d; --brand: #ad1457; --brand-deep: #7c1a49; --brand-blush: #fbeff5; --brand-pale: #f5d9e6; /* Metallic garnish — Antique Gold (stars, hairlines, dark-surface details) */ --gold: #c6982b; --gold-bright: #e9be4b; --gold-pale: #f7e9c4; --gold-deep: #a67c1b; /* Neutrals — ivory page, plum-tinted ink */ --cream: #faf6ef; --cream-deep: #f3ecdf; --white: #ffffff; --ink: #1f141b; --ink-soft: #3a2733; --muted: #7a6a72; --line: #ecdfe3; /* Dark surfaces — aubergine */ --dark: #2a1420; --dark-2: #200f19; /* Semantic */ --red: #c62828; --green: #1f9d55; /* Legacy aliases — old pages keep working, new code uses --brand-* */ --blue: var(--brand-pale); --blue-soft: var(--brand-blush); --blue-deep: var(--brand); --maroon: var(--brand-deep); --navy: var(--dark); --navy-2: var(--dark-2); /* System */ --page: 1200px; --radius: 18px; --radius-sm: 10px; --radius-btn: 8px; --shadow-sm: 0 2px 10px rgba(31, 20, 27, .06); --shadow: 0 10px 30px rgba(31, 20, 27, .10); --shadow-lift: 0 18px 44px rgba(31, 20, 27, .16); --ease: cubic-bezier(.22, .61, .36, 1); --header-h: 82px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; color: var(--ink); background: var(--cream); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; line-height: 1.18; letter-spacing: .2px; color: var(--ink); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--brand-pale); } .wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; } .section { padding: 88px 0; } .section-tight { padding: 56px 0; } .center { text-align: center; } .muted { color: var(--muted); } .hidden { display: none !important; } /* ---------- Reveal on scroll ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; } [data-reveal][data-delay="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: .3px; padding: 14px 30px; border-radius: var(--radius-btn); border: 1.5px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .btn-sm { padding: 10px 20px; font-size: .88rem; } .btn-block { width: 100%; } .btn-brand, .btn-gold { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); color: #fff; box-shadow: 0 4px 14px rgba(173, 20, 87, .3); } .btn-brand:hover, .btn-gold:hover { box-shadow: 0 10px 26px rgba(173, 20, 87, .38); } .btn-dark { background: var(--ink); color: var(--white); } .btn-dark:hover { background: var(--ink-soft); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--ink); color: var(--white); } .btn-light { background: var(--white); color: var(--ink); border-color: var(--line); } .btn-light:hover { border-color: var(--brand); color: var(--brand); } .btn-wa { background: #25d366; color: #fff; } .btn-wa:hover { background: #1fbd5a; } /* ---------- Announcement bar ---------- */ .announce { background: linear-gradient(90deg, var(--dark-2), #3a1c2e 50%, var(--dark-2)); color: var(--gold-bright); text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; padding: 10px 16px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(250, 246, 239, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background .3s; } .site-header.scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(22, 19, 15, .07); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); } .nav .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav .logo img { height: 50px; width: auto; } .nav .logo span { font-family: 'Marcellus', serif; font-size: 1.3rem; letter-spacing: .5px; line-height: 1.1; } .nav .logo span em { font-style: normal; color: var(--brand); } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { font-size: .92rem; font-weight: 500; color: var(--ink-soft); padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s; } .nav-links a:hover { color: var(--ink); background: rgba(173, 20, 87, .06); } .nav-links a.active { color: var(--brand); background: rgba(173, 20, 87, .08); } /* dropdown groups */ .nav-item { position: relative; } .nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 500; color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: color .2s, background .2s; } .nav-item:hover .nav-drop-btn, .nav-drop-btn:focus-visible { color: var(--ink); background: rgba(173, 20, 87, .06); } .nav-drop-btn.active { color: var(--brand); background: rgba(173, 20, 87, .08); } .nav-chev { width: 13px; height: 13px; transition: transform .25s var(--ease); opacity: .7; } .nav-item:hover .nav-chev { transform: rotate(180deg); } .nav-drop { position: absolute; top: 100%; left: 0; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; } .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); } .nav-drop-inner { min-width: 194px; display: flex; flex-direction: column; gap: 2px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; } .nav-drop a { white-space: nowrap; font-size: .9rem; } .nav-actions { display: flex; align-items: center; gap: 12px; } .cart-link { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); transition: border-color .2s, transform .2s; } .cart-link:hover { border-color: var(--brand); transform: translateY(-2px); } .cart-link svg { width: 21px; height: 21px; } .cart-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--maroon); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 20px; display: grid; place-items: center; border: 2px solid var(--cream); transform: scale(0); transition: transform .25s var(--ease); } .cart-count.show { transform: scale(1); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; padding: 0 11px; } .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1040px) { .nav-links { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--white); flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .nav-links.open { max-height: 82vh; overflow-y: auto; } .nav-links a { padding: 15px 26px; border-radius: 0; border-top: 1px solid var(--line); } .nav-toggle { display: flex; } .nav-cta { display: none; } /* dropdowns collapse into inline accordions on mobile */ .nav-item { border-top: 1px solid var(--line); } .nav-drop-btn { width: 100%; justify-content: space-between; padding: 15px 26px; border-radius: 0; font-size: 1rem; } .nav-chev { width: 16px; height: 16px; } .nav-item.open .nav-chev { transform: rotate(180deg); } .nav-drop { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .nav-item.open .nav-drop { max-height: 340px; } .nav-drop-inner { min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: var(--cream); gap: 0; } .nav-drop a { padding: 13px 26px 13px 40px; border-top: 1px solid var(--line); font-size: .94rem; } } /* ---------- Eyebrow / section headings ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); letter-spacing: 3.5px; text-transform: uppercase; font-size: .74rem; font-weight: 700; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); } .center .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--gold); } .sec-head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .sec-head .eyebrow { justify-content: center; } .sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 12px; } .sec-head p { color: var(--muted); font-size: 1.02rem; } /* ---------- Hero (homepage) ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 85% 10%, rgba(216, 79, 141, .12), transparent 60%), radial-gradient(700px 480px at 8% 90%, rgba(233, 190, 75, .14), transparent 55%), var(--cream); padding: 84px 0 96px; } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); margin-bottom: 20px; } .hero h1 .accent { color: var(--brand); font-style: italic; } .hero .lead { font-size: 1.1rem; color: var(--muted); max-width: 33em; margin-bottom: 34px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 40px; margin-top: 46px; flex-wrap: wrap; } .hero-stats .stat b { display: block; font-family: 'Marcellus', serif; font-size: 1.75rem; color: var(--ink); line-height: 1.2; } .hero-stats .stat span { font-size: .85rem; color: var(--muted); } .hero-visual { position: relative; } .hero-visual .frame { position: relative; border-radius: 200px 200px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); border: 6px solid var(--white); } .hero-visual .frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(198, 152, 43, .5); pointer-events: none; } .hero-visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .float-card { position: absolute; background: rgba(255, 255, 255, .95); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 13px 18px; display: flex; align-items: center; gap: 12px; font-size: .85rem; font-weight: 600; } .float-card .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-blush); color: var(--brand); font-size: 1.1rem; } .float-card .ic svg { width: 19px; height: 19px; } .float-card small { display: block; font-weight: 400; color: var(--muted); } .fc-1 { top: 8%; left: -30px; animation: floaty 5s ease-in-out infinite; } .fc-2 { bottom: 10%; right: -24px; animation: floaty 5s ease-in-out infinite .8s; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .fc-1, .fc-2 { animation: none; } } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: center; } .hero .lead { margin-inline: auto; } .hero-ctas, .hero-stats { justify-content: center; } .hero-visual { max-width: 420px; margin: 0 auto; } .fc-1 { left: -8px; } .fc-2 { right: -8px; } } /* ---------- Trust strip ---------- */ .trust-strip { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 0; } .trust-item { display: flex; align-items: center; gap: 15px; } .trust-item .ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-deep); font-size: 1.35rem; } .trust-item .ic svg { width: 22px; height: 22px; } .trust-item b { display: block; font-size: .95rem; line-height: 1.35; } .trust-item span { font-size: .82rem; color: var(--muted); } @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } } /* ---------- Product grid & cards ---------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1020px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .grid, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 480px) { .grid, .grid-3 { grid-template-columns: 1fr; } } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--brand-pale); } .card .thumb { position: relative; aspect-ratio: 1/1; background: var(--cream-deep); overflow: hidden; display: block; } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card:hover .thumb img { transform: scale(1.07); } .card .body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; } .card .tag { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-soft); padding: 4px 11px; border-radius: 40px; margin-bottom: 10px; } .card h3 { font-size: 1.12rem; margin-bottom: 4px; } .card h3 a:hover { color: var(--brand); } .card .meta { font-size: .85rem; color: var(--muted); } .card .price { margin-top: auto; display: flex; align-items: baseline; gap: 10px; padding-top: 16px; } .card .price .now { font-size: 1.18rem; font-weight: 700; } .card .price .was { color: var(--muted); text-decoration: line-through; font-size: .9rem; } .card .price .off { font-size: .78rem; font-weight: 700; color: var(--maroon); } .card-actions { display: flex; gap: 8px; margin-top: 16px; } .card-actions .btn { flex: 1; padding: 11px 12px; } .badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--ink); color: var(--gold-bright); font-size: .68rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 12px; border-radius: 40px; } .badge.premium { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: var(--ink); } /* ---------- Filter chips (shop) ---------- */ .filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; } .chip { font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 600; padding: 10px 22px; border-radius: 40px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: all .2s var(--ease); } .chip:hover { border-color: var(--brand); color: var(--brand); } .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---------- Split band (image + text) ---------- */ .band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } } .split .img-stack { position: relative; } .split .img-stack img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; } .split .img-stack::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1.5px solid var(--gold); border-radius: var(--radius); z-index: -1; opacity: .55; } .prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 18px; } .prose p { margin-bottom: 15px; color: var(--muted); } .prose ul.checks { list-style: none; margin: 22px 0; } .prose ul.checks li { padding: 8px 0 8px 34px; position: relative; color: var(--ink-soft); font-weight: 500; } .prose ul.checks li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-blush); color: var(--brand); font-size: .78rem; font-weight: 700; display: grid; place-items: center; } /* ---------- Product detail (PDP) ---------- */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } @media (max-width: 860px) { .pdp { grid-template-columns: 1fr; gap: 32px; } } .gallery-main { border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); } .gallery-main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .gallery-thumbs img { width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--line); cursor: pointer; opacity: .75; transition: border-color .2s, opacity .2s, transform .2s; } .gallery-thumbs img:hover { opacity: 1; transform: translateY(-2px); } .gallery-thumbs img.active { border-color: var(--brand); opacity: 1; } .pdp h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; } .pdp .price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 20px; } .pdp .price-row .now { font-size: 2rem; font-weight: 700; } .pdp .price-row .was { color: var(--muted); text-decoration: line-through; font-size: 1.1rem; } .pdp .save { background: var(--maroon); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .5px; padding: 5px 13px; border-radius: 40px; } .pdp .stars { color: var(--gold); letter-spacing: 2px; font-size: .95rem; } .pdp .stars span { color: var(--muted); letter-spacing: 0; font-size: .85rem; margin-left: 6px; } .pdp .desc { color: var(--muted); } .pdp ul.features { margin: 22px 0; list-style: none; } .pdp ul.features li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px dashed var(--line); font-size: .95rem; } .pdp ul.features li::before { content: "✦"; color: var(--gold); position: absolute; left: 2px; } .pdp .note { background: var(--blue-soft); border-left: 3px solid var(--blue-deep); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 13px 18px; font-size: .9rem; margin-top: 18px; color: var(--ink-soft); } .buybox { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); } .buybox .qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .buybox .qty-row label { font-weight: 600; font-size: .9rem; } .buybox .buy-btns { display: flex; gap: 12px; flex-wrap: wrap; } .buybox .buy-btns .btn { flex: 1; min-width: 180px; } .buybox .assurance { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; } .buybox .assurance span { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .buybox .assurance b { color: var(--brand); } .buybox .wa-alt { margin-top: 16px; font-size: .88rem; } .buybox .wa-alt a { color: var(--green); font-weight: 600; } /* quantity stepper */ .qty-ctrl { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-btn); overflow: hidden; background: var(--white); } .qty-ctrl button { width: 40px; height: 44px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--ink); transition: background .2s; } .qty-ctrl button:hover { background: var(--cream-deep); } .qty-ctrl input { width: 46px; height: 44px; border: 0; text-align: center; font-family: 'Inter'; font-size: 1rem; font-weight: 600; background: transparent; -moz-appearance: textfield; } .qty-ctrl input::-webkit-outer-spin-button, .qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- Process / story ---------- */ .process { background: var(--white); border-top: 1px solid var(--line); } .story-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .story-row .txt { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; } .story-row:nth-child(odd) .txt { background: var(--blue-soft); } .story-row:nth-child(even) .txt { background: var(--cream); } .story-row .step { font-family: 'Marcellus', serif; font-size: 3rem; color: transparent; -webkit-text-stroke: 1px var(--brand-bright); line-height: 1; margin-bottom: 16px; } .story-row .txt h3 { font-size: 1.65rem; margin-bottom: 14px; } .story-row .txt p { color: var(--muted); max-width: 46em; } .story-row .pic { min-height: 380px; background-size: cover; background-position: center; } .story-row:nth-child(even) .txt { order: 2; } .story-row:nth-child(even) .pic { order: 1; } /* Contained, rounded story panel — keeps the rows inside the page gutter instead of running full-bleed to the viewport edges. */ .story-panels { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .story-panels .story-row + .story-row { border-top: 1px solid var(--line); } /* Wrapping the rows shifts their nth-child parity by one, so re-map it here to preserve the alternation (row 1 keeps its image on the left). */ .story-panels .story-row:nth-child(odd) .txt { background: var(--cream); order: 2; } .story-panels .story-row:nth-child(odd) .pic { order: 1; } .story-panels .story-row:nth-child(even) .txt { background: var(--blue-soft); order: 0; } .story-panels .story-row:nth-child(even) .pic { order: 0; } @media (max-width: 860px) { .story-row { grid-template-columns: 1fr; } .story-row .txt { padding: 44px 28px; order: 2 !important; } .story-row .pic { order: 1 !important; min-height: 260px; } .story-panels { border-radius: var(--radius-sm); } } /* ---------- Testimonials ---------- */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } } .testi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .testi:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .testi .stars { color: var(--gold); letter-spacing: 3px; margin-bottom: 14px; font-size: .95rem; } .testi p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 20px; } .testi .who { display: flex; align-items: center; gap: 13px; } .testi .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-pale), var(--gold-pale)); display: grid; place-items: center; font-family: 'Marcellus', serif; font-size: 1.05rem; color: var(--brand-deep); border: 1px solid var(--line); } .testi .who b { display: block; font-size: .92rem; line-height: 1.3; } .testi .who span { font-size: .8rem; color: var(--muted); } /* ---------- FAQ ---------- */ .faq { max-width: 800px; margin: 0 auto; } .faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 24px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; } .faq details[open] { border-color: var(--brand); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; padding: 19px 0; font-family: 'Marcellus', serif; font-size: 1.13rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-blush); color: var(--brand); display: grid; place-items: center; font-size: 1.15rem; transition: transform .25s var(--ease); } .faq details[open] summary::after { content: "–"; transform: rotate(180deg); } .faq details p { padding: 0 0 20px; color: var(--muted); font-size: .95rem; } /* ---------- CTA band ---------- */ .cta-band { background: radial-gradient(700px 300px at 15% 0%, rgba(233, 190, 75, .12), transparent 60%), radial-gradient(600px 320px at 90% 100%, rgba(216, 79, 141, .16), transparent 60%), var(--dark); color: #f0e5ec; text-align: center; padding: 84px 24px; } .cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 14px; } .cta-band p { color: #c4a9b7; max-width: 38em; margin: 0 auto 32px; } .cta-band .eyebrow { justify-content: center; color: var(--gold-bright); } .cta-band .eyebrow::before, .cta-band .eyebrow::after { background: var(--gold-bright); } .cta-band .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .5); } .cta-band .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- Page hero (interior pages) ---------- */ .page-hero { position: relative; overflow: hidden; text-align: center; padding: 72px 0 64px; background: radial-gradient(700px 340px at 50% -40%, rgba(233, 190, 75, .14), transparent 70%), radial-gradient(900px 400px at 50% 130%, rgba(216, 79, 141, .12), transparent 65%), var(--cream); border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 12px; } .page-hero .lead { color: var(--muted); max-width: 44em; margin: 0 auto; font-size: 1.04rem; } .page-hero .eyebrow { justify-content: center; } .page-hero .post-meta { color: var(--muted); font-size: .82rem; letter-spacing: .5px; margin-top: 14px; text-transform: uppercase; } .breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 18px; letter-spacing: .4px; } .breadcrumb a:hover { color: var(--brand); } .breadcrumb .sep { margin: 0 8px; color: var(--brand-bright); } /* ---------- Service / info cards ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } } .svc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-pale); } .svc .ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-blush); color: var(--brand); font-size: 1.5rem; margin-bottom: 20px; } .svc .ic svg { width: 24px; height: 24px; } .svc h3 { font-size: 1.3rem; margin-bottom: 12px; } .svc ul { list-style: none; } .svc ul li { padding: 9px 0 9px 26px; position: relative; font-size: .93rem; color: var(--ink-soft); border-bottom: 1px dashed var(--line); } .svc ul li:last-child { border-bottom: 0; } .svc ul li::before { content: "✦"; color: var(--gold); position: absolute; left: 0; font-size: .8rem; top: 11px; } .svc ul li b { display: block; } .svc ul li span { color: var(--muted); font-size: .87rem; } .svc > p { color: var(--muted); font-size: .95rem; } /* ---------- Feature strip (dark) ---------- */ .features-strip { background: var(--dark); color: #fff; } .features-strip .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; } .features-strip .grid4 .ic { font-size: 1.6rem; margin-bottom: 12px; color: var(--gold-bright); } .features-strip .grid4 .ic svg { width: 30px; height: 30px; margin: 0 auto; } .features-strip .grid4 h4 { color: var(--gold-bright); font-size: 1.08rem; margin-bottom: 8px; } .features-strip .grid4 p { color: #b596a6; font-size: .89rem; } @media (max-width: 820px) { .features-strip .grid4 { grid-template-columns: repeat(2, 1fr); } } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card, .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-sm); } .contact-card h2, .form-card h2 { font-size: 1.6rem; margin-bottom: 22px; } .info-line { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; } .info-line .ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-blush); color: var(--brand); font-size: 1.15rem; } .info-line .ic svg { width: 20px; height: 20px; } .info-line b { display: block; font-size: .93rem; } .info-line .muted { font-size: .9rem; word-break: break-word; } /* ---------- Forms ---------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; color: var(--ink-soft); } .field input, .field textarea, .field select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; font-size: .95rem; background: var(--cream); color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); background: var(--white); box-shadow: 0 0 0 4px rgba(173, 20, 87, .1); } .field.err input, .field.err select, .field.err textarea { border-color: var(--red); background: #fff5f5; } .field .field-err { display: none; color: var(--red); font-size: .78rem; margin-top: 5px; } .field.err .field-err { display: block; } .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } @media (max-width: 520px) { .form-grid2 { grid-template-columns: 1fr; } } /* ---------- Gallery editorial band (devotional context) ---------- */ .g-band { position: relative; padding: 104px 24px; text-align: center; overflow: hidden; background-size: cover; background-position: center; color: #f2e7ee; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .g-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 15, 25, .84), rgba(32, 15, 25, .9)); } .g-band .wrap { position: relative; z-index: 1; max-width: 780px; } .g-band .eyebrow { justify-content: center; color: var(--gold-bright); } .g-band .eyebrow::before, .g-band .eyebrow::after { background: var(--gold-bright); } .g-band h2 { color: #fff; font-size: clamp(1.8rem, 3.8vw, 2.5rem); margin-bottom: 16px; } .g-band p { color: #d9c3d0; font-size: 1.03rem; } .g-band p + p { margin-top: 15px; } /* small caption below a gallery figure */ .masonry .m-item .m-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px 16px 13px; font-size: .8rem; font-weight: 500; color: #fff; letter-spacing: .2px; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .masonry .m-item:hover .m-cap { opacity: 1; transform: translateY(0); } /* ---------- Gallery masonry + lightbox ---------- */ .masonry { columns: 3 280px; column-gap: 18px; } .masonry .m-item { position: relative; display: block; margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); break-inside: avoid; cursor: zoom-in; } .masonry .m-item img { width: 100%; transition: transform .6s var(--ease); } .masonry .m-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(22, 19, 15, .45)); opacity: 0; transition: opacity .3s; } .masonry .m-item:hover::after { opacity: 1; } .masonry .m-item:hover img { transform: scale(1.05); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(16, 13, 10, .93); display: none; align-items: center; justify-content: center; padding: 40px; } .lightbox.open { display: flex; } .lightbox img { max-width: min(92vw, 1000px); max-height: 84vh; border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .lightbox button { position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: background .2s; } .lightbox button:hover { background: rgba(255, 255, 255, .22); } .lightbox .lb-close { top: 26px; right: 26px; } .lightbox .lb-prev { left: 26px; top: 50%; transform: translateY(-50%); } .lightbox .lb-next { right: 26px; top: 50%; transform: translateY(-50%); } /* ---------- Blog / articles ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 820px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .blog-card .pic { aspect-ratio: 16/10; background-size: cover; background-position: center; display: block; } .blog-card .b { padding: 22px; display: flex; flex-direction: column; flex: 1; } .blog-card .date { color: var(--muted); font-size: .78rem; letter-spacing: .5px; text-transform: uppercase; } .blog-card h3 { font-size: 1.22rem; margin: 8px 0 10px; } .blog-card h3 a:hover { color: var(--brand); } .blog-card .b > p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; } .blog-card .read { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); } .blog-card:hover .read { gap: 11px; } .article-hero { text-align: center; padding: 64px 0 44px; } .article-hero .post-meta { color: var(--muted); font-size: .85rem; letter-spacing: .5px; margin-bottom: 16px; text-transform: uppercase; } .article-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 20ch; margin: 0 auto 18px; } .article-hero .lead { color: var(--muted); max-width: 44em; margin: 0 auto; font-size: 1.08rem; } .article-cover { max-width: 960px; margin: 0 auto 8px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .article-cover img { width: 100%; aspect-ratio: 16/8; object-fit: cover; } .article-body { max-width: 760px; margin: 0 auto; } .article-body p { color: var(--ink-soft); margin-bottom: 20px; font-size: 1.05rem; line-height: 1.85; } .article-body h2 { font-size: 1.8rem; margin: 40px 0 16px; } .article-body h3 { font-size: 1.35rem; margin: 30px 0 12px; } .article-body ul, .article-body ol { margin: 0 0 20px 4px; padding-left: 24px; color: var(--ink-soft); } .article-body li { margin-bottom: 10px; line-height: 1.7; } .article-body blockquote { margin: 28px 0; padding: 20px 26px; background: var(--blue-soft); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: 'Marcellus', serif; font-size: 1.25rem; color: var(--ink); } .article-body img { border-radius: var(--radius); margin: 26px 0; box-shadow: var(--shadow-sm); } .article-body a { color: var(--maroon); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; } .article-tags .tag { background: var(--brand-blush); color: var(--brand); font-size: .78rem; font-weight: 700; padding: 5px 14px; border-radius: 40px; } .article-share { display: flex; align-items: center; gap: 12px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); font-size: .9rem; } .article-share a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: all .2s; } .article-share a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } /* ---------- Cart page ---------- */ .cart-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 36px; align-items: start; } @media (max-width: 880px) { .cart-grid { grid-template-columns: 1fr; } } .cart-items { display: flex; flex-direction: column; gap: 16px; } .cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .cart-item .ci-thumb { width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream-deep); } .cart-item .ci-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-item .ci-info h4 { font-size: 1.05rem; margin-bottom: 4px; } .cart-item .ci-info .ci-meta { font-size: .82rem; color: var(--muted); margin-bottom: 10px; } .cart-item .ci-info .ci-price { font-weight: 700; } .cart-item .ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .cart-item .ci-line { font-weight: 700; font-size: 1.05rem; } .cart-item .ci-remove { background: none; border: 0; color: var(--muted); font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .2s; } .cart-item .ci-remove:hover { color: var(--red); } @media (max-width: 520px) { .cart-item { grid-template-columns: 72px 1fr; } .cart-item .ci-thumb { width: 72px; height: 72px; } .cart-item .ci-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } } .summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: sticky; top: calc(var(--header-h) + 18px); } .summary h3 { font-size: 1.3rem; margin-bottom: 18px; } .summary-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: .95rem; color: var(--ink-soft); } .summary-line.muted { color: var(--muted); font-size: .88rem; } .summary-line.free { color: var(--green); font-weight: 600; } .summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .summary-total .lbl { font-family: 'Marcellus', serif; font-size: 1.2rem; } .summary-total .amt { font-size: 1.5rem; font-weight: 700; } .coupon-row { display: flex; gap: 8px; margin: 16px 0; } .coupon-row input { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-btn); font-family: 'Inter'; font-size: .9rem; background: var(--cream); } .coupon-row input:focus { outline: none; border-color: var(--brand); background: var(--white); } .coupon-note { font-size: .82rem; margin-top: -6px; margin-bottom: 10px; } .coupon-note.ok { color: var(--green); } .coupon-note.bad { color: var(--red); } .ship-hint { font-size: .82rem; color: var(--muted); background: var(--blue-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin: 14px 0; } .empty-state { text-align: center; padding: 60px 20px; } .empty-state .ic { font-size: 3rem; margin-bottom: 18px; } .empty-state h2 { font-size: 1.7rem; margin-bottom: 10px; } .empty-state p { color: var(--muted); margin-bottom: 26px; } /* ---------- Checkout ---------- */ .checkout-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } } .checkout-main .co-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; margin-bottom: 24px; } .checkout-main .co-card h3 { font-size: 1.3rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .checkout-main .co-card .co-step { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-blush); color: var(--brand); font-size: .85rem; font-weight: 700; display: grid; place-items: center; font-family: 'Inter'; } .checkout-main .co-card .co-hint { color: var(--muted); font-size: .88rem; margin-bottom: 20px; } .pay-methods { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .pay-method { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s, background .2s; } .pay-method:hover { border-color: var(--brand); } .pay-method.sel { border-color: var(--brand); background: var(--brand-blush); } .pay-method input { accent-color: var(--brand); width: 18px; height: 18px; } .pay-method .pm-body b { display: block; font-size: .95rem; } .pay-method .pm-body span { font-size: .82rem; color: var(--muted); } .pay-method .pm-logo { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--blue-deep); } .co-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: sticky; top: calc(var(--header-h) + 18px); } .co-summary h3 { font-size: 1.25rem; margin-bottom: 18px; } .co-line { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); } .co-line .co-th { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--cream-deep); flex-shrink: 0; } .co-line .co-th img { width: 100%; height: 100%; object-fit: cover; } .co-line .co-nm { flex: 1; font-size: .88rem; } .co-line .co-nm span { display: block; color: var(--muted); font-size: .78rem; } .co-line .co-amt { font-weight: 700; font-size: .9rem; } .co-success { text-align: center; max-width: 620px; margin: 0 auto; padding: 40px 20px; } .co-success .tick { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 24px; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 2.4rem; box-shadow: 0 10px 30px rgba(31, 157, 85, .4); } .co-success h1 { font-size: 2.2rem; margin-bottom: 12px; } .co-success p { color: var(--muted); margin-bottom: 8px; } .co-success .order-ref { display: inline-block; background: var(--brand-blush); color: var(--brand-deep); font-weight: 700; padding: 8px 18px; border-radius: 40px; margin: 14px 0 26px; letter-spacing: .5px; } /* ---------- Footer ---------- */ .site-footer { background: var(--dark-2); color: #d5c3cd; padding: 72px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .f-brand .logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .f-brand .logo-row img { height: 52px; } .f-brand .logo-row span { font-family: 'Marcellus', serif; font-size: 1.25rem; color: #fff; } .f-brand p { font-size: .9rem; color: #a98f9d; max-width: 30em; } .f-social { display: flex; gap: 10px; margin-top: 18px; } .f-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #43263a; display: grid; place-items: center; color: #d5c3cd; transition: all .2s; } .f-social a:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); } .f-social svg { width: 18px; height: 18px; fill: currentColor; } .site-footer h4 { color: #fff; margin-bottom: 18px; font-size: .95rem; letter-spacing: 1.6px; text-transform: uppercase; } .site-footer h4::after { content: ""; display: block; width: 30px; height: 2px; background: var(--gold); margin-top: 9px; border-radius: 2px; } .f-links a { color: #a98f9d; display: block; padding: 6px 0; font-size: .92rem; transition: color .2s, padding-left .2s; } .f-links a:hover { color: var(--gold-bright); padding-left: 5px; } .newsletter { display: flex; gap: 0; max-width: 340px; margin-top: 14px; border-radius: var(--radius-btn); overflow: hidden; border: 1px solid #4a2a3e; } .newsletter input { flex: 1; min-width: 0; padding: 13px 16px; border: 0; background: #33192a; color: #fff; font-family: 'Inter', sans-serif; font-size: .9rem; } .newsletter input:focus { outline: none; } .newsletter button { background: linear-gradient(135deg, var(--brand-bright), var(--brand)); border: 0; padding: 0 20px; font-size: 1.05rem; color: #fff; cursor: pointer; } .foot-bottom { border-top: 1px solid #3c2233; margin-top: 52px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: #8f7583; font-size: .84rem; } .foot-bottom a:hover { color: var(--gold-bright); } .foot-legal { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; } .foot-legal a { color: #8f7583; transition: color .2s; } /* ---------- WhatsApp float ---------- */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .25s var(--ease), box-shadow .25s; } .wa-float:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 34px rgba(37, 211, 102, .55); } .wa-float svg { width: 30px; height: 30px; fill: #fff; } /* ---------- Toast ---------- */ .toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 40px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .toast.show { opacity: 1; transform: none; } .toast .t-ic { color: var(--gold-bright); } /* ---------- Utility ---------- */ .pill { display: inline-block; background: var(--brand-blush); color: var(--brand); font-size: .78rem; font-weight: 700; padding: 5px 14px; border-radius: 40px; } .mt-btn { margin-top: 28px; } .note { background: var(--blue-soft); border-left: 3px solid var(--blue-deep); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; font-size: .93rem; } /* ---------- Homepage v2 refinements ---------- */ .hero-visual .frame { border-radius: 999px 999px var(--radius) var(--radius); } .hero-visual .frame::after { border-color: rgba(173, 20, 87, .18); } .hero-stats { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); gap: 0; } .hero-stats .stat { padding: 0 32px; border-left: 1px solid var(--line); } .hero-stats .stat:first-child { padding-left: 0; border-left: 0; } .hero-stats .stat b { font-size: 1.45rem; } @media (max-width: 900px) { .hero-stats .stat { padding: 0 18px; } .hero-stats .stat:first-child { padding-left: 18px; border-left: 0; } } .hero-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); } .hero-note svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; } /* ---------- Contact form: honeypot, note, success states ---------- */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 14px; } .form-success { text-align: center; padding: 18px 8px; } .form-success .fs-tick { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: var(--brand-blush); color: var(--brand); box-shadow: 0 8px 22px rgba(173, 20, 87, .18); } .form-success .fs-tick svg { width: 30px; height: 30px; } .form-success h3 { font-size: 1.5rem; margin-bottom: 10px; } .form-success p { color: var(--muted); max-width: 34em; margin: 0 auto; } .newsletter-done { font-size: .92rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--brand-bright), var(--brand)); padding: 13px 18px; border-radius: var(--radius-btn); text-align: center; } /* ============================================================ Shop page — finish cards, toolbar, richer product cards ============================================================ */ /* ---- Shop by finish (image collection cards) ---- */ .finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } @media (max-width: 720px) { .finish-grid { grid-template-columns: 1fr; } } .finish-card { position: relative; display: block; overflow: hidden; isolation: isolate; min-height: 300px; border-radius: var(--radius); border: 1px solid var(--line); color: #fff; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .finish-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .finish-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); } .finish-card:hover img { transform: scale(1.06); } .finish-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 20, 27, .12) 0%, rgba(31, 20, 27, .55) 55%, rgba(31, 20, 27, .84) 100%); } .finish-card .fc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px; } .finish-card .fc-ey { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-bright); } .finish-card h3 { color: #fff; font-size: 1.55rem; margin: 8px 0 8px; } .finish-card p { color: rgba(255, 255, 255, .84); font-size: .92rem; line-height: 1.55; margin-bottom: 16px; max-width: 32em; } .finish-card .fc-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: #fff; } .finish-card .fc-link svg { transition: transform .25s var(--ease); } .finish-card:hover .fc-link { color: var(--brand-bright); } .finish-card:hover .fc-link svg { transform: translateX(4px); } /* ---- Shop toolbar (filters + count + sort) ---- */ .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .shop-toolbar .filters { margin-bottom: 0; justify-content: flex-start; } .shop-tools { display: flex; align-items: center; gap: 20px; } .shop-count { font-size: .88rem; color: var(--muted); white-space: nowrap; font-weight: 500; } .shop-sort { display: flex; align-items: center; gap: 9px; } .shop-sort label { font-size: .82rem; color: var(--muted); font-weight: 600; } .shop-sort select { font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 600; color: var(--ink); padding: 9px 36px 9px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-btn); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a6a72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; } .shop-sort select:hover { border-color: var(--brand); } .shop-sort select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-blush); } @media (max-width: 620px) { .shop-toolbar { flex-direction: column; align-items: stretch; } .shop-tools { justify-content: space-between; } } /* ---- Product card extras (rating, stock, gold tag) ---- */ .c-rating { display: flex; align-items: center; gap: 8px; color: var(--gold); letter-spacing: 2px; font-size: .82rem; margin-bottom: 9px; } .c-rating span { color: var(--muted); letter-spacing: 0; font-size: .78rem; } .card .meta { display: flex; align-items: center; gap: 9px; } .card .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .55; flex-shrink: 0; } .c-stock.in { color: var(--green); font-weight: 600; } .c-stock.out { color: var(--red); font-weight: 600; } .card .tag[data-material="Gold & Silver Plated"] { background: var(--gold-pale); color: var(--gold-deep); } .card-actions .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; } /* ---- Empty state ---- */ .shop-empty { grid-column: 1 / -1; text-align: center; padding: 56px 20px; } .shop-empty p { color: var(--muted); margin-bottom: 18px; } /* ---- Custom-order CTA card ---- */ .custom-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; background: var(--brand-blush); border: 1px solid var(--brand-pale); border-radius: var(--radius); padding: 40px 44px; } .custom-cta h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 8px 0 10px; } .custom-cta > div:first-child { max-width: 40em; } .custom-cta .muted { font-size: .95rem; } .custom-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 760px) { .custom-cta { padding: 32px 26px; } .custom-cta-actions .btn { flex: 1; } }