/* ============================================================ MÉLANIE — Студио за красота — Main Stylesheet ============================================================ */ /* --- DESIGN TOKENS ---------------------------------------- */ :root { --cream: #f5efe6; --cream-2: #ece2d4; --charcoal: #322c26; --rose: #c79a92; --rose-deep: #b3837b; --rose-soft: rgba(199,154,146,.16); --gold: #c4a878; --muted: #776c61; --line: rgba(50,44,38,.14); --panel-1: #ece0d2; --panel-2: #e0cdb8; --panel-3: #d3b89c; --blush-1: #ecd9cb; --blush-2: #e4c9b8; --blush-3: #dcbda8; } /* --- RESET + BASE ----------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--charcoal); overflow-x: hidden; } /* Visible keyboard focus — subtle rose, on-brand. Mouse clicks don't show it (only :focus-visible), so the design stays clean for pointer users. */ :focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius: 2px; } /* --- ANIMATIONS ------------------------------------------- */ /* Elements start hidden and reveal when scrolled into view (.in-view, added by IntersectionObserver in script.js). The d1..d7 classes keep the original stagger as transition-delays. */ .anim { /* gentle fade + slight lift, fast and calm — soft decel, no overshoot */ transition: opacity .5s ease-out, transform .5s ease-out; } /* Only hide pre-reveal when JS is confirmed running (script adds .js to ). Without JS, content stays fully visible — no blank page. */ .js .anim { opacity: 0; transform: translateY(12px); } .anim.in-view { opacity: 1; transform: none; } /* subtle stagger only */ .d1 { transition-delay: .04s; } .d2 { transition-delay: .10s; } .d3 { transition-delay: .16s; } .d4 { transition-delay: .22s; } .d5 { transition-delay: .26s; } .d6 { transition-delay: .30s; } .d7 { transition-delay: .34s; } @keyframes fade { to { opacity: 1; } } /* Respect users who prefer reduced motion — show everything, no movement. `.js .anim` selector specificity (0,2,0) is matched here so it wins. */ @media (prefers-reduced-motion: reduce) { .anim, .js .anim, .anim.in-view { transition: none; opacity: 1; transform: none; } .hero-img { animation: none; opacity: 1; } /* keep color/fill feedback, drop the movement */ .btn-book:hover, .cta-primary:hover, .cta-ghost:hover, .btn-call:hover, .gallery .btn-all:hover, .cta-band .btn:hover, .float-call, .about .card:hover, .reviews .card:hover { transform: none; } .navlinks a:not(.btn-book)::after { transition: none; } } /* --- SHARED: EYEBROW LABEL -------------------------------- */ .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 20px; } .eyebrow .star { color: var(--rose); } /* ============================================================ NAVIGATION — sticky site header ============================================================ */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 5vw; position: sticky; top: 0; z-index: 30; background: transparent; transition: background .35s ease, box-shadow .35s ease, padding .35s ease; } /* On scroll past the hero: subtle solid cream + soft hairline/shadow */ .site-header.scrolled { background: var(--cream); box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(50,44,38,.05); padding-top: 20px; padding-bottom: 20px; } .brand { line-height: 1; text-decoration: none; display: inline-block; } .brand .name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; letter-spacing: .22em; color: var(--charcoal); } .brand .sub { font-size: 10px; letter-spacing: .42em; color: var(--rose-deep); margin-top: 5px; } .navlinks { display: flex; align-items: center; gap: 34px; } .navlinks a { text-decoration: none; } /* Text links (everything except the rose pill button) — rose underline that animates in on hover AND for the active (in-view) section. One language. */ .navlinks a:not(.btn-book) { position: relative; color: var(--charcoal); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: color .28s ease; } .navlinks a:not(.btn-book)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; } .navlinks a:not(.btn-book):hover, .navlinks a:not(.btn-book).active { color: var(--rose-deep); } .navlinks a:not(.btn-book):hover::after, .navlinks a:not(.btn-book).active::after { transform: scaleX(1); } /* Rose pill "Обади се" — keep white text (was being overridden to charcoal) */ .btn-book { background: var(--rose); color: #fff; border: none; padding: 13px 26px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .28s ease, transform .28s ease, box-shadow .28s ease; } .btn-book:hover { background: var(--rose-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; align-self: center; padding: 6px 0; } .burger span { width: 26px; height: 2px; background: var(--charcoal); display: block; } /* ============================================================ HERO SECTION ============================================================ */ .wrap { min-height: 100vh; display: flex; flex-direction: column; } .hero { flex: 1; display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch; } .hero-text { display: flex; flex-direction: column; justify-content: center; padding: 2vh 4vw 6vh 5vw; } .hero-text h1 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(48px,6.4vw,108px); line-height: .96; letter-spacing: -.01em; } .hero-text h1 em { font-style: italic; font-weight: 500; } .accent-line { display: flex; align-items: center; gap: 14px; margin: 32px 0 26px; } .accent-line .star { color: var(--rose); font-size: 18px; } .accent-line .ln { height: 1px; width: 120px; background: var(--line); } .lead { font-size: clamp(15px,1.25vw,18px); line-height: 1.6; color: var(--muted); max-width: 30ch; font-weight: 300; } .cta-row { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; } .cta-primary { background: var(--rose); color: #fff; border: none; padding: 18px 40px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .28s ease, transform .28s ease, box-shadow .28s ease; } .cta-primary:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } .cta-ghost { background: transparent; color: var(--rose-deep); border: 1px solid var(--rose); padding: 18px 40px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease; } .cta-ghost:hover { background: var(--rose); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } /* Hero image panel */ .hero-img { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 75% 20%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 45%), linear-gradient(140deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-3) 100%); opacity: 0; animation: fade 1.3s ease .25s forwards; /* REAL PHOTO: replace the two backgrounds above with: url('hero.jpg') center/cover no-repeat; */ } .hero-img::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: overlay; } .hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cream) 0%, rgba(245,239,230,0) 14%); } .panel-decor { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; } .panel-decor .mono { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(90px,13vw,200px); line-height: .8; color: rgba(179,131,123,.5); letter-spacing: -.02em; } .panel-decor .tag { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: rgba(119,108,97,.85); } .panel-decor .frame { position: absolute; inset: 34px; border: 1px solid rgba(196,168,120,.5); } /* ============================================================ SERVICES SECTION (#services) ============================================================ */ .services { padding: 50px 5vw 100px; max-width: 1180px; margin: 0 auto; } .sec-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(40px,5.5vw,76px); line-height: 1.0; letter-spacing: -.01em; } .sec-title em { font-style: italic; } .list { margin-top: 56px; } .item { display: grid; grid-template-columns: 54px 1fr auto; align-items: start; gap: 26px; padding: 28px 0; border-top: 1px solid var(--line); transition: padding-left .28s ease; } .item:last-child { border-bottom: 1px solid var(--line); } .item:hover { padding-left: 14px; } .services .num { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--rose); padding-top: 6px; } .item h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(24px,2.6vw,34px); line-height: 1.1; } .tags { margin-top: 10px; display: flex; gap: 18px; flex-wrap: wrap; } .tags span { font-size: 12px; letter-spacing: .06em; color: var(--muted); } .tags span::before { content: "·"; margin-right: 18px; color: var(--rose); } .tags span:first-child::before { display: none; } .price { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px,2.4vw,32px); color: var(--rose-deep); white-space: nowrap; padding-top: 2px; } .price .from { font-style: italic; font-size: .6em; color: var(--muted); margin-right: 6px; } .price .cur { font-family: 'Jost', sans-serif; font-size: .42em; color: var(--muted); margin-left: 5px; letter-spacing: .05em; } /* ============================================================ GALLERY / TRANSFORMATIONS SECTION (#transform) ============================================================ */ .gallery { padding: 50px 5vw 100px; max-width: 1240px; margin: 0 auto; } .head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; } .sec-head { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(40px,5.2vw,76px); line-height: 1.0; letter-spacing: -.01em; } .sec-head em { font-style: italic; } .head-line { display: flex; align-items: center; gap: 14px; margin-top: 16px; max-width: 340px; } .head-line::before, .head-line::after { content: ""; height: 1px; background: rgba(196,168,120,.5); flex: 1; } .head-line .s { color: var(--gold); font-size: 12px; } .gallery .intro { color: var(--muted); font-size: clamp(14px,1.1vw,16px); font-weight: 300; line-height: 1.6; max-width: 34ch; padding-bottom: 6px; } .gallery .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .gallery .card { position: relative; } .gallery .card .img { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4/5; background: radial-gradient(120% 90% at 70% 18%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 45%), linear-gradient(150deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-3) 100%); transition: transform .4s; /* REAL PHOTO: replace the two backgrounds above with: url('photo-N.jpg') center/cover no-repeat; */ } .gallery .card:hover .img { transform: scale(1.02); } .gallery .card .img::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: overlay; } .gallery .card .img .frame { position: absolute; inset: 18px; border: 1px solid rgba(196,168,120,.5); border-radius: 6px; } .gallery .card .img .mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(54px,7vw,92px); color: rgba(179,131,123,.4); } .gallery .card .num { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--rose); margin-top: 18px; } .gallery .card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(20px,2.1vw,26px); line-height: 1.15; margin-top: 4px; } .gallery .card h3 em { font-style: italic; } .gallery .card p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 8px; max-width: 34ch; } .all { display: flex; justify-content: center; margin-top: 54px; } .gallery .btn-all { display: inline-flex; align-items: center; gap: 12px; background: var(--rose); color: #fff; border: none; padding: 16px 36px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .28s ease, transform .28s ease, box-shadow .28s ease; } .gallery .btn-all:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } .gallery .btn-all svg { width: 16px; height: 16px; } /* ============================================================ ABOUT + TEAM SECTION (#about) ============================================================ */ .about { padding: 50px 5vw 100px; max-width: 1240px; margin: 0 auto; } .about-top { display: grid; grid-template-columns: 1fr 1.02fr; gap: 60px; align-items: center; } .body-p { font-size: clamp(15px,1.2vw,18px); line-height: 1.65; color: var(--muted); font-weight: 300; max-width: 42ch; margin-top: 26px; } .quote { margin: 38px 0 0; } .quote .ln { display: flex; align-items: center; gap: 14px; } .quote .ln::before, .quote .ln::after { content: ""; height: 1px; background: rgba(179,131,123,.4); flex: 1; } .quote .ln .s { color: var(--rose); font-size: 13px; } .quote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(20px,2vw,27px); line-height: 1.4; color: var(--rose-deep); text-align: center; padding: 22px 0; } .about .photo { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1/.92; background: radial-gradient(120% 90% at 70% 18%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%), linear-gradient(140deg, var(--panel-1) 0%, var(--panel-2) 55%, var(--panel-3) 100%); /* REAL PHOTO: replace the two backgrounds above with: url('studio.jpg') center/cover no-repeat; */ } .about .photo::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: overlay; } .about .photo .mono { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .about .photo .mono .m { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(70px,9vw,130px); color: rgba(179,131,123,.45); line-height: .8; } .about .photo .mono .t { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: rgba(119,108,97,.8); } .about .photo .frame { position: absolute; inset: 24px; border: 1px solid rgba(196,168,120,.5); border-radius: 4px; } .team-wrap { margin-top: 74px; border-top: 1px solid var(--line); padding-top: 44px; } .team { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 30px; } .about .card { border: 1px solid rgba(196,168,120,.45); border-radius: 10px; padding: 26px 24px; display: flex; align-items: flex-start; gap: 18px; background: rgba(255,255,255,.25); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .about .card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(179,131,123,.14); border-color: var(--rose); } .about .badge { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--rose); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #fff; } .about .card .nm { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 23px; line-height: 1.1; } .about .card .role { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 6px; } .about .card .tg { margin-top: 10px; font-size: 12px; color: var(--rose-deep); } .about .card .tg span::before { content: "·"; margin: 0 7px; color: var(--rose); } .about .card .tg span:first-child::before { display: none; } /* ============================================================ REVIEWS / TESTIMONIALS SECTION (#reviews) ============================================================ */ .reviews { padding: 50px 5vw 100px; max-width: 1240px; margin: 0 auto; } .rating { display: flex; align-items: center; gap: 18px; padding-bottom: 8px; } .rating .stars { color: var(--rose); letter-spacing: 3px; font-size: 20px; } .rating .score { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; } .rating .cnt { color: var(--muted); font-size: 14px; border-left: 1px solid var(--line); padding-left: 18px; } .reviews .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; } .reviews .card { border: 1px solid rgba(196,168,120,.45); border-radius: 14px; padding: 30px 28px; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; background: rgba(255,255,255,.22); } .reviews .card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(179,131,123,.13); border-color: var(--rose); } .reviews .card .stars { color: var(--rose); letter-spacing: 4px; font-size: 16px; margin-bottom: 18px; } .reviews .card .txt { font-size: 15.5px; line-height: 1.6; color: var(--charcoal); flex: 1; } .reviews .card .sep { height: 1px; background: var(--line); margin: 22px 0 18px; } .who { display: flex; align-items: center; gap: 14px; } .who .badge { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--rose); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 21px; color: #fff; } .who .nm { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 20px; line-height: 1.1; } .who .meta { font-size: 12px; color: var(--rose-deep); margin-top: 3px; } .reviews .all { margin-top: 48px; } .reviews .btn-all { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--rose); color: var(--rose-deep); background: transparent; padding: 16px 34px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease; } .reviews .btn-all:hover { background: var(--rose); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } .reviews .btn-all svg { width: 16px; height: 16px; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { position: relative; overflow: hidden; padding: clamp(70px,11vw,130px) 6vw; text-align: center; background: radial-gradient(140% 120% at 50% 0%, var(--blush-1) 0%, var(--blush-2) 60%, var(--blush-3) 100%); } .cta-band::before, .cta-band::after { content: ""; position: absolute; width: 340px; height: 340px; opacity: .22; pointer-events: none; background: radial-gradient(circle at 30% 30%, rgba(120,90,60,.5), transparent 60%); filter: blur(2px); } .cta-band::before { left: -80px; top: 30px; } .cta-band::after { right: -90px; bottom: -40px; width: 420px; height: 420px; } .arc { position: absolute; right: -60px; bottom: -120px; width: 380px; height: 380px; border: 1px solid rgba(196,168,120,.55); border-radius: 50%; pointer-events: none; } .cta-band .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } .div-star { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 0 auto 30px; max-width: 480px; } .div-star::before, .div-star::after { content: ""; height: 1px; background: rgba(196,168,120,.6); flex: 1; } .div-star .s { color: var(--gold); font-size: 15px; } .div-star.low { margin: 28px auto 28px; } .cta-band .eyebrow { display: block; font-size: 13px; margin-bottom: 20px; } .cta-head { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(38px,5.6vw,72px); line-height: 1.04; letter-spacing: -.01em; color: var(--charcoal); } .cta-head em { font-style: italic; } .cta-sub { font-size: clamp(15px,1.3vw,18px); line-height: 1.6; color: var(--muted); font-weight: 300; max-width: 48ch; margin: 0 auto; } .cta-band .btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 38px; background: var(--rose); color: #fff; border: none; padding: 20px 52px; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .28s ease, transform .28s ease, box-shadow .28s ease; } .cta-band .btn:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(179,131,123,.28); } .cta-band .btn svg { width: 18px; height: 18px; } /* ============================================================ CONTACT SECTION (#contact) ============================================================ */ .contact-section { padding: 50px 5vw 0; max-width: 1240px; margin: 0 auto; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; padding-bottom: 60px; } .contact-head { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(40px,5vw,72px); line-height: 1.0; letter-spacing: -.01em; } .contact-head em { font-style: italic; } .contact-div-star { display: flex; align-items: center; gap: 14px; margin: 30px 0; max-width: 420px; } .contact-div-star::before, .contact-div-star::after { content: ""; height: 1px; background: rgba(179,131,123,.4); flex: 1; } .contact-div-star .s { color: var(--rose); font-size: 13px; } .contact-intro { font-size: clamp(15px,1.15vw,17px); line-height: 1.65; color: var(--muted); font-weight: 300; max-width: 40ch; } .rows { display: flex; flex-direction: column; } .row { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); } .row:first-child { padding-top: 0; } .ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--rose-soft); display: flex; align-items: center; justify-content: center; } .ico svg { width: 20px; height: 20px; stroke: var(--rose-deep); fill: none; stroke-width: 1.6; } .row .lab { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .row .val { font-size: 17px; color: var(--charcoal); line-height: 1.5; } .row .val a { color: var(--rose-deep); text-decoration: none; } /* Address → Google Maps: keep the same charcoal as plain text, subtle hover */ .row .val a.maps { color: inherit; transition: color .28s ease; } .row .val a.maps:hover { color: var(--rose-deep); } .hours { display: flex; gap: 30px; } .hours .d { color: var(--muted); } .btn-call { display: block; width: 100%; text-align: center; margin-top: 28px; background: var(--rose); color: #fff; border: none; padding: 20px; border-radius: 8px; font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .28s ease, transform .28s ease, box-shadow .28s ease; } .btn-call:hover { background: var(--rose-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179,131,123,.22); } /* ============================================================ FOOTER ============================================================ */ footer { border-top: 1px solid var(--line); padding: 38px 5vw; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .f-brand .name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; letter-spacing: .2em; } .f-brand .sub { font-size: 9px; letter-spacing: .36em; color: var(--rose-deep); margin-top: 4px; } .f-tag { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--charcoal); border-left: 1px solid var(--line); padding-left: 30px; } .f-tag em { font-style: italic; color: var(--rose-deep); } .f-copy { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.7; } /* Very subtle maker's credit */ .f-credit { display: block; margin-top: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .55; } .f-credit a { color: inherit; text-decoration: none; transition: color .28s ease, opacity .28s ease; } .f-credit a:hover { color: var(--rose-deep); opacity: 1; } /* ============================================================ MOBILE MENU OVERLAY ============================================================ */ .menu-overlay { position: fixed; inset: 0; z-index: 50; background: var(--cream); padding: 28px 8vw; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; transform: translateY(-12px); pointer-events: none; /* visibility:hidden also removes the closed menu's links from the tab order */ visibility: hidden; transition: opacity .4s, transform .4s, visibility 0s linear .4s; } .menu-overlay.open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity .4s, transform .4s, visibility 0s; } .m-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; } .m-brand .name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 28px; letter-spacing: .2em; color: var(--charcoal); } .m-brand .sub { font-size: 10px; letter-spacing: .4em; color: var(--rose-deep); margin-top: 5px; } .close-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rose); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--rose-deep); transition: background .28s ease, color .28s ease, transform .28s ease; } .close-btn:hover { background: var(--rose); color: #fff; transform: rotate(90deg); } .close-btn svg { width: 22px; height: 22px; } .nav-label { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 14px; } .nav-label .s { color: var(--gold); } .links { display: flex; flex-direction: column; } .lnk { display: flex; align-items: center; gap: 22px; padding: 13px 0; border-bottom: 1px solid rgba(196,168,120,.45); text-decoration: none; transition: padding-left .28s ease; position: relative; } .lnk:hover { padding-left: 10px; } .lnk .n { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--rose); width: 24px; flex: none; } .lnk .t { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(27px,6.8vw,34px); line-height: 1.05; color: var(--charcoal); } .lnk .star { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); color: var(--gold); font-size: 11px; background: var(--cream); padding: 0 6px; } .m-contact { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; } .crow { display: flex; align-items: center; gap: 16px; } .crow .ic { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rose); display: flex; align-items: center; justify-content: center; color: var(--rose-deep); flex: none; } .crow .ic svg { width: 18px; height: 18px; stroke: var(--rose-deep); fill: none; stroke-width: 1.6; } .crow a, .crow span { font-size: 16px; color: var(--rose-deep); text-decoration: none; } .crow.loc span { color: var(--muted); } /* Address link in the menu keeps muted look, rose-deep on hover */ .crow.loc a { color: var(--muted); transition: color .28s ease; } .crow.loc a:hover { color: var(--rose-deep); } /* ============================================================ STICKY MOBILE CALL BUTTON ============================================================ */ .float-call { display: none; /* hidden on desktop — shown in mobile media query */ position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40; align-items: center; gap: 10px; background: var(--rose); color: #fff; padding: 15px 34px; border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 24px rgba(179,131,123,.34); transition: background .28s ease, transform .3s ease, opacity .3s ease; } .float-call:hover { background: var(--rose-deep); } .float-call svg { width: 17px; height: 17px; } /* Tuck away when footer is in view, or while the menu overlay is open */ .float-call.float-hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(120%); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 880px) { /* Nav */ .navlinks { display: none; } .burger { display: flex; } .site-header { padding: 20px 6vw; } /* Hero */ .hero { grid-template-columns: 1fr; } .hero-img { order: 1; height: 34vh; } .hero-img::after { background: linear-gradient(0deg, var(--cream) 0%, rgba(245,239,230,0) 30%); } .panel-decor .frame { inset: 20px; } .hero-text { order: 2; padding: 30px 7vw 52px; } .hero-text h1 { font-size: clamp(44px,12vw,68px); } .accent-line { margin: 22px 0 18px; } .accent-line .ln { width: 80px; } .lead { max-width: 40ch; } .cta-row { flex-direction: column; } .cta-ghost { display: none; } .cta-primary { text-align: center; padding: 18px 30px; width: 100%; } /* Services */ .services { padding: 34px 7vw 80px; } .item { grid-template-columns: 34px 1fr; gap: 14px; row-gap: 10px; } .services .num { font-size: 15px; padding-top: 5px; } .price { grid-column: 2; padding-top: 2px; } .item:hover { padding-left: 0; } /* Gallery */ .gallery { padding: 34px 7vw 80px; } .gallery .cards { grid-template-columns: 1fr; gap: 30px; } .head-row { align-items: flex-start; } .gallery .intro { max-width: none; } .gallery .card .img { aspect-ratio: 4/3; } /* About */ .about { padding: 34px 7vw 80px; } .about-top { grid-template-columns: 1fr; gap: 36px; } .about .photo { order: 2; aspect-ratio: 1/.7; } .head-block { order: 1; } .body-p { max-width: none; } .team { grid-template-columns: 1fr; gap: 16px; } .team-wrap { margin-top: 54px; } /* Reviews */ .reviews { padding: 34px 7vw 80px; } .reviews .cards { grid-template-columns: 1fr; gap: 18px; } .rating { padding-bottom: 0; margin-top: 4px; } /* CTA */ .cta-band { padding: 80px 8vw; } .cta-band .btn { width: 100%; justify-content: center; padding: 20px; } .cta-sub { max-width: none; } /* Contact */ .contact-section { padding: 34px 7vw 0; } .contact-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; } .contact-intro { max-width: none; } /* Footer */ footer { flex-direction: column; align-items: flex-start; text-align: left; padding: 32px 7vw; } .f-tag { border-left: none; padding-left: 0; } .f-copy { text-align: left; } /* Sticky mobile call button */ .float-call { display: inline-flex; } } @media (min-width: 880px) { .lnk .t { font-size: 54px; } .menu-overlay { padding: 48px 8vw; } }