/* ========================================================================== Oksana Korol — portfolio v1 Palette: light & airy neutrals + electric cobalt accent (variant B) Type: Playfair Display (display) + Inter (body), self-hosted variable fonts ========================================================================== */ @font-face{ font-family:"Playfair Display"; src:url("../assets/fonts/playfair.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Playfair Display"; src:url("../assets/fonts/playfair-italic.woff2") format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../assets/fonts/inter-italic.woff2") format("woff2"); font-weight:400 600; font-style:italic; font-display:swap; } :root{ --paper:#FAF8F4; --paper-deep:#F1EEE7; --ink:#1B1713; --ink-soft:#6E675E; --line:#E4DFD6; --accent:#2B3CF0; --accent-deep:#1F2ECC; --tint:#EAEDFE; --display:"Playfair Display", Georgia, serif; --body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); --gutter:clamp(1.25rem, 5vw, 4rem); --max:1200px; } *{margin:0;padding:0;box-sizing:border-box} /* clip, not hidden: `overflow-x:hidden` on alone leaves the root scrollable sideways, so the hero's glows and orbit SVG let the whole page drift off-centre. `clip` on both makes no scroll container (sticky survives). */ html{scroll-behavior:smooth;overflow-x:clip} body{ font-family:var(--body); font-weight:400; font-size:17px; line-height:1.65; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:clip; } ::selection{background:var(--accent);color:#fff} img{max-width:100%;display:block} a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute;left:1rem;top:-3rem;z-index:100; background:var(--ink);color:var(--paper); padding:.6rem 1.2rem;border-radius:999px; font-size:.9rem;text-decoration:none; transition:top .2s; } .skip-link:focus{top:1rem} .sr-only{ position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)} /* ---------- header ---------- */ .site-head{ position:fixed;inset:0 0 auto;z-index:50; transition:background .3s, box-shadow .3s; } .site-head.scrolled{ background:rgba(250,248,244,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); } .site-head .wrap{ display:flex;align-items:center;justify-content:space-between; padding-block:1.1rem; } .wordmark{ font-family:var(--display); font-style:normal; font-weight:500; font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; } .wordmark span{color:var(--accent)} .site-nav{display:flex;align-items:center;gap:1.75rem} .site-nav a{ color:var(--ink);text-decoration:none; font-size:.92rem;font-weight:400; background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 1.5px; padding-bottom:2px; transition:background-size .35s var(--ease-out), color .25s; } .site-nav a:hover{background-size:100% 1.5px;color:var(--accent)} @media(max-width:560px){ .site-nav{gap:1.1rem} .site-nav a{font-size:.85rem} } /* ---------- hero ---------- */ .hero{ min-height:100svh; display:flex;flex-direction:column;justify-content:center; position:relative; padding-top:5rem; } .hero-glow{ position:absolute; width:min(60vw, 760px);aspect-ratio:1; right:-18%;bottom:-32%; background:radial-gradient(closest-side, var(--tint), transparent 72%); pointer-events:none; animation:drift 16s ease-in-out infinite alternate; } .hero-glow--2{ right:auto;left:-22%;top:-28%;bottom:auto; width:min(46vw, 560px); opacity:.7; animation-duration:21s; animation-direction:alternate-reverse; } @keyframes drift{ from{transform:translate(0,0) scale(1)} to{transform:translate(-7%,-9%) scale(1.14)} } .hero-orbits{ position:absolute;top:8%;right:-26%; height:116%;width:95%; pointer-events:none; } @media(prefers-reduced-motion:reduce){ .hero-orbits .spark{display:none} } .hero h1{ font-family:var(--display); font-weight:500; font-size:clamp(2.35rem, 6.4vw, 5.1rem); line-height:1.1; letter-spacing:-.01em; max-width:21ch; position:relative; } .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;transform:translateZ(0)} .hero h1 .w > span{display:inline-block;transform:translateY(115%);opacity:0} .hero.played h1 .w > span{ animation:rise .95s var(--ease-out) forwards; animation-delay:calc(120ms + var(--i) * 65ms); } @keyframes rise{to{transform:translateY(0);opacity:1}} .rotator{color:var(--accent);font-style:italic} .rotator .word{display:inline-block} .rotator .word.out{animation:word-out .35s var(--ease-out) forwards} .rotator .word.in{animation:word-in .45s var(--ease-out)} @keyframes word-out{to{transform:translateY(-75%);opacity:0}} @keyframes word-in{from{transform:translateY(75%);opacity:0}to{transform:translateY(0);opacity:1}} .hero-sub, .hero-cta, .hero-hint{ opacity:0;transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .hero.played .hero-sub{transition-delay:1.15s;opacity:1;transform:none} .hero.played .hero-cta{transition-delay:1.3s;opacity:1;transform:none} .hero.played .hero-hint{transition-delay:1.9s;opacity:1;transform:none} .hero-sub{ margin-top:1.8rem; font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--ink-soft); max-width:52ch; } .hero-sub strong{font-weight:500;color:var(--ink)} .hero-cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2.4rem} .btn{ font-family:var(--body);font-weight:500;font-size:1rem; background:var(--accent);color:#fff; border:none;border-radius:999px; padding:.95rem 1.9rem; text-decoration:none;cursor:pointer; display:inline-flex;align-items:center;gap:.55rem; transition:background .25s, box-shadow .35s var(--ease-out); will-change:transform; } .btn:hover{background:var(--accent-deep);box-shadow:0 14px 28px -14px var(--accent)} .btn .arr{transition:transform .3s var(--ease-out)} .btn:hover .arr{transform:translateX(4px)} .link-plain{ color:var(--ink);text-decoration:none;font-weight:400;font-size:1rem; background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 2px; padding-bottom:3px; transition:background-size .35s var(--ease-out), color .25s; } .link-plain:hover{background-size:100% 2px;color:var(--accent)} .hero-hint{ position:absolute;bottom:2.2rem;left:var(--gutter); font-size:.82rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-soft); display:flex;align-items:center;gap:.7rem; } .hero-hint::after{ content:"";width:1px;height:2.6rem;background:var(--ink-soft); animation:hint-pulse 2.2s ease-in-out infinite; transform-origin:top; } @keyframes hint-pulse{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}} /* ---------- shared section bits ---------- */ .section{padding-block:clamp(4.5rem, 11vh, 8.5rem)} .kicker{ font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-soft);font-weight:500; display:flex;align-items:center;gap:.8rem; margin-bottom:1.2rem; } .kicker::before{content:"";width:2.2rem;height:1px;background:var(--ink-soft)} .section-title{ font-family:var(--display);font-weight:500; font-size:clamp(1.9rem, 4vw, 3.1rem); letter-spacing:-.01em;line-height:1.14; max-width:24ch; } .section-title em{font-style:italic;color:var(--accent)} /* scroll reveals */ [data-reveal]{ opacity:0;transform:translateY(26px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay:var(--d, 0ms); } [data-reveal].in{opacity:1;transform:none} /* ---------- work: case-study grid ---------- */ .work-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:1.2rem;flex-wrap:wrap; } .work-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(1.8rem, 3.5vw, 2.8rem); margin-top:clamp(2rem, 5vh, 3.2rem); align-items:stretch; } .card{ position:relative; display:flex;flex-direction:row;align-items:stretch; background:#fff;border:1px solid var(--line);border-radius:24px; overflow:hidden;text-decoration:none;color:var(--ink); transition:transform .5s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s; } .card:hover, .card:focus-visible{ transform:translateY(-6px); border-color:transparent; box-shadow: 0 24px 48px -24px rgba(43,60,240,.22), 0 32px 64px -40px rgba(27,23,19,.30); } .card:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* odd rows: image left — even rows: image right */ .work-grid > .card:nth-child(even){flex-direction:row-reverse} .card-media{ position:relative;overflow:hidden; background:var(--paper-deep); flex:0 0 50%; aspect-ratio:16/10; } .card-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left; transition:transform .7s var(--ease-out), filter .5s; filter:saturate(.94); } .card:hover .card-media img{transform:scale(1.045);filter:saturate(1)} .card--soon .card-media img{filter:saturate(.8)} .card-index{ align-self:flex-start; font-family:var(--display);font-style:italic;font-weight:400; font-size:calc(1rem * var(--cs, 1)); color:var(--ink-soft);letter-spacing:.04em; margin-bottom:calc(-.35rem * var(--cs, 1)); } .card-body{ /* --cs: content scale — trimmed by JS when a card holds more than fits */ --cs:1; padding:calc(clamp(1.8rem, 3.4vw, 3.6rem) * var(--cs)); display:flex;flex-direction:column;justify-content:center; gap:calc(1.15rem * var(--cs)); flex:1 1 50%;min-width:0; } .card-body h3{ font-family:var(--display);font-weight:500; font-size:calc(clamp(1.3rem, 1.9vw, 1.55rem) * var(--cs)); line-height:1.18;letter-spacing:-.01em; } .card-body p{ color:var(--ink-soft);font-size:calc(.94rem * var(--cs));max-width:56ch; } /* the card renders fully open — stats and CTA are always in view */ .card-reveal{display:grid;grid-template-rows:1fr} .card-reveal-inner{ display:flex;flex-direction:column;gap:calc(1.3rem * var(--cs)); padding-top:calc(.6rem * var(--cs)); } .tags{display:flex;gap:.5rem;flex-wrap:wrap} .tag{ white-space:nowrap; font-size:calc(.72rem * var(--cs, 1));font-weight:500;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--line);border-radius:999px; padding:calc(.3rem * var(--cs, 1)) calc(.75rem * var(--cs, 1));color:var(--ink-soft); transition:border-color .35s, color .35s; } .card:hover .tag{border-color:var(--accent);color:var(--accent)} .card-stats{ display:flex;gap:calc(2.4rem * var(--cs, 1));flex-wrap:wrap; padding-top:calc(.4rem * var(--cs, 1)); } .stat .num{ font-family:var(--display);font-weight:500; font-size:calc(1.5rem * var(--cs, 1)); color:var(--accent);letter-spacing:-.02em;line-height:1.1; font-variant-numeric:tabular-nums; } .stat .cap{font-size:calc(.78rem * var(--cs, 1));color:var(--ink-soft);margin-top:.15rem} .card-go{ display:inline-flex;align-items:center;gap:.5rem; font-weight:500;font-size:calc(.95rem * var(--cs, 1));color:var(--accent); margin-top:calc(.3rem * var(--cs, 1)); } .card-go .arr{transition:transform .3s var(--ease-out)} .card:hover .card-go .arr{transform:translateX(5px)} .card--soon{cursor:default} .card--soon .card-go{color:var(--ink-soft)} .card--soon:hover .card-media img{transform:none} .card--soon:hover .tag{border-color:var(--line);color:var(--ink-soft)} @media(min-width:861px){ /* every row is exactly the same height */ .card{height:clamp(420px, 38vw, 560px)} .card-index{font-size:calc(1.05rem * var(--cs))} .card-body h3{font-size:calc(clamp(1.55rem, 2.6vw, 2.2rem) * var(--cs))} .card-body p{font-size:calc(1.05rem * var(--cs));max-width:44ch} .stat .cap{font-size:calc(.85rem * var(--cs))} } @media(max-width:860px){ .card, .work-grid > .card:nth-child(even){flex-direction:column} .card-media{flex:none} .card-body{justify-content:flex-start} .card-reveal{margin-top:auto} } @media(max-width:640px){ .card-stats{gap:1.4rem} .card-body{padding:1.3rem 1.35rem 1.5rem} } /* ---------- what I'm good at ---------- */ .craft-head{max-width:60ch} .craft-lede{ margin-top:1.1rem; color:var(--ink-soft); font-size:clamp(1rem, 1.5vw, 1.1rem); max-width:56ch; } .craft-list{ list-style:none; margin-top:clamp(2.4rem, 6vh, 3.6rem); border-top:1px solid var(--line); } .craft-item{ display:grid; grid-template-columns:5.5rem minmax(0, 28ch) minmax(0, 1fr); gap:0 clamp(1.5rem, 4vw, 3.5rem); align-items:baseline; padding-block:clamp(1.6rem, 3.4vh, 2.4rem); border-bottom:1px solid var(--line); } .craft-num{ font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(1.9rem, 3.2vw, 2.7rem); color:var(--accent); line-height:1; letter-spacing:-.02em; } .craft-item h3{ font-family:var(--display);font-weight:500; font-size:clamp(1.2rem, 1.9vw, 1.55rem); line-height:1.2;letter-spacing:-.01em; } .craft-item p{ color:var(--ink-soft); font-size:.96rem; max-width:52ch; } .craft-figures{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(1rem, 3vw, 2rem); margin-top:clamp(2.6rem, 6vh, 4rem); } .craft-figures .num{font-size:clamp(2.1rem, 4.4vw, 3.2rem)} .craft-figures .cap{max-width:22ch;font-size:.82rem;line-height:1.45} @media(max-width:900px){ .craft-item{ grid-template-columns:4.2rem minmax(0,1fr); gap:0 1.2rem; } .craft-item p{grid-column:2;margin-top:.5rem} } @media(max-width:860px){ .craft-figures{grid-template-columns:repeat(2, minmax(0,1fr));gap:1.6rem 1.2rem} } @media(max-width:520px){ .craft-item{grid-template-columns:1fr;gap:0} .craft-num{display:block;margin-bottom:.5rem;font-size:1.8rem} .craft-item p{grid-column:1} } /* ---------- footer / contact ---------- */ .footer{ background:var(--ink);color:var(--paper); border-radius:32px 32px 0 0; padding-block:clamp(4.5rem,11vh,8rem) 2.5rem; position:relative;overflow:hidden; } .footer .kicker{color:#A69F94} .footer .kicker::before{background:#A69F94} .footer-title{ font-family:var(--display);font-weight:500; font-size:clamp(2rem,5vw,3.8rem); line-height:1.12;letter-spacing:-.01em; max-width:20ch; } .footer-title em{font-style:italic;color:#8B96F7} .email-link{ display:inline-block; margin-top:2.2rem; font-family:var(--display);font-weight:400;font-style:italic; font-size:clamp(1.25rem,3vw,2rem); color:var(--paper);text-decoration:none; border-bottom:1px solid rgba(250,248,244,.35); padding-bottom:.15em; transition:border-color .3s, color .3s; } .email-link:hover{border-color:#8B96F7;color:#8B96F7} .email-link .ch{display:inline-block;transition:transform .3s var(--ease-out)} .email-link:hover .ch{ animation:wave .5s var(--ease-out); animation-delay:calc(var(--i) * 22ms); } @keyframes wave{ 0%,100%{transform:translateY(0)} 40%{transform:translateY(-.28em)} } .footer-links{ display:flex;gap:1.8rem;flex-wrap:wrap; margin-top:2.6rem; } .footer-links a{ color:var(--paper);text-decoration:none;font-size:.95rem;font-weight:400; background:linear-gradient(#8B96F7,#8B96F7) no-repeat 0 100%/0 1.5px; padding-bottom:3px; transition:background-size .35s var(--ease-out), color .25s; } .footer-links a:hover{background-size:100% 1.5px;color:#8B96F7} .footer-meta{ display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; margin-top:clamp(3rem,7vh,5rem); padding-top:1.6rem; border-top:1px solid rgba(250,248,244,.14); font-size:.85rem;color:#A69F94; } .footer-meta .signoff em{font-family:var(--display);font-style:italic;color:var(--paper)} /* ========================================================================== Case study pages ========================================================================== */ .page-enter{animation:page-in .6s var(--ease-out)} @keyframes page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} body.page-leave{opacity:0;transition:opacity .22s ease} .cs-top{padding-top:8.5rem} .cs-title{ font-family:var(--display);font-weight:500; font-size:clamp(2.2rem,5.5vw,4.2rem); line-height:1.1;letter-spacing:-.01em; max-width:18ch; } .cs-lede{margin-top:1.4rem;font-size:1.1rem;color:var(--ink-soft);max-width:56ch} .cs-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem} .cs-hero{ margin-top:clamp(2.5rem,6vh,4rem); border-radius:24px;overflow:hidden; border:1px solid var(--line); background:var(--paper-deep); } .cs-hero img{ width:100%;height:auto; transform:scale(1.05);opacity:0; transition:transform 1.4s var(--ease-out), opacity .9s ease; } .cs-hero.in img{transform:scale(1);opacity:1} /* stat strip */ .cs-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; background:var(--tint);border-radius:24px; padding:clamp(1.6rem,3.5vw,2.6rem); margin-top:clamp(2rem,5vh,3rem); } .cs-stats .stat .num{font-size:clamp(1.8rem,3vw,2.6rem)} @media(max-width:760px){.cs-stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}} /* prose sections */ .cs-section{padding-block:clamp(3rem,7vh,5.5rem)} .cs-section .kicker{margin-bottom:1rem} .cs-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(1.5rem,4vw,4rem)} @media(max-width:820px){.cs-grid{grid-template-columns:1fr}} .cs-h2{ font-family:var(--display);font-weight:500; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.15;letter-spacing:-.01em; } .cs-prose{font-size:1.05rem;color:var(--ink-soft);max-width:62ch} .cs-prose > * + *{margin-top:1.1rem} .cs-prose strong{font-weight:500;color:var(--ink)} .contribs{list-style:none;display:flex;flex-direction:column} .contribs li{ padding:1.05rem 0; border-bottom:1px solid var(--line); display:flex;gap:1rem;align-items:baseline; font-size:1rem;color:var(--ink-soft); } .contribs li:first-child{border-top:1px solid var(--line)} .contribs li::before{ content:"→";color:var(--accent); font-weight:500;flex-shrink:0; } .contribs strong{font-weight:500;color:var(--ink)} /* figures */ .cs-fig{margin-top:clamp(2rem,5vh,3rem)} .cs-fig img{ width:100%;height:auto; border-radius:20px;border:1px solid var(--line); } .cs-fig figcaption{ margin-top:.9rem;font-size:.9rem;color:var(--ink-soft); display:flex;gap:.7rem;align-items:baseline; } .cs-fig figcaption::before{ content:"";width:1.4rem;height:1px;background:var(--accent); flex-shrink:0;align-self:center; } /* scattered persona cards */ .persona-scatter{ display:flex;justify-content:center;align-items:flex-start; gap:clamp(.5rem,1.5vw,1.25rem); margin-top:clamp(2.5rem,6vh,4rem); padding-bottom:clamp(1rem,3vh,2rem); } .persona-scatter figure{ margin:0;flex:0 1 30%;max-width:340px; } .persona-scatter figure:nth-child(1){transform:translateY(14px)} .persona-scatter figure:nth-child(2){transform:translateY(-10px);z-index:1} .persona-scatter figure:nth-child(3){transform:translateY(20px)} .persona-scatter figure:hover{z-index:2} .persona-scatter img{ width:100%;height:auto;display:block; border-radius:14px;border:1px solid var(--line); box-shadow:0 12px 34px rgba(27,23,19,.14),0 2px 8px rgba(27,23,19,.08); background:#fff; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .persona-scatter figure:nth-child(1) img{transform:rotate(-3deg)} .persona-scatter figure:nth-child(2) img{transform:rotate(1.2deg)} .persona-scatter figure:nth-child(3) img{transform:rotate(2.6deg)} .persona-scatter figure:hover img{transform:rotate(0) translateY(-4px) scale(1.03)} .persona-scatter figcaption{ margin-top:1rem;text-align:center; font-size:.85rem;color:var(--ink-soft); } .persona-scatter figcaption strong{ display:block;font-weight:500;color:var(--ink);font-size:.95rem; } @media (max-width:640px){ .persona-scatter{flex-direction:column;align-items:center;gap:1.75rem} .persona-scatter figure{flex:none;width:min(85%,320px)} .persona-scatter figure:nth-child(n){transform:none} .persona-scatter figure:nth-child(1) img{transform:rotate(-2deg)} .persona-scatter figure:nth-child(2) img{transform:rotate(1.5deg)} .persona-scatter figure:nth-child(3) img{transform:rotate(-1.5deg)} } /* mobile screen trio */ .phone-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2rem,5vh,3rem); } .phone-grid figure{margin:0} .phone-grid img{ width:100%;height:auto; border-radius:20px;border:1px solid var(--line); } .phone-grid figcaption{ margin-top:.7rem;font-size:.85rem;color:var(--ink-soft); } @media (max-width:640px){ .phone-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto} } /* before/after slider */ .ba-slider{ position:relative;overflow:hidden; border-radius:20px;border:1px solid var(--line); aspect-ratio:1410/1021; margin-top:clamp(2rem,5vh,3rem); background:var(--paper-deep); touch-action:pan-y; } .ba-slider img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:top left; pointer-events:none; } .ba-top{ position:absolute;inset:0; clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); } .ba-handle{ position:absolute;top:0;bottom:0;left:var(--pos,50%); width:2px;background:var(--accent); transform:translateX(-50%); pointer-events:none; } .ba-handle::after{ content:"◂ ▸"; position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); background:var(--accent);color:#fff; font-size:.72rem;letter-spacing:.05em; padding:.55rem .7rem;border-radius:999px; white-space:nowrap; } .ba-label{ position:absolute;top:1rem;z-index:2; font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase; background:rgba(27,23,19,.62);color:#fff; backdrop-filter:blur(6px); padding:.32rem .8rem;border-radius:999px; pointer-events:none; } .ba-label--before{left:1rem} .ba-label--after{right:1rem} .ba-range{ position:absolute;inset:0;width:100%;height:100%; opacity:0;cursor:ew-resize;margin:0; -webkit-appearance:none;appearance:none; } .ba-range:focus-visible ~ .ba-handle{outline:2px solid var(--ink);outline-offset:2px} /* improvement blocks */ .improve{margin-top:clamp(3rem,7vh,4.5rem)} .improve-head{display:flex;gap:1.2rem;align-items:baseline;max-width:62ch} .improve-num{ font-family:var(--display);font-style:italic;font-weight:400; font-size:1.1rem;flex-shrink:0; } .improve-head h3{ font-family:var(--display);font-weight:500; font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em; } .improve-head + p{ margin-top:.7rem;color:var(--ink-soft);font-size:1rem; max-width:60ch;padding-left:2.3rem; } .improve img{ width:100%;height:auto;margin-top:1.4rem; border-radius:20px;border:1px solid var(--line); } @media(max-width:640px){.improve-head + p{padding-left:0}} /* results carousel (design improvements) */ .improve-carousel{ margin-top:clamp(3rem,7vh,4.5rem); --slide-w:min(820px, 84vw); /* distance from the viewport edge to the .wrap content edge */ --pad-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); /* full-bleed: escape the .wrap container so slides run edge-to-edge and several are visible on screen instead of being cut at the container */ margin-inline:calc(50% - 50vw); } .improve-carousel-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:1.2rem;flex-wrap:wrap; padding-bottom:1.4rem;border-bottom:1px solid var(--line); /* the heading stays aligned with the page content */ margin-inline:var(--pad-left); } .improve-carousel-title{ font-family:var(--display);font-weight:500; font-size:clamp(1.4rem,2.8vw,2.1rem);letter-spacing:-.01em; } .improve-track{ display:flex; /* top-align so every image sits at the same vertical position — slides with longer/shorter captions no longer shift the images up and down */ align-items:flex-start; gap:clamp(1.1rem,2.5vw,1.8rem); overflow-x:auto; scroll-snap-type:x mandatory; /* first slide starts at the content edge; the trailing space lets the last slide snap to that same edge */ padding-inline:var(--pad-left) max(var(--gutter), calc(100% - var(--slide-w) - var(--pad-left))); scroll-padding-inline-start:var(--pad-left); padding-block:1.8rem 1rem; scrollbar-width:none; cursor:grab; outline-offset:4px; } .improve-track::-webkit-scrollbar{display:none} .improve-track.dragging{scroll-snap-type:none;cursor:grabbing} .improve-track.dragging .improve-slide{pointer-events:none} .improve-slide{ flex:0 0 var(--slide-w); scroll-snap-align:start;scroll-snap-stop:always; display:flex;flex-direction:column; /* slides sit at full size and do not scale on hover */ } .improve-media{ border-radius:20px;border:1px solid var(--line);overflow:hidden; background:var(--paper-deep); } .improve-media{ /* every slide's image occupies an identical box so all cards match */ aspect-ratio:1600 / 1157; } .improve-media img{ width:100%;height:100%;display:block;margin:0; object-fit:cover;object-position:top; border:0;border-radius:0; } .improve-slide .improve-head{margin-top:1.4rem} /* outcome */ .outcome-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:1rem; margin-top:clamp(2rem,4vh,3rem); } @media(max-width:720px){.outcome-grid{grid-template-columns:1fr}} .outcome-card{ background:#fff;border:1px solid var(--line);border-radius:20px; padding:1.6rem 1.7rem; } .outcome-card h3{ font-family:var(--display);font-weight:500;font-size:1.15rem; margin-bottom:.4rem; } .outcome-card h3::before{content:"✦ ";color:var(--accent)} .outcome-card p{font-size:.95rem;color:var(--ink-soft)} /* pull quote */ .cs-quote{ margin-top:clamp(2rem,5vh,3rem); padding-left:clamp(1.2rem,2vw,1.8rem); border-left:2px solid var(--accent); max-width:54ch; } .cs-quote p{ font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.3;color:var(--ink); max-width:none; } .cs-quote cite{ display:block;margin-top:.9rem; font-family:var(--body);font-style:normal; font-size:.9rem;letter-spacing:.02em;color:var(--ink-soft); } .cs-quote cite::before{content:"— "} /* insight → action → result flow */ .flow{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; margin-top:clamp(2rem,4vh,3rem); } @media(max-width:720px){.flow{grid-template-columns:1fr}} /* ---------- case study: research plan (stats wired to concentric rings) ---------- */ .rp-grid{ position:relative; display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:clamp(2rem,5vw,5rem);align-items:center; margin-top:clamp(2.5rem,6vh,3.5rem); } .rp-stats{list-style:none;display:flex;flex-direction:column;gap:clamp(1.6rem,3.2vh,2.4rem)} .rp-stats li{position:relative;padding-right:2.2rem} .rp-stats li::after{ /* tick bar — the anchor each leader line departs from */ content:"";position:absolute;right:0;top:50%; width:2px;height:2.7rem;background:var(--ink); transform:translateY(-50%); } .rp-stats .num{ display:block; font-family:var(--display);font-style:italic;font-weight:500; font-size:clamp(2rem,3.4vw,2.9rem);line-height:1; color:var(--accent);font-variant-numeric:tabular-nums; } .rp-stats .num small{font-size:.55em;font-style:inherit} .rp-stats .lbl{display:block;margin-top:.4rem;color:var(--ink-soft);font-size:.95rem;max-width:28ch} .rp-stats .lbl strong{color:var(--ink);font-weight:500} .rp-viz svg{width:100%;height:auto;display:block} /* nested filled discs, reference-style, in the site palette */ .rp-viz .band{ stroke:var(--line);stroke-width:1; cursor:pointer; transform-box:fill-box;transform-origin:center; transform:scale(.72);opacity:0; transition: transform .9s var(--ease-out) var(--rpd,0s), opacity .7s ease var(--rpd,0s), fill .35s ease, filter .35s ease; } .rp-viz .band[data-ring="3"]{fill:#FFFFFF} .rp-viz .band[data-ring="2"]{fill:#F4F4F4} .rp-viz .band[data-ring="1"]{fill:#EAEAEA} .rp-viz .band--core{fill:#E0E0E0;stroke:none} .rp-viz .dot{ fill:var(--ink-soft); stroke:var(--accent);stroke-opacity:0;stroke-width:0; pointer-events:none; transform-box:fill-box;transform-origin:center; transform:scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) var(--rpd,0s), fill .3s ease, stroke-width .3s ease, stroke-opacity .3s ease; } .rp-viz .dot.is-hot{fill:var(--accent);stroke-width:20;stroke-opacity:.22} .rp-viz .ring-label{ font-family:var(--body);font-size:14px;fill:var(--ink-soft); text-anchor:middle;pointer-events:none; opacity:0; transition:opacity .6s ease var(--rpd,0s), fill .3s ease; } .rp-viz .ring-label--core{fill:var(--ink);font-size:15px} .rp-viz .ring-label.is-hot{fill:var(--accent)} .rp-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .rp-leaders path{ fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:2 5; opacity:0; transition:opacity .7s ease var(--rpd,0s), stroke .3s ease, stroke-width .3s ease; } .rp-leaders path.is-hot{stroke:var(--accent);stroke-width:1.8} /* hover feedback on the stat side */ .rp-stats li{transition:opacity .7s var(--ease-out) var(--rpd,0s),transform .7s var(--ease-out) var(--rpd,0s);cursor:default} .rp-stats li .num,.rp-stats li::after{transition:color .3s ease, background .3s ease} .rp-stats li.is-hot::after{background:var(--accent)} /* entrance — spring-style reveal once the section scrolls in (.in), bands scale up from the core outward, stats & dots follow. The per-element --rpd delay is cleared by JS after the run so hover stays instant. */ .rp-stats li{ opacity:0;transform:translateX(-14px); transition:opacity .7s var(--ease-out) var(--rpd,0s), transform .7s var(--ease-out) var(--rpd,0s); } .rp-grid.in .rp-stats li, .rp-grid.in .band, .rp-grid.in .band--core, .rp-grid.in .dot{opacity:1;transform:none} .rp-grid.in .ring-label, .rp-grid.in .rp-leaders path{opacity:1} .rp-grid.in .rp-leaders path{opacity:.55} /* hovering a band grows it slightly — no shadow */ .rp-grid.in .rp-viz .band.is-hot{transform:scale(1.04)} @media(max-width:820px){ .rp-grid{grid-template-columns:1fr} .rp-stats li{padding-right:0} .rp-stats li::after{display:none} .rp-leaders{display:none} } @media(prefers-reduced-motion:reduce){ .rp-stats li,.rp-viz .band,.rp-viz .band--core, .rp-viz .ring-label,.rp-viz .dot{opacity:1;transform:none;transition:fill .3s ease} .rp-leaders path{opacity:.55} } /* ---------- case study: persona cards ---------- */ .persona-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:clamp(1.8rem,4vw,3rem); margin-top:clamp(2.2rem,5vh,3.2rem); padding-inline:.4rem; /* room for the tilt */ } .persona-wall--solo{max-width:600px} .persona-card{ background:#fff;border:1px solid var(--line);border-radius:22px; padding:clamp(1.6rem,3vw,2.4rem); transform:rotate(-1.3deg); box-shadow:0 28px 56px -36px rgba(27,23,19,.30); transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); } .persona-card:nth-child(even){transform:rotate(1.1deg)} .persona-card:hover{ transform:rotate(0) translateY(-5px); box-shadow:0 34px 64px -36px rgba(43,60,240,.30); } .p-head{display:flex;gap:1.1rem;align-items:center} .p-ava{ width:3.6rem;height:3.6rem;border-radius:50%;flex-shrink:0; background:var(--tint);color:var(--accent); display:grid;place-items:center; font-family:var(--display);font-style:italic;font-weight:500; font-size:1.6rem; } .p-head h3{ font-family:var(--display);font-weight:500; font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.15; } .p-role{font-size:.88rem;color:var(--ink-soft);margin-top:.15rem} .p-quote{ margin-top:1.3rem; font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.45; color:var(--ink); } .p-quote::before{content:"“ ";color:var(--accent)} .p-quote::after{content:" ”";color:var(--accent)} .p-about{margin-top:1rem;font-size:.94rem;color:var(--ink-soft)} .p-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem} .p-sec{margin-top:1.4rem} .p-sec h4{ font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink); display:flex;align-items:center;gap:.7rem; } .p-sec h4::after{content:"";height:1px;flex:1;background:var(--line)} .p-sec ul{list-style:none;margin-top:.7rem;display:flex;flex-direction:column;gap:.45rem} .p-sec li{font-size:.92rem;color:var(--ink-soft);display:flex;gap:.6rem} .p-sec li::before{content:"—";color:var(--accent);flex-shrink:0} /* pain meters — slider-style bars */ .p-pains{list-style:none;margin-top:.8rem;display:flex;flex-direction:column;gap:.85rem} .p-pains li{font-size:.92rem;color:var(--ink-soft);display:block} .p-pains li::before{margin-right:.6rem} .p-pains .meter{ display:block; position:relative;height:2px;border-radius:999px; background:var(--paper-deep);margin-top:.5rem; margin-left:1.25rem; /* aligns the track with the text after the dash */ } .p-pains .meter i{ position:absolute;inset:0 auto 0 0;width:var(--v,60%); background:var(--accent);border-radius:999px; } .p-pains .meter::after{ content:"";position:absolute;top:50%;left:var(--v,60%); width:10px;height:10px;border-radius:50%; background:#fff;border:2px solid var(--accent); transform:translate(-50%,-50%); } @media(max-width:640px){ .persona-card, .persona-card:nth-child(even){transform:none} } .flow-step{ background:#fff;border:1px solid var(--line);border-radius:20px; padding:1.6rem 1.7rem; } .flow-num{ display:block;margin-bottom:.6rem; font-family:var(--display);font-style:italic;font-weight:400; font-size:1.05rem;color:var(--accent); } .flow-step h3{ font-family:var(--display);font-weight:500;font-size:1.15rem; margin-bottom:.4rem; } .flow-step p{font-size:.95rem;color:var(--ink-soft)} /* next project */ .next-cta{ display:block;text-decoration:none; background:var(--ink);color:var(--paper); border-radius:28px; padding:clamp(2.5rem,6vw,4.5rem); margin-block:clamp(3rem,7vh,5rem); position:relative;overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .next-cta:hover{transform:translateY(-5px);box-shadow:0 32px 64px -32px rgba(27,23,19,.5)} .next-cta .kicker{color:#A69F94;margin-bottom:.8rem} .next-cta .kicker::before{background:#A69F94} .next-cta h2{ font-family:var(--display);font-weight:500; font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.01em;line-height:1.14; max-width:20ch; } .next-cta h2 em{font-style:italic;color:#8B96F7} .next-cta .card-go{color:#8B96F7;margin-top:1.4rem;font-size:1rem} .next-cta:hover .card-go .arr{transform:translateX(5px)} .mini-foot{ display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding-block:0 2.5rem; font-size:.88rem;color:var(--ink-soft); } .mini-foot .links{display:flex;gap:1.5rem} .mini-foot a{ color:var(--ink);text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 1.5px; padding-bottom:2px; transition:background-size .35s var(--ease-out), color .25s; } .mini-foot a:hover{background-size:100% 1.5px;color:var(--accent)} /* ---------- cursor follower (pointer devices) ---------- */ .cursor-dot{ position:fixed;top:0;left:0;z-index:200; width:0;height:0; pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .3s var(--ease-out); will-change:transform; } .cursor-dot.is-visible{opacity:1} /* solid steady core */ .cursor-dot::before{ content:"";position:absolute;left:0;top:0; width:9px;height:9px;margin:-4.5px 0 0 -4.5px; border-radius:50%;background:var(--accent); transition:width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out); } /* transparent halo — this one breathes bigger/smaller */ .cursor-dot::after{ content:"";position:absolute;left:0;top:0; width:30px;height:30px;margin:-15px 0 0 -15px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 68%); animation:cursor-glow 1.7s var(--ease-out) infinite; } .cursor-dot.is-active::before{ width:15px;height:15px;margin:-7.5px 0 0 -7.5px; } @keyframes cursor-glow{ 0%,100%{transform:scale(.6);opacity:.5} 50%{transform:scale(1.25);opacity:.9} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important; } .hero h1 .w > span{transform:none;opacity:1} .hero-sub,.hero-cta,.hero-hint{opacity:1;transform:none} [data-reveal]{opacity:1;transform:none} .hero-glow{animation:none} .card{transform:none;opacity:1} } /* ============ customer journey map ============ */ .cjm{margin-top:clamp(2rem,5vh,3rem)} .cjm-scroll{ overflow-x:auto; border:1px solid var(--line);border-radius:22px; background:#fff; scrollbar-width:thin; } .cjm-inner{min-width:960px;padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.1rem) 0} .cjm-curve{display:block;width:100%;height:auto} .cjm-row{display:grid;grid-template-columns:repeat(7,1fr)} .cjm-stage{ padding:1.1rem .9rem 1.4rem; border-left:1px solid var(--line); } .cjm-stage:first-child{border-left:0} .cjm-num{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--accent)} .cjm-title{ font-family:var(--display);font-weight:500; font-size:1.02rem;line-height:1.15;margin-top:.2rem;color:var(--ink); } .cjm-mood{font-size:.85rem;font-weight:500;color:var(--ink);margin-top:.55rem} .cjm-doing{font-size:.82rem;color:var(--ink-soft);margin-top:.7rem;line-height:1.5} .cjm-fix{margin-top:.85rem;border-top:1px dashed var(--line);padding-top:.75rem} .cjm-pain,.cjm-built{font-size:.8rem;line-height:1.45} .cjm-pain{color:var(--ink-soft)} .cjm-pain::before{content:"Pain — ";font-weight:600;color:#b0553f} .cjm-built{color:var(--ink);margin-top:.5rem} .cjm-built::before{content:"Built — ";font-weight:600;color:var(--accent)} .cjm-hint{font-size:.8rem;color:var(--ink-soft);margin:.9rem .3rem 0} /* ---------- "All works" reads as a back action on case-study pages ---------- */ .site-nav .nav-arrow{display:inline-flex;align-items:center;gap:.42rem} .site-nav .nav-arrow svg{ width:14px;height:14px; fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round; transition:transform .3s var(--ease-out); } .site-nav .nav-arrow:hover svg{transform:translateX(-3px)} @media(prefers-reduced-motion:reduce){ .site-nav .nav-arrow:hover svg{transform:none} } /* ---------- case-study floating controls: back + back-to-top ---------- */ .cs-controls{ position:fixed;z-index:60; right:var(--gutter);bottom:clamp(1.25rem,4vh,2.4rem); display:flex;flex-direction:column;gap:.6rem; opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); } .cs-controls.in{opacity:1;transform:none;pointer-events:auto} .cs-fab{ width:48px;height:48px;border-radius:999px; display:grid;place-items:center; background:rgba(250,248,244,.9); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid var(--line); color:var(--ink);text-decoration:none;cursor:pointer; box-shadow:0 10px 24px -14px rgba(27,23,19,.45); transition:background .25s, color .25s, border-color .25s, transform .3s var(--ease-out); } .cs-fab:hover{ background:var(--accent);border-color:var(--accent);color:#fff; transform:translateY(-3px); } .cs-fab svg{ width:18px;height:18px; fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; } @media(max-width:560px){ .cs-fab{width:44px;height:44px} .cs-fab svg{width:16px;height:16px} } @media(prefers-reduced-motion:reduce){ .cs-controls{transform:none;transition:opacity .2s linear} .cs-fab:hover{transform:none} }