/* ═══════════════════════════════════════════════════════════════════════
DALFASTART — Design system
Concept: a daylight gallery. Plaster wall, espresso ink, brass hardware.
Artwork previews hang in frames; product cards read as museum placards.
═══════════════════════════════════════════════════════════════════════ */
/* ── Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face {
font-family: 'Fraunces';
src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Archivo';
src: url('../fonts/archivo-var-latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
--paper: #F7F4ED; /* plaster wall */
--paper-deep: #EFEADF; /* mat board, alt sections */
--white: #FEFDFB; /* frame mat */
--ink: #221E18; /* espresso ink */
--ink-soft: #675F52; /* secondary text */
--line: #DED5C4; /* hairlines */
--brass: #9A7328; /* brass hardware */
--brass-deep: #7E5D1E;
--brass-pale: #E7D9BC;
--wood: #2A251E; /* frame wood */
--error: #96372F;
--error-bg: #F7E9E7;
--sale: #96372F; /* discount badges + on-sale pricing accent */
/* Gallery-room palette, used by the hero. Deliberately darker than --ink:
--ink is espresso text on paper; this is the wall itself. */
--hero-ground: #F2EDE3; /* warm plaster, one step deeper than --paper */
--oxblood: #6E1A22;
--oxblood-deep: #57131A;
--success: #3F6C45;
--success-bg: #EAF2EB;
--font-display: 'Fraunces', Georgia, serif;
--font-ui: 'Archivo', system-ui, sans-serif;
--wrap: 74rem;
--gutter: clamp(1.1rem, 4vw, 2.5rem);
--radius: 3px;
--shadow-frame: 0 18px 34px -20px rgba(34, 30, 24, .5);
--shadow-frame-hover: 0 26px 44px -20px rgba(34, 30, 24, .55);
--focus-ring: 2px solid var(--brass);
}
/* ── Reset & base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-ui);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 420;
line-height: 1.12;
margin: 0 0 .5em;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-variation-settings: 'opsz' 100; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-variation-settings: 'opsz' 60; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
/* Museum-label eyebrow */
.eyebrow {
display: inline-block;
font-family: var(--font-ui);
font-size: .7rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: .9rem;
}
.section { padding-block: clamp(3.2rem, 8vw, 5.5rem); }
.section-alt { background: var(--paper-deep); }
.section-head { max-width: 38rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head--split {
max-width: none;
display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.section-head p { color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }
/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .8rem 1.6rem;
background: var(--ink); color: var(--paper);
border: 1px solid var(--ink); border-radius: var(--radius);
font-family: var(--font-ui); font-weight: 600; font-size: .92rem;
letter-spacing: .02em; text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-brass { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-soft); font-weight: 500; }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-block { width: 100%; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.text-link {
color: var(--brass-deep); font-weight: 600; text-decoration: none;
border-bottom: 1px solid var(--brass-pale);
transition: border-color .15s ease;
}
.text-link:hover { border-bottom-color: var(--brass-deep); }
/* ── The frame (signature element) ───────────────────────────────────── */
.frame {
position: relative;
background: var(--white);
border: 7px solid var(--wood);
padding: clamp(8px, 7%, 22px);
box-shadow: var(--shadow-frame), inset 0 0 0 1px rgba(34, 30, 24, .08);
transition: box-shadow .25s ease, transform .25s ease;
}
.frame::after { /* glass sheen */
content: '';
position: absolute; inset: 0;
background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%);
pointer-events: none;
}
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(34,30,24,.12); }
.frame--brass { border-color: var(--brass); }
.frame--square img { aspect-ratio: 1 / 1; }
.frame--landscape img { aspect-ratio: 5 / 4; }
/* ── Artwork protection: deterrent layer (not real security) ─────────────
Casual right-click-save/drag friction, plus a visible reminder that a
listing image is an unlicensed preview. Trivially bypassable by design —
the pixel watermark and server-side access controls are the real protection. */
.frame img, .card-category-img img { -webkit-user-drag: none; user-select: none; }
.frame .preview-note {
position: absolute;
left: 50%;
bottom: clamp(8px, 7%, 22px);
transform: translateX(-50%);
font-size: .68rem;
letter-spacing: .02em;
color: var(--white);
background: rgba(24, 20, 14, .55);
padding: .2rem .55rem;
border-radius: 3px;
pointer-events: none;
white-space: nowrap;
}
/* ── Product card = frame + placard ──────────────────────────────────── */
.grid-products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
gap: clamp(1.4rem, 3vw, 2.4rem);
}
.card-product-wrap { position: relative; }
.card-product { position: relative; text-decoration: none; display: block; }
.card-product:hover .frame,
.card-product:focus-visible .frame { box-shadow: var(--shadow-frame-hover); transform: translateY(-4px); }
.wish-form { position: absolute; top: .7rem; right: .7rem; z-index: 3; margin: 0; }
[dir="rtl"] .wish-form { right: auto; left: .7rem; }
.wish-toggle {
width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 0;
background: rgba(254, 253, 251, .92); color: var(--ink-soft);
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 3px 10px -3px rgba(34, 30, 24, .35);
transition: color .15s, transform .15s;
}
.wish-toggle svg { width: 1.05rem; height: 1.05rem; }
.wish-toggle:hover { transform: scale(1.08); color: var(--sale); }
.wish-toggle.is-active { color: var(--sale); }
.wish-btn.is-active { color: var(--sale); border-color: var(--sale); }
.placard {
margin: .95rem auto 0;
text-align: center;
}
.placard .placard-title {
font-family: var(--font-display);
font-size: 1.08rem; font-weight: 480; line-height: 1.25;
margin: 0 0 .15rem;
}
.placard .placard-medium {
font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-soft); margin: 0 0 .35rem;
}
.placard .placard-price { font-weight: 650; font-size: .95rem; }
.placard .placard-price s { color: var(--ink-soft); font-weight: 400; margin-left: .45rem; }
.badge {
position: absolute; top: .8rem; left: .8rem; z-index: 2;
background: var(--ink); color: var(--paper);
font-size: .64rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
padding: .32rem .6rem; border-radius: 2px;
}
.badge-brass { background: var(--brass); color: #fff; }
.badge-sale { background: var(--sale); color: #fff; }
.chip {
display: inline-block; padding: .28rem .7rem;
border: 1px solid var(--line); border-radius: 99px;
font-size: .78rem; font-weight: 550; color: var(--ink-soft);
text-decoration: none; background: var(--white);
transition: border-color .15s, color .15s;
}
.chip:hover, .chip.is-active { border-color: var(--brass); color: var(--brass-deep); }
/* ── Header ──────────────────────────────────────────────────────────── */
.topline {
background: var(--ink); color: var(--paper);
font-size: .78rem; text-align: center; padding: .45rem var(--gutter);
letter-spacing: .06em;
}
.topline strong { color: var(--brass-pale); font-weight: 650; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(247, 244, 237, .94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.header-bar {
display: flex; align-items: center; gap: 2rem;
padding-block: .85rem;
}
.logo {
font-family: var(--font-display); font-weight: 560; font-size: 1.42rem;
letter-spacing: .01em; text-decoration: none; line-height: 1; white-space: nowrap;
/* Never shrink. As a flex item the logo was shrinkable, but its text is
nowrap — so instead of getting narrower it overflowed its own box and
ran into the first nav item ("DALFASTART" touching "Shop") at any width
between the 860px mobile breakpoint and a comfortably wide header. */
flex: 0 0 auto;
}
/* Upright, not italic. "ART" is the second half of the company's name, not an
aside — the slant made the wordmark read as two typefaces disagreeing, and
at sidebar size it leaned into the letter after it. Colour alone separates
the two halves, which is enough and stays legible small. */
/* The wordmark is ONE word. Measured, the T and the A already touch - the
glyph boxes meet at exactly 0px - but a capital T's right arm beside a
capital A's left diagonal leaves white between the ink, and the dark-to-brass
colour switch lands on that same join. Two signals a reader parses as a word
break, which is how "DALFASTART" was being read as "DALFAST ART".
The fix is kerning, not markup: pull ART back by a little more than the
letter-spacing the logo adds after every character (.01em), and let the pair
kern the way the typeface intends. */
.logo { font-kerning: normal; }
.logo .logo-art { color: var(--brass); font-style: normal; margin-left: -0.055em; }
.logo .logo-mark {
display: inline-block; width: .95em; height: .95em;
margin-right: .42rem; vertical-align: -0.16em;
}
/* min-width:0 lets the nav be the flex item that absorbs a squeeze, now that
the logo refuses to. margin-inline stays auto so the nav keeps its centred
position — the separation from the wordmark comes from .header-bar's gap. */
.nav-main { display: flex; gap: 1.4rem; margin-inline: auto; min-width: 0; }
.nav-main a {
text-decoration: none; font-size: .92rem; font-weight: 550; color: var(--ink-soft);
padding: .3rem 0; border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
white-space: nowrap; flex-shrink: 0;
}
.nav-main a:hover, .nav-main a.is-active { color: var(--ink); border-bottom-color: var(--brass); }
.nav-main a.nav-sale { color: var(--sale); }
.nav-main a.nav-sale:hover, .nav-main a.nav-sale.is-active { border-bottom-color: var(--sale); }
/* Shop / Collections dropdowns — same disclosure-widget pattern as the
locale switcher, so they work with no JS and are keyboard/mobile
accessible for free. */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
list-style: none; cursor: pointer;
text-decoration: none; font-size: .92rem; font-weight: 550; color: var(--ink-soft);
padding: .3rem 0; border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
display: inline-flex; align-items: center; gap: .3rem;
white-space: nowrap; flex-shrink: 0;
}
.nav-dropdown summary::after {
content: ''; width: .55rem; height: .55rem; flex-shrink: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .15s;
}
.nav-dropdown[open] summary::after { transform: rotate(180deg); }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover, .nav-dropdown summary.is-active, .nav-dropdown[open] summary { color: var(--ink); border-bottom-color: var(--brass); }
.nav-dropdown-panel {
position: absolute; top: calc(100% + .6rem); left: 0; z-index: 70;
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 18px 40px -18px rgba(34,30,24,.4);
padding: .6rem; width: 13rem; max-height: 22rem; overflow-y: auto;
display: flex; flex-direction: column;
}
.nav-dropdown-panel a {
display: block; padding: .5rem .6rem; border-radius: var(--radius);
font-size: .88rem; font-weight: 550; color: var(--ink); text-decoration: none;
}
.nav-dropdown-panel a:hover { background: var(--paper-deep); }
.nav-dropdown-panel a.nav-sale { color: var(--sale); }
/* Header search — same collapsed-icon-to-panel pattern as locale/dropdown. */
.search-menu { position: relative; }
.search-menu summary {
list-style: none; cursor: pointer; width: 1.9rem; height: 1.9rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; color: var(--ink-soft); transition: color .15s, background .15s;
}
.search-menu summary::before {
content: ''; width: 1.05rem; height: 1.05rem;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-menu summary::-webkit-details-marker { display: none; }
.search-menu summary:hover, .search-menu[open] summary { color: var(--ink); background: var(--paper-deep); }
.search-panel {
position: absolute; top: calc(100% + .6rem); right: 0; z-index: 70;
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 18px 40px -18px rgba(34,30,24,.4);
padding: .7rem; width: 16rem; display: flex; gap: .5rem;
}
[dir="rtl"] .search-panel { right: auto; left: 0; }
.search-panel input {
flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--line);
border-radius: 99px; background: var(--paper-deep); font-size: .88rem;
}
.header-actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.header-actions a { text-decoration: none; font-size: .9rem; font-weight: 550; color: var(--ink-soft); white-space: nowrap; }
.header-actions a:hover { color: var(--ink); }
.cart-link, .wish-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; }
.wish-link svg { width: 1.05rem; height: 1.05rem; }
.cart-count {
background: var(--brass); color: #fff; border-radius: 99px;
font-size: .68rem; font-weight: 700; min-width: 1.15rem; height: 1.15rem;
display: inline-flex; align-items: center; justify-content: center; padding-inline: .25rem;
}
.wish-link .cart-count { background: var(--sale); }
/* Locale switcher (language + currency) */
.locale-menu { position: relative; }
.locale-menu summary {
list-style: none; cursor: pointer;
font-size: .78rem; font-weight: 650; letter-spacing: .08em; color: var(--ink-soft);
padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 99px;
transition: border-color .15s, color .15s;
white-space: nowrap;
}
.locale-menu summary::-webkit-details-marker { display: none; }
.locale-menu summary:hover, .locale-menu[open] summary { border-color: var(--brass); color: var(--ink); }
.locale-panel {
position: absolute; top: calc(100% + .55rem); right: 0; z-index: 70;
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 18px 40px -18px rgba(34,30,24,.4);
padding: .9rem; width: 13rem;
}
[dir="rtl"] .locale-panel { right: auto; left: 0; }
.locale-panel label {
display: block; font-size: .68rem; font-weight: 650; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .3rem;
}
.locale-panel label + select { margin-bottom: .8rem; }
.locale-panel select {
width: 100%; padding: .45rem .6rem; font-size: .88rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.locale-panel select:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
.site-header.nav-open .locale-menu { order: -1; }
.site-header.nav-open .locale-panel { position: static; width: 100%; box-shadow: none; margin-top: .4rem; }
}
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .2s, opacity .2s; }
/* Mobile nav */
@media (max-width: 860px) {
.nav-main, .header-actions { display: none; }
.nav-toggle { display: block; }
.site-header.nav-open .nav-main,
.site-header.nav-open .header-actions {
display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
padding: .6rem 0 1.1rem; margin: 0;
}
.site-header.nav-open .header-bar { flex-wrap: wrap; }
.site-header.nav-open .nav-main { order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: 1rem; }
.site-header.nav-open .header-actions { order: 4; width: 100%; border-left: 0; }
.site-header.nav-open .nav-main a, .site-header.nav-open .header-actions a,
.site-header.nav-open .nav-dropdown summary, .site-header.nav-open .search-menu summary { padding: .45rem 0; font-size: 1.05rem; }
.site-header.nav-open .nav-dropdown, .site-header.nav-open .search-menu { width: 100%; }
.site-header.nav-open .nav-dropdown-panel, .site-header.nav-open .search-panel {
position: static; width: 100%; max-height: none; box-shadow: none; margin: .2rem 0 .4rem; padding: 0 0 0 .5rem;
}
.site-header.nav-open .search-menu summary { width: auto; height: auto; border-radius: 0; justify-content: flex-start; gap: .5rem; }
.site-header.nav-open .search-menu summary::before { content: 'Search'; background: none; -webkit-mask: none; mask: none; font-size: 1.05rem; font-weight: 550; color: var(--ink-soft); width: auto; height: auto; }
.site-header.nav-open .search-menu[open] summary::before { color: var(--ink); }
.site-header.nav-open .search-panel { flex-direction: column; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* ── Hero (gallery wall) ─────────────────────────────────────────────── */
.hero { overflow: hidden; padding-block: clamp(2.6rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); }
.hero-grid {
display: grid; gap: clamp(2rem, 5vw, 4rem);
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
}
.hero-copy .btn { margin-right: .7rem; margin-top: .4rem; }
.hero-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-soft); max-width: 33rem; }
.hero-wall { position: relative; min-height: 20rem; }
.hero-wall:not(.hero-wall--4) .frame { position: absolute; width: 58%; }
.hero-wall:not(.hero-wall--4) .frame:nth-child(1) { top: 0; left: 0; z-index: 2; }
.hero-wall:not(.hero-wall--4) .frame:nth-child(2) { top: 14%; right: 0; width: 46%; z-index: 1; }
.hero-wall:not(.hero-wall--4) .frame:nth-child(3) { bottom: -4%; left: 18%; width: 42%; z-index: 3; }
/* Four-orientation wall — one real piece each of portrait, landscape, square
and panoramic (Catalog::heroWall()), so the collage actually shows the
shape variety we support rather than four same-shaped crops. Each frame's
own aspect-ratio comes from its artwork's real native_aspect_ratio via the
--ratio custom property set inline, not a fixed box. */
.hero-wall--4 { min-height: 32rem; }
.hero-wall--4 .hero-frame {
position: absolute; aspect-ratio: var(--ratio, 4 / 5);
/* Border and padding are set in the hero-frame block below — the mat is
removed there entirely rather than merely thinned. */
}
.hero-wall--4 .hero-frame img { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-frame--portrait { top: 0; left: 4%; width: 32%; z-index: 3; }
.hero-frame--landscape { top: 0; right: 0; width: 54%; z-index: 1; }
/* Shifted right and down so it stands clear. At 22%/40% it collided with two
neighbours on a 434px wall: 26x22px into the corner frame and 61x7px into
the portrait. Overlapping frames are fine as a collage, but a 22px bite out
of one corner reads as a mistake rather than a hang. Measured, not guessed:
at 30%/41% every pair on the wall is disjoint. */
.hero-frame--square { top: 41%; left: 30%; width: 30%; z-index: 4; }
.hero-frame--panoramic { bottom: 0; right: 2%; width: 58%; z-index: 2; }
.hero-proof { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero-proof .proof { font-size: .85rem; color: var(--ink-soft); }
.hero-proof .proof strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 550; color: var(--ink); }
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-wall { min-height: 17rem; margin-top: 1rem; }
/* Overlapping absolute frames of wildly different aspect ratios don't
hold together at narrow widths — a static 2-column grid keeps every
piece fully visible and correctly shaped at any viewport. */
.hero-wall--4 {
min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
align-items: start;
}
.hero-wall--4 .hero-frame,
.hero-frame--portrait, .hero-frame--landscape, .hero-frame--square, .hero-frame--panoramic {
position: static; width: 100%; top: auto; left: auto; right: auto; bottom: auto;
}
.hero-frame--panoramic { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
.hero-wall--4 { grid-template-columns: 1fr; }
.hero-frame--panoramic { grid-column: auto; }
}
/* Load-in settle */
@media (prefers-reduced-motion: no-preference) {
.hero-copy > *, .hero-wall .frame {
opacity: 0; transform: translateY(14px);
animation: settle .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }
.hero-wall .frame:nth-child(1) { animation-delay: .2s; }
.hero-wall .frame:nth-child(2) { animation-delay: .34s; }
.hero-wall .frame:nth-child(3) { animation-delay: .48s; }
.hero-wall--4 .hero-frame:nth-child(1) { animation-delay: .2s; }
.hero-wall--4 .hero-frame:nth-child(2) { animation-delay: .32s; }
.hero-wall--4 .hero-frame:nth-child(3) { animation-delay: .44s; }
.hero-wall--4 .hero-frame:nth-child(4) { animation-delay: .56s; }
@keyframes settle { to { opacity: 1; transform: none; } }
/* The idle float that used to live here is GONE. Every frame drifted
9px up and back forever on its own 6-7.6s cycle; measured on the
live page, all six frames were in motion in roughly half of all
120ms samples. Intended to stop the wall reading as a static
photo, it read as shaking — artwork that will not hold still is
harder to look at, which is the opposite of what a gallery wall
is for. The wall now changes by rotating artworks instead, which
is motion with a purpose.
The one-time load-in settle above is kept: it runs once and ends. */
.hero-wall--4 .hero-frame:nth-child(5) { animation-delay: .68s; }
.hero-wall--4 .hero-frame:nth-child(6) { animation-delay: .80s; }
}
/* ── Category grid ───────────────────────────────────────────────────── */
.grid-categories {
display: grid; gap: 1.1rem;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.card-category {
position: relative; display: block; text-decoration: none;
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.15rem 1.25rem;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card-category:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(34,30,24,.4); }
.card-category h3 { font-size: 1.06rem; margin-bottom: .2rem; }
.card-category p { font-size: .82rem; color: var(--ink-soft); margin: 0; }
.card-category .go { position: absolute; top: 1.05rem; right: 1.1rem; color: var(--brass); font-weight: 700; }
.card-category-img {
margin: -1.15rem -1.25rem .9rem; aspect-ratio: 16/10; overflow: hidden;
border-bottom: 1px solid var(--line); background: var(--paper-deep);
}
.card-category-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.card-category:hover .card-category-img img { transform: scale(1.04); }
.card-category-count { font-size: .74rem; font-weight: 600; color: var(--brass-deep); margin-top: .5rem; }
/* ── Pricing tiers ───────────────────────────────────────────────────── */
.grid-tiers { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: stretch; }
.card-tier {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.7rem 1.5rem; display: flex; flex-direction: column;
}
.card-tier.is-featured { border: 2px solid var(--brass); position: relative; }
.card-tier .tier-flag {
position: absolute; top: -0.72rem; left: 50%; transform: translateX(-50%);
background: var(--brass); color: #fff; font-size: .62rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 2px;
white-space: nowrap;
}
.card-tier h3 { margin-bottom: .1rem; }
.card-tier .tier-tagline { color: var(--ink-soft); font-size: .85rem; margin-bottom: 1rem; }
.card-tier .tier-price { font-family: var(--font-display); font-size: 2rem; font-weight: 550; margin-bottom: .2rem; }
.card-tier .tier-price small { font-size: .85rem; font-family: var(--font-ui); color: var(--ink-soft); font-weight: 500; }
.card-tier ul { list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: .88rem; color: var(--ink-soft); }
.card-tier li { padding: .32rem 0 .32rem 1.4rem; position: relative; }
.card-tier li::before { content: '✓'; position: absolute; left: 0; color: var(--brass); font-weight: 700; }
.card-tier .btn { margin-top: auto; }
/* ── Steps (how it works) ────────────────────────────────────────────── */
.grid-steps { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.step { border-top: 2px solid var(--brass); padding-top: 1rem; }
.step h3 { font-size: 1.12rem; }
.step p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
/* ── Testimonials ────────────────────────────────────────────────────── */
.grid-quotes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.quote {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.5rem;
}
.quote .stars { color: var(--brass); letter-spacing: .12em; font-size: .85rem; margin-bottom: .6rem; }
.quote blockquote { margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.06rem; font-weight: 420; line-height: 1.45; }
.quote figcaption { font-size: .8rem; color: var(--ink-soft); }
/* ── Blog cards ──────────────────────────────────────────────────────── */
.grid-posts { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card-post { text-decoration: none; display: block; }
.card-post .post-cover {
aspect-ratio: 16 / 9; object-fit: cover; width: 100%;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-deep);
margin-bottom: .9rem;
}
.card-post h3 { font-size: 1.15rem; }
.card-post:hover h3 { color: var(--brass-deep); }
.card-post p { color: var(--ink-soft); font-size: .88rem; margin: 0; }
.post-meta { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; display: block; }
/* ── Newsletter band ─────────────────────────────────────────────────── */
.band-news { background: var(--ink); color: var(--paper); }
.band-news .eyebrow { color: var(--brass-pale); }
.band-news h2 { color: var(--paper); }
.band-news p { color: #B9B2A4; }
.news-form { display: flex; gap: .6rem; max-width: 28rem; flex-wrap: wrap; }
.news-form input[type=email] {
flex: 1 1 14rem; padding: .85rem 1rem; border-radius: var(--radius);
border: 1px solid #4A443A; background: #2E2922; color: var(--paper);
}
.news-form input[type=email]::placeholder { color: #8B8375; }
/* ── Shop filters ────────────────────────────────────────────────────── */
.filter-bar {
display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
padding-block: 1.1rem; border-block: 1px solid var(--line); margin-bottom: 2rem;
}
.filter-bar .spacer { flex: 1; }
.filter-bar select {
padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--white); font-size: .85rem;
}
.filter-check {
display: flex; align-items: center; gap: .4rem;
padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
font-size: .85rem; color: var(--ink-soft); cursor: pointer; user-select: none;
}
.filter-check:has(input:checked) { border-color: var(--sale); color: var(--sale); background: rgba(150, 55, 47, .06); }
.search-form { display: flex; gap: .5rem; }
.search-form input {
padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--white); font-size: .9rem; min-width: 11rem;
}
.empty-state {
text-align: center; padding: 4rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius);
color: var(--ink-soft);
}
/* ── Product page ────────────────────────────────────────────────────── */
.breadcrumbs { font-size: .8rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--brass-deep); }
.product-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
@media (max-width: 860px) { .product-layout { grid-template-columns: 1fr; } }
.product-gallery .frame { margin-bottom: 1rem; }
.gallery-thumbs { display: flex; gap: .7rem; flex-wrap: wrap; }
.gallery-thumbs button {
border: 1px solid var(--line); background: var(--white); padding: 3px; border-radius: 2px; line-height: 0;
}
.gallery-thumbs button.is-active { border-color: var(--brass); }
.gallery-thumbs img { width: 3.6rem; height: 3.6rem; object-fit: cover; }
.product-info h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: .3rem; }
.product-sub { color: var(--ink-soft); margin-bottom: 1rem; }
.rating-row { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.rating-row .stars { color: var(--brass); letter-spacing: .1em; }
.price-row { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.3rem; }
.price-row .price-now { font-family: var(--font-display); font-size: 2.1rem; font-weight: 560; }
.price-row s { color: var(--ink-soft); }
.price-row .save-tag { background: var(--brass-pale); color: var(--brass-deep); font-size: .72rem; font-weight: 700; padding: .25rem .55rem; border-radius: 2px; letter-spacing: .06em; }
.buy-box { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.buy-box form { flex: 1 1 14rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; font-size: .8rem; color: var(--ink-soft); padding: 1rem 0; border-block: 1px solid var(--line); margin-bottom: 1.4rem; }
.trust-row span::before { content: '✓ '; color: var(--brass); font-weight: 700; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 1.5rem; }
.spec-table th, .spec-table td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--ink-soft); font-weight: 550; width: 38%; padding-right: 1rem; }
.prose { max-width: 44rem; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2rem; color: var(--ink-soft); }
.prose li { margin: .3rem 0; }
.prose a { color: var(--brass-deep); }
details.faq-item { border-bottom: 1px solid var(--line); }
details.faq-item summary {
cursor: pointer; padding: 1rem 0; font-weight: 600; font-size: .95rem; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
details.faq-item summary::after { content: '+'; font-family: var(--font-display); font-size: 1.3rem; color: var(--brass); }
details.faq-item[open] summary::after { content: '–'; }
details.faq-item p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1.1rem; }
/* Sticky mobile buy bar */
.sticky-buy {
display: none;
}
@media (max-width: 860px) {
.sticky-buy {
display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
background: var(--white); border-top: 1px solid var(--line);
padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
gap: 1rem; align-items: center;
box-shadow: 0 -8px 24px -16px rgba(34,30,24,.4);
}
.sticky-buy .sb-price { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.sticky-buy form { flex: 1; }
body.has-sticky-buy { padding-bottom: 4.6rem; }
}
/* ── Cart & checkout ─────────────────────────────────────────────────── */
.cart-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-line {
display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1.1rem; align-items: center;
padding-block: 1.1rem; border-bottom: 1px solid var(--line);
}
.cart-line img { width: 4.6rem; height: 4.6rem; object-fit: cover; border: 3px solid var(--wood); background: var(--white); }
.cart-line .line-title { font-weight: 600; text-decoration: none; }
.cart-line .line-title:hover { color: var(--brass-deep); }
.cart-line .line-meta { font-size: .78rem; color: var(--ink-soft); }
.cart-line .line-price { font-weight: 650; }
.cart-line .line-remove { background: none; border: 0; color: var(--ink-soft); font-size: .78rem; text-decoration: underline; padding: 0; margin-top: .2rem; }
.cart-line .line-remove:hover { color: var(--error); }
.order-summary {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.5rem;
}
.summary-row { display: flex; justify-content: space-between; font-size: .92rem; padding: .35rem 0; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .9rem; font-weight: 700; font-size: 1.05rem; }
.summary-row .disc { color: var(--success); }
.coupon-form { display: flex; gap: .5rem; margin-top: 1rem; }
.coupon-form input { flex: 1; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-transform: uppercase; }
.coupon-tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--success-bg); color: var(--success); font-size: .8rem; font-weight: 650; padding: .3rem .7rem; border-radius: 2px; margin-top: .8rem; }
.coupon-tag button { background: none; border: 0; color: inherit; font-weight: 700; padding: 0; }
/* Forms */
.form-card { max-width: 26rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; margin-inline: auto; }
.form-card-wide { max-width: 34rem; }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.field input, .field select, .field textarea {
width: 100%; padding: .68rem .85rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px var(--brass-pale); }
.field .hint { font-size: .76rem; color: var(--ink-soft); margin-top: .25rem; }
.form-foot { font-size: .85rem; color: var(--ink-soft); text-align: center; margin-top: 1.1rem; }
/* Flash messages */
.flash-stack { position: fixed; top: 4.6rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .6rem; max-width: 23rem; }
.flash {
padding: .8rem 2.4rem .8rem 1rem; border-radius: var(--radius); font-size: .88rem; font-weight: 550;
box-shadow: 0 10px 30px -12px rgba(34,30,24,.45); position: relative;
animation: flash-in .3s ease;
}
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid #BFD8C3; }
.flash-error { background: var(--error-bg); color: var(--error); border: 1px solid #E5C0BB; }
.flash .flash-close { position: absolute; top: .35rem; right: .55rem; background: none; border: 0; color: inherit; font-size: 1rem; }
@keyframes flash-in { from { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
/* ── Download / success ──────────────────────────────────────────────── */
.download-card {
display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.1rem 1.3rem; margin-bottom: .8rem;
}
.download-card img { width: 3.8rem; height: 3.8rem; object-fit: cover; border: 3px solid var(--wood); }
.download-card .dl-info { flex: 1 1 12rem; }
.download-card .dl-info strong { display: block; }
.download-card .dl-info span { font-size: .78rem; color: var(--ink-soft); }
/* ── Account ─────────────────────────────────────────────────────────── */
.account-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } }
.order-block { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.order-block .order-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: .8rem; margin-bottom: .8rem; }
.order-block .order-head strong { color: var(--ink); }
.status-pill { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 99px; }
.status-paid { background: var(--success-bg); color: var(--success); }
.status-pending { background: var(--brass-pale); color: var(--brass-deep); }
.status-demo { background: #E8E4F3; color: #4C3E85; }
.status-sale { background: var(--error-bg); color: var(--sale); }
.status-error { background: var(--error-bg); color: var(--error); }
.tag-chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 99px; background: var(--paper-deep); color: var(--ink-soft); margin: 0 .25rem .25rem 0; }
/* ── Cookie consent ──────────────────────────────────────────────────── */
#artConsent {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
background: var(--ink); border-top: 1px solid rgba(154,115,40,0.4);
box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
}
.art-consent-inner {
max-width: 1200px; margin: 0 auto; padding: 1.1rem 5vw;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.art-consent-text { font-size: 0.85rem; line-height: 1.55; color: #B9B2A4; margin: 0; max-width: 62ch; }
.art-consent-text a { color: var(--brass-pale); text-decoration: underline; }
.art-consent-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
.art-consent-decline, .art-consent-accept {
font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
border-radius: 99px; padding: 0.6rem 1.3rem; transition: all 0.18s;
}
.art-consent-decline { background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: #E7E2D6; }
.art-consent-decline:hover { border-color: rgba(255,255,255,0.55); }
.art-consent-accept { background: var(--brass); border: 1.5px solid var(--brass); color: #fff; }
.art-consent-accept:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
@media (max-width: 640px) { .art-consent-inner { flex-direction: column; align-items: stretch; } .art-consent-actions { justify-content: flex-end; } }
/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: #B9B2A4; margin-top: auto; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr 1fr; padding-block: 3.2rem 2.4rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .logo { color: var(--paper); }
.site-footer h4 { color: var(--paper); font-family: var(--font-ui); font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .45rem 0; }
.site-footer a { color: #B9B2A4; text-decoration: none; font-size: .9rem; }
.site-footer a:hover { color: var(--paper); }
.footer-legal {
border-top: 1px solid #3A342B; padding-block: 1.2rem;
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-size: .78rem;
}
/* Floating contact widget — a real message form, not a chat simulation.
Disclosure-widget based, so it works with no JS and is keyboard-accessible. */
.chat-widget { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 55; }
[dir="rtl"] .chat-widget { right: auto; left: 1.2rem; }
.chat-widget summary {
list-style: none; cursor: pointer;
width: 3.2rem; height: 3.2rem; border-radius: 50%;
background: var(--ink); color: var(--paper);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 28px -10px rgba(34, 30, 24, .55);
transition: transform .18s ease, background .18s ease;
}
.chat-widget summary::-webkit-details-marker { display: none; }
.chat-widget summary:hover { transform: translateY(-2px); background: var(--brass); }
.chat-widget[open] summary { background: var(--brass); }
.chat-widget-panel {
position: absolute; bottom: calc(100% + .7rem); right: 0;
width: min(20rem, calc(100vw - 2.4rem));
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 22px 50px -18px rgba(34, 30, 24, .45);
padding: 1.1rem;
/* Short viewports (landscape phones) can't fit the full form — cap it
and scroll inside rather than letting it run off the top of the screen. */
max-height: min(70vh, 26rem); overflow-y: auto;
}
[dir="rtl"] .chat-widget-panel { right: auto; left: 0; }
.chat-widget-panel h4 { margin: 0 0 .2rem; font-size: 1rem; }
.chat-widget-panel .field { margin-bottom: .5rem; }
.chat-widget-panel input[type=text],
.chat-widget-panel input[type=email],
.chat-widget-panel textarea {
width: 100%; padding: .5rem .7rem; font-size: .88rem;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.chat-widget-panel textarea { resize: vertical; }
@media (max-width: 900px) {
body.has-sticky-buy .chat-widget { bottom: 5.4rem; }
}
/* ── Admin ───────────────────────────────────────────────────────────── */
.admin-layout { display: grid; grid-template-columns: 13rem 1fr; min-height: 100vh; }
@media (max-width: 860px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-side { background: var(--ink); color: #B9B2A4; padding: 1.4rem 1.2rem; }
.admin-side .logo { color: var(--paper); font-size: 1.1rem; display: block; margin-bottom: 1.6rem; }
.admin-side nav a { display: block; color: #B9B2A4; text-decoration: none; font-size: .9rem; padding: .5rem .6rem; border-radius: 4px; }
.admin-side nav a:hover { color: var(--paper); background: #2E2922; }
.admin-side nav a.is-active { color: var(--paper); background: #2E2922; border-left: 3px solid var(--brass); }
.admin-main { padding: clamp(1.2rem, 3vw, 2.4rem); background: var(--paper); }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.admin-head h1 { font-size: 1.6rem; margin: 0; }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: 2rem; }
.stat-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.stat-card .stat-label { font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.stat-card .stat-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 560; }
.data-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: .88rem; }
.data-table th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.data-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--paper-deep); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table a { color: var(--brass-deep); text-decoration: none; font-weight: 600; }
.data-table .thumb { width: 2.6rem; height: 2.6rem; object-fit: cover; border: 2px solid var(--wood); }
.table-scroll { overflow-x: auto; }
/* ── Reports dashboard ──────────────────────────────────────────────── */
.reports-card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.4rem 1.5rem; margin-bottom: 1.4rem;
}
.reports-card h3 { font-size: 1.05rem; margin: 0 0 .3rem; color: var(--ink); }
.reports-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.3rem; flex-wrap: wrap; }
.reports-tab {
background: none; border: none; padding: 0 0 .7rem; font: 600 .88rem var(--font-ui); color: var(--ink-soft);
cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reports-tab:hover { color: var(--ink); }
.reports-tab.is-active { color: var(--ink); border-bottom-color: var(--brass); }
.reports-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.reports-range-picker { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .9rem; }
.reports-range-form { display: flex; gap: .6rem; align-items: flex-end; }
.reports-range-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.reports-range-form select, .reports-range-form input[type="date"] {
border: 1px solid var(--line); border-radius: 4px; padding: .4rem .6rem; font: 500 .84rem var(--font-ui);
color: var(--ink); background: var(--white);
}
.reports-range-form--custom { gap: .5rem; }
.reports-current-range { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.reports-current-range strong { color: var(--ink); }
.reports-stat-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.reports-stat { display: flex; flex-direction: column; }
.reports-stat-label { font-size: .78rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.reports-stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 560; color: var(--ink); line-height: 1.1; }
.reports-stat-sub { font-size: .78rem; color: var(--ink-soft); margin: .2rem 0 .8rem; }
.reports-stat-link { font-size: .82rem; font-weight: 600; color: var(--brass-deep); text-decoration: none; padding-top: .6rem; border-top: 1px solid var(--paper-deep); }
.reports-stat-link:hover { text-decoration: underline; }
.reports-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: .6rem; }
.reports-chart-head h3 { margin: 0; }
.reports-chart-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.reports-chart-toggle button {
background: var(--white); border: none; padding: .35rem .8rem; font-size: .8rem; font-weight: 600;
color: var(--ink-soft); cursor: pointer;
}
.reports-chart-toggle button.is-active { background: var(--ink); color: #fff; }
.reports-chart { margin-top: .5rem; }
.reports-chart svg { overflow: visible; }
@keyframes reportsGrowUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes reportsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.reports-bar {
transform-origin: bottom;
transform-box: fill-box;
animation: reportsGrowUp .35s cubic-bezier(.25, .8, .35, 1) backwards;
transition: opacity .15s ease, filter .15s ease;
cursor: pointer;
}
.reports-bar:hover { opacity: .82; filter: brightness(1.12); }
.reports-line {
stroke-dasharray: 6000;
stroke-dashoffset: 6000;
animation: reportsDraw .7s ease-out forwards;
}
@keyframes reportsDraw { to { stroke-dashoffset: 0; } }
.reports-area { animation: reportsFadeIn .5s ease-in .2s backwards; }
.reports-point {
animation: reportsFadeIn .3s ease backwards;
transition: r .15s ease, filter .15s ease;
cursor: pointer;
}
.reports-point:hover { r: 5.5; filter: brightness(1.15); }
.reports-books { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 1rem; }
.reports-book { display: flex; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.reports-book-cover { width: 4.5rem; height: 6rem; object-fit: cover; border: 2px solid var(--wood); flex-shrink: 0; }
.reports-book-info { flex: 1; min-width: 0; }
.reports-book-metric { display: inline-block; margin-right: 1.3rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 560; color: var(--ink); }
.reports-book-metric span { display: block; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.reports-book-title { margin: .7rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.reports-book-title a { color: var(--ink); font-weight: 600; text-decoration: none; }
.reports-book-title a:hover { text-decoration: underline; }
.reports-donut-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.reports-donut-row { display: flex; align-items: center; gap: 1.6rem; margin: 1rem 0; }
.reports-donut { width: 9rem; height: 9rem; border-radius: 50%; flex-shrink: 0; position: relative; }
.reports-donut::after { content: ''; position: absolute; inset: 22%; background: var(--white); border-radius: 50%; }
.reports-legend { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.reports-legend li { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--ink); }
.reports-swatch { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 640px) {
.reports-donut-row { flex-direction: column; align-items: flex-start; }
}
/* ── Misc ────────────────────────────────────────────────────────────── */
.page-head { padding-block: clamp(2.2rem, 5vw, 3.6rem) 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2rem, 5vw, 3rem); }
.demo-note {
background: #E8E4F3; color: #4C3E85; border: 1px solid #CFC6EA; border-radius: var(--radius);
font-size: .85rem; padding: .8rem 1rem; margin-bottom: 1.2rem;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Footer trust + payment strip */
.footer-trust {
display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
padding-block: 1.4rem; border-top: 1px solid #3A342B;
}
.footer-trust .ft-items { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-trust .ft { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: #B9B2A4; }
.footer-trust .ft svg { width: 1.2rem; height: 1.2rem; color: var(--brass); flex: 0 0 auto; }
.footer-trust .ft b { color: var(--paper); font-family: var(--font-ui); font-weight: 700; }
.footer-trust .ft em { font-style: normal; color: #8A8071; }
.footer-trust .pay-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-trust .pay {
font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: #C9BFA9;
border: 1px solid #3A342B; border-radius: 6px; padding: .35rem .55rem; background: rgba(255,255,255,.04);
}
@media (max-width: 640px) { .footer-trust .ft em { display: none; } }
/* Keyboard skip link — visually hidden until focused, then pinned top-left
so a keyboard or screen-reader user can jump straight past the nav. */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--ink); color: #fff; text-decoration: none;
padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; outline: 3px solid var(--brass); outline-offset: 2px; }
/* Pipeline + stage chips, shared with DALFAST Marketplace. */
/* ---- Admin: search / filter bar ---------------------------------------- */
.admin-filter {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.admin-filter input[type="search"] {
flex: 1 1 18rem;
min-width: 0;
padding: .55rem .75rem;
border: 1px solid var(--line, #e2e2e6);
border-radius: .5rem;
font: inherit;
font-size: .9rem;
}
/* ---- Publishing Office pipeline ---------------------------------------
Eleven stages, so this scrolls horizontally rather than wrapping into an
unreadable block on narrow screens. */
.pipeline {
display: flex;
gap: .5rem;
overflow-x: auto;
padding: .2rem .2rem .8rem;
margin-bottom: 1.4rem;
scrollbar-width: thin;
}
.pipeline-stage {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: .15rem;
min-width: 5.5rem;
padding: .6rem .7rem;
border: 1px solid var(--line, #e2e2e6);
border-radius: .6rem;
text-decoration: none;
color: inherit;
text-align: center;
transition: border-color .15s ease, background-color .15s ease;
}
.pipeline-stage:hover,
.pipeline-stage:focus-visible {
border-color: var(--ink, #111);
background: var(--surface-2, #f4f4f6);
}
.pipeline-stage.is-active {
border-color: var(--ink, #111);
background: var(--ink, #111);
color: #fff;
}
.pipeline-stage.is-empty:not(.is-active) { opacity: .5; }
.pipeline-count { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.pipeline-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
/* ---- Stage chips -------------------------------------------------------
Only Published is green: the whole point of the pipeline is that a title
is either live or it is not, and no pre-publication stage should read as
"done" at a glance. */
.stage-chip {
display: inline-block;
padding: .18rem .5rem;
border-radius: 1rem;
font-size: .72rem;
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
background: var(--surface-2, #f0f0f3);
color: var(--ink-soft, #55555f);
border: 1px solid var(--line, #e2e2e6);
}
.stage-chip.stage-published { background: #e7f6ed; color: #12643f; border-color: #b9e3cb; }
.stage-chip.stage-approved { background: #e8f0fd; color: #1c4b93; border-color: #c2d7f7; }
.stage-chip.stage-qa_review,
.stage-chip.stage-print_checked,
.stage-chip.stage-packaged { background: #fdf3e3; color: #8a5a12; border-color: #f2ddb8; }
.stage-chip.stage-package_failed { background: #fdeaea; color: #96261f; border-color: #f5c6c3; }
.stage-chip.stage-retired { background: #f3f3f5; color: #7a7a85; border-color: #e2e2e6; text-decoration: line-through; }
/* ── Admin: quality review ──────────────────────────────────────────────
These are paintings, so the artwork is the interface. Each row gives the
image enough space to actually judge — banding, seams, warped detail — with
the measurements beside it rather than above it. */
.qa-list { display: grid; gap: 1.4rem; }
.qa-item {
display: grid;
/* 24rem, not 15. At 15rem a landscape painting renders about 240x130 —
a contact sheet. You cannot see banding, seams or soft edges at that
size, so a reviewer would be passing thumbnails, not artwork. */
grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
gap: 1.4rem;
align-items: start;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem;
}
@media (max-width: 46rem) {
.qa-item { grid-template-columns: minmax(0, 1fr); }
}
/* minmax(0,...) on the row as well: an auto row sizes to the image's intrinsic
height, which on a 6000px master defeats max-height entirely. */
.qa-art { display: grid; grid-template-rows: minmax(0, 1fr); }
.qa-art img {
display: block;
width: 100%;
max-height: 26rem;
object-fit: contain;
background: var(--paper, #f5f2ec);
border: 1px solid var(--line);
border-radius: calc(var(--radius) - 4px);
}
.qa-noart {
display: grid; place-items: center; gap: .3rem; text-align: center;
min-height: 12rem; padding: 1rem;
border: 1px dashed var(--line); border-radius: calc(var(--radius) - 4px);
background: var(--paper, #f5f2ec);
}
.qa-body { min-width: 0; }
.qa-title { font-size: 1.1rem; margin: 0 0 .2rem; }
.qa-title a { text-decoration: none; color: var(--navy, #14213d); }
.qa-title a:hover { color: var(--brass-deep); }
.qa-meta { margin: 0 0 .7rem; font-size: .8rem; color: var(--ink-soft); }
.qa-print { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
.qa-blockers { margin-bottom: .7rem; font-size: .85rem; }
.qa-blockers summary { cursor: pointer; color: var(--ink-soft); }
.qa-blockers ul { margin: .5rem 0 .3rem 1.1rem; }
.qa-decide { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.qa-decide input[type="text"] {
flex: 1 1 16rem; min-width: 0;
padding: .55rem .8rem;
border: 1px solid var(--line); border-radius: 99px;
font: inherit; font-size: .88rem; background: var(--white);
}
/* ═══════════════════════════════════════════════════════════════════════════
ADMIN CONSOLE — migrated from DALFAST Publishing
═══════════════════════════════════════════════════════════════════════════
DALFAST Publishing's admin is the standard for both sites. It is the more
developed of the two by a wide margin — a full token set, grouped and
collapsible navigation, menu search, density rules for tables and figures —
against a flat sidebar and five rules here.
Rather than restyle this one to approximate it, the block below IS that
block, copied. Two adjustments were needed and both are marked: the tokens
it referenced that exist only on the Publishing side.
Everything stays scoped under .admin-layout, so the DALFASTART storefront —
which is a different brand and stays that way — is untouched. The five older
.admin-side rules further up this file still exist; these come later and win,
which is deliberate, and they can be deleted once this has settled.
COMPATIBILITY SHIMS
--gold : Publishing's storefront accent. ART's equivalent is --brass,
but --brass (#9A7328) is nearly invisible on the #0F1115
sidebar, so the console's own --c-accent is used instead. The
console was designed around that value.
--font-body : referenced three times by the source block and DEFINED
NOWHERE, on either site — so those rules have been silently
inheriting rather than setting a font. Pointed at --font-ui
here, which is what an operations console wants. The same
latent bug is still live on the Publishing side.
═══════════════════════════════════════════════════════════════════════════ */
.admin-layout {
--gold: #C89B3C;
--font-body: var(--font-ui);
}
/* ═══════════════════════════════════════════════════════════════════════════
ADMIN CONSOLE
═══════════════════════════════════════════════════════════════════════════
The admin had been inheriting storefront styling: serif display faces,
marketing-weight cards, generous whitespace. That is right for a bookshop
and wrong for an operations console, which is a different product with a
different user — somebody who is here for hours, already knows where things
are, and is reading numbers rather than being persuaded by them.
The principles, applied consistently below:
Density over comfort. An operator wants more rows visible, not more air.
Numbers are the interface. Tabular figures everywhere, right-aligned, so
columns of money scan vertically without the eye re-anchoring.
Colour is semantic only. Nothing is coloured for decoration; if something
is red it is because it needs attention.
One accent. Restraint reads as expensive; a second accent reads as a
template.
Hairlines, not shadows. Shadows suggest depth for its own sake; rules
organise information.
Everything is scoped under .admin-layout, so the storefront is untouched. */
.admin-layout {
/* A console palette of its own. Deliberately not the brand navy: the
storefront colours are chosen to sell books, these are chosen to be
looked at all day without fatigue. */
--c-bg: #0F1115;
--c-surface: #FFFFFF;
--c-canvas: #F6F7F9;
--c-line: #E3E6EB;
--c-line-soft: #EDEFF3;
--c-ink: #14171F;
--c-ink-2: #4A5160;
--c-ink-3: #7A8394;
--c-accent: #C89B3C;
--c-ok: #1B6B45;
--c-warn: #8A6819;
--c-bad: #9B2C2C;
--c-side-ink: #9AA3B2;
--c-side-hov: #1A1D24;
--c-gutter: clamp(1rem, 2.5vw, 1.9rem);
grid-template-columns: 15rem 1fr;
background: var(--c-canvas);
font-feature-settings: "tnum" 1;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.admin-layout .admin-side {
background: var(--c-bg);
color: var(--c-side-ink);
padding: 0;
/* Sticks while the working area scrolls: navigation that scrolls away is
navigation you have to scroll back up to find. */
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
border-right: 1px solid #000;
scrollbar-width: thin;
scrollbar-color: #2A2E37 transparent;
}
.admin-layout .admin-side::-webkit-scrollbar { width: 8px; }
.admin-layout .admin-side::-webkit-scrollbar-thumb { background: #2A2E37; border-radius: 4px; }
.admin-layout .admin-side .logo {
/* NO gap. This rule came across from Publishing, whose wordmark is two
words — "DALFAST Publishing" — where a flex gap between them is right.
Here the name is one word, and the mark, the bare text "DALFAST" and
ART are three separate flex items: an 8px
gap fell inside the name and the sidebar read "DALFAST ART".
The mark keeps its own spacing from .logo-mark's margin-right, so the
only thing lost by removing the gap is the split. */
display: flex; align-items: center; gap: 0;
font-family: var(--font-display);
font-size: .98rem; letter-spacing: -.01em;
color: #fff; margin: 0;
padding: 1.15rem 1.1rem;
border-bottom: 1px solid #1E222A;
}
.admin-layout .admin-side .logo-mark { width: 20px; height: 20px; }
.admin-layout .admin-side .logo-art { color: var(--c-accent); }
.admin-layout .admin-side nav { padding: .5rem .6rem; }
.admin-layout .admin-nav-group {
font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
color: #5C6373;
margin: 1.1rem 0 .3rem; padding: 0 .5rem;
}
.admin-layout .admin-nav-group:first-of-type { margin-top: .4rem; }
.admin-layout .admin-side nav a {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
font-size: .82rem; line-height: 1.3;
color: var(--c-side-ink);
padding: .38rem .5rem;
border-radius: 5px;
border-left: 0;
transition: background .12s ease, color .12s ease;
}
.admin-layout .admin-side nav a:hover { background: var(--c-side-hov); color: #E8EBF0; }
/* WHERE YOU ARE.
This used to share its background with :hover — both var(--c-side-hov),
#1A1D24 on a #0F1115 sidebar, a single shade apart — so the only thing
separating "the page I am on" from "the item my mouse is over" was a 2px
rail. Moving the pointer down the menu lit up item after item, each looking
as selected as the real one, and the answer to "which did I click?" was
effectively not on screen.
Now the current item is the only gold thing in the menu: a gold-tinted
surface no hover state uses, gold text, and a 3px rail. Hover keeps the
neutral grey it always had, so the two can never be confused. */
.admin-layout .admin-side nav a.is-active {
background: rgba(200, 155, 60, .13);
color: #F2D9A0;
font-weight: 600;
border-left: 0;
box-shadow: inset 3px 0 0 var(--c-accent);
}
/* Hovering the item you are already on must not wash the gold out. */
.admin-layout .admin-side nav a.is-active:hover {
background: rgba(200, 155, 60, .2);
color: #FBEFD6;
}
.admin-layout .admin-side .cart-count {
background: var(--c-bad); color: #fff;
font-size: .65rem; font-weight: 700;
min-width: 1.15rem; height: 1.15rem;
padding: 0 .3rem; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
}
/* ── Working area ────────────────────────────────────────────────────────── */
.admin-layout .admin-main {
background: var(--c-canvas);
min-width: 0; /* lets wide tables scroll instead of stretching the grid */
}
/* A table that genuinely cannot fit scrolls inside its own box. The page
body must never scroll sideways. */
.admin-layout .gov-matrix-wrap,
.admin-layout .table-scroll { overflow-x: auto; }
/* The page header is a bar, not a hero. It stays put so an operator scrolling
a long register always knows which screen they are on. */
.admin-layout .admin-head {
position: sticky; top: 0; z-index: 20;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--c-line);
/* Breaks out of the container padding so the rule under it spans the
full working area, then re-applies the gutter to its own contents. */
margin: 0 calc(-1 * var(--c-gutter)) 1.4rem;
padding: .95rem var(--c-gutter);
align-items: flex-start;
}
.admin-layout .admin-head h1 {
font-family: var(--font-display);
font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em;
color: var(--c-ink); margin: 0;
}
.admin-layout .admin-head p { margin: .18rem 0 0; font-size: .8rem; color: var(--c-ink-3); max-width: 62ch; }
/* The gutter lives on the container as padding, not on children as margins:
a width:100% table inside a margined child is 100% of the container PLUS
the margin, which is wider than the container and scrolls the page. */
.admin-layout .admin-main { padding: 0 var(--c-gutter) 2.5rem; }
.admin-layout .admin-main > *:last-child { margin-bottom: 0; }
/* ── Section headings ────────────────────────────────────────────────────── */
.admin-layout .set-sub {
font-family: var(--font-body);
font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: var(--c-ink-3);
margin: 1.9rem 0 .6rem;
padding-bottom: .35rem;
border-bottom: 1px solid var(--c-line);
}
/* ── Metric tiles ────────────────────────────────────────────────────────── */
.admin-layout .stat-grid,
/* Position cards: like ops-tiles but each carries a sentence saying what the
figure means. The whole point of the accounting-position screen is that the
numbers are unreadable without their definitions, so the definition is part
of the card rather than a footnote under the row. */
.admin-layout .pos-grid {
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
background: var(--c-line); border: 1px solid var(--c-line);
border-radius: 8px; overflow: hidden; margin-bottom: 1.4rem;
}
.admin-layout .pos-card {
background: var(--c-surface); padding: 1rem 1.1rem 1.1rem;
display: flex; flex-direction: column; gap: .3rem;
}
.admin-layout .pos-label {
font-size: .68rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--c-ink-3);
}
.admin-layout .pos-value {
font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; color: var(--c-ink); line-height: 1.15;
}
.admin-layout .pos-card.is-empty .pos-value { color: var(--c-ink-3); font-weight: 500; }
.admin-layout .pos-means { font-size: .74rem; line-height: 1.45; color: var(--c-ink-3); }
/* One-line settings form: labels sit beside their inputs rather than above. */
.admin-layout .ops-inline-form {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: 8px; padding: .9rem 1rem; margin-bottom: .6rem;
}
.admin-layout .ops-inline-form label { display: flex; flex-direction: column; gap: .25rem; }
.admin-layout .ops-inline-form label.check {
flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .45rem;
}
.admin-layout .ops-inline-form input[type="number"] { width: 8rem; }
.admin-layout .ops-tiles {
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
/* Hairline gaps over a ruled background: tiles read as one instrument
panel rather than as separate floating cards. */
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.6rem;
}
.admin-layout .stat-card,
.admin-layout .ops-tile {
background: var(--c-surface);
border: 0; border-radius: 0;
padding: .85rem 1rem 1rem;
display: flex; flex-direction: column-reverse; gap: .15rem;
text-decoration: none;
transition: background .12s ease;
}
.admin-layout a.ops-tile:hover { background: #FAFBFC; }
.admin-layout .stat-card .stat-label,
.admin-layout .ops-tile span {
font-family: var(--font-body);
font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--c-ink-3);
}
.admin-layout .stat-card .stat-value,
.admin-layout .ops-tile strong {
font-family: var(--font-body);
font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--c-ink); line-height: 1.15;
}
.admin-layout .ops-tile.is-empty strong { color: var(--c-ink-3); font-weight: 500; }
.admin-layout .ops-tile.is-urgent strong { color: var(--c-bad); }
.admin-layout .ops-tile.is-urgent { box-shadow: inset 0 2px 0 var(--c-bad); }
/* ── Tables ──────────────────────────────────────────────────────────────── */
.admin-layout .ops-table,
.admin-layout .data-table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: 8px;
overflow: hidden;
font-size: .82rem;
margin-bottom: 1.4rem;
}
.admin-layout .ops-table thead th,
.admin-layout .data-table thead th {
background: #FBFBFC;
font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--c-ink-3);
padding: .55rem .8rem;
border-bottom: 1px solid var(--c-line);
text-align: left; white-space: nowrap;
}
.admin-layout .ops-table td,
.admin-layout .data-table td {
padding: .55rem .8rem;
border-bottom: 1px solid var(--c-line-soft);
color: var(--c-ink-2);
vertical-align: top;
}
.admin-layout .ops-table tbody tr:last-child td,
.admin-layout .data-table tbody tr:last-child td { border-bottom: 0; }
.admin-layout .ops-table tbody tr:hover td,
.admin-layout .data-table tbody tr:hover td { background: #FAFBFC; }
.admin-layout .ops-table strong { color: var(--c-ink); font-weight: 600; }
/* Money and counts line up vertically. This single change does more than any
other to make a financial table look professional. */
.admin-layout .num-col,
.admin-layout .ops-table .num-col,
.admin-layout .data-table .num-col {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.admin-layout code {
font-size: .78em; background: #F4F5F7; border: 1px solid var(--c-line-soft);
padding: .05rem .3rem; border-radius: 3px; color: var(--c-ink-2);
}
/* ── Controls ────────────────────────────────────────────────────────────── */
.admin-layout .ops-filters {
display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
background: var(--c-surface);
border: 1px solid var(--c-line); border-radius: 8px;
padding: .6rem .7rem; margin-bottom: 1.2rem;
}
.admin-layout .ops-filters select,
.admin-layout .ops-filters input {
font-size: .8rem; padding: .32rem .5rem;
border: 1px solid var(--c-line); border-radius: 5px;
background: var(--c-surface); color: var(--c-ink);
}
.admin-layout .ops-filters input[type="search"] { min-width: 14rem; }
.admin-layout .btn {
font-size: .8rem; font-weight: 600; letter-spacing: 0;
padding: .42rem .8rem; border-radius: 6px;
}
.admin-layout .btn-small { font-size: .74rem; padding: .28rem .55rem; }
.admin-layout .btn-quiet {
background: var(--c-surface); color: var(--c-ink);
border: 1px solid var(--c-line);
}
.admin-layout .btn-quiet:hover { background: #F4F5F7; border-color: #D2D7DE; }
.admin-layout .link-btn { font-size: .74rem; color: var(--c-ink-3); }
.admin-layout .link-btn:hover { color: var(--c-bad); }
.admin-layout .ops-new {
background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: 8px; padding: 0; margin-bottom: 1.2rem;
}
.admin-layout .ops-new summary {
padding: .6rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer;
color: var(--c-ink);
}
.admin-layout .ops-new[open] summary { border-bottom: 1px solid var(--c-line); }
.admin-layout .ops-new > form { padding: .9rem .8rem; }
.admin-layout .ops-new-grid { gap: .7rem; }
.admin-layout label { font-size: .76rem; font-weight: 600; color: var(--c-ink-2); }
.admin-layout input, .admin-layout select, .admin-layout textarea { font-size: .82rem; }
/* Two panels of equal weight, side by side, stacking on a narrow window.
For a pair of things being compared or edited together — the personal and
commercial licence wordings — where neither is subordinate to the other. */
.admin-layout .licence-pair {
display: grid; gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
align-items: start;
}
/* A textarea with no width falls back to HTML's cols="20" — about 167px,
whatever the container. `.field`, `.ops-new` and `.ops-edit` each set
width:100%, so a textarea inside one is fine; a bare one is not, and the
licence editor was a 167px column inside a 741px card, wrapping the wording
every three words.
Width only, so padding, borders and fonts still come from whichever form
pattern the control sits in. Vertical resize because a textarea that can be
dragged wider than its column breaks the layout it lives in. */
.admin-layout textarea { width: 100%; resize: vertical; }
/* ── Notices ─────────────────────────────────────────────────────────────── */
.admin-layout .ops-warn,
.admin-layout .demo-note {
background: var(--c-surface);
border: 1px solid var(--c-line);
border-left: 3px solid var(--c-warn);
border-radius: 6px;
padding: .7rem .9rem; font-size: .82rem;
margin-bottom: 1.2rem; color: var(--c-ink-2);
}
.admin-layout .ops-warn strong { color: var(--c-ink); }
/* A neutral explanatory panel. Distinct from ops-warn because explaining why a
figure is what it is must not read as an alert — nothing here is wrong. */
.admin-layout .ops-note {
background: var(--c-surface); border: 1px solid var(--c-line);
border-left: 3px solid var(--c-ink-3); border-radius: 6px;
padding: .8rem 1rem; margin: 1.4rem 0; color: var(--c-ink-2);
}
.admin-layout .ops-note p { margin: 0 0 .4rem; }
.admin-layout .ops-note p:last-child { margin-bottom: 0; }
.admin-layout .ops-note strong { color: var(--c-ink); }
.admin-layout .ops-empty {
background: var(--c-surface); border: 1px dashed var(--c-line);
border-radius: 8px; padding: 1.8rem 1.2rem; text-align: center;
color: var(--c-ink-3); font-size: .85rem; margin-bottom: 1.4rem;
}
.admin-layout .ops-empty strong { color: var(--c-ink-2); }
.admin-layout .small { font-size: .78rem; }
.admin-layout .muted { color: var(--c-ink-3); }
/* ── Detail layout ───────────────────────────────────────────────────────── */
.admin-layout .ops-detail,
.admin-layout .account-grid {
display: grid; gap: 1.4rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
}
@media (max-width: 1100px) {
.admin-layout .ops-detail,
.admin-layout .account-grid { grid-template-columns: minmax(0, 1fr); }
}
.admin-layout .val-two-col {
display: grid; gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
/* ── Financial figures on the console ────────────────────────────────────── */
.admin-layout .fig-amount { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.admin-layout .fig-badge { font-size: .62rem; padding: .05rem .32rem; }
.admin-layout .val-head-tile {
background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 8px;
padding: 1rem 1.1rem;
}
.admin-layout .val-head-tile.is-primary {
border-color: var(--c-accent); box-shadow: inset 0 2px 0 var(--c-accent);
}
.admin-layout .val-head-tile span {
font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--c-ink-3);
}
.admin-layout .val-pending {
background: var(--c-surface); border: 1px solid var(--c-line);
border-left: 3px solid var(--c-accent);
border-radius: 6px; padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .84rem;
}
.admin-layout .val-confidence { background: var(--c-surface); border-color: var(--c-line); border-radius: 8px; }
.admin-layout .rep-doc { background: var(--c-surface); border: 1px solid var(--c-line);
border-radius: 8px; padding: 1.6rem 1.8rem; max-width: none; }
.admin-layout .gov-state { font-size: .64rem; }
.admin-layout .rep-tab { font-size: .78rem; background: var(--c-surface); }
@media (max-width: 900px) {
.admin-layout { grid-template-columns: 1fr; }
.admin-layout .admin-side { position: static; height: auto; }
.admin-layout .admin-head { position: static; }
}
/* ── Admin menu search ───────────────────────────────────────────────────────
Fifty-odd links across eleven groups is past the point where scanning beats
typing. The box sits directly under the logo and above the menu, always
visible: a search the operator has to open first is one they forget exists.
Styled to belong to the sidebar rather than to sit on top of it — the same
dark ground, a hairline border, and the gold only on focus, where it is
doing work. */
.admin-search { position: relative; margin: .9rem 0 .2rem; }
.admin-search input {
width: 100%;
background: rgba(0, 0, 0, .22);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 7px;
color: #E8EBF0;
font: inherit;
font-size: .82rem;
padding: .46rem 2rem .46rem .6rem;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
-webkit-appearance: none;
appearance: none;
}
.admin-search input::placeholder { color: rgba(255, 255, 255, .38); }
.admin-search input:hover { border-color: rgba(255, 255, 255, .2); }
.admin-search input:focus {
outline: 0;
background: rgba(0, 0, 0, .34);
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(197, 154, 61, .16);
}
/* The browser's own clear button is invisible on a dark ground. */
.admin-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* The shortcut hint, shown only while the box is idle — once someone is typing
they have plainly found it, and a key badge over their text is clutter. */
.admin-search kbd {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
font: 600 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
color: rgba(255, 255, 255, .4);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 4px;
padding: .18rem .32rem;
pointer-events: none;
transition: opacity .14s ease;
}
.admin-search input:focus ~ kbd,
.admin-search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
.admin-search-empty {
margin: .5rem 0 0; padding: 0 .1rem;
font-size: .76rem; color: rgba(255, 255, 255, .45);
}
/* The keyboard cursor. Distinct from :hover and from .is-active, because all
three can be on screen at once — the page you are on, the item under the
mouse, and the item Enter would open. */
.admin-layout .admin-side nav a.is-cursor,
.admin-side nav a.is-cursor {
background: rgba(197, 154, 61, .18);
color: #fff;
box-shadow: inset 2px 0 0 var(--gold);
}
@media (prefers-reduced-motion: reduce) {
.admin-search input, .admin-search kbd { transition: none; }
}
/* Filtering must actually hide things.
The menu sets `display: block` (and `display: flex` in the admin layout) on
its links, and an explicit display beats the user agent's
`[hidden] { display: none }`. So setting the hidden attribute changed
nothing: a search for "incident" matched one item and still showed all
fifty. !important is warranted — this has to win against any later display
rule on the same elements, and losing means the search silently does
nothing at all. */
.admin-nav a[hidden],
.admin-nav p[hidden],
.admin-layout .admin-side nav a[hidden] { display: none !important; }
/* ── Collapsible menu sections ───────────────────────────────────────────────
The heading became a button, so it has to look like one you can press —
without becoming a heavy control that competes with the links beneath it.
The whole affordance is a chevron that rotates and a ground that appears on
hover. */
.admin-nav-section { margin: 0; }
button.admin-nav-group {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
width: 100%;
background: none; border: 0; cursor: pointer;
text-align: left;
font-family: inherit;
border-radius: 5px;
transition: color .12s ease, background .12s ease;
}
button.admin-nav-group:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); }
button.admin-nav-group:focus-visible {
outline: 2px solid var(--gold); outline-offset: 1px;
}
/* The chevron points down when open and right when closed — the direction the
content will travel, which is the convention every operating system uses. */
.admin-nav-chev {
flex: 0 0 auto;
opacity: .55;
transition: transform .18s ease, opacity .12s ease;
}
button.admin-nav-group:hover .admin-nav-chev { opacity: .9; }
.admin-nav-section.is-closed .admin-nav-chev { transform: rotate(-90deg); }
/* Height is animated from a measured pixel value, set by the script — auto
cannot be transitioned. overflow hidden is what makes the clip work. */
.admin-nav-items {
overflow: hidden;
transition: height .2s cubic-bezier(.4, 0, .2, 1);
}
/* A closed section still shows a hint that something lives there: the heading
dims slightly rather than the section vanishing into the background. */
.admin-nav-section.is-closed > button.admin-nav-group { color: rgba(255,255,255,.32); }
@media (prefers-reduced-motion: reduce) {
.admin-nav-items { transition: none; }
.admin-nav-chev { transition: none; }
}
/* Spacing normalisation for the section headings.
The pre-existing rules targeted a and included `:first-of-type`. Now
that each heading is a button inside its own section, every one of them is
the first of its type in its parent, so that rule fired for all eleven
instead of one. Rhythm is set explicitly here rather than left to a selector
that no longer means what it used to. Specificity is deliberately high
enough to beat `.admin-layout .admin-nav-group`. */
.admin-layout .admin-nav-section > button.admin-nav-group,
.admin-side .admin-nav-section > button.admin-nav-group {
margin: .9rem 0 .25rem;
padding: .34rem .5rem;
}
.admin-layout .admin-nav-section:first-of-type > button.admin-nav-group,
.admin-side .admin-nav-section:first-of-type > button.admin-nav-group {
margin-top: .5rem;
}
/* Screen-reader-only text.
Migrated with the admin shell, which uses it for the menu-search label and
its keyboard hint. It exists on the Publishing side but never did here, so
both were rendering as visible body text in the sidebar — the hint sat above
the menu reading "Type to filter the menu. Use the arrow keys…" to everyone.
Defined once, globally, because the storefront will want it too. */
.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;
}
/* ── Account menu, migrated from DALFAST Publishing ──────────────────────
Storefront chrome, not admin: this sits in the site header, so it uses
this site's own tokens (--line, --paper, --ink) and picks up DALFASTART's
warm palette rather than Publishing's navy. Nothing here is scoped to
.admin-layout. */
.nav-divider {
display: block; height: 1px; background: var(--line);
margin: .45rem .7rem;
}
.account-menu { position: relative; }
.account-menu summary {
list-style: none; cursor: pointer;
display: inline-flex; align-items: center; gap: .3rem;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary::after {
content: ''; width: .5rem; height: .5rem; flex-shrink: 0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .15s;
}
.account-menu[open] summary::after { transform: rotate(180deg); }
.account-panel {
position: absolute; top: calc(100% + .7rem); right: 0; z-index: 70;
background: var(--white); border: 1px solid var(--line); border-radius: 3px;
box-shadow: 0 1px 2px rgba(11,31,59,.05), 0 22px 48px -20px rgba(11,31,59,.28);
padding: .55rem; width: 15rem; max-width: calc(100vw - 2rem);
display: flex; flex-direction: column;
}
.account-panel::before {
content: ''; position: absolute; inset: -1px 0 auto 0; height: 2px;
background: var(--brass); border-radius: 3px 3px 0 0;
}
.account-who {
margin: .25rem .7rem .5rem; padding-bottom: .55rem;
border-bottom: 1px solid var(--line);
font-size: .74rem; color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis;
}
.account-panel a, .account-signout {
display: block; width: 100%; text-align: left;
padding: .5rem .7rem; border: 0; border-radius: 2px; background: none;
font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink);
text-decoration: none; cursor: pointer;
}
.account-panel a:hover, .account-signout:hover { background: var(--paper-deep); }
.account-signout { font-weight: 500; color: var(--ink-soft); }
.account-admin { color: var(--brass-deep) !important; display: flex !important; align-items: center; gap: .5rem; }
.account-admin::before {
content: ''; width: 3px; height: 1em; flex-shrink: 0;
background: var(--brass); border-radius: 1px;
}
.account-admin:hover { background: var(--brass-pale) !important; }
/* ── Hero, gallery-wall treatment ─────────────────────────────────────────
Matched to the Aurelia reference: a WARM IVORY hero under the dark nav bar,
not a dark one. (An earlier pass here went dark — that was the second
reference, the DALFAST collections page. Aurelia's dark band is the nav
only; its hero is light, and the artwork carries the contrast.)
The traits actually doing the work in that reference:
· large high-contrast display serif, tight leading, dark on ivory
· a small brass letterspaced eyebrow with a short rule beneath it
· one deep oxblood solid button beside a hairline-outlined ghost
· a trust row divided by vertical hairlines, small-caps labels
· artwork on a warm plaster wall with real cast shadows and raking light
What was NOT taken: "Authenticated works", "Global delivery", "beautifully
framed", "From €1,850", "limited editions", "original works". Aurelia sells
physical originals; DALFASTART sells digital downloads with no
authentication programme, no framing and no shipping. The layout transfers;
the claims do not.
Single-theme by design — this site has no prefers-color-scheme blocks — so
every colour below is painted explicitly rather than inherited. */
.hero {
background: var(--hero-ground);
color: var(--ink);
position: relative;
isolation: isolate;
padding-block: clamp(3rem, 7vw, 6rem) clamp(3.2rem, 7vw, 6rem);
}
/* Raking light across a plaster wall, falling from the upper right the way a
picture light does. Decorative only, sits behind content. */
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(115% 85% at 88% 4%, rgba(255, 252, 244, .95), transparent 56%),
radial-gradient(80% 70% at 4% 100%, rgba(154, 115, 40, .07), transparent 62%);
}
/* Eyebrow with the short rule under it, as in the reference. */
/* --brass-deep, not --brass: at .7rem the eyebrow is small text, and --brass
on this ground is 3.71:1 — below the 4.5:1 AA needs. brass-deep is 5.18:1
and visually indistinguishable at this size. */
.hero .eyebrow { color: var(--brass-deep); display: inline-block; }
.hero .eyebrow::after {
content: ""; display: block; width: 3.4rem; height: 1px;
background: var(--brass-deep); opacity: .5; margin-top: .85rem;
}
.hero h1 {
/* Fraunces' 'opsz' axis at 144 is the high-contrast display cut — the thin
hairlines against heavy stems are what give the reference its edge. The
global h1 sits at opsz 100, which is the text cut. */
font-size: clamp(2.7rem, 6.6vw, 5.1rem);
font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.022em;
color: var(--ink);
margin-bottom: .42em;
}
.hero-lede {
color: var(--ink-soft);
max-width: 30rem;
font-size: clamp(1rem, 1.5vw, 1.1rem);
line-height: 1.66;
}
/* Solid oxblood beside a hairline ghost — the reference's exact pairing. */
.hero .btn {
background: var(--oxblood);
border-color: var(--oxblood);
color: #FBF6EE;
letter-spacing: .06em;
}
.hero .btn:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.hero .btn-ghost {
background: transparent;
border-color: rgba(34, 30, 24, .3);
color: var(--ink);
letter-spacing: .06em;
}
.hero .btn-ghost:hover { background: rgba(34, 30, 24, .05); border-color: var(--ink); }
.hero .btn:focus-visible, .hero .btn-ghost:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* Trust row divided by vertical hairlines rather than plain gaps. */
.hero-proof { gap: 0; border-top-color: rgba(34, 30, 24, .16); }
.hero-proof .proof {
color: var(--ink-soft);
padding-inline: 1.5rem;
border-left: 1px solid rgba(34, 30, 24, .14);
}
.hero-proof .proof:first-child { padding-left: 0; border-left: 0; }
.hero-proof .proof strong { color: var(--ink); font-variation-settings: 'opsz' 90; }
/* Hung on a wall, not tiled on paper.
NO MAT. This is the difference between the earlier pass and the
reference: .frame is a mat-board treatment — 7px border over up to 22px
of white padding — which suits a product grid, where a mat separates one
small thumbnail from the next. The reference hangs gallery pieces: the
artwork runs edge to edge and the frame is a thin metal lip around it.
Trimming the padding (the earlier attempt) only made a thinner mat; the
mat has to go entirely, which means padding:0 and a hairline border. */
.hero-wall--4 .hero-frame {
/* The mat is BACK, and heavier — matched to the product card, which is
the look asked for. The earlier pass stripped it to a 2px lip to copy
a gallery-hang reference; a mat board reads as a framed print, which
is what is actually being sold.
Percentage padding resolves against WIDTH, so one value cannot serve
every shape: 6.5% of a 252px panoramic is 16px top and bottom out of
99px of height, which leaves a letterbox slit. The short shapes get
their own, smaller figure below. */
background: var(--white);
/* Mat width is set per slot below, via --mat.
A single percentage cannot work here: CSS resolves percentage padding
against the CONTAINING BLOCK's width, not the element's own. Every
frame is positioned inside the same 434px wall, so one figure gave all
six identical 20px mats — proportionate on the 234px landscape, and
overwhelming on the 130px square, where it left the artwork at 36%% of
the frame against ~69%% on a product card.
Each slot therefore carries a figure chosen so the mat lands near 8%%
of that frame's OWN width. They stay correct as the viewport changes,
because every frame is itself a percentage of the same wall. */
padding: var(--mat, 2.4%);
/* 4px, not the product card's 7px: at 130px wide a 7px border is 5%% of
the frame against 2%% on a 342px card. */
border: 4px solid var(--wood);
box-shadow:
0 1px 2px rgba(34, 30, 24, .22),
0 16px 28px -12px rgba(34, 30, 24, .34),
0 34px 60px -26px rgba(34, 30, 24, .28);
}
/* The reference mixes warm metal and dark lacquer across the wall rather
than repeating one frame. Featured piece and the square take brass; the
landscape and panoramic stay dark. */
.hero-wall--4 .hero-frame--portrait,
.hero-wall--4 .hero-frame.frame--brass { border-color: var(--brass); }
/* The hover lift is gone too. It moved a frame 4px on mouseover, which is
the same complaint as the float in miniature — and the wall is decorative
now (aria-hidden, no link inside it), so lifting on hover promised an
interaction that does not exist. Nothing on this wall moves except an
artwork cross-fading to the next one. */
/* art_picture() wraps each image in , which is inline by default and
would collapse inside the absolutely-positioned hero frames. */
.hero-wall--4 .hero-frame picture { display: block; width: 100%; height: 100%; }
.frame picture { display: block; width: 100%; }
/* The proof row's vertical dividers only read correctly while the row is on a
single line. Once it wraps, :first-child is no longer the first item on the
visual row, so the wrapped item keeps a divider and a hanging indent — CSS
cannot detect a visual row start. Below the wrap point, drop the dividers
and space with a gap instead. */
@media (max-width: 760px) {
.hero-proof { gap: .35rem 1.6rem; }
.hero-proof .proof { padding-inline: 0; border-left: 0; }
}
/* ── Hero wall ledge ──────────────────────────────────────────────────────
The caption card that sat here — label, title and price over the featured
artwork — has been removed. It covered the piece it was captioning, and on
a narrow frame the title wrapped to two lines and took nearly half the
image. Nothing overlays the artwork now. */
/* Stone ledge the wall stands on. The first version was a 24px strip, which
read as a rule under the frames rather than a shelf they rest on. A real
ledge needs three things the strip lacked: depth (a lit top face at a
shallow angle, then a darker front face), a crisp shadow line where the
wall meets it, and enough height to look load-bearing. Decorative only. */
.hero-wall--4 { padding-bottom: 2.6rem; }
.hero-wall--4::after {
content: ""; position: absolute; z-index: 0;
left: -8%; right: -8%; bottom: 0; height: 2.6rem;
background:
/* shadow the wall casts down onto the shelf top */
linear-gradient(to bottom, rgba(34, 30, 24, .22) 0, rgba(34, 30, 24, 0) .5rem),
/* lit top face, then the front face falling into shade */
linear-gradient(to bottom, #F0E9DC 0 .95rem, #E4DACA .95rem 1.05rem, #DBD0BC 1.05rem 100%);
border-top: 1px solid rgba(255, 253, 247, .85);
box-shadow: 0 14px 22px -12px rgba(34, 30, 24, .34);
}
.hero-frame--panoramic { bottom: 2.6rem; }
@media (max-width: 860px) {
/* The wall becomes a plain 2-column grid below this width, so there is no
shelf to stand on and no absolute frame to lift. */
.hero-wall--4 { padding-bottom: 0; }
.hero-wall--4::after { display: none; }
.hero-frame--panoramic { bottom: auto; }
}
/* Fifth frame: the bottom-left corner four frames left empty. Rests on the
ledge beside the panoramic. */
.hero-frame--corner { bottom: 2.6rem; left: 1%; width: 27%; z-index: 5; }
/* The cross-fade the rotation script drives. Opacity only — a frame that also
moved would drag the eye off the headline, which is the thing the staggered
one-at-a-time turn exists to avoid. */
.hero-wall--4 .hero-frame img { transition: opacity .42s ease; }
.hero-wall--4 .hero-frame.is-turning img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.hero-wall--4 .hero-frame img { transition: none; }
}
@media (max-width: 860px) {
/* The wall is a plain grid here; corner has no corner to sit in. */
.hero-frame--corner { bottom: auto; left: auto; width: auto; }
}
/* Sixth frame: the 173x203 gap on the right that the original arrangement left
between the landscape above and the panoramic below. */
.hero-frame--aside { top: 40%; right: 0; width: 30%; z-index: 3; }
@media (max-width: 860px) {
.hero-frame--aside { top: auto; right: auto; width: auto; }
}
/* ── Collections band ─────────────────────────────────────────────────────
The dark, editorial treatment. Tokens are declared here rather than in
:root's palette because this is the only surface that uses them; if a second
dark band ever appears they should move up. */
.band-collections {
--band-ground: #14110E; /* the wall itself, deeper than --ink */
--band-ink: #F3ECDF;
--band-ink-soft: #A79D8B;
--band-line: rgba(231, 217, 188, .16);
background: var(--band-ground);
color: var(--band-ink);
padding-block: clamp(3.4rem, 7vw, 6.5rem);
}
.band-collections .eyebrow { color: var(--brass-pale); }
.band-collections h2 {
color: var(--band-ink);
font-variation-settings: 'opsz' 120;
font-size: clamp(1.9rem, 3.8vw, 2.9rem);
letter-spacing: -0.018em;
}
.band-lede {
color: var(--band-ink-soft);
max-width: 32rem; margin-top: .5rem;
font-size: .98rem; line-height: 1.6;
}
.band-all {
color: var(--brass-pale); text-decoration: none;
font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
padding-bottom: .35rem; border-bottom: 1px solid rgba(231, 217, 188, .4);
white-space: nowrap;
}
.band-all:hover { color: #FBF6EE; border-bottom-color: var(--brass-pale); }
.band-all:focus-visible { outline: 2px solid var(--brass-pale); outline-offset: 4px; }
/* Chrome-less tiles: no card box, no border, no shadow. Larger images than the
13rem grid these replaced — at that size the artwork was a stamp above three
lines of type, which is the opposite of a gallery. */
.band-collections .grid-categories {
grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
gap: 2.4rem 1.6rem;
}
.band-collections .card-category {
background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
/* No transform on hover. Nothing on this page moves by itself, and a tile
that jumps under the cursor is the same complaint in miniature. */
transition: none;
}
.band-collections .card-category:hover { transform: none; box-shadow: none; border: 0; }
.band-collections .card-category:focus-visible { outline: 2px solid var(--brass-pale); outline-offset: 5px; }
.band-collections .card-category-img {
margin: 0 0 1rem; aspect-ratio: 4 / 3; border-bottom: 0;
background: #1D1912;
box-shadow: inset 0 0 0 1px var(--band-line);
}
.band-collections .card-category-img img {
/* Held back a touch so the band reads as one surface rather than a wall of
competing thumbnails; full strength on hover. No scale — colour only. */
filter: saturate(.94) brightness(.94);
transition: filter .25s ease;
transform: none;
}
.band-collections .card-category:hover .card-category-img img {
filter: none; transform: none;
}
.band-collections .card-category h3 {
color: var(--band-ink);
font-size: 1.12rem; font-weight: 440;
font-variation-settings: 'opsz' 40;
margin: 0 0 .35rem;
display: flex; align-items: baseline; gap: .45rem;
}
.band-collections .card-category .go {
/* brass-pale, not brass: 13.48:1 on this ground against 4.35:1. The arrow
is aria-hidden so it is not held to AA, but it costs nothing to read. */
position: static; color: var(--brass-pale); font-weight: 400; font-size: .9rem;
opacity: 0; transition: opacity .2s ease;
}
.band-collections .card-category:hover .go,
.band-collections .card-category:focus-visible .go { opacity: 1; }
.band-collections .card-category p {
color: var(--band-ink-soft); font-size: .84rem; line-height: 1.55;
}
.band-collections .card-category-count {
margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--band-line);
color: var(--brass-pale);
font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
/* A collection with nothing in it is shown, not hidden — but it should not
compete with one you can actually buy from. */
.band-collections .card-category--soon .card-category-img img { filter: saturate(.35) brightness(.62); }
.band-collections .card-category--soon:hover .card-category-img img { filter: saturate(.5) brightness(.75); }
.band-collections .card-category--soon .card-category-count { color: var(--band-ink-soft); }
/* Per-slot mat. The figure is a percentage of the WALL; the comment gives
what it works out to as a share of that frame's own width. The two short
shapes take a little less, because a mat sized by width eats their
height twice over. */
.hero-wall--4 .hero-frame--portrait { --mat: 2.6%; } /* ~8% of a 139px frame */
.hero-wall--4 .hero-frame--landscape { --mat: 3.4%; } /* ~6% of a 234px frame */
.hero-wall--4 .hero-frame--square { --mat: 2.4%; } /* ~8% of a 130px frame */
.hero-wall--4 .hero-frame--panoramic { --mat: 2.1%; } /* ~4% of a 252px frame, 18% of its height */
.hero-wall--4 .hero-frame--corner { --mat: 2.2%; } /* ~8% of a 117px frame */
.hero-wall--4 .hero-frame--aside { --mat: 2.4%; } /* ~8% of a 130px frame */
/* The frames are links now. */
.hero-wall--4 .hero-frame { display: block; text-decoration: none; }
.hero-wall--4 .hero-frame:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
/* ── Filter bar, premium pass ─────────────────────────────────────────────
The bar was default form controls on a bare rule: browser-drawn select
arrows, generic borders, and a checkbox that turned the whole label red when
ticked. It read as a settings panel, not a gallery. */
.filter-bar {
gap: .5rem;
padding-block: 1rem;
border-block-color: rgba(34, 30, 24, .14);
}
.filter-bar select {
/* The native arrow is drawn by the OS and cannot be styled, so it never
matched anything else on the page. Suppressed, and replaced with a
chevron drawn in the token palette. */
appearance: none; -webkit-appearance: none;
padding: .58rem 2.1rem .58rem .9rem;
border: 1px solid rgba(34, 30, 24, .18);
border-radius: 2px;
background-color: var(--white);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A7328' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .8rem center;
font-family: var(--font-ui);
font-size: .82rem; color: var(--ink);
cursor: pointer;
transition: border-color .16s ease;
}
.filter-bar select:hover { border-color: rgba(34, 30, 24, .38); }
.filter-bar select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
/* The first control is the browse view — it leads, so it carries more weight
than the refinements beside it. */
.filter-bar select[name="view"] {
font-weight: 600;
border-color: rgba(34, 30, 24, .34);
}
.filter-check {
padding: .58rem .95rem;
border-radius: 2px;
border-color: rgba(34, 30, 24, .18);
font-family: var(--font-ui); font-size: .82rem;
transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.filter-check:hover { border-color: rgba(34, 30, 24, .38); }
.filter-check input { accent-color: var(--oxblood); }
/* Brass, not the sale red: this is an active filter, not a discount badge, and
the red read as an alert. */
.filter-check:has(input:checked) {
border-color: var(--brass);
background: rgba(154, 115, 40, .08);
color: var(--brass-deep);
font-weight: 600;
}
.filter-check:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }
.search-form input {
border-radius: 2px; border-color: rgba(34, 30, 24, .18);
font-family: var(--font-ui); font-size: .84rem;
}
.search-form input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 700px) {
/* The spacer collapses the bar into two ragged rows on a phone. */
.filter-bar .spacer { display: none; }
.filter-bar { gap: .45rem; }
.filter-bar select, .filter-check { font-size: .78rem; }
}
/* ── Contact widget, premium pass ─────────────────────────────────────────
Same chrome as DALFAST Publishing's; what was missing was the field
treatment. Inputs sat on the beige page tint with rounded generic borders,
so the panel read as a form dropped onto the page rather than part of it. */
.chat-widget-panel { padding: 1.15rem 1.15rem 1.2rem; }
.chat-widget-panel h4 {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 500;
font-variation-settings: 'opsz' 40;
letter-spacing: -0.01em;
}
.chat-widget-panel .field { margin-bottom: .45rem; }
.chat-widget-panel input[type=text],
.chat-widget-panel input[type=email],
.chat-widget-panel textarea {
background: var(--white);
border: 1px solid rgba(34, 30, 24, .18);
border-radius: 2px;
padding: .58rem .75rem;
font-family: var(--font-ui); font-size: .85rem; color: var(--ink);
transition: border-color .16s ease;
}
.chat-widget-panel input::placeholder,
.chat-widget-panel textarea::placeholder { color: #8C8474; }
.chat-widget-panel input:hover,
.chat-widget-panel textarea:hover { border-color: rgba(34, 30, 24, .34); }
.chat-widget-panel input:focus-visible,
.chat-widget-panel textarea:focus-visible {
outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass);
}
.chat-widget-panel textarea { resize: vertical; min-height: 4.6rem; }
/* Consent sits between the message and the button, where it is read before
sending rather than after. Small, but never hidden or pre-ticked. */
.cw-consent {
display: flex; align-items: flex-start; gap: .5rem;
margin-top: .65rem;
font-family: var(--font-ui); font-size: .72rem; line-height: 1.45;
color: var(--ink-soft); cursor: pointer;
}
.cw-consent input { margin-top: .15rem; flex: 0 0 auto; accent-color: var(--brass-deep); }
.cw-consent a { color: var(--brass-deep); text-decoration: underline; }
.cw-consent:focus-within { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
.chat-widget-panel .btn-block {
border-radius: 2px;
font-family: var(--font-ui); font-size: .84rem; font-weight: 600;
letter-spacing: .05em;
padding-block: .68rem;
}
/* ── Shop assistant ───────────────────────────────────────────────────────
Ported from DALFAST Publishing, recoloured to the gallery palette (theirs
uses --navy; there is no navy here). The log has a fixed height rather than
growing the panel: a floating widget that lengthens with every reply
eventually pushes its own input off the bottom of a phone screen, which is
where people use it. */
.asst-log {
max-height: 16rem; overflow-y: auto;
display: flex; flex-direction: column; gap: .5rem;
margin: .2rem 0 .75rem; padding-right: .2rem;
}
.asst-log:empty { display: none; }
.asst-msg {
font-family: var(--font-ui);
font-size: .84rem; line-height: 1.5;
padding: .5rem .7rem; border-radius: .55rem; max-width: 92%;
}
.asst-you { align-self: flex-end; background: var(--ink); color: var(--paper); }
.asst-you a { color: var(--brass-pale); }
.asst-bot {
align-self: flex-start; background: var(--paper-deep); color: var(--ink);
border: 1px solid rgba(34, 30, 24, .14);
}
.asst-msg a { text-decoration: underline; }
.asst-bot a { color: var(--brass-deep); }
.asst-row { display: flex; gap: .4rem; }
.asst-row input {
flex: 1 1 auto; min-width: 0;
background: var(--white);
border: 1px solid rgba(34, 30, 24, .18); border-radius: 2px;
padding: .58rem .75rem;
font-family: var(--font-ui); font-size: .85rem; color: var(--ink);
}
.asst-row input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
.asst-row .btn { flex: 0 0 auto; border-radius: 2px; font-size: .82rem; padding-inline: .95rem; }
.asst-row input:disabled { opacity: .6; }
/* ── Pager ────────────────────────────────────────────────────────────────
Squared, quiet, brass on the current page — the same vocabulary as the
filter bar rather than a third set of button shapes. */
.pager {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: .3rem;
margin: 2.6rem 0 .5rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(34, 30, 24, .14);
font-family: var(--font-ui);
}
.pager a, .pager span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.3rem; height: 2.3rem; padding: 0 .6rem;
font-size: .82rem; text-decoration: none; border-radius: 2px;
color: var(--ink);
border: 1px solid transparent;
transition: border-color .16s ease, background-color .16s ease;
}
.pager a:hover { border-color: rgba(34, 30, 24, .28); background: rgba(34, 30, 24, .04); }
.pager a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pager .is-current {
border-color: var(--brass);
background: rgba(154, 115, 40, .1);
color: var(--brass-deep);
font-weight: 600;
}
.pager .pager-step { font-weight: 600; letter-spacing: .02em; }
/* A disabled step stays in the layout so the row does not shift between
the first page and the second. */
.pager .is-off { color: #A9A192; cursor: default; }
.pager .pager-gap { min-width: 1.2rem; padding: 0; color: var(--ink-soft); }
@media (max-width: 560px) {
.pager a, .pager span { min-width: 2rem; height: 2rem; padding: 0 .45rem; font-size: .76rem; }
.pager .pager-step { padding: 0 .55rem; }
}
/* ── Special offers band (home) ───────────────────────────────────────────
Sits directly under the hero, so it is the first thing after the promise.
Ground is mat board rather than plaster: it separates from the plain
sections above and below without going dark, which is reserved for the
collections band further down — two dark bands on one page would each
weaken the other.
───────────────────────────────────────────────────────────────────────── */
.band-offers {
background: var(--paper-deep);
border-block: 1px solid var(--line);
padding-block: clamp(2.8rem, 5.5vw, 4.6rem);
}
.offers-head {
display: flex;
flex-wrap: wrap;
gap: 1rem clamp(1.5rem, 4vw, 3rem);
align-items: end;
justify-content: space-between;
margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.offers-head h2 {
font-variation-settings: 'opsz' 120;
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
letter-spacing: -0.018em;
margin-top: .35rem;
}
.offers-lede {
color: var(--ink-soft);
max-width: 30rem;
font-size: .95rem;
line-height: 1.6;
}
/* ── The sets ─────────────────────────────────────────────────────────── */
.offer-sets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.offer-set {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
text-decoration: none;
color: inherit;
transition: border-color .18s ease, transform .18s ease;
}
.offer-set:hover,
.offer-set:focus-visible { border-color: var(--brass); transform: translateY(-2px); }
/* Three member previews, the middle one standing slightly proud so the group
reads as a set of separate pieces rather than one wide image. */
.offer-set-mosaic {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: .4rem;
align-items: center;
padding: 1rem 1rem .4rem;
background: var(--paper);
}
.offer-set-tile { display: block; overflow: hidden; box-shadow: 0 1px 6px rgba(34, 30, 24, .14); }
.offer-set-tile img { display: block; width: 100%; height: auto; }
.offer-set-body { display: flex; flex-direction: column; gap: .18rem; padding: .85rem 1rem 1.05rem; }
.offer-set-kicker {
font-size: .68rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--brass-deep);
}
.offer-set-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.12rem; line-height: 1.25; }
.offer-set-price { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; }
.offer-set-price b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.offer-set-price s { color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.offer-set-save { color: var(--sale); font-size: .82rem; line-height: 1.4; margin-top: .12rem; }
/* ── The reduced singles ──────────────────────────────────────────────── */
.offer-pieces-head {
display: flex;
flex-wrap: wrap;
gap: .6rem 1rem;
align-items: baseline;
justify-content: space-between;
margin: clamp(2rem, 4vw, 3rem) 0 1rem;
padding-top: clamp(1.4rem, 3vw, 2rem);
border-top: 1px solid var(--line);
}
.offer-pieces-head h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; }
.offers-all { color: var(--brass-deep); font-size: .88rem; text-decoration: none; }
.offers-all:hover, .offers-all:focus-visible { text-decoration: underline; }
.offer-pieces {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
gap: clamp(.8rem, 1.8vw, 1.3rem);
}
.offer-piece { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: inherit; }
.offer-piece-frame {
position: relative;
display: block;
background: var(--white);
border: 1px solid var(--line);
padding: .5rem;
transition: border-color .18s ease;
}
.offer-piece:hover .offer-piece-frame,
.offer-piece:focus-visible .offer-piece-frame { border-color: var(--brass); }
.offer-piece-frame img { display: block; width: 100%; height: auto; }
.offer-piece-pct {
position: absolute;
top: .5rem; left: .5rem;
background: var(--sale);
color: #fff;
font-size: .68rem;
font-weight: 600;
letter-spacing: .02em;
padding: .18rem .38rem;
}
.offer-piece-title { font-size: .88rem; line-height: 1.35; margin-top: .15rem; }
.offer-piece-price { display: flex; align-items: baseline; gap: .4rem; }
.offer-piece-price b { font-size: .93rem; font-variant-numeric: tabular-nums; }
.offer-piece-price s { color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.offer-set { transition: none; }
.offer-set:hover, .offer-set:focus-visible { transform: none; }
}
/* The member pieces are portrait, landscape and square in any combination, so
letting the tiles size themselves made the mosaic band 134px tall on one
card and 258px on the next — the short ones left a hole above the title and
the tall ones crowded it. A fixed box per tile makes the band the same
height on every card whatever is inside it.
contain rather than cover: this is artwork, and cropping a piece to fit a
decorative slot shows the customer something that is not the work. The
middle column is wider, so its tile still stands proud of its neighbours. */
.offer-set-tile {
aspect-ratio: 4 / 5;
display: grid;
place-items: center;
background: var(--paper);
box-shadow: none;
}
.offer-set-tile img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 1px 5px rgba(34, 30, 24, .18));
}
/* ── Admin: merchandising (sets and offers) ───────────────────────────────
A standing explanation, distinct from .flash: a flash reports what just
happened and goes away, this states a rule that is always true and belongs
on the page whether or not anything was just done.
───────────────────────────────────────────────────────────────────────── */
.notice-box {
background: var(--paper-deep);
border: 1px solid var(--line);
border-left: 3px solid var(--brass);
padding: .85rem 1rem;
font-size: .9rem;
line-height: 1.55;
color: var(--ink-soft);
}
.notice-box strong { color: var(--ink); }
.notice-box.notice-error { border-left-color: var(--error); background: var(--error-bg); }
.notice-box ul { margin: .4rem 0 0; padding-left: 1.1rem; }
/* Small button, for row actions in admin tables. */
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
/* ── The set piece picker ─────────────────────────────────────────────── */
.set-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: .5rem;
}
.set-pick {
display: flex;
align-items: center;
gap: .6rem;
padding: .45rem .6rem .45rem .45rem;
background: var(--white);
border: 1px solid var(--line);
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.set-pick:hover { border-color: var(--brass-pale); }
.set-pick.is-chosen { border-color: var(--brass); background: var(--paper-deep); }
.set-pick input { flex: none; }
.set-pick-thumb {
flex: none;
width: 2.6rem;
aspect-ratio: 4 / 5;
display: grid;
place-items: center;
background: var(--paper);
overflow: hidden;
}
.set-pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.set-pick-meta { display: flex; flex-direction: column; min-width: 0; }
.set-pick-title {
font-size: .84rem;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.set-pick-price { font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Running totals beside the price field. */
.set-sums {
display: grid;
grid-template-columns: 1fr auto;
gap: .3rem .8rem;
margin: .9rem 0 0;
padding-top: .8rem;
border-top: 1px solid var(--line);
font-size: .88rem;
}
.set-sums dt { color: var(--ink-soft); }
.set-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* ── Admin: the Back control ──────────────────────────────────────────────
Sits above each page's own heading so it is in the same place on every
screen. Quiet by default — it is a way out, not an action — and it never
renders on the dashboard, where there is nothing above. */
.admin-back {
display: inline-flex;
align-items: center;
gap: .38rem;
margin: 0 0 .9rem;
padding: .3rem .6rem .3rem .45rem;
border: 1px solid transparent;
border-radius: 4px;
font-size: .82rem;
line-height: 1;
text-decoration: none;
color: inherit;
opacity: .72;
transition: opacity .15s ease, border-color .15s ease, background .15s ease;
}
.admin-back:hover,
.admin-back:focus-visible {
opacity: 1;
border-color: currentColor;
}
.admin-back svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .admin-back { transition: none; } }