/* ============================================================ BLOWERS CREATIVE — cinematic darkroom Fraunces (display) · Hanken Grotesk (body) · IBM Plex Mono (spec) ============================================================ */ :root { /* canvas — warm near-black */ --ink: #0b0c0a; --ink-2: #101210; --ink-3: #151714; /* type */ --bone: #f3efe4; --bone-dim: #b3afa2; --bone-faint: #76746a; /* the light */ --amber: #f2a93c; --amber-soft: #f8c772; /* the nature work */ --moss: #6f8b58; --line: rgba(243, 239, 228, 0.12); --line-soft: rgba(243, 239, 228, 0.07); --banner-h: 0px; /* set by JS when the announcement bar is shown */ --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); --pad: clamp(1.25rem, 5vw, 6rem); --maxw: 1380px; } /* ============================================================ LIGHT MODE — "the sun" (sunlit paper) Dark is the default; light is opt-in via the nav toggle. ============================================================ */ html[data-theme="light"] { --ink: #f7f3ea; --ink-2: #efe9da; --ink-3: #e7e0cd; --bone: #1b1813; --bone-dim: #565049; --bone-faint: #8b8579; --amber: #b9740f; --amber-soft: #cf8a26; --moss: #4d6b3a; --line: rgba(20, 18, 12, 0.16); --line-soft: rgba(20, 18, 12, 0.08); } html[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: 0.035; } html[data-theme="light"] .cursor-light { mix-blend-mode: multiply; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 12%), rgba(242, 169, 60, 0.22), transparent 65%); } html[data-theme="light"] .nav[data-state="scrolled"] { background: rgba(247, 243, 234, 0.82); } /* ============================================================ DARKROOM MODE — easter egg via Konami code (↑↑↓↓←→←→BA). Red safelight + negative photos. Set by JS as data-mode="darkroom" on ; composes over either theme. Any key/click exits. ============================================================ */ html[data-mode="darkroom"] { --ink: #1a0606; --ink-2: #220909; --ink-3: #2a0c0c; --bone: #ffb3b3; --bone-dim: #cc7878; --bone-faint: #8a4f4f; --amber: #ff3a3a; --amber-soft: #ff6a6a; --moss: #aa4444; --line: rgba(255, 80, 80, 0.18); --line-soft: rgba(255, 80, 80, 0.10); } html[data-mode="darkroom"] .grain { mix-blend-mode: screen; opacity: 0.12; } html[data-mode="darkroom"] .cursor-light { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 12%), rgba(255, 58, 58, 0.22), transparent 65%); } html[data-mode="darkroom"] .frame img { filter: invert(1) hue-rotate(180deg); } html[data-theme="light"] .frame { box-shadow: 0 30px 60px -30px rgba(40, 30, 10, 0.28); } /* smooth-ish theme switch (skipped under reduced-motion below) */ body { transition: background-color 0.45s ease, color 0.45s ease; } .ticker, .services, .svc, .frame, .tags li, input, textarea { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease; } /* theme toggle (injected by JS) */ .theme-toggle { background: none; border: 1px solid var(--line); color: var(--bone); width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; font-size: 0.95rem; line-height: 1; flex: 0 0 auto; transition: border-color 0.25s, color 0.25s; } .theme-toggle:hover { border-color: var(--amber); color: var(--amber); } .theme-toggle .ico-moon { display: none; } html[data-theme="light"] .theme-toggle .ico-sun { display: none; } html[data-theme="light"] .theme-toggle .ico-moon { display: inline; } .mobile-theme { margin-top: 1.8rem; align-self: flex-start; background: none; border: 1px solid var(--line); color: var(--bone); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; padding: 0.7rem 1.2rem; border-radius: 100px; cursor: pointer; transition: border-color 0.25s, color 0.25s; } .mobile-theme:hover { border-color: var(--amber); color: var(--amber); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; } body { background: var(--ink); color: var(--bone); font-family: var(--sans); font-weight: 350; line-height: 1.6; font-size: clamp(1rem, 0.55vw + 0.9rem, 1.125rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--amber); color: var(--ink); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } em { font-style: italic; } .mono { font-family: var(--mono); } /* ---------- focus + skip ---------- */ :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 200; background: var(--amber); color: var(--ink); padding: 0.6rem 1rem; border-radius: 6px; font-family: var(--mono); font-size: 0.85rem; transition: top 0.2s; } .skip-link:focus { top: 1rem; } /* ============================================================ ATMOSPHERE — grain + cursor light ============================================================ */ .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainshift 0.5s steps(4) infinite; } @keyframes grainshift { 0% { transform: translate(0,0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(3%, 3%); } } .cursor-light { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient( 340px circle at var(--mx, 50%) var(--my, 12%), rgba(242, 169, 60, 0.10), transparent 65%); opacity: 0; transition: opacity 0.6s; } body.has-pointer .cursor-light { opacity: 1; } /* ============================================================ NAV — sticky + dynamic ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform 0.45s var(--ease), background 0.4s, backdrop-filter 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem, 2vw, 1.6rem) var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; transition: padding 0.4s var(--ease); } .nav[data-state="scrolled"] { background: rgba(11, 12, 10, 0.72); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--line); } .nav[data-state="scrolled"] .nav-inner { padding-top: 0.7rem; padding-bottom: 0.7rem; } .nav.hidden { transform: translateY(-105%); } .brand { display: flex; align-items: center; gap: 0.85rem; } .brand-logo { height: 2.6rem; width: auto; transition: height 0.4s var(--ease); } .nav[data-state="scrolled"] .brand-logo { height: 2.1rem; } .brand-pron { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-faint); letter-spacing: 0.02em; padding-top: 0.2rem; } @media (max-width: 600px) { .brand-pron { display: none; } } .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav-links a { font-size: 0.9rem; letter-spacing: 0.01em; color: var(--bone-dim); position: relative; transition: color 0.25s; } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--amber); transition: width 0.3s var(--ease); } .nav-links a:not(.nav-cta):hover { color: var(--bone); } .nav-links a:not(.nav-cta):hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--bone); } .nav-cta { border: 1px solid var(--line); border-radius: 100px; padding: 0.5rem 1.1rem; color: var(--bone) !important; transition: background 0.25s, color 0.25s, border-color 0.25s; } .nav-cta:hover { background: var(--amber); color: var(--ink) !important; border-color: var(--amber); } .nav-toggle { display: none; } /* mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--ink); display: none; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--pad); } body.menu-open .mobile-menu { display: flex; } .mobile-menu a { font-family: var(--serif); font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 350; line-height: 1.1; color: var(--bone); display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); } .mobile-menu a em { font-family: var(--mono); font-size: 0.9rem; color: var(--amber); font-style: normal; } .mobile-pron { font-family: var(--mono); color: var(--bone-faint); font-size: 0.8rem; margin-top: 2rem; } .mobile-pron span { color: var(--amber); } /* ============================================================ ANNOUNCEMENT BAR (UTM-triggered, injected by JS) ============================================================ */ .announce { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: var(--amber); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 2.8rem; text-align: center; } .announce p { margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; letter-spacing: 0.01em; } .announce strong { font-weight: 500; } .announce .tail { opacity: 0.72; } .announce .x { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: 0.65; padding: 0.2rem 0.45rem; border-radius: 4px; } .announce .x:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); } html.has-banner .nav { top: var(--banner-h, 0px); } html.has-banner { scroll-padding-top: calc(6rem + var(--banner-h, 0px)); } @media (max-width: 560px) { .announce .tail { display: none; } .announce p { font-size: 0.72rem; } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; letter-spacing: 0.01em; padding: 0.85rem 1.5rem; border-radius: 100px; transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s; } .btn .arr { transition: transform 0.3s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--amber); color: var(--ink); font-weight: 500; } .btn-primary:hover { background: var(--amber-soft); transform: translateY(-2px); } .btn-ghost { border: 1px solid var(--line); color: var(--bone); } .btn-ghost:hover { border-color: var(--bone); transform: translateY(-2px); } /* ============================================================ HERO — the select, circled on the contact sheet ============================================================ */ .hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(7rem, 14vh, 11rem) var(--pad) clamp(3rem, 6vw, 5rem); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .hero-leak { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 88% 8%, rgba(242, 169, 60, 0.18), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(111, 139, 88, 0.10), transparent 70%); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "title media" "lead media"; column-gap: clamp(1rem, 3vw, 3rem); align-items: center; } .hero-grid > * { min-width: 0; } /* the headline runs over the photo — type wins */ .hero-title { grid-area: title; position: relative; z-index: 2; font-family: var(--serif); font-weight: 340; font-size: clamp(3.2rem, 10.5vw, 10rem); line-height: 0.9; letter-spacing: -0.03em; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); font-optical-sizing: auto; } .hero-title .line { display: block; white-space: nowrap; } .hero-title .line-2 { margin-left: clamp(1.5rem, 9vw, 9rem); } .hero-title em { color: var(--amber); font-style: italic; text-shadow: 0 0 14px rgba(11, 12, 10, 0.45), 0 4px 44px rgba(11, 12, 10, 0.6); } .hero-lead { grid-area: lead; align-self: start; position: relative; z-index: 2; } .pronounce { border-left: 2px solid var(--amber); padding-left: 1.1rem; margin-bottom: 2rem; max-width: 34rem; } .pron-word { font-family: var(--serif); font-size: 1.5rem; font-style: italic; } .pron-ipa { font-family: var(--mono); color: var(--amber); margin-left: 0.6rem; font-size: 1rem; } .pron-note { display: block; color: var(--bone-faint); font-size: 0.9rem; margin-top: 0.3rem; } .hero-sub { max-width: 32rem; color: var(--bone-dim); font-size: 1.1rem; margin-bottom: 2.3rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* hero image — a strip of film with the keeper circled; the headline runs over it */ .hero-media { position: relative; grid-area: media; z-index: 1; margin-left: clamp(-5rem, -5vw, -1.5rem); } .frame { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); } .frame img { width: 100%; height: 100%; object-fit: cover; } .hero-media .frame { aspect-ratio: 3 / 4; } .hero-media .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,12,10,0.55)); pointer-events: none; } /* ---- the film strip ---- */ .filmstrip { position: relative; background: #070806; padding: 1.3rem 2.4rem; border-radius: 5px; box-shadow: 0 50px 100px -36px rgba(0, 0, 0, 0.85); transform: rotate(1.8deg); transition: transform 0.7s var(--ease); overflow: hidden; } .hero-media:hover .filmstrip { transform: rotate(0.6deg); } .filmstrip .frame { border: none; border-radius: 2px; box-shadow: none; } .film-track { display: flex; align-items: stretch; width: 300%; transition: translate 320ms cubic-bezier(0.35, 1, 0.4, 1); will-change: translate; } .film-track > .frame { flex: 1 1 0; min-width: 0; } .filmstrip.wound-1 .film-track { translate: -33.3333% 0; } .filmstrip.wound-2 .film-track { translate: -66.6667% 0; } .filmstrip::before, .filmstrip::after { content: ""; position: absolute; top: 16px; bottom: 16px; width: 10px; z-index: 1; background-image: radial-gradient(3.4px 5px at 50% 50%, rgba(243, 239, 228, 0.3) 0 96%, transparent 100%); background-size: 10px 20px; } .filmstrip::before { left: 8px; } .filmstrip::after { right: 8px; } /* ---- amber grease pencil, circling the select ---- */ .grease { position: absolute; left: -7%; top: -5%; width: 114%; height: 110%; z-index: 3; pointer-events: none; color: var(--amber); transform: rotate(-2deg); overflow: visible; } .grease path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 1750; stroke-dashoffset: 1750; transition: stroke-dashoffset 1.5s var(--ease) 0.7s; pointer-events: stroke; cursor: pointer; } .in .grease path { stroke-dashoffset: 0; } .frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; font-family: var(--mono); font-size: 0.72rem; color: #f3efe4; padding: 1.6rem 1rem 0.75rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.45rem; background: linear-gradient(transparent, rgba(11, 12, 10, 0.6)); } .frame .tick { color: var(--amber); } .scroll-cue { display: flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--bone-faint); margin-top: clamp(2rem, 6vh, 4rem); } .scroll-cue i { display: block; width: 60px; height: 1px; background: var(--line); position: relative; overflow: hidden; } .scroll-cue i::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: var(--amber); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0% { left: -40%; } 100% { left: 100%; } } /* ============================================================ TICKER — a strip of film across the page (dark in both themes) ============================================================ */ .ticker { position: relative; overflow: hidden; padding: 1.8rem 0; background: #070806; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ticker::before, .ticker::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; z-index: 1; background-image: radial-gradient(4.5px 3px at 50% 50%, rgba(243, 239, 228, 0.18) 0 96%, transparent 100%); background-size: 21px 9px; } .ticker::before { top: 8px; } .ticker::after { bottom: 8px; } .ticker-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee 34s linear infinite; } .ticker-track span { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: #f3efe4; white-space: nowrap; } .ticker-track i { color: #f2a93c; font-style: normal; font-size: 0.9rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ STATEMENT ============================================================ */ .statement { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem, 12vw, 9rem) var(--pad); } .statement::after { content: attr(data-no); position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(9rem, 24vw, 21rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; } .statement-body { margin-left: clamp(0rem, 6vw, 7rem); position: relative; z-index: 1; } /* hand-drawn amber underline (grease pencil again) */ .u-scribble { padding-bottom: 0.12em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M2 7 C 16 2 30 9 45 5 C 60 1 76 8 88 5' fill='none' stroke='%23f2a93c' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left bottom; background-size: auto 0.28em; } .statement-body { font-family: var(--serif); font-weight: 320; font-size: clamp(1.7rem, 4.2vw, 3.4rem); line-height: 1.28; letter-spacing: -0.015em; max-width: 24ch; } .statement-body em { color: var(--amber); font-style: italic; } /* ============================================================ SECTION HEADERS ============================================================ */ .sec-head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); margin-bottom: clamp(3rem, 6vw, 5rem); } .sec-title { font-family: var(--serif); font-weight: 340; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.025em; } .sec-title em { color: var(--amber); font-style: italic; } /* ============================================================ WORK — selects off the contact sheet ============================================================ */ .work { padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem); } .work-item { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--pad); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--line-soft); } .work-item.reverse .work-media { order: 2; } /* huge ghost numeral behind each project (data-no on the article) */ .work-item::before { content: attr(data-no); position: absolute; top: clamp(0.6rem, 2vw, 1.6rem); right: calc(var(--pad) * 0.6); font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(6rem, 17vw, 15rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.2px var(--line); pointer-events: none; user-select: none; z-index: 0; } .work-item.reverse::before { right: auto; left: calc(var(--pad) * 0.6); } .work-media, .work-text { position: relative; z-index: 1; } .frame-tall { aspect-ratio: 4 / 5; } .frame-wide { aspect-ratio: 4 / 3; } .frame img { transition: transform 0.9s var(--ease); } .work-item:hover .frame img { transform: scale(1.04); } /* prints pinned slightly crooked; they straighten when you look */ .work-item .frame-tall, .work-item .frame-wide { transform: rotate(-1.1deg); transition: transform 0.7s var(--ease); } .work-item.reverse .frame-tall, .work-item.reverse .frame-wide { transform: rotate(1.1deg); } .work-item:hover .frame-tall, .work-item:hover .frame-wide { transform: rotate(0deg); } .frame.moss::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(111,139,88,0.22), transparent 60%); mix-blend-mode: multiply; pointer-events: none; } /* inset is a wrapper (so tape can hang over the frame's clipped edges) */ .frame-inset { position: absolute; right: -1.5rem; bottom: -2rem; width: 42%; aspect-ratio: 3 / 4; z-index: 3; border: 3px solid var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9); transform: rotate(2.6deg); transition: transform 0.7s var(--ease); } .frame-inset .frame { position: absolute; inset: 0; border: none; box-shadow: none; border-radius: 2px; } .work-item.reverse .frame-inset { right: auto; left: -1.5rem; transform: rotate(-2.6deg); } .work-item:hover .frame-inset { transform: rotate(1deg); } .work-item.reverse:hover .frame-inset { transform: rotate(-1deg); } /* frame-number chip (sits on photos, so colors are fixed) */ .fr-no { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #f8c772; background: rgba(11, 12, 10, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(243, 239, 228, 0.14); border-radius: 3px; padding: 0.3rem 0.45rem 0.3rem 0.65rem; pointer-events: none; } /* masking tape */ .tape { position: absolute; z-index: 5; width: 86px; height: 24px; pointer-events: none; background: linear-gradient(98deg, rgba(243, 239, 228, 0.22), rgba(243, 239, 228, 0.12)); clip-path: polygon(0 8%, 4% 0, 97% 3%, 100% 88%, 95% 100%, 2% 95%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .tape-tl { top: -10px; left: -28px; transform: rotate(-42deg); } .tape-tr { top: -10px; right: -28px; transform: rotate(42deg); } .tape-br { bottom: -9px; right: -26px; transform: rotate(-38deg); } .tape-bl { bottom: -9px; left: -26px; transform: rotate(38deg); } .work-index { font-family: var(--mono); font-size: 0.82rem; color: var(--amber); letter-spacing: 0.03em; margin-bottom: 1rem; } .work-text h3 { font-family: var(--serif); font-weight: 360; font-style: italic; font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.2rem; } .work-text p { color: var(--bone-dim); max-width: 40ch; margin-bottom: 1.6rem; } .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; } .tags li { font-family: var(--mono); font-size: 0.72rem; color: var(--bone-dim); border: 1px solid var(--line); border-radius: 100px; padding: 0.3rem 0.8rem; } .work-links { display: flex; flex-wrap: wrap; gap: 1.4rem; } .work-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.9rem; color: var(--bone); border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; transition: color 0.25s, border-color 0.25s; } .work-link .arr { transition: transform 0.3s var(--ease); } .work-link:hover { color: var(--amber); border-color: var(--amber); } .work-link:hover .arr { transform: translate(3px, -3px); } .work-all { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--pad) 0; display: flex; justify-content: center; border-top: 1px solid var(--line-soft); } /* ============================================================ SERVICES ============================================================ */ .services { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--ink-2); border-block: 1px solid var(--line-soft); } .svc-grid { list-style: none; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); } .svc-grid { counter-reset: svc; } .svc { background: var(--ink-2); padding: clamp(1.8rem, 3vw, 2.8rem); transition: background 0.3s; position: relative; counter-increment: svc; overflow: hidden; } .svc:hover { background: var(--ink-3); } .svc-no { font-family: var(--mono); font-size: 0.8rem; color: var(--amber); } .svc h3 { font-family: var(--serif); font-weight: 360; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 1.5rem 0 0.7rem; letter-spacing: -0.01em; transition: transform 0.4s var(--ease); } .svc:hover h3 { transform: translateX(5px); } .svc p { color: var(--bone-dim); font-size: 0.98rem; max-width: 28ch; position: relative; z-index: 1; } /* crop marks appear in the corners on hover, like framing a shot */ .svc::before { content: ""; position: absolute; inset: 12px; pointer-events: none; background: linear-gradient(var(--amber), var(--amber)) top left / 14px 1px, linear-gradient(var(--amber), var(--amber)) top left / 1px 14px, linear-gradient(var(--amber), var(--amber)) top right / 14px 1px, linear-gradient(var(--amber), var(--amber)) top right / 1px 14px, linear-gradient(var(--amber), var(--amber)) bottom left / 14px 1px, linear-gradient(var(--amber), var(--amber)) bottom left / 1px 14px, linear-gradient(var(--amber), var(--amber)) bottom right / 14px 1px, linear-gradient(var(--amber), var(--amber)) bottom right / 1px 14px; background-repeat: no-repeat; opacity: 0; transition: opacity 0.35s; } .svc:hover::before { opacity: 0.8; } /* and a big ghost numeral rises from the corner */ .svc::after { content: counter(svc, decimal-leading-zero); position: absolute; right: 0.6rem; bottom: -1.6rem; font-family: var(--serif); font-style: italic; font-weight: 340; font-size: 6.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.6s var(--ease), -webkit-text-stroke-color 0.3s; } .svc:hover::after { opacity: 1; transform: none; -webkit-text-stroke-color: var(--amber); } /* ============================================================ STUDIO ============================================================ */ .studio { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; overflow: hidden; } .studio::before { content: attr(data-no); position: absolute; left: calc(var(--pad) * 0.4); bottom: -0.12em; font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(8rem, 20vw, 18rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; } .studio-media .frame { transform: rotate(1.6deg); transition: transform 0.7s var(--ease); } .studio-media:hover .frame { transform: rotate(0.4deg); } .studio-media { position: relative; } .studio-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .studio-text p { color: var(--bone-dim); max-width: 46ch; margin-top: 1.4rem; } .roster { list-style: none; margin-top: 2.6rem; } .roster li { display: flex; align-items: center; gap: 1rem; font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 350; padding: 1rem 0; border-top: 1px solid var(--line-soft); color: var(--bone); } .roster li:last-child { border-bottom: 1px solid var(--line-soft); } .roster span { font-family: var(--mono); font-size: 0.8rem; color: var(--amber); } .studio-media .frame { aspect-ratio: 3 / 4; } /* ============================================================ CONTACT ============================================================ */ .contact { position: relative; text-align: center; padding: clamp(6rem, 14vw, 11rem) var(--pad); overflow: hidden; border-top: 1px solid var(--line-soft); } /* the safelight — a slow amber breathing glow */ .contact-leak { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 65% at 50% 115%, rgba(242,169,60,0.24), transparent 70%); animation: safelight 7s ease-in-out infinite alternate; } @keyframes safelight { from { opacity: 0.65; } to { opacity: 1; } } .contact-title { font-family: var(--serif); font-weight: 330; font-size: clamp(3rem, 11vw, 8rem); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 2.5rem; } .contact-title em { color: var(--amber); font-style: italic; } /* grease-pencil oval around the closer */ .circled { position: relative; display: inline-block; } .circled svg { position: absolute; left: -5%; top: -22%; width: 110%; height: 144%; pointer-events: none; color: var(--amber); overflow: visible; } .circled svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; opacity: 0.75; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.3s var(--ease) 0.5s; } .in .circled svg path { stroke-dashoffset: 0; } .contact-mail { font-family: var(--mono); font-size: clamp(1rem, 2.5vw, 1.4rem); border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; transition: color 0.25s, border-color 0.25s; } .contact-mail:hover { color: var(--amber); border-color: var(--amber); } .contact-meta { color: var(--bone-faint); margin-top: 2rem; font-size: 0.95rem; } .contact-meta .dot { color: var(--amber); margin: 0 0.5rem; } /* jobs page — apply intro */ .apply-lead { color: var(--bone-dim); font-size: 1.1rem; line-height: 1.6; max-width: 50ch; margin: 0 auto 2.6rem; } .apply-lead strong { color: var(--bone); font-weight: 500; } /* ---- contact form (Netlify) ---- */ .contact-form { max-width: 600px; margin: 0 auto 2.6rem; text-align: left; } .field { margin-bottom: 1.3rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; } .contact-form label { display: block; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bone-dim); margin-bottom: 0.55rem; } .contact-form .opt { color: var(--bone-faint); text-transform: none; letter-spacing: 0; } .contact-form input, .contact-form textarea { width: 100%; background: rgba(243, 239, 228, 0.025); border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem 1rem; color: var(--bone); font-family: var(--sans); font-size: 1rem; line-height: 1.5; transition: border-color 0.25s, background 0.25s; } .contact-form textarea { resize: vertical; min-height: 7rem; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--bone-faint); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--amber); background: rgba(242, 169, 60, 0.05); } .consent { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 1.8rem; cursor: pointer; } .consent input { width: auto; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--amber); } .consent span { font-family: var(--sans); font-size: 0.88rem; color: var(--bone-dim); line-height: 1.5; text-transform: none; letter-spacing: 0; margin: 0; } .contact-form .btn { cursor: pointer; border: none; font-family: var(--sans); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } /* ============================================================ PORTFOLIO PAGE ============================================================ */ .pf-head { max-width: var(--maxw); margin: 0 auto; padding: clamp(8rem, 16vh, 11rem) var(--pad) clamp(2.5rem, 5vw, 4rem); } .pf-title { font-family: var(--serif); font-weight: 340; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; margin: 1.4rem 0 1.6rem; } .pf-title em { color: var(--amber); font-style: italic; } .pf-intro { color: var(--bone-dim); max-width: 46ch; font-size: 1.1rem; } .pf-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 9vw, 7rem); } .pf-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.5rem); } .pf-card { display: flex; flex-direction: column; } .pf-media { display: block; } .pf-card .frame { aspect-ratio: 16 / 11; margin-bottom: 1.5rem; } .pf-card .frame img { transition: transform 0.9s var(--ease); } .pf-media:hover .frame img { transform: scale(1.04); } .pf-text h3 { font-family: var(--serif); font-weight: 360; font-style: italic; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1rem; } .pf-text > p { color: var(--bone-dim); margin-bottom: 1.4rem; max-width: 46ch; } @media (max-width: 760px) { .pf-grid { grid-template-columns: 1fr; } } /* ============================================================ JOBS BOARD (jobs/index.html) ============================================================ */ .jobs-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); } .job-card { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: clamp(1.7rem, 3vw, 2.4rem); transition: border-color 0.3s, background 0.3s, transform 0.5s var(--ease); } .job-card:hover { border-color: var(--line); background: var(--ink-3); transform: translateY(-3px); } .job-card-ghost { background: transparent; border-style: dashed; } .job-card-ghost:hover { background: var(--ink-2); } .job-type { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); } .job-card h2 { font-family: var(--serif); font-weight: 360; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); } .job-card p { color: var(--bone-dim); font-size: 1rem; line-height: 1.6; max-width: 40ch; } .job-facts { font-family: var(--mono); font-size: 0.8rem; color: var(--bone-dim); } .job-facts span { color: var(--amber); margin: 0 0.45rem; } .job-go { margin-top: auto; padding-top: 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--amber); display: inline-flex; align-items: center; gap: 0.45rem; } .job-go .arr { transition: transform 0.3s var(--ease); } .job-card:hover .job-go .arr { transform: translateX(4px); } /* ============================================================ TEAM (team/index.html) ============================================================ */ .team-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); } .team-card { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: clamp(1.6rem, 3vw, 2.2rem); transition: border-color 0.3s, background 0.3s, transform 0.5s var(--ease); } .team-card:hover { border-color: var(--line); background: var(--ink-3); transform: translateY(-3px); } .team-mono { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 0.7rem; display: grid; place-items: center; border: 1px solid var(--amber); color: var(--amber); font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.02em; } .team-card h2 { font-family: var(--serif); font-weight: 360; font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); } .team-role { font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber); } .team-card > p:not(.team-role) { color: var(--bone-dim); font-size: 0.98rem; line-height: 1.55; } .team-email { margin-top: auto; padding-top: 0.6rem; align-self: flex-start; font-family: var(--mono); font-size: 0.82rem; color: var(--bone-dim); border-bottom: 1px solid transparent; word-break: break-all; transition: color 0.25s, border-color 0.25s; } .team-email:hover { color: var(--amber); border-color: var(--amber); } /* ============================================================ PROJECT (case study) PAGES ============================================================ */ .proj-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(8rem, 16vh, 11rem) var(--pad) clamp(2rem, 4vw, 3rem); } .back-link { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.8rem; color: var(--bone-dim); margin-bottom: 2.2rem; transition: color 0.25s; } .back-link:hover { color: var(--amber); } .back-link .arr { transition: transform 0.3s var(--ease); } .back-link:hover .arr { transform: translateX(-4px); } .proj-cat { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); margin-bottom: 1.2rem; } .proj-title { font-family: var(--serif); font-weight: 340; font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 0.95; letter-spacing: -0.03em; } .proj-title em { font-style: italic; color: var(--amber); } .proj-lead { color: var(--bone-dim); font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 50ch; margin-top: 1.8rem; } .proj-cover { max-width: var(--maxw); margin: clamp(2rem, 5vw, 4rem) auto 0; padding: 0 var(--pad); } .proj-cover .frame { aspect-ratio: 16 / 9; } .proj-body { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--pad); display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .proj-prose > * { min-width: 0; } .proj-prose p { color: var(--bone-dim); margin-bottom: 1.3rem; max-width: 62ch; font-size: 1.08rem; } .proj-prose .lede { color: var(--bone); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-family: var(--serif); font-weight: 330; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 2rem; max-width: 26ch; } .proj-prose .lede em { color: var(--amber); font-style: italic; } .proj-prose p a { color: var(--amber); border-bottom: 1px solid var(--line); transition: border-color 0.25s; } .proj-prose p a:hover { border-color: var(--amber); } .proj-meta { border-top: 1px solid var(--line); padding-top: 1.6rem; position: sticky; top: 6rem; } .proj-meta dl { display: grid; gap: 1.4rem; margin: 0; } .proj-meta dt { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bone-faint); margin-bottom: 0.45rem; } .proj-meta dd { color: var(--bone); margin: 0; line-height: 1.6; } .proj-meta .work-link { display: inline-flex; } .proj-meta .tags { margin: 0; } .proj-gallery { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .proj-gallery .frame { aspect-ratio: 4 / 5; } .proj-foot { border-top: 1px solid var(--line); max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--pad); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .proj-foot a { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.9rem); color: var(--bone); transition: color 0.25s; max-width: 48%; } .proj-foot a:hover { color: var(--amber); } .proj-foot .nxt { text-align: right; margin-left: auto; } .proj-foot small { display: block; font-family: var(--mono); font-style: normal; font-size: 0.72rem; color: var(--bone-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } /* project-title links (home + portfolio cards) */ .work-text h3 a, .pf-text h3 a { color: inherit; transition: color 0.25s; } .work-text h3 a:hover, .pf-text h3 a:hover { color: var(--amber); } @media (max-width: 860px) { .proj-body { grid-template-columns: 1fr; } .proj-meta { position: static; } } @media (max-width: 600px) { .proj-gallery { grid-template-columns: 1fr; } .proj-foot a { max-width: 100%; } } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) var(--pad); } .footer-top { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-soft); } .footer-top .brand-logo { height: 2.2rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem; } .footer-nav a { color: var(--bone-dim); font-size: 0.9rem; transition: color 0.25s; } .footer-nav a:hover { color: var(--amber); } .footer-bottom { max-width: var(--maxw); margin: 2rem auto 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: var(--mono); font-size: 0.78rem; color: var(--bone-faint); position: relative; } .footer-bottom .mono { color: var(--amber); } .rabbit-link { display: inline-flex; line-height: 0; } .rabbit { width: 30px; height: 30px; color: var(--bone-faint); transition: color 0.3s, transform 0.5s var(--ease); } .rabbit-link:hover .rabbit { color: var(--amber); transform: translateY(-4px) rotate(-8deg); } /* easter egg: hover the bunny for 5s and it hops over to the egg (--hop-x set by JS) */ /* squash & stretch with proper ground contact: x only travels while airborne (real hops don't slide), ease-out going up / ease-in coming down, each hop smaller than the last */ .rabbit-link.hopping { position: relative; z-index: 6; color: var(--amber); transform-origin: 50% 100%; animation: bunny-hop 2.3s forwards; } @keyframes bunny-hop { /* anticipation: sink into a crouch, then a quick launch stretch */ 0% { transform: translate(0, 0) scale(1, 1) rotate(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 6% { transform: translate(0, 0) scale(1.16, .76) rotate(0); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 9% { transform: translate(0, 0) scale(.92, 1.12) rotate(-3deg); animation-timing-function: cubic-bezier(.15, .6, .35, 1); } /* hop 1 — biggest arc, stretched and leaning at the apex */ 19% { transform: translate(calc(var(--hop-x) * .18), -30px) scale(.86, 1.16) rotate(-8deg); animation-timing-function: cubic-bezier(.6, 0, .85, .4); } 29% { transform: translate(calc(var(--hop-x) * .36), 0) scale(1.18, .78) rotate(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } /* grounded: gather for the next hop (x holds still) */ 34% { transform: translate(calc(var(--hop-x) * .36), 0) scale(1.04, .92) rotate(0); animation-timing-function: cubic-bezier(.15, .6, .35, 1); } /* hop 2 */ 44% { transform: translate(calc(var(--hop-x) * .53), -22px) scale(.89, 1.12) rotate(-6deg); animation-timing-function: cubic-bezier(.6, 0, .85, .4); } 53% { transform: translate(calc(var(--hop-x) * .70), 0) scale(1.15, .82) rotate(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 58% { transform: translate(calc(var(--hop-x) * .70), 0) scale(1.03, .94) rotate(0); animation-timing-function: cubic-bezier(.15, .6, .35, 1); } /* hop 3 */ 67% { transform: translate(calc(var(--hop-x) * .84), -14px) scale(.92, 1.08) rotate(-4deg); animation-timing-function: cubic-bezier(.6, 0, .85, .4); } 75% { transform: translate(calc(var(--hop-x) * .96), 0) scale(1.12, .86) rotate(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 79% { transform: translate(calc(var(--hop-x) * .96), 0) scale(1.02, .97) rotate(0); animation-timing-function: cubic-bezier(.15, .6, .35, 1); } /* hop 4 — a tiny settling bounce */ 86% { transform: translate(calc(var(--hop-x) * .995), -6px) scale(.97, 1.03) rotate(-2deg); animation-timing-function: cubic-bezier(.55, 0, .8, .4); } 91% { transform: translate(var(--hop-x), 0) scale(1.08, .9) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .35, 1); } /* recover, with a little overshoot — ears up, looking pleased with itself */ 96% { transform: translate(var(--hop-x), 0) scale(.985, 1.02) rotate(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 100% { transform: translate(var(--hop-x), 0) scale(1, 1) rotate(0); } } /* easter egg: an egg, opposite the bunny. hover 5s and it cracks. the bunny's hop lands on it too — collision, same crack. click it (cracked or not) and it takes you somewhere. */ .egg-link { display: inline-flex; line-height: 0; position: relative; z-index: 4; } .egg { width: 22px; height: 32px; color: var(--bone-faint); transition: color 0.3s, transform 0.4s var(--ease); overflow: visible; } .egg-link:hover .egg { color: var(--amber); transform: translateY(-2px) rotate(4deg); } .egg-body { transform-origin: 50% 100%; transform-box: fill-box; } .egg-link:hover .egg-body { animation: egg-wobble 0.45s ease-in-out infinite alternate; } .egg-crack { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: opacity 0.2s, stroke-dashoffset 0.5s var(--ease); } @keyframes egg-wobble { 0% { transform: rotate(-2.5deg); } 100% { transform: rotate(2.5deg); } } /* cracked */ .egg-link.cracked .egg-body { animation: egg-shatter 0.7s var(--ease) forwards; } .egg-link.cracked .egg-crack { opacity: 1; stroke-dashoffset: 0; transition-delay: 0s; } .egg-link.cracked:hover .egg-body { animation: egg-shatter 0.7s var(--ease) forwards; } /* don't wobble once broken */ @keyframes egg-shatter { 0% { transform: translateY(0) rotate(0); opacity: 1; } 18% { transform: translateY(-2px) rotate(-3deg); opacity: 1; } 35% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(10px) rotate(11deg); opacity: 0.32; } } /* the goo — drips out, pools the length of the bottom strip */ .footer-bottom::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -18px; height: 34px; background: radial-gradient(7px 12px at 12% 100%, #e7a91d 0 100%, transparent 100%), radial-gradient(10px 18px at 26% 100%, #e7a91d 0 100%, transparent 100%), radial-gradient(6px 10px at 41% 100%, #e7a91d 0 100%, transparent 100%), radial-gradient(9px 16px at 58% 100%, #e7a91d 0 100%, transparent 100%), radial-gradient(7px 13px at 73% 100%, #e7a91d 0 100%, transparent 100%), radial-gradient(11px 19px at 88% 100%, #e7a91d 0 100%, transparent 100%), linear-gradient(180deg, #f8c43c 0%, #e7a91d 78%, transparent 100%); opacity: 0; transform: scaleX(0.04); transform-origin: 4% 50%; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.12)); pointer-events: none; z-index: 0; transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.3, 0.85, 0.4, 1); } .footer-bottom.cracked::after { opacity: 0.92; transform: scaleX(1); } /* the easter page (/easter/) — list of other things to look for */ .egg-list { padding-top: 0; } .egg-list ul { list-style: none; padding: 0; margin: 0 0 2.8rem; font-family: var(--mono); font-size: 0.95rem; color: var(--bone-dim); display: grid; gap: 0.6rem; max-width: 46ch; } .egg-list ul li { padding-left: 1.4rem; position: relative; } .egg-list ul li::before { content: "·"; position: absolute; left: 0.4rem; top: -0.1rem; color: var(--amber); font-size: 1.4rem; line-height: 1; } .egg-eye { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint); margin: 0 0 1.2rem; } .egg-back a { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--bone); border-bottom: 1px solid var(--line); transition: color 0.25s, border-color 0.25s; } .egg-back a:hover { color: var(--amber); border-color: var(--amber); } /* easter egg: type "roll" → the whole site does a barrel roll */ html.barrel-rolling { overflow: hidden; } html.barrel-rolling body { animation: barrel-roll 1.5s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: 50% 50%; } @keyframes barrel-roll { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ============================================================ TO TOP ============================================================ */ .to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 95; width: 46px; height: 46px; border-radius: 50%; background: var(--amber); color: var(--ink); border: none; cursor: pointer; font-size: 1.1rem; display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease), background 0.25s; } .to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { background: var(--amber-soft); } /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .hero { min-height: auto; padding-top: 8rem; } .hero-grid { grid-template-columns: 1fr; grid-template-areas: "title" "media" "lead"; } .hero-title .line { white-space: normal; } .hero-title .line-2 { margin-left: 1.2rem; } .hero-media { max-width: 30rem; margin: 0.5rem 0 3.4rem; } .filmstrip { padding: 1rem 1.9rem; } .work-item, .work-item.reverse { grid-template-columns: 1fr; } .work-item.reverse .work-media { order: 0; } .work-media { max-width: 34rem; } .work-item::before, .work-item.reverse::before { font-size: clamp(4.5rem, 17vw, 8rem); top: 0.7rem; right: var(--pad); left: auto; } .frame-inset { width: 38%; right: 0; bottom: -1.5rem; } .statement::after { font-size: clamp(6rem, 18vw, 9rem); top: auto; bottom: 0.5rem; transform: none; } .studio-grid { grid-template-columns: 1fr; } .studio-media { max-width: 26rem; } .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav-links { display: none; } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; } .nav-toggle span { width: 26px; height: 2px; background: var(--bone); transition: transform 0.3s var(--ease), opacity 0.3s; } body.menu-open .nav-toggle span:first-child { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); } body.menu-open { overflow: hidden; } .svc-grid { grid-template-columns: 1fr; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } .grain, .cursor-light, .scroll-cue i::after { display: none; } .ticker-track { animation: none; } } /* ============================================================ CONSTITUTION (constitution/index.html) ============================================================ */ .const-actions { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(1rem, 2vw, 1.5rem); display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; } .const-actions .btn { cursor: pointer; } .const-dl-note { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--bone-faint); } .const { max-width: 760px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--pad) clamp(4rem, 9vw, 7rem); } .const-doc-meta { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin: 0 0 2.5rem; } .const-doc-meta .sep { color: var(--bone-faint); padding: 0 0.45em; } .const-article { padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line); } .const-article:first-of-type { border-top: none; padding-top: 0; } .const-num { font-family: var(--mono); font-weight: 500; font-size: 0.73rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 0.7rem; } .const-article h2 { font-family: var(--serif); font-weight: 360; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 1rem; } .const-article p { color: var(--bone-dim); font-size: 1.02rem; line-height: 1.7; margin: 0 0 0.9rem; max-width: 64ch; } .const-article p:last-child { margin-bottom: 0; } .const-lead-in { color: var(--bone); font-weight: 500; } .const-roster { list-style: none; margin: 0.4rem 0 1.4rem; padding: 0; max-width: 64ch; } .const-roster li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); } .const-roster .r-role { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-faint); min-width: 24ch; } .const-roster .r-name { color: var(--bone); font-weight: 500; } .const-roster.const-keys .r-role { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--bone); min-width: auto; display: flex; align-items: center; gap: 0.65rem; } .const-roster.const-keys .r-role::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; } .const-annex { margin-top: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-left: 3px solid var(--moss); background: var(--ink-2); border-radius: 4px; padding: clamp(1.6rem, 3vw, 2.2rem); } .const-annex .const-num { color: var(--moss); } @media (max-width: 560px) { .const-roster .r-role { min-width: 100%; } } /* ============================================================ CONTACT-SHEET GARNISH — portfolio / team / jobs (no markup needed) ============================================================ */ /* portfolio cards: numbered frames, pinned slightly crooked */ .pf-grid { counter-reset: pf; } .pf-card { counter-increment: pf; } .pf-card .frame { transform: rotate(-0.8deg); transition: transform 0.7s var(--ease); } .pf-card:nth-child(even) .frame { transform: rotate(0.8deg); } .pf-card:hover .frame { transform: rotate(0deg); } .pf-media { position: relative; } .pf-media::after { content: "FR. " counter(pf, decimal-leading-zero); position: absolute; top: 0.7rem; left: 0.7rem; z-index: 3; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #f8c772; background: rgba(11, 12, 10, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(243, 239, 228, 0.14); border-radius: 3px; padding: 0.3rem 0.45rem 0.3rem 0.65rem; pointer-events: none; } /* team + job cards: index cards taped to the wall */ .team-card, .job-card { position: relative; } .team-card::before, .job-card::before { content: ""; position: absolute; top: -11px; left: 50%; z-index: 5; width: 90px; height: 24px; pointer-events: none; background: linear-gradient(98deg, rgba(243, 239, 228, 0.16), rgba(243, 239, 228, 0.08)); clip-path: polygon(0 8%, 4% 0, 97% 3%, 100% 88%, 95% 100%, 2% 95%); transform: translateX(-50%) rotate(-2deg); } .team-card:nth-child(even)::before, .job-card:nth-child(even)::before { transform: translateX(-50%) rotate(2.4deg); } .team-card:nth-child(odd) { transform: rotate(-0.3deg); } .team-card:nth-child(even) { transform: rotate(0.3deg); } .team-card:hover { transform: translateY(-3px) rotate(0deg); } /* ============================================================ LIGHT THEME — darkroom artifacts on sunlit paper ============================================================ */ html[data-theme="light"] .filmstrip { box-shadow: 0 40px 80px -36px rgba(40, 30, 10, 0.4); } html[data-theme="light"] .filmstrip .frame { box-shadow: none; } /* light amber is dark — give it a paper halo so it survives crossing the film strip */ html[data-theme="light"] .hero-title em { text-shadow: 0 0 1px rgba(247, 243, 234, 0.95), 0 0 8px rgba(247, 243, 234, 0.95), 0 0 18px rgba(247, 243, 234, 0.85), 0 0 34px rgba(247, 243, 234, 0.7); } html[data-theme="light"] .tape, html[data-theme="light"] .team-card::before, html[data-theme="light"] .job-card::before { background: linear-gradient(98deg, rgba(27, 24, 19, 0.13), rgba(27, 24, 19, 0.07)); box-shadow: 0 2px 8px rgba(40, 30, 10, 0.18); } html[data-theme="light"] .u-scribble { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M2 7 C 16 2 30 9 45 5 C 60 1 76 8 88 5' fill='none' stroke='%23b9740f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); } html[data-theme="light"] .contact-leak { background: radial-gradient(48% 65% at 50% 115%, rgba(185, 116, 15, 0.2), transparent 70%); } /* ============================================================ SMALL SCREENS + REDUCED MOTION — artifacts settle down ============================================================ */ @media (max-width: 560px) { .statement::after { display: none; } .filmstrip { padding: 0.85rem 1.6rem; } } @media (prefers-reduced-motion: reduce) { .grease path, .circled svg path { stroke-dashoffset: 0; } .filmstrip, .work-item .frame-tall, .work-item .frame-wide, .frame-inset, .studio-media .frame, .pf-card .frame, .team-card { transform: none !important; } .egg-link:hover .egg-body, .egg-link.cracked .egg-body { animation: none; } .egg-link.cracked .egg-body { transform: translateY(10px) rotate(11deg); opacity: 0.32; } .egg-link.cracked .egg-crack { transition: none; } .footer-bottom::after { transition: none; } } /* ============================================================ BRAND PAGE (brand/index.html) ============================================================ */ .brand-download { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.2rem; } .dl-note { font-family: var(--mono); font-size: 0.78rem; color: var(--bone-faint); letter-spacing: 0.03em; } .brand-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(4rem, 9vw, 7rem); } .brand-sec { padding: clamp(2.8rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line-soft); } .brand-title { font-family: var(--serif); font-weight: 340; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.6rem; } .brand-lead { color: var(--bone-dim); max-width: 52ch; margin-bottom: 2.4rem; } .brand-lead a { color: var(--amber); border-bottom: 1px solid var(--line); } .brand-lead a:hover { border-color: var(--amber); } /* pronunciation (reuses .pronounce tokens) */ .pronounce { border-left: 2px solid var(--amber); padding-left: 1.1rem; max-width: 34rem; } .pron-word { font-family: var(--serif); font-size: 1.5rem; font-style: italic; } .pron-ipa { font-family: var(--mono); color: var(--amber); margin-left: 0.6rem; font-size: 1rem; } .pron-note { display: block; color: var(--bone-faint); font-size: 0.9rem; margin-top: 0.3rem; } /* logo tiles */ .logo-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); } .logo-tile { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--ink-2); display: flex; flex-direction: column; transition: border-color 0.3s; } .logo-tile:hover { border-color: var(--line); } .logo-preview { display: grid; place-items: center; padding: clamp(2rem, 4vw, 3.5rem); min-height: 220px; } .logo-preview.on-ink { background: #0b0c0a; } .logo-preview.on-bone { background: #f3efe4; } .logo-preview img { width: min(72%, 400px); height: auto; } .logo-preview .lp-mark, .logo-preview .lp-icon { width: clamp(96px, 30%, 140px); } .logo-preview .lp-icon { border-radius: 22%; } .logo-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--line-soft); } .logo-meta h3 { font-family: var(--serif); font-weight: 360; font-size: 1.25rem; letter-spacing: -0.01em; } .logo-meta p { color: var(--bone-dim); font-size: 0.9rem; margin-top: 0.25rem; } .dl-links { display: flex; gap: 1rem; font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; } .dl-links a { color: var(--amber); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.25s; } .dl-links a:hover { border-color: var(--amber); } /* color swatches */ .swatches { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); } .swatch h3 { font-family: var(--serif); font-weight: 360; font-size: 1.25rem; margin-top: 1rem; } .swatch-chip { display: block; height: 130px; border-radius: 10px; border: 1px solid var(--line); } .swatch-hex { font-family: var(--mono); font-size: 0.8rem; color: var(--amber); margin: 0.3rem 0 0.4rem; letter-spacing: 0.04em; } .swatch p:not(.swatch-hex) { color: var(--bone-dim); font-size: 0.92rem; max-width: 24ch; } /* type specimens */ .type-row { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line-soft); } .type-row:first-of-type { border-top: none; } .type-name h3 { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); } .type-name p { color: var(--bone-dim); font-size: 0.92rem; margin-top: 0.4rem; max-width: 28ch; } .type-specimen { line-height: 1.15; overflow-wrap: break-word; } .ts-serif { font-family: var(--serif); font-weight: 340; font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.02em; } .ts-serif em { color: var(--amber); font-style: italic; } .ts-sans { font-family: var(--sans); font-weight: 350; font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--bone); } .ts-mono { font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: 0.12em; color: var(--bone-dim); } /* voice */ .voice-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 4rem); } .voice-col h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.9rem; } .voice-col h3:not(:first-child) { margin-top: 1.6rem; } .voice-avoid { list-style: none; } .voice-avoid li { font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--bone-dim); padding: 0.45rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: line-through; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; } .voice-ex { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 330; line-height: 1.35; max-width: 26ch; } .vx-wrong { color: var(--bone-faint); } .vx-right { color: var(--bone); } .vx-right::after { content: " \2713"; color: var(--amber); } .voice-rabbit { margin-top: 2.4rem; color: var(--bone-faint); font-size: 0.95rem; } .brand-sec-dl .brand-download { margin-top: 0; } @media (max-width: 900px) { .logo-grid { grid-template-columns: 1fr; } .swatches { grid-template-columns: repeat(2, 1fr); } .type-row { grid-template-columns: 1fr; gap: 0.8rem; } .voice-grid { grid-template-columns: 1fr; } } /* ---- print: the brand page doubles as the PDF source ---- */ .print-cover { display: none; } @media print { @page { margin: 14mm; } html, body { background: #ffffff !important; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .nav, .mobile-menu, .footer, .to-top, .grain, .cursor-light, .skip-link, .dl-links, .brand-download, .brand-sec-dl { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .print-cover { display: block; padding: 30mm 0 10mm; page-break-after: always; break-after: page; } .print-cover img { width: 90mm; height: auto; margin-bottom: 18mm; } .print-cover h1 { font-family: var(--serif); font-weight: 340; font-size: 42pt; letter-spacing: -0.02em; } .print-cover p { color: #565049; margin-top: 4mm; font-size: 12pt; } .print-cover .pc-foot { font-family: var(--mono); font-size: 8.5pt; margin-top: 40mm; color: #8b8579; } .pf-head { padding: 0 0 8mm; } .pf-title { font-size: 28pt; } .brand-wrap { padding: 0; max-width: none; } .brand-sec { padding: 8mm 0; } .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 6mm; } .logo-tile, .swatch, .type-row, .pronounce, .voice-grid { break-inside: avoid; page-break-inside: avoid; } .logo-preview { min-height: 40mm; } .swatches { grid-template-columns: repeat(4, 1fr); gap: 5mm; } .swatch-chip { height: 26mm; } .ts-serif { font-size: 24pt; } .ts-sans { font-size: 14pt; } } /* ============================================================ TAPE EASTER EGG — taped things peel up, move, and re-stick (fine pointers only; wired in script.js) ============================================================ */ .taped { cursor: grab; user-select: none; -webkit-user-select: none; } .taped img { -webkit-user-drag: none; } .taped:not(.lifted) { transition: rotate 0.45s var(--ease), filter 0.35s ease; } .taped.lifted { cursor: grabbing; z-index: 80; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.45)); } .taped.lifted .tape { opacity: 0.55; } .taped.sticking { animation: stick-down 0.5s var(--ease); } @keyframes stick-down { 0% { scale: 1.045; } 55% { scale: 0.972; } 80% { scale: 1.012; } 100% { scale: 1; } } /* whatever was moved last stays on top of its neighbours */ .has-lifted { z-index: 70; } html[data-theme="light"] .taped.lifted { filter: drop-shadow(0 30px 24px rgba(40, 30, 10, 0.35)); } /* ==================================================================== Easter egg: macOS-style right-click on photos → "Set Desktop Picture" Activated on . Photos use .frame img. ==================================================================== */ .mac-menu { position: fixed; z-index: 9999; min-width: 224px; padding: 4px 0; border-radius: 8px; background: rgba(36, 36, 38, 0.72); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.45); color: #fff; font: 13px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; user-select: none; transform-origin: top left; animation: macMenuIn 0.09s ease-out; } @keyframes macMenuIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .mac-menu-item { padding: 3px 14px; margin: 0 4px; border-radius: 4px; cursor: default; white-space: nowrap; line-height: 1.55; } .mac-menu-item.is-disabled { color: rgba(255, 255, 255, 0.36); } .mac-menu-item:not(.is-disabled):hover { background: #0a5fff; color: #fff; } .mac-menu-sep { height: 1px; margin: 4px 10px; background: rgba(255, 255, 255, 0.12); } .wp-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .wp-image { position: absolute; inset: 0; background-size: cover; background-position: center; animation: wpIn 0.5s ease-out; } .wp-scrim { position: absolute; inset: 0; background: rgba(11, 12, 10, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html[data-theme="light"] .wp-scrim { background: rgba(247, 243, 234, 0.8); } @keyframes wpIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } html.wallpapered body { background: transparent; } .wp-reset { position: fixed; bottom: 24px; right: 24px; z-index: 9000; padding: 8px 12px 8px 14px; border-radius: 999px; background: rgba(20, 20, 22, 0.7); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); font: 12px/1.2 -apple-system, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; animation: macMenuIn 0.15s ease-out; } .wp-reset:hover { background: rgba(30, 30, 32, 0.88); } .wp-reset .x { opacity: 0.6; font-size: 14px; line-height: 1; } /* macOS System-Settings-style wallpaper picker */ .wp-pick-backdrop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: wpFade 0.15s ease-out; } .wp-pick { width: min(680px, 100%); max-height: min(80vh, 620px); display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: rgba(40, 40, 42, 0.82); -webkit-backdrop-filter: blur(50px) saturate(180%); backdrop-filter: blur(50px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 30px 70px rgba(0, 0, 0, 0.55); color: #fff; font: 13px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; animation: wpPickIn 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); } .wp-pick-bar { position: relative; flex: none; height: 38px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .wp-traffic { display: inline-flex; gap: 8px; cursor: pointer; } .wp-traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; } .wp-traffic .r { background: #ff5f57; } .wp-traffic .y { background: #febc2e; } .wp-traffic .g { background: #28c840; } .wp-pick-title { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 13px; pointer-events: none; } .wp-pick-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .wp-pick-note { grid-column: 1 / -1; text-align: center; padding: 32px 0; color: rgba(255, 255, 255, 0.55); } .wp-pick-cell { position: relative; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.12s ease, box-shadow 0.12s ease; } .wp-pick-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .wp-pick-cell:hover { transform: translateY(-2px); } .wp-pick-cell.is-selected { box-shadow: 0 0 0 3px rgba(10, 95, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .wp-pick-cell.is-selected::after { content: "✓"; position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: #0a5fff; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .wp-pick-foot { flex: none; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); font-size: 12px; text-align: right; } .wp-pick-foot a { color: rgba(255, 255, 255, 0.8); text-decoration: none; } .wp-pick-foot a:hover { color: #fff; } @keyframes wpFade { from { opacity: 0; } to { opacity: 1; } } @keyframes wpPickIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mac-menu, .wp-image, .wp-reset, .wp-pick-backdrop, .wp-pick { animation: none; } .wp-pick-cell { transition: none; } } /* ============================================================ 404 page — guard against horizontal overflow on narrow widths ============================================================ */ .page-404 { overflow-x: hidden; } /* ============================================================ 404 — darkroom develop tray The page is the developer tray; the Polaroid develops as you pass the cursor over it. Reuses .tape, .fr-no, .circled, and the data-no ghost-numeral pattern from .statement. ============================================================ */ .darkroom { position: relative; min-height: calc(100vh - var(--banner-h, 0px)); display: flex; align-items: center; padding: clamp(7rem, 14vh, 11rem) var(--pad) clamp(4rem, 10vh, 7rem); overflow: hidden; } .darkroom::after { content: attr(data-no); position: absolute; right: var(--pad); top: 50%; transform: translate(8%, -50%); font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(14rem, 38vw, 30rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; user-select: none; z-index: 0; } .dr-wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; display: grid; gap: clamp(2.4rem, 5vh, 3.6rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .dr-title { font-family: var(--serif); font-weight: 350; line-height: 1.04; font-size: clamp(2rem, 5.4vw, 4.6rem); letter-spacing: -0.02em; color: var(--bone); max-width: 18ch; overflow-wrap: break-word; } .dr-title em { color: var(--amber); font-style: italic; } .dr-back { grid-column: 1 / -1; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 360; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: clamp(1rem, 3vh, 2.2rem); } .home-link { display: inline-flex; align-items: baseline; gap: 0.7rem; color: var(--bone); transition: color 0.25s var(--ease); } .home-link:hover { color: var(--amber); } .home-link .arr { font-style: normal; transition: transform 0.3s var(--ease); } .home-link:hover .arr { transform: translateX(4px); } /* Gate the grease-pencil oval — don't let .reveal → .in draw it prematurely. Drawing is triggered by .devtray.is-developed via sibling selector below. Specificity (0,3,3) wins over (0,2,2). */ .page-404 .home-link em.circled svg path { stroke-dashoffset: 700; transition: stroke-dashoffset 1.3s var(--ease); } /* ---- Polaroid + canvas mask ---- */ .devtray { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .dev-polaroid { position: relative; width: min(360px, 82vw); max-width: 100%; padding: 14px 14px 56px; background: #f3efe4; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.05); transform: rotate(-2.2deg); transition: transform 0.6s var(--ease); } .dev-polaroid:hover { transform: rotate(-0.6deg); } .dev-print { position: relative; width: 100%; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 46%, #1a1f15 0%, #0a0d08 78%); overflow: hidden; } .dev-print > * { max-width: 100%; } .dev-photo { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 0 22px rgba(242, 169, 60, 0.32)); user-select: none; -webkit-user-drag: none; pointer-events: none; } .dev-mask { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; transition: opacity 0.6s var(--ease); } .devtray.is-developed .dev-mask { opacity: 0; pointer-events: none; } .dev-cap { position: absolute; left: 14px; right: 14px; bottom: 14px; font-family: var(--mono); font-size: 0.72rem; color: #5c5950; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.45rem; } .dev-cap .tick { color: var(--amber); } .dev-prompt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-faint); transition: opacity 0.5s var(--ease); text-align: center; } .devtray.is-developed .dev-prompt { opacity: 0; } /* Once developed, draw the oval around the home link. */ .devtray.is-developed ~ .dr-back .home-link em.circled svg path, .darkroom.dev-done .home-link em.circled svg path { stroke-dashoffset: 0; } /* The little hopping bunny that pops out post-develop. Reuses the footer .rabbit-link.hopping animation; we just position it. */ .devtray .rabbit-link { position: absolute; left: 0; bottom: -42px; color: var(--amber); pointer-events: none; } .devtray .rabbit-link .rabbit { width: 26px; height: 26px; color: var(--amber); } /* Light theme: polaroid is a physical paper object, stays warm-white. The print stays dark — it's a "darkroom" — but tune the vignette. */ html[data-theme="light"] .dev-print { background: radial-gradient(circle at 50% 46%, #1f2418 0%, #0a0d08 78%); } html[data-theme="light"] .dev-cap { color: #6a665b; } html[data-theme="light"] .darkroom::after { -webkit-text-stroke: 1px rgba(20,18,12,0.18); } @media (max-width: 760px) { .darkroom { padding-top: clamp(5.5rem, 12vh, 9rem); padding-bottom: clamp(3rem, 8vh, 5rem); } .dr-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .dr-title { max-width: 100%; } .darkroom::after { font-size: clamp(11rem, 60vw, 22rem); right: 50%; transform: translate(50%, -50%); opacity: 0.6; } } @media (prefers-reduced-motion: reduce) { /* Skip the develop interaction: show the print already exposed, hide the prompt, draw the oval. Touch users can still play — pointer events fire for finger drags too. */ .dev-mask { display: none; } .dev-prompt { display: none; } .page-404 .home-link em.circled svg path { stroke-dashoffset: 0; } .dev-polaroid { transform: rotate(-1.4deg); } .devtray .rabbit-link.hopping { animation: none; } }