/* Dosanko Burritos - shared stylesheet. * * Hand-rolled rather than Bootstrap on purpose. The order page is reached by * scanning a QR code on a phone, often on Furano mobile coverage, and * bootstrap.min.css + bootstrap.min.js was 310KB of payload to style six * elements. This file is a few KB and needs no JS. * * Mobile-first: the base rules ARE the phone layout, and the only media query * widens things for a desktop browser. Tap targets are >=48px throughout. */ :root { --green: #56b13f; --green-dark: #3f8a2d; --ink: #1f2420; --muted: #5d6660; --line: #dfe4e0; --bg: #fbfcfb; --card: #ffffff; --warn-bg: #fff8e6; --warn-line: #e8c870; --error-bg: #fdeceb; --error-line: #e0a19c; --radius: 10px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, sans-serif; } .wrap { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; } /* ---- language toggle ---- */ /* Sits above the masthead so a Japanese customer who landed in English can find it without scrolling. Auto-detection usually makes it unnecessary. */ .lang-bar { display: flex; justify-content: flex-end; padding: 0.6rem 1rem 0; max-width: 34rem; margin: 0 auto; gap: 0.35rem; } .lang-btn { min-height: 36px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.85rem; background: transparent; color: var(--muted); cursor: pointer; border: 1px solid transparent; border-radius: var(--radius); } .lang-btn.is-active { color: var(--ink); font-weight: 700; border-color: var(--line); background: #fff; } .lang-btn:focus-visible { outline: 3px solid rgba(86, 177, 63, 0.4); outline-offset: 1px; } /* ---- logo ---- */ .site-logo { display: block; margin: 0 auto 0.75rem; width: 128px; height: 128px; } /* The mark is solid black line art. In dark surroundings it would disappear, so it gets a light disc behind it rather than being inverted -- inverting a logo with a map silhouette in it reads as a different mark. */ @media (prefers-color-scheme: dark) { .site-logo { background: #fff; border-radius: 50%; padding: 6px; } } .site-logo--sm { width: 72px; height: 72px; } /* ---- header ---- */ .site-head { text-align: center; padding: 1.5rem 1rem 0.5rem; } .site-head .eyebrow { margin: 0; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); } .site-head h1 { margin: 0.25rem 0 0.35rem; font-size: 1.9rem; line-height: 1.2; } .site-head .tagline { margin: 0; color: var(--muted); } /* ---- photographs ---- */ /* Every photograph here is of the real product -- the burrito that is sold, the bag it actually arrives in. The owner's instruction was explicit: イメージ写真 alone risks a customer expecting something other than what turns up. There is no global `img` rule in this stylesheet, so width and height are constrained here. The attributes on the tag reserve the space to stop layout shift; this keeps the image inside the 34rem column. */ .shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); } .shot--hero { margin: 0 0 1rem; } .shot--in-card { margin: 0.85rem 0 0; } /* ---- numbered steps ---- */ /* A real
    , so the numbering is the browser's and a screen reader announces "step 2 of 4". The owner's 温め方 artwork carries the same four steps as a picture; this is the version that survives translation, zoom and a reader. */ .steps { margin: 0; padding-left: 1.35rem; } .steps li { margin: 0 0 0.8rem; } .steps li:last-child { margin-bottom: 0; } .steps strong { display: block; margin-bottom: 0.1rem; } /* ---- blocks ---- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; } .card h2 { margin: 0 0 0.75rem; font-size: 1.15rem; } .card h3 { margin: 0 0 0.25rem; font-size: 1rem; } .note { background: var(--warn-bg); border: 1px solid var(--warn-line); } .error { background: var(--error-bg); border: 1px solid var(--error-line); } .muted { color: var(--muted); } .small { font-size: 0.875rem; } .center { text-align: center; } /* ---- menu items ---- */ .item { border-bottom: 1px solid var(--line); padding: 0.85rem 0; } .item:last-child { border-bottom: 0; } .item-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; } .item-head .price { font-weight: 700; white-space: nowrap; } .item p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; } /* ---- quantity stepper ---- */ .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); } .qty-row:last-of-type { border-bottom: 0; } .qty-label { flex: 1 1 auto; min-width: 0; } .qty-label .name { font-weight: 600; } .qty-label .unit { display: block; color: var(--muted); font-size: 0.85rem; } .stepper { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .stepper button { width: 48px; height: 48px; font-size: 1.5rem; line-height: 1; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; } .stepper button:active { background: #f1f4f2; } .stepper button:disabled { opacity: 0.4; cursor: default; } .stepper input { width: 3.5rem; height: 48px; text-align: center; font-size: 1.1rem; font-weight: 600; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; /* Keeps the numeric keypad without the spinner arrows a thumb hits by accident */ -moz-appearance: textfield; } .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---- totals ---- */ .totals { margin-top: 0.5rem; } .totals div { display: flex; justify-content: space-between; padding: 0.2rem 0; } .totals .grand { border-top: 2px solid var(--line); margin-top: 0.4rem; padding-top: 0.6rem; font-size: 1.2rem; font-weight: 700; } /* ---- form fields ---- */ label.field { display: block; margin: 0 0 0.9rem; } label.field > span { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.95rem; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea { width: 100%; padding: 0.7rem 0.75rem; font-size: 1rem; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); min-height: 48px; } textarea { min-height: 5.5rem; resize: vertical; } input:focus, textarea:focus, button:focus-visible { outline: 3px solid rgba(86, 177, 63, 0.4); outline-offset: 1px; border-color: var(--green); } /* ---- buttons ---- */ .btn { display: block; width: 100%; min-height: 52px; padding: 0.8rem 1rem; font-size: 1.05rem; font-weight: 700; font-family: inherit; border: 0; border-radius: var(--radius); cursor: pointer; text-align: center; text-decoration: none; } .btn-primary { background: var(--green); color: #fff; } .btn-primary:active { background: var(--green-dark); } .btn-primary:disabled { background: #a9c7a0; cursor: default; } .btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); margin-top: 0.6rem; } .btn-row { display: flex; gap: 0.6rem; } .btn-row .btn { margin-top: 0; } /* ---- footer ---- */ .site-foot { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 1rem 2.5rem; line-height: 1.8; } .site-foot a { color: var(--muted); } [hidden] { display: none !important; } @media (min-width: 40rem) { .wrap { padding-top: 2rem; } .site-head h1 { font-size: 2.4rem; } } /* ---- delivery / pickup choice ---- */ /* Two big targets rather than a