/* * vendidit-overrides.css * Applies the Vendidit dark navy + cyan style guide on top of HubSpot-generated styles. * Load this as the LAST stylesheet in so it wins the cascade. */ /* ========================================================= 1. FONT IMPORT — Montserrat (replaces Poppins / Inter / Rubik) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); /* ========================================================= 2. DESIGN TOKENS ========================================================= */ :root { --color-bg-primary: #0D1117; --color-bg-secondary: #111827; --color-bg-card: #141E2B; --color-bg-card-alt: #1A2537; --color-accent: #0ECAD4; --color-accent-light: #14E8F0; --color-text-primary: #FFFFFF; --color-text-secondary:#9CA3AF; --color-text-muted: #6B7280; --color-text-accent: #0ECAD4; --color-border: #1E2D3D; --color-border-accent: #0ECAD4; --gradient-logo: linear-gradient(135deg, #00D4AA 0%, #4F7FFF 100%); --font-sans: 'Montserrat', system-ui, sans-serif; } /* ========================================================= 3. GLOBAL BASE OVERRIDES ========================================================= */ html, body { background-color: #0D1117 !important; color: #9CA3AF !important; font-family: 'Montserrat', system-ui, sans-serif !important; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: #FFFFFF !important; font-family: 'Montserrat', system-ui, sans-serif !important; } /* Body copy */ p, li, td, th { font-family: 'Montserrat', system-ui, sans-serif !important; } /* Inline elements */ span, label, strong, em, b, i, small { font-family: 'Montserrat', system-ui, sans-serif !important; } /* Links */ a { font-family: 'Montserrat', system-ui, sans-serif !important; } /* Form elements */ input, textarea, select, button { font-family: 'Montserrat', system-ui, sans-serif !important; background-color: #1A2537; color: #9CA3AF; border-color: #1E2D3D; } /* ========================================================= 4. SECTION / PAGE BACKGROUNDS (These classes are applied to .dnd-section wrappers) ========================================================= */ .dnd-section { background-color: #0D1117; } /* Override all solid white/light linear-gradient backgrounds */ .body_dnd_area-row-0-background-layers, .body_dnd_area-row-0-background-gradient { background-image: linear-gradient(to bottom, rgba(13, 17, 23, 1), rgba(17, 24, 39, 1)) !important; } .body_dnd_area-row-1-background-layers { background-image: linear-gradient(rgba(17, 24, 39, 1), rgba(17, 24, 39, 1)) !important; } .body_dnd_area-row-2-background-layers { background-image: linear-gradient(rgba(13, 17, 23, 1), rgba(13, 17, 23, 1)) !important; } /* Row 3: gradient b g.png background image — keep image, let dark body bg show for fallback */ /* Row 4: triangle bg — keep image */ .body_dnd_area-row-6-background-layers, .body_dnd_area-row-6-background-gradient { background-image: linear-gradient(to bottom, rgba(13, 17, 23, 1), rgba(17, 24, 39, 1)) !important; } .body_dnd_area-row-7-background-layers { background-image: linear-gradient(rgba(13, 17, 23, 1), rgba(13, 17, 23, 1)) !important; } .body_dnd_area-row-8-background-layers { background-image: linear-gradient(rgba(17, 24, 39, 1), rgba(17, 24, 39, 1)) !important; } .body_dnd_area-row-9-background-layers { background-image: linear-gradient(rgba(13, 17, 23, 1), rgba(13, 17, 23, 1)) !important; } .body_dnd_area-row-10-background-layers { background-image: linear-gradient(rgba(17, 24, 39, 1), rgba(17, 24, 39, 1)) !important; } /* Row 11: triangle bg — keep image */ /* Row 12: Network background SVG — keep, it works well on dark */ .body_dnd_area-row-13-background-layers, .body_dnd_area-row-13-background-gradient { background-image: linear-gradient(to bottom, rgba(13, 17, 23, 1), rgba(17, 24, 39, 1)) !important; } /* Cell-level tinted card backgrounds */ .cell_176947629979510-background-layers { background-image: linear-gradient(rgba(14, 202, 212, 0.08), rgba(14, 202, 212, 0.08)) !important; } .cell_17694762997959-background-layers { background-image: linear-gradient(rgba(14, 202, 212, 0.05), rgba(14, 202, 212, 0.05)) !important; } .cell_176948005160610-background-layers { background-image: linear-gradient(rgba(14, 202, 212, 0.05), rgba(14, 202, 212, 0.05)) !important; } /* White overlay cells (used on image-bg cells) → dark overlay */ .cell_17139774176873-background-layers { background-image: linear-gradient(rgba(13, 17, 23, 0), rgba(13, 17, 23, 0)) !important; } .cell_17139774176873-row-0-background-layers { background-image: linear-gradient(rgba(13, 17, 23, 0.3), rgba(13, 17, 23, 0.3)) !important; } /* ========================================================= 5. NAVIGATION OVERRIDES Matches the specificity of the inline