/* ============================================================================
Isabyte — "Aurora Summit" design system
Dark-first, editorial. Brand gradient (#6D4AFF → #A24BE8 → #E84F9C) used as a
sharp accent over a deep-navy canvas. Mirrors the Isabyte.PowerTools.Blazor.Server
app.css token approach, adapted to the Isabyte brand.
Fonts loaded via in App.razor: Montserrat / Manrope / JetBrains Mono.
========================================================================== */
:root {
/* ===== Brand gradient + stops ===== */
--bx-grad: linear-gradient(120deg, #6D4AFF 0%, #A24BE8 55%, #E84F9C 100%);
--bx-grad-soft: linear-gradient(120deg, rgba(109,74,255,.18), rgba(232,79,156,.18));
--bx-violet: #6D4AFF;
--bx-purple: #A24BE8;
--bx-pink: #E84F9C;
/* ===== Canvas / surfaces (dark, default) ===== */
--bx-abyss: #0D0821; /* deepest background */
--bx-night: #15102B; /* primary surface */
--bx-night-2: #1B1438; /* elevated surface */
--bx-ink: #1B1A2E; /* deep ink (text on light) */
--bx-line: rgba(180, 160, 255, .14);
--bx-line-strong: rgba(180, 160, 255, .28);
/* ===== Text ===== */
--bx-text: #ECE9F6;
--bx-text-soft: #B9B2D6;
--bx-mist: #8A84A6; /* muted ("LABS" grey) */
/* ===== Glows ===== */
--bx-glow-violet: rgba(109, 74, 255, .45);
--bx-glow-pink: rgba(232, 79, 156, .35);
--bx-node: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #FFD7EC 70%, rgba(255,215,236,0) 100%);
/* ===== Status (ok / warn / danger / info) — -soft = tinted surface ===== */
--bx-ok: #63D68B;
--bx-ok-soft: rgba(99, 214, 139, .14);
--bx-warn: #F4B64F;
--bx-warn-soft: rgba(244, 182, 79, .14);
--bx-danger: #FF7D9C;
--bx-danger-rgb: 255, 125, 156;
--bx-danger-soft: rgba(255, 125, 156, .14);
--bx-info: #6FB6FF;
--bx-info-soft: rgba(111, 182, 255, .14);
/* ===== Type scale ===== */
--bx-font-display: "Montserrat", system-ui, sans-serif;
--bx-font-body: "Manrope", system-ui, sans-serif;
--bx-font-mono: "JetBrains Mono", ui-monospace, monospace;
--bx-hero: clamp(2.6rem, 6vw, 4.5rem);
--bx-h1: clamp(2rem, 4vw, 3rem);
--bx-h2: clamp(1.5rem, 2.6vw, 2.1rem);
--bx-h3: 1.25rem;
--bx-body: 1.05rem;
/* ===== Shape ===== */
--bx-radius: 18px;
--bx-radius-sm: 12px;
--bx-shadow: 0 24px 60px -20px rgba(0,0,0,.65);
--bx-shadow-glow: 0 20px 60px -22px var(--bx-glow-violet);
--bx-maxw: 1180px;
}
/* Light theme overrides (header toggle sets data-theme="light" on ) */
:root[data-theme="light"] {
--bx-abyss: #FBFBFE;
--bx-night: #FFFFFF;
--bx-night-2: #F4F1FB;
--bx-line: rgba(27, 26, 46, .10);
--bx-line-strong: rgba(27, 26, 46, .18);
--bx-text: #1B1A2E;
--bx-text-soft: #4B4762;
--bx-mist: #6A6486;
--bx-shadow: 0 24px 60px -28px rgba(60, 40, 120, .22);
--bx-ok: #2E7D32;
--bx-ok-soft: #E8F5E9;
--bx-warn: #B26A00;
--bx-warn-soft: #FFF3E0;
--bx-danger: #C62828;
--bx-danger-rgb: 198, 40, 40;
--bx-danger-soft: #FCE4EC;
--bx-info: #114E7C;
--bx-info-soft: #E3F2FD;
}
/* ===== Bootstrap 5.3 color-mode bridge ==================================
App.razor keeps data-bs-theme on in lockstep with the bx theme
(dark -> "dark", light -> "light"), which switches on Bootstrap's OWN
dark styling for its form controls / tables / cards / alerts on every
page. This block then re-points Bootstrap's surface tokens at the bx
palette, so those surfaces are the hub's violet-tinted colors instead
of Bootstrap's generic slate. bx tokens already flip with data-theme,
so ONE bridge serves both modes — do not fork it per theme. */
:root {
--bs-body-bg: var(--bx-night);
--bs-body-color: var(--bx-text);
--bs-emphasis-color: var(--bx-text);
--bs-secondary-color: var(--bx-text-soft);
--bs-secondary-bg: var(--bx-night-2);
--bs-tertiary-bg: var(--bx-night-2);
--bs-border-color: var(--bx-line-strong);
--bs-heading-color: var(--bx-text);
}
/* Destructive outline buttons (Revoke / Remove / Delete across the Manage and
Admin pages) re-pointed at the bx danger palette via Bootstrap 5.3's
per-button variables — dark mode gets the soft #FF7D9C, light the deep
#C62828, both from the same tokens. Hover/active fill with the danger color;
the text then uses --bx-night, which is dark ink in dark mode (readable on
the light-pink fill) and white in light mode (readable on the deep red) —
one declaration serves both. */
/* ===== Bootstrap buttons on the Isabyte palette =========================
The Manage/Admin views are built from Bootstrap buttons, and their stock
blues/reds/greens are the one place the hub still looked like an unstyled
template. Each variant is re-pointed at the bx tokens through Bootstrap
5.3's per-button variables — the same mechanism .btn-outline-danger below
has always used, so there is one technique here, not two.
Filled variants take --bx-night for their text: it is dark ink in dark mode
(readable on the light-pink/green/amber fills the dark palette uses) and
white in light mode (readable on that palette's deep tones). One
declaration serves both themes; do not fork these per data-theme.
.btn-primary is the exception — brand violet is fixed in both themes, so
its label is white in both. */
.btn-primary {
--bs-btn-bg: var(--bx-violet);
--bs-btn-border-color: var(--bx-violet);
--bs-btn-color: #FFFFFF;
--bs-btn-hover-bg: var(--bx-purple);
--bs-btn-hover-border-color: var(--bx-purple);
--bs-btn-hover-color: #FFFFFF;
--bs-btn-active-bg: var(--bx-purple);
--bs-btn-active-border-color: var(--bx-purple);
--bs-btn-active-color: #FFFFFF;
--bs-btn-disabled-bg: var(--bx-violet);
--bs-btn-disabled-border-color: var(--bx-violet);
--bs-btn-disabled-color: #FFFFFF;
}
.btn-danger {
--bs-btn-bg: var(--bx-danger);
--bs-btn-border-color: var(--bx-danger);
--bs-btn-color: var(--bx-night);
--bs-btn-hover-bg: var(--bx-danger);
--bs-btn-hover-border-color: var(--bx-danger);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-danger);
--bs-btn-active-border-color: var(--bx-danger);
--bs-btn-active-color: var(--bx-night);
--bs-btn-disabled-bg: var(--bx-danger);
--bs-btn-disabled-border-color: var(--bx-danger);
--bs-btn-disabled-color: var(--bx-night);
}
.btn-success {
--bs-btn-bg: var(--bx-ok);
--bs-btn-border-color: var(--bx-ok);
--bs-btn-color: var(--bx-night);
--bs-btn-hover-bg: var(--bx-ok);
--bs-btn-hover-border-color: var(--bx-ok);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-ok);
--bs-btn-active-border-color: var(--bx-ok);
--bs-btn-active-color: var(--bx-night);
--bs-btn-disabled-bg: var(--bx-ok);
--bs-btn-disabled-border-color: var(--bx-ok);
--bs-btn-disabled-color: var(--bx-night);
}
.btn-warning {
--bs-btn-bg: var(--bx-warn);
--bs-btn-border-color: var(--bx-warn);
--bs-btn-color: var(--bx-night);
--bs-btn-hover-bg: var(--bx-warn);
--bs-btn-hover-border-color: var(--bx-warn);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-warn);
--bs-btn-active-border-color: var(--bx-warn);
--bs-btn-active-color: var(--bx-night);
--bs-btn-disabled-bg: var(--bx-warn);
--bs-btn-disabled-border-color: var(--bx-warn);
--bs-btn-disabled-color: var(--bx-night);
}
.btn-secondary {
--bs-btn-bg: var(--bx-night-2);
--bs-btn-border-color: var(--bx-line-strong);
--bs-btn-color: var(--bx-text);
--bs-btn-hover-bg: var(--bx-night-2);
--bs-btn-hover-border-color: var(--bx-violet);
--bs-btn-hover-color: var(--bx-text);
--bs-btn-active-bg: var(--bx-night-2);
--bs-btn-active-border-color: var(--bx-violet);
--bs-btn-active-color: var(--bx-text);
}
/* Outline variants keep the surface and tint the ink + border; the hover fill
then flips the label to --bx-night on the same both-themes reasoning. */
.btn-outline-primary {
--bs-btn-color: var(--bx-violet);
--bs-btn-border-color: var(--bx-violet);
--bs-btn-hover-bg: var(--bx-violet);
--bs-btn-hover-border-color: var(--bx-violet);
--bs-btn-hover-color: #FFFFFF;
--bs-btn-active-bg: var(--bx-violet);
--bs-btn-active-border-color: var(--bx-violet);
--bs-btn-active-color: #FFFFFF;
}
.btn-outline-secondary {
--bs-btn-color: var(--bx-text-soft);
--bs-btn-border-color: var(--bx-line-strong);
--bs-btn-hover-bg: var(--bx-night-2);
--bs-btn-hover-border-color: var(--bx-violet);
--bs-btn-hover-color: var(--bx-text);
--bs-btn-active-bg: var(--bx-night-2);
--bs-btn-active-border-color: var(--bx-violet);
--bs-btn-active-color: var(--bx-text);
}
.btn-outline-success {
--bs-btn-color: var(--bx-ok);
--bs-btn-border-color: var(--bx-ok);
--bs-btn-hover-bg: var(--bx-ok);
--bs-btn-hover-border-color: var(--bx-ok);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-ok);
--bs-btn-active-border-color: var(--bx-ok);
--bs-btn-active-color: var(--bx-night);
}
.btn-outline-warning {
--bs-btn-color: var(--bx-warn);
--bs-btn-border-color: var(--bx-warn);
--bs-btn-hover-bg: var(--bx-warn);
--bs-btn-hover-border-color: var(--bx-warn);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-warn);
--bs-btn-active-border-color: var(--bx-warn);
--bs-btn-active-color: var(--bx-night);
}
.btn-outline-info {
--bs-btn-color: var(--bx-info);
--bs-btn-border-color: var(--bx-info);
--bs-btn-hover-bg: var(--bx-info);
--bs-btn-hover-border-color: var(--bx-info);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-info);
--bs-btn-active-border-color: var(--bx-info);
--bs-btn-active-color: var(--bx-night);
}
.btn-outline-danger {
--bs-btn-color: var(--bx-danger);
--bs-btn-border-color: var(--bx-danger);
--bs-btn-hover-color: var(--bx-night);
--bs-btn-hover-bg: var(--bx-danger);
--bs-btn-hover-border-color: var(--bx-danger);
--bs-btn-active-color: var(--bx-night);
--bs-btn-active-bg: var(--bx-danger);
--bs-btn-active-border-color: var(--bx-danger);
--bs-btn-focus-shadow-rgb: var(--bx-danger-rgb);
--bs-btn-disabled-color: var(--bx-danger);
--bs-btn-disabled-border-color: var(--bx-danger);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--bx-font-body);
font-size: var(--bx-body);
line-height: 1.6;
color: var(--bx-text);
background-color: var(--bx-abyss);
background-image:
radial-gradient(900px 600px at 12% -8%, rgba(109,74,255,.16), transparent 60%),
radial-gradient(800px 600px at 92% 4%, rgba(232,79,156,.12), transparent 60%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--bx-font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--bx-text); margin: 0 0 .5em; }
h2 { font-size: var(--bx-h2); }
h3 { font-size: var(--bx-h3); font-weight: 700; }
p { margin: 0 0 1rem; color: var(--bx-text-soft); }
a { color: var(--bx-violet); text-decoration: none; }
a:hover { color: var(--bx-pink); }
/* Blazor's focuses the page heading after every
navigation (a11y: announce the new page). Without this, the UA default focus
ring draws a box around every page title — the demo host's stylesheet has had
this rule from the start; the hub never got it. */
h1:focus { outline: none; }
/* Screenshot frame used by the home showcase cards. */
.bx-shot { display: block; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--bx-line); }
.bx-shot img { display: block; width: 100%; height: auto; }
/* ===== Layout helpers ===== */
.bx-container { width: 100%; max-width: var(--bx-maxw); margin: 0 auto; padding: 0 1.5rem; }
.bx-section { padding: 5.5rem 0; position: relative; }
.bx-section--tight { padding: 3.5rem 0; }
/* ===== Eyebrow kicker (mono) ===== */
.bx-eyebrow {
font-family: var(--bx-font-mono);
font-size: .8rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--bx-purple);
display: inline-flex;
align-items: center;
gap: .6rem;
margin: 0 0 1rem;
}
.bx-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--bx-grad); }
/* ===== Gradient text-clip ===== */
.bx-grad-text {
background: var(--bx-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ===== Hairline divider (logo underline motif) ===== */
.bx-hairline { height: 3px; width: 56px; border-radius: 3px; background: var(--bx-grad); border: 0; margin: 1.25rem 0; }
.bx-hairline--center { margin-left: auto; margin-right: auto; }
/* ===== Glass card ===== */
.bx-card {
position: relative;
background: color-mix(in oklab, var(--bx-night) 86%, transparent);
border-radius: var(--bx-radius);
padding: 1.75rem;
box-shadow: var(--bx-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
}
/* 1px gradient border via mask */
.bx-card::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--bx-grad);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .55;
pointer-events: none;
}
.bx-card:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow-glow); }
.bx-card:hover::before { opacity: .9; }
.bx-card__icon {
width: 46px; height: 46px; border-radius: 12px;
display: grid; place-items: center; font-size: 1.4rem;
background: var(--bx-grad-soft);
border: 1px solid var(--bx-line-strong);
margin-bottom: 1rem;
}
.bx-card h3 { margin-bottom: .35rem; }
.bx-card p { margin: 0; font-size: .96rem; }
.bx-card__link { display: inline-block; margin-top: 1rem; font-weight: 700; font-family: var(--bx-font-display); }
.bx-grid { display: grid; gap: 1.25rem; }
.bx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bx-grid--6 { grid-template-columns: repeat(6, 1fr); }
/* ===== Homepage tech cards (Web Power Tools — one product, six techs) ===== */
.bx-tech-card {
display: flex; flex-direction: column; align-items: center; gap: .75rem;
padding: 1.5rem 1rem; text-align: center;
color: var(--bx-text); font-family: var(--bx-font-display); font-weight: 700; font-size: .92rem;
}
.bx-tech-card:hover { color: var(--bx-text); }
.bx-tech-card img { width: 48px; height: 48px; object-fit: contain; }
/* ===== Buttons (styled anchors — mirrors the Server's nav/CTA pattern) ===== */
.bx-btn {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--bx-font-display); font-weight: 700; font-size: .98rem;
padding: .8rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
color: #fff; background: var(--bx-grad);
box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.bx-btn:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; box-shadow: 0 16px 38px -10px var(--bx-glow-pink); }
.bx-btn--ghost {
background: transparent; color: var(--bx-text);
box-shadow: inset 0 0 0 1px var(--bx-line-strong);
}
.bx-btn--ghost:hover { color: var(--bx-text); box-shadow: inset 0 0 0 1px var(--bx-purple); background: var(--bx-grad-soft); }
/* ===== Stats row ===== */
.bx-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.bx-stat__num { font-family: var(--bx-font-mono); font-size: 2.2rem; font-weight: 700; color: var(--bx-text); }
.bx-stat__label { font-size: .85rem; color: var(--bx-mist); letter-spacing: .04em; }
/* ===== HERO ===== */
.bx-hero { position: relative; padding: 7rem 0 6rem; overflow: hidden; text-align: center; }
.bx-hero__bloom {
position: absolute; inset: -30% -10% auto -10%; height: 120%;
background:
radial-gradient(closest-side at 32% 30%, var(--bx-glow-violet), transparent 70%),
radial-gradient(closest-side at 70% 40%, var(--bx-glow-pink), transparent 70%);
filter: blur(40px); opacity: .9; z-index: 0;
animation: bxBloom 14s ease-in-out infinite alternate;
pointer-events: none;
}
.bx-hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.bx-hero__mark { height: 184px; width: auto; margin: 0 auto 1.5rem; display: block; filter: drop-shadow(0 8px 28px var(--bx-glow-violet)); }
.bx-hero h1 { font-size: var(--bx-hero); margin-bottom: 1rem; }
.bx-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--bx-text-soft); max-width: 620px; margin: 0 auto 2rem; }
.bx-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ===== Wide feature band ===== */
.bx-band {
display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
padding: 2.25rem; border-radius: var(--bx-radius);
background: linear-gradient(120deg, color-mix(in oklab, var(--bx-night) 88%, transparent), color-mix(in oklab, var(--bx-night-2) 88%, transparent));
box-shadow: var(--bx-shadow);
position: relative; overflow: hidden;
}
.bx-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--bx-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.bx-band__mark { height: 64px; width: auto; flex: none; }
.bx-band__body { flex: 1 1 320px; }
/* ===== Footer CTA band ===== */
.bx-cta { text-align: center; padding: 4.5rem 1.5rem; }
.bx-cta h2 { font-size: var(--bx-h1); margin-bottom: 1.25rem; }
/* ===== Authenticated app surface (behind login) ===== */
.bx-app { padding: 2.5rem 0 4rem; }
.bx-page-head { margin-bottom: 2rem; }
.bx-page-head h1 { font-size: var(--bx-h1); }
.bx-feature-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.bx-feature-list li { padding: .35rem 0 .35rem 1.5rem; position: relative; color: var(--bx-text-soft); }
.bx-feature-list li::before { content: "▲"; position: absolute; left: 0; font-size: .7rem; color: var(--bx-purple); top: .55rem; }
/* ===== Form fields (shared by Settings + auth) ===== */
.bx-field { display: block; margin-bottom: 1rem; }
.bx-field > span { display: block; font-size: .85rem; color: var(--bx-mist); margin-bottom: .35rem; font-family: var(--bx-font-mono); letter-spacing: .04em; }
.bx-input {
width: 100%; padding: .7rem .9rem; border-radius: var(--bx-radius-sm);
background: color-mix(in oklab, var(--bx-night-2) 80%, transparent);
border: 1px solid var(--bx-line-strong); color: var(--bx-text); font-family: var(--bx-font-body); font-size: 1rem;
}
.bx-input:focus { outline: none; border-color: var(--bx-violet); box-shadow: 0 0 0 3px var(--bx-glow-violet); }
.bx-check { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 1rem; color: var(--bx-text-soft); }
.bx-field + .text-danger { display: block; margin: -0.75rem 0 1rem; font-size: .85rem; }
/* ===== Auth (Login / Register) — branded, static-SSR forms ===== */
.bx-auth-wrapper { display: flex; justify-content: center; padding: 4.5rem 1.5rem; min-height: 70vh; }
.bx-auth-card { width: 100%; max-width: 420px; padding: 2.5rem; text-align: left; }
.bx-auth-logo { display: inline-block; margin-bottom: 1.5rem; }
.bx-auth-logo img { height: 36px; width: auto; }
.bx-auth-logo .logo-light { display: none; }
:root[data-theme="light"] .bx-auth-logo .logo-dark { display: none; }
:root[data-theme="light"] .bx-auth-logo .logo-light { display: inline; }
.bx-auth-title { font-size: 1.8rem; margin-bottom: .25rem; }
.bx-auth-sub { color: var(--bx-text-soft); margin-bottom: 1.5rem; }
.bx-auth-foot { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; font-size: .9rem; color: var(--bx-mist); }
.bx-auth-foot a { font-weight: 600; }
.bx-auth-wordmark { font-family: var(--bx-font-display, inherit); font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; }
.bx-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--bx-mist); font-size: .85rem; }
.bx-auth-divider::before, .bx-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--bx-border, rgba(255,255,255,.12)); }
/* ===== Page-load staggered reveal ===== */
.bx-reveal { opacity: 0; transform: translateY(18px); animation: bxReveal .7s cubic-bezier(.2,.7,.2,1) forwards; }
.bx-reveal.d1 { animation-delay: .08s; }
.bx-reveal.d2 { animation-delay: .18s; }
.bx-reveal.d3 { animation-delay: .30s; }
.bx-reveal.d4 { animation-delay: .42s; }
@keyframes bxBloom {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(3%, 4%) scale(1.08); }
}
@keyframes bxReveal { to { opacity: 1; transform: none; } }
/* ===== Responsive ===== */
@media (max-width: 880px) {
.bx-grid--3, .bx-grid--2 { grid-template-columns: 1fr; }
.bx-grid--6 { grid-template-columns: repeat(3, 1fr); }
.bx-section { padding: 4rem 0; }
.bx-hero { padding: 5rem 0 4.5rem; }
.bx-hero__mark { height: 132px; width: auto; }
}
@media (max-width: 560px) {
.bx-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
.bx-hero__bloom { animation: none; }
.bx-reveal { animation: none; opacity: 1; transform: none; }
.bx-card { transition: none; }
}
/* ===== Blazor error UI (keep usable, themed) ===== */
#blazor-error-ui {
color: #fff; background: #2A1450; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: .8rem 1.25rem; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }
/* ===== Product card mark (ProductCardGrid) ===== */
.bx-product-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bx-grad-soft, rgba(120,90,255,.18)); font-weight: 800; font-size: .7rem; letter-spacing: .05em; }
/* ===== MainLayout co-brand mark (span, or an back to the tech demo) ===== */
.bx-nav__cobrand { display: inline-flex; align-items: center; gap: .5rem; margin-left: .6rem; color: var(--bx-text-soft); text-decoration: none; }
a.bx-nav__cobrand:hover { color: var(--bx-text); }
a.bx-nav__cobrand:hover img { filter: drop-shadow(0 0 6px var(--bx-glow-violet)); }
/* Matches the Isabyte mark beside it (.bx-nav__logo--dark, 40px) — the tech
badge used to render at half that and read as a stray favicon. */
.bx-nav__cobrand img { height: 40px; width: auto; }
.bx-nav__cobrand--button { cursor: pointer; border: none; background: none; }
.bx-nav__cobrand--button:hover img { filter: drop-shadow(0 0 6px var(--bx-glow-violet)); }
/* ===== Product switcher modal (CSS-only: the layout is static SSR) ===== */
.bx-switcher__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bx-switcher { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 1.25rem; }
.bx-switcher__toggle:checked ~ .bx-switcher { display: flex; }
.bx-switcher__scrim { position: absolute; inset: 0; margin: 0; cursor: default; background: color-mix(in oklab, var(--bx-night) 78%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bx-switcher__panel {
position: relative;
z-index: 1;
width: min(940px, 100%);
max-height: min(86vh, 900px);
overflow-y: auto; /* long lists stay reachable on short screens */
-webkit-overflow-scrolling: touch;
padding: 1.75rem;
border-radius: 18px;
background: var(--bx-night);
border: 1px solid var(--bx-line);
box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.bx-switcher__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bx-switcher__title { margin: .15rem 0 0; font-size: 1.5rem; }
.bx-switcher__lead { color: var(--bx-mist); margin: .5rem 0 1.25rem; max-width: 54ch; }
.bx-switcher__close { cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--bx-mist); padding: .1rem .5rem; border-radius: 8px; }
.bx-switcher__close:hover { color: var(--bx-text); background: color-mix(in oklab, var(--bx-text) 10%, transparent); }
.bx-product-grid--compact .isabyte-product-card { min-height: 118px; padding: 1.1rem 1.2rem; }
.bx-product-grid--compact .isabyte-product-card__wordmark { max-height: 42px; }
/* The nav mark is a switcher trigger now, not a link home. */
.bx-nav__brand--button { cursor: pointer; }
.bx-nav__brand--button:hover img { filter: drop-shadow(0 0 8px var(--bx-glow-violet)); }
@media (max-width: 575.98px) {
.bx-switcher__panel { padding: 1.25rem; border-radius: 14px; }
.bx-nav__cobrand img { height: 32px; }
}
.bx-nav__cobrand-x { color: var(--bx-mist); font-size: .9rem; }
.bx-nav__cobrand-name { font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
/* ===== Username dropdown (details/summary) =====
Two renderings of the same identity: the dropdown on pointer-sized screens,
a straight link to My Account on phones (the dropdown could overflow the
viewport with no scroll of its own). Exactly one is ever displayed. */
.bx-nav__user-link { display: none; }
@media (max-width: 991.98px) {
.bx-nav__user-link { display: inline-flex; align-items: center; }
.bx-nav__userdrop { display: none; }
}
.bx-nav__userdrop { position: relative; }
.bx-nav__userdrop > summary { list-style: none; cursor: pointer; }
.bx-nav__userdrop > summary::-webkit-details-marker { display: none; }
.bx-nav__userdrop[open] > summary { color: var(--bx-text); }
.bx-nav__userdrop-menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 180px; display: flex; flex-direction: column; gap: .25rem; padding: .6rem; border-radius: 12px; background: var(--bx-night); box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); z-index: 50; }
.bx-nav__userdrop-menu a { padding: .45rem .6rem; border-radius: 8px; }
.bx-nav__userdrop-menu a:hover { background: var(--bx-grad-soft, rgba(120,90,255,.15)); }
.bx-nav__userdrop-menu form button { width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 8px; background: none; border: none; color: inherit; cursor: pointer; }
.bx-nav__userdrop-menu form button:hover { background: var(--bx-grad-soft, rgba(120,90,255,.15)); }
:root[data-theme="light"] .bx-nav__userdrop-menu { background: var(--bx-night); border-color: var(--bx-line-strong); box-shadow: 0 18px 40px -12px rgba(60,40,120,.18); }
/* ---- Dropdown group headers ("Moderation" / "Administration") + a thin
separator before the sign-out form (UserMenu.razor) ---- */
.bx-nav__userdrop-h {
display: block; padding: .5rem .6rem 0;
font-family: var(--bx-font-mono); font-size: .68rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--bx-mist);
}
.bx-nav__userdrop-divider { height: 1px; margin: .4rem .2rem; border: none; background: var(--bx-line); }
/* ============================================================================
===== Account & Admin area (ported from BPT, re-themed Aurora) =====
Structure ported from Isabyte.PowerTools.Blazor.Server/wwwroot/app.css; colors,
shadows, borders and fonts swapped to Aurora tokens so the /Account and
/Account/Admin pages match the /tools glass look (.bx-card). All colors are
variable-based so the light theme ( :root[data-theme="light"] ) adapts.
========================================================================== */
/* ---- Page header band (MyAccount, AdminDashboard, ManageLayout, all subpages) ---- */
.isabyte-page-header {
position: relative;
padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1rem, 3vw, 2rem);
margin-bottom: 0;
min-width: 0;
color: var(--bx-text);
background:
radial-gradient(600px 300px at 18% 0%, var(--bx-glow-violet), transparent 70%),
radial-gradient(520px 280px at 85% 10%, var(--bx-glow-pink), transparent 70%),
color-mix(in oklab, var(--bx-night) 55%, transparent);
border-bottom: 1px solid var(--bx-line);
}
.isabyte-page-header h1 {
font-size: clamp(1.45rem, 4.5vw, 2.2rem);
margin-bottom: 0.5rem;
overflow-wrap: anywhere;
word-break: break-word;
}
.isabyte-page-header p {
font-size: clamp(0.95rem, 2.4vw, 1.05rem);
color: var(--bx-text-soft);
max-width: 700px;
margin-bottom: 0;
overflow-wrap: anywhere;
}
/* ---- Content wrappers ---- */
.isabyte-content-section {
max-width: 960px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
.isabyte-account-content {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
}
.isabyte-breadcrumb {
padding: 0.75rem 2rem;
font-size: 0.875rem;
font-family: var(--bx-font-mono);
color: var(--bx-mist);
background: color-mix(in oklab, var(--bx-night) 45%, transparent);
border-bottom: 1px solid var(--bx-line);
}
.isabyte-breadcrumb a { color: var(--bx-violet); text-decoration: none; }
.isabyte-breadcrumb a:hover { color: var(--bx-pink); text-decoration: underline; }
.isabyte-account-section-heading {
font-family: var(--bx-font-mono);
font-size: 0.85rem;
font-weight: 500;
color: var(--bx-purple);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 0.9rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--bx-line-strong);
}
/* ---- Shared themed panel: replaces the literal
"background:#fff; border:1px solid #e8e4ef; border-radius:10px" recipe
that was hardcoded across Account/Admin pages (light-only). ---- */
.isabyte-panel {
background: var(--bx-night);
border: 1px solid var(--bx-line);
border-radius: 10px;
}
/* ---- Admin dashboard category groups (Support / Customers & billing /
Content & releases): each group is a distinct bordered panel with a
gradient accent-bar heading, so the categories read as separate blocks
instead of one continuous card wall. Tokens only — light + dark. ---- */
.bx-admin-group {
background: color-mix(in oklab, var(--bx-night) 55%, transparent);
border: 1px solid var(--bx-line);
border-radius: 12px;
padding: 1.4rem 1.5rem 1.5rem;
}
.bx-admin-group + .bx-admin-group {
margin-top: 1.75rem;
}
.bx-admin-group-heading {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--bx-font-mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--bx-purple);
text-transform: uppercase;
letter-spacing: 0.16em;
margin: 0 0 1.1rem;
}
.bx-admin-group-heading::before {
content: "";
flex: 0 0 auto;
width: 4px;
height: 1.05rem;
border-radius: 2px;
background: var(--bx-grad);
}
/* ---- Dashboard cards (glass, matches .bx-card incl. hover lift) ---- */
.isabyte-account-card {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
height: 100%;
padding: 1.25rem 1.5rem;
background: color-mix(in oklab, var(--bx-night) 86%, transparent);
border-radius: var(--bx-radius-sm);
box-shadow: var(--bx-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* 1px gradient border via mask (same recipe as .bx-card) */
.isabyte-account-card::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--bx-grad);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .45;
pointer-events: none;
}
.isabyte-account-card:hover { transform: translateY(-4px); box-shadow: var(--bx-shadow-glow); }
.isabyte-account-card:hover::before { opacity: .9; }
.isabyte-account-card .card-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--bx-grad-soft); /* fallback; pages usually set inline bg */
border: 1px solid var(--bx-line);
}
/* ---- Product cards (My Account) ----
A modifier on .isabyte-account-card: the brand WORDMARK is the card's title,
so the box stacks instead of running icon-beside-text, and it carries the
product's own accent. The dark ground is deliberate — every /img/brands
wordmark is drawn for the demo sites' dark nav bars, and two of them
(React, Native) are near-white, so a light wash would erase them. */
.isabyte-product-card {
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
min-height: 148px;
padding: 1.35rem 1.5rem;
/* --bx-ink, NOT --bx-night: night flips to white in the light theme, which
would wash out the near-white React/Native marks — the very failure this
card set out to fix. ink is defined once and stays dark in both themes,
so a product tile looks the same wherever it renders. */
background:
radial-gradient(130% 120% at 0% 0%,
color-mix(in oklab, var(--product-accent) 42%, transparent),
transparent 62%),
var(--bx-ink);
}
/* Tint the shared 1px gradient border with the product accent. */
.isabyte-product-card::before {
background: linear-gradient(135deg,
color-mix(in oklab, var(--product-accent) 85%, transparent),
transparent 70%);
opacity: .55;
}
.isabyte-product-card:hover::before { opacity: 1; }
.isabyte-product-card__wordmark {
/* max-height rather than height: the marks run from 2:1 to nearly 4:1, so
a fixed height sizes them by the wrong axis and the widest (React Native)
is the one that would reach the card edge first. Constraining BOTH axes
lets each mark grow until whichever limit it hits — big on the roomy
cards, still fully inside the narrow ones. */
max-height: 52px;
width: auto;
height: auto;
max-width: 100%;
object-fit: contain;
}
.isabyte-product-card__fallback {
font-family: var(--bx-font-display);
font-size: 1rem;
font-weight: 700;
}
.isabyte-product-card__go {
font-size: 0.85rem;
font-weight: 600;
color: color-mix(in oklab, var(--product-accent) 75%, white); /* readable on ink in both themes */
}
.isabyte-product-card__fallback { color: #ECE9F6; }
/* Isabyte's own row: the provider, not a seventh framework — full width, the
brand gradient instead of a single tech accent, and a role line the tech
tiles don't carry. */
.isabyte-product-card--hub {
min-height: 0;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: .35rem 1.25rem;
background:
radial-gradient(120% 160% at 0% 0%, rgba(109,74,255,.45), transparent 60%),
radial-gradient(120% 160% at 100% 100%, rgba(232,79,156,.35), transparent 60%),
var(--bx-ink);
}
.isabyte-product-card--hub::before { background: var(--bx-grad); opacity: .6; }
.isabyte-product-card--hub:hover::before { opacity: 1; }
.isabyte-product-card--hub .isabyte-product-card__wordmark { max-height: 44px; }
.isabyte-product-card__role { font-size: .85rem; color: #B9B2D6; flex: 1 1 12rem; }
.isabyte-product-card--hub .isabyte-product-card__go { color: #ECE9F6; margin-left: auto; }
.isabyte-account-card h5 {
font-family: var(--bx-font-display);
font-size: 0.95rem;
font-weight: 700;
color: var(--bx-text);
margin: 0 0 0.15rem;
}
.isabyte-account-card p {
font-size: 0.82rem;
color: var(--bx-mist);
margin: 0;
}
/* ---- Manage layout sidebar nav ---- */
.isabyte-manage-nav {
list-style: none;
padding: 0;
margin: 0;
}
.isabyte-manage-nav li { margin-bottom: 0.25rem; }
.isabyte-manage-nav .nav-link {
display: block;
padding: 0.5rem 1rem;
font-size: 0.9rem;
color: var(--bx-text-soft);
border-radius: 8px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.isabyte-manage-nav .nav-link:hover {
background: var(--bx-grad-soft);
color: var(--bx-text);
}
.isabyte-manage-nav .nav-link.active {
background: var(--bx-grad-soft);
color: var(--bx-text);
font-weight: 700;
box-shadow: inset 0 0 0 1px var(--bx-line-strong);
}
/* ---- Badges (Pricing "Most popular", admin statuses) ---- */
.isabyte-badge {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
padding: 0.25rem 0.65rem;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--bx-night-2);
color: var(--bx-text-soft);
border: 1px solid var(--bx-line);
}
.isabyte-badge--popular { background: var(--bx-grad); color: #fff; border-color: transparent; }
/* ---- Feature icon chip (Pricing benefits) ---- */
.isabyte-feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--bx-grad);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
/* ---- Buttons ---- */
.isabyte-btn-accent {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.75rem 1.75rem;
background: var(--bx-grad);
color: #fff !important;
font-family: var(--bx-font-display);
font-weight: 700;
font-size: 0.98rem;
border: none;
border-radius: 999px;
text-decoration: none !important;
cursor: pointer;
box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.isabyte-btn-accent:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 16px 38px -10px var(--bx-glow-pink);
color: #fff !important;
}
.isabyte-btn-brand {
display: block;
width: 100%;
padding: 0.8rem 1.5rem;
background: var(--bx-grad);
color: #fff !important;
font-family: var(--bx-font-display);
font-weight: 700;
font-size: 1rem;
border: none;
border-radius: 999px;
cursor: pointer;
text-align: center;
text-decoration: none !important;
box-shadow: 0 12px 30px -10px var(--bx-glow-violet);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.isabyte-btn-brand:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow: 0 16px 38px -10px var(--bx-glow-pink);
color: #fff !important;
}
/* ---- Auth-style glass card (ExternalLogin, JoinTeam) ---- */
.isabyte-auth-wrapper {
min-height: calc(100vh - 3.5rem);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
/* no opaque background: the Aurora body canvas shows through */
}
.isabyte-auth-card {
position: relative;
width: 100%;
max-width: 440px;
padding: 2.5rem 2rem;
background: color-mix(in oklab, var(--bx-night) 86%, transparent);
border-radius: var(--bx-radius);
box-shadow: var(--bx-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
}
.isabyte-auth-card::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--bx-grad);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .55;
pointer-events: none;
}
.isabyte-auth-card.wide { max-width: 600px; }
.isabyte-auth-brand { text-align: center; margin-bottom: 2rem; }
.isabyte-auth-brand img { height: 40px; margin-bottom: 0.75rem; }
.isabyte-auth-brand h1 {
font-size: 1.5rem;
color: var(--bx-text);
margin-bottom: 0.25rem;
}
.isabyte-auth-brand p { font-size: 0.9rem; color: var(--bx-mist); margin: 0; }
.isabyte-auth-card .form-floating { margin-bottom: 1rem; }
.isabyte-auth-card .form-control:focus {
border-color: var(--bx-violet);
box-shadow: 0 0 0 3px var(--bx-glow-violet);
}
.isabyte-auth-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
color: var(--bx-mist);
}
.isabyte-auth-footer a { color: var(--bx-violet); font-weight: 600; }
.isabyte-auth-footer a:hover { color: var(--bx-pink); }
/* ---- License / deployment key display (Licenses, MyTeam) ---- */
.isabyte-key-display {
display: flex;
gap: 0.5rem;
max-width: 720px;
align-items: stretch;
}
.isabyte-key-input {
flex: 1;
min-width: 0;
font-family: var(--bx-font-mono);
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 0.65rem 0.9rem;
background: color-mix(in oklab, var(--bx-night-2) 80%, transparent);
border: 1px solid var(--bx-line-strong);
border-radius: var(--bx-radius-sm);
color: var(--bx-text);
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.isabyte-key-input:focus {
outline: none;
border-color: var(--bx-violet);
box-shadow: 0 0 0 3px var(--bx-glow-violet);
background: var(--bx-night-2);
}
.isabyte-key-input::selection {
background: var(--bx-violet);
color: #fff;
}
.isabyte-key-copy-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0 1.1rem;
background: var(--bx-grad);
color: #fff;
font-family: var(--bx-font-display);
font-weight: 700;
font-size: 0.875rem;
border: none;
border-radius: var(--bx-radius-sm);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, background 0.25s;
white-space: nowrap;
min-width: 104px;
justify-content: center;
}
.isabyte-key-copy-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px -8px var(--bx-glow-violet);
color: #fff;
}
.isabyte-key-copy-btn:active { transform: translateY(0); }
.isabyte-key-copy-btn .isabyte-key-icon { display: inline-flex; line-height: 0; }
.isabyte-key-copy-btn.copied {
/* success state: no Aurora token for green; fixed gradient reads on both themes */
background: linear-gradient(135deg, #2E7D32, #4CAF50);
}
.isabyte-key-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
background: transparent;
color: var(--bx-text);
font-weight: 600;
font-size: 0.85rem;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow: inset 0 0 0 1px var(--bx-line-strong);
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.isabyte-key-toggle:hover {
background: var(--bx-grad-soft);
box-shadow: inset 0 0 0 1px var(--bx-purple);
}
.isabyte-key-toggle .isabyte-key-icon { display: inline-flex; line-height: 0; }
/* ---- Legacy Bootstrap 3/4 compat (Identity-template leftovers) ---- */
.font-weight-bold { font-weight: 700; } /* BS4 name (BS5: fw-bold) */
.input-group-append { display: flex; } /* BS4 wrapper in Email.razor */