/* ============================================================ LP First Capital — Master Stylesheet Fonts: Libre Baskerville (headings), Montserrat (body/UI) Import in : ============================================================ COLOUR PALETTE --navy-deep: #021535 (page bg, hero, companies, CTA, footer) --navy-mid: #032460 (quote, stewardship, buttons, icons) --navy-footer: #010d20 (footer bg) --blue-accent: #4A90D9 (dividers, labels, hover, italic CTA) --off-white: #F5F7FA (section backgrounds, stats cards) --body-grey: #5a6474 (body text) --border-light: #e0e6f0 (dividers, card borders) ============================================================ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #ffffff; font-family: 'Montserrat', sans-serif; } .page { max-width: 1440px; margin: 0 auto; } /* ── Section divider ── */ .section-divider { height: 3px; background: #4A90D9; width: 100%; } /* ── Shared utility ── */ .thin-line { width: 32px; height: 2px; background: #4A90D9; } .body-txt { font-size: 15px; color: #5a6474; line-height: 1.9; font-weight: 400; } /* ============================================================ NAVIGATION ============================================================ */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 100px; background: #021535; border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); } .nav-right { display: flex; gap: 40px; align-items: center; } .nav-links { display: flex; gap: 40px; align-items: center; } .nav-links a { color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 0.16em; text-decoration: none; font-weight: 600; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: #4A90D9; } .nav-links a.active { color: #fff; } /* Invest button */ .btn-nav-invest { background: #fff; border: 2px solid #fff; color: #032460; padding: 10px 24px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 50px; text-decoration: none; white-space: nowrap; transition: background 0.2s, border-color 0.2s, color 0.2s; } .btn-nav-invest:hover { background: #4A90D9; border-color: #4A90D9; color: #fff; } /* ============================================================ BUTTONS ============================================================ */ /* White pill — on dark bg */ .btn-white { background: #fff; border: 2px solid #fff; color: #032460; padding: 16px 40px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 50px; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn-white:hover { background: #4A90D9; border-color: #4A90D9; color: #fff; } /* Navy pill — on light bg */ .btn-navy { background: #032460; border: 2px solid #032460; color: #fff; padding: 14px 36px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 50px; text-decoration: none; display: inline-block; transition: background 0.2s, border-color 0.2s; } .btn-navy:hover { background: #4A90D9; border-color: #4A90D9; } /* Small white pill */ .btn-sm-white { background: #fff; border: 2px solid #fff; color: #032460; padding: 12px 32px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; border-radius: 50px; transition: background 0.2s, color 0.2s, border-color 0.2s; } .btn-sm-white:hover { background: #4A90D9; border-color: #4A90D9; color: #fff; } /* ============================================================ HOMEPAGE — HERO ============================================================ */ .hero { position: relative; background: #021535; overflow: hidden; height: 580px; display: flex; align-items: center; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(2,21,53,0.88) 0%, rgba(2,21,53,0.75) 35%, rgba(2,21,53,0.00) 65% ); } .hero-content { position: relative; z-index: 2; padding: 0 100px; max-width: 560px; } .hero h1 { font-family: 'Libre Baskerville', serif; font-size: 56px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -0.01em; } .hero h1 .line2 { display: block; color: rgba(255,255,255,0.18); font-style: italic; font-weight: 400; } .hero h1 .line3 { display: block; color: #fff; } .hero-sub { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.85; max-width: 400px; font-weight: 400; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.2); } /* ============================================================ HOMEPAGE — QUOTE ============================================================ */ .quote-section { background: #032460; padding: 72px 100px; text-align: center; } .quote-inner { max-width: 860px; margin: 0 auto; } .quote-inner blockquote { font-family: 'Libre Baskerville', serif; font-size: 24px; font-style: italic; color: #fff; line-height: 1.55; font-weight: 400; } .quote-inner cite { display: block; margin-top: 36px; font-size: 14px; color: #4A90D9; letter-spacing: 0.2em; font-style: normal; font-weight: 700; text-transform: uppercase; } /* ============================================================ HOMEPAGE — MOUNTAINTOP ============================================================ */ .mountaintop { display: grid; grid-template-columns: 1fr 1fr; } .mountaintop-left { padding: 64px 100px; background: #F5F7FA; display: flex; flex-direction: column; justify-content: center; } .mountaintop-right { background: #F5F7FA; display: flex; align-items: center; justify-content: center; padding: 60px 100px 60px 60px; } .photo-box { width: 100%; overflow: hidden; } .photo-box img { width: 100%; height: auto; display: block; } .mountaintop-h { font-family: 'Libre Baskerville', serif; font-size: 32px; font-weight: 700; color: #032460; line-height: 1.2; letter-spacing: -0.01em; } .body-txt { font-size: 15px; color: #5a6474; line-height: 1.9; font-weight: 400; } /* ============================================================ HOMEPAGE — STEWARDSHIP BAND ============================================================ */ .stewardship { background: #032460; padding: 60px 100px; text-align: center; } .stew-text { font-family: 'Libre Baskerville', serif; font-size: 26px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; } /* ============================================================ HOMEPAGE — OUR COMPANIES ============================================================ */ .companies { background: #021535; padding: 52px 100px; } .companies-label { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4A90D9; margin-bottom: 36px; } .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); } .logo-cell { background: #021535; padding: 0 40px; display: flex; align-items: center; justify-content: center; height: 140px; cursor: pointer; transition: background 0.2s; } .logo-cell:hover { background: rgba(255,255,255,0.04); } .logo-cell img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.75; transition: opacity 0.2s; } .logo-cell:hover img { opacity: 1; } /* ============================================================ HOMEPAGE — VALUES ============================================================ */ .values { background: #F5F7FA; } .values-header { padding: 56px 100px 40px; } .values-h { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1.1; letter-spacing: -0.01em; } .val-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 100px; } .val-row-item { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; background: #F5F7FA; transition: background 0.15s; } .val-row-item:hover { background: #eef0f5; } .values-footer { height: 56px; } .val-icon-wrap { width: 44px; height: 44px; background: #032460; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .val-icon-wrap svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .val-left-col { display: flex; align-items: center; gap: 16px; } .val-name { font-family: 'Libre Baskerville', serif; font-size: 17px; font-weight: 700; color: #032460; } .val-desc { font-size: 16px; color: #5a6474; line-height: 1.7; } /* ============================================================ CTA BAND (shared across all pages) ============================================================ */ .cta { background: #021535; padding: 100px; display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; } .cta-h { font-family: 'Libre Baskerville', serif; font-size: 38px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.01em; } .cta-h em { font-style: italic; font-weight: 400; color: #4A90D9; } /* Quote band variant (How We Invest, How We Operate) */ .quote-band { background: #021535; padding: 80px 100px; display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; } .quote-band-text { font-family: 'Libre Baskerville', serif; font-size: 42px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.01em; } /* ============================================================ FOOTER (shared across all pages) ============================================================ */ .footer { background: #010d20; padding: 32px 100px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.04); } .footer-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 1; } .footer-links { display: flex; gap: 32px; } .footer-links a { color: rgba(255,255,255,0.2); font-size: 10px; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; font-weight: 500; transition: color 0.2s; } .footer-links a:hover { color: #4A90D9; } /* ============================================================ INNER PAGES — PAGE HERO (How We Invest, How We Operate, Team) ============================================================ */ .page-hero { background: #021535; padding: 120px 100px; display: flex; align-items: center; min-height: 280px; } .page-hero h1 { font-family: 'Libre Baskerville', serif; font-size: 64px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.02em; max-width: 900px; } /* ============================================================ HOW WE INVEST ============================================================ */ /* Philosophy */ .philosophy { background: #F5F7FA; padding: 56px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .philosophy h2 { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1.2; letter-spacing: -0.01em; } .philosophy p { font-size: 15px; color: #5a6474; line-height: 1.9; } /* Focus Industries */ .focus { background: #021535; padding: 80px 100px; } .focus-label { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4A90D9; margin-bottom: 40px; } .focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 48px; } .focus-cell { background: #021535; padding: 48px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .focus-cell-title { font-family: 'Libre Baskerville', serif; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 16px; } .focus-cell-line { width: 48px; height: 2px; background: #4A90D9; } .focus-intro { font-size: 18px; color: rgba(255,255,255,0.7); line-height: 1.85; margin-bottom: 12px; } .focus-levers { display: flex; flex-direction: column; gap: 6px; } .focus-lever { font-size: 18px; color: rgba(255,255,255,0.7); line-height: 1.85; display: flex; gap: 14px; } .focus-lever-num { color: #4A90D9; font-weight: 700; flex-shrink: 0; } /* Target Size */ .target { background: #F5F7FA; padding: 56px 100px 80px; } .target h2 { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 40px; } .target-stack { display: flex; flex-direction: column; gap: 16px; } .target-row { background: #fff; border: 1px solid #e0e6f0; padding: 48px 60px; } .target-row-label { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4A90D9; margin-bottom: 32px; } .target-metrics { display: grid; grid-template-columns: repeat(3, 1fr); } .target-metric { text-align: center; padding: 0 20px; border-right: 1px solid #e0e6f0; } .target-metric:last-child { border-right: none; } .target-metric-val { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1; margin-bottom: 8px; } .target-metric-label { font-size: 11px; color: #5a6474; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Capital Stack */ .capital { background: #032460; padding: 80px 100px; text-align: center; } .capital p { font-family: 'Libre Baskerville', serif; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.6; max-width: 1000px; margin: 0 auto; letter-spacing: -0.01em; } /* Intermediaries */ .intermediaries { background: #F5F7FA; padding: 80px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .intermediaries h2 { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1.2; letter-spacing: -0.01em; } .intermediaries-content { display: flex; flex-direction: column; gap: 24px; } .intermediaries p { font-size: 15px; color: #5a6474; line-height: 1.9; } .intermediaries-img { background: #d4dae6; display: flex; align-items: center; justify-content: center; min-height: 320px; color: #8a97ab; font-size: 12px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; } /* ============================================================ HOW WE OPERATE ============================================================ */ /* Approach cards */ .approach { background: #F5F7FA; padding: 80px 100px; } .approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .approach-card { background: #fff; border: 1px solid #e0e6f0; padding: 48px 40px; display: flex; flex-direction: column; gap: 20px; } .approach-num { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #4A90D9; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #4A90D9; font-family: 'Libre Baskerville', serif; flex-shrink: 0; } .approach-title { font-family: 'Libre Baskerville', serif; font-size: 22px; font-weight: 700; color: #032460; line-height: 1.2; } .approach-desc { font-size: 15px; color: #5a6474; line-height: 1.9; } /* LBS */ .lbs { background: #021535; padding: 52px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .lbs-content { display: flex; flex-direction: column; gap: 28px; } .lbs-content h2 { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; } .lbs-content p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.9; } .lbs-diagram { display: flex; align-items: center; justify-content: center; } /* Scale */ .scale { background: #F5F7FA; padding: 72px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .scale h2 { font-family: 'Libre Baskerville', serif; font-size: 36px; font-weight: 700; color: #032460; line-height: 1.2; letter-spacing: -0.01em; } .scale p { font-size: 15px; color: #5a6474; line-height: 1.9; } /* ============================================================ TEAM PAGE ============================================================ */ .team-page-hero { background: #fff; padding: 80px 100px 56px; } .team-page-hero h1 { font-family: 'Libre Baskerville', serif; font-size: 64px; font-weight: 700; color: #032460; line-height: 1.1; letter-spacing: -0.02em; max-width: 900px; margin-bottom: 28px; } .team-page-hero p { font-size: 15px; color: #5a6474; line-height: 1.9; max-width: 760px; } .team-section { background: #fff; padding: 0 100px 80px; } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; } .team-card { display: flex; flex-direction: column; } .team-photo { width: 100%; aspect-ratio: 1/1; background: #d4dae6; display: flex; align-items: center; justify-content: center; color: #8a97ab; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .team-info { padding: 18px 0 0; } .team-name { font-family: 'Libre Baskerville', serif; font-size: 18px; font-weight: 700; color: #032460; margin-bottom: 6px; } .team-email { font-size: 12px; font-weight: 600; color: #4A90D9; letter-spacing: 0.02em; text-decoration: none; display: block; } .team-email:hover { text-decoration: underline; } /* ============================================================ COMPANIES PAGE ============================================================ */ /* Hero */ .companies-page-hero { position: relative; background: #021535; overflow: hidden; min-height: 400px; display: flex; align-items: center; } .companies-page-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; opacity: 1; } .companies-page-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(2,21,53,0.88) 0%, rgba(2,21,53,0.75) 35%, rgba(2,21,53,0.0) 65%); } .companies-page-hero .hero-content { position: relative; z-index: 2; padding: 80px 100px; max-width: 700px; } .companies-page-hero h1 { font-family: 'Libre Baskerville', serif; font-size: 48px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; } /* Portfolio logo grids */ .partnerships { background: #fff; padding: 80px 100px; } .partnerships-label { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4A90D9; margin-bottom: 40px; } .portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #e0e6f0; border: 1px solid #e0e6f0; } .portfolio-cell { background: #fff; padding: 0 40px; display: flex; align-items: center; justify-content: center; height: 140px; cursor: pointer; transition: background 0.2s; } .portfolio-cell:hover { background: #f0f2f6; } .portfolio-cell img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; } .portfolio-cell img.logo-medium { max-height: 100px; } /* Legacy */ .legacy { background: #fff; padding: 64px 100px 80px; } .legacy-label { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #4A90D9; margin-bottom: 40px; } .legacy-grid { display: grid; grid-template-columns: 1fr; width: 25%; background: #e0e6f0; border: 1px solid #e0e6f0; } .legacy-cell { background: #fff; padding: 0 40px; display: flex; align-items: center; justify-content: center; height: 140px; cursor: pointer; transition: background 0.2s; } .legacy-cell:hover { background: #f0f2f6; } .legacy-cell img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; } /* ============================================================ COMPANY INNER PAGES ============================================================ */ .breadcrumb { background: #F5F7FA; padding: 16px 100px; border-bottom: 1px solid #e0e6f0; } .breadcrumb a { font-size: 11px; color: #4A90D9; text-decoration: none; font-weight: 600; letter-spacing: 0.04em; } .breadcrumb span { font-size: 11px; color: #8a97ab; margin: 0 8px; } .breadcrumb span.current { color: #032460; font-weight: 600; } .company-hero { background: #fff; padding: 48px 100px 80px; } .company-logo-wrap { display: flex; align-items: center; height: 80px; margin-bottom: 28px; } .company-logo-wrap img { max-height: 72px; max-width: 280px; object-fit: contain; } .company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .company-left { display: flex; flex-direction: column; gap: 24px; } .company-hero h1 { font-family: 'Libre Baskerville', serif; font-size: 48px; font-weight: 700; color: #032460; line-height: 1.1; letter-spacing: -0.02em; } .company-desc { font-size: 16px; color: #5a6474; line-height: 1.9; } .company-stats { background: #F5F7FA; border: 1px solid #e0e6f0; padding: 40px 48px; display: flex; flex-direction: column; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #e0e6f0; } .stat-row:last-child { border-bottom: none; } .stat-label { font-size: 11px; font-weight: 700; color: #8a97ab; letter-spacing: 0.12em; text-transform: uppercase; } .stat-value { font-size: 14px; font-weight: 600; color: #032460; text-align: right; } .stat-value.status-current { color: #4A90D9; } .stat-value.status-realized { color: #5a6474; }