:root{ /* Brand */ --brand-gold:#FFB81C; /* Backgrounds (KEEP YOUR PAGE BG) */ --page-bg:#282828; --page-bg-2:#282828; --surface-1: #27272A; --surface-2: #09090B; /* Cards */ --card-bg:rgba(31,41,51,0.85); --card-bg-hover:rgba(31,41,51,0.95); /* Borders */ --border:rgba(148,163,184,0.18); --border-strong:rgba(148,163,184,0.32); /* Text */ --text-main:#F1F5F9; --text-muted:#94A3B8; /* Accents */ --accent-blue:#282828; --accent-blue-soft:rgba(59,130,246,0.15); /* Accent (Sage / Olive-gray) */ --accent-sage:#9FB3A2; --accent-sage-soft:rgba(159,179,162,0.18); --accent-sage-border:rgba(159,179,162,0.35); /* Modals / panels */ --modal-bg:rgba(0,0,0,0.72); --panel-bg:#0f0f0f; /* Status */ --danger:#EF4444; --ok:#22C55E; /* Effects */ --shadow-1:0 12px 28px rgba(0,0,0,0.45); --shadow-2:0 18px 48px rgba(0,0,0,0.65); /* Radius */ --r-lg:16px; --r-md:12px; /* Spacing */ --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; } /* ========================= Light theme overrides ========================= Contract: - Default (no attribute) is DARK. - Light mode is enabled by setting: */ :root[data-theme="light"] { /* ========================= Foundation: Slate & Zinc (Professional SaaS) ========================= */ --page-bg: #F8FAFC; --page-bg-2: #F1F5F9; /* Surfaces */ --surface-1: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #E2E8F0; /* Cards */ --card-bg: rgba(255, 255, 255, 0.85); --card-bg-hover: #FFFFFF; /* Borders */ --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); /* Text */ --text-main: #0F172A; --text-muted: #475569; --text-faint: #94A3B8; /* Accents */ --accent-blue: #003DA5; --accent-blue-soft: rgba(0, 61, 165, 0.06); /* Shadows */ --shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-2: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05); } /* Reduced motion */ body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } body.reduced-motion .card:hover{ transform:none !important; } *{ box-sizing:border-box; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; } html,body{ height:100%; } body{ margin:0; color: var(--text-main, #fff); background-color: var(--page-bg, #282828); } /* ===== Layout ===== */ /* Change this in cr-shared.css */ .container { max-width: 100% !important; /* Force it to fill the screen */ width: 100%; margin: 0; padding: 0 30px; /* Provides consistent breathing room at the very edges */ box-sizing: border-box; } .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } /* ===== Header ===== */ .header{ background: linear-gradient(180deg, rgba(0,61,165,0.95), rgba(0,61,165,0.80)); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-1); margin-bottom: var(--sp-3); position:relative; border: 1px solid rgba(255,255,255,0.10); } .gold-bar{ height:10px; background: var(--brand-gold); } .header-content{ padding: 20px; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .brand{ display:flex; align-items:center; gap: 12px; min-width: 0; } .brand-mark{ width: 38px; height: 38px; border-radius: 12px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 18px rgba(0,0,0,0.25); flex: 0 0 auto; } .brand-mark span{ font-weight: 900; letter-spacing: 0.8px; color: var(--brand-gold); font-size: 14px; line-height: 1; } .header-left{ min-width:0; } .header-left h1{ margin:0 0 6px; font-size: 24px; font-weight: 850; letter-spacing: 0.35px; } .header-left p{ margin:0; opacity:0.90; line-height: 1.35; } .header-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .pill{ border:1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.16); padding: 8px 10px; border-radius: 999px; font-size: 12px; opacity: 0.96; white-space: nowrap; backdrop-filter: blur(6px); } /* ===== Buttons ===== */ .btn{ border:none; border-radius: 10px; padding: 10px 14px; font-weight: 800; cursor: pointer; transition: opacity 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; position: relative; outline: none; } .btn:hover{ opacity: 0.96; } .btn:active{ transform: translateY(1px); } .btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; } .btn:focus-visible{ box-shadow: 0 0 0 3px rgba(255,184,28,0.28), 0 0 0 1px rgba(255,184,28,0.45) inset; } .btn-gold{ background: var(--brand-gold); color:#000; } .btn-dark{ background: rgba(0,0,0,0.25); color:#fff; border:1px solid rgba(255,255,255,0.25); } .btn-danger{ background: rgba(255,92,92,0.18); color:#fff; border: 1px solid rgba(255,92,92,0.45); } /* Loading state */ .btn.loading{ pointer-events:none; opacity:0.80; } .btn.loading::after{ content:""; width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(0,0,0,0.25); border-top-color: rgba(0,0,0,0.75); display:inline-block; margin-left: 10px; vertical-align: -2px; animation: spin 0.75s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } /* ===== Cards ===== */ .card{ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease; box-shadow: 0 10px 18px rgba(0,0,0,0.18); } .card:hover{ transform: translateY(-4px); border-color: rgba(255,184,28,0.55); box-shadow: var(--shadow-2); background: var(--card-bg-hover); } /* Disable hover effects for informational cards */ .card.no-hover{ cursor: default; } .card.no-hover:hover{ background: var(--card-bg); border-color: var(--border); box-shadow: 0 10px 18px rgba(0,0,0,0.18); /* match .card base */ transform: none; } .card:focus-within{ box-shadow: 0 0 0 3px rgba(255,184,28,0.20), var(--shadow-2); border-color: rgba(255,184,28,0.70); } .card h2{ margin:0 0 8px; font-size: 18px; letter-spacing: 0.2px; font-weight: 800; display:flex; align-items:center; gap:10px; } .card h2 i{ color: var(--accent-sage); font-size: 16px; width: 18px; text-align: center; } .badge i{ color: var(--accent-sage); opacity: 0.85; font-size: 12px; } .card p{ margin:0 0 14px; font-size: 14px; opacity: 0.86; line-height: 1.45; } .badge{ display:inline-flex; align-items:center; gap:6px; font-size: 11px; font-weight: 800; letter-spacing: 0.2px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-main, #fff); margin-bottom: 10px; width: fit-content; } .open-btn{ background: var(--brand-gold); color:#000; border:none; padding: 10px 14px; border-radius: 10px; font-weight: 800; cursor:pointer; transition: opacity 0.12s ease, transform 0.12s ease; } .open-btn:hover{ opacity:0.95; } .open-btn:active{ transform: translateY(1px); } .open-btn:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,184,28,0.28), 0 0 0 1px rgba(255,184,28,0.45) inset; } footer{ margin-top: var(--sp-3); font-size: 13px; opacity: 0.82; text-align:center; line-height: 1.4; } /* ===== Lock screen (login modal) ===== */ .locked .container{ filter: blur(2px); pointer-events:none; user-select:none; } .modal-overlay{ position:fixed; inset:0; background: var(--modal-bg); display:none; align-items:center; justify-content:center; padding: 18px; z-index: 9999; } .modal-overlay.show{ display:flex; } .modal{ width: min(720px, 100%); background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.55); overflow:hidden; } .modal-header{ background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.10); padding: 16px 18px; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .modal-title{ display:flex; flex-direction:column; gap: 3px; } .modal-title h3{ margin:0; font-size: 16px; letter-spacing: 0.25px; } .modal-title p{ margin:0; font-size: 12px; opacity: 0.82; } .modal-body{ padding: 18px; } .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row-1{ display:grid; grid-template-columns: 1fr; gap: 12px; } label{ font-size: 12px; opacity: 0.92; display:block; margin-bottom: 6px; } input{ width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color:#fff; outline:none; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } input::placeholder{ color: rgba(255,255,255,0.45); } input:focus{ border-color: rgba(255,184,28,0.55); box-shadow: 0 0 0 3px rgba(255,184,28,0.20); background: rgba(255,255,255,0.07); } .hint{ font-size: 12px; opacity: 0.78; margin: 10px 0 0; line-height: 1.4; } .hint strong{ color:#fff; opacity:0.95; } .msg{ margin: 10px 0 0; font-size: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); display:none; line-height: 1.4; } .msg.show{ display:block; } .msg.ok{ border-color: rgba(87,217,127,0.55); background: rgba(87,217,127,0.12); } .msg.err{ border-color: rgba(255,92,92,0.55); background: rgba(255,92,92,0.12); } .modal-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; flex-wrap:wrap; } .divider{ height: 1px; background: rgba(255,255,255,0.10); margin: 16px 0; } @media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } .row{ grid-template-columns: 1fr; } .header-content{ align-items:flex-start; flex-direction:column; } .header-right{ justify-content:flex-start; } .brand{ width:100%; } } /* ===== Settings Modal (improved structure) ===== */ .settings-wrap{ display:flex; flex-direction:column; gap: 14px; } .settings-section{ border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); padding: 14px 16px; background: rgba(255,255,255,0.04); } .settings-section .section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap:wrap; margin-bottom: 10px; } .settings-section .section-title{ display:flex; flex-direction:column; gap: 4px; min-width: 240px; } .settings-section .section-title h4{ margin:0; font-size: 13px; font-weight: 900; letter-spacing: 0.2px; text-transform: none; } .settings-section .section-title p{ margin:0; font-size: 12px; opacity: 0.86; line-height: 1.35; } .settings-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items:start; } .field{ display:flex; flex-direction:column; gap: 6px; } .field .help{ font-size: 12px; opacity: 0.72; line-height: 1.35; margin-top: 2px; } select{ width:100%; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color:#fff; outline:none; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.75) 50%), linear-gradient(135deg, rgba(255,255,255,0.75) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; } select:focus{ border-color: rgba(255,184,28,0.55); box-shadow: 0 0 0 3px rgba(255,184,28,0.20); background: rgba(255,255,255,0.07); } select option{ color:#111; } .toggle-row{ display:flex; align-items:flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); } .toggle-row input[type="checkbox"]{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-gold); } .toggle-row .toggle-text{ display:flex; flex-direction:column; gap: 2px; line-height: 1.25; } .toggle-row .toggle-text .t-title{ font-size: 13px; font-weight: 800; } .toggle-row .toggle-text .t-sub{ font-size: 12px; opacity: 0.78; } .settings-actions{ display:flex; justify-content:flex-end; gap: 10px; flex-wrap:wrap; margin-top: 8px; } @media (max-width: 720px){ .settings-grid{ grid-template-columns: 1fr; } } /* add to cr-shared.css if missing */ .cr-row { display:flex; gap:16px; flex-wrap:wrap; align-items:center; } .cr-input { padding:10px 12px; border:1px solid #ccc; border-radius:10px; min-width:220px; } .cr-btn { padding:10px 12px; border:0; border-radius:10px; cursor:pointer; } .cr-btn-danger { background:#d9534f; color:#fff; } .cr-table-wrap { overflow:auto; } .cr-table { width:100%; border-collapse:collapse; } .cr-table th, .cr-table td { padding:10px; border-bottom:1px solid #e6e6e6; text-align:left; vertical-align:top; } .cr-muted { opacity:.7; } /* ========================= UX Feedback: Toasts ========================= */ /* ========================= Recruiter Today Panel (launcher/app.html) Minimal, premium, glanceable ========================= */ .today-block{ display:flex; flex-direction:column; gap: 10px; } .today-block__title{ font-size: 12px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.85); } .today-metrics{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .today-metric{ border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.035); border-radius: 14px; padding: 10px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); min-width: 0; } .today-metric__label{ font-size: 11px; opacity: 0.78; } .today-metric__value{ font-size: 16px; font-weight: 900; margin-top: 4px; } .today-list{ display:grid; gap: 8px; } .today-row{ width: 100%; text-align:left; cursor:pointer; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.18); border-radius: 14px; padding: 10px 10px; color: rgba(255,255,255,0.92); display:flex; flex-direction:column; gap: 4px; } .today-row:hover{ background: rgba(255,255,255,0.05); } .today-row:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,184,28,0.20), var(--shadow-2); border-color: rgba(255,184,28,0.55); } .today-row__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; } .today-row__name{ font-weight: 900; font-size: 13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .today-row__meta{ font-size: 12px; opacity: 0.78; white-space:nowrap; } .today-row__hs{ font-size: 12px; opacity: 0.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .today-viewmore{ margin-top: 10px; width: 100%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); border-radius: 12px; padding: 10px 12px; font-weight: 900; color: rgba(255,255,255,0.88); cursor:pointer; } .today-viewmore:hover{ background: rgba(255,255,255,0.05); } .today-collapsible{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); border-radius: 14px; padding: 10px 12px; cursor:pointer; color: rgba(255,255,255,0.92); font-weight: 900; } .today-collapsible i{ opacity: 0.78; } .today-collapsible__count{ margin-left: auto; font-size: 12px; font-weight: 900; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.22); border-radius: 999px; padding: 4px 8px; color: rgba(255,255,255,0.88); } .today-collapsible__body{ margin-top: 10px; } .today-bullets{ margin: 0; padding-left: 18px; display:grid; gap: 6px; } .today-bullets li{ font-size: 12px; opacity: 0.88; line-height: 1.35; } @media (max-width: 720px){ .today-metrics{ grid-template-columns: 1fr; } .today-metric__value{ font-size: 15px; } } #cr-toast-host { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; } .cr-toast { min-width: 260px; max-width: 360px; padding: 12px 14px; border-radius: 10px; color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.18); opacity: 0; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease; position: relative; font-size: 14px; } .cr-toast.show { opacity: 1; transform: translateY(0); } .cr-toast-title { font-weight: 700; margin-bottom: 4px; font-size: 13px; } .cr-toast-msg { line-height: 1.25rem; } .cr-toast-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: rgba(255,255,255,0.9); font-size: 18px; cursor: pointer; } /* Toast types */ .cr-toast-success { background: #2e7d32; } .cr-toast-warning { background: #ed6c02; } .cr-toast-error { background: #c62828; } .cr-toast-info { background: #1565c0; } /* ========================= UX Feedback: States ========================= */ .cr-loading { opacity: 0.65; pointer-events: none; } .cr-disabled { opacity: 0.55; pointer-events: none; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .cr-toast { transition: none !important; } } /* ===== Drag & Drop Card ===== */ .card-dropzone { cursor: default; } .drop-area { margin-top: 14px; border: 2px dashed rgba(255,184,28,0.6); border-radius: var(--r-lg); padding: 28px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; color: rgba(255,255,255,0.85); background: rgba(255,184,28,0.06); transition: border-color 0.15s ease, background 0.15s ease; } .drop-area i { font-size: 26px; color: var(--brand-gold); } .drop-area:hover { border-color: rgba(255,184,28,0.85); background: rgba(255,184,28,0.10); } /* When dragging over the entire upload panel, keep the drop-zone visually active */ .card-dropzone.hover .drop-area{ border-color: rgba(255,184,28,0.85); background: rgba(255,184,28,0.10); } .admin-only { display: none; } .restore-choice-prompt{ grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 215, 0, 0.35); background: rgba(255, 215, 0, 0.08); display: none; } .restore-choice-prompt strong{ font-weight: 700; } .card.restore-highlight{ outline: 2px solid rgba(255, 215, 0, 0.85); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15); position: relative; } .card.restore-highlight::after{ content: "Choose me"; position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 215, 0, 0.95); color: #111; font-weight: 800; letter-spacing: .2px; } @media (prefers-reduced-motion: no-preference){ .card.restore-highlight{ animation: crPulse 1.6s ease-in-out infinite; } @keyframes crPulse{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } } } /* ===== Top SaaS Nav (Index) ===== */ :root{ --cr-nav:#1d1d1d; --cr-nav-2:#151515; --cr-text:#f2f2f2; --cr-muted:rgba(242,242,242,.72); --cr-gold:#d4af37; --cr-border:rgba(255,255,255,.10); --cr-shadow:0 10px 25px rgba(0,0,0,.35); } .cr-topnav{ position:sticky; top:0; z-index:1000; background:linear-gradient(180deg,var(--cr-nav),var(--cr-nav-2)); border-bottom:3px solid var(--cr-gold); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),var(--cr-shadow); } .cr-topnav__shell{display:flex; align-items:center;} .cr-topnav__brand{ display:flex; align-items:center; gap:10px; padding:12px 16px; text-decoration:none; color:var(--cr-text); flex:0 0 auto; } .cr-topnav__logo{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.04); border:2px solid rgba(212,175,55,.45); color:var(--cr-gold); font-weight:900; letter-spacing:.5px; } .cr-topnav__title{font-weight:700; font-size:15px; white-space:nowrap;} .cr-topnav__inner{ flex:1; max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:14px; } .cr-topnav__links{display:flex; gap:6px; flex:1;} .cr-topnav__link{ color:var(--cr-muted); text-decoration:none; padding:10px 12px; border-radius:12px; border:1px solid transparent; transition:.15s ease; display:inline-flex; align-items:center; gap:8px; } .cr-topnav__link:hover{ color:var(--cr-text); background:rgba(255,255,255,.06); border-color:var(--cr-border); transform:translateY(-1px); } .cr-topnav__link.is-active{ color:var(--cr-text); background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.45); font-weight:600; box-shadow:inset 0 -3px 0 var(--cr-gold); } .cr-topnav__divider{ width:1px; height:28px; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.18),transparent); margin:0 6px; opacity:.7; } .cr-topnav__actions{ display:flex; align-items:center; gap:10px; position:relative; } .cr-topnav__user{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--cr-border); background:rgba(255,255,255,.04); color:var(--cr-muted); cursor:pointer; font-size:13px; user-select:none; } .cr-topnav__user:focus{outline:2px solid rgba(212,175,55,.55); outline-offset:2px;} .cr-topnav__avatar{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#111; background:var(--cr-gold); flex:0 0 auto; } .cr-role{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; background:rgba(212,175,55,.2); color:var(--cr-gold); border:1px solid rgba(212,175,55,.45); white-space:nowrap; } .cr-caret{font-size:11px; opacity:.65;} .cr-user-menu{ position:absolute; top:calc(100% + 10px); right:0; width:220px; background:#1c1c1c; border:1px solid var(--cr-border); border-radius:14px; box-shadow:var(--cr-shadow); padding:6px; display:none; } .cr-user-menu button{ width:100%; background:none; border:none; color:var(--cr-text); padding:10px 12px; border-radius:10px; text-align:left; cursor:pointer; font:inherit; } .cr-user-menu button:hover{background:rgba(255,255,255,.08);} .cr-user-menu hr{ border:none; border-top:1px solid var(--cr-border); margin:6px 0; } .cr-user-menu .danger{color:#ff6b6b;} /* Give the page a tiny breathing room under the sticky nav */ .container{ padding-top: 14px; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; } .user-dropdown { background: #1f1f1f; border: 1px solid #333; border-radius: 8px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .user-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-dropdown button, .user-dropdown a { display: block; width: 100%; padding: 10px 14px; background: none; border: none; color: #e6e6e6; text-align: left; cursor: pointer; font-size: 0.9rem; } .user-dropdown button:hover, .user-dropdown a:hover { background: rgba(255, 215, 0, 0.08); } .user-dropdown .divider { height: 1px; background: #333; margin: 6px 0; } /* ========================= Welcome Splash (post-login) ========================= */ .cr-welcome-overlay{ position: fixed; inset: 0; background: var(--page-bg); display: none; align-items: center; justify-content: center; z-index: 10050; overflow: hidden; opacity: 0; } .cr-welcome-overlay.show{ display:flex; opacity: 1; transition: opacity 180ms ease; } .cr-welcome-overlay.hide{ opacity: 0; transition: opacity 420ms ease; } .cr-welcome-inner{ text-align: center; padding: 24px; max-width: 900px; width: 100%; transform: translateY(8px) scale(0.985); opacity: 0; } .cr-welcome-overlay.show .cr-welcome-inner{ transform: translateY(0) scale(1); opacity: 1; transition: transform 460ms ease, opacity 460ms ease; } .cr-welcome-title{ font-weight: 900; letter-spacing: 0.6px; color: var(--brand-gold); font-size: clamp(28px, 5vw, 52px); line-height: 1.05; } .cr-welcome-sub{ margin-top: 10px; opacity: 0.85; font-size: clamp(12px, 2vw, 16px); letter-spacing: 0.35px; } .cr-welcome-ripple{ position: absolute; inset: 0; pointer-events: none; } .cr-welcome-ripple::before{ content:""; position:absolute; left:50%; top:50%; width: 44px; height: 44px; border-radius: 999px; border: 2px solid rgba(255,184,28,0.70); box-shadow: 0 0 0 10px rgba(255,184,28,0.14); transform: translate(-50%,-50%) scale(0.15); opacity: 0; } .cr-welcome-overlay.ripple .cr-welcome-ripple::before{ animation: crWelcomeRipple 650ms ease-out forwards; } @keyframes crWelcomeRipple{ 0%{ opacity: 0; transform: translate(-50%,-50%) scale(0.15); } 10%{ opacity: 1; } 100%{ opacity: 0; transform: translate(-50%,-50%) scale(18); } } /* Subtle reveal on the main page content */ body.cr-site-reveal .container{ animation: crSiteReveal 520ms ease-out both; } @keyframes crSiteReveal{ from{ opacity: 0; transform: scale(0.985); filter: blur(6px); } to{ opacity: 1; transform: scale(1); filter: blur(0); } } /* ========================================================= CR Shared UX Additions (Toasts v2 + Long-load Overlay) ========================================================= */ /* Toast host position switching */ #cr-toast-host[data-position="br"] { right: 18px; bottom: 18px; left: auto; top: auto; } #cr-toast-host[data-position="bl"] { left: 18px; bottom: 18px; right: auto; top: auto; } #cr-toast-host[data-position="tr"] { right: 18px; top: 18px; left: auto; bottom: auto; } #cr-toast-host[data-position="tl"] { left: 18px; top: 18px; right: auto; bottom: auto; } .cr-toast-row{ display:flex; gap: 12px; align-items:flex-start; } .cr-toast-ic{ margin-top: 2px; font-size: 18px; opacity: 0.95; } .cr-spin{ display:inline-block; animation: cr-spin 0.9s linear infinite; } @keyframes cr-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .cr-toast-body{ flex:1; } .cr-toast-title{ font-weight: 800; margin-bottom: 4px; letter-spacing: 0.2px; } .cr-toast-action{ margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.12); color:#fff; cursor:pointer; font-weight: 700; } .cr-toast-action:hover{ background: rgba(0,0,0,0.18); } .cr-toast-bar{ height: 3px; width: 100%; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow:hidden; position: relative; } .cr-toast-bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width: 100%; transform-origin: left; background: rgba(255,255,255,0.55); animation: cr-toast-bar var(--cr-toast-ms, 4200ms) linear forwards; } @keyframes cr-toast-bar{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } } .cr-toast-paused .cr-toast-bar::after{ animation-play-state: paused; } .cr-toast-out{ animation: cr-toast-out 220ms ease-in forwards; } @keyframes cr-toast-out{ from{ opacity: 1; transform: translateY(0); } to{ opacity: 0; transform: translateY(10px); } } /* Long-load overlay */ #cr-loading-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.58); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 18px; } #cr-loading-overlay.show{ display:flex; } .cr-loading-card{ width: min(560px, 96vw); background: rgba(18,18,18,0.92); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.45); color: #fff; } .cr-loading-spin{ width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.20); border-top-color: rgba(255,255,255,0.92); animation: cr-spin 0.9s linear infinite; margin-bottom: 10px; } .cr-loading-title{ font-size: 18px; font-weight: 900; margin-bottom: 6px; } .cr-loading-msg{ opacity: 0.92; line-height: 1.35rem; margin-bottom: 12px; } .cr-loading-actions{ display:flex; gap: 10px; justify-content: flex-end; } .cr-loading-btn{ padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color:#fff; cursor:pointer; font-weight: 800; } .cr-loading-btn:hover{ background: rgba(255,255,255,0.12); } /* ========================================================= CR UI tweak v2: remove dark hover overlays WITHOUT disabling anything - Only affects hover backgrounds (not disabled, not loading states) ========================================================= */ /* Selects: keep hover the same as base. Keep focus ring/border from existing rules. */ select:hover:not(:disabled){ background: rgba(255,255,255,0.06); } /* Prevent "sticky" darker hover on some browsers */ select:active:not(:disabled){ background: rgba(255,255,255,0.06); } /* Topnav links: no hover background panel, but still clickable */ .cr-topnav__link:hover{ background: transparent; } /* User menu / dropdown: no hover fill, but preserve pointer + focus */ .cr-user-menu button:hover, .user-dropdown button:hover, .user-dropdown a:hover{ background: transparent; } /* Ensure we never accidentally make things unclickable unless they are truly disabled/loading */ select:not(:disabled), .cr-topnav__link, .cr-user-menu button, .user-dropdown button, .user-dropdown a{ pointer-events: auto; cursor: pointer; } /* Make disabled states explicit (so if something IS disabled, it looks/behaves disabled) */ select:disabled, .cr-user-menu button:disabled, .user-dropdown button:disabled{ opacity: 0.55; cursor: not-allowed; } /* QuickDashboard: keep filter selects from darkening on hover/active */ .filters-row select:hover:not(:disabled), .filters-row select:active:not(:disabled){ background: rgba(255,255,255,0.06); /* same as base select bg */ } /* Keep focus behavior (keyboard + accessibility) */ .qd-filters select:focus { background: var(--input-bg); box-shadow: 0 0 0 2px rgba(255,184,28,0.35); /* optional */ } /* ===== Shared Initials Avatar (Profile-pill style) ===== */ .cr-initials-avatar{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; color:#111; background:var(--brand-gold, #FFB81C); border:1px solid rgba(0,0,0,0.18); letter-spacing:0.4px; flex:0 0 auto; } /* This is the code for the robot */ /* 1. Floating Movement */ .crm-bot-wrapper { position: fixed; bottom: 25px; right: 25px; width: 100px; height: 100px; z-index: 10000; } /* ========================= Index: Announcements - Use sage for author initials so gold stays reserved for highlights ========================= */ .announce-avatar{ background: rgba(255,255,255,0.06); border: 1px solid var(--accent-sage-border); color: var(--accent-sage); /* optional: subtle inner lift */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } /* Entrance/Exit Animation */ /* ========================================================== 1. CORE WRAPPER & LAYOUT ========================================================== */ /* ========================================================= Index (Portal): 3-panel layout (left / center / right) Source of truth: cr-shared.css (no layout forcing in index.html) ========================================================= */ .portal-shell{ display: grid; grid-template-columns: 320px minmax(0, 1fr) 380px; gap: 18px; margin: 18px 0 18px; align-items: start; } .portal-main, .portal-aside{ min-width: 0; } .portal-aside-left, .portal-aside-right{ position: sticky; top: 92px; /* sticky under the top nav */ } @media (max-width: 1180px){ .portal-shell{ grid-template-columns: 300px minmax(0, 1fr) 340px; } } @media (max-width: 980px){ .portal-shell{ grid-template-columns: 1fr; } .portal-aside-left, .portal-aside-right{ position: static; top: auto; } } .portal-panel{ background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .portal-panel__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.04); } .portal-panel__title{ display: flex; align-items: center; gap: 10px; font-weight: 800; } .portal-panel__title i{ color: var(--accent-sage); opacity: 0.95; } .portal-panel__actions{ display:flex; align-items:center; gap:8px; } .portal-panel__body{ padding: 12px 14px 14px; } .portal-muted{ opacity: 0.9; } .portal-help{ margin-top: 8px; font-size: 12px; opacity: 0.75; } /* Compact select + buttons used in the ADM panel header */ .portal-select{ background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; outline: none; min-width: 120px; } .portal-select:focus{ border-color: rgba(255,184,28,0.55); box-shadow: 0 0 0 3px rgba(255,184,28,0.15); } .btn-sm{ padding: 8px 10px !important; border-radius: 10px !important; } /* Announcements (right panel on index) */ .announce-composer{ padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.10); } .announce-text{ width: 100%; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; resize: vertical; outline: none; } .announce-text:focus{ border-color: rgba(255,184,28,0.55); box-shadow: 0 0 0 3px rgba(255,184,28,0.15); } .announce-actions{ margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .announce-list{ display:flex; flex-direction:column; gap:10px; } .announce-item{ display: flex; gap: 10px; padding: 10px 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); } /* Sizing/shape; color theme is set earlier in this file (Index: Announcements) */ .announce-avatar{ width: 34px; height: 34px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-weight: 900; flex: 0 0 auto; } .announce-body{ flex:1; min-width:0; } .announce-textline{ white-space: pre-wrap; line-height: 1.35; } .announce-meta{ margin-top: 6px; font-size: 12px; opacity: 0.75; } /* ========================= Weekly Goal Progress Card ========================= */ .outreach-card { background: var(--page-bg, #282828) !important; /* Force match page bg */ border: 1px solid var(--border-strong) !important; border-radius: 16px; padding: 20px; box-shadow: none !important; } .outreach-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .outreach-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); } .outreach-title i { color: var(--accent-sage); } .goal-settings-link { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.22); color: var(--text-main); font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; opacity: 0.95; padding: 8px 12px; border-radius: 12px; transition: opacity 0.12s ease, transform 0.12s ease, border-color 0.12s ease; } .goal-settings-link:hover { opacity: 1; border-color: rgba(255,184,28,0.55); } .goal-settings-link:active { transform: translateY(1px); } .goal-settings-link:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,184,28,0.20); } /* If you want "Set Goal" to look like a real button (requested) */ .goal-settings-btn{ padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 800; line-height: 1; } /* Stylish Dynamic Progress Bar */ .progress-bar-track { width: 100%; height: 14px; background: rgba(0, 0, 0, 0.3); /* Darker track for depth */ border-radius: 10px; overflow: hidden; margin-bottom: 12px; position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); /* Inner shadow for 3D depth */ border: 1px solid rgba(255, 255, 255, 0.05); } .progress-bar-fill { height: 100%; width: 0%; /* Dynamic */ border-radius: 10px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease; position: relative; /* The Color Logic: Red -> Orange -> Yellow -> Green */ background: linear-gradient(90deg, #ef4444 0%, /* Red */ #f97316 40%, /* Orange */ #eab308 70%, /* Yellow */ #22c55e 100% /* Green */ ); background-size: 200% 100%; /* Allows the color to "shift" as it fills */ background-position: calc(100% - var(--progress, 0%)) 0; /* Stylish Shine Effect */ background-image: linear-gradient(rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%), linear-gradient(90deg, #ef4444 0%, #f97316 40%, #eab308 70%, #22c55e 100%); } /* Glass-like gloss overlay */ .progress-bar-fill::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 50%, transparent 51% ); pointer-events: none; } .progress-stats { display: flex; align-items: baseline; gap: 6px; } #outreachCurrent { font-size: 28px; font-weight: 800; color: #fff; } .progress-separator { color: var(--text-muted); font-size: 14px; } #outreachTarget { font-size: 16px; font-weight: 600; color: var(--text-muted); } .goal-status-hint { margin-top: 15px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } /* ========================================================= Dashboard: Middle Section Layout + Stats + Chart Slots ========================================================= */ /* Dashboard Specific Layout */ .dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .dashboard-card { min-height: 200px; display: flex; flex-direction: column; } .dashboard-wide { width: 100%; padding: 24px; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; } .stat-item { background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); text-align: center; } .stat-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; } .stat-value { font-size: 22px; font-weight: 800; color: var(--brand-gold); } .charts-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; } .chart-slot { aspect-ratio: 1; background: rgba(0,0,0,0.2); border-radius: 50%; /* For circular charts */ border: 4px solid var(--border); display: flex; align-items: center; justify-content: center; } /* Responsive: keep dashboard rows readable on small screens */ @media (max-width: 900px){ .dashboard-row{ grid-template-columns: 1fr; } .charts-container{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .charts-container{ grid-template-columns: 1fr; } } /* ========================================================= Dashboard: Charts Grid (Secondary) ========================================================= */ .charts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px 0; } .chart-container { position: relative; text-align: center; padding: 15px; background: rgba(255, 255, 255, 0.03); border-radius: var(--r-md); border: 1px solid var(--border); } .chart-label { margin-top: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; } /* Responsive */ @media (max-width: 900px){ .charts-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .charts-grid{ grid-template-columns: 1fr; } } /* ========================================================= Dashboard: Recruitment Funnel ========================================================= */ /* Recruitment Funnel Styling */ .funnel-container { display: flex; flex-direction: column; gap: 8px; padding: 15px 10px; align-items: center; } .funnel-stage { display: flex; align-items: center; width: 100%; } .stage-label { flex: 0 0 80px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); } .stage-bar { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-main); transition: width 0.6s ease; position: relative; overflow: hidden; } /* Funnel Shape Logic (Progressively narrower) */ .stage-applied .stage-bar { width: 100%; border-color: var(--brand-gold); background: rgba(255,184,28,0.10); } .stage-complete .stage-bar { width: 85%; } .stage-confirmed .stage-bar { width: 70%; } .stage-housing .stage-bar { width: 55%; border-color: #052712; background: rgba(34,197,94,0.10); } .badge-count { background: rgba(255,184,28,0.10); color: var(--brand-gold); padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; border: 1px solid var(--border-strong); } /* ========================= Index: Action Needed panel - Single-destination CTA (Workboard) ========================= */ .action-list{ display:flex; flex-direction:column; gap:10px; margin-top: 8px; } .action-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); cursor:pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .action-item:hover{ transform: translateY(-1px); border-color: rgba(255,184,28,0.45); background: rgba(255,255,255,0.05); } .action-item:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,184,28,0.18); border-color: rgba(255,184,28,0.55); } .action-item.muted{ opacity: 0.75; } .action-left{ min-width:0; } .action-title{ font-weight: 900; letter-spacing: 0.2px; } .action-sub{ margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.25; } .action-right{ flex: 0 0 auto; display:flex; align-items:center; gap:10px; } .action-count{ min-width: 34px; height: 28px; padding: 0 10px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-weight: 900; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.18); } /* ========================= Announcements v2 (cards + badges) - Backwards compatible with existing .announce-* styles ========================= */ .announce-card{ border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,0.04); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .announce-card.is-pinned{ border-color: rgba(255,184,28,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .announce-card__top{ display: flex; align-items: center; gap: 10px; } .announce-card__meta{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .announce-card__row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .announce-card__when{ font-size: 12px; color: rgba(255,255,255,0.72); } .announce-card__actions{ display: flex; align-items: center; gap: 8px; } .announce-card__content{ display: flex; flex-direction: column; gap: 8px; } .announce-card__title{ font-weight: 700; font-size: 14px; color: rgba(255,255,255,0.95); letter-spacing: 0.2px; } .announce-card__body{ white-space: pre-wrap; line-height: 1.35; color: rgba(255,255,255,0.90); font-size: 13px; } .announce-card__by{ font-size: 12px; color: rgba(255,255,255,0.62); } .a-badge{ font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); } .a-badge--info{ border-color: rgba(59,130,246,0.40); background: rgba(59,130,246,0.10); } .a-badge--update{ border-color: rgba(255,184,28,0.40); background: rgba(255,184,28,0.10); } .a-badge--celebration{ border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); } .a-badge--warning{ border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.10); } .a-pin{ font-size: 11px; color: rgba(255,184,28,0.92); display: inline-flex; align-items: center; gap: 6px; } .btn-xs{ padding: 6px 8px; font-size: 12px; line-height: 1; border-radius: 10px; } .announce-manage-link{ display: inline-block; margin-top: 10px; font-size: 12px; color: rgba(255,184,28,0.95); text-decoration: none; } .announce-manage-link:hover{ text-decoration: underline; } /* RECENTLY UPDATED CARD (added) SaaS Activity Feed Styling */ .saas-activity-card .activity-feed{ display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .saas-activity-card .activity-item{ display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .saas-activity-card .activity-item:last-child{ border-bottom: none; } .saas-activity-card .activity-avatar{ width: 32px; height: 32px; border-radius: 8px; background: var(--accent-blue-soft); color: var(--brand-gold); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } .saas-activity-card .activity-content{ flex-grow: 1; min-width: 0; } .saas-activity-card .activity-title{ display: block; font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .saas-activity-card .activity-meta{ display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); gap: 10px; } .saas-activity-card .btn-text{ background: transparent; border: none; color: var(--brand-gold); font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px 0; transition: opacity 0.2s; } .saas-activity-card .btn-text:hover{ text-decoration: underline; } .saas-activity-card .activity-footer{ margin-top: 10px; } .saas-activity-card .activity-empty, .saas-activity-card .activity-placeholder{ color: var(--text-muted); font-size: 12px; padding: 8px 0; }