/* ========================================================================== MCC Document Services - public storefront This file adds LAYOUT only. Everything with a brand identity is inherited from style.css so these pages cannot drift from the rest of the site: buttons .btn-solid-gold / .btn-outline-gold (the universal 260x56 CTA) headings .section-kicker / .section-title form fields the global input/select/textarea rules and .form-group label cards white, 20px radius, 0 18px 50px rgba(8,22,18,0.08) type Outfit only, weights 300/400/600/800 Tokens sit on :root, not .ds-page: the payment modal is appended to so it can sit above the page, which puts it outside .ds-page. ========================================================================== */ :root { --ds-ink: #062B1A; --ds-ink-60: rgba(6, 43, 26, 0.66); --ds-ink-45: rgba(6, 43, 26, 0.5); --ds-line: rgba(6, 43, 26, 0.1); --ds-line-strong: rgba(6, 43, 26, 0.18); --ds-paper: #f4f7f5; --ds-card: #ffffff; --ds-card-shadow: 0 18px 50px rgba(8, 22, 18, 0.08); --ds-card-radius: 20px; --ds-seal: #b3261e; --ds-shell: min(calc(100% - (2 * var(--page-gutter))), 1180px); } .ds-page { padding-top: var(--header-offset); padding-bottom: clamp(4rem, 8vw, 7rem); background: var(--ds-paper); color: var(--text-dark); } .ds-shell { width: var(--ds-shell); margin: 0 auto; } .ds-narrow { width: min(calc(100% - (2 * var(--page-gutter))), 680px); margin: 0 auto; } .ds-section { padding: clamp(3rem, 6vw, 5rem) 0 0; scroll-margin-top: calc(var(--header-offset) + 20px); } /* --- Type: Outfit throughout, per the site ------------------------------- */ .ds-page h1, .ds-page h2, .ds-page h3 { color: var(--deep-green); font-weight: 800; line-height: 1.2; } .ds-page h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); } /* style.css keeps .section-title inline-block so a .center variant can exist. These sections are left-aligned and full width, so the title would otherwise sit on the same line as its kicker. Its gold underline stays at left: 0. */ .ds-page .section-title { display: block; } .ds-lede { max-width: 68ch; color: var(--ds-ink-60); font-size: 1.05rem; line-height: 1.7; } /* Money and reference numbers line up by column without a second typeface. */ .ds-figure { font-variant-numeric: tabular-nums; } .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Hero --------------------------------------------------------------- */ .ds-hero { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem); background: linear-gradient(160deg, var(--deep-green) 0%, var(--deep-green-dark) 62%, #06301d 100%); color: #fff; } /* One column: the hero carries a single block of copy and its actions. */ .ds-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } .ds-hero h1 { margin: 0.4rem 0 1rem; color: #fff; } .ds-hero p { max-width: 56ch; color: rgba(255, 255, 255, 0.8); font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.7; } .ds-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } /* --- Record cards (catalogue) -------------------------------------------- */ .ds-record-grid { display: grid; /* min() keeps the track from forcing a wider row than the phone it is on. */ grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 1.5rem; margin-top: 2.25rem; } .ds-record { display: flex; flex-direction: column; padding: 2rem; border-radius: var(--ds-card-radius); border-top: 4px solid var(--accent-gold); background: var(--ds-card); box-shadow: var(--ds-card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .ds-record:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(8, 22, 18, 0.13); } .ds-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; } .ds-record-ref { color: var(--accent-teal); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .ds-record h3 { margin-bottom: 0.7rem; font-size: 1.35rem; } .ds-record-desc { color: var(--ds-ink-60); font-size: 0.95rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ds-record-note { display: flex; gap: 0.6rem; margin-top: 1.1rem; color: var(--ds-ink-45); font-size: 0.85rem; line-height: 1.6; } .ds-record-note i { margin-top: 0.28rem; color: var(--accent-gold); } .ds-record-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; margin-top: auto; padding-top: 1.5rem; } .ds-price { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--deep-green); font-variant-numeric: tabular-nums; } .ds-price small { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink-45); } /* --- Badges: the site's pill shape ---------------------------------------- */ .ds-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(6, 43, 26, 0.08); color: var(--deep-green); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .ds-badge.tone-emerald { background: rgba(43, 122, 106, 0.14); color: #1d6354; } .ds-badge.tone-gold, .ds-badge.tone-amber { background: rgba(212, 175, 55, 0.18); color: #7a5a07; } .ds-badge.tone-red, .ds-badge.tone-orange { background: rgba(179, 38, 30, 0.1); color: var(--ds-seal); } .ds-badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* --- Notices -------------------------------------------------------------- */ .ds-notice { display: flex; gap: 1rem; padding: 1.35rem 1.5rem; border-radius: var(--ds-card-radius); border-left: 4px solid var(--deep-green); background: var(--ds-card); box-shadow: var(--ds-card-shadow); color: var(--ds-ink-60); font-size: 0.95rem; line-height: 1.7; } .ds-notice > i { margin-top: 0.28rem; font-size: 1.05rem; color: var(--deep-green); } .ds-notice strong { display: block; margin-bottom: 0.3rem; color: var(--deep-green); font-size: 1.05rem; font-weight: 800; } .ds-notice p + p { margin-top: 0.5rem; } .ds-notice.tone-gold { border-left-color: var(--accent-gold); } .ds-notice.tone-gold > i { color: #a8801a; } .ds-notice.tone-red { border-left-color: var(--ds-seal); } .ds-notice.tone-red > i, .ds-notice.tone-red strong { color: var(--ds-seal); } .ds-notice.tone-emerald { border-left-color: var(--accent-teal); } .ds-notice.tone-emerald > i { color: var(--accent-teal); } /* --- Loading and empty ----------------------------------------------------- */ .ds-loading { display: flex; align-items: center; gap: 0.85rem; padding: 3.5rem 0; color: var(--ds-ink-45); font-size: 0.95rem; } .ds-spinner { flex: none; width: 1.15rem; height: 1.15rem; border: 2px solid rgba(6, 43, 26, 0.16); border-top-color: var(--accent-gold); border-radius: 50%; animation: ds-spin 0.8s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } } .ds-empty { padding: 3.5rem 2rem; border-radius: var(--ds-card-radius); background: var(--ds-card); box-shadow: var(--ds-card-shadow); text-align: center; color: var(--ds-ink-60); } .ds-empty h2 { margin-bottom: 0.6rem; font-size: 1.4rem; } .ds-empty .ds-panel-actions { justify-content: center; } /* --- Configurator layout ---------------------------------------------------- */ .ds-crumbs { padding-top: clamp(1.75rem, 3vw, 2.5rem); font-size: 0.88rem; color: var(--ds-ink-45); } .ds-crumbs a { color: inherit; text-decoration: none; } .ds-crumbs a:hover { color: var(--deep-green); text-decoration: underline; } .ds-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(1.75rem, 3.5vw, 2.5rem); align-items: start; margin-top: 2rem; } .ds-rail { position: sticky; top: calc(var(--header-offset) + 42px); } /* The steps are a real dependency chain: the options resolve the variant, the variant resolves the price, and the delivery choice decides which fields the form even has. Numbering them says something true. */ .ds-step, .ds-panel { padding: clamp(1.6rem, 2.5vw, 2rem); border-radius: var(--ds-card-radius); background: var(--ds-card); box-shadow: var(--ds-card-shadow); margin-bottom: 1.5rem; } .ds-step-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ds-line); } .ds-step-index { flex: none; font-size: 0.9rem; font-weight: 800; color: var(--accent-gold); font-variant-numeric: tabular-nums; } .ds-step-title-wrap { flex: 1; min-width: 0; } .ds-step-head h2, .ds-panel > h2 { margin: 0; font-size: 1.25rem; } .ds-panel > h2 { margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ds-line); } .ds-step-head p { margin: 0.35rem 0 0; color: var(--ds-ink-45); font-size: 0.9rem; line-height: 1.6; } .ds-panel-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } /* --- Quantity ---------------------------------------------------------------- */ .ds-quantity-label { display: block; margin-bottom: 0.4rem; color: #374151; font-size: 0.85rem; font-weight: 600; } .ds-stepper { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border: 1px solid #D1D5DB; border-radius: 12px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ds-stepper:focus-within { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); } .ds-stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 9px; background: var(--ds-paper); color: var(--deep-green); font-size: 0.8rem; cursor: pointer; transition: background 0.2s ease; } .ds-stepper-btn:hover:not(:disabled) { background: rgba(212, 175, 55, 0.2); } .ds-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* The stepper frame is the control; the field inside it carries no chrome. */ .ds-stepper-input, .ds-stepper-input[type="number"] { width: 4rem; height: 2.5rem; padding: 0; border: 0; background: transparent; text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--deep-green); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .ds-stepper-input:focus, .ds-stepper-input:focus-visible { border: 0; outline: none; box-shadow: none; } .ds-stepper-input::-webkit-outer-spin-button, .ds-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ds-quantity .ds-help { margin-top: 0.7rem; } .ds-quantity .ds-help + .ds-help { margin-top: 0.2rem; } /* --- Option sections ---------------------------------------------------------- */ .ds-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 0.75rem; } .ds-option { position: relative; display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.15rem; border: 1px solid #D1D5DB; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .ds-option:hover { border-color: var(--accent-gold); } .ds-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .ds-option-name { font-size: 0.95rem; font-weight: 800; color: var(--deep-green); } .ds-option-price { font-size: 0.88rem; font-weight: 600; color: var(--deep-green); font-variant-numeric: tabular-nums; } /* "Included" adds nothing to the order, so it must not read like a price. */ .ds-option-price.is-included { font-weight: 400; color: var(--ds-ink-45); } .ds-option.is-selected { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.1); box-shadow: 0 0 0 2px var(--accent-gold); } .ds-option.is-unavailable { opacity: 0.45; cursor: not-allowed; } .ds-option.is-unavailable:hover { border-color: #D1D5DB; } .ds-option:focus-within { outline: 3px solid rgba(212, 175, 55, 0.45); outline-offset: 3px; } /* --- Form fields: the site's global input rules do the styling --------------- */ .ds-fieldgroup { border: 0; padding: 0; margin: 0; min-width: 0; } .ds-fieldgroup + .ds-fieldgroup { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--ds-line); } .ds-fieldgroup > legend { padding: 0; margin-bottom: 1.2rem; color: var(--deep-green); font-size: 1.05rem; font-weight: 800; } .ds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .ds-field { display: flex; flex-direction: column; min-width: 0; } .ds-field.is-wide { grid-column: 1 / -1; } /* Matches .form-group label in style.css. */ .ds-field label, .ds-address label { display: block; margin-bottom: 0.4rem; color: #374151; font-size: 0.85rem; font-weight: 600; } .ds-required { margin-left: 0.15rem; color: var(--ds-seal); } .ds-textarea { min-height: 120px; } .ds-help { margin-top: 0.45rem; color: var(--ds-ink-45); font-size: 0.83rem; line-height: 1.6; } .ds-error { margin-top: 0.45rem; color: var(--ds-seal); font-size: 0.83rem; font-weight: 600; } .ds-check { display: flex; gap: 0.85rem; padding: 1.1rem 1.25rem; border: 1px solid #D1D5DB; border-radius: 12px; background: #fbfcfb; } .ds-check.is-invalid { border-color: var(--ds-seal); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); } .ds-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--deep-green); } .ds-check label { margin-bottom: 0; color: var(--text-dark); font-size: 0.92rem; font-weight: 400; line-height: 1.6; cursor: pointer; } .ds-address { grid-column: 1 / -1; min-width: 0; padding: 1.4rem; border: 1px solid #D1D5DB; border-radius: 12px; background: #fbfcfb; } .ds-address > legend { padding: 0 0.4rem; margin-left: -0.4rem; color: var(--deep-green); font-size: 0.95rem; font-weight: 800; } .ds-address .ds-grid { margin-top: 1rem; } .ds-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- The order docket ---------------------------------------------------------- */ .ds-docket { padding: 1.75rem; border-radius: var(--ds-card-radius); border-top: 4px solid var(--accent-gold); background: var(--ds-card); box-shadow: var(--ds-card-shadow); } .ds-docket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ds-line); } .ds-docket-head h2, .ds-docket-head h3 { margin: 0; font-size: 1.1rem; } .ds-docket-ref { color: var(--ds-ink-45); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; } .ds-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--ds-line); font-size: 0.93rem; } .ds-line:last-of-type { border-bottom: 0; } .ds-line-label { min-width: 0; color: var(--ds-ink-60); } .ds-line-label span { display: block; margin-top: 0.2rem; color: var(--ds-ink-45); font-size: 0.82rem; } .ds-line-value { font-weight: 800; text-align: right; white-space: nowrap; color: var(--deep-green); font-variant-numeric: tabular-nums; } .ds-line-value.is-muted { font-weight: 400; color: var(--ds-ink-45); } .ds-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; padding-top: 1.1rem; border-top: 2px solid var(--deep-green); } .ds-total-label { color: var(--deep-green); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .ds-total-value { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--deep-green); font-variant-numeric: tabular-nums; } .ds-docket-foot { margin-top: 1.2rem; color: var(--ds-ink-45); font-size: 0.82rem; line-height: 1.7; } /* The universal CTA is a fixed 260px, so rail actions centre rather than stretch. */ .ds-rail-actions { display: grid; justify-items: center; gap: 0.9rem; margin-top: 1.5rem; } .ds-rail-actions .ds-docket-foot, .ds-rail-actions .ds-notice { justify-self: stretch; text-align: left; } /* --- Access key ------------------------------------------------------------------ */ .ds-key { padding: clamp(1.6rem, 2.5vw, 2rem); border-radius: var(--ds-card-radius); border-top: 4px solid var(--accent-gold); background: #fffdf6; box-shadow: var(--ds-card-shadow); margin-bottom: 1.5rem; } .ds-key h2 { margin-bottom: 0.6rem; font-size: 1.25rem; } .ds-key p { max-width: 70ch; color: var(--ds-ink-60); font-size: 0.95rem; line-height: 1.7; } .ds-key-value { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding: 1rem 1.15rem; border: 1px dashed rgba(212, 175, 55, 0.6); border-radius: 12px; background: #fff; } .ds-key-value code { flex: 1; min-width: 12rem; font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; word-break: break-all; color: var(--deep-green); } /* --- Timeline ---------------------------------------------------------------------- */ .ds-timeline { list-style: none; margin: 0; padding: 0; } .ds-timeline li { position: relative; padding: 0 0 1.6rem 2rem; } .ds-timeline li:last-child { padding-bottom: 0; } .ds-timeline li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 12px; height: 12px; border: 2px solid var(--ds-line-strong); border-radius: 50%; background: var(--ds-card); } .ds-timeline li::after { content: ""; position: absolute; left: 5px; top: 1.3rem; bottom: 0.2rem; width: 2px; background: var(--ds-line); } .ds-timeline li:last-child::after { display: none; } .ds-timeline li.is-done::before { border-color: var(--accent-gold); background: var(--accent-gold); } .ds-timeline li.is-current::before { border-color: var(--deep-green); background: var(--deep-green); box-shadow: 0 0 0 4px rgba(6, 43, 26, 0.1); } .ds-timeline-label { color: var(--deep-green); font-size: 0.98rem; font-weight: 800; } .ds-timeline-meta { margin-top: 0.25rem; color: var(--ds-ink-45); font-size: 0.83rem; } .ds-timeline li.is-pending .ds-timeline-label { color: var(--ds-ink-45); font-weight: 400; } /* --- Definition tables ---------------------------------------------------------------- */ .ds-defs { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); margin: 0; } .ds-defs dt { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink-45); font-size: 0.88rem; } .ds-defs dd { padding: 0.85rem 0; margin: 0; border-bottom: 1px solid var(--ds-line); color: var(--text-dark); font-size: 0.93rem; word-break: break-word; } .ds-defs dt:nth-last-of-type(1), .ds-defs dd:nth-last-of-type(1) { border-bottom: 0; } /* --- How it works: a genuine sequence, so it is numbered --------------------------------- */ .ds-steps { counter-reset: ds-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.5rem; margin: 2.25rem 0 0; padding: 0; } .ds-steps li { counter-increment: ds-step; list-style: none; padding: 1.9rem; border-radius: var(--ds-card-radius); background: var(--ds-card); box-shadow: var(--ds-card-shadow); } .ds-steps li::before { content: counter(ds-step, decimal-leading-zero); display: block; margin-bottom: 0.9rem; color: var(--accent-gold); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; } .ds-steps h3 { margin-bottom: 0.5rem; font-size: 1.1rem; } .ds-steps p { color: var(--ds-ink-60); font-size: 0.93rem; line-height: 1.7; } /* --- Saved orders ------------------------------------------------------------------------ */ .ds-saved { display: grid; gap: 0.75rem; margin-top: 1.25rem; } .ds-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border: 1px solid #D1D5DB; border-radius: 12px; background: #fff; color: var(--deep-green); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; } .ds-saved-item:hover { border-color: var(--accent-gold); transform: translateX(3px); } .ds-saved-number { font-size: 0.98rem; font-weight: 800; font-variant-numeric: tabular-nums; } .ds-saved-meta { display: block; margin-top: 0.25rem; color: var(--ds-ink-45); font-size: 0.85rem; font-weight: 400; } /* --- Payment modal ------------------------------------------------------------------------- */ .ds-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2vw, 2rem); background: rgba(4, 27, 16, 0.85); backdrop-filter: blur(4px); } .ds-modal[hidden] { display: none; } .ds-modal-card { display: flex; flex-direction: column; width: min(100%, 720px); max-height: 94vh; border-radius: var(--ds-card-radius); background: var(--ds-card); /* Explicit: paints its text white for the dark site shell. */ color: var(--text-dark); font-family: 'Outfit', sans-serif; line-height: 1.6; overflow: hidden; } .ds-modal.is-expanded .ds-modal-card { width: min(100%, 1100px); height: 95vh; max-height: 95vh; } .ds-modal-card h2 { color: var(--deep-green); font-weight: 800; line-height: 1.2; } .ds-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--ds-line); } .ds-modal-head h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; } .ds-modal-head h2 i { color: var(--accent-gold); } .ds-modal-head p { max-width: 52ch; margin-top: 0.4rem; color: var(--ds-ink-45); font-size: 0.88rem; line-height: 1.6; } .ds-modal-close { flex: none; width: 2.4rem; height: 2.4rem; border: 1px solid #D1D5DB; border-radius: 999px; background: #fff; color: var(--deep-green); font-size: 1rem; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .ds-modal-close:hover { background: rgba(6, 43, 26, 0.06); border-color: var(--deep-green); } .ds-modal-close[disabled] { opacity: 0.4; cursor: not-allowed; } .ds-modal-body { display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; gap: 1.25rem; padding: 1.5rem 1.75rem 1.75rem; overflow: auto; } .ds-modal-body > .ds-modal-status, .ds-modal-body > .ds-modal-frame, .ds-modal-body > .ds-help { width: 100%; } .ds-modal-status { display: flex; gap: 0.85rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--ds-paper); color: var(--ds-ink-60); font-size: 0.93rem; line-height: 1.6; } .ds-modal-status i { margin-top: 0.2rem; color: #a8801a; } .ds-modal-status.tone-emerald { background: rgba(43, 122, 106, 0.1); } .ds-modal-status.tone-emerald i { color: var(--accent-teal); } .ds-modal-status.tone-red { background: rgba(179, 38, 30, 0.08); } .ds-modal-status.tone-red i { color: var(--ds-seal); } /* Moneris sizes its own iframe and it keeps a short intrinsic height, so the fill rules below are forced or the card form scrolls inside a sliver. */ .ds-modal-frame { min-height: 0; border-radius: 12px; } .ds-modal.is-expanded .ds-modal-frame { flex: 1; min-height: 0; overflow: auto; } .ds-modal.is-expanded .ds-modal-frame > * { height: 100%; } .ds-modal.is-expanded .ds-modal-frame iframe { width: 100% !important; height: 100% !important; min-height: 520px !important; border: 0 !important; } body.ds-modal-open { overflow: hidden; } /* --- Responsive ------------------------------------------------------------------------------ */ @media (max-width: 1050px) { .ds-layout { grid-template-columns: minmax(0, 1fr); } .ds-rail { position: static; } } @media (max-width: 720px) { .ds-page { padding-top: calc(var(--header-offset) - 30px); } .ds-grid, .ds-defs { grid-template-columns: minmax(0, 1fr); } .ds-defs dt { padding-bottom: 0; border-bottom: 0; } .ds-hero-actions, .ds-panel-actions { flex-direction: column; align-items: stretch; } .ds-modal-card { max-height: 100vh; border-radius: 0; } } @media (prefers-reduced-motion: reduce) { .ds-record, .ds-saved-item, .ds-option { transition: none; } .ds-record:hover, .ds-saved-item:hover { transform: none; } .ds-spinner { animation-duration: 2.4s; } }