/* ========================================================================== AdiuvareGE — design tokens ========================================================================== */ /* Font loading moved to tags in each page's — a CSS @import here forced the browser to discover and fetch Space Grotesk only after this stylesheet had already loaded, so whichever heading rendered first (e.g. "For the future") could briefly show the fallback font before the web font swapped in, while headings further down the page had already caught up. Linking the font directly lets the browser fetch it in parallel with this stylesheet instead. */ :root{ /* brand */ --teal-900:#003d3d; --teal-800:#00504f; --teal-700:#006666; --teal-600:#009999; /* primary brand teal, pulled from logo */ --teal-400:#4db8b8; --teal-200:#a8dcdc; --teal-100:#e2f3f3; --green-500:#0fc785; /* accent, used sparingly */ /* neutrals */ --ink:#16201f; --grey-700:#4b5453; --grey-500:#767171; /* pulled from proposal doc */ --grey-300:#c8cdcc; --grey-150:#e7eae9; --grey-100:#f3f5f4; --white:#ffffff; /* type */ --font-head:'Space Grotesk', 'Segoe UI', sans-serif; --font-body:'IBM Plex Sans', 'Segoe UI', sans-serif; --font-mono:'IBM Plex Mono', ui-monospace, monospace; /* layout */ --maxw:1140px; --gutter:24px; --radius:2px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--teal-900); } h1{ font-size:clamp(2.1rem, 3.4vw, 3.1rem); font-weight:700; letter-spacing:-0.01em; } h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); } h3{ font-size:1.15rem; } p{ margin:0 0 1.1em; color:var(--grey-700); max-width:68ch; } a{ color:var(--teal-700); text-decoration:none; } a:hover{ color:var(--teal-600); } ul{ margin:0; padding:0; list-style:none; } img{ max-width:100%; display:block; } :focus-visible{ outline:2px solid var(--teal-600); outline-offset:3px; } .container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .eyebrow-line{ display:inline-block; width:40px; height:3px; background:var(--green-500); margin-bottom:14px; } .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:13px 26px; border-radius:var(--radius); border:1.5px solid var(--teal-600); color:var(--teal-700); background:transparent; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; } .btn:hover{ background:var(--teal-600); color:var(--white); } .btn-solid{ background:var(--teal-600); color:var(--white); } .btn-solid:hover{ background:var(--teal-800); border-color:var(--teal-800); color:var(--white); } .btn-on-dark{ border-color:var(--teal-200); color:var(--white); } .btn-on-dark:hover{ background:var(--white); color:var(--teal-800); } /* ---------------------------------------------------------------------- */ /* Header / nav */ /* ---------------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--grey-150); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; height:78px; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ height:38px; width:auto; } .brand-word{ font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--teal-800); letter-spacing:-.01em; } .main-nav ul{ display:flex; gap:2px; } .main-nav a{ display:block; padding:10px 14px; font-size:.94rem; font-weight:500; color:var(--grey-700); border-bottom:2px solid transparent; } .main-nav a:hover{ color:var(--teal-700); } .main-nav a[aria-current="page"]{ color:var(--teal-800); border-bottom-color:var(--green-500); font-weight:600; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{ display:block; width:24px; height:2px; background:var(--teal-800); margin:5px 0; } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero{ background:var(--teal-900); color:var(--white); overflow:hidden; position:relative; } .hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:76px; padding-bottom:76px; min-height:460px; } .hero h1{ color:var(--white); } .hero p.lede{ color:var(--teal-100); font-size:1.1rem; max-width:46ch; } .hero-actions{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; } .hero-art{ width:100%; height:auto; } .hero-art path, .hero-art polygon{ vector-effect:non-scaling-stroke; } .page-hero{ background:var(--teal-900); color:var(--white); padding:64px 0 46px; } .page-hero h1{ color:var(--white); margin-bottom:.3em; } .page-hero p{ color:var(--teal-100); max-width:60ch; margin:0; } /* ---------------------------------------------------------------------- */ /* Stat strip */ /* ---------------------------------------------------------------------- */ .stat-strip{ background:var(--teal-100); border-bottom:1px solid var(--grey-150); } .stat-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:34px; padding-bottom:34px; } .stat{ text-align:left; } .stat .num{ display:block; font-family:var(--font-mono); font-size:1.9rem; font-weight:500; color:var(--teal-800); } .stat .label{ font-size:.86rem; color:var(--grey-700); } /* ---------------------------------------------------------------------- */ /* Sections */ /* ---------------------------------------------------------------------- */ .section{ padding:72px 0; } .section-tight{ padding:52px 0; } .section-alt{ background:var(--grey-100); } .section-head{ max-width:62ch; margin-bottom:40px; } .two-col{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; } /* service / info cards */ .card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--grey-150); border:1px solid var(--grey-150); } .card-grid-2{ grid-template-columns:repeat(2, 1fr); } .card{ background:var(--white); padding:30px 28px; } .card h3{ color:var(--teal-800); margin-bottom:10px; } .card p{ margin-bottom:0; font-size:.96rem; } .card .mark{ width:30px; height:30px; margin-bottom:16px; } /* team */ .team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; } .team-card{ display:flex; gap:20px; } .avatar{ flex:none; width:78px; height:78px; border-radius:50%; background:linear-gradient(135deg,var(--teal-600),var(--teal-900)); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:600; font-size:1.4rem; overflow:hidden; } .avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; } .team-card h3{ margin-bottom:2px; } .team-role{ display:block; font-size:.86rem; color:var(--green-500); font-weight:600; margin-bottom:2px; } .team-email{ display:block; font-size:.82rem; margin-bottom:10px; } .team-email a{ color:var(--grey-500); } .team-email a:hover{ color:var(--teal-600); } .team-card p{ font-size:.94rem; } /* world map */ .world-map-wrap{ max-width:860px; margin:0 auto 32px; } .world-map-wrap img{ width:100%; height:auto; display:block; } .world-map-legend{ display:flex; justify-content:center; gap:24px; margin-top:12px; font-size:.82rem; color:var(--grey-500); } .world-map-legend span{ display:inline-flex; align-items:center; gap:8px; } .world-map-legend i{ width:12px; height:12px; border-radius:2px; display:inline-block; } .world-map-legend .swatch-worked{ background:var(--teal-600); } .world-map-legend .swatch-other{ background:var(--grey-300); } .world-map-legend .swatch-office{ background:#e8752c; border-radius:50%; } /* country chips */ .chip-row{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ font-family:var(--font-mono); font-size:.82rem; padding:7px 14px; border:1px solid var(--teal-200); color:var(--teal-800); background:var(--teal-100); } /* simple divider motif referencing bench/contour lines */ .bench-divider{ width:100%; height:34px; display:block; } /* outreach list */ .outreach-item{ border-top:1px solid var(--grey-150); padding:36px 0; display:grid; grid-template-columns:.4fr 1.6fr; gap:32px; } .outreach-item:last-child{ border-bottom:1px solid var(--grey-150); } .outreach-item h3{ margin-bottom:6px; } /* health & safety pillars */ .pillar-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px;} .pillar{ border-left:2px solid var(--green-500); padding-left:18px; } .pillar h3{ font-size:1.02rem; margin-bottom:6px; } .pillar p{ font-size:.94rem; margin-bottom:0; } /* contact */ .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; } .contact-detail{ margin-bottom:22px; } .contact-detail .k{ display:block; font-family:var(--font-mono); font-size:.78rem; color:var(--grey-500); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; } .contact-detail .v{ font-size:1.02rem; color:var(--ink); } .form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; } .form-row label{ font-size:.88rem; font-weight:600; color:var(--ink); } .form-row input, .form-row textarea{ font-family:var(--font-body); font-size:.98rem; padding:12px 14px; border:1.5px solid var(--grey-300); border-radius:var(--radius); background:var(--white); color:var(--ink); } .form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--teal-600); } .form-note{ font-size:.82rem; color:var(--grey-500); margin-top:14px; } .form-note-success{ color:var(--teal-600); font-weight:500; } .form-note-error{ color:#b3261e; font-weight:500; } /* clients & partners rolling banner */ .clients-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); } .clients-track{ display:flex; align-items:center; gap:56px; width:max-content; animation:clients-scroll 42s linear infinite; } .clients-marquee:hover .clients-track, .clients-track:focus-within{ animation-play-state:paused; } @keyframes clients-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .client-logo{ flex:0 0 auto; width:168px; height:64px; display:flex; align-items:center; justify-content:center; padding:6px; } .client-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:grayscale(38%); opacity:.82; transition:filter .2s ease, opacity .2s ease, transform .2s ease; } .client-logo:hover img{ filter:grayscale(0%); opacity:1; transform:translateY(-2px); } .client-logo--dark{ background:var(--teal-900); border-radius:8px; } .client-logo--text{ border:1px solid var(--grey-300); border-radius:8px; color:var(--grey-500); font-family:var(--font-head); font-size:.86rem; font-weight:600; text-align:center; line-height:1.25; padding:8px 10px; filter:none; opacity:1; transition:border-color .2s ease, color .2s ease; } .client-logo--text:hover{ border-color:var(--teal-600); color:var(--teal-700); } @media (prefers-reduced-motion: reduce){ .clients-track{ animation:none; } } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .site-footer{ background:var(--teal-900); color:var(--teal-100); padding:56px 0 28px; } .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--teal-700); } .footer-brand img{ height:34px; width:auto; margin-bottom:14px; } .footer-brand p{ color:var(--teal-200); font-size:.92rem; max-width:32ch; } .site-footer h4{ color:var(--white); font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; } .site-footer a{ color:var(--teal-100); } .site-footer a:hover{ color:var(--white); } .footer-list li{ margin-bottom:10px; font-size:.92rem; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:.82rem; color:var(--teal-400); flex-wrap:wrap; gap:10px; } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width: 860px){ .main-nav{ position:fixed; inset:78px 0 0 0; background:var(--white); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; border-top:1px solid var(--grey-150); overflow-y:auto; } .main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; } .main-nav ul{ flex-direction:column; padding:10px var(--gutter) 30px; } .main-nav a{ padding:14px 4px; border-bottom:1px solid var(--grey-150); } .nav-toggle{ display:block; } .hero .container{ grid-template-columns:1fr; padding-top:52px; padding-bottom:44px; } .hero-art{ max-width:280px; } .stat-strip .container{ grid-template-columns:repeat(2,1fr); row-gap:22px; } .two-col{ grid-template-columns:1fr; } .card-grid, .card-grid-2{ grid-template-columns:1fr; } .team-grid{ grid-template-columns:1fr; } .outreach-item{ grid-template-columns:1fr; gap:10px; } .pillar-list{ grid-template-columns:1fr; } .contact-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:28px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .main-nav{ transition:none; } }