/* ============================================================ Haifa Larabi — Faceless UGC Portfolio Art direction: "elevated girly" — luxury beauty campaign, not a Canva template. Blush + pearl + warm gold, romantic serif display, silk gradients, film grain, slow motion. Everything re-skins from the :root block below. ============================================================ */ :root{ /* --- palette --- */ --pearl: #FDF8F6; --cream: #F9EFE9; --blush: #F5D5D8; --blush-deep: #EDBFC5; --rose: #E8A0A8; --rose-deep: #9C5260; /* small text — 5.26 on pearl, 4.90 on cream */ --plum: #7A4A55; /* headings — 6.78 on pearl */ --gold: #C9A961; /* DECORATION ONLY — 2.14 on pearl, fails as text */ --gold-ink: #7F631F; /* the text-safe gold — 5.38 on pearl, 5.00 on cream */ --gold-soft: #E3D2A8; /* decoration only */ --ink: #3A2E30; /* body copy — 12.36 on pearl */ --ink-soft: #6B585B; /* secondary copy — 6.28 on pearl, 5.85 on cream */ --noir: #241B1D; /* --- type --- */ --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --script: 'Italiana', 'Cormorant Garamond', serif; --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; /* --- rhythm --- */ --gut: clamp(1.25rem, 5vw, 3rem); --section-y: clamp(5rem, 13vw, 11rem); --maxw: 1180px; /* --- motion --- */ --ease: cubic-bezier(.22,.61,.36,1); --slow: .9s; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--pearl); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:clamp(1rem,.95rem + .25vw,1.0625rem); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,video{ display:block; max-width:100%; } ul,ol{ margin:0; padding:0; list-style:none; } h1,h2,h3{ margin:0; font-weight:400; } p{ margin:0; } a{ color:inherit; } ::selection{ background:var(--blush); color:var(--plum); } .skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--plum); color:var(--pearl); padding:.75rem 1.25rem; font-size:.85rem; letter-spacing:.08em; } .skip-link:focus{ left:0; } :focus-visible{ outline:2px solid var(--rose-deep); outline-offset:3px; border-radius:2px; } /* ============================================================ DECORATIVE OVERLAYS Grain is what stops CSS gradients looking flat and cheap. ============================================================ */ .grain{ position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .sparkle{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.75; } /* soft custom cursor — desktop pointers only */ .cursor{ position:fixed; top:0; left:0; z-index:950; pointer-events:none; mix-blend-mode:multiply; opacity:0; transition:opacity .3s; } .cursor span{ display:block; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:radial-gradient(circle,var(--blush) 0%,rgba(245,213,216,0) 70%); transition:transform .25s var(--ease); } .cursor.is-active span{ transform:scale(2.1); } @media (hover:hover) and (pointer:fine){ .cursor{ opacity:1; } } /* ============================================================ REVEAL — base hidden state. NOTE: only applied when JS is running and motion is allowed, via the .js-motion class on . Without it everything is visible by default, so nothing can get stuck invisible. ============================================================ */ .js-motion .reveal, .js-motion .reveal-word{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); will-change:opacity, transform; } .js-motion .reveal.is-in, .js-motion .reveal-word.is-in{ opacity:1; transform:none; will-change:auto; } /* Hero name — words rise in one after the other. */ .js-motion .reveal-word{ transform:translateY(64px); transition-duration:1.4s; } .js-motion .hero__name .reveal-word:nth-child(1){ transition-delay:.15s; } .js-motion .hero__name .reveal-word:nth-child(2){ transition-delay:.30s; } /* Hero supporting copy follows the name. */ .js-motion .hero__eyebrow{ transition-delay:.05s; } .js-motion .hero__tagline{ transition-delay:.50s; } .js-motion .hero__meta{ transition-delay:.60s; } .js-motion .hero .btn{ transition-delay:.70s; } /* Grid children stagger gently across a row. */ .js-motion .niche:nth-child(2), .js-motion .pkg:nth-child(2), .js-motion .use:nth-child(2), .js-motion .step:nth-child(2){ transition-delay:.08s; } .js-motion .niche:nth-child(3), .js-motion .pkg:nth-child(3), .js-motion .use:nth-child(3), .js-motion .step:nth-child(3){ transition-delay:.16s; } .js-motion .niche:nth-child(4), .js-motion .step:nth-child(4){ transition-delay:.24s; } .js-motion .step:nth-child(5){ transition-delay:.32s; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-block; font-family:var(--sans); font-weight:400; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; cursor:pointer; padding:1.05em 2.4em; border-radius:100px; transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); } .btn:hover{ transform:translateY(-2px); } .btn--ghost{ border:1px solid rgba(253,248,246,.55); color:var(--pearl); backdrop-filter:blur(6px); background:rgba(253,248,246,.08); } .btn--ghost:hover{ background:rgba(253,248,246,.92); color:var(--plum); border-color:transparent; } .btn--line{ border:1px solid var(--blush-deep); color:var(--plum); background:transparent; } .btn--line:hover{ background:var(--plum); color:var(--pearl); border-color:var(--plum); } .btn--solid{ border:1px solid var(--plum); background:var(--plum); color:var(--pearl); } .btn--solid:hover{ background:var(--noir); border-color:var(--noir); } .btn--big{ font-family:var(--serif); font-size:clamp(1.05rem,.9rem + 1.1vw,1.7rem); letter-spacing:.02em; text-transform:none; padding:.7em 1.6em; border:1px solid var(--plum); color:var(--plum); } .btn--big:hover{ background:var(--plum); color:var(--pearl); } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:800; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem var(--gut); transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease); } .nav.is-stuck{ background:rgba(253,248,246,.86); backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(183,110,121,.13); padding-block:.8rem; } .nav__mark{ font-family:var(--script); font-size:1.2rem; letter-spacing:.09em; text-decoration:none; color:var(--pearl); transition:color .5s var(--ease); } .nav.is-stuck .nav__mark{ color:var(--plum); } .nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2.4vw,2rem); } .nav__links a{ font-size:.72rem; letter-spacing:.19em; text-transform:uppercase; text-decoration:none; color:rgba(253,248,246,.85); transition:color .5s var(--ease), opacity .3s; } .nav.is-stuck .nav__links a{ color:var(--ink-soft); } .nav__links a:hover{ opacity:.6; } .nav__cta{ padding:.55em 1.2em; border-radius:100px; border:1px solid rgba(253,248,246,.45); transition:border-color .5s var(--ease), background .4s, color .4s; } .nav.is-stuck .nav__cta{ border-color:var(--blush-deep); } .nav.is-stuck .nav__cta:hover{ background:var(--plum); color:var(--pearl)!important; opacity:1; } @media (max-width:560px){ .nav__links a:not(.nav__cta){ display:none; } } /* ============================================================ 1. HERO ============================================================ */ .hero{ position:relative; min-height:100svh; display:grid; place-items:center; padding:7rem var(--gut) 5rem; overflow:hidden; isolation:isolate; } /* Overhangs the hero so the parallax drift never exposes an edge. */ .hero__media{ position:absolute; inset:-15% 0; z-index:-2; will-change:transform; } /* The source is 9:16. In a landscape viewport `cover` crops to a narrow horizontal band, so bias the focal point upward — the default centre lands on the pavement and the model's feet. */ .hero__video{ width:100%; height:100%; object-fit:cover; object-position:center 32%; } @media (max-aspect-ratio:1/1){ .hero__video{ object-position:center center; } } /* Placeholder sits above the video and is removed by JS once a real file loads. Silk gradient so the layout reads correctly before any asset exists. */ .hero__placeholder{ position:absolute; inset:0; display:grid; place-items:center; background: radial-gradient(120% 90% at 20% 10%, #F7DDE0 0%, rgba(247,221,224,0) 55%), radial-gradient(100% 80% at 85% 25%, #E9C6CC 0%, rgba(233,198,204,0) 60%), radial-gradient(140% 120% at 50% 110%, #8E5C68 0%, rgba(142,92,104,0) 65%), linear-gradient(160deg,#D9A9B2 0%,#B87F8C 45%,#7A4A55 100%); } .hero__placeholder span{ font-family:var(--sans); font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(253,248,246,.5); } .hero.has-video .hero__placeholder{ display:none; } .hero__scrim{ position:absolute; inset:0; background: linear-gradient(to bottom, rgba(36,27,29,.45) 0%, rgba(36,27,29,.12) 35%, rgba(36,27,29,.55) 100%), radial-gradient(80% 60% at 50% 55%, rgba(183,110,121,.18) 0%, rgba(36,27,29,.35) 100%); } .hero__inner{ position:relative; z-index:1; text-align:center; color:var(--pearl); max-width:56rem; } .hero__eyebrow{ font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(253,248,246,.78); margin-bottom:clamp(1.1rem,3vw,2rem); } .hero__name{ font-family:var(--serif); font-weight:300; font-size:clamp(3.4rem,15vw,10.5rem); line-height:.94; letter-spacing:-.015em; display:flex; flex-direction:column; text-shadow:0 2px 40px rgba(36,27,29,.3); } .hero__name .reveal-word:last-child{ font-style:italic; color:var(--blush); } .hero__tagline{ font-family:var(--serif); font-size:clamp(1.15rem,.9rem + 1.5vw,2.1rem); line-height:1.35; margin-top:clamp(1.2rem,3vw,2rem); color:rgba(253,248,246,.95); } .hero__tagline em{ color:var(--blush); } .hero__meta{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(253,248,246,.7); margin-top:1.1rem; } .hero__inner .btn{ margin-top:clamp(2rem,5vw,3.2rem); } .hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.7rem; z-index:1; } .hero__scroll-line{ width:1px; height:54px; background:linear-gradient(to bottom, rgba(253,248,246,0), rgba(253,248,246,.75)); animation:scrollPulse 2.6s var(--ease) infinite; transform-origin:top; } .hero__scroll-text{ font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(253,248,246,.6); } @keyframes scrollPulse{ 0%,100%{ transform:scaleY(.35); opacity:.4; } 50% { transform:scaleY(1); opacity:1; } } /* ============================================================ SHARED SECTION FURNITURE ============================================================ */ .section-head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,6vw,4.5rem); padding:0 var(--gut); text-align:center; } .section-head__eyebrow{ font-size:.68rem; letter-spacing:.38em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:.9rem; } .section-head__title{ font-family:var(--serif); font-size:clamp(2.1rem,1.5rem + 3.2vw,4.4rem); font-weight:300; line-height:1.08; color:var(--plum); } .rule{ width:min(80px,20vw); height:1px; margin:0 auto; background:linear-gradient(to right, transparent, var(--gold), transparent); } .script{ font-family:var(--script); } /* ============================================================ 2. STATEMENT ============================================================ */ .statement{ padding:var(--section-y) var(--gut); max-width:52rem; margin:0 auto; text-align:center; display:grid; gap:clamp(1.8rem,4vw,2.8rem); } .statement__lead{ font-family:var(--serif); font-size:clamp(1.5rem,1.1rem + 2.4vw,3.1rem); line-height:1.28; font-weight:300; color:var(--plum); } .statement__lead em{ color:var(--rose-deep); } .statement__body{ color:var(--ink-soft); max-width:36rem; margin-inline:auto; } /* ============================================================ 3 & 6. EDITORIAL BREAKS ============================================================ */ /* Contained editorial compositions rather than full-bleed bands: both source assets are vertical / square, so a landscape crop would destroy the framing the shot was built around. */ .break{ padding:var(--section-y) 0; background: radial-gradient(65% 55% at 15% 20%, #FBE9EA 0%, rgba(251,233,234,0) 62%), radial-gradient(70% 60% at 88% 78%, #F7E7D8 0%, rgba(247,231,216,0) 60%), var(--pearl); } .break--alt{ background: radial-gradient(60% 55% at 85% 18%, #F6E3E6 0%, rgba(246,227,230,0) 62%), radial-gradient(75% 65% at 10% 80%, #F3E2CB 0%, rgba(243,226,203,0) 60%), var(--pearl); } .break__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; align-items:center; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .break--alt .break__media{ order:2; } .break__media{ position:relative; margin:0; border-radius:8px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(122,74,85,.55), 0 2px 12px rgba(122,74,85,.09); } /* thin gold hairline, drawn on top so it survives the overflow clip */ .break__media::after{ content:''; position:absolute; inset:0; border:1px solid rgba(201,169,97,.4); border-radius:8px; pointer-events:none; } /* Explicit ratios so the frame reserves its space before the source loads — otherwise a preload="none" video collapses. */ .break__video, .break__img{ width:100%; height:auto; display:block; background:var(--blush); } .break__video{ aspect-ratio:1080/1280; object-fit:cover; } .break__img{ aspect-ratio:1100/1084; object-fit:cover; } .break__cap{ position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.2rem .95rem; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(253,248,246,.92); background:linear-gradient(to top, rgba(36,27,29,.62), rgba(36,27,29,0)); } .break__word{ font-size:clamp(2.4rem,7vw,4.8rem); line-height:1.05; color:var(--plum); letter-spacing:.02em; } .break__text{ margin-top:1.4rem; max-width:26rem; color:var(--ink-soft); } .break--alt .break__copy{ order:1; text-align:right; } .break--alt .break__text{ margin-left:auto; } @media (max-width:760px){ .break__inner{ grid-template-columns:1fr; } .break--alt .break__media{ order:0; } .break--alt .break__copy{ order:0; text-align:left; } .break--alt .break__text{ margin-left:0; } .break__media{ max-width:24rem; } } /* ============================================================ 4. SELECTED WORK ============================================================ */ .work{ padding:var(--section-y) 0; background: radial-gradient(70% 50% at 50% 0%, var(--cream) 0%, rgba(249,239,233,0) 70%), var(--pearl); } /* Fixed-width tracks centred as a group, rather than auto-fit 1fr columns — otherwise two cards sit in three stretched tracks and drift apart with a phantom empty column beside them. */ .work__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(0,340px)); justify-content:center; justify-items:center; } .card{ width:100%; max-width:380px; display:grid; gap:1.15rem; } .card__frame{ position:relative; aspect-ratio:9/16; border-radius:22px; overflow:hidden; cursor:pointer; border:0; padding:0; background:var(--blush); box-shadow:0 18px 50px -20px rgba(122,74,85,.4), 0 2px 10px rgba(122,74,85,.1); transition:transform .7s var(--ease), box-shadow .7s var(--ease); } .card__frame:hover{ transform:translateY(-6px); box-shadow:0 30px 70px -22px rgba(122,74,85,.5); } .card__poster{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); } .card__frame:hover .card__poster{ transform:scale(1.045); } .card__placeholder{ position:absolute; inset:0; display:grid; place-items:center; background: radial-gradient(80% 60% at 30% 15%, #FBE3E6 0%, rgba(251,227,230,0) 60%), linear-gradient(150deg,#F2D2D6 0%,#D9A6AF 55%,#A9707C 100%); } .card__placeholder span{ font-size:.65rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(253,248,246,.6); } .card__play{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(to top, rgba(36,27,29,.35) 0%, rgba(36,27,29,0) 45%); } .card__play i{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:rgba(253,248,246,.9); backdrop-filter:blur(4px); box-shadow:0 6px 24px rgba(60,35,40,.28); transition:transform .5s var(--ease), background .5s var(--ease); } .card__play i::after{ content:''; margin-left:4px; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--plum); } .card__frame:hover .card__play i{ transform:scale(1.1); background:var(--pearl); } .card__meta{ text-align:center; } .card__brand{ font-family:var(--serif); font-size:1.5rem; line-height:1.2; color:var(--plum); } .card__type{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose-deep); margin-top:.45rem; } .card__niche{ font-size:.72rem; color:var(--ink-soft); margin-top:.35rem; } .work__note{ text-align:center; margin-top:clamp(2.5rem,6vw,4rem); font-size:.85rem; color:var(--ink-soft); padding:0 var(--gut); } .work__note a{ color:var(--rose-deep); text-underline-offset:4px; } /* ============================================================ 5. NICHES ============================================================ */ .niches{ padding:var(--section-y) 0; background:linear-gradient(to bottom, var(--pearl), var(--cream)); } .niches__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; gap:clamp(1.5rem,3vw,2.2rem); grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); } .niche{ position:relative; padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.5rem,3vw,2rem); background:rgba(253,248,246,.72); border:1px solid rgba(237,191,197,.55); border-radius:4px; backdrop-filter:blur(6px); transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease); } .niche:hover{ transform:translateY(-5px); border-color:var(--gold-soft); box-shadow:0 22px 50px -26px rgba(122,74,85,.45); } .niche__num{ font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--gold-ink); letter-spacing:.1em; } .niche__title{ font-family:var(--serif); font-size:clamp(1.6rem,1.3rem + .9vw,2.15rem); font-weight:300; color:var(--plum); margin:.35rem 0 1.2rem; } .niche__title::after{ content:''; display:block; width:32px; height:1px; margin-top:.9rem; background:var(--gold-soft); } .niche__list li{ font-size:.9rem; line-height:1.95; color:var(--ink-soft); } .niche__visuals{ margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid rgba(237,191,197,.6); font-family:var(--serif); font-style:italic; font-size:.92rem; line-height:1.5; color:var(--rose-deep); } /* ============================================================ 7. PACKAGES ============================================================ */ .offer{ padding:var(--section-y) 0; background:var(--cream); } .offer__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; gap:clamp(1.5rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); align-items:start; } .pkg{ position:relative; display:flex; flex-direction:column; padding:clamp(2rem,4vw,2.8rem) clamp(1.6rem,3vw,2.2rem); background:var(--pearl); border:1px solid rgba(237,191,197,.6); border-radius:6px; transition:transform .7s var(--ease), box-shadow .7s var(--ease); } .pkg:hover{ transform:translateY(-5px); box-shadow:0 24px 55px -28px rgba(122,74,85,.45); } .pkg--featured{ border-color:var(--gold-soft); box-shadow:0 20px 55px -30px rgba(122,74,85,.5); background: radial-gradient(120% 70% at 50% 0%, #FDF1F1 0%, rgba(253,241,241,0) 60%), var(--pearl); } .pkg__flag{ position:absolute; top:-.72rem; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--plum); color:var(--pearl); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; padding:.42em 1.1em; border-radius:100px; } .pkg__name{ font-family:var(--serif); font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem); font-weight:300; color:var(--plum); } .pkg__what{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--rose-deep); margin:.5rem 0 1.5rem; padding-bottom:1.4rem; border-bottom:1px solid rgba(237,191,197,.6); } .pkg__list{ display:grid; gap:.55rem; } .pkg__list li{ position:relative; padding-left:1.35rem; font-size:.9rem; line-height:1.55; color:var(--ink-soft); } .pkg__list li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--blush-deep); } .pkg__usage{ margin:1.5rem 0 1.8rem; font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--gold-ink); } .pkg .btn{ margin-top:auto; align-self:start; } .addons{ max-width:var(--maxw); margin:clamp(2.5rem,6vw,4rem) auto 0; padding:0 var(--gut); text-align:center; } .addons__title{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:1.1rem; } .addons__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .9rem; } .addons__list li{ font-size:.82rem; color:var(--ink-soft); border:1px solid rgba(237,191,197,.75); border-radius:100px; padding:.42em 1.15em; background:rgba(253,248,246,.6); } /* ============================================================ 8. USAGE ============================================================ */ .usage{ padding:var(--section-y) 0; background:linear-gradient(to bottom, var(--cream), var(--pearl)); } .usage__grid{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; gap:clamp(1.8rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); } .use__title{ font-family:var(--serif); font-size:1.5rem; font-weight:400; color:var(--plum); margin-bottom:.9rem; } .use__title::before{ content:''; display:block; width:26px; height:1px; margin-bottom:1rem; background:var(--gold); } .use p{ color:var(--ink-soft); font-size:.94rem; } /* ============================================================ 9. PROCESS ============================================================ */ .process{ padding:var(--section-y) 0; background:var(--pearl); } .process__list{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); display:grid; gap:clamp(1.4rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); } .step{ position:relative; padding-top:1.6rem; border-top:1px solid rgba(237,191,197,.7); } .step__num{ font-family:var(--serif); font-style:italic; font-size:.85rem; color:var(--gold-ink); letter-spacing:.1em; } .step__title{ font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--plum); margin:.25rem 0 .6rem; } .step p{ font-size:.88rem; color:var(--ink-soft); line-height:1.65; } /* ============================================================ 10. CONTACT ============================================================ */ .contact{ position:relative; padding:calc(var(--section-y) * 1.15) var(--gut); text-align:center; overflow:hidden; background: radial-gradient(75% 60% at 50% 15%, #FBE6E8 0%, rgba(251,230,232,0) 65%), radial-gradient(90% 80% at 15% 90%, #F3DCC9 0%, rgba(243,220,201,0) 60%), linear-gradient(170deg,var(--cream) 0%,#F2D9DC 55%,#E8C3C8 100%); } .contact__script{ font-size:clamp(2.4rem,9vw,5.5rem); line-height:1.05; color:var(--plum); margin-bottom:1.2rem; } .contact__title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.35rem,1.1rem + 1.4vw,2.2rem); color:var(--plum); } .contact__body{ max-width:32rem; margin:1.1rem auto 0; color:var(--plum); opacity:.82; } .contact .btn--big{ margin-top:clamp(2rem,5vw,3rem); word-break:break-word; } .contact__socials{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; margin-top:clamp(2.2rem,5vw,3.2rem); } .contact__socials a{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--plum); padding-bottom:.35rem; border-bottom:1px solid rgba(122,74,85,.35); transition:border-color .4s, opacity .4s; } .contact__socials a:hover{ border-color:var(--plum); opacity:.7; } .contact__handle{ margin-top:1.6rem; font-family:var(--serif); font-style:italic; font-size:clamp(1rem,.95rem + .4vw,1.25rem); } .contact__handle a{ color:var(--plum); text-decoration:none; border-bottom:1px solid rgba(122,74,85,.3); padding-bottom:.15rem; transition:border-color .4s, opacity .4s; } .contact__handle a:hover{ border-color:var(--plum); opacity:.75; } .contact__delivery{ margin-top:clamp(2rem,4.5vw,2.6rem); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--plum); opacity:.6; } /* ============================================================ FOOTER ============================================================ */ .footer{ padding:clamp(2.5rem,6vw,4rem) var(--gut); text-align:center; background:var(--noir); color:var(--blush); } .footer__mark{ font-size:1.9rem; letter-spacing:.08em; } .footer__line{ margin-top:.7rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,213,216,.62); } .footer__line--handle{ margin-top:.9rem; } .footer__line--handle a{ color:var(--blush); text-decoration:none; border-bottom:1px solid rgba(245,213,216,.35); padding-bottom:.2rem; transition:border-color .4s; } .footer__line--handle a:hover{ border-color:var(--blush); } /* ============================================================ LIGHTBOX ============================================================ */ /* An author `display` beats the UA's [hidden]{display:none}, so without this rule the closed lightbox stays laid out over the whole page at opacity 0 and silently eats every click on the site. */ .lightbox[hidden]{ display:none; } .lightbox{ position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background:rgba(36,27,29,.9); backdrop-filter:blur(16px); opacity:0; transition:opacity .45s var(--ease); } .lightbox.is-open{ opacity:1; } .lightbox__stage{ width:min(430px,100%); aspect-ratio:9/16; max-height:88svh; border-radius:18px; overflow:hidden; background:#000; box-shadow:0 30px 90px -30px rgba(0,0,0,.8); } .lightbox__stage video{ width:100%; height:100%; object-fit:contain; background:#000; } .lightbox__close{ position:absolute; top:1rem; right:1.2rem; width:44px; height:44px; display:grid; place-items:center; font-size:1.9rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--pearl); opacity:.75; transition:opacity .3s, transform .3s; } .lightbox__close:hover{ opacity:1; transform:rotate(90deg); } /* ============================================================ REDUCED MOTION — full static fallback ============================================================ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } .sparkle,.cursor{ display:none; } .js-motion .reveal, .js-motion .reveal-word{ opacity:1!important; transform:none!important; } .hero__media{ transform:none!important; } }