/* ============================================================================ Discovery Trials Console — design refresh ("evolve, don't replace"). Implements discovery-ui-improvement-prompt.md. SCOPING: every rule is namespaced under `body.cv2` (and tokens live in :root, inert until used). The home page opts in via {% block body_class %}cv2{% endblock %}. To roll this out site-wide later: add the `cv2` class to in base.html. Other pages are untouched today. ========================================================================== */ :root { /* Brand navy — existing identity, formalized */ --navy-900:#0E2440; --navy-800:#133355; --navy-700:#1B4068; --navy-600:#235586; --navy-500:#2E6BA8; /* Surfaces */ --surface:#FFFFFF; --surface-sunken:#F4F7FB; --surface-line:#E3EAF2; /* Ink */ --ink-900:#0F1E2E; --ink-700:#33485C; --ink-500:#6A7E92; --ink-300:#9DAFBF; /* Functional accents — one per meaning */ --ai-cyan:#1FA9E0; --vital-green:#12A572; --signal-amber:#E0A02E; --steel-teal:#2C8C8C; /* Alert */ --alert-bg:#B5343A; --alert-text:#FFFFFF; /* Type */ --font-display:'Space Grotesk','Sora','Segoe UI',system-ui,sans-serif; --font-ui:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --font-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Consolas,monospace; /* Radius */ --r-card:12px; --r-btn:8px; --r-tile:10px; --r-pill:999px; /* Elevation */ --shadow-card:0 1px 2px rgba(15,30,46,.04),0 6px 16px rgba(15,30,46,.06); --shadow-hover:0 2px 4px rgba(15,30,46,.06),0 12px 28px rgba(15,30,46,.10); } /* ---- Base (scoped) ---- */ body.cv2 { background: var(--surface-sunken); font-family: var(--font-ui); color: var(--ink-700); -webkit-font-smoothing: antialiased; } body.cv2 main { display: block; } /* Font family on headings is safe on any bg; COLOR is set per-component so a heading on a dark surface (hero/nav/footer) is never forced dark. */ body.cv2 h1, body.cv2 h2, body.cv2 h3, body.cv2 h4, body.cv2 h5, body.cv2 h6 { font-family: var(--font-display); letter-spacing: -0.01em; } body.cv2 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* content link color is handled (scoped to main) in the site-wide layer below */ /* Focus ring (a11y floor) */ body.cv2 a:focus-visible, body.cv2 button:focus-visible, body.cv2 .btn:focus-visible, body.cv2 .cv2-focus:focus-visible { outline: 2px solid var(--ai-cyan); outline-offset: 2px; border-radius: var(--r-btn); } /* Page-load stagger */ @keyframes cvRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } body.cv2 .cv-rise { opacity: 0; animation: cvRise .5s cubic-bezier(.22,.61,.36,1) forwards; } body.cv2 .cv-d1 { animation-delay: .04s; } body.cv2 .cv-d2 { animation-delay: .10s; } body.cv2 .cv-d3 { animation-delay: .16s; } body.cv2 .cv-d4 { animation-delay: .22s; } /* =========================================================== Utility bar === */ body.cv2 .header-flex { border-bottom: 1px solid var(--surface-line); box-shadow: 0 1px 2px rgba(15,30,46,.04); } /* DEV ENVIRONMENT -> amber status pill with a dot. Scoped to `.env-dev` (set in base.html only when APP_ENV == 'dev') so on preprod/prod the "AI-Powered Automation Platform" tagline stays plain muted text, not a pill. */ body.cv2 .header-flex .title p.env-dev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .1em; color: var(--signal-amber); background: #fbf3e2; border: 1px solid #f0e0bd; padding: 2px 9px 2px 7px; border-radius: var(--r-pill); margin-top: 2px; } body.cv2 .header-flex .title p.env-dev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-amber); flex: 0 0 auto; } /* Notification bell: one-time pulse on load */ @keyframes cvBell { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } } body.cv2 #notifBellBtn { animation: cvBell 1.4s ease 1; } /* Logout -> quiet ghost button */ body.cv2 form[action="/logout"] .btn { background: transparent; color: var(--ink-500); border: 1px solid var(--surface-line); font-weight: 500; } body.cv2 form[action="/logout"] .btn:hover { background: var(--surface-sunken); color: var(--ink-700); border-color: var(--ink-300); } /* ================================================================== Nav === */ body.cv2 .main-menu { background: var(--navy-800); } body.cv2 .main-menu a { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.82); border-bottom: 2px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } body.cv2 .main-menu a:hover { background: var(--navy-600); color: #fff; } body.cv2 .main-menu > ul > li > a:hover { border-bottom-color: var(--ai-cyan); } /* Active section — base.html adds .active to the current top-level item. */ body.cv2 .main-menu > ul > li > a.active { color: #fff; border-bottom-color: var(--ai-cyan); } body.cv2 .main-menu .submenu { border: 1px solid var(--surface-line); box-shadow: var(--shadow-hover); border-radius: 0 0 var(--r-card) var(--r-card); } body.cv2 .main-menu .submenu a { color: var(--ink-700); border-bottom: none; } body.cv2 .main-menu .submenu a:hover { background: #eaf6fc; color: var(--navy-700); } /* =============================================================== Layout === */ body.cv2 .cv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } body.cv2 .cv-section { margin: 30px auto; } body.cv2 .cv-h2 { font-size: 20px; font-weight: 600; color: var(--ink-900); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } body.cv2 .cv-h2 i { color: var(--navy-500); font-size: .9em; } /* ================================================================ Hero === */ body.cv2 .hero-v2 { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-600) 100%); color: #fff; } body.cv2 .hero-v2 .cv-wrap { padding-top: 40px; padding-bottom: 40px; position: relative; z-index: 2; } body.cv2 .hero-v2 h1 { color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; display: flex; align-items: center; gap: 14px; } body.cv2 .hero-v2 h1 .hero-bot { width: 46px; height: 46px; border-radius: var(--r-tile); background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #cfeafb; flex: 0 0 auto; } body.cv2 .hero-v2 .hero-sub { color: rgba(255,255,255,.82); font-size: 15px; max-width: 620px; margin: 0 0 22px; } body.cv2 .hero-v2 .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } body.cv2 .hero-btn { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--r-btn); padding: 11px 22px; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease; } body.cv2 .hero-btn-primary { background: #fff; color: var(--navy-800); } body.cv2 .hero-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--navy-900); } body.cv2 .hero-btn-secondary { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.45); } body.cv2 .hero-btn-secondary:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); } /* Ambient signal line (echoes the pipeline) — atmosphere, not a focal point */ body.cv2 .hero-amb { position: absolute; top: 0; right: 0; width: 46%; height: 100%; z-index: 1; opacity: .14; pointer-events: none; } body.cv2 .hero-amb svg { width: 100%; height: 100%; } @keyframes cvDash { to { stroke-dashoffset: -240; } } body.cv2 .hero-amb .amb-flow { stroke-dasharray: 8 14; animation: cvDash 4s linear infinite; } /* ============================================================ KPI strip === */ body.cv2 .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } body.cv2 .kpi-tile { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px 18px; } body.cv2 .kpi-ic { width: 34px; height: 34px; border-radius: var(--r-tile); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; margin-bottom: 10px; } body.cv2 .kpi-num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink-900); line-height: 1.05; font-variant-numeric: tabular-nums; } body.cv2 .kpi-label { font-size: 12.5px; font-weight: 500; color: var(--ink-500); margin-top: 3px; letter-spacing: .01em; } /* Accent system (one meaning each) */ body.cv2 .ac-cyan { color: var(--ai-cyan); } body.cv2 .acb-cyan { background: #e6f5fc; color: var(--ai-cyan); } body.cv2 .ac-green { color: var(--vital-green); } body.cv2 .acb-green { background: #e3f6ef; color: var(--vital-green); } body.cv2 .ac-amber { color: var(--signal-amber); } body.cv2 .acb-amber { background: #fbf3e2; color: #b9821f; } body.cv2 .ac-teal { color: var(--steel-teal); } body.cv2 .acb-teal { background: #e4f1f1; color: var(--steel-teal); } /* Feature-card accent (drives the hover top-border) */ body.cv2 .fc-cyan{--fc-accent:var(--ai-cyan);} body.cv2 .fc-green{--fc-accent:var(--vital-green);} body.cv2 .fc-amber{--fc-accent:var(--signal-amber);} body.cv2 .fc-teal{--fc-accent:var(--steel-teal);} /* Pipeline node accent (ring color + soft fill) */ body.cv2 .nd-cyan{--nd:var(--ai-cyan);--nd-soft:#e6f5fc;--nd-ring:rgba(31,169,224,.30);} body.cv2 .nd-teal{--nd:var(--steel-teal);--nd-soft:#e4f1f1;--nd-ring:rgba(44,140,140,.30);} body.cv2 .nd-amber{--nd:#b9821f;--nd-soft:#fbf3e2;--nd-ring:rgba(224,160,46,.35);} body.cv2 .nd-green{--nd:var(--vital-green);--nd-soft:#e3f6ef;--nd-ring:rgba(18,165,114,.30);} /* ========================================================= Feature cards === */ body.cv2 .fc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } body.cv2 .fc-v2 { position: relative; background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; } body.cv2 .fc-v2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--fc-accent, var(--navy-500)); opacity: 0; transition: opacity .18s ease; } body.cv2 .fc-v2:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } body.cv2 .fc-v2:hover::before { opacity: 1; } body.cv2 .fc-ic { width: 46px; height: 46px; border-radius: var(--r-tile); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 14px; transition: filter .18s ease; } body.cv2 .fc-v2:hover .fc-ic { filter: saturate(1.4); } body.cv2 .fc-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink-900); margin: 0 0 6px; } body.cv2 .fc-desc { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; margin: 0; } body.cv2 .fc-status { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--surface-line); display: flex; align-items: center; gap: 7px; } body.cv2 .fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vital-green); flex: 0 0 auto; } /* ========================================================== Quick actions === */ body.cv2 .qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } body.cv2 .qa-v2 { position: relative; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--surface-line); border-left: 4px solid var(--qa-accent, var(--navy-500)); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px 18px; text-decoration: none; color: var(--ink-900); transition: transform .18s ease, box-shadow .18s ease; } body.cv2 .qa-v2:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--ink-900); } body.cv2 .qa-ic { width: 44px; height: 44px; border-radius: var(--r-tile); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto; } body.cv2 .qa-body { flex: 1 1 auto; display: flex; flex-direction: column; } body.cv2 .qa-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.1; } body.cv2 .qa-sub { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; } body.cv2 .qa-count { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-700); } body.cv2 .qa-chev { color: var(--ink-300); transition: transform .18s ease; } body.cv2 .qa-v2:hover .qa-chev { transform: translateX(4px); color: var(--ink-500); } /* ======================================================= Pipeline (signature) */ body.cv2 .pipe-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 26px 22px 22px; } body.cv2 .pipe-v2 { display: flex; align-items: flex-start; } body.cv2 .pipe-node { flex: 0 0 auto; width: 128px; text-decoration: none; color: var(--ink-700); text-align: center; position: relative; padding-top: 4px; display: flex; flex-direction: column; align-items: center; } body.cv2 .pipe-ring { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--nd-soft,#eef3f8); color: var(--nd,#5b6b7a); border: 2px solid var(--nd-ring, transparent); transition: transform .18s ease, box-shadow .18s ease; } body.cv2 .pipe-node:hover .pipe-ring { transform: translateY(-3px); box-shadow: var(--shadow-hover); } body.cv2 .pipe-count { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink-900); line-height: 1.1; font-variant-numeric: tabular-nums; } body.cv2 .pipe-label { font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.25; } /* goal node (Schedule) — green, glowing */ body.cv2 .pipe-node.is-goal .pipe-ring { /* Schedule (the goal/end stage) uses the SAME soft nd-green fill as its neighbours; green alone marks it as the "scheduled" target — no solid fill that stands out. */ } /* bottleneck node — gentle amber pulse */ @keyframes cvPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,160,46,.0); } 50% { box-shadow: 0 0 0 7px rgba(224,160,46,.22); } } body.cv2 .pipe-node.is-bottleneck .pipe-ring { border-color: var(--signal-amber); animation: cvPulse 2.2s ease-in-out infinite; } /* When the bottleneck IS the goal node, keep the goal node clean (no amber ring/pulse) so it stays consistent with its neighbours — the conversion % still shows the leak. */ body.cv2 .pipe-node.is-goal.is-bottleneck .pipe-ring { border-color: var(--nd-ring); animation: none; } body.cv2 .pipe-node .pipe-tip { position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); background: var(--ink-900); color: #fff; font-size: 11.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 5; } body.cv2 .pipe-node:hover .pipe-tip { opacity: 1; } /* connector with flowing gradient + conversion % */ body.cv2 .pipe-conn { flex: 1 1 auto; position: relative; height: 58px; display: flex; align-items: center; } body.cv2 .pipe-line { position: relative; width: 100%; height: 3px; border-radius: 999px; background: var(--surface-line); overflow: hidden; } body.cv2 .pipe-line::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--ai-cyan) 50%, transparent 100%); background-size: 220% 100%; animation: cvFlow 3.6s linear infinite; opacity: .75; } @keyframes cvFlow { from { background-position: 220% 0; } to { background-position: -220% 0; } } body.cv2 .pipe-conv { position: absolute; left: 50%; transform: translateX(-50%); top: -7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-500); background: var(--surface); padding: 0 5px; cursor: help; } /* Hover tooltip explaining the conversion % (so it's clear what the number means). */ body.cv2 .pipe-conv-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 7px; background: var(--ink-900); color: #fff; font-family: var(--font-ui); font-weight: 500; font-size: 11px; line-height: 1.3; padding: 6px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 6; } body.cv2 .pipe-conv-tip b { font-weight: 600; } body.cv2 .pipe-conv:hover .pipe-conv-tip { opacity: 1; } /* ============================================================== Sign-in === */ body.cv2 .cv-signin { text-align: center; max-width: 520px; margin: 32px auto; background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 30px; } /* ============================================================ Responsive === */ @media (max-width: 992px) { body.cv2 .kpi-strip, body.cv2 .fc-grid { grid-template-columns: repeat(2, 1fr); } body.cv2 .qa-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { body.cv2 .hero-v2 h1 { font-size: 26px; } body.cv2 .hero-amb { display: none; } /* pipeline -> vertical stepper */ body.cv2 .pipe-v2 { flex-direction: column; align-items: stretch; } body.cv2 .pipe-node { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 6px 0; } body.cv2 .pipe-node .pipe-ring { margin: 0; } body.cv2 .pipe-conn { height: 26px; width: 58px; } body.cv2 .pipe-line { width: 3px; height: 100%; } body.cv2 .pipe-line::before { background: linear-gradient(180deg, transparent, var(--ai-cyan), transparent); background-size: 100% 220%; animation: cvFlowV 3.6s linear infinite; } @keyframes cvFlowV { from { background-position: 0 220%; } to { background-position: 0 -220%; } } body.cv2 .pipe-conv { top: 50%; left: 18px; transform: translateY(-50%); } } @media (max-width: 560px) { body.cv2 .kpi-strip, body.cv2 .fc-grid { grid-template-columns: 1fr; } } /* ===================================================== Reduced motion === */ @media (prefers-reduced-motion: reduce) { body.cv2 .cv-rise { opacity: 1; animation: none; } body.cv2 #notifBellBtn, body.cv2 .pipe-node.is-bottleneck .pipe-ring { animation: none; } body.cv2 .pipe-line::before, body.cv2 .hero-amb .amb-flow { animation: none; } } /* ============================================================================ SITE-WIDE ROLLOUT LAYER — applies to EVERY cv2 page (base.html adds `cv2`). Conservative on purpose: elevation, radius, type, and focus only. No text- or border-COLOR overrides on shared components, so per-page colored borders, validation states, and dark table headers are never clobbered. ========================================================================== */ body.cv2 .card { border-radius: var(--r-card); box-shadow: var(--shadow-card); } body.cv2 .card > .card-header { font-family: var(--font-display); font-weight: 600; } body.cv2 .content-card { border-radius: var(--r-card); box-shadow: var(--shadow-card); } body.cv2 .btn { border-radius: var(--r-btn); } body.cv2 .btn-get-started { border-radius: var(--r-btn); font-family: var(--font-ui); font-weight: 600; } body.cv2 .form-control, body.cv2 .form-select { border-radius: var(--r-btn); } body.cv2 .form-control:focus, body.cv2 .form-select:focus { border-color: var(--ai-cyan); box-shadow: 0 0 0 3px rgba(31,169,224,.15); } /* Content-area links pick up the brand navy (excludes buttons/pagination/menu items). */ body.cv2 main a:not([class*="btn"]):not(.page-link):not(.dropdown-item) { color: var(--navy-500); } body.cv2 main a:not([class*="btn"]):not(.page-link):not(.dropdown-item):hover { color: var(--navy-700); }