/* Nick Palmer portfolio v3: dark Figma canvas as the gallery wall */ /* Night Shift: the one :root (merged from earlier passes in v19) */ :root{--canvas:#0F1420;--dot:#1A2030;--surface:var(--card);--surface-2:var(--raised);--line:rgba(237,241,247,.08);--line-2:rgba(237,241,247,.14);--text:#EDF1F7;--muted:#A3AEC2;--faint:#7E8AA0;--sel:var(--accent);--purple:var(--accent);--display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--s-8:8px;--s-16:16px;--s-24:24px;--s-32:32px;--s-48:48px;--s-64:64px;--s-96:96px;--s-160:160px;--pad:24px;--max:1320px;--bar:56px;--r:12px;--ease:cubic-bezier(.2,.7,.2,1);--settle:cubic-bezier(.22,1.12,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);--on-sel:#0F1420;--deep:#080B12;--warm:var(--accent);--opt-c:var(--sel);--pill-active-mix:16%;--raised:#151B29;--card:#1B2233;--overlay:#222A3D;--body-ink:#C9D1DE;--accent:#7CC4FF;--accent-tint:rgba(124,196,255,.14);--bar-bg:rgba(15,20,32,.86);--hover-bg:var(--card);--pop-bg:var(--overlay);--pop-line:transparent;--pop-shadow:0 16px 40px -12px rgba(0,0,0,.6);--tag-bg:#EDF1F7;--tag-ink:#0F1420;--mat:var(--card);--mat-line:rgba(237,241,247,.08);--panel:var(--card);--panel-text:var(--text);--panel-muted:var(--muted);--panel-line:var(--line);--panel-accent:var(--accent);--pill-blue:#7CC4FF;--pill-purple:#C9A2FF;--pill-yellow:#FFD166;--pill-green:#8EE6B0;--pill-orange:#FF9E7A;--pill-plain:#EDF1F7;--pill-hover-mix:14%} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 32px);color-scheme:dark} body{font-family:var(--body);color:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; background-color:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:24px 24px;background-position:-11px -11px} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:64px;background:#fff;color:#000;padding:8px 12px;z-index:200} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .nw{white-space:nowrap} /* ---- type scale: XL / L / M / body / one label ---- */ .lbl{font:500 11px/1.4 var(--mono);letter-spacing:.03em;color:rgba(242,242,242,.5)} .d-xl{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.92;font-size:clamp(52px,10vw,156px)} .d-l{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(36px,6vw,88px)} .d-m{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(26px,2.6vw,38px)} .lede{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.2;font-size:clamp(22px,2.4vw,34px);color:var(--muted);max-width:26ch;margin-top:var(--s-32)} /* ---- toolbar (slim) ---- */ .bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:100;background:rgba(30,30,30,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)} .bar-in{height:100%;display:flex;align-items:center;gap:24px;padding:0 16px} .logo{display:flex;align-items:center;gap:8px} .logo-mark{width:28px;height:28px;border-radius:7px;background:var(--text);color:var(--canvas);display:grid;place-items:center;font:800 11.5px/1 var(--display);letter-spacing:-.02em} .name{font-size:14px;font-weight:600} .tabs{display:flex;gap:4px;list-style:none} .tabs a{display:flex;align-items:center;height:32px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;color:var(--muted);transition:background .2s,color .2s} .tabs a:hover{background:var(--overlay);color:var(--text)} .tabs a[aria-current]{color:var(--text);background:var(--overlay)} .cta{margin-left:auto;display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:6px;background:var(--sel);color:#fff;font-size:14px;font-weight:600;transition:background .2s} .cta:hover{background:#0b85e0} /* ---- board / frames ---- */ main{display:block;padding:calc(var(--bar) + var(--s-64)) 0 var(--s-96)} .board{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .frame{position:relative;margin-top:var(--s-160)} .frame:first-child{margin-top:0} .f-label{margin-bottom:12px;transition:color .2s} .f-body{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s} .f-body.bare{background:transparent;border-color:transparent} .frame:not(.nosel):hover>.f-label{color:var(--sel)} .frame:not(.nosel):hover>.f-body{border-color:var(--sel)} .h{position:absolute;width:8px;height:8px;background:#fff;border:1px solid var(--sel);opacity:0;transition:opacity .2s;pointer-events:none;z-index:3} .h.tl{left:-4.5px;top:-4.5px}.h.tr{right:-4.5px;top:-4.5px}.h.bl{left:-4.5px;bottom:-4.5px}.h.br{right:-4.5px;bottom:-4.5px} .frame:hover>.f-body>.h{opacity:1} .dim{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);background:var(--sel);color:#fff;font:500 10.5px/1 var(--mono);padding:4px 8px;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:3} .frame:hover>.f-body>.dim{opacity:1} .f-body.bare{margin:0 -24px;padding:0 24px} .f-body.bare>.h.tl,.f-body.bare>.h.bl{left:-4.5px} /* ---- hero (no card) ---- */ .hero .f-body{padding-top:24px;padding-bottom:24px} .hero .d-xl{max-width:11ch} .hero .lede{margin-top:var(--s-24)} .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s-64);border-top:1px solid var(--line)} .stat{padding:var(--s-24) var(--s-24) 0 0} .stat+.stat{padding-left:var(--s-24);border-left:1px solid var(--line)} .stat b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1} .stat span{display:block;color:var(--muted);margin-top:8px;font-size:15px} .hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-16);margin-top:var(--s-48)} .btns{display:flex;flex-wrap:wrap;gap:var(--s-8)} .btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:8px;font-weight:600;font-size:15px;border:1px solid var(--line-2);color:var(--text);transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)} .btn.solid{background:var(--text);border-color:var(--text);color:var(--text)} .btn:hover{border-color:var(--sel)} .btn.solid:hover{background:var(--sel);border-color:var(--sel);color:#fff} .btn .arr{transition:transform .25s var(--ease)}.btn:hover .arr{transform:translateX(3px)} .btn.pressed{transform:scale(.96)} .btn.pressed::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--sel);border-radius:11px;animation:ring .6s var(--ease) forwards} @keyframes ring{from{opacity:1;transform:scale(.96)}to{opacity:0;transform:scale(1.08)}} /* intro cursor (home, once per session) */ /* ---- work tiles ---- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-96) var(--s-48)} .tile.big{grid-column:1/-1} .t-media{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:visible;background:var(--surface-2);transition:border-color .2s} .t-link{display:block;border-radius:calc(var(--r) - 1px);overflow:hidden} .t-link img{width:100%;transition:transform 1.1s var(--ease)} .tile:hover .t-media{border-color:var(--sel)} .tile:hover .t-link img{transform:scale(1.015)} .tile.big .t-link{aspect-ratio:16/8.2} .tile.big .t-link img{height:100%;object-fit:cover;object-position:50% 40%} .t-media.fit .t-link{position:relative;aspect-ratio:4/3} .t-media.fit .t-link img{position:absolute;inset:clamp(20px,3vw,40px);width:calc(100% - 2*clamp(20px,3vw,40px));height:calc(100% - 2*clamp(20px,3vw,40px));object-fit:contain} .t-info{display:grid;gap:12px;margin-top:var(--s-24);max-width:44ch} .tile.big .t-info{grid-template-columns:1fr auto;max-width:none;align-items:end;column-gap:var(--s-48)} .tile.big .t-info .lbl,.tile.big .t-info .d-m,.tile.big .t-info .t-hook{grid-column:1} .tile.big .t-go{grid-column:2;grid-row:1/4;align-self:end} .t-hook{color:var(--muted);max-width:44ch} .t-go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;margin-top:4px;transition:color .2s} .t-go i{font-style:normal;transition:transform .25s var(--ease)} .t-info:hover .t-go{color:var(--sel)}.t-info:hover .t-go i{transform:translateX(4px)} .t-info:hover .d-m{color:#fff} /* ---- comment pin ---- */ .pin{position:absolute;right:20px;top:20px;z-index:5;display:flex;align-items:flex-start;gap:0;text-align:left} .pin-av{width:32px;height:32px;flex:none;border-radius:50% 50% 50% 4px;background:#fff;color:var(--text);display:grid;place-items:center;font:700 11px/1 var(--display);box-shadow:0 0 0 2px var(--canvas),0 6px 16px rgba(0,0,0,.35);transition:transform .25s var(--ease)} .pin-body{display:grid;gap:4px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 0;margin-left:8px;transition:max-width .35s var(--ease),opacity .25s,padding .35s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.4)} .pin-body b{font:600 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--text)} .pin:hover .pin-av,.pin[aria-expanded="true"] .pin-av{transform:scale(1.06)} .pin:hover .pin-body,.pin:focus-visible .pin-body,.pin[aria-expanded="true"] .pin-body{max-width:320px;opacity:1;padding:8px 16px} .pin{flex-direction:row-reverse}.pin .pin-body{margin:0 8px 0 0} /* ---- logos (component set) ---- */ .logos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16)} .logo-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/10;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:16px;transition:border-color .2s,background .2s} .logo-tile:hover{border-color:var(--purple);background:var(--surface)} .lg-wrap{position:relative;flex:1;display:grid;place-items:center} .lg{grid-area:1/1;height:calc(var(--h) * var(--lk,1));width:auto;max-width:82%;opacity:.78;transition:opacity .25s} .lg.col{opacity:0} .logo-tile:hover .lg{opacity:1} .logo-tile.has-col:hover .lg:not(.col){opacity:0} .logo-tile.has-col:hover .lg.col{opacity:1} .lg-name{display:flex;align-items:center;gap:8px} .lg-name svg{width:10px;height:10px;color:var(--purple);flex:none} /* ---- contact ---- */ .contact .inner{padding:clamp(32px,6vw,88px)} .contact .d-l{max-width:15ch} .contact .btns{margin-top:var(--s-48)} .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:var(--s-96);padding-top:var(--s-24);border-top:1px solid var(--line)} /* ---- case study ---- */ .cs-head .f-body{padding-top:16px;padding-bottom:16px} .cs-head .d-xl{max-width:14ch} .media{position:relative;padding:clamp(8px,1.4vw,16px)} .media img{width:100%;border-radius:6px} .media.pad{padding:clamp(16px,3vw,48px)} .media>img+img{margin-top:clamp(8px,1.4vw,16px)} .story{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-48);border-top:1px solid var(--line);padding-top:var(--s-32)} .story .lbl{margin-bottom:var(--s-16)} .story p{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted)} .story .result p{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.15;letter-spacing:-.025em;color:var(--text)} .grid{display:grid;gap:clamp(8px,1.4vw,20px);align-items:center} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)} .narrow{max-width:960px;margin:0 auto} .next a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-24);padding:var(--s-32) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .next .d-l{transition:color .25s} .next a:hover .d-l{color:var(--sel)} .go{flex:none;width:64px;height:64px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:22px;transition:background .25s,border-color .25s,transform .35s var(--ease)} .next a:hover .go{background:var(--sel);border-color:var(--sel);transform:rotate(-45deg)} /* layers: collapsed icon, case studies only */ .layers{position:fixed;left:16px;top:calc(var(--bar) + 24px);z-index:60} .layers-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;transition:color .2s,border-color .2s} .layers-btn svg{width:16px;height:16px} .layers-btn:hover,.layers-btn[aria-expanded="true"]{color:var(--text);border-color:var(--sel)} .layers-pop{margin-top:8px;width:208px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 12px 32px rgba(0,0,0,.45)} .layers-pop .lbl{padding:8px 8px 8px} .layers ol{list-style:none} .layers a{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:5px;font-size:12px;color:var(--muted)} .layers a svg{width:11px;height:11px;flex:none;color:var(--faint)} .layers .sub a svg{color:var(--purple)} .layers a:hover{background:var(--overlay)} .layers a.on{background:rgba(13,153,255,.16);color:#fff} .layers .sub a{padding-left:26px} /* ---- about ---- */ .about-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:start;margin-top:var(--s-96);border-top:1px solid var(--line);padding-top:var(--s-48)} .about-grid .big{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.3;font-size:clamp(22px,2.2vw,30px)} .about-grid .rest p{color:var(--muted);margin-bottom:var(--s-16)} .quote{margin-top:var(--s-32);display:flex;gap:12px;align-items:flex-start} .quote .who{width:32px;height:32px;border-radius:50% 50% 50% 4px;background:var(--purple);color:#fff;display:grid;place-items:center;font:700 11px/1 var(--display);flex:none} .quote>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px} .quote blockquote p{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--text);margin:0} .quote figcaption{color:var(--muted);margin-top:8px;font-size:14px} .tools{border-top:1px solid var(--line);padding-top:var(--s-32)} .tools p{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.3;font-size:clamp(22px,2.2vw,30px);max-width:36ch} /* ---- motion: frames settle into place ---- */ .reveal{opacity:0;transform:translateY(18px) scale(.992);transition:opacity .5s ease-out,transform .7s var(--settle)} .reveal.in{opacity:1;transform:none} .no-js .reveal{opacity:1;transform:none} /* ---- responsive ---- */ @media (max-width:1100px){.tile.big .t-info{grid-template-columns:1fr}.tile.big .t-go{grid-column:1;grid-row:auto}} @media (max-width:1400px){.layers{display:none}} @media (max-width:900px){ :root{--bar:52px} .bar-in{gap:12px;padding:0 12px} .tabs a[aria-current]{background:none} .cta{background:none;color:var(--text);padding:0 8px} .h,.dim{display:none!important} .frame:hover>.f-body{border-color:var(--line)} .frame:hover>.f-body.bare{border-color:transparent} .frame:hover>.f-label{color:rgba(242,242,242,.5)} .f-body.bare{margin:0;padding:0} main{padding-top:calc(var(--bar) + var(--s-48))} .frame{margin-top:var(--s-96)} .stats{grid-template-columns:1fr 1fr;margin-top:var(--s-48)} .stat,.stat+.stat{padding:var(--s-16) var(--s-16) var(--s-16) 0;border-left:0} .stat:nth-child(even){padding-left:var(--s-16);border-left:1px solid var(--line)} .stat:nth-child(n+3){border-top:1px solid var(--line)} .tiles{grid-template-columns:1fr;gap:var(--s-64)} .tile.big .t-link{aspect-ratio:4/3} .logos{grid-template-columns:1fr 1fr;gap:var(--s-8)} .lg{--lk:.72} .story,.about-grid{grid-template-columns:1fr;gap:var(--s-32)} .g4,.g5{grid-template-columns:repeat(2,1fr)} .pin{right:12px;top:12px} } @media (max-width:560px){ body{font-size:16px} .name{display:none} .g3{grid-template-columns:1fr 1fr} .go{width:48px;height:48px} } @media (hover:none){.tile:hover .t-link img{transform:none}} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation:none!important} } .lede,.d-xl,.d-l,.d-m{text-wrap:balance} @media (max-width:900px){.tile.big .t-link img{object-position:18% 40%}} /* =================== v4: case-study system =================== */ .case .frame{margin-top:var(--s-128,128px)} .case .frame:first-child{margin-top:0} /* full-bleed hero */ .bleed-f .f-label{max-width:var(--max);margin-left:auto;margin-right:auto} .bleed{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:min(78vh,820px);overflow:hidden;background:var(--overlay);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bleed>img,.bleed>picture>img{width:100%;height:100%;object-fit:cover} .bleed .pin{right:max(24px,calc(50vw - 640px));top:28px} .bleed.tri{display:grid;grid-template-columns:repeat(3,1fr);height:auto} .bleed.tri img{width:100%;height:100%;object-fit:cover;aspect-ratio:1} .bleed.stage{height:auto;padding:clamp(40px,7vw,104px) 0;background:radial-gradient(ellipse at 50% 40%,#2a3442,var(--overlay) 70%)} .bleed.stage .phones{justify-content:center} .cs-dock-pro-amazon .bleed>img{object-position:50% 60%} /* results band */ .res-band{display:grid;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .res-band.n1{grid-template-columns:1fr}.res-band.n2{grid-template-columns:1.4fr 1fr}.res-band.n3{grid-template-columns:repeat(3,1fr)} .res{padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,32px) clamp(28px,4vw,56px) 0} .res+.res{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line)} .res b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(56px,9vw,136px)} .res:not(:first-child) b{font-size:clamp(44px,6vw,88px)} .res span{display:block;margin-top:16px;color:var(--muted);max-width:30ch} /* narrative sections */ .sec{display:grid;gap:clamp(28px,4vw,64px);align-items:center} .sec.split{grid-template-columns:4fr 7fr} .sec.split.rev{grid-template-columns:7fr 4fr} .sec.split.rev .cap{order:2} .sec.stack .cap{display:grid;grid-template-columns:4fr 7fr;gap:clamp(28px,4vw,64px);align-items:end} .sec .cap p{color:var(--muted);max-width:42ch;margin-top:16px} .sec.stack .cap p{margin-top:0} .sec.wide .art{margin-right:calc(-1 * var(--pad))} .bigline{padding:clamp(24px,4vw,56px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bigline .d-l{max-width:16ch;background:linear-gradient(90deg,#c9b8ff,#8fd3ff);-webkit-background-clip:text;background-clip:text;color:transparent} .cap-s{color:var(--muted);margin-top:var(--s-24);max-width:46ch} /* device: phone */ .phones{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;align-items:flex-start} .phone{width:clamp(220px,22vw,290px);flex:none;padding:8px;border-radius:42px;background:#0d0d0d;border:1px solid #3d3d3d;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 2px #1b1b1b;position:relative} .phone::before{content:"";position:absolute;left:50%;top:17px;transform:translateX(-50%);width:28%;height:20px;border-radius:12px;background:#0d0d0d;z-index:2} .phone .screen{border-radius:33px;overflow:hidden;aspect-ratio:9/19.5;background:#111;position:relative} .phone.ph-story .screen img{width:100%;height:100%;object-fit:cover} .phone.ph-feed .screen{display:flex;flex-direction:column;background:#000} .ph-top{display:flex;align-items:center;gap:8px;padding:48px 12px 8px;font:600 11px/1 var(--body);color:#eee} .ph-top i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ff6a7f,#7b61ff);flex:none} .ph-post img{width:100%;aspect-ratio:1;object-fit:cover} .ph-foot{padding:12px;display:grid;gap:8px} .ph-foot b{display:block;height:7px;border-radius:4px;background:#262626}.ph-foot b.s{width:55%} .split.rev .art,.split .art{display:flex;justify-content:center} /* device: browser + laptop */ .browser{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--overlay);box-shadow:0 30px 60px -24px rgba(0,0,0,.6)} .b-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;background:var(--overlay);border-bottom:1px solid var(--line-2)} .b-bar i{width:9px;height:9px;border-radius:50%;background:#555} .b-bar span{margin-left:12px;flex:1;max-width:360px;height:18px;border-radius:5px;background:var(--overlay);color:var(--muted);font:500 10.5px/18px var(--mono);padding:0 8px;overflow:hidden;white-space:nowrap} .b-view img{width:100%} .laptop{max-width:1040px;margin:0 auto} .laptop .browser{border-radius:12px 12px 0 0;border-width:10px 10px 0;border-color:var(--line-2);box-shadow:none} .lt-base{height:18px;margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#3a3a3a,#232323);position:relative} .lt-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16%;height:6px;border-radius:0 0 8px 8px;background:#1a1a1a} .banner{margin-top:var(--s-16)}.banner img{width:100%;border-radius:6px} .art .browser{width:100%} .minis{display:flex;gap:var(--s-16);margin-top:var(--s-24);flex-wrap:wrap} .minis .browser{width:auto}.minis .b-bar span{max-width:140px} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)} .trio figcaption,.trio .lbl{margin-top:8px} .trio img,.grid img{border-radius:6px;width:100%} .strip img{opacity:.92} /* carousel */ .carousel{position:relative} .track{list-style:none;display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;padding:8px var(--pad) 28px 0;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain} .track::-webkit-scrollbar{display:none} .track>li{scroll-snap-align:start;flex:none} .track.dragging{cursor:grabbing;scroll-snap-type:none} .track.dragging img{pointer-events:none} .cards .track>li{width:clamp(220px,26vw,340px)}.cards img{width:100%;border-radius:8px;border:1px solid var(--line)} .wide-cards .track>li{width:clamp(280px,58vw,760px)}.wide-cards img{width:100%;border-radius:6px} .car-nav{display:flex;gap:8px;margin-top:4px} .car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--text);transition:border-color .2s,background .2s} .car-btn:hover{border-color:var(--sel);background:rgba(13,153,255,.12)} .car-btn:disabled{opacity:.3;pointer-events:none} /* before / after */ .ba{position:relative;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:pan-y} .ba img{width:100%;display:block} .ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .ba-before img{height:100%;object-fit:cover} .ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.4)} .ba-line b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#141414;display:grid;place-items:center;font-size:17px;box-shadow:0 6px 18px rgba(0,0,0,.35)} .ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y} .ba input:focus-visible~.ba-line b{outline:2px solid var(--sel);outline-offset:3px} .ba-tag{position:absolute;top:12px;background:rgba(20,20,20,.78);color:var(--text);padding:4px 8px;border-radius:4px;pointer-events:none} .ba-tag.l{left:12px}.ba-tag.r{right:12px} .ba:has(input:focus-visible) .ba-line b{outline:2px solid var(--sel);outline-offset:3px} @media (max-width:1100px){.sec.split,.sec.split.rev{grid-template-columns:1fr 1fr}} @media (max-width:900px){ .case .frame{margin-top:var(--s-96)} .bleed{height:56vh} .bleed.tri{grid-template-columns:1fr 1fr 1fr} .bleed.stage .phones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 20px;scroll-snap-type:x mandatory} .bleed.stage .phone{scroll-snap-align:center;width:62vw} .sec.split,.sec.split.rev,.sec.stack .cap{grid-template-columns:1fr} .sec.split.rev .cap{order:0} .res-band.n2,.res-band.n3{grid-template-columns:1fr} .res+.res{padding-left:0;border-left:0;border-top:1px solid var(--line)} .phones{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);padding-bottom:8px} .phone{width:64vw;scroll-snap-align:start} .trio{grid-template-columns:1fr} .car-nav{display:none} } @media (prefers-reduced-motion:reduce){.track{scroll-behavior:auto}} body{overflow-x:clip} .sec>*,.sec .art,.sec .cap{min-width:0} .phone .screen>img,.phone .screen>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .phone.ph-feed .screen{aspect-ratio:9/17} .ph-post+.ph-foot+.ph-post{opacity:.38} .carousel.static .car-nav{display:none} .art>.carousel{width:100%;min-width:0} .split .art,.split.rev .art{flex-direction:column;align-items:center} .split .art>.browser,.split .art>.banner,.split .art>.ba{width:100%} .cs-dock-pro-amazon .bleed>img{object-position:50% 40%} .phone{display:block}.phone .screen{width:100%} .strip{max-width:880px} .phone.ph-story .screen{aspect-ratio:9/16} /* direct mail & print */ .brands-dm .d-m{margin-bottom:var(--s-24)} .brandlist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .brandlist li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;color:var(--text);background:var(--overlay)} .also{margin-top:var(--s-24);color:var(--muted,var(--muted));font-size:15px} .figs figure{margin:0;display:flex;flex-direction:column;gap:8px} .figs figure img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line)} .figs figcaption{opacity:.7} .grid.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24);align-items:start} .grid.g3.small{max-width:1040px} .stat-inline{margin-top:var(--s-24);display:flex;align-items:baseline;gap:8px;color:var(--muted)} .stat-inline b{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-.03em;color:var(--text)} @media (max-width:899px){.grid.g3{grid-template-columns:1fr 1fr;gap:16px}} .grid.g3.small figure img{aspect-ratio:4/3;object-fit:cover;object-position:50% 0;background:#fff} @media (max-width:899px){.minis{display:grid;grid-template-columns:1fr 1fr;gap:12px}} /* ===== v5 motion accents ===== */ .cs-wait-what,.cs-sleepme-social,.cs-dock-pro-amazon{--c1:#7FD1F7;--c2:#B9A6FF} .cs-direct-mail-print{--c1:#78B8FF;--c2:#F4C35E} .cs-yandy-swim-giphy{--c1:#FF8FB8;--c2:#FFD27A} .mo{display:inline-block;width:var(--mo,44px);height:var(--mo,44px);color:var(--c1);flex:none;vertical-align:middle;line-height:0} .mo svg{width:100%;height:100%;overflow:visible;display:block} .mo svg *{transform-box:fill-box;transform-origin:50% 50%} .mo:not(.on) *{animation-play-state:paused!important} .mo .f1{fill:var(--c1)}.mo .f2{fill:var(--c2)} .mo .s0,.mo .s1,.mo .s2{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .mo .s0{stroke:#cfcfcf}.mo .s1{stroke:var(--c1)}.mo .s2{stroke:var(--c2)} /* moon */ /* zzz */ @keyframes z-in{from{opacity:0;transform:translate(-6px,8px) scale(.6)}} /* thermometer: warm -> cool */ /* droplet */ @keyframes drop{0%{transform:translateY(-16px) scale(.8);opacity:0}55%{transform:translateY(0) scale(1.08,.86);opacity:1}78%{transform:scale(.96,1.05)}100%{transform:none}} @keyframes rip{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}} /* envelope */ /* foil scratch-off */ /* stamp */ /* coupon snip */ /* wave */ /* snowflake */ /* sun */ /* sparkle burst */ /* gif frame + play */ /* up-arrow spark */ /* placement */ .d-m>.mo{display:flex;--mo:48px;margin-bottom:16px} .h-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px} .h-row .mo{--mo:64px;margin-bottom:.5em} .res{position:relative} .res>.mo{position:absolute;top:clamp(20px,3vw,40px);right:clamp(8px,1.6vw,24px);--mo:40px} .t-info .d-m>.mo{display:inline-block;--mo:24px;margin:0 0 0 8px;vertical-align:-2px} .mo-js .ba .ba-tag{transition:opacity .5s var(--out),transform .7s var(--spring)} .mo-js .ba:not(.seen) .ba-tag.l{opacity:0;transform:translateX(-10px)} .mo-js .ba:not(.seen) .ba-tag.r{opacity:0;transform:translateX(10px)} @media (max-width:899px){.d-m>.mo{--mo:34px;margin-bottom:8px}.h-row .mo{--mo:44px}.res>.mo{--mo:30px}.t-info .d-m>.mo{--mo:20px}} @media (prefers-reduced-motion:reduce){.mo *{animation:none!important}.mo-js .ba .ba-tag{transition:none}} .mo svg [transform]{transform-box:view-box;transform-origin:0 0} /* ===== v6: light Figma canvas ===== */ html{color-scheme:dark} .lbl{color:var(--muted)} .bar{background:rgba(245,245,245,.88);border-bottom:1px solid var(--line)} .tabs a:hover,.tabs a[aria-current]{background:var(--card)} .btn.solid{background:var(--overlay);border-color:var(--line-2);color:#fff} .t-info:hover .d-m{color:#000} .pin-av{background:var(--overlay);color:#fff;box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.18)} .pin-body{box-shadow:0 10px 30px rgba(0,0,0,.12)} .story p,.about-grid .rest p{color:var(--text)} .layers-pop{box-shadow:0 12px 32px rgba(0,0,0,.12)} .layers a{color:var(--text)}.layers a:hover{background:var(--card)}.layers a.on{background:rgba(13,153,255,.12);color:#0A6FB8} @media (max-width:900px){.frame:hover>.f-label{color:rgba(20,20,20,.5)}} .bleed{background:var(--card)} .bleed.stage{background:radial-gradient(ellipse at 50% 40%,#DCE9F5,var(--card) 70%)} .bigline .d-l{background-image:linear-gradient(90deg,#5B3FE0,#0A84C6)} .phone{box-shadow:0 30px 60px -22px rgba(0,0,0,.35),inset 0 0 0 2px #1b1b1b} .browser{background:#fff;box-shadow:0 30px 60px -26px rgba(0,0,0,.25)} .b-bar{background:var(--card);border-bottom-color:#E0E0E0}.b-bar i{background:#CFCFCF} .b-bar span{background:#fff;color:var(--muted);border:1px solid var(--line);line-height:16px} .lt-base{background:linear-gradient(#DADADA,#BDBDBD)}.lt-base::after{background:#A9A9A9} .brandlist li{background:#fff} .stat-inline{color:var(--text)} .car-btn:hover{background:rgba(13,153,255,.08)} .ba-line b{box-shadow:0 6px 18px rgba(0,0,0,.25)} /* dark accent blocks: contact + logo panel */ .contact>.f-body,.frame.brands>.f-body{--text:#F2F2F2;--muted:#A8A8A8;--line:#3A3A3A;--line-2:#4A4A4A;background:var(--overlay);border-color:var(--line-2);color:var(--text)} .contact>.f-body .lbl,.frame.brands>.f-body .lbl{color:var(--muted)} .contact .btn.solid{background:#fff;border-color:#fff;color:var(--text)} .contact .btn.solid:hover{background:var(--sel);border-color:var(--sel);color:#fff} .frame.brands>.f-body{margin:0;padding:clamp(16px,2.6vw,36px);border-radius:16px} .frame.brands:hover>.f-body{border-color:var(--line-2)} .logo-tile,.logo-tile:hover{background:var(--overlay);border-color:var(--line-2)} .lg,.logo-tile:hover .lg{opacity:1} .lg-name svg{color:#B48CFF} /* motion palettes (saturated mid-tones for light canvas) */ .cs-wait-what,.cs-sleepme-social,.cs-dock-pro-amazon{--c1:#0A84C6;--c2:#5B3FE0} .cs-direct-mail-print{--c1:#2456D6;--c2:#F08A00} .cs-yandy-swim-giphy{--c1:#E0007A;--c2:#FF8A00} .mo .s0{stroke:#6B6B6B} /* water channel */ /* 55-115F dial */ /* snooze toggle */ /* postcard flip (self-mailer) */ /* 3-step lockup transition */ .mo.mo-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:auto;height:auto;line-height:1.2;list-style:none;margin:var(--s-24) 0 0;padding:0;color:inherit} .mo-steps .stp{display:flex;align-items:center;gap:8px;font:600 14px/1.2 var(--display);letter-spacing:-.01em} .mo-steps .stp span{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:8px 12px;color:var(--text)} .mo-steps .stp+.stp::before{content:"→";color:var(--faint);font-weight:400} .mo-steps .s2 span{border-color:var(--c1);color:var(--c1);box-shadow:0 0 0 3px rgba(10,132,198,.12)} .mo-steps .stp{animation:stp-in .55s var(--spring) both}.mo-steps .s1{animation-delay:.45s}.mo-steps .s2{animation-delay:.9s} @keyframes stp-in{from{opacity:0;transform:translateY(8px)}} @media (max-width:899px){.mo-steps .stp{font-size:13px}} /* v6 contrast fixes */ .ba-tag.lbl,.ba .ba-tag{color:#fff;background:rgba(20,20,20,.82)} .cta{background:#0A6FC2}.cta:hover{background:#085DA3} .mo-steps .s2 span{color:#075E96;border-color:#7FBDE6;background:#EEF7FD} @media (max-width:899px){.cta{background:none}} /* ===================== v10: audit pass ===================== */ /* labels: 12px, solid muted grey (AA) */ .lbl{font-size:12px} .fig-t{opacity:1} .frame{margin-top:96px} .frame:first-child{margin-top:0} @media (max-width:899px){.frame{margin-top:64px}} /* home hero: compact so the first folder tab shows in the first screen */ main.home{padding-top:calc(var(--bar) + 28px)} .hero .f-body{padding-top:8px;padding-bottom:8px} .hero .d-xl{font-size:clamp(44px,6.2vw,96px);max-width:13ch;line-height:.95} .hero .lede{margin-top:16px;font-size:clamp(19px,1.8vw,26px);max-width:34ch} .hero .stats{margin-top:28px} .hero .stat{padding:16px 16px 16px 0} .hero .stat+.stat{padding-left:20px} .hero .stat b{font-size:clamp(30px,3.1vw,44px)} .hero .stat>span:not(.stat-src){margin-top:8px;font-size:14px} .hero .stat-src{margin-top:4px} .hero-foot{margin-top:16px} .frame.work{margin-top:36px} @media (max-width:899px){ main.home{padding-top:calc(var(--bar) + 16px)} .hero .d-xl{font-size:40px} .hero .lede{font-size:18px;margin-top:12px} .hero .stats{margin-top:16px} .hero .stat,.hero .stat+.stat,.hero .stat:nth-child(even){padding:8px 8px 8px 0} .hero .stat:nth-child(even){padding-left:12px} .hero .stat b{font-size:28px} .hero .stat>span:not(.stat-src){font-size:13px;margin-top:4px} .hero-foot{margin-top:16px} .frame.work{margin-top:24px} } /* lazy video loops */ video.lazy-vid{display:block;width:100%;height:100%;object-fit:cover;background:var(--overlay)} .phone .screen video.lazy-vid{position:absolute;inset:0} /* case-study arc */ .res-line{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em;max-width:30ch;margin:0 0 var(--s-32)} .story.s2{grid-template-columns:repeat(2,1fr)} @media (max-width:899px){.story.s2{grid-template-columns:1fr}} .art.has-pin{position:relative} .art.has-pin>.pin{top:12px;right:12px} .role{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:20px;margin:0} .role dt{margin-bottom:8px}.role dd{margin:0;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em} @media (max-width:899px){.role{grid-template-columns:1fr 1fr}} .home-quote{margin:0;max-width:760px} .home-quote blockquote p{font-size:clamp(20px,2vw,26px)} /* folder -> case study transition */ /* v20: cross-document view transition removed (it cross-faded the old headline over the new hero) */ /* the work frame sits in the first screen: no entrance fade */ .frame.work.reveal{opacity:1;transform:none;transition:none} /* ===================== v11: pre-launch QA ===================== */ main{padding-bottom:var(--s-48)} .site-foot{padding:0 0 40px} .site-foot .foot{margin:0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)} .quote-f .home-quote{margin-top:0} /* narrow screens: nothing wider than the viewport */ html,body{overflow-x:clip} .hero .stat{min-width:0} .hero .stat b{overflow-wrap:anywhere} @media (max-width:420px){ .hero .d-xl{font-size:clamp(32px,10.4vw,40px)} .hero .stat b{font-size:clamp(24px,7.6vw,28px)} .hero .stat-src{font-size:11px} .hero-foot .btn{padding-left:16px;padding-right:16px} } @media (max-width:899px){.pin[aria-expanded="false"] .pin-body{display:none}} .logos{grid-template-columns:repeat(4,minmax(0,1fr))} .logo-tile,.lg-wrap{min-width:0} .lg{max-width:82%;object-fit:contain} @media (max-width:899px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:380px){.logo-tile{padding:12px}.lg-name{font-size:11px}} /* rebrand slider: one rounded frame, 1:1 at 2x, labels travel with their image */ .ba.ba2{max-width:600px;margin-inline:auto;aspect-ratio:1/1;border:0;border-radius:12px;overflow:hidden;isolation:isolate;background:var(--overlay)} .split .art>.ba.ba2{width:100%} .ba2 .ba-after,.ba2 .ba-before{position:absolute;inset:0} .ba2 img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block} .ba2 .ba-tag{top:12px} .ba2 .ba-before .ba-tag.l{left:12px}.ba2 .ba-after .ba-tag.r{right:12px} /* ===================== v12: clients through Valassis ===================== */ .cl-intro{margin:0 0 20px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--text);max-width:46ch} .client-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .client-list li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--text);background:var(--surface);white-space:nowrap} @media (max-width:899px){.client-list{gap:8px}.client-list li{font-size:14px;padding:8px 13px}} /* v12b: seven logos, 4 + 3 centered (2-up on phones, last one centered) */ .logos.logos7{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-16)} .logos7 .logo-tile{flex:0 0 calc((100% - 3 * var(--s-16)) / 4);min-width:0} @media (max-width:899px){ .logos.logos7{gap:var(--s-8)} .logos7 .logo-tile{flex-basis:calc((100% - var(--s-8)) / 2)} } @media (max-width:899px){ .logos7 .lg{max-width:90%} .logos7 .lg-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} } /* ===================== v13: condensed copy — result once at top, three-line "What I did", text-only sections */ .res-line.res-xl{font-size:clamp(30px,4.4vw,60px);line-height:1.05;letter-spacing:-.035em;max-width:22ch;margin:0;color:var(--text)} .res-band.n1 .res span{max-width:44ch} .story ul.did{list-style:none;margin:0;padding:0;display:grid;gap:12px} .story ul.did li{position:relative;padding-left:20px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--text)} .story ul.did li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:#5B3FE0} .sec-t{max-width:60ch} .sec-t .d-m{margin-bottom:var(--s-16)} .sec-t p{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--text)} .res-band .res b{overflow-wrap:anywhere} @media (max-width:899px){.res-line.res-xl{font-size:clamp(28px,8.4vw,40px)}} @media (min-width:900px){.hero .d-xl{max-width:16.5ch}} /* ===================== v14: 3D flippable postcards (Direct Mail) */ .flips{display:grid;gap:clamp(28px,3vw,44px);width:100%;min-width:0} .flips.f2{grid-template-columns:repeat(2,minmax(0,1fr))} .flip-after{margin-top:clamp(28px,3vw,40px)} .flip{margin:0;min-width:0} .flip-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)} .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.34,1.42,.5,1)} .flip-chip{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;padding:4px 8px 4px 8px;border-radius:999px; background:rgba(20,20,20,.82);color:#fff;font-size:12px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .2s ease,background .2s ease;pointer-events:none} .flip-chip svg{width:13px;height:13px} .flip-cap{display:block;margin-top:16px;color:var(--muted)} .flip-cap .fc-back{display:none} .wide-cards .track>li .flip{width:100%} @media (max-width:899px){ .flips.f2{grid-template-columns:1fr} .flip-chip{right:8px;bottom:8px} } @media (prefers-reduced-motion:reduce){ .flip-tilt,.flip-inner{transition:none!important;transform:none!important;animation:none!important} } /* ===================== v15: Valassis client logos (one ink, equal tiles) */ .client-logos{list-style:none;margin:var(--s-24) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .cl-tile{display:flex;align-items:center;justify-content:center;min-width:0;height:96px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff} .cl-logo{display:block;height:var(--h);width:auto;max-width:100%;object-fit:contain} .cl-word{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1;letter-spacing:-.02em;color:var(--text);text-align:center} @media (max-width:899px){.client-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cl-tile{height:84px}.cl-logo{height:calc(var(--h) * .9)}} /* v15: Wait What? feed sliver = a generic next post, not the ad again */ .ph-next{opacity:.9} .ph-next .ph-top{padding:12px 12px 8px} .ph-next .ph-top i.a1{background:linear-gradient(135deg,#f0b27a,#c0605a)}.ph-next .ph-top i.a2{background:linear-gradient(135deg,#9ad0c2,#3d7a8a)} .ph-next .ph-top i.a3{background:linear-gradient(135deg,#d7d2c8,#8a8378)}.ph-next .ph-top i.a4{background:linear-gradient(135deg,#b9b4e8,#5b5f9e)} .ph-next .ph-top i.a5{background:linear-gradient(135deg,#e8d48a,#9b7b3a)} .ph-gen{aspect-ratio:1;width:100%} .ph-gen.g1{background:linear-gradient(180deg,#f4c99b 0%,#e89a7a 38%,#7b6f8e 70%,#2f3446 100%)} .ph-gen.g2{background:radial-gradient(120% 80% at 30% 20%,#e9e4da 0%,#c9c1b2 45%,#8c8476 100%)} .ph-gen.g3{background:linear-gradient(160deg,#a7c4a0 0%,#5f8a63 45%,#2e4a36 100%)} .ph-gen.g4{background:linear-gradient(180deg,#bfd9ec 0%,#7fa9cc 50%,#d8c9a8 51%,#b9a47e 100%)} .ph-gen.g5{background:#3a3a3c} /* ===================== v15: Direct Mail scroll story */ .mailseq .ms{position:relative} .ms-counter,.ms-rail,.ms-tag,.ms-flip,.ms-shadow,.ms-core,.ms-glare,.ms-dim{display:none} /* static (no JS / reduced motion): a front/back pair per mailer */ .ms-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line)} .ms-item:first-of-type{border-top:0} .ms-count{color:var(--muted);margin-bottom:8px} .ms-brand{margin:0 0 8px} .ms-cap{color:var(--text);font-size:clamp(16px,1.3vw,18px);line-height:1.5;max-width:36ch} .ms-res{margin-top:var(--s-24)} .ms-res b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(56px,7vw,112px);color:var(--text)} .ms-res span{display:block;margin-top:8px;color:var(--muted);max-width:30ch} .ms-rot{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ms-face{position:relative;border-radius:4px;overflow:hidden;background:#faf8f4;border:1px solid rgba(20,20,20,.10);box-shadow:0 1px 0 #ddd6c9,0 10px 24px -14px rgba(20,16,10,.35)} .ms-face img{display:block;width:100%;height:100%;object-fit:cover} /* scrubbed + pinned (desktop, motion ok) */ .ms.is-scrub{height:calc(100vh - var(--bar) + var(--n) * 95vh)} .ms.is-scrub .ms-pin{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.7fr);grid-template-rows:1fr;column-gap:clamp(24px,4vw,64px);align-items:center} .ms.is-scrub .ms-item{display:contents} .ms.is-scrub .ms-count{display:none} .ms.is-scrub .ms-text{grid-area:1/1;opacity:0;transform:translate3d(0,18px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none} .ms.is-scrub .ms-item.is-on .ms-text{opacity:1;transform:none;pointer-events:auto} .ms.is-scrub .ms-counter{display:block;grid-area:1/1;align-self:start;margin-top:clamp(24px,5vh,56px);color:var(--muted);font-variant-numeric:tabular-nums} .ms-counter .ms-ci{color:var(--text)} .ms.is-scrub .ms-rail{display:block;grid-area:1/1;align-self:end;margin-bottom:clamp(24px,5vh,56px);height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:220px} .ms-rail i{display:block;height:100%;background:var(--overlay);transform-origin:0 50%;transform:scaleX(0)} .ms.is-scrub .ms-card{grid-area:1/2;justify-self:center;position:relative;width:min(100%,calc((100vh - var(--bar) - 190px) * var(--arn)));aspect-ratio:var(--ar);perspective:1200px;opacity:0;will-change:transform,opacity} .ms.is-scrub .ms-rot,.ms.is-tap .ms-rot{display:block;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} .ms.is-scrub .ms-face,.ms.is-tap .ms-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .ms.is-scrub .ms-front,.ms.is-tap .ms-front{transform:translateZ(1.5px)} .ms.is-scrub .ms-back,.ms.is-tap .ms-back{transform:rotateY(180deg) translateZ(1.5px)} .ms.is-scrub .ms-core,.ms.is-tap .ms-core{display:block;position:absolute;inset:0;border-radius:4px;background:#e8e2d6;box-shadow:0 0 0 1px #d6cfc0} .ms.is-scrub .ms-shadow,.ms.is-tap .ms-shadow{display:block;position:absolute;left:5%;right:5%;bottom:-7%;height:22%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(20,16,10,.55),rgba(20,16,10,0));filter:blur(12px);will-change:transform,opacity} .ms.is-scrub .ms-glare{display:block;position:absolute;top:-10%;bottom:-10%;left:0;width:60%;pointer-events:none;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:translate3d(-130%,0,0)} .ms.is-scrub .ms-dim{display:block;position:absolute;inset:0;background:var(--overlay);opacity:0;pointer-events:none} .ms.is-scrub .ms-tag,.ms.is-tap .ms-tag{display:inline-flex;position:absolute;left:0;top:-30px;padding:4px 8px;border-radius:999px;background:var(--overlay);color:#fff;font-size:12px;line-height:1} .ms-tag .t-b,.ms-card.is-back .ms-tag .t-f{display:none}.ms-card.is-back .ms-tag .t-b{display:inline} /* tap (phones): flips once on entry, tap to flip again */ .ms.is-tap .ms-item{grid-template-columns:1fr;gap:20px} .ms.is-tap .ms-card{position:relative;width:100%;aspect-ratio:var(--ar);perspective:1200px;margin-top:32px} .ms.is-tap .ms-rot{transition:transform .95s cubic-bezier(.3,1.25,.5,1)} .ms.is-tap .ms-card.is-back .ms-rot{transform:rotateY(180deg)} .ms.is-tap .ms-shadow{opacity:.45;transform:translate3d(0,10px,0)} .ms.is-tap .ms-flip{display:block;position:absolute;inset:0;z-index:3;width:100%;background:none;border:0;padding:0;cursor:pointer;border-radius:4px;-webkit-tap-highlight-color:transparent} .ms.is-tap .ms-flip .lbl{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(20,20,20,.86);color:#fff;font-size:12px;line-height:1} .ms-flip:focus-visible{outline:2px solid #0A84C6;outline-offset:4px} @media (max-width:899px){.ms-item{grid-template-columns:1fr;gap:20px}} @media (prefers-reduced-motion:reduce){.ms .ms-text,.ms .ms-rot{transition:none!important}} /* cleaner, larger before/after */ .dental2 .ba-wrap{max-width:960px;margin:0 auto} .dental2 .ba-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:var(--s-24)} .dental2 .ba-head p{color:var(--muted)} .dental2 .ba{max-width:none;width:100%;border-radius:10px;box-shadow:0 24px 60px -30px rgba(20,16,10,.35)} .ms.is-scrub .ms-shadow{filter:none;background:radial-gradient(closest-side,rgba(20,16,10,.42),rgba(20,16,10,.14) 60%,rgba(20,16,10,0))} .ms.is-scrub .ms-tag{opacity:0;transition:opacity .3s ease} .ms.is-scrub .ms-item.is-on .ms-tag{opacity:1} .dental2 .ba-wrap{max-width:min(960px,calc((100vh - var(--bar) - 200px) * 1.116))} @media (max-width:899px){.dental2 .ba-wrap{max-width:none}} /* v15: AI image system case study (.ax), restyled to the site system */ .ax{padding-top:clamp(40px,7vw,104px);color:var(--text)} .ax h1{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.95;font-size:clamp(44px,8vw,120px);max-width:11ch;margin:16px 0 24px;text-wrap:balance} .ax h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1;font-size:clamp(30px,4.2vw,60px);margin:0;text-wrap:balance} .ax h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-size:19px;line-height:1.2;margin:0} .ax figure{margin:0} .ax-lbl,.ax figcaption,.ax-cap{font:500 12px/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0} .ax figcaption,.ax-cap{margin-top:8px} .ax-lede{font-size:clamp(20px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em;color:var(--muted);max-width:22em;margin:0} .ax-sec{margin-top:clamp(72px,9vw,140px);border-top:1px solid var(--line);padding-top:24px} .ax-sechead{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;margin:24px 0 40px;align-items:end} .ax-sechead p{margin:0;color:var(--muted);font-size:18px;line-height:1.45;max-width:34em} .ax figure.ax-hero{margin-top:clamp(40px,6vw,72px)} /* image slots: quiet placeholders until Nick's renders go in */ .ax-slot{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:16px 16px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden; background:radial-gradient(120% 90% at 85% 0%,#ECEEF3 0%,rgba(236,238,243,0) 60%),linear-gradient(160deg,var(--card) 0%,var(--card) 100%); font:500 11px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere} .ax-slot::before{content:"";position:absolute;left:16px;top:14px;width:14px;height:14px;border:1px solid var(--line-2);border-radius:3px; background:linear-gradient(135deg,transparent 46%,var(--line-2) 47% 53%,transparent 54%)} .ax-wide{aspect-ratio:21/9}.ax-sq{aspect-ratio:1}.ax-tall{aspect-ratio:4/5} /* the template: dark panel, colored slots */ .ax-tpl{background:var(--overlay);color:var(--text);border-radius:var(--r);padding:clamp(24px,4vw,56px);font-family:var(--display);font-weight:500;font-size:clamp(20px,2.9vw,40px);line-height:1.4;letter-spacing:-.02em;overflow-wrap:break-word} .ax-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:16px 0 0} .ax-steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:8px;align-content:start;min-width:0} .ax-steps span{font:500 11px/1 var(--mono);color:var(--muted)} .ax-steps strong{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em} .ax-steps small{color:var(--muted);font-size:13px;line-height:1.35} .ax-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px} .ax-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:8px;align-content:start} .ax-note p{margin:0;color:var(--muted);font-size:15px;line-height:1.45} .ax-three+figure{margin-top:12px} .ax-use{margin-top:56px} .ax-usehead{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:16px} .ax-usehead p{margin:0;color:var(--muted);font-size:15px;max-width:38em} .ax-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .ax-g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .ax-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch} .ax-prompt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;font:400 13px/1.75 var(--mono);color:var(--muted);overflow-wrap:break-word} .ax-prompt mark{background:#E3F2FF;color:var(--text);padding:.1em .3em;border-radius:4px} .ax-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ax-out div{padding:32px 24px 32px 0;display:grid;gap:8px;align-content:start} .ax-out div+div{border-left:1px solid var(--line);padding-left:24px} .ax-out b{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1;letter-spacing:-.035em;text-wrap:balance} .ax-out span{color:var(--muted);font-size:15px;line-height:1.4} .ax-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px} .ax-split ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:16px} .ax-split li{padding-left:16px;position:relative} .ax-split li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sel)} .ax-split .ax-note:last-child li::before{background:var(--line-2)} @media (max-width:899px){ .ax-sechead,.ax-pair,.ax-split{grid-template-columns:1fr;gap:16px} .ax-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ax-three{grid-template-columns:1fr} .ax-g4,.ax-g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ax-out{grid-template-columns:1fr 1fr} .ax-out div:nth-child(3){border-left:0;padding-left:0} .ax-out div:nth-child(n+3){border-top:1px solid var(--line)} .ax-wide{aspect-ratio:16/10} .ax-tpl{font-size:clamp(18px,5.2vw,24px);line-height:1.55} } /* v16: stat-countup (Folio Motion) */ /* stat-countup: fixed-width, screen-reader-safe count-up (pairs with stat-countup.js). Selectors are anchored on .ctu-on so the site's own `.res span` / `.stat span` rules (display:block, margin-top, muted colour, max-width) never reach the count-up spans. */ .ctu-on>.ctu{display:inline-grid;position:relative;margin:0;padding:0;max-width:none;white-space:nowrap;vertical-align:baseline; -webkit-user-select:none;user-select:none} .ctu-on>.ctu>span{display:block;grid-area:1/1;margin:0;padding:0;max-width:none;white-space:nowrap} .ctu-on>.ctu,.ctu-on>.ctu>span{font:inherit;letter-spacing:inherit;color:inherit;font-variant-numeric:tabular-nums} .ctu-on>.ctu>.ctu-g{visibility:hidden} /* ghosts: reserve the widest frame */ .ctu-on>.ctu>.ctu-v{position:absolute;left:0;top:0} /* live value: out of flow, can't move anything */ .ctu-on>.ctu-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* v16: .pill, global token pill (outlined mono caps). Color via --pill-c. Scene. Modifiers: --blue --purple --yellow --green --orange --plain. Light backgrounds use the default palette; put .on-dark on any dark ancestor (or the pill) for the dark palette. Both are AA (4.5:1+) on #fff/#F5F5F5 and #141414/#1E1E1E. Size follows --pill-fs (default 12px; use an em value inline in display text). */ .pill{--pill-c:currentColor;display:inline-block;color:var(--pill-c);border:1px solid currentColor;border-radius:999px;padding:.4em .7em; font:500 var(--pill-fs,12px)/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;vertical-align:var(--pill-va,middle)} .pill--blue{--pill-c:#0B63B6}.pill--purple{--pill-c:#6D3BC9}.pill--yellow{--pill-c:#7A5200}.pill--green{--pill-c:#18703F}.pill--orange{--pill-c:#A8431A}.pill--plain{--pill-c:#141414} .on-dark .pill--blue,.pill--blue.on-dark{--pill-c:#7CC4FF}.on-dark .pill--purple,.pill--purple.on-dark{--pill-c:#C9A2FF}.on-dark .pill--yellow,.pill--yellow.on-dark{--pill-c:#FFD166} .on-dark .pill--green,.pill--green.on-dark{--pill-c:#8EE6B0}.on-dark .pill--orange,.pill--orange.on-dark{--pill-c:#FF9E7A}.on-dark .pill--plain,.pill--plain.on-dark{--pill-c:#F2F2F2} .ax-tpl{--pill-fs:.56em;--pill-va:.18em} @media (max-width:899px){.ax-tpl{--pill-fs:.62em}} /* ===== v16: sticker sheet (home work section) ===== */ /* hover / focus label, text from data-hover */ /* focus ring that follows the die-cut shape */ /* desktop + tablet: hand-placed, tilted, overlapping */ /* mobile: clean two-column grid, label always visible on touch */ /* v16: stat-countup on very narrow screens: let long ranges wrap like the authored text did */ @media (max-width:359px){ .res .ctu-on>.ctu{max-width:100%;white-space:normal} .res .ctu-on>.ctu>span{white-space:normal;overflow-wrap:anywhere} .res .ctu-on>.ctu>.ctu-v{right:0} } /* ===== v16: interactive token pills (listbox) ===== */ .tp{vertical-align:middle} .tp-btn{position:relative;cursor:pointer;background:transparent;--pill-fs:13px;display:inline-flex;align-items:center;gap:.5em;padding:.5em .8em} .tp-btn::before{content:"";position:absolute;inset:-9px -4px} /* 44px+ touch target */ .tp-btn:hover{background:color-mix(in srgb,var(--pill-c) 8%,transparent)} .tp-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--pill-c) 12%,transparent)} .tp-caret{width:.8em;height:.5em;flex:none} @media (prefers-reduced-motion:no-preference){.tp-caret{transition:transform .15s var(--out)}} .tp-btn[aria-expanded="true"] .tp-caret{transform:rotate(180deg)} .tp-list{list-style:none;margin:0;padding:8px;min-width:max(100%,220px);max-width:calc(100vw - 32px);z-index:60; background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -12px rgba(0,0,0,.28);text-transform:none;letter-spacing:0} .tp-list:focus{outline:none} .tp-list [role=option]{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-radius:8px; font:500 15px/1.2 var(--body);cursor:pointer;white-space:nowrap} .tp-list .tp-hint{font:500 11px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .tp-list [role=option].is-active{background:color-mix(in srgb,var(--sel) 14%,transparent)} .tp-list:focus [role=option].is-active{box-shadow:inset 0 0 0 2px var(--sel)} .tp-list [role=option][aria-selected=true]{font-weight:600} .tp-list [role=option][aria-selected=true]::before{content:"";order:3;width:8px;height:8px;border-radius:50%;background:var(--sel);flex:none} .tp-list [role=option][aria-disabled=true]{opacity:.45;cursor:not-allowed} .tp-k{font:500 12px/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-right:8px} /* AI page hero */ .ax-hero-ctl{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-bottom:16px} .ax-hero-box{border-radius:var(--r);border:1px solid var(--line);background:var(--surface)} .ax-hero figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px} .ax-img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);object-fit:cover} .ax-img.ax-tall{aspect-ratio:4/5}.ax-img.ax-sq{aspect-ratio:1}.ax-img.ax-wide{aspect-ratio:2400/1029} .ax-pair .ax-img{height:100%;min-height:260px} @media (max-width:899px){.ax-img.ax-wide{aspect-ratio:2400/1029}} @media (max-width:599px){.ax-hero-ctl{flex-direction:column;align-items:flex-start;gap:8px}} /* ===== v17: pill width reservation, "I art-direct" line ===== */ .tp-vw{display:inline-grid;justify-items:start} .tp-vw>span{grid-area:1/1} .tp-g{visibility:hidden} /* ===================== v17: one dark theme (Night Shift). Tokens live in the :root above. ===================== */ /* pills: dark palette everywhere */ .pill--blue{--pill-c:#7CC4FF}.pill--purple{--pill-c:#C9A2FF}.pill--yellow{--pill-c:#FFD166} .pill--green{--pill-c:#8EE6B0}.pill--orange{--pill-c:#FF9E7A}.pill--plain{--pill-c:#EDF1F7} .tp-list{background:#1B2336;border-color:#2F3A52;box-shadow:0 16px 40px -8px rgba(8,11,18,.78),0 2px 6px rgba(8,11,18,.5)} /* chrome */ .lbl{color:var(--muted)} .bar{background:rgba(15,20,32,.86);border-bottom:1px solid var(--line)} .tabs a:hover,.tabs a[aria-current]{background:rgba(237,241,247,.08)} .cta{background:var(--sel);color:var(--on-sel)} .cta:hover{background:#A5D7FF;color:var(--on-sel)} @media (max-width:899px){.cta{background:none;color:var(--text)}} .btn.solid{background:var(--text);border-color:var(--text);color:var(--canvas)} .btn.solid:hover,.contact .btn.solid:hover{background:var(--sel);border-color:var(--sel);color:var(--on-sel)} .dim,.next a:hover .go{color:var(--on-sel)} .t-info:hover .d-m{color:#fff} .pin-av{background:var(--text);color:var(--canvas);box-shadow:0 0 0 2px var(--canvas),0 6px 16px rgba(8,11,18,.5)} .pin-body,.layers-pop{box-shadow:0 12px 32px rgba(8,11,18,.6)} .story p,.about-grid .rest p{color:#D3DAE6} .layers a{color:var(--muted)}.layers a:hover{background:rgba(237,241,247,.07)}.layers a.on{background:rgba(124,196,255,.16);color:var(--text)} @media (max-width:900px){.frame:hover>.f-label{color:var(--muted)}} .frame:hover>.f-label{color:var(--muted)} .bleed{background:var(--surface)} .bleed.stage{background:radial-gradient(ellipse at 50% 40%,#22304A,#141B2A 70%)} .bigline .d-l{background-image:linear-gradient(90deg,#C9A2FF,#7CC4FF)} .phone{box-shadow:0 30px 60px -22px rgba(8,11,18,.85),inset 0 0 0 2px #2A3347} .browser{box-shadow:0 30px 60px -26px rgba(8,11,18,.8)} .brandlist li{background:var(--surface)} .stat-inline{color:var(--muted)} .car-btn:hover{background:rgba(124,196,255,.12)} .ba-line b{box-shadow:0 6px 18px rgba(8,11,18,.6)} /* the old dark accent blocks now sit on a dark page: lift them a step */ .contact>.f-body,.frame.brands>.f-body{--text:#EDF1F7;--muted:#A3AEC2;--line:#2A3347;--line-2:#3A4560;background:var(--surface);border-color:var(--line);color:var(--text)} .contact>.f-body .lbl,.frame.brands>.f-body .lbl{color:var(--muted)} .contact .btn.solid{background:var(--text);border-color:var(--text);color:var(--canvas)} .frame.brands:hover>.f-body{border-color:var(--line)} .logo-tile,.logo-tile:hover{background:#121826;border-color:var(--line)} .lg-name svg{color:var(--purple)} /* motion palettes back to the dark-canvas set */ .cs-wait-what,.cs-sleepme-social,.cs-dock-pro-amazon{--c1:#7FD1F7;--c2:#B9A6FF} .cs-direct-mail-print{--c1:#78B8FF;--c2:#F4C35E} .cs-yandy-swim-giphy{--c1:#FF8FB8;--c2:#FFD27A} .mo .s0{stroke:#8A95A8} /* focus */ /* image mats (Direct Mail "More pieces") */ .mp-mat{background:#1B2336;border-color:var(--line)} .res-note{display:block;margin-top:6px;color:var(--muted);font-size:15px} .track-region{display:block} .tp:has(.pill--blue){--opt-c:#7CC4FF}.tp:has(.pill--purple){--opt-c:#C9A2FF}.tp:has(.pill--yellow){--opt-c:#FFD166} .tp:has(.pill--green){--opt-c:#8EE6B0}.tp:has(.pill--orange){--opt-c:#FF9E7A}.tp:has(.pill--plain){--opt-c:#EDF1F7} .ax-prompt mark{background:rgba(124,196,255,.18);color:var(--text)} /* Valassis client logos: one light ink on dark tiles */ .cl-tile{background:#121826;border-color:var(--line)} .cl-logo{filter:brightness(0) invert(1);opacity:.9} /* light-era text colors -> dark tokens */ .stat-src,.site-foot .foot{color:var(--muted)} .cl-intro,.story ul.did li,.sec-t p,.ms-cap{color:#D3DAE6} .cl-word{color:var(--text)} .mo-steps .stp span{background:#1B2336;color:var(--text);border-color:var(--line)} .mo-steps .s2 span{background:rgba(124,196,255,.14);color:#7CC4FF} .ax-slot{background:#1B2336;border-color:var(--line)} /* ===================== v17: home hero, Folio Motion sticker-hero drop-in ===================== Field + stickers styled by /assets/sticker-hero.css. Here: hero grid, the stat chips on stickers, tag voice, focus. */ .hero-stk .hero-b{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:'t f' 't2 f';grid-template-rows:auto 1fr;column-gap:clamp(16px,3vw,48px);align-items:start} .hero-t{grid-area:t}.hero-t2{grid-area:t2}.hero-stk .sh-field{grid-area:f;align-self:center} .hero-stk h1{max-width:12.5ch} .hero-t2{margin-top:24px} .hs-chip--l{right:auto!important;left:-8px} .hs-chip{position:absolute;top:-12px;right:-8px;z-index:3;background:var(--accent,#7CC4FF);color:#0F1420;font:600 12px/1 var(--mono);letter-spacing:.02em; padding:6px 8px;border-radius:6px;border:2px solid #0F1420;white-space:nowrap;pointer-events:none} .sh-slot.is-ph .sh-img{outline:2px dashed #7CC4FF;outline-offset:-6px} .sh-tag{font:600 13px/1 var(--body);letter-spacing:0;text-transform:none;border-radius:6px;padding:8px 10px;bottom:-16px} .hero .sh:focus-visible{outline:none!important} @media (max-width:899px){ .hero-stk .hero-b{grid-template-columns:1fr;grid-template-areas:'t' 'f' 't2';grid-template-rows:auto} .hero-stk .sh-field{max-width:560px;margin:24px auto 8px;width:100%} } @media (max-width:720px){.hs-chip{font-size:11px;padding:5px 6px;top:-10px}.sh-tag{font-size:12px;padding:6px 8px}} /* quiet facts + text block */ /* project index (replaces the old sticker sheet) */ .pidx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .pidx a{display:grid;grid-template-columns:44px minmax(160px,240px) 1fr 24px;gap:16px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none} .pidx-n{font:500 12px/1 var(--mono);color:var(--muted)} .pidx-name{font-weight:600;font-size:16px} .pidx-line{font-size:14px;color:var(--muted);line-height:1.45} .pidx-sub{display:block;margin-top:4px;color:var(--faint)} .pidx-go{color:var(--muted);transition:transform .2s} .pidx a:hover .pidx-name,.pidx a:focus-visible .pidx-name{color:var(--sel)} .pidx a:hover .pidx-go{transform:translateX(3px);color:var(--sel)} .pidx a:focus-visible{outline:2px solid var(--sel);outline-offset:2px;border-radius:6px} @media (max-width:699px){.pidx a{grid-template-columns:32px 1fr 18px;row-gap:4px}.pidx-line{grid-column:2/3;grid-row:2}} @media (prefers-reduced-motion:reduce){.pidx-go{transition:none}} /* ===================================================================== NIGHT SHIFT: the one and only theme (Nick, Nov 14: no mood switcher). Built against v17. Paste at the very end of assets/site.css AFTER deleting site.css lines 1100-1127 (v16 interim moods). Every colour below is a token; nothing after this block may use a hex literal. AA verified: final/tokens_dark.txt and final/audit_after.json (0 text failures). ===================================================================== */ html{color-scheme:dark;scrollbar-color:#2E3850 var(--canvas)} ::selection{background:rgba(124,196,255,.32);color:#EDF1F7} /* #324C67 on canvas, text 7.83 */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* TYPE ON DARK: light text blooms. Inter is static (no 380), so keep 400 and open it up. */ body{line-height:1.65;letter-spacing:.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .d-xl{font-weight:600;letter-spacing:-.04em} /* was 700 / -.045em: 144px 700 fills the counters on dark */ .d-l{letter-spacing:-.035em} /* was -.04em */ .d-m{letter-spacing:-.025em} /* was -.03em */ .lede,.about-grid .big,.tools p,.quote blockquote p{color:var(--muted)} .story p,.about-grid .rest p,.story ul.did li,.sec-t p,.cl-intro,.ms-cap{color:var(--body-ink);line-height:1.65} /* PILLS: one set, dark only. Delete the light .pill--* values and the .on-dark duplicates (site.css 1000-1002). */ .pill--blue{--pill-c:var(--pill-blue)}.pill--purple{--pill-c:var(--pill-purple)}.pill--yellow{--pill-c:var(--pill-yellow)} .pill--green{--pill-c:var(--pill-green)}.pill--orange{--pill-c:var(--pill-orange)}.pill--plain{--pill-c:var(--pill-plain)} /* ---- chrome ---- */ .lbl,.stat-src,.site-foot .foot,.frame:hover>.f-label{color:var(--muted)} .bar{background:var(--bar-bg);border-bottom:1px solid var(--line);box-shadow:none} .tabs a{color:var(--muted)} .tabs a:hover,.tabs a[aria-current]{background:var(--hover-bg);color:var(--text)} .cta{background:var(--accent);color:var(--on-sel)} .cta:hover{background:#A9D8FF} /* 12.23 */ @media (max-width:899px){.cta{background:none;color:var(--text)}} .btn{border-color:var(--line-2)} .btn:hover{background:var(--raised)} .btn.solid{background:var(--text);border-color:var(--text);color:var(--canvas)} .btn.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-sel)} .t-info:hover .d-m{color:var(--text)} .f-body{background:var(--raised);border-color:var(--line)} .f-body.bare{background:transparent;border-color:transparent} .frame:not(.nosel):hover>.f-body{border-color:var(--accent)} .h{background:var(--text);border-color:var(--accent)} .dim{background:var(--accent);color:var(--on-sel)} .layers-pop,.pin-body,.tp-list{background:var(--overlay);border-color:transparent;box-shadow:var(--pop-shadow)} .layers a{color:var(--muted)}.layers a:hover{background:var(--card);color:var(--text)} .layers a.on{color:var(--text);background:var(--accent-tint)} .layers .sub a svg,.lg-name svg,.layers a svg{color:var(--faint)} .pin-av{background:var(--text);color:var(--canvas);box-shadow:0 0 0 2px var(--canvas)} .quote .who{background:var(--accent);color:var(--on-sel)} .story ul.did li::before{background:var(--accent)} .mo-steps .stp+.stp::before{color:var(--faint)} /* ---- accent discipline: kill every second hue outside pills ---- */ .bigline .d-l{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)} /* purple→blue gradient text: killed */ .cs-wait-what,.cs-sleepme-social,.cs-dock-pro-amazon,.cs-direct-mail-print,.cs-yandy-swim-giphy{--c1:var(--accent);--c2:var(--muted)} .mo-steps .s2 span{color:var(--accent);border-color:rgba(124,196,255,.4);background:var(--accent-tint);box-shadow:none} .ax-prompt mark{background:var(--accent-tint);color:var(--text)} .logo-tile,.logo-tile:hover{background:transparent;border-color:var(--line)} .logo-tile:hover{border-color:var(--line-2)} /* ---- surfaces mapped to steps (and no border+shadow stacks) ---- */ .browser{background:var(--card);border:1px solid var(--line);box-shadow:none} .b-bar{background:var(--raised);border-bottom:1px solid var(--line)} .b-bar i{background:var(--line-2)} .b-bar span{background:var(--canvas);color:var(--muted);border:1px solid var(--line)} /* was #777 on #fff 4.48 → 8.23 */ .phone{box-shadow:inset 0 0 0 2px #1b1b1b} /* device bezel only, drop shadow removed */ .bleed{background:var(--raised)} .bleed.stage{background:radial-gradient(ellipse at 50% 40%,var(--card),var(--canvas) 70%)} .brandlist li,.client-list li,.cl-tile,.mo-steps .stp span{background:var(--card);border-color:var(--line);color:var(--text)} .cl-word{color:var(--text)}.stat-inline{color:var(--muted)}.ms-rail i{background:var(--text)} .figs figcaption{opacity:1} .ax-slot{background:var(--card);border-color:var(--line)} .ba-tag.lbl,.ba .ba-tag,.flip-chip,.ms.is-scrub .ms-tag,.ms.is-tap .ms-tag,.ms.is-tap .ms-flip .lbl{background:var(--tag-bg);color:var(--tag-ink);box-shadow:none} .ms-flip:focus-visible{outline-color:var(--accent)} .contact>.f-body,.frame.brands>.f-body,.frame.brands:hover>.f-body{ --text:var(--panel-text);--muted:var(--panel-muted); background:var(--card);border:1px solid var(--line);color:var(--text)} .contact>.f-body .lbl,.frame.brands>.f-body .lbl{color:var(--muted)} .contact .btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-sel)} .contact .btn.solid:hover{background:var(--text);border-color:var(--text);color:var(--canvas)} .ax-tpl{background:var(--raised);color:var(--text);border:1px solid var(--line)} /* icons drawn with light-mode literals */ .mo .s0{stroke:var(--faint)} /* ---- sticker sheet: raised step, hairline, no shadow stack; stickers keep their fills (they are artwork) ---- */ /* die-cut edge: #FFF glares on dark */ /* contact shadow only: a sticker sits flat */ /* lift = the one moving shadow */ /* ---- image mats on dark ---- */ /* print pieces + screenshots: card mat, 1px inner line, whites dimmed 6% so they don't glare */ .grid.g3.small figure img,.mp-mat,.ax-img{background:var(--mat)} .mp-mat img,.browser img,.ms-face img,.grid.g3.small figure img{filter:brightness(.94)} .mp-mat img{outline:1px solid rgba(15,20,32,.16);outline-offset:-1px} /* photography/video (Wait What, Yandy, AI renders) is NOT dimmed. */ /* HTML , every page: (now #1e1e1e). stays. */ /* ===================================================================== PILL SPEC: final, as DELTAS against v17 (.pill / .tp-btn / .tp-list / tokenpick.js / .art-line). Ted built most of it right. Keep: .pill base, --pill-c, .on-dark switch, aria wiring, keyboard model, type-ahead, 44px rows, the ::before touch target, caret rotate. Apply only what's below. Colours come from night-shift-final.css (one dark theme). Placements (Nick, final): home hero fill-in line · case-study role lines · AI Image System template. Nowhere else. ===================================================================== */ /* 1. Pills inside running text (hero line, role lines, AI template) size and sit by em, not fixed px. v16: --pill-fs 12px/13px fixed + vertical-align:middle, so the caps sit 1.5-2px low against the x-height. */ .pill-line{line-height:1.5} /* host ≥1.45; host size ≥20px */ .pill-line .pill{--pill-fs:max(.58em,11px);--pill-va:.18em;margin-block:-.3em} .pill-line .tp-btn{--pill-fs:max(.58em,11px);padding:.4em .55em .4em .7em;gap:.4em} .pill-field{display:inline-block;white-space:nowrap} /* pill + its trailing punctuation never split */ .ax-tpl{line-height:1.5} /* v16 1.4; 56px at 40px = 1.4 */ /* 2. Hover 14% on dark (v17: 8%, which is 1.1:1 against the canvas, so hover is invisible). */ .tp-btn:hover{background:color-mix(in srgb,var(--pill-c) var(--pill-hover-mix,8%),transparent)} /* 3. Open = filled. v16 open is a 12% tint, only 4 points off hover, so open and hover read the same. */ .tp-btn[aria-expanded="true"]{background:var(--pill-c);border-color:var(--pill-c);color:var(--pill-on,var(--canvas))} .ax-tpl{--pill-on:var(--raised)} /* 4. Focus-visible: v17 ring is #0D99FF on #F5F5F5 = 2.74:1 (fails 3:1). Night Shift's accent fixes it site-wide (9.81). On a pill the accent ring next to a blue pill reads as part of it, so ring pills in text colour: */ .tp-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px} /* 5. Listbox rows speak the pill's voice (v16: Inter 15px sentence case, so the panel reads like a different component). */ .tp-list{min-width:max(100%,240px);max-width:min(288px,calc(100vw - 32px));background:var(--pop-bg);border-color:var(--pop-line);box-shadow:var(--pop-shadow)} .tp-list [role=option]{font:500 13px/1.2 var(--mono);letter-spacing:.02em;text-transform:uppercase} .tp-list [role=option][aria-selected=true]{font-weight:500;color:var(--text)} .tp-list [role=option].is-active{background:var(--accent-tint)} @media (hover:hover) and (min-width:900px){.tp-list [role=option]{min-height:36px}} /* 44px stays on touch / ≤899 */ /* 6. Edge collision. v16 has no clamp: .ps-pill-panel is left:0 of the pill, so the hero's 2nd pill overflows the right edge at 390 (measured in final/pills_final). In tokenpick.js open(), after unhiding: var r=root.getBoundingClientRect(), pw=list.offsetWidth; list.style.left=Math.max(16-r.left,Math.min(0,innerWidth-16-pw-r.left))+'px'; and flip up when r.bottom+list.offsetHeight+8 > innerHeight: list.classList.add('is-up') */ .tp-list.is-up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--ps-pill-gap,8px)} /* 7. Markup: inside a sentence use spans (a
/