/* ========================================================= Frapp & Capp design system: "The Docket" Every cafe prints a docket. The site is built like one. Tokens, base, type, then components. Sizes are in rem so the "Bigger text" mode scales everything together. ========================================================= */ :root { --paper: #F6F1E7; /* thermal paper, page ground */ --docket: #FFFDF8; /* docket white, raised surfaces */ --ink: #10284A; /* brand navy as printer ink */ --ink-2: #5B6478; /* muted ink for secondary copy (4.6:1 on paper) */ --rule: #D9D0BF; /* light rules */ --rule-2: #C9BEA8; /* dashed and dotted rules */ --stamp: #EA7424; /* orange, fills only, navy text on top */ --stamp-hover: #F08A3E; --stamp-ink: #A8470B; /* orange as ink (text, stamp outlines): 5.2:1 on docket */ --sky: #8AD0EA; /* open-now dot only */ --band: #10284A; /* ink band ground */ --band-text: #F6F1E7; --band-muted: #B7C0D1; --band-rule: rgba(246, 241, 231, .3); --wash: rgba(16, 40, 74, .06); --shadow: 0 1px 0 rgba(16, 40, 74, .06), 0 14px 34px rgba(16, 40, 74, .12); --display: 'Fredoka', 'Nunito', 'Segoe UI', sans-serif; --sans: 'Nunito', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* dockets only, per client */ --max: 1200px; /* counter width */ --docket-w: 680px; /* single docket column */ --pad: 20px; --radius: 4px; --rule-w: 1.5px; --rule-w2: 2px; --header-h: 66px; } /* Reading modes (set on by the pre-paint script and the header toggles) */ html[data-text="big"] { font-size: 129.375%; } /* 20.7px base */ html[data-contrast="high"] { --paper: #FFFFFF; --docket: #FFFFFF; --ink: #000000; --ink-2: #000000; --rule: #000000; --rule-2: #000000; --stamp: #A8470B; --stamp-hover: #8A3A08; --stamp-ink: #A8470B; --band: #000000; --band-text: #FFFFFF; --band-muted: #FFFFFF; --band-rule: #FFFFFF; --wash: rgba(0, 0, 0, .08); --shadow: 0 0 0 2px #000; --rule-w: 2.5px; --rule-w2: 3px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; display: block; } img { height: auto; } a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--stamp-ink); } :focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 2px; } html[data-contrast="high"] :focus-visible { outline-color: #000; } html[data-contrast="high"] .band :focus-visible, html[data-contrast="high"] .stub :focus-visible { outline-color: #fff; } ::selection { background: var(--stamp); color: var(--ink); } hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- Type ---------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 6vw, 4rem); } h2 { font-size: clamp(1.7rem, 4vw, 2.55rem); } h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.15; } h4 { font-size: 1rem; } p { margin: 0; max-width: 62ch; } p + p { margin-top: 0.9em; } ul, ol { margin: 0; padding-left: 1.2em; } li + li { margin-top: 0.35em; } strong, b { font-weight: 700; } small { font-size: 0.85rem; } .lede { font-size: 1.1rem; color: var(--ink-2); margin-top: 1.2rem; max-width: 52ch; line-height: 1.5; } .eyebrow { font-family: var(--sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp-ink); margin: 0 0 0.8rem; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-2); } .center { text-align: center; } .prose { max-width: 62ch; } .prose h2, .prose h3 { margin-top: 1.6em; margin-bottom: 0.5em; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose ul, .prose ol { margin: 0.6em 0 0.9em; max-width: 58ch; } .prose a { text-decoration-thickness: 1.5px; } .textlink { font-family: var(--sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; } .textlink::after { content: " \2192"; } .alt { color: var(--stamp-ink); display: block; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .wrap-narrow { max-width: var(--docket-w); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .wrap-prose { max-width: 760px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .section { padding: 80px 0; } .section-tight { padding: 48px 0; } .section-flush { padding: 0 0 80px; } .section-head { max-width: 62ch; margin-bottom: 36px; } .section-head p { margin-top: 0.8rem; color: var(--ink-2); font-size: 1.05rem; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .grid-2.center { align-items: center; text-align: inherit; } .grid-2.wide-left { grid-template-columns: 1.2fr 1fr; } .grid-2.wide-right { grid-template-columns: 1fr 1.2fr; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .stack { display: flex; flex-direction: column; gap: 16px; } .cluster { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; } @media (max-width: 900px) { .grid-2, .grid-2.wide-left, .grid-2.wide-right { grid-template-columns: 1fr; gap: 28px; } .grid-3 { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 767px) { .section { padding: 56px 0; } .section-flush { padding-bottom: 56px; } .section-head { margin-bottom: 24px; } } /* Skip link */ .skip { position: absolute; left: 12px; top: -80px; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--sans); font-size: 0.85rem; z-index: 100; border-radius: var(--radius); } .skip:focus { top: 12px; } /* ---------- Header: the counter bar ---------- */ .bar { position: sticky; top: 0; z-index: 50; background: rgba(246, 241, 231, .94); backdrop-filter: blur(8px); border-bottom: var(--rule-w) solid var(--rule); } html[data-contrast="high"] .bar { background: #fff; } .bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; min-height: 44px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand img { width: 26px; height: 44px; flex: none; } .brand span { white-space: nowrap; } .brand { flex: none; white-space: nowrap; } .brand .amp { color: var(--stamp); } html[data-contrast="high"] .brand .amp { color: var(--stamp-ink); } .bar-right { display: flex; align-items: center; gap: 12px; } .nav { display: flex; align-items: center; gap: 2px; } .nav a { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; padding: 10px 9px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius); white-space: nowrap; } .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--stamp); } .nav a:hover { background: var(--wash); color: var(--ink); } .nav .cta { margin-left: 4px; background: var(--ink); color: var(--paper); padding: 10px 14px; } .nav .cta:hover { background: var(--stamp); color: var(--ink); } html[data-contrast="high"] .nav .cta:hover { background: var(--stamp); color: #fff; } .navtoggle { display: none; font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; background: transparent; color: var(--ink); border: var(--rule-w2) solid var(--ink); border-radius: var(--radius); min-height: 44px; padding: 0 14px; } .navtoggle .ico { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; margin-left: 8px; vertical-align: middle; } .navtoggle .ico::before, .navtoggle .ico::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; } .navtoggle .ico::before { top: -6px; } .navtoggle .ico::after { top: 6px; } /* Reading controls: real buttons, persisted, keyboard operable */ .reading { display: inline-flex; align-items: center; gap: 6px; } .reading .lbl { display: none; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; white-space: nowrap; } .toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 11px; border: var(--rule-w) solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .toggle .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; background: transparent; } .toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .toggle[aria-pressed="true"] .dot { background: var(--stamp); border-color: var(--stamp); } .toggle:hover { background: var(--wash); } .toggle[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); } html[data-contrast="high"] .toggle[aria-pressed="true"] { background: #000; color: #fff; } @media (max-width: 1280px) { .bar { position: static; } .bar-in { flex-wrap: wrap; row-gap: 0; } .nav { order: 2; margin-left: auto; } .reading { order: 3; width: 100%; justify-content: flex-start; gap: 8px; padding: 10px 0 12px; border-top: var(--rule-w) dashed var(--rule-2); } .reading .lbl { display: inline; } } /* Bigger text: the single-row bar no longer fits, so use the two-row layout at every width */ html[data-text="big"] .bar { position: static; } html[data-text="big"] .bar-in { flex-wrap: wrap; row-gap: 0; } html[data-text="big"] .nav { order: 2; margin-left: auto; } html[data-text="big"] .reading { order: 3; width: 100%; justify-content: flex-start; gap: 8px; padding: 10px 0 12px; border-top: var(--rule-w) dashed var(--rule-2); } html[data-text="big"] .reading .lbl { display: none; } @media (max-width: 900px) { .bar-in { min-height: 60px; position: relative; } .navtoggle { display: inline-flex; align-items: center; } .bar-right { order: 2; margin-left: auto; } .nav { display: none; order: 4; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; background: var(--docket); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: 8px 12px 14px; margin: 0 0 12px; box-shadow: var(--shadow); } .nav.open { display: flex; } .nav a { font-size: 0.95rem; padding: 12px; min-height: 48px; } .nav .cta { margin: 8px 0 0; justify-content: center; } } @media (max-width: 420px) { .reading .lbl { display: none; } .toggle { padding: 0 10px; font-size: 0.72rem; } } /* Live status (JS fills [data-open-status]; static text shows first) */ .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; } .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 2px rgba(138, 208, 234, .35); flex: none; } .status[data-state="closed"]::before { background: transparent; border: 2px solid currentColor; box-shadow: none; } html[data-contrast="high"] .status::before { border: 2px solid #000; box-shadow: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius); font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-decoration: none; border: var(--rule-w2) solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; text-align: center; } .btn:hover { transform: translateY(-1px); background: var(--wash); color: var(--ink); } .btn-primary { background: var(--stamp); border-color: var(--stamp); color: var(--ink); } .btn-primary:hover { background: var(--stamp-hover); border-color: var(--stamp-hover); } .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn-ink:hover { background: var(--stamp); border-color: var(--stamp); color: var(--ink); } .btn-sm { min-height: 40px; padding: 0 14px; font-size: 0.78rem; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } html[data-contrast="high"] .btn-primary { color: #fff; } html[data-contrast="high"] .btn-ink:hover { background: var(--stamp); color: #fff; } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .actions.tight { margin-top: 16px; } @media (max-width: 767px) { .actions .btn { flex: 1 1 auto; } } /* ---------- Stamps ---------- */ .stamp { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp-ink); border: 3px solid var(--stamp); border-radius: 6px; padding: 6px 10px; transform: rotate(-6deg); background: rgba(255, 253, 248, .88); line-height: 1.3; } .stamp.flat { transform: none; } .stamp.live { display: inline-flex; align-items: center; gap: 8px; } html[data-text="big"] .stamp.live { font-size: 0.62rem; letter-spacing: 0.1em; } .stamp.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 2px rgba(138, 208, 234, .35); flex: none; } .stamp.live[data-state="closed"]::before { background: transparent; border: 2px solid var(--stamp-ink); box-shadow: none; } html[data-contrast="high"] .stamp { background: #fff; border-color: var(--stamp-ink); } html[data-contrast="high"] .stamp.live::before { border: 2px solid #000; box-shadow: none; } .stamp.big { font-size: 1.6rem; padding: 10px 18px; border-width: 5px; border-radius: 10px; letter-spacing: 0.2em; } /* ---------- Docket ---------- */ .docket { position: relative; background: var(--docket); color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.9rem; line-height: 1.5; padding: 26px 22px 30px; box-shadow: var(--shadow); } .docket::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 14px; background: radial-gradient(circle at 8px 7px, var(--paper) 4px, transparent 4.6px) 0 0 / 16px 14px repeat-x; } .docket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; background: linear-gradient(135deg, var(--docket) 50%, transparent 50%) 0 0 / 14px 9px repeat-x, linear-gradient(225deg, var(--docket) 50%, transparent 50%) 0 0 / 14px 9px repeat-x; } .band .docket::before, .stub .docket::before { background: radial-gradient(circle at 8px 7px, var(--band) 4px, transparent 4.6px) 0 0 / 16px 14px repeat-x; } .docket.tilt { transform: rotate(-1.5deg); } .docket.plain { box-shadow: none; border: var(--rule-w) solid var(--rule); } .docket-mark { width: 18px; height: 30px; margin: 0 auto 8px; } .docket .hd { text-align: center; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; } .docket .hd.left { text-align: left; } .docket .sub { text-align: center; font-size: 0.75rem; color: var(--ink-2); letter-spacing: 0.02em; } .docket .rule { border: 0; border-top: var(--rule-w2) dashed var(--rule-2); margin: 14px 0; } .line { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; } .line .q { flex: 0 0 2ch; color: var(--ink-2); } .line .lbl { flex: 0 1 auto; text-transform: uppercase; letter-spacing: 0.04em; } .line .lbl.plain { text-transform: none; letter-spacing: 0; } .line .dots { flex: 1 1 8px; min-width: 8px; border-bottom: 2px dotted var(--rule-2); transform: translateY(-5px); } .line .amt { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } .line .amt.note { color: var(--stamp-ink); } .line.total { font-weight: 600; font-size: 1rem; margin-top: 10px; } .line.total .lbl { letter-spacing: 0.1em; } .line.empty, .line.closed .amt { color: var(--ink-2); font-weight: 400; } .line a { text-decoration-thickness: 1.5px; } .docket .desc { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); margin: -2px 0 10px 2ch; padding-left: 8px; max-width: none; } .docket .fine { font-size: 0.75rem; color: var(--ink-2); text-align: center; margin-top: 4px; } .docket .fine.left { text-align: left; } .docket .thanks { text-align: center; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 12px; } .docket .body { font-family: var(--sans); font-size: 0.95rem; } .docket .body p { max-width: none; } .docket .stamp-corner { position: absolute; right: 14px; top: 14px; } .docket-list { display: grid; gap: 28px; } /* ---------- Print-in motion (docket lines appear in sequence) ---------- */ @keyframes print { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .print > * { animation: print .32s ease-out both; animation-delay: min(calc(var(--i, 0) * 60ms), 600ms); } /* ---------- Hero ---------- */ .hero { padding: 40px 0 64px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } .hero-facts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-2); letter-spacing: 0.04em; } .hero-facts b { color: var(--ink); font-weight: 600; } .hero-stage { position: relative; min-height: 560px; } .hero-photo { margin: 0; position: absolute; right: 0; top: 0; width: 62%; height: 100%; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 6px; filter: saturate(.92); } .hero-docket { position: absolute; left: 0; bottom: 20px; width: 56%; max-width: 320px; font-size: 0.8rem; padding: 18px 18px 22px; } .hero-docket .line .lbl { white-space: nowrap; } .hero-docket .hd { font-size: 0.78rem; } .hero-docket .rule { margin: 10px 0; } .hero-docket .line { margin: 3px 0; } .hero-stamp { position: absolute; right: 18px; top: 18px; max-width: 58%; text-align: center; line-height: 1.35; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 28px; } .hero-stage { min-height: 0; display: flex; flex-direction: column; gap: 22px; } .hero-photo { position: relative; width: 100%; height: 300px; order: 2; } .hero-photo img { object-position: 50% 30%; } .hero-docket { position: relative; width: 100%; max-width: 440px; bottom: auto; transform: none; margin: 8px auto 0; order: 1; } } @media (max-width: 767px) { .hero { padding: 24px 0 48px; } .lede { font-size: 1rem; margin-top: 14px; } .actions { margin-top: 20px; } } /* Page hero for inner pages: eyebrow, h1, lede, optional docket beside */ .page-hero { padding: 48px 0 40px; border-bottom: var(--rule-w) solid var(--rule); } .page-hero .lede { margin-top: 1rem; } @media (max-width: 767px) { .page-hero { padding: 28px 0 28px; } } /* ---------- Ink band ---------- */ .band { background: var(--band); color: var(--band-text); padding: 64px 0; } .band a { color: var(--band-text); } .band a:hover { color: var(--stamp); } .band .eyebrow { color: var(--stamp); } html[data-contrast="high"] .band .eyebrow { color: #fff; } .band .muted { color: var(--band-muted); } .bignum { font-family: var(--mono); font-weight: 600; font-size: clamp(3.5rem, 10vw, 6.6rem); line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .band .what { font-size: 1.2rem; margin-top: 12px; max-width: 26ch; line-height: 1.3; font-weight: 500; } .band .caveat { color: var(--band-muted); font-size: 0.8rem; margin-top: 16px; max-width: 46ch; font-family: var(--sans); line-height: 1.5; } .band .line { color: var(--band-text); font-family: var(--mono); font-size: 0.85rem; margin: 10px 0; } .band .line .dots { border-color: var(--band-rule); } .band .line .amt { color: var(--stamp); } html[data-contrast="high"] .band .line .amt { color: #fff; } .band .line .lbl { text-transform: none; letter-spacing: 0; } .band .btn { border-color: var(--band-text); color: var(--band-text); } .band .btn:hover { background: rgba(246, 241, 231, .12); color: var(--band-text); } .band .btn-primary { background: var(--stamp); border-color: var(--stamp); color: var(--ink); } .band .btn-primary:hover { background: var(--stamp-hover); border-color: var(--stamp-hover); color: var(--ink); } html[data-contrast="high"] .band .btn-primary { color: #fff; } @media (max-width: 767px) { .band { padding: 48px 0; } } /* ---------- Counter (docket-white full-width band) ---------- */ .counter { background: var(--docket); border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule); padding: 72px 0; } @media (max-width: 767px) { .counter { padding: 48px 0; } } /* ---------- Pathway steps (numbered because it is a sequence) ---------- */ .steps { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: step; } .steps li { display: grid; grid-template-columns: 4ch 1fr; gap: 14px; padding: 18px 0; border-top: var(--rule-w) dashed var(--rule-2); margin: 0; } .steps li::before { counter-increment: step; content: "0" counter(step); font-family: var(--sans); font-weight: 600; font-size: 1.2rem; color: var(--stamp-ink); line-height: 1.1; } .steps h3 { margin-bottom: 4px; } .steps p { color: var(--ink-2); font-size: 0.9rem; } /* Plain feature list (not a sequence): label + copy pairs with a rule */ .list-rule { list-style: none; margin: 24px 0 0; padding: 0; } .list-rule li { padding: 16px 0; border-top: var(--rule-w) dashed var(--rule-2); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .list-rule h3 { font-size: 1.05rem; } .list-rule p { color: var(--ink-2); font-size: 0.9rem; } .list-rule.icons li { grid-template-columns: 44px 1fr; column-gap: 16px; } .list-rule.icons li > svg { width: 36px; height: 36px; grid-row: span 2; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; } /* ---------- Quote ---------- */ blockquote.quote, .quote { margin: 0; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; } .quote::before { content: "\201C"; color: var(--stamp); font-family: var(--sans); font-weight: 600; margin-right: 2px; } html[data-contrast="high"] .quote::before { color: var(--stamp-ink); } .quote + cite, cite.who { display: block; font-style: normal; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-2); margin-top: 18px; letter-spacing: 0.04em; } /* ---------- Photo frame with stamp caption ---------- */ .photo { margin: 0; position: relative; } .photo img { width: 100%; height: 420px; object-fit: cover; border-radius: 6px; } .photo.tall img { height: 520px; object-position: 30% 40%; } .photo.short img { height: 300px; } .photo figcaption { font-family: var(--sans); font-size: 0.75rem; color: var(--ink-2); margin-top: 10px; letter-spacing: 0.02em; } .photo .stamp { position: absolute; left: 16px; bottom: 16px; } .photo .stamp.tr { left: auto; bottom: auto; right: 16px; top: 16px; } .photo:has(figcaption) .stamp { left: auto; bottom: auto; right: 16px; top: 16px; } /* a caption sits under the image, so keep stamps on the image */ @media (max-width: 900px) { .photo img, .photo.tall img { height: 320px; } } /* ---------- Hours docket ---------- */ .hours .line { margin: 4px 0; } .hours .line .lbl { text-transform: none; letter-spacing: 0; } .hours .line.today .lbl { font-weight: 600; } .hours .line.today .lbl::after { content: " (today)"; color: var(--stamp-ink); } /* ---------- Address ---------- */ .addr { font-style: normal; font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; margin-top: 22px; } .addr b { font-weight: 600; } /* ---------- Map and video embeds ---------- */ .map { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: var(--rule-w) solid var(--rule); background: var(--docket); } .map iframe { width: 100%; height: 100%; border: 0; } .video { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ink); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } .video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-play .play { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; background: var(--stamp); color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; padding: 14px 22px; border-radius: var(--radius); box-shadow: var(--shadow); } .video-play:hover .play { background: var(--stamp-hover); } /* ---------- Forms (docket-styled, honest status) ---------- */ .form { display: grid; gap: 18px; max-width: 560px; } .form.wide { max-width: none; } .field { display: grid; gap: 6px; } .field label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .field label .opt { font-weight: 400; color: var(--ink-2); text-transform: none; letter-spacing: 0; } .field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 10px 12px; border: var(--rule-w2) solid var(--ink); border-radius: var(--radius); background: var(--docket); color: var(--ink); font-family: var(--sans); font-size: 1rem; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--stamp); outline-offset: 2px; } .field .hint { font-size: 0.8rem; color: var(--ink-2); } .field.error input, .field.error textarea, .field.error select { border-color: var(--stamp-ink); } .field .err { font-family: var(--sans); font-size: 0.78rem; color: var(--stamp-ink); font-weight: 600; } .form-status { font-family: var(--sans); font-size: 0.85rem; padding: 12px 14px; border: var(--rule-w2) dashed var(--rule-2); border-radius: var(--radius); background: var(--docket); } .form-status:empty { display: none; } .form-status[data-state="ok"] { border-style: solid; border-color: var(--ink); } .form-status[data-state="error"] { border-style: solid; border-color: var(--stamp-ink); color: var(--stamp-ink); } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Order builder (home) and menu lists ---------- */ .order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .menu-list { list-style: none; margin: 0; padding: 0; } .menu-list li { margin: 0; } .menu-list li.group { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding: 18px 0 8px; border-bottom: var(--rule-w) solid var(--rule); margin-bottom: 4px; } .menu-list li.item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); } .menu-list li.item.simple { grid-template-columns: 1fr auto; } .menu-list .nm { font-weight: 500; } .menu-list .nm small { display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-2); font-weight: 400; letter-spacing: 0.02em; } .menu-list .pr { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5ch; text-align: right; } .qty { display: inline-flex; align-items: center; border: var(--rule-w) solid var(--ink); border-radius: var(--radius); overflow: hidden; } .qty button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 1.1rem; font-weight: 600; } .qty button:hover { background: var(--wash); } .qty output { min-width: 34px; text-align: center; font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; } .order-docket { position: sticky; top: calc(var(--header-h) + 24px); } .altmilk { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.8rem; margin: 12px 0 4px; cursor: pointer; min-height: 44px; } .altmilk input { width: 20px; height: 20px; accent-color: var(--stamp); margin: 0; flex: none; } .skills { list-style: none; margin: 8px 0 0; padding: 0; } .skills li { display: flex; gap: 10px; align-items: baseline; margin: 6px 0; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; } .skills li::before { content: "\2713"; color: var(--stamp-ink); font-weight: 600; } .skills li.base { color: var(--ink-2); } .order-docket .after { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); margin-top: 14px; max-width: none; } @media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } .order-docket { position: static; } } /* Chips (facts like tasting notes) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; } .chips li { margin: 0; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border: var(--rule-w) solid var(--ink); border-radius: 999px; padding: 7px 12px; } /* ---------- Footer: the tear-off stub ---------- */ .stub { position: relative; background: var(--band); color: var(--band-text); padding: 72px 0 40px; margin-top: 12px; } .stub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: linear-gradient(135deg, transparent 50%, var(--band) 50%) 0 0 / 16px 12px repeat-x, linear-gradient(225deg, transparent 50%, var(--band) 50%) 0 0 / 16px 12px repeat-x; } .stub a { color: var(--band-text); } .stub a:hover { color: var(--stamp); } html[data-contrast="high"] .stub a:hover { color: #fff; text-decoration-thickness: 3px; } .stub-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: var(--rule-w) dashed var(--band-rule); } .stub h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp); margin-bottom: 14px; line-height: 1.4; } html[data-contrast="high"] .stub h2 { color: #fff; } .stub ul { list-style: none; margin: 0; padding: 0; } .stub li { margin: 8px 0; font-size: 0.85rem; } .stub .brand { color: var(--band-text); font-size: 1.2rem; } .stub .brand .amp { color: var(--stamp); } html[data-contrast="high"] .stub .brand .amp { color: #fff; } .stub .about { color: var(--band-muted); font-size: 0.85rem; margin-top: 12px; max-width: 34ch; } .stub .status { color: var(--band-text); } .stub .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; font-family: var(--sans); font-size: 0.75rem; color: var(--band-muted); } .stub .ack { color: var(--band-muted); font-size: 0.8rem; margin-top: 22px; max-width: 70ch; } @media (max-width: 900px) { .stub-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .stub-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---------- Reduced motion, print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .print > * { animation: none; } .btn { transition: none; } .btn:hover { transform: none; } } @media print { .bar, .stub, .skip, .reading, .navtoggle { display: none !important; } body { background: #fff; color: #000; } .docket { box-shadow: none; border: 1px solid #000; } }