/* * cx.css — customer-experience modernization stylesheet. * Loaded only when !admin_section?. All rules in this file are scoped * under .app-cx (set on the customer layout's ) so they cannot * accidentally apply to admin views. Admin retains style.css unchanged. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Surfaces */ --color-bg: #f5f5f7; --color-card: #ffffff; --color-line: #e5e7eb; --color-line-strong: #d1d5db; /* Text */ --color-ink: #111827; --color-muted: #6b7280; --color-muted-strong: #4b5563; /* Primary blue ramp */ --color-primary: #1e3a8a; --color-primary-soft: #2d4baf; --color-primary-hover: #1e4ed8; --color-link: #1e3a8a; /* Notification colors */ --color-success: #059669; --color-success-bg: #ecfdf5; --color-success-border: #10b981; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-warning-strong: #b45309; --color-warning-ink: #78350f; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-bg: #fef2f2; --color-danger-ink: #7f1d1d; --color-suggest-bg: #eff6ff; --color-suggest-border: #1e3a8a; --color-info-bg: #f0f9ff; --color-info-border: #0284c7; --color-info-ink: #075985; --color-testing-bg: #b91c1c; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Type scale */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; /* Line-height scale */ --lh-tight: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Price-specific type sizes */ --text-price-hero: 28px; --text-price-total: 20px; --text-price-line: 14px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 25px rgba(0,0,0,0.1); /* Motion */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Font */ --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Reserved for the printed-pass artifact only; in-app UI is single-sans. */ --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Box-sizing reset — width/height include padding + border. Modern default; scoped to .app-cx so admin views (style.css) keep their existing model. */ .app-cx, .app-cx *, .app-cx *::before, .app-cx *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .app-cx .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ================================================== PROSE — typography for WYSIWYG-authored studio content ================================================== */ /* Studio admins author rich text via CKEditor and the result lands in session/addon/qualifier/promotion descriptions and deposit instructions. The legacy style.css resets `ol, ul { list-style: none }` and `* { line-height: 1 }` would otherwise nuke the structure. .cx-prose re-establishes typography on prose containers; .cx-prose--compact tightens spacing for in-card use where vertical room is tight (320-400px session/addon cards). These rules are baselines: studio inline `style=` attributes resolve at higher specificity than class selectors, so author cosmetic choices (color, font-size, font-weight, text-align, etc.) always win. Container classes like .session-desc and .addon-desc still own their font-size and color so the cx-modern visual hierarchy holds when the studio leaves cosmetic choices to defaults. */ .app-cx .cx-prose { line-height: 1.5; overflow-wrap: anywhere; overflow-x: clip; overflow-clip-margin: 0; } .app-cx .cx-prose p { margin: 0 0 var(--space-2); } .app-cx .cx-prose p:last-child { margin-bottom: 0; } .app-cx .cx-prose ul, .app-cx .cx-prose ol { margin: 0 0 var(--space-2); padding-left: var(--space-4); } .app-cx .cx-prose ul { list-style-type: disc; } .app-cx .cx-prose ol { list-style-type: decimal; } .app-cx .cx-prose li + li { margin-top: var(--space-1); } .app-cx .cx-prose a { color: var(--color-link); text-decoration: underline; } .app-cx .cx-prose strong, .app-cx .cx-prose b { font-weight: 600; } .app-cx .cx-prose em, .app-cx .cx-prose i { font-style: italic; } .app-cx .cx-prose blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--color-line); color: var(--color-muted-strong); } .app-cx .cx-prose h2 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); line-height: 1.25; } .app-cx .cx-prose h3 { font-size: var(--text-md); font-weight: 600; margin: var(--space-3) 0 var(--space-2); line-height: 1.3; } .app-cx .cx-prose h4 { font-size: var(--text-base); font-weight: 600; margin: var(--space-2) 0 var(--space-1); line-height: 1.3; } .app-cx .cx-prose h2:first-child, .app-cx .cx-prose h3:first-child, .app-cx .cx-prose h4:first-child { margin-top: 0; } /* Containment for studio-authored content. The sanitizer guarantees well-formed markup but not layout-safe sizing, and the WYSIWYG policy intentionally allows width/font-size on style. Bound the blast radius: images never exceed the column, wide tables scroll inside it instead of distending the page (overflow-wrap on the container above handles long unbroken tokens). */ .app-cx .cx-prose img { max-width: 100% !important; height: auto; } .app-cx .cx-prose table { display: block; max-width: 100%; overflow-x: auto; } .app-cx .cx-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* Compact modifier — applied alongside .cx-prose for in-card prose where the description shares a tight vertical column with the title, price, and action button. */ .app-cx .cx-prose--compact { line-height: 1.4; } .app-cx .cx-prose--compact p { margin: 0 0 var(--space-1); } .app-cx .cx-prose--compact ul, .app-cx .cx-prose--compact ol { padding-left: var(--space-3); } .app-cx .cx-prose--compact li + li { margin-top: 0; } /* ================================================== BASE CLASSES — buttons, fields, banners, badges All scoped under .app-cx; admin pages never load this file. ================================================== */ /* Universal focus-visible — every interactive descendant of .app-cx */ .app-cx a:focus-visible, .app-cx button:focus-visible, .app-cx select:focus-visible, .app-cx input:focus-visible, .app-cx textarea:focus-visible, .app-cx [role="button"]:focus-visible, .app-cx [tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ================================================== LEGACY STYLE.CSS RESETS style.css applies several element-level rules that leak into modernized markup. Reset them here so each modernized component doesn't have to remember to override individually. Class-specific rules with higher specificity opt back into intended values where the leak is desirable. ================================================== */ /* `*, body { font-family: 'Helvetica' ...; font-size: 12px; line-height: 1 }` (style.css:49). The universal selector sets these directly on every descendant, so inheritance from .app-cx alone won't propagate. Force font-family on every descendant; restore inherit on font-size and line- height so the normal cascade resumes inside .app-cx. */ .app-cx, .app-cx * { font-family: var(--font-body); } .app-cx { font-size: var(--text-base); line-height: var(--lh-normal); } .app-cx * { font-size: inherit; line-height: inherit; } /* `button { ... text-shadow: -1px -1px 0px #155CD2 }` and `button:hover { background-color: #ff7648; text-shadow: -1px -1px 0px #ff7648 }` (style.css:82, 90, 408, 412). Centralize text-shadow:none plus a defensive hover bg reset; class-specific :hover rules with higher specificity opt into intended hover backgrounds. */ .app-cx button { text-shadow: none; } .app-cx button:hover, .app-cx button:active, .app-cx button.active, .app-cx button.active:hover, .app-cx button.active:focus { background-color: transparent; text-shadow: none; } .app-cx .btn { text-shadow: none; } .app-cx .tooltip-badge { text-shadow: none; } /* `a, a:link, a:visited, a:active { color: #192a88; text- decoration: none }` (style.css:71). Reset to the modern link token (#1e3a8a) and restore underline as the default link affordance. Link-shaped buttons (.btn, .mobile-cart- cta, etc.) override via higher specificity. */ .app-cx a { color: var(--color-link); text-decoration: underline; } /* `p { margin-bottom: 1em; line-height: 1.5 }` (style.css:75). line-height is fine; bottom margin reset to a modern token. */ .app-cx p { margin: 0 0 var(--space-3); } /* `ul li { margin-bottom: .5em }` (style.css:79). Neutralize the legacy list-item gap; .cx-prose re-establishes intended list spacing via its own higher-specificity rules. */ .app-cx li { margin-bottom: 0; } /* `td { padding: .5em }` and `th { font-weight: bold; font- size: 14px }` (style.css:447, 450). Modernized table cells in _order.html.erb currently override via inline styles; these defaults make future cells safe without inline overrides. */ .app-cx td { padding: var(--space-2); } .app-cx th { font-weight: 600; font-size: var(--text-base); } /* Skip link */ .app-cx .skip-link { position: absolute; top: -40px; left: var(--space-3); background: var(--color-primary); color: white; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: var(--text-sm); z-index: 200; transition: top var(--duration-fast) var(--ease-standard); } .app-cx .skip-link:focus { top: var(--space-3); } /* Buttons */ .app-cx .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 11px 20px; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit; min-height: 44px; text-align: center; line-height: 1.4; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .app-cx .btn-primary { background: var(--color-primary); color: white; } .app-cx .btn-primary:hover { background: var(--color-primary-hover); } .app-cx .btn-secondary { background: white; color: var(--color-primary); border-color: var(--color-primary); } .app-cx .btn-secondary:hover { background: var(--color-suggest-bg); border-color: var(--color-primary-soft); color: var(--color-primary-soft); } .app-cx .btn-tertiary { background: transparent; color: var(--color-primary); border: none; text-decoration: underline; padding: 11px 4px; min-height: 44px; } .app-cx .btn-tertiary:hover { color: var(--color-primary-soft); } .app-cx .btn-danger { background: var(--color-danger); color: white; } .app-cx .btn-danger:hover { background: var(--color-danger-hover); } .app-cx .btn-block { display: flex; width: 100%; } .app-cx .btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; } .app-cx .btn[disabled], .app-cx .btn[aria-disabled="true"] { cursor: not-allowed; } /* Class-based disable. Unlike the [disabled] attribute, .is-disabled keeps the button click-receivable so JS can intercept the click and show feedback (e.g., pulse the unset recap chips) instead of the browser silently ignoring the press. */ .app-cx .btn.is-disabled { opacity: 0.5; cursor: not-allowed; } .app-cx .btn .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: white; border-radius: 50%; animation: spin 800ms linear infinite; } .app-cx .btn-secondary .spinner { border-color: rgba(30, 58, 138, 0.25); border-top-color: var(--color-primary); } @keyframes spin { to { transform: rotate(360deg); } } /* Generic in-flight state: hide the button label, render the spinner from the existing .btn .spinner rule centered over the button. Survives jQuery .text()/.html() collisions because the label hide is via color, not innerHTML replacement. Add aria-busy on the button (or its container) when applying. */ .app-cx .btn.is-loading { position: relative; pointer-events: none; color: transparent; } .app-cx .btn.is-loading > * { visibility: hidden; } .app-cx .btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: white; border-radius: 50%; animation: spin 800ms linear infinite; } .app-cx .btn-secondary.is-loading::after, .app-cx .btn-tertiary.is-loading::after { border-color: rgba(30, 58, 138, 0.25); border-top-color: var(--color-primary); } @media (max-width: 480px) { .app-cx .btn-row { flex-direction: column-reverse; } .app-cx .btn-row .btn { width: 100%; } } /* Form fields — with custom select chevron */ .app-cx .cx-field { margin-bottom: var(--space-4); } .app-cx .cx-field-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); margin-bottom: 6px; } .app-cx .cx-field-required { color: var(--color-danger); margin-left: 2px; } .app-cx .cx-field-input, .app-cx .cx-field-select, .app-cx .cx-field-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); font-size: var(--text-md); font-family: inherit; background: white; min-height: 44px; color: var(--color-ink); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .app-cx .cx-field-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; cursor: pointer; } .app-cx .cx-field-input:focus, .app-cx .cx-field-select:focus, .app-cx .cx-field-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.18); } .app-cx .cx-field-help { font-size: var(--text-xs); color: var(--color-muted-strong); margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-4); } /* When help text sits directly below a card header (section caption role), the standard negative top margin still anchors it tightly to the header above; tighten the bottom margin so the gap to the first field row reads as separation rather than another section break. */ .app-cx .card-header + .cx-field-help { margin-bottom: var(--space-3); } /* Inline "(optional)" indicator — sits next to a label or a subsection header. Renders muted-strong, normal weight, and resets any uppercase/letter-spacing inherited from a styled parent (subsection-header in particular) so the parenthetical reads as supplementary, not as part of the heading. */ .app-cx .cx-field-optional { color: var(--color-muted-strong); font-weight: 400; text-transform: none; letter-spacing: 0; } .app-cx .cx-field-with-errors .cx-field-label { color: var(--color-danger); } .app-cx .cx-field-with-errors .cx-field-input, .app-cx .cx-field-with-errors .cx-field-select { border-color: var(--color-danger); background: var(--color-danger-bg); } .app-cx .cx-field-error { color: var(--color-danger); font-size: var(--text-xs); margin-top: 4px; font-weight: 500; } .app-cx .cx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 600px) { .app-cx .cx-field-row { grid-template-columns: 1fr; } } /* Modifier — three-control row that keeps a single 3-up grid at every viewport, with the third column fixed to a tight width (used by the payment row's Exp Month / Year / CVV). The row does not collapse to single-column at mobile — selects and the CVV input remain side-by-side. minmax(0, 1fr) on the first two columns prevents native select chevrons from pushing the row into horizontal overflow at narrow viewports. Pairs with .cx-field-row-span-2 on a label that spans the first two columns (e.g., "Expiration Date" above Month + Year). */ .app-cx .cx-field-row.cx-field-row-3up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; column-gap: var(--space-3); row-gap: var(--space-2); align-items: end; } @media (max-width: 600px) { .app-cx .cx-field-row.cx-field-row-3up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px; column-gap: var(--space-2); } } .app-cx .cx-field-row-span-2 { grid-column: span 2; margin-bottom: 0; } /* Labels inside the compact 3-up row align to the bottom edge of the row (align-items: end), so a label bottom-margin would push the control out of alignment with its siblings. */ .app-cx .cx-field-row.cx-field-row-3up .cx-field-label { margin-bottom: 0; } /* ================================================== SELECT2 — cx-modern theme select2 hides the native