:root { /* Single dominant color taken from the logo, plus warm neutrals */ --navy: #383b63; --navy-deep: #2a2c49; --navy-ink: #23253f; --silver: #8e90a0; --ink: #2b2c38; --body: #4c4d59; --muted: #8a8a93; --cream: #f7f5ef; --cream-soft: #efece3; --line: #ddd9cd; --radius: 4px; --shadow: 0 14px 40px rgba(35, 37, 63, 0.10); --max: 1120px; /* The header is sticky, so the logo starts large and compacts once the page scrolls. Expanded, it grows with the viewport up to 110px but never past the room left beside the inline nav — 4.43 is the logo's aspect ratio, so this is a width budget expressed as a height. The cap is set by --max (1120px) rather than the viewport, since the container stops growing there. --anchor-offset tracks the COMPACT height, because a jump to an anchor always lands with the header already compacted. */ --logo-fit: calc((100vw - 672px) / 4.43); --logo-h: clamp(52px, var(--logo-fit), 100px); --header-pad: 34px; --header-h: calc(var(--logo-h) + var(--header-pad)); --anchor-offset: 106px; --sans: "Open Sans", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Keep anchored section titles clear of the sticky header */ section[id], #top { scroll-margin-top: var(--anchor-offset); } /* Visible keyboard focus (hidden for mouse users via :focus-visible) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; } .hero a:focus-visible, .section-dark a:focus-visible, .contact-form .btn:focus-visible, .site-footer a:focus-visible { outline-color: #e9e7dd; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .service-card:hover .service-img, .product:hover img { transform: none; } } body { font-family: var(--sans); color: var(--body); background: var(--cream); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 28px; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--sans); color: var(--ink); line-height: 1.25; font-weight: 600; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 239, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .28s ease; } .brand-logo { height: var(--logo-h); width: auto; display: block; transition: height .28s ease; } /* Compacted state, toggled on by main.js so the nav offset and the anchor offset resolve against it too. */ /* Compacting tightens the padding harder than the logo, so the header still gives back real height without the mark shrinking to a token. The compact size tracks the same width budget, so the gap between the two states stays proportional instead of collapsing on narrow desktops. */ :root.is-scrolled { --logo-h: clamp(48px, calc(var(--logo-fit) * .72), 72px); --header-pad: 22px; } .nav { display: flex; align-items: center; gap: 6px; } .nav a { padding: 9px 16px; font-size: 15px; letter-spacing: .5px; color: var(--navy); font-family: var(--sans); font-weight: 400; text-transform: uppercase; transition: color .2s; position: relative; } .nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .nav a:not(.nav-cta):hover::after { transform: scaleX(1); } .nav .nav-cta { border: 1px solid var(--navy); color: var(--navy); margin-left: 8px; transition: background .2s, color .2s; } .nav .nav-cta:hover { background: var(--navy); color: var(--cream); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--navy); transition: .3s; } /* ---------- Hero ---------- */ .hero { position: relative; color: #e9e7dd; background: var(--navy-deep); padding: 52px 0 56px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, transparent 55%, rgba(28,30,52,.85) 100%), linear-gradient(105deg, rgba(30,33,57,.96) 0%, rgba(30,33,57,.88) 48%, rgba(30,33,57,.70) 100%), url("images/hero.jpg"); background-size: cover; background-position: center; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .06; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size: 52px 52px; } .hero-inner { position: relative; z-index: 1; } .hero-frame { border: 1px solid rgba(233, 231, 221, 0.28); padding: 40px clamp(24px, 4vw, 52px); max-width: 820px; } .eyebrow { display: inline-block; font-family: var(--sans); font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase; color: #c6c7d2; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(233,231,221,.25); } .hero h1 { color: #f4f2ea; font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: 1px; margin-bottom: 18px; } .hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: #ecebe3; max-width: 600px; margin-bottom: 26px; line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; } .btn { display: inline-block; padding: 13px 30px; font-family: var(--sans); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; border-radius: var(--radius); } .btn-primary { background: var(--cream); color: var(--navy-deep); } .btn-primary:hover { background: #fff; } .btn-ghost { background: transparent; color: #e9e7dd; border-color: rgba(233,231,221,.45); } .btn-ghost:hover { border-color: #e9e7dd; } .hero-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 56px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(233,231,221,.18); } .hero-stats div { display: flex; flex-direction: column; } .hero-stats strong { font-family: var(--sans); font-size: 2.2rem; color: #f4f2ea; font-weight: 500; } .hero-stats span { font-size: 16px; color: #d2d3dd; } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-alt { background: var(--cream-soft); } .section-tag { display: inline-block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .section-title { font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: .5px; margin-bottom: 26px; max-width: 760px; } .lead { font-size: 1.2rem; max-width: 780px; margin-bottom: 48px; } /* ---------- Cards ---------- */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 44px; } .info-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; position: relative; } .info-card::before { content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 2px; background: var(--navy); } .info-card h3 { font-size: 1.2rem; margin: 14px 0 14px; color: var(--navy); letter-spacing: .5px; } .info-card p { font-size: 1.02rem; } .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .service-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s, transform .25s; } .service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .service-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; } .service-card:hover .service-img { transform: scale(1.04); } .service-body { padding: 30px 36px 38px; } .service-card h3 { font-size: 1.35rem; margin-bottom: 16px; color: var(--navy); padding-bottom: 14px; border-bottom: 1px solid var(--line); letter-spacing: 1px; } .awards { background: var(--navy); color: #d9d8e2; border-radius: var(--radius); padding: 30px 34px; } .awards-title { font-family: var(--sans); color: #f4f2ea; font-size: 1.05rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; } /* The categories apply to every award below, so they sit above the list rather than inside any one entry. */ .awards-intro { color: #c8c7d3; max-width: 680px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(233,231,221,.2); } .award-list { list-style: none; display: flex; flex-direction: column; gap: 16px; } .award { display: flex; gap: 18px; align-items: baseline; } .award-icon { font-size: 20px; color: var(--silver); line-height: 1; } .award strong { display: block; font-family: var(--sans); color: #f4f2ea; font-size: 1.15rem; letter-spacing: .5px; } .award-note { display: block; color: #c8c7d3; font-size: .95rem; margin-top: 4px; } /* ---------- Products ---------- */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product { margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s, transform .25s; } .product:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .product img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; } .product:hover img { transform: scale(1.04); } .product figcaption { padding: 20px 22px; text-align: center; } .product h3 { font-size: 1.12rem; color: var(--navy); font-weight: 400; letter-spacing: .5px; } /* ---------- Contact ---------- */ .section-dark { background: var(--navy-deep); color: #cfcdc2; } .section-dark .section-title { color: #f4f2ea; } .section-dark .section-tag { color: var(--silver); border-color: rgba(233,231,221,.25); } .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } .contact-block h3 { color: #f4f2ea; font-size: 1.3rem; margin-bottom: 10px; letter-spacing: .5px; } .contact-block .muted { font-family: var(--sans); color: #aeafbc; font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: 2px; margin: 26px 0 8px; } .contact-block address { font-style: normal; color: #cfcdc2; font-size: 1.05rem; } .phones { color: #cfcdc2; margin-top: 8px; } .contact-email { margin-top: 26px; } .contact-email a { color: #f4f2ea; border-bottom: 1px solid var(--silver); padding-bottom: 2px; } .contact-form { background: var(--cream); border-radius: var(--radius); padding: 38px; } .form-intro { color: var(--body); margin-bottom: 22px; font-style: normal; font-size: 1.1rem; } .contact-form label { display: block; font-family: var(--sans); color: var(--navy); font-weight: 400; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; } .contact-form input, .contact-form textarea { width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--sans); font-size: 16px; color: var(--ink); background: #fff; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--navy); border-color: transparent; } .contact-form textarea { resize: vertical; } .contact-form .btn { width: 100%; margin-top: 6px; background: var(--navy); color: var(--cream); } .contact-form .btn:hover { background: var(--navy-deep); } .form-note { font-size: .9rem; color: var(--muted); font-style: normal; margin-top: 14px; text-align: center; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-ink); color: #a9a8b6; padding: 56px 0; } .footer-inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } /* The supplied file has a white background rather than transparency, so it sits on the dark footer as its own light plate. Sized by both axes so a stacked or a horizontal lockup fits without a rule change. */ .footer-logo { display: block; max-height: 132px; max-width: 260px; width: auto; height: auto; border-radius: var(--radius); } .footer-inner p { max-width: 580px; font-size: 1.05rem; font-style: normal; } .footer-inner .copy { color: #9a9aa9; font-size: .92rem; font-style: normal; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .cards-3, .cards-grid, .contact-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr 1fr; } } /* Tablet landscape: the full nav is on the row and already fills it, so the logo has to stay at its original height or the nav wraps to two lines. */ /* The inline nav already fills this row, so the logo cannot grow here and there is nothing to compact on scroll. */ @media (min-width: 821px) and (max-width: 1023px) { :root, :root.is-scrolled { --logo-h: 46px; --header-pad: 34px; --anchor-offset: 92px; } } @media (max-width: 820px) { /* No inline nav to compete with, so the width budget above does not apply and the logo can start large here too. */ :root { --logo-h: 72px; --header-pad: 34px; --anchor-offset: 92px; } :root.is-scrolled { --logo-h: 56px; --header-pad: 26px; } body { font-size: 18px; } .nav-toggle { display: flex; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--cream); border-bottom: 1px solid var(--line); padding: 14px 28px 22px; gap: 2px; transform: translateY(-150%); transition: transform .3s; box-shadow: var(--shadow); } .nav.open { transform: translateY(0); } .nav a { padding: 12px 4px; } .hero-stats { gap: 32px; } } /* Phone screens are short as well as narrow: tighten the hero so both calls to action stay above the fold on a 667px-tall viewport. */ @media (max-width: 600px) { .hero { padding: 28px 0 44px; } .hero-frame { padding: 26px 20px; } .eyebrow { margin-bottom: 12px; padding-bottom: 8px; } .hero h1 { font-size: 1.72rem; margin-bottom: 14px; } .hero-sub { font-size: 1rem; margin-bottom: 20px; line-height: 1.5; } .hero-actions { gap: 12px; } .btn { padding: 12px 22px; } } @media (max-width: 480px) { /* The logo is 4.4:1, so it cannot start any larger than this without crowding the menu button or pushing the hero buttons below the fold. */ :root { --logo-h: 48px; --header-pad: 34px; --anchor-offset: 82px; } :root.is-scrolled { --logo-h: 44px; --header-pad: 28px; } .products-grid { grid-template-columns: 1fr; } }