/* ==========================================================================
styles.css — Crewman static site
Design tokens and layout are matched against real screenshots of the
live site (see MIGRATION-AUDIT.md). Sharp corners, condensed bold
wordmark, solid-colour hero block, full-colour client logos.
Table of contents:
1. Custom properties (design tokens)
2. Base / typography
3. Layout helpers
4. Buttons & links
5. Skip link & focus states
6. Site header & navigation
7. Mobile navigation
8. Hero
9. Section components (about, why, services, team, clients, gallery)
10. Enquiry / email CTA
11. Footer
12. Lightbox
13. 404 page
========================================================================== */
/* 1. Custom properties
========================================================================== */
:root {
/* Colour palette — matched from live screenshots */
--color-bg: #ffffff;
--color-bg-alt: #ebebeb;
--color-text: #1c1c1c;
--color-text-muted: #4a4a4a;
--color-heading: #101010;
--color-primary: #000000;
--color-primary-contrast: #ffffff;
--color-border: #101010;
--color-border-soft: #cfcfcf;
--color-hero-bg: #6d6d6d;
--color-header-bg: #ececec;
--color-footer-bg: #000000;
--color-footer-text: #ffffff;
--color-focus: #2c6fd6;
/* Typography */
--font-base: "Helvetica Neue", Arial, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
--font-condensed: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", var(--font-base);
/* No licensed match for the real "crewman" wordmark's custom
geometric logotype was identified (see README.md §9) — Michroma
(Google Fonts) is used as a bold, blocky approximation for the
nav brand text and hero title only, not body copy or other
headings. Loaded via in ; falls back to the
condensed stack if it can't load (e.g. offline). */
--font-logo: "Michroma", var(--font-condensed);
--fs-base: 0.95rem;
--fs-sm: 0.8rem;
--fs-lg: 1.125rem;
--fs-h1: clamp(1.75rem, 3.5vw, 2.5rem);
--fs-hero: clamp(2.5rem, 8vw, 4.5rem);
--fs-h2: clamp(1.3rem, 2.5vw, 1.6rem);
--fs-h3: clamp(1.05rem, 2vw, 1.2rem);
--lh-heading: 1.2;
--lh-body: 1.65;
/* Spacing scale */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2rem;
--space-6: 3rem;
--space-7: 4.5rem;
--space-8: 6rem;
/* Layout */
--container-width: 1180px;
--container-pad: clamp(1.25rem, 4vw, 3rem);
--header-height: 72px;
--radius: 0px;
--transition: 180ms ease;
}
/* Smooth scrolling for in-page anchor links (About Us dropdown
children, homepage #contact). scroll-margin-top on the anchored
sections themselves stops the sticky header from covering the top
of the section when the browser jumps to it. */
html {
scroll-behavior: smooth;
}
#approach,
#team,
#clients,
#contact {
scroll-margin-top: calc(var(--header-height) + var(--space-3));
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* 2. Base / typography
========================================================================== */
body {
display: flex;
flex-direction: column;
/* dvh where supported (correct on mobile browsers with a
collapsing address bar), falling back to vh. */
min-height: 100vh;
min-height: 100dvh;
font-family: var(--font-base);
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--color-text);
background: var(--color-bg);
/* All text centred, site-wide, per explicit request — text-align
inherits, so this covers every paragraph/heading/list unless a
more specific rule overrides it (none currently do; the two
inline text-align:left overrides that used to exist have been
removed, and .stat-list's own override was changed to center). */
text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-base);
color: var(--color-heading);
line-height: var(--lh-heading);
}
h1 {
font-size: var(--fs-h1);
font-weight: 700;
}
h2 {
font-size: var(--fs-h2);
font-weight: 700;
}
h3 {
font-size: var(--fs-h3);
font-weight: 700;
}
h4 {
font-size: 1.05rem;
font-weight: 700;
}
h5 {
font-size: 1rem;
font-weight: 700;
}
p {
margin-bottom: var(--space-3);
color: var(--color-text);
font-size: var(--fs-sm);
}
p:last-child {
margin-bottom: 0;
}
main {
display: block;
/* Sticky-footer pattern: main grows to fill any leftover vertical
space on short pages (e.g. the shorter service detail pages), so
the footer always sits at the bottom of the viewport instead of
leaving a gap of plain body background below it. */
flex: 1 0 auto;
}
/* Small underline accent used beneath card/section headings site-wide */
.rule {
display: block;
width: 32px;
height: 2px;
margin-top: var(--space-2);
margin-bottom: var(--space-3);
background: var(--color-border);
}
.rule--center {
margin-inline: auto;
}
/* 3. Layout helpers
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
padding-block: var(--space-6);
}
.section--alt {
background: var(--color-bg-alt);
}
.section--tight {
padding-block: var(--space-6);
}
.section__intro {
max-width: 760px;
margin-bottom: var(--space-5);
}
.text-center {
text-align: center;
}
.grid {
display: grid;
gap: var(--space-5);
}
.two-col {
display: grid;
gap: var(--space-6);
align-items: center;
grid-template-columns: 1fr;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Large top spacer used on inner pages before the title section begins,
matching the live site's blank gap under the header. */
.page-spacer {
height: clamp(90px, 14vw, 170px);
}
/* 4. Buttons & links
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.75em 1.75em;
font-size: var(--fs-sm);
font-weight: 700;
border: 2px solid var(--color-primary);
border-radius: var(--radius);
background: var(--color-primary);
color: var(--color-primary-contrast);
transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:hover,
.btn:focus-visible {
background: transparent;
color: var(--color-primary);
}
.btn--outline {
background: transparent;
color: var(--color-primary);
}
.btn--outline:hover,
.btn--outline:focus-visible {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-size: var(--fs-sm);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.arrow-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-text);
}
.arrow-link__glyph {
transition: transform var(--transition);
}
.arrow-link:hover .arrow-link__glyph,
.arrow-link:focus-visible .arrow-link__glyph {
transform: translateX(4px);
}
/* 5. Skip link & focus states
========================================================================== */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-3);
z-index: 1000;
padding: var(--space-2) var(--space-4);
background: var(--color-primary);
color: var(--color-primary-contrast);
transition: top var(--transition);
}
.skip-link:focus {
top: var(--space-3);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
/* 6. Site header & navigation
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: var(--color-header-bg);
border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-height);
gap: var(--space-4);
}
.site-logo {
/* The logo image is now the real Crewman lockup (mark + wordmark
baked into one PNG), not an icon plus separate text label, so
this is just a sizing wrapper — no font/text styling needed. */
display: flex;
align-items: center;
}
.site-logo img {
height: 46px;
width: auto;
}
.main-nav {
display: none;
}
.main-nav__list {
display: flex;
align-items: center;
gap: var(--space-5);
}
.main-nav__item {
position: relative;
}
.main-nav__link {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: var(--space-2) 0;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 2px solid transparent;
transition: border-color var(--transition);
}
.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__item.is-open > .main-nav__link,
.main-nav__link[aria-current="page"] {
border-bottom-color: var(--color-primary);
}
.main-nav__caret {
width: 0.55em;
height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--transition);
}
.main-nav__item.is-open .main-nav__caret {
transform: rotate(225deg);
}
.main-nav__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
padding: var(--space-2) 0;
margin-top: var(--space-3);
background: var(--color-bg);
border: 1px solid var(--color-border);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.main-nav__item.is-open .main-nav__dropdown,
.main-nav__item:hover .main-nav__dropdown,
.main-nav__item:focus-within .main-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav__dropdown-link {
display: block;
padding: var(--space-2) var(--space-4);
font-size: var(--fs-sm);
white-space: nowrap;
transition: background var(--transition);
}
.main-nav__dropdown-link:hover,
.main-nav__dropdown-link:focus-visible {
background: var(--color-bg-alt);
}
/* 7. Mobile navigation
========================================================================== */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
}
.nav-toggle__bar {
display: block;
width: 20px;
height: 2px;
background: var(--color-primary);
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
position: fixed;
inset: 0;
z-index: 600;
display: none;
background: var(--color-bg);
overflow-y: auto;
}
.mobile-nav.is-open {
display: block;
}
.mobile-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--header-height);
padding-inline: var(--container-pad);
border-bottom: 1px solid var(--color-border);
}
.mobile-nav__close {
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
font-size: 1.4rem;
line-height: 1;
}
.mobile-nav__list {
padding: var(--space-4) var(--container-pad) var(--space-8);
}
.mobile-nav__item {
border-bottom: 1px solid var(--color-border-soft);
}
.mobile-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) 0;
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mobile-nav__caret {
width: 0.6em;
height: 0.6em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--transition);
}
.mobile-nav__item.is-open .mobile-nav__caret {
transform: rotate(-135deg);
}
.mobile-nav__submenu {
display: none;
padding-bottom: var(--space-3);
}
.mobile-nav__item.is-open .mobile-nav__submenu {
display: block;
}
.mobile-nav__sublink {
display: block;
padding: var(--space-2) 0 var(--space-2) var(--space-3);
color: var(--color-text-muted);
}
/* 8. Hero
========================================================================== */
.hero {
position: relative;
display: flex;
align-items: center;
min-height: 60vh;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero .container {
position: relative;
z-index: 1;
width: 100%;
}
.hero__block {
background: rgba(63, 61, 58, 0.82);
color: var(--color-primary-contrast);
padding: var(--space-6) var(--space-5);
text-align: center;
}
/* The global `p { color }` rule below would otherwise override the
inherited white text color for any paragraphs placed inside a hero
block (e.g. the About Us intro copy on top of its background photo). */
.hero__block p {
color: var(--color-primary-contrast);
}
.hero__title {
font-family: var(--font-logo);
font-weight: 800;
font-size: clamp(1.75rem, 6vw, 3.5rem);
letter-spacing: 0;
color: var(--color-primary-contrast);
}
.hero__title .rule {
background: var(--color-primary-contrast);
}
.hero__subtitle {
font-weight: 700;
font-size: clamp(1rem, 2vw, 1.35rem);
letter-spacing: 0.02em;
color: var(--color-primary-contrast);
}
/* Inner-page title: plain centred heading on a grey section, no image */
.page-title-section {
background: var(--color-bg-alt);
padding-block: var(--space-6);
text-align: center;
}
/* Full-width photo banner directly under the header on inner pages
(e.g. services.html), matching the real live site's page header
treatment. Reuses the site's existing hero photo. */
.page-hero-image {
width: 100%;
height: clamp(220px, 32vw, 440px);
object-fit: cover;
display: block;
}
/* Service detail page banner — full-width photo directly under the
header, matching the real live site. Most of the source photos are
small texture close-ups, so by default the background tiles at
native resolution (no background-size) rather than stretching to
cover, which would blur them. */
.service-hero {
width: 100%;
/* Halved from clamp(220px, 32vw, 440px) — was too tall. */
height: clamp(110px, 16vw, 220px);
background-repeat: repeat;
background-position: top left;
}
/* One source photo (Cracked Walls) is large enough on its own
(3648x2736) to cover any banner width without needing to tile — for
that one, a centred single crop looks more intentional than an
arbitrary top-left corner of a tiled repeat. */
.service-hero--cover {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* 9. Section components
========================================================================== */
.feature-grid {
grid-template-columns: 1fr;
}
.feature-card {
background: var(--color-bg);
padding: var(--space-5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 220ms ease, transform 220ms ease;
}
.feature-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.feature-images {
display: grid;
gap: var(--space-3);
}
.feature-images img {
width: 100%;
/* Fixed height (not height:100%, which needs a definite parent
height to mean anything and otherwise falls back to the image's
native aspect ratio) — some of these source photos are portrait,
which was rendering as an oversized, very tall image. */
height: clamp(240px, 32vw, 420px);
object-fit: cover;
display: block;
}
/* Four value "tiles" — one per Crewman Approach principle — instead
of a plain bulleted or inline-numbered list. Each tile is a card
with a large numeral and a top accent rule, laid out 2-up on small
screens and 4-up from tablet width, so the 4 principles read as a
deliberate set rather than stray text. */
.stat-list {
display: grid;
/* minmax(0, 1fr), not plain 1fr — plain 1fr still lets a column
grow past its "fair share" to fit unbreakable long-word content
(e.g. "Communication" has no wrap point), which was making the
first tile visibly wider than the other three. minmax(0, 1fr)
forces every column to the same width and lets the label wrap
instead. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-block: var(--space-5);
list-style: none;
counter-reset: stat;
padding: 0;
text-align: center;
}
.stat-list li {
/* display: block, not the default list-item — with list-item display,
browsers still reserve a marker "gutter" for the (invisible, via
list-style:none) bullet, which shifts the text box off-centre
relative to the tile's background/border. display:block removes
that phantom gutter so text-align:center (inherited from
.stat-list) centres the label against the full tile width. */
display: block;
counter-increment: stat;
background: var(--color-bg-alt);
border-top: 3px solid var(--color-primary);
padding: var(--space-4) var(--space-4) var(--space-5);
/* The label text itself (e.g. "Communication") is the 's plain
text content — styled here, with the numeral below inserted as a
block-level ::before so it always sits on its own line above it. */
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-heading);
text-align: center;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.stat-list li:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.stat-list li::before {
content: counter(stat, decimal-leading-zero);
display: block;
font-family: var(--font-logo);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: var(--color-text-muted);
line-height: 1;
margin-bottom: var(--space-2);
}
.approach-images {
display: grid;
/* minmax(0, 1fr) — plain 1fr uses each ![]()
's native intrinsic
width as that column's minimum size. These are large source
photos (1200px+ wide), so on a narrow phone 3 columns of plain
1fr could demand far more total width than the viewport has,
causing the whole page to scroll horizontally. minmax(0, 1fr)
removes that intrinsic-size floor so the grid actually respects
the container width. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
margin-block: var(--space-5);
}
.approach-images img {
width: 100%;
aspect-ratio: 3 / 5;
max-height: 300px;
object-fit: cover;
}
.service-grid {
grid-template-columns: 1fr;
}
.service-card {
display: flex;
flex-direction: column;
transition: transform 220ms ease;
}
.service-card:hover {
transform: translateY(-3px);
}
.service-card__media {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.service-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 300ms ease;
}
.service-card:hover .service-card__media img {
transform: scale(1.04);
}
.service-card__body {
padding-top: var(--space-3);
}
.service-card__title {
margin-bottom: var(--space-2);
}
.service-card__link {
margin-top: var(--space-3);
}
.team-card {
display: grid;
grid-template-columns: 1fr;
border: 1px solid var(--color-border);
max-width: 760px;
margin-inline: auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 220ms ease;
}
.team-card:hover {
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}
.team-card__body {
padding: var(--space-5);
}
.team-card__role {
color: var(--color-text-muted);
font-size: var(--fs-sm);
margin-bottom: var(--space-2);
}
.team-card__contact {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-3);
font-size: var(--fs-sm);
}
.team-card__contact a {
text-decoration: underline;
text-underline-offset: 2px;
}
.team-card__photo {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
display: block;
}
/* Client logos — continuous auto-scrolling carousel. Replaces an
earlier CSS-grid layout: with 9 logos the last row only had 4 items,
which left the grid's final column empty and made the row look
off-centre / inconsistently padded left vs right. A looping strip
has no "last row" to misalign, and a mask-image fade keeps the
edges even on every screen width. */
.client-carousel {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.client-carousel__track {
display: flex;
align-items: center;
width: max-content;
gap: var(--space-8);
animation: client-carousel-scroll 32s linear infinite;
}
.client-carousel:hover .client-carousel__track,
.client-carousel:focus-within .client-carousel__track {
animation-play-state: paused;
}
.client-carousel__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.client-carousel__item img {
max-height: 170px;
width: auto;
max-width: 380px;
object-fit: contain;
display: block;
}
@keyframes client-carousel-scroll {
from {
transform: translateX(0);
}
to {
/* Exactly half, since the logo list below is duplicated once to
make the loop seamless. */
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.client-carousel__track {
animation: none;
overflow-x: auto;
scroll-snap-type: x proximity;
}
}
/* Galleries — one page, every project listed with its own scrollable
photo carousel (cover + every thumbnail for that project) instead
of linking out to 6 separate pages. */
.project-gallery-section {
margin-bottom: var(--space-7);
}
.project-gallery-section:last-child {
margin-bottom: 0;
}
.project-gallery-section__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
}
.project-gallery-section__head h2 {
margin-bottom: 0;
}
.project-gallery-section__count {
flex: 0 0 auto;
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-text-muted);
}
.project-carousel-wrap {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Round prev/next buttons flanking each project's carousel — the
scroll container alone (drag/swipe/scrollbar) isn't discoverable
for mouse users without a trackpad, so this gives every input type
an obvious, clickable way to see more photos. */
.project-carousel__nav {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 2px solid var(--color-primary);
border-radius: 50%;
background: var(--color-bg);
color: var(--color-primary);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.project-carousel__nav:hover,
.project-carousel__nav:focus-visible {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
.project-carousel__nav:disabled {
opacity: 0.3;
cursor: default;
background: var(--color-bg);
color: var(--color-primary);
}
.project-carousel {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: 1 1 auto;
min-width: 0;
}
.project-carousel::-webkit-scrollbar {
display: none;
}
.project-carousel__track {
display: flex;
gap: var(--space-2);
width: max-content;
}
.project-carousel__item {
position: relative;
display: block;
flex: 0 0 auto;
width: min(80vw, 380px);
overflow: hidden;
scroll-snap-align: start;
}
.project-carousel__item img {
width: 100%;
/* Same capped height for every image in every project's carousel,
regardless of that photo's native proportions. */
height: clamp(220px, 28vw, 340px);
object-fit: cover;
display: block;
transition: transform 300ms ease;
}
.project-carousel__item:hover img,
.project-carousel__item:focus-visible img {
transform: scale(1.03);
}
/* The one project cover that doesn't have its name baked into the
photo yet (Cowra Place, Cronulla — see MIGRATION-AUDIT.md
"Revision 3") gets a darkening filter behind its HTML text overlay,
same treatment as before. */
.project-carousel__item--overlay img {
filter: brightness(0.65);
}
.project-gallery__title {
position: absolute;
inset: auto 0 0 0;
padding: var(--space-3) var(--space-4);
background: rgba(255, 255, 255, 0.88);
color: var(--color-heading);
font-size: 0.95rem;
font-weight: 700;
}
/* 10. Enquiry / email CTA
========================================================================== */
.enquiry {
text-align: center;
}
.enquiry__media {
margin-bottom: var(--space-5);
}
.enquiry__media img {
width: 100%;
/* Deliberately shorter than the .feature-images photos above — this
is a supporting CTA image, not a feature, so it doesn't need to
be as large. */
height: clamp(160px, 20vw, 260px);
object-fit: cover;
display: block;
}
.enquiry__inner {
max-width: 640px;
margin-inline: auto;
}
.enquiry__actions {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
/* 11. Footer
========================================================================== */
.site-footer {
flex-shrink: 0;
background: var(--color-footer-bg);
color: var(--color-footer-text);
padding-block: var(--space-4);
}
.site-footer p {
/* Global p { color: var(--color-text) } (a direct declaration) beats
the inherited white from .site-footer regardless of specificity —
same cascade issue fixed on the About Us hero earlier. Without
this, the "Contact" label and "© 2026 Crewman" line render in the
dark body text colour, nearly invisible on the black footer. */
color: var(--color-footer-text);
}
.site-footer a {
color: var(--color-footer-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.site-footer a:hover,
.site-footer a:focus-visible {
opacity: 0.8;
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-size: var(--fs-sm);
}
/* 12. Lightbox
========================================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: 900;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(10, 10, 10, 0.92);
}
.lightbox.is-open {
display: flex;
}
.lightbox__figure {
position: relative;
max-width: min(1100px, 92vw);
max-height: 88vh;
}
.lightbox__figure img {
max-width: 100%;
max-height: 88vh;
width: auto;
margin-inline: auto;
object-fit: contain;
}
.lightbox__caption {
margin-top: var(--space-2);
color: #fff;
text-align: center;
font-size: var(--fs-sm);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border-radius: 50%;
font-size: 1.5rem;
transition: background var(--transition);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover,
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
background: rgba(255, 255, 255, 0.28);
}
.lightbox__close {
top: -3.5rem;
right: 0;
}
.lightbox__prev {
top: 50%;
left: -1rem;
transform: translate(-100%, -50%);
}
.lightbox__next {
top: 50%;
right: -1rem;
transform: translate(100%, -50%);
}
/* 13. 404 page
========================================================================== */
.error-page {
display: grid;
place-items: center;
min-height: 60vh;
text-align: center;
padding-block: var(--space-8);
}
.error-page__code {
font-family: var(--font-condensed);
font-size: clamp(3rem, 10vw, 6rem);
font-weight: 800;
color: var(--color-border-soft);
}