/* ════════════════════════════════════════════════════════════════════════
ATELIER ZEN-Ō — drawer.css
────────────────────────────────────────────────────────────────────────
Shared drawer styles for the expandable sub-drawer system, lifted from
shop.html and generalised so the SAME styling applies across every page
that uses the pattern (Exquis Maroquinerie, Journal, future product
pages, etc.).
USAGE
─────
1. Include in on every page that needs the new drawer:
Collection
The id/aria/data attributes are read by drawer.js to wire up the
expand/collapse behaviour. No per-page JavaScript needed.
════════════════════════════════════════════════════════════════════════ */
/* ── LEVEL 1 — top-level page links ─────────────────────────────────── */
.drawer-link {
font-family: var(--ff, 'Optima','Cormorant Garamond',Georgia,serif);
font-size: clamp(22px, 5vw, 32px);
font-weight: 300;
letter-spacing: .1em;
color: var(--ivory, #F5F0E8);
text-decoration: none;
padding: 13px 0;
border-bottom: 1px solid rgba(200,169,110,.08);
display: block;
transition: color .3s, padding-left .3s;
cursor: none;
}
.drawer-link:hover { color: var(--gold, #C8A96E); padding-left: 10px; }
.drawer-link.active { color: var(--gold, #C8A96E); }
/* ── LEGACY: single-line indented leaf (still used by Les Matières, ── */
/* ── Le Sceau under their parents, etc.) ── */
.drawer-sub {
font-size: 9px;
font-weight: 300;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--stone, #8C8579);
text-decoration: none;
display: block;
padding: 9px 0 9px 18px;
border-bottom: 1px solid rgba(200,169,110,.05);
transition: color .3s;
cursor: none;
font-family: var(--ff, 'Optima', Georgia, serif);
}
.drawer-sub:hover { color: var(--gold-lt, #E2C99A); }
.drawer-sub.active { color: var(--gold, #C8A96E); }
/* ── LEVEL 1 EXPANDER — a top-level item that toggles children ─────── */
/* Example: "Collection" on the shop page; "Le Journal" on the journal */
/* page. Same visual size as .drawer-link, with a chevron at the right. */
.drawer-expander {
font-family: var(--ff, 'Optima','Cormorant Garamond',Georgia,serif);
font-size: clamp(22px, 5vw, 32px);
font-weight: 300;
letter-spacing: .1em;
color: var(--ivory, #F5F0E8);
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
border-bottom: 1px solid rgba(200,169,110,.08);
background: none;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
cursor: none;
transition: color .3s, padding-left .3s;
text-align: left;
}
.drawer-expander:hover { color: var(--gold, #C8A96E); padding-left: 10px; }
.drawer-expander[aria-expanded="true"] { color: var(--gold, #C8A96E); }
/* The chevron at the right of a Level-1 expander. Rotates when open. */
.drawer-expander .chev {
display: inline-block;
width: 9px; height: 9px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
transition: transform .3s var(--ease, cubic-bezier(0.25,0.1,0.0,1.0));
margin-left: 12px;
flex-shrink: 0;
}
.drawer-expander[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 4px; }
/* ── CHILDREN CONTAINER — collapses to height 0 when closed ────────── */
.drawer-children {
max-height: 0;
overflow: hidden;
flex-shrink: 0; /* the drawer is a fixed-height flex column; without this, an
expanded sub-list gets shrunk to fit and its lower items are
clipped. Keep full height and let #drawer scroll instead. */
transition: max-height .35s var(--ease, cubic-bezier(0.25,0.1,0.0,1.0));
}
.drawer-children.open { max-height: 1200px; } /* generous; collapses to content */
/* ── LEVEL 2 — first sub-tier inside an expander ───────────────────── */
.drawer-sub-2 {
font-family: var(--ff, 'Optima', Georgia, serif);
font-size: 9px;
font-weight: 300;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--stone, #8C8579);
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 8px 34px;
border-bottom: 1px solid rgba(200,169,110,.04);
background: none;
border-left: none;
border-right: none;
border-top: none;
width: 100%;
cursor: none;
text-align: left;
transition: color .3s;
}
.drawer-sub-2:hover { color: var(--gold-lt, #E2C99A); }
.drawer-sub-2[aria-expanded="true"] { color: var(--gold, #C8A96E); }
.drawer-sub-2.active { color: var(--gold, #C8A96E); }
/* When used as a leaf link (no expand behaviour) the right padding */
/* shrinks to match the indent on the left side. */
.drawer-sub-2.is-link { padding-right: 18px; }
/* Chevron — smaller than Level 1. */
.drawer-sub-2 .chev {
display: inline-block;
width: 6px; height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
transition: transform .3s var(--ease, cubic-bezier(0.25,0.1,0.0,1.0));
margin-left: 8px;
flex-shrink: 0;
}
.drawer-sub-2[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 3px; }
/* ── LEVEL 3 — deepest leaf links ──────────────────────────────────── */
.drawer-sub-3 {
font-family: var(--ff, 'Optima', Georgia, serif);
font-size: 9px;
font-weight: 300;
letter-spacing: .2em;
color: var(--mist, #D6CFC4);
text-decoration: none;
display: block;
padding: 7px 18px 7px 52px;
border-bottom: 1px solid rgba(200,169,110,.03);
transition: color .3s, padding-left .3s;
cursor: none;
}
.drawer-sub-3:hover { color: var(--gold-lt, #E2C99A); padding-left: 58px; }
.drawer-sub-3.active { color: var(--gold, #C8A96E); }
/* ── DRAWER FOOTER — atelier signature ─────────────────────────────── */
.drawer-footer {
margin-top: auto;
padding-top: 36px;
}
.drawer-footer p {
font-family: var(--ff, 'Optima', Georgia, serif);
font-size: 8px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--stone, #8C8579);
line-height: 2;
}
.drawer-footer a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(200,169,110,.2);
transition: color .3s, border-color .3s;
}
.drawer-footer a:hover {
color: var(--gold-lt, #E2C99A);
border-bottom-color: var(--gold, #C8A96E);
}
/* ── DRAWER SOCIAL ROW (optional; used by journal page) ────────────── */
.drawer-social {
display: flex;
gap: 16px;
margin-top: 18px;
}
.drawer-social a {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
color: var(--stone, #8C8579);
transition: color .3s, transform .3s;
border: none;
}
.drawer-social a:hover {
color: var(--gold, #C8A96E);
transform: translateY(-2px);
}
.drawer-social svg {
width: 16px; height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ── ACCESSIBILITY FOCUS RINGS ─────────────────────────────────────── */
.drawer-link:focus-visible,
.drawer-expander:focus-visible,
.drawer-sub:focus-visible,
.drawer-sub-2:focus-visible,
.drawer-sub-3:focus-visible {
outline: 1px solid rgba(200,169,110,.5);
outline-offset: 2px;
}
/* ════════════════════════════════════════════════════════════════════
ANTI-COPY · text selection
────────────────────────────────────────────────────────────────────
Deter casual copy-paste scraping of the maison's narrative copy.
This is a deterrent only — anyone can still view-source or curl —
but it makes drag-to-select on journals, product narrative, and
maison voice noticeably less convenient. Form fields, addresses,
prices, and any element marked .selectable / [data-selectable]
remain freely selectable so customers can still copy a phone
number, a shipping address, an order number, or their email
when they need to. Also blocks the iOS Safari long-press
callout menu that would otherwise expose Copy on tap-hold.
──────────────────────────────────────────────────────────────────── */
html, body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"],
.selectable, [data-selectable],
code, pre, kbd,
.snipcart-modal *, .snipcart-modal-container *,
.order-number, .order-id, .tracking-number,
.address, .email-copy, .copy-line,
.zeno-cert-id, .zeno-dossier {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}