/* ===================================================================== MONOCKROM — cinematic monochrome editorial system (LIGHT theme) Predominantly light (paper/ink) with one dark "finale" (Contact + footer) for editorial contrast. Transform/opacity motion only (GPU-friendly). ===================================================================== */ /* ------------------------------ Tokens ------------------------------ */ :root { --paper: #ffffff; /* main background — pure white (no grey) */ --paper-2: #ffffff; /* image beds / wells — kept white; separation via hairlines + black sections */ --ink: #141414; /* text + inverted (black) sections */ --ink-2: #1c1c1c; --dim: rgba(20, 20, 20, .62); --faint: rgba(20, 20, 20, .40); --hair: rgba(20, 20, 20, .14); /* Header background on scroll — overridden by mono_dynamic_css() from the Studio "Colours" controls (header colour + opacity). */ --header-bg: #ffffff; /* Tokens for inverted (dark) sections. */ --on-dark: #f3f0ea; --on-dark-dim: rgba(243, 240, 234, .60); --on-dark-faint: rgba(243, 240, 234, .34); --hair-light: rgba(243, 240, 234, .16); --serif: "Cormorant", "Georgia", "Times New Roman", serif; --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --pad: clamp(20px, 5vw, 96px); --rhythm: clamp(88px, 14vh, 220px); /* Single vertical rhythm applied identically top+bottom to EVERY section, so the gaps between sections are all the same. */ --section-y: clamp(76px, 9vh, 130px); --ease: cubic-bezier(.16, 1, .3, 1); --dur: 1s; } /* --------------------------- Loading screen ------------------------ */ /* Full-screen light overlay with a spinning ring under the logo/wordmark. Base position/background are also set inline in so it covers from the first paint; app.js fades it out on load (a CSS safety fade removes it even if JS never runs). */ .mono-loader { position: fixed; inset: 0; z-index: 9999; background: var(--paper); display: grid; place-items: center; opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility .6s var(--ease); animation: mono-loader-safety .5s 5s forwards; } .mono-loader.is-done { opacity: 0; visibility: hidden; } /* The logo spins (à la monockrom.com): two turns with a gentle shrink midway. */ /* Static logo — no motion at all; just the loader fading out on load. */ .mono-loader__logo { max-height: clamp(160px, 30vw, 300px); width: auto; display: block; } /* Fallback (no logo set): wordmark above a small spinning ring. */ .mono-loader__inner { display: grid; justify-items: center; gap: clamp(20px, 3vh, 30px); } .mono-loader__mark { font-family: var(--sans); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; font-size: 15px; color: var(--ink); } .mono-loader__ring { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(20, 20, 20, .14); border-top-color: var(--ink); animation: mono-spin .9s linear infinite; } @keyframes mono-spin { to { transform: rotate(360deg); } } @keyframes mono-loader-safety { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .mono-loader__ring, .mono-loader__logo { animation: none; } } /* ------------------------------ Reset ------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Keyboard focus — visible outline for accessibility (not shown on mouse). */ :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; } .mono-contact :focus-visible, .mono-colophon :focus-visible, .mono-overlay :focus-visible, .mono-menu :focus-visible { outline-color: var(--on-dark); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3 { font-weight: 400; margin: 0; } ::selection { background: var(--ink); color: var(--paper); } .mono-skip { position: fixed; top: -100px; left: 12px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 2px; transition: top .2s; } .mono-skip:focus { top: 12px; } /* --------------------- Grain + vignette overlays -------------------- */ .mono-grain, .mono-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 90; } .mono-vignette { background: radial-gradient(120% 100% at 50% 42%, transparent 62%, rgba(0,0,0,.10) 100%); mix-blend-mode: multiply; } .mono-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .045; mix-blend-mode: multiply; } /* ------------------------------- Nav ------------------------------- */ .mono-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 120; padding: 6px var(--pad); /* ~84px tall header like monockrom.com */ transition: transform .5s var(--ease); background: var(--header-bg); color: var(--ink); border-bottom: 1px solid var(--hair); } .mono-nav.is-hidden { transform: translateY(-100%); } .mono-nav.is-solid { background: var(--header-bg); color: var(--ink); } /* Horizontal nav: links left + centred logo + links right (grid keeps the logo dead-centre regardless of how the links split). */ .mono-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 44px); } .mono-nav__brand { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; grid-column: 2; justify-self: center; display: flex; align-items: center; justify-content: center; line-height: 1; } .mono-nav__brand img, .mono-nav__logo { display: block; max-height: 60px; width: auto; } .mono-nav[data-logosize="s"] .mono-nav__brand img, .mono-nav[data-logosize="s"] .mono-nav__logo { max-height: 48px; } .mono-nav[data-logosize="l"] .mono-nav__brand img, .mono-nav[data-logosize="l"] .mono-nav__logo { max-height: 72px; } .mono-nav__group { display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); } .mono-nav__group--left { grid-column: 1; justify-self: end; } .mono-nav__end { grid-column: 3; justify-self: stretch; display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); } /* Nav links matched to monockrom.com: Poppins, 18px, 600, 2px tracking, uppercase; grey at rest, ink (black) when hovered or active. */ .mono-nav__group a { font-size: clamp(15px, 1.15vw, 18px); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 4px 0; color: rgba(20, 20, 20, .38); transition: color .3s var(--ease); white-space: nowrap; } .mono-nav__group a:hover, .mono-nav__group a.is-current { color: var(--ink); } .mono-nav__progress { position: absolute; left: 0; bottom: 0; height: 1px; width: 0%; background: currentColor; opacity: .5; } /* Desktop keeps the inline links. On mobile (≤920px) they collapse into the ☰ menu: logo stays centred (grid col 2), hamburger pinned right (grid col 3). */ .mono-nav__toggle { display: none; align-items: center; gap: 12px; margin-left: auto; } @media (max-width: 920px) { .mono-nav__group { display: none; } .mono-nav__toggle { display: inline-flex; } .mono-nav__brand img, .mono-nav__logo { max-height: 52px; } } /* Label kept for screen readers only — the bars are the visible hamburger. */ .mono-nav__toggle-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mono-nav__toggle-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 16px; } .mono-nav__toggle-bars i { height: 2px; width: 100%; background: currentColor; transition: transform .4s var(--ease), opacity .3s var(--ease); } body.mono-menu-open .mono-nav__toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mono-menu-open .mono-nav__toggle-bars i:nth-child(2) { opacity: 0; } body.mono-menu-open .mono-nav__toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Vertical sticky side menu (desktop / tablet). Active section highlights. */ .mono-sidenav { position: fixed; top: 50%; right: clamp(20px, 2.6vw, 52px); transform: translateY(-50%); z-index: 118; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(18px, 2.6vh, 34px); counter-reset: mono-nav; mix-blend-mode: difference; color: #fff; } .mono-sidenav a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .45; transition: opacity .35s var(--ease); } .mono-sidenav a::before { counter-increment: mono-nav; content: counter(mono-nav, decimal-leading-zero); font-size: 9px; letter-spacing: .04em; opacity: .7; min-width: 1.5em; text-align: right; } .mono-sidenav__label { display: inline-block; } .mono-sidenav__tick { width: 14px; height: 1px; background: currentColor; transition: width .45s var(--ease); flex: none; } .mono-sidenav a:hover, .mono-sidenav a.is-current { opacity: 1; } .mono-sidenav a.is-current { font-weight: 500; } .mono-sidenav a.is-current .mono-sidenav__tick { width: 46px; } /* ===== Side-menu style models (Studio → Logo & branding → Side menu style) === The base above is the "Classic" (ticks) look. Each model below is a fully different presentation, selectable in the back-office. ======================= */ /* index — big serif numbers, small label. */ .mono-sidenav[data-navstyle="index"] a { align-items: baseline; gap: 10px; } .mono-sidenav[data-navstyle="index"] a::before { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: 0; opacity: .5; min-width: auto; } .mono-sidenav[data-navstyle="index"] .mono-sidenav__tick { display: none; } .mono-sidenav[data-navstyle="index"] .mono-sidenav__label { font-size: 10px; letter-spacing: .2em; } .mono-sidenav[data-navstyle="index"] a.is-current { opacity: 1; font-weight: 500; } .mono-sidenav[data-navstyle="index"] a.is-current::before { opacity: 1; } /* vertical — sideways (rotated) labels stacked along the edge. */ .mono-sidenav[data-navstyle="vertical"] { gap: clamp(18px, 3vh, 40px); } .mono-sidenav[data-navstyle="vertical"] a::before { content: none; } .mono-sidenav[data-navstyle="vertical"] .mono-sidenav__tick { display: none; } .mono-sidenav[data-navstyle="vertical"] .mono-sidenav__label { writing-mode: vertical-rl; letter-spacing: .3em; font-size: 11px; } .mono-sidenav[data-navstyle="vertical"] a.is-current { font-weight: 600; } /* rail — a continuous guide line with a node per section; label opens on hover/active. */ .mono-sidenav[data-navstyle="rail"] { padding-right: 18px; } .mono-sidenav[data-navstyle="rail"]::after { content: ""; position: absolute; right: 0; top: 2px; bottom: 2px; width: 1px; background: currentColor; opacity: .3; } .mono-sidenav[data-navstyle="rail"] a::before { content: none; } .mono-sidenav[data-navstyle="rail"] .mono-sidenav__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease), opacity .3s var(--ease); } .mono-sidenav[data-navstyle="rail"] a:hover .mono-sidenav__label, .mono-sidenav[data-navstyle="rail"] a.is-current .mono-sidenav__label { max-width: 140px; opacity: 1; } .mono-sidenav[data-navstyle="rail"] .mono-sidenav__tick { width: 10px; } .mono-sidenav[data-navstyle="rail"] a.is-current .mono-sidenav__tick { width: 22px; height: 2px; } /* serif — elegant italic serif labels, mixed case. */ .mono-sidenav[data-navstyle="serif"] a { text-transform: none; } .mono-sidenav[data-navstyle="serif"] a::before { content: none; } .mono-sidenav[data-navstyle="serif"] .mono-sidenav__tick { display: none; } .mono-sidenav[data-navstyle="serif"] .mono-sidenav__label { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 19px; line-height: 1; } .mono-sidenav[data-navstyle="serif"] a.is-current .mono-sidenav__label { font-weight: 500; } /* minimal — dots only, labels visually hidden (still read by screen readers). */ .mono-sidenav[data-navstyle="minimal"] { gap: 16px; } .mono-sidenav[data-navstyle="minimal"] a::before { content: none; } .mono-sidenav[data-navstyle="minimal"] .mono-sidenav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mono-sidenav[data-navstyle="minimal"] .mono-sidenav__tick { width: 6px; height: 6px; border-radius: 50%; background: transparent; border: 1px solid currentColor; transition: background .3s var(--ease), transform .3s var(--ease); } .mono-sidenav[data-navstyle="minimal"] a.is-current .mono-sidenav__tick { background: currentColor; transform: scale(1.3); } /* Fullscreen menu (mobile) */ .mono-menu { position: fixed; inset: 0; z-index: 115; background: var(--paper); display: flex; align-items: center; justify-content: center; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); } .mono-menu[hidden] { display: flex; } body.mono-menu-open .mono-menu { clip-path: inset(0 0 0 0); } .mono-menu__nav { display: flex; flex-direction: column; gap: 4px; padding: var(--pad); width: 100%; } .mono-menu__nav a { display: flex; align-items: baseline; gap: 20px; padding: 8px 0; font-family: var(--serif); font-size: clamp(40px, 12vw, 92px); line-height: 1; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 70ms); } body.mono-menu-open .mono-menu__nav a { opacity: 1; transform: none; } .mono-menu__nav a em { font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .2em; color: var(--faint); } .mono-menu__nav a:hover span { font-style: italic; } /* ---------------------- Reveal / line utilities -------------------- */ /* Text/section reveal — gentle slide-up + fade as it scrolls into view. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } .mono-line { display: block; overflow: visible; } .mono-line.reveal { opacity: 1; } .mono-line__inner { display: block; opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--l, 0) * 90ms); } .mono-line.is-visible .mono-line__inner, body.mono-ready .mono-intro__headline .mono-line__inner { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mono-line__inner { opacity: 1 !important; transform: none !important; } } /* ------------------------------ Intro ------------------------------ */ /* Light, high-key hero: ink type over a brightened B&W video + light scrim. */ .mono-intro { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--paper); } .mono-intro__media { position: absolute; inset: 0; z-index: 0; } .mono-intro__video, .mono-intro__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Desktop / mobile intro video switch (only when both are provided). */ .mono-intro__video--m { display: none; } @media (max-width: 760px) { .mono-intro__video--d { display: none; } .mono-intro__video--m { display: block; } } .mono-intro__fallback { background-size: cover; background-position: center; } .mono-intro__nofilm { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(0,0,0,.022) 0 2px, transparent 2px 5px), radial-gradient(80% 60% at 50% 28%, #fbfaf6, #e7e2d8); } .mono-intro__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 88% 58% at 50% 47%, rgba(243,240,234,.52) 0%, rgba(243,240,234,0) 68%), linear-gradient(180deg, rgba(243,240,234,.55) 0%, rgba(243,240,234,.16) 28%, rgba(243,240,234,.18) 55%, rgba(243,240,234,.74) 100%); } .mono-intro__content { position: relative; z-index: 2; padding: 0 var(--pad); width: 100%; text-align: center; } .mono-intro__kicker { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--dim); margin: 0 0 clamp(18px, 3vh, 34px); } .mono-intro__headline { font-family: var(--serif); font-weight: 300; color: var(--ink); font-size: clamp(48px, 10.5vw, 172px); line-height: .96; letter-spacing: -.01em; text-shadow: 0 1px 34px rgba(243,240,234,.7); } .mono-intro__headline .mono-line:nth-child(even) .mono-line__inner { font-style: italic; padding-left: .06em; color: var(--dim); } /* Static rule under the headline. */ .mono-intro__rule { display: block; height: 1px; width: min(360px, 42vw); margin-top: clamp(20px, 3vh, 40px); background: var(--ink); opacity: .45; } /* Two call-to-action buttons under the hero title. */ .mono-intro__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(28px, 4vh, 48px); } .mono-hero-btn { display: inline-block; padding: 14px 34px; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--ink); cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease); } .mono-hero-btn--solid { background: transparent; color: var(--ink); } .mono-hero-btn--solid:hover { background: var(--ink); color: var(--paper); } .mono-hero-btn--ghost { background: transparent; color: var(--ink); } .mono-hero-btn--ghost:hover { background: var(--ink); color: var(--paper); } /* Filmic frame + corner registration marks. */ .mono-intro__frame { position: absolute; inset: clamp(14px, 2vw, 26px); z-index: 3; pointer-events: none; border: 1px solid rgba(20,20,20,.10); } .mono-intro__frame i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(20,20,20,.32); } .mono-intro__frame i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; } .mono-intro__frame i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; } .mono-intro__frame i:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; } .mono-intro__frame i:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; } @media (prefers-reduced-motion: reduce) { .mono-intro__video, .mono-intro__fallback, .mono-intro__nofilm, .mono-intro__cue-line::after { animation: none; } } .mono-intro__cue { position: absolute; z-index: 3; right: var(--pad); bottom: clamp(30px, 6vh, 60px); display: flex; flex-direction: column; align-items: center; gap: 12px; } .mono-intro__cue-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl; } .mono-intro__cue-line { width: 1px; height: 54px; background: linear-gradient(var(--ink), transparent); position: relative; overflow: hidden; } /* --------------------------- Section head -------------------------- */ .mono-section-head { padding: var(--section-y) var(--pad); max-width: 1500px; margin-left: auto; margin-right: auto; } .mono-section-head__kicker { display: block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--faint); margin-bottom: clamp(18px, 3vh, 30px); } .mono-section-head__title { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 9.2vw, 150px); line-height: .98; letter-spacing: -.01em; } .mono-section-head__title em { font-style: italic; color: var(--dim); } .mono-section-head__note { margin: 24px auto 0; max-width: 44ch; color: var(--dim); } /* ---------------------- Portfolio — peek slider -------------------- */ /* Small trailing space only — the next section's header already carries a full --section-y of top padding, so a full one here doubled the gap before Team. */ .mono-work { position: relative; padding-bottom: clamp(20px, 3vh, 44px); --slide-w: clamp(280px, 62vw, 860px); } .mono-work__track { display: flex; gap: clamp(16px, 2.4vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 0 12px calc((100% - var(--slide-w)) / 2); scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Trailing spacer so the LAST slide can also reach dead-centre (end padding is dropped on flex scroll containers in some browsers). */ .mono-work__track::after { content: ""; flex: 0 0 calc((100% - var(--slide-w)) / 2); } .mono-work__track::-webkit-scrollbar { display: none; } .mono-work__track, .mono-team__cf { cursor: grab; } .mono-work__track.is-dragging, .mono-team__cf.is-dragging { cursor: grabbing; user-select: none; } .mono-work__shot img, .mono-team__cf-photo img { -webkit-user-drag: none; user-select: none; } .mono-work__slide { text-align: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); } .mono-work__track > .mono-work__slide { flex: 0 0 var(--slide-w); scroll-snap-align: center; } /* Grid layout (alternative to the carousel). */ .mono-work__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(20px, 2.6vw, 44px) clamp(16px, 2vw, 34px); padding: 0 var(--pad); } .mono-work__shot { position: relative; display: block; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); } .mono-work__film { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(8,8,8,.55); backdrop-filter: blur(4px); padding: 5px 10px; border-radius: 2px; } .mono-work__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .mono-work__slide:hover .mono-work__shot img { transform: scale(1.03); } /* Per-project thumbnail crop — shape (aspect-ratio) + focal position. */ .mono-work__shot--r45 { aspect-ratio: 4 / 5; } .mono-work__shot--r11 { aspect-ratio: 1 / 1; } .mono-work__shot--rauto { aspect-ratio: auto; } .mono-work__shot--rauto img { height: auto; } .mono-work__shot--pt img { object-position: center top; } .mono-work__shot--pb img { object-position: center bottom; } .mono-work__shot--pl img { object-position: left center; } .mono-work__shot--pr img { object-position: right center; } .mono-work__cap { display: block; padding-top: clamp(16px, 2vw, 28px); } .mono-work__num { display: block; font-size: 11px; letter-spacing: .24em; color: var(--faint); margin-bottom: 10px; } .mono-work__title { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 50px); line-height: 1; letter-spacing: -.01em; } .mono-work__meta { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .04em; color: var(--dim); } .mono-work__view { display: inline-block; margin-top: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--hair); padding-bottom: 3px; transition: color .3s, border-color .3s; } .mono-work__slide:hover .mono-work__view { color: var(--ink); border-color: var(--ink); } .mono-work__controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: clamp(30px, 4vw, 52px); } .mono-work__counter { font-size: 13px; letter-spacing: .08em; color: var(--dim); min-width: 62px; text-align: center; } .mono-work__counter b { font-weight: 500; color: var(--ink); } .mono-work__counter i { font-style: normal; margin: 0 7px; color: var(--faint); } /* Shared carousel arrows */ .mono-carousel-arrow { width: 52px; height: 52px; border: 1px solid var(--hair); border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--ink); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .mono-carousel-arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .mono-carousel-arrow:disabled { opacity: .3; cursor: default; } .mono-carousel-arrow:disabled:hover { background: none; color: var(--ink); border-color: var(--hair); } /* ----------------------- Immersive overlay ------------------------- */ body.mono-overlay-open { overflow: hidden; } .mono-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(18,18,18,.5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; } .mono-overlay.is-open { opacity: 1; visibility: visible; } .mono-overlay__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .mono-overlay__content { background: var(--paper); min-height: 100%; transform: translateY(40px) scale(.985); opacity: .4; transition: transform .7s var(--ease), opacity .7s var(--ease); } .mono-overlay.is-open .mono-overlay__content { transform: none; opacity: 1; } .mono-overlay__close { position: fixed; top: clamp(14px, 2.4vw, 28px); right: var(--pad); z-index: 210; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(18, 18, 18, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55); display: grid; place-items: center; cursor: pointer; transition: transform .5s var(--ease), background .3s var(--ease); } .mono-overlay__close:hover { transform: rotate(90deg); background: var(--ink); } .mono-overlay__close span { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .mono-overlay__close span:nth-child(1) { transform: rotate(45deg); } .mono-overlay__close span:nth-child(2) { transform: rotate(-45deg); } /* Project article (overlay + single) — editorial spread */ /* Hero: full-bleed, title overlaid at the bottom over a gradient. */ .mono-project__hero { position: relative; height: clamp(460px, 88vh, 1000px); overflow: hidden; background: var(--paper-2); } .mono-project__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Per-project hero crop position (shares the project's Studio crop setting). */ .mono-project__hero--pt > img { object-position: center top; } .mono-project__hero--pb > img { object-position: center bottom; } .mono-project__hero--pl > img { object-position: left center; } .mono-project__hero--pr > img { object-position: right center; } /* Film opener: a YouTube/Vimeo embed or an MP4, shown when a project has video. Capped to a comfortable reading width so it never dominates the page. */ .mono-project__film { background: #000; max-width: 1080px; margin: clamp(24px, 4vw, 56px) auto; } .mono-project__filmvideo { display: block; width: 100%; height: auto; max-height: 78vh; background: #000; } .mono-project__embed { position: relative; aspect-ratio: 16 / 9; } /* Uncropped project image: the whole photo, width-fit, natural height. */ .mono-project__media { background: var(--paper-2); text-align: center; } /* Uncropped, but capped so a tall/portrait cover never dominates the overlay. */ .mono-project__media img { display: block; margin: 0 auto; max-width: 100%; max-height: 82vh; width: auto; height: auto; } .mono-project__embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .mono-project__titleband { padding: clamp(30px, 4vw, 56px) var(--pad) clamp(6px, 1vw, 14px); } .mono-project__titleband .mono-project__idx { color: var(--faint); } .mono-project__titleband .mono-project__title { color: var(--ink); margin-top: 8px; } .mono-project__hero-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: var(--pad); color: var(--on-dark); background: linear-gradient(rgba(8,8,8,.30), rgba(8,8,8,.5)); } .mono-project__idx { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(243,240,234,.7); } .mono-project__title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 7.5vw, 118px); line-height: .95; letter-spacing: -.01em; } /* Spec strip: editorial columns with hairline dividers. */ .mono-project__spec { display: flex; flex-wrap: wrap; margin: 0; padding: 0 var(--pad); border-bottom: 1px solid var(--hair); } .mono-project__spec > div { padding: clamp(24px, 3vw, 40px) clamp(30px, 4vw, 64px) clamp(24px, 3vw, 40px) 0; position: relative; } .mono-project__spec > div + div { padding-left: clamp(30px, 4vw, 64px); border-left: 1px solid var(--hair); } .mono-project__spec dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .mono-project__spec dd { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 26px); } /* Intro: large lead statement paired with the description. */ .mono-project__intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 90px); align-items: start; padding: clamp(14px, 2vw, 32px) var(--pad); max-width: 1500px; } .mono-project__lead { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 3vw, 46px); line-height: 1.22; color: var(--ink); margin: 0; } .mono-project__desc { color: var(--dim); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.65; max-width: 60ch; } .mono-project__desc p { margin: 0 0 1.1em; } .mono-project__intro > .mono-project__desc:only-child { grid-column: 1 / -1; max-width: 68ch; } /* Masonry gallery: every photo keeps its natural ratio — never cropped, never letterboxed — packed into columns so there is no dead white space. */ .mono-project__gallery { columns: 2; column-gap: clamp(8px, 1vw, 20px); padding: 0 var(--pad) clamp(70px, 9vw, 130px); } .mono-project__shot { margin: 0 0 clamp(8px, 1vw, 20px); overflow: hidden; background: var(--paper-2); break-inside: avoid; -webkit-column-break-inside: avoid; } .mono-project__shot img { width: 100%; height: auto; display: block; } /* Column count per layout. */ .mono-project__gallery--grid2 { columns: 2; } .mono-project__gallery--grid3 { columns: 3; } .mono-project__gallery--stacked { columns: 1; } .mono-project__back { padding: 0 var(--pad) var(--rhythm); } .mono-project__back a { font-size: 13px; letter-spacing: .12em; border-bottom: 1px solid var(--hair); padding-bottom: 3px; } .mono-project--single { padding-top: 0; } /* -------------------------- Team — coverflow ----------------------- */ .mono-team { padding-bottom: var(--section-y); --cf-w: clamp(240px, 32vw, 400px); } .mono-team__coverflow { position: relative; } .mono-team__cf { display: flex; gap: clamp(18px, 2.5vw, 46px); overflow-x: auto; scroll-snap-type: x proximity; perspective: 1600px; padding: clamp(20px, 4vh, 50px) 0 clamp(20px, 4vh, 50px) calc((100% - var(--cf-w)) / 2); scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Trailing spacer so the LAST member can also reach dead-centre. */ .mono-team__cf::after { content: ""; flex: 0 0 calc((100% - var(--cf-w)) / 2); } .mono-team__cf::-webkit-scrollbar { display: none; } .mono-team__cf-item { flex: 0 0 var(--cf-w); scroll-snap-align: center; text-align: center; transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; } .mono-team__cf-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.4); } .mono-team__cf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .mono-team__cf-id { padding-top: 20px; } .mono-team__name { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 32px); line-height: 1.04; letter-spacing: -.01em; } .mono-team__role { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-top: 6px; } .mono-team__bio { max-width: 40ch; margin: 14px auto 0; font-size: 13px; line-height: 1.55; color: var(--dim); opacity: 0; transition: opacity .4s var(--ease); } .mono-team__cf-item.is-active .mono-team__bio { opacity: 1; } .mono-team__controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: clamp(24px, 3vw, 44px); } /* ------------------------------ About ------------------------------ */ /* A gentle tonal panel — a soft "chapter" shift within the light system. */ .mono-about { background: var(--paper-2); color: var(--ink); } .mono-about__inner { padding: var(--section-y) var(--pad); max-width: 1400px; margin: 0 auto; } .mono-about .mono-section-head__kicker { color: var(--faint); } .mono-about__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5.6vw, 92px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 clamp(40px, 6vh, 80px); } .mono-about__lead .mono-line:nth-child(even) .mono-line__inner { font-style: italic; color: var(--dim); } .mono-about__body { max-width: 52ch; font-size: clamp(16px, 1.4vw, 20px); color: var(--dim); margin: 0 0 clamp(50px, 8vh, 90px); } .mono-about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--hair); padding-top: clamp(30px, 5vh, 56px); } .mono-about__stat-v { display: block; font-family: var(--serif); font-size: clamp(44px, 7vw, 104px); line-height: 1; } .mono-about__stat-l { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } /* ----------------------------- Contact ----------------------------- */ /* The light finale — a calm, framed close to the light journey. */ .mono-contact { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); color: var(--ink); padding: var(--section-y) 0 clamp(34px, 5vh, 60px); border-top: 1px solid var(--hair); } .mono-contact__inner { padding: 0 var(--pad); } .mono-contact__eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--faint); margin: 0 0 clamp(18px, 3vh, 30px); } .mono-contact__cta { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 8.4vw, 150px); line-height: .96; letter-spacing: -.015em; color: var(--ink); margin-bottom: clamp(40px, 6vh, 84px); } .mono-contact__cta .mono-line:nth-child(even) .mono-line__inner { font-style: italic; color: var(--dim); } .mono-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; } /* Details — three centered columns: Email · Phone · Social, each a circular icon with its text below (like the monockrom.com footer). */ .mono-contact__cols { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 40px); margin-top: clamp(6px, 1.5vh, 16px); } .mono-contact__col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .mono-contact__circle { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid var(--hair); border-radius: 50%; color: var(--dim); flex: none; transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } .mono-contact__circle svg { width: 21px; height: 21px; display: block; } .mono-contact__circle:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); } .mono-contact__coltext { font-size: 14px; letter-spacing: .02em; color: var(--dim); word-break: break-word; transition: color .3s var(--ease); } a.mono-contact__coltext:hover { color: var(--ink); } .mono-contact__col--social .mono-contact__coltext { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .mono-contact__social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } /* Form — a framed card, lifting the finale off the page */ .mono-contact__form { align-self: stretch; background: var(--paper); border: 1px solid var(--hair); padding: clamp(26px, 3.4vw, 48px); box-shadow: 0 40px 80px -50px rgba(20, 20, 20, .45); } .mono-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .mono-field-line { position: relative; border-bottom: 1px solid var(--hair); padding: 34px 0 12px; } .mono-field-line + .mono-field-line { margin-top: 6px; } .mono-field-line label { position: absolute; top: 34px; left: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); pointer-events: none; transition: transform .4s var(--ease), color .3s; transform-origin: left; } .mono-field-line input, .mono-field-line textarea { width: 100%; background: none; border: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(20px, 2vw, 30px); padding: 4px 0; resize: none; outline: none; } .mono-field-line:focus-within { border-color: var(--ink); } .mono-field-line:focus-within label, .mono-field-line.is-filled label { transform: translateY(-27px) scale(.8); color: var(--dim); } .mono-btn { position: relative; margin-top: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; padding: 15px 40px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease); } .mono-btn:hover { background: transparent; color: var(--ink); } .mono-contact__status { margin: 0 0 24px; font-size: 14px; padding: 12px 16px; border: 1px solid var(--hair); } .mono-contact__status--ok { color: var(--ink); background: rgba(20, 20, 20, .03); } .mono-contact__status--err { color: #8a2b2b; border-color: rgba(138, 43, 43, .35); background: rgba(138, 43, 43, .05); } /* ----------------------------- Colophon ---------------------------- */ /* Light footer, continuing the paper journey. */ .mono-colophon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; flex-wrap: wrap; padding: clamp(30px, 5vh, 60px) var(--pad); background: var(--paper-2); color: var(--ink); border-top: 1px solid var(--hair); } .mono-colophon__mark { font-family: var(--sans); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; font-size: 14px; } .mono-colophon__meta { display: flex; justify-content: center; gap: 12px 26px; flex-wrap: wrap; font-size: 12px; letter-spacing: .06em; color: var(--faint); } .mono-colophon__meta a { color: var(--dim); border-bottom: 1px solid var(--hair); transition: color .3s, border-color .3s; } .mono-colophon__meta a:hover { color: var(--ink); border-color: var(--ink); } /* --------------------------- Back to top --------------------------- */ /* A circular button with a solid black background. */ .mono-totop { position: fixed; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); z-index: 100; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: 0 14px 32px -14px rgba(20, 20, 20, .55); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .35s var(--ease); } .mono-totop.is-shown { opacity: 1; pointer-events: auto; } .mono-totop:hover { opacity: 1; transform: translateY(-4px); } .mono-totop svg { width: 18px; height: 18px; display: block; } body.mono-menu-open .mono-totop, body.mono-overlay-open .mono-totop { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .mono-totop:hover { transform: none; } } /* ------------------------- Behind the scenes ----------------------- */ /* A black band — backstage shots pop on black, and it gives the all-white page rhythm. */ .mono-bts { background: var(--ink); color: var(--paper); } .mono-bts .mono-section-head__kicker { color: rgba(255, 255, 255, .5); } .mono-bts .mono-section-head__title { color: var(--paper); } .mono-bts .mono-section-head__note { color: rgba(255, 255, 255, .7); } /* Backstage entries — mini-projects, each opens in the overlay (like Projects). */ /* auto-fit + centred so a single card is centred (not stuck in column 1), and two/three sit as a centred row. */ .mono-bts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 400px)); justify-content: center; gap: clamp(22px, 2.8vw, 46px) clamp(16px, 2vw, 34px); padding: 0 var(--pad) var(--section-y); max-width: 1400px; margin: 0 auto; } .mono-bts__card { text-align: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--paper); } .mono-bts__shot { position: relative; display: block; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); } .mono-bts__shot img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; filter: grayscale(100%); transition: transform 1.2s var(--ease), filter .8s var(--ease); } .mono-bts__card:hover .mono-bts__shot img { transform: scale(1.04); filter: grayscale(0); } /* Card image shape (ratio) + crop position — driven by the Studio settings. */ .mono-bts__shot--r169 { aspect-ratio: 16 / 9; } .mono-bts__shot--r45 { aspect-ratio: 4 / 5; } .mono-bts__shot--r11 { aspect-ratio: 1 / 1; } .mono-bts__shot--rauto { aspect-ratio: auto; } .mono-bts__shot--rauto img { height: auto; } .mono-bts__shot--pt img { object-position: center top; } .mono-bts__shot--pb img { object-position: center bottom; } .mono-bts__shot--pl img { object-position: left center; } .mono-bts__shot--pr img { object-position: right center; } .mono-bts__film { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(8,8,8,.55); backdrop-filter: blur(4px); padding: 5px 10px; border-radius: 2px; } /* Horizontal — a scrolling row of cards (like the earlier strip). */ .mono-bts__grid--horizontal { display: flex; grid-template-columns: none; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mono-bts__grid--horizontal::-webkit-scrollbar { display: none; } .mono-bts__grid--horizontal .mono-bts__card { flex: 0 0 clamp(260px, 32vw, 420px); scroll-snap-align: center; } /* Vertical — full-width rows stacked one below another. */ .mono-bts__grid--vertical { display: flex; grid-template-columns: none; flex-direction: column; max-width: 1000px; } .mono-bts__cap { display: block; padding-top: clamp(14px, 1.6vw, 24px); } .mono-bts__title { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.05; letter-spacing: -.01em; color: var(--paper); } .mono-bts__view { display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 3px; transition: color .3s, border-color .3s; } .mono-bts__card:hover .mono-bts__view { color: var(--paper); border-color: var(--paper); } /* ------------------------------ Banner ----------------------------- */ /* A dark call-to-action band with a parallax background, between About + Contact. */ .mono-banner { position: relative; overflow: hidden; min-height: clamp(340px, 56vh, 620px); display: flex; align-items: center; justify-content: center; background: #000; color: #fff; text-align: center; } /* Fixed-attachment parallax: the image stays pinned to the viewport while the banner scrolls over it. (iOS ignores `fixed` and falls back to a static background — acceptable graceful degradation.) */ .mono-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } .mono-banner--eclipse .mono-banner__bg { background-attachment: scroll; background-image: radial-gradient(circle at 50% 46%, #ffffff 0 20%, #e4e4e4 33%, #3a3a3a 60%, #0d0d0d 100%); } .mono-banner__scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.2)); } .mono-banner__inner { position: relative; z-index: 2; padding: clamp(60px, 10vh, 130px) var(--pad); max-width: 1100px; } .mono-banner__title { font-family: var(--sans); font-weight: 300; font-size: clamp(32px, 5.6vw, 82px); line-height: 1.04; letter-spacing: -.005em; margin: 0; color: var(--ink); text-shadow: 0 1px 22px rgba(255,255,255,.6); } .mono-banner__sub { font-family: var(--sans); font-weight: 400; font-size: clamp(13px, 1.4vw, 17px); letter-spacing: .04em; color: rgba(20,20,20,.72); margin: clamp(16px, 3vh, 30px) 0 0; text-shadow: 0 1px 14px rgba(255,255,255,.7); } .mono-banner__btn { display: inline-block; margin-top: clamp(28px, 5vh, 50px); padding: 16px 44px; border: 1px solid rgba(20,20,20,.7); color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .mono-banner__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } @media (prefers-reduced-motion: reduce) { .mono-banner__bg { transform: none !important; } } /* ------------------- Listing / page / richtext --------------------- */ .mono-page { padding-top: clamp(90px, 14vh, 160px); } .mono-listing__items { border-top: 1px solid var(--hair); } .mono-listing__item a { display: block; padding: clamp(24px, 3vw, 44px) var(--pad); border-bottom: 1px solid var(--hair); transition: background-color .4s; } .mono-listing__item a:hover { background: var(--paper-2); } .mono-listing__date { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .mono-listing__title { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 52px); line-height: 1.02; margin: 10px 0; } .mono-listing__excerpt { color: var(--dim); max-width: 60ch; } .mono-listing__nav { padding: 40px var(--pad); } .mono-listing__nav a, .mono-listing__nav .current { padding: 6px 12px; border: 1px solid var(--hair); margin-right: 6px; font-size: 13px; } .mono-richtext { padding: 0 var(--pad) var(--rhythm); max-width: 74ch; } .mono-richtext p { margin: 0 0 1.2em; color: var(--dim); } .mono-richtext a { border-bottom: 1px solid var(--hair); } .mono-richtext h2, .mono-richtext h3 { font-family: var(--serif); margin: 1.6em 0 .4em; } /* ---------------- Centered layout (main page + project pages) ------ */ /* Content is centered on every screen size. */ .mono-section-head { text-align: center; margin-left: auto; margin-right: auto; } .mono-intro__content { text-align: center; } .mono-intro__rule { margin-left: auto; margin-right: auto; } .mono-about__inner { text-align: center; } .mono-about__lead, .mono-about__body { margin-left: auto; margin-right: auto; } .mono-contact__inner { text-align: center; } .mono-contact__grid { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; } /* Contact details go BELOW the form. */ .mono-contact__form { text-align: left; order: 1; } .mono-contact__details { order: 2; margin-top: clamp(16px, 2.5vh, 28px); } .mono-project__intro { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 34px); text-align: center; max-width: min(1240px, 92vw); margin-left: auto; margin-right: auto; } .mono-project__lead, .mono-project__desc { margin-left: auto; margin-right: auto; } .mono-project__spec { justify-content: center; text-align: center; } .mono-project__hero-cap { align-items: center; text-align: center; } .mono-project__titleband { text-align: center; } /* ----------------------------- Responsive -------------------------- */ @media (max-width: 1024px) { .mono-project__gallery--grid3 { columns: 2; } .mono-work__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .mono-sidenav { display: none; } .mono-intro__cue { display: none; } .mono-work { --slide-w: 84vw; } .mono-team { --cf-w: 72vw; } /* Phones: portfolio & backstage rows become swipeable carousels. A single card sits centred; several cards fall back to start-aligned and scroll. */ .mono-work__grid, .mono-bts__grid { display: flex; grid-template-columns: none; flex-direction: row; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; } .mono-bts__grid--vertical { flex-direction: row; max-width: none; } .mono-work__grid::-webkit-scrollbar, .mono-bts__grid::-webkit-scrollbar { display: none; } .mono-work__grid > .mono-work__slide, .mono-bts__grid > .mono-bts__card { flex: 0 0 82%; scroll-snap-align: center; } .mono-bts__grid--horizontal .mono-bts__card { flex: 0 0 82%; } .mono-project__gallery, .mono-project__gallery--grid2, .mono-project__gallery--grid3 { columns: 1; } .mono-about__stats { grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 2.5vw, 18px); } .mono-about__stat-v { font-size: clamp(30px, 9vw, 60px); } .mono-about__stat-l { font-size: 9px; letter-spacing: .12em; } .mono-contact__grid { grid-template-columns: 1fr; } .mono-contact__cols { gap: 22px; } .mono-project__hero { height: 62vh; min-height: 380px; } .mono-project__spec { flex-direction: column; } .mono-project__spec > div, .mono-project__spec > div + div { border-left: 0; padding: 16px 0; } .mono-project__spec > div + div { border-top: 1px solid var(--hair); } .mono-colophon { flex-direction: column; align-items: center; text-align: center; } }