/* ============================================================
DOCTOR LALEH DENTAL AESTHETICS
Design System · v1.0
Aesthetic: editorial luxury — warm neutrals, gold, charcoal
============================================================ */
/* ---- 1. FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Libre+Baskerville:ital@0;1&family=Poppins:wght@300;400;500;600&display=swap');
/* ---- 2. DESIGN TOKENS ---- */
:root{
/* brand palette (from BrandKit-DrLaleh.pdf) */
--char: #2D2926; /* charcoal — primary dark */
--char-deep: #211e1b; /* deeper charcoal for layering */
--gold: #CC9C4A; /* signature gold */
--gold-soft: #C8AD7E; /* warm gold */
--sand: #DACAA4; /* light sand */
--butter: #F0E68D; /* pale accent — use sparingly */
--cream: #F7F3EA; /* warm off-white background */
--cream-2: #EFE9DC; /* slightly deeper cream */
--white: #FFFFFF;
--ink: #2D2926; /* body text on light */
--ink-soft: #5b554e; /* secondary text on light */
--line: #E2D9C6; /* hairline on light */
--line-dk: #423d37; /* hairline on dark */
/* type */
--display: 'Cormorant Garamond', Georgia, serif;
--serif: 'Libre Baskerville', Georgia, serif;
--sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
/* metrics */
--maxw: 1280px;
--gutter: clamp(20px, 5vw, 80px);
--radius: 2px;
--ease: cubic-bezier(.22,.61,.36,1);
--shadow: 0 30px 70px -30px rgba(45,41,38,.45);
--shadow-sm: 0 16px 40px -22px rgba(45,41,38,.55);
--accent: var(--gold); /* accent TEXT colour (kickers, links, labels) */
}
/* ---- ALTERNATE THEME: SAGE ----
To preview the sage-green palette, add data-theme="sage"
to the tag of any page. To switch the WHOLE site to
sage permanently, just change the values in :root above
( --gold, --gold-soft, --sand, --accent ) to the sage values below. */
html[data-theme="sage"]{
--gold: #B5C19A; /* sage, signature accent (buttons, fills) */
--gold-soft: #A2B188; /* deeper sage */
--sand: #CDD6BD; /* light sage */
--accent: #67793F; /* deep sage, readable accent text on light bg */
}
/* on dark sections the soft sage reads well, so use it for accent text */
html[data-theme="sage"] .bg-char,
html[data-theme="sage"] .hero,
html[data-theme="sage"] .page-hero,
html[data-theme="sage"] .cta-band,
html[data-theme="sage"] .smile-moodboard{
--accent: #B5C19A;
}
a.addr-link,a.fc-line{text-decoration:none;color:inherit;cursor:pointer}
a.addr-link:hover,a.fc-line:hover{text-decoration:underline;text-underline-offset:3px}
/* ---- 3. RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--serif);
background:var(--cream);
color:var(--ink);
line-height:1.75;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--char)}
/* ---- 4. TYPOGRAPHY ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:.01em}
.kicker{
font-family:var(--sans);
font-size:.72rem;
font-weight:500;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--accent);
display:inline-flex;
align-items:center;
gap:.85em;
}
.kicker::before{
content:"";width:34px;height:1px;background:var(--gold);display:inline-block;
}
.kicker.center{justify-content:center}
.kicker.center::after{
content:"";width:34px;height:1px;background:var(--gold);display:inline-block;
}
.h-xl{font-size:clamp(2.7rem,6.4vw,5.4rem)}
.h-lg{font-size:clamp(2.2rem,4.6vw,3.7rem)}
.h-md{font-size:clamp(1.8rem,3vw,2.6rem)}
.lead{
font-family:var(--serif);
font-size:clamp(1.02rem,1.35vw,1.18rem);
line-height:1.85;
color:var(--ink-soft);
}
.body-sans{font-family:var(--sans);font-weight:300;line-height:1.85}
p{margin-bottom:1.1em}
p:last-child{margin-bottom:0}
em,i{font-style:italic}
.gold-text{color:var(--accent)}
.serif-italic{font-family:var(--display);font-style:italic;font-weight:400}
/* ---- 5. LAYOUT ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.section{padding:clamp(48px,7vw,104px) 0}
.section-sm{padding:clamp(36px,4.5vw,68px) 0}
.bg-cream{background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}
.bg-char{background:var(--char);color:var(--cream)}
.bg-char .lead{color:#cfc7b8}
.bg-white{background:var(--white)}
/* decorative thin rule */
.rule{width:100%;height:1px;background:var(--line);border:0}
.bg-char .rule{background:var(--line-dk)}
/* ---- 6. BUTTONS ---- */
.btn{
font-family:var(--sans);
font-size:.78rem;
font-weight:500;
letter-spacing:.18em;
text-transform:uppercase;
padding:1.15em 2.3em;
display:inline-flex;align-items:center;gap:.7em;
border:1px solid transparent;
transition:all .45s var(--ease);
position:relative;
}
.btn-primary{background:var(--gold);color:var(--char)}
.btn-primary:hover{background:var(--char);color:var(--cream)}
.btn-outline{border-color:currentColor;color:var(--char)}
.btn-outline:hover{background:var(--char);color:var(--cream);border-color:var(--char)}
.hero .btn-outline,.page-hero .btn-outline,.bg-char .btn-outline,.cta-band .btn-outline{
color:var(--cream);border-color:var(--gold)
}
.bg-char .btn-outline:hover,.hero .btn-outline:hover,.page-hero .btn-outline:hover,.cta-band .btn-outline:hover{background:var(--gold);color:var(--char);border-color:var(--gold)}
.btn-light{background:var(--cream);color:var(--char)}
.btn-light:hover{background:var(--gold)}
.btn-arrow::after{content:"\2192";transition:transform .4s var(--ease)}
.btn:hover.btn-arrow::after{transform:translateX(5px)}
.link-arrow{
font-family:var(--sans);font-size:.76rem;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
display:inline-flex;align-items:center;gap:.6em;
}
.link-arrow::after{content:"\2192";transition:transform .4s var(--ease)}
.link-arrow:hover::after{transform:translateX(6px)}
/* ============================================================
7. EDITABLE MEDIA SLOTS
These are the "placeholders" Dr. Laleh's team swaps out.
To go live: replace the .media-slot block with a real
![]()
or