/* DM Sans — body · DM Mono — name, labels, links */ :root { --bg: rgb(242, 241, 237); --ink: rgb(38, 37, 30); --muted: oklab(0.263084 -0.00230259 0.0124794 / 0.6); --accent: #2d4a3e; --gold: #c3a670; --name-g1: var(--gold); --name-g2: #e6d48a; --card-bg: rgba(38, 37, 30, 0.05); --card-divider: rgba(38, 37, 30, 0.1); --row-hover-bg: rgba(38, 37, 30, 0.085); /* Theme switcher — integrated pill (light, Cursor-like) */ --theme-pill-bg: rgba(235, 234, 228, 0.46); /* #ebeae4 */ --theme-pill-active: rgba(226, 225, 217, 0.42); /* #e2e1d9 */ --theme-pill-hover: rgba(232, 231, 225, 0.32); /* #e8e7e1 */ --theme-pill-icon: rgba(38, 37, 30, 0.56); /* Spacing scale (8pt-ish rhythm) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --space: clamp(1.25rem, 4vw, 2.5rem); --max: 38rem; /* Wallpaper promo + Selected Work project rows (light mode) */ --widget-pill-bg: rgba(232, 229, 222, 0.82); --widget-pill-radius: 8px; --reveal-duration: 420ms; /* Theme switch: smooth canvas + text (not tied to reveal stagger). */ --theme-surface-duration: 1.05s; --theme-surface-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Work job title: between body and muted */ --work-job-title-color: var(--muted); --work-job-title-color: color-mix(in oklab, var(--ink) 42%, var(--muted) 58%); /* Profile mosaic cursor — SVG inlined (no extra file fetch / path issues) */ --cursor-mosaic-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2326251d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") 12 12; --cursor-mosaic-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e6e1db%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") 12 12; } /* Dark palette variants: - a: warm black (espresso/charcoal with warmth) - b: olive green-black - c: cool charcoal */ *, *::before, *::after { box-sizing: border-box; } /* Selected Work: toggle without commenting markup — see in index.html */ html[data-selected-work="off"] .selected-work { display: none !important; } /* Tighter Work → Connect when Selected Work is hidden (no middle section). */ html[data-selected-work="off"] .work { margin-bottom: var(--sp-6); } @media (min-width: 64em) { html[data-selected-work="off"] .page-right .connect { margin-top: 2rem; } } html { -webkit-text-size-adjust: 100%; background-color: var(--bg); transition: background-color var(--theme-surface-duration) var(--theme-surface-ease); } body { margin: 0; min-height: 100dvh; font-family: "DM Sans", system-ui, sans-serif; font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.35; color: var(--ink); background-color: var(--bg); transition: color var(--theme-surface-duration) var(--theme-surface-ease), background-color var(--theme-surface-duration) var(--theme-surface-ease); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .reveal { opacity: 0; transform: translateY(10px); transition-property: opacity, transform, color, background-color, border-top-color; transition-duration: var(--reveal-duration), var(--reveal-duration), 250ms, 250ms, 250ms; transition-timing-function: ease, ease, ease, ease, ease; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Theme toggle exit: fast, simultaneous (no stagger) + tight color (see themeChangeWithReveal). */ html.theme-exit-reveal .reveal { transition-duration: calc(var(--reveal-duration) / 16), calc(var(--reveal-duration) / 16), 60ms, 60ms, 60ms; transition-timing-function: ease-out, ease-out, ease, ease, ease; transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms; } .page { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 8vh, 5rem) var(--space) var(--space); min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 64em) { .page { max-width: 1160px; flex-direction: row; align-items: flex-start; justify-content: center; gap: 120px; padding-top: clamp(2.5rem, 8vh, 5rem); padding-bottom: clamp(2.5rem, 8vh, 5rem); } .page-left { width: 40%; max-width: 470px; flex-shrink: 0; position: sticky; top: var(--space); } .page-left .body { max-width: 420px; } .page-right { flex: 1; min-width: 0; margin-top: 12px; } .page-right .selected-work { margin-bottom: calc(3.5rem + 0.55rem); } .page-right .work { margin-top: 0; } .page-right .connect { margin-top: 2.5rem; } } /* Left column slightly dimmer when user has scrolled (optional) */ .page.is-scrolled .page-left { opacity: 0.97; transition: opacity 0.45s ease-in-out; } .header { margin-bottom: 2.15rem; } .profile-mark { width: clamp(150px, 27vw, 224px); aspect-ratio: 1 / 1; /* 50% (not 9999px) so border-radius → 0 interpolates smoothly in browsers */ border-radius: 50%; overflow: hidden; margin: 0 0 24px; background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-divider); /* Softer, longer when easing back to circle (exit — overlaps mosaic fade) */ transition: border-radius 0.48s cubic-bezier(0.2, 0.92, 0.26, 1); cursor: pointer; } /* Lucide layout-grid (2×2) as cursor — light UI */ .profile-mark:hover { cursor: var(--cursor-mosaic-light), pointer; } .profile-mark.is-mosaic-prime { border-radius: 0; /* Snappier squaring on entry */ transition: border-radius 0.32s cubic-bezier(0.18, 0.82, 0.2, 1); } .profile-mark__image { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; } /* Profile photo load polish (blur → sharp + fade); JS replays on theme change via `__kdReplayProfileMark`. Remove `.is-loaded` rules + profileImageReveal + theme hooks to revert. */ .profile-mark__image:not(.is-loaded) { opacity: 0; filter: blur(10px); transform: scale(1.03); } .profile-mark__image.is-loaded { opacity: 1; filter: blur(0); transform: scale(1); transition: opacity 0.5s ease-out, filter 0.55s ease-out, transform 0.55s cubic-bezier(0.2, 0.85, 0.3, 1); } /* Easter egg: full-screen photo mosaic (see profileMosaicEgg in index.html) */ .mosaic-overlay { position: fixed; inset: 0; z-index: 12; background-color: transparent; overflow: hidden; pointer-events: none; } .mosaic-overlay__grid { position: absolute; display: grid; width: max-content; height: max-content; justify-content: start; align-content: start; } .mosaic-tile { opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition-property: opacity; transition-timing-function: ease-out; will-change: opacity; } .mosaic-tile.mosaic-tile--on { opacity: 1; } .eyebrow { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); } .name { font-family: "DM Mono", ui-monospace, monospace; font-weight: 400; font-size: clamp(1.875rem, 5.5vw, 3rem); line-height: 1.2; letter-spacing: -0.04em; margin: 0 0 var(--sp-5); background-image: linear-gradient( 90deg, var(--name-g1) 0%, var(--name-g2) 35%, var(--name-g1) 70% ); background-size: 200% 100%; background-position: 0% 50%; color: transparent; -webkit-background-clip: text; background-clip: text; animation: aiGradientShift 4.6s ease-in-out infinite; } /* Slightly open up the tight “Donmo” cluster (rest of name keeps .name tracking) */ .name__donmo { letter-spacing: -0.012em; } /* Extra air only between n and m (pair kerning in DM Mono) */ .name__nm-kern { margin-left: 0.045em; } /* Extra air between m and o */ .name__mo-kern { margin-left: 0.045em; } .tagline { font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; font-style: italic; color: var(--muted); margin: 0 0 var(--sp-1); max-width: 32ch; line-height: 1.3; } .about { margin-bottom: var(--sp-8); } .about-primary { margin: 0 0 1.7rem; } .about-secondary { margin: 0; } /* Avoid lone words on the last line (About copy). `pretty` helps in supporting browsers. */ .about .about-primary, .about .about-secondary { text-wrap: pretty; } .work { margin-bottom: var(--sp-6); } .work-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.5rem; font-weight: 400; color: var(--ink); margin: 0 0 var(--sp-4); text-align: left; } .work-list { list-style: none; margin: 0; padding: 0; } .work-item { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.05rem 0; /* Hairline divider: inset box-shadow tends to feel more "premium" than borders. */ box-shadow: inset 0 1px 0 var(--card-divider); } .work-item:first-child { box-shadow: none; padding-top: 0; } .work-dates { flex-shrink: 0; width: 7rem; font-family: "DM Serif Display", Georgia, serif; font-size: 1rem; font-weight: 400; font-style: italic; color: var(--gold); opacity: 0.85; } .work-content { flex: 1; min-width: 0; max-width: 420px; } .work-role { font-family: "DM Mono", ui-monospace, monospace; font-size: 1.05rem; font-weight: 400; color: var(--ink); margin: 0 0 0.2rem; } .work-job-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.01em; color: var(--work-job-title-color); margin: 0 0 var(--sp-2); line-height: 1.35; } .work-desc { font-size: 1rem; font-weight: 400; color: var(--muted); margin: 0; line-height: 1.5; } .selected-work { /* Desktop .page-right: calc(3.5rem + 0.55rem). */ margin-bottom: calc(var(--sp-6) + 0.55rem); position: relative; } .selected-work-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.6rem; font-weight: 400; color: var(--ink); margin: 0 0 var(--sp-4); text-align: left; } .selected-work-group + .selected-work-group { margin-top: 2.25rem; /* bigger group break between theScore Bet and OANDA */ } .selected-work-company { font-family: "DM Mono", ui-monospace, monospace; font-size: 1.02rem; font-weight: 400; color: var(--gold); margin: 0 0 0.95rem; } .selected-work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } /* * Section-level CTA below Selected Work: clear top separation, no divider; * same horizontal inset as project pills. */ .selected-work-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem 1rem; margin: 32px 0 0; padding: 0.5rem 0.55rem; box-sizing: border-box; /* One typographic scale for the whole row */ font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9rem; line-height: 1.4; } .selected-work-footer__note { margin: 0; flex: 1; min-width: 0; font-size: 1em; font-weight: 400; line-height: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); opacity: 0.68; position: relative; top: -2px; } .selected-work-footer__actions { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 11px; flex-shrink: 0; font-size: 1em; line-height: inherit; } .selected-work-footer__mailto { font-size: 1em; font-weight: 350; line-height: inherit; white-space: nowrap; color: color-mix(in srgb, var(--muted) 46%, var(--ink) 54%); text-decoration: none; border-bottom: 1px solid transparent; opacity: 0.88; transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .selected-work-footer__mailto-arrow { display: inline-block; transition: transform 0.2s ease; } .selected-work-footer__mailto:hover { color: color-mix(in srgb, var(--muted) 28%, var(--ink) 72%); border-bottom-color: color-mix(in srgb, currentColor 24%, transparent); opacity: 1; } .selected-work-footer__mailto:hover .selected-work-footer__mailto-arrow { transform: translateX(2px); } .selected-work-footer__mailto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; border-bottom-color: transparent; opacity: 1; } .selected-work-footer__mailto:focus-visible .selected-work-footer__mailto-arrow { transform: none; } .selected-work-footer__copy { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.2rem 0.3rem 0.2rem 0; border: 0; border-radius: 4px; background: none; color: color-mix(in srgb, var(--muted) 84%, var(--ink) 16%); cursor: pointer; font-size: 1em; font-weight: 350; line-height: 1; position: relative; top: 0.06em; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; } .selected-work-footer__copy:hover { color: color-mix(in srgb, var(--muted) 50%, var(--ink) 50%); } .selected-work-footer__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Themed tooltip (replaces native title) */ .selected-work-footer__copy[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 7px); left: 50%; z-index: 25; padding: 0.32rem 0.55rem; font-family: "DM Sans", system-ui, sans-serif; font-size: 0.72rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; white-space: nowrap; color: var(--ink); background-color: var(--bg); border-radius: 6px; box-shadow: 0 2px 14px rgba(38, 37, 30, 0.1), 0 1px 4px rgba(38, 37, 30, 0.07); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(3px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .selected-work-footer__copy[data-tooltip]:hover::after, .selected-work-footer__copy[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .selected-work-footer__copy[data-tooltip].is-copied::after { opacity: 0 !important; visibility: hidden !important; } [data-theme="dark"] .selected-work-footer__copy[data-tooltip]::after { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.42), 0 1px 5px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .selected-work-footer__copy[data-tooltip]::after { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.42), 0 1px 5px rgba(0, 0, 0, 0.35); } } /* Fixed slot so SVG ↔ check swap never shifts layout */ .selected-work-footer__copy-slot { position: relative; width: 1.2em; height: 1.2em; flex-shrink: 0; } .selected-work-footer__copy-icon { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; pointer-events: none; } .selected-work-footer__copy-done { position: absolute; left: 0; top: 0; display: none; box-sizing: border-box; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: "DM Sans", system-ui, sans-serif; font-size: 1.08em; font-weight: 600; line-height: 1; color: var(--gold); } .selected-work-footer__copy.is-copied .selected-work-footer__copy-icon { visibility: hidden; } .selected-work-footer__copy.is-copied .selected-work-footer__copy-done { display: flex; } .selected-work-project { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.55rem; box-sizing: border-box; cursor: pointer; color: inherit; background-color: var(--widget-pill-bg); border-radius: var(--widget-pill-radius); } /* Don't use `transition:` shorthand on rows — it overrides .reveal opacity/transform. */ .selected-work-project.reveal { transition-property: opacity, transform, color, background-color, border-top-color; transition-duration: var(--reveal-duration), var(--reveal-duration), 250ms, var(--theme-surface-duration), 250ms; transition-timing-function: ease, ease, ease, var(--theme-surface-ease), ease; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms; } .selected-work-project:hover { background-color: var(--row-hover-bg); } .selected-work-name { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.95rem; font-weight: 400; color: var(--ink); } .selected-work-year { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8rem; font-weight: 400; color: var(--muted); opacity: 0.65; text-align: right; min-width: 5.6rem; } .selected-work-project:hover .selected-work-name, .selected-work-project:focus-visible .selected-work-name { color: var(--accent); } .selected-work-project:hover .selected-work-year, .selected-work-project:focus-visible .selected-work-year { color: var(--accent); } .selected-work-project:focus-visible { background-color: var(--row-hover-bg); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--widget-pill-radius); } /* Full-screen hover overlay (no real images yet) */ .selected-work-media { position: fixed; inset: 0; z-index: 9; opacity: 0; transition: opacity 220ms ease; pointer-events: none; background-color: var(--sw-media-bg, rgba(242, 241, 237, 0.75)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .selected-work-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 25% 35%, var(--sw-media-a, rgba(195, 166, 112, 0.08)), transparent 55% ), radial-gradient( circle at 70% 60%, var(--sw-media-b, rgba(45, 74, 62, 0.06)), transparent 58% ); } .selected-work-media.is-visible { opacity: 1; } [data-theme="dark"] .selected-work-media { --sw-media-bg: rgba(16, 16, 11, 0.68); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .selected-work-media { --sw-media-bg: rgba(16, 16, 11, 0.68); } } [data-theme="dark"] .selected-work-project { background-color: var(--card-bg); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .selected-work-project { background-color: var(--card-bg); } } .connect { margin-bottom: var(--sp-6); } .connect-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.4rem; font-weight: 400; color: var(--ink); margin: 0 0 var(--sp-3); text-align: left; } .connect-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 0.45rem 0; } .connect-row + .connect-row { box-shadow: inset 0 1px 0 var(--card-divider); } .connect-row--link { cursor: pointer; text-decoration: none; color: inherit; } .connect-row--link:hover, .connect-row--link:focus-visible { color: var(--accent); } .connect-row--link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .connect-label { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.73rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .connect-value { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.875rem; font-weight: 400; color: var(--ink); } /* —— Free mosaic wallpaper promo (below Connect) —— */ .wallpaper-promo { /* Collapsed: iPhone_Skewed_Slice.png + expanded Phone.png @2× — HTML width/height = layout (½ pixel size). */ --wallpaper-bar-h: 54px; /* iPhone_Skewed_Slice 128px tall @2× → 64px layout; pops above bar */ --wallpaper-teaser-img-h: 64px; /* Slot width ~½ slice bitmap width (178px @2× → 89px layout); cap keeps the pill compact */ --wallpaper-teaser-slot-w: min(76px, 20vw); margin-bottom: var(--sp-8); padding-top: calc( var(--wallpaper-teaser-img-h) - var(--wallpaper-bar-h) + 6px ); overflow: visible; } .wallpaper-promo__card { position: relative; background-color: var(--widget-pill-bg); border-radius: var(--widget-pill-radius); border: 0; box-shadow: none; padding: 0 0.65rem 0 0.35rem; min-height: var(--wallpaper-bar-h); height: var(--wallpaper-bar-h); box-sizing: border-box; overflow: visible; transition: padding 0.5s cubic-bezier(0.33, 1, 0.68, 1), background-color var(--theme-surface-duration) var(--theme-surface-ease); } .wallpaper-promo__card.is-expanded { min-height: 0; height: auto; max-height: min(70vh, 320px); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; border-radius: var(--widget-pill-radius); padding: 0.45rem 0.55rem 0.5rem; } /* Collapsed: full pill is one hit target. Negative top covers iPhone_Skewed_Slice sticking above the bar. */ .wallpaper-promo__expand-hit { position: absolute; top: calc( -1 * (var(--wallpaper-teaser-img-h) - var(--wallpaper-bar-h) + 6px) ); left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; color: inherit; -webkit-tap-highlight-color: transparent; } .wallpaper-promo__expand-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wallpaper-promo__card.is-expanded .wallpaper-promo__expand-hit { display: none; } .wallpaper-promo__top { display: flex; flex-direction: row; align-items: center; gap: 0.4rem 0.55rem; box-sizing: border-box; height: var(--wallpaper-bar-h); min-height: var(--wallpaper-bar-h); max-height: var(--wallpaper-bar-h); overflow: visible; } .wallpaper-promo__card.is-expanded .wallpaper-promo__top { height: auto; min-height: 0; max-height: none; } .wallpaper-promo__teaser-phone { position: relative; flex-shrink: 0; width: var(--wallpaper-teaser-slot-w); height: var(--wallpaper-bar-h); overflow: visible; margin: 0; align-self: center; background: transparent; } .wallpaper-promo__teaser-img { position: absolute; left: 50%; bottom: 0; transform: translateX(calc(-50% + 4px)); width: auto; height: var(--wallpaper-teaser-img-h); max-width: 100%; display: block; pointer-events: none; object-fit: contain; object-position: bottom center; background: transparent; } .wallpaper-promo__copy { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1.15; } /* Collapsed strip (normal width): nudge “Free” + headline right */ .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__copy { margin-left: 6px; } .wallpaper-promo__card.is-expanded .wallpaper-promo__copy { line-height: 1.28; padding-right: 2.75rem; } .wallpaper-promo__eyebrow { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0; line-height: 1.1; } .wallpaper-promo__card.is-expanded .wallpaper-promo__eyebrow { font-size: 0.55rem; margin: 0 0 0.08rem; letter-spacing: 0.12em; } .wallpaper-promo__title { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; } .wallpaper-promo__card.is-expanded .wallpaper-promo__title { font-size: 0.9rem; line-height: 1.22; } .wallpaper-promo__cta { flex-shrink: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: inherit; -webkit-tap-highlight-color: transparent; text-align: right; align-self: center; transition: color 0.2s ease; } /* Collapsed strip CTA: always “Download” (long span kept for flexibility / a11y hooks) */ .wallpaper-promo__cta-open-label--short { display: inline; } .wallpaper-promo__cta-open-label--long { display: none; } /* Closed “Download now” + expanded link — identical label styling */ .wallpaper-promo__cta--open, .wallpaper-promo__cta--download { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .wallpaper-promo__cta--download:hover, .wallpaper-promo__cta--download:focus-visible { color: var(--accent); } .wallpaper-promo__cta--download:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Hover anywhere on collapsed pill (hit layer is on top). */ .wallpaper-promo__card:not(.is-expanded):has(.wallpaper-promo__expand-hit:hover) .wallpaper-promo__cta--open { color: var(--accent); } a.wallpaper-promo__cta { text-decoration: none; display: inline-block; } .wallpaper-promo__card.is-expanded .wallpaper-promo__cta--open { display: none; } .wallpaper-promo__card.is-expanded .wallpaper-promo__teaser-phone { display: none; } .wallpaper-promo__card.is-expanded .wallpaper-promo__top { padding-bottom: 0.2rem; margin-bottom: 0.2rem; } /* Expand / collapse: height + fade + surface slide */ .wallpaper-promo__expandable { position: relative; max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; pointer-events: none; transition: max-height 0.5s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.24s cubic-bezier(0.33, 1, 0.68, 1), padding-top 0.5s cubic-bezier(0.33, 1, 0.68, 1); } .wallpaper-promo__card.is-expanded .wallpaper-promo__expandable { max-height: min(62vh, 20rem); opacity: 1; padding-top: 0.15rem; pointer-events: auto; overflow: hidden; overscroll-behavior: none; } .wallpaper-promo__expandable-surface { transform: translateY(10px); transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0ms; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } .wallpaper-promo__card.is-expanded .wallpaper-promo__expandable-surface { transform: translateY(0); transition-delay: 0.04s; } /* Card top-right when expanded (matches .is-expanded padding); not inside expandable panel */ .wallpaper-promo__close { position: absolute; top: 0.45rem; right: 0.55rem; z-index: 4; margin: 0; padding: 0.2rem 0.35rem; border: 0; background: transparent; font-family: "DM Mono", ui-monospace, monospace; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; } .wallpaper-promo__close:hover, .wallpaper-promo__close:focus-visible { color: var(--accent); } .wallpaper-promo__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__close { display: none; } .wallpaper-promo__expanded-inner { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); gap: 0.35rem 0.75rem; align-items: start; min-width: 0; } .wallpaper-promo__hero-phone { display: flex; justify-content: center; align-items: flex-start; padding: 0.1rem 0 0.15rem; padding-left: 6px; box-sizing: border-box; opacity: 0; transition: opacity 0.11s ease-out; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-phone { opacity: 1; transition: opacity 0.38s cubic-bezier(0.33, 1, 0.68, 1) 0.05s; } /* Expanded: Phone.png @2× (137×281) → layout 69×141; closed bar uses iPhone_Skewed_Slice.png */ .wallpaper-promo__hero-img { width: auto; height: auto; max-height: 118px; max-width: 100%; display: block; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(38, 37, 30, 0.1)); } .wallpaper-promo__controls { display: flex; flex-direction: column; gap: 0.32rem; padding-top: 0; padding-right: 1.85rem; min-width: 0; } /* Label stacked above segmented control / chips — full width for buttons */ .wallpaper-promo__controls-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; min-width: 0; } .wallpaper-promo__controls-row--devices { margin-top: 2px; } .wallpaper-promo__controls-label { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; /* Slightly darker than global --muted for Platform / Device labels */ color: color-mix(in srgb, var(--ink) 58%, var(--muted) 42%); margin: 0; white-space: nowrap; line-height: 1.2; } .wallpaper-promo__controls-label--device { margin-top: 0; } /* * Platform row: same DOM + classes as header theme pill (.theme-toggle / .theme-btn). * Lives outside .site-toggles; theme JS only touches .site-toggles .theme-btn. * Layout: stretch to full grid cell; equal-width text segments. */ .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { display: flex; position: relative; overflow: hidden; width: 100%; min-width: 0; background-color: transparent; box-shadow: inset 0 0 0 1px var(--card-divider); } /* Sliding fill behind the active segment (position/size set in JS) */ .wallpaper-promo__segment-thumb { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 9999px; background-color: rgba(38, 37, 30, 0.26); pointer-events: none; z-index: 0; transition: left 0.32s cubic-bezier(0.33, 1, 0.68, 1), top 0.32s cubic-bezier(0.33, 1, 0.68, 1), width 0.32s cubic-bezier(0.33, 1, 0.68, 1), height 0.32s cubic-bezier(0.33, 1, 0.68, 1); } [data-theme="dark"] .wallpaper-promo__segment-thumb { background-color: rgba(230, 225, 215, 0.46); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-promo__segment-thumb { background-color: rgba(230, 225, 215, 0.46); } } @media (prefers-reduced-motion: reduce) { .wallpaper-promo__segment-thumb { transition: none; } } /* During panel open, thumb tracks layout without its own width/height animation (JS toggles). */ .wallpaper-promo__segment-thumb.wallpaper-promo__segment-thumb--no-transition { transition: none !important; } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn { flex: 1 1 0; min-width: 0; position: relative; z-index: 1; font-size: 0.6875rem; font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } /* Device row: full width + tight gap (matches platform control spacing; no outer track fill) */ .wallpaper-promo__device-chips { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: stretch; gap: 0.125rem; width: 100%; min-width: 0; box-sizing: border-box; } .wallpaper-promo__device-chip { flex: 1 1 0; min-width: 0; margin: 0; padding: 0.28rem 0.5rem; border: 0; border-radius: 9999px; box-sizing: border-box; min-height: 26px; font-family: "DM Mono", ui-monospace, monospace; font-size: 0.56rem; font-weight: 500; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* Unselected: outline chip */ .wallpaper-promo__device-chip[aria-pressed="false"] { background-color: transparent; color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%); box-shadow: inset 0 0 0 1px var(--card-divider); } .wallpaper-promo__device-chip[aria-pressed="false"]:hover { background-color: var(--row-hover-bg); color: var(--ink); } .wallpaper-promo__device-chip[aria-pressed="false"]:active { background-color: var(--row-hover-bg); } /* Selected: matches platform segment fill (no outer track tint on platform row). */ .wallpaper-promo__device-chip[aria-pressed="true"] { background-color: rgba(38, 37, 30, 0.26); color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); box-shadow: none; } [data-theme="dark"] .wallpaper-promo__device-chip[aria-pressed="true"] { background-color: rgba(230, 225, 215, 0.46); color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-promo__device-chip[aria-pressed="true"] { background-color: rgba(230, 225, 215, 0.46); color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); } } .wallpaper-promo__device-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Platform segmented control: inner chips — mirror device pill hover/selected */ .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:hover:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } /* Selected segment: fill comes from .wallpaper-promo__segment-thumb */ .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: transparent; color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:hover:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: transparent; color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:hover:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: var(--row-hover-bg); color: var(--ink); } html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: transparent; color: color-mix(in srgb, var(--ink) 82%, var(--theme-pill-icon) 18%); } } .wallpaper-promo__expand-footer { margin-top: calc(0.35rem + 14px); margin-right: -8px; display: flex; justify-content: flex-end; } .wallpaper-promo__cta--download { cursor: pointer; } /* Expanded only: larger mono label, pill (ink fill / bg text), lift footer from bottom */ .wallpaper-promo__card.is-expanded .wallpaper-promo__cta--download { font-size: calc(0.7rem + 3pt); display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.4rem 1rem; box-sizing: border-box; border-radius: 9999px; background-color: var(--ink); color: var(--bg); transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease; } .wallpaper-promo__card.is-expanded .wallpaper-promo__download-label { color: inherit; } .wallpaper-promo__card.is-expanded .wallpaper-promo__cta--download:hover { color: var(--bg); filter: brightness(1.12); } .wallpaper-promo__card.is-expanded .wallpaper-promo__cta--download:focus-visible { color: var(--bg); outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 9999px; } .wallpaper-promo__card.is-expanded .wallpaper-promo__expand-footer { margin-bottom: 14px; } /* Desktop / wide: full CTA copy in expanded panel */ .wallpaper-promo__download-label--short { display: none; } .wallpaper-promo__download-label--long { display: inline; } /* Desktop / tablet: collapsed strip — larger skew, nudge image + copy right, type scale, line gap */ @media (min-width: 36.0625em) { .wallpaper-promo { --wallpaper-teaser-img-h: 66px; --wallpaper-teaser-slot-w: min(80px, 21vw); } .wallpaper-promo__card:not(.is-expanded) { padding-right: calc(0.65rem + 5px); } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__teaser-img { transform: translateX(calc(-50% + 9px)); max-width: none; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__copy { margin-left: 12px; gap: 4px; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__eyebrow { font-size: 0.63rem; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__title { font-size: 1rem; line-height: 1.18; } /* Expanded: ~+64px overall cap, Free/Grab match collapsed type, bigger Phone.png */ .wallpaper-promo__card.is-expanded { max-height: min(75vh, 384px); } .wallpaper-promo__card.is-expanded .wallpaper-promo__expandable { max-height: min(70vh, calc(20rem + 64px)); } .wallpaper-promo__card.is-expanded .wallpaper-promo__copy { gap: 4px; } .wallpaper-promo__card.is-expanded .wallpaper-promo__eyebrow { font-size: 0.63rem; } .wallpaper-promo__card.is-expanded .wallpaper-promo__title { font-size: 1rem; line-height: 1.18; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-img { max-height: 198px; } /* Expanded: fill vertical space — stretch grid row, tall controls like mobile, footer to bottom */ .wallpaper-promo__card.is-expanded .wallpaper-promo__expanded-inner { align-items: stretch; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-phone { justify-content: center; align-items: center; align-self: stretch; min-height: 0; } .wallpaper-promo__card.is-expanded .wallpaper-promo__controls { gap: 0.42rem; min-height: 0; height: 100%; align-self: stretch; } .wallpaper-promo__card.is-expanded .wallpaper-promo__controls-row { gap: 0.26rem; } .wallpaper-promo__card.is-expanded .wallpaper-promo__controls-row--devices { margin-top: 4px; } .wallpaper-promo__card.is-expanded .wallpaper-promo__expand-footer { margin-top: auto; padding-top: 0.5rem; } .wallpaper-promo__card.is-expanded .wallpaper-promo__theme-inline.theme-toggle { height: auto; min-height: 40px; max-height: none; } .wallpaper-promo__card.is-expanded .wallpaper-promo__theme-inline .theme-btn { font-size: 0.62rem; font-weight: 500; min-height: 40px; height: auto; padding: 0 0.28rem; min-width: 0; white-space: nowrap; } .wallpaper-promo__card.is-expanded .wallpaper-promo__device-chip { font-size: 0.52rem; font-weight: 500; padding: 0.45rem 0.42rem; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 36em) { /* Collapsed strip + teaser: compact mobile (vars drive bar, teaser pop, hit target) */ .wallpaper-promo { /* +12px vs previous 30px — taller collapsed bar on small screens */ --wallpaper-bar-h: 42px; --wallpaper-teaser-img-h: 48px; --wallpaper-teaser-slot-w: min(44px, 12vw); margin-bottom: var(--sp-5); } .wallpaper-promo__card.is-expanded { max-height: min(88dvh, 480px); } .wallpaper-promo__card.is-expanded .wallpaper-promo__expandable { max-height: min(78dvh, 28rem); } .wallpaper-promo__card:not(.is-expanded) { padding-right: 0.32rem; padding-left: 0.18rem; border-radius: 5px; } .selected-work-project, .selected-work-project:focus-visible { border-radius: 5px; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__top { flex-wrap: nowrap; gap: 0.16rem 0.24rem; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__copy { margin-left: 16px; min-width: 0; gap: 0.12rem; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__eyebrow { font-size: 0.5rem; letter-spacing: 0.09em; transform: translateY(-0.5px); } /* Headline: readable size + wrap (no single-line ellipsis cutting “edition…”) */ .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__title { font-size: 0.68rem; font-weight: 400; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: unset; hyphens: auto; -webkit-hyphens: auto; } /* * Collapsed teaser: same pop-out as desktop — narrow slot + max-width:100% was * shrinking the bitmap so it sat inside the bar; allow natural width + no scale. */ .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__teaser-phone { overflow: visible; margin-left: 10px; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__teaser-img { max-width: none; transform: translateX(calc(-50% + 4px)); } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__cta--open { flex-shrink: 0; font-size: 0.48rem; letter-spacing: 0.035em; transform: translateX(-2px); } /* Short download label in expanded footer */ .wallpaper-promo__download-label--short { display: inline; } .wallpaper-promo__download-label--long { display: none; } /* * Mobile expanded: larger Phone; 8px gutter to controls (right padding only — card/grid handles left inset). */ .wallpaper-promo__card.is-expanded .wallpaper-promo__expanded-inner { grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr); gap: 0.28rem 0; align-items: start; overflow: hidden; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-phone { padding: 0.12rem 8px 0.12rem 0; box-sizing: border-box; justify-content: center; align-items: flex-start; overflow: hidden; max-width: none; margin-left: 0; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-img { /* auto width/height preserve intrinsic ~69×141 aspect ratio; only the long edge is capped */ max-height: min(44vw, 167px); max-width: 100%; width: auto; height: auto; margin: 0; margin-left: 0; transform: none; object-position: center center; } .wallpaper-promo__controls { padding-right: 0; min-width: 0; gap: 0.36rem; } .wallpaper-promo__controls-row { gap: 0.24rem; } .wallpaper-promo__controls-label { font-size: 0.52rem; letter-spacing: 0.07em; } .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { height: auto; min-height: 40px; max-height: none; } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn { font-size: 0.62rem; font-weight: 500; min-height: 40px; height: auto; padding: 0 0.28rem; min-width: 0; white-space: nowrap; } .wallpaper-promo__device-chips { flex-wrap: nowrap; justify-content: stretch; gap: 0.125rem; overflow: hidden; margin: 0; } .wallpaper-promo__device-chip { flex: 1 1 0; font-size: 0.52rem; font-weight: 500; padding: 0.45rem 0.42rem; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .wallpaper-promo__expand-footer { margin-right: 0; margin-top: calc(0.3rem + 10px); width: 100%; min-width: 0; justify-content: flex-end; } .wallpaper-promo__cta--download { max-width: 100%; white-space: nowrap; } } [data-theme="dark"] .wallpaper-promo__card { background-color: var(--card-bg); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-promo__card { background-color: var(--card-bg); } } @media (prefers-reduced-motion: reduce) { .wallpaper-promo__card { transition: none; } .wallpaper-promo__expandable, .wallpaper-promo__expandable-surface, .wallpaper-promo__hero-phone { transition: none !important; } } .body { margin: 0; color: var(--ink); font-weight: 400; } .body-emph { font-family: "DM Serif Display", Georgia, serif; font-style: italic; } .links { margin-bottom: var(--sp-8); } .link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); } .link-list a { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.9375rem; font-weight: 500; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .link-list a:hover, .link-list a:focus-visible { border-bottom-color: currentColor; outline: none; } .link-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .footer { margin-top: auto; padding-top: var(--sp-4); } .mono-note { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.8125rem; color: var(--muted); margin: 0; } /* Toggles — theme + font (for testing) */ .site-toggles { position: fixed; top: max(var(--space), env(safe-area-inset-top, 0px)); right: max(var(--space), env(safe-area-inset-right, 0px)); z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); } /* Integrated pill — soft tint, no border; selection = inner chip (Cursor-like) */ .theme-toggle { display: inline-flex; align-items: stretch; gap: 0.125rem; padding: 1px; /* 1px gap between pill edge and selected chip */ border: none; border-radius: 9999px; background-color: var(--theme-pill-bg); box-shadow: none; height: 25px; box-sizing: border-box; } .theme-btn { flex: 0 0 auto; min-width: 2.15rem; height: 23px; /* 25px container - 1px top/bottom padding */ display: flex; align-items: center; justify-content: center; padding: 0 0.35rem; color: var(--theme-pill-icon); background: transparent; border: 0; border-radius: 9999px; /* fully rounded selection "chip" */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; } .theme-btn svg { width: 15px; height: 15px; display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; shape-rendering: geometricPrecision; } .theme-btn:hover:not([aria-pressed="true"]) { color: var(--theme-pill-icon); background-color: var(--theme-pill-hover); } /* * Desktop-only: boost unselected moon contrast on *light* UIs only. * Do not use html:not([data-theme="dark"]) — in System mode that is true even when OS is dark * (no data-theme attr), which forced light ink on a dark pill and hid the moon. */ @media (min-width: 48.01em) { html[data-theme="light"] .theme-btn[data-theme="dark"][aria-pressed="false"] { color: rgba(38, 37, 30, 0.56) !important; /* match unselected System icon */ } html[data-theme="light"] .theme-btn[data-theme="dark"][aria-pressed="false"] svg { opacity: 1; stroke-width: 1.5; stroke-opacity: 1; } } @media (min-width: 48.01em) and (prefers-color-scheme: light) { html:not([data-theme]) .theme-btn[data-theme="dark"][aria-pressed="false"] { color: rgba(38, 37, 30, 0.56) !important; } html:not([data-theme]) .theme-btn[data-theme="dark"][aria-pressed="false"] svg { opacity: 1; stroke-width: 1.5; stroke-opacity: 1; } } .theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-btn[aria-pressed="true"] { color: var(--theme-pill-icon); background-color: var(--theme-pill-active); } .theme-btn:active:not([aria-pressed="true"]) { background-color: var(--theme-pill-hover); } /* Mobile: single icon in same pill treatment (light ↔ dark) */ .theme-toggle-simple { position: relative; display: none; box-sizing: border-box; min-width: 25px; min-height: 25px; padding: 0; margin: 0; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background-color: var(--theme-pill-bg); color: var(--theme-pill-icon); cursor: pointer; opacity: 1; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; } .theme-toggle-simple:hover { color: var(--theme-pill-icon); background-color: var(--theme-pill-hover); } .theme-toggle-simple:active { background-color: var(--theme-pill-active); } .theme-toggle-simple:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle-simple__sun, .theme-toggle-simple__moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.38s ease, transform 0.38s ease; } .theme-toggle-simple svg { width: 15px; height: 15px; display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; shape-rendering: geometricPrecision; } /* Light appearance: show moon (tap → dark) */ .theme-toggle-simple__sun { opacity: 0.35; /* keep inactive icon visible */ transform: scale(0.92); } .theme-toggle-simple__moon { opacity: 1; transform: scale(1); } .theme-toggle-simple.effective-is-dark .theme-toggle-simple__sun { opacity: 1; transform: scale(1); } .theme-toggle-simple.effective-is-dark .theme-toggle-simple__moon { opacity: 0.35; /* keep inactive icon visible */ transform: scale(0.92); } @media (max-width: 48em) { .site-toggles { align-items: flex-end; margin: 0; width: auto; } .theme-toggle-desktop { display: none; } .theme-toggle-simple { display: flex; } /* Mobile-only polish: opacity crossfade only (no scale). */ .theme-toggle-simple__sun, .theme-toggle-simple__moon { transition: opacity 0.38s ease; transform: scale(1); } /* Mobile-only: inactive icon should be hidden (no faint "other" icon). */ .theme-toggle-simple__sun { opacity: 0; transform: scale(1); } .theme-toggle-simple__moon { opacity: 1; transform: scale(1); } .theme-toggle-simple.effective-is-dark .theme-toggle-simple__sun { opacity: 1; transform: scale(1); } .theme-toggle-simple.effective-is-dark .theme-toggle-simple__moon { opacity: 0; transform: scale(1); } } /* Dark mode: user toggle takes precedence; otherwise system preference */ [data-theme="dark"] { /* Default: Option C — Charcoal */ --bg: #10100b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(205, 190, 145, 0.05); --card-divider: rgba(205, 190, 145, 0.12); --row-hover-bg: rgba(205, 190, 145, 0.07); --name-g1: #9a7b2b; --name-g2: #decf7e; --theme-pill-bg: rgba(230, 225, 215, 0.08); --theme-pill-active: rgba(230, 225, 215, 0.14); --theme-pill-hover: rgba(230, 225, 215, 0.11); /* Match system dark (0.52) so sun / monitor / moon read the same */ --theme-pill-icon: rgba(230, 225, 215, 0.52); } [data-theme="dark"] .work-dates { opacity: 0.75; } [data-theme="dark"] .profile-mark:hover { cursor: var(--cursor-mosaic-dark), pointer; } [data-theme="dark"][data-dark-variant="a"] { /* Option A — Warm black (kept for reference) */ --bg: #16110b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(195, 149, 96, 0.06); --card-divider: rgba(195, 149, 96, 0.16); --row-hover-bg: rgba(195, 149, 96, 0.08); --name-g1: #c08a2a; --name-g2: #e8d07a; } [data-theme="dark"][data-dark-variant="b"] { /* Option B — Olive / green-black */ --bg: #0f1a12; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(139, 181, 136, 0.06); --card-divider: rgba(139, 181, 136, 0.14); --row-hover-bg: rgba(139, 181, 136, 0.09); --name-g1: #9c7a2d; --name-g2: #e6d48a; } [data-theme="dark"][data-dark-variant="c"] { /* Option C — Cool charcoal */ --bg: #10100b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(205, 190, 145, 0.05); --card-divider: rgba(205, 190, 145, 0.12); --row-hover-bg: rgba(205, 190, 145, 0.07); --name-g1: #9a7b2b; --name-g2: #decf7e; } @media (prefers-color-scheme: dark) { html:not([data-theme]) { /* Default to Option C when using system dark */ --bg: #10100b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(205, 190, 145, 0.05); --card-divider: rgba(205, 190, 145, 0.12); --row-hover-bg: rgba(205, 190, 145, 0.07); --name-g1: #9a7b2b; --name-g2: #decf7e; --theme-pill-bg: rgba(230, 225, 215, 0.08); --theme-pill-active: rgba(230, 225, 215, 0.14); --theme-pill-hover: rgba(230, 225, 215, 0.11); --theme-pill-icon: rgba(230, 225, 215, 0.52); } html:not([data-theme]) .work-dates { opacity: 0.75; } html:not([data-theme]) .profile-mark:hover { cursor: var(--cursor-mosaic-dark), pointer; } html:not([data-theme])[data-dark-variant="a"] { /* Option A — Warm black (kept for reference) */ --bg: #16110b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(195, 149, 96, 0.06); --card-divider: rgba(195, 149, 96, 0.16); --row-hover-bg: rgba(195, 149, 96, 0.08); --name-g1: #c08a2a; --name-g2: #e8d07a; } html:not([data-theme])[data-dark-variant="b"] { --bg: #0f1a12; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(139, 181, 136, 0.06); --card-divider: rgba(139, 181, 136, 0.14); --row-hover-bg: rgba(139, 181, 136, 0.09); --name-g1: #9c7a2d; --name-g2: #e6d48a; } html:not([data-theme])[data-dark-variant="c"] { --bg: #10100b; --ink: #E6E1DB; --muted: #9E988F; --accent: #8fb5a3; --card-bg: rgba(205, 190, 145, 0.05); --card-divider: rgba(205, 190, 145, 0.12); --row-hover-bg: rgba(205, 190, 145, 0.07); --name-g1: #9a7b2b; --name-g2: #decf7e; } } @media (prefers-reduced-motion: reduce) { html { transition: none; } body { transition: none; } .name { animation: none; background-position: 50% 50%; } .reveal { transform: none; transition: opacity 250ms ease; } .selected-work-project.reveal { transform: none; transition: opacity 250ms ease, background-color var(--theme-surface-duration) var(--theme-surface-ease); } .reveal.is-visible { transform: none; } .connect-row + .connect-row, .connect-row--link { transition: none; } .eyebrow, .tagline, .connect-title, .connect-label, .connect-value, .body, .mono-note { transition: none; } /* Footer copyright uses .reveal — allow opacity fade (overrides .mono-note above). */ .reveal.mono-note { transition: opacity 250ms ease; } .theme-toggle-simple, .theme-toggle-simple__sun, .theme-toggle-simple__moon { transition: none; } .profile-mark { transition: none; } .profile-mark__image:not(.is-loaded), .profile-mark__image.is-loaded { opacity: 1; filter: none; transform: none; transition: none; } .selected-work-media { transition: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .mosaic-tile { transition: none !important; } .wallpaper-download-dialog__btn { transition: none; } .wallpaper-download-dialog__phone { transform: rotate(0deg) scale(0.96); filter: drop-shadow(0 6px 24px rgba(38, 37, 30, 0.1)); } .selected-work-footer__mailto:hover .selected-work-footer__mailto-arrow { transform: none; } .selected-work-footer__copy[data-tooltip]::after { transition: none; transform: translateX(-50%); } } /* Wallpaper download — themed confirm dialog */ html.wallpaper-download-dialog-is-open body { overflow: hidden; } .wallpaper-download-dialog { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: max(var(--space), env(safe-area-inset-top, 0px)) max(var(--space), env(safe-area-inset-right, 0px)) max(var(--space), env(safe-area-inset-bottom, 0px)) max(var(--space), env(safe-area-inset-left, 0px)); box-sizing: border-box; pointer-events: none; overflow: visible; } .wallpaper-download-dialog[hidden] { display: none !important; } .wallpaper-download-dialog__backdrop { position: absolute; inset: 0; z-index: 0; background-color: var(--bg); /* Scrim only — page shows through; dialog panel stays fully opaque */ opacity: 0.72; pointer-events: auto; -webkit-tap-highlight-color: transparent; } /* * Mockup: phone mostly on the card; ~12–16px peeks past top + left rounded edge; * buttons sit under the copy, right-aligned (not full-bleed). */ .wallpaper-download-dialog__panel { position: relative; z-index: 1; width: 100%; max-width: min(27.5rem, calc(100vw - 2rem)); margin: auto; --wd-pad-left: 1.5rem; --wd-pad-top: 1.5rem; --wd-peek: 14px; padding: var(--wd-pad-top) 1.65rem 1.65rem var(--wd-pad-left); box-sizing: border-box; border-radius: clamp(2rem, 5vw, 2.5rem); /* Solid fill — not var(--widget-pill-bg), which is translucent */ background-color: rgb(232, 229, 222); box-shadow: 0 28px 70px rgba(38, 37, 30, 0.08), 0 10px 28px rgba(38, 37, 30, 0.07); pointer-events: auto; outline: none; overflow: visible; } .wallpaper-download-dialog__layout { display: grid; grid-template-columns: 7.35rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 0; align-items: start; } .wallpaper-download-dialog__phone-wrap { grid-column: 1; grid-row: 1 / -1; align-self: start; width: 100%; max-width: 7.35rem; margin-left: calc(-1 * var(--wd-pad-left) - var(--wd-peek)); margin-top: calc(-1 * var(--wd-pad-top) - var(--wd-peek)); pointer-events: none; } .wallpaper-download-dialog__main { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 0.35rem; } [data-theme="dark"] .wallpaper-download-dialog__panel { /* Solid surface — not var(--card-bg), which is translucent on the page */ background-color: color-mix(in srgb, var(--bg) 82%, var(--ink) 18%); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.38), 0 12px 36px rgba(0, 0, 0, 0.26); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-download-dialog__panel { background-color: color-mix(in srgb, var(--bg) 82%, var(--ink) 18%); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.38), 0 12px 36px rgba(0, 0, 0, 0.26); } } .wallpaper-download-dialog__phone { width: 100%; height: auto; display: block; /* Mockup: subtle CCW tilt (~8°), nearly full size */ transform: rotate(-8deg) scale(1); transform-origin: 45% 35%; filter: drop-shadow(0 8px 28px rgba(38, 37, 30, 0.14)) drop-shadow(0 18px 44px rgba(38, 37, 30, 0.07)); } [data-theme="dark"] .wallpaper-download-dialog__phone { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 14px 36px rgba(0, 0, 0, 0.08)); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-download-dialog__phone { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 14px 36px rgba(0, 0, 0, 0.08)); } } .wallpaper-download-dialog__title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.28rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--sp-3); } .wallpaper-download-dialog__body { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.02rem; font-weight: 400; line-height: 1.5; color: var(--muted); margin: 0; } .wallpaper-download-dialog__actions { grid-column: 2; grid-row: 2; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--sp-3); width: 100%; margin-top: 1.35rem; } @media (max-width: 22.5rem) { .wallpaper-download-dialog__layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: stretch; } .wallpaper-download-dialog__phone-wrap { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; margin-left: 0; margin-top: calc(-1 * var(--wd-pad-top)); max-width: 6.25rem; } .wallpaper-download-dialog__main { grid-column: 1; grid-row: 2; padding-top: 0; } .wallpaper-download-dialog__actions { grid-column: 1; grid-row: 3; justify-content: stretch; margin-top: var(--sp-4); } .wallpaper-download-dialog__actions .wallpaper-download-dialog__btn { flex: 1 1 0; min-width: 0; } } .wallpaper-download-dialog__btn { font-family: "DM Sans", system-ui, sans-serif; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; min-height: 44px; flex: 0 1 auto; min-width: 0; width: auto; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0.65rem 1.15rem; border-radius: 9999px; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .wallpaper-download-dialog__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wallpaper-download-dialog__btn--primary { background-color: var(--ink); color: var(--bg); } .wallpaper-download-dialog__btn--primary:hover { filter: brightness(1.06); } .wallpaper-download-dialog__btn--secondary { background-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--card-divider); } .wallpaper-download-dialog__btn--secondary:hover { background-color: color-mix(in srgb, var(--ink) 6%, transparent); } @keyframes aiGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }