/* ============================================================ Maor Shalem — shared stylesheet Palette and motion values are The Boundary's, measured. Two font weights only: 200 and 400. Never bold. Page margin, gutters and full-bleed structure follow the navigation recording. See DESIGN-RESEARCH.md. ============================================================ */ :root { --olive: #454D3C; --olive-mid: #58614D; --olive-dark: #1E221A; --sage: #B5BDB3; --cream: #F7F4EC; --warm: #EBEBE8; --ease: cubic-bezier(0.02, 0.11, 0.12, 1.01); /* 32px at 1920, matching theirs — not 64px. */ --pad: clamp(1.25rem, 2.2vw, 2rem); --gutter: clamp(0.5rem, 0.9vw, 1rem); /* 16px at 1920 */ --sans: "Jost", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; /* Very large or very small. Little in between. */ --fs-panel: clamp(2.75rem, 6vw, 5.75rem); --fs-display: clamp(2.25rem, 4.6vw, 4.4rem); --fs-h2: clamp(1.75rem, 4.2vw, 3.5rem); --fs-h3: clamp(1.35rem, 2.4vw, 2rem); --fs-micro: 0.6875rem; --ratio: 1.85; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* ============================================================ SNAP SYSTEM Strict `mandatory`, exactly as the reference. Scoped to the homepage via `class="home"` on , so case studies — whose galleries are variable-height — scroll normally. The rule that makes mandatory safe: EVERY top-level section is a snap stop AND is at least one viewport tall. - A section shorter than the viewport would snap to its top and leave a sliver of the next one showing. That is the seam problem relocated, which is why min-height is not optional. - A section taller than the viewport still scrolls freely inside itself: per spec, when a snap area exceeds the snapport every position covering the snapport is valid. Verified in Chromium. So nothing is ever unreachable, and it is impossible to come to rest between two panels. ============================================================ */ html.home { scroll-snap-type: y mandatory; } .snap-stop { scroll-snap-align: start; min-height: 100vh; min-height: 100svh; /* mobile: excludes the collapsing URL bar */ } body { margin: 0; background: var(--olive-dark); color: var(--cream); font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { font-weight: 200; margin: 0; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; } p { margin: 0; } .eyebrow { font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; } /* ---------- Reveals ---------- */ .reveal { overflow: hidden; display: block; } .reveal > * { display: block; transform: translateY(115%); transition: transform 1s var(--ease); } .reveal.is-in > * { transform: none; } .fade { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .fade.is-in { opacity: 1; transform: none; } .reveal-media { opacity: 0; transition: opacity 1.2s var(--ease); } .reveal-media.is-in { opacity: 1; } /* ---------- Dim siblings on hover ---------- Their signature menu behaviour: the hovered item stays lit and every sibling drops to 30%. Every :hover rule in this stylesheet is gated on a real pointer. iOS Safari applies :hover on first tap and HOLDS it until you tap elsewhere, which would strand every sibling at 30% after a tap and leave panels stuck at scale(1.03). Desktop is unaffected. */ .dimgroup a { transition: opacity 0.45s var(--ease); } .dimgroup a:focus-visible { opacity: 1; } @media (hover: hover) and (pointer: fine) { .dimgroup:hover a { opacity: 0.3; } .dimgroup a:hover { opacity: 1; } } /* ============================================================ BUTTONS Sentence case, never uppercase. 1px border, transparent fill, flood on hover. ============================================================ */ .pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 999px; padding: 0.95rem 2.1rem; font-family: inherit; font-size: 0.95rem; font-weight: 400; background: transparent; cursor: pointer; text-decoration: none; transition: background-color 0.45s var(--ease), color 0.45s var(--ease); } .pill--light { color: var(--cream); } .pill--dark { color: var(--olive); } .circ { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid currentColor; background: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; cursor: pointer; font-family: inherit; text-decoration: none; transition: background-color 0.45s var(--ease), color 0.45s var(--ease); } .circ--light { color: var(--cream); } .circ--dark { color: var(--olive); } .ulink { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: text-decoration-color 0.35s var(--ease); } .ulink--light { color: var(--cream); text-decoration-color: rgba(247,244,236,0.45); } .ulink--dark { color: var(--olive); text-decoration-color: rgba(69,77,60,0.4); } /* The flood-on-hover behaviour, pointer devices only. */ @media (hover: hover) and (pointer: fine) { .pill--light:hover { background: var(--cream); color: var(--olive-dark); } .pill--dark:hover { background: var(--olive); color: var(--cream); } .circ--light:hover { background: var(--cream); color: var(--olive-dark); } .circ--dark:hover { background: var(--olive); color: var(--cream); } .ulink--light:hover { text-decoration-color: var(--cream); } .ulink--dark:hover { text-decoration-color: var(--olive); } } /* ---------- Page transition ---------- */ .pt { position: fixed; inset: 0; z-index: 100; background: var(--olive-dark); pointer-events: none; opacity: 1; visibility: visible; animation: ptOut 0.55s var(--ease) forwards; } @keyframes ptOut { to { opacity: 0; visibility: hidden; } } .pt.is-leaving { animation: ptIn 0.4s var(--ease) forwards; } @keyframes ptIn { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } } /* ============================================================ NAV ============================================================ */ /* The blend goes on .nav itself. On a child it would blend against the nav's own (transparent) stacking context and do nothing — which left the wordmark almost invisible over the cream sections. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: clamp(1.1rem, 2.2vw, 1.75rem) var(--pad); transition: transform 0.5s var(--ease); mix-blend-mode: difference; } .nav--hide { transform: translateY(-115%); } .nav__mark { font-size: 0.9375rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; text-decoration: none; } .menu-btn { background: transparent; border: 0; padding: 0.5rem; cursor: pointer; display: flex; flex-direction: column; gap: 6px; width: 42px; } /* Over the menu overlay there is nothing to invert against, so drop the blend and set the colours directly. */ .menu--open .nav { mix-blend-mode: normal; } .menu--open .nav__mark { color: var(--cream); } .menu-btn span { display: block; height: 1px; background: #fff; width: 100%; transition: transform 0.45s var(--ease), opacity 0.3s; } .menu--open .menu-btn span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .menu--open .menu-btn span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ============================================================ FULL-SCREEN MENU ============================================================ */ .menu { position: fixed; inset: 0; z-index: 55; background: var(--olive); color: var(--cream); padding: clamp(5.5rem, 11vh, 8rem) var(--pad) clamp(2rem, 5vh, 3rem); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; } .menu--open .menu { opacity: 1; visibility: visible; } .menu__nav { display: flex; flex-direction: column; gap: 0.2rem; } .menu__nav a { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 200; color: var(--cream); text-decoration: none; letter-spacing: -0.02em; width: fit-content; } /* ============================================================ PERSISTENT UI — contact tab, back to top ============================================================ */ .ctab { position: fixed; right: 0; top: 50%; z-index: 45; transform: translateY(-50%); writing-mode: vertical-rl; background: var(--sage); color: var(--olive-dark); padding: 1.35rem 0.6rem; font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); } .menu--open .ctab { display: none; } .totop { position: fixed; right: var(--pad); bottom: clamp(1.25rem, 3vh, 2rem); z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease); color: var(--cream); border-color: rgba(247,244,236,0.5); backdrop-filter: blur(6px); } .totop--show { opacity: 1; pointer-events: auto; } .menu--open .totop { opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .ctab:hover { background: var(--cream); } .totop:hover { background: var(--cream); color: var(--olive-dark); } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100vh; min-height: 34rem; overflow: hidden; background: var(--olive-dark); } .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.2); pointer-events: none; } .hero__grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__body { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; } .hero__body h1 { font-size: var(--fs-display); color: var(--cream); } .hero__cta { margin-top: clamp(1.75rem, 3.5vw, 3rem); } /* ============================================================ STATEMENT ============================================================ */ .statement { background: var(--cream); color: var(--olive); padding: clamp(6rem, 14vh, 9rem) var(--pad); display: flex; align-items: center; } .statement__inner { max-width: 52rem; } .statement .eyebrow { color: var(--olive-mid); margin-bottom: 2.75rem; } .statement h2 { font-size: var(--fs-h2); } /* ============================================================ WORK — full-bleed panels, one project per screen ============================================================ */ .work { background: var(--olive-dark); } .panel { position: relative; height: 100vh; min-height: 34rem; overflow: hidden; background: var(--olive-dark); display: block; text-decoration: none; color: var(--cream); } .panel__media { position: absolute; inset: 0; } .panel__media video, .panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); } @media (hover: hover) and (pointer: fine) { .panel:hover .panel__media video, .panel:hover .panel__media img { transform: scale(1.03); } } .panel__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.22); pointer-events: none; } .panel__body { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); } .panel__eyebrow { font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream); opacity: 0.8; margin-bottom: 1.35rem; font-variant-numeric: tabular-nums; } .panel__title { font-size: var(--fs-panel); color: var(--cream); } .panel__link { display: inline-block; margin-top: clamp(1.5rem, 2.6vw, 2.25rem); font-size: clamp(1rem, 1.2vw, 1.2rem); } /* ============================================================ CASE STUDY ============================================================ */ .cs { background: var(--cream); color: var(--olive); } .cs__hero { position: relative; height: 78vh; min-height: 26rem; overflow: hidden; background: var(--olive-dark); } .cs__hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .cs__hero .hero__scrim { background: rgba(0,0,0,0.18); } .cs__title { position: absolute; left: var(--pad); right: var(--pad); top: clamp(4.5rem, 14vh, 9rem); text-align: center; color: var(--cream); font-size: var(--fs-display); } .cs__crumb { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.35rem var(--pad); border-bottom: 1px solid rgba(69,77,60,0.16); font-size: 0.9375rem; } .cs__crumb-left { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; color: var(--olive-mid); } .cs__crumb-right { display: flex; gap: 1.25rem; align-items: center; } .cs__crumb .circ { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; } .cs__lead { padding: clamp(4rem, 10vh, 7rem) var(--pad) clamp(3rem, 7vh, 5rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .cs__intro { max-width: 54ch; display: flex; flex-direction: column; gap: 1.35rem; } .cs__intro p { font-size: clamp(1.0625rem, 1.35vw, 1.35rem); color: var(--olive-mid); line-height: 1.55; } /* Key and value at the same size, separated by tone — not by scale. */ .cs__meta { display: flex; flex-direction: column; gap: 1.1rem; } .cs__meta div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 1.5rem; font-size: clamp(0.9375rem, 1.1vw, 1.125rem); } .cs__meta dt { color: var(--olive-mid); opacity: 0.7; margin: 0; } .cs__meta dd { color: var(--olive); margin: 0; } @media (max-width: 52rem) { .cs__lead { grid-template-columns: 1fr; } } /* On a phone the key column leaves ~153px for the value, which wraps "Peri Davidovich Architects" and the scope line onto two lines each. Stack them instead and let the tone carry the distinction. */ @media (max-width: 44rem) { .cs__meta div { grid-template-columns: 1fr; gap: 0.3rem; } } .cs__gallery { padding: 0 var(--pad) clamp(4rem, 10vh, 7rem); display: flex; flex-direction: column; gap: var(--gutter); } .shot { margin: 0; position: relative; overflow: hidden; background: var(--warm); } .shot::before { content: ""; display: block; padding-top: calc(100% / var(--ratio)); } .shot__media { position: absolute; inset: 0; transform: scale(1.06); transition: transform 1.4s var(--ease); } .shot.is-in .shot__media { transform: none; } .shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } @media (max-width: 44rem) { .duo { grid-template-columns: 1fr; } } /* Closing CTA */ .cs__cta { padding: clamp(4rem, 10vh, 7rem) var(--pad); border-top: 1px solid rgba(69,77,60,0.16); display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .cs__cta h2 { font-size: var(--fs-h3); } .cs__cta p { max-width: 46ch; color: var(--olive-mid); } .cs__cta .pill { margin-top: 0.75rem; } /* Related */ .cs__related { padding: 0 var(--pad) clamp(4rem, 10vh, 7rem); } .cs__related .eyebrow { color: var(--olive-mid); margin-bottom: 1.75rem; display: block; } .related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } @media (max-width: 44rem) { .related__grid { grid-template-columns: 1fr; } } .rel { display: block; text-decoration: none; color: inherit; } .rel__frame { position: relative; overflow: hidden; background: var(--warm); } .rel__frame::before { content: ""; display: block; padding-top: calc(100% / var(--ratio)); } .rel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } @media (hover: hover) and (pointer: fine) { .rel:hover .rel__frame img { transform: scale(1.035); } } .rel__name { display: block; margin-top: 1rem; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 200; } /* ============================================================ THE EDGE ============================================================ */ .edge { background: var(--olive); color: var(--cream); padding: clamp(5rem, 12vh, 9rem) var(--pad); display: flex; align-items: center; } .edge__grid { max-width: 82rem; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .edge .eyebrow { color: var(--sage); margin-bottom: 2rem; } .edge h2 { font-size: var(--fs-h2); } .edge__body { display: flex; flex-direction: column; gap: 1.6rem; color: var(--sage); } .edge__body strong { color: var(--cream); font-weight: 400; } @media (max-width: 52rem) { .edge__grid { grid-template-columns: 1fr; } } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--olive-dark); color: var(--cream); padding: clamp(5rem, 12vh, 9rem) var(--pad); display: flex; align-items: center; } .contact__grid { max-width: 82rem; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; } .contact .eyebrow { color: var(--sage); margin-bottom: 2rem; } .contact h2 { font-size: var(--fs-h2); } .contact__aside { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem; } .contact__who { display: flex; flex-direction: column; gap: 0.5rem; } .contact__who .k { font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); opacity: 0.7; } .contact__who .v { font-size: 1.125rem; } @media (max-width: 52rem) { .contact__grid { grid-template-columns: 1fr; } } .form { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 3vw, 2.5rem); } @media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 0.6rem; } .field label { font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); opacity: 0.75; } .field .opt { text-transform: none; letter-spacing: 0; } .field input, .field textarea { font-family: inherit; font-size: 1.0625rem; font-weight: 200; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(181,189,179,0.32); padding: 0.5rem 0 0.75rem; border-radius: 0; transition: border-color 0.3s; } .field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--sage); } .field input::placeholder, .field textarea::placeholder { color: rgba(247,244,236,0.28); } .field--bad input, .field--bad textarea { border-bottom-color: #C9784F; } .field__err { font-size: 0.8125rem; color: #C9784F; min-height: 1.2em; } .form__foot { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .form__note { font-size: 0.875rem; color: var(--sage); opacity: 0.8; } .form__done { font-size: 1.0625rem; color: var(--sage); } /* ============================================================ FOOTER — the wordmark carries it ============================================================ */ .foot { background: var(--olive-dark); color: var(--sage); padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(1.5rem, 3vh, 2rem); display: grid; grid-template-rows: auto 1fr auto; } .foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem 3rem; } .foot__col { display: flex; flex-direction: column; gap: 0.55rem; } .foot__col .k { font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; } .foot__col .v { color: var(--cream); font-size: 1.0625rem; } .foot__col a { color: var(--cream); } /* Sized from the content width, not the viewport: "MAOR SHALEM" sets about 6.35x its font-size, so dividing the available width by 6.5 fills the measure at every breakpoint with a little slack. A fixed vw value overflowed and pushed scrollWidth past the viewport. */ .foot__mark { font-size: calc((100vw - 2 * var(--pad)) / 6.5); line-height: 0.82; font-weight: 200; letter-spacing: -0.02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; align-self: center; } .foot__legal { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(181,189,179,0.16); padding-top: 1.5rem; padding-right: 4.5rem; /* clears the back-to-top button */ font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; } .foot__legal a { color: var(--sage); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .foot__legal a:hover { color: var(--cream); } } /* ============================================================ RESPONSIVE / MOTION ============================================================ */ @media (max-width: 48rem) { .hero, .panel { height: 100svh; } .cs__hero { height: 60vh; } .ctab { display: none; } /* The back-to-top circle is fixed bottom-right, and Edge and Contact are both taller than a phone screen — so they scroll underneath it and it lands squarely on "Developers are not buying pictures…" and on the "What do you need?" field label. Measured at 360 and 393. Mobile keeps the fixed wordmark (href="#top") and the OS status-bar tap, so nothing is lost by dropping it here. */ .totop { display: none; } } /* ---------- Touch hit areas ---------- Real targets were 24-26px tall: the menu button (the only navigation control once .ctab is hidden), the wordmark, and both email links. Expanded with a positioned pseudo-element so nothing reflows — the nav keeps its exact height and the bars do not move. Gated on a coarse pointer, so desktop geometry is untouched. */ @media (pointer: coarse) { .menu-btn, .nav__mark, .contact__who .v a, .foot__col .v a { position: relative; } .menu-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .nav__mark::after, .contact__who .v a::after, .foot__col .v a::after { content: ""; position: absolute; inset: -10px 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .reveal > * { transform: none; } .fade { opacity: 1; transform: none; } .reveal-media { opacity: 1; } .shot__media { transform: none; } }