Spaces:
Running
Running
| /* ========================================================================== | |
| BeamBridge — Warm Alabaster & Honey-Gold Glassmorphic Bento Design System | |
| Strictly modeled on the Crextio Executive Interface Standard | |
| ========================================================================== */ | |
| :root { | |
| --bg-outer: #cfd3da; | |
| --ink-900: #222224; | |
| --ink-700: #4a4a4e; | |
| --ink-500: #78787d; | |
| --ink-400: #9c9ca1; | |
| --obsidian: #242426; | |
| --obsidian-soft: #323236; | |
| --gold: #f5d665; | |
| --gold-deep: #e6c144; | |
| --gold-soft: #fbf1c8; | |
| --card-glass: rgba(255, 255, 255, 0.64); | |
| --card-glass-strong: rgba(255, 255, 255, 0.84); | |
| --card-border: rgba(255, 255, 255, 0.88); | |
| --line-subtle: rgba(36, 36, 38, 0.08); | |
| /* Refined neutral & warm-gold status tokens (zero clashing colors) */ | |
| --pill-lavender-bg: #eae8e2; | |
| --pill-lavender-fg: #3a3a40; | |
| --pill-mint-bg: #e7ebe6; | |
| --pill-mint-fg: #2b332d; | |
| --pill-grey-bg: #ecebe7; | |
| --pill-grey-fg: #5c5c62; | |
| --pill-amber-bg: #f8ecc0; | |
| --pill-amber-fg: #6b5310; | |
| --radius-board: 34px; | |
| --radius-card: 26px; | |
| --radius-inner: 18px; | |
| --radius-pill: 999px; | |
| --shadow-board: 0 28px 70px rgba(28, 30, 36, 0.14); | |
| --shadow-card: 0 10px 28px rgba(34, 34, 36, 0.04); | |
| --font-sans: "Plus Jakarta Sans", "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| min-height: 100vh; | |
| background: linear-gradient(145deg, #c9ced6 0%, #d5d8de 50%, #c7ccd4 100%); | |
| color: var(--ink-900); | |
| font-family: var(--font-sans); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body { | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-start; | |
| } | |
| /* Main Rounded Warm Canvas Shell */ | |
| .app-shell { | |
| width: 100%; | |
| max-width: 1460px; | |
| min-height: calc(100vh - 40px); | |
| border-radius: var(--radius-board); | |
| padding: 26px 32px 32px; | |
| box-shadow: var(--shadow-board); | |
| border: 1px solid rgba(255, 255, 255, 0.72); | |
| background: | |
| radial-gradient(circle at 90% 16%, rgba(246, 222, 142, 0.74) 0%, rgba(249, 236, 188, 0.34) 34%, transparent 64%), | |
| radial-gradient(circle at 84% 88%, rgba(245, 218, 132, 0.70) 0%, rgba(250, 240, 198, 0.32) 38%, transparent 68%), | |
| linear-gradient(132deg, #ecebe7 0%, #f5f3ea 48%, #faf1cf 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* RTL Support when user toggles Arabic */ | |
| .app-shell[dir="rtl"] { | |
| font-family: "Plus Jakarta Sans", "Tahoma", system-ui, sans-serif; | |
| } | |
| /* ========================================================================== | |
| Top Navigation Bar | |
| ========================================================================== */ | |
| .top-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 26px; | |
| flex-wrap: wrap; | |
| } | |
| .brand-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 9px 22px; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid #a8a8a3; | |
| background: rgba(255, 255, 255, 0.28); | |
| color: var(--ink-900); | |
| font-size: 16px; | |
| font-weight: 500; | |
| letter-spacing: -0.01em; | |
| cursor: pointer; | |
| transition: all 0.18s ease; | |
| } | |
| .brand-pill:hover { | |
| background: rgba(255, 255, 255, 0.55); | |
| } | |
| .brand-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--obsidian); | |
| box-shadow: 0 0 0 3px rgba(245, 214, 101, 0.65); | |
| } | |
| .nav-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .nav-pill-bar { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 5px; | |
| border-radius: var(--radius-pill); | |
| background: rgba(255, 255, 255, 0.76); | |
| backdrop-filter: blur(14px); | |
| border: 1px solid rgba(255, 255, 255, 0.9); | |
| box-shadow: 0 4px 16px rgba(34, 34, 36, 0.03); | |
| } | |
| .nav-tab { | |
| border: none; | |
| background: transparent; | |
| color: var(--ink-700); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| padding: 9px 18px; | |
| border-radius: var(--radius-pill); | |
| cursor: pointer; | |
| transition: all 0.18s ease; | |
| white-space: nowrap; | |
| } | |
| .nav-tab:hover { | |
| color: var(--ink-900); | |
| background: rgba(36, 36, 38, 0.05); | |
| } | |
| .nav-tab.active { | |
| background: var(--obsidian); | |
| color: #ffffff; | |
| box-shadow: 0 4px 12px rgba(36, 36, 38, 0.18); | |
| } | |
| .util-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 9px 16px; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid rgba(255, 255, 255, 0.9); | |
| background: rgba(255, 255, 255, 0.78); | |
| color: var(--ink-900); | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.18s ease; | |
| } | |
| .util-pill:hover { | |
| background: #ffffff; | |
| transform: translateY(-1px); | |
| } | |
| .util-pill .key-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: #9ca3af; | |
| } | |
| .util-pill .key-dot.live { | |
| background: var(--gold-deep); | |
| box-shadow: 0 0 0 3px rgba(230, 193, 68, 0.28); | |
| } | |
| .icon-circle-btn { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 1px solid rgba(255, 255, 255, 0.9); | |
| background: rgba(255, 255, 255, 0.78); | |
| color: var(--ink-900); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 600; | |
| transition: all 0.18s ease; | |
| } | |
| .icon-circle-btn:hover { | |
| background: #ffffff; | |
| transform: translateY(-1px); | |
| } | |
| /* ========================================================================== | |
| Hero Header, 4-Capsule Metric Strip & Giant Thin KPIs | |
| ========================================================================== */ | |
| .hero-header { | |
| margin-bottom: 22px; | |
| } | |
| .hero-title-row { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .hero-greeting { | |
| font-size: 35px; | |
| font-weight: 400; | |
| letter-spacing: -0.025em; | |
| color: var(--ink-900); | |
| line-height: 1.15; | |
| } | |
| .hero-subpill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12.5px; | |
| color: var(--ink-700); | |
| background: rgba(255, 255, 255, 0.56); | |
| padding: 6px 14px; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid rgba(255, 255, 255, 0.82); | |
| } | |
| .hero-metrics-row { | |
| display: grid; | |
| grid-template-columns: 1.35fr 1fr; | |
| gap: 28px; | |
| align-items: end; | |
| } | |
| /* 4-Segment Horizontal Capsule Strip (Exact match to Interviews/Hired/Project time/Output) */ | |
| .capsule-strip { | |
| display: grid; | |
| grid-template-columns: 2.35fr 0.95fr 1.15fr 0.68fr; | |
| gap: 10px; | |
| align-items: end; | |
| } | |
| .capsule-col { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 7px; | |
| } | |
| .capsule-label { | |
| font-size: 12px; | |
| color: var(--ink-700); | |
| padding-left: 6px; | |
| white-space: nowrap; | |
| } | |
| .capsule-bar { | |
| height: 44px; | |
| border-radius: var(--radius-pill); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 16px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: transform 0.2s ease; | |
| } | |
| .capsule-bar:hover { | |
| transform: translateY(-1px); | |
| } | |
| .capsule-dark { | |
| background: var(--obsidian); | |
| color: #ffffff; | |
| } | |
| .capsule-gold { | |
| background: var(--gold); | |
| color: var(--ink-900); | |
| } | |
| .capsule-striped { | |
| background: repeating-linear-gradient( | |
| -45deg, | |
| rgba(255, 255, 255, 0.82) 0px, | |
| rgba(255, 255, 255, 0.82) 5px, | |
| rgba(218, 216, 209, 0.42) 5px, | |
| rgba(218, 216, 209, 0.42) 10px | |
| ); | |
| border: 1px solid rgba(255, 255, 255, 0.85); | |
| color: var(--ink-900); | |
| } | |
| .capsule-outline { | |
| background: transparent; | |
| border: 1px solid #525256; | |
| color: var(--ink-900); | |
| justify-content: center; | |
| } | |
| /* 3 Giant Thin KPI Numerals on Right */ | |
| .giant-kpis { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: flex-end; | |
| gap: 38px; | |
| } | |
| .kpi-block { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .kpi-num-row { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 7px; | |
| } | |
| .kpi-mini-icon { | |
| font-size: 14px; | |
| color: var(--ink-500); | |
| } | |
| .kpi-giant-num { | |
| font-size: 50px; | |
| font-weight: 300; | |
| letter-spacing: -0.035em; | |
| line-height: 0.95; | |
| color: var(--ink-900); | |
| } | |
| .kpi-caption { | |
| font-size: 12px; | |
| color: var(--ink-500); | |
| margin-top: 6px; | |
| padding-left: 22px; | |
| } | |
| /* ========================================================================== | |
| Dashboard Asymmetric 5-Card Bento Grid (Exact Reference Proportions) | |
| ========================================================================== */ | |
| .bento-dashboard { | |
| display: grid; | |
| grid-template-columns: 310px 1fr 340px; | |
| grid-template-rows: auto auto; | |
| gap: 18px; | |
| } | |
| .bento-card { | |
| background: var(--card-glass); | |
| backdrop-filter: blur(18px); | |
| border: 1px solid var(--card-border); | |
| border-radius: var(--radius-card); | |
| padding: 22px 24px; | |
| box-shadow: var(--shadow-card); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .bento-card.dark-card { | |
| background: var(--obsidian); | |
| border-color: rgba(255, 255, 255, 0.08); | |
| color: #ffffff; | |
| } | |
| .card-tall-left { | |
| grid-column: 1 / 2; | |
| grid-row: 1 / 3; | |
| display: flex; | |
| flex-direction: column; | |
| background: | |
| linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.68) 84%, transparent 100%), | |
| repeating-linear-gradient( | |
| -45deg, | |
| rgba(255, 255, 255, 0.72) 0px, | |
| rgba(255, 255, 255, 0.72) 6px, | |
| rgba(222, 220, 212, 0.35) 6px, | |
| rgba(222, 220, 212, 0.35) 12px | |
| ); | |
| } | |
| .card-mid-top { | |
| grid-column: 2 / 3; | |
| grid-row: 1 / 2; | |
| } | |
| .card-right-top { | |
| grid-column: 3 / 4; | |
| grid-row: 1 / 2; | |
| } | |
| .card-mid-bottom { | |
| grid-column: 2 / 3; | |
| grid-row: 2 / 3; | |
| } | |
| .card-right-bottom { | |
| grid-column: 3 / 4; | |
| grid-row: 2 / 3; | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .card-title { | |
| font-size: 19px; | |
| font-weight: 400; | |
| letter-spacing: -0.015em; | |
| } | |
| .arrow-circle { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| border: none; | |
| background: rgba(255, 255, 255, 0.88); | |
| color: var(--ink-900); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.18s ease; | |
| flex-shrink: 0; | |
| } | |
| .arrow-circle:hover { | |
| transform: scale(1.06); | |
| background: #ffffff; | |
| } | |
| .dark-card .arrow-circle { | |
| background: rgba(255, 255, 255, 0.12); | |
| color: #ffffff; | |
| } | |
| .dark-card .arrow-circle:hover { | |
| background: rgba(255, 255, 255, 0.22); | |
| } | |
| /* Left Card: Pipeline Strip & Vertical Timeline */ | |
| .stage-week-strip { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 4px; | |
| padding-bottom: 14px; | |
| margin-bottom: 16px; | |
| border-bottom: 1px solid var(--line-subtle); | |
| text-align: center; | |
| } | |
| .stage-day-item { | |
| cursor: pointer; | |
| padding: 5px 2px; | |
| border-radius: 12px; | |
| transition: background 0.15s ease; | |
| } | |
| .stage-day-item:hover { | |
| background: rgba(36, 36, 38, 0.05); | |
| } | |
| .stage-day-lbl { | |
| font-size: 10.5px; | |
| color: var(--ink-400); | |
| display: block; | |
| } | |
| .stage-day-num { | |
| font-size: 16px; | |
| font-weight: 300; | |
| color: var(--ink-500); | |
| margin-top: 2px; | |
| display: block; | |
| } | |
| .stage-day-item.active .stage-day-lbl, | |
| .stage-day-item.active .stage-day-num { | |
| color: var(--ink-900); | |
| font-weight: 600; | |
| } | |
| .timeline-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| position: relative; | |
| flex: 1; | |
| } | |
| .timeline-row { | |
| display: grid; | |
| grid-template-columns: 56px 1fr; | |
| gap: 12px; | |
| align-items: start; | |
| position: relative; | |
| } | |
| .timeline-row::before { | |
| content: ""; | |
| position: absolute; | |
| left: 27px; | |
| top: 28px; | |
| bottom: -14px; | |
| border-left: 1px dashed rgba(36, 36, 38, 0.22); | |
| } | |
| .timeline-row:last-child::before { | |
| display: none; | |
| } | |
| .time-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 26px; | |
| padding: 0 9px; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid rgba(36, 36, 38, 0.28); | |
| background: #ffffff; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--ink-900); | |
| z-index: 1; | |
| } | |
| .time-pill.active-dark { | |
| background: var(--obsidian); | |
| color: #ffffff; | |
| border-color: var(--obsidian); | |
| } | |
| .time-pill.active-gold { | |
| background: var(--gold); | |
| color: var(--ink-900); | |
| border-color: var(--gold-deep); | |
| } | |
| .timeline-event-card { | |
| background: rgba(255, 255, 255, 0.92); | |
| border-radius: 18px; | |
| padding: 13px 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.95); | |
| box-shadow: 0 4px 14px rgba(34, 34, 36, 0.03); | |
| position: relative; | |
| cursor: pointer; | |
| transition: transform 0.16s ease; | |
| } | |
| .timeline-event-card:hover { | |
| transform: translateX(2px); | |
| } | |
| .timeline-event-card.obsidian-event { | |
| background: var(--obsidian); | |
| border-color: var(--obsidian); | |
| color: #ffffff; | |
| } | |
| .event-dot { | |
| position: absolute; | |
| top: 13px; | |
| right: 13px; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--gold); | |
| } | |
| .event-title { | |
| font-size: 13px; | |
| font-weight: 500; | |
| margin-bottom: 4px; | |
| padding-right: 12px; | |
| } | |
| .event-sub { | |
| font-size: 11.5px; | |
| color: var(--ink-500); | |
| line-height: 1.4; | |
| } | |
| .obsidian-event .event-sub { | |
| color: rgba(255, 255, 255, 0.65); | |
| } | |
| .mini-badge-cluster { | |
| display: inline-flex; | |
| gap: 4px; | |
| margin-top: 8px; | |
| } | |
| .mini-avatar-chip { | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 3px 7px; | |
| border-radius: 999px; | |
| background: var(--gold-soft); | |
| color: var(--ink-900); | |
| } | |
| /* Center-Top Card: Enterprise Estates Table (Matches Salary Table) */ | |
| .search-pill-input { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(255, 255, 255, 0.88); | |
| border: 1px solid rgba(255, 255, 255, 0.95); | |
| border-radius: var(--radius-pill); | |
| padding: 7px 14px; | |
| min-width: 210px; | |
| } | |
| .search-pill-input input { | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| color: var(--ink-900); | |
| width: 100%; | |
| } | |
| .estates-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0 8px; | |
| } | |
| .estates-table th { | |
| text-align: left; | |
| font-size: 11.5px; | |
| font-weight: 400; | |
| color: var(--ink-500); | |
| padding: 0 10px 4px; | |
| } | |
| .estates-table tbody tr { | |
| cursor: pointer; | |
| transition: all 0.16s ease; | |
| } | |
| .estates-table tbody tr td { | |
| padding: 10px 10px; | |
| font-size: 13px; | |
| vertical-align: middle; | |
| background: transparent; | |
| transition: background 0.16s ease; | |
| } | |
| .estates-table tbody tr.selected-row td, | |
| .estates-table tbody tr:hover td { | |
| background: rgba(255, 255, 255, 0.86); | |
| } | |
| .estates-table tbody tr td:first-child { | |
| border-top-left-radius: 16px; | |
| border-bottom-left-radius: 16px; | |
| } | |
| .estates-table tbody tr td:last-child { | |
| border-top-right-radius: 16px; | |
| border-bottom-right-radius: 16px; | |
| } | |
| .row-check { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 5px; | |
| border: 1.5px solid #c5c5c9; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| color: transparent; | |
| } | |
| .selected-row .row-check { | |
| background: var(--obsidian); | |
| border-color: var(--obsidian); | |
| color: #ffffff; | |
| } | |
| .estate-name-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .sector-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| background: var(--obsidian); | |
| color: var(--gold); | |
| flex-shrink: 0; | |
| } | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 12px; | |
| border-radius: var(--radius-pill); | |
| font-size: 11.5px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .status-pill .dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| .status-pill.lavender { | |
| background: var(--pill-lavender-bg); | |
| color: var(--pill-lavender-fg); | |
| } | |
| .status-pill.mint { | |
| background: var(--pill-mint-bg); | |
| color: var(--pill-mint-fg); | |
| } | |
| .status-pill.grey { | |
| background: var(--pill-grey-bg); | |
| color: var(--pill-grey-fg); | |
| } | |
| .status-pill.amber { | |
| background: var(--pill-amber-bg); | |
| color: var(--pill-amber-fg); | |
| } | |
| /* Right-Top Dark Card: Parity Matrix Report (Matches Attendance Report) */ | |
| .dark-kpi-pair { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 24px; | |
| margin: 6px 0 18px; | |
| } | |
| .dark-big-stat { | |
| font-size: 40px; | |
| font-weight: 300; | |
| letter-spacing: -0.03em; | |
| color: #ffffff; | |
| } | |
| .dark-big-stat span.trend-arrow { | |
| font-size: 15px; | |
| color: rgba(255, 255, 255, 0.55); | |
| margin-left: 4px; | |
| } | |
| .matrix-dot-grid { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: 7px; | |
| margin-top: 8px; | |
| } | |
| .matrix-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #47474b; | |
| cursor: pointer; | |
| transition: transform 0.15s ease, background 0.15s ease; | |
| } | |
| .matrix-dot.gold-cliff { | |
| background: var(--gold); | |
| } | |
| .matrix-dot.verified-soft { | |
| background: #7c7560; | |
| } | |
| .matrix-dot:hover { | |
| transform: scale(1.45); | |
| box-shadow: 0 0 8px rgba(245, 214, 101, 0.8); | |
| } | |
| .matrix-tooltip-bar { | |
| margin-top: 12px; | |
| font-size: 11.5px; | |
| color: rgba(255, 255, 255, 0.68); | |
| min-height: 18px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* Bottom-Center Card: Smooth Dual-Line Chart */ | |
| .chart-legend-inline { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 14px; | |
| font-size: 12px; | |
| color: var(--ink-700); | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .legend-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| } | |
| .select-pill { | |
| appearance: none; | |
| background: rgba(255, 255, 255, 0.88); | |
| border: 1px solid rgba(255, 255, 255, 0.95); | |
| border-radius: var(--radius-pill); | |
| padding: 6px 14px; | |
| font-family: inherit; | |
| font-size: 12px; | |
| color: var(--ink-900); | |
| cursor: pointer; | |
| } | |
| .svg-chart-wrap { | |
| width: 100%; | |
| height: 185px; | |
| position: relative; | |
| } | |
| /* Bottom-Right Card: Donut Composition */ | |
| .donut-layout { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding-top: 4px; | |
| } | |
| .donut-svg-box { | |
| position: relative; | |
| width: 146px; | |
| height: 146px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .donut-center-text { | |
| position: absolute; | |
| text-align: center; | |
| } | |
| .donut-center-num { | |
| font-size: 29px; | |
| font-weight: 300; | |
| letter-spacing: -0.03em; | |
| color: var(--ink-900); | |
| display: block; | |
| } | |
| .donut-center-lbl { | |
| font-size: 11px; | |
| color: var(--ink-500); | |
| } | |
| .donut-split-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 12px; | |
| font-size: 17px; | |
| font-weight: 300; | |
| } | |
| .donut-split-tag { | |
| font-size: 11.5px; | |
| color: var(--ink-500); | |
| margin-left: 4px; | |
| } | |
| /* ========================================================================== | |
| Sub-Views (Modernizer, MCP Playground, Parity Suite, FinOps ROI, Consulting) | |
| ========================================================================== */ | |
| .view-section { | |
| display: none; | |
| } | |
| .view-section.active { | |
| display: block; | |
| animation: fadeSlide 0.22s ease; | |
| } | |
| @keyframes fadeSlide { | |
| from { opacity: 0; transform: translateY(6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .studio-grid { | |
| display: grid; | |
| grid-template-columns: 350px 1fr; | |
| gap: 18px; | |
| } | |
| .two-col-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 18px; | |
| } | |
| .three-col-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| } | |
| .btn-primary-dark { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| background: var(--obsidian); | |
| color: #ffffff; | |
| border: none; | |
| border-radius: var(--radius-pill); | |
| padding: 11px 22px; | |
| font-family: inherit; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.18s ease; | |
| } | |
| .btn-primary-dark:hover { | |
| background: #141416; | |
| transform: translateY(-1px); | |
| box-shadow: 0 8px 20px rgba(36, 36, 38, 0.2); | |
| } | |
| .btn-gold { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| background: var(--gold); | |
| color: var(--ink-900); | |
| border: 1px solid var(--gold-deep); | |
| border-radius: var(--radius-pill); | |
| padding: 10px 20px; | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.18s ease; | |
| } | |
| .btn-gold:hover { | |
| background: #f2cd49; | |
| } | |
| .btn-ghost-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255, 255, 255, 0.8); | |
| color: var(--ink-900); | |
| border: 1px solid rgba(36, 36, 38, 0.14); | |
| border-radius: var(--radius-pill); | |
| padding: 8px 15px; | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| } | |
| .btn-ghost-pill:hover { | |
| background: #ffffff; | |
| } | |
| .code-pane { | |
| background: #1f1f22; | |
| color: #f4f3ee; | |
| border-radius: 18px; | |
| padding: 16px 18px; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| line-height: 1.55; | |
| overflow: auto; | |
| max-height: 410px; | |
| white-space: pre; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .code-editor-textarea { | |
| width: 100%; | |
| min-height: 220px; | |
| background: #1f1f22; | |
| color: #f7e6a4; | |
| border-radius: 18px; | |
| padding: 14px 16px; | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| border: 1px solid rgba(36, 36, 38, 0.2); | |
| resize: vertical; | |
| outline: none; | |
| } | |
| .rule-card { | |
| background: rgba(255, 255, 255, 0.85); | |
| border-radius: 16px; | |
| padding: 13px 15px; | |
| border: 1px solid rgba(255, 255, 255, 0.95); | |
| margin-bottom: 10px; | |
| } | |
| .rule-card-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 5px; | |
| } | |
| .form-field { | |
| margin-bottom: 12px; | |
| } | |
| .form-field label { | |
| display: block; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--ink-700); | |
| margin-bottom: 5px; | |
| } | |
| .form-input { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(36, 36, 38, 0.14); | |
| border-radius: 12px; | |
| padding: 9px 12px; | |
| font-family: inherit; | |
| font-size: 13px; | |
| color: var(--ink-900); | |
| outline: none; | |
| } | |
| .form-input:focus { | |
| border-color: var(--obsidian); | |
| } | |
| .sub-pill-tabs { | |
| display: inline-flex; | |
| gap: 4px; | |
| background: rgba(255, 255, 255, 0.72); | |
| padding: 4px; | |
| border-radius: var(--radius-pill); | |
| margin-bottom: 14px; | |
| } | |
| .sub-pill-btn { | |
| border: none; | |
| background: transparent; | |
| padding: 7px 14px; | |
| border-radius: var(--radius-pill); | |
| font-family: inherit; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--ink-700); | |
| cursor: pointer; | |
| } | |
| .sub-pill-btn.active { | |
| background: var(--obsidian); | |
| color: #ffffff; | |
| } | |
| /* Modal Backdrop */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(10, 10, 14, 0.68); | |
| backdrop-filter: blur(10px); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| padding: 20px; | |
| } | |
| .modal-backdrop.open { | |
| display: flex; | |
| } | |
| .modal-panel { | |
| width: 100%; | |
| max-width: 560px; | |
| background: linear-gradient(145deg, #f7f5ee 0%, #fbf3d5 100%); | |
| border-radius: 28px; | |
| padding: 28px; | |
| border: 1px solid #ffffff; | |
| box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22); | |
| } | |
| /* ========================================================================== | |
| Raylight-Inspired 01–04 Onboarding & SHA-256 Attestation Showcase Modal | |
| ========================================================================== */ | |
| .guide-modal-panel { | |
| width: 100%; | |
| max-width: 1060px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| background: #070709; | |
| color: #f4f4f6; | |
| border-radius: 26px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 34px 46px 42px; | |
| box-shadow: 0 40px 100px rgba(0, 0, 0, 0.72); | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(255, 255, 255, 0.18) transparent; | |
| } | |
| .guide-top-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| padding-bottom: 8px; | |
| } | |
| .guide-close-btn { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #e4e4eb; | |
| font-size: 13px; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.16s ease; | |
| } | |
| .guide-close-btn:hover { | |
| background: rgba(255, 255, 255, 0.14); | |
| color: #ffffff; | |
| } | |
| .guide-step-row { | |
| display: grid; | |
| grid-template-columns: 92px minmax(0, 1fr); | |
| gap: 24px; | |
| padding: 30px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .guide-step-row:last-child { | |
| border-bottom: none; | |
| padding-bottom: 6px; | |
| } | |
| .guide-step-num { | |
| font-size: 38px; | |
| font-weight: 600; | |
| color: #55555e; | |
| letter-spacing: -0.03em; | |
| line-height: 1.05; | |
| font-variant-numeric: tabular-nums; | |
| user-select: none; | |
| } | |
| .guide-step-title { | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 10px; | |
| } | |
| .guide-step-desc { | |
| font-size: 14.5px; | |
| line-height: 1.62; | |
| color: #9d9da7; | |
| max-width: 700px; | |
| margin: 0; | |
| } | |
| /* Step 01 Split Layout: Client Selector + Warm Glow Prompt Card */ | |
| .guide-step01-grid { | |
| display: grid; | |
| grid-template-columns: 242px minmax(0, 1fr); | |
| gap: 22px; | |
| margin-top: 26px; | |
| align-items: start; | |
| } | |
| .guide-client-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .guide-client-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| width: 100%; | |
| text-align: left; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: 14px; | |
| padding: 11px 13px; | |
| cursor: pointer; | |
| color: #e4e4ec; | |
| font-family: inherit; | |
| transition: all 0.16s ease; | |
| } | |
| [dir="rtl"] .guide-client-btn { | |
| text-align: right; | |
| } | |
| .guide-client-btn:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .guide-client-btn.active { | |
| background: #1b1b1f; | |
| border-color: rgba(255, 255, 255, 0.09); | |
| } | |
| .guide-client-icon { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 9px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| } | |
| .guide-client-icon svg { | |
| display: block; | |
| } | |
| .guide-client-icon.claude { | |
| background: #d97757; | |
| color: #ffffff; | |
| } | |
| .guide-client-icon.openai { | |
| background: #17171c; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| color: #ffffff; | |
| } | |
| .guide-client-icon.cursor { | |
| background: #14120b; | |
| color: #edecec; | |
| border: 1px solid rgba(237, 236, 236, 0.2); | |
| } | |
| .guide-client-icon.antigravity { | |
| background: #ffffff; | |
| } | |
| .guide-client-icon.other { | |
| background: #1c1c21; | |
| color: #e4e4ec; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| } | |
| .guide-client-name { | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| line-height: 1.25; | |
| } | |
| .guide-client-sub { | |
| font-size: 11.5px; | |
| color: #858591; | |
| margin-top: 2px; | |
| line-height: 1.25; | |
| } | |
| /* Right Warm Amber-Bronze Ambient Glow Card */ | |
| .guide-glow-card { | |
| background: | |
| radial-gradient(430px 260px at 88% 6%, rgba(208, 118, 34, 0.42) 0%, rgba(145, 74, 18, 0.18) 46%, rgba(15, 15, 19, 0.96) 82%), | |
| #0e0e12; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| padding: 28px 30px; | |
| position: relative; | |
| } | |
| .guide-glow-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .guide-glow-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| margin: 0; | |
| } | |
| .guide-ext-link { | |
| font-size: 12.5px; | |
| color: #b8b8c2; | |
| text-decoration: none; | |
| transition: color 0.15s ease; | |
| } | |
| .guide-ext-link:hover { | |
| color: #ffffff; | |
| } | |
| .guide-mode-pills { | |
| display: inline-flex; | |
| gap: 3px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.11); | |
| border-radius: 999px; | |
| padding: 3px; | |
| margin-bottom: 18px; | |
| } | |
| .guide-mode-pill { | |
| border: none; | |
| background: transparent; | |
| color: #9e9ea8; | |
| font-family: inherit; | |
| font-size: 12px; | |
| font-weight: 500; | |
| padding: 6px 14px; | |
| border-radius: 999px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .guide-mode-pill.active { | |
| background: rgba(255, 255, 255, 0.14); | |
| color: #ffffff; | |
| } | |
| .guide-glow-helper { | |
| font-size: 13.5px; | |
| line-height: 1.58; | |
| color: #c7c7d1; | |
| margin: 0 0 18px; | |
| max-width: 560px; | |
| } | |
| .guide-prompt-well { | |
| background: rgba(7, 7, 10, 0.76); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 14px; | |
| padding: 16px 18px; | |
| margin-bottom: 20px; | |
| } | |
| .guide-prompt-label { | |
| font-size: 11px; | |
| color: #7c7c88; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| .guide-prompt-text { | |
| font-family: var(--font-mono); | |
| font-size: 12.5px; | |
| line-height: 1.62; | |
| color: #d8d8e2; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| max-height: 185px; | |
| overflow-y: auto; | |
| } | |
| .guide-copy-white-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #ffffff; | |
| color: #09090b; | |
| border: none; | |
| border-radius: 999px; | |
| padding: 10px 20px; | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.14s ease, background 0.14s ease; | |
| } | |
| .guide-copy-white-btn:hover { | |
| background: #e6e6ec; | |
| transform: translateY(-1px); | |
| } | |
| /* Step 02 Attestation Cards Grid */ | |
| .guide-cert-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .guide-cert-card { | |
| background: #111115; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 14px; | |
| padding: 13px 15px; | |
| transition: border-color 0.16s ease; | |
| } | |
| .guide-cert-card:hover { | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .guide-cert-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 6px; | |
| } | |
| .guide-cert-repo { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: #ffffff; | |
| } | |
| .guide-cert-badge { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: #e4e4ec; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 999px; | |
| padding: 2px 9px; | |
| } | |
| .guide-cert-meta { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| color: #848490; | |
| word-break: break-all; | |
| } | |
| .guide-inline-actions { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 16px; | |
| } | |
| .guide-muted-note { | |
| font-size: 13px; | |
| color: #7e7e8a; | |
| } | |
| .guide-dark-pill-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| background: #1a1a1f; | |
| color: #f4f4f8; | |
| border: 1px solid rgba(255, 255, 255, 0.11); | |
| border-radius: 999px; | |
| padding: 8px 16px; | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.16s ease; | |
| } | |
| .guide-dark-pill-btn:hover { | |
| background: #25252c; | |
| border-color: rgba(255, 255, 255, 0.24); | |
| color: #ffffff; | |
| } | |
| /* Step 04 Prompt Chips Row */ | |
| .guide-chips-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 18px; | |
| } | |
| .guide-prompt-chip { | |
| background: rgba(255, 255, 255, 0.03); | |
| color: #d4d4de; | |
| border: 1px solid rgba(255, 255, 255, 0.11); | |
| border-radius: 999px; | |
| padding: 8px 15px; | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| cursor: pointer; | |
| transition: all 0.16s ease; | |
| } | |
| .guide-prompt-chip:hover { | |
| background: rgba(255, 255, 255, 0.09); | |
| border-color: rgba(255, 255, 255, 0.26); | |
| color: #ffffff; | |
| } | |
| /* Responsive Breakpoints */ | |
| @media (max-width: 1180px) { | |
| .bento-dashboard { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .card-tall-left { | |
| grid-column: 1 / 3; | |
| grid-row: auto; | |
| } | |
| .card-mid-top { grid-column: 1 / 2; grid-row: auto; } | |
| .card-right-top { grid-column: 2 / 3; grid-row: auto; } | |
| .card-mid-bottom { grid-column: 1 / 2; grid-row: auto; } | |
| .card-right-bottom { grid-column: 2 / 3; grid-row: auto; } | |
| .hero-metrics-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .giant-kpis { | |
| justify-content: flex-start; | |
| } | |
| .studio-grid, .two-col-grid, .three-col-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 880px) { | |
| .modal-backdrop { | |
| padding: 10px; | |
| } | |
| .guide-modal-panel { | |
| padding: 24px 22px 30px; | |
| max-height: 94vh; | |
| border-radius: 22px; | |
| } | |
| .guide-step-row { | |
| grid-template-columns: 46px minmax(0, 1fr); | |
| gap: 14px; | |
| padding: 26px 0; | |
| } | |
| .guide-step-num { | |
| font-size: 28px; | |
| } | |
| .guide-step-title { | |
| font-size: 19px; | |
| } | |
| .guide-step01-grid { | |
| grid-template-columns: 1fr; | |
| gap: 14px; | |
| } | |
| .guide-client-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); | |
| gap: 6px; | |
| } | |
| .guide-glow-card { | |
| padding: 22px 20px; | |
| } | |
| .guide-cert-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| body { padding: 8px; } | |
| .app-shell { padding: 18px; border-radius: 24px; } | |
| .bento-dashboard { grid-template-columns: 1fr; } | |
| .card-tall-left, .card-mid-top, .card-right-top, .card-mid-bottom, .card-right-bottom { | |
| grid-column: 1 / -1; | |
| } | |
| .capsule-strip { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .giant-kpis { | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| } | |