/* ============================================================ APP CSS — PhotoLab's stylesheet (graduation slice 3b). Moved verbatim from index.html's in-template helmet style block (which pl-runtime's helmet handler used to hoist into ); now loaded as a plain in index.html's head. Font url()s stay relative ("fonts/…") — this file lives in public/ root alongside index.html, so they resolve identically. Most component styling is inline style objects in app.js's S map; this file carries only @font-face, resets, form-control skins, and @keyframes. ============================================================ */ @font-face{font-family:'Brutal Type';src:url('fonts/BrutalType-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Brutal Type';src:url('fonts/BrutalType-Bold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Material Symbols Rounded';src:url('fonts/MaterialSymbolsRounded-subset.woff2') format('woff2');font-weight:400;font-display:block} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;background:#06070c;overscroll-behavior:none} [data-hscroll]{scrollbar-width:none;-ms-overflow-style:none} [data-hscroll]::-webkit-scrollbar{display:none} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0} input[type=range]::-webkit-slider-runnable-track{height:3px;background:#2a2d33} input[type=range]::-moz-range-track{height:3px;background:#2a2d33} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:24px;background:var(--accent,#97CEFF);margin-top:-10.5px;border:0;border-radius:0} input[type=range]::-moz-range-thumb{width:16px;height:24px;background:var(--accent,#97CEFF);border:0;border-radius:0} input[type=range]:active::-webkit-slider-thumb{background:#fff} select option{background:#0a0b0f;color:#fff} .ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} @keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes sheetOut{from{transform:translateY(0)}to{transform:translateY(100%)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes barUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes editUp{from{transform:translateY(28px)}to{transform:translateY(0)}} @keyframes loadbar{from{width:0%}to{width:100%}} @keyframes bkFill{from{transform:translateY(82px)}to{transform:translateY(0)}}@keyframes bkSlosh{from{transform:translateX(0)}to{transform:translateX(-40px)}} @keyframes bkBubble{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.9}85%{opacity:.9}100%{transform:translateY(-82px) scale(1.3);opacity:0}} @keyframes sheetBodyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes landDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}} @keyframes stackIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} @keyframes ddIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes ddOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}} @keyframes ddInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes ddOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}} @keyframes chevL{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}} @keyframes chevR{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}} @keyframes chevDown{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(5px) rotate(45deg)}} @keyframes framePulse{0%{opacity:1}30%{opacity:.42}100%{opacity:1}} @keyframes replacePulse{0%,100%{box-shadow:0 0 0 0 rgba(151,206,255,0);border-color:#97CEFF}50%{box-shadow:0 0 0 7px rgba(151,206,255,.22);border-color:#fff}} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ============================================================ SHARE PAGE v3 (copy-link-first). Ported from Liam's design (reference/design-inbox/photo-lab-v3/project/Photo Lab.dc.html, share styles ~2338-2411). The band scaffolding (S.shareHead / S.shareBody / S.shareBtnWrap) stays as inline S.* in app.js because it is layout-critical and measured by measureShareGaps(); everything NEW in the copy-first flow lives here as classes (repo direction, slice 3b). The download corner icon rides the shrunk canvas wrap, so it scales with the live-photo band. ============================================================ */ /* One-line label row: the "Copy fundraiser link" title + an inline "how to share" link (opens the story-how-to sheet). Merged into a single line so the copy block is 2 rows (label + field) instead of 3, freeing vertical space for the photo band on small screens. flex-wrap lets the help drop to its own line only on the very narrowest widths rather than overflow. */ .pl-shr-copylabel{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 8px;font:600 12px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-align:center;margin-bottom:10px} .pl-shr-copyhelp{font:400 11px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#97CEFF;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer} .pl-shr-copyhelp::before{content:"·";margin-right:8px;color:rgba(255,255,255,.4);text-decoration:none;display:inline-block} .pl-shr-copyfield{display:flex;align-items:center;gap:8px;height:44px;width:86%;max-width:360px;margin-bottom:26px;padding:0 10px 0 16px;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:9999px;box-sizing:border-box} .pl-shr-copytext{flex:1 1 auto;min-width:0;font:400 13px/1 'Chakra Petch',sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pl-shr-copybtn{position:relative;overflow:visible;flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer} .pl-shr-copybtn svg{position:relative;z-index:1;display:block} .pl-shr-ring{position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #97CEFF;pointer-events:none;opacity:0;z-index:0;animation:copyPing 2.1s ease-out infinite} .pl-shr-ring2{animation-delay:.7s} .pl-shr-ring3{animation-delay:1.4s} .pl-shr-cta{display:flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border:0;background:#3759B6;color:#fff;font:600 15px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;width:86%;max-width:360px;border-radius:8px;cursor:pointer} .pl-shr-cta.is-locked{opacity:.4;cursor:default} .pl-shr-lock{display:inline-flex;align-items:center;margin-right:8px} .pl-shr-helper{font:400 12px/1.3 'Chakra Petch',sans-serif;color:#8b8f98;text-align:center;margin-top:8px} .pl-shr-corner{position:absolute;bottom:8px;right:8px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;z-index:8} .pl-shr-cornerchip{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(6,7,12,.5);border:1px solid rgba(255,255,255,.18);box-shadow:0 1px 4px rgba(0,0,0,.45)} .pl-shr-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9;font:400 13px/1.35 'Chakra Petch',sans-serif;color:#fff;background:rgba(6,7,12,.95);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:10px 16px;white-space:nowrap;animation:toastInOut 2.25s ease forwards;pointer-events:none} .pl-shr-scrim{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000;background:rgba(6,7,12,.78);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px;box-sizing:border-box;animation:scrimDark .24s ease} .pl-shr-sheetwrap{position:relative;width:100%;max-width:380px;margin:auto} .pl-shr-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;z-index:2} .pl-shr-sheet{position:relative;width:100%;max-width:380px;max-height:calc(100dvh - 32px);overflow-y:auto;background:#0d0e13;border-radius:16px;padding:22px clamp(16px,5.5vw,22px) 20px;box-sizing:border-box;animation:modalPop .2s ease} .pl-shr-title{font:800 clamp(15px,5vw,20.5px)/1.12 'Brutal Type','Arial Black',sans-serif;text-transform:uppercase;color:#fff;padding-right:24px} .pl-shr-underline{width:100%;height:3px;background:#97CEFF;margin:10px 0 24px} .pl-shr-steps{width:100%;min-width:0;display:flex;flex-direction:column} .pl-shr-stepblock{display:flex;flex-direction:column} .pl-shr-steprow{display:flex;flex-direction:row;align-items:center;gap:0;padding:14px 0;text-align:left} .pl-shr-divider{width:100%;height:1px;background:rgba(255,255,255,.15)} .pl-shr-badge{flex:0 0 clamp(22px,7vw,28px);text-align:left;color:#97CEFF;font:600 clamp(13px,3.9vw,15px)/1 'Chakra Petch',sans-serif} .pl-shr-steptext{flex:1 1 auto;min-width:0;font:400 clamp(13px,3.9vw,15px)/1.35 'Chakra Petch',sans-serif;color:#e7e9ed;text-align:left;display:flex;align-items:center;flex-wrap:wrap;padding-right:10px} .pl-shr-stephead{font:800 clamp(17px,5.6vw,22px)/1 'Brutal Type','Arial Black',sans-serif;text-transform:uppercase;color:#fff;margin-right:6px} .pl-shr-mention{color:#97CEFF;white-space:pre} .pl-shr-stepcopy{display:inline-flex;align-items:center;margin-left:auto;flex:0 0 auto} .pl-shr-chip{margin-left:auto;flex:0 0 auto;height:28px;width:auto;border-radius:6px;display:block} .pl-shr-face{margin-left:auto;flex:0 0 auto;height:28px;width:auto;display:block} .pl-shr-gotit{width:100%;height:52px;margin-top:28px;background:#3759B6;color:#fff;font:600 14px/1 'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.05em;border:0;border-radius:8px;cursor:pointer} @keyframes copyPing{0%{transform:translate(-50%,-50%) scale(1);opacity:0}25%{opacity:.85}85%{opacity:.18}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}} /* Desktop dock share panel (2026-07-14). On desktop the Share tab mounts the same CTA set inside the right dock (like Filters/Crop/Assets) so the stage keeps the photo unobstructed; these overrides re-flow the mobile-tuned centered/86%-width pl-shr-* classes into a left-aligned full-width column. Mobile never renders .pl-shr-dock (tabShare is desktop-only in app.js). */ .pl-shr-dock{display:flex;flex-direction:column;align-items:stretch;padding-top:12px} .pl-shr-dock-blurb{font:400 13px/1.5 'Chakra Petch',sans-serif;color:rgba(255,255,255,.8);margin:0 0 22px} .pl-shr-dock .pl-shr-copylabel{justify-content:flex-start;text-align:left;margin-bottom:10px} .pl-shr-dock .pl-shr-copyfield{width:100%;max-width:none;margin-bottom:24px} .pl-shr-dock .pl-shr-copyfield:hover{border-color:rgba(255,255,255,.45)} .pl-shr-dock .pl-shr-cta{width:100%;max-width:none} .pl-shr-dock .pl-shr-cta:not(.is-locked):hover{background:#3f63c9} .pl-shr-dock .pl-shr-helper{margin:10px 0 0} .pl-shr-dock-dl{display:flex;align-items:center;justify-content:center;gap:9px;height:48px;margin-top:14px;background:transparent;color:#fff;border:0;box-shadow:inset 0 0 0 1px #2a2d33;border-radius:8px;cursor:pointer;font:600 13px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase} .pl-shr-dock-dl:hover{box-shadow:inset 0 0 0 1px #4a5160} @keyframes scrimDark{from{opacity:0;background:rgba(6,7,12,.4)}to{opacity:1;background:rgba(6,7,12,.78)}} @keyframes modalPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} @keyframes toastInOut{0%{opacity:0}11%{opacity:1}82%{opacity:1}100%{opacity:0}}