/* ===================================================== BYB UX v2 — Design System Layered on top of existing Bootstrap 5 + modern-design.css. Does NOT replace — adds section colors, v2 card styles, and shared component styling. ===================================================== */ /* ===== Section colors — feel where you are ===== */ :root { /* Section accent (overridden per page via data-section on ) */ --sec: transparent; --sec-dark: transparent; --sec-soft: transparent; --sec-text: var(--byb-primary, #089ba6); /* V2 font — Inter (geladen in base.html) met system-stack als fallback. Body zet al Inter; --v2-font moet hier mee, anders overschrijven v2- containers terug naar OS-systemfonts waardoor de app inconsistent oogt. */ --v2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* V2 semantic tokens (complement existing --byb-* vars) */ --v2-success: #10B981; --v2-success-soft: rgba(16,185,129,0.12); --v2-warning: #F59E0B; --v2-warning-soft: rgba(245,158,11,0.12); --v2-danger: #EF4444; --v2-danger-soft: rgba(239,68,68,0.12); --v2-info: #3B82F6; --v2-info-soft: rgba(59,130,246,0.12); /* V2 surface tokens (work in both themes) */ --v2-surface: #FFFFFF; --v2-surface-2: #F1F5F9; --v2-border: #E6EBF2; --v2-border-2: #D1D9E3; --v2-text: #0F172A; --v2-text-2: #475569; --v2-text-3: #64748B; /* CrCo-044: ZC-060 contrast fix - was #94A3B8 */ /* V2 radius */ --v2-r-sm: 6px; --v2-r-md: 10px; --v2-r-lg: 14px; /* Selfcoach section (teal — matches live app kleur1.jpg) */ --sec-self: #41849b; --sec-self-dark: #14333e; --sec-self-soft: rgba(65,132,155,0.10); /* Crewcoach section (purple — matches live app kleur1.jpg) */ --sec-crew: #571d77; --sec-crew-dark: #2f084f; --sec-crew-soft: rgba(87,29,119,0.10); } /* Dark mode overrides */ [data-bs-theme="dark"] { --v2-surface: #131C2E; --v2-surface-2: #1B2538; --v2-border: rgba(255,255,255,0.08); --v2-border-2: rgba(255,255,255,0.14); --v2-text: #F1F5F9; --v2-text-2: #CBD5E1; --v2-text-3: #64748B; /* CrCo-044: ZC-060 contrast fix - was #94A3B8 */ --v2-success-soft: rgba(16,185,129,0.18); --v2-warning-soft: rgba(245,158,11,0.18); --v2-danger-soft: rgba(239,68,68,0.18); --v2-info-soft: rgba(59,130,246,0.18); } /* Per-section: set --sec when data-section is on */ [data-section="self"] { --sec: var(--sec-self); --sec-dark: var(--sec-self-dark); --sec-soft: var(--sec-self-soft); --sec-text: var(--sec-self); } [data-section="crew"] { --sec: var(--sec-crew); --sec-dark: var(--sec-crew-dark); --sec-soft: var(--sec-crew-soft); --sec-text: var(--sec-crew); } [data-section="dashboard"] { --sec: var(--byb-primary, #089ba6); --sec-soft: rgba(8,155,166,0.10); --sec-text: var(--byb-primary, #089ba6); } [data-section="profile"] { --sec: #475569; --sec-soft: rgba(71,85,105,0.08); --sec-text: #475569; } [data-bs-theme="dark"][data-section="self"] { --sec-text: #6bb8d0; --sec-soft: rgba(65,132,155,0.18); } [data-bs-theme="dark"][data-section="crew"] { --sec-text: #b07de0; --sec-soft: rgba(87,29,119,0.18); --sec-crew: #9b59d0; --sec-crew-dark: #7c3aed; } /* ===== Dark mode: global overrides for buttons, inputs, cards ===== */ /* Hamburger / navbar toggler */ [data-bs-theme="dark"] .navbar-toggler { border-color: rgba(255,255,255,0.2) !important; } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1) !important; } /* All buttons with white bg → dark surface */ [data-bs-theme="dark"] .btn, [data-bs-theme="dark"] button, [data-bs-theme="dark"] [class*="btn"] { --bs-btn-bg: var(--v2-surface-2); --bs-btn-color: var(--v2-text-2); --bs-btn-border-color: var(--v2-border-2); } /* Form inputs, selects, textareas */ [data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-bs-theme="dark"] select, [data-bs-theme="dark"] textarea { background-color: var(--v2-surface-2) !important; color: var(--v2-text) !important; border-color: var(--v2-border-2) !important; } /* Bootstrap modal overrides */ [data-bs-theme="dark"] .modal-content { background: var(--v2-surface); border-color: var(--v2-border); } [data-bs-theme="dark"] .modal-header { background: var(--v2-surface); border-color: var(--v2-border); } [data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1); } [data-bs-theme="dark"] .modal-footer { background: var(--v2-surface-2); border-color: var(--v2-border); } /* Tables */ [data-bs-theme="dark"] .table { --bs-table-bg: var(--v2-surface); --bs-table-color: var(--v2-text); --bs-table-border-color: var(--v2-border); } [data-bs-theme="dark"] .table-light { --bs-table-bg: var(--v2-surface-2); --bs-table-color: var(--v2-text); } /* Card backgrounds (catch-all) */ [data-bs-theme="dark"] .cc-card, [data-bs-theme="dark"] .co-section, [data-bs-theme="dark"] .focus-tip, [data-bs-theme="dark"] details.co-collap, [data-bs-theme="dark"] .tp-card, [data-bs-theme="dark"] .op-row, [data-bs-theme="dark"] .sc-section-card, [data-bs-theme="dark"] .rc-card, [data-bs-theme="dark"] .pt-modal, [data-bs-theme="dark"] .nc-modal, [data-bs-theme="dark"] .cdm-modal, [data-bs-theme="dark"] .cw-modal, [data-bs-theme="dark"] .sc-modal, [data-bs-theme="dark"] .bp-info-modal .m-hdr, [data-bs-theme="dark"] .kc-card, [data-bs-theme="dark"] .pr-card { background-color: var(--v2-surface) !important; color: var(--v2-text); } /* Inline white backgrounds via style attr → override */ [data-bs-theme="dark"] [style*="background:#fff"], [data-bs-theme="dark"] [style*="background: #fff"], [data-bs-theme="dark"] [style*="background:white"], [data-bs-theme="dark"] [style*="background: white"] { background-color: var(--v2-surface) !important; } [data-bs-theme="dark"] [style*="background:#fafbfc"], [data-bs-theme="dark"] [style*="background: #fafbfc"], [data-bs-theme="dark"] [style*="background:#f8fafc"], [data-bs-theme="dark"] [style*="background: #f8fafc"] { background-color: var(--v2-surface-2) !important; } /* Avatar initials — lighter bg for readability */ [data-bs-theme="dark"] .avi, [data-bs-theme="dark"] .nm .avi, [data-bs-theme="dark"] .sc-header-avatar { opacity: 0.9; } /* Badges and pills on dark bg */ [data-bs-theme="dark"] .attn-pill, [data-bs-theme="dark"] .p-dot, [data-bs-theme="dark"] .ds { border-color: var(--v2-border-2) !important; } /* ===== Section indicator on navbar ===== */ /* Colored line under the active nav item */ .navbar-modern .nav-link.active::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; height: 3px; background: var(--sec, var(--byb-primary)); border-radius: 3px 3px 0 0; } .navbar-modern .nav-link { position: relative; } /* Section color: bottom border on active tab (clean) */ .sc-tabs { border-top: none !important; } /* Override selfcoach tab active color when section color is set */ [data-section="self"] .sc-tab.active { color: var(--sec-self) !important; border-bottom-color: var(--sec-self) !important; } [data-section="self"] .sc-tab:hover { color: var(--sec-self) !important; } /* Crewcoach sub-tabs (Bootstrap nav-pills used in crew_detail) */ [data-section="crew"] .nav-pills .nav-link.active { background: var(--sec-soft, rgba(87,29,119,0.10)) !important; color: var(--sec-text, #571d77) !important; } /* ===== V2 heading overrides (base.html forces h1:18px, h2:16px, h3:14px) ===== */ .v2-profile-hero h2 { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.4px !important; } .v2-section-card h3 { font-size: 12px !important; } .v2-card .v2-headline { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.4px !important; line-height: 1.25 !important; } .v2-celebrate h4 { font-size: 16px !important; font-weight: 800 !important; } .v2-plan-bar h5 { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.2px !important; } .db-welcome h1 { font-size: 1.7rem !important; font-weight: 800 !important; letter-spacing: -0.5px !important; } .v2-danger-zone h4 { font-size: 12px !important; } /* ===== V2 Card — reusable answer card pattern ===== */ .v2-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 16px; padding: 28px 26px 20px; font-family: var(--v2-font); position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; box-shadow: 0 2px 12px rgba(15,23,42,0.06); display: flex; flex-direction: column; min-height: 240px; } .v2-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,23,42,0.12); border-color: var(--v2-border-2); } [data-bs-theme="dark"] .v2-card { box-shadow: 0 2px 12px rgba(0,0,0,0.25); } [data-bs-theme="dark"] .v2-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.45); } /* Accent bar on top of card — clear color signal */ .v2-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--v2-border-2); z-index: 1; } .v2-card.good::before { background: linear-gradient(90deg, #10B981, #059669); } .v2-card.warn::before { background: linear-gradient(90deg, #F59E0B, #D97706); } .v2-card.bad::before { background: linear-gradient(90deg, #EF4444, #DC2626); } .v2-card.info::before { background: linear-gradient(90deg, #3B82F6, #2563EB); } .v2-card .v2-q { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--v2-text-3); margin-bottom: 16px; } .v2-card .v2-headline { font-size: 20px !important; font-weight: 800 !important; line-height: 1.25 !important; color: var(--v2-text) !important; margin-bottom: 12px; letter-spacing: -0.4px; } .v2-card .v2-explain { font-size: 13px; color: var(--v2-text-2); line-height: 1.55; flex: 1; font-weight: 500; } .v2-card .v2-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--v2-border); } .v2-card .v2-foot .v2-link { font-weight: 800; font-size: 12px; color: var(--sec-text, var(--byb-primary)); } .v2-card .v2-foot .v2-link a { color: inherit; text-decoration: none; } .v2-card .v2-foot .v2-link a:hover { text-decoration: underline; } /* ===== V2 Status pill ===== */ .v2-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.2px; } .v2-pill.good { background: var(--v2-success-soft); color: var(--v2-success); } .v2-pill.warn { background: var(--v2-warning-soft); color: var(--v2-warning); } .v2-pill.bad { background: var(--v2-danger-soft); color: var(--v2-danger); } .v2-pill.info { background: var(--v2-info-soft); color: var(--v2-info); } .v2-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ===== V2 Answer cards grid ===== */ .v2-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; margin-top: 20px; } @media (max-width: 960px) { .v2-answers { grid-template-columns: 1fr; } } @media (min-width: 961px) and (max-width: 1200px) { .v2-answers { gap: 14px; } } /* Ensure v2 cards work inside Bootstrap's .container — kill all underlines */ a.v2-card, a.v2-card:hover, a.v2-card:focus, a.v2-card *, a.v2-card:hover *, .v2-card a, .v2-card a:hover, a.v2-crew-card, a.v2-crew-card:hover, a.v2-crew-card:focus, a.v2-assign, a.v2-assign:hover { text-decoration: none !important; color: inherit !important; } a.v2-card { color: var(--v2-text) !important; } a.v2-card .v2-q { color: var(--v2-text-3) !important; } a.v2-card .v2-explain { color: var(--v2-text-2) !important; } a.v2-card .v2-foot .v2-link { color: var(--sec-text, var(--byb-primary)) !important; } a.v2-card .v2-pill { color: inherit; } a.v2-card .v2-pill.good { color: var(--v2-success) !important; } a.v2-card .v2-pill.warn { color: var(--v2-warning) !important; } a.v2-card .v2-pill.info { color: var(--v2-info) !important; } a.v2-crew-card { color: var(--v2-text) !important; } a.v2-crew-card .s { color: var(--v2-text-3) !important; } /* Dark mode: ensure v2 surfaces contrast with Bootstrap dark background */ [data-bs-theme="dark"] .v2-card, [data-bs-theme="dark"] .v2-plan-bar, [data-bs-theme="dark"] .v2-section-card, [data-bs-theme="dark"] .v2-profile-hero, [data-bs-theme="dark"] .v2-crew-card, [data-bs-theme="dark"] .v2-assign, [data-bs-theme="dark"] .v2-quick-link, [data-bs-theme="dark"] .v2-celebrate { background: var(--v2-surface) !important; border-color: var(--v2-border) !important; } [data-bs-theme="dark"] .v2-card .v2-q, [data-bs-theme="dark"] .v2-section-card .card-head h3 { color: var(--v2-text-3) !important; } [data-bs-theme="dark"] .v2-card .v2-headline, [data-bs-theme="dark"] .v2-profile-hero h2, [data-bs-theme="dark"] .v2-plan-bar h5 { color: var(--v2-text) !important; } /* ===== V2 Celebration banner ===== */ .v2-celebrate { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); border: 1px solid #FDE68A; border-radius: var(--v2-r-lg); margin-bottom: 18px; position: relative; overflow: hidden; } [data-bs-theme="dark"] .v2-celebrate { background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(251,191,36,0.20) 100%); border-color: rgba(251,191,36,0.30); } .v2-celebrate .emoji { font-size: 28px; line-height: 1; flex-shrink: 0; } .v2-celebrate .body { flex: 1; min-width: 0; } .v2-celebrate .tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; background: #F59E0B; color: white; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; } .v2-celebrate h4 { font-size: 15px; font-weight: 800; color: #1F1603; margin: 0 0 2px; } [data-bs-theme="dark"] .v2-celebrate h4 { color: var(--v2-text); } .v2-celebrate p { font-size: 13px; color: #59420A; margin: 0; } [data-bs-theme="dark"] .v2-celebrate p { color: var(--v2-text-2); } /* ===== V2 Section divider ===== */ .v2-divider { display: flex; align-items: center; gap: 12px; margin: 32px 0 16px; } .v2-divider .line { flex: 1; height: 1px; background: var(--v2-border); } .v2-divider .label { font-size: 11px; font-weight: 800; color: var(--v2-text-2); text-transform: uppercase; letter-spacing: 0.8px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; } .v2-divider .label i { color: var(--sec-text, var(--byb-primary)); font-size: 13px; } /* ===== V2 Plan bar ===== */ .v2-plan-bar { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-r-lg); padding: 18px 22px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(15,23,42,0.03); font-family: var(--v2-font); } .v2-plan-bar .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .v2-plan-bar .head h5 { font-size: 13px; font-weight: 800; color: var(--v2-text); margin: 0; } .v2-plan-bar .scope-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 999px; } .v2-plan-bar .scope-badge.self { background: var(--sec-self-soft, rgba(65,132,155,0.10)); color: var(--sec-self, #41849b); } .v2-plan-bar .scope-badge.crew { background: var(--sec-crew-soft, rgba(87,29,119,0.10)); color: var(--sec-crew, #571d77); } [data-bs-theme="dark"] .v2-plan-bar .scope-badge.crew { color: #b07de0; } .v2-plan-track { position: relative; height: 30px; background: var(--v2-surface-2); border-radius: 8px; overflow: hidden; border: 1px solid var(--v2-border); } .v2-plan-track .phase { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; white-space: nowrap; padding: 0 8px; } .v2-plan-track .phase.basis { background: linear-gradient(180deg, #3B82F6, #1D4ED8); } .v2-plan-track .phase.opbouw { background: linear-gradient(180deg, #F59E0B, #B45309); } .v2-plan-track .phase.intensiteit{ background: linear-gradient(180deg, #F59E0B, #B45309); } .v2-plan-track .phase.selectie { background: linear-gradient(180deg, #10B981, #047857); } .v2-plan-track .phase.wedstrijd { background: linear-gradient(180deg, #EF4444, #991B1B); } .v2-plan-track .today-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--v2-text); z-index: 2; border-radius: 2px; } .v2-plan-dates { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--v2-text-3); margin-top: 6px; } /* ===== V2 Assignment row (dashboard hybrid) ===== */ .v2-assign { display: grid; grid-template-columns: 8px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 8px; margin-bottom: 6px; text-decoration: none; color: var(--v2-text); transition: border-color 0.15s; } .v2-assign:hover { border-color: var(--sec-text, var(--byb-primary)); color: var(--v2-text); text-decoration: none; } .v2-assign .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .v2-assign.urgent .dot { background: var(--v2-danger); } .v2-assign.warn .dot { background: var(--v2-warning); } .v2-assign.ok .dot { background: var(--v2-success); } .v2-assign .title { font-size: 12px; font-weight: 700; } .v2-assign .sub { font-size: 10px; color: var(--v2-text-3); font-weight: 600; margin-top: 1px; } .v2-assign .scope-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .v2-assign .scope-badge.self { background: var(--sec-self-soft); color: var(--sec-self); } .v2-assign .scope-badge.crew { background: var(--sec-crew-soft); color: var(--sec-crew); } [data-bs-theme="dark"] .v2-assign .scope-badge.crew { color: #b07de0; } .v2-assign .deadline { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--v2-surface-2); color: var(--v2-text-2); white-space: nowrap; } .v2-assign.urgent .deadline { background: var(--v2-danger-soft); color: var(--v2-danger); } .v2-assign.warn .deadline { background: var(--v2-warning-soft); color: var(--v2-warning); } /* ===== V2 Crew card (dashboard) ===== */ .v2-crew-card { display: flex; gap: 16px; align-items: center; padding: 18px 22px; font-family: var(--v2-font); background: var(--v2-surface); border: 1px solid var(--v2-border); border-left: 4px solid var(--sec-crew); border-radius: var(--v2-r-lg); text-decoration: none !important; color: var(--v2-text) !important; transition: all 0.15s; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(15,23,42,0.03); } .v2-crew-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,0.08); border-color: var(--sec-crew); color: var(--v2-text) !important; text-decoration: none !important; } .v2-crew-card .icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--sec-crew), var(--sec-crew-dark)); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .v2-crew-card .body { flex: 1; min-width: 0; } .v2-crew-card .t { font-size: 14px; font-weight: 800; } .v2-crew-card .s { font-size: 11px; color: var(--v2-text-3); font-weight: 600; margin-top: 2px; } .v2-crew-card .arrow { color: var(--v2-text-3); flex-shrink: 0; } /* ===== V2 Role pill (dashboard) ===== */ .v2-role-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--v2-text-2); text-decoration: none !important; transition: all 0.15s; box-shadow: 0 1px 3px rgba(15,23,42,0.04); } .v2-role-pill:hover { border-color: var(--sec-text); color: var(--sec-text) !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.08); } .v2-role-pill i { font-size: 12px; opacity: 0.7; } .v2-role-pill.self { border-left: 4px solid var(--sec-self); } .v2-role-pill.crew { border-left: 4px solid var(--sec-crew); } /* ===== V2 Info note ===== */ .v2-info-note { padding: 10px 14px; background: var(--v2-info-soft); border-left: 3px solid var(--v2-info); border-radius: 0 6px 6px 0; font-size: 12px; color: var(--v2-text-2); line-height: 1.5; } .v2-info-note i { color: var(--v2-info); margin-right: 4px; } .v2-info-note b { color: var(--v2-text); font-weight: 800; } /* ===== V2 Key-value grid (profile) ===== */ .v2-kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 18px; font-size: 13px; } .v2-kv .k { font-size: 11px; font-weight: 800; color: var(--v2-text-3); text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; } .v2-kv .v { color: var(--v2-text); font-weight: 600; } /* ===== V2 Quick link ===== */ .v2-quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-r-md); text-decoration: none; color: var(--v2-text); transition: all 0.15s; margin-bottom: 8px; } .v2-quick-link:hover { border-color: var(--sec-text); background: var(--sec-soft); color: var(--v2-text); text-decoration: none; } .v2-quick-link .icon { width: 36px; height: 36px; border-radius: 8px; background: var(--sec-soft, rgba(8,155,166,0.10)); color: var(--sec-text, var(--byb-primary)); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .v2-quick-link .body { flex: 1; min-width: 0; } .v2-quick-link .t { font-size: 13px; font-weight: 800; } .v2-quick-link .s { font-size: 11px; color: var(--v2-text-3); font-weight: 600; margin-top: 2px; } .v2-quick-link .arrow { color: var(--v2-text-3); } /* ===== V2 Danger zone ===== */ .v2-danger-zone { background: var(--v2-danger-soft); border: 1px solid rgba(239,68,68,0.25); border-radius: var(--v2-r-lg); padding: 18px 22px; } .v2-danger-zone h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v2-danger); margin-bottom: 12px; } /* ===== V2 Report type badge (shared) ===== */ .v2-rt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: white; white-space: nowrap; } .v2-rt-badge i { font-size: 10px; } .v2-rt-badge.steady { background: linear-gradient(135deg, #3d7dd1 0%, #06275b 100%); } .v2-rt-badge.interval { background: linear-gradient(135deg, #e3165e 0%, #980b4f 100%); } .v2-rt-badge.hiit { background: linear-gradient(135deg, #ba178f 0%, #550747 100%); } .v2-rt-badge.ergo { background: linear-gradient(135deg, #0b9d8c 0%, #025043 100%); } .v2-rt-badge.progression { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); } /* ===== V2 Profile hero (profile page) ===== */ .v2-profile-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 26px 30px; font-family: var(--v2-font); background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 16px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(15,23,42,0.06); } @media (max-width: 640px) { .v2-profile-hero { grid-template-columns: 1fr; text-align: center; } } .v2-profile-hero .big-avi { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--byb-primary, #089ba6), var(--byb-primary-dark, #067a82)); color: white; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v2-profile-hero h2 { font-size: 20px; font-weight: 800; margin-bottom: 3px; } .v2-profile-hero .email { font-size: 13px; color: var(--v2-text-3); font-weight: 600; } .v2-profile-hero .story { font-size: 13px; color: var(--v2-text-2); font-weight: 600; margin-top: 8px; line-height: 1.5; } .v2-profile-hero .story b { color: var(--v2-text); } /* ===== V2 Section card (profile + dashboard) ===== */ .v2-section-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-r-lg); padding: 20px 22px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(15,23,42,0.03); font-family: var(--v2-font); } .v2-section-card .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; } .v2-section-card .card-head h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v2-text-3); margin: 0; } .v2-section-card .card-head h3 i { color: var(--sec-text, var(--byb-primary)); margin-right: 6px; } .v2-section-card .edit-btn { font-size: 11px; font-weight: 800; color: var(--sec-text, var(--byb-primary)); text-decoration: none; padding: 5px 10px; border-radius: 6px; background: var(--sec-soft, rgba(8,155,166,0.08)); } .v2-section-card .edit-btn:hover { background: var(--sec-text, var(--byb-primary)); color: white; } /* ===== V2 Service row (profile connected services) ===== */ .v2-service-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v2-border); } .v2-service-row:last-child { border-bottom: none; } .v2-service-row .logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; color: white; } .v2-service-row .logo.rp3 { background: linear-gradient(135deg, #3B82F6, #1D4ED8); } .v2-service-row .logo.c2 { background: linear-gradient(135deg, #EF4444, #B91C1C); } .v2-service-row .logo.strava { background: linear-gradient(135deg, #FC4C02, #9A2F01); } .v2-service-row .body { flex: 1; min-width: 0; } .v2-service-row .name { font-size: 13px; font-weight: 800; } .v2-service-row .status { font-size: 11px; color: var(--v2-text-3); font-weight: 700; margin-top: 2px; } .v2-service-row .status.connected { color: var(--v2-success); }