/* ============================================ AUTH PAGES — signin.html / signup.html Dedicated sign-in / sign-up pages. 2026-06-02 (premium-light rebuild): the two pages now have DISTINCT layouts, mirroring Tradermath's STRUCTURE in QuantVault's own light style: - signin.html = CENTERED composition (`.auth-page--center`): brand mark + a confident heading + a substantial centered form card, on a soft accent-tinted light field with a rounded on-brand motif behind. - signup.html = SPLIT (`.auth-page--split`): a brand panel on the LEFT (logo, big "Join us" headline, community copy, checklist) + the form column on the RIGHT; collapses to one column under 860px. The sharp Penrose TRIANGLE motif was REMOVED entirely (it clashed with the brand's smooth rounded "Q"). It is replaced by a tasteful ROUNDED motif: soft concentric rounded-squares + gentle arcs + a large low-opacity rounded "Q" monogram, low opacity, light, behind content. Stays LIGHT / on-brand (matches collections.html / topics.html): near-white surfaces, hairline borders, indigo var(--accent), Inter type. No dark hero. No emoji. Scrolls if tall (nothing clipped). Responsive. ============================================ */ /* The auth pages own the full height under the fixed nav. The site applies a `:root { zoom: 1.2 }`, so a plain `100vh` box paints at `100vh * 1.2` device px and would strand a scroll / white band. Fix: pull the nav's space INTO the box as `padding-top`, take it OUT of the body flex flow (`flex:none`) so its own height binds, and size to the *visual* viewport by dividing the `vh` by the root zoom. The page can still grow past that (scroll) if the content is tall. */ .auth-page { display: flex; flex-direction: column; flex: none; padding: var(--nav-height) 0 0; margin-top: 0; box-sizing: border-box; background: var(--bg-primary); min-height: calc(100vh / var(--root-zoom)); } /* ---- Seam under the nav (both layouts) ---- Drop the nav's bottom border + accent under-rule on the auth page so there is no painted hairline between the (slightly translucent) nav and the tinted field below it; a fixed band carries the page surface up behind the bar. */ body:has(> .auth-page) .nav { border-bottom: 0; } body:has(> .auth-page) .nav::after { display: none; } body:has(> .auth-page) { min-height: 0; } .auth-page::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 999; /* under the nav (z 1000), over page content */ pointer-events: none; } /* ===================================================================== ROUNDED ON-BRAND MOTIF — BAKE-OFF (?m=1..6) The `.authmotif` is now a single full-bleed container behind the content (`position:absolute`, fills its positioned parent). An inline script reads ?m=N and injects ONE of six DISTINCT motif SVGs into it, and sets an `authm--N` class on the container. Every motif is LIGHT, ROUNDED, stroked/ filled in var(--accent), low opacity, sits BEHIND content. No triangles, no dark block, no concentric-circle reuse. Each SVG fills the container and anchors itself via its own viewBox + preserveAspectRatio. 1 = rounded "Q" monogram, bottom-right 4 = overlapping rounded cards 2 = flowing rounded ribbons 5 = isometric rounded-cube cluster 3 = dot-grid / soft halftone fade 6 = oversized soft arc sweep + echo ===================================================================== */ .authmotif { position: absolute; inset: 0; pointer-events: none; color: var(--accent); z-index: 0; overflow: hidden; } .authmotif svg { position: absolute; display: block; } /* ===================================================================== SHARED CARD + FORM (used by both layouts) ===================================================================== */ .authcard { position: relative; z-index: 2; width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 48px -24px rgba(15, 23, 42, 0.22), 0 4px 12px -6px rgba(15, 23, 42, 0.10); padding: clamp(var(--space-8), 4vw, var(--space-10)) clamp(var(--space-6), 3.5vw, var(--space-10)); box-sizing: border-box; } .authcard__title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-bright); margin: 0 0 var(--space-2); letter-spacing: -0.02em; } .authcard__subtitle { font-size: var(--text-base); color: var(--text-secondary); margin: 0 0 var(--space-6); line-height: 1.55; } /* ---- Form fields ---- */ .authform { display: flex; flex-direction: column; gap: var(--space-5); } .authfield { display: flex; flex-direction: column; gap: var(--space-2); } .authfield__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); letter-spacing: -0.005em; } .authfield__input { width: 100%; height: 46px; padding: 0 var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--text-base); font-family: var(--font-sans); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); box-sizing: border-box; } .authfield__input::placeholder { color: var(--text-muted); } .authfield__input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-light)); } .authfield__input:focus { outline: none; background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .authfield__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .authforgot { font-size: var(--text-xs); color: var(--accent); text-decoration: none; font-weight: var(--font-semibold); cursor: pointer; } .authforgot:hover { text-decoration: underline; } /* ---- Primary button ---- */ .authbtn { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); border: 0; border-radius: var(--radius-lg); background: var(--accent); color: #fff; font-size: var(--text-base); font-weight: var(--font-semibold); font-family: var(--font-sans); cursor: pointer; letter-spacing: -0.005em; box-shadow: 0 2px 10px -2px rgba(76, 139, 245, 0.5); transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), opacity var(--transition-base); } .authbtn:hover { background: var(--accent-hover); box-shadow: 0 6px 18px -4px rgba(76, 139, 245, 0.6); transform: translateY(-1px); } .authbtn:active { transform: translateY(0); } .authbtn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* ---- Divider ---- */ .authdivider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; } .authdivider::before, .authdivider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } /* ---- Provider buttons (Google / GitHub) ---- */ .authproviders { display: flex; flex-direction: column; gap: var(--space-3); } .authprovider { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-medium); font-family: var(--font-sans); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .authprovider:hover { background: var(--bg-card-hover); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-light)); box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.14); } .authprovider svg { flex: 0 0 auto; } /* ---- Footer line + messages ---- */ .authfoot { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-secondary); } .authfoot a { color: var(--accent); text-decoration: none; font-weight: var(--font-semibold); } .authfoot a:hover { text-decoration: underline; } .authterms { margin-top: var(--space-5); text-align: center; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; } .authterms a { color: var(--text-secondary); text-decoration: underline; } .authmsg { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.45; display: none; } .authmsg--error { display: block; background: var(--color-hard-bg); color: var(--color-hard); border: 1px solid rgba(244, 63, 94, 0.3); } .authmsg--success { display: block; background: var(--accent-green-light); color: var(--accent-green); border: 1px solid rgba(34, 197, 94, 0.3); } .authmsg--info { display: block; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-border); } /* ===================================================================== SHARED BRAND BLOCK TYPOGRAPHY (logo / eyebrow / title / copy / points) Reused by both the centered header and the split left panel. ===================================================================== */ .auth-brand__logo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-bright); text-decoration: none; letter-spacing: -0.01em; } .auth-brand__logo img { width: 30px; height: 30px; } .auth-brand__eyebrow { display: block; font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .auth-brand__title { font-weight: var(--font-extrabold); color: var(--text-bright); letter-spacing: -0.035em; line-height: 1.03; } .auth-brand__copy { color: var(--text-secondary); line-height: 1.6; margin: 0; } .auth-brand__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .auth-brand__points li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); } .auth-brand__points svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); } /* ===================================================================== LAYOUT A — CENTERED (signin.html) A single centered composition: brand mark + eyebrow + heading + a substantial centered card, on a soft accent-tinted light field with the rounded motif behind. ===================================================================== */ .auth-page--center { position: relative; overflow: hidden; background: radial-gradient(72% 56% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%), radial-gradient(60% 50% at 88% 96%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), color-mix(in srgb, var(--accent) 4%, var(--bg-secondary)); } .auth-page--center::before { background: radial-gradient(120% 200% at 50% -60%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%), color-mix(in srgb, var(--accent) 4%, var(--bg-secondary)); } .auth-center { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 520px; margin: 0 auto; padding: clamp(var(--space-10), 7vh, var(--space-20)) var(--space-6) clamp(var(--space-12), 8vh, var(--space-24)); text-align: center; box-sizing: border-box; } .auth-center__header { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); } .auth-center__header .auth-brand__logo { margin-bottom: var(--space-2); } .auth-center__header .auth-brand__title { font-size: var(--text-4xl); margin: 0; } .auth-center__header .auth-brand__copy { font-size: var(--text-lg); max-width: 40ch; } .auth-center .authcard { text-align: left; } /* Centered motif container fills the whole tinted field behind the column. */ .auth-page--center > .authmotif { inset: 0; } .auth-page--center > .authmotif svg { inset: 0; width: 100%; height: 100%; } /* ===================================================================== LAYOUT B — SPLIT (signup.html) Brand panel on the LEFT, form column on the RIGHT. ===================================================================== */ .auth-page--split { background: var(--bg-primary); } .auth-page--split::before { background: linear-gradient( to right, color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)) 0, color-mix(in srgb, var(--accent) 6%, var(--bg-secondary)) 47%, var(--bg-primary) 47%, var(--bg-primary) 100%); } .auth-split { display: grid; grid-template-columns: 0.94fr 1fr; align-items: stretch; flex: 1 0 auto; min-height: 0; } /* ---- LEFT: brand panel ---- */ .auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--space-20) clamp(var(--space-10), 5vw, var(--space-16)); border-right: 1px solid var(--border-color); background: radial-gradient(120% 85% at 6% 4%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%), radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), color-mix(in srgb, var(--accent) 5%, var(--bg-secondary)); } .auth-brand__inner { position: relative; z-index: 2; max-width: 440px; display: flex; flex-direction: column; } .auth-split .auth-brand__logo { margin-bottom: var(--space-8); } .auth-split .auth-brand__eyebrow { margin-bottom: var(--space-4); } .auth-split .auth-brand__title { font-size: var(--text-4xl); margin: 0 0 var(--space-5); } .auth-split .auth-brand__copy { font-size: var(--text-lg); max-width: 38ch; } .auth-split .auth-brand__points { margin-top: var(--space-8); } /* Split motif container fills the brand panel behind its content. */ .auth-split .auth-brand .authmotif { inset: 0; } .auth-split .auth-brand .authmotif svg { inset: 0; width: 100%; height: 100%; } /* Motif 8 (signup default): a LARGE faded "Q" watermark — big, anchored toward the lower-right of the brand panel, bleeding off the edges, soft fade below. Sits behind the left-aligned heading/copy without competing with it. */ .auth-split .auth-brand .authm--8 svg { inset: auto -14% -10% auto; /* anchor bottom-right, bleed off */ left: auto; top: auto; width: clamp(420px, 56%, 720px); height: auto; } /* ---- RIGHT: form column ---- */ .auth-formcol { display: flex; align-items: center; justify-content: center; padding: clamp(var(--space-12), 6vh, var(--space-20)) clamp(var(--space-6), 4vw, var(--space-12)); background: var(--bg-primary); } .auth-formcol .authcard { max-width: 420px; border: 0; box-shadow: none; background: transparent; padding: 0; } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 860px) { /* split collapses to a single stacked column */ .auth-split { grid-template-columns: 1fr; min-height: 0; } .auth-brand { border-right: 0; border-bottom: 1px solid var(--border-color); padding: var(--space-16) var(--space-6) var(--space-12); text-align: center; align-items: center; } .auth-brand__inner { max-width: none; margin: 0 auto; align-items: center; } .auth-split .auth-brand__copy { max-width: none; } .auth-split .auth-brand__points { align-items: center; } .auth-split .auth-brand__title { font-size: var(--text-3xl); } .auth-formcol { padding: var(--space-12) var(--space-5) var(--space-16); } .auth-formcol .authcard { max-width: 460px; } .auth-page--split::before { background: color-mix(in srgb, var(--accent) 7%, var(--bg-secondary)); } /* centered: tighten the type */ .auth-center__header .auth-brand__title { font-size: var(--text-3xl); } } @media (max-width: 480px) { .auth-brand { padding: var(--space-12) var(--space-4) var(--space-10); } .auth-split .auth-brand__title { font-size: var(--text-2xl); } .auth-formcol { padding: var(--space-10) var(--space-4) var(--space-14); } .auth-center { padding-left: var(--space-4); padding-right: var(--space-4); } .auth-center__header .auth-brand__title { font-size: var(--text-2xl); } /* Card: trim padding + drop the fixed max-width so it tracks the viewport exactly (it already was width:100%, but the clamp floors keep ~24px of inner side-padding which is fine on a 360px screen). Both layouts. */ .authcard { max-width: 100%; padding: var(--space-6) var(--space-5); } /* Split form card is borderless/padless by design — keep it that way. */ .auth-formcol .authcard { max-width: 100%; padding: 0; } /* Keep the centered column from imposing its own min-width via long copy. */ .auth-center { max-width: 100%; } .auth-center__header .auth-brand__copy { font-size: var(--text-base); max-width: 100%; } .auth-split .auth-brand__copy { font-size: var(--text-base); } /* Inputs / primary button / provider buttons already span 100% of the card. Reaffirm box-sizing so padding can never push them past the card edge. */ .authfield__input, .authbtn, .authprovider { width: 100%; box-sizing: border-box; } /* Provider label can wrap awkwardly on very narrow widths — keep it on one line and let the icon + text center comfortably. */ .authprovider { gap: var(--space-2); padding: 0 var(--space-3); } } /* --------------------------------------------------------------------------- NARROW PHONES (<=360px) — final overflow guard. Everything above already fits 360px; these rules add headroom so nothing clips on the smallest common screens (e.g. 320px) and the headings don't force a horizontal scroll. --------------------------------------------------------------------------- */ @media (max-width: 380px) { .auth-center { padding-left: var(--space-3); padding-right: var(--space-3); } .auth-brand { padding-left: var(--space-3); padding-right: var(--space-3); } .auth-formcol { padding-left: var(--space-3); padding-right: var(--space-3); } .authcard { padding: var(--space-5) var(--space-4); } /* Headings: at the brand-title's --text-2xl (1.625rem) a long word can edge past 320px — step the big titles down and allow wrapping. */ .auth-center__header .auth-brand__title, .auth-split .auth-brand__title { font-size: var(--text-xl); line-height: 1.12; } .authcard__title { font-size: var(--text-xl); } .auth-brand__title, .authcard__title, .auth-brand__copy { overflow-wrap: anywhere; } /* Divider label can be wide with letter-spacing — relax it so the rules keep room. */ .authdivider { gap: var(--space-2); letter-spacing: 0.04em; } }