/* ========================================================================== additional-v2.css - redesigned step 1 ("Enter your xID") of the Gold upgrade flow, matching the /buyxid redesign. Loaded AFTER additional-page.css so the .bxa-* rules here win over the old .xpal-card / .xpal-stepper treatment, which is now unused markup-wise but still shipped for panels 2-4. Every hook additional.js and additional-page.js rely on is preserved: #businessxIDInput, #searchBusinessxIDForm, #xIDBusinessList, #continueBtn, .removeButton, .additional-icon-container, .business-error-message.*, .xpal-step (x4, in DOM order) and .xpal-panel / #xpal-panel-N. The viewport shell (flex column, section gap/width tokens, footer strip) mirrors buyxid-v2.css. It is duplicated rather than shared because that file also carries the buyxid-only card/plan rules; if a third page in this flow needs the same shell, lift these tokens plus the .buyxid-container / footer-strip block into a gold-shell.css that all of them load. ========================================================================== */ :root { --bxa-bg: #000; --bxa-line: #1F1F1F; --bxa-cream: #FBF8D8; --bxa-gold: #D7C478; --bxa-text: #C8C5A6; --bxa-muted: rgba(255, 255, 255, 0.45); /* caret in the xID field - off-white rather than pure #fff */ --bxa-offwhite: #EDEDE7; /* width of the Save50.png badge; its height follows the 363:258 aspect */ --bxa-save-w: clamp(58px, min(5.2vw, 8.6vh), 88px); /* the flow's accent - the step ring, the filled digit underline and the add button; the -soft tint is the enabled Continue button */ --bxa-accent: #4F46D6; /* The add button in the mockup is a DARK muted indigo disc with a LIGHT lavender "+" on it - not the bright accent with a white glyph. Both get their own tokens so the filled digit underline and the completed step dots can keep the brighter --bxa-accent. */ --bxa-add-bg: #2F2A5E; --bxa-add-fg: #9D94F7; /* One source for the disc size so the glyph can be sized from it - a "+" only paints about 55% of its em box, so a fixed font-size left it looking tiny inside the circle. */ --bxa-add-size: clamp(42px, min(3.9vw, 6.5vh), 62px); --bxa-accent-ring: #6C63F0; --bxa-accent-soft: #9D94F7; /* Shared with buyxid: equal breathing space above the section (header -> content) and below it (content -> divider), and one column width for the section, the divider and the legal copy. */ --bxa-section-gap: clamp(28px, min(4.5vw, 7.2vh), 78px); /* The mockup gives the whole two-column block 62.4% of the canvas width (916 of 1467) - ours was running at 67.6%, which is what made every panel, field and pill inside it read as stretched. The 1:2 column split was already right; only the section around it was too wide. */ --bxa-section-width: min(1220px, 136vh); } /* ------------------------------------------------------- viewport shell -- */ /* additional.css makes a flex column and gives .buyxid-container "flex: 1" (i.e. flex-basis:0 and shrinkable). That combination let this container collapse to the viewport height while its own content was taller, so the site