style.css

:root{--ink:#171316;--muted:#6e686c;--cream:#faf8f5;--purple:#4c1f5b;--line:#e7e1e4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,sans-serif;line-height:1.6}img{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.5rem 1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.announcement{background:#171316;color:#fff;text-align:center;font-size:.78rem;padding:.35rem 1rem}.navbar{min-height:76px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--cream);position:relative;z-index:5}.brand img{width:88px;max-height:60px;object-fit:contain}.navbar nav{display:flex;gap:clamp(.8rem,2vw,1.8rem);align-items:center}.navbar nav a,footer nav a{text-decoration:none;font-size:.9rem}.navbar nav a{padding:.4rem 0;border-bottom:2px solid transparent}.navbar nav a:hover,.navbar nav a.active{color:var(--purple);border-color:var(--purple)}.icons{display:flex;align-items:center;gap:.35rem}.icon-button,.menu-toggle{border:0;background:transparent;cursor:pointer;padding:.45rem;border-radius:50%}.icon-button:hover,.icon-button:focus-visible{background:#eee7ef}.icon-button img{width:22px;height:22px;object-fit:contain}.cart-button{position:relative}.cart-count{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--purple);color:#fff;font-size:.65rem;line-height:16px}.menu-toggle{display:none;width:42px}.menu-toggle span{display:block;width:23px;height:2px;margin:5px auto;background:var(--ink)}.search-panel{position:absolute;right:5%;top:calc(100% + .5rem);display:flex;gap:.5rem;padding:.7rem;background:#fff;box-shadow:0 8px 25px #0002}.search-panel input{min-width:220px;padding:.55rem .7rem;border:1px solid var(--line)}.search-panel button{background:var(--purple);color:#fff;border:0;padding:.55rem .9rem;cursor:pointer}.page-hero{min-height:260px;display:grid;place-items:center;background:linear-gradient(#4c1f5bcc,#4c1f5bcc),url('images/purplebackground.png') center/cover;color:#fff}.page-hero h1{font:400 clamp(2.4rem,5vw,4.4rem) Georgia,serif;margin:0}.section{max-width:1240px;margin:0 auto;padding:clamp(4rem,8vw,7rem) 5%}.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,8vw,8rem);align-items:center}.eyebrow{margin:0 0:.65rem;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--purple);font-weight:700}.intro h2,.services h2,.founder h2{font:400 clamp(2rem,3.5vw,3.35rem)/1.18 Georgia,serif;margin:0 0:1.25rem}.intro-copy>p:last-child,.founder-copy>p:last-child{color:var(--muted);font-size:1.05rem}.intro-images{position:relative;padding:0 0 4.5rem 4.5rem}.portrait{width:min(100%,440px);aspect-ratio:1/1.05;object-fit:cover;border-radius:4px}.detail-image{position:absolute;width:48%;left:0;bottom:0;border:5px solid #fff;border-radius:4px;box-shadow:0 12px 30px #0002}.beauty-gallery{min-height:480px;position:relative;display:grid;place-items:center;overflow:hidden;padding:3rem 5%}.beauty-gallery h2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;margin:0;color:transparent;-webkit-text-stroke:1px #c9c0c6;font:900 clamp(4.3rem,13vw,12rem)/1 Arial,sans-serif;letter-spacing:-.06em}.gallery-images{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,6vw,5rem);z-index:1}.gallery-images img{object-fit:cover;box-shadow:0 10px 30px #0002}.gallery-oil,.gallery-style{width:clamp(120px,18vw,250px);height:clamp(160px,20vw,280px)}.gallery-oil{transform:rotate(-8deg)}.gallery-model{width:clamp(150px,20vw,270px);height:clamp(240px,28vw,380px);border-radius:45%/7%}.gallery-style{transform:rotate(7deg)}.video-section{padding-top:0}.video-card{position:relative;overflow:hidden;max-height:460px}.video-card>img{width:100%;height:460px;object-fit:cover}.play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;padding:0;border:0;border-radius:50%;background:#fff}.play-button img{width:80px;height:80px}.play-button:hover{transform:translate(-50%,-50%) scale(1.08)}.services{text-align:center}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}.offer{padding:1.2rem}.offer img{width:55px;height:55px;object-fit:contain;margin:0 auto 1rem}.offer h3{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}.offer p{color:var(--muted);font-size:.95rem}.founder{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;padding-bottom:7rem}.founder>img{width:100%;height:450px;object-fit:cover}.founder-copy{background:linear-gradient(#4c1f5beb,#4c1f5beb),url('images/purplebackground.png') center/cover;color:#fff;padding:clamp(2rem,5vw,5rem);margin-left:-8%}.founder-copy .eyebrow{color:#f2dcf7}.founder-copy>p:last-child{color:#fff}footer{color:#fff;background:#111}.footer-content{max-width:1400px;margin:auto;padding:3.5rem 5%;display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:3rem}.footer-content h2{margin:0 0:.75rem;font:400 1.4rem Georgia,serif}.footer-content address{font-style:normal;margin-bottom:.7rem;color:#d6d0d4}.footer-content a{display:block;color:#d6d0d4;text-decoration:none;margin:.3rem 0}.footer-content a:hover{color:#fff}.footer-brand{text-align:center}.footer-brand>img{width:150px;margin:0 auto 1.5rem}.footer-brand div{display:flex;justify-content:center;gap:1rem}.footer-brand div a{margin:0}.footer-brand div img{width:32px}.footer-content nav{display:flex;flex-direction:column}.copyright{max-width:1400px;margin:auto;display:flex;justify-content:space-between;gap:1rem;padding:1.25rem 5%;border-top:1px solid #ffffff2b;color:#bdb5bb;font-size:.8rem}.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);background:#171316;color:#fff;padding:.7rem 1rem;border-radius:4px;transition:transform .25s ease;z-index:10}.toast.show{transform:translate(-50%,0)}
@media(max-width:820px){.navbar{gap:.5rem;min-height:68px}.menu-toggle{display:block;order:2}.icons{order:3}.navbar nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);padding:1rem 5% 1.5rem;flex-direction:column;align-items:stretch;box-shadow:0 8px 15px #0001}.navbar nav.open{display:flex}.navbar nav a{padding:.7rem 0}.search-panel{left:5%;right:5%}.search-panel input{width:100%;min-width:0}.intro,.founder{grid-template-columns:1fr}.intro-images{max-width:540px;justify-self:center}.service-grid{grid-template-columns:repeat(2,1fr)}.founder-copy{margin:-2rem 5% 0;z-index:1}.founder>img{height:380px}.footer-content{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2;grid-row:1}}
@media(max-width:520px){.announcement{font-size:.68rem}.brand img{width:70px}.icons{gap:0}.icon-button{padding:.3rem}.icon-button img{width:20px}.gallery-images{gap:.6rem}.beauty-gallery{min-height:330px}.video-card>img{height:280px}.play-button img{width:60px;height:60px}.service-grid,.footer-content{grid-template-columns:1fr}.footer-brand{grid-column:auto;grid-row:auto}.copyright{flex-direction:column;text-align:center}.founder>img{height:310px}.founder-copy{margin:-1rem 0 0}.intro-images{padding-left:2.5rem;padding-bottom:2.5rem}}