/*
* Tigera Labs theme — training-portal surface stylesheet.
*
* Surface-specific styles only. Shared design tokens, dark-mode
* overrides, @font-face declarations, and the Slack support widget
* live in tigera-theme-core.css and are loaded alongside this file
* via a in training-portal.html.
*/
/* ---------- self-hosted fonts ----------
Bundled in the same theme Secret. The portal's CSP is
`font-src 'self'; style-src 'self'`, so external Google Fonts are
blocked — these have to be served from the same origin (the portal
serves theme assets at /static/workshops/theme/).
DM Sans + JetBrains Mono are variable fonts: a single .woff2 covers
every weight we use (400 / 500 / 700 / 900 for DM Sans; 400 / 500
for JetBrains Mono). */
/*
* training-portal.css — Tigera Labs theme (corporate / light)
*
* Mirrors the production look at tigera.io and docs.tigera.io:
* - Light-mode dominant: white pages, alternating #F5F5F5 sections,
* dark charcoal footer.
* - DM Sans typography (400 / 500 / 700 / 900). JetBrains Mono for code.
* - Orange gradient (#FAA51B -> #E76D2B) reserved for primary CTAs and
* the badge — never as a large background fill.
* - 5–8px corner radius, soft drop shadows, no 1px borders that fight
* the editorial calm.
* - Body text Tigera Black (#231F1F); links cerulean blue (#1084BD).
*/
/* ===========================================================================
Dark-mode override
---------------------------------------------------------------------------
Activated by setting `data-theme="dark"` on (handled by
training-portal.js — toggle button + localStorage + prefers-color-scheme).
The orange brand gradient stays the same in both modes; only the
neutral surfaces and the muted blue link colour shift.
=========================================================================== */
/* ---------- base ---------- */
html, body {
background-color: var(--surface) !important;
color: var(--on-surface);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Sticky-footer flex layout: navbar -> main -> footer, where main grows
to fill the remaining viewport so the footer always lands at (or below)
the bottom edge — never floats halfway up the page on short content. */
html { height: 100%; }
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
.navbar.navbar-fixed-top,
.navbar.bg-dark { flex-shrink: 0; }
.tigera-footer { flex-shrink: 0; margin-top: auto; }
::selection {
background-color: var(--tigera-orange-end);
color: #fff;
}
a {
color: var(--link-blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- top navbar ---------- */
.navbar.navbar-fixed-top,
.navbar.bg-dark {
background: linear-gradient(180deg, var(--surface-dark-start) 0%, var(--surface-dark-end) 100%) !important;
min-height: 72px;
padding: 12px 32px !important;
border-bottom: none !important;
font-family: var(--font-sans);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.navbar .text-white {
color: var(--on-dark) !important;
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.01em;
font-size: 16px;
}
/* Logo + wordmark spacing: `gap` covers the case where the wordmark is
nested inside .navbar-brand; `margin-right` covers the sibling case. */
.navbar-brand {
display: inline-flex !important;
align-items: center;
gap: 14px;
margin-right: 14px !important;
}
.portal-logo.navbar-brand,
.navbar-brand img {
/* Replace Educates' upstream logo at parse-time with the Calico badge.
`content: url(...)` substitutes the rendered image without changing
the ![]()
element, so it applies before paint — no flash like the
JS-driven swap caused. */
content: url("/static/workshops/theme/calico-badge.svg") !important;
height: 55px !important;
width: auto !important;
filter:
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
drop-shadow(0 0 6px rgba(231, 109, 43, 0.35));
transition: transform 220ms ease, filter 220ms ease;
}
.navbar-brand:hover img,
.navbar-brand:focus img,
.portal-logo.navbar-brand:hover,
.portal-logo.navbar-brand:focus {
transform: scale(1.08) rotate(-3deg);
filter:
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
drop-shadow(0 0 12px rgba(231, 109, 43, 0.6));
}
/* ===========================================================================
Login / registration page — framed card with orange accent stripe,
sat next to a hero panel. JS wraps `.login` / `.register` in a 2-col
grid (.tigera-auth-grid) and prepends the hero column.
=========================================================================== */
/* The two-column wrapper injected by training-portal.js. The parent
jumbotron (with body.tigera-labs-auth) vertically centers this grid,
so we keep the grid's own padding minimal. */
.tigera-auth-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
gap: 56px;
max-width: 1180px;
width: 100%;
margin: 0 auto;
padding: 0;
align-items: center;
}
/* Single column when the viewport can't hold the 2-up comfortably */
@media (max-width: 1024px) {
.tigera-auth-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 480px;
gap: 24px;
}
.tigera-auth-hero {
text-align: center;
}
.tigera-auth-hero h1 {
margin-left: auto;
margin-right: auto;
}
.tigera-auth-hero p {
margin-left: auto;
margin-right: auto;
}
.tigera-auth-hero .features {
display: inline-grid;
text-align: left;
}
.tigera-auth-hero::before { display: none; } /* drop the badge backdrop on mobile */
}
@media (max-height: 720px) {
/* Short viewports (laptops at default zoom, large fonts, etc.):
trim the hero so the card + footer all fit. */
.tigera-auth-hero p { margin-bottom: 12px; }
.tigera-auth-hero .features { margin-top: 12px; gap: 6px; }
.tigera-auth-hero h1 { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 10px; }
.login, .register { padding: 28px 28px 24px; }
}
/* ----- Left column: hero panel ----- */
.tigera-auth-hero {
position: relative;
font-family: var(--font-sans);
color: var(--on-surface);
}
.tigera-auth-hero::before {
/* Soft Calico badge backdrop — adds visual depth without competing
with the card. Positioned bottom-left of the hero column, faded out. */
content: '';
position: absolute;
inset: auto auto -40px -40px;
width: 320px;
height: 320px;
background: url("/static/workshops/theme/calico-badge.svg") no-repeat center / contain;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.tigera-auth-hero > * { position: relative; z-index: 1; }
.tigera-auth-hero .stamp {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--tigera-orange-end);
margin: 0 0 16px;
}
.tigera-auth-hero h1 {
font-family: var(--font-sans);
font-weight: 900;
letter-spacing: -0.02em;
font-size: clamp(36px, 4.6vw, 50px);
line-height: 1.1;
color: var(--on-surface);
margin: 0 0 16px;
max-width: 18ch;
}
.tigera-auth-hero h1 .accent {
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tigera-auth-hero p {
font-size: 17px;
line-height: 1.6;
color: var(--on-surface-muted);
max-width: 48ch;
margin: 0 0 24px;
}
.tigera-auth-hero .features {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: grid;
gap: 10px;
}
.tigera-auth-hero .features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: var(--on-surface);
line-height: 1.4;
}
.tigera-auth-hero .features li::before {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ----- Right column: the auth card (`.login` or `.register`) ----- */
.login,
.register {
position: relative;
background-color: var(--surface-card);
color: var(--on-surface);
border: 1px solid var(--surface-mercury);
border-radius: var(--radius-card);
padding: 40px 36px 32px;
box-shadow: var(--shadow-soft);
overflow: hidden;
}
/* 4px orange-gradient cap on top of the card */
.login::before,
.register::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%);
}
.login h1,
.register h1 {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.01em;
font-size: 24px;
line-height: 1.25;
color: var(--on-surface);
margin: 0 0 6px;
}
/* Subhead — "Don't have an account, register first" */
.login p,
.register p {
margin: 0 0 24px;
}
.login .font-italic,
.register .font-italic {
font-size: 14px;
color: var(--on-surface-muted);
font-style: normal;
line-height: 1.5;
}
.login .font-italic a,
.register .font-italic a {
color: var(--tigera-orange-end) !important;
font-weight: 700;
text-decoration: none;
}
.login .font-italic a:hover,
.register .font-italic a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Form layout inside the card */
.login form,
.register form {
display: flex;
flex-direction: column;
gap: 14px;
}
.login form .mb-3,
.register form .mb-3 {
margin-bottom: 0 !important; /* Bootstrap default; we manage gaps via flex */
}
.login form .form-text,
.register form .form-text {
font-size: 13px;
color: var(--on-surface-muted);
line-height: 1.5;
}
.login form .form-text ul,
.register form .form-text ul {
margin: 6px 0 0;
padding-left: 18px;
}
/* Submit button — full-width inside the card */
.login form button[type="submit"],
.register form button[type="submit"] {
width: 100%;
padding: 12px 22px !important;
margin-top: 8px;
font-size: 15px !important;
letter-spacing: 0.02em !important;
text-transform: none;
}
/* Reset the jumbotron padding for auth pages — the grid handles spacing */
.jumbotron > .container > .login,
.jumbotron > .container > .register {
/* When NOT wrapped (JS not yet run) keep card framing */
max-width: 480px;
margin: 0 auto;
}
/* ---------- form fields ---------- */
label,
.form-label {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--on-surface);
letter-spacing: 0;
text-transform: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
.form-control,
.textinput,
.passwordinput,
.emailinput {
background-color: var(--surface-card) !important;
color: var(--on-surface) !important;
border: 1px solid var(--surface-mercury) !important;
border-radius: var(--radius) !important;
padding: 10px 14px !important;
font-family: var(--font-sans);
font-size: 15px;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
input.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.textinput:focus,
.passwordinput:focus,
.emailinput:focus {
border-color: var(--tigera-orange-end) !important;
box-shadow: 0 0 0 3px rgba(231, 109, 43, 0.15) !important;
outline: none !important;
}
.form-text {
color: var(--on-surface-muted) !important;
font-size: 13px;
}
/* ---------- buttons ---------- */
.btn {
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.02em;
border-radius: var(--radius) !important;
padding: 10px 24px !important;
border: none;
transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.btn-primary {
--bs-btn-bg: transparent;
--bs-btn-hover-bg: transparent;
--bs-btn-active-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-border-color: transparent;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
background-color: var(--tigera-orange-end) !important;
background-image: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
color: #fff !important;
border: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--tigera-orange-end) !important;
background-image: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
color: #fff !important;
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(231, 109, 43, 0.25) !important;
}
.btn-secondary,
.btn-default {
background-color: transparent !important;
border: 2px solid var(--on-surface) !important;
color: var(--on-surface) !important;
padding: 8px 22px !important;
}
.btn-secondary:hover {
background-color: var(--on-surface) !important;
color: var(--surface) !important;
}
.btn-link {
background: transparent;
color: var(--link-blue) !important;
}
/* ===========================================================================
Session-launching loader page
=========================================================================== */
#startup-cover-panel {
background-color: var(--surface) !important;
background-image:
radial-gradient(ellipse at 50% 35%, rgba(231, 109, 43, 0.08) 0%, rgba(251, 247, 241, 0) 60%),
url("/static/workshops/theme/calico-badge.svg") !important;
background-repeat: no-repeat !important;
background-position: center, calc(100% - 25px) calc(100% - 25px) !important;
background-size: auto, 75px !important;
}
#startup-cover-panel-message {
color: var(--on-surface) !important;
font-family: var(--font-sans);
}
#startup-cover-panel-message h5 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--on-surface-muted);
margin: 0;
}
#startup-cover-panel-message h5::before {
content: 'Starting your lab session';
display: block;
color: var(--on-surface);
font-weight: 700;
font-size: 22px;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
#startup-progress-panel {
background-color: rgba(35, 31, 31, 0.06);
}
#startup-progress-bar {
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
}
.lds-roller div:after {
background: var(--tigera-orange-end) !important;
}
#startup-cover-panel-dismiss.btn-close,
#startup-cover-panel-dismiss.btn-close-white {
filter: invert(0.2);
opacity: 0.5;
}
#startup-cover-panel-dismiss.btn-close:hover {
opacity: 1;
}
/* ===========================================================================
Catalog page
=========================================================================== */
.jumbotron,
.jumbotron-fluid {
background-color: var(--surface) !important; /* cream — keeps body coherent */
color: var(--on-surface) !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
padding: 48px 32px !important;
/* Grow to fill the viewport between navbar and footer. No fixed
min-height — it leaks past the viewport on short content and pushes
the footer below the fold. Flex-grow does the right thing instead. */
flex: 1 0 auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start; /* default: top-align for catalog */
}
/* Auth pages get vertical centering — the form is small so it benefits
from sitting in the optical center of the available space. The body
class is added by training-portal.js when on /accounts/{login,register}/. */
body.tigera-labs-auth .jumbotron,
body.tigera-labs-auth .jumbotron-fluid {
justify-content: center;
padding: 32px !important; /* tighter — content is small */
}
.jumbotron > .container,
.jumbotron-fluid > .container {
max-width: 1280px;
}
/* Hero banner (injected by training-portal.js)
---------------------------------------------------------------------------
Layout: a single top row of metadata bookends (stamp on the left, lab
counter on the right), separated by a thin hairline; then the big
headline; then the tagline. Both metadata items sit at the same visual
level — no more flex-wrap drop on narrow viewports. */
.tigera-hero-banner {
max-width: 1280px;
margin: 0 auto 48px;
}
.tigera-hero-banner .meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--surface-mercury);
}
html[data-theme="dark"] .tigera-hero-banner .meta-row {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.tigera-hero-banner .stamp {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--tigera-orange-end);
text-transform: uppercase;
margin: 0;
}
.tigera-hero-banner .meta {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--on-surface-muted);
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.tigera-hero-banner .meta strong {
color: var(--on-surface);
font-weight: 700;
font-size: 14px;
}
.tigera-hero-banner h1 {
font-family: var(--font-sans);
font-weight: 900;
letter-spacing: -0.02em;
font-size: clamp(36px, 5vw, 50px);
line-height: 1.1;
text-transform: none;
color: var(--on-surface);
margin: 0 0 16px;
max-width: 22ch;
}
.tigera-hero-banner h1 .accent {
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tigera-hero-banner p {
color: var(--on-surface-muted);
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.6;
max-width: 60ch;
margin: 0;
}
/* /workshops/access/ — invite-only gate notice. Reuses .tigera-hero-banner
for typography; only the actions row is unique to this surface. */
.tigera-access-notice {
margin-bottom: 32px;
}
.tigera-access-notice .tigera-access-actions {
margin-top: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tigera-access-notice .tigera-access-actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
font-size: 15px;
font-weight: 700;
}
.tigera-access-notice .tigera-access-slack-icon {
flex-shrink: 0;
display: block;
}
/* Workshop cards */
.card {
background-color: var(--surface-card) !important;
color: var(--on-surface) !important;
border: 1px solid var(--surface-mercury) !important;
border-radius: var(--radius-card) !important;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.card:hover {
border-color: rgba(231, 109, 43, 0.4) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.card .card-body {
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.card-title {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
color: var(--on-surface) !important;
font-size: 22px !important;
line-height: 1.3 !important;
margin: 0 !important;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.card-text {
color: var(--on-surface-muted) !important;
font-family: var(--font-sans) !important;
font-size: 16px !important;
line-height: 1.6 !important;
flex-grow: 1;
}
/* Status dots */
.green-light, .orange-light, .red-light {
height: 12px !important;
width: 12px !important;
margin-top: 8px !important;
flex-shrink: 0;
border-radius: 50%;
display: inline-block;
}
.green-light { background-color: #10b981 !important; } /* available */
.orange-light { background-color: var(--tigera-orange-end) !important; box-shadow: 0 0 8px rgba(231, 109, 43, 0.4); } /* limited */
.red-light { background-color: #ef4444 !important; } /* full */
/* CTA — orange-gradient pill, locked through every state */
.btn.start-workshop,
.btn-primary.start-workshop,
.btn.btn-primary.start-workshop {
--bs-btn-bg: transparent;
--bs-btn-hover-bg: transparent;
--bs-btn-active-bg: transparent;
--bs-btn-disabled-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-border-color: transparent;
--bs-btn-active-border-color: transparent;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
text-transform: none;
padding: 12px 22px !important;
margin-top: auto;
border: none !important;
color: #fff !important;
border-radius: var(--radius) !important;
background-color: var(--tigera-orange-end) !important;
background-image: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}
.btn.start-workshop:hover,
.btn-primary.start-workshop:hover,
.btn.btn-primary.start-workshop:hover,
.card:hover .btn.start-workshop,
.card:hover .btn-primary.start-workshop {
background-color: var(--tigera-orange-end) !important;
background-image: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
color: #fff !important;
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(231, 109, 43, 0.30) !important;
}
.btn.start-workshop:active,
.btn-primary.start-workshop:active,
.btn.start-workshop:focus,
.btn-primary.start-workshop:focus {
background-color: var(--tigera-orange-end) !important;
background-image: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%) !important;
color: #fff !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(231, 109, 43, 0.30) !important;
}
/* ===========================================================================
Notification alerts
---------------------------------------------------------------------------
Card-style banner with a left accent bar, a type-specific SVG icon
(info / success / warning / danger) drawn via CSS mask, a coloured
bold title, and a properly-aligned close button that stays visible
in both light and dark modes. Replaces Bootstrap's flat alert + its
near-invisible default close-button SVG.
=========================================================================== */
.alert,
#notification.alert {
/* Bootstrap 5 alerts source colours from CSS variables — we clobber
the variables AND the resolved properties so cascade order doesn't
matter. */
--bs-alert-bg: var(--surface-card) !important;
--bs-alert-color: var(--on-surface) !important;
--bs-alert-border-color: transparent !important;
--bs-alert-link-color: var(--tigera-orange-end) !important;
/* Per-type accent + icon — overridden by the modifier classes below. */
--alert-color: var(--tigera-orange-end);
--alert-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
position: relative;
display: flex;
align-items: center;
background-color: var(--surface-card) !important;
color: var(--on-surface) !important;
border: 1px solid var(--surface-mercury) !important;
border-left: 4px solid var(--alert-color) !important;
border-radius: var(--radius-card) !important;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
padding: 16px 56px 16px 60px !important; /* room for icon + close */
margin: 0 0 24px !important;
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.alert.alert-success {
--alert-color: #10b981;
--alert-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
.alert.alert-warning {
--alert-color: #f59e0b;
--alert-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.alert.alert-danger {
--alert-color: #ef4444;
--alert-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E");
}
.alert.alert-info {
--alert-color: #1084BD;
}
/* Icon — 22×22 monochrome glyph coloured via background-color (mask only
reads the SVG's alpha channel, so the stroke colour inside the SVG is
irrelevant). */
.alert::before {
content: '';
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 22px;
height: 22px;
background-color: var(--alert-color);
-webkit-mask: var(--alert-icon-svg) center / contain no-repeat;
mask: var(--alert-icon-svg) center / contain no-repeat;
flex-shrink: 0;
}
/* Title (the in the markup) takes the type colour for emphasis. */
.alert strong {
color: var(--alert-color) !important;
font-family: var(--font-sans);
font-weight: 700;
margin-right: 4px;
}
.alert a { color: var(--tigera-orange-end) !important; }
/* Close button — drop Bootstrap's hardcoded black-SVG and replace with a
mask-painted × that follows currentColor (so it adapts to dark mode).
Properly aligned: absolute right, vertically centred, 32×32 hit
target with a hover pill. */
.alert .btn-close,
.alert .btn-close.btn-close-white {
--bs-btn-close-bg: none;
position: absolute !important;
top: 50% !important;
right: 12px !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 50% !important;
background: transparent !important;
background-image: none !important;
filter: none !important;
opacity: 1 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--on-surface-muted) !important;
transition: background-color 120ms ease, color 120ms ease;
}
.alert .btn-close::before {
content: '';
display: block;
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.alert .btn-close:hover {
background-color: var(--surface-alt) !important;
color: var(--on-surface) !important;
}
.alert .btn-close:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(231, 109, 43, 0.35) !important;
}
/* Dark-mode tweaks: dim the hairline border, deepen the shadow, change
the close-button hover bg to a soft white tint instead of the cream
alt surface (which would feel oddly bright on a dark card). */
html[data-theme="dark"] .alert,
html[data-theme="dark"] #notification.alert {
border-color: rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .alert .btn-close:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Page-level notification banner — float as a toast in the top-right
corner so it reads as elevated above the catalog grid instead of
pushing the page content down. Only #notification floats; generic
.alert blocks (e.g. embedded in workshop content) stay inline. */
#notification.alert {
position: fixed !important;
top: 16px;
right: 16px;
left: auto;
z-index: 1080;
width: auto;
max-width: min(420px, calc(100vw - 32px));
margin: 0 !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18),
0 4px 12px rgba(0, 0, 0, 0.10);
}
html[data-theme="dark"] #notification.alert {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.40);
}
/* ---------- footer ---------- */
.tigera-footer {
background: linear-gradient(180deg, var(--surface-dark-start) 0%, var(--surface-dark-end) 100%);
padding: 32px 48px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--on-dark-muted);
border-top: none;
}
.tigera-footer a {
color: var(--on-dark-muted);
text-decoration: none;
margin-left: 24px;
font-weight: 500;
}
.tigera-footer a:hover {
color: var(--on-dark);
background: linear-gradient(135deg, var(--tigera-orange-start) 0%, var(--tigera-orange-end) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---------- registration page (django form) ---------- */
.requiredField .asteriskField {
color: var(--tigera-orange-end);
margin-left: 2px;
}
.font-italic {
font-style: normal !important;
color: var(--on-surface-muted);
font-size: 14px;
}
.font-italic a {
color: var(--tigera-orange-end) !important;
font-weight: 700;
}
/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(35, 31, 31, 0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(35, 31, 31, 0.32); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }
/* ===========================================================================
Theme toggle button
---------------------------------------------------------------------------
Injected into the navbar (right side) by training-portal.js. A 36px
round pill with a sun/moon glyph that flips when dark mode is on.
=========================================================================== */
#tigera-theme-toggle {
margin-left: auto;
margin-right: 16px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--on-dark);
border-radius: 999px;
cursor: pointer;
padding: 0;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
#tigera-theme-toggle:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.24);
transform: scale(1.05);
}
#tigera-theme-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(231, 109, 43, 0.45);
}
/* ===========================================================================
Dark-mode tweaks for surfaces that use literal hex (not variables)
=========================================================================== */
html[data-theme="dark"] .form-text {
color: var(--on-surface-muted) !important;
}
/* Footer becomes a subtle lift over the dark body (already a dark gradient
in light mode, but in dark mode body is darker than footer, so it ends up
reading as a lighter footer band — which is fine). Strengthen the divider. */
html[data-theme="dark"] .tigera-footer {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* The cream "reward" panel inside the workshop-finished dialog is a literal
#F4EFE6; under dark mode it reads as a bright slab. Recolour it. */
html[data-theme="dark"] .tigera-finished .reward {
background-color: #232328 !important;
}
/* Card hairline borders need to fade in dark mode so the white card
doesn't feel framed against a dark page. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .login,
html[data-theme="dark"] .register {
border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Inputs in dark mode — make focus glow visible against the dark body */
html[data-theme="dark"] input.form-control:focus,
html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] .textinput:focus,
html[data-theme="dark"] .passwordinput:focus,
html[data-theme="dark"] .emailinput:focus {
box-shadow: 0 0 0 3px rgba(231, 109, 43, 0.30) !important;
}
/* Hero-banner backdrop badge: bump its opacity for dark mode (it was 5%
on cream, near-invisible on dark). */
html[data-theme="dark"] .tigera-auth-hero::before {
opacity: 0.10;
}