/* Custom Styles*/ :root { --teal: #008080; --teal-light: #b2d8d8; --teal-dark: #006666; --teal-bg: #c9e7e7; --teal-bg-dark: #B2DFDB; --gray-bg: #e9e9e9; /* contact/card defaults to avoid broken production when variables are missing */ /* --card-width: 720px; --card-height: auto; */ --gap: 24px; --icon-size: 28px; --dark: #222222; --muted: #6c757d; /* approximate fixed navbar height; adjust if your header is taller */ --navbar-height: 70px; } .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } .divider { --bs-gutter-x:0;/*overwrite default row gutter to prevent really thick divider*/ height: 3rem; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); border-width: 1px 0; box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); } .b-example-vr { flex-shrink: 0; width: 1.5rem; height: 100vh; } .bi { vertical-align: -.125em; fill: currentColor; } .nav-scroller { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; } .nav-scroller .nav { display: flex; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; } .navbar { display: flex; align-items: center; /* Aligns the logo and menu items vertically */ justify-content: space-between; /* Ensures space between the logo and menu items */ background-color: white !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 1100; /* ensure navbar stays above hero overlays */ } .navbar-brand { display: flex; align-items: center; /* Ensures the logo and text (if any) are vertically aligned */ gap: 10px; font-size: 2rem; font-weight: bold; color: white !important; } .navbar-collapse { display: flex; justify-content: flex-end; /* Aligns the menu items to the right */ } .navbar-nav { display: flex; gap: 20px; /* Adds spacing between menu items */ align-items: center; /* Ensures menu items are vertically aligned */ margin-top:65px; } .company-name { font-size: 1.2rem; color: white; font-weight: normal; } .nav-link { color: #006666; font-weight: 500; } .nav-link:hover { color: var(--teal-light) !important; } .navbar-brand img { width: 290px; height: auto; margin-bottom:15px; } .orange{ color:#f2af47; } .cta-orange{ color:#0b3a3a; background-color: #f2af47; border-color:#00b3b3; } .cta-orange:hover, .cta-orange:focus { background-color: #008080; color: #fff; border-color: #f2af47; } .tagline{ color:white; } .tagline-container{ text-align:right; padding-top:12px; padding-bottom: 25px; } .desktop-secondary-tagline { display:block; margin-top:88px; text-align: left; padding-left:77px; } .white-tagline{ color: white; /* Text fill color */ -webkit-text-stroke: .5px #f2af47; /* Stroke width and color */ font-size:3.5em; padding-bottom: 20px; } .example-projects{ color: var(--teal); font-weight: bold; } /* Content spacing: default (homepage) uses a modest top gap to avoid large white space between sections. Subpages opt into a larger visual gap on desktop by adding `subpage` to the (body.subpage). Media queries for subpages still rely on the navbar height for reliable clearance on smaller screens. */ /* Default (homepage): small fixed gap so the hero and sections feel connected */ main > section { margin-top: 1.5rem; } /* Subpages: larger desktop margin (keeps historical 8% visual balance on wide screens) */ body.subpage main > section { margin-top: 8%; } /* Anchor/scrolling: ensure native jumps land content below the fixed header */ html { scroll-padding-top: calc(var(--navbar-height) + 8px); } /* Tablet and below: use the actual navbar height plus a small buffer (subpages) */ @media (max-width: 991.98px) { body.subpage main > section { margin-top: calc(var(--navbar-height) + 2rem); } } /* Mobile narrow screens: slightly smaller buffer but still account for stacked nav (subpages) */ @media (max-width: 575.98px) { body.subpage main > section { margin-top: calc(var(--navbar-height) + 1.5rem); } } .hero-section { /*background-image: url('../img/topographic-map.jpg');*/ background-color:#0b3a3a; background-size: cover; /* Ensures the image covers the entire section */ background-position: center; /* Centers the image */ background-repeat: no-repeat; /* Prevents the image from repeating */ padding: 160px 0 40px; /* Increase top padding, reduce bottom padding */ position: relative; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18); /* Slightly stronger shadow to add depth */ margin-top: 0; /* remove gap so hero sits directly below header */ } /* On mobile, reduce hero section height but ensure content clears navbar */ @media (max-width: 767.98px) { .hero-section { max-height: 400px; } } /* subtle drop shadow under the Hero section to match Services (no layout changes) */ .hero-section { position: relative; z-index: 1; } .hero-section::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 18px; pointer-events: none; /*background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.00));*/ filter: blur(4px); } /* Reduce space between hero and first section */ .hero-section + .section { margin-top: -40px; /* Pull the first section closer to the hero */ } /* On mobile and tablet, remove the negative margin to prevent green background overlap */ @media (max-width: 991.98px) { .hero-section + .section { margin-top: 0; } } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*background: rgba(255, 255, 255, 0.88); /* Add a 50% transparent white overlay */ z-index: 1; } /* Layout: reserve space for the fixed header and enable sticky footer */ html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--navbar-height); } /* Allow main content to grow so footer is pushed to the bottom on short pages */ main { flex: 1 0 auto; } /* subtle overlay for services section to improve text contrast over background image */ /* #services.bg-light::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.2); pointer-events: none; } */ .hero-section > * { position: relative; z-index: 2; /* Ensure content is above the overlay */ } .section { padding: 80px 0; } .bg-light { background-color: #FFFCF7 !important ; } /* visual styles shared by all cards (keep lightweight and non-layout-affecting) */ /* .card { border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } */ /* card container - centered */ /* .card { width: min(var(--card-width), 95vw); height: var(--card-height); display:flex; background: white; box-sizing: border-box; padding: 36px 40px; gap: var(--gap); align-items: stretch; } */ .industry-bg { width: 100%; height: 180px; background-size: cover; background-position: center; border-radius: .5rem; margin-bottom: .75rem; } @media (min-width: 992px) { .industry-bg { height: 220px; } } .industry-img, .industry-bg { height: 220px; object-fit: cover; border-top-left-radius: .5rem; border-top-right-radius: .5rem; transition: transform 0.3s ease, filter 0.3s ease; background-size: cover; background-position: center; } /* Ensure headings on cards are high contrast without changing spacing */ .card .card-title { color: #0b3a3a; /* dark teal/near-black for strong contrast */ } @media (min-width: 992px) { .industry-img, .industry-bg { height: 260px; } } .industry-list { list-style-type: disc; padding-left: 1.5rem; margin-top: 1rem; text-align: left; display: inline-block;; } .industry-list li { margin-bottom: 0.5rem; color: #666; } .about-section { background-image: url("../img/adirondack-mountains.jpg"); background-size: cover; background-position: center; padding: 100px 0; position: relative; display: flex; align-items: center; justify-content: center; } .about-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); } .about-content { position: relative; z-index: 1; max-width: 600px; width: 100%; margin: 0 auto; } /* Homepage only: tighten gap between About and Contact sections so they feel connected without changing subpage spacing. Use :not(.subpage) so subpages keep their spacing. */ body:not(.subpage) .about-section { padding-bottom: 100px; } body:not(.subpage) .contact-section { padding-top: 100px; } .about-button{ margin-left:25px; margin-right:25px; } .contact-section { background-color: var(--teal-bg-dark); padding: 100px 0; display: flex; justify-content: center; align-items: center; margin-top:0; padding-top:100px; } .contact-card { background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* max-width: 800px; width: 100%; */ padding: 20px; } .contact-card h2 { color: var(--teal-dark); margin-bottom: 20px; } .contact-card h4 { color: var(--teal); margin-bottom: 10px; } .contact-card p { color: #666; margin-bottom: 10px; } .contact-card a { color: var(--teal-dark); text-decoration: none; font-weight: bold; } .contact-card a:hover { text-decoration: underline; } .footer { background-color: var(--teal-dark); color: white; } /* Ensure footer stays at the bottom on short pages */ .footer { margin-top: auto; } /* Ensure footer links have sufficient contrast against the dark background */ .footer a, .footer a:visited { color: #ffffff; /* white: high contrast against var(--teal-dark) */ } .footer a:hover, .footer a:focus { color: var(--teal-light); text-decoration: underline; } /* subtle drop shadow under the Services section to add visual depth without changing layout */ #services { position: relative; z-index: 1; /* keep above any background overlays */ } #services::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; /* sits visually below the section without affecting flow */ height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.035), rgba(0,0,0,0.00)); filter: blur(3px); } /* Improve typography for headers */ h1{ font-family:'Arial', sans-serif; /* Use a clean, modern font */ color: var(--teal-dark); /* Use a consistent color for headers */ line-height: 1.3; /* Improve readability with better line spacing */ font-size: 3rem; /* Larger size for main headers */ letter-spacing: -0.6px; } /* Use h3 for card and contact titles but keep the visual size small to preserve layout heights */ h2 { font-size: 2.5rem; color: var(--teal); line-height:1; letter-spacing: -0.6px; } h3 { font-size: 1.25rem; margin-top: .4rem; margin-bottom: .4rem; } h4, h5, h6 { font-size: 1.5rem; } /* Service cards */ .service-card { border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Match the shadow style of other cards */ transition: transform 0.3s, box-shadow 0.3s; } .service-card:hover { transform: translateY(-5px); /* Add a hover effect */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Visual-only utilities for services (no layout changes here) */ .service-icon { font-size: 3.25rem; line-height: 1; display: inline-block; } .service-title { font-size: 1.125rem; letter-spacing: -0.2px; } .service-card-visual { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95)); border-radius: .5rem; padding: 1rem; } .text-teal { color: var(--teal) !important; } .service-caption { color: var(--muted); } .btn-teal { border-color: var(--teal); color: var(--teal); } .btn-teal:hover, .btn-teal:focus { background-color: var(--teal); color: #fff; border-color: var(--teal); } /* Horizontal expand behavior: on md+ screens an expanded column grows and siblings shrink This uses flex-basis changes to push adjacent items; no JS transforms used. */ @media (min-width: 768px) { .services-row .col { transition: flex-basis 360ms ease, max-width 360ms ease; } .services-row .col.expanded { flex: 0 0 66.666667%; max-width: 66.666667%; z-index: 2; } .services-row .col.shrink { flex: 0 0 16.666667%; max-width: 16.666667%; opacity: 0.95; } } /* Keep expanded tile visually in the top row by moving its flex order to the front */ .services-row .col.expanded { order: -1; } /* Toggle button open state (shows X visually using color change) */ .svc-toggle.open { background-color: var(--teal); color: #fff; border-color: var(--teal); padding: 0.25rem 0.5rem; } /* Animated reveal for long service descriptions (smooth vertical reveal) */ .service-long { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease; } .services-row .col.expanded .service-long { max-height: 900px; opacity: 1; transition: max-height 480ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease; } /* Services tagline */ #services .lead { font-size: 1.25rem; /* Make the tagline more prominent */ font-weight: 500; /* Slightly bold for emphasis */ } .services-tagline { font-size: 1.5rem; /* Make the tagline more prominent */ margin-top: -10px; /* Reduce space between the header and tagline */ } .splitter{ font-weight: bold; color:#006666; } /* Accessibility helpers */ .skip-link { position: absolute; top: -40px; left: 0; background: #006666; color: white; padding: 8px 12px; z-index: 1000; transition: top 0.2s ease-in-out; } .skip-link:focus { top: 0; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* Improve focus visibility for keyboard users */ a:focus, button:focus, input:focus { outline: 3px solid #00b3b3; outline-offset: 2px; } /* Make keyboard focus inside a card visible by styling the card when it contains focused controls */ .card:focus-within { outline: 3px solid #00b3b3; outline-offset: 2px; } /* card container - centered */ .center-card { background: white; } .contact-card { width: min(var(--card-width), 95vw); height: var(--card-height); display:flex; background: white; box-sizing: border-box; padding: 36px 40px; gap: var(--gap); align-items: stretch; } /* left name column */ .left { display:flex; flex-direction:column; justify-content:center; gap: 6px; flex: 1.1; min-width: 220px; } .firstname { color: var(--teal); font-weight: 700; font-size: 40px; line-height:1; letter-spacing: -0.6px; } .lastname { color: var(--dark); font-weight: 600; font-size: 36px; margin-top:2px; line-height:1; } .title { color: var(--muted); font-weight: 400; font-size: 14px; margin-top: 10px; } /* vertical divider */ .divider { width:1px; background: linear-gradient(180deg, var(--teal) 0%, var(--teal) 100%); margin-left: 6px; margin-right: 8px; align-self: stretch; } /* right contact column */ .right { display:flex; flex-direction:column; justify-content:center; gap: 12px; padding-left: 18px; flex: 0 0 340px; } .contact-row { display:flex; gap: 14px; align-items:center; font-size: 16px; color: var(--dark); } .contact-text { color: var(--dark); font-size: 16px; line-height:1.2; word-break: break-word; } .contact-subtle { color: var(--muted); font-size: 15px; } /* icon box for the LinkedIn-like square */ .icon { width: var(--icon-size); height: var(--icon-size); display:inline-flex; align-items:center; justify-content:center; } /* linkedIn square */ .lnk-square { width: 26px; height: 26px; border-radius:4px; background: var(--teal); display:inline-flex; align-items:center; justify-content:center; } .lnk-square svg { width:14px; height:14px; fill: #fff; } /* small responsive tweaks */ @media (max-width:700px){ /* mobile tweaks only for the contact card */ #contact .card{ padding:20px; flex-direction:column; height:auto; gap:20px; } .divider{ display:block; width:100%; height:1px; margin:8px 0; background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); align-self: auto; } .right{ flex-basis: auto; padding-left:0; } .firstname{ font-size:34px } .lastname{ font-size:30px } } /* Ensure contact anchors inherit text styles and show as links */ .contact-text a, .contact-text { color: var(--dark); text-decoration: none; } .contact-text:hover, .contact-text:focus { text-decoration: underline; } /* Desktop layout: ensure the card is row-oriented with a visible vertical divider */ @media (min-width:701px){ .contact-section .card { flex-direction: row; } .contact-section .divider { display:block; width:1px; height:auto; margin: 0 12px; } } .svg-teal{ fill: var(--teal); } /* Ensure hero taglines keep their icons inline and add right padding on small screens - Keep icon aligned with the text using inline-flex so the icon never wraps to the next line - Add modest right padding so the icon doesn't butt up against the viewport edge on very small screens - Slightly reduce font-size on narrow viewports to improve fit */ @media (max-width: 767.98px) { .tagline-container { margin-top:5vh; } .tagline { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; /* prefer keeping text+icon together */ padding-right: 0.75rem; /* breathing room on the right */ font-size: 2.2rem; /* slightly smaller on narrow tablets/large phones */ line-height: 1; } .tagline i.bi { flex: 0 0 auto; font-size: 1.05em; vertical-align: middle; margin-left: 0.25rem; } /* On narrow viewports, hide the white callout (we don't show "Bright Days Ahead" on mobile) */ .white-tagline { display: none !important; } /* On tablets, center the tagline (not right-aligned) */ .tagline-container { text-align: center; } .tagline { justify-content: center; } } @media (max-width: 575.98px) { .tagline-container { text-align: center; } .tagline { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; padding-right: 1rem; /* extra right padding on the smallest screens */ font-size: 1.8rem; /* reduce the headline size for very small screens */ line-height: 1; } .tagline i.bi { flex: 0 0 auto; font-size: 1.1em; margin-left: 0.25rem; } } /* On tablets (768px-991px): hide callout and center the checklist */ @media (min-width: 768px) and (max-width: 991.98px) { .hero-section .row { align-items: center; } .hero-section .tagline-container { display: flex; flex-direction: column; justify-content: center; text-align: center; padding-left: 0; } .tagline { justify-content: center; } .desktop-secondary-tagline { display: none !important; } .white-tagline { display: none !important; } } /* On desktop+ (992px+): show callout and right-align the checklist */ @media (min-width: 992px) { .hero-section .row { align-items: center; } .hero-section .tagline-container { display: flex; flex-direction: column; justify-content: center; text-align: right; padding-left: 25px; } .tagline { justify-content: flex-end; } .desktop-secondary-tagline { display: block; } /* ensure the callout sits on the same baseline as the taglines */ .white-tagline { display: inline-block; margin: 0; vertical-align: middle; } } /*pages*/ .free-consultation-content{ padding-top:35px; }