/* ============================================================================= register.css — the ONLY stylesheet loaded by /Register. ============================================================================= WHY THIS FILE EXISTS -------------------- /Register is the one surface in the estate reached BEFORE an account exists. It used to link the full Metronic app bundle — plugins.bundle.css, style.bundle.css, fifteen-dark.css, the Font Awesome face and site.css, plus plugins.bundle.js and scripts.bundle.js — roughly 5.9 MB, to render six inputs and a submit button. None of it was doing load-bearing work here: * The page already rendered with Layout = null, so it never had the app shell (sidebar, header user menu, module switcher, assistant launcher, ticket entry) to begin with. The bundles were dressing an empty stage. * The JS did nothing at all. There is no jQuery-unobtrusive validation in this estate and the form carries `novalidate`, so validation has always been a server round-trip; no Metronic component is initialised on the page. * The --fx-* branding tokens were never actually defined here. They are emitted by the _BrandStyle partial, which only the LAYOUTS render — and this page has no layout. Every var(--fx-*, fallback) on it was silently resolving to its hardcoded fallback. So this file replaces the bundles rather than sitting on top of them. THEME — read this before adding a toggle ---------------------------------------- There is deliberately NO theme switching here, and that is not an oversight. The light/dark setting in this product is stored PER USER. A visitor to this page has no account, so there is nothing to read and nothing a toggle could save. The three honest options were: 1. One fixed look, decided by us. <-- chosen 2. Follow the operating system via prefers-color-scheme. 3. Render a toggle that persists nowhere. (3) is a control that lies about what it does, so it is out. (2) was rejected on purpose: this page is the continuation of the public marketing site, and that site has one deliberate look — an OS-driven light variant would be a design nobody has drawn and nobody has checked. (1) it is. The look is applied by the SERVER, in the markup, via data-theme on plus a matching color-scheme declaration, so there is no client-side decision to make and therefore no flash of the wrong theme at any point. `color-scheme: dark` matters as much as the colours: it is what makes the browser paint native UI — the select popup, scrollbars, focus rings, form autofill — to match, instead of dropping a white dropdown onto a dark page. SCOPE ----- This file styles /Register and nothing else. It is not shared, not imported anywhere, and must not grow into a second theme library. If a rule here is wanted elsewhere, copy it — do not link this file from another page. ============================================================================= */ /* ----------------------------------------------------------------------------- THE PALETTE AND TYPE SCALE — the one place to change how this page looks. Every value below is declared here and referenced by name; no raw hex appears anywhere else in this file. -------------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------------- PROVENANCE OF THESE VALUES — read before changing them. These are the estate's DOCUMENTED brand-dark values, taken from Fifteen.Web.Shared/Branding/ChromeTokens.cs (the DefaultDark set). They are not invented here and they are not eyeballed: --rg-bg is --fx-body-bg, --rg-surface is --fx-card-bg, --rg-border is --fx-card-border, --rg-text is --fx-text, --rg-text-muted is --fx-text-muted, --rg-primary is --fx-primary, and the four semantic colours are the --fx-* semantics verbatim. Copied rather than linked, because those tokens are only emitted by the _BrandStyle partial that the LAYOUTS render, and this page has no layout. The effect is that this page renders in exactly the colours it rendered in before — the change under it is structural, not visual. OUTSTANDING: Brad's direction is that this page should instead follow the public marketing site at the /nexuss/ path of the 15group site, because that is where a visitor arrives from. Those values are NOT in here yet and nothing below claims to be them. The site is served through a Cloudflare bot challenge that refuses this host, and its Elementor install uses internal CSS embedding, so there is no stylesheet file to read either — the design exists only inside the challenged HTML. When the real values are available, THIS BLOCK is the only thing that needs to change; no rule below hardcodes a colour. --------------------------------------------------------------------- */ /* Ground and surfaces */ --rg-bg: #15171c; --rg-bg-glow: #1b1e2b; --rg-surface: #1e1e2d; --rg-surface-2: #191a27; --rg-border: #2b2b40; --rg-border-strong: #3a3a55; /* Ink */ --rg-text: #f5f8fa; --rg-text-muted: #9899ac; --rg-text-dim: #787887; --rg-heading: #f5f8fa; /* Accent */ --rg-primary: #009ef7; --rg-primary-hover: #008ede; --rg-primary-ink: #ffffff; --rg-accent: #7239ea; /* Semantic */ --rg-success: #50cd89; --rg-warning: #ffc700; --rg-danger: #f1416c; /* Focus */ --rg-focus: #3699ff; --rg-focus-ring: rgba(0, 158, 247, 0.3); /* Alpha tints, derived from the accents above so a palette change carries through instead of leaving stale washes behind. */ --rg-primary-wash: rgba(0, 158, 247, 0.08); --rg-primary-wash-2: rgba(0, 158, 247, 0.16); --rg-primary-edge: rgba(0, 158, 247, 0.28); --rg-danger-wash: rgba(241, 65, 108, 0.1); --rg-danger-edge: rgba(241, 65, 108, 0.35); --rg-success-wash: rgba(80, 205, 137, 0.14); --rg-warning-wash: rgba(255, 199, 0, 0.14); /* Type. Poppins first because that is the estate's brand face — Metronic sets --bs-font-sans-serif: Poppins, Helvetica, "sans-serif" and this page inherited it. NOTHING in this estate loads Poppins as a webfont, here or anywhere else, so on most machines it has always resolved to the fallback; the only change is that the fallback is now a real system stack instead of bare `sans-serif`. No external font request is made from this page. */ --rg-font: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --rg-fs-hero: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); --rg-fs-card-title: 1.2rem; --rg-fs-body: 1rem; --rg-fs-small: 0.875rem; --rg-fs-xs: 0.8125rem; /* Shape */ --rg-radius: 14px; --rg-radius-sm: 10px; --rg-radius-pill: 999px; --rg-shadow: 0 18px 48px rgba(0, 0, 0, 0.42); --rg-maxw: 940px; --rg-gutter: 24px; color-scheme: dark; } /* ----------------------------------------------------------------------------- Reset — only what this page actually uses. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--rg-bg); /* A single soft wash behind the header so the page has depth without an image request. Fixed so it does not repeat as the form scrolls. */ background-image: radial-gradient(ellipse 90% 60% at 50% -10%, var(--rg-bg-glow) 0%, transparent 70%); background-repeat: no-repeat; background-attachment: fixed; color: var(--rg-text); font-family: var(--rg-font); font-size: var(--rg-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2 { margin: 0; line-height: 1.2; color: var(--rg-heading); } p { margin: 0; } :focus-visible { outline: 2px solid var(--rg-focus); outline-offset: 2px; } /* ----------------------------------------------------------------------------- Page frame -------------------------------------------------------------------------- */ .rg-page { display: flex; flex-direction: column; min-height: 100vh; } .rg-shell { width: 100%; max-width: var(--rg-maxw); margin: 0 auto; padding: 0 var(--rg-gutter); } .rg-shell-narrow { max-width: 820px; } .rg-header { padding: 28px 0; } .rg-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--rg-heading); } .rg-brand-mark { width: 30px; height: 30px; fill: none; stroke: var(--rg-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .rg-main { flex: 1 0 auto; padding: 16px 0 72px; } .rg-footer { padding: 24px 0 32px; border-top: 1px solid var(--rg-border); } .rg-footer-text { color: var(--rg-text-dim); font-size: var(--rg-fs-xs); } /* ----------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .rg-hero { text-align: center; margin-bottom: 40px; } .rg-hero-title { font-size: var(--rg-fs-hero); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 14px; } .rg-hero-text { color: var(--rg-text-muted); font-size: 1.0625rem; max-width: 42rem; margin: 0 auto; } /* ----------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .rg-card { background-color: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius); box-shadow: var(--rg-shadow); margin-bottom: 22px; } .rg-card-head { padding: 22px 26px 0; } .rg-card-title { font-size: var(--rg-fs-card-title); font-weight: 700; letter-spacing: -0.015em; } .rg-card-note { margin-top: 5px; color: var(--rg-text-dim); font-size: var(--rg-fs-small); } .rg-card-body { padding: 20px 26px 26px; } /* ----------------------------------------------------------------------------- Grid and fields -------------------------------------------------------------------------- */ .rg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .rg-field { grid-column: span 12; display: flex; flex-direction: column; } /* The two sign-in choices sit in adjacent grid cells with copy of different lengths. Without this the shorter card stops early and leaves a ragged gap beside the taller one; `flex: 1` makes the card fill its cell so the pair bottom out level. */ .rg-field > .rg-choice { flex: 1; } @media (min-width: 768px) { .rg-span-5 { grid-column: span 5; } .rg-span-6 { grid-column: span 6; } .rg-span-7 { grid-column: span 7; } } .rg-label { display: block; margin-bottom: 7px; font-size: var(--rg-fs-small); font-weight: 600; color: var(--rg-text); } .rg-required::after { content: "*"; margin-left: 4px; color: var(--rg-danger); font-weight: 700; } .rg-optional { color: var(--rg-text-dim); font-weight: 400; } .rg-input { width: 100%; padding: 12px 14px; background-color: var(--rg-surface-2); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); color: var(--rg-text); font-family: inherit; font-size: var(--rg-fs-body); line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .rg-input::placeholder { color: var(--rg-text-dim); } .rg-input:hover { border-color: var(--rg-border-strong); } .rg-input:focus { outline: none; border-color: var(--rg-primary); box-shadow: 0 0 0 3px var(--rg-focus-ring); } /* The chevron is drawn as a background image so the control needs no icon font and no JS. `appearance: none` is what stops the platform drawing its own. */ .rg-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239899ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; } .rg-error { display: block; margin-top: 6px; color: var(--rg-danger); font-size: var(--rg-fs-xs); } .rg-error:empty { display: none; } .rg-error-block { margin-top: 14px; } .rg-alert { margin-bottom: 22px; padding: 14px 18px; background-color: var(--rg-danger-wash); border: 1px solid var(--rg-danger-edge); border-radius: var(--rg-radius-sm); color: var(--rg-danger); font-size: var(--rg-fs-small); } .rg-alert ul { margin: 0; padding-left: 18px; } /* ----------------------------------------------------------------------------- The two sign-in choices -------------------------------------------------------------------------- */ .rg-choice { display: flex; flex-direction: column; height: 100%; padding: 18px; background-color: var(--rg-surface-2); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .rg-choice:hover { border-color: var(--rg-border-strong); } /* :has is what lets the whole card react to its own radio without any JS. Where it is unsupported the card simply stays in its resting style and the radio itself still shows the selection — the control never stops working. */ .rg-choice:has(.rg-radio:checked) { border-color: var(--rg-primary); background-color: var(--rg-primary-wash); } .rg-choice:has(.rg-radio:focus-visible) { outline: 2px solid var(--rg-focus); outline-offset: 2px; } .rg-choice-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .rg-radio { width: 18px; height: 18px; margin: 0; accent-color: var(--rg-primary); flex: none; cursor: pointer; } .rg-choice-name { font-size: 1.0625rem; font-weight: 700; color: var(--rg-heading); } .rg-badge { padding: 3px 10px; background-color: var(--rg-primary-wash-2); border-radius: var(--rg-radius-pill); color: var(--rg-focus); font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .rg-choice-body { color: var(--rg-text-muted); font-size: var(--rg-fs-small); } .rg-p { display: block; margin-bottom: 12px; } .rg-p-last { margin-bottom: 0; } .rg-choice-body strong { color: var(--rg-text); } .rg-choice-body em { color: var(--rg-text); font-style: italic; } .rg-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px 18px; background-color: var(--rg-primary-wash); border: 1px solid var(--rg-primary-edge); border-radius: var(--rg-radius-sm); color: var(--rg-text-muted); font-size: var(--rg-fs-small); } .rg-note strong { color: var(--rg-text); } .rg-note-icon { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--rg-focus); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------------------------------------------------------- Actions -------------------------------------------------------------------------- */ .rg-actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; margin-top: 28px; } @media (min-width: 576px) { .rg-actions { flex-direction: row; align-items: center; justify-content: space-between; } } .rg-link { color: var(--rg-text-dim); font-size: var(--rg-fs-xs); text-decoration: none; } .rg-link:hover { color: var(--rg-focus); text-decoration: underline; } .rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 28px; background-color: var(--rg-primary); border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-sm); color: var(--rg-primary-ink); font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .rg-btn:hover { background-color: var(--rg-primary-hover); border-color: var(--rg-primary-hover); } .rg-btn:active { transform: translateY(1px); } .rg-btn-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------------------------------------------------------- Outcome cards — confirmation and the circuit breaker -------------------------------------------------------------------------- */ .rg-outcome { padding: 52px 32px; text-align: center; margin-top: 32px; } .rg-outcome-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 50%; } .rg-outcome-icon svg { width: 30px; height: 30px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rg-outcome-icon-ok { background-color: var(--rg-success-wash); } .rg-outcome-icon-ok svg { stroke: var(--rg-success); } .rg-outcome-icon-warn { background-color: var(--rg-warning-wash); } .rg-outcome-icon-warn svg { stroke: var(--rg-warning); } .rg-outcome-title { font-size: 1.65rem; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 12px; } .rg-outcome-text { color: var(--rg-text-muted); font-size: 1.0625rem; max-width: 34rem; margin: 0 auto; } /* ----------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }