/* 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; --reveal-duration: 700ms; /* 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%); } /* 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 .work { margin-top: 0; } .page-right .connect { margin-top: 80px; } } /* 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: url("mosaic-cursor-light.svg") 12 12, 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; } /* 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: 500; 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; } .work { margin-bottom: var(--sp-8); } .work-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.5rem; font-weight: 500; 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: 500; 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: 500; 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 { margin-bottom: var(--sp-8); position: relative; } .selected-work-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.6rem; font-weight: 500; 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: 500; color: var(--gold); margin: 0 0 0.95rem; } .selected-work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .selected-work-project { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; cursor: pointer; color: inherit; } .selected-work-project + .selected-work-project { box-shadow: inset 0 1px 0 var(--card-divider); } .selected-work-name { font-family: "DM Sans", system-ui, sans-serif; font-size: 1.02rem; font-weight: 500; color: var(--ink); } .selected-work-year { font-family: "DM Mono", ui-monospace, monospace; font-size: 0.88rem; font-weight: 400; color: var(--muted); opacity: 0.72; 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 { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; } /* 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); } } .connect { margin-bottom: var(--sp-4); } .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: 42px; /* 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: rgba(232, 229, 222, 0.82); border-radius: 8px; 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: 200px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; padding: 0.45rem 0.55rem 0.5rem; } /* Collapsed: full pill is one hit target. Negative top covers iPhone_Skewed_Slice sticking above the 42px 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; } .wallpaper-promo__card.is-expanded .wallpaper-promo__copy { line-height: 1.28; } .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: 500; 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; } /* 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; } .wallpaper-promo__card.is-expanded .wallpaper-promo__copy { padding-right: 2.75rem; } /* Expand / collapse: height + fade (reveal-style motion on inner surface) */ .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: 14rem; opacity: 1; padding-top: 0.15rem; pointer-events: auto; } .wallpaper-promo__expandable-surface { transform: translateY(10px); transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0ms; } .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: center; min-width: 0; } .wallpaper-promo__hero-phone { display: flex; justify-content: center; align-items: center; padding: 0.1rem 0 0.15rem; 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.22rem; padding-top: 0; padding-right: 1.85rem; min-width: 0; } .wallpaper-promo__controls-row { display: grid; grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr); gap: 0.35rem 0.5rem; align-items: center; min-width: 0; } .wallpaper-promo__controls-row--devices { margin-top: 4px; } .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; } .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; width: 100%; min-width: 0; } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn { flex: 1 1 0; min-width: 0; 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: choice chips (not the platform segmented control) */ .wallpaper-promo__device-chips { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 0.4rem; width: 100%; min-width: 0; } .wallpaper-promo__device-chip { flex: 1 1 0; min-width: 0; margin: 0; padding: 0.28rem 0.35rem; 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: same fill + label as platform segmented control inner chip */ .wallpaper-promo__device-chip[aria-pressed="true"] { background-color: rgba(38, 37, 30, 0.16); 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.34); 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.34); 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 row only: slightly darker pill track than header theme toggle */ .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { background-color: rgba(38, 37, 30, 0.1); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { background-color: rgba(230, 225, 215, 0.14); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { background-color: rgba(230, 225, 215, 0.14); } } /* Platform segmented control only: stronger hover/selected chips (header uses global --theme-pill-*) */ .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:hover:not([aria-pressed="true"]) { background-color: rgba(38, 37, 30, 0.08); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: rgba(38, 37, 30, 0.08); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: rgba(38, 37, 30, 0.16); 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: rgba(230, 225, 215, 0.2); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: rgba(230, 225, 215, 0.2); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } [data-theme="dark"] .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: rgba(230, 225, 215, 0.34); 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: rgba(230, 225, 215, 0.2); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn:active:not([aria-pressed="true"]) { background-color: rgba(230, 225, 215, 0.2); color: color-mix(in srgb, var(--ink) 72%, var(--theme-pill-icon) 28%); } html:not([data-theme]) .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn[aria-pressed="true"] { background-color: rgba(230, 225, 215, 0.34); 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; } /* Desktop / wide: full CTA copy in expanded panel */ .wallpaper-promo__download-label--short { display: none; } .wallpaper-promo__download-label--long { display: inline; } @media (max-width: 36em) { /* Collapsed strip + teaser: compact mobile (vars drive bar, teaser pop, hit target) */ .wallpaper-promo { --wallpaper-bar-h: 30px; --wallpaper-teaser-img-h: 42px; --wallpaper-teaser-slot-w: min(40px, 11vw); margin-bottom: var(--sp-5); } .wallpaper-promo__card:not(.is-expanded) { padding-right: 0.32rem; padding-left: 0.18rem; border-radius: 5px; } .wallpaper-promo__card:not(.is-expanded) .wallpaper-promo__top { flex-wrap: nowrap; gap: 0.16rem 0.24rem; } /* Shift headline right — collapsed bar only (expanded header stays default alignment) */ .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.4rem; 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.65rem; font-weight: 500; 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; } /* Short download label in expanded footer */ .wallpaper-promo__download-label--short { display: inline; } .wallpaper-promo__download-label--long { display: none; } /* Keep hero phone in a narrow left column; controls + pills shrink */ .wallpaper-promo__expanded-inner { grid-template-columns: minmax(0, 3.2rem) minmax(0, 1fr); gap: 0.18rem 0.32rem; align-items: start; } .wallpaper-promo__hero-phone { padding: 0.1rem 0 0.08rem; justify-content: flex-start; } .wallpaper-promo__hero-img { max-height: 74px; margin: 0 auto 0 0; } .wallpaper-promo__card.is-expanded .wallpaper-promo__hero-img { margin-left: 4px; } .wallpaper-promo__controls { padding-right: 0; min-width: 0; } .wallpaper-promo__controls-row { grid-template-columns: minmax(2.35rem, auto) minmax(0, 1fr); gap: 0.22rem 0.3rem; } .wallpaper-promo__controls-label { font-size: 0.5rem; letter-spacing: 0.07em; } .wallpaper-promo .wallpaper-promo__theme-inline.theme-toggle { height: auto; min-height: 22px; max-height: 22px; } .wallpaper-promo .wallpaper-promo__theme-inline .theme-btn { font-size: 0.58rem; font-weight: 500; height: 20px; min-height: 20px; padding: 0 0.2rem; min-width: 0; } .wallpaper-promo__device-chips { gap: 0.25rem; } .wallpaper-promo__device-chip { font-size: 0.45rem; font-weight: 500; padding: 0.18rem 0.2rem; min-height: 21px; } .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: url("mosaic-cursor-dark.svg") 12 12, 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: url("mosaic-cursor-dark.svg") 12 12, 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; } .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; } .selected-work-media { transition: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .mosaic-tile { transition: none !important; } } @keyframes aiGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }