/* Tokens first. The shell's slot is the one that must survive every redesign: inside an older Second Draft shell a 48px round button floats in the bottom-right corner, 16px in from each edge, above everything. This app draws its own note trigger instead, so second-draft-note.css sets --shell-slot to 0 and puts it back only inside such a shell. Keep clear of the corner with var(--shell-slot), never a fixed 80px, and the space is there exactly when the button is. */ :root { --shell-switcher-size: 48px; --shell-switcher-inset: 16px; --shell-switcher-gap: 16px; --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */ /* Warm — the bakery's own colours, after the drawing. */ --paper: #f2e7e1; --cream: #fcf7f2; --cocoa: #6a3326; --crust: #6a3326; --crust-soft: #f3d9c2; --apricot: #e7b58a; --apricot-tint: #f3d9c2; --blush: #ecd6c9; --olive: #585f3c; --olive-tint: #e3e0c4; --ink: #2b1f1b; --muted: #6d5a52; --rule: #e2cfc4; --ink-on-crust: #fcf7f2; --on-cocoa: #fcf7f2; --serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font: var(--sans); --r-tag: 3px; --r-panel: 5px; --r-nav: 8px; --r-round: 50%; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--font); } body { min-height: 100dvh; } button, input, select, textarea { font: inherit; color: inherit; } svg { display: block; } svg[aria-hidden="true"] { pointer-events: none; } /* In dark settings the page stays warm: dark cocoa paper, cream ink, the same apricot illustrations. The artwork itself is light on purpose, like a lit shelf, so it reads on both. */ @media (prefers-color-scheme: dark) { :root { --paper: #241914; --cream: #33231b; --cocoa: #f3d9c2; --crust: #f3d9c2; --crust-soft: #6a3326; --apricot: #e7b58a; --apricot-tint: #f3d9c2; --blush: #4a2f24; --olive: #d8cf9f; --olive-tint: #3a3a24; --ink: #fcf7f2; --muted: #e2cfc4; --rule: #6d5a52; --ink-on-crust: #241914; --on-cocoa: #241914; } .form-card .field input { background: var(--paper); } } /* The shell gives the page the whole window, behind the clock at the top and the gesture bar at the bottom: the background is ours to cover, the content ours to keep clear of both. The shell sets --shell-safe-* on before the first layout, so nothing moves afterwards; env() answers in a plain browser, where the variables are absent. See docs/shell-contract.md. The top bar carries the top inset, the page below it the rest. */ .page { max-width: 640px; margin: 0 auto; padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-bottom: calc(max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--shell-slot)); padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } /* The centred column: on a wide screen the masthead keeps to the content's column (the heading's), while the order form and the day's orders sit side by side in the full width below it. */ .column { max-width: 600px; margin: 0 auto; } /* The app's bar: the width of the window, in the flow of the page. On a phone it is the heading with the note trigger at its end, as the page's column is. On a wide screen the heading keeps to the content's column and the trigger goes to the far end, the top-right corner of the screen — never left floating in the middle of it. */ .top-bar { /* The app's navigation stays in reach however far the page scrolls, and the note trigger with it. */ position: sticky; top: 0; z-index: 10; background: var(--paper); display: flex; align-items: center; gap: var(--s3); margin: 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); padding-top: calc(18px + max(var(--shell-safe-top, 0px), env(safe-area-inset-top, 0px))); padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px))); padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px))); } .top-bar .page-heading { flex: 1; min-width: 0; margin: 0; } @media (min-width: 760px) { /* Three columns: the middle one is the page's (640px less its padding). */ .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); gap: 0; } .top-bar .page-heading { grid-column: 2; } .top-bar .top-actions { grid-column: 3; justify-self: end; } } .page-heading { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 8px; color: var(--ink); display: flex; align-items: center; gap: var(--s2); } .page-heading em { color: var(--crust); } .page-heading .heading-loaf { flex: none; } /* The note trigger: the app's own control, in the app's own colours, that opens Second Draft's note panel. It sits with the app's navigation — here at the end of the top bar, which stays — never over its content. 44px at least, and the mark keeps both of its shapes. second-draft-note.js fills in the mark and hides it from anyone who may not leave a note. */ .note-trigger { appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-nav); background: var(--cream); color: var(--crust); } /* The bar's end: the install control, when there is one, then the note trigger. */ .top-actions { display: flex; flex: none; align-items: center; gap: var(--s2); } .install-app { appearance: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-nav); background: var(--cream); color: var(--crust); font: inherit; font-weight: 600; } .install-app:focus-visible, .note-trigger:focus-visible { outline: 2px solid var(--crust); outline-offset: 2px; } .quiet { color: var(--muted); margin: 0; } .button { appearance: none; border: 0; border-radius: var(--r-nav); padding: 14px 18px; min-height: 52px; width: 100%; background: var(--crust); color: var(--ink-on-crust); font-weight: 600; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; } .button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; } .button[disabled] { opacity: 0.6; cursor: wait; } /* Messages that are not the page: keep out of the shell's 80×80 corner. */ #toast { position: fixed; left: 16px; right: var(--shell-slot); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset)); pointer-events: none; z-index: 30; } #toast:empty { display: none; } #toast > * { background: var(--ink); color: var(--paper); border-radius: var(--r-nav); padding: 12px 16px; } /* ─── The bakery ─────────────────────────────────────────────── */ /* Masthead: the order book's front page, after the drawing. The blob and the morning-bake strip are decoration only: absolutely positioned or aria-hidden, never in the reading order, never over the words. */ .mast { position: relative; padding-top: 40px; } .kicker { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--crust); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); } .kicker .count { font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); font-size: 0.95rem; } .title-wrap { position: relative; margin-top: 20px; } .blob { position: absolute; right: -36px; top: -18px; width: 210px; height: 170px; z-index: -1; } .day-title { position: relative; font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; font-size: 3rem; line-height: 1; margin: 18px 0 0; } .day-title em { display: block; font-style: italic; color: var(--crust); } .standfirst { margin: 18px 0 0; color: var(--muted); max-width: 30ch; font-size: 1.05rem; } .standfirst strong { color: var(--ink); font-weight: 600; } .counter { margin: 28px -20px 0; } .counter svg { width: 100%; height: auto; } .caption { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--muted); margin: 10px 0 0; padding-left: 20px; border-left: 1px solid var(--apricot); } /* Sections jump to, one page: the tabs are a simple line of anchors between two rules, after the drawing. */ .tabs { display: flex; margin-top: 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; color: var(--crust); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .tabs a + a { border-left: 1px solid var(--rule); } .tabs a:focus-visible { outline: 2px solid var(--crust); outline-offset: -2px; } /* Week strip: seven days on a baker's shelf, after the drawing. The rolls under each day are the order count, drawn as buns; the shelf is a line under them, aria-hidden. */ .week-wrap { margin-top: 24px; } .week-label { font-family: var(--serif); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); margin: 0 0 14px; } .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; align-items: end; text-align: center; } .day { appearance: none; border: 0; background: none; cursor: pointer; padding: 14px 0 8px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--r-tag) var(--r-tag) 0 0; position: relative; width: 100%; text-decoration: none; color: inherit; } .day .dn { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .day .dd { font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; } /* The count, drawn as little buns on the shelf. Capped at five in the markup. */ .day .ticks, .day .rolls { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; height: 14px; width: 30px; margin-top: 4px; align-content: flex-end; } .day .ticks i, .day .rolls i { width: 6px; height: 5px; border-radius: 50% 50% 35% 35%; background: var(--apricot); box-shadow: inset 0 0 0 1px var(--crust); display: block; } .day.on { background: var(--cream); box-shadow: 0 8px 18px -12px rgba(74, 34, 22, 0.45); border: 1px solid var(--rule); border-bottom: 0; } .day.on::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: var(--r-round); border: 1px solid var(--crust); } .day.on .dn { color: var(--olive); } .day.on .dd { font-style: italic; font-weight: 500; color: var(--crust); } .day:focus-visible { outline: 2px solid var(--crust); outline-offset: 2px; } .shelf { width: 100%; height: 18px; } /* To bake: what the day adds up to, drawn with the loaves beside the counts. */ .bake { margin-top: 36px; } .bake h2, .run-head h2, .form-card h2.label, .missed h2.label, .missed h2 { font-family: var(--serif); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); margin: 0; } .bake-list { margin: 10px 0 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; } .bake-list b { font-weight: 500; color: var(--crust); font-style: italic; } /* The drawn tally: icon, count, name. The text still reads first; the icon is aria-hidden and fixed at 44px so it never pushes the words aside. */ .tally { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .tally li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); } .tally li:nth-child(-n+2) { border-top: 0; } .tally svg { width: 44px; height: 44px; } .tally b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--crust); } .tally span { font-size: 0.92rem; line-height: 1.25; color: var(--ink); } /* The running order, by pickup time. */ .run { margin-top: 44px; } .run-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-bottom: var(--s2); } .run-head span { font-size: 0.9rem; color: var(--muted); font-family: var(--serif); font-style: italic; } .slot { display: grid; grid-template-columns: 70px 1fr; position: relative; } .slot .t { text-align: right; padding: 18px 16px 0 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--crust); } .slot .t small { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-weight: 600; } .slot.next .t small { color: var(--olive); } .slot .body { border-left: 1px solid var(--rule); padding: 16px 0 24px 20px; position: relative; } .slot .body::before { content: ""; position: absolute; left: -4px; top: 24px; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--paper); border: 1px solid var(--crust); } .name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.25; margin: 0; } .slot.past .name { color: var(--muted); } .phone { font-size: 0.9rem; color: var(--muted); margin: 2px 0 0; } .items { margin: 10px 0 0; padding: 0; list-style: none; } .items li { font-size: 1rem; line-height: 1.5; display: flex; gap: 10px; align-items: baseline; } .items li .q { font-family: var(--serif); font-style: italic; color: var(--crust); min-width: 16px; } .tag { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--olive); color: var(--olive); border-radius: var(--r-tag); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; } /* The next pickup gets the one paper panel. Its watermark sits behind the words, bottom-right, at low opacity, and never intercepts a tap. */ .slot.next .body::before { background: var(--crust); } .panel { position: relative; background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-panel); padding: 16px 18px 18px; margin-left: -4px; overflow: hidden; box-shadow: 0 1px 0 rgba(106, 51, 38, 0.05), 0 14px 28px -18px rgba(74, 34, 22, 0.5); } .panel .note { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); margin: 0 0 6px; } .panel .mark { position: absolute; right: -8px; bottom: -10px; width: 86px; height: 86px; opacity: 0.9; } .panel > *:not(.mark) { position: relative; } /* An empty day says so, plainly — never a blank screen. Unfilled, on the paper. */ .empty { background: transparent; border: 1px dashed var(--crust); border-radius: var(--r-panel); padding: 24px 20px; margin-top: 16px; text-align: center; color: var(--muted); } .empty strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; } .empty p { margin: 0; } /* The order form: an order slip on cream paper, after the drawing. The dashed line and the loaf at its head are decoration; the fields and the button keep their size and order. */ .form-card { position: relative; margin-top: 56px; background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-panel); padding: 30px 20px 24px; box-shadow: 0 18px 36px -24px rgba(74, 34, 22, 0.45); } .form-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; border-top: 1px dashed var(--apricot); } .slip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); } .slip-head h2, .form-card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; margin: 8px 0 0; text-transform: none; color: var(--ink); } .slip-head h2 em, .form-card h2 em { font-style: italic; color: var(--crust); } .slip-head svg { flex: none; width: 64px; height: 56px; margin-bottom: -2px; } .form-card fieldset { border: 0; margin: 26px 0 0; padding: 0; } .form-card legend { font-weight: 600; padding: 0; margin-bottom: 8px; } .form-card legend .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.9rem; } .pick { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); } .pick:first-of-type { border-top: 0; } .pick svg { width: 40px; height: 40px; } .pick .what { font-weight: 600; line-height: 1.25; } .pick .what small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; } .stepper { display: flex; align-items: center; gap: 6px; } .stepper button { appearance: none; width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--crust); background: transparent; color: var(--crust); font-size: 1.3rem; line-height: 1; cursor: pointer; } .stepper button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; } .stepper output { font-family: var(--serif); font-size: 1.3rem; min-width: 2ch; text-align: center; } .pick.has output { color: var(--crust); font-style: italic; font-weight: 500; } .field { margin-top: 12px; } .field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; } .field input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-tag); background: #fffdfa; color: var(--ink); } .field input::placeholder { color: var(--muted); opacity: 1; } .field input:focus-visible { outline: 2px solid var(--crust); outline-offset: 1px; } .field .error { color: var(--crust); font-size: 0.9rem; margin: 4px 0 0; font-weight: 600; } .when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-card .button { width: 100%; margin-top: 26px; } /* The confirmation: the order, counted. */ .done { background: var(--olive-tint); border: 1px solid var(--olive); border-radius: var(--r-panel); padding: 20px 18px; margin-top: 0; margin-bottom: 18px; } .done h2 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0; } .done p { margin: 8px 0 0; } .done .again { background: none; border: 0; padding: 0; margin-top: 12px; color: var(--crust); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; } /* Not collected: past pickups to review, newest day first. The box at its head is the section's picture; the orders below keep their shape. */ .missed { margin-top: 64px; } .missed-top { display: flex; align-items: center; gap: 12px; } .missed-top svg { width: 34px; height: 34px; flex: none; } .missed .quiet { margin-top: 8px; font-size: 0.95rem; } .missed-day { margin-top: 0; } .missed-day h3, .missed-list h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.15rem; margin: 24px 0 0; color: var(--crust); } .missed .slot .name { font-size: 1.1rem; } .missed .slot .body { padding-bottom: 14px; } /* Reminders: the bakery's bell. The bell beside the words is the section's picture, fixed at 40px, never over the button. */ .bell { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .bell svg { width: 40px; height: 40px; } .bell p { margin: 0; font-size: 0.95rem; color: var(--muted); } .bell p strong { color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 1.05rem; } .bell button { grid-column: 2; justify-self: start; margin-top: 12px; appearance: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-nav); background: var(--crust); color: var(--ink-on-crust); font-weight: 600; cursor: pointer; } .bell button[aria-pressed="true"] { background: var(--cream); color: var(--crust); border: 1px solid var(--crust); } html[data-second-draft-reminders="unavailable"] .bell, html[data-second-draft-reminders="blocked"] .bell { display: none; } .end { margin: 28px 0 0; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--muted); } .colophon { margin-top: 56px; padding-bottom: 48px; text-align: center; } .colophon svg { margin: 0 auto 10px; width: 120px; height: 24px; } .colophon p { margin: 0; font-family: var(--serif); font-style: italic; color: var(--muted); } /* A wide window is a layout, not a strip: the form and the day's orders sit side by side, each with room, and the page grows. The masthead keeps its centred column with the heading. */ @media (min-width: 900px) { .page { max-width: 1040px; } .duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; } .day-title { font-size: 3.25rem; } .missed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }