@charset "UTF-8"; @font-face { font-family: "Monosten"; src: url("fonts/Monosten/Monosten-A.woff2") format("woff2"), url("fonts/Monosten/Monosten-A.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "LatoLatin"; src: url("fonts/LatoLatin/LatoLatin-Regular.woff2") format("woff2"), url("fonts/LatoLatin/LatoLatin-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "LatoLatin"; src: url("fonts/LatoLatin/LatoLatin-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "LatoLatin"; src: url("fonts/LatoLatin/LatoLatin-Bold.woff2") format("woff2"), url("fonts/LatoLatin/LatoLatin-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- surfaces ---- */ --bg: #191321; /* page canvas */ --surface: #241d33; /* raised chrome (app-bar band) */ --surface-raised: #1e1730; /* step card / summary body */ --surface-item: #221a31; /* an active line-item / new-product row */ --surface-dim: #181022; /* a collapsed / dim / bill-to note row */ --summary-head: #4d3d70; /* summary header band */ /* ---- lines ---- */ --border: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .22); /* ---- text ---- */ --text: #d3d3d3; --text-strong: #ffffff; --muted: #a0a0a0; /* ---- brand purples ---- */ --accent: #973bfc; /* PRIMARY — CTAs, bright links */ --accent-muted: #8a72b0; /* secondary borders, selected outlines */ --accent-text: #c0acdc; /* purple-tinted text (group titles, tags) */ --accent-contrast: #ffffff; --success: #6fa085; /* renewal / applied green */ --anno: #b0946a; /* amber annotation ink */ --teal: #4fd1c5; /* portal subscription-action links */ /* ---- shape ---- */ --radius: 8px; /* outer step cards + summary */ --radius-sharp: 0; /* brand square corners: buttons, steppers, line items */ /* ---- layout widths (Metalama Design System) ---- */ --container-wide: 1620px; /* desktop wide box */ --container: 1400px; /* homepage section container */ --container-narrow: 1000px; /* prose / focused content column */ --gutter: 15px; --header-height: 85px; /* ---- spacing ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---- type: families (Metalama Design System) ---- */ --font-sans: "LatoLatin", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Monosten", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* ---- type: modular scale (Metalama Design System — base 16px, ratio 1.25). Every font-size in the store snaps to one of these tokens; nothing sets a raw px size. ---- */ --fs-base: 16px; --fs-sm: 12.8px; /* small labels, eyebrows, captions, table cells */ --fs-md: 16px; /* body copy, inputs, UI text */ --fs-lg: 20px; /* leads, step titles, brand */ --fs-h6: 16px; --fs-h5: 20px; --fs-h4: 25px; /* section titles */ --fs-h3: 31.25px; --fs-h2: 39px; --fs-h1: 48.8px; --fs-display: 64px; /* ---- type: weights ---- */ --fw-normal: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* uppercase button labels */ /* ---- type: line heights ---- */ --lh-tight: 1.05; /* display headings */ --lh-snug: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.6; /* body copy */ /* ---- type: letter spacing ---- */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; /* uppercase button labels */ } * { box-sizing: border-box; } html, body { background-color: var(--bg); min-height: 100vh; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--text); line-height: var(--lh-relaxed); } a { color: var(--accent); } h1:focus { outline: none; } .muted { color: var(--muted); } /* Global busy cursor: toggled on by store.js between an action's click and its result. `progress` is the arrow-plus-hourglass (the page stays interactive); the !important overrides per-element cursors (links, buttons). */ html.app-busy, html.app-busy * { cursor: progress !important; } .app-shell { min-height: 100vh; } .page { max-width: var(--container); margin: 0 auto; padding: var(--space-5); } .appbar { border-bottom: 1px dashed var(--border); background: var(--surface); margin-bottom: var(--space-5); } .appbar-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); } .appbar-left { display: flex; align-items: center; gap: var(--space-5); min-width: 0; } .appbar-nav { display: flex; align-items: center; gap: var(--space-5); } .appbar-nav a { font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; } .appbar-nav a:hover { color: var(--text-strong); } .appbar-nav a.active { color: var(--text-strong); border-bottom-color: var(--accent); } .bar-right { display: flex; align-items: center; gap: 14px; } .admin-tag { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--text-strong); background: var(--accent-muted); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 4px 9px; } .admin-tag:hover { border-color: var(--accent); } .profile-menu { position: relative; } .profile-menu > summary.profile-trigger { list-style: none; display: inline-flex; cursor: pointer; } .profile-menu > summary.profile-trigger::-webkit-details-marker { display: none; } .profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--border-strong); } .profile-menu[open] .profile-avatar { border-color: var(--accent); } .profile-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 15rem; display: flex; flex-direction: column; gap: 0; padding: 0 var(--space-3); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 30; } /* Each logical group (identity + account, then the actions) is vertically padded and separated by a divider; the action links stay tight within their own group. */ .profile-panel-group { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; } .profile-panel-group + .profile-panel-group { border-top: 1px solid var(--border); } .profile-panel-id { display: flex; flex-direction: column; gap: 3px; } /* The account block sits under the identity block in the same group; give it extra top space so the ADMIN tag and the "Account" title are not cramped together. */ .profile-panel-account { margin-top: var(--space-2); } .profile-panel-label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .profile-panel-email { color: var(--text-strong); font-weight: 600; word-break: break-all; } .profile-panel-admin { align-self: flex-start; margin-top: 4px; } .profile-panel-action { display: block; width: 100%; text-align: left; padding: 2px 0; background: none; border: none; font: inherit; color: var(--teal); text-decoration: none; cursor: pointer; } .profile-panel-action:hover { text-decoration: underline; text-underline-offset: 2px; } .profile-signin:hover { color: var(--accent-text); } .profile-signout { color: var(--teal); } .profile-signin { color: var(--text-strong); font-weight: 600; text-decoration: none; } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-lg); letter-spacing: 0.2px; color: var(--text-strong); } .brand-home { display: flex; align-items: center; text-decoration: none; } .brand-logo { height: 28px; width: auto; display: block; } .brand-sub { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin-left: 0; padding-left: var(--space-3); border-left: 1px solid var(--border-strong); letter-spacing: 0.08em; } .zone-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-normal); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1; padding: 5px 11px 5px 9px; border-radius: 999px; white-space: nowrap; user-select: none; } .zone-pill-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; } .zone-pill--store { color: var(--accent-text); background: rgba(151, 59, 252, 0.13); border: 1px solid rgba(151, 59, 252, 0.42); } .zone-pill--store .zone-pill-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(151, 59, 252, 0.22); } .btn-primary { border: 2px solid var(--accent); border-radius: var(--radius-sharp); background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); } .btn-primary:disabled { opacity: 0.6; cursor: default; } .btn-lg { width: 100%; padding: 13px 18px; font-size: var(--fs-md); } .btn-sm { display: inline-block; border: 2px solid var(--accent-muted); border-radius: var(--radius-sharp); background: transparent; padding: 7px 13px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; color: var(--text-strong); text-decoration: none; white-space: nowrap; } .btn-sm:hover { background: color-mix(in srgb, var(--accent-muted) 15%, transparent); } .btn-sm.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .btn-danger, .btn-sm.btn-danger { border-color: #b3524f; background: #b3524f; color: var(--accent-contrast); } .btn-danger:hover, .btn-sm.btn-danger:hover { background: color-mix(in srgb, #b3524f 85%, #fff); } .btn-ghost { border: 2px solid var(--border-strong); border-radius: var(--radius-sharp); background: transparent; color: var(--muted); padding: 7px 13px; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .btn-ghost:hover { color: var(--text-strong); border-color: var(--accent-muted); } .field { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.03); padding: 9px 12px; font: var(--fw-normal) var(--fs-md) var(--font-sans); color: var(--text-strong); min-height: 40px; } .field::placeholder { color: #6c6c6c; } .field:focus { outline: none; border-color: var(--accent-muted); background: rgba(255, 255, 255, 0.06); } .field:disabled { color: var(--muted); background: rgba(255, 255, 255, 0.02); cursor: default; } .lbl { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin: 0 0 5px 2px; text-transform: uppercase; letter-spacing: 0.4px; } .req { color: var(--accent); font-weight: 400; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .grid2 .span2 { grid-column: 1/3; } #blazor-error-ui { display: none; margin-bottom: var(--space-5); background: #3a1f26; border-bottom: 1px solid #e08a8a; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .err-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); padding: 11px var(--space-5); color: #f2d6d6; font-size: var(--fs-sm); line-height: 1.4; } .err-text { flex: 1; min-width: 0; } .err-reload { flex: none; color: #f2d6d6; font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: underline; } .err-dismiss { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(224, 138, 138, 0.5); border-radius: 6px; background: transparent; color: #f2d6d6; font-size: 18px; line-height: 1; cursor: pointer; } .err-dismiss:hover { border-color: #e08a8a; color: #fff; }