/* Aura Jewels — base styles. Tailwind (CDN, see head snippet) drives layout/spacing/color; this file only carries what utility classes can't: web fonts, the JS-positioned shuffle carousel, hero video-banner cross-fade, and a couple of small responsive tweaks. */ @font-face{font-family:'Giomori';src:url('../fonts/Giomori.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Giomori';src:url('../fonts/Giomori-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} /* Body font: Jost (Google Fonts, SIL Open Font License — free for commercial use), loaded via in each page's . A refined, geometric sans that pairs cleanly with Giomori. */ :root{ --rose-gold:#c2185b; --blush:#f8e3e8; --cream:#faf6f2; --charcoal:#241a1c; --gold:#c9a35a; --ivory:#fffaf6; --gray:#8a7f78; --border:#e8dcd3; --danger:#b23b3b; } *{box-sizing:border-box} /* Safety net: several sections below use full-bleed negative margins and slight rotation (the diagonal runway, edge-to-edge waterfall, etc.) — this keeps those from ever opening a horizontal scrollbar on narrow phones without constraining any of their own layout. */ html,body{max-width:100%;overflow-x:hidden} body{font-family:'Jost',Helvetica,Arial,sans-serif;color:var(--charcoal);background:var(--cream);line-height:1.6;font-size:1.05rem;font-weight:300;letter-spacing:.1px} h1,h2,h3,h4,.font-display{font-family:'Giomori',Georgia,'Times New Roman',serif;font-weight:400} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul{list-style:none;margin:0;padding:0} input,select,textarea,button{font-family:inherit} /* ---------- Elegant type refinements (Tailwind's default utility font sizes are used as-is; this just adds a touch of polish — generous letter-spacing on small caps, relaxed leading on body copy — instead of inflating the scale) ---------- */ .font-display{letter-spacing:.3px} p{line-height:1.75} .eyebrow,[class*="uppercase"]{letter-spacing:.14em} /* ---------- Hero video banner (cross-fade + push-in slides, slow cinematic zoom, dynamic staggered copy) ---------- */ .hero-video-section{position:relative;height:88vh;min-height:560px;max-height:820px;overflow:hidden;background:#1a1214} .hero-video-slide{ position:absolute;inset:0;opacity:0;transform:scale(1.025);pointer-events:none; transition:opacity 1s cubic-bezier(.65,0,.35,1), transform 1.3s cubic-bezier(.22,1,.36,1); } .hero-video-slide.active{opacity:1;transform:scale(1);pointer-events:auto;z-index:1} .hero-video-slide video,.hero-video-slide img{ width:100%;height:100%;object-fit:cover;object-position:center 22%; transform:scale(1.05) translateX(0);transition:transform 6.5s cubic-bezier(.25,.1,.25,1); filter:saturate(1.04) contrast(1.02); } .hero-video-slide.active video,.hero-video-slide.active img{transform:scale(1.1) translateX(-1%)} /* Stronger, more even scrim so light-background footage still holds white type cleanly */ .hero-scrim{background:linear-gradient(to top, rgba(10,7,8,.72) 0%, rgba(10,7,8,.28) 42%, rgba(10,7,8,.12) 62%, rgba(10,7,8,.38) 100%)} /* Right-aligned slides also darken from the right edge, where the caption now sits */ .hero-scrim-right{background:linear-gradient(to top, rgba(10,7,8,.72) 0%, rgba(10,7,8,.28) 42%, rgba(10,7,8,.12) 62%, rgba(10,7,8,.38) 100%), linear-gradient(to left, rgba(10,7,8,.4) 0%, rgba(10,7,8,0) 38%)} .hero-caption{text-shadow:0 2px 18px rgba(0,0,0,.35)} /* Eyebrow — small growing underline accent for extra energy on entry (grows from the left by default) */ .hero-eyebrow{position:relative;padding-bottom:10px} .hero-eyebrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .9s cubic-bezier(.16,1,.3,1) .5s} .hero-video-slide.active .hero-eyebrow::after{width:38px} /* Right-aligned slides: underline grows from the right instead */ .hero-caption-right .hero-eyebrow::after{left:auto;right:0} .hero-caption > *{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .hero-video-slide.active .hero-caption > *{opacity:1;transform:translateY(0)} .hero-video-slide.active .hero-caption > *:nth-child(1){transition-delay:.22s} .hero-video-slide.active .hero-caption > *:nth-child(2){transition-delay:.32s} .hero-video-slide.active .hero-caption > *:nth-child(3){transition-delay:.85s} .hero-video-slide.active .hero-caption > *:nth-child(4){transition-delay:1s} /* Heading — word-by-word mask reveal, layered on top of the block fade above for a livelier entrance */ .hero-word{display:inline-block;overflow:hidden;vertical-align:top} .hero-word > span{display:inline-block;transform:translateY(112%);transition:transform .85s cubic-bezier(.16,1,.3,1)} .hero-video-slide.active .hero-word > span{transform:translateY(0)} .hero-video-slide.active h2 .hero-word:nth-child(1) > span{transition-delay:.36s} .hero-video-slide.active h2 .hero-word:nth-child(2) > span{transition-delay:.44s} .hero-video-slide.active h2 .hero-word:nth-child(3) > span{transition-delay:.52s} .hero-video-slide.active h2 .hero-word:nth-child(4) > span{transition-delay:.6s} .hero-video-slide.active h2 .hero-word:nth-child(5) > span{transition-delay:.68s} .hero-video-slide.active h2 .hero-word:nth-child(6) > span{transition-delay:.76s} .hero-video-slide.active h2 .hero-word:nth-child(7) > span{transition-delay:.84s} /* Dots + arrows — subtle, refined hover feedback */ .hero-video-section .carousel-arrow{transition:background-color .3s ease, transform .3s ease} .hero-video-section .carousel-arrow:hover{transform:scale(1.08)} .hero-video-section .carousel-dots button{transition:background-color .3s ease, width .3s ease} /* ---------- Shuffle carousel (pure CSS marquee — auto-scrolls right-to-left on a doubled item list, pauses on hover; product cards, no text overlay, click goes to product page) ---------- */ .shuffle-slider{position:relative;overflow:hidden;padding:8px 0} .shuffle-fade{position:absolute;top:0;bottom:0;width:120px;z-index:5;pointer-events:none} .shuffle-fade-left{left:0;background:linear-gradient(to right, var(--cream), transparent)} .shuffle-fade-right{right:0;background:linear-gradient(to left, var(--cream), transparent)} .shuffle-track{ display:flex;gap:28px;width:max-content;padding:0 24px; animation:shuffle-scroll 52s linear infinite; } .shuffle-slider:hover .shuffle-track{animation-play-state:paused} @keyframes shuffle-scroll{to{transform:translateX(-50%)}} .shuffle-item{ width:300px;height:400px;flex:none;position:relative; border-radius:24px;overflow:hidden;background:#fff; box-shadow:0 18px 42px rgba(36,26,28,.18); transition:transform .4s ease, box-shadow .4s ease; } .shuffle-item:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(36,26,28,.28)} .shuffle-item a{display:block;width:100%;height:100%;position:relative} .shuffle-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease} .shuffle-item:hover img{transform:scale(1.08)} .shuffle-item::before{ content:"";position:absolute;inset:0;padding:2px;border-radius:24px;z-index:2; background:conic-gradient(var(--gold), var(--rose-gold), var(--blush), var(--gold)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .4s ease;pointer-events:none; } .shuffle-item:hover::before{opacity:1} .shuffle-shine{ position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-150%) skewX(-20deg); transition:transform .9s ease; } .shuffle-item:hover .shuffle-shine{transform:translateX(180%) skewX(-20deg)} /* ---------- Page hero band (image + overlay behind the h1 on inner pages — Shop, About, Contact, Blog) — a compact, static cousin of the homepage parallax banners ---------- */ .page-hero{ position:relative;overflow:hidden;background-size:cover;background-position:center; padding:76px 24px;text-align:center;transition:background-image .35s ease; } .page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(18,13,14,.48) 0%, rgba(18,13,14,.62) 100%)} .page-hero-content{position:relative;z-index:1} .page-hero-content h1{color:#fff} .page-hero-content .page-hero-crumb{color:rgba(255,255,255,.78)} .page-hero-content .page-hero-crumb a{color:#fff} @media(max-width:600px){.page-hero{padding:56px 20px}} /* ---------- Shop by Category (two full-bleed hover panels, particle-text reveal on hover; images fill the full width of the row so the pair sits perfectly centered edge-to-edge) ---------- */ .cat-section{position:relative;width:100%;overflow:hidden;background:var(--charcoal)} .cat-header{ position:absolute;top:0;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center; padding:48px 24px 36px;pointer-events:none;text-align:center; background:linear-gradient(180deg, rgba(20,14,15,.78) 0%, rgba(20,14,15,.32) 60%, rgba(20,14,15,0) 100%); } .cat-header-title{font-family:'Giomori',Georgia,serif;font-weight:400;font-size:2.4rem;line-height:1.1;color:var(--ivory);margin-top:12px;letter-spacing:.3px} .cat-row{display:flex;width:100%;height:68vh;min-height:460px;max-height:640px} .cat-half{ position:relative;flex:1;overflow:hidden;cursor:pointer;display:block; } .cat-bg{ position:absolute;inset:0;z-index:1;background-size:cover;background-position:center; transform:scale(1.0);transition:transform .5s cubic-bezier(.22,.61,.36,1); will-change:transform; } .cat-half:hover .cat-bg{transform:scale(1.06)} .cat-divider{width:1px;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);z-index:4} .cat-gradient{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(0deg, rgba(20,14,15,.65) 0%, rgba(20,14,15,.05) 45%, rgba(20,14,15,.12) 100%); } .cat-dark-overlay{ position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(10,7,6,.5); opacity:0;transition:opacity .3s ease; } .cat-half:hover .cat-dark-overlay{opacity:1} .cat-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:3} .cat-underline-wrap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;padding:0 24px 48px;pointer-events:none} .cat-underline{ width:38px;height:1px;background:var(--gold);opacity:.85; transform:scaleX(1);transition:width .25s ease; } .cat-half:hover .cat-underline{width:56px} /* Touch devices have no persistent :hover, so the particle-text canvas reveal (which only assembles on mouseenter) never fires on phones/tablets — show a plain static label there instead so the category tiles are never left unlabeled. Desktop keeps the particle effect. */ .cat-label{display:none} @media(max-width:900px){ .cat-label{ display:flex;position:absolute;inset:0;z-index:3;align-items:center;justify-content:center; font-family:'Giomori',Georgia,serif;font-size:1.7rem;color:#fff;letter-spacing:.02em; text-shadow:0 2px 14px rgba(0,0,0,.45);pointer-events:none; } .cat-row{height:auto;max-height:none;flex-direction:column} .cat-half{height:52vh;min-height:340px} .cat-divider{width:100%;height:1px} .cat-header-title{font-size:1.9rem} } /* ---------- Parallax layers ---------- */ [data-parallax]{will-change:transform} .parallax-frame{position:relative;overflow:hidden} .parallax-frame img,.parallax-frame [data-parallax]{position:absolute;inset:-15% 0;width:100%;height:130%;object-fit:cover} /* ---------- Main nav — display serif to match the logo's handwritten mark ---------- */ .main-nav a{font-family:'Giomori',Georgia,'Times New Roman',serif;font-size:1.1rem;font-weight:400;letter-spacing:.01em} /* ---------- Mobile nav toggle ---------- */ .main-nav.nav-open{display:flex!important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--ivory);padding:20px 24px;gap:16px;border-bottom:1px solid var(--border);z-index:40} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:24px;right:24px;background:var(--charcoal);color:#fff;padding:14px 22px;border-radius:8px;font-size:.88rem;opacity:0;transform:translateY(10px);transition:all .25s;z-index:200} .toast.show{opacity:1;transform:translateY(0)} @media(max-width:900px){ .shuffle-item{width:220px;height:290px} .shuffle-track{gap:20px} .shuffle-fade{width:70px} .hero-video-section{height:74vh} } @media(max-width:600px){ .shuffle-item{width:180px;height:238px} .shuffle-track{gap:14px} .shuffle-fade{width:44px} .hero-video-section{height:62vh;min-height:460px} } /* ---------- Orbit Bestsellers — "Trending Now / Bestselling Jewellery" section, ported from an "Orbit Collection" design reference: products float around a central ring instead of sitting in a grid, drifting toward the cursor on hover. Cherry-pink field, white type. ---------- */ .orbit-section{ position:relative;overflow:hidden;padding:72px 0 88px; background:linear-gradient(150deg,#8e1044 0%,#a3134f 55%,#c2185b 100%); color:#fff; } .orbit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap} .orbit-eyebrow{color:#f4c9d8} .orbit-heading{font-size:clamp(2.1rem,4.2vw,3rem);line-height:1;color:#fff} .orbit-note{max-width:300px;font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.72)} .orbit-stage{ position:relative;height:560px;border-radius:18px;overflow:hidden; border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18); } .orbit-word{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:'Giomori',Georgia,serif;font-size:clamp(100px,20vw,300px); color:rgba(255,255,255,.055);white-space:nowrap;transition:transform .3s ease-out;pointer-events:none; } .orbit-ring{ width:480px;height:480px;border:1px solid rgba(255,255,255,.28);border-radius:50%; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none; } .orbit-card{ position:absolute;width:210px;cursor:pointer;display:block;color:#fff; transition:transform .5s cubic-bezier(.22,1,.36,1),filter .5s; } .orbit-card:hover{z-index:8!important;transform:scale(1.08) rotate(0deg)!important} .orbit-card .pic{height:240px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(35,5,18,.35)} .orbit-card .pic img{width:100%;height:100%;object-fit:cover} .orbit-card .meta{display:flex;justify-content:space-between;padding-top:10px;font-size:.78rem} .orbit-card .meta span:first-child{color:#fff;font-weight:500} .orbit-card .meta span:last-child{color:#f4c04f;font-weight:600} .orbit-cards .o1{left:6%;top:6%;transform:rotate(-8deg)} .orbit-cards .o2{left:37%;top:20%;transform:rotate(5deg);z-index:3} .orbit-cards .o3{right:6%;top:3%;transform:rotate(9deg)} .orbit-cards .o4{right:20%;bottom:2%;transform:rotate(-6deg);z-index:4} .orbit-floating-badge{ position:absolute;left:10%;bottom:7%;width:112px;height:112px;border-radius:50%; background:#fff;color:#8e1044;display:grid;place-items:center;text-align:center; font-family:'Giomori',Georgia,serif;font-size:17px;line-height:1.2; animation:orbit-float 3s ease-in-out infinite;pointer-events:none; } .orbit-floating-badge small{font-family:'Jost',sans-serif;font-size:.62rem;color:#a3134f;letter-spacing:.04em} @keyframes orbit-float{50%{transform:translateY(-12px)}} @media(max-width:900px){ .orbit-stage{height:640px} .orbit-ring{width:340px;height:340px} .orbit-card{width:165px} .orbit-card .pic{height:190px} } @media(max-width:600px){ .orbit-head{display:block} .orbit-note{margin-top:18px;max-width:none} .orbit-stage{height:760px} .orbit-ring{width:280px;height:280px} .orbit-card{width:145px} .orbit-card .pic{height:165px} .orbit-cards .o1{left:2%} .orbit-cards .o2{left:38%;top:28%} .orbit-cards .o3{right:2%;top:4%} .orbit-cards .o4{right:6%;bottom:2%} .orbit-floating-badge{width:92px;height:92px;font-size:14px} } /* ---------- Fan Favorites — "Infinite Waterfall": three columns of product cards drifting vertically at different speeds/directions, looping seamlessly. Ported from a supplied design reference. Full-bleed edge-to-edge (not boxed to the 1240px container), sharp-cornered cards, thin cream hairline between columns. Pauses on hover; each card links to its product page. */ .waterfall-wrap{ height:900px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px; width:100%; } .waterfall-col{display:flex;flex-direction:column;gap:6px;will-change:transform} .waterfall-card{ position:relative;flex:none;width:100%;height:360px;overflow:hidden;display:block; } .waterfall-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .waterfall-card:hover img{transform:scale(1.06)} .waterfall-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(15,4,8,.62))} .waterfall-info{position:absolute;z-index:2;left:24px;right:24px;bottom:20px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end} .waterfall-info small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8} .waterfall-info b{display:block;font-family:'Giomori',Georgia,serif;font-size:1.6rem;font-weight:400;margin-top:5px} .waterfall-go{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:.85rem;flex:none} @media(max-width:900px){ .waterfall-wrap{height:640px;grid-template-columns:1fr 1fr 1fr;gap:4px} .waterfall-card{height:260px} .waterfall-info{left:16px;right:16px;bottom:14px} .waterfall-info b{font-size:1.15rem} } @media(max-width:600px){ .waterfall-wrap{grid-template-columns:1fr 1fr} .waterfall-wrap .waterfall-col:nth-child(3){display:none} } /* ---------- New In Earrings — "Diagonal Runway": a continuously scrolling, slightly rotated filmstrip with alternating vertical offsets — the collection moves like a runway rather than sitting in a static grid. Ported from a supplied design reference. ---------- */ .runway-wrap{position:relative;height:520px;overflow:hidden} .runway{position:absolute;inset:0;margin:0 -8vw;transform:rotate(-4deg);overflow:hidden} .runway-track{display:flex;gap:20px;width:max-content;position:absolute;top:58px;left:0;will-change:transform} .runway-card{ position:relative;width:270px;height:370px;border-radius:22px;overflow:hidden;flex:none; box-shadow:0 26px 60px rgba(70,20,35,.18);transition:transform .5s ease;display:block; } .runway-card:nth-child(even){transform:translateY(48px)} .runway-card:hover{transform:translateY(-10px) rotate(4deg)!important;z-index:4} .runway-card img{width:100%;height:100%;object-fit:cover} .runway-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(20,5,10,.68))} .runway-card .copy{position:absolute;z-index:2;left:18px;bottom:16px;color:#fff} .runway-card .copy .tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8} .runway-card .copy b{display:block;font-family:'Giomori',Georgia,serif;font-size:1.15rem;font-weight:400;margin-top:4px} .runway-card .copy .price{color:#fff;font-weight:600;margin-top:3px;font-size:.85rem} @media(max-width:700px){ .runway-wrap{height:400px} .runway{margin:0 -5vw;transform:rotate(-3deg)} .runway-card{width:185px;height:255px} .runway-card:nth-child(even){transform:translateY(30px)} } /* ---------- New In Pendants — "Expanding Editorial": panels sit edge-to-edge in a row; the hovered panel expands to take center stage while its neighbours compress. Ported from a supplied design reference. ---------- */ .editorial-accordion{height:500px;display:flex;gap:10px} .editorial-panel{ flex:1;min-width:0;position:relative;overflow:hidden;border-radius:20px;cursor:pointer;display:block; transition:flex .8s cubic-bezier(.22,1,.36,1); } .editorial-panel:hover{flex:2.4} .editorial-panel img{width:100%;height:100%;object-fit:cover} .editorial-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(20,5,10,.7))} .editorial-panel .copy{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;color:#fff;opacity:.78;transition:opacity .5s} .editorial-panel:hover .copy{opacity:1} .editorial-panel .copy .tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85} .editorial-panel .copy b{display:block;font-family:'Giomori',Georgia,serif;font-size:1.3rem;font-weight:400;margin-top:5px} .editorial-panel .copy .price{color:#fff;font-weight:600;margin-top:3px;font-size:.85rem} @media(max-width:700px){ /* CSS :hover has no persistent equivalent on touch, so the "expand on hover" interaction doesn't apply on phones anyway — switch to a 2-up grid instead of 4 razor-thin flex panels (which had no room to show their copy legibly). Tapping still opens the product. */ .editorial-accordion{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px} .editorial-panel{height:225px} .editorial-panel:hover{flex:1} .editorial-panel .copy{left:14px;right:14px;bottom:14px;opacity:1} .editorial-panel .copy b{font-size:1.05rem} }