/* ============================================================
AITYKE COMPONENTS — ported from template-20260419.html
Buttons, forms, badges, cards, KPIs, tables, tabs, header,
footer, modal, drawer, popover, toast, empty/skeleton.
These class names are intentionally identical to the SPA
so any HTML built for the design system "just works" when
pasted into a WordPress page.
============================================================ */
/* ============================================================
AITYKE CONTAINER & PAGE SHELL
============================================================ */
.aityke-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }
.aityke-page-main { display: block; padding: var(--sp-6) 0; min-width: 0; }
.aityke-page-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--sp-6);
align-items: start;
}
.aityke-page-grid > .aityke-content { min-width: 0; }
.aityke-page-grid > .aityke-aside { min-width: 0; }
@media (max-width: 1024px) {
.aityke-page-grid { grid-template-columns: 1fr; }
}
/* ============================================================
TYPOGRAPHY
============================================================ */
.type-display { font-size: var(--type-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--color-text); }
.type-h1 { font-size: var(--type-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-text); }
.type-h2 { font-size: var(--type-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--color-text); }
.type-h3 { font-size: var(--type-h3); font-weight: 700; line-height: 1.35; color: var(--color-text); }
.type-h4 { font-size: var(--type-h4); font-weight: 600; line-height: 1.5; color: var(--color-text-2); }
.type-body-lg { font-size: var(--type-body-lg); font-weight: 400; line-height: 1.7; color: var(--color-text-2); }
.type-body { font-size: var(--type-body); font-weight: 400; line-height: 1.6; color: var(--color-text-2); }
.type-body-sm { font-size: var(--type-body-sm); font-weight: 400; line-height: 1.55; color: var(--color-muted); }
.type-caption { font-size: var(--type-caption); font-weight: 600; line-height: 1.5; color: var(--color-subtle); letter-spacing: 0.025em; }
.type-mono { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-2); }
.type-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); }
.type-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-700); }
.type-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-600); display: inline-flex; align-items: center; gap: 6px; }
.type-eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.accent-text { color: var(--color-primary); }
.accent-gold { color: var(--gold-400); }
/* ============================================================
BUTTONS — density-aware
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 600; font-size: 14px; line-height: 1;
border: none; border-radius: var(--radius-md);
cursor: pointer; white-space: nowrap; text-decoration: none;
padding: 0 18px; height: 40px;
position: relative; overflow: hidden;
letter-spacing: 0.01em;
transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
[data-density="compact"] .btn { height: 34px; padding: 0 14px; font-size: 13px; }
.btn:active { transform: translateY(1px) !important; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn .material-symbols-outlined { font-size: 18px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 16px; border-radius: var(--radius-lg); font-weight: 700; }
.btn-xl { height: 56px; padding: 0 32px; font-size: 17px; border-radius: var(--radius-lg); font-weight: 700; }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }
.btn-icon.btn-xs { width: 26px; }
.btn-primary {
background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
color: #fff;
box-shadow: 0 2px 6px rgba(212,132,90,0.30);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--orange-600), var(--orange-700)); box-shadow: var(--shadow-orange-lg); transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-dark { background: var(--dark-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-dark:hover { background: var(--dark-700); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn-outline { background: transparent; color: var(--color-text-2); border: 1.5px solid var(--color-border); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--orange-50); border-color: var(--orange-300); color: var(--orange-700); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--color-text-2); box-shadow: none; }
.btn-ghost:hover { background: var(--orange-50); color: var(--orange-700); text-decoration: none; }
.btn-danger { background: var(--red-600); color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,0.25); }
.btn-danger:hover { background: var(--red-700); box-shadow: 0 4px 14px rgba(220,38,38,0.30); color: #fff; }
.btn-success { background: var(--green-600); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,0.25); }
.btn-success:hover { background: var(--green-700); color: #fff; }
.btn-gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); color: #fff; box-shadow: 0 2px 8px rgba(201,168,124,0.35); }
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); transform: translateY(-1px); color: #fff; }
.btn-soft-orange { background: var(--orange-100); color: var(--orange-700); border: 1px solid var(--orange-200); }
.btn-soft-orange:hover { background: var(--orange-200); }
/* ============================================================
FORM CONTROLS
============================================================ */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.form-hint { font-size: 12px; color: var(--color-subtle); margin-top: 3px; }
.form-error-msg { font-size: 12px; color: var(--red-600); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 11px 14px;
font-size: 14px;
font-family: var(--font-sans);
background: var(--surface-1);
color: var(--color-text);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
[data-density="compact"] .form-input,
[data-density="compact"] .form-textarea,
[data-density="compact"] .form-select { padding: 8px 12px; font-size: 13px; }
.form-input:focus, .form-textarea:focus, .form-select:focus {
outline: none;
border-color: var(--orange-500);
box-shadow: var(--ring-primary);
}
.form-input:disabled, .form-textarea:disabled, .form-select:disabled { background: var(--surface-sunken); color: var(--color-subtle); cursor: not-allowed; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-subtle); }
.form-textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 36px;
}
.checkbox, .radio {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--color-text-2); cursor: pointer;
}
.checkbox input, .radio input {
width: 16px; height: 16px;
accent-color: var(--orange-500);
cursor: pointer;
}
/* ============================================================
BADGES, TAGS, CHIPS
============================================================ */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700;
padding: 3px 9px;
border-radius: var(--radius-full);
letter-spacing: 0.025em;
background: var(--surface-3); color: var(--color-text-2);
}
.badge-orange { background: var(--orange-100); color: var(--orange-700); }
.badge-gold { background: #fef9f0; color: var(--gold-600); }
.badge-success { background: var(--green-50); color: var(--green-700); }
.badge-warning { background: var(--amber-50); color: var(--amber-600); }
.badge-danger { background: var(--red-50); color: var(--red-700); }
.badge-info { background: var(--blue-50); color: var(--blue-600); }
.badge-dark { background: var(--dark-600); color: #fff; }
.tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 12px; font-weight: 600;
border: 1px solid var(--color-border);
background: var(--surface-1);
color: var(--color-text-2);
}
.tag-orange { border-color: var(--orange-300); background: var(--orange-50); color: var(--orange-700); }
.tag-dark { background: var(--dark-600); border-color: var(--dark-700); color: #fff; }
/* ============================================================
CARDS
============================================================ */
.card {
background: var(--surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--elev-2);
overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.card:hover { box-shadow: var(--elev-3); }
.card-elevated { box-shadow: var(--elev-3); }
.card-flat { box-shadow: none; }
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
gap: 12px;
}
.card-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.card-body { padding: 20px; }
.card-footer {
padding: 12px 20px;
border-top: 1px solid var(--color-border);
background: var(--surface-2);
display: flex; gap: 8px; justify-content: flex-end;
}
/* ============================================================
KPI / STATS
============================================================ */
.kpi {
background: var(--surface-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 18px 20px;
display: flex; flex-direction: column; gap: 10px;
transition: box-shadow var(--t-base), transform var(--t-base);
position: relative; overflow: hidden;
}
.kpi:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.kpi-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-icon {
width: 40px; height: 40px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
background: var(--orange-100); color: var(--orange-700);
flex-shrink: 0;
}
.kpi-icon .material-symbols-outlined { font-size: 22px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
/* ============================================================
TABLES
============================================================ */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table thead th {
text-align: left;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-muted);
background: var(--surface-sunken);
padding: 10px 14px;
border-bottom: 1px solid var(--color-border);
}
.table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-light);
color: var(--color-text);
}
.table tbody tr:hover { background: var(--surface-3); }
.table tbody tr:last-child td { border-bottom: none; }
/* ============================================================
TABS
============================================================ */
.tabs-segmented {
display: inline-flex; padding: 3px;
background: var(--surface-sunken);
border-radius: var(--radius-md);
}
.tabs-segmented .tab {
padding: 6px 14px; font-size: 13px; font-weight: 600;
background: transparent; border: none; cursor: pointer;
color: var(--color-text-2);
border-radius: var(--radius-sm);
transition: background var(--t-fast), color var(--t-fast);
}
.tabs-segmented .tab.active { background: var(--surface-1); color: var(--color-text); box-shadow: var(--elev-1); }
.tabs-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs-pills .tab {
padding: 7px 14px; font-size: 13px; font-weight: 600;
background: var(--surface-1); border: 1px solid var(--color-border);
border-radius: var(--radius-full);
color: var(--color-text-2); cursor: pointer;
transition: all var(--t-fast);
}
.tabs-pills .tab.active { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
/* ============================================================
AITYKE LOGO (used by footer.php — header.php no longer renders
its own bar, see b2-overrides.css block (w) for the single
B2-bar header restyle).
============================================================ */
.aityke-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.aityke-logo:hover { color: #fff; text-decoration: none; }
.aityke-logo-mark { display: inline-flex; flex-shrink: 0; }
.aityke-logo-img { height: 36px; width: auto; display: block; }
.aityke-logo-text { font-size: 16px; letter-spacing: 0.04em; }
/* Defensive: if any plugin or future template re-introduces