/* ========================================================= BOUTIQUE SALON TEMPLATE — COLOR THEME QUICK EDIT: change the class on every page. Options: theme-blush = dusty rose + warm ivory theme-sage = soft sage + warm ivory theme-terracotta = muted terracotta + warm ivory ========================================================= */ :root{ --ink:#252020; --ink-soft:#5f5655; --paper:#fbf7f1; --paper-deep:#f3ebe1; --panel:#fffdf9; --accent:#bf7b7b; --accent-soft:#ead1cc; --accent-wash:#f4e3df; --olive:#7d8975; --line:#dfd2c8; --shadow:0 18px 60px rgba(55,39,36,.12); --dark:#241f1f; } body.theme-sage{ --accent:#7f9078; --accent-soft:#cfd8c9; --accent-wash:#e9efe5; --paper:#faf9f3; --paper-deep:#f0f2e9; --line:#d8ddd2; } body.theme-terracotta{ --accent:#b56f52; --accent-soft:#dfb7a6; --accent-wash:#f2ded4; --paper:#fcf7f1; --paper-deep:#f3e9df; --line:#e2d3c7; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:Arial,Helvetica,sans-serif;line-height:1.65; } img{display:block;max-width:100%} a{color:inherit} h1,h2,h3{ font-family:Georgia,"Times New Roman",serif; line-height:1.02;font-weight:500;letter-spacing:-.025em; } h1{font-size:clamp(3.4rem,8vw,7rem);margin:.15em 0} h2{font-size:clamp(2.2rem,5vw,4.2rem);margin:.15em 0 .35em} h3{font-size:1.5rem;margin:.2em 0 .45em} p{margin:.55em 0 1em} .wrap{width:min(1160px,92%);margin:auto} .narrow{width:min(820px,92%);margin:auto} .top{ background:var(--accent);color:white;text-align:center; padding:.48rem 1rem;font-size:.82rem;letter-spacing:.08em; } .nav{ position:sticky;top:0;z-index:50; background:rgba(251,247,241,.94);backdrop-filter:blur(14px); border-bottom:1px solid rgba(100,80,74,.12); } .nav .wrap{ min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:26px; } .brand{ text-decoration:none;font-family:Georgia,"Times New Roman",serif; font-size:1.3rem;letter-spacing:.18em;text-transform:uppercase; } .brand small{ display:block;font:600 .58rem Arial,Helvetica,sans-serif; letter-spacing:.28em;color:var(--accent);margin-top:2px; } .links{display:flex;gap:18px;align-items:center} .links a{ text-decoration:none;font-size:.82rem;letter-spacing:.03em; } .btn{ display:inline-flex;align-items:center;justify-content:center; min-height:46px;padding:.78rem 1.2rem;border-radius:4px; background:var(--accent);color:white!important;text-decoration:none; border:1px solid var(--accent);font-weight:700;font-size:.82rem;letter-spacing:.03em; } .btn:hover{filter:brightness(.96)} .btn.ghost{ background:transparent;color:inherit!important;border-color:currentColor; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em; color:var(--accent); } .eyebrow:before{content:"";width:34px;height:1px;background:currentColor} .hero{ min-height:720px;display:grid;align-items:end;color:white; background: linear-gradient(90deg,rgba(28,23,23,.84) 0%,rgba(28,23,23,.45) 45%,rgba(28,23,23,.14) 78%), url(images/hero-hair.jpg) 72% center/cover no-repeat; } .hero-copy{padding:100px 0 86px;max-width:690px} .hero .eyebrow{color:#f3d9d2} .hero p{max-width:560px;font-size:1.13rem} .hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .hero .ghost{color:white!important} .hero-note{ margin-top:34px;display:inline-block;padding-top:18px;border-top:1px solid rgba(255,255,255,.45); font-family:Georgia,serif;font-style:italic;font-size:1.05rem; } .trust{position:relative;margin-top:-34px} .trust-grid{ background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line); display:grid;grid-template-columns:repeat(4,1fr); } .trust-grid div{padding:22px 18px;text-align:center;border-right:1px solid var(--line)} .trust-grid div:last-child{border-right:0} .trust-grid span{ display:block;width:34px;height:34px;border-radius:50%;margin:0 auto 8px; background:var(--accent-wash);color:var(--accent);line-height:34px; } .section{padding:92px 0} .section.alt{background:var(--panel)} .section.tint{background:var(--accent-wash)} .section.dark{background:var(--dark);color:white} .section-head{max-width:760px;margin:0 auto 48px;text-align:center} .section-head p{color:var(--ink-soft)} .section-head.left{text-align:left;margin-left:0} .section-head.left .eyebrow{justify-content:flex-start} .editorial-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center; } .editorial-image{ position:relative;border-radius:160px 160px 10px 10px;overflow:hidden; background:var(--accent-soft);min-height:520px; } .editorial-image img{width:100%;height:100%;object-fit:cover;min-height:520px} .editorial-image:after{ content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.72); border-radius:145px 145px 5px 5px;pointer-events:none; } .script{ font-family:"Segoe Script","Brush Script MT",cursive; color:var(--accent);font-size:clamp(2rem,5vw,4rem);line-height:1; transform:rotate(-3deg);display:inline-block; } .color-ribbon{ padding:24px 0;background:var(--accent);color:white;text-align:center; font-family:Georgia,serif;letter-spacing:.13em;text-transform:uppercase; } .service-list{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line); } .service-item{background:var(--panel);padding:30px} .service-item .num{color:var(--accent);font:italic 1rem Georgia} .service-item .price{color:var(--accent);font-weight:700} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{ background:var(--panel);border:1px solid var(--line); overflow:hidden;border-radius:2px;box-shadow:0 10px 28px rgba(50,40,38,.06); } .card img{width:100%;aspect-ratio:4/3;object-fit:cover} .card .pad{padding:20px} .card .price{color:var(--accent);font-weight:700} .circle-services{ display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center; } .circle-service img{ width:160px;height:160px;border-radius:50%;object-fit:cover;margin:0 auto 16px; border:8px solid var(--panel);box-shadow:0 0 0 1px var(--line); } .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .split img{width:100%;border-radius:2px} .quote{ font:italic 1.45rem Georgia,"Times New Roman",serif; border-left:3px solid var(--accent);padding-left:20px;margin:28px 0; } .mini-points{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px} .mini-point{border-top:1px solid var(--line);padding-top:14px} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px} .gallery img{ width:100%;height:260px;object-fit:cover;border-radius:2px; } .gallery img:first-child{grid-row:span 2;height:534px} .gallery img:nth-child(4),.gallery img:nth-child(5){height:260px} .reviews{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:18px} .review{ background:var(--panel);border:1px solid var(--line);padding:30px;position:relative; } .review:first-child{background:var(--accent-wash)} .stars{color:var(--accent);letter-spacing:.15em} .review:before{ content:"“";position:absolute;top:6px;right:18px; font:5rem Georgia;color:var(--accent-soft);line-height:1; } .contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;align-items:start} .form{ background:var(--panel);border:1px solid var(--line);padding:30px;box-shadow:var(--shadow) } label{display:block;font-weight:700;font-size:.86rem;margin-top:13px} input,textarea,select{ width:100%;padding:13px 12px;border:1px solid #cfc1ba;background:#fff; border-radius:0;font:inherit; } textarea{min-height:140px} .faq details{ background:var(--panel);border-bottom:1px solid var(--line);padding:18px 0; } .faq summary{cursor:pointer} .cta{ background:linear-gradient(120deg,var(--dark),#4a3738); color:white;padding:78px 0;text-align:center; } .cta h2{margin-bottom:18px} .footer{background:#171313;color:#ddd;padding:60px 0 100px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px} .footer a{color:#ddd} .page-hero{ padding:105px 0 70px;text-align:center; background:linear-gradient(180deg,var(--accent-wash),var(--paper)); } .page-hero h1{font-size:clamp(3.2rem,7vw,6rem);margin:auto} .policy{max-width:820px;margin:auto} .policy h2{font-size:2rem;margin-top:1.5em} .mobile-bar{display:none} .theme-chip-row{ display:flex;gap:10px;flex-wrap:wrap;margin-top:22px; } .theme-chip{ border:1px solid var(--line);padding:8px 12px;background:var(--panel);font-size:.8rem; } .theme-chip i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px} @media(max-width:900px){ .links a:not(.btn){display:none} .editorial-grid,.split,.contact{grid-template-columns:1fr} .cards{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:1fr 1fr} .gallery img:first-child{grid-row:auto;height:300px;grid-column:span 2} .gallery img{height:240px} .reviews{grid-template-columns:1fr} } @media(max-width:700px){ .hero{min-height:640px;background-position:68% center} .hero-copy{padding:72px 0} .trust{margin-top:-22px} .trust-grid{grid-template-columns:1fr 1fr} .trust-grid div:nth-child(2){border-right:0} .trust-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)} .circle-services{grid-template-columns:1fr 1fr} .section{padding:66px 0} .footer-grid{grid-template-columns:1fr 1fr} .mobile-bar{ display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:80; } .mobile-bar a{ padding:14px;text-align:center;text-decoration:none;color:white;background:var(--dark);font-weight:700; } .mobile-bar a:last-child{background:var(--accent)} } @media(max-width:520px){ .nav .wrap{min-height:66px} .brand{font-size:1rem} .trust-grid,.cards,.circle-services,.footer-grid,.service-list{grid-template-columns:1fr} .trust-grid div{border-right:0!important;border-bottom:1px solid var(--line)} .trust-grid div:last-child{border-bottom:0} .gallery{grid-template-columns:1fr} .gallery img:first-child{grid-column:auto;height:280px} .gallery img{height:240px} .section-head{text-align:left} .circle-service img{width:140px;height:140px} } /* v1.2 editorial photo polish */ .card img{aspect-ratio:4/5;object-position:center 38%} .team .card img{aspect-ratio:4/5;object-position:center 28%} .gallery img{filter:saturate(.92) contrast(1.02)} .gallery img:nth-child(2){object-position:center 45%} .gallery img:nth-child(3){object-position:center 42%} .photo-caption{font-size:.76rem;color:var(--ink-soft);letter-spacing:.04em} @media(max-width:700px){.hero{min-height:700px}}