/* ==========================================================================
Ziv Projects — design system
RTL-first. Logical properties only: no left/right, no ltr assumptions.
========================================================================== */
:root {
/* Brand — sampled from the existing site. #D10525 is the one real brand
colour the legacy Elementor kit defined; everything else there was
Elementor factory default and is deliberately not carried over. */
--red: #d10525;
--red-dark: #a3031c;
--red-bright: #f0102f;
--ink: #0d0d0f;
--ink-2: #17181c;
--ink-3: #24262c;
--paper: #ffffff;
--paper-2: #f4f4f5;
--paper-3: #e8e8ea;
--text: #1a1b1f;
--text-muted: #5c5f68;
--text-invert: #ffffff;
--text-invert-muted: rgba(255, 255, 255, 0.72);
--line: rgba(13, 13, 15, 0.12);
--line-invert: rgba(255, 255, 255, 0.16);
/* Type — Heebo is a high-quality Hebrew family with a real condensed-ish
display weight range. Two families maximum, per the performance budget. */
--font-sans: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
--step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
--step-3: clamp(1.9rem, 1.55rem + 1.75vw, 2.9rem);
--step-4: clamp(2.35rem, 1.78rem + 2.85vw, 4rem);
--step-5: clamp(2.8rem, 1.9rem + 4.5vw, 5.5rem);
--space-2xs: 0.375rem;
--space-xs: 0.75rem;
--space-s: 1.125rem;
--space-m: 1.75rem;
--space-l: 2.75rem;
--space-xl: 4.25rem;
--space-2xl: 6.5rem;
--space-3xl: 9rem;
--wrap: 1320px;
--wrap-narrow: 820px;
--gutter: clamp(1.125rem, 4vw, 3rem);
--radius: 2px;
--radius-media: 3px;
--header-h: 92px;
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (max-width: 900px) {
:root {
--header-h: 68px;
}
}
/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.65;
color: var(--text);
background: var(--paper);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4 {
margin: 0;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.015em;
text-wrap: balance;
}
p {
margin: 0 0 1em;
text-wrap: pretty;
}
p:last-child {
margin-bottom: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
:focus-visible {
outline: 3px solid var(--red);
outline-offset: 3px;
border-radius: 1px;
}
.is-inverted :focus-visible {
outline-color: #fff;
}
/* ------------------------------------------------------------ utilities -- */
.container {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: var(--wrap-narrow);
}
.visually-hidden,
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 999;
padding: 0.85rem 1.4rem;
background: var(--red);
color: #fff;
font-weight: 700;
transform: translateY(-110%);
}
.skip-link:focus {
transform: translateY(0);
}
.section {
padding-block: var(--space-2xl);
}
.section--tight {
padding-block: var(--space-xl);
}
.section--dark {
background: var(--ink);
color: var(--text-invert);
}
.section--paper {
background: var(--paper-2);
}
/* Section heading: a thin red rule above a large title. Repeated across the
site so the rhythm reads as one system. */
.section-head {
margin-block-end: var(--space-l);
max-width: 62ch;
}
.section-head__kicker {
display: flex;
align-items: center;
gap: 0.7rem;
margin-block-end: var(--space-xs);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
}
.section-head__kicker::before {
content: "";
inline-size: 2.4rem;
block-size: 3px;
background: var(--red);
flex: none;
}
.section--dark .section-head__kicker {
color: #fff;
}
.section--dark .section-head__kicker::before {
background: var(--red);
}
.section-head__title {
font-size: var(--step-3);
}
.section-head__lede {
margin-block-start: var(--space-s);
font-size: var(--step-1);
color: var(--text-muted);
font-weight: 400;
line-height: 1.5;
}
.section--dark .section-head__lede {
color: var(--text-invert-muted);
}
/* --------------------------------------------------------------- button -- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 1.05rem 2.1rem;
border: 2px solid transparent;
border-radius: var(--radius);
font-weight: 700;
font-size: var(--step-0);
line-height: 1;
text-decoration: none;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover {
transform: translateY(-2px);
}
.btn--primary {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.btn--primary:hover {
background: var(--red-dark);
border-color: var(--red-dark);
}
.btn--ghost {
border-color: currentColor;
color: inherit;
}
.btn--ghost:hover {
background: currentColor;
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
color: var(--ink);
}
.btn--light {
background: #fff;
color: var(--ink);
border-color: #fff;
}
.btn__arrow {
transition: transform 0.2s var(--ease);
}
.btn:hover .btn__arrow {
transform: translateX(-4px);
}
/* --------------------------------------------------------------- header -- */
.topbar {
background: var(--ink);
color: var(--text-invert-muted);
font-size: var(--step--1);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
min-block-size: 40px;
}
.topbar__list {
display: flex;
align-items: center;
gap: var(--space-m);
list-style: none;
flex-wrap: wrap;
}
.topbar__link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
text-decoration: none;
transition: color 0.15s var(--ease);
}
.topbar__link:hover {
color: #fff;
}
.topbar__link svg {
inline-size: 15px;
block-size: 15px;
flex: none;
opacity: 0.75;
}
.social {
display: flex;
align-items: center;
gap: 0.55rem;
list-style: none;
}
.social__link {
display: grid;
place-items: center;
inline-size: 30px;
block-size: 30px;
border: 1px solid var(--line-invert);
border-radius: 50%;
transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.social__link:hover {
background: var(--red);
border-color: var(--red);
}
.social__link svg {
inline-size: 15px;
block-size: 15px;
}
@media (max-width: 900px) {
.topbar {
display: none;
}
}
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 60;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(140%) blur(10px);
border-block-end: 1px solid var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
min-block-size: var(--header-h);
}
.site-logo {
display: block;
flex: none;
}
.site-logo img {
block-size: clamp(38px, 5vw, 54px);
inline-size: auto;
}
.nav {
display: flex;
align-items: center;
gap: var(--space-m);
}
.nav__list {
display: flex;
align-items: center;
gap: clamp(0.5rem, 1.4vw, 1.35rem);
list-style: none;
}
.nav__link {
position: relative;
display: block;
padding-block: 0.5rem;
font-size: clamp(0.86rem, 0.9vw, 0.98rem);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color 0.18s var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inline-size: 0;
block-size: 2px;
background: var(--red);
transition: inline-size 0.24s var(--ease);
}
.nav__link:hover,
.nav__item.current-menu-item > .nav__link {
color: var(--red);
}
.nav__link:hover::after,
.nav__item.current-menu-item > .nav__link::after {
inline-size: 100%;
}
.header__cta {
flex: none;
padding: 0.8rem 1.5rem;
}
@media (max-width: 1100px) {
.nav,
.header__cta {
display: none;
}
}
/* Mobile nav toggle */
.nav-toggle {
display: none;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.9rem;
background: none;
border: 1px solid var(--line);
border-radius: var(--radius);
font-weight: 700;
font-size: 0.9rem;
}
.nav-toggle__bars {
position: relative;
inline-size: 20px;
block-size: 14px;
flex: none;
}
.nav-toggle__bars span {
position: absolute;
inset-inline: 0;
block-size: 2px;
background: var(--ink);
transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle__bars span:nth-child(1) {
inset-block-start: 0;
}
.nav-toggle__bars span:nth-child(2) {
inset-block-start: 6px;
}
.nav-toggle__bars span:nth-child(3) {
inset-block-start: 12px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 1100px) {
.nav-toggle {
display: inline-flex;
}
}
.mobile-nav {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
grid-template-rows: auto 1fr;
background: var(--ink);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity 0.24s var(--ease), visibility 0.24s var(--ease);
}
.mobile-nav[data-open="true"] {
visibility: visible;
opacity: 1;
}
.mobile-nav__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
min-block-size: var(--header-h);
border-block-end: 1px solid var(--line-invert);
}
.mobile-nav__close {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
background: none;
border: 1px solid var(--line-invert);
border-radius: var(--radius);
color: #fff;
}
.mobile-nav__body {
overflow-y: auto;
padding-block: var(--space-m) var(--space-xl);
}
.mobile-nav__list {
list-style: none;
}
.mobile-nav__list a {
display: block;
padding-block: 0.9rem;
border-block-end: 1px solid var(--line-invert);
font-size: var(--step-1);
font-weight: 700;
text-decoration: none;
}
.mobile-nav__list a:hover {
color: var(--red-bright);
}
.mobile-nav__contact {
margin-block-start: var(--space-l);
display: grid;
gap: var(--space-xs);
}
.mobile-nav__contact a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-invert-muted);
text-decoration: none;
}
.mobile-nav__contact svg {
inline-size: 16px;
block-size: 16px;
}
body.nav-open {
overflow: hidden;
}
/* ----------------------------------------------------------------- hero -- */
.hero {
position: relative;
display: grid;
align-items: end;
min-block-size: clamp(520px, 78vh, 780px);
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media img,
.hero__media video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
rgba(8, 8, 10, 0.92) 0%,
rgba(8, 8, 10, 0.62) 42%,
rgba(8, 8, 10, 0.34) 100%
);
}
.hero__inner {
padding-block: var(--space-2xl) var(--space-xl);
}
.hero__kicker {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-block-end: var(--space-s);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.hero__kicker::before {
content: "";
inline-size: 2.6rem;
block-size: 3px;
background: var(--red);
}
.hero__title {
max-inline-size: 17ch;
font-size: var(--step-5);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 0.98;
}
.hero__title em {
font-style: normal;
color: var(--red-bright);
}
.hero__text {
margin-block-start: var(--space-m);
max-inline-size: 54ch;
font-size: var(--step-1);
color: rgba(255, 255, 255, 0.86);
line-height: 1.55;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-block-start: var(--space-l);
}
/* Compact hero for interior pages */
.page-hero {
position: relative;
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.page-hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.page-hero__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
rgba(8, 8, 10, 0.9),
rgba(8, 8, 10, 0.6)
);
}
.page-hero--plain {
background: var(--ink);
}
.page-hero__inner {
padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.page-hero__title {
font-size: var(--step-4);
font-weight: 900;
letter-spacing: -0.025em;
max-inline-size: 20ch;
}
.page-hero__lede {
margin-block-start: var(--space-m);
max-inline-size: 62ch;
font-size: var(--step-1);
color: rgba(255, 255, 255, 0.84);
line-height: 1.55;
}
/* ---------------------------------------------------------- breadcrumbs -- */
.breadcrumbs {
background: var(--paper-2);
border-block-end: 1px solid var(--line);
font-size: var(--step--1);
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
list-style: none;
padding-block: 0.85rem;
color: var(--text-muted);
}
.breadcrumbs__item + .breadcrumbs__item::before {
content: "‹";
margin-inline-end: 0.5rem;
color: var(--text-muted);
}
.breadcrumbs__item a {
text-decoration: none;
}
.breadcrumbs__item a:hover {
color: var(--red);
text-decoration: underline;
}
/* ------------------------------------------------------------- services -- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.service-card {
position: relative;
display: grid;
align-content: end;
min-block-size: clamp(260px, 30vw, 380px);
padding: var(--space-m);
background: var(--ink);
color: #fff;
text-decoration: none;
overflow: hidden;
isolation: isolate;
}
.service-card__media {
position: absolute;
inset: 0;
z-index: -2;
}
.service-card__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.service-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
rgba(8, 8, 10, 0.9) 0%,
rgba(8, 8, 10, 0.45) 55%,
rgba(8, 8, 10, 0.25) 100%
);
transition: background 0.35s var(--ease);
}
.service-card:hover .service-card__media img,
.service-card:focus-visible .service-card__media img {
transform: scale(1.06);
}
.service-card:hover::after,
.service-card:focus-visible::after {
background: linear-gradient(
to top,
rgba(160, 4, 26, 0.92) 0%,
rgba(20, 8, 10, 0.5) 60%,
rgba(20, 8, 10, 0.3) 100%
);
}
.service-card__icon {
inline-size: 40px;
block-size: 40px;
margin-block-end: var(--space-s);
filter: brightness(0) invert(1);
}
.service-card__title {
font-size: var(--step-2);
font-weight: 800;
}
.service-card__more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-block-start: var(--space-xs);
font-weight: 700;
font-size: var(--step--1);
color: rgba(255, 255, 255, 0.8);
}
/* Inline SVG has no intrinsic size — constrain every icon that sits in text. */
.btn__arrow,
.service-card__more svg,
.case__link svg {
inline-size: 1em;
block-size: 1em;
flex: none;
}
.service-card__count {
position: absolute;
inset-block-start: var(--space-m);
inset-inline-end: var(--space-m);
padding: 0.3rem 0.7rem;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* ------------------------------------------------------------- projects -- */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
gap: var(--space-m);
}
.project-grid--feature > :first-child {
grid-column: span 2;
}
@media (max-width: 780px) {
.project-grid--feature > :first-child {
grid-column: span 1;
}
}
.project-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--paper);
border: 1px solid var(--line);
text-decoration: none;
overflow: hidden;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.project-card:hover {
border-color: var(--red);
transform: translateY(-3px);
}
.project-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-3);
}
.project-grid--feature > :first-child .project-card__media {
aspect-ratio: 16 / 9;
}
.project-card__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.55s var(--ease);
}
.project-card:hover .project-card__media img {
transform: scale(1.05);
}
.project-card__tag {
position: absolute;
inset-block-start: var(--space-xs);
inset-inline-start: var(--space-xs);
padding: 0.32rem 0.75rem;
background: var(--red);
color: #fff;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.project-card__body {
display: grid;
align-content: start;
gap: 0.4rem;
padding: var(--space-s);
}
.project-card__client {
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red);
}
.project-card__title {
font-size: var(--step-1);
font-weight: 800;
line-height: 1.25;
}
.project-card__excerpt {
font-size: var(--step--1);
color: var(--text-muted);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --------------------------------------------------------- stat / about -- */
.stat-band {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-m);
padding: var(--space-l);
background: var(--ink);
color: #fff;
}
@media (max-width: 700px) {
.stat-band {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
}
.stat-band__number {
font-size: var(--step-5);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--red-bright);
font-variant-numeric: tabular-nums;
}
.stat-band__label {
font-size: var(--step-1);
font-weight: 600;
line-height: 1.4;
max-inline-size: 46ch;
}
.media-text {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 900px) {
.media-text {
grid-template-columns: 1fr;
}
}
.media-text--flip .media-text__media {
order: 2;
}
.media-text__media img {
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.prose {
max-inline-size: 68ch;
font-size: var(--step-0);
line-height: 1.75;
color: var(--text);
}
.prose p + p {
margin-block-start: 0;
}
.section--dark .prose {
color: var(--text-invert-muted);
}
/* --------------------------------------------------------------- clients -- */
/*
* Borders live on the items rather than showing a coloured container through
* the gaps — the logo count rarely fills the last row, and an empty tinted
* cell reads as a broken image.
*/
.clients {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0;
background: var(--paper);
border-block-start: 1px solid var(--line);
border-inline-start: 1px solid var(--line);
}
.clients__item {
display: grid;
place-items: center;
padding: var(--space-s);
background: var(--paper);
aspect-ratio: 3 / 2;
border-block-end: 1px solid var(--line);
border-inline-end: 1px solid var(--line);
}
/*
* These are real client logos supplied on white backgrounds and most are
* light. The usual greyscale-until-hover treatment made them disappear
* entirely, so they render at full strength; hover just lifts them slightly.
*/
.clients__item img {
max-block-size: 74px;
inline-size: auto;
object-fit: contain;
transition: transform 0.25s var(--ease);
}
.clients__item:hover img {
transform: scale(1.05);
}
/* --------------------------------------------------------------- process -- */
.process {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-m);
counter-reset: step;
}
.process__step {
position: relative;
padding-block-start: var(--space-m);
border-block-start: 3px solid var(--line-invert);
counter-increment: step;
}
.process__step::before {
content: "0" counter(step);
display: block;
margin-block-end: var(--space-xs);
font-size: var(--step-2);
font-weight: 900;
color: var(--red-bright);
line-height: 1;
}
.process__title {
font-size: var(--step-1);
margin-block-end: 0.5rem;
}
.process__text {
color: var(--text-invert-muted);
font-size: var(--step-0);
line-height: 1.65;
}
/* ------------------------------------------------------------- galleries -- */
/*
* Flex rather than grid: with a fixed row height and flex-grow, the last row
* always fills the width. A grid left a single leftover image sitting alone
* beside empty cells, which is exactly the orphan we do not want.
*/
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 150px;
grid-auto-flow: dense;
gap: var(--space-xs);
}
.gallery__item {
grid-column: span 1;
grid-row: span 1;
margin: 0;
overflow: hidden;
background: var(--paper-3);
}
.gallery__item .zlb-trigger,
.gallery__item img {
block-size: 100%;
}
.gallery__item img {
inline-size: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease);
}
/* Editorial rhythm: a lead frame and an occasional wide one, so a set of real
photographs reads as a composed spread rather than a uniform contact sheet.
Spans engage only once there are enough columns to hold them (>=700px). */
@media (min-width: 700px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
.gallery__item:nth-child(7n + 1) {
grid-column: span 2;
grid-row: span 2;
}
.gallery__item:nth-child(7n + 5) {
grid-column: span 2;
}
}
@media (min-width: 1000px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
}
}
.gallery__item:hover img {
transform: scale(1.04);
}
/* Rail: horizontal scroll strip with snap. No carousel library. */
.rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(min(78vw, 420px), 1fr);
gap: var(--space-xs);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-block-end: var(--space-xs);
scrollbar-width: thin;
}
.rail > * {
scroll-snap-align: start;
}
.rail img {
inline-size: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
/* ------------------------------------------------------------------ faq -- */
.faq {
display: grid;
gap: 0;
border-block-start: 1px solid var(--line);
}
.faq__item {
border-block-end: 1px solid var(--line);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
inline-size: 100%;
padding-block: var(--space-s);
background: none;
border: 0;
text-align: start;
font-size: var(--step-1);
font-weight: 700;
line-height: 1.35;
}
.faq__q::after {
content: "";
inline-size: 14px;
block-size: 14px;
flex: none;
border-inline-end: 2.5px solid var(--red);
border-block-end: 2.5px solid var(--red);
transform: rotate(45deg);
transition: transform 0.24s var(--ease);
}
.faq__q[aria-expanded="true"]::after {
transform: rotate(225deg);
}
.faq__a {
padding-block-end: var(--space-s);
max-inline-size: 76ch;
color: var(--text-muted);
line-height: 1.7;
}
.faq__a[hidden] {
display: none;
}
/* ------------------------------------------------------------------ cta -- */
.cta-band {
position: relative;
background: var(--red);
color: #fff;
overflow: hidden;
}
.cta-band__inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-l);
padding-block: var(--space-xl);
}
@media (max-width: 860px) {
.cta-band__inner {
grid-template-columns: 1fr;
}
}
.cta-band__title {
font-size: var(--step-3);
max-inline-size: 22ch;
}
.cta-band__text {
margin-block-start: var(--space-xs);
max-inline-size: 54ch;
color: rgba(255, 255, 255, 0.88);
font-size: var(--step-1);
}
.cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
/* --------------------------------------------------------------- footer -- */
.site-footer {
background: var(--ink);
color: var(--text-invert-muted);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1.4fr;
gap: var(--space-l);
padding-block: var(--space-xl);
}
@media (max-width: 980px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr;
}
.site-footer__col--form {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.site-footer__grid {
grid-template-columns: 1fr;
}
}
.site-footer__logo img {
block-size: 52px;
inline-size: auto;
margin-block-end: var(--space-s);
}
.site-footer__title {
margin-block-end: var(--space-s);
font-size: var(--step-1);
color: #fff;
}
.footer-contact {
display: grid;
gap: 0.6rem;
list-style: none;
font-size: 1.03rem;
}
.footer-contact a,
.footer-contact span {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
transition: color 0.15s var(--ease);
}
.footer-contact a:hover {
color: #fff;
}
.footer-contact svg {
inline-size: 18px;
block-size: 18px;
flex: none;
opacity: 0.75;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.55rem var(--space-s);
list-style: none;
}
.footer-nav a {
text-decoration: none;
font-size: var(--step--1);
transition: color 0.15s var(--ease);
}
.footer-nav a:hover {
color: #fff;
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-xs) var(--space-s);
padding-block: var(--space-xs);
border-block-start: 1px solid var(--line-invert);
font-size: var(--step--1);
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
list-style: none;
}
.site-footer__legal a {
text-decoration: none;
}
.site-footer__legal a:hover {
color: #fff;
text-decoration: underline;
}
/* ----------------------------------------------------------------- form -- */
/* Light surface is the default; the dark treatment is opt-in via .is-inverted
(the footer). Keying it the other way round left the contact form white on
white, because that page is not .page-body. */
.form-shell {
padding: var(--space-m);
background: var(--paper-2);
border: 1px solid var(--line);
}
.is-inverted .form-shell,
.site-footer .form-shell {
background: rgba(255, 255, 255, 0.05);
border-color: var(--line-invert);
}
.zform {
display: grid;
gap: var(--space-s);
}
.zform__row {
display: grid;
gap: 0.4rem;
}
.zform__row--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-s);
}
@media (max-width: 560px) {
.zform__row--split {
grid-template-columns: 1fr;
}
}
.zform label {
font-size: var(--step--1);
font-weight: 600;
color: inherit;
}
.zform .req {
color: var(--red-bright);
}
.zform input[type="text"],
.zform input[type="tel"],
.zform input[type="email"],
.zform select,
.zform textarea {
inline-size: 100%;
padding: 0.85rem 1rem;
background: #fff;
color: var(--ink);
/* A visible edge on a light page; the footer overrides it below. */
border: 1px solid var(--line);
border-radius: var(--radius);
}
.is-inverted .zform input[type="text"],
.is-inverted .zform input[type="tel"],
.is-inverted .zform input[type="email"],
.is-inverted .zform select,
.is-inverted .zform textarea,
.site-footer .zform input[type="text"],
.site-footer .zform input[type="tel"],
.site-footer .zform input[type="email"],
.site-footer .zform select,
.site-footer .zform textarea {
border-color: transparent;
}
.zform textarea {
resize: vertical;
min-block-size: 110px;
}
.zform input[aria-invalid="true"],
.zform select[aria-invalid="true"],
.zform textarea[aria-invalid="true"] {
border-color: var(--red-bright);
box-shadow: 0 0 0 3px rgba(240, 16, 47, 0.25);
}
.zform__error {
font-size: 0.82rem;
font-weight: 600;
color: var(--red-dark);
}
.is-inverted .zform__error,
.site-footer .zform__error {
color: var(--red-on-dark);
}
.zform__error:empty {
display: none;
}
.zform__consent {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.65rem;
align-items: start;
font-size: var(--step--1);
line-height: 1.5;
}
.zform__consent input {
inline-size: 22px;
block-size: 22px;
margin-block-start: 0.15rem;
accent-color: var(--red);
}
.zform__hp {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.zform__status {
padding: var(--space-s);
border-inline-start: 4px solid var(--red);
background: rgba(13, 13, 15, 0.05);
font-weight: 600;
}
.is-inverted .zform__status,
.site-footer .zform__status {
background: rgba(255, 255, 255, 0.08);
}
.zform__status--ok {
border-inline-start-color: #17a05a;
}
.zform button[type="submit"][disabled] {
opacity: 0.6;
cursor: progress;
}
/* Form on a light background */
.page-body .form-shell {
background: var(--paper-2);
border-color: var(--line);
}
.page-body .zform input,
.page-body .zform select,
.page-body .zform textarea {
border-color: var(--line);
}
.page-body .zform__status {
background: rgba(13, 13, 15, 0.04);
}
/* ------------------------------------------------------------ page body -- */
.page-body {
padding-block: var(--space-2xl);
}
.page-body .prose h2 {
margin-block: var(--space-l) var(--space-s);
font-size: var(--step-2);
}
.page-body .prose h3 {
margin-block: var(--space-m) var(--space-xs);
font-size: var(--step-1);
}
.page-body .prose ul,
.page-body .prose ol {
margin-block: var(--space-s);
padding-inline-start: 1.4rem;
}
.page-body .prose li {
margin-block-end: 0.45rem;
}
/* ------------------------------------------------------------ case study -- */
.case {
display: grid;
gap: var(--space-m);
padding-block: var(--space-xl);
border-block-start: 1px solid var(--line);
}
.case:first-of-type {
border-block-start: 0;
}
.case__head {
display: grid;
gap: var(--space-xs);
max-inline-size: 72ch;
}
.case__client {
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--red);
}
.case__title {
font-size: var(--step-2);
}
.case__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 700;
color: var(--red);
text-decoration: none;
}
.case__link:hover {
text-decoration: underline;
}
/* ----------------------------------------------------------------- 404 -- */
.error-404 {
display: grid;
place-items: center;
min-block-size: 62vh;
padding-block: var(--space-2xl);
text-align: center;
}
.error-404__code {
font-size: clamp(5rem, 18vw, 11rem);
font-weight: 900;
line-height: 0.85;
color: var(--red);
letter-spacing: -0.05em;
}
.error-404__title {
margin-block: var(--space-s) var(--space-xs);
font-size: var(--step-3);
}
.error-404__text {
max-inline-size: 52ch;
margin-inline: auto;
color: var(--text-muted);
}
.error-404__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: center;
margin-block-start: var(--space-l);
}
/* --------------------------------------------------------- whatsapp fab -- */
.wa-fab {
position: fixed;
inset-block-end: clamp(1rem, 3vw, 1.75rem);
inset-inline-end: clamp(1rem, 3vw, 1.75rem);
z-index: 70;
display: grid;
place-items: center;
inline-size: 54px;
block-size: 54px;
border-radius: 50%;
background: #25d366;
color: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
transition: transform 0.2s var(--ease);
}
.wa-fab:hover {
transform: scale(1.07);
}
.wa-fab svg {
inline-size: 28px;
block-size: 28px;
}
/* --------------------------------------------------------------- search -- */
.search-form {
display: flex;
gap: 0.5rem;
max-inline-size: 440px;
}
.search-form input {
flex: 1;
padding: 0.8rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.search-results {
display: grid;
gap: var(--space-m);
}
.search-result {
padding-block-end: var(--space-m);
border-block-end: 1px solid var(--line);
}
.search-result h2 {
font-size: var(--step-1);
margin-block-end: 0.4rem;
}
.search-result a {
text-decoration: none;
}
.search-result a:hover {
color: var(--red);
}
/* ------------------------------------------------------------ pagination -- */
.pagination {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
margin-block-start: var(--space-xl);
}
.pagination .page-numbers {
display: grid;
place-items: center;
min-inline-size: 44px;
min-block-size: 44px;
padding-inline: 0.6rem;
border: 1px solid var(--line);
font-weight: 700;
text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: var(--red);
border-color: var(--red);
color: #fff;
}
/* -------------------------------------------------------------- reveal -- */
/*
* Single, restrained entrance.
*
* The hidden state is scoped to html.js, which is set by an inline script at
* the top of . Without JavaScript the class never lands and every
* .reveal block renders normally — the effect can never hide content.
* Disabled entirely under reduced-motion.
*/
@media (prefers-reduced-motion: no-preference) {
/*
* Transform only — deliberately no opacity fade.
* A partially-transparent block blends with whatever sits behind it, which
* breaks real contrast for the duration of the animation (and trips
* automated contrast checks). Moving the block keeps every colour pair
* exactly as designed at every frame.
*/
.js .reveal {
transform: translateY(20px);
transition: transform 0.55s var(--ease);
transition-delay: var(--reveal-delay, 0s);
will-change: transform;
}
.js .reveal.is-visible {
transform: none;
will-change: auto;
}
}
/* ==========================================================================
V2 — homepage and global chrome
Carries the identifying elements of the existing site into the new layout:
the ladybug-bulb mark, short red rules, the original line icons, a fine dot
pattern and diagonal red accents. Used sparingly, on purpose.
========================================================================== */
:root {
--dots: radial-gradient(circle at center, rgba(13, 13, 15, 0.14) 1.4px, transparent 1.5px);
--dots-light: radial-gradient(circle at center, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.5px);
--dots-size: 17px 17px;
/* #f0102f only reaches 4.07:1 on the dark surfaces, which fails AA for
small text. This lighter tint clears 5.7:1 and is used wherever brand red
carries body-sized copy on black. */
--red-on-dark: #ff5566;
}
/* ------------------------------------------------------- brand fragments -- */
.brand-mark {
inline-size: auto;
block-size: 42px;
}
.svc-icon {
inline-size: 34px;
block-size: 34px;
flex: none;
color: currentColor;
}
.bhead {
margin-block-end: var(--space-l);
}
.bhead--center {
display: grid;
justify-items: center;
text-align: center;
}
.bhead--start {
display: grid;
justify-items: start;
}
.brand-mark,
.bhead__mark,
.about2__mark {
/* width/height attributes are on the tag for CLS; the aspect must be kept
when a height is imposed here, or the mark renders squashed. */
inline-size: auto;
max-inline-size: none;
}
.bhead__mark {
block-size: 46px;
margin-block-end: var(--space-xs);
}
.bhead__kicker {
margin: 0 0 0.5rem;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
}
.bhead__title {
font-size: var(--step-3);
font-weight: 900;
letter-spacing: -0.025em;
}
.bhead__rule {
display: block;
inline-size: 62px;
block-size: 4px;
margin-block-start: var(--space-xs);
background: var(--red);
}
.bhead--center .bhead__rule {
margin-inline: auto;
}
.bhead__lede {
margin-block-start: var(--space-s);
max-inline-size: 56ch;
font-size: var(--step-1);
line-height: 1.5;
color: var(--text-muted);
}
.section--dark .bhead__lede,
.is-inverted .bhead__lede {
color: var(--text-invert-muted);
}
.section__action {
margin-block-start: var(--space-l);
text-align: center;
}
/* -------------------------------------------------------------- header -- */
.topbar__inner {
min-block-size: 38px;
font-size: 0.9rem;
}
.topbar__list {
gap: var(--space-s);
}
.topbar__link svg {
inline-size: 15px;
block-size: 15px;
}
.social__link {
inline-size: 29px;
block-size: 29px;
}
.social__link svg {
inline-size: 15px;
block-size: 15px;
}
/* The address is the first thing to go when the bar gets tight — phone and
email are the actionable details. */
@media (max-width: 1180px) {
.topbar__list li:nth-child(3) {
display: none;
}
}
:root {
/* Only +4px for a 22% larger logo: the extra height comes from trimming
the vertical padding around it, not from a taller bar. */
--header-h: 82px;
}
@media (max-width: 900px) {
:root {
--header-h: 66px;
}
}
/* The logo is tall and near-square; capping the height keeps it from
dominating the whole composition the way it did in V1. */
.site-logo img,
.custom-logo {
block-size: 56px !important;
inline-size: auto !important;
max-inline-size: none;
}
@media (max-width: 900px) {
.site-logo img,
.custom-logo {
block-size: 40px !important;
}
}
.nav__list {
gap: clamp(0.55rem, 1.3vw, 1.35rem);
}
.nav__link {
font-size: clamp(0.94rem, 1vw, 1.02rem);
font-weight: 600;
}
.header__cta {
padding: 0.66rem 1.35rem;
font-size: 0.95rem;
}
.site-header {
background: rgba(255, 255, 255, 0.96);
transition: box-shadow 0.2s var(--ease);
}
/* A hairline of brand red under the header keeps it deliberate when stuck. */
.site-header::after {
content: "";
position: absolute;
inset-block-end: -1px;
inset-inline: 0;
block-size: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform 0.35s var(--ease);
}
body.is-scrolled .site-header {
box-shadow: 0 6px 24px rgba(13, 13, 15, 0.09);
}
body.is-scrolled .site-header::after {
transform: scaleX(1);
}
/* ---------------------------------------------------------------- hero -- */
.hero2 {
position: relative;
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero2__dots {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: min(46%, 520px);
block-size: 62%;
z-index: 0;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.5;
pointer-events: none;
}
.hero2__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
@media (max-width: 980px) {
.hero2__inner {
grid-template-columns: 1fr;
}
}
.hero2__kicker {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 var(--space-s);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
}
.hero2__kicker::before {
content: "";
inline-size: 2.4rem;
block-size: 4px;
background: var(--red);
}
.hero2__title {
font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.4rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.028em;
max-inline-size: 20ch;
}
.hero2__title-em {
color: var(--red-bright);
}
/* The slogan is a display element, not the page's only message: the H1 above
still says what the company does. */
.hero2__slogan {
position: relative;
margin: var(--space-m) 0 0;
padding-inline-start: 1.05rem;
border-inline-start: 4px solid var(--red);
font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.75rem);
font-weight: 700;
line-height: 1.2;
color: rgba(255, 255, 255, 0.94);
}
.hero2__text {
margin-block-start: var(--space-m);
max-inline-size: 50ch;
font-size: var(--step-0);
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
}
.hero2__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-block-start: var(--space-l);
}
/* Collage: one large frame with two smaller real photographs, no slider. */
.hero2__media {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--space-xs);
}
.hero2__shot {
margin: 0;
overflow: hidden;
background: var(--ink-3);
}
.hero2__shot img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.hero2__shot--main {
grid-column: 1 / -1;
position: relative;
aspect-ratio: 16 / 10;
/* The frame is drawn outside the figure, so it must not be clipped. */
overflow: visible;
}
.hero2__shot--main img {
position: relative;
z-index: 1;
}
/* Offset red frame sitting behind the photograph — the same device the
current site uses around its about image. */
.hero2__shot--main::before {
content: "";
position: absolute;
inset-block: -14px 14px;
inset-inline: -14px 14px;
z-index: 0;
border: 3px solid var(--red);
pointer-events: none;
}
.hero2__shot--1,
.hero2__shot--2 {
aspect-ratio: 4 / 3;
}
@media (max-width: 620px) {
.hero2__shot--main {
aspect-ratio: 16 / 11;
}
.hero2__shot--main::before {
inset-block: -8px 8px;
inset-inline: -8px 8px;
}
}
/* ------------------------------------------------------------ services -- */
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-s);
}
@media (max-width: 1000px) {
.svc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 620px) {
.svc-grid {
grid-template-columns: 1fr;
}
}
.svc {
position: relative;
display: grid;
align-content: end;
min-block-size: 300px;
padding: var(--space-m);
background: var(--ink);
color: #fff;
text-decoration: none;
overflow: hidden;
isolation: isolate;
}
.svc__media {
position: absolute;
inset: 0;
z-index: -2;
}
.svc__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
/* One consistent overlay across every card, so titles read the same on a
bright retail shot and a dark night shot alike. */
.svc::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to top,
rgba(8, 8, 10, 0.94) 0%,
rgba(8, 8, 10, 0.72) 42%,
rgba(8, 8, 10, 0.38) 100%
);
transition: background 0.35s var(--ease);
}
.svc:hover .svc__media img,
.svc:focus-visible .svc__media img {
transform: scale(1.06);
}
.svc:hover::after,
.svc:focus-visible::after {
background: linear-gradient(
to top,
rgba(150, 3, 24, 0.94) 0%,
rgba(20, 8, 10, 0.74) 46%,
rgba(20, 8, 10, 0.4) 100%
);
}
.svc__body {
display: grid;
gap: 0.5rem;
justify-items: start;
}
.svc__body .svc-icon {
color: #fff;
opacity: 0.95;
}
.svc__title {
font-size: var(--step-2);
font-weight: 800;
line-height: 1.15;
}
.svc__count {
font-size: var(--step--1);
font-weight: 600;
color: rgba(255, 255, 255, 0.72);
}
.svc__rule {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inline-size: 72px;
block-size: 5px;
background: var(--red);
transition: inline-size 0.35s var(--ease);
}
.svc:hover .svc__rule,
.svc:focus-visible .svc__rule {
inline-size: 100%;
}
/* Food truck band */
.truck {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
margin-block-start: var(--space-s);
background: var(--ink);
color: #fff;
text-decoration: none;
overflow: hidden;
}
@media (max-width: 820px) {
.truck {
grid-template-columns: 1fr;
}
}
.truck__media {
position: relative;
min-block-size: 260px;
}
.truck__media img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.truck:hover .truck__media img {
transform: scale(1.04);
}
.truck__body {
display: grid;
align-content: center;
justify-items: start;
gap: 0.6rem;
padding: var(--space-l) var(--space-m);
background-image: var(--dots-light);
background-size: var(--dots-size);
}
.truck__icon {
inline-size: 42px;
block-size: 42px;
color: var(--red-bright);
}
.truck__title {
font-size: var(--step-3);
font-weight: 900;
}
.truck__text {
max-inline-size: 44ch;
color: var(--text-invert-muted);
}
.truck__more {
margin-block-start: 0.4rem;
font-weight: 700;
color: var(--red-on-dark);
}
.truck:hover .truck__more {
text-decoration: underline;
}
/* ------------------------------------------------------------ projects -- */
.proj-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 168px;
grid-auto-flow: dense;
gap: var(--space-xs);
}
@media (min-width: 640px) {
.proj-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
}
@media (min-width: 1000px) {
.proj-grid {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 214px;
}
/* Editorial rhythm: a large lead work, then an occasional wide frame, so the
portfolio reads as a curated spread rather than a uniform catalogue. The
pattern repeats every six cards; dense flow backfills any gaps. */
.proj-grid > .proj:nth-child(6n + 1) {
grid-column: span 2;
grid-row: span 2;
}
.proj-grid > .proj:nth-child(6n + 4) {
grid-column: span 2;
}
}
.proj {
position: relative;
display: block;
grid-column: span 1;
grid-row: span 1;
overflow: hidden;
text-decoration: none;
color: #fff;
background: var(--ink-2);
isolation: isolate;
}
.proj__media {
position: absolute;
inset: 0;
margin: 0;
overflow: hidden;
background: var(--ink-3);
}
.proj__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.proj:hover .proj__media img,
.proj:focus-visible .proj__media img {
transform: scale(1.06);
}
/* Legibility scrim under the caption. */
.proj::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.36) 36%,
rgba(0, 0, 0, 0) 64%
);
pointer-events: none;
}
.proj__cat {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 2;
padding: 0.32rem 0.78rem;
background: var(--red);
color: #fff;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.proj__body {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 2;
display: grid;
gap: 0.2rem;
padding: var(--space-s);
}
.proj__client {
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--red-on-dark);
}
.proj__title {
font-size: var(--step-0);
font-weight: 800;
line-height: 1.25;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* The lead (spanning) card carries a larger title. */
.proj-grid > .proj:nth-child(6n + 1) .proj__title {
font-size: var(--step-2);
}
.proj__more {
font-size: var(--step--1);
font-weight: 700;
color: #fff;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.proj:hover .proj__more,
.proj:focus-visible .proj__more {
opacity: 1;
transform: translateY(0);
}
@media (hover: none) {
/* Touch devices never hover — keep the affordance visible. */
.proj__more {
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------------- about -- */
.about2 {
position: relative;
overflow: hidden;
}
.about2__dots {
position: absolute;
inset-block-start: 8%;
inset-inline-start: 0;
inline-size: min(38%, 380px);
block-size: 60%;
background-image: var(--dots);
background-size: var(--dots-size);
opacity: 0.65;
pointer-events: none;
}
.about2__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(2.5rem, 6vw, 5rem);
}
@media (max-width: 900px) {
.about2__inner {
grid-template-columns: 1fr;
}
}
.about2__media {
position: relative;
}
/* :not() keeps the decorative mark, which is also an ![]()
in this
container, from picking up the photograph's sizing and cropping. */
.about2__media > img:not(.about2__mark) {
position: relative;
z-index: 1;
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* Offset red frame, the way the current site frames its about image. */
.about2__frame {
position: absolute;
inset: 0;
z-index: 0;
border: 4px solid var(--red);
transform: translate(-18px, -18px);
}
.about2__media > img.about2__mark {
position: absolute;
z-index: 2;
inset-block-start: -26px;
inset-inline-start: -22px;
inline-size: auto;
block-size: 74px;
aspect-ratio: auto;
object-fit: contain;
}
@media (max-width: 620px) {
.about2__frame {
transform: translate(-10px, -10px);
}
.about2__media > img.about2__mark {
block-size: 56px;
inset-block-start: -18px;
}
}
.about2__title {
font-size: var(--step-3);
font-weight: 900;
letter-spacing: -0.025em;
}
.about2__copy .prose {
margin-block-start: var(--space-m);
font-size: var(--step-1);
line-height: 1.6;
}
.about2__action {
margin-block-start: var(--space-m);
}
/* ------------------------------------------------------------- clients -- */
/* 15 logos: 5×3, 3×5, never an orphan row.
Hairline separators only — the previous full grid read as a data table. */
.clients2 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: rgba(13, 13, 15, 0.07);
border: 1px solid rgba(13, 13, 15, 0.07);
}
@media (max-width: 900px) {
.clients2 {
grid-template-columns: repeat(3, 1fr);
}
}
.clients2__item {
display: grid;
place-items: center;
/* Short cells of one fixed height, so no row is shorter than its neighbours.
The marks fill them instead of floating in whitespace. */
block-size: 108px;
padding: var(--space-s) var(--space-xs);
background: var(--paper);
}
@media (max-width: 900px) {
.clients2__item {
block-size: 98px;
}
}
/* --logo-h comes from zivp_logo_height(), solved per logo for a constant
rendered area so a wide wordmark and a square badge carry the same weight.
Both axes are maxima, so in a narrow cell the width becomes the binding
constraint and the height follows the intrinsic ratio — never distorted,
never overflowing. */
.clients2__logo {
inline-size: auto;
block-size: auto;
max-block-size: var(--logo-h, 56px);
max-inline-size: 100%;
object-fit: contain;
transition: transform 0.25s var(--ease);
}
@media (max-width: 900px) {
/* Give the marks every pixel of cell width on a phone: three columns are
required to keep 15 logos symmetric, so width is what is scarce. */
.clients2__item {
padding-inline: 0.4rem;
}
}
.clients2__item:hover .clients2__logo {
transform: scale(1.07);
}
/* ------------------------------------------------------------- process -- */
.process2 {
background: var(--ink);
color: #fff;
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-m) var(--space-l);
list-style: none;
}
@media (max-width: 860px) {
.steps {
grid-template-columns: 1fr;
gap: var(--space-m);
}
}
.step {
position: relative;
display: grid;
justify-items: start;
gap: 0.35rem;
padding-block-start: var(--space-s);
border-block-start: 3px solid rgba(255, 255, 255, 0.18);
}
.step__num {
font-size: clamp(2.6rem, 1.6rem + 2.6vw, 3.6rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--red-bright);
}
.step__icon {
inline-size: 30px;
block-size: 30px;
margin-block-start: 0.3rem;
color: rgba(255, 255, 255, 0.7);
}
.step__title {
margin-block-start: 0.35rem;
font-size: var(--step-2);
font-weight: 800;
}
.step__sub {
margin: 0;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--red-on-dark);
}
.step__text {
margin: 0.35rem 0 0;
max-inline-size: 36ch;
font-size: var(--step-1);
line-height: 1.55;
/* 0.72 alpha measured thin against pure black; 0.9 keeps it comfortable
without turning the paragraph into a second headline. */
color: rgba(255, 255, 255, 0.9);
}
/* -------------------------------------------------------------- footer -- */
.site-footer__grid {
grid-template-columns: 1.1fr 0.9fr 1.2fr;
/* Every column starts at the same top line. */
align-items: start;
gap: var(--space-m) var(--space-xl);
padding-block: var(--space-l) var(--space-m);
}
.site-footer__brand {
display: flex;
align-items: center;
gap: 0.85rem;
margin-block-end: var(--space-s);
}
.site-footer__brand img {
block-size: 50px;
inline-size: auto;
max-inline-size: none;
flex: none;
}
.site-footer__brand .site-footer__title {
margin: 0;
}
.site-footer__title {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: var(--step-1);
font-weight: 800;
}
.site-footer__title::after {
content: "";
flex: 1;
block-size: 2px;
background: var(--line-invert);
}
.site-footer__col--form .form-shell {
padding: var(--space-s);
background: rgba(255, 255, 255, 0.04);
}
/* Keep the footer form compact: two fields per row, tighter gaps. */
.site-footer__col--form .zform {
gap: 0.7rem;
}
.site-footer__col--form .zform input[type="text"],
.site-footer__col--form .zform input[type="tel"],
.site-footer__col--form .zform input[type="email"],
.site-footer__col--form .zform select,
.site-footer__col--form .zform textarea {
padding: 0.66rem 0.8rem;
}
.site-footer__col--form .zform textarea {
min-block-size: 0;
block-size: 62px;
resize: vertical;
}
.site-footer__col--form .zform label {
font-size: 0.82rem;
}
.footer-nav {
gap: 0.5rem var(--space-s);
}
/* Two columns of Hebrew service names wrap badly on a phone; one column
reads cleanly and costs only a little height. */
@media (max-width: 620px) {
.footer-nav {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
.svc__media img,
.proj__media img,
.truck__media img,
.clients2__item img {
transition: none;
}
}
/* ==========================================================================
Internal pages
Same system as the approved homepage — brand mark, short red rules, the
original line icons, dot pattern, offset red frames — arranged to suit each
page type rather than repeating the homepage composition.
========================================================================== */
/* -------------------------------------------------------- internal hero -- */
.ihero {
position: relative;
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.ihero__dots {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: min(42%, 460px);
block-size: 100%;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.45;
pointer-events: none;
}
.ihero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;
gap: clamp(1.75rem, 4vw, 3.5rem);
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.ihero--compact .ihero__inner {
grid-template-columns: 1fr;
padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
@media (max-width: 900px) {
.ihero__inner {
grid-template-columns: 1fr;
}
}
.ihero__kicker {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 var(--space-xs);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ihero__kicker::before {
content: "";
inline-size: 2.2rem;
block-size: 4px;
background: var(--red);
}
.ihero__title {
font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
font-weight: 900;
letter-spacing: -0.025em;
line-height: 1.06;
max-inline-size: 22ch;
}
.ihero__lede {
margin-block-start: var(--space-s);
max-inline-size: 54ch;
font-size: var(--step-1);
line-height: 1.5;
color: rgba(255, 255, 255, 0.84);
}
.ihero__media {
position: relative;
margin: 0;
overflow: visible;
}
.ihero__media img {
position: relative;
z-index: 1;
inline-size: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.ihero__media::before {
content: "";
position: absolute;
inset-block: -12px 12px;
inset-inline: -12px 12px;
z-index: 0;
border: 3px solid var(--red);
pointer-events: none;
}
/* Reusable offset frame for any figure. */
.frame-accent {
position: absolute;
inset-block: -14px 14px;
inset-inline: -14px 14px;
z-index: 0;
border: 3px solid var(--red);
pointer-events: none;
}
@media (max-width: 620px) {
.frame-accent,
.ihero__media::before {
inset-block: -8px 8px;
inset-inline: -8px 8px;
}
}
/* --------------------------------------------------------- prose scales -- */
.prose--lead {
font-size: var(--step-1);
line-height: 1.65;
}
.prose--lead p + p {
margin-block-start: 1em;
}
/* A measured reading column for legal and policy text. */
.textpage {
max-inline-size: 68ch;
margin-inline: auto;
}
.prose--doc {
font-size: 1.06rem;
line-height: 1.85;
}
.prose--doc h2 {
margin-block: 2.2em 0.6em;
font-size: var(--step-2);
}
.prose--doc h3 {
margin-block: 1.8em 0.5em;
font-size: var(--step-1);
}
.prose--doc a {
color: var(--red-dark);
}
/* ------------------------------------------------------------ stat band -- */
.statband {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: var(--space-s) var(--space-m);
padding: var(--space-m) var(--space-l);
background: var(--ink);
color: #fff;
background-image: var(--dots-light);
background-size: var(--dots-size);
}
@media (max-width: 760px) {
.statband {
grid-template-columns: auto 1fr;
gap: var(--space-xs) var(--space-s);
}
.statband__label {
grid-column: 1 / -1;
}
}
.statband__icon {
inline-size: 40px;
block-size: 40px;
color: var(--red-bright);
}
.statband__num {
font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--red-bright);
font-variant-numeric: tabular-nums;
}
.statband__label {
font-size: var(--step-1);
font-weight: 600;
line-height: 1.4;
max-inline-size: 48ch;
}
/* ------------------------------------------------------- service intro -- */
.svc-intro {
position: relative;
overflow: hidden;
}
.svc-intro__dots {
position: absolute;
inset-block-start: 10%;
inset-inline-end: 0;
inline-size: min(30%, 300px);
block-size: 62%;
background-image: var(--dots);
background-size: var(--dots-size);
opacity: 0.6;
pointer-events: none;
}
.svc-intro__inner {
position: relative;
display: grid;
grid-template-columns: 1fr 0.85fr;
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) {
.svc-intro__inner {
grid-template-columns: 1fr;
}
}
.svc-intro__title {
font-size: var(--step-2);
font-weight: 900;
}
.svc-intro__copy .prose {
margin-block-start: var(--space-m);
}
.svc-intro__media {
position: relative;
margin: 0;
}
.svc-intro__media img {
position: relative;
z-index: 1;
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* --------------------------------------------------------- about page -- */
.about-story {
position: relative;
overflow: hidden;
}
.about-story__dots {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: min(34%, 340px);
block-size: 70%;
background-image: var(--dots);
background-size: var(--dots-size);
opacity: 0.55;
pointer-events: none;
}
/* ------------------------------------------------------- project filter -- */
.pfilter {
background: var(--paper-2);
border-block-end: 1px solid var(--line);
}
.pfilter__list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding-block: var(--space-s);
}
/*
* Plain links, so the filter needs no JavaScript, works with the keyboard by
* default and every state is a crawlable URL.
*/
.pfilter__chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-block-size: 44px;
padding: 0.5rem 1.1rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
color 0.18s var(--ease);
}
.pfilter__chip:hover {
border-color: var(--red);
background: var(--paper-2);
color: var(--red);
}
.pfilter__chip.is-active {
background: var(--red);
border-color: var(--red);
color: #fff;
}
.pfilter__n {
font-size: 0.78rem;
font-weight: 700;
opacity: 0.62;
font-variant-numeric: tabular-nums;
}
.pfilter__chip.is-active .pfilter__n {
/* Full white: 0.85 alpha over brand red measured 4.27:1, under AA for this
text size. */
opacity: 1;
}
/* The project card is now an image-overlay tile — white caption on a scrim —
so it reads identically on light and dark sections; no per-section colours. */
/* ------------------------------------------------------- project single -- */
.phero {
position: relative;
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.phero__dots {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: min(40%, 420px);
block-size: 100%;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.4;
pointer-events: none;
}
.phero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.05fr;
align-items: center;
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) {
.phero__inner {
grid-template-columns: 1fr;
}
}
.phero__cat {
display: inline-block;
margin-block-end: var(--space-xs);
padding: 0.32rem 0.85rem;
background: var(--red);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
text-decoration: none;
}
.phero__cat:hover {
background: var(--red-dark);
}
.phero__title {
font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.8rem);
font-weight: 900;
letter-spacing: -0.025em;
line-height: 1.1;
}
.phero__lede {
margin-block-start: var(--space-s);
max-inline-size: 52ch;
font-size: var(--step-1);
line-height: 1.55;
color: rgba(255, 255, 255, 0.82);
}
.phero__media {
position: relative;
margin: 0;
}
.phero__media img {
position: relative;
z-index: 1;
inline-size: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.facts {
display: grid;
gap: 0.55rem;
margin: var(--space-m) 0 0;
padding-block-start: var(--space-s);
border-block-start: 1px solid var(--line-invert);
}
.facts__row {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--space-s);
align-items: baseline;
}
.facts__k {
margin: 0;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--red-on-dark);
}
.facts__v {
margin: 0;
font-weight: 600;
}
.pvideo {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--ink-3);
}
/* ---------------------------------------------------- case-study blocks -- */
.case {
display: grid;
gap: var(--space-m);
}
.case__block {
position: relative;
padding-inline-start: 1.25rem;
border-inline-start: 3px solid var(--red);
}
.case__title {
margin: 0 0 0.4rem;
font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
line-height: 1.2;
}
.case__block--result {
padding: var(--space-s) var(--space-s) var(--space-s) 1.25rem;
background: var(--paper-2, #f6f5f3);
border-radius: 4px;
}
.pullquote {
margin: 0;
padding-inline-start: 1.5rem;
border-inline-start: 4px solid var(--red);
}
.pullquote p {
margin: 0;
font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.9rem);
font-weight: 600;
line-height: 1.3;
}
.pullquote cite {
display: block;
margin-block-start: 0.75rem;
font-size: 0.95rem;
font-style: normal;
color: var(--ink-2, #555);
}
.svc-link {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-m);
padding: var(--space-m);
background: var(--paper-2);
border-inline-start: 5px solid var(--red);
}
@media (max-width: 700px) {
.svc-link {
grid-template-columns: 1fr;
}
}
.svc-link__title {
font-size: var(--step-2);
font-weight: 900;
}
.svc-link__text {
margin-block-start: 0.5rem;
max-inline-size: 58ch;
color: var(--text-muted);
}
/* ------------------------------------------------------------- contact -- */
.promises {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-s);
list-style: none;
}
/* The contact page adds WhatsApp as a fourth action; flow the row instead of
forcing three columns so all four stay comfortable across widths. */
.promises--contact {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
@media (max-width: 820px) {
.promises {
grid-template-columns: 1fr;
}
.promises--contact {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
}
.site-footer__cta-text {
margin: 0 0 0.9rem;
opacity: 0.82;
}
.promise {
display: grid;
justify-items: start;
gap: 0.3rem;
padding: var(--space-m);
background: var(--ink);
color: #fff;
background-image: var(--dots-light);
background-size: var(--dots-size);
}
.promise__icon {
inline-size: 26px;
block-size: 26px;
margin-block-end: 0.35rem;
color: var(--red-bright);
}
.promise__title {
font-size: var(--step-1);
font-weight: 800;
}
.promise__value {
display: inline-flex;
align-items: center;
min-block-size: 44px;
font-size: var(--step-0);
font-weight: 600;
color: var(--red-on-dark);
}
.contact-main__inner {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 900px) {
.contact-main__inner {
grid-template-columns: 1fr;
}
}
.contact-main__title {
font-size: var(--step-2);
font-weight: 900;
max-inline-size: 26ch;
}
.contact-main__title--small {
font-size: var(--step-1);
}
.contact-main__lede {
margin-block: var(--space-s) var(--space-m);
color: var(--text-muted);
font-size: var(--step-1);
}
.contact-main__aside {
position: relative;
padding: var(--space-m);
background: var(--paper-2);
border-block-start: 4px solid var(--red);
overflow: hidden;
}
.contact-list {
display: grid;
gap: var(--space-s);
margin-block-start: var(--space-m);
list-style: none;
}
.contact-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.7rem;
align-items: start;
}
.contact-list svg {
inline-size: 20px;
block-size: 20px;
margin-block-start: 0.35rem;
color: var(--red);
flex: none;
}
.contact-list__label {
display: block;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.contact-list a {
font-weight: 600;
text-decoration: none;
}
.contact-list a:hover {
color: var(--red);
text-decoration: underline;
}
.social--dark {
margin-block-start: var(--space-m);
}
.social--dark .social__link {
border-color: var(--line);
color: var(--ink);
}
.social--dark .social__link:hover {
background: var(--red);
border-color: var(--red);
color: #fff;
}
.contact-main__mark {
position: absolute;
inset-block-end: -30px;
inset-inline-start: -26px;
inline-size: auto;
block-size: 104px;
opacity: 0.07;
pointer-events: none;
}
/* --------------------------------------------------------- food truck -- */
.thero {
position: relative;
min-block-size: clamp(400px, 56vh, 560px);
display: grid;
align-items: end;
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.thero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.thero__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.thero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
/* A touch of the truck's own violet, still anchored to the brand black. */
background: linear-gradient(
to top,
rgba(10, 8, 14, 0.94) 0%,
rgba(38, 12, 48, 0.72) 45%,
rgba(20, 10, 26, 0.4) 100%
);
}
.thero__dots {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 0;
inline-size: min(40%, 400px);
block-size: 60%;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.4;
pointer-events: none;
}
.thero__inner {
position: relative;
z-index: 1;
padding-block: var(--space-xl) var(--space-l);
}
.thero__icon {
inline-size: 46px;
block-size: 46px;
margin-block-end: var(--space-xs);
color: var(--red-bright);
}
.thero__kicker {
margin: 0 0 0.4rem;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.thero__title {
font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
font-weight: 900;
letter-spacing: -0.03em;
}
.thero__lede {
margin-block-start: var(--space-s);
max-inline-size: 48ch;
font-size: var(--step-1);
color: rgba(255, 255, 255, 0.88);
}
.thero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-block-start: var(--space-m);
}
.truck-copy h2 {
margin-block: 1.8em 0.5em;
font-size: var(--step-2);
font-weight: 900;
}
.truck-copy h2:first-child {
margin-block-start: 0;
}
/* Food-truck concept word in the hero — the page's one splash of extra energy. */
.thero__em {
color: var(--red-bright);
}
.truck-nation__inner {
max-inline-size: 54ch;
}
.truck-nation__k {
display: inline-block;
margin-block-end: 0.45rem;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--red-on-dark);
}
.truck-nation__title {
font-size: var(--step-2);
font-weight: 900;
letter-spacing: -0.02em;
}
.truck-nation__text {
margin-block-start: var(--space-s);
max-inline-size: 52ch;
font-size: var(--step-1);
color: rgba(255, 255, 255, 0.86);
}
/* ------------------------------------------------------------- thanks -- */
.thanks {
position: relative;
display: grid;
place-items: center;
min-block-size: 66vh;
background: var(--ink);
color: #fff;
overflow: hidden;
text-align: center;
}
.thanks__dots {
position: absolute;
inset: 0;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.28;
pointer-events: none;
}
.thanks__inner {
position: relative;
display: grid;
justify-items: center;
padding-block: var(--space-2xl);
}
.thanks__mark {
inline-size: auto;
block-size: 78px;
margin-block-end: var(--space-s);
}
.thanks__title {
font-size: var(--step-4);
font-weight: 900;
letter-spacing: -0.03em;
}
.thanks .bhead__rule {
margin-inline: auto;
}
.thanks__text {
margin-block-start: var(--space-s);
font-size: var(--step-1);
color: rgba(255, 255, 255, 0.84);
}
.thanks__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: center;
margin-block-start: var(--space-l);
}
.thanks__meta {
margin-block-start: var(--space-l);
color: var(--text-invert-muted);
}
.thanks__meta a {
font-weight: 700;
color: var(--red-on-dark);
}
/* ---------------------------------------------------------------- 404 -- */
.e404 {
position: relative;
display: grid;
place-items: center;
min-block-size: 70vh;
background: var(--ink);
color: #fff;
overflow: hidden;
text-align: center;
}
.e404__dots {
position: absolute;
inset: 0;
background-image: var(--dots-light);
background-size: var(--dots-size);
opacity: 0.26;
pointer-events: none;
}
.e404__inner {
position: relative;
display: grid;
justify-items: center;
padding-block: var(--space-2xl);
}
.e404__mark {
inline-size: auto;
block-size: 70px;
}
.e404__code {
margin: var(--space-xs) 0 0;
font-size: clamp(4rem, 12vw, 8rem);
font-weight: 900;
line-height: 0.85;
letter-spacing: -0.05em;
color: var(--red-bright);
}
.e404__title {
margin-block-start: var(--space-s);
font-size: var(--step-3);
font-weight: 900;
}
.e404 .bhead__rule {
margin-inline: auto;
}
.e404__text {
margin-block-start: var(--space-s);
max-inline-size: 50ch;
color: rgba(255, 255, 255, 0.82);
font-size: var(--step-1);
}
.e404__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: center;
margin-block-start: var(--space-l);
}
.e404__search {
margin-block-start: var(--space-l);
inline-size: min(100%, 420px);
}
.e404__search .search-form input {
background: rgba(255, 255, 255, 0.08);
border-color: var(--line-invert);
color: #fff;
}
.e404__search .search-form input::placeholder {
color: rgba(255, 255, 255, 0.55);
}
/* ======================================================= why ziv (home) == */
.why__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: var(--space-s);
margin-block-start: var(--space-m);
list-style: none;
padding: 0;
}
.why__card {
padding: var(--space-s);
background: var(--paper-2, #f6f5f3);
border-radius: 4px;
border-inline-start: 3px solid var(--red);
}
.why__k {
display: inline-block;
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.02em;
color: var(--red);
}
.why__rule {
display: block;
inline-size: 32px;
block-size: 3px;
margin: 0.55rem 0;
background: var(--red);
}
.why__title {
margin: 0 0 0.4rem;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
line-height: 1.25;
}
.why__text {
margin: 0;
color: var(--ink-2, #555);
line-height: 1.5;
}
/* -------------------------------------------------- about: experience -- */
.about-exp__inner {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-m);
align-items: start;
}
@media (max-width: 900px) {
.about-exp__inner {
grid-template-columns: 1fr;
}
}
.about-exp__facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-xs);
}
.about-exp__facts li {
padding: var(--space-s);
background: var(--paper-2, #f6f5f3);
border-inline-start: 3px solid var(--red);
border-radius: 4px;
}
.about-exp__facts strong {
display: block;
font-size: 1.15rem;
line-height: 1.2;
margin-block-end: 0.2rem;
}
.about-exp__facts span {
color: var(--ink-2, #555);
font-size: 0.92rem;
}
/* ----------------------------------------------- about: service links -- */
.svc-links {
list-style: none;
margin: var(--space-s) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.55rem 0.7rem;
justify-content: center;
}
.svc-links a {
display: inline-block;
padding: 0.5rem 1.1rem;
border: 1px solid var(--line, #ddd);
border-radius: 999px;
font-weight: 600;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.svc-links a:hover,
.svc-links a:focus-visible {
border-color: var(--red);
color: var(--red);
}
/* -------------------------------------------- service: what's included -- */
.svc-includes {
list-style: none;
margin: var(--space-s) 0 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.svc-includes li {
position: relative;
padding-inline-start: 1.6rem;
line-height: 1.5;
}
.svc-includes li::before {
content: "✓";
position: absolute;
inset-inline-start: 0;
color: var(--red);
font-weight: 700;
}
/* ------------------------------------------------- service: process -- */
.svc-steps {
list-style: none;
margin: var(--space-m) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-s);
}
.svc-step {
padding: var(--space-s);
border-inline-start: 3px solid var(--red);
background: var(--paper-2, #f6f5f3);
border-radius: 4px;
}
.svc-step__num {
display: block;
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: var(--red);
}
.svc-step__title {
margin: 0.45rem 0 0.3rem;
font-size: 1.1rem;
line-height: 1.25;
}
.svc-step__text {
margin: 0;
color: var(--ink-2, #555);
line-height: 1.5;
}
/* Dark-section variant so the "why" cards read on inverted service sections. */
.is-inverted .svc-step,
.is-inverted .why__card {
background: rgba(255, 255, 255, 0.06);
}
/* ============================================================ food truck == */
.truck-uses__grid {
list-style: none;
margin: var(--space-m) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-s);
}
.truck-use {
padding: var(--space-s);
background: var(--paper-2, #f6f5f3);
border-radius: 4px;
transition: transform 0.25s var(--ease);
}
.truck-use:hover {
transform: translateY(-3px);
}
.truck-use__rule {
display: block;
inline-size: 32px;
block-size: 3px;
margin-block-end: 0.6rem;
background: var(--red);
}
.truck-use__title {
margin: 0 0 0.35rem;
font-size: 1.15rem;
line-height: 1.25;
}
.truck-use__text {
margin: 0;
color: var(--ink-2, #555);
line-height: 1.5;
}
/* Brand marquee — subtle, seamless, pauses on hover and under reduced-motion. */
.marquee {
overflow: hidden;
margin-block-start: var(--space-m);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex;
align-items: center;
gap: 1.5rem;
inline-size: max-content;
animation: zmarquee 32s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
animation-play-state: paused;
}
.marquee__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
block-size: 76px;
padding: 0.75rem 1.4rem;
background: #fff;
border-radius: 8px;
}
.marquee__item img {
max-block-size: 46px;
inline-size: auto;
object-fit: contain;
}
@keyframes zmarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track {
animation: none;
flex-wrap: wrap;
justify-content: center;
}
/* The looped duplicates only exist for the scroll; a static row must not
show every logo twice. */
.marquee__item[aria-hidden="true"] {
display: none;
}
}
/* =========================================================== motion pass == */
/* Home hero — a short staged entrance. Copy is in the DOM immediately; only its
appearance is choreographed, and only when motion is welcome. The main hero
photograph is never opacity-animated, so LCP is untouched. */
@media (prefers-reduced-motion: no-preference) {
.hero2__copy > * { animation: zStageIn 0.55s var(--ease) both; }
/* The H1 is the desktop LCP element — animate it transform-only so it paints
at full opacity immediately and LCP is never delayed by the fade. */
.hero2__title { animation-name: zStageUp; }
.hero2__copy > *:nth-child(1) { animation-delay: 0.04s; }
.hero2__copy > *:nth-child(2) { animation-delay: 0.12s; }
.hero2__copy > *:nth-child(3) { animation-delay: 0.20s; }
.hero2__copy > *:nth-child(4) { animation-delay: 0.28s; }
.hero2__copy > *:nth-child(5) { animation-delay: 0.36s; }
.hero2__shot--1,
.hero2__shot--2 { animation: zStageIn 0.6s var(--ease) both; }
.hero2__shot--1 { animation-delay: 0.34s; }
.hero2__shot--2 { animation-delay: 0.46s; }
}
@keyframes zStageIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes zStageUp {
from { transform: translateY(14px); }
to { transform: none; }
}
/* Crossfade rotator — shared by the truck showcase and the About hero. First
slide is server-rendered .is-active (paints instantly → LCP + no-JS safe). */
.tshow__slide,
.ihero__slide {
margin: 0;
opacity: 0;
transition: opacity 0.7s var(--ease);
}
.tshow__slide.is-active,
.ihero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.tshow__slide,
.ihero__slide { transition: none; }
}
/* About hero rotator */
.ihero__media[data-rotator] { aspect-ratio: 16 / 10; }
.ihero__slide { position: absolute; inset: 0; z-index: 1; }
.ihero__slide img { inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }
/* Food-truck brand-wrap showcase — the truck actually changing its skin. */
.tshow { display: grid; gap: var(--space-s); justify-items: center; }
.tshow__stage {
position: relative;
inline-size: 100%;
max-inline-size: 920px;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--ink-3);
}
.tshow__slide { position: absolute; inset: 0; }
.tshow__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.tshow__brand {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
z-index: 2;
padding: 0.5rem 1.1rem;
background: var(--red);
color: #fff;
font-weight: 800;
font-size: var(--step-0);
}
.tshow__dots { display: flex; gap: 0.6rem; }
.tshow__dot {
inline-size: 32px;
block-size: 32px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
}
.tshow__dot::before {
content: "";
inline-size: 11px;
block-size: 11px;
border-radius: 50%;
background: #b9b9bd;
transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.tshow__dot.is-active::before,
.tshow__dot:hover::before { background: var(--red); transform: scale(1.25); }
.tshow__dot:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Client wall — a gentle marquee (still a labelled wall; pauses on hover/focus,
static when motion is reduced via the shared .marquee rules). */
.marquee--clients { margin-block-start: var(--space-s); }
.marquee--clients .marquee__item {
background: transparent;
border-radius: 0;
block-size: auto;
padding: 0.6rem 1.5rem;
}
/* Portfolio filter — smooth the chip state change. */
.pfilter__chip {
transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* ============================================================= lightbox == */
/* The gallery trigger is a real