/* ============================================================================ make-modal.css — accessible "what we make" product-detail dialog. Pairs with _shared/make-modal.js. The homepage showcase ships each product entry as a normal anchor to its canonical page (the JS-OFF fallback + the SEO target). The per-product detail lives in the page as a .make-modal block that is INERT until JS promotes it to an accessible dialog. No-JS contract: the .make-modal blocks are display:none by default, so with JS off the page shows only the showcase links (which navigate to /bonfire, /how-it-works, …). The enhanced presentation (overlay + panel) only applies once make-modal.js sets [data-make-enhanced] on and toggles [hidden]. Responsive (per the 100%-responsive standard): the panel is a centered card on desktop and a full-screen bottom-sheet at ≤720px, sized in dvh (never 100vh), with no horizontal overflow from 320→1920px and ≥44px tap targets. ============================================================================ */ /* The detail block is inert by default (no-JS: never shown — the link is the fallback). The base [hidden] also hides it before JS toggles it. */ .make-modal { display: none; } /* While any dialog is open, lock the page scroll (set by the JS on +body). */ .make-modal-lock { overflow: hidden !important; } /* ── Enhanced presentation (JS on) ─────────────────────────────────────────── */ html[data-make-enhanced] .make-modal { display: block; /* now a managed dialog; [hidden] still hides */ position: fixed; inset: 0; z-index: 1000; /* the overlay/backdrop */ background: color-mix(in oklab, #1a1626 64%, transparent); /* center the panel; overflow handled by the panel, not the overlay */ display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity 0.18s ease; } html[data-make-enhanced] .make-modal[hidden] { display: none; } html[data-make-enhanced] .make-modal.is-open { opacity: 1; } /* The panel — a Cotton Candy Parlor card with the house hard-shadow. */ .make-modal .make-panel { position: relative; width: min(560px, 100%); max-height: 86dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper, #fff); color: var(--ink, #1a1626); border: 2.5px solid var(--ink, #1a1626); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink, #1a1626); padding: 30px 30px 28px; transform: translateY(8px) scale(0.985); transition: transform 0.2s ease; font-family: var(--body, 'Lato', sans-serif); } html[data-make-enhanced] .make-modal.is-open .make-panel { transform: none; } .make-modal .make-panel:focus { outline: none; } .make-modal .make-panel:focus-visible { outline: 3px solid var(--accent, #5fd4c4); outline-offset: 3px; } /* eyebrow / entry index */ .make-modal .make-entry { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft, #5a4a6a); display: block; margin-bottom: 10px; } .make-modal .make-panel h3 { font-family: var(--display, 'Fredoka', sans-serif); font-weight: 700; font-size: clamp(28px, 6vw, 38px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 10px; } .make-modal .make-panel h3 .emoji { margin-right: 10px; } /* Canonical Bonfire flame — sized to the modal heading scale. */ .make-modal .make-panel h3 .flame svg { width: 26px; height: 30px; vertical-align: -0.16em; margin-right: 10px; } .make-modal .make-bits { font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft, #5a4a6a); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--ink-soft, #5a4a6a); } .make-modal .make-panel p { font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; } .make-modal .make-panel p code { background: var(--accent, #5fd4c4); padding: 2px 7px; border-radius: 3px; font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 13.5px; } .make-modal .make-links { display: flex; gap: 18px 22px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1.5px solid color-mix(in oklab, var(--ink, #1a1626) 18%, transparent); font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 12.5px; } .make-modal .make-links a { color: var(--ink, #1a1626); text-decoration: none; font-weight: 600; min-height: 44px; /* ≥44px tap targets */ display: inline-flex; align-items: center; border-bottom: 1.5px solid var(--ink, #1a1626); } .make-modal .make-links a.secondary { color: var(--ink-soft, #5a4a6a); border-bottom-color: var(--ink-soft, #5a4a6a); } /* the close (×) button — ≥44×44 tap target */ .make-modal .make-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--paper, #fff); color: var(--ink, #1a1626); border: 2px solid var(--ink, #1a1626); border-radius: 10px; font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 var(--ink, #1a1626); } .make-modal .make-close:active { box-shadow: 1px 1px 0 var(--ink, #1a1626); transform: translate(1px, 1px); } .make-modal .make-close:focus-visible { outline: 3px solid var(--accent, #5fd4c4); outline-offset: 2px; } /* ── Mobile bottom-sheet (≤720px) ──────────────────────────────────────────── */ @media (max-width: 720px) { html[data-make-enhanced] .make-modal { align-items: flex-end; /* sheet rises from the bottom */ padding: 0; } .make-modal .make-panel { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; border-width: 2.5px 0 0 0; /* only the top edge reads as a sheet handle */ box-shadow: 0 -4px 0 var(--ink, #1a1626); padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(24px); } html[data-make-enhanced] .make-modal.is-open .make-panel { transform: none; } .make-modal .make-panel::before { /* grab handle affordance */ content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: color-mix(in oklab, var(--ink, #1a1626) 28%, transparent); margin: -8px auto 16px; } .make-modal .make-close { top: 10px; right: 10px; } } /* Respect reduced-motion. */ @media (prefers-reduced-motion: reduce) { html[data-make-enhanced] .make-modal, .make-modal .make-panel { transition: none; } }