@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+3:wght@300;400;500;600&family=Bebas+Neue&display=swap'); :root { --forest: #08132a; --pine: #102040; --fern: #1a3560; --sage: #3a6fba; --mist: #90b4d8; --cream: #f0f4fa; --parchment: #e2eaf5; --gold: #b80a2a; --gold-lt: #d42040; --charcoal: #121828; --mid: #3c4a6a; --light: #f5f8fd; --white: #ffffff; --border: rgba(26,53,96,0.2); --border-gold: rgba(184,10,42,0.35); --shadow: 0 4px 32px rgba(0,0,0,0.18); --shadow-sm: 0 2px 12px rgba(0,0,0,0.10); /* Text color placed on top of the accent color (--gold). */ --on-accent: #ffffff; /* Deep stop used at the far end of the hero gradients. */ --hero-deep: #060f1e; /* Lighter accent for accent-colored TEXT sitting on the dark sections. Fills and buttons keep the true --gold; only small type is lifted so it clears contrast against the navy. */ --accent-text-dark: #e85a70; } /* ---- DIVISION ACCENTS ---- Each division re-declares the accent variables on . Every rule that already references --gold picks the new accent up automatically, so the layout, type, and spacing stay identical across the whole site. */ body.div-brokerage { --gold: #1b4f8f; --gold-lt: #2765b3; --border-gold: rgba(27,79,143,0.35); --accent-text-dark: #7ab3ea; } body.div-usa { --gold: #8f1d1d; --gold-lt: #b02828; --border-gold: rgba(143,29,29,0.35); --accent-text-dark: #ec6b6b; } body.div-green { --gold: #1f5130; --gold-lt: #2a6b40; --border-gold: rgba(31,81,48,0.35); --accent-text-dark: #6fc492; } body.div-holdings { --gold: #b8960c; --gold-lt: #d4ab10; --border-gold: rgba(184,150,12,0.35); --on-accent: #14161c; --forest: #14171d; --pine: #1e232c; --hero-deep: #0e1116; --accent-text-dark: #e0b62e; } /* Accent-colored small type that sits on a dark background. */ #hero .hero-eyebrow, #hero .hero-title span, #hero .stat-num, .page-hero .section-label, .page-hero .breadcrumb span, .page-hero .breadcrumb a:hover, #process .section-label, #why .section-label, #why .reason-num, #partner-cta .section-label, .structure-parent .section-label, footer .footer-col h5, .nav-links a:hover, #navbar .wordmark-sub { color: var(--accent-text-dark); } .mission-block blockquote { border-left-color: var(--accent-text-dark); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Source Sans 3', sans-serif; font-weight: 400; background: var(--light); color: var(--charcoal); line-height: 1.7; overflow-x: hidden; } /* ---- UTILITY ---- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; } .section-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.78rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; display: block; } .section-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: var(--forest); line-height: 1.18; margin-bottom: 20px; } .section-title.light { color: var(--cream); } .body-text { font-size: 1.05rem; color: var(--mid); line-height: 1.8; } .body-text.light { color: var(--mist); } .divider { width: 56px; height: 3px; background: var(--gold); margin-bottom: 32px; } .divider.center { margin-left: auto; margin-right: auto; } /* ---- BUTTONS ---- */ .btn { display: inline-block; font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 34px; border: none; cursor: pointer; text-decoration: none; transition: all 0.25s ease; } .btn-primary { background: var(--gold); color: var(--on-accent); } .btn-primary:hover { background: var(--gold-lt); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-outline { background: transparent; color: var(--cream); border: 1.5px solid var(--mist); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-outline-dark { background: transparent; color: var(--forest); border: 1.5px solid var(--pine); } .btn-outline-dark:hover { background: var(--forest); color: var(--cream); } /* ---- NAVIGATION ---- */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background 0.35s ease, box-shadow 0.35s ease; padding: 0; } #navbar.scrolled { background: var(--forest); box-shadow: 0 2px 24px rgba(0,0,0,0.35); } #navbar .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; } .wordmark-top { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.35rem; color: var(--cream); letter-spacing: 0.04em; } .wordmark-sub { font-family: 'Bebas Neue', sans-serif; font-size: 0.62rem; letter-spacing: 0.3em; color: var(--gold); margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; } .nav-links a { font-family: 'Source Sans 3', sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--gold); } .nav-links .nav-cta { background: var(--gold); color: var(--on-accent) !important; padding: 9px 22px; font-weight: 600; } .nav-links a.active { color: var(--gold); } .nav-links a.nav-cta.active { color: var(--on-accent) !important; } .nav-links .nav-cta:hover { background: var(--gold-lt); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .hamburger span { display: block; width: 26px; height: 2px; background: var(--cream); transition: all 0.3s; } /* ---- HERO ---- */ #hero { min-height: 100vh; background: linear-gradient(160deg, var(--forest) 0%, var(--hero-deep) 55%, #0d1e3a 100%); position: relative; display: flex; align-items: center; overflow: hidden; } .hero-texture { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.015) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.015) 60px); pointer-events: none; } .hero-accent { position: absolute; top: -120px; right: -80px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(30,70,160,0.1) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 2; max-width: 720px; } .hero-eyebrow { font-family: 'Bebas Neue', sans-serif; font-size: 0.78rem; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .hero-eyebrow::before { content: ''; display: block; width: 40px; height: 1.5px; background: var(--gold); } .hero-title { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.6rem, 6vw, 5.2rem); color: var(--cream); line-height: 1.08; margin-bottom: 28px; } .hero-title span { color: var(--gold); } .hero-body { font-size: 1.12rem; color: var(--mist); line-height: 1.8; max-width: 560px; margin-bottom: 44px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { position: absolute; bottom: 52px; right: 0; display: flex; gap: 0; z-index: 2; } .stat-block { padding: 28px 40px; border-left: 1px solid var(--border); text-align: center; } .stat-block:first-child { border-left: none; } .stat-num { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; color: var(--gold); display: block; line-height: 1; } .stat-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); margin-top: 6px; display: block; } /* ---- BANNER STRIP ---- */ .banner-strip { background: var(--gold); padding: 16px 0; overflow: hidden; } .banner-ticker { display: flex; gap: 64px; animation: ticker 30s linear infinite; white-space: nowrap; } .banner-ticker span { font-family: 'Bebas Neue', sans-serif; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--on-accent); text-transform: uppercase; flex-shrink: 0; } .banner-ticker .dot { color: rgba(255,255,255,0.45); margin: 0 10px; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---- WHO WE SERVE ---- */ #serve { padding: 100px 0; background: var(--light); } .serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; background: var(--border); } .serve-card { background: var(--white); padding: 48px 40px; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } .serve-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .serve-card:hover::before { transform: scaleX(1); } .serve-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); z-index: 1; } .serve-icon { width: 52px; height: 52px; margin-bottom: 24px; position: relative; } .serve-icon svg { width: 100%; height: 100%; } .serve-card h3 { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: var(--forest); margin-bottom: 14px; } .serve-card p { font-size: 0.97rem; color: var(--mid); line-height: 1.75; } .serve-card .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fern); text-decoration: none; transition: color 0.2s, gap 0.2s; } .serve-card .card-link:hover { color: var(--gold); gap: 12px; } /* ---- HOW IT WORKS ---- */ #process { padding: 100px 0; background: var(--forest); position: relative; overflow: hidden; } #process::before { content: ''; position: absolute; bottom: -60px; right: -60px; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(26,53,96,0.15); pointer-events: none; } #process::after { content: ''; position: absolute; bottom: -120px; right: -120px; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(26,53,96,0.08); pointer-events: none; } .process-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .step { background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 40px 32px; position: relative; transition: background 0.25s; } .step:hover { background: rgba(255,255,255,0.07); } .step-num { font-family: 'Bebas Neue', sans-serif; font-size: 4rem; color: rgba(26,53,96,0.2); line-height: 1; margin-bottom: 18px; display: block; } .step h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--cream); margin-bottom: 12px; } .step p { font-size: 0.92rem; color: var(--mist); line-height: 1.7; } .step-arrow { position: absolute; top: 40px; right: -16px; z-index: 2; color: var(--gold); font-size: 1.1rem; } /* ---- ABOUT SECTION ---- */ #about-preview { padding: 100px 0; background: var(--parchment); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image-wrap { position: relative; } .about-img-placeholder { width: 100%; aspect-ratio: 4/5; background: linear-gradient(145deg, var(--pine), var(--forest)); display: flex; align-items: center; justify-content: center; position: relative; } .about-img-placeholder svg { width: 80px; opacity: 0.3; } .about-img-border { position: absolute; bottom: -20px; right: -20px; width: calc(100% - 20px); height: calc(100% - 20px); border: 2px solid var(--gold); pointer-events: none; } .about-facts { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; } .fact-row { display: flex; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(90,140,90,0.2); } .fact-row:last-child { border-bottom: none; } .fact-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); min-width: 120px; } .fact-value { font-size: 0.97rem; color: var(--mid); } /* ---- PARTNER CTA ---- */ #partner-cta { padding: 90px 0; background: linear-gradient(135deg, var(--pine) 0%, var(--forest) 60%, #080f20 100%); position: relative; overflow: hidden; } .cta-lines { position: absolute; inset: 0; background-image: repeating-linear-gradient( 90deg, transparent, transparent 79px, rgba(255,255,255,0.02) 80px ); pointer-events: none; } .cta-inner { text-align: center; position: relative; z-index: 2; } .cta-inner .section-title { font-size: clamp(2rem, 4vw, 3.2rem); } .cta-inner .body-text { max-width: 620px; margin: 0 auto 40px; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---- CONTACT SECTION ---- */ .contact-section { padding: 100px 0; background: var(--light); } .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; } .contact-info h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--forest); margin-bottom: 32px; } .contact-item { display: flex; gap: 18px; margin-bottom: 28px; align-items: flex-start; } .contact-icon { width: 42px; height: 42px; background: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon svg { width: 18px; height: 18px; stroke: var(--gold); } .contact-item-body { font-size: 0.95rem; color: var(--mid); } .contact-item-body strong { display: block; color: var(--forest); font-weight: 600; margin-bottom: 2px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .contact-item-body a { color: var(--fern); text-decoration: none; } .contact-item-body a:hover { color: var(--gold); } /* ---- FORM ---- */ .contact-form { display: flex; flex-direction: column; gap: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); } .field input, .field select, .field textarea { font-family: 'Source Sans 3', sans-serif; font-size: 0.97rem; color: var(--charcoal); background: var(--white); border: 1.5px solid #ccd5e8; padding: 13px 16px; outline: none; transition: border-color 0.2s; resize: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fern); } .field textarea { min-height: 120px; } .form-success { display: none; background: var(--pine); color: var(--cream); padding: 16px 22px; font-size: 0.95rem; margin-top: 8px; } /* ---- FOOTER ---- */ footer { background: #070e1c; border-top: 1px solid rgba(26,53,96,0.15); padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 60px; margin-bottom: 48px; } .footer-brand .wordmark-top { font-size: 1.2rem; } .footer-desc { margin-top: 16px; font-size: 0.9rem; color: rgba(144,180,216,0.7); line-height: 1.7; max-width: 300px; } .footer-col h5 { font-family: 'Bebas Neue', sans-serif; font-size: 0.8rem; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col ul a { font-size: 0.9rem; color: rgba(144,180,216,0.7); text-decoration: none; transition: color 0.2s; } .footer-col ul a:hover { color: var(--mist); } .footer-bottom { border-top: 1px solid rgba(30,70,160,0.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(144,180,216,0.45); } .footer-bottom a { color: inherit; text-decoration: none; } .footer-bottom a:hover { color: var(--mist); } /* ---- PAGE HERO (inner pages) ---- */ .page-hero { background: linear-gradient(160deg, var(--forest) 0%, var(--hero-deep) 100%); padding: 160px 0 80px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.015) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.015) 60px); pointer-events: none; } .page-hero-inner { position: relative; z-index: 2; } .page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; color: var(--cream); margin-bottom: 16px; } .page-hero p { font-size: 1.1rem; color: var(--mist); max-width: 560px; } .breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: rgba(144,180,216,0.65); margin-bottom: 24px; } .breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb a:hover { color: var(--gold); } .breadcrumb span { color: var(--gold); } /* ---- RESTAURANTS PAGE ---- */ .content-section { padding: 90px 0; } .content-section.alt { background: var(--parchment); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; } .two-col.reverse .col-img { order: -1; } .benefit-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 24px; } .benefit-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--mid); padding-bottom: 14px; border-bottom: 1px solid rgba(26,53,96,0.15); } .benefit-list li:last-child { border-bottom: none; } .benefit-list .check { width: 22px; height: 22px; background: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .benefit-list .check svg { width: 12px; stroke: var(--gold); } .col-img-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--pine), var(--forest)); display: flex; align-items: center; justify-content: center; } .col-img-placeholder svg { width: 70px; opacity: 0.3; } .col-img-placeholder.light { background: linear-gradient(145deg, #d3ddec, #bccbe0); } .col-img-placeholder.light svg { opacity: 0.45; } /* ---- FARMERS PAGE ---- */ .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .spec-card { background: var(--white); border: 1px solid var(--border); padding: 32px 28px; } .spec-card h4 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--forest); margin-bottom: 10px; } .spec-card p { font-size: 0.92rem; color: var(--mid); line-height: 1.7; } .spec-val { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--gold); display: block; margin-bottom: 6px; } /* ---- ABOUT PAGE ---- */ .owner-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; } .owner-photo { width: 100%; aspect-ratio: 3/4; background: linear-gradient(145deg, var(--pine), var(--forest)); display: flex; align-items: center; justify-content: center; position: relative; } .owner-photo svg { width: 80px; opacity: 0.25; } .owner-photo-border { position: absolute; bottom: -16px; right: -16px; width: calc(100% - 16px); height: calc(100% - 16px); border: 2px solid var(--gold); pointer-events: none; } .owner-name { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--forest); margin-bottom: 4px; } .owner-title { font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 28px; } .mission-block { background: var(--forest); padding: 60px; margin: 60px 0; } .mission-block blockquote { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-style: italic; color: var(--cream); line-height: 1.55; border-left: 3px solid var(--gold); padding-left: 32px; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); } .value-card { background: var(--white); padding: 36px 32px; } .value-card h4 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--forest); margin-bottom: 10px; } .value-card p { font-size: 0.92rem; color: var(--mid); line-height: 1.7; } .value-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--gold); display: block; margin-bottom: 14px; } /* ---- MOBILE ---- */ /* The primary navigation carries seven items, so it folds into the mobile menu earlier than the rest of the layout. */ @media (max-width: 1120px) { .nav-links { gap: 20px; } .nav-links a { font-size: 0.76rem; letter-spacing: 0.07em; } .nav-links .nav-cta { padding: 9px 16px; } } @media (max-width: 1024px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 76px; left: 0; right: 0; max-height: calc(100vh - 76px); overflow-y: auto; background: var(--forest); padding: 32px; gap: 24px; box-shadow: var(--shadow); z-index: 999; } .nav-links.open a { font-size: 0.9rem; letter-spacing: 0.1em; } .hamburger { display: flex; } } @media (max-width: 900px) { .hero-stats { position: static; margin-top: 60px; flex-wrap: wrap; } .stat-block { border-left: 1px solid var(--border); border-top: 1px solid var(--border); } .serve-grid { grid-template-columns: 1fr; } .process-header { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr 1fr; } .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } .two-col { grid-template-columns: 1fr; } .two-col.reverse .col-img { order: 0; } .spec-grid { grid-template-columns: 1fr 1fr; } .owner-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .mission-block { padding: 36px 28px; } .step-arrow { display: none; } .hero-title { font-size: clamp(2rem, 8vw, 3rem); } } @media (max-width: 540px) { .container { padding: 0 20px; } .process-steps { grid-template-columns: 1fr; } .spec-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; } .cta-actions { flex-direction: column; align-items: center; } } /* ========================================================================= GROUP STRUCTURE COMPONENTS Added when the site expanded from a single biodiesel operation to the Pines Energy Group LLC corporate site. Every component reuses the existing type scale, spacing rhythm, and accent variables. ========================================================================= */ /* ---- ACCESSIBILITY ---- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--gold); color: var(--on-accent); padding: 12px 20px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } #navbar a:focus-visible, #navbar button:focus-visible, footer a:focus-visible, .page-hero a:focus-visible, #hero a:focus-visible, #process a:focus-visible, #partner-cta a:focus-visible { outline-color: var(--mist); } /* Shared scroll animation, previously duplicated in every page head block. */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up:nth-child(2) { transition-delay: 0.08s; } .fade-up:nth-child(3) { transition-delay: 0.16s; } .fade-up:nth-child(4) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .fade-up { opacity: 1; transform: none; } } /* Invisible in-page anchor that accounts for the fixed navbar height. */ .anchor-offset { position: absolute; top: -90px; left: 0; width: 1px; height: 1px; } /* ---- SECTION INTRO ---- */ .section-intro { max-width: 720px; margin-bottom: 56px; } .section-intro.center { margin-left: auto; margin-right: auto; text-align: center; } .section-intro.center .divider { margin-left: auto; margin-right: auto; } /* ---- OPERATING DIVISIONS ---- */ #divisions { padding: 100px 0; background: var(--white); } .division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--border); } .division-card { background: var(--white); padding: 44px 40px 40px; display: flex; flex-direction: column; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; } .division-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-accent, var(--gold)); } .division-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); z-index: 1; } .division-eyebrow { font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--card-accent, var(--gold)); margin-bottom: 12px; display: block; } .division-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--forest); margin-bottom: 14px; } .division-card p { font-size: 0.99rem; color: var(--mid); line-height: 1.8; } .division-points { list-style: none; margin: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; } .division-points li { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--mid); border: 1px solid var(--border); padding: 5px 12px; } .division-card .btn { margin-top: auto; align-self: flex-start; } .division-card .btn-outline-dark { border-color: var(--card-accent, var(--pine)); color: var(--card-accent, var(--forest)); } .division-card .btn-outline-dark:hover { background: var(--card-accent, var(--forest)); color: var(--white); } /* Per-division accent assignments, used on the group pages and footer. */ .acc-brokerage { --card-accent: #1b4f8f; } .acc-usa { --card-accent: #8f1d1d; } .acc-green { --card-accent: #1f5130; } .acc-holdings { --card-accent: #8a6f0a; } /* ---- CORPORATE STRUCTURE ---- */ .structure-parent { background: var(--forest); padding: 40px 44px; border-left: 4px solid var(--gold); } .structure-parent h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--cream); margin-bottom: 10px; } .structure-parent p { color: var(--mist); font-size: 0.99rem; line-height: 1.8; } .structure-list { list-style: none; margin-top: 2px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--border); } .structure-list li { background: var(--white); padding: 28px 32px; border-top: 3px solid var(--card-accent, var(--gold)); } .structure-list strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 700; color: var(--forest); margin-bottom: 6px; } .structure-list span { font-size: 0.94rem; color: var(--mid); line-height: 1.7; } /* ---- INDUSTRIES SERVED ---- */ #industries { padding: 100px 0; background: var(--parchment); } .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); margin-top: 50px; } .industry-item { background: var(--white); padding: 26px 28px; display: flex; align-items: flex-start; gap: 16px; transition: background 0.2s ease; } .industry-item:hover { background: var(--light); } .industry-item .bar { width: 3px; height: 24px; background: var(--gold); flex-shrink: 0; margin-top: 3px; } .industry-item strong { font-size: 0.94rem; font-weight: 600; color: var(--forest); letter-spacing: 0.02em; display: block; } .industry-item span { display: block; font-size: 0.86rem; color: var(--mid); font-weight: 400; line-height: 1.6; } /* ---- WHY PINES (dark band) ---- */ #why { padding: 100px 0; background: var(--forest); position: relative; overflow: hidden; } #why::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 90deg, transparent, transparent 79px, rgba(255,255,255,0.02) 80px ); pointer-events: none; } #why .container { position: relative; z-index: 2; } .reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 56px; } .reason-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 38px 32px; transition: background 0.25s ease; } .reason-card:hover { background: rgba(255,255,255,0.07); } .reason-card h4 { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--cream); margin-bottom: 12px; } .reason-card p { font-size: 0.93rem; color: var(--mist); line-height: 1.75; } .reason-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: var(--gold); line-height: 1; display: block; margin-bottom: 16px; } /* ---- NEWS AND FEATURED WORK ---- */ #news { padding: 100px 0; background: var(--light); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; } .news-card { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 34px 30px; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; } .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); } .news-meta { font-family: 'Bebas Neue', sans-serif; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; } .news-card h4 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--forest); margin-bottom: 12px; } .news-card p { font-size: 0.93rem; color: var(--mid); line-height: 1.75; } .news-card .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fern); text-decoration: none; transition: color 0.2s, gap 0.2s; } .news-card .card-link:hover { color: var(--gold); gap: 12px; } /* ---- SERVICE LIST (division pages) ---- */ .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--border); margin-top: 46px; } .service-item { background: var(--white); padding: 30px 32px; transition: background 0.2s ease; } .service-item:hover { background: var(--light); } .service-item h4 { font-family: 'Playfair Display', serif; font-size: 1.08rem; color: var(--forest); margin-bottom: 8px; } .service-item p { font-size: 0.93rem; color: var(--mid); line-height: 1.75; } .service-num { font-family: 'Bebas Neue', sans-serif; font-size: 0.74rem; letter-spacing: 0.2em; color: var(--gold); display: block; margin-bottom: 10px; } /* ---- CONTACT CHANNELS ---- */ .channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); margin-top: 50px; } .channel-card { background: var(--white); padding: 34px 30px; border-top: 3px solid var(--card-accent, var(--gold)); display: flex; flex-direction: column; position: relative; } .channel-card h4 { font-family: 'Playfair Display', serif; font-size: 1.12rem; color: var(--forest); margin-bottom: 10px; } .channel-card p { font-size: 0.93rem; color: var(--mid); line-height: 1.75; margin-bottom: 18px; } .channel-links { list-style: none; margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .channel-links a { font-size: 0.9rem; color: var(--fern); text-decoration: none; font-weight: 600; } .channel-links a:hover { color: var(--gold); } /* ---- FOOTER EXPANSION ---- */ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px; } .footer-legal { font-size: 0.78rem; color: rgba(144,180,216,0.5); margin-top: 18px; line-height: 1.7; } .footer-contact { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-contact li { font-size: 0.9rem; color: rgba(144,180,216,0.7); line-height: 1.6; } .footer-contact a { color: rgba(144,180,216,0.7); text-decoration: none; } .footer-contact a:hover { color: var(--mist); } .footer-col ul a .fdot { display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: var(--card-accent, var(--gold)); vertical-align: middle; } .footer-bottom { flex-wrap: wrap; gap: 12px; } /* ---- DEFINITION ROWS ---- */ .detail-rows { margin-top: 36px; } .detail-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border); } .detail-row:last-child { border-bottom: none; } .detail-row dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); } .detail-row dd { font-size: 0.97rem; color: var(--mid); line-height: 1.7; } /* ---- CALLOUT ---- */ .callout { border-left: 3px solid var(--gold); background: var(--white); padding: 26px 30px; margin-top: 36px; } .callout p { font-size: 0.97rem; color: var(--mid); line-height: 1.8; } .callout.on-dark { background: rgba(255,255,255,0.04); } .callout.on-dark p { color: var(--mist); } /* ---- RESPONSIVE ---- */ @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .industry-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: 1fr 1fr; } .channel-grid { grid-template-columns: 1fr 1fr; } .reason-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .division-grid { grid-template-columns: 1fr; } .structure-list { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } .detail-row { grid-template-columns: 1fr; gap: 4px; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; } .industry-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .channel-grid { grid-template-columns: 1fr; } .reason-grid { grid-template-columns: 1fr; } .division-card { padding: 36px 26px 32px; } .structure-parent { padding: 32px 26px; } }