/* ==========================================================================
sada.css — everything added on top of the design handoff.
assets/site.css is the handoff's canonical token file and stays unmodified,
so anything invented for this build lives here instead.
Two sections:
1. COMPONENTS — permanent site furniture (the leadership board).
2. DRAFT MODE — the watermark and placeholder markers. Self-disabling:
everything here is gated on html:not([data-env="live"]).
========================================================================== */
/* ==========================================================================
1. COMPONENTS
========================================================================== */
/* Screen-reader-only label. The theme button is icon-only, so its accessible
name has to come from somewhere that is not the title attribute. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Nav right-hand cluster. .nav-row is `justify-content: space-between`, so the
actions have to be one flex child or the CTA and the toggle drift apart. */
.nav-actions {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Light / dark toggle. Circular to echo .brand-mark, and sized to match the
height of .nav-cta beside it. */
.theme-toggle {
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: transparent;
color: var(--ink);
cursor: pointer;
transition: background-color .25s, border-color .25s, color .25s;
}
.theme-toggle:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Show the icon for the theme the button will switch TO, which is the
convention users expect: a sun means "go light". Both icons are stacked in
the same grid cell so the button never changes size on toggle. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { grid-area: 1 / 1; }
.theme-toggle .icon-sun { display: block; } /* dark now -> offer light */
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* light now -> offer dark */
/* The toggle stays available on mobile, unlike .nav-links and .nav-cta which
the handoff hides below 900px. */
@media (max-width: 900px) {
.theme-toggle { display: inline-grid; }
}
/* Leadership board — one card per director, each with its own portrait slot.
Two columns rather than the handoff's single chairman block, because the
client named two directors of equal standing and neither is a chairman. */
.board {
display: grid;
/* auto-fit, not a fixed two: a third director was added in September and a
fixed pair left him alone on a second row looking like an afterthought.
This holds two, three or four without another CSS change. */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-6);
margin-top: var(--sp-7);
border-top: 1px solid var(--line);
padding-top: var(--sp-7);
}
@media (max-width: 900px) { .board { grid-template-columns: 1fr; gap: var(--sp-7); } }
.board-member { display: flex; flex-direction: column; }
.board-member .board-photo {
border-radius: var(--r-3);
overflow: hidden;
margin-bottom: var(--sp-5);
}
.board-member .board-name {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--ink);
}
.board-member .board-role {
font: 500 var(--step--2) var(--font-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-top: var(--sp-3);
}
.board-member .board-bio {
color: var(--ink-dim);
font-size: var(--step-0);
margin-top: var(--sp-4);
max-width: 44ch;
}
/* --------------------------------------------------------------------------
Facility gallery.
The photographs are candid phone shots in mixed orientations (some 3:4, some
4:3), so every tile is forced to one aspect ratio with object-fit: cover.
Letting them keep their own ratios produced a ragged grid that read as
careless; cropping to a common shape reads as deliberate, and the full frame
is one click away.
-------------------------------------------------------------------------- */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: var(--sp-3);
margin-top: var(--sp-7);
}
.gallery-item {
position: relative;
display: block;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-2);
overflow: hidden;
background: var(--bg-elev);
cursor: zoom-in;
transition: border-color .25s, transform .25s;
}
.gallery-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-item img {
display: block;
width: 100%;
/* height:auto is what makes aspect-ratio work at all. Every carries an
HTML height attribute (added to reserve space before load), and that
attribute is a presentational hint mapping to a DEFINITE height - with both
dimensions definite, aspect-ratio is ignored. Without this line a 615x820
photograph rendered in a 251x820 box, so object-fit:cover showed a 41%-wide
vertical slice of it. Undistorted, and missing half the picture. */
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
/* The photographs are dim and slightly flat straight off a phone. A small
lift here is grading, not deception - no content is altered. */
filter: saturate(1.05) contrast(1.04);
transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.03); }
.gallery-cap {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 12px 10px;
font: 500 var(--step--2) var(--font-mono);
letter-spacing: .06em;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
opacity: 0;
transition: opacity .25s;
}
.gallery-item:hover .gallery-cap,
.gallery-item:focus-visible .gallery-cap { opacity: 1; }
/* Lightbox. A