PLACEHOLDER-INCOMPLETE-WILL-CONTINUE-SEE-NEXT-STEP :root{ /* garment swatches — tuned to the real pieces */ --brown-tee:#5B4133; --black-tee:#2F2D2A; --graphic-tee:#242220; --graphic-print:#6E4B34; --grey-tee:#C3C2BB; --pink-shirt:#D8BCB1; --cords:#B4915F; --jeans:#92AAC0; --hoodie:#201F1D; --af1:#F0EDE6; --af1-accent:#2F2D2A; --vans:#9E3D30; --cream-shirt:#E7DCC2; --navy-shirt:#1E2A3B; --jeans-loose:#829AB2; --chore-coat:#C8BEA8; --chore-collar:#211F1D; --green-shacket:#BAC7A6; --dickies:#8C8659; --hike-pants:#6E6E4F; --nbt-hoodie:#E6E0D2; --grey-cardi:#B9B8B2; --oat-cardi:#D8CFBB; --pattern-knit:#7E8B8D; --pattern-accent:#6B5442; --knit-shirt:#E0D6BF; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;touch-action:manipulation} body{ background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.5; padding:0 0 calc(56px + env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; } .eyebrow{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mono); } /* ---- header ---- */ header{ padding:38px 22px 26px; } /* ---- ticket tear: the one place the coat-check motif gets loud ---- */ .ticket-tear{ height:12px; background-image:radial-gradient(circle 3px, var(--line) 3px, transparent 3.2px); background-repeat:repeat-x; background-position:0 center; background-size:18px 12px; } header .eyebrow{display:block;margin-bottom:14px} h1{ font-family:"Fraunces",serif; font-weight:500; font-size:58px; line-height:0.92; letter-spacing:-0.01em; } h1 em{font-style:italic;color:var(--indigo)} header p{ margin-top:16px; max-width:34ch; color:var(--ink-soft); font-size:14.5px; } .count{ margin-top:18px; font-family:"Space Mono",monospace; font-size:12px; color:var(--ink); letter-spacing:0.04em; } .count b{color:var(--indigo)} /* ---- weather panel ---- */ .weather{ margin:18px 16px 0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:17px 18px; overflow:hidden; box-shadow:var(--shadow-sm); } .weather .wtop{ display:flex;align-items:center;gap:14px; } .weather .glyph{font-size:34px;line-height:1;flex:none} .weather .now{display:flex;flex-direction:column;gap:2px;min-width:0} .weather .temp{ font-family:"Fraunces",serif;font-size:38px;line-height:.9;letter-spacing:-.01em; } .weather .cond{ font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft); } .weather .meta{ margin-left:auto;text-align:right;flex:none; font-family:"Space Mono",monospace;font-size:10.5px;color:var(--mono);line-height:1.7;letter-spacing:.03em; } .weather .meta b{color:var(--ink)} .weather .rec{ margin-top:14px;padding-top:14px;border-top:1px solid var(--line); } .weather .rec .rlabel{ font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--mono);margin-bottom:7px; } .weather .rec .rhead{font-size:13.5px;color:var(--ink);line-height:1.5} .weather .rec .rlooks{ margin-top:9px;display:flex;flex-wrap:wrap;gap:6px; } .weather .rec .rl{ font-family:"Space Mono",monospace;font-size:11px; padding:5px 9px;border:1px solid var(--line);border-radius:20px; color:var(--ink);background:var(--paper-2);cursor:pointer; } .weather .rec .rl:active{transform:scale(.97)} .weather .caution{ margin-top:9px;font-size:12px;color:var(--warn);line-height:1.45; } .weather .days{ margin-top:13px;padding-top:13px;border-top:1px solid var(--line); display:flex;gap:8px; } .weather .day{ flex:1;text-align:center;font-family:"Space Mono",monospace; display:flex;flex-direction:column;gap:3px; } .weather .day .dn{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mono)} .weather .day .dg{font-size:17px;line-height:1} .weather .day .dt{font-size:11px;color:var(--ink)} .weather .day .dt b{color:var(--ink)} .weather .wmsg{ font-family:"Space Mono",monospace;font-size:11.5px;color:var(--mono); letter-spacing:.03em;line-height:1.5; } /* ---- filter / search bar ---- */ .filterbar{padding:8px 16px 0} .filterbar .srow{display:flex;gap:8px;margin-bottom:8px} .filterbar input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 12px; border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)} .filterbar .laundry-btn{font:inherit;font-family:"Space Mono",monospace;font-size:11px; padding:0 13px;border:1px solid var(--line);background:var(--card);color:var(--ink); border-radius:10px;cursor:pointer;flex:none} .filterbar .cats{display:flex;flex-wrap:wrap;gap:6px} .filterbar .cat{font-family:"Space Mono",monospace;font-size:11px;padding:6px 11px; border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);cursor:pointer} .filterbar .cat.on{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .chip.hide{display:none} .chip.washing{opacity:.42} .chip.washing .lbl{text-decoration:line-through} /* ---- week planner ---- */ .planner{margin:12px 16px 0;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:16px 17px;display:none;box-shadow:var(--shadow-sm)} .planner.show{display:block} .planner .pt{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink);margin-bottom:12px} .pday{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)} .pday:first-of-type{border-top:none} .pday .pd-when{font-family:"Space Mono",monospace;font-size:11px;color:var(--mono); width:64px;flex:none;line-height:1.35} .pday .pd-when b{display:block;color:var(--ink);font-size:12px} .pday select{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 10px; border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink)} .pday .pd-auto{font:inherit;font-family:"Space Mono",monospace;font-size:10px; padding:0 10px;height:36px;border:1px solid var(--stamp);background:var(--stamp); color:var(--on-accent);border-radius:9px;cursor:pointer;flex:none} /* ---- laundry / edit shared list modal ---- */ .listrow{display:flex;align-items:center;gap:11px;padding:11px 4px;border-top:1px solid var(--line);cursor:pointer} .listrow:first-of-type{border-top:none} .listrow .ls{width:22px;height:22px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.14)} .listrow .ln{font-size:13.5px;flex:1} .listrow .lk{font-family:"Space Mono",monospace;font-size:15px;color:var(--mono);flex:none} .listrow.on .lk{color:var(--indigo)} .listrow.on .ln{color:var(--ink)} .listrow:not(.on) .ln{color:var(--ink-soft)} /* ---- action bar ---- */ .actions{margin:12px 16px 0;display:flex;gap:8px} .actions button{ flex:1;font:inherit;cursor:pointer; font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em; padding:13px 10px;border-radius:12px;border:1px solid var(--line); background:var(--card);color:var(--ink); display:flex;align-items:center;justify-content:center;gap:7px; transition:transform .1s, background .18s, border-color .18s; } .actions button:active{transform:scale(.98)} .actions .lucky{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} /* ---- lucky toast ---- */ .toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px); background:var(--ink);color:var(--paper); font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.03em; padding:12px 18px;border-radius:30px;opacity:0;pointer-events:none; transition:opacity .25s, transform .25s;z-index:60;max-width:88%;text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.25); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .sync-banner{ position:fixed;left:16px;right:16px;bottom:26px;max-width:528px;margin:0 auto; background:var(--card);border:1px solid var(--indigo);border-radius:14px; padding:12px 14px;display:none;align-items:center;gap:10px; box-shadow:var(--shadow-md);z-index:61;font-size:13px;color:var(--ink); } .sync-banner.show{display:flex} .sync-banner span{flex:1} .sync-banner #syncRefresh{font:inherit;font-family:"Space Mono",monospace;font-size:11px; border:none;background:var(--stamp);color:var(--on-accent);padding:8px 12px;border-radius:9px; cursor:pointer;flex:none} .sync-banner #syncDismiss{font:inherit;color:var(--mono);background:none;border:none; font-size:16px;cursor:pointer;padding:2px 4px;flex:none;line-height:1} /* ---- added pieces ---- */ .added-label{ font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--mono);padding:12px 6px 8px; } /* ---- add-piece modal ---- */ .modal-bg{position:fixed;inset:0;background:rgba(20,18,15,.5);opacity:0;pointer-events:none; transition:opacity .2s;z-index:70;display:flex;align-items:flex-end;justify-content:center} .modal-bg.show{opacity:1;pointer-events:auto} .modal{ background:var(--paper);width:100%;max-width:560px;border-radius:20px 20px 0 0; padding:22px 20px 30px;transform:translateY(30px);transition:transform .25s; max-height:90vh;overflow:auto; box-shadow:var(--shadow-md); } .modal-bg.show .modal{transform:none} .modal h3{font-family:"Fraunces",serif;font-size:27px;font-weight:500;margin-bottom:18px} .field{margin-bottom:15px} .field > label{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--mono);margin-bottom:7px} .field input[type=text], .field select, .field textarea{ width:100%;font:inherit;font-size:16px;padding:12px;border-radius:10px; border:1px solid var(--line);background:var(--card);color:var(--ink); } .field textarea{resize:vertical;min-height:64px} .modal.curated-edit .addonly{display:none} .colorwrap{display:flex;align-items:center;gap:11px} .colorwrap input[type=color]{width:48px;height:48px;border:1px solid var(--line); border-radius:10px;background:none;padding:2px;cursor:pointer;flex:none} .photo-btn{display:flex;align-items:center;gap:12px;cursor:pointer} .photo-preview{width:58px;height:58px;border-radius:10px;border:1px solid var(--line); background:var(--card) center/cover no-repeat;flex:none} .photo-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.35} .modal-actions{display:flex;gap:10px;margin-top:6px} .modal-actions button{flex:1;font:inherit;font-family:"Space Mono",monospace;font-size:13px; padding:14px;border-radius:12px;cursor:pointer;border:1px solid var(--line)} .modal-actions .save{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .modal-actions .cancel{background:var(--card);color:var(--ink)} .store-note{font-size:11px;color:var(--mono);margin-top:14px;line-height:1.45; font-family:"Space Mono",monospace} .bulk-status{display:none;margin-top:10px;font-size:12px;color:var(--ink-soft);line-height:1.5} .bulk-status.show{display:block} .bulk-status .spin{margin-right:6px} /* ---- AI stylist ---- */ .stylist{margin:12px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 17px;box-shadow:var(--shadow-sm)} .st-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px} .st-title{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)} .st-io{display:flex;gap:8px} .st-io input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line); border-radius:10px;background:var(--paper-2);color:var(--ink)} .st-io button{font:inherit;font-family:"Space Mono",monospace;font-size:12px;padding:0 17px; border:1px solid var(--stamp);background:var(--stamp);color:var(--on-accent);border-radius:10px;cursor:pointer;flex:none} .st-io button:disabled{opacity:.5} .st-answer{margin-top:13px;font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;display:none} .st-answer.show{display:block} .st-answer.err{color:var(--warn);white-space:normal} /* ---- AI buy suggestions + saved BOLO ---- */ .buy-btn{margin-top:11px;font:inherit;font-family:"Space Mono",monospace;font-size:11px; padding:9px 12px;border:1px solid var(--indigo);background:none;color:var(--indigo); border-radius:20px;cursor:pointer} .sug{margin-top:12px} .sug .sug-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)} .sug .sug-item:first-child{border-top:none} .sug .sug-body{flex:1;font-size:13px;line-height:1.45} .sug .sug-body b{color:var(--ink)} .sug .sug-body .why{color:var(--ink-soft)} .sug .sug-add{font:inherit;font-family:"Space Mono",monospace;font-size:15px;line-height:1; border:1px solid var(--line);background:var(--card);color:var(--indigo); border-radius:8px;width:34px;height:34px;flex:none;cursor:pointer} .sug .sug-add:disabled{opacity:.4;color:var(--mono)} .userbolo{margin-top:8px} .userbolo .ub{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)} .userbolo .ub:first-child{border-top:none} .userbolo .ub-body{flex:1;font-size:13px;line-height:1.45} .userbolo .ub-body b{color:var(--ink)} .userbolo .ub-body .why{color:var(--ink-soft)} .userbolo .ub-del{background:none;border:none;color:var(--mono);font-size:16px;cursor:pointer;flex:none;padding:2px 4px} .bc{width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px; border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center; font-family:"Space Mono",monospace;font-size:11px;color:var(--on-accent);cursor:pointer;background:var(--paper-2)} .ub.bought .bc,.bolo-item.bought .bc{background:var(--stamp);border-color:var(--stamp)} .ub.bought .ub-body{text-decoration:line-through;opacity:.55} .review-btn{font:inherit;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.04em; padding:11px 14px;border:1px solid var(--stamp);background:var(--stamp);color:var(--on-accent); border-radius:11px;cursor:pointer;margin-bottom:4px} /* ---- header top / profile ---- */ .hd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .profile-btn{font:inherit;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink);background:var(--card);border:1px solid var(--line); border-radius:20px;padding:6px 12px;cursor:pointer} /* ---- guest (partner) blank slate ---- */ body.guest #grid > .look:not(.userlook), body.guest #grid > .group-label, body.guest #legend .chip:not(.added-piece){display:none !important} /* ---- welcome / onboarding overlay ---- */ .ob-bg{position:fixed;inset:0;background:var(--paper);z-index:90;overflow:auto; display:none;padding:0 0 40px} .ob-bg.show{display:block} .ob{max-width:560px;margin:0 auto;padding:44px 22px 0} .ob .eyebrow{display:block;margin-bottom:14px} .ob h2{font-family:"Fraunces",serif;font-weight:500;font-size:40px;line-height:1; letter-spacing:-.01em;margin-bottom:10px} .ob h2 em{font-style:italic;color:var(--indigo)} .ob p.sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:26px;max-width:40ch} .ob-choice{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .ob-choice button,.ob-choice .gsi{font:inherit;text-align:left;background:var(--card);border:1px solid var(--line); border-radius:14px;padding:16px 17px;color:var(--ink)} .ob-choice button{cursor:pointer} .ob-choice button .t,.ob-choice .gsi .t{font-family:"Fraunces",serif;font-size:20px;display:block} .ob-choice button .d,.ob-choice .gsi .d{font-size:12.5px;color:var(--ink-soft);margin-top:3px} .ob-choice .gsi{border-color:var(--indigo)} .gsi-btn{margin-top:12px;margin-left:-14px;min-height:40px} .ob-field{margin-bottom:16px} .ob-field label{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--mono);margin-bottom:7px} .ob-field input, .ob-field select{width:100%;font:inherit;font-size:16px;padding:12px; border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)} .ob-field .hint{font-size:11px;color:var(--mono);margin-top:5px} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:8px} .tile{border:1px solid var(--line);border-radius:13px;padding:13px;cursor:pointer;background:var(--card); transition:border-color .15s, background .15s} .tile.on{border-color:var(--indigo);background:var(--accent-tint)} .tile .pal{display:flex;gap:4px;margin-bottom:8px} .tile .pal span{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.12)} .tile .tn{font-family:"Fraunces",serif;font-size:17px;line-height:1} .tile .td{font-size:11px;color:var(--ink-soft);margin-top:3px;line-height:1.35} .ob-nav{display:flex;gap:10px;margin-top:22px} .ob-nav button{flex:1;font:inherit;font-family:"Space Mono",monospace;font-size:13px;padding:14px; border-radius:12px;cursor:pointer;border:1px solid var(--line)} .ob-nav .next{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .ob-nav .back{background:var(--card);color:var(--ink)} .ob-step{display:none} .ob-step.on{display:block} .ob-dots{display:flex;gap:5px;margin-bottom:22px} .ob-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)} .ob-dots i.on{background:var(--stamp)} .ob-textlink{background:none;border:none;color:var(--mono);font-family:"Space Mono",monospace; font-size:11px;text-decoration:underline;cursor:pointer;margin-top:18px;padding:6px 0;display:block} .swatch-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:9px} .swatch-pick .sc{aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer} .swatch-pick .sc.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--indigo)} .chip-pick{display:flex;flex-wrap:wrap;gap:7px} .chip-pick .pc{font-family:"Space Mono",monospace;font-size:11px;padding:8px 12px; border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);cursor:pointer} .chip-pick .pc.on{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .ob-manage{margin-top:20px;border-top:1px solid var(--line);padding-top:16px} .ob-manage .cur{font-size:13px;color:var(--ink-soft);margin-bottom:10px} .ob-manage button{font:inherit;font-family:"Space Mono",monospace;font-size:11px; padding:9px 13px;border-radius:20px;cursor:pointer;margin-right:8px;border:1px solid var(--line);background:var(--card)} .ob-manage .del{color:var(--warn);border-color:var(--warn)} /* ---- settings page: your card, appearance, account — static cards, no entrance animation (unlike .step-card), since this screen gets revisited often and shouldn't replay a pop-in every time ---- */ .settings-head{padding:22px 22px 4px} .settings-head h2{font-family:"Fraunces",serif;font-weight:500;font-size:32px; letter-spacing:-.01em;margin-top:8px} .settings-label{padding:22px 22px 8px 22px;margin:0} .settings-card{position:relative;background:var(--card);border-radius:20px; box-shadow:var(--shadow-md);padding:20px;margin:0 16px 22px} .member-row{display:flex;align-items:center;gap:16px} .avatar-btn{position:relative;width:72px;height:72px;border-radius:50%;flex:none; cursor:pointer;overflow:hidden;border:2px solid var(--line);background:var(--accent-tint)} .avatar-btn:focus-within{outline:2px solid var(--indigo);outline-offset:2px} .avatar-img{width:100%;height:100%;background-size:cover;background-position:center; display:flex;align-items:center;justify-content:center; font-family:"Fraunces",serif;font-style:italic;font-size:26px;color:var(--indigo)} .avatar-edit{position:absolute;left:0;right:0;bottom:0;background:rgba(20,18,15,.6);color:#fff; font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.06em;text-transform:uppercase; text-align:center;padding:4px 0;pointer-events:none} .member-fields{flex:1;min-width:0} .member-fields label{display:block;font-family:"Space Mono",monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--mono);margin-bottom:7px} .member-fields input{width:100%;font:inherit;font-size:16px;padding:11px 12px; border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)} .member-stats{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px; border-top:1px dashed var(--line);font-family:"Space Mono",monospace;font-size:11px; color:var(--ink-soft);font-variant-numeric:tabular-nums} .account-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px; margin-bottom:14px} .account-row .lbl{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--mono)} .account-row .who{font-family:"Fraunces",serif;font-size:18px;color:var(--ink)} .settings-card .ob-textlink{margin-top:0;margin-bottom:10px;display:block} .settings-card .ob-textlink:last-child{margin-bottom:0} /* ---- welcome ticket: the gate reimagined as the claim check itself ---- */ .ob-rail{position:relative;height:78px;margin-bottom:6px} .rail-bar{ position:absolute;top:20px;left:6%;right:6%;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent); } .rail-bar::before,.rail-bar::after{ content:"";position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--gold); } .rail-bar::before{left:-4px} .rail-bar::after{right:-4px} .ob-tag{ position:absolute;top:22px; transform-origin:top center; animation:tag-sway var(--sway-dur,7s) ease-in-out infinite; animation-delay:var(--sway-delay,0s); } .ob-tag::before{content:"";display:block;width:1px;height:16px;background:var(--line);margin:0 auto} .ob-tag span{ display:block;font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase; color:var(--on-accent);background:var(--tag-c,var(--indigo));padding:6px 8px 7px;border-radius:3px 3px 8px 8px; box-shadow:var(--shadow-sm); } @keyframes tag-sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}} @media (prefers-reduced-motion:reduce){ .ob-tag{animation:none} } .ticket-card{ position:relative;background:var(--card);border-radius:20px; box-shadow:var(--shadow-md);padding:26px 24px 22px; opacity:0;transform:translateY(40px) rotate(-1.2deg) scale(.97); animation:ticket-feed .7s cubic-bezier(.2,.8,.24,1.14) forwards; animation-delay:.1s; } @keyframes ticket-feed{ 60%{opacity:1} 100%{opacity:1;transform:translateY(0) rotate(-.3deg) scale(1)} } .ticket-card.settled{opacity:1;animation:ticket-float 6.5s ease-in-out .8s infinite} @keyframes ticket-float{ 0%,100%{transform:translateY(0) rotate(-.3deg)} 50%{transform:translateY(-4px) rotate(0)} } @media (prefers-reduced-motion:reduce){ /* the global *{animation:none!important} rule below kills any substitute fade animation too, so land straight on the resting state as plain properties */ .ticket-card{opacity:1;transform:translateY(0) rotate(-.3deg) scale(1)} .ticket-card.settled{animation:none} } .ticket-seal{ position:absolute;top:-28px;right:20px;width:50px;height:50px;border-radius:50%; background:var(--gold);background-image:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 55%); box-shadow:var(--shadow-sm), inset 0 0 0 2px var(--card); display:flex;align-items:center;justify-content:center; transform:scale(0) rotate(-40deg); animation:seal-stamp .45s cubic-bezier(.3,1.4,.4,1) forwards;animation-delay:.85s; } .ticket-seal span{ font-family:"Space Mono",monospace;font-weight:700;font-size:8px;letter-spacing:.04em; color:var(--on-accent);text-align:center;line-height:1.15; } @keyframes seal-stamp{ 0%{transform:scale(0) rotate(-40deg)} 55%{transform:scale(1.16) rotate(6deg)} 80%{transform:scale(.95) rotate(-2deg)} 100%{transform:scale(1) rotate(-6deg)} } @media (prefers-reduced-motion:reduce){ .ticket-seal{transform:rotate(-6deg)} } .ticket-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .ticket-serial{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.04em; color:var(--indigo);font-weight:700;font-variant-numeric:tabular-nums} .ticket-card h2{margin-top:8px} .ticket-card .sub{min-height:21px} .ticket-card .sub .cursor{display:inline-block;width:2px;background:var(--indigo);margin-left:2px; animation:ticket-blink 1s step-end infinite} @media (prefers-reduced-motion:reduce){ .ticket-card .sub .cursor{animation:none} } @keyframes ticket-blink{50%{opacity:0}} .ticket-meta{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.03em; color:var(--ink-soft);margin-bottom:18px} .ticket-card .ticket-tear{margin:0 -24px 20px} .ticket-card .ob-choice{margin-bottom:0} .ticket-card .ob-textlink{margin-top:12px} .ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:20px;padding-top:14px;border-top:1px dashed var(--line)} .ticket-barcode{display:flex;gap:1.5px;align-items:stretch;height:20px} .ticket-barcode i{display:block;height:100%;background:var(--ink);opacity:.8} .ticket-foot small{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-soft)} /* punch-hole + confetti flourish, played on the guest-entry tap and on approaching the Google button (can't hook the real click — GIS renders into a cross-origin iframe once loaded, which swallows pointer events from the outer page) */ .ticket-hole{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--paper); box-shadow:inset 0 2px 4px rgba(0,0,0,.18);top:6px;left:6px;transform:scale(0);pointer-events:none} .ticket-hole.pop{animation:hole-pop .4s cubic-bezier(.3,1.6,.4,1) forwards} @keyframes hole-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}} .ticket-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible} .ticket-confetti i{position:absolute;top:13px;left:13px;width:4px;height:7px;border-radius:1px; background:var(--c,var(--indigo));opacity:0} .ticket-confetti.go i{animation:confetti-fly .65s ease-out forwards} @keyframes confetti-fly{ 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))} } @media (prefers-reduced-motion:reduce){ .ticket-hole.pop{animation:none;transform:scale(1)} .ticket-confetti.go i{animation:none} } /* ---- onboarding journey: every step past the welcome ticket gets the same card-arrives treatment (no idle float — that's the welcome hero's alone) ---- */ .ob-step > .ticket-tear{margin-bottom:14px} .step-card{ position:relative;background:var(--card);border-radius:20px;box-shadow:var(--shadow-md); padding:26px 24px 22px; opacity:0;transform:translateY(28px) rotate(-.8deg) scale(.98); animation:ticket-feed .6s cubic-bezier(.2,.8,.24,1.14) forwards; } @media (prefers-reduced-motion:reduce){ /* land on the resting state directly — the global *{animation:none!important} rule below would otherwise leave the animated opacity:0 start state stuck */ .step-card{opacity:1;transform:none} } .ob-choice button.primary{border-color:var(--indigo)} .ob-choice button.primary .t{color:var(--indigo)} .tut-step{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--mono)} .tut-body{color:var(--ink-soft);font-size:14.5px;line-height:1.6;max-width:42ch} /* ---- per-screen illustrated icon: a small line-drawing in a tinted seal, same weight/style as the nav icons, one built-in gesture each rather than a generic spinner so every step reads differently at a glance ---- */ .tut-icon-wrap{display:flex;justify-content:center;margin-bottom:16px} .tut-icon{ width:64px;height:64px;border-radius:50%;background:var(--accent-tint);flex:none; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-sm); transform:scale(0) rotate(-18deg); animation:icon-pop .5s cubic-bezier(.3,1.4,.4,1) forwards;animation-delay:.2s; } .tut-icon svg{width:30px;height:30px;color:var(--indigo);overflow:visible} @keyframes icon-pop{ 0%{transform:scale(0) rotate(-18deg)} 60%{transform:scale(1.12) rotate(4deg)} 100%{transform:scale(1) rotate(0)} } @media (prefers-reduced-motion:reduce){ .tut-icon{transform:scale(1) rotate(0)} } /* step 1 — hanger sways gently, like it's still swinging from being grabbed */ .tut-icon.ic-hanger svg{animation:ic-sway 3.2s ease-in-out .75s infinite;transform-origin:50% 18%} @keyframes ic-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} @media (prefers-reduced-motion:reduce){ .tut-icon.ic-hanger svg{animation:none} } /* step 2 — the checkmark draws itself in, confirming the fit */ .tut-icon.ic-mirror .ic-check{stroke-dasharray:16;stroke-dashoffset:16; animation:ic-draw .35s ease-out .6s forwards} @keyframes ic-draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ .tut-icon.ic-mirror .ic-check{stroke-dashoffset:0;animation:none} } /* step 3 — the three piles rise into place, staggered, like they're being sorted */ .tut-icon.ic-piles rect{opacity:0;transform:translateY(6px);animation:ic-rise .35s ease forwards} .tut-icon.ic-piles rect:nth-child(1){animation-delay:.4s} .tut-icon.ic-piles rect:nth-child(2){animation-delay:.52s} .tut-icon.ic-piles rect:nth-child(3){animation-delay:.64s} @keyframes ic-rise{to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){ .tut-icon.ic-piles rect{opacity:1;transform:none;animation:none} } /* step 4 — the loop keeps turning, second life keeps going */ .tut-icon.ic-loop svg{animation:ic-spin 7s linear .65s infinite} @keyframes ic-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .tut-icon.ic-loop svg{animation:none} } /* path choice — the two branches pulse in turn, echoing the two buttons below */ .tut-icon.ic-fork circle{animation:ic-blink 2.6s ease-in-out infinite} .tut-icon.ic-fork circle:nth-child(2){animation-delay:1.3s} @keyframes ic-blink{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){ .tut-icon.ic-fork circle{animation:none} } /* guest-only / curated hiding */ .guest-only{display:none} body.guest .guest-only{display:block} .guest-empty{padding:14px 16px 0} .guest-empty .prompt{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px} .palette-lbl{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--mono);margin-bottom:10px} .palette-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px} .palette-strip .ps{display:flex;flex-direction:column;align-items:center;gap:5px;width:46px} .palette-strip .ps i{width:34px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.15)} .palette-strip .ps span{font-family:"Space Mono",monospace;font-size:8.5px;color:var(--mono);text-align:center;line-height:1.1} /* ---- pieces described panel ---- */ .pieces-desc{padding:0 22px} .pd-cat{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 4px} .pd-cat button{font-family:"Space Mono",monospace;font-size:11px;padding:8px 13px; border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);cursor:pointer} .pd-cat button.on{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .pd-item{display:flex;gap:13px;padding:16px 0;border-top:1px solid var(--line)} .pd-item:first-child{border-top:none} .pd-sw{width:36px;height:36px;border-radius:9px;flex:none;border:1px solid rgba(0,0,0,.15);margin-top:3px; position:relative;overflow:hidden} .pd-body{flex:1} .pd-name{font-family:"Fraunces",serif;font-size:20px;line-height:1.05} .pd-tag{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mono);margin-left:8px} .pd-desc{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:5px} .pd-desc.gen,.look-desc.gen{color:var(--mono);font-style:italic} .pd-empty{color:var(--mono);font-size:13px;padding:16px 0} .pd-details{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.02em; color:var(--indigo);margin-top:7px} .pd-notes{font-size:13px;line-height:1.5;color:var(--ink-soft);font-style:italic;margin-top:6px} .look-desc{margin-top:11px;font-size:13.5px;line-height:1.6;color:var(--ink-soft); border-top:1px solid var(--line);padding-top:11px} /* only the AI description shows on look cards */ .look .note{display:none} /* loading spinner for generating descriptions */ .spin{display:inline-block;width:15px;height:15px;border-radius:50%; border:2px solid var(--line);border-top-color:var(--indigo); animation:spin .7s linear infinite;vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} .pd-desc.gen,.look-desc.gen{padding-top:8px} /* collapsible sections */ .sec-head{cursor:pointer;user-select:none} .sec-head .chev{margin-left:auto;font-family:"Space Mono",monospace;font-size:15px; color:var(--mono);transition:transform .2s;line-height:1} .sec-head.collapsed .chev{transform:rotate(-90deg)} /* dynamic looks context bar */ .looks-ctx{padding:0 22px 6px} .lc-row{display:flex;gap:8px} .lc-row input{flex:1;font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line); border-radius:11px;background:var(--card);color:var(--ink)} .lc-row button{font:inherit;font-family:"Space Mono",monospace;font-size:12px;padding:0 16px; border:1px solid var(--stamp);background:var(--stamp);color:var(--on-accent);border-radius:11px;cursor:pointer} .lc-note{font-family:"Space Mono",monospace;font-size:11px;color:var(--indigo);margin-top:9px;display:none} .lc-note.show{display:block} .lc-note .clear{color:var(--mono);text-decoration:underline;cursor:pointer;margin-left:8px} .look.ctx-hide{display:none !important} /* ---- section headings ---- */ .sec-head{ padding:30px 22px 6px; display:flex; align-items:baseline; gap:10px; } .sec-head h2{ font-family:"Fraunces",serif; font-weight:400; font-size:26px; letter-spacing:-0.01em; } .sec-head .num{ font-family:"Space Mono",monospace; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:3px 9px 3px 7px; display:inline-flex; align-items:center; gap:5px; } .sec-head .num::before{ content:"";width:5px;height:5px;border-radius:50%; background:var(--gold);flex:none; } .sec-note{ padding:0 22px 12px; font-size:13px; color:var(--ink-soft); max-width:40ch; } /* ---- the pieces legend ---- */ .legend{ padding:6px 16px 4px; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .chip{ display:flex; align-items:center; gap:10px; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-radius:11px; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:border-color .18s, background .18s, transform .1s; } .chip:active{transform:scale(.98)} .chip:focus-visible{outline:2px solid var(--indigo);outline-offset:2px} .chip .sw{ width:24px;height:24px;border-radius:6px;flex:none; border:1px solid rgba(0,0,0,.14); position:relative;overflow:hidden; } /* texture is strictly opt-in via a mat-* class (assigned from a known/recognised material) — a piece with no recognised material stays a plain solid swatch, no pseudo-element at all, rather than falling back to a generic pattern. */ .chip .sw.mat-denim::before, .swatches .s.mat-denim::before, .pd-sw.mat-denim::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(65deg, rgba(14,13,11,.22) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(65deg, rgba(255,255,255,.10) 2px 3px, transparent 3px 5px); } .chip .sw.mat-cotton::before, .swatches .s.mat-cotton::before, .pd-sw.mat-cotton::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px); } .chip .sw.mat-corduroy::before, .swatches .s.mat-corduroy::before, .pd-sw.mat-corduroy::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(14,13,11,.20) 1px 3px, transparent 3px 5px); } .chip .sw.mat-canvas::before, .swatches .s.mat-canvas::before, .pd-sw.mat-canvas::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1.5px, transparent 1.5px 6px); } .chip .sw.mat-knit::before, .swatches .s.mat-knit::before, .pd-sw.mat-knit::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1.5px, rgba(255,255,255,.08) 1.5px 3px, transparent 3px 5px); } .chip .sw.mat-linen::before, .swatches .s.mat-linen::before, .pd-sw.mat-linen::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: repeating-linear-gradient(88deg, rgba(0,0,0,.13) 0 1px, transparent 1px 7px), repeating-linear-gradient(93deg, rgba(0,0,0,.06) 0 1px, transparent 1px 11px), repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 9px); } .chip .sw.mat-fleece::before, .swatches .s.mat-fleece::before, .pd-sw.mat-fleece::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light; background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,.14) 0 1.2px, transparent 1.6px), radial-gradient(circle at 60% 65%, rgba(255,255,255,.10) 0 1.2px, transparent 1.6px), radial-gradient(circle at 80% 25%, rgba(0,0,0,.08) 0 1.2px, transparent 1.6px), radial-gradient(circle at 35% 80%, rgba(255,255,255,.12) 0 1.2px, transparent 1.6px); background-size:8px 8px, 10px 10px, 7px 7px, 9px 9px; } .chip .sw.mat-suede::before, .swatches .s.mat-suede::before, .pd-sw.mat-suede::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light; background-image: radial-gradient(circle at 22% 28%, rgba(255,255,255,.18) 0 1px, transparent 1.4px), radial-gradient(circle at 58% 66%, rgba(14,13,11,.16) 0 1px, transparent 1.4px), radial-gradient(circle at 78% 18%, rgba(255,255,255,.14) 0 1px, transparent 1.4px), radial-gradient(circle at 40% 85%, rgba(14,13,11,.12) 0 1px, transparent 1.4px); background-size:10px 10px, 13px 13px, 8px 8px, 12px 12px; } .chip .sw.mat-wool::before, .swatches .s.mat-wool::before, .pd-sw.mat-wool::before{ content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.10) 0 1px, transparent 1.2px), radial-gradient(circle at 55% 60%, rgba(0,0,0,.08) 0 1px, transparent 1.2px), radial-gradient(circle at 80% 20%, rgba(0,0,0,.09) 0 1px, transparent 1.2px), radial-gradient(circle at 35% 85%, rgba(0,0,0,.07) 0 1px, transparent 1.2px); background-size:6px 6px, 7px 7px, 5px 5px, 8px 8px; } .chip .sw.two::after{ content:"";position:absolute;right:0;bottom:0; width:11px;height:11px; border-top-left-radius:5px; } .chip .lbl{font-size:12px;line-height:1.25;letter-spacing:-.01em;flex:1;min-width:0} .chip[aria-pressed="true"]{ border-color:var(--indigo); background:var(--accent-tint); } .chip.added-piece{position:relative;padding-right:26px;cursor:pointer} .chip .cat{display:block;font-family:"Space Mono",monospace;font-size:9px; color:var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-top:2px} .chip .pdel{position:absolute;top:3px;right:5px;background:none;border:none; color:var(--mono);font-size:15px;line-height:1;cursor:pointer;padding:2px 3px} .chip .cdel{position:absolute;top:2px;right:5px;color:var(--mono);font-size:15px; line-height:1;cursor:pointer;padding:2px 3px;opacity:.55} .chip .cdel:hover{opacity:1;color:var(--warn)} .chip-wear{font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:.03em; font-variant-numeric:tabular-nums;flex:none;align-self:flex-start;white-space:nowrap; color:var(--indigo);border:1px solid var(--indigo);border-radius:20px;padding:2px 6px} .chip-wear.never{color:var(--mono);border-color:var(--line);border-style:dashed} .legend-hint{ padding:10px 22px 2px; font-family:"Space Mono",monospace; font-size:11px; color:var(--mono); letter-spacing:.03em; min-height:18px; transition:color .18s; } /* ---- closet: tap a piece → matching outfits shown right here, no screen switch ---- */ .closet-filtered{margin-top:2px} .closet-filtered .cf-grid{padding:8px 16px 0} .closet-filtered .look{cursor:pointer} .closet-filtered .cf-empty{margin:0 16px;padding:14px 17px;font-family:"Space Mono",monospace;font-size:11px; color:var(--mono);background:var(--card);border:1px solid var(--line);border-radius:16px} /* ---- outfit cards ---- */ .grid{padding:8px 16px 0} .look{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 17px 17px; margin-bottom:12px; transition:opacity .25s, filter .25s; box-shadow:var(--shadow-sm); } .look .top{ display:flex;justify-content:space-between;align-items:baseline;gap:12px; margin-bottom:13px; } .look .name{ font-family:"Fraunces",serif; font-size:25px;line-height:1;letter-spacing:-.01em; } .tag{ font-family:"Space Mono",monospace; font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--indigo); border:1px solid var(--line); padding:4px 7px;border-radius:20px;white-space:nowrap; flex:none; } .swatches{display:flex;gap:0;margin-bottom:13px} .swatches .s{ width:38px;height:52px;border-radius:8px;flex:none; border:1px solid rgba(0,0,0,.16); margin-right:-9px; position:relative;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.4) inset; } .swatches .s:last-child{margin-right:0} .swatches .s.two::after{ content:"";position:absolute;right:0;bottom:0; width:16px;height:16px;border-top-left-radius:7px; } .look .note{font-size:13.5px;color:var(--ink-soft);line-height:1.5} .look .pieces{ margin-top:10px; font-family:"Space Mono",monospace; font-size:10.5px;color:var(--mono);letter-spacing:.02em; line-height:1.5; } /* ---- compact by default: name + swatches + pieces show; description expands ---- */ .look:not(.expanded) .look-desc{display:none} .look.expanded .note{display:block} .look.expanded:has(.look-desc) .note{display:none} .look-toggle{ display:inline-flex;align-items:center;gap:4px;margin-top:11px; font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.05em; color:var(--mono);background:none;border:none;cursor:pointer;padding:0; } .look-toggle .chev{display:inline-block;font-size:11px;line-height:1;transition:transform .2s} .look.expanded .look-toggle .chev{transform:rotate(180deg)} /* ---- wear tracker ---- */ .wear-btn{ display:block;width:100%;margin-top:12px;font:inherit;font-family:"Space Mono",monospace; font-size:11px;letter-spacing:.04em;padding:11px 12px;border-radius:10px;cursor:pointer; border:1px solid var(--line);background:var(--card);color:var(--ink);text-align:center; } .wear-btn.worn{border-color:var(--stamp);background:var(--stamp);color:var(--on-accent)} .wear-meta{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line); font-family:"Space Mono",monospace;font-size:10px;font-variant-numeric:tabular-nums; color:var(--mono);letter-spacing:.03em} .wash-link{display:block;margin-top:6px;font:inherit;font-family:"Space Mono",monospace; font-size:10px;letter-spacing:.03em;color:var(--indigo);background:none;border:none; padding:0;cursor:pointer;text-align:left} .pd-wear{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--indigo);margin-left:6px; border:1px solid var(--indigo);border-radius:20px;padding:2px 7px} /* ---- Ledger: wear stamp counter + per-piece wear ledger ---- */ .ledger-summary{margin:0 16px 20px;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:20px 18px;box-shadow:var(--shadow-sm)} .ledger-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center; width:120px;height:120px;margin:0 auto 18px;border-radius:50%;border:3px solid var(--stamp); color:var(--indigo);transform:rotate(-5deg)} .ledger-stamp .n{font-family:"Space Mono",monospace;font-size:1.7rem;font-weight:700; font-variant-numeric:tabular-nums} .ledger-stamp .l{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--mono)} .ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:10px 0;border-top:1px dashed var(--line);cursor:pointer} .ledger-row:first-child{border-top:none} .ledger-row .lname{font-size:13.5px;color:var(--ink)} .ledger-row .lname::before{content:"⌄";display:inline-block;margin-right:6px; color:var(--mono);font-size:11px;transition:transform .2s;transform:rotate(-90deg)} .ledger-row.open .lname::before{transform:none} .ledger-row .lval{font-family:"Space Mono",monospace;font-size:12px;color:var(--indigo); font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .ledger-row .lval .cost{display:block;font-size:9.5px;color:var(--mono);margin-top:2px} .ledger-entries{padding:2px 0 10px 20px} .le-entry{padding:8px 0;border-top:1px dashed var(--line)} .le-entry:first-child{border-top:none} .le-top{display:flex;align-items:center;gap:8px} .le-date{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--mono);flex:none} .le-outfit{flex:1;font-size:13px;color:var(--ink)} .le-del{flex:none;background:none;border:none;color:var(--mono);font-size:15px; line-height:1;cursor:pointer;padding:2px 4px} .le-del:hover{color:var(--warn)} .le-note{display:block;width:100%;margin-top:6px;font:inherit;font-size:12.5px; padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--paper); color:var(--ink);resize:vertical;min-height:32px} .look.userlook .tag{background:var(--violet);color:var(--on-accent);border-color:var(--violet)} .look.userlook .ul-del{margin-top:11px;font:inherit;font-family:"Space Mono",monospace; font-size:10px;letter-spacing:.04em;color:var(--mono);background:none; border:1px solid var(--line);border-radius:20px;padding:5px 11px;cursor:pointer} .ul-dot{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle; margin-right:6px;border:1px solid rgba(0,0,0,.15)} .prop-actions{display:flex;gap:8px;margin-top:12px} .prop-actions button{flex:1;font:inherit;font-family:"Space Mono",monospace;font-size:11px; padding:9px;border-radius:10px;cursor:pointer;border:1px solid var(--line)} .prop-actions .prop-add{background:var(--stamp);color:var(--on-accent);border-color:var(--stamp)} .prop-actions .prop-rej{background:var(--card);color:var(--ink-soft)} .look.userlook.proposal{border-color:var(--gold)} .look.smart{ border-color:var(--indigo); background:var(--accent-tint); } .look.smart .tag{color:var(--on-accent);background:var(--stamp);border-color:var(--stamp)} .group-label{ padding:22px 22px 2px; font-family:"Space Mono",monospace; font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mono); display:flex;align-items:center;gap:9px; cursor:pointer;user-select:none; } .group-label::after{content:"";flex:1;height:1px;background:var(--line)} .group-label .glc-chev{order:2;font-size:14px;color:var(--mono);transition:transform .2s;line-height:1} .group-label.collapsed .glc-chev{transform:rotate(-90deg)} .group-hidden{visibility:hidden;height:0;padding:0;margin:0;border:0;overflow:hidden} .pick-empty{margin:0 16px;padding:14px 17px;font-family:"Space Mono",monospace;font-size:11px; color:var(--mono);background:var(--card);border:1px solid var(--line);border-radius:16px} /* ---- today's picks: the one hero moment that gets the full ticket treatment ---- */ #pickGrid .look{ position:relative; border-color:var(--indigo); box-shadow:5px 5px 0 var(--shadow-carbon); } #pickGrid .look::before{ content:"Today’s pick"; position:absolute;top:-9px;right:16px; background:var(--paper); border:1.5px solid var(--indigo); color:var(--indigo); font-family:"Space Mono",monospace; font-size:8.5px;letter-spacing:.08em;text-transform:uppercase; padding:3px 8px;border-radius:20px; transform:rotate(-3deg); } /* once something's actually worn today, the card's own "Worn today" tag says it — the "Today's pick" corner stamp would just be a redundant, slightly contradictory label */ #pickGrid.worn .look::before{display:none} /* ---- skip section ---- */ .skip{ margin:8px 16px 0; background:transparent; border:1px dashed var(--line); border-radius:16px; padding:16px 18px; } .skip h3{ font-family:"Space Mono",monospace; font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--warn);margin-bottom:12px; } .skip li{ list-style:none;font-size:13.5px;color:var(--ink-soft); padding:7px 0;border-top:1px solid var(--line); display:flex;gap:9px; } .skip li:first-of-type{border-top:none;padding-top:0} .skip li .x{color:var(--warn);font-family:"Space Mono",monospace;flex:none} /* ---- layers to look for ---- */ .look-for{ margin:20px 16px 0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 18px 6px; box-shadow:var(--shadow-sm); } .look-for .lead{ font-size:13px;color:var(--ink-soft);margin-bottom:16px;max-width:42ch; } .terms{ margin-top:4px;padding:14px 0 8px;border-top:1px solid var(--line); } .terms .tlabel{ font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--mono);margin-bottom:9px; } .terms .tags{display:flex;flex-wrap:wrap;gap:6px} .terms .t{ font-family:"Space Mono",monospace;font-size:11px; padding:5px 9px;border:1px solid var(--line);border-radius:20px; color:var(--ink);background:var(--paper-2); } .terms .rule{ margin-top:12px;font-size:12.5px;color:var(--ink-soft);line-height:1.5; } /* ---- BOLO category list ---- */ .bolo-cat{margin-top:20px} .bolo-cat:first-of-type{margin-top:6px} .bolo-cat .cat-head{ display:flex;align-items:center;gap:9px;margin-bottom:9px; } .bolo-cat .cat-head .ct{ font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink); } .bolo-cat .cat-head .pal{display:flex;gap:4px;margin-left:auto} .bolo-cat .cat-head .pal .c{ width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.16); } .bolo-item{ padding:8px 0;border-top:1px solid var(--line); font-size:13px;line-height:1.45;color:var(--ink-soft); display:flex;gap:10px;align-items:flex-start;cursor:pointer; } .bolo-item:first-of-type{border-top:none} .bolo-item b{color:var(--ink);font-weight:600} .bolo-item .star{color:var(--indigo);font-family:"Space Mono",monospace;font-size:11px} .bolo-item .bi-body{flex:1} .bolo-item.bought{opacity:.55} .bolo-item.bought .bi-body{text-decoration:line-through} /* ---- fit notes ---- */ .fit-item{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)} .fit-item:first-child{border-top:none;padding-top:16px} .fit-item .fi-img{width:52px;height:68px;border-radius:9px;flex:none;border:1px solid var(--line); background-size:cover;background-position:center;background-color:var(--paper-2)} .fit-item .fi-body{flex:1;font-size:13.5px;line-height:1.55;color:var(--ink-soft)} .fit-item .fi-date{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--mono);margin-bottom:4px;display:block} .fit-item .fi-del{background:none;border:none;color:var(--mono);font-size:15px;cursor:pointer; flex:none;padding:2px 4px;align-self:flex-start} .fit-item .fi-del:hover{color:var(--warn)} .fit-empty{color:var(--mono);font-size:13px;padding:16px 0 0} footer{ padding:34px 22px 0;text-align:center; } footer p{ font-family:"Space Mono",monospace; font-size:10.5px;color:var(--mono);letter-spacing:.05em;line-height:1.7; } /* ---- app nav ---- Mobile/tablet (<1024px): anchored bottom tab bar, all items always visible — no hamburger, nothing to expand/collapse, matches standard bottom-tab-bar conventions instead of a hidden drawer. Desktop (>=1024px, media query below): left side rail, collapsible via the hamburger toggle into a labeled drawer that pushes content over. */ #appNav{ position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto; background:var(--card);border-top:1px solid var(--line);border-right:none; display:flex;flex-direction:row;align-items:stretch; padding:4px 2px calc(4px + env(safe-area-inset-bottom)); z-index:68; } .nav-burger{display:none} /* display:contents flattens this wrapper so its 5 buttons become direct flex children of #appNav, siblings of .nav-profile — all 6 then split the bar evenly via .nav-item{flex:1} below, instead of the wrapper and .nav-profile each claiming a 50/50 share as two siblings. */ .nav-items{display:contents} .nav-item{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; flex:1;background:none;border:none;cursor:pointer;color:var(--ink-soft); padding:4px 1px;font:inherit;text-align:center;border-radius:8px; } .nav-item .ni-ico{width:19px;height:19px;line-height:1;display:flex;align-items:center;justify-content:center} .nav-item .ni-ico.has-avatar{border-radius:50%;background-size:cover;background-position:center} .nav-item .ni-ico.has-avatar svg{display:none} .nav-item .ni-ico svg{width:100%;height:100%;display:block} .nav-item .ni-lbl{ font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.01em; white-space:nowrap;opacity:1; } .nav-item.on{color:var(--indigo);background:var(--accent-tint)} .nav-profile{border-top:none;margin-top:0;padding-top:4px;flex:1} /* ---- app screens (nav-switched sections; visibility:hidden not display:none so offsetParent-based checks elsewhere in the file keep working while inactive) ---- */ .app-screen{max-width:560px;visibility:hidden;height:0;overflow:hidden;pointer-events:none} .app-screen.active{visibility:visible;height:auto;overflow:visible;pointer-events:auto} @media (min-width:1024px){ body{padding-bottom:64px;padding-left:96px} body.nav-expanded{padding-left:260px} #appNav{ left:0;right:auto;top:0;bottom:0;width:56px; flex-direction:column;align-items:stretch; padding:14px 0;border-top:none;border-right:1px solid var(--line); transition:width .2s ease;overflow-x:hidden;overflow-y:auto; } #appNav.expanded{width:220px} .nav-burger{ display:block;flex:none;background:none;border:none;cursor:pointer; font-size:20px;color:var(--ink);padding:12px 0;margin:0 0 10px;width:100%; } .nav-items{display:flex;flex-direction:column;justify-content:flex-start;flex:1;gap:2px} .nav-item{ flex-direction:row;justify-content:flex-start;gap:12px;flex:none;width:100%; padding:12px 16px;text-align:left; } .nav-item .ni-ico{flex:none;width:24px;text-align:center} .nav-item .ni-lbl{opacity:0;transition:opacity .15s} #appNav.expanded .ni-lbl{opacity:1} .nav-profile{border-top:1px solid var(--line);margin-top:auto;padding-top:14px;flex:none} .app-screen{max-width:880px} #grid, #pickGrid, .closet-filtered .cf-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;align-items:start; } #grid > .group-label, #pickGrid > .pick-empty{grid-column:1/-1} } @media (max-width:360px){ h1{font-size:50px} .legend{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* load fade */ @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .anim{animation:rise .5s ease both} /* ---- stamped buttons: the solid-fill CTAs read like ink stamps ---- */ .actions .lucky, .review-btn, .modal-actions .save, .ob-nav .next, .lc-row button, .st-io button, .pday .pd-auto, .sync-banner #syncRefresh{ box-shadow:2px 2px 0 var(--shadow-carbon); } .actions .lucky:active, .review-btn:active, .modal-actions .save:active, .ob-nav .next:active, .lc-row button:active, .st-io button:active{ box-shadow:none;transform:translate(1px,1px); } /* ---- group dividers read as a torn perforation, not a flat rule ---- */ .group-label::after{ background:repeating-linear-gradient(to right, var(--line) 0 5px, transparent 5px 9px); } /* ---- appearance toggle (Profile menu) ---- */ .theme-toggle{ display:flex;gap:6px;background:var(--paper-2);border:1px solid var(--line); border-radius:12px;padding:4px; } .theme-toggle .tt-opt{ flex:1;font:inherit;font-family:"Space Mono",monospace;font-size:12px; padding:9px 0;border:none;border-radius:9px;background:none;color:var(--ink-soft); cursor:pointer; } .theme-toggle .tt-opt[aria-checked="true"]{ background:var(--stamp);color:var(--on-accent); box-shadow:2px 2px 0 var(--shadow-carbon); } /* ---- modal sheet: a ticket torn off the bottom of the screen ---- */ .modal{position:relative} .modal::before{ content:"";position:absolute;top:0;left:20px;right:20px;height:1px; background:repeating-linear-gradient(to right, var(--line) 0 5px, transparent 5px 9px); }
Claim check No. 00000

Your rack,
reserved.

Sign in to open your own compartment — private to you.

Valid for one wardrobe
Punch in with Google Opens your compartment by name
Keep this stub
Getting started

First, a choice.

However you start, you land on the same rack — this just decides how you get there.

Revamp · step 1 of 4

Empty it out.

Pull every piece out of your closet — bed, floor, wherever there's room. You can't make honest decisions about clothes you can't see all at once, and half the value here is just confronting the full pile.

Revamp · step 2 of 4

Check what still fits.

One by one, put it on. Shoulders, waist, length — bodies change, and so does fabric after a hundred washes. Anything that fights you on the way in doesn't make the cut, no matter what it cost.

Revamp · step 3 of 4

Make the call.

Three piles: keep (it earns its spot), go (someone else's favourite now), and maybe (worn twice a year, still undecided). Be honest about maybe — nine times out of ten, it's a go.

Revamp · step 4 of 4

Don't just bin it.

Worn through but not worthless: cut-offs, tote bags, cleaning rags, or a tailor who can rework the fabric. Donate what's still good, upcycle what isn't — then bring what's left onto your rack.

About you

The basics

Optional, but it helps the stylist dress you well. Skip anything you'd rather not share.

Helps when the stylist suggests shoes to look for.
Colours

Your palette

Tap the colours you love, the patterns you like, and what you already own a lot of.

Never shown to anyone; only used to fit outfits.
Direction

Your aesthetic

Tap the vibes you're drawn to (pick 1–3). We'll build your style around them.

Secondhand · Vilnius · SS26

Rack

Twenty-two pieces, one earthy lane — rust-red, tan, olive, washed denim, chocolate, cream. Built to mix.

22 pieces  ·  22 looks
01

The Closet

Tap any piece to see only the looks it's in. Tap again to clear.

22 pieces shown · nothing filtered
02

The Stubs

Every piece, described.

Every piece in your wardrobe, described. Switch category to browse tops, bottoms, shoes and the rest.

Loading forecast…
Today’s picks
Working out today’s picks…
Ask your stylist
This week
03

The Claims

Office attire
Office — the pickOffice
Cream shirt worn loose — untucked and hanging straight, or a light front-tuck only if it doesn't ring. It's roomier than the navy, so it drapes over the middle instead of gripping. A full button-up reads a touch more formal than shirt-over-tee. Iron it, hem even, cords sitting low. This is your top pick.
cream shirt (loose) · tan cords · white AF1
Office — backupOffice
Navy shirt open over a plain grey or black tee — no tuck, so no belly ring, and the open front gives a slimming vertical line. Keep the tee plain and the shirt crisp so it reads smart-casual, not undone. Sharp and put-together — reads smart-casual.
navy shirt open · plain tee · tan cords · white AF1
Office — cool dayOffice
For a cold day: navy shirt with the oatmeal cardigan open over it, cords, AF1. Over navy the cardigan has enough contrast not to wash out (unlike over cream), and open it gives a warm vertical line. Best own-it-now layered option until you find a dark blazer or chore jacket.
navy shirt · oatmeal cardigan open · tan cords · white AF1
Smart-casual · knits
Knit collarSmart-casual
Cream knit shirt worn on its own — the collar and buttons carry it, no layer needed. Half-tuck with cords, clean AF1. Relaxed-office or smart weekend.
cream knit shirt · tan cords · white AF1
Polished knitSmart-casual
Oatmeal fine-knit cardigan open over a plain tee — the finer of your two, so the smarter one. Vertical line down the front helps the profile. Layers under the chore coat without bulk.
oatmeal cardigan · grey/white tee · tan cords · white AF1
Soft layerSmart-casual
Grey cardigan open over black tee — cosier and a touch more casual than the oatmeal. Autumn/indoor layer. Open at the front, buttoned only at the waist is the most flattering.
grey cardigan · black tee · tan cords · white AF1
Casual · everyday
Warm AmericanaWeekend
Denim breaks up the brown-and-tan so nothing goes flat; white sneaker keeps it crisp. Your easiest strong look.
brown tee · light jeans · white AF1
Tonal brownRelaxed
Deliberately soft and monochrome-ish. The pink overshirt (open) and white sole lift the brown-on-tan so it doesn't fall flat. Drop the pink for a plainer version.
brown tee · tan cords · pink shirt (optional) · white AF1
Clean contrastEveryday
Dark top, light denim, white shoe — the black swoosh on the AF1 quietly echoes the tee. Grab-and-go.
washed black tee · light jeans · white/black AF1
Layered workwearPut-together
Pink over black is the cleanest contrast — the black grounds the softness so it doesn't read too sweet. Sleeves rolled. Grey tee underneath gives a hazier take.
pink shirt open · black tee · jeans · AF1
Soft NordicRelaxed
All muted, pink as the only real colour. Very calm and put-together without effort.
pink shirt · grey marl tee · tan cords · white AF1
Red Vans, done rightWeekend
Denim is where the red pops most. Grey or washed black tee up top — both let the shoe do the talking.
grey (or black) tee · light jeans · red Vans
Cosy weatherCold days
Texture-forward — fleece against cord — and warm. Swap to jeans + red Vans for a cooler-toned version.
black Nike fleece hoodie · tan cords · white AF1
Graphic layerWeekend
The brown back-print picks up the tan cords, so it reads intentional. Keep the pink shirt off the shoulders if you want the graphic seen from behind.
black graphic tee · tan cords · white AF1 · pink shirt (optional)
Graphic denimEveryday
Print's on the back, so from the front it plays as a plain black tee and the red Vans still pop off the denim.
black graphic tee · light jeans · red Vans
Casual · with a layer
Workwear stackWeekend
Vans chore coat open over the full earthy stack. The black cord collar ties to the AF1's black accent. Tonal and intentional. (Stone, so casual-only.)
chore coat open · brown tee · tan cords · white AF1
Chore + denimWeekend
Black tee and collar anchor the stone coat; red Vans as the one pop off the denim. Looser jeans work well under the boxy coat.
chore coat · black tee · looser jeans · red Vans
Green, groundedRelaxed
Black tee grounds the pastel green so it doesn't go too sweet — same logic as the pink. Green as the only colour. Casual-only.
green shacket open · black tee · jeans · white AF1
Casual · new pieces
Utility earthWeekend
Khaki Dickies + brown tee — warm tonal earth, very Americana workwear. Swap the tee for ecru or black to shift it. Add the Vans chore coat open for a fuller stack.
khaki Dickies · brown tee · white AF1
Olive & redWeekend
Khaki bottoms + black tee + red Vans — olive and red is a strong pairing, black keeps it grounded. Works with the olive hike pants too.
khaki Dickies · black tee · red Vans
Trail off-dutyActive
Olive hike pants lean technical/active, so keep them casual: black tee, red Vans, done. Your outdoors-and-errands bottom rather than a styled one.
olive hike pants · black tee · red Vans
Statement knitWeekend
The vintage patterned jumper is the loudest thing you own, so let it lead — plain denim below, clean sneaker. Never pair it with other patterns or the shackets. Bottoms always plain.
patterned jumper · plain jeans · white AF1
Loose & easyWeekend
Loose straight jeans want a low, chunky-ish shoe — Vans over AF1 here. Relaxed skate-leaning. Light and loose is the least slimming bottom, so a casual-styling pick.
loose jeans · washed black tee · red Vans
04

Fit notes

Photos of you actually wearing an outfit — the stylist reads cut, shaping and drape, and remembers it for future advice.

0Wears logged
05

BOLO — on the lookout

The pieces that would stretch this capsule furthest, by category. Everything's secondhand-findable and in your earthy workwear / Americana lane. marks a priority.

Tees & tops
Clean white / ecru tee — the one basic missing from your rotation. Goes under every layer, brightens the palette. Boxy fit.
Earthy heavyweight tee — olive, rust, or faded ochre. Adds a colour you don't have without leaving the lane.
Striped tee — breton or workwear stripe. Quiet pattern, very Americana/skate.
Long-sleeve tee or henley — cream, grey, or brown. Layering and cooler days.
Shirts
Flannel / plaid overshirt — earthy check, worn open. Workwear staple that layers over any tee.
Chambray or denim shirt — mid or dark blue. Americana workhorse; wear solo or as a layer.
Sweats & knits
Dark knit — crew or quarter-zip — charcoal, brown, olive. You've got the cream knit shirt and two light cardigans now, so this is about a dark knit for contrast and warmth. Smarter than the fleece hoodie. Merino or lambswool if you find it.
Plain hoodie in a neutral — your only wearable hoodie is black (the cream one's loungewear till it's dyed). Grey, ecru, brown, or olive.
Crewneck sweatshirt — no hood, dresses up further than a hoodie, layers under a jacket cleanly.
Jackets & layers
Dark chore jacket / overshirt — navy, charcoal, black. Your biggest gap: the smart-casual layer. Same boxy shape as the Vans coat but works over the navy shirt too. Flattering open.
Denim / trucker jacket — mid or dark wash. Classic Americana; layers over tees and knits.
Unstructured blazer — navy or black, soft shoulders, unlined. For a step dressier — not a suit blazer.
Bottoms
Dark straight-leg trousers — chinos or pleated, in charcoal, navy, or black. You've got tan cord, denim, and khaki/olive utility now, but nothing dark and smart. This unlocks smart-casual and reads more slimming. Straight, not tapered.
Black or dark-wash jeans — a darker, more slimming bottom to contrast your light-blue pairs. Straight leg.
Carpenter / work pantsgot it (khaki Dickies). Covered.
Shoes
Brown leather boots — Chelsea or derby. You've only got sneakers; a boot adds a whole register, sharpens every smart look, and fits the Americana/workwear lane. EUR 40.5.
Rugged work / hiker boot — brown or black. For weather and a more rugged skate-workwear feel.
Low suede sneaker — a muted tan or grey pair to sit between the white AF1 and red Vans.
Winter coat
Wool overcoat — charcoal, navy, or olive. Smart, long line, dresses over the dress shirt and the knits. The one piece that lifts everything in cold months.
Workwear parka or chore-lined jacket — for the casual, hard-weather days. Practical for a Vilnius / Helsinki winter.
Search on Vinted
chore jacket denim jacket flannel overshirt chambray shirt merino crewneck quarter zip knit pleated trousers chinos straight black jeans straight carpenter pants chelsea boots derby boots wool overcoat
Your filters: tops L–XL · bottoms W36–38 / L32 · shoes EUR 40.5 (unisex last). And the constant: straight, hangs open, skims not clings.
Your card

Settings

Appearance

Account

Updated on another device