/* public-storefront.css - the page-specific look of the public gift card shop (web/GUI/PUBLIC/STOREFRONT/storefront.jsp, rendered by RESOURCES/pages/public-storefront.js). Why this file exists: CSP phase 2 removes 'unsafe-inline' from style-src, and a style="..." attribute - including one built inside a JavaScript template string that ends up in innerHTML - is a style-src-attr violation. Every static style attribute this page's renderer used to emit became one of the classes below. Values that come from DATA (the merchant brand colour) keep arriving through the CSSOM (document.documentElement.style.setProperty('--brand', ...)), which style-src does not cover, and are read here as var(--brand). Load order is load-bearing: the page links this file AFTER cardly-public.css, because several rules here have to beat a shared rule at equal specificity exactly the way the inline attribute they replace used to beat it. Nothing here belongs in cardly-base.css or cardly-public.css: it is all shaped by this one page. */ /* -------------------------------------------------- open (collective) gift card cross-sell -- */ /* Was style="text-align:center; background:linear-gradient(...); color:#fff" on a .shop-panel. The gradient reads --brand, which the renderer sets on from the merchant payload. */ .open-promo-panel { text-align: center; background: linear-gradient(135deg, var(--brand) 0%, rgba(255, 255, 255, .04) 100%); color: #fff; } /* Two classes deep, so it beats `.shop-panel h2` (0,1,1) in cardly-public.css the same way the inline attribute did. */ .open-promo-panel h2 { color: #fff; border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; } .open-promo-panel p { font-size: 14px; opacity: .92; margin: 0 0 14px; } .open-promo-cta { display: inline-block; background: #fff; color: var(--brand); padding: 10px 22px; border-radius: 8px; /* literal: no token is 8px (--radius-sm 6, --radius-md 10) */ font-weight: 700; text-decoration: none; } /* ------------------------------------------------------------------------ field help lines -- */ /* Six help lines carried style="display:block; margin-top:4px". `.muted` is colour ONLY (cardly-base.css), and keeps its UA font-size:smaller, so this is NOT .form-text and must not be folded into it: .form-text would enlarge the text to 12px flat. */ .shop-note { display: block; margin-top: var(--space-1); } /* ------------------------------------------------------------------ AI message suggestion -- */ .ai-suggest-btn { margin-top: 6px; padding: 5px 12px; font-size: var(--text-xs); border: 1px solid #d1d5db; /* literal: the same border every .shop-form input draws */ border-radius: var(--radius-sm); background: #fff; cursor: pointer; } .ai-suggest-status { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--ink-2); /* was #6b7280 */ } /* ------------------------------------------------------------------------- checkbox rows --- */ /* The three declarations below were inert in the markup they came from and stay inert here: `.form-row` is not a flex container anywhere in this app (cardly-public.css gives it a margin-bottom and nothing else). They are reproduced verbatim rather than dropped so this rewrite cannot be the thing that changes the row if .form-row ever becomes flex. */ .form-row-inline { flex-direction: row; align-items: flex-start; gap: var(--space-2); } .check-inline { width: auto; margin-top: 3px; cursor: pointer; /* directive C1 */ } .check-label { font-weight: 400; cursor: pointer; /* directive C1 */ } /* ---------------------------------------------------------------------- occasion picker ---- */ .occasion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); } /* The selected border used to be interpolated into the style attribute at render time and then rewritten with t.style.borderColor on every click. It is a CLASS now: the selection is state, not data, so it does not need the CSSOM escape hatch. `transition` intentionally restates only border-color, because that is what the inline attribute did - an inline `transition` replaced the shared `.den-chip, .payment-tile, .occasion-tile` transition wholesale. */ .occasion-tile { cursor: pointer; border-radius: var(--radius-md); border: 2px solid #d1d5db; /* literal: matches .payment-tile, which is untouched */ overflow: hidden; transition: border-color .15s; text-align: center; } .occasion-tile.selected { border-color: var(--brand); } .occasion-tile img { width: 100%; display: block; aspect-ratio: 1.586 / 1; object-fit: cover; } .occasion-tile-label { padding: 6px 4px; font-size: var(--text-sm); font-weight: 600; } /* ---------------------------------------------------------------------------- terms panel -- */ .terms-validity { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: 10px; } /* ------------------------------------------------------------------- statutory VAT wording -- */ .fiscal-line { font-size: 11px; color: #98a2b3; /* no token is close; kept literal on purpose */ margin-top: var(--space-2); max-width: 420px; }