/* ===========================================================================
Always Pretty Salon and Spa — shared stylesheet for every page.
One file controls the whole site's look. Tokens live in :root.
Identity: an aged-cream Victorian parlor — warm, editorial, expert-led.
Palette: aged cream canvas, espresso ink, warm taupe, deep berry accent,
dusty-rose-on-aubergine for inverted bands.
Type: Cormorant Garamond (display) + Mulish (body).
Type scale is literal; spacing follows a 0.25rem (4px) base.
=========================================================================== */
:root {
--bone: #f5efe5; /* aged-cream page canvas */
--bone-warm: #ece3d3; /* warmer cream for plates/insets */
--ink: #2a211e; /* espresso text on cream (very high contrast) */
--muted: #5c4f48; /* warm-taupe secondary text (AA on cream) */
--accent: #842740; /* deep berry — links/marks (7.8:1 on cream) */
--accent-deep: #5e1a2e; /* darker berry for large display marks */
--rose: #e8b9bf; /* dusty rose — for use ON the aubergine band */
--deep: #2b1d22; /* aubergine dark-band background */
--deep-2: #241a26; /* second dark tone for footer */
--measure: 38rem;
--edge: clamp(1.5rem, 5vw, 5rem);
--rule: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
--hair: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background-color: var(--bone);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* ---- type: literal scale -> 13 / 16 / 18 / 22 / 28 / 40 / 56 px ---- */
h1 { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem;
line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 1.5rem; color: var(--ink); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem;
line-height: 1.15; margin: 0 0 1rem; color: var(--ink); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.375rem;
line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 0.5rem; color: var(--ink); }
p { margin: 0 0 1rem; max-width: var(--measure); }
.lede { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem;
line-height: 1.4; color: var(--muted); max-width: 34rem; font-style: italic; }
.kicker { font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.22em; font-size: 0.8125rem; font-weight: 700;
color: var(--accent); margin: 0 0 1rem; }
.measure { max-width: var(--measure); }
strong { font-weight: 700; }
/* ---- links & focus ---- */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 3px solid var(--accent); outline-offset: 2px;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background-color: var(--ink); color: var(--bone);
padding: 0.5rem 1rem; z-index: 20; text-decoration: none; }
/* ---- buttons ---- */
.btn {
display: inline-block; font-family: var(--font-body); font-weight: 700;
font-size: 1rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
background-color: var(--accent); color: var(--bone);
border: 1.5px solid var(--accent); border-radius: 1px;
padding: 0.875rem 1.75rem;
transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.btn:hover { transform: translateY(-2px); background-color: var(--ink);
border-color: var(--ink); color: var(--bone); }
.btn-ghost { background-color: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background-color: var(--accent); color: var(--bone); border-color: var(--accent); }
.btn-on-dark { background-color: var(--rose); color: var(--deep); border-color: var(--rose); }
.btn-on-dark:hover { background-color: var(--bone); border-color: var(--bone); color: var(--deep); }
/* ===========================================================================
Header — byte-identical across every page (consistency check + booking CTA)
=========================================================================== */
.site-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem 2rem;
padding: 1.25rem var(--edge); border-bottom: var(--hair);
background-color: var(--bone);
}
.wordmark { display: grid; gap: 0.125rem; text-decoration: none; }
.wordmark b { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem;
line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.wordmark span { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.site-head nav { margin-left: auto; }
.site-head nav ul { display: flex; flex-wrap: wrap; align-items: center;
gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-head nav a { color: var(--ink); text-decoration: none; font-weight: 600;
font-size: 1rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-head nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-head .book { background-color: var(--accent); color: var(--bone);
border: 1.5px solid var(--accent); border-radius: 1px;
padding: 0.5rem 1.125rem; font-weight: 700; letter-spacing: 0.02em; }
.site-head .book:hover { background-color: var(--ink); border-color: var(--ink);
color: var(--bone); }
/* ===========================================================================
Sections & rhythm
=========================================================================== */
main { display: block; }
section { padding: 4.5rem var(--edge); border-bottom: var(--hair); }
.tight { padding-top: 3rem; padding-bottom: 3rem; }
/* editorial section label: roman/index numeral + rule */
.eyebrow { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 2rem;
border-top: 2px solid var(--accent); padding-top: 1rem; max-width: none; }
.eyebrow .num { font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: 1.75rem; color: var(--accent); line-height: 1; }
.eyebrow .lbl { font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.22em; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
/* asymmetric masthead — never a centered hero */
.masthead { display: grid; grid-template-columns: 5fr 4fr; gap: 3rem; align-items: stretch; }
.masthead-lead { min-width: 0; align-self: center; }
.masthead-lead h1 { font-size: 3.5rem; }
.masthead-lead .lede { margin-top: 1.5rem; }
.masthead-lead .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.masthead-aside { min-width: 0; }
/* lede paragraph drop cap on key pages */
.opener::first-letter { font-family: var(--font-display); font-weight: 600;
font-size: 4.5rem; line-height: 0.7; float: left; padding: 0.5rem 0.75rem 0 0;
color: var(--accent); }
/* framed photo PLATE — reserved for the client's own photography.
Pure CSS, no ![]()
, so nothing breaks; labelled as a reserved plate. */
.plate { position: relative; background-color: var(--bone-warm);
border: var(--hair); padding: 0.75rem; height: 100%; min-height: 18rem;
display: flex; }
.plate-inner { flex: 1; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
display: flex; flex-direction: column; justify-content: flex-end;
padding: 1.5rem; gap: 0.25rem; background-color: var(--bone-warm); }
.plate-tag { font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.18em; font-size: 0.8125rem; font-weight: 700; color: var(--accent);
background-color: var(--bone-warm); margin: 0; }
.plate-cap { font-family: var(--font-display); font-style: italic; font-size: 1.375rem;
line-height: 1.25; color: var(--muted); background-color: var(--bone-warm);
margin: 0; max-width: none; }
.plate-tall { min-height: 26rem; }
/* facts list (masthead aside / contact) */
.facts { margin: 0; border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.facts dt { font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-top: 1.25rem; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.375rem;
color: var(--ink); line-height: 1.3; }
/* quiet inset band */
.inset { background-color: var(--bone-warm); }
/* reflowing service list — auto-fit, unclassed children (no card tell) */
.reflow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
.reflow-wide { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.reflow li { padding: 1.75rem; border: var(--hair); border-top: 3px solid var(--accent);
background-color: color-mix(in srgb, var(--bone) 40%, #ffffff); }
.reflow li p { margin-bottom: 0; }
.reflow .price { display: block; margin-top: 0.75rem; font-family: var(--font-display);
font-style: italic; font-size: 1.125rem; color: var(--muted); }
/* numbered category index (home) — unclassed children */
.paths { list-style: none; margin: 2rem 0 0; padding: 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; }
.paths li { padding: 2rem 1.75rem; border: var(--hair); margin: -0.5px;
background-color: var(--bone); display: grid; gap: 0.5rem; align-content: start; }
.paths li .idx { font-family: var(--font-display); font-style: italic; font-weight: 600;
font-size: 2.5rem; color: var(--accent); line-height: 0.9; }
.paths li p { margin-bottom: 0.75rem; }
.paths li a { font-weight: 700; }
/* two-column editorial split */
.split { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: start; }
.split-even { grid-template-columns: 1fr 1fr; }
.side-note { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.ticks { margin: 0; padding-left: 1.1rem; }
.ticks li { margin-bottom: 0.625rem; }
/* a careful, dignified note block (areola restoration, policies, pricing) */
.care { background-color: var(--bone-warm); border-left: 3px solid var(--accent);
padding: 1.5rem 1.75rem; max-width: var(--measure); }
.care h3 { margin-top: 0; }
.care p:last-child { margin-bottom: 0; }
/* pull quote / editorial line */
.pull { font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: 1.75rem; line-height: 1.35; color: var(--ink); max-width: 30rem;
border: none; margin: 0; }
.pull cite { display: block; margin-top: 1rem; font-family: var(--font-body);
font-style: normal; font-size: 0.8125rem; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
/* ===========================================================================
Inverted aubergine invitation band — self-contained color (cascade-safe)
=========================================================================== */
.invite { background-color: var(--deep); }
.invite h2 { color: var(--bone); background-color: var(--deep); }
.invite p { color: var(--bone); background-color: var(--deep); max-width: var(--measure); }
.invite .kicker { color: var(--rose); background-color: var(--deep); }
.invite a:not(.btn) { color: var(--rose); background-color: var(--deep); }
.invite .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
/* ===========================================================================
Contact — fields are unclassed styled via parent>child (no card tell)
=========================================================================== */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: start; }
.contact-form { display: grid; gap: 1.5rem; max-width: 34rem; }
.contact-form p { margin: 0; display: grid; gap: 0.5rem; max-width: none; }
.contact-form label { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.form-note { background-color: var(--bone-warm); border: var(--hair);
border-left: 3px solid var(--accent); padding: 0.875rem 1.125rem;
font-size: 1rem; color: var(--ink); max-width: none; }
input, select, textarea {
font: inherit; color: var(--ink); background-color: #ffffff;
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
border-radius: 1px; padding: 0.625rem 0.75rem; width: 100%;
}
.contact-aside { border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.contact-aside h2 { font-size: 1.375rem; }
/* ===========================================================================
Footer — self-contained color on the dark tone (cascade-safe)
=========================================================================== */
.site-foot { background-color: var(--deep-2); color: var(--bone); padding: 3rem var(--edge); border-bottom: none; }
.site-foot .foot-top { display: flex; flex-wrap: wrap; justify-content: space-between;
gap: 2rem; margin-bottom: 2rem; }
.site-foot h2 { color: var(--bone); background-color: var(--deep-2); font-size: 1.75rem; margin: 0 0 0.5rem; }
.site-foot p { color: var(--bone); background-color: var(--deep-2); max-width: none; margin: 0 0 0.5rem; }
.site-foot .foot-tag { color: var(--rose); background-color: var(--deep-2);
font-family: var(--font-body); font-size: 0.8125rem;
letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
.site-foot address { font-style: normal; color: var(--bone); background-color: var(--deep-2); }
.site-foot .foot-fine { color: var(--rose); background-color: var(--deep-2); font-size: 0.8125rem;
border-top: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
padding-top: 1.5rem; }
.site-foot .foot-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.site-foot .foot-nav a { color: var(--bone); background-color: var(--deep-2); text-decoration: none; font-weight: 600; }
.site-foot .foot-nav a:hover { color: var(--rose); background-color: var(--deep-2); }
/* ===========================================================================
Responsive
=========================================================================== */
@media (max-width: 860px) {
.masthead, .split, .split-even, .contact-grid { grid-template-columns: 1fr; }
.masthead-lead h1 { font-size: 2.5rem; }
section { padding-top: 3rem; padding-bottom: 3rem; }
.site-head { gap: 0.75rem 1.25rem; }
.site-head nav { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; scroll-behavior: auto; }
}