/* ============================================================ OctoAssist design tokens — dual theme Two modes: dark (default — current shipped look) and light. The user toggles via the ☀️/🌙 switch in the topbar. Preference persists in localStorage and is applied to before first paint (see the inline script in base.html) so there's no flash on navigation. Every component reads ONLY these CSS custom properties — no hardcoded background:white / color:#0f172a anywhere in component rules — which is why switching themes is a single token swap. ============================================================ */ :root { /* Accent: rich, vibrant electric blue/indigo that pops perfectly on dark and light surfaces */ --accent: #0097A7; --accent-hover: #00B8CC; --accent-soft: rgba(0, 151, 167, 0.10); --accent-border: rgba(0, 151, 167, 0.30); /* Brand Colors — Third Octopus (Octopus Navy + Octopus Teal) */ --navy: #1B2A4A; --teal: #0097A7; /* Surface Scale — Premium Midnight Glass Theme */ --bg: #030712; /* page background — dark space black */ --surface: rgba(13, 20, 38, 0.65); /* cards, tables, dropdowns — frosted dark slate */ --surface-2: rgba(22, 30, 56, 0.80); /* nested surfaces (sticky heads, modal headers) */ --line: rgba(255, 255, 255, 0.06); /* frosted borders */ --line-strong: rgba(255, 255, 255, 0.12); /* active/focus borders */ --hover: rgba(255, 255, 255, 0.04); /* interactive row highlight */ /* Text Typography — Slate Ramp */ --text-1: #f8fafc; /* slate-50 — page headings, strong elements */ --text-2: #cbd5e1; /* slate-300 — body text */ --text-3: #94a3b8; /* slate-400 — meta labels and subtles */ --text-4: #8a93a8; /* slate-500 — placeholders, disabled text */ /* Legacy aliases */ --slate: var(--text-3); --text: var(--text-1); /* Semantic Alerts & Indicators */ --green: #43A047; --red: #E5484D; --amber: #FF9F0A; --grey: #546E7A; /* Soft Glowing Ambient Shadows - Dark Mode (teal glow) */ --shadow-1: 0 4px 20px -2px rgba(3, 7, 18, 0.4), 0 2px 8px -1px rgba(0, 151, 167, 0.05); --shadow-2: 0 12px 30px -4px rgba(3, 7, 18, 0.6), 0 4px 16px -2px rgba(0, 151, 167, 0.12); --shadow-3: 0 24px 50px -10px rgba(3, 7, 18, 0.8), 0 8px 30px -4px rgba(0, 151, 167, 0.18); --focus-ring: 0 0 0 3px rgba(0, 151, 167, 0.35); /* Border Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; /* Font Sizes */ --t-h1: 30px; --t-h2: 19px; --t-h3: 14px; --t-body: 14px; --t-meta: 12.5px; --font-sans: "Aptos Display", "Aptos", Calibri, "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Header & Navigation Bar Styling */ --topbar-bg: rgba(3, 7, 18, 0.65); --topbar-border: rgba(255, 255, 255, 0.06); --topbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Scrollbars - Dark */ --scrollbar-track: rgba(3, 7, 18, 0.4); --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.24); } /* ============================================================ LIGHT MODE — override every token with gorgeous modern white layout. Uses translucent frosted glass white containers floating over an ambient gradient. ============================================================ */ :root[data-theme="light"] { --accent: #0097A7; --accent-hover: #007E8C; --accent-soft: rgba(0, 151, 167, 0.07); --accent-border: rgba(0, 151, 167, 0.20); --navy: #1B2A4A; --teal: #0097A7; --bg: #f3f6fb; --surface: rgba(255, 255, 255, 0.86); /* Frosted glass white cards */ --surface-2: rgba(240, 244, 249, 0.90); /* Inner cards and table heads */ --line: rgba(27, 42, 74, 0.07); /* Micro borders (navy-tinted) */ --line-strong: rgba(27, 42, 74, 0.14); /* Active focus borders */ --hover: rgba(0, 151, 167, 0.05); /* Translucent teal hover */ --text-1: #1B2A4A; /* Octopus Navy — headings & primary text */ --text-2: #33425C; --text-3: #546E7A; /* Neutral Gray — secondary text */ --text-4: #8A99A8; --green: #2E7D32; /* Shield Green */ --red: #C62828; /* Risk Red */ --amber: #FF8F00; /* Alert Amber */ /* Glowing Ambient Shadows - Light Mode (teal glow) */ --shadow-1: 0 8px 30px rgba(27, 42, 74, 0.04), 0 1px 8px rgba(0, 151, 167, 0.04); --shadow-2: 0 16px 40px rgba(27, 42, 74, 0.07), 0 4px 16px rgba(0, 151, 167, 0.08); --shadow-3: 0 32px 64px rgba(27, 42, 74, 0.10), 0 8px 24px rgba(0, 151, 167, 0.12); --focus-ring: 0 0 0 3px rgba(0, 151, 167, 0.20); --topbar-bg: rgba(255, 255, 255, 0.75); --topbar-border: rgba(15, 23, 42, 0.04); --topbar-shadow: 0 4px 20px rgba(15, 23, 42, 0.02); /* Scrollbars - Light */ --scrollbar-track: rgba(244, 247, 252, 0.5); --scrollbar-thumb: rgba(15, 23, 42, 0.15); --scrollbar-thumb-hover: rgba(15, 23, 42, 0.28); } /* Status + priority pills — light-mode variants. On dark we use translucent tints; on light we use the original solid pastel pairs because translucent tints disappear into the surface. */ :root[data-theme="light"] .status-open { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } :root[data-theme="light"] .status-in_progress { background: #fef3c7; color: #92400e; border-color: #fde68a; } :root[data-theme="light"] .status-on_hold { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; } :root[data-theme="light"] .status-resolved { background: #dcfce7; color: #166534; border-color: #bbf7d0; } :root[data-theme="light"] .status-closed { background: #e2e8f0; color: #334155; border-color: #cbd5e1; } :root[data-theme="light"] .status-cancelled { background: #fee2e2; color: #991b1b; border-color: #fecaca; } :root[data-theme="light"] .prio-low { background: #e2e8f0; color: #334155; border-color: #cbd5e1; } :root[data-theme="light"] .prio-medium { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } :root[data-theme="light"] .prio-high { background: #fed7aa; color: #9a3412; border-color: #fdba74; } :root[data-theme="light"] .prio-critical { background: #fecaca; color: #7f1d1d; border-color: #fca5a5; } /* Alerts — same story: solid pastel pairs on light, translucent on dark. */ :root[data-theme="light"] .alert.error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; } :root[data-theme="light"] .alert.success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; } :root[data-theme="light"] .alert.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; } :root[data-theme="light"] .alert.info { background: var(--accent-soft); border-color: var(--accent-border); color: #1e3a8a; } /* Role pills in the topbar work on both themes but pop better on light with solid backgrounds matching the original wave-1 design. */ :root[data-theme="light"] .role-admin { background: #dbeafe; color: #1e40af; } :root[data-theme="light"] .role-agent { background: #e0e7ff; color: #3730a3; } :root[data-theme="light"] .role-requester { background: #f1f5f9; color: var(--text-3); } :root[data-theme="light"] .topbar nav a { color: var(--text-2); } :root[data-theme="light"] .topbar nav a:hover { color: var(--text-1); } :root[data-theme="light"] .topbar nav .who { color: var(--text-2); border-left-color: var(--line); } :root[data-theme="light"] .brand-mark { color: var(--text-3); } :root[data-theme="light"] .brand-product { color: var(--text-1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter alt forms */ background: var(--bg); background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px), radial-gradient(at 15% 15%, rgba(59, 130, 246, 0.08) 0px, transparent 45%), radial-gradient(at 85% 15%, rgba(99, 102, 241, 0.08) 0px, transparent 45%), radial-gradient(at 50% 85%, rgba(236, 72, 153, 0.05) 0px, transparent 45%); background-attachment: fixed; background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%; color: var(--text-2); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: thin; } :root[data-theme="light"] body { background-image: linear-gradient(rgba(37, 99, 235, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.012) 1px, transparent 1px), radial-gradient(at 15% 15%, rgba(37, 99, 235, 0.06) 0px, transparent 40%), radial-gradient(at 85% 15%, rgba(139, 92, 246, 0.06) 0px, transparent 40%), radial-gradient(at 50% 85%, rgba(236, 72, 153, 0.04) 0px, transparent 40%) !important; background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100% !important; } h1, h2, h3, h4, h5 { color: var(--text-1); font-weight: 700; font-family: var(--font-sans); letter-spacing: -0.02em; } h1 { font-size: var(--t-h1); line-height: 1.25; background: linear-gradient(135deg, var(--text-1) 30%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin: 0 0 4px; } h2 { font-size: var(--t-h2); line-height: 1.3; } h3 { font-size: var(--t-h3); line-height: 1.4; } strong, b { color: var(--text-1); font-weight: 600; } p { margin: 0 0 8px; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--accent-soft); color: var(--accent-hover); } /* Custom Scrollbars for WebKit Browsers */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color 0.25s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); border: 2px solid transparent; background-clip: padding-box; } /* ---------- Top bar — theme-aware via tokens ---------- In dark mode the topbar is one shade lighter than the page; in light mode it's a translucent white with backdrop blur. Both end up "floating above" content via a soft drop shadow. */ .topbar { background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); color: var(--text-1); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); padding: 12px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; } .topbar::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity: 0.45; pointer-events: none; z-index: 1; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand-link { text-decoration: none; color: inherit; transition: opacity 0.12s; } .brand-link:hover { opacity: 0.9; text-decoration: none; } .brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; } .brand-mark { font-weight: 700; letter-spacing: 1.2px; font-size: 11px; color: rgba(148, 163, 184, 0.85); } .brand-product { color: white; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .topbar nav { display: flex; align-items: center; gap: 4px; } .topbar nav a { position: relative; color: rgba(241, 245, 249, 0.78); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: var(--r-sm); transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease; } .topbar nav a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, #60a5fa 100%); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), left 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 99px; } .topbar nav a:hover { color: white; background: rgba(255, 255, 255, 0.08) !important; text-decoration: none; transform: translateY(-1.5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .topbar nav a:hover::after { width: 60%; left: 20%; } .topbar nav .who { color: rgba(241, 245, 249, 0.82); font-size: 13px; font-weight: 500; padding: 5px 12px; margin-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.12); display: inline-flex; align-items: center; gap: 7px; transition: background-color 0.2s ease, transform 0.2s ease; border-radius: var(--r-sm); } .topbar nav .who:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-0.5px); } .topbar nav .who a, .topbar nav form button { color: rgba(241, 245, 249, 0.78); } .topbar nav .who button.link-button, .topbar nav form button.link-button { color: rgba(241, 245, 249, 0.78); padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid transparent; transition: all 0.2s ease; } .topbar nav .who button.link-button:hover, .topbar nav form button.link-button:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.3) !important; text-decoration: none; transform: scale(1.02); } .topbar nav .role-pill { font-size: 10px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .topbar nav .who:hover .role-pill { transform: scale(1.08); box-shadow: 0 0 10px rgba(37, 99, 235, 0.6); } /* Role pills on dark background — higher saturation backgrounds for legibility */ .role-admin { background: var(--accent); color: white; } .role-agent { background: #6366f1; color: white; } .role-requester { background: rgba(255, 255, 255, 0.18); color: white; } /* Theme toggle button — sits in the topbar, swaps icon per current theme. Default state = dark theme = show ☀️ (the action). Light theme = show 🌙. */ .theme-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: inherit; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; margin: 0 8px; box-shadow: none; transition: background 0.2s, border-color 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.1) !important; transform: scale(1.12) rotate(15deg); border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.15); } .theme-toggle:active { transform: scale(0.95); } :root[data-theme="light"] .theme-toggle { border-color: var(--line-strong); } :root[data-theme="light"] .theme-toggle:hover { background: var(--hover); } .theme-icon-light, .theme-icon-dark { line-height: 1; } .theme-icon-dark { display: none; } /* dark mode (default): hide moon */ :root[data-theme="light"] .theme-icon-light { display: none; } /* light mode: hide sun */ :root[data-theme="light"] .theme-icon-dark { display: inline; } /* ---------- Global search (topbar) ---------- */ .gs-wrap { position: relative; flex: 1; max-width: 480px; margin: 0 24px; display: flex; align-items: center; } .gs-glyph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.6; pointer-events: none; } .gs-input { width: 100%; padding: 7px 44px 7px 34px; font-size: 13px; background: rgba(255, 255, 255, 0.08); color: var(--text-1); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-sm); min-height: 0; } .gs-input::placeholder { color: var(--text-3); } .gs-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: var(--focus-ring); } :root[data-theme="light"] .gs-input { background: var(--surface-2); border-color: var(--line); color: var(--text-1); } .gs-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text-3); pointer-events: none; } :root[data-theme="light"] .gs-kbd { background: var(--surface); border-color: var(--line); } .gs-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); color: var(--text-1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); max-height: 480px; overflow-y: auto; z-index: 100; } .gs-dd-group { padding: 4px 0; border-bottom: 1px solid var(--line); } .gs-dd-group:last-child { border-bottom: 0; } .gs-dd-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.7px; padding: 6px 14px 4px; } .gs-dd-hit { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: inherit; font-size: 13px; } .gs-dd-hit:hover, .gs-dd-hit.active { background: var(--hover); text-decoration: none; } .gs-dd-ico { font-size: 16px; line-height: 1; width: 20px; text-align: center; } .gs-dd-body { flex: 1; min-width: 0; overflow: hidden; } .gs-dd-title { color: var(--text-1); font-weight: 600; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .gs-dd-sub { color: var(--text-3); font-size: 11.5px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .gs-dd-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); flex-shrink: 0; } .gs-dd-empty, .gs-dd-foot { padding: 14px; text-align: center; color: var(--text-3); font-size: 12px; } .gs-dd-foot { border-top: 1px solid var(--line); font-size: 11px; } /* Hide the search bar on very narrow viewports */ @media (max-width: 900px) { .gs-wrap { display: none; } } /* ---------- Notification bell ---------- */ .bell-wrap { position: relative; display: inline-flex; align-items: center; margin: 0 4px; } .bell-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: inherit; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; box-shadow: none; position: relative; transition: background 0.2s, border-color 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; } @keyframes bellRing { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(15deg); } 40%, 80% { transform: rotate(-15deg); } } .bell-btn:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: scale(1.12); box-shadow: 0 0 12px rgba(239, 68, 68, 0.25); } .bell-btn:hover .bell-icon { animation: bellRing 0.6s ease; display: inline-block; } .bell-btn:hover .bell-badge { transform: scale(1.1) translate(1px, -1px); box-shadow: 0 0 8px var(--red); } :root[data-theme="light"] .bell-btn { border-color: var(--line-strong); } :root[data-theme="light"] .bell-btn:hover { background: var(--hover) !important; border-color: var(--line-strong) !important; box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); } .bell-icon { font-size: 14px; } .bell-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: white; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; border: 2px solid var(--topbar-bg, var(--surface)); min-width: 16px; text-align: center; } .bell-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--surface); color: var(--text-1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); z-index: 100; } .bell-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-bottom: 1px solid var(--line); } .bell-head strong { font-size: 13px; color: var(--text-1); } .bell-head .meta { font-size: 11.5px; color: var(--text-3); } .bell-list { list-style: none; margin: 0; padding: 4px 0; } .bell-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; color: var(--text-1); text-decoration: none; border-left: 3px solid transparent; transition: background 0.08s; } .bell-item:hover { background: var(--hover); text-decoration: none; } .bell-item-label { color: var(--text-2); } .bell-item-count { font-weight: 700; color: var(--text-1); padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; } .bell-item.severity-info { border-left-color: var(--accent); } .bell-item.severity-warn { border-left-color: var(--amber); } .bell-item.severity-warn .bell-item-count { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.35); } .bell-item.severity-danger { border-left-color: var(--red); } .bell-item.severity-danger .bell-item-count { background: rgba(239,68,68,0.20); color: #fca5a5; border-color: rgba(239,68,68,0.40); } :root[data-theme="light"] .bell-item.severity-warn .bell-item-count { background: #fef3c7; color: #92400e; border-color: #fde68a; } :root[data-theme="light"] .bell-item.severity-danger .bell-item-count { background: #fee2e2; color: #991b1b; border-color: #fecaca; } .bell-empty { padding: 22px 14px; text-align: center; color: var(--text-3); font-size: 12.5px; margin: 0; } main { max-width: 1280px; margin: 0 auto; padding: 28px 28px 48px; } /* ---------- Page heading ---------- */ .page-head { margin-bottom: 20px; } .page-head h1 { margin: 0 0 4px 0; font-size: var(--t-h1); color: var(--text-1); } .page-head .meta { color: var(--text-3); margin: 0; font-size: 13.5px; } .row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .actions { display: flex; gap: 8px; align-items: center; } .meta-inline { color: var(--text-4); padding: 0 4px; } .meta { color: var(--text-3); } /* ---------- Tables ---------- */ table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: visible; box-shadow: var(--shadow-1); } table.data thead th:first-child { border-top-left-radius: var(--r-md); } table.data thead th:last-child { border-top-right-radius: var(--r-md); } table.data tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); } table.data tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-md); } table.data th, table.data td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13.5px; } table.data thead th { background: var(--surface-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3); padding-top: 9px; padding-bottom: 9px; } table.data tbody td { color: var(--text-2); } table.data tbody td strong { color: var(--text-1); } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr { transition: background 0.08s; } table.data tbody tr:hover { background: var(--hover); } table.data a { color: var(--text-1); font-weight: 600; text-decoration: none; } table.data a:hover { color: var(--accent); text-decoration: underline; } table.data tr.row-disabled { opacity: 0.55; } table.data.audit code { display: block; background: var(--bg); padding: 4px 8px; border-radius: 4px; margin: 2px 0; word-break: break-all; font-family: var(--font-mono); font-size: 12px; } /* ---------- Empty states ---------- */ .empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md); padding: 40px 32px; text-align: center; color: var(--text-3); } .empty h2 { color: var(--text-1); font-size: 16px; margin: 0 0 6px; } .empty p { color: var(--text-3); margin: 0; font-size: 13.5px; } /* ---------- Cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; } .card { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; } .card:hover { transform: translateY(-4px) scale(1.005); box-shadow: var(--shadow-2), 0 0 15px rgba(59, 130, 246, 0.08); border-color: var(--accent-border); } /* ---------- Reports & Dashboards ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-card { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-1); color: var(--text-1); /* so chart SVGs inside resolve currentColor correctly */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease; } .kpi-card::before { content: ""; position: absolute; top: -30%; right: -30%; width: 120px; height: 120px; background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, transparent 70%); pointer-events: none; transition: transform 0.5s ease; } .kpi-card:hover::before { transform: scale(1.6) translate(-10%, 10%); } .kpi-card:hover { transform: translateY(-4px) scale(1.005); box-shadow: var(--shadow-2), 0 0 15px rgba(59, 130, 246, 0.08); border-color: var(--accent-border); } .kpi-card .kpi-label { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); font-weight: 700; font-family: var(--font-sans); } .kpi-card .kpi-value { margin: 0; font-size: 38px; font-weight: 800; font-family: var(--font-sans); background: linear-gradient(135deg, var(--text-1) 20%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1.2px; line-height: 1.1; } .kpi-card .kpi-unit { font-size: 18px; color: var(--text-3); font-weight: 600; margin-left: 2px; } .kpi-card .kpi-sub { margin: 6px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.4; } .kpi-card .kpi-spark { position: absolute; bottom: 10px; right: 12px; opacity: 0.85; } .report-row { display: grid; gap: 16px; margin-bottom: 20px; } .report-row.two-col-charts { grid-template-columns: 1fr 1fr; } .report-row.charts-grid-3 { grid-template-columns: repeat(3, 1fr); } .report-card { background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-1); color: var(--text-1); /* SVG charts inside use this for currentColor */ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s; } .report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); } .report-card h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); font-weight: 700; } /* Donut */ .chart-donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .chart-donut svg { flex-shrink: 0; } .chart-legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 160px; display: grid; gap: 6px; } .chart-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--text); } .chart-legend .dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .chart-legend .lbl { color: var(--text-2); text-transform: capitalize; } .chart-legend .val { color: var(--text-1); font-weight: 700; } /* Bars + line + donut SVGs: - inherit page font (browsers default to serif inside otherwise) - inherit page text colour via CSS `color` so currentColor in the SVG resolves to the right tone for whichever theme is active. */ .chart-bars, .chart-donut svg, .chart-line, .sparkline { display: block; color: var(--text-1); /* SVG `fill="currentColor"` resolves to this */ } .chart-bars text, .chart-donut svg text, .chart-line text, .sparkline text { font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (max-width: 900px) { .report-row.two-col-charts, .report-row.charts-grid-3 { grid-template-columns: 1fr; } } .key-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .key-value { flex: 1; min-width: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); color: var(--text-2); padding: 6px 10px; border-radius: 4px; border: 1px solid var(--line); word-break: break-all; } .card h3 { margin: 0 0 10px 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate); } .card.prose { white-space: pre-wrap; line-height: 1.5; } dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13.5px; } dt { color: var(--text-3); font-weight: 500; } dd { margin: 0; color: var(--text-1); font-weight: 500; } section h2 { font-size: var(--t-h2); margin: 24px 0 12px 0; color: var(--text-1); font-weight: 600; } /* ---------- Forms ---------- */ .card.form { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 500; } .form label .meta { font-weight: 400; font-size: 12px; color: var(--text-3); } /* All form controls share a single coherent style. 36px min-height = comfortable touch target, larger than browser default. Focus ring uses accent color at low opacity — visible without screaming. */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="datetime-local"], input[type="date"], input[type="time"], select, textarea { font-family: inherit; font-size: 13.5px; color: var(--text-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; min-height: 36px; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; width: 100%; } textarea { resize: vertical; line-height: 1.55; padding: 10px 12px; min-height: 80px; } input::placeholder, textarea::placeholder { color: var(--text-4); } input:hover, select:hover, textarea:hover { border-color: var(--line-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--text-4); cursor: not-allowed; } /* Select gets a custom caret so it looks native-but-better. Inline SVG (data URI) — no extra HTTP request. */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 32px; cursor: pointer; } /* Checkbox / radio — make them visible and a little chunkier */ input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; cursor: pointer; accent-color: var(--accent); } .form .checkbox { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; } /* ---------- Buttons ---------- */ button, .button { cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--text-1); font-family: inherit; font-weight: 500; font-size: 13px; padding: 8px 14px; border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s; white-space: nowrap; box-shadow: var(--shadow-1); } button:hover, .button:hover { background: var(--hover); border-color: var(--line-strong); color: var(--text-1); text-decoration: none; } button:focus-visible, .button:focus-visible { outline: none; box-shadow: var(--shadow-1), var(--focus-ring); } button:active, .button:active { transform: translateY(0.5px); } button.primary, .button.primary { background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); border: none; color: white; font-weight: 600; box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.4); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } button.primary:hover, .button.primary:hover { background: linear-gradient(135deg, #16233d 0%, #007e8c 100%); transform: translateY(-1px); box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.5); color: white; } button.primary:focus-visible, .button.primary:focus-visible { box-shadow: var(--focus-ring), 0 4px 14px 0 rgba(59, 130, 246, 0.4); } button.danger, .button.danger { background: var(--surface); border-color: var(--line); color: var(--red); } button.danger:hover, .button.danger:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); } button.danger-solid, .button.danger-solid { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); border: none; color: white !important; font-weight: 600; padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.4); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; gap: 6px; } button.danger-solid:hover, .button.danger-solid:hover { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); transform: translateY(-1px); box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.5); color: white !important; text-decoration: none !important; } button.danger-solid:active, .button.danger-solid:active { transform: translateY(0.5px); } .link-button { background: none; border: none; color: var(--accent); padding: 0; cursor: pointer; font-size: 13px; text-decoration: none; font-weight: 500; min-height: 0; box-shadow: none; } .link-button:hover { text-decoration: underline; background: none; color: var(--accent-hover); } .inline-form { display: inline; } .inline-form-stack { display: flex; flex-direction: column; gap: 8px; } .row-form { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: 12px; align-items: end; } /* ---------- Filters bar — chip-style toolbar above tables ---------- */ .filters { display: flex; gap: 12px; align-items: end; background: var(--surface); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--shadow-1); } .filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; } .filters select, .filters input { min-width: 160px; } .filters .checkbox { flex-direction: row; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-2); padding-bottom: 8px; } /* ---------- Status / priority badges ---------- Pill shape, slight border for definition, bolder text for legibility. Each pair (bg / border / fg) chosen for WCAG-AA contrast. */ .status, .prio { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; text-transform: capitalize; letter-spacing: 0.2px; line-height: 1.45; } .status::before, .prio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; flex-shrink: 0; } /* Status + priority pills — dark-mode tuned. Background uses a translucent tint of the semantic colour so it works on both --surface and --bg, with a brighter foreground for legibility. */ .status-open { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.1) 100%); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.45); box-shadow: 0 0 8px rgba(59, 130, 246, 0.15); } .status-in_progress { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.1) 100%); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.45); box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); } .status-on_hold { background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(139, 92, 246, 0.1) 100%); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.45); box-shadow: 0 0 8px rgba(167, 139, 250, 0.15); } .status-resolved { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.1) 100%); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.45); box-shadow: 0 0 8px rgba(34, 197, 94, 0.15); } .status-closed { background: linear-gradient(135deg, rgba(148, 163, 184, 0.25) 0%, rgba(100, 116, 139, 0.1) 100%); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.45); } .status-cancelled { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.1) 100%); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.45); } .prio-low { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.08) 100%); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); } .prio-medium { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.08) 100%); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); } .prio-high { background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(234, 88, 12, 0.1) 100%); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.4); box-shadow: 0 0 8px rgba(249, 115, 22, 0.15); } .prio-critical { background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.15) 100%); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.5); box-shadow: 0 0 12px rgba(239, 68, 68, 0.3); font-weight: 700; } .ticket-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .breach { color: var(--red); font-weight: 600; } /* ---------- Comments ---------- */ .comment { background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-1); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s; } .comment:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); } .comment.internal { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.38); } .comment-head { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; } .comment-head strong { color: var(--text-1); font-weight: 600; } .comment-body { white-space: pre-wrap; line-height: 1.55; color: var(--text-2); } .tag-internal { background: var(--amber); color: #78350f; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* ---------- Alerts / banners ---------- */ .alert { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 16px; border: 1px solid var(--line); border-left-width: 4px; font-size: 13.5px; line-height: 1.5; } .alert.error { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); border-left-color: var(--red); color: #fca5a5; } .alert.success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); border-left-color: var(--green); color: #86efac; } .alert.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); border-left-color: var(--amber); color: #fcd34d; } .alert.info { background: var(--accent-soft); border-color: var(--accent-border); border-left-color: var(--accent); color: #93c5fd; } .alert code { background: rgba(127,131,145,0.22); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); } /* ---------- Auth page ---------- */ .auth-page main { max-width: 420px; padding-top: 60px; } body.auth-page main { max-width: 860px; } /* wider for the split-screen layout */ .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-2); } .auth-card h1 { margin: 0 0 16px 0; font-size: 20px; } .auth-card form, .auth-panel form { display: flex; flex-direction: column; gap: 12px; } .auth-card label, .auth-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--slate); } .auth-card input, .auth-panel input { padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--surface-2); color: var(--text); } .auth-card .meta, .auth-panel .meta { color: var(--slate); margin-top: 16px; font-size: 12px; } /* ════════ Split-screen sign-in ════════ */ .auth-split { display: grid; grid-template-columns: 0.95fr 1.05fr; width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-3); background: var(--surface); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); animation: authCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Left — branded gradient hero */ .auth-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 40px 34px; min-height: 460px; color: #fff; background: linear-gradient(155deg, #16233d 0%, #0a4a55 55%, #0097A7 100%); overflow: hidden; } .auth-hero::before { /* soft glow accent */ content: ""; position: absolute; width: 320px; height: 320px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(79,195,247,0.35), transparent 70%); pointer-events: none; } .auth-hero-brand { font-size: 23px; font-weight: 800; letter-spacing: 0.3px; position: relative; } .auth-hero-brand span { font-size: 12px; font-weight: 600; opacity: 0.7; letter-spacing: 2px; margin-left: 4px; vertical-align: middle; } .auth-hero-for { margin: 6px 0 0; font-size: 13px; opacity: 0.82; position: relative; } .auth-hero-tagline { margin: 0; font-size: 27px; font-weight: 700; line-height: 1.28; position: relative; } .auth-hero-logo-wrap { background: #fff; border-radius: 10px; padding: 10px 14px; align-self: flex-start; box-shadow: 0 6px 18px rgba(0,0,0,0.18); position: relative; } .auth-hero-logo { display: block; width: 120px; height: auto; } /* Right — sign-in panel */ .auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; background: var(--surface); } .auth-panel > h1 { margin: 0 0 4px; font-size: 25px; font-weight: 700; color: var(--text); } /* Hide the corner watermark on the login page (the hero already shows it). */ body.auth-page .brand-watermark { display: none; } @media (max-width: 760px) { body.auth-page main { max-width: 440px; } .auth-split { grid-template-columns: 1fr; } .auth-hero { min-height: auto; padding: 28px 26px; gap: 18px; } .auth-hero-tagline { font-size: 22px; } .auth-panel { padding: 32px 26px; } } .sso-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .sso-buttons .button.sso { text-align: center; padding: 10px 14px; font-size: 14px; font-weight: 600; white-space: normal; line-height: 1.4; height: auto; min-height: 40px; word-break: break-word; } .auth-divider { text-align: center; margin: 12px 0; color: var(--slate); font-size: 12px; position: relative; } .auth-divider:before, .auth-divider:after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--line); } .auth-divider:before { left: 0; } .auth-divider:after { right: 0; } .auth-divider span { background: var(--surface); padding: 0 8px; } /* Multi-option sign-in chooser */ .auth-subtitle { margin: -8px 0 18px 0; color: var(--slate); font-size: 13px; } /* Lead primary CTA — TEMA ID single sign-on */ .auth-primary-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 16px 18px; border-radius: var(--r-md); text-decoration: none; text-align: center; color: #fff; background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); box-shadow: 0 8px 22px rgba(0, 151, 167, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; position: relative; overflow: hidden; } .auth-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 151, 167, 0.36); filter: brightness(1.04); } .auth-primary-cta:active { transform: translateY(0); } .auth-cta-title { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; } .auth-cta-sub { font-size: 12px; font-weight: 400; opacity: 0.9; } /* Sheen sweep on hover */ .auth-primary-cta::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left 0.6s ease; } .auth-primary-cta:hover::after { left: 140%; } /* "Other sign-in options" toggle */ .auth-other-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 14px; padding: 8px; background: none !important; border: none !important; box-shadow: none !important; color: var(--slate) !important; font-size: 13px; font-weight: 500 !important; cursor: pointer; } .auth-other-toggle:hover { color: var(--accent) !important; background: none !important; transform: none !important; } .auth-other-toggle .auth-chev { transition: transform 0.2s ease; font-size: 11px; } .auth-other-toggle.is-open .auth-chev { transform: rotate(180deg); } /* Secondary options revealed under the toggle */ .auth-other { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .auth-secondary { display: flex !important; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 11px 14px !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; background: var(--surface-2) !important; color: var(--text) !important; font-weight: 400 !important; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important; } .auth-secondary:hover { border-color: var(--accent-border) !important; background: var(--accent-soft) !important; transform: translateY(-1px) !important; } .auth-sec-title { font-size: 14px; font-weight: 600; color: var(--text); } .auth-sec-sub { font-size: 12px; color: var(--slate); } .auth-back { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 14px 0; color: var(--slate) !important; font-size: 13px; font-weight: 500 !important; cursor: pointer; display: inline-flex !important; align-items: center; gap: 6px; } .auth-back:hover { color: var(--accent) !important; background: none !important; transform: none !important; } .auth-pw-heading { margin: 0 0 14px 0; font-size: 17px; } /* ════════════ Lively sign-in page ════════════ */ /* Slow-drifting aurora behind the card (scoped to the auth page only). */ body.auth-page { position: relative; overflow-x: hidden; } body.auth-page::before { content: ""; position: fixed; inset: -35%; z-index: -1; pointer-events: none; background: radial-gradient(36% 36% at 22% 28%, rgba(0,151,167,0.32), transparent 62%), radial-gradient(34% 34% at 80% 22%, rgba(79,195,247,0.28), transparent 62%), radial-gradient(40% 40% at 78% 78%, rgba(0,151,167,0.26), transparent 62%), radial-gradient(36% 36% at 24% 82%, rgba(27,42,74,0.24), transparent 62%); filter: blur(10px); transform-origin: center; animation: authAurora 26s ease-in-out infinite; } /* A second, faster, fainter layer for organic depth. */ body.auth-page::after { content: ""; position: fixed; inset: -35%; z-index: -1; pointer-events: none; background: radial-gradient(30% 30% at 65% 35%, rgba(79,195,247,0.20), transparent 60%), radial-gradient(28% 28% at 35% 65%, rgba(0,151,167,0.16), transparent 60%); filter: blur(14px); transform-origin: center; animation: authAurora2 19s ease-in-out infinite; } @keyframes authAurora { 0% { transform: rotate(0deg) scale(1.15); } 50% { transform: rotate(180deg) scale(1.30); } 100% { transform: rotate(360deg) scale(1.15); } } @keyframes authAurora2 { 0% { transform: rotate(0deg) scale(1.25) translateX(2%); } 50% { transform: rotate(-160deg) scale(1.10) translateX(-3%); } 100% { transform: rotate(-360deg) scale(1.25) translateX(2%); } } /* Card lifts in, glassy over the moving backdrop. */ body.auth-page .auth-card { backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); animation: authCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes authCardIn { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } } /* Staggered reveal of the three sign-in rows. */ body.auth-page .auth-table tbody tr { animation: authRowIn 0.5s ease both; } body.auth-page .auth-table tbody tr:nth-child(1) { animation-delay: 0.18s; } body.auth-page .auth-table tbody tr:nth-child(2) { animation-delay: 0.28s; } body.auth-page .auth-table tbody tr:nth-child(3) { animation-delay: 0.38s; } @keyframes authRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Button micro-interactions: lift on hover, settle on press. */ body.auth-page .auth-table .button { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important; } body.auth-page .auth-table .button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28) !important; } body.auth-page .auth-table .button:active { transform: translateY(0) !important; } /* Sheen sweep across the primary (TEMA ID) button on hover. */ body.auth-page .auth-table .button.primary { position: relative; overflow: hidden; } body.auth-page .auth-table .button.primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); transition: left 0.6s ease; } body.auth-page .auth-table .button.primary:hover::after { left: 130%; } /* Always-animate per request: reduced-motion override intentionally disabled. */ @media not all { body.auth-page::before, body.auth-page::after, body.auth-page .auth-card, body.auth-page .auth-table tbody tr { animation: none; } body.auth-page .auth-table .button.primary::after { display: none; } } /* TEMA India logo — subtle fixed brand mark, bottom-right on every page. */ .brand-watermark { position: fixed; right: 18px; bottom: 14px; width: 100px; height: 36px; background: url("/static/tema-watermark.png") right bottom / contain no-repeat; opacity: 0.3; z-index: 20; pointer-events: none; transition: opacity 0.2s ease; } .brand-watermark:hover { opacity: 0.55; } @media (max-width: 640px) { .brand-watermark { width: 80px; height: 29px; right: 10px; bottom: 10px; } } @media print { .brand-watermark { display: none; } } /* ════════════ Rich app-wide motion (always on, per request) ════════════ */ @media all { /* Page content rises in on each load */ main { animation: appPageIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes appPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Cards, KPI tiles, tables fade + rise in */ .card, .kpi-card, .kpi-tile, .report-card, .comment, table.data, .empty, .filters { animation: appRiseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes appRiseIn { from { opacity: 0; transform: translateY(14px) scale(0.992); } to { opacity: 1; transform: none; } } /* Stagger within common grids / KPI strips */ .cards > :nth-child(1), .kpi-strip > :nth-child(1) { animation-delay: 0.04s; } .cards > :nth-child(2), .kpi-strip > :nth-child(2) { animation-delay: 0.10s; } .cards > :nth-child(3), .kpi-strip > :nth-child(3) { animation-delay: 0.16s; } .cards > :nth-child(4), .kpi-strip > :nth-child(4) { animation-delay: 0.22s; } .cards > :nth-child(5), .kpi-strip > :nth-child(5) { animation-delay: 0.28s; } .cards > :nth-child(6), .kpi-strip > :nth-child(6) { animation-delay: 0.34s; } .cards > :nth-child(n+7), .kpi-strip > :nth-child(n+7) { animation-delay: 0.40s; } /* Hover zoom + lift on cards and KPI tiles */ .card, .kpi-card, .kpi-tile, .report-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover, .kpi-card:hover, .kpi-tile:hover, .report-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-2); } /* Corner logo gently floats */ .brand-watermark { animation: wmFloat 6s ease-in-out infinite; } @keyframes wmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } } /* ---------- Code blocks ---------- */ code, pre.code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } pre.code { background: #0f1b30; color: #e3ecff; padding: 12px 16px; border-radius: 6px; overflow-x: auto; } footer { max-width: 1280px; margin: 24px auto 0; padding: 16px 28px; display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: 12px; border-top: 1px solid var(--line); } @media (max-width: 720px) { .row-form { grid-template-columns: 1fr; } .topbar { flex-direction: column; align-items: flex-start; gap: 8px; } .topbar nav { flex-wrap: wrap; } } /* ================================================================= * Public landing page (v3 — calmer, real-looking product mocks) * All classes are prefixed `lh-` (landing-home) to avoid clashing * with admin/portal styles. * ================================================================= */ .landing-v3 main { max-width: none; padding: 0; } .landing-v3 .topbar { background: rgba(255,255,255,0.85); color: var(--navy); border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(10px); position: sticky; top: 0; z-index: 50; } .landing-v3 .topbar .brand-mark { color: var(--navy); } .landing-v3 .topbar .brand-product { color: var(--teal); } .landing-v3 .topbar nav a { color: var(--navy); font-weight: 500; } .landing-v3 .topbar nav a:hover { color: var(--teal); } /* Big landing typography stack — system, generous line-heights. */ .landing-v3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- HERO ---------- */ .lh-hero { background: #ffffff; padding: 88px 0 96px 0; border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1.1fr 1.2fr; gap: 56px; align-items: center; } .hero-copy { max-width: 560px; } .lh-hero .lh-eyebrow { margin-bottom: 14px; } .landing-v3 .lh-h1 { font-size: 60px; line-height: 1.04; letter-spacing: -1.6px; font-weight: 800; margin: 0 0 20px 0; color: var(--navy); } .landing-v3 .lh-lede { font-size: 19px; line-height: 1.55; color: var(--slate); margin: 0 0 28px 0; max-width: 540px; } .lh-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .lh-button { display: inline-block; padding: 11px 22px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--line); background: white; color: var(--navy); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .lh-button:hover { background: #eef2f7; } .lh-button:active { transform: translateY(1px); } .lh-button.primary { background: var(--navy); color: white; border-color: var(--navy); } .lh-button.primary:hover { background: #1c3760; border-color: #1c3760; } .lh-button.ghost { background: transparent; color: var(--navy); border-color: rgba(17,35,63,0.18); } .lh-button.ghost:hover { background: rgba(17,35,63,0.04); border-color: rgba(17,35,63,0.36); } .lh-button.big { padding: 14px 26px; font-size: 15px; border-radius: 9px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--slate); margin: 0; } .hero-meta span:nth-child(2n) { color: rgba(0,0,0,0.18); } /* ---------- BROWSER-WINDOW MOCK (the keystone of the redesign) ---------- */ .mock-window { background: white; border-radius: 12px; box-shadow: 0 1px 0 rgba(17,35,63,0.04), 0 16px 48px rgba(17,35,63,0.18), 0 36px 96px rgba(17,35,63,0.12); overflow: hidden; border: 1px solid #e6ebf2; font-size: 12px; color: var(--text); } .mock-chrome { background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%); padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e2e7ee; } .mock-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot-red { background: #ff5f57; } .dot-amber { background: #febc2e; } .dot-green { background: #28c840; } .mock-url { flex: 1; text-align: center; background: white; border: 1px solid #e6ebf2; border-radius: 6px; padding: 4px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--slate); max-width: 360px; margin: 0 auto; } .mock-body { background: #f7f9fc; } .mock-topbar { background: var(--navy); color: white; padding: 10px 14px; display: flex; align-items: center; gap: 14px; font-size: 12px; } .mock-topbar strong { letter-spacing: 1px; font-size: 11px; } .mock-topbar span { color: rgba(255,255,255,0.7); } .mock-page { padding: 18px 20px 22px; } .mock-h1 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 4px; } .mock-h2 { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0 0 4px; } .mock-meta { font-size: 11.5px; color: var(--slate); margin-bottom: 14px; } .mock-meta-sm { font-size: 11px; color: var(--slate); } .mock-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #e6ebf2; border-radius: 8px; overflow: hidden; margin-top: 10px; } .mock-table th, .mock-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eef2f7; font-size: 11.5px; vertical-align: middle; } .mock-table thead th { background: #fafbfd; color: var(--slate); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; } .mock-table tbody tr:last-child td { border-bottom: none; } .mock-table tbody td { color: var(--text); } .mock-table tbody td:first-child { font-family: ui-monospace, monospace; color: var(--navy); font-weight: 500; } .mock-table .breach { color: var(--red); font-weight: 600; } .mock-audit code { background: #f3f5fa; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--text); } .mock-audit tbody td:nth-child(3) { color: var(--teal); font-weight: 600; } .m-prio, .m-status { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } .m-status.status-open { background: #e7f1ff; color: #1f4f9f; } .m-status.status-in_progress { background: #fff4dc; color: #8a5b00; } .m-status.status-on_hold { background: #f3eaff; color: #5b3a99; } .m-status.status-resolved { background: #e3f7ec; color: #1f6e44; } .m-prio.prio-low { background: #ebeef3; color: var(--slate); } .m-prio.prio-medium { background: #e7f1ff; color: #1f4f9f; } .m-prio.prio-high { background: #fff4dc; color: #8a5b00; } .m-prio.prio-critical { background: #fde9e3; color: var(--red); } /* Ticket detail mock */ .mock-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .mock-ticket-head > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; } .mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; } .mock-cards > div { background: white; border: 1px solid #e6ebf2; border-radius: 6px; padding: 8px 10px; } .mock-cards .lbl { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate); } .mock-cards .val { font-size: 13px; font-weight: 600; color: var(--navy); } .mock-comment { background: white; border: 1px solid #e6ebf2; border-left: 3px solid var(--teal); border-radius: 4px; padding: 8px 10px; margin-top: 8px; font-size: 11.5px; } .mock-comment.internal { border-left-color: var(--amber); background: #fff9ec; } .mock-comment p { margin: 4px 0 0; line-height: 1.45; color: var(--text); } .hero-mock { perspective: 1400px; } .hero-mock .mock-window { transform: rotateY(-3deg) rotateX(2deg); transform-origin: top right; } .mock-window-sm { font-size: 11px; } /* ---------- GENERIC CONTAINERS ---------- */ .lh-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .lh-section { padding: 96px 0; } .lh-band { background: #f6f8fb; } .lh-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 11.5px; font-weight: 700; margin: 0 0 14px 0; color: var(--teal); } .lh-eyebrow-dark { color: var(--slate); } .lh-eyebrow-light { color: var(--teal); } .landing-v3 .lh-h2 { font-size: 36px; line-height: 1.15; letter-spacing: -0.6px; font-weight: 800; margin: 0 0 16px 0; color: var(--navy); max-width: 820px; } .landing-v3 .lh-h2.light { color: white; } .landing-v3 .lh-section-sub { font-size: 17px; color: var(--slate); line-height: 1.55; max-width: 720px; margin: 0 0 40px 0; } .landing-v3 .lh-section-sub.light { color: rgba(255,255,255,0.85); } /* ---------- WHO IT'S FOR ---------- */ .industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin-top: 32px; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .industries > div { padding: 20px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .industries > div:last-child { border-right: none; } .industries strong { font-size: 14px; color: var(--navy); } .industries span { font-size: 12.5px; color: var(--slate); } /* ---------- FEATURE ROWS (the alternating big sections) ---------- */ .features-stack { display: grid; gap: 96px; margin-top: 40px; } .feature-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; } .feature-row.reverse > .feature-text { order: 2; } .feature-row.reverse > .feature-mock { order: 1; } .feature-text h3 { font-size: 28px; line-height: 1.2; letter-spacing: -0.4px; font-weight: 700; color: var(--navy); margin: 0 0 14px; } .feature-text p { font-size: 16px; line-height: 1.65; color: var(--slate); margin: 0 0 18px; } .feature-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .feature-bullets li { padding-left: 28px; position: relative; font-size: 14.5px; line-height: 1.55; color: var(--text); } .feature-bullets li:before { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: rgba(26,166,183,0.15); box-shadow: inset 0 0 0 4px var(--teal); } .feature-mock { perspective: 1400px; } .feature-mock .mock-window { transform: rotateY(0) rotateX(0); } /* ---------- MODULE ROWS ---------- */ .module-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; } .module-rows > div { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; } .module-rows h4 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--slate); font-weight: 700; } .module-rows ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .module-rows li { font-size: 14.5px; line-height: 1.4; color: var(--text); padding-left: 16px; position: relative; } .module-rows li:before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } .lh-soon, .lh-tag-included { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; font-weight: 700; margin-left: 4px; vertical-align: middle; } .lh-soon { background: var(--amber); color: white; } .lh-tag-included { background: #1f6e44; color: white; } /* ---------- COMPLIANCE ---------- */ .compliance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 32px; } .compliance-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 24px; } .compliance-badge { display: inline-block; background: var(--navy); color: white; font-weight: 700; font-size: 12.5px; letter-spacing: 0.5px; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; } .compliance-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .compliance-card li { font-size: 13.5px; line-height: 1.5; color: var(--text); padding-left: 18px; position: relative; } .compliance-card li:before { content: "—"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 600; } /* ---------- TIMELINE ---------- */ .lh-timeline { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: tl; position: relative; } .lh-timeline:before { content: ""; position: absolute; top: 18px; left: 6%; right: 6%; height: 2px; background: linear-gradient(to right, var(--navy), var(--teal)); z-index: 0; } .lh-timeline li { text-align: center; position: relative; padding: 0 10px; } .lh-timeline li:before { counter-increment: tl; content: counter(tl); display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: white; font-weight: 700; line-height: 38px; margin: 0 auto 14px; position: relative; z-index: 1; border: 4px solid #f6f8fb; box-shadow: 0 0 0 1px var(--line); } .lh-timeline span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--slate); margin-bottom: 4px; font-weight: 600; } .lh-timeline strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 6px; } .lh-timeline p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--slate); } /* ---------- CTA ---------- */ .lh-cta-band-section { background: linear-gradient(135deg, var(--navy) 0%, #1a4a7a 100%); color: white; } .lh-cta-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .lh-cta-band h2 { color: white; max-width: none; } .lh-cta-band .lh-section-sub.light { margin-bottom: 18px; } .lh-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .lh-contact-list li { font-size: 14px; color: rgba(255,255,255,0.85); display: flex; gap: 14px; } .lh-contact-list span { display: inline-block; width: 60px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); font-weight: 700; flex-shrink: 0; } .lh-contact-list a { color: white; text-decoration: underline; } .lh-contact-list a:hover { color: var(--teal); } .lh-cta-form { background: white; border-radius: 14px; padding: 28px 30px; display: grid; gap: 12px; color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,0.2); } .lh-cta-form h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); text-transform: none; letter-spacing: 0; } .lh-cta-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--slate); font-weight: 600; } .lh-cta-form input, .lh-cta-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-family: inherit; background: white; color: var(--text); } .lh-cta-form input:focus, .lh-cta-form textarea:focus { outline: 2px solid rgba(26,166,183,0.35); border-color: var(--teal); } .lh-cta-form textarea { resize: vertical; } .lh-cta-form button { margin-top: 6px; } .lh-form-fineprint { margin: 4px 0 0; font-size: 11.5px; color: var(--slate); line-height: 1.45; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1080px) { .hero-grid, .feature-row, .lh-cta-band { grid-template-columns: 1fr; gap: 40px; } .feature-row.reverse > .feature-text { order: 0; } .feature-row.reverse > .feature-mock { order: 0; } .hero-mock .mock-window { transform: none; } .module-rows { grid-template-columns: 1fr; } } @media (max-width: 720px) { .lh-section { padding: 64px 0; } .landing-v3 .lh-h1 { font-size: 40px; letter-spacing: -1px; } .landing-v3 .lh-h2 { font-size: 28px; } .landing-v3 .lh-lede { font-size: 16px; } .lh-cta-row { flex-direction: column; } .lh-button { text-align: center; } .lh-timeline { grid-template-columns: 1fr; gap: 18px; } .lh-timeline:before { display: none; } .lh-timeline li { display: grid; grid-template-columns: 50px 1fr; align-items: center; text-align: left; gap: 12px; } .lh-timeline li:before { margin: 0; } .lh-timeline span, .lh-timeline strong, .lh-timeline p { grid-column: 2; } } /* ================================================================= * Old v2 landing styles below — superseded by .landing-v3 above. * Left in for backwards compatibility with any cached HTML. * ================================================================= */ .landing-v2 main { max-width: none; padding: 0; } .landing-v2 .topbar { background: white; color: var(--navy); border-bottom: 1px solid var(--line); } .landing-v2 .topbar .brand-mark { color: var(--navy); } .landing-v2 .topbar .brand-product { color: var(--teal); } .landing-v2 .topbar nav a { color: var(--navy); } .landing-v2 .topbar nav a:hover { color: var(--teal); } .lh-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .lh-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--teal); font-weight: 700; margin: 0 0 12px 0; } .lh-eyebrow-dark { color: var(--navy); } .lh-eyebrow-light { color: var(--teal); } .lh-h1 { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 18px 0; color: var(--navy); } .lh-h1 .accent { color: var(--teal); display: block; } .lh-h2 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 12px 0; color: var(--navy); } .lh-h2.center { text-align: center; } .lh-h2.light { color: white; } .lh-lede { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0 0 24px 0; max-width: 580px; } .lh-prose { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 16px 0; } .lh-section-sub { font-size: 16px; color: var(--slate); max-width: 720px; margin: 0 0 32px 0; } .lh-section-sub.center { margin-left: auto; margin-right: auto; text-align: center; } .lh-section-sub.light { color: rgba(255,255,255,0.85); } .lh-section { padding: 80px 0; } .lh-band { background: #f4f6fa; } .lh-band-dark { background: linear-gradient(135deg, #11233f 0%, #0a1d3a 50%, #1a4a7a 100%); color: white; } .lh-band-dark .lh-h2, .lh-band-dark h3 { color: white; } .lh-band-dark .lh-promise-grid p { color: rgba(255,255,255,0.85); } /* ---------------------------- HERO ---------------------------- */ .lh-hero { background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%); padding: 72px 0 88px 0; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .lh-hero-bullets { list-style: none; padding: 0; margin: 0 0 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } .lh-hero-bullets li { font-size: 14px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.45; } .lh-hero-bullets li:before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: rgba(26,166,183,0.18); box-shadow: inset 0 0 0 4px var(--teal); } .lh-cta-row { display: flex; flex-wrap: wrap; gap: 10px; } .lh-button { display: inline-block; padding: 11px 22px; font-size: 14px; font-weight: 600; border-radius: 6px; border: 1px solid var(--line); background: white; color: var(--navy); text-decoration: none; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .lh-button:hover { background: #eef2f7; } .lh-button.primary { background: var(--navy); color: white; border-color: var(--navy); } .lh-button.primary:hover { background: #1c3760; border-color: #1c3760; } .lh-button.ghost { background: transparent; color: var(--navy); border-color: rgba(17,35,63,0.25); } .lh-button.ghost:hover { background: rgba(17,35,63,0.05); border-color: var(--navy); } .lh-button.big { padding: 13px 26px; font-size: 15px; } .lh-hero-art svg { width: 100%; height: auto; max-width: 480px; display: block; margin-left: auto; box-shadow: 0 24px 60px rgba(11,28,52,0.22); border-radius: 14px; } /* ---------------------------- TRUST STRIP ---------------------------- */ .lh-trust { border-bottom: 1px solid var(--line); background: white; padding: 24px 0; } .lh-trust-tag { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slate); margin: 0 0 10px 0; font-weight: 600; } .lh-trust-row { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; } .lh-trust-row span { font-size: 14px; color: var(--navy); font-weight: 600; letter-spacing: 0.3px; } /* ---------------------------- TWO-COL SECTION ---------------------------- */ .two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .lh-pain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .lh-pain-list li { background: white; border: 1px solid var(--line); border-left: 3px solid var(--teal); padding: 14px 18px; border-radius: 6px; font-size: 14px; line-height: 1.5; color: var(--text); } .lh-pain-list li strong { color: var(--navy); } /* ---------------------------- PILLARS ---------------------------- */ .lh-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 32px; } .lh-pillar { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 24px; text-align: left; } .lh-pillar-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(26,166,183,0.12); color: var(--teal); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .lh-pillar-icon svg { width: 22px; height: 22px; } .lh-pillar h3 { font-size: 15px; margin: 0 0 6px; color: var(--navy); text-transform: none; letter-spacing: 0; } .lh-pillar p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--slate); } /* ---------------------------- CAPABILITY CHECKLIST ---------------------------- */ .lh-cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; } .lh-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .lh-checks li { padding-left: 28px; position: relative; font-size: 14.5px; line-height: 1.5; color: var(--text); } .lh-checks li:before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--teal); font-weight: 700; font-size: 14px; } /* ---------------------------- MODULE CARDS ---------------------------- */ .lh-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 32px; } .lh-module-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 20px; position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .lh-module-card:hover { border-color: var(--teal); box-shadow: 0 8px 24px rgba(26,166,183,0.14); transform: translateY(-2px); } .lh-module-card.lh-card-featured { border-color: var(--teal); box-shadow: 0 4px 16px rgba(26,166,183,0.08); } .lh-module-icon { width: 38px; height: 38px; border-radius: 8px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .lh-module-icon svg { width: 20px; height: 20px; } .lh-module-card h3 { font-size: 15.5px; margin: 0 0 6px; color: var(--navy); text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lh-module-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--slate); } .lh-module-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; border-top: 1px dashed var(--line); padding-top: 12px; } .lh-module-card li { font-size: 13px; line-height: 1.45; color: var(--text); padding-left: 18px; position: relative; } .lh-module-card li:before { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } .lh-soon { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; background: var(--amber); color: white; padding: 2px 6px; border-radius: 3px; font-weight: 700; } .lh-tag-included { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; background: #1f6e44; color: white; padding: 2px 6px; border-radius: 3px; font-weight: 700; } /* ---------------------------- COMPLIANCE ---------------------------- */ .lh-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 24px; } .lh-comp-card { background: white; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 10px; padding: 22px; } .lh-comp-card h3 { font-size: 16px; margin: 0 0 12px; color: var(--navy); text-transform: none; letter-spacing: 0; } .lh-comp-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .lh-comp-card li { font-size: 13.5px; line-height: 1.5; color: var(--text); padding-left: 18px; position: relative; } .lh-comp-card li:before { content: "—"; position: absolute; left: 0; top: 0; color: var(--teal); } /* ---------------------------- BRAND PROMISE ---------------------------- */ .lh-promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; } .lh-promise-grid > div { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 24px; backdrop-filter: blur(4px); } .lh-promise-grid h3 { font-size: 16px; margin: 0 0 8px; text-transform: none; letter-spacing: 0; color: white; } .lh-promise-grid p { margin: 0; font-size: 14px; line-height: 1.6; } /* ---------------------------- TIMELINE ---------------------------- */ .lh-timeline { list-style: none; padding: 0; margin: 24px 0 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: tl; position: relative; } .lh-timeline:before { content: ""; position: absolute; top: 18px; left: 5%; right: 5%; height: 2px; background: linear-gradient(to right, var(--navy), var(--teal)); z-index: 0; } .lh-timeline li { text-align: center; position: relative; padding: 0 8px; } .lh-timeline li:before { counter-increment: tl; content: counter(tl); display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: white; font-weight: 700; line-height: 36px; margin: 0 auto 12px; position: relative; z-index: 1; border: 3px solid white; box-shadow: 0 0 0 1px var(--line); } .lh-timeline span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--slate); margin-bottom: 2px; } .lh-timeline strong { display: block; font-size: 14.5px; color: var(--navy); margin-bottom: 4px; } .lh-timeline p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--slate); } .lh-engagement-tail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 20px; } .lh-engagement-tail > div { font-size: 13.5px; color: var(--text); line-height: 1.5; } .lh-engagement-tail strong { color: var(--navy); display: block; margin-bottom: 4px; } /* ---------------------------- CTA BAND ---------------------------- */ .lh-cta-band-section { background: linear-gradient(135deg, #11233f 0%, #1a4a7a 100%); } .lh-cta-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; color: white; } .lh-cta-band h2 { color: white; } .lh-contact-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .lh-contact-list li { font-size: 14px; color: rgba(255,255,255,0.85); } .lh-contact-list span { display: inline-block; width: 60px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--teal); font-weight: 700; } .lh-contact-list a { color: white; text-decoration: underline; } .lh-contact-list a:hover { color: var(--teal); } .lh-cta-form { background: white; border-radius: 10px; padding: 28px; display: grid; gap: 12px; color: var(--text); } .lh-cta-form h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); text-transform: none; letter-spacing: 0; } .lh-cta-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--slate); font-weight: 600; } .lh-cta-form input, .lh-cta-form textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; font-size: 14px; font-family: inherit; background: white; color: var(--text); } .lh-cta-form textarea { resize: vertical; } .lh-cta-form button { margin-top: 4px; } .lh-form-fineprint { margin: 4px 0 0; font-size: 11.5px; color: var(--slate); line-height: 1.45; } /* ---------------------------- RESPONSIVE ---------------------------- */ @media (max-width: 960px) { .hero-grid, .two-col, .lh-cap-grid, .lh-cta-band { grid-template-columns: 1fr; gap: 40px; } .lh-hero-art { display: none; } .lh-hero-bullets { grid-template-columns: 1fr; } .lh-h1 { font-size: 34px; } .lh-h2 { font-size: 24px; } .lh-section { padding: 56px 0; } .lh-timeline { grid-template-columns: 1fr; gap: 18px; } .lh-timeline:before { display: none; } .lh-timeline li { display: grid; grid-template-columns: 50px 1fr; align-items: center; text-align: left; } .lh-timeline li:before { margin: 0; } .lh-timeline span, .lh-timeline strong, .lh-timeline p { grid-column: 2; } } @media (max-width: 540px) { .lh-h1 { font-size: 28px; } .lh-trust-row { gap: 18px; } .lh-cta-row { flex-direction: column; } .lh-button { text-align: center; } } /* ============================================================ PREMIUM CUSTOM STYLING OVERHAUL — THE WOW FACTOR ============================================================ */ /* Primary and Accent Button Enhancements */ button.primary, .btn-primary, a.button.primary, .button.primary { background: linear-gradient(135deg, #1B2A4A 0%, #0097A7 100%) !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; font-family: var(--font-sans) !important; padding: 10px 22px !important; border-radius: var(--r-md) !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center; gap: 8px; } button.primary:hover, .btn-primary:hover, a.button.primary:hover, .button.primary:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5), 0 0 0 2px rgba(79, 70, 229, 0.3) !important; } /* Standard Buttons */ .button, button:not(.primary), input[type="submit"]:not(.primary) { background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--text-2) !important; font-weight: 600 !important; border-radius: var(--r-md) !important; padding: 9px 18px !important; transition: all 0.25s ease !important; } .button:hover, button:not(.primary):hover { background: var(--hover) !important; border-color: var(--line-strong) !important; color: var(--text-1) !important; transform: translateY(-1px) !important; } /* SVG Sparkline & Chart Glows */ .kpi-spark svg, .chart-line { overflow: visible !important; } .kpi-spark polyline, .chart-line polyline { stroke: #0097A7 !important; stroke-width: 2.8px !important; filter: drop-shadow(0 3px 6px rgba(59, 130, 246, 0.45)) !important; } .kpi-spark path, .chart-line path { fill: #0097A7 !important; fill-opacity: 0.08 !important; } .chart-line circle { fill: #0097A7 !important; stroke: var(--surface) !important; stroke-width: 1.5px !important; r: 4px !important; transition: all 0.2s ease !important; } .chart-line circle:hover { r: 6px !important; fill: #ffffff !important; stroke: #0097A7 !important; cursor: pointer; } /* Donut & H-Bar Layouts */ .chart-donut svg { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12)); } .chart-donut text { font-family: var(--font-sans) !important; } .chart-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; list-style: none; padding: 16px !important; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--line); margin-top: 18px !important; } .chart-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); } .chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } /* Glowing Neon Pills for Status & Priority */ .status-pill, .prio-pill, .status-open, .status-in_progress, .status-resolved, .status-closed, .status-cancelled, .prio-low, .prio-medium, .prio-high, .prio-critical { font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 20px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .status-resolved, .status-approved, .status-completed { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.1) !important; } .status-open, .status-draft { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%) !important; color: #0097A7 !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.1) !important; } .status-in_progress, .status-under_review, .status-investigating { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.1) !important; } .status-cancelled, .status-failed, .status-rejected { background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(244, 63, 94, 0.04) 100%) !important; color: #f43f5e !important; border: 1px solid rgba(244, 63, 94, 0.25) !important; box-shadow: 0 0 10px rgba(244, 63, 94, 0.1) !important; } .prio-critical { background: linear-gradient(135deg, rgba(244, 63, 94, 0.18) 0%, rgba(244, 63, 94, 0.06) 100%) !important; color: #f43f5e !important; border: 1px solid rgba(244, 63, 94, 0.35) !important; box-shadow: 0 0 12px rgba(244, 63, 94, 0.15) !important; } /* Frosted Glass Floating Topbar */ .topbar { background: var(--topbar-bg) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid var(--topbar-border) !important; box-shadow: var(--topbar-shadow) !important; padding: 12px 32px !important; } /* Beautiful Form Inputs */ .gs-input, input[type="text"], input[type="password"], input[type="email"], select, textarea { background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--text-1) !important; border-radius: var(--r-sm) !important; padding: 10px 14px !important; transition: all 0.25s ease !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); } .gs-input:focus, input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: var(--focus-ring), inset 0 2px 4px rgba(0,0,0,0.01) !important; outline: none !important; background: var(--surface) !important; } /* Gorgeous Data Tables */ table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; border-radius: var(--r-md) !important; overflow: hidden !important; border: 1px solid var(--line) !important; background: var(--surface) !important; } th { background: var(--surface-2) !important; color: var(--text-1) !important; font-family: var(--font-sans) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 0.8px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--line) !important; } td { padding: 14px 18px !important; border-bottom: 1px solid var(--line) !important; color: var(--text-2) !important; transition: background 0.15s ease; } tr:last-child td { border-bottom: none !important; } tr:hover td { background: var(--hover) !important; } /* ============================================================ ADVANCED PREMIUM AESTHETIC POLISH & ENTRANCE ANIMATIONS ============================================================ */ /* High-fidelity Card frosted shadows override */ .card, .kpi-card, .report-card, .comment, .auth-card { position: relative; background: var(--surface) !important; border: 1px solid var(--line) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .card:hover, .kpi-card:hover, .report-card:hover, .comment:hover { transform: translateY(-4px) scale(1.01) !important; border-color: rgba(59, 130, 246, 0.35) !important; box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5), 0 0 24px -2px rgba(59, 130, 246, 0.15) !important; } :root[data-theme="light"] .card:hover, :root[data-theme="light"] .kpi-card:hover, :root[data-theme="light"] .report-card:hover, :root[data-theme="light"] .comment:hover { border-color: rgba(37, 99, 235, 0.28) !important; box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.08), 0 0 24px -2px rgba(37, 99, 235, 0.08) !important; } /* Staggered entry animation keyframes */ @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Apply entrance animations to page elements */ .card, .kpi-card, .report-card, .comment, table.data, .filters, .empty, .auth-card { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; } /* Stagger delay classes */ .cards > .card:nth-child(1), .kpi-grid > .kpi-card:nth-child(1) { animation-delay: 0.04s; } .cards > .card:nth-child(2), .kpi-grid > .kpi-card:nth-child(2) { animation-delay: 0.08s; } .cards > .card:nth-child(3), .kpi-grid > .kpi-card:nth-child(3) { animation-delay: 0.12s; } .cards > .card:nth-child(4), .kpi-grid > .kpi-card:nth-child(4) { animation-delay: 0.16s; } .cards > .card:nth-child(5), .kpi-grid > .kpi-card:nth-child(5) { animation-delay: 0.20s; } /* Micro-animations and tactile feedback for all buttons */ button, .button, input[type="submit"] { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } button:hover, .button:hover, input[type="submit"]:hover { transform: translateY(-1px) !important; } button:active, .button:active, input[type="submit"]:active { transform: translateY(1px) scale(0.97) !important; } /* Modern clean focus indicators */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; border-radius: 4px !important; } /* Beautiful Premium Dropdown Arrow for all select tags */ select { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 36px !important; cursor: pointer !important; } :root[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; } /* ============================================================= HARD OVERRIDES FOR DANGER SOLID BUTTONS TO ENSURE HIGH VISIBILITY ============================================================= */ button.danger-solid, .button.danger-solid { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; border: none !important; color: white !important; font-weight: 600 !important; box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.4) !important; padding: 8px 16px !important; } button.danger-solid:hover, .button.danger-solid:hover { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.5) !important; color: white !important; transform: translateY(-1px) !important; } /* ════════════ Frozen table headers — app-wide (V6.38, TEMA request) ════════════ Column headers stay pinned while rows scroll. Tables sitting directly on the page stick just below the sticky topbar (its height is measured into --topbar-h by base.html). Tables inside an overflow-x wrapper become their own scroll box (so very long tables scroll in place) and pin to its top. Headers must be OPAQUE — the theme's translucent surface tokens let rows ghost through a sticky header, so a solid composite is used instead. */ :root { --th-solid: #1a2033; } :root[data-theme="light"] { --th-solid: #eef0f7; } table.data thead th { position: sticky; top: var(--topbar-h, 60px); z-index: 5; /* under the topbar (50 is on a later layer) */ background: var(--th-solid); box-shadow: inset 0 -1px 0 var(--line-strong); } div[style*="overflow-x:auto"]:has(table.data), div[style*="overflow-x: auto"]:has(table.data) { max-height: 74vh; overflow: auto; } div[style*="overflow-x:auto"] table.data thead th, div[style*="overflow-x: auto"] table.data thead th, .t-scroll table.data thead th { top: 0; } /* ── OCTO-PATCH (Third Octopus, 19 Aug 2026) ─────────────────────────────── Deliberately small. The build already ships "Frozen table headers (V6.38)" above, which pins headers correctly and scopes them to a scroll box where one exists. Earlier versions of this patch duplicated that with different offsets and fought it, which is what froze the licence-register header partway down the page. Only what V6.38 cannot do for itself is kept: 1. table.data sits in the slideUp entrance animation, which animates `transform` with fill-mode `both`, so the final keyframe stays applied for the life of the page. An identity translateY(0) is still a transform, and a transformed element becomes the containing block for its descendants — which disables position:sticky on the header entirely. Tables therefore fade without moving. 2. `overflow: hidden` on the table (for the rounded corners) makes the table its own scrollport, confining the sticky header to the table box. `clip` clips identically without creating a scrollport. Declared as a pair so a browser without `clip` keeps `hidden`. 3. TEMA asked for no up/down arrows in headers. The click-to-sort script (V6.37) appends to every sortable header; hiding it removes the indicator everywhere while click-to-sort keeps working. ------------------------------------------------------------------------ */ @keyframes octoTableFadeIn { from { opacity: 0; } to { opacity: 1; } } table.data { animation: octoTableFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important; transform: none !important; overflow: hidden !important; overflow: clip !important; } th .th-car { display: none !important; } /* OCTO-SCROLLBOX-EXEMPT ------------------------------------------------------ The clip above is for tables that sit directly on the page: it stops the table becoming its own scrollport so the header can pin below the topbar. Pages that manage their own scroll box (.m-scroll on the software metric pages, and any wrapper with overflow) already set the table to overflow:visible on purpose, so the sticky header pins to the BOX rather than to the table. Clipping those tables re-breaks exactly that: the header pins inside the table and freezes partway down the page over a row. Leave them alone. --------------------------------------------------------------------------- */ .m-scroll table.data, .t-scroll table.data, div[style*="overflow"] table.data { overflow: visible !important; } /* OCTO-METRIC-ALIGN ---------------------------------------------------------- The software dashboard metric pages wrap their table in `.m-scroll`, a 70vh box, and pin the header to the top of THAT box. It is a sound design, but it puts the header partway down the page, which reads as a bar floating over a row. TEMA want these to behave like the Asset Register: the page scrolls, and the header parks just below the topbar. So the inner scrollport is switched off and the offset re-targeted at --topbar-h. Everything else the page sets -- the opaque header composite, the animation/transform reset -- still applies. --------------------------------------------------------------------------- */ .m-scroll { max-height: none !important; overflow: visible !important; } .m-scroll thead th { top: var(--topbar-h, 75px) !important; } /* No up/down arrows in any header. The click-to-sort script (V6.37) appends .th-car; the metric pages render their own .sort-caret. Both go; sorting itself keeps working. */ th .th-car, th .sort-caret { display: none !important; } /* OCTO-WRAPPER-ALIGN --------------------------------------------------------- Same treatment as the metric pages, for tables in an overflow-x wrapper -- the licence register above all. V6.38 turns those wrappers into a 74vh box and pins the header to its top, which puts the header partway down the page. TEMA want every table to read like the Asset Register: the page scrolls and the header parks under the topbar. Trade-off worth knowing: these tables are wider than the window (the licence register sets min-width:1560px), so the PAGE now scrolls sideways instead of the card. The header scrolls with it horizontally, as it should, and stays pinned vertically. --------------------------------------------------------------------------- */ div[style*="overflow-x:auto"]:has(table.data), div[style*="overflow-x: auto"]:has(table.data), .t-scroll:has(table.data) { max-height: none !important; overflow: visible !important; } div[style*="overflow-x:auto"] table.data thead th, div[style*="overflow-x: auto"] table.data thead th, .t-scroll table.data thead th { top: var(--topbar-h, 75px) !important; } /* OCTO-CARD-CONTAINING-BLOCK ------------------------------------------------- THE root cause of the floating/vanishing headers. `.card` carries backdrop-filter: blur(24px). Like transform and filter, a backdrop-filter makes the element a containing block for its descendants, which disables position:sticky inside it -- the header sticks to the CARD, and because the card is as tall as its table, it scrolls off the top with the page. The card's :hover transform does the same thing intermittently. This is why the metric pages wrapped their tables in a 70vh scroll box: it was a workaround for this, not a preference. And it is why the Asset Register was always fine -- its table is not inside a card. Only cards that actually contain a data table are affected; every other card keeps the frosted-glass look. --------------------------------------------------------------------------- */ .card:has(table.data), .metric-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .card:has(table.data):hover, .metric-card:hover { transform: none !important; } /* OCTO-CARD-ANIMATION -------------------------------------------------------- Companion to the block above. A card wrapping a data table is also in the slideUp entrance animation, and fill-mode `both` leaves its final keyframe -- transform: translateY(0) -- applied for the life of the page. An identity transform is still a transform, so the card stays a containing block and the sticky header sticks to the card instead of the page, exactly as the backdrop-filter did. Those cards fade instead of sliding. Cards without a table keep the slide. --------------------------------------------------------------------------- */ .card:has(table.data), .metric-card { animation: octoTableFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important; transform: none !important; } /* OCTO-NOSPARK - remove the KPI-card sparkline (TEMA India, Aug 2026) It is position:absolute bottom-right of .kpi-card, so it overlaps the .kpi-sub line ("5 past resolution SLA"). No axis, no scale, no label. Scoped to .kpi-card: the .chart-line "Tickets created" chart is untouched. */ .kpi-card .kpi-spark, .kpi-card svg.sparkline, .kpi-card .sparkline { display: none !important; } /* =========================================================================== OCTO-BRANDSIZE - larger topbar wordmark (TEMA India, Aug 2026) Requested by Ashutosh Pati, 26 Aug 2026, item 2: "The OctoAssist logo font appears too small." .brand-product 16px -> 19px the "OctoAssist" wordmark .brand-mark 11px -> 12px the "ITSM" tag, kept in proportion .topbar nav a padding 7px 12px -> 7px 10px !important on all three on purpose: - brand-mark carries an inline style="font-size:11px" in base.html, and a CSS-only patch cannot remove an inline style any other way; - this server's stylesheet ends in several late override blocks, so an ordinary rule appended here is not guaranteed to be the last word. The nav padding is not cosmetic drive-by work - see the header of Paste-BrandSize.ps1. Without it this change clips the Logout button on 1366-wide screens. =========================================================================== */ .topbar .brand-product { font-size: 19px !important; } .topbar .brand-mark { font-size: 12px !important; } .topbar nav a { padding: 7px 10px !important; }