/* ============================================================ Elevora Beauty — landing page Palette sampled directly from logo.jpeg (ground #f5e1d8) ============================================================ */ :root { --bg: #f5e1d8; --surface: #fdf6f2; --ink: #6b4d49; --ink-deep: #4d3634; --rose: #b5877c; --rose-soft: #d9b3a7; --line: rgba(181, 135, 124, .28); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wrap: 1100px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-weight: 300; background: var(--bg); color: var(--ink); line-height: 1.75; /* clip, not hidden: `hidden` would force overflow-y:auto and make a nested scroll container, which breaks sticky/compositing */ overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--rose-soft); color: #fff; } :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 2px; } .wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; } /* screen-reader-only text */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink-deep); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; letter-spacing: .1em; text-decoration: none; transition: top .25s ease; } .skip-link:focus { top: 12px; } /* ---------- ambient background ---------- */ .blob { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .5; pointer-events: none; z-index: 0; } .blob.one { width: 52vw; height: 52vw; background: #f8d9cd; top: -20vw; left: -16vw; animation: drift 24s ease-in-out infinite alternate; } .blob.two { width: 44vw; height: 44vw; background: #efd2c4; bottom: -18vw; right: -14vw; animation: drift 30s ease-in-out infinite alternate-reverse; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vw) scale(1.08); } } .petal { position: fixed; top: -40px; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 30% 30%, #e9cec5, #d0a297); border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; opacity: .4; animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes fall { 0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; } 8% { opacity: .4; } 100% { transform: translateY(110vh) translateX(6vw) rotate(340deg); opacity: 0; } } /* ---------- typography ---------- */ main { position: relative; z-index: 2; } .eyebrow { display: block; font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--rose); font-weight: 400; } h1, h2 { font-family: var(--serif); font-weight: 300; color: var(--ink-deep); line-height: 1.15; } h1 { font-size: clamp(38px, 6.4vw, 74px); } h2 { font-size: clamp(30px, 4.2vw, 48px); } em { font-style: italic; color: var(--rose); } .lead { font-size: clamp(16px, 1.5vw, 18px); max-width: 52ch; } .muted { color: #8d6d68; } /* ---------- buttons ---------- */ .btn { display: inline-block; cursor: pointer; border: none; border-radius: 999px; padding: 13px 30px; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; text-decoration: none; color: #fff; background: linear-gradient(135deg, #c09a94, #a87f7a); transition: transform .25s ease, box-shadow .25s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(107, 77, 73, .55); } .btn-ghost { background: transparent; color: var(--ink-deep); border: 1px solid var(--line); box-shadow: none; } .btn-ghost:hover { background: rgba(255,255,255,.5); box-shadow: none; } /* ---------- hero ---------- */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(56px, 9vw, 100px) 0; } .hero-logo { width: min(340px, 68vw); border-radius: 26px; overflow: hidden; box-shadow: 0 34px 80px -30px rgba(107, 77, 73, .4); } .hero h1 { margin-top: clamp(28px, 4vw, 44px); } .hero .lead { margin: 24px auto 0; } /* ---------- notify form ---------- */ .notify-form { margin: 34px auto 0; display: flex; width: min(460px, 100%); background: rgba(255,255,255,.6); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 6px; transition: box-shadow .3s ease; } .notify-form:focus-within { box-shadow: 0 14px 40px -14px rgba(107,77,73,.4); } .notify-form input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 13px 20px; font-family: var(--sans); font-size: 15px; font-weight: 300; letter-spacing: .03em; color: var(--ink-deep); } .notify-form input::placeholder { color: #b59792; } .form-note { margin-top: 20px; min-height: 26px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--rose); opacity: 0; transition: opacity .5s ease; } .form-note.show { opacity: 1; } .form-note.error { color: #a9584d; } /* ---------- emblem section ---------- */ .emblem-section { padding: clamp(60px, 9vw, 120px) 0; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 68px); align-items: center; } .split-art { aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, #fbeee8, #e9cbbd); display: grid; place-items: center; } .split-art img { width: 78%; border-radius: 16px; box-shadow: 0 24px 50px -26px rgba(107,77,73,.5); } /* ---------- footer ---------- */ .site-footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 60px) 0 40px; } .footer-simple { text-align: center; } .footer-simple .mark { font-family: var(--serif); font-size: 24px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-deep); } .footer-links { margin-top: 16px; font-size: 14px; } .footer-links a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; } .footer-links a:hover { border-bottom-color: var(--rose); } .footer-links span { margin: 0 12px; color: var(--rose); } .footer-copy { margin-top: 22px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #a08079; } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,.8,.35,1), transform .9s cubic-bezier(.22,.8,.35,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- dove, born from the V ---------- */ .dove-flight { position: fixed; top: 0; left: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: transform; } .dove-bob { animation: bob 2.6s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } } .dove-svg { display: block; width: clamp(90px, 12vw, 150px); height: auto; filter: drop-shadow(0 8px 12px rgba(107,77,73,.28)); } .wing-front, .wing-back { transform-box: fill-box; } .wing-front { transform-origin: 88% 88%; animation: flap 1s ease-in-out infinite; } .wing-back { transform-origin: 92% 92%; animation: flap 1s ease-in-out .12s infinite reverse; } @keyframes flap { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-22deg); } } /* ---------- 404 ---------- */ .notfound { text-align: center; } .notfound .hero-logo { width: min(220px, 50vw); } .notfound-actions { margin-top: 34px; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blob, .petal, .dove-bob, .wing-front, .wing-back { animation: none !important; } .dove-flight { display: none; } .reveal { opacity: 1; transform: none; transition: none; } .btn:hover { transform: none; } }