/* =========================================================== The Neemah Collective — styles Two palettes: .theme-emerald (default) and .theme-plum Change the palette any time in Admin › Settings. =========================================================== */ .theme-cocoa { --bg: #1C130F; --base: #2A1D17; --panel: #231813; --panel-2: #2E211A; --footer: #120C09; --glow-1: #4E362A; --glow-2: #1C130F; --glow-3: #7A3A4C; --gold: #D4A88C; --gold-hi: #F2D5C4; --gold-rgb: 212, 168, 140; --on-gold: #2A1D17; --accent: #EBB9C1; --foil: linear-gradient(110deg, #9A6852 0%, #D4A88C 16%, #F7DECF 30%, #C29A70 44%, #FFF2E8 56%, #B07A6A 70%, #EAC6AD 84%, #9A6852 100%); --foil-rose: linear-gradient(110deg, #C27D8A 0%, #F0C2C9 18%, #FFE8EC 32%, #DE9FAA 46%, #F8D8D4 58%, #D4A88C 72%, #F2C9CF 86%, #C27D8A 100%); --silk-rgb: 236, 200, 178; --silk2-rgb: 240, 180, 192; --light: #F6E8E4; --light-2: #EDD5D0; --vein: 168, 118, 104; --light-border: #E8CFCA; --light-label: #8E4F5A; --accent-deep: #C2185B; --ink: #2A1D17; --ink-soft: #5A463D; --gold-edge: #6E4636; --dark-edge: #0C0705; } .theme-midnight { --bg: #070B1F; --base: #0E1636; --panel: #0B1230; --panel-2: #10183A; --footer: #04060F; --glow-1: #1F2C66; --glow-2: #0A1029; --glow-3: #6B3A50; --gold: #CDA868; --gold-hi: #E9D3A4; --gold-rgb: 205, 168, 104; --on-gold: #0A0F26; --accent: #DDA9B3; --foil: linear-gradient(110deg, #8C6B3A 0%, #CDA868 16%, #F4E3BE 30%, #B9925A 44%, #FFF6E2 56%, #A9834D 70%, #E6CC98 84%, #8C6B3A 100%); --foil-rose: linear-gradient(110deg, #B06F7E 0%, #E2AEB8 18%, #FBE4E6 32%, #CF8E9B 46%, #F7D3D3 58%, #CDA868 72%, #EBC2C8 86%, #B06F7E 100%); --silk-rgb: 226, 200, 156; --silk2-rgb: 230, 170, 182; --light: #F8F2EA; --light-2: #EEE3D3; --vein: 150, 122, 86; --light-border: #E6D9C4; --light-label: #86683A; --ink: #0E1636; --ink-soft: #3A3F55; } .theme-emerald { --bg: #071A15; --base: #0F3D32; --panel: #0A2A22; --panel-2: #0C3329; --footer: #04110D; --glow-1: #1F6B55; --glow-2: #0A2A22; --glow-3: #8A6E1F; --gold: #D4AF37; --gold-hi: #F0D67A; --gold-rgb: 212, 175, 55; --on-gold: #0B1F1A; --accent: #D4AF37; --foil: linear-gradient(110deg, #8A6A1F 0%, #D4AF37 16%, #F7E7A1 30%, #C9A13B 44%, #FFF4C4 56%, #B8892A 70%, #E9CF7A 84%, #8A6A1F 100%); --silk-rgb: 233, 207, 122; --light: #FAF6EE; --light-2: #F1E9D8; --vein: 139, 117, 70; --light-border: #E6DCC6; --light-label: #7A5F12; --accent-deep: #7A5F12; --ink: #111111; --ink-soft: #3B3B3B; } .theme-plum { --bg: #170A1B; --base: #2B1530; --panel: #22102A; --panel-2: #26122C; --footer: #0F0512; --glow-1: #5A2A5E; --glow-2: #22102A; --glow-3: #B76E79; --gold: #CBA35C; --gold-hi: #E6C48A; --gold-rgb: 203, 163, 92; --on-gold: #1C0D20; --accent: #D49AA2; --foil: linear-gradient(110deg, #7E4A43 0%, #B76E79 14%, #F3D9C8 28%, #CBA35C 42%, #FFF1DE 55%, #B8846A 68%, #E8C4A0 82%, #7E4A43 100%); --silk-rgb: 236, 196, 168; --light: #F6EBE8; --light-2: #EED9D4; --vein: 150, 92, 100; --light-border: #E3C9C4; --light-label: #8A3F4C; --accent-deep: #8A3F4C; --ink: #111111; --ink-soft: #3B3B3B; } :root { --pop: #D6246E; --pop-hi: #FF5FA2; --pop-rgb: 214, 36, 110; --teal: #1FB5AC; --teal-hi: #66E3D9; --teal-rgb: 31, 181, 172; --foil-rose: var(--foil); --silk2-rgb: var(--silk-rgb); --text: #FAF6EE; --text-soft: #E8E1D3; --muted: #CFC7B6; --line: rgba(var(--gold-rgb), .25); --serif: 'Playfair Display', Georgia, serif; --script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive; --sans: 'Josefin Sans', system-ui, -apple-system, sans-serif; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ease: cubic-bezier(.2, .7, .1, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: var(--gold); } a:hover { color: var(--gold-hi); } button { font: inherit; } :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; } ::selection { background: var(--gold); color: var(--on-gold); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* ---------- gold foil ---------- */ .foil-text { background: var(--foil); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s linear infinite; } @keyframes foil { to { background-position: 220% center; } } .foil-rose { background-image: var(--foil-rose); } .foil-rule { height: 1px; background: var(--foil); background-size: 200% auto; animation: foil 9s linear infinite; } /* ---------- buttons ---------- */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 32px; border: 1px solid var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-position .8s var(--ease), color .3s, border-color .3s, transform .3s, box-shadow .4s; } .btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .8s var(--ease); pointer-events: none; } .btn:hover::after { left: 130%; } .btn-gold { background: var(--foil); background-size: 200% auto; color: var(--on-gold); border-color: transparent; } .btn-gold:hover { background-position: 100% center; color: var(--on-gold); box-shadow: 0 10px 40px rgba(var(--gold-rgb), .35); transform: translateY(-2px); } .btn-line { background: rgba(0,0,0,.15); color: var(--gold); font-weight: 500; backdrop-filter: blur(4px); } .btn-line:hover { background: rgba(var(--gold-rgb), .12); color: var(--text); transform: translateY(-2px); } .btn-dark { background: var(--base); color: var(--light); border-color: var(--base); } .btn-dark:hover { background: var(--bg); color: var(--gold-hi); transform: translateY(-2px); } .btn-sm { min-height: 44px; padding: 0 20px; font-size: 11px; letter-spacing: .22em; } .btn[disabled] { opacity: .6; cursor: wait; } /* ---------- intro reveal ---------- */ .intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 1s var(--ease), visibility 1s; } .intro::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; mix-blend-mode: overlay; pointer-events: none; } .intro-mark { font-family: var(--serif); font-size: 64px; letter-spacing: .12em; opacity: 0; transform: scale(.92); animation: introMark 1.3s var(--ease) .1s forwards; } .intro-line { width: 0; height: 1px; background: var(--foil); animation: introLine 1.2s var(--ease) .4s forwards; } .intro-name { font-family: var(--sans); font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); opacity: 0; animation: fadeIn 1s ease .8s forwards; } .intro.done { opacity: 0; visibility: hidden; } @keyframes introMark { to { opacity: 1; transform: none; } } @keyframes introLine { to { width: 180px; } } @keyframes fadeIn { to { opacity: 1; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; background: var(--base); display: flex; flex-direction: column; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -3; } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: slowZoom 24s ease-in-out infinite alternate; } @keyframes slowZoom { to { transform: scale(1.14); } } .hero.has-media .hero-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.7)), linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, var(--bg)); } .hero-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; } .b1 { width: 680px; height: 680px; left: -160px; top: -200px; background: var(--glow-1); opacity: .8; animation: drift1 20s ease-in-out infinite; } .b2 { width: 600px; height: 600px; right: -140px; top: 160px; background: var(--glow-2); opacity: .9; animation: drift2 24s ease-in-out infinite; } .b3 { width: 480px; height: 480px; left: 36%; bottom: -200px; background: var(--glow-3); opacity: .45; animation: drift3 28s ease-in-out infinite; } .hero.has-media .blob { opacity: .25; } @keyframes drift1 { 50% { transform: translate(120px, 60px) scale(1.15); } } @keyframes drift2 { 0%, 100% { transform: scale(1.1); } 50% { transform: translate(-140px, -40px) scale(.9); } } @keyframes drift3 { 50% { transform: translate(60px, -90px) rotate(20deg); } } #silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .grain { position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none; } .vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); } .frame-corner { position: absolute; z-index: 1; width: 120px; height: 120px; color: var(--gold); opacity: .7; pointer-events: none; } .frame-corner.tl { top: 104px; left: 24px; } .frame-corner.tr { top: 104px; right: 24px; transform: scaleX(-1); } .frame-corner.bl { bottom: 24px; left: 24px; transform: scaleY(-1); } .frame-corner.br { bottom: 24px; right: 24px; transform: scale(-1, -1); } .nav { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; } .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); } .brand:hover { color: var(--text); } .monogram { position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 18px; letter-spacing: .06em; color: var(--gold); } .monogram::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: var(--foil); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .monogram::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), .3); } .brand-name { font-family: var(--serif); font-size: 20px; letter-spacing: .16em; text-transform: uppercase; } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; font-size: 12px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; } .nav-links a { position: relative; color: var(--text); text-decoration: none; padding: 6px 0; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--foil); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .nav-links a:hover { color: var(--gold-hi); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .hero-content { position: relative; z-index: 2; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 26px; padding-top: 20px; padding-bottom: 140px; } .eyebrow { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); } .eyebrow-lines { display: inline-flex; align-items: center; gap: 18px; } .eyebrow-lines::before, .eyebrow-lines::after { content: ''; width: 48px; height: 1px; background: var(--foil); } .hero h1 { margin: 0; max-width: 1000px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7.4vw, 108px); line-height: 1.02; letter-spacing: -.005em; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .hero h1 .script { display: block; margin-top: .02em; font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.32em; line-height: 1.15; letter-spacing: 0; padding: 0 .1em; text-shadow: none; filter: drop-shadow(0 4px 24px rgba(var(--gold-rgb), .25)); } .hero-sub { margin: 0; max-width: 580px; font-size: 18px; line-height: 1.8; color: var(--text-soft); } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 10px; } .scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); text-decoration: none; } .scroll-cue span { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; } @keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* hero entrance */ .enter { opacity: 0; transform: translateY(30px); filter: blur(6px); } .ready .enter { animation: enter 1.4s var(--ease) forwards; } .ready .enter.e2 { animation-delay: .15s; } .ready .enter.e3 { animation-delay: .35s; } .ready .enter.e4 { animation-delay: .55s; } .ready .enter.e5 { animation-delay: .75s; } @keyframes enter { to { opacity: 1; transform: none; filter: none; } } /* ---------- marquee ---------- */ .marquee { position: relative; overflow: hidden; background: var(--bg); border-top: 1px solid rgba(var(--gold-rgb), .25); border-bottom: 1px solid rgba(var(--gold-rgb), .25); padding: 22px 0; } .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; } .marquee-track span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font-family: var(--serif); font-style: italic; font-size: 26px; white-space: nowrap; color: var(--text-soft); } .marquee-track i { font-style: normal; font-size: 14px; color: var(--gold); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- sections ---------- */ .section { position: relative; padding: 130px 0; overflow: hidden; } .section-dark { background: var(--bg); } .section-velvet { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--gold-rgb), .08), transparent 60%), radial-gradient(ellipse 120% 100% at 50% 100%, var(--base), var(--bg)); } .section-velvet::before, .section-dark::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; pointer-events: none; } .section-marble { background-color: var(--light); color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='1400' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0016 .0042' numOctaves='7' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 .66 0 0 0 0 .46 0 0 0 0 .42 -3.2 0 0 0 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 20% 10%, #FFFFFF, transparent 60%), linear-gradient(160deg, var(--light), var(--light-2)); background-size: cover, 100% 100%, 100% 100%; background-repeat: no-repeat; } .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 64px; } .section-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 72px); line-height: 1.05; } .section-head h2 .script { font-family: var(--script); font-size: 1.15em; font-weight: 400; } .section-head p.lead { margin: 0; max-width: 540px; line-height: 1.8; font-size: 17px; color: var(--muted); } .section-marble .eyebrow { color: var(--light-label); } .section-marble h2 { color: var(--base); } .section-marble p.lead { color: var(--ink-soft); } .flourish { width: 220px; height: 24px; color: var(--gold); } .section-marble .flourish { color: var(--light-label); } .numeral-bg { position: absolute; top: 40px; right: 4%; font-family: var(--serif); font-style: italic; font-size: clamp(160px, 22vw, 340px); line-height: 1; color: rgba(var(--gold-rgb), .06); pointer-events: none; user-select: none; } .section-marble .numeral-bg { color: rgba(var(--vein), .08); } .grid { display: grid; gap: 30px; } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 370px)); justify-content: center; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 580px)); justify-content: center; gap: 34px; } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 278px)); justify-content: center; gap: 26px; } .empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(46px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* cards */ .card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); transition: transform .6s var(--ease), border-color .5s, box-shadow .6s var(--ease); transform-style: preserve-3d; will-change: transform; } .card::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 48%, rgba(var(--gold-rgb), .2) 52%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.1s var(--ease); } .card:hover::before { background-position: -30% 0; } .card:hover { border-color: rgba(var(--gold-rgb), .8); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gold-rgb), .25); } .section-marble .card:hover { box-shadow: 0 30px 70px rgba(60, 40, 10, .18); } .inner-frame { position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(var(--gold-rgb), .35); pointer-events: none; } .inner-frame::before, .inner-frame::after { content: '✦'; position: absolute; font-size: 10px; color: var(--gold); line-height: 1; } .inner-frame::before { top: -6px; left: 50%; transform: translateX(-50%); padding: 0 6px; background: inherit; } .inner-frame::after { bottom: -6px; left: 50%; transform: translateX(-50%); } /* digital product cards */ .product { background: linear-gradient(180deg, var(--base), var(--panel)); } .product-media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(var(--gold-rgb), .18), transparent 55%), radial-gradient(circle at 30% 20%, var(--glow-1), var(--panel) 75%); } .product-media::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay; } .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .card:hover .product-media img { transform: scale(1.07); } .product-media .medal { position: relative; width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .product-media .medal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: var(--foil); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .product-media .medal::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(var(--gold-rgb), .35); animation: spin 40s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .product-media .numeral { font-family: var(--serif); font-style: italic; font-size: 60px; } .badge { position: absolute; top: 22px; left: 22px; z-index: 4; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--on-gold); background: var(--foil); padding: 7px 11px; } .sale-tag { position: absolute; top: 22px; right: 22px; z-index: 4; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); border: 1px solid var(--gold); background: rgba(0,0,0,.45); padding: 6px 10px; backdrop-filter: blur(4px); } .product-body { padding: 30px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; } .product-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; } .product-body p { margin: 0; line-height: 1.7; color: var(--muted); flex-grow: 1; white-space: pre-line; } .buy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(var(--gold-rgb), .2); } .price { font-family: var(--serif); font-size: 28px; color: var(--gold); } .price small { font-family: var(--sans); font-size: 13px; color: var(--muted); } .price .was { font-size: .64em; color: var(--muted); text-decoration-thickness: 1px; margin-right: 6px; } /* community cards */ .community { background: rgba(255,255,255,.82); backdrop-filter: blur(6px); border-color: var(--light-border); padding: 52px 46px 44px; gap: 20px; } .community::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--foil); background-size: 200% auto; animation: foil 8s linear infinite; } .community .inner-frame { border-color: rgba(var(--vein), .25); } .community .inner-frame::before { background: transparent; } .community-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tier { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--light-label); } .seal { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--base); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; overflow: hidden; box-shadow: 0 0 0 3px var(--light), 0 0 0 4px rgba(var(--gold-rgb), .6); } .seal img { width: 100%; height: 100%; object-fit: cover; } .community h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--base); } .community ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); font-size: 16px; } .community li { display: flex; gap: 12px; align-items: baseline; } .community li::before { content: '◆'; font-size: 8px; color: var(--light-label); transform: translateY(-2px); } .community .buy-row { margin-top: auto; padding-top: 26px; border-top-color: var(--light-border); } .community .price { color: var(--base); font-size: 32px; } .community .price small { color: #5A5A5A; } .community .price .was { color: #6A6A6A; } .sale-inline { color: var(--gold); font-weight: 600; } .section-marble .sale-inline { color: var(--light-label); } /* png cards */ .pack { background: var(--panel); } .pack-media { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 28px; background-color: var(--panel-2); overflow: hidden; background-image: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%), linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; } .pack-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(var(--gold-rgb), .16), transparent 60%); pointer-events: none; } .pack-media img { position: relative; z-index: 1; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); transition: transform 1s var(--ease); } .card:hover .pack-media img { transform: scale(1.06) rotate(-1.5deg); } .pack-media .placeholder { position: relative; z-index: 1; font-family: var(--serif); font-style: italic; font-size: 54px; } .pack-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .pack-body .label { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .pack-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; } .pack-body .meta { font-size: 14px; color: var(--muted); } .pack .buy-row { padding-top: 16px; margin-top: 4px; } .pack .price { font-size: 24px; } /* trust strip, signup, footer */ .trust { position: relative; background: var(--bg); padding: 44px 0; } .trust .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 64px; font-size: 12px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--text-soft); } .trust .wrap span { display: inline-flex; align-items: center; gap: 12px; } .trust svg { width: 18px; height: 18px; color: var(--gold); } .signup { text-align: center; } .signup .wrap { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .signup h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.8vw, 60px); line-height: 1.1; } .signup h2 .script { display: inline-block; font-family: var(--script); font-size: 1.35em; font-weight: 400; padding: 0 .08em; } .signup p { margin: 0; line-height: 1.8; color: var(--muted); } .signup form { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; max-width: 580px; justify-content: center; margin-top: 8px; } .field { flex: 1 1 280px; min-height: 54px; padding: 0 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(var(--gold-rgb), .5); color: var(--text); font-family: var(--sans); font-size: 15px; transition: border-color .3s, background .3s; } .field:focus { border-color: var(--gold-hi); background: rgba(255,255,255,.06); outline: none; } .field::placeholder { color: #A9A192; } .form-msg { min-height: 20px; font-size: 14px; color: var(--gold-hi); } .footer { position: relative; background: var(--footer); padding: 80px 0 48px; } .footer-top { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 56px; } .footer-top .brand-name { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .2em; } .footer-top .tagline { font-family: var(--script); font-size: 34px; } .footer .wrap.bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; color: #BDB5A4; padding-top: 28px; border-top: 1px solid rgba(var(--gold-rgb), .15); } .footer a { color: #BDB5A4; text-decoration: none; } .footer a:hover { color: var(--gold-hi); } .footer-links { display: flex; flex-wrap: wrap; gap: 28px; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; } /* ---------- cart drawer ---------- */ .cart-count { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; align-items: center; justify-content: center; background: var(--foil); color: var(--on-gold); font-size: 11px; letter-spacing: 0; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 40; } .overlay.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--base); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .6s var(--ease); z-index: 50; display: flex; flex-direction: column; } .drawer::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; pointer-events: none; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 30px; border-bottom: 1px solid var(--line); } .drawer-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; } .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .3s, color .3s, transform .4s var(--ease); } .icon-btn:hover { border-color: var(--gold); color: var(--gold-hi); transform: rotate(90deg); } .drawer-items { flex-grow: 1; overflow-y: auto; padding: 12px 30px; } .drawer-item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(var(--gold-rgb), .15); } .drawer-item .thumb { width: 60px; height: 60px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--gold); font-family: var(--serif); font-size: 22px; } .drawer-item .thumb img { width: 100%; height: 100%; object-fit: cover; } .drawer-item .info { flex-grow: 1; min-width: 0; } .drawer-item .info strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; } .drawer-item .info span { font-size: 13px; color: var(--muted); } .drawer-item .info s { color: var(--muted); margin-right: 4px; } .remove { background: none; border: 0; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; min-height: 44px; padding: 0 6px; text-decoration: underline; } .remove:hover { color: var(--gold-hi); } .drawer-foot { padding: 30px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; } .total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-soft); } .total-row .price { font-size: 34px; letter-spacing: 0; } .secure-note { margin: 0; text-align: center; font-size: 12px; color: var(--muted); } .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%); background: var(--foil); color: var(--on-gold); padding: 16px 24px; font-size: 14px; font-weight: 600; z-index: 60; transition: transform .5s var(--ease), opacity .5s, visibility .5s; max-width: calc(100% - 32px); opacity: 0; visibility: hidden; } .toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; } /* ---------- success / notice pages ---------- */ .notice, .receipt { min-height: 100vh; max-width: 760px; margin: 0 auto; padding: 100px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; } .notice h1, .receipt h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); } .notice p, .receipt p { margin: 0; line-height: 1.7; color: var(--muted); } .receipt .eyebrow, .notice .eyebrow { color: var(--gold); } .receipt h1 em { font-style: normal; } .receipt-list { width: 100%; display: flex; flex-direction: column; gap: 16px; text-align: left; } .receipt-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border: 1px solid var(--line); background: var(--base); } .receipt-item strong { font-family: var(--serif); font-weight: 400; font-size: 24px; display: block; } .receipt-item span { font-size: 13px; color: var(--muted); } .receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 760px) { .section { padding: 92px 0; } .nav-links { gap: 18px; } .brand-name { font-size: 15px; letter-spacing: .12em; } .community { padding: 40px 28px 32px; } .frame-corner { width: 64px; height: 64px; } .frame-corner.tl, .frame-corner.tr { top: 150px; } .hero-content { padding-bottom: 120px; } .marquee-track span { font-size: 20px; } .numeral-bg { top: 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal, .enter { opacity: 1 !important; transform: none !important; filter: none !important; } html { scroll-behavior: auto; } } /* =========================================================== Bells & whistles =========================================================== */ .theme-midnight { --gold-edge: #6E5226; --dark-edge: #03050D; } .theme-emerald { --gold-edge: #6B5212; --dark-edge: #02100B; } .theme-plum { --gold-edge: #6E3F3A; --dark-edge: #0C030E; } /* 3D pill buttons */ .btn { border-radius: 999px; --mx: 0px; --my: 0px; --lift: 0px; transform: translate(var(--mx), calc(var(--my) + var(--lift))); transition: transform .35s var(--ease), box-shadow .25s ease, background-position .9s var(--ease), color .3s, border-color .3s; } .btn::after { border-radius: inherit; } .btn:hover { --lift: -3px; } .btn:active { --lift: 4px; transition-duration: .08s; } .btn-gold { box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 8px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 0 var(--gold-edge), 0 14px 28px rgba(0,0,0,.45); text-shadow: 0 1px 0 rgba(255,255,255,.4); } .btn-gold:hover { transform: translate(var(--mx), calc(var(--my) + var(--lift))); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 8px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.2), 0 9px 0 var(--gold-edge), 0 22px 40px rgba(var(--gold-rgb), .35); } .btn-gold:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.25), 0 2px 0 var(--gold-edge), 0 6px 14px rgba(0,0,0,.4); } .btn-line { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border-color: rgba(var(--gold-rgb), .75); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 0 rgba(var(--gold-rgb), .28), 0 12px 26px rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-line:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 0 rgba(var(--gold-rgb), .35), 0 20px 34px rgba(0,0,0,.4); transform: translate(var(--mx), calc(var(--my) + var(--lift))); } .btn-line:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(var(--gold-rgb), .3), 0 4px 10px rgba(0,0,0,.3); } .btn-dark { background: linear-gradient(180deg, color-mix(in srgb, var(--base) 80%, #ffffff), var(--base)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 0 var(--dark-edge), 0 12px 24px rgba(0,0,0,.3); } .btn-dark:hover { transform: translate(var(--mx), calc(var(--my) + var(--lift))); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 0 var(--dark-edge), 0 18px 30px rgba(0,0,0,.3); } .btn-dark:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 var(--dark-edge), 0 4px 10px rgba(0,0,0,.3); } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.55); pointer-events: none; animation: ripple .7s ease-out forwards; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .btn.added { pointer-events: none; } .field { border-radius: 999px; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); } .icon-btn { border-radius: 50%; } .badge, .sale-tag { border-radius: 999px; } .card { border-radius: 18px; } .card::before, .inner-frame { border-radius: inherit; } .inner-frame { border-radius: 12px; } .product, .pack { overflow: hidden; } .community { overflow: hidden; } .receipt-item { border-radius: 16px; } .drawer-item .thumb { border-radius: 12px; } /* cursor spotlight on cards */ .spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; border-radius: inherit; background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(var(--gold-rgb), .16), transparent 45%); } .card:hover .spot { opacity: 1; } .section-marble .spot { background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(var(--gold-rgb), .22), transparent 45%); } /* floating pearls in the hero */ .orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; will-change: transform; transform: translate3d(calc(var(--hx, 0) * var(--depth) * 1px), calc(var(--hy, 0) * var(--depth) * 1px), 0); transition: transform 1.2s var(--ease); } .orb > i { display: block; width: 100%; height: 100%; border-radius: 50%; animation: floaty var(--dur, 9s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .orb.gold > i { background: radial-gradient(circle at 32% 28%, #FFF7E3 0%, #F0D9A6 14%, #CDA868 38%, #8C6B3A 72%, #4A3518 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset -6px -10px 18px rgba(0,0,0,.25); } .orb.rose > i { background: radial-gradient(circle at 32% 28%, #FFF2F3 0%, #F2C9CF 16%, #D998A5 42%, #9B5466 76%, #4D2230 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset -6px -10px 18px rgba(0,0,0,.25); } .orb.glass > i { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.06) 22%, rgba(var(--gold-rgb), .06) 60%, rgba(var(--gold-rgb), .35) 96%, rgba(255,255,255,.5) 100%); box-shadow: inset 0 0 40px rgba(var(--gold-rgb), .18), 0 30px 60px rgba(0,0,0,.35); backdrop-filter: blur(2px); } @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(8deg); } } .hero.has-media .orb { opacity: .85; } /* scroll progress + sticky bar */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: var(--foil); background-size: 200% auto; transform-origin: left; transform: scaleX(0); pointer-events: none; } .sticky-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; transform: translateY(-110%); transition: transform .6s var(--ease); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(var(--gold-rgb), .18); } .sticky-bar.show { transform: none; } .sticky-bar .nav { padding-top: 12px; padding-bottom: 12px; } .sticky-bar .monogram { width: 40px; height: 40px; font-size: 15px; } /* back to top with progress ring */ .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 35; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: var(--on-gold); background: var(--foil); background-size: 200% auto; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 8px rgba(0,0,0,.2), 0 5px 0 var(--gold-edge), 0 14px 28px rgba(0,0,0,.45); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .5s, transform .5s var(--ease); } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 var(--gold-edge), 0 6px 12px rgba(0,0,0,.4); } .to-top svg.ring { position: absolute; inset: -6px; width: 70px; height: 70px; transform: rotate(-90deg); } .to-top svg.ring circle { fill: none; stroke: var(--gold-hi); stroke-width: 1.5; stroke-dasharray: 207; stroke-dashoffset: 207; stroke-linecap: round; } /* gold cursor ring + sparkle trail (desktop only) */ .cursor-ring { position: fixed; top: 0; left: 0; z-index: 90; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), .7); pointer-events: none; opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, opacity .3s; } .cursor-ring.on { opacity: 1; } .cursor-ring.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--gold-rgb), .1); } .sparkle { position: fixed; z-index: 89; pointer-events: none; color: var(--gold-hi); font-size: 10px; line-height: 1; animation: sparkle .9s ease-out forwards; text-shadow: 0 0 6px rgba(var(--gold-rgb), .9); } @keyframes sparkle { to { transform: translate(var(--sx), var(--sy)) scale(.2) rotate(120deg); opacity: 0; } } .burst { position: fixed; z-index: 95; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; background: var(--foil); animation: burst .9s cubic-bezier(.1,.8,.3,1) forwards; } @keyframes burst { to { transform: translate(var(--bx), var(--by)) scale(.1); opacity: 0; } } .bump { animation: bump .6s var(--ease); } @keyframes bump { 30% { transform: scale(1.5); } 60% { transform: scale(.9); } } /* headline wipe-in on section reveal */ .section-head.reveal h2 { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease) .15s; } .section-head.reveal.in h2 { clip-path: inset(0 0 -20% 0); } .section-head.reveal .flourish { transform: scaleX(0); transition: transform 1.2s var(--ease) .5s; } .section-head.reveal.in .flourish { transform: none; } /* gold scrollbar */ html { scrollbar-color: var(--gold) var(--bg); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #050816; } ::-webkit-scrollbar-thumb { background: linear-gradient(#E9D3A4, #CDA868, #8C6B3A); border-radius: 10px; border: 2px solid #050816; } @media (max-width: 760px) { .orb.hide-sm { display: none; } .to-top { right: 16px; bottom: 16px; width: 52px; height: 52px; } .to-top svg.ring { width: 64px; height: 64px; } } @media (prefers-reduced-motion: reduce) { .section-head.reveal h2 { clip-path: none; } .section-head.reveal .flourish { transform: none; } .cursor-ring, .sparkle, .burst { display: none; } } @media (max-width: 760px) { .nav-links a { display: none; } .hero .nav { flex-wrap: nowrap; } .orb.glass { width: 170px !important; height: 170px !important; right: -50px !important; bottom: 3% !important; opacity: .7; } .orb.gold:not(.hide-sm) { width: 40px !important; height: 40px !important; right: 8% !important; top: 18% !important; } .hero .brand-name { font-size: 13px; letter-spacing: .1em; } } /* =========================================================== Pops of fuchsia + turquoise (used sparingly on purpose) =========================================================== */ :focus-visible { outline-color: var(--teal-hi); } .cart-count { background: var(--pop); color: #FFFFFF; box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 14px rgba(var(--pop-rgb), .6); } .sale-tag { background: var(--pop); border-color: var(--pop); color: #FFFFFF; box-shadow: 0 6px 18px rgba(var(--pop-rgb), .45); } .sale-inline, .section-marble .sale-inline { color: var(--pop); } .section-marble .sale-inline { color: #B0124F; } .progress { background: linear-gradient(90deg, var(--pop), var(--gold-hi) 50%, var(--teal)); } .marquee-track span i:nth-of-type(odd) { color: var(--pop-hi); text-shadow: 0 0 10px rgba(var(--pop-rgb), .7); } .marquee-track span i:nth-of-type(even) { color: var(--teal-hi); text-shadow: 0 0 10px rgba(var(--teal-rgb), .7); } .community li::before { color: var(--teal); font-size: 9px; } .trust svg { color: var(--teal-hi); filter: drop-shadow(0 0 6px rgba(var(--teal-rgb), .5)); } .nav-links a::after { background: linear-gradient(90deg, var(--pop), var(--gold-hi), var(--teal)); } .eyebrow-lines::before { background: linear-gradient(90deg, transparent, var(--pop)); } .eyebrow-lines::after { background: linear-gradient(90deg, var(--teal), transparent); } .orb.pop > i { background: radial-gradient(circle at 32% 28%, #FFE3EF 0%, #FF8DBC 16%, #E23A82 42%, #A3104D 76%, #4E0624 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 30px rgba(var(--pop-rgb), .35), inset -6px -10px 18px rgba(0,0,0,.25); } .orb.teal > i { background: radial-gradient(circle at 32% 28%, #E6FFFC 0%, #8EEDE5 16%, #2EC4BA 42%, #127C76 76%, #05332F 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 30px rgba(var(--teal-rgb), .35), inset -6px -10px 18px rgba(0,0,0,.25); } .cursor-ring.hover { border-color: rgba(var(--pop-rgb), .8); background: rgba(var(--pop-rgb), .08); } .sparkle.pop { color: var(--pop-hi); text-shadow: 0 0 8px rgba(var(--pop-rgb), .9); } .sparkle.teal { color: var(--teal-hi); text-shadow: 0 0 8px rgba(var(--teal-rgb), .9); } .burst.pop { background: radial-gradient(circle, #FFB3D2, var(--pop)); } .burst.teal { background: radial-gradient(circle, #B5F5EF, var(--teal)); } .badge { box-shadow: 0 4px 14px rgba(0,0,0,.3); } .to-top svg.ring circle { stroke: var(--pop-hi); } .form-msg { color: var(--teal-hi); } /* =========================================================== Blush Couture (light) — the default palette =========================================================== */ .theme-blush { --bg: #FBF0F0; --base: #F6E0E2; --panel: #FFF9F8; --panel-2: #FBEDEE; --footer: #2B1B24; --glow-1: #FFFFFF; --glow-2: #F7D3DC; --glow-3: #F4D6C4; --gold: #9C5F49; --gold-hi: #C9937C; --gold-rgb: 201, 147, 124; --on-gold: #2B1B24; --accent: #C2185B; --foil: linear-gradient(110deg, #B07A62 0%, #D9A891 16%, #F8E0D2 30%, #C9937C 44%, #FFF3EA 56%, #B98563 70%, #EBC4AE 84%, #B07A62 100%); --foil-rose: linear-gradient(110deg, #9E0F4A 0%, #C2185B 22%, #E44D8C 38%, #F27BAA 48%, #C2185B 62%, #A3104D 80%, #D63A7A 92%, #9E0F4A 100%); --silk-rgb: 201, 147, 124; --silk2-rgb: 214, 36, 110; --light: #FFFDF9; --light-2: #F8EFE6; --vein: 190, 150, 140; --light-border: #EFD8D4; --light-label: #A0644D; --accent-deep: #C2185B; --ink: #2B1B24; --ink-soft: #5B4650; --gold-edge: #8E5A44; --dark-edge: #0F080C; --text: #2B1B24; --text-soft: #4E3A44; --muted: #6B5560; --line: rgba(160, 100, 77, .28); --silk-mode: multiply; --silk-boost: 2.4; color: var(--text); } .theme-blush .eyebrow { color: var(--accent-deep); } .theme-blush .hero h1 { text-shadow: none; } .theme-blush .hero h1 .script { filter: drop-shadow(0 6px 22px rgba(214, 36, 110, .22)); } .theme-blush .hero { background: linear-gradient(165deg, #FDF5F4 0%, #F8E3E5 55%, #F3D6DA 100%); } .theme-blush .vignette { background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgba(194, 24, 91, .07)); } .theme-blush .blob { filter: blur(90px); } .theme-blush .b1 { opacity: .9; } .theme-blush .b2 { opacity: .7; } .theme-blush .b3 { opacity: .8; } .theme-blush .grain, .theme-blush .section-velvet::before, .theme-blush .section-dark::before { opacity: .035; mix-blend-mode: multiply; } .theme-blush .section-velvet { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.9), transparent 60%), linear-gradient(180deg, #FBF0F0, #F7E4E6); } .theme-blush .section-dark { background: #FBF0F0; } .theme-blush .numeral-bg { color: rgba(194, 24, 91, .06); } .theme-blush .card:hover { box-shadow: 0 30px 70px rgba(120, 40, 70, .16), 0 0 0 1px rgba(var(--gold-rgb), .3); } .theme-blush .product { background: linear-gradient(180deg, #FFFFFF, #FFF6F5); } .theme-blush .product-media { background: radial-gradient(circle at 50% 40%, rgba(214, 36, 110, .10), transparent 55%), radial-gradient(circle at 30% 20%, #FFFFFF, #F8E2E4 75%); } .theme-blush .pack { background: #FFFFFF; } .theme-blush .pack-media { background-color: #FBF2F2; background-image: linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%), linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%); } .theme-blush .pack-media::after { background: radial-gradient(circle at 50% 45%, rgba(214, 36, 110, .08), transparent 60%); } .theme-blush .section-marble h2, .theme-blush .community h3, .theme-blush .community .price { color: var(--ink); } .theme-blush .seal { background: var(--ink); color: var(--gold-hi); } .theme-blush .btn-dark { background: linear-gradient(180deg, #4A2F3E, #2B1B24); color: #FBF0F0; border-color: #2B1B24; } .theme-blush .btn-dark:hover { color: #FFD3E4; } .theme-blush .btn-line { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); color: var(--gold); box-shadow: inset 0 1px 0 #FFFFFF, 0 5px 0 rgba(var(--gold-rgb), .45), 0 12px 26px rgba(120, 40, 70, .12); } .theme-blush .btn-line:hover { color: var(--accent-deep); box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 0 rgba(var(--gold-rgb), .5), 0 20px 34px rgba(120, 40, 70, .16); } .theme-blush .btn-gold { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px rgba(120,60,40,.18), inset 0 0 0 1px rgba(255,255,255,.3), 0 6px 0 var(--gold-edge), 0 14px 28px rgba(120, 40, 70, .22); } .theme-blush .btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 8px rgba(120,60,40,.16), 0 9px 0 var(--gold-edge), 0 22px 40px rgba(214, 36, 110, .25); } .theme-blush .field { background: rgba(255,255,255,.8); color: var(--text); box-shadow: inset 0 2px 6px rgba(120, 40, 70, .08); } .theme-blush .field::placeholder { color: #8A7580; } .theme-blush .marquee { background: #FFFFFF; } .theme-blush .marquee-track span i:nth-of-type(odd) { color: var(--pop); text-shadow: none; } .theme-blush .marquee-track span i:nth-of-type(even) { color: var(--teal); text-shadow: none; } .theme-blush .trust { background: #FFFFFF; } .theme-blush .trust svg { color: var(--teal); filter: none; } .theme-blush .form-msg { color: #0F7F78; } .theme-blush .sticky-bar { background: rgba(255, 250, 249, .88); border-bottom-color: rgba(var(--gold-rgb), .3); } .theme-blush .drawer { background: #FFF9F8; } .theme-blush .drawer-item .thumb { background: #FBEDEE; } .theme-blush .footer { --text: #FBF0F0; --muted: #D9C3CB; color: var(--text); } .theme-blush .footer a, .theme-blush .footer .wrap.bottom { color: #D9C3CB; } .theme-blush .footer .monogram { color: var(--gold-hi); } .theme-blush .intro { background: #FBF0F0; } .theme-blush .orb.glass > i { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.25) 24%, rgba(214, 36, 110, .05) 60%, rgba(201, 147, 124, .35) 96%, rgba(255,255,255,.8) 100%); box-shadow: inset 0 0 40px rgba(255,255,255,.6), 0 30px 60px rgba(120, 40, 70, .14); } .theme-blush .orb.gold > i, .theme-blush .orb.rose > i, .theme-blush .orb.pop > i, .theme-blush .orb.teal > i { box-shadow: 0 16px 30px rgba(120, 40, 70, .22), inset -6px -10px 18px rgba(0,0,0,.18); } .theme-blush .orb.rose > i { background: radial-gradient(circle at 32% 28%, #FFF7EE 0%, #F4DCC6 18%, #D9A891 45%, #A56E55 80%, #6A4030 100%); } .theme-blush .cursor-ring { border-color: rgba(194, 24, 91, .55); } .theme-blush .sparkle { color: #C9937C; text-shadow: 0 0 6px rgba(255,255,255,.9); } .theme-blush .sparkle.pop { color: var(--pop); } .theme-blush .sparkle.teal { color: var(--teal); } .theme-blush .receipt-item { background: #FFFFFF; } html:has(body.theme-blush) { scrollbar-color: #C9937C #FBF0F0; } /* =========================================================== Teal statement (Blush Couture) =========================================================== */ .theme-blush { --teal-deep: #0A4643; --teal-rich: #0E6B66; --teal-mid: #14928B; --teal-edge: #063331; } .foil-blush { background-image: linear-gradient(110deg, #F4B8C8 0%, #FFE3EA 25%, #F8C9D6 45%, #FFF1F4 60%, #EFA9BD 80%, #F4B8C8 100%); } /* Communities: deep teal velvet */ .section-teal { position: relative; color: #FDF3F3; background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(255,255,255,.12), transparent 60%), radial-gradient(ellipse 60% 70% at 100% 100%, rgba(214, 36, 110, .16), transparent 60%), linear-gradient(160deg, var(--teal-rich, #0E6B66), var(--teal-deep, #0A4643)); } .section-teal::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay; pointer-events: none; } .section-teal .eyebrow { color: #F8C9D6; } .section-teal h2 { color: #FFFFFF; } .section-teal p.lead { color: #D6EEEB; } .section-teal .flourish { color: #F2D5C4; } .section-teal .numeral-bg { color: rgba(255,255,255,.06); } .section-teal .community { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.5); color: var(--ink, #2B1B24); } .section-teal .community h3, .section-teal .community .price { color: var(--ink, #2B1B24); } .section-teal .community .tier { color: var(--teal-rich, #0E6B66); } .section-teal .community::after { background: linear-gradient(90deg, var(--pop), #F8C9D6, var(--teal)); } .section-teal .card:hover { box-shadow: 0 30px 70px rgba(2, 30, 28, .45), 0 0 0 1px rgba(255,255,255,.5); } .section-teal .seal { background: var(--teal-rich, #0E6B66); color: #FFE3EA; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(var(--teal-rgb), .6); } .section-teal .sale-inline { color: var(--pop); } .section-teal .spot { background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(var(--teal-rgb), .14), transparent 45%); } /* Teal 3D buttons */ .btn-teal, .theme-blush .hero .btn-line, .theme-blush .section-teal .btn-dark { background: linear-gradient(180deg, #1FB5AC 0%, var(--teal-mid, #14928B) 45%, var(--teal-rich, #0E6B66) 100%); color: #FFFFFF; border-color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.18), 0 6px 0 var(--teal-edge, #063331), 0 14px 28px rgba(6, 51, 49, .3); } .theme-blush .hero .btn-line:hover, .theme-blush .section-teal .btn-dark:hover { color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,0,0,.16), 0 9px 0 var(--teal-edge, #063331), 0 22px 40px rgba(var(--teal-rgb), .35); } .theme-blush .hero .btn-line:active, .theme-blush .section-teal .btn-dark:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 var(--teal-edge, #063331), 0 6px 14px rgba(6, 51, 49, .3); } /* Teal marquee band + teal footer */ .theme-blush .marquee { background: linear-gradient(90deg, var(--teal-deep), var(--teal-rich), var(--teal-deep)); border-color: rgba(255,255,255,.12); } .theme-blush .marquee-track span { color: #FDF3F3; } .theme-blush .marquee-track span i:nth-of-type(odd) { color: #FF7EB3; } .theme-blush .marquee-track span i:nth-of-type(even) { color: #F8C9D6; } .theme-blush { --footer: #08403D; } .theme-blush .footer { --muted: #BFE0DC; } .theme-blush .footer a, .theme-blush .footer .wrap.bottom { color: #CBE7E3; } .theme-blush .footer a:hover { color: #FFD3E4; } .theme-blush .footer .wrap.bottom { border-top-color: rgba(255,255,255,.14); } /* Teal touches on blush sections */ .theme-blush .flourish { color: var(--teal-rich); } .theme-blush .section-head .eyebrow::before { content: '✦ '; color: var(--teal); } .theme-blush .medal::after { border-color: rgba(var(--teal-rgb), .35); } .theme-blush .pack-body .label, .theme-blush .tier { color: var(--teal-rich); } .theme-blush .section-teal .flourish { color: #F2D5C4; } .theme-blush .section-teal .section-head .eyebrow::before { color: #FF7EB3; } .theme-blush .sticky-bar .btn-line { background: linear-gradient(180deg, #1FB5AC 0%, var(--teal-mid) 45%, var(--teal-rich) 100%); color: #FFFFFF; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(0,0,0,.18), 0 5px 0 var(--teal-edge), 0 12px 24px rgba(6, 51, 49, .25); } /* Light theme + uploaded video: soft blush veil so the dark headline stays readable */ .theme-blush .hero.has-media .hero-media::after { background: radial-gradient(ellipse at center, rgba(251, 240, 240, .72), rgba(251, 240, 240, .38) 70%), linear-gradient(180deg, rgba(251, 240, 240, .4), transparent 30%, transparent 75%, #FBF0F0); } /* the little heart in the footer: your private door to the dashboard */ .footer a.secret-heart { display: inline-block; margin-left: 8px; font-size: 9px; line-height: 1; color: #F28DB4; opacity: .45; text-decoration: none; transition: opacity .4s, transform .4s; } .footer a.secret-heart:hover, .footer a.secret-heart:focus-visible { opacity: 1; color: #FF7EB3; animation: heartbeat 1s ease-in-out infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.35); } 50% { transform: scale(1.1); } 75% { transform: scale(1.3); } } /* =========================================================== Fuchsia signature + berry velvet + lagoon turquoise (final balance) =========================================================== */ .theme-blush { --teal: #12A9B8; --teal-hi: #63D8E4; --teal-rgb: 18, 169, 184; --berry-deep: #3E0824; --berry: #5E0F37; --berry-rich: #7A1446; --fuchsia-edge: #6E0A33; --footer: #2E0619; } /* Communities: berry velvet instead of teal */ .section-berry { background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(255, 120, 180, .18), transparent 60%), radial-gradient(ellipse 60% 70% at 100% 100%, rgba(var(--teal-rgb), .10), transparent 60%), linear-gradient(160deg, var(--berry-rich, #7A1446), var(--berry-deep, #3E0824)) !important; } .section-berry p.lead { color: #F3D3E0; } .section-berry .eyebrow { color: #F8C9D6; } .theme-blush .section-berry .section-head .eyebrow::before { color: var(--teal-hi); } .section-berry .community .tier { color: #9E1452; } .section-berry .seal { background: linear-gradient(160deg, var(--berry-rich, #7A1446), var(--berry-deep, #3E0824)); color: #FFD9E6; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(214, 36, 110, .5); } .section-berry .community::after { background: linear-gradient(90deg, #D9A891, var(--pop), #D9A891); } .section-berry .card:hover { box-shadow: 0 30px 70px rgba(30, 2, 15, .5), 0 0 0 1px rgba(255,255,255,.5); } .section-berry .spot { background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(214, 36, 110, .10), transparent 45%); } /* Glossy lacquered fuchsia 3D buttons */ .theme-blush .hero .btn-line, .theme-blush .sticky-bar .btn-line, .theme-blush .section-berry .btn-dark { background: linear-gradient(180deg, #F25C9B 0%, #D6246E 42%, #A80F50 100%); color: #FFFFFF; border-color: transparent; text-shadow: 0 1px 0 rgba(90, 0, 35, .35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(80, 0, 30, .25), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 0 var(--fuchsia-edge), 0 14px 28px rgba(168, 15, 80, .3); } .theme-blush .hero .btn-line:hover, .theme-blush .sticky-bar .btn-line:hover, .theme-blush .section-berry .btn-dark:hover { color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(80, 0, 30, .22), 0 9px 0 var(--fuchsia-edge), 0 22px 40px rgba(214, 36, 110, .4); } .theme-blush .hero .btn-line:active, .theme-blush .sticky-bar .btn-line:active, .theme-blush .section-berry .btn-dark:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--fuchsia-edge), 0 6px 14px rgba(168, 15, 80, .3); } .theme-blush .hero .btn-line .cart-count, .theme-blush .sticky-bar .btn-line .cart-count { background: #FFFFFF; color: #B0124F; box-shadow: 0 0 0 2px rgba(255,255,255,.25); } /* Banner + footer in berry, turquoise as the sparkle */ .theme-blush .marquee { background: linear-gradient(90deg, var(--berry-deep), var(--berry-rich), var(--berry-deep)); } .theme-blush .marquee-track span i:nth-of-type(odd) { color: var(--teal-hi); } .theme-blush .marquee-track span i:nth-of-type(even) { color: #FF8DBC; } .theme-blush .footer { --muted: #E6C3D3; } .theme-blush .footer a, .theme-blush .footer .wrap.bottom { color: #EBCBD8; } .theme-blush .footer .wrap.bottom { border-top-color: rgba(255,255,255,.12); } /* Blush sections: back to rose-gold trim, turquoise only as tiny sparks */ .theme-blush .flourish { color: #B07A62; } .theme-blush .section-berry .flourish { color: #F2D5C4; } .theme-blush .pack-body .label, .theme-blush .tier { color: #A0124F; } .theme-blush .medal::after { border-color: rgba(214, 36, 110, .28); } .theme-blush .orb.teal > i { background: radial-gradient(circle at 32% 28%, #E9FDFF 0%, #8FE6EF 16%, #22B9C8 42%, #0B7A88 76%, #04363D 100%); } .theme-blush .form-msg { color: #0A7C88; } /* Bolder, brighter type on berry velvet */ .section-berry .section-head h2 { color: #FFFFFF; font-weight: 500; text-shadow: 0 2px 18px rgba(30, 0, 12, .45); } .section-berry .section-head h2 .foil-blush { background-image: linear-gradient(110deg, #FFB3D1 0%, #FFFFFF 22%, #FF8DBC 42%, #FFE1EC 58%, #FF9CC6 78%, #FFB3D1 100%); filter: drop-shadow(0 2px 14px rgba(255, 95, 162, .45)); } .section-berry p.lead { color: #FFFFFF; font-weight: 400; font-size: 18px; opacity: 1; } .section-berry .eyebrow { color: #FFC2DA; font-weight: 600; } .section-berry .numeral-bg { color: rgba(255,255,255,.08); } .theme-blush .marquee-track span { color: #FFFFFF; font-weight: 500; } .theme-blush .footer { --text: #FFFFFF; } .theme-blush .footer a, .theme-blush .footer .wrap.bottom { color: #FFE3EE; font-weight: 400; } .theme-blush .footer-links { font-weight: 600; } .section-berry .section-head h2 .foil-blush { text-shadow: none; } /* No stark white: champagne + rose-gold type on berry, pearl cards */ .theme-blush { --champagne: #F4D8C6; --champagne-hi: #FBE9DC; } .section-berry .section-head h2 { color: var(--champagne); text-shadow: 0 2px 18px rgba(30, 0, 12, .35); } .section-berry .section-head h2 > :not(.foil-blush) { color: inherit; } .section-berry p.lead { color: var(--champagne); } .section-berry .eyebrow { color: #F7C6B0; } .section-berry .numeral-bg { color: rgba(244, 216, 198, .08); } .section-berry .section-head h2 .foil-blush { background-image: linear-gradient(110deg, #FF8DBC 0%, #FFD0E1 20%, #F4D8C6 38%, #FF9CC6 56%, #F7C6B0 74%, #FF8DBC 100%); } .theme-blush .marquee-track span { color: var(--champagne); } .theme-blush .footer { --text: var(--champagne); } .theme-blush .footer a, .theme-blush .footer .wrap.bottom { color: #EBC8B8; } .theme-blush .footer a:hover { color: #FFB3D1; } .theme-blush .footer-top .brand-name { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Pearl (not white) cards and surfaces */ .section-berry .community { background: linear-gradient(165deg, #FFF8F6 0%, #FBEBEC 55%, #F7E1E3 100%); border-color: rgba(244, 216, 198, .6); } .theme-blush .product { background: linear-gradient(180deg, #FFF8F6, #FBEDEE); } .theme-blush .pack { background: linear-gradient(180deg, #FFF8F6, #FBEDEE); } .theme-blush .marquee, .theme-blush .trust { } .theme-blush .trust { background: #F8E6E8; } .theme-blush .hero .btn-line, .theme-blush .sticky-bar .btn-line, .theme-blush .section-berry .btn-dark { color: #FFF1F6; } .theme-blush .hero .btn-line .cart-count, .theme-blush .sticky-bar .btn-line .cart-count { background: #FBE9DC; color: #A80F50; } /* =========================================================== 3D flip cards =========================================================== */ .card.flip { background: transparent !important; border: 0 !important; overflow: visible !important; perspective: 1600px; } .card.flip::before { display: none; } .flip-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.2, .85, .25, 1.05); } .flip.flipped .flip-inner { transform: rotateY(180deg); } .face { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, rgba(var(--gold-rgb), .2) 52%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.1s var(--ease); } .card.flip:hover .face::after { background-position: -30% 0; } .flip:hover .face { border-color: rgba(var(--gold-rgb), .8); } .face.back { position: absolute; inset: 0; transform: rotateY(180deg); } .product .face.front { background: linear-gradient(180deg, var(--base), var(--panel)); } .pack .face.front { background: var(--panel); } .theme-blush .product .face.front, .theme-blush .pack .face.front { background: linear-gradient(180deg, #FFF8F6, #FBEDEE); } .product-body { flex-grow: 1; justify-content: flex-end; } .flip .spot { z-index: 4; } /* the velvet back */ .face.back { color: #F4D8C6; background: radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255, 120, 180, .22), transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, rgba(var(--teal-rgb), .14), transparent 60%), linear-gradient(160deg, var(--berry-rich, #7A1446), var(--berry-deep, #3E0824)); } .face.back::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .1; mix-blend-mode: overlay; pointer-events: none; } .face.back .inner-frame { border-color: rgba(244, 216, 198, .35); } .back-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 36px 30px 26px; overflow-y: auto; } .back-label { font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #FF9CC6; } .back-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; color: #FBE9DC; } .back-rule { width: 60px; height: 1px; background: var(--foil); } .back-desc { margin: 0; line-height: 1.75; font-size: 16px; color: #F4D8C6; white-space: pre-line; flex-grow: 1; } .back-body .buy-row { border-top-color: rgba(244, 216, 198, .25); } .back-body .price { color: #FBE9DC; } .back-body .price small, .back-body .price .was { color: #E9BFCB; } .specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #F4D8C6; flex-grow: 1; } .specs li { display: flex; gap: 10px; align-items: baseline; } .specs li::before { content: '◆'; font-size: 8px; color: var(--teal-hi); } .pack .back-body { padding: 28px 22px 20px; gap: 12px; } .pack .back-body h3 { font-size: 24px; } /* flip buttons */ .flip-btn, .flip-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transition: transform .4s var(--ease), background .3s, color .3s; } .flip-btn { position: absolute; z-index: 5; right: 16px; bottom: 16px; color: var(--ink, #2B1B24); background: rgba(255,255,255,.7); border: 1px solid rgba(var(--gold-rgb), .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .flip-btn:hover { background: #FFFFFF; color: var(--pop); transform: translateY(-2px); } .flip-btn:hover svg, .flip-back:hover svg { animation: spin .9s var(--ease); } .flip-back { align-self: center; margin-top: 2px; color: #F4D8C6; background: transparent; border: 1px solid rgba(244, 216, 198, .4); } .flip-back:hover { color: #FFFFFF; background: rgba(255,255,255,.08); } .sale-tag { top: auto; bottom: 16px; left: 16px; right: auto; } .pack .sale-tag { top: 14px; left: 14px; bottom: auto; } .pack .flip-btn { right: 12px; bottom: 12px; } /* =========================================================== Community "See what's inside" reveal =========================================================== */ .peek { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9E1452; } .peek i { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; transition: transform .6s var(--ease), background .3s; } .peek i::before, .peek i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); } .peek i::after { transform: translate(-50%, -50%) rotate(90deg); } .community.open .peek i { transform: rotate(135deg); background: rgba(214, 36, 110, .08); } .peek:hover { color: var(--pop); } .peek-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); } .peek-panel > div { overflow: hidden; } .community.open .peek-panel { grid-template-rows: 1fr; } .peek-panel ul { padding-top: 6px; } .peek-panel li { opacity: 0; transform: translateX(-14px); transition: opacity .5s ease, transform .6s var(--ease); transition-delay: calc(var(--k) * .08s + .15s); } .community.open .peek-panel li { opacity: 1; transform: none; } /* refined cursor: a tiny jewel instead of a big ring */ .cursor-ring { width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 0; background: radial-gradient(circle at 35% 30%, #FFE3EF, var(--pop) 60%, #A3104D); box-shadow: 0 0 10px rgba(var(--pop-rgb), .6); } .cursor-ring.hover, .theme-blush .cursor-ring.hover { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: transparent; border: 1px solid rgba(var(--pop-rgb), .7); box-shadow: 0 0 14px rgba(var(--pop-rgb), .35); } .theme-blush .cursor-ring { border: 0; } @media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } .peek-panel li { opacity: 1; transform: none; } } /* =========================================================== Wordmark: The / NEEMAH / Collective =========================================================== */ .wordmark { --wm: 40px; position: relative; display: inline-grid; grid-template-columns: auto; justify-items: center; line-height: 1; text-decoration: none; padding: 4px 6px; } .wordmark:hover { text-decoration: none; } .wm-main { font-family: var(--serif); font-weight: 600; font-size: var(--wm); letter-spacing: .07em; line-height: .95; background: linear-gradient(110deg, #9A5B45 0%, #C9937C 14%, #F6D9C4 26%, #B9825F 40%, #FFF0E2 52%, #A86E52 66%, #E8BFA2 80%, #9A5B45 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 9s linear infinite; filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 6px 14px rgba(120, 50, 30, .22)); } .wm-the, .wm-col { font-family: var(--script); font-weight: 400; color: var(--pop, #D6246E); line-height: 1; text-shadow: 0 2px 10px rgba(214, 36, 110, .22); } .wm-the { justify-self: start; margin-left: 4%; font-size: calc(var(--wm) * .78); margin-bottom: calc(var(--wm) * -.28); position: relative; z-index: 1; } .wm-col { justify-self: end; margin-right: 2%; font-size: calc(var(--wm) * .86); margin-top: calc(var(--wm) * -.22); position: relative; z-index: 1; } .wordmark:hover .wm-the, .wordmark:hover .wm-col { color: #E23A82; } .wm-sm { --wm: 26px; } .wm-lg { --wm: 64px; } .wm-xl { --wm: clamp(54px, 9vw, 96px); } .intro .intro-mark { opacity: 0; transform: scale(.94); animation: introMark 1.3s var(--ease) .1s forwards; } .wm-footer .wm-main { background-image: linear-gradient(110deg, #C9937C 0%, #F4D8C6 20%, #FFF2E6 34%, #D9A891 50%, #FBE9DC 66%, #C9937C 84%, #F4D8C6 100%); filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); } .wm-footer .wm-the, .wm-footer .wm-col { color: #FF8DBC; } /* split nav: links | wordmark | links */ .nav-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .nav-split .nav-links.left { justify-content: flex-start; } .nav-split .nav-links.right { justify-content: flex-end; } .hero .nav-split { padding-top: 22px; padding-bottom: 10px; } .sticky-bar .nav-split { padding-top: 6px; padding-bottom: 6px; } @media (max-width: 760px) { .hero .wordmark { --wm: 28px; } .nav-split { grid-template-columns: 1fr auto 1fr; gap: 8px; } .nav-split .nav-links.right .btn { padding: 0 14px; letter-spacing: .14em; } .wm-lg { --wm: 46px; } .sticky-bar .wordmark { --wm: 20px; } } .wm-the, .wm-col { letter-spacing: 0; } .hero .wordmark { --wm: 48px; } .wordmark:not(.wm-footer) .wm-main { background-image: linear-gradient(110deg, #8E4F3A 0%, #B97A5E 16%, #E6BC9E 28%, #9C5F45 42%, #DDA683 54%, #8E4F3A 68%, #C78B6C 82%, #8E4F3A 100%); } @media (max-width: 760px) { .hero .wordmark { --wm: 30px; } } /* =========================================================== Section rhythm: blush → champagne satin → berry velvet =========================================================== */ .section-satin { background: radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255,255,255,.65), transparent 60%), radial-gradient(ellipse 60% 60% at 0% 100%, rgba(214, 36, 110, .10), transparent 60%), linear-gradient(160deg, #F8E6D9 0%, #F0D1BD 55%, #E7BFA7 100%) !important; color: var(--ink, #2B1B24); } .section-satin::before { opacity: .05 !important; } .sheen-satin { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sheen-satin::before { content: ''; position: absolute; top: -30%; left: -60%; width: 60%; height: 160%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255, 248, 240, .55), rgba(255,255,255,.15), transparent); animation: satin 11s ease-in-out infinite; } @keyframes satin { 0% { left: -60%; } 55%, 100% { left: 130%; } } .section-satin .numeral-bg { color: rgba(160, 90, 60, .10); } .section-satin p.lead { color: #5B4048; } .section-satin .eyebrow { color: #9E1452; } .section-satin .flourish { color: #9C5F49 !important; } .section-satin .pack .face.front { background: linear-gradient(180deg, #FFFAF6, #FBEDE6); } .section-satin .card:hover { box-shadow: 0 30px 70px rgba(120, 60, 30, .22), 0 0 0 1px rgba(var(--gold-rgb), .4); } /* curved section edges */ .wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; z-index: 1; pointer-events: none; } .wave.from-blush path { fill: #F7E4E6; } .wave.from-satin path { fill: #E7BFA7; } .section-satin, .section-berry { padding-top: 160px; } .wave + .sheen-satin + .numeral-bg, .wave + .numeral-bg { top: 90px; } /* "Up next" teasers */ .up-next { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; margin: 72px auto 0; text-decoration: none; color: inherit; } .un-label { font-size: 11px; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: #9E1452; } .un-title { font-family: var(--script); font-size: 40px; line-height: 1.1; background: var(--foil-rose); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s linear infinite; padding: 0 .1em; } .un-arrow { position: relative; width: 1px; height: 46px; margin-top: 6px; background: linear-gradient(#C2185B, transparent); } .un-arrow::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 8px; height: 8px; border-right: 1px solid #C2185B; border-bottom: 1px solid #C2185B; transform: translateX(-50%) rotate(45deg); animation: nudge 1.8s var(--ease) infinite; } @keyframes nudge { 0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .4; } 50% { transform: translate(-50%, 8px) rotate(45deg); opacity: 1; } } .up-next:hover .un-label { color: var(--teal); } .up-next:hover .un-arrow { background: linear-gradient(var(--teal), transparent); } @media (max-width: 760px) { .wave { height: 44px; } .section-satin, .section-berry { padding-top: 120px; } .un-title { font-size: 32px; } } /* =========================================================== Round 1: announcement bar, About, 4-column footer, pages =========================================================== */ .announce { position: relative; z-index: 31; background: linear-gradient(90deg, #3E0824, #7A1446 50%, #3E0824); text-align: center; overflow: hidden; } .announce::after { content: ''; position: absolute; top: 0; left: -40%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 220, 235, .25), transparent); animation: announceSheen 6s ease-in-out infinite; pointer-events: none; } @keyframes announceSheen { 0% { left: -40%; } 60%, 100% { left: 120%; } } .announce a { display: inline-block; padding: 11px 20px; color: #F4D8C6; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } .announce a:hover { color: #FFD0E1; } .announce-star { color: var(--teal-hi, #63D8E4); } /* logo image instead of text wordmark */ .wordmark.has-logo img { display: block; height: 78px; width: auto; max-width: 260px; object-fit: contain; } .wordmark.wm-sm.has-logo img { height: 44px; } .wordmark.wm-lg.has-logo img { height: 120px; max-width: 360px; } @media (max-width: 760px) { .wordmark.has-logo img { height: 52px; } .wordmark.wm-lg.has-logo img { height: 90px; } } /* featured ribbon */ .ribbon { position: absolute; z-index: 6; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #FFF1F6; background: linear-gradient(180deg, #F25C9B, #D6246E 50%, #A80F50); box-shadow: 0 4px 0 #6E0A33, 0 10px 20px rgba(168, 15, 80, .3); } .card.is-featured .face, .card.community.is-featured { border-color: rgba(214, 36, 110, .55); } /* About */ .about { padding-top: 170px; } .wave.from-berry path { fill: #3E0824; } .about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; } .about-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 50% 50% 24px 24px / 36% 36% 24px 24px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFFFFF, #F6DDE2 70%); box-shadow: 0 30px 70px rgba(120, 40, 70, .18); } .about-frame::before { content: ''; position: absolute; inset: 12px; border-radius: 50% 50% 16px 16px / 36% 36% 16px 16px; border: 1px solid rgba(201, 147, 124, .7); z-index: 2; pointer-events: none; } .about-frame img { width: 100%; height: 100%; object-fit: cover; } .about-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 160px; } .about-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .about-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; color: var(--ink, #2B1B24); } .about-copy .flourish { margin-left: -6px; } .about-text { margin: 0; font-size: 17px; line-height: 1.9; color: var(--text-soft); white-space: pre-line; } .about-sign { margin: 4px 0 0; font-family: var(--script); font-size: 54px; line-height: 1.1; padding-right: .2em; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 44px; } .about-photo { max-width: 360px; width: 100%; margin: 0 auto; } } /* 4-column footer */ .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; } .fcol { display: flex; flex-direction: column; gap: 12px; } .fcol[hidden] { display: none; } .fcol h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 22px; color: #FBE9DC; } .fcol h3::after { content: ''; display: block; width: 36px; height: 1px; margin-top: 10px; background: var(--foil); } .footer .fcol a, .footer .fcol-empty { color: #EBC8B8; text-decoration: none; font-size: 14px; letter-spacing: .02em; font-weight: 400; min-height: 28px; display: inline-flex; align-items: center; } .footer .fcol a:hover { color: #FFB3D1; } .footer .fcol a[hidden] { display: none; } #connect-links { display: flex; flex-direction: column; gap: 12px; } .tagline-small { font-family: var(--serif); font-style: italic; letter-spacing: .04em; } @media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; text-align: center; } .fcol { align-items: center; } .fcol h3::after { margin-left: auto; margin-right: auto; } } /* support + legal pages */ .doc-page { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #FDF5F4, #F7E4E6); } .doc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 24px; } .doc { flex-grow: 1; max-width: 760px; width: 100%; padding: 40px 24px 100px; } .doc h1 { margin: 10px 0 24px; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 58px); line-height: 1.1; color: var(--ink, #2B1B24); } .doc-body h2 { margin: 36px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 26px; color: #7A1446; } .doc-body p, .doc-body li { font-size: 17px; line-height: 1.85; color: var(--text-soft); } .doc-body ul { padding-left: 20px; } .doc-body li::marker { color: var(--teal); } .doc-body a { color: #A80F50; } .draft-note { padding: 14px 18px; border-radius: 14px; background: #FFF4D6; border: 1px solid #E8C770; color: #5C4300 !important; font-size: 14px !important; line-height: 1.6 !important; } mark.ph { background: rgba(214, 36, 110, .12); color: #A80F50; padding: 0 4px; border-radius: 4px; } .doc-updated { margin-top: 40px; font-size: 13px; color: var(--muted); } .doc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 28px 24px; background: #2E0619; color: #EBC8B8; font-size: 13px; } /* =========================================================== Round 2: collections, product pages, collection pages =========================================================== */ .name-link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease), color .3s; } .name-link:hover { color: inherit; background-size: 100% 1px; } .face.back .name-link, .back-body h3 a { color: #FBE9DC; } .details-link { align-self: center; color: #FFB3D1; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; } .details-link:hover { color: #FFFFFF; } /* Shop by Collection */ .section-collections { background: linear-gradient(180deg, #FFF8F7, #FBF0F0); } .col-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 260px)); justify-content: center; gap: 34px; } .col-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--ink, #2B1B24); } .col-arch { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 50% 50% 18px 18px / 34% 34% 18px 18px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FFFFFF, #F4D6DC 75%); box-shadow: 0 20px 50px rgba(120, 40, 70, .14); transition: transform .7s var(--ease), box-shadow .7s var(--ease); } .col-arch::after { content: ''; position: absolute; inset: 9px; border-radius: inherit; border: 1px solid rgba(201, 147, 124, .75); pointer-events: none; } .col-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .col-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 96px; } .col-card:hover .col-arch { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(168, 15, 80, .2); } .col-card:hover .col-arch img { transform: scale(1.06); } .col-name { font-family: var(--serif); font-size: 26px; text-align: center; line-height: 1.2; } .col-meta { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #9E1452; } .col-meta i { display: inline-block; font-style: normal; transition: transform .4s var(--ease); } .col-card:hover .col-meta i { transform: translateX(6px); } .col-card .ribbon { top: -10px; } /* shared header on product + collection pages */ .shop-head { max-width: 1240px; } .shop-nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; } .shop-nav a { color: var(--ink, #2B1B24); text-decoration: none; } .shop-nav a:hover { color: #A80F50; } .crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-bottom: 28px; } .crumbs a { color: #9E1452; text-decoration: none; } .crumbs a:hover { text-decoration: underline; } /* product page */ .pdp { flex-grow: 1; padding-top: 24px; padding-bottom: 100px; } .pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .pdp-media { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(214, 36, 110, .10), transparent 55%), radial-gradient(circle at 30% 20%, #FFFFFF, #F8E2E4 75%); box-shadow: 0 30px 70px rgba(120, 40, 70, .16); border: 1px solid var(--line); } .pdp-media img { width: 100%; height: 100%; object-fit: cover; } .pdp-media.is-png { background-color: #FBF2F2; background-image: linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%), linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; } .pdp-media.is-png img { object-fit: contain; padding: 40px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); } .pdp-media .medal { position: relative; width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .pdp-media .medal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: var(--foil); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .pdp-media .numeral { font-family: var(--serif); font-style: italic; font-size: 80px; } .pdp-media .ribbon { top: 18px; } .pdp-info { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; } .pdp-info h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; color: var(--ink, #2B1B24); } .pdp-info .flourish { color: #B07A62; margin-left: -6px; } .pdp-price .price { font-size: 36px; } .pdp-desc { margin: 0; font-size: 17px; line-height: 1.85; color: var(--text-soft); white-space: pre-line; } .pdp-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--text-soft); font-size: 16px; } .pdp-perks li { display: flex; gap: 12px; align-items: baseline; } .pdp-perks li::before { content: '◆'; font-size: 9px; color: var(--teal); } .pdp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; } .pdp-note { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* collection page */ .col-hero { position: relative; overflow: hidden; padding: 70px 0 60px; text-align: center; background: linear-gradient(160deg, #F8E6D9, #F0D1BD 60%, #E7BFA7); } .col-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: saturate(.9); } .col-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; } .col-hero .crumbs { justify-content: center; margin-bottom: 8px; } .col-hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 76px); color: var(--ink, #2B1B24); } .col-hero .lead { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.8; color: #5B4048; white-space: pre-line; } .col-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 290px)); justify-content: center; gap: 30px; padding-top: 70px; padding-bottom: 110px; flex-grow: 1; } .mini-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #FFF8F6, #FBEDEE); border: 1px solid var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .mini-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(120, 40, 70, .16); } .mini-media { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #FFFFFF, #F8E2E4 75%); text-decoration: none; } .mini-media img { width: 100%; height: 100%; object-fit: cover; } .mini-media span.foil-text { font-family: var(--serif); font-style: italic; font-size: 70px; } .mini-media .sale-tag { top: 14px; left: 14px; bottom: auto; } .mini-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; } .mini-body .label { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #A0124F; } .mini-body h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; } .mini-body h2 a { color: var(--ink, #2B1B24); text-decoration: none; } .mini-body h2 a:hover { color: #A80F50; } .mini-body .buy-row { margin-top: auto; } @media (max-width: 860px) { .pdp-grid { grid-template-columns: 1fr; gap: 36px; } .shop-nav { display: none; } } .theme-blush .shop-head .btn-line { background: linear-gradient(180deg, #F25C9B 0%, #D6246E 42%, #A80F50 100%); color: #FFF1F6; border-color: transparent; text-shadow: 0 1px 0 rgba(90, 0, 35, .35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(80, 0, 30, .25), 0 5px 0 #6E0A33, 0 12px 24px rgba(168, 15, 80, .25); } .theme-blush .shop-head .btn-line .cart-count { background: #FBE9DC; color: #A80F50; } /* Give script lettering room so swashes (like the P in "private") aren't clipped by the shimmer effect */ .script.foil-text, .about-sign.foil-text, .un-title, .tagline.foil-text { padding: .12em .32em .18em; margin: -.12em -.22em -.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero h1 .script.foil-text { padding: .08em .4em .16em; margin: -.08em -.4em -.16em; } /* script swashes reach far to the left: give them extra room on that side */ .script.foil-text, .un-title, .about-sign.foil-text { padding: .15em .35em .22em .8em; margin: -.15em -.25em -.22em -.5em; } .hero h1 .script.foil-text { padding: .1em .5em .18em .9em; margin: -.1em -.5em -.18em -.9em; } .script.foil-text, .un-title, .about-sign.foil-text { margin-left: -.12em; } .hero h1 .script.foil-text { margin-left: -.9em; } .script.foil-text, .un-title, .about-sign.foil-text { padding-right: .6em; margin-right: -.5em; } .hero h1 .script.foil-text { padding-right: .7em; margin-right: -.7em; } .signup h2 .script.foil-text { padding: .15em .6em .22em .8em; margin: -.15em -.5em -.22em -.12em; } .signup h2 .script.foil-text { margin-left: -.42em; } /* discount code in cart */ .code-form { display: flex; gap: 10px; } .code-form[hidden] { display: none; } .code-field { flex: 1 1 auto; min-height: 46px; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; } .code-msg { margin: -6px 0 0; min-height: 18px; font-size: 13px; color: #0A7C88; } .code-msg.bad { color: #A80F50; } .discount-row .price { font-size: 22px; color: #A80F50; } .discount-row { font-size: 11px; } /* Legal fine print */ .fine-print { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); text-align: center; } .fine-print a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .fine-print a:hover, .fine-print a:focus-visible { color: var(--accent, #D6246E); } .section-note { margin-top: 28px; max-width: 640px; margin-left: auto; margin-right: auto; } .signup .fine-print { max-width: 520px; margin: 14px auto 0; } .cart-terms { margin-top: 6px; font-size: 11px; } .section-berry .fine-print, .section-dark .fine-print { color: rgba(255, 236, 228, .78); } .pdp-legal { font-size: 12px; opacity: .85; } .pdp-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .total-row.discount-row[hidden] { display: none; } /* Thank-you page */ .ty-body { min-height: 100vh; background: radial-gradient(120% 80% at 50% 0%, #fdeff3 0%, #f6e1e7 55%, #efd3dc 100%); overflow-x: hidden; } .ty-glow { position: fixed; inset: -20% -10% auto; height: 70vh; background: radial-gradient(closest-side, rgba(214, 36, 110, .14), transparent 70%); pointer-events: none; } .ty { position: relative; min-height: 100vh; max-width: 760px; margin: 0 auto; padding: 56px 20px 72px; display: flex; flex-direction: column; align-items: center; gap: 28px; } .ty-mark { margin-bottom: 4px; } .ty-card { width: 100%; text-align: center; padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 56px); border-radius: 28px; background: linear-gradient(180deg, #fff8f6, #fbeef1); border: 1px solid rgba(160, 60, 100, .16); box-shadow: 0 30px 80px -40px rgba(90, 16, 53, .45), inset 0 1px 0 #fff; display: flex; flex-direction: column; align-items: center; gap: 16px; } .ty-seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff7f5; background: radial-gradient(circle at 30% 30%, #f06ca3, #d6246e 60%, #9e1350); box-shadow: 0 12px 30px -10px rgba(214, 36, 110, .6), inset 0 2px 4px rgba(255, 255, 255, .35); animation: tyPop .7s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes tyPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ty-card .eyebrow { color: var(--accent, #d6246e); } .ty-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.4vw, 56px); line-height: 1.1; color: var(--ink, #3b1c2a); } .ty-title .script { font-size: 1.15em; } .ty-dot { color: var(--accent, #d6246e); } .ty-lead { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.75; color: var(--muted); } .ty-lead a, .ty-small a { color: var(--accent, #d6246e); } .ty-list { width: 100%; display: flex; flex-direction: column; gap: 14px; margin: 10px 0 4px; text-align: left; } .ty-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 18px; background: #fffaf8; border: 1px solid rgba(160, 60, 100, .14); box-shadow: 0 10px 30px -22px rgba(90, 16, 53, .5); } .ty-item strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink, #3b1c2a); } .ty-item span { font-size: 13px; color: var(--muted); } .ty-small { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.7; color: var(--muted); } .ty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } @media (prefers-reduced-motion: reduce) { .ty-seal { animation: none; } } .ty-name { font-style: italic; color: var(--accent, #d6246e); } /* Featured Favorites: one tidy row of hand-picked items from every section */ .section-featured { background: linear-gradient(180deg, #fbeff2 0%, #f8e7ec 100%); border-top: 1px solid rgba(214, 36, 110, .12); border-bottom: 1px solid rgba(214, 36, 110, .12); } .section-featured .section-head { margin-bottom: 48px; } .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 290px)); justify-content: center; gap: 28px; } .feat-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, #fffaf8, #fbf0f2); border: 1px solid rgba(214, 36, 110, .22); box-shadow: 0 24px 50px -32px rgba(90, 16, 53, .5); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; } .feat-card:hover { transform: translateY(-6px); border-color: rgba(214, 36, 110, .5); box-shadow: 0 34px 60px -30px rgba(90, 16, 53, .55); } .feat-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle at 30% 20%, #f6d4df, #e9b9c9 70%); } .feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .feat-card:hover .feat-media img { transform: scale(1.05); } .feat-community .feat-media { background: radial-gradient(circle at 50% 35%, #7a1446, #3e0824 75%); } .feat-community .feat-media img { width: 62%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px #fff7f5, 0 0 0 5px rgba(214, 36, 110, .55), 0 18px 40px -12px rgba(0, 0, 0, .5); } .feat-mono { font-family: var(--serif); font-size: 72px; } .feat-media .sale-tag { position: absolute; top: 14px; left: 14px; } .feat-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; } .feat-kind { font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--accent, #d6246e); } .feat-body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink, #3b1c2a); } .feat-body h3 a { color: inherit; text-decoration: none; } .feat-body .buy-row { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(214, 36, 110, .14); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .feat-body .price { font-size: 22px; } .feat-body .btn { padding: 11px 18px; font-size: 11px; } /* Community cards: same compact size as the product cards, side by side */ .grid-community { gap: 30px; } .card.community { padding: 40px 28px 28px; gap: 16px; } .card.community h3 { font-size: clamp(24px, 2.2vw, 30px); } .card.community .seal { width: 52px; height: 52px; } .card.community .tier { font-size: 10px; letter-spacing: .22em; } .card.community .buy-row { padding-top: 18px; flex-wrap: wrap; gap: 12px; } .card.community .price { font-size: 26px; } .card.community .peek span { font-size: 11px; } /* keep the Featured ribbon fully visible as a tab hanging from the top edge */ .card.community .ribbon { top: 0; border-radius: 0 0 12px 12px; padding: 5px 14px 6px; box-shadow: 0 8px 18px -6px rgba(168, 15, 80, .45); } .feat-media .sale-tag { position: absolute; top: 14px; left: 14px; right: auto; bottom: auto; width: auto; height: auto; justify-self: start; align-self: start; } .feat-body .buy-row { flex-wrap: nowrap; } .feat-body .price { font-size: 20px; white-space: nowrap; } .feat-body .price .was { font-size: .7em; } .feat-body .btn { padding: 10px 15px; font-size: 10.5px; letter-spacing: .18em; white-space: nowrap; flex-shrink: 0; } @media (max-width: 380px) { .feat-body .buy-row { flex-wrap: wrap; } } /* Featured: floating cards */ .section-featured { position: relative; overflow: hidden; } .section-featured .wrap { position: relative; z-index: 1; } .feat-grid { padding: 14px 0 26px; } .feat-card.in { animation: featFloat var(--fs, 6s) ease-in-out var(--fd, 0s) infinite; } @keyframes featFloat { 0%, 100% { translate: 0 0; box-shadow: 0 30px 50px -30px rgba(90, 16, 53, .5), 0 0 0 rgba(214, 36, 110, 0); } 50% { translate: 0 -14px; box-shadow: 0 46px 60px -32px rgba(90, 16, 53, .42), 0 0 34px -8px rgba(214, 36, 110, .28); } } .feat-card:hover { animation-play-state: paused; } /* soft glow pool under each card that breathes with the float */ .feat-card::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 15, 80, .28), transparent); filter: blur(6px); pointer-events: none; } /* light sweep across the image on hover */ .feat-sheen { position: absolute; z-index: 2; top: 0; left: -60%; width: 45%; height: 58%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .feat-card:hover .feat-sheen { animation: featSheen 1.1s ease-out; } @keyframes featSheen { 0% { left: -60%; opacity: 0; } 20% { opacity: 1; } 100% { left: 130%; opacity: 0; } } /* floating pearls in the background */ .feat-orbs i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff, #f7c7d8 45%, #d6246e 120%); box-shadow: 0 14px 30px -10px rgba(168, 15, 80, .4); opacity: .55; animation: orbDrift 14s ease-in-out infinite; } .feat-orbs i:nth-child(1) { width: 46px; height: 46px; top: 16%; left: 7%; } .feat-orbs i:nth-child(2) { width: 18px; height: 18px; top: 62%; left: 12%; animation-delay: -4s; animation-duration: 11s; } .feat-orbs i:nth-child(3) { width: 30px; height: 30px; top: 22%; right: 9%; animation-delay: -7s; background: radial-gradient(circle at 32% 28%, #fff, #f3dcc8 50%, #b8865a 120%); } .feat-orbs i:nth-child(4) { width: 14px; height: 14px; top: 74%; right: 14%; animation-delay: -2s; animation-duration: 9s; } .feat-orbs i:nth-child(5) { width: 10px; height: 10px; top: 40%; left: 48%; animation-delay: -9s; opacity: .35; background: radial-gradient(circle at 32% 28%, #e8fffd, #3fc5c0 70%); } @keyframes orbDrift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(14px, -22px); } 66% { transform: translate(-10px, 12px); } } @media (max-width: 700px) { .feat-orbs i:nth-child(n+3) { display: none; } } @media (prefers-reduced-motion: reduce) { .feat-card.in, .feat-orbs i, .feat-card:hover .feat-sheen { animation: none; } } /* rose-gold light that slowly travels around each featured card's edge */ @property --fang { syntax: ''; initial-value: 0deg; inherits: false; } .feat-card::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--fang), transparent 0deg, rgba(244, 143, 184, .9) 40deg, #e8c39e 80deg, #d6246e 120deg, transparent 170deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fangSpin 7s linear infinite; } .feat-card:nth-child(2)::before { animation-delay: -2.3s; } .feat-card:nth-child(3)::before { animation-delay: -4.6s; } @keyframes fangSpin { to { --fang: 360deg; } } @media (prefers-reduced-motion: reduce) { .feat-card::before { animation: none; } } /* Buttons always sit on the right, even when a card has no price (affiliate items) */ .card .buy-row > .btn:last-child, .feat-body .buy-row > .btn:last-child, .card .buy-row > a.btn:last-child { margin-left: auto; } /* Tighter rhythm between sections */ .section { padding: 84px 0; } .section-head { margin-bottom: 44px; gap: 14px; } .section-featured { padding: 70px 0 60px; } .section-featured .section-head { margin-bottom: 36px; } .up-next { margin-top: 44px; } .section-note { margin-top: 22px; } .trust { padding: 32px 0; } @media (max-width: 700px) { .section { padding: 60px 0; } .section-featured { padding: 52px 0 44px; } .section-head { margin-bottom: 32px; } .up-next { margin-top: 32px; } } /* ============================================================ Unified product card (Featured, Digitals, Pixels, Communities) ============================================================ */ .nc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 292px)); justify-content: center; gap: 30px; } .nc-float-grid { padding: 14px 0 30px; } .nc-card { position: relative; display: flex; perspective: 1400px; border-radius: 22px; transition: transform .5s var(--ease); } .nc-card .flip-inner { flex: 1; display: flex; } .nc-card .face { flex: 1; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid rgba(214, 36, 110, .22); background: linear-gradient(180deg, #fffaf8 0%, #fbeff2 100%); box-shadow: 0 26px 50px -32px rgba(90, 16, 53, .55), inset 0 1px 0 #fff; } .nc-card .face::after { display: none; } .nc-card:hover .face { border-color: rgba(214, 36, 110, .5); } /* image area: whole image always visible, set on a soft glow of its own colors */ .nc-media { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 38%, #7a1446, #3e0824 78%); } .nc-ambient { position: absolute; inset: -18%; z-index: -1; background-size: cover; background-position: center; filter: blur(26px) saturate(1.25) brightness(.62); transform: scale(1.1); } .nc-media img { position: relative; width: 100%; height: 100%; padding: 9% 10%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .42)); transition: transform .9s var(--ease); } .nc-card:hover .nc-media img { transform: scale(1.045); } .nc-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -40px 50px -40px rgba(0, 0, 0, .35); } .nc-mono { font-family: var(--serif); font-size: 84px; line-height: 1; } .nc-sheen { position: absolute; z-index: 2; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .nc-card:hover .nc-sheen { animation: featSheen 1.1s ease-out; } /* tags sit over the image */ .nc-tags { position: absolute; z-index: 4; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; } .nc-tag { padding: 5px 11px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #fff7f5; } .nc-tag.sale { background: linear-gradient(180deg, #f25c9b, #d6246e); box-shadow: 0 6px 14px -6px rgba(168, 15, 80, .7); } .nc-tag.feat { background: rgba(30, 8, 20, .55); backdrop-filter: blur(6px); border: 1px solid rgba(243, 220, 200, .45); color: #f3dcc8; } /* details button: small pearl chip at the image's bottom-right */ .nc-mwrap { position: relative; } .nc-card .nc-flip { position: absolute; z-index: 4; right: 14px; bottom: 14px; top: auto; left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(243, 220, 200, .55); background: rgba(255, 250, 248, .9); color: #a3155a; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); transition: transform .3s var(--ease), background .3s; } .nc-card .nc-flip:hover { transform: translateY(-2px); background: #fff; } .nc-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 20px 22px 22px; } .nc-kind { font-size: 9.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #c41f63; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .nc-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.22; color: #3b1c2a; min-height: 2.44em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nc-card h3 a { color: inherit; text-decoration: none; } .nc-card .buy-row { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(214, 36, 110, .14); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; min-height: 62px; } .nc-card .price { font-size: 21px; white-space: nowrap; color: #8c2b52; } .nc-card .price .was { font-size: .68em; } .nc-card .price small { font-size: .55em; } .nc-card .btn { padding: 10px 16px; font-size: 10.5px; letter-spacing: .18em; white-space: nowrap; flex-shrink: 0; margin-left: auto; } /* back of card */ .nc-card .face.back { position: absolute; inset: 0; } .nc-back { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 22px 20px; background: radial-gradient(120% 70% at 50% 0%, #fdeef3, #fbf3f1 60%); } .nc-back h3 { min-height: 0; } .nc-rule { width: 46px; height: 1px; background: linear-gradient(90deg, #d6246e, #e8c39e); margin: 2px 0 4px; } .nc-details { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } .nc-desc { margin: 0; font-size: 14px; line-height: 1.7; color: #5b3a48; } .nc-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #5b3a48; } .nc-perks li { display: flex; gap: 10px; align-items: baseline; } .nc-perks li::before { content: '✦'; font-size: 9px; color: #d6246e; } .nc-back .buy-row { flex: 0 0 auto; } .nc-back-links { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; } .nc-back-links .details-link { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #a3155a; text-decoration: none; } .nc-card .flip-back { position: static; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(214, 36, 110, .3); background: transparent; color: #a3155a; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; } /* floating (Featured section only) */ .nc-card.is-float.in { animation: featFloat var(--fs, 6s) ease-in-out var(--fd, 0s) infinite; } .nc-card.is-float:hover, .nc-card.is-float.flipped { animation-play-state: paused; } .nc-card.is-float::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168, 15, 80, .28), transparent); filter: blur(6px); pointer-events: none; z-index: -1; } .nc-card.is-float::before { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: 22px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--fang), transparent 0deg, rgba(244, 143, 184, .9) 40deg, #e8c39e 80deg, #d6246e 120deg, transparent 170deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fangSpin 7s linear infinite; } .nc-card.is-float:nth-child(2)::before { animation-delay: -2.3s; } .nc-card.is-float:nth-child(3)::before { animation-delay: -4.6s; } /* cards sitting on the dark berry section get a deeper shadow */ .section-berry .nc-card .face { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 #fff; border-color: rgba(243, 220, 200, .35); } @media (max-width: 420px) { .nc-card h3 { font-size: 20px; } .nc-card .btn { padding: 9px 13px; } } @media (prefers-reduced-motion: reduce) { .nc-card.is-float.in, .nc-card.is-float::before { animation: none; } } /* refinements */ .nc-media img { padding: 5% 6%; } .nc-ambient { filter: blur(30px) saturate(1.3) brightness(.5); } .nc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; } .nc-top .nc-kind { flex: 1; min-width: 0; } .nc-card .nc-flip { position: static; flex-shrink: 0; padding: 4px 0 4px 8px; border: 0; background: none; box-shadow: none; color: #a3155a; font-size: 9.5px; opacity: .85; } .nc-card .nc-flip:hover { transform: none; background: none; opacity: 1; } .nc-card .nc-flip svg { transition: transform .5s var(--ease); } .nc-card .nc-flip:hover svg { transform: rotate(180deg); } .nc-media img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; } .nc-media .nc-mono { position: relative; } .nc-kind { letter-spacing: .2em; } /* 3D depth: a solid rose edge under each card, a deep shadow, and light that follows the cursor */ .nc-card .face { box-shadow: inset 0 1px 0 #fff, 0 1px 0 #f3dbe2, 0 2px 0 #eccbd6, 0 3px 0 #e5bccb, 0 4px 0 #ddadc0, 0 5px 0 #d49db4, 0 6px 0 #c98ba6, 0 10px 14px -4px rgba(90, 16, 53, .25), 0 30px 50px -22px rgba(90, 16, 53, .5); transition: box-shadow .5s var(--ease), border-color .4s; } .nc-card:hover .face { box-shadow: inset 0 1px 0 #fff, 0 1px 0 #f3dbe2, 0 2px 0 #eccbd6, 0 3px 0 #e5bccb, 0 4px 0 #ddadc0, 0 5px 0 #d49db4, 0 6px 0 #c98ba6, 0 7px 0 #bd7b9a, 0 16px 22px -6px rgba(90, 16, 53, .28), 0 46px 70px -24px rgba(90, 16, 53, .55); } .section-berry .nc-card .face { box-shadow: inset 0 1px 0 #fff, 0 1px 0 #f0d3dc, 0 2px 0 #e2b6c6, 0 3px 0 #d39ab1, 0 4px 0 #c17e9b, 0 5px 0 #ab6486, 0 6px 0 #924c70, 0 12px 18px -4px rgba(0, 0, 0, .35), 0 36px 60px -22px rgba(0, 0, 0, .65); } .nc-card { margin-bottom: 6px; } .nc-glare { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 48%); transition: opacity .4s; } .nc-card:hover .nc-glare { opacity: 1; } .nc-card .face.front { position: relative; } .nc-glare { mix-blend-mode: normal; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 42%); } .nc-card .nc-flip { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(214, 36, 110, .3); background: #fff; box-shadow: 0 3px 0 #ecc7d4, 0 6px 12px -6px rgba(168, 15, 80, .45); opacity: 1; } .nc-card .nc-flip:hover { background: #fff; border-color: rgba(214, 36, 110, .6); transform: translateY(-1px); } .nc-kind { letter-spacing: .18em; } /* Heading word spacing: keep the swash padding but cancel its extra gap */ .section-head h2 .script.foil-text { margin-left: -.8em; } .signup h2 .script.foil-text { margin-left: -.8em; } .hero h1 .script .cap { margin-left: -.16em; } /* No dead space: sections hug their products */ .section[hidden], a[hidden] { display: none !important; } .up-next { display: none !important; } .section { padding: 64px 0; } .section-head { margin-bottom: 32px; gap: 10px; } .section-featured { padding: 56px 0 52px; } .section-featured .section-head { margin-bottom: 28px; } .section-note { margin-top: 18px; } @media (max-width: 700px) { .section { padding: 46px 0; } .section-featured { padding: 42px 0 38px; } .section-head { margin-bottom: 24px; } } /* Neemah Pixels: Coming Soon banner (shows only while the section has no products) */ .section.is-soon { padding: 56px 0 60px; } .section.is-soon .section-head, .section.is-soon .nc-grid, .section.is-soon .numeral-bg { display: none; } .soon-banner[hidden] { display: none !important; } .soon-banner { position: relative; max-width: 760px; margin: 0 auto; padding: 40px 32px 38px; text-align: center; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, rgba(255,250,246,.78), rgba(255,236,242,.55)); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #f3c9d6, 0 4px 0 #ebb5c6, 0 6px 0 #e3a5b9, 0 30px 60px -24px rgba(122, 20, 66, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .soon-banner::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: soonSheen 6s ease-in-out infinite; pointer-events: none; } @keyframes soonSheen { 0%, 55% { left: -60%; } 100% { left: 130%; } } .soon-banner .eyebrow { margin: 0 0 6px; } .soon-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; color: var(--ink, #2B1B24); } .soon-title .script { font-family: var(--script); font-size: 1.15em; margin-left: -.12em; } .soon-tag { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0 10px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .42em; text-transform: uppercase; color: #9E1452; padding-left: .42em; } .soon-line { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, #C9839A, transparent); } .soon-sub { margin: 0 auto 22px; max-width: 460px; color: #5B4048; line-height: 1.7; font-size: 16px; } .soon-orb { position: absolute; border-radius: 50%; pointer-events: none; animation: orbDrift 9s ease-in-out infinite; } .soon-orb.a { width: 26px; height: 26px; top: 22px; right: 46px; background: radial-gradient(circle at 32% 30%, #fff, #F6C2D4 45%, #D8628F); } .soon-orb.b { width: 16px; height: 16px; bottom: 30px; left: 52px; background: radial-gradient(circle at 32% 30%, #fff, #F2D2B8 45%, #B9825F); animation-delay: -4s; } @media (max-width: 700px) { .section.is-soon { padding: 40px 0 44px; } .soon-banner { padding: 32px 20px; } .soon-tag { letter-spacing: .3em; gap: 10px; font-size: 13px; } .soon-line { width: 28px; } } @media (prefers-reduced-motion: reduce) { .soon-banner::after, .soon-orb { animation: none; } } /* Logo centered, cart on the far right (section links removed from the header) */ .nav-split { width: 100%; box-sizing: border-box; } .soon-title .script.foil-text { margin-left: -.8em; } @media (max-width: 700px) { .soon-orb { display: none; } } /* ===== Polish pass ===== */ /* Jump links land with the heading clear of the sticky bar */ section[id] { scroll-margin-top: 72px; } /* Crisper type rendering and nicer line breaks */ body { text-rendering: optimizeLegibility; } h2, h3, .soon-title { text-wrap: balance; } p.lead, .hero-sub, .soon-sub, .nc-details { text-wrap: pretty; } /* Cards: steadier hover, press feedback, no layout shift while images load */ .nc-card .nc-media img { background: transparent; } .nc-card .btn { transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .nc-card .btn:active, .hero .btn:active, .soon-btn:active { transform: translateY(2px) scale(.985); } .nc-flip { transition: transform .45s var(--ease), background .3s; } .nc-flip:hover { transform: rotate(180deg); } /* Clear keyboard focus on every surface, including the berry section */ .section-berry :focus-visible, .section-dark :focus-visible, .announce :focus-visible { outline-color: #FFD0E1; } @media (max-width: 700px) { /* Announcement fits on two tidy lines instead of three */ .announce a { font-size: 10.5px; letter-spacing: .16em; padding: 9px 14px; line-height: 1.5; } /* Section labels stay on one line */ .section-head .eyebrow, .soon-banner .eyebrow { font-size: 10.5px; letter-spacing: .26em; } /* The giant background numerals no longer collide with headings */ .numeral-bg { font-size: 150px; top: 8px; right: -6px; opacity: .55; } .section-head p.lead { font-size: 16px; line-height: 1.7; } } @media (hover: none) { .nc-flip:hover { transform: none; } .nc-glare { display: none; } } /* ===== Richer color and motion ===== */ .theme-blush { --foil-rose: linear-gradient(110deg, #8E0A44 0%, #C2185B 16%, #F0428A 30%, #FF9CC6 42%, #E8A98C 50%, #F0428A 60%, #B3125A 76%, #D63A7A 90%, #8E0A44 100%); } .foil-text { animation-duration: 6s; } /* Hero: a slow, living wash of rose and fuchsia light */ .theme-blush .hero { background: radial-gradient(ellipse 55% 45% at 18% 22%, rgba(255, 126, 179, .30), transparent 62%), radial-gradient(ellipse 50% 50% at 86% 70%, rgba(214, 36, 110, .16), transparent 64%), radial-gradient(ellipse 40% 36% at 70% 12%, rgba(244, 200, 170, .38), transparent 66%), linear-gradient(165deg, #FEF4F3 0%, #F9DFE4 52%, #F2CCD5 100%); background-size: 160% 160%, 170% 170%, 150% 150%, 100% 100%; animation: heroWash 22s ease-in-out infinite alternate; } @keyframes heroWash { 0% { background-position: 0% 0%, 100% 100%, 60% 0%, 0 0; } 100% { background-position: 40% 30%, 55% 60%, 20% 40%, 0 0; } } /* Aurora glows drifting behind Featured and Digitals */ .section-featured::before, .theme-blush .section-velvet:not(.section-satin)::after { content: ''; position: absolute; inset: -20% -10%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 34% 38% at 16% 30%, rgba(255, 110, 170, .22), transparent 70%), radial-gradient(ellipse 30% 34% at 84% 64%, rgba(214, 36, 110, .14), transparent 70%), radial-gradient(ellipse 28% 30% at 60% 10%, rgba(240, 190, 160, .26), transparent 70%); animation: aurora 18s ease-in-out infinite alternate; } .theme-blush .section-velvet:not(.section-satin)::after { animation-delay: -7s; animation-duration: 24s; } .section-velvet > .wrap { position: relative; z-index: 1; } @keyframes aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 4%, 0) scale(1.02); } } /* Berry section: deeper jewel tone with a slow moving glow */ .section-berry { background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(255, 110, 175, .30), transparent 62%), radial-gradient(ellipse 55% 60% at 100% 100%, rgba(255, 150, 120, .14), transparent 62%), radial-gradient(ellipse 40% 40% at 70% 30%, rgba(214, 36, 110, .22), transparent 66%), linear-gradient(160deg, #8A1450 0%, #5E0C38 52%, #36061F 100%) !important; background-size: 150% 150%, 150% 150%, 170% 170%, 100% 100% !important; animation: berryGlow 20s ease-in-out infinite alternate; } @keyframes berryGlow { 0% { background-position: 0% 0%, 100% 100%, 80% 20%, 0 0; } 100% { background-position: 35% 20%, 60% 70%, 20% 60%, 0 0; } } /* Cards: richer glow and color on hover */ .nc-card .nc-media img { transition: transform .9s var(--ease), filter .6s var(--ease); } .nc-card:hover .nc-media img { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .42)) saturate(1.12) contrast(1.03); } .nc-ambient { transition: transform 1.4s var(--ease), filter .8s; } .nc-card:hover .nc-ambient { transform: scale(1.18); filter: blur(28px) saturate(1.6) brightness(.6); } /* Flourish under each heading catches the light */ .section-head .flourish { animation: flourishGlow 5s ease-in-out infinite; } @keyframes flourishGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(214, 36, 110, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(214, 36, 110, .45)); } } /* Fuchsia buttons breathe softly */ .theme-blush .hero .btn-line { animation: btnBreath 4.5s ease-in-out infinite; } @keyframes btnBreath { 0%, 100% { filter: none; } 50% { filter: brightness(1.06) saturate(1.1); } } @media (prefers-reduced-motion: reduce) { .theme-blush .hero, .section-berry, .section-featured::before, .theme-blush .section-velvet:not(.section-satin)::after, .section-head .flourish, .theme-blush .hero .btn-line { animation: none; } } /* Hero jewel: the large glass ball becomes a smaller iridescent pearl in the brand colors */ .theme-blush .orb.glass > i { position: relative; overflow: hidden; backdrop-filter: none; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 11%, rgba(255,255,255,0) 30%), radial-gradient(circle at 74% 82%, rgba(110, 12, 60, .75) 0%, rgba(110, 12, 60, 0) 52%), radial-gradient(circle at 36% 34%, #FFD3E3 0%, #F86AA6 34%, #D2246F 62%, #9A0F4E 100%); box-shadow: 0 18px 34px rgba(150, 30, 85, .30), 0 0 34px rgba(240, 66, 138, .22), inset -8px -12px 22px rgba(90, 10, 48, .28), inset 6px 8px 16px rgba(255,255,255,.3); } .theme-blush .orb.glass > i::after { content: ''; position: absolute; inset: -25%; border-radius: 50%; filter: blur(9px); background: radial-gradient(circle at 30% 68%, rgba(247, 205, 170, .85) 0%, rgba(247, 205, 170, 0) 30%), radial-gradient(circle at 72% 34%, rgba(255, 170, 205, .8) 0%, rgba(255, 170, 205, 0) 28%), radial-gradient(circle at 60% 74%, rgba(190, 120, 235, .35) 0%, rgba(190, 120, 235, 0) 26%); animation: jewelTurn 16s linear infinite; } @keyframes jewelTurn { to { transform: rotate(360deg); } } @media (max-width: 700px) { .orb.glass { width: 74px !important; height: 74px !important; right: 7% !important; bottom: 5% !important; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .theme-blush .orb.glass > i::after { animation: none; } } /* Foil shimmer loops seamlessly: one full pattern width per cycle, so there is no jump at the restart */ .foil-text { background-size: 220% auto !important; background-repeat: repeat-x; animation-name: foilLoop; animation-timing-function: linear; } @keyframes foilLoop { from { background-position: 0% center; } to { background-position: 183.3333% center; } } /* A few small jewel pearls carried through every section (hero stays the showpiece) */ .sec-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .sec-orbs i { position: absolute; display: block; border-radius: 50%; animation: orbDrift 11s ease-in-out infinite; box-shadow: 0 10px 18px rgba(120, 40, 70, .22), inset -3px -5px 9px rgba(0,0,0,.18); } .sec-orbs i.g { background: radial-gradient(circle at 32% 28%, #FFF7E3 0%, #F0D9A6 14%, #CDA868 38%, #8C6B3A 72%, #4A3518 100%); } .sec-orbs i.t { background: radial-gradient(circle at 32% 28%, #E9FDFF 0%, #8FE6EF 16%, #22B9C8 42%, #0B7A88 76%, #04363D 100%); } .sec-orbs i.c { background: radial-gradient(circle at 32% 28%, #FFF7EE 0%, #F4DCC6 18%, #D9A891 45%, #A56E55 80%, #6A4030 100%); } .sec-orbs i.p { background: radial-gradient(circle at 32% 28%, #FFE3EF 0%, #FF8DBC 16%, #E23A82 42%, #A3104D 76%, #4E0624 100%); } .sec-orbs i.b { background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #FFE1EC 22%, #F6B6CC 55%, #D98AA6 100%); } .sec-orbs i:nth-child(1) { width: 26px; height: 26px; left: 4.5%; top: 16%; } .sec-orbs i:nth-child(2) { width: 16px; height: 16px; right: 5.5%; top: 44%; animation-delay: -4s; animation-duration: 13s; } .sec-orbs i:nth-child(3) { width: 20px; height: 20px; left: 7.5%; bottom: 11%; animation-delay: -7s; animation-duration: 15s; } .sec-orbs.alt i:nth-child(1) { left: auto; right: 4.5%; top: 14%; } .sec-orbs.alt i:nth-child(2) { right: auto; left: 5.5%; top: 48%; } .sec-orbs.alt i:nth-child(3) { left: auto; right: 7.5%; bottom: 10%; } .section-berry .sec-orbs i { box-shadow: 0 10px 20px rgba(20, 0, 10, .45), inset -3px -5px 9px rgba(0,0,0,.2); } .section.is-soon .sec-orbs i:nth-child(3) { display: none; } .section.is-soon .soon-orb { display: none; } @media (max-width: 900px) { .sec-orbs i:nth-child(1) { width: 13px; height: 13px; top: 16px; left: 7%; right: auto; } .sec-orbs.alt i:nth-child(1) { left: auto; right: 7%; top: 16px; } .sec-orbs i:nth-child(2) { display: none; } .sec-orbs i:nth-child(3) { width: 11px; height: 11px; bottom: 14px; left: auto; right: 8%; } .sec-orbs.alt i:nth-child(3) { right: auto; left: 8%; bottom: 14px; } .section-berry .sec-orbs i:nth-child(1), .section-satin .sec-orbs i:nth-child(1) { top: 70px; } } @media (prefers-reduced-motion: reduce) { .sec-orbs i { animation: none; } }