/* ============================================================================= RUO Pass / Rally Pass — the customer auth surface ============================================================================= Operator, 2026-09-15: "Make login and sign up sexy." Operator, 2026-09-16: "make ruopass a sexy login site sexy ui" — "light colors" — "and rally pass sexy with peprally colors" — "rallypass should be a customized version of ruopass with way more features but works hand in hand with ruopass and login can still work every where." ── TWO presentations on one root ─────────────────────────────────────────── RUO Pass is the identity layer every brand shares. Rally Pass is PepRally's tier on top of it. They are the same account and the same session, so they are one sheet — and they are NOT one look: .ruo-auth--rally every surface derived from the brand's own --checkout-* family. PepRally arrives Carbon + Ember. .ruo-auth--light RUO Pass's own neutrals, with the BRAND's accent kept. One identity across every non-rally brand. `auth_surface_class(store_code)` decides which, off `RallyPass.store?` — the same LIST the pass name, the vote and the points panel key on, so a brand that starts running rallies changes palette at the same site it changes everything else. ── Why RUO Pass stopped deriving its surfaces ────────────────────────────── Measured on the shipped sheets, 2026-09-16: bacwater --checkout-bg #ffffff · card #fff · input #ffffff mypeptides --checkout-bg #ffffff · card #fff · input #ffffff surfpeptides --checkout-bg #ffffff · card #fff · input #ffffff glam --checkout-bg #FBF7F2 · card #fff · input #ffffff Four of five brands painted the form card at EXACTLY the page colour, or the field at exactly the card colour, or both — 1.00:1 surface separation. Every contrast pair passed, because contrast is measured foreground against background and two identical backgrounds are never a pair. Nothing was unreadable and the page read as unfinished, on the one surface whose whole job is to look like somewhere it is safe to type a password. A derived surface cannot fix that: the brands declared those values on purpose for a checkout that sits inside its own chrome. So the RUO Pass presentation brings its own neutral stack — warm porcelain page, a white card that genuinely lifts off it, a tinted field — and keeps the brand's accent, which is what still makes a Glam door rose and a SurfPeptides door teal. `auth_contrast_guard_test` measures the separation, per brand, per presentation, with a floor taken from PepRally's own carbon stack rather than invented. ── Why the --checkout-* family ───────────────────────────────────────────── It is the ONE token family all five brands define, in each brand's own sheet, and it already means exactly this: the palette of a form surface. `shared/sr_checkout.css` reads the same tokens for the same reason. The --color-* family is NOT usable here: Glam's palette lives in its uray02 theme and defines none of those names, so a page built on them would render Glam from undefined variables — the mechanism that shipped black card text on a near-black field to the one brand that had never sold. Every var() here carries a FALLBACK. An undefined var() does not error, does not log, and evaluates to nothing — a background collapses, a colour disappears, the element still renders, every structural guard stays green and the customer sees an invisible control. ── EVERY selector names the block root, and that is not tidiness ────────── Each brand sheet styles bare elements inside its own scope: .peprally p { color: var(--color-text); font-size: 16px; } (0,1,1) .peprally h1, .peprally h2 { color: var(--color-text); } (0,1,1) .peprally a { color: var(--color-accent); } (0,1,1) A single-class rule is (0,1,0) and LOSES to all three. The declaration is present, correct, and discarded — which no source grep can see, because grepping proves a rule EXISTS, not that it WINS. This was measured in Chrome on the rendered page AFTER the static guard was already green: `.ruo-auth__promise` came back at 16px against its declared 1.9rem, and `.ruo-auth__benefit-detail` came back pure white against its declared mix. Same mechanism as the invisible checkout CTA on bacwater.bio, arriving on

and

instead of on — and taking the typography with it, not only the colour. So: `.ruo-auth .ruo-auth__promise`, never `.ruo-auth__promise`; and on an anchor `.ruo-auth a.ruo-auth__link`, because `a` is what beats `.brand a`. auth_contrast_guard_test enforces both, and was proved non-vacuous by removing each qualifier in turn and watching it go red. ── No accent-coloured text, anywhere ─────────────────────────────────────── The accent is a FILL and a RULE, never a letterform. Measured: Glam's #B76E79 on white is 3.80:1 and PepRally's darkened CTA #C1470C on Carbon is 3.36:1 — both below AA, in opposite directions, because a light brand needs a darker accent for text and a dark brand needs a lighter one. A single derived token cannot be both. Hierarchy here is size, weight and letter-spacing; links are body text with an accent underline, which is decoration and carries no contrast duty. Mobile first, deliberately: most traffic is paid mobile, and every breakpoint below is min-width. The two-column split is the enhancement, not the base. ============================================================================= */ .ruo-auth { /* ── Derived palette ──────────────────────────────────────────────────── */ --auth-bg: var(--checkout-bg, #111116); --auth-panel: var(--checkout-card-bg, #1A1A22); --auth-raise: var(--checkout-summary-bg, #1E1E28); --auth-text: var(--checkout-text, #F5F5F0); --auth-border: var(--checkout-border, #2A2A33); --auth-input: var(--checkout-input-bg, #22222E); --auth-accent: var(--checkout-accent, #E8550F); /* The CTA fill. --cta-accent exists because the raw brand accent is not always legible under white: PepRally's #E8550F carries white at 3.66:1 and Glam's #B76E79 at 3.80:1, both below AA. A brand that needs a darker CTA declares one; a brand whose accent already passes falls through to it unchanged. Never invert this order. */ --auth-cta: var(--cta-accent, var(--checkout-accent, #C1470C)); --auth-cta-hover: var(--checkout-accent-hover, var(--auth-cta)); --auth-on-cta: #FFFFFF; /* Supporting copy. Derived by mixing the brand's own text colour toward its own panel, so it softens in whichever direction that brand runs — measured 6.49:1 (Glam, the tightest) through 9.83:1 (PepRally), all comfortably over AA. The plain declaration comes FIRST on purpose. A browser without color-mix ignores the second and keeps full-contrast text: the fallback fails toward MORE contrast, never less. */ --auth-muted: var(--auth-text); --auth-muted: color-mix(in srgb, var(--auth-text) 74%, var(--auth-panel)); /* An error surface that stays close to the panel, so the message keeps the panel's text contrast and the red is carried by a rule down the side — decoration, not letterforms. Works on a cream brand and a carbon one without knowing which it is. */ --auth-alert-tint: var(--auth-raise); --auth-alert-tint: color-mix(in srgb, #D92D20 12%, var(--auth-panel)); --auth-alert-rule: #D92D20; --auth-font-display: var(--checkout-font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --auth-font-body: var(--checkout-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); /* Elevation is a token because it is the one property that must differ between a light page and a dark one for the SAME reason: a soft black shadow is how a card lifts off porcelain and is invisible on carbon. A single shadow that suited both would suit neither. */ --auth-lift: 0 18px 48px rgba(0, 0, 0, 0.16); box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); /* The phone layout is DECLARED, not inherited from the absence of the desktop one. Every child names a grid area, and a `grid-area` name with no matching template is a reference to nothing — CSS does not complain, it auto-places every child into row 1, and the headline, the form panel and the benefit list render on top of one another. Caught in a 390px screenshot and by nothing else in this repo. The order is deliberate: brand, then the form, then the reasons. Somebody who arrived to sign in should not have to scroll past a pitch to reach the field they came for. */ grid-template-areas: "head" "form" "pitch" "legal"; align-content: start; padding: 1.5rem 1.15rem 3rem; background: var(--auth-bg); color: var(--auth-text); font-family: var(--auth-font-body); -webkit-font-smoothing: antialiased; } /* ── The RUO Pass door ───────────────────────────────────────────────────── Operator: "light colors". One identity for the shared login, on every brand that runs no rally. Six neutrals and nothing else — the accent, the CTA fill, the focus ring and the underline all still come from the brand, which is what keeps a Glam door rose and a SurfPeptides door teal without this file naming either of them. Written `.ruo-auth.ruo-auth--light` rather than `.ruo-auth--light` so it beats the base block on specificity (0,2,0) instead of on source order. Source order is the weaker of the two guarantees: it survives a file being reordered only by accident, and this repo has already shipped a padding shorthand that destroyed the rule above it for exactly that reason. --auth-muted and --auth-alert-tint are deliberately NOT restated. They are declared once in the base block as a mix of --auth-text into --auth-panel, and custom properties substitute at computed-value time on the element that carries them — so they follow whichever ink and card won here. A second copy would be a second place to forget. Measured (auth_contrast_guard_test, all four light brands): ink on page 15.03:1 · ink on card 17.93:1 · muted on card 7.76:1 card off page 1.20:1 · field off card 1.09:1 */ .ruo-auth.ruo-auth--light { --auth-bg: #EEEAE4; /* warm porcelain, never #fff — a page and a card cannot both be white and still be two things */ --auth-panel: #FFFFFF; --auth-raise: #F6F2EC; --auth-input: #F8F5F0; --auth-text: #17161A; --auth-border: #E0DAD1; --auth-lift: 0 24px 60px rgba(31, 26, 20, 0.10), 0 2px 8px rgba(31, 26, 20, 0.06); } /* ── The Rally Pass door ─────────────────────────────────────────────────── Operator: "rally pass sexy with peprally colors". Every surface still derives from the brand's own tokens, so re-theming peprally.css moves this door with it — a literal here would fork the palette, and the fork stays invisible until somebody re-themes the storefront and the login is left behind. Two refinements, both derived, both for the same reason the light block exists at all. PepRally's checkout stack is #1A1A22 page / #1c1c26 card / #22222e field: 1.05:1 and 1.05:1, correct inside checkout chrome and far too tight on a page that is nothing but one card. The page is deepened toward black and the field lifted toward the ink, which takes the card off the page at 1.08:1 and the field off the card at 1.42:1. Mixing toward var(--auth-text) rather than toward a literal white is what keeps this honest on the second brand that joins RallyPass::STORES. */ .ruo-auth.ruo-auth--rally { --auth-bg: color-mix(in srgb, var(--checkout-bg, #111116) 88%, #000000); --auth-input: color-mix(in srgb, var(--checkout-input-bg, #22222E) 90%, var(--auth-text)); --auth-lift: 0 28px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); } .ruo-auth *, .ruo-auth *::before, .ruo-auth *::after { box-sizing: border-box; } /* A soft wash anchored to the brand's own accent. Low alpha so it reads as light rather than as colour, on a cream brand and a carbon one alike. */ .ruo-auth::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(70rem 40rem at 8% -10%, color-mix(in srgb, var(--auth-accent) 12%, transparent), transparent 60%), radial-gradient(50rem 35rem at 100% 100%, color-mix(in srgb, var(--auth-accent) 7%, transparent), transparent 62%); } .ruo-auth > * { position: relative; z-index: 1; } /* ── Head ──────────────────────────────────────────────────────────────── */ .ruo-auth .ruo-auth__head { grid-area: head; max-width: 34rem; margin: 0 0 1.5rem; } .ruo-auth .ruo-auth__mark { display: inline-block; margin: 0; font-family: var(--auth-font-display); font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--auth-text); } /* The accent, as a rule rather than as letterforms. */ .ruo-auth .ruo-auth__mark::after { content: ""; display: block; width: 2.25rem; height: 3px; margin-top: 0.6rem; border-radius: 2px; background: var(--auth-accent); } /* The pass name is a chip, and the chip carries a live dot. It is the one piece of the head that says "this is a membership, not a form" before a word of it is read — and inline-flex is what keeps the dot on the baseline of the label rather than on the baseline of the line box. */ .ruo-auth .ruo-auth__pass { display: inline-flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0; padding: 0.34rem 0.7rem; border: 1px solid var(--auth-border); border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--auth-text); background: var(--auth-raise); } .ruo-auth .ruo-auth__pass::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--auth-accent); } .ruo-auth .ruo-auth__promise { margin: 0.85rem 0 0; font-family: var(--auth-font-display); font-size: clamp(1.4rem, 5.8vw, 2.15rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--auth-text); text-wrap: balance; } /* ── The form panel ────────────────────────────────────────────────────── */ .ruo-auth .ruo-auth__form-col { grid-area: form; } /* The card is the page's only object, so it carries the only elevation and the only accent edge. `overflow: hidden` is what lets the hairline below sit flush inside a 16px radius instead of overhanging the corners. */ .ruo-auth .ruo-auth__panel { position: relative; overflow: hidden; padding: 1.6rem 1.25rem 1.75rem; border: 1px solid var(--auth-border); border-radius: 16px; background: var(--auth-panel); color: var(--auth-text); box-shadow: var(--auth-lift); } /* The accent, as an edge. A 3px rule across the top of the card is the one place a brand can be felt on a surface that is otherwise deliberately neutral — and it is decoration, so it carries no contrast duty, which is what lets it be the raw brand accent rather than the darkened CTA fill. */ .ruo-auth .ruo-auth__panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--auth-accent); } .ruo-auth .ruo-auth__panel-title { margin: 0 0 0.35rem; font-family: var(--auth-font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--auth-text); } .ruo-auth .ruo-auth__panel-note { margin: 0 0 1.35rem; font-size: 0.9rem; line-height: 1.5; color: var(--auth-muted); } .ruo-auth .ruo-auth__field { margin-bottom: 1rem; } .ruo-auth .ruo-auth__field label { display: block; margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--auth-muted); } /* 16px minimum on the control itself. Below that, iOS Safari zooms the viewport on focus and the customer is left scrolled sideways inside a form they are trying to fill in on a phone. */ .ruo-auth .ruo-auth__input { display: block; width: 100%; padding: 0.85rem 0.9rem; font-family: inherit; font-size: 1rem; line-height: 1.3; color: var(--auth-text); background: var(--auth-input); border: 1px solid var(--auth-border); border-radius: 10px; transition: border-color 120ms ease, box-shadow 120ms ease; } .ruo-auth .ruo-auth__input::placeholder { color: var(--auth-muted); opacity: 0.75; } .ruo-auth .ruo-auth__input:focus { outline: none; border-color: var(--auth-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 28%, transparent); } .ruo-auth .ruo-auth__pw { position: relative; } .ruo-auth .ruo-auth__pw .ruo-auth__input { padding-right: 4.25rem; } /* The reveal control ships hidden and is shown by script. A visible toggle that does nothing is worse than no toggle, and the field must stay usable with JavaScript switched off. */ .ruo-auth .ruo-auth__reveal { position: absolute; right: 0.35rem; bottom: 0.35rem; display: none; padding: 0.5rem 0.6rem; min-height: 2.5rem; font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--auth-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .ruo-auth .ruo-auth__reveal[data-ready] { display: block; } .ruo-auth .ruo-auth__actions { margin-top: 1.35rem; } /* ── The primary call to action ──────────────────────────────────────────── Written for