/* ==========================================================================
Faye Young — Makeup Artistry
Shared stylesheet. Flat, single-class selectors throughout so section
padding and component rules never fight each other on specificity.
========================================================================== */
/* Fonts are loaded via in each page's
now, not @import, so the font fetch runs parallel to the HTML parse
instead of waiting behind this stylesheet. */
/* -- Tokens --------------------------------------------------------------- */
:root {
--porcelain: #FCFBF8;
--porcelain-rgb: 252, 251, 248;
--alabaster: #F3EEE6;
--ink: #2B2620;
--ink-rgb: 43, 38, 32;
--ink-soft: #6B6258;
--ink-muted-on-dark: #C9C1B4;
--gold: #B0893C;
--gold-light: #DFC583;
--gold-light-rgb: 223, 197, 131;
--gold-deep: #8A6822;
--gold-deep-rgb: 138, 104, 34;
--blush: #E4CFC6;
--hairline: #E6DECD;
--white: #FFFFFF;
--error: #B0453C;
--error-text: #8A2F27;
--footer-link: #D8D2C6;
--footer-muted: #A79E90;
/* Decorative gold only (hairlines, dividers, the logo). Never behind text:
large stretches of this gradient fall well under 4.5:1 against porcelain. */
--gold-grad: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
/* Interactive gold: both ends clear 4.5:1 against --porcelain text. */
--gold-btn-deep: #6E5319;
--gold-btn: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold-btn-deep) 100%);
/* Slightly darker than --gold-deep: keeps small tracked-cap text at 4.5:1+
against both --porcelain and --alabaster, where --gold-deep alone reads
as only 4.45:1 on --alabaster. */
--gold-text: #7E5D1B;
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4.5rem;
--space-7: 6.5rem;
--space-8: 9rem;
--container: 1280px;
--container-narrow: 760px;
--radius: 2px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* -- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
html, body {
background: var(--porcelain);
color: var(--ink);
}
body {
font-family: var(--font-body);
font-weight: 300;
font-size: 1rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--gold-deep);
outline-offset: 3px;
}
/* --gold-deep only clears 3:1 non-text contrast against light surfaces
(4.97:1 on porcelain, 4.45:1 on alabaster). On ink, it's 2.92:1, so
anything focusable on a dark surface needs the lighter gold instead. */
.surface-ink :focus-visible {
outline-color: var(--gold-light);
}
/* -- Type ------------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.15;
color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.1rem; }
em { font-style: italic; color: var(--gold-text); }
.eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: var(--space-2);
}
.lede {
font-size: 1.15rem;
color: var(--ink-soft);
max-width: 42ch;
}
/* -- Layout ----------------------------------------------------------------*/
.wrap {
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 64px);
}
.wrap-narrow {
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 64px);
}
.section {
padding-block: var(--space-7);
}
.section-tight { padding-block: var(--space-6); }
.surface-alabaster { background: var(--alabaster); }
.surface-ink { background: var(--ink); color: var(--porcelain); }
.surface-ink h1, .surface-ink h2, .surface-ink h3 { color: var(--porcelain); }
.surface-ink .eyebrow { color: var(--gold-light); }
.surface-ink .lede { color: var(--ink-muted-on-dark); }
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-block: var(--space-5);
color: var(--gold);
}
.divider::before, .divider::after {
content: "";
height: 1px;
width: 64px;
background: var(--hairline);
}
.divider img { width: 28px; height: 28px; opacity: 0.85; }
.grid {
display: grid;
gap: var(--space-4);
}
@media (min-width: 720px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.text-center { text-align: center; }
/* -- Header / nav ---------------------------------------------------------*/
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(var(--porcelain-rgb), 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 84px;
gap: 20px;
}
/* Anchors the logo left and pushes nav + CTA + toggle into one flush-right
cluster, instead of justify-content:space-between spreading every child
apart evenly (which floated the nav in the middle and pinned the CTA as
a flush-edge slab). flex-shrink:0 keeps the logo from being silently
squeezed to nothing if the row ever runs short on room. */
.brand {
margin-right: auto;
flex-shrink: 0;
}
.brand img {
height: 34px;
width: auto;
display: block;
}
/* Seven full-length links plus the logo and CTA need real room: measured
against this site's actual copy, that room starts at 1140px, not the
800/900px breakpoint a shorter nav could get away with. Below it, the
hamburger drawer carries the nav instead of squeezing or wrapping it. */
@media (min-width: 1140px) {
.brand img { height: 44px; }
}
.nav-primary {
display: none;
}
@media (min-width: 1140px) {
.nav-primary {
display: flex;
align-items: center;
gap: 20px;
}
.nav-primary a {
display: inline-flex;
align-items: center;
min-height: 44px;
white-space: nowrap;
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
padding-inline: var(--space-1);
border-bottom: 1px solid transparent;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"] {
color: var(--ink);
border-color: var(--gold);
}
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: 44px;
min-width: 44px;
background: none;
border: 1px solid var(--hairline);
padding-inline: var(--space-2);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--porcelain);
}
@media (min-width: 1140px) {
.nav-toggle { display: none; }
}
.nav-mobile {
display: none;
flex-direction: column;
border-top: 1px solid var(--hairline);
background: var(--porcelain);
}
.nav-mobile.is-open { display: flex; }
/* Same specificity as the .nav-mobile.is-open rule above (0,2,0), but
declared later in the cascade and gated by the media query, so no
!important is needed: at >=1140px this wins on source order; below it
the media query simply doesn't apply and the rule above governs as normal. */
@media (min-width: 1140px) {
.nav-mobile,
.nav-mobile.is-open { display: none; }
}
.nav-mobile a {
display: flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--hairline);
font-size: 0.95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Overrides .nav-mobile a: two classes + element beats one class + element,
so this wins regardless of source order (unlike .nav-cta vs .btn below). */
.nav-mobile a.nav-drawer-cta {
display: block;
margin: 0 var(--space-3) 18px;
padding: 0.95rem 2rem;
border: 1px solid transparent;
border-radius: 0;
text-align: center;
font-size: 0.8rem;
letter-spacing: 0.22em;
}
/* .nav-cta and .btn are both single-class selectors, so without this
descendant selector the later .btn rule (display:inline-flex) would win
on source order alone and the button would render on mobile regardless
of this being set to none. Scoping to .site-header raises specificity
above .btn's so the mobile hide reliably wins. */
@media (max-width: 1139px) {
.site-header .nav-cta { display: none; }
}
@media (min-width: 1140px) {
.site-header .nav-cta {
display: inline-flex;
white-space: nowrap;
padding: 13px 24px;
font-size: 0.75rem;
}
}
/* The persistent header CTA always uses the short label: at every desktop
width, the seven-link nav leaves no room for each page's longer,
page-specific CTA copy without the button forcing an overflow. The
fuller copy still appears in the mobile drawer and in each page's own
CTA band further down, where width isn't constrained. */
.nav-cta .cta-label-full { display: none; }
.nav-cta .cta-label-short { display: inline; }
/* -- Buttons ---------------------------------------------------------------*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: 0.95rem 2rem;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-primary {
background: var(--gold-btn);
color: var(--porcelain);
}
.btn-primary:hover { box-shadow: 0 8px 24px -8px rgba(var(--gold-deep-rgb), 0.55); }
.btn-secondary {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
.btn-secondary:hover { border-color: var(--gold-text); color: var(--gold-text); }
.btn-on-ink {
border-color: var(--gold-light);
color: var(--porcelain);
}
.btn-on-ink:hover { background: rgba(var(--gold-light-rgb), 0.12); }
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* -- Hero ------------------------------------------------------------------*/
.hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: 82svh;
overflow: hidden;
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Reusable scrim for any section with text over full-bleed media: media at
z-index 0, this at z-index 1, content at z-index 2. Add a sibling
after the media layer to
carry the same overlaid-text contrast fix into other sections. */
.media-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(var(--ink-rgb), .12) 0%,
rgba(var(--ink-rgb), .30) 48%,
rgba(var(--ink-rgb), .72) 100%);
}
.hero .media-scrim {
background:
/* Left-side contrast behind the text */
linear-gradient(
90deg,
rgba(var(--ink-rgb), 0.66) 0%,
rgba(var(--ink-rgb), 0.46) 34%,
rgba(var(--ink-rgb), 0.14) 60%,
transparent 70%
),
/* Existing bottom-to-top scrim */
linear-gradient(
180deg,
rgba(var(--ink-rgb), 0.12) 0%,
rgba(var(--ink-rgb), 0.30) 48%,
rgba(var(--ink-rgb), 0.72) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0;
padding: 0 32px 76px clamp(32px, 6vw, 88px);
color: var(--porcelain);
}
.hero-content .eyebrow { color: var(--gold-light); letter-spacing: 0.34em; margin: 0 0 22px; }
.hero-content h1 {
color: var(--white);
max-width: 18ch;
font-size: clamp(2.2rem, 4.6vw, 3.75rem);
line-height: 1.06;
margin: 0 0 26px;
text-wrap: balance;
}
.hero-content .lede {
color: var(--alabaster);
opacity: .96;
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
line-height: 1.65;
max-width: 46ch;
margin: 0 0 34px;
}
.hero-content .btn-row { margin-top: 0; gap: 16px; }
@media (max-width: 640px) {
.hero { min-height: 92svh; }
.hero-content { padding: 0 24px 40px clamp(24px, 6vw, 32px); }
.hero-content .btn-row { flex-direction: column; gap: var(--space-2); }
.hero-content .btn-row .btn { width: 100%; text-align: center; }
}
/* -- Range strip -------------------------------------------------------- */
.range-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
padding-block: var(--space-4);
border-bottom: 1px solid var(--hairline);
}
.range-strip a {
font-size: 0.82rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-soft);
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.range-strip a:hover { color: var(--gold-text); border-color: var(--gold); }
/* -- Interior page header ---------------------------------------------------*/
.page-header {
padding-block: var(--space-7) var(--space-6);
border-bottom: 1px solid var(--hairline);
}
.page-header .lede { margin-top: var(--space-2); }
/* -- Feature / reason cards ------------------------------------------------*/
.reason-card {
padding: var(--space-4);
background: var(--porcelain);
border: 1px solid var(--hairline);
}
.reason-card .index {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--gold-text);
display: block;
margin-bottom: var(--space-2);
}
.reason-card h3 { margin-bottom: var(--space-1); }
.reason-card p { color: var(--ink-soft); }
/* -- Process steps ----------------------------------------------------------*/
.process-list {
display: grid;
gap: var(--space-4);
}
@media (min-width: 720px) {
.process-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.process-step {
position: relative;
padding-top: var(--space-4);
border-top: 1px solid var(--hairline);
}
.process-step .step-number {
position: absolute;
top: -0.9rem;
left: 0;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--gold-text);
background: var(--porcelain);
padding-right: var(--space-1);
}
.process-step h3 { margin-bottom: var(--space-1); font-size: 1.2rem; }
.process-step p { color: var(--ink-soft); font-size: 0.95rem; }
/* -- Gallery teaser / grid --------------------------------------------------*/
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
@media (min-width: 720px) {
.gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
.gallery-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.gallery-item {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--alabaster);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item.ratio-wide { aspect-ratio: 16 / 9; }
.gallery-item button {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
/* -- Portfolio filter bar ---------------------------------------------------*/
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.filter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
background: none;
border: 1px solid var(--hairline);
padding-inline: 1.4rem;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
cursor: pointer;
transition: all 0.2s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--ink); }
.filter-btn[aria-pressed="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--porcelain);
}
.portfolio-item[hidden] { display: none; }
/* -- Lightbox ----------------------------------------------------------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
background: rgba(var(--ink-rgb), 0.92);
padding: var(--space-3);
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
max-width: min(92vw, 1100px);
max-height: 88vh;
}
.lightbox-figure img {
max-height: 80vh;
width: auto;
margin-inline: auto;
}
.lightbox-caption {
color: var(--porcelain);
text-align: center;
margin-top: var(--space-2);
font-size: 0.85rem;
letter-spacing: 0.08em;
}
.lightbox-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
background: none;
border: 1px solid var(--gold-light);
color: var(--porcelain);
width: 44px;
height: 44px;
cursor: pointer;
font-size: 1.1rem;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: 1px solid var(--gold-light);
color: var(--porcelain);
width: 48px;
height: 48px;
cursor: pointer;
font-size: 1.2rem;
}
.lightbox-prev { left: var(--space-3); }
.lightbox-next { right: var(--space-3); }
/* -- CTA band ---------------------------------------------------------------*/
.cta-band {
text-align: center;
padding-block: var(--space-6);
}
.cta-band h2 { margin-bottom: var(--space-1); }
.cta-band .lede { margin-inline: auto; margin-bottom: var(--space-4); }
/* -- Testimonial cards ------------------------------------------------------*/
.testimonial-card {
padding: var(--space-4);
background: var(--alabaster);
border-left: 2px solid var(--gold);
}
.testimonial-card blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
line-height: 1.5;
color: var(--ink);
}
.testimonial-card cite {
display: block;
margin-top: var(--space-2);
font-family: var(--font-body);
font-style: normal;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* -- Accordion (FAQ) ---------------------------------------------------- */
.accordion-item {
border-bottom: 1px solid var(--hairline);
}
.accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
width: 100%;
padding-block: var(--space-3);
background: none;
border: 0;
text-align: left;
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--ink);
cursor: pointer;
}
.accordion-trigger .plus {
flex-shrink: 0;
font-size: 1.4rem;
color: var(--gold);
transition: transform 0.25s var(--ease);
}
.accordion-trigger[aria-expanded="true"] .plus { transform: rotate(45deg); }
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.3s var(--ease);
}
.accordion-panel.is-open { grid-template-rows: 1fr; }
.accordion-panel p {
min-height: 0;
color: var(--ink-soft);
padding-bottom: var(--space-3);
max-width: 62ch;
}
/* -- Forms ---------------------------------------------------------------- */
.form-grid {
display: grid;
gap: var(--space-3);
}
@media (min-width: 720px) {
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
.field input, .field select, .field textarea {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--hairline);
background: var(--porcelain);
color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--gold);
}
.field-full { grid-column: 1 / -1; }
.form-status {
margin-top: var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--hairline);
font-size: 0.92rem;
}
.form-status[hidden] { display: none; }
.form-status.form-success { border-color: var(--gold); color: var(--gold-text); }
.form-status.form-error { border-color: var(--error); color: var(--error-text); }
/* -- Contact details -------------------------------------------------------*/
.contact-details { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-details dt {
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
}
.contact-details dd { font-family: var(--font-display); font-size: 1.2rem; }
/* -- Footer -----------------------------------------------------------------*/
.site-footer {
padding-block: var(--space-6) var(--space-4);
}
.footer-top {
display: grid;
gap: var(--space-5);
}
@media (min-width: 900px) {
.footer-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.footer-brand img {
width: min(340px, max(240px, 72vw));
height: auto;
display: block;
margin-bottom: var(--space-2);
}
.footer-brand p { color: var(--ink-muted-on-dark); max-width: 32ch; }
.footer-heading {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: var(--space-2);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-links a { color: var(--footer-link); transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom {
margin-top: var(--space-6);
padding-top: var(--space-3);
border-top: 1px solid rgba(var(--gold-light-rgb), 0.22);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2);
color: var(--footer-muted);
font-size: 0.82rem;
}
/* -- Utility ---------------------------------------------------------------*/
.skip-link {
position: absolute;
left: var(--space-2);
top: -60px;
background: var(--ink);
color: var(--porcelain);
padding: var(--space-1) var(--space-2);
z-index: 200;
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-2); }
/* -- One-booking commitment ---------------------------------------------- */
.booking-promise {
padding: clamp(3.5rem, 7vw, 5.5rem) clamp(20px, 5vw, 64px);
background: var(--porcelain);
border-top: 1px solid var(--hairline);
text-align: center;
}
.booking-promise .eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
max-width: 360px;
margin: 0 auto var(--space-2);
}
/* Decorative rules beside “Our commitment” */
.booking-promise .eyebrow::before,
.booking-promise .eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: var(--hairline);
}
.booking-promise h2 {
max-width: 18ch;
margin: 0 auto var(--space-2);
font-size: clamp(2rem, 3.6vw, 2.75rem);
text-wrap: balance;
}
.booking-promise p {
max-width: 64ch;
margin: 0 auto;
color: var(--ink-soft);
font-size: clamp(1rem, 1.3vw, 1.1rem);
line-height: 1.7;
text-wrap: pretty;
}
@media (max-width: 640px) {
.booking-promise {
padding-block: var(--space-5);
}
.booking-promise .eyebrow {
max-width: 280px;
}
.booking-promise .eyebrow::before,
.booking-promise .eyebrow::after {
flex-basis: 32px;
}
}
/* -- Selected stage credits ---------------------------------------------- */
.stage-credits-heading {
max-width: 720px;
margin-inline: auto;
}
.stage-credits-heading h2 {
margin: 0;
text-wrap: balance;
}
.stage-credits-heading .lede {
max-width: 52ch;
margin: var(--space-2) auto 0;
color: var(--ink-soft);
text-wrap: pretty;
}
.stage-credits-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
max-width: 1080px;
margin: var(--space-5) auto 0;
padding: 0;
list-style: none;
}
.stage-credit-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 150px;
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--porcelain);
border: 1px solid var(--hairline);
text-align: left;
transition:
border-color 0.2s var(--ease),
transform 0.2s var(--ease),
box-shadow 0.2s var(--ease);
}
.stage-credit-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 12px 30px -24px rgba(var(--ink-rgb), 0.45);
}
.stage-credit-card h3 {
margin: 0 0 var(--space-1);
font-size: clamp(1.3rem, 2vw, 1.65rem);
line-height: 1.2;
text-wrap: balance;
overflow-wrap: anywhere;
}
.stage-credit-card p {
margin: 0;
color: var(--gold-text);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Two columns on tablets */
@media (min-width: 640px) {
.stage-credits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Three columns on desktop */
@media (min-width: 960px) {
.stage-credits-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* -- Form field guidance and validation ---------------------------------- */
.field-hint {
display: block;
margin-top: 0.2rem;
color: var(--ink-soft);
font-size: 0.78rem;
font-weight: 300;
line-height: 1.5;
}
.field input::placeholder {
color: var(--ink-soft);
opacity: 0.65;
}
/* Only show validation colors after a submission attempt */
#enquiry-form.was-validated input:invalid,
#enquiry-form.was-validated select:invalid,
#enquiry-form.was-validated textarea:invalid {
border-color: var(--error);
}
#enquiry-form.was-validated input:valid,
#enquiry-form.was-validated select:valid,
#enquiry-form.was-validated textarea:valid {
border-color: var(--hairline);
}
/* Improve the native date field */
.field input[type="date"] {
min-height: 50px;
cursor: pointer;
color: var(--ink);
color-scheme: light;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
width: 20px;
height: 20px;
padding: 6px;
border-radius: var(--radius);
cursor: pointer;
opacity: 0.7;
transition:
opacity 0.2s var(--ease),
background 0.2s var(--ease);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator {
background: var(--alabaster);
opacity: 1;
}
.field input[type="date"]:focus::-webkit-calendar-picker-indicator {
opacity: 1;
}
/* -- Bridal inclusions and packages -------------------------------------- */
.bridal-detail-list {
display: flex;
flex-direction: column;
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.bridal-detail-list li {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: var(--space-2);
color: var(--ink-soft);
line-height: 1.65;
}
/* Space and divider between items */
.bridal-detail-list li:not(:last-child) {
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--hairline);
}
.bridal-detail-list li + li {
padding-top: var(--space-2);
}
/* Small gold diamond bullet */
.bridal-detail-list li::before {
content: "";
width: 7px;
height: 7px;
margin-top: 0.62em;
background: var(--gold);
transform: rotate(45deg);
box-shadow:
0 0 0 4px rgba(var(--gold-deep-rgb), 0.08);
}
.bridal-detail-list strong {
display: block;
margin-bottom: 0.2rem;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
}
.bridal-detail-list span {
display: block;
max-width: 55ch;
}
/* Slightly more room for the packages list */
.bridal-package-list {
gap: 0;
max-width: 68ch;
}
.bridal-package-price {
margin-top: var(--space-4);
}
/* Keep the list compact on small screens */
@media (max-width: 640px) {
.bridal-detail-list li {
grid-template-columns: 8px minmax(0, 1fr);
gap: 0.85rem;
}
.bridal-detail-list li::before {
width: 6px;
height: 6px;
}
.bridal-detail-list strong {
font-size: 1.12rem;
}
}