/* ─────────────────────────────────────────── RESET & TOKENS ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* DESIGNER REVIEW: all colour values are placeholder */ --paper: #CFBE9E; --paper-rgb: 207, 190, 158; /* same value as --paper, split out for use in rgba() (e.g. tinting the wood texture in .wood-surface) */ --paper-dark: #e8e0d0; --amber: #5C6437; /* was gold #c8892a — now aliased to the hover green so every old accent use follows the new palette */ --hover: #5C6437; /* the one hover-state color, used everywhere something is hovered */ --amber-light: #e8b84b; --rust: #b84c2e; --pink: #d4897a; --sage: #7a9b80; --ink: #1e1710; --ink-mid: #3d3022; --ink-faint: rgba(30,23,16,0.35); --electric: #3a7dff; /* shadow system */ --sh-base: 0 4px 18px rgba(30,23,16,0.13), 0 1px 5px rgba(30,23,16,0.08); --sh-lift: 0 16px 44px rgba(30,23,16,0.21), 0 4px 12px rgba(30,23,16,0.12); /* Argent Pixel CF — loaded via the Adobe Fonts (Typekit) kit link in index.html . One weight only (400, roman + italic), used for the name-mark, all headings, and object labels. Mono stays on Google Fonts for small utility text (tabs, meta, captions). */ --font-serif: 'argent-pixel-cf', Georgia, serif; --font-mono: 'DM Mono', 'Courier New', monospace; --header-h: 84px; /* persistent top bar height, used to offset content below it */ } /* Same tint+texture as .wood-surface (not the class itself, since that also carries background-attachment:local, meant for a scrolling element — html/body never scroll, per overflow:hidden above). This is what actually shows through the transparent header on every non-home page — #domain-view's own wood-surface layer covers everything below the header's clip line, but html/body is the ONLY background behind the header's now-empty strip. Without this, that strip was just flat --paper with no grain at all. */ html, body { width: 100%; height: 100%; overflow: hidden; background-color: var(--paper); background-image: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(30,23,16,0.07) 100%), linear-gradient(rgba(var(--paper-rgb), 0.5), rgba(var(--paper-rgb), 0.5)), url('assets/background-faded.jpg'); background-size: cover, cover, 100% auto; background-position: center, center, center top; background-repeat: no-repeat, no-repeat, repeat-y; color: var(--ink); font-family: var(--font-serif); } /* paper grain — layered noise texture */ body::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); background-size: 200px 200px; mix-blend-mode: multiply; } /* ─────────────────────────────────────────── LOADER SCREEN ─────────────────────────────────────────── */ #loader { position: fixed; inset: 0; z-index: 800; background: var(--paper); display: flex; align-items: center; justify-content: center; pointer-events: none; } #loader-name { font-family: var(--font-serif); font-size: clamp(30px, 5vw, 48px); font-weight: 400; letter-spacing: 0.04em; color: var(--ink-mid); opacity: 0; } /* ─────────────────────────────────────────── PERSISTENT HEADER — name (click = home), socials, nav trigger. Fixed above every view. The social icons and nav trigger stay the same size on every breakpoint per feedback: nothing there shrinks on mobile. The name-mark is the one exception — on a narrow phone viewport "abhas misraraj" was wrapping to two lines, and the fix requested is to shrink the text (via clamp()) rather than ever let it wrap (see .name-mark below). The bar itself ignores pointer events so it never blocks clicks on content underneath; only its buttons (name, social links, nav trigger) opt back in. ─────────────────────────────────────────── */ #top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 210; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; pointer-events: none; opacity: 0; /* revealed by GSAP */ background: transparent; transition: background 0.3s ease; } /* The header stays fully transparent everywhere — home AND every other page — same as it always did on the home desk. What used to sit behind it (domain-view/gallery content) is now clipped off via clip-path on #desk/#domain-view themselves (see .wood-surface), so there's nothing back there to show through: the "header" is really just an optical illusion made of a hard clip line, not an opaque bar. Simpler and more robust than the texture-matching / scroll-synced version this replaced, which never looked right. */ .name-mark { pointer-events: auto; background: none; border: none; cursor: pointer; display: flex; align-items: center; font-family: var(--font-serif); font-size: clamp(15px, 4.5vw, 28px); white-space: nowrap; letter-spacing: -0.07em; color: var(--ink-mid); opacity: 0.7; padding: 10px 6px; transition: opacity 0.2s; } .name-mark:hover { opacity: 1; color: var(--hover); } .top-right-cluster { pointer-events: auto; display: flex; align-items: center; gap: 6px; } @media (min-width: 681px) { .top-right-cluster { gap: 34px; } } /* ─────────────────────────────────────────── SOCIAL LINKS — 44×44 min tap targets, vertically centered with the nav trigger via the flex cluster above. ─────────────────────────────────────────── */ .social-row { display: flex; align-items: center; gap: 6px; } .social-row a { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.55; transition: opacity 0.2s, background 0.2s; } .social-row a:hover { opacity: 1; background: rgba(30,23,16,0.06); } .social-row img { width: 22px; height: 22px; display: block; } /* ─────────────────────────────────────────── NAV TRIGGER — 44×44 tap target ─────────────────────────────────────────── */ .nav-trigger { width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: opacity 0.2s; } .nav-trigger span { display: block; width: 24px; height: 1.5px; background: var(--ink); opacity: 0.5; transform-origin: center; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34,1.2,0.64,1), width 0.25s; } .nav-trigger:hover span { opacity: 0.8; } .nav-trigger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); opacity: 0.8; } .nav-trigger.open span:nth-child(2) { width: 0; opacity: 0; } .nav-trigger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); opacity: 0.8; } /* ─────────────────────────────────────────── NAV MENU — slides in from top-right ─────────────────────────────────────────── */ #nav-menu { position: fixed; top: 0; right: 0; z-index: 205; width: 320px; height: 100vh; background: var(--paper); border-left: 1px solid rgba(30,23,16,0.08); padding: 110px 40px 40px; transform: translateX(100%); opacity: 0; pointer-events: none; overflow-y: auto; /* DESIGNER REVIEW: nav reveal style — currently a right-panel slide */ } #nav-menu.open { pointer-events: all; } .nav-section { margin-bottom: 36px; } /* Shared tiny-label treatment — was previously split into three slightly different groups (10px/11px, 0.06-0.16em, some not uppercase), consolidated from ~14 near-identical one-off declarations. All of them now match the "Get in Touch" button (.cs-btn)'s original treatment instead — that one read the best of the bunch and the others were genuinely too small to read comfortably. Each selector keeps its own color/spacing/etc in its own rule — only the font treatment moved here. */ .nav-section-label, .about-portrait span, .cs-eyebrow, .cs-stat-label, .skills-proficiency-tier-label, .gallery-tab, .cs-btn, .cs-nav-footer button, .cs-back-top, .lb-close, .nav-ext-link, .lb-counter, .embed-caption, .site-footer { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .nav-section-label { color: var(--ink-faint); margin-bottom: 14px; } .nav-link { display: block; font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--ink-mid); text-decoration: none; padding: 4px 0; border: none; background: none; cursor: pointer; text-align: left; width: 100%; transition: color 0.2s, transform 0.2s; transform: translateX(0); opacity: 0; /* animated in */ } .nav-link:hover { color: var(--hover); transform: translateX(4px); } .nav-external { display: flex; gap: 16px; flex-wrap: wrap; } .nav-ext-link { color: var(--ink-faint); text-decoration: none; border: none; background: none; cursor: pointer; padding: 0; transition: color 0.2s; } .nav-ext-link:hover { color: var(--hover); } /* ─────────────────────────────────────────── ARTISTIC SKILLS TRACKER LINK — bottom corner Was a barely-visible easter egg; now legible but still quiet. ─────────────────────────────────────────── */ /* Same treatment as the object labels — Argent Pixel CF, no mono/ uppercase/letter-spacing — so these corner links read as part of the same family of links as "Photography", "Product Design", etc. */ .skills-tracker-link, .about-link { position: absolute; bottom: 22px; z-index: 40; font-family: var(--font-serif); font-size: 16px; color: var(--ink-mid); opacity: 0.75; background: none; border: none; cursor: pointer; padding: 8px 4px; transition: opacity 0.25s, color 0.25s; } .skills-tracker-link { left: 28px; } .about-link { right: 28px; } .skills-tracker-link:hover, .about-link:hover { opacity: 1; color: var(--hover); } /* ─────────────────────────────────────────── SURFACE / DESK padding-top keeps objects clear of the fixed header (percentage positions inside resolve against the padded box, so top:0% already starts just below the header — no object can slide behind it). ─────────────────────────────────────────── */ /* Wood-desk texture + vignette, shared by every scrollable surface (the desk AND every domain view/gallery/etc — not just home). Both layers use background-attachment:local so they scroll WITH the content and always cover its full height, never just the first viewport — that's what was cutting off before the footer. Putting the vignette here as a background layer (rather than a separate ::after sized to the element's own fixed box) is what fixes it. */ /* The texture TILES (rather than stretching one copy to cover however tall the scrollable content gets) — stretching a single image over a very long page blew it up into a blurry mess. A fixed tile size repeating keeps it crisp no matter how long the page is. The vignette gradient stays a single cover layer since gradients don't pixelate when scaled. */ /* Texture always fills the full width (background-size: 100% auto) and only repeats VERTICALLY (repeat-y) once the page runs past one image-height's worth of content — never tiled sideways, and never stretched to blur across the whole scroll height either. */ /* The wood photo (background-faded.jpg) has its own baked-in tan tone, so simply changing --paper doesn't touch it — it just sits on top, unrelated to the color underneath. A flat --paper tint at 75% opacity sits between the vignette and the photo so the photo shows through only as texture (~25%) rather than setting the actual color. */ .wood-surface { background-color: var(--paper); background-image: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(30,23,16,0.07) 100%), linear-gradient(rgba(var(--paper-rgb), 0.5), rgba(var(--paper-rgb), 0.5)), url('assets/background-faded.jpg'); background-size: cover, cover, 100% auto; background-position: center, center, center top; background-repeat: no-repeat, no-repeat, repeat-y; background-attachment: local, local, local; } /* Home desk is unchanged — objects can sit right up against/behind the (fully transparent) header there, as before. Every OTHER page clips its own content+background off at the header's height, so nothing ever renders in that strip — the see-through header reads as a hard "everything disappears here" line instead of an opaque bar, with zero need to match colors/textures/scroll position. */ #domain-view { clip-path: inset(var(--header-h) 0 0 0); } #desk { position: fixed; inset: 0; z-index: 10; overflow-x: hidden; overflow-y: auto; } /* ─────────────────────────────────────────── OBJECTS — desk items All ten objects live inside #desk directly (position:absolute, percentage top/left) but their SIZE is a percentage of the viewport clamped between a floor and ceiling — see per-object rules below. That combination is what keeps spacing visually consistent at every breakpoint while letting objects grow generously on large screens and never shrink past a legible floor on small ones. ─────────────────────────────────────────── */ .obj { position: absolute; cursor: pointer; opacity: 0; /* GSAP reveals */ z-index: 20; } .obj-img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 14px rgba(30,23,16,0.18)) drop-shadow(0 1px 4px rgba(30,23,16,0.1)); } /* Rotation lives on .obj-inner (and the label, separately) via a per-object --rot custom property — NOT on .obj itself — so the label's own position/centering logic stays simple while both pieces visually sit on the same tilted "plane" as the desk object. */ /* The image itself is never rotated by CSS — it's used exactly as supplied. Only the label text underneath carries the --rot tilt. */ .obj-inner { position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); } .obj-inner .obj-img { transition: filter 0.3s ease; } .obj:hover .obj-inner { transform: translateY(-6px) scale(1.035); } .obj:hover .obj-inner .obj-img { filter: drop-shadow(0 18px 30px rgba(30,23,16,0.28)) drop-shadow(0 4px 10px rgba(30,23,16,0.16)); } /* label — visible at rest now (not hover-only); tilted per --rot. pointer-events is NOT none here on purpose: hovering/clicking the label itself (not just the image) needs to open the same domain, via bubbling up to .obj's hover state and onclick handler. */ .obj-label { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%) rotate(var(--rot, 0deg)); font-family: var(--font-serif); font-size: 16px; color: var(--ink-mid); opacity: 0.7; white-space: nowrap; transition: opacity 0.22s ease, color 0.22s, transform 0.22s; cursor: pointer; } .obj:hover .obj-label { opacity: 1; color: var(--hover); transform: translateX(-50%) translateY(-2px) rotate(var(--rot, 0deg)); } /* ── individual object placements & sizes ── Positions are percentage-based (top/left, relative to #desk) so the cluster scales as one unit as the viewport resizes — that's what keeps the gaps between objects visually consistent instead of stretching apart on wide screens. Width is also percentage-based (of the viewport) but clamped so objects grow large on big screens without shrinking below a comfortable floor on small ones. Objects are packed tighter (less dead space) than earlier passes, and each carries a --rot custom property used by both the image and its label. DESIGNER REVIEW: positions/rotations loosely matched to the v1 flat-lay. */ /* Positions/sizes read directly off the reference flat-lay at its exact 1920×928 breakpoint (top/left as % of viewport, matching the image's own proportions pixel-for-pixel; width in vw calibrated so it lands on the exact px width at 1920 and scales down gracefully below that). top uses max(header-clearance, Y%) — the percentage alone matches the reference exactly at normal/tall viewports, and the max() only kicks in as a floor on unusually short ones so nothing can slide behind the fixed header. Label rotation: CSS rotate() is positive-clockwise, but the given angles are positive-counterclockwise, so every value is negated here (e.g. "6.76° CCW" → rotate(-6.76deg)). */ /* Y% values shifted up ~3.3 points from the raw reference reading so the whole cluster sits vertically centered in the viewport (as a block) rather than centered only in the space below the header — that's what was reading "a little low" before. */ #o-product { top: max(calc(var(--header-h) + 10px), 15.3%); left: 4.75%; width: clamp(150px, 15.25vw, 293px); --rot: -6.76deg; } #o-photography { top: max(calc(var(--header-h) + 10px), 13.2%); left: 32.75%; width: clamp(150px, 13.75vw, 264px); --rot: -0.63deg; } #o-writing { top: max(calc(var(--header-h) + 10px), 7.55%); left: 57.75%; width: clamp(120px, 9.25vw, 178px); --rot: 9.6deg; } #o-shop { top: max(calc(var(--header-h) + 10px), 16.8%); left: 85.25%; width: clamp(90px, 6.25vw, 120px); --rot: 14.33deg; } #o-games { top: max(calc(var(--header-h) + 10px), 56.1%); left: 7.5%; width: clamp(130px, 10.25vw, 197px); --rot: -10.38deg; } #o-illustration { top: max(calc(var(--header-h) + 10px), 46.3%); left: 24.75%; width: clamp(190px, 18vw, 346px); --rot: 3.45deg; } #o-bookshelf { top: max(calc(var(--header-h) + 10px), 50.4%); left: 46.5%; width: clamp(105px, 11.25vw, 216px); --rot: 6.62deg; } #o-film { top: max(calc(var(--header-h) + 10px), 37.5%); left: 66.5%; width: clamp(180px, 18vw, 346px); --rot: -14.5deg; } #o-music { top: max(calc(var(--header-h) + 10px), 69.5%); left: 70.25%; width: clamp(90px, 7.75vw, 149px); --rot: -13.92deg; } #o-performance { top: max(calc(var(--header-h) + 10px), 57.7%); left: 85%; width: clamp(100px, 10.75vw, 206px); --rot: 11.04deg; } /* Desk objects are positioned continuously (%/vw-based) rather than with discrete breakpoints, which mostly self-adjusts fine — but a few objects were crowding/overlapping their neighbors specifically around 863px wide. Rather than snapping a fixed nudge on/off at that width, --bp-t ramps linearly from 0 (at 1422px and above, no nudge) to 1 (at 863px and below, the full nudge below is reached and then held) — same "clamp + viewport-relative value" fluid- scaling idiom the width: clamp(...) rules above already use, just solved for a 0..1 progress value instead of a min/max length. (100vw / 1px) is a trick to get the viewport width as a plain unitless number so it can be combined with the unitless 1422/559 constants — calc() can't otherwise divide/multiply mismatched units. Applied via margin (object + label move together since the label lives inside .obj), not transform:translate, since the GSAP entrance animation sets an inline transform on .obj itself once it finishes, which would silently override a CSS transform here. */ @media (min-width: 681px) { :root { --bp-t: clamp(0, calc((1422 - (100vw / 1px)) / 559), 1); } #o-illustration { margin: calc(var(--bp-t) * -102px) 0 0 calc(var(--bp-t) * -7px); } #o-bookshelf { margin: calc(var(--bp-t) * 91px) 0 0 calc(var(--bp-t) * -24px); } #o-music { margin: calc(var(--bp-t) * 77px) 0 0 calc(var(--bp-t) * -34px); } #o-film { margin: calc(var(--bp-t) * 62px) 0 0 calc(var(--bp-t) * -40px); } #o-writing { margin: calc(var(--bp-t) * 87px) 0 0 calc(var(--bp-t) * 24px); } } /* Label placement per object, matching the reference: most labels sit ABOVE their object, a few stay below or shift to one side — not a uniform "always centered below" rule. Rotation (--rot) still applies the same way regardless of side. */ #o-product .obj-label, #o-writing .obj-label, #o-games .obj-label, #o-music .obj-label { top: -30px; bottom: auto; } #o-shop .obj-label { top: -22px; bottom: auto; left: auto; right: -18px; transform: rotate(var(--rot, 0deg)); } #o-shop:hover .obj-label { transform: translateY(-2px) rotate(var(--rot, 0deg)); } #o-film .obj-label { top: -30px; bottom: auto; left: 28%; } /* Pixel nudges on top of the placements above — measured against the reference flat-lay at the 1920×928 desktop breakpoint. */ #o-product .obj-label { left: calc(50% - 19px); top: -15px; } #o-photography .obj-label { bottom: -15px; } #o-writing .obj-label { left: calc(50% + 34px); top: -14px; } /* Percentage-based (not fixed px) on purpose: #o-film's width is a clamp() that shrinks a lot between breakpoints, and a fixed top offset stayed the same regardless — so at narrower desktop widths the label sat further down INSIDE the now-shorter image instead of below it. % of the object's own box scales with it. (64px top / 40px left were measured against the object's rendered size at the 1920px reference breakpoint — 346px wide × ~230px tall.) */ #o-film .obj-label { left: 16.4%; top: 27.8%; } #o-shop .obj-label { right: -53px; top: 32px; } #o-music .obj-label { left: calc(50% - 25px); top: -13px; } #o-performance .obj-label { left: calc(50% - 26px); bottom: -9px; } #o-bookshelf .obj-label { left: calc(50% - 13px); bottom: -25px; } #o-illustration .obj-label { left: calc(50% - 31px); bottom: -20px; } #o-games .obj-label { left: calc(50% - 23px); top: -15px; } /* ─────────────────────────────────────────── DOMAIN VIEW — full / near-full screen. No in-view back button — the persistent header name is the way home. ─────────────────────────────────────────── */ #domain-view { position: fixed; inset: 0; z-index: 100; opacity: 0; pointer-events: none; overflow-y: auto; } #domain-view.active { pointer-events: all; } .dv-content { min-height: 100vh; padding: calc(var(--header-h) + 50px) 60px 100px; max-width: 880px; margin: 0 auto; opacity: 0; } /* wide modifier — grids/embeds/image-heavy views get much more room; prose-heavy views (Writing, About) stay at the narrower reading width */ .dv-content.wide { max-width: min(1700px, 96vw); } /* Same fixed size as the header name-mark — page titles shouldn't dominate the screen, the content underneath should. */ .dv-title { font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.1; color: var(--ink-mid); opacity: 0.7; margin-bottom: 24px; } .cs-detail .dv-title { font-size: 24px; } /* Photography / Illustration & Collage: tighter top spacing and side padding so the images are the centerpiece, not the header — the left/right margin matches the gap between tiles themselves. */ .dv-content.gallery-view { padding-top: calc(var(--header-h) + 26px); padding-left: 18px; padding-right: 18px; } @media (min-width: 700px) { .dv-content.gallery-view { padding-left: 26px; padding-right: 26px; } } .gallery-view .dv-title { margin-bottom: 18px; } .gallery-view .gallery-tabs { margin-bottom: 22px; } .dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-bottom: 60px; } .dv-card { background: var(--paper-dark); border-radius: 4px; aspect-ratio: 4/3; display: flex; align-items: flex-end; padding: 16px; transition: transform 0.3s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.25s; cursor: pointer; overflow: hidden; position: relative; } .dv-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); } .dv-card-label { font-family: var(--font-serif); font-size: 15px; color: var(--ink-mid); opacity: 0.85; } /* Shared body-copy treatment (Georgia 17px/1.85) — used for every prose paragraph, bullet list, and icon-row across the site (.dv-prose, .cs-p, .cs-list, .cs-icon-row, .about-list, .embed-empty) so long-form text reads consistently regardless of which page or component it's in. .cs-card-blurb stays smaller on purpose — it's compact index-card copy, not reading copy. */ .dv-prose { font-family: Georgia, serif; font-size: 17px; line-height: 1.85; color: var(--ink-mid); max-width: 640px; } .dv-prose p { margin-bottom: 1.3em; } .dv-prose a { color: var(--amber); } /* ─────────────────────────────────────────── GALLERY — Photography, Illustration & Collage True CSS columns (not a row-aligned grid): each image keeps its own aspect ratio and simply fills its column's width — nothing is cropped, and rows don't line up, which gives the staggered/masonry look. Fixed at 3 columns from tablet width up; images just get wider (not more numerous) on large screens. ─────────────────────────────────────────── */ .gallery-tabs { display: flex; flex-wrap: wrap; margin-bottom: 32px; } /* Below the mobile breakpoint, wrapping means every category pill stacks into its own row — with a dozen+ categories that's a lot of vertical space before any actual photos show. Scroll horizontally in one row instead, same as a native app's filter-chip row. */ @media (max-width: 680px) { .gallery-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; } .gallery-tabs::-webkit-scrollbar { display: none; } .gallery-tab { flex-shrink: 0; } } .gallery-tab { color: var(--ink-faint); background: none; border: 1px solid rgba(30,23,16,0.16); border-radius: 100px; padding: 10px 18px; margin: 4px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .gallery-tab:hover { color: var(--ink-mid); border-color: rgba(30,23,16,0.32); } .gallery-tab.active { color: var(--paper); background: var(--ink); border-color: var(--ink); } /* True CSS column-masonry (not a row-based grid) — each image keeps its own aspect ratio and simply fills its column's width, giving the staggered/interlocking look. Order in the data arrays matters: a column fills top-to-bottom before moving to the next, so an item that should never land at the top of a column (see the Faces comment above) needs to sit near the end of its list. */ .gallery-grid { column-count: 2; column-gap: 18px; margin-bottom: 40px; } @media (min-width: 700px) { .gallery-grid { column-count: 3; column-gap: 26px; } } .gallery-tile { break-inside: avoid; margin-bottom: 18px; border-radius: 4px; overflow: hidden; cursor: pointer; display: block; transition: transform 0.3s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.25s; } @media (min-width: 700px) { .gallery-tile { margin-bottom: 26px; } } .gallery-tile:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--sh-lift); } .gallery-tile img { width: 100%; height: auto; display: block; } /* Shared fade-in for grid images/videos (Photography, Illustration, Games, Bookshelf, Performance) — without this, tiles pop in abruptly and at different times as each one finishes loading, which reads as a jarring "flash" across the grid. Applied via JS once each element's `load`/`loadeddata` event fires (see the capture-phase listener in script.js), so it fades in exactly when it's actually ready rather than on a fixed timer. */ .fade-img { opacity: 0; transition: opacity 0.4s ease; } .fade-img.loaded { opacity: 1; } /* lightbox */ #lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(14,10,6,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } #lightbox.active { pointer-events: all; } .lb-stage { max-width: 84vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; } .lb-stage img, .lb-stage video { max-width: 84vw; max-height: 80vh; width: auto; height: auto; border-radius: 2px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .lb-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); background: none; border: none; cursor: pointer; transition: color 0.2s; } .lb-close:hover { color: #fff; } .lb-counter { position: absolute; top: 30px; left: 30px; color: rgba(255,255,255,0.4); } .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .lb-arrow:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); } .lb-arrow.prev { left: 24px; } .lb-arrow.next { right: 24px; } .lb-arrow:active { transform: translateY(-50%) scale(0.92); } @media (max-width: 680px) { .lb-arrow { width: 40px; height: 40px; } .lb-arrow.prev { left: 10px; } .lb-arrow.next { right: 10px; } } /* ─────────────────────────────────────────── PRODUCT DESIGN — case study index (image-first, like the galleries) + case study detail (centered prose, nothing cropped) ─────────────────────────────────────────── */ .cs-grid { display: grid; grid-template-columns: 1fr; gap: 56px; margin-bottom: 40px; } @media (min-width: 700px) { .cs-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; } } /* Bounded aspect ratio (not the image's natural size) so both cards — image, title, blurb, buttons — fit inside one desktop viewport without scrolling. The image itself is never cropped to fill that box — it's letterboxed (object-fit:contain, centered) so the whole thing stays visible either way. */ /* No fill — just an outline "card", so the PNG's own (often transparent) background shows the page behind it rather than a white/paper box. */ /* No outline — the card should look like it's simply resting on the wood until hovered, when the lift + shadow makes it read as rising off the surface. */ .cs-card-image { width: 100%; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; cursor: pointer; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.25s; } .cs-card-image:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); } /* width/height:100% + object-fit:contain (not max-width/max-height with auto dimensions) — the auto-dimension approach is the one that was cropping the top/bottom of these PNGs on real iOS Safari even though it rendered fine in desktop responsive/device-emulation mode; this is the more broadly-supported pattern for a flex item that must never be cropped. */ .cs-card-image img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Fragments' source image reads much larger than the app-store cards at the same box size — scale it down and let it float centered. */ .cs-card-image.fragments img { width: 66%; height: 66%; } .cs-card-title { display: block; font-family: var(--font-serif); font-size: 24px; color: var(--ink-mid); opacity: 0.7; margin-bottom: 10px; cursor: pointer; text-decoration: none; } .cs-card-title:hover { color: var(--hover); opacity: 1; } .cs-card-blurb { font-family: Georgia, serif; font-size: 15px; line-height: 1.7; color: var(--ink-mid); margin-bottom: 18px; } .cs-card-actions { display: flex; flex-wrap: wrap; margin: -6px; } .cs-btn { /* Explicit, since .cs-btn is used on both