/* Sebastian's Wardrobe Clean #E5E5E5, a lighter link blue, his fonts, and the Player Holdings pieces: the hero film with the jump scroll, the black header that appears on the first pixel of scroll, the drawn underline, the drawn X / check / + marks, the Contents tree, and the transient divider seam. */ @font-face { font-family: "PP Mondwest"; src: url(../assets/fonts/mondwest.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "PP NeueBit"; src: url(../assets/fonts/neuebit-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Geist Pixel"; src: url(../assets/fonts/geist-pixel-square.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "EB Garamond"; src: url(../assets/fonts/garamond-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Albertsthal Typewriter"; src: url(../assets/fonts/albertsthal-typewriter.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Typewriter2"; src: url(../assets/fonts/typewriter2.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(../assets/fonts/jetbrains-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(../assets/fonts/jetbrains-mono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; } :root { --bg: #E5E5E5; --ink: #141414; --ink-2: rgba(20, 20, 20, .62); --ink-3: rgba(20, 20, 20, .42); --line: rgba(20, 20, 20, .16); --line-2: rgba(20, 20, 20, .3); --blue: #2A55F0; /* lighter than the old #0000EE; 4.56:1 on #E5E5E5 */ --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --hdr: 52px; --hdr-h: calc(var(--st) + var(--hdr)); --gut: 18px; --ease: cubic-bezier(.22, .8, .22, 1); --ph-ease: cubic-bezier(.4, 0, .2, 1); /* the type (set A, "Player Holdings"): Mondwest titles, NeueBit labels, Geist Pixel numbers, Garamond italic — and, from set C, Garamond italic for the Wardrobe Wishes tabs */ --f-display: "PP Mondwest", Georgia, serif; --f-tab: "PP NeueBit", "Geist Pixel", ui-monospace, monospace; --f-meta: "Geist Pixel", ui-monospace, monospace; --f-italic: "EB Garamond", Georgia, serif; --f-name: "Albertsthal Typewriter", "Typewriter2", "Courier New", Courier, monospace; --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --ct-blue: #0033CC; /* the Sources picture's heading blue */ --ct-grey: #757574; /* its underlined values; also the hover of the grey words (Links, Add link) */ --link: #2A55F0; --tab-size: 15px; --tab-weight: 700; --tab-track: .06em; --tab-case: uppercase; --tab-style: normal; --title-size: 28px; --title-track: -.01em; --title-case: none; --seam-solid-opacity: 0; --seam-mixed-opacity: 0; --seam-fragmented-opacity: 0; --seam-device-pixel: 1px; /* the same three textures stood on end, for the sides of the product boxes */ --seam-h-s: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRwAAAABCAYAAAC8EmKTAAADKElEQVR42t1XS5KdMAzsliE1qbl4ssi5ssomB5hFTjFTYHcWGJCN8YPJZJG4iuI945/k7pbEnz++CwAIACTKxqKLZB64vdwvlTPzRKns3/5Jy28JyxD3dgOL+drnr3P3oSrH8HCk1ikarbRHvaEXmlD7q7/73U1b61+xtH3f7zFw95Mau9Gfju2z1rPII7pw0iMIH96uwOOOf1Z7pNIfl9Zbgdyf01zm1v0SfPf1q+NINnq17ShP6r/ZeIcYj8fp0dTuHbHA7SXPs6UN7Opcjxv0ZNSfYb3J0fVoanmM3bXpdGDVAv9etct/3+OGtpihHFu0B5P9v3zceHwDp9+38/h46c5UxK+8v4SkBKW03QWNMLNsk8GMxXrkupezuwhVe/xLSsu+cp7JftmeOg57XLAU64WnLZwIygDyfm1qeg+TzkfeX3ykX05X65zgodbVeU3uq/F2vHtWWPO5y0kawev6WfOl/Kx2LF1zrQ/QUjbyq3MyOC5mn5kRRlvwTIJmyzs/VnG/yEN0tLvGy47hKmd02E7r94xtSRuOVw5t/7e7luOZyyP9mknQyulKV3Cgojp6wUZ4ptM2d9bt8efPY5zfV+zuGuK0KdulJh7vZI7CvTyBj1MaXSAJ61yyQkXNoRMT/H2lJMxxhlKCBUMIA4JZEZvYML+uZkp5V6GZPR3Tof7p8J5+f4dtx4VlvQ20G16XOKNt3nLGfU+dymr2tnHXxxP5JUsM72A7Kj4LbWEbdVLl35LnrbrySulUnnPX/T8RS7bqEdX1ozr6f1Ow1aqXuiXHrfLmY4qkf70R/A+s0HUYd7nS0oWibmAh5lWdcySopNNYqQbIVcR9QSkhVTn+KZfoc1oXQ3L/OA4YhgFmhhACYox4e3tDSgk0wxACSMM0TQCEp6fPGD+NiDFinibMMSLGuIx39cimyUowCwghFPFzjhFScrXMLokEIa02yumVy0+z1hR6k/OvYRwwBIMgxHkGSTw/P2MYR7y+vmKaZkBCTAkpJqSUEGMqdJkkQggwC0CW8yEEWLAlrqSY50XEebFlqT1ynpTXnOaZ8zzj5eUXvnz9ht96cTJfEVaDeQAAAABJRU5ErkJggg=="); --seam-v-s: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAUcCAYAAADyZfprAAADeklEQVR42u1YQXLbMAxcLOVJPpBrD3ltD+1zM83UErcH0RIBkZbkJD10euFYJgkSILC7JF5eXoCfP76Dr6/fwGEYwMswiCkRNBI0GkgzEAbQjGAaEphSAkmCZCrj8pTBcZpAA0AIYM4TOE0TKAkEBMKsDEmJNyuJYCJL7+UygM/Pz+B4vYJvb2/FQBoG0GDgOGVwvI5gzgIxm192CiuNABBAMSChNPNecHPQjKCgsnGzZZxUrJgRHFJajN4MTNNUXDUjaLO9sK6KqymlYmW4XMrn9fcVfH//VexdLhdQuoVTOZe5T09PZUZZMoPjOILX61jvHlDtOQTfu23MbPnlPufgcHVraYKV2d9GR3UofrVljWobVWDhXIDdOmRuycojLUfr/iun0PFc6HR0Gzs94x9o5MP5v/GJ+blGuxlWo4r7rA5KPXv2gQ2ZHQpEvSGHxZtsugdGjzSqAf5A2bdiugeM5r10vwoi2V14cOyn5pkHcJNjTu9RyzeFaGTdRcdtwtW+3Ryc2XTWAl4VBMJdZyw0AW+lSkI56rBeRc0bWqLWzcQSpk6GhWnx3O4WSSBSQOCUMzhNY5E9RoJDGkDSUVsr+dc1ulTZTgs19rJbFZVRtUizO+1BcrDHcNIvKZcWCpqmEnIqKkj+P60ZIbhp8OOkumMdHIouVh5WyXmXF6xxyCE31nKpqsxXjxc7Qb2ueV+7sHWrEm1LSTJIuh7C1b0hO61Tv1WdayuyBDBXmC0wz3iVl18Cs3LR9+up1vZ0rBY8KuuzFUAgOXXLVBuAb6Heho9sj6NCzXRDEnmriotts70Hr4FmI+7qNIIE0jQXySPo48fFPO0Rxnpkui/BKn5b7zg9rFtBK0ocX5yRdqz+jCW5wEO1ht3oGNatPAdzFSgoCAItVZYdqGbV2zXypgDM5dAm9tYQHVss3qOTs7RjrdPyaBsutxFj14yI5LCtgDju6Mab9eFqX/1xj8GXduELgdp2bid20J46hahT2kKNxfcjrmNRs31sfyCcp2Z8cbMURFXJ/RPUvlQ7yEdf95zQAw8drgC1OQ9nDKjFVvaB1wAdO8u/kTTtBNkFIzVOxnDgRtV4s2xsqMo6+4JXl6ZSPYMW+vAT4UG37LPXPfI2Ymeuh8cYYnPl3ipBu3s/r7SeuctyX+p6pdV97VETZLYxiK/sR9Wwy7U/4djn6HfTVY0AAAAASUVORK5CYII="); --seam-h-m: url("data:image/png;base64,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"); --seam-v-m: url("data:image/png;base64,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"); --seam-h-f: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABSAAAAABCAYAAADO3QAlAAACRUlEQVR42u1VXXOaUBA91y8UQ7SMUtSo40MymWn//y+J0050tMRaURE/UAxI3D5oKsLV1KR947zp7t49e+7eA7MXE0SIECFChAgRIkSI8G/g0rAzwdiLIS6k0ajlICwnaA5cMBaDpCqoSYwBgD3SqTNLoNwoQE6ChY6iLdmGgc50C7mqopyw0Oouka6UUM1y8p0VjV9EFEV2iK1Meug7+FQpoZIFs/QBac4V7uoSktaOl6SqqF/va1YmPfQ9qA0FedvA96EH+UZFWeT0e8VmRVpvCSbnUc446GqrA8eNRUHOfg5bY4i2CRRqn6Gmd3HXHNGjkUD9ToaEQN83zovNT3EmssdjdO0kamoeNNXxtK9J4ViXFPizvlgT+jZwwaQc7ksi4qE8olnfgKdcw/1hwhQk3NeukAjkhXoFZuJx4WniLgzqGAxKOQfRNtH2xzk6HWG/FzlenBzStSmWYg43BcK4PcdzoYhbOcGANfUeZ77f/pmyqEkOnowtchUF1Sxjl74eSx+QtohDbSgovL4JsqnXmh/19OuRmf/lngIga0LNgcuf+8+52Pd38Kv1/ns8u8f2lJo/HQhCHGKxGObtrajbWcDOy/iiCCw8w4Y/777O82nl5wlzhMN8+9r1lJq9Z1xXSih5b2gZ9KSML+fCvTn35nixnV+mTuz4+bs6cLRJa82x5Oga5Hj2fZ3SgvNf2O/iHM9/rz9dVveR3UmBs9O+78Vunxw6dQ9ne3P9yiNDG0MX8viqZjh81gh70cd9PkKE/4nflQ0z9aBwMugAAAAASUVORK5CYII="); --seam-v-f: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAUgCAYAAACB3T29AAAClUlEQVR42u2WUVPaUBCFv5wiqahVMVZ90dZxnHb6//9JO9OpzlhBIAKmJMhVBNw+1BYMiaWjT528nIebm83uOWd3g0uuEFBAAQX8hjswfTvvowP/GlxyNXu2718jb3MX1cIeel8ZgUu6JvC8XwFOorHpdbcDLrkw3bFMOh6APoc3pt1hD1xyaYLSQ4D6ANNtowXu6ruJpTUvnWTTYYouQvRpbwl5a1uzV8Zg+lq7RtVhH1zSNIHvqTvCFJ61wbVOTKxUPfXBdP4tQsfBeK7eVM4n0dhU6nbARTUTpZWFUns2py+jDICiEabmWRcdVSdIwc6cPM0bTFE9RIebAhd3THjy8h8AzDB5FIyRq1RRuxmjw8BQ+U3gpb0By3P8fWkPTau9CFxcN+FVvHyzZildH/ik7TNN7XDjblbQXKWfpj3L6LA8W2DUq5suuh5adTG4uGnC82eLeZrOXF992CmhVilASaMF7vLUxPLmw2t/PK7jAET1LS9p5Sy1Kr3ob1Fcp4OGwwm48NREZXPuXlYjZo2CBSTLskV35DPlhdzlXx9gihst9GmvnF30AvLcrAeki0mb5rG9p7odvJk8kd+iUB+YKW600X4gVOv76MAfzEV+tosfszYzWXPZzW3O3LmRa5DcDn0R56j8ropK7SR7lAJoAqavLYesH6OPe2X06knTvMwcTxnufj3I7vMFtmkuseEtpm7tEh1Vyd4Vud+YniWdM1PzxkcW9cBd1UwsrXj/1lG9SkB6dwPoPDFTPwwfGna0tjWXZGOA6UeeOzvOTNuvHMJfWci2zfEaCw/u6cI93HjEbq1vpn7YRmb3D9kPV7fQWS1Gk+Et2i7dg0taJih7xf9pAQUUUEABBRRQQAEFFPB/wk8KTQZ21MfKGQAAAABJRU5ErkJggg=="); color-scheme: light; } html.font-tw2 { --f-name: "Typewriter2", "Albertsthal Typewriter", "Courier New", Courier, monospace; } * { box-sizing: border-box; } html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-anchor: none; } html.locked, html.locked body { overflow: hidden; } html.ph-snap-armed { overscroll-behavior-y: none; } body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font: 400 13px/1.45 var(--f-meta); -webkit-font-smoothing: antialiased; font-synthesis: none; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; touch-action: manipulation; cursor: pointer; } img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } [hidden] { display: none !important; } :focus { outline: none; } html.kb :focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; } /* ---------------- the drawn underline (PH DrawUnderline + globals.css) ---------------- */ .phu { position: relative; } .phu-fl { position: absolute; left: 50%; top: calc(100% + var(--phu-gap, 3px)); width: 73px; height: 10px; transform: translateX(-36.5px); overflow: hidden; pointer-events: none; } .phu-fl svg { display: block; width: 73px; height: 10px; } /* fitted to its word, and only just longer: the stroke (97% of the drawing) runs from 2% + 1px before the word to 2% + 1px past it */ .phu-fl[data-phu-fit] { left: calc(-2% - 1px); width: calc(106.9% + 2.06px); transform: none; } .phu-fl[data-phu-fit] svg { width: 100%; } .phu-fl path { fill: currentColor; } .phu-win { clip-path: inset(0 98.63% 0 0); visibility: hidden; } .phu-win.in { visibility: visible; animation: phuDrawIn 500ms cubic-bezier(.32, 0, .67, 1) forwards; } .phu-win.out { visibility: visible; animation: phuEraseOut 500ms cubic-bezier(.32, 0, .67, 1) forwards; } .phu-win.static { visibility: visible; clip-path: inset(0 0 0 0); } @keyframes phuDrawIn { from { clip-path: inset(0 98.63% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes phuEraseOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 98.63%); } } /* ---------------- the drawn marks: X, check, + (PH RadioMarks + PlusGlyph) ---------------- */ .mk { display: block; overflow: visible; } .mk path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--share, 1) * 500ms) cubic-bezier(.32, 0, .67, 1) calc(var(--start, 0) * 500ms); } .mk.mk-rest path { stroke-dashoffset: var(--len); transition: none; } .ph-plus-spin { transform-origin: 50% 50%; } @keyframes ph-plus-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (hover: hover) and (pointer: fine) { button:hover > .ph-plus-spin { animation: ph-plus-spin 600ms cubic-bezier(.4, 0, .2, 1); } } html.kb button:focus-visible > .ph-plus-spin { animation: ph-plus-spin 600ms cubic-bezier(.4, 0, .2, 1); } /* ---------------- the transient divider seam (handoff docx, File 3) ---------------- */ .section-with-transient-divider { position: relative; } .transient-section-divider { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: var(--seam-device-pixel); overflow: visible; pointer-events: none; } .transient-section-divider__layer { position: absolute; inset: 0; width: 100%; height: var(--seam-device-pixel); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .seam-texture-solid { opacity: var(--seam-solid-opacity); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRwAAAABCAYAAAC8EmKTAAADKElEQVR42t1XS5KdMAzsliE1qbl4ssi5ssomB5hFTjFTYHcWGJCN8YPJZJG4iuI945/k7pbEnz++CwAIACTKxqKLZB64vdwvlTPzRKns3/5Jy28JyxD3dgOL+drnr3P3oSrH8HCk1ikarbRHvaEXmlD7q7/73U1b61+xtH3f7zFw95Mau9Gfju2z1rPII7pw0iMIH96uwOOOf1Z7pNIfl9Zbgdyf01zm1v0SfPf1q+NINnq17ShP6r/ZeIcYj8fp0dTuHbHA7SXPs6UN7Opcjxv0ZNSfYb3J0fVoanmM3bXpdGDVAv9etct/3+OGtpihHFu0B5P9v3zceHwDp9+38/h46c5UxK+8v4SkBKW03QWNMLNsk8GMxXrkupezuwhVe/xLSsu+cp7JftmeOg57XLAU64WnLZwIygDyfm1qeg+TzkfeX3ykX05X65zgodbVeU3uq/F2vHtWWPO5y0kawev6WfOl/Kx2LF1zrQ/QUjbyq3MyOC5mn5kRRlvwTIJmyzs/VnG/yEN0tLvGy47hKmd02E7r94xtSRuOVw5t/7e7luOZyyP9mknQyulKV3Cgojp6wUZ4ptM2d9bt8efPY5zfV+zuGuK0KdulJh7vZI7CvTyBj1MaXSAJ61yyQkXNoRMT/H2lJMxxhlKCBUMIA4JZEZvYML+uZkp5V6GZPR3Tof7p8J5+f4dtx4VlvQ20G16XOKNt3nLGfU+dymr2tnHXxxP5JUsM72A7Kj4LbWEbdVLl35LnrbrySulUnnPX/T8RS7bqEdX1ozr6f1Ow1aqXuiXHrfLmY4qkf70R/A+s0HUYd7nS0oWibmAh5lWdcySopNNYqQbIVcR9QSkhVTn+KZfoc1oXQ3L/OA4YhgFmhhACYox4e3tDSgk0wxACSMM0TQCEp6fPGD+NiDFinibMMSLGuIx39cimyUowCwghFPFzjhFScrXMLokEIa02yumVy0+z1hR6k/OvYRwwBIMgxHkGSTw/P2MYR7y+vmKaZkBCTAkpJqSUEGMqdJkkQggwC0CW8yEEWLAlrqSY50XEebFlqT1ynpTXnOaZ8zzj5eUXvnz9ht96cTJfEVaDeQAAAABJRU5ErkJggg=="); } .seam-texture-mixed { opacity: var(--seam-mixed-opacity); background-image: url("data:image/png;base64,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"); } .seam-texture-fragmented { opacity: var(--seam-fragmented-opacity); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABSAAAAABCAYAAADO3QAlAAACRUlEQVR42u1VXXOaUBA91y8UQ7SMUtSo40MymWn//y+J0050tMRaURE/UAxI3D5oKsLV1KR947zp7t49e+7eA7MXE0SIECFChAgRIkSI8G/g0rAzwdiLIS6k0ajlICwnaA5cMBaDpCqoSYwBgD3SqTNLoNwoQE6ChY6iLdmGgc50C7mqopyw0Oouka6UUM1y8p0VjV9EFEV2iK1Meug7+FQpoZIFs/QBac4V7uoSktaOl6SqqF/va1YmPfQ9qA0FedvA96EH+UZFWeT0e8VmRVpvCSbnUc446GqrA8eNRUHOfg5bY4i2CRRqn6Gmd3HXHNGjkUD9ToaEQN83zovNT3EmssdjdO0kamoeNNXxtK9J4ViXFPizvlgT+jZwwaQc7ksi4qE8olnfgKdcw/1hwhQk3NeukAjkhXoFZuJx4WniLgzqGAxKOQfRNtH2xzk6HWG/FzlenBzStSmWYg43BcK4PcdzoYhbOcGANfUeZ77f/pmyqEkOnowtchUF1Sxjl74eSx+QtohDbSgovL4JsqnXmh/19OuRmf/lngIga0LNgcuf+8+52Pd38Kv1/ns8u8f2lJo/HQhCHGKxGObtrajbWcDOy/iiCCw8w4Y/777O82nl5wlzhMN8+9r1lJq9Z1xXSih5b2gZ9KSML+fCvTn35nixnV+mTuz4+bs6cLRJa82x5Oga5Hj2fZ3SgvNf2O/iHM9/rz9dVveR3UmBs9O+78Vunxw6dQ9ne3P9yiNDG0MX8viqZjh81gh70cd9PkKE/4nflQ0z9aBwMugAAAAASUVORK5CYII="); } /* ---------------- header: transparent over the film, black from the first pixel ---------------- */ .ph-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--hdr-h); padding: var(--st) calc(14px + var(--sr)) 0 calc(16px + var(--sl)); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: transparent; transition: background-color .3s var(--ph-ease); } .ph-header.sticky { background: #000; } /* back to Contents: the arrow alone, with a full 44px to tap */ .ph-header__compact-logo { display: flex; align-items: center; min-width: 44px; min-height: 44px; margin-left: -6px; padding: 0 6px; border: 0; background: none; color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s var(--ph-ease); } .ph-header.sticky .ph-header__compact-logo { opacity: 1; pointer-events: auto; } .ph-header .ph-header__compact-logo.gone { visibility: hidden; pointer-events: none; } .hdr-arrow { flex: none; width: 22px; height: 12px; } /* ---------------- the hero: a fixed film the wardrobe slides over ---------------- */ .ph-hero { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: #000; } .ph-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ph-initial-gap { position: relative; z-index: 1; width: 100%; height: 100vh; height: 100svh; pointer-events: none; } /* ---------------- the wardrobe ---------------- */ .wardrobe { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; background: var(--bg); padding-top: var(--hdr-h); padding-bottom: calc(var(--sb) + 110px); } .tabbar { position: sticky; top: var(--hdr-h); z-index: 10; background: var(--bg); padding-top: 8px; } /* the tab row: All brands ▾ | the tabs (sliding sideways when they don't fit) | Links — one line */ .tabrow { display: flex; align-items: center; min-width: 0; padding: 2px calc(var(--gut) - 7px + var(--sr)) 14px calc(var(--gut) - 7px + var(--sl)); } .tr-end { flex: none; display: flex; align-items: center; } .tr-end:empty { display: none; } .vbar { flex: none; width: 1px; height: 15px; margin: 0 5px; background: rgba(20, 20, 20, .3); } .tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scroll-padding-inline: 40px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0; } .tabs::-webkit-scrollbar { display: none; } .tabs.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); } .tabs.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px); mask-image: linear-gradient(90deg, transparent, #000 34px); } .tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); } .tabs button, .subtabs button, .tr-end button { flex: 0 0 auto; min-height: 36px; padding: 0 7px; border: 0; background: none; display: grid; place-items: center; color: var(--blue); transition: color 160ms ease; } /* every tab, kind, All brands and Links in the typewriter of the item pages */ .tabs .tl, .tr-end .tl { font: 400 13.5px/1 var(--f-name); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } /* Links, at the right end of the row: grey, underlined on hover (and while it is open) */ .tabs button.t-grey, .tr-end button.t-grey { color: #8e8e8d; } /* under a mouse every tab and kind turns the grey of Links (Links itself a shade darker) */ @media (hover: hover) { .tabs button:hover, .subtabs button:hover, .tr-end button:hover { color: #8e8e8d; } .tr-end button.t-grey:hover { color: var(--ct-grey); } } .subtabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 calc(var(--gut) - 7px + var(--sr)) 14px calc(var(--gut) - 7px + var(--sl)); margin-top: -6px; } .subtabs::-webkit-scrollbar { display: none; } .subtabs .tl { font: 400 11.5px/1 var(--f-name); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .subtabs button { min-height: 30px; } #view { position: relative; } .view-in { animation: view-in 260ms var(--ease) both; } @keyframes view-in { from { opacity: 0; transform: translateY(6px); } } .eyebrow { margin: 0; padding: 4px calc(var(--gut) + var(--sr)) 0 calc(var(--gut) + var(--sl)); font: 400 11px/1 var(--f-meta); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); } .eyebrow .sl { padding: 0 6px; } html.no-tabs #view > .eyebrow:first-child { padding-top: 14px; } /* rails */ .rail-sec { padding: 26px 0 6px; } .rail-sec:first-of-type { padding-top: 14px; } .rail-title { display: inline-flex; align-items: center; gap: 12px; margin: 0 calc(var(--gut) + var(--sr)) 0 calc(var(--gut) + var(--sl)); padding: 4px 0 12px; border: 0; background: none; color: var(--ink); text-align: left; } .rail-title .tt { font: 400 var(--title-size)/1 var(--f-display); letter-spacing: var(--title-track); text-transform: var(--title-case); transition: color 160ms ease; } .rail-title .n { font: 400 11px/1 var(--f-meta); letter-spacing: .14em; color: var(--ink-2); padding-top: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } @media (hover: hover) { .rail-title:hover .tt { color: #575756; } } html.kb .rail-title:focus-visible .tt { color: #575756; } .rail { position: relative; margin-top: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .rail::-webkit-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { .rail { cursor: grab; } .rail.dragging { cursor: grabbing; } } .track { position: relative; display: flex; align-items: flex-start; gap: 4px; width: max-content; min-width: 100%; padding: 0 calc(var(--gut) + var(--sr)) 6px calc(var(--gut) + var(--sl)); } .track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #b9b9b9; box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .05); } .shelf .track { align-items: flex-end; padding-bottom: 0; } .shelf .track::before { top: auto; bottom: 9px; } .shelf .track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: linear-gradient(rgba(150, 150, 150, .22), rgba(150, 150, 150, 0)); } .hang { position: relative; flex: 0 0 auto; width: 118px; height: 206px; padding: 0; border: 0; background: none; transform-origin: 50% 10px; will-change: transform; } .hang .hanger { position: absolute; top: 4px; left: 50%; width: 78px; height: 39px; margin-left: -39px; z-index: 0; overflow: visible; pointer-events: none; } .hang img { position: absolute; z-index: 1; left: 4px; top: 30px; width: calc(100% - 8px); height: 172px; object-fit: contain; object-position: 50% 0; transform-origin: 50% 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .10)); } .hang.pants { width: 104px; height: 232px; } .hang.pants .hanger { z-index: 2; } .hang.pants img { top: 34px; height: 194px; } .sit { position: relative; flex: 0 0 auto; width: 104px; height: 124px; padding: 0; border: 0; background: none; transform-origin: 50% 100%; will-change: transform; } .sit img { position: absolute; left: 6px; right: 6px; bottom: 11px; width: calc(100% - 12px); height: 98px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .12)); } .want { position: absolute; z-index: 3; left: 6px; top: 38px; font: 400 9px/1 var(--f-meta); letter-spacing: .14em; color: var(--blue); pointer-events: none; } .sit .want, .tile .want { top: 4px; } /* grids */ .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 12px calc(14px + var(--sr)) 0 calc(14px + var(--sl)); } /* ---------------- a product in its box (four Player Holdings dividers, all boxes one size) ---------------- */ .grid.boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px calc(var(--gut) + var(--sr)) 0 calc(var(--gut) + var(--sl)); } @media (min-width: 560px) { .grid.boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 900px) { .grid.boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 1280px) { .grid.boxes { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .box { position: relative; display: block; aspect-ratio: 4 / 5; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; outline-offset: 3px; } /* the frame: a faint hairline that is always there, and the seam's three textures on each side; at rest the fragmented one shows, scrolling brings in the mixed and the solid ones (the same values as the seams between sections, so every box reacts with them) */ .bx-seams { position: absolute; inset: 0; pointer-events: none; } .bx-seams::before { content: ""; position: absolute; inset: 0; border: var(--seam-device-pixel) solid rgba(20, 20, 20, .06); } .bx-l { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% var(--seam-device-pixel), 100% var(--seam-device-pixel), var(--seam-device-pixel) 100%, var(--seam-device-pixel) 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; } .bx-l.s { background-image: var(--seam-h-s), var(--seam-h-s), var(--seam-v-s), var(--seam-v-s); opacity: var(--seam-solid-opacity); } .bx-l.m { background-image: var(--seam-h-m), var(--seam-h-m), var(--seam-v-m), var(--seam-v-m); opacity: var(--seam-mixed-opacity); } .bx-l.f { background-image: var(--seam-h-f), var(--seam-h-f), var(--seam-v-f), var(--seam-v-f); opacity: calc(.75 + .25 * var(--seam-fragmented-opacity) - .75 * var(--seam-solid-opacity) - .45 * var(--seam-mixed-opacity)); } /* the picture: the same area in every box, the product filling it the same way */ .bx-pic { position: absolute; left: 12%; right: 12%; top: 8%; bottom: 26%; display: block; will-change: transform; } .bx-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .09)); transition: transform 220ms cubic-bezier(.2, .7, .2, 1); } .box:active .bx-pic img { transform: scale(.96); } .bx-pic .nop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; font: 400 9px/1.35 var(--f-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: center; } .bx-cap { position: absolute; left: 10px; right: 10px; bottom: 9px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font: 400 10.5px/1.22 var(--f-name); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-align: left; } .bx-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; } .bx-p { color: var(--ink-2); } .box .mo-tag { top: 8px; left: 10px; } @media (min-width: 900px) { .bx-cap { font-size: 11.5px; left: 12px; bottom: 11px; } } /* a price: tap it for pesos or any currency */ .price { cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; } @media (hover: hover) { .price:hover { text-decoration-line: underline; } } .price.converted { color: var(--blue); } /* sold out everywhere: a faded red X over the picture, like an old stamp */ .sold-x { position: absolute; left: 12%; right: 12%; top: 8%; bottom: 26%; display: grid; place-items: center; pointer-events: none; } .sold-x svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sold-x path { fill: none; stroke: #b23a2e; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .5; } .sold-x em { position: relative; padding: 3px 7px 2px; border: 1px solid rgba(178, 58, 46, .42); background: rgba(229, 229, 229, .72); font: 400 10.5px/1 var(--f-name); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(178, 58, 46, .78); transform: rotate(-6deg); } .box.sold .bx-pic { opacity: .5; filter: grayscale(.35); } .sold-x.big path { stroke-width: 4.4; } .sold-x.big em { font-size: 15px; padding: 5px 10px 4px; } .tile { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: .78; padding: 6px; border: 0; background: transparent; transform-origin: 50% 0; will-change: transform; } .tile.low { transform-origin: 50% 100%; } .tile img { width: 100%; height: 100%; object-fit: contain; transform: scale(.94); transition: transform 220ms cubic-bezier(.2, .7, .2, 1); } .tile:active img { transform: scale(.9); } @media (hover: hover) { .tile { cursor: zoom-in; } .tile:hover img { transform: scale(1); } } /* outfit cards: the outfit standing in its scene */ .ogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; padding: 12px calc(var(--gut) + var(--sr)) 0 calc(var(--gut) + var(--sl)); } .ocard { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; color: inherit; } .ocard .o-pic { position: relative; display: block; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } .ocard .set { pointer-events: none; transition: transform 600ms var(--ease); } .ocard .photo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms ease; } .ocard .cap { display: block; margin-top: 8px; font: 400 9.5px/1.3 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: #6d6d6d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) { .ocard { cursor: zoom-in; } .ocard:hover .set { transform: scale(1.02); } .ocard.has-photo:hover .photo { opacity: 1; } .ocard:hover .cap { color: var(--ink); } } /* a composed outfit (shared by cards, the outfit page and the studio) */ .lay { position: absolute; inset: 0; z-index: 1; isolation: isolate; } .lay .contact { position: absolute; z-index: -100; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 28, 18, .34), rgba(38, 28, 18, .14) 55%, rgba(38, 28, 18, 0)); } .lay .pc { position: absolute; display: block; transform-origin: 50% 8%; } .lay .pc img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--shade, drop-shadow(0 8px 10px rgba(0, 0, 0, .14))); } .lay .pc.flip img { transform: scaleX(-1); } .scene-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* empty states and buttons */ .empty { padding: 30px calc(var(--gut) + var(--sr)) 0 calc(var(--gut) + var(--sl)); } .empty p { max-width: 540px; } .empty h2 { margin: 0; font: 400 30px/1.05 var(--f-display); letter-spacing: var(--title-track); text-transform: var(--title-case); } /* while a one-line title is being measured it must never widen the page (a phone would zoom out and lose its place) */ .empty h2.fit1 { overflow-x: clip; } .empty p { margin: 12px 0 0; font: italic 400 18px/1.45 var(--f-italic); color: var(--ink-2); } .empty .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .empty-rail { position: relative; height: 118px; margin-top: 26px; overflow: hidden; } .empty-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #b9b9b9; } .empty-rail .hang { position: absolute; top: 0; height: 60px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 400 11px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; } @media (hover: hover) { .btn:hover { background: var(--ink); color: var(--bg); } } .btn.blue { border-color: var(--blue); color: var(--blue); } @media (hover: hover) { .btn.blue:hover { background: var(--blue); color: #fff; } } .btn[disabled] { opacity: .45; cursor: default; } .btn .mk { width: 22px; height: 22px; margin: -6px -4px -6px -8px; } /* the + : no disc, the PH glyph, drawn in, a full turn on hover and on every tap */ .fab { position: fixed; left: calc(8px + var(--sl)); bottom: calc(8px + var(--sb)); z-index: 120; width: 56px; height: 56px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; filter: drop-shadow(0 0 1px var(--bg)) drop-shadow(0 0 2.5px var(--bg)) drop-shadow(0 0 8px var(--bg)); transition: opacity 260ms ease; } .fab .mk { width: 27px; height: 27px; } html.on-hero .fab { opacity: 0; pointer-events: none; } /* ---------------- piece and outfit pages ---------------- */ .page { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: var(--bg); padding: calc(var(--st) + 14px) calc(12px + var(--sr)) calc(var(--sb) + 12px) calc(16px + var(--sl)); animation: page-in 240ms ease backwards; } .page.closing { animation: page-out 200ms ease both; } @keyframes page-in { from { opacity: 0; } } @keyframes page-out { to { opacity: 0; } } /* the top of an item's page: the X on the left, EDIT on the right (its last letter on the page's right edge), the typewriter name under them */ .p-head { display: block; position: relative; z-index: 4; } .p-bar { display: flex; align-items: center; justify-content: space-between; margin-top: -10px; } .p-bar .x-btn { margin: 0 0 0 -15px; } .p-name { margin: 0; padding-top: 2px; max-width: 100%; font: 400 17px/1.28 var(--f-name); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; } .p-name span { display: block; } .p-name .price { display: inline; } .p-tools { display: flex; align-items: center; gap: 0; flex: none; margin-top: -8px; } .p-edit { border: 0; background: none; padding: 12px 0 14px 10px; font: 400 15px/1 var(--f-name); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } .p-edit .tl { position: relative; display: inline-block; } .x-btn { width: 46px; height: 46px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; margin-right: -6px; } .x-btn .mk { width: 34px; height: 34px; } .p-body { position: relative; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); } .carousel { position: relative; min-height: 0; overflow: hidden; touch-action: none; } .c-track { display: flex; height: 100%; will-change: transform; } .c-track.anim { transition: transform 340ms var(--ease); } .c-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 6px; } .c-slide > img { display: block; width: 100%; height: 100%; object-fit: contain; } .set-slide { width: min(100%, max(220px, calc((100vh - 300px) * .833))); } .onme-slide { width: min(100%, max(220px, calc((100vh - 300px) * .8))); } @supports (width: 1cqh) { .page.outfit .c-slide { container-type: size; } .set-slide { width: min(100cqw, calc(100cqh * 5 / 6)); } .onme-slide { width: min(100cqw, calc(100cqh * 4 / 5)); } } .c-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 70px; margin-top: -35px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; filter: drop-shadow(0 0 1.5px var(--bg)) drop-shadow(0 0 6px var(--bg)); } .c-arrow .chev { width: 20px; height: 34px; } .c-arrow.prev { left: -6px; } .c-arrow.next { right: -6px; } .c-dots { display: flex; justify-content: center; gap: 7px; height: 16px; align-items: center; } .c-dots i { width: 5px; height: 5px; background: rgba(20, 20, 20, .2); transition: background-color 200ms ease; } .c-dots i.on { background: var(--ink); } .turn-hint { justify-self: center; margin: 2px 0 0; font: 400 10px/1 var(--f-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); transition: opacity 400ms ease; } .turn-hint.gone { opacity: 0; } .turn-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; z-index: 2; } .p-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 6px; min-height: 40px; position: relative; z-index: 4; } /* the bin, bottom-right: its right edge lines up with EDIT's above */ .p-bin { flex: none; display: flex; align-items: flex-end; justify-content: flex-end; width: 46px; height: 46px; margin: 0 0 4px; padding: 0 0 10px; border: 0; background: none; color: var(--ink); } .p-bin .trash { width: 18px; height: 22px; overflow: visible; } @media (hover: hover) { .p-bin:hover { color: #8e8e8d; } } .p-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; } .p-lrow { display: flex; align-items: baseline; gap: 12px; max-width: 100%; } .p-price { flex: none; font: 400 15px/1 var(--f-name); letter-spacing: .04em; color: var(--ink-2); } .p-link { position: relative; display: inline-block; min-width: 0; border: 0; background: none; padding: 5px 0 13px; font: 400 18px/1 var(--f-name); letter-spacing: .02em; text-transform: none; color: var(--blue); text-decoration: none; overflow-wrap: anywhere; text-align: left; } /* ADD LINK: the grey of Links, underlined only under a mouse */ .p-link.p-add { color: #8e8e8d; text-transform: uppercase; letter-spacing: .04em; } @media (hover: hover) { .p-link.p-add:hover { color: var(--ct-grey); } } .p-body.sold .carousel { opacity: .5; filter: grayscale(.35); } .p-body > .sold-x { left: 18%; right: 18%; top: 10%; bottom: 16%; } .p-link .tl { position: relative; display: inline-block; } .p-notes { margin: 6px 0 0; font: italic 400 17px/1.45 var(--f-italic); color: var(--ink-2); max-width: 560px; } .p-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 2px; } .p-strip::-webkit-scrollbar { display: none; } .p-strip button { flex: 0 0 64px; height: 78px; border: 0; background: rgba(255, 255, 255, .35); padding: 4px; } .p-strip img { width: 100%; height: 100%; object-fit: contain; } .tags { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .tags span { font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .tags span::before { content: "|— "; opacity: .55; } .fly { position: fixed; z-index: 800; margin: 0; object-fit: contain; pointer-events: none; transform-origin: 0 0; will-change: transform; } /* outfit page: the scene fills the page behind the outfit */ .page.outfit .c-slide { padding: 8px 4px; } .page.outfit .c-arrow.prev { left: -12px; } .page.outfit .c-arrow.next { right: -12px; } .o-under { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; } .o-viewname { min-width: 84px; font: 400 10px/1 var(--f-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .o-real { min-width: 84px; border: 0; background: none; padding: 6px 0 12px; color: var(--blue); text-align: right; } .o-real[hidden] { display: block !important; visibility: hidden; } .o-real .pl { position: relative; display: inline-block; font: 400 10.5px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; } .o-real[disabled] { color: var(--ink-3); } .o-foot { position: relative; z-index: 2; } /* ---------------- sheets: the Contents tree ---------------- */ .sheet { position: fixed; inset: 0; z-index: 300; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); animation: sheet-in 300ms var(--ease) backwards; } .sheet.closing { animation: sheet-out 220ms ease both; } @keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } } @keyframes sheet-out { to { transform: translateY(24px); opacity: 0; } } .s-bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; height: calc(var(--st) + 56px); padding: var(--st) calc(4px + var(--sr)) 0 calc(4px + var(--sl)); background: var(--bg); } /* a sheet's title ("New category", "Edit piece") in the Mondwest of the rail titles */ .s-bar h2 { margin: 0; text-align: center; font: 400 20px/1.1 var(--f-display); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; } .s-x, .s-ok { width: 52px; height: 52px; border: 0; background: none; display: grid; place-items: center; color: var(--ink); justify-self: center; } /* the check is black, like the X */ .s-ok { color: var(--ink); } .s-x .mk, .s-ok .mk { width: 34px; height: 34px; } .s-ok[disabled] { opacity: .35; } .s-body { max-width: 680px; margin: 0 auto; padding: 10px calc(var(--gut) + 2px + var(--sr)) calc(var(--sb) + 64px) calc(var(--gut) + 2px + var(--sl)); } .clabel { margin: 4px 0 14px; font: 400 11px/1 var(--f-meta); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); } .clabel .sl { padding: 0 6px; } /* the Sources look (his two pictures): a continuous bar, dashes, blue keys, values on a branch — set close together, each key with its value right under it */ .src-tree { --bar: var(--ink); margin: -4px 0 22px; font: 400 12px/15px var(--f-meta); letter-spacing: .04em; } .src-item { position: relative; padding: 0 0 3px 30px; } .src-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--bar); } .src-item:first-child::before { top: -4px; } .src-item:last-child::before { bottom: auto; height: 8px; } .src-item:first-child:last-child::before { height: 12px; } .src-k { position: relative; color: var(--blue); text-transform: uppercase; letter-spacing: .1em; } .src-k::before { content: ""; position: absolute; left: -30px; top: 7.5px; width: 24px; height: 1px; background: var(--bar); } .src-v { position: relative; display: block; margin-left: 6px; padding-left: 24px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; } .src-v::before { content: ""; position: absolute; left: 0; top: -3px; height: 10.5px; width: 1px; background: var(--bar); } .src-v::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 18px; height: 1px; background: var(--bar); } /* store links: blue addresses, no underline; under a mouse the grey of Links with a close underline */ .src-link { width: fit-content; max-width: calc(100% - 6px); overflow: visible; white-space: normal; overflow-wrap: anywhere; padding-bottom: 9px; color: var(--blue); text-transform: none; letter-spacing: .02em; text-decoration: none; text-underline-offset: 1.5px; text-decoration-thickness: 1px; transition: color 140ms ease; } @media (hover: hover) { .src-link:hover { color: #8e8e8d; text-decoration-line: underline; } } .src-link .tl { position: relative; display: inline-block; vertical-align: top; max-width: 100%; overflow-wrap: anywhere; } .tree { position: relative; margin: 0; padding: 0; list-style: none; } .tree::before { content: ""; position: absolute; left: 0; top: -9px; bottom: 22px; width: 2px; background: rgba(20, 20, 20, .8); transform: scaleX(.75); transform-origin: 0 0; } .t-grp { position: relative; padding: 0 0 0 34px; margin: 0; } .t-grp + .t-grp { margin-top: 28px; } .t-grp::before { content: ""; position: absolute; left: 0; top: 12px; width: 29px; height: 2px; background: rgba(20, 20, 20, .8); transform: scaleY(.75); transform-origin: 0 0; } /* a group's name (Photos, Details, Links, Notes): plain italic, never underlined */ .t-gname { position: relative; display: inline-block; margin: 0; font: italic 400 21px/24px var(--f-italic); letter-spacing: .02em; color: var(--ink); } .t-gname .tl { position: relative; display: inline-block; } .t-kids { position: relative; list-style: none; margin: 10px 0 0; padding: 0 0 0 36px; } /* the branch line starts a little under the group's name, never touching it */ .t-kids::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 21px; width: 1px; background: rgba(20, 20, 20, .55); } /* a second list in the same group (the studio's piece pickers under its filter) joins the line above it */ .t-kids.cont::before { top: -19px; } .t-row { position: relative; min-height: 44px; display: flex; align-items: center; gap: 10px; } .t-row::before { content: ""; position: absolute; left: -38px; top: 21px; width: 31px; height: 1px; background: rgba(20, 20, 20, .55); } .t-mark { position: absolute; left: -40px; top: 19px; width: 5px; height: 5px; background: transparent; transition: background-color 160ms ease; } .t-row.on .t-mark, .t-row:focus-within .t-mark { background: var(--blue); } .t-num { flex: none; width: 24px; font: 400 10px/1 var(--f-meta); letter-spacing: .12em; color: var(--ink-2); } .t-label { flex: none; width: 96px; font: 400 11px/1.2 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .t-row.on .t-label, .t-row:focus-within .t-label { color: var(--blue); } .t-input { flex: 1; min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; padding: 11px 0 9px; color: var(--ink); font: 400 17px/1.2 var(--f-name); text-transform: uppercase; letter-spacing: .02em; -webkit-appearance: none; appearance: none; } .t-input.plain { font: 400 16px/1.2 var(--f-meta); text-transform: none; letter-spacing: .02em; } .t-input::placeholder { color: var(--ink-3); } .t-input:focus { border-bottom-color: var(--blue); } /* notes: one line to start, its underline right under the words; every new line of typing takes the underline down with it (the height is set from the text in core.js) */ textarea.t-input { height: auto; min-height: 0; resize: none; overflow: hidden; font: italic 400 18px/1.4 var(--f-italic); text-transform: none; overflow-wrap: break-word; } .t-pick { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; padding: 0; text-align: left; color: var(--ink); } .t-pick .pl { position: relative; display: inline-block; font: var(--tab-weight) 15px/1 var(--f-tab); letter-spacing: var(--tab-track); text-transform: var(--tab-case); font-style: var(--tab-style); } .t-row.on .t-pick { color: var(--blue); } .t-cols { display: block; } /* a line whose value comes from a list (Section, Kind, Group): the choice, and a caret at the end of the line */ .t-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; } .t-select .t-sel-v { min-width: 0; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-select .caret { flex: none; width: 10px; height: 6px; color: var(--ink-2); } .t-select[disabled] { opacity: .5; cursor: default; } /* two choices side by side (Status) */ .t-seg { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 4px 0 2px; } .t-seg button { border: 0; background: none; padding: 8px 0 13px; color: var(--ink); text-align: left; } .t-seg button.on { color: var(--blue); } .t-seg button[disabled] { opacity: .5; } .t-seg .pl { position: relative; display: inline-block; font: var(--tab-weight) 15px/1 var(--f-tab); letter-spacing: var(--tab-track); text-transform: var(--tab-case); } /* the line for a new kind or group: part of the line above it, so no branch of its own */ .t-row.new-kind::before, .t-row.new-kind .t-mark { display: none; } .t-row.new-kind .t-label { margin-left: 34px; } @media (max-width: 480px) { .t-row.field { flex-wrap: wrap; row-gap: 2px; padding-top: 12px; } .t-row.field .t-num, .t-row.field .t-label { line-height: 18px; } .t-row.field .t-label { width: auto; } .t-row.field > :last-child { flex: 0 0 calc(100% - 34px); margin-left: 34px; } .t-row.field .t-input { padding-top: 6px; } } .t-hint { margin: 0; font: italic 400 16px/1.45 var(--f-italic); color: var(--ink-2); } /* a small note under one field, lined up with that field's line */ .t-row.note-row { min-height: 0; } .t-row.note-row::before, .t-row.note-row .t-mark { display: none; } .t-note { flex: 1; min-width: 0; margin: 8px 0 2px 140px; font: 400 10px/1.5 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 480px) { .t-note { margin-left: 34px; } } .t-danger { color: var(--ink-2); } .t-danger .pl { font: 400 11px/1 var(--f-meta) !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-style: normal !important; } /* photos on the Photos branch */ .photos { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; margin-right: calc(-1 * (var(--gut) + var(--sr))); } .photos::-webkit-scrollbar { display: none; } .padd { position: relative; flex: 0 0 96px; height: 122px; display: grid; place-items: center; align-content: center; gap: 9px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 400 10px/1.25 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; text-align: center; } .padd svg { width: 20px; height: 20px; } .padd input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } @media (hover: hover) { .padd:hover { border-color: var(--ink); } } .pthumb { position: relative; flex: 0 0 96px; height: 122px; border: 0; background: rgba(255, 255, 255, .45); padding: 6px; } .pthumb img { width: 100%; height: 100%; object-fit: contain; } .pthumb .cover { position: absolute; left: 5px; top: 5px; font: 400 9px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } .pthumb .busy { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: rgba(229, 229, 229, .86); font: 400 9.5px/1.3 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; text-align: center; } .pthumb .busy::before { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto 6px; border: 1px solid var(--line-2); border-top-color: var(--ink); border-radius: 50%; animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .pastezone { margin-top: 8px; min-height: 48px; padding: 12px; border: 1px dashed var(--line-2); color: var(--ink-2); font: italic 400 16px/1.4 var(--f-italic); outline: none; } /* batch list: a small photo on each tee, its name and progress beside it */ .t-row.b-row { min-height: 60px; } .t-row.b-row::before { top: 29px; } .t-row.b-row .t-mark { top: 27px; } .bitem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 0; } .bth { flex: none; display: block; width: 40px; height: 48px; object-fit: contain; } .bmeta { min-width: 0; } .bmeta b { display: block; font: 400 15px/1.2 var(--f-name); font-weight: 400; text-transform: uppercase; } .bmeta span { display: block; margin-top: 3px; font: 400 10px/1.3 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; } /* ---------------- the outfit studio ---------------- */ .studio .s-body { max-width: 760px; } .st-modes { display: flex; justify-content: center; gap: 30px; margin: -2px 0 8px; } .st-modes button { border: 0; background: none; padding: 6px 4px 14px; color: var(--ink-2); } .st-modes button[aria-selected="true"] { color: var(--blue); } .st-modes .tl { position: relative; display: inline-block; font: var(--tab-weight) var(--tab-size)/1 var(--f-tab); letter-spacing: var(--tab-track); text-transform: var(--tab-case); font-style: var(--tab-style); } .stage-wrap { position: relative; margin: 2px auto 0; width: min(100%, calc((100vh - 250px) * .8)); min-width: 240px; } .stage-wrap.set-mode { width: min(100%, calc((100vh - 250px) * .833)); } .stage { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y; background: #d4d4d4; } .stage.set { aspect-ratio: 5 / 6; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } .stage-wrap.has-sel .stage { touch-action: none; } .stage .pc { cursor: grab; touch-action: none; } .stage .pc.sel { outline: 1px dashed rgba(255, 255, 255, .9); outline-offset: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); } .stage .pc .grip { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; display: none; border: 1px solid var(--ink); background: var(--bg); cursor: nwse-resize; } .stage .pc.sel .grip { display: block; } .stage-empty { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 30px; text-align: center; font: italic 400 18px/1.4 var(--f-italic); color: var(--ink); pointer-events: none; } .stage-tools { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin: 10px 0 0; min-height: 34px; } .stage-tools button { border: 0; background: none; padding: 8px 2px 14px; color: var(--ink); } .stage-tools .pl { position: relative; display: inline-block; font: 400 10.5px/1 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; } .scenes { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; } .scenes::-webkit-scrollbar { display: none; } .scene-pick { flex: 0 0 78px; border: 0; background: none; padding: 0; text-align: center; color: var(--ink); } .scene-pick .sw { display: block; width: 78px; height: 98px; background: #ccc center / cover no-repeat; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color 160ms ease; } .scene-pick.on .sw { outline-color: var(--blue); } .scene-pick .pl { position: relative; display: inline-block; margin-top: 8px; padding-bottom: 12px; font: 400 9.5px/1.1 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; } .scene-pick.on .pl { color: var(--blue); } .picks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin-right: calc(-1 * (var(--gut) + var(--sr))); } .picks::-webkit-scrollbar { display: none; } .pick { position: relative; flex: 0 0 82px; height: 102px; padding: 6px; border: 0; background: rgba(255, 255, 255, .4); } .pick img { width: 100%; height: 100%; object-fit: contain; } .pick .ring { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); } .pick .ring .mk { position: absolute; left: -7px; top: -7px; width: 34px; height: 34px; } .pick.on { background: rgba(255, 255, 255, .75); } .pick.on .ring { border-color: var(--blue); color: var(--blue); } .pick .want { top: 6px; left: 6px; } .filter-row { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 0 6px; } .filter-row button { border: 0; background: none; padding: 6px 0 14px; color: var(--ink-2); } .filter-row button.on { color: var(--blue); } .filter-row .pl { position: relative; display: inline-block; font: 400 10.5px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; } /* under the iPhone status bar (white text): a black strip whenever a light page or sheet is on top. One fixed element outside every animated layer, so nothing can carry it off when a sheet scrolls. */ .sb-strip { position: fixed; left: 0; right: 0; top: 0; z-index: 900; height: var(--st); background: #000; pointer-events: none; display: none; } html.locked .sb-strip { display: block; } /* ---------------- menus, toast, install hint ---------------- */ .scrim { position: fixed; inset: 0; z-index: 450; background: rgba(229, 229, 229, .58); animation: page-in 160ms ease both; touch-action: none; } /* over the page (no sheet open) the black header stays black: the veil starts under it */ html:not(.locked) .scrim { background: linear-gradient(to bottom, transparent var(--hdr-h), rgba(229, 229, 229, .58) var(--hdr-h)); } .pop { position: fixed; z-index: 500; touch-action: none; overscroll-behavior: contain; overflow-y: auto; max-height: calc(100vh - var(--st) - var(--sb) - 20px); max-height: calc(100dvh - var(--st) - var(--sb) - 20px); min-width: 250px; max-width: calc(100vw - 24px); padding: 8px 0; background: var(--bg); border: 1px solid rgba(20, 20, 20, .26); box-shadow: 0 16px 36px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06); animation: pop-in 180ms var(--ease) both; } @keyframes pop-in { from { opacity: 0; transform: translateY(6px); } } .pop button { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; width: 100%; padding: 12px 18px 14px; border: 0; background: none; text-align: left; color: var(--ink); } .pop .pl { position: relative; display: inline-block; font: 400 19px/1.05 var(--f-display); letter-spacing: var(--title-track); text-transform: var(--title-case); } .pop small { flex: none; font: 400 9.5px/1 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .pop hr { margin: 6px 18px; border: 0; border-top: 1px solid var(--line); } .pop .note { padding: 6px 18px 10px; font: 400 10px/1.55 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .pop .danger .pl { color: var(--ink-2); } .toast { position: fixed; left: 50%; bottom: calc(var(--sb) + 76px); z-index: 700; transform: translateX(-50%); max-width: calc(100vw - 40px); padding: 12px 16px; background: #000; color: #fff; font: 400 11px/1.4 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; text-align: center; animation: pop-in 200ms var(--ease) both; } .install { position: fixed; left: calc(70px + var(--sl)); right: calc(12px + var(--sr)); bottom: calc(14px + var(--sb)); z-index: 119; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; background: var(--bg); border: 1px solid rgba(20, 20, 20, .22); font: 400 10px/1.45 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; } .install > svg { flex: none; width: 16px; height: 18px; color: var(--blue); } .install button { flex: none; margin-left: auto; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; } .install button .mk { width: 28px; height: 28px; } html.on-hero .install { opacity: 0; pointer-events: none; } /* each section's name heads its page, in grey Mondwest caps like the CONTENTS title; a section he made himself has a small Edit at the right (rename, delete) */ .sec-head { display: flex; align-items: baseline; gap: 14px; padding: 30px calc(var(--gut) + 6px + var(--sr)) 6px calc(var(--gut) + 6px + var(--sl)); } .sec-head[hidden] { display: none; } .sec-title { flex: 1; min-width: 0; margin: 0; font: 400 22px/1.12 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #989897; overflow-wrap: anywhere; } .sec-edit { flex: none; min-height: 34px; margin: -10px -2px -10px 0; padding: 0 2px 0 12px; border: 0; background: none; font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } @media (hover: hover) { .sec-edit:hover { color: var(--ink-2); } } /* ---------------- Contents: the SMS Pilot "Sources" look ---------------- */ /* CONTENTS sits where each section's title sits; the blue headings are the links into their sections */ .contents { padding: 30px calc(var(--gut) + 6px + var(--sr)) 30px calc(var(--gut) + 6px + var(--sl)); } .ct-title { margin: 0 0 22px; font: 400 25px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #989897; } .ct-tree { margin-left: 10px; font: 400 15px/22px var(--f-mono); } .ct-grp { border-left: 1.5px solid var(--ink); margin: 0 0 9px; } .ct-k, .ct-v { display: flex; align-items: baseline; min-width: 0; } .ct-k { color: var(--ct-blue); font-weight: 700; } .ct-k::before, .ct-v::before { content: "——"; flex: none; color: var(--ink); font-weight: 400; } .ct-v { margin-left: calc(2ch + 3px); border-left: 1.5px solid var(--ink); } /* underlines tight to the words, as in the Sources picture: 0.15em under the baseline, through the descenders' gaps */ .ct-link, .ct-go { min-width: 0; border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left; color: var(--ct-grey); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-skip-ink: auto; overflow-wrap: anywhere; } .ct-go { position: relative; color: inherit; } .ct-go::after { content: ""; position: absolute; inset: -4px -8px; } .ct-link { text-wrap: balance; } .ct-link.ct-add { text-decoration-style: dotted; } /* on hover a blue heading takes the grey of Books and Future Wants (never black); the grey ones (Books, Future Wants, + Add a category) turn a little lighter */ .ct-link { transition: color 140ms ease; } @media (hover: hover) { .ct-go:hover { color: var(--ct-grey); } .ct-link:hover { color: #a3a3a2; } } /* the foot of Contents: backups and On me & AI, quiet grey words */ .ct-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 46px 0 0 10px; } .ct-fl { border: 0; background: none; padding: 6px 0 12px; color: #8e8e8d; } .ct-fl .pl { position: relative; display: inline-block; font: 400 10px/1 var(--f-meta); letter-spacing: .16em; text-transform: uppercase; } @media (hover: hover) { .ct-fl:hover { color: var(--ink-2); } } .ct-dot { color: #b3b3b2; font: 400 10px/1 var(--f-meta); } .ct-foot.ct-foot2 { margin-top: 2px; } /* ---------------- Links: ordinary blue underlined links, in groups, with notes ---------------- */ .lk-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: calc(var(--gut) + var(--sr)); } .lk-bar .eyebrow { min-width: 0; } html.no-tabs #view > .lk-bar:first-child .eyebrow { padding-top: 14px; } .lk-arrange { flex: none; border: 0; background: none; padding: 6px 0 12px; color: var(--ink-3); } .lk-arrange .pl { position: relative; display: inline-block; font: 400 10px/1 var(--f-meta); letter-spacing: .16em; text-transform: uppercase; } .lk-arrange.on { color: var(--blue); } .lk-wrap { padding: 16px calc(var(--gut) + 6px + var(--sr)) 10px calc(var(--gut) + 6px + var(--sl)); } .lk-tree .ct-grp { margin-bottom: 14px; } /* a group's name is a button: add a link to it, rename it, delete it */ .lk-gname { min-width: 0; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; } @media (hover: hover) { .lk-gname:hover { color: #8e8e8d; } } .lk-empty { color: var(--ink-3); } .lk-addhere { border: 0; background: none; padding: 0; font: inherit; color: var(--ct-grey); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .15em; } /* arranging: a grip on each link and each group to drag by */ .lk-grip { flex: none; width: 34px; height: 30px; margin: -6px -8px -6px auto; border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; touch-action: none; cursor: grab; } .lk-grip svg { width: 10px; height: 16px; } .lk-tree.arranging .lk-a { pointer-events: none; } .lk-tree.arranging .lk-v, .lk-tree.arranging .ct-grp { transition: background-color 140ms ease; } .lk-tree .dragging { background: rgba(255, 255, 255, .55); } .lk-tree .dragging > .lk-line .lk-grip, .lk-tree .ct-grp.dragging > .lk-k .lk-grip { color: var(--blue); cursor: grabbing; } /* while a whole group moves, the groups fold to their names */ .lk-tree.folded .lk-v, .lk-tree.folded .lk-note { display: none; } .lk-v { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; padding-bottom: 4px; } .lk-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .lk-a { min-width: 0; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; overflow-wrap: anywhere; } .lk-edit { flex: none; margin-left: auto; border: 0; background: none; padding: 6px 0 6px 10px; font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .lk-note { grid-column: 2; margin: 3px 0 6px; font: italic 400 16px/1.4 var(--f-italic); color: var(--ink-2); } /* ---------------- filters: brand, then kinds ---------------- */ .tr-end .f-brand { display: inline-flex; align-items: center; gap: 6px; } .tr-end .f-brand .caret { flex: none; width: 9px; height: 6px; } .pop.pop-list { max-height: min(62vh, 520px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; } /* the price in other currencies: the peso first, the dollar, then a search for any currency */ .pop.pop-cur { padding: 14px 0 10px; touch-action: pan-y; display: flex; flex-direction: column; } .cur-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 18px 10px; } .cur-main { font: 400 20px/1 var(--f-name); letter-spacing: .02em; color: var(--ink); } .cur-from { font: 400 9.5px/1.3 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: right; } .cur-quick { display: flex; flex-direction: column; padding: 0 0 6px; border-bottom: 1px solid var(--line); } .pop .cur-q { justify-content: flex-start; align-items: center; gap: 12px; padding: 10px 18px 12px; } .pop .cur-q .pl { font: 400 17px/1.05 var(--f-name); letter-spacing: .02em; text-transform: none; } .cur-flag { flex: none; width: 1.4em; font-size: 18px; line-height: 1; text-align: center; } .pop .cur-search { margin: 12px 18px 4px; width: calc(100% - 36px); font: 400 15px/1.2 var(--f-name); } .cur-list { overflow-y: auto; overscroll-behavior: contain; min-height: 60px; } .pop .cur-row { justify-content: flex-start; align-items: center; gap: 12px; padding: 9px 18px 10px; } .cur-name { flex: 1 1 auto; min-width: 0; font: 400 15px/1.2 var(--f-name); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cur-amt { flex: none; font: 400 12px/1 var(--f-name); color: var(--ink-2); } .cur-none { margin: 10px 18px; font: italic 400 15px/1.4 var(--f-italic); color: var(--ink-2); } .cur-date { margin: 8px 18px 0; font: 400 9px/1 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } @media (hover: hover) { .pop .cur-row:hover .cur-name { color: var(--blue); } } .nop { position: absolute; inset: 30% 8% auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-align: center; font: 400 11px/1.3 var(--f-name); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; } /* a video or a GIF: a small word in the corner of its tile */ .mo-tag { position: absolute; z-index: 3; right: 6px; bottom: 6px; padding: 3px 5px 2px; background: rgba(229, 229, 229, .86); font: 400 8.5px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); pointer-events: none; } .pthumb .mo-tag { right: 5px; bottom: 5px; } .bth.bvid { display: grid; place-items: center; background: rgba(255, 255, 255, .45); font: 400 8px/1 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .c-slide > video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; } .grid.products .tile img { transform: scale(.9); } /* ---------------- hangers drawn for each garment ---------------- */ .hang.fitted .hanger { top: 0; left: 0; width: 100%; height: 100%; margin: 0; } /* ---------------- the edit sheet: kinds, brand suggestions, several links ---------------- */ /* a line with its button (New kind + Add, Key + Show): the button sits on the line, not above it */ .t-addkind { flex: 1; display: flex; align-items: flex-end; gap: 10px; min-width: 0; } .t-mini { flex: none; min-height: 34px; border: 1px solid var(--line-2); background: none; padding: 0 12px; font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } /* Upload > From a link: the address, Find, and Attach (a saved link file); what it is doing, under it */ .lk-wrap { flex: 1; min-width: 0; display: grid; gap: 6px; } .lk-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .lk-from > svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--ink-2); } /* the address on a line of its own, Find and Attach under it */ .lk-from .t-input { flex: 1 1 calc(100% - 25px); min-width: 0; } .lk-from .t-mini { display: grid; place-items: center; position: relative; } .lk-from .t-mini[disabled] { opacity: .4; } .lk-attach input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .lk-status { margin: 0; font: 400 10px/1.5 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .lk-status.bad { color: #b23a2e; } .sheet.drop-on { outline: 2px dashed var(--blue); outline-offset: -8px; } @media (hover: hover) { .t-mini:hover { border-color: var(--ink); } } .t-row.sugg-row { min-height: 0; } .t-row.sugg-row::before, .t-row.sugg-row .t-mark { display: none; } .b-sugg { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; } .b-chip { border: 1px solid var(--line-2); background: rgba(255, 255, 255, .45); padding: 7px 10px; font: 400 11px/1 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .l-rows { flex: 1; min-width: 0; display: grid; gap: 16px; padding: 8px 0 4px; } /* Kinds of a section or category: his kinds as chips (tap to take one away), suggestions, a line to add */ .t-row.k-row { align-items: flex-start; } .t-row.k-row > .t-num, .t-row.k-row > .t-label { padding-top: 16px; } .k-ed { flex: 1; min-width: 0; display: grid; gap: 10px; padding: 10px 0 6px; } .k-chips { display: flex; flex-wrap: wrap; gap: 6px; } .k-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .45); padding: 6px 4px 6px 10px; font: 400 11px/1 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .k-chip .mk { width: 18px; height: 18px; color: var(--ink-2); } .k-chip .mk path { transition: none; } @media (hover: hover) { .k-chip:hover { border-color: var(--ink); } } .k-none { font: italic 400 16px/1.4 var(--f-italic); color: var(--ink-3); } .k-sugg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .k-cap { font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .k-s { border: 0; background: none; padding: 4px 0; font: 400 11px/1.2 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--ct-grey); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; } @media (hover: hover) { .k-s:hover { color: var(--blue); } } .k-add .t-input { padding-top: 8px; } .k-ai { justify-self: start; border: 0; background: none; padding: 4px 0 8px; font: 400 10.5px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .k-ai[disabled] { color: var(--ink-3); } .l-item { display: grid; gap: 2px; } .l-top { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 36px; } .l-sub { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; padding-left: 0; } /* each line named above it (Address, then Label and Price), never by grey text sitting in the line */ .l-sub.l-wide { grid-template-columns: minmax(0, 1fr); } .l-f { display: grid; min-width: 0; padding-top: 10px; } .l-cap { flex: 1; min-width: 0; font: 400 11px/1.2 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .l-sub .t-input { padding-top: 6px; } .l-f:focus-within .l-cap, .l-item:has(.l-wide .t-input:focus) .l-top .l-cap { color: var(--blue); } .l-rm { flex: none; width: 36px; height: 36px; margin-right: -8px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; } .l-rm .mk { width: 26px; height: 26px; } .src-price { color: var(--ink-2); } .pthumb.face img { object-fit: cover; } /* ---------------- picking one piece out of a worn photo ---------------- */ .page.marker .p-body { display: block; } .mk-stage { position: relative; height: 100%; min-height: 0; cursor: crosshair; touch-action: manipulation; } .mk-stage img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; } .mk-stage.result { cursor: default; } .mk-dots { position: absolute; inset: 0; pointer-events: none; } .mk-dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 0; padding: 0; background: none; pointer-events: auto; } .mk-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .45); } .mk-dot.keep::after { background: #1fa83a; } .mk-dot.drop::after { background: #d42a2a; } .mk-foot { display: grid; gap: 10px; padding-top: 10px; } .mk-hint { margin: 0; font: italic 400 16px/1.35 var(--f-italic); color: var(--ink-2); } .mk-tools, .mk-acts { display: flex; gap: 8px; flex-wrap: wrap; } .mk-tools[hidden] { display: none !important; } .mk-mode, .mk-act { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: none; font: 400 10.5px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .mk-mode i { width: 10px; height: 10px; border-radius: 50%; } .mk-mode.keep i { background: #1fa83a; } .mk-mode.drop i { background: #d42a2a; } .mk-mode.on { border-color: var(--ink); background: rgba(255, 255, 255, .55); } .mk-status { margin: 0; min-height: 14px; font: 400 10px/1.4 var(--f-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } /* ---------------- sets: the outfit as one of his collages ---------------- */ .set { position: relative; width: 100%; aspect-ratio: 5 / 6; background: #fff; overflow: hidden; container-type: inline-size; } .set .lay { position: absolute; inset: 0; } .set .pc { position: absolute; transform-origin: 50% 50%; } .set .pc img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .08)); } .set .r-art img, .set .r-lifestyle img { filter: none; } .sq { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #111; white-space: nowrap; } .sq.wrap { white-space: normal; overflow-wrap: anywhere; } .sq.wrap, .sq.wrap .sq-a, .sq.wrap .sq-b { line-height: 1.04; } .sq-didot { font: 400 26px/1 "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif; font-size: calc(26px * var(--qk, 1)); font-size: calc(7.6cqw * var(--qk, 1)); text-transform: uppercase; letter-spacing: .01em; } .sq-bold { font: 700 22px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: calc(22px * var(--qk, 1)); font-size: calc(6.6cqw * var(--qk, 1)); text-transform: uppercase; letter-spacing: -.01em; } .sq-spaced { font: 300 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: calc(13px * var(--qk, 1)); font-size: calc(3.8cqw * var(--qk, 1)); text-transform: uppercase; letter-spacing: .38em; } .sq-script { font: 400 30px/1 "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive; font-size: calc(30px * var(--qk, 1)); font-size: calc(9cqw * var(--qk, 1)); } .sq-mixed .sq-a { font: 400 22px/1 "Didot", "Bodoni 72", Georgia, serif; font-size: calc(22px * var(--qk, 1)); font-size: calc(7cqw * var(--qk, 1)); padding-left: 11cqw; } .sq-mixed .sq-b { font: 700 30px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: calc(30px * var(--qk, 1)); font-size: calc(9.2cqw * var(--qk, 1)); text-transform: uppercase; letter-spacing: -.02em; } .slab { position: absolute; display: flex; flex-direction: column; align-items: flex-start; font: 400 8px/1.3 var(--f-mono); font-size: 2.3cqw; white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff; } .sl-go, .sl-dt { display: block; border: 0; background: none; padding: 0; margin: 0; font: inherit; line-height: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; cursor: pointer; } .sl-go { color: var(--link); text-decoration: underline; } .sl-dt { color: #5f5f5f; text-decoration: underline; text-decoration-style: dotted; } /* a bigger hit area than the words, without moving them */ .sl-go, .sl-dt { position: relative; } .sl-go::after, .sl-dt::after { content: ""; position: absolute; inset: -2px -6px; } /* ---------------- On me: his build in the scene ---------------- */ .onme { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #d4d4d4; } .onme .fig { position: absolute; z-index: 1; pointer-events: none; user-select: none; -webkit-user-select: none; } .onme .lay { position: absolute; inset: 0; z-index: 2; } .onme .lay .pc img { filter: var(--shade, drop-shadow(0 8px 10px rgba(0, 0, 0, .14))); } .onme.photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------------- his face, fitted onto the build ---------------- */ .ff-wrap { display: grid; justify-items: center; gap: 14px; padding: 8px calc(var(--gut) + var(--sr)) 34px calc(var(--gut) + var(--sl)); } .ff-wrap .t-hint { max-width: 380px; margin: 0; text-align: center; } .ff-stage { position: relative; width: min(100%, 380px); aspect-ratio: 1; overflow: hidden; background: #161616; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } .ff-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; } .ff-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .ff-guide path { fill: rgba(0, 0, 0, .52); } .ff-row { display: flex; align-items: center; gap: 12px; width: min(100%, 380px); font: 400 10px/1 var(--f-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .ff-size { flex: 1; accent-color: var(--ink); } .ff-line { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .ff-preview { flex: none; position: relative; width: 84px; height: 104px; overflow: hidden; background: #d8d0c5; } .ff-preview img { position: absolute; width: 168px; max-width: none; left: -42px; top: -4px; } .ff-status { margin: 6px 0 0; } .pthumb.face.on { outline: 1px solid var(--ink); outline-offset: 2px; } /* ---------------- product details card ---------------- */ .pop.pop-details { touch-action: pan-y; max-height: 80vh; overflow-y: auto; } .pop.scrolls { touch-action: pan-y; } .dt { padding: 6px 18px 10px; } .dt-head { display: flex; gap: 12px; align-items: center; } .dt-head img { flex: none; width: 56px; height: 64px; object-fit: contain; background: rgba(255, 255, 255, .5); } .dt-head b { display: block; font: 400 15px/1.2 var(--f-name); text-transform: uppercase; } .dt-head span { display: block; margin-top: 2px; font: 400 14px/1.25 var(--f-name); text-transform: uppercase; color: var(--ink-2); } .dt-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 12px 0 0; font: 400 11px/1.3 var(--f-meta); letter-spacing: .08em; text-transform: uppercase; } .dt-facts dt { color: var(--ink-3); } .dt-facts dd { margin: 0; color: var(--ink); } .dt-links { display: grid; gap: 7px; margin-top: 12px; } .dt-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 12.5px/1.3 var(--f-mono); } .dt-l a { min-width: 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .dt-l span { flex: none; color: var(--ink-2); } .dt-notes { margin: 10px 0 0; font: italic 400 15px/1.4 var(--f-italic); color: var(--ink-2); } .sw-up { display: grid !important; place-items: center; background: rgba(255, 255, 255, .45) !important; } .sw-up svg { width: 22px; height: 22px; } .art-picks .sw { background-color: #fff; } /* ---------------- wider screens ---------------- */ @media (min-width: 700px) { :root { --gut: 40px; --title-size: 32px; } .tabs { gap: 10px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 26px; padding: 22px calc(40px + var(--sr)) 0 calc(40px + var(--sl)); } .ogrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .hang { width: 150px; height: 258px; } .hang .hanger { width: 98px; height: 49px; margin-left: -49px; top: 3px; } .hang img { top: 38px; height: 216px; } .hang.pants { width: 132px; height: 288px; } .hang.pants img { top: 42px; height: 242px; } .sit { width: 132px; height: 156px; } .sit img { height: 128px; } .page { padding: calc(var(--st) + 30px) calc(34px + var(--sr)) calc(var(--sb) + 26px) calc(40px + var(--sl)); } .p-name { font-size: 28px; } .p-link { font-size: 22px; } .c-arrow.prev { left: 6px; } .c-arrow.next { right: 6px; } } @media (min-width: 900px) { .s-bar { padding-left: max(calc(4px + var(--sl)), calc((100% - 760px) / 2)); padding-right: max(calc(4px + var(--sr)), calc((100% - 760px) / 2)); } } @media (min-width: 700px) { .ct-tree { font-size: 16px; line-height: 24px; } } @media (prefers-reduced-motion: reduce) { .phu-win.in { animation: none !important; clip-path: inset(0 0 0 0); } .phu-win.out { animation: none !important; visibility: hidden; } .ph-header, .ph-header__compact-logo { transition: none; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* the small italic note at the foot of New section / New category (3.0.5) */ .s-tip { margin: 26px calc(var(--gut) + 4px + var(--sr)) 34px calc(var(--gut) + 4px + var(--sl)); max-width: 560px; font: italic 400 14px/1.45 var(--f-italic); color: var(--ink-2); } .t-pick .t-hint2 { margin-left: 10px; font: 400 9.5px/1 var(--f-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* sold out on a rail or a shelf: the same faded red X over the piece */ .hang .sold-x { left: 6%; right: 6%; top: 36px; bottom: 10px; z-index: 3; } .sit .sold-x { left: 6%; right: 6%; top: 4px; bottom: 12px; z-index: 3; } .hang .sold-x em, .sit .sold-x em { font-size: 9px; padding: 2px 5px 1px; } .hang.sold img, .sit.sold img { opacity: .55; filter: grayscale(.35) drop-shadow(0 6px 8px rgba(0, 0, 0, .06)); }