/* * ProInsight — Visual Enhancements * Linked after style.min.css in . * * IMPORTANT CONTEXT: * .dark-wrapper = LIGHT gray bg (#f3f5f6), dark text * .inverse-wrapper = DARK bg (charcoal #283539), white text * .light-wrapper = WHITE bg, dark text * Bootstrap .container = max-width 1170px, centered, padding 0 (overridden by theme) * * Covers: * 1. Heading weight overrides (Inter 500 in content, 700 for hero) * 2. Section label chips * 3. Buttons — consistent rounded corners * 4. Hero — left-aligned within container grid, depth texture * 5. Services — card layout & hover accents * 6–8. About — dot-grid, pull quote, differentiator cards * 9. Responsive adjustments */ /* ───────────────────────────────────────────── 1. HEADING WEIGHTS Base style.css sets h1-h3 at weight 600. Override to 500 (medium) in .content-wrapper for a lighter feel. Modals keep the base weight. ───────────────────────────────────────────── */ .content-wrapper h1, .content-wrapper h2, .content-wrapper h3, .hero-title { font-weight: 500; } /* ───────────────────────────────────────────── 2. SECTION LABEL CHIPS Small uppercase pill above section headings. ───────────────────────────────────────────── */ .section-label { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--primary-blue); background: var(--primary-blue-pale); padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; line-height: 1; } /* ───────────────────────────────────────────── 3. BUTTONS — CONSISTENT ROUNDED CORNERS Base .btn has border-radius: 0; override to 4px to match hero CTA and other rounded elements. ───────────────────────────────────────────── */ .btn { border-radius: 4px; } /* ───────────────────────────────────────────── 4. HERO — LEFT-ALIGNED WITHIN SITE GRID Uses same max-width + auto margins as Bootstrap .container so left edge aligns with rest of site. ───────────────────────────────────────────── */ .hero-section { text-align: left; } .hero-content { max-width: 1170px; width: 100%; margin: 0 auto; padding: 100px 15px 100px; text-align: left; position: relative; z-index: 2; } .hero-eyebrow, .hero-subtitle, .hero-cta { text-align: left; } .hero-section .hero-title { max-width: 640px; font-weight: 700; } .hero-subtitle { max-width: 540px; } /* Dot-grid texture */ .hero-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 1; } /* Asymmetric blue glow anchored left */ .hero-section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 28% 50%, rgba(15,108,189,0.20) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* ───────────────────────────────────────────── 5. SERVICES — CARD LAYOUT & HOVER ACCENT ───────────────────────────────────────────── */ #services .light-wrapper { background: var(--white); } #services .feature { position: relative; padding: 0 12px 32px; margin-bottom: 0; background: transparent; box-shadow: none; border: none; transition: background 0.25s ease; } #services .feature:hover { background: rgba(0,0,0,0.02); box-shadow: none; transform: none; } #services .feature .icon { position: static; margin-bottom: 16px; } #services .feature .icon img { width: 52px; height: 52px; } #services .feature h4 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--charcoal); } #services .feature p { font-size: 14px; line-height: 1.65; color: var(--text-gray); margin-bottom: 0; } /* ───────────────────────────────────────────── 6. ABOUT — DOT-GRID TEXTURE .dark-wrapper = LIGHT gray bg, so use dark dots. ───────────────────────────────────────────── */ #about .dark-wrapper { position: relative; overflow: hidden; } #about .dark-wrapper::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0,0,0,0.035) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; } /* ───────────────────────────────────────────── 7. ABOUT — PULL QUOTE LIGHT bg context: dark text, subtle bg. ───────────────────────────────────────────── */ .about-pull-quote { border-left: none; padding: 20px 24px; margin: 0 0 20px; background: rgba(0,0,0,0.03); border-radius: 6px; font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--charcoal); font-style: italic; } /* ───────────────────────────────────────────── 8. ABOUT — DIFFERENTIATOR CARDS LIGHT bg context: dark text on white card surfaces. ───────────────────────────────────────────── */ .about-diff { display: flex; gap: 1px; margin-top: 48px; background: var(--border-gray); border-radius: 6px; overflow: hidden; } .about-diff-item { flex: 1; background: rgba(255,255,255,0.7); padding: 24px 24px; transition: background 0.2s ease; } .about-diff-item:hover { background: var(--white); } .about-diff-number { display: block; font-size: 28px; font-weight: 500; color: var(--primary-blue); line-height: 1; margin-bottom: 12px; opacity: 0.45; } .about-diff-item h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--charcoal); margin: 0 0 8px; } .about-diff-item p { font-size: 13px; line-height: 1.6; color: var(--text-gray); margin: 0; } /* ───────────────────────────────────────────── 9. RESPONSIVE ───────────────────────────────────────────── */ /* Tablet landscape */ @media (max-width: 1024px) { .hero-content { padding: 80px 15px 60px; } } /* Tablet portrait / small screens */ @media (max-width: 768px) { .hero-content { padding: 60px 20px 48px; } .about-diff { flex-direction: column; } } /* Small mobile */ @media (max-width: 480px) { .hero-content { padding: 48px 16px 40px; } }