/* ========================================================= Harigovind Sajimon — portfolio Two modes: Read (warm dark) and Look (warm light). Theme is driven by CSS variables on . ========================================================= */ /* ---------- Design tokens ---------- */ :root { /* Read (default) palette — warm near-black */ --ground: #131110; --ink: #EDE9E2; --accent: #A8B5C4; /* cool desaturated slate — Read only */ --meta: #8A857D; --plate: #1D1A18; --hair: rgba(237, 233, 226, 0.12); /* rhythm + motion */ --rhythm: 8rem; --plate-gap: 14px; --ease: cubic-bezier(0.65, 0, 0.35, 1); --dur: 600ms; --blur-max: 4px; --page-pad: clamp(24px, 5vw, 72px); } /* Look palette — warm off-white. Work carries the colour, no accent. */ body[data-mode="look"] { --ground: #F2EEE7; --ink: #1A1815; --accent: #1A1815; /* neutralised in Look — interactive states darken only */ --meta: #7C756B; --plate: #E6E0D5; --hair: rgba(26, 24, 21, 0.14); --rhythm: 11rem; --plate-gap: 28px; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Global scrollbar theme */ * { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } body { background: var(--ground); color: var(--ink); font-family: 'Bricolage Grotesque', Helvetica, Arial, sans-serif; font-variation-settings: 'opsz' 14; font-weight: 400; min-height: 100vh; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } ::selection { background: #A8B5C4; color: #131110; } a { color: var(--accent); text-decoration: none; } a:hover { opacity: 0.75; } /* content wrapper — target of the mid-transition blur */ .stage { will-change: filter; } .stage.is-switching { animation: modeblur var(--dur) var(--ease) both; } @keyframes modeblur { 0% { filter: blur(0); } 50% { filter: blur(var(--blur-max)); } 100% { filter: blur(0); } } /* shared eyebrow label */ .eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); font-weight: 500; transition: color var(--dur) var(--ease); } /* ========================================================= HERO ========================================================= */ .hero { display: flex; flex-direction: column; padding: 36px var(--page-pad) 48px; } .hero__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .hero__mark { font-size: 14px; font-weight: 500; letter-spacing: 0.06em; font-variation-settings: 'opsz' 12; } .hero__meta { font-size: 13px; color: var(--meta); letter-spacing: 0.04em; transition: color var(--dur) var(--ease); } .hero__body{ display:flex; flex-direction:column; padding:48px 0; } .hero__thesis-wrap { margin-bottom: 4px; } /* visually-hidden real heading — one per mode, screen-reader only */ .thesis__srtitle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); border: 0; } /* poster — scattered editorial layout, short headline + real project photos */ .thesis__poster { position: relative; display: flex; gap: clamp(10px, 2.4vw, 26px); padding: 8px 0 4px; min-height: clamp(320px, 36vw, 520px); } .thesis__side { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); display: flex; align-items: center; justify-content: center; padding: 4px 0; transition: color var(--dur) var(--ease); } .thesis__main { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 3vw, 32px); } .thesis__cap { margin: 0; font-size: 18px; letter-spacing: 0.02em; line-height: 1.45; color: var(--meta); max-width: 30ch; transition: color var(--dur) var(--ease); } .thesis__cap--top { align-self: flex-start; } .thesis__cap--bottom { align-self: flex-end; text-align: right; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; max-width: none; } .thesis__arrow { opacity: 0.65; } .thesis__words { display: flex; flex-direction: column; gap: 2px; } .thesis__word { font-size: clamp(46px, 8.4vw, 130px); line-height: 0.94; font-weight: 600; letter-spacing: -0.03em; font-variation-settings: 'opsz' 96; } .thesis__word:nth-child(2) { margin-left: clamp(16px, 6vw, 84px); } .thesis__word:nth-child(3) { align-self: flex-end; text-align: right; } /* scattered black-and-white project photos, pulled from their own sections */ .thesis__photos { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .thesis__photo { position: absolute; display: block; object-fit: cover; border: 1px solid var(--hair); background: var(--plate); filter: grayscale(1) contrast(1.05); transition: border-color var(--dur) var(--ease); } .thesis__photo--a { top: 0; right: 0; width: clamp(62px, 8vw, 112px); aspect-ratio: 4 / 5; } .thesis__photo--b { bottom: 0; left: 0; width: clamp(62px, 8vw, 112px); aspect-ratio: 4 / 5; } .thesis__photo--c { top: 36%; left: 0; width: clamp(50px, 6vw, 82px); aspect-ratio: 1 / 1; } @media (max-width: 640px) { .thesis__poster { flex-direction: column; min-height: auto; gap: 14px; } .thesis__side { display: none; } .thesis__main { gap: 14px; } .thesis__cap { max-width: none; } .thesis__word { font-size: clamp(32px, 12vw, 54px); } .thesis__word:nth-child(2) { margin-left: 8vw; } .thesis__photos { position: static; display: flex; gap: 10px; pointer-events: auto; } .thesis__photo { position: static; width: 72px; height: 90px; aspect-ratio: auto; } } .switch__track { position: relative; display: inline-flex; background: var(--ink); border-radius: 999px; padding: 6px; /* Reduced track thickness from 8px to 6px */ transition: background-color var(--dur) var(--ease); } .switch__slider { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); /* Matches the new 6px padding */ background: var(--ground); border-radius: 999px; transition: transform 400ms var(--ease), background-color var(--dur) var(--ease); z-index: 1; } body[data-mode="look"] .switch__slider { transform: translateX(0); } body[data-mode="read"] .switch__slider { transform: translateX(100%); } .switch__btn { all: unset; position: relative; z-index: 2; cursor: pointer; font-family: inherit; font-size: 18px; /* Reduced from 26px */ font-weight: 500; letter-spacing: -0.02em; padding: 10px 28px; /* Reduced padding from 14px 40px */ color: var(--ground); transition: color 300ms var(--ease); display: flex; align-items: flex-start; gap: 4px; } .switch__btn[aria-selected="true"] { color: var(--ink); } .switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; } .switch__sup { font-size: 10px; /* Scaled down slightly */ font-weight: 600; margin-top: 3px; opacity: 0.9; } .switch { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 28px; } .switch__hint { font-size: 15px; opacity: 0.6; line-height: 1.3; } @media (max-width: 640px) { /* Mobile switch sizes */ .switch__track { padding: 4px; } .switch__slider { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); } .switch__btn { font-size: 15px; padding: 8px 20px; } .switch__sup { font-size: 9px; margin-top: 1px; } .switch__hint { flex-basis: 100%; font-size: 13px; } .switch { margin-top: 24px; } } /* CTAs */ .cta { display: flex; align-items: center; gap: 32px; margin-top: 44px; } .cta__primary { display: inline-flex; align-items: center; padding: 13px 26px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color var(--dur) var(--ease); } .cta__primary:hover { background: var(--accent); color: var(--ground); opacity: 1; } .cta__secondary { color: var(--ink); font-size: 15px; font-weight: 450; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--meta); transition: color var(--dur) var(--ease), opacity 250ms var(--ease); } .cta__secondary:hover { opacity: 0.65; } .hero__scrollcue { margin-top: 24px; /* Reduced from 48px */ font-size: 12px; } .back-to-top { display: flex; justify-content: center; margin: 48px auto 24px; max-width: 100%; text-align: center; } .back-to-top a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 14px 28px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: transparent; text-decoration: none; font-weight: 500; letter-spacing: 0.01em; transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease); } .back-to-top a:hover { background: var(--accent); color: var(--ground); transform: translateY(-1px); } .back-to-top a span { font-size: 0.95rem; color: var(--meta); letter-spacing: 0.14em; text-transform: uppercase; font-variation-settings: 'opsz' 12; transition: color var(--dur) var(--ease); } /* ========================================================= MODE VISIBILITY Read mode shows [data-panel="read"]; Look shows [data-panel="look"]. ========================================================= */ body[data-mode="read"] [data-panel="look"] { display: none; } body[data-mode="look"] [data-panel="read"] { display: none; } body[data-mode="read"] [data-hero-mode="look"] { display: none; } body[data-mode="look"] [data-hero-mode="read"] { display: none; } /* ========================================================= READ MOMENT — case study ========================================================= */ .read-moment { padding: var(--rhythm) var(--page-pad); border-top: 1px solid var(--hair); transition: padding var(--dur) var(--ease), border-color var(--dur) var(--ease); } .read-moment__inner { max-width: 68ch; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .read-moment__title { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.018em; font-weight: 540; font-variation-settings: 'opsz' 72; text-wrap: balance; } .read-moment__lede { margin: 0; font-size: 19px; line-height: 1.45; opacity: 0.85; max-width: 60ch; } .metarow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--meta); letter-spacing: 0.03em; transition: color var(--dur) var(--ease); } .metarow__dot { opacity: 0.5; } .read-moment__body { margin: 0; font-size: 17px; line-height: 1.65; max-width: 65ch; opacity: 0.9; } /* image plates */ .plate { background: var(--plate); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 22px, var(--hair) 22px, var(--hair) 23px); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .plate--wide { aspect-ratio: 16 / 10; margin: 20px 0 8px; } .plate__label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--meta); letter-spacing: 0.05em; transition: color var(--dur) var(--ease); } .readlink { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; transition: color var(--dur) var(--ease), opacity 250ms var(--ease); } /* ========================================================= READ — MORE WORK RAIL Desktop: pinned scroll-jack — vertical scroll drives horizontal progress through the cards, like a scrollytelling section, until the row is exhausted and the page continues down normally. Mobile / reduced-motion: falls back to a free horizontal scroll, peek-edge, no pin (scroll-jacking a small viewport is bad UX). ========================================================= */ .rail { position: relative; padding: 0 0 var(--rhythm); transition: padding var(--dur) var(--ease); } .rail__pin { display: flex; flex-direction: column; justify-content: center; } .rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 0 var(--page-pad); margin-bottom: 32px; } .rail__hint { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); transition: color var(--dur) var(--ease); } .rail__track { list-style: none; margin: 0; padding: 4px var(--page-pad); display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; /* the last card gets right padding via padding above; peek is natural */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .rail__track::-webkit-scrollbar { display: none; } /* WebKit */ .rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; } /* pinned scroll-jack mode, toggled by script.js via matchMedia */ .rail.is-pinned .rail__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .rail.is-pinned .rail__track { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; } .pcard { flex: 0 0 clamp(280px, 34vw, 420px); scroll-snap-align: start; } .pcard__link { display: flex; flex-direction: column; gap: 14px; color: var(--ink); } .pcard__link:hover { opacity: 1; } .pcard__link:hover .pcard__plate { border-color: var(--accent); } .pcard__link:hover .pcard__title { color: var(--accent); } /* Update this block in your styles.css */ /* Update your plate styles to lock the dimensions */ .plate { width: 100%; height: 220px; /* Forces a consistent height for ALL plates */ overflow: hidden; /* Clips the overflow */ position: relative; /* Ensures the image stays inside */ border: 1px solid var(--hair); } /* Force the images to fill the locked container */ .plate img { width: 100%; height: 100%; object-fit: cover; /* This is the "magic" crop */ display: block; } .pcard__title { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 540; font-variation-settings: 'opsz' 48; transition: color 250ms var(--ease); } .pcard__desc { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.8; } .pcard__meta { margin-top: 2px; } /* ========================================================= LOOK — CHROMA (justified photography field, tag-filterable) ========================================================= */ .chroma { /* Changed from var(--rhythm) 0 to 64px 0 var(--rhythm) */ padding: 64px 0 var(--rhythm); border-top: 1px solid var(--hair); overflow: hidden; transition: padding var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chroma__head { padding: 0 var(--page-pad); margin-bottom: 32px; display: block; } .chroma__head .eyebrow { display: block; margin-bottom: 14px; } /* tag filter chips */ .chroma__filters { display: flex; flex-wrap: wrap; gap: 8px; } /* ---- Chroma Video Showcase ---- */ .chroma__showcase { max-width: 1200px; margin: 0 auto 64px; /* Adjusted margin for its new position at the bottom */ padding: 0 var(--page-pad); display: flex; flex-direction: column; gap: 16px; position: relative; /* Lifts it into the stacking context */ z-index: 10; /* Places it above the photo grid boundaries */ } .chroma__showcase .cs-frame { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--hair); border-radius: 20px; background: var(--plate); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); } .chroma__showcase .cs-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .chip { all: unset; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: var(--meta); border: 1px solid var(--hair); padding: 6px 13px; border-radius: 999px; transition: color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease); } .chip:hover { color: var(--ink); border-color: var(--ink); } .chip[aria-pressed="true"] { color: var(--ground); background: var(--ink); border-color: var(--ink); } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Chroma: structured masonry gallery ---- CSS columns give a masonry flow with no rows — so there is no wrap logic, no accordion, and none of the end-of-row edge cases the slice layout had. Photos vary in size to create hierarchy; an oversized CHROMA sits behind the cluster for the poster feel. Hue tint at rest keeps the colour-sort legible as a gradient; hover clears the tint and lifts the photo. */ .chroma { position: relative; } /* Oversized wordmark, bled off the LEFT edge like a poster. It sits in the margin rather than behind the photos, so it is always partly visible and never "revealed" by filtering (the old behaviour, which read as a glitch). */ .chroma__watermark { position: absolute; top: 50%; left: 0; transform: translate(-22%, -50%); /* crop it off the edge */ font-size: clamp(160px, 26vw, 420px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.82; color: var(--ink); opacity: 0.07; pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; font-variation-settings: 'opsz' 96; transition: color var(--dur) var(--ease); } /* ---- gallery grid ---- A fine column grid; each photo spans a deterministic random block of cells (script.js places them with a greedy packer). Sizes range from tiny to very large, mostly tiled with occasional gaps and a ragged edge — a composed gallery wall rather than a packed mosaic. */ /* wrapper holds edge-fade overlays that don't scroll with the content */ .chroma__field { /* ---- JUSTIFIED MASONRY GRID ---- A gapless grid like a photographer's wall. Fixed columns; each tile spans extra columns/rows by orientation (portrait=tall, landscape=wide, some large), and dense packing backfills every hole so there are NO gaps. Responsive: column count and row height step down on smaller screens. --cols : number of columns --row-h : height of one grid row (a 1x1 tile is --row-h tall) */ --cols: 4; --row-h: 200px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: var(--row-h, 200px); grid-auto-flow: row dense; /* dense = backfill holes -> gapless */ gap: 12px; /* breathing room, like the alphabet grid */ max-width: 1200px; margin: 0 auto; padding: 0 var(--page-pad); } @media (max-width: 1100px) { .chroma__field { --cols: 4; --row-h: 180px; } } @media (max-width: 820px) { .chroma__field { --cols: 3; --row-h: 190px; } /* 3 columns don't divide by 2-wide tiles cleanly, stranding holes. Flatten ALL tiles to 1 column (portraits keep their extra row height). Uniform width in 3 columns packs perfectly gapless. */ .chroma__field .tile { grid-column: span 1 !important; } } @media (max-width: 560px) { .chroma__field { --cols: 2; --row-h: 175px; } } .tile { position: relative; display: block; /* span from script.js; min() caps width so it never exceeds the column count */ grid-column: span min(var(--cw, 1), var(--cols, 4)); grid-row: span var(--ch, 1); overflow: hidden; background: oklch(0.5 0.05 var(--hue, 240)); cursor: pointer; z-index: 1; transform: translate(0, 0) scale(1); transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), opacity 300ms var(--ease); } .tile.is-hidden { display: none; } .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; filter: none; transition: opacity 500ms var(--ease), filter 420ms var(--ease); z-index: 1; } .tile img.is-loaded { opacity: 1; } .chroma-archive .tile img { filter: grayscale(0.55) brightness(0.9); } /* hue tint is only visible in the archive overlay; featured landing grid shows raw photos. The hover state still clears the tint when present. */ .tile::after { content: ""; position: absolute; inset: 0; background: oklch(0.58 0.16 var(--hue, 240)); opacity: 0; mix-blend-mode: multiply; pointer-events: none; transition: opacity 420ms var(--ease); z-index: 2; } .chroma-archive .tile::after { opacity: var(--tintOpacity, 0.45); } /* greyscale photos have no hue — neutral tint so they land naturally */ .chroma-archive .tile.is-bw::after { background: oklch(0.35 0 0); opacity: calc(var(--tintOpacity, 0.45) * 0.5); } /* featured photos carry a slightly lighter tint in archive only */ .chroma-archive .tile.is-feature::after { opacity: calc(var(--tintOpacity, 0.45) * 0.75); } /* hover: the photo lifts slightly and brightens — like the alphabet tiles. No scale-up (scaling made tiles overlap their neighbours and look broken) and no neighbour pushing; just a clean lift within the tile's own cell. */ .tile:hover, .tile:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); z-index: 10; outline: none; } .tile:hover img, .tile:focus-visible img { filter: grayscale(0) brightness(1); } .tile:hover::after, .tile:focus-visible::after { opacity: 0; } /* quiet label, fades up on hover */ .tile__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 11px; letter-spacing: 0.05em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.75); opacity: 0; transform: translateY(4px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); pointer-events: none; text-transform: capitalize; z-index: 3; } .tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 0.95; transform: translateY(0); } .chroma__caption { padding: 0 var(--page-pad); margin-top: 40px; } .chroma__caption p { margin: 0; font-size: 14px; color: var(--meta); letter-spacing: 0.02em; transition: color var(--dur) var(--ease); } /* ---- lightbox / full-size popup ---- */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(18, 16, 14, 0.94); opacity: 0; transition: opacity 300ms var(--ease); } .lightbox.is-open { display: flex; opacity: 1; } .lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 20px 80px rgba(0,0,0,0.5); transform: scale(0.98); transition: transform 300ms var(--ease); } .lightbox.is-open .lightbox__img { transform: scale(1); } .lightbox__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.75); font-size: 13px; letter-spacing: 0.03em; text-transform: capitalize; } .lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); border: none; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; z-index: 5; transition: background-color 200ms var(--ease); } .lightbox__btn:hover { background: rgba(0, 0, 0, 0.7); color: #fff; } .lightbox__btn--prev { left: max(12px, env(safe-area-inset-left, 0px)); } .lightbox__btn--next { right: max(12px, env(safe-area-inset-right, 0px)); } .lightbox__close { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); background: rgba(0, 0, 0, 0.45); border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; padding: 0; z-index: 5; transition: background-color 200ms var(--ease); } .lightbox__close:hover { background: rgba(0, 0, 0, 0.7); color: #fff; } .lightbox__count { position: absolute; top: max(24px, calc(env(safe-area-inset-top, 0px) + 8px)); left: max(24px, env(safe-area-inset-left, 0px)); color: rgba(255,255,255,0.55); font-size: 12px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; z-index: 5; } @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img, .tile, .tile img { transition-duration: 1ms; } } /* ========================================================= LOOK — FORGE (still 3D work: cars + glyph grid) ========================================================= */ .forge { /* Changed the last value from var(--rhythm) to 64px */ padding: 64px var(--page-pad) 64px; transition: padding var(--dur) var(--ease); } .forge__eyebrow { display: block; margin-bottom: 44px; } /* ---- cars: mixed image/video gallery ---- */ .forge__cars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; } .fcar { position: relative; border: none; padding: 0; overflow: hidden; border-radius: 12px; background: var(--plate); cursor: pointer; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background-color var(--dur) var(--ease); } /* shapes — set the box; media fills it via object-fit:cover, framed by focus */ /* all car cells are uniform portrait — uniform height means clean rows with no ragged gaps. media fills via object-fit:cover, framed by per-item focus. */ .fcar, .fcar--landscape, .fcar--portrait, .fcar--wide { aspect-ratio: 3 / 4; grid-column: auto; } .fcar__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* overridden per-item by 'focus' in forge.json */ display: block; } .fcar[data-video] { cursor: zoom-in; } .fcar:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.14); } /* play glyph on cells that open a video */ .fcar[data-video]::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.5) no-repeat center/10px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); opacity: 0; transition: opacity 240ms var(--ease); } .fcar[data-video]:hover::after { opacity: 1; } /* ---- alphabet: thumbnail + hover video ---- */ .forge__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px; margin-top: 28px; } /* Mobile: 2 columns */ @media (max-width: 640px) { .forge__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } } .glyph { position: relative; aspect-ratio: 1; border: none; padding: 0; overflow: hidden; border-radius: 14px; background: var(--plate); cursor: pointer; transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), background-color var(--dur) var(--ease); } .glyph:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 56px rgba(0,0,0,0.24); } /* Media */ .glyph__thumb, .glyph__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .glyph__video { opacity: 0; transition: opacity 240ms var(--ease); } .glyph.is-playing .glyph__video { opacity: 1; } .glyph.is-playing .glyph__thumb { opacity: 0; } /* Character label */ .glyph__char { position: absolute; left: 14px; bottom: 12px; font-size: 17px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.75); letter-spacing: 0.02em; pointer-events: none; z-index: 2; } /* ---- Forge video lightbox ---- */ .forge-lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(12, 11, 10, 0.95); opacity: 0; transition: opacity 260ms var(--ease); } .forge-lightbox.is-open { display: flex; opacity: 1; } .forge-lightbox__video, .forge-lightbox__img { max-width: 90vw; max-height: 84vh; border-radius: 10px; background: #000; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .forge-lightbox__img { display: none; object-fit: contain; } .forge-lightbox__close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.75); cursor: pointer; padding: 8px; } .forge-lightbox__close:hover { color: #fff; } .forge-lightbox__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: 0.03em; } @media (max-width: 820px) { .forge__cars { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .forge__cars { grid-template-columns: repeat(2, 1fr); } } .forge__caption { margin: 20px 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--meta); letter-spacing: 0.05em; transition: color var(--dur) var(--ease); } /* ========================================================= PROJECT DETAIL MODAL (Full Screen Layout) ========================================================= */ .project-modal { position: fixed; inset: 0; z-index: 200; background: var(--ground); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s var(--dur); outline: none; } .project-modal[aria-hidden="false"] { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; } body.modal-open { overflow: hidden; position: fixed; width: 100%; /* 'top' is set inline by JS to -scrollY so the page stays put and doesn't jump to the top when the overlay opens (fixes the Windows scroll jump). */ } html:has(body.modal-open) { overflow: hidden; } .project-modal__scroll { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Header Navbar */ .project-modal__header { position: sticky; top: 0; z-index: 10; background: var(--ground); display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--meta); } .project-modal__back { all: unset; cursor: pointer; color: var(--meta); transition: color 250ms var(--ease); } .project-modal__back:hover { color: var(--ink); } /* Main Content Wrapper */ .project-modal__inner { max-width: 900px; margin: 0 auto; padding: 80px 24px 120px; } .project-modal__eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); font-weight: 500; margin-bottom: 24px; } .project-modal__title { margin: 0 0 28px 0; font-size: clamp(36px, 6vw, 64px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; } .project-modal__desc { margin: 0 0 40px 0; font-size: clamp(18px, 2.5vw, 24px); line-height: 1.5; opacity: 0.9; max-width: 68ch; } .project-modal__meta { font-size: 14px; color: var(--meta); padding-bottom: 56px; } /* Footer Next Project */ .project-modal__footer { margin-top: 100px; padding-top: 48px; border-top: 1px solid var(--hair); } .project-modal__footer-eyebrow { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.16em; color: var(--meta); margin-bottom: 16px; } .project-modal__footer-title { all: unset; font-size: clamp(28px, 4.5vw, 42px); font-weight: 500; cursor: pointer; transition: color 250ms var(--ease); } .project-modal__footer-title:hover { color: var(--accent); } /* ========================================================= CASE STUDY BLOCKS ========================================================= */ .cs { display: flex; flex-direction: column; gap: 40px; } .cs h2 { margin: 32px 0 0; font-size: clamp(28px, 3.5vw, 36px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; } .cs h3 { margin: 16px 0 0; font-size: 20px; font-weight: 500; color: var(--ink); } .cs p { margin: 0; font-size: 17px; line-height: 1.7; opacity: 0.9; max-width: 72ch; } .cs p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cs-card { border: 1px solid var(--hair); border-radius: 20px; padding: 32px; transition: border-color var(--dur) var(--ease); } .cs-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); font-weight: 500; margin-bottom: 24px; } /* Images */ .cs-figure { margin: 0; } .cs-figure img { width: 100%; display: block; border-radius: 16px; border: 1px solid var(--hair); } .cs-figure figcaption { margin-top: 12px; font-size: 13px; color: var(--meta); } .cs-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; justify-content: center; } .cs-pair > .cs-figure { width: 100%; max-width: 340px; margin: 0 auto; } /* Quotes */ .cs-quote { border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; margin: 8px 0; } .cs-quote p { font-size: 20px; line-height: 1.5; font-style: italic; max-width: 65ch; } .cs-quote cite { display: block; margin-top: 12px; font-size: 14px; color: var(--meta); } /* Standard Lists */ .cs-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; } .cs-list li { font-size: 17px; line-height: 1.6; opacity: 0.9; } /* Lined Lists */ .cs-lined { display: flex; flex-direction: column; margin: 0; padding: 0; } .cs-lined li { list-style: none; padding: 24px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.55; opacity: 0.9; } .cs-lined li:first-child { border-top: 1px solid var(--hair); } /* Boxed Grid Lists */ .cs-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .cs-boxes li { border: 1px solid var(--hair); border-radius: 20px; padding: 24px; font-size: 16px; line-height: 1.55; opacity: 0.9; } /* Comparisons */ .cs-compare { border: 1px solid var(--hair); border-radius: 20px; padding: 32px; } .cs-compare__title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); margin-bottom: 24px; font-weight: 500; } .cs-compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .cs-compare__col { border: none; padding: 0; } .cs-compare__col h4 { margin: 0 0 16px; font-size: 16px; font-weight: 500; color: var(--accent); } .cs-compare__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .cs-compare__col li { font-size: 16px; line-height: 1.45; opacity: 0.9; display: flex; gap: 10px; align-items: flex-start; } .cs-compare__col li::before { content: "—"; color: var(--meta); } /* Tables */ /* Tables */ .cs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cs-table-wrap::-webkit-scrollbar { height: 4px; } .cs-table-wrap::-webkit-scrollbar-track { background: transparent; } .cs-table-wrap::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 10px; } .cs-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; /* This is the new rule that prevents squishing */ } .cs-table th { text-align: left; padding: 0 16px 20px 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); font-weight: 500; border-bottom: 1px solid var(--hair); } .cs-table td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--hair); opacity: 0.9; line-height: 1.5; vertical-align: top; } .cs-table tr:last-child td { border-bottom: none; padding-bottom: 0; } /* Dynamic Flow Nodes (Architecture/Concept Grid) */ .cs-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .cs-node { border: 1px solid var(--hair); border-radius: 20px; padding: 24px; } .cs-nodes--architecture .cs-node { display: flex; justify-content: center; text-align: center; } .cs-node__t { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--accent); } .cs-node__d { font-size: 15px; line-height: 1.5; opacity: 0.85; } /* Dynamic Flow Nodes (Snake Flows - Pills) */ .cs-nodes--snake-flow { display: flex !important; flex-wrap: wrap !important; /* Allow natural wrapping again! */ gap: 16px; align-items: center; } .cs-nodes--snake-flow .cs-node { border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 10px; } .cs-nodes--snake-flow .cs-node__n { font-size: 12px; color: var(--meta); font-variant-numeric: tabular-nums; } .cs-nodes--snake-flow .cs-node__t { font-size: 15px; font-weight: 400; color: var(--ink); margin: 0; } .cs-nodes--snake-flow .cs-node__d { display: none; } /* Flow Arrows */ .cs-node__arrow { display: inline-flex; align-items: center; color: var(--meta); opacity: 0.6; } /* Make the curved wrap arrow look intentional */ .cs-node__arrow.is-wrapping { color: var(--accent); margin: 0 4px; } /* Mobile Layout: Vertical Step-by-Step Flow */ @media (max-width: 720px) { .cs-nodes--snake-flow { flex-direction: column; align-items: flex-start; gap: 8px; } .cs-node__arrow { transform: rotate(90deg); margin-left: 32px; } } /* Roadmap */ .cs-road { display: flex; flex-direction: column; gap: 16px; } .cs-road__item { display: grid; grid-template-columns: 140px 1fr; gap: 24px; border: 1px solid var(--hair); border-radius: 20px; padding: 32px; } .cs-road__phase { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .cs-road__body h4 { margin: 0 0 12px; font-size: 18px; font-weight: 500; } .cs-road__body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .cs-road__body li { font-size: 16px; line-height: 1.5; opacity: 0.9; } /* Media Elements */ .cs-video, .cs-frame { width: 100%; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; display: block; } .cs-frame { aspect-ratio: 16 / 10; } .cs-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .cs-phone { max-width: 320px; margin: 0 auto; border: 1px solid var(--hair); border-radius: 32px; padding: 12px; } .cs-phone img, .cs-phone video { width: 100%; display: block; border-radius: 22px; } /* Responsive adjustments */ @media (max-width: 720px) { .cs-compare__cols, .cs-pair { grid-template-columns: 1fr; } .cs-road__item { grid-template-columns: 1fr; gap: 16px; padding: 24px; } .cs-card, .cs-compare { padding: 24px; } .project-modal__inner { padding: 40px 20px 80px; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 720px) { .hero__thesis { font-size: clamp(38px, 11vw, 64px); } .cta { flex-wrap: wrap; gap: 20px; } .project-modal { padding: 0; align-items: flex-end; } .project-modal__panel { width: 100%; max-height: 92vh; } .project-modal__scroll { max-height: 92vh; } .project-modal__body { padding: 24px 20px 32px; } } /* ========================================================= ACCESSIBILITY — respect reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .stage.is-switching { animation: none; } .car__inner, .glyph span { animation: none !important; } .car__inner { transform: none; } * { transition-duration: 1ms !important; } } /* ========================================================= CASE STUDY BLOCKS Instrument-panel language: rounded cards, hairline borders, no fills, tiny uppercase labels, large values, generous padding. Adapted to Read's warm near-black rather than a light ground. ========================================================= */ .cs { display: flex; flex-direction: column; gap: 30px; } /* --- type --- */ .cs h2 { margin: 26px 0 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 560; font-variation-settings: 'opsz' 64; text-wrap: balance; } .cs h3 { margin: 14px 0 0; font-size: 18px; font-weight: 550; letter-spacing: -0.005em; color: var(--ink); } .cs p { margin: 0; font-size: 16.5px; line-height: 1.66; opacity: 0.88; max-width: 68ch; } .cs p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* --- the card, the core unit of the language --- */ .cs-card { border: 1px solid var(--hair); border-radius: 18px; padding: 24px 26px; transition: border-color var(--dur) var(--ease); } .cs-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); font-weight: 500; margin-bottom: 14px; } /* --- images --- */ .cs-figure { margin: 0; } .cs-figure img { width: 100%; display: block; border-radius: 14px; border: 1px solid var(--hair); } .cs-figure figcaption { margin-top: 10px; font-size: 12.5px; color: var(--meta); letter-spacing: 0.01em; } .cs-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; justify-content: center; } .cs-pair > .cs-figure { width: 100%; max-width: 340px; margin: 0 auto; } /* --- quote --- */ .cs-quote { border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; margin: 4px 0; } .cs-quote p { font-size: 19px; line-height: 1.5; font-style: italic; opacity: 0.95; max-width: 60ch; } .cs-quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: var(--meta); } /* --- lists --- */ .cs-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .cs-list li { font-size: 16px; line-height: 1.6; opacity: 0.88; } .cs-lined { display: flex; flex-direction: column; } .cs-lined li { list-style: none; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.55; opacity: 0.9; transition: border-color var(--dur) var(--ease); } .cs-lined { margin: 0; padding: 0; } .cs-lined li:first-child { border-top: 1px solid var(--hair); } /* box-list: a row of cards */ .cs-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .cs-boxes li { border: 1px solid var(--hair); border-radius: 14px; padding: 18px 20px; font-size: 15px; line-height: 1.55; opacity: 0.9; transition: border-color var(--dur) var(--ease); } /* --- comparison: two panels side by side --- */ .cs-compare { display: grid; gap: 14px; } .cs-compare__title { font-size: 15px; font-weight: 550; margin-bottom: 4px; } .cs-compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cs-compare__col { border: 1px solid var(--hair); border-radius: 16px; padding: 20px 22px; transition: border-color var(--dur) var(--ease); } .cs-compare__col h4 { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .cs-compare__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .cs-compare__col li { font-size: 15px; line-height: 1.45; opacity: 0.85; } /* --- table --- */ .cs-table { width: 100%; border-collapse: collapse; font-size: 15px; } .cs-table th { text-align: left; padding: 12px 14px 12px 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); font-weight: 500; border-bottom: 1px solid var(--hair); } .cs-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hair); opacity: 0.88; line-height: 1.5; vertical-align: top; } /* --- architecture / concept-grid / snake-flow: node panels --- */ .cs-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .cs-node { border: 1px solid var(--hair); border-radius: 16px; padding: 20px; transition: border-color 250ms var(--ease); } .cs-node:hover { border-color: var(--accent); } .cs-node__n { font-size: 11px; letter-spacing: 0.12em; color: var(--accent); font-weight: 600; margin-bottom: 8px; } .cs-node__t { font-size: 15.5px; font-weight: 550; margin-bottom: 6px; } .cs-node__d { font-size: 14px; line-height: 1.5; opacity: 0.75; } /* --- roadmap: timeline of cards --- */ .cs-road { display: flex; flex-direction: column; gap: 12px; } .cs-road__item { display: grid; grid-template-columns: 110px 1fr; gap: 18px; border: 1px solid var(--hair); border-radius: 16px; padding: 20px 22px; transition: border-color var(--dur) var(--ease); } .cs-road__phase { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; padding-top: 2px; } .cs-road__body h4 { margin: 0 0 8px; font-size: 16px; font-weight: 550; } .cs-road__body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .cs-road__body li { font-size: 14.5px; line-height: 1.5; opacity: 0.82; } /* --- media --- */ .cs-video, .cs-frame { width: 100%; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; display: block; } .cs-frame { aspect-ratio: 16 / 10; } .cs-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* mobile-demo: a phone-shaped frame, echoing the reference */ .cs-phone { position: relative; max-width: 420px; width: min(100%, 420px); height: min(980px, 95vh); margin: 0 auto; border: 1px solid var(--hair); border-radius: 44px; padding: 18px; background: var(--ground); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 24px 60px rgba(0,0,0,0.18); overflow: hidden; } .cs-phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 84px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.4); } .cs-phone::after { content: ''; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.16); } .cs-phone img, .cs-phone video, .cs-phone iframe { width: 100%; height: 100%; display: block; border-radius: 24px; } .cs-phone iframe { border: 0; } @media (max-width: 720px) { .cs-compare__cols, .cs-pair { grid-template-columns: 1fr; } .cs-road__item { grid-template-columns: 1fr; gap: 10px; } .cs-card { padding: 20px; } } /* ========================================================= ICONS & INLINE SVGs ========================================================= */ .icon-wrapper { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; /* Aligns icon visually with the first line of text */ } .icon-wrapper svg { width: 22px; height: 22px; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Ensure flex alignment for headings and lists containing icons */ .cs h3 { display: flex; align-items: center; gap: 12px; } .cs-list li { display: flex; align-items: flex-start; gap: 12px; } /* ========================================================= DIAGRAMS v2 — contextual, structured, legible (appended last, so these win the cascade) ========================================================= */ /* ---------- FLOW (user journeys + loops) ---------- */ .cs-flow { display: flex; flex-direction: column; gap: 16px; } .cs-flow__track { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; } .cs-flow__step { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border: 1px solid var(--hair); border-radius: 12px; background: color-mix(in oklch, var(--accent) 3%, transparent); transition: border-color 200ms var(--ease), transform 200ms var(--ease); } .cs-flow__step:hover { border-color: var(--accent); transform: translateY(-2px); } .cs-flow__num { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .cs-flow__txt { font-size: 14.5px; line-height: 1.3; } .cs-flow__arrow { color: var(--meta); display: inline-flex; opacity: 0.55; flex: 0 0 auto; } /* loop variant — warmer/alert tone, because it's the NEGATIVE cycle Hiro breaks */ .cs-flow--loop .cs-flow__step { background: color-mix(in oklch, #c88 5%, transparent); border-color: color-mix(in oklch, #c88 22%, var(--hair)); } .cs-flow--loop .cs-flow__num { background: color-mix(in oklch, #d68b6b 20%, transparent); color: #e0a284; } .cs-flow__step--return { border-style: dashed; border-color: color-mix(in oklch, #d68b6b 45%, var(--hair)); } .cs-flow__loopback { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 8px 14px; border: 1px dashed color-mix(in oklch, #d68b6b 40%, var(--hair)); border-radius: 999px; color: #d99a7c; font-size: 12.5px; letter-spacing: 0.01em; } /* ---------- ARCHITECTURE (layered pipeline) ---------- */ .cs-arch { display: flex; flex-direction: column; align-items: center; padding: 4px 0; } .cs-arch__layer { display: flex; gap: 14px; justify-content: center; align-items: stretch; flex-wrap: wrap; width: 100%; } .cs-arch__group { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--hair); border-radius: 16px; flex: 1 1 0; min-width: 200px; } .cs-arch__node { border: 1px solid var(--hair); border-radius: 12px; padding: 13px 16px; font-size: 13px; line-height: 1.4; opacity: 0.92; background: color-mix(in oklch, var(--accent) 4%, transparent); transition: border-color 200ms var(--ease), transform 200ms var(--ease); } .cs-arch__node:hover { border-color: var(--accent); transform: translateY(-2px); } .cs-arch__node strong { font-weight: 600; opacity: 1; } .cs-arch__node--hero { align-self: center; min-width: 250px; text-align: center; border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); padding: 16px 26px; font-size: 14px; } .cs-arch__node--hero strong { color: var(--accent); font-size: 15px; } .cs-arch__connector { color: var(--meta); padding: 6px 0; opacity: 0.55; } /* ---------- CONCEPT GRID ---------- */ .cs-concept__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .cs-concept__card { border: 1px solid var(--hair); border-radius: 16px; padding: 20px; transition: border-color 200ms var(--ease), transform 200ms var(--ease); } .cs-concept__card:hover { border-color: var(--accent); transform: translateY(-2px); } .cs-concept__t { font-size: 16px; font-weight: 600; color: var(--accent); margin-bottom: 8px; letter-spacing: -0.01em; } .cs-concept__d { font-size: 14px; line-height: 1.55; opacity: 0.78; } /* ---------- COMPARISON as opposing forces ---------- */ .cs-compare__cols { position: relative; align-items: stretch; } .cs-compare__cols::after { content: "vs"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair); border-radius: 50%; background: var(--ground); font-size: 12px; font-style: italic; color: var(--meta); z-index: 2; } @media (max-width: 720px) { .cs-arch__layer { flex-direction: column; } .cs-arch__group { min-width: 0; } .cs-compare__cols::after { display: none; } .cs-flow__step { padding: 9px 13px 9px 10px; } .cs-flow__txt { font-size: 13.5px; } } .cs-card input, .cs-card textarea { font-family: inherit; border: 1px solid var(--hair); border-radius: 12px; padding: 16px; background: var(--plate); color: var(--ink); width: 100%; } /* ====================== CONTACT FORM ====================== */ .cs-contact-form { display: flex; flex-direction: column; gap: 20px; /* Better vertical spacing */ max-width: 620px; margin-top: 32px; } .cs-contact-form .cs-card { padding: 4px 6px; /* Tighter internal padding for inputs */ border-radius: 16px; margin: 0; /* Reset any unwanted margin */ } .cs-contact-form input, .cs-contact-form textarea { width: 100%; background: transparent; border: none; outline: none; font-family: inherit; font-size: 17px; line-height: 1.55; color: var(--ink); padding: 16px 20px; } .cs-contact-form input::placeholder, .cs-contact-form textarea::placeholder { color: var(--meta); opacity: 0.75; } .cs-contact-form textarea { min-height: 180px; resize: vertical; } /* Direct email card */ .cs-card .contact-email { font-size: 23px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); display: block; padding: 8px 0; } .contact-email:hover { opacity: 0.85; } /* Send button — now matches the hero CTA perfectly */ .cs-contact-form .cta__primary { align-self: flex-start; margin-top: 8px; padding: 14px 32px; font-size: 15px; } /* ========================================================= CHROMA — "View all" button + full archive overlay ========================================================= */ .chroma__caption { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } /* prominent call to action — solid, centred, with an arrow */ .chroma__viewall { appearance: none; background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: 999px; padding: 15px 30px; font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), opacity 220ms var(--ease); } .chroma__viewall::after { content: "→"; font-size: 15px; transition: transform 220ms var(--ease); } .chroma__viewall:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in oklch, var(--ink) 28%, transparent); } .chroma__viewall:hover::after { transform: translateX(4px); } .chroma-archive { position: fixed; inset: 0; height: 100dvh; z-index: 90; display: flex; /* Changed from none to flex */ flex-direction: column; background: var(--ground); opacity: 0; visibility: hidden; /* ADD THIS */ pointer-events: none; /* ADD THIS — lets clicks pass through */ transition: opacity 280ms var(--ease), visibility 0s 280ms; } .chroma-archive.is-open { opacity: 1; visibility: visible; pointer-events: auto; /* ADD THIS — enables clicks when open */ transition: opacity 280ms var(--ease), visibility 0s; } .chroma-archive__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: max(16px, env(safe-area-inset-top, 0px)) var(--page-pad) 16px; border-bottom: 1px solid var(--hair); background: var(--ground); } .chroma-archive__meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; } .chroma-archive__title { font-size: 14px; letter-spacing: 0.02em; color: var(--ink); } .chroma-archive__count { font-size: 12.5px; color: var(--meta); letter-spacing: 0.02em; } .chroma-archive__close { flex: 0 0 auto; background: none; border: 1px solid var(--hair); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color 200ms var(--ease), background-color 200ms var(--ease); } .chroma-archive__close:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); } .chroma-archive__scroll { flex: 1 1 auto; /* min-height:0 is REQUIRED — a flex item defaults to min-height:auto, which stops it shrinking below its content, so the container grows to fit all 126 photos and overflow-y never engages (scroll gets stuck partway). */ min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 0 64px; } /* the filter chips sit above the archive grid */ .chroma-archive__scroll .chroma__filters { padding: 0 var(--page-pad); margin-bottom: 22px; max-width: 1200px; margin-left: auto; margin-right: auto; } @media (max-width: 560px) { .chroma__caption { gap: 14px; } .chroma__viewall { width: 100%; text-align: center; } .chroma-archive__bar { padding-left: 18px; padding-right: 18px; } }