/* =========================================================================
Anisa Bridal — global stylesheet
Sections:
1. Fonts
2. Tokens
3. Reset & base
4. Typography
5. Layout helpers
6. Buttons
7. Placeholders
8. Header (partial)
9. Footer (partial)
10. Page-shared blocks (breadcrumbs, page-title, coming-soon)
11. Home sections
12. Internal pages
13. Responsive
14. A11y & polish
15. Collection detail pages (dresses grid)
========================================================================= */
/* 1. Fonts ----------------------------------------------------------------- */
/* Michroma + Jost are loaded via Google Fonts in each page .
Jost stands in for FUTURA-PT (Paratype, commercial) — closest free analog. */
/* 2. Tokens ---------------------------------------------------------------- */
:root {
--color-bg: #ffffff;
--color-bg-soft: rgba(217, 217, 217, 0.25);
--color-text: #000000;
--color-text-inv: #ffffff;
--color-line: rgba(0, 0, 0, 0.1);
--color-muted: rgba(0, 0, 0, 0.55);
--font-display: 'Michroma', sans-serif;
--font-ui: 'Jost', sans-serif;
--container-max: 1400px;
--container-pad: 32px;
--header-announce-h: 52px;
--header-nav-h: 82px;
--header-total-h: 134px;
}
/* 3. Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
font-family: var(--font-ui);
font-weight: 300;
color: var(--color-text);
background: var(--color-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select {
font: inherit;
color: inherit;
}
/* 4. Typography ------------------------------------------------------------ */
.h-display {
font-family: var(--font-display);
font-weight: 400;
}
.h-hero {
font-family: var(--font-display);
font-weight: 400;
font-size: 51px;
line-height: 1.1;
margin: 0;
}
.h-section {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.05em;
margin: 0;
}
.h-section--light { font-weight: 300; }
.h-section--spaced { letter-spacing: 4.6px; }
.label-eyebrow {
font-family: var(--font-display);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.text-ui { font-family: var(--font-ui); }
.text-muted { color: var(--color-muted); }
/* 5. Layout helpers -------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-inline: var(--container-pad);
}
.section { padding-block: 80px; }
.section--soft { background: var(--color-bg-soft); }
.stack > * + * { margin-top: var(--stack-gap, 16px); }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* 6. Buttons --------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
padding: 14px 32px;
border: 1px solid var(--color-text);
background: transparent;
color: var(--color-text);
transition: background-color .2s ease, color .2s ease;
cursor: pointer;
}
.btn:hover,
.btn:focus-visible {
background: var(--color-text);
color: var(--color-text-inv);
}
.btn--inverse {
border-color: var(--color-text-inv);
color: var(--color-text-inv);
}
.btn--inverse:hover,
.btn--inverse:focus-visible {
background: var(--color-text-inv);
color: var(--color-text);
}
.btn--sm { padding: 10px 22px; }
/* 7. Placeholders ---------------------------------------------------------- */
.placeholder {
background: linear-gradient(135deg, #e8e6e2 0%, #d5d2cc 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.3);
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
width: 100%;
}
.placeholder::before { content: attr(data-label); }
/* 8. Header (partial) ----------------------------------------------------- */
/* The wrapper div is the sticky element so the containing block is
(full document height), not the header's own height. */
#site-header {
position: sticky;
top: 0;
z-index: 100;
}
.site-header {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-line);
}
.announce-bar {
height: var(--header-announce-h);
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
}
.site-nav {
height: var(--header-nav-h);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding-inline: var(--container-pad);
/* Anchor the absolutely-positioned search overlay (inset: 0) to the
nav row, so it covers the row exactly and the dropdown lands just
under it. */
position: relative;
}
.site-nav__logo img,
.site-nav__logo svg { height: 42px; width: auto; }
.site-nav__menu {
display: flex;
gap: 36px;
justify-content: center;
}
.site-nav__menu a {
font-family: var(--font-ui);
font-size: 14.6px;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--color-text);
padding: 6px 0;
position: relative;
}
.site-nav__menu a:hover { opacity: .65; }
.site-nav__menu a[aria-current="page"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--color-text);
}
.site-nav__icons {
display: flex;
align-items: center;
gap: 22px;
justify-content: flex-end;
}
.site-nav__icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.site-nav__icon svg { width: 22px; height: 22px; }
.site-nav__badge {
position: absolute;
top: -4px; right: -8px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--color-text);
color: var(--color-text-inv);
font-family: var(--font-ui);
font-size: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: default;
}
/* [hidden] needs an explicit override because the class above sets
display: inline-flex, which beats the UA stylesheet on specificity. */
.site-nav__badge[hidden] { display: none; }
/* Mobile menu toggle */
.site-nav__burger {
display: none;
width: 32px; height: 32px;
align-items: center;
justify-content: center;
}
.site-nav__burger span {
display: block;
width: 20px; height: 1px;
background: var(--color-text);
position: relative;
}
.site-nav__burger span::before,
.site-nav__burger span::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: var(--color-text);
}
.site-nav__burger span::before { top: -6px; }
.site-nav__burger span::after { top: 6px; }
.mobile-menu {
position: fixed;
inset: 0;
background: #fff;
z-index: 200;
display: none;
flex-direction: column;
padding: 24px var(--container-pad);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
align-self: flex-end;
font-size: 24px;
font-family: var(--font-ui);
padding: 8px;
}
.mobile-menu__list {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 24px;
}
.mobile-menu__list a {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 300;
letter-spacing: 0.04em;
}
/* 9. Footer (partial) ----------------------------------------------------- */
.site-footer {
background: #fff;
border-top: 1px solid var(--color-line);
margin-top: 80px;
}
.site-footer__main {
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
padding: 72px var(--container-pad) 56px;
max-width: var(--container-max);
margin: 0 auto;
}
.sitemap { justify-self: end; }
/* Footer contact block — replaces the old newsletter signup. Mirrors the
contact-page info column (heading + dl + socials); the contact page now
only carries the form + map. */
.footer-contact__heading {
font-family: var(--font-ui);
font-weight: 600;
font-size: 22px;
line-height: 1.25;
margin: 0 0 24px;
}
.footer-contact__list {
display: flex;
flex-direction: column;
gap: 14px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
margin: 0;
max-width: 440px;
}
.footer-contact__list dt {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 2px;
}
.footer-contact__list dd { margin: 0; }
.footer-contact__list a:hover { text-decoration: underline; }
.footer-contact__socials { margin-top: 28px; }
.socials {
display: flex;
gap: 14px;
margin-top: 28px;
}
.socials a {
width: 36px; height: 36px;
border: 1px solid var(--color-text);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.socials a:hover { background: var(--color-text); color: var(--color-text-inv); }
.socials svg { width: 16px; height: 16px; }
.sitemap__title {
font-family: var(--font-ui);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.04em;
margin: 0 0 24px;
}
.sitemap__list {
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
}
.sitemap__list a:hover { opacity: .65; }
.sitemap__list .sitemap__cta {
margin-top: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-footer__bottom {
border-top: 1px solid var(--color-line);
padding: 18px var(--container-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
max-width: var(--container-max);
margin: 0 auto;
min-height: 55px;
}
.site-footer__bottom img,
.site-footer__bottom svg { height: 95px; width: auto; }
.site-footer__wordmark {
font-family: var(--font-display);
font-size: 15px;
letter-spacing: 0.3em;
}
.site-footer__legal {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 40px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
color: var(--color-muted);
}
.site-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: 28px;
}
.site-footer__legal-links a:hover { color: var(--color-text); }
/* 10. Page-shared blocks --------------------------------------------------- */
.breadcrumbs {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 300;
color: var(--color-muted);
padding: 32px 0 18px;
}
.breadcrumbs a:hover { color: var(--color-text); }
.page-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.05em;
margin: 0 0 24px;
}
.coming-soon {
font-family: var(--font-ui);
font-size: 14px;
color: var(--color-muted);
padding: 80px 0 160px;
}
/* 11. Home sections -------------------------------------------------------- */
/* 11.1 Hero — full-bleed background image, content overlays on the right */
.home-hero {
position: relative;
min-height: calc(100vh - var(--header-total-h));
background: url('../images/new-hero.webp') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5%;
}
.home-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 540px;
padding: 32px;
}
.home-hero__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 51px;
line-height: 1.1;
margin: 0;
letter-spacing: 0.01em;
}
.home-hero__subtitle {
font-family: var(--font-ui);
font-weight: 400;
font-size: 16px;
margin: 24px 0 0;
color: var(--color-muted);
}
.home-hero__cta { margin-top: 40px; }
/* Inline hero image — only used on mobile (desktop uses background-image). */
.home-hero__media { display: none; }
.hero-badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
width: 180px;
height: 180px;
z-index: 5;
}
.hero-badge__ring {
width: 100%;
height: 100%;
animation: hero-badge-spin 18s linear infinite;
}
.hero-badge__text {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.18em;
fill: var(--color-text);
}
.hero-badge__center {
position: absolute;
top: 50%; left: 50%;
width: 54px; height: 54px;
border-radius: 50%;
background: var(--color-text);
color: var(--color-text-inv);
display: inline-flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
transition: background-color .2s ease;
}
.hero-badge__center svg {
width: 18px; height: 18px;
transition: transform .35s ease;
}
.hero-badge__center:hover svg,
.hero-badge__center:focus-visible svg {
transform: rotate(45deg);
}
@keyframes hero-badge-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hero-badge__ring { animation: none; }
}
/* 11.2 2025 Collection slider */
.home-slider {
padding-block: 100px;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr) minmax(180px, 1fr);
gap: 56px;
align-items: center;
}
.home-slider__left { display: flex; flex-direction: column; gap: 24px; }
.home-slider__eyebrow {
font-family: var(--font-display);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.home-slider__title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 300;
letter-spacing: 0.12em;
margin: 0;
line-height: 1.15;
}
.home-slider__desc {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--color-muted);
margin: 0;
}
.home-slider__arrows {
display: flex;
gap: 14px;
}
.home-slider__arrow {
width: 46px; height: 46px;
border: 1px solid var(--color-text);
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s, color .2s;
}
.home-slider__arrow:hover,
.home-slider__arrow:focus-visible {
background: var(--color-text);
color: var(--color-text-inv);
}
.home-slider__arrow svg { width: 18px; height: 18px; }
.home-slider__media-wrap {
position: relative;
width: 100%;
aspect-ratio: 640 / 680;
overflow: hidden;
touch-action: pan-y;
}
.home-slider__media {
position: absolute;
inset: 0;
transition: transform .35s ease;
}
.home-slider__fav {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, transform .15s ease;
z-index: 2;
}
.home-slider__fav svg { width: 18px; height: 18px; }
.home-slider__fav:hover,
.home-slider__fav:focus-visible {
background: rgba(255, 255, 255, 0.95);
transform: scale(1.06);
}
.home-slider__fav.is-active {
background: var(--color-text);
color: var(--color-text-inv);
}
.home-slider__fav.is-active svg { fill: currentColor; }
/* Mobile swipe hint — hidden on desktop, shown when arrows collapse. */
.home-slider__hint {
display: none;
}
.home-slider__right {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.home-slider__see-all {
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
white-space: nowrap;
flex-shrink: 0;
}
.home-slider__see-all:hover { opacity: .65; }
.home-slider__dress-name {
font-family: var(--font-display);
font-size: 13px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-muted);
text-align: center;
}
@media (min-width: 1025px) {
.home-slider__right {
justify-content: center;
gap: 22px;
}
}
/* 11.3 Asymmetric collection block (La fleurs / La monde d'anisa) */
.home-collection {
padding-block: 96px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
min-height: 600px;
}
.home-collection__media {
width: 100%;
aspect-ratio: 4 / 5;
}
.home-collection__body {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 480px;
}
.home-collection--reverse .home-collection__media { order: 1; }
.home-collection__eyebrow {
font-family: var(--font-display);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
}
.home-collection__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
letter-spacing: 0.05em;
line-height: 1.2;
margin: 0;
}
.home-collection__lead {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 300;
line-height: 1.7;
margin: 0;
color: var(--color-text);
}
.home-collection__cta { align-self: flex-start; }
/* 11.4 All Collections carousel */
.home-all-collections {
padding-block: 96px;
}
.home-all-collections__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.home-all-collections__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.05em;
margin: 0;
}
.home-all-collections__row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
/* 11.5 Tailored block (full-bleed bg image + dark overlay, centered) */
.home-tailored {
position: relative;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('../images/bg-tailored.jpg') center/cover no-repeat;
color: var(--color-text-inv);
padding: 140px 0;
text-align: center;
}
.home-tailored__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
max-width: 760px;
margin: 0 auto;
}
.home-tailored__eyebrow {
font-family: var(--font-ui);
font-weight: 200;
font-size: 19px;
letter-spacing: 0.02em;
color: var(--color-text-inv);
}
.home-tailored__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 32px;
letter-spacing: 0.05em;
line-height: 1.3;
margin: 0;
color: var(--color-text-inv);
}
.home-tailored__cta { margin-top: 12px; }
/* 11.6 About preview (bg-about as section background, centered text) */
.home-about-preview {
background:
linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
url('../images/bg-about.webp') center/cover no-repeat;
padding: 120px 0;
}
.home-about-preview__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.home-about-preview__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: 0.05em;
margin: 0 0 24px;
}
.home-about-preview__lead {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 300;
line-height: 1.75;
margin: 0 auto 32px;
max-width: 540px;
}
/* 11.7 Magazine preview */
.home-magazine {
padding-block: 80px 96px;
}
.home-magazine__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
}
.home-magazine__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.05em;
margin: 0;
}
.home-magazine__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* 12. Internal pages ------------------------------------------------------- */
.page { padding-bottom: 80px; }
.page--centered { text-align: center; }
.page--centered .breadcrumbs { text-align: left; }
/* about — three asymmetric content blocks */
.about-page { padding-top: 180px; padding-bottom: 150px; }
.about-block {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 80px;
margin-bottom: 120px;
}
.about-block:last-child { margin-bottom: 0; }
.about-block--image-right .about-block__media { order: 1; }
.about-block__media {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.about-block__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.about-block__body {
position: relative;
max-width: 520px;
}
.about-block__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: 0.05em;
line-height: 1.3;
margin: 0 0 24px;
}
.about-block__lead {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
line-height: 1.7;
margin: 0;
color: var(--color-text);
}
/* Decorative wordmark behind block 2's text */
.about-block__decor {
position: absolute;
top: 50%;
left: -40px;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 400;
font-size: 460px;
line-height: 0.9;
color: rgba(0, 0, 0, 0.06);
pointer-events: none;
user-select: none;
z-index: 0;
}
.about-block__body > :not(.about-block__decor) { position: relative; z-index: 1; }
/* contact */
.contact {
padding: 80px 0;
text-align: center;
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
margin-top: 48px;
text-align: left;
/* No align-items: stretch is the default, so the map column matches
the form column's height on desktop. Mobile (1 col) restores an
aspect-ratio below so the map gets a sensible height of its own. */
}
.contact__media {
width: 100%;
}
.contact__media iframe {
width: 100%;
height: 100%;
min-height: 420px;
border: 0;
display: block;
}
/* contact form (middle column) */
.contact__form {
display: flex;
flex-direction: column;
gap: 18px;
}
.contact__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact__field label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
color: var(--color-text);
}
.contact__field input,
.contact__field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-line);
background: transparent;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
color: var(--color-text);
}
.contact__field textarea {
min-height: 120px;
resize: vertical;
line-height: 1.5;
}
.contact__field input::placeholder,
.contact__field textarea::placeholder {
color: rgba(0, 0, 0, 0.35);
font-weight: 300;
}
.contact__submit {
margin-top: 8px;
padding: 16px;
background: var(--color-text);
color: var(--color-text-inv);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.06em;
border: 0;
cursor: pointer;
transition: background-color .2s ease;
}
.contact__submit:hover,
.contact__submit:focus-visible { background: var(--color-muted); }
/* Confirmation modal — shown after the Netlify form redirect with ?sent=1.
Styled to match the site: thin black border, Michroma title, Jost body,
outline .btn close. main.js handles open/close + URL cleanup. */
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal__panel {
position: relative;
z-index: 1;
background: var(--color-bg);
border: 1px solid var(--color-text);
padding: 56px 40px 48px;
width: 100%;
max-width: 460px;
text-align: center;
}
.modal__close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text);
}
.modal__close svg { width: 16px; height: 16px; }
.modal__close:hover { opacity: .65; }
.modal__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.06em;
margin: 0 0 18px;
}
.modal__body {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
line-height: 1.65;
margin: 0 0 32px;
color: var(--color-muted);
}
@media (max-width: 480px) {
.modal__panel { padding: 48px 24px 36px; }
.modal__title { font-size: 22px; }
}
/* Lightbox — full-photo preview for dress cards + home slider */
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.88);
border: 0;
padding: 0;
cursor: zoom-out;
}
.lightbox__panel {
position: relative;
max-width: 92vw;
max-height: 92vh;
display: flex;
}
.lightbox__img {
display: block;
max-width: 92vw;
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
}
.lightbox__close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.lightbox__close:hover { background: #fff; }
.lightbox__close svg { width: 18px; height: 18px; }
[data-lightbox] { cursor: zoom-in; }
/* collections */
.collections-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 32px;
padding-bottom: 80px;
}
.collection-card {
display: flex;
flex-direction: column;
gap: 18px;
}
.collection-card__media {
aspect-ratio: 600 / 750;
width: 100%;
position: relative;
overflow: hidden;
}
.collection-card__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: 0.05em;
margin: 0;
}
.collection-card__year {
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
}
.collection-card__cta { align-self: flex-start; }
/* magazine */
.magazine-hero {
position: relative;
background: #fff;
text-align: center;
}
.magazine-hero .breadcrumbs { text-align: left; }
.magazine-hero__title {
font-family: var(--font-display);
font-weight: 300;
font-size: 32px;
letter-spacing: 0.05em;
margin: 0;
}
.magazine-section { padding-block: 32px 96px; }
.magazine-section__eyebrow {
font-family: var(--font-display);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.05em;
text-align: center;
margin: 0 0 48px;
}
.magazine-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.magazine-card { display: flex; flex-direction: column; gap: 14px; }
.magazine-card__media {
aspect-ratio: 300 / 360;
width: 100%;
}
.magazine-card__date {
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--color-muted);
}
.magazine-card__title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
.magazine-card__excerpt {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 300;
line-height: 1.6;
color: var(--color-muted);
margin: 0;
}
.magazine-card__link {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--color-line);
}
.magazine-card__link:hover {
text-decoration-color: var(--color-text);
}
.pagination {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 64px;
font-family: var(--font-ui);
font-size: 13px;
}
.pagination__item {
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
}
.pagination__item[aria-current="page"] {
border-color: var(--color-text);
}
.pagination__item:hover { border-color: var(--color-text); }
/* legal pages — Terms, Accessibility, Privacy. Long-form prose; constrained
width for readability and a list-style restore (the global reset zeroes
list-style + padding on ul/ol, which we want to revert here). */
.legal {
max-width: 760px;
margin: 0 auto;
font-family: var(--font-ui);
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: var(--color-text);
}
.legal .page-title { margin-bottom: 8px; }
.legal__updated {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 32px;
}
.legal__intro {
font-size: 16px;
color: var(--color-muted);
margin: 0 0 40px;
}
.legal h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 17px;
letter-spacing: 0.05em;
margin: 40px 0 14px;
}
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol {
list-style: revert;
padding-left: 22px;
margin: 0 0 14px;
}
.legal li { margin-bottom: 6px; }
.legal a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--color-line);
}
.legal a:hover { text-decoration-color: var(--color-text); }
/* 12.x Article (magazine post) ------------------------------------------- */
.article-page {
padding-block: 0 120px;
}
.article {
max-width: 760px;
margin: 0 auto;
}
.article-header {
text-align: center;
margin: 24px 0 56px;
}
.article-meta {
display: inline-block;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 28px;
}
.article-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 48px;
letter-spacing: 0.03em;
line-height: 1.15;
margin: 0 0 28px;
}
.article-lead {
font-family: var(--font-ui);
font-size: 17px;
font-weight: 300;
line-height: 1.7;
margin: 0 auto;
max-width: 620px;
}
.article-hero {
width: 100%;
margin-bottom: 64px;
overflow: hidden;
}
.article-hero > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.article-hero--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
aspect-ratio: 16 / 9;
}
.article-body {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 300;
line-height: 1.85;
}
.article-body > * + * { margin-top: 24px; }
.article-body p { margin: 0; }
.article-body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: 0.05em;
line-height: 1.3;
margin: 56px 0 8px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body em { font-style: italic; }
.article-list {
margin: 0;
padding-left: 22px;
list-style: disc;
}
.article-list li { margin: 0; }
.article-list li + li { margin-top: 10px; }
.article-date {
display: block;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 300;
color: var(--color-muted);
margin-top: 56px;
}
.article-cta {
margin-top: 48px;
padding-top: 56px;
border-top: 1px solid var(--color-line);
text-align: center;
}
.article-cta__text {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 300;
line-height: 1.75;
margin: 0 auto 28px;
max-width: 480px;
}
/* 13. Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
:root { --container-pad: 24px; }
.site-footer__main { grid-template-columns: 1fr; gap: 48px; }
/* Footer collapses to a single column on tablet+phone; align sitemap to the
same left edge as the contact block above it. */
.sitemap { justify-self: start; }
.contact__grid { gap: 40px; }
}
@media (max-width: 1024px) {
.home-slider { grid-template-columns: 1fr; gap: 24px; text-align: center; padding-block: 64px; }
.home-slider__left { align-items: center; }
/* Mobile uses native horizontal swipe instead of arrow buttons. */
.home-slider__arrows { display: none; }
.home-slider__hint {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto;
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
}
.home-slider__hint svg {
width: 14px;
height: 14px;
animation: home-slider-hint-left 1.6s ease-in-out infinite;
}
.home-slider__hint svg:last-child {
animation-name: home-slider-hint-right;
animation-delay: .8s;
}
}
@keyframes home-slider-hint-left {
0%, 100% { transform: translateX(0); opacity: .55; }
50% { transform: translateX(-3px); opacity: 1; }
}
@keyframes home-slider-hint-right {
0%, 100% { transform: translateX(0); opacity: .55; }
50% { transform: translateX(3px); opacity: 1; }
}
@media (max-width: 768px) {
/* Tighter sticky header. Switch the nav from grid to flex with the logo
absolutely centered — grid + auto-flow was leaving the logo pinned to
the cell top while burger/icons drifted to the cell bottom. */
:root {
--header-announce-h: 32px;
--header-nav-h: 48px;
--header-total-h: 80px;
}
.announce-bar { font-size: 12px; }
.site-nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
grid-template-columns: none;
gap: 12px;
}
.site-nav__menu { display: none; }
.site-nav__burger {
display: inline-flex;
width: 28px; height: 28px;
}
.site-nav__logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
}
.site-nav__logo img,
.site-nav__logo svg { height: 26px; }
.site-nav__icons { gap: 16px; }
.site-nav__icon svg { width: 20px; height: 20px; }
.h-hero { font-size: 32px; }
.contact__grid { grid-template-columns: 1fr; gap: 32px; }
.contact__media { aspect-ratio: 4 / 5; }
.contact__media iframe { min-height: 0; }
.collections-grid { grid-template-columns: 1fr; gap: 32px; }
/* Magazine + home-magazine: 1 column on mobile (was 2 cols until 540px). */
.magazine-grid,
.home-magazine__grid { grid-template-columns: 1fr; gap: 32px; }
/* Tighten the bottom whitespace stack on every page — .contact 80→24 bot,
.page 80→32, .site-footer 80→48. Pages used to chain 240px of empty
space below their last content block before the footer hit. */
.page { padding-bottom: 32px; }
.site-footer { margin-top: 48px; }
/* Hero — stacked layout: text → image → spinning badge overlapping image.
Scaled down vs. the earlier mobile pass to match the reference: title
36→32, image 3:4 → 4:5, padding 28/96 → 20/80, gap 28 → 20. Badge
bottom mirrors the new padding-bottom so it still lands on the image
edge. */
.home-hero {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background-image: none;
min-height: 0;
padding: 20px var(--container-pad) 80px;
text-align: center;
gap: 20px;
}
.home-hero__content {
width: 100%;
max-width: none;
padding: 0;
align-items: center;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.home-hero__title { font-size: 32px; }
.home-hero__subtitle { margin-top: 14px; font-size: 15px; }
.home-hero__cta { margin-top: 22px; }
/* Mobile hero uses hero-mobile.webp — a 700x970 crop of the source that
already contains just the bride, so no object-fit / wrapper trickery
needed. Display full container width, height follows the file's
natural aspect (~3:4). */
.home-hero__media {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
/* Re-show the spinning badge, anchored to the image bottom edge.
bottom = .home-hero padding-bottom so transform: translate(-50%, 50%)
(inherited from desktop) lands the badge center on the image's bottom. */
.hero-badge {
display: block;
bottom: 80px;
width: 140px;
height: 140px;
}
.hero-badge__center { width: 46px; height: 46px; }
.hero-badge__center svg { width: 16px; height: 16px; }
.home-collection { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; min-height: auto; }
.home-collection--reverse .home-collection__media { order: 0; }
.home-collection__title { font-size: 28px; }
.home-all-collections__row { grid-template-columns: 1fr; }
.home-tailored { padding: 80px 0; }
.home-tailored__title { font-size: 26px; }
.home-about-preview { padding: 80px 0; }
/* Trim the empty space above the breadcrumb on About (match Collections,
which has no top padding — only the 32px from .breadcrumbs itself) and
the padding below the map on Contact. */
.about-page { padding-top: 0; padding-bottom: 60px; }
.contact { padding-block: 32px 24px; }
.about-block {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 60px;
}
.about-block--image-right .about-block__media { order: 0; }
.about-block__decor { font-size: 200px; left: -16px; }
/* Footer bottom: drop both logos, collapse copyright + legal links into
one horizontal row sized to fit a narrow viewport. */
.site-footer__bottom > img,
.site-footer__wordmark { display: none; }
.site-footer__bottom {
padding: 14px var(--container-pad);
gap: 0;
min-height: 0;
flex-wrap: nowrap;
}
.site-footer__legal {
flex-wrap: nowrap;
gap: 10px;
font-size: 11px;
width: 100%;
justify-content: center;
}
.site-footer__legal-links {
flex-wrap: nowrap;
gap: 10px;
}
.article-page { padding-block: 0 80px; }
.article-title { font-size: 32px; letter-spacing: 0.02em; }
.article-lead { font-size: 15px; }
.article-body { font-size: 15px; line-height: 1.75; }
.article-body h2 { font-size: 20px; margin-top: 40px; }
.article-hero { margin-bottom: 40px; }
.article-hero--split { gap: 4px; aspect-ratio: 5 / 3; }
.article-cta { margin-top: 56px; padding-top: 40px; }
}
@media (max-width: 480px) {
:root { --container-pad: 18px; }
.hero-badge { width: 124px; height: 124px; }
}
@media (max-width: 375px) {
:root { --container-pad: 16px; }
.h-hero,
.home-hero__title { font-size: 30px; line-height: 1.15; }
.home-collection__title,
.home-slider__title,
.home-tailored__title,
.home-all-collections__title,
.home-magazine__title,
.page-title { font-size: 22px; letter-spacing: 0.04em; }
.breadcrumbs { padding: 24px 0 14px; font-size: 12px; }
.magazine-section__eyebrow { font-size: 20px; }
.home-tailored,
.home-about-preview { padding: 56px 0; }
.home-collection { padding-block: 48px; }
.home-slider { padding-block: 48px; }
.home-all-collections,
.home-magazine { padding-block: 56px; }
.home-all-collections__head,
.home-magazine__head { flex-direction: column; align-items: flex-start; gap: 12px; }
.sitemap__title,
.footer-contact__heading { font-size: 19px; }
.site-footer__main { padding: 48px var(--container-pad) 40px; gap: 40px; }
.site-footer__bottom img,
.site-footer__bottom svg { height: 70px; }
.hero-badge { width: 112px; height: 112px; }
.hero-badge__center { width: 40px; height: 40px; }
}
/* 11.8 Inline images — keep aspect of their placeholder slots */
img.home-slider__media,
img.home-collection__media,
.collection-card__media img,
.magazine-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
img.home-slider__media,
img.home-collection__media,
.collection-card__media img { object-position: center top; }
.collection-card__media,
.magazine-card__media { overflow: hidden; }
/* 14. A11y & polish -------------------------------------------------------- */
/* Global keyboard focus ring. :focus-visible only — pointer clicks stay clean. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 3px;
border-radius: 1px;
}
/* Buttons that already invert on hover need a tighter offset so the ring
sits flush against the chrome instead of floating outside the inversion. */
.btn:focus-visible { outline-offset: 4px; }
/* On dark backdrops the focus ring needs to flip white so it stays visible. */
.announce-bar :focus-visible,
.btn--inverse:focus-visible,
.home-tailored__media :focus-visible {
outline-color: var(--color-text-inv);
}
/* Header icon button hover (search; wishlist is non-interactive per spec) */
.site-nav__icon:hover { opacity: .65; }
button.site-nav__icon:focus-visible { outline-offset: 4px; }
/* Card image links: subtle press-down on hover. */
.collection-card__media,
.magazine-card__media {
transition: filter .25s ease, transform .35s ease;
}
.collection-card__media:hover,
.magazine-card__media:hover,
.collection-card__media:focus-visible,
.magazine-card__media:focus-visible {
filter: brightness(0.95);
}
/* Hero spinning badge — center disk hover */
.hero-badge__center { transition: background-color .2s ease; }
.hero-badge__center:hover { background: var(--color-muted); }
/* Slider arrow disabled-look hint at the first / last slide. */
.home-slider__arrow[aria-disabled="true"] {
opacity: .4;
pointer-events: none;
}
/* Reduce-motion: kill the page-level transitions too, not just the spinner. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 15. Collection detail pages -------------------------------------------- */
/* collection-.html templates. Body carries data-collection="";
main.js looks up COLLECTIONS_BY_ID, populates breadcrumb + header +
grid. Hash like #lf-001 highlights that card on load. */
.collection-detail__header {
text-align: center;
margin: 24px auto 56px;
max-width: 720px;
}
.collection-detail__eyebrow {
font-family: var(--font-display);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
}
.collection-detail__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
letter-spacing: 0.05em;
margin: 16px 0 16px;
}
.collection-detail__lead {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 300;
line-height: 1.7;
margin: 0;
color: var(--color-muted);
}
.dresses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 32px;
padding-bottom: 80px;
}
.dress-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.dress-card__media {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
overflow: hidden;
background: var(--color-bg-soft);
}
.dress-card__placeholder {
position: absolute;
inset: 0;
height: 100%;
font-size: 10px;
}
.dress-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.dress-card__name {
font-family: var(--font-display);
font-weight: 400;
font-size: 15px;
letter-spacing: 0.08em;
text-align: center;
margin: 0;
}
/* Heart toggle — always visible, semi-opaque circle pinned top-right.
Click behavior lands in Phase 4; here it's a passive visual. */
.dress-card__fav {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, transform .15s ease;
}
.dress-card__fav svg { width: 16px; height: 16px; }
.dress-card__fav:hover,
.dress-card__fav:focus-visible {
background: rgba(255, 255, 255, 0.95);
transform: scale(1.06);
}
.dress-card__fav.is-active {
background: var(--color-text);
color: var(--color-text-inv);
}
.dress-card__fav.is-active svg { fill: currentColor; }
/* Hash navigation highlight — thin ring fades out over ~2s. */
@keyframes dress-card-highlight {
0%, 70% { box-shadow: 0 0 0 2px var(--color-text), 0 0 0 8px rgba(0,0,0,0.06); }
100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.dress-card.is-highlighted .dress-card__media {
animation: dress-card-highlight 2.2s ease-out;
}
@media (max-width: 1024px) {
.dresses-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
.collection-detail__title { font-size: 30px; }
}
@media (max-width: 768px) {
.dresses-grid { grid-template-columns: 1fr; gap: 32px; }
.collection-detail__header { margin: 8px auto 32px; }
.collection-detail__title { font-size: 26px; margin: 12px 0 12px; }
}
/* Favorites page — same dresses-grid layout, with a head row carrying the
share/save CTA and (in shared mode) a notice line. */
.favorites__head {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.favorites__head .page-title { margin-bottom: 0; }
.favorites__notice {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 300;
color: var(--color-muted);
margin: 0;
}
.favorites__notice[hidden] { display: none; }
.favorites__actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.favorites__share-label {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
}
.favorites__share {
display: flex;
align-items: stretch;
gap: 12px;
max-width: 640px;
}
.favorites__share-url {
flex: 1;
min-width: 0;
padding: 11px 14px;
border: 1px solid var(--color-line);
background: transparent;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 300;
color: var(--color-text);
text-overflow: ellipsis;
}
.favorites__share-url:focus-visible {
outline-offset: 0;
border-color: var(--color-text);
}
.favorites__share-copy { white-space: nowrap; }
.favorites__share-copy.is-copied {
background: var(--color-text);
color: var(--color-text-inv);
}
@media (max-width: 480px) {
.favorites__share { flex-direction: column; }
}
.dresses-grid--empty {
display: block;
padding: 40px 0 80px;
}
.favorites-empty {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 40px 0;
}
.favorites-empty__text {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 300;
color: var(--color-muted);
margin: 0;
}
/* Header search overlay. Sits absolutely over the .site-nav row, so on
mobile it naturally hides logo + burger + icons; on desktop it covers
the menu area too. The dropdown of results is anchored to the bottom
of the overlay and extends below the header. */
.site-search {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 5;
display: flex;
flex-direction: column;
}
.site-search[hidden] { display: none; }
.site-search__inner {
height: 100%;
display: flex;
align-items: center;
gap: 12px;
padding-inline: var(--container-pad);
}
.site-search__icon {
width: 18px;
height: 18px;
color: var(--color-muted);
flex-shrink: 0;
}
.site-search__input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-family: var(--font-ui);
font-size: 16px;
font-weight: 300;
color: var(--color-text);
padding: 6px 0;
min-width: 0;
}
.site-search__input::placeholder {
color: rgba(0, 0, 0, 0.35);
}
.site-search__close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text);
flex-shrink: 0;
}
.site-search__close svg { width: 16px; height: 16px; }
.site-search__close:hover { opacity: .6; }
.site-search__results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
max-height: 60vh;
overflow-y: auto;
}
.site-search__results[hidden] { display: none; }
.site-search__result {
display: flex;
align-items: baseline;
gap: 8px;
padding: 12px var(--container-pad);
cursor: pointer;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 300;
border-bottom: 1px solid var(--color-line);
}
.site-search__result:last-child { border-bottom: 0; }
.site-search__result:hover,
.site-search__result.is-active {
background: var(--color-bg-soft);
}
.site-search__result-type {
font-style: italic;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--color-muted);
flex-shrink: 0;
}
/* Toast — minimal black pill, bottom-center, auto-dismiss after ~2.2s. */
.toast {
position: fixed;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
background: var(--color-text);
color: var(--color-text-inv);
font-family: var(--font-ui);
font-size: 13px;
letter-spacing: 0.04em;
padding: 12px 22px;
z-index: 500;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease;
max-width: calc(100vw - 32px);
text-align: center;
}
.toast[hidden] { display: none; }
.toast.is-visible { opacity: 1; }