. English/Latin script justifies cleanly via
word-spacing, but Perso-Arabic script has no browser support for proper
justification (no kashida stretching) — text-align:justify on Persian
text produces a ragged, inconsistent right margin per line that reads as
a layout bug (client feedback, confirmed via screenshot). fa gets a plain
right-align instead, which is the standard recommendation for Persian
web typography. */
p {
text-align: justify;
text-align-last: start;
text-wrap: pretty;
hanging-punctuation: allow-end;
}
.prose-justify {
text-align: justify;
text-align-last: start;
text-wrap: pretty;
hanging-punctuation: allow-end;
}
[dir="rtl"] p,
[dir="rtl"] .prose-justify {
text-align: right;
text-align-last: auto;
}
.tabular-nums {
font-variant-numeric: tabular-nums;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding-block: 0.75rem;
padding-inline: 1.5rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background: var(--accent);
}
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--foreground);
}
.btn-outline:hover {
border-color: var(--foreground);
}
.cursor-pointer {
cursor: pointer;
}
/* Scroll-reveal (see assets/js/reveal.js). Progressive enhancement: content
is visible by default. Only once reveal.js actually runs does it add
.reveal-ready to , which is what switches elements to the
hidden-until-revealed state — so a JS failure never leaves content
permanently invisible. */
.reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-ready [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.reveal-ready [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* Site header */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 40;
border-block-end: 1px solid var(--border);
background: color-mix(in srgb, var(--background) 90%, transparent);
backdrop-filter: blur(6px);
transition: transform 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* Client-reported bug: scrolling down hid the whole menu with no way back,
and separately the on-hero menu was unreadable against a bright photo.
Fix, in two parts:
1. rasekh-header-scroll.js toggles --hidden while scrolling down past the
header's own height, and removes it the moment the user scrolls up or
stops — never leaves the menu unreachable.
2. The homepage header no longer relies on dark text sitting on whatever
part of the photo happens to be behind it (unreliable) — it's back to
white text, guaranteed legible by the dedicated .home-hero__header-shade
band directly behind it (see below), independent of the photo/scrim. */
.site-header--hidden {
transform: translateY(-100%);
}
/* Homepage only — the header sits directly on top of the hero image/video
instead of a separate solid bar above it (turnerconstruction.com-style),
per client reference. Overriding --foreground/--muted-foreground here
cascades to every child (logo name, nav links, phone) since they all
read color from those custom properties already. */
.site-header--on-hero {
position: absolute;
inset-inline: 0;
border-block-end: none;
background: transparent;
backdrop-filter: none;
--foreground: var(--paper);
--muted-foreground: var(--paper-dim);
--border: rgba(255, 255, 255, 0.35);
}
/* Once scrolled past the hero, pin the header like every other page's and
swap it to the same solid/light treatment — this is the "menu comes back
in white" behavior from the client's turnerconstruction.com reference. */
.site-header--on-hero.site-header--solid {
position: fixed;
border-block-end: 1px solid var(--border);
background: color-mix(in srgb, var(--background) 90%, transparent);
backdrop-filter: blur(6px);
--foreground: var(--ink);
--muted-foreground: var(--steel);
--border: var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
block-size: 4rem;
}
@media (min-width: 1024px) {
.site-header__inner {
block-size: 5rem;
}
}
.site-header__brand {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.site-header__logo {
block-size: 2.75rem;
inline-size: auto;
}
.site-header__name {
display: none;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.01em;
/* Matches the nav links' resting opacity so the brand name doesn't read
as visually heavier/different from the menu beside it. */
color: var(--foreground);
opacity: 0.7;
}
@media (min-width: 640px) {
.site-header__name {
display: inline;
}
}
/* Compound selector (not just .site-header__phone) so this reliably beats
.icon-link's unconditional display:inline-flex regardless of which rule
happens to come later in the file — this element carries both classes,
and equal-specificity single-class rules would otherwise tie-break on
source order alone, which previously left the phone number visible and
cramped into the mobile header when it's meant to be desktop-only. */
.site-header__phone.icon-link {
display: none;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: var(--muted-foreground);
direction: ltr;
unicode-bidi: isolate;
}
.site-header__phone svg {
flex-shrink: 0;
}
@media (min-width: 1024px) {
.site-header__phone.icon-link {
display: inline-flex;
}
}
.site-header__phone:hover {
color: var(--foreground);
}
/* Vazirmatn's Persian digit glyphs read visually smaller than the Latin
numerals in the English header at the same font-size — client feedback.
A small bump on fa only brings them to a comparable visual weight. */
[dir="rtl"] .site-header__phone.icon-link {
font-size: 0.9375rem;
}
/* Footer */
.site-footer {
border-block-start: 1px solid var(--border);
background: var(--paper-dim);
padding-block: 1.5rem;
}
.site-footer__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
}
.site-footer__brand {
font-weight: 700;
letter-spacing: -0.01em;
}
.site-footer__row .social-buttons {
margin-inline-start: auto;
}
.site-footer__copy {
flex-basis: 100%;
font-size: 0.8125rem;
color: var(--muted-foreground);
padding-block-start: 0.75rem;
border-block-start: 1px solid var(--border);
}
@media (min-width: 640px) {
.site-footer__copy {
flex-basis: auto;
margin-inline-start: auto;
padding-block-start: 0;
border-block-start: none;
}
.site-footer__row .social-buttons {
margin-inline-start: 0;
}
}
/* Narrow screens: right-align everything (matching Persian's RTL reading
start) but let short items like the two phone numbers sit side-by-side
when they fit, rather than force-stacking every single item on its own
full-width row — that read as too tall/spaced-out (client feedback). */
@media (max-width: 639px) {
.site-footer__row {
justify-content: flex-start;
}
.site-footer__row .social-buttons {
margin-inline-start: 0;
}
}
/* Mobile footer, both languages (client feedback applied to fa first, then
asked for the same treatment in English): brand name with the email
below it on one side, the two phone numbers stacked below each other on
the other side — not the free-flowing wrap used elsewhere. Grid column 1
is always the container's own inline-start (left for ltr, right for
rtl — verified against live measurements), which is naturally where the
brand belongs in both languages, so no [dir] scoping is needed here at
all; text-align:start does the same automatic flip for the text itself. */
@media (max-width: 639px) {
.site-footer__row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
row-gap: 0.5rem;
align-items: start;
}
.site-footer__brand {
grid-column: 1;
grid-row: 1;
text-align: start;
}
.site-footer__email {
grid-column: 1;
grid-row: 2;
text-align: start;
}
.site-footer__phone {
grid-column: 2;
justify-self: end;
}
.site-footer__phone--primary {
grid-row: 1;
}
.site-footer__phone--mobile {
grid-row: 2;
}
.site-footer__row .social-buttons {
grid-column: 1 / -1;
margin-inline-start: 0;
}
.site-footer__copy {
grid-column: 1 / -1;
}
}
.site-footer__heading {
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--foreground);
margin-block-end: 0.75rem;
}
.site-footer__links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.5rem;
}
.site-footer__links a:hover {
color: var(--accent);
}
.icon-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
/* Icon reads after (to the right of) the number, not before it — client
feedback, applies everywhere this class is used (header, nav-drawer,
footer) in both languages. Each usage already forces direction:ltr on
itself (digits must read left-to-right), so row-reverse consistently
puts the icon at that box's own right/end edge regardless of the
page's overall language. */
flex-direction: row-reverse;
}
.icon-link svg {
flex-shrink: 0;
}
.screen-reader-text {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
position: fixed;
inset-block-start: 0.5rem;
inset-inline-start: 0.5rem;
inline-size: auto;
block-size: auto;
overflow: visible;
clip: auto;
z-index: 100;
background: var(--ink);
color: var(--paper);
padding: 0.5rem 1rem;
}
/* Inline horizontal nav — Persian (fa) only, per client request: the
Persian header shows nav links directly, not behind a "Menu" button.
English keeps the big.dk-style drawer at every width. Below 900px, fa
still falls back to the drawer since 7 items won't fit a phone header. */
.site-nav-inline {
display: none;
}
.site-nav-inline ul {
display: flex;
align-items: center;
gap: 1.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-inline a {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--foreground);
opacity: 0.7;
transition: opacity 150ms ease;
}
.site-nav-inline a:hover,
.site-nav-inline a.current-menu-item,
.site-nav-inline .current-menu-item a {
opacity: 1;
}
.site-nav-inline__lang {
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0;
border: none;
}
@media (min-width: 900px) {
/* Same visible-links-in-header pattern for both languages now (English
matches the Persian header style, per client request) — below this
width both fall back to the drawer since the links don't fit. */
.site-nav-inline {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-trigger {
display: none;
}
}
/* Nav drawer — big.dk-inspired: fast, content-width, no dark scrim */
.nav-trigger {
background: none;
border: none;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
color: var(--foreground);
padding: 0;
/* Mobile Safari/Chrome paint a default blue highlight box on tap unless
told not to — looked like a stray blue shape around the menu button
(client feedback). Keyboard focus is untouched — :focus-visible below
still shows a real outline for non-touch users. */
-webkit-tap-highlight-color: transparent;
}
.nav-scrim {
position: fixed;
inset: 0;
z-index: 45;
background: transparent;
}
.nav-scrim[hidden] {
display: none;
}
.nav-drawer {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 50;
inline-size: var(--nav-drawer-width);
max-inline-size: 100vw;
background: var(--paper);
border-inline-end: 1px solid var(--border);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
transform: translateX(-100%);
transition: transform var(--nav-transition);
overflow-y: auto;
}
[dir="rtl"] .nav-drawer {
inset-inline-start: 0;
transform: translateX(100%);
}
.nav-drawer.is-open {
transform: translateX(0);
}
.nav-drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-drawer__brand {
font-weight: 600;
}
.nav-drawer__close {
background: none;
border: none;
font: inherit;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.nav-drawer__links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.25rem;
}
.nav-drawer__links a {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.5;
transition: opacity 200ms ease;
}
.nav-drawer__links a:hover,
.nav-drawer__links a:focus-visible {
opacity: 1;
}
.nav-drawer__bottom {
display: grid;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--muted-foreground);
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--border);
}
/* Email is inherently a Latin-script string, so it keeps dir="ltr" to read
left-to-right — but per client feedback the fa drawer should still line
everything up on the right (matching the phone numbers beside it), not
pin email specifically to the left. text-align:right here is a physical
value (unlike start/end) so it wins regardless of the element's own ltr
direction. English stays left-aligned, matching that page's own flow. */
.nav-drawer__email {
display: block;
text-align: left;
unicode-bidi: isolate;
}
[dir="rtl"] .nav-drawer__email {
text-align: right;
}
/* Same Vazirmatn-vs-Latin visual-weight bump as the header phone. */
[dir="rtl"] .nav-drawer__bottom .icon-link {
font-size: 0.9375rem;
}
/* Client also asked for the phone icon mirrored in the fa drawer so it
reads more naturally alongside right-aligned Persian content. */
[dir="rtl"] .nav-drawer__bottom .icon-link svg {
transform: scaleX(-1);
}
/* The phone links keep dir="ltr" so the digits themselves read left-to-right
(like the email above), but that also makes their own flex content pack
to THEIR left edge by default — which is the wrong side once this box is
sitting in the RTL drawer. flex-end pushes icon+number to that box's own
right edge instead, matching .nav-drawer__email's text-align:right. */
/* .icon-link is now flex-direction:row-reverse (icon trails the number),
which also flips what flex-end/flex-start mean on its main axis — with
row-reverse, flex-start is the edge that's visually last (right, for
this box's own direction:ltr), so flex-start is what actually pushes the
group to the box's right edge here. Verified against live measurements,
not assumed — row-reverse's interaction with justify-content is easy to
get backwards. */
[dir="rtl"] .nav-drawer__bottom .icon-link {
justify-content: flex-start;
}
.nav-drawer__social {
display: flex;
gap: 1rem;
}
.nav-drawer__lang {
display: flex;
gap: 0.5rem;
}
/* Small flag icon rather than a padded text pill — the text-button version
read as oversized/heavy in the header. */
.lang-switch {
display: inline-flex;
align-items: center;
padding: 0.2rem;
border-radius: 2px;
line-height: 0;
opacity: 0.55;
transition: opacity 150ms ease;
}
.lang-switch img {
display: block;
inline-size: 20px;
block-size: 14px;
object-fit: cover;
}
.lang-switch:hover {
opacity: 0.8;
}
.lang-switch.is-current {
opacity: 1;
outline: 1px solid var(--border);
}
/* Social links, styled as real buttons everywhere they appear (nav drawer,
footer, contact page) instead of plain inline text links. */
.social-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.social-button {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border: 1px solid var(--border);
color: var(--foreground);
opacity: 1 !important;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.social-button svg {
display: block;
}
.social-button:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
.nav-drawer {
transition: none;
}
}
.breadcrumbs a:hover {
color: var(--accent);
}
.project-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-block-end: 2rem;
}
.project-filters__item {
padding: 0.5rem 1rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--border);
color: var(--muted-foreground);
}
.project-filters__item.is-active,
.project-filters__item:hover {
border-color: var(--foreground);
color: var(--foreground);
}
.responsive-embed iframe,
.responsive-embed video {
inline-size: 100%;
aspect-ratio: 16 / 9;
}
/* Project detail media — a thin "mat" border/padding around every photo
and video instead of a giant unframed full-bleed image (client feedback:
photos read as too big/chaotic without a frame). gallery_layout (ACF
select field) picks one of three variants below so project pages don't
all repeat the exact same photo layout. */
.project-media-frame {
padding: 0.6rem;
border: 1px solid var(--border);
background: var(--paper);
}
.project-media-frame img,
.project-media-frame video {
display: block;
}
.project-gallery .wp-block-gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0;
}
.project-gallery figure.wp-block-image {
margin: 0;
padding: 0.5rem;
border: 1px solid var(--border);
background: var(--paper);
flex: 1 1 260px;
}
.project-gallery figure.wp-block-image img {
display: block;
inline-size: 100%;
block-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.project-gallery--grid figure.wp-block-image {
flex-basis: calc(50% - 0.5rem);
}
@media (min-width: 900px) {
.project-gallery--grid figure.wp-block-image {
flex-basis: calc(33.333% - 0.667rem);
}
}
.project-gallery--stacked .wp-block-gallery {
flex-direction: column;
}
.project-gallery--stacked figure.wp-block-image {
max-inline-size: 42rem;
margin-inline: auto;
}
.project-gallery--stacked figure.wp-block-image img {
aspect-ratio: 16 / 9;
}
.project-gallery--wide figure.wp-block-image {
flex-basis: calc(50% - 0.5rem);
}
.project-gallery--wide figure.wp-block-image:nth-child(3n+1) {
flex-basis: 100%;
}
.project-gallery--wide figure.wp-block-image:nth-child(3n+1) img {
aspect-ratio: 21 / 9;
}
@media (max-width: 640px) {
.project-gallery figure.wp-block-image {
flex-basis: 100% !important;
}
}
/* Generic page header (Services/Projects/About/Careers/Contact) */
.page-hero {
padding-block: 4rem 3rem;
}
@media (min-width: 1024px) {
.page-hero {
padding-block: 6rem 4rem;
}
}
/* Services — Turner-inspired alternating editorial blocks */
.services-editorial__block {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
align-items: center;
padding-block: 3rem;
/* Was only set inside the 900px+ media query below, so mobile text sat
flush against the screen edge with no side margin at all — this base
rule uses the site's standard container padding at every width, and
the wider desktop block below still enlarges it further. */
padding-inline: var(--container-pad);
border-block-start: 1px solid var(--border);
}
.services-editorial__block:first-child {
border-block-start: none;
}
@media (min-width: 900px) {
.services-editorial__block {
grid-template-columns: 1.1fr 1fr;
padding-inline: 2.5rem;
}
.services-editorial__block.is-reversed .services-editorial__media {
order: 2;
}
}
.services-editorial__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-dim);
}
.services-editorial__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.services-editorial__media--empty {
border: 1px dashed var(--border);
}
/* Secondary services — plain CSS scroll-snap row, no JS library */
.services-carousel {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block-end: 0.5rem;
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
}
.services-carousel__item {
flex: 0 0 auto;
inline-size: min(280px, 80vw);
scroll-snap-align: start;
background: var(--paper-dim);
}
.services-carousel__item img {
aspect-ratio: 4 / 3;
object-fit: cover;
inline-size: 100%;
}
.services-carousel__caption {
padding: 1rem;
}
/* Homepage sections */
.home-hero {
position: relative;
min-block-size: 640px;
block-size: 100svh;
display: flex;
align-items: flex-end;
background-color: var(--ink);
overflow: hidden;
}
.home-hero__video {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* Shifts the visible crop down slightly (client feedback) so there's more
plain "sky"/background at the very top, behind the header, instead of
the busiest part of the shot sitting right under the menu. */
object-position: center 65%;
}
.home-hero__slider {
position: absolute;
inset: 0;
}
.home-hero__slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 65%;
opacity: 0;
transition: opacity 1.4s ease;
}
.home-hero__slide.is-active {
opacity: 1;
}
.home-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.1));
}
/* Guaranteed-contrast band for the header, independent of the scrim above —
see the .site-header--on-hero comment: the menu needs reliable contrast
no matter which photo/slide/video frame happens to be behind it. */
.home-hero__header-shade {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 9rem;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
pointer-events: none;
}
.home-hero__content {
position: relative;
padding-block-end: 4rem;
}
/* The shared --text-display clamp's floor (2.25rem) is still too large for
the Persian headline to fit on one line on narrow phones — client wants
it on a single line, so this scopes a smaller size to just the home hero
at small widths rather than shrinking every .text-display use site-wide. */
@media (max-width: 420px) {
.home-hero__title {
font-size: 1.75rem;
}
}
.home-hero__scroll-cue {
position: absolute;
inset-block-end: 2rem;
/* Content/CTAs already sit bottom-start (see .home-hero__content) — the
scroll cue goes on the opposite (end) side so the two never collide,
regardless of text direction. */
inset-inline-end: 2rem;
display: flex;
align-items: center;
gap: 0.625rem;
color: var(--paper);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
transition: opacity 150ms ease;
}
.home-hero__scroll-cue:hover {
opacity: 1;
}
.home-hero__scroll-cue span {
display: block;
inline-size: 1px;
block-size: 2.5rem;
background: currentColor;
position: relative;
overflow: hidden;
}
.home-hero__scroll-cue span::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: -100%;
block-size: 100%;
background: currentColor;
animation: rasekh-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes rasekh-scroll-cue {
0% { inset-block-start: -100%; }
60%, 100% { inset-block-start: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.home-hero__slide {
transition: none;
}
.home-hero__scroll-cue span::after {
animation: none;
inset-block-start: 0;
}
}
.home-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-block-start: 2rem;
}
.home-section {
padding-block: 4rem;
}
@media (min-width: 1024px) {
.home-section {
padding-block: 6rem;
}
}
.home-section__head {
margin-block-end: 2.5rem;
max-inline-size: 40rem;
}
.home-section__head p {
color: var(--muted-foreground);
margin-block-start: 0.5rem;
}
@media (min-width: 900px) {
.intro-grid {
grid-template-columns: 1.2fr 1fr !important;
align-items: center;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
border-block: 1px solid var(--border);
padding-block: 2rem;
}
.stats-grid__item {
text-align: center;
}
.stats-grid__item p {
text-align: center;
text-align-last: center;
}
.stats-grid__value {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
}
.stats-grid__label {
color: var(--muted-foreground);
font-size: 0.875rem;
margin-block-start: 0.25rem;
}
.card-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.media-card {
display: block;
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-dim);
}
.media-card img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.media-card:hover img {
transform: scale(1.04);
}
.media-card__caption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: 1.25rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.15) 70%, transparent);
color: var(--paper);
}
/* turnerconstruction.com-inspired project card: a colored caps location
line above the title, and a "View project" cue that only appears on
hover/focus instead of always sitting there. */
.media-card__eyebrow {
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin-block-end: 0.375rem;
}
.media-card__title {
display: block;
font-size: 1.0625rem;
}
.media-card__cta {
display: block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--paper-dim);
max-block-size: 0;
opacity: 0;
overflow: hidden;
transition: max-block-size 200ms ease, opacity 200ms ease, margin-block-start 200ms ease;
}
.media-card:hover .media-card__cta,
.media-card:focus-visible .media-card__cta {
max-block-size: 1.5rem;
opacity: 1;
margin-block-start: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
.media-card__cta {
transition: none;
}
}
/* Brand cards (About page #brands) — the logos themselves have a lot of
built-in transparent padding and very different aspect ratios (one wide,
one narrow), so a small fixed height made both unreadable (client
feedback: too small, taglines baked into the artwork illegible). A tall,
full-width contain box lets each logo scale up as large as its own
proportions allow instead of being capped uniformly. */
.brand-card {
border: 1px solid var(--border);
overflow: hidden;
}
.brand-card__logo {
display: flex;
align-items: center;
justify-content: center;
block-size: 9rem;
padding: 1rem;
background: var(--paper);
border-block-end: 1px solid var(--border);
}
.brand-card__logo img {
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
}
.brand-card__body {
padding: 1.5rem;
}
.brands-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2.5rem;
}
.brands-strip img {
max-block-size: 2.5rem;
inline-size: auto;
filter: grayscale(1);
opacity: 0.7;
transition: opacity 200ms ease, filter 200ms ease;
}
.brands-strip img:hover {
filter: none;
opacity: 1;
}
/* Client feedback: this section's background read as an odd, off-brand
color that doesn't exist anywhere else on the site — switched from the
dark --ink fill to the plain paper background every other section uses. */
.cta-section {
background: var(--paper-dim);
color: var(--foreground);
padding-block: 4rem;
text-align: center;
}
.cta-section .eyebrow,
.cta-section p {
color: var(--muted-foreground);
text-align: center;
/* The heading (h2, unaffected) centers correctly via inherited
text-align:center above, but a also picks up text-align-last:start
from the global paragraph-justify rule — for a short one-line CTA
sentence that single line IS the "last line", so it was rendering
start-aligned instead of centered even though text-align says center. */
text-align-last: center;
}
/* About page */
.about-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
padding-block-end: 2rem;
}
@media (min-width: 900px) {
.about-grid {
grid-template-columns: 1.4fr 1fr;
}
}
.about-facts {
display: grid;
gap: 1.25rem;
align-content: start;
padding: 1.5rem;
border: 1px solid var(--border);
}
.about-facts dt {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.about-facts dd {
font-size: 1.125rem;
font-weight: 600;
margin-block-start: 0.25rem;
}
/* Team — tresmarescapital-inspired hover-reveal cards */
.team-row {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
.team-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.team-row { grid-template-columns: repeat(4, 1fr); }
}
.team-card {
position: relative;
display: block;
background: linear-gradient(var(--paper-dim), #e8e6e2);
transition: background 300ms ease, transform 200ms ease-out;
}
.team-card:hover {
background: linear-gradient(#e2e0db, #efeeec);
}
.team-card .placeholder-badge {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-start: 0.5rem;
z-index: 1;
}
.team-card__media {
aspect-ratio: 0.81 / 1;
overflow: hidden;
}
.team-card__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.team-card__info {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.875rem;
}
.team-card__info span {
color: var(--muted-foreground);
font-size: 0.8125rem;
}
/* Hover-hiding only where hover actually exists — touch devices always
show name/title, since hover-only reveal is unusable there. */
@media (hover: hover) and (pointer: fine) {
.team-card__info {
opacity: 0;
transition: opacity 300ms ease;
}
.team-card:hover .team-card__info,
.team-card:focus-visible .team-card__info {
opacity: 1;
}
}
/* Contact Form 7 — inherit the theme's tokens instead of browser defaults */
.wpcf7-form p {
margin-block-end: 1rem;
}
.wpcf7-form label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-block-end: 0.375rem;
}
.wpcf7-form input:not([type="submit"]),
.wpcf7-form textarea,
.wpcf7-form select {
inline-size: 100%;
padding: 0.75rem;
/*