/* ══════════════════════════════════════════════════════════════ Greenleaves — Material Design 3 × Deep Forest Teal Extracted from 30 Stitch design templates. Design DNA: • Deep teal (#005245) on warm off-white (#faf9f7) • M3 surface container hierarchy (5 grey levels) • Inter Tight 900 headlines, DM Sans body, IBM Plex Mono data • Minimal border-radius (2-8px), teal-tinted soft shadows • Border-left-4 accent cards, hover lift (-2px) • Gradient buttons (primary → primary-container) • Glass panels (backdrop-filter: blur(20px)) • Grayscale photos → color on hover • Uppercase widest-tracking labels • Dense data layout, tight spacing Applied via [data-theme="greenleaves"] on ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ── M3 Tonal Palette ── */ html[data-theme="greenleaves"] { /* Surface containers — warm grey ladder */ --color-bg: #faf9f7; --color-surface: #ffffff; --color-surface-2: #f4f3f1; --color-surface-container: #efeeec; --color-surface-high: #e9e8e6; --color-surface-highest: #e3e2e0; --color-border: #bec9c4; --color-border-subtle: #e3e2e0; --color-border-emphasis: #6f7976; /* Text */ --color-text: #1b1c1b; --color-text-muted: #3f4946; --color-text-light: #6f7976; /* Accent — deep forest teal */ --color-accent: #005245; --color-accent-hover: #1a6b5c; --color-accent-subtle: rgba(0, 82, 69, 0.06); --color-accent-light: rgba(0, 82, 69, 0.12); --color-accent-container: #1a6b5c; --color-accent-on-container: #9ee9d5; /* Status */ --color-green: #005245; --color-green-subtle: rgba(0, 82, 69, 0.08); --color-green-surface: #cbe9df; --color-green-text: #005245; --color-amber: #CA8A04; --color-amber-subtle: rgba(202, 138, 4, 0.07); --color-amber-surface: #FEF9C3; --color-amber-text: #854D0E; --color-red: #ba1a1a; --color-red-subtle: rgba(186, 26, 26, 0.06); --color-red-surface: #ffdad6; --color-red-text: #93000a; --color-blue: #186a5b; --color-blue-surface: #a6f1de; --color-blue-text: #005144; --color-blue-light: #cbe9df; --color-teal: #186a5b; --color-teal-surface: #a6f1de; --color-teal-text: #005245; --color-pink-surface: #ffdbd2; --color-pink-text: #703627; /* Tertiary & Secondary */ --color-tertiary: #713728; --color-secondary: #49645c; /* Fonts */ --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', monospace; /* Type scale — 3-tier */ --t-2xs: 0.65rem; --t-xs: 0.75rem; --t-sm: 0.85rem; --t-base: 0.85rem; --t-md: 1rem; --t-lg: 1.15rem; --t-xl: 1.35rem; --t-2xl: 1.75rem; --t-3xl: 2rem; /* Radii — minimal, architectural */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 12px; --radius-full: 0.75rem; --radius-pill: 99px; /* Shadows — teal-tinted, ultra-soft */ --shadow-sm: 0 1px 3px rgba(0, 82, 69, 0.04); --shadow-md: 0 4px 32px rgba(0, 82, 69, 0.04); --shadow-lg: 0 10px 30px -10px rgba(0, 82, 69, 0.1); --shadow-xl: 0 12px 24px -8px rgba(0, 82, 69, 0.15); /* Easing */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Tracking */ --ls-tight: -0.02em; --ls-wide: 0.06em; --ls-widest: 0.1em; } /* ══════════════════════════════════════════ BODY — DM Sans base ══════════════════════════════════════════ */ [data-theme="greenleaves"] body { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.5; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ══════════════════════════════════════════ TYPOGRAPHY — Inter Tight headlines ══════════════════════════════════════════ */ [data-theme="greenleaves"] h1 { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 900; letter-spacing: var(--ls-tight); color: var(--color-text); line-height: 1.1; } [data-theme="greenleaves"] h2 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; } [data-theme="greenleaves"] h3 { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; } [data-theme="greenleaves"] h4 { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--color-text-light); text-transform: uppercase; letter-spacing: var(--ls-widest); } /* Mono for data values */ [data-theme="greenleaves"] .snapshot-value, [data-theme="greenleaves"] .score-number, [data-theme="greenleaves"] .kpi-value, [data-theme="greenleaves"] td, [data-theme="greenleaves"] input[type="number"], [data-theme="greenleaves"] .pipeline-value, [data-theme="greenleaves"] .dc-value, [data-theme="greenleaves"] .dc-score-chip, [data-theme="greenleaves"] .mc-day, [data-theme="greenleaves"] .admin-stat-value, [data-theme="greenleaves"] .yr-stat-value, [data-theme="greenleaves"] .summary-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════ PAGE LAYOUT ══════════════════════════════════════════ */ [data-theme="greenleaves"] .page { padding: 24px 32px 32px; max-width: 1600px; background: var(--color-bg); } [data-theme="greenleaves"] .page-header { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; } [data-theme="greenleaves"] .page-header h1 { font-family: var(--font-display) !important; font-size: var(--t-2xl) !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: var(--ls-tight) !important; } [data-theme="greenleaves"] .page-subtitle { margin-bottom: 20px; font-size: var(--t-xs); color: var(--color-text-light); } /* ══════════════════════════════════════════ CARDS — M3 elevated surfaces Teal-tinted shadows, glass-like feel ══════════════════════════════════════════ */ [data-theme="greenleaves"] .card { background: var(--color-surface); border: 1px solid rgba(190, 201, 196, 0.1); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 18px; margin-bottom: 10px !important; transition: box-shadow 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart); position: relative; overflow: hidden; } [data-theme="greenleaves"] .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); } /* Card headers — uppercase teal labels with widest tracking */ [data-theme="greenleaves"] .card-header { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); } [data-theme="greenleaves"] .card-header h3 { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; color: var(--color-accent) !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } /* Primary cards */ [data-theme="greenleaves"] .col-main > .card .card-header h3 { color: var(--color-accent) !important; } /* Side column */ [data-theme="greenleaves"] .col-side > .card .card-header h3 { color: var(--color-accent) !important; } /* ══════════════════════════════════════════ BUTTONS — Gradient teal, active scale ══════════════════════════════════════════ */ [data-theme="greenleaves"] .btn { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; padding: 6px 16px; border-radius: var(--radius-lg); letter-spacing: 0.02em; transition: all 150ms var(--ease-out-quart); } [data-theme="greenleaves"] .btn:active { transform: scale(0.98); } [data-theme="greenleaves"] .btn-primary { background: linear-gradient(135deg, #005245 0%, #1a6b5c 100%); color: #fff; border: none; box-shadow: var(--shadow-sm); } [data-theme="greenleaves"] .btn-primary:hover { opacity: 0.9; box-shadow: var(--shadow-lg); transform: translateY(-1px); } [data-theme="greenleaves"] .btn-secondary { background: linear-gradient(135deg, #005245 0%, #1a6b5c 100%); color: #fff; border: none; } [data-theme="greenleaves"] .btn-secondary:hover { opacity: 0.9; box-shadow: var(--shadow-md); } [data-theme="greenleaves"] .btn-ghost { padding: 4px 7px; font-weight: 500; background: transparent; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; } [data-theme="greenleaves"] .btn-ghost:hover { color: var(--color-accent); background: var(--color-accent-subtle); } [data-theme="greenleaves"] .btn-sm { padding: 4px 10px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-widest); } [data-theme="greenleaves"] .btn-danger { border: 1px solid var(--color-red); color: var(--color-red); background: transparent; } [data-theme="greenleaves"] .btn-danger:hover { background: var(--color-red-subtle); } /* ══════════════════════════════════════════ INPUTS — Minimal radius, teal focus ring ══════════════════════════════════════════ */ [data-theme="greenleaves"] input, [data-theme="greenleaves"] textarea { font-family: var(--font-body); font-size: var(--t-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: 8px 12px; background: var(--color-surface); transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart), background 150ms var(--ease-out-quart); } [data-theme="greenleaves"] input:focus, [data-theme="greenleaves"] textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.08); background: var(--color-surface); } [data-theme="greenleaves"] input::placeholder, [data-theme="greenleaves"] textarea::placeholder { color: var(--color-text-light); opacity: 0.5; font-size: 0.85em; } [data-theme="greenleaves"] textarea { resize: vertical; min-height: 72px; } [data-theme="greenleaves"] select { font-family: var(--font-body); font-size: var(--t-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: 8px 28px 8px 12px; appearance: none; -webkit-appearance: none; background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236f7976' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 150ms var(--ease-out-quart); } [data-theme="greenleaves"] select:hover { border-color: var(--color-accent); } [data-theme="greenleaves"] select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.08); } [data-theme="greenleaves"] label { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-text-light); margin-bottom: 4px; } [data-theme="greenleaves"] .form-group { margin-bottom: 12px; } /* ══════════════════════════════════════════ INLINE EDITABLE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .editable { cursor: text; padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all 150ms var(--ease-out-quart); min-height: 1.5em; } [data-theme="greenleaves"] .editable:hover { background: rgba(0, 82, 69, 0.03) !important; } [data-theme="greenleaves"] .editable:focus { border-color: var(--color-accent) !important; background: var(--color-surface) !important; box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.06) !important; } [data-theme="greenleaves"] .editable[data-placeholder]:empty::before { color: var(--color-text-light); opacity: 0.5; font-size: 0.85em; font-style: italic; } /* ══════════════════════════════════════════ BADGES — Minimal radius, wide tracking ══════════════════════════════════════════ */ [data-theme="greenleaves"] .badge { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-sm); padding: 2px 8px; text-transform: uppercase; } [data-theme="greenleaves"] .badge-green { background: var(--color-green-surface); color: var(--color-green-text); } [data-theme="greenleaves"] .badge-amber { background: var(--color-amber-surface); color: var(--color-amber-text); } [data-theme="greenleaves"] .badge-red { background: var(--color-red-surface); color: var(--color-red-text); } [data-theme="greenleaves"] .badge-blue { background: rgba(0, 82, 69, 0.05); color: var(--color-accent); } [data-theme="greenleaves"] .badge-accent { background: rgba(0, 82, 69, 0.05); color: var(--color-accent); } [data-theme="greenleaves"] .badge-muted { background: var(--color-surface-2); color: var(--color-text-light); } /* ══════════════════════════════════════════ SNAPSHOT BAR — Teal accent data strip ══════════════════════════════════════════ */ [data-theme="greenleaves"] .snapshot-bar { padding: 12px 18px; gap: 16px; margin-bottom: 18px; border: 1px solid var(--color-accent); background: var(--color-accent-subtle); border-radius: var(--radius-lg); } [data-theme="greenleaves"] .snapshot-label { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-widest); color: var(--color-accent); text-transform: uppercase; } [data-theme="greenleaves"] .snapshot-value { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; } [data-theme="greenleaves"] #snapValue, [data-theme="greenleaves"] #snapUsers, [data-theme="greenleaves"] #snapForests { font-family: var(--font-mono) !important; font-size: 1.6rem !important; font-weight: 700 !important; } [data-theme="greenleaves"] .snapshot-item:nth-child(1) .snapshot-value { color: var(--color-accent); font-weight: 700; } [data-theme="greenleaves"] .snapshot-item:nth-child(1) .snapshot-label { color: var(--color-accent); } [data-theme="greenleaves"] .snapshot-divider { height: 28px; background: var(--color-border-subtle); opacity: 0.5; } /* ══════════════════════════════════════════ TABLES — Dense, M3 surface hierarchy ══════════════════════════════════════════ */ [data-theme="greenleaves"] th { font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-text-light); border-bottom: 2px solid var(--color-border); padding: 8px 10px; } [data-theme="greenleaves"] td { font-size: var(--t-sm); padding: 8px 10px; border-bottom: 1px solid var(--color-border-subtle); } [data-theme="greenleaves"] tr:hover td { background: rgba(0, 82, 69, 0.02); } [data-theme="greenleaves"] tr:last-child td { border-bottom: none; } /* ══════════════════════════════════════════ SCORE DISPLAY ══════════════════════════════════════════ */ [data-theme="greenleaves"] .score-number { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; letter-spacing: var(--ls-tight); } [data-theme="greenleaves"] .score-number.green { color: var(--color-green); } [data-theme="greenleaves"] .score-number.amber { color: var(--color-amber); } [data-theme="greenleaves"] .score-number.red { color: var(--color-red); } /* ══════════════════════════════════════════ MODALS — Glass-like, M3 elevation ══════════════════════════════════════════ */ [data-theme="greenleaves"] .modal-overlay { background: rgba(27, 28, 27, 0.5); backdrop-filter: blur(4px); } [data-theme="greenleaves"] .modal { border-radius: var(--radius-xl); border: 1px solid rgba(190, 201, 196, 0.15); box-shadow: var(--shadow-xl); padding: 22px 26px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); } [data-theme="greenleaves"] .modal-header h2 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; } [data-theme="greenleaves"] .modal-header { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 14px; margin-bottom: 18px; } [data-theme="greenleaves"] .modal-close { border-radius: var(--radius-md); transition: all 150ms var(--ease-out-quart); } [data-theme="greenleaves"] .modal-close:hover { background: var(--color-accent-subtle); color: var(--color-accent); } [data-theme="greenleaves"] .modal-actions { margin-top: 18px; } @keyframes gl-modal-in { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } [data-theme="greenleaves"] .modal-overlay.active .modal { animation: gl-modal-in 300ms var(--ease-out-expo) both; } /* All modals unified — glass blur */ [data-theme="greenleaves"] .modal, [data-theme="greenleaves"] .ai-modal, [data-theme="greenleaves"] .action-modal, [data-theme="greenleaves"] .sf-modal, [data-theme="greenleaves"] .vault-modal, [data-theme="greenleaves"] .confirm-box { border-radius: var(--radius-xl) !important; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.95); } [data-theme="greenleaves"] .modal-header h2, [data-theme="greenleaves"] .ai-modal h3, [data-theme="greenleaves"] .action-modal h3, [data-theme="greenleaves"] .vault-modal-title { font-family: var(--font-display) !important; font-size: var(--t-lg) !important; font-weight: 800 !important; } /* Modal overlays — all use glass blur */ [data-theme="greenleaves"] .modal-overlay, [data-theme="greenleaves"] .action-modal-overlay, [data-theme="greenleaves"] .ai-modal-overlay, [data-theme="greenleaves"] .vault-modal-overlay, [data-theme="greenleaves"] .confirm-overlay { backdrop-filter: blur(4px) !important; } /* ══════════════════════════════════════════ CONFIRM DIALOG ══════════════════════════════════════════ */ [data-theme="greenleaves"] .confirm-box { border-radius: var(--radius-xl) !important; backdrop-filter: blur(20px) !important; box-shadow: var(--shadow-xl) !important; background: rgba(255, 255, 255, 0.95) !important; } [data-theme="greenleaves"] .confirm-icon.danger { background: var(--color-red-subtle) !important; color: var(--color-red) !important; } [data-theme="greenleaves"] .confirm-icon.warn { background: var(--color-amber-subtle) !important; color: var(--color-amber) !important; } [data-theme="greenleaves"] .confirm-title { font-family: var(--font-display); font-weight: 700; } [data-theme="greenleaves"] .confirm-msg { font-size: var(--t-sm); color: var(--color-text-muted); } /* ══════════════════════════════════════════ TOAST — Teal accent, glass ══════════════════════════════════════════ */ [data-theme="greenleaves"] .toast { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--t-sm); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); } [data-theme="greenleaves"] .toast.success { border-left: 3px solid var(--color-green); } [data-theme="greenleaves"] .toast.error { border-left: 3px solid var(--color-red); } @keyframes gl-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [data-theme="greenleaves"] .toast { animation: gl-toast-in 250ms var(--ease-out-expo) both; } /* ══════════════════════════════════════════ ACCORDION — Rounded-lg ══════════════════════════════════════════ */ [data-theme="greenleaves"] .accordion-item { border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); margin-bottom: 6px; overflow: hidden; background: var(--color-surface); } [data-theme="greenleaves"] .accordion-header { padding: 10px 14px; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; transition: background 100ms var(--ease-out-quart), color 100ms var(--ease-out-quart); } [data-theme="greenleaves"] .accordion-header:hover { background: var(--color-accent-subtle); color: var(--color-accent); } [data-theme="greenleaves"] .accordion-content { transition: max-height 300ms var(--ease-in-out), padding 200ms var(--ease-out-quart); } [data-theme="greenleaves"] .accordion-letter { font-family: var(--font-mono); font-weight: 700; color: var(--color-accent); } /* ══════════════════════════════════════════ SIGNAL PILLS — Round pills ══════════════════════════════════════════ */ [data-theme="greenleaves"] .signal-pill { font-family: var(--font-display); font-size: var(--t-xs); border-radius: var(--radius-pill); padding: 3px 10px; border: 1px solid var(--color-border); transition: border-color 100ms, color 100ms; } [data-theme="greenleaves"] .signal-pill:hover { border-color: var(--color-accent); color: var(--color-accent); } [data-theme="greenleaves"] .signal-pill .signal-label { color: var(--color-text-muted); font-size: var(--t-2xs); font-weight: 500; } /* ══════════════════════════════════════════ MEDDPICC LETTERS — Hover glow ══════════════════════════════════════════ */ [data-theme="greenleaves"] .meddpicc-letter { border-radius: var(--radius-sm); width: 24px; height: 24px; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 700; transition: transform 120ms var(--ease-out-quart), box-shadow 120ms; } [data-theme="greenleaves"] .meddpicc-letter:not(.filled) { opacity: 0.25; background: var(--color-surface-2); } [data-theme="greenleaves"] .meddpicc-letter.filled { background: var(--color-accent-light); color: var(--color-accent); border-color: var(--color-accent); } [data-theme="greenleaves"] .meddpicc-letter:hover { transform: scale(1.15); box-shadow: 0 0 12px rgba(0, 82, 69, 0.25); } /* ══════════════════════════════════════════ LINKS — Teal accent ══════════════════════════════════════════ */ [data-theme="greenleaves"] a { color: var(--color-accent) !important; transition: color 100ms; } [data-theme="greenleaves"] a:hover { color: var(--color-accent-hover) !important; } /* ══════════════════════════════════════════ FOCUS — Teal ring (suppressed per design) ══════════════════════════════════════════ */ [data-theme="greenleaves"] :focus-visible { outline: none; } [data-theme="greenleaves"] input:focus-visible, [data-theme="greenleaves"] textarea:focus-visible, [data-theme="greenleaves"] select:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.08); } [data-theme="greenleaves"] *:focus { outline: none !important; } /* ══════════════════════════════════════════ SCROLLBAR — Thin, teal hover ══════════════════════════════════════════ */ [data-theme="greenleaves"] ::-webkit-scrollbar { width: 5px; height: 5px; } [data-theme="greenleaves"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="greenleaves"] ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; } [data-theme="greenleaves"] ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } /* ══════════════════════════════════════════ CHECKBOX — Round, teal accent ══════════════════════════════════════════ */ [data-theme="greenleaves"] input[type="checkbox"]:checked::before { background: var(--color-accent) !important; border-color: var(--color-accent) !important; } [data-theme="greenleaves"] input[type="checkbox"]:hover::before { border-color: var(--color-accent) !important; } [data-theme="greenleaves"] .checkbox { accent-color: var(--color-accent); } [data-theme="greenleaves"] .checkbox:hover { border-color: var(--color-accent); } [data-theme="greenleaves"] .checkbox:checked { background: var(--color-accent); border-color: var(--color-accent); } /* ══════════════════════════════════════════ LOADING SPINNER — Teal + blur ══════════════════════════════════════════ */ [data-theme="greenleaves"] .spinner { border-top-color: var(--color-accent); } [data-theme="greenleaves"] .loading-overlay { background: rgba(250, 249, 247, 0.85); backdrop-filter: blur(8px); border-radius: var(--radius-lg); } /* ══════════════════════════════════════════ DISTILL — Hover states, entry items ══════════════════════════════════════════ */ /* Remove heavy separators */ [data-theme="greenleaves"] .section-line { display: none; } [data-theme="greenleaves"] .dc-sep { display: none; } [data-theme="greenleaves"] .entry-item { transition: background 100ms, transform 100ms; border-radius: var(--radius-md); border-bottom: none !important; } [data-theme="greenleaves"] .entry-item:hover { background: var(--color-accent-subtle); transform: translateX(2px); } [data-theme="greenleaves"] .contact-card { transition: background 100ms, transform 100ms; border-bottom: none !important; } [data-theme="greenleaves"] .contact-card:hover { background: var(--color-accent-subtle); transform: translateX(2px); } [data-theme="greenleaves"] .milestone-row { transition: background 100ms; border-bottom: none !important; } [data-theme="greenleaves"] .milestone-row:hover { background: var(--color-accent-subtle); } /* Composer footer — progressive disclosure */ [data-theme="greenleaves"] .composer-footer { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 200ms, max-height 200ms; } [data-theme="greenleaves"] .composer:focus-within .composer-footer { opacity: 1; max-height: 40px; } /* Add-row — progressive disclosure */ [data-theme="greenleaves"] .ai-add-row { opacity: 0; max-height: 0; padding: 0 16px !important; overflow: hidden; transition: all 200ms var(--ease-out-quart); } [data-theme="greenleaves"] .ai-group:hover .ai-add-row, [data-theme="greenleaves"] .ai-add-row:focus-within { opacity: 1; max-height: 50px; padding: 6px 16px !important; } /* ══════════════════════════════════════════ KPI CARDS — Border-left-4 accent, hover lift ══════════════════════════════════════════ */ [data-theme="greenleaves"] .kpi-row { border: 1px solid var(--color-accent) !important; background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .kpi-card { padding: 14px 18px !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; transition: none !important; } [data-theme="greenleaves"] .kpi-card + .kpi-card { border-left: 1px solid rgba(138, 213, 194, 0.3) !important; } [data-theme="greenleaves"] .kpi-card:hover { transform: none !important; box-shadow: none !important; } [data-theme="greenleaves"] .kpi-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; color: var(--color-accent) !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; } [data-theme="greenleaves"] .kpi-value { font-family: var(--font-display) !important; font-size: var(--t-3xl) !important; font-weight: 900 !important; letter-spacing: var(--ls-tight) !important; color: var(--color-text) !important; } /* ══════════════════════════════════════════ DEAL CARDS — Hover lift + teal border ══════════════════════════════════════════ */ [data-theme="greenleaves"] .deal-card { border-radius: var(--radius-lg) !important; border: 1px solid rgba(190, 201, 196, 0.1) !important; box-shadow: var(--shadow-sm) !important; padding: 14px 18px !important; transition: all 200ms var(--ease-out-quart) !important; } [data-theme="greenleaves"] .deal-card:hover { border-color: var(--color-accent) !important; box-shadow: var(--shadow-lg) !important; transform: translateY(-2px) !important; } [data-theme="greenleaves"] .dc-name { font-family: var(--font-body) !important; font-size: 0.95rem !important; font-weight: 700 !important; } [data-theme="greenleaves"] .dc-value { font-family: var(--font-mono) !important; font-size: var(--t-base) !important; font-weight: 700 !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .dc-meta-item { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .dc-score-chip { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .dc-actions-chip { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .dc-product-pill { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .dc-next-step { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .dc-footer { font-size: var(--t-sm) !important; } /* ══════════════════════════════════════════ STAGE / BADGE OVERRIDES ══════════════════════════════════════════ */ [data-theme="greenleaves"] .stage-badge, [data-theme="greenleaves"] .forecast-badge, [data-theme="greenleaves"] .mc-type-badge, [data-theme="greenleaves"] .mc-ai-badge, [data-theme="greenleaves"] .tier-badge, [data-theme="greenleaves"] .tp-status-badge, [data-theme="greenleaves"] .cc-tag, [data-theme="greenleaves"] .org-node-tag, [data-theme="greenleaves"] .pc-model-badge, [data-theme="greenleaves"] .pc-cat-badge, [data-theme="greenleaves"] .q-status, [data-theme="greenleaves"] .status-badge, [data-theme="greenleaves"] .tc-label-badge, [data-theme="greenleaves"] .tc-priority-badge, [data-theme="greenleaves"] .tc-page-badge { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: var(--radius-sm) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } /* ══════════════════════════════════════════ SECTION LABELS & HEADERS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .section-label { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; color: var(--color-accent) !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; } [data-theme="greenleaves"] .section-header h3, [data-theme="greenleaves"] .section-header .section-label { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; color: var(--color-accent) !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; } /* ══════════════════════════════════════════ UPCOMING BAR ══════════════════════════════════════════ */ [data-theme="greenleaves"] .upcoming-bar { border-color: transparent !important; border-radius: var(--radius-lg) !important; padding: 8px 16px !important; box-shadow: var(--shadow-sm) !important; background: var(--color-surface) !important; } [data-theme="greenleaves"] .upcoming-label { font-size: var(--t-2xs) !important; } [data-theme="greenleaves"] .uc-day { font-size: var(--t-base) !important; font-weight: 700; } [data-theme="greenleaves"] .uc-mon { font-size: var(--t-2xs) !important; } [data-theme="greenleaves"] .uc-name { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .uc-countdown { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .uc-date { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .upcoming-chip { font-size: var(--t-2xs) !important; border-radius: var(--radius-pill) !important; } /* ══════════════════════════════════════════ ACTION ITEMS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .ai-title { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .ai-desc { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .ai-priority { font-size: var(--t-xs) !important; font-weight: 700; } [data-theme="greenleaves"] .ai-due { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .ai-btn { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .ai-sub-title { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .ai-sub-del { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .ai-group-label { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .ai-flat-heading { font-size: var(--t-xs) !important; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-widest); } [data-theme="greenleaves"] .ai-flat-title { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .action-item { border-radius: var(--radius-md); transition: background 100ms; } [data-theme="greenleaves"] .action-item:hover { background: var(--color-accent-subtle); } [data-theme="greenleaves"] .actions-section { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; } /* ══════════════════════════════════════════ CONTACTS — Grayscale photos ══════════════════════════════════════════ */ [data-theme="greenleaves"] .contact-name, [data-theme="greenleaves"] .contact-info .name, [data-theme="greenleaves"] .cc-name { font-size: var(--t-sm) !important; font-weight: 600 !important; } [data-theme="greenleaves"] .contact-title-text, [data-theme="greenleaves"] .contact-info .title-text, [data-theme="greenleaves"] .cc-title { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } /* Grayscale photos → color on hover (Stitch pattern) */ [data-theme="greenleaves"] .contact-photo, [data-theme="greenleaves"] .team-photo, [data-theme="greenleaves"] .team-avatar { filter: grayscale(100%); transition: filter 300ms var(--ease-out-quart); border-radius: var(--radius-md); } [data-theme="greenleaves"] .contact-card:hover .contact-photo, [data-theme="greenleaves"] .team-card:hover .team-photo, [data-theme="greenleaves"] .team-card:hover .team-avatar, [data-theme="greenleaves"] .contact-photo:hover, [data-theme="greenleaves"] .team-photo:hover, [data-theme="greenleaves"] .team-avatar:hover { filter: grayscale(0%); } /* ══════════════════════════════════════════ MEETINGS — Hover lift ══════════════════════════════════════════ */ [data-theme="greenleaves"] .mc-title { font-size: var(--t-sm) !important; font-weight: 700; } [data-theme="greenleaves"] .mc-sub { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .mc-day { font-size: var(--t-md) !important; font-weight: 700; } [data-theme="greenleaves"] .mc-month { font-size: var(--t-2xs) !important; } [data-theme="greenleaves"] .meeting-card { border-radius: var(--radius-lg) !important; transition: border-color 150ms, box-shadow 150ms, transform 150ms; } [data-theme="greenleaves"] .meeting-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } [data-theme="greenleaves"] .meeting-card.expanded { border-color: var(--color-accent) !important; box-shadow: var(--shadow-lg) !important; } /* ══════════════════════════════════════════ TABS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .view-tab, [data-theme="greenleaves"] .tp-subnav-btn { font-size: var(--t-sm) !important; font-weight: 600 !important; border-radius: var(--radius-md) !important; transition: all 100ms; } [data-theme="greenleaves"] .view-tab.active, [data-theme="greenleaves"] .tp-subnav-btn.active { color: var(--color-accent) !important; font-weight: 700 !important; background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .view-tab:hover:not(.active), [data-theme="greenleaves"] .tp-subnav-btn:hover:not(.active) { background: var(--color-surface-2) !important; color: var(--color-accent) !important; } /* Admin tabs */ [data-theme="greenleaves"] .admin-tab { font-family: var(--font-display) !important; font-size: var(--t-sm) !important; font-weight: 700 !important; border-radius: var(--radius-md) !important; transition: all 100ms; } [data-theme="greenleaves"] .admin-tab.active { color: var(--color-accent) !important; background: var(--color-accent-subtle) !important; } /* ══════════════════════════════════════════ SUB-TABS (Deal Room) ══════════════════════════════════════════ */ [data-theme="greenleaves"] .sub-tab { font-family: var(--font-display) !important; font-size: var(--t-sm) !important; font-weight: 600 !important; border-radius: var(--radius-md) !important; padding: 8px 16px !important; transition: all 100ms !important; } [data-theme="greenleaves"] .sub-tab.active { background: var(--color-surface-2) !important; color: var(--color-accent) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .sub-tab:hover:not(.active) { background: var(--color-surface-2) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .tab-count { font-family: var(--font-mono); font-size: var(--t-2xs); } /* ══════════════════════════════════════════ PRODUCT / RESULT / Q CARDS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .product-card, [data-theme="greenleaves"] .summary-card, [data-theme="greenleaves"] .result-card, [data-theme="greenleaves"] .q-card { border-radius: var(--radius-lg) !important; padding: 14px 18px !important; transition: box-shadow 200ms, transform 200ms, border-color 200ms; } [data-theme="greenleaves"] .product-card:hover, [data-theme="greenleaves"] .q-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } [data-theme="greenleaves"] .product-card.selected { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.08) !important; } /* ══════════════════════════════════════════ SWOT CARDS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .swot-card { border-radius: var(--radius-lg) !important; padding: 14px 18px !important; } [data-theme="greenleaves"] .swot-card.strengths { background: var(--color-green-subtle) !important; border-color: rgba(0, 82, 69, 0.15) !important; } [data-theme="greenleaves"] .swot-card.weaknesses { background: var(--color-red-subtle) !important; border-color: rgba(186, 26, 26, 0.15) !important; } [data-theme="greenleaves"] .swot-card.opportunities { background: var(--color-accent-subtle) !important; border-color: rgba(0, 82, 69, 0.1) !important; } [data-theme="greenleaves"] .swot-card.threats { background: var(--color-amber-subtle) !important; border-color: rgba(202, 138, 4, 0.15) !important; } [data-theme="greenleaves"] .swot-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } /* ══════════════════════════════════════════ CHIPS — Round pills (99px radius) ══════════════════════════════════════════ */ [data-theme="greenleaves"] .chip { border-radius: var(--radius-pill) !important; font-size: var(--t-xs) !important; transition: all 100ms; } [data-theme="greenleaves"] .chip.selected { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; } [data-theme="greenleaves"] .chip:hover:not(.selected) { border-color: var(--color-accent); color: var(--color-accent); } [data-theme="greenleaves"] .poi-chip { border-radius: var(--radius-pill) !important; } /* ══════════════════════════════════════════ RICH CONTENT ══════════════════════════════════════════ */ [data-theme="greenleaves"] .rich-content .rc-bullet::before { color: var(--color-accent); } [data-theme="greenleaves"] .rich-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; } [data-theme="greenleaves"] .rich-toolbar button:hover { background: var(--color-accent-subtle); color: var(--color-accent); } /* ══════════════════════════════════════════ TWO-COL, EMPTY STATE, MISC ══════════════════════════════════════════ */ [data-theme="greenleaves"] .two-col { gap: 14px; } [data-theme="greenleaves"] .empty-state { padding: 32px 14px; } [data-theme="greenleaves"] .empty-state h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); } [data-theme="greenleaves"] .empty-state p { font-size: var(--t-sm); color: var(--color-text-muted); } [data-theme="greenleaves"] .sf-link-row { border-top: none !important; } [data-theme="greenleaves"] .copy-btn { font-family: var(--font-mono); font-size: var(--t-xs) !important; border-radius: var(--radius-md) !important; } /* ══════════════════════════════════════════ GHOST ACTION BUTTONS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .ai-btn, [data-theme="greenleaves"] .action-edit-btn, [data-theme="greenleaves"] .action-del, [data-theme="greenleaves"] .mc-header-actions button, [data-theme="greenleaves"] .milestone-actions button, [data-theme="greenleaves"] .todo-action-btn { font-size: var(--t-xs) !important; padding: 3px 8px !important; border-radius: var(--radius-md) !important; transition: all 120ms !important; } [data-theme="greenleaves"] .ai-btn:hover, [data-theme="greenleaves"] .action-edit-btn:hover, [data-theme="greenleaves"] .todo-action-btn:hover { background: var(--color-accent-subtle) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .action-del:hover { background: var(--color-red-subtle) !important; color: var(--color-red) !important; } /* ══════════════════════════════════════════ REMINDERS PANEL — Glass ══════════════════════════════════════════ */ [data-theme="greenleaves"] .reminders-panel { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(20px) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-xl) !important; } [data-theme="greenleaves"] .reminders-header { background: var(--color-accent-subtle) !important; } /* ══════════════════════════════════════════ VAULT ══════════════════════════════════════════ */ [data-theme="greenleaves"] .vault-group { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .vault-header-row { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .vault-drop { border-radius: var(--radius-lg) !important; border: 2px dashed var(--color-border) !important; transition: all 200ms; } [data-theme="greenleaves"] .vault-drop:hover { border-color: var(--color-accent) !important; background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .vault-scope-btn { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; border-radius: var(--radius-md) !important; } [data-theme="greenleaves"] .vault-scope-btn.active { color: var(--color-accent) !important; background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .vault-fname-link { color: var(--color-accent) !important; } /* ══════════════════════════════════════════ SUMMARY — Editable areas & pointers ══════════════════════════════════════════ */ [data-theme="greenleaves"] .composer { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .composer textarea { border-radius: var(--radius-md) !important; } [data-theme="greenleaves"] .milestone-title { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .milestone-date { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .compact-item { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .editable-area { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .sf-label { font-size: var(--t-sm) !important; } [data-theme="greenleaves"] .poi-name { font-size: var(--t-sm) !important; font-weight: 600; } [data-theme="greenleaves"] .poi-price { font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .summary-bar { border-radius: var(--radius-lg) !important; background: var(--color-accent-subtle) !important; border: 1px solid var(--color-accent) !important; } [data-theme="greenleaves"] .summary-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .summary-value { font-family: var(--font-mono) !important; } /* ══════════════════════════════════════════ TERRITORY ══════════════════════════════════════════ */ [data-theme="greenleaves"] .tp-card { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .tp-subnav { gap: 4px; } [data-theme="greenleaves"] .tp-subnav-btn { border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; } [data-theme="greenleaves"] .tp-subnav-btn.active { color: var(--color-accent) !important; background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .tp-header-bar { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .tp-updated { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .tp-empty { font-size: var(--t-sm) !important; } /* Territory selects */ [data-theme="greenleaves"] .tp-year-select, [data-theme="greenleaves"] #statusSelect { border-radius: var(--radius-md) !important; padding-right: 28px !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236f7976' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-color: var(--color-surface) !important; } /* ══════════════════════════════════════════ DISCOVERY / MEDDPICC PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .discovery-card { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .discovery-section { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .ai-fill-btn { background: linear-gradient(135deg, #005245 0%, #1a6b5c 100%) !important; color: #fff !important; border: none !important; border-radius: var(--radius-md) !important; font-size: var(--t-xs) !important; } [data-theme="greenleaves"] .ai-fill-btn:hover { opacity: 0.9 !important; } /* ══════════════════════════════════════════ PRICING CALCULATOR ══════════════════════════════════════════ */ [data-theme="greenleaves"] .pc-family-header { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; } [data-theme="greenleaves"] .product-card { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .pc-model-badge, [data-theme="greenleaves"] .pc-cat-badge { border-radius: var(--radius-sm) !important; } /* ══════════════════════════════════════════ INLINE SELECT ══════════════════════════════════════════ */ [data-theme="greenleaves"] .inline-select { font-size: var(--t-sm); border-radius: var(--radius-md); } /* ══════════════════════════════════════════ TEAM PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .team-card { border-radius: var(--radius-lg) !important; transition: box-shadow 200ms, transform 200ms; } [data-theme="greenleaves"] .team-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } [data-theme="greenleaves"] .team-card-name { font-size: var(--t-sm) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .team-card-role, [data-theme="greenleaves"] .team-card-title { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .team-form-card { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .team-form-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } /* ══════════════════════════════════════════ WIKI / KILL BOOK ══════════════════════════════════════════ */ [data-theme="greenleaves"] .wiki-card { border-radius: var(--radius-lg) !important; transition: box-shadow 200ms, transform 200ms; } [data-theme="greenleaves"] .wiki-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } [data-theme="greenleaves"] .wiki-card-term { font-family: var(--font-display) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .wiki-card-meta { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } /* ══════════════════════════════════════════ PITCH BUDDY / PRODUCT PITCHES ══════════════════════════════════════════ */ [data-theme="greenleaves"] .toolbox { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .toolbox-btn { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; border-radius: var(--radius-md) !important; } [data-theme="greenleaves"] .toolbox-btn:hover { background: var(--color-accent-subtle) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .toolbox-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } [data-theme="greenleaves"] .toolbox-section { border-radius: var(--radius-md) !important; } /* ══════════════════════════════════════════ PROPOSAL BUILDER ══════════════════════════════════════════ */ [data-theme="greenleaves"] .proposal-block { border-radius: var(--radius-lg) !important; transition: box-shadow 200ms, transform 200ms, border-color 200ms; } [data-theme="greenleaves"] .proposal-block:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ══════════════════════════════════════════ SFDC UPDATE PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .sf-modal { border-radius: var(--radius-xl) !important; backdrop-filter: blur(20px) !important; } /* ══════════════════════════════════════════ TICKET / TODO ══════════════════════════════════════════ */ [data-theme="greenleaves"] .ticket-card { border-radius: var(--radius-lg) !important; transition: box-shadow 200ms, transform 200ms; } [data-theme="greenleaves"] .ticket-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } [data-theme="greenleaves"] .tc-title { font-size: var(--t-sm) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .tc-desc { font-size: var(--t-xs) !important; color: var(--color-text-muted) !important; } [data-theme="greenleaves"] .tc-meta-item { font-size: var(--t-2xs) !important; } /* ══════════════════════════════════════════ ORG CHART (STAKEHOLDER) ══════════════════════════════════════════ */ [data-theme="greenleaves"] .org-node-tag { font-size: var(--t-2xs) !important; border-radius: var(--radius-sm) !important; } /* ══════════════════════════════════════════ ADMIN PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .admin-stats { gap: 12px; } [data-theme="greenleaves"] .admin-stat { border-radius: var(--radius-lg) !important; border-left: 4px solid var(--color-accent) !important; } [data-theme="greenleaves"] .admin-stat-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .admin-stat-value { font-family: var(--font-mono) !important; font-size: var(--t-lg) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .user-table { border-radius: var(--radius-lg) !important; } /* ══════════════════════════════════════════ PROGRESS BAR — Teal gradient ══════════════════════════════════════════ */ [data-theme="greenleaves"] .act-pct, [data-theme="greenleaves"] .vault-progress-bar { background: linear-gradient(90deg, #005245 0%, #1a6b5c 50%, #9ee9d5 100%) !important; border-radius: var(--radius-pill) !important; } [data-theme="greenleaves"] .vault-progress-bar-wrap { border-radius: var(--radius-pill) !important; background: var(--color-surface-2) !important; } /* ══════════════════════════════════════════ FOLLOW-UPS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .followup-card { border-radius: var(--radius-lg) !important; transition: box-shadow 200ms, transform 200ms; } [data-theme="greenleaves"] .followup-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } /* ══════════════════════════════════════════ ACTIVITY LOG ══════════════════════════════════════════ */ [data-theme="greenleaves"] .activity-sidebar { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .activity-item { transition: background 100ms; border-radius: var(--radius-md); } [data-theme="greenleaves"] .activity-item:hover { background: var(--color-accent-subtle); } [data-theme="greenleaves"] .activity-type-dot { border-radius: 50%; } [data-theme="greenleaves"] .activity-meta { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .activity-note { font-size: var(--t-sm) !important; } /* ══════════════════════════════════════════ YEAR REVIEW / STATS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .yr-stat { border-radius: var(--radius-lg) !important; border-left: 4px solid var(--color-accent) !important; } [data-theme="greenleaves"] .yr-stat-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .yr-stat-value { font-family: var(--font-mono) !important; font-size: var(--t-lg) !important; font-weight: 700 !important; } /* ══════════════════════════════════════════ TIMELINE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .timeline-q-dot { background: var(--color-accent) !important; } [data-theme="greenleaves"] .timeline-line { background: var(--color-border-subtle) !important; } [data-theme="greenleaves"] .timeline-q-label { font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } /* ══════════════════════════════════════════════════════════════ SHELL — Warm M3 Surface Topbar NOT dark like Northbound — light warm gray ══════════════════════════════════════════════════════════════ */ /* Top bar — M3 surface-container-highest (#e3e2e0) */ [data-theme="greenleaves"] .topbar { background: #e3e2e0 !important; border-bottom: none !important; } [data-theme="greenleaves"] .topbar-brand { padding: 6px 32px !important; max-width: none !important; width: 100% !important; margin: 0 !important; } /* App name — bold teal, Inter Tight 900 */ [data-theme="greenleaves"] .app-name { font-family: var(--font-display) !important; font-size: 1.1rem !important; font-weight: 900 !important; letter-spacing: -0.03em !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .brand-sep { background: var(--color-border) !important; } /* Deal dropdown — warm glass */ [data-theme="greenleaves"] .deal-dropdown-trigger { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(190, 201, 196, 0.2) !important; color: var(--color-text) !important; border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; font-size: var(--t-sm) !important; font-weight: 700 !important; transition: all 150ms !important; } [data-theme="greenleaves"] .deal-dropdown-trigger:hover { background: rgba(255, 255, 255, 0.8) !important; } [data-theme="greenleaves"] .deal-dropdown-trigger.open { border-color: var(--color-accent) !important; background: var(--color-surface) !important; } [data-theme="greenleaves"] .deal-dropdown-menu { background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; backdrop-filter: blur(20px) !important; } [data-theme="greenleaves"] .deal-dropdown-item { font-family: var(--font-body) !important; transition: all 100ms !important; } [data-theme="greenleaves"] .deal-dropdown-item:hover { background: var(--color-accent-subtle) !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .deal-dropdown-item.active { color: var(--color-accent) !important; font-weight: 700 !important; } [data-theme="greenleaves"] .deal-dropdown-group { color: var(--color-text-light) !important; font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } [data-theme="greenleaves"] .deal-dropdown-divider { background: var(--color-border-subtle) !important; } /* Deal button */ [data-theme="greenleaves"] .deal-btn { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(190, 201, 196, 0.2) !important; border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; color: var(--color-text-light) !important; transition: all 150ms !important; } [data-theme="greenleaves"] .deal-btn:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; } /* Global search — surface-2 input */ [data-theme="greenleaves"] .global-search input { background: var(--color-surface-2) !important; border-color: transparent !important; border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; transition: all 200ms !important; } [data-theme="greenleaves"] .global-search input:focus { border-color: var(--color-accent) !important; background: var(--color-surface) !important; box-shadow: 0 0 0 3px rgba(0, 82, 69, 0.08) !important; } [data-theme="greenleaves"] .global-search input::placeholder { color: var(--color-text-light) !important; opacity: 0.5; } [data-theme="greenleaves"] .global-search-results { background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; backdrop-filter: blur(20px) !important; } [data-theme="greenleaves"] .search-result-item:hover, [data-theme="greenleaves"] .search-result-item.highlighted { background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .search-result-item .sr-title { color: var(--color-text) !important; } [data-theme="greenleaves"] .search-result-item .sr-context { color: var(--color-text-light) !important; } [data-theme="greenleaves"] .search-result-group { color: var(--color-text-light) !important; font-family: var(--font-display) !important; font-size: var(--t-2xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--ls-widest) !important; } [data-theme="greenleaves"] .search-no-results { color: var(--color-text-light) !important; } /* Font buttons */ [data-theme="greenleaves"] .font-btn { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(190, 201, 196, 0.2) !important; border-radius: var(--radius-md) !important; font-family: var(--font-mono) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .font-btn:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; } [data-theme="greenleaves"] .text-scale-control { border: none !important; } [data-theme="greenleaves"] .text-scale-btn { border-radius: var(--radius-md) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .text-scale-btn.active { background: #8ad5c2 !important; color: #005245 !important; } /* Design badge */ [data-theme="greenleaves"] .design-badge { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(190, 201, 196, 0.2) !important; border-radius: var(--radius-md) !important; font-family: var(--font-mono) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .design-badge:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; } /* Version label */ [data-theme="greenleaves"] .version { color: var(--color-text-light) !important; font-family: var(--font-mono) !important; font-size: var(--t-2xs) !important; } /* Logout */ [data-theme="greenleaves"] .logout-link { color: var(--color-text-light) !important; font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; } [data-theme="greenleaves"] .logout-link:hover { color: var(--color-red) !important; } /* ══════════════════════════════════════════ NAVIGATION BAR — M3 surface-container-low ══════════════════════════════════════════ */ [data-theme="greenleaves"] .topbar-nav { background: #e9e8e6 !important; border-top-color: rgba(190, 201, 196, 0.1) !important; box-shadow: 0 1px 4px rgba(0, 82, 69, 0.03) !important; padding-left: 32px !important; padding-right: 32px !important; max-width: none !important; width: 100% !important; } /* Nav triggers — Inter Tight, uppercase, bold */ [data-theme="greenleaves"] .nav-menu-trigger { font-family: var(--font-display) !important; font-size: var(--t-sm) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; color: #5c5e5c !important; padding: 10px 14px !important; transition: all 150ms !important; border-bottom: 2px solid transparent !important; } [data-theme="greenleaves"] .nav-menu-trigger:hover { color: var(--color-accent) !important; background: rgba(0, 82, 69, 0.03) !important; } [data-theme="greenleaves"] .nav-menu-trigger.has-active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; } [data-theme="greenleaves"] .nav-menu-trigger.open { color: var(--color-accent) !important; background: var(--color-surface) !important; } /* Nav dropdown */ [data-theme="greenleaves"] .nav-menu-dropdown { background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; backdrop-filter: blur(20px) !important; } /* Nav tabs */ [data-theme="greenleaves"] .nav-tab { font-family: var(--font-body) !important; font-size: var(--t-sm) !important; color: var(--color-text-light) !important; transition: all 100ms !important; } [data-theme="greenleaves"] .nav-tab:hover { color: var(--color-accent) !important; background: var(--color-accent-subtle) !important; } [data-theme="greenleaves"] .nav-tab.active { color: var(--color-accent) !important; font-weight: 700 !important; } /* Direct nav tabs — teal underline active */ [data-theme="greenleaves"] .nav-tab-direct { font-family: var(--font-display) !important; font-size: var(--t-sm) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; color: #5c5e5c !important; border-bottom: 2px solid transparent !important; transition: all 150ms !important; } [data-theme="greenleaves"] .nav-tab-direct:hover { color: var(--color-accent) !important; } [data-theme="greenleaves"] .nav-tab-direct.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; } /* Deal name in nav */ [data-theme="greenleaves"] .deal-name-nav { color: var(--color-accent) !important; font-family: var(--font-display) !important; font-weight: 700 !important; } /* Nav separators — teal at low opacity */ [data-theme="greenleaves"] .nav-separator { background: var(--color-accent) !important; opacity: 0.2 !important; } /* ══════════════════════════════════════════ LADYBIRD FAB ══════════════════════════════════════════ */ [data-theme="greenleaves"] .ladybird-fab { border-radius: 50% !important; box-shadow: var(--shadow-xl) !important; } [data-theme="greenleaves"] .ladybird-fab:hover { box-shadow: var(--shadow-lg) !important; } [data-theme="greenleaves"] .bug-type-btn { border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; } /* Main content */ [data-theme="greenleaves"] .main-content { background: var(--color-bg) !important; } /* ══════════════════════════════════════════ DASHBOARD — Extra overrides ══════════════════════════════════════════ */ [data-theme="greenleaves"] .deals-grid { gap: 20px !important; } [data-theme="greenleaves"] .empty-dashboard h3 { font-family: var(--font-display) !important; font-weight: 700 !important; } /* ══════════════════════════════════════════ CHANGELOG — Readable, accent-tinted ══════════════════════════════════════════ */ [data-theme="greenleaves"] .cl-feed { max-width: 900px; } [data-theme="greenleaves"] .cl-version { font-family: var(--font-mono) !important; font-size: var(--t-sm) !important; font-weight: 700 !important; color: var(--color-accent) !important; } [data-theme="greenleaves"] .cl-date { font-family: var(--font-mono) !important; font-size: var(--t-xs) !important; color: var(--color-text-muted) !important; } [data-theme="greenleaves"] .cl-title { font-family: var(--font-display) !important; font-size: var(--t-xl) !important; font-weight: 800 !important; color: var(--color-text) !important; margin-bottom: 14px !important; letter-spacing: var(--ls-tight) !important; } [data-theme="greenleaves"] .cl-group { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; letter-spacing: var(--ls-widest) !important; text-transform: uppercase !important; color: var(--color-text) !important; margin-top: 16px !important; margin-bottom: 6px !important; padding-bottom: 4px !important; border-bottom: 1px solid var(--color-border) !important; } [data-theme="greenleaves"] .cl-label { font-family: var(--font-display) !important; font-size: var(--t-xs) !important; font-weight: 700 !important; color: var(--color-accent) !important; margin-top: 12px !important; margin-bottom: 4px !important; } [data-theme="greenleaves"] .cl-bullet { font-family: var(--font-body) !important; font-size: var(--t-sm) !important; color: var(--color-text) !important; line-height: 1.55 !important; padding: 2px 0 !important; } [data-theme="greenleaves"] .cl-bullet::before { color: var(--color-accent) !important; } [data-theme="greenleaves"] .cl-dot { background: var(--color-accent) !important; box-shadow: 0 0 0 2px var(--color-accent) !important; } [data-theme="greenleaves"] .cl-body { padding: 16px 0 32px 24px !important; } [data-theme="greenleaves"] .cl-entry { border-left-color: var(--color-border-subtle) !important; } [data-theme="greenleaves"] .version-item { border-radius: var(--radius-lg) !important; } [data-theme="greenleaves"] .version-dot { background: var(--color-accent) !important; } [data-theme="greenleaves"] .version-date { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } [data-theme="greenleaves"] .version-note { font-size: var(--t-sm) !important; } /* ══════════════════════════════════════════ FORECASTING ══════════════════════════════════════════ */ [data-theme="greenleaves"] .forecast-badge { border-radius: var(--radius-sm) !important; } /* ══════════════════════════════════════════ EMAIL FOLLOW-UPS ══════════════════════════════════════════ */ [data-theme="greenleaves"] .followup-card, [data-theme="greenleaves"] .email-card { border-radius: var(--radius-lg) !important; } /* ══════════════════════════════════════════ IMPLEMENTATION PLAN ══════════════════════════════════════════ */ [data-theme="greenleaves"] .step-num { font-family: var(--font-mono) !important; font-weight: 700 !important; color: var(--color-accent) !important; } /* ══════════════════════════════════════════ RESEARCH / INTELLIGENCE PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .research-card { border-radius: var(--radius-lg) !important; } /* ══════════════════════════════════════════ SYSTEM INFO / DEVELOPER ══════════════════════════════════════════ */ [data-theme="greenleaves"] .stat { border-radius: var(--radius-lg) !important; } /* ══════════════════════════════════════════ LOGIN PAGE ══════════════════════════════════════════ */ [data-theme="greenleaves"] .login-card { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-xl) !important; backdrop-filter: blur(20px) !important; } [data-theme="greenleaves"] .login-btn { background: linear-gradient(135deg, #005245 0%, #1a6b5c 100%) !important; color: #fff !important; border: none !important; border-radius: var(--radius-lg) !important; font-family: var(--font-display) !important; font-weight: 700 !important; } /* ══════════════════════════════════════════ DESIGN LAB ══════════════════════════════════════════ */ [data-theme="greenleaves"] .design-lab-card { border-radius: var(--radius-lg) !important; } /* ══════════════════════════════════════════ RESPONSIVE OVERRIDES ══════════════════════════════════════════ */ @media (max-width: 1024px) { [data-theme="greenleaves"] .page { padding: 20px 20px 28px; } [data-theme="greenleaves"] .two-col { grid-template-columns: 1fr; } [data-theme="greenleaves"] .topbar-brand, [data-theme="greenleaves"] .topbar-nav { padding-left: 16px !important; padding-right: 16px !important; } } @media (max-width: 768px) { [data-theme="greenleaves"] .page { padding: 16px 14px 24px; } [data-theme="greenleaves"] .page-header h1 { font-size: var(--t-lg) !important; } [data-theme="greenleaves"] .snapshot-bar { gap: 12px; } [data-theme="greenleaves"] .snapshot-divider { display: none; } [data-theme="greenleaves"] .card { padding: 14px 14px; } [data-theme="greenleaves"] .kpi-value { font-size: var(--t-xl) !important; } } @media (max-width: 480px) { [data-theme="greenleaves"] .page { padding: 12px 10px 20px; } [data-theme="greenleaves"] .page-header { flex-direction: column; align-items: flex-start; gap: 8px; } [data-theme="greenleaves"] .btn { font-size: var(--t-xs); padding: 5px 10px; } } /* ══════════════════════════════════════════ REDUCED MOTION ══════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-theme="greenleaves"] *, [data-theme="greenleaves"] *::before, [data-theme="greenleaves"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════ PRINT ══════════════════════════════════════════ */ @media print { [data-theme="greenleaves"] .topbar, [data-theme="greenleaves"] .topbar-nav, [data-theme="greenleaves"] .ladybird-fab, [data-theme="greenleaves"] .toast-container, [data-theme="greenleaves"] .reminders-panel { display: none !important; } [data-theme="greenleaves"] .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; } [data-theme="greenleaves"] body { background: #fff !important; } }