/* MP client portal — static sign-in + register. Design anchor: a deep-teal brand panel + a flat ops-console form column. Asymmetric split: the teal panel (ruled honeycomb "blueprint" grid + the real hexagon-mark lockup matching marketplaceprep.com's header) beside a flat, left-aligned form column. Self-hosted Barlow Semi Condensed (display) + Roboto (body) — MP brand; system monospace for the document/manifest furniture. Tight radii, hairline rules, flat surfaces — no soft pill cards, no radial-blob background. CSP: style-src 'self', font-src 'self' (fonts vendored under /vendor/fonts). */ /* MP brand type: Barlow Semi Condensed (display) + Roboto (body) — matches marketplaceprep.com, the ops console, and the in-app portal pages. */ @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/vendor/fonts/barlow-sc-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/vendor/fonts/barlow-sc-700.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/vendor/fonts/barlow-sc-800.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/vendor/fonts/roboto-400.woff2") format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/vendor/fonts/roboto-500.woff2") format("woff2"); } /* ---- Surface aliases: map local names → mp-tokens.css primitives/semantics ---- mp-tokens.css is loaded via in each page before portal.css. Raw fallbacks are duplicated here so portal.css is safe standalone in dev. */ :root { --paper: var(--mp-prim-neutral-50, #eef1f3); /* light page bg */ --surface: var(--mp-prim-white, #ffffff); --line: var(--mp-line, rgba(15, 23, 42, 0.12)); /* Control border + input well. The shared --mp-line-strong token (#cccfd4) is a hairline meant for dividers; on the white form column it left inputs and the Google button with no visible boundary ("can't see the fields", 2026-06-10). These are portal-local, deliberately stronger, for control affordance (§E.0). */ --line-2: #848f9e; /* visible interactive-control border (≥3:1 vs white, WCAG 1.4.11) */ --field-bg: #eef2f6; /* filled input well — reads as a field on white */ --fg: var(--mp-prim-neutral-950, #0b1220); --fg-dim: var(--mp-prim-neutral-600, #4a5765); --fg-mute: var(--mp-prim-neutral-500, #5f6b78); /* WCAG AA on white */ --teal: var(--mp-prim-teal-600, #014255); /* #004256 header */ --teal-700: var(--mp-prim-teal-800, #01303d); /* #003040 hover */ --teal-ink: #cfe0e6; /* dim text on teal panel */ --green: var(--mp-primary, #5BAA3B); --green-700: var(--mp-primary-dark, #4d9532); --danger: var(--mp-prim-danger-600, #b42318); --radius: var(--mp-r-ctrl, 6px); --mono: var(--mp-ff-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace); --display: var(--mp-ff-display, "Barlow Semi Condensed", "Roboto", system-ui, sans-serif); --body: var(--mp-ff-body, "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--fg); font-family: var(--body); font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--teal); } /* ---------- a11y: keyboard focus + reduced motion ---------- */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* On the teal panel, the dark outline would vanish — use the green register color. */ .panel a:focus-visible { outline-color: var(--green); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- split shell ---------- */ .shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); } @media (max-width: 800px) { .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } /* ---------- left: manifest panel ---------- */ .panel { position: relative; background-color: var(--teal); color: #fff; padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 40px; border-right: 1px solid rgba(0, 0, 0, 0.25); overflow: hidden; } .panel::after { /* honeycomb grid echoing the FLAT-TOP hexagonal MP mark: the seamless pointy-top tile rotated 30deg → flat-top cells. A centered SQUARE sized off the panel width (aspect-ratio:1) so that once rotated it still covers the panel at ANY aspect ratio — the old inset:-45% left bare teal corners when the panel collapses to the short, wide brand bar on mobile. Clipped by the panel's overflow:hidden. */ content: ""; position: absolute; top: 50%; left: 50%; width: 300%; aspect-ratio: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 40px 70px; transform: translate(-50%, -50%) rotate(30deg); pointer-events: none; z-index: 0; } .panel::before { /* a precise green register-mark rule down the top edge */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); z-index: 2; } .panel > * { position: relative; z-index: 1; } /* Brand lockup — matches the marketplaceprep.com header exactly: hexagon mark + "Marketplace Prep" (one line, Barlow 800) + tagline under. */ .panel-head { display: flex; align-items: center; gap: 12px; } .panel-head img { height: 44px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.2px; } .brand-tag { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; } .panel-mid { margin-top: auto; } .panel-mid h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; } .panel-mid p { max-width: 58ch; color: var(--teal-ink); font-size: 15px; line-height: 1.6; margin: 0; text-wrap: balance; } @media (max-width: 800px) { .panel { padding: 22px 22px 24px; gap: 22px; flex-direction: row; align-items: center; justify-content: space-between; } .panel-mid { display: none; } .panel-head img { height: 34px; } .brand-tag { display: none; } } /* ---------- right: form column ---------- */ .form-col { background: var(--surface); display: flex; align-items: center; justify-content: flex-start; padding: 48px clamp(28px, 6vw, 84px); } .form-wrap { width: 100%; max-width: 380px; } /* (Anti-slop ledger §B/§D, 2026-06-10) The tracked-uppercase-mono eyebrow kicker above every h1 was the self-caught "no-pill cousin of the eyebrow-pill" tell — removed across signin/register/verify. The h1 + sub carry the section already (§E.0 reduce-decisions). Mono is now reserved for the genuine data signal layer (the email identity chip), not decorative furniture. */ h1 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; } .sub { font-size: 14.5px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 28px; } /* ---------- fields ---------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 7px; } .field input[type=email], .field input[type=password], .field input[type=text] { width: 100%; padding: 12px 13px; font-family: var(--body); font-size: 15px; color: var(--fg); background: var(--field-bg); border: 1px solid var(--line-2); border-radius: var(--radius); outline: none; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; } .field input::placeholder { color: var(--fg-mute); } .field input:focus { background: #fff; /* well lifts to white on focus */ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(91, 170, 59, 0.28); /* green register ring */ } .hint { font-size: 12px; color: var(--fg-mute); margin: 7px 0 0; } /* ---------- password reveal (§E.0: let the user see what they typed, esp. against register's 12-char + special-char policy). Labeled text control, not mystery-meat. Wired by /password-reveal.js. ---------- */ .input-wrap { position: relative; display: block; } .input-wrap input { padding-right: 64px; } .pw-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; display: inline-flex; align-items: center; padding: 0 13px; border: 0; background: transparent; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--fg-mute); cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; } .pw-toggle:hover { color: var(--teal); } .pw-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 16px; font-family: var(--body); font-size: 15px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .12s ease, border-color .12s ease, opacity .12s ease; } .btn:disabled { opacity: .5; cursor: default; } .btn-primary { background: var(--teal); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--teal-700); } .btn-google { background: #fff; color: var(--fg); border-color: var(--line-2); } .btn-google:hover:not(:disabled) { border-color: var(--teal); } .btn-google .g { width: 18px; height: 18px; flex: none; display: block; } /* ---------- divider ---------- */ /* Body font, sentence case (was tracked-uppercase mono — §D "most-missed axis": don't default the second font to mono for decorative furniture). */ .divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--fg-mute); font-family: var(--body); font-size: 12.5px; } .divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; } /* ---------- consent ---------- */ .check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 20px; font-size: 13px; color: var(--fg-dim); line-height: 1.5; } .check input { margin-top: 2px; accent-color: var(--green); } .check a { color: var(--teal); } /* ---------- alerts (class semantics consumed by signin.js / register.js) ---------- */ .alert { display: none; padding: 11px 13px; border-radius: var(--radius); font-size: 13px; line-height: 1.45; margin-bottom: 18px; border-left: 3px solid transparent; } .alert.show { display: block; } .alert.err { background: #fdeceb; color: var(--danger); border-left-color: var(--danger); } .alert.ok { background: #eef6ea; color: #2f6f1c; border-left-color: var(--green); } /* ---------- identifier-first flow ---------- */ .hidden { display: none !important; } /* the email chip shown on the password step (confirms who you're signing in as) */ .identity { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 11px 13px; background: var(--field-bg); border: 1px solid var(--line-2); border-radius: var(--radius); font-family: var(--mono); font-size: 13px; } .identity-email { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identity-change { flex: none; color: var(--teal); text-decoration: none; font-weight: 600; letter-spacing: 0.04em; } .identity-change:hover { text-decoration: underline; } /* ---------- forgot / reset link ---------- */ .reset-row { text-align: right; margin: 12px 0 0; font-size: 13px; } .reset-row a { color: var(--fg-dim); text-decoration: none; } .reset-row a:hover { color: var(--teal); } /* ---------- foot ---------- */ .foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-mute); } .foot a { color: var(--teal); text-decoration: none; font-weight: 600; }