/* Signet — one family (Bricolage Grotesque, optical size does the display/body work), one accent (the wax seal). */ :root{ --paper:#EEF0F3; --card:#FFFFFF; --ink:#0E1116; --ink-2:#4A515C; --ink-3:#8A919C; --rule:#D5D9E0; --rule-2:#E7EAEF; --wax:#B9121B; --wax-dark:#8E0E16; --ok:#1E7B4F; --radius:14px; --radius-s:10px; --maxw:1120px; --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --email:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-optical-sizing:auto} [hidden]{display:none!important} a{color:inherit} h1,h2,h3{font-family:var(--font);letter-spacing:-0.02em;margin:0;line-height:1.1} h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.02;letter-spacing:-0.03em} h2{font-size:1.35rem;font-weight:700} h3,.h3{font-size:1.08rem;font-weight:700} .h2{font-size:1.5rem;font-weight:700} p{margin:0} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px} .top,main,.foot{max-width:var(--maxw);margin:0 auto;padding:0 24px} .top{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-0.02em} .mark{width:30px;height:30px;color:var(--wax)} .topnav{display:flex;align-items:center;gap:22px} .topnav a{text-decoration:none;color:var(--ink-2);font-weight:500} .topnav a:hover{color:var(--ink)} .topnav .signin,.topnav .who{color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px;font-weight:600} .topnav .who{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px} .topnav .who img{width:26px;height:26px;border-radius:50%} .foot{padding:40px 24px;color:var(--ink-2);font-size:.9rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-links{display:flex;gap:16px}.foot-links a{text-decoration:none} /* buttons: outlined by default, .seal is the one primary action, .ghost is quiet */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 15px/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap} .btn:hover{background:#fff} .btn.seal{background:var(--wax);border-color:var(--wax);color:#fff} .btn.seal:hover{background:var(--wax-dark);border-color:var(--wax-dark)} .btn.ghost{border-color:var(--rule);color:var(--ink-2)} .btn.ghost:hover{border-color:var(--ink);color:var(--ink)} .btn.danger:hover{border-color:var(--wax);color:var(--wax);background:transparent} .btn.big{padding:15px 26px;font-size:16px} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.55;cursor:default;transform:none} .btn.done{background:var(--ok);border-color:var(--ok);color:#fff} .btn.google{gap:10px} .panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px} .hint{font-size:.88rem;color:var(--ink-2)} .label{font-weight:600;font-size:.85rem;color:var(--ink-2)} .flash{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--ok);border-radius:var(--radius-s);padding:10px 14px;margin:0 0 18px} .flash.warn{border-left-color:var(--wax)} .form-error{color:var(--wax);font-weight:500;margin-top:8px} .pill{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--rule-2);color:var(--ink-2);margin-right:6px;vertical-align:1px} .pill.live{background:#E3F3EA;color:var(--ok)} /* hero */ .hero{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;padding:48px 0 36px} .hero h1{max-width:14ch} .lede{font-size:1.12rem;color:var(--ink-2);max-width:46ch;margin:20px 0 26px} .hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .hero-note{color:var(--ink-2);font-size:.92rem} .specimen{margin:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:12px;box-shadow:0 24px 60px -36px rgba(14,17,22,.4)} .specimen img{display:block;width:100%;height:auto;border-radius:8px} .specimen figcaption{margin:10px 2px 0;font-size:.85rem;color:var(--ink-2)} /* studio: one sheet of steps on the left, true-size preview on the right */ .studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:32px;padding:28px 0 56px;scroll-margin-top:24px;align-items:start} .studio>*{min-width:0} /* the true-size iframe inside the preview must not widen its column */ .sheet{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .step{padding:24px 24px 26px} .step + .step{border-top:1px solid var(--rule-2)} .step h2{display:flex;align-items:center;gap:12px;margin-bottom:16px} .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);font:700 14px var(--font)} .opt{font:500 12px var(--font);color:var(--ink-2);background:var(--paper);padding:3px 8px;border-radius:999px;margin-left:2px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .grid2 + .grid2{margin-top:14px} label{display:grid;gap:6px;font-weight:500;font-size:.92rem;color:var(--ink-2)} input[type=text],input[type=url],input[type=email],input[type=tel],input:not([type]),.select{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:var(--radius-s);background:#fff;font:500 15px var(--font);color:var(--ink)} input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)} input:user-invalid{border-color:var(--wax)} .step .hint{margin:-6px 0 14px} .drop{grid-template-columns:72px 1fr;align-items:center;gap:14px;border:1.5px dashed var(--rule);border-radius:12px;padding:12px;cursor:pointer;background:#fafbfc;transition:border-color .15s,background .15s} .drop:hover,.drop.over{border-color:var(--ink);background:#fff} .drop.filled{border-style:solid;border-color:var(--ink)} .drop:focus-within{outline:2px solid var(--ink);outline-offset:1px} .drop-art{display:grid;place-items:center;width:72px;height:72px;border-radius:10px;background:var(--paper);overflow:hidden;color:var(--ink-3)} .drop-art svg{width:28px;height:28px} .drop-art img{width:100%;height:100%;object-fit:cover;grid-area:1/1} .drop.filled .drop-art svg{display:none} .drop-text{display:grid;gap:2px}.drop-text strong{color:var(--ink)}.drop-text small{font-weight:400} .drop.small{grid-template-columns:48px 1fr;padding:8px}.drop.small .drop-art{width:48px;height:48px}.drop.small .drop-art svg{width:20px;height:20px} .icons{display:grid;gap:10px} .icon-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:12px;align-items:end} .preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .preset-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1.5px solid #e2e2e2;border-radius:12px;cursor:pointer;font-size:13px;transition:border-color .15s,background .15s} .preset-card img{width:32px;height:32px} .preset-card.selected{border-color:#111;background:#f6f6f6} .preset-check{position:absolute;opacity:0;pointer-events:none} .preset-card .preset-url{display:none;width:100%} .preset-card.selected .preset-url{display:block} .preset-card .preset-url input{width:100%;box-sizing:border-box;font-size:12px;padding:6px 8px;border:1px solid #ddd;border-radius:8px} .font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px} .layout-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px} .layout-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px 9px;border:1.5px solid #e2e2e2;border-radius:12px;cursor:pointer;background:#fff;transition:border-color .15s;min-width:0} .layout-card input{position:absolute;opacity:0;pointer-events:none} .layout-card svg{width:100%;max-width:120px;height:auto;display:block} .layout-card span{font-size:.78rem;line-height:1.25;color:var(--ink-2);text-align:center} .layout-card .pg-card{fill:#fff;stroke:#d9d9d9;stroke-width:1}.layout-card .pg-spine{fill:#1d1d1d}.layout-card .pg-logo{fill:#1d1d1d;opacity:.55}.layout-card .pg-photo{fill:#d9dde3}.layout-card .pg-pill{fill:#e9e4da}.layout-card .pg-ink{fill:#1d1d1d}.layout-card .pg-line{fill:#b8b8b8} .layout-card:hover{border-color:#b8b8b8}.layout-card.selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)} .layout-card.selected .pg-card{stroke:var(--ink)}.layout-card.selected .pg-pill{fill:var(--seal,#B9121B);opacity:.85} /* the live sketch (before a signature exists) follows the photo side of the chosen layout; the real preview shows the rest */ .sig.layout-mirror,.sig.layout-mirror-photo-socials,.sig.layout-mirror-row{flex-direction:row-reverse} .sig.layout-mirror .sig-photo,.sig.layout-mirror-photo-socials .sig-photo,.sig.layout-mirror-row .sig-photo{margin:22px 22px 22px 0} .sig.layout-mirror .sig-rule,.sig.layout-mirror-photo-socials .sig-rule,.sig.layout-mirror-row .sig-rule{margin:22px 20px 22px 0} .sig.layout-mirror .sig-pill,.sig.layout-mirror-photo-socials .sig-pill,.sig.layout-mirror-row .sig-pill{margin:22px 20px 22px 0} .sig.layout-mirror .sig-text,.sig.layout-mirror-photo-socials .sig-text,.sig.layout-mirror-row .sig-text{margin:22px 20px 22px 24px;text-align:right} .sig.layout-mirror-photo-socials .sig-pill,.sig.layout-mirror-row .sig-pill{display:none} .font-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #e2e2e2;border-radius:12px;cursor:pointer;background:#fff;transition:border-color .15s} .font-card:hover{border-color:#999} .font-card.selected{border-color:#111;background:#f7f7f7} .font-card .font-name{font-size:14px;font-weight:600} .font-card .font-sample{margin-left:auto;font-size:22px;color:#555} .crop-ctl{margin-top:12px;padding:12px;border:1px solid #e2e2e2;border-radius:12px;background:#fafafa} .crop-ctl>label{font-size:13px;font-weight:600;display:block;margin-bottom:8px} .cropper{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;user-select:none;-webkit-user-select:none} .cropper img{display:block;max-width:100%;max-height:340px;width:auto;height:auto} .crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.35);cursor:move;box-sizing:border-box;touch-action:none} .crop-handle{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;background:#fff;border:2px solid #111;border-radius:50%;cursor:nwse-resize;box-sizing:border-box;touch-action:none} .choice{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0} .choice legend{font-weight:600;color:var(--ink);margin-bottom:6px;padding:0} .choice label{grid-template-columns:auto 1fr;grid-template-areas:"r t" "r s";column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius-s);cursor:pointer;background:#fff} .choice label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .choice input{grid-area:r;accent-color:var(--wax);margin:0}.choice span{grid-area:t;color:var(--ink);font-weight:600}.choice small{grid-area:s;font-weight:400} .submit{display:grid;justify-items:start;gap:10px;background:#fafbfc} .submit .hint{margin:0} /* preview paper (studio + result). The signature inside is laid out at its real email size and scaled to fit. */ .preview-col .sticky{position:sticky;top:20px} .preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .stage{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:grid;justify-content:center;box-shadow:0 24px 60px -36px rgba(14,17,22,.4);transition:background .2s} .stage.light{background:#fff}.stage.dark{background:#121212;border-color:#2a2a2a} .holder{position:relative;overflow:hidden} .scaler{transform-origin:0 0;padding:24px;display:inline-block} .stage iframe{display:block;border:0;width:669px;height:290px} /* never transformed: the document scales itself (WebKit) */ .preview-col .hint{margin-top:10px} /* DOM replica of the email table, same metrics as templates/signature.html */ .sig{display:flex;align-items:center;width:621px;border:1px solid #E4E4E4;border-radius:12px;background:#fff;color:#111;font-family:var(--email);transform:none} .sig.no-icons{width:535px} .sig-photo{flex:none;width:192px;height:192px;margin:22px 0 22px 22px;border-radius:12px;overflow:hidden;background:#EEF0F3;position:relative} .sig-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;position:relative;z-index:1;display:block} .sig-photo .ph{position:absolute;inset:0;background:repeating-linear-gradient(160deg,#dfe3e9 0 14px,#e9ecf1 14px 28px)} .sig-rule{flex:none;width:1px;height:192px;margin:22px 0 22px 20px;background:#E4E4E4} .sig-pill{flex:none;width:66px;margin:22px 0 22px 20px;border:1px solid #E4E4E4;border-radius:14px;display:flex;flex-direction:column;align-items:center;padding:32px 0} .sig.no-icons .sig-pill{display:none} .sig-pill img{width:40px;height:40px;display:block;object-fit:contain} .sig-pill img + img{margin-top:24px} .sig-text{flex:none;width:300px;margin:22px 24px 22px 20px;min-width:0} .sig-logo{display:block;width:188px;max-height:64px;height:auto;object-fit:contain;object-position:left center;margin-bottom:18px} .sig-name{font-size:26px;line-height:30px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sig-title{margin-top:3px;font-size:13px;line-height:17px;color:#696969;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sig-co{margin-top:21px;font-size:16px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sig-mail{margin-top:3px;font-size:13px;line-height:17px;color:#696969;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sig .empty{color:#b0b5bd} .stage.dark .sig{background:#1f1f1f;border-color:#3a3a3a;color:#fff} .stage.dark .sig-rule,.stage.dark .sig-pill{border-color:#3a3a3a;background-color:#3a3a3a} .stage.dark .sig-pill{background:transparent} .stage.dark .sig-title,.stage.dark .sig-mail{color:#b0b0b0} .stage.dark .sig .empty{color:#6b6b6b} .tabs{display:flex;gap:6px} .tab{padding:9px 14px;border-radius:999px;border:1px solid var(--rule);background:#fff;font:600 14px var(--font);cursor:pointer;color:var(--ink-2)} .tab.active{background:var(--ink);color:#fff;border-color:var(--ink)} .tabs.small .tab{padding:5px 10px;font-size:12px} /* pricing */ .pricing{padding:0 0 64px} .price-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:1fr 1.2fr auto;gap:28px;align-items:center} .price{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:10px 0 8px} .price-sub{color:var(--ink-2)} .price-list{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink-2)} .price-list li{padding-left:22px;position:relative} .price-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--wax)} /* result page */ .result{padding:36px 0 56px;display:grid;gap:22px} .result-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px} .result-controls{display:flex;align-items:end;gap:14px;flex-wrap:wrap} .font-switch{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#555} .font-switch select{font-size:14px;padding:7px 10px;border:1.5px solid #ddd;border-radius:10px;background:#fff;max-width:200px} .edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px} .edit-card{border:1.5px solid #e2e2e2;border-radius:12px;padding:14px;background:#fff} .edit-card h3{margin:0 0 6px;font-size:14px} .edit-card summary{font-weight:600;font-size:14px;cursor:pointer} .text-fields{display:grid;gap:8px;margin:10px 0} .text-fields label{display:grid;gap:3px;font-size:12px;font-weight:600;color:#555} .text-fields input{font-size:14px;padding:7px 10px;border:1.5px solid #ddd;border-radius:8px} .anim-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0} .anim-opt{padding:7px 12px;border:1.5px solid #e2e2e2;border-radius:20px;font-size:13px;cursor:pointer;background:#fff} .anim-opt.selected{border-color:#111;background:#111;color:#fff} .anim-pick.busy{opacity:.55;pointer-events:none} .anim-opt{position:relative} .spin{display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid #ccc;border-top-color:#111;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px} .anim-opt.selected .spin{border-color:#666;border-top-color:#fff} @keyframes spin{to{transform:rotate(360deg)}} .speed-row{margin-top:10px} .speed-row label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px} .speed-row input[type=range]{width:100%;accent-color:#111} .crop-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px} .crop-modal[hidden]{display:none} .crop-modal-box{background:#fff;border-radius:16px;padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto} .crop-modal-box h3{margin:0 0 12px} .crop-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px} .result-title{display:grid;gap:4px} .eyebrow{font-size:.85rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em} .h1-mid{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-0.025em;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .h1-mid .pill{font-size:.8rem;padding:4px 10px;margin:0;vertical-align:0} .progress h1{margin-bottom:14px} .stepper{list-style:none;margin:0;padding:0;display:grid;gap:8px} .stepper li{display:flex;align-items:center;gap:10px;color:var(--ink-2)} .stepper li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--rule);flex:none} .stepper li.active{color:var(--ink);font-weight:600}.stepper li.active::before{border-color:var(--wax);background:var(--wax);animation:pulse 1s infinite} .stepper li.done::before{border-color:var(--ink);background:var(--ink)} .progress .hint{margin-top:12px} @keyframes pulse{50%{transform:scale(.7)}} .install{padding:26px} .gate{display:grid;gap:12px;justify-items:start;max-width:60ch} .gate p{color:var(--ink-2)} .gate .btn{margin-top:6px} .routes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px} .route{border:1px solid var(--rule-2);border-radius:var(--radius-s);padding:18px;display:grid;gap:10px;align-content:start} .route p{color:var(--ink-2)} .route-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .route .hint{min-height:1.2em} .select{width:auto;padding:9px 12px} label>.select{width:100%;margin-top:6px} .manual{margin-top:18px;border-top:1px solid var(--rule-2);padding-top:14px} .manual summary{cursor:pointer;font-weight:600;color:var(--ink-2)} .manual summary:hover{color:var(--ink)} .manual ol{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)} .manual .hint{margin-top:10px} .asset-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px} .asset-list li{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:.9rem} .asset-list li span{font-weight:600} .asset-list li a{overflow-wrap:anywhere;color:var(--ink-2)} .again{margin-top:4px} .failed{border-color:#f0b8bc;display:grid;gap:10px;justify-items:start} /* auth + account */ .auth{padding:56px 0 80px;display:grid;justify-content:center} .auth-card{width:min(440px,100%);display:grid;gap:14px;padding:30px} .auth-card .btn{justify-self:stretch} .devform{display:grid;gap:10px;border-top:1px solid var(--rule-2);padding-top:16px;margin-top:4px;justify-items:start} .devform label{width:100%} .account{padding:36px 0 64px} .account-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .account-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start} .sig-list{display:grid;gap:12px} .sig-item{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center} .sig-thumb{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--paper)} .sig-meta h2 a{text-decoration:none} .sig-meta .hint{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px} .sig-actions{display:flex;flex-wrap:wrap;gap:8px} /* three buttons must wrap on 360px phones */ .account-side{display:grid;gap:12px} .account-side .panel{display:grid;gap:10px;justify-items:start} .empty{display:grid;gap:10px;justify-items:start} .gmail-note{font-size:.92rem;color:var(--ink-2);max-width:52ch;margin:18px 0 0} .gmail-note a{text-decoration:underline} .legal{padding:48px 0 80px;display:grid;justify-content:center} .legal .panel{width:min(760px,100%);display:grid;gap:14px} .legal h1{margin:0} .legal h2{font-size:1.05rem;margin:12px 0 0} .legal p{margin:0;color:var(--ink-2)} .legal ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)} .legal code{font-size:.9em} @media (max-width:960px){ .hero{grid-template-columns:1fr;gap:28px;padding-top:28px} .studio{grid-template-columns:1fr} .preview-col{order:-1}.preview-col .sticky{position:static} .grid2,.routes{grid-template-columns:1fr} .icon-row{grid-template-columns:1fr} .preset-grid{grid-template-columns:repeat(2,1fr)} .price-card{grid-template-columns:1fr} .account-grid{grid-template-columns:1fr} .topnav a:not(.signin):not(.who){display:none} } @media (max-width:560px){ .top,main,.foot{padding:0 16px} .step{padding:18px 16px 20px} .install{padding:18px 16px} .sig-item{grid-template-columns:48px 1fr}.sig-thumb{width:48px;height:48px}.sig-actions{grid-column:1/-1} .result-head{align-items:start;flex-direction:column} .asset-list li{grid-template-columns:1fr} } /* ---- unified studio */ .studio .preview-col .sticky{display:grid;gap:12px;min-width:0} .studio .preview-col .stage{max-width:100%} .preview-head .label{display:flex;align-items:center;gap:8px} .preview-head .pill{font-size:.75rem;padding:3px 9px;margin:0} #frame-wrap{position:relative} .rendering{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:7px;background:rgba(17,17,17,.82);color:#fff;font:600 12px var(--font);padding:6px 10px;border-radius:999px;z-index:2} .rendering .spin{width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .studio .gate{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:18px} .studio .gate h2{font-size:1.15rem;margin:0 0 6px} .studio .gate p{margin:0 0 12px;color:var(--ink-2);font-size:.95rem} .drop{position:relative} .drop-clear{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink-2);font:600 15px/1 var(--font);cursor:pointer;display:none;padding:0} .drop.filled .drop-clear{display:block} .drop-clear:hover{color:var(--seal);border-color:var(--seal)} .speed-row{display:grid;gap:6px;margin-top:14px;max-width:420px} .speed-row label{font-weight:600} .speed-row input[type=range]{width:100%} .speed-row .hint{margin:0} .font-card .font-sample{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .panel.install{margin-top:28px} @media (max-width: 900px){ .studio{display:grid} .studio .preview-col{order:-1} .studio .preview-col .sticky{position:static} } label>.opt{display:inline-block;width:auto;justify-self:start;margin:0 0 4px 6px} /* home page: value propositions */ .values{padding:8px 0 48px} .values h2{margin:0 0 6px} .values-lead{margin:0;color:var(--ink-2);max-width:62ch;line-height:1.5} /* v22.1: the one line the old Three steps section said */ .value-grid{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .value-grid li{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;color:var(--ink-2);line-height:1.5} .value-grid li strong{display:block;color:var(--ink);margin-bottom:6px;font-size:1.05rem} .gmail-access{padding:0 0 56px} @media (max-width:960px){ .value-grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .value-grid{grid-template-columns:1fr} .values{padding-bottom:36px} } /* phones: the preview column itself is pinned (sticky works within .studio, which spans the whole form); the sign-in / plan cards are moved out of it by studio.js so the pinned block stays short */ @media (max-width:960px){ .studio .preview-col{position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0 8px;margin:0 -2px;padding-left:2px;padding-right:2px} .studio .preview-col .sticky{position:static;gap:8px} .studio .preview-col .stage{box-shadow:0 10px 24px -18px rgba(14,17,22,.5)} .studio .preview-col .sticky > .hint{display:none} /* the explanatory line is noise on a phone */ .studio .preview-head .label{font-size:.9rem} .studio #gates-slot{order:-1;display:grid;gap:12px;margin:4px 0 18px} /* right under the pinned preview, above the form */ #gates-slot:empty{display:none} .font-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .layout-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .font-card{flex-wrap:wrap} .font-card .font-sample{margin-left:0;flex-basis:100%;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (max-width:560px){ .font-grid{grid-template-columns:minmax(0,1fr)} .font-card .font-sample{flex-basis:auto;margin-left:auto;max-width:60%} } /* File inputs: an invisible input covers each drop zone instead of display:none, so a tap lands on the input itself (the most reliable picker on every phone browser), keyboard users can Tab to it, and screen readers and test automation can find it by its label. The clear button sits above it. */ .drop-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1;font-size:0} .drop-clear{z-index:2} .drop:focus-within{outline:2px solid var(--ink);outline-offset:2px} /* home: three-beat experience section */ #feel ol{grid-template-columns:repeat(3,1fr)} @media (max-width:960px){ #feel ol{grid-template-columns:1fr} } /* legal pages: long URLs and scope names must wrap on phones; comfortable reading width and spacing */ .legal{padding:40px 0 72px} .legal .panel{padding:28px 32px} .legal p,.legal li{line-height:1.6} .legal code,.legal a{overflow-wrap:anywhere;word-break:break-word} .legal code{background:var(--paper);border-radius:6px;padding:1px 5px} @media (max-width:560px){ .legal{padding:20px 0 48px} .legal .panel{padding:20px 18px;border-radius:12px} .legal h1{font-size:1.5rem;line-height:1.25} } /* Wide screens: the right-hand column must be as tall as the form, or the sticky preview inside it has no room to travel and scrolls away with the page (.studio uses align-items:start for the form). */ @media (min-width:961px){ .studio > .preview-col{align-self:stretch} .studio .preview-col .sticky{position:sticky;top:20px} } /* Motion: the Logo column has 2 options beside the Headshot column's 5; keep cards at their natural height */ .choice{align-content:start} /* the logo tile shows the whole logo (wide marks were cropped to their middle); photos still fill */ .drop[data-for=logo] .drop-art img,.drop[data-for=custom_icon] .drop-art img{object-fit:contain;padding:6px;box-sizing:border-box} /* ---------------------------------------------------------------- home hero: photo drop + sample email */ .hero-drop{position:relative;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;margin:22px 0 10px;padding:14px 16px; border:2px dashed var(--ink);border-radius:16px;background:#fff;cursor:pointer;transition:background .15s,transform .15s} .hero-drop:hover,.hero-drop.over{background:#fff7f7;transform:translateY(-1px)} .hero-drop:focus-within{outline:3px solid var(--wax);outline-offset:2px} .hero-drop.busy{border-style:solid;pointer-events:none} .hero-drop-art{width:64px;height:64px;border-radius:12px;background:var(--paper);display:grid;place-items:center;overflow:hidden;color:var(--ink-2)} .hero-drop-art svg{width:30px;height:30px}.hero-drop-art img{width:100%;height:100%;object-fit:cover} .hero-drop-text{display:grid;gap:2px}.hero-drop-text strong{font-size:1.1rem;color:var(--ink)}.hero-drop-text small{color:var(--ink-2);line-height:1.4} .hero-drop-btn{pointer-events:none;white-space:nowrap} .hero-note a{color:var(--ink);font-weight:600} .mail-mock{margin:0;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(14,17,22,.45)} .mail-top{display:flex;gap:6px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--rule)} .mail-top span{width:10px;height:10px;border-radius:50%;background:#d6d8de} .mail-head{padding:16px 20px 10px;border-bottom:1px solid #f0f1f4} .mail-subject{margin:0 0 12px;font-size:1.15rem;font-weight:700;color:var(--ink)} .mail-from{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px} .mail-avatar{width:36px;height:36px;border-radius:50%;background:#1f3b63;color:#fff;display:grid;place-items:center;font-weight:700} .mail-who{display:grid;line-height:1.25}.mail-who strong{font-size:.95rem;color:var(--ink)}.mail-who small,.mail-time{font-size:.8rem;color:var(--ink-2)} .mail-body{padding:16px 20px 20px;font-size:.95rem;color:#2b2f36;line-height:1.55} .mail-body p{margin:0 0 12px} .mail-sig{display:block;width:100%;max-width:668px;height:auto;margin-top:18px} .mail-mock figcaption{padding:10px 20px 14px;font-size:.82rem;color:var(--ink-2);border-top:1px solid #f0f1f4} .nudge{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:#fff7f7;border:1px solid #f3c6c6;color:var(--ink);font-size:.9rem} @media (max-width:560px){ .hero-drop{grid-template-columns:56px 1fr;padding:14px} .hero-drop-art{width:56px;height:56px} .hero-drop-btn{grid-column:1 / -1;text-align:center} .mail-head{padding:14px 14px 8px}.mail-body{padding:14px;font-size:.92rem}.mail-mock figcaption{padding:10px 14px 12px} } /* crop: a fingertip-sized grab area around the small corner handle; the spotlight after "Adjust the crop" */ .crop-handle::after{content:"";position:absolute;inset:-14px;border-radius:50%} @media (pointer:coarse){ .crop-handle{width:24px;height:24px;right:-12px;bottom:-12px} } .crop-ctl.spotlight{outline:3px solid var(--wax);outline-offset:4px;border-radius:12px;transition:outline-color .3s} .link-btn{background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:600;text-decoration:underline;cursor:pointer} .nudge .link-btn{display:inline;margin-left:2px} /* phone-test fixes: name the two halves (Studio controls the Preview), clearer preview label, font notes */ .studio-head{padding:22px 24px 16px;margin:0;border-bottom:1px solid var(--rule)} .studio-head h1{margin:0;font-size:1.6rem;letter-spacing:-.02em} .studio-head p{margin:4px 0 0;color:var(--ink-2);font-size:.95rem} .to-preview.narrow{display:none} .preview-head .preview-label{font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em} .font-where{display:block;flex-basis:100%;margin-top:2px;font-size:.75rem;color:var(--ink-2);line-height:1.3} .font-card{flex-wrap:wrap} @media (max-width:960px){ .to-preview.wide{display:none} .to-preview.narrow{display:inline} .studio .preview-head .label.preview-label{font-size:1rem} } @media (max-width:560px){ .studio-head{padding:18px 16px 14px} } /* phones: the gate lives at the bottom of the studio; a plain-text anchor under the preview jumps to it */ .jump-live{display:none} #gates-bottom{display:grid;gap:12px;margin:18px 0 6px} #gates-bottom:empty{display:none} @media (max-width:960px){ .jump-live{display:block;text-align:center;margin:8px 0 2px;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px} .studio #gates-bottom{order:1} } /* the two prompts shown after the hero hand-off take a full row of the form instead of a grid cell */ .grid2{grid-auto-flow:row dense} /* Role backfills the slot beside Full name when the prompts take full rows */ .grid2 > .nudge{grid-column:1 / -1} /* ---------------------------------------------------------------- Oct 12: sign-in, install, phone safety */ /* no element may make the page wider than the screen: iPhone Safari would zoom the whole page out */ html,body{max-width:100%;overflow-x:clip} img,video,iframe,table{max-width:100%} .font-card{min-width:0} .font-card .font-sample{min-width:0} /* sign-in: two equal ways in */ .auth-card{width:min(680px,100%)} .auth-ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 14px} .auth-way{display:grid;gap:10px;align-content:start;padding:18px;border:1px solid var(--rule);border-radius:var(--radius)} .auth-way h2{margin:0}.auth-way .hint{margin:0} .auth-way form{display:grid;gap:10px} .auth-way input[type=email]{width:100%} .auth-way .btn{justify-self:start} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:640px){ .auth-ways{grid-template-columns:1fr} } /* install: equal tabs per email app */ .install-lede{color:var(--ink-2);max-width:64ch} .client-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px} .ctab{font:600 .95rem var(--font);padding:9px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer} .ctab.active{background:var(--ink);color:#fff;border-color:var(--ink)} .client-pane{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--radius);background:#fff} .client-pane h3{margin:0}.client-pane h4{font-family:var(--font);letter-spacing:-0.02em;margin:0 0 6px;line-height:1.1;font-size:1rem;font-weight:700}#gmail-early .route-actions{margin-top:10px}.client-pane ol{margin:0;padding-left:20px;display:grid;gap:6px}.client-pane p{margin:0} .client-pane details{margin-top:4px} .copy-row{margin-top:4px} /* ---------------------------------------------------------------- home v21.8: the demo first, one tap to make it yours */ .hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"copy demo" "act demo";column-gap:48px;row-gap:22px;align-items:center;padding:44px 0 40px} .hero2-copy{grid-area:copy;align-self:end} .hero2 h1{max-width:13ch;margin-top:8px} .hero2-sub{font-size:1.15rem;color:var(--ink-2);margin:14px 0 0;max-width:34ch} .hero2-act{grid-area:act;align-self:start} .demo{grid-area:demo;margin:0;min-width:0} .demo-mail{position:relative;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 70px -40px rgba(14,17,22,.45);padding:14px 16px 16px;transition:box-shadow .15s} /* the rotation (static/home.js): a copy of the outgoing email sits on top and dissolves while the next one, already underneath, settles into place */ .demo-swap{position:absolute;z-index:2;overflow:hidden;pointer-events:none;background:#fff} .demo-swap canvas{display:block;width:100%;height:auto} .demo-swap .seam{position:absolute;left:0;width:4px;background:var(--wax);border-radius:2px} .mail-avatar.p-matthew{background:var(--wax)}.mail-avatar.p-elena{background:#1f3b63}.mail-avatar.p-camila{background:#1E5B4B}.mail-avatar.p-you{background:#1d1d1d} .demo.over .demo-mail{box-shadow:0 0 0 3px var(--wax)} .demo-mail-head{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink)} .demo-mail-head .mail-avatar{width:30px;height:30px;font-size:.85rem;flex:none} .demo-mail-head small{color:var(--ink-2)} .demo-mail-body{margin:10px 0 0;font-family:var(--email);font-size:.92rem;color:#2b2f36;line-height:1.5} .demo-sig{position:relative;margin-top:10px} .demo-sig img{display:block;width:100%;height:auto} /* the whole headshot is the tap target (position = the headshot's box inside the 668x267 demo); the pill sits across the photo's bottom edge, half on the photo and half below it */ .demo-badge{position:absolute;z-index:3;left:3.89%;top:14.23%;width:28.74%;height:71.91%;border:0;padding:0;background:transparent;cursor:pointer; display:flex;align-items:flex-end;justify-content:center;border-radius:6%;overflow:visible} .demo-badge:focus-visible{outline:3px solid var(--wax);outline-offset:3px} .badge-pill{margin-bottom:-13px;background:var(--wax);color:#fff;border-radius:999px;padding:7px 12px;font:700 13px/1 var(--font);white-space:nowrap; box-shadow:0 8px 18px -8px rgba(185,18,27,.7);animation:badge-pulse 2.4s ease-in-out infinite} .demo-badge:hover .badge-pill{background:var(--wax-dark)} @keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} .demo-badge.mine img{width:100%;height:100%;object-fit:cover;border-radius:6%;box-shadow:0 0 0 3px #fff} .demo-styles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px} .chip{border:1.5px solid var(--rule);background:#fff;color:var(--ink-2);border-radius:999px;padding:6px 13px;font:600 13px/1.2 var(--font);cursor:pointer} .chip:hover{border-color:var(--ink-3);color:var(--ink)} .chip[aria-pressed=true]{border-color:var(--ink);color:var(--ink)} .pick-main,.pick-selfie,.pick-device{cursor:pointer} .pick-main:focus-within,.pick-selfie:focus-within,.pick-device:focus-within{outline:3px solid var(--ink);outline-offset:2px} .pick-main.busy,.pick-device.busy{pointer-events:none;opacity:.85} .hero2-trust{margin:8px 0 0;font-weight:600;color:var(--ink)} .hero2-fine{margin:4px 0 0;font-size:.88rem;color:var(--ink-2)} .hero2-fine a{color:var(--ink);font-weight:600} .faq{padding:0 0 48px;max-width:760px} .faq h2{margin:0 0 12px} .faq details{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-s);padding:14px 16px;margin-top:10px} .faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.2rem;font-weight:700;color:var(--ink-2)} .faq details[open] summary::after{content:"\2212"} .faq p{margin:10px 0 0;color:var(--ink-2);line-height:1.55} .faq a{color:var(--ink);font-weight:600} /* editor: the selfie button inside the headshot slot (phones only) */ .drop-selfie{justify-self:start;margin-top:8px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font:600 13px/1.2 var(--font);cursor:pointer} .drop-selfie+.drop-selfie{margin-left:6px} /* v22.3: Import from Facebook sits beside Take a selfie in the headshot slot */ @media (prefers-reduced-motion:reduce){.badge-pill{animation:none}} @media (max-width:960px){ .hero2{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "demo" "act";padding:16px 0 20px;row-gap:12px} } @media (max-width:560px){ .demo-styles{gap:6px} .chip{padding:6px 11px} .hero2-sub{font-size:1.02rem;margin-top:8px} .demo-mail{padding:12px 12px 14px} .demo-mail-body{display:none} /* keeps the reassurance line above the fold on phones */ .pick-selfie,.pick-device{width:100%} .badge-pill{padding:6px 10px;font-size:12px;margin-bottom:-12px} } @media (max-width:380px){ .chip{padding:5px 9px;font-size:12.5px} .demo-styles{gap:5px} } /* five chips on one line on small phones */ @media (max-width:340px){ .chip{padding:5px 7px;font-size:12px} .demo-styles{gap:4px} } /* ---- v22 (task 014): first-ask release. Editor: the monogram card, the sample tag, the sample gate. ---- */ .drop-art{position:relative} .drop-tag{position:absolute;left:0;right:0;bottom:0;background:rgba(14,17,22,.78);color:#fff;font:700 10px/1 var(--font);text-align:center;padding:4px 0 3px;letter-spacing:.02em} .mono-card{margin:14px 0;width:100%;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:14px;border:1.5px solid var(--rule);border-radius:12px;padding:10px 12px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink-2);transition:border-color .15s,background .15s} .mono-card:hover{border-color:var(--ink)} .mono-card.selected{border-color:var(--ink);background:#f6f6f6} .mono-card:focus-visible{outline:2px solid var(--ink);outline-offset:1px} .mono-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:9px;background:#1d1d1d;color:#f3f1ec;font:500 22px/1 var(--email);letter-spacing:.04em} .mono-tile span:empty::before{content:"Aa";opacity:.35} .mono-text{display:grid;gap:2px}.mono-text strong{color:var(--ink)}.mono-text small{font-weight:400} .gate-row{display:flex;flex-wrap:wrap;gap:8px} .gate-row .btn{margin-top:0} /* ---- v22 (task 014): home page. The name pill on the demo, and the live "yours" signature it opens. ---- */ /* The pill sits just under the signature's name line (the text column starts at 51.5% of the 668-wide demo; the name line ends at about 42% of its 267px height), so the sample name stays readable (v22.3). Same look as the photo badge, so the two read as "your name, your photo". */ .demo-namepill{position:absolute;z-index:3;left:51.5%;top:44%;border:0;padding:0;background:transparent;cursor:pointer;display:flex} /* v22.3: under the name line, not on it */ .demo-namepill:focus-visible{outline:3px solid var(--wax);outline-offset:3px} .name-pill{background:var(--wax);color:#fff;border-radius:999px;padding:7px 12px;font:700 13px/1 var(--font);white-space:nowrap;box-shadow:0 8px 18px -8px rgba(185,18,27,.7);animation:badge-pulse 2.4s ease-in-out 1.2s infinite} .demo-namepill:hover .name-pill{background:var(--wax-dark)} .demo.yours .demo-namepill{display:none} .demo.yours .demo-badge .badge-pill{animation-delay:.6s} .demo.yours #demoImg{visibility:hidden} /* keeps the box; the live copy sits exactly over it */ /* the live copy: a 668x267 card like the demo pictures, scaled to the picture's width by home.js */ .demo-yours{position:absolute;inset:0;z-index:2;overflow:hidden} .dy-card{position:absolute;left:0;top:0;width:668px;height:267px;background:#fff;transform-origin:0 0;font-family:var(--email);color:#111} .dy-spine{position:absolute;left:0;top:0;width:4px;height:100%;background:#1d1d1d} .dy-photo{position:absolute;left:26px;top:38px;width:192px;height:192px;border-radius:12px;background:#1d1d1d;color:#f3f1ec;overflow:hidden;display:grid;place-items:center;font:500 84px/1 var(--email);letter-spacing:.03em} .dy-photo .b{position:absolute;background:#fff;pointer-events:none;display:none} .dy-rule{position:absolute;left:236px;top:102px;width:4px;height:64px;border-radius:2px;background:#cdc8bd} .dy-text{position:absolute;left:344px;top:0;width:300px;height:100%} .dy-logo{position:absolute;left:0;top:24px;width:150px;height:40px;border:1.5px dashed #d5d9e0;border-radius:8px;display:grid;place-items:center;font:600 12px var(--font);color:#b0b5bd;letter-spacing:.02em} input[type=text].dy-name{position:absolute;left:0;top:82px;width:300px;height:30px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#111;font:700 26px/30px var(--email);letter-spacing:-.3px;outline:none;caret-color:var(--wax);box-shadow:none} input[type=text].dy-name::placeholder{color:#b0b5bd;opacity:1} input[type=text].dy-name:focus{outline:none;border:0;box-shadow:0 2px 0 var(--wax)} .dy-line{position:absolute;left:0;color:#b0b5bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px} .dy-title{top:118px;font:400 15px/19px var(--email)} .dy-co{top:150px;font:600 18px/22px var(--email)} .dy-mail{top:178px;font:400 15px/19px var(--email)} /* reveals: a 6 s cycle, the reveal in the first fifth, then a hold (the demo pictures loop the same way) */ .dy-photo.anim-iris{animation:dy-iris 6s ease-out infinite} .dy-photo.anim-wipe{animation:dy-wipe 6s cubic-bezier(.4,0,.2,1) infinite} .dy-photo.anim-hslices .b,.dy-photo.anim-slices .b{display:block} .dy-photo.anim-hslices .b{left:0;width:100%;height:25.5%;transform-origin:100% 50%;animation:dy-bandx 6s cubic-bezier(.4,0,.2,1) infinite} .dy-photo.anim-hslices .b1{top:0}.dy-photo.anim-hslices .b2{top:25%}.dy-photo.anim-hslices .b3{top:50%}.dy-photo.anim-hslices .b4{top:75%} .dy-photo.anim-slices .b{top:-20%;height:140%;width:30%;transform:skewX(-20deg);transform-origin:50% 100%;animation:dy-bandy 6s cubic-bezier(.4,0,.2,1) infinite} .dy-photo.anim-slices .b1{left:-6%}.dy-photo.anim-slices .b2{left:20%}.dy-photo.anim-slices .b3{left:46%}.dy-photo.anim-slices .b4{left:72%} .dy-photo .b2{animation-delay:.12s!important}.dy-photo .b3{animation-delay:.24s!important}.dy-photo .b4{animation-delay:.36s!important} @keyframes dy-iris{0%{clip-path:circle(0 at 50% 50%)}20%{clip-path:circle(75% at 50% 50%)}100%{clip-path:circle(75% at 50% 50%)}} @keyframes dy-wipe{0%{clip-path:polygon(0 0,0 0,-50% 100%,-50% 100%)}22%{clip-path:polygon(0 0,150% 0,100% 100%,-50% 100%)}100%{clip-path:polygon(0 0,150% 0,100% 100%,-50% 100%)}} @keyframes dy-bandx{0%{transform:scaleX(1)}18%{transform:scaleX(0)}100%{transform:scaleX(0)}} @keyframes dy-bandy{0%{transform:skewX(-20deg) scaleY(1)}18%{transform:skewX(-20deg) scaleY(0)}100%{transform:skewX(-20deg) scaleY(0)}} .hero2-price{color:var(--ink)} .hero2-ways a{white-space:nowrap} @media (max-width:560px){ .name-pill{padding:6px 10px;font-size:12px} .demo-namepill{top:45%} } /* v22: the first screen asks for the name only; the photo button follows (v22.1: beside / under the field, quiet until there is a name) */ .name-first{display:flex;flex-wrap:wrap;gap:10px} .name-first input[type=text]{flex:1 1 220px;min-width:0;padding:14px 18px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;font:600 17px/1.2 var(--font);color:var(--ink)} .name-first input[type=text]::placeholder{color:var(--ink-3);font-weight:500} .name-first input[type=text]:focus{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)} .name-first .btn{flex:0 0 auto} /* v22.1: "Add my photo" is the next action, not a gate. Quiet (outline, white) until there is a name; red once there is. The two states share one box, so the switch is a colour change, not a layout change. */ .name-first .pick-main{background:#fff;transition:background .25s,border-color .25s,color .25s} .name-first .pick-main:hover{background:var(--paper)} .name-first.named .pick-main{background:var(--wax);border-color:var(--wax);color:#fff} .name-first.named .pick-main:hover{background:var(--wax-dark);border-color:var(--wax-dark)} /* the other ways in (a selfie on phones, the sample photo, a monogram) ease open under the button once there is a name: a grid row growing from 0fr to 1fr, so the lines below slide down instead of jumping. Clipped while it opens; the padding keeps the selfie button's focus ring inside the clip. */ .hero2-more{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;margin:0 -6px;padding:0 6px;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .4s,padding .4s} .hero2-more.on{grid-template-rows:1fr;opacity:1;padding:6px 6px 6px} .hero2-more>div{min-height:0} .hero2-more .pick-device{margin-top:4px} .hero2-more .pick-selfie{margin-top:4px} .hero2-more .pick-device+.pick-selfie{margin-left:8px} @media (max-width:560px){ .hero2-more .pick-device+.pick-selfie{margin-left:0;margin-top:8px} } /* v22.3: the Facebook button is a