/* Extra storefront templates: luxe, fresh, minimal. Loaded after storefront.css. */ /* luxe: warm ivory + gold, serif, square corners, spaced capitals, centred header */ .tpl-luxe { --bg: #faf6ef; --bg-2: #f2eadb; --line: #e4d9c3; --r: 0px; --r-lg: 0px; --r-sm: 0px; --heading-weight: 600; --heading-tracking: .01em; --lux: #b8893a; } .tpl-luxe h1, .tpl-luxe h2, .tpl-luxe h3, .tpl-luxe .display { font-family: 'Playfair Display', Georgia, serif; } .tpl-luxe .hdr, .tpl-luxe .nav-bar, .tpl-luxe .trust { background: var(--bg); } .tpl-luxe .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 20px 0; } .tpl-luxe .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; letter-spacing: .14em; text-transform: uppercase; font-size: 1.05em; } .tpl-luxe .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 260px; } .tpl-luxe .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-luxe .nav-bar .wrap { justify-content: center; } .tpl-luxe .nav-link { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; } .tpl-luxe .nav-link.active::after { background: var(--lux); height: 1px; } .tpl-luxe .hero { background: #231a12; } .tpl-luxe .hero::after { background: linear-gradient(90deg, rgba(35,26,18,.88), rgba(35,26,18,.45) 55%, transparent); } .tpl-luxe .hero .eyebrow { background: transparent; border: 1px solid var(--lux); color: #e7c36a; border-radius: 0; letter-spacing: .24em; } .tpl-luxe .hero-in { padding: 120px 0 128px; } .tpl-luxe .hero h1 { color: #fbf1d6; font-weight: 500; } .tpl-luxe .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; } .tpl-luxe .btn-accent { background: var(--lux); border-color: var(--lux); } .tpl-luxe .btn-primary { background: #231a12; border-color: #231a12; } .tpl-luxe .btn-primary:hover { background: var(--lux); border-color: var(--lux); } .tpl-luxe .section-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; } .tpl-luxe .section-head h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--lux); margin: 16px auto 0; } .tpl-luxe .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; } .tpl-luxe .p-img { aspect-ratio: 4/5; } .tpl-luxe .p-card { text-align: center; } .tpl-luxe .p-card .price { justify-content: center; } .tpl-luxe .p-cat { letter-spacing: .18em; font-size: 11px; } .tpl-luxe .tag, .tpl-luxe .pd-price .off { border-radius: 0; } .tpl-luxe .cat-tile { aspect-ratio: 3/4; } .tpl-luxe .cat-tile .t { justify-content: center; text-align: center; } .tpl-luxe .cat-tile .arr { display: none; } .tpl-luxe .gallery { grid-template-columns: 1fr; } .tpl-luxe .thumbs { flex-direction: row !important; order: 2; } .tpl-luxe .pd { gap: 72px; } .tpl-luxe .pd-info h1 { font-weight: 500; } @media (max-width: 1100px) { .tpl-luxe .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-luxe .hdr-in { display: flex; padding: 0; height: 64px; } .tpl-luxe .hdr-in .hdr-search { display: none; } .tpl-luxe .hdr-in .brand { margin-right: auto; } .tpl-luxe .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-luxe .hero-in { padding: 72px 0; } .tpl-luxe .pd { gap: 26px; } } /* fresh: friendly, rounded, tinted sections, pill navigation, framed banner */ .tpl-fresh { --r: 20px; --r-lg: 30px; --r-sm: 14px; --bg-2: color-mix(in srgb, var(--brand) 7%, #fff); --heading-weight: 800; } .tpl-fresh .hdr-in { height: 70px; } .tpl-fresh .nav-bar { border-top: 0; } .tpl-fresh .nav-bar .wrap { gap: 8px; padding: 6px 0 12px; } .tpl-fresh .nav-link { padding: 8px 18px; border-radius: 99px; background: var(--bg-2); color: var(--ink); } .tpl-fresh .nav-link:hover, .tpl-fresh .nav-link.active { background: var(--brand); color: #fff; } .tpl-fresh .nav-link.active::after { display: none; } .tpl-fresh .hero { margin: 18px auto 0; width: min(1280px, 100% - 40px); border-radius: 36px; background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent))); } .tpl-fresh .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 70%, transparent), transparent 70%); } .tpl-fresh .hero > .wrap { width: 100%; padding: 0 clamp(24px, 5vw, 64px); } .tpl-fresh .hero-in { padding: 76px 0 84px; } .tpl-fresh .hero .eyebrow { background: rgba(255,255,255,.22); } .tpl-fresh .trust { margin: 18px auto 0; width: min(1280px, 100% - 40px); border: 0; background: transparent; gap: 12px; } .tpl-fresh .trust-item { background: var(--bg-2); border: 0; border-radius: 22px; } .tpl-fresh .section-alt { background: var(--bg-2); } .tpl-fresh .cat-tile { border-radius: 30px; } .tpl-fresh .cat-tile .arr { background: var(--accent); } .tpl-fresh .p-card { background: #fff; border-radius: 26px; padding: 12px 12px 18px; box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--brand) 45%, transparent); transition: .2s; } .tpl-fresh .p-card:hover { transform: translateY(-4px); } .tpl-fresh .p-img { border-radius: 20px; } .tpl-fresh .p-card .p-cat, .tpl-fresh .p-card .p-name, .tpl-fresh .p-card .price { padding: 0 6px; } .tpl-fresh .main-img { border-radius: 32px; } .tpl-fresh .thumbs button { border-radius: 16px; } @media (max-width: 700px) { .tpl-fresh .hero { border-radius: 26px; } } /* minimal: quiet, typographic, left-aligned split banner, hairlines */ .tpl-minimal { --r: 0px; --r-lg: 0px; --r-sm: 0px; --heading-weight: 600; --heading-tracking: -.02em; --bg-2: #f5f5f4; --line: #e7e5e4; } .tpl-minimal .hdr-in { height: 64px; } .tpl-minimal .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } .tpl-minimal .nav-bar { border-top: 0; } .tpl-minimal .nav-link { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding: 12px 14px; } .tpl-minimal .nav-link.active::after { height: 1px; left: 14px; right: 14px; } .tpl-minimal .hero { background: var(--bg-2); color: var(--ink); } .tpl-minimal .hero::after { display: none; } .tpl-minimal .hero-bg { inset: 0 0 0 50%; opacity: 1; } .tpl-minimal .hero-in { max-width: 46%; padding: 110px 0; } .tpl-minimal .hero .eyebrow { background: transparent; padding: 0; letter-spacing: .2em; color: var(--ink-3); } .tpl-minimal .hero h1 { font-weight: 500; } .tpl-minimal .hero p { color: var(--ink-2); opacity: 1; } .tpl-minimal .hero .btn-accent { background: var(--ink); border-color: var(--ink); } .tpl-minimal .hero .btn-light { background: transparent; color: var(--ink); border-color: var(--ink); } .tpl-minimal .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; } .tpl-minimal .btn-primary { background: var(--ink); border-color: var(--ink); } .tpl-minimal .btn-primary:hover { background: #000; border-color: #000; } .tpl-minimal .trust { display: none; } .tpl-minimal .section { padding: 64px 0; } .tpl-minimal .section-alt { background: transparent; } .tpl-minimal .section-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; } .tpl-minimal .section-head h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; } .tpl-minimal .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } .tpl-minimal .p-img { aspect-ratio: 4/5; background: var(--bg-2); } .tpl-minimal .p-cat { display: none; } .tpl-minimal .tag { border-radius: 0; box-shadow: none; } .tpl-minimal .cat-tile { aspect-ratio: 1; } .tpl-minimal .pd { gap: 80px; } .tpl-minimal .pd-info h1 { font-weight: 500; } .tpl-minimal .pd-price .off { background: transparent; padding: 0; border-radius: 0; } .tpl-minimal .assure { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 0; } @media (max-width: 900px) { .tpl-minimal .hero-bg { display: none; } .tpl-minimal .hero-in { max-width: none; padding: 56px 0; } .tpl-minimal .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-minimal .pd { gap: 26px; } } /* botanical: natural / organic care - sage and cream, serif headings, soft arched images, calm centred header */ .tpl-botanical { --bg: #fbf9f3; --bg-2: #eef1e6; --line: #dfe4d2; --r: 14px; --r-lg: 28px; --r-sm: 10px; --heading-weight: 600; --heading-tracking: 0; } .tpl-botanical h1, .tpl-botanical h2, .tpl-botanical h3, .tpl-botanical .display { font-family: 'Playfair Display', Georgia, serif; } .tpl-botanical .hdr, .tpl-botanical .nav-bar, .tpl-botanical .trust { background: var(--bg); } .tpl-botanical .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 18px 0; } .tpl-botanical .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; font-family: 'Playfair Display', Georgia, serif; font-size: 1.15em; } .tpl-botanical .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 260px; } .tpl-botanical .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-botanical .nav-bar { border-top: 0; } .tpl-botanical .nav-bar .wrap { justify-content: center; gap: 6px; } .tpl-botanical .nav-link { letter-spacing: .06em; font-size: 13.5px; } .tpl-botanical .hero { background: color-mix(in srgb, var(--brand) 82%, #1f2a1a); } .tpl-botanical .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 78%, #1f2a1a), color-mix(in srgb, var(--brand) 40%, transparent) 60%, transparent); } .tpl-botanical .hero .eyebrow { background: rgba(255,255,255,.16); border-radius: 99px; letter-spacing: .12em; } .tpl-botanical .hero-in { padding: 96px 0 104px; } .tpl-botanical .hero h1 { font-weight: 500; } .tpl-botanical .btn { border-radius: 99px; } .tpl-botanical .trust-item { background: transparent; } .tpl-botanical .section-alt { background: var(--bg-2); } .tpl-botanical .section-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; } .tpl-botanical .section-head h2::after { content: "❦"; display: block; color: var(--brand); font-size: 16px; margin-top: 10px; } .tpl-botanical .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } .tpl-botanical .p-img { aspect-ratio: 4/5; border-radius: 999px 999px var(--r) var(--r); background: var(--bg-2); } .tpl-botanical .p-card { text-align: center; background: transparent; box-shadow: none; } .tpl-botanical .p-card .price { justify-content: center; } .tpl-botanical .p-cat { letter-spacing: .14em; font-size: 11px; text-transform: uppercase; } .tpl-botanical .cat-tile { border-radius: 999px 999px var(--r-lg) var(--r-lg); aspect-ratio: 3/4; } .tpl-botanical .cat-tile .t { justify-content: center; text-align: center; } .tpl-botanical .cat-tile .arr { display: none; } .tpl-botanical .main-img { border-radius: 999px 999px var(--r-lg) var(--r-lg); } .tpl-botanical .pd { gap: 64px; } .tpl-botanical .pd-info h1 { font-weight: 500; } @media (max-width: 1100px) { .tpl-botanical .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-botanical .hdr-in { display: flex; padding: 0; height: 64px; } .tpl-botanical .hdr-in .hdr-search { display: none; } .tpl-botanical .hdr-in .brand { margin-right: auto; } .tpl-botanical .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-botanical .hero-in { padding: 64px 0; } .tpl-botanical .pd { gap: 26px; } } /* neutrals: every template gets its own tinted ink/background/line instead of the shared cool grey, so none of them read as the same indigo-and-grey default */ .tpl-boutique { --ink: #2a1f24; --ink-2: #5e4e55; --ink-3: #94858c; --line: #eadfe0; --bg-2: #f8f1ef; } .tpl-market { --ink: #1d2328; --ink-2: #48535b; --ink-3: #7d8990; --line: #e3e6e3; --bg-2: #f3f4f0; } .tpl-fresh { --ink: #1c2a22; --ink-2: #455a4c; --ink-3: #7f9387; --line: #e0e8dc; } .tpl-minimal { --ink: #1c1917; --ink-2: #57534e; --ink-3: #8a847d; } .tpl-botanical { --ink: #26301f; --ink-2: #505a44; --ink-3: #8a9279; } .tpl-luxe { --ink: #231a12; --ink-2: #5a4c3d; --ink-3: #94846f; } /* default banner photos per template (shown until the merchant uploads their own); crop focus per image */ .hero-bg.hero-stock { opacity: 1; } .tpl-standard .hero-stock { background-position: center 82%; } .tpl-boutique .hero-stock { background-position: center 26%; } .tpl-market .hero-stock { background-position: center 40%; } .tpl-luxe .hero-stock { background-position: 70% 55%; } .tpl-fresh .hero-stock { background-position: center 45%; } .tpl-minimal .hero-stock { background-position: center; } .tpl-botanical .hero-stock { background-position: center 38%; } /* neutral scrim over stock photos so they read as photographs, not brand-tinted gradients */ .hero:has(.hero-stock) { background: #1b1a18; } .hero:has(.hero-stock)::after { background: linear-gradient(90deg, rgba(16,15,14,.66), rgba(16,15,14,.28) 62%, rgba(16,15,14,.08)); } .tpl-boutique .hero:has(.hero-stock)::after { background: rgba(16,15,14,.38); } .tpl-botanical .hero:has(.hero-stock)::after { background: linear-gradient(90deg, rgba(38,48,31,.62), rgba(38,48,31,.18) 70%, transparent); } .tpl-fresh .hero:has(.hero-stock)::after { background: linear-gradient(90deg, rgba(16,30,22,.62), rgba(16,30,22,.2) 65%, transparent); } .tpl-minimal .hero:has(.hero-stock) { background: var(--bg-2); } .tpl-minimal .hero:has(.hero-stock)::after { display: none; } .tpl-botanical .hero:has(.hero-stock) { background: #26301f; } /* ========================================================================================================= Templates added later: noir, pop, heritage, aurora. Every rule is scoped to its own class, so the earlier templates (standard ... botanical) render exactly as before. ========================================================================================================= */ /* ---------- noir: dark mode ---------- */ .tpl-noir { --bg: #0c0d12; --bg-2: #151720; --line: #272b38; --ink: #f4f5f8; --ink-2: #b9bfcc; --ink-3: #7f8799; --r: 14px; --r-lg: 22px; --r-sm: 10px; --heading-weight: 760; --heading-tracking: -.025em; --brand-soft: color-mix(in srgb, var(--brand) 20%, #0c0d12); --brand-soft-2: color-mix(in srgb, var(--brand) 32%, #0c0d12); --brand-ink: color-mix(in srgb, var(--brand) 70%, #fff); color-scheme: dark; } .tpl-noir .announce { background: color-mix(in srgb, var(--brand) 55%, #0c0d12); } .tpl-noir .hdr { background: rgba(12,13,18,.82); border-bottom-color: var(--line); } .tpl-noir .nav-bar, .tpl-noir .trust { background: var(--bg); border-color: var(--line); } .tpl-noir .nav-link { color: var(--ink-2); } .tpl-noir .nav-link:hover, .tpl-noir .nav-link.active { color: var(--ink); } .tpl-noir .brand { color: var(--ink); } .tpl-noir .btn { border-color: #3a3f50; color: var(--ink); } .tpl-noir .btn:hover { background: var(--ink); color: #0c0d12; border-color: var(--ink); } .tpl-noir .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 28px -10px var(--brand); } .tpl-noir .btn-primary:hover { background: color-mix(in srgb, var(--brand) 82%, #fff); border-color: color-mix(in srgb, var(--brand) 82%, #fff); color: #fff; } .tpl-noir .btn-accent { background: var(--accent); border-color: var(--accent); color: #0c0d12; } .tpl-noir .btn-light { background: #fff; color: #0c0d12; border-color: #fff; } .tpl-noir .btn-light:hover { background: #e9ebf1; color: #0c0d12; } .tpl-noir input[type=text], .tpl-noir input[type=email], .tpl-noir input[type=tel], .tpl-noir input[type=password], .tpl-noir input[type=number], .tpl-noir input[type=search], .tpl-noir select, .tpl-noir textarea { background-color: var(--bg-2); color: var(--ink); border-color: #323747; } .tpl-noir .hero { background: #000; } .tpl-noir .hero::after { background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.4) 60%, transparent); } .tpl-noir .hero h1 { background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tpl-noir .hero .eyebrow { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); } .tpl-noir .trust-item { background: transparent; } .tpl-noir .section-alt { background: var(--bg-2); } .tpl-noir .p-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 10px; transition: .2s; } .tpl-noir .p-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 65%, var(--line)); box-shadow: 0 18px 40px -22px var(--brand); } .tpl-noir .p-img { background: #1c1f2a; border-radius: 14px; } .tpl-noir .p-card .p-cat, .tpl-noir .p-card .p-name, .tpl-noir .p-card .price { padding: 0 6px; } .tpl-noir .tag { background: var(--brand); color: #fff; } .tpl-noir .cat-tile { border: 1px solid var(--line); border-radius: 22px; } .tpl-noir .main-img { border-radius: 22px; background: var(--bg-2); } .tpl-noir .assure, .tpl-noir .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-noir .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--line); } .tpl-noir .toast, .tpl-noir .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-noir .hero:has(.hero-stock) { background: #000; } .tpl-noir .hero-stock { background-position: center 40%; } /* ---------- pop: bold, playful, thick outlines ---------- */ .tpl-pop { --bg: #fffaf0; --bg-2: #fff1cf; --line: #17141f; --ink: #17141f; --ink-2: #463f55; --ink-3: #7a7390; --r: 16px; --r-lg: 24px; --r-sm: 10px; --heading-weight: 850; --heading-tracking: -.02em; --pop: 4px 4px 0 #17141f; } .tpl-pop .announce { background: var(--ink); color: var(--accent); font-weight: 800; letter-spacing: .04em; } .tpl-pop .hdr { background: var(--bg); border-bottom: 3px solid var(--ink); backdrop-filter: none; } .tpl-pop .hdr-in { height: 72px; } .tpl-pop .brand { font-weight: 900; } .tpl-pop .nav-bar { background: var(--accent); border-top: 0; border-bottom: 3px solid var(--ink); } .tpl-pop .nav-link { font-weight: 800; color: var(--ink); border-radius: 99px; margin: 6px 0; } .tpl-pop .nav-link:hover { background: rgba(23,20,31,.1); } .tpl-pop .nav-link.active { background: var(--ink); color: #fff; } .tpl-pop .nav-link.active::after { display: none; } .tpl-pop .btn { border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--pop); font-weight: 800; transition: transform .1s, box-shadow .1s, background .1s; } .tpl-pop .btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); background: var(--accent); color: var(--ink); } .tpl-pop .btn-primary { background: var(--brand); border-color: var(--ink); color: #fff; } .tpl-pop .btn-primary:hover { background: var(--accent); color: var(--ink); border-color: var(--ink); } .tpl-pop .btn-accent { background: var(--accent); color: var(--ink); border-color: var(--ink); } .tpl-pop .btn-light { background: #fff; color: var(--ink); border-color: var(--ink); } .tpl-pop input[type=text], .tpl-pop input[type=email], .tpl-pop input[type=tel], .tpl-pop input[type=password], .tpl-pop input[type=number], .tpl-pop input[type=search], .tpl-pop select, .tpl-pop textarea { border: 3px solid var(--ink); border-radius: 12px; } .tpl-pop .hero { background: var(--brand); border-bottom: 3px solid var(--ink); } .tpl-pop .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 82%, transparent), transparent 70%); } .tpl-pop .hero .eyebrow { background: #fff; color: var(--ink); border: 2px solid var(--ink); font-weight: 800; } .tpl-pop .hero h1 { text-shadow: 3px 3px 0 var(--ink); } .tpl-pop .trust { background: transparent; border: 0; gap: 14px; padding: 18px 0; width: min(1280px, 100% - 40px); margin: 0 auto; } .tpl-pop .trust-item { background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--pop); } .tpl-pop .section-alt { background: var(--bg-2); border-block: 3px solid var(--ink); } .tpl-pop .section-head h2 { display: inline-block; background: var(--accent); border: 3px solid var(--ink); padding: 4px 16px; border-radius: 14px; box-shadow: var(--pop); transform: rotate(-1deg); } .tpl-pop .p-card { background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--pop); padding: 10px; transition: transform .12s, box-shadow .12s; } .tpl-pop .p-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } .tpl-pop .p-img { border: 2px solid var(--ink); border-radius: 14px; } .tpl-pop .p-card .p-cat, .tpl-pop .p-card .p-name, .tpl-pop .p-card .price { padding: 0 6px; } .tpl-pop .tag { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; } .tpl-pop .cat-tile { border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--pop); } .tpl-pop .main-img { border: 3px solid var(--ink); border-radius: 24px; box-shadow: var(--pop); } .tpl-pop .assure { border: 3px solid var(--ink); border-radius: 18px; background: #fff; } .tpl-pop .hero:has(.hero-stock) { background: var(--brand); } .tpl-pop .hero:has(.hero-stock)::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 78%, transparent), rgba(0,0,0,.08) 70%); } .tpl-pop .hero-stock { background-position: center 45%; } /* ---------- heritage: deep maroon and gold, traditional ---------- */ .tpl-heritage { --bg: #fffaf3; --bg-2: #f7ecd9; --line: #e6d5b8; --ink: #2b1613; --ink-2: #5e3f39; --ink-3: #98786f; --r: 6px; --r-lg: 10px; --r-sm: 4px; --heading-weight: 600; --heading-tracking: .005em; --gold: #c9a24a; --deep: color-mix(in srgb, var(--brand) 70%, #1a0d0b); } .tpl-heritage h1, .tpl-heritage h2, .tpl-heritage h3, .tpl-heritage .display { font-family: 'Playfair Display', Georgia, serif; } .tpl-heritage .announce { background: #1a0d0b; color: #f1d98b; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } .tpl-heritage .hdr { background: var(--deep); border-bottom: 3px double var(--gold); backdrop-filter: none; } .tpl-heritage .hdr .brand, .tpl-heritage .hdr .icon-link, .tpl-heritage .hdr .hdr-search svg { color: #fbe9b7; } .tpl-heritage .hdr .brand { font-family: 'Playfair Display', Georgia, serif; letter-spacing: .06em; } .tpl-heritage .hdr-search input[type=search] { background: rgba(255,255,255,.1) !important; border-color: rgba(251,233,183,.35) !important; color: #fbe9b7; border-radius: 4px; } .tpl-heritage .hdr-search input[type=search]::placeholder { color: rgba(251,233,183,.7); } .tpl-heritage .nav-bar { background: var(--bg-2); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-heritage .nav-bar .wrap { justify-content: center; } .tpl-heritage .nav-link { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--ink); } .tpl-heritage .nav-link.active::after { background: var(--gold); height: 2px; } .tpl-heritage .hero { background: #2a0f0e; } .tpl-heritage .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 92%, transparent), color-mix(in srgb, var(--deep) 45%, transparent) 60%, transparent); } .tpl-heritage .hero h1 { color: #fbe9b7; font-weight: 500; } .tpl-heritage .hero .eyebrow { background: transparent; border: 1px solid var(--gold); color: #f1d98b; border-radius: 2px; letter-spacing: .22em; } .tpl-heritage .hero-in { padding: 104px 0 112px; } .tpl-heritage .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; } .tpl-heritage .btn-primary { background: var(--deep); border-color: var(--gold); color: #fbe9b7; } .tpl-heritage .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: #2b1613; } .tpl-heritage .btn-accent { background: var(--gold); border-color: var(--gold); color: #2b1613; } .tpl-heritage .trust { background: var(--bg); } .tpl-heritage .section-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; } .tpl-heritage .section-head h2::before, .tpl-heritage .section-head h2::after { content: "\2726"; color: var(--gold); font-size: .6em; margin: 0 14px; vertical-align: middle; } .tpl-heritage .section-alt { background: var(--bg-2); } .tpl-heritage .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; } .tpl-heritage .p-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; text-align: center; transition: .2s; } .tpl-heritage .p-card:hover { border-color: var(--gold); box-shadow: 0 14px 30px -20px var(--deep); } .tpl-heritage .p-img { border: 1px solid var(--line); border-radius: 3px; } .tpl-heritage .p-card .price { justify-content: center; } .tpl-heritage .p-cat { letter-spacing: .16em; font-size: 11px; text-transform: uppercase; color: var(--gold); } .tpl-heritage .tag { border-radius: 2px; background: var(--deep); color: #fbe9b7; } .tpl-heritage .cat-tile { border: 2px solid var(--gold); border-radius: 6px; aspect-ratio: 3/4; } .tpl-heritage .cat-tile .t { justify-content: center; text-align: center; } .tpl-heritage .cat-tile .arr { display: none; } .tpl-heritage .main-img { border: 2px solid var(--gold); border-radius: 6px; } .tpl-heritage .pd-info h1 { font-weight: 500; } @media (max-width: 1100px) { .tpl-heritage .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-heritage .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-heritage .hero-in { padding: 64px 0; } } .tpl-heritage .hero:has(.hero-stock) { background: #2a0f0e; } .tpl-heritage .hero:has(.hero-stock)::after { background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 88%, transparent), color-mix(in srgb, var(--deep) 30%, transparent) 65%, transparent); } .tpl-heritage .hero-stock { background-position: center 50%; } /* ---------- aurora: modern gradient, glassy ---------- */ .tpl-aurora { --bg: #fbfcff; --bg-2: #f1f4fd; --line: #e2e8f5; --ink: #0f1830; --ink-2: #44506e; --ink-3: #8a94ad; --r: 18px; --r-lg: 28px; --r-sm: 12px; --heading-weight: 800; --heading-tracking: -.035em; } .tpl-aurora .hdr { background: rgba(255,255,255,.72); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); } .tpl-aurora .nav-bar { background: transparent; border-top: 0; } .tpl-aurora .nav-link.active::after { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .tpl-aurora .hero { background: radial-gradient(900px 420px at 12% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), radial-gradient(800px 520px at 92% 10%, color-mix(in srgb, var(--brand) 75%, transparent), transparent 70%), linear-gradient(135deg, #0f1830, color-mix(in srgb, var(--brand) 50%, #0f1830)); } .tpl-aurora .hero::after { background: linear-gradient(90deg, rgba(15,24,48,.55), transparent 70%); } .tpl-aurora .hero h1 { letter-spacing: -.04em; } .tpl-aurora .hero .eyebrow { background: rgba(255,255,255,.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); } .tpl-aurora .btn-primary { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent))); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -12px var(--brand); } .tpl-aurora .btn-primary:hover { filter: brightness(1.08); } .tpl-aurora .btn-accent { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--brand))); border-color: transparent; color: #fff; } .tpl-aurora .trust { margin: 18px auto 0; width: min(1280px, 100% - 40px); border: 0; background: transparent; gap: 12px; } .tpl-aurora .trust-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; } .tpl-aurora .section-alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .tpl-aurora .p-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 10px; transition: .22s; } .tpl-aurora .p-card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 22px 46px -24px color-mix(in srgb, var(--brand) 70%, transparent); } .tpl-aurora .p-img { border-radius: 18px; background: linear-gradient(135deg, var(--bg-2), #fff); } .tpl-aurora .p-card .p-cat, .tpl-aurora .p-card .p-name, .tpl-aurora .p-card .price { padding: 0 8px; } .tpl-aurora .tag { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; } .tpl-aurora .cat-tile { border-radius: 26px; } .tpl-aurora .cat-tile .arr { background: linear-gradient(135deg, var(--brand), var(--accent)); } .tpl-aurora .main-img { border-radius: 30px; } .tpl-aurora .thumbs button { border-radius: 16px; } .tpl-aurora .assure { border-radius: 20px; background: var(--bg-2); border-color: var(--line); } .tpl-aurora .hero:has(.hero-stock) { background: #0f1830; } .tpl-aurora .hero:has(.hero-stock)::after { background: linear-gradient(90deg, color-mix(in srgb, #0f1830 80%, transparent), color-mix(in srgb, var(--brand) 22%, transparent) 65%, transparent); } .tpl-aurora .hero-stock { background-position: center 40%; } .tpl-heritage .nav-bar .wrap { flex-wrap: wrap; overflow: visible; gap: 0 4px; } .tpl-heritage .nav-link { letter-spacing: .1em; padding: 10px 12px; } .tpl-aurora .hero-stock { background-position: center 82%; } /* ---------- Chrono: watches. Dark steel header, large product stage, fine spec lines ---------- */ .tpl-chrono { --bg: #f6f4f0; --bg-2: #ebe8e2; --line: #d9d5cc; --ink: #161616; --ink-2: #4a4a48; --ink-3: #85827b; --r: 2px; --r-lg: 4px; --r-sm: 2px; --steel: #15171a; } .tpl-chrono h1, .tpl-chrono h2, .tpl-chrono h3, .tpl-chrono .display { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: .02em; } .tpl-chrono .announce { background: #0c0d0f; color: var(--accent); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; } .tpl-chrono .hdr { background: var(--steel); border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); backdrop-filter: none; } .tpl-chrono .hdr .brand, .tpl-chrono .hdr .icon-link, .tpl-chrono .hdr .hdr-search svg { color: #efece5; } .tpl-chrono .hdr .brand { letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .tpl-chrono .hdr-search input[type=search] { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.18) !important; color: #efece5; border-radius: 2px; } .tpl-chrono .hdr-search input[type=search]::placeholder { color: rgba(239,236,229,.6); } .tpl-chrono .nav-bar { background: var(--bg); border-bottom: 1px solid var(--line); } .tpl-chrono .nav-bar .wrap { justify-content: center; } .tpl-chrono .nav-link { text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; } .tpl-chrono .nav-link.active::after { background: var(--accent); height: 2px; } .tpl-chrono .hero { background: var(--steel); } .tpl-chrono .hero::after { background: linear-gradient(90deg, rgba(10,11,13,.88), rgba(10,11,13,.35) 60%, transparent); } .tpl-chrono .hero h1 { color: #f4f1ea; font-size: clamp(34px, 5vw, 58px); font-weight: 500; } .tpl-chrono .hero .eyebrow { background: transparent; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; color: var(--accent); letter-spacing: .28em; padding-left: 0; } .tpl-chrono .hero-in { padding: 112px 0 120px; } .tpl-chrono .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; } .tpl-chrono .btn-primary { background: var(--steel); border-color: var(--steel); color: #f4f1ea; } .tpl-chrono .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #111; } .tpl-chrono .btn-accent { background: var(--accent); border-color: var(--accent); color: #111; } .tpl-chrono .section-head h2 { text-transform: uppercase; letter-spacing: .18em; font-size: 20px; } .tpl-chrono .section-alt { background: var(--bg-2); } .tpl-chrono .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; } .tpl-chrono .p-card { background: transparent; border: 0; text-align: center; } .tpl-chrono .p-img { background: radial-gradient(circle at 50% 40%, #fff, #e7e3da); border: 1px solid var(--line); border-radius: 0; aspect-ratio: 1/1; } .tpl-chrono .p-img img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; } .tpl-chrono .p-card .price { justify-content: center; } .tpl-chrono .p-cat { letter-spacing: .22em; font-size: 10.5px; text-transform: uppercase; color: var(--ink-3); } .tpl-chrono .p-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; } .tpl-chrono .tag { border-radius: 0; background: var(--steel); color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; } .tpl-chrono .cat-tile { border-radius: 0; aspect-ratio: 4/5; } .tpl-chrono .cat-tile .t { justify-content: center; text-align: center; letter-spacing: .18em; text-transform: uppercase; } .tpl-chrono .cat-tile .arr { display: none; } .tpl-chrono .main-img { border: 1px solid var(--line); border-radius: 0; background: radial-gradient(circle at 50% 40%, #fff, #e7e3da); } .tpl-chrono .pd-info h1 { font-size: clamp(28px, 3.4vw, 40px); } .tpl-chrono .trust { background: var(--bg); } @media (max-width: 1100px) { .tpl-chrono .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-chrono .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-chrono .hero-in { padding: 64px 0; } } .tpl-chrono .hero:has(.hero-stock) { background: var(--steel); } /* ---------- Drape: ladies suits, sarees and fabric. Jewel-tone header (store main colour), swatch cards, gold trims ---------- */ .tpl-drape { --bg: #fdf6ee; --bg-2: #f6e8d8; --line: #ead7c2; --ink: #2b1a1c; --ink-2: #66494c; --ink-3: #9d7f80; --r: 14px; --r-lg: 22px; --r-sm: 8px; } .tpl-drape h1, .tpl-drape h2, .tpl-drape h3, .tpl-drape .display { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-weight: 600; } .tpl-drape .announce { background: color-mix(in srgb, var(--brand) 82%, #000); color: color-mix(in srgb, var(--accent) 60%, #fff); letter-spacing: .08em; font-size: 12.5px; } .tpl-drape .hdr { background: var(--brand); border-bottom: 3px solid var(--accent); backdrop-filter: none; } .tpl-drape .hdr .brand, .tpl-drape .hdr .icon-link, .tpl-drape .hdr .hdr-search svg { color: #fff6e6; } .tpl-drape .hdr .brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.25em; } .tpl-drape .hdr-search input[type=search] { background: rgba(255,255,255,.14) !important; border-color: rgba(255,246,230,.35) !important; color: #fff6e6; border-radius: 999px; } .tpl-drape .hdr-search input[type=search]::placeholder { color: rgba(255,246,230,.75); } .tpl-drape .nav-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); } .tpl-drape .nav-bar .wrap { justify-content: center; } .tpl-drape .nav-link { font-weight: 600; letter-spacing: .04em; } .tpl-drape .nav-link.active::after { background: var(--accent); height: 3px; border-radius: 3px; } .tpl-drape .hero { background: color-mix(in srgb, var(--brand) 70%, #000); } .tpl-drape .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 88%, transparent), color-mix(in srgb, var(--brand) 35%, transparent) 62%, transparent); } .tpl-drape .hero h1 { color: #fff6e6; font-weight: 600; } .tpl-drape .hero .eyebrow { background: color-mix(in srgb, var(--accent) 90%, #fff); color: #2b1a1c; border-radius: 999px; font-weight: 700; } .tpl-drape .hero-in { padding: 96px 0 104px; } .tpl-drape .btn { border-radius: 999px; font-weight: 700; } .tpl-drape .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff6e6; } .tpl-drape .btn-primary:hover { background: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-drape .btn-accent { background: var(--accent); border-color: var(--accent); color: #2b1a1c; } .tpl-drape .section-head h2::after { content: ""; display: block; width: 54px; height: 3px; margin-top: 8px; background: var(--accent); border-radius: 3px; } .tpl-drape .section-alt { background: var(--bg-2); } .tpl-drape .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; } .tpl-drape .p-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px 8px 14px; transition: .2s; } .tpl-drape .p-card:hover { border-color: var(--accent); box-shadow: 0 18px 34px -24px var(--brand); transform: translateY(-2px); } .tpl-drape .p-img { border-radius: 12px; aspect-ratio: 3/4; } .tpl-drape .p-cat { color: var(--accent); font-weight: 700; letter-spacing: .1em; font-size: 11px; text-transform: uppercase; } .tpl-drape .tag { background: var(--accent); color: #2b1a1c; border-radius: 999px; font-weight: 700; } .tpl-drape .cat-tile { border-radius: 22px 22px 8px 8px; aspect-ratio: 3/4; border: 2px solid var(--accent); } .tpl-drape .main-img { border: 2px solid var(--accent); border-radius: 18px; } .tpl-drape .trust { background: var(--bg-2); } @media (max-width: 1100px) { .tpl-drape .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-drape .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-drape .hero-in { padding: 60px 0; } } .tpl-drape .hero:has(.hero-stock) { background: color-mix(in srgb, var(--brand) 70%, #000); } /* ---------- Runway: high-fashion editorial. Black header, huge light headings, hairlines, sharp corners ---------- */ .tpl-runway { --bg: #ffffff; --bg-2: #f4f2ef; --line: #e3dfd9; --ink: #0d0d0d; --ink-2: #44423f; --ink-3: #8a8782; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-runway h1, .tpl-runway h2, .tpl-runway h3, .tpl-runway .display { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: .01em; } .tpl-runway .announce { background: #0d0d0d; color: #f3efe8; letter-spacing: .26em; text-transform: uppercase; font-size: 10.5px; } .tpl-runway .hdr { background: #fff; border-bottom: 1px solid var(--ink); backdrop-filter: none; } .tpl-runway .hdr .brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5em; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; } .tpl-runway .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0; } .tpl-runway .nav-bar { border-bottom: 0; } .tpl-runway .nav-bar .wrap { justify-content: center; } .tpl-runway .nav-link { text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 600; } .tpl-runway .nav-link.active::after { height: 1px; background: var(--ink); } .tpl-runway .hero { background: #0d0d0d; min-height: 520px; display: flex; align-items: flex-end; } .tpl-runway .hero::after { background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.05) 65%); } .tpl-runway .hero h1 { color: #fff; font-size: clamp(44px, 8vw, 104px); font-weight: 400; line-height: .95; text-transform: uppercase; letter-spacing: .04em; } .tpl-runway .hero .eyebrow { background: transparent; border: 0; color: #fff; letter-spacing: .34em; padding-left: 0; border-radius: 0; } .tpl-runway .hero p { color: rgba(255,255,255,.86); max-width: 520px; } .tpl-runway .hero-in { padding: 120px 0 64px; } .tpl-runway .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; font-weight: 700; padding-left: 28px; padding-right: 28px; } .tpl-runway .btn-primary { background: #fff; border-color: #fff; color: #0d0d0d; } .tpl-runway .btn-primary:hover { background: transparent; color: #fff; } .tpl-runway main .btn-primary, .tpl-runway .pd .btn-primary { background: #0d0d0d; border-color: #0d0d0d; color: #fff; } .tpl-runway .btn-accent { background: transparent; border: 1px solid #fff; color: #fff; } .tpl-runway .section-head h2 { font-size: clamp(30px, 4vw, 48px); text-transform: uppercase; letter-spacing: .12em; font-weight: 400; } .tpl-runway .section-alt { background: var(--bg-2); } .tpl-runway .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 18px; } .tpl-runway .p-card { background: transparent; border: 0; padding: 0; } .tpl-runway .p-img { border-radius: 0; aspect-ratio: 3/4; background: var(--bg-2); } .tpl-runway .p-cat { letter-spacing: .24em; font-size: 10px; text-transform: uppercase; color: var(--ink-3); } .tpl-runway .p-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; } .tpl-runway .tag { border-radius: 0; background: #0d0d0d; color: #fff; letter-spacing: .16em; text-transform: uppercase; font-size: 9.5px; } .tpl-runway .cat-tile { border-radius: 0; aspect-ratio: 3/4; } .tpl-runway .cat-tile .t { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; } .tpl-runway .main-img { border-radius: 0; border: 0; background: var(--bg-2); } .tpl-runway .trust { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } @media (max-width: 1100px) { .tpl-runway .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-runway .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } .tpl-runway .hero { min-height: 420px; } .tpl-runway .hero-in { padding: 90px 0 40px; } } .tpl-runway .hero:has(.hero-stock) { background: #0d0d0d; } /* ---------- Street: urban streetwear. Heavy condensed type, charcoal header, lime accent, tilted tags ---------- */ .tpl-street { --bg: #f2f2f0; --bg-2: #e6e6e2; --line: #1c1c1e; --ink: #111113; --ink-2: #3b3b3f; --ink-3: #77777c; --r: 0px; --r-lg: 0px; --r-sm: 0px; --lime: #c6ff00; } .tpl-street h1, .tpl-street h2, .tpl-street h3, .tpl-street .display { font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .tpl-street .announce { background: var(--lime); color: #111; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } .tpl-street .hdr { background: #111113; border-bottom: 4px solid var(--lime); backdrop-filter: none; } .tpl-street .hdr .brand, .tpl-street .hdr .icon-link, .tpl-street .hdr .hdr-search svg { color: #fff; } .tpl-street .hdr .brand { font-family: 'Oswald', Impact, sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; } .tpl-street .hdr-search input[type=search] { background: #232326 !important; border: 2px solid #3a3a3e !important; color: #fff; border-radius: 0; } .tpl-street .hdr-search input[type=search]::placeholder { color: #9a9aa0; } .tpl-street .nav-bar { background: #1c1c1e; border: 0; } .tpl-street .nav-link { color: #e9e9ec; text-transform: uppercase; font-family: 'Oswald', sans-serif; letter-spacing: .1em; font-weight: 600; } .tpl-street .nav-link.active { color: var(--lime); } .tpl-street .nav-link.active::after { background: var(--lime); height: 3px; } .tpl-street .hero { background: #111113; } .tpl-street .hero::after { background: linear-gradient(90deg, rgba(17,17,19,.86), rgba(17,17,19,.25) 70%, transparent); } .tpl-street .hero h1 { color: #fff; font-size: clamp(42px, 7vw, 92px); line-height: .98; } .tpl-street .hero .eyebrow { background: var(--lime); color: #111; border-radius: 0; font-weight: 800; transform: rotate(-2deg); display: inline-block; } .tpl-street .hero-in { padding: 110px 0 120px; } .tpl-street .btn { border-radius: 0; text-transform: uppercase; font-family: 'Oswald', sans-serif; letter-spacing: .1em; font-weight: 700; border-width: 2px; } .tpl-street .btn-primary { background: var(--lime); border-color: var(--lime); color: #111; box-shadow: 4px 4px 0 #111; } .tpl-street .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #111; background: var(--lime); } .tpl-street .btn-accent { background: #fff; border-color: #111; color: #111; box-shadow: 4px 4px 0 #111; } .tpl-street .section-head h2 { font-size: clamp(30px, 4vw, 46px); border-bottom: 5px solid var(--lime); display: inline-block; padding-bottom: 4px; } .tpl-street .section-alt { background: var(--bg-2); } .tpl-street .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; } .tpl-street .p-card { background: #fff; border: 2px solid #111; padding: 0; transition: transform .15s, box-shadow .15s; } .tpl-street .p-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #111; } .tpl-street .p-img { border-radius: 0; border-bottom: 2px solid #111; aspect-ratio: 4/5; } .tpl-street .p-card .p-body { padding: 10px 12px 14px; } .tpl-street .p-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 17px; font-weight: 600; } .tpl-street .p-cat { color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; } .tpl-street .tag { background: var(--lime); color: #111; border: 2px solid #111; border-radius: 0; font-weight: 800; text-transform: uppercase; transform: rotate(-3deg); } .tpl-street .cat-tile { border: 3px solid #111; border-radius: 0; } .tpl-street .cat-tile .t { text-transform: uppercase; font-family: 'Oswald', sans-serif; letter-spacing: .08em; } .tpl-street .main-img { border: 3px solid #111; border-radius: 0; box-shadow: 8px 8px 0 var(--lime); } .tpl-street .trust { background: #111113; color: #fff; } .tpl-street .trust * { color: inherit; } @media (max-width: 1100px) { .tpl-street .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tpl-street .p-grid { gap: 18px 12px; } .tpl-street .hero-in { padding: 64px 0; } } .tpl-street .hero:has(.hero-stock) { background: #111113; } /* ---------- Muse: soft modern lifestyle. Rounded, airy, pastel tints from the store colours, floating cards ---------- */ .tpl-muse { --bg: #fcf9f6; --bg-2: #f3ece6; --line: #eadfd6; --ink: #2a2522; --ink-2: #625952; --ink-3: #9b9088; --r: 18px; --r-lg: 28px; --r-sm: 12px; } .tpl-muse h1, .tpl-muse h2, .tpl-muse h3, .tpl-muse .display { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-weight: 500; } .tpl-muse .announce { background: color-mix(in srgb, var(--accent) 38%, #fff); color: var(--ink); font-size: 13px; letter-spacing: .02em; } .tpl-muse .hdr { background: rgba(252, 249, 246, .92); border-bottom: 1px solid var(--line); } .tpl-muse .hdr .brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.3em; } .tpl-muse .hdr-search input[type=search] { border-radius: 999px; background: #fff !important; border: 1px solid var(--line) !important; } .tpl-muse .nav-bar .wrap { justify-content: center; } .tpl-muse .nav-link { font-weight: 600; } .tpl-muse .nav-link.active { color: var(--brand); } .tpl-muse .nav-link.active::after { height: 3px; border-radius: 3px; background: var(--accent); } .tpl-muse .hero { margin: 18px auto 0; max-width: 1240px; border-radius: 32px; overflow: hidden; background: color-mix(in srgb, var(--accent) 20%, var(--bg-2)); } .tpl-muse .hero::after { background: linear-gradient(90deg, rgba(252,249,246,.92), rgba(252,249,246,.55) 45%, transparent 75%); } .tpl-muse .hero h1 { color: var(--ink); font-size: clamp(36px, 5vw, 64px); } .tpl-muse .hero p, .tpl-muse .hero .eyebrow { color: var(--ink-2); } .tpl-muse .hero .eyebrow { background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; } .tpl-muse .hero-in { padding: 96px 36px; } .tpl-muse .btn { border-radius: 999px; font-weight: 700; padding-left: 26px; padding-right: 26px; } .tpl-muse .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-muse .btn-accent { background: color-mix(in srgb, var(--accent) 45%, #fff); border-color: transparent; color: var(--ink); } .tpl-muse .section-head { justify-content: center; text-align: center; flex-direction: column; align-items: center; } .tpl-muse .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); } .tpl-muse .section-alt { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); } .tpl-muse .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } .tpl-muse .p-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 10px 10px 16px; box-shadow: 0 14px 30px -26px rgba(60,40,30,.5); transition: transform .2s, box-shadow .2s; } .tpl-muse .p-card:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -26px rgba(60,40,30,.55); } .tpl-muse .p-img { border-radius: 18px; aspect-ratio: 4/5; } .tpl-muse .p-card .price { padding-left: 6px; } .tpl-muse .p-cat { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .tpl-muse .tag { border-radius: 999px; background: color-mix(in srgb, var(--accent) 55%, #fff); color: var(--ink); font-weight: 700; } .tpl-muse .cat-tile { border-radius: 28px; aspect-ratio: 1/1; } .tpl-muse .main-img { border-radius: 26px; } .tpl-muse .trust { background: transparent; } @media (max-width: 1100px) { .tpl-muse .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-muse .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .tpl-muse .hero { margin: 12px; border-radius: 22px; } .tpl-muse .hero-in { padding: 56px 20px; } } .tpl-muse .hero:has(.hero-stock) { background: color-mix(in srgb, var(--accent) 20%, var(--bg-2)); } /* ===================================================================================================================================== Watches: Meridian (Swiss-light), Tourbillon (midnight + gold dials), Aviator (field / pilot, stitched khaki) ===================================================================================================================================== */ /* ---------- Meridian: Swiss minimal. White, hairlines, thin spaced capitals, split hero with a soft-faded photo ---------- */ .tpl-meridian { --bg: #fbfbfc; --bg-2: #f0f2f5; --line: #e3e6ea; --ink: #12161d; --ink-2: #454c59; --ink-3: #8a919e; --r: 2px; --r-lg: 3px; --r-sm: 2px; } .tpl-meridian h1, .tpl-meridian h2, .tpl-meridian h3, .tpl-meridian .display { font-family: 'Jost', 'Inter', system-ui, sans-serif; font-weight: 300; letter-spacing: .06em; } .tpl-meridian .announce { background: transparent; color: var(--ink-2); border-bottom: 1px solid var(--line); letter-spacing: .26em; text-transform: uppercase; font-size: 10.5px; } .tpl-meridian .hdr { background: #fff; border-bottom: 0; backdrop-filter: none; } .tpl-meridian .hdr-in { height: 82px; } .tpl-meridian .hdr .brand { font-family: 'Jost', 'Inter', sans-serif; font-weight: 300; letter-spacing: .44em; text-transform: uppercase; font-size: 1.02em; color: var(--ink); } .tpl-meridian .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } .tpl-meridian .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-meridian .nav-bar .wrap { justify-content: center; gap: 14px; } .tpl-meridian .nav-link { text-transform: uppercase; letter-spacing: .24em; font-size: 10.5px; font-weight: 500; color: var(--ink-2); } .tpl-meridian .nav-link.active { color: var(--ink); } .tpl-meridian .nav-link.active::after { height: 1px; background: var(--ink); } .tpl-meridian .hero { background: #eceff3; color: var(--ink); } .tpl-meridian .hero::after { content: none; } .tpl-meridian .hero-bg { left: 44%; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); mask-image: linear-gradient(90deg, transparent, #000 24%); } .tpl-meridian .hero-in { max-width: 520px; padding: 118px 0 126px; } .tpl-meridian .hero h1 { color: var(--ink); font-size: clamp(32px, 4.4vw, 54px); font-weight: 300; text-transform: uppercase; letter-spacing: .12em; line-height: 1.14; } .tpl-meridian .hero p { color: var(--ink-2); opacity: 1; } .tpl-meridian .hero .eyebrow { background: transparent; backdrop-filter: none; border: 0; border-radius: 0; padding: 0 0 0 38px; color: var(--accent); letter-spacing: .32em; font-weight: 600; position: relative; } .tpl-meridian .hero .eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: var(--accent); } .tpl-meridian .hero .eyebrow .i { display: none; } .tpl-meridian .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 500; } .tpl-meridian .btn-accent, .tpl-meridian .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; } .tpl-meridian .btn-accent:hover, .tpl-meridian .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .tpl-meridian .hero .btn-light, .tpl-meridian .btn-light { background: transparent; border: 1px solid var(--ink); color: var(--ink); } .tpl-meridian .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 6px; } .tpl-meridian .section-head h2 { text-transform: uppercase; letter-spacing: .3em; font-size: 17px; font-weight: 400; } .tpl-meridian .section-head h2::after { content: ""; display: block; width: 34px; height: 1px; background: var(--ink); margin: 14px auto 0; } .tpl-meridian .section-head .link-arrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); } .tpl-meridian .section-alt { background: var(--bg-2); } .tpl-meridian .rc-section .section-head { align-items: center; border-bottom: 0; } .tpl-meridian .rc-section .section-head h2 { border-bottom: 0; font-size: 16px !important; } .tpl-meridian .p-grid, .tpl-meridian .rc-grid { gap: 40px 30px; } .tpl-meridian .p-card, .tpl-meridian .rc-card { background: transparent; border: 0; padding: 0; text-align: center; } .tpl-meridian .rc-card:hover { box-shadow: none; } .tpl-meridian .p-img, .tpl-meridian .rc-img { background: #f0f2f5; border: 1px solid transparent; border-radius: 0; aspect-ratio: 1/1; transition: border-color .25s; } .tpl-meridian .p-card:hover .p-img, .tpl-meridian .rc-card:hover .rc-img { border-color: var(--ink); } .tpl-meridian .p-name, .tpl-meridian .rc-name { text-transform: uppercase !important; letter-spacing: .16em !important; font-size: 11.5px !important; font-weight: 500 !important; } .tpl-meridian .p-cat { letter-spacing: .24em; font-size: 10px; } .tpl-meridian .p-card .price, .tpl-meridian .rc-price { justify-content: center; } .tpl-meridian .rc-price b { color: var(--ink); font-weight: 500; letter-spacing: .06em; font-size: 14px; } .tpl-meridian .rc-chip span { background: transparent; border: 0; letter-spacing: .2em; text-transform: uppercase; font-size: 9.5px; color: var(--ink-3); } .tpl-meridian .rc-btn { border-radius: 0; letter-spacing: .16em; text-transform: uppercase; font-size: 10.5px; } .tpl-meridian .rc-btn-main { background: var(--ink); border-color: var(--ink); } .tpl-meridian .tag, .tpl-meridian .rc-tag { border-radius: 0; background: #fff; letter-spacing: .16em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; border: 1px solid var(--ink); } .tpl-meridian .rc-tag-sale { background: var(--ink); color: #fff; } .tpl-meridian .cat-tile { border-radius: 0; aspect-ratio: 3/4; } .tpl-meridian .cat-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(18,22,29,.55)); } .tpl-meridian .cat-tile .t { justify-content: center; text-align: center; left: 12px; right: 12px; } .tpl-meridian .cat-tile h3 { text-transform: uppercase; letter-spacing: .26em; font-size: 13px; font-weight: 400; } .tpl-meridian .cat-tile .arr { display: none; } .tpl-meridian .trust { background: transparent; border-top: 1px solid var(--line); } .tpl-meridian .trust-item .ic { background: transparent; border: 1px solid var(--line); color: var(--ink); } .tpl-meridian .main-img { border-radius: 0; background: #f0f2f5; border: 0; } .tpl-meridian .pd-info h1 { font-weight: 300; letter-spacing: .08em; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); } .tpl-meridian .foot { background: #eef0f4; color: #4c5463; border-top: 1px solid var(--line); } .tpl-meridian .foot h4 { color: var(--ink); letter-spacing: .24em; font-weight: 500; } .tpl-meridian .foot a { color: #4c5463; } .tpl-meridian .foot-bottom { border-top-color: var(--line); color: var(--ink-3); } @media (max-width: 860px) { .tpl-meridian .hero-bg { left: 0; opacity: .22; -webkit-mask-image: none; mask-image: none; } .tpl-meridian .hero-in { padding: 64px 0; } } .tpl-meridian .hero-stock { background-position: center 40%; } .tpl-meridian .hero:has(.hero-stock) { background: #eceff3; } /* ---------- Tourbillon: midnight navy and gold. Roman capitals, centred header, circular "dial" categories, framed hero ---------- */ .tpl-tourbillon { --bg: #0a0f1e; --bg-2: #111a31; --line: #26314f; --ink: #ece8df; --ink-2: #b9b5aa; --ink-3: #837f76; --r: 3px; --r-lg: 6px; --r-sm: 2px; --brand-soft: color-mix(in srgb, var(--accent) 16%, #0a0f1e); --brand-soft-2: color-mix(in srgb, var(--accent) 28%, #0a0f1e); --brand-ink: color-mix(in srgb, var(--accent) 78%, #fff); color-scheme: dark; } .tpl-tourbillon h1, .tpl-tourbillon h2, .tpl-tourbillon h3, .tpl-tourbillon .display { font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: .08em; } .tpl-tourbillon .announce { background: #05080f; color: var(--accent); letter-spacing: .26em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .tpl-tourbillon .hdr { background: rgba(10,15,30,.94); border-bottom: 0; backdrop-filter: blur(10px); } .tpl-tourbillon .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 18px 0 12px; gap: 16px; } .tpl-tourbillon .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; font-family: 'Cinzel', Georgia, serif; font-size: 1.35em; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); } .tpl-tourbillon .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 300px; } .tpl-tourbillon .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-tourbillon .hdr .icon-link, .tpl-tourbillon .hdr .hdr-search .i { color: var(--ink); } .tpl-tourbillon .hdr-search input[type=search] { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 2px !important; color: var(--ink); } .tpl-tourbillon .nav-bar { background: rgba(10,15,30,.94); border-top: 0; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent), transparent) 1; } .tpl-tourbillon .nav-bar .wrap { justify-content: center; gap: 0; } .tpl-tourbillon .nav-link { color: var(--ink-2); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; padding: 12px 18px; } .tpl-tourbillon .nav-link:not(:first-child)::before { content: "◆"; color: var(--accent); font-size: 6px; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); opacity: .8; } .tpl-tourbillon .nav-link:hover, .tpl-tourbillon .nav-link.active { color: var(--accent); } .tpl-tourbillon .hero { background: #05080f; } .tpl-tourbillon .hero-bg { opacity: .6; } .tpl-tourbillon .hero::after { background: radial-gradient(ellipse at center, rgba(10,15,30,.25), rgba(5,8,15,.92) 85%); } .tpl-tourbillon .hero::before { content: ""; position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); z-index: 3; pointer-events: none; } .tpl-tourbillon .hero-in { margin: 0 auto; text-align: center; max-width: 760px; padding: 136px 0 144px; } .tpl-tourbillon .hero p { margin-left: auto; margin-right: auto; color: var(--ink-2); } .tpl-tourbillon .hero .row { justify-content: center; } .tpl-tourbillon .hero h1 { font-size: clamp(32px, 5vw, 62px); letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(180deg, #f8eac4, var(--accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .tpl-tourbillon .hero .eyebrow { background: transparent; border: 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); border-radius: 0; padding: 8px 18px; color: var(--accent); letter-spacing: .3em; backdrop-filter: none; } .tpl-tourbillon .hero .eyebrow .i { display: none; } .tpl-tourbillon .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); } .tpl-tourbillon .btn:hover { background: var(--accent); color: #0a0f1e; border-color: var(--accent); } .tpl-tourbillon .btn-primary, .tpl-tourbillon .btn-accent { background: var(--accent); border-color: var(--accent); color: #0a0f1e; font-weight: 700; } .tpl-tourbillon .btn-primary:hover, .tpl-tourbillon .btn-accent:hover { background: #f0dca4; border-color: #f0dca4; } .tpl-tourbillon .btn-light { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--accent) 60%, transparent); } .tpl-tourbillon input[type=text], .tpl-tourbillon input[type=email], .tpl-tourbillon input[type=tel], .tpl-tourbillon input[type=password], .tpl-tourbillon input[type=number], .tpl-tourbillon input[type=search], .tpl-tourbillon select, .tpl-tourbillon textarea { background-color: var(--bg-2); color: var(--ink); border-color: #323e60; } .tpl-tourbillon .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 6px; } .tpl-tourbillon .section-head h2 { color: var(--accent); text-transform: uppercase; letter-spacing: .26em; font-size: clamp(18px, 2.2vw, 24px); } .tpl-tourbillon .section-head h2::after { content: "◆ ◆ ◆"; display: block; font-size: 8px; letter-spacing: .5em; color: var(--accent); margin-top: 12px; opacity: .8; } .tpl-tourbillon .section-head .link-arrow { color: var(--ink-2); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .tpl-tourbillon .rc-section .section-head { align-items: center; border-bottom: 0; } .tpl-tourbillon .rc-section .section-head h2 { border-bottom: 0; font-size: clamp(16px, 2vw, 20px) !important; color: var(--accent); } .tpl-tourbillon .section-alt { background: var(--bg-2); } .tpl-tourbillon .trust { background: var(--bg); border-color: var(--line); } .tpl-tourbillon .trust-item { background: transparent; border-color: var(--line); } .tpl-tourbillon .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .tpl-tourbillon .cat-grid { gap: 30px; } .tpl-tourbillon .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); margin: 8px; } .tpl-tourbillon .cat-tile::after { background: radial-gradient(circle, rgba(5,8,15,.18), rgba(5,8,15,.72)); } .tpl-tourbillon .cat-tile .t { inset: 0; justify-content: center; align-items: center; text-align: center; } .tpl-tourbillon .cat-tile h3 { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: #f8eac4; } .tpl-tourbillon .cat-tile .arr { display: none; } .tpl-tourbillon .p-card, .tpl-tourbillon .rc-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 12px; transition: .25s; } .tpl-tourbillon .p-card:hover, .tpl-tourbillon .rc-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 22px 40px -26px var(--accent); transform: translateY(-3px); } .tpl-tourbillon .p-img, .tpl-tourbillon .rc-img { background: radial-gradient(circle at 50% 38%, #1c2845, #0c1224); border-radius: 2px; } .tpl-tourbillon .p-name, .tpl-tourbillon .rc-name { font-family: 'Cinzel', Georgia, serif; letter-spacing: .08em; text-transform: uppercase !important; font-size: 12.5px !important; font-weight: 600 !important; } .tpl-tourbillon .p-name a:hover, .tpl-tourbillon .rc-name a:hover { color: var(--accent); } .tpl-tourbillon .p-cat { color: var(--ink-3); letter-spacing: .24em; font-size: 10px; } .tpl-tourbillon .rc-price b, .tpl-tourbillon .price b { color: var(--accent); } .tpl-tourbillon .rc-chip span { background: transparent; border-color: var(--line); color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; } .tpl-tourbillon .rc-btn { border-radius: 0; border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; } .tpl-tourbillon .rc-btn:hover { background: var(--accent); color: #0a0f1e; } .tpl-tourbillon .rc-btn-main { background: var(--accent); color: #0a0f1e; border-color: var(--accent); } .tpl-tourbillon .tag, .tpl-tourbillon .rc-tag { border-radius: 0; background: #05080f; color: var(--accent); border: 1px solid var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; } .tpl-tourbillon .rc-tag-sale { background: var(--accent); color: #0a0f1e; } .tpl-tourbillon .rc-tag-out { background: #05080f; color: var(--ink-3); border-color: var(--line); } .tpl-tourbillon .main-img { border: 1px solid var(--accent); border-radius: 2px; background: radial-gradient(circle at 50% 38%, #1c2845, #0c1224); } .tpl-tourbillon .pd-info h1 { color: var(--accent); letter-spacing: .1em; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); } .tpl-tourbillon .assure, .tpl-tourbillon .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-tourbillon .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--accent); } .tpl-tourbillon .toast, .tpl-tourbillon .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-tourbillon .foot { background: #05080f; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .tpl-tourbillon .foot h4 { color: var(--accent); letter-spacing: .26em; font-family: 'Cinzel', Georgia, serif; } .tpl-tourbillon .hero:has(.hero-stock) { background: #05080f; } .tpl-tourbillon .hero-stock { background-position: center 45%; } @media (max-width: 860px) { .tpl-tourbillon .hdr-in { grid-template-columns: 1fr auto; padding: 8px 0; } .tpl-tourbillon .hdr-in .brand { grid-column: 1; justify-self: start; font-size: 1.05em; letter-spacing: .2em; } .tpl-tourbillon .hdr-in .hdr-actions { grid-column: 2; } .tpl-tourbillon .hero-in { padding: 84px 0 90px; } .tpl-tourbillon .hero::before { inset: 10px; } .tpl-tourbillon .cat-grid { gap: 18px; } } /* ---------- Aviator: field and pilot watches. Khaki paper, olive header with stitched edge, condensed capitals, numbered categories ---------- */ .tpl-aviator { --bg: #efeadc; --bg-2: #e5dfca; --line: #cdc4a8; --ink: #1c2015; --ink-2: #494f36; --ink-3: #7c805f; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-aviator h1, .tpl-aviator h2, .tpl-aviator h3, .tpl-aviator .display { font-family: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .tpl-aviator .announce { background: var(--accent); color: #1c1306; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; } .tpl-aviator .hdr { background: var(--brand); border-bottom: 3px dashed color-mix(in srgb, var(--accent) 85%, #fff); backdrop-filter: none; } .tpl-aviator .hdr .brand, .tpl-aviator .hdr .icon-link, .tpl-aviator .hdr .hdr-search .i { color: #f3efdf; } .tpl-aviator .hdr .brand { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1.5em; } .tpl-aviator .hdr-search input[type=search] { background: rgba(0,0,0,.22) !important; border: 1px solid rgba(243,239,223,.28) !important; border-radius: 0 !important; color: #f3efdf; } .tpl-aviator .hdr-search input[type=search]::placeholder { color: rgba(243,239,223,.65); } .tpl-aviator .nav-bar { background: var(--bg); border-bottom: 1px solid var(--line); } .tpl-aviator .nav-bar .wrap { justify-content: center; } .tpl-aviator .nav-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 14.5px; } .tpl-aviator .nav-link.active::after { height: 4px; background: var(--accent); } .tpl-aviator .hero { background: #1d2314; display: flex; align-items: flex-end; min-height: 560px; } .tpl-aviator .hero-bg { opacity: 1; } .tpl-aviator .hero::after { background: linear-gradient(180deg, rgba(20,24,12,.05) 20%, rgba(20,24,12,.9)); } .tpl-aviator .hero-in { max-width: 760px; padding: 90px 0 64px; } .tpl-aviator .hero h1 { font-size: clamp(44px, 7.4vw, 98px); line-height: .94; color: #f6f2e3; letter-spacing: .01em; } .tpl-aviator .hero p { color: #e7e2cf; opacity: 1; } .tpl-aviator .hero .eyebrow { background: var(--accent); color: #1c1306; border-radius: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .2em; backdrop-filter: none; clip-path: polygon(0 0, 100% 0, 100% 62%, 93% 100%, 0 100%); padding-right: 22px; } .tpl-aviator .btn { border-radius: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 15px; border: 2px solid var(--ink); } .tpl-aviator .btn-primary { background: var(--brand); border-color: var(--brand); color: #f3efdf; } .tpl-aviator .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #1c1306; } .tpl-aviator .btn-accent { background: var(--accent); border-color: var(--accent); color: #1c1306; } .tpl-aviator .btn-accent:hover { background: #f6f2e3; border-color: #f6f2e3; } .tpl-aviator .hero .btn-light { background: transparent; color: #f6f2e3; border-color: #f6f2e3; } .tpl-aviator .section-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; } .tpl-aviator .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); } .tpl-aviator .section-head h2::before { content: "▮ "; color: var(--accent); font-size: .6em; vertical-align: .18em; } .tpl-aviator .section-head .link-arrow { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); } .tpl-aviator .rc-section .section-head { border-bottom: 2px solid var(--ink); } .tpl-aviator .rc-section .section-head h2 { border-bottom: 0; font-size: clamp(22px, 2.6vw, 30px) !important; letter-spacing: .06em; padding-bottom: 6px; } .tpl-aviator .section-alt { background: var(--bg-2); } .tpl-aviator .p-card, .tpl-aviator .rc-card { background: #f8f4e6; border: 1px solid var(--ink); border-top: 5px solid var(--accent); padding: 10px 10px 14px; transition: transform .15s, box-shadow .15s; } .tpl-aviator .p-card:hover, .tpl-aviator .rc-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); border-color: var(--ink); } .tpl-aviator .p-img, .tpl-aviator .rc-img { position: relative; background: #d9d2b8; border-radius: 0; } .tpl-aviator .p-img::after, .tpl-aviator .rc-img::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.75); pointer-events: none; } .tpl-aviator .p-name, .tpl-aviator .rc-name { font-family: 'Barlow Condensed', sans-serif; font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; } .tpl-aviator .p-cat { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .18em; color: var(--ink-3); } .tpl-aviator .rc-price b, .tpl-aviator .price b { color: var(--ink); font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: .02em; } .tpl-aviator .rc-chip span { background: transparent; border: 1px solid var(--ink-3); border-radius: 0; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; } .tpl-aviator .rc-btn { border-radius: 0; border: 2px solid var(--ink); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; } .tpl-aviator .rc-btn-main { background: var(--brand); border-color: var(--brand); color: #f3efdf; } .tpl-aviator .tag, .tpl-aviator .rc-tag { border-radius: 0; background: var(--ink); color: #f3efdf; border: 0; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; box-shadow: none; } .tpl-aviator .rc-tag-sale, .tpl-aviator .tag-sale { background: var(--accent); color: #1c1306; } .tpl-aviator .cat-grid { counter-reset: av; } .tpl-aviator .cat-tile { counter-increment: av; aspect-ratio: 5/4; border: 2px solid var(--ink); } .tpl-aviator .cat-tile::after { background: linear-gradient(180deg, transparent 35%, rgba(20,24,12,.86)); } .tpl-aviator .cat-tile h3 { font-size: 26px; letter-spacing: .04em; } .tpl-aviator .cat-tile h3::before { content: counter(av, decimal-leading-zero) " /"; color: var(--accent); margin-right: 9px; font-size: .75em; } .tpl-aviator .cat-tile .arr { border-radius: 0; background: var(--accent); color: #1c1306; } .tpl-aviator .trust { background: var(--bg-2); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } .tpl-aviator .trust-item { border-color: var(--ink); } .tpl-aviator .trust-item .ic { border-radius: 0; background: var(--ink); color: var(--accent); } .tpl-aviator .trust-item b { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; } .tpl-aviator .main-img { border: 2px solid var(--ink); border-radius: 0; background: #d9d2b8; } .tpl-aviator .pd-info h1 { font-size: clamp(32px, 4vw, 50px); } .tpl-aviator .foot { background: #1d2314; border-top: 4px solid var(--accent); } .tpl-aviator .foot h4 { font-family: 'Barlow Condensed', sans-serif; color: var(--accent); letter-spacing: .2em; font-size: 15px; } @media (max-width: 860px) { .tpl-aviator .hero { min-height: 440px; } .tpl-aviator .hero-in { padding: 64px 0 40px; } } .tpl-aviator .hero:has(.hero-stock) { background: #1d2314; } .tpl-aviator .hero-stock { background-position: center 55%; } /* ===================================================================================================================================== Ladies garments: Bloom (romantic floral), Rangoli (festive and colourful), Terra (earthy linen), Velvet (evening glamour) ===================================================================================================================================== */ /* ---------- Bloom: romantic and floral. Blush header with a scalloped edge, italic serif, frosted hero card, flower dividers ---------- */ .tpl-bloom { --bg: #fffaf8; --bg-2: #fcecec; --line: #f2d9db; --ink: #3a2a31; --ink-2: #6e5660; --ink-3: #a3909a; --r: 18px; --r-lg: 28px; --r-sm: 10px; } .tpl-bloom h1, .tpl-bloom h2, .tpl-bloom h3, .tpl-bloom .display { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: .005em; } .tpl-bloom .announce { background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; letter-spacing: .03em; } .tpl-bloom .hdr { background: var(--bg-2); border-bottom: 0; backdrop-filter: none; margin-bottom: 12px; overflow: visible; } .tpl-bloom .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 12px 0, var(--bg-2) 11px, transparent 12px) 0 0 / 24px 12px repeat-x; pointer-events: none; } .tpl-bloom .hdr .brand { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.55em; letter-spacing: 0; color: var(--brand); } .tpl-bloom .hdr-search input[type=search] { background: #fff !important; border-color: var(--line) !important; border-radius: 999px !important; } .tpl-bloom .nav-bar { background: transparent; border-top: 0; } .tpl-bloom .nav-bar .wrap { justify-content: center; gap: 12px; } .tpl-bloom .nav-link { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; } .tpl-bloom .nav-link.active, .tpl-bloom .nav-link:hover { color: var(--brand); } .tpl-bloom .nav-link.active::after { height: 2px; background: var(--accent); border-radius: 2px; } .tpl-bloom .hero { background: color-mix(in srgb, var(--accent) 22%, #fff); color: var(--ink); } .tpl-bloom .hero-bg { left: 34%; opacity: 1; background-position: center 22%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%); } .tpl-bloom .hero::after { content: none; } .tpl-bloom .hero-in { margin: 70px 0; padding: 48px 52px 52px; max-width: 540px; background: rgba(255,250,248,.88); backdrop-filter: blur(8px); border-radius: 30px; box-shadow: 0 30px 60px -34px rgba(90,40,60,.45); } .tpl-bloom .hero h1 { color: var(--ink); font-style: italic; font-weight: 600; font-size: clamp(36px, 5vw, 62px); line-height: 1.04; } .tpl-bloom .hero p { color: var(--ink-2); opacity: 1; } .tpl-bloom .hero .eyebrow { background: #fff; color: var(--brand); border: 1px solid var(--line); backdrop-filter: none; text-transform: none; letter-spacing: .04em; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; font-weight: 600; } .tpl-bloom .btn { border-radius: 999px; font-weight: 650; } .tpl-bloom .btn-primary, .tpl-bloom .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-bloom .btn-primary:hover, .tpl-bloom .btn-accent:hover { background: color-mix(in srgb, var(--brand) 82%, #000); border-color: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-bloom .btn-light { background: #fff; color: var(--brand); border-color: var(--line); } .tpl-bloom .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 4px; } .tpl-bloom .section-head h2 { font-style: italic; font-size: clamp(30px, 3.8vw, 44px); color: var(--ink); } .tpl-bloom .section-head h2::before, .tpl-bloom .section-head h2::after { content: "✿"; color: var(--accent); font-style: normal; font-size: .5em; margin: 0 14px; vertical-align: .35em; } .tpl-bloom .section-head .link-arrow { color: var(--brand); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; } .tpl-bloom .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-bloom .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: clamp(26px, 3.2vw, 36px) !important; padding-bottom: 0; } .tpl-bloom .rc-section .section-head h2::before, .tpl-bloom .rc-section .section-head h2::after { content: "✿" !important; } .tpl-bloom .section-alt { background: var(--bg-2); } .tpl-bloom .p-card, .tpl-bloom .rc-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 10px 10px 16px; box-shadow: 0 16px 32px -28px rgba(120,50,80,.5); transition: .25s; } .tpl-bloom .p-card:hover, .tpl-bloom .rc-card:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -26px color-mix(in srgb, var(--brand) 55%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); } .tpl-bloom .p-img, .tpl-bloom .rc-img { border-radius: 20px; aspect-ratio: 3/4; background: var(--bg-2); } .tpl-bloom .p-name, .tpl-bloom .rc-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px !important; font-weight: 600 !important; } .tpl-bloom .rc-price b, .tpl-bloom .price b { color: var(--brand); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 700; } .tpl-bloom .rc-chip span { background: color-mix(in srgb, var(--accent) 22%, #fff); border-color: transparent; color: color-mix(in srgb, var(--accent) 60%, #000); border-radius: 999px; } .tpl-bloom .rc-btn { border-radius: 999px; border-color: var(--brand); color: var(--brand); } .tpl-bloom .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-bloom .rc-btn-main { background: var(--brand); color: #fff; } .tpl-bloom .tag, .tpl-bloom .rc-tag { background: var(--accent); color: #231319; border: 0; border-radius: 999px; box-shadow: none; } .tpl-bloom .cat-grid { gap: 22px; } .tpl-bloom .cat-tile { aspect-ratio: 3/4; border-radius: 28px; } .tpl-bloom .cat-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(80,30,50,.32)); } .tpl-bloom .cat-tile .t { left: 14px; right: 14px; bottom: 14px; background: rgba(255,250,248,.9); color: var(--ink); padding: 10px 16px; border-radius: 999px; backdrop-filter: blur(4px); } .tpl-bloom .cat-tile h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; } .tpl-bloom .cat-tile .arr { width: 30px; height: 30px; background: var(--brand); color: #fff; } .tpl-bloom .trust { background: transparent; border-color: var(--line); } .tpl-bloom .trust-item .ic { background: #fff; border: 1px solid var(--line); color: var(--brand); } .tpl-bloom .main-img { border-radius: 28px; border: 1px solid var(--line); } .tpl-bloom .pd-info h1 { font-style: italic; } .tpl-bloom .foot { background: #f6dede; color: #6e5660; border-top-left-radius: 36px; border-top-right-radius: 36px; } .tpl-bloom .foot h4 { color: var(--brand); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 20px; } .tpl-bloom .foot a { color: #6e5660; } .tpl-bloom .foot-bottom { border-top-color: #ebc9cb; color: #a3909a; } @media (max-width: 860px) { .tpl-bloom .hero-bg { left: 0; -webkit-mask-image: none; mask-image: none; } .tpl-bloom .hero-in { margin: 36px 0; padding: 32px 26px; } .tpl-bloom .cat-grid { gap: 14px; } } .tpl-bloom .hero:has(.hero-stock) { background: color-mix(in srgb, var(--accent) 22%, #fff); } /* ---------- Rangoli: festive and colourful. Magenta header with a zig-zag trim, dotted frames, leaf-shaped tiles ---------- */ .tpl-rangoli { --bg: #fffaf0; --bg-2: #fff0d4; --line: #f0d9a8; --ink: #2d1322; --ink-2: #66404f; --ink-3: #a07f8a; --r: 10px; --r-lg: 16px; --r-sm: 6px; } .tpl-rangoli h1, .tpl-rangoli h2, .tpl-rangoli h3, .tpl-rangoli .display { font-family: 'Yatra One', 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-rangoli .announce { background: var(--accent); color: color-mix(in srgb, var(--brand) 80%, #000); font-weight: 800; letter-spacing: .06em; font-size: 13px; } .tpl-rangoli .hdr { background: var(--brand); border-bottom: 0; backdrop-filter: none; margin-bottom: 10px; overflow: visible; } .tpl-rangoli .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none; background: linear-gradient(135deg, var(--brand) 50%, transparent 50%) 0 0 / 20px 10px repeat-x, linear-gradient(225deg, var(--brand) 50%, transparent 50%) 10px 0 / 20px 10px repeat-x; } .tpl-rangoli .hdr .brand, .tpl-rangoli .hdr .icon-link, .tpl-rangoli .hdr .hdr-search .i { color: #fff3d6; } .tpl-rangoli .hdr .brand { font-family: 'Yatra One', Georgia, serif; font-weight: 400; font-size: 1.5em; letter-spacing: .02em; } .tpl-rangoli .hdr-search input[type=search] { background: rgba(255,243,214,.16) !important; border-color: rgba(255,243,214,.4) !important; color: #fff3d6; } .tpl-rangoli .hdr-search input[type=search]::placeholder { color: rgba(255,243,214,.8); } .tpl-rangoli .nav-bar { background: var(--bg); border-top: 0; border-bottom: 3px dotted var(--accent); padding-top: 6px; } .tpl-rangoli .nav-bar .wrap { justify-content: center; } .tpl-rangoli .nav-link { font-weight: 700; border-radius: 999px; padding: 8px 16px; color: var(--ink); } .tpl-rangoli .nav-link:hover { background: var(--bg-2); } .tpl-rangoli .nav-link.active { background: var(--brand); color: #fff3d6; } .tpl-rangoli .nav-link.active::after { content: none; } .tpl-rangoli .hero { background: color-mix(in srgb, var(--brand) 85%, #000); } .tpl-rangoli .hero-bg { opacity: 1; background-position: center 30%; } .tpl-rangoli .hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 92%, transparent), color-mix(in srgb, var(--brand) 55%, transparent) 50%, transparent 85%); } .tpl-rangoli .hero::before { content: ""; position: absolute; inset: 14px; border: 3px dotted var(--accent); border-radius: 14px; z-index: 3; pointer-events: none; } .tpl-rangoli .hero-in { padding: 104px 0 112px; } .tpl-rangoli .hero h1 { color: #fff3d6; font-size: clamp(38px, 5.6vw, 70px); text-shadow: 0 3px 0 rgba(0,0,0,.18); } .tpl-rangoli .hero p { color: #ffe9c4; opacity: 1; } .tpl-rangoli .hero .eyebrow { background: var(--accent); color: color-mix(in srgb, var(--brand) 80%, #000); border-radius: 4px; font-weight: 800; backdrop-filter: none; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); padding-right: 26px; } .tpl-rangoli .btn { border-radius: 999px; font-weight: 800; letter-spacing: .02em; } .tpl-rangoli .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff3d6; } .tpl-rangoli .btn-primary:hover { background: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-rangoli .btn-accent { background: var(--accent); border-color: var(--accent); color: color-mix(in srgb, var(--brand) 80%, #000); } .tpl-rangoli .btn-accent:hover { background: #ffc233; border-color: #ffc233; } .tpl-rangoli .section-head { border-bottom: 3px dotted var(--accent); padding-bottom: 10px; } .tpl-rangoli .section-head h2 { color: var(--brand); font-size: clamp(28px, 3.6vw, 42px); } .tpl-rangoli .section-head h2::before { content: "❖ "; color: var(--accent); font-size: .6em; vertical-align: .2em; } .tpl-rangoli .section-head .link-arrow { color: var(--brand); font-weight: 800; } .tpl-rangoli .rc-section .section-head { border-bottom: 3px dotted var(--accent); } .tpl-rangoli .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: .01em; font-size: clamp(24px, 3vw, 32px) !important; } .tpl-rangoli .rc-section .section-head h2::before { content: "❖ " !important; } .tpl-rangoli .section-alt { background: var(--bg-2); } .tpl-rangoli .p-card, .tpl-rangoli .rc-card { background: #fff; border: 2px solid var(--line); border-bottom: 5px solid var(--accent); border-radius: 16px; padding: 8px 8px 14px; transition: .2s; } .tpl-rangoli .p-card:hover, .tpl-rangoli .rc-card:hover { border-color: var(--brand); border-bottom-color: var(--accent); transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 20px 32px -24px var(--brand); } .tpl-rangoli .p-img, .tpl-rangoli .rc-img { border-radius: 10px; aspect-ratio: 3/4; background: var(--bg-2); } .tpl-rangoli .p-name, .tpl-rangoli .rc-name { font-weight: 700 !important; } .tpl-rangoli .rc-price b, .tpl-rangoli .price b { color: var(--brand); font-weight: 800; } .tpl-rangoli .rc-chip span { background: var(--bg-2); border-color: var(--line); color: var(--brand); font-weight: 700; } .tpl-rangoli .rc-btn { border-radius: 999px; border-color: var(--brand); color: var(--brand); font-weight: 800; } .tpl-rangoli .rc-btn:hover { background: var(--brand); color: #fff3d6; } .tpl-rangoli .rc-btn-main { background: var(--brand); color: #fff3d6; } .tpl-rangoli .tag, .tpl-rangoli .rc-tag { background: var(--accent); color: color-mix(in srgb, var(--brand) 80%, #000); border: 0; border-radius: 4px; font-weight: 800; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); padding-right: 14px; box-shadow: none; } .tpl-rangoli .rc-tag-sale { background: var(--brand); color: #fff3d6; } .tpl-rangoli .cat-grid { gap: 22px; } .tpl-rangoli .cat-tile { aspect-ratio: 4/5; border-radius: 28px 90px 28px 90px; border: 3px solid var(--accent); } .tpl-rangoli .cat-tile::after { background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--brand) 82%, #000)); } .tpl-rangoli .cat-tile h3 { font-family: 'Yatra One', Georgia, serif; font-weight: 400; font-size: 24px; color: #fff3d6; } .tpl-rangoli .cat-tile .arr { background: var(--accent); color: color-mix(in srgb, var(--brand) 80%, #000); } .tpl-rangoli .trust { background: var(--bg-2); border-top: 3px dotted var(--accent); border-bottom: 3px dotted var(--accent); } .tpl-rangoli .trust-item { border-color: var(--line); } .tpl-rangoli .trust-item .ic { background: var(--brand); color: #fff3d6; } .tpl-rangoli .main-img { border: 3px solid var(--accent); border-radius: 16px; } .tpl-rangoli .foot { background: color-mix(in srgb, var(--brand) 78%, #000); color: #f1d4d9; border-top: 6px double var(--accent); } .tpl-rangoli .foot h4 { color: var(--accent); font-family: 'Yatra One', Georgia, serif; letter-spacing: .04em; text-transform: none; font-size: 18px; font-weight: 400; } .tpl-rangoli .foot a { color: #f1d4d9; } @media (max-width: 860px) { .tpl-rangoli .hero-in { padding: 64px 0 70px; } .tpl-rangoli .hero::before { inset: 8px; } .tpl-rangoli .cat-tile { border-radius: 22px 56px 22px 56px; } } .tpl-rangoli .hero:has(.hero-stock) { background: color-mix(in srgb, var(--brand) 85%, #000); } /* ---------- Terra: earthy and natural. Oat and terracotta, soft serif, blob-shaped hero picture, staggered cards ---------- */ .tpl-terra { --bg: #f6efe3; --bg-2: #ece1cf; --line: #dccfb7; --ink: #3a291e; --ink-2: #6b5545; --ink-3: #9c8872; --r: 26px; --r-lg: 38px; --r-sm: 14px; } .tpl-terra h1, .tpl-terra h2, .tpl-terra h3, .tpl-terra .display { font-family: 'DM Serif Display', 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -.005em; } .tpl-terra .announce { background: var(--brand); color: #f6efe3; letter-spacing: .04em; font-size: 12.5px; } .tpl-terra .hdr { background: var(--bg); border-bottom: 0; backdrop-filter: none; } .tpl-terra .hdr .brand { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 1.5em; letter-spacing: 0; color: var(--brand); } .tpl-terra .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: transparent !important; border-radius: 999px !important; } .tpl-terra .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px dashed var(--line); } .tpl-terra .nav-bar .wrap { justify-content: center; } .tpl-terra .nav-link { font-weight: 600; color: var(--ink-2); } .tpl-terra .nav-link:hover, .tpl-terra .nav-link.active { color: var(--brand); } .tpl-terra .nav-link.active::after { height: 6px; background: none; border-bottom: 2px solid var(--accent); border-radius: 50%; bottom: 2px; } .tpl-terra .hero { background: var(--bg-2); color: var(--ink); overflow: hidden; } .tpl-terra .hero::after { content: none; } .tpl-terra .hero-bg { inset: 7% 5% 7% auto; width: min(44%, 560px); opacity: 1; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; background-position: center 18%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent); } .tpl-terra .hero-in { max-width: 560px; padding: 120px 0 128px; } .tpl-terra .hero h1 { color: var(--ink); font-size: clamp(38px, 5.2vw, 68px); line-height: 1.03; } .tpl-terra .hero p { color: var(--ink-2); opacity: 1; } .tpl-terra .hero .eyebrow { background: var(--brand); color: #f6efe3; border-radius: 999px; backdrop-filter: none; text-transform: none; letter-spacing: .02em; font-weight: 600; } .tpl-terra .btn { border-radius: 999px; font-weight: 650; } .tpl-terra .btn-primary, .tpl-terra .btn-accent { background: var(--brand); border-color: var(--brand); color: #f6efe3; } .tpl-terra .btn-primary:hover, .tpl-terra .btn-accent:hover { background: color-mix(in srgb, var(--brand) 82%, #000); border-color: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-terra .btn-light { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); } .tpl-terra .section-head h2 { font-size: clamp(30px, 3.8vw, 46px); color: var(--ink); text-decoration: underline wavy var(--accent); text-decoration-thickness: 2px; text-underline-offset: 10px; } .tpl-terra .section-head .link-arrow { color: var(--brand); } .tpl-terra .rc-section .section-head { border-bottom: 0; } .tpl-terra .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: -.005em; font-size: clamp(28px, 3.4vw, 40px) !important; padding-bottom: 6px; } .tpl-terra .section-alt { background: var(--bg-2); } .tpl-terra .p-card, .tpl-terra .rc-card { background: var(--bg-2); border: 0; border-radius: 34px; padding: 12px 12px 18px; transition: transform .3s, box-shadow .3s; } .tpl-terra .section-alt .rc-card { background: var(--bg); } .tpl-terra .rc-grid > .rc-card:nth-child(even), .tpl-terra .p-grid > .p-card:nth-child(even) { transform: translateY(20px); } .tpl-terra .p-card:hover, .tpl-terra .rc-card:hover { transform: translateY(-6px) rotate(-1deg) !important; box-shadow: 0 26px 36px -28px rgba(90,50,30,.6); } .tpl-terra .p-img, .tpl-terra .rc-img { border-radius: 28px; aspect-ratio: 4/5; } .tpl-terra .p-name, .tpl-terra .rc-name { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400 !important; font-size: 19px !important; } .tpl-terra .rc-price b, .tpl-terra .price b { color: var(--brand); font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 19px; } .tpl-terra .rc-chip span { background: var(--bg); border-color: transparent; border-radius: 999px; color: var(--ink-2); } .tpl-terra .rc-btn { border-radius: 999px; border-color: var(--brand); color: var(--brand); } .tpl-terra .rc-btn:hover { background: var(--brand); color: #f6efe3; } .tpl-terra .rc-btn-main { background: var(--brand); color: #f6efe3; } .tpl-terra .tag, .tpl-terra .rc-tag { background: var(--accent); color: #3a291e; border: 0; border-radius: 999px; transform: rotate(-4deg); box-shadow: none; font-weight: 800; } .tpl-terra .rc-tag-sale { background: var(--brand); color: #f6efe3; } .tpl-terra .cat-grid { gap: 26px; } .tpl-terra .cat-tile { aspect-ratio: 1/1; border-radius: 46% 54% 41% 59% / 50% 40% 60% 50%; } .tpl-terra .cat-grid > .cat-tile:nth-child(even) { border-radius: 58% 42% 55% 45% / 45% 58% 42% 55%; } .tpl-terra .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(58,41,30,.6)); } .tpl-terra .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; } .tpl-terra .cat-tile h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px; } .tpl-terra .cat-tile .arr { display: none; } .tpl-terra .trust { background: transparent; border-color: var(--line); } .tpl-terra .trust-item .ic { background: var(--bg-2); color: var(--brand); } .tpl-terra .main-img { border-radius: 38px; background: var(--bg-2); } .tpl-terra .foot { background: #3a291e; color: #d8c7ae; border-top-left-radius: 48px; border-top-right-radius: 48px; } .tpl-terra .foot h4 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 20px; color: #f6efe3; } .tpl-terra .foot a { color: #d8c7ae; } @media (max-width: 860px) { .tpl-terra .hero-bg { inset: 0; width: auto; border-radius: 0; box-shadow: none; opacity: .3; } .tpl-terra .hero-in { padding: 64px 0 70px; } .tpl-terra .rc-grid > .rc-card:nth-child(even), .tpl-terra .p-grid > .p-card:nth-child(even) { transform: none; } } .tpl-terra .hero:has(.hero-stock) { background: var(--bg-2); } /* ---------- Velvet: evening and party wear. Aubergine night, rose-gold, high-contrast italic serif, right-aligned hero, satin shine ---------- */ .tpl-velvet { --bg: #150a1c; --bg-2: #1f1029; --line: #3b2348; --ink: #f7ecf1; --ink-2: #d0b8c6; --ink-3: #917b8d; --r: 6px; --r-lg: 10px; --r-sm: 4px; --rg: linear-gradient(135deg, #f3d3c1, #d9a58f 55%, #b9816f); --brand-soft: color-mix(in srgb, var(--accent) 16%, #150a1c); --brand-soft-2: color-mix(in srgb, var(--accent) 28%, #150a1c); --brand-ink: color-mix(in srgb, var(--accent) 75%, #fff); color-scheme: dark; } .tpl-velvet h1, .tpl-velvet h2, .tpl-velvet h3, .tpl-velvet .display { font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: .01em; } .tpl-velvet .announce { background: #0c0510; color: var(--accent); letter-spacing: .22em; text-transform: uppercase; font-size: 10.5px; } .tpl-velvet .hdr { background: rgba(21,10,28,.92); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent), transparent) 1; backdrop-filter: blur(10px); } .tpl-velvet .hdr .brand { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.6em; letter-spacing: .01em; color: var(--accent); } .tpl-velvet .hdr .icon-link, .tpl-velvet .hdr .hdr-search .i { color: var(--ink); } .tpl-velvet .hdr-search input[type=search] { background: rgba(255,255,255,.06) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--ink); } .tpl-velvet .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-velvet .nav-bar .wrap { justify-content: center; } .tpl-velvet .nav-link { color: var(--ink-2); font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 16px; letter-spacing: .02em; } .tpl-velvet .nav-link:hover, .tpl-velvet .nav-link.active { color: var(--accent); } .tpl-velvet .nav-link.active::after { background: var(--rg); height: 2px; } .tpl-velvet .hero { background: #0c0510; } .tpl-velvet .hero-bg { opacity: 1; background-position: center 28%; } .tpl-velvet .hero::after { background: linear-gradient(270deg, rgba(21,10,28,.94), rgba(21,10,28,.55) 52%, rgba(21,10,28,.05)); } .tpl-velvet .hero-in { margin-left: auto; text-align: right; max-width: 600px; padding: 118px 0 126px; } .tpl-velvet .hero p { margin-left: auto; color: var(--ink-2); } .tpl-velvet .hero .row { justify-content: flex-end; } .tpl-velvet .hero h1 { padding-right: .14em; font-style: italic; font-weight: 500; font-size: clamp(40px, 5.8vw, 76px); line-height: 1.02; background: var(--rg); -webkit-background-clip: text; background-clip: text; color: transparent; } .tpl-velvet .hero .eyebrow { background: transparent; border: 1px solid var(--accent); border-radius: 0; color: var(--accent); letter-spacing: .3em; backdrop-filter: none; font-size: 11px; } .tpl-velvet .hero .eyebrow .i { display: none; } .tpl-velvet .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; border-color: color-mix(in srgb, var(--accent) 65%, transparent); color: var(--ink); } .tpl-velvet .btn:hover { background: var(--accent); color: #1a0d22; border-color: var(--accent); } .tpl-velvet .btn-primary, .tpl-velvet .btn-accent { background: var(--rg); border-color: transparent; color: #1a0d22; font-weight: 700; } .tpl-velvet .btn-primary:hover, .tpl-velvet .btn-accent:hover { filter: brightness(1.08); background: var(--rg); } .tpl-velvet .btn-light { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--accent) 65%, transparent); } .tpl-velvet input[type=text], .tpl-velvet input[type=email], .tpl-velvet input[type=tel], .tpl-velvet input[type=password], .tpl-velvet input[type=number], .tpl-velvet input[type=search], .tpl-velvet select, .tpl-velvet textarea { background-color: var(--bg-2); color: var(--ink); border-color: #4a2e59; } .tpl-velvet .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 4px; } .tpl-velvet .section-head h2 { font-style: italic; font-size: clamp(32px, 4vw, 50px); color: var(--ink); } .tpl-velvet .section-head h2::after { content: ""; display: block; width: 90px; height: 1px; margin: 14px auto 0; background: var(--rg); } .tpl-velvet .section-head .link-arrow { color: var(--accent); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .tpl-velvet .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-velvet .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: .01em; font-size: clamp(28px, 3.4vw, 40px) !important; padding-bottom: 0; } .tpl-velvet .section-alt { background: var(--bg-2); } .tpl-velvet .trust { background: var(--bg); border-color: var(--line); } .tpl-velvet .trust-item { background: transparent; border-color: var(--line); } .tpl-velvet .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--accent); } .tpl-velvet .p-card, .tpl-velvet .rc-card { background: linear-gradient(160deg, #26132f, #170b1f); border: 1px solid var(--line); border-radius: 8px; padding: 10px 10px 14px; transition: .3s; } .tpl-velvet .p-card:hover, .tpl-velvet .rc-card:hover { border-color: var(--accent); box-shadow: 0 24px 44px -26px rgba(217,165,143,.55); transform: translateY(-4px); } .tpl-velvet .p-img, .tpl-velvet .rc-img { position: relative; border-radius: 4px; aspect-ratio: 3/4; background: #1d0f26; } .tpl-velvet .p-img::after, .tpl-velvet .rc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); transform: translateX(-120%); transition: transform .8s ease; pointer-events: none; } .tpl-velvet .p-card:hover .p-img::after, .tpl-velvet .rc-card:hover .rc-img::after { transform: translateX(120%); } .tpl-velvet .p-name, .tpl-velvet .rc-name { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-size: 17px !important; font-weight: 500 !important; } .tpl-velvet .p-name a:hover, .tpl-velvet .rc-name a:hover { color: var(--accent); } .tpl-velvet .rc-price b, .tpl-velvet .price b { color: var(--accent); font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; } .tpl-velvet .rc-chip span { background: transparent; border-color: var(--line); color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; } .tpl-velvet .rc-btn { border-radius: 0; border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; } .tpl-velvet .rc-btn:hover { background: var(--accent); color: #1a0d22; } .tpl-velvet .rc-btn-main { background: var(--rg); color: #1a0d22; border-color: transparent; font-weight: 800; } .tpl-velvet .tag, .tpl-velvet .rc-tag { background: #0c0510; color: var(--accent); border: 1px solid var(--accent); border-radius: 0; letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; } .tpl-velvet .rc-tag-sale { background: var(--rg); color: #1a0d22; border-color: transparent; } .tpl-velvet .rc-tag-out { background: #0c0510; color: var(--ink-3); border-color: var(--line); } .tpl-velvet .cat-grid { gap: 22px; } .tpl-velvet .cat-tile { aspect-ratio: 2/3; border-radius: 4px; border: 1px solid var(--line); } .tpl-velvet .cat-tile::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); z-index: 1; pointer-events: none; } .tpl-velvet .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(12,5,16,.9)); } .tpl-velvet .cat-tile .t { justify-content: center; text-align: center; bottom: 28px; z-index: 2; } .tpl-velvet .cat-tile h3 { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; font-size: 24px; color: #f3d3c1; } .tpl-velvet .cat-tile .arr { display: none; } .tpl-velvet .main-img { border: 1px solid var(--accent); border-radius: 4px; background: #1d0f26; } .tpl-velvet .pd-info h1 { font-style: italic; color: var(--accent); } .tpl-velvet .assure, .tpl-velvet .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-velvet .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--accent); } .tpl-velvet .toast, .tpl-velvet .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-velvet .foot { background: #0c0510; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .tpl-velvet .foot h4 { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 19px; color: var(--accent); font-weight: 500; } @media (max-width: 860px) { .tpl-velvet .hero-in { padding: 76px 0 82px; margin: 0; } .tpl-velvet .hero::after { background: linear-gradient(180deg, rgba(21,10,28,.55), rgba(21,10,28,.9)); } .tpl-velvet .cat-grid { gap: 12px; } } .tpl-velvet .hero:has(.hero-stock) { background: #0c0510; } /* uppercase, letter-spaced button labels need the full tile width on phones */ @media (max-width: 560px) { .tpl-meridian .rc-actions, .tpl-tourbillon .rc-actions, .tpl-velvet .rc-actions { grid-template-columns: 1fr; } .tpl-meridian .rc-btn, .tpl-tourbillon .rc-btn, .tpl-velvet .rc-btn { letter-spacing: .08em; padding: 0 4px; } } @media (max-width: 560px) { .tpl-aviator .rc-actions { grid-template-columns: 1fr; } .tpl-aviator .rc-btn { letter-spacing: .06em; padding: 0 4px; } .tpl-aviator .trust-item { padding: 16px 12px; gap: 10px; min-width: 0; } .tpl-aviator .trust-item b { font-size: 13.5px; letter-spacing: .03em; } .tpl-aviator .trust-item .ic { width: 38px; height: 38px; } } /* ===================================================================================================================================== Fashion and Apparel (batch 1): Indigo (denim and workwear), Sorbet (Gen-Z pastel), Ivory (quiet luxury), Marine (nautical), Kinetic (activewear) ===================================================================================================================================== */ /* ---------- Indigo: denim and workwear. Leather-patch logo, twill header, diagonal-cut hero, list-row listings, hang-tag labels ---------- */ .tpl-indigo { --bg: #f2ede1; --bg-2: #e8e1d0; --line: #d6cdb6; --ink: #1b2540; --ink-2: #48506b; --ink-3: #868a9a; --r: 6px; --r-lg: 8px; --r-sm: 4px; --twill: repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 2px, transparent 2px 5px); } .tpl-indigo h1, .tpl-indigo h2, .tpl-indigo h3, .tpl-indigo .display { font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; letter-spacing: -.01em; } .tpl-indigo .announce { background: #121a30; color: #f0c36a; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 600; } .tpl-indigo .hdr { background: var(--brand) var(--twill); border-bottom: 3px solid #121a30; backdrop-filter: none; } .tpl-indigo .hdr .brand { background: #b98b59; color: #2a1a0a; padding: 6px 16px; border-radius: 6px; outline: 2px dashed rgba(42,26,10,.55); outline-offset: -5px; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 1.1em; box-shadow: 0 2px 0 rgba(0,0,0,.25); } .tpl-indigo .hdr .brand img { filter: none; } .tpl-indigo .hdr .icon-link, .tpl-indigo .hdr .hdr-search .i { color: #f2ede1; } .tpl-indigo .hdr-search input[type=search] { background: rgba(0,0,0,.22) !important; border: 1px solid rgba(242,237,225,.28) !important; border-radius: 6px !important; color: #f2ede1; } .tpl-indigo .hdr-search input[type=search]::placeholder { color: rgba(242,237,225,.65); } .tpl-indigo .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-indigo .nav-bar .wrap { justify-content: center; gap: 4px; } .tpl-indigo .nav-link { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; padding: 12px 14px; } .tpl-indigo .nav-link:not(:first-child)::before { content: ""; position: absolute; left: -2px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #b98b59; } .tpl-indigo .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-indigo .hero { background: var(--brand) var(--twill); } .tpl-indigo .hero-bg { left: 42%; opacity: 1; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); background-position: center 20%; } .tpl-indigo .hero::after { content: none; } .tpl-indigo .hero-in { max-width: 560px; padding: 110px 0 118px; } .tpl-indigo .hero h1 { color: #f6f0e0; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; } .tpl-indigo .hero p { color: #d3d6e4; opacity: 1; } .tpl-indigo .hero .eyebrow { background: var(--accent); color: #1b1203; border-radius: 3px; font-weight: 800; backdrop-filter: none; letter-spacing: .14em; border: 2px dashed rgba(27,18,3,.5); outline: 3px solid var(--accent); outline-offset: 0; } .tpl-indigo .btn { border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } .tpl-indigo .btn-primary { background: var(--brand); border-color: var(--brand); color: #f6f0e0; } .tpl-indigo .btn-primary:hover { background: #121a30; } .tpl-indigo .btn-accent { background: var(--accent); border-color: var(--accent); color: #1b1203; } .tpl-indigo .btn-accent:hover { background: #f0b53a; border-color: #f0b53a; } .tpl-indigo .hero .btn-light { background: transparent; color: #f6f0e0; border: 2px solid #f6f0e0; } .tpl-indigo .section-head { border-bottom: 3px double var(--ink); padding-bottom: 10px; } .tpl-indigo .section-head h2 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-indigo .section-head .link-arrow { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .tpl-indigo .rc-section .section-head { border-bottom: 3px double var(--ink); } .tpl-indigo .rc-section .section-head h2 { border-bottom: 0; font-size: clamp(22px, 2.6vw, 30px) !important; text-transform: none; letter-spacing: -.01em; } .tpl-indigo .section-alt { background: var(--bg-2); } .tpl-indigo .rc-card { background: #fbf8ef; border: 1px solid var(--line); border-radius: 6px; padding: 10px 10px 14px; transition: .2s; } .tpl-indigo .rc-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 16px 26px -22px var(--brand); } .tpl-indigo .rc-img { border-radius: 4px; aspect-ratio: 4/5; } .tpl-indigo .rc-tag, .tpl-indigo .tag { background: #b98b59; color: #2a1a0a; border: 0; border-radius: 3px 3px 3px 3px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; padding-left: 22px; position: relative; } .tpl-indigo .rc-tag::before, .tpl-indigo .tag::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fbf8ef; box-shadow: inset 0 0 0 1px rgba(42,26,10,.4); } .tpl-indigo .rc-tag-sale { background: var(--accent); color: #1b1203; } .tpl-indigo .rc-name, .tpl-indigo .p-name { font-family: 'Roboto Slab', Georgia, serif; font-weight: 600 !important; font-size: 14.5px !important; } .tpl-indigo .rc-price b, .tpl-indigo .price b { color: var(--brand); font-family: 'Roboto Slab', Georgia, serif; } .tpl-indigo .rc-chip span { background: transparent; border: 1px dashed var(--ink-3); border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; } .tpl-indigo .rc-btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--brand); color: var(--brand); } .tpl-indigo .rc-btn:hover { background: var(--brand); color: #f6f0e0; } .tpl-indigo .rc-btn-main { background: var(--brand); color: #f6f0e0; } .tpl-indigo .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .tpl-indigo .p-card { flex-direction: row; align-items: center; gap: 18px; background: #fbf8ef; border: 1px solid var(--line); border-radius: 6px; padding: 12px; transition: .2s; } .tpl-indigo .p-card:hover { border-color: var(--brand); box-shadow: 0 14px 24px -20px var(--brand); } .tpl-indigo .p-img { width: 42%; flex: none; margin: 0; aspect-ratio: 4/5; border-radius: 4px; } .tpl-indigo .p-card > :not(.p-img):not(.p-media) { min-width: 0; } .tpl-indigo .cat-tile { border-radius: 6px; aspect-ratio: 4/5; } .tpl-indigo .cat-tile::before { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(255,255,255,.75); border-radius: 4px; z-index: 1; pointer-events: none; } .tpl-indigo .cat-tile h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; } .tpl-indigo .cat-tile .arr { border-radius: 4px; background: var(--accent); color: #1b1203; } .tpl-indigo .trust { background: #e8e1d0; border-color: var(--line); } .tpl-indigo .trust-item .ic { background: var(--brand); color: #f0c36a; border-radius: 6px; } .tpl-indigo .main-img { border: 1px solid var(--line); border-radius: 6px; } .tpl-indigo .foot { background: #121a30 var(--twill); border-top: 4px solid #b98b59; } .tpl-indigo .foot h4 { font-family: 'Roboto Slab', Georgia, serif; color: #f0c36a; } @media (max-width: 1100px) { .tpl-indigo .p-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .tpl-indigo .hero-bg { left: 0; clip-path: none; opacity: .28; } .tpl-indigo .hero-in { padding: 64px 0; } .tpl-indigo .p-card { flex-direction: column; align-items: stretch; } .tpl-indigo .p-img { width: 100%; } } .tpl-indigo .hero:has(.hero-stock) { background: var(--brand) var(--twill); } /* ---------- Sorbet: Gen-Z pastel. Floating pill header, polaroid hero over a gradient mesh, masonry listings, rainbow pastel cards ---------- */ .tpl-sorbet { --bg: #fffafc; --bg-2: #f5efff; --line: #eadff8; --ink: #231a3a; --ink-2: #5b4f78; --ink-3: #9a8fb3; --r: 22px; --r-lg: 30px; --r-sm: 12px; } .tpl-sorbet h1, .tpl-sorbet h2, .tpl-sorbet h3, .tpl-sorbet .display { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.03em; } .tpl-sorbet .announce { background: linear-gradient(90deg, #ffd6e7, #e0d4ff, #c9f4e4); color: #3a2a63; font-weight: 700; letter-spacing: .02em; font-size: 12.5px; } .tpl-sorbet .hdr { top: 10px; margin: 10px 14px 0; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: 0 14px 34px -22px rgba(109,74,255,.55); } .tpl-sorbet .hdr-in { padding: 0 12px; } .tpl-sorbet .hdr .brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.04em; color: var(--brand); } .tpl-sorbet .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: transparent !important; } .tpl-sorbet .nav-bar { background: transparent; border-top: 0; margin-top: 6px; } .tpl-sorbet .nav-bar .wrap { justify-content: center; gap: 8px; padding: 6px 0; } .tpl-sorbet .nav-link { border-radius: 999px; padding: 8px 16px; font-weight: 600; background: #fff; border: 1px solid var(--line); font-size: 13.5px; } .tpl-sorbet .nav-link:hover { background: #ffe3ee; } .tpl-sorbet .nav-link.active { background: var(--brand); color: #fff; border-color: var(--brand); } .tpl-sorbet .nav-link.active::after { content: none; } .tpl-sorbet .hero { margin: 8px 14px 0; border-radius: 40px; color: var(--ink); background: radial-gradient(circle at 12% 20%, #ffd6e7 0, transparent 42%), radial-gradient(circle at 80% 15%, #d9ccff 0, transparent 40%), radial-gradient(circle at 60% 90%, #c9f4e4 0, transparent 45%), radial-gradient(circle at 30% 85%, #fff3b0 0, transparent 35%), #fffafc; } .tpl-sorbet .hero::after { content: none; } .tpl-sorbet .hero-bg { inset: 9% 5% 9% auto; width: min(34%, 430px); height: auto; opacity: 1; border-radius: 34px; transform: rotate(4deg); border: 10px solid #fff; box-shadow: 0 30px 50px -28px rgba(70,40,150,.55); background-position: center 30%; } .tpl-sorbet .hero-in { max-width: 560px; padding: 104px 0 112px; } .tpl-sorbet .hero h1 { color: var(--ink); font-size: clamp(38px, 5.6vw, 72px); line-height: 1; } .tpl-sorbet .hero p { color: var(--ink-2); opacity: 1; } .tpl-sorbet .hero .eyebrow { background: #fff; color: var(--brand); border: 2px solid var(--brand); transform: rotate(-3deg); backdrop-filter: none; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 14px; } .tpl-sorbet .btn { border-radius: 999px; font-weight: 700; } .tpl-sorbet .btn-primary, .tpl-sorbet .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px var(--brand); } .tpl-sorbet .btn-primary:hover, .tpl-sorbet .btn-accent:hover { background: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-sorbet .btn-light { background: #fff; color: var(--brand); border: 2px solid var(--brand); } .tpl-sorbet .section-head h2 { font-size: clamp(30px, 4vw, 48px); } .tpl-sorbet .section-head h2::after { content: ""; display: block; width: 62px; height: 8px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, #ff7a9c, #a78bff, #5fe0b7); } .tpl-sorbet .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-sorbet .rc-section .section-head { border-bottom: 0; } .tpl-sorbet .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: -.03em; font-size: clamp(28px, 3.4vw, 40px) !important; padding-bottom: 0; } .tpl-sorbet .rc-section .section-head h2::after { margin-top: 8px; } .tpl-sorbet .section-alt { background: var(--bg-2); } .tpl-sorbet .rc-card { border: 0; border-radius: 30px; padding: 10px 10px 16px; transition: .25s; } .tpl-sorbet .rc-grid > .rc-card:nth-child(4n+1) { background: #ffe3ee; } .tpl-sorbet .rc-grid > .rc-card:nth-child(4n+2) { background: #e6dcff; } .tpl-sorbet .rc-grid > .rc-card:nth-child(4n+3) { background: #d3f5e8; } .tpl-sorbet .rc-grid > .rc-card:nth-child(4n+4) { background: #fff3b8; } .tpl-sorbet .rc-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 24px 34px -24px rgba(60,30,130,.45); } .tpl-sorbet .rc-img { border-radius: 22px; aspect-ratio: 4/5; } .tpl-sorbet .rc-name, .tpl-sorbet .p-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700 !important; } .tpl-sorbet .rc-price b, .tpl-sorbet .price b { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-weight: 700; } .tpl-sorbet .rc-chip span { background: rgba(255,255,255,.7); border: 0; border-radius: 999px; } .tpl-sorbet .rc-btn { border-radius: 999px; border: 2px solid var(--ink); font-weight: 700; } .tpl-sorbet .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-sorbet .rc-btn-main { background: var(--ink); color: #fff; border-color: var(--ink); } .tpl-sorbet .rc-tag, .tpl-sorbet .tag { background: #fff; color: var(--brand); border: 2px solid var(--brand); border-radius: 999px; transform: rotate(-5deg); font-weight: 800; box-shadow: none; } .tpl-sorbet .rc-tag-sale { background: #ff7a9c; color: #fff; border-color: #ff7a9c; } .tpl-sorbet .p-grid { display: block; column-count: 3; column-gap: 20px; } .tpl-sorbet .p-card { break-inside: avoid; margin: 0 0 22px; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 10px 10px 14px; } .tpl-sorbet .p-card:nth-child(3n+1) .p-img { aspect-ratio: 3/4; } .tpl-sorbet .p-card:nth-child(3n+2) .p-img { aspect-ratio: 1/1; } .tpl-sorbet .p-card:nth-child(3n) .p-img { aspect-ratio: 4/5; } .tpl-sorbet .p-img { border-radius: 20px; } .tpl-sorbet .cat-grid { gap: 18px; } .tpl-sorbet .cat-tile { aspect-ratio: 4/5; border-radius: 999px 999px 36px 36px; } .tpl-sorbet .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(70,40,150,.6)); } .tpl-sorbet .cat-tile .t { justify-content: center; text-align: center; bottom: 24px; } .tpl-sorbet .cat-tile h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; } .tpl-sorbet .cat-tile .arr { display: none; } .tpl-sorbet .trust { background: transparent; border: 0; } .tpl-sorbet .trust-item { background: #fff; border: 1px solid var(--line); border-radius: 22px; margin: 6px; } .tpl-sorbet .trust-item .ic { background: #e6dcff; color: var(--brand); } .tpl-sorbet .main-img { border-radius: 30px; } .tpl-sorbet .foot { background: linear-gradient(135deg, #2a1d57, #3d2a85); border-radius: 40px 40px 0 0; margin: 40px 10px 0; } .tpl-sorbet .foot h4 { color: #ffd6e7; } @media (max-width: 1100px) { .tpl-sorbet .p-grid { column-count: 2; } } @media (max-width: 860px) { .tpl-sorbet .hero { margin: 6px 8px 0; border-radius: 28px; } .tpl-sorbet .hero-bg { inset: auto 6% 6% auto; width: 38%; height: 40%; opacity: .95; } .tpl-sorbet .hero-in { padding: 54px 0 130px; } .tpl-sorbet .hdr { margin: 6px 8px 0; } .tpl-sorbet .cat-tile { border-radius: 40px; } } @media (max-width: 480px) { .tpl-sorbet .p-grid { column-count: 2; column-gap: 12px; } } .tpl-sorbet .hero:has(.hero-stock) { background-color: #fffafc; } /* ---------- Ivory: quiet luxury. Greige and taupe, thin display serif, tall photo hero, huge two-up grid, text links instead of buttons ---------- */ .tpl-ivory { --bg: #f5f2ed; --bg-2: #ebe6dd; --line: #ddd6c9; --ink: #26231f; --ink-2: #57514a; --ink-3: #8f877b; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-ivory h1, .tpl-ivory h2, .tpl-ivory h3, .tpl-ivory .display { font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: .04em; } .tpl-ivory .announce { background: transparent; color: var(--ink-3); letter-spacing: .3em; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid var(--line); } .tpl-ivory .hdr { background: var(--bg); border-bottom: 0; backdrop-filter: none; } .tpl-ivory .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 30px 0 18px; gap: 16px; } .tpl-ivory .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; font-family: 'Italiana', Georgia, serif; font-weight: 400; font-size: 2.1em; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); } .tpl-ivory .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 260px; } .tpl-ivory .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-ivory .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } .tpl-ivory .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-ivory .nav-bar .wrap { justify-content: center; gap: 22px; } .tpl-ivory .nav-link { text-transform: uppercase; letter-spacing: .26em; font-size: 10.5px; font-weight: 500; color: var(--ink-2); } .tpl-ivory .nav-link.active { color: var(--ink); } .tpl-ivory .nav-link.active::after { height: 1px; background: var(--ink); } .tpl-ivory .hero { background: #b8bec2; color: var(--ink); min-height: 78vh; display: flex; align-items: flex-end; } .tpl-ivory .hero-bg { opacity: 1; background-position: center; } .tpl-ivory .hero::after { content: none; } .tpl-ivory .hero-in { max-width: 520px; padding: 60px 0 56px; } .tpl-ivory .hero h1 { color: var(--ink); font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; } .tpl-ivory .hero p { color: var(--ink-2); opacity: 1; } .tpl-ivory .hero .eyebrow { background: transparent; border: 0; padding: 0; border-radius: 0; backdrop-filter: none; color: var(--ink-2); letter-spacing: .34em; font-weight: 500; font-size: 10.5px; } .tpl-ivory .hero .eyebrow .i { display: none; } .tpl-ivory .btn { border-radius: 0; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); padding: 8px 2px; min-height: 0; height: auto; text-transform: uppercase; letter-spacing: .26em; font-size: 10.5px; font-weight: 500; } .tpl-ivory .btn:hover { opacity: .6; } .tpl-ivory .hero .row { gap: 28px; } .tpl-ivory .section { padding: 96px 0; } .tpl-ivory .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 10px; margin-bottom: 52px; } .tpl-ivory .section-head h2 { text-transform: uppercase; letter-spacing: .3em; font-size: clamp(18px, 2vw, 24px); font-weight: 400; } .tpl-ivory .section-head .link-arrow { text-transform: uppercase; letter-spacing: .26em; font-size: 10px; color: var(--ink-2); border-bottom: 1px solid var(--ink-3); padding-bottom: 3px; } .tpl-ivory .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-ivory .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(18px, 2vw, 24px) !important; letter-spacing: .3em; } .tpl-ivory .section-alt { background: var(--bg-2); } .tpl-ivory .rc-grid, .tpl-ivory .rc-grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 28px; max-width: 980px; margin: 0 auto; } .tpl-ivory .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 420px); } .tpl-ivory .rc-card { background: transparent; border: 0; padding: 0; text-align: center; } .tpl-ivory .rc-card:hover { box-shadow: none; } .tpl-ivory .rc-card:hover .rc-img img { transform: none; opacity: .9; } .tpl-ivory .rc-img { aspect-ratio: 4/5; border-radius: 0; background: var(--bg-2); } .tpl-ivory .rc-name, .tpl-ivory .p-name { font-family: 'Italiana', Georgia, serif; font-weight: 400 !important; font-size: 20px !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .tpl-ivory .rc-chip { display: none; } .tpl-ivory .rc-price b, .tpl-ivory .price b { color: var(--ink-2); font-weight: 400; letter-spacing: .12em; font-size: 14px; } .tpl-ivory .rc-actions { grid-template-columns: 1fr 1fr; gap: 20px; justify-content: center; } .tpl-ivory .rc-btn { border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; background: transparent; color: var(--ink); height: auto; padding: 6px 0; letter-spacing: .24em; text-transform: uppercase; font-size: 10px; font-weight: 500; } .tpl-ivory .rc-btn:hover, .tpl-ivory .rc-btn-main { background: transparent; color: var(--ink); } .tpl-ivory .rc-btn:hover { opacity: .6; } .tpl-ivory .rc-tag, .tpl-ivory .tag { background: transparent; border: 0; color: var(--ink-2); letter-spacing: .24em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; padding: 0; top: 14px; left: 14px; } .tpl-ivory .rc-heart button { background: transparent; box-shadow: none; } .tpl-ivory .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; } .tpl-ivory .p-card { text-align: center; } .tpl-ivory .p-img { aspect-ratio: 4/5; border-radius: 0; } .tpl-ivory .p-cat { letter-spacing: .3em; font-size: 9.5px; } .tpl-ivory .p-card .price { justify-content: center; } .tpl-ivory .cat-grid { gap: 28px; } .tpl-ivory .cat-tile { aspect-ratio: 3/4; border-radius: 0; } .tpl-ivory .cat-tile::after { background: linear-gradient(180deg, transparent 60%, rgba(38,35,31,.5)); } .tpl-ivory .cat-tile .t { justify-content: center; text-align: center; } .tpl-ivory .cat-tile h3 { font-family: 'Italiana', Georgia, serif; text-transform: uppercase; letter-spacing: .3em; font-size: 15px; font-weight: 400; } .tpl-ivory .cat-tile .arr { display: none; } .tpl-ivory .trust { background: transparent; border-color: var(--line); } .tpl-ivory .trust-item .ic { background: transparent; border: 1px solid var(--line); color: var(--ink); } .tpl-ivory .main-img { border: 0; border-radius: 0; background: var(--bg-2); } .tpl-ivory .pd-info h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: .1em; text-transform: uppercase; } .tpl-ivory .foot { background: var(--bg-2); color: var(--ink-2); border-top: 1px solid var(--line); } .tpl-ivory .foot h4 { color: var(--ink); letter-spacing: .3em; font-weight: 500; } .tpl-ivory .foot a { color: var(--ink-2); } .tpl-ivory .foot-bottom { border-top-color: var(--line); color: var(--ink-3); } @media (max-width: 860px) { .tpl-ivory .hdr-in { grid-template-columns: 1fr auto; padding: 14px 0; } .tpl-ivory .hdr-in .brand { grid-column: 1; justify-self: start; font-size: 1.4em; letter-spacing: .2em; } .tpl-ivory .hdr-in .hdr-actions { grid-column: 2; } .tpl-ivory .hero { min-height: 60vh; } .tpl-ivory .rc-grid, .tpl-ivory .rc-grid[data-count] { gap: 40px 14px; } .tpl-ivory .section { padding: 60px 0; } } .tpl-ivory .hero:has(.hero-stock) { background: #b8bec2; } .tpl-ivory .hero-stock { background-position: 70% center; } /* ---------- Marine: nautical. Breton-stripe trim, stamp-style label, framed postcard photos, navy and signal red ---------- */ .tpl-marine { --bg: #fbfaf6; --bg-2: #eef1f6; --line: #d5dbe7; --ink: #10213f; --ink-2: #44526f; --ink-3: #8390a8; --r: 3px; --r-lg: 4px; --r-sm: 2px; --stripe: repeating-linear-gradient(90deg, #fff 0 22px, #14284b 22px 44px); } .tpl-marine h1, .tpl-marine h2, .tpl-marine h3, .tpl-marine .display { font-family: 'Josefin Sans', 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .tpl-marine .announce { background: var(--accent); color: #fff; font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; } .tpl-marine .hdr { background: #fff; border-bottom: 0; backdrop-filter: none; box-shadow: 0 6px 0 -1px #fff, 0 12px 0 -1px #14284b; margin-bottom: 12px; } .tpl-marine .hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--stripe); } .tpl-marine .hdr-in { padding-top: 7px; } .tpl-marine .hdr .brand { font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); } .tpl-marine .hdr-search input[type=search] { border-radius: 2px !important; background: var(--bg-2) !important; } .tpl-marine .nav-bar { background: #fff; border-top: 0; border-bottom: 2px solid var(--brand); } .tpl-marine .nav-bar .wrap { justify-content: center; } .tpl-marine .nav-link { font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 700; color: var(--ink); } .tpl-marine .nav-link:hover, .tpl-marine .nav-link.active { color: var(--accent); } .tpl-marine .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-marine .hero { background: #14284b; } .tpl-marine .hero-bg { inset: 26px; opacity: 1; border: 8px solid #fff; box-shadow: 0 0 0 2px #14284b, 0 24px 40px -26px rgba(0,0,0,.6); } .tpl-marine .hero::after { inset: 26px; border: 8px solid transparent; background: linear-gradient(90deg, rgba(16,33,63,.86), rgba(16,33,63,.3) 60%, transparent); } .tpl-marine .hero-in { padding: 128px 0 134px; max-width: 600px; margin-left: 56px; } .tpl-marine .hero h1 { color: #fff; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; } .tpl-marine .hero p { color: #dfe6f3; opacity: 1; } .tpl-marine .hero .eyebrow { background: transparent; color: #fff; border: 3px double #fff; border-radius: 4px; transform: rotate(-3deg); font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: .24em; backdrop-filter: none; padding: 8px 16px; } .tpl-marine .btn { border-radius: 2px; font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; } .tpl-marine .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-marine .btn-primary:hover { background: #0b1830; } .tpl-marine .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .tpl-marine .btn-accent:hover { background: #b51b30; border-color: #b51b30; } .tpl-marine .hero .btn-light { background: transparent; color: #fff; border: 2px solid #fff; } .tpl-marine .section-head { border-bottom: 0; text-align: center; justify-content: center; align-items: center; flex-direction: column; gap: 10px; } .tpl-marine .section-head h2 { font-size: clamp(22px, 2.8vw, 32px); } .tpl-marine .section-head h2::after { content: ""; display: block; width: 120px; height: 7px; margin: 12px auto 0; background: var(--stripe); background-size: 44px 7px; } .tpl-marine .section-head .link-arrow { color: var(--accent); font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; } .tpl-marine .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-marine .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(20px, 2.4vw, 28px) !important; letter-spacing: .08em; } .tpl-marine .section-alt { background: var(--bg-2); } .tpl-marine .rc-card, .tpl-marine .p-card { background: #fff; border: 2px solid var(--brand); border-radius: 3px; padding: 0 0 14px; transition: .2s; overflow: hidden; } .tpl-marine .rc-card::before, .tpl-marine .p-card::before { content: ""; display: block; height: 8px; background: var(--stripe); background-size: 44px 8px; } .tpl-marine .rc-card:hover, .tpl-marine .p-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--brand); } .tpl-marine .rc-media, .tpl-marine .p-img { margin: 10px 10px 0; } .tpl-marine .rc-img, .tpl-marine .p-img { border-radius: 0; aspect-ratio: 4/5; } .tpl-marine .rc-name, .tpl-marine .p-name, .tpl-marine .rc-chip, .tpl-marine .rc-price, .tpl-marine .rc-actions, .tpl-marine .p-cat, .tpl-marine .p-card .price { margin-left: 10px; margin-right: 10px; } .tpl-marine .rc-name, .tpl-marine .p-name { font-family: 'Josefin Sans', sans-serif; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; } .tpl-marine .rc-price b, .tpl-marine .price b { color: var(--brand); font-family: 'Josefin Sans', sans-serif; font-weight: 700; } .tpl-marine .rc-chip span { background: transparent; border: 1px solid var(--ink-3); border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; } .tpl-marine .rc-btn { border-radius: 2px; border: 2px solid var(--brand); font-family: 'Josefin Sans', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .tpl-marine .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-marine .rc-btn-main { background: var(--accent); border-color: var(--accent); color: #fff; } .tpl-marine .rc-tag, .tpl-marine .tag { background: var(--accent); color: #fff; border: 2px solid #fff; border-radius: 2px; font-family: 'Josefin Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; box-shadow: none; top: 18px; left: 18px; } .tpl-marine .cat-tile { aspect-ratio: 1/1; border: 6px solid #fff; border-radius: 0; box-shadow: 0 0 0 2px var(--brand), 0 18px 28px -22px rgba(16,33,63,.7); } .tpl-marine .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(16,33,63,.82)); } .tpl-marine .cat-tile .t { justify-content: center; text-align: center; } .tpl-marine .cat-tile h3 { font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 15px; } .tpl-marine .cat-tile .arr { display: none; } .tpl-marine .trust { background: #fff; border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); } .tpl-marine .trust-item .ic { background: var(--brand); color: #fff; border-radius: 2px; } .tpl-marine .main-img { border: 8px solid #fff; box-shadow: 0 0 0 2px var(--brand); border-radius: 0; } .tpl-marine .foot { background: #10213f; border-top: 0; position: relative; padding-top: 86px; } .tpl-marine .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--stripe); background-size: 44px 14px; } .tpl-marine .foot h4 { font-family: 'Josefin Sans', sans-serif; letter-spacing: .24em; color: #fff; } @media (max-width: 860px) { .tpl-marine .hero-bg { inset: 12px; border-width: 5px; } .tpl-marine .hero-in { margin-left: 22px; padding: 64px 0; } } .tpl-marine .hero:has(.hero-stock) { background: #14284b; } /* ---------- Kinetic: activewear. Slanted hero edge, skewed tags and buttons, electric blue with neon teal, hover-reveal actions ---------- */ .tpl-kinetic { --bg: #ffffff; --bg-2: #f1f4ff; --line: #dfe4f6; --ink: #0a0d1c; --ink-2: #434a66; --ink-3: #8087a3; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-kinetic h1, .tpl-kinetic h2, .tpl-kinetic h3, .tpl-kinetic .display { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; } .tpl-kinetic .announce { background: var(--ink); color: var(--accent); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; } .tpl-kinetic .hdr { background: rgba(255,255,255,.96); border-bottom: 3px solid var(--ink); backdrop-filter: none; } .tpl-kinetic .hdr .brand { font-family: 'Sora', sans-serif; font-weight: 800; font-style: italic; letter-spacing: -.05em; text-transform: uppercase; color: var(--brand); font-size: 1.5em; } .tpl-kinetic .hdr-search input[type=search] { border-radius: 0 !important; background: var(--bg-2) !important; border: 0 !important; border-bottom: 3px solid var(--ink) !important; } .tpl-kinetic .nav-bar { background: var(--ink); border-top: 0; } .tpl-kinetic .nav-bar .wrap { justify-content: center; gap: 2px; } .tpl-kinetic .nav-link { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; transform: skewX(-8deg); padding: 12px 18px; } .tpl-kinetic .nav-link:hover, .tpl-kinetic .nav-link.active { background: var(--brand); } .tpl-kinetic .nav-link.active::after { content: none; } .tpl-kinetic .hero { background: var(--brand); clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding-bottom: 40px; } .tpl-kinetic .hero-bg { opacity: 1; background-position: center 18%; } .tpl-kinetic .hero::after { background: linear-gradient(100deg, rgba(8,14,90,.92), rgba(35,56,255,.55) 45%, transparent 80%); } .tpl-kinetic .hero-in { padding: 110px 0 120px; max-width: 640px; } .tpl-kinetic .hero h1 { color: #fff; font-size: clamp(40px, 6.4vw, 88px); line-height: .92; font-style: italic; } .tpl-kinetic .hero p { color: #e4e9ff; opacity: 1; } .tpl-kinetic .hero .eyebrow { background: var(--accent); color: #04201c; border-radius: 0; transform: skewX(-12deg); font-weight: 800; letter-spacing: .14em; backdrop-filter: none; padding: 7px 18px; } .tpl-kinetic .hero .eyebrow > * { display: inline-block; transform: skewX(12deg); } .tpl-kinetic .btn { border-radius: 0; font-family: 'Sora', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; transform: skewX(-10deg); } .tpl-kinetic .btn > * { display: inline-block; transform: skewX(10deg); } .tpl-kinetic .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-kinetic .btn-primary:hover { background: var(--ink); border-color: var(--ink); } .tpl-kinetic .btn-accent { background: var(--accent); border-color: var(--accent); color: #04201c; } .tpl-kinetic .btn-accent:hover { background: #fff; border-color: #fff; } .tpl-kinetic .hero .btn-light { background: transparent; color: #fff; border: 3px solid #fff; } .tpl-kinetic .section-head { border-bottom: 0; } .tpl-kinetic .section-head h2 { font-size: clamp(28px, 3.8vw, 46px); font-style: italic; position: relative; padding-left: 22px; } .tpl-kinetic .section-head h2::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 9px; background: var(--brand); transform: skewX(-14deg); box-shadow: 12px 0 0 var(--accent); } .tpl-kinetic .section-head .link-arrow { color: var(--ink); font-family: 'Sora', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; } .tpl-kinetic .rc-section .section-head { border-bottom: 0; } .tpl-kinetic .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; padding-left: 28px; font-size: clamp(24px, 3vw, 36px) !important; letter-spacing: -.035em; } .tpl-kinetic .rc-section .section-head h2::before { content: "" !important; display: block; } .tpl-kinetic .section-alt { background: var(--bg-2); } .tpl-kinetic .rc-card { background: #fff; border: 0; border-radius: 0; padding: 0 0 14px; position: relative; overflow: hidden; transition: .25s; } .tpl-kinetic .rc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 34px -26px var(--brand); } .tpl-kinetic .rc-img { aspect-ratio: 4/5; border-radius: 0; } .tpl-kinetic .rc-media { margin: 0; } .tpl-kinetic .rc-name, .tpl-kinetic .rc-chip, .tpl-kinetic .rc-price { margin-left: 12px; margin-right: 12px; text-align: left; } .tpl-kinetic .rc-name { font-family: 'Sora', sans-serif; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: -.01em !important; font-size: 13.5px !important; } .tpl-kinetic .rc-chip, .tpl-kinetic .rc-price { justify-content: flex-start; display: flex; } .tpl-kinetic .rc-price b { color: var(--brand); font-family: 'Sora', sans-serif; font-weight: 800; font-size: 17px; } .tpl-kinetic .rc-chip span { background: var(--bg-2); border: 0; border-radius: 0; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; transform: skewX(-10deg); } .tpl-kinetic .rc-actions { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.96) 30%); transform: translateY(102%); transition: transform .25s; } .tpl-kinetic .rc-card:hover .rc-actions, .tpl-kinetic .rc-card:focus-within .rc-actions { transform: none; } @media (hover: none) { .tpl-kinetic .rc-actions { position: static; transform: none; background: none; padding: 0 12px; margin-top: auto; } } .tpl-kinetic .rc-btn { border-radius: 0; border: 2px solid var(--ink); font-family: 'Sora', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; transform: skewX(-8deg); } .tpl-kinetic .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-kinetic .rc-btn-main { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-kinetic .rc-tag, .tpl-kinetic .tag { background: var(--accent); color: #04201c; border: 0; border-radius: 0; transform: skewX(-12deg); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; left: 0; top: 12px; padding: 5px 14px; } .tpl-kinetic .rc-tag-sale { background: var(--brand); color: #fff; } .tpl-kinetic .p-grid { gap: 22px 16px; } .tpl-kinetic .p-card { background: #fff; border: 0; } .tpl-kinetic .p-img { aspect-ratio: 4/5; border-radius: 0; } .tpl-kinetic .p-name { font-family: 'Sora', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 13.5px; } .tpl-kinetic .price b { color: var(--brand); font-family: 'Sora', sans-serif; font-weight: 800; } .tpl-kinetic .cat-grid { gap: 16px; } .tpl-kinetic .cat-tile { aspect-ratio: 3/4; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%); } .tpl-kinetic .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(8,14,90,.85)); } .tpl-kinetic .cat-tile h3 { font-style: italic; font-size: 22px; } .tpl-kinetic .cat-tile .arr { border-radius: 0; background: var(--accent); color: #04201c; transform: skewX(-12deg); } .tpl-kinetic .trust { background: var(--ink); border: 0; } .tpl-kinetic .trust-item { border-color: rgba(255,255,255,.14); color: #fff; } .tpl-kinetic .trust-item span { color: #aab1d6; } .tpl-kinetic .trust-item .ic { background: var(--accent); color: #04201c; border-radius: 0; transform: skewX(-8deg); } .tpl-kinetic .main-img { border-radius: 0; border: 0; background: var(--bg-2); } .tpl-kinetic .pd-info h1 { font-style: italic; font-size: clamp(28px, 3.4vw, 44px); } .tpl-kinetic .foot { background: var(--ink); border-top: 6px solid var(--brand); } .tpl-kinetic .foot h4 { color: var(--accent); font-family: 'Sora', sans-serif; font-style: italic; } @media (max-width: 860px) { .tpl-kinetic .hero { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); } .tpl-kinetic .hero-in { padding: 64px 0 72px; } .tpl-kinetic .nav-link { transform: none; } } .tpl-kinetic .hero:has(.hero-stock) { background: var(--brand); } .tpl-kinetic .hero-stock { background-position: center 18%; } /* batch 1 fashion: uppercase button labels need the full tile width on phones */ @media (max-width: 560px) { .tpl-indigo .rc-actions, .tpl-marine .rc-actions { grid-template-columns: 1fr; } .tpl-indigo .rc-btn, .tpl-marine .rc-btn, .tpl-sorbet .rc-btn, .tpl-kinetic .rc-btn { letter-spacing: .03em; padding: 0 4px; } } /* ===================================================================================================================================== Jewellery and Fashion Accessories (batch 2): Solitaire (diamond black stage), Kundan (royal bridal), Rosegold (modern romantic), Oxide (tribal silver), Gemstone (faceted colour) ===================================================================================================================================== */ /* ---------- Solitaire: diamond minimal on a black stage. Thin type, hairline frames, spotlight product images, sparkle on hover ---------- */ .tpl-solitaire { --bg: #08080b; --bg-2: #101016; --line: #26262f; --ink: #f4f4f6; --ink-2: #b9bac4; --ink-3: #7e7f8b; --r: 0px; --r-lg: 0px; --r-sm: 0px; --brand-soft: color-mix(in srgb, var(--accent) 14%, #08080b); --brand-soft-2: color-mix(in srgb, var(--accent) 26%, #08080b); --brand-ink: color-mix(in srgb, var(--accent) 80%, #fff); color-scheme: dark; } .tpl-solitaire h1, .tpl-solitaire h2, .tpl-solitaire h3, .tpl-solitaire .display { font-family: 'Tenor Sans', 'Jost', sans-serif; font-weight: 400; letter-spacing: .1em; } .tpl-solitaire .announce { background: transparent; color: var(--ink-3); letter-spacing: .34em; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid var(--line); } .tpl-solitaire .hdr { background: rgba(8,8,11,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); } .tpl-solitaire .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 22px 0; gap: 16px; } .tpl-solitaire .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; font-family: 'Tenor Sans', sans-serif; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--ink); font-size: 1.3em; } .tpl-solitaire .hdr-in .brand::before { content: "◇"; margin-right: 14px; color: var(--accent); font-size: .8em; letter-spacing: 0; } .tpl-solitaire .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 260px; } .tpl-solitaire .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-solitaire .hdr .icon-link, .tpl-solitaire .hdr .hdr-search .i { color: var(--ink); } .tpl-solitaire .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--ink); } .tpl-solitaire .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-solitaire .nav-bar .wrap { justify-content: center; gap: 26px; } .tpl-solitaire .nav-link { color: var(--ink-2); text-transform: uppercase; letter-spacing: .28em; font-size: 10.5px; font-weight: 400; } .tpl-solitaire .nav-link:hover, .tpl-solitaire .nav-link.active { color: #fff; } .tpl-solitaire .nav-link.active::after { height: 1px; background: var(--accent); } .tpl-solitaire .hero { background: #000; min-height: 560px; display: flex; align-items: center; } .tpl-solitaire .hero-bg { opacity: 1; background-position: center; } .tpl-solitaire .hero::after { background: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.35) 50%, transparent); } .tpl-solitaire .hero > .wrap { width: min(1280px, 100% - 40px); } .tpl-solitaire .hero-in { max-width: 520px; padding: 90px 0; } .tpl-solitaire .hero h1 { color: #fff; font-size: clamp(34px, 5vw, 66px); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; line-height: 1.08; } .tpl-solitaire .hero p { color: var(--ink-2); opacity: 1; } .tpl-solitaire .hero .eyebrow { background: transparent; border: 0; padding: 0; backdrop-filter: none; color: var(--accent); letter-spacing: .4em; font-weight: 400; font-size: 10.5px; } .tpl-solitaire .hero .eyebrow .i { display: none; } .tpl-solitaire .btn { border-radius: 0; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .26em; font-size: 10.5px; font-weight: 400; } .tpl-solitaire .btn:hover { background: #fff; color: #08080b; border-color: #fff; } .tpl-solitaire .btn-primary, .tpl-solitaire .btn-accent { background: #fff; color: #08080b; border-color: #fff; } .tpl-solitaire .btn-primary:hover, .tpl-solitaire .btn-accent:hover { background: var(--accent); border-color: var(--accent); } .tpl-solitaire input[type=text], .tpl-solitaire input[type=email], .tpl-solitaire input[type=tel], .tpl-solitaire input[type=password], .tpl-solitaire input[type=number], .tpl-solitaire input[type=search], .tpl-solitaire select, .tpl-solitaire textarea { background-color: var(--bg-2); color: var(--ink); border-color: #34343f; } .tpl-solitaire .section { padding: 90px 0; } .tpl-solitaire .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 10px; margin-bottom: 52px; } .tpl-solitaire .section-head h2 { text-transform: uppercase; letter-spacing: .34em; font-size: clamp(17px, 2vw, 22px); font-weight: 400; } .tpl-solitaire .section-head h2::after { content: "◇"; display: block; color: var(--accent); font-size: 12px; margin-top: 14px; letter-spacing: 0; } .tpl-solitaire .section-head .link-arrow { color: var(--ink-3); letter-spacing: .26em; text-transform: uppercase; font-size: 10px; } .tpl-solitaire .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-solitaire .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(17px, 2vw, 22px) !important; letter-spacing: .34em; } .tpl-solitaire .section-alt { background: var(--bg-2); } .tpl-solitaire .rc-card, .tpl-solitaire .p-card { background: transparent; border: 0; padding: 0; text-align: center; } .tpl-solitaire .rc-card:hover { box-shadow: none; } .tpl-solitaire .rc-img, .tpl-solitaire .p-img { position: relative; background: radial-gradient(circle at 50% 42%, #1d1d27, #07070a 70%); border: 1px solid var(--line); border-radius: 0; aspect-ratio: 1/1; transition: border-color .3s; } .tpl-solitaire .rc-card:hover .rc-img, .tpl-solitaire .p-card:hover .p-img { border-color: var(--accent); } .tpl-solitaire .rc-img::after, .tpl-solitaire .p-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at 22% 28%, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px), radial-gradient(circle at 74% 20%, rgba(255,255,255,.9) 0 1.2px, transparent 2.2px), radial-gradient(circle at 62% 70%, rgba(255,255,255,.95) 0 1.6px, transparent 2.6px), radial-gradient(circle at 30% 78%, rgba(255,255,255,.85) 0 1.1px, transparent 2px); } .tpl-solitaire .rc-card:hover .rc-img::after, .tpl-solitaire .p-card:hover .p-img::after { opacity: 1; animation: sol-twinkle 1.4s ease-in-out infinite alternate; } @keyframes sol-twinkle { from { opacity: .35; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tpl-solitaire .rc-card:hover .rc-img::after, .tpl-solitaire .p-card:hover .p-img::after { animation: none; } } .tpl-solitaire .rc-name, .tpl-solitaire .p-name { font-family: 'Tenor Sans', sans-serif; text-transform: uppercase !important; letter-spacing: .2em !important; font-size: 11.5px !important; font-weight: 400 !important; } .tpl-solitaire .rc-price b, .tpl-solitaire .price b { color: var(--accent); font-weight: 400; letter-spacing: .12em; } .tpl-solitaire .rc-price, .tpl-solitaire .p-card .price { justify-content: center; } .tpl-solitaire .rc-chip span { background: transparent; border: 0; color: var(--ink-3); letter-spacing: .24em; text-transform: uppercase; font-size: 9.5px; } .tpl-solitaire .rc-btn { border-radius: 0; border: 1px solid rgba(255,255,255,.4); color: var(--ink); letter-spacing: .22em; text-transform: uppercase; font-size: 10px; font-weight: 400; } .tpl-solitaire .rc-btn:hover { background: #fff; color: #08080b; } .tpl-solitaire .rc-btn-main { background: #fff; color: #08080b; border-color: #fff; } .tpl-solitaire .rc-tag, .tpl-solitaire .tag { border-radius: 0; background: transparent; color: var(--accent); border: 1px solid var(--accent); letter-spacing: .22em; text-transform: uppercase; font-size: 9px; box-shadow: none; } .tpl-solitaire .rc-tag-sale { background: var(--accent); color: #08080b; } .tpl-solitaire .rc-tag-out { color: var(--ink-3); border-color: var(--line); } .tpl-solitaire .rc-heart button { background: transparent; color: #fff; box-shadow: none; border: 1px solid var(--line); } .tpl-solitaire .p-grid { gap: 50px 24px; } .tpl-solitaire .cat-grid { gap: 24px; } .tpl-solitaire .cat-tile { aspect-ratio: 4/5; border-radius: 0; border: 1px solid var(--line); } .tpl-solitaire .cat-tile::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.35); z-index: 1; pointer-events: none; transition: inset .3s, border-color .3s; } .tpl-solitaire .cat-tile:hover::before { inset: 8px; border-color: var(--accent); } .tpl-solitaire .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85)); } .tpl-solitaire .cat-tile .t { justify-content: center; text-align: center; bottom: 30px; z-index: 2; } .tpl-solitaire .cat-tile h3 { font-family: 'Tenor Sans', sans-serif; text-transform: uppercase; letter-spacing: .3em; font-size: 13px; font-weight: 400; } .tpl-solitaire .cat-tile .arr { display: none; } .tpl-solitaire .trust { background: var(--bg); border-color: var(--line); } .tpl-solitaire .trust-item { border-color: var(--line); background: transparent; } .tpl-solitaire .trust-item .ic { background: transparent; border: 1px solid var(--line); color: var(--accent); border-radius: 0; transform: rotate(45deg); } .tpl-solitaire .trust-item .ic > * { transform: rotate(-45deg); } .tpl-solitaire .main-img { border: 1px solid var(--line); border-radius: 0; background: radial-gradient(circle at 50% 42%, #1d1d27, #07070a 70%); } .tpl-solitaire .pd-info h1 { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(24px, 3vw, 34px); } .tpl-solitaire .assure, .tpl-solitaire .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-solitaire .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--accent); } .tpl-solitaire .toast, .tpl-solitaire .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-solitaire .foot { background: #000; border-top: 1px solid var(--line); } .tpl-solitaire .foot h4 { letter-spacing: .32em; font-weight: 400; color: var(--accent); font-family: 'Tenor Sans', sans-serif; } @media (max-width: 860px) { .tpl-solitaire .hdr-in { grid-template-columns: 1fr auto; padding: 12px 0; } .tpl-solitaire .hdr-in .brand { grid-column: 1; justify-self: start; font-size: 1em; letter-spacing: .26em; } .tpl-solitaire .hdr-in .hdr-actions { grid-column: 2; } .tpl-solitaire .hero { min-height: 420px; } .tpl-solitaire .hero-in { padding: 56px 0; } .tpl-solitaire .section { padding: 56px 0; } } .tpl-solitaire .hero:has(.hero-stock) { background: #000; } /* ---------- Kundan: royal bridal. Emerald header with a gold bead trim, ornate double borders, notched corner tiles, gold corner brackets ---------- */ .tpl-kundan { --bg: #fbf6ea; --bg-2: #f3e9d2; --line: #e5d6b4; --ink: #24201a; --ink-2: #5b5142; --ink-3: #978a72; --r: 4px; --r-lg: 6px; --r-sm: 3px; --gold: #c9962f; } .tpl-kundan h1, .tpl-kundan h2, .tpl-kundan h3, .tpl-kundan .display { font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .02em; } .tpl-kundan .announce { background: #0a3d2f; color: #f0d28b; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 600; } .tpl-kundan .hdr { background: var(--brand); border-bottom: 0; backdrop-filter: none; margin-bottom: 14px; overflow: visible; } .tpl-kundan .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; pointer-events: none; background: radial-gradient(circle at 7px 5px, var(--accent) 3px, transparent 3.5px) 0 0 / 14px 14px repeat-x, linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 2px no-repeat; } .tpl-kundan .hdr .brand, .tpl-kundan .hdr .icon-link, .tpl-kundan .hdr .hdr-search .i { color: #f6e3b0; } .tpl-kundan .hdr .brand { font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; font-size: 1.4em; letter-spacing: .04em; } .tpl-kundan .hdr-search input[type=search] { background: rgba(255,255,255,.1) !important; border-color: rgba(246,227,176,.4) !important; color: #f6e3b0; border-radius: 999px !important; } .tpl-kundan .hdr-search input[type=search]::placeholder { color: rgba(246,227,176,.75); } .tpl-kundan .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-kundan .nav-bar .wrap { justify-content: center; } .tpl-kundan .nav-link { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; color: var(--ink); } .tpl-kundan .nav-link:hover, .tpl-kundan .nav-link.active { color: var(--brand); } .tpl-kundan .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-kundan .hero { background: color-mix(in srgb, var(--brand) 80%, #000); } .tpl-kundan .hero-bg { left: 38%; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); } .tpl-kundan .hero::after { content: none; } .tpl-kundan .hero::before { content: ""; position: absolute; inset: 16px; border: 2px double var(--accent); z-index: 3; pointer-events: none; } .tpl-kundan .hero-in { max-width: 560px; padding: 112px 0 120px; margin-left: 34px; } .tpl-kundan .hero h1 { color: #f6e3b0; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.1; } .tpl-kundan .hero p { color: #e8efe9; opacity: 1; } .tpl-kundan .hero .eyebrow { background: var(--accent); color: #1c1305; border-radius: 0; font-weight: 800; letter-spacing: .18em; backdrop-filter: none; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); padding-left: 22px; padding-right: 22px; } .tpl-kundan .btn { border-radius: 2px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; } .tpl-kundan .btn-primary { background: var(--brand); border-color: var(--brand); color: #f6e3b0; } .tpl-kundan .btn-primary:hover { background: #0a3d2f; } .tpl-kundan .btn-accent { background: var(--accent); border-color: var(--accent); color: #1c1305; } .tpl-kundan .btn-accent:hover { background: #e3b04c; border-color: #e3b04c; } .tpl-kundan .hero .btn-light { background: transparent; color: #f6e3b0; border: 2px solid var(--accent); } .tpl-kundan .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; } .tpl-kundan .section-head h2 { color: var(--brand); font-size: clamp(24px, 3vw, 36px); } .tpl-kundan .section-head h2::after { content: "❖ ❖ ❖"; display: block; color: var(--accent); font-size: 12px; letter-spacing: .5em; margin-top: 10px; font-family: sans-serif; } .tpl-kundan .section-head .link-arrow { color: var(--brand); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .tpl-kundan .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-kundan .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(22px, 2.6vw, 30px) !important; text-transform: none; letter-spacing: .02em; } .tpl-kundan .rc-section .section-head h2::before, .tpl-kundan .rc-section .section-head h2::after { content: none; } .tpl-kundan .rc-section .section-head h2::after { content: "❖ ❖ ❖" !important; } .tpl-kundan .section-alt { background: var(--bg-2); } .tpl-kundan .rc-card, .tpl-kundan .p-card { position: relative; background: #fffdf7; border: 1px solid var(--line); border-radius: 4px; padding: 14px 14px 16px; transition: .25s; } .tpl-kundan .rc-card::before, .tpl-kundan .p-card::before { content: ""; position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); pointer-events: none; z-index: 3; } .tpl-kundan .rc-card::after, .tpl-kundan .p-card::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; z-index: 3; } .tpl-kundan .rc-card:hover, .tpl-kundan .p-card:hover { border-color: var(--accent); box-shadow: 0 18px 30px -22px var(--brand); transform: translateY(-3px); } .tpl-kundan .rc-img, .tpl-kundan .p-img { border-radius: 2px; aspect-ratio: 1/1; outline: 1px solid var(--accent); outline-offset: -7px; } .tpl-kundan .rc-name, .tpl-kundan .p-name { font-family: 'Cinzel', Georgia, serif; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .02em !important; } .tpl-kundan .rc-price b, .tpl-kundan .price b { color: var(--brand); font-family: 'Cinzel', Georgia, serif; font-weight: 700; } .tpl-kundan .rc-chip span { background: transparent; border: 1px solid var(--accent); color: #7a5a14; border-radius: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; } .tpl-kundan .rc-btn { border-radius: 2px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; } .tpl-kundan .rc-btn:hover { background: var(--brand); color: #f6e3b0; } .tpl-kundan .rc-btn-main { background: var(--brand); color: #f6e3b0; } .tpl-kundan .rc-tag, .tpl-kundan .tag { background: var(--brand); color: #f6e3b0; border: 1px solid var(--accent); border-radius: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; top: 22px; left: 22px; } .tpl-kundan .rc-tag-sale { background: var(--accent); color: #1c1305; } .tpl-kundan .cat-grid { gap: 22px; } .tpl-kundan .cat-tile { aspect-ratio: 4/5; border-radius: 0; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); } .tpl-kundan .cat-tile::before { content: ""; position: absolute; inset: 9px; border: 2px double var(--accent); z-index: 1; pointer-events: none; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); } .tpl-kundan .cat-tile::after { background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--brand) 88%, #000)); } .tpl-kundan .cat-tile h3 { font-family: 'Cinzel', Georgia, serif; font-size: 17px; color: #f6e3b0; } .tpl-kundan .cat-tile .t { z-index: 2; } .tpl-kundan .cat-tile .arr { background: var(--accent); color: #1c1305; border-radius: 0; } .tpl-kundan .trust { background: var(--bg-2); border-color: var(--line); } .tpl-kundan .trust-item .ic { background: var(--brand); color: #f6e3b0; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .tpl-kundan .main-img { border: 2px solid var(--accent); border-radius: 4px; outline: 1px solid var(--accent); outline-offset: -9px; } .tpl-kundan .pd-info h1 { font-size: clamp(24px, 3vw, 34px); color: var(--brand); } .tpl-kundan .foot { background: color-mix(in srgb, var(--brand) 82%, #000); color: #cfe0d8; border-top: 6px double var(--accent); } .tpl-kundan .foot h4 { color: var(--accent); font-family: 'Cinzel', Georgia, serif; } .tpl-kundan .foot a { color: #cfe0d8; } @media (max-width: 860px) { .tpl-kundan .hero-bg { left: 0; opacity: .3; -webkit-mask-image: none; mask-image: none; } .tpl-kundan .hero-in { margin-left: 8px; padding: 64px 0; } .tpl-kundan .hero::before { inset: 8px; } } .tpl-kundan .hero:has(.hero-stock) { background: color-mix(in srgb, var(--brand) 80%, #000); } .tpl-kundan .hero-stock { background-position: 70% center; } /* ---------- Rosegold: modern romantic. Blush, thin serif, circular product crops, centred header with hairlines, floating shadows ---------- */ .tpl-rosegold { --bg: #fff8f6; --bg-2: #fbebe7; --line: #f1d8d2; --ink: #3a2a2e; --ink-2: #6f5459; --ink-3: #a58d91; --r: 999px; --r-lg: 28px; --r-sm: 12px; } .tpl-rosegold h1, .tpl-rosegold h2, .tpl-rosegold h3, .tpl-rosegold .display { font-family: 'Gilda Display', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: .02em; } .tpl-rosegold .announce { background: transparent; color: var(--brand); letter-spacing: .26em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid var(--line); } .tpl-rosegold .hdr { background: var(--bg); border-bottom: 0; backdrop-filter: none; } .tpl-rosegold .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; height: auto; padding: 26px 0 14px; gap: 16px; } .tpl-rosegold .hdr-in .brand { grid-column: 2; grid-row: 1; justify-self: center; font-family: 'Gilda Display', Georgia, serif; font-weight: 400; font-size: 1.9em; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } .tpl-rosegold .hdr-in .brand::before, .tpl-rosegold .hdr-in .brand::after { content: ""; display: inline-block; width: 46px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 16px; } .tpl-rosegold .hdr-in .hdr-search { grid-column: 1; grid-row: 1; margin: 0; max-width: 260px; } .tpl-rosegold .hdr-in .hdr-actions { grid-column: 3; grid-row: 1; justify-self: end; } .tpl-rosegold .hdr-search input[type=search] { background: #fff !important; border-color: var(--line) !important; } .tpl-rosegold .nav-bar { background: var(--bg); border-top: 0; } .tpl-rosegold .nav-bar .wrap { justify-content: center; gap: 22px; } .tpl-rosegold .nav-link { font-family: 'Gilda Display', Georgia, serif; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--ink-2); } .tpl-rosegold .nav-link:hover, .tpl-rosegold .nav-link.active { color: var(--brand); } .tpl-rosegold .nav-link.active::after { height: 1px; background: var(--brand); } .tpl-rosegold .hero { background: radial-gradient(circle at 78% 50%, #fde4de 0, transparent 55%), var(--bg-2); color: var(--ink); overflow: hidden; min-height: 560px; display: flex; align-items: center; } .tpl-rosegold .hero::after { content: none; } .tpl-rosegold .hero-bg { inset: 50% 7% auto auto; width: min(34vw, 420px); height: min(34vw, 420px); transform: translateY(-50%); border-radius: 50%; opacity: 1; box-shadow: 0 0 0 10px #fff, 0 0 0 11px var(--accent), 0 40px 60px -34px rgba(156,85,96,.55); background-position: center; } .tpl-rosegold .hero-in { max-width: 520px; padding: 118px 0 126px; } .tpl-rosegold .hero h1 { color: var(--ink); font-size: clamp(36px, 5vw, 64px); line-height: 1.06; } .tpl-rosegold .hero p { color: var(--ink-2); opacity: 1; } .tpl-rosegold .hero .eyebrow { background: transparent; color: var(--brand); border: 1px solid var(--accent); backdrop-filter: none; letter-spacing: .26em; font-weight: 500; } .tpl-rosegold .btn { border-radius: 999px; font-weight: 600; letter-spacing: .08em; } .tpl-rosegold .btn-primary, .tpl-rosegold .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-rosegold .btn-primary:hover, .tpl-rosegold .btn-accent:hover { background: color-mix(in srgb, var(--brand) 82%, #000); } .tpl-rosegold .btn-light { background: transparent; color: var(--brand); border: 1px solid var(--brand); } .tpl-rosegold .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; } .tpl-rosegold .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); } .tpl-rosegold .section-head h2::after { content: "◇"; display: block; color: var(--accent); font-size: 13px; margin-top: 10px; background: none; width: auto; height: auto; } .tpl-rosegold .section-head .link-arrow { color: var(--brand); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; } .tpl-rosegold .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-rosegold .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: .02em; font-size: clamp(26px, 3.2vw, 36px) !important; } .tpl-rosegold .section-alt { background: var(--bg-2); } .tpl-rosegold .rc-card, .tpl-rosegold .p-card { background: transparent; border: 0; padding: 0; text-align: center; } .tpl-rosegold .rc-card:hover { box-shadow: none; } .tpl-rosegold .rc-img, .tpl-rosegold .p-img { aspect-ratio: 1/1; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--accent), 0 26px 30px -22px rgba(156,85,96,.55); background: var(--bg-2); transition: transform .35s, box-shadow .35s; margin: 8px 8px 22px; } .tpl-rosegold .rc-card:hover .rc-img, .tpl-rosegold .p-card:hover .p-img { transform: translateY(-8px); box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--brand), 0 34px 36px -24px rgba(156,85,96,.7); } .tpl-rosegold .rc-card:hover .rc-img img, .tpl-rosegold .p-card:hover .p-img img { transform: none; } .tpl-rosegold .rc-tag, .tpl-rosegold .tag { top: 14px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; border: 0; border-radius: 999px; letter-spacing: .14em; text-transform: uppercase; font-size: 9px; box-shadow: none; z-index: 4; } .tpl-rosegold .rc-heart { right: 22px; top: 18px; } .tpl-rosegold .rc-name, .tpl-rosegold .p-name { font-family: 'Gilda Display', Georgia, serif; font-weight: 400 !important; font-size: 16px !important; letter-spacing: .04em !important; } .tpl-rosegold .rc-price b, .tpl-rosegold .price b { color: var(--brand); font-family: 'Gilda Display', Georgia, serif; font-weight: 400; font-size: 17px; } .tpl-rosegold .rc-price, .tpl-rosegold .p-card .price { justify-content: center; } .tpl-rosegold .rc-chip span { background: transparent; border: 0; color: var(--ink-3); letter-spacing: .2em; text-transform: uppercase; font-size: 9.5px; } .tpl-rosegold .rc-btn { border-radius: 999px; border: 1px solid var(--brand); color: var(--brand); letter-spacing: .1em; font-weight: 600; } .tpl-rosegold .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-rosegold .rc-btn-main { background: var(--brand); color: #fff; } .tpl-rosegold .p-grid, .tpl-rosegold .rc-grid { gap: 36px 24px; } .tpl-rosegold .cat-grid { gap: 26px; } .tpl-rosegold .cat-tile { aspect-ratio: 1/1; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--accent), 0 24px 30px -22px rgba(156,85,96,.55); margin: 8px; } .tpl-rosegold .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(122,52,66,.6)); } .tpl-rosegold .cat-tile .t { justify-content: center; text-align: center; bottom: 28px; } .tpl-rosegold .cat-tile h3 { font-family: 'Gilda Display', Georgia, serif; font-size: 20px; } .tpl-rosegold .cat-tile .arr { display: none; } .tpl-rosegold .trust { background: transparent; border-color: var(--line); } .tpl-rosegold .trust-item .ic { background: #fff; border: 1px solid var(--accent); color: var(--brand); } .tpl-rosegold .main-img { border-radius: 30px; box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--accent); } .tpl-rosegold .foot { background: #f6e0da; color: var(--ink-2); } .tpl-rosegold .foot h4 { color: var(--brand); font-family: 'Gilda Display', Georgia, serif; letter-spacing: .12em; } .tpl-rosegold .foot a { color: var(--ink-2); } .tpl-rosegold .foot-bottom { border-top-color: #ebc9c1; color: var(--ink-3); } @media (max-width: 860px) { .tpl-rosegold .hdr-in { grid-template-columns: 1fr auto; padding: 12px 0; } .tpl-rosegold .hdr-in .brand { grid-column: 1; justify-self: start; font-size: 1.2em; } .tpl-rosegold .hdr-in .brand::before, .tpl-rosegold .hdr-in .brand::after { display: none; } .tpl-rosegold .hdr-in .hdr-actions { grid-column: 2; } .tpl-rosegold .hero-bg { inset: auto 6% 5% auto; width: 36vw; height: 36vw; transform: none; } .tpl-rosegold .hero-in { padding: 54px 0 120px; } } .tpl-rosegold .hero:has(.hero-stock) { background-color: var(--bg-2); } /* ---------- Oxide: oxidised silver and tribal. Charcoal, brushed-metal header, riveted plates, zig-zag tribal bands, chunky slab type ---------- */ .tpl-oxide { --bg: #17181b; --bg-2: #202226; --line: #3a3d43; --ink: #ebe8e1; --ink-2: #bcb9b0; --ink-3: #86847d; --r: 4px; --r-lg: 6px; --r-sm: 2px; --steel: linear-gradient(180deg, #44474d, #23252a); --rivet: radial-gradient(circle at 50% 50%, #cfd1d4 0 2px, #6b6e73 3px, transparent 4px); --brand-soft: color-mix(in srgb, var(--accent) 14%, #17181b); --brand-soft-2: color-mix(in srgb, var(--accent) 26%, #17181b); --brand-ink: color-mix(in srgb, var(--accent) 78%, #fff); color-scheme: dark; } .tpl-oxide h1, .tpl-oxide h2, .tpl-oxide h3, .tpl-oxide .display { font-family: 'Alfa Slab One', 'Roboto Slab', Georgia, serif; font-weight: 400; letter-spacing: .02em; } .tpl-oxide .announce { background: var(--accent); color: #06231f; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; } .tpl-oxide .hdr { background: var(--steel); border-bottom: 3px solid #0f1012; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .tpl-oxide .hdr .brand { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: #eceae4; text-shadow: 0 2px 0 rgba(0,0,0,.5); } .tpl-oxide .hdr .icon-link, .tpl-oxide .hdr .hdr-search .i { color: #eceae4; } .tpl-oxide .hdr-search input[type=search] { background: rgba(0,0,0,.35) !important; border: 1px solid #4c4f55 !important; border-radius: 4px !important; color: #eceae4; } .tpl-oxide .nav-bar { background: #0f1012; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-oxide .nav-bar .wrap { justify-content: center; } .tpl-oxide .nav-link { color: var(--ink-2); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; } .tpl-oxide .nav-link:hover, .tpl-oxide .nav-link.active { color: var(--accent); } .tpl-oxide .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-oxide .hero { background: #0f1012; } .tpl-oxide .hero-bg { opacity: .95; background-position: center 60%; } .tpl-oxide .hero::after { background: linear-gradient(90deg, rgba(15,16,18,.9), rgba(15,16,18,.45) 55%, transparent); } .tpl-oxide .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 3; background: repeating-linear-gradient(135deg, var(--accent) 0 10px, #0f1012 10px 20px); } .tpl-oxide .hero-in { padding: 112px 0 122px; max-width: 580px; } .tpl-oxide .hero h1 { color: #f2efe8; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; text-shadow: 0 3px 0 rgba(0,0,0,.45); } .tpl-oxide .hero p { color: #d3d0c7; opacity: 1; } .tpl-oxide .hero .eyebrow { background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: 2px; letter-spacing: .2em; font-weight: 800; backdrop-filter: none; } .tpl-oxide .btn { border-radius: 3px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; border: 2px solid #8b8e94; color: var(--ink); } .tpl-oxide .btn:hover { background: var(--ink); color: #17181b; border-color: var(--ink); } .tpl-oxide .btn-primary, .tpl-oxide .btn-accent { background: var(--accent); border-color: var(--accent); color: #06231f; } .tpl-oxide .btn-primary:hover, .tpl-oxide .btn-accent:hover { background: #6ad4cb; border-color: #6ad4cb; color: #06231f; } .tpl-oxide .btn-light { background: transparent; color: #f2efe8; border-color: #f2efe8; } .tpl-oxide input[type=text], .tpl-oxide input[type=email], .tpl-oxide input[type=tel], .tpl-oxide input[type=password], .tpl-oxide input[type=number], .tpl-oxide input[type=search], .tpl-oxide select, .tpl-oxide textarea { background-color: var(--bg-2); color: var(--ink); border-color: #4a4d54; } .tpl-oxide .section-head { border-bottom: 0; padding-bottom: 14px; position: relative; } .tpl-oxide .section-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: repeating-linear-gradient(135deg, #8b8e94 0 6px, transparent 6px 12px); opacity: .55; } .tpl-oxide .section-head h2 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-oxide .section-head .link-arrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } .tpl-oxide .rc-section .section-head { border-bottom: 0; } .tpl-oxide .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(22px, 2.6vw, 30px) !important; letter-spacing: .02em; text-transform: none; } .tpl-oxide .section-alt { background: var(--bg-2); } .tpl-oxide .rc-card, .tpl-oxide .p-card { position: relative; background: linear-gradient(180deg, #25272b, #1b1c20); border: 2px solid #55585f; border-radius: 6px; padding: 18px 14px 16px; transition: .2s; } .tpl-oxide .rc-card::before, .tpl-oxide .p-card::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 12px; pointer-events: none; z-index: 3; background: var(--rivet) 0 0 / 12px 12px no-repeat, var(--rivet) 100% 0 / 12px 12px no-repeat; } .tpl-oxide .rc-card:hover, .tpl-oxide .p-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 20px 30px -22px var(--accent); } .tpl-oxide .rc-img, .tpl-oxide .p-img { border-radius: 3px; aspect-ratio: 1/1; background: #0f1012; border: 1px solid #3a3d43; } .tpl-oxide .rc-name, .tpl-oxide .p-name { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400 !important; font-size: 13.5px !important; letter-spacing: .02em !important; } .tpl-oxide .rc-price b, .tpl-oxide .price b { color: var(--accent); font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; } .tpl-oxide .rc-chip span { background: transparent; border: 1px dashed #6f7279; color: var(--ink-3); border-radius: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; } .tpl-oxide .rc-btn { border-radius: 3px; border: 2px solid #8b8e94; color: var(--ink); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; } .tpl-oxide .rc-btn:hover { background: var(--ink); color: #17181b; } .tpl-oxide .rc-btn-main { background: var(--accent); border-color: var(--accent); color: #06231f; } .tpl-oxide .rc-tag, .tpl-oxide .tag { background: var(--accent); color: #06231f; border: 0; border-radius: 2px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 24px; left: 20px; } .tpl-oxide .rc-tag-sale { background: #e8d08a; } .tpl-oxide .rc-tag-out { background: #3a3d43; color: var(--ink-2); } .tpl-oxide .rc-heart button { background: rgba(0,0,0,.55); color: #fff; box-shadow: none; } .tpl-oxide .cat-grid { gap: 20px; } .tpl-oxide .cat-tile { aspect-ratio: 1/1; border-radius: 0; border: 8px solid transparent; border-image: repeating-linear-gradient(135deg, #8b8e94 0 9px, #23252a 9px 18px) 8; } .tpl-oxide .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(10,11,12,.9)); } .tpl-oxide .cat-tile h3 { font-family: 'Alfa Slab One', Georgia, serif; font-size: 18px; font-weight: 400; } .tpl-oxide .cat-tile .arr { background: var(--accent); color: #06231f; border-radius: 3px; } .tpl-oxide .trust { background: #0f1012; border-color: var(--line); } .tpl-oxide .trust-item { border-color: var(--line); background: transparent; } .tpl-oxide .trust-item .ic { background: var(--steel); color: var(--accent); border-radius: 4px; border: 1px solid #55585f; } .tpl-oxide .main-img { border: 2px solid #55585f; border-radius: 6px; background: #0f1012; } .tpl-oxide .pd-info h1 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-oxide .assure, .tpl-oxide .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-oxide .sticky-buy { background: var(--bg-2); border-top: 2px solid var(--accent); } .tpl-oxide .toast, .tpl-oxide .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-oxide .foot { background: #0b0c0e; border-top: 6px solid transparent; border-image: repeating-linear-gradient(135deg, var(--accent) 0 10px, #0b0c0e 10px 20px) 6; } .tpl-oxide .foot h4 { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; color: var(--accent); letter-spacing: .04em; } @media (max-width: 860px) { .tpl-oxide .hero-in { padding: 64px 0 76px; } } .tpl-oxide .hero:has(.hero-stock) { background: #0f1012; } /* ---------- Gemstone: faceted colour. Gem-strip header, diamond-cut banner photo, chamfered image corners, hexagon categories, a stone colour per card ---------- */ .tpl-gemstone { --bg: #fffaf3; --bg-2: #f6efe3; --line: #e9dfcf; --ink: #231b2e; --ink-2: #5d5470; --ink-3: #9a91ab; --r: 8px; --r-lg: 12px; --r-sm: 4px; --facet: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); } .tpl-gemstone h1, .tpl-gemstone h2, .tpl-gemstone h3, .tpl-gemstone .display { font-family: 'Prata', 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-gemstone .announce { background: var(--brand); color: #fff; letter-spacing: .08em; font-size: 12.5px; font-weight: 600; } .tpl-gemstone .hdr { background: #fff; border-bottom: 0; backdrop-filter: none; box-shadow: 0 1px 0 var(--line); } .tpl-gemstone .hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #d7263d 0 14%, #f08a24 14% 28%, #f2c230 28% 42%, #23a36b 42% 56%, #1f9bd1 56% 70%, #4b2a7b 70% 84%, #d94f9a 84% 100%); } .tpl-gemstone .hdr .brand { font-family: 'Prata', Georgia, serif; font-weight: 400; letter-spacing: .06em; color: var(--brand); font-size: 1.3em; } .tpl-gemstone .hdr-search input[type=search] { background: var(--bg-2) !important; border-radius: 999px !important; } .tpl-gemstone .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-gemstone .nav-bar .wrap { justify-content: center; } .tpl-gemstone .nav-link { font-weight: 600; letter-spacing: .04em; color: var(--ink-2); } .tpl-gemstone .nav-link:hover, .tpl-gemstone .nav-link.active { color: var(--brand); } .tpl-gemstone .nav-link.active::after { height: 3px; background: linear-gradient(90deg, #d7263d, #f2c230, #23a36b, #1f9bd1, #d94f9a); } .tpl-gemstone .hero { background: linear-gradient(110deg, #fffaf3 0 52%, #f5e6d6 52%); color: var(--ink); overflow: hidden; } .tpl-gemstone .hero::after { content: none; } .tpl-gemstone .hero-bg { inset: 6% 4% 6% auto; width: min(46%, 600px); height: auto; opacity: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background-position: center; } .tpl-gemstone .hero-in { max-width: 520px; padding: 112px 0 120px; } .tpl-gemstone .hero h1 { color: var(--ink); font-size: clamp(34px, 4.8vw, 60px); line-height: 1.08; } .tpl-gemstone .hero p { color: var(--ink-2); opacity: 1; } .tpl-gemstone .hero .eyebrow { background: var(--brand); color: #fff; backdrop-filter: none; border-radius: 0; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding: 8px 24px; font-weight: 700; letter-spacing: .14em; } .tpl-gemstone .btn { border-radius: 4px; font-weight: 700; letter-spacing: .04em; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); border-radius: 0; border-width: 0; } .tpl-gemstone .btn-primary { background: var(--brand); color: #fff; } .tpl-gemstone .btn-primary:hover { background: color-mix(in srgb, var(--brand) 80%, #000); } .tpl-gemstone .btn-accent { background: var(--accent); color: #fff; } .tpl-gemstone .btn-accent:hover { background: color-mix(in srgb, var(--accent) 82%, #000); } .tpl-gemstone .hero .btn-light, .tpl-gemstone .btn-light { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); } .tpl-gemstone .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--ink); } .tpl-gemstone .section-head h2::after { content: ""; display: block; width: 110px; height: 5px; margin-top: 10px; background: linear-gradient(90deg, #d7263d, #f08a24, #f2c230, #23a36b, #1f9bd1, #4b2a7b, #d94f9a); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%); } .tpl-gemstone .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-gemstone .rc-section .section-head { border-bottom: 0; } .tpl-gemstone .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: .01em; font-size: clamp(26px, 3.2vw, 36px) !important; padding-bottom: 0; } .tpl-gemstone .rc-section .section-head h2::after { margin-top: 10px; } .tpl-gemstone .section-alt { background: var(--bg-2); } .tpl-gemstone .rc-card { --stone: #d7263d; background: #fff; border: 0; border-top: 6px solid var(--stone); border-radius: 0; padding: 12px 12px 16px; transition: .25s; box-shadow: 0 14px 26px -22px rgba(35,27,46,.6); } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+1) { --stone: #d7263d; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+2) { --stone: #1f9bd1; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+3) { --stone: #23a36b; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+4) { --stone: #8a46c9; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+5) { --stone: #f2a81c; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n+6) { --stone: #d94f9a; } .tpl-gemstone .rc-grid > .rc-card:nth-child(7n) { --stone: #f08a24; } .tpl-gemstone .rc-card:hover { transform: translateY(-4px); box-shadow: 0 24px 34px -24px var(--stone); } .tpl-gemstone .rc-img, .tpl-gemstone .p-img { aspect-ratio: 1/1; border-radius: 0; clip-path: var(--facet); background: color-mix(in srgb, var(--stone, #4b2a7b) 10%, #fff); } .tpl-gemstone .rc-name, .tpl-gemstone .p-name { font-family: 'Prata', Georgia, serif; font-weight: 400 !important; font-size: 15px !important; } .tpl-gemstone .rc-price b, .tpl-gemstone .price b { color: var(--ink); font-weight: 800; } .tpl-gemstone .rc-chip span { background: color-mix(in srgb, var(--stone) 14%, #fff); border: 0; color: var(--ink-2); border-radius: 0; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); padding: 3px 14px; } .tpl-gemstone .rc-btn { border-radius: 0; border: 0; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-weight: 800; letter-spacing: .04em; } .tpl-gemstone .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-gemstone .rc-btn-main { background: var(--stone, var(--brand)); color: #fff; box-shadow: none; } .tpl-gemstone .rc-tag, .tpl-gemstone .tag { background: var(--stone, var(--accent)); color: #fff; border: 0; border-radius: 0; font-weight: 800; box-shadow: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 4px 14px; } .tpl-gemstone .p-card { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--brand); padding: 12px; } .tpl-gemstone .p-grid { gap: 26px 20px; } .tpl-gemstone .cat-grid { gap: 18px; } .tpl-gemstone .cat-tile { aspect-ratio: 1.15/1; border-radius: 0; clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%); } .tpl-gemstone .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(35,27,46,.78)); } .tpl-gemstone .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; left: 18%; right: 18%; } .tpl-gemstone .cat-tile h3 { font-family: 'Prata', Georgia, serif; font-size: 17px; font-weight: 400; } .tpl-gemstone .cat-tile .arr { display: none; } .tpl-gemstone .trust { background: #fff; border-color: var(--line); } .tpl-gemstone .trust-item .ic { background: var(--brand); color: #fff; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .tpl-gemstone .main-img { border: 0; border-radius: 0; clip-path: var(--facet); background: var(--bg-2); } .tpl-gemstone .pd-info h1 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-gemstone .foot { background: #231b2e; border-top: 5px solid transparent; border-image: linear-gradient(90deg, #d7263d, #f08a24, #f2c230, #23a36b, #1f9bd1, #4b2a7b, #d94f9a) 1; } .tpl-gemstone .foot h4 { color: #f2c230; font-family: 'Prata', Georgia, serif; text-transform: none; letter-spacing: .02em; font-size: 17px; } @media (max-width: 860px) { .tpl-gemstone .hero { background: #f5e6d6; } .tpl-gemstone .hero-bg { inset: auto 4% 4% auto; width: 46%; height: 36%; } .tpl-gemstone .hero-in { padding: 54px 0 150px; } .tpl-gemstone .cat-tile { aspect-ratio: 1/1; } } .tpl-gemstone .hero:has(.hero-stock) { background-color: #f5e6d6; } @media (max-width: 560px) { .tpl-solitaire .rc-actions, .tpl-kundan .rc-actions, .tpl-oxide .rc-actions, .tpl-gemstone .rc-actions { grid-template-columns: 1fr; } .tpl-solitaire .rc-btn, .tpl-kundan .rc-btn, .tpl-oxide .rc-btn, .tpl-gemstone .rc-btn { letter-spacing: .04em; padding: 0 4px; } } /* ===================================================================================================================================== Beauty and Personal Care (batch 3): Dewdrop (glassy droplets), Rouge (makeup counter), Ayur (ayurvedic mandala), Serum (clinical lab), Glowup (golden-hour influencer) ===================================================================================================================================== */ /* ---------- Dewdrop: fresh and glassy. Frosted-glass header and cards over a blush-to-aqua gradient, droplet-corner photos, capsule categories ---------- */ .tpl-dewdrop { --bg: #fff6fb; --bg-2: #f1ecfb; --line: #eadcf3; --ink: #2d1b3d; --ink-2: #61507a; --ink-3: #9a8bb0; --r: 18px; --r-lg: 28px; --r-sm: 10px; background-image: linear-gradient(180deg, #fff1f8 0%, #f4f0ff 45%, #ecfbff 100%); background-attachment: fixed; } .tpl-dewdrop h1, .tpl-dewdrop h2, .tpl-dewdrop h3, .tpl-dewdrop .display { font-family: 'Outfit', 'Poppins', sans-serif; font-weight: 600; letter-spacing: -.02em; } .tpl-dewdrop .announce { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--accent) 70%, var(--brand))); color: #fff; font-weight: 600; letter-spacing: .04em; font-size: 12.5px; } .tpl-dewdrop .hdr { background: rgba(255,255,255,.55); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.8); box-shadow: 0 10px 30px -22px rgba(166,63,135,.6); } .tpl-dewdrop .hdr .brand { font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: -.03em; color: var(--brand); } .tpl-dewdrop .hdr-search input[type=search] { background: rgba(255,255,255,.75) !important; border: 1px solid #fff !important; box-shadow: inset 0 1px 3px rgba(166,63,135,.12); } .tpl-dewdrop .nav-bar { background: rgba(255,255,255,.4); border-top: 0; backdrop-filter: blur(10px); } .tpl-dewdrop .nav-bar .wrap { justify-content: center; } .tpl-dewdrop .nav-link { font-weight: 600; color: var(--ink-2); } .tpl-dewdrop .nav-link:hover, .tpl-dewdrop .nav-link.active { color: var(--brand); } .tpl-dewdrop .nav-link.active::after { height: 4px; border-radius: 4px 4px 4px 0; background: linear-gradient(90deg, var(--brand), var(--accent)); } .tpl-dewdrop .hero { background: radial-gradient(circle at 15% 20%, rgba(255,177,222,.7) 0, transparent 40%), radial-gradient(circle at 88% 80%, rgba(111,205,230,.55) 0, transparent 42%), linear-gradient(135deg, #ffe4f2, #efe7ff); color: var(--ink); overflow: hidden; } .tpl-dewdrop .hero::after { content: none; } .tpl-dewdrop .hero-bg { inset: 7% 5% 7% auto; width: min(40%, 520px); height: auto; opacity: 1; border-radius: 50% 0 50% 50%; box-shadow: 0 0 0 10px rgba(255,255,255,.7), 0 36px 54px -30px rgba(166,63,135,.7); background-position: center 45%; } .tpl-dewdrop .hero-in { max-width: 520px; padding: 110px 0 118px; } .tpl-dewdrop .hero h1 { color: var(--ink); font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; } .tpl-dewdrop .hero p { color: var(--ink-2); opacity: 1; } .tpl-dewdrop .hero .eyebrow { background: rgba(255,255,255,.8); color: var(--brand); border: 1px solid #fff; backdrop-filter: blur(6px); border-radius: 50% 0 50% 50% / 100% 0 100% 100%; padding: 8px 18px 8px 16px; font-weight: 700; } .tpl-dewdrop .btn { border-radius: 999px; font-weight: 700; } .tpl-dewdrop .btn-primary, .tpl-dewdrop .btn-accent { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent))); border-color: transparent; color: #fff; box-shadow: 0 14px 24px -14px var(--brand); } .tpl-dewdrop .btn-primary:hover, .tpl-dewdrop .btn-accent:hover { filter: brightness(1.08); } .tpl-dewdrop .btn-light { background: rgba(255,255,255,.8); color: var(--brand); border: 1px solid #fff; backdrop-filter: blur(6px); } .tpl-dewdrop .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); } .tpl-dewdrop .section-head h2::after { content: ""; display: block; width: 26px; height: 26px; margin-top: 8px; border-radius: 50% 0 50% 50%; background: linear-gradient(135deg, var(--accent), var(--brand)); } .tpl-dewdrop .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-dewdrop .rc-section .section-head { border-bottom: 0; } .tpl-dewdrop .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: -.02em; font-size: clamp(26px, 3.2vw, 38px) !important; padding-bottom: 0; } .tpl-dewdrop .rc-section .section-head h2::after { margin-top: 8px; } .tpl-dewdrop .section-alt { background: transparent; } .tpl-dewdrop .rc-card, .tpl-dewdrop .p-card { background: rgba(255,255,255,.62); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255,255,255,.95); border-radius: 28px; padding: 10px 10px 16px; box-shadow: 0 20px 40px -30px rgba(166,63,135,.7); transition: .3s; } .tpl-dewdrop .rc-card:hover, .tpl-dewdrop .p-card:hover { transform: translateY(-6px); box-shadow: 0 30px 44px -28px rgba(166,63,135,.8); background: rgba(255,255,255,.85); } .tpl-dewdrop .rc-img, .tpl-dewdrop .p-img { border-radius: 50% 0 50% 50%; aspect-ratio: 1/1; background: linear-gradient(135deg, #ffe9f5, #e7f7ff); } .tpl-dewdrop .rc-grid > .rc-card:nth-child(even) .rc-img, .tpl-dewdrop .p-grid > .p-card:nth-child(even) .p-img { border-radius: 0 50% 50% 50%; } .tpl-dewdrop .rc-name, .tpl-dewdrop .p-name { font-family: 'Outfit', sans-serif; font-weight: 600 !important; } .tpl-dewdrop .rc-price b, .tpl-dewdrop .price b { color: var(--brand); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; } .tpl-dewdrop .rc-chip span { background: rgba(111,205,230,.25); border: 0; color: #1e6b80; border-radius: 50% 0 50% 50% / 100% 0 100% 100%; padding: 2px 12px 2px 10px; } .tpl-dewdrop .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; background: rgba(255,255,255,.6); } .tpl-dewdrop .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-dewdrop .rc-btn-main { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--accent))); color: #fff; border-color: transparent; } .tpl-dewdrop .rc-tag, .tpl-dewdrop .tag { background: linear-gradient(135deg, var(--accent), #9be3f2); color: #0d4252; border: 0; border-radius: 50% 0 50% 50% / 100% 0 100% 100%; padding: 6px 12px 6px 10px; font-weight: 800; box-shadow: none; } .tpl-dewdrop .rc-tag-sale { background: linear-gradient(135deg, var(--brand), #d77fc0); color: #fff; } .tpl-dewdrop .cat-grid { gap: 20px; } .tpl-dewdrop .cat-tile { aspect-ratio: 3/4; border-radius: 999px; box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 26px 36px -26px rgba(166,63,135,.8); margin: 6px; } .tpl-dewdrop .cat-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(120,40,100,.5)); } .tpl-dewdrop .cat-tile .t { left: 14px; right: 14px; bottom: 22px; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 16px; color: var(--ink); justify-content: center; } .tpl-dewdrop .cat-tile h3 { font-family: 'Outfit', sans-serif; font-size: 16px; } .tpl-dewdrop .cat-tile .arr { display: none; } .tpl-dewdrop .trust { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.8); backdrop-filter: blur(10px); } .tpl-dewdrop .trust-item .ic { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; border-radius: 50% 0 50% 50%; } .tpl-dewdrop .main-img { border-radius: 50% 0 50% 50% / 30% 0 30% 30%; box-shadow: 0 0 0 8px rgba(255,255,255,.7); } .tpl-dewdrop .foot { background: linear-gradient(135deg, #4a1d5a, #1d5f7a); border-radius: 44px 44px 0 0; margin: 40px 10px 0; } .tpl-dewdrop .foot h4 { color: var(--accent); } @media (max-width: 860px) { .tpl-dewdrop .hero-bg { inset: auto 4% 4% auto; width: 42%; height: 34%; } .tpl-dewdrop .hero-in { padding: 54px 0 150px; } .tpl-dewdrop .cat-tile { aspect-ratio: 1/1; } } .tpl-dewdrop .hero:has(.hero-stock) { background-color: #ffe4f2; } /* ---------- Rouge: makeup counter. Black and lip red, high-contrast display type, shade-swatch strip, glossy buttons, red-tab categories ---------- */ .tpl-rouge { --bg: #ffffff; --bg-2: #f6f1f0; --line: #e4dcda; --ink: #111111; --ink-2: #4a4343; --ink-3: #8f8584; --r: 0px; --r-lg: 0px; --r-sm: 0px; --shades: linear-gradient(90deg, #f1cdb7 0 11%, #e0a98c 11% 22%, #c98168 22% 33%, #e55a5a 33% 44%, #d3123c 44% 56%, #a3112f 56% 67%, #7a1633 67% 78%, #4f1230 78% 89%, #1c0b17 89% 100%); } .tpl-rouge h1, .tpl-rouge h2, .tpl-rouge h3, .tpl-rouge .display { font-family: 'Abril Fatface', 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: .005em; } .tpl-rouge .announce { background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; } .tpl-rouge .hdr { background: #111; border-bottom: 3px solid var(--accent); backdrop-filter: none; } .tpl-rouge .hdr .brand, .tpl-rouge .hdr .icon-link, .tpl-rouge .hdr .hdr-search .i { color: #fff; } .tpl-rouge .hdr .brand { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; font-size: 1.7em; letter-spacing: .01em; } .tpl-rouge .hdr-search input[type=search] { background: #232323 !important; border: 1px solid #3b3b3b !important; border-radius: 0 !important; color: #fff; } .tpl-rouge .hdr-search input[type=search]::placeholder { color: #a99; } .tpl-rouge .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-rouge .nav-bar .wrap { justify-content: center; } .tpl-rouge .nav-link { text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 800; color: var(--ink); } .tpl-rouge .nav-link:hover, .tpl-rouge .nav-link.active { color: var(--accent); } .tpl-rouge .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-rouge .hero { background: #000; min-height: 560px; display: flex; align-items: center; } .tpl-rouge .hero-bg { left: 30%; opacity: 1; background-position: center 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%); mask-image: linear-gradient(90deg, transparent, #000 24%); } .tpl-rouge .hero::after { content: none; } .tpl-rouge .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--shades); z-index: 3; } .tpl-rouge .hero-in { max-width: 560px; padding: 96px 0 110px; } .tpl-rouge .hero h1 { color: #fff; font-size: clamp(46px, 7vw, 100px); line-height: .95; text-transform: uppercase; } .tpl-rouge .hero h1::first-letter { color: var(--accent); } .tpl-rouge .hero p { color: #e8dfdd; opacity: 1; } .tpl-rouge .hero .eyebrow { background: var(--accent); color: #fff; border-radius: 0; font-weight: 800; letter-spacing: .24em; backdrop-filter: none; } .tpl-rouge .btn { border-radius: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; } .tpl-rouge .btn-primary, .tpl-rouge .btn-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 48%, color-mix(in srgb, var(--accent) 80%, #000)); border-color: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .tpl-rouge .btn-primary:hover, .tpl-rouge .btn-accent:hover { background: #111; border-color: #111; } .tpl-rouge .hero .btn-light, .tpl-rouge .btn-light { background: transparent; color: #fff; border: 2px solid #fff; } .tpl-rouge .section .btn-light { color: var(--ink); border-color: var(--ink); } .tpl-rouge .section-head { border-bottom: 4px solid #111; padding-bottom: 8px; } .tpl-rouge .section-head h2 { font-size: clamp(32px, 4.4vw, 56px); text-transform: uppercase; line-height: 1; } .tpl-rouge .section-head h2::after { content: ""; display: block; width: 150px; height: 8px; margin-top: 10px; background: var(--shades); } .tpl-rouge .section-head .link-arrow { color: var(--accent); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; } .tpl-rouge .rc-section .section-head { border-bottom: 4px solid #111; } .tpl-rouge .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(28px, 3.6vw, 44px) !important; letter-spacing: .005em; } .tpl-rouge .section-alt { background: var(--bg-2); } .tpl-rouge .rc-card, .tpl-rouge .p-card { background: #fff; border: 2px solid #111; border-radius: 0; padding: 0 0 14px; transition: .2s; } .tpl-rouge .rc-card:hover, .tpl-rouge .p-card:hover { box-shadow: 8px 8px 0 var(--accent); transform: translate(-4px, -4px); } .tpl-rouge .rc-media, .tpl-rouge .p-img { margin: 0 0 12px; } .tpl-rouge .rc-img, .tpl-rouge .p-img { aspect-ratio: 4/5; border-radius: 0; background: var(--bg-2); border-bottom: 2px solid #111; } .tpl-rouge .rc-name, .tpl-rouge .p-name, .tpl-rouge .rc-chip, .tpl-rouge .rc-price, .tpl-rouge .rc-actions, .tpl-rouge .p-cat, .tpl-rouge .p-card .price { margin-left: 12px; margin-right: 12px; } .tpl-rouge .rc-name, .tpl-rouge .p-name { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400 !important; font-size: 18px !important; letter-spacing: 0 !important; text-align: left; } .tpl-rouge .rc-chip { text-align: left; display: flex; align-items: center; gap: 10px; } .tpl-rouge .rc-chip span { background: transparent; border: 0; padding: 0; color: var(--ink-3); text-transform: uppercase; letter-spacing: .16em; font-size: 9.5px; font-weight: 700; } .tpl-rouge .rc-chip::after { content: ""; display: inline-block; width: 50px; height: 12px; background: radial-gradient(circle at 6px 6px, #e0a98c 5px, transparent 5.5px), radial-gradient(circle at 18px 6px, #d3123c 5px, transparent 5.5px), radial-gradient(circle at 30px 6px, #7a1633 5px, transparent 5.5px), radial-gradient(circle at 42px 6px, #1c0b17 5px, transparent 5.5px); } .tpl-rouge .rc-price { justify-content: flex-start; text-align: left; } .tpl-rouge .rc-price b, .tpl-rouge .price b { color: var(--ink); font-weight: 800; font-size: 17px; } .tpl-rouge .rc-btn { border-radius: 0; border: 2px solid #111; color: #111; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; } .tpl-rouge .rc-btn:hover { background: #111; color: #fff; } .tpl-rouge .rc-btn-main { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 50%, color-mix(in srgb, var(--accent) 80%, #000)); border-color: var(--accent); color: #fff; } .tpl-rouge .rc-tag, .tpl-rouge .tag { background: #111; color: #fff; border: 0; border-radius: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; top: 0; left: 0; padding: 6px 10px; } .tpl-rouge .rc-tag-sale { background: var(--accent); } .tpl-rouge .cat-grid { gap: 18px; } .tpl-rouge .cat-tile { aspect-ratio: 4/5; border-radius: 0; border: 3px solid #111; } .tpl-rouge .cat-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.8)); } .tpl-rouge .cat-tile .t { left: 0; right: 0; bottom: 0; background: var(--accent); padding: 10px 14px; } .tpl-rouge .cat-tile h3 { font-family: 'Abril Fatface', Georgia, serif; font-size: 20px; font-weight: 400; } .tpl-rouge .cat-tile .arr { border-radius: 0; background: #111; } .tpl-rouge .trust { background: #111; border: 0; } .tpl-rouge .trust-item { border-color: #333; color: #fff; } .tpl-rouge .trust-item span { color: #b7aaa8; } .tpl-rouge .trust-item .ic { background: var(--accent); color: #fff; border-radius: 0; } .tpl-rouge .main-img { border: 3px solid #111; border-radius: 0; background: var(--bg-2); } .tpl-rouge .pd-info h1 { font-size: clamp(32px, 4vw, 52px); text-transform: uppercase; line-height: 1; } .tpl-rouge .foot { background: #111; border-top: 16px solid transparent; border-image: var(--shades) 1; } .tpl-rouge .foot h4 { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 20px; color: #fff; } @media (max-width: 860px) { .tpl-rouge .hero-bg { left: 0; opacity: .5; -webkit-mask-image: none; mask-image: none; } .tpl-rouge .hero-in { padding: 64px 0 80px; } .tpl-rouge .hero { min-height: 460px; } } .tpl-rouge .hero:has(.hero-stock) { background: #000; } /* ---------- Ayur: ayurvedic and herbal. Forest green with turmeric, mandala rings, leaf-shaped images, lotus dividers ---------- */ .tpl-ayur { --bg: #fbf4e4; --bg-2: #f2e7c9; --line: #e4d4a8; --ink: #2a2415; --ink-2: #5c5233; --ink-3: #978b66; --r: 14px; --r-lg: 24px; --r-sm: 8px; --mandala: repeating-radial-gradient(circle at 12% 115%, transparent 0 20px, rgba(227,162,26,.28) 20px 22px); } .tpl-ayur h1, .tpl-ayur h2, .tpl-ayur h3, .tpl-ayur .display { font-family: 'Marcellus', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-ayur .announce { background: #1f4129; color: #f3d98a; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; } .tpl-ayur .hdr { background: var(--brand); border-bottom: 3px dotted var(--accent); backdrop-filter: none; } .tpl-ayur .hdr .brand, .tpl-ayur .hdr .icon-link, .tpl-ayur .hdr .hdr-search .i { color: #fbf1d3; } .tpl-ayur .hdr .brand { font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 1.5em; letter-spacing: .04em; } .tpl-ayur .hdr-search input[type=search] { background: rgba(255,255,255,.12) !important; border-color: rgba(243,217,138,.4) !important; color: #fbf1d3; } .tpl-ayur .hdr-search input[type=search]::placeholder { color: rgba(251,241,211,.75); } .tpl-ayur .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-ayur .nav-bar .wrap { justify-content: center; } .tpl-ayur .nav-link { font-family: 'Marcellus', Georgia, serif; font-size: 15px; letter-spacing: .05em; color: var(--ink-2); } .tpl-ayur .nav-link:hover, .tpl-ayur .nav-link.active { color: var(--brand); } .tpl-ayur .nav-link.active::after { height: 3px; background: var(--accent); border-radius: 0 100% 0 100%; } .tpl-ayur .hero { background: var(--mandala), var(--brand); color: #fbf1d3; overflow: hidden; } .tpl-ayur .hero::after { content: none; } .tpl-ayur .hero-bg { inset: 8% 5% 8% auto; width: min(40%, 520px); height: auto; opacity: 1; border-radius: 0 38% 0 38% / 0 38% 0 38%; box-shadow: 0 0 0 8px var(--accent), 0 0 0 10px #1f4129, 0 30px 50px -28px rgba(0,0,0,.6); background-position: center; } .tpl-ayur .hero-in { max-width: 540px; padding: 112px 0 120px; } .tpl-ayur .hero h1 { color: #fbf1d3; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; } .tpl-ayur .hero p { color: #e4e8d6; opacity: 1; } .tpl-ayur .hero .eyebrow { background: var(--accent); color: #2a1c02; border-radius: 0 100% 0 100% / 0 100% 0 100%; padding: 8px 26px; font-weight: 800; backdrop-filter: none; letter-spacing: .1em; } .tpl-ayur .btn { border-radius: 999px; font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; } .tpl-ayur .btn-primary { background: var(--brand); border-color: var(--brand); color: #fbf1d3; } .tpl-ayur .btn-primary:hover { background: #1f4129; } .tpl-ayur .btn-accent { background: var(--accent); border-color: var(--accent); color: #2a1c02; } .tpl-ayur .btn-accent:hover { background: #f1b933; border-color: #f1b933; } .tpl-ayur .hero .btn-light { background: transparent; color: #fbf1d3; border: 1.5px solid #fbf1d3; } .tpl-ayur .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 6px; } .tpl-ayur .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--brand); } .tpl-ayur .section-head h2::before { content: "❀"; display: block; color: var(--accent); font-size: .6em; margin-bottom: 4px; } .tpl-ayur .section-head h2::after { content: ""; display: block; width: 90px; height: 5px; margin: 10px auto 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .tpl-ayur .section-head .link-arrow { color: var(--brand); font-family: 'Marcellus', Georgia, serif; letter-spacing: .06em; } .tpl-ayur .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-ayur .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: .01em; font-size: clamp(26px, 3.2vw, 38px) !important; } .tpl-ayur .rc-section .section-head h2::before, .tpl-ayur .rc-section .section-head h2::after { content: none; } .tpl-ayur .rc-section .section-head h2::before { content: "❀" !important; display: block; } .tpl-ayur .rc-section .section-head h2::after { content: "" !important; display: block; } .tpl-ayur .section-alt { background: var(--bg-2); } .tpl-ayur .rc-card, .tpl-ayur .p-card { background: #fffaf0; border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 16px; transition: .25s; } .tpl-ayur .rc-card:hover, .tpl-ayur .p-card:hover { border-color: var(--accent); box-shadow: 0 20px 30px -24px var(--brand); transform: translateY(-4px); } .tpl-ayur .rc-img, .tpl-ayur .p-img { border-radius: 0 32% 0 32% / 0 32% 0 32%; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-ayur .rc-grid > .rc-card:nth-child(even) .rc-img, .tpl-ayur .p-grid > .p-card:nth-child(even) .p-img { border-radius: 32% 0 32% 0 / 32% 0 32% 0; } .tpl-ayur .rc-name, .tpl-ayur .p-name { font-family: 'Marcellus', Georgia, serif; font-weight: 400 !important; font-size: 17px !important; } .tpl-ayur .rc-price b, .tpl-ayur .price b { color: var(--brand); font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: 18px; } .tpl-ayur .rc-chip span { background: color-mix(in srgb, var(--brand) 12%, #fff); border: 0; color: var(--brand); border-radius: 0 100% 0 100% / 0 100% 0 100%; padding: 3px 16px; font-weight: 700; } .tpl-ayur .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-family: 'Marcellus', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; } .tpl-ayur .rc-btn:hover { background: var(--brand); color: #fbf1d3; } .tpl-ayur .rc-btn-main { background: var(--brand); color: #fbf1d3; } .tpl-ayur .rc-tag, .tpl-ayur .tag { background: var(--accent); color: #2a1c02; border: 0; border-radius: 0 100% 0 100% / 0 100% 0 100%; padding: 5px 16px; font-weight: 800; box-shadow: none; } .tpl-ayur .rc-tag-sale { background: var(--brand); color: #fbf1d3; } .tpl-ayur .cat-grid { gap: 22px; } .tpl-ayur .cat-tile { aspect-ratio: 4/5; border-radius: 0 56% 0 56% / 0 36% 0 36%; border: 3px solid var(--accent); } .tpl-ayur .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(31,65,41,.88)); } .tpl-ayur .cat-tile .t { justify-content: center; text-align: center; bottom: 24px; } .tpl-ayur .cat-tile h3 { font-family: 'Marcellus', Georgia, serif; font-size: 22px; font-weight: 400; color: #fbf1d3; } .tpl-ayur .cat-tile .arr { display: none; } .tpl-ayur .trust { background: var(--bg-2); border-color: var(--line); } .tpl-ayur .trust-item .ic { background: var(--brand); color: var(--accent); border-radius: 0 100% 0 100% / 0 100% 0 100%; } .tpl-ayur .main-img { border-radius: 0 20% 0 20% / 0 12% 0 12%; border: 3px solid var(--accent); } .tpl-ayur .foot { background: #1f4129; color: #cfdcc9; border-top: 6px double var(--accent); } .tpl-ayur .foot h4 { font-family: 'Marcellus', Georgia, serif; color: var(--accent); text-transform: none; letter-spacing: .04em; font-size: 18px; font-weight: 400; } .tpl-ayur .foot a { color: #cfdcc9; } @media (max-width: 860px) { .tpl-ayur .hero-bg { inset: auto 5% 5% auto; width: 42%; height: 34%; } .tpl-ayur .hero-in { padding: 54px 0 150px; } } .tpl-ayur .hero:has(.hero-stock) { background-color: var(--brand); } /* ---------- Serum: clinical lab. White with a faint measurement grid, monospace specs, ruler-edged photos, crosshair tiles ---------- */ .tpl-serum { --bg: #fbfdfe; --bg-2: #eef4f7; --line: #d6e2e9; --ink: #0d2230; --ink-2: #4a6171; --ink-3: #86a0b0; --r: 2px; --r-lg: 3px; --r-sm: 2px; --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; background-image: linear-gradient(rgba(11,79,108,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,79,108,.05) 1px, transparent 1px); background-size: 32px 32px; } .tpl-serum h1, .tpl-serum h2, .tpl-serum h3, .tpl-serum .display { font-family: 'IBM Plex Sans', 'Inter', sans-serif; font-weight: 500; letter-spacing: -.02em; } .tpl-serum .announce { background: var(--ink); color: #9fe9df; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .tpl-serum .hdr { background: rgba(251,253,254,.95); border-bottom: 1px solid var(--line); backdrop-filter: none; } .tpl-serum .hdr .brand { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; text-transform: lowercase; color: var(--ink); font-size: 1.2em; } .tpl-serum .hdr .brand::after { content: "®"; font-size: .55em; vertical-align: super; margin-left: 2px; color: var(--accent); } .tpl-serum .hdr-search input[type=search] { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 2px !important; font-family: var(--mono); font-size: 13px; } .tpl-serum .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-serum .nav-link { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .tpl-serum .nav-link:hover, .tpl-serum .nav-link.active { color: var(--brand); } .tpl-serum .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-serum .hero { background: transparent; color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); } .tpl-serum .hero::after { content: none; } .tpl-serum .hero-bg { inset: 40px 5% 40px auto; width: min(42%, 540px); height: auto; opacity: 1; border: 1px solid var(--ink); outline: 1px solid var(--line); outline-offset: 10px; background-position: center; } .tpl-serum .hero-in { max-width: 520px; padding: 104px 0 112px; } .tpl-serum .hero h1 { color: var(--ink); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; font-weight: 500; } .tpl-serum .hero p { color: var(--ink-2); opacity: 1; } .tpl-serum .hero .eyebrow { background: transparent; border: 1px solid var(--accent); color: var(--brand); border-radius: 2px; font-family: var(--mono); letter-spacing: .1em; font-weight: 500; backdrop-filter: none; } .tpl-serum .btn { border-radius: 2px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500; } .tpl-serum .btn-primary, .tpl-serum .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-serum .btn-primary:hover, .tpl-serum .btn-accent:hover { background: var(--ink); border-color: var(--ink); } .tpl-serum .btn-light { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .tpl-serum .section-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; } .tpl-serum .section-head h2 { font-size: clamp(24px, 3vw, 34px); } .tpl-serum .section-head h2::before { content: "// "; font-family: var(--mono); color: var(--accent); font-size: .7em; } .tpl-serum .section-head p { font-family: var(--mono); font-size: 12.5px; } .tpl-serum .section-head .link-arrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; color: var(--brand); } .tpl-serum .rc-section .section-head { border-bottom: 1px solid var(--line); } .tpl-serum .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.02em; font-size: clamp(22px, 2.6vw, 30px) !important; } .tpl-serum .rc-section .section-head h2::before { content: "// " !important; } .tpl-serum .section-alt { background: rgba(238,244,247,.75); } .tpl-serum .rc-card, .tpl-serum .p-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 10px 10px 14px; transition: border-color .2s; } .tpl-serum .rc-card:hover, .tpl-serum .p-card:hover { border-color: var(--brand); box-shadow: none; } .tpl-serum .rc-img, .tpl-serum .p-img { position: relative; border-radius: 0; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-serum .rc-img::before, .tpl-serum .p-img::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, var(--ink-3) 0 1px, transparent 1px 8px); opacity: .6; } .tpl-serum .rc-name, .tpl-serum .p-name { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600 !important; font-size: 14px !important; letter-spacing: -.01em !important; text-align: left; } .tpl-serum .rc-chip { text-align: left; } .tpl-serum .rc-chip span { background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 2px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; } .tpl-serum .rc-price { justify-content: flex-start; text-align: left; } .tpl-serum .rc-price b, .tpl-serum .price b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 15px; } .tpl-serum .rc-btn { border-radius: 2px; border: 1px solid var(--ink); color: var(--ink); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; font-weight: 500; } .tpl-serum .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-serum .rc-btn-main { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-serum .rc-tag, .tpl-serum .tag { background: #fff; color: var(--brand); border: 1px solid var(--accent); border-radius: 2px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; font-weight: 500; box-shadow: none; } .tpl-serum .rc-tag-sale { background: var(--accent); color: #04302b; } .tpl-serum .cat-grid { gap: 16px; } .tpl-serum .cat-tile { aspect-ratio: 1/1; border-radius: 0; border: 1px solid var(--ink); } .tpl-serum .cat-tile::before { content: "+"; position: absolute; left: 6px; top: 2px; z-index: 2; color: #fff; font-family: var(--mono); font-size: 16px; } .tpl-serum .cat-tile .t::after { content: "+"; position: absolute; right: -10px; top: -26px; color: #fff; font-family: var(--mono); font-size: 16px; } .tpl-serum .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(13,34,48,.82)); } .tpl-serum .cat-tile h3 { font-family: var(--mono); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; } .tpl-serum .cat-tile .arr { border-radius: 0; background: transparent; border: 1px solid #fff; } .tpl-serum .trust { background: #fff; border-color: var(--line); } .tpl-serum .trust-item span { font-family: var(--mono); font-size: 12px; } .tpl-serum .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--brand); border-radius: 2px; } .tpl-serum .main-img { border: 1px solid var(--ink); border-radius: 0; outline: 1px solid var(--line); outline-offset: 8px; background: var(--bg-2); } .tpl-serum .pd-info h1 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-serum .foot { background: #eef4f7; color: var(--ink-2); border-top: 1px solid var(--line); } .tpl-serum .foot h4 { color: var(--ink); font-family: var(--mono); letter-spacing: .1em; font-weight: 500; } .tpl-serum .foot a { color: var(--ink-2); } .tpl-serum .foot-bottom { border-top-color: var(--line); color: var(--ink-3); font-family: var(--mono); font-size: 12px; } @media (max-width: 860px) { .tpl-serum .hero-bg { inset: auto 5% 24px auto; width: 40%; height: 34%; } .tpl-serum .hero-in { padding: 54px 0 150px; } } .tpl-serum .hero:has(.hero-stock) { background: transparent; } /* ---------- Glowup: golden-hour influencer. Sunset gradient, tilted photo card, story-ring category circles, gradient-border cards ---------- */ .tpl-glowup { --bg: #fff8ef; --bg-2: #ffeede; --line: #f6dcc3; --ink: #3a2117; --ink-2: #7a5442; --ink-3: #b49080; --r: 22px; --r-lg: 32px; --r-sm: 12px; --sun: linear-gradient(135deg, #ffd9b0, #ffb48a 55%, #f59a7a); --ring: conic-gradient(from 200deg, #f9ce34, #f4885a, #e0457b, #8a46c9, #f9ce34); } .tpl-glowup h1, .tpl-glowup h2, .tpl-glowup h3, .tpl-glowup .display { font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.035em; } .tpl-glowup .announce { background: var(--sun); color: #4a2314; font-weight: 700; letter-spacing: .02em; font-size: 12.5px; } .tpl-glowup .hdr { background: rgba(255,255,255,.94); border-radius: 0 0 30px 30px; border-bottom: 0; box-shadow: 0 16px 30px -24px rgba(180,83,29,.7); backdrop-filter: blur(10px); } .tpl-glowup .hdr .brand { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.05em; color: var(--brand); font-size: 1.4em; } .tpl-glowup .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: transparent !important; } .tpl-glowup .nav-bar { background: transparent; border-top: 0; } .tpl-glowup .nav-bar .wrap { justify-content: center; gap: 6px; padding: 10px 0; } .tpl-glowup .nav-link { font-weight: 700; font-size: 13.5px; color: var(--ink-2); border-radius: 999px; padding: 8px 16px; } .tpl-glowup .nav-link:hover { background: #fff; } .tpl-glowup .nav-link.active { background: var(--ink); color: #fff; } .tpl-glowup .nav-link.active::after { content: none; } .tpl-glowup .hero { margin: 0 14px; border-radius: 44px; background: var(--sun); color: var(--ink); overflow: hidden; } .tpl-glowup .hero::after { content: none; } .tpl-glowup .hero::before { content: "✨"; position: absolute; right: 7%; top: 12%; font-size: 44px; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); } .tpl-glowup .hero-bg { inset: 9% 9% 9% auto; width: min(34%, 430px); height: auto; opacity: 1; border-radius: 40px; transform: rotate(3deg); border: 8px solid #fff; box-shadow: 0 34px 50px -26px rgba(120,50,20,.65); background-position: center 25%; } .tpl-glowup .hero-in { max-width: 540px; padding: 104px 0 112px; } .tpl-glowup .hero h1 { color: #3a1b0f; font-size: clamp(40px, 5.8vw, 76px); line-height: .98; } .tpl-glowup .hero p { color: #5b3322; opacity: 1; } .tpl-glowup .hero .eyebrow { background: rgba(255,255,255,.85); color: var(--brand); border-radius: 999px; backdrop-filter: none; text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 14px; } .tpl-glowup .btn { border-radius: 999px; font-weight: 800; } .tpl-glowup .btn-primary, .tpl-glowup .btn-accent { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 14px 22px -14px var(--ink); } .tpl-glowup .btn-primary:hover, .tpl-glowup .btn-accent:hover { background: var(--brand); border-color: var(--brand); } .tpl-glowup .btn-light { background: #fff; color: var(--ink); border-color: #fff; } .tpl-glowup .section-head h2 { font-size: clamp(30px, 4vw, 50px); } .tpl-glowup .section-head h2::after { content: ""; display: block; width: 64px; height: 7px; margin-top: 8px; border-radius: 99px; background: var(--ring); } .tpl-glowup .section-head .link-arrow { color: var(--brand); font-weight: 800; } .tpl-glowup .rc-section .section-head { border-bottom: 0; } .tpl-glowup .rc-section .section-head h2 { border-bottom: 0; text-transform: none; letter-spacing: -.035em; font-size: clamp(28px, 3.6vw, 42px) !important; padding-bottom: 0; } .tpl-glowup .section-alt { background: var(--bg-2); } .tpl-glowup .rc-card, .tpl-glowup .p-card { border: 3px solid transparent; border-radius: 32px; background: linear-gradient(#fff, #fff) padding-box, var(--ring) border-box; padding: 10px 10px 16px; transition: .25s; } .tpl-glowup .rc-card:hover, .tpl-glowup .p-card:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: 0 28px 38px -26px rgba(224,69,123,.6); } .tpl-glowup .rc-img, .tpl-glowup .p-img { border-radius: 24px; aspect-ratio: 4/5; background: var(--bg-2); } .tpl-glowup .rc-name, .tpl-glowup .p-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800 !important; letter-spacing: -.02em !important; } .tpl-glowup .rc-price b, .tpl-glowup .price b { color: var(--brand); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; } .tpl-glowup .rc-chip span { background: #fff1e4; border: 0; border-radius: 999px; color: var(--ink-2); font-weight: 700; } .tpl-glowup .rc-btn { border-radius: 999px; border: 2px solid var(--ink); font-weight: 800; } .tpl-glowup .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-glowup .rc-btn-main { background: var(--sun); border-color: transparent; color: #3a1b0f; } .tpl-glowup .rc-tag, .tpl-glowup .tag { background: var(--ink); color: #fff; border: 0; border-radius: 999px; font-weight: 800; box-shadow: none; } .tpl-glowup .rc-tag-sale { background: #e0457b; } .tpl-glowup .cat-grid { gap: 22px; } .tpl-glowup .cat-tile { overflow: visible; aspect-ratio: 1/1; border-radius: 50%; margin: 10px; background: transparent; } .tpl-glowup .cat-tile::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: var(--ring); z-index: -2; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); } .tpl-glowup .cat-tile img { border-radius: 50%; } .tpl-glowup .cat-tile::after { border-radius: 50%; background: linear-gradient(180deg, transparent 50%, rgba(80,30,15,.6)); } .tpl-glowup .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; } .tpl-glowup .cat-tile h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; } .tpl-glowup .cat-tile .arr { display: none; } .tpl-glowup .trust { background: transparent; border: 0; } .tpl-glowup .trust-item { background: #fff; border: 0; border-radius: 24px; margin: 6px; box-shadow: 0 14px 24px -22px rgba(180,83,29,.7); } .tpl-glowup .trust-item .ic { background: var(--sun); color: #4a2314; } .tpl-glowup .main-img { border-radius: 36px; border: 3px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--ring) border-box; } .tpl-glowup .foot { background: #3a1b0f; color: #e8cdbd; border-radius: 44px 44px 0 0; margin: 40px 10px 0; } .tpl-glowup .foot h4 { color: #ffd9b0; } @media (max-width: 860px) { .tpl-glowup .hero { margin: 0 8px; border-radius: 30px; } .tpl-glowup .hero-bg { inset: auto 6% 5% auto; width: 40%; height: 36%; } .tpl-glowup .hero-in { padding: 54px 0 160px; } .tpl-glowup .hero::before { top: 6%; font-size: 32px; } .tpl-glowup .hdr { border-radius: 0 0 20px 20px; } } .tpl-glowup .hero:has(.hero-stock) { background: var(--sun); } @media (max-width: 560px) { .tpl-rouge .rc-btn, .tpl-serum .rc-btn, .tpl-ayur .rc-btn { letter-spacing: .03em; padding: 0 4px; } .tpl-rouge .rc-actions, .tpl-serum .rc-actions { grid-template-columns: 1fr; } } @media (max-width: 560px) { .tpl-ayur .rc-actions, .tpl-dewdrop .rc-actions, .tpl-glowup .rc-actions { grid-template-columns: 1fr; } .tpl-ayur .rc-btn, .tpl-dewdrop .rc-btn, .tpl-glowup .rc-btn { letter-spacing: .03em; padding: 0 4px; } } /* ===================================================================================================================================== Food and Grocery (batch 4): Mithai (festive sweets tray), Achaar (rustic pickles), Masala (spice market), Patisserie (bakery), Cloudkitchen (delivery-app menu) ===================================================================================================================================== */ /* ---------- Mithai: festive sweets. Maroon and saffron on cream, a gold-bordered sweet-box tray where products sit in divided compartments ---------- */ .tpl-mithai { --bg: #fff6e4; --bg-2: #fbe9c6; --line: #e8cf9a; --ink: #2d1410; --ink-2: #6a4338; --ink-3: #a48573; --r: 4px; --r-lg: 6px; --r-sm: 2px; --gold: #c8921f; } .tpl-mithai h1, .tpl-mithai h2, .tpl-mithai h3, .tpl-mithai .display { font-family: 'Rozha One', 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-mithai .announce { background: #4c0b14; color: #ffd98a; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; } .tpl-mithai .hdr { background: var(--brand); border-bottom: 0; backdrop-filter: none; margin-bottom: 12px; overflow: visible; } .tpl-mithai .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; pointer-events: none; background: radial-gradient(circle at 12px 0, var(--accent) 11px, transparent 11.5px) 0 0 / 24px 12px repeat-x; } .tpl-mithai .hdr .brand, .tpl-mithai .hdr .icon-link, .tpl-mithai .hdr .hdr-search .i { color: #ffe9b8; } .tpl-mithai .hdr .brand { font-family: 'Rozha One', Georgia, serif; font-weight: 400; font-size: 1.5em; } .tpl-mithai .hdr-search input[type=search] { background: rgba(255,255,255,.12) !important; border-color: rgba(255,217,138,.45) !important; color: #ffe9b8; border-radius: 999px !important; } .tpl-mithai .hdr-search input[type=search]::placeholder { color: rgba(255,233,184,.78); } .tpl-mithai .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-mithai .nav-bar .wrap { justify-content: center; } .tpl-mithai .nav-link { font-weight: 800; letter-spacing: .05em; color: var(--ink); } .tpl-mithai .nav-link:hover, .tpl-mithai .nav-link.active { color: var(--brand); } .tpl-mithai .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-mithai .hero { background: color-mix(in srgb, var(--brand) 85%, #000); } .tpl-mithai .hero-bg { opacity: 1; background-position: center 55%; } .tpl-mithai .hero::after { background: linear-gradient(90deg, rgba(76,11,20,.94), rgba(76,11,20,.55) 55%, transparent); } .tpl-mithai .hero::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--accent); z-index: 3; pointer-events: none; outline: 1px solid rgba(255,217,138,.6); outline-offset: 5px; } .tpl-mithai .hero-in { padding: 110px 0 118px; max-width: 560px; margin-left: 34px; } .tpl-mithai .hero h1 { color: #ffe9b8; font-size: clamp(36px, 5.2vw, 66px); line-height: 1.04; } .tpl-mithai .hero p { color: #f8e4cf; opacity: 1; } .tpl-mithai .hero .eyebrow { background: var(--accent); color: #3a1604; border-radius: 0; font-weight: 800; letter-spacing: .14em; backdrop-filter: none; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); padding-right: 26px; } .tpl-mithai .btn { border-radius: 2px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; } .tpl-mithai .btn-primary { background: var(--brand); border-color: var(--brand); color: #ffe9b8; } .tpl-mithai .btn-primary:hover { background: #4c0b14; } .tpl-mithai .btn-accent { background: var(--accent); border-color: var(--accent); color: #3a1604; } .tpl-mithai .btn-accent:hover { background: #ffb43d; border-color: #ffb43d; } .tpl-mithai .hero .btn-light { background: transparent; color: #ffe9b8; border: 2px solid var(--accent); } .tpl-mithai .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; } .tpl-mithai .section-head h2 { color: var(--brand); font-size: clamp(28px, 3.6vw, 42px); } .tpl-mithai .section-head h2::after { content: "✦ ✦ ✦"; display: block; color: var(--accent); font-size: 12px; letter-spacing: .5em; margin-top: 10px; } .tpl-mithai .section-head .link-arrow { color: var(--brand); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; } .tpl-mithai .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-mithai .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: .01em; font-size: clamp(26px, 3.2vw, 38px) !important; } .tpl-mithai .rc-section .section-head h2::after { content: "✦ ✦ ✦" !important; display: block; } .tpl-mithai .section-alt { background: var(--bg-2); } .tpl-mithai .rc-grid, .tpl-mithai .p-grid { gap: 0; border: 3px solid var(--gold); background: #fffaf0; box-shadow: 0 0 0 1px #fffaf0, 0 0 0 4px var(--gold), 0 24px 40px -30px #4c0b14; } .tpl-mithai .rc-card, .tpl-mithai .p-card { background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 14px 18px; transition: background .2s; } .tpl-mithai .rc-card:hover, .tpl-mithai .p-card:hover { background: #fff1d3; box-shadow: none; } .tpl-mithai .rc-img, .tpl-mithai .p-img { border-radius: 50%; aspect-ratio: 1/1; background: var(--bg-2); box-shadow: 0 0 0 5px #fffaf0, 0 0 0 7px var(--gold); margin: 8px 10px 22px; } .tpl-mithai .rc-name, .tpl-mithai .p-name { font-family: 'Rozha One', Georgia, serif; font-weight: 400 !important; font-size: 16px !important; } .tpl-mithai .rc-price b, .tpl-mithai .price b { color: var(--brand); font-weight: 800; font-size: 17px; } .tpl-mithai .rc-chip span { background: transparent; border: 0; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: 9.5px; } .tpl-mithai .rc-btn { border-radius: 2px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; } .tpl-mithai .rc-btn:hover { background: var(--brand); color: #ffe9b8; } .tpl-mithai .rc-btn-main { background: var(--brand); color: #ffe9b8; } .tpl-mithai .rc-tag, .tpl-mithai .tag { background: var(--accent); color: #3a1604; border: 0; border-radius: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding-right: 16px; left: 0; top: 14px; } .tpl-mithai .rc-tag-sale { background: var(--brand); color: #ffe9b8; } .tpl-mithai .cat-grid { gap: 22px; } .tpl-mithai .cat-tile { aspect-ratio: 1/1; border-radius: 50%; box-shadow: 0 0 0 5px var(--bg), 0 0 0 8px var(--gold), 0 24px 30px -24px #4c0b14; margin: 10px; } .tpl-mithai .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(76,11,20,.85)); } .tpl-mithai .cat-tile .t { justify-content: center; text-align: center; bottom: 28px; } .tpl-mithai .cat-tile h3 { font-family: 'Rozha One', Georgia, serif; font-weight: 400; font-size: 19px; color: #ffe9b8; } .tpl-mithai .cat-tile .arr { display: none; } .tpl-mithai .trust { background: var(--bg-2); border-color: var(--line); } .tpl-mithai .trust-item .ic { background: var(--brand); color: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 4px var(--gold); } .tpl-mithai .main-img { border: 3px solid var(--gold); border-radius: 4px; outline: 1px solid var(--gold); outline-offset: 4px; } .tpl-mithai .foot { background: #4c0b14; color: #f0d3c0; border-top: 6px double var(--accent); } .tpl-mithai .foot h4 { color: var(--accent); font-family: 'Rozha One', Georgia, serif; text-transform: none; letter-spacing: .02em; font-size: 18px; font-weight: 400; } .tpl-mithai .foot a { color: #f0d3c0; } @media (max-width: 860px) { .tpl-mithai .hero-in { margin-left: 8px; padding: 64px 0; } .tpl-mithai .hero::before { inset: 8px; outline: 0; } } .tpl-mithai .hero:has(.hero-stock) { background: color-mix(in srgb, var(--brand) 85%, #000); } /* ---------- Achaar: rustic pickles and preserves. Kraft paper, cream jar labels with a double red rule, taped corners, jar-lid badges ---------- */ .tpl-achaar { --bg: #ead9b8; --bg-2: #dfc99c; --line: #c8ae78; --ink: #2b1a10; --ink-2: #5c4430; --ink-3: #8f7556; --r: 6px; --r-lg: 8px; --r-sm: 3px; background-image: repeating-linear-gradient(0deg, rgba(120,84,40,.045) 0 1px, transparent 1px 4px); } .tpl-achaar h1, .tpl-achaar h2, .tpl-achaar h3, .tpl-achaar .display { font-family: 'Patua One', 'Roboto Slab', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-achaar .announce { background: var(--brand); color: #fff1d6; font-family: 'Caveat', cursive; font-size: 18px; letter-spacing: .02em; font-weight: 700; } .tpl-achaar .hdr { background: #fbf2de; border-bottom: 0; backdrop-filter: none; box-shadow: 0 3px 0 var(--brand), 0 6px 0 #fbf2de, 0 8px 0 var(--brand); margin-bottom: 14px; } .tpl-achaar .hdr .brand { font-family: 'Patua One', Georgia, serif; font-weight: 400; color: var(--brand); font-size: 1.5em; letter-spacing: .02em; text-transform: uppercase; } .tpl-achaar .hdr-search input[type=search] { background: #fff9ec !important; border: 2px solid var(--brand) !important; border-radius: 6px !important; } .tpl-achaar .nav-bar { background: transparent; border-top: 0; } .tpl-achaar .nav-bar .wrap { justify-content: center; } .tpl-achaar .nav-link { font-family: 'Patua One', Georgia, serif; font-size: 15px; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; } .tpl-achaar .nav-link:hover, .tpl-achaar .nav-link.active { color: var(--brand); } .tpl-achaar .nav-link.active::after { height: 4px; background: var(--accent); border-radius: 4px; } .tpl-achaar .hero { background: #3a2415; padding-bottom: 26px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 97% 100%, 93% calc(100% - 16px), 88% 100%, 82% calc(100% - 20px), 76% 100%, 70% calc(100% - 14px), 63% 100%, 57% calc(100% - 18px), 50% 100%, 43% calc(100% - 14px), 36% 100%, 29% calc(100% - 20px), 22% 100%, 15% calc(100% - 14px), 8% 100%, 3% calc(100% - 18px), 0 100%); } .tpl-achaar .hero-bg { opacity: 1; background-position: center 45%; } .tpl-achaar .hero::after { background: linear-gradient(90deg, rgba(58,36,21,.9), rgba(58,36,21,.35) 60%, transparent); } .tpl-achaar .hero-in { margin: 70px 0 70px 20px; padding: 40px 44px 44px; max-width: 540px; background: #fbf2de; color: var(--ink); border: 3px double var(--brand); outline: 8px solid #fbf2de; outline-offset: -14px; border-radius: 6px; transform: rotate(-1.2deg); box-shadow: 0 24px 40px -22px rgba(0,0,0,.6); } .tpl-achaar .hero h1 { color: var(--brand); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; text-transform: uppercase; } .tpl-achaar .hero p { color: var(--ink-2); opacity: 1; } .tpl-achaar .hero .eyebrow { background: transparent; color: var(--ink-2); border: 0; padding: 0; backdrop-filter: none; font-family: 'Caveat', cursive; font-size: 22px; font-weight: 700; text-transform: none; letter-spacing: 0; } .tpl-achaar .btn { border-radius: 6px; font-family: 'Patua One', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; font-weight: 400; } .tpl-achaar .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff1d6; } .tpl-achaar .btn-primary:hover { background: #7e1710; } .tpl-achaar .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff1d6; box-shadow: 0 4px 0 #7e1710; } .tpl-achaar .btn-accent:hover { background: #cf3a2f; } .tpl-achaar .hero .btn-light { background: transparent; color: var(--brand); border: 2px solid var(--brand); } .tpl-achaar .section-head { border-bottom: 3px double var(--brand); padding-bottom: 8px; } .tpl-achaar .section-head h2 { color: var(--brand); font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; } .tpl-achaar .section-head p { font-family: 'Caveat', cursive; font-size: 20px; color: var(--ink-2); } .tpl-achaar .section-head .link-arrow { color: var(--brand); font-family: 'Patua One', Georgia, serif; text-transform: uppercase; letter-spacing: .06em; } .tpl-achaar .rc-section .section-head { border-bottom: 3px double var(--brand); } .tpl-achaar .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(24px, 3vw, 36px) !important; letter-spacing: .01em; } .tpl-achaar .section-alt { background: rgba(223,201,156,.55); } .tpl-achaar .rc-card, .tpl-achaar .p-card { position: relative; background: #fbf2de; border: 3px double var(--brand); border-radius: 6px; padding: 16px 14px 16px; box-shadow: 0 16px 24px -20px rgba(60,30,10,.8); transition: .25s; } .tpl-achaar .rc-grid > .rc-card:nth-child(odd), .tpl-achaar .p-grid > .p-card:nth-child(odd) { transform: rotate(-.9deg); } .tpl-achaar .rc-grid > .rc-card:nth-child(even), .tpl-achaar .p-grid > .p-card:nth-child(even) { transform: rotate(.9deg); } .tpl-achaar .rc-card::before, .tpl-achaar .p-card::before { content: ""; position: absolute; left: 50%; top: -12px; width: 78px; height: 22px; margin-left: -39px; background: rgba(228,205,150,.85); border-left: 1px dashed rgba(120,84,40,.4); border-right: 1px dashed rgba(120,84,40,.4); transform: rotate(-3deg); z-index: 4; pointer-events: none; } .tpl-achaar .rc-card:hover, .tpl-achaar .p-card:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 26px 30px -22px rgba(60,30,10,.9); } .tpl-achaar .rc-img, .tpl-achaar .p-img { border-radius: 4px; aspect-ratio: 1/1; background: var(--bg-2); border: 2px solid #fbf2de; box-shadow: 0 0 0 1px var(--line); margin-top: 6px; } .tpl-achaar .rc-name, .tpl-achaar .p-name { font-family: 'Patua One', Georgia, serif; font-weight: 400 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: .03em !important; } .tpl-achaar .rc-price b, .tpl-achaar .price b { color: var(--brand); font-family: 'Patua One', Georgia, serif; font-weight: 400; font-size: 20px; } .tpl-achaar .rc-chip span { background: transparent; border: 1.5px dashed var(--ink-3); color: var(--ink-2); border-radius: 3px; font-family: 'Caveat', cursive; font-size: 15px; font-weight: 700; } .tpl-achaar .rc-btn { border-radius: 6px; border: 2px solid var(--brand); color: var(--brand); font-family: 'Patua One', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; font-weight: 400; } .tpl-achaar .rc-btn:hover { background: var(--brand); color: #fff1d6; } .tpl-achaar .rc-btn-main { background: var(--brand); color: #fff1d6; } .tpl-achaar .rc-tag, .tpl-achaar .tag { top: auto; bottom: 8px; left: 8px; width: 56px; height: 56px; display: grid; place-items: center; text-align: center; padding: 0; border-radius: 50%; background: var(--brand); color: #fff1d6; border: 3px dotted #fbf2de; box-shadow: 0 0 0 2px var(--brand); font-family: 'Patua One', Georgia, serif; font-size: 10px; line-height: 1.05; font-weight: 400; transform: rotate(-12deg); text-transform: uppercase; } .tpl-achaar .rc-tag-out { background: #5c4430; box-shadow: 0 0 0 2px #5c4430; } .tpl-achaar .cat-grid { gap: 22px; } .tpl-achaar .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 6px double #fbf2de; box-shadow: 0 0 0 3px var(--brand), 0 20px 28px -20px rgba(60,30,10,.9); margin: 8px; } .tpl-achaar .cat-tile::after { background: radial-gradient(circle, rgba(58,36,21,.1), rgba(58,36,21,.75)); } .tpl-achaar .cat-tile .t { inset: 0; justify-content: center; align-items: center; text-align: center; } .tpl-achaar .cat-tile h3 { font-family: 'Patua One', Georgia, serif; font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; } .tpl-achaar .cat-tile .arr { display: none; } .tpl-achaar .trust { background: #fbf2de; border-color: var(--brand); } .tpl-achaar .trust-item .ic { background: var(--brand); color: #fff1d6; border-radius: 50%; } .tpl-achaar .main-img { border: 3px double var(--brand); background: #fbf2de; padding: 8px; } .tpl-achaar .foot { background: #3a2415; color: #e8d3ad; border-top: 5px dashed var(--accent); } .tpl-achaar .foot h4 { font-family: 'Patua One', Georgia, serif; font-weight: 400; color: var(--accent); letter-spacing: .08em; } .tpl-achaar .foot a { color: #e8d3ad; } @media (max-width: 860px) { .tpl-achaar .hero-in { margin: 36px 10px; padding: 28px 24px; } .tpl-achaar .rc-grid > .rc-card, .tpl-achaar .p-grid > .p-card { transform: none !important; } } .tpl-achaar .hero:has(.hero-stock) { background: #3a2415; } /* ---------- Masala: spice market. Dense compact grid, a spice-colour band on every card, bento-style category mosaic, heavy sans ---------- */ .tpl-masala { --bg: #fff6e8; --bg-2: #fbe5c2; --line: #efd3a2; --ink: #2a120a; --ink-2: #6a3f2c; --ink-3: #a77f67; --r: 10px; --r-lg: 14px; --r-sm: 6px; } .tpl-masala h1, .tpl-masala h2, .tpl-masala h3, .tpl-masala .display { font-family: 'Rubik', 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.025em; } .tpl-masala .announce { background: var(--accent); color: #3a1403; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .tpl-masala .hdr { background: var(--brand); border-bottom: 5px solid; border-image: linear-gradient(90deg, #f2a31b 0 20%, #d6471f 20% 40%, #8a5a2b 40% 60%, #2e8b57 60% 80%, #231a15 80% 100%) 1; backdrop-filter: none; } .tpl-masala .hdr .brand, .tpl-masala .hdr .icon-link, .tpl-masala .hdr .hdr-search .i { color: #fff0d2; } .tpl-masala .hdr .brand { font-family: 'Rubik', sans-serif; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; font-size: 1.45em; } .tpl-masala .hdr-search input[type=search] { background: rgba(255,255,255,.14) !important; border-color: rgba(255,240,210,.4) !important; color: #fff0d2; } .tpl-masala .hdr-search input[type=search]::placeholder { color: rgba(255,240,210,.8); } .tpl-masala .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-masala .nav-bar .wrap { justify-content: center; gap: 2px; } .tpl-masala .nav-link { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 8px 14px; } .tpl-masala .nav-link:hover { background: var(--bg-2); } .tpl-masala .nav-link.active { background: var(--brand); color: #fff0d2; } .tpl-masala .nav-link.active::after { content: none; } .tpl-masala .hero { background: #2a120a; } .tpl-masala .hero-bg { opacity: 1; background-position: center 60%; } .tpl-masala .hero::after { background: linear-gradient(100deg, rgba(42,18,10,.92), rgba(42,18,10,.5) 55%, transparent); } .tpl-masala .hero-in { padding: 104px 0 112px; max-width: 600px; } .tpl-masala .hero h1 { color: #fff0d2; font-size: clamp(40px, 6vw, 84px); line-height: .96; text-transform: uppercase; } .tpl-masala .hero p { color: #f6dcc0; opacity: 1; } .tpl-masala .hero .eyebrow { background: var(--accent); color: #3a1403; border-radius: 6px; font-weight: 900; letter-spacing: .1em; backdrop-filter: none; transform: rotate(-2deg); } .tpl-masala .btn { border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; } .tpl-masala .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff0d2; } .tpl-masala .btn-primary:hover { background: #6f1e0d; } .tpl-masala .btn-accent { background: var(--accent); border-color: var(--accent); color: #3a1403; } .tpl-masala .btn-accent:hover { background: #ffbd3d; border-color: #ffbd3d; } .tpl-masala .hero .btn-light { background: transparent; color: #fff0d2; border: 2px solid #fff0d2; } .tpl-masala .section { padding: 56px 0; } .tpl-masala .section-head { border-bottom: 0; margin-bottom: 24px; } .tpl-masala .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; } .tpl-masala .section-head h2::after { content: ""; display: block; height: 7px; width: 170px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, #f2a31b 0 22%, #d6471f 22% 44%, #8a5a2b 44% 66%, #2e8b57 66% 88%, #231a15 88%); } .tpl-masala .section-head .link-arrow { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; } .tpl-masala .rc-section .section-head { border-bottom: 0; } .tpl-masala .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: uppercase; letter-spacing: -.025em; font-size: clamp(24px, 3vw, 36px) !important; } .tpl-masala .rc-section .section-head h2::after { display: block; } .tpl-masala .section-alt { background: var(--bg-2); } .tpl-masala .rc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .tpl-masala .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 250px); } .tpl-masala .rc-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 250px)); } .tpl-masala .rc-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 250px)); } .tpl-masala .rc-card, .tpl-masala .p-card { --spice: #f2a31b; background: #fff; border: 0; border-top: 8px solid var(--spice); border-radius: 12px; padding: 10px 10px 12px; box-shadow: 0 12px 20px -18px rgba(70,25,10,.8); transition: .2s; } .tpl-masala .rc-grid > :nth-child(5n+1), .tpl-masala .p-grid > :nth-child(5n+1) { --spice: #f2a31b; } .tpl-masala .rc-grid > :nth-child(5n+2), .tpl-masala .p-grid > :nth-child(5n+2) { --spice: #d6471f; } .tpl-masala .rc-grid > :nth-child(5n+3), .tpl-masala .p-grid > :nth-child(5n+3) { --spice: #8a5a2b; } .tpl-masala .rc-grid > :nth-child(5n+4), .tpl-masala .p-grid > :nth-child(5n+4) { --spice: #2e8b57; } .tpl-masala .rc-grid > :nth-child(5n), .tpl-masala .p-grid > :nth-child(5n) { --spice: #4a342a; } .tpl-masala .rc-card:hover, .tpl-masala .p-card:hover { transform: translateY(-4px); box-shadow: 0 20px 26px -18px var(--spice); } .tpl-masala .rc-img, .tpl-masala .p-img { border-radius: 8px; aspect-ratio: 1/1; background: color-mix(in srgb, var(--spice) 12%, #fff); } .tpl-masala .rc-name, .tpl-masala .p-name { font-family: 'Rubik', sans-serif; font-weight: 700 !important; font-size: 13px !important; line-height: 1.25; letter-spacing: -.01em !important; margin: 10px 2px 4px !important; } .tpl-masala .rc-price b, .tpl-masala .price b { color: var(--spice, var(--brand)); font-weight: 900; font-size: 17px; } .tpl-masala .rc-chip span { background: color-mix(in srgb, var(--spice) 16%, #fff); border: 0; color: var(--ink-2); font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; } .tpl-masala .rc-btn { border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; height: 32px; } .tpl-masala .rc-btn:hover { background: var(--ink); color: #fff; } .tpl-masala .rc-btn-main { background: var(--spice, var(--brand)); border-color: var(--spice, var(--brand)); color: #fff; } .tpl-masala .rc-tag, .tpl-masala .tag { background: var(--ink); color: #fff0d2; border: 0; border-radius: 999px; font-weight: 800; letter-spacing: .06em; font-size: 9.5px; box-shadow: none; text-transform: uppercase; } .tpl-masala .rc-tag-sale { background: #d6471f; } .tpl-masala .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tpl-masala .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; } .tpl-masala .cat-tile { aspect-ratio: auto; border-radius: 16px; } .tpl-masala .cat-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; } .tpl-masala .cat-tile:nth-child(4) { grid-column: span 2; } .tpl-masala .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(42,18,10,.85)); } .tpl-masala .cat-tile h3 { font-family: 'Rubik', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 20px; } .tpl-masala .cat-tile:nth-child(1) h3 { font-size: 30px; } .tpl-masala .cat-tile .arr { border-radius: 50%; background: var(--accent); color: #3a1403; } .tpl-masala .trust { background: #fff; border-color: var(--line); } .tpl-masala .trust-item .ic { background: var(--brand); color: #fff0d2; border-radius: 12px; } .tpl-masala .main-img { border-radius: 16px; border: 0; box-shadow: 0 0 0 6px #fff; } .tpl-masala .foot { background: #2a120a; border-top: 6px solid; border-image: linear-gradient(90deg, #f2a31b 0 20%, #d6471f 20% 40%, #8a5a2b 40% 60%, #2e8b57 60% 80%, #4a342a 80% 100%) 1; } .tpl-masala .foot h4 { color: var(--accent); font-family: 'Rubik', sans-serif; font-weight: 900; } @media (max-width: 1100px) { .tpl-masala .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpl-masala .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-masala .hero-in { padding: 64px 0; } .tpl-masala .cat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .tpl-masala .cat-tile:nth-child(1) { grid-column: span 2; grid-row: span 1; } .tpl-masala .cat-tile:nth-child(4) { grid-column: span 1; } } @media (max-width: 760px) { .tpl-masala .rc-grid, .tpl-masala .rc-grid[data-count="2"], .tpl-masala .rc-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-masala .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 250px); } .tpl-masala .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tpl-masala .hero:has(.hero-stock) { background: #2a120a; } /* ---------- Patisserie: bakery. Cream and icing pink with chocolate, gingham trim, cake-plate banner, sprinkle dots, script logo ---------- */ .tpl-patisserie { --bg: #fff8f1; --bg-2: #fdeae6; --line: #f3d3cf; --ink: #4a2c23; --ink-2: #7d5a4e; --ink-3: #b89a8f; --r: 20px; --r-lg: 28px; --r-sm: 10px; --gingham: repeating-conic-gradient(#f3b7c8 0 25%, #fff 0 50%) 0 0 / 20px 20px; } .tpl-patisserie h1, .tpl-patisserie h2, .tpl-patisserie h3, .tpl-patisserie .display { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; letter-spacing: -.005em; } .tpl-patisserie .announce { background: var(--gingham); color: var(--brand); font-family: 'Pacifico', cursive; font-size: 14px; letter-spacing: .02em; text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 3px #fff; font-weight: 400; } .tpl-patisserie .hdr { background: #fff; border-bottom: 0; backdrop-filter: none; } .tpl-patisserie .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: var(--gingham); pointer-events: none; } .tpl-patisserie .hdr-in { padding-bottom: 2px; } .tpl-patisserie .hdr .brand { font-family: 'Pacifico', cursive; font-weight: 400; color: var(--brand); font-size: 1.5em; letter-spacing: 0; } .tpl-patisserie .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: transparent !important; } .tpl-patisserie .nav-bar { background: transparent; border-top: 0; margin-top: 12px; } .tpl-patisserie .nav-bar .wrap { justify-content: center; gap: 6px; } .tpl-patisserie .nav-link { font-family: 'Fredoka', sans-serif; font-weight: 500; border-radius: 999px; padding: 8px 16px; color: var(--ink-2); } .tpl-patisserie .nav-link:hover { background: var(--bg-2); } .tpl-patisserie .nav-link.active { background: var(--accent); color: var(--ink); } .tpl-patisserie .nav-link.active::after { content: none; } .tpl-patisserie .hero { background: radial-gradient(circle at 8% 25%, #ffd9e4 0 6px, transparent 7px) 0 0 / 46px 46px, radial-gradient(circle at 30% 70%, #ffe9a8 0 5px, transparent 6px) 0 0 / 58px 58px, radial-gradient(circle at 60% 40%, #cdeee1 0 5px, transparent 6px) 0 0 / 66px 66px, var(--bg-2); color: var(--ink); overflow: hidden; } .tpl-patisserie .hero::after { content: none; } .tpl-patisserie .hero-bg { inset: 50% 7% auto auto; width: min(36vw, 440px); height: min(36vw, 440px); transform: translateY(-50%); opacity: 1; border-radius: 50%; border: 12px solid #fff; box-shadow: 0 0 0 4px var(--accent), 0 34px 50px -26px rgba(122,70,50,.6); background-position: center; } .tpl-patisserie .hero { min-height: 520px; display: flex; align-items: center; } .tpl-patisserie .hero-in { max-width: 520px; padding: 100px 0 108px; } .tpl-patisserie .hero h1 { color: var(--brand); font-family: 'Pacifico', cursive; font-weight: 400; font-size: clamp(40px, 5.4vw, 70px); line-height: 1.1; } .tpl-patisserie .hero p { color: var(--ink-2); opacity: 1; } .tpl-patisserie .hero .eyebrow { background: #fff; color: var(--brand); border: 2px dashed var(--accent); border-radius: 999px; backdrop-filter: none; text-transform: none; letter-spacing: 0; font-family: 'Fredoka', sans-serif; font-weight: 600; } .tpl-patisserie .btn { border-radius: 999px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; } .tpl-patisserie .btn-primary, .tpl-patisserie .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 0 #33190f; } .tpl-patisserie .btn-primary:hover, .tpl-patisserie .btn-accent:hover { background: #7a4636; transform: translateY(2px); box-shadow: 0 4px 0 #33190f; } .tpl-patisserie .btn-light { background: #fff; color: var(--brand); border: 2px solid var(--accent); } .tpl-patisserie .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 6px; } .tpl-patisserie .section-head h2 { font-family: 'Pacifico', cursive; font-weight: 400; font-size: clamp(30px, 4vw, 48px); color: var(--brand); } .tpl-patisserie .section-head h2::after { content: ""; display: block; width: 110px; height: 10px; margin: 10px auto 0; background: var(--gingham); border-radius: 6px; } .tpl-patisserie .section-head .link-arrow { color: var(--brand); font-family: 'Fredoka', sans-serif; font-weight: 600; } .tpl-patisserie .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-patisserie .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: 0; font-size: clamp(28px, 3.6vw, 42px) !important; } .tpl-patisserie .section-alt { background: var(--bg-2); } .tpl-patisserie .rc-card, .tpl-patisserie .p-card { background: #fff; border: 0; border-radius: 28px; padding: 14px 14px 18px; box-shadow: 0 18px 30px -24px rgba(122,70,50,.7); position: relative; overflow: hidden; transition: .25s; } .tpl-patisserie .rc-card::before, .tpl-patisserie .p-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--gingham); z-index: 3; pointer-events: none; } .tpl-patisserie .rc-card:hover, .tpl-patisserie .p-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 28px 36px -24px rgba(122,70,50,.8); } .tpl-patisserie .rc-media, .tpl-patisserie .p-img { margin-top: 10px; } .tpl-patisserie .rc-img, .tpl-patisserie .p-img { border-radius: 50%; aspect-ratio: 1/1; background: var(--bg-2); box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--accent); margin: 14px 12px 20px; } .tpl-patisserie .rc-name, .tpl-patisserie .p-name { font-family: 'Fredoka', sans-serif; font-weight: 600 !important; font-size: 16px !important; } .tpl-patisserie .rc-price b, .tpl-patisserie .price b { color: var(--brand); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px; } .tpl-patisserie .rc-chip span { background: var(--bg-2); border: 0; border-radius: 999px; color: var(--ink-2); font-weight: 500; } .tpl-patisserie .rc-btn { border-radius: 999px; border: 2px solid var(--brand); color: var(--brand); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 13px; } .tpl-patisserie .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-patisserie .rc-btn-main { background: var(--accent); border-color: var(--accent); color: var(--ink); } .tpl-patisserie .rc-tag, .tpl-patisserie .tag { background: var(--accent); color: var(--ink); border: 0; border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; text-align: center; padding: 0; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 10px; line-height: 1.05; box-shadow: 0 0 0 3px #fff; transform: rotate(-10deg); top: 18px; left: 14px; z-index: 4; } .tpl-patisserie .rc-tag-sale { background: #ff8aa8; } .tpl-patisserie .rc-heart { top: 22px; right: 14px; z-index: 4; } .tpl-patisserie .cat-grid { gap: 20px; } .tpl-patisserie .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 3px var(--accent), 0 22px 30px -22px rgba(122,70,50,.8); margin: 6px; } .tpl-patisserie .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(90,58,46,.7)); } .tpl-patisserie .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; } .tpl-patisserie .cat-tile h3 { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 19px; } .tpl-patisserie .cat-tile .arr { display: none; } .tpl-patisserie .trust { background: #fff; border: 0; box-shadow: 0 -10px 0 -2px var(--bg-2); } .tpl-patisserie .trust-item .ic { background: var(--accent); color: var(--ink); } .tpl-patisserie .main-img { border-radius: 40px; box-shadow: 0 0 0 8px #fff, 0 0 0 11px var(--accent); } .tpl-patisserie .foot { background: var(--brand); color: #f4dccf; border-top: 0; position: relative; padding-top: 80px; } .tpl-patisserie .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--gingham); } .tpl-patisserie .foot h4 { font-family: 'Pacifico', cursive; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); font-size: 20px; } .tpl-patisserie .foot a { color: #f4dccf; } @media (max-width: 860px) { .tpl-patisserie .hero-bg { inset: auto 5% 4% auto; width: 36vw; height: 36vw; transform: none; } .tpl-patisserie .hero-in { padding: 54px 0 140px; } .tpl-patisserie .hero { min-height: 0; } } .tpl-patisserie .hero:has(.hero-stock) { background-color: var(--bg-2); } /* ---------- Cloudkitchen: delivery-app menu. Dark charcoal, orange order buttons, two-column menu rows with the photo on the right, strip categories ---------- */ .tpl-cloudkitchen { --bg: #131314; --bg-2: #1c1c1f; --line: #2d2d33; --ink: #f6f2ec; --ink-2: #c4bfb6; --ink-3: #8a857c; --r: 14px; --r-lg: 18px; --r-sm: 8px; --brand-soft: color-mix(in srgb, var(--brand) 18%, #131314); --brand-soft-2: color-mix(in srgb, var(--brand) 30%, #131314); --brand-ink: color-mix(in srgb, var(--brand) 78%, #fff); color-scheme: dark; } .tpl-cloudkitchen h1, .tpl-cloudkitchen h2, .tpl-cloudkitchen h3, .tpl-cloudkitchen .display { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.03em; } .tpl-cloudkitchen .announce { background: var(--brand); color: #1a0a02; font-weight: 700; letter-spacing: .03em; font-size: 12.5px; } .tpl-cloudkitchen .hdr { background: rgba(19,19,20,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); } .tpl-cloudkitchen .hdr .brand { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.04em; color: var(--ink); } .tpl-cloudkitchen .hdr .brand::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); } .tpl-cloudkitchen .hdr .icon-link, .tpl-cloudkitchen .hdr .hdr-search .i { color: var(--ink); } .tpl-cloudkitchen .hdr-search input[type=search] { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; color: var(--ink); } .tpl-cloudkitchen .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-cloudkitchen .nav-link { color: var(--ink-2); font-weight: 600; font-size: 13.5px; border-radius: 999px; padding: 7px 16px; border: 1px solid var(--line); margin: 8px 3px; } .tpl-cloudkitchen .nav-link:hover { border-color: var(--brand); color: var(--ink); } .tpl-cloudkitchen .nav-link.active { background: var(--brand); border-color: var(--brand); color: #1a0a02; } .tpl-cloudkitchen .nav-link.active::after { content: none; } .tpl-cloudkitchen .hero { background: #000; min-height: 540px; display: flex; align-items: center; } .tpl-cloudkitchen .hero-bg { opacity: 1; background-position: center 55%; } .tpl-cloudkitchen .hero::after { background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.5) 50%, transparent); } .tpl-cloudkitchen .hero-in { max-width: 540px; padding: 90px 0; } .tpl-cloudkitchen .hero h1 { color: #fff; font-size: clamp(40px, 6vw, 80px); line-height: .98; } .tpl-cloudkitchen .hero p { color: var(--ink-2); opacity: 1; } .tpl-cloudkitchen .hero .eyebrow { background: rgba(255,106,43,.18); color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; backdrop-filter: none; font-weight: 700; } .tpl-cloudkitchen .btn { border-radius: 14px; font-weight: 700; border-color: #3a3a42; color: var(--ink); } .tpl-cloudkitchen .btn:hover { background: var(--ink); color: #131314; border-color: var(--ink); } .tpl-cloudkitchen .btn-primary, .tpl-cloudkitchen .btn-accent { background: var(--brand); border-color: var(--brand); color: #1a0a02; box-shadow: 0 14px 28px -14px var(--brand); } .tpl-cloudkitchen .btn-primary:hover, .tpl-cloudkitchen .btn-accent:hover { background: #ff8450; border-color: #ff8450; color: #1a0a02; } .tpl-cloudkitchen .btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .tpl-cloudkitchen input[type=text], .tpl-cloudkitchen input[type=email], .tpl-cloudkitchen input[type=tel], .tpl-cloudkitchen input[type=password], .tpl-cloudkitchen input[type=number], .tpl-cloudkitchen input[type=search], .tpl-cloudkitchen select, .tpl-cloudkitchen textarea { background-color: var(--bg-2); color: var(--ink); border-color: #3a3a42; } .tpl-cloudkitchen .section { padding: 56px 0; } .tpl-cloudkitchen .section-head { border-bottom: 0; margin-bottom: 22px; } .tpl-cloudkitchen .section-head h2 { font-size: clamp(24px, 3.2vw, 36px); } .tpl-cloudkitchen .section-head h2::before { content: ""; display: inline-block; width: 8px; height: .8em; margin-right: 12px; border-radius: 4px; background: var(--brand); vertical-align: -.05em; } .tpl-cloudkitchen .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-cloudkitchen .rc-section .section-head { border-bottom: 0; } .tpl-cloudkitchen .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.03em; font-size: clamp(24px, 3vw, 34px) !important; } .tpl-cloudkitchen .rc-section .section-head h2::before { content: "" !important; display: inline-block; } .tpl-cloudkitchen .section-alt { background: var(--bg-2); } .tpl-cloudkitchen .rc-grid, .tpl-cloudkitchen .rc-grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tpl-cloudkitchen .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 560px); } .tpl-cloudkitchen .rc-card, .tpl-cloudkitchen .p-card { display: grid; grid-template-columns: 1fr 38%; grid-template-areas: "name media" "chip media" "price media" "act act"; column-gap: 16px; align-items: start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; transition: .2s; } .tpl-cloudkitchen .section-alt .rc-card { background: #131314; } .tpl-cloudkitchen .rc-card:hover, .tpl-cloudkitchen .p-card:hover { border-color: var(--brand); box-shadow: 0 20px 30px -24px var(--brand); } .tpl-cloudkitchen .rc-media { grid-area: media; grid-row: 1 / 4; margin: 0; } .tpl-cloudkitchen .rc-name { grid-area: name; margin: 0 0 6px !important; text-align: left; } .tpl-cloudkitchen .rc-chip { grid-area: chip; text-align: left; margin: 0 0 10px; } .tpl-cloudkitchen .rc-price { grid-area: price; justify-content: flex-start; margin: 0 0 12px; align-self: end; } .tpl-cloudkitchen .rc-actions { grid-area: act; margin-top: 4px; } .tpl-cloudkitchen .rc-img, .tpl-cloudkitchen .p-img { border-radius: 14px; aspect-ratio: 1/1; background: #0b0b0c; } .tpl-cloudkitchen .rc-name, .tpl-cloudkitchen .p-name { font-family: 'Poppins', sans-serif; font-weight: 700 !important; font-size: 17px !important; letter-spacing: -.02em !important; } .tpl-cloudkitchen .rc-price b, .tpl-cloudkitchen .price b { color: var(--ink); font-weight: 800; font-size: 18px; } .tpl-cloudkitchen .rc-chip span { background: transparent; border: 1px solid var(--line); color: var(--ink-3); font-weight: 600; border-radius: 999px; } .tpl-cloudkitchen .rc-btn { border-radius: 12px; border: 1.5px solid #3a3a42; color: var(--ink); font-weight: 700; } .tpl-cloudkitchen .rc-btn:hover { background: var(--ink); color: #131314; } .tpl-cloudkitchen .rc-btn-main { background: var(--brand); border-color: var(--brand); color: #1a0a02; } .tpl-cloudkitchen .rc-tag, .tpl-cloudkitchen .tag { background: var(--brand); color: #1a0a02; border: 0; border-radius: 8px; font-weight: 800; box-shadow: none; } .tpl-cloudkitchen .rc-tag-out { background: #3a3a42; color: var(--ink-2); } .tpl-cloudkitchen .rc-heart button { background: rgba(0,0,0,.6); color: #fff; box-shadow: none; } .tpl-cloudkitchen .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tpl-cloudkitchen .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tpl-cloudkitchen .cat-tile { aspect-ratio: 3.4/1; border-radius: 18px; border: 1px solid var(--line); } .tpl-cloudkitchen .cat-tile::after { background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.2)); } .tpl-cloudkitchen .cat-tile .t { top: 0; bottom: 0; left: 22px; align-items: center; } .tpl-cloudkitchen .cat-tile h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; } .tpl-cloudkitchen .cat-tile .arr { background: var(--brand); color: #1a0a02; border-radius: 12px; } .tpl-cloudkitchen .trust { background: var(--bg); border-color: var(--line); } .tpl-cloudkitchen .trust-item { border-color: var(--line); background: transparent; } .tpl-cloudkitchen .trust-item .ic { background: rgba(255,106,43,.16); color: var(--brand); border-radius: 12px; } .tpl-cloudkitchen .main-img { border-radius: 20px; border: 1px solid var(--line); background: #0b0b0c; } .tpl-cloudkitchen .assure, .tpl-cloudkitchen .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-cloudkitchen .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--brand); } .tpl-cloudkitchen .toast, .tpl-cloudkitchen .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-cloudkitchen .foot { background: #0b0b0c; border-top: 1px solid var(--line); } .tpl-cloudkitchen .foot h4 { color: var(--brand); font-family: 'Poppins', sans-serif; } @media (max-width: 860px) { .tpl-cloudkitchen .hero { min-height: 420px; } .tpl-cloudkitchen .hero-in { padding: 56px 0; } .tpl-cloudkitchen .cat-tile { aspect-ratio: 2.6/1; } } @media (max-width: 760px) { .tpl-cloudkitchen .rc-grid, .tpl-cloudkitchen .rc-grid[data-count], .tpl-cloudkitchen .p-grid { grid-template-columns: 1fr; } .tpl-cloudkitchen .rc-grid[data-count="1"] { grid-template-columns: 1fr; } .tpl-cloudkitchen .cat-grid { grid-template-columns: 1fr; } .tpl-cloudkitchen .cat-tile { aspect-ratio: 3/1; } } .tpl-cloudkitchen .hero:has(.hero-stock) { background: #000; } @media (max-width: 560px) { .tpl-mithai .rc-actions, .tpl-masala .rc-actions { grid-template-columns: 1fr; } .tpl-mithai .rc-btn, .tpl-achaar .rc-btn, .tpl-masala .rc-btn, .tpl-patisserie .rc-btn { letter-spacing: .02em; padding: 0 4px; } .tpl-achaar .rc-actions { grid-template-columns: 1fr; } } /* ===================================================================================================================================== Home Decor and Furnishings (batch 5): Nordic (white oak), Jaali (Indian lattice and brass), Concrete (raw industrial), Azulejo (Mediterranean tiles), Verdant (moody green) ===================================================================================================================================== */ /* ---------- Nordic: Scandinavian white oak. Warm greys, soft rounded corners, labels set under the picture, three-up room-style grid ---------- */ .tpl-nordic { --bg: #faf8f4; --bg-2: #f0ebe3; --line: #e5ded2; --ink: #34322e; --ink-2: #6a655c; --ink-3: #a29b8e; --r: 6px; --r-lg: 10px; --r-sm: 4px; } .tpl-nordic h1, .tpl-nordic h2, .tpl-nordic h3, .tpl-nordic .display { font-family: 'Figtree', 'Inter', sans-serif; font-weight: 600; letter-spacing: -.025em; } .tpl-nordic .announce { background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; letter-spacing: .02em; border-bottom: 1px solid var(--line); } .tpl-nordic .hdr { background: rgba(250,248,244,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); } .tpl-nordic .hdr .brand { font-family: 'Figtree', sans-serif; font-weight: 700; letter-spacing: -.04em; color: var(--ink); } .tpl-nordic .hdr-search input[type=search] { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 6px !important; } .tpl-nordic .nav-bar { background: transparent; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-nordic .nav-bar .wrap { justify-content: center; gap: 12px; } .tpl-nordic .nav-link { font-weight: 500; font-size: 14px; color: var(--ink-2); } .tpl-nordic .nav-link:hover, .tpl-nordic .nav-link.active { color: var(--ink); } .tpl-nordic .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-nordic .hero { background: var(--bg-2); color: var(--ink); overflow: hidden; } .tpl-nordic .hero::after { content: none; } .tpl-nordic .hero-bg { left: 40%; opacity: 1; background-position: center 55%; } .tpl-nordic .hero-in { max-width: 480px; padding: 118px 0 126px; } .tpl-nordic .hero h1 { color: var(--ink); font-size: clamp(36px, 4.8vw, 62px); line-height: 1.04; font-weight: 600; } .tpl-nordic .hero p { color: var(--ink-2); opacity: 1; } .tpl-nordic .hero .eyebrow { background: transparent; color: var(--ink-2); border: 0; padding: 0; backdrop-filter: none; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 600; } .tpl-nordic .hero .eyebrow .i { display: none; } .tpl-nordic .btn { border-radius: 6px; font-weight: 600; } .tpl-nordic .btn-primary, .tpl-nordic .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-nordic .btn-primary:hover, .tpl-nordic .btn-accent:hover { background: var(--accent); border-color: var(--accent); color: #2a241c; } .tpl-nordic .btn-light { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .tpl-nordic .section { padding: 84px 0; } .tpl-nordic .section-head h2 { font-size: clamp(26px, 3.2vw, 38px); } .tpl-nordic .section-head h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 12px; background: var(--accent); border-radius: 3px; } .tpl-nordic .section-head .link-arrow { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); } .tpl-nordic .rc-section .section-head { border-bottom: 0; } .tpl-nordic .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.025em; font-size: clamp(24px, 3vw, 34px) !important; } .tpl-nordic .rc-section .section-head h2::after { display: block; } .tpl-nordic .section-alt { background: var(--bg-2); } .tpl-nordic .rc-grid, .tpl-nordic .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } .tpl-nordic .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 340px); } .tpl-nordic .rc-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); } .tpl-nordic .rc-card, .tpl-nordic .p-card { background: transparent; border: 0; padding: 0; } .tpl-nordic .rc-card:hover { box-shadow: none; } .tpl-nordic .rc-img, .tpl-nordic .p-img { aspect-ratio: 4/3; border-radius: 8px; background: var(--bg-2); } .tpl-nordic .rc-name, .tpl-nordic .p-name { font-family: 'Figtree', sans-serif; font-weight: 600 !important; font-size: 15.5px !important; text-align: left; letter-spacing: -.01em !important; } .tpl-nordic .rc-chip { text-align: left; } .tpl-nordic .rc-chip span { background: transparent; border: 0; padding: 0; color: var(--ink-3); font-size: 12px; font-weight: 500; } .tpl-nordic .rc-price { justify-content: flex-start; } .tpl-nordic .rc-price b, .tpl-nordic .price b { color: var(--ink); font-weight: 600; font-size: 16px; } .tpl-nordic .rc-actions { grid-template-columns: auto auto; justify-content: start; gap: 18px; } .tpl-nordic .rc-btn { height: auto; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; background: transparent; color: var(--ink); padding: 4px 0; font-weight: 600; font-size: 13px; } .tpl-nordic .rc-btn:hover, .tpl-nordic .rc-btn-main { background: transparent; color: var(--ink); } .tpl-nordic .rc-btn:hover { border-bottom-color: var(--ink); } .tpl-nordic .rc-tag, .tpl-nordic .tag { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font-weight: 600; box-shadow: none; } .tpl-nordic .rc-tag-sale { background: var(--accent); border-color: var(--accent); color: #2a241c; } .tpl-nordic .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .tpl-nordic .cat-tile { aspect-ratio: 3/2; border-radius: 8px; } .tpl-nordic .cat-tile::after { background: linear-gradient(180deg, transparent 60%, rgba(52,50,46,.5)); } .tpl-nordic .cat-tile .t { left: 22px; bottom: 18px; } .tpl-nordic .cat-tile h3 { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.02em; } .tpl-nordic .cat-tile .arr { border-radius: 6px; background: #fff; color: var(--ink); } .tpl-nordic .trust { background: transparent; border-color: var(--line); } .tpl-nordic .trust-item .ic { background: var(--bg-2); color: var(--ink); border-radius: 8px; } .tpl-nordic .main-img { border-radius: 10px; border: 0; background: var(--bg-2); } .tpl-nordic .foot { background: var(--bg-2); color: var(--ink-2); border-top: 1px solid var(--line); } .tpl-nordic .foot h4 { color: var(--ink); font-family: 'Figtree', sans-serif; text-transform: none; letter-spacing: -.01em; font-size: 16px; } .tpl-nordic .foot a { color: var(--ink-2); } .tpl-nordic .foot-bottom { border-top-color: var(--line); color: var(--ink-3); } @media (max-width: 1100px) { .tpl-nordic .rc-grid, .tpl-nordic .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-nordic .hero-bg { left: 0; opacity: .3; } .tpl-nordic .hero-in { padding: 64px 0; } .tpl-nordic .section { padding: 56px 0; } .tpl-nordic .cat-grid { grid-template-columns: 1fr; } } .tpl-nordic .hero:has(.hero-stock) { background: var(--bg-2); } /* ---------- Jaali: Indian lattice and brass. Deep teal on sand, diamond-lattice panels, cusped-arch photos, brass trims ---------- */ .tpl-jaali { --bg: #f7f0e1; --bg-2: #eee1c6; --line: #dcc79a; --ink: #1d2a28; --ink-2: #4a5a56; --ink-3: #86948f; --r: 6px; --r-lg: 10px; --r-sm: 3px; --lattice: linear-gradient(45deg, rgba(184,137,58,.22) 25%, transparent 25%, transparent 75%, rgba(184,137,58,.22) 75%), linear-gradient(45deg, rgba(184,137,58,.22) 25%, transparent 25%, transparent 75%, rgba(184,137,58,.22) 75%); --arch: polygon(0 100%, 0 26%, 5% 17%, 14% 10%, 27% 4%, 40% 1%, 50% 0, 60% 1%, 73% 4%, 86% 10%, 95% 17%, 100% 26%, 100% 100%); } .tpl-jaali h1, .tpl-jaali h2, .tpl-jaali h3, .tpl-jaali .display { font-family: 'Spectral', 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -.005em; } .tpl-jaali .announce { background: #0a3533; color: #e6c581; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; } .tpl-jaali .hdr { background: var(--brand); border-bottom: 3px solid var(--accent); backdrop-filter: none; } .tpl-jaali .hdr .brand, .tpl-jaali .hdr .icon-link, .tpl-jaali .hdr .hdr-search .i { color: #f4e6c6; } .tpl-jaali .hdr .brand { font-family: 'Spectral', Georgia, serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .tpl-jaali .hdr-search input[type=search] { background: rgba(255,255,255,.1) !important; border-color: rgba(230,197,129,.45) !important; color: #f4e6c6; border-radius: 4px !important; } .tpl-jaali .hdr-search input[type=search]::placeholder { color: rgba(244,230,198,.75); } .tpl-jaali .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-jaali .nav-bar .wrap { justify-content: center; } .tpl-jaali .nav-link { font-weight: 600; letter-spacing: .04em; color: var(--ink-2); font-size: 14px; } .tpl-jaali .nav-link:hover, .tpl-jaali .nav-link.active { color: var(--brand); } .tpl-jaali .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-jaali .hero { background-color: var(--brand); background-image: var(--lattice); background-size: 28px 28px; background-position: 0 0, 14px 14px; } .tpl-jaali .hero-bg { left: 46%; opacity: 1; box-shadow: -12px 0 0 var(--accent); } .tpl-jaali .hero::after { content: none; } .tpl-jaali .hero-in { max-width: 520px; padding: 112px 0 120px; } .tpl-jaali .hero h1 { color: #f6e9cc; font-size: clamp(36px, 5vw, 62px); line-height: 1.06; font-style: italic; } .tpl-jaali .hero p { color: #d5e3df; opacity: 1; } .tpl-jaali .hero .eyebrow { background: var(--accent); color: #1f1405; border-radius: 0; font-weight: 800; letter-spacing: .16em; backdrop-filter: none; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding: 8px 24px; } .tpl-jaali .btn { border-radius: 3px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; } .tpl-jaali .btn-primary { background: var(--brand); border-color: var(--brand); color: #f4e6c6; } .tpl-jaali .btn-primary:hover { background: #0a3533; } .tpl-jaali .btn-accent { background: var(--accent); border-color: var(--accent); color: #1f1405; } .tpl-jaali .btn-accent:hover { background: #d3a54f; border-color: #d3a54f; } .tpl-jaali .hero .btn-light { background: transparent; color: #f4e6c6; border: 2px solid var(--accent); } .tpl-jaali .section-head h2 { color: var(--brand); font-size: clamp(28px, 3.6vw, 42px); } .tpl-jaali .section-head h2::after { content: ""; display: block; width: 120px; height: 12px; margin-top: 10px; background-image: var(--lattice); background-size: 12px 12px; background-position: 0 0, 6px 6px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .tpl-jaali .section-head .link-arrow { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .tpl-jaali .rc-section .section-head { border-bottom: 0; } .tpl-jaali .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.005em; font-size: clamp(26px, 3.2vw, 38px) !important; } .tpl-jaali .rc-section .section-head h2::after { display: block; } .tpl-jaali .section-alt { background: var(--bg-2); } .tpl-jaali .rc-card, .tpl-jaali .p-card { background: #fffaf0; border: 1px solid var(--line); border-bottom: 4px solid var(--accent); border-radius: 4px; padding: 14px 14px 16px; transition: .25s; } .tpl-jaali .rc-card:hover, .tpl-jaali .p-card:hover { border-color: var(--accent); box-shadow: 0 20px 30px -24px var(--brand); transform: translateY(-4px); } .tpl-jaali .rc-img, .tpl-jaali .p-img { clip-path: var(--arch); border-radius: 0; aspect-ratio: 4/5; background: var(--bg-2); } .tpl-jaali .rc-name, .tpl-jaali .p-name { font-family: 'Spectral', Georgia, serif; font-weight: 600 !important; font-size: 16.5px !important; } .tpl-jaali .rc-price b, .tpl-jaali .price b { color: var(--brand); font-family: 'Spectral', Georgia, serif; font-weight: 700; font-size: 18px; } .tpl-jaali .rc-chip span { background: transparent; border: 1px solid var(--accent); color: #7a5a1c; border-radius: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px; font-weight: 700; } .tpl-jaali .rc-btn { border-radius: 3px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; } .tpl-jaali .rc-btn:hover { background: var(--brand); color: #f4e6c6; } .tpl-jaali .rc-btn-main { background: var(--brand); color: #f4e6c6; } .tpl-jaali .rc-tag, .tpl-jaali .tag { background: var(--accent); color: #1f1405; border: 0; border-radius: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding: 4px 14px; top: 22px; left: 18px; } .tpl-jaali .rc-tag-sale { background: var(--brand); color: #f4e6c6; } .tpl-jaali .cat-grid { gap: 22px; } .tpl-jaali .cat-tile { aspect-ratio: 4/5; border-radius: 0; clip-path: var(--arch); background: var(--brand); } .tpl-jaali .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(10,53,51,.9)); } .tpl-jaali .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; } .tpl-jaali .cat-tile h3 { font-family: 'Spectral', Georgia, serif; font-style: italic; font-size: 22px; color: #f6e9cc; } .tpl-jaali .cat-tile .arr { display: none; } .tpl-jaali .trust { background: var(--bg-2); border-color: var(--line); } .tpl-jaali .trust-item .ic { background: var(--brand); color: #e6c581; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .tpl-jaali .main-img { border: 2px solid var(--accent); border-radius: 0; clip-path: var(--arch); } .tpl-jaali .foot { background-color: #0a3533; background-image: var(--lattice); background-size: 28px 28px; background-position: 0 0, 14px 14px; color: #c6d8d3; border-top: 5px solid var(--accent); } .tpl-jaali .foot h4 { color: var(--accent); font-family: 'Spectral', Georgia, serif; text-transform: none; letter-spacing: .02em; font-size: 18px; } .tpl-jaali .foot a { color: #c6d8d3; } @media (max-width: 860px) { .tpl-jaali .hero-bg { left: 0; opacity: .3; box-shadow: none; } .tpl-jaali .hero-in { padding: 64px 0; } } .tpl-jaali .hero:has(.hero-stock) { background-color: var(--brand); } /* ---------- Concrete: raw industrial and brutalist. Grey blocks, heavy rules, monospace numbering, spec-sheet cards that invert on hover ---------- */ .tpl-concrete { --bg: #e8e8e5; --bg-2: #d9d9d5; --line: #1b1b1c; --ink: #171717; --ink-2: #484848; --ink-3: #7d7d7a; --r: 0px; --r-lg: 0px; --r-sm: 0px; --mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace; } .tpl-concrete h1, .tpl-concrete h2, .tpl-concrete h3, .tpl-concrete .display { font-family: 'Archivo', 'Inter', sans-serif; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; } .tpl-concrete .announce { background: #171717; color: var(--accent); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; } .tpl-concrete .hdr { background: var(--bg); border-bottom: 4px solid #171717; backdrop-filter: none; } .tpl-concrete .hdr .brand { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; color: #171717; font-size: 1.6em; } .tpl-concrete .hdr-search input[type=search] { background: #f4f4f1 !important; border: 2px solid #171717 !important; border-radius: 0 !important; font-family: var(--mono); font-size: 13px; } .tpl-concrete .nav-bar { background: #171717; border-top: 0; } .tpl-concrete .nav-bar .wrap { justify-content: flex-start; counter-reset: cn; } .tpl-concrete .nav-link { color: #e8e8e5; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; counter-increment: cn; padding: 12px 16px; } .tpl-concrete .nav-link::before { content: counter(cn, decimal-leading-zero) " "; color: var(--accent); margin-right: 6px; } .tpl-concrete .nav-link:hover, .tpl-concrete .nav-link.active { background: var(--accent); color: #171717; } .tpl-concrete .nav-link:hover::before, .tpl-concrete .nav-link.active::before { color: #171717; } .tpl-concrete .nav-link.active::after { content: none; } .tpl-concrete .hero { background: #2a2a2b; } .tpl-concrete .hero-bg { opacity: 1; filter: grayscale(.85) contrast(1.05); background-position: center 60%; } .tpl-concrete .hero::after { background: linear-gradient(90deg, rgba(23,23,23,.9), rgba(23,23,23,.3) 60%, transparent); } .tpl-concrete .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--accent) 0 40px, #171717 40px 80px); z-index: 3; } .tpl-concrete .hero-in { padding: 100px 0 112px; max-width: 700px; } .tpl-concrete .hero h1 { color: #fff; font-size: clamp(48px, 8vw, 118px); line-height: .88; } .tpl-concrete .hero p { color: #e0e0dc; opacity: 1; font-family: var(--mono); font-size: 15px; } .tpl-concrete .hero .eyebrow { background: var(--accent); color: #171717; border-radius: 0; font-family: var(--mono); font-weight: 700; letter-spacing: .08em; backdrop-filter: none; } .tpl-concrete .btn { border-radius: 0; border: 3px solid #171717; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; box-shadow: 5px 5px 0 #171717; } .tpl-concrete .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #171717; } .tpl-concrete .btn-primary { background: #171717; color: #fff; } .tpl-concrete .btn-accent { background: var(--accent); color: #171717; } .tpl-concrete .hero .btn-light, .tpl-concrete .btn-light { background: #fff; color: #171717; border-color: #171717; } .tpl-concrete .hero .btn { box-shadow: 5px 5px 0 #fff; border-color: #fff; } .tpl-concrete .hero .btn-accent { border-color: #171717; box-shadow: 5px 5px 0 #171717; } .tpl-concrete .section { padding: 64px 0; } .tpl-concrete .section-head { border-bottom: 4px solid #171717; padding-bottom: 10px; } .tpl-concrete .section-head h2 { font-size: clamp(34px, 5vw, 64px); line-height: .9; } .tpl-concrete .section-head h2::before { content: "/"; color: var(--accent); margin-right: 8px; } .tpl-concrete .section-head .link-arrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #171717; font-size: 12px; font-weight: 700; border-bottom: 3px solid var(--accent); } .tpl-concrete .rc-section .section-head { border-bottom: 4px solid #171717; } .tpl-concrete .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(30px, 4vw, 52px) !important; letter-spacing: -.04em; } .tpl-concrete .rc-section .section-head h2::before { content: "/" !important; } .tpl-concrete .section-alt { background: var(--bg-2); } .tpl-concrete .rc-grid, .tpl-concrete .p-grid { counter-reset: pc; gap: 0; border-top: 3px solid #171717; border-left: 3px solid #171717; } .tpl-concrete .rc-card, .tpl-concrete .p-card { counter-increment: pc; position: relative; background: transparent; border: 0; border-right: 3px solid #171717; border-bottom: 3px solid #171717; padding: 0 0 14px; transition: background .12s, color .12s; } .tpl-concrete .rc-card::before, .tpl-concrete .p-card::before { content: counter(pc, decimal-leading-zero); position: absolute; right: 0; top: 0; background: #171717; color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 4px 10px; z-index: 4; } .tpl-concrete .rc-card:hover, .tpl-concrete .p-card:hover { background: #171717; color: #fff; box-shadow: none; } .tpl-concrete .rc-card:hover .rc-name, .tpl-concrete .p-card:hover .p-name, .tpl-concrete .rc-card:hover .rc-price b, .tpl-concrete .p-card:hover .price b { color: #fff; } .tpl-concrete .rc-media { margin: 0; } .tpl-concrete .rc-img, .tpl-concrete .p-img { aspect-ratio: 1/1; border-radius: 0; background: #cfcfcb; border-bottom: 3px solid #171717; filter: grayscale(.25); margin: 0; } .tpl-concrete .rc-name, .tpl-concrete .p-name, .tpl-concrete .rc-chip, .tpl-concrete .rc-price, .tpl-concrete .rc-actions, .tpl-concrete .p-cat, .tpl-concrete .p-card .price { margin-left: 14px; margin-right: 14px; } .tpl-concrete .rc-name, .tpl-concrete .p-name { font-family: 'Archivo', sans-serif; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -.02em !important; font-size: 17px !important; text-align: left; margin-top: 12px !important; } .tpl-concrete .rc-chip { text-align: left; } .tpl-concrete .rc-chip span { background: transparent; border: 0; padding: 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .tpl-concrete .rc-price { justify-content: flex-start; } .tpl-concrete .rc-price b, .tpl-concrete .price b { color: #171717; font-family: var(--mono); font-weight: 700; font-size: 17px; } .tpl-concrete .rc-btn { border-radius: 0; border: 2px solid #171717; color: #171717; font-family: var(--mono); text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .04em; background: transparent; } .tpl-concrete .rc-card:hover .rc-btn { border-color: #fff; color: #fff; } .tpl-concrete .rc-card .rc-btn:hover { background: var(--accent); color: #171717; border-color: var(--accent); } .tpl-concrete .rc-btn-main { background: var(--accent); border-color: #171717; color: #171717; } .tpl-concrete .rc-card:hover .rc-btn-main { color: #171717; } .tpl-concrete .rc-tag, .tpl-concrete .tag { background: var(--accent); color: #171717; border: 0; border-radius: 0; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; box-shadow: none; left: 0; top: 0; padding: 4px 10px; } .tpl-concrete .rc-heart { top: 36px; } .tpl-concrete .cat-grid { gap: 0; border: 3px solid #171717; } .tpl-concrete .cat-tile { aspect-ratio: 1/1; border-radius: 0; border-right: 3px solid #171717; filter: grayscale(.6); } .tpl-concrete .cat-tile:last-child { border-right: 0; } .tpl-concrete .cat-tile:hover { filter: none; } .tpl-concrete .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(23,23,23,.9)); } .tpl-concrete .cat-tile h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: -.03em; } .tpl-concrete .cat-tile .arr { border-radius: 0; background: var(--accent); color: #171717; } .tpl-concrete .trust { background: #171717; border: 0; } .tpl-concrete .trust-item { border-color: #3a3a3c; color: #fff; } .tpl-concrete .trust-item span { color: #aaa; font-family: var(--mono); font-size: 12px; } .tpl-concrete .trust-item .ic { background: var(--accent); color: #171717; border-radius: 0; } .tpl-concrete .main-img { border: 4px solid #171717; border-radius: 0; background: #cfcfcb; } .tpl-concrete .pd-info h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: .92; } .tpl-concrete .foot { background: #171717; border-top: 10px solid var(--accent); } .tpl-concrete .foot h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } @media (max-width: 860px) { .tpl-concrete .hero-in { padding: 60px 0 72px; } .tpl-concrete .nav-link::before { content: none; } .tpl-concrete .cat-tile { border-bottom: 3px solid #171717; } } .tpl-concrete .hero:has(.hero-stock) { background: #2a2a2b; } /* ---------- Azulejo: Mediterranean tiles. Cobalt and white, a tile-dot border, framed tile corners, serif headings, whitewashed calm ---------- */ .tpl-azulejo { --bg: #fdfcf8; --bg-2: #eef3fb; --line: #cfdcf2; --ink: #14234a; --ink-2: #435380; --ink-3: #8795b8; --r: 4px; --r-lg: 6px; --r-sm: 2px; --tile: radial-gradient(circle at 8px 8px, var(--brand) 3px, transparent 3.5px), radial-gradient(circle at 0 0, var(--brand) 4px, transparent 4.5px), radial-gradient(circle at 16px 0, var(--brand) 4px, transparent 4.5px), radial-gradient(circle at 0 16px, var(--brand) 4px, transparent 4.5px), radial-gradient(circle at 16px 16px, var(--brand) 4px, transparent 4.5px); } .tpl-azulejo h1, .tpl-azulejo h2, .tpl-azulejo h3, .tpl-azulejo .display { font-family: 'Libre Baskerville', 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -.01em; } .tpl-azulejo .announce { background: var(--brand); color: #fff; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; font-weight: 600; } .tpl-azulejo .hdr { background: #fff; border-bottom: 0; backdrop-filter: none; margin-bottom: 18px; } .tpl-azulejo .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background-image: var(--tile); background-size: 16px 16px; background-position: 0 1px; pointer-events: none; border-top: 2px solid var(--brand); } .tpl-azulejo .hdr .brand { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; color: var(--brand); letter-spacing: .02em; } .tpl-azulejo .hdr-search input[type=search] { background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; } .tpl-azulejo .nav-bar { background: transparent; border-top: 0; margin-top: 18px; } .tpl-azulejo .nav-bar .wrap { justify-content: center; } .tpl-azulejo .nav-link { font-family: 'Libre Baskerville', Georgia, serif; font-size: 14px; color: var(--ink-2); font-style: italic; } .tpl-azulejo .nav-link:hover, .tpl-azulejo .nav-link.active { color: var(--brand); } .tpl-azulejo .nav-link.active::after { height: 2px; background: var(--brand); } .tpl-azulejo .hero { background: #fff; color: var(--ink); } .tpl-azulejo .hero-bg { opacity: 1; background-position: center; } .tpl-azulejo .hero::after { content: none; } .tpl-azulejo .hero-in { margin: 70px 0 70px 40px; padding: 44px 48px 48px; max-width: 520px; background: #fff; border: 3px solid var(--brand); outline: 1px solid var(--brand); outline-offset: 5px; box-shadow: 0 30px 40px -28px rgba(20,35,74,.6); } .tpl-azulejo .hero h1 { color: var(--brand); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; } .tpl-azulejo .hero p { color: var(--ink-2); opacity: 1; } .tpl-azulejo .hero .eyebrow { background: transparent; color: var(--brand); border: 0; padding: 0; backdrop-filter: none; letter-spacing: .24em; font-size: 11px; font-weight: 700; } .tpl-azulejo .hero .eyebrow .i { display: none; } .tpl-azulejo .btn { border-radius: 2px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .tpl-azulejo .btn-primary, .tpl-azulejo .btn-accent { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-azulejo .btn-primary:hover, .tpl-azulejo .btn-accent:hover { background: #14234a; border-color: #14234a; } .tpl-azulejo .btn-light { background: #fff; color: var(--brand); border: 2px solid var(--brand); } .tpl-azulejo .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; } .tpl-azulejo .section-head h2 { color: var(--brand); font-size: clamp(26px, 3.4vw, 40px); } .tpl-azulejo .section-head h2::after { content: ""; display: block; width: 90px; height: 16px; margin: 12px auto 0; background-image: var(--tile); background-size: 16px 16px; } .tpl-azulejo .section-head .link-arrow { color: var(--brand); font-style: italic; font-family: 'Libre Baskerville', Georgia, serif; } .tpl-azulejo .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-azulejo .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.01em; font-size: clamp(24px, 3vw, 36px) !important; } .tpl-azulejo .rc-section .section-head h2::after { display: block; } .tpl-azulejo .section-alt { background: var(--bg-2); } .tpl-azulejo .rc-card, .tpl-azulejo .p-card { position: relative; background: #fff; border: 2px solid var(--brand); border-radius: 2px; padding: 14px 14px 16px; transition: .25s; } .tpl-azulejo .rc-card::before, .tpl-azulejo .p-card::before, .tpl-azulejo .rc-card::after, .tpl-azulejo .p-card::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 3; background: radial-gradient(circle at 0 0, transparent 8px, var(--brand) 8.5px 10px, transparent 10.5px) ; } .tpl-azulejo .rc-card::before, .tpl-azulejo .p-card::before { right: 0; top: 0; transform: rotate(90deg); } .tpl-azulejo .rc-card::after, .tpl-azulejo .p-card::after { left: 0; bottom: 0; transform: rotate(270deg); } .tpl-azulejo .rc-card:hover, .tpl-azulejo .p-card:hover { box-shadow: 8px 8px 0 var(--bg-2), 8px 8px 0 2px var(--brand); transform: translate(-4px, -4px); } .tpl-azulejo .rc-img, .tpl-azulejo .p-img { border-radius: 0; aspect-ratio: 1/1; background: var(--bg-2); outline: 1px solid var(--line); outline-offset: -6px; } .tpl-azulejo .rc-name, .tpl-azulejo .p-name { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700 !important; font-size: 14.5px !important; } .tpl-azulejo .rc-price b, .tpl-azulejo .price b { color: var(--brand); font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; } .tpl-azulejo .rc-chip span { background: var(--bg-2); border: 0; border-radius: 0; color: var(--ink-2); font-style: italic; } .tpl-azulejo .rc-btn { border-radius: 2px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; } .tpl-azulejo .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-azulejo .rc-btn-main { background: var(--brand); color: #fff; } .tpl-azulejo .rc-tag, .tpl-azulejo .tag { background: var(--accent); color: #2a1d05; border: 0; border-radius: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; box-shadow: none; top: 24px; left: 24px; } .tpl-azulejo .rc-tag-sale { background: var(--brand); color: #fff; } .tpl-azulejo .cat-grid { gap: 22px; } .tpl-azulejo .cat-tile { aspect-ratio: 1/1; border-radius: 0; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--brand), 0 18px 28px -22px rgba(20,35,74,.7); } .tpl-azulejo .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(20,35,74,.8)); } .tpl-azulejo .cat-tile .t { justify-content: center; text-align: center; } .tpl-azulejo .cat-tile h3 { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-size: 19px; font-weight: 700; } .tpl-azulejo .cat-tile .arr { display: none; } .tpl-azulejo .trust { background: #fff; border-color: var(--line); } .tpl-azulejo .trust-item .ic { background: var(--bg-2); color: var(--brand); border: 2px solid var(--brand); border-radius: 2px; } .tpl-azulejo .main-img { border: 6px solid #fff; box-shadow: 0 0 0 2px var(--brand); border-radius: 0; } .tpl-azulejo .foot { background: #14234a; color: #c9d5f0; border-top: 14px solid transparent; border-image: repeating-linear-gradient(90deg, #fff 0 16px, #1f4eb5 16px 32px) 14; } .tpl-azulejo .foot h4 { font-family: 'Libre Baskerville', Georgia, serif; text-transform: none; letter-spacing: 0; font-style: italic; font-size: 17px; color: #fff; } .tpl-azulejo .foot a { color: #c9d5f0; } @media (max-width: 860px) { .tpl-azulejo .hero-in { margin: 36px 12px; padding: 28px 24px; } } .tpl-azulejo .hero:has(.hero-stock) { background: #fff; } /* ---------- Verdant: moody green. Deep moss night with warm lamp glow, soft leaf corners, gold hairlines, display serif ---------- */ .tpl-verdant { --bg: #111a14; --bg-2: #18251c; --line: #2a3d2f; --ink: #eef0e4; --ink-2: #bcc7b4; --ink-3: #7f8f7b; --r: 28px; --r-lg: 34px; --r-sm: 12px; --brand-soft: color-mix(in srgb, var(--accent) 14%, #111a14); --brand-soft-2: color-mix(in srgb, var(--accent) 26%, #111a14); --brand-ink: color-mix(in srgb, var(--accent) 80%, #fff); color-scheme: dark; } .tpl-verdant h1, .tpl-verdant h2, .tpl-verdant h3, .tpl-verdant .display { font-family: 'Gloock', 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: .005em; } .tpl-verdant .announce { background: #0a110d; color: var(--accent); letter-spacing: .2em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid var(--line); } .tpl-verdant .hdr { background: rgba(17,26,20,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); } .tpl-verdant .hdr .brand { font-family: 'Gloock', Georgia, serif; font-weight: 400; color: var(--accent); font-size: 1.5em; } .tpl-verdant .hdr .icon-link, .tpl-verdant .hdr .hdr-search .i { color: var(--ink); } .tpl-verdant .hdr-search input[type=search] { background: rgba(255,255,255,.05) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--ink); } .tpl-verdant .nav-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--line); } .tpl-verdant .nav-bar .wrap { justify-content: center; } .tpl-verdant .nav-link { color: var(--ink-2); font-size: 14px; } .tpl-verdant .nav-link:hover, .tpl-verdant .nav-link.active { color: var(--accent); } .tpl-verdant .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-verdant .hero { background: #070b08; } .tpl-verdant .hero-bg { opacity: .8; background-position: center 40%; } .tpl-verdant .hero::after { background: radial-gradient(circle at 78% 30%, rgba(217,194,138,.28), transparent 40%), linear-gradient(90deg, rgba(7,11,8,.9), rgba(7,11,8,.3) 70%, transparent); } .tpl-verdant .hero-in { max-width: 540px; padding: 124px 0 132px; } .tpl-verdant .hero h1 { color: #f4f1e2; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; } .tpl-verdant .hero p { color: var(--ink-2); opacity: 1; } .tpl-verdant .hero .eyebrow { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; letter-spacing: .22em; backdrop-filter: none; font-size: 11px; } .tpl-verdant .btn { border-radius: 999px; font-weight: 600; border-color: rgba(217,194,138,.5); color: var(--ink); } .tpl-verdant .btn:hover { background: var(--accent); color: #17200f; border-color: var(--accent); } .tpl-verdant .btn-primary, .tpl-verdant .btn-accent { background: var(--accent); border-color: var(--accent); color: #17200f; box-shadow: 0 14px 30px -14px var(--accent); } .tpl-verdant .btn-primary:hover, .tpl-verdant .btn-accent:hover { background: #ecd9a3; border-color: #ecd9a3; } .tpl-verdant .btn-light { background: transparent; color: var(--ink); border-color: rgba(238,240,228,.5); } .tpl-verdant input[type=text], .tpl-verdant input[type=email], .tpl-verdant input[type=tel], .tpl-verdant input[type=password], .tpl-verdant input[type=number], .tpl-verdant input[type=search], .tpl-verdant select, .tpl-verdant textarea { background-color: var(--bg-2); color: var(--ink); border-color: #38503d; } .tpl-verdant .section { padding: 84px 0; } .tpl-verdant .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 8px; } .tpl-verdant .section-head h2 { color: var(--ink); font-size: clamp(30px, 4vw, 48px); } .tpl-verdant .section-head h2::after { content: "❦"; display: block; color: var(--accent); font-size: 22px; margin-top: 8px; } .tpl-verdant .section-head .link-arrow { color: var(--accent); font-weight: 600; } .tpl-verdant .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-verdant .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: .005em; font-size: clamp(28px, 3.6vw, 42px) !important; } .tpl-verdant .rc-section .section-head h2::after { display: block; } .tpl-verdant .section-alt { background: var(--bg-2); } .tpl-verdant .rc-card, .tpl-verdant .p-card { background: radial-gradient(circle at 50% 0, rgba(217,194,138,.1), transparent 60%), #16221a; border: 1px solid var(--line); border-radius: 34px 8px 34px 8px; padding: 14px 14px 18px; transition: .3s; } .tpl-verdant .section-alt .rc-card { background: radial-gradient(circle at 50% 0, rgba(217,194,138,.1), transparent 60%), #111a14; } .tpl-verdant .rc-card:hover, .tpl-verdant .p-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 0 0 1px var(--accent), 0 26px 44px -28px rgba(217,194,138,.55); } .tpl-verdant .rc-img, .tpl-verdant .p-img { border-radius: 26px 6px 26px 6px; aspect-ratio: 1/1; background: #0b120d; } .tpl-verdant .rc-name, .tpl-verdant .p-name { font-family: 'Gloock', Georgia, serif; font-weight: 400 !important; font-size: 17px !important; } .tpl-verdant .p-name a:hover, .tpl-verdant .rc-name a:hover { color: var(--accent); } .tpl-verdant .rc-price b, .tpl-verdant .price b { color: var(--accent); font-weight: 700; } .tpl-verdant .rc-chip span { background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: 999px; } .tpl-verdant .rc-btn { border-radius: 999px; border: 1px solid rgba(217,194,138,.5); color: var(--ink); } .tpl-verdant .rc-btn:hover { background: var(--accent); color: #17200f; } .tpl-verdant .rc-btn-main { background: var(--accent); color: #17200f; border-color: var(--accent); } .tpl-verdant .rc-tag, .tpl-verdant .tag { background: #0a110d; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; font-weight: 600; box-shadow: none; } .tpl-verdant .rc-tag-sale { background: var(--accent); color: #17200f; } .tpl-verdant .rc-tag-out { color: var(--ink-3); border-color: var(--line); } .tpl-verdant .rc-heart button { background: rgba(7,11,8,.7); color: #fff; box-shadow: none; } .tpl-verdant .cat-grid { gap: 22px; } .tpl-verdant .cat-tile { aspect-ratio: 3/4; border-radius: 60px 10px 60px 10px; border: 1px solid var(--line); } .tpl-verdant .cat-tile::after { background: radial-gradient(circle at 50% 100%, rgba(217,194,138,.25), transparent 55%), linear-gradient(180deg, transparent 35%, rgba(7,11,8,.9)); } .tpl-verdant .cat-tile .t { justify-content: center; text-align: center; bottom: 28px; } .tpl-verdant .cat-tile h3 { font-family: 'Gloock', Georgia, serif; font-weight: 400; font-size: 22px; } .tpl-verdant .cat-tile .arr { display: none; } .tpl-verdant .trust { background: var(--bg); border-color: var(--line); } .tpl-verdant .trust-item { background: transparent; border-color: var(--line); } .tpl-verdant .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 18px 4px 18px 4px; } .tpl-verdant .main-img { border: 1px solid var(--line); border-radius: 40px 8px 40px 8px; background: #0b120d; } .tpl-verdant .pd-info h1 { color: var(--accent); } .tpl-verdant .assure, .tpl-verdant .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-verdant .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--accent); } .tpl-verdant .toast, .tpl-verdant .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-verdant .foot { background: #070b08; border-top: 1px solid var(--line); } .tpl-verdant .foot h4 { color: var(--accent); font-family: 'Gloock', Georgia, serif; text-transform: none; letter-spacing: .02em; font-size: 18px; font-weight: 400; } @media (max-width: 860px) { .tpl-verdant .hero-in { padding: 72px 0 80px; } .tpl-verdant .section { padding: 56px 0; } } .tpl-verdant .hero:has(.hero-stock) { background: #070b08; } @media (max-width: 760px) { .tpl-nordic .rc-grid, .tpl-nordic .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } } @media (max-width: 560px) { .tpl-jaali .rc-actions, .tpl-concrete .rc-actions, .tpl-azulejo .rc-actions, .tpl-verdant .rc-actions { grid-template-columns: 1fr; } .tpl-jaali .rc-btn, .tpl-concrete .rc-btn, .tpl-azulejo .rc-btn, .tpl-verdant .rc-btn { letter-spacing: .02em; padding: 0 4px; } .tpl-concrete .rc-card::before, .tpl-concrete .p-card::before { font-size: 10px; padding: 3px 7px; } } /* ===================================================================================================================================== Electronics and Mobile Accessories (batch 6): Voltage (neon cyber), Blueprint (drafting-sheet cards), Orbit (premium white), Gizmo (candy-coloured gadgets), Dealz (deals-first) ===================================================================================================================================== */ /* ---------- Voltage: neon cyber. Near-black with cyan and violet glow, scan-lined banner, cut-corner panels, glitch logo ---------- */ .tpl-voltage { --bg: #07070d; --bg-2: #0f0f1a; --line: #25253a; --ink: #eceaf8; --ink-2: #b4b2cc; --ink-3: #7a7894; --r: 2px; --r-lg: 4px; --r-sm: 2px; --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); --brand-soft: color-mix(in srgb, var(--accent) 14%, #07070d); --brand-soft-2: color-mix(in srgb, var(--accent) 26%, #07070d); --brand-ink: color-mix(in srgb, var(--accent) 80%, #fff); color-scheme: dark; } .tpl-voltage h1, .tpl-voltage h2, .tpl-voltage h3, .tpl-voltage .display { font-family: 'Chakra Petch', 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .tpl-voltage .announce { background: #000; color: var(--accent); font-family: 'Chakra Petch', sans-serif; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--line); } .tpl-voltage .hdr { background: rgba(7,7,13,.92); border-bottom: 1px solid var(--accent); box-shadow: 0 6px 24px -12px var(--accent); backdrop-filter: blur(10px); } .tpl-voltage .hdr .brand { font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 2px 0 var(--brand), -2px 0 var(--accent); } .tpl-voltage .hdr .icon-link, .tpl-voltage .hdr .hdr-search .i { color: var(--ink); } .tpl-voltage .hdr-search input[type=search] { background: #0f0f1a !important; border: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--ink); font-family: 'Chakra Petch', sans-serif; } .tpl-voltage .nav-bar { background: #0a0a12; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-voltage .nav-bar .wrap { justify-content: center; } .tpl-voltage .nav-link { color: var(--ink-2); font-family: 'Chakra Petch', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; } .tpl-voltage .nav-link:hover, .tpl-voltage .nav-link.active { color: var(--accent); text-shadow: 0 0 10px var(--accent); } .tpl-voltage .nav-link.active::after { height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .tpl-voltage .hero { background: #000; min-height: 540px; display: flex; align-items: center; } .tpl-voltage .hero-bg { opacity: .85; background-position: center 40%; } .tpl-voltage .hero::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.4) 55%, transparent); } .tpl-voltage .hero::before { content: ""; position: absolute; inset: 18px; z-index: 3; pointer-events: none; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); clip-path: var(--cut); } .tpl-voltage .hero-in { max-width: 600px; padding: 90px 0; margin-left: 30px; } .tpl-voltage .hero h1 { color: #fff; font-size: clamp(38px, 5.8vw, 78px); line-height: .98; text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 70%, transparent); } .tpl-voltage .hero p { color: var(--ink-2); opacity: 1; } .tpl-voltage .hero .eyebrow { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 0; font-family: 'Chakra Petch', sans-serif; letter-spacing: .24em; backdrop-filter: none; clip-path: var(--cut); } .tpl-voltage .btn { border-radius: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; border-color: var(--accent); color: var(--accent); background: transparent; clip-path: var(--cut); } .tpl-voltage .btn:hover { background: var(--accent); color: #031418; box-shadow: 0 0 24px var(--accent); } .tpl-voltage .btn-primary, .tpl-voltage .btn-accent { background: var(--accent); color: #031418; border-color: var(--accent); } .tpl-voltage .btn-primary:hover, .tpl-voltage .btn-accent:hover { background: #fff; border-color: #fff; } .tpl-voltage .btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .tpl-voltage input[type=text], .tpl-voltage input[type=email], .tpl-voltage input[type=tel], .tpl-voltage input[type=password], .tpl-voltage input[type=number], .tpl-voltage input[type=search], .tpl-voltage select, .tpl-voltage textarea { background-color: var(--bg-2); color: var(--ink); border-color: #34344f; } .tpl-voltage .section-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; } .tpl-voltage .section-head h2 { font-size: clamp(24px, 3.2vw, 38px); } .tpl-voltage .section-head h2::before { content: "> "; color: var(--accent); text-shadow: 0 0 12px var(--accent); } .tpl-voltage .section-head .link-arrow { color: var(--accent); font-family: 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; } .tpl-voltage .rc-section .section-head { border-bottom: 1px solid var(--line); } .tpl-voltage .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(22px, 2.8vw, 32px) !important; letter-spacing: .02em; } .tpl-voltage .rc-section .section-head h2::before { content: "> " !important; } .tpl-voltage .section-alt { background: var(--bg-2); } .tpl-voltage .rc-card, .tpl-voltage .p-card { background: linear-gradient(#0e0e1a, #0e0e1a) padding-box, linear-gradient(135deg, var(--accent), var(--brand)) border-box; border: 1px solid transparent; border-radius: 0; padding: 12px 12px 14px; clip-path: var(--cut); transition: .2s; } .tpl-voltage .section-alt .rc-card { background: linear-gradient(#07070d, #07070d) padding-box, linear-gradient(135deg, var(--accent), var(--brand)) border-box; } .tpl-voltage .rc-card:hover, .tpl-voltage .p-card:hover { background: linear-gradient(#141428, #141428) padding-box, linear-gradient(135deg, #fff, var(--accent)) border-box; transform: translateY(-3px); } .tpl-voltage .rc-img, .tpl-voltage .p-img { border-radius: 0; aspect-ratio: 1/1; background: radial-gradient(circle at 50% 40%, #1c1c32, #08080f); } .tpl-voltage .rc-card:hover .rc-img img, .tpl-voltage .p-card:hover .p-img img { filter: saturate(1.2) brightness(1.08); } .tpl-voltage .rc-name, .tpl-voltage .p-name { font-family: 'Chakra Petch', sans-serif; font-weight: 600 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-align: left; } .tpl-voltage .rc-chip { text-align: left; } .tpl-voltage .rc-chip span { background: transparent; border: 1px solid var(--line); color: var(--ink-3); border-radius: 0; font-family: 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; } .tpl-voltage .rc-price { justify-content: flex-start; } .tpl-voltage .rc-price b, .tpl-voltage .price b { color: var(--accent); font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); } .tpl-voltage .rc-btn { border-radius: 0; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); font-family: 'Chakra Petch', sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; font-weight: 700; } .tpl-voltage .rc-btn:hover { background: var(--accent); color: #031418; } .tpl-voltage .rc-btn-main { background: var(--accent); color: #031418; border-color: var(--accent); } .tpl-voltage .rc-tag, .tpl-voltage .tag { background: var(--brand); color: #fff; border: 0; border-radius: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 0; left: 0; padding: 4px 10px; } .tpl-voltage .rc-tag-sale { background: var(--accent); color: #031418; } .tpl-voltage .rc-tag-out { background: #2a2a3d; color: var(--ink-3); } .tpl-voltage .rc-heart button { background: rgba(0,0,0,.6); color: #fff; box-shadow: none; border: 1px solid var(--line); } .tpl-voltage .cat-grid { gap: 16px; } .tpl-voltage .cat-tile { aspect-ratio: 4/3; border-radius: 0; clip-path: var(--cut); background: #000; } .tpl-voltage .cat-tile::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 35%, rgba(0,0,0,.9)); } .tpl-voltage .cat-tile::before { content: ""; position: absolute; inset: 8px; z-index: 1; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; clip-path: var(--cut); } .tpl-voltage .cat-tile .t { z-index: 2; } .tpl-voltage .cat-tile h3 { font-family: 'Chakra Petch', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 0 12px var(--accent); } .tpl-voltage .cat-tile .arr { border-radius: 0; background: var(--accent); color: #031418; } .tpl-voltage .trust { background: #0a0a12; border-color: var(--line); } .tpl-voltage .trust-item { border-color: var(--line); background: transparent; } .tpl-voltage .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 0; box-shadow: 0 0 14px -4px var(--accent); } .tpl-voltage .main-img { border: 1px solid var(--accent); border-radius: 0; background: radial-gradient(circle at 50% 40%, #1c1c32, #08080f); box-shadow: 0 0 30px -10px var(--accent); } .tpl-voltage .pd-info h1 { font-size: clamp(26px, 3.4vw, 42px); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); } .tpl-voltage .assure, .tpl-voltage .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-voltage .sticky-buy { background: var(--bg-2); border-top: 1px solid var(--accent); } .tpl-voltage .toast, .tpl-voltage .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-voltage .foot { background: #000; border-top: 1px solid var(--accent); box-shadow: 0 -8px 30px -18px var(--accent); } .tpl-voltage .foot h4 { color: var(--accent); font-family: 'Chakra Petch', sans-serif; letter-spacing: .14em; } @media (max-width: 860px) { .tpl-voltage .hero { min-height: 420px; } .tpl-voltage .hero-in { padding: 60px 0; margin-left: 10px; } .tpl-voltage .hero::before { inset: 8px; } } .tpl-voltage .hero:has(.hero-stock) { background: #000; } /* ---------- Blueprint: technical drawing sheets. Drafting-paper grid, navy ink, every product on a titled drawing sheet with a name | price block ---------- */ .tpl-blueprint { --bg: #f2f7fc; --bg-2: #e3edf8; --line: #b9cde6; --ink: #0b2a55; --ink-2: #3f5f8c; --ink-3: #85a0c4; --r: 0px; --r-lg: 0px; --r-sm: 0px; --mono: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace; background-image: linear-gradient(rgba(11,74,143,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11,74,143,.07) 1px, transparent 1px), linear-gradient(rgba(11,74,143,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(11,74,143,.13) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; } .tpl-blueprint h1, .tpl-blueprint h2, .tpl-blueprint h3, .tpl-blueprint .display { font-family: 'Teko', 'Oswald', sans-serif; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .tpl-blueprint .announce { background: var(--brand); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .tpl-blueprint .hdr { background: rgba(242,247,252,.96); border-bottom: 2px solid var(--brand); backdrop-filter: none; } .tpl-blueprint .hdr .brand { font-family: 'Teko', sans-serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); font-size: 1.9em; line-height: 1; border: 2px solid var(--brand); padding: 2px 12px; } .tpl-blueprint .hdr-search input[type=search] { background: #fff !important; border: 1px solid var(--brand) !important; border-radius: 0 !important; font-family: var(--mono); font-size: 13px; } .tpl-blueprint .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-blueprint .nav-bar .wrap { justify-content: center; } .tpl-blueprint .nav-link { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .tpl-blueprint .nav-link:hover, .tpl-blueprint .nav-link.active { color: var(--brand); } .tpl-blueprint .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-blueprint .hero { background: transparent; color: var(--ink); border-bottom: 2px solid var(--brand); overflow: hidden; } .tpl-blueprint .hero::after { content: none; } .tpl-blueprint .hero-bg { inset: 40px 5% 40px auto; width: min(44%, 560px); height: auto; opacity: 1; border: 2px solid var(--brand); outline: 1px solid var(--brand); outline-offset: 8px; background-position: center; } .tpl-blueprint .hero::before { content: "A-A · SCALE 1:1"; position: absolute; right: 5%; bottom: 8px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--brand); } .tpl-blueprint .hero-in { max-width: 540px; padding: 108px 0 116px; } .tpl-blueprint .hero h1 { color: var(--ink); font-size: clamp(44px, 6vw, 84px); line-height: .92; } .tpl-blueprint .hero p { color: var(--ink-2); opacity: 1; font-family: var(--mono); font-size: 14.5px; } .tpl-blueprint .hero .eyebrow { background: transparent; border: 1px solid var(--brand); color: var(--brand); border-radius: 0; font-family: var(--mono); letter-spacing: .12em; backdrop-filter: none; } .tpl-blueprint .btn { border-radius: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; font-weight: 400; border: 2px solid var(--brand); } .tpl-blueprint .btn-primary { background: var(--brand); color: #fff; } .tpl-blueprint .btn-primary:hover { background: var(--ink); border-color: var(--ink); } .tpl-blueprint .btn-accent { background: var(--accent); border-color: var(--brand); color: var(--ink); } .tpl-blueprint .btn-accent:hover { background: #fff; } .tpl-blueprint .btn-light { background: #fff; color: var(--brand); border-color: var(--brand); } .tpl-blueprint .section-head { border-bottom: 2px solid var(--brand); padding-bottom: 8px; } .tpl-blueprint .section-head h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1; } .tpl-blueprint .section-head h2::before { content: "FIG. "; font-family: var(--mono); font-size: .35em; color: var(--ink-3); letter-spacing: .1em; vertical-align: .6em; } .tpl-blueprint .section-head p { font-family: var(--mono); font-size: 12.5px; } .tpl-blueprint .section-head .link-arrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--brand); } .tpl-blueprint .rc-section .section-head { border-bottom: 2px solid var(--brand); } .tpl-blueprint .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; font-size: clamp(30px, 3.8vw, 46px) !important; letter-spacing: .03em; } .tpl-blueprint .rc-section .section-head h2::before { content: "FIG. " !important; } .tpl-blueprint .section-alt { background: rgba(227,237,248,.7); } .tpl-blueprint .rc-grid, .tpl-blueprint .p-grid { counter-reset: sheet; } .tpl-blueprint .rc-card, .tpl-blueprint .p-card { counter-increment: sheet; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "media media" "chip chip" "name price" "act act"; background: #fff; border: 2px solid var(--brand); border-radius: 0; padding: 0; position: relative; transition: background .15s; } .tpl-blueprint .rc-card::before, .tpl-blueprint .p-card::before { content: "SHEET " counter(sheet, decimal-leading-zero); position: absolute; left: 0; top: 0; z-index: 4; background: var(--brand); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; padding: 3px 10px; } .tpl-blueprint .rc-card:hover, .tpl-blueprint .p-card:hover { background: #f7fbff; box-shadow: 6px 6px 0 var(--line); } .tpl-blueprint .rc-media { grid-area: media; margin: 0; } .tpl-blueprint .rc-chip { grid-area: chip; text-align: left; margin: 0; padding: 8px 12px; border-top: 2px solid var(--brand); } .tpl-blueprint .rc-name { grid-area: name; margin: 0 !important; padding: 10px 12px; border-top: 2px solid var(--brand); text-align: left; } .tpl-blueprint .rc-price { grid-area: price; margin: 0; padding: 10px 12px; border-top: 2px solid var(--brand); border-left: 2px solid var(--brand); align-items: center; } .tpl-blueprint .rc-actions { grid-area: act; padding: 10px 12px; border-top: 2px solid var(--brand); margin: 0; } .tpl-blueprint .rc-img, .tpl-blueprint .p-img { position: relative; aspect-ratio: 1/1; border-radius: 0; background: #eaf2fb; margin: 0; } .tpl-blueprint .rc-img::after, .tpl-blueprint .p-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; opacity: .5; background: linear-gradient(var(--brand), var(--brand)) center / 1px 100% no-repeat, linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat; } .tpl-blueprint .rc-name, .tpl-blueprint .p-name { font-family: 'Teko', sans-serif; font-weight: 500 !important; font-size: 21px !important; line-height: 1.05; text-transform: uppercase !important; letter-spacing: .02em !important; } .tpl-blueprint .rc-chip span { background: transparent; border: 0; padding: 0; color: var(--ink-3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; } .tpl-blueprint .rc-price b, .tpl-blueprint .price b { color: var(--brand); font-family: var(--mono); font-weight: 400; font-size: 16px; } .tpl-blueprint .rc-btn { border-radius: 0; border: 1.5px solid var(--brand); color: var(--brand); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 400; } .tpl-blueprint .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-blueprint .rc-btn-main { background: var(--accent); border-color: var(--brand); color: var(--ink); } .tpl-blueprint .rc-tag, .tpl-blueprint .tag { background: var(--accent); color: var(--ink); border: 1.5px solid var(--brand); border-radius: 0; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 28px; left: 8px; } .tpl-blueprint .rc-heart { top: 28px; } .tpl-blueprint .cat-grid { gap: 18px; } .tpl-blueprint .cat-tile { aspect-ratio: 4/3; border-radius: 0; border: 2px solid var(--brand); outline: 1px solid var(--brand); outline-offset: 5px; } .tpl-blueprint .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(11,42,85,.85)); } .tpl-blueprint .cat-tile h3 { font-family: 'Teko', sans-serif; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; } .tpl-blueprint .cat-tile .arr { border-radius: 0; background: var(--accent); color: var(--ink); } .tpl-blueprint .trust { background: #fff; border-color: var(--brand); } .tpl-blueprint .trust-item span { font-family: var(--mono); font-size: 12px; } .tpl-blueprint .trust-item .ic { background: transparent; border: 2px solid var(--brand); color: var(--brand); border-radius: 0; } .tpl-blueprint .main-img { border: 2px solid var(--brand); outline: 1px solid var(--brand); outline-offset: 6px; border-radius: 0; background: #eaf2fb; } .tpl-blueprint .pd-info h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: .95; } .tpl-blueprint .foot { background: var(--brand); border-top: 4px solid var(--accent); } .tpl-blueprint .foot h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); } @media (max-width: 860px) { .tpl-blueprint .hero-bg { inset: auto 5% 30px auto; width: 40%; height: 34%; } .tpl-blueprint .hero-in { padding: 54px 0 150px; } .tpl-blueprint .hero::before { right: 5%; } } .tpl-blueprint .hero:has(.hero-stock) { background: transparent; } /* ---------- Orbit: premium clean white. Frosted header, big light type, a rounded photo rising from the bottom of the banner, grey-card products with blue links ---------- */ .tpl-orbit { --bg: #ffffff; --bg-2: #f5f5f7; --line: #e4e4e8; --ink: #1d1d1f; --ink-2: #515156; --ink-3: #86868b; --r: 18px; --r-lg: 28px; --r-sm: 10px; } .tpl-orbit h1, .tpl-orbit h2, .tpl-orbit h3, .tpl-orbit .display { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.04em; } .tpl-orbit .announce { background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; letter-spacing: 0; } .tpl-orbit .hdr { background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(0,0,0,.08); backdrop-filter: saturate(1.8) blur(20px); } .tpl-orbit .hdr .brand { font-family: 'Inter Tight', sans-serif; font-weight: 700; letter-spacing: -.05em; color: var(--ink); } .tpl-orbit .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: transparent !important; } .tpl-orbit .nav-bar { background: rgba(255,255,255,.7); border-top: 0; border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(16px); } .tpl-orbit .nav-bar .wrap { justify-content: center; gap: 8px; } .tpl-orbit .nav-link { font-size: 13px; font-weight: 500; color: var(--ink-2); } .tpl-orbit .nav-link:hover, .tpl-orbit .nav-link.active { color: var(--ink); } .tpl-orbit .nav-link.active::after { height: 2px; background: var(--ink); } .tpl-orbit .hero { background: linear-gradient(180deg, #fff 0, #f5f5f7 100%); color: var(--ink); text-align: center; min-height: 680px; overflow: hidden; } .tpl-orbit .hero::after { content: none; } .tpl-orbit .hero-bg { inset: auto 7% 0 7%; height: 48%; opacity: 1; border-radius: 28px 28px 0 0; background-position: center 55%; box-shadow: 0 -30px 60px -40px rgba(0,0,0,.35); } .tpl-orbit .hero-in { margin: 0 auto; max-width: 760px; padding: 80px 0 0; } .tpl-orbit .hero h1 { color: var(--ink); font-size: clamp(44px, 7vw, 92px); line-height: .96; font-weight: 700; } .tpl-orbit .hero p { color: var(--ink-2); opacity: 1; margin-left: auto; margin-right: auto; font-size: 19px; } .tpl-orbit .hero .eyebrow { background: transparent; border: 0; padding: 0; backdrop-filter: none; color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 600; } .tpl-orbit .hero .eyebrow .i { display: none; } .tpl-orbit .hero .row { justify-content: center; } .tpl-orbit .btn { border-radius: 999px; font-weight: 500; font-size: 15px; } .tpl-orbit .btn-primary, .tpl-orbit .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .tpl-orbit .btn-primary:hover, .tpl-orbit .btn-accent:hover { background: color-mix(in srgb, var(--accent) 82%, #000); border-color: color-mix(in srgb, var(--accent) 82%, #000); } .tpl-orbit .btn-light { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .tpl-orbit .section { padding: 88px 0; } .tpl-orbit .section-head { justify-content: center; align-items: center; text-align: center; flex-direction: column; gap: 6px; margin-bottom: 44px; } .tpl-orbit .section-head h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1; } .tpl-orbit .section-head p { font-size: 18px; } .tpl-orbit .section-head .link-arrow { color: var(--accent); font-weight: 500; font-size: 17px; } .tpl-orbit .section-head .link-arrow::after { content: ""; } .tpl-orbit .rc-section .section-head { border-bottom: 0; align-items: center; } .tpl-orbit .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.04em; font-size: clamp(30px, 4.2vw, 50px) !important; } .tpl-orbit .section-alt { background: var(--bg-2); } .tpl-orbit .rc-card, .tpl-orbit .p-card { background: #fff; border: 0; border-radius: 28px; padding: 22px 18px 22px; text-align: center; transition: transform .35s, box-shadow .35s; box-shadow: 0 1px 0 rgba(0,0,0,.04); } .tpl-orbit .section-alt .rc-card { background: #fff; } .tpl-orbit .section:not(.section-alt) .rc-card { background: var(--bg-2); } .tpl-orbit .rc-card:hover, .tpl-orbit .p-card:hover { transform: scale(1.025); box-shadow: 0 26px 50px -30px rgba(0,0,0,.4); } .tpl-orbit .rc-img, .tpl-orbit .p-img { border-radius: 18px; aspect-ratio: 1/1; background: transparent; } .tpl-orbit .rc-name, .tpl-orbit .p-name { font-family: 'Inter Tight', sans-serif; font-weight: 700 !important; font-size: 19px !important; letter-spacing: -.03em !important; margin-top: 16px !important; } .tpl-orbit .rc-chip span { background: transparent; border: 0; color: var(--ink-3); font-weight: 500; font-size: 13px; } .tpl-orbit .rc-price b, .tpl-orbit .price b { color: var(--ink); font-weight: 500; font-size: 15px; } .tpl-orbit .rc-actions { grid-template-columns: 1fr; gap: 10px; justify-items: center; } .tpl-orbit .rc-btn { height: 34px; border-radius: 999px; padding: 0 20px; border: 0; background: var(--accent); color: #fff; font-weight: 500; font-size: 14px; min-width: 110px; } .tpl-orbit .rc-btn:hover { background: color-mix(in srgb, var(--accent) 82%, #000); color: #fff; } .tpl-orbit .rc-btn:not(.rc-btn-main) { background: transparent; color: var(--accent); height: auto; padding: 2px 0; } .tpl-orbit .rc-btn:not(.rc-btn-main):hover { background: transparent; text-decoration: underline; color: var(--accent); } .tpl-orbit .rc-actions form:first-child { order: 2; } .tpl-orbit .rc-tag, .tpl-orbit .tag { background: transparent; color: #bf4800; border: 0; font-weight: 600; box-shadow: none; padding: 0; left: 18px; top: 18px; font-size: 12px; } .tpl-orbit .rc-tag-sale { color: #bf4800; } .tpl-orbit .rc-tag-out { color: var(--ink-3); } .tpl-orbit .cat-grid { gap: 20px; } .tpl-orbit .cat-tile { aspect-ratio: 4/5; border-radius: 28px; } .tpl-orbit .cat-tile::after { background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 35%, rgba(0,0,0,.45)); } .tpl-orbit .cat-tile .t { top: 22px; bottom: auto; left: 22px; } .tpl-orbit .cat-tile h3 { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.03em; } .tpl-orbit .cat-tile .arr { display: none; } .tpl-orbit .trust { background: transparent; border-color: var(--line); } .tpl-orbit .trust-item .ic { background: var(--bg-2); color: var(--ink); } .tpl-orbit .main-img { border-radius: 32px; border: 0; background: var(--bg-2); } .tpl-orbit .foot { background: var(--bg-2); color: var(--ink-2); border-top: 1px solid var(--line); } .tpl-orbit .foot h4 { color: var(--ink); text-transform: none; letter-spacing: -.01em; font-size: 14px; font-family: 'Inter Tight', sans-serif; } .tpl-orbit .foot a { color: var(--ink-2); } .tpl-orbit .foot-bottom { border-top-color: var(--line); color: var(--ink-3); } @media (max-width: 860px) { .tpl-orbit .hero { min-height: 560px; } .tpl-orbit .hero-in { padding-top: 52px; } .tpl-orbit .hero-bg { inset: auto 4% 0 4%; height: 40%; } .tpl-orbit .section { padding: 56px 0; } } .tpl-orbit .hero:has(.hero-stock) { background: linear-gradient(180deg, #fff 0, #f5f5f7 100%); } /* ---------- Gizmo: candy-coloured gadgets. Chunky rounded type, toy-like pressable buttons, a different pastel on each card, sticker tags ---------- */ .tpl-gizmo { --bg: #fffaf6; --bg-2: #ffeef3; --line: #ffd9e4; --ink: #2a1630; --ink-2: #66486f; --ink-3: #a58bad; --r: 24px; --r-lg: 34px; --r-sm: 14px; } .tpl-gizmo h1, .tpl-gizmo h2, .tpl-gizmo h3, .tpl-gizmo .display { font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 800; letter-spacing: -.01em; } .tpl-gizmo .announce { background: linear-gradient(90deg, var(--brand), #ffb347, var(--accent)); color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .02em; } .tpl-gizmo .hdr { background: #fff; border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(90deg, var(--brand) 0 40px, #ffb347 40px 80px, var(--accent) 80px 120px, #7cc4ff 120px 160px) 4; backdrop-filter: none; } .tpl-gizmo .hdr .brand { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--brand); font-size: 1.6em; letter-spacing: -.02em; } .tpl-gizmo .hdr-search input[type=search] { background: var(--bg-2) !important; border: 2px solid var(--line) !important; border-radius: 999px !important; } .tpl-gizmo .nav-bar { background: transparent; border-top: 0; } .tpl-gizmo .nav-bar .wrap { justify-content: center; gap: 8px; padding: 8px 0; } .tpl-gizmo .nav-link { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 6px 16px; background: #fff; border: 2px solid var(--line); color: var(--ink-2); } .tpl-gizmo .nav-link:hover { border-color: var(--brand); color: var(--brand); } .tpl-gizmo .nav-link.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--brand) 70%, #000); } .tpl-gizmo .nav-link.active::after { content: none; } .tpl-gizmo .hero { background: radial-gradient(circle at 85% 20%, #fff 0 8%, transparent 9%), var(--bg-2); color: var(--ink); overflow: hidden; margin: 6px 14px 0; border-radius: 44px; } .tpl-gizmo .hero::after { content: none; } .tpl-gizmo .hero::before { content: "⚡"; position: absolute; right: 8%; top: 14%; font-size: 52px; z-index: 3; transform: rotate(12deg); filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); } .tpl-gizmo .hero-bg { inset: 8% 8% 8% auto; width: min(36%, 460px); height: auto; opacity: 1; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; border: 10px solid #fff; box-shadow: 0 12px 0 rgba(42,22,48,.12); background-position: center; } .tpl-gizmo .hero-in { max-width: 540px; padding: 104px 0 112px; } .tpl-gizmo .hero h1 { color: var(--ink); font-size: clamp(42px, 6vw, 80px); line-height: .96; } .tpl-gizmo .hero p { color: var(--ink-2); opacity: 1; font-size: 18px; } .tpl-gizmo .hero .eyebrow { background: var(--accent); color: #053b33; border: 0; border-radius: 999px; backdrop-filter: none; text-transform: none; letter-spacing: 0; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 15px; transform: rotate(-3deg); } .tpl-gizmo .btn { border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; border-bottom-width: 4px; transition: transform .08s, box-shadow .08s; } .tpl-gizmo .btn-primary, .tpl-gizmo .btn-accent { background: var(--brand); border-color: var(--brand); border-bottom-color: color-mix(in srgb, var(--brand) 65%, #000); color: #fff; } .tpl-gizmo .btn-primary:hover, .tpl-gizmo .btn-accent:hover { background: color-mix(in srgb, var(--brand) 90%, #fff); transform: translateY(2px); border-bottom-width: 2px; } .tpl-gizmo .btn-light { background: #fff; color: var(--ink); border-color: var(--ink); border-bottom-color: var(--ink); } .tpl-gizmo .section-head h2 { font-size: clamp(32px, 4.4vw, 54px); } .tpl-gizmo .section-head h2::after { content: ""; display: block; width: 70px; height: 10px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #ffb347, var(--accent), #7cc4ff); } .tpl-gizmo .section-head .link-arrow { color: var(--brand); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; } .tpl-gizmo .rc-section .section-head { border-bottom: 0; } .tpl-gizmo .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 0; text-transform: none; letter-spacing: -.01em; font-size: clamp(30px, 4vw, 46px) !important; } .tpl-gizmo .section-alt { background: var(--bg-2); } .tpl-gizmo .rc-card, .tpl-gizmo .p-card { --pastel: #ffe3ee; background: var(--pastel); border: 0; border-radius: 34px; padding: 12px 12px 18px; box-shadow: 0 10px 0 rgba(42,22,48,.1); transition: transform .15s, box-shadow .15s; } .tpl-gizmo .rc-grid > :nth-child(4n+1), .tpl-gizmo .p-grid > :nth-child(4n+1) { --pastel: #ffe3ee; } .tpl-gizmo .rc-grid > :nth-child(4n+2), .tpl-gizmo .p-grid > :nth-child(4n+2) { --pastel: #d9f6ee; } .tpl-gizmo .rc-grid > :nth-child(4n+3), .tpl-gizmo .p-grid > :nth-child(4n+3) { --pastel: #fff1c9; } .tpl-gizmo .rc-grid > :nth-child(4n), .tpl-gizmo .p-grid > :nth-child(4n) { --pastel: #dcecff; } .tpl-gizmo .rc-card:hover, .tpl-gizmo .p-card:hover { transform: translateY(6px); box-shadow: 0 4px 0 rgba(42,22,48,.1); } .tpl-gizmo .rc-img, .tpl-gizmo .p-img { border-radius: 26px; aspect-ratio: 1/1; background: #fff; } .tpl-gizmo .rc-name, .tpl-gizmo .p-name { font-family: 'Baloo 2', sans-serif; font-weight: 800 !important; font-size: 18px !important; letter-spacing: 0 !important; } .tpl-gizmo .rc-price b, .tpl-gizmo .price b { color: var(--ink); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; } .tpl-gizmo .rc-chip span { background: rgba(255,255,255,.75); border: 0; border-radius: 999px; font-weight: 700; color: var(--ink-2); } .tpl-gizmo .rc-btn { border-radius: 999px; border: 2px solid var(--ink); border-bottom-width: 4px; color: var(--ink); background: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; } .tpl-gizmo .rc-btn:hover { transform: translateY(2px); border-bottom-width: 2px; } .tpl-gizmo .rc-btn-main { background: var(--ink); color: #fff; } .tpl-gizmo .rc-tag, .tpl-gizmo .tag { background: #fff; color: var(--brand); border: 2px solid var(--brand); border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 800; transform: rotate(-6deg); box-shadow: 0 3px 0 rgba(0,0,0,.1); } .tpl-gizmo .rc-tag-sale { background: var(--brand); color: #fff; } .tpl-gizmo .cat-grid { gap: 22px; } .tpl-gizmo .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 0 4px var(--brand), 0 10px 0 4px rgba(42,22,48,.12); margin: 8px; } .tpl-gizmo .cat-grid > .cat-tile:nth-child(4n+2) { box-shadow: 0 0 0 4px var(--accent), 0 10px 0 4px rgba(42,22,48,.12); } .tpl-gizmo .cat-grid > .cat-tile:nth-child(4n+3) { box-shadow: 0 0 0 4px #ffb347, 0 10px 0 4px rgba(42,22,48,.12); } .tpl-gizmo .cat-grid > .cat-tile:nth-child(4n) { box-shadow: 0 0 0 4px #7cc4ff, 0 10px 0 4px rgba(42,22,48,.12); } .tpl-gizmo .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(42,22,48,.7)); } .tpl-gizmo .cat-tile .t { justify-content: center; text-align: center; bottom: 26px; } .tpl-gizmo .cat-tile h3 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; } .tpl-gizmo .cat-tile .arr { display: none; } .tpl-gizmo .trust { background: transparent; border: 0; } .tpl-gizmo .trust-item { background: #fff; border: 0; border-radius: 28px; margin: 6px; box-shadow: 0 6px 0 rgba(42,22,48,.08); } .tpl-gizmo .trust-item .ic { background: var(--accent); color: #053b33; } .tpl-gizmo .main-img { border-radius: 40px; border: 10px solid #fff; box-shadow: 0 12px 0 rgba(42,22,48,.12); } .tpl-gizmo .foot { background: var(--ink); color: #e6d3ea; border-radius: 44px 44px 0 0; margin: 40px 10px 0; } .tpl-gizmo .foot h4 { color: #ffb347; font-family: 'Baloo 2', sans-serif; text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 800; } .tpl-gizmo .foot a { color: #e6d3ea; } @media (max-width: 860px) { .tpl-gizmo .hero { margin: 6px 8px 0; border-radius: 30px; } .tpl-gizmo .hero-bg { inset: auto 6% 5% auto; width: 40%; height: 34%; } .tpl-gizmo .hero-in { padding: 54px 0 160px; } .tpl-gizmo .hero::before { top: 5%; font-size: 36px; } } .tpl-gizmo .hero:has(.hero-stock) { background-color: var(--bg-2); } /* ---------- Dealz: deals-first. Red and yellow, a compact five-up grid, starburst discount badges, big red prices, loud yellow buttons ---------- */ .tpl-dealz { --bg: #fffbea; --bg-2: #fff1b8; --line: #f1d96a; --ink: #1f1306; --ink-2: #5d4412; --ink-3: #9a8650; --r: 8px; --r-lg: 12px; --r-sm: 4px; --burst: polygon(50% 0, 61% 10%, 75% 6%, 80% 20%, 94% 25%, 90% 39%, 100% 50%, 90% 61%, 94% 75%, 80% 80%, 75% 94%, 61% 90%, 50% 100%, 39% 90%, 25% 94%, 20% 80%, 6% 75%, 10% 61%, 0 50%, 10% 39%, 6% 25%, 20% 20%, 25% 6%, 39% 10%); } .tpl-dealz h1, .tpl-dealz h2, .tpl-dealz h3, .tpl-dealz .display { font-family: 'Bebas Neue', 'Oswald', Impact, sans-serif; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; } .tpl-dealz .announce { background: var(--accent); color: #1f1306; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .1em; font-weight: 400; border-bottom: 3px solid #1f1306; } .tpl-dealz .hdr { background: var(--brand); border-bottom: 4px solid #1f1306; backdrop-filter: none; } .tpl-dealz .hdr .brand, .tpl-dealz .hdr .icon-link, .tpl-dealz .hdr .hdr-search .i { color: #fff; } .tpl-dealz .hdr .brand { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2em; letter-spacing: .04em; text-transform: uppercase; } .tpl-dealz .hdr-search input[type=search] { background: #fff !important; border: 3px solid #1f1306 !important; border-radius: 6px !important; color: #1f1306; } .tpl-dealz .nav-bar { background: #1f1306; border-top: 0; } .tpl-dealz .nav-bar .wrap { justify-content: center; gap: 0; } .tpl-dealz .nav-link { color: #fff3c4; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .08em; padding: 10px 16px; } .tpl-dealz .nav-link:hover, .tpl-dealz .nav-link.active { background: var(--accent); color: #1f1306; } .tpl-dealz .nav-link.active::after { content: none; } .tpl-dealz .hero { background: var(--brand); } .tpl-dealz .hero-bg { left: 36%; opacity: 1; background-position: center 40%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .tpl-dealz .hero::after { content: none; } .tpl-dealz .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3; background: repeating-linear-gradient(135deg, var(--accent) 0 14px, #1f1306 14px 28px); } .tpl-dealz .hero-in { max-width: 560px; padding: 92px 0 104px; } .tpl-dealz .hero h1 { color: #fff; font-size: clamp(54px, 8vw, 118px); line-height: .88; text-shadow: 4px 4px 0 #1f1306; } .tpl-dealz .hero p { color: #ffeede; opacity: 1; font-weight: 600; } .tpl-dealz .hero .eyebrow { background: var(--accent); color: #1f1306; border-radius: 0; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .12em; font-weight: 400; backdrop-filter: none; transform: rotate(-3deg); box-shadow: 4px 4px 0 #1f1306; } .tpl-dealz .btn { border-radius: 6px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .06em; border: 3px solid #1f1306; box-shadow: 4px 4px 0 #1f1306; } .tpl-dealz .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1f1306; } .tpl-dealz .btn-primary { background: var(--brand); color: #fff; } .tpl-dealz .btn-accent { background: var(--accent); color: #1f1306; } .tpl-dealz .btn-light { background: #fff; color: #1f1306; } .tpl-dealz .section { padding: 52px 0; } .tpl-dealz .section-head { border-bottom: 0; margin-bottom: 22px; } .tpl-dealz .section-head h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1; background: var(--brand); color: #fff; padding: 4px 18px 2px; display: inline-block; transform: rotate(-1deg); box-shadow: 5px 5px 0 #1f1306; } .tpl-dealz .section-head .link-arrow { color: #1f1306; font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .08em; border-bottom: 3px solid var(--brand); } .tpl-dealz .rc-section .section-head { border-bottom: 0; } .tpl-dealz .rc-section .section-head h2 { border-bottom: 0; padding-bottom: 2px; font-size: clamp(30px, 4vw, 48px) !important; text-transform: uppercase; letter-spacing: .02em; } .tpl-dealz .section-alt { background: var(--bg-2); } .tpl-dealz .rc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .tpl-dealz .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 240px); } .tpl-dealz .rc-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 240px)); } .tpl-dealz .rc-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 240px)); } .tpl-dealz .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .tpl-dealz .rc-card, .tpl-dealz .p-card { position: relative; background: #fff; border: 3px solid #1f1306; border-top: 8px solid var(--accent); border-radius: 8px; padding: 10px 10px 12px; box-shadow: 5px 5px 0 #1f1306; transition: .12s; } .tpl-dealz .rc-card:hover, .tpl-dealz .p-card:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #1f1306; } .tpl-dealz .rc-img, .tpl-dealz .p-img { border-radius: 4px; aspect-ratio: 1/1; background: #fff8d6; border: 2px solid #1f1306; } .tpl-dealz .rc-name, .tpl-dealz .p-name { font-family: 'Bebas Neue', sans-serif; font-weight: 400 !important; font-size: 19px !important; letter-spacing: .03em !important; line-height: 1.05; margin: 10px 0 4px !important; text-align: left; } .tpl-dealz .rc-chip { text-align: left; } .tpl-dealz .rc-chip span { background: #fff1b8; border: 1.5px solid #1f1306; border-radius: 3px; font-weight: 800; text-transform: uppercase; font-size: 9px; letter-spacing: .06em; } .tpl-dealz .rc-price { justify-content: flex-start; align-items: baseline; } .tpl-dealz .rc-price b, .tpl-dealz .price b { color: var(--brand); font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .02em; } .tpl-dealz .rc-price s { color: var(--ink-3); font-weight: 700; } .tpl-dealz .rc-btn { border-radius: 4px; border: 3px solid #1f1306; color: #1f1306; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .06em; height: 36px; background: #fff; } .tpl-dealz .rc-btn:hover { background: #1f1306; color: #fff; } .tpl-dealz .rc-btn-main { background: var(--accent); color: #1f1306; } .tpl-dealz .rc-tag, .tpl-dealz .tag { top: -14px; left: -14px; width: 56px; height: 56px; display: grid; place-items: center; text-align: center; padding: 0; background: var(--brand); color: #fff; border: 0; border-radius: 0; clip-path: var(--burst); font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 14px; line-height: .95; letter-spacing: .02em; box-shadow: none; transform: rotate(-12deg); z-index: 5; text-transform: uppercase; } .tpl-dealz .rc-tag-out { background: #444; } .tpl-dealz .rc-heart { top: 8px; right: 8px; } .tpl-dealz .cat-grid { gap: 14px; } .tpl-dealz .cat-tile { aspect-ratio: 4/3; border-radius: 6px; border: 3px solid #1f1306; box-shadow: 5px 5px 0 #1f1306; } .tpl-dealz .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(31,19,6,.88)); } .tpl-dealz .cat-tile h3 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .04em; } .tpl-dealz .cat-tile .arr { border-radius: 4px; background: var(--accent); color: #1f1306; } .tpl-dealz .trust { background: var(--accent); border-top: 3px solid #1f1306; border-bottom: 3px solid #1f1306; } .tpl-dealz .trust-item { border-color: #1f1306; } .tpl-dealz .trust-item span { color: #5d4412; } .tpl-dealz .trust-item .ic { background: #1f1306; color: var(--accent); border-radius: 4px; } .tpl-dealz .main-img { border: 3px solid #1f1306; border-radius: 8px; box-shadow: 6px 6px 0 #1f1306; background: #fff8d6; } .tpl-dealz .pd-info h1 { font-size: clamp(38px, 5vw, 64px); line-height: .92; } .tpl-dealz .foot { background: #1f1306; border-top: 8px solid var(--accent); color: #e8d9a8; } .tpl-dealz .foot h4 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; color: var(--accent); font-size: 22px; letter-spacing: .08em; text-transform: none; } .tpl-dealz .foot a { color: #e8d9a8; } @media (max-width: 1100px) { .tpl-dealz .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpl-dealz .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .tpl-dealz .hero-bg { left: 0; opacity: .35; clip-path: none; } .tpl-dealz .hero-in { padding: 56px 0 64px; } } @media (max-width: 760px) { .tpl-dealz .rc-grid, .tpl-dealz .rc-grid[data-count="2"], .tpl-dealz .rc-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-dealz .rc-grid[data-count="1"] { grid-template-columns: minmax(0, 240px); } .tpl-dealz .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpl-dealz .rc-tag, .tpl-dealz .tag { left: -8px; } } .tpl-dealz .hero:has(.hero-stock) { background: var(--brand); } @media (max-width: 560px) { .tpl-voltage .rc-actions, .tpl-blueprint .rc-actions, .tpl-gizmo .rc-actions, .tpl-dealz .rc-actions { grid-template-columns: 1fr; } .tpl-voltage .rc-btn, .tpl-blueprint .rc-btn, .tpl-gizmo .rc-btn { letter-spacing: .03em; padding: 0 4px; } } .tpl-blueprint .rc-card .rc-name { display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none; line-height: 1.1; word-break: break-word; } .tpl-blueprint .rc-card .rc-name { word-break: normal; overflow-wrap: normal; font-size: 19px !important; padding: 10px 10px; } .tpl-blueprint .rc-card .rc-price { padding: 10px 8px; } .tpl-blueprint .rc-card .rc-price b { font-size: 14px; } .tpl-blueprint .rc-card .rc-price s { display: none; } .tpl-blueprint .rc-card, .tpl-blueprint .p-card { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; } .tpl-blueprint .rc-card > * { min-width: 0; } @media (max-width: 560px) { .tpl-blueprint .rc-card .rc-name { font-size: 16px !important; padding: 8px 8px; } .tpl-blueprint .rc-card .rc-price b { font-size: 12.5px; } .tpl-blueprint .rc-card .rc-price { padding: 8px 6px; } } /* ===================================================================================================================================== Gifts and Personalised Items (batch 7): Ribbon (corner ribbons), Confetti (party stickers), Keepsake (scrapbook polaroids), Monogram (engraved initials), Hamper (kraft tags and stitching) ===================================================================================================================================== */ /* ---------- Ribbon: gift-box. Red satchel ribbon down the banner, red corner ribbons on cards, gold hairlines, bow-tag badges ---------- */ .tpl-ribbon { --bg: #fffaf7; --bg-2: #fbefe9; --line: #f0d9d0; --ink: #3a1a1c; --ink-2: #6e4a4c; --ink-3: #a58a88; --r: 6px; --r-lg: 10px; --r-sm: 4px; } .tpl-ribbon h1, .tpl-ribbon h2, .tpl-ribbon h3, .tpl-ribbon .display { font-family: 'Marcellus', 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: .02em; } .tpl-ribbon .announce { background: var(--brand); color: #fff; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; border-bottom: 3px double var(--accent); } .tpl-ribbon .hdr { background: #fff; border-bottom: 1px solid var(--line); } .tpl-ribbon .hdr .brand { font-family: 'Marcellus', serif; color: var(--brand); letter-spacing: .06em; } .tpl-ribbon .hdr .brand::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; background: var(--brand); clip-path: polygon(0 20%, 50% 50%, 0 80%, 0 20%, 100% 20%, 50% 50%, 100% 80%, 100% 20%); vertical-align: middle; } .tpl-ribbon .hdr-search input[type=search] { background: var(--bg-2) !important; border-color: var(--line) !important; border-radius: 999px !important; } .tpl-ribbon .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-ribbon .nav-bar .wrap { justify-content: center; } .tpl-ribbon .nav-link { font-family: 'Marcellus', serif; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; color: var(--ink-2); } .tpl-ribbon .nav-link:hover, .tpl-ribbon .nav-link.active { color: var(--brand); } .tpl-ribbon .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-ribbon .hero { background: #2a0f12; min-height: 520px; display: flex; align-items: center; } .tpl-ribbon .hero-bg { opacity: .9; background-position: center 45%; } .tpl-ribbon .hero::after { background: linear-gradient(90deg, rgba(42,15,18,.82), rgba(42,15,18,.25) 60%, transparent); } .tpl-ribbon .hero::before { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; right: 14%; width: 54px; background: linear-gradient(90deg, #a30d24, var(--brand) 30%, #e0334f 50%, var(--brand) 70%, #a30d24); box-shadow: 0 0 0 2px rgba(201,162,75,.0), 0 10px 30px rgba(0,0,0,.35); pointer-events: none; } .tpl-ribbon .hero-in { max-width: 560px; padding: 90px 0; } .tpl-ribbon .hero h1 { color: #fff; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.04; } .tpl-ribbon .hero p { color: #fde9e4; opacity: 1; } .tpl-ribbon .hero .eyebrow { background: var(--accent); color: #3a1a1c; border-radius: 3px; letter-spacing: .18em; font-weight: 700; backdrop-filter: none; } .tpl-ribbon .btn { border-radius: 3px; font-family: 'Marcellus', serif; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; } .tpl-ribbon .btn-primary { background: var(--brand); color: #fff; } .tpl-ribbon .btn-primary:hover { background: #8e0b1f; } .tpl-ribbon .btn-accent { background: var(--accent); color: #3a1a1c; } .tpl-ribbon .btn-light { background: transparent; color: #fff; border: 1.5px solid #fff; } .tpl-ribbon .section-head { text-align: center; flex-direction: column; align-items: center; gap: 6px; } .tpl-ribbon .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); } .tpl-ribbon .section-head h2::after { content: ""; display: block; width: 90px; height: 7px; margin: 12px auto 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); } .tpl-ribbon .rc-section .section-head h2 { font-size: clamp(26px, 3.2vw, 40px) !important; } .tpl-ribbon .section-head .link-arrow { color: var(--brand); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; } .tpl-ribbon .section-alt { background: var(--bg-2); } .tpl-ribbon .rc-card, .tpl-ribbon .p-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px; padding: 14px 14px 16px; transition: .25s; } .tpl-ribbon .rc-card::before, .tpl-ribbon .p-card::before { content: ""; position: absolute; z-index: 3; top: 0; left: 28px; width: 18px; height: 54px; background: var(--brand); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); pointer-events: none; } .tpl-ribbon .rc-card:hover, .tpl-ribbon .p-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px -14px rgba(163,13,36,.35); border-color: var(--brand); } .tpl-ribbon .rc-img, .tpl-ribbon .p-img { border-radius: 3px; aspect-ratio: 4/5; background: var(--bg-2); } .tpl-ribbon .rc-name, .tpl-ribbon .p-name { font-family: 'Marcellus', serif; font-weight: 400 !important; font-size: 16px !important; text-align: center; letter-spacing: .01em; } .tpl-ribbon .rc-chip { text-align: center; } .tpl-ribbon .rc-chip span { background: transparent; color: var(--accent); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; font-weight: 700; padding: 0; } .tpl-ribbon .rc-price { justify-content: center; } .tpl-ribbon .rc-price b, .tpl-ribbon .price b { color: var(--brand); font-family: 'Marcellus', serif; font-size: 19px; } .tpl-ribbon .rc-btn { border-radius: 3px; border: 1px solid var(--brand); color: var(--brand); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; } .tpl-ribbon .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-ribbon .rc-btn-main { background: var(--brand); color: #fff; } .tpl-ribbon .rc-tag, .tpl-ribbon .tag { background: var(--accent); color: #3a1a1c; border-radius: 3px; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 700; box-shadow: none; left: auto; right: 10px; top: 10px; } .tpl-ribbon .rc-tag-sale { background: var(--brand); color: #fff; } .tpl-ribbon .rc-tag-out { background: #cbbab7; color: #fff; } .tpl-ribbon .rc-heart { top: 56px; } .tpl-ribbon .cat-grid { gap: 18px; } .tpl-ribbon .cat-tile { aspect-ratio: 1/1; border-radius: 4px; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--line); } .tpl-ribbon .cat-tile::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 16px; margin-left: -8px; background: var(--brand); opacity: .88; pointer-events: none; } .tpl-ribbon .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(42,15,18,.75)); } .tpl-ribbon .cat-tile .t { z-index: 2; } .tpl-ribbon .cat-tile h3 { font-family: 'Marcellus', serif; letter-spacing: .06em; } .tpl-ribbon .cat-tile .arr { background: var(--accent); color: #3a1a1c; border-radius: 3px; } .tpl-ribbon .trust { background: #fff; border-color: var(--line); } .tpl-ribbon .trust-item .ic { background: var(--brand); color: #fff; border-radius: 3px; } .tpl-ribbon .main-img { border-radius: 6px; border: 1px solid var(--line); border-top: 4px solid var(--brand); } .tpl-ribbon .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); } .tpl-ribbon .foot { background: #2a0f12; border-top: 5px solid var(--brand); } .tpl-ribbon .foot h4 { color: var(--accent); font-family: 'Marcellus', serif; letter-spacing: .14em; } @media (max-width: 860px) { .tpl-ribbon .hero { min-height: 420px; } .tpl-ribbon .hero-in { padding: 60px 0; } .tpl-ribbon .hero::before { right: 6%; width: 34px; } } .tpl-ribbon .hero:has(.hero-stock) { background: #2a0f12; } /* ---------- Confetti: party. White with scattered confetti, sticker cards with dashed colour borders that tilt on hover, pill buttons ---------- */ .tpl-confetti { --bg: #ffffff; --bg-2: #fff6ec; --line: #ffd9c2; --ink: #2b2250; --ink-2: #5a5080; --ink-3: #9a92b8; --r: 22px; --r-lg: 30px; --r-sm: 12px; --c1: #ff5d8f; --c2: #ffb300; --c3: #22c1c3; --c4: #7c5cff; --c5: #7bd957; background-image: radial-gradient(circle, var(--c1) 3px, transparent 4px), radial-gradient(circle, var(--c3) 2.5px, transparent 3.5px), radial-gradient(circle, var(--c2) 3px, transparent 4px), radial-gradient(circle, var(--c4) 2px, transparent 3px); background-size: 160px 160px, 220px 220px, 190px 190px, 130px 130px; background-position: 12px 20px, 90px 110px, 140px 60px, 50px 100px; background-attachment: fixed; } .tpl-confetti h1, .tpl-confetti h2, .tpl-confetti h3, .tpl-confetti .display { font-family: 'Lilita One', 'Baloo 2', sans-serif; font-weight: 400; letter-spacing: .01em; } .tpl-confetti .announce { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5)); color: #fff; font-family: 'Lilita One', sans-serif; letter-spacing: .08em; font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,.2); } .tpl-confetti .hdr { background: rgba(255,255,255,.94); border-bottom: 3px dashed var(--c1); } .tpl-confetti .hdr .brand { font-family: 'Lilita One', sans-serif; color: var(--c1); text-shadow: 2px 2px 0 var(--c2); letter-spacing: .02em; } .tpl-confetti .hdr-search input[type=search] { background: #fff !important; border: 2px solid var(--c4) !important; border-radius: 999px !important; } .tpl-confetti .nav-bar { background: #fff; border-top: 0; border-bottom: 0; } .tpl-confetti .nav-bar .wrap { justify-content: center; gap: 6px; } .tpl-confetti .nav-link { font-family: 'Lilita One', sans-serif; font-size: 15px; color: var(--ink-2); border-radius: 999px; padding: 6px 16px; } .tpl-confetti .nav-link:hover { background: var(--c2); color: #fff; } .tpl-confetti .nav-link.active { background: var(--c4); color: #fff; } .tpl-confetti .nav-link.active::after { content: none; } .tpl-confetti .hero { background: var(--c4); min-height: 520px; display: flex; align-items: center; border-radius: 0 0 50px 50px; overflow: hidden; } .tpl-confetti .hero-bg { inset: 0 0 0 38%; background-position: center 60%; border-radius: 40px 0 0 40px; opacity: 1; } .tpl-confetti .hero::after { background: radial-gradient(circle at 20% 30%, var(--c1) 0 9px, transparent 10px), radial-gradient(circle at 30% 80%, var(--c2) 0 7px, transparent 8px), radial-gradient(circle at 36% 20%, var(--c3) 0 6px, transparent 7px), radial-gradient(circle at 8% 70%, var(--c5) 0 8px, transparent 9px), radial-gradient(circle at 44% 60%, #fff 0 5px, transparent 6px); } .tpl-confetti .hero-in { max-width: 520px; padding: 80px 0; } .tpl-confetti .hero h1 { color: #fff; font-size: clamp(40px, 5.8vw, 76px); line-height: 1; text-shadow: 3px 3px 0 var(--c1); } .tpl-confetti .hero p { color: #fff; opacity: .95; font-weight: 600; } .tpl-confetti .hero .eyebrow { background: var(--c2); color: #2b2250; border-radius: 999px; font-family: 'Lilita One', sans-serif; letter-spacing: .08em; backdrop-filter: none; transform: rotate(-3deg); } .tpl-confetti .btn { border-radius: 999px; font-family: 'Lilita One', sans-serif; letter-spacing: .04em; font-size: 15px; box-shadow: 0 4px 0 rgba(43,34,80,.25); transition: transform .12s, box-shadow .12s; } .tpl-confetti .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43,34,80,.25); } .tpl-confetti .btn-primary { background: var(--c1); color: #fff; } .tpl-confetti .btn-accent { background: var(--c2); color: #2b2250; } .tpl-confetti .btn-light { background: #fff; color: var(--c4); } .tpl-confetti .section-head h2 { font-size: clamp(30px, 4vw, 48px); color: var(--ink); } .tpl-confetti .section-head h2::after { content: ""; display: block; width: 110px; height: 8px; margin-top: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--c1) 0 22px, var(--c2) 22px 44px, var(--c3) 44px 66px, var(--c4) 66px 88px, var(--c5) 88px 110px); } .tpl-confetti .section-head .link-arrow { color: var(--c4); font-family: 'Lilita One', sans-serif; } .tpl-confetti .section-alt { background: rgba(255,246,236,.9); } .tpl-confetti .rc-card, .tpl-confetti .p-card { background: #fff; border: 3px dashed var(--c1); border-radius: 26px; padding: 12px 12px 16px; transition: transform .2s, box-shadow .2s; box-shadow: 0 6px 0 rgba(43,34,80,.1); } .tpl-confetti .rc-grid > :nth-child(5n+2), .tpl-confetti .p-grid > :nth-child(5n+2) { border-color: var(--c2); } .tpl-confetti .rc-grid > :nth-child(5n+3), .tpl-confetti .p-grid > :nth-child(5n+3) { border-color: var(--c3); } .tpl-confetti .rc-grid > :nth-child(5n+4), .tpl-confetti .p-grid > :nth-child(5n+4) { border-color: var(--c4); } .tpl-confetti .rc-grid > :nth-child(5n), .tpl-confetti .p-grid > :nth-child(5n) { border-color: var(--c5); } .tpl-confetti .rc-card:hover, .tpl-confetti .p-card:hover { transform: rotate(-1.6deg) translateY(-6px); box-shadow: 0 12px 0 rgba(43,34,80,.12); } .tpl-confetti .rc-grid > :nth-child(even):hover, .tpl-confetti .p-grid > :nth-child(even):hover { transform: rotate(1.6deg) translateY(-6px); } .tpl-confetti .rc-img, .tpl-confetti .p-img { border-radius: 18px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-confetti .rc-name, .tpl-confetti .p-name { font-family: 'Lilita One', sans-serif; font-weight: 400 !important; font-size: 17px !important; text-align: center; } .tpl-confetti .rc-chip { text-align: center; } .tpl-confetti .rc-chip span { background: var(--bg-2); color: var(--ink-2); border-radius: 999px; font-weight: 700; } .tpl-confetti .rc-price { justify-content: center; } .tpl-confetti .rc-price b, .tpl-confetti .price b { color: var(--c1); font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 21px; } .tpl-confetti .rc-btn { border-radius: 999px; border: 2px solid var(--c4); color: var(--c4); font-family: 'Lilita One', sans-serif; font-size: 13px; letter-spacing: .02em; } .tpl-confetti .rc-btn:hover { background: var(--c4); color: #fff; } .tpl-confetti .rc-btn-main { background: var(--c1); border-color: var(--c1); color: #fff; } .tpl-confetti .rc-tag, .tpl-confetti .tag { background: var(--c2); color: #2b2250; border-radius: 999px; font-family: 'Lilita One', sans-serif; font-size: 12px; letter-spacing: .04em; box-shadow: 0 2px 0 rgba(0,0,0,.15); top: 8px; left: 8px; transform: rotate(-6deg); } .tpl-confetti .rc-tag-sale { background: var(--c1); color: #fff; } .tpl-confetti .rc-tag-out { background: #cfc9e2; color: #fff; } .tpl-confetti .cat-grid { gap: 16px; } .tpl-confetti .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 5px solid var(--c1); box-shadow: 0 6px 0 rgba(43,34,80,.12); } .tpl-confetti .cat-grid > :nth-child(5n+2) { border-color: var(--c2); } .tpl-confetti .cat-grid > :nth-child(5n+3) { border-color: var(--c3); } .tpl-confetti .cat-grid > :nth-child(5n+4) { border-color: var(--c4); } .tpl-confetti .cat-grid > :nth-child(5n) { border-color: var(--c5); } .tpl-confetti .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(43,34,80,.7)); } .tpl-confetti .cat-tile .t { justify-content: center; text-align: center; } .tpl-confetti .cat-tile h3 { font-family: 'Lilita One', sans-serif; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.3); } .tpl-confetti .cat-tile .arr { display: none; } .tpl-confetti .trust { background: transparent; border: 0; } .tpl-confetti .trust-item { background: #fff; border: 2px dashed var(--c3); border-radius: 20px; } .tpl-confetti .trust-item .ic { background: var(--c3); color: #fff; border-radius: 50%; } .tpl-confetti .main-img { border: 4px dashed var(--c1); border-radius: 30px; } .tpl-confetti .pd-info h1 { font-size: clamp(30px, 3.8vw, 50px); } .tpl-confetti .foot { background: var(--c4); border-radius: 40px 40px 0 0; } .tpl-confetti .foot h4 { color: var(--c2); font-family: 'Lilita One', sans-serif; letter-spacing: .06em; } @media (max-width: 860px) { .tpl-confetti .hero { min-height: 520px; align-items: flex-start; } .tpl-confetti .hero-bg { inset: auto 0 0 0; height: 40%; border-radius: 40px 40px 0 0; } .tpl-confetti .hero-in { padding: 40px 0 200px; } .tpl-confetti .cat-tile { border-radius: 28px; aspect-ratio: 4/3; } } .tpl-confetti .hero:has(.hero-stock) { background: var(--c4); } /* ---------- Keepsake: scrapbook. Warm paper, handwritten headings, polaroid cards at a slight tilt with tape, a pinned note on the banner ---------- */ .tpl-keepsake { --bg: #f3ead8; --bg-2: #ebdfc6; --line: #d7c6a4; --ink: #4a3626; --ink-2: #7a6048; --ink-3: #a99478; --r: 3px; --r-lg: 4px; --r-sm: 2px; --hand: 'Kalam', 'Caveat', cursive; --type: 'Special Elite', 'Courier New', monospace; background-image: repeating-linear-gradient(0deg, rgba(120,90,50,.045) 0 1px, transparent 1px 28px); } .tpl-keepsake h1, .tpl-keepsake h2, .tpl-keepsake h3, .tpl-keepsake .display { font-family: var(--hand); font-weight: 700; letter-spacing: 0; } .tpl-keepsake .announce { background: #5b4330; color: #f3ead8; font-family: var(--type); font-size: 12px; letter-spacing: .08em; } .tpl-keepsake .hdr { background: #f7f0e0; border-bottom: 2px dashed var(--line); } .tpl-keepsake .hdr .brand { font-family: var(--hand); font-weight: 700; color: var(--brand); font-size: 1.55em; transform: rotate(-2deg); } .tpl-keepsake .hdr-search input[type=search] { background: #fffdf6 !important; border: 1px solid var(--line) !important; border-radius: 2px !important; font-family: var(--type); } .tpl-keepsake .nav-bar { background: #efe3cc; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-keepsake .nav-bar .wrap { justify-content: center; } .tpl-keepsake .nav-link { font-family: var(--type); font-size: 13px; color: var(--ink-2); letter-spacing: .04em; } .tpl-keepsake .nav-link:hover, .tpl-keepsake .nav-link.active { color: var(--brand); } .tpl-keepsake .nav-link.active::after { height: 2px; background: var(--brand); } .tpl-keepsake .hero { background: #5b4330; min-height: 540px; display: flex; align-items: center; justify-content: center; } .tpl-keepsake .hero-bg { filter: sepia(.55) saturate(.9) brightness(.85); background-position: center; } .tpl-keepsake .hero::after { background: rgba(60,40,20,.35); } .tpl-keepsake .hero-in { position: relative; z-index: 4; max-width: 520px; margin: 70px auto; padding: 38px 40px 40px; background: #fbf5e6; color: var(--ink); text-align: center; border-radius: 2px; transform: rotate(-1.4deg); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(120,90,50,.13) 31px 32px); } .tpl-keepsake .hero-in::before { content: ""; position: absolute; top: -16px; left: 50%; width: 120px; height: 32px; margin-left: -60px; background: rgba(218,190,120,.75); transform: rotate(2deg); box-shadow: 0 1px 3px rgba(0,0,0,.15); } .tpl-keepsake .hero h1 { color: var(--ink); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; } .tpl-keepsake .hero p { color: var(--ink-2); opacity: 1; font-family: var(--type); font-size: 14.5px; } .tpl-keepsake .hero .eyebrow { background: transparent; color: var(--brand); border: 0; font-family: var(--type); letter-spacing: .14em; backdrop-filter: none; padding: 0; } .tpl-keepsake .hero .btn-light { background: transparent; color: var(--brand); border-color: var(--brand); } .tpl-keepsake .btn { border-radius: 2px; font-family: var(--type); letter-spacing: .06em; font-size: 13px; text-transform: lowercase; } .tpl-keepsake .btn-primary { background: var(--brand); color: #fbf5e6; box-shadow: 3px 3px 0 var(--ink); } .tpl-keepsake .btn-primary:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } .tpl-keepsake .btn-accent { background: var(--accent); color: #3a2a1b; box-shadow: 3px 3px 0 var(--ink); } .tpl-keepsake .btn-light { background: #fbf5e6; color: var(--ink); } .tpl-keepsake .section-head h2 { font-size: clamp(32px, 4.2vw, 52px); color: var(--brand); transform: rotate(-1deg); display: inline-block; } .tpl-keepsake .section-head h2::after { content: ""; display: block; height: 9px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9'%3E%3Cpath d='M1 5 Q15 0 30 5 T60 5 T90 5 T119 4' fill='none' stroke='%23a56a3a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left / 120px 9px repeat-x; } .tpl-keepsake .section-head p { font-family: var(--type); font-size: 13.5px; } .tpl-keepsake .section-head .link-arrow { font-family: var(--type); color: var(--brand); } .tpl-keepsake .section-alt { background: rgba(235,223,198,.65); } .tpl-keepsake .rc-card, .tpl-keepsake .p-card { position: relative; background: #fffdf7; border: 1px solid #e6dcc4; border-radius: 2px; padding: 12px 12px 18px; box-shadow: 0 8px 18px -8px rgba(80,55,25,.45); transition: transform .25s, box-shadow .25s; transform: rotate(-1deg); } .tpl-keepsake .rc-grid > :nth-child(even), .tpl-keepsake .p-grid > :nth-child(even) { transform: rotate(1.1deg); } .tpl-keepsake .rc-grid > :nth-child(3n), .tpl-keepsake .p-grid > :nth-child(3n) { transform: rotate(-.4deg); } .tpl-keepsake .rc-card::before, .tpl-keepsake .p-card::before { content: ""; position: absolute; z-index: 4; top: -11px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(218,190,120,.7); transform: rotate(-3deg); pointer-events: none; } .tpl-keepsake .rc-card:hover, .tpl-keepsake .p-card:hover, .tpl-keepsake .rc-grid > :nth-child(n):hover, .tpl-keepsake .p-grid > :nth-child(n):hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 18px 30px -10px rgba(80,55,25,.55); z-index: 2; } .tpl-keepsake .rc-img, .tpl-keepsake .p-img { border-radius: 0; aspect-ratio: 1/1; background: #e8dcc2; filter: sepia(.12); } .tpl-keepsake .rc-card:hover .rc-img, .tpl-keepsake .p-card:hover .p-img { filter: none; } .tpl-keepsake .rc-name, .tpl-keepsake .p-name { font-family: var(--hand); font-weight: 700 !important; font-size: 19px !important; text-align: center; color: var(--ink); } .tpl-keepsake .rc-chip { text-align: center; } .tpl-keepsake .rc-chip span { background: transparent; color: var(--ink-3); font-family: var(--type); font-size: 11px; padding: 0; letter-spacing: .06em; } .tpl-keepsake .rc-price { justify-content: center; } .tpl-keepsake .rc-price b, .tpl-keepsake .price b { color: var(--brand); font-family: var(--type); font-weight: 400; font-size: 17px; } .tpl-keepsake .rc-btn { border-radius: 2px; border: 1px dashed var(--brand); color: var(--brand); font-family: var(--type); font-size: 12px; text-transform: lowercase; letter-spacing: .04em; } .tpl-keepsake .rc-btn:hover { background: var(--brand); color: #fbf5e6; } .tpl-keepsake .rc-btn-main { background: var(--brand); color: #fbf5e6; border-style: solid; } .tpl-keepsake .rc-tag, .tpl-keepsake .tag { background: #c8553d; color: #fff; border-radius: 2px; font-family: var(--type); font-size: 11px; letter-spacing: .04em; box-shadow: 1px 2px 0 rgba(0,0,0,.25); top: 20px; left: -4px; transform: rotate(-4deg); } .tpl-keepsake .rc-tag-sale { background: #c8553d; } .tpl-keepsake .rc-tag-out { background: #9a8a74; } .tpl-keepsake .rc-heart { top: 22px; } .tpl-keepsake .cat-grid { gap: 22px; } .tpl-keepsake .cat-tile { aspect-ratio: 1/1; background: #fffdf7; border: 10px solid #fffdf7; border-radius: 2px; box-shadow: 0 8px 18px -8px rgba(80,55,25,.5); transform: rotate(-1.5deg); } .tpl-keepsake .cat-grid > :nth-child(even) { transform: rotate(1.4deg); } .tpl-keepsake .cat-tile::after { background: none; } .tpl-keepsake .cat-tile .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 6px; background: #fffdf7; justify-content: center; text-align: center; } .tpl-keepsake .cat-tile h3 { color: var(--ink); font-family: var(--hand); font-size: 21px; text-shadow: none; } .tpl-keepsake .cat-tile .arr { display: none; } .tpl-keepsake .trust { background: #efe3cc; border-color: var(--line); } .tpl-keepsake .trust-item span { font-family: var(--type); font-size: 12.5px; } .tpl-keepsake .trust-item .ic { background: transparent; border: 1.5px dashed var(--brand); color: var(--brand); border-radius: 50%; } .tpl-keepsake .main-img { background: #fffdf7; padding: 12px 12px 42px; border: 1px solid #e6dcc4; border-radius: 2px; box-shadow: 0 14px 28px -12px rgba(80,55,25,.5); transform: rotate(-.8deg); } .tpl-keepsake .pd-info h1 { font-size: clamp(32px, 4vw, 52px); } .tpl-keepsake .foot { background: #5b4330; border-top: 4px dashed #c9a67a; } .tpl-keepsake .foot h4 { font-family: var(--hand); font-size: 20px; color: #e8c890; } @media (max-width: 860px) { .tpl-keepsake .hero { min-height: 470px; } .tpl-keepsake .hero-in { margin: 50px 14px; padding: 30px 22px 32px; } } .tpl-keepsake .hero:has(.hero-stock) { background: #5b4330; } /* ---------- Monogram: engraved. Cream and navy, spaced-capital serif, double gold frames, a lettered initial badge on every card ---------- */ .tpl-monogram { --bg: #f8f5ee; --bg-2: #efeadd; --line: #d9cfb6; --ink: #14213d; --ink-2: #4a5470; --ink-3: #8b91a3; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-monogram h1, .tpl-monogram h2, .tpl-monogram h3, .tpl-monogram .display { font-family: 'Cinzel', 'Trajan Pro', serif; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .tpl-monogram .announce { background: var(--brand); color: var(--accent); font-family: 'Cinzel', serif; letter-spacing: .3em; font-size: 10.5px; text-transform: uppercase; font-weight: 600; } .tpl-monogram .hdr { background: var(--bg); border-bottom: 1px solid var(--accent); } .tpl-monogram .hdr-in { position: relative; } .tpl-monogram .hdr .brand { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); font-size: 1.2em; } .tpl-monogram .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--accent) !important; border-radius: 0 !important; } .tpl-monogram .nav-bar { background: var(--brand); border-top: 0; } .tpl-monogram .nav-bar .wrap { justify-content: center; gap: 12px; } .tpl-monogram .nav-link { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; font-weight: 600; color: #cfd5e6; } .tpl-monogram .nav-link:hover, .tpl-monogram .nav-link.active { color: var(--accent); } .tpl-monogram .nav-link.active::after { height: 1px; background: var(--accent); } .tpl-monogram .hero { background: var(--brand); min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; } .tpl-monogram .hero-bg { opacity: .5; background-position: center; } .tpl-monogram .hero::after { background: radial-gradient(ellipse at center, rgba(20,33,61,.35), rgba(20,33,61,.9)); } .tpl-monogram .hero::before { content: ""; position: absolute; inset: 22px; z-index: 3; pointer-events: none; border: 1px solid var(--accent); outline: 1px solid rgba(184,146,58,.5); outline-offset: 6px; } .tpl-monogram .hero-in { margin: 0 auto; max-width: 660px; padding: 100px 0; text-align: center; } .tpl-monogram .hero-in::before { content: "S"; display: block; margin: 0 auto 22px; width: 62px; height: 62px; line-height: 58px; border: 2px solid var(--accent); border-radius: 50%; font-family: 'Cinzel', serif; font-weight: 700; font-size: 28px; color: var(--accent); box-shadow: 0 0 0 5px var(--brand), 0 0 0 6px rgba(184,146,58,.6); } .tpl-monogram .hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.12; letter-spacing: .12em; } .tpl-monogram .hero p { color: #d4daeb; opacity: 1; } .tpl-monogram .hero .eyebrow { background: transparent; border: 0; color: var(--accent); letter-spacing: .34em; font-family: 'Cinzel', serif; backdrop-filter: none; } .tpl-monogram .btn { border-radius: 0; font-family: 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; border: 1px solid var(--brand); } .tpl-monogram .btn-primary { background: var(--brand); color: #fff; } .tpl-monogram .btn-primary:hover { background: var(--accent); border-color: var(--accent); } .tpl-monogram .btn-accent { background: var(--accent); color: #14213d; border-color: var(--accent); } .tpl-monogram .btn-accent:hover { background: #fff; } .tpl-monogram .btn-light { background: transparent; color: #fff; border-color: var(--accent); } .tpl-monogram .btn-light:hover { background: var(--accent); color: #14213d; } .tpl-monogram .section-head { text-align: center; flex-direction: column; align-items: center; gap: 4px; } .tpl-monogram .section-head h2 { font-size: clamp(22px, 2.8vw, 34px); letter-spacing: .2em; } .tpl-monogram .section-head h2::after { content: "◆"; display: block; margin-top: 10px; font-size: 11px; color: var(--accent); letter-spacing: 0; } .tpl-monogram .rc-section .section-head h2 { font-size: clamp(20px, 2.6vw, 30px) !important; letter-spacing: .2em !important; } .tpl-monogram .section-head .link-arrow { color: var(--brand); font-family: 'Cinzel', serif; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--accent); } .tpl-monogram .section-alt { background: var(--bg-2); } .tpl-monogram .rc-grid, .tpl-monogram .p-grid { counter-reset: ini; } .tpl-monogram .rc-card, .tpl-monogram .p-card { counter-increment: ini; position: relative; background: #fff; border: 1px solid var(--accent); border-radius: 0; padding: 18px 16px 18px; outline: 1px solid var(--accent); outline-offset: -7px; transition: .3s; } .tpl-monogram .rc-card::before, .tpl-monogram .p-card::before { content: counter(ini, upper-alpha); position: absolute; z-index: 4; top: 14px; left: 14px; width: 34px; height: 34px; line-height: 32px; text-align: center; border-radius: 50%; background: var(--brand); color: var(--accent); font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; border: 1px solid var(--accent); box-shadow: 0 0 0 3px #fff; } .tpl-monogram .rc-card:hover, .tpl-monogram .p-card:hover { background: #fffdf8; box-shadow: 0 18px 34px -18px rgba(20,33,61,.5); transform: translateY(-4px); } .tpl-monogram .rc-card:hover::before, .tpl-monogram .p-card:hover::before { background: var(--accent); color: var(--brand); } .tpl-monogram .rc-img, .tpl-monogram .p-img { border-radius: 0; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-monogram .rc-name, .tpl-monogram .p-name { font-family: 'Cinzel', serif; font-weight: 600 !important; font-size: 13.5px !important; text-transform: uppercase !important; letter-spacing: .12em !important; text-align: center; line-height: 1.5; } .tpl-monogram .rc-chip { text-align: center; } .tpl-monogram .rc-chip span { background: transparent; color: var(--accent); font-family: 'Cinzel', serif; letter-spacing: .22em; text-transform: uppercase; font-size: 9.5px; padding: 0; font-weight: 600; } .tpl-monogram .rc-price { justify-content: center; } .tpl-monogram .rc-price b, .tpl-monogram .price b { color: var(--brand); font-family: 'Cinzel', serif; font-weight: 600; font-size: 16px; letter-spacing: .06em; } .tpl-monogram .rc-btn { border-radius: 0; border: 1px solid var(--brand); color: var(--brand); font-family: 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; font-size: 10px; font-weight: 600; } .tpl-monogram .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-monogram .rc-btn-main { background: var(--brand); color: #fff; } .tpl-monogram .rc-tag, .tpl-monogram .tag { background: var(--accent); color: #14213d; border-radius: 0; font-family: 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; font-weight: 700; box-shadow: none; left: auto; right: 14px; top: 18px; } .tpl-monogram .rc-tag-sale { background: var(--brand); color: var(--accent); } .tpl-monogram .rc-tag-out { background: #aeb3c2; color: #fff; } .tpl-monogram .rc-heart { top: 54px; } .tpl-monogram .cat-grid { gap: 20px; } .tpl-monogram .cat-tile { aspect-ratio: 3/4; border-radius: 0; border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: -8px; } .tpl-monogram .cat-tile::after { background: linear-gradient(180deg, rgba(20,33,61,.15), rgba(20,33,61,.8)); } .tpl-monogram .cat-tile .t { justify-content: center; text-align: center; } .tpl-monogram .cat-tile h3 { font-family: 'Cinzel', serif; letter-spacing: .18em; font-size: 15px; } .tpl-monogram .cat-tile .arr { display: none; } .tpl-monogram .trust { background: #fff; border-color: var(--accent); } .tpl-monogram .trust-item span { font-family: 'Cinzel', serif; letter-spacing: .08em; font-size: 12px; } .tpl-monogram .trust-item .ic { background: transparent; border: 1px solid var(--accent); color: var(--brand); border-radius: 50%; } .tpl-monogram .main-img { border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: -8px; border-radius: 0; background: #fff; } .tpl-monogram .pd-info h1 { font-size: clamp(24px, 3vw, 38px); letter-spacing: .12em; } .tpl-monogram .foot { background: var(--brand); border-top: 1px solid var(--accent); } .tpl-monogram .foot h4 { font-family: 'Cinzel', serif; letter-spacing: .24em; color: var(--accent); font-size: 12px; } @media (max-width: 860px) { .tpl-monogram .hero { min-height: 470px; } .tpl-monogram .hero-in { padding: 70px 18px; } .tpl-monogram .hero::before { inset: 10px; } .tpl-monogram .nav-link { letter-spacing: .1em; } } .tpl-monogram .hero:has(.hero-stock) { background: var(--brand); } /* ---------- Hamper: kraft and string. Brown kraft paper, stitched card borders, a string loop and a wax-seal price on every tag, tag-shaped categories ---------- */ .tpl-hamper { --bg: #f1e4cc; --bg-2: #e8d6b5; --line: #cdb48a; --ink: #3d2417; --ink-2: #6d4a35; --ink-3: #a38565; --r: 8px; --r-lg: 12px; --r-sm: 5px; --kraft: #d4b583; background-image: radial-gradient(rgba(120,80,40,.07) 1px, transparent 1.4px); background-size: 7px 7px; } .tpl-hamper h1, .tpl-hamper h2, .tpl-hamper h3, .tpl-hamper .display { font-family: 'Abril Fatface', 'Playfair Display', serif; font-weight: 400; letter-spacing: .01em; } .tpl-hamper .announce { background: var(--brand); color: #f6e3c0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px dashed #c98a8f; } .tpl-hamper .hdr { background: #f6ebd3; border-bottom: 3px dashed var(--kraft); } .tpl-hamper .hdr .brand { font-family: 'Abril Fatface', serif; color: var(--brand); letter-spacing: .01em; } .tpl-hamper .hdr-search input[type=search] { background: #fbf4e3 !important; border: 1.5px dashed var(--kraft) !important; border-radius: 8px !important; } .tpl-hamper .nav-bar { background: var(--kraft); border-top: 0; } .tpl-hamper .nav-bar .wrap { justify-content: center; } .tpl-hamper .nav-link { font-weight: 700; color: #5a3a24; letter-spacing: .04em; } .tpl-hamper .nav-link:hover, .tpl-hamper .nav-link.active { color: var(--brand); } .tpl-hamper .nav-link.active::after { height: 3px; background: var(--brand); } .tpl-hamper .hero { background: #3d2417; min-height: 540px; display: flex; align-items: center; } .tpl-hamper .hero-bg { opacity: 1; background-position: center 40%; } .tpl-hamper .hero::after { background: linear-gradient(90deg, rgba(61,36,23,.6), transparent 60%); } .tpl-hamper .hero-in { position: relative; z-index: 4; max-width: 500px; margin-left: 6%; padding: 44px 42px 46px; background: var(--kraft); color: var(--ink); border-radius: 10px; outline: 2px dashed #8a6a3e; outline-offset: -12px; box-shadow: 0 22px 44px -14px rgba(0,0,0,.6); } .tpl-hamper .hero-in::before { content: ""; position: absolute; top: -46px; left: 50%; width: 64px; height: 64px; margin-left: -32px; border: 4px solid #8a6a3e; border-radius: 50%; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(-45deg); pointer-events: none; } .tpl-hamper .hero h1 { color: var(--brand); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; } .tpl-hamper .hero p { color: var(--ink); opacity: 1; font-weight: 500; } .tpl-hamper .hero .eyebrow { background: var(--brand); color: #f6e3c0; border-radius: 3px; letter-spacing: .16em; backdrop-filter: none; } .tpl-hamper .btn { border-radius: 6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; } .tpl-hamper .btn-primary { background: var(--brand); color: #f6e3c0; box-shadow: 0 3px 0 #4b0f1a; } .tpl-hamper .btn-primary:hover { background: #8f2535; } .tpl-hamper .btn-accent { background: #fbf4e3; color: var(--brand); border: 1.5px solid var(--brand); } .tpl-hamper .btn-light { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .tpl-hamper .section-head h2 { font-size: clamp(30px, 3.8vw, 46px); color: var(--brand); } .tpl-hamper .section-head h2::after { content: ""; display: block; margin-top: 8px; width: 120px; border-top: 3px dashed #8a6a3e; } .tpl-hamper .section-head .link-arrow { color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } .tpl-hamper .section-alt { background: rgba(232,214,181,.7); } .tpl-hamper .rc-card, .tpl-hamper .p-card { position: relative; background: #fbf4e3; border: 2px dashed #b4955f; border-radius: 10px; padding: 18px 14px 16px; margin-top: 18px; transition: transform .25s, box-shadow .25s; } .tpl-hamper .rc-card::before, .tpl-hamper .p-card::before { content: ""; position: absolute; z-index: 4; top: -20px; left: 50%; width: 22px; height: 30px; margin-left: -11px; border: 3px solid #8a6a3e; border-radius: 50%; background: transparent; pointer-events: none; } .tpl-hamper .rc-card:hover, .tpl-hamper .p-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 18px 28px -14px rgba(61,36,23,.55); border-color: var(--brand); } .tpl-hamper .rc-img, .tpl-hamper .p-img { border-radius: 6px; aspect-ratio: 1/1; background: var(--bg-2); border: 1px solid var(--line); } .tpl-hamper .rc-name, .tpl-hamper .p-name { font-family: 'Abril Fatface', serif; font-weight: 400 !important; font-size: 17px !important; text-align: center; color: var(--ink); } .tpl-hamper .rc-chip { text-align: center; } .tpl-hamper .rc-chip span { background: transparent; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; padding: 0; } .tpl-hamper .rc-price { justify-content: center; } .tpl-hamper .rc-price b, .tpl-hamper .price b { display: inline-block; background: var(--brand); color: #f6e3c0; font-family: 'Abril Fatface', serif; font-weight: 400; font-size: 17px; padding: 4px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px #f6e3c0, inset 0 0 0 3px #b8434f; } .tpl-hamper .price b { padding: 6px 20px; } .tpl-hamper .rc-btn { border-radius: 6px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; } .tpl-hamper .rc-btn:hover { background: var(--brand); color: #f6e3c0; } .tpl-hamper .rc-btn-main { background: var(--brand); color: #f6e3c0; } .tpl-hamper .rc-tag, .tpl-hamper .tag { background: #3d2417; color: #f6e3c0; border-radius: 3px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 8px; left: 8px; } .tpl-hamper .rc-tag-sale { background: var(--brand); } .tpl-hamper .rc-tag-out { background: #9b8a72; } .tpl-hamper .cat-grid { gap: 18px; } .tpl-hamper .cat-tile { aspect-ratio: 3/4; border-radius: 6px; clip-path: polygon(0 12%, 12% 0, 100% 0, 100% 100%, 0 100%); border: 0; box-shadow: none; } .tpl-hamper .cat-tile::before { content: ""; position: absolute; z-index: 3; top: 10px; left: 10px; width: 14px; height: 14px; border-radius: 50%; background: #f1e4cc; box-shadow: inset 0 0 0 3px #8a6a3e; pointer-events: none; } .tpl-hamper .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(61,36,23,.85)); } .tpl-hamper .cat-tile h3 { font-family: 'Abril Fatface', serif; font-size: 21px; } .tpl-hamper .cat-tile .arr { background: var(--brand); color: #f6e3c0; border-radius: 4px; } .tpl-hamper .trust { background: var(--kraft); border-color: #b4955f; } .tpl-hamper .trust-item span { font-weight: 600; } .tpl-hamper .trust-item .ic { background: var(--brand); color: #f6e3c0; border-radius: 50%; box-shadow: 0 0 0 2px #f6e3c0, 0 0 0 3px var(--brand); } .tpl-hamper .main-img { border: 2px dashed #b4955f; border-radius: 10px; background: #fbf4e3; padding: 8px; } .tpl-hamper .pd-info h1 { font-size: clamp(30px, 3.8vw, 48px); color: var(--brand); } .tpl-hamper .foot { background: #3d2417; border-top: 6px solid var(--kraft); } .tpl-hamper .foot h4 { font-family: 'Abril Fatface', serif; font-weight: 400; color: var(--kraft); font-size: 17px; } @media (max-width: 860px) { .tpl-hamper .hero { min-height: 480px; align-items: flex-end; } .tpl-hamper .hero-in { margin: 0 14px 28px; padding: 30px 24px 34px; } .tpl-hamper .hero::after { background: linear-gradient(0deg, rgba(61,36,23,.6), transparent 60%); } } .tpl-hamper .hero:has(.hero-stock) { background: #3d2417; } /* Gifts batch: stack the product action buttons on narrow phones so labels never overflow */ @media (max-width: 560px) { .tpl-ribbon .rc-actions, .tpl-confetti .rc-actions, .tpl-keepsake .rc-actions, .tpl-monogram .rc-actions, .tpl-hamper .rc-actions { grid-template-columns: 1fr; } .tpl-monogram .rc-btn, .tpl-ribbon .rc-btn { letter-spacing: .04em; } } /* ===================================================================================================================================== Kids, Toys and Baby (batch 8): Crayon (wax rainbow), Nimbus (soft baby clouds), Safari (jungle badges), Bricks (building-block studs), Storybook (book-cover cards) ===================================================================================================================================== */ /* ---------- Crayon: wax-crayon rainbow. Paper white, a rainbow stripe under the header, wobbly crayon borders, scribble underlines, hand lettering ---------- */ .tpl-crayon { --bg: #fffef9; --bg-2: #fff4d6; --line: #f0dfae; --ink: #2d2a4a; --ink-2: #5d5a7e; --ink-3: #9795b3; --r: 14px; --r-lg: 20px; --r-sm: 8px; --rb: linear-gradient(90deg, #e8352e 0 16.6%, #ff9f1c 16.6% 33.3%, #ffcc00 33.3% 50%, #4cc35a 50% 66.6%, #2f8fe8 66.6% 83.3%, #8a4fe0 83.3%); } .tpl-crayon h1, .tpl-crayon h2, .tpl-crayon h3, .tpl-crayon .display { font-family: 'Chewy', 'Patrick Hand', cursive; font-weight: 400; letter-spacing: .02em; } .tpl-crayon .announce { background: var(--ink); color: #fff; font-family: 'Patrick Hand', cursive; font-size: 14px; letter-spacing: .04em; } .tpl-crayon .hdr { background: #fffef9; border-bottom: 0; position: sticky; } .tpl-crayon .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rb); } .tpl-crayon .hdr .brand { font-family: 'Chewy', cursive; color: var(--brand); font-size: 1.6em; letter-spacing: .03em; transform: rotate(-2deg); } .tpl-crayon .hdr-search input[type=search] { background: #fff !important; border: 3px solid var(--ink) !important; border-radius: 14px 18px 12px 20px !important; } .tpl-crayon .nav-bar { background: #fffef9; border-top: 0; border-bottom: 0; } .tpl-crayon .nav-bar .wrap { justify-content: center; gap: 4px; } .tpl-crayon .nav-link { font-family: 'Patrick Hand', cursive; font-size: 17px; color: var(--ink); } .tpl-crayon .nav-link:hover { color: var(--brand); } .tpl-crayon .nav-link.active { color: var(--brand); } .tpl-crayon .nav-link.active::after { height: 5px; border-radius: 4px; background: var(--accent); } .tpl-crayon .hero { background: var(--accent); min-height: 520px; display: flex; align-items: center; } .tpl-crayon .hero-bg { inset: 0 0 0 40%; border-radius: 0 0 0 80px; background-position: center; } .tpl-crayon .hero::after { background: linear-gradient(90deg, var(--accent) 38%, transparent 38.1%); } .tpl-crayon .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 14px; background: var(--rb); pointer-events: none; } .tpl-crayon .hero-in { max-width: 520px; padding: 80px 0; } .tpl-crayon .hero h1 { color: var(--ink); font-size: clamp(42px, 6vw, 80px); line-height: 1; transform: rotate(-1.5deg); } .tpl-crayon .hero p { color: var(--ink); opacity: .9; font-family: 'Patrick Hand', cursive; font-size: 19px; } .tpl-crayon .hero .eyebrow { background: #fff; color: var(--brand); border: 3px solid var(--ink); border-radius: 12px 16px 10px 18px; font-family: 'Patrick Hand', cursive; font-size: 14px; letter-spacing: .06em; backdrop-filter: none; transform: rotate(-2deg); } .tpl-crayon .btn { border-radius: 14px 18px 12px 20px; border: 3px solid var(--ink); font-family: 'Chewy', cursive; letter-spacing: .04em; font-size: 16px; box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s; } .tpl-crayon .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .tpl-crayon .btn-primary { background: var(--brand); color: #fff; } .tpl-crayon .btn-accent { background: #4cc35a; color: var(--ink); } .tpl-crayon .btn-light { background: #fff; color: var(--ink); } .tpl-crayon .section-head h2 { font-size: clamp(32px, 4.2vw, 52px); color: var(--ink); position: relative; display: inline-block; } .tpl-crayon .section-head h2::after { content: ""; display: block; height: 10px; margin-top: 2px; border-radius: 6px; background: var(--rb); transform: rotate(-.8deg); } .tpl-crayon .section-head p { font-family: 'Patrick Hand', cursive; font-size: 17px; } .tpl-crayon .section-head .link-arrow { font-family: 'Chewy', cursive; color: var(--brand); font-size: 16px; } .tpl-crayon .section-alt { background: var(--bg-2); } .tpl-crayon .rc-card, .tpl-crayon .p-card { background: #fff; border: 3px solid var(--ink); border-radius: 22px 14px 24px 12px / 14px 24px 12px 22px; padding: 12px 12px 16px; box-shadow: 5px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s; } .tpl-crayon .rc-grid > :nth-child(5n+1), .tpl-crayon .p-grid > :nth-child(5n+1) { box-shadow: 5px 5px 0 #e8352e; } .tpl-crayon .rc-grid > :nth-child(5n+2), .tpl-crayon .p-grid > :nth-child(5n+2) { box-shadow: 5px 5px 0 #ff9f1c; } .tpl-crayon .rc-grid > :nth-child(5n+3), .tpl-crayon .p-grid > :nth-child(5n+3) { box-shadow: 5px 5px 0 #4cc35a; } .tpl-crayon .rc-grid > :nth-child(5n+4), .tpl-crayon .p-grid > :nth-child(5n+4) { box-shadow: 5px 5px 0 #2f8fe8; } .tpl-crayon .rc-grid > :nth-child(5n), .tpl-crayon .p-grid > :nth-child(5n) { box-shadow: 5px 5px 0 #8a4fe0; } .tpl-crayon .rc-card:hover, .tpl-crayon .p-card:hover { transform: translate(-3px, -4px) rotate(-.8deg); } .tpl-crayon .rc-img, .tpl-crayon .p-img { border-radius: 14px 10px 16px 10px; aspect-ratio: 1/1; background: var(--bg-2); border: 2px solid var(--ink); } .tpl-crayon .rc-name, .tpl-crayon .p-name { font-family: 'Patrick Hand', cursive; font-weight: 400 !important; font-size: 20px !important; text-align: center; color: var(--ink); } .tpl-crayon .rc-chip { text-align: center; } .tpl-crayon .rc-chip span { background: var(--bg-2); color: var(--ink-2); border-radius: 8px; font-family: 'Patrick Hand', cursive; font-size: 13px; } .tpl-crayon .rc-price { justify-content: center; } .tpl-crayon .rc-price b, .tpl-crayon .price b { color: var(--brand); font-family: 'Chewy', cursive; font-weight: 400; font-size: 23px; } .tpl-crayon .rc-btn { border-radius: 10px 14px 8px 14px; border: 2.5px solid var(--ink); color: var(--ink); font-family: 'Chewy', cursive; font-size: 14px; letter-spacing: .03em; } .tpl-crayon .rc-btn:hover { background: var(--accent); } .tpl-crayon .rc-btn-main { background: var(--brand); color: #fff; } .tpl-crayon .rc-tag, .tpl-crayon .tag { background: #4cc35a; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; font-family: 'Chewy', cursive; font-size: 13px; letter-spacing: .03em; box-shadow: none; top: 8px; left: 8px; transform: rotate(-5deg); } .tpl-crayon .rc-tag-sale { background: var(--accent); } .tpl-crayon .rc-tag-out { background: #ddd; color: #666; } .tpl-crayon .cat-grid { gap: 18px; } .tpl-crayon .cat-tile { aspect-ratio: 1/1; border: 4px solid var(--ink); border-radius: 26px 16px 28px 14px / 16px 28px 14px 26px; box-shadow: 5px 5px 0 var(--accent); } .tpl-crayon .cat-grid > :nth-child(5n+2) { box-shadow: 5px 5px 0 #4cc35a; } .tpl-crayon .cat-grid > :nth-child(5n+3) { box-shadow: 5px 5px 0 #2f8fe8; } .tpl-crayon .cat-grid > :nth-child(5n+4) { box-shadow: 5px 5px 0 #8a4fe0; } .tpl-crayon .cat-grid > :nth-child(5n) { box-shadow: 5px 5px 0 #e8352e; } .tpl-crayon .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(45,42,74,.8)); } .tpl-crayon .cat-tile h3 { font-family: 'Chewy', cursive; font-size: 24px; } .tpl-crayon .cat-tile .arr { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; } .tpl-crayon .trust { background: transparent; border: 0; } .tpl-crayon .trust-item { background: #fff; border: 3px solid var(--ink); border-radius: 16px 10px 18px 10px; box-shadow: 3px 3px 0 var(--ink); } .tpl-crayon .trust-item .ic { background: var(--accent); color: var(--ink); border-radius: 50%; border: 2px solid var(--ink); } .tpl-crayon .main-img { border: 4px solid var(--ink); border-radius: 26px 14px 28px 12px; box-shadow: 8px 8px 0 var(--accent); } .tpl-crayon .pd-info h1 { font-size: clamp(32px, 4vw, 54px); } .tpl-crayon .foot { background: var(--ink); border-top: 0; position: relative; } .tpl-crayon .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--rb); } .tpl-crayon .foot h4 { font-family: 'Chewy', cursive; color: var(--accent); letter-spacing: .06em; font-size: 18px; } @media (max-width: 860px) { .tpl-crayon .hero { min-height: 500px; align-items: flex-start; } .tpl-crayon .hero-bg { inset: auto 0 0 0; height: 38%; border-radius: 60px 0 0 0; } .tpl-crayon .hero::after { background: linear-gradient(180deg, var(--accent) 62%, transparent 62.1%); } .tpl-crayon .hero-in { padding: 44px 0 190px; } } .tpl-crayon .hero:has(.hero-stock) { background: var(--accent); } /* ---------- Nimbus: soft baby clouds. Powder blue and blush, cloud-puff section edges, pill-round everything, whisper shadows ---------- */ .tpl-nimbus { --bg: #f6faff; --bg-2: #eaf2fc; --line: #d8e5f5; --ink: #3a4660; --ink-2: #6a7690; --ink-3: #a3adc2; --r: 26px; --r-lg: 36px; --r-sm: 16px; } .tpl-nimbus h1, .tpl-nimbus h2, .tpl-nimbus h3, .tpl-nimbus .display { font-family: 'Quicksand', 'Nunito', sans-serif; font-weight: 700; letter-spacing: -.01em; } .tpl-nimbus .announce { background: var(--accent); color: #6b3a4b; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; } .tpl-nimbus .hdr { background: rgba(255,255,255,.9); border-bottom: 0; box-shadow: 0 6px 24px -14px rgba(91,127,181,.45); border-radius: 0 0 28px 28px; } .tpl-nimbus .hdr .brand { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--brand); letter-spacing: -.02em; } .tpl-nimbus .hdr-search input[type=search] { background: var(--bg-2) !important; border: 0 !important; border-radius: 999px !important; } .tpl-nimbus .nav-bar { background: transparent; border-top: 0; } .tpl-nimbus .nav-bar .wrap { justify-content: center; gap: 6px; } .tpl-nimbus .nav-link { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--ink-2); border-radius: 999px; padding: 6px 16px; } .tpl-nimbus .nav-link:hover { background: var(--bg-2); color: var(--brand); } .tpl-nimbus .nav-link.active { background: var(--accent); color: #6b3a4b; } .tpl-nimbus .nav-link.active::after { content: none; } .tpl-nimbus .hero { background: #dfeafa; min-height: 520px; display: flex; align-items: center; margin: 12px 14px 0; border-radius: 44px; overflow: hidden; } .tpl-nimbus .hero-bg { inset: 0 0 0 36%; background-position: center 30%; border-radius: 44% 0 0 44% / 50% 0 0 50%; } .tpl-nimbus .hero::after { background: radial-gradient(circle at 14% 18%, #fff 0 34px, transparent 35px), radial-gradient(circle at 22% 14%, #fff 0 44px, transparent 45px), radial-gradient(circle at 30% 19%, #fff 0 30px, transparent 31px), radial-gradient(circle at 10% 86%, rgba(255,255,255,.8) 0 40px, transparent 41px), radial-gradient(circle at 20% 90%, rgba(255,255,255,.8) 0 52px, transparent 53px); opacity: .9; } .tpl-nimbus .hero-in { max-width: 480px; padding: 80px 0 80px 20px; position: relative; z-index: 4; } .tpl-nimbus .hero h1 { color: #3a4660; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; } .tpl-nimbus .hero p { color: #55607c; opacity: 1; font-weight: 500; } .tpl-nimbus .hero .eyebrow { background: #fff; color: var(--brand); border-radius: 999px; font-weight: 700; letter-spacing: .06em; backdrop-filter: none; box-shadow: 0 6px 16px -8px rgba(91,127,181,.5); } .tpl-nimbus .btn { border-radius: 999px; font-family: 'Quicksand', sans-serif; font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 20px -10px rgba(91,127,181,.7); } .tpl-nimbus .btn-primary { background: var(--brand); color: #fff; } .tpl-nimbus .btn-accent { background: var(--accent); color: #6b3a4b; } .tpl-nimbus .btn-light { background: #fff; color: var(--brand); box-shadow: 0 8px 18px -10px rgba(91,127,181,.5); } .tpl-nimbus .section-head { text-align: center; flex-direction: column; align-items: center; } .tpl-nimbus .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--ink); } .tpl-nimbus .section-head h2::after { content: "☁"; display: block; margin-top: 4px; font-size: 22px; color: var(--accent); } .tpl-nimbus .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-nimbus .section-alt { background: var(--bg-2); border-radius: 48px; margin: 0 10px; } .tpl-nimbus .rc-card, .tpl-nimbus .p-card { background: #fff; border: 0; border-radius: 30px; padding: 12px 12px 18px; box-shadow: 0 14px 30px -18px rgba(91,127,181,.55); transition: transform .3s, box-shadow .3s; } .tpl-nimbus .rc-card:hover, .tpl-nimbus .p-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(91,127,181,.65); } .tpl-nimbus .rc-img, .tpl-nimbus .p-img { border-radius: 24px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-nimbus .rc-name, .tpl-nimbus .p-name { font-family: 'Quicksand', sans-serif; font-weight: 700 !important; font-size: 16px !important; text-align: center; } .tpl-nimbus .rc-chip { text-align: center; } .tpl-nimbus .rc-chip span { background: #fde6ee; color: #a85a73; border-radius: 999px; font-weight: 600; } .tpl-nimbus .rc-price { justify-content: center; } .tpl-nimbus .rc-price b, .tpl-nimbus .price b { color: var(--brand); font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 19px; } .tpl-nimbus .rc-btn { border-radius: 999px; border: 0; background: var(--bg-2); color: var(--brand); font-weight: 700; } .tpl-nimbus .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-nimbus .rc-btn-main { background: var(--brand); color: #fff; } .tpl-nimbus .rc-tag, .tpl-nimbus .tag { background: var(--accent); color: #6b3a4b; border-radius: 999px; font-weight: 700; box-shadow: none; top: 12px; left: 12px; } .tpl-nimbus .rc-tag-sale { background: #ffd6e1; } .tpl-nimbus .rc-tag-out { background: #e1e6f0; color: #8a93a8; } .tpl-nimbus .cat-grid { gap: 20px; } .tpl-nimbus .cat-tile { aspect-ratio: 1/1.1; border-radius: 999px 999px 36px 36px; box-shadow: 0 14px 30px -18px rgba(91,127,181,.6); } .tpl-nimbus .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(58,70,96,.7)); } .tpl-nimbus .cat-tile .t { justify-content: center; text-align: center; } .tpl-nimbus .cat-tile h3 { font-family: 'Quicksand', sans-serif; font-size: 19px; } .tpl-nimbus .cat-tile .arr { display: none; } .tpl-nimbus .trust { background: transparent; border: 0; } .tpl-nimbus .trust-item { background: #fff; border: 0; border-radius: 24px; box-shadow: 0 12px 26px -18px rgba(91,127,181,.6); } .tpl-nimbus .trust-item .ic { background: #fde6ee; color: #a85a73; border-radius: 50%; } .tpl-nimbus .main-img { border-radius: 36px; box-shadow: 0 20px 44px -22px rgba(91,127,181,.6); border: 0; } .tpl-nimbus .pd-info h1 { font-size: clamp(28px, 3.6vw, 44px); } .tpl-nimbus .foot { background: #3a4660; border-radius: 44px 44px 0 0; margin-top: 30px; } .tpl-nimbus .foot h4 { color: var(--accent); font-family: 'Quicksand', sans-serif; } @media (max-width: 860px) { .tpl-nimbus .hero { min-height: 500px; align-items: flex-start; margin: 8px 8px 0; border-radius: 32px; } .tpl-nimbus .hero-bg { inset: auto 0 0 0; height: 40%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; } .tpl-nimbus .hero-in { padding: 44px 20px 200px; } } .tpl-nimbus .hero:has(.hero-stock) { background: #dfeafa; } /* ---------- Safari: jungle badges. Deep leaf green with sunset orange, leaf-cut cards, badge-shaped tags, bold slab display type ---------- */ .tpl-safari { --bg: #f7f3e6; --bg-2: #ece4c9; --line: #d8cd9f; --ink: #1f3a24; --ink-2: #4a6248; --ink-3: #8c9a7c; --r: 8px; --r-lg: 14px; --r-sm: 4px; --leaf: 28px 4px 28px 4px; } .tpl-safari h1, .tpl-safari h2, .tpl-safari h3, .tpl-safari .display { font-family: 'Chango', 'Rubik', sans-serif; font-weight: 400; letter-spacing: .01em; } .tpl-safari .announce { background: var(--accent); color: #2a1604; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; } .tpl-safari .hdr { background: var(--brand); border-bottom: 5px solid var(--accent); } .tpl-safari .hdr .brand { font-family: 'Chango', sans-serif; color: #fff; font-size: 1.25em; } .tpl-safari .hdr .icon-link, .tpl-safari .hdr .hdr-search .i { color: #fff; } .tpl-safari .hdr-search input[type=search] { background: #fff !important; border: 0 !important; border-radius: 999px !important; } .tpl-safari .nav-bar { background: #214f2b; border-top: 0; } .tpl-safari .nav-bar .wrap { justify-content: center; } .tpl-safari .nav-link { color: #d9e8c8; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; } .tpl-safari .nav-link:hover, .tpl-safari .nav-link.active { color: var(--accent); } .tpl-safari .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-safari .hero { background: #1f3a24; min-height: 540px; display: flex; align-items: center; } .tpl-safari .hero-bg { opacity: .85; background-position: center 55%; } .tpl-safari .hero::after { background: linear-gradient(90deg, rgba(31,58,36,.92), rgba(31,58,36,.45) 55%, rgba(31,58,36,.1)); } .tpl-safari .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 28px; background: radial-gradient(circle at 14px 28px, var(--bg) 14px, transparent 15px) 0 0 / 28px 28px repeat-x; pointer-events: none; } .tpl-safari .hero-in { max-width: 560px; padding: 90px 0; } .tpl-safari .hero h1 { color: #fff; font-size: clamp(36px, 5.2vw, 68px); line-height: 1.05; text-shadow: 3px 3px 0 #214f2b; } .tpl-safari .hero p { color: #e6f0d6; opacity: 1; font-weight: 500; } .tpl-safari .hero .eyebrow { background: var(--accent); color: #2a1604; border-radius: 999px; font-weight: 800; letter-spacing: .14em; backdrop-filter: none; } .tpl-safari .btn { border-radius: 999px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; border: 3px solid #1f3a24; box-shadow: 0 4px 0 #1f3a24; transition: transform .1s, box-shadow .1s; } .tpl-safari .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f3a24; } .tpl-safari .btn-primary { background: var(--accent); color: #2a1604; } .tpl-safari .btn-accent { background: #fff; color: var(--brand); } .tpl-safari .btn-light { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 4px 0 rgba(255,255,255,.35); } .tpl-safari .section-head h2 { font-size: clamp(26px, 3.4vw, 42px); color: var(--brand); } .tpl-safari .section-head h2::after { content: ""; display: block; height: 8px; margin-top: 6px; width: 120px; background: radial-gradient(circle at 8px 8px, var(--accent) 6px, transparent 7px) 0 0 / 20px 8px repeat-x; } .tpl-safari .section-head .link-arrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; filter: brightness(.85); } .tpl-safari .section-alt { background: var(--bg-2); } .tpl-safari .rc-card, .tpl-safari .p-card { background: #fffdf3; border: 3px solid var(--brand); border-radius: var(--leaf); padding: 14px 14px 16px; transition: transform .25s, box-shadow .25s; } .tpl-safari .rc-card:hover, .tpl-safari .p-card:hover { transform: translateY(-5px) rotate(-.7deg); box-shadow: 0 6px 0 var(--accent), 0 16px 28px -12px rgba(31,58,36,.5); } .tpl-safari .rc-img, .tpl-safari .p-img { border-radius: 22px 3px 22px 3px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-safari .rc-name, .tpl-safari .p-name { font-family: 'Chango', sans-serif; font-weight: 400 !important; font-size: 14px !important; text-align: center; color: var(--brand); letter-spacing: .02em; } .tpl-safari .rc-chip { text-align: center; } .tpl-safari .rc-chip span { background: var(--bg-2); color: var(--ink-2); border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } .tpl-safari .rc-price { justify-content: center; } .tpl-safari .rc-price b, .tpl-safari .price b { color: #c4560a; font-family: 'Chango', sans-serif; font-weight: 400; font-size: 18px; } .tpl-safari .rc-btn { border-radius: 999px; border: 2.5px solid var(--brand); color: var(--brand); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; } .tpl-safari .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-safari .rc-btn-main { background: var(--accent); border-color: #1f3a24; color: #2a1604; } .tpl-safari .rc-tag, .tpl-safari .tag { background: var(--accent); color: #2a1604; border-radius: 999px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; box-shadow: 0 2px 0 #1f3a24; border: 2px solid #1f3a24; top: 10px; left: 10px; } .tpl-safari .rc-tag-sale { background: #e8463a; color: #fff; } .tpl-safari .rc-tag-out { background: #b8b49c; color: #fff; } .tpl-safari .cat-grid { gap: 18px; } .tpl-safari .cat-tile { aspect-ratio: 1/1; border-radius: 40px 6px 40px 6px; border: 4px solid var(--brand); } .tpl-safari .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(31,58,36,.9)); } .tpl-safari .cat-tile h3 { font-family: 'Chango', sans-serif; font-size: 18px; } .tpl-safari .cat-tile .arr { background: var(--accent); color: #2a1604; border-radius: 50%; } .tpl-safari .trust { background: #214f2b; border-color: #214f2b; } .tpl-safari .trust-item { border-color: rgba(255,255,255,.18); color: #e6f0d6; } .tpl-safari .trust-item small, .tpl-safari .trust-item span { color: #c8dab4; } .tpl-safari .trust-item b, .tpl-safari .trust-item strong { color: #fff; } .tpl-safari .trust-item .ic { background: var(--accent); color: #2a1604; border-radius: 50%; } .tpl-safari .main-img { border: 4px solid var(--brand); border-radius: 44px 6px 44px 6px; } .tpl-safari .pd-info h1 { font-size: clamp(26px, 3.2vw, 40px); color: var(--brand); } .tpl-safari .foot { background: #1f3a24; border-top: 8px solid var(--accent); } .tpl-safari .foot h4 { font-family: 'Chango', sans-serif; color: var(--accent); font-weight: 400; font-size: 15px; } @media (max-width: 860px) { .tpl-safari .hero { min-height: 470px; } .tpl-safari .hero-in { padding: 60px 0; } } .tpl-safari .hero:has(.hero-stock) { background: #1f3a24; } /* ---------- Bricks: building blocks. Primary red/yellow/blue, square block cards with a row of studs on top, chunky pressable tags, plate-coloured sections ---------- */ .tpl-bricks { --bg: #f4f4f1; --bg-2: #e9e9e4; --line: #d4d4cc; --ink: #1b1b1b; --ink-2: #4a4a48; --ink-3: #8d8d88; --r: 4px; --r-lg: 6px; --r-sm: 2px; --y: #ffd500; --b: #006cb7; --stud: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 5px, rgba(0,0,0,.18) 5.5px 7px, transparent 7.5px); } .tpl-bricks h1, .tpl-bricks h2, .tpl-bricks h3, .tpl-bricks .display { font-family: 'Luckiest Guy', 'Bangers', sans-serif; font-weight: 400; letter-spacing: .04em; } .tpl-bricks .announce { background: var(--b); color: #fff; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; } .tpl-bricks .hdr { background: var(--y); border-bottom: 5px solid var(--ink); } .tpl-bricks .hdr .brand { font-family: 'Luckiest Guy', sans-serif; color: var(--brand); letter-spacing: .05em; text-shadow: 2px 2px 0 #fff; font-size: 1.4em; } .tpl-bricks .hdr-search input[type=search] { background: #fff !important; border: 3px solid var(--ink) !important; border-radius: 4px !important; } .tpl-bricks .nav-bar { background: var(--brand); border-top: 0; } .tpl-bricks .nav-bar .wrap { justify-content: center; } .tpl-bricks .nav-link { color: #fff; font-family: 'Luckiest Guy', sans-serif; letter-spacing: .08em; font-size: 15px; } .tpl-bricks .nav-link:hover, .tpl-bricks .nav-link.active { color: var(--y); } .tpl-bricks .nav-link.active::after { height: 4px; background: var(--y); } .tpl-bricks .hero { background: var(--b); min-height: 540px; display: flex; align-items: center; } .tpl-bricks .hero-bg { inset: 0 0 0 42%; background-position: center; border-left: 8px solid var(--ink); } .tpl-bricks .hero::after { background: var(--stud) 0 0 / 40px 40px, linear-gradient(90deg, var(--b) 42%, transparent 42.1%); background-blend-mode: normal; } .tpl-bricks .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--brand) 0 80px, var(--y) 80px 160px, #fff 160px 240px, var(--ink) 240px 320px); pointer-events: none; } .tpl-bricks .hero-in { max-width: 520px; padding: 90px 0; } .tpl-bricks .hero h1 { color: #fff; font-size: clamp(42px, 6vw, 84px); line-height: .98; text-shadow: 4px 4px 0 var(--ink); } .tpl-bricks .hero p { color: #fff; opacity: .95; font-weight: 600; } .tpl-bricks .hero .eyebrow { background: var(--y); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; font-family: 'Luckiest Guy', sans-serif; letter-spacing: .1em; backdrop-filter: none; } .tpl-bricks .btn { border-radius: 4px; font-family: 'Luckiest Guy', sans-serif; letter-spacing: .08em; font-size: 16px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .08s, box-shadow .08s; } .tpl-bricks .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); } .tpl-bricks .btn-primary { background: var(--brand); color: #fff; } .tpl-bricks .btn-accent { background: var(--y); color: var(--ink); } .tpl-bricks .btn-light { background: #fff; color: var(--ink); } .tpl-bricks .section-head { border-bottom: 5px solid var(--ink); padding-bottom: 8px; } .tpl-bricks .section-head h2 { font-size: clamp(28px, 3.8vw, 46px); } .tpl-bricks .section-head h2::before { content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 12px; vertical-align: -3px; background: var(--y); border: 3px solid var(--ink); border-radius: 3px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.5); } .tpl-bricks .section-head .link-arrow { font-family: 'Luckiest Guy', sans-serif; letter-spacing: .06em; color: var(--b); font-size: 15px; } .tpl-bricks .section-alt { background: var(--bg-2); } .tpl-bricks .rc-card, .tpl-bricks .p-card { position: relative; background: #fff; border: 4px solid var(--ink); border-radius: 4px; padding: 30px 12px 14px; margin-top: 0; box-shadow: 0 6px 0 var(--ink); transition: transform .12s, box-shadow .12s; } .tpl-bricks .rc-card::before, .tpl-bricks .p-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--stud) 0 0 / 34px 22px repeat-x, var(--brand); border-bottom: 4px solid var(--ink); } .tpl-bricks .rc-grid > :nth-child(4n+2)::before, .tpl-bricks .p-grid > :nth-child(4n+2)::before { background: var(--stud) 0 0 / 34px 22px repeat-x, var(--y); } .tpl-bricks .rc-grid > :nth-child(4n+3)::before, .tpl-bricks .p-grid > :nth-child(4n+3)::before { background: var(--stud) 0 0 / 34px 22px repeat-x, var(--b); } .tpl-bricks .rc-grid > :nth-child(4n)::before, .tpl-bricks .p-grid > :nth-child(4n)::before { background: var(--stud) 0 0 / 34px 22px repeat-x, #2aa84a; } .tpl-bricks .rc-card:hover, .tpl-bricks .p-card:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); } .tpl-bricks .rc-img, .tpl-bricks .p-img { border-radius: 2px; aspect-ratio: 1/1; background: var(--bg-2); border: 3px solid var(--ink); } .tpl-bricks .rc-name, .tpl-bricks .p-name { font-family: 'Luckiest Guy', sans-serif; font-weight: 400 !important; font-size: 17px !important; letter-spacing: .04em !important; text-align: left; } .tpl-bricks .rc-chip { text-align: left; } .tpl-bricks .rc-chip span { background: var(--ink); color: var(--y); border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } .tpl-bricks .rc-price { justify-content: flex-start; } .tpl-bricks .rc-price b, .tpl-bricks .price b { color: var(--brand); font-family: 'Luckiest Guy', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .03em; } .tpl-bricks .rc-btn { border-radius: 3px; border: 3px solid var(--ink); color: var(--ink); font-family: 'Luckiest Guy', sans-serif; font-size: 13px; letter-spacing: .06em; } .tpl-bricks .rc-btn:hover { background: var(--y); } .tpl-bricks .rc-btn-main { background: var(--brand); color: #fff; } .tpl-bricks .rc-tag, .tpl-bricks .tag { background: var(--y); color: var(--ink); border: 3px solid var(--ink); border-radius: 2px; font-family: 'Luckiest Guy', sans-serif; letter-spacing: .06em; font-size: 12px; box-shadow: none; top: 34px; left: 8px; } .tpl-bricks .rc-tag-sale { background: var(--brand); color: #fff; } .tpl-bricks .rc-tag-out { background: #bbb; color: #555; } .tpl-bricks .rc-heart { top: 34px; } .tpl-bricks .cat-grid { gap: 14px; } .tpl-bricks .cat-tile { aspect-ratio: 1/1; border: 5px solid var(--ink); border-radius: 4px; box-shadow: 0 6px 0 var(--ink); } .tpl-bricks .cat-tile::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 20px; background: var(--stud) 0 0 / 34px 20px repeat-x, var(--y); border-bottom: 4px solid var(--ink); } .tpl-bricks .cat-grid > :nth-child(4n+2)::before { background: var(--stud) 0 0 / 34px 20px repeat-x, var(--brand); } .tpl-bricks .cat-grid > :nth-child(4n+3)::before { background: var(--stud) 0 0 / 34px 20px repeat-x, var(--b); } .tpl-bricks .cat-grid > :nth-child(4n)::before { background: var(--stud) 0 0 / 34px 20px repeat-x, #2aa84a; } .tpl-bricks .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78)); } .tpl-bricks .cat-tile .t { z-index: 2; } .tpl-bricks .cat-tile h3 { font-family: 'Luckiest Guy', sans-serif; font-size: 22px; letter-spacing: .05em; } .tpl-bricks .cat-tile .arr { background: var(--y); color: var(--ink); border: 3px solid var(--ink); border-radius: 3px; } .tpl-bricks .trust { background: var(--y); border-color: var(--ink); border-width: 4px 0; } .tpl-bricks .trust-item { border-color: var(--ink); } .tpl-bricks .trust-item .ic { background: var(--brand); color: #fff; border: 3px solid var(--ink); border-radius: 3px; } .tpl-bricks .main-img { border: 5px solid var(--ink); border-radius: 4px; box-shadow: 0 8px 0 var(--ink); } .tpl-bricks .pd-info h1 { font-size: clamp(30px, 3.8vw, 50px); } .tpl-bricks .foot { background: var(--ink); border-top: 8px solid var(--brand); } .tpl-bricks .foot h4 { font-family: 'Luckiest Guy', sans-serif; color: var(--y); letter-spacing: .08em; font-size: 17px; font-weight: 400; } @media (max-width: 860px) { .tpl-bricks .hero { min-height: 500px; align-items: flex-start; } .tpl-bricks .hero-bg { inset: auto 0 0 0; height: 38%; border-left: 0; border-top: 8px solid var(--ink); } .tpl-bricks .hero::after { background: var(--stud) 0 0 / 40px 40px, linear-gradient(180deg, var(--b) 62%, transparent 62.1%); } .tpl-bricks .hero-in { padding: 44px 0 190px; } } .tpl-bricks .hero:has(.hero-stock) { background: var(--b); } /* ---------- Storybook: book covers. Sky blue and cream, every card is a hardback with a spine and ribbon bookmark, serif story type, open-book banner ---------- */ .tpl-storybook { --bg: #fdf8ee; --bg-2: #e9f1fb; --line: #d5e0f0; --ink: #26335c; --ink-2: #55648c; --ink-3: #9aa6c4; --r: 6px; --r-lg: 10px; --r-sm: 3px; } .tpl-storybook h1, .tpl-storybook h2, .tpl-storybook h3, .tpl-storybook .display { font-family: 'Merienda', 'Georgia', serif; font-weight: 700; letter-spacing: 0; } .tpl-storybook .announce { background: var(--accent); color: #3a2a05; font-family: 'Merienda', serif; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; } .tpl-storybook .hdr { background: #fff; border-bottom: 2px solid var(--accent); } .tpl-storybook .hdr .brand { font-family: 'Merienda', serif; color: var(--brand); font-weight: 700; } .tpl-storybook .hdr-search input[type=search] { background: var(--bg-2) !important; border: 1.5px solid var(--line) !important; border-radius: 999px !important; } .tpl-storybook .nav-bar { background: var(--brand); border-top: 0; } .tpl-storybook .nav-bar .wrap { justify-content: center; } .tpl-storybook .nav-link { color: #dfe7fb; font-family: 'Merienda', serif; font-size: 13px; font-weight: 600; } .tpl-storybook .nav-link:hover, .tpl-storybook .nav-link.active { color: var(--accent); } .tpl-storybook .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-storybook .hero { background: #cfe0f7; min-height: 540px; display: flex; align-items: center; justify-content: center; } .tpl-storybook .hero-bg { inset: 40px 6%; border-radius: 8px; box-shadow: 0 24px 50px -20px rgba(38,51,92,.6); background-position: center; opacity: 1; } .tpl-storybook .hero::after { content: ""; inset: 40px 6%; position: absolute; z-index: 2; border-radius: 8px; background: linear-gradient(90deg, rgba(38,51,92,.86) 0 46%, rgba(38,51,92,.05) 49.5%, rgba(0,0,0,.3) 50%, rgba(255,255,255,.12) 50.6%, transparent 54%); pointer-events: none; } .tpl-storybook .hero-in { position: relative; z-index: 4; max-width: 520px; margin-right: auto; margin-left: calc(6% + 50px); padding: 80px 0; } .tpl-storybook .hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; } .tpl-storybook .hero p { color: #dfe7fb; opacity: 1; font-style: italic; } .tpl-storybook .hero .eyebrow { background: var(--accent); color: #3a2a05; border-radius: 3px; font-family: 'Merienda', serif; font-weight: 700; letter-spacing: .06em; backdrop-filter: none; } .tpl-storybook .btn { border-radius: 6px; font-family: 'Merienda', serif; font-weight: 700; font-size: 13.5px; letter-spacing: .02em; } .tpl-storybook .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 0 #19234a; } .tpl-storybook .btn-primary:hover { background: #2c3f7e; } .tpl-storybook .btn-accent { background: var(--accent); color: #3a2a05; box-shadow: 0 4px 0 #b88a22; } .tpl-storybook .btn-light { background: #fff; color: var(--brand); } .tpl-storybook .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); color: var(--ink); } .tpl-storybook .section-head h2::before { content: "❝ "; color: var(--accent); } .tpl-storybook .section-head p { font-style: italic; } .tpl-storybook .section-head .link-arrow { font-family: 'Merienda', serif; color: var(--brand); font-weight: 700; } .tpl-storybook .section-alt { background: var(--bg-2); } .tpl-storybook .rc-card, .tpl-storybook .p-card { position: relative; background: #fff; border: 1px solid var(--line); border-left: 18px solid var(--brand); border-radius: 4px 10px 10px 4px; padding: 14px 14px 16px 12px; box-shadow: 6px 8px 0 rgba(38,51,92,.14); transition: transform .25s, box-shadow .25s; } .tpl-storybook .rc-grid > :nth-child(4n+2), .tpl-storybook .p-grid > :nth-child(4n+2) { border-left-color: #d1495b; } .tpl-storybook .rc-grid > :nth-child(4n+3), .tpl-storybook .p-grid > :nth-child(4n+3) { border-left-color: #2a9d8f; } .tpl-storybook .rc-grid > :nth-child(4n), .tpl-storybook .p-grid > :nth-child(4n) { border-left-color: #e9a23b; } .tpl-storybook .rc-card::before, .tpl-storybook .p-card::before { content: ""; position: absolute; z-index: 3; top: -3px; right: 22px; width: 14px; height: 40px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); pointer-events: none; } .tpl-storybook .rc-card:hover, .tpl-storybook .p-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 8px 14px 0 rgba(38,51,92,.16); } .tpl-storybook .rc-img, .tpl-storybook .p-img { border-radius: 3px; aspect-ratio: 4/5; background: var(--bg-2); } .tpl-storybook .rc-name, .tpl-storybook .p-name { font-family: 'Merienda', serif; font-weight: 700 !important; font-size: 15px !important; text-align: left; line-height: 1.35; color: var(--ink); } .tpl-storybook .rc-chip { text-align: left; } .tpl-storybook .rc-chip span { background: transparent; color: var(--ink-3); font-style: italic; padding: 0; font-size: 12px; } .tpl-storybook .rc-price { justify-content: flex-start; } .tpl-storybook .rc-price b, .tpl-storybook .price b { color: var(--brand); font-family: 'Merienda', serif; font-weight: 700; font-size: 18px; } .tpl-storybook .rc-btn { border-radius: 5px; border: 1.5px solid var(--brand); color: var(--brand); font-family: 'Merienda', serif; font-size: 11.5px; font-weight: 600; } .tpl-storybook .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-storybook .rc-btn-main { background: var(--brand); color: #fff; } .tpl-storybook .rc-tag, .tpl-storybook .tag { background: #d1495b; color: #fff; border-radius: 3px; font-family: 'Merienda', serif; font-size: 11px; font-weight: 700; box-shadow: none; top: 22px; left: 22px; } .tpl-storybook .rc-tag-sale { background: #d1495b; } .tpl-storybook .rc-tag-out { background: #a8b0c6; } .tpl-storybook .rc-heart { top: 22px; right: 46px; } .tpl-storybook .cat-grid { gap: 20px; } .tpl-storybook .cat-tile { aspect-ratio: 3/4; border-radius: 4px 12px 12px 4px; border-left: 16px solid var(--brand); box-shadow: 6px 8px 0 rgba(38,51,92,.14); } .tpl-storybook .cat-grid > :nth-child(4n+2) { border-left-color: #d1495b; } .tpl-storybook .cat-grid > :nth-child(4n+3) { border-left-color: #2a9d8f; } .tpl-storybook .cat-grid > :nth-child(4n) { border-left-color: #e9a23b; } .tpl-storybook .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(38,51,92,.88)); } .tpl-storybook .cat-tile h3 { font-family: 'Merienda', serif; font-size: 17px; } .tpl-storybook .cat-tile .arr { background: var(--accent); color: #3a2a05; border-radius: 3px; } .tpl-storybook .trust { background: #fff; border-color: var(--line); } .tpl-storybook .trust-item span { font-style: italic; } .tpl-storybook .trust-item .ic { background: var(--bg-2); color: var(--brand); border-radius: 50%; } .tpl-storybook .main-img { border: 1px solid var(--line); border-left: 20px solid var(--brand); border-radius: 4px 12px 12px 4px; box-shadow: 10px 12px 0 rgba(38,51,92,.14); } .tpl-storybook .pd-info h1 { font-size: clamp(26px, 3.2vw, 40px); } .tpl-storybook .foot { background: var(--ink); border-top: 6px solid var(--accent); } .tpl-storybook .foot h4 { font-family: 'Merienda', serif; color: var(--accent); } @media (max-width: 860px) { .tpl-storybook .hero { min-height: 480px; } .tpl-storybook .hero-bg, .tpl-storybook .hero::after { inset: 16px 10px; } .tpl-storybook .hero::after { background: rgba(38,51,92,.78); } .tpl-storybook .hero-in { margin: 0 28px; padding: 60px 0; } } .tpl-storybook .hero:has(.hero-stock) { background: #cfe0f7; } /* Kids batch: stack the product action buttons on narrow phones so labels never overflow */ @media (max-width: 560px) { .tpl-crayon .rc-actions, .tpl-nimbus .rc-actions, .tpl-safari .rc-actions, .tpl-bricks .rc-actions, .tpl-storybook .rc-actions { grid-template-columns: 1fr; } } /* Shared storefront additions (agriculture-ready, but available to every store): per-unit price suffix, certification badges, WhatsApp order / bulk enquiry / share row, Hindi sub-labels */ .per-unit { margin-left: 4px; font-size: .62em; font-weight: 600; opacity: .7; white-space: nowrap; } .cert-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .cert-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: #1f6b3a; background: #e8f6ec; border: 1px solid #b9e2c4; border-radius: 999px; } .wa-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; } .wa-row .btn { flex: 1 1 auto; justify-content: center; text-align: center; } .wa-row .btn-wa { background: #25d366; color: #073b1a; border-color: #25d366; font-weight: 700; flex-basis: 100%; } .wa-row .btn-wa:hover { background: #1fb957; } .wa-row .hi, .hi { font-weight: 500; opacity: .85; } @media (max-width: 560px) { .wa-row .btn { flex-basis: 100%; } } /* ===================================================================================================================================== Agriculture Products (batch 9): Beej (seed packets), Khad (fertilizer sacks), Jaivik (organic seal), Kisandirect (farm market stall), Gokul (dairy and grains), Aujar (workshop tools) ===================================================================================================================================== */ /* ---------- Beej: seed packets. Cream paper, every card is a seed packet with a zig-zag crimped top and a round label window, vintage botanical serif ---------- */ .tpl-beej { --bg: #f7f2e3; --bg-2: #efe6c8; --line: #dccf9f; --ink: #2d3a22; --ink-2: #5a6a48; --ink-3: #98a283; --r: 6px; --r-lg: 10px; --r-sm: 3px; --zig: polygon(0 12px, 4% 0, 8% 12px, 12% 0, 16% 12px, 20% 0, 24% 12px, 28% 0, 32% 12px, 36% 0, 40% 12px, 44% 0, 48% 12px, 52% 0, 56% 12px, 60% 0, 64% 12px, 68% 0, 72% 12px, 76% 0, 80% 12px, 84% 0, 88% 12px, 92% 0, 96% 12px, 100% 0, 100% 100%, 0 100%); } .tpl-beej h1, .tpl-beej h2, .tpl-beej h3, .tpl-beej .display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: .005em; } .tpl-beej .announce { background: var(--brand); color: #f7f2e3; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } .tpl-beej .hdr { background: #fbf7ea; border-bottom: 1px solid var(--line); } .tpl-beej .hdr .brand { font-family: 'DM Serif Display', serif; color: var(--brand); font-style: italic; } .tpl-beej .hdr-search input[type=search] { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 999px !important; } .tpl-beej .nav-bar { background: transparent; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-beej .nav-bar .wrap { justify-content: center; } .tpl-beej .nav-link { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--ink-2); } .tpl-beej .nav-link:hover, .tpl-beej .nav-link.active { color: var(--brand); } .tpl-beej .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-beej .hero { background: #e9dfbd; min-height: 520px; display: flex; align-items: center; } .tpl-beej .hero-bg { inset: 40px 6% 40px 50%; border-radius: 8px 8px 8px 8px; clip-path: var(--zig); background-position: center; } .tpl-beej .hero::after { content: none; } .tpl-beej .hero-in { max-width: 520px; padding: 70px 0 70px 4%; } .tpl-beej .hero h1 { color: var(--brand); font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; } .tpl-beej .hero p { color: var(--ink-2); opacity: 1; } .tpl-beej .hero .eyebrow { background: var(--accent); color: #3a2a05; border-radius: 3px; letter-spacing: .16em; backdrop-filter: none; } .tpl-beej .btn { border-radius: 999px; font-weight: 700; letter-spacing: .04em; } .tpl-beej .btn-primary { background: var(--brand); color: #fff; } .tpl-beej .btn-primary:hover { background: #245a2e; } .tpl-beej .btn-accent { background: var(--accent); color: #3a2a05; } .tpl-beej .btn-light { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); } .tpl-beej .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--brand); } .tpl-beej .section-head h2::after { content: "❦"; display: block; font-size: 18px; color: var(--accent); margin-top: 2px; } .tpl-beej .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-beej .section-alt { background: var(--bg-2); } .tpl-beej .rc-card, .tpl-beej .p-card { position: relative; background: #fffdf4; border: 0; border-radius: 0 0 10px 10px; clip-path: var(--zig); padding: 28px 14px 16px; filter: drop-shadow(0 10px 14px rgba(70,60,20,.22)); transition: transform .25s; } .tpl-beej .rc-card:hover, .tpl-beej .p-card:hover { transform: translateY(-5px) rotate(-.6deg); } .tpl-beej .rc-img, .tpl-beej .p-img { border-radius: 50% / 40%; aspect-ratio: 1/1; background: var(--bg-2); border: 3px solid var(--brand); outline: 2px solid #fffdf4; outline-offset: -8px; } .tpl-beej .rc-name, .tpl-beej .p-name { font-family: 'DM Serif Display', serif; font-weight: 400 !important; font-size: 18px !important; text-align: center; color: var(--brand); } .tpl-beej .rc-chip { text-align: center; } .tpl-beej .rc-chip span { background: transparent; color: var(--ink-3); font-style: italic; padding: 0; } .tpl-beej .rc-price { justify-content: center; } .tpl-beej .rc-price b, .tpl-beej .price b { color: #b3541a; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 21px; } .tpl-beej .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .tpl-beej .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-beej .rc-btn-main { background: var(--brand); color: #fff; } .tpl-beej .rc-tag, .tpl-beej .tag { background: var(--accent); color: #3a2a05; border-radius: 999px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 34px; left: 12px; } .tpl-beej .rc-tag-sale { background: #b3541a; color: #fff; } .tpl-beej .rc-tag-out { background: #b8b399; color: #fff; } .tpl-beej .rc-heart { top: 34px; } .tpl-beej .cat-grid { gap: 18px; } .tpl-beej .cat-tile { aspect-ratio: 3/4; border-radius: 0 0 10px 10px; clip-path: var(--zig); } .tpl-beej .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(45,58,34,.85)); } .tpl-beej .cat-tile h3 { font-family: 'DM Serif Display', serif; font-size: 22px; } .tpl-beej .cat-tile .arr { background: var(--accent); color: #3a2a05; border-radius: 50%; } .tpl-beej .trust { background: #fbf7ea; border-color: var(--line); } .tpl-beej .trust-item .ic { background: var(--brand); color: #fff; border-radius: 50%; } .tpl-beej .main-img { border-radius: 10px; border: 3px solid var(--brand); outline: 2px solid #fffdf4; outline-offset: -9px; } .tpl-beej .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); color: var(--brand); } .tpl-beej .foot { background: #2d3a22; border-top: 6px solid var(--accent); } .tpl-beej .foot h4 { font-family: 'DM Serif Display', serif; color: var(--accent); font-weight: 400; font-size: 17px; } @media (max-width: 860px) { .tpl-beej .hero { min-height: 520px; align-items: flex-start; } .tpl-beej .hero-bg { inset: auto 6% 24px 6%; height: 40%; } .tpl-beej .hero-in { padding: 40px 6% 230px; } } .tpl-beej .hero:has(.hero-stock) { background: #e9dfbd; } /* ---------- Khad: fertilizer sacks. Soil browns and lime, heavy condensed type, hazard-stripe sack headers, NPK-style spec chips, farm-industrial ---------- */ .tpl-khad { --bg: #f2efe6; --bg-2: #e4dfcf; --line: #cfc7ae; --ink: #2a2118; --ink-2: #5b4e3c; --ink-3: #9a8d75; --r: 4px; --r-lg: 6px; --r-sm: 2px; --haz: repeating-linear-gradient(-45deg, #f2b705 0 14px, #2a2118 14px 28px); } .tpl-khad h1, .tpl-khad h2, .tpl-khad h3, .tpl-khad .display { font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .tpl-khad .announce { background: var(--haz); color: #2a2118; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; text-shadow: 0 0 6px #f2b705, 0 0 3px #f2b705; } .tpl-khad .hdr { background: #2a2118; border-bottom: 4px solid var(--brand); } .tpl-khad .hdr .brand { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: 1.4em; } .tpl-khad .hdr .icon-link, .tpl-khad .hdr .hdr-search .i { color: #fff; } .tpl-khad .hdr-search input[type=search] { background: #fff !important; border: 0 !important; border-radius: 2px !important; } .tpl-khad .nav-bar { background: var(--brand); border-top: 0; } .tpl-khad .nav-bar .wrap { justify-content: center; } .tpl-khad .nav-link { color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; } .tpl-khad .nav-link:hover, .tpl-khad .nav-link.active { color: var(--accent); } .tpl-khad .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-khad .hero { background: #2a2118; min-height: 520px; display: flex; align-items: center; } .tpl-khad .hero-bg { opacity: .9; background-position: center 60%; } .tpl-khad .hero::after { background: linear-gradient(90deg, rgba(42,33,24,.92), rgba(42,33,24,.4) 60%, rgba(42,33,24,.1)); } .tpl-khad .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 16px; background: var(--haz); pointer-events: none; } .tpl-khad .hero-in { max-width: 600px; padding: 90px 0; } .tpl-khad .hero h1 { color: #fff; font-size: clamp(44px, 6.4vw, 90px); line-height: .94; } .tpl-khad .hero p { color: #eadfc8; opacity: 1; font-weight: 500; } .tpl-khad .hero .eyebrow { background: var(--accent); color: #2a2118; border-radius: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .18em; backdrop-filter: none; } .tpl-khad .btn { border-radius: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 15px; } .tpl-khad .btn-primary { background: var(--brand); color: #fff; } .tpl-khad .btn-primary:hover { background: #1f4f1f; } .tpl-khad .btn-accent { background: var(--accent); color: #2a2118; } .tpl-khad .btn-light { background: transparent; color: #fff; border: 2px solid #fff; } .tpl-khad .section-head { border-bottom: 4px solid #2a2118; padding-bottom: 6px; } .tpl-khad .section-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1; } .tpl-khad .section-head .link-arrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); } .tpl-khad .section-alt { background: var(--bg-2); } .tpl-khad .rc-card, .tpl-khad .p-card { position: relative; background: #fffdf6; border: 2px solid #2a2118; border-radius: 3px; padding: 26px 12px 14px; transition: transform .15s, box-shadow .15s; } .tpl-khad .rc-card::before, .tpl-khad .p-card::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 14px; background: var(--haz); border-radius: 3px 3px 0 0; } .tpl-khad .rc-card:hover, .tpl-khad .p-card:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 #2a2118; } .tpl-khad .rc-img, .tpl-khad .p-img { border-radius: 2px; aspect-ratio: 1/1; background: var(--bg-2); border: 2px solid #2a2118; } .tpl-khad .rc-name, .tpl-khad .p-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800 !important; font-size: 21px !important; text-transform: uppercase !important; letter-spacing: .02em !important; line-height: 1.05; } .tpl-khad .rc-chip { text-align: left; } .tpl-khad .rc-chip span { background: var(--brand); color: #fff; border-radius: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; } .tpl-khad .rc-price { justify-content: flex-start; } .tpl-khad .rc-price b, .tpl-khad .price b { color: #2a2118; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 25px; } .tpl-khad .rc-btn { border-radius: 2px; border: 2px solid #2a2118; color: #2a2118; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; } .tpl-khad .rc-btn:hover { background: var(--accent); } .tpl-khad .rc-btn-main { background: var(--brand); border-color: var(--brand); color: #fff; } .tpl-khad .rc-tag, .tpl-khad .tag { background: #c0392b; color: #fff; border-radius: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; box-shadow: none; top: 34px; left: 8px; } .tpl-khad .rc-tag-sale { background: #c0392b; } .tpl-khad .rc-tag-out { background: #8d8577; } .tpl-khad .rc-heart { top: 34px; } .tpl-khad .cat-grid { gap: 16px; } .tpl-khad .cat-tile { aspect-ratio: 4/3; border: 3px solid #2a2118; border-radius: 3px; } .tpl-khad .cat-tile::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 10px; background: var(--haz); } .tpl-khad .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(42,33,24,.9)); } .tpl-khad .cat-tile .t { z-index: 2; } .tpl-khad .cat-tile h3 { font-size: 26px; } .tpl-khad .cat-tile .arr { background: var(--accent); color: #2a2118; border-radius: 2px; } .tpl-khad .trust { background: #2a2118; border-color: #2a2118; } .tpl-khad .trust-item { border-color: rgba(255,255,255,.14); } .tpl-khad .trust-item, .tpl-khad .trust-item * { color: #eadfc8; } .tpl-khad .trust-item .ic { background: var(--accent); color: #2a2118; border-radius: 2px; } .tpl-khad .main-img { border: 3px solid #2a2118; border-radius: 3px; box-shadow: 8px 8px 0 var(--accent); } .tpl-khad .pd-info h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: .98; } .tpl-khad .foot { background: #2a2118; border-top: 14px solid transparent; border-image: var(--haz) 14; } .tpl-khad .foot h4 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-size: 16px; } @media (max-width: 860px) { .tpl-khad .hero { min-height: 440px; } .tpl-khad .hero-in { padding: 60px 0; } } .tpl-khad .hero:has(.hero-stock) { background: #2a2118; } /* ---------- Jaivik: organic seal. Sage and cream, leaf-cornered photos, a round "organic" stamp on every card, soft earthy serif ---------- */ .tpl-jaivik { --bg: #f6f4ea; --bg-2: #e6ecd6; --line: #cfd9b4; --ink: #34402a; --ink-2: #66744f; --ink-3: #a1ad88; --r: 18px; --r-lg: 28px; --r-sm: 10px; } .tpl-jaivik h1, .tpl-jaivik h2, .tpl-jaivik h3, .tpl-jaivik .display { font-family: 'Young Serif', Georgia, serif; font-weight: 400; letter-spacing: 0; } .tpl-jaivik .announce { background: #e6ecd6; color: var(--brand); font-weight: 600; letter-spacing: .04em; font-size: 12.5px; border-bottom: 1px solid var(--line); } .tpl-jaivik .hdr { background: rgba(246,244,234,.94); border-bottom: 0; } .tpl-jaivik .hdr .brand { font-family: 'Young Serif', serif; color: var(--brand); } .tpl-jaivik .hdr-search input[type=search] { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 999px !important; } .tpl-jaivik .nav-bar { background: transparent; border-top: 0; } .tpl-jaivik .nav-bar .wrap { justify-content: center; } .tpl-jaivik .nav-link { color: var(--ink-2); font-weight: 600; } .tpl-jaivik .nav-link:hover, .tpl-jaivik .nav-link.active { color: var(--brand); } .tpl-jaivik .nav-link.active::after { height: 3px; border-radius: 3px; background: var(--accent); } .tpl-jaivik .hero { background: #dbe5c3; min-height: 540px; display: flex; align-items: center; margin: 10px 16px 0; border-radius: 34px; overflow: hidden; } .tpl-jaivik .hero-bg { inset: 0 0 0 42%; border-radius: 160px 0 0 160px; background-position: center; } .tpl-jaivik .hero::after { content: ""; position: absolute; left: 2%; bottom: -60px; width: 260px; height: 260px; border-radius: 0 160px 0 160px; background: rgba(255,255,255,.35); z-index: 1; } .tpl-jaivik .hero-in { position: relative; z-index: 4; max-width: 500px; padding: 70px 0 70px 30px; } .tpl-jaivik .hero h1 { color: var(--brand); font-size: clamp(36px, 5vw, 64px); line-height: 1.06; } .tpl-jaivik .hero p { color: var(--ink-2); opacity: 1; font-weight: 500; } .tpl-jaivik .hero .eyebrow { background: #fff; color: var(--brand); border-radius: 999px; font-weight: 700; letter-spacing: .08em; backdrop-filter: none; } .tpl-jaivik .btn { border-radius: 999px; font-weight: 700; } .tpl-jaivik .btn-primary { background: var(--brand); color: #fff; } .tpl-jaivik .btn-primary:hover { background: #3f5a2d; } .tpl-jaivik .btn-accent { background: var(--accent); color: #3a2a05; } .tpl-jaivik .btn-light { background: #fff; color: var(--brand); } .tpl-jaivik .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--brand); } .tpl-jaivik .section-head h2::after { content: ""; display: block; width: 54px; height: 22px; margin-top: 6px; background: var(--accent); border-radius: 0 22px 0 22px; opacity: .85; } .tpl-jaivik .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-jaivik .section-alt { background: var(--bg-2); border-radius: 40px; margin: 0 12px; } .tpl-jaivik .rc-card, .tpl-jaivik .p-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 28px 4px 28px 4px; padding: 12px 12px 16px; transition: transform .3s, box-shadow .3s; } .tpl-jaivik .rc-card:hover, .tpl-jaivik .p-card:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -18px rgba(74,103,52,.5); } .tpl-jaivik .rc-card::before, .tpl-jaivik .p-card::before { content: "100%\A ORGANIC"; white-space: pre; position: absolute; z-index: 4; right: 14px; top: 78px; width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.35; text-align: center; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--brand); transform: rotate(-12deg); pointer-events: none; } .tpl-jaivik .rc-img, .tpl-jaivik .p-img { border-radius: 100px 6px 100px 6px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-jaivik .rc-name, .tpl-jaivik .p-name { font-family: 'Young Serif', serif; font-weight: 400 !important; font-size: 17px !important; text-align: center; color: var(--ink); } .tpl-jaivik .rc-chip { text-align: center; } .tpl-jaivik .rc-chip span { background: var(--bg-2); color: var(--brand); border-radius: 999px; font-weight: 700; } .tpl-jaivik .rc-price { justify-content: center; } .tpl-jaivik .rc-price b, .tpl-jaivik .price b { color: var(--brand); font-family: 'Young Serif', serif; font-weight: 400; font-size: 20px; } .tpl-jaivik .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; } .tpl-jaivik .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-jaivik .rc-btn-main { background: var(--brand); color: #fff; } .tpl-jaivik .rc-tag, .tpl-jaivik .tag { background: var(--accent); color: #3a2a05; border-radius: 999px; font-weight: 700; box-shadow: none; top: 18px; left: 18px; } .tpl-jaivik .rc-tag-sale { background: #d9822b; color: #fff; } .tpl-jaivik .rc-tag-out { background: #b9bfa7; color: #fff; } .tpl-jaivik .cat-grid { gap: 18px; } .tpl-jaivik .cat-tile { aspect-ratio: 1/1; border-radius: 120px 8px 120px 8px; } .tpl-jaivik .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(52,64,42,.8)); } .tpl-jaivik .cat-tile .t { justify-content: center; text-align: center; } .tpl-jaivik .cat-tile h3 { font-family: 'Young Serif', serif; font-size: 20px; } .tpl-jaivik .cat-tile .arr { display: none; } .tpl-jaivik .trust { background: transparent; border: 0; } .tpl-jaivik .trust-item { background: #fff; border: 1px solid var(--line); border-radius: 18px 4px 18px 4px; } .tpl-jaivik .trust-item .ic { background: var(--bg-2); color: var(--brand); border-radius: 50%; } .tpl-jaivik .main-img { border-radius: 140px 10px 140px 10px; } .tpl-jaivik .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); color: var(--brand); } .tpl-jaivik .foot { background: #34402a; border-radius: 40px 40px 0 0; margin-top: 28px; } .tpl-jaivik .foot h4 { font-family: 'Young Serif', serif; font-weight: 400; color: #d9e6a8; } @media (max-width: 860px) { .tpl-jaivik .hero { min-height: 520px; align-items: flex-start; margin: 8px; border-radius: 26px; } .tpl-jaivik .hero-bg { inset: auto 0 0 0; height: 40%; border-radius: 90px 90px 0 0; } .tpl-jaivik .hero-in { padding: 44px 22px 230px; } } .tpl-jaivik .hero:has(.hero-stock) { background: #dbe5c3; } /* ---------- Kisandirect: farm market stall. Striped awning under the header, chalk-lettered titles, string-hung price tags, crate-slat card frames ---------- */ .tpl-kisandirect { --bg: #fffaf0; --bg-2: #f6ecd6; --line: #e8d9b4; --ink: #2f3b1f; --ink-2: #5f6b49; --ink-3: #9ea585; --r: 8px; --r-lg: 12px; --r-sm: 4px; --awn: repeating-linear-gradient(90deg, #d6452f 0 36px, #fffaf0 36px 72px); } .tpl-kisandirect h1, .tpl-kisandirect h2, .tpl-kisandirect h3, .tpl-kisandirect .display { font-family: 'Amatic SC', 'Patrick Hand', cursive; font-weight: 700; letter-spacing: .02em; } .tpl-kisandirect .announce { background: #2f3b1f; color: #f6ecd6; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .tpl-kisandirect .hdr { background: #fffaf0; border-bottom: 0; position: relative; padding-bottom: 6px; } .tpl-kisandirect .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: var(--awn); border-radius: 0 0 14px 14px / 0 0 14px 14px; z-index: 5; box-shadow: 0 4px 8px -4px rgba(0,0,0,.25); } .tpl-kisandirect .hdr .brand { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 2em; color: var(--brand); letter-spacing: .04em; line-height: 1; } .tpl-kisandirect .hdr-search input[type=search] { background: #fff !important; border: 2px solid var(--line) !important; border-radius: 10px !important; } .tpl-kisandirect .nav-bar { background: transparent; border-top: 0; margin-top: 14px; } .tpl-kisandirect .nav-bar .wrap { justify-content: center; } .tpl-kisandirect .nav-link { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 21px; letter-spacing: .04em; color: var(--ink); } .tpl-kisandirect .nav-link:hover, .tpl-kisandirect .nav-link.active { color: #d6452f; } .tpl-kisandirect .nav-link.active::after { height: 3px; background: #d6452f; } .tpl-kisandirect .hero { background: #2f3b1f; min-height: 540px; display: flex; align-items: center; } .tpl-kisandirect .hero-bg { opacity: .8; background-position: center; } .tpl-kisandirect .hero::after { background: linear-gradient(90deg, rgba(47,59,31,.88), rgba(47,59,31,.3) 60%, transparent); } .tpl-kisandirect .hero-in { position: relative; z-index: 4; max-width: 540px; padding: 90px 0 90px 4%; } .tpl-kisandirect .hero h1 { color: #fff; font-size: clamp(50px, 7.4vw, 104px); line-height: .88; text-shadow: 2px 3px 0 rgba(0,0,0,.25); } .tpl-kisandirect .hero p { color: #f6ecd6; opacity: 1; font-size: 17px; } .tpl-kisandirect .hero .eyebrow { background: #d6452f; color: #fff; border-radius: 4px; font-weight: 800; letter-spacing: .16em; backdrop-filter: none; transform: rotate(-2deg); } .tpl-kisandirect .btn { border-radius: 8px; font-weight: 800; letter-spacing: .04em; } .tpl-kisandirect .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 0 #1f3a14; } .tpl-kisandirect .btn-accent { background: #d6452f; color: #fff; box-shadow: 0 4px 0 #8f2b1b; } .tpl-kisandirect .btn-light { background: #fffaf0; color: var(--ink); box-shadow: 0 4px 0 #d6c593; } .tpl-kisandirect .section-head h2 { font-size: clamp(40px, 5vw, 64px); color: var(--ink); line-height: 1; } .tpl-kisandirect .section-head h2::after { content: ""; display: block; height: 8px; margin-top: 2px; width: 140px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 8'%3E%3Cpath d='M2 5 Q12 0 24 4 T48 4 T72 4 T96 4 T120 4 T138 3' fill='none' stroke='%23d6452f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 140px 8px no-repeat; } .tpl-kisandirect .section-head .link-arrow { font-family: 'Amatic SC', cursive; font-size: 22px; color: #d6452f; } .tpl-kisandirect .section-alt { background: var(--bg-2); } .tpl-kisandirect .rc-card, .tpl-kisandirect .p-card { position: relative; background: #fff; border: 0; border-radius: 6px; padding: 16px 14px 16px; box-shadow: 0 0 0 5px #c79a5b, 0 0 0 7px #8f6a32, 0 14px 22px -12px rgba(70,50,20,.5); margin: 7px; transition: transform .2s; } .tpl-kisandirect .rc-card::before, .tpl-kisandirect .p-card::before { content: ""; position: absolute; z-index: 4; right: 22px; top: 40%; width: 8px; height: 40px; background: linear-gradient(#9a7a45, #9a7a45) center / 2px 100% no-repeat; pointer-events: none; display: none; } .tpl-kisandirect .rc-card:hover, .tpl-kisandirect .p-card:hover { transform: translateY(-4px) rotate(.4deg); } .tpl-kisandirect .rc-img, .tpl-kisandirect .p-img { border-radius: 4px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-kisandirect .rc-name, .tpl-kisandirect .p-name { font-family: 'Amatic SC', cursive; font-weight: 700 !important; font-size: 27px !important; line-height: 1; text-align: center; color: var(--ink); letter-spacing: .02em !important; } .tpl-kisandirect .rc-chip { text-align: center; } .tpl-kisandirect .rc-chip span { background: #eaf3d6; color: #44601f; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; } .tpl-kisandirect .rc-price { justify-content: center; } .tpl-kisandirect .rc-price b, .tpl-kisandirect .price b { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 32px; color: #d6452f; background: #fff7d6; border: 2px dashed #d6452f; border-radius: 8px; padding: 0 12px; line-height: 1.15; } .tpl-kisandirect .rc-btn { border-radius: 8px; border: 2px solid var(--brand); color: var(--brand); font-weight: 800; font-size: 11.5px; } .tpl-kisandirect .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-kisandirect .rc-btn-main { background: var(--brand); color: #fff; } .tpl-kisandirect .rc-tag, .tpl-kisandirect .tag { background: #d6452f; color: #fff; border-radius: 4px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 22px; left: 22px; transform: rotate(-4deg); } .tpl-kisandirect .rc-tag-sale { background: #d6452f; } .tpl-kisandirect .rc-tag-out { background: #a49c85; } .tpl-kisandirect .rc-heart { top: 22px; right: 22px; } .tpl-kisandirect .cat-grid { gap: 22px; } .tpl-kisandirect .cat-tile { aspect-ratio: 1/1; border-radius: 6px; box-shadow: 0 0 0 5px #c79a5b, 0 0 0 7px #8f6a32; margin: 7px; } .tpl-kisandirect .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(47,59,31,.85)); } .tpl-kisandirect .cat-tile h3 { font-family: 'Amatic SC', cursive; font-size: 34px; } .tpl-kisandirect .cat-tile .arr { background: #d6452f; color: #fff; border-radius: 4px; } .tpl-kisandirect .trust { background: #2f3b1f; border-color: #2f3b1f; } .tpl-kisandirect .trust-item { border-color: rgba(255,255,255,.15); } .tpl-kisandirect .trust-item, .tpl-kisandirect .trust-item * { color: #f6ecd6; } .tpl-kisandirect .trust-item .ic { background: #d6452f; color: #fff; border-radius: 50%; } .tpl-kisandirect .main-img { border-radius: 6px; box-shadow: 0 0 0 6px #c79a5b, 0 0 0 8px #8f6a32; margin: 8px; } .tpl-kisandirect .pd-info h1 { font-size: clamp(44px, 5.4vw, 74px); line-height: .92; } .tpl-kisandirect .foot { background: #2f3b1f; position: relative; padding-top: 14px; } .tpl-kisandirect .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--awn); } .tpl-kisandirect .foot h4 { font-family: 'Amatic SC', cursive; font-size: 26px; letter-spacing: .06em; color: #f1c55b; } @media (max-width: 860px) { .tpl-kisandirect .hero { min-height: 440px; } .tpl-kisandirect .hero-in { padding: 60px 4%; } } .tpl-kisandirect .hero:has(.hero-stock) { background: #2f3b1f; } /* ---------- Gokul: dairy and grains. Milk-white with wheat gold and sky blue, a wavy banner edge, round "bowl" photos on a gold ring, cream pill prices ---------- */ .tpl-gokul { --bg: #fdfcf6; --bg-2: #f6efd9; --line: #eadfb8; --ink: #2b3a4d; --ink-2: #5d6d82; --ink-3: #a0abbb; --r: 22px; --r-lg: 32px; --r-sm: 12px; } .tpl-gokul h1, .tpl-gokul h2, .tpl-gokul h3, .tpl-gokul .display { font-family: 'Yeseva One', Georgia, serif; font-weight: 400; letter-spacing: .005em; } .tpl-gokul .announce { background: var(--accent); color: #4a3608; font-weight: 700; letter-spacing: .06em; font-size: 12px; } .tpl-gokul .hdr { background: #fff; border-bottom: 1px solid var(--line); } .tpl-gokul .hdr .brand { font-family: 'Yeseva One', serif; color: var(--brand); } .tpl-gokul .hdr-search input[type=search] { background: var(--bg-2) !important; border: 0 !important; border-radius: 999px !important; } .tpl-gokul .nav-bar { background: transparent; border-top: 0; } .tpl-gokul .nav-bar .wrap { justify-content: center; } .tpl-gokul .nav-link { color: var(--ink-2); font-weight: 700; } .tpl-gokul .nav-link:hover, .tpl-gokul .nav-link.active { color: var(--brand); } .tpl-gokul .nav-link.active::after { height: 3px; border-radius: 3px; background: var(--accent); } .tpl-gokul .hero { background: #dcecf8; min-height: 540px; display: flex; align-items: center; padding-bottom: 56px; } .tpl-gokul .hero-bg { inset: 0 0 56px 44%; background-position: center 60%; border-radius: 0 0 0 200px; } .tpl-gokul .hero::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 56px; background: radial-gradient(ellipse 60px 28px at 60px 100%, var(--bg) 99%, transparent 100%) 0 0 / 120px 56px repeat-x, radial-gradient(ellipse 60px 28px at 0 0, #dcecf8 0 0, transparent 0); pointer-events: none; } .tpl-gokul .hero-in { position: relative; z-index: 4; max-width: 500px; padding: 70px 0 70px 4%; } .tpl-gokul .hero h1 { color: var(--brand); font-size: clamp(38px, 5.2vw, 66px); line-height: 1.05; } .tpl-gokul .hero p { color: var(--ink-2); opacity: 1; font-weight: 500; } .tpl-gokul .hero .eyebrow { background: #fff; color: var(--brand); border-radius: 999px; font-weight: 800; letter-spacing: .1em; backdrop-filter: none; } .tpl-gokul .btn { border-radius: 999px; font-weight: 800; } .tpl-gokul .btn-primary { background: var(--brand); color: #fff; } .tpl-gokul .btn-primary:hover { background: #1f527f; } .tpl-gokul .btn-accent { background: var(--accent); color: #4a3608; } .tpl-gokul .btn-light { background: #fff; color: var(--brand); } .tpl-gokul .section-head { text-align: center; flex-direction: column; align-items: center; } .tpl-gokul .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--brand); } .tpl-gokul .section-head h2::after { content: "✿ ✿ ✿"; display: block; font-size: 12px; letter-spacing: .5em; color: var(--accent); margin-top: 6px; } .tpl-gokul .section-head .link-arrow { color: var(--brand); font-weight: 800; } .tpl-gokul .section-alt { background: var(--bg-2); } .tpl-gokul .rc-card, .tpl-gokul .p-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 18px 14px 18px; text-align: center; transition: transform .3s, box-shadow .3s; } .tpl-gokul .rc-card:hover, .tpl-gokul .p-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -20px rgba(43,58,77,.5); } .tpl-gokul .rc-img, .tpl-gokul .p-img { border-radius: 50%; aspect-ratio: 1/1; background: var(--bg-2); border: 6px solid var(--accent); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); width: 86%; margin-inline: auto; } .tpl-gokul .rc-name, .tpl-gokul .p-name { font-family: 'Yeseva One', serif; font-weight: 400 !important; font-size: 17px !important; color: var(--ink); text-align: center; } .tpl-gokul .rc-chip { text-align: center; } .tpl-gokul .rc-chip span { background: #e5f1fb; color: var(--brand); border-radius: 999px; font-weight: 700; } .tpl-gokul .rc-price { justify-content: center; } .tpl-gokul .rc-price b, .tpl-gokul .price b { display: inline-block; background: var(--bg-2); color: #7a5a0c; font-family: 'Yeseva One', serif; font-weight: 400; font-size: 18px; padding: 3px 16px; border-radius: 999px; border: 1px solid var(--accent); } .tpl-gokul .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 800; } .tpl-gokul .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-gokul .rc-btn-main { background: var(--brand); color: #fff; } .tpl-gokul .rc-tag, .tpl-gokul .tag { background: var(--accent); color: #4a3608; border-radius: 999px; font-weight: 800; box-shadow: none; top: 12px; left: 12px; } .tpl-gokul .rc-tag-sale { background: #e5f1fb; color: var(--brand); } .tpl-gokul .rc-tag-out { background: #cfd5de; color: #fff; } .tpl-gokul .cat-grid { gap: 20px; } .tpl-gokul .cat-tile { aspect-ratio: 1/1; border-radius: 50%; border: 6px solid var(--accent); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); } .tpl-gokul .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(43,58,77,.75)); } .tpl-gokul .cat-tile .t { justify-content: center; text-align: center; } .tpl-gokul .cat-tile h3 { font-family: 'Yeseva One', serif; font-size: 19px; } .tpl-gokul .cat-tile .arr { display: none; } .tpl-gokul .trust { background: transparent; border: 0; } .tpl-gokul .trust-item { background: #fff; border: 1px solid var(--line); border-radius: 22px; } .tpl-gokul .trust-item .ic { background: #e5f1fb; color: var(--brand); border-radius: 50%; } .tpl-gokul .main-img { border-radius: 50%; border: 8px solid var(--accent); box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line); } .tpl-gokul .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); color: var(--brand); } .tpl-gokul .foot { background: #2b3a4d; border-top: 6px solid var(--accent); } .tpl-gokul .foot h4 { font-family: 'Yeseva One', serif; font-weight: 400; color: var(--accent); } @media (max-width: 860px) { .tpl-gokul .hero { min-height: 520px; align-items: flex-start; } .tpl-gokul .hero-bg { inset: auto 0 56px 0; height: 36%; border-radius: 80px 80px 0 0; } .tpl-gokul .hero-in { padding: 40px 6% 230px; } .tpl-gokul .main-img { border-radius: 40px; } } .tpl-gokul .hero:has(.hero-stock) { background: #dcecf8; } /* ---------- Aujar: workshop tools. Charcoal and safety orange on brushed steel, riveted metal plates, stencil-style condensed type ---------- */ .tpl-aujar { --bg: #e7e9ec; --bg-2: #d8dce1; --line: #b9bec6; --ink: #1d2126; --ink-2: #474e57; --ink-3: #848c97; --r: 4px; --r-lg: 6px; --r-sm: 2px; --rivet: radial-gradient(circle at 8px 8px, #8a9099 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 8px) 8px, #8a9099 0 3px, transparent 3.5px), radial-gradient(circle at 8px calc(100% - 8px), #8a9099 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #8a9099 0 3px, transparent 3.5px); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px); } .tpl-aujar h1, .tpl-aujar h2, .tpl-aujar h3, .tpl-aujar .display { font-family: 'Oswald', 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .tpl-aujar .announce { background: var(--accent); color: #1d2126; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; } .tpl-aujar .hdr { background: #1d2126; border-bottom: 3px solid var(--accent); } .tpl-aujar .hdr .brand { font-family: 'Oswald', sans-serif; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .12em; } .tpl-aujar .hdr .icon-link, .tpl-aujar .hdr .hdr-search .i { color: #fff; } .tpl-aujar .hdr-search input[type=search] { background: #2b3138 !important; border: 1px solid #454d57 !important; border-radius: 2px !important; color: #fff; } .tpl-aujar .nav-bar { background: #2b3138; border-top: 0; } .tpl-aujar .nav-bar .wrap { justify-content: center; } .tpl-aujar .nav-link { color: #c3c9d1; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 500; } .tpl-aujar .nav-link:hover, .tpl-aujar .nav-link.active { color: var(--accent); } .tpl-aujar .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-aujar .hero { background: #1d2126; min-height: 540px; display: flex; align-items: center; } .tpl-aujar .hero-bg { opacity: .85; background-position: center; } .tpl-aujar .hero::after { background: linear-gradient(100deg, rgba(29,33,38,.95) 30%, rgba(29,33,38,.35) 70%, transparent); } .tpl-aujar .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #1d2126 12px 24px); pointer-events: none; } .tpl-aujar .hero-in { max-width: 580px; padding: 90px 0; } .tpl-aujar .hero h1 { color: #fff; font-size: clamp(40px, 5.8vw, 82px); line-height: .98; } .tpl-aujar .hero p { color: #c3c9d1; opacity: 1; } .tpl-aujar .hero .eyebrow { background: transparent; border: 2px solid var(--accent); color: var(--accent); border-radius: 2px; font-family: 'Oswald', sans-serif; letter-spacing: .22em; backdrop-filter: none; } .tpl-aujar .btn { border-radius: 2px; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; } .tpl-aujar .btn-primary { background: var(--accent); color: #1d2126; } .tpl-aujar .btn-primary:hover { background: #fff; } .tpl-aujar .btn-accent { background: #1d2126; color: var(--accent); } .tpl-aujar .btn-light { background: transparent; color: #fff; border: 2px solid #fff; } .tpl-aujar .section-head { border-bottom: 3px solid #1d2126; padding-bottom: 6px; } .tpl-aujar .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); } .tpl-aujar .section-head h2::before { content: ""; display: inline-block; width: 14px; height: 28px; margin-right: 12px; vertical-align: -4px; background: var(--accent); transform: skewX(-18deg); } .tpl-aujar .section-head .link-arrow { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #1d2126; font-size: 12.5px; } .tpl-aujar .section-alt { background: rgba(190,196,204,.45); } .tpl-aujar .rc-card, .tpl-aujar .p-card { position: relative; background: linear-gradient(180deg, #f6f7f8, #e3e6ea); border: 2px solid #1d2126; border-radius: 3px; padding: 22px 18px 18px; transition: transform .15s, box-shadow .15s; } .tpl-aujar .rc-card::before, .tpl-aujar .p-card::before { content: ""; position: absolute; inset: 0; background: var(--rivet); pointer-events: none; z-index: 4; } .tpl-aujar .rc-card:hover, .tpl-aujar .p-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); } .tpl-aujar .rc-img, .tpl-aujar .p-img { border-radius: 2px; aspect-ratio: 1/1; background: #fff; border: 2px solid #1d2126; } .tpl-aujar .rc-name, .tpl-aujar .p-name { font-family: 'Oswald', sans-serif; font-weight: 600 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .tpl-aujar .rc-chip { text-align: left; } .tpl-aujar .rc-chip span { background: #1d2126; color: var(--accent); border-radius: 2px; font-family: 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; } .tpl-aujar .rc-price { justify-content: flex-start; } .tpl-aujar .rc-price b, .tpl-aujar .price b { color: #1d2126; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .02em; } .tpl-aujar .rc-btn { border-radius: 2px; border: 2px solid #1d2126; color: #1d2126; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } .tpl-aujar .rc-btn:hover { background: #1d2126; color: var(--accent); } .tpl-aujar .rc-btn-main { background: var(--accent); border-color: #1d2126; color: #1d2126; } .tpl-aujar .rc-tag, .tpl-aujar .tag { background: #1d2126; color: var(--accent); border-radius: 2px; font-family: 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; box-shadow: none; top: 28px; left: 24px; z-index: 5; } .tpl-aujar .rc-tag-sale { background: var(--accent); color: #1d2126; } .tpl-aujar .rc-tag-out { background: #7c838d; color: #fff; } .tpl-aujar .rc-heart { top: 28px; right: 24px; z-index: 5; } .tpl-aujar .cat-grid { gap: 16px; } .tpl-aujar .cat-tile { aspect-ratio: 4/3; border: 3px solid #1d2126; border-radius: 3px; } .tpl-aujar .cat-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--rivet); pointer-events: none; } .tpl-aujar .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(29,33,38,.9)); } .tpl-aujar .cat-tile .t { z-index: 2; } .tpl-aujar .cat-tile h3 { font-size: 22px; letter-spacing: .1em; } .tpl-aujar .cat-tile .arr { background: var(--accent); color: #1d2126; border-radius: 2px; } .tpl-aujar .trust { background: #1d2126; border-color: #1d2126; } .tpl-aujar .trust-item { border-color: rgba(255,255,255,.14); } .tpl-aujar .trust-item, .tpl-aujar .trust-item * { color: #c3c9d1; } .tpl-aujar .trust-item .ic { background: var(--accent); color: #1d2126; border-radius: 2px; } .tpl-aujar .main-img { background: #fff; border: 3px solid #1d2126; border-radius: 3px; box-shadow: 8px 8px 0 var(--accent); } .tpl-aujar .pd-info h1 { font-size: clamp(30px, 3.8vw, 52px); } .tpl-aujar .foot { background: #1d2126; border-top: 12px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #1d2126 12px 24px) 12; } .tpl-aujar .foot h4 { font-family: 'Oswald', sans-serif; letter-spacing: .16em; color: var(--accent); } @media (max-width: 860px) { .tpl-aujar .hero { min-height: 440px; } .tpl-aujar .hero-in { padding: 60px 0; } } .tpl-aujar .hero:has(.hero-stock) { background: #1d2126; } /* Agriculture batch: stack the product action buttons on narrow phones so labels never overflow */ @media (max-width: 560px) { .tpl-beej .rc-actions, .tpl-khad .rc-actions, .tpl-jaivik .rc-actions, .tpl-kisandirect .rc-actions, .tpl-gokul .rc-actions, .tpl-aujar .rc-actions { grid-template-columns: 1fr; } } /* ===================================================================================================================================== Rice Sellers (batch 10): Basmati (royal arches), Paddy (field and grain shapes), Gunny (jute sack stencil), Mill (wholesale rate cards), Dumpukht (dark biryani saffron) ===================================================================================================================================== */ /* ---------- Basmati: royal aged rice. Cream, deep green and gold, arch-topped photos in gold frames, a classical display serif ---------- */ .tpl-basmati { --bg: #fbf7ec; --bg-2: #f1e8cf; --line: #e0d2a6; --ink: #20342a; --ink-2: #53655a; --ink-3: #98a095; --r: 10px; --r-lg: 14px; --r-sm: 6px; } .tpl-basmati h1, .tpl-basmati h2, .tpl-basmati h3, .tpl-basmati .display { font-family: 'Gilda Display', 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: .02em; } .tpl-basmati .announce { background: var(--brand); color: var(--accent); letter-spacing: .22em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; } .tpl-basmati .hdr { background: #fffdf6; border-bottom: 1px solid var(--accent); box-shadow: 0 3px 0 -2px var(--accent); } .tpl-basmati .hdr .brand { font-family: 'Gilda Display', serif; color: var(--brand); letter-spacing: .06em; } .tpl-basmati .hdr .brand::after { content: "◆"; font-size: .45em; margin-left: 8px; color: var(--accent); vertical-align: middle; } .tpl-basmati .hdr-search input[type=search] { background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; } .tpl-basmati .nav-bar { background: #fffdf6; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-basmati .nav-bar .wrap { justify-content: center; } .tpl-basmati .nav-link { font-family: 'Gilda Display', serif; font-size: 15px; color: var(--ink-2); letter-spacing: .04em; } .tpl-basmati .nav-link:hover, .tpl-basmati .nav-link.active { color: var(--brand); } .tpl-basmati .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-basmati .hero { background: #14382a; min-height: 560px; display: flex; align-items: center; } .tpl-basmati .hero-bg { inset: 40px 7% 0 54%; border-radius: 999px 999px 0 0; border: 3px solid var(--accent); outline: 1px solid rgba(201,162,75,.55); outline-offset: 8px; background-position: center; opacity: 1; } .tpl-basmati .hero::after { content: none; } .tpl-basmati .hero-in { max-width: 520px; padding: 80px 0 80px 5%; } .tpl-basmati .hero h1 { color: #fbf3dc; font-size: clamp(38px, 5.2vw, 70px); line-height: 1.04; } .tpl-basmati .hero p { color: #d7dfd2; opacity: 1; } .tpl-basmati .hero .eyebrow { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 0; letter-spacing: .26em; backdrop-filter: none; } .tpl-basmati .btn { border-radius: 2px; font-family: 'Gilda Display', serif; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; } .tpl-basmati .btn-primary { background: var(--brand); color: #fff; } .tpl-basmati .btn-primary:hover { background: #164a2f; } .tpl-basmati .btn-accent { background: var(--accent); color: #2a2208; } .tpl-basmati .btn-light { background: transparent; color: #fbf3dc; border: 1px solid #fbf3dc; } .tpl-basmati .section-head { text-align: center; flex-direction: column; align-items: center; gap: 4px; } .tpl-basmati .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--brand); } .tpl-basmati .section-head h2::after { content: "◆ ◆ ◆"; display: block; font-size: 9px; letter-spacing: .6em; color: var(--accent); margin-top: 8px; } .tpl-basmati .section-head .link-arrow { color: var(--brand); letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; } .tpl-basmati .section-alt { background: var(--bg-2); } .tpl-basmati .rc-card, .tpl-basmati .p-card { background: #fffdf6; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 16px; transition: .3s; position: relative; } .tpl-basmati .rc-card:hover, .tpl-basmati .p-card:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -18px rgba(30,90,58,.55); border-color: var(--accent); } .tpl-basmati .rc-img, .tpl-basmati .p-img { border-radius: 999px 999px 8px 8px; aspect-ratio: 4/5; background: var(--bg-2); border: 2px solid var(--accent); outline: 1px solid #fffdf6; outline-offset: -6px; } .tpl-basmati .rc-name, .tpl-basmati .p-name { font-family: 'Gilda Display', serif; font-weight: 400 !important; font-size: 17px !important; text-align: center; color: var(--ink); } .tpl-basmati .rc-chip { text-align: center; } .tpl-basmati .rc-chip span { background: transparent; color: var(--accent); filter: brightness(.8); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; font-weight: 700; padding: 0; } .tpl-basmati .rc-price { justify-content: center; } .tpl-basmati .rc-price b, .tpl-basmati .price b { color: var(--brand); font-family: 'Gilda Display', serif; font-weight: 400; font-size: 21px; } .tpl-basmati .rc-btn { border-radius: 2px; border: 1px solid var(--brand); color: var(--brand); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; } .tpl-basmati .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-basmati .rc-btn-main { background: var(--brand); color: #fff; } .tpl-basmati .rc-tag, .tpl-basmati .tag { background: var(--accent); color: #2a2208; border-radius: 0 0 6px 6px; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 700; box-shadow: none; top: 0; left: 14px; padding: 6px 9px; } .tpl-basmati .rc-tag-sale { background: var(--brand); color: var(--accent); } .tpl-basmati .rc-tag-out { background: #b9b59f; color: #fff; } .tpl-basmati .cat-grid { gap: 20px; } .tpl-basmati .cat-tile { aspect-ratio: 3/4; border-radius: 999px 999px 10px 10px; border: 3px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 4px; } .tpl-basmati .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(20,56,42,.88)); } .tpl-basmati .cat-tile .t { justify-content: center; text-align: center; } .tpl-basmati .cat-tile h3 { font-family: 'Gilda Display', serif; font-size: 20px; letter-spacing: .06em; } .tpl-basmati .cat-tile .arr { display: none; } .tpl-basmati .trust { background: #fffdf6; border-color: var(--line); } .tpl-basmati .trust-item .ic { background: var(--brand); color: var(--accent); border-radius: 50%; } .tpl-basmati .main-img { border-radius: 40% 40% 10px 10px / 18% 18% 10px 10px; border: 3px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 6px; } .tpl-basmati .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); color: var(--brand); } .tpl-basmati .foot { background: #14382a; border-top: 4px solid var(--accent); } .tpl-basmati .foot h4 { font-family: 'Gilda Display', serif; color: var(--accent); letter-spacing: .14em; font-weight: 400; } @media (max-width: 860px) { .tpl-basmati .hero { min-height: 560px; align-items: flex-start; } .tpl-basmati .hero-bg { inset: auto 12% 0 12%; height: 42%; } .tpl-basmati .hero-in { padding: 44px 5% 280px; } } .tpl-basmati .hero:has(.hero-stock) { background: #14382a; } /* ---------- Paddy: green field. Fresh green and sunlit yellow, a rolling-field edge under the banner, grain-shaped photos and capsule categories ---------- */ .tpl-paddy { --bg: #f4faec; --bg-2: #e6f2d3; --line: #cfe3b0; --ink: #1f3a16; --ink-2: #4d6b3c; --ink-3: #93ad82; --r: 22px; --r-lg: 30px; --r-sm: 12px; } .tpl-paddy h1, .tpl-paddy h2, .tpl-paddy h3, .tpl-paddy .display { font-family: 'Outfit', 'Nunito', sans-serif; font-weight: 700; letter-spacing: -.02em; } .tpl-paddy .announce { background: linear-gradient(90deg, var(--brand), #7fb83a 60%, var(--accent)); color: #fff; font-weight: 700; letter-spacing: .06em; font-size: 12px; text-shadow: 0 1px 0 rgba(0,0,0,.18); } .tpl-paddy .hdr { background: rgba(255,255,255,.95); border-bottom: 0; box-shadow: 0 8px 24px -16px rgba(63,143,42,.55); } .tpl-paddy .hdr .brand { font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--brand); letter-spacing: -.03em; } .tpl-paddy .hdr-search input[type=search] { background: var(--bg-2) !important; border: 0 !important; border-radius: 999px !important; } .tpl-paddy .nav-bar { background: transparent; border-top: 0; } .tpl-paddy .nav-bar .wrap { justify-content: center; gap: 6px; } .tpl-paddy .nav-link { font-weight: 600; color: var(--ink-2); border-radius: 999px; padding: 6px 16px; } .tpl-paddy .nav-link:hover { background: var(--bg-2); color: var(--brand); } .tpl-paddy .nav-link.active { background: var(--brand); color: #fff; } .tpl-paddy .nav-link.active::after { content: none; } .tpl-paddy .hero { background: #3c7a26; min-height: 560px; display: flex; align-items: center; padding-bottom: 50px; } .tpl-paddy .hero-bg { opacity: .95; background-position: center 55%; } .tpl-paddy .hero::after { background: linear-gradient(90deg, rgba(30,70,18,.78), rgba(30,70,18,.25) 60%, rgba(255,230,120,.12)); } .tpl-paddy .hero::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; height: 54px; background: radial-gradient(ellipse 80px 26px at 50% 100%, var(--bg) 98%, transparent 100%) 0 0 / 160px 54px repeat-x; pointer-events: none; } .tpl-paddy .hero-in { max-width: 540px; padding: 90px 0; } .tpl-paddy .hero h1 { color: #fff; font-size: clamp(40px, 5.8vw, 76px); line-height: 1; text-shadow: 0 4px 24px rgba(0,0,0,.35); } .tpl-paddy .hero p { color: #f3fbe3; opacity: 1; font-weight: 500; } .tpl-paddy .hero .eyebrow { background: var(--accent); color: #3a2a00; border-radius: 999px; font-weight: 800; letter-spacing: .1em; backdrop-filter: none; } .tpl-paddy .btn { border-radius: 999px; font-weight: 700; } .tpl-paddy .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 20px -10px var(--brand); } .tpl-paddy .btn-accent { background: var(--accent); color: #3a2a00; } .tpl-paddy .btn-light { background: #fff; color: var(--brand); } .tpl-paddy .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); } .tpl-paddy .section-head h2::after { content: ""; display: block; width: 96px; height: 10px; margin-top: 8px; background: radial-gradient(ellipse 7px 5px at 7px 5px, var(--accent) 98%, transparent) 0 0 / 16px 10px repeat-x; } .tpl-paddy .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-paddy .section-alt { background: var(--bg-2); } .tpl-paddy .rc-card, .tpl-paddy .p-card { background: #fff; border: 0; border-radius: 28px; padding: 14px 14px 18px; box-shadow: 0 14px 30px -18px rgba(63,143,42,.7); transition: transform .3s, box-shadow .3s; } .tpl-paddy .rc-card:hover, .tpl-paddy .p-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(63,143,42,.8); } .tpl-paddy .rc-img, .tpl-paddy .p-img { border-radius: 58% 42% 52% 48% / 50% 56% 44% 50%; aspect-ratio: 1/1; background: var(--bg-2); transition: border-radius .6s; } .tpl-paddy .rc-card:hover .rc-img, .tpl-paddy .p-card:hover .p-img { border-radius: 46% 54% 44% 56% / 56% 46% 54% 44%; } .tpl-paddy .rc-name, .tpl-paddy .p-name { font-family: 'Outfit', sans-serif; font-weight: 700 !important; font-size: 16.5px !important; text-align: center; } .tpl-paddy .rc-chip { text-align: center; } .tpl-paddy .rc-chip span { background: #eaf6d3; color: var(--brand); border-radius: 999px; font-weight: 700; } .tpl-paddy .rc-price { justify-content: center; } .tpl-paddy .rc-price b, .tpl-paddy .price b { display: inline-block; background: #fff4cc; color: #7a5300; font-weight: 800; font-size: 18px; padding: 2px 14px; border-radius: 999px; font-family: 'Outfit', sans-serif; } .tpl-paddy .rc-btn { border-radius: 999px; border: 2px solid var(--brand); color: var(--brand); font-weight: 700; } .tpl-paddy .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-paddy .rc-btn-main { background: var(--brand); color: #fff; } .tpl-paddy .rc-tag, .tpl-paddy .tag { background: var(--accent); color: #3a2a00; border-radius: 999px; font-weight: 800; box-shadow: none; top: 14px; left: 14px; } .tpl-paddy .rc-tag-sale { background: #ff7a45; color: #fff; } .tpl-paddy .rc-tag-out { background: #c5d0b8; color: #fff; } .tpl-paddy .cat-grid { gap: 18px; } .tpl-paddy .cat-tile { aspect-ratio: 3/4.4; border-radius: 999px; } .tpl-paddy .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(30,70,18,.8)); } .tpl-paddy .cat-tile .t { justify-content: center; text-align: center; padding-bottom: 22px; } .tpl-paddy .cat-tile h3 { font-family: 'Outfit', sans-serif; font-size: 19px; } .tpl-paddy .cat-tile .arr { display: none; } .tpl-paddy .trust { background: transparent; border: 0; } .tpl-paddy .trust-item { background: #fff; border: 0; border-radius: 24px; box-shadow: 0 12px 24px -16px rgba(63,143,42,.7); } .tpl-paddy .trust-item .ic { background: #eaf6d3; color: var(--brand); border-radius: 50%; } .tpl-paddy .main-img { border-radius: 58% 42% 52% 48% / 50% 56% 44% 50%; } .tpl-paddy .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); } .tpl-paddy .foot { background: #25451a; border-radius: 44px 44px 0 0; margin-top: 30px; } .tpl-paddy .foot h4 { font-family: 'Outfit', sans-serif; color: var(--accent); } @media (max-width: 860px) { .tpl-paddy .hero { min-height: 480px; } .tpl-paddy .hero-in { padding: 60px 0; } .tpl-paddy .cat-tile { aspect-ratio: 1/1.25; } } .tpl-paddy .hero:has(.hero-stock) { background: #3c7a26; } /* ---------- Gunny: jute sack. Woven burlap texture, rope-tied tops, red rubber-stamp eyebrows and stencil type like the print on a rice sack ---------- */ .tpl-gunny { --bg: #dcc59b; --bg-2: #cdb283; --line: #b79a66; --ink: #2b1c0e; --ink-2: #5d4326; --ink-3: #8d7248; --r: 3px; --r-lg: 5px; --r-sm: 2px; --weave: repeating-linear-gradient(0deg, rgba(90,60,25,.12) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(90,60,25,.12) 0 2px, transparent 2px 5px); background-image: var(--weave); } .tpl-gunny h1, .tpl-gunny h2, .tpl-gunny h3, .tpl-gunny .display { font-family: 'Stardos Stencil', 'Black Ops One', serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .tpl-gunny .announce { background: #2b1c0e; color: #f3d9a4; font-family: 'Stardos Stencil', serif; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; } .tpl-gunny .hdr { background: #3a2410; border-bottom: 0; position: relative; padding-bottom: 8px; } .tpl-gunny .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(-55deg, #c9a766 0 6px, #7b5a2b 6px 12px); } .tpl-gunny .hdr .brand { font-family: 'Stardos Stencil', serif; color: #f3d9a4; letter-spacing: .1em; text-transform: uppercase; } .tpl-gunny .hdr .icon-link, .tpl-gunny .hdr .hdr-search .i { color: #f3d9a4; } .tpl-gunny .hdr-search input[type=search] { background: #f1e1bd !important; border: 2px solid #7b5a2b !important; border-radius: 2px !important; } .tpl-gunny .nav-bar { background: #b79a66; border-top: 0; background-image: var(--weave); } .tpl-gunny .nav-bar .wrap { justify-content: center; } .tpl-gunny .nav-link { font-family: 'Stardos Stencil', serif; color: #2b1c0e; text-transform: uppercase; letter-spacing: .1em; font-size: 13.5px; } .tpl-gunny .nav-link:hover, .tpl-gunny .nav-link.active { color: var(--accent); } .tpl-gunny .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-gunny .hero { background: #3a2410; min-height: 560px; display: flex; align-items: center; } .tpl-gunny .hero-bg { opacity: .8; background-position: center 40%; } .tpl-gunny .hero::after { background: linear-gradient(90deg, rgba(43,28,14,.9), rgba(43,28,14,.35) 60%, rgba(43,28,14,.1)), var(--weave); } .tpl-gunny .hero-in { max-width: 580px; padding: 90px 0; } .tpl-gunny .hero h1 { color: #f3d9a4; font-size: clamp(40px, 6vw, 84px); line-height: .96; text-shadow: 3px 3px 0 rgba(0,0,0,.35); } .tpl-gunny .hero p { color: #ead9b6; opacity: 1; font-weight: 500; } .tpl-gunny .hero .eyebrow { background: transparent; border: 3px solid #e8553f; color: #e8553f; border-radius: 4px; font-family: 'Stardos Stencil', serif; font-weight: 700; letter-spacing: .2em; backdrop-filter: none; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(232,85,63,.25); } .tpl-gunny .btn { border-radius: 2px; font-family: 'Stardos Stencil', serif; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; font-weight: 700; border: 3px solid #2b1c0e; box-shadow: 4px 4px 0 #2b1c0e; transition: transform .1s, box-shadow .1s; } .tpl-gunny .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #2b1c0e; } .tpl-gunny .btn-primary { background: var(--accent); color: #fff; } .tpl-gunny .btn-accent { background: #f3d9a4; color: #2b1c0e; } .tpl-gunny .btn-light { background: #f3d9a4; color: #2b1c0e; } .tpl-gunny .section-head { border-bottom: 4px double #2b1c0e; padding-bottom: 8px; } .tpl-gunny .section-head h2 { font-size: clamp(28px, 3.8vw, 46px); color: #2b1c0e; } .tpl-gunny .section-head .link-arrow { font-family: 'Stardos Stencil', serif; color: var(--accent); letter-spacing: .1em; text-transform: uppercase; } .tpl-gunny .section-alt { background: rgba(183,154,102,.35); } .tpl-gunny .rc-card, .tpl-gunny .p-card { position: relative; background: #ead7ae var(--weave); border: 0; border-radius: 4px 4px 10px 10px; padding: 34px 14px 16px; box-shadow: 0 10px 0 -3px #9c7d48, 0 18px 24px -12px rgba(43,28,14,.6); transition: transform .25s; } .tpl-gunny .rc-card::before, .tpl-gunny .p-card::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 14px; border-top: 3px dashed #6b4a22; border-bottom: 3px solid #6b4a22; opacity: .85; } .tpl-gunny .rc-card::after, .tpl-gunny .p-card::after { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 6px; background: repeating-linear-gradient(-55deg, #6b4a22 0 4px, #a98445 4px 8px); border-radius: 3px; } .tpl-gunny .rc-card:hover, .tpl-gunny .p-card:hover { transform: rotate(-1.2deg) translateY(-5px); } .tpl-gunny .rc-img, .tpl-gunny .p-img { border-radius: 2px; aspect-ratio: 1/1; background: #cdb283; border: 4px solid #6b4a22; } .tpl-gunny .rc-name, .tpl-gunny .p-name { font-family: 'Stardos Stencil', serif; font-weight: 700 !important; font-size: 17px !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-align: center; color: #2b1c0e; } .tpl-gunny .rc-chip { text-align: center; } .tpl-gunny .rc-chip span { background: #2b1c0e; color: #f3d9a4; border-radius: 2px; font-family: 'Stardos Stencil', serif; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; } .tpl-gunny .rc-price { justify-content: center; } .tpl-gunny .rc-price b, .tpl-gunny .price b { color: #e8553f; font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: 22px; border: 3px double #e8553f; padding: 1px 12px; border-radius: 3px; transform: rotate(-2deg); display: inline-block; letter-spacing: .04em; } .tpl-gunny .rc-btn { border-radius: 2px; border: 3px solid #2b1c0e; color: #2b1c0e; font-family: 'Stardos Stencil', serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; } .tpl-gunny .rc-btn:hover { background: #2b1c0e; color: #f3d9a4; } .tpl-gunny .rc-btn-main { background: var(--accent); border-color: #2b1c0e; color: #fff; } .tpl-gunny .rc-tag, .tpl-gunny .tag { background: #2b1c0e; color: #f3d9a4; border-radius: 2px; font-family: 'Stardos Stencil', serif; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; box-shadow: none; top: 40px; left: 8px; z-index: 5; } .tpl-gunny .rc-tag-sale { background: #e8553f; color: #fff; } .tpl-gunny .rc-tag-out { background: #8d7248; color: #fff; } .tpl-gunny .rc-heart { top: 40px; z-index: 5; } .tpl-gunny .cat-grid { gap: 18px; } .tpl-gunny .cat-tile { aspect-ratio: 1/1; border-radius: 3px; border: 5px solid #6b4a22; box-shadow: 0 8px 0 -2px #9c7d48; } .tpl-gunny .cat-tile::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 18px; height: 12px; background: repeating-linear-gradient(-55deg, #6b4a22 0 5px, #a98445 5px 10px); } .tpl-gunny .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(43,28,14,.9)); } .tpl-gunny .cat-tile .t { z-index: 2; } .tpl-gunny .cat-tile h3 { font-family: 'Stardos Stencil', serif; font-size: 22px; letter-spacing: .08em; } .tpl-gunny .cat-tile .arr { background: var(--accent); color: #fff; border-radius: 2px; } .tpl-gunny .trust { background: #b79a66 var(--weave); border-color: #6b4a22; } .tpl-gunny .trust-item { border-color: rgba(43,28,14,.25); } .tpl-gunny .trust-item .ic { background: #2b1c0e; color: #f3d9a4; border-radius: 2px; } .tpl-gunny .main-img { border: 6px solid #6b4a22; border-radius: 3px; box-shadow: 0 12px 0 -3px #9c7d48; } .tpl-gunny .pd-info h1 { font-size: clamp(30px, 3.8vw, 52px); } .tpl-gunny .foot { background: #2b1c0e; border-top: 10px solid transparent; border-image: repeating-linear-gradient(-55deg, #c9a766 0 6px, #7b5a2b 6px 12px) 10; } .tpl-gunny .foot h4 { font-family: 'Stardos Stencil', serif; color: #f3d9a4; letter-spacing: .16em; text-transform: uppercase; } @media (max-width: 860px) { .tpl-gunny .hero { min-height: 470px; } .tpl-gunny .hero-in { padding: 60px 0; } } .tpl-gunny .hero:has(.hero-stock) { background: #3a2410; } /* ---------- Mill: wholesale rates. Navy and grain-gold, a rate-card ledger where every product is a row with the price and unit up front ---------- */ .tpl-mill { --bg: #f3f6fa; --bg-2: #e4ebf4; --line: #c9d6e6; --ink: #14243d; --ink-2: #4a5d7a; --ink-3: #8b9bb3; --r: 6px; --r-lg: 8px; --r-sm: 3px; } .tpl-mill h1, .tpl-mill h2, .tpl-mill h3, .tpl-mill .display { font-family: 'IBM Plex Sans', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; } .tpl-mill .announce { background: var(--accent); color: #14243d; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; } .tpl-mill .hdr { background: var(--brand); border-bottom: 0; } .tpl-mill .hdr .brand { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; color: #fff; } .tpl-mill .hdr .icon-link, .tpl-mill .hdr .hdr-search .i { color: #fff; } .tpl-mill .hdr-search input[type=search] { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.25) !important; color: #fff; border-radius: 6px !important; } .tpl-mill .hdr-search input::placeholder { color: rgba(255,255,255,.7); } .tpl-mill .nav-bar { background: #0e2c58; border-top: 0; } .tpl-mill .nav-bar .wrap { justify-content: flex-start; } .tpl-mill .nav-link { color: #c5d3ea; font-weight: 600; font-size: 13.5px; } .tpl-mill .nav-link:hover, .tpl-mill .nav-link.active { color: var(--accent); } .tpl-mill .nav-link.active::after { height: 3px; background: var(--accent); } .tpl-mill .hero { background: var(--brand); min-height: 500px; display: flex; align-items: center; } .tpl-mill .hero-bg { inset: 0 0 0 46%; background-position: center; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .tpl-mill .hero::after { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px); } .tpl-mill .hero-in { max-width: 560px; padding: 80px 0; position: relative; z-index: 4; } .tpl-mill .hero h1 { color: #fff; font-size: clamp(36px, 5vw, 66px); line-height: 1.04; } .tpl-mill .hero p { color: #c5d3ea; opacity: 1; } .tpl-mill .hero .eyebrow { background: var(--accent); color: #14243d; border-radius: 3px; font-weight: 800; letter-spacing: .14em; backdrop-filter: none; } .tpl-mill .btn { border-radius: 4px; font-weight: 700; } .tpl-mill .btn-primary { background: var(--accent); color: #14243d; } .tpl-mill .btn-primary:hover { background: #fff; } .tpl-mill .btn-accent { background: #fff; color: var(--brand); } .tpl-mill .btn-light { background: transparent; color: #fff; border: 2px solid #fff; } .tpl-mill .section-head { border-bottom: 2px solid var(--brand); padding-bottom: 8px; } .tpl-mill .section-head h2 { font-size: clamp(24px, 3vw, 36px); color: var(--brand); } .tpl-mill .section-head h2::before { content: ""; display: inline-block; width: 12px; height: 24px; margin-right: 10px; vertical-align: -4px; background: var(--accent); } .tpl-mill .section-head .link-arrow { color: var(--brand); font-weight: 700; } .tpl-mill .section-alt { background: var(--bg-2); } .tpl-mill .rc-grid, .tpl-mill .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px; } .tpl-mill .rc-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "media name" "media chip" "media price" "act act"; column-gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 6px; padding: 12px; transition: .2s; } .tpl-mill .rc-card:hover, .tpl-mill .p-card:hover { box-shadow: 0 12px 26px -16px rgba(18,58,115,.55); transform: translateY(-2px); border-color: var(--brand); } .tpl-mill .rc-media { grid-area: media; margin: 0; } .tpl-mill .rc-name { grid-area: name; text-align: left; margin: 0 !important; } .tpl-mill .rc-chip { grid-area: chip; text-align: left; margin: 2px 0; } .tpl-mill .rc-price { grid-area: price; justify-content: flex-start; margin: 0; } .tpl-mill .rc-actions { grid-area: act; margin-top: 10px; } .tpl-mill .p-card { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 6px; padding: 12px; transition: .2s; } .tpl-mill .rc-img, .tpl-mill .p-img { border-radius: 4px; aspect-ratio: 1/1; background: var(--bg-2); } .tpl-mill .rc-name, .tpl-mill .p-name { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700 !important; font-size: 16.5px !important; color: var(--brand); } .tpl-mill .rc-chip span { background: var(--bg-2); color: var(--ink-2); border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; } .tpl-mill .rc-price b, .tpl-mill .price b { color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em; } .tpl-mill .per-unit { font-size: .55em; font-weight: 700; opacity: .8; color: var(--brand); } .tpl-mill .rc-btn { border-radius: 4px; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: 12px; } .tpl-mill .rc-btn:hover { background: var(--brand); color: #fff; } .tpl-mill .rc-btn-main { background: var(--brand); color: #fff; } .tpl-mill .rc-tag, .tpl-mill .tag { background: var(--accent); color: #14243d; border-radius: 3px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; box-shadow: none; top: 8px; left: 8px; } .tpl-mill .rc-tag-sale { background: #d64545; color: #fff; } .tpl-mill .rc-tag-out { background: #9aa8bd; color: #fff; } .tpl-mill .cat-grid { gap: 14px; } .tpl-mill .cat-tile { aspect-ratio: 4/3; border-radius: 6px; border-bottom: 5px solid var(--accent); } .tpl-mill .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(18,58,115,.92)); } .tpl-mill .cat-tile h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; } .tpl-mill .cat-tile .arr { background: var(--accent); color: #14243d; border-radius: 3px; } .tpl-mill .trust { background: #fff; border-color: var(--line); } .tpl-mill .trust-item .ic { background: var(--brand); color: var(--accent); border-radius: 4px; } .tpl-mill .main-img { border-radius: 6px; border: 1px solid var(--line); border-left: 6px solid var(--accent); } .tpl-mill .pd-info h1 { font-size: clamp(26px, 3.4vw, 42px); color: var(--brand); } .tpl-mill .pd-price b { font-size: 34px; font-weight: 800; } .tpl-mill .foot { background: #0e2c58; border-top: 5px solid var(--accent); } .tpl-mill .foot h4 { color: var(--accent); font-family: 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; } @media (max-width: 860px) { .tpl-mill .rc-grid, .tpl-mill .p-grid { grid-template-columns: minmax(0, 1fr) !important; } .tpl-mill .hero { min-height: 440px; } .tpl-mill .hero-bg { inset: auto 0 0 0; height: 36%; clip-path: none; } .tpl-mill .hero-in { padding: 50px 0 190px; } } .tpl-mill .hero:has(.hero-stock) { background: var(--brand); } /* ---------- Dumpukht: dark biryani. Ember-brown night with saffron glow, saffron-gradient headlines, panels that glow like a sealed clay pot ---------- */ .tpl-dumpukht { --bg: #170d08; --bg-2: #21130c; --line: #3c2418; --ink: #f6e7d0; --ink-2: #cdb797; --ink-3: #8e7a60; --r: 14px; --r-lg: 20px; --r-sm: 8px; --brand-soft: color-mix(in srgb, var(--brand) 16%, #170d08); --brand-soft-2: color-mix(in srgb, var(--brand) 28%, #170d08); --brand-ink: color-mix(in srgb, var(--brand) 70%, #fff); color-scheme: dark; } .tpl-dumpukht h1, .tpl-dumpukht h2, .tpl-dumpukht h3, .tpl-dumpukht .display { font-family: 'Philosopher', 'Cormorant Garamond', serif; font-weight: 700; letter-spacing: .01em; } .tpl-dumpukht .announce { background: linear-gradient(90deg, #5a1d0a, var(--brand) 50%, #5a1d0a); color: #1a0d05; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; } .tpl-dumpukht .hdr { background: rgba(23,13,8,.94); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -20px var(--brand); backdrop-filter: blur(8px); } .tpl-dumpukht .hdr .brand { font-family: 'Philosopher', serif; color: var(--accent); } .tpl-dumpukht .hdr .icon-link, .tpl-dumpukht .hdr .hdr-search .i { color: var(--ink); } .tpl-dumpukht .hdr-search input[type=search] { background: #21130c !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--ink); } .tpl-dumpukht .nav-bar { background: #1c100a; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-dumpukht .nav-bar .wrap { justify-content: center; } .tpl-dumpukht .nav-link { color: var(--ink-2); font-weight: 600; letter-spacing: .04em; } .tpl-dumpukht .nav-link:hover, .tpl-dumpukht .nav-link.active { color: var(--accent); } .tpl-dumpukht .nav-link.active::after { height: 2px; background: var(--brand); box-shadow: 0 0 10px var(--brand); } .tpl-dumpukht .hero { background: #0f0805; min-height: 560px; display: flex; align-items: center; } .tpl-dumpukht .hero-bg { inset: 0 0 0 40%; background-position: center 30%; mask-image: linear-gradient(90deg, transparent, #000 38%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); } .tpl-dumpukht .hero::after { background: radial-gradient(ellipse at 18% 60%, rgba(232,146,12,.22), transparent 55%); } .tpl-dumpukht .hero-in { max-width: 540px; padding: 90px 0; position: relative; z-index: 4; } .tpl-dumpukht .hero h1 { font-size: clamp(40px, 5.8vw, 78px); line-height: 1.02; background: linear-gradient(180deg, #fff3d6, var(--accent) 60%, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tpl-dumpukht .hero p { color: var(--ink-2); opacity: 1; } .tpl-dumpukht .hero .eyebrow { background: transparent; border: 1px solid var(--brand); color: var(--accent); border-radius: 999px; letter-spacing: .2em; backdrop-filter: none; box-shadow: 0 0 18px -6px var(--brand); } .tpl-dumpukht .btn { border-radius: 999px; font-weight: 800; letter-spacing: .06em; } .tpl-dumpukht .btn-primary { background: linear-gradient(180deg, var(--accent), var(--brand)); color: #1a0d05; box-shadow: 0 10px 30px -10px var(--brand); } .tpl-dumpukht .btn-primary:hover { filter: brightness(1.1); } .tpl-dumpukht .btn-accent { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .tpl-dumpukht .btn-light { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-3); } .tpl-dumpukht input[type=text], .tpl-dumpukht input[type=email], .tpl-dumpukht input[type=tel], .tpl-dumpukht input[type=password], .tpl-dumpukht input[type=number], .tpl-dumpukht input[type=search], .tpl-dumpukht select, .tpl-dumpukht textarea { background-color: var(--bg-2); color: var(--ink); border-color: #4a2d1d; } .tpl-dumpukht .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); } .tpl-dumpukht .section-head h2::after { content: ""; display: block; width: 70px; height: 3px; margin-top: 8px; background: linear-gradient(90deg, var(--brand), transparent); border-radius: 3px; } .tpl-dumpukht .section-head .link-arrow { color: var(--accent); font-weight: 700; } .tpl-dumpukht .section-alt { background: var(--bg-2); } .tpl-dumpukht .rc-card, .tpl-dumpukht .p-card { background: linear-gradient(180deg, #25150d, #1a0e08); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 18px; padding: 14px 14px 16px; transition: .3s; } .tpl-dumpukht .rc-card:hover, .tpl-dumpukht .p-card:hover { transform: translateY(-5px); box-shadow: 0 0 34px -8px rgba(232,146,12,.45); border-color: var(--brand); } .tpl-dumpukht .rc-img, .tpl-dumpukht .p-img { border-radius: 12px; aspect-ratio: 1/1; background: #0f0805; } .tpl-dumpukht .rc-card:hover .rc-img img, .tpl-dumpukht .p-card:hover .p-img img { filter: saturate(1.15) brightness(1.08); } .tpl-dumpukht .rc-name, .tpl-dumpukht .p-name { font-family: 'Philosopher', serif; font-weight: 700 !important; font-size: 17px !important; color: var(--ink); text-align: center; } .tpl-dumpukht .rc-chip { text-align: center; } .tpl-dumpukht .rc-chip span { background: rgba(232,146,12,.14); color: var(--accent); border-radius: 999px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; } .tpl-dumpukht .rc-price { justify-content: center; } .tpl-dumpukht .rc-price b, .tpl-dumpukht .price b { color: var(--accent); font-family: 'Philosopher', serif; font-weight: 700; font-size: 22px; text-shadow: 0 0 16px rgba(232,146,12,.35); } .tpl-dumpukht .rc-btn { border-radius: 999px; border: 1.5px solid var(--brand); color: var(--ink); font-weight: 700; } .tpl-dumpukht .rc-btn:hover { background: var(--brand); color: #1a0d05; } .tpl-dumpukht .rc-btn-main { background: linear-gradient(180deg, var(--accent), var(--brand)); border-color: transparent; color: #1a0d05; } .tpl-dumpukht .rc-tag, .tpl-dumpukht .tag { background: var(--brand); color: #1a0d05; border-radius: 999px; font-weight: 800; letter-spacing: .06em; box-shadow: none; top: 12px; left: 12px; } .tpl-dumpukht .rc-tag-sale { background: #e0442b; color: #fff; } .tpl-dumpukht .rc-tag-out { background: #4a3a2c; color: var(--ink-3); } .tpl-dumpukht .rc-heart button { background: rgba(15,8,5,.7); color: var(--ink); box-shadow: none; border: 1px solid var(--line); } .tpl-dumpukht .cat-grid { gap: 16px; } .tpl-dumpukht .cat-tile { aspect-ratio: 16/11; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 0 0 0 rgba(232,146,12,0); transition: .3s; } .tpl-dumpukht .cat-tile:hover { box-shadow: 0 0 30px -8px rgba(232,146,12,.5); border-color: var(--brand); } .tpl-dumpukht .cat-tile::after { background: linear-gradient(180deg, transparent 35%, rgba(15,8,5,.92)); } .tpl-dumpukht .cat-tile h3 { font-family: 'Philosopher', serif; font-size: 21px; } .tpl-dumpukht .cat-tile .arr { background: var(--brand); color: #1a0d05; border-radius: 999px; } .tpl-dumpukht .trust { background: #1c100a; border-color: var(--line); } .tpl-dumpukht .trust-item { border-color: var(--line); } .tpl-dumpukht .trust-item .ic { background: rgba(232,146,12,.15); color: var(--accent); border-radius: 50%; } .tpl-dumpukht .main-img { border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 18px; background: #0f0805; box-shadow: 0 0 40px -14px rgba(232,146,12,.45); } .tpl-dumpukht .pd-info h1 { font-size: clamp(28px, 3.6vw, 46px); } .tpl-dumpukht .assure, .tpl-dumpukht .quick-facts span { border-color: var(--line); background: var(--bg-2); } .tpl-dumpukht .sticky-buy, .tpl-dumpukht .toast, .tpl-dumpukht .mini-line { background: var(--bg-2); color: var(--ink); } .tpl-dumpukht .foot { background: #0f0805; border-top: 1px solid var(--brand); box-shadow: 0 -10px 40px -24px var(--brand); } .tpl-dumpukht .foot h4 { font-family: 'Philosopher', serif; color: var(--accent); letter-spacing: .1em; } @media (max-width: 860px) { .tpl-dumpukht .hero { min-height: 480px; align-items: flex-end; } .tpl-dumpukht .hero-bg { inset: 0; mask-image: linear-gradient(0deg, transparent 20%, #000 90%); -webkit-mask-image: linear-gradient(0deg, transparent 20%, #000 90%); opacity: .55; } .tpl-dumpukht .hero-in { padding: 60px 0; } } .tpl-dumpukht .hero:has(.hero-stock) { background: #0f0805; } /* Rice batch: stack the product action buttons on narrow phones so labels never overflow */ @media (max-width: 560px) { .tpl-basmati .rc-actions, .tpl-paddy .rc-actions, .tpl-gunny .rc-actions, .tpl-mill .rc-actions, .tpl-dumpukht .rc-actions { grid-template-columns: 1fr; } .tpl-mill .rc-card { grid-template-columns: 96px minmax(0, 1fr); } } /* Bulk pricing (shown on every template): price levels on the product page, the "Bulk rates" tag on tiles, the cart note */ .bulk-box { margin: 12px 0 6px; padding: 12px 14px; border: 1.5px dashed var(--accent, #c8793a); border-radius: var(--r, 10px); background: color-mix(in srgb, var(--accent, #c8793a) 7%, var(--bg, #fff)); } .bulk-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; } .bulk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bulk-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; background: rgba(127,127,127,.07); } .bulk-list li.on { background: var(--accent, #c8793a); color: #fff; } .bulk-list li.on .bulk-off { color: #fff; } .bulk-off { font-weight: 700; color: #1f7a3d; } .bulk-list em { font-style: normal; font-weight: 700; } .bulk-rules { margin-top: 8px; font-size: 12.5px; opacity: .8; } .bulk-tag { background: var(--accent, #c8793a) !important; color: #fff !important; border-radius: 999px; font-weight: 700; } .bulk-applied { color: #1f7a3d; margin-top: 6px; font-weight: 600; } /* ---- subscribe & save (product page) */ .sub-box { margin: 12px 0 6px; padding: 12px 14px; border: 1.5px solid var(--line, #e5e7eb); border-radius: var(--r, 10px); background: color-mix(in srgb, var(--brand, #4f46e5) 5%, var(--bg, #fff)); } .sub-box select { max-width: 220px; } /* ---- email signup popup */ .sn-popup-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 18, 25, .55); display: grid; place-items: center; padding: 16px; } .sn-popup { position: relative; width: min(440px, 100%); background: var(--bg, #fff); color: var(--text, #1f2430); border-radius: var(--r, 14px); padding: 28px 26px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); text-align: center; } .sn-popup h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; } .sn-popup-body { margin: 0 0 14px; color: var(--muted, #6b7280); } .sn-popup-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted, #6b7280); } .sn-popup-form { display: grid; gap: 10px; } .sn-popup-form input[type=email] { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line, #d1d5db); border-radius: 10px; font: inherit; background: var(--bg, #fff); color: inherit; } .sn-popup-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .sn-popup-msg { min-height: 20px; margin-top: 8px; font-size: 14px; } .sn-popup-msg.err { color: #b91c1c; } .sn-popup-fine { margin-top: 6px; font-size: 12px; color: var(--muted, #8a8f98); } .sn-popup-code { display: inline-block; margin: 0 0 16px; padding: 10px 22px; border: 2px dashed var(--brand, #4f46e5); border-radius: 10px; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--brand, #4f46e5); user-select: all; } /* ---- star picker on the emailed review page (pure CSS: radios in reverse order so the stars to the left of the chosen one light up) */ .star-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } .star-pick label { font-size: 34px; line-height: 1; cursor: pointer; color: var(--line, #d1d5db); padding: 0 2px; } .star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: #f59e0b; } .star-pick input:focus-visible + label { outline: 2px solid var(--brand, #4f46e5); outline-offset: 2px; border-radius: 4px; } /* product bundles: "frequently bought together" */ .bundle-items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .bundle-items .plus { align-self: center; font-size: 20px; font-weight: 700; opacity: .5; } .bundle-item { flex: 1 1 120px; max-width: 170px; text-align: center; } .bundle-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r, 10px); background: var(--line, #eee); } .bundle-item .nm { font-size: 13.5px; font-weight: 600; margin-top: 6px; line-height: 1.3; } .bundle-item .nm a { color: inherit; text-decoration: none; } .bundle-item select { width: 100%; max-width: 100%; margin-top: 6px; font-size: 12.5px; } .bundle-hint .btn { white-space: nowrap; } /* ==================================================================================================================================== ART & CRAFT templates: Gallery, Canvas, Palette, Frame, Warli, Aquarelle. Paintings are usually portrait, so cards use a 4:5 picture area. ==================================================================================================================================== */ /* ---------- Gallery: white-cube museum. Pure white walls, hairline rules, every artwork matted on a grey card like a wall label, a placard over the banner ---------- */ .tpl-gallery { --bg: #ffffff; --bg-2: #f6f6f3; --line: #e3e3de; --ink: #141414; --ink-2: #56564f; --ink-3: #92928a; --r: 0px; --r-lg: 0px; --r-sm: 0px; } .tpl-gallery h1, .tpl-gallery h2, .tpl-gallery h3, .tpl-gallery .display { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: .01em; } .tpl-gallery .announce { background: #141414; color: #f1f1ee; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; } .tpl-gallery .hdr { background: #fff; border-bottom: 1px solid var(--line); } .tpl-gallery .hdr .brand { font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; font-size: 1.12em; color: #141414; } .tpl-gallery .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } .tpl-gallery .nav-bar { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-gallery .nav-bar .wrap { justify-content: center; gap: 18px; } .tpl-gallery .nav-link { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); } .tpl-gallery .nav-link:hover, .tpl-gallery .nav-link.active { color: #141414; } .tpl-gallery .nav-link.active::after { height: 1px; background: #141414; } .tpl-gallery .hero { background: #e8e7e2; min-height: 580px; display: flex; align-items: flex-end; } .tpl-gallery .hero-bg { opacity: 1; background-position: center; } .tpl-gallery .hero::after { background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,.2)); } .tpl-gallery .hero .wrap { position: relative; z-index: 4; } .tpl-gallery .hero-in { max-width: 360px; margin: 0 0 52px; padding: 26px 28px 30px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 22px 44px -18px rgba(0,0,0,.4); } .tpl-gallery .hero-in::before { content: "Now showing"; display: block; margin-bottom: 14px; font: 600 10px/1 system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); } .tpl-gallery .hero .eyebrow { display: none; } .tpl-gallery .hero h1 { color: var(--ink); font-size: clamp(28px, 3.6vw, 46px); font-style: italic; line-height: 1.1; margin-bottom: 12px; } .tpl-gallery .hero p { color: var(--ink-2); opacity: 1; font-size: 14.5px; margin-bottom: 20px; } .tpl-gallery .btn { border-radius: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; border: 1px solid #141414; } .tpl-gallery .btn-primary, .tpl-gallery .btn-accent { background: #141414; color: #fff; } .tpl-gallery .btn-primary:hover, .tpl-gallery .btn-accent:hover { background: #fff; color: #141414; } .tpl-gallery .btn-light { background: transparent; color: #141414; border-color: #141414; } .tpl-gallery .btn-light:hover { background: #141414; color: #fff; } .tpl-gallery .section-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 30px; } .tpl-gallery .section-head h2 { font-size: clamp(26px, 3.2vw, 40px); font-style: italic; } .tpl-gallery .section-head .link-arrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #141414; } .tpl-gallery .section-alt { background: var(--bg-2); } .tpl-gallery .rc-card, .tpl-gallery .p-card { background: transparent; border: 0; padding: 0; box-shadow: none; } .tpl-gallery .rc-card:hover, .tpl-gallery .p-card:hover { box-shadow: none; } .tpl-gallery .rc-img, .tpl-gallery .p-img { aspect-ratio: 4 / 5; padding: 26px; box-sizing: border-box; border-radius: 0; background: #f4f4f1; border: 1px solid var(--line); box-shadow: 0 16px 22px -18px rgba(0,0,0,.5); } .tpl-gallery .rc-img img, .tpl-gallery .p-img img { box-shadow: 0 4px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08); } .tpl-gallery .rc-card:hover .rc-img img, .tpl-gallery .p-card:hover .p-img img { transform: none; } .tpl-gallery .rc-name, .tpl-gallery .p-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600 !important; font-size: 20px !important; text-transform: none !important; letter-spacing: 0 !important; margin-top: 12px; } .tpl-gallery .rc-chip span, .tpl-gallery .p-cat { background: transparent; padding: 0; color: var(--ink-3); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; } .tpl-gallery .rc-price b, .tpl-gallery .price b { font-family: system-ui, sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: .04em; color: #141414; } .tpl-gallery .rc-btn { border-radius: 0; border: 1px solid #141414; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #141414; background: #fff; } .tpl-gallery .rc-btn:hover { background: #141414; color: #fff; } .tpl-gallery .rc-btn-main { background: #141414; color: #fff; } .tpl-gallery .rc-tag, .tpl-gallery .tag { background: #fff; color: #141414; border: 1px solid #141414; border-radius: 0; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; } .tpl-gallery .rc-tag-sale, .tpl-gallery .tag-sale { background: #b0302a; color: #fff; border-color: #b0302a; } .tpl-gallery .cat-tile { aspect-ratio: 4 / 5; border: 1px solid var(--line); } .tpl-gallery .cat-tile img { filter: grayscale(1) contrast(1.05); transition: filter .5s, transform .6s; } .tpl-gallery .cat-tile:hover img { filter: none; } .tpl-gallery .cat-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); } .tpl-gallery .cat-tile h3 { font-style: italic; font-size: 24px; } .tpl-gallery .main-img { aspect-ratio: 4 / 5; padding: 40px; box-sizing: border-box; background: #f4f4f1; border: 1px solid var(--line); box-shadow: 0 22px 30px -22px rgba(0,0,0,.55); } .tpl-gallery .main-img img { box-shadow: 0 6px 16px rgba(0,0,0,.3); } .tpl-gallery .pd-info h1 { font-style: italic; font-size: clamp(30px, 3.8vw, 48px); } .tpl-gallery .trust { background: #fff; border-color: var(--line); } .tpl-gallery .trust-item .ic { background: transparent; border: 1px solid var(--line); border-radius: 0; color: #141414; } .tpl-gallery .foot { background: #141414; } .tpl-gallery .foot h4 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; letter-spacing: 0; text-transform: none; } @media (max-width: 860px) { .tpl-gallery .hero { min-height: 460px; } .tpl-gallery .hero-in { max-width: none; margin-bottom: 28px; } .tpl-gallery .rc-img, .tpl-gallery .p-img { padding: 16px; } } .tpl-gallery .hero:has(.hero-stock) { background: #e8e7e2; } /* ---------- Canvas: the artist's studio. Raw linen, every painting a stretched canvas with a visible edge and shadow, hand-lettered names ---------- */ .tpl-canvas { --bg: #f4efe4; --bg-2: #ebe4d3; --line: #d9cfb8; --ink: #33291f; --ink-2: #6a5b49; --ink-3: #9c8d77; --r: 3px; --r-lg: 3px; --r-sm: 2px; --hand: 'Caveat', 'Segoe Script', cursive; background-image: repeating-linear-gradient(0deg, rgba(90,70,40,.045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90,70,40,.045) 0 1px, transparent 1px 3px); } .tpl-canvas h1, .tpl-canvas h2, .tpl-canvas h3, .tpl-canvas .display { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; letter-spacing: -.005em; } .tpl-canvas .announce { background: #3b2f2f; color: #f4efe4; font-family: var(--hand); font-size: 17px; letter-spacing: .02em; } .tpl-canvas .hdr { background: #f9f5ea; border-bottom: 3px double var(--line); } .tpl-canvas .hdr .brand { font-family: var(--hand); font-weight: 700; font-size: 1.9em; color: var(--brand); letter-spacing: 0; } .tpl-canvas .hdr-search input[type=search] { background: #fffdf6 !important; border: 1px solid var(--line) !important; border-radius: 2px !important; } .tpl-canvas .nav-bar { background: #efe8d6; border-top: 0; border-bottom: 1px solid var(--line); } .tpl-canvas .nav-bar .wrap { justify-content: center; } .tpl-canvas .nav-link { font-family: var(--hand); font-size: 20px; color: var(--ink-2); } .tpl-canvas .nav-link:hover, .tpl-canvas .nav-link.active { color: var(--accent); } .tpl-canvas .nav-link.active::after { height: 2px; background: var(--accent); } .tpl-canvas .hero { background: #3b2f2f; min-height: 560px; display: flex; align-items: center; } .tpl-canvas .hero-bg { filter: saturate(.95) brightness(.88); background-position: center; } .tpl-canvas .hero::after { background: linear-gradient(90deg, rgba(40,28,20,.6), rgba(40,28,20,0) 70%); } .tpl-canvas .hero .wrap { position: relative; z-index: 4; } .tpl-canvas .hero-in { max-width: 470px; margin: 56px 0; padding: 38px 40px 40px; background: #f9f5ea; color: var(--ink); border-radius: 2px; background-image: repeating-linear-gradient(0deg, rgba(90,70,40,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90,70,40,.05) 0 1px, transparent 1px 3px); box-shadow: 1px 1px 0 #d9cfb8, 2px 2px 0 #ece5d2, 3px 3px 0 #d9cfb8, 4px 4px 0 #ece5d2, 5px 5px 0 #d9cfb8, 14px 18px 32px rgba(0,0,0,.45); } .tpl-canvas .hero .eyebrow { background: transparent; color: var(--accent); font-family: var(--hand); font-size: 22px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0; backdrop-filter: none; } .tpl-canvas .hero h1 { color: var(--ink); font-size: clamp(30px, 4.2vw, 50px); font-style: italic; line-height: 1.12; } .tpl-canvas .hero p { color: var(--ink-2); opacity: 1; } .tpl-canvas .btn { border-radius: 3px; font-weight: 700; letter-spacing: .02em; } .tpl-canvas .btn-primary, .tpl-canvas .btn-accent { background: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--ink); } .tpl-canvas .btn-primary:hover, .tpl-canvas .btn-accent:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); } .tpl-canvas .btn-light { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .tpl-canvas .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); font-style: italic; } .tpl-canvas .section-head p { font-family: var(--hand); font-size: 20px; color: var(--accent); } .tpl-canvas .section-head .link-arrow { font-family: var(--hand); font-size: 20px; color: var(--accent); } .tpl-canvas .section-alt { background: rgba(235,228,211,.7); } .tpl-canvas .rc-card, .tpl-canvas .p-card { background: transparent; border: 0; padding: 0 6px 6px 0; box-shadow: none; } .tpl-canvas .rc-card:hover, .tpl-canvas .p-card:hover { box-shadow: none; } .tpl-canvas .rc-img, .tpl-canvas .p-img { aspect-ratio: 4 / 5; border-radius: 2px; background: #e7dfca; box-shadow: 1px 1px 0 #cfc3a8, 2px 2px 0 #ece5d2, 3px 3px 0 #cfc3a8, 4px 4px 0 #ece5d2, 5px 5px 0 #cfc3a8, 10px 14px 20px -4px rgba(60,40,20,.4); transition: transform .25s, box-shadow .25s; } .tpl-canvas .rc-card:hover .rc-img, .tpl-canvas .p-card:hover .p-img { transform: translate(-2px, -4px); box-shadow: 1px 1px 0 #cfc3a8, 2px 2px 0 #ece5d2, 3px 3px 0 #cfc3a8, 4px 4px 0 #ece5d2, 5px 5px 0 #cfc3a8, 14px 22px 26px -4px rgba(60,40,20,.45); } .tpl-canvas .rc-name, .tpl-canvas .p-name { font-family: var(--hand); font-weight: 700 !important; font-size: 24px !important; line-height: 1.1; margin-top: 14px; color: var(--ink); text-transform: none !important; letter-spacing: 0 !important; } .tpl-canvas .rc-chip span, .tpl-canvas .p-cat { background: transparent; padding: 0; color: var(--ink-3); font-style: italic; font-size: 12.5px; } .tpl-canvas .rc-price b, .tpl-canvas .price b { font-family: 'Libre Baskerville', serif; font-weight: 700; color: var(--accent); font-size: 16px; } .tpl-canvas .rc-btn { border: 2px solid var(--ink); border-radius: 3px; color: var(--ink); background: transparent; font-weight: 700; } .tpl-canvas .rc-btn:hover { background: var(--ink); color: #f4efe4; } .tpl-canvas .rc-btn-main { background: var(--accent); border-color: var(--accent); color: #fff; } .tpl-canvas .rc-tag, .tpl-canvas .tag { background: var(--accent); color: #fff; border-radius: 2px; font-family: var(--hand); font-size: 16px; letter-spacing: 0; transform: rotate(-4deg); box-shadow: 1px 2px 0 rgba(0,0,0,.25); } .tpl-canvas .rc-tag-out, .tpl-canvas .tag-out { background: #8d8068; } .tpl-canvas .cat-tile { aspect-ratio: 4 / 5; border-radius: 2px; box-shadow: 1px 1px 0 #cfc3a8, 2px 2px 0 #ece5d2, 3px 3px 0 #cfc3a8, 4px 4px 0 #ece5d2, 5px 5px 0 #cfc3a8, 10px 14px 20px -4px rgba(60,40,20,.4); } .tpl-canvas .cat-tile h3 { font-family: var(--hand); font-size: 30px; font-weight: 700; } .tpl-canvas .main-img { background: #e7dfca; border-radius: 2px; aspect-ratio: 4 / 5; box-shadow: 1px 1px 0 #cfc3a8, 2px 2px 0 #ece5d2, 3px 3px 0 #cfc3a8, 4px 4px 0 #ece5d2, 5px 5px 0 #cfc3a8, 6px 6px 0 #ece5d2, 14px 20px 30px -6px rgba(60,40,20,.5); } .tpl-canvas .pd-info h1 { font-style: italic; font-size: clamp(30px, 3.8vw, 48px); } .tpl-canvas .trust { background: #efe8d6; border-color: var(--line); } .tpl-canvas .trust-item span { font-family: var(--hand); font-size: 19px; } .tpl-canvas .trust-item .ic { background: transparent; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); } .tpl-canvas .foot { background: #3b2f2f; border-top: 3px double #8a7960; } .tpl-canvas .foot h4 { font-family: var(--hand); font-size: 24px; letter-spacing: 0; text-transform: none; color: #e7d3a5; } @media (max-width: 860px) { .tpl-canvas .hero { min-height: 470px; } .tpl-canvas .hero-in { margin: 36px 0; padding: 28px 24px 30px; } } .tpl-canvas .hero:has(.hero-stock) { background: #3b2f2f; } /* ---------- Palette: paint-splash colour. A rainbow stripe, blob-shaped artwork, colour-cycling tiles and bold display type ---------- */ .tpl-palette { --bg: #fffdf8; --bg-2: #fff3e3; --line: #f0e3d0; --ink: #1f1f3d; --ink-2: #4f4f6e; --ink-3: #8c8ca6; --r: 22px; --r-lg: 30px; --r-sm: 12px; --c1: #ff5d8f; --c2: #ffc93c; --c3: #2ec4b6; --c4: #6c5ce7; --c5: #ff8c42; } .tpl-palette h1, .tpl-palette h2, .tpl-palette h3, .tpl-palette .display { font-family: 'Syne', 'Trebuchet MS', sans-serif; font-weight: 800; letter-spacing: -.02em; } .tpl-palette .announce { background: var(--ink); color: #fff; font-weight: 700; letter-spacing: .06em; } .tpl-palette .hdr { background: #fff; border-top: 7px solid transparent; border-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5)) 1; border-bottom: 1px solid var(--line); } .tpl-palette .hdr .brand { font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -.03em; font-size: 1.3em; color: var(--ink); } .tpl-palette .hdr .brand::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 5px; border-radius: 50%; background: var(--c1); box-shadow: 14px -4px 0 -2px var(--c2), 26px 2px 0 -3px var(--c3); } .tpl-palette .hdr-search input[type=search] { border-radius: 99px !important; background: #fff6ea !important; border: 2px solid var(--ink) !important; } .tpl-palette .nav-bar { background: #fff; border-top: 0; } .tpl-palette .nav-link { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); border-radius: 99px; padding: 8px 16px; } .tpl-palette .nav-link:hover { background: var(--c2); } .tpl-palette .nav-link.active { background: var(--ink); color: #fff; } .tpl-palette .nav-link.active::after { display: none; } .tpl-palette .hero { background: #fff3e3; min-height: 580px; display: flex; align-items: center; } .tpl-palette .hero-bg { inset: 36px 36px 36px 46%; border-radius: 42% 58% 62% 38% / 46% 40% 60% 54%; opacity: 1; box-shadow: 18px 18px 0 var(--c1), -10px 28px 0 -6px var(--c2); background-position: center; } .tpl-palette .hero::before { content: ""; position: absolute; left: -90px; bottom: -110px; width: 360px; height: 360px; border-radius: 50%; background: var(--c3); opacity: .85; z-index: 1; } .tpl-palette .hero::after { content: ""; position: absolute; inset: auto; left: 38%; top: 24px; width: 90px; height: 90px; border-radius: 55% 45% 60% 40%; background: var(--c4); z-index: 1; } .tpl-palette .hero .wrap { position: relative; z-index: 4; } .tpl-palette .hero-in { max-width: 520px; padding: 64px 0; color: var(--ink); } .tpl-palette .hero .eyebrow { background: var(--c2); color: var(--ink); backdrop-filter: none; border-radius: 99px; } .tpl-palette .hero h1 { color: var(--ink); font-size: clamp(38px, 5.6vw, 72px); line-height: .98; } .tpl-palette .hero p { color: var(--ink-2); opacity: 1; } .tpl-palette .btn { border-radius: 99px; font-family: 'Syne', sans-serif; font-weight: 800; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); } .tpl-palette .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); } .tpl-palette .btn-primary { background: var(--c1); color: #fff; } .tpl-palette .btn-accent { background: var(--c2); color: var(--ink); } .tpl-palette .btn-light { background: #fff; color: var(--ink); } .tpl-palette .section-head h2 { font-size: clamp(30px, 4vw, 50px); } .tpl-palette .section-head h2::after { content: ""; display: block; width: 90px; height: 10px; margin-top: 8px; border-radius: 9px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)); } .tpl-palette .section-head .link-arrow { color: var(--c4); font-weight: 800; } .tpl-palette .section-alt { background: #fff3e3; } .tpl-palette .rc-card, .tpl-palette .p-card { background: transparent; border: 0; padding: 0; box-shadow: none; } .tpl-palette .rc-card:hover, .tpl-palette .p-card:hover { box-shadow: none; } .tpl-palette .rc-img, .tpl-palette .p-img { aspect-ratio: 4 / 5; border-radius: 38% 62% 55% 45% / 42% 38% 62% 58%; background: var(--c2); box-shadow: 8px 8px 0 var(--c1); transition: border-radius .5s, box-shadow .3s; } .tpl-palette .rc-grid > :nth-child(5n+2) .rc-img, .tpl-palette .p-grid > :nth-child(5n+2) .p-img { background: var(--c3); box-shadow: 8px 8px 0 var(--c4); border-radius: 55% 45% 40% 60% / 58% 44% 56% 42%; } .tpl-palette .rc-grid > :nth-child(5n+3) .rc-img, .tpl-palette .p-grid > :nth-child(5n+3) .p-img { background: var(--c4); box-shadow: 8px 8px 0 var(--c2); border-radius: 44% 56% 62% 38% / 50% 60% 40% 50%; } .tpl-palette .rc-grid > :nth-child(5n+4) .rc-img, .tpl-palette .p-grid > :nth-child(5n+4) .p-img { background: var(--c5); box-shadow: 8px 8px 0 var(--c3); border-radius: 60% 40% 48% 52% / 44% 56% 44% 56%; } .tpl-palette .rc-grid > :nth-child(5n) .rc-img, .tpl-palette .p-grid > :nth-child(5n) .p-img { background: var(--c1); box-shadow: 8px 8px 0 var(--c5); border-radius: 48% 52% 36% 64% / 60% 40% 60% 40%; } .tpl-palette .rc-card:hover .rc-img, .tpl-palette .p-card:hover .p-img { border-radius: 30%; box-shadow: 12px 12px 0 var(--ink); } .tpl-palette .rc-card:hover .rc-img img, .tpl-palette .p-card:hover .p-img img { transform: scale(1.04); } .tpl-palette .rc-name, .tpl-palette .p-name { font-family: 'Syne', sans-serif; font-weight: 700 !important; font-size: 17px !important; margin-top: 18px; text-align: center; } .tpl-palette .rc-chip { text-align: center; } .tpl-palette .rc-chip span, .tpl-palette .p-cat { background: transparent; padding: 0; color: var(--ink-3); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .tpl-palette .rc-price { justify-content: center; } .tpl-palette .rc-price b, .tpl-palette .price b { display: inline-block; background: var(--ink); color: #fff; border-radius: 99px; padding: 4px 14px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; } .tpl-palette .rc-btn { border-radius: 99px; border: 2px solid var(--ink); font-family: 'Syne', sans-serif; font-weight: 700; color: var(--ink); background: #fff; } .tpl-palette .rc-btn:hover { background: var(--c2); } .tpl-palette .rc-btn-main { background: var(--c1); color: #fff; } .tpl-palette .rc-tag, .tpl-palette .tag { background: var(--c2); color: var(--ink); border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; font-weight: 800; padding: 6px 12px; transform: rotate(-6deg); } .tpl-palette .rc-tag-sale, .tpl-palette .tag-sale { background: var(--c1); color: #fff; } .tpl-palette .cat-tile { border-radius: 34px; aspect-ratio: 1; box-shadow: 8px 8px 0 var(--c1); } .tpl-palette .cat-grid > :nth-child(5n+2) { box-shadow: 8px 8px 0 var(--c3); } .tpl-palette .cat-grid > :nth-child(5n+3) { box-shadow: 8px 8px 0 var(--c4); } .tpl-palette .cat-grid > :nth-child(5n+4) { box-shadow: 8px 8px 0 var(--c2); } .tpl-palette .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(31,31,61,.82)); } .tpl-palette .cat-tile h3 { font-family: 'Syne', sans-serif; font-size: 22px; } .tpl-palette .main-img { aspect-ratio: 4 / 5; border-radius: 40% 60% 55% 45% / 38% 42% 58% 62%; box-shadow: 14px 14px 0 var(--c1), -8px 22px 0 -4px var(--c2); background: var(--c2); } .tpl-palette .pd-info h1 { font-size: clamp(32px, 4vw, 52px); } .tpl-palette .trust { background: #fff; border-color: var(--line); } .tpl-palette .trust-item .ic { background: var(--c2); color: var(--ink); border-radius: 55% 45% 50% 50%; } .tpl-palette .foot { background: var(--ink); border-top: 7px solid transparent; border-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5)) 1; } .tpl-palette .foot h4 { font-family: 'Syne', sans-serif; color: var(--c2); } @media (max-width: 860px) { .tpl-palette .hero { min-height: 640px; align-items: flex-start; } .tpl-palette .hero-bg { inset: auto 22px 24px 22px; height: 300px; box-shadow: 10px 10px 0 var(--c1); } .tpl-palette .hero-in { padding: 40px 0 340px; } .tpl-palette .hero::after { display: none; } } .tpl-palette .hero:has(.hero-stock) { background: #fff3e3; } /* ---------- Frame: gilded and lit. A dark gallery wall, every painting in an ornate gold frame under its own picture light ---------- */ .tpl-frame { --bg: #17110f; --bg-2: #211815; --line: #3b2c25; --ink: #f2e9d8; --ink-2: #cbbda6; --ink-3: #8f8170; --r: 2px; --r-lg: 3px; --r-sm: 2px; --gold: linear-gradient(145deg, #f6dc95, #a47a22 28%, #f1d27d 50%, #8c6118 76%, #e9c872); } .tpl-frame h1, .tpl-frame h2, .tpl-frame h3, .tpl-frame .display { font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: .06em; } .tpl-frame .announce { background: #0c0807; color: #d8b866; font-family: 'Cormorant SC', serif; letter-spacing: .26em; font-size: 12.5px; } .tpl-frame .hdr { background: #120d0b; border-bottom: 1px solid #5a4318; } .tpl-frame .hdr .brand { font-family: 'Cormorant SC', serif; font-weight: 700; letter-spacing: .24em; color: #e2c370; font-size: 1.2em; } .tpl-frame .hdr-search input[type=search] { background: #1d1512 !important; border: 1px solid #5a4318 !important; border-radius: 2px !important; color: var(--ink) !important; } .tpl-frame .nav-bar { background: #0e0a08; border-top: 0; border-bottom: 1px solid #3b2c25; } .tpl-frame .nav-bar .wrap { justify-content: center; } .tpl-frame .nav-link { font-family: 'Cormorant SC', serif; letter-spacing: .18em; font-size: 14px; color: #cbbda6; font-weight: 600; } .tpl-frame .nav-link:hover, .tpl-frame .nav-link.active { color: #f0d487; } .tpl-frame .nav-link.active::after { height: 1px; background: #d8b866; } .tpl-frame .hero { background: #120d0b; min-height: 580px; display: flex; align-items: center; justify-content: center; text-align: center; } .tpl-frame .hero-bg { opacity: .55; filter: sepia(.25) brightness(.8); background-position: center; } .tpl-frame .hero::after { background: radial-gradient(ellipse at 50% -10%, rgba(255,214,140,.32), rgba(18,13,11,.55) 55%, rgba(18,13,11,.92)); } .tpl-frame .hero .wrap { position: relative; z-index: 4; } .tpl-frame .hero-in { margin: 52px auto; max-width: 620px; padding: 44px 40px; text-align: center; background: rgba(18,13,11,.78); border: 12px solid transparent; border-image: var(--gold) 1; box-shadow: inset 0 0 0 2px #4a3410, inset 0 0 40px rgba(0,0,0,.7), 0 30px 60px -20px rgba(0,0,0,.9); } .tpl-frame .hero h1 { color: #f6e6c0; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.1; } .tpl-frame .hero p { color: #d9ccb4; opacity: 1; margin-left: auto; margin-right: auto; } .tpl-frame .hero .eyebrow { background: transparent; border: 0; color: #d8b866; letter-spacing: .3em; font-family: 'Cormorant SC', serif; backdrop-filter: none; } .tpl-frame .hero .row { justify-content: center; } .tpl-frame .btn { border-radius: 2px; font-family: 'Cormorant SC', serif; letter-spacing: .16em; font-weight: 700; font-size: 14px; } .tpl-frame .btn-primary, .tpl-frame .btn-accent { background: linear-gradient(145deg, #f1d27d, #b98a2e 55%, #e6c46e); color: #1b1208; border: 1px solid #f6dc95; } .tpl-frame .btn-primary:hover, .tpl-frame .btn-accent:hover { filter: brightness(1.1); } .tpl-frame .btn-light { background: transparent; color: #e2c370; border: 1px solid #b98a2e; } .tpl-frame .btn-light:hover { background: rgba(216,184,102,.14); } .tpl-frame .section-head { text-align: center; flex-direction: column; align-items: center; gap: 4px; } .tpl-frame .section-head h2 { font-size: clamp(26px, 3.4vw, 42px); color: #f0d487; } .tpl-frame .section-head h2::after { content: ""; display: block; width: 120px; height: 7px; margin: 10px auto 0; border-top: 1px solid #b98a2e; border-bottom: 1px solid #b98a2e; } .tpl-frame .section-head .link-arrow { color: #d8b866; } .tpl-frame .section-alt { background: #1b1411; } .tpl-frame .rc-card, .tpl-frame .p-card { position: relative; background: transparent; border: 0; padding: 22px 6px 6px; box-shadow: none; } .tpl-frame .rc-card:hover, .tpl-frame .p-card:hover { box-shadow: none; border-color: transparent; } .tpl-frame .rc-card::before, .tpl-frame .p-card::before { content: ""; position: absolute; z-index: 5; top: 2px; left: 50%; width: 44%; height: 7px; margin-left: -22%; border-radius: 4px; background: linear-gradient(#e6c46e, #7a5412); box-shadow: 0 0 26px 10px rgba(255,214,140,.32), 0 8px 16px rgba(0,0,0,.6); pointer-events: none; } .tpl-frame .rc-img, .tpl-frame .p-img { aspect-ratio: 4 / 5; padding: 14px; box-sizing: border-box; border-radius: 0; background: #2b1f18; border: 11px solid transparent; border-image: var(--gold) 1; box-shadow: inset 0 0 0 3px #5a3d12, inset 0 0 22px rgba(0,0,0,.7), 0 22px 34px -14px rgba(0,0,0,.85); } .tpl-frame .rc-img img, .tpl-frame .p-img img { box-shadow: 0 0 0 1px rgba(0,0,0,.6); } .tpl-frame .rc-card:hover .rc-img img, .tpl-frame .p-card:hover .p-img img { transform: scale(1.03); } .tpl-frame .rc-name, .tpl-frame .p-name { font-family: 'Cormorant SC', serif; font-weight: 700 !important; font-size: 17px !important; letter-spacing: .1em !important; text-align: center; color: #f0d487; margin-top: 14px; text-transform: none !important; } .tpl-frame .rc-chip { text-align: center; } .tpl-frame .rc-chip span, .tpl-frame .p-cat { background: transparent; padding: 0; color: #8f8170; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; letter-spacing: .04em; } .tpl-frame .rc-price { justify-content: center; } .tpl-frame .rc-price b, .tpl-frame .price b { color: #f2e9d8; font-family: 'Cormorant SC', serif; font-weight: 700; font-size: 18px; letter-spacing: .06em; } .tpl-frame .rc-price s, .tpl-frame .price s { color: #8f8170; } .tpl-frame .rc-btn { border-radius: 2px; border: 1px solid #b98a2e; color: #e2c370; background: transparent; font-family: 'Cormorant SC', serif; letter-spacing: .12em; font-weight: 700; } .tpl-frame .rc-btn:hover { background: rgba(216,184,102,.16); } .tpl-frame .rc-btn-main { background: linear-gradient(145deg, #f1d27d, #b98a2e 55%, #e6c46e); color: #1b1208; border-color: #f6dc95; } .tpl-frame .rc-tag, .tpl-frame .tag { background: #8e2a2a; color: #fbeed2; border-radius: 0; font-family: 'Cormorant SC', serif; letter-spacing: .12em; border: 1px solid #d8b866; } .tpl-frame .rc-tag-out, .tpl-frame .tag-out { background: #3b2c25; } .tpl-frame .cat-tile { border: 8px solid transparent; border-image: var(--gold) 1; aspect-ratio: 4 / 5; box-shadow: 0 22px 34px -14px rgba(0,0,0,.85); } .tpl-frame .cat-tile h3 { font-family: 'Cormorant SC', serif; font-size: 22px; letter-spacing: .1em; color: #f6e6c0; } .tpl-frame .main-img { aspect-ratio: 4 / 5; padding: 22px; box-sizing: border-box; border: 16px solid transparent; border-image: var(--gold) 1; background: #2b1f18; box-shadow: inset 0 0 0 4px #5a3d12, inset 0 0 28px rgba(0,0,0,.7), 0 30px 50px -20px rgba(0,0,0,.9); } .tpl-frame .main-img img { box-shadow: 0 0 0 1px rgba(0,0,0,.6); } .tpl-frame .pd-info h1 { color: #f6e6c0; font-size: clamp(30px, 3.8vw, 48px); } .tpl-frame .trust { background: #120d0b; border-color: #3b2c25; } .tpl-frame .trust-item .ic { background: transparent; border: 1px solid #b98a2e; color: #e2c370; border-radius: 50%; } .tpl-frame .foot { background: #0c0807; border-top: 1px solid #5a4318; } .tpl-frame .foot h4 { font-family: 'Cormorant SC', serif; letter-spacing: .2em; color: #e2c370; } @media (max-width: 860px) { .tpl-frame .hero { min-height: 480px; } .tpl-frame .hero-in { margin: 34px 14px; padding: 30px 22px; border-width: 9px; } .tpl-frame .rc-img, .tpl-frame .p-img { padding: 8px; border-width: 8px; } } .tpl-frame .hero:has(.hero-stock) { background: #120d0b; } /* ---------- Warli: Indian folk art. A terracotta mud-wall header with a row of Warli figures, dashed hand-drawn frames and a folk serif ---------- */ .tpl-warli { --bg: #f7ecdc; --bg-2: #efdfc6; --line: #d9bf9a; --ink: #3a1d10; --ink-2: #6e4630; --ink-3: #9b7a5e; --r: 3px; --r-lg: 4px; --r-sm: 2px; --warli-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40' fill='%23fff' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='7' r='3.4'/%3E%3Cpath d='M14 12h12l-6 11zM14 36h12l-6-12z'/%3E%3Cpath d='M14 12l-7 8M26 12l7 8M16 36l-3 4M24 36l3 4' fill='none'/%3E%3Ccircle cx='62' cy='7' r='3.4'/%3E%3Cpath d='M56 12h12l-6 11zM56 36h12l-6-12z'/%3E%3Cpath d='M56 12l-7 8M68 12l7 8M58 36l-3 4M66 36l3 4' fill='none'/%3E%3Cpath d='M26 12l7 8M49 20l7-8' fill='none'/%3E%3Cpath d='M105 38V18M105 18l-9 9M105 18l9 9M105 27l-12 9M105 27l12 9' fill='none'/%3E%3Ccircle cx='135' cy='10' r='5' fill='none'/%3E%3Cpath d='M135 2v-2M135 20v-2M125 10h-2M147 10h-2' fill='none'/%3E%3C/svg%3E"); --warli-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40' fill='%238c3b22' stroke='%238c3b22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='7' r='3.4'/%3E%3Cpath d='M14 12h12l-6 11zM14 36h12l-6-12z'/%3E%3Cpath d='M14 12l-7 8M26 12l7 8M16 36l-3 4M24 36l3 4' fill='none'/%3E%3Ccircle cx='62' cy='7' r='3.4'/%3E%3Cpath d='M56 12h12l-6 11zM56 36h12l-6-12z'/%3E%3Cpath d='M56 12l-7 8M68 12l7 8M58 36l-3 4M66 36l3 4' fill='none'/%3E%3Cpath d='M26 12l7 8M49 20l7-8' fill='none'/%3E%3Cpath d='M105 38V18M105 18l-9 9M105 18l9 9M105 27l-12 9M105 27l12 9' fill='none'/%3E%3Ccircle cx='135' cy='10' r='5' fill='none'/%3E%3Cpath d='M135 2v-2M135 20v-2M125 10h-2M147 10h-2' fill='none'/%3E%3C/svg%3E"); background-image: radial-gradient(rgba(140,59,34,.06) 1px, transparent 1.4px); background-size: 14px 14px; } .tpl-warli h1, .tpl-warli h2, .tpl-warli h3, .tpl-warli .display { font-family: 'Rozha One', Georgia, serif; font-weight: 400; letter-spacing: .01em; } .tpl-warli .announce { background: #5e2412; color: #f7e1b5; font-size: 12.5px; letter-spacing: .1em; } .tpl-warli .hdr { background: #8c3b22; color: #fff; border-bottom: 0; } .tpl-warli .hdr::after { content: ""; display: block; height: 34px; background: #7a3019 var(--warli-w) repeat-x center / auto 28px; } .tpl-warli .hdr .brand { font-family: 'Rozha One', serif; color: #fff; font-size: 1.35em; } .tpl-warli .hdr .icon-link, .tpl-warli .hdr .burger { color: #fff; } .tpl-warli .hdr-search input[type=search] { background: #fbf1e0 !important; border: 2px dashed #e8c88a !important; border-radius: 3px !important; color: #3a1d10 !important; } .tpl-warli .nav-bar { background: #f0dcc0; border-top: 0; border-bottom: 2px solid #8c3b22; } .tpl-warli .nav-bar .wrap { justify-content: center; } .tpl-warli .nav-link { font-family: 'Rozha One', serif; font-size: 14px; color: #6e2f1a; letter-spacing: .02em; } .tpl-warli .nav-link:hover, .tpl-warli .nav-link.active { color: #8c3b22; } .tpl-warli .nav-link.active::after { height: 3px; background: #8c3b22; border-radius: 2px; } .tpl-warli .hero { background: #8c3b22; min-height: 540px; display: flex; align-items: center; } .tpl-warli .hero-bg { opacity: .9; background-position: center; filter: sepia(.2) saturate(.95); } .tpl-warli .hero::after { background: linear-gradient(90deg, rgba(94,36,18,.9), rgba(94,36,18,.35) 62%, rgba(94,36,18,0)); } .tpl-warli .hero::before { content: ""; position: absolute; inset: 16px; z-index: 3; border: 2px dashed rgba(247,225,181,.7); pointer-events: none; } .tpl-warli .hero .wrap { position: relative; z-index: 4; } .tpl-warli .hero-in { max-width: 520px; padding: 64px 0; } .tpl-warli .hero .eyebrow { background: transparent; border: 2px solid #e8c88a; color: #f7e1b5; border-radius: 3px; backdrop-filter: none; letter-spacing: .14em; } .tpl-warli .hero h1 { color: #fff; font-size: clamp(32px, 4.8vw, 60px); line-height: 1.1; } .tpl-warli .hero p { color: #f7e1b5; opacity: 1; } .tpl-warli .btn { border-radius: 3px; font-family: 'Rozha One', serif; font-weight: 400; letter-spacing: .04em; border: 2px solid #8c3b22; } .tpl-warli .btn-primary { background: #8c3b22; color: #fff; } .tpl-warli .btn-primary:hover { background: #6e2f1a; } .tpl-warli .btn-accent { background: #e8c88a; color: #4a1f0f; border-color: #e8c88a; } .tpl-warli .btn-light { background: transparent; color: #fff; border: 2px dashed #e8c88a; } .tpl-warli .section-head { flex-direction: column; align-items: center; text-align: center; gap: 2px; } .tpl-warli .section-head h2 { font-size: clamp(26px, 3.4vw, 42px); color: #8c3b22; } .tpl-warli .section-head h2::after { content: ""; display: block; width: 190px; height: 28px; margin: 8px auto 0; background: var(--warli-d) repeat-x center / auto 26px; } .tpl-warli .section-head .link-arrow { color: #8c3b22; font-weight: 700; } .tpl-warli .section-alt { background: #f0dcc0; } .tpl-warli .rc-card, .tpl-warli .p-card { background: #fffaf0; border: 2px solid #8c3b22; border-radius: 3px; padding: 10px 10px 14px; outline: 1px dashed #c9926a; outline-offset: -7px; transition: transform .2s, box-shadow .2s; } .tpl-warli .rc-card:hover, .tpl-warli .p-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 #e8c88a; border-color: #8c3b22; } .tpl-warli .rc-img, .tpl-warli .p-img { aspect-ratio: 4 / 5; border-radius: 2px; border: 3px solid #fffaf0; outline: 1px solid #8c3b22; background: #efdfc6; } .tpl-warli .rc-name, .tpl-warli .p-name { font-family: 'Rozha One', serif; font-weight: 400 !important; font-size: 17px !important; text-align: center; color: #3a1d10; margin-top: 12px; } .tpl-warli .rc-chip { text-align: center; } .tpl-warli .rc-chip span, .tpl-warli .p-cat { background: transparent; padding: 0; color: #9b7a5e; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .tpl-warli .rc-price { justify-content: center; } .tpl-warli .rc-price b, .tpl-warli .price b { color: #8c3b22; font-family: 'Rozha One', serif; font-weight: 400; font-size: 18px; } .tpl-warli .rc-btn { border-radius: 3px; border: 2px solid #8c3b22; color: #8c3b22; background: transparent; font-family: 'Rozha One', serif; font-weight: 400; } .tpl-warli .rc-btn:hover { background: #8c3b22; color: #fff; } .tpl-warli .rc-btn-main { background: #8c3b22; color: #fff; } .tpl-warli .rc-tag, .tpl-warli .tag { background: #8c3b22; color: #fff; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; text-align: center; font-size: 10px; line-height: 1.05; padding: 0; border: 2px solid #e8c88a; font-weight: 700; } .tpl-warli .rc-tag-out, .tpl-warli .tag-out { background: #7c6a5a; } .tpl-warli .cat-tile { border: 3px solid #8c3b22; border-radius: 3px; aspect-ratio: 4 / 5; outline: 1px dashed #c9926a; outline-offset: -8px; } .tpl-warli .cat-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(94,36,18,.86)); } .tpl-warli .cat-tile h3 { font-family: 'Rozha One', serif; font-size: 22px; } .tpl-warli .main-img { aspect-ratio: 4 / 5; border: 3px solid #8c3b22; border-radius: 3px; outline: 1px dashed #c9926a; outline-offset: -9px; background: #efdfc6; } .tpl-warli .pd-info h1 { font-size: clamp(30px, 3.8vw, 46px); color: #8c3b22; } .tpl-warli .trust { background: #f0dcc0; border-color: #d9bf9a; } .tpl-warli .trust-item .ic { background: #8c3b22; color: #fff; border-radius: 50%; } .tpl-warli .foot { background: #5e2412; border-top: 0; } .tpl-warli .foot::before { content: ""; display: block; height: 34px; background: #7a3019 var(--warli-w) repeat-x center / auto 28px; } .tpl-warli .foot h4 { font-family: 'Rozha One', serif; font-weight: 400; color: #e8c88a; letter-spacing: .04em; } @media (max-width: 860px) { .tpl-warli .hero { min-height: 470px; } .tpl-warli .hero-in { padding: 44px 0; } .tpl-warli .hero::after { background: linear-gradient(180deg, rgba(94,36,18,.55), rgba(94,36,18,.9)); } } .tpl-warli .hero:has(.hero-stock) { background: #8c3b22; } /* ---------- Aquarelle: watercolour wash. Soft pastel clouds on paper, wobbly hand-drawn frames, handwritten names and brush-stroke prices ---------- */ .tpl-aquarelle { --bg: #fbf8f3; --bg-2: #f3eee6; --line: #e5ddd0; --ink: #2b3445; --ink-2: #5b6577; --ink-3: #8d96a6; --r: 14px; --r-lg: 18px; --r-sm: 10px; --hand: 'Caveat', 'Segoe Script', cursive; --wob: 255px 15px 225px 15px / 15px 225px 15px 255px; background-image: radial-gradient(42vw 30vw at 6% 4%, rgba(229,143,166,.2), transparent 70%), radial-gradient(40vw 28vw at 96% 12%, rgba(74,111,165,.17), transparent 70%), radial-gradient(46vw 30vw at 72% 88%, rgba(126,200,180,.18), transparent 70%); } .tpl-aquarelle h1, .tpl-aquarelle h2, .tpl-aquarelle h3, .tpl-aquarelle .display { font-family: 'Lora', Georgia, serif; font-weight: 500; font-style: italic; letter-spacing: 0; } .tpl-aquarelle .announce { background: linear-gradient(90deg, #e9a9bb, #a9bfe0, #a8d8c8); color: #2b3445; font-family: var(--hand); font-size: 18px; letter-spacing: .02em; } .tpl-aquarelle .hdr { background: rgba(251,248,243,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .tpl-aquarelle .hdr .brand { font-family: var(--hand); font-weight: 700; font-size: 2em; color: var(--brand); letter-spacing: 0; } .tpl-aquarelle .hdr-search input[type=search] { background: #fffdf9 !important; border: 2px solid var(--ink) !important; border-radius: var(--wob) !important; } .tpl-aquarelle .nav-bar { background: transparent; border-top: 0; } .tpl-aquarelle .nav-bar .wrap { justify-content: center; } .tpl-aquarelle .nav-link { font-family: 'Lora', serif; font-style: italic; font-size: 15px; color: var(--ink-2); } .tpl-aquarelle .nav-link:hover, .tpl-aquarelle .nav-link.active { color: var(--accent); } .tpl-aquarelle .nav-link.active::after { height: 6px; border-radius: 6px; background: rgba(229,143,166,.55); bottom: 4px; } .tpl-aquarelle .hero { background: #e9eef6; min-height: 560px; display: flex; align-items: center; } .tpl-aquarelle .hero-bg { opacity: .95; background-position: center; filter: saturate(.9) brightness(1.02); } .tpl-aquarelle .hero::after { background: linear-gradient(90deg, rgba(251,248,243,.82), rgba(251,248,243,.25) 60%, rgba(251,248,243,0)); } .tpl-aquarelle .hero .wrap { position: relative; z-index: 4; } .tpl-aquarelle .hero-in { max-width: 480px; margin: 56px 0; padding: 38px 40px 40px; background: #fffdf9; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wob); box-shadow: 8px 10px 0 rgba(169,191,224,.65); transform: rotate(-.8deg); } .tpl-aquarelle .hero .eyebrow { background: transparent; color: var(--accent); font-family: var(--hand); font-size: 24px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0; backdrop-filter: none; } .tpl-aquarelle .hero h1 { color: var(--ink); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; } .tpl-aquarelle .hero p { color: var(--ink-2); opacity: 1; } .tpl-aquarelle .btn { border-radius: 99px; font-weight: 600; } .tpl-aquarelle .btn-primary { background: linear-gradient(135deg, var(--brand), #6f93c4); color: #fff; box-shadow: 0 8px 18px -8px rgba(74,111,165,.7); } .tpl-aquarelle .btn-accent { background: linear-gradient(135deg, var(--accent), #f0b0c0); color: #3a2030; box-shadow: 0 8px 18px -8px rgba(229,143,166,.8); } .tpl-aquarelle .btn-light { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--wob); } .tpl-aquarelle .section-head h2 { font-size: clamp(28px, 3.6vw, 44px); } .tpl-aquarelle .section-head p { font-family: var(--hand); font-size: 20px; color: var(--accent); } .tpl-aquarelle .section-head .link-arrow { font-family: var(--hand); font-size: 20px; color: var(--brand); } .tpl-aquarelle .section-alt { background: transparent; } .tpl-aquarelle .rc-card, .tpl-aquarelle .p-card { position: relative; background: transparent; border: 0; padding: 14px 14px 10px; box-shadow: none; isolation: isolate; } .tpl-aquarelle .rc-card::before, .tpl-aquarelle .p-card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: radial-gradient(circle at 30% 30%, rgba(229,143,166,.42), rgba(229,143,166,0) 70%); transition: transform .4s; } .tpl-aquarelle .rc-grid > :nth-child(3n+2)::before, .tpl-aquarelle .p-grid > :nth-child(3n+2)::before { background: radial-gradient(circle at 65% 35%, rgba(116,160,214,.42), rgba(116,160,214,0) 70%); border-radius: 54% 46% 58% 42% / 44% 56% 44% 56%; } .tpl-aquarelle .rc-grid > :nth-child(3n)::before, .tpl-aquarelle .p-grid > :nth-child(3n)::before { background: radial-gradient(circle at 40% 65%, rgba(126,200,180,.48), rgba(126,200,180,0) 70%); border-radius: 44% 56% 50% 50% / 58% 42% 58% 42%; } .tpl-aquarelle .rc-card:hover::before, .tpl-aquarelle .p-card:hover::before { transform: scale(1.08) rotate(3deg); } .tpl-aquarelle .rc-card:hover, .tpl-aquarelle .p-card:hover { box-shadow: none; } .tpl-aquarelle .rc-img, .tpl-aquarelle .p-img { aspect-ratio: 4 / 5; border-radius: 6px; background: #f1ebe0; box-shadow: 0 10px 20px -10px rgba(43,52,69,.45), 0 0 0 6px #fffdf9; transform: rotate(-.7deg); transition: transform .3s; } .tpl-aquarelle .rc-grid > :nth-child(even) .rc-img, .tpl-aquarelle .p-grid > :nth-child(even) .p-img { transform: rotate(.8deg); } .tpl-aquarelle .rc-card:hover .rc-img, .tpl-aquarelle .p-card:hover .p-img { transform: rotate(0) translateY(-4px); } .tpl-aquarelle .rc-name, .tpl-aquarelle .p-name { font-family: var(--hand); font-weight: 700 !important; font-size: 25px !important; line-height: 1.05; text-align: center; margin-top: 16px; color: var(--ink); font-style: normal; } .tpl-aquarelle .rc-chip { text-align: center; } .tpl-aquarelle .rc-chip span, .tpl-aquarelle .p-cat { background: transparent; padding: 0; color: var(--ink-3); font-family: 'Lora', serif; font-style: italic; font-size: 12.5px; } .tpl-aquarelle .rc-price { justify-content: center; } .tpl-aquarelle .rc-price b, .tpl-aquarelle .price b { font-family: 'Lora', serif; font-weight: 500; font-size: 17px; color: var(--ink); background: linear-gradient(transparent 58%, rgba(229,143,166,.45) 58%); padding: 0 6px; } .tpl-aquarelle .rc-btn { border-radius: 99px; border: 2px solid var(--ink); background: #fffdf9; color: var(--ink); font-weight: 600; } .tpl-aquarelle .rc-btn:hover { background: rgba(169,191,224,.4); } .tpl-aquarelle .rc-btn-main { background: linear-gradient(135deg, var(--brand), #6f93c4); color: #fff; border-color: transparent; } .tpl-aquarelle .rc-tag, .tpl-aquarelle .tag { background: rgba(229,143,166,.92); color: #3a2030; border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; font-family: var(--hand); font-size: 17px; letter-spacing: 0; padding: 4px 12px; transform: rotate(-5deg); } .tpl-aquarelle .rc-tag-out, .tpl-aquarelle .tag-out { background: rgba(169,175,188,.95); } .tpl-aquarelle .cat-tile { border-radius: var(--wob); aspect-ratio: 4 / 5; border: 2px solid var(--ink); box-shadow: 8px 10px 0 rgba(169,191,224,.55); } .tpl-aquarelle .cat-grid > :nth-child(even) { box-shadow: 8px 10px 0 rgba(229,143,166,.5); } .tpl-aquarelle .cat-tile h3 { font-family: var(--hand); font-size: 30px; font-style: normal; font-weight: 700; } .tpl-aquarelle .main-img { aspect-ratio: 4 / 5; border-radius: 8px; box-shadow: 0 16px 30px -14px rgba(43,52,69,.5), 0 0 0 10px #fffdf9; margin: 10px; } .tpl-aquarelle .pd-info h1 { font-size: clamp(30px, 3.8vw, 48px); } .tpl-aquarelle .trust { background: rgba(243,238,230,.7); border-color: var(--line); } .tpl-aquarelle .trust-item span { font-family: var(--hand); font-size: 19px; } .tpl-aquarelle .trust-item .ic { background: rgba(169,191,224,.45); color: var(--ink); border-radius: 55% 45% 50% 50%; } .tpl-aquarelle .foot { background: linear-gradient(160deg, #2b3445, #3b4a6a); } .tpl-aquarelle .foot h4 { font-family: var(--hand); font-size: 26px; letter-spacing: 0; text-transform: none; color: #f2c5d1; font-style: normal; } @media (max-width: 860px) { .tpl-aquarelle .hero { min-height: 480px; } .tpl-aquarelle .hero-in { margin: 36px 0; padding: 28px 24px 30px; } } .tpl-aquarelle .hero:has(.hero-stock) { background: #e9eef6; } /* Art & Craft: card titles keep each template's own typeface (a base rule would otherwise force the shop font) */ .tpl-gallery .rc-name, .tpl-gallery .rc-name a, .tpl-gallery .p-name, .tpl-gallery .p-name a { font-family: 'Cormorant Garamond', Georgia, serif !important; } .tpl-canvas .rc-name, .tpl-canvas .rc-name a, .tpl-canvas .p-name, .tpl-canvas .p-name a { font-family: 'Caveat', 'Segoe Script', cursive !important; } .tpl-palette .rc-name, .tpl-palette .rc-name a, .tpl-palette .p-name, .tpl-palette .p-name a { font-family: 'Syne', 'Trebuchet MS', sans-serif !important; } .tpl-frame .rc-name, .tpl-frame .rc-name a, .tpl-frame .p-name, .tpl-frame .p-name a { font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important; } .tpl-warli .rc-name, .tpl-warli .rc-name a, .tpl-warli .p-name, .tpl-warli .p-name a { font-family: 'Rozha One', Georgia, serif !important; } .tpl-aquarelle .rc-name, .tpl-aquarelle .rc-name a, .tpl-aquarelle .p-name, .tpl-aquarelle .p-name a { font-family: 'Caveat', 'Segoe Script', cursive !important; } .tpl-gallery .rc-actions { gap: 6px; } .tpl-gallery .rc-btn { min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; } @media (max-width: 480px) { .tpl-gallery .rc-btn { letter-spacing: .06em; font-size: 9.5px; } } /* ==================================================================================================================================== ART & CRAFT, second set: layouts that are NOT the standard shop. Prism and Nocturne (frosted glass), Salon (side rail + mixed-size wall), Reel (split banner + horizontal film strip). ==================================================================================================================================== */ /* ---------- Prism: light frosted glass. A pastel colour mesh behind everything, a floating glass header, glass tiles with a glossy highlight ---------- */ .tpl-prism { --bg: #efecfa; --bg-2: rgba(255,255,255,.5); --line: rgba(255,255,255,.75); --ink: #1d1b3a; --ink-2: #4b4a6b; --ink-3: #8887a6; --r: 24px; --r-lg: 30px; --r-sm: 14px; --glass: rgba(255,255,255,.52); --glass-b: rgba(255,255,255,.8); --blur: blur(22px) saturate(165%); --shadow: 0 18px 46px -22px rgba(60,50,130,.5); background-color: #ece9f8; background-image: radial-gradient(60vw 52vh at 8% 0%, #ffd0e4, transparent 62%), radial-gradient(56vw 52vh at 96% 8%, #c6d6ff, transparent 62%), radial-gradient(62vw 60vh at 72% 100%, #c6f1e1, transparent 62%), radial-gradient(42vw 42vh at 0% 82%, #ffe8b4, transparent 62%); background-attachment: fixed; } .tpl-prism::before, .tpl-prism::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(36px); pointer-events: none; } .tpl-prism::before { width: 44vmax; height: 44vmax; left: -14vmax; top: 10vh; background: radial-gradient(circle, rgba(255,110,170,.34), transparent 66%); animation: prism-drift 30s ease-in-out infinite alternate; } .tpl-prism::after { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -6vh; background: radial-gradient(circle, rgba(110,130,255,.34), transparent 66%); animation: prism-drift 36s ease-in-out infinite alternate-reverse; } @keyframes prism-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vmax,-4vmax,0) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .tpl-prism::before, .tpl-prism::after { animation: none; } } .tpl-prism h1, .tpl-prism h2, .tpl-prism h3, .tpl-prism .display { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: -.025em; } .tpl-prism .announce { background: rgba(255,255,255,.4); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--ink); border-bottom: 1px solid var(--glass-b); font-weight: 600; letter-spacing: .04em; } .tpl-prism .hdr { position: sticky; top: 12px; z-index: 60; width: min(1240px, calc(100% - 28px)); margin: 14px auto 0; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-b); border-radius: 32px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.95); } .tpl-prism .hdr-in { padding-left: 14px; padding-right: 14px; } .tpl-prism .hdr .wrap { width: 100%; } .tpl-prism .hdr .brand { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.03em; color: var(--ink); } .tpl-prism .hdr-search input[type=search] { background: rgba(255,255,255,.6) !important; border: 1px solid var(--glass-b) !important; border-radius: 99px !important; box-shadow: inset 0 2px 6px rgba(80,70,160,.08); } .tpl-prism .nav-bar { background: transparent; border-top: 1px solid rgba(255,255,255,.7); } .tpl-prism .nav-bar .wrap { padding-left: 10px; } .tpl-prism .nav-link { font-weight: 700; font-size: 13.5px; color: var(--ink-2); border-radius: 99px; padding: 7px 14px; margin: 5px 1px; } .tpl-prism .nav-link:hover { background: rgba(255,255,255,.7); color: var(--ink); } .tpl-prism .nav-link.active { background: linear-gradient(135deg, #7c5cff, #ff5d9e); color: #fff; box-shadow: 0 8px 18px -8px rgba(124,92,255,.8); } .tpl-prism .nav-link.active::after { display: none; } .tpl-prism .hero { margin: 14px; border-radius: 38px; min-height: 640px; display: flex; align-items: flex-end; background: #c9c3ee; box-shadow: var(--shadow); } .tpl-prism .hero-bg { opacity: 1; background-position: center; } .tpl-prism .hero::after { background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(40,30,110,.35)); } .tpl-prism .hero .wrap { position: relative; z-index: 4; } .tpl-prism .hero-in { max-width: 540px; margin: 0 0 40px; padding: 34px 38px 36px; background: rgba(255,255,255,.34); backdrop-filter: blur(28px) saturate(175%); -webkit-backdrop-filter: blur(28px) saturate(175%); border: 1px solid rgba(255,255,255,.7); border-radius: 30px; box-shadow: 0 24px 60px -24px rgba(40,30,110,.6), inset 0 1px 0 rgba(255,255,255,.95); color: var(--ink); } .tpl-prism .hero .eyebrow { background: rgba(255,255,255,.6); color: var(--ink); backdrop-filter: none; border: 1px solid #fff; } .tpl-prism .hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; background: linear-gradient(120deg, #1d1b3a 10%, #6b4bff 55%, #ff4f98); -webkit-background-clip: text; background-clip: text; color: transparent; } .tpl-prism .hero p { color: var(--ink-2); opacity: 1; } .tpl-prism .btn { border-radius: 99px; font-weight: 700; border: 1px solid var(--glass-b); } .tpl-prism .btn-primary, .tpl-prism .btn-accent { background: linear-gradient(135deg, #7c5cff, #ff5d9e); color: #fff; border-color: transparent; box-shadow: 0 12px 26px -10px rgba(124,92,255,.85), inset 0 1px 0 rgba(255,255,255,.5); } .tpl-prism .btn-primary:hover, .tpl-prism .btn-accent:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); } .tpl-prism .btn-light { background: rgba(255,255,255,.6); color: var(--ink); backdrop-filter: blur(10px); } .tpl-prism .section-head h2 { font-size: clamp(28px, 3.6vw, 46px); } .tpl-prism .section-head p { color: var(--ink-3); } .tpl-prism .section-head .link-arrow { background: var(--glass); border: 1px solid var(--glass-b); border-radius: 99px; padding: 7px 16px; color: var(--ink); font-weight: 700; backdrop-filter: blur(10px); } .tpl-prism .section-alt { background: transparent; } .tpl-prism .rc-card, .tpl-prism .p-card { position: relative; overflow: hidden; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-b); border-radius: 28px; padding: 12px 12px 16px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.95); transition: transform .3s, box-shadow .3s; isolation: isolate; } .tpl-prism .rc-card::after, .tpl-prism .p-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 36%), linear-gradient(305deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 22%); } .tpl-prism .rc-card:hover, .tpl-prism .p-card:hover { transform: translateY(-7px); box-shadow: 0 30px 60px -24px rgba(90,70,200,.6), inset 0 1px 0 #fff; border-color: #fff; } .tpl-prism .rc-img, .tpl-prism .p-img { aspect-ratio: 4 / 5; border-radius: 20px; background: rgba(255,255,255,.5); box-shadow: 0 10px 22px -12px rgba(60,50,130,.55); } .tpl-prism .rc-name, .tpl-prism .p-name { font-family: 'Manrope', sans-serif; font-weight: 800 !important; font-size: 16px !important; letter-spacing: -.01em !important; } .tpl-prism .rc-chip span, .tpl-prism .p-cat { background: rgba(255,255,255,.65); border: 1px solid #fff; color: var(--ink-3); border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 700; } .tpl-prism .rc-price b, .tpl-prism .price b { font-family: 'Manrope', sans-serif; font-weight: 800; background: linear-gradient(120deg, #5b3df0, #e8368b); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 18px; } .tpl-prism .rc-btn { border-radius: 99px; background: rgba(255,255,255,.65); border: 1px solid #fff; color: var(--ink); font-weight: 700; backdrop-filter: blur(8px); } .tpl-prism .rc-btn:hover { background: #fff; } .tpl-prism .rc-btn-main { background: linear-gradient(135deg, #7c5cff, #ff5d9e); color: #fff; border-color: transparent; } .tpl-prism .rc-tag, .tpl-prism .tag { z-index: 5; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); color: var(--ink); border: 1px solid #fff; border-radius: 99px; font-weight: 800; box-shadow: 0 6px 14px -8px rgba(60,50,130,.6); } .tpl-prism .rc-tag-sale, .tpl-prism .tag-sale { background: linear-gradient(135deg, #ff5d9e, #ff8a5c); color: #fff; border-color: transparent; } .tpl-prism .rc-heart { z-index: 5; } .tpl-prism .cat-tile { border-radius: 28px; aspect-ratio: 4 / 5; border: 1px solid var(--glass-b); box-shadow: var(--shadow); } .tpl-prism .cat-tile::after { background: linear-gradient(180deg, transparent 50%, rgba(40,30,110,.35)); } .tpl-prism .cat-tile .t { left: 12px; right: 12px; bottom: 12px; padding: 11px 16px; border-radius: 18px; background: rgba(255,255,255,.42); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); border: 1px solid rgba(255,255,255,.75); } .tpl-prism .cat-tile h3 { color: var(--ink); font-size: 18px; text-shadow: none; } .tpl-prism .main-img { aspect-ratio: 4 / 5; border-radius: 30px; padding: 10px; background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--shadow); } .tpl-prism .main-img img { border-radius: 22px; } .tpl-prism .pd-info h1 { font-size: clamp(30px, 3.8vw, 48px); } .tpl-prism .trust { margin: 18px 14px; border-radius: 28px; background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-b); } .tpl-prism .trust-item .ic { background: linear-gradient(135deg, #7c5cff, #ff5d9e); color: #fff; border-radius: 14px; } .tpl-prism .foot { margin: 28px 14px 14px; border-radius: 36px; background: rgba(34,30,84,.84); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.18); } .tpl-prism .foot h4 { font-family: 'Manrope', sans-serif; color: #ffd6ec; } @media (max-width: 860px) { .tpl-prism .hero { min-height: 520px; margin: 10px; border-radius: 28px; } .tpl-prism .hero-in { margin-bottom: 18px; padding: 24px 22px; } .tpl-prism .hdr { top: 8px; border-radius: 26px; } } .tpl-prism .hero:has(.hero-stock) { background: #c9c3ee; } /* ---------- Nocturne: dark neon glass. Near-black, glowing colour orbs, dark glass panels with gradient edges and neon buttons ---------- */ .tpl-nocturne { --bg: #08080f; --bg-2: #0f0f1c; --line: rgba(255,255,255,.12); --ink: #f3f2ff; --ink-2: #bbb9d8; --ink-3: #7f7da3; --r: 20px; --r-lg: 26px; --r-sm: 12px; --gl: rgba(255,255,255,.06); --gb: rgba(255,255,255,.15); --neon: linear-gradient(120deg, #7c3aed, #22d3ee 55%, #f472b6); background-color: #07070f; background-image: radial-gradient(52vw 46vh at 12% 0%, rgba(109,40,217,.5), transparent 62%), radial-gradient(48vw 44vh at 94% 18%, rgba(14,165,164,.42), transparent 62%), radial-gradient(56vw 52vh at 62% 100%, rgba(190,24,93,.4), transparent 62%); background-attachment: fixed; } .tpl-nocturne h1, .tpl-nocturne h2, .tpl-nocturne h3, .tpl-nocturne .display { font-family: 'Unbounded', 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.02em; } .tpl-nocturne .announce { background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(34,211,238,.25)); color: #fff; backdrop-filter: blur(10px); border-bottom: 1px solid var(--gb); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; } .tpl-nocturne .hdr { background: rgba(10,10,20,.62); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid transparent; border-image: var(--neon) 1; } .tpl-nocturne .hdr .brand { font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 18px rgba(124,58,237,.8); } .tpl-nocturne .hdr .icon-link, .tpl-nocturne .hdr .burger { color: #fff; } .tpl-nocturne .hdr-search input[type=search] { background: var(--gl) !important; border: 1px solid var(--gb) !important; border-radius: 14px !important; color: #fff !important; } .tpl-nocturne .nav-bar { background: transparent; border-top: 0; } .tpl-nocturne .nav-link { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .tpl-nocturne .nav-link:hover, .tpl-nocturne .nav-link.active { color: #fff; text-shadow: 0 0 14px rgba(34,211,238,.9); } .tpl-nocturne .nav-link.active::after { height: 2px; background: var(--neon); box-shadow: 0 0 12px rgba(34,211,238,.9); } .tpl-nocturne .hero { background: #0a0a14; min-height: 640px; display: flex; align-items: center; } .tpl-nocturne .hero-bg { opacity: .78; background-position: center; filter: saturate(1.2) contrast(1.05); } .tpl-nocturne .hero::after { background: linear-gradient(90deg, rgba(8,8,15,.88), rgba(8,8,15,.2) 70%), radial-gradient(60vw 50vh at 90% 100%, rgba(244,114,182,.35), transparent 60%); } .tpl-nocturne .hero .wrap { position: relative; z-index: 4; } .tpl-nocturne .hero-in { max-width: 540px; padding: 38px 40px 42px; background: var(--gl); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border: 1px solid transparent; border-radius: 28px; background-image: linear-gradient(rgba(14,14,26,.72), rgba(14,14,26,.72)), var(--neon); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 30px 80px -30px rgba(124,58,237,.7); margin: 60px 0; } .tpl-nocturne .hero .eyebrow { background: transparent; border: 1px solid var(--gb); color: #7ff0ff; backdrop-filter: none; letter-spacing: .2em; } .tpl-nocturne .hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; text-shadow: 0 0 30px rgba(124,58,237,.7); } .tpl-nocturne .hero p { color: var(--ink-2); opacity: 1; } .tpl-nocturne .btn { border-radius: 14px; font-weight: 700; border: 1px solid transparent; } .tpl-nocturne .btn-primary, .tpl-nocturne .btn-accent { color: #fff; background: linear-gradient(rgba(14,14,26,.2), rgba(14,14,26,.2)) padding-box, var(--neon) border-box; background-color: transparent; box-shadow: 0 0 26px -6px rgba(124,58,237,.9), inset 0 0 18px rgba(124,58,237,.25); } .tpl-nocturne .btn-primary:hover, .tpl-nocturne .btn-accent:hover { box-shadow: 0 0 36px -2px rgba(34,211,238,.9), inset 0 0 24px rgba(34,211,238,.25); } .tpl-nocturne .btn-light { background: var(--gl); color: #fff; border: 1px solid var(--gb); backdrop-filter: blur(10px); } .tpl-nocturne .section-head h2 { font-size: clamp(24px, 3.2vw, 38px); text-shadow: 0 0 24px rgba(124,58,237,.6); } .tpl-nocturne .section-head p { color: var(--ink-3); } .tpl-nocturne .section-head .link-arrow { color: #7ff0ff; } .tpl-nocturne .section-alt { background: rgba(255,255,255,.025); } .tpl-nocturne .rc-card, .tpl-nocturne .p-card { position: relative; background: var(--gl); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--gb); border-radius: 22px; padding: 10px 10px 14px; transition: transform .3s, box-shadow .3s, border-color .3s; } .tpl-nocturne .rc-card:hover, .tpl-nocturne .p-card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 26px 60px -24px rgba(124,58,237,.8), 0 0 40px -12px rgba(34,211,238,.6); } .tpl-nocturne .rc-img, .tpl-nocturne .p-img { aspect-ratio: 4 / 5; border-radius: 16px; background: #14142a; box-shadow: 0 0 0 1px var(--gb); } .tpl-nocturne .rc-name, .tpl-nocturne .p-name { font-family: 'Unbounded', sans-serif; font-weight: 500 !important; font-size: 13.5px !important; letter-spacing: -.01em !important; color: #fff; } .tpl-nocturne .rc-chip span, .tpl-nocturne .p-cat { background: transparent; color: var(--ink-3); border: 1px solid var(--gb); border-radius: 99px; padding: 2px 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; } .tpl-nocturne .rc-price b, .tpl-nocturne .price b { color: #7ff0ff; font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 15px; text-shadow: 0 0 14px rgba(34,211,238,.6); } .tpl-nocturne .rc-price s, .tpl-nocturne .price s { color: var(--ink-3); } .tpl-nocturne .rc-btn { border-radius: 12px; background: var(--gl); color: #fff; border: 1px solid var(--gb); } .tpl-nocturne .rc-btn:hover { border-color: #7ff0ff; box-shadow: 0 0 20px -4px rgba(34,211,238,.8); } .tpl-nocturne .rc-btn-main { background: linear-gradient(rgba(14,14,26,.2), rgba(14,14,26,.2)) padding-box, var(--neon) border-box; border: 1px solid transparent; } .tpl-nocturne .rc-tag, .tpl-nocturne .tag { background: rgba(244,114,182,.9); color: #fff; border-radius: 99px; font-weight: 700; box-shadow: 0 0 18px rgba(244,114,182,.7); } .tpl-nocturne .rc-tag-out, .tpl-nocturne .tag-out { background: rgba(120,120,150,.8); box-shadow: none; } .tpl-nocturne .cat-tile { border-radius: 24px; aspect-ratio: 3 / 4; border: 1px solid var(--gb); } .tpl-nocturne .cat-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(8,8,15,.9)); } .tpl-nocturne .cat-tile:hover { border-color: rgba(34,211,238,.7); box-shadow: 0 0 40px -10px rgba(34,211,238,.7); } .tpl-nocturne .cat-tile h3 { font-family: 'Unbounded', sans-serif; font-size: 16px; } .tpl-nocturne .main-img { aspect-ratio: 4 / 5; border-radius: 26px; border: 1px solid var(--gb); background: var(--gl); box-shadow: 0 30px 80px -30px rgba(124,58,237,.7); } .tpl-nocturne .pd-info h1 { font-size: clamp(26px, 3.4vw, 42px); text-shadow: 0 0 26px rgba(124,58,237,.6); } .tpl-nocturne .trust { background: var(--gl); border-color: var(--gb); } .tpl-nocturne .trust-item .ic { background: transparent; border: 1px solid var(--gb); color: #7ff0ff; border-radius: 14px; box-shadow: 0 0 16px -4px rgba(34,211,238,.6); } .tpl-nocturne .foot { background: rgba(5,5,10,.9); border-top: 1px solid transparent; border-image: var(--neon) 1; } .tpl-nocturne .foot h4 { font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 13px; color: #7ff0ff; } @media (max-width: 860px) { .tpl-nocturne .hero { min-height: 540px; } .tpl-nocturne .hero-in { margin: 36px 0; padding: 26px 22px 30px; } } .tpl-nocturne .hero:has(.hero-stock) { background: #0a0a14; } /* ---------- Salon: a side rail instead of a top bar, and a salon-style wall of artworks in mixed sizes with no card chrome; buttons appear on hover ---------- */ .tpl-salon { --bg: #faf7f2; --bg-2: #f1ece3; --line: #e2dbcf; --ink: #1a1816; --ink-2: #57514a; --ink-3: #988f83; --r: 2px; --r-lg: 2px; --r-sm: 2px; } .tpl-salon h1, .tpl-salon h2, .tpl-salon h3, .tpl-salon .display { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -.015em; } .tpl-salon .announce { background: #1a1816; color: #faf7f2; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .tpl-salon .hdr { background: #faf7f2; border-bottom: 1px solid var(--line); } .tpl-salon .hdr .brand { font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: 1.35em; letter-spacing: -.02em; } .tpl-salon .hdr-search input[type=search] { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; } .tpl-salon .nav-bar { background: transparent; border-top: 0; } .tpl-salon .nav-link { font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); } .tpl-salon .nav-link:hover, .tpl-salon .nav-link.active { color: var(--accent); } .tpl-salon .nav-link.active::after { display: none; } @media (min-width: 1000px) { .tpl-salon .announce, .tpl-salon main, .tpl-salon .foot { margin-left: 272px; } .tpl-salon .hdr { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: 272px; display: flex; flex-direction: column; padding: 30px 24px; border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto; } .tpl-salon .hdr .wrap { width: 100%; margin: 0; } .tpl-salon .hdr-in { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 0; } .tpl-salon .hdr .burger { display: none; } .tpl-salon .hdr .brand { font-size: 1.7em; line-height: 1.05; } .tpl-salon .hdr-search { width: 100%; max-width: none; } .tpl-salon .hdr-actions { order: 3; margin-left: -10px; } .tpl-salon .nav-bar { margin-top: 26px; width: 100%; } .tpl-salon .nav-bar .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .tpl-salon .nav-link { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .tpl-salon .mobile-search { display: none; } } .tpl-salon .hero { background: #e9e2d6; min-height: 560px; display: flex; align-items: flex-end; } .tpl-salon .hero-bg { opacity: 1; background-position: center; } .tpl-salon .hero::after { background: linear-gradient(180deg, rgba(26,24,22,0) 45%, rgba(26,24,22,.55)); } .tpl-salon .hero .wrap { position: relative; z-index: 4; } .tpl-salon .hero-in { max-width: 620px; padding: 0 0 52px; text-align: left; } .tpl-salon .hero .eyebrow { background: transparent; padding: 0; font-family: 'DM Mono', monospace; letter-spacing: .16em; backdrop-filter: none; } .tpl-salon .hero h1 { font-size: clamp(40px, 6vw, 84px); font-style: italic; line-height: .98; font-weight: 400; } .tpl-salon .hero p { opacity: .92; } .tpl-salon .btn { border-radius: 0; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); } .tpl-salon .btn-primary, .tpl-salon .btn-accent { background: var(--ink); color: #faf7f2; } .tpl-salon .btn-primary:hover, .tpl-salon .btn-accent:hover { background: var(--accent); border-color: var(--accent); } .tpl-salon .hero .btn-light, .tpl-salon .btn-light { background: transparent; color: #fff; border-color: #fff; } .tpl-salon .btn-light:hover { background: #fff; color: var(--ink); } .tpl-salon .section-head { border-bottom: 1px solid var(--ink); padding-bottom: 12px; } .tpl-salon .section-head h2 { font-size: clamp(30px, 4vw, 54px); font-style: italic; } .tpl-salon .section-head .link-arrow { font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); } .tpl-salon .section-alt { background: var(--bg-2); } .tpl-salon .rc-grid, .tpl-salon .p-grid { display: block; column-count: 3; column-gap: 30px; } .tpl-salon .rc-grid[data-count], .tpl-salon .p-grid[data-count] { display: block; } @media (max-width: 1100px) { .tpl-salon .rc-grid, .tpl-salon .p-grid { column-count: 2; } } @media (max-width: 560px) { .tpl-salon .rc-grid, .tpl-salon .p-grid { column-count: 1; } } .tpl-salon .rc-card, .tpl-salon .p-card { position: relative; display: inline-flex; width: 100%; break-inside: avoid; margin: 0 0 34px; background: transparent; border: 0; padding: 0; box-shadow: none; } .tpl-salon .rc-card:hover, .tpl-salon .p-card:hover { box-shadow: none; } .tpl-salon .rc-img, .tpl-salon .p-img { border-radius: 0; background: #e9e2d6; aspect-ratio: 4 / 5; box-shadow: 0 1px 0 var(--line), 0 24px 30px -26px rgba(26,24,22,.55); } .tpl-salon .rc-grid > :nth-child(4n+2) .rc-img, .tpl-salon .p-grid > :nth-child(4n+2) .p-img { aspect-ratio: 1 / 1; } .tpl-salon .rc-grid > :nth-child(4n+3) .rc-img, .tpl-salon .p-grid > :nth-child(4n+3) .p-img { aspect-ratio: 3 / 4; } .tpl-salon .rc-grid > :nth-child(4n) .rc-img, .tpl-salon .p-grid > :nth-child(4n) .p-img { aspect-ratio: 5 / 4; } .tpl-salon .rc-name, .tpl-salon .p-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400 !important; font-size: 21px !important; text-align: left; margin-top: 12px; line-height: 1.15; } .tpl-salon .rc-chip span, .tpl-salon .p-cat { background: transparent; padding: 0; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .tpl-salon .rc-price { justify-content: flex-start; } .tpl-salon .rc-price b, .tpl-salon .price b { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 14px; color: var(--ink); } .tpl-salon .rc-actions { opacity: 0; transform: translateY(6px); transition: .25s; } .tpl-salon .rc-card:hover .rc-actions, .tpl-salon .rc-card:focus-within .rc-actions { opacity: 1; transform: none; } @media (hover: none) { .tpl-salon .rc-actions { opacity: 1; transform: none; } } .tpl-salon .rc-btn { border-radius: 0; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .tpl-salon .rc-btn:hover, .tpl-salon .rc-btn-main { background: var(--ink); color: #faf7f2; } .tpl-salon .rc-tag, .tpl-salon .tag { background: var(--accent); color: #fff; border-radius: 0; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; } .tpl-salon .rc-tag-out, .tpl-salon .tag-out { background: var(--ink-3); } .tpl-salon .cat-grid { gap: 14px; } .tpl-salon .cat-tile { border-radius: 0; aspect-ratio: 3 / 4; } .tpl-salon .cat-tile h3 { font-style: italic; font-size: 26px; font-weight: 400; } .tpl-salon .main-img { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: 0 1px 0 var(--line), 0 30px 36px -28px rgba(26,24,22,.6); } .tpl-salon .pd-info h1 { font-style: italic; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; } .tpl-salon .trust { background: transparent; border-color: var(--ink); } .tpl-salon .trust-item .ic { background: transparent; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); } .tpl-salon .trust-item span { font-family: 'DM Mono', monospace; font-size: 12px; } .tpl-salon .foot { background: #1a1816; } .tpl-salon .foot h4 { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #d9cfbd; } .tpl-salon .hero:has(.hero-stock) { background: #e9e2d6; } /* ---------- Reel: a split banner (colour panel + picture) and a horizontal film strip of artworks you swipe through ---------- */ .tpl-reel { --bg: #f4f0e6; --bg-2: #ebe5d6; --line: #d9d1bd; --ink: #1c2620; --ink-2: #4d5a50; --ink-3: #8b9587; --r: 4px; --r-lg: 6px; --r-sm: 3px; } .tpl-reel h1, .tpl-reel h2, .tpl-reel h3, .tpl-reel .display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; } .tpl-reel .announce { background: #d9633b; color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; } .tpl-reel .hdr { background: #1f2a24; color: #f4f0e6; border-bottom: 0; } .tpl-reel .hdr .brand { font-family: 'Instrument Serif', serif; font-size: 1.7em; font-style: italic; color: #f4f0e6; } .tpl-reel .hdr .icon-link, .tpl-reel .hdr .burger { color: #f4f0e6; } .tpl-reel .hdr-search input[type=search] { background: rgba(244,240,230,.1) !important; border: 1px solid rgba(244,240,230,.25) !important; border-radius: 99px !important; color: #f4f0e6 !important; } .tpl-reel .nav-bar { background: #1f2a24; border-top: 1px solid rgba(244,240,230,.12); } .tpl-reel .nav-link { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #b9c4b6; font-weight: 600; } .tpl-reel .nav-link:hover, .tpl-reel .nav-link.active { color: #fff; } .tpl-reel .nav-link.active::after { height: 2px; background: #d9633b; } .tpl-reel .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 620px; background: #1f2a24; overflow: hidden; } .tpl-reel .hero-bg { position: relative; inset: auto; grid-column: 2; grid-row: 1; opacity: 1; background-position: center; } .tpl-reel .hero::after { display: none; } .tpl-reel .hero .wrap { grid-column: 1; grid-row: 1; align-self: center; width: auto; margin: 0; padding: 0 clamp(24px, 5vw, 72px); z-index: 4; } .tpl-reel .hero-in { padding: 56px 0; max-width: 460px; color: #f4f0e6; } .tpl-reel .hero .eyebrow { background: transparent; padding: 0; color: #f0a37f; letter-spacing: .24em; backdrop-filter: none; } .tpl-reel .hero h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: .94; color: #f4f0e6; font-style: italic; } .tpl-reel .hero p { color: #cfd8cb; opacity: 1; } .tpl-reel .btn { border-radius: 99px; font-weight: 700; letter-spacing: .04em; } .tpl-reel .btn-primary, .tpl-reel .btn-accent { background: #d9633b; color: #fff; } .tpl-reel .btn-primary:hover, .tpl-reel .btn-accent:hover { background: #c1502a; } .tpl-reel .btn-light { background: transparent; color: #f4f0e6; border: 1px solid #f4f0e6; } .tpl-reel .section-head h2 { font-size: clamp(34px, 4.6vw, 64px); font-style: italic; } .tpl-reel .section-head .link-arrow { color: #d9633b; font-weight: 700; } .tpl-reel .section-alt { background: var(--bg-2); } .tpl-reel .rc-grid { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 26px; counter-reset: reel; scrollbar-width: thin; scrollbar-color: #d9633b transparent; } .tpl-reel .rc-grid[data-count] { display: flex; } .tpl-reel .rc-grid > * { flex: 0 0 min(330px, 78vw); scroll-snap-align: start; } .tpl-reel .rc-card, .tpl-reel .p-card { position: relative; background: transparent; border: 0; padding: 0; box-shadow: none; counter-increment: reel; } .tpl-reel .rc-card::before { content: counter(reel, decimal-leading-zero); position: absolute; z-index: 4; top: -6px; left: 12px; font: italic 400 44px/1 'Instrument Serif', serif; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); pointer-events: none; } .tpl-reel .rc-card:hover, .tpl-reel .p-card:hover { box-shadow: none; } .tpl-reel .rc-img, .tpl-reel .p-img { aspect-ratio: 4 / 5; border-radius: 4px; background: #ddd5c1; box-shadow: 0 24px 34px -26px rgba(28,38,32,.7); } .tpl-reel .rc-name, .tpl-reel .p-name { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400 !important; font-size: 24px !important; text-align: left; margin-top: 14px; line-height: 1.1; } .tpl-reel .rc-chip span, .tpl-reel .p-cat { background: transparent; padding: 0; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; font-weight: 700; } .tpl-reel .rc-price { justify-content: flex-start; } .tpl-reel .rc-price b, .tpl-reel .price b { color: #d9633b; font-weight: 700; font-size: 17px; } .tpl-reel .rc-btn { border-radius: 99px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; } .tpl-reel .rc-btn:hover { background: var(--ink); color: #f4f0e6; } .tpl-reel .rc-btn-main { background: #d9633b; border-color: #d9633b; color: #fff; } .tpl-reel .rc-tag, .tpl-reel .tag { background: #1f2a24; color: #f4f0e6; border-radius: 99px; font-weight: 700; letter-spacing: .06em; } .tpl-reel .rc-tag-sale, .tpl-reel .tag-sale { background: #d9633b; } .tpl-reel .p-grid { gap: 40px 30px; } .tpl-reel .cat-grid { grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 10px; } .tpl-reel .cat-grid > * { scroll-snap-align: start; } .tpl-reel .cat-tile { border-radius: 4px; aspect-ratio: 3 / 4; } .tpl-reel .cat-tile h3 { font-style: italic; font-size: 32px; font-weight: 400; } .tpl-reel .main-img { aspect-ratio: 4 / 5; border-radius: 4px; box-shadow: 0 30px 40px -30px rgba(28,38,32,.7); } .tpl-reel .pd-info h1 { font-style: italic; font-size: clamp(36px, 4.6vw, 64px); line-height: .98; } .tpl-reel .trust { background: #1f2a24; border-color: #1f2a24; color: #f4f0e6; } .tpl-reel .trust-item span { color: #b9c4b6; } .tpl-reel .trust-item .ic { background: rgba(244,240,230,.1); color: #f0a37f; border-radius: 50%; } .tpl-reel .foot { background: #141b17; } .tpl-reel .foot h4 { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; font-weight: 400; color: #f0a37f; letter-spacing: 0; text-transform: none; } @media (max-width: 860px) { .tpl-reel .hero { grid-template-columns: 1fr; min-height: 0; } .tpl-reel .hero-bg { grid-column: 1; grid-row: 1; min-height: 300px; } .tpl-reel .hero .wrap { grid-column: 1; grid-row: 2; padding: 0 22px; } .tpl-reel .hero-in { padding: 34px 0 40px; } } .tpl-reel .hero:has(.hero-stock) { background: #1f2a24; } /* Art & Craft second set: fixes found in review */ body.sf.tpl-prism { background-color: #ece9f8; background-image: radial-gradient(60vw 52vh at 8% 0%, #ffd0e4, transparent 62%), radial-gradient(56vw 52vh at 96% 8%, #c6d6ff, transparent 62%), radial-gradient(62vw 60vh at 72% 100%, #c6f1e1, transparent 62%), radial-gradient(42vw 42vh at 0% 82%, #ffe8b4, transparent 62%); background-attachment: fixed; } body.sf.tpl-nocturne { background-color: #07070f; background-image: radial-gradient(52vw 46vh at 12% 0%, rgba(109,40,217,.5), transparent 62%), radial-gradient(48vw 44vh at 94% 18%, rgba(14,165,164,.42), transparent 62%), radial-gradient(56vw 52vh at 62% 100%, rgba(190,24,93,.4), transparent 62%); background-attachment: fixed; } .tpl-prism main, .tpl-nocturne main { background: transparent; } .tpl-reel .rc-card::before { display: none; } .tpl-reel .rc-media::after { content: counter(reel, decimal-leading-zero); position: absolute; z-index: 4; left: 14px; bottom: 6px; font: italic 400 46px/1 'Instrument Serif', serif; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); pointer-events: none; } @media (min-width: 1000px) { .tpl-salon .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tpl-salon .hdr-actions { margin-bottom: 6px; } } /* ==================================================================================================================================== LIQUID GLASS (light) and LIQUID NIGHT (dark): thick translucent glass slabs with a bright specular rim, springy capsule controls, a segmented glass nav with a floating "bubble" on the active item, slowly drifting colour blobs behind everything and (in Chromium) a gentle refraction wobble. ==================================================================================================================================== */ .tpl-liquid, .tpl-liquidnight { --spring: cubic-bezier(.34, 1.56, .64, 1); --r: 30px; --r-lg: 38px; --r-sm: 20px; --rim: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1.5px 1px rgba(255,255,255,.35), inset 1.5px 0 1px rgba(255,255,255,.55), inset -1.5px 0 1px rgba(255,255,255,.3); } .tpl-liquid { --bg: #e9efff; --bg-2: rgba(255,255,255,.45); --line: rgba(255,255,255,.7); --ink: #14213d; --ink-2: #44506f; --ink-3: #7d89a8; --g1: rgba(255,255,255,.48); --g2: rgba(255,255,255,.14); --gtint: rgba(120,150,255,.14); --shadow: 0 10px 34px -8px rgba(40,70,160,.32), 0 2px 8px rgba(40,70,160,.1); --hl: rgba(255,255,255,.9); } .tpl-liquidnight { --bg: #070b1c; --bg-2: rgba(255,255,255,.05); --line: rgba(255,255,255,.18); --ink: #eef2ff; --ink-2: #b3bddb; --ink-3: #7480a5; --g1: rgba(255,255,255,.17); --g2: rgba(255,255,255,.05); --gtint: rgba(110,140,255,.16); --shadow: 0 14px 44px -10px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35); --hl: rgba(255,255,255,.55); } body.sf.tpl-liquid { background-color: #dfe8ff; background-image: radial-gradient(55vw 55vh at 6% 6%, #ffc2de, transparent 64%), radial-gradient(52vw 50vh at 96% 10%, #aee0ff, transparent 64%), radial-gradient(60vw 60vh at 80% 98%, #d3c2ff, transparent 64%), radial-gradient(46vw 46vh at 0% 90%, #b8f3dd, transparent 64%); background-attachment: fixed; } body.sf.tpl-liquidnight { background-color: #070b1c; background-image: radial-gradient(55vw 50vh at 8% 0%, rgba(80,70,255,.55), transparent 64%), radial-gradient(50vw 50vh at 96% 12%, rgba(0,190,255,.4), transparent 64%), radial-gradient(60vw 60vh at 74% 100%, rgba(255,70,160,.42), transparent 64%), radial-gradient(40vw 40vh at 0% 88%, rgba(20,220,170,.3), transparent 64%); background-attachment: fixed; color: var(--ink); } :is(.tpl-liquid, .tpl-liquidnight)::before, :is(.tpl-liquid, .tpl-liquidnight)::after { content: ""; position: fixed; z-index: -1; pointer-events: none; filter: blur(30px); } :is(.tpl-liquid, .tpl-liquidnight)::before { width: 46vmax; height: 40vmax; left: -12vmax; top: 18vh; background: radial-gradient(circle at 35% 35%, rgba(255,110,190,.5), rgba(120,100,255,.28) 55%, transparent 70%); border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; animation: liquid-morph 24s ease-in-out infinite alternate; } :is(.tpl-liquid, .tpl-liquidnight)::after { width: 42vmax; height: 42vmax; right: -12vmax; bottom: -8vh; background: radial-gradient(circle at 60% 40%, rgba(70,200,255,.5), rgba(90,120,255,.26) 55%, transparent 70%); border-radius: 44% 56% 48% 52% / 56% 44% 56% 44%; animation: liquid-morph 30s ease-in-out infinite alternate-reverse; } @keyframes liquid-morph { 0% { transform: translate3d(0,0,0) rotate(0deg); border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 50% { transform: translate3d(5vmax,-4vmax,0) rotate(18deg) scale(1.08); border-radius: 42% 58% 46% 54% / 56% 42% 58% 44%; } 100% { transform: translate3d(-3vmax,3vmax,0) rotate(-12deg) scale(.96); border-radius: 52% 48% 60% 40% / 44% 58% 42% 56%; } } @media (prefers-reduced-motion: reduce) { :is(.tpl-liquid, .tpl-liquidnight)::before, :is(.tpl-liquid, .tpl-liquidnight)::after { animation: none; } } :is(.tpl-liquid, .tpl-liquidnight) h1, :is(.tpl-liquid, .tpl-liquidnight) h2, :is(.tpl-liquid, .tpl-liquidnight) h3, :is(.tpl-liquid, .tpl-liquidnight) .display { font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: -.035em; } .tpl-liquidnight .section-head p, .tpl-liquidnight .muted { color: var(--ink-3); } /* the glass material: used by every slab below */ :is(.tpl-liquid, .tpl-liquidnight) .announce, :is(.tpl-liquid, .tpl-liquidnight) .hdr, :is(.tpl-liquid, .tpl-liquidnight) .hero-in, :is(.tpl-liquid, .tpl-liquidnight) .rc-card, :is(.tpl-liquid, .tpl-liquidnight) .p-card, :is(.tpl-liquid, .tpl-liquidnight) .trust, :is(.tpl-liquid, .tpl-liquidnight) .main-img, :is(.tpl-liquid, .tpl-liquidnight) .box, :is(.tpl-liquid, .tpl-liquidnight) .summary { background: linear-gradient(135deg, var(--g1), var(--g2)), var(--gtint); border: 1px solid var(--line); box-shadow: var(--shadow), var(--rim); backdrop-filter: blur(16px) saturate(190%) brightness(1.06); -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.06); } :is(.tpl-liquid, .tpl-liquidnight) .hdr, :is(.tpl-liquid, .tpl-liquidnight) .hero-in { backdrop-filter: blur(14px) saturate(190%) brightness(1.06) url(#sn-liquid); } :is(.tpl-liquid, .tpl-liquidnight) .announce { background: linear-gradient(90deg, var(--g1), var(--g2)); color: var(--ink); font-weight: 600; letter-spacing: .02em; border-width: 0 0 1px; box-shadow: var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .hdr { position: sticky; top: 12px; z-index: 60; width: min(1180px, calc(100% - 28px)); margin: 14px auto 0; border-radius: 40px; } :is(.tpl-liquid, .tpl-liquidnight) .hdr .wrap { width: 100%; } :is(.tpl-liquid, .tpl-liquidnight) .hdr-in { padding-left: 16px; padding-right: 16px; } :is(.tpl-liquid, .tpl-liquidnight) .hdr .brand { font-family: 'Inter Tight', sans-serif; font-weight: 800; letter-spacing: -.04em; color: var(--ink); } :is(.tpl-liquid, .tpl-liquidnight) .hdr .icon-link, :is(.tpl-liquid, .tpl-liquidnight) .hdr .burger { color: var(--ink); } :is(.tpl-liquid, .tpl-liquidnight) .hdr-search input[type=search] { background: rgba(255,255,255,.28) !important; border: 1px solid var(--line) !important; border-radius: 99px !important; color: var(--ink) !important; box-shadow: inset 0 2px 8px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.6); } :is(.tpl-liquid, .tpl-liquidnight) .nav-bar { background: transparent; border-top: 0; padding: 0 12px 10px; } :is(.tpl-liquid, .tpl-liquidnight) .nav-bar .wrap { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.16); box-shadow: inset 0 2px 8px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.5); width: fit-content; max-width: 100%; margin: 0 auto; } :is(.tpl-liquid, .tpl-liquidnight) .nav-link { font-weight: 650; font-size: 13.5px; color: var(--ink-2); border-radius: 99px; padding: 8px 16px; transition: background .35s var(--spring), transform .35s var(--spring); } :is(.tpl-liquid, .tpl-liquidnight) .nav-link:hover { background: rgba(255,255,255,.3); color: var(--ink); transform: scale(1.04); } :is(.tpl-liquid, .tpl-liquidnight) .nav-link.active { color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.4)); box-shadow: 0 6px 16px -4px rgba(30,50,140,.35), var(--rim); } .tpl-liquidnight .nav-link.active { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.14)); color: #fff; } :is(.tpl-liquid, .tpl-liquidnight) .nav-link.active::after { display: none; } :is(.tpl-liquid, .tpl-liquidnight) .hero { margin: 14px; border-radius: 44px; min-height: 660px; display: flex; align-items: flex-end; background: #a9b6ff; box-shadow: var(--shadow); } :is(.tpl-liquid, .tpl-liquidnight) .hero-bg { opacity: 1; background-position: center; } :is(.tpl-liquid, .tpl-liquidnight) .hero::after { background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(20,30,90,.32)); } :is(.tpl-liquid, .tpl-liquidnight) .hero::before { content: ""; position: absolute; z-index: 3; right: 9%; top: 14%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.28) 30%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.4) 100%); box-shadow: inset -10px -14px 26px rgba(120,140,255,.45), inset 8px 10px 20px rgba(255,255,255,.7), 0 22px 40px -14px rgba(30,50,160,.5); animation: liquid-bob 7s ease-in-out infinite alternate; pointer-events: none; } @keyframes liquid-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-22px) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { :is(.tpl-liquid, .tpl-liquidnight) .hero::before { animation: none; } } :is(.tpl-liquid, .tpl-liquidnight) .hero .wrap { position: relative; z-index: 4; } :is(.tpl-liquid, .tpl-liquidnight) .hero-in { max-width: 560px; margin: 0 0 42px; padding: 38px 42px 42px; border-radius: 40px; color: var(--ink); position: relative; overflow: hidden; } :is(.tpl-liquid, .tpl-liquidnight) .hero-in::before, :is(.tpl-liquid, .tpl-liquidnight) .rc-card::before, :is(.tpl-liquid, .tpl-liquidnight) .p-card::before { content: ""; position: absolute; z-index: 3; left: -20%; top: -45%; width: 140%; height: 80%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); transform: rotate(-8deg); pointer-events: none; } :is(.tpl-liquid, .tpl-liquidnight) .hero .eyebrow { background: rgba(255,255,255,.4); color: var(--ink); backdrop-filter: none; border: 1px solid rgba(255,255,255,.7); box-shadow: var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .hero h1 { color: var(--ink); font-size: clamp(38px, 5.4vw, 70px); line-height: .98; } :is(.tpl-liquid, .tpl-liquidnight) .hero p { color: var(--ink-2); opacity: 1; } :is(.tpl-liquid, .tpl-liquidnight) .btn { border-radius: 99px; font-weight: 700; border: 1px solid rgba(255,255,255,.7); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)); color: var(--ink); box-shadow: 0 8px 22px -8px rgba(30,50,140,.4), var(--rim); backdrop-filter: blur(10px) saturate(180%); transition: transform .4s var(--spring), box-shadow .3s; } :is(.tpl-liquid, .tpl-liquidnight) .btn:hover { transform: scale(1.06); box-shadow: 0 14px 30px -8px rgba(30,50,140,.5), var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .btn:active { transform: scale(.97); } :is(.tpl-liquid, .tpl-liquidnight) .btn-primary, :is(.tpl-liquid, .tpl-liquidnight) .btn-accent { color: #fff; background: linear-gradient(180deg, rgba(120,150,255,.95), rgba(70,100,235,.8)); border-color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(20,30,120,.4); } .tpl-liquid .btn-accent { background: linear-gradient(180deg, rgba(255,130,190,.95), rgba(235,70,150,.82)); } .tpl-liquidnight .btn-accent { background: linear-gradient(180deg, rgba(60,210,255,.9), rgba(30,140,235,.8)); } :is(.tpl-liquid, .tpl-liquidnight) .section-head h2 { font-size: clamp(30px, 3.8vw, 50px); } :is(.tpl-liquid, .tpl-liquidnight) .section-head p { color: var(--ink-3); } :is(.tpl-liquid, .tpl-liquidnight) .section-head .link-arrow { border-radius: 99px; padding: 8px 18px; color: var(--ink); font-weight: 700; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--rim); backdrop-filter: blur(10px); } :is(.tpl-liquid, .tpl-liquidnight) .section-alt { background: transparent; } :is(.tpl-liquid, .tpl-liquidnight) .rc-card, :is(.tpl-liquid, .tpl-liquidnight) .p-card { position: relative; overflow: hidden; border-radius: 38px; padding: 12px 12px 16px; transition: transform .5s var(--spring), box-shadow .4s; isolation: isolate; } :is(.tpl-liquid, .tpl-liquidnight) .rc-card:hover, :is(.tpl-liquid, .tpl-liquidnight) .p-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 30px 60px -18px rgba(40,70,200,.5), var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .rc-img, :is(.tpl-liquid, .tpl-liquidnight) .p-img { aspect-ratio: 4 / 5; border-radius: 28px; background: rgba(255,255,255,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 22px -10px rgba(30,50,140,.5); } :is(.tpl-liquid, .tpl-liquidnight) .rc-name, :is(.tpl-liquid, .tpl-liquidnight) .p-name { font-family: 'Inter Tight', sans-serif; font-weight: 700 !important; font-size: 16.5px !important; letter-spacing: -.02em !important; text-align: center; color: var(--ink); } :is(.tpl-liquid, .tpl-liquidnight) .rc-chip { text-align: center; } :is(.tpl-liquid, .tpl-liquidnight) .rc-chip span, :is(.tpl-liquid, .tpl-liquidnight) .p-cat { background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.6); color: var(--ink-3); border-radius: 99px; padding: 3px 12px; font-size: 11px; font-weight: 700; box-shadow: var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .rc-price { justify-content: center; } :is(.tpl-liquid, .tpl-liquidnight) .rc-price b, :is(.tpl-liquid, .tpl-liquidnight) .price b { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); } :is(.tpl-liquid, .tpl-liquidnight) .rc-price s, :is(.tpl-liquid, .tpl-liquidnight) .price s { color: var(--ink-3); } :is(.tpl-liquid, .tpl-liquidnight) .rc-btn { border-radius: 99px; border: 1px solid rgba(255,255,255,.7); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16)); color: var(--ink); font-weight: 700; box-shadow: var(--rim); transition: transform .4s var(--spring); } :is(.tpl-liquid, .tpl-liquidnight) .rc-btn:hover { transform: scale(1.06); } :is(.tpl-liquid, .tpl-liquidnight) .rc-btn-main { background: linear-gradient(180deg, rgba(120,150,255,.95), rgba(70,100,235,.8)); color: #fff; } :is(.tpl-liquid, .tpl-liquidnight) .rc-tag, :is(.tpl-liquid, .tpl-liquidnight) .tag { z-index: 5; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); backdrop-filter: blur(10px); color: var(--ink); border: 1px solid #fff; border-radius: 99px; font-weight: 800; box-shadow: var(--rim), 0 6px 14px -8px rgba(30,50,140,.6); } :is(.tpl-liquid, .tpl-liquidnight) .rc-tag-sale, :is(.tpl-liquid, .tpl-liquidnight) .tag-sale { background: linear-gradient(180deg, rgba(255,120,170,.95), rgba(235,60,130,.85)); color: #fff; border-color: rgba(255,255,255,.6); } :is(.tpl-liquid, .tpl-liquidnight) .rc-heart { z-index: 5; } :is(.tpl-liquid, .tpl-liquidnight) .cat-tile { border-radius: 38px; aspect-ratio: 4 / 5; border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow), var(--rim); transition: transform .5s var(--spring); } :is(.tpl-liquid, .tpl-liquidnight) .cat-tile:hover { transform: scale(1.025); } :is(.tpl-liquid, .tpl-liquidnight) .cat-tile::after { background: linear-gradient(180deg, transparent 52%, rgba(20,30,90,.35)); } :is(.tpl-liquid, .tpl-liquidnight) .cat-tile .t { left: 14px; right: 14px; bottom: 14px; padding: 12px 18px; border-radius: 99px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(16px) saturate(190%); -webkit-backdrop-filter: blur(16px) saturate(190%); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--rim); } :is(.tpl-liquid, .tpl-liquidnight) .cat-tile h3 { color: var(--ink); font-size: 18px; text-shadow: none; } .tpl-liquidnight .cat-tile h3 { color: #fff; } :is(.tpl-liquid, .tpl-liquidnight) .main-img { aspect-ratio: 4 / 5; border-radius: 40px; padding: 12px; } :is(.tpl-liquid, .tpl-liquidnight) .main-img img { border-radius: 30px; } :is(.tpl-liquid, .tpl-liquidnight) .pd-info h1 { font-size: clamp(32px, 4vw, 54px); } :is(.tpl-liquid, .tpl-liquidnight) .trust { margin: 18px 14px; border-radius: 36px; } :is(.tpl-liquid, .tpl-liquidnight) .trust-item .ic { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25)); border: 1px solid #fff; color: var(--ink); border-radius: 50%; box-shadow: var(--rim); } .tpl-liquidnight .trust-item span { color: var(--ink-3); } :is(.tpl-liquid, .tpl-liquidnight) .foot { margin: 28px 14px 14px; border-radius: 44px; background: linear-gradient(135deg, rgba(40,50,130,.7), rgba(20,25,80,.82)); border: 1px solid rgba(255,255,255,.28); box-shadow: var(--shadow), var(--rim); backdrop-filter: blur(20px) saturate(170%); } :is(.tpl-liquid, .tpl-liquidnight) .foot h4 { font-family: 'Inter Tight', sans-serif; letter-spacing: -.02em; color: #d9e2ff; } @media (max-width: 860px) { :is(.tpl-liquid, .tpl-liquidnight) .hero { min-height: 540px; margin: 10px; border-radius: 34px; } :is(.tpl-liquid, .tpl-liquidnight) .hero-in { margin-bottom: 18px; padding: 26px 24px 30px; border-radius: 30px; } :is(.tpl-liquid, .tpl-liquidnight) .hero::before { width: 90px; height: 90px; } :is(.tpl-liquid, .tpl-liquidnight) .hdr { top: 8px; border-radius: 30px; } :is(.tpl-liquid, .tpl-liquidnight) .nav-bar .wrap { border-radius: 26px; } :is(.tpl-liquid, .tpl-liquidnight) .rc-card, :is(.tpl-liquid, .tpl-liquidnight) .p-card { border-radius: 30px; } } :is(.tpl-liquid, .tpl-liquidnight) .hero:has(.hero-stock) { background: #a9b6ff; } .tpl-liquidnight .hero:has(.hero-stock) { background: #16204f; } /* art tools: artwork details and enquiry */ .art-spec .art-badge{margin:0 0 12px;font-size:15px} .art-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 24px;margin:0 0 14px} .art-dl>div{border-bottom:1px solid var(--border,rgba(0,0,0,.12));padding-bottom:8px} .art-dl dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.6} .art-dl dd{margin:2px 0 0} .art-story{font-style:italic;line-height:1.7;max-width:62ch} .art-ask{margin-top:14px;border:1px solid var(--border,rgba(0,0,0,.14));border-radius:12px;padding:12px 16px} .art-ask summary{cursor:pointer} .art-ask form{margin-top:12px} .artroom{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px} .artroom-box{background:#fff;color:#222;border-radius:14px;padding:14px;width:min(900px,100%);position:relative} .artroom-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:28px;cursor:pointer;line-height:1} .artroom-wall{position:relative;height:min(60vh,460px);background:linear-gradient(#e9e4da,#ddd5c6);border-radius:8px;overflow:hidden} .artroom-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8%;background:#a68a64} .artroom-art{position:absolute;left:50%;transform:translateX(-50%);background:#ccc center/cover no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.35);outline:4px solid #2b2418} .artroom-sofa{position:absolute;left:50%;transform:translateX(-50%);bottom:8%;background:#6d7a8c;border-radius:14px 14px 6px 6px;z-index:1} .artroom-note{margin:10px 4px 0;font-size:13px;opacity:.75}