/** * NOTICE OF LICENSE * * This file is proprietary software and is not open source. * Your subscription grants you a limited, non-transferable right to use this code * solely as part of the Retail Media Manager platform, and only for the duration * of your valid subscription. * * You are not permitted to copy, redistribute, resell, lease, license, sub-license, * or otherwise make this code or its resources available to any third party. * * DISCLAIMER * * Do not edit or add to this file. If you require customizations, please * contact Corebuilt Labs for professional services. * * @author Corebuilt Labs * @copyright 2026 Corebuilt Labs * @license Limited to use within an active subscription to Retail Media Manager */ /* ── Brand tokens, not a literal palette (v3 §1 / governing rule 4) ────────── This card was written with a hardcoded GREEN palette (#0a5c2b / #0e7c3a / #e6f0ea) that consulted no token. It went unnoticed because the EF /login page was not applying this stylesheet at all — the card inherited Element Flow's look, which happened to be on-brand. The moment the stylesheet was delivered properly the literal green appeared, mid-page, on an otherwise navy shop. The chain resolves on every surface: --primary rmmapp emits it — on authenticated pages since RDEV-263, and since 0.17.2 on the logged-out RMM pages too whenever the App shell is enabled (the retailer's configured colour) --brand-primary rmmtheme's alias of the same token #1f4788 the RMM default, last resort only Element Flow's --e-global-color-primary is deliberately NOT in the chain any more (0.17.2): the card is App surface wherever it sits, and the retailer's website palette is not the App's. Green survives in exactly one place, and deliberately: --msg--ok, where green is semantic ("signed in") rather than decorative. */ /* RMM IAM — agent email-OTP sign-in page. Minimal, theme-neutral card styling. */ .rmmiam-signin { display: flex; justify-content: center; padding: 48px 16px; /* 0.17.2 — the card's type is the App's (the theme's Inter), not the page's. */ font-family: var(--bs-body-font-family, Inter, system-ui, sans-serif); color: #1f2933; } /* 0.17.2 — the card is App surface wherever it sits, the retailer's Element Flow login page included. The kit file writes UNSCOPED h1–h4 / p / a rules (the retailer's fonts, colours, uppercase headings); they stop at this box. :where() keeps the specificity at the class alone, so every __element rule below still wins by source order. */ .rmmiam-signin :where(h1, h2, h3, h4, p, label, a, button, input, span, small) { font-family: inherit; color: inherit; text-transform: none; letter-spacing: normal; } /* 0.29.0 (RDEV-299 row 3.2, log D117, D119 to D122; rmm-advertiser-design.md 1.9 §10, §8.4, §8.11; the prototype's login.dc.html): a 480 px card (radius 16, 1 px border-subtle, the card shadow, 32 px padding); the title `section-title` 20/28 in --text-strong; fields 40 px with the --border-field border, radius 8, a 16 px value, and on focus the border turns Primary with no outline; one 40 px full-width primary button; 16 px between the groups. Fixed hexes are design.md's §4.3 values as fallbacks: the card sits under the Media Kit's Element Flow chrome, where the App's tokens may be absent. */ .rmmiam-signin__card { width: 100%; max-width: 480px; background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: var(--radius-lg, 16px); padding: 32px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-sizing: border-box; } .rmmiam-signin__title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-strong, #2c3e50); } .rmmiam-signin__lede { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-body, #4b5563); } /* D119: the second line of the prototype's head, for users of an existing account */ .rmmiam-signin__note { margin: 8px 0 16px; font-size: 13px; line-height: 18px; color: var(--text-muted, #6b7280); } .rmmiam-signin__step { margin: 0 0 16px; } .rmmiam-signin__label { display: block; margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-heading, #374151); } /* row 3.2 review Fix 5 (§8.4, login.dc.html's required Input): the required marker */ .rmmiam-signin__label--required::after { content: ' *'; color: var(--status-danger, #dc3545); } .rmmiam-signin__input { width: 100%; height: 40px; padding: 0 12px; font-size: 16px; line-height: 24px; color: var(--text-strong, #2c3e50); border: 1px solid var(--border-field, #6b7280); border-radius: var(--radius-md, 8px); background: var(--surface-card, #fff); box-sizing: border-box; } .rmmiam-signin__input::placeholder { color: var(--text-placeholder, #9ca3af); opacity: 1; } .rmmiam-signin__input:focus { outline: none; box-shadow: none; border-color: var(--primary, var(--brand-primary, #1f4788)); } .rmmiam-signin__submit { width: 100%; height: 40px; margin-top: 0; padding: 0 18px; font-size: 14px; line-height: 1; font-weight: 600; color: var(--on-primary, #fff); background: var(--primary, var(--brand-primary, #1f4788)); border: 0; border-radius: var(--radius-md, 8px); cursor: pointer; } /* row 3.2 review Fix 7 (§8.3): hover --primary-hover alone, pressed --primary-active, disabled 45% with not-allowed */ .rmmiam-signin__submit:hover:not(:disabled) { background: var(--primary-hover, var(--primary, var(--brand-primary, #1f4788))); } .rmmiam-signin__submit:active:not(:disabled) { background: var(--primary-active, var(--primary-hover, var(--primary, var(--brand-primary, #1f4788)))); } .rmmiam-signin__submit:disabled { opacity: 0.45; cursor: not-allowed; } .rmmiam-signin__picker { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; } .rmmiam-signin__pick { width: 100%; padding: 11px 14px; text-align: left; font-size: 0.98rem; color: #16241c; background: #f0f4f1; border: 1px solid #d2e3d8; border-radius: 6px; cursor: pointer; } .rmmiam-signin__pick:hover { background: color-mix(in srgb, var(--primary, var(--brand-primary, #1f4788)) 8%, transparent); } /* The status line's DEFAULT is neutral, not green. It used to be #0a5c2b, which painted every message green — including "Sending code…", "Verifying…", and above all "If
is registered, a code is on its way." That last one is deliberately non-committal: it must not confirm that the address exists. Green asserted a positive outcome the sentence is careful not to claim. Same defect class as the green "Quotation rejected" (v3 §4.8). Green is now reserved for the one genuinely confirmed success, --ok. */ .rmmiam-signin__msg { margin: 0 0 16px; font-size: 13px; line-height: 18px; color: var(--text-muted, #6b7280); } .rmmiam-signin__msg:empty { margin: 0; } /* row 3.2 review Fix 2 and 8: the prototype's error state, a §8.8 danger alert under the card's head with its leading status icon (Lucide circle-alert, 16 px, in the alert's text color). __msg--err is the same alert where a card has no __alert box (a page baked before 0.29.0). */ .rmmiam-signin__alert, .rmmiam-signin__msg--err { position: relative; margin: 0 0 16px; padding: 12px 16px 12px 40px; border: 1px solid var(--status-danger, #dc3545); border-radius: var(--radius-md, 8px); background: var(--status-danger-subtle, #f8d7da); color: var(--status-danger-strong, #b02a37); font-size: 13px; line-height: 18px; } .rmmiam-signin__alert:empty { display: none; } .rmmiam-signin__alert::before, .rmmiam-signin__msg--err::before { content: ''; position: absolute; left: 16px; top: 13px; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } .rmmiam-signin__msg--ok { color: #0a5c2b; } .rmmiam-signin__fallback { margin: 18px 0 0; font-size: 0.85rem; text-align: center; } .rmmiam-signin__fallback a { color: #52606d; } /* ── Expired/wrong-code recovery (v3 §4.1 [High]) ──────────────────────────── The error used to tell the user to "request a new code" with nothing to click. The recourse is now a link appended to that same error line, and it appears only when a verify has failed. `color: inherit` is the whole point: the link sits INSIDE .rmmiam-signin__msg, so it takes that line's colour — error red on failure — and is distinguished only by the underline. A primary-blue link there would read as a separate control and fight the message it belongs to. */ /* Specificity note: Element Flow ships `.elementor a { text-decoration: none }` (custom-frontend.min-s1.css) at (0,1,1), which beat a bare `.rmmiam-signin__resend-link` at (0,1,0) — the link rendered with no underline on the EF /login page while looking correct on the standalone one. Qualifying with the parent and the element type lifts this to (0,2,1) and wins on merit, so no !important is needed. */ /* 0.29.0 (RDEV-299 plan D61, log D504; login.dc.html, §8.2): "Send a new code" sits in the neutral code-sent line from the start, a