/* ========================================================================== Art & Craft — the handmade room -------------------------------------------------------------------------- Loaded only on /art-and-craft, after style.css, on . Everything here is scoped to .artisan so the rest of the shop is untouched. The brief was that this page must not look like the rest of the store, and the rest of the store is built to sell fast: white ground, green brand, red savings, shadowed cards, two per row. So this page does the opposite on purpose. Warm paper instead of white. A serif with real character instead of the UI sans. Hairlines instead of shadows -- a gallery hangs work on a wall, it does not put it in a box. Space instead of density, because one handmade piece sells by being looked at, not by being stacked next to eleven others. Only the palette tokens are overridden, not the layout primitives, so the shared header, footer, cart badge and search keep working exactly as they do everywhere else -- they simply change colour. ========================================================================== */ .artisan { /* --- the palette: paper, ink, clay, brass, sage --- */ --paper: #f6f1e8; /* unbleached sheet */ --paper-deep: #efe8dc; /* the same sheet in shadow */ --paper-edge: #e4dbcb; --ink: #1b1815; /* warm near-black, never #000 */ --ink-soft: #5a5248; --ink-faint: #8d8378; --clay: #a4552f; /* terracotta -- the one loud colour */ --clay-deep: #83421f; --brass: #b08d4f; --sage: #6f7a63; --line: #ded4c3; --line-strong: #cabfa9; /* --- shared tokens the header, footer and buttons already read --- */ --brand: var(--clay); --brand-dark: var(--clay-deep); --brand-tint: #f0e6db; --save: var(--clay); --bg: var(--paper); --bg-deep: var(--paper-deep); --surface: #fffdf8; --photo-plate: var(--paper-deep); --success: var(--sage); --danger: var(--clay-deep); --color-border: var(--line); --color-text-muted: var(--ink-soft); /* Square-ish. Rounded corners read as "app"; this wants "print". */ --r: 3px; --r-sm: 2px; --display: "Fraunces", Georgia, "Times New Roman", serif; --track: .2em; /* Shadows off. A hairline does the same job with more restraint. */ --shadow: none; --shadow-lift: none; background: var(--paper); color: var(--ink); } /* A whisper of grain so the ground reads as paper rather than a flat fill. Inline SVG turbulence: ~300 bytes, no extra request, and it sits behind everything at 4% so it never fights the photography. */ .artisan::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .artisan > * { position: relative; z-index: 1; } /* ---------------------------------------------- shared chrome, retinted --- */ .artisan .topbar { background: var(--ink); color: var(--paper); letter-spacing: .04em; } .artisan .site-header{ background: var(--paper); border-bottom: 1px solid var(--line); } .artisan .site-nav { background: var(--paper); border-top: 1px solid var(--line); } .artisan .site-nav a { color: var(--ink-soft); } .artisan .site-nav a:hover { color: var(--clay); } /* !important because style.css marks this link with !important for the normal theme; on paper the gold disappears, so clay wins here. */ .artisan .site-nav__feature { color: var(--clay) !important; } .artisan .site-footer{ background: var(--paper-deep); border-top: 1px solid var(--line); } .artisan .site-search input { background: var(--surface); border-color: var(--line); } /* ------------------------------------------------------------------ type --- */ .artisan .a-eyebrow { font: 600 11px/1 var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--clay); display: block; margin-bottom: 18px; } .artisan .a-display { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; line-height: 1.04; color: var(--ink); margin: 0; /* Big, but it has to survive a 360px phone -- clamp does the whole curve. */ font-size: clamp(38px, 8.5vw, 76px); } .artisan .a-display em { font-style: italic; color: var(--clay); } .artisan .a-lede { font: 400 17px/1.72 var(--sans); color: var(--ink-soft); max-width: 46ch; margin: 22px 0 0; } .artisan .a-rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* --------------------------------------------------------------- section --- */ .artisan .a-section { padding-block: clamp(56px, 9vw, 104px); } .artisan .a-section--tight { padding-block: clamp(40px, 6vw, 68px); } .artisan .a-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; } .artisan .a-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4.2vw, 40px); letter-spacing: -.015em; line-height: 1.1; margin: 0; } .artisan .a-head p { font: 400 14px/1.6 var(--sans); color: var(--ink-faint); margin: 0; } /* ------------------------------------------------------------------ hero --- */ .artisan .a-hero { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; padding-block: clamp(44px, 7vw, 92px) clamp(40px, 6vw, 76px); } @media (min-width: 900px) { .artisan .a-hero { /* Deliberately not 1fr 1fr. The off-balance split is what stops it reading as a template. */ grid-template-columns: 1.02fr .98fr; gap: 64px; } } .artisan .a-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .artisan .a-btn { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 16px 26px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 2px; transition: background .22s ease, color .22s ease, border-color .22s ease; } .artisan .a-btn:hover { background: var(--clay); border-color: var(--clay); color: #fff; } .artisan .a-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .artisan .a-btn--ghost:hover { background: transparent; color: var(--clay); border-color: var(--clay); } /* The hero picture: three plates, overlapping, slightly off-axis. Built from whatever photography the collection actually has -- see the view, which falls back to a drawn plate when a slot has no product yet. */ .artisan .a-collage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-inline: auto; } .artisan .a-plate { position: absolute; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(27, 24, 21, .10); } .artisan .a-plate img { width: 100%; height: 100%; object-fit: cover; display: block; } .artisan .a-plate--1 { left: 0; top: 4%; width: 58%; aspect-ratio: 4/5; transform: rotate(-2.2deg); } .artisan .a-plate--2 { right: 0; top: 0; width: 40%; aspect-ratio: 1/1; transform: rotate(1.8deg); } .artisan .a-plate--3 { right: 4%; bottom: 0; width: 50%; aspect-ratio: 5/4; transform: rotate(-1.2deg); } /* The drawn fallback, so an empty collection still looks composed. */ .artisan .a-plate--blank { display: grid; place-items: center; background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(164, 85, 47, .07) 11px 12px), var(--paper-deep); } .artisan .a-plate--blank span { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--ink-faint); } /* ------------------------------------------------------------ ethos strip --- */ .artisan .a-ethos { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr; } @media (min-width: 720px) { .artisan .a-ethos { grid-template-columns: repeat(3, 1fr); } } .artisan .a-ethos > div { padding: 26px 4px; border-bottom: 1px solid var(--line); } .artisan .a-ethos > div:last-child { border-bottom: 0; } @media (min-width: 720px) { .artisan .a-ethos > div { border-bottom: 0; border-left: 1px solid var(--line); padding: 30px 28px; } .artisan .a-ethos > div:first-child { border-left: 0; padding-left: 0; } } .artisan .a-ethos h3 { font-family: var(--display); font-weight: 400; font-size: 19px; margin: 0 0 7px; letter-spacing: -.01em; } .artisan .a-ethos p { font: 400 14px/1.62 var(--sans); color: var(--ink-soft); margin: 0; } /* -------------------------------------------------------------- the grid --- */ .artisan .a-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } @media (min-width: 700px) { .artisan .a-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; } } @media (min-width: 1040px) { .artisan .a-grid { grid-template-columns: repeat(4, 1fr); gap: 46px 30px; } } /* A mounted print: hairline frame, wide mat, the work sitting inside it. */ .artisan .a-piece { position: relative; display: flex; flex-direction: column; } .artisan .a-piece__frame { display: block; position: relative; background: var(--surface); border: 1px solid var(--line); padding: 10px; overflow: hidden; transition: border-color .25s ease; } @media (min-width: 700px) { .artisan .a-piece__frame { padding: 16px; } } .artisan .a-piece:hover .a-piece__frame { border-color: var(--line-strong); } .artisan .a-piece__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-deep); transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .artisan .a-piece:hover .a-piece__img { transform: scale(1.035); } .artisan .a-piece__initials { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--paper-deep); font-family: var(--display); font-size: 26px; color: var(--ink-faint); letter-spacing: .04em; } /* Ribbon, not a red pill. */ .artisan .a-piece__flag { position: absolute; top: 0; left: 0; z-index: 2; background: var(--clay); color: #fff; font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; } .artisan .a-piece__body { padding: 14px 2px 0; } .artisan .a-piece__name { font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: -.005em; color: var(--ink); display: block; /* Two lines, then ellipsis -- a ragged grid is the fastest way to make a gallery look careless. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .artisan .a-piece__name:hover { color: var(--clay); } .artisan .a-piece__meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 9px; } .artisan .a-piece__price { font: 600 14px/1 var(--sans); letter-spacing: .03em; color: var(--ink); } .artisan .a-piece__was { font: 400 12.5px/1 var(--sans); color: var(--ink-faint); text-decoration: line-through; } .artisan .a-piece__out { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--clay-deep); } .artisan .a-piece__add { margin-top: 13px; width: 100%; font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 12px 10px; background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .artisan .a-piece__add:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); } .artisan .a-piece__add:disabled { color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; } /* ------------------------------------------------------------- the making --- */ .artisan .a-steps { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } @media (min-width: 820px) { .artisan .a-steps { grid-template-columns: repeat(3, 1fr); } } .artisan .a-step { padding: 30px 0; border-bottom: 1px solid var(--line); } @media (min-width: 820px) { .artisan .a-step { border-bottom: 0; border-left: 1px solid var(--line); padding: 38px 32px 8px; } .artisan .a-step:first-child { border-left: 0; padding-left: 0; } } .artisan .a-step__n { font-family: var(--display); font-style: italic; font-size: 40px; line-height: 1; color: var(--brass); display: block; margin-bottom: 16px; } .artisan .a-step h3 { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -.01em; margin: 0 0 9px; } .artisan .a-step p { font: 400 14.5px/1.7 var(--sans); color: var(--ink-soft); margin: 0; } /* -------------------------------------------------------------- commission --- */ .artisan .a-commission { background: var(--ink); color: var(--paper); padding: clamp(40px, 7vw, 76px) clamp(22px, 5vw, 64px); display: grid; gap: 30px; align-items: center; } @media (min-width: 880px) { .artisan .a-commission { grid-template-columns: 1.3fr .7fr; gap: 54px; } } .artisan .a-commission h2 { font-family: var(--display); font-weight: 400; font-size: clamp(27px, 4.6vw, 42px); line-height: 1.12; letter-spacing: -.015em; margin: 0; color: var(--paper); } .artisan .a-commission h2 em { font-style: italic; color: var(--brass); } .artisan .a-commission p { font: 400 15.5px/1.72 var(--sans); color: #c9c0b3; margin: 18px 0 0; max-width: 52ch; } .artisan .a-commission .a-eyebrow { color: var(--brass); } .artisan .a-commission .a-btn { background: var(--paper); color: var(--ink); border-color: var(--paper); width: 100%; justify-content: center; } .artisan .a-commission .a-btn:hover { background: var(--clay); border-color: var(--clay); color: #fff; } /* ------------------------------------------------------------- empty state --- */ .artisan .a-empty { border: 1px solid var(--line); background: var(--surface); padding: clamp(36px, 6vw, 62px) clamp(20px, 4vw, 48px); text-align: center; } .artisan .a-empty h2 { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 3.6vw, 32px); letter-spacing: -.01em; margin: 0 0 12px; } .artisan .a-empty p { font: 400 15px/1.7 var(--sans); color: var(--ink-soft); margin: 0 auto 26px; max-width: 52ch; } /* ------------------------------------------------------------------ sort --- */ .artisan .a-sort { display: flex; gap: 20px; flex-wrap: wrap; } .artisan .a-sort a { font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 5px; border-bottom: 1px solid transparent; } .artisan .a-sort a:hover { color: var(--ink); } .artisan .a-sort a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--clay); } /* ------------------------------------------------------------- pagination --- */ .artisan .a-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 54px; } .artisan .a-pager a, .artisan .a-pager span { min-width: 42px; text-align: center; font: 500 13px/1 var(--sans); padding: 13px 12px; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 2px; } .artisan .a-pager a:hover { border-color: var(--ink); color: var(--ink); } .artisan .a-pager span[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* --------------------------------------------------------------- motion --- */ @media (prefers-reduced-motion: reduce) { .artisan *, .artisan *::before, .artisan *::after { transition: none !important; animation: none !important; } .artisan .a-piece:hover .a-piece__img { transform: none; } }