/* * Kukburi — KUKBURI DUO builder (templates/page-duo.html). Full * replacement 2026-09-20 of the old flat-790-TL, single-.duo-columns * version: now two independent, always-live .duo-choice-step sections * (each with its own real running total) followed by a .duo-summary-step * that populates once both are complete. See inc/blocks.php's * kukburi_render_duo_choice_step()/kukburi_render_duo_summary_step() for * the markup this styles and assets/js/duo.js for the interactive * behavior. */ /* Page-banner intro copy (templates/page-duo.html) — .page-banner/.eyebrow * themselves are site.css's shared standalone-page-hero rules; these three * are specific to this page's own "savings badge / includes bullets" * content from the source brief. */ .page-banner p{ max-width: 640px; margin: 0 auto 14px; } .duo-savings{ display: inline-block; font-family: 'Jost',sans-serif; font-weight: 700; font-size: .95rem; color: var(--green); background: var(--paper-2); border-radius: 999px; padding: 6px 18px; margin: 6px 0 26px !important; } .duo-includes-heading{ font-size: 1.1rem; margin: 0 0 10px; } .duo-includes-list{ list-style: none; margin: 0 auto; padding: 0; max-width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; text-align: left; } body[dir="rtl"] .duo-includes-list{ text-align: right; } .duo-includes-list li{ font-size: .88rem; padding-left: 18px; position: relative; } .duo-includes-list li::before{ content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; } body[dir="rtl"] .duo-includes-list li{ padding-left: 0; padding-right: 18px; } body[dir="rtl"] .duo-includes-list li::before{ left: auto; right: 0; } @media (max-width: 480px){ .duo-includes-list{ grid-template-columns: 1fr; } } #duo-builder{ padding: 20px 0 60px; display: flex; flex-direction: column; gap: 48px; } /* .duo-choices (2026-09-21): side-by-side restoration of the backup's * original .duo-columns structure — the two choice steps were always * meant to sit as two meal columns, not stack sequentially; today's * stacked layout was a rebuild-era simplification, not the intended * design (confirmed against the owner's sketch + mockup). Stacked by * default (flex column, same 48px gap the two steps already had before * this wrapper existed — no change to that spacing), switching to a * real 2-up grid only once there's genuinely room for it. * * 1300px min-width, not an arbitrary number: each .duo-dish-grid inside * a step is capped at 574px (the real historical value, confirmed via * the backup reconstruction — see that file's own comment above), so * two side-by-side columns need 574+574+32(gap) = 1180px of actual * content width at minimum. .wrap's padding removes 80px from whatever * the viewport is (site.css), so the viewport itself needs to be * ≥1260px before that content width is even available — 1300px gives a * ~40px safety margin above that bare minimum (scrollbar width, * sub-pixel rounding) while still landing on the same clean, round * breakpoint convention the rest of the theme uses (780/900/980/1099 * in site.css/home.css/etc). Below it, falls back to exactly today's * existing stacked behavior — nothing about the ≤480px .duo-dish-grid * override (below) changes, since it lives inside whichever layout is * currently active either way. */ .duo-choices{ display: flex; flex-direction: column; gap: 48px; } @media (min-width: 1300px){ .duo-choices{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } } .duo-choice-step{ background: var(--cream-card); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; } .duo-step-eyebrow{ font-family: 'Jost',sans-serif; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 0; } .duo-step-heading{ font-size: 1.4rem; margin: 0 0 6px; } .duo-section-label{ font-family: 'Jost',sans-serif; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin: 10px 0 0; } /* Restored 2026-09-20 to the real pre-rebuild sizing: repeat(3, 1fr) at * full width, breaking straight to repeat(2, 1fr) at <=480px with no * intermediate tier — these are the exact values this class (then named * .duo-pasta-grid, on the old single-pasta-only, side-by-side-.duo- * columns version of this page) used before today's full DUO-builder * rebuild, not a re-guessed "smaller" size. Originally sourced from this * session's own direct read of the pre-rebuild file, earlier the same * day, before overwriting it; a real backup (a full site export from * 2026-09-18, predating the rebuild) surfaced the next day and confirmed * it byte-for-byte — see the max-width note just below for what that * backup added to this picture. The 5-column-at-desktop/860px-tier * version this replaces was introduced by that rebuild (needed then * because a single .duo-dish-grid started serving both Pasta AND Main * Courses sections side by side, unlike the old pasta-only grid) — kept * applying to both sections' grids now, just at the real historical * column counts. * * max-width/margin added 2026-09-21, NOT from the backup's own CSS * (confirmed by direct comparison — the backup's .duo-pasta-grid had no * width cap of its own): the backup's page wrapped this same 3-column * grid inside .duo-columns, a 2-up grid-template-columns:1fr 1fr split * putting each meal (and its pasta grid) in roughly HALF the page width; * today's rebuilt page stacks each choice as its own full-width section * instead, so the identical repeat(3,1fr) rule alone now divides the * FULL width into 3, rendering visibly wider cards than the backup ever * showed despite matching column-for-column. * * 574px, not the 650px first used here: that 650px was a same-day * reasoned estimate (.wrap's ~1280px content width minus .duo-columns' * 32px gap, halved, minus .duo-meal's 24px padding on each side ≈ * 576–624px), confirmed with the owner at the time but never measured * against the backup's actual rendering. The next day's real backup * archive (2026-09-18 export) let the old page-duo.html markup + * duo.css be reconstructed and rendered directly, side-by-side against * this page at the same viewport width — the old .duo-pasta-grid's own * getBoundingClientRect() width came back as exactly 574px, undercutting * even the low end of the earlier estimate. 650px had been rendering * cards/photos ~14–15% larger than the backup ever did. */ .duo-dish-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 574px; margin: 0 auto; } @media (max-width: 480px){ .duo-dish-grid{ grid-template-columns: repeat(2, 1fr); max-width: none; } } .duo-dish-card{ background: var(--paper); border: 2px solid transparent; border-radius: 8px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-family: inherit; transition: border-color .15s ease, background .15s ease; } .duo-dish-card:hover{ border-color: var(--brown); } .duo-dish-card.selected{ border-color: var(--green); background: var(--paper-2); } /* Availability (2026-09-28) — a real `disabled`