/* ============================================================ VIVEROCK Dashboards — shared design system Adapted from the client/rep dashboard prototypes. Scoped under .vv-rich so the same rules serve the client project view, the Rep Dashboard, and the Admin Dashboard. ============================================================ */ .vv-rich { --bg:#F8FAFC; --surface:#ffffff; --surface-2:#F1F5F9; --ink:#1E293B; --ink-dim:#64748B; --primary:#0F766E; --primary-dark:#0B5C56; --accent:#F59E0B; --danger:#DC2626; --line:#E2E8F0; --ok:#15803d; --pending:#94a3b8; /* Back-compat aliases so every existing rule below keeps working unchanged */ --gold:var(--accent); --gold-light:var(--primary); font-family:'Inter', Arial, sans-serif; background:var(--bg); color:var(--ink); position:relative; overflow-x:hidden; } .vv-rich *{ box-sizing:border-box; } .vv-rich h1, .vv-rich h2, .vv-rich h3, .vv-rich h4{ font-family:'Inter', Arial, sans-serif; letter-spacing:-0.01em; margin:0; font-weight:700; } .vv-rich .vr-serif{ font-family:'Inter', Arial, sans-serif; font-style:normal; font-weight:600; } .vv-rich .vr-wrap{ max-width:1600px; margin:0 auto; padding:0 32px; } @media (max-width:640px){ .vv-rich .vr-wrap{ padding:0 16px; } } .vv-rich .vr-eyebrow{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--primary); font-weight:600; } .vv-rich button, .vv-rich input, .vv-rich select, .vv-rich textarea{ font-family:'Inter', Arial, sans-serif; } /* ---------- TOPBAR ---------- */ /* Deliberately minimal: no background block, no border, no nav links — just enough to show who's logged in and a way out. This replaces the old boxed "VIVEROCK — REP DASHBOARD" bar. */ .vv-rich .vr-topbar{ padding:14px 0 0; } .vv-rich .vr-topbar .vr-wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .vv-rich .vr-brand{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:15px; letter-spacing:0.1em; color:#7a7565; } .vv-rich .vr-topbar-right{ display:flex; align-items:center; gap:12px; font-size:13px; color:#7a7565; flex-wrap:wrap; } .vv-rich .vr-switch{ background:none; border:none; color:#7a7565; padding:4px 2px; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; display:inline-block; } .vv-rich .vr-switch:hover{ color:var(--gold-light); } /* ---------- HERO ---------- */ .vv-rich .vr-hero{ padding:52px 0 40px; border-bottom:1px solid var(--line); } .vv-rich .vr-hero-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:48px; align-items:center; } .vv-rich .vr-status-badge{ display:inline-block; padding:7px 16px; background:rgba(15,118,110,0.08); border:1px solid rgba(15,118,110,0.25); color:var(--primary); font-size:13px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:18px; border-radius:999px; } .vv-rich .vr-hero h1{ font-size:32px; font-weight:700; color:var(--ink); margin-bottom:10px; line-height:1.2; letter-spacing:-0.02em; } .vv-rich .vr-meta-line{ display:flex; flex-wrap:wrap; gap:26px; margin-top:20px; } .vv-rich .vr-meta-item span.vr-label{ display:block; color:#7a7565; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:4px; } .vv-rich .vr-meta-item span.vr-val{ color:var(--ink); font-size:16px; } .vv-rich .vr-ring-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; } .vv-rich .vr-ring-label{ margin-top:14px; text-align:center; } .vv-rich .vr-ring-label .vr-pct{ font-family:'Inter', Arial, sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:34px; color:var(--gold-light); } .vv-rich .vr-ring-label .vr-cap{ font-size:14px; color:var(--ink-dim); } /* ---------- KPI CARDS ---------- */ .vv-rich .vr-kpis{ padding:40px 0; border-bottom:1px solid var(--line); } .vv-rich .vr-kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .vv-rich .vr-kpi-card{ background:var(--surface); padding:24px 22px; border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-kpi-card .vr-kpi-label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#8a8474; margin-bottom:10px; } .vv-rich .vr-kpi-card .vr-kpi-val{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:24px; color:var(--ink); letter-spacing:-0.01em; } .vv-rich .vr-kpi-card .vr-kpi-sub{ font-size:13px; color:var(--gold-light); margin-top:6px; } /* ---------- SECTIONS (shared) ---------- */ .vv-rich section.vr-section{ padding:48px 0; border-bottom:1px solid var(--line); } .vv-rich .vr-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:12px; } .vv-rich .vr-section-head h2{ font-size:20px; font-weight:700; color:var(--ink); margin-top:4px; letter-spacing:-0.01em; } .vv-rich .vr-add-btn{ background:none; border:1.5px solid var(--primary); color:var(--primary); padding:9px 18px; font-size:13px; font-weight:600; border-radius:999px; text-decoration:none; white-space:nowrap; display:inline-block; transition:background 0.15s ease, color 0.15s ease; } .vv-rich .vr-add-btn:hover{ background:var(--primary); color:#fff; } /* ---------- TIMELINE ---------- */ .vv-rich .vr-tl-row{ display:flex; overflow-x:auto; gap:0; padding-bottom:8px; } .vv-rich .vr-tl-step{ flex:1 0 120px; text-align:center; position:relative; padding:0 6px; } .vv-rich .vr-tl-step .vr-tl-dot{ width:16px; height:16px; border-radius:50%; margin:0 auto 12px; position:relative; z-index:2; border:2px solid var(--pending); background:var(--surface); } .vv-rich .vr-tl-step.done .vr-tl-dot{ background:var(--ok); border-color:var(--ok); } .vv-rich .vr-tl-step.active .vr-tl-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,146,58,0.2); } .vv-rich .vr-tl-step .vr-tl-line{ position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--pending); z-index:1; } .vv-rich .vr-tl-step.done .vr-tl-line{ background:var(--ok); } .vv-rich .vr-tl-step:first-child .vr-tl-line{ display:none; } .vv-rich .vr-tl-step .vr-tl-name{ font-size:14px; color:var(--ink); margin-bottom:4px; } .vv-rich .vr-tl-step .vr-tl-status{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; } .vv-rich .vr-tl-step.done .vr-tl-status{ color:var(--ok); } .vv-rich .vr-tl-step.active .vr-tl-status{ color:var(--gold-light); } .vv-rich .vr-tl-step.pending .vr-tl-status{ color:#7a7565; } /* ---------- ACTIVITY TABLE ---------- */ .vv-rich .vr-progress-note{ color:var(--ink-dim); font-size:15px; margin:8px 0 26px; max-width:640px; line-height:1.5; } .vv-rich table.vr-table{ width:100%; border-collapse:collapse; font-size:15px; } .vv-rich table.vr-table th{ text-align:left; padding:12px 14px; font-weight:600; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#8a8474; border-bottom:1px solid var(--line); } .vv-rich table.vr-table td{ padding:14px; border-bottom:1px solid rgba(200,146,58,0.08); vertical-align:middle; } .vv-rich .vr-bar-track{ width:140px; height:8px; background:var(--surface-2); border-radius:8px; overflow:hidden; } .vv-rich .vr-bar-fill{ height:100%; background:var(--gold); } .vv-rich .vr-bar-fill.complete{ background:var(--ok); } .vv-rich .vr-status-chip{ font-size:12px; padding:4px 10px; border-radius:12px; letter-spacing:0.03em; white-space:nowrap; } .vv-rich .vr-status-chip.complete{ background:rgba(90,143,90,0.15); color:#2f6b2f; } .vv-rich .vr-status-chip.inprogress{ background:rgba(200,146,58,0.15); color:var(--gold-light); } .vv-rich .vr-status-chip.pending{ background:rgba(138,131,120,0.15); color:#7a7565; } .vv-rich .vr-remark{ color:#7a7565; font-size:13px; } /* ---------- GALLERY ---------- */ .vv-rich .vr-filters{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 26px; } .vv-rich .vr-filter-btn{ background:none; border:1px solid var(--line); color:var(--ink-dim); padding:8px 16px; font-size:14px; cursor:pointer; border-radius:2px; } .vv-rich .vr-filter-btn.active, .vv-rich .vr-filter-btn:hover{ border-color:var(--gold); color:var(--gold-light); } .vv-rich .vr-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .vv-rich .vr-tile{ aspect-ratio:4/3; background:linear-gradient(135deg, var(--surface), var(--surface-2)); border:1px solid var(--line); border-radius:16px; position:relative; cursor:pointer; overflow:hidden; display:flex; align-items:flex-end; padding:12px; } .vv-rich .vr-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vv-rich .vr-tile .vr-tile-cap{ font-size:12px; color:#fff; position:relative; z-index:2; background:rgba(0,0,0,0.45); padding:4px 8px; border-radius:2px; } .vv-rich .vr-lightbox{ display:none; position:fixed; inset:0; background:rgba(10,9,8,0.92); z-index:999; align-items:center; justify-content:center; flex-direction:column; } .vv-rich .vr-lightbox.show{ display:flex; } .vv-rich .vr-lightbox img{ max-width:82vw; max-height:74vh; border:1px solid var(--gold); } .vv-rich .vr-lightbox-cap{ color:#fff; margin-top:16px; font-size:15px; } .vv-rich .vr-lightbox-close{ position:absolute; top:28px; right:36px; color:#fff; font-size:30px; cursor:pointer; background:none; border:none; } /* ---------- TEAM ---------- */ .vv-rich .vr-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .vv-rich .vr-tcard{ background:var(--surface); border:1px solid var(--line); padding:24px; border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-tcard-photo{ width:56px; height:56px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:18px; margin-bottom:14px; } .vv-rich .vr-tcard-role{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:4px; } .vv-rich .vr-tcard-name{ font-family:'Inter', Arial, sans-serif; font-weight:600; font-size:18px; color:var(--ink); margin-bottom:14px; } .vv-rich .vr-tcard-actions{ display:flex; gap:8px; } .vv-rich .vr-tcard-actions a{ flex:1; text-align:center; padding:8px 0; font-size:13px; border:1px solid var(--line); color:var(--ink-dim); text-decoration:none; border-radius:2px; } .vv-rich .vr-tcard-actions a:hover{ border-color:var(--gold); color:var(--gold-light); } /* ---------- CHALLENGES ---------- */ .vv-rich .vr-issue-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .vv-rich .vr-issue-card{ background:var(--surface); border:1px solid var(--line); padding:22px; border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-issue-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px; } .vv-rich .vr-issue-title{ font-family:'Inter', Arial, sans-serif; font-weight:600; font-size:17px; color:var(--ink); } .vv-rich .vr-priority{ font-size:11px; padding:4px 9px; letter-spacing:0.05em; text-transform:uppercase; border-radius:10px; white-space:nowrap; } .vv-rich .vr-priority.high{ background:rgba(178,91,74,0.18); color:#a13f2c; } .vv-rich .vr-priority.medium{ background:rgba(200,146,58,0.18); color:var(--gold-light); } .vv-rich .vr-priority.low{ background:rgba(138,131,120,0.18); color:#8a8474; } .vv-rich .vr-issue-desc{ font-size:14px; color:var(--ink-dim); line-height:1.5; margin-bottom:14px; } .vv-rich .vr-issue-meta{ display:flex; justify-content:space-between; font-size:12px; color:#7a7565; } .vv-rich .vr-issue-status{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; } .vv-rich .vr-issue-status.open{ color:#a13f2c; } .vv-rich .vr-issue-status.resolved{ color:var(--gold-light); } .vv-rich .vr-issue-status.closed{ color:#2f6b2f; } /* ---------- DOCUMENTS ---------- */ .vv-rich .vr-doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .vv-rich .vr-doc-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-doc-name{ font-size:15px; color:var(--ink); } .vv-rich .vr-doc-type{ font-size:12px; color:#7a7565; margin-top:3px; } .vv-rich .vr-doc-actions a{ font-size:13px; color:var(--gold-light); text-decoration:none; margin-left:14px; } .vv-rich .vr-doc-actions a:hover{ text-decoration:underline; } /* ---------- PAYMENTS ---------- */ .vv-rich .vr-pay-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:30px; } .vv-rich .vr-pay-summary div{ background:var(--surface); padding:20px; } .vv-rich .vr-pay-label{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:#8a8474; margin-bottom:8px; } .vv-rich .vr-pay-val{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:22px; color:var(--ink); } .vv-rich .vr-pay-status{ font-size:12px; padding:4px 10px; border-radius:12px; } .vv-rich .vr-pay-status.paid{ background:rgba(90,143,90,0.15); color:#2f6b2f; } .vv-rich .vr-pay-status.pending{ background:rgba(200,146,58,0.15); color:var(--gold-light); } /* ---------- MESSAGES ---------- */ .vv-rich .vr-messages{ margin:10px 0 18px; max-height:280px; overflow-y:auto; } .vv-rich .vr-message{ padding:12px 16px; border-radius:14px; margin-bottom:8px; background:var(--surface); font-size:14px; box-shadow:0 1px 2px rgba(30,41,59,0.05); } .vv-rich .vr-message.client{ border-left:3px solid var(--gold); } .vv-rich .vr-message.team{ border-left:3px solid var(--ink-dim); } .vv-rich .vr-message-form textarea{ width:100%; padding:10px; border-radius:2px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; } /* ---------- BUTTONS / FORMS (generic) ---------- */ .vv-rich .vr-btn{ display:inline-block; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border:none; padding:11px 22px; border-radius:999px; cursor:pointer; font-family:'Inter', Arial, sans-serif; font-weight:600; font-size:14px; letter-spacing:0; text-decoration:none; margin-top:8px; transition:transform 0.15s ease, box-shadow 0.15s ease; box-shadow:0 2px 8px rgba(15,118,110,0.25); } .vv-rich .vr-btn:hover{ background:linear-gradient(135deg, var(--primary-dark), var(--primary-dark)); color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(15,118,110,0.32); } .vv-rich .vr-btn-sm{ padding:7px 16px; font-size:13px; } .vv-rich select, .vv-rich input[type=text], .vv-rich input[type=number], .vv-rich input[type=email]{ background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:8px; border-radius:2px; } .vv-rich .vr-inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; } .vv-rich .vr-notice{ padding:12px 16px; border-radius:2px; margin-bottom:20px; font-size:14px; } .vv-rich .vr-notice.success{ background:rgba(90,143,90,0.15); color:#2f6b2f; border:1px solid rgba(90,143,90,0.4); } .vv-rich .vr-notice.error{ background:rgba(178,91,74,0.15); color:#a13f2c; border:1px solid rgba(178,91,74,0.4); } /* ---------- STATUS BADGE (project/lead pill, reused everywhere) ---------- */ .vv-rich .vr-pill{ display:inline-block; font-size:0.75em; padding:3px 10px; border-radius:999px; color:#fff; text-transform:uppercase; letter-spacing:0.5px; vertical-align:middle; } .vv-rich .vr-pill.planning, .vv-rich .vr-pill.new{ background:#7a7565; } .vv-rich .vr-pill.in_progress, .vv-rich .vr-pill.contacted{ background:var(--gold); color:#fff; } .vv-rich .vr-pill.on_hold{ background:var(--danger); } .vv-rich .vr-pill.completed, .vv-rich .vr-pill.closed{ background:var(--ok); } /* ---------- LOGIN SCREEN ---------- */ .vv-rich .vr-login-screen{ min-height:480px; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 20%, rgba(200,146,58,0.10), transparent 45%), var(--bg); padding:60px 24px; } .vv-rich .vr-login-box{ width:100%; max-width:440px; text-align:center; background:var(--surface); padding:48px 40px; border-radius:20px; box-shadow:0 4px 28px rgba(30,41,59,0.08); } .vv-rich .vr-mark{ width:56px; height:56px; margin:0 auto 26px; border:1px solid var(--primary); border-radius:14px; display:flex; align-items:center; justify-content:center; } .vv-rich .vr-mark span{ font-family:'Inter', Arial, sans-serif; font-weight:700; color:var(--primary); font-size:22px; } .vv-rich .vr-login-screen h1{ font-size:32px; margin-bottom:8px; } .vv-rich .vr-login-screen .vr-sub{ color:var(--ink-dim); font-size:15px; margin-bottom:26px; } .vv-rich .vr-login-screen form{ text-align:left; display:flex; flex-direction:column; gap:14px; } .vv-rich .vr-login-screen input, .vv-rich .vr-login-screen label{ width:100%; } .vv-rich .vr-login-screen input{ padding:12px 14px; font-size:15px; } .vv-rich .vr-login-screen p{ margin: 6px 0; } /* ---------- REP: PROJECT PICKER GRID ---------- */ .vv-rich .vr-proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .vv-rich .vr-proj-card{ background:var(--surface); border:1px solid var(--line); padding:26px; text-decoration:none; color:inherit; display:block; transition:border-color 0.2s ease, box-shadow 0.2s ease; border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-proj-card:hover{ border-color:var(--gold); box-shadow:0 4px 14px rgba(200,146,58,0.15); } .vv-rich .vr-proj-name{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:20px; margin:10px 0 4px; color:var(--ink); } .vv-rich .vr-proj-client{ font-size:14px; color:var(--ink-dim); margin-bottom:16px; } .vv-rich .vr-proj-bar-track{ height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin-bottom:8px; } .vv-rich .vr-proj-bar-fill{ height:100%; background:var(--gold); } .vv-rich .vr-proj-pct{ font-size:13px; color:#8a8474; } /* ---------- ADMIN: STAT CARDS ---------- */ .vv-rich .vr-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:34px; } .vv-rich .vr-stat-card{ background:var(--surface); padding:24px 20px; text-align:center; border-radius:18px; box-shadow:0 1px 3px rgba(30,41,59,0.06); } .vv-rich .vr-stat-num{ display:block; font-family:'Inter', Arial, sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:30px; color:var(--gold-light); } .vv-rich .vr-stat-label{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:#8a8474; margin-top:6px; } .vv-rich .vr-footer{ padding:32px 0; text-align:center; color:#5c584b; font-size:13px; border-top:1px solid var(--line); } @media (max-width:900px){ .vv-rich .vr-hero-grid{ grid-template-columns:1fr; } .vv-rich .vr-kpi-grid{ grid-template-columns:repeat(2,1fr); } .vv-rich .vr-team-grid{ grid-template-columns:1fr; } .vv-rich .vr-gallery-grid{ grid-template-columns:repeat(2,1fr); } .vv-rich .vr-issue-grid{ grid-template-columns:1fr; } .vv-rich .vr-doc-grid{ grid-template-columns:1fr; } .vv-rich .vr-pay-summary{ grid-template-columns:repeat(2,1fr); } .vv-rich .vr-proj-grid{ grid-template-columns:1fr; } .vv-rich .vr-stat-grid{ grid-template-columns:repeat(2,1fr); } } /* Public contact form re-uses the light cream card style from the marketing site rather than the dark portal, so it fits inline on the Contact page */ .vv-contact-form input[type="text"], .vv-contact-form input[type="email"], .vv-contact-form select, .vv-contact-form textarea{ width:100%; max-width:420px; padding:8px; border-radius:6px; border:1px solid #d8d0bb; } /* ============================================================ ACCORDION SECTIONS Each .vr-section becomes a collapsible block; only one open at a time. Content is moved into .vr-section-body by JS. ============================================================ */ .vv-rich .vr-section{ padding:0; border-bottom:1px solid var(--line); } .vv-rich .vr-section .vr-wrap{ padding-top:0; padding-bottom:0; } .vv-rich .vr-section-head{ cursor:pointer; padding:22px 0; margin-bottom:0; user-select:none; display:flex; align-items:center; justify-content:space-between; } .vv-rich .vr-section-head::after{ content:'+'; font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:22px; color:var(--gold-light); transition:transform 0.25s ease; margin-left:16px; flex-shrink:0; } .vv-rich .vr-section.vr-open .vr-section-head::after{ content:'\2212'; } /* minus sign */ .vv-rich .vr-section-body{ max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; } .vv-rich .vr-section.vr-open .vr-section-body{ max-height:4000px; opacity:1; padding-bottom:40px; } /* Widen cards for a landscape feel — grids favor more columns over tall stacks */ @media (min-width:901px){ .vv-rich .vr-team-grid{ grid-template-columns:repeat(4,1fr); } .vv-rich .vr-issue-grid{ grid-template-columns:repeat(3,1fr); } .vv-rich .vr-doc-grid{ grid-template-columns:repeat(3,1fr); } .vv-rich .vr-gallery-grid{ grid-template-columns:repeat(5,1fr); } .vv-rich .vr-proj-grid{ grid-template-columns:repeat(3,1fr); } } /* ============================================================ DRAG-AND-DROP UPLOAD DROPZONE ============================================================ */ .vv-rich .vv-dropzone{ border:2px dashed var(--line); border-radius:16px; padding:24px; text-align:center; margin-bottom:22px; transition:border-color 0.2s ease, background 0.2s ease; } .vv-rich .vv-dropzone.vv-dragover{ border-color:var(--gold); background:rgba(200,146,58,0.06); } .vv-rich .vv-dropzone-label{ font-size:15px; color:var(--ink-dim); } .vv-rich .vv-dropzone-browse{ background:none; border:none; color:var(--gold-light); text-decoration:underline; cursor:pointer; font-size:15px; padding:0; font-family:inherit; } .vv-rich .vv-dropzone-hint{ display:block; font-size:12px; color:#5c584b; margin-top:6px; } .vv-rich .vv-dropzone-progress-list{ margin-top:14px; text-align:left; } .vv-rich .vv-dropzone-progress-item{ font-size:13px; color:var(--ink-dim); margin-bottom:8px; } .vv-rich .vv-dropzone-progress-track{ height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin-top:4px; } .vv-rich .vv-dropzone-progress-fill{ height:100%; background:var(--gold); width:0%; transition:width 0.2s ease; } .vv-rich .vv-dropzone-progress-item.vv-error{ color:#a13f2c; } .vv-rich .vv-dropzone-progress-item.vv-done{ color:#2f6b2f; } .vv-rich .vr-tile{ position:relative; } .vv-rich .vr-tile-delete{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(10,9,8,0.75); color:#fff; text-align:center; line-height:24px; font-size:16px; text-decoration:none; z-index:3; } .vv-rich .vr-tile-delete:hover{ background:var(--danger); } /* ---------- PROGRESS RING ANIMATION ---------- */ .vv-rich .vv-ring-progress{ transition:stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1); } /* ============================================================ APP SHELL — persistent left sidebar + main content column, matching the reference admin dashboard layout. ============================================================ */ .vv-rich .vv-app-shell{ display:flex; align-items:flex-start; min-height:100vh; } .vv-rich .vv-sidebar{ width:248px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line); padding:26px 18px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; } .vv-rich .vv-sidebar-brand{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:var(--ink); padding:0 8px 22px; letter-spacing:-0.01em; } .vv-rich .vv-sidebar-mark{ color:var(--primary); display:flex; } .vv-rich .vv-sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; } .vv-rich .vv-sidebar-nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:var(--ink-dim); text-decoration:none; font-size:14.5px; font-weight:500; transition:background 0.15s ease, color 0.15s ease; } .vv-rich .vv-sidebar-nav a:hover{ background:var(--surface-2); color:var(--ink); } .vv-rich .vv-sidebar-nav a.active{ background:rgba(15,118,110,0.09); color:var(--primary); font-weight:600; } .vv-rich .vv-sidebar-nav a .vv-icon{ flex-shrink:0; } .vv-rich .vv-sidebar-label{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#a3aab5; margin:18px 12px 8px; } .vv-rich .vv-sidebar-footer{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; } .vv-rich .vv-sidebar-footer a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--ink-dim); text-decoration:none; font-size:14px; } .vv-rich .vv-sidebar-footer a:hover{ background:var(--surface-2); color:var(--danger); } .vv-rich .vv-main{ flex:1; min-width:0; padding:24px 0 60px; } .vv-rich .vv-main .vr-wrap{ max-width:1400px; } /* Topbar (inside main column, not full-width anymore) */ .vv-rich .vv-topbar-app{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:0 32px 22px; border-bottom:1px solid var(--line); margin-bottom:6px; } @media (max-width:640px){ .vv-rich .vv-topbar-app{ padding:0 16px 18px; } } .vv-rich .vv-topbar-search{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border-radius:999px; padding:10px 18px; flex:1; max-width:340px; color:#a3aab5; } .vv-rich .vv-topbar-search input{ border:none; background:none; outline:none; font-size:14px; color:var(--ink); flex:1; } .vv-rich .vv-topbar-search input::placeholder{ color:#a3aab5; } .vv-rich .vv-topbar-app-right{ display:flex; align-items:center; gap:16px; color:var(--ink-dim); } .vv-rich .vv-avatar{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; } .vv-rich .vv-topbar-user{ display:flex; flex-direction:column; line-height:1.3; } .vv-rich .vv-topbar-user strong{ font-size:13.5px; color:var(--ink); } .vv-rich .vv-topbar-user span{ font-size:12px; color:var(--ink-dim); } /* Stat card icon badges (matches reference: rounded icon chip beside label) */ .vv-rich .vv-stat-icon, .vv-rich .vr-kpi-card .vv-stat-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(15,118,110,0.09); color:var(--primary); margin-bottom:10px; } @media (max-width:900px){ .vv-rich .vv-sidebar{ position:fixed; left:0; top:0; z-index:200; transform:translateX(-100%); transition:transform 0.25s ease; box-shadow:0 0 0 rgba(0,0,0,0); } .vv-rich .vv-sidebar.vv-sidebar-open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,0.25); } .vv-rich .vv-sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(15,20,25,0.4); z-index:190; } .vv-rich .vv-sidebar-scrim.vv-show{ display:block; } .vv-rich .vv-main{ padding-top:16px; } .vv-rich .vv-menu-toggle{ display:inline-flex; } } .vv-rich .vv-menu-toggle{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; margin-right:6px; flex-shrink:0; } /* ============================================================ PROJECT DETAIL TABS — Share Link/Timeline/Activities/Gallery/ Team/Challenges/Documents/Payments/Messages are chosen from the sidebar sub-nav and shown here, below the hero/KPI cards. ============================================================ */ .vv-rich .vv-project-tabs .vr-section[data-panel]{ display:none; } .vv-rich .vv-project-tabs .vr-section[data-panel].vv-panel-active{ display:block; } /* Sidebar sub-nav buttons (Share Link, Timeline, etc.) — same look as the main nav links, rendered as