<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtue Salons — Chennai-Specific Skin Care</title>
<style>
:root {
--page-bg: #5a4338;
--surface: #fff;
--soft: #f5f5f3;
--black: #111;
--charcoal: #2b2b2b;
--gray: #797979;
--line: #d5d5d2;
--warm: #705548;
--cream: #eee9e3
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
background: var(--page-bg);
font-family: Inter, "Helvetica Neue", Arial, sans-serif;
color: var(--black)
}
body:before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(50, 34, 28, .55), rgba(80, 56, 46, .15)),
url("https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?auto=format&fit=crop&w=1800&q=80") center/cover;
filter: saturate(.75)
}
button,
a {
font: inherit
}
button {
cursor: pointer
}
.shell {
width: min(740px, calc(100% - 44px));
margin: 70px auto;
background: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
overflow: hidden
}
.hero {
height: 365px;
position: relative;
background: #4a342b;
overflow: hidden
}
.hero>img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 43%;
display: block
}
.hero:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(18, 12, 9, .34) 0%, transparent 58%), linear-gradient(0deg, rgba(12, 8, 6, .3), transparent 48%)
}
.navbar {
position: absolute;
z-index: 4;
top: 18px;
left: 30px;
right: 30px;
height: 42px;
padding: 0 8px 0 13px;
background: #fff;
border-radius: 6px;
display: grid;
grid-template-columns: 100px 1fr auto;
align-items: center;
gap: 12px
}
.logo {
font-size: 17px;
font-weight: 800;
letter-spacing: -.5px;
text-decoration: none;
color: #111
}
.navlinks {
display: flex;
justify-content: center;
gap: 38px
}
.navlinks a {
color: #111;
text-decoration: none;
font-size: 7px
}
.navright {
display: flex;
align-items: center;
gap: 12px
}
.hours {
font-size: 6px;
line-height: 1.15
}
.call {
border: 0;
background: #292929;
color: #fff;
border-radius: 5px;
font-size: 7px;
padding: 7px 20px
}
.hero-copy {
position: absolute;
z-index: 3;
left: 30px;
bottom: 34px;
color: #fff;
max-width: 410px
}
.eyebrow {
font-size: 7px;
line-height: 1.2;
max-width: 230px;
margin-bottom: 15px
}
.hero-copy h1 {
font-size: 31px;
line-height: .94;
margin: 0;
letter-spacing: -1.4px
}
.hero-copy h1 span {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 400
}
.diagnostic {
position: absolute;
z-index: 5;
right: 30px;
bottom: 34px;
width: 154px;
background: #fff;
border-radius: 8px;
padding: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, .14)
}
.diagnostic img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 5px;
display: block
}
.diagnostic h3 {
font-size: 11px;
line-height: .95;
margin: 10px 0 9px
}
.cta {
width: 100%;
border: 0;
background: #292929;
color: #fff;
border-radius: 5px;
padding: 8px 9px;
display: flex;
justify-content: space-between;
font-size: 7px
}
.content {
padding: 31px 30px 43px
}
.mission {
display: grid;
grid-template-columns: 1.05fr 1fr 1fr;
gap: 24px;
align-items: start;
margin-bottom: 27px
}
.mission h2 {
font-size: 22px;
line-height: .9;
margin: 0;
letter-spacing: -.7px
}
.mission p {
font-size: 6.5px;
line-height: 1.25;
margin: 0;
color: #393939
}
.services-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px
}
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 94px 94px;
gap: 10px
}
.service {
position: relative;
overflow: hidden;
border-radius: 9px;
color: #fff;
text-decoration: none;
min-height: 0
}
.service.large {
grid-row: 1/3
}
.service img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s
}
.service:hover img,
.article:hover img {
transform: scale(1.02)
}
.service:after,
.article:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, .48), transparent 60%)
}
.service-label {
position: absolute;
z-index: 2;
left: 10px;
right: 8px;
bottom: 9px;
font-size: 10px;
font-weight: 700;
line-height: 1.05;
display: flex;
justify-content: space-between;
align-items: end
}
.arrow {
font-size: 13px;
font-weight: 400
}
.info-stack {
display: grid;
gap: 10px
}
.info-btn {
height: 59px;
background: #fff;
border: 1px solid #bbb;
border-radius: 8px;
padding: 0 10px;
display: flex;
align-items: end;
justify-content: space-between;
padding-bottom: 9px;
font-size: 9px;
font-weight: 700
}
.info-btn i {
font-style: normal;
width: 14px;
height: 14px;
border-radius: 50%;
background: #222;
color: #fff;
display: grid;
place-items: center;
font-size: 8px
}
.article {
height: 190px;
position: relative;
margin-top: 10px;
border-radius: 9px;
overflow: hidden;
color: #fff
}
.article img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 43%;
display: block;
transition: transform .35s
}
.article-copy {
position: absolute;
z-index: 2;
left: 11px;
top: 42px;
max-width: 430px
}
.article h2 {
font-size: 19px;
line-height: .92;
margin: 0 0 8px;
letter-spacing: -.5px
}
.article p {
font-size: 6px;
line-height: 1.25;
max-width: 200px;
margin: 0
}
.read {
position: absolute;
z-index: 3;
right: 12px;
bottom: 13px;
width: 142px;
border: 0;
background: #fff;
color: #222;
border-radius: 5px;
padding: 9px 10px;
display: flex;
justify-content: space-between;
font-size: 7px
}
.modal {
position: fixed;
inset: 0;
z-index: 20;
background: rgba(0, 0, 0, .55);
display: none;
place-items: center;
padding: 20px
}
.modal.open {
display: grid
}
.modal-card {
width: min(390px, 100%);
background: #fff;
padding: 26px;
border-radius: 8px
}
.modal-card h2 {
margin-top: 0
}
.modal-card input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin: 6px 0;
border-radius: 5px
}
.modal-actions {
display: flex;
gap: 8px;
margin-top: 10px
}
.modal-actions button {
flex: 1;
padding: 11px;
border-radius: 5px;
border: 1px solid #222;
background: #fff
}
.modal-actions .dark {
background: #222;
color: #fff
}
@media(max-width:650px) {
.shell {
width: 100%;
margin: 0
}
.hero {
height: 610px
}
.navbar {
left: 16px;
right: 16px;
grid-template-columns: 1fr auto
}
.navlinks,
.hours {
display: none
}
.hero-copy {
left: 20px;
right: 20px;
bottom: 220px
}
.hero-copy h1 {
font-size: 35px
}
.diagnostic {
left: 20px;
right: 20px;
bottom: 20px;
width: auto;
display: grid;
grid-template-columns: 125px 1fr;
gap: 12px
}
.diagnostic img {
height: 135px;
grid-row: 1/3
}
.diagnostic h3 {
font-size: 15px;
margin: 12px 0 0
}
.diagnostic .cta {
align-self: end;
margin-bottom: 8px
}
.content {
padding: 28px 20px 36px
}
.mission {
grid-template-columns: 1fr;
gap: 13px
}
.mission p {
font-size: 10px
}
.services-layout {
grid-template-columns: 1fr
}
.services-grid {
grid-template-columns: 1fr;
grid-template-rows: 230px 150px 150px
}
.service.large {
grid-row: auto
}
.info-btn {
height: 52px;
align-items: center;
padding-bottom: 0
}
.article {
height: 270px
}
.article-copy {
top: 28px;
right: 15px
}
.article h2 {
font-size: 20px
}
.article p {
font-size: 9px
}
.read {
left: 11px;
right: 11px;
width: auto
}
}
/* Full-width responsive layout after removing navigation and hero portrait */
body { background: var(--surface); overflow-x: hidden }
body:before { display: none }
.shell {
width: 100%;
max-width: none;
margin: 0;
box-shadow: none
}
.hero {
height: clamp(520px, 68vh, 720px);
background:
radial-gradient(circle at 78% 32%, rgba(238, 233, 227, .16), transparent 28%),
linear-gradient(120deg, #3f2d26, #705548 62%, #8a7062)
}
.hero:after {
background: linear-gradient(90deg, rgba(10, 7, 5, .25), transparent 65%)
}
.hero-copy {
left: clamp(28px, 7vw, 120px);
bottom: clamp(70px, 10vh, 120px);
max-width: min(760px, 62vw)
}
.eyebrow { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.5; max-width: 480px; margin-bottom: 25px }
.hero-copy h1 { font-size: clamp(58px, 6vw, 100px); line-height: .9; letter-spacing: -.05em }
.diagnostic {
right: clamp(28px, 7vw, 120px);
bottom: clamp(55px, 8vh, 95px);
width: clamp(250px, 21vw, 340px);
padding: 14px;
border-radius: 16px
}
.diagnostic img { height: clamp(150px, 15vw, 220px); border-radius: 10px }
.diagnostic h3 { font-size: clamp(16px, 1.4vw, 22px); line-height: 1; margin: 18px 0 15px }
.cta { padding: 13px 14px; font-size: 13px }
.content { padding: clamp(70px, 8vw, 130px) clamp(28px, 7vw, 120px) }
.mission { grid-template-columns: 1fr 1fr 1fr; gap: clamp(30px, 5vw, 80px); margin-bottom: clamp(55px, 7vw, 100px) }
.mission h2 { font-size: clamp(42px, 4vw, 68px); line-height: .9 }
.mission p { font-size: clamp(14px, 1.15vw, 18px); line-height: 1.6 }
.services-layout { grid-template-columns: minmax(0, 2.2fr) minmax(260px, .8fr); gap: 20px }
.services-grid { grid-template-rows: repeat(2, clamp(210px, 20vw, 330px)); gap: 20px }
.service { border-radius: 18px }
.service-label { left: 22px; right: 20px; bottom: 20px; font-size: clamp(16px, 1.5vw, 23px) }
.arrow { font-size: 24px }
.info-stack { gap: 20px }
.info-btn { height: auto; min-height: 110px; border-radius: 16px; padding: 20px; align-items: center; font-size: clamp(14px, 1.2vw, 18px) }
.info-btn i { width: 28px; height: 28px; font-size: 14px }
.article { height: clamp(420px, 42vw, 650px); margin-top: 20px; border-radius: 18px }
.article-copy { left: clamp(24px, 4vw, 65px); top: clamp(55px, 8vw, 120px); max-width: 760px }
.article h2 { font-size: clamp(38px, 4vw, 66px); line-height: .92; margin-bottom: 24px }
.article p { font-size: clamp(14px, 1.15vw, 18px); line-height: 1.55; max-width: 520px }
.read { right: clamp(20px, 3vw, 45px); bottom: clamp(20px, 3vw, 45px); width: 210px; padding: 14px 16px; font-size: 14px }
@media(max-width: 900px) {
.hero { height: auto; min-height: 760px }
.hero-copy { left: 35px; right: 35px; top: 80px; bottom: auto; max-width: 700px }
.diagnostic { left: 35px; right: 35px; bottom: 35px; width: auto; display: grid; grid-template-columns: 210px 1fr; gap: 20px }
.diagnostic img { height: 190px; grid-row: 1 / 3 }
.diagnostic h3 { align-self: end }
.diagnostic .cta { align-self: start }
.mission { grid-template-columns: 1fr 1fr }
.mission h2 { grid-column: 1 / -1 }
.services-layout { grid-template-columns: 1fr }
.info-stack { grid-template-columns: repeat(3, 1fr) }
.article-copy { right: 30px }
}
@media(max-width: 560px) {
.hero { min-height: 700px }
.hero-copy { left: 20px; right: 20px; top: 65px }
.hero-copy h1 { font-size: clamp(46px, 14vw, 66px) }
.eyebrow { font-size: 13px }
.diagnostic { left: 20px; right: 20px; bottom: 20px; grid-template-columns: 105px 1fr; gap: 12px; padding: 10px }
.diagnostic img { height: 135px }
.diagnostic h3 { font-size: 15px; margin: 8px 0 }
.cta { font-size: 11px; padding: 11px }
.content { padding: 60px 18px }
.mission { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px }
.mission h2 { grid-column: auto; font-size: 42px }
.mission p { font-size: 14px }
.services-grid { grid-template-columns: 1fr; grid-template-rows: 280px 190px 190px; gap: 12px }
.service-label { font-size: 17px }
.info-stack { grid-template-columns: 1fr; gap: 10px }
.info-btn { min-height: 66px }
.article { height: 480px; margin-top: 12px }
.article-copy { top: 45px; left: 20px; right: 20px }
.article h2 { font-size: 34px }
.article p { font-size: 14px }
.read { left: 20px; right: 20px; bottom: 20px; width: auto }
}
/* Virtue Chennai skin-care content */
.skin-intro {
display: grid;
grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
gap: clamp(40px, 8vw, 130px);
align-items: start;
margin-bottom: clamp(65px, 8vw, 120px)
}
.skin-intro h2 {
font-size: clamp(42px, 4.6vw, 76px);
line-height: .9;
letter-spacing: -.045em;
margin: 0
}
.skin-intro-copy { max-width: 760px }
.skin-intro-copy p { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; margin: 0 0 22px; color: #393939 }
.skin-intro-copy strong { color: var(--warm) }
.services-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 36px }
.services-heading h2 { font-size: clamp(45px, 5vw, 82px); line-height: .9; letter-spacing: -.05em; margin: 0 }
.services-heading p { max-width: 430px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--gray) }
.skin-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.skin-card { min-height: 310px; padding: clamp(28px, 3.5vw, 50px); border-radius: 18px; background: var(--soft); display: flex; flex-direction: column; justify-content: space-between }
.skin-card:first-child { grid-row: span 2; min-height: 638px; color: #fff; background: linear-gradient(0deg, rgba(25,16,12,.68), rgba(25,16,12,.12)), url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?auto=format&fit=crop&w=1000&q=88') center/cover }
.skin-card:nth-child(2) { background: var(--cream) }
.skin-card:nth-child(3) { background: #e7ddd5 }
.skin-card:nth-child(4) { background: #d8cec7 }
.skin-card:nth-child(5) { background: #cab8ac }
.skin-number { font-size: 13px; letter-spacing: .1em; opacity: .7 }
.skin-card h3 { font: 500 clamp(30px, 3vw, 48px)/.95 Georgia, "Times New Roman", serif; margin: 40px 0 18px }
.skin-card p { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; margin: 0; max-width: 620px }
.skin-cta { min-height: 560px; margin-top: 20px; border-radius: 18px; overflow: hidden; position: relative; display: flex; align-items: center; padding: clamp(45px, 7vw, 110px); color: #fff; background: linear-gradient(90deg, rgba(31,20,16,.82), rgba(31,20,16,.28)), url('https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?auto=format&fit=crop&w=1600&q=90') center/cover }
.skin-cta-copy { width: min(720px, 100%); position: relative; z-index: 1 }
.skin-cta h2 { font-size: clamp(44px, 5vw, 82px); line-height: .9; letter-spacing: -.05em; margin: 0 0 25px }
.skin-cta p { max-width: 650px; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.65; margin: 0 0 30px }
.skin-cta button { border: 0; border-radius: 7px; padding: 15px 22px; background: #fff; color: #222; font-size: 14px }
@media(max-width: 850px) {
.skin-intro { grid-template-columns: 1fr; gap: 35px }
.services-heading { display: block }
.services-heading p { margin-top: 18px }
.skin-service-grid { grid-template-columns: 1fr }
.skin-card, .skin-card:first-child { grid-row: auto; min-height: 360px }
}
@media(max-width: 560px) {
.skin-intro { margin-bottom: 70px }
.skin-intro h2 { font-size: 43px }
.skin-intro-copy p { font-size: 14px }
.services-heading h2 { font-size: 48px }
.skin-service-grid { gap: 12px }
.skin-card, .skin-card:first-child { min-height: 330px; padding: 28px 22px; border-radius: 14px }
.skin-card h3 { font-size: 34px }
.skin-card p { font-size: 14px }
.skin-cta { min-height: 520px; padding: 55px 22px; border-radius: 14px }
.skin-cta h2 { font-size: 45px }
}
/* Slightly smaller typography for improved balance */
.hero-copy h1 { font-size: clamp(50px, 5.2vw, 84px) }
.eyebrow { font-size: clamp(12px, .95vw, 15px) }
.diagnostic h3 { font-size: clamp(15px, 1.2vw, 19px) }
.skin-intro h2 { font-size: clamp(38px, 4vw, 64px) }
.skin-intro-copy p { font-size: clamp(14px, 1.08vw, 17px) }
.services-heading h2 { font-size: clamp(40px, 4.3vw, 70px) }
.services-heading p { font-size: 14px }
.skin-card h3 { font-size: clamp(27px, 2.55vw, 41px) }
.skin-card p { font-size: clamp(13px, .98vw, 15px) }
.skin-cta h2 { font-size: clamp(39px, 4.3vw, 70px) }
.skin-cta p { font-size: clamp(14px, 1.08vw, 17px) }
@media(max-width: 560px) {
.hero-copy h1 { font-size: clamp(40px, 12vw, 54px) }
.skin-intro h2 { font-size: 37px }
.services-heading h2 { font-size: 42px }
.skin-card h3 { font-size: 30px }
.skin-card p, .skin-intro-copy p { font-size: 13.5px }
.skin-cta h2 { font-size: 39px }
.skin-cta p { font-size: 14px }
}
/* Compact final type scale */
.hero-copy h1 { font-size: clamp(42px, 4.1vw, 64px) }
.eyebrow { font-size: clamp(11px, .82vw, 13px); max-width: 420px }
.diagnostic h3 { font-size: clamp(14px, 1vw, 17px) }
.cta { font-size: 12px }
.skin-intro h2 { font-size: clamp(32px, 3.2vw, 50px); line-height: .95 }
.skin-intro-copy p { font-size: clamp(13px, .9vw, 15px); line-height: 1.65 }
.services-heading h2 { font-size: clamp(34px, 3.5vw, 54px) }
.services-heading p { font-size: 13px }
.skin-card h3 { font-size: clamp(24px, 2vw, 32px); line-height: 1 }
.skin-card p { font-size: clamp(12px, .85vw, 14px); line-height: 1.6 }
.skin-cta h2 { font-size: clamp(34px, 3.5vw, 54px); line-height: .95 }
.skin-cta p { font-size: clamp(13px, .92vw, 15px) }
.skin-cta button { font-size: 12px }
@media(max-width: 560px) {
.hero-copy h1 { font-size: clamp(34px, 10vw, 44px) }
.eyebrow { font-size: 11px }
.skin-intro h2 { font-size: 30px }
.skin-intro-copy p { font-size: 13px }
.services-heading h2 { font-size: 34px }
.services-heading p { font-size: 13px }
.skin-card h3 { font-size: 25px }
.skin-card p { font-size: 12.5px }
.skin-cta h2 { font-size: 32px }
.skin-cta p { font-size: 13px }
}
/* Preserve the intended hero typography */
.hero-copy h1 { font-size: clamp(50px, 5.2vw, 84px) }
.eyebrow { font-size: clamp(12px, .95vw, 15px); max-width: 480px }
@media(max-width: 560px) {
.hero-copy h1 { font-size: clamp(40px, 12vw, 54px) }
.eyebrow { font-size: 12px }
}
</style>
<style id="vir-skin-reference-palette">
:root{
--vir-background:#E9E9E7;--vir-light-background:#F7F7F5;--vir-text:#1A1A1A;--vir-dark:#0F1210;--vir-white:#FFFFFF;
--vir-forest-darkest:#041F1D;--vir-forest:#073731;--vir-teal:#0D5C52;--vir-teal-highlight:#166F63;--vir-forest-secondary:#0A463F;--vir-green-black:#031917;--vir-teal-accent:#0F665F;
--vir-burgundy:#8B1A2B;--vir-wine:#3D1018;--vir-terracotta:#A64B47;--vir-gold:#D4B56A;
--vir-services-gradient:linear-gradient(135deg,#041F1D 0%,#073731 22%,#0D5C52 46%,#166F63 62%,#0A463F 82%,#031917 100%);
--vir-aesthetic-gradient:linear-gradient(135deg,#8B1A2B 0%,#3D1018 50%,#8B1A2B 100%);
--page-bg:var(--vir-forest-darkest);--surface:var(--vir-light-background);--soft:#F1F1F0;--black:var(--vir-dark);--charcoal:var(--vir-forest-darkest);--gray:#6B6B6B;--line:rgba(7,55,49,.16);--warm:var(--vir-burgundy);--cream:#F3EEE8
}
body{background:var(--vir-forest-darkest);color:var(--vir-text)}
body:before{background:linear-gradient(110deg,rgba(4,31,29,.9),rgba(13,92,82,.32)),url("https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?auto=format&fit=crop&w=1800&q=80") center/cover;filter:saturate(.72)}
.shell{background:var(--vir-light-background);box-shadow:0 30px 90px rgba(3,25,23,.28)}
.hero{background:var(--vir-services-gradient)}
.hero:after{background:linear-gradient(90deg,rgba(3,25,23,.82) 0%,rgba(7,55,49,.35) 55%,rgba(139,26,43,.18)),linear-gradient(0deg,rgba(3,25,23,.5),transparent 55%)}
.hero-copy h1 span{color:var(--vir-gold)}
.navbar{background:rgba(255,255,255,.94);border:1px solid rgba(212,181,106,.4);box-shadow:0 12px 34px rgba(3,25,23,.16);backdrop-filter:blur(12px)}
.logo{color:var(--vir-forest)}.navlinks a{color:var(--vir-forest-darkest)}
.call,.cta{background:linear-gradient(135deg,var(--vir-burgundy),var(--vir-wine));color:#fff}
.call:hover,.cta:hover{background:linear-gradient(135deg,var(--vir-teal-highlight),var(--vir-forest))}
.diagnostic{border:1px solid rgba(212,181,106,.55);box-shadow:0 18px 45px rgba(3,25,23,.22)}
.content{background:linear-gradient(180deg,var(--vir-light-background),#EEEAE4)}
.mission h2,.skin-intro h2,.services-heading h2{color:var(--vir-forest-darkest)}
.mission p,.skin-intro p,.services-heading p{color:#5D5D5D}
.info-btn{background:var(--vir-white);border-color:rgba(7,55,49,.18);color:var(--vir-forest-darkest)}
.info-btn i{background:var(--vir-teal-accent);color:#fff}
.skin-intro{border-color:rgba(7,55,49,.14)}
.skin-card{border:1px solid rgba(7,55,49,.12);box-shadow:0 16px 38px rgba(4,31,29,.07)}
.skin-card:first-child{border-color:rgba(212,181,106,.55)}
.skin-card:nth-child(2){background:linear-gradient(145deg,#F7F7F5,#E7EFEA);color:var(--vir-forest-darkest)}
.skin-card:nth-child(3){background:linear-gradient(145deg,#F4ECE8,#E8D9D7);color:var(--vir-wine)}
.skin-card:nth-child(4){background:linear-gradient(145deg,#E6EFEC,#C9DDD7);color:var(--vir-forest)}
.skin-card:nth-child(5){background:linear-gradient(145deg,#F0E7DE,#E1CDBF);color:var(--vir-burgundy)}
.skin-number{color:var(--vir-teal-accent)}
.skin-card:first-child .skin-number{color:var(--vir-gold)}
.skin-cta{background:linear-gradient(90deg,rgba(61,16,24,.91),rgba(139,26,43,.45),rgba(4,31,29,.18)),url('https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?auto=format&fit=crop&w=1600&q=90') center/cover}
.skin-cta h2{color:#fff}.skin-cta button{background:var(--vir-gold);color:var(--vir-wine);font-weight:600}.skin-cta button:hover{background:#fff}
.modal{background:rgba(3,25,23,.78)}.modal-card{border:1px solid rgba(212,181,106,.45);background:var(--vir-light-background)}
.modal-card h2{color:var(--vir-forest-darkest)}.modal-actions .dark{background:var(--vir-burgundy);color:#fff}
</style>
<style id="vir-skin-reference-hair-type">
body,.shell,button,a,input,select,textarea{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.hero-copy h1,.hero-copy h1 span,.mission h2,.article h2,.skin-intro h2,.services-heading h2,.skin-card h3,.skin-cta h2,.diagnostic h3,.modal-card h2{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.hero-copy h1{font-weight:500;letter-spacing:-.055em}
.hero-copy h1 span{font-weight:500;font-style:italic;letter-spacing:-.055em}
.mission h2,.skin-intro h2,.services-heading h2,.skin-cta h2{font-weight:500;line-height:.94;letter-spacing:-.045em}
.skin-card h3,.diagnostic h3,.article h2,.modal-card h2{font-weight:500;letter-spacing:-.035em}
.eyebrow,.skin-number,.services-heading p,.mission p,.skin-intro p,.skin-card p,.skin-cta p,.diagnostic,.modal-card label{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
.eyebrow,.skin-number{font-weight:600;letter-spacing:.12em}
.skin-card p,.skin-intro p,.skin-cta p,.mission p{line-height:1.6}
.cta,.call,.skin-cta button,.modal-actions button{font-weight:600}
</style>
<style id="vir-skin-consultation-compact">
@media(min-width:901px){
.diagnostic{width:clamp(220px,18vw,280px);padding:11px;border-radius:13px}
.diagnostic img{height:clamp(130px,12vw,175px);border-radius:8px}
.diagnostic h3{font-size:clamp(14px,1.1vw,18px);margin:13px 0 11px}
.diagnostic .cta{padding:10px 12px;font-size:11px}
}
</style>
<script id="vir-skin-consultation-links">
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.diagnostic [data-modal],.skin-cta [data-modal]').forEach(function(button){
button.addEventListener('click',function(event){
event.preventDefault();
event.stopImmediatePropagation();
window.top.location.href='../contact-us/';
},true);
});
});
</script>
<style id="vir-skin-hero-phrase-size">.hero h1 span{font-size:.72em;line-height:1.02;display:inline-block}</style>
</head>
<body>
<main class="shell">
<section class="hero" id="home">
<div class="hero-copy">
<div class="eyebrow">Not a generic facial menu. Treatments that understand humidity, sun exposure, and the particular way this city's weather behaves on different skin types.</div>
<h1>CHENNAI SKIN DESERVES <span>CHENNAI-SPECIFIC CARE.</span></h1>
</div>
<aside class="diagnostic" id="diagnostics">
<img src="https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?auto=format&fit=crop&w=500&q=85"
alt="Professional skin consultation at Virtue Salons">
<h3>PERSONALISED<br>SKIN CONSULTATION</h3>
<a class="cta vir-page-link" href="../contact-us/" target="_top">Book Consultation <span>→</span></a>
</aside>
</section>
<section class="content">
<section class="skin-intro" id="specialists">
<h2>SKIN CARE IN CHENNAI IS ITS OWN CONVERSATION.</h2>
<div class="skin-intro-copy">
<p>The heat, the humidity, the pollution, the UV exposure—your skin is dealing with a lot. What works for skin in another climate does not always translate here, and products that feel luxurious in the jar can clog pores in 35-degree humidity.</p>
<p>At Virtue Salons, our skin services are designed with that reality in mind. We use <strong>Skeyndor</strong>—a professional European skincare brand trusted by clinics and salons across the world—alongside a carefully selected range of treatments suited to Indian skin tones and the specific challenges of the Chennai climate.</p>
</div>
</section>
<section id="services">
<div class="services-heading"><h2>OUR SKIN SERVICES</h2><p>Thoughtful treatments selected around your skin type, present condition, and the result you want to achieve.</p></div>
<div class="skin-service-grid">
<article class="skin-card"><span class="skin-number">01</span><div><h3>Facials & Cleanups</h3><p>From a thorough deep-cleansing facial to a quick glow cleanup before an event—we match the treatment to what your skin actually needs. Our facials are not a fixed sequence of steps. They are adapted based on skin type, current condition, and the outcome you are working toward.</p></div></article>
<article class="skin-card"><span class="skin-number">02</span><div><h3>Hydra Facial</h3><p>A multi-step treatment that cleanses, exfoliates, extracts, and hydrates in one session. The result is immediately visible: brighter, more even, genuinely refreshed skin—with no irritation or downtime.</p></div></article>
<article class="skin-card"><span class="skin-number">03</span><div><h3>Waxing</h3><p>Full body, face, arms, and legs—done cleanly, quickly, and with a focus on minimising discomfort. We use quality wax formulations suited to sensitive skin.</p></div></article>
<article class="skin-card"><span class="skin-number">04</span><div><h3>Threading</h3><p>Precise, clean, and performed by experienced hands. Eyebrow shaping, upper lip, and full-face threading—quick and effective.</p></div></article>
<article class="skin-card"><span class="skin-number">05</span><div><h3>Skin Brightening & Pigmentation</h3><p>For uneven skin tone, sun spots, and pigmentation—treatments that address the cause, not just the surface.</p></div></article>
</div>
</section>
<section class="skin-cta">
<div class="skin-cta-copy"><h2>UNDERSTAND YOUR SKIN. CARE FOR IT PROPERLY.</h2><p>Your skin is not a problem to fix. It is something to understand and care for properly. Come in and talk to one of our skin specialists.</p><a class="vir-page-link" href="../contact-us/" target="_top">Book a Skin Consultation Today →</a></div>
</section>
</section>
</main>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<form class="modal-card"
onsubmit="event.preventDefault();alert('Thank you! Your consultation request has been received.');document.getElementById('modal').classList.remove('open')">
<h2 id="modalTitle">Book a Skin Consultation</h2>
<input required aria-label="Name" placeholder="Your name">
<input required aria-label="Phone" placeholder="Phone number" type="tel">
<div class="modal-actions"><button type="button" data-close>Close</button><button class="dark"
type="submit">Submit</button></div>
</form>
</div>
<script>
const modal = document.getElementById('modal');
document.querySelectorAll('[data-modal]').forEach(b => b.addEventListener('click', () => modal.classList.add('open')));
document.querySelector('[data-close]').addEventListener('click', () => modal.classList.remove('open'));
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('open') });
document.addEventListener('keydown', e => { if (e.key === 'Escape') modal.classList.remove('open') });
</script>
</body>
</html>
