Per-modal specifics live in 9a / 9b below. ============================================================================ */ .oe-modal { --bs-modal-border-radius: var(--radius-lg); --bs-modal-bg: var(--white); --bs-modal-color: var(--text-body); --bs-modal-header-padding: 26px 32px; --bs-modal-padding: 30px 32px 34px; --bs-modal-footer-gap: 12px; z-index: 20010; /* clear light theme's .modal-backdrop.show (20000) */ background-color: transparent; /* .oe-order baseline would paint the full-viewport .modal white over the backdrop */ } .oe-modal .modal-content { font-family: var(--font-body); color: var(--text-body); border: none; overflow: hidden; } .oe-modal .oe-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border-subtle); } .oe-modal .oe-modal-header-left { display: flex; align-items: center; gap: 24px; } .oe-modal .oe-modal-header-image { flex: 0 0 auto; width: 120px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle); margin-left: auto; } .oe-modal .oe-modal-header-image img { width: 100%; height: 100%; object-fit: contain; } .oe-modal .oe-modal-title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 1.875rem; /* 30px */ line-height: var(--leading-snug); color: var(--color-accent); margin: 0; } .oe-modal .oe-modal-close { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--white); color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .oe-modal .oe-modal-close:hover { color: var(--color-brand); border-color: var(--border-strong); } .oe-modal .oe-modal-richtext { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--text-body); } .oe-modal .oe-modal-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border-subtle); background: var(--surface-tint); padding: 18px 32px; } /* ---- 9a. Product detail modal (unique) --------------------------------- */ #product-modal { --bs-modal-width: 1000px; } #product-modal .oe-modal-grid { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; } #product-modal .oe-modal-rule { width: 28px; height: 2px; background: var(--color-brand); margin-bottom: 10px; } #product-modal .oe-modal-richtext h3, #product-modal .oe-modal-richtext h4, #product-modal .oe-modal-richtext p:first-child strong { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--color-accent); margin: 0 0 14px; } #product-modal .oe-modal-richtext ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; } #product-modal .oe-modal-richtext li { position: relative; padding-left: 22px; } #product-modal .oe-modal-richtext li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: var(--color-brand); font-weight: var(--weight-bold); } #product-modal .oe-modal-richtext strong { color: var(--text-strong); } #product-modal .oe-modal-card { background: var(--surface-tint); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; } #product-modal .oe-modal-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #product-modal .oe-modal-card-divided { padding-top: 18px; border-top: 1px solid var(--border-soft); } #product-modal .oe-modal-figure { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.5rem; color: var(--color-accent); margin-top: 6px; letter-spacing: normal; } #product-modal .oe-modal-figure-sm { font-size: 1.25rem; } #product-modal .oe-modal-stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 4px; background: var(--white); } .product-gallery { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 16px; } .product-gallery-main { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-soft); background: #e9ecef; display: flex; align-items: center; justify-content: center; } .product-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .product-gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 8px; } .product-gallery-thumb { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #e9ecef; transition: all 0.2s; } .product-gallery-thumb:hover { border-color: var(--border-strong); } .product-gallery-thumb.active { border-color: var(--color-brand); } .product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; } #product-modal .oe-modal-stepper .modal-qty-minus, #product-modal .oe-modal-stepper .modal-qty-plus { width: 34px; height: 34px; padding: 0; border: none; background: transparent; border-radius: var(--radius-pill); font-size: 19px; line-height: 1; color: var(--text-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; } #product-modal .oe-modal-stepper .modal-qty-minus:hover, #product-modal .oe-modal-stepper .modal-qty-plus:hover { background: var(--warmgrey-100); } #product-modal .oe-modal-stepper .modal-qty-input { width: 34px; min-width: 34px; padding: 0; text-align: center; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-strong); border: none; background: transparent; appearance: none; -moz-appearance: textfield; } #product-modal .oe-modal-stepper .modal-qty-input:focus { outline: none; } #product-modal .oe-modal-footer-price { margin-right: auto; font-family: var(--font-body); color: var(--text-muted); letter-spacing: normal; } @media (max-width: 720px) { #product-modal .oe-modal-grid { grid-template-columns: 1fr; gap: 28px; } } /* ---- 9b. Price-change modal (unique; overrides base's id-scoped leaks) -- */ #price-change-modal { --bs-modal-width: 560px; } #price-change-modal .oe-modal-header { align-items: center; } #price-change-modal #price-change-body { color: var(--text-body); } #price-change-modal #price-change-body p { color: var(--text-muted); margin: 0 0 14px; } #price-change-modal .price-change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } #price-change-modal .price-change-list li { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--white); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; } #price-change-modal .price-change-list strong { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--text-strong); } #price-change-modal .price-old, #price-change-modal .price-new { font-family: var(--font-body); font-size: var(--text-base); letter-spacing: normal; } #price-change-modal .price-old { color: var(--text-muted); text-decoration: line-through; opacity: 1; } #price-change-modal .price-new { color: var(--color-brand); font-weight: var(--weight-bold); } /* ============================================================================ 8b. CHECKOUT PAGE LAYOUT (order-checkout.php; JS contract frozen) Base + light stay loaded here, so every hook class base also styles sets its FULL property set (font, letter-spacing, opacity, colour) to beat leaks (§7). Scope .oe-order.checkout-page beats light's body.oe-light .X (§8). Summary rows are JS-generated in order-checkout.js — style, never nest markup. ============================================================================ */ .oe-order.checkout-page { max-width: 1180px; margin: 0 auto; padding: 44px 32px 72px; background: var(--surface-page); } /* Header logo + divider + title — mirror the order-index page */ .oe-order.checkout-page .order-header { margin: 0 0 40px; padding-bottom: 22px; border-bottom: 1px solid var(--border-subtle); } .oe-order.checkout-page .order-client-logo { height: 56px; width: auto; display: block; } .oe-order.checkout-page .order-back { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 24px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: 0.9375rem; /* 15px */ color: var(--color-accent); text-decoration: none; transition: all 0.2s ease; } .oe-order.checkout-page .order-back:hover { color: var(--color-accent); text-decoration: underline; } .oe-order.checkout-page .order-back .chev { font-size: 1.0625rem; line-height: 1; position: relative; top: -1px; } .oe-order.checkout-page .order-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2.75rem; /* 44px */ line-height: var(--leading-tight); color: var(--color-brand); margin: 0 0 40px; } /* Two-column grid: form left (1fr), summary right (374px). DOM order is summary-first; pin columns/rows so form reads left. */ .oe-order.checkout-page .checkout-grid { display: grid; grid-template-columns: 1fr 374px; gap: 36px; align-items: start; } .oe-order.checkout-page .checkout-form { grid-column: 1 / 2; grid-row: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; } .oe-order.checkout-page #order-summary { grid-column: 2 / 3; grid-row: 1; align-self: start; background: var(--surface-tint); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 28px 30px; } /* Section headings ("Venue", "Bestillingsoversigt") */ .oe-order.checkout-page .checkout-section-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); /* 22px */ line-height: var(--leading-snug); letter-spacing: normal; color: var(--color-accent); margin: 0 0 20px; } .oe-order.checkout-page #order-summary .checkout-section-title { margin: 0 0 22px; } /* Venue section */ .oe-order.checkout-page #venue-section .checkout-field { display: flex; flex-direction: column; gap: 8px; margin: 0; } .oe-order.checkout-page #venue-section .checkout-field-label { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); /* 12px */ letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); opacity: 1; } .oe-order.checkout-page #venue-section .form-select { max-width: 520px; } .oe-order.checkout-page #venue-section .btn-orion-ghost { align-self: flex-start; margin-top: 16px; } .oe-order.checkout-page .checkout-plus { font-size: 18px; line-height: 1; margin-right: 2px; } /* Empty state (no venues yet) */ .oe-order.checkout-page .checkout-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 8px 8px; } .oe-order.checkout-page .checkout-empty-icon { width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--border-subtle); color: var(--color-brand); display: flex; align-items: center; justify-content: center; } .oe-order.checkout-page .checkout-empty-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.25rem; /* 20px */ color: var(--color-accent); } .oe-order.checkout-page .checkout-empty-text { margin: 0; max-width: 340px; font-family: var(--font-body); font-size: 0.9375rem; /* 15px */ line-height: var(--leading-body); color: var(--text-muted); opacity: 1; } .oe-order.checkout-page .checkout-empty .btn { margin-top: 6px; } /* Summary rows (JS-generated: .checkout-summary-row > name / qty / line) */ .oe-order.checkout-page .checkout-summary-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .oe-order.checkout-page .checkout-summary-name { flex: 1 1 auto; font-family: var(--font-body); font-weight: var(--weight-bold); letter-spacing: normal; color: var(--text-strong); opacity: 1; } .oe-order.checkout-page .checkout-summary-qty { font-family: var(--font-body); font-size: var(--text-sm); /* 14px */ letter-spacing: normal; color: var(--text-muted); white-space: nowrap; opacity: 1; } .oe-order.checkout-page .checkout-summary-line { font-family: var(--font-body); font-weight: var(--weight-bold); letter-spacing: normal; color: var(--color-accent); white-space: nowrap; opacity: 1; } .oe-order.checkout-page .checkout-summary-shipping { border-bottom-width: 2px; border-bottom-color: var(--border-subtle); } /* Addons section in summary */ .oe-order.checkout-page .checkout-summary-addons-section { margin: 12px 0; padding: 0 14px; background-color: var(--warmgrey-100); border-radius: 8px; } .oe-order.checkout-page .checkout-summary-addons-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; user-select: none; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--color-accent); } .oe-order.checkout-page .checkout-summary-addons-toggle:hover { opacity: 0.8; } .oe-order.checkout-page .checkout-summary-addons-toggle .toggle-title { display: flex; align-items: center; gap: 8px; } .oe-order.checkout-page .checkout-summary-addons-toggle .toggle-icon { font-size: 0.75rem; transition: transform 0.2s ease; } .oe-order.checkout-page .checkout-summary-addons-toggle.is-open .toggle-icon { transform: rotate(180deg); } .oe-order.checkout-page .checkout-summary-addons-total { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--color-accent); } .oe-order.checkout-page .checkout-summary-addons-content { overflow: hidden; max-height: 2000px; transition: max-height 0.3s ease-out; } .oe-order.checkout-page .checkout-summary-addons-content.is-collapsed { max-height: 0; } /* Condensed rows for addons */ .oe-order.checkout-page .checkout-summary-row.is-addon { padding: 6px 0; border-bottom: 0; } .oe-order.checkout-page .checkout-summary-row.is-addon:last-child { padding-bottom: 12px; } .oe-order.checkout-page .checkout-summary-row.is-addon .checkout-summary-name { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-muted); } .oe-order.checkout-page .checkout-summary-row.is-addon .checkout-summary-qty { font-size: var(--text-2xs); } .oe-order.checkout-page .checkout-summary-row.is-addon .checkout-summary-line { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-muted); } /* Summary total + VAT */ .oe-order.checkout-page .checkout-summary-rows { border: 0; } .oe-order.checkout-page .checkout-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 0; } .oe-order.checkout-page .checkout-summary-total-label { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); /* 12px */ letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-brand); opacity: 1; } .oe-order.checkout-page .checkout-summary-total-value { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); /* 28px */ letter-spacing: normal; color: var(--color-brand); } .oe-order.checkout-page .checkout-summary-vat { text-align: right; font-size: 0.6875rem; /* 11px */ letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); opacity: 1; margin-top: 4px; margin-bottom: 8px; } .oe-order.checkout-page .checkout-summary-total-vat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .oe-order.checkout-page .checkout-summary-total-vat .checkout-summary-total-label, .oe-order.checkout-page .checkout-summary-total-vat .checkout-summary-total-value { color: var(--color-accent); } .oe-order.checkout-page .checkout-summary-total-vat .checkout-summary-total-value { font-size: var(--text-lg); } /* Actions */ .oe-order.checkout-page .checkout-actions { margin: 0; } /* Responsive: single column, form first */ @media (max-width: 860px) { .oe-order.checkout-page { padding: 28px 18px 54px; } .oe-order.checkout-page .order-title { font-size: 2rem; margin: 0 0 28px; } .oe-order.checkout-page .checkout-grid { grid-template-columns: 1fr; gap: 28px; } .oe-order.checkout-page .checkout-form { grid-column: auto; grid-row: auto; order: 1; } .oe-order.checkout-page #order-summary { grid-column: auto; grid-row: auto; order: 2; } } /* ============================================================================ 9c. CREATE-VENUE MODAL (order-checkout.php; #new-venue-form hooks frozen) Bootstrap .oe-modal; layout inside .modal-body via oe-venue-* classes. Inputs ride on .form-control (§5) and .form-check (§6) — .oe-order is on root. ============================================================================ */ #venue-modal { --bs-modal-width: 1080px; } /* Beat base/light leaks: id specificity (1,1,0) > body.oe-light .X (0,2,1) */ #venue-modal .modal-dialog { max-width: 1080px; } #venue-modal .modal-header { padding: 26px 32px; } #venue-modal .modal-body { padding: 28px 32px 32px; } #venue-modal .modal-footer { padding: 18px 32px; } #venue-modal .form-control { height: auto; min-height: 44px; padding: 10px 14px; line-height: 1.4; background-color: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-base); } #venue-modal .form-control:focus { background-color: var(--white); border-color: var(--color-brand); box-shadow: var(--focus-ring); outline: 0; } #venue-modal .oe-venue-form { display: flex; flex-direction: column; gap: 28px; } #venue-modal .oe-venue-field { display: flex; flex-direction: column; gap: 6px; margin: 0; position: relative; } #venue-modal .oe-venue-label { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); opacity: 1; } #venue-modal .oe-venue-help { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); opacity: 1; } #venue-modal .oe-venue-form, #venue-modal .oe-venue-section, #venue-modal .oe-venue-grid-2, #venue-modal .oe-venue-grid-3, #venue-modal .oe-venue-grid-pc, #venue-modal .oe-venue-stack { margin: 0; padding: 0; } #venue-modal .oe-venue-rule { width: 28px; height: 2px; background: var(--color-brand); margin-bottom: 10px; } #venue-modal .oe-venue-subtitle { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-accent); margin: 0 0 16px; } #venue-modal .oe-venue-stack { display: flex; flex-direction: column; gap: 16px; } /* Delivery "same as billing" placeholder. [hidden] guard must beat the flex display. */ #venue-modal .oe-venue-stack[hidden], #venue-modal .oe-venue-same[hidden] { display: none; } #venue-modal .oe-venue-same { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-tint); } #venue-modal .oe-venue-same-icon { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--surface-soft-blue); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; } #venue-modal .oe-venue-same-title { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--text-strong); } #venue-modal .oe-venue-same-text { font-size: var(--text-sm); color: var(--text-muted); max-width: 260px; opacity: 1; } #venue-modal .oe-venue-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } #venue-modal .oe-venue-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } #venue-modal .oe-venue-grid-pc { display: grid; grid-template-columns: 120px 1fr; gap: 14px; } #venue-modal .oe-venue-check { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding-left: 0; margin: 0; } #venue-modal .oe-venue-check .form-check-input { float: none; margin: 0; } #venue-modal .oe-venue-check .form-check-label { font-size: var(--text-base); } @media (max-width: 720px) { #venue-modal .oe-venue-grid-3 { grid-template-columns: 1fr; } #venue-modal .oe-venue-grid-2 { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================================ 8c. SELECTED-VENUE READ-ONLY PANEL (checkout) ============================================================================ */ .oe-order.checkout-page .venue-card { background: var(--surface-tint); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px 30px; } .oe-order.checkout-page .venue-block { padding: 26px 0; border-bottom: 1px solid var(--border-soft); } .oe-order.checkout-page .venue-block:last-child { border-bottom: 0; } .oe-order.checkout-page .venue-block .oe-venue-rule { width: 28px; height: 2px; background: var(--color-brand); margin-bottom: 10px; } .oe-order.checkout-page .venue-block-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: normal; color: var(--color-accent); margin: 0 0 14px; } .oe-order.checkout-page .venue-contact-name { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: 6px; } .oe-order.checkout-page .venue-contact-line { font-family: var(--font-body); color: var(--text-body); margin-bottom: 4px; } .oe-order.checkout-page .venue-link { color: var(--text-link); } .oe-order.checkout-page .venue-help { margin: 12px 0 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-muted); opacity: 1; max-width: 80%; } .oe-order.checkout-page .venue-kv { display: grid; grid-template-columns: 132px 1fr; gap: 14px 18px; margin: 0; } .oe-order.checkout-page .venue-kv-row { display: contents; } .oe-order.checkout-page .venue-kv dt { align-self: start; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .oe-order.checkout-page .venue-kv dd { margin: 0; font-family: var(--font-body); color: var(--text-body); } .oe-order.checkout-page .venue-lines { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); color: var(--text-body); } .oe-order.checkout-page .venue-att { color: var(--text-muted); margin-bottom: 6px; } .oe-order.checkout-page .venue-delivery-name { font-weight: var(--weight-bold); color: var(--text-strong); } .oe-order.checkout-page .venue-lines [hidden] { display: none; } /* ============================================================================ 8d. CHECKOUT VENUE-COLUMN CORRECTIONS (override earlier rules; source-order wins) ============================================================================ */ /* H1 in the airy ORION display weight (was bold) */ .oe-order.checkout-page .order-title { font-weight: var(--weight-light); } /* Flatten the venue-section: base/light leaks a card onto .checkout-section, which indents the dropdown from the H1. The #venue-details card comes from .venue-card, so this does not affect it. */ .oe-order.checkout-page .checkout-section { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; } /* Venue select fills the column and left-aligns with the H1 */ .oe-order.checkout-page #venue-section .form-select { max-width: none; } /* ============================================================================ 8e. VENUE-COLUMN FIXES 2 (dropdown, Ny venue button, left alignment) ============================================================================ */ /* Align the form column to the H1's left edge (leaked inset above .checkout-section) */ .oe-order.checkout-page .checkout-grid { padding-left: 0; padding-right: 0; } .oe-order.checkout-page .checkout-form { padding: 0; margin: 0; } /* Venue select: flat, borderless, taller tint field */ .oe-order.checkout-page #venue-section .form-select { max-width: none; min-height: 54px; padding: 15px 18px; border: 0; background-color: var(--warmgrey-100); border-radius: var(--radius-sm); color: var(--text-body); } /* "Ny venue" trigger: neutral outline button (empty-state CTA stays red) */ .oe-order.checkout-page #venue-create { --bs-btn-color: var(--text-body); --bs-btn-bg: var(--white); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-color: var(--text-strong); --bs-btn-hover-bg: var(--warmgrey-100); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-color: var(--text-strong); --bs-btn-active-bg: var(--warmgrey-100); --bs-btn-active-border-color: var(--border-strong); } /* ============================================================================ 9d. ORDER-CONFIRMATION MODAL (#order-confirmed-modal) ============================================================================ */ #order-confirmed-modal { --bs-modal-width: 560px; } #order-confirmed-modal .oe-confirm-header { align-items: flex-start; border-bottom: 0; padding-bottom: 0; } #order-confirmed-modal .oe-confirm-check { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; } #order-confirmed-modal .oe-modal-title { margin: 0; } #order-confirmed-modal .oe-confirm-body { color: var(--text-body); } #order-confirmed-modal .oe-confirm-body p { margin: 0 0 10px; color: var(--text-body); } #order-confirmed-modal .order-confirmed-number { font-weight: var(--weight-bold); color: var(--color-brand); letter-spacing: normal; } /* ============================================================================ 8f. CHECKOUT CTA TUNING (left-aligned + larger primary submit button) ============================================================================ */ .oe-order.checkout-page .checkout-actions { display: flex; justify-content: flex-start; } .oe-order.checkout-page #checkout-submit { font-size: var(--text-base); padding: 15px 26px; } /* ============================================================================ 10. BINGO PULTEN (self-contained caller page; JS contract frozen) Scoped .oe-order.bingo-page. Loads over base+light — new selectors only in this step, so no leak-reset is needed here; restyles of existing bingo hooks (#bingo-board cells, controls, modals) come in a later phase. ============================================================================ */ /* Page frame: full-viewport flex column on a light surface (beats dark base via the .oe-order baseline already defined in section 3). */ .oe-order.bingo-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-tint); } /* --- Top bar (hard-coded header; markup added in a later phase) ----------- */ .oe-order.bingo-page .bingo-topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; background: var(--white); border-bottom: 1px solid var(--border-subtle); } .oe-order.bingo-page .bingo-topbar__brand { display: flex; align-items: center; gap: 18px; } .oe-order.bingo-page .bingo-topbar__logo-wrap { display: inline-flex; align-items: center; gap: 14px; line-height: 1; } .oe-order.bingo-page .bingo-topbar__logo { height: 40px; width: auto; display: block; } .oe-order.bingo-page .bingo-topbar__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; background: var(--orion-red); color: var(--white); font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: 0.22em; text-transform: uppercase; border-radius: var(--radius-sm); } .oe-order.bingo-page .bingo-topbar__divider { width: 1px; height: 30px; background: var(--border-subtle); } .oe-order.bingo-page .bingo-topbar__title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xl); color: var(--warmgrey-900); letter-spacing: -0.01em; } .oe-order.bingo-page .bingo-topbar__status { display: flex; align-items: center; gap: 18px; } .oe-order.bingo-page .bingo-topbar__live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-muted); } .oe-order.bingo-page .bingo-topbar__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--orion-red); box-shadow: 0 0 0 4px rgba(214, 8, 70, 0.18); } .oe-order.bingo-page .bingo-topbar__clock { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); color: var(--warmgrey-900); } /* --- Stage: board (1fr) + right rail (408px) ----------------------------- */ .oe-order.bingo-page .bingo-play { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 24px; padding: 24px 28px; } /* Board card shell — is ALSO the 10-col cell grid (cells/states styled later) */ .oe-order.bingo-page #bingo-board { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; align-content: center; } /* Right rail column shell (panel internals styled later) */ .oe-order.bingo-page #bingo-right { min-width: 0; display: flex; flex-direction: column; gap: 24px; } /* --- Board cells + draw states (Phase 2a) -------------------------------- Every selector carries the #bingo-board id to out-specify base's leaked `#bingo-board .bingo-cell` rules (id-count match). Each rule sets its full property set so no base value leaks through. `.bingo-cell` state classes (is-drawn, is-drawing, is-pressing, is-timer-cursor) are JS-owned — styled here, never renamed. */ .oe-order.bingo-page #bingo-board .bingo-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(15px, 1.55vw, 27px); border-radius: 9px; /* PLAIN / undrawn — default state */ background: var(--surface-tint); border: 1px solid var(--border-soft); color: var(--warmgrey-400); box-shadow: none; transition: background-color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard), box-shadow var(--duration) var(--ease-standard), transform var(--duration) var(--ease-standard); } /* DRAWN — number has been called (persistent). Audit-confirmed called-cell hook. */ .oe-order.bingo-page #bingo-board .bingo-cell.is-drawn { background: var(--orion-red); border: 1px solid var(--orion-red); color: var(--white); box-shadow: var(--shadow-xs); } /* DRAWING — reveal emphasis at draw time (transient). Ordered AFTER is-drawn so the glow wins during the reveal, then settles to the drawn look. */ .oe-order.bingo-page #bingo-board .bingo-cell.is-drawing { background: var(--orion-red); border: 2px solid var(--orion-red); color: var(--white); box-shadow: 0 0 0 4px rgba(214, 8, 70, 0.25), var(--shadow-md); } /* PRESSING — press/active feedback. ASSUMED: momentary pressed state. QA-VERIFY. */ .oe-order.bingo-page #bingo-board .bingo-cell.is-pressing { transform: scale(0.94); } /* TIMER-CURSOR — game-mode step cursor. ASSUMED semantic (accent ring). QA-VERIFY. */ .oe-order.bingo-page #bingo-board .bingo-cell.is-timer-cursor { background: var(--orion-azure); border-color: var(--orion-azure); color: var(--orion-nightblue); } /* --- Current-number panel (Phase 2b) ------------------------------------- #bingo-current is the top of the right rail: the drawn number, a progress bar, and two lingo lines. All ids/classes here are JS-owned (the number and both lingo lines get their text/children rewritten; #bingo-current-progress toggles is-active/is-counting) — styled, never renamed, never given fixed inner markup assumptions. */ .oe-order.bingo-page #bingo-current { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px 24px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } /* Giant drawn number (uses the display token added in Phase 1) */ .oe-order.bingo-page #bingo-current-number { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-display); line-height: 0.9; letter-spacing: -0.02em; color: var(--orion-red); min-height: 0.9em; /* reserve height so the panel doesn't jump when empty */ } /* Progress track + JS-driven fill */ .oe-order.bingo-page #bingo-current-progress { width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--surface-tint); overflow: hidden; } .oe-order.bingo-page #bingo-current-progress-fill { height: 100%; width: 0; /* JS sets the width */ border-radius: var(--radius-pill); background: var(--orion-red); transition: width var(--duration) var(--ease-standard); } /* Counting state — subtle accent while a draw/step is animating. QA-VERIFY. */ .oe-order.bingo-page #bingo-current-progress.is-counting #bingo-current-progress-fill { background: var(--color-accent); } /* Lingo lines (text + children are JS-rewritten) */ .oe-order.bingo-page #bingo-current-lingo { display: flex; flex-direction: column; gap: 4px; min-height: 2.6em; /* reserve space for up to two lines */ } .oe-order.bingo-page #bingo-lingo-1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 24px; line-height: var(--leading-snug); color: var(--warmgrey-900); } .oe-order.bingo-page #bingo-lingo-2 { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-muted); } /* --- Controls: buttons + views (Phase 2c) -------------------------------- #bingo-controls holds three views (#bingo-controls-default / -game / -settings) toggled via the .hidden attribute-class by JS. Buttons keep their bespoke .bingo-ctrl-btn class (not converted to .btn) and are restyled via tokens. #btn-draw's innerHTML is JS-rewritten, so we style the button, never its children. State classes (is-primary, is-restart, is-drawing, is-running, is-counting, timer-running, step-running) are JS-owned — styled, never renamed. */ /* Views: stacked; .hidden must beat the flex display (JS toggles it). */ .oe-order.bingo-page #bingo-controls { display: flex; flex-direction: column; } .oe-order.bingo-page .ctrl-view { display: flex; flex-direction: column; gap: var(--space-2); } .oe-order.bingo-page .ctrl-view.hidden, .oe-order.bingo-page .ctrl-timer.hidden, .oe-order.bingo-page .ctrl-step.hidden { display: none; } /* Base control button — token-themed, full-width, icon + label */ .oe-order.bingo-page .bingo-ctrl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 48px; padding: 12px 18px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-button); line-height: 1.1; color: var(--text-strong); background: var(--surface-tint); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration) var(--ease-standard), color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard); } .oe-order.bingo-page .bingo-ctrl-btn:hover { background: var(--warmgrey-150); } .oe-order.bingo-page .bingo-ctrl-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); } .oe-order.bingo-page .bingo-ctrl-btn i { font-size: 1em; line-height: 1; } /* Primary — red fill (the main draw / start actions) */ .oe-order.bingo-page .bingo-ctrl-btn.is-primary { color: var(--text-on-brand); background: var(--orion-red); border-color: var(--orion-red); } .oe-order.bingo-page .bingo-ctrl-btn.is-primary:hover { background: var(--orion-red-ink); border-color: var(--orion-red-ink); } /* Draw button running/restart states (JS toggles these on #btn-draw and the start button). is-drawing = mid-draw (dim, non-interactive feel); is-restart / is-running / is-counting = active red emphasis. QA-VERIFY looks. */ .oe-order.bingo-page #btn-draw.is-drawing { opacity: 0.65; } .oe-order.bingo-page #btn-draw.is-restart, .oe-order.bingo-page #btn-settings-start.is-running, .oe-order.bingo-page #btn-settings-start.is-counting { color: var(--text-on-brand); background: var(--orion-red); border-color: var(--orion-red); } /* Game view: back chevron + two sections (timer, step) */ .oe-order.bingo-page #bingo-controls-game { gap: var(--space-3); } .oe-order.bingo-page .ctrl-section { display: flex; flex-direction: column; gap: var(--space-2); } .oe-order.bingo-page .ctrl-settings-row { display: flex; flex-direction: column; gap: var(--space-2); } /* Back button — small ghost chevron */ .oe-order.bingo-page .ctrl-back { align-self: flex-start; width: auto; min-height: 0; padding: 6px 10px; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: var(--text-md); cursor: pointer; transition: color var(--duration) var(--ease-standard), background-color var(--duration) var(--ease-standard); } .oe-order.bingo-page .ctrl-back:hover { color: var(--text-strong); background: var(--surface-tint); } .oe-order.bingo-page .ctrl-back:focus-visible { outline: 0; box-shadow: var(--focus-ring); } /* Settings gear icon — top-right trigger in the default view */ .oe-order.bingo-page .ctrl-settings-icon { align-self: flex-end; margin-top: var(--space-1); padding: 8px; color: var(--text-muted); font-size: var(--text-lg); cursor: pointer; border-radius: var(--radius-sm); transition: color var(--duration) var(--ease-standard), background-color var(--duration) var(--ease-standard); } .oe-order.bingo-page .ctrl-settings-icon:hover { color: var(--orion-red); background: var(--surface-tint); } .oe-order.bingo-page .ctrl-settings-icon:focus-visible { outline: 0; box-shadow: var(--focus-ring); } /* --- Logo / promo rotator (Phase 2d) ------------------------------------- #bingo-logo is a rail card holding .bingo-cards, a cross-fade stack of three .bingo-card faces (logo / shop / campaign). An inline rotator toggles .is-active every 6s; cards are stacked in one grid cell and fade on opacity. is-active is JS-owned — styled, never renamed. */ .oe-order.bingo-page #bingo-logo { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; display: flex; align-items: center; justify-content: center; } /* Cross-fade stack: all faces share one grid cell; container sizes to tallest */ .oe-order.bingo-page .bingo-cards { display: grid; width: 100%; } .oe-order.bingo-page .bingo-card { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 0.6s var(--ease-standard); } .oe-order.bingo-page .bingo-card.is-active { opacity: 1; } /* Face 1 — logo image */ .oe-order.bingo-page .bingo-card img { max-width: 230px; width: 80%; height: auto; margin: 0 auto; } /* Shared text wrapper (shop + campaign faces) */ .oe-order.bingo-page .bingo-card__text { text-align: center; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); line-height: 1.3; color: var(--warmgrey-900); } .oe-order.bingo-page .bingo-card__text strong { font-weight: var(--weight-bold); color: var(--orion-red); } /* Face 2 — shop */ .oe-order.bingo-page .bingo-card__lead { display: block; font-family: var(--font-body); font-size: var(--text-md); color: var(--text-muted); } .oe-order.bingo-page .bingo-card__shop { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 2rem; /* 32px */ color: var(--orion-red); } /* Face 3 — campaign discount code badge */ .oe-order.bingo-page .bingo-badge { display: inline-block; margin-top: 12px; padding: 8px 16px; background: var(--orion-red); color: var(--white); font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); border-radius: var(--radius-pill); } /* --- Shake overlay (Phase 2e) -------------------------------------------- #bingo-shake-overlay is a full-screen overlay: dark backdrop + centered shake IMAGE (#bingo-shake-img, src set by JS) + a progress bar. JS toggles the [hidden] attribute (show/hide) and the .is-visible class (fade). Both are JS-owned — styled, never renamed. */ .oe-order.bingo-page #bingo-shake-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; opacity: 0; transition: opacity var(--duration) var(--ease-standard); } /* [hidden] must beat the id's display:flex */ .oe-order.bingo-page #bingo-shake-overlay[hidden] { display: none; } .oe-order.bingo-page #bingo-shake-overlay.is-visible { opacity: 1; } .oe-order.bingo-page .bingo-shake__backdrop { position: absolute; inset: 0; background: rgba(29, 27, 28, 0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* Shake image (sits above the backdrop) */ .oe-order.bingo-page .bingo-shake__img { position: relative; z-index: 1; max-width: min(70vw, 400px); max-height: 60vh; width: auto; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Progress track + fill */ .oe-order.bingo-page .bingo-shake__progress { position: relative; z-index: 1; width: 320px; max-width: 70vw; height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.22); overflow: hidden; } .oe-order.bingo-page .bingo-shake__progress-bar { height: 100%; width: 0; /* fill mechanism TBD — see QA note */ border-radius: var(--radius-pill); background: var(--white); transition: width var(--duration) var(--ease-standard); } /* --- Modal chrome + settings modal (Phase 2f-i) -------------------------- All bingo modals share .bingo-modal / __backdrop / __panel / __close / __title / __footer / __btn and are shown/hidden by JS via the [hidden] attribute (bespoke, NOT Bootstrap). Restyle only — never convert, never rename. The save-settings JS hook is `.bingo-modal__footer .bingo-modal__btn[data-close]`, so __btn + [data-close] in the footer must remain intact. Base+light also style .bingo-modal__panel / __title (light lines 295/300), so these rules full-set to beat the leak. */ /* Overlay + backdrop */ .oe-order.bingo-page .bingo-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 32px; } .oe-order.bingo-page .bingo-modal[hidden] { display: none; } /* beat display:flex */ .oe-order.bingo-page .bingo-modal__backdrop { position: absolute; inset: 0; background: rgba(29, 27, 28, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Panel */ .oe-order.bingo-page .bingo-modal__panel { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px 32px 28px; } .oe-order.bingo-page .bingo-modal__panel--instructions { max-width: 760px; } /* Close (X) */ .oe-order.bingo-page .bingo-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: var(--text-lg); cursor: pointer; transition: color var(--duration) var(--ease-standard), background-color var(--duration) var(--ease-standard); } .oe-order.bingo-page .bingo-modal__close:hover { color: var(--text-strong); background: var(--surface-tint); } .oe-order.bingo-page .bingo-modal__close:focus-visible { outline: 0; box-shadow: var(--focus-ring); } /* Title */ .oe-order.bingo-page .bingo-modal__title { margin: 0 0 20px; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: normal; color: var(--color-accent); } /* Footer + footer buttons */ .oe-order.bingo-page .bingo-modal__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); } .oe-order.bingo-page .bingo-modal__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 42px; padding: 10px 18px; font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-button); color: var(--text-strong); background: var(--surface-tint); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration) var(--ease-standard); } .oe-order.bingo-page .bingo-modal__btn:hover { background: var(--warmgrey-150); } .oe-order.bingo-page .bingo-modal__btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); } /* Settings rows: label + native