/* ============================================================================
* Rogaloff Award Decal Builder — .rm- reskin + responsive
* ----------------------------------------------------------------------------
* Restyles the legacy builder (modal wizard + landing) to match the new
* BigCommerce Stencil storefront's `.rm-` design system.
*
* SCOPING RULE (hard constraint): every rule is scoped to a builder root —
* .rm-builder (landing / inline content)
* .modal-main (the launch section)
* .new-rack-modal (each wizard modal)
* There are NO global `body` / `*` selectors, so this file cannot affect the
* surrounding storefront. Design tokens are declared on those roots too (not on
* :root) so the builder is self-contained whether embedded or standalone.
*
* Load AFTER the legacy style.css so these win on specificity/order.
* Fonts (Cormorant Garamond + Jost) are pulled in via in the Blade head.
* ========================================================================== */
/* ---- Tokens (scoped to the builder roots only) --------------------------- */
.rm-builder,
.modal-main,
.new-rack-modal,
.rm-terms-modal {
--rm-navy: #0f1e3c;
--rm-navy-mid: #1a3060;
--rm-navy-light: #243d72;
--rm-teal: #1d6b5a;
--rm-teal-light: #2a8a72;
--rm-gold: #b8963e;
--rm-gold-light: #d4af62;
--rm-gold-pale: #f5edd8;
--rm-white: #ffffff;
--rm-off-white: #f7f5f0;
--rm-paper: #f2efe8;
--rm-charcoal: #2c2c2e;
--rm-muted: #6b6860;
--rm-muted-light: #9a9890;
--rm-border-soft: rgba(44,44,46,0.10);
--rm-border-mid: rgba(44,44,46,0.18);
--rm-font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--rm-font-body: 'Jost', system-ui, -apple-system, sans-serif;
--rm-radius: 4px;
--rm-radius-md: 6px;
--rm-radius-lg: 10px;
--rm-trans: 0.18s ease;
}
/* ---- Landing section ----------------------------------------------------- */
.modal-main {
font-family: var(--rm-font-body);
color: var(--rm-charcoal);
background: var(--rm-off-white);
padding: 48px 20px 56px;
}
.modal-main .container.text-center strong { color: var(--rm-navy); }
.modal-main p strong { color: var(--rm-navy); font-weight: 600; }
/* ---- Buttons — map legacy .global-btn / .btn-primary onto .rm-btn -------- */
.modal-main .btn-primary,
.new-rack-modal .global-btn,
.new-rack-modal .clear_rack {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--rm-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 11px 26px;
border-radius: var(--rm-radius);
border: 1px solid var(--rm-gold);
background: var(--rm-gold);
color: var(--rm-navy);
cursor: pointer;
text-decoration: none;
transition: background var(--rm-trans), border-color var(--rm-trans), color var(--rm-trans);
}
.modal-main .btn-primary:hover,
.new-rack-modal .global-btn:hover {
background: var(--rm-gold-light);
border-color: var(--rm-gold-light);
color: var(--rm-navy);
}
/* Navy variant for primary forward actions (Add to rack / Proceed) */
.new-rack-modal .add-to-btn,
.new-rack-modal .add-to-crt,
.new-rack-modal .next-btn.downloadribbon {
background: var(--rm-navy);
border-color: var(--rm-navy);
color: var(--rm-white);
}
.new-rack-modal .add-to-btn:hover,
.new-rack-modal .add-to-crt:hover,
.new-rack-modal .next-btn.downloadribbon:hover {
background: var(--rm-navy-light);
border-color: var(--rm-navy-light);
color: var(--rm-white);
}
/* Subtle / back / cancel buttons → outline */
.new-rack-modal .back-btn,
.new-rack-modal .grey-btn,
.new-rack-modal .cancel,
.new-rack-modal .clear_rack {
background: transparent;
color: var(--rm-navy);
border-color: var(--rm-border-mid);
}
.new-rack-modal .back-btn:hover,
.new-rack-modal .grey-btn:hover,
.new-rack-modal .cancel:hover,
.new-rack-modal .clear_rack:hover {
border-color: var(--rm-navy);
background: var(--rm-paper);
color: var(--rm-navy);
}
/* ---- Modal chrome -------------------------------------------------------- */
.new-rack-modal .modal-content {
font-family: var(--rm-font-body);
background: var(--rm-off-white);
border: none;
border-radius: var(--rm-radius-lg);
box-shadow: 0 24px 60px rgba(15,30,60,0.28);
overflow: hidden;
}
.new-rack-modal .modal-body { padding: 0; }
.new-rack-modal .modal-inner { padding: 32px 36px 28px; }
/* Section headings inside modals */
.new-rack-modal h2,
.new-rack-modal h3,
.new-rack-modal h4,
.new-rack-modal .modal-title {
font-family: var(--rm-font-display);
color: var(--rm-navy);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Close button */
.new-rack-modal .clear-rack-close-btn,
.new-rack-modal .modal-btn-close {
position: absolute;
top: 14px;
right: 16px;
width: 34px;
height: 34px;
border: 1px solid var(--rm-border-mid);
border-radius: 50%;
background: var(--rm-white);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: border-color var(--rm-trans), background var(--rm-trans);
}
.new-rack-modal .clear-rack-close-btn:hover,
.new-rack-modal .modal-btn-close:hover {
border-color: var(--rm-gold);
background: var(--rm-gold-pale);
}
.new-rack-modal .clear-rack-close-btn img,
.new-rack-modal .modal-btn-close img { width: 14px; height: 14px; }
/* ---- Branch tiles -------------------------------------------------------- */
.new-rack-modal #branch-container .branch-item { margin-bottom: 14px; }
.new-rack-modal #branch-container .branch-item .global-btn {
width: 100%;
justify-content: center;
text-transform: none;
letter-spacing: 0.02em;
font-size: 14px;
background: var(--rm-white);
color: var(--rm-navy);
border-color: var(--rm-border-soft);
padding: 14px 18px;
}
.new-rack-modal #branch-container .branch-item .global-btn:hover {
border-color: var(--rm-gold);
background: var(--rm-gold-pale);
}
/* ---- Award (ribbon) picker tiles → card style ---------------------------- */
.new-rack-modal .award-item {
background: var(--rm-white);
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius-md);
padding: 14px;
text-align: center;
cursor: pointer;
transition: border-color var(--rm-trans), box-shadow var(--rm-trans), transform var(--rm-trans);
height: 100%;
}
.new-rack-modal .award-item:hover {
border-color: var(--rm-gold);
box-shadow: 0 8px 22px rgba(15,30,60,0.10);
transform: translateY(-2px);
}
.new-rack-modal .award-item.active {
border-color: var(--rm-teal);
box-shadow: 0 0 0 2px var(--rm-teal) inset;
}
.new-rack-modal .award-item img {
max-width: 100%;
height: auto;
margin-bottom: 8px;
}
.new-rack-modal .award-item .ribbon_title {
font-family: var(--rm-font-body);
font-size: 12px;
font-weight: 500;
color: var(--rm-charcoal);
margin: 0;
line-height: 1.35;
}
/* ---- Inputs / selects / search ------------------------------------------ */
.new-rack-modal input[type="text"],
.new-rack-modal input[type="email"],
.new-rack-modal input[type="number"],
.new-rack-modal select,
.new-rack-modal .form-control {
font-family: var(--rm-font-body);
font-size: 13px;
color: var(--rm-charcoal);
background: var(--rm-white);
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius);
padding: 10px 12px;
outline: none;
transition: border-color var(--rm-trans), box-shadow var(--rm-trans);
}
.new-rack-modal input:focus,
.new-rack-modal select:focus,
.new-rack-modal .form-control:focus {
border-color: var(--rm-gold);
box-shadow: 0 0 0 3px var(--rm-gold-pale);
}
.new-rack-modal input::placeholder { color: var(--rm-muted-light); }
.new-rack-modal #size-selector { min-width: 280px; }
/* Search row (keyword + button) */
.new-rack-modal .search-bar,
.new-rack-modal .modal-search {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 18px;
}
/* ---- Rack preview canvas ------------------------------------------------- */
.new-rack-modal .selectedRibbon-container,
.new-rack-modal .screenshot-div {
background: var(--rm-paper);
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius-md);
padding: 18px;
}
/* ---- Price + checkout area ----------------------------------------------- */
.new-rack-modal .totalPrice,
.new-rack-modal .subtotalPrice,
.new-rack-modal #eachPrice {
font-family: var(--rm-font-display);
font-weight: 600;
color: var(--rm-navy);
}
.new-rack-modal .checkout-subtotal-button,
.new-rack-modal .ribbons-btns,
.new-rack-modal .select-ribbons-btns,
.new-rack-modal .email-btns,
.new-rack-modal .modal-button {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 22px;
}
/* T&C + email gate row */
.new-rack-modal .form-group {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
/* ---- Pagination ---------------------------------------------------------- */
.new-rack-modal .modal-pagination {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
margin-top: 18px;
flex-wrap: wrap;
}
.new-rack-modal .modal-pagination a,
.new-rack-modal .modal-pagination button {
min-width: 34px;
height: 34px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius);
background: var(--rm-white);
color: var(--rm-navy);
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.new-rack-modal .modal-pagination a.active,
.new-rack-modal .modal-pagination button.active {
background: var(--rm-navy);
color: var(--rm-white);
border-color: var(--rm-navy);
}
/* ---- Loader -------------------------------------------------------------- */
.modal-main .loader,
.new-rack-modal .loader { text-align: center; }
/* ============================================================================
* RESPONSIVE (Task 4) — the wizard was modal-xl / desktop-only.
* ========================================================================== */
@media (max-width: 992px) {
.new-rack-modal .modal-dialog.modal-xl { max-width: 94vw; margin: 16px auto; }
.new-rack-modal #size-selector { min-width: 0; width: 100%; }
}
@media (max-width: 768px) {
.modal-main { padding: 28px 16px 36px; }
.new-rack-modal .modal-dialog,
.new-rack-modal .modal-dialog.modal-xl,
.new-rack-modal .modal-dialog.modal-md {
max-width: 100%;
width: 100%;
margin: 0;
}
.new-rack-modal .modal-content {
border-radius: 0;
min-height: 100vh; /* full-screen sheet on phones */
}
.new-rack-modal .modal-inner { padding: 22px 18px 20px; }
/* Picker grid: Bootstrap cols → 2-up, then let cards breathe */
.new-rack-modal #awards-container > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
}
/* Buttons go full width and stack */
.new-rack-modal .checkout-subtotal-button,
.new-rack-modal .ribbons-btns,
.new-rack-modal .select-ribbons-btns,
.new-rack-modal .email-btns,
.new-rack-modal .modal-button { flex-direction: column; align-items: stretch; }
.new-rack-modal .global-btn { width: 100%; }
.new-rack-modal .selectedRibbon-container,
.new-rack-modal .screenshot-div { padding: 12px; overflow-x: auto; }
}
@media (max-width: 480px) {
.new-rack-modal #awards-container > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
.new-rack-modal .modal-inner { padding: 18px 14px 16px; }
.modal-main .container.text-center img { width: 150px !important; height: auto !important; }
}
/* ---- Live price preview -------------------------------------------------- */
.new-rack-modal .rm-price-preview {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 6px 10px;
margin: 14px 0 4px;
min-height: 24px;
text-align: center;
}
.new-rack-modal .rm-price-preview__total {
font-family: var(--rm-font-display);
font-size: 26px;
font-weight: 600;
color: var(--rm-navy);
line-height: 1;
}
.new-rack-modal .rm-price-preview__gst {
font-family: var(--rm-font-body);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rm-muted);
}
.new-rack-modal .rm-price-preview__detail {
flex-basis: 100%;
font-family: var(--rm-font-body);
font-size: 12px;
color: var(--rm-muted);
}
.new-rack-modal .rm-price-preview__hint {
font-family: var(--rm-font-body);
font-size: 12px;
font-style: italic;
color: var(--rm-muted-light);
}
/* ============================================================================
* POLISH PASS (loaded last → wins ties; a few !important to beat legacy style.css)
* ========================================================================== */
/* --- Centre all modal titles + control the under-title space -------------- */
.modal-main .modal-main-head,
.new-rack-modal .modal-main-head,
.new-rack-modal .modal-inner > h5,
.new-rack-modal .modal-body > h5 {
text-align: center !important;
font-family: var(--rm-font-display);
color: var(--rm-navy);
font-weight: 600;
font-size: 24px;
margin: 4px 0 0;
}
/* The "dwn-brd" divider under a title — make it a tidy centred rule, not a big gap */
.new-rack-modal .modal-main-head.dwn-brd {
padding-bottom: 14px;
margin: 0 0 18px;
border-bottom: 1px solid var(--rm-border-soft);
}
/* secondary sub-heading line (e.g. "Select your size…") */
.new-rack-modal .modal-inner > h5:not(.modal-main-head) {
font-size: 15px;
font-weight: 500;
color: var(--rm-muted);
}
/* --- Award (ribbon) cards: kill the bottom-heavy empty space -------------- */
.new-rack-modal .award-item {
height: auto !important;
min-height: 148px;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center; /* centre content vertically → no dead space below */
gap: 10px;
padding: 16px 12px;
}
.new-rack-modal .award-item img {
max-height: 60px;
width: auto;
max-width: 100%;
margin: 0;
}
.new-rack-modal .award-item .ribbon_title {
font-size: 12.5px;
line-height: 1.3;
}
/* breathing room between card rows */
.new-rack-modal #awards-container > [class*="col-"] { margin-bottom: 18px; }
/* --- Buttons: make the colour tiers land reliably over legacy CSS --------- */
/* base = gold */
.new-rack-modal a.global-btn,
.modal-main .btn-primary.rm-btn {
background: var(--rm-gold) !important;
border: 1px solid var(--rm-gold) !important;
color: var(--rm-navy) !important;
white-space: normal; /* let long labels wrap instead of truncating */
height: auto;
line-height: 1.25;
text-align: center;
}
.new-rack-modal a.global-btn:hover,
.modal-main .btn-primary.rm-btn:hover {
background: var(--rm-gold-light) !important;
border-color: var(--rm-gold-light) !important;
}
/* forward / primary actions = navy */
.new-rack-modal a.global-btn.add-to-btn,
.new-rack-modal a.global-btn.add-to-crt,
.new-rack-modal a.global-btn.downloadribbon,
.new-rack-modal a.global-btn.next-btn.downloadribbon {
background: var(--rm-navy) !important;
border-color: var(--rm-navy) !important;
color: var(--rm-white) !important;
}
.new-rack-modal a.global-btn.add-to-btn:hover,
.new-rack-modal a.global-btn.add-to-crt:hover,
.new-rack-modal a.global-btn.downloadribbon:hover {
background: var(--rm-navy-light) !important;
border-color: var(--rm-navy-light) !important;
}
/* back / cancel / clear = outline (fixes the muddy "Make Changes" button) */
.new-rack-modal a.global-btn.cancel,
.new-rack-modal a.global-btn.back-btn,
.new-rack-modal a.global-btn.grey-btn,
.new-rack-modal a.global-btn.clear_rack,
.new-rack-modal .clear_rack {
background: transparent !important;
border: 1px solid var(--rm-border-mid) !important;
color: var(--rm-navy) !important;
}
.new-rack-modal a.global-btn.cancel:hover,
.new-rack-modal a.global-btn.back-btn:hover,
.new-rack-modal a.global-btn.grey-btn:hover,
.new-rack-modal a.global-btn.clear_rack:hover {
background: var(--rm-paper) !important;
border-color: var(--rm-navy) !important;
}
/* --- Branch label / search row ------------------------------------------- */
/* the branch-name button in the picker header was truncating */
.new-rack-modal .selected-branch,
.new-rack-modal .branch-label,
.new-rack-modal .search-bar .global-btn {
white-space: normal !important;
max-width: 320px;
font-size: 12px;
padding: 10px 16px;
}
/* search magnifier button */
.new-rack-modal .search-bar button,
.new-rack-modal .search-icon {
background: var(--rm-navy);
color: var(--rm-white);
border: 1px solid var(--rm-navy);
border-radius: var(--rm-radius);
padding: 0 14px;
}
/* --- "N award(s) added to rack" counter ----------------------------------- */
.new-rack-modal .rack-count,
.new-rack-modal .added-count,
.new-rack-modal .award-count {
color: var(--rm-teal) !important;
font-size: 12px;
letter-spacing: 0.03em;
text-align: center;
}
/* --- Rack preview canvas: hide any stray empty input box ------------------ */
.new-rack-modal .selectedRibbon-container input,
.new-rack-modal .screenshot-div input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* --- Terms & email row (digital): tidy alignment -------------------------- */
.new-rack-modal #emailModal .form-group {
flex-direction: column;
align-items: stretch;
gap: 12px;
max-width: 460px;
margin: 0 auto 16px;
}
.new-rack-modal #emailModal .rm-tc-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
}
.new-rack-modal #emailModal .rm-tc-row input[type="checkbox"] { width: 16px; height: 16px; }
/* physical T&C row in the size-selector modal (parity with digital) */
.new-rack-modal #selectRibbonBar .rm-tc-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
margin: 10px 0 2px;
}
.new-rack-modal #selectRibbonBar .rm-tc-row input[type="checkbox"] { width: 16px; height: 16px; }
.new-rack-modal a.rm-terms-link {
color: var(--rm-teal);
text-decoration: underline;
cursor: pointer;
background: none !important;
border: none !important;
padding: 0 !important;
font-size: 13px;
text-transform: none;
letter-spacing: 0;
}
/* --- Digital Terms & Conditions modal ------------------------------------ */
.rm-terms-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--rm-font-body);
}
.rm-terms-backdrop { position: absolute; inset: 0; background: rgba(15,30,60,0.55); }
.rm-terms-dialog {
position: relative;
background: var(--rm-off-white);
border-radius: var(--rm-radius-lg);
max-width: 560px;
width: calc(100% - 32px);
max-height: 86vh;
overflow: auto;
padding: 28px 28px 22px;
box-shadow: 0 24px 60px rgba(15,30,60,0.35);
}
.rm-terms-dialog h5 {
font-family: var(--rm-font-display);
color: var(--rm-navy);
font-size: 22px;
text-align: center;
margin: 0 0 14px;
}
.rm-terms-body { font-size: 13.5px; color: var(--rm-charcoal); line-height: 1.55; }
.rm-terms-body ul { padding-left: 18px; margin: 10px 0; }
.rm-terms-body li { margin-bottom: 8px; }
.rm-terms-note { color: var(--rm-muted); font-style: italic; font-size: 12.5px; }
.rm-terms-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.rm-terms-actions .global-btn {
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
padding: 11px 26px; border-radius: var(--rm-radius); text-decoration: none; cursor: pointer;
}
.rm-terms-actions .add-to-btn { background: var(--rm-navy); border: 1px solid var(--rm-navy); color: #fff; }
.rm-terms-actions .cancel { background: transparent; border: 1px solid var(--rm-border-mid); color: var(--rm-navy); }
.rm-terms-close {
position: absolute; top: 10px; right: 14px;
background: none; border: none; font-size: 26px; line-height: 1;
color: var(--rm-muted); cursor: pointer;
}
.rm-terms-close:hover { color: var(--rm-navy); }
/* ---- Ribbon aspect ratio (added 2 Sep 2026) -------------------------------
* style.css forces `width:100%; height:30px; object-fit:fill` on ribbon images,
* which discards aspect ratio: 3:1 source art was rendering at 3.8:1, stretched
* ~27% horizontally in the preview and in the delivered artwork.
*
* height:auto lets each image use its own intrinsic ratio - correct for full
* size and miniature ribbons alike, without hard-coding a number.
*
* The doubled class raises specificity above the legacy sheet without
* !important. This makes the bar ~27% taller on screen: that is the fix, the
* bar was previously squashed.
* ------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal .selectedRibbon-container img,
.modal-main.modal-main .selectedRibbon-container img {
width: 100%;
height: auto;
object-fit: contain;
}
/* ===========================================================================
* BRAND LOCKUP PASS - 2 Sep 2026
* Measured against the live storefront rather than eyeballed. Buttons, palette
* and card language already matched; these four did not. Append-only, and
* every selector wins on specificity arithmetic rather than by escalating the
* !important war with the legacy sheet.
* ======================================================================== */
/* --- Display face --------------------------------------------------------
* style.css `.modal-dialog.modal-xl h5` (0,2,1) was beating the June rule
* (0,2,0). Doubling the root class makes it (0,3,0)/(0,3,1) and Cormorant
* wins with no !important. */
.modal-main.modal-main .modal-main-head,
.new-rack-modal.new-rack-modal .modal-main-head,
.new-rack-modal.new-rack-modal .modal-inner > h5,
.new-rack-modal.new-rack-modal .modal-body > h5,
.new-rack-modal.new-rack-modal .modal-header h5,
.new-rack-modal.new-rack-modal h2,
.new-rack-modal.new-rack-modal h3,
.new-rack-modal.new-rack-modal h4 {
font-family: var(--rm-font-display);
font-weight: 600;
color: var(--rm-navy);
letter-spacing: 0;
}
/* --- Reading face --------------------------------------------------------
* Jost is the storefront's UI face; Karla is its reading face. Declared on
* containers so buttons keep Jost via their own rules. */
.rm-builder,
.modal-main,
.new-rack-modal,
.rm-terms-modal {
--rm-font-text: 'Karla', 'Jost', system-ui, -apple-system, sans-serif;
--rm-ink: #333333;
}
.modal-main.modal-main,
.new-rack-modal.new-rack-modal .modal-content,
.rm-terms-modal.rm-terms-modal {
font-family: var(--rm-font-text);
color: var(--rm-ink);
font-size: 14px;
}
.new-rack-modal.new-rack-modal p,
.new-rack-modal.new-rack-modal label,
.new-rack-modal.new-rack-modal li,
.new-rack-modal.new-rack-modal .description_text,
.modal-main.modal-main p {
font-family: var(--rm-font-text);
color: var(--rm-ink);
}
/* --- Ground --------------------------------------------------------------
* Storefront body is #f2efe8. Off-white is kept for raised surfaces so there
* is still a visible step between the ground and the cards sitting on it. */
.modal-main.modal-main {
background: var(--rm-paper);
}
.new-rack-modal.new-rack-modal .modal-content {
background: var(--rm-off-white);
}
/* --- Branch tiles are cards, not buttons ---------------------------------
* The blanket `.new-rack-modal a.global-btn { background: gold !important }`
* above swallows these. Restored at matching weight, scoped tightly to the
* branch picker so the real button tiers are untouched. */
.new-rack-modal.new-rack-modal #branch-container .branch-item a.global-btn,
.new-rack-modal.new-rack-modal #branch-container .branch-item .global-btn {
background: var(--rm-white) !important;
border: 1px solid var(--rm-border-soft) !important;
color: var(--rm-navy) !important;
/* width and alignment restated because the gold blanket rule may also be
* setting them; the rest matches June's original card treatment verbatim. */
width: 100%;
justify-content: center;
text-transform: none;
font-family: var(--rm-font-text);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
}
.new-rack-modal.new-rack-modal #branch-container .branch-item a.global-btn:hover,
.new-rack-modal.new-rack-modal #branch-container .branch-item .global-btn:hover {
background: var(--rm-gold-pale) !important;
border-color: var(--rm-gold) !important;
color: var(--rm-navy) !important;
}
/* ===========================================================================
* DISPLAY FACE - !important, 2 Sep 2026
* style.css declares `.modal-dialog.modal-xl h1..h6 { font-family: Merriweather,
* serif !important }`. !important is not beaten by specificity, so the doubled
* class alone could not win - it took our colour and weight but not the face.
*
* Enumerating every !important declaration matching a modal heading returns
* exactly one from the legacy sheet: this font-family. So this is the whole
* debt, not an opening move. Doubled class retained so this also outranks any
* later !important written at lower specificity.
* ======================================================================== */
.modal-main.modal-main .modal-main-head,
.new-rack-modal.new-rack-modal .modal-main-head,
.new-rack-modal.new-rack-modal .modal-inner > h5,
.new-rack-modal.new-rack-modal .modal-body > h5,
.new-rack-modal.new-rack-modal .modal-header h5,
.new-rack-modal.new-rack-modal h1,
.new-rack-modal.new-rack-modal h2,
.new-rack-modal.new-rack-modal h3,
.new-rack-modal.new-rack-modal h4 {
font-family: var(--rm-font-display) !important;
font-weight: 600 !important;
}
/* ===========================================================================
* RM LOGO LOCKUP - 2 Sep 2026
* Replaces the PNG hotlinked from the retiring Neto host with the storefront's
* own lockup: inline SVG mark plus type. Nothing to request, so nothing to
* 404. Navy rather than white because this sits on paper, not the navy bar,
* and scaled up because it is a masthead rather than a nav item.
* ======================================================================== */
.rm-logo {
display: inline-flex;
align-items: center;
gap: 14px;
text-decoration: none;
margin: 0 auto 6px;
}
.rm-logo__mark { flex: 0 0 auto; display: block; }
.rm-logo__text {
display: flex;
flex-direction: column;
align-items: flex-start;
font-family: var(--rm-font-display);
font-size: 26px;
font-weight: 600;
line-height: 1.08;
letter-spacing: 0.02em;
color: var(--rm-navy);
white-space: nowrap;
}
.rm-logo__sub {
margin-top: 5px;
font-family: 'Jost', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rm-gold);
}
@media (max-width: 420px) {
.rm-logo { gap: 10px; }
.rm-logo__mark { width: 36px; height: 45px; }
.rm-logo__text { font-size: 20px; }
.rm-logo__sub { font-size: 9px; letter-spacing: 0.12em; }
}
/* ==== RM THEME PASS 2026-09-07 : START ==== */
/* --------------------------------------------------------------------------
1. ONE GREEN, NOT TWO
style.css paints selects with --Primary-Light (#157456) at (0,2,1). The size
selector is the most prominent control on the page and it was the only solid
green thing in a navy-and-gold interface. Restyled as a quiet control: paper
ground, navy text, gold chevron, gold focus ring.
-------------------------------------------------------------------------- */
.modal-main select.form-select,
.new-rack-modal select.form-select,
.selct-ribbon-button select.form-select,
.procut-optionals select.form-select {
background-color: var(--rm-white);
color: var(--rm-navy);
border: 1px solid var(--rm-border-mid);
border-radius: var(--rm-radius);
font-family: var(--rm-font-body);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.01em;
padding: 11px 40px 11px 14px;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b8963e' stroke-width='2' d='M2 5.5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px 12px;
transition: border-color var(--rm-trans), box-shadow var(--rm-trans);
}
.modal-main select.form-select:hover,
.new-rack-modal select.form-select:hover,
.selct-ribbon-button select.form-select:hover {
border-color: var(--rm-gold);
}
.modal-main select.form-select:focus,
.new-rack-modal select.form-select:focus,
.selct-ribbon-button select.form-select:focus {
border-color: var(--rm-gold);
box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.18);
outline: none;
}
/* The placeholder option should read as a prompt, not as a value. */
.modal-main select.form-select option[value=""],
.new-rack-modal select.form-select option[value=""] {
color: var(--rm-muted);
}
/* --------------------------------------------------------------------------
2. BUTTON RADIUS
Beats style.css .modal-main button.btn.btn-primary (0,3,1) - the rule that
has been squaring every primary button off despite --rm-radius saying 4px.
-------------------------------------------------------------------------- */
.modal-main button.btn.btn-primary.rm-btn,
.modal-main a.btn.btn-primary.rm-btn,
.new-rack-modal button.btn.btn-primary.rm-btn,
.modal-main button.btn.btn-primary.global-btn,
.new-rack-modal button.btn.btn-primary.global-btn {
border-radius: var(--rm-radius);
}
/* --------------------------------------------------------------------------
3. INK
style.css sets body colour to #1a1630, a purple-black. Modals are portaled
to body level and inherit it, so it was most of the text on the page.
Scoped to the builder rather than reset globally - the admin theme shares
this stylesheet's host page and should keep its own.
-------------------------------------------------------------------------- */
.rm-builder,
.modal-main,
.new-rack-modal,
.modal-main .modal-content,
.new-rack-modal .modal-content {
color: var(--rm-ink);
}
/* --------------------------------------------------------------------------
4. ONE CREAM, ONE SET OF BORDERS
#fffcf2 on modal bodies against #f7f5f0 on modal content is a 1% difference
- too close to read as intentional, far enough to look like a bug. And four
different greys were doing the job of --rm-border-soft.
-------------------------------------------------------------------------- */
.modal-main .modal-body,
.new-rack-modal .modal-body {
background: var(--rm-off-white);
}
.modal-main .table,
.new-rack-modal .table,
.modal-main .table > :not(caption) > * > *,
.new-rack-modal .table > :not(caption) > * > * {
border-color: var(--rm-border-soft);
}
.modal-main .rebon-item-single,
.new-rack-modal .rebon-item-single,
.modal-main .checkout-subtotal-box,
.new-rack-modal .checkout-subtotal-box {
border-color: var(--rm-border-soft);
}
/* --------------------------------------------------------------------------
5. TABLE HEADERS
#384b6e is an off-navy. There is a navy.
-------------------------------------------------------------------------- */
.modal-main .table th,
.new-rack-modal .table th,
.modal-main th.sizeSelected,
.modal-main th.totalPrice {
color: var(--rm-navy);
font-family: var(--rm-font-body);
font-weight: 600;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------------------
6. THE PREVIEW FRAME
The panel was on .selectedRibbon-container. .description_text is its SIBLING,
so the personalised wording rendered below the frame, visually detached from
the artwork it is part of - the customer approved a layout that did not match
what they received.
Panel moves to the outer wrappers so it encloses artwork AND wording.
Safe for rendering: html2canvas captures with backgroundColor:null and is now
cropped to the artwork box, so this ground never reaches the file.
-------------------------------------------------------------------------- */
.modal-main .screenshot-div,
.new-rack-modal .screenshot-div,
.modal-main .screenshot-div-select-size,
.new-rack-modal .screenshot-div-select-size {
display: inline-block;
background: var(--rm-paper);
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius-md);
padding: 18px 22px;
max-width: 100%;
}
.modal-main .screenshot-div .selectedRibbon-container,
.new-rack-modal .screenshot-div .selectedRibbon-container,
.modal-main .screenshot-div-select-size .selectedRibbon-container,
.new-rack-modal .screenshot-div-select-size .selectedRibbon-container {
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
}
.modal-main .screenshot-div .description_text,
.new-rack-modal .screenshot-div .description_text,
.modal-main .screenshot-div-select-size .description_text,
.new-rack-modal .screenshot-div-select-size .description_text {
margin: 10px 0 0;
font-family: var(--rm-font-text);
color: var(--rm-ink);
text-align: center;
}
/* Empty wording should not reserve space and make the frame look broken. */
.modal-main .description_text:empty,
.new-rack-modal .description_text:empty {
display: none;
}
/* --------------------------------------------------------------------------
7. SECOND PASS - the stragglers a live audit found after the first
Measured on the running page, not guessed:
#1a1630 x45 body colour. The first pass scoped ink to .rm-builder and
the modals; everything else still inherited the purple-black
from style.css body{}. builder-rm.css is loaded ONLY by the
builder page, so setting body here cannot reach the admin
theme.
#157456 x9 the rogue green again, on a device tile border and the
checkout cost figure - the first pass only caught selects.
#dddddd #e3e4e9 #dedede three more border greys.
#e7e7e7 #212529 a stock Bootstrap secondary button.
#6c75a3 select text in a blue-grey.
-------------------------------------------------------------------------- */
body {
color: var(--rm-ink);
}
.modal-main .award-select-device-itm,
.new-rack-modal .award-select-device-itm {
border-color: var(--rm-border-mid);
}
.modal-main .award-select-device-itm.active,
.new-rack-modal .award-select-device-itm.active,
.modal-main .award-select-device-itm:hover,
.new-rack-modal .award-select-device-itm:hover {
border-color: var(--rm-gold);
}
/* The price is the number people look for. Navy carries more weight than a
green that belonged to the old palette. */
.modal-main .checkout_cost,
.new-rack-modal .checkout_cost,
.modal-main span.checkout_cost {
color: var(--rm-navy);
font-weight: 600;
}
.modal-main th,
.new-rack-modal th,
.modal-main .table th,
.modal-main input.form-control,
.new-rack-modal input.form-control,
.modal-main select,
.new-rack-modal select {
border-color: var(--rm-border-soft);
}
.modal-main select,
.new-rack-modal select {
color: var(--rm-ink);
}
/* Bootstrap's default grey secondary. Cancel should read as the quiet option,
not as a different design system. */
.modal-main button.btn:not(.btn-primary):not(.rm-btn--primary),
.new-rack-modal button.btn:not(.btn-primary):not(.rm-btn--primary) {
background: transparent;
color: var(--rm-ink);
border: 1px solid var(--rm-border-mid);
border-radius: var(--rm-radius);
}
.modal-main button.btn:not(.btn-primary):not(.rm-btn--primary):hover,
.new-rack-modal button.btn:not(.btn-primary):not(.rm-btn--primary):hover {
border-color: var(--rm-gold);
color: var(--rm-navy);
background: transparent;
}
/* --------------------------------------------------------------------------
8. THE PREVIEW WATERMARK
Measured live: the watermark is 64.4 x 34px, anchored bottom:5px right:5px
with left:0 - so in a 23px-tall ribbon it computes to top:-15.875px and
overflows upward, and being inset on one side only it sits 2.5px left of
centre. It is pinned to a corner, not centred, which is why it reads as
pushing the bar off-centre even though the bar itself measures dead centre.
Fixed by insetting it to 0 on all four sides so it fills the ribbon exactly,
and centring the text with flex. The -45deg rotation is kept - it now turns
about the true centre rather than an offset origin.
Preview only: stripForRender() hides .watermark-text before the capture, so
none of this can reach a customer's file.
-------------------------------------------------------------------------- */
.modal-main .image-container,
.new-rack-modal .image-container {
position: relative;
}
.modal-main .image-container .watermark-text,
.new-rack-modal .image-container .watermark-text,
.modal-main .watermark-text,
.new-rack-modal .watermark-text {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transform-origin: center center;
pointer-events: none;
overflow: hidden;
}
/* --------------------------------------------------------------------------
9. BRANCH TILE LABELS
Measured live: .branch-item a.global-btn is display:inline-flex with
justify-content:flex-start. text-align:center IS already set and does
nothing, because the text becomes an anonymous flex item and flex layout
ignores text-align for placement. That is why single-line labels sat left
while the one that wraps onto two lines LOOKED centred.
Centre the flex axis, and keep text-align for the wrapped lines themselves.
-------------------------------------------------------------------------- */
.modal-main .branch-item a.global-btn,
.new-rack-modal .branch-item a.global-btn,
.branch-item a.global-btn {
justify-content: center;
text-align: center;
width: 100%;
}
/* --------------------------------------------------------------------------
10. THE LANDING PAGE
Customers arrive here from the Services page on rogaloffmilitaria.com.au, so
the join has to read as a page change rather than a different website. The
old block was a stack of spacer containers with the intro split over
three paragraphs - including a "please allow up to 15 seconds" warning above
the fold, which apologised before anyone had clicked anything.
Now: a slim navy bar carrying the lockup and a way back to the store, then
one hero with a single obvious action, with the loading note demoted to
below the button where it is actually relevant.
-------------------------------------------------------------------------- */
.rm-builder .rm-top {
background: var(--rm-navy);
margin: -1.5rem 0 0;
padding: 0 clamp(16px, 4vw, 40px);
}
.rm-builder .rm-top__inner {
max-width: 1180px;
margin: 0 auto;
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.rm-builder .rm-top__brand,
.rm-builder .rm-top__back {
text-decoration: none;
}
/* The lockup is reused verbatim from the old block, so the mark is identical
to the storefront's. On navy it needs its text inverted. */
.rm-builder .rm-top__brand .rm-logo__text {
color: var(--rm-white);
}
.rm-builder .rm-top__brand .rm-logo__sub {
color: var(--rm-gold);
}
.rm-builder .rm-top__back {
color: var(--rm-gold);
font-family: var(--rm-font-body);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transition: color var(--rm-trans);
}
.rm-builder .rm-top__back:hover {
color: var(--rm-gold-light);
text-decoration: underline;
}
.rm-builder .rm-hero {
text-align: center;
padding: clamp(38px, 7vw, 72px) 16px clamp(26px, 4vw, 40px);
}
.rm-builder .rm-hero__eyebrow {
font-family: var(--rm-font-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rm-gold);
margin: 0 0 12px;
}
.rm-builder .rm-hero__title {
font-family: var(--rm-font-display);
font-weight: 600;
font-size: clamp(32px, 5.5vw, 52px);
line-height: 1.1;
color: var(--rm-navy);
margin: 0 0 16px;
}
.rm-builder .rm-hero__lede {
font-family: var(--rm-font-text);
font-size: clamp(15px, 1.6vw, 17px);
line-height: 1.65;
color: var(--rm-ink);
max-width: 620px;
margin: 0 auto 30px;
}
.rm-builder .rm-hero__btn {
font-size: 15px;
letter-spacing: 0.1em;
padding: 15px 40px;
}
/* Demoted from a bold warning above the fold to a quiet note under the action
it actually describes. */
.rm-builder .rm-hero__note {
font-family: var(--rm-font-text);
font-size: 13px;
line-height: 1.6;
color: var(--rm-muted);
max-width: 520px;
margin: 22px auto 0;
}
.rm-builder .rm-strap {
border-top: 1px solid var(--rm-border-soft);
margin-top: clamp(28px, 5vw, 52px);
padding: 26px 16px;
text-align: center;
font-family: var(--rm-font-display);
font-size: clamp(17px, 2.2vw, 21px);
color: var(--rm-navy-mid);
}
@media (max-width: 560px) {
.rm-builder .rm-top__inner { justify-content: center; text-align: center; }
.rm-builder .rm-top__back { font-size: 12px; }
}
/* ---- polish pass 3, 8 Sep 2026 ---- */
/* 1. The frame's ground. section.modal-main is paper; body was white, so any
frame taller than the content showed a white slab under it. */
/* Literal, not var(--rm-paper): the tokens are scoped to the builder roots,
so on body that variable is undefined and the whole declaration would
compute to transparent - which is how the white slab survived the first
attempt. #f2efe8 is the value --rm-paper holds. */
body { background: #f2efe8; }
/* 3. Centre the ribbon rows in the thumbnail.
.selectedRibbon-container is a COLUMN flex container, so horizontal
centring is align-items, not justify-content. Measured drift before this:
22.67px left vs 27.33px right. */
.selectedRibbon-container {
align-items: center;
}
/* ==== RM THEME PASS 2026-09-07 : END ==== */
/* ==== RM UI UPLIFT PASS 2026-09-08 : START ====
* Typography sweep + the search row. Measured against the live markup in
* custom-page-bc.blade.php and the nodes builder-core.js injects, not inferred.
*
* Capture-path note: every selector below sits OUTSIDE the html2canvas capture
* root (.screenshot-div / .screenshot-div-select-size). The two that could fall
* inside it - .err-msg and .description_text - are already set to display:none
* by stripForRender() in builder-purchase.js before the canvas is taken. So no
* declaration here can reach a print master.
* ============================================================================ */
/* --------------------------------------------------------------------------
11. h5 AND h6 WERE NEVER IN THE DISPLAY-FACE FIX
The 2 Sep !important block enumerated .modal-main-head, `.modal-inner > h5`,
`.modal-body > h5`, `.modal-header h5` and h1-h4. Every OTHER h5, and h6 in
full, still matched style.css:25405
.modal-dialog.modal-xl h1..h6 { font-family:"Merriweather",serif !important }
and rendered in Merriweather. The headings that actually fall through:
h5.ribbonName x4 branch name, right-hand bar of four modals
h5.ribbon_name x1 chosen award, device screen
h5.ribbon_title xN EVERY award tile label the picker renders
h6 x1 "Select Devices"
The tile labels are the most-repeated text in the builder - nine per page
across 1088 awards - so this was the single most visible type gap.
(0,3,0) with !important beats the legacy (0,2,1) with !important. The bare
descendant selector replaces the enumeration, so a heading added later is
covered by default rather than falling back silently.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal h5,
.new-rack-modal.new-rack-modal h6 {
font-family: var(--rm-font-display) !important;
color: var(--rm-navy);
font-weight: 600 !important;
}
/* --------------------------------------------------------------------------
12. TILE LABELS ARE BODY COPY, NOT HEADINGS
.ribbon_title is an h5 only because the original developer reached for one;
it is a caption under a thumbnail. It must be exempt from rule 11 above.
(0,4,0) beats the (0,3,0) blanket, and the !important is required only to
clear the legacy Merriweather - the June rule had the right intent and lost
purely on weight.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal .award-item .ribbon_title,
.new-rack-modal.new-rack-modal .award-item h5.ribbon_title {
font-family: var(--rm-font-text) !important;
font-weight: 500 !important;
font-size: 12.5px;
line-height: 1.35;
color: var(--rm-ink);
letter-spacing: 0.01em;
}
/* --------------------------------------------------------------------------
13. SIZES FOR THE HEADINGS RULE 11 JUST RECLAIMED
Bootstrap's h5 is 1.25rem and h6 1rem; neither was chosen for these slots.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal .select-awars-righttbar h5.ribbonName {
font-size: 19px;
line-height: 1.25;
margin: 0 0 14px;
letter-spacing: 0.01em;
}
.new-rack-modal.new-rack-modal .award-select-device-itm h5.ribbon_name {
font-size: 16px;
line-height: 1.3;
}
.new-rack-modal.new-rack-modal .selected-device-award-item h6 {
font-size: 12px;
font-family: var(--rm-font-body) !important;
font-weight: 500 !important;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--rm-muted);
margin: 0 0 10px;
}
/* The download warning in #imagePreviewModal is a bare
already written in
caps, so it inherited Bootstrap's 2.5rem inside a half-width column and
shouted. It is a caution, not a masthead. */
.new-rack-modal.new-rack-modal #imagePreviewModal h1,
.new-rack-modal.new-rack-modal .select-awars-leftbar h1 {
font-size: 15px !important;
line-height: 1.4;
letter-spacing: 0.08em;
color: var(--rm-navy);
margin: 22px 0 8px;
}
/* --------------------------------------------------------------------------
14. THE RACK COUNTER WAS PAINTED AS AN ERROR
The June sheet styled .rack-count / .added-count / .award-count. None of
those three classes exists anywhere in the blade or in builder-core.js - the
real node is `p.err-msg.totalawrdcount`, written by builder-core.js:124. So
the rule never matched, and the counter kept style.css:25876
.err-msg { color: var(--error) }
which renders "3 award(s) added to rack" in the error red. A running total
is a status line, not a fault.
.err-msg is hidden by stripForRender() before capture, so this is preview-
only by construction.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal p.err-msg.totalawrdcount,
.new-rack-modal.new-rack-modal .totalawrdcount {
color: var(--rm-teal);
font-family: var(--rm-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
margin: 0 0 14px;
}
/* --------------------------------------------------------------------------
15. THE SEARCH ROW
Same class-name miss as rule 14: the June sheet styled .search-bar,
.modal-search and .search-icon. The markup is
.awars-top-searchbar > .searchbar > input#keywrd + button.btn
so none of it applied and the field kept the legacy treatment. Worse, the
later generic rule
.new-rack-modal button.btn:not(.btn-primary):not(.rm-btn--primary) (0,4,1)
caught the submit button and made it transparent with a grey border - an
empty outlined box carrying only a FontAwesome glyph from
style.css:25827 `.searchbar button.btn::after`.
Search is the first thing a customer reaches for on a list of 1088 awards,
so it should read as the primary control on the row. (0,5,1) clears both the
legacy rule and the generic button rule without !important.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal .awars-top-searchbar {
gap: 16px;
margin-bottom: 4px;
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar input.form-control {
font-family: var(--rm-font-text);
font-size: 14px;
height: 44px;
padding: 10px 52px 10px 14px;
border: 1px solid var(--rm-border-mid);
border-radius: var(--rm-radius);
background: var(--rm-white);
color: var(--rm-ink);
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar input.form-control:focus {
border-color: var(--rm-gold);
box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.18);
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar input.form-control::placeholder {
color: var(--rm-muted-light);
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar button.btn {
width: 44px;
height: 100%; /* legacy sets height:100% against the field; measured
46px, so a fixed 44 left a 2px step down the side */
padding: 0;
background: var(--rm-navy);
border: 1px solid var(--rm-navy);
border-radius: 0 var(--rm-radius) var(--rm-radius) 0;
color: var(--rm-white);
transition: background var(--rm-trans), border-color var(--rm-trans);
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar button.btn:hover {
background: var(--rm-navy-light);
border-color: var(--rm-navy-light);
}
/* The glyph. style.css:25827 draws it as `font: ... FontAwesome` and \f002 -
that is FontAwesome 4's family name, but the blade loads FA 6.5.1, which
registers "Font Awesome 6 Free" instead. The family never resolves, so the
button has been rendering with no icon and no label at all: a blank control.
Retire the pseudo-element and carry the magnifier as an inline SVG, matching
how the select's chevron is already drawn. No font dependency, nothing to
404, and it survives the next FontAwesome version too. */
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar button.btn::after {
content: none;
}
.new-rack-modal.new-rack-modal .awars-top-searchbar .searchbar button.btn {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 17px 17px;
}
/* --------------------------------------------------------------------------
16. TWO CHEVRONS ON THE CATEGORY SELECT
The 7 Sep pass gave every .form-select a gold SVG chevron. style.css:25816
also draws one as `.select-award::before` in var(--white) - which was legible
while the control was solid green and became a white mark on a white field
the moment the same pass repainted the ground. Two carets, one invisible.
Keep the gold SVG, retire the legacy pseudo-element.
-------------------------------------------------------------------------- */
.new-rack-modal.new-rack-modal .select-award::before {
display: none;
}
.new-rack-modal.new-rack-modal .select-award select.form-select {
height: 44px;
font-family: var(--rm-font-body);
}
/* --------------------------------------------------------------------------
17. THE RESULT LINE AND THE EMPTY STATE
#pagination-info and #no-results were never styled by either sheet, so they
sat at inherited body size with no relationship to the grid above them.
-------------------------------------------------------------------------- */
/* style.css sets `.modal-pagination { display:flex !important; justify-content:
space-between }`, which put the count hard left and the pager hard right with
a void between them. Stack instead: the count reads as a caption for the grid
above, the pager centres under it. display:flex is !important so it stays;
direction and alignment are (0,3,0) over (0,1,0) and need no escalation. */
.new-rack-modal.new-rack-modal .modal-pagination {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.new-rack-modal.new-rack-modal #pagination-info {
font-family: var(--rm-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--rm-muted);
text-align: center;
margin: 0;
}
.new-rack-modal.new-rack-modal #no-results {
font-family: var(--rm-font-text);
font-size: 14px;
color: var(--rm-muted);
text-align: center;
padding: 40px 16px;
border: 1px dashed var(--rm-border-mid);
border-radius: var(--rm-radius-md);
margin-top: 8px;
}
/* --------------------------------------------------------------------------
18. PAGINATION LINKS
.modal-pagination a was styled in June, but builder-core.js writes
`a.page-link` inside `ul.pagination`, so that rule never matched either. What
the pager actually renders under is style.css:25988
ul.pagination li.page-item a { background-color:#fffcf2 !important;
color:#000 !important }
- cream on cream, with the current page indistinguishable from the rest. A
first pass at (0,5,0) without !important still lost, because specificity does
not beat !important; measured, not assumed. Matched here on both counts:
(0,5,0) with !important over (0,2,3) with !important. The two declarations
that collide are the only ones carrying it. */
.new-rack-modal.new-rack-modal .modal-pagination ul.pagination {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.new-rack-modal.new-rack-modal .modal-pagination .page-item .page-link {
min-width: 34px;
height: 34px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--rm-font-body);
font-size: 12px;
border: 1px solid var(--rm-border-soft);
border-radius: var(--rm-radius);
background-color: var(--rm-white) !important;
color: var(--rm-navy) !important;
text-decoration: none;
}
.new-rack-modal.new-rack-modal .modal-pagination .page-item .page-link:hover {
border-color: var(--rm-gold);
background-color: var(--rm-gold-pale) !important;
}
.new-rack-modal.new-rack-modal .modal-pagination .page-item.active .page-link {
background-color: var(--rm-navy) !important;
border-color: var(--rm-navy);
color: var(--rm-white) !important;
}
.new-rack-modal.new-rack-modal .modal-pagination .page-item.disabled .page-link {
opacity: 0.4;
pointer-events: none;
}
/* ==== RM UI UPLIFT PASS 2026-09-08 : END ==== */
/* ==== RM CATEGORY FILTER 2026-09-08 : START ====
* Styling for the two nodes RogaloffFilter builds at the foot of
* builder-core.js: the category tab strip and the mixed-rack notice. Both sit
* in .select-awars-leftbar / beside .totalawrdcount and .checkout-subtotal-box,
* all outside the html2canvas roots, so neither can reach a print master.
* ============================================================================ */
/* --------------------------------------------------------------------------
19. THE CATEGORY TABS
The reference puts the categories on the surface as a row of tabs rather than
folded into a dropdown. The