/* ============================================================ Owen Smith — Portfolio Base system + three directions (gallery / editorial / workshop) Direction, fonts, background + accent are swapped via data-* attributes on (driven by the Tweaks panel). ============================================================ */ :root { /* palette (gallery defaults) */ --bg: #f1ebe0; --bg-2: #f7f2e8; --bg-card: #fbf8f2; --ink: #211b14; --ink-soft: #6a5d4d; --ink-faint: #9b8d79; --rule: #ddd2c0; --rule-soft: #e7ddcd; --accent: #8a3a1f; --accent-ink: #fff; /* type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --display-wght: 500; --display-opsz: 144; /* metrics */ --mat: 12px; --frame-aspect: 3 / 4; --maxw: 1240px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --grain-opacity: 0.05; --rules-opacity: 0; /* Physical→Digital scroll progress (0..1), written each frame by JS. Both the page color and the grid overlay are derived off this one value. */ --digital: 0; --digital-mid: 0; /* triangle(--digital): peaks at the crossover, 0 at rest */ --digital-slate: #1b2735; /* dark, techy target — dark blue-grey, not pure black */ /* Page-level text inverts opposite the background, off the SAME --digital. Mockups/cards keep the base --ink*/--rule tokens, so their own text (e.g. the browser address bar) stays dark on its light surface. */ --ink-pg: color-mix(in oklab, #eaf0f6 calc(var(--digital) * 100%), var(--ink)); --ink-soft-pg: color-mix(in oklab, #aab6c4 calc(var(--digital) * 100%), var(--ink-soft)); --ink-faint-pg: color-mix(in oklab, #8593a3 calc(var(--digital) * 100%), var(--ink-faint)); --rule-pg: color-mix(in oklab, rgba(150, 172, 198, 0.32) calc(var(--digital) * 100%), var(--rule)); --shadow-card: 0 1px 2px rgba(33, 27, 20, 0.04); --shadow-lift: 0 24px 48px -20px rgba(33, 27, 20, 0.32), 0 6px 14px -8px rgba(33, 27, 20, 0.18); /* soft, diffuse shadow that floats the device mockups off the page */ --device-shadow: 0 22px 44px -22px rgba(33, 27, 20, 0.50), 0 8px 18px -14px rgba(33, 27, 20, 0.30); --device-shadow-lift: 0 36px 66px -26px rgba(33, 27, 20, 0.55), 0 12px 26px -16px rgba(33, 27, 20, 0.36); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* Section-nav scrolling is animated in JS (smoothScrollTo) so it works on iOS Safari too, where native CSS scroll-behavior:smooth doesn't reliably animate fragment jumps. Leaving this `auto` lets JS own the easing on every platform. */ html { scroll-behavior: auto; } body { background: var(--bg); /* fallback for browsers without color-mix */ /* Crossfade warm paper → dark slate, driven by the same --digital as the grid. oklab keeps the midtones from going muddy. p=0 → var(--bg); p=1 → slate. */ background: color-mix(in oklab, var(--digital-slate) calc(var(--digital) * 100%), var(--bg)); color: var(--ink-pg); /* on-bg text inverts as the page darkens (catches .title, h2, footer-left) */ font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; min-height: 100vh; overflow-x: hidden; } /* ---------- Ambient background ---------- */ /* grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* structural rules + soft wash */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, var(--bg-2) 0%, transparent 60%), repeating-linear-gradient(to bottom, transparent 0, transparent 47px, color-mix(in oklab, var(--ink) 100%, transparent) 47px, color-mix(in oklab, var(--ink) 100%, transparent) 48px); background-size: 100% 100%, 100% 48px; /* second layer (rules) opacity is faded via mask below */ opacity: 1; } /* rules visibility: blended through a CSS var by re-declaring the layer with alpha */ body::after { background: radial-gradient(120% 75% at 50% -10%, var(--bg-2) 0%, transparent 42%), repeating-linear-gradient(to bottom, transparent 0, transparent 46px, rgba(33, 27, 20, var(--rules-opacity)) 46px, rgba(33, 27, 20, var(--rules-opacity)) 48px); } /* Digital-section grid: finer than the 48px physical rules, fades in with --digital. Injected by JS (markup stays untouched). Sits at z-index 0, behind content. */ .digital-bg { position: fixed; inset: 0; z-index: 0; /* beats `body > * { z-index: 1 }` — stays behind content */ pointer-events: none; opacity: var(--digital); /* whole layer fades 0→1; line alpha below keeps it faint */ background-image: linear-gradient(to right, rgba(122, 170, 205, 0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(122, 170, 205, 0.10) 1px, transparent 1px); background-size: 26px 26px; will-change: opacity; } body > * { position: relative; z-index: 1; } /* =================================================================== EDIT BAR (authoring chrome) — restyled, kept fully functional =================================================================== */ .edit-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.5rem; background: var(--ink); color: var(--bg-card); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.01em; flex-wrap: wrap; } .edit-bar button { font: inherit; font-family: var(--font-mono); font-size: 0.72rem; background: rgba(255,255,255,0.1); color: var(--bg-card); border: 1px solid rgba(255,255,255,0.18); padding: 0.3rem 0.7rem; border-radius: 5px; cursor: pointer; margin-left: 0.4rem; transition: background 0.18s var(--ease); } .edit-bar button:hover { background: rgba(255,255,255,0.2); } .edit-bar input { font: inherit; font-family: var(--font-mono); font-size: 0.72rem; padding: 0.32rem 0.55rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; background: rgba(255,255,255,0.06); color: var(--bg-card); width: 18rem; max-width: 50vw; } .edit-bar a { color: #e6cdb8; } #publish-btn { background: var(--accent); color: #fff; border-color: transparent; } #publish-btn:hover { filter: brightness(1.1); } .gh-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c98b4b; margin-right: 0.4rem; vertical-align: middle; } .gh-dot.on { background: #79b97a; } /* =================================================================== HEADER / HERO =================================================================== */ .hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3.25rem) 2rem clamp(2rem, 4vw, 3rem); } .hero-inner { display: flex; flex-direction: column; gap: 1.4rem; } .eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: var(--accent); } .site-title { font-family: var(--font-display); font-weight: var(--display-wght); font-size: clamp(2.8rem, 8vw, 6rem); letter-spacing: -0.03em; line-height: 0.95; font-variation-settings: "opsz" var(--display-opsz); } .site-title em { font-style: italic; font-weight: 400; color: var(--accent); } .site-sub { margin-top: 0.2rem; font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 46ch; line-height: 1.6; text-wrap: pretty; } /* stats strip */ .stats { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); } .stat { display: flex; flex-direction: column; gap: 0.25rem; } .stat-num { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 40; } .stat-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .stat .stat-amp { color: var(--accent); font-style: italic; } /* Materials / Electronics / Languages stack vertically as one column (sitting where the Materials stat used to), so Electronics + Languages land directly below Materials. */ .stat-lists { flex: 1 1 16rem; min-width: 14rem; display: flex; flex-direction: column; gap: 1.15rem; } .stat--list { position: relative; } .stat--list .stat-num { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--ink-soft); } /* =================================================================== MAIN + SECTION NAV =================================================================== */ /* bottom padding is 0 here — the .to-top-wrap below owns the space under the digital section so the back-to-top button can be centred in that gap. */ main { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 2rem 0; } .section { scroll-margin-top: 1.25rem; } #digital { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--rule-pg); } /* Digital layout: two phones centered up top, then a full-width 2-column grid of browser mockups beneath (spanning the same width as the Physical grid). --phone-w is the single source of phone width, so the CSS phone (Pierscope) and the pre-rendered phone image (OrbitFrame) share an identical footprint width at every breakpoint. */ .digital-stage { --phone-w: clamp(220px, 30vw, 300px); } .digital-phones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(1.75rem, 5vw, 4rem); } .digital-phones .card { width: var(--phone-w); flex: 0 0 auto; } .digital-phones .meta { justify-content: center; margin-top: 1.15rem; } .digital-phones .desc-wrap { text-align: center; } .digital-browsers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.2rem); margin-top: clamp(3rem, 6vw, 5.5rem); } /* digital is a showcase, not the numbered catalogue — drop the index, left-align captions */ #digital .index-num { display: none; } #digital .desc-wrap { margin-left: 0; } /* Digital titles sit on the dark slate — keep them plainly white (independent of scroll). */ #digital .title { color: #fff; } #digital .card:hover .title { color: var(--accent); } /* "Read more" toggle on the dark slate — white for contrast (hover underline follows currentColor). */ #digital .readmore { color: #fff; } @media (max-width: 640px) { .digital-browsers { grid-template-columns: 1fr; } } .toggle { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2.5rem; } .toggle a { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; text-decoration: none; color: var(--ink-soft-pg); opacity: 0.38; transition: opacity 0.25s var(--ease), color 0.25s var(--ease); /* dual emboss, alpha gated to the crossover only — keeps the label legible mid-blend */ text-shadow: 0 1px 2px rgba(12, 17, 25, calc(0.42 * var(--digital-mid))), 0 -1px 2px rgba(238, 244, 250, calc(0.22 * var(--digital-mid))); } .toggle a:hover { opacity: 0.75; } .toggle a.active { color: var(--ink-pg); opacity: 1; font-weight: 500; } .toggle .divider { width: 1px; align-self: stretch; min-height: 1.6rem; background: var(--rule-pg); } .toggle .count { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint-pg); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3.2rem 2rem; } /* =================================================================== CARD =================================================================== */ .card { display: flex; flex-direction: column; position: relative; } .frame { position: relative; width: 100%; aspect-ratio: var(--frame-aspect); background: var(--card-accent, var(--bg-card)); border: 1px solid var(--rule); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-card); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .card:hover .frame { transform: translateY(-7px); box-shadow: var(--shadow-lift); } .frame img, .frame video { position: absolute; inset: var(--mat); width: calc(100% - 2 * var(--mat)); height: calc(100% - 2 * var(--mat)); object-fit: contain; object-position: center; background: var(--card-accent, var(--bg-card)); opacity: 0; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); -webkit-user-drag: none; user-select: none; } .frame img.active, .frame video.active { opacity: 1; } /* ===== Device mockups (phone / browser) — built by mockupWrap(), reused in the lightbox ===== */ .mockup-screen { position: relative; overflow: hidden; } .mockup-screen .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--screen-bg, #0c0c0e); } /* a framed card sheds the standard card chrome — the device itself is the frame */ .frame--phone, .frame--browser, .frame--phone-image { background: transparent; border: none; box-shadow: none; overflow: visible; aspect-ratio: auto; cursor: pointer; } .frame--phone .mockup, .frame--browser .mockup { position: relative; inset: auto; width: 100%; display: block; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } /* lift the device (with a deeper shadow) on hover instead of lifting a card */ .card:hover .frame--phone, .card:hover .frame--browser, .card:hover .frame--phone-image { transform: none; box-shadow: none; } .card:hover .frame--phone .mockup--phone, .card:hover .frame--browser .mockup--browser { transform: translateY(-8px); box-shadow: var(--device-shadow-lift); } /* ---- pre-rendered phone image (OrbitFrame): the screenshot already has a device mockup, so show it bare. Sized by WIDTH = --phone-w (the exact width of the CSS phone), so the two mockups share an identical footprint; height follows from the silhouette's aspect-ratio. (Sizing by height + max-content width collapsed to zero on iOS Safari — the image vanished on mobile — and made it a few px wider than the CSS phone.) drop-shadow (not box-shadow) so a transparent crop floats by its real silhouette; a solid-bg image just casts a soft panel. */ .frame--phone-image { width: var(--phone-w); max-width: 100%; margin-inline: auto; } .frame--phone-image .mockup--device { position: relative; width: 100%; aspect-ratio: 547 / 1158; /* OrbitFrame phone silhouette ratio (transparent crop) */ transition: transform 0.5s var(--ease); } .frame--phone-image .mockup--device .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; opacity: 0; transition: opacity 0.5s var(--ease); filter: drop-shadow(0 20px 38px rgba(33, 27, 20, 0.42)); } .frame--phone-image .mockup--device .media.active { opacity: 1; } .card:hover .frame--phone-image .mockup--device { transform: translateY(-8px); } .card:hover .frame--phone-image .mockup--device .media.active { filter: drop-shadow(0 30px 52px rgba(33, 27, 20, 0.50)); } /* ---- phone ---- */ .mockup--phone { position: relative; aspect-ratio: 9 / 19.5; background: linear-gradient(150deg, #34343a 0%, #1b1b20 55%, #26262c 100%); border-radius: 13% / 6%; /* large, near-continuous (squircle-ish) corners */ padding: 3.4%; /* slim, uniform bezel on every side */ box-shadow: var(--device-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .mockup--phone .mockup-screen { width: 100%; height: 100%; border-radius: 10% / 4.7%; /* inner screen radius tracks the bezel */ background: #0c0c0e; } .frame--phone .mockup--phone .mockup-screen .media { object-fit: cover; object-position: center; background: #0c0c0e; } /* dynamic island */ .mp-island { position: absolute; top: 2.8%; left: 50%; transform: translateX(-50%); width: 28%; height: 3%; min-height: 9px; background: #050506; border-radius: 100px; z-index: 4; } .mp-island::after { content: ""; position: absolute; right: 13%; top: 50%; transform: translateY(-50%); height: 58%; aspect-ratio: 1; max-width: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #243247, #050506 70%); } /* subtle side buttons: volume on the left, power on the right */ .mp-btn { position: absolute; z-index: 1; } .mp-power { right: -1.5px; top: 31%; width: 2.2%; min-width: 2px; height: 12%; background: linear-gradient(90deg, #14141a, #3a3a42); border-radius: 0 3px 3px 0; } .mp-vol-up { left: -1.5px; top: 23%; width: 2.2%; min-width: 2px; height: 7.5%; background: linear-gradient(90deg, #3a3a42, #14141a); border-radius: 3px 0 0 3px; } .mp-vol-dn { left: -1.5px; top: 32.5%; width: 2.2%; min-width: 2px; height: 12%; background: linear-gradient(90deg, #3a3a42, #14141a); border-radius: 3px 0 0 3px; } /* ---- browser ---- */ /* the toolbar and the screen each carry their own aspect-ratio so they have a real height at any width — putting aspect-ratio on the flex column instead collapses the screen to 0 in some engines. Device height = toolbar + screen, stacked. */ .mockup--browser { width: 100%; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 11px; overflow: hidden; box-shadow: var(--device-shadow); } .mockup--browser .mockup-bar { flex: none; width: 100%; aspect-ratio: 1400 / 116; min-height: 18px; display: flex; align-items: center; gap: 0.45rem; padding: 0 3.2%; background: linear-gradient(var(--bg-2), var(--bg-card)); border-bottom: 1px solid var(--rule); } .mockup--browser .mb-dots { display: flex; align-items: center; gap: 0.3rem; height: 42%; flex: none; } .mockup--browser .mb-dot { height: 100%; aspect-ratio: 1; border-radius: 50%; flex: none; background: #c8b9a4; } .mockup--browser .mb-dots .mb-dot:nth-child(1) { background: #e0897c; } .mockup--browser .mb-dots .mb-dot:nth-child(2) { background: #e2b96b; } .mockup--browser .mb-dots .mb-dot:nth-child(3) { background: #8fbf86; } .mockup--browser .mb-url { flex: 1; min-width: 0; max-width: 78%; height: 60%; display: flex; align-items: center; gap: 0.32rem; margin-left: 0.3rem; padding: 0 0.6rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 100px; font-family: var(--font-mono); font-size: clamp(7px, 1.25vw, 11px); color: var(--ink-faint); } .mockup--browser .mb-url svg { width: 0.75em; height: 0.75em; flex: none; opacity: 0.6; } .mockup--browser .mb-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mockup--browser .mockup-screen { flex: none; width: 100%; aspect-ratio: 1400 / 680; background: #fff; } .frame--browser .mockup--browser .mockup-screen .media { object-fit: cover; object-position: center top; background: #fff; } /* in the lightbox the device keeps the whole screenshot visible (contain, not cover) */ .lb-media .mockup { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; } .lb-media .mockup--phone { height: 92%; max-width: 92%; } .lb-media .mockup--browser { width: min(92%, 1080px); max-height: 90%; } .lb-media .mockup-screen img, .lb-media .mockup-screen video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; opacity: 0; border-radius: 0; box-shadow: none; } .lb-media .mockup-screen img.active, .lb-media .mockup-screen video.active { opacity: 1; position: absolute; } .card:hover .frame img.active, .card:hover .frame video.active { transform: scale(1.018); } /* corner zoom cue, revealed on hover */ .view-cue { position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: color-mix(in oklab, var(--bg-card) 88%, transparent); backdrop-filter: blur(6px); padding: 0.34rem 0.6rem; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); pointer-events: none; } .card:hover .view-cue { opacity: 1; transform: translateY(0); } .view-cue svg { width: 11px; height: 11px; } /* "In Progress" tag — top-right of the frame, subtle but readable, always visible */ .wip-tag { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 3; pointer-events: none; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: color-mix(in oklab, var(--bg-card) 82%, transparent); backdrop-filter: blur(6px); padding: 0.26rem 0.55rem; border-radius: 100px; box-shadow: 0 1px 3px rgba(33, 27, 20, 0.14); } /* On a phone mockup the dynamic island (z-index 4) sits dead-centre at the very top, so a top-right tag tucks under it on a narrow (mobile) phone. Drop the tag just below the island and lift its stacking so it always clears the notch and stays fully readable. */ .frame--phone .wip-tag, .frame--phone-image .wip-tag { top: 8%; right: 6%; z-index: 6; } .empty-hint { color: var(--ink-faint); font-family: var(--font-display); font-style: italic; font-size: 0.95rem; padding: 0.4rem 0 1rem; } .editor .ed-wip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; } .editor .ed-wip input { width: auto; } .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; background: color-mix(in oklab, var(--bg-card) 85%, transparent); backdrop-filter: blur(6px); color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; cursor: pointer; opacity: 0; transition: opacity 0.2s var(--ease), background 0.2s var(--ease); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 4; } .frame:hover .nav { opacity: 1; } .nav:hover { background: var(--bg-card); } .nav.prev { left: 0.7rem; } .nav.next { right: 0.7rem; } @media (hover: none) { .nav { opacity: 0.85; } } .dots { position: absolute; bottom: 0.85rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 3; } .dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--bg-card) 55%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 28%, transparent); transition: background 0.2s var(--ease), transform 0.2s var(--ease); } .dot.active { background: var(--bg-card); border-color: var(--bg-card); transform: scale(1.15); } .meta { margin-top: 1.05rem; display: flex; align-items: baseline; gap: 0.8rem; } .index-num { font-family: var(--font-mono); font-weight: 400; font-size: 0.74rem; color: var(--ink-faint-pg); min-width: 1.6rem; letter-spacing: 0.04em; padding-top: 0.18rem; } .title { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1.2; font-variation-settings: "opsz" 40; text-shadow: 0 1px 2px rgba(12, 17, 25, calc(0.34 * var(--digital-mid))), 0 -1px 1px rgba(238, 244, 250, calc(0.16 * var(--digital-mid))); } .card:hover .title { color: var(--accent); } .title { transition: color 0.3s var(--ease); } /* description: read-more toggle */ .desc-wrap { margin-top: 0.5rem; margin-left: 2.4rem; } .readmore { background: none; border: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); cursor: pointer; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); } .readmore:hover { border-bottom-color: currentColor; } .desc-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); } .desc-panel .desc { margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft-pg); line-height: 1.6; max-width: 42ch; text-wrap: pretty; overflow-wrap: break-word; } /* links inside a description: inherit the (background-adaptive) text colour, underlined so they read as links on both the light and dark sections; long URLs wrap instead of overflowing */ .desc-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; transition: color 0.2s var(--ease); } .desc-link:hover { color: var(--accent); } #digital .desc-link:hover { color: #fff; text-decoration-thickness: 2px; } /* a title that's been given a link — underlined to signal it's clickable */ .title-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } html[data-direction="editorial"] .desc-wrap { margin-left: 0; } /* digital placeholders */ .placeholder-card .frame { cursor: default; } .placeholder-card .ph-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: color-mix(in oklab, var(--bg-card) 80%, transparent); } .placeholder-card .title { color: var(--ink-soft-pg); font-weight: 400; } .placeholder-card:hover .frame { transform: none; box-shadow: var(--shadow-card); } /* =================================================================== BACK TO TOP (sits below Digital, above the contact button) =================================================================== */ /* Symmetric vertical padding centres the button in the gap between the last digital row and the contact divider line. (main's bottom padding is zeroed below so this is the whole gap.) */ .to-top-wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.75rem, 7vw, 4.5rem) 2rem; display: flex; justify-content: center; } .to-top { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft-pg); background: transparent; border: 1px solid var(--rule-pg); border-radius: 100px; padding: 0.7rem 1.3rem; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .to-top:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-3px); } .to-top svg { width: 14px; height: 14px; } /* =================================================================== CONTACT / COMMISSION =================================================================== */ .commission { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; } .commission-inner { border-top: 1px solid var(--rule-pg); padding: clamp(3rem, 6vw, 5rem) 0 1rem; display: flex; justify-content: center; } .commission h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.02; font-variation-settings: "opsz" 144; } .commission h2 em { font-style: italic; font-weight: 400; color: var(--accent); } .commission p { margin-top: 1rem; color: var(--ink-soft-pg); max-width: 38ch; text-wrap: pretty; } .commission-cta { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; } .btn-mail { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; color: var(--accent-ink); background: var(--accent); text-decoration: none; padding: 0.85rem 1.4rem; border-radius: 100px; transition: transform 0.25s var(--ease), filter 0.25s var(--ease); } .btn-mail:hover { transform: translateY(-2px); filter: brightness(1.07); } .btn-mail svg { width: 16px; height: 16px; } .commission-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint-pg); text-transform: uppercase; } /* =================================================================== FOOTER =================================================================== */ footer { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule-pg); font-size: 0.85rem; color: var(--ink-soft-pg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-left { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; } .footer-right { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; } footer a { color: var(--ink-soft-pg); text-decoration: none; border-bottom: 1px solid var(--rule-pg); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } footer a:hover { color: var(--accent); border-color: var(--accent); } .textlink { background: none; border: none; padding: 0; font: inherit; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint-pg); cursor: pointer; border-bottom: 1px solid transparent; } .textlink:hover { color: var(--accent); border-color: var(--accent); } .login-form { display: inline-flex; align-items: center; gap: 0.4rem; } .login-form input { font: inherit; font-size: 0.85rem; padding: 0.28rem 0.5rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--bg-card); color: var(--ink); width: 9.5rem; } .login-form button { font: inherit; padding: 0.28rem 0.65rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--ink); color: var(--bg-card); cursor: pointer; } .login-error { color: var(--accent); font-size: 0.8rem; } /* =================================================================== LIGHTBOX =================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--ink) 78%, transparent); backdrop-filter: blur(10px) saturate(1.05); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); padding: clamp(1rem, 5vh, 4rem) clamp(1rem, 6vw, 6rem); } .lightbox.open { opacity: 1; pointer-events: auto; } .lb-stage { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; } .lb-media-wrap { position: relative; flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; } .lb-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .lb-media img, .lb-media video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6); opacity: 0; position: absolute; transition: opacity 0.45s var(--ease); } .lb-media img.active, .lb-media video.active { opacity: 1; position: relative; } .lb-caption { display: flex; align-items: baseline; gap: 1rem; color: var(--bg-card); flex-wrap: wrap; justify-content: center; text-align: center; } .lb-index { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--bg-card) 65%, transparent); } .lb-title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--bg-card); font-variation-settings: "opsz" 60; } .lb-counter { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--bg-card) 55%, transparent); } .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: var(--bg-card); font-family: var(--font-display); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background 0.2s var(--ease); } .lb-btn:hover { background: rgba(255,255,255,0.22); } .lb-prev { left: clamp(-0.5rem, -3vw, 0.5rem); } .lb-next { right: clamp(-0.5rem, -3vw, 0.5rem); } .lb-close { position: absolute; top: clamp(0.5rem, 2vh, 1.5rem); right: clamp(0.5rem, 2vw, 1.5rem); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 6; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: var(--bg-card); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease); } .lb-close:hover { background: rgba(255,255,255,0.22); } .lb-dots { display: flex; gap: 0.45rem; } .lb-dots .dot { background: color-mix(in oklab, var(--bg-card) 35%, transparent); border-color: transparent; } .lb-dots .dot.active { background: var(--bg-card); } body.lb-lock { overflow: hidden; } /* =================================================================== AUTHORING (edit mode) — kept functional, restyled lightly =================================================================== */ .editbtn { margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 5px; color: var(--ink-soft); cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 0.66rem; padding: 0.12rem 0.5rem; } .editbtn:hover { color: var(--accent); border-color: var(--accent); } body:not(.edit-mode) .editbtn { display: none; } body:not(.edit-mode) .view-cue { } /* cue shows normally */ .editor { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 0.7rem; } .editor input, .editor textarea, .editor select { font: inherit; font-size: 0.85rem; padding: 0.34rem 0.45rem; border: 1px solid var(--rule); border-radius: 5px; background: #fff; color: var(--ink); width: 100%; } .editor textarea { min-height: 3.4rem; resize: vertical; } .editor .ed-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .editor .ed-row label { font-size: 0.78rem; color: var(--ink-soft); } .editor button { cursor: pointer; border: 1px solid var(--rule); border-radius: 5px; background: var(--ink); color: var(--bg-card); padding: 0.3rem 0.7rem; font: inherit; font-size: 0.8rem; } .editor .ed-cancel, .editor .ed-hide { background: var(--bg-card); color: var(--ink-soft); } .editor .ed-hide { margin-left: auto; } .editor .ed-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.25rem; } .editor .ed-hint { text-transform: none; letter-spacing: 0; opacity: 0.85; margin-left: 0.4rem; } .ed-images { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ed-thumb { position: relative; width: 58px; height: 58px; border-radius: 5px; overflow: hidden; border: 1px solid var(--rule); background: var(--bg); } .ed-thumb img, .ed-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .ed-thumb .ed-rep, .ed-thumb .ed-rm { position: absolute; border: none; cursor: pointer; font-size: 0.64rem; line-height: 1; padding: 2px 4px; color: #fff; margin: 0; } .ed-thumb .ed-rep { left: 0; bottom: 0; background: rgba(33,27,20,0.72); border-radius: 0 5px 0 0; } .ed-thumb .ed-rm { right: 0; top: 0; background: rgba(138,58,31,0.85); border-radius: 0 0 0 5px; } .ed-thumb .ed-rep:hover { background: rgba(33,27,20,0.95); } .ed-thumb .ed-rm:hover { background: var(--accent); } .editor .ed-add { width: 58px; height: 58px; border: 1px dashed var(--rule); border-radius: 5px; background: var(--bg); color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 0.72rem; margin: 0; } .editor .ed-add:hover { border-color: var(--accent); color: var(--accent); } /* ---- Hero text editing (subtitle + list-stats) — same edit-mode gating as cards ---- */ .hero-edit { background: none; border: 1px solid var(--rule); border-radius: 5px; color: var(--ink-soft); cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; line-height: 1.6; } .hero-edit:hover { color: var(--accent); border-color: var(--accent); } .hero-edit--sub { align-self: flex-start; margin-top: -0.6rem; } /* a list-stat's pencil tucks into the top-right corner of its block */ .stat--list .hero-edit { position: absolute; top: 0; right: 0; padding: 0 0.4rem; line-height: 1.5; } body:not(.edit-mode) .hero-edit { display: none; } /* SVG grip icon used by every drag handle (pointer-events:none so the click lands on the button) */ .grip { width: 8px; height: 14px; fill: currentColor; display: block; pointer-events: none; opacity: 0.8; } /* drag handle for reordering the whole hero lists (edit mode only) */ .list-drag-handle { background: none; border: none; padding: 0; margin-right: 0.4rem; color: var(--ink-faint-pg); cursor: grab; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; touch-action: none; /* let the grip drive a drag, not a scroll */ } .list-drag-handle:hover { color: var(--accent); } .list-drag-handle:active { cursor: grabbing; } body:not(.edit-mode) .list-drag-handle { display: none; } .stat--list.dragging { opacity: 0.5; } body.edit-mode .stat--list { transition: opacity 0.15s var(--ease); } .hero-editor { max-width: 30rem; margin-top: 0.4rem; } .hero-editor .ed-list-title { font-weight: 600; } .hero-editor .ed-list-items { display: flex; flex-direction: column; gap: 0.35rem; } .hero-editor .ed-item { display: flex; gap: 0.4rem; align-items: center; } .hero-editor .ed-item.dragging { opacity: 0.5; } /* drag handle on each item row */ .hero-editor .ed-item-drag { flex: none; background: none; border: none; padding: 0 0.1rem; margin: 0; color: var(--ink-faint); cursor: grab; touch-action: none; display: inline-flex; align-items: center; } .hero-editor .ed-item-drag:hover { color: var(--accent); } .hero-editor .ed-item-drag:active { cursor: grabbing; } .hero-editor .ed-item .ed-item-input { flex: 1; } .hero-editor .ed-item-rm { flex: none; width: 1.8rem; padding: 0.3rem 0; background: var(--bg-card); color: var(--accent); border: 1px solid var(--rule); } .hero-editor .ed-item-rm:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .hero-editor .ed-add-item { align-self: flex-start; background: var(--bg-card); color: var(--ink-soft); } .hero-editor .ed-add-item:hover { color: var(--accent); border-color: var(--accent); } body.edit-mode .card[draggable] { cursor: grab; } body.edit-mode .card[draggable]:active { cursor: grabbing; } body.edit-mode .frame { outline: 2px dashed var(--card-accent, var(--ink)); outline-offset: 4px; cursor: grab; } body.edit-mode .card:hover .frame { transform: none; box-shadow: var(--shadow-card); } body.edit-mode .nav, body.edit-mode .dots, body.edit-mode .view-cue { display: none; } .card.dragging { opacity: 0.35; } .card.drop-before .frame { box-shadow: -8px 0 0 var(--ink); } .card.drop-after .frame { box-shadow: 8px 0 0 var(--ink); } .card.is-new .frame { outline: 2px solid var(--accent); } .newbadge { position: absolute; top: 8px; left: 8px; z-index: 5; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 0.62rem; padding: 0.12rem 0.45rem; border-radius: 4px; letter-spacing: 0.04em; } body:not(.edit-mode) .newbadge { display: none; } /* Drag-to-add overlay: top half = Physical, bottom half = Digital */ .drop-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; } .drop-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--bg-card); background: rgba(33, 27, 20, 0.74); transition: background 0.15s ease; } .drop-zone + .drop-zone { border-top: 2px dashed rgba(251, 248, 242, 0.45); } .drop-zone .dz-sub { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; } .drop-zone .dz-label { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1; } .drop-zone.over { background: rgba(138, 58, 31, 0.85); } .drop-zone.over .dz-sub { opacity: 0.9; } /* =================================================================== DIRECTION: EDITORIAL bigger asymmetric type, hairline frames, faint rules, no mats =================================================================== */ html[data-direction="editorial"] { --bg: #f6f2ea; --bg-2: #fbf8f1; --mat: 0px; --frame-aspect: 4 / 5; --display-wght: 400; } html[data-direction="editorial"] .hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); } html[data-direction="editorial"] .site-title { font-size: clamp(3.2rem, 12vw, 8.5rem); letter-spacing: -0.045em; } html[data-direction="editorial"] .hero-inner { gap: 1.1rem; } html[data-direction="editorial"] .stats { gap: 3.4rem; } html[data-direction="editorial"] .frame { background: var(--bg-card); border: none; box-shadow: inset 0 0 0 1px var(--rule); } html[data-direction="editorial"] .frame img, html[data-direction="editorial"] .frame video { object-fit: cover; } html[data-direction="editorial"] .card:hover .frame { transform: translateY(-5px); } html[data-direction="editorial"] .meta { margin-top: 1.05rem; padding-top: 0.85rem; border-top: 1px solid var(--ink); align-items: flex-start; } html[data-direction="editorial"] .index-num { font-size: 0.82rem; color: var(--accent); } html[data-direction="editorial"] .title { font-size: 1.34rem; } html[data-direction="editorial"] .grid { gap: 3.6rem 2.4rem; } html[data-direction="editorial"] .toggle a { font-size: clamp(1.7rem, 3.6vw, 2.4rem); } /* =================================================================== DIRECTION: WORKSHOP (dramatic dark) warm near-black ground, work pops, mono labels, single accent =================================================================== */ html[data-direction="workshop"] { --bg: #1c1611; --bg-2: #241d16; --bg-card: #15100b; --ink: #f0e7da; --ink-soft: #b3a691; --ink-faint: #8a7d6a; --rule: #3a3026; --rule-soft: #2c241b; --accent: #d97a45; --mat: 14px; --grain-opacity: 0.07; --shadow-card: 0 1px 2px rgba(0,0,0,0.5); --shadow-lift: 0 30px 60px -22px rgba(0,0,0,0.8), 0 8px 18px -10px rgba(0,0,0,0.6); --device-shadow: 0 24px 48px -22px rgba(0,0,0,0.72), 0 10px 22px -14px rgba(0,0,0,0.55); --device-shadow-lift: 0 38px 70px -26px rgba(0,0,0,0.8), 0 14px 30px -16px rgba(0,0,0,0.6); } html[data-direction="workshop"] body::before { mix-blend-mode: overlay; } /* the browser device reads against the dark ground with a warmer panel + border */ html[data-direction="workshop"] .mockup--browser { background: var(--bg-2); border-color: var(--rule); } html[data-direction="workshop"] .frame { background: #0e0a07; border-color: var(--rule); } html[data-direction="workshop"] .frame img, html[data-direction="workshop"] .frame video { background: #0e0a07; } html[data-direction="workshop"] .site-title em { color: var(--accent); } html[data-direction="workshop"] .view-cue { color: var(--ink); background: color-mix(in oklab, var(--bg-card) 70%, transparent); } html[data-direction="workshop"] .btn-mail { color: #1c1611; } html[data-direction="workshop"] .edit-bar { background: #0e0a07; } /* =================================================================== BACKGROUND OVERRIDES (independent of direction) =================================================================== */ html[data-bg="grain"] { --rules-opacity: 0; } html[data-bg="grain"] { --grain-opacity: 0.07; } html[data-bg="rules"] { --grain-opacity: 0; --rules-opacity: 0.05; } html[data-bg="flat"] { --grain-opacity: 0; --rules-opacity: 0; } html[data-bg="flat"] body::after { background: radial-gradient(120% 80% at 50% -8%, var(--bg-2) 0%, transparent 55%); } /* "auto" (default / unset) keeps grain + faint wash from base */ html[data-bg="auto"] { --grain-opacity: 0.05; --rules-opacity: 0.01; } /* =====================s============================================== RESPONSIVE =================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .frame img, .frame video, .card:hover .frame { transition: none; } } @media (max-width: 820px) { .commission-inner { grid-template-columns: 1fr; gap: 1.6rem; } } @media (max-width: 600px) { .hero { padding: 1.375rem 1.25rem 1.5rem; } main { padding: 1.25rem 1.25rem 0; } .commission, footer { padding-left: 1.25rem; padding-right: 1.25rem; } .grid { gap: 2.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .edit-bar { padding: 0.55rem 1.25rem; } .edit-bar input { width: 100%; max-width: none; } .stats { gap: 1.6rem 2rem; } :root { --mat: 9px; } /* ----- PHONE carousels only: move the always-on arrows OFF the phone on mobile ----- Phones are narrow with empty space either side, so the arrows have room to sit beside them. Browser ("desktop app") carousels fill the width like the physical images, so they KEEP their arrows on the image (default .nav position) — same as physical. */ /* Stack the two phones so each has the full side margin to host its arrows. */ .digital-phones { flex-direction: column; align-items: center; } /* Park each phone arrow at the midpoint between the phone edge and the screen edge. The phone is centred, so that gap is (100vw - phone width) / 2 per side, and its midpoint is (100vw - phone width) / 4 out from the phone edge (− half the 38px arrow to centre it). The arrows are anchored to the frame, which is exactly --phone-w. */ #digital .digital-phones .nav.prev { left: auto; right: calc(100% + (100vw - var(--phone-w)) / 4 - 19px); } #digital .digital-phones .nav.next { right: auto; left: calc(100% + (100vw - var(--phone-w)) / 4 - 19px); } }