/* ================================================================== ERG PARTNERS -- STYLESHEET ------------------------------------------------------------------ HOW THIS FILE IS ORGANIZED (search for these ALL-CAPS headers): 1. FONT SETTINGS - change typefaces here 2. COLOR SETTINGS - change the color palette here 3. BASE / RESET 4. LAYOUT HELPERS - the two-column <-> single-column system 5. NAVIGATION BAR 6. HERO HEADER 7. CARD GRID (What We Do) 8. LEADERSHIP 9. CONTACT FORM 10. FOOTER 11. RESPONSIVE BREAKPOINTS ================================================================== */ /* ------------------------------------------------------------------ 1. FONT SETTINGS Both fonts are loaded from Google Fonts in index.html . Headings use a light, wide-letter-spaced look; body text uses a softer, easy-to-read font. To change fonts sitewide: a) Pick new fonts at https://fonts.google.com b) Replace the in index.html with the new embed code c) Update the two variables below to match the new font names ------------------------------------------------------------------ */ :root { --font-heading: 'Raleway', Arial, Helvetica, sans-serif; --font-body: 'Nunito Sans', Arial, Helvetica, sans-serif; /* ---------------------------------------------------------------- 2. COLOR SETTINGS Change these hex values to re-color the entire site. ---------------------------------------------------------------- */ --color-navy: #1c3a5e; /* primary text, headings */ --color-navy-deep: #10263f; /* footer, dark backgrounds, buttons */ --color-slate: #52708c; /* secondary / muted text */ --color-accent: #b08d57; /* gold accent: underlines, highlights */ --color-bg: #ffffff; /* page background */ --color-bg-alt: #f6f8fa; /* alternate section background */ --color-border: #e2e8ee; --max-width: 1180px; --gap: 48px; } /* ------------------------------------------------------------------ 3. BASE / RESET ------------------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; color: var(--color-navy); background: var(--color-bg); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 300; color: var(--color-navy); text-transform: uppercase; letter-spacing: 2px; line-height: 1.3; } h2 { font-size: 1.9rem; margin-bottom: 20px; } h3 { font-size: 1.15rem; letter-spacing: 1.5px; margin-bottom: 12px; } p { margin-bottom: 16px; color: var(--color-slate); } a { color: var(--color-navy); text-decoration: none; } .eyebrow { display: inline-block; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; font-weight: 600; } address { font-style: normal; color: var(--color-slate); margin-bottom: 16px; } /* Buttons */ .btn { display: inline-block; padding: 14px 32px; font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: all 0.25s ease; } .btn-primary { background: var(--color-navy); color: #fff; border-color: var(--color-navy); } .btn-primary:hover { background: var(--color-navy-deep); border-color: var(--color-navy-deep); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.8); } .btn-outline-light:hover { background: #fff; color: var(--color-navy); } .check-list { list-style: none; margin: 16px 0 24px; } .check-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--color-slate); } .check-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; } /* ------------------------------------------------------------------ 4. LAYOUT HELPERS ".two-col" is the default two-column layout used across the page (About Us, Expertise rows, Contact). On screens narrower than 860px it automatically reflows to a single column -- see the RESPONSIVE section at the bottom of this file. ------------------------------------------------------------------ */ .section { max-width: var(--max-width); margin: 0 auto; padding: 100px 24px; } .section-alt { background: var(--color-bg-alt); max-width: 100%; } .section-alt > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; } .section-alt .section-intro, .section-alt .card-grid { max-width: var(--max-width); margin: 0 auto; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; } .two-col.reverse .col-image { order: 2; } .two-col.reverse .col-text { order: 1; } .col-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } .section-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; } .section-intro p { font-size: 1.05rem; } .expertise-row { margin-bottom: 90px; } .expertise-row:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ 5. NAVIGATION BAR ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--color-border); } .navbar { max-width: var(--max-width); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; } .logo { height: 22px; width: auto; } .nav-links { list-style: none; display: flex; gap: 36px; align-items: center; } .nav-links a { font-family: var(--font-heading); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-navy); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .nav-links a:hover { border-color: var(--color-accent); color: var(--color-accent); } .nav-cta { border: 1px solid var(--color-navy) !important; padding: 8px 18px !important; border-radius: 2px; } .nav-cta:hover { background: var(--color-navy); color: #fff !important; border-color: var(--color-navy) !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: var(--color-navy); } /* ------------------------------------------------------------------ 6. HERO HEADER Background image with a dark overlay so the white title text stays readable over any photo. Swap the photo by changing the image referenced in index.html (search "hero-brooklyn-bridge"). ------------------------------------------------------------------ */ .hero { position: relative; height: 88vh; min-height: 520px; background-image: url('images/hero-brooklyn-bridge.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,38,63,0.3) 0%, rgba(16,38,63,0.15) 50%, rgba(16,38,63,0.4) 100%); } .hero-content { position: relative; z-index: 2; color: #fff; padding: 0 24px; } .hero-content h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 200; letter-spacing: 6px; margin-bottom: 16px; } .hero-tagline { color: #fff; font-family: var(--font-heading); font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: 1px; font-weight: 300; margin-bottom: 36px; opacity: 0.95; } /* ------------------------------------------------------------------ 7. CARD GRID (What We Do) Default: 2 columns x 2 rows. Reflows to 1 column on mobile. ------------------------------------------------------------------ */ .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px var(--gap); } .card img { width: 100%; height: 220px; object-fit: cover; border-radius: 2px; margin-bottom: 24px; } .card h3 { text-align: left; } .card-highlight { color: var(--color-navy); font-size: 0.95rem; padding-top: 6px; border-top: 1px solid var(--color-border); } .card-highlight strong { color: var(--color-accent); } /* ------------------------------------------------------------------ 8. LEADERSHIP No photo -- title uses the same .section-intro styling as every other section, on the same light gray background as the two bios below it (matches the "What We Do" section's treatment). Padding-top is tightened (less empty space after Expertise) and the intro's bottom margin is widened (more separation before the bios) -- both scoped to #leadership only, other sections keep the default .section spacing. ------------------------------------------------------------------ */ #leadership { padding-top: 40px; } #leadership .section-intro { margin-bottom: 100px; } .leadership-grid { align-items: start; } .leadership-card h3 { margin-bottom: 4px; } .leadership-card .role { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); font-weight: 600; margin-bottom: 16px; } /* ------------------------------------------------------------------ 9. CONTACT FORM ------------------------------------------------------------------ */ .contact-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form input, .contact-form textarea { width: 100%; padding: 14px; font-family: var(--font-body); font-size: 0.95rem; border: none; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-navy); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--color-accent); } .contact-form textarea { resize: vertical; } .contact-form .btn { align-self: flex-start; } .social-link { display: inline-block; font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--color-navy); padding-bottom: 3px; } /* ------------------------------------------------------------------ 10. FOOTER ------------------------------------------------------------------ */ .site-footer { background: var(--color-navy-deep); color: rgba(255,255,255,0.75); text-align: center; padding: 56px 24px 32px; } .footer-logo { height: 20px; margin: 0 auto 24px; } .site-footer p { color: rgba(255,255,255,0.7); font-size: 0.85rem; max-width: 640px; margin: 0 auto 8px; } .footer-copy { font-size: 0.78rem; opacity: 0.7; margin-top: 16px; } /* ================================================================== 11. RESPONSIVE BREAKPOINTS This is where the two-column layout reflows into a single column for tablets and phones. Adjust the 860px value if you want the layout to switch at a different screen width. ================================================================== */ @media (max-width: 860px) { .two-col, .card-grid { grid-template-columns: 1fr; } .two-col.reverse .col-image, .two-col.reverse .col-text { order: initial; } .col-image img { height: 320px; } .nav-toggle { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 0 24px; max-height: 0; overflow: hidden; gap: 0; border-bottom: 1px solid var(--color-border); transition: max-height 0.3s ease; } .nav-links.open { max-height: 320px; padding: 12px 24px 24px; } .nav-links li { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .nav-links li:last-child { border-bottom: none; } .section { padding: 70px 24px; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-content h1 { letter-spacing: 3px; } }