/*
* telme.css — telMAX Stained Glass Design System v3
*
* UI-r2.md compliant. Token names now mirror telmax.com (telmax-style.css)
* exactly so a future build-step token extractor can sync them automatically.
*
* Typography: proxima-nova (Typekit) replaces Figtree; quincy-cf replaces Lora.
* Add one tag to every template BEFORE any :
*
*
*
* Served at /assets/telme.css by the auth service.
*/
/* Typekit font definitions — proxima-nova (400/500/600/700) + quincy-cf (700i) */
@import url("https://use.typekit.net/bib5xtg.css");
/* ══════════════════════════════════════════════════════════════════════════
DESIGN TOKENS — primary names match telmax.com :root (telmax-style.css)
══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Brand palette (canonical names, synced from telmax.com) ──────────── */
--deep-green-color: #1b3d38;
--limewire-color: #eef985;
--electric-limewire-color: #e7f94b;
--mauve-it-color: #b7b5f5;
--grey-matter-color: #353531;
--light-speed-color: #f9f9eb;
--translucent-grey-matter-color: rgba(53, 53, 49, 0.8);
--canada-red-color: #cd2225;
/* ── Gradient tokens (matching telmax.com) ───────────────────────────── */
--limewire-gradient: linear-gradient(to right, var(--limewire-color), var(--mauve-it-color));
--reverse-limewire-gradient: linear-gradient(to right, var(--mauve-it-color), var(--limewire-color));
--limewire-gradient-alt: linear-gradient(to right, var(--limewire-color) 35%, var(--mauve-it-color) 65%);
/* ── Typography (proxima-nova = sans, quincy-cf = serif/display) ─────── */
--sans-serif: "proxima-nova", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--serif: "quincy-cf", Georgia, "Times New Roman", serif;
--mono: "SF Mono", "Fira Code", "Cascadia Code", "Courier New", monospace;
/* Legacy aliases — kept for backward compat with module HTML */
--font-sans: var(--sans-serif);
--font-serif: var(--serif);
--font-mono: var(--mono);
/* ── Shape ────────────────────────────────────────────────────────────── */
--border-radius: 20px; /* pill / card radius (matches telmax.com) */
--content-padding: 24px;
--button-size: 44px;
--input-size: 44px;
--logo-width: 176px;
--nav-height: 64px; /* global-nav height; module-header stacks below */
/* Legacy radius tokens used in module-specific CSS */
--radius-sm: 3px;
--radius: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: var(--border-radius);
/* ── Spacing scale ────────────────────────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* ── Layout ──────────────────────────────────────────────────────────── */
--layout-padding: 22px; /* overridden to 60px at ≥1024px */
--layout-gap-v: 2rem;
--layout-gap-h: 2rem;
/* ── Motion ──────────────────────────────────────────────────────────── */
--ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
--carousel-slide-easing: cubic-bezier(.645, .045, .355, 1);
/* ── Elevation ───────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(0,0,0,.4);
--shadow: 0 4px 12px rgba(0,0,0,.5);
--shadow-lg: 0 8px 24px rgba(0,0,0,.6);
/* ══════════════════════════════════════════════════════════════════════
BACKWARD-COMPAT ALIASES — old --telmax-* names point to new tokens.
Existing module HTML continues to work without modification.
══════════════════════════════════════════════════════════════════════ */
--telmax-deep-green: var(--deep-green-color);
--telmax-grey-matter: var(--grey-matter-color);
--telmax-limewire: var(--limewire-color);
--telmax-mauve: var(--mauve-it-color);
--telmax-light-speed: var(--light-speed-color);
--telmax-canada-red: var(--canada-red-color);
--telmax-gradient: var(--limewire-gradient);
/* ── Semantic aliases ─────────────────────────────────────────────────── */
--bg: var(--deep-green-color);
--surface: rgba(255,255,255,0.04);
--surface-2: var(--grey-matter-color);
--surface-3: rgba(255,255,255,0.07);
--border: rgba(249,249,235,0.12);
--border-dim: rgba(249,249,235,0.06);
--text: var(--light-speed-color);
--text-muted: rgba(249,249,235,0.55);
--text-dim: rgba(249,249,235,0.35);
--accent: var(--limewire-color);
--accent-dim: rgba(238,249,133,0.7);
--accent-hover: #dde97a;
--accent-bg: rgba(238,249,133,0.1);
--accent-2: var(--mauve-it-color);
--danger: var(--canada-red-color);
--danger-bg: rgba(205,34,37,0.12);
--danger-border: rgba(205,34,37,0.45);
--danger-hover: #e03033;
--ok: var(--limewire-color);
--ok-bg: rgba(238,249,133,0.1);
--ok-border: rgba(238,249,133,0.35);
--warn: #e8c850;
--warn-bg: rgba(232,200,80,0.1);
--warn-border: rgba(232,200,80,0.35);
--neutral: rgba(249,249,235,0.4);
--neutral-bg: rgba(249,249,235,0.06);
/* Font size scale */
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 13px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
/* ── Z-index scale — use these in every module; never raw numbers ─── */
--z-toast: 200; /* floating toasts / inline banners */
--z-dropdown: 400; /* dropdowns, tooltips */
/* global-nav sits at 1000 (defined in .global-nav) */
--z-overlay: 1100; /* modal backdrops (above nav) */
--z-modal: 1200; /* modal content boxes */
--z-modal-top: 1300; /* modal stacked on another modal */
}
@media (min-width: 1024px) {
:root {
--layout-padding: 3.75rem; /* 60px */
--layout-gap-v: 3.75rem;
--layout-gap-h: 6.25rem;
}
}
/* ══════════════════════════════════════════════════════════════════════════
RESET & BASE
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* Shared animation — modules use this; do not redefine in module CSS */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
body {
margin: 0;
font-family: var(--sans-serif);
font-size: var(--font-size-base);
background: var(--deep-green-color);
color: var(--light-speed-color);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Display headings — quincy-cf italic for editorial impact */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans-serif); line-height: 1.15; margin: 0; }
h1 { font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.3px; }
h2 { font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase;
letter-spacing: 1.2px; color: var(--text-muted); }
h3 { font-size: var(--font-size-md); font-weight: 600; }
/* Quincy-CF — reserved for display/brand moments */
.display, .heading-display,
.brand-copy, .brand-wordmark em, .brand-wordmark i {
font-family: var(--serif);
font-style: italic;
font-weight: 700;
}
.mono, code, pre { font-family: var(--mono); font-size: var(--font-size-xs); }
a {
color: var(--mauve-it-color);
text-decoration: none;
transition: color .15s;
}
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; line-height: 1.6; }
p:last-child { margin-bottom: 0; }
/* ══════════════════════════════════════════════════════════════════════════
LAYOUT WRAPPER (mirrors telmax.com .layout-wrapper)
══════════════════════════════════════════════════════════════════════════ */
.layout-wrapper {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--layout-padding);
display: flex;
align-items: center;
gap: var(--layout-gap-h);
}
/* ══════════════════════════════════════════════════════════════════════════
GLOBAL NAV — mirrors telmax.com .global-nav structure
UI-r2.md §3.1: persistent top bar identical to primary domain header
══════════════════════════════════════════════════════════════════════════ */
.global-nav {
position: sticky;
z-index: 1000;
top: 0;
width: 100%;
height: var(--nav-height);
background-color: var(--background, var(--deep-green-color));
color: var(--color, var(--light-speed-color));
border-bottom: 1px solid rgba(238,249,133,0.12);
font-family: var(--sans-serif);
font-size: 1rem;
}
.global-nav .layout-wrapper {
height: 100%;
justify-content: space-between;
gap: 0;
}
/* Brand / home link */
.global-nav .home-link {
display: flex;
align-items: center;
text-decoration: none;
height: 100%;
flex-shrink: 0;
}
.global-nav .home-link:hover { text-decoration: none; }
/* telME wordmark: "tel" light-speed, "ME" limewire — proxima-nova 700 */
.global-nav .brand-wordmark-inline {
font-family: var(--sans-serif);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--light-speed-color);
}
.global-nav .brand-wordmark-inline .brand-me { color: var(--limewire-color); }
/* Nav container — pushes to the right side */
.global-nav .nav-container {
display: flex;
align-items: center;
height: 100%;
margin-left: auto;
}
/* Nav list — horizontal row of items */
.global-nav .nav-list {
display: flex;
flex-direction: row;
align-items: center;
gap: 2em;
list-style: none;
margin: 0;
padding: 0;
}
/* Defensive: prevent module-scoped writing-mode from bleeding into global nav items */
.global-nav .nav-item {
writing-mode: horizontal-tb;
}
/* Nav links */
.global-nav .nav-link {
font-family: var(--sans-serif);
font-weight: 500;
font-size: 0.9375rem;
color: var(--light-speed-color);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.global-nav .nav-link:hover { color: var(--limewire-color); text-decoration: none; }
/* Module breadcrumb item */
.global-nav .breadcrumb-item .nav-link {
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.4em;
pointer-events: none;
}
.global-nav .breadcrumb-item .nav-link::before {
content: '›';
color: rgba(249,249,235,0.25);
font-size: 1.1em;
}
/* User label */
.global-nav .user-label {
color: var(--text-muted);
font-size: 0.875rem;
pointer-events: none;
}
/* Sign-out button (pill) */
.global-nav .sign-out-btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
border-radius: 16px;
border: 1px solid rgba(249,249,235,0.22);
background: transparent;
color: rgba(249,249,235,0.55);
font-family: var(--sans-serif);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
text-decoration: none;
}
.global-nav .sign-out-btn:hover {
color: var(--canada-red-color);
border-color: rgba(205,34,37,0.5);
background: rgba(205,34,37,0.06);
text-decoration: none;
}
/* Legacy alias — old class names still work */
.telme-header {
background: var(--deep-green-color);
border-bottom: 1px solid rgba(238,249,133,0.15);
padding: 0 var(--sp-5);
display: flex;
align-items: center;
gap: var(--sp-4);
height: var(--nav-height);
position: sticky;
top: 0;
z-index: 1000;
font-family: var(--sans-serif);
}
.telme-header .telme-brand {
font-family: var(--sans-serif);
font-size: var(--font-size-lg);
font-weight: 700;
text-decoration: none;
letter-spacing: -0.3px;
white-space: nowrap;
}
.telme-header .telme-brand:hover { text-decoration: none; }
.telme-brand .brand-tel { color: var(--light-speed-color); }
.telme-brand .brand-me { color: var(--limewire-color); }
.telme-header .telme-breadcrumb {
color: var(--text-muted);
font-size: var(--font-size-base);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.telme-header .telme-breadcrumb::before {
content: '›';
color: rgba(249,249,235,0.25);
}
.telme-header .telme-user {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--font-size-sm);
color: var(--text-muted);
white-space: nowrap;
}
.telme-header .telme-user a {
color: rgba(249,249,235,0.55);
border: 1px solid rgba(249,249,235,0.2);
border-radius: 16px;
padding: 3px 10px;
font-size: var(--font-size-xs);
transition: border-color .15s, color .15s;
}
.telme-header .telme-user a:hover {
color: var(--canada-red-color);
border-color: var(--canada-red-color);
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════════════════
THEME CONTEXT CLASSES — set --background / --color locals.
Used on sections and components to flip the palette cleanly.
══════════════════════════════════════════════════════════════════════════ */
.theme-deep-green { --background: var(--deep-green-color); --color: var(--light-speed-color);
background-color: var(--deep-green-color); color: var(--light-speed-color); }
.theme-grey-matter { --background: var(--grey-matter-color); --color: var(--light-speed-color);
background-color: var(--grey-matter-color); color: var(--light-speed-color); }
.theme-limewire { --background: var(--limewire-color); --color: var(--deep-green-color);
background-color: var(--limewire-color); color: var(--deep-green-color); }
.theme-mauve-it { --background: var(--mauve-it-color); --color: var(--deep-green-color);
background-color: var(--mauve-it-color); color: var(--deep-green-color); }
.theme-light-speed { --background: var(--light-speed-color); --color: var(--deep-green-color);
background-color: var(--light-speed-color); color: var(--deep-green-color); }
/* ══════════════════════════════════════════════════════════════════════════
CONNECTION LINE — decorative
(from telmax.com)
══════════════════════════════════════════════════════════════════════════ */
.connection-line, hr {
border: none;
border-top: 1px solid rgba(249,249,235,0.15);
margin: var(--sp-6) 0;
}
.theme-limewire .connection-line,
.theme-light-speed .connection-line { border-top-color: rgba(27,61,56,0.2); }
.theme-mauve-it .connection-line { border-top-color: rgba(27,61,56,0.2); }
/* ══════════════════════════════════════════════════════════════════════════
MODULE HEADER STRIP (40px, sits below 64px global-nav)
══════════════════════════════════════════════════════════════════════════ */
.module-header {
background: var(--grey-matter-color);
border-bottom: 1px solid rgba(238,249,133,0.1);
height: 40px;
display: flex;
align-items: center;
padding: 0 var(--sp-5);
gap: var(--sp-4);
position: sticky;
top: var(--nav-height);
z-index: 99;
font-family: var(--sans-serif);
}
.module-header-name {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--light-speed-color);
white-space: nowrap;
}
.module-header-tabs {
display: flex;
align-self: stretch;
}
/* ── Tab / panel navigation ──────────────────────────────────────────────── */
.tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
padding: 0 var(--sp-3);
cursor: pointer;
font-family: var(--sans-serif);
font-size: var(--font-size-sm);
font-weight: 500;
height: 100%;
white-space: nowrap;
transition: color .12s, border-color .12s;
}
.tab.active {
color: var(--limewire-color);
border-bottom-color: var(--limewire-color);
}
.tab:hover:not(.active) { color: var(--light-speed-color); }
/* ══════════════════════════════════════════════════════════════════════════
BUTTONS — pill-shaped to match telmax.com (--border-radius: 20px)
══════════════════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
height: var(--button-size);
padding: 0 20px;
font-family: var(--sans-serif);
font-size: var(--font-size-md);
font-weight: 600;
border-radius: calc(var(--button-size) / 2);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
text-decoration: none;
}
.btn:hover {
background: rgba(249,249,235,0.06);
border-color: rgba(249,249,235,0.25);
color: var(--light-speed-color);
text-decoration: none;
}
/* Primary — limewire fill */
.btn-primary {
background: var(--limewire-color);
border-color: var(--limewire-color);
color: var(--deep-green-color);
font-weight: 700;
}
.btn-primary:hover {
background: var(--electric-limewire-color);
border-color: var(--electric-limewire-color);
color: var(--deep-green-color);
}
/* Secondary — outlined limewire */
.btn-secondary {
background: transparent;
border: 1px solid rgba(238,249,133,0.4);
color: var(--limewire-color);
}
.btn-secondary:hover { background: rgba(238,249,133,0.08); color: var(--limewire-color); }
/* Danger — canada-red */
.btn-danger {
background: transparent;
border-color: var(--danger-border);
color: var(--danger);
}
.btn-danger:hover {
background: var(--danger-bg);
border-color: var(--danger);
}
/* Info / link style — mauve */
.btn-info {
background: transparent;
border: 1px solid rgba(183,181,245,0.4);
color: var(--mauve-it-color);
}
.btn-info:hover { background: rgba(183,181,245,0.08); }
/* Small variant */
.btn-sm {
height: 32px;
padding: 0 12px;
font-size: var(--font-size-sm);
border-radius: 16px;
}
/* ══════════════════════════════════════════════════════════════════════════
BADGES / STATUS PILLS
══════════════════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
border-radius: 10px;
font-family: var(--sans-serif);
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
}
.badge-green { background: rgba(238,249,133,0.15); color: var(--limewire-color); }
.badge-blue { background: rgba(183,181,245,0.15); color: var(--mauve-it-color); }
.badge-yellow { background: rgba(232,200,80,0.15); color: #e8c850; }
.badge-red { background: rgba(205,34,37,0.18); color: #f06468; }
.badge-gray { background: rgba(249,249,235,0.08); color: rgba(249,249,235,0.5); }
/* ══════════════════════════════════════════════════════════════════════════
CARDS / PANELS
══════════════════════════════════════════════════════════════════════════ */
.card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(249,249,235,0.1);
border-radius: var(--border-radius);
padding: var(--sp-6);
}
.stat-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(238,249,133,0.1);
border-radius: var(--border-radius);
padding: var(--sp-4);
}
.stat-label {
font-family: var(--sans-serif);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(249,249,235,0.45);
margin-bottom: 6px;
}
.stat-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--limewire-color); }
.stat-sub { font-size: var(--font-size-xs); color: rgba(249,249,235,0.4); margin-top: 3px; }
/* ══════════════════════════════════════════════════════════════════════════
FORM INPUTS
══════════════════════════════════════════════════════════════════════════ */
.input, .select,
input[type=text], input[type=password], input[type=date],
input[type=number], select, textarea {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(249,249,235,0.18);
border-radius: calc(var(--input-size) / 2);
color: var(--light-speed-color);
font-family: var(--sans-serif);
font-size: var(--font-size-base);
height: var(--input-size);
padding: 0 16px;
width: 100%;
transition: border-color .15s;
}
textarea {
height: auto;
padding: 10px 16px;
resize: vertical;
}
.input:focus, .select:focus,
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--limewire-color);
box-shadow: 0 0 0 2px rgba(238,249,133,0.12);
}
.select { cursor: pointer; }
label {
display: block;
font-family: var(--sans-serif);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(249,249,235,0.5);
margin-bottom: 5px;
}
/* ══════════════════════════════════════════════════════════════════════════
TABLES
══════════════════════════════════════════════════════════════════════════ */
.table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans-serif);
}
.table th {
background: var(--grey-matter-color);
color: rgba(249,249,235,0.5);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 12px;
border-bottom: 1px solid rgba(249,249,235,0.12);
text-align: left;
white-space: nowrap;
}
.table td {
padding: 7px 12px;
border-bottom: 1px solid rgba(249,249,235,0.06);
color: var(--light-speed-color);
font-size: var(--font-size-base);
vertical-align: middle;
}
.table tr:hover td { background: rgba(238,249,133,0.04); }
/* ══════════════════════════════════════════════════════════════════════════
MODALS
══════════════════════════════════════════════════════════════════════════ */
.modal-bg {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
z-index: 500;
display: none; align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal {
background: var(--grey-matter-color);
border: 1px solid rgba(249,249,235,0.12);
border-top: 2px solid var(--limewire-color);
border-radius: var(--border-radius);
padding: var(--sp-6) 28px;
min-width: 440px; max-width: 580px; width: 100%;
box-shadow: var(--shadow-lg);
}
.modal h3 {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--sp-4);
color: var(--light-speed-color);
}
/* ══════════════════════════════════════════════════════════════════════════
PORTAL LAYOUT
══════════════════════════════════════════════════════════════════════════ */
.portal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-4);
}
.module-tile {
display: flex;
flex-direction: column;
gap: var(--sp-2);
text-decoration: none;
color: var(--light-speed-color);
cursor: pointer;
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
transition: border-color .2s, box-shadow .15s, transform .15s;
}
.module-tile:hover {
border-color: rgba(238,249,133,0.3);
box-shadow: var(--shadow);
transform: translateY(-2px);
text-decoration: none;
color: var(--light-speed-color);
}
/* Limewire bottom accent bar on hover */
.module-tile::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--limewire-gradient);
opacity: 0;
transition: opacity .15s;
}
.module-tile:hover::after { opacity: 1; }
.module-tile .tile-icon { font-size: 32px; line-height: 1; margin-bottom: var(--sp-1); }
.module-tile .tile-label { font-family: var(--sans-serif); font-size: 15px; font-weight: 700; }
.module-tile .tile-desc { font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.4; }
/* Portal page chrome */
.portal-welcome { margin-bottom: var(--sp-6); }
.portal-welcome h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
font-family: var(--sans-serif);
color: var(--light-speed-color);
margin: 0 0 var(--sp-1);
}
.portal-welcome p { color: var(--text-muted); font-size: var(--font-size-md); margin: 0; }
.no-access-notice {
background: var(--warn-bg);
border-left: 3px solid var(--warn);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
color: var(--warn);
padding: var(--sp-4) var(--sp-5);
font-size: var(--font-size-md);
margin-top: var(--sp-5);
}
.denied-notice {
background: var(--danger-bg);
border-left: 3px solid var(--canada-red-color);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
color: var(--light-speed-color);
padding: var(--sp-4) var(--sp-5);
font-size: var(--font-size-md);
margin-bottom: var(--sp-5);
}
/* ══════════════════════════════════════════════════════════════════════════
LOGIN PAGE — split panel
══════════════════════════════════════════════════════════════════════════ */
.login-split {
min-height: 100vh;
display: flex;
}
/* Left: deep-green brand panel */
.login-brand {
flex: 0 0 44%;
background: var(--deep-green-color);
border-right: 1px solid rgba(238,249,133,0.12);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 52px 48px;
}
.login-brand-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.brand-wordmark {
font-family: var(--sans-serif);
font-size: 52px;
font-weight: 700;
letter-spacing: -2px;
line-height: 1;
margin-bottom: var(--sp-2);
}
.brand-wordmark .brand-tel { color: var(--light-speed-color); }
.brand-wordmark .brand-me { color: var(--limewire-color); }
.brand-product {
font-family: var(--sans-serif);
font-size: var(--font-size-sm);
font-weight: 400;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(249,249,235,0.35);
margin-bottom: var(--sp-8);
}
.brand-copy {
font-family: var(--serif);
font-style: italic;
font-weight: 700;
font-size: 1.4rem;
color: var(--light-speed-color);
line-height: 1.35;
margin: 0;
opacity: 0.85;
}
.brand-footer {
font-size: var(--font-size-xs);
color: rgba(249,249,235,0.3);
letter-spacing: 0.5px;
}
/* Right: login card on grey-matter surface */
.login-panel {
flex: 1;
background: var(--grey-matter-color);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-8);
}
.login-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(249,249,235,0.12);
border-top: 2px solid rgba(238,249,133,0.4);
border-radius: var(--border-radius);
padding: var(--sp-8);
width: 100%;
max-width: 380px;
box-shadow: var(--shadow-lg);
}
.login-card .login-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--light-speed-color);
margin-bottom: var(--sp-1);
}
.login-card .login-subtitle {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: var(--sp-6);
}
.login-card .status-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--text-dim);
margin-right: var(--sp-2);
vertical-align: middle;
transition: background .3s;
}
.login-card .status-dot.ok { background: var(--limewire-color); }
.login-card .status-dot.error { background: var(--canada-red-color); }
@media (max-width: 680px) {
.login-split { flex-direction: column; }
.login-brand { flex: none; padding: 36px 24px; min-height: 35vh; }
.brand-wordmark { font-size: 40px; }
}
/* ══════════════════════════════════════════════════════════════════════════
HORIZONTAL SWIVEL LAYOUT ENGINE (UI-r2.md §3.3)
Primary vertical scroll → horizontal swivel at boundary point.
JS in telme-shell.js intercepts wheel events at .swivel-boundary.
══════════════════════════════════════════════════════════════════════════ */
.swivel-boundary {
position: relative;
overflow: hidden;
height: 100vh;
width: 100%;
/* Snap point — vertical scroll stops here and switches to horizontal */
scroll-snap-align: start;
}
.swivel-track {
display: flex;
height: 100%;
will-change: transform;
transition: transform .45s var(--ease-in-out-cubic);
}
.swivel-panel {
flex: 0 0 100%;
height: 100%;
overflow-y: auto;
padding: var(--sp-6) var(--layout-padding);
}
.swivel-panel-header {
font-family: var(--sans-serif);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-muted);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--border);
}
/* Pagination dots */
.swivel-dots {
position: absolute;
bottom: var(--sp-5);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
pointer-events: none;
}
.swivel-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(249,249,235,0.2);
transition: background .2s, transform .2s;
}
.swivel-dot.active {
background: var(--limewire-color);
transform: scale(1.3);
}
/* Scroll container for the vertical content before the swivel point */
.scroll-primary {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.scroll-primary > * { scroll-snap-align: start; }
/* ══════════════════════════════════════════════════════════════════════════
GRADIENT ACCENT BARS (portal top border, etc.)
══════════════════════════════════════════════════════════════════════════ */
.gradient-bar {
height: 3px;
background: var(--limewire-gradient);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 2000;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════════════
UTILITY CLASSES
══════════════════════════════════════════════════════════════════════════ */
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--limewire-color); }
.text-accent2 { color: var(--mauve-it-color); }
.text-ok { color: var(--limewire-color); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--canada-red-color); }
.font-sans { font-family: var(--sans-serif); }
.font-serif { font-family: var(--serif); }
.font-mono { font-family: var(--mono); }
.font-sm { font-size: var(--font-size-sm); }
.font-xs { font-size: var(--font-size-xs); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.flex { display: flex; } .items-center { align-items: center; }
.gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Motion (respect prefers-reduced-motion) ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.tab, .module-tile, .module-tile::after,
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-info,
.swivel-track {
transition-timing-function: var(--ease-in-out-cubic);
}
}
@media (prefers-reduced-motion: reduce) {
.swivel-track { transition: none; }
}