/* ============================================================= DTFtransfers portal styles Mobile-first, fluid (clamp/min/max), responsive across the full width continuum. Brand is the warm ramp #FF8A2B -> #FF394C; the --nod-blue* token NAMES are kept and resolve warm, see :root. ============================================================= */ *, *::before, *::after { box-sizing: border-box; } /* authored display values (flex/grid) beat the UA [hidden] rule — re-assert it */ [hidden] { display: none !important; } :root { /* ---- DTFtransfers brand palette (Justin 2026-07-29) ---- Declared here because nod.css is the one stylesheet every surface loads, so this is the single source of truth. dtf-palette.css no longer redefines them; it only styles front-door components. Definitions alone paint nothing, so storefronts are unaffected by their presence. */ --brand-orange: #FF8A2B; /* gradient start */ --brand-red: #FF394C; /* gradient end, primary accent */ --brand-pink: #FF2E86; --brand-link: #D9481A; /* links and small text: the one warm value that clears AA on white */ --brand-link-hover: #C25C05; --brand-eyebrow: #E4550A; --grad-brand: linear-gradient(135deg, #FF8A2B 0%, #FF394C 100%); --grad-heat: linear-gradient(100deg, #FF394C 0%, #FF2E86 100%); --glow-orange: 0 8px 24px rgba(255, 138, 43, 0.5); --glow-red: 0 10px 30px rgba(255, 57, 76, 0.35); /* Warm replacements for the pale-blue surfaces the portal used to fill selected chips, icon tiles and focus rings with (#eff6ff / var(--brand-tint) / var(--brand-tint)). Opaque rather than an alpha wash, because these sit on cards that are already tinted and a translucent layer muddies them. */ /* Filled brand SURFACES (buttons, active nav, step dots) take the dtftransfers.com gradient rather than the flat red, so the portal matches the public site (Justin 2026-08-11). Kept separate from --nod-blue because that token is also used for borders, rings and icon color, where a gradient is not a legal value — and because store-theme.js overrides BOTH on a storefront so a reseller's own brand color still wins there. */ --nod-cta: var(--grad-brand); --nod-cta-hover: var(--grad-heat); /* accent RULES (3px card tops, progress fills): a color, not a gradient */ --nod-rule: var(--brand-orange); --brand-tint: #FFF3EC; --brand-ring: rgba(255, 138, 43, 0.38); /* The blue tokens now RESOLVE WARM. Keeping the names is deliberate: 339 references across the portal read them, including 94 in order-builder.css and 74 in order-page.css, so remapping the three of them recolours the whole dashboard and the power builder in one place instead of touching hundreds of call sites. Renaming would be a pointless mass edit with real risk. */ /* Justin 2026-08-11: "make sure everything gets our orange." The accent resolves to the gradient's ORANGE end, not its red end, so every icon, dashed dropzone, selected chip, toggle track and soft wash in the portal reads warm. Text keeps --brand-link (#D9481A), the one warm value that clears AA on white — orange type on white would not. */ --nod-blue: var(--brand-orange); --nod-blue-dark: var(--brand-link); /* stays translucent, not a flat tint: it is used as a hover wash over varied surfaces */ --nod-blue-soft: rgba(255, 138, 43, 0.12); --nod-ink: #0f172a; --nod-ink-soft: #475569; --nod-line: #e2e8f0; --nod-bg: #f6f8fb; --nod-card: #ffffff; --nod-danger: #dc2626; --nod-radius: 14px; --fs-0: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); --fs-1: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); --fs-2: clamp(1.25rem, 1.05rem + 1vw, 1.9rem); --fs-3: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); --sp: clamp(1rem, 0.8rem + 1vw, 1.75rem); /* The ONE page gutter for the order surfaces. Anything that spans the page — the shell, the masthead/stepper, the content column, the sticky bottom bar — insets by exactly this, so the left and right gutters match and stay consistent all the way down. Never nest two of them. */ --nod-gutter: clamp(0.75rem, 0.5rem + 1.5vw, 1.75rem); } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--nod-ink); font-size: var(--fs-1); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* ---------- brand logo ---------- */ .nod-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: 0.02em; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); } .nod-logo--light { color: #fff; } .nod-logo--dark { color: var(--nod-ink); } /* head-icon mark next to the NOD wordmark (white-bg surfaces) */ .nod-logo-img { height: clamp(34px, 2rem + 0.8vw, 44px); width: auto; flex: 0 0 auto; display: block; } .auth-brand-logo .nod-logo-img { height: clamp(64px, 5rem + 1vw, 96px); } .nod-mark-img { width: clamp(30px, 2rem + 0.6vw, 38px); height: auto; flex: 0 0 auto; display: block; } /* stylized NOD wordmark image (replaces the plain "NOD" text on white surfaces) */ .nod-wordmark { height: clamp(20px, 1.1rem + 0.7vw, 26px); width: auto; flex: 0 0 auto; display: block; } /* NOD lockup (head mark + wordmark) on the blue brand panel */ .auth-brand-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 2px; } .auth-brand-logo .nod-mark-img { width: clamp(56px, 4.5rem + 1vw, 84px); } .auth-brand-logo .nod-wordmark { height: clamp(34px, 2.4rem + 1vw, 52px); } /* ============================================================= AUTH (login / signup) ============================================================= */ /* ---------- shared address widget (NodAddress) — global so auth/admin/checkout all get it ---------- */ .nod-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .nod-addr-span { grid-column: 1 / -1; } .nod-addr-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .nod-addr-field > span { font-size: var(--fs-0); font-weight: 700; color: var(--nod-ink); } .nod-addr-field > span i { font-style: normal; font-weight: 600; color: var(--nod-ink-soft); font-size: 0.82em; } .nod-addr-field input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--nod-line); border-radius: 11px; font: inherit; font-size: var(--fs-0); background: var(--nod-card); color: var(--nod-ink); width: 100%; } .nod-addr-field input:focus { outline: 2px solid var(--nod-blue-soft); border-color: var(--nod-blue); } .nod-addr-row3 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; } @media (max-width: 560px) { .nod-addr, .nod-addr-row3 { grid-template-columns: 1fr; } } .nod-co-country { position: relative; } .nod-co-countrybtn { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--nod-line); border-radius: 11px; background: var(--nod-card); color: var(--nod-ink); font: inherit; font-size: var(--fs-0); cursor: pointer; text-align: left; } .nod-co-countrybtn:focus { outline: 2px solid var(--nod-blue-soft); border-color: var(--nod-blue); } .nod-co-flag { width: 26px; height: 18px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); overflow: hidden; display: block; } .nod-co-flag svg { width: 100%; height: 100%; display: block; } .nod-co-cname { flex: 1 1 auto; font-weight: 600; } .nod-co-cchev { width: 16px; height: 16px; color: var(--nod-ink-soft); flex: 0 0 auto; } .nod-co-countrymenu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--nod-card); border: 1px solid var(--nod-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16); padding: 6px; } .nod-co-countrymenu[hidden] { display: none; } .nod-co-copt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 8px; font: inherit; font-size: var(--fs-0); color: var(--nod-ink); cursor: pointer; text-align: left; min-height: 42px; } .nod-co-copt:hover, .nod-co-copt.is-on { background: var(--nod-blue-soft); color: var(--nod-blue-dark); } .nod-co-addr { position: relative; } .nod-co-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--nod-card); border: 1px solid var(--nod-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16); max-height: 260px; overflow-y: auto; } .nod-co-suggest[hidden] { display: none; } .nod-co-sopt { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; cursor: pointer; } .nod-co-sopt:hover { background: var(--nod-blue-soft); } .nod-co-sopt strong { font-size: var(--fs-0); color: var(--nod-ink); font-weight: 700; } .nod-co-sopt span { font-size: 0.78rem; color: var(--nod-ink-soft); } .nod-co-suggest-note { padding: 4px 10px 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--nod-ink-soft); } .auth-subhead { margin: 0.6rem 0 0.2rem; font-size: var(--fs-0); font-weight: 800; color: var(--nod-ink); } .auth-subhead i { display: block; font-style: normal; font-weight: 600; color: var(--nod-ink-soft); font-size: 0.82em; margin-top: 2px; } .auth-body { min-height: 100svh; background: var(--nod-bg); } .auth-split { min-height: 100svh; display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .auth-split { grid-template-columns: 1.05fr 1fr; } /* pin the brand panel: the (long) form scrolls, the left column stays put */ .auth-brand { position: sticky; top: 0; align-self: start; height: 100svh; min-height: 0; overflow: hidden; } } /* brand panel — full-screen landing on mobile (with CTAs), left column on desktop */ .auth-brand { display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(150deg, var(--brand-orange) 0%, var(--brand-red) 55%, var(--brand-pink) 100%); color: #fff; padding: clamp(1.75rem, 1rem + 4vw, 4.5rem); position: relative; overflow: hidden; min-height: 100svh; } .auth-brand::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,0.08); } .auth-brand-inner { position: relative; z-index: 1; max-width: 30rem; } /* mobile CTAs (shown only while the brand panel is the landing) */ .auth-brand-cta { display: flex; flex-direction: column; gap: 0.65rem; max-width: 30rem; margin: 0 0 1.75rem; } /* Works as a