/* * GlobalTrustID Panel * Brand: navy #00133e · blue #0055e5 (from trustid.svg) * * Theme: OS preference via prefers-color-scheme; explicit choice stamped as * data-theme on overrides both directions with the full token set. */ :root { --navy: #00133e; --blue: #0055e5; --blue-soft-hex: #2e79ff; --bg: #f4f7fc; --bg-elevated: #ffffff; --surface: #ffffff; --surface-alt: #eef2fa; --border: #dde4f0; --border-strong: #c5cfe3; --text: #0c1a3a; --text-secondary: #4c5a7a; --text-tertiary: #8490ab; --primary: #0055e5; --primary-hover: #0044b8; --primary-soft: rgba(0, 85, 229, 0.10); --primary-ring: rgba(0, 85, 229, 0.28); --success: #059669; --success-soft: rgba(5, 150, 105, 0.12); --warning: #d97706; --warning-soft: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.10); --shadow-sm: 0 1px 2px rgba(0, 19, 62, 0.05); --shadow-md: 0 6px 20px rgba(0, 19, 62, 0.07); --shadow-lg: 0 18px 50px rgba(0, 19, 62, 0.12); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --sidebar-w: 260px; --topbar-h: 64px; --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #060b18; --bg-elevated: #0c1426; --surface: #0e1628; --surface-alt: #152038; --border: #1c2a44; --border-strong: #2a3c5c; --text: #f1f5ff; --text-secondary: #93a0bd; --text-tertiary: #64748b; --primary: #3b82f6; --primary-hover: #60a5fa; --primary-soft: rgba(59, 130, 246, 0.16); --primary-ring: rgba(59, 130, 246, 0.35); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --bg: #060b18; --bg-elevated: #0c1426; --surface: #0e1628; --surface-alt: #152038; --border: #1c2a44; --border-strong: #2a3c5c; --text: #f1f5ff; --text-secondary: #93a0bd; --text-tertiary: #64748b; --primary: #3b82f6; --primary-hover: #60a5fa; --primary-soft: rgba(59, 130, 246, 0.16); --primary-ring: rgba(59, 130, 246, 0.35); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: var(--surface-alt); color: var(--primary); } /* ---------- typography ---------- */ h1 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 6px; color: var(--text); } h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 4px; color: var(--text); } p { margin: 0; } .muted { color: var(--text-secondary); font-size: 0.92rem; } .tiny { color: var(--text-tertiary); font-size: 0.78rem; } .subtitle { color: var(--text-secondary); font-size: 0.95rem; margin: 0 0 22px; } /* Lucide icons — size via class, color via currentColor */ .icon { width: 18px; height: 18px; stroke-width: 1.85; flex-shrink: 0; } .icon-sm { width: 15px; height: 15px; } .icon-lg { width: 22px; height: 22px; } .icon-xl { width: 28px; height: 28px; } /* ---------- brand ---------- */ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand:hover { text-decoration: none; } .brand-logo { height: 28px; width: auto; display: block; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--primary) 0%, #003bb0 100%); color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 85, 229, 0.3); } .brand-mark .icon { width: 18px; height: 18px; } .brand-name { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.03em; } .brand-sub { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } /* ---------- auth / wizard shell ---------- */ .shell { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 48px 20px; position: relative; overflow: hidden; } .shell::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(42rem 28rem at 88% -10%, rgba(0, 85, 229, 0.14), transparent 60%), radial-gradient(34rem 24rem at -10% 90%, rgba(0, 85, 229, 0.08), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%); } .shell > .card { position: relative; z-index: 1; } .card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 36px; } .card-sm { max-width: 440px; } .card-md { max-width: 560px; } .card-lg { max-width: 760px; } .guest-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } /* ---------- forms ---------- */ label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; } /* The bare `input:not([type])` matters: type is optional in HTML and defaults to text, so a field written without it looked completely unstyled while the markup beside it looked identical. Listing the remaining text-like types here too means a future field cannot silently fall outside this rule. */ input:not([type]), input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], select, textarea { width: 100%; padding: 11px 13px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.94rem; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); background: var(--surface); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } textarea { resize: vertical; min-height: 76px; } .field { margin-bottom: 16px; } .field-row { display: flex; gap: 14px; } .field-row > .field { flex: 1; min-width: 0; } .hint { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 6px; } /* ---------- user menu ---------- */ .user-menu { position: relative; } .user-menu > summary { list-style: none; cursor: pointer; } .user-menu > summary::-webkit-details-marker { display: none; } .user-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .user-chip-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; } .user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-chip-name { font-size: 0.85rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip-caret { color: var(--text-tertiary); } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 236px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(12, 26, 58, 0.16); } .user-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .user-menu-name { font-weight: 600; font-size: 0.88rem; } .user-menu-email { font-size: 0.78rem; color: var(--text-tertiary); word-break: break-all; } .user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; font: inherit; font-size: 0.86rem; color: var(--text); text-decoration: none; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; } .user-menu-item:hover { background: var(--surface-alt); } .user-menu-danger { color: var(--danger, #c02626); } .user-menu-sep { height: 1px; margin: 6px 0; background: var(--border); } /* ---------- 2FA code input ---------- */ .code-input { font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; } /* ---------- status lines, completion, org summary ---------- */ .status-line { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 0.88rem; } .status-ok { color: #167a3d; } .completion-value { font-size: 1.6rem; font-weight: 700; margin-right: 6px; } .gap-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; } .gap-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 0.88rem; background: var(--surface-alt); border-radius: var(--radius-sm); } .gap-icon-empty { color: var(--text-tertiary); } .org-summary { display: flex; align-items: center; gap: 14px; } .org-summary-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); font-weight: 700; display: flex; align-items: center; justify-content: center; } .org-summary-body { flex: 1; min-width: 0; } .org-summary-body h2 { margin: 0; font-size: 1.05rem; } .org-summary-progress { margin-top: 16px; display: grid; gap: 8px; } .org-summary-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--primary); text-decoration: none; } .org-summary-link:hover { text-decoration: underline; } @media (max-width: 520px) { .avatar-picker-row { flex-direction: column; } .user-chip-name { display: none; } } /* Key rows put the value and its copy button on one line; the value may be long, so it shrinks and the button never wraps under it. */ .key-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .key-line code { overflow-wrap: anywhere; } .btn-xs { padding: 2px 7px; font-size: 0.72rem; gap: 4px; } /* Compact select for inline row controls (member role picker). */ .select-sm { padding: 5px 8px; font-size: 0.82rem; width: auto; min-width: 120px; } /* ---------- confirm dialog ---------- */ .confirm-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 14, 33, 0.55); } .confirm-backdrop[hidden] { display: none; } .confirm-card { width: 100%; max-width: 420px; padding: 22px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(6, 14, 33, 0.35); } .confirm-title { margin: 0 0 8px; font-size: 1rem; } .confirm-text { margin: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ---------- integrations ---------- */ .scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 6px; } .scope-check { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: .86rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; flex-wrap: wrap; } .scope-check input { width: auto; margin: 0; flex: 0 0 auto; } .scope-check code { color: var(--text-tertiary); } .delivery-list { display: grid; gap: 6px; } .delivery-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface-alt); border-radius: var(--radius-sm); flex-wrap: wrap; } .delivery-event { flex: 1; min-width: 140px; } .delivery-error { padding: 6px 12px 10px; color: var(--danger, #c02626); overflow-wrap: anywhere; } /* ---------- billing plan list ---------- */ .plan-list { display: grid; gap: 10px; } .plan-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; } .plan-row.is-current { border-color: var(--primary); background: var(--primary-soft); } .plan-row-body { flex: 1; min-width: 150px; } .plan-row-name { display: flex; align-items: center; gap: 8px; font-weight: 700; flex-wrap: wrap; } .plan-row-price { text-align: right; min-width: 92px; } .plan-row-price strong { font-size: 1.1rem; color: var(--text); } @media (max-width: 520px) { .plan-row-price { text-align: left; } } /* ---------- coming soon ---------- */ .soon-hero { display: flex; align-items: center; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .soon-art { position: relative; flex: 0 0 auto; width: 120px; height: 120px; } .soon-art svg { width: 100%; height: 100%; } .soon-art-ring { fill: none; stroke: var(--primary); } .soon-art-ring-outer { stroke-opacity: 0.16; stroke-width: 1.5; stroke-dasharray: 6 8; } .soon-art-ring-inner { stroke-opacity: 0.28; stroke-width: 1.5; } .soon-art-core { fill: var(--primary-soft); } /* The lucide glyph is a real element layered over the SVG rather than part of it, because lucide replaces tags at runtime and cannot draw inside an inline . */ .soon-art-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); } .soon-art-icon { display: none; } .soon-body { flex: 1; min-width: 0; } .soon-body h2 { margin: 0 0 6px; font-size: 1.05rem; } .countdown { display: flex; gap: 10px; margin-top: 16px; } .countdown-cell { flex: 0 0 auto; min-width: 68px; padding: 10px 8px; text-align: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); } .countdown-value { display: block; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; } .countdown-label { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-tertiary); } .soon-list { padding-top: 20px; } .soon-list h3 { margin: 0 0 10px; font-size: 0.92rem; } .soon-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .soon-list li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--text-secondary); } .soon-list li svg { color: var(--primary); } .soon-actions { margin-top: 22px; } @media (max-width: 640px) { .soon-hero { flex-direction: column; align-items: flex-start; gap: 18px; } .countdown { flex-wrap: wrap; } } /* ---------- image picker (avatar + logo) ---------- */ /* Slightly more breathing room than a plain .field: the picker is two columns tall and runs into the next label without it. */ .image-picker { margin-bottom: 22px; } .image-picker-row { display: flex; gap: 16px; align-items: flex-start; } .image-preview { flex: 0 0 auto; width: 96px; height: 96px; border: 1px solid var(--border); background: var(--surface-alt); overflow: hidden; display: flex; align-items: center; justify-content: center; } .image-preview-square { border-radius: var(--radius); } .image-preview-circle { border-radius: 50%; } .image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-preview-empty { width: 26px; height: 26px; border-radius: 6px; background: var(--border); } .image-picker-controls { flex: 1; min-width: 0; } .image-picker-tabs { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 10px; background: var(--surface-alt); border-radius: var(--radius-sm); } .image-tab { padding: 6px 12px; font: inherit; font-size: 0.82rem; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .image-tab.is-active { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(12, 26, 58, 0.08); } /* The real input stays in the DOM (it is what submits) but is never shown — the dropzone is its label in practice. */ .image-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-alt); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--primary); background: var(--primary-soft); } .dropzone.is-over { border-color: var(--primary); background: var(--primary-soft); } .dropzone-icon { color: var(--text-tertiary); } .dropzone-text { font-size: 0.86rem; color: var(--text-secondary); } .dropzone-hint { font-size: 0.76rem; color: var(--text-tertiary); } .image-remove { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; } .image-remove input { width: auto; margin: 0; } /* ---------- crop modal ---------- */ .crop-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 14, 33, 0.55); } .crop-modal[hidden] { display: none; } .crop-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(6, 14, 33, 0.35); overflow: hidden; } .crop-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .crop-head h3 { margin: 0; font-size: 0.95rem; } .crop-close { border: 0; background: transparent; cursor: pointer; font-size: 0.9rem; color: var(--text-tertiary); line-height: 1; } .crop-stage { position: relative; width: 100%; aspect-ratio: 1; background: #0b1428; display: flex; align-items: center; justify-content: center; overflow: hidden; } .crop-stage canvas { touch-action: none; cursor: grab; display: block; } .crop-stage canvas.is-dragging { cursor: grabbing; } /* The mask is inert: it shows where the crop lands without intercepting the drag that positions the image under it. */ .crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 9999px rgba(6, 14, 33, 0.45); border: 2px solid rgba(255, 255, 255, 0.85); } .crop-mask-circle { border-radius: 50%; } .crop-mask-square { border-radius: var(--radius); } .crop-controls { padding: 14px 18px 4px; } .crop-zoom { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); } .crop-zoom input { flex: 1; } .crop-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; } @media (max-width: 520px) { .image-picker-row { flex-direction: column; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid transparent; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary) 0%, #003bb0 100%); color: #fff; font-size: 0.92rem; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, border-color .15s ease; box-shadow: 0 6px 16px rgba(0, 85, 229, 0.28); white-space: nowrap; } .btn:hover { filter: brightness(1.06); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); } .btn-block { width: 100%; } .btn .icon { width: 16px; height: 16px; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; } .btn-ghost:hover { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text); filter: none; } .btn-danger { background: transparent; color: var(--danger); border-color: var(--border); box-shadow: none; } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); filter: none; } .btn-success { background: var(--success); color: #fff; box-shadow: 0 6px 16px rgba(5, 150, 105, 0.28); } .btn-success:hover { filter: brightness(1.08); color: #fff; } .btn-sm { padding: 7px 13px; font-size: 0.84rem; border-radius: var(--radius-sm); } /* ---------- alerts ---------- */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 20px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .alert .icon { margin-top: 1px; } .alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); } .alert-info { background: var(--primary-soft); border-color: var(--primary-ring); color: var(--text); } .alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); } /* ---------- choice cards ---------- */ .choice-list { display: grid; gap: 12px; margin-bottom: 26px; } .choice { display: flex; align-items: flex-start; gap: 14px; padding: 17px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease; } .choice:hover { border-color: var(--border-strong); transform: translateY(-1px); } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-ring); } .choice-icon { width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--primary); } .choice:has(input:checked) .choice-icon { background: var(--surface); border-color: var(--primary-ring); box-shadow: 0 4px 12px rgba(0, 85, 229, 0.15); } .choice-body { flex: 1; min-width: 0; } .choice-title { display: block; font-weight: 700; font-size: 0.94rem; } .choice-desc { display: block; color: var(--text-secondary); font-size: 0.84rem; margin-top: 3px; } /* ---------- steps ---------- */ .steps { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; } .step-dot { height: 4px; flex: 1; border-radius: 999px; background: var(--border); } .step-dot.done { background: linear-gradient(90deg, var(--primary), var(--blue-soft-hex)); } .step-label { font-size: 0.78rem; color: var(--text-tertiary); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* ---------- topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topbar-h); padding: 0 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 8px; } .user-chip { display: none; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); max-width: 220px; } .user-chip-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 0.7rem; font-weight: 800; flex-shrink: 0; } .user-chip-email { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 901px) { .user-chip { display: inline-flex; } } /* ---------- org switcher ---------- */ .switcher { position: relative; } .switcher > summary { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-elevated); transition: border-color .15s ease, box-shadow .15s ease; } .switcher > summary::-webkit-details-marker { display: none; } .switcher > summary:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .switcher[open] > summary { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .switcher-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; z-index: 30; animation: menuIn .14s ease; } @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .switcher-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 500; } .switcher-item:hover { background: var(--surface-alt); text-decoration: none; } .switcher-sep { height: 1px; background: var(--border); margin: 6px 4px; } .org-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-ring); object-fit: cover; /* The box is fixed and its contents are not: a placeholder is meant to be initials, but a longer string must clip rather than spill across the row. This is the guard that turns that mistake into a visual truncation instead of a broken layout. */ overflow: hidden; white-space: nowrap; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; user-select: none; } /* When the placeholder is replaced by a real picture, the img fills the box — object-fit on the span alone does nothing for a nested image. */ .org-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; } .org-avatar-lg { width: 44px; height: 44px; border-radius: var(--radius); font-size: 0.95rem; } /* ---------- badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); } .badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .badge-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } /* ---------- panels / rows ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .panel:hover { box-shadow: var(--shadow-md); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-alt) 45%, var(--surface)); } .panel-body { padding: 20px; } .row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: 0; } .row:hover { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); } .row-body { flex: 1; min-width: 0; } .row-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap; } .empty { padding: 40px 24px; text-align: center; color: var(--text-secondary); font-size: 0.92rem; } .empty-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-tertiary); } /* ---------- progress ---------- */ .progress { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--blue-soft-hex)); transition: width .35s ease; } /* ---------- icon buttons / theme ---------- */ .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; padding: 0; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); transition: border-color .15s ease, color .15s ease, background .15s ease; } .icon-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-alt); } .icon-btn .icon { width: 17px; height: 17px; } .theme-toggle .icon-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="light"] .theme-toggle .icon-light { display: block; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } /* ---------- page header ---------- */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .page-header-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); } .stat-card-label { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .stat-card-label .icon { width: 15px; height: 15px; color: var(--primary); } .stat-card-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1; } .stat-card-hint { margin-top: 8px; font-size: 0.78rem; color: var(--text-secondary); } .callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px; } .callout-icon { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; flex-shrink: 0; background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); } .callout-icon.primary { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-ring); } .callout-icon.success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); } /* ---------- footer link ---------- */ .foot { margin-top: 22px; text-align: center; font-size: 0.88rem; color: var(--text-secondary); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- app layout ---------- */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; min-height: calc(100vh - var(--topbar-h)); } .sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-section { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); padding: 14px 12px 8px; } .sidebar-foot { margin-top: auto; padding: 16px 10px 6px; border-top: 1px solid var(--border); } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: background .12s ease, color .12s ease; } .nav-link:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; } .nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); } .nav-link .icon { width: 17px; height: 17px; opacity: 0.85; } .nav-link.active .icon { opacity: 1; } .nav-group > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; list-style: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; transition: background .12s ease, color .12s ease; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary:hover { background: var(--surface-alt); color: var(--text); } .nav-group > summary > span:nth-child(2) { flex: 1; } .nav-group > summary .icon { width: 17px; height: 17px; opacity: 0.85; } .nav-caret { width: 14px; height: 14px; opacity: 0.55; transition: transform .18s ease; } .nav-group[open] > summary .nav-caret { transform: rotate(180deg); } .nav-children { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px 18px; padding-left: 12px; border-left: 1px solid var(--border); } .nav-children .nav-link { padding: 7px 10px; font-size: 0.86rem; font-weight: 500; } .nav-children .nav-link .badge { margin-left: auto; } .layout > main { max-width: 980px; margin: 0; padding: 30px 28px 64px; } /* ---------- mobile ---------- */ .nav-toggle { display: none; } .nav-scrim { display: none; } @media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); } .nav-toggle { display: grid; } .hide-sm { display: none; } .switcher-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-grid { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 280px; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 10, 30, 0.5); backdrop-filter: blur(2px); } .layout > main { padding: 22px 16px 50px; } } @media (max-width: 620px) { .card { padding: 26px 20px; } .field-row { flex-direction: column; gap: 0; } .page-header { flex-direction: column; } .row { flex-wrap: wrap; } .row-actions { width: 100%; } } /* ---------- htmx ---------- */ .htmx-request.btn { opacity: 0.6; pointer-events: none; } #panel-content.htmx-swapping { opacity: 0.55; transition: opacity .1s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- api keys ---------- */ .key-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); } .key-value { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; /* Keys are long and must never push the panel wider than the viewport. */ overflow-x: auto; white-space: nowrap; } .key-secret { color: var(--danger); } .code-block { margin: 0; padding: 16px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; } .code-block code { white-space: pre; } /* ---------- usage ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; } .chip:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; } .chip.active { background: var(--primary-soft); border-color: var(--primary-ring); color: var(--primary); font-weight: 600; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; } .stat-label { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; } .stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; } /* Bars grow from the axis, and columns share the row height rather than each sizing to its own content. */ .chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; } .chart-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .chart-bar { width: 100%; min-height: 2px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--primary), var(--primary-soft)); } .chart-label { font-size: 11px; color: var(--text-tertiary); margin-top: 7px; } /* ---------- SSO ---------- */ /* .btn already sets display, alignment and gap; repeating them here only creates two places to change. What this needs is the divider and the spacing around it. */ .sso-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-tertiary); font-size: 0.82rem; } .sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* --- Kimlik doğrulama durumu ------------------------------------------- */ /* Header'daki uyarı rozeti. Yalnızca doğrulanmamış hesapta render edilir, o yüzden "yok" hâli için ayrı bir kural gerekmiyor. */ .badge-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; color: var(--danger); background: var(--danger-soft); border-radius: 50%; flex: none; } .user-menu-item-warn { color: var(--danger); } .user-menu-item-warn:hover { background: var(--danger-soft); } .user-menu-verified { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 0.82rem; color: var(--success, #15803d); } /* Dashboard uyarı kartı. stat-grid'in üstünde tam genişlik. */ .notice-card { display: flex; gap: 14px; padding: 16px 18px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .notice-card-warn { border-color: var(--warning); background: var(--warning-soft); } .notice-card-icon { display: flex; align-items: flex-start; color: var(--warning); flex: none; } .notice-card-body { min-width: 0; } .notice-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; } .notice-card-text { font-size: 0.86rem; color: var(--text-soft, #5b6577); line-height: 1.5; /* Butonla arasında nefes payı — üstteki paragrafa yapışık bir buton tıklanabilir görünmüyor. */ margin: 0 0 12px; } @media (max-width: 560px) { .notice-card { flex-direction: column; gap: 10px; } } /* --- Sosyal medya bağlantıları (kenar çubuğu altı) ---------------------- */ .social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-soft, #5b6577); border: 1px solid var(--border); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .social-link:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-alt); } /* Boyut svg'nin kendisinden değil buradan: beş marka işareti farklı yoğunlukta çizilmiş, aynı kutuda aynı optik büyüklükte durmaları gerekiyor. */ .social-link svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .social-link { transition: none; } } /* ---------- Vekâleten giriş şeridi ---------- Yönetici bir kullanıcının hesabına bakarken sayfanın en üstünde duruyor. Kapatma düğmesi BİLEREK yok: bu özelliğin en büyük riski, yöneticinin kimin adına baktığını unutması. Kapatılabilir bir uyarı ilk tıklamadan sonra hiç var olmamış gibi olur. Kırmızı değil amber: kırmızı "hata" demek ve burada hata yok — dikkat gerektiren, normal ama olağandışı bir durum var. */ .impersonation-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 18px; background: #78350f; color: #fef3c7; font-size: 13px; line-height: 1.5; } .impersonation-bar strong { color: #fff; font-weight: 700; } /* Yanıp sönen nokta: şerit metni okunmadan da "burada olağandışı bir şey var" sinyali veriyor. */ .impersonation-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #fbbf24; animation: impersonation-nabiz 2s ease-in-out infinite; } @keyframes impersonation-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Hareketi azaltmayı tercih eden kullanıcıda animasyon kapanıyor; nokta görünür kalıyor, çünkü taşıdığı bilgi hareketinde değil varlığında. */ @media (prefers-reduced-motion: reduce) { .impersonation-dot { animation: none; } } .impersonation-exit { margin-left: auto; } .impersonation-exit button { background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; } .impersonation-exit button:hover { background: rgba(255, 255, 255, .25); } @media (max-width: 640px) { .impersonation-bar { padding: 8px 14px; font-size: 12.5px; } .impersonation-exit { margin-left: 0; width: 100%; } .impersonation-exit button { width: 100%; } } /* ---------- Kullanım widget'ları ---------- */ .usage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; } .usage-title { margin: 0; font-size: 1.05rem; font-weight: 700; } .usage-period select { padding: 7px 30px 7px 12px; border: 1px solid var(--line, #dfe5f2); border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; } .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; } .chart-card .panel-body { padding-top: 6px; } .chart-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .donut { width: 140px; height: 140px; flex: 0 0 140px; } .donut-track { stroke: #eef1f7; } /* Dilimlerin uçları KESKİN (varsayılan butt): yuvarlak uç, komşu dilimin üstüne taşar ve küçük dilimlerde yanlış bir oran gösterir. */ .donut circle { stroke-linecap: butt; } .donut-total { font-size: 20px; font-weight: 700; fill: var(--navy, #00133e); } .donut-caption { font-size: 10px; fill: #8a94a9; } .chart-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; } .chart-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; } .legend-label { flex: 1; min-width: 0; } .legend-value { font-weight: 600; white-space: nowrap; } .chart-hint { margin: 12px 0 0; font-size: 12.5px; } /* ---------- Yıllık ızgara (waffle) ---------- Kolon = hafta, kare = gün. Yatayda 53 kolon sığmayabilir, o yüzden kendi içinde kayıyor — sayfanın tamamını yatay kaydırmak yerine. */ .waffle-scroll { overflow-x: auto; padding-bottom: 6px; } .waffle { display: inline-block; min-width: max-content; } .waffle-grid { display: flex; gap: 3px; } .waffle-week { display: flex; flex-direction: column; gap: 3px; } .waffle-day { width: 11px; height: 11px; border-radius: 2px; display: block; background: #eef1f7; } /* Sıfır ile "az" AYNI renk değil: ikisi aynı olsaydı ızgaranın taşıdığı tek bilgi — hangi gün çalışıldı — kaybolurdu. */ .waffle-l0 { background: #eef1f7; } .waffle-l1 { background: #b9d4f8; } .waffle-l2 { background: #7fb0f0; } .waffle-l3 { background: #3d82e3; } .waffle-l4 { background: #1a55b8; } /* Dolgu kareleri: ızgara pazartesi hizalı dursun diye var, veri taşımıyorlar. Görünmez ama yer kaplıyorlar. */ .waffle-filler { background: transparent; } .waffle-months { display: grid; grid-auto-flow: column; grid-auto-columns: 14px; height: 16px; margin-bottom: 4px; font-size: 10.5px; color: #8a94a9; } .waffle-month { grid-row: 1; white-space: nowrap; } .waffle-legend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12px; } .waffle-legend-note { margin-left: auto; } @media (max-width: 640px) { .chart-body { justify-content: center; } .waffle-legend-note { display: none; } } /* Başlıktaki kalan hak. */ .balance-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line, #dfe5f2); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy, #00133e); text-decoration: none; white-space: nowrap; } .balance-chip:hover { border-color: #3d82e3; color: #1a55b8; } /* Az kaldığında renk değişiyor. Eşik Go tarafında (HeaderBalance.Low): "az" bir kuraldır ve iki yerde tutulduğunda biri değişip öteki kalır. */ .balance-low { border-color: #f0a020; background: #fff8ec; color: #8a5b00; } .balance-low:hover { border-color: #d98c0a; color: #6b4700; } @media (max-width: 640px) { .balance-chip { display: none; } }