/* ============================================================ 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: #3b82f6; --accent-hover: #4f46e5; --accent-soft: rgba(59, 130, 246, 0.08); --accent-border: rgba(59, 130, 246, 0.25); /* Brand Colors */ --navy: #090d1a; --teal: #3b82f6; /* 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: #64748b; /* slate-500 — placeholders, disabled text */ /* Legacy aliases */ --slate: var(--text-3); --text: var(--text-1); /* Semantic Alerts & Indicators */ --green: #10b981; --red: #f43f5e; --amber: #f59e0b; --grey: #64748b; /* Soft Glowing Ambient Shadows - Dark Mode */ --shadow-1: 0 4px 20px -2px rgba(3, 7, 18, 0.4), 0 2px 8px -1px rgba(59, 130, 246, 0.03); --shadow-2: 0 12px 30px -4px rgba(3, 7, 18, 0.6), 0 4px 16px -2px rgba(59, 130, 246, 0.1); --shadow-3: 0 24px 50px -10px rgba(3, 7, 18, 0.8), 0 8px 30px -4px rgba(59, 130, 246, 0.15); --focus-ring: 0 0 0 3px rgba(59, 130, 246, 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: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.06); --accent-border: rgba(37, 99, 235, 0.15); --navy: #0f172a; --teal: #2563eb; --bg: #f4f7fc; --surface: rgba(255, 255, 255, 0.82); /* Frosted glass white cards */ --surface-2: rgba(241, 245, 249, 0.88); /* Inner cards and table heads */ --line: rgba(15, 23, 42, 0.05); /* Micro borders */ --line-strong: rgba(15, 23, 42, 0.10); /* Active focus borders */ --hover: rgba(37, 99, 235, 0.03); /* Translucent accent hover */ --text-1: #0f172a; --text-2: #334155; --text-3: #627288; --text-4: #94a3b8; --green: #059669; --red: #e11d48; --amber: #d97706; /* Glowing Ambient Shadows - Light Mode */ --shadow-1: 0 8px 30px rgba(0, 0, 0, 0.02), 0 1px 8px rgba(37, 99, 235, 0.02); --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(37, 99, 235, 0.06); --shadow-3: 0 32px 64px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(37, 99, 235, 0.1); --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18); --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: "Plus Jakarta Sans", 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: #2563eb; 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: hidden; box-shadow: var(--shadow-1); } 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: "Plus Jakarta Sans", var(--font-sans); } .kpi-card .kpi-value { margin: 0; font-size: 38px; font-weight: 800; font-family: "Plus Jakarta Sans", 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: #f3f5fa; 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(--accent) 0%, #1d4ed8 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, #2563eb 0%, #1e40af 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: #fef2f2; border-color: #fca5a5; } 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: #fffbeb; border-color: #fde68a; } .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: white; 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(255,255,255,0.6); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); } /* ---------- Auth page ---------- */ .auth-page main { max-width: 420px; padding-top: 60px; } .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 { display: flex; flex-direction: column; gap: 12px; } .auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--slate); } .auth-card input { padding: 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; } .auth-card .meta { color: var(--slate); margin-top: 16px; font-size: 12px; } .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; } /* ---------- 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, #2563eb 0%, #4f46e5 100%) !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; font-family: 'Plus Jakarta Sans', 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: #3b82f6 !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: #3b82f6 !important; fill-opacity: 0.08 !important; } .chart-line circle { fill: #3b82f6 !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: #3b82f6 !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: 'Plus Jakarta Sans', 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: #3b82f6 !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: 'Plus Jakarta Sans', 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) both; } /* 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; }