tanshu
b13042f0db
Google Stitch produced an Atelier Dining & Hospitality system for this app: warm ivory linen and espresso for the guest surfaces, burnished gold for the single active thing, Playfair Display for the restaurant's voice and Plus Jakarta Sans for everything transactional, editorial rows with dot leaders, pill controls, hairline containment instead of drop shadows. The four screens and the system document are kept in docs/design/stitch/ as the source. Both fonts are now self-hosted with their licences, the guest stylesheet is rebuilt on the system, and the admin is the same system in its dark mode (espresso workspace, obsidian pods, gold actions) by overriding the same tokens at a higher specificity, since the per-Site theme is injected inline after the stylesheets. The Site theme in config/ moves to the system's palette, which is where per-Site branding belongs; the old Archivo font is dropped.
564 lines
11 KiB
CSS
564 lines
11 KiB
CSS
/* Hops n Grains menus, to the Atelier Dining & Hospitality system that came out
|
|
of Stitch: ivory linen and espresso for the guest's menu, burnished gold for
|
|
the one active thing on screen, Playfair Display carrying the restaurant's
|
|
voice and Plus Jakarta Sans carrying everything transactional.
|
|
See docs/design/stitch/atelier-dining-hospitality.md. */
|
|
|
|
@font-face {
|
|
font-family: 'Playfair Display';
|
|
font-style: normal;
|
|
font-weight: 400 700;
|
|
font-display: swap;
|
|
src: url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
|
|
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Plus Jakarta Sans';
|
|
font-style: normal;
|
|
font-weight: 200 800;
|
|
font-display: swap;
|
|
src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
|
|
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
:root {
|
|
/* guest surfaces: warm ivory linen, never stark white */
|
|
--steel: #faf8f5;
|
|
--rail: #f4f1ea;
|
|
--paper: #ffffff;
|
|
--ink: #121110;
|
|
--ink-soft: #4b4640;
|
|
--ink-dim: #8c857b;
|
|
--ink-on-paper: #121110;
|
|
--accent: #c59b58;
|
|
--copper: #b08544;
|
|
--hairline: #e6e1d8;
|
|
--hairline-soft: #efebe4;
|
|
--sheet-shadow: rgba(18, 17, 16, 0.06);
|
|
--shadow-card: 0 4px 20px -2px rgba(18, 17, 16, 0.04), 0 2px 6px -1px rgba(18, 17, 16, 0.02);
|
|
--shadow-float: 0 12px 36px -4px rgba(18, 17, 16, 0.08), 0 4px 12px -2px rgba(18, 17, 16, 0.04);
|
|
--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
|
--font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
--radius-card: 0.5rem;
|
|
--radius-pill: 9999px;
|
|
--step-0: 1rem;
|
|
--step-1: 1.25rem;
|
|
--step-2: 1.75rem;
|
|
--page-max: 780px;
|
|
--content-max: 46rem;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--steel);
|
|
color: var(--ink);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--step-0);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Every uppercase label in this system is tracked, never tight. */
|
|
.label {
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* ---------- Landing: the menu directory ---------- */
|
|
|
|
.landing {
|
|
max-width: var(--content-max);
|
|
margin: 0 auto;
|
|
padding: 0 1.25rem 3.5rem;
|
|
}
|
|
|
|
.masthead {
|
|
padding: clamp(2.25rem, 10vh, 4.5rem) 0 1.75rem;
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
|
|
.wordmark {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2rem, 8vw, 2.75rem);
|
|
font-weight: 400;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.masthead__tagline {
|
|
margin: 0.6rem 0 0;
|
|
color: var(--ink-soft);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.shelves {
|
|
display: block;
|
|
}
|
|
|
|
.shelf {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
padding: 0.95rem 0;
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
|
|
.shelf__peek {
|
|
flex: 0 0 auto;
|
|
width: 3.4rem;
|
|
height: 4.4rem;
|
|
overflow: hidden;
|
|
border: 1px solid var(--hairline);
|
|
border-radius: var(--radius-card);
|
|
background: var(--paper);
|
|
}
|
|
|
|
.shelf__peek img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
|
|
}
|
|
|
|
.shelf__name {
|
|
font-family: var(--font-display);
|
|
font-size: 1.45rem;
|
|
font-weight: 400;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.shelf:hover .shelf__name,
|
|
.shelf:focus-visible .shelf__name {
|
|
color: var(--amber-deep, #b08544);
|
|
}
|
|
|
|
.shelf:hover .shelf__peek img,
|
|
.shelf:focus-visible .shelf__peek img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* the dot leader that carries the eye from the name to the count */
|
|
.leader {
|
|
flex: 1 1 auto;
|
|
align-self: flex-end;
|
|
margin-bottom: 0.4rem;
|
|
border-bottom: 1px dotted #cdc5bd;
|
|
}
|
|
|
|
.shelf__pages {
|
|
flex: 0 0 auto;
|
|
color: var(--ink-soft);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.empty {
|
|
max-width: 34ch;
|
|
margin: 1.25rem 0 0;
|
|
color: var(--ink-soft);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
/* ---------- Section page: the menu bar ---------- */
|
|
|
|
.bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.6rem 1.25rem;
|
|
background: color-mix(in srgb, var(--steel) 92%, transparent);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
|
|
.bar__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.bar__brand img {
|
|
display: block;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: var(--radius-pill);
|
|
}
|
|
|
|
.bar__name {
|
|
font-family: var(--font-display);
|
|
font-size: 1.05rem;
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bar__nav {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
gap: 0.35rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.bar__nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.bar__link {
|
|
padding: 0.42rem 0.9rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-pill);
|
|
color: var(--ink-soft);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
transition: background 0.18s ease, color 0.18s ease;
|
|
}
|
|
|
|
.bar__link:hover {
|
|
background: color-mix(in srgb, var(--accent) 16%, transparent);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.bar__link.is-current {
|
|
background: var(--ink);
|
|
color: var(--steel);
|
|
}
|
|
|
|
.pour {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -1px;
|
|
left: 0;
|
|
height: 2px;
|
|
background: transparent;
|
|
}
|
|
|
|
.pour__fill {
|
|
display: block;
|
|
width: 0;
|
|
height: 100%;
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* ---------- The pages themselves ---------- */
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
max-width: var(--page-max);
|
|
margin: 1.75rem auto 1rem;
|
|
padding: 0 1.25rem;
|
|
}
|
|
|
|
.section-heading__label {
|
|
font-family: var(--font-display);
|
|
font-size: var(--step-2);
|
|
font-weight: 400;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.section-heading__date {
|
|
color: var(--ink-dim);
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.notice {
|
|
max-width: var(--page-max);
|
|
margin: 0 auto 1.25rem;
|
|
padding: 0.7rem 0.9rem;
|
|
border-left: 2px solid var(--accent);
|
|
background: var(--rail);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.notice a {
|
|
color: var(--copper);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.notice--admin {
|
|
max-width: none;
|
|
background: color-mix(in srgb, var(--accent) 12%, var(--rail));
|
|
}
|
|
|
|
.pages {
|
|
max-width: var(--page-max);
|
|
margin: 0 auto;
|
|
padding: 0 1.25rem 1.5rem;
|
|
}
|
|
|
|
.page {
|
|
margin: 0 0 0.85rem;
|
|
padding: 0.4rem;
|
|
background: var(--paper);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.page__zoom {
|
|
display: block;
|
|
}
|
|
|
|
.page img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* ---------- Footer: page index and older menus ---------- */
|
|
|
|
.foot {
|
|
max-width: var(--page-max);
|
|
margin: 0 auto 5rem;
|
|
padding: 0 1.25rem 1rem;
|
|
border-top: 1px solid var(--hairline);
|
|
}
|
|
|
|
.fold {
|
|
padding: 0.85rem 0;
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
|
|
.fold summary {
|
|
color: var(--ink-soft);
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fold[open] summary {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.index {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem;
|
|
margin: 0;
|
|
padding: 1rem 0 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.index a {
|
|
display: block;
|
|
min-width: 2.4rem;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid var(--hairline);
|
|
border-radius: var(--radius-pill);
|
|
color: var(--ink-soft);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: center;
|
|
}
|
|
|
|
.index a:hover,
|
|
.index a:focus-visible {
|
|
background: var(--ink);
|
|
color: var(--steel);
|
|
}
|
|
|
|
.older {
|
|
margin: 0.6rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.older a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.55rem 0.15rem;
|
|
border-bottom: 1px solid var(--hairline-soft);
|
|
}
|
|
|
|
.older__label {
|
|
font-family: var(--font-display);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.older__date {
|
|
color: var(--ink-dim);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.fold__back {
|
|
margin: 0.85rem 0 0;
|
|
}
|
|
|
|
.fold__back a {
|
|
color: var(--copper);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ---------- Counter and zoom ---------- */
|
|
|
|
.counter {
|
|
position: fixed;
|
|
right: 1.25rem;
|
|
bottom: calc(1.25rem + env(safe-area-inset-bottom));
|
|
z-index: 30;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.35rem;
|
|
padding: 0.55rem 0.9rem;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--ink);
|
|
color: var(--steel);
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-variant-numeric: tabular-nums;
|
|
box-shadow: var(--shadow-float);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.counter[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.counter__total {
|
|
color: color-mix(in srgb, var(--steel) 62%, transparent);
|
|
}
|
|
|
|
.zoom {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
overflow: auto;
|
|
background: rgba(18, 17, 16, 0.45);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-overflow-scrolling: touch;
|
|
padding: 1.25rem 0;
|
|
}
|
|
|
|
.zoom img {
|
|
display: block;
|
|
width: min(100%, 1600px);
|
|
height: auto;
|
|
margin: 0 auto;
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-float);
|
|
}
|
|
|
|
.zoom__close {
|
|
position: fixed;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
z-index: 1;
|
|
padding: 0.55rem 1rem;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--ink);
|
|
color: var(--steel);
|
|
font: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ---------- Wider screens ---------- */
|
|
|
|
@media (min-width: 62rem) {
|
|
.landing {
|
|
padding-bottom: 4.5rem;
|
|
}
|
|
|
|
.shelf {
|
|
padding: 1.15rem 0;
|
|
}
|
|
|
|
.shelf__name {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
.pages {
|
|
max-width: 820px;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.bar,
|
|
.counter,
|
|
.fold,
|
|
.notice {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
background: #fff;
|
|
}
|
|
|
|
.page {
|
|
border: 0;
|
|
box-shadow: none;
|
|
break-inside: avoid;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|