/* ========================================================================== AkhilJ.ca — v3.css (Version 3 design language) Currently applied to the Homepage and Work page only, via . About / Contact / project pages still use the Version 2 look until they are migrated. Direction: quiet confidence with strong visual moments. Warm ivory paper + stone bands + near-black moments, one muted wine accent, Instrument Sans throughout, image-led project canvases, tighter rhythm (no empty viewports), slow and precise motion. ========================================================================== */ /* ---------- Tokens (override the V2 tokens inside .v3 only) ---------- */ .v3 { --paper: #F4F1EC; --stone: #EAE4DA; --paper-2: var(--stone); --surface: #FBF9F6; --smoke: #C2BAAE; --ink: #181715; --ink-2: #3A3733; --muted: #645F58; --line: rgba(24, 23, 21, 0.13); --line-strong: rgba(24, 23, 21, 0.3); --accent: #7A3138; --accent-deep: #5E242A; --dark: #141311; --on-dark: #F4F1EC; --on-dark-muted: rgba(244, 241, 236, 0.64); --line-dark: rgba(244, 241, 236, 0.16); --font-display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --gap: clamp(16px, 2vw, 32px); --section-y: clamp(88px, 9vw, 140px); font-feature-settings: normal; } .v3 h1, .v3 h2, .v3 h3, .v3 h4, .v3 .display { font-weight: 400; letter-spacing: -0.03em; } .v3 .site-header::before { background: rgba(244, 241, 236, 0.92); } .v3 em { font-style: italic; } .v3 .grid-12 { column-gap: var(--gap); } .section3 { padding-block: var(--section-y); } /* Section heads: title left, supporting note right */ .head3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); } .head3 .kicker { margin-bottom: 20px; } .head3__title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 15ch; } .head3__aside p, .head3__aside--text { font-size: var(--fs-sm); color: var(--ink-2); max-width: 36ch; line-height: 1.6; } .head3__aside .arrow-link { margin-top: 10px; } /* ========================================================================== HERO ========================================================================== */ .hero3 { padding: clamp(20px, 2.5vw, 36px) 0 clamp(72px, 8vw, 120px); } .hero3__meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); } .hero3__meta span:last-child { text-align: right; } .hero3__grid { margin-top: clamp(36px, 4.5vw, 64px); align-items: stretch; row-gap: 56px; } .hero3__copy { grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; } .hero3__title { font-size: clamp(2.7rem, 1.2rem + 4.3vw, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; text-wrap: initial; } .hero3__title em { color: var(--accent); letter-spacing: -0.04em; } .hero3__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; padding-top: 24px; border-top: 1px solid var(--line); } .hero3__lede { font-size: 1.075rem; line-height: 1.55; color: var(--ink-2); max-width: 36ch; } .hero3__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; } /* ---------- Practice map plate ---------- */ .plate { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 1.6vw, 24px); border-radius: var(--radius-l); background: var(--stone); } .plate__bar { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--muted); } .plate__legend { display: inline-flex; align-items: center; gap: 6px; } .plate__legend i { width: 7px; height: 7px; border-radius: 50%; margin-left: 8px; } .plate__legend .is-craft { background: var(--ink); } .plate__legend .is-reach { box-shadow: inset 0 0 0 1.25px var(--ink); } .plate__stage { position: relative; aspect-ratio: 1; width: min(84%, 440px); margin: 8px auto 4px; } .plate__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .plate__svg path, .plate__svg circle { fill: none; } .m-guide { stroke: var(--line); stroke-width: 0.15; stroke-dasharray: 0.6 1; } .m-ticks { stroke: rgba(24, 23, 21, 0.34); stroke-width: 0.15; } .m-ring { stroke: rgba(24, 23, 21, 0.3); stroke-width: 0.2; } .m-ring--outer { stroke-dasharray: 0.5 0.9; } .m-link { stroke: rgba(24, 23, 21, 0.34); stroke-width: 0.2; } .m-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-out) calc(var(--o, 0) * 70ms + 300ms), stroke 500ms var(--ease), opacity 500ms var(--ease), stroke-width 500ms var(--ease); } .js .plate:not(.is-in) .m-draw { stroke-dashoffset: 1; } .plate.has-active .m-link { opacity: 0.22; } .plate.has-active .m-link.is-on { opacity: 1; stroke: var(--accent); stroke-width: 0.32; } .plate__core { position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--stone); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-xs); font-weight: 500; color: var(--ink); text-align: center; line-height: 1.1; } .node3 { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; translate: -50% -50%; transition: opacity 500ms var(--ease); } .node3::after { content: ""; position: absolute; inset: -14px; } .node3__dot { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease), transform 700ms var(--ease-out); } .node3--reach .node3__dot { background: var(--stone); box-shadow: inset 0 0 0 1.25px var(--ink); } .node3__label { position: absolute; display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 5px; background: var(--stone); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; transition: color 500ms var(--ease); } .node3__label .meta { font-size: 0.625rem; } .node3[data-pos="t"] .node3__label { bottom: calc(100% + 7px); left: 50%; translate: -50% 0; } .node3[data-pos="b"] .node3__label { top: calc(100% + 7px); left: 50%; translate: -50% 0; } .node3[data-pos="r"] .node3__label { left: calc(100% + 7px); top: 50%; translate: 0 -50%; } .node3[data-pos="l"] .node3__label { right: calc(100% + 7px); top: 50%; translate: 0 -50%; } .js .plate:not(.is-in) .node3 { opacity: 0; } .js .plate.is-in .node3 { animation: node3-in 900ms var(--ease-out) backwards; animation-delay: calc(var(--o, 0) * 70ms + 700ms); } @keyframes node3-in { from { opacity: 0; } } .plate.has-active .node3 { opacity: 0.35; } .plate .node3.is-linked, .plate .node3.is-active { opacity: 1; } .plate .node3.is-active .node3__dot { background: var(--accent); box-shadow: none; transform: scale(1.35); } .plate .node3.is-active .node3__label { color: var(--accent); } .plate__caption { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line-strong); min-height: 5.6em; } .plate__kind { font-size: var(--fs-xs); color: var(--muted); } .plate__caption p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; transition: opacity 280ms var(--ease); } .plate__caption.is-swapping p, .plate__caption.is-swapping .plate__kind { opacity: 0; } .plate__kind { transition: opacity 280ms var(--ease); } /* ========================================================================== PROOF (stone band) ========================================================================== */ .proof3 { background: var(--stone); padding: clamp(80px, 9vw, 136px) 0; } .proof3__top { align-items: end; row-gap: 48px; } .proof3__intro { grid-column: 1 / span 5; } .proof3__intro .kicker { margin-bottom: 24px; } .proof3__title { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.9rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 14ch; } .proof3__text { margin-top: 20px; color: var(--ink-2); max-width: 40ch; } .proof3__lead { grid-column: 7 / span 6; } .proof3__big { font-size: clamp(5.6rem, 2.4rem + 10vw, 13rem); line-height: 0.8; letter-spacing: -0.065em; color: var(--ink); margin-left: -0.05em; } .proof3__big span { color: var(--accent); } .proof3__chart { position: relative; margin-top: 20px; } .proof3__curve { width: 100%; height: 72px; overflow: visible; } .proof3__curve path { fill: none; vector-effect: non-scaling-stroke; } .proof3__curve .base { stroke: var(--line-strong); stroke-width: 1; } .proof3__curve .line { stroke: var(--ink); stroke-width: 1.25; } .proof3__chart::after { content: ""; position: absolute; right: -4px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .proof3__axis { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); } .proof3__row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); } .proof3__item { padding: 24px 32px 0 0; } .proof3__item + .proof3__item { padding-left: 32px; border-left: 1px solid var(--line); } .proof3__num { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.8rem); line-height: 1; letter-spacing: -0.05em; color: var(--ink); } .proof3__num span { color: var(--accent); } .proof3__label { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); max-width: 28ch; } .proof3__item--practice { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; } .proof3__venn { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 48px; overflow: visible; } .proof3__venn circle { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; } .proof3__words { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); } .proof3__words i { font-style: normal; color: var(--muted); } /* ========================================================================== PROJECT CARDS (image-led canvases; whole card is one link) ========================================================================== */ .card { position: relative; } .card[id] { scroll-margin-top: calc(var(--header-h) + 24px); } .card__link { display: block; color: inherit; } .card__media { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius-l); background: var(--stone); } .card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(24, 23, 21, 0.06); transition: box-shadow 600ms var(--ease); pointer-events: none; } .card__link:hover .card__media::after, .card__link:focus-visible .card__media::after { box-shadow: inset 0 0 0 1px rgba(24, 23, 21, 0.34); } .art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1400ms var(--ease-out); } .card__link:hover .art, .card__link:focus-visible .art { transform: scale(1.035); } .js .v3 [data-reveal="media"] .art { scale: 1.1; transition: scale 1900ms var(--ease-out), transform 1400ms var(--ease-out); } .js .v3 [data-reveal="media"].is-in .art { scale: 1; } .card__index { position: absolute; top: 16px; left: 18px; z-index: 1; color: rgba(24, 23, 21, 0.55); } .card__body { padding-top: 20px; } .card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; } .card__title { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); transition: color 500ms var(--ease); } .card__link:hover .card__title, .card__link:focus-visible .card__title { color: var(--accent); } .card__disc { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); } .card__desc { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-2); max-width: 46ch; line-height: 1.6; } .card__cta { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 700ms var(--ease-out); } .card__cta svg { width: 14px; height: 14px; transition: transform 600ms var(--ease-out); } .card__link:hover .card__cta, .card__link:focus-visible .card__cta { background-size: 100% 1px; } .card__link:hover .card__cta svg, .card__link:focus-visible .card__cta svg { transform: translate(3px, -3px); } /* ---------- Featured: OmniPhi (dark canvas, text panel + artwork) ---------- */ .card--feature .card__link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(460px, 42vw, 620px); border-radius: var(--radius-l); overflow: hidden; background: #141311; color: var(--on-dark); transition: background-color 600ms var(--ease); } .card--feature .card__link:hover { background: #191816; } .card--feature .card__media { grid-column: 2; grid-row: 1; aspect-ratio: auto; border-radius: 0; background: transparent; } .card--feature .card__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 22%; z-index: 1; background: linear-gradient(90deg, #141311, rgba(20, 19, 17, 0)); pointer-events: none; } .card--feature .card__media::after { box-shadow: none; } .card--feature .card__panel { grid-column: 1; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 3.4vw, 52px); } .card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .card--feature .card__top .meta { color: var(--on-dark-muted); } .card__tag { padding: 4px 10px; border: 1px solid rgba(244, 241, 236, 0.3); border-radius: 3px; font-size: var(--fs-xs); color: var(--on-dark); white-space: nowrap; } .card--feature .card__title { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.8rem); line-height: 0.95; letter-spacing: -0.05em; color: var(--on-dark); } .card--feature .card__link:hover .card__title { color: var(--on-dark); } .card--feature .card__disc { margin-top: 14px; color: var(--on-dark-muted); } .card--feature .card__desc { margin-top: 22px; font-size: 1.0625rem; color: rgba(244, 241, 236, 0.84); max-width: 36ch; } .card__note { margin-top: 16px; padding-left: 12px; border-left: 1px solid rgba(244, 241, 236, 0.3); font-size: var(--fs-xs); color: var(--on-dark-muted); max-width: 34ch; } .card--feature .card__cta { align-self: flex-start; color: var(--on-dark); } /* OmniPhi placeholder artwork — its own world: near-black, ivory, brass */ .art--omniphi .om3-grid { stroke: rgba(233, 225, 209, 0.05); stroke-width: 1; fill: none; } .art--omniphi .om3-ticks { stroke: rgba(233, 225, 209, 0.3); stroke-width: 1; } .art--omniphi .om3-wick { stroke: rgba(233, 225, 209, 0.38); stroke-width: 1; } .art--omniphi .om3-candle { fill: none; stroke: rgba(233, 225, 209, 0.45); stroke-width: 1; } .art--omniphi .om3-candle.is-up { fill: rgba(233, 225, 209, 0.55); stroke: none; } .art--omniphi .om3-ma { fill: none; stroke: #B79E6A; stroke-width: 1.6; } .art--omniphi .om3-last { fill: none; stroke: #B79E6A; stroke-opacity: 0.55; stroke-dasharray: 3 5; } .art--omniphi .om3-dot { fill: #B79E6A; } .art--omniphi .om3-net path { fill: none; stroke: rgba(233, 225, 209, 0.22); stroke-width: 1; } .art--omniphi .om3-net circle { fill: #141311; stroke: rgba(233, 225, 209, 0.6); stroke-width: 1; transition: fill 800ms var(--ease); } .art--omniphi .om3-net circle.is-key { fill: #B79E6A; stroke: none; } .art--omniphi .om3-signal { fill: none; stroke: #B79E6A; stroke-opacity: 0.4; stroke-dasharray: 2 5; } .art--omniphi .om3-frame rect { fill: none; stroke: rgba(233, 225, 209, 0.3); stroke-width: 1; } .art--omniphi .om3-frame path { fill: none; stroke: rgba(233, 225, 209, 0.3); stroke-width: 1; } .art--omniphi .om3-frame.is-key rect { stroke: #B79E6A; } .art--omniphi .om3-frame { transition: transform 1400ms var(--ease-out); } .card__link:hover .art--omniphi .om3-frame:first-child { transform: translateX(-6px); } .card__link:hover .art--omniphi .om3-frame:last-child { transform: translateX(6px); } .card__link:hover .art--omniphi .om3-net circle:not(.is-key) { fill: rgba(233, 225, 209, 0.35); } /* Getchup — soft lavender, one task at a time */ .art--getchup .gc3-dots circle { fill: rgba(40, 34, 70, 0.14); } .art--getchup .gc3-dots circle.is-on { fill: #5B4F8F; fill-opacity: 0.85; } .art--getchup .gc3-now rect { fill: #5B4F8F; } .art--getchup .gc3-now circle { fill: none; stroke: #fff; stroke-opacity: 0.85; stroke-width: 2; } .art--getchup .gc3-now path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-opacity: 0.8; } .art--getchup .gc3-later circle { fill: none; stroke: rgba(40, 34, 70, 0.35); stroke-width: 1.5; } .art--getchup .gc3-later path { fill: none; stroke: rgba(40, 34, 70, 0.28); stroke-width: 2.5; stroke-linecap: round; } .art--getchup .gc3-later { transition: transform 1200ms var(--ease-out), opacity 800ms var(--ease); transition-delay: calc(var(--i) * 60ms); } .card__link:hover .art--getchup .gc3-later { transform: translateX(10px); opacity: 0.55; } .art--getchup .gc3-track { fill: none; stroke: rgba(40, 34, 70, 0.14); stroke-width: 2; } .art--getchup .gc3-inner { fill: none; stroke: rgba(40, 34, 70, 0.07); stroke-width: 1.5; } .art--getchup .gc3-arc { fill: none; stroke: #5B4F8F; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 38; transition: stroke-dashoffset 1600ms var(--ease-out); } .card__link:hover .art--getchup .gc3-arc { stroke-dashoffset: 20; } /* PawGuard — sage, deep green, one calm interface */ .art--pawguard .pg3-contours ellipse { fill: none; stroke: rgba(30, 45, 38, 0.13); stroke-width: 1.2; } .art--pawguard .pg3-route { fill: none; stroke: #3E5E50; stroke-opacity: 0.5; stroke-width: 1.5; stroke-dasharray: 4 6; } .art--pawguard .pg3-pin { fill: #3E5E50; } .art--pawguard .pg3-halo { fill: none; stroke: #3E5E50; stroke-opacity: 0.35; stroke-width: 1.2; } .art--pawguard .pg3-line, .art--pawguard .pg3-rows path { fill: none; stroke: rgba(30, 45, 38, 0.3); stroke-width: 2.5; stroke-linecap: round; } .art--pawguard .pg3-arc { fill: none; stroke: #FAFAF6; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; transition: stroke-dashoffset 1600ms var(--ease-out); } .art--pawguard .pg3-phone, .art--pawguard .pg3-note { transition: transform 1400ms var(--ease-out); } .card__link:hover .art--pawguard .pg3-phone { transform: translateY(-10px); } .card__link:hover .art--pawguard .pg3-note { transform: translate(8px, -4px); } .card__link:hover .art--pawguard .pg3-arc { stroke-dashoffset: 12; } /* Turnabout — neutral luxury placeholder: construction drawing on deep brown-black */ .art--turnabout path, .art--turnabout circle, .art--turnabout rect.ta3-c { fill: none; } .art--turnabout .ta3-guide { stroke: rgba(233, 225, 211, 0.14); stroke-dasharray: 2 6; } .art--turnabout .ta3-diag { stroke: rgba(233, 225, 211, 0.07); } .art--turnabout .ta3-c { stroke: rgba(233, 225, 211, 0.2); stroke-width: 1; } .art--turnabout .ta3-c--key { stroke: rgba(233, 225, 211, 0.6); stroke-width: 1.2; } .art--turnabout .ta3-c--faint { stroke: rgba(233, 225, 211, 0.12); } .art--turnabout .ta3-turn path { stroke: #C8B592; stroke-width: 1.6; } .art--turnabout .ta3-turn circle { fill: #C8B592; } .art--turnabout .ta3-turn { transform-box: view-box; transform-origin: 400px 280px; transition: transform 1800ms var(--ease-out); } .card__link:hover .art--turnabout .ta3-turn { transform: rotate(180deg); } .art--turnabout .ta3-center { fill: rgba(233, 225, 211, 0.8); } .art--turnabout .ta3-crop { stroke: rgba(233, 225, 211, 0.45); } .art--turnabout .ta3-ruler { stroke: rgba(233, 225, 211, 0.3); } .card--turnabout .card__index { color: rgba(233, 225, 211, 0.6); } /* ---------- Pair: Getchup + PawGuard (not identical) ---------- */ .pair3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; margin-top: clamp(56px, 6vw, 96px); align-items: start; } .card--wide { grid-column: 1 / span 7; --ratio: 5 / 4; } .card--tall { grid-column: 8 / span 5; --ratio: 4 / 5; margin-top: clamp(0px, 7vw, 104px); } /* ---------- Editorial: Turnabout (canvas + offset text) ---------- */ .card--editorial { margin-top: clamp(64px, 7vw, 112px); } .card--editorial .card__link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; } .card--editorial .card__media { grid-column: 1 / span 8; grid-row: 1; --ratio: 16 / 11; } .card--editorial .card__body { grid-column: 9 / span 4; grid-row: 1; padding: 0 0 6px; } .card--editorial.is-reversed .card__media { grid-column: 5 / span 8; } .card--editorial.is-reversed .card__body { grid-column: 1 / span 4; } .card__bignum { display: block; margin-bottom: 28px; font-size: clamp(4rem, 2rem + 5vw, 7.5rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--smoke); transition: color 600ms var(--ease); } .card--editorial .card__link:hover .card__bignum { color: var(--ink); } .card--editorial .card__title { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.9rem); letter-spacing: -0.045em; } .card--editorial .card__cta { margin-top: 24px; } /* ========================================================================== CAPABILITIES — shifting columns joined by one thread ========================================================================== */ .caps3 { border-top: 1px solid var(--line); } .caps3__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); padding-top: 8px; } .caps3__thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .caps3__thread path { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2200ms var(--ease-out) 200ms; } .js .caps3__grid:not(.is-drawn) .caps3__thread path { stroke-dashoffset: 1; } .cap3 { position: relative; margin-top: calc(var(--shift, 0) * 56px); } .v3 .cap3.is-in { transition: opacity 500ms var(--ease), transform 1400ms var(--ease-out); } .caps3__grid:hover .cap3:not(:hover) { opacity: 0.5; } .cap3__node { position: absolute; top: 0; left: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; translate: 0 -50%; background: var(--paper); box-shadow: inset 0 0 0 1.25px var(--ink); transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease); } .cap3:hover .cap3__node { background: var(--accent); box-shadow: inset 0 0 0 1.25px var(--accent); } .cap3 > .meta { display: block; padding-top: 30px; } .cap3__title { margin-top: 10px; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.8rem); line-height: 1.1; letter-spacing: -0.035em; } .cap3__desc { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; max-width: 30ch; } .cap3__skills { margin-top: 22px; border-top: 1px solid var(--line); } .cap3__skills li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); transition: color 500ms var(--ease); } .cap3:hover .cap3__skills li { color: var(--ink); } .caps3__overlap { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: clamp(48px, 5vw, 72px); font-size: var(--fs-sm); color: var(--ink-2); } .caps3__overlap span { color: var(--muted); margin-right: 8px; } .caps3__overlap i { font-style: normal; color: var(--smoke); } /* ---------- Method — a sequence that fills as you scroll ---------- */ .method3 { margin-top: clamp(96px, 10vw, 150px); } .method3__head { margin-bottom: clamp(36px, 4vw, 56px); } .method3__head .kicker { margin-bottom: 20px; } .method3__title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.04em; max-width: 20ch; } .method3__track { position: relative; height: 1px; background: var(--line); } .method3__track span { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform 250ms linear; } .method3__track::after { content: ""; position: absolute; top: 0.5px; left: calc(var(--p, 1) * 100%); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); translate: -50% -50%; transition: left 250ms linear; } .method3__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 28px; } .step3__num { display: block; font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.6rem); line-height: 1; letter-spacing: -0.05em; color: var(--ink); transition: color 700ms var(--ease); } .step3 h4 { margin-top: 18px; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); transition: color 700ms var(--ease); } .step3 p { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; max-width: 24ch; transition: opacity 700ms var(--ease); } .js .step3:not(.is-reached) .step3__num { color: var(--smoke); } .js .step3:not(.is-reached) h4 { color: var(--muted); } .js .step3:not(.is-reached) p { opacity: 0.6; } .js .step3.is-current .step3__num { color: var(--accent); } /* ========================================================================== ABOUT PREVIEW — human collage + quote ========================================================================== */ .about3 { background: var(--stone); padding: clamp(88px, 9vw, 140px) 0; } .about3__grid { align-items: center; row-gap: 56px; } .about3__collage { grid-column: 1 / span 5; position: relative; aspect-ratio: 5 / 5.6; } .about3__cap { font-size: 0.75rem; color: var(--muted); } .about3__photo { position: absolute; left: 0; top: 0; width: 72%; height: 86%; overflow: hidden; border-radius: var(--radius-l); background: #DCD5C9; } .about3__photo img { width: 100%; height: 100%; object-fit: cover; } .about3__mono { position: absolute; left: 50%; top: 46%; translate: -50% -50%; font-size: clamp(5rem, 9vw, 9rem); letter-spacing: -0.07em; color: rgba(24, 23, 21, 0.07); } .about3__photo .about3__cap { position: absolute; left: 14px; bottom: 12px; } .about3__frag { position: absolute; } .about3__frag .about3__cap { display: block; margin-bottom: 8px; } .about3__frag svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(24, 23, 21, 0.12)); } .about3__frag svg rect:first-child { fill: var(--surface); stroke: var(--line-strong); } .about3__frag svg path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; } .about3__frag svg .play { fill: var(--ink); stroke: none; } .about3__frag svg .prog { stroke: var(--accent); } .about3__frag svg .fill { fill: var(--stone); stroke: none; } .about3__frag--wild { right: 2%; top: 10%; width: 27%; } .about3__frag--studio { right: 10%; bottom: 0; width: 46%; } .about3__text { grid-column: 7 / span 6; } .about3__quote { margin-top: 20px; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.6rem); line-height: 1.14; letter-spacing: -0.035em; } .about3__quote em { color: var(--accent); } .about3__body { margin-top: 24px; color: var(--ink-2); max-width: 50ch; } .about3__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-strong); } .about3__sides h3 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--muted); } .about3__sides p { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink); line-height: 1.7; } .about3__text > .arrow-link { margin-top: 24px; } /* ========================================================================== CLOSING CTA (dark) — polish for v3 pages ========================================================================== */ .v3 .cta-end { padding: clamp(88px, 9vw, 140px) 0 clamp(48px, 5vw, 72px); } .cta-end__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark); } .v3 .cta-end__kicker { font-size: var(--fs-lg); color: var(--on-dark); max-width: 34ch; } .cta-end__meta { font-size: var(--fs-xs); color: var(--on-dark-muted); } .v3 .cta-end__big { margin-top: clamp(32px, 4.5vw, 64px); font-weight: 400; font-size: clamp(3.6rem, 1rem + 11vw, 12rem); letter-spacing: -0.065em; } .v3 .cta-end__foot { margin-top: clamp(48px, 6vw, 88px); } /* ========================================================================== WORK PAGE ========================================================================== */ .work3-intro { padding: clamp(36px, 4.5vw, 72px) 0 clamp(40px, 4.5vw, 64px); } .work3-intro .grid-12 { align-items: end; row-gap: 32px; } .work3-intro__main { grid-column: 1 / span 8; } .work3-intro__main .kicker { margin-bottom: 24px; } .work3-intro__title { font-size: clamp(2.6rem, 1.2rem + 4vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; } .work3-intro__title em { color: var(--accent); } .work3-intro__aside { grid-column: 9 / span 4; } .work3-intro__aside > p { color: var(--ink-2); max-width: 36ch; } .work3-jump { margin-top: 24px; border-top: 1px solid var(--line-strong); } .work3-jump a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); transition: color 400ms var(--ease), padding 600ms var(--ease-out); } .work3-jump a:hover { color: var(--accent); padding-left: 6px; } .gallery3 { padding-bottom: var(--section-y); } .gallery3__more { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 32px; margin-top: clamp(72px, 8vw, 120px); padding-top: 24px; border-top: 1px solid var(--line-strong); } .gallery3__more p { font-size: var(--fs-lg); color: var(--ink-2); max-width: 44ch; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { .hero3__copy { grid-column: 1 / -1; } .plate { grid-column: 1 / -1; width: min(100%, 580px); } .proof3__intro, .proof3__lead { grid-column: 1 / -1; } .card--feature .card__link { grid-template-columns: 1fr; } .card--feature .card__media { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; } .card--feature .card__media::before { inset: auto 0 0 0; width: auto; height: 30%; background: linear-gradient(0deg, #141311, rgba(20, 19, 17, 0)); } .card--feature .card__panel { grid-column: 1; grid-row: 2; } .work3-intro__main, .work3-intro__aside { grid-column: 1 / -1; } .work3-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); } } @media (max-width: 900px) { .head3 { grid-template-columns: 1fr; align-items: start; } .pair3 { grid-template-columns: 1fr; } .card--wide, .card--tall { grid-column: 1 / -1; margin-top: 0; } .card--wide { --ratio: 4 / 3; } .card--tall { --ratio: 4 / 4.4; } .card--editorial .card__link { grid-template-columns: 1fr; } .card--editorial .card__media, .card--editorial.is-reversed .card__media { grid-column: 1; grid-row: 1; --ratio: 4 / 3; } .card--editorial .card__body, .card--editorial.is-reversed .card__body { grid-column: 1; grid-row: 2; } .card__bignum { display: none; } .caps3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } .cap3 { margin-top: 0; } .caps3__thread { display: none; } .cap3__node { translate: 0 0; } .method3__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } .about3__collage { grid-column: 1 / -1; width: min(100%, 460px); } .about3__text { grid-column: 1 / -1; } } @media (max-width: 700px) { .proof3__row { grid-template-columns: 1fr; } .proof3__item, .proof3__item + .proof3__item { padding: 22px 0 26px; border-left: 0; } .proof3__item + .proof3__item { border-top: 1px solid var(--line); } .hero3__foot { grid-template-columns: 1fr; } .method3__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .work3-jump { grid-template-columns: 1fr 1fr; } .hero3__meta { grid-template-columns: 1fr auto; } .hero3__meta span:nth-child(2) { display: none; } .caps3__grid { grid-template-columns: 1fr; } .method3__steps { grid-template-columns: 1fr; } .card--feature .card__top { flex-wrap: wrap; } .about3__sides { grid-template-columns: 1fr; } .node3__label { font-size: 0.75rem; } .node3__label .meta { display: none; } } /* ========================================================================== Reduced motion: everything lands in its final state ========================================================================== */ @media (prefers-reduced-motion: reduce) { .js .plate:not(.is-in) .m-draw, .js .caps3__grid:not(.is-drawn) .caps3__thread path { stroke-dashoffset: 0; } .js .plate:not(.is-in) .node3 { opacity: 1; } .js .plate.is-in .node3 { animation: none; } .m-draw, .caps3__thread path, .method3__track span, .method3__track::after { transition: none; } .art, .art * { transition: none !important; } .card__link:hover .art { transform: none; } .js .v3 [data-reveal="media"] .art { scale: 1; } } /* ========================================================================== FOOTER (v3 pages) — quieter dark-grey line, closed with a hairline rule ========================================================================== */ .v3 .site-footer.on-dark { color: #8A857E; padding-bottom: 32px; } .v3 .site-footer.on-dark .site-footer__name { color: #A29D95; } .v3 .site-footer.on-dark .site-footer__list a:hover { color: var(--on-dark); } .v3 .site-footer .site-footer__grid { padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); } /* ========================================================================== HOMEPAGE WORK GRID — two equal cards per row ========================================================================== */ .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(56px, 6vw, 96px); } .card--grid { height: 100%; } .card--grid .card__link { height: 100%; transition: translate 700ms var(--ease-out); } .card--grid .card__link:hover { translate: 0 -4px; } .card--grid .card__media { --ratio: 4 / 3; } .card--omniphi.card--grid .card__media { background: #141311; } .card--omniphi.card--grid .card__index { color: rgba(233, 225, 209, 0.6); } .card--grid .card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; /* keeps every card the same height */ } .card__tag--media { position: absolute; top: 12px; right: 14px; z-index: 2; background: rgba(20, 19, 17, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .art--photo { object-fit: cover; } .card--turnabout.card--grid .card__index { color: rgba(244, 241, 236, 0.85); } /* Hover: the artwork dims slightly and a clear "View project" label rises */ .card__hover { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgba(20, 19, 17, 0); transition: background-color 600ms var(--ease); pointer-events: none; } .card__hover > span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 700ms var(--ease-out); } .card__hover svg { width: 14px; height: 14px; } .card__link:hover .card__hover, .card__link:focus-visible .card__hover { background: rgba(20, 19, 17, 0.22); } .card__link:hover .card__hover > span, .card__link:focus-visible .card__hover > span { opacity: 1; transform: none; } .grid2__note { margin-top: clamp(40px, 4vw, 56px); padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); } /* ========================================================================== SMALL ENGAGEMENT DETAILS ========================================================================== */ /* Reading progress hairline under the header */ .read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } /* Counters don't jitter while counting */ .proof3__big, .proof3__num { font-variant-numeric: tabular-nums; } /* Kicker rules draw in with their section */ .js [data-reveal] .kicker::before, .js .kicker[data-reveal]::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1000ms var(--ease-out) 250ms; } .js [data-reveal].is-in .kicker::before, .js .kicker[data-reveal].is-in::before { transform: none; } @media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } .card--grid .card__desc { min-height: 0; } } @media (hover: none) { .card__hover { display: none; } } @media (prefers-reduced-motion: reduce) { .card--grid .card__link, .card__hover, .card__hover > span { transition: none; } .card--grid .card__link:hover { translate: none; } .js [data-reveal] .kicker::before, .js .kicker[data-reveal]::before { transform: none; transition: none; } } /* Fifth card on the homepage grid: a full-width row that keeps the 2-column rhythm (image in the left column, text in the right, aligned to the grid gap). */ .grid2 > .card--row { grid-column: 1 / -1; } .card--row .card__link { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: end; } .card--row .card__body { padding: 0 0 6px; } .card--row .card__bignum { display: block; margin-bottom: clamp(20px, 3vw, 40px); } .card--row .card__desc { max-width: 44ch; display: block; -webkit-line-clamp: unset; min-height: 0; overflow: visible; } .card--row .card__link:hover .card__bignum { color: var(--ink); } @media (max-width: 760px) { .card--row .card__link { grid-template-columns: 1fr; } .card--row .card__body { padding-top: 20px; } .card--row .card__bignum { display: none; } } /* ========================================================================== ABOUT PAGE ========================================================================== */ /* Centred page opening, shared by About and Contact (same rhythm as Work and Home) */ .pg-intro { text-align: center; } .pg-intro__kicker { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); } .pg-intro__kicker span { font-weight: 400; color: var(--muted); } .pg-intro__title { margin: 22px auto 0; font-size: clamp(2.8rem, 1rem + 5.4vw, 6.4rem); line-height: 0.96; letter-spacing: -0.052em; max-width: 14ch; text-wrap: balance; } .pg-intro__title em { color: var(--accent); letter-spacing: -0.045em; } .pg-intro__lede { margin: 26px auto 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 46ch; } .about-intro { padding: clamp(40px, 5vw, 80px) 0 clamp(88px, 9vw, 140px); } .about-intro__grid { margin-top: clamp(64px, 7vw, 112px); align-items: center; row-gap: 48px; text-align: left; } .about-intro__portrait { grid-column: 2 / span 4; margin-top: 0; cursor: default; } .about-intro .about-intro__photo { position: relative; aspect-ratio: 4 / 5; background: #DCD5C9; } .about-intro__photo img { width: 100%; height: 100%; object-fit: cover; } .about-intro__portrait figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); } .about-intro .facts3 { grid-column: 8 / span 4; margin-top: 0; } /* Quick facts under the intro: hairline rows */ .facts3 { margin-top: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--line-strong); } .facts3 > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .facts3 dt { color: var(--muted); } .facts3 dd { color: var(--ink); } .about-proof .proof3__row { margin-top: 0; } /* Story: three chapters on hairlines */ .story3 { border-top: 1px solid var(--line-strong); } .story3__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 16px; padding: clamp(28px, 3.5vw, 48px) 0; border-bottom: 1px solid var(--line); } .story3__num { grid-column: 1 / span 1; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--smoke); transition: color 600ms var(--ease); } .story3__row:hover .story3__num { color: var(--accent); } .story3__title { grid-column: 2 / span 4; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem); line-height: 1.1; letter-spacing: -0.035em; } .story3__body { grid-column: 7 / span 6; color: var(--ink-2); max-width: 56ch; } .story3__body p + p { margin-top: 14px; } .story3__body .story3__skills { margin-top: 20px; font-size: var(--fs-xs); color: var(--muted); } /* What I bring: stone band, five hairline rows */ .bring3-band { background: var(--stone); } .bring3-band .head3__title em { color: var(--accent); } .bring3 { border-top: 1px solid var(--line-strong); } .bring3 li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); transition: padding 700ms var(--ease-out); } .bring3 .meta { grid-column: 1 / span 1; } .bring3 h3 { grid-column: 2 / span 5; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: -0.03em; line-height: 1.15; transition: color 500ms var(--ease); } .bring3 p { grid-column: 7 / span 6; font-size: var(--fs-sm); color: var(--ink-2); } .bring3 li:hover { padding-left: 6px; } .bring3 li:hover h3 { color: var(--accent); } /* Education + elsewhere */ .edu3 { row-gap: 64px; } .edu3__col { grid-column: 1 / span 6; } .edu3__col--links { grid-column: 8 / span 5; } .edu3__col .kicker { margin-bottom: 20px; } .edu3__title { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.9rem); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: clamp(28px, 3vw, 40px); } .edu3__list { border-top: 1px solid var(--line-strong); } .edu3__list article { padding: 20px 0 22px; border-bottom: 1px solid var(--line); } .edu3__label { font-size: var(--fs-xs); color: var(--muted); } .edu3__list h3 { margin-top: 8px; font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem); letter-spacing: -0.03em; line-height: 1.2; } .edu3__list h3 + p { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); } /* Link rows (About "Elsewhere" + Contact side) */ .links3 { border-top: 1px solid var(--line-strong); } .links3 li > a, .links3 li > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); } .links3__val { color: var(--ink); overflow-wrap: anywhere; transition: color 400ms var(--ease); } .links3__val small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); } .links3 svg { width: 15px; height: 15px; align-self: center; color: var(--ink); transition: translate 600ms var(--ease-out), color 400ms var(--ease); } .links3 a:hover .links3__val, .links3 a:hover svg { color: var(--accent); } .links3 a:hover svg { translate: 2px -2px; } /* ========================================================================== CONTACT PAGE ========================================================================== */ .contact3 { padding: clamp(40px, 5vw, 80px) 0 var(--section-y); } .contact3__top { margin-top: clamp(36px, 4.5vw, 64px); align-items: end; row-gap: 28px; } .contact3__title { grid-column: 1 / span 8; font-size: clamp(2.6rem, 1.2rem + 4vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; } .contact3__title em { color: var(--accent); letter-spacing: -0.04em; } .contact3__lede { grid-column: 9 / span 4; font-size: 1.075rem; line-height: 1.6; color: var(--ink-2); max-width: 36ch; } .contact3__grid { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--line-strong); row-gap: 64px; align-items: start; } .contact3__side { grid-column: 9 / span 4; } .contact3__email { margin-bottom: 36px; } .contact3__addr { display: block; margin: 10px 0 16px; font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.2; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 600ms var(--ease-out), color 400ms var(--ease); } .contact3__addr:hover { color: var(--accent); background-size: 100% 1px; } .contact3__fit { margin-top: 32px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; } .contact3__fit span { display: block; margin-bottom: 6px; font-size: var(--fs-xs); color: var(--muted); } .contact3--thanks .contact3__title { margin-top: 24px; } .contact3--thanks .contact3__lede { margin: 28px 0 36px; max-width: 44ch; } .contact3--thanks { padding-top: clamp(48px, 6vw, 96px); min-height: 60vh; } /* Form */ .form3 { grid-column: 1 / span 7; display: grid; gap: 28px; } .form3__label { display: block; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--muted); } .form3__topics { border: 0; padding: 0; margin: 0; min-width: 0; } .form3__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .form3__options label { position: relative; cursor: pointer; } .form3__options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .form3__options span { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--fs-sm); line-height: 1.25; color: var(--ink-2); transition: box-shadow 300ms var(--ease), color 300ms var(--ease), background-color 300ms var(--ease); } .form3__options label:hover span { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } .form3__options input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; } .form3__options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .form3__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); } .form3__field input, .form3__field textarea { display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--fs-body); color: var(--ink); transition: box-shadow 300ms var(--ease); } .form3__field textarea { resize: vertical; min-height: 168px; line-height: 1.55; } .form3__field input::placeholder, .form3__field textarea::placeholder { color: var(--muted); opacity: 0.8; } .form3__field input:hover, .form3__field textarea:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } .form3__field input:focus, .form3__field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); } .form3__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; } .form3 .btn { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 500; } .form3 .btn:disabled { opacity: 0.6; cursor: default; } .form3__status { font-size: var(--fs-sm); color: var(--ink-2); max-width: 44ch; } .form3.is-sent .form3__status { color: var(--ink); } .form3.is-error .form3__status { color: var(--accent); } @media (max-width: 1100px) { .form3 { grid-column: 1 / span 12; } .contact3__side { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); } .contact3__side .contact3__fit { grid-column: 1 / -1; } } @media (max-width: 900px) { .about-intro__portrait, .about-intro .facts3 { grid-column: 1 / -1; } .about-intro__portrait { width: min(100%, 420px); margin-inline: auto; } .story3__num { grid-column: 1 / -1; } .story3__title, .story3__body { grid-column: 1 / -1; } .bring3 .meta { grid-column: 1 / span 2; } .bring3 h3 { grid-column: 3 / -1; } .bring3 p { grid-column: 3 / -1; margin-top: 6px; } .edu3__col, .edu3__col--links { grid-column: 1 / -1; } } @media (max-width: 700px) { .contact3__side { display: block; } .form3__options { grid-template-columns: 1fr 1fr; } .form3__row { grid-template-columns: 1fr; } .facts3 > div { grid-template-columns: 96px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .bring3 li, .bring3 li:hover { transition: none; padding-left: 0; } .links3 a:hover svg { translate: none; } }