/** * "Drop your logo" — the visitor's own artwork, printed across the catalog. * * Pairs with assets/tg-logo-preview.js, which is where the file is read and * where the two custom properties below are set. This file only ever draws * what is already in `--tg-logo`. * * The whole feature is one variable on and one class: * * --tg-logo the artwork, as a data: URL the browser produced itself * --tg-logo-ratio its aspect ratio, so a wide wordmark is not squared off * .tg-has-logo set once artwork exists, on every page of the site * * Nothing is uploaded. The file is read in the browser and kept in that * browser. The server never sees it, which is what makes it safe to offer to * a stranger on a public home page. */ /* ---------------------------------------------------------------- dropzone */ .tg-logo-drop { --tg-drop-line: var( --wp--preset--color--ti-line, #c9c9c9 ); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; min-height: 13rem; padding: 2rem clamp( 1rem, 4vw, 3rem ); border: 1px dashed var( --tg-drop-line ); border-radius: 2px; text-align: center; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; } .tg-logo-drop:hover, .tg-logo-drop:focus-within, .tg-logo-drop.is-dragging { border-color: var( --wp--preset--color--ti-fg, #111 ); background-color: rgba( 0, 0, 0, 0.02 ); } .tg-logo-drop.is-dragging { border-style: solid; } /* The real input stays in the accessibility tree and stays focusable. Hiding it with display:none would take it out of both, and the dropzone would stop being reachable by keyboard. */ .tg-logo-drop input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; border: 0; } .tg-logo-drop input[type="file"]:focus-visible + .tg-logo-drop__body { outline: 2px solid var( --wp--preset--color--ti-fg, #111 ); outline-offset: 6px; } .tg-logo-drop__body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .tg-logo-drop__mark { width: 4.5rem; height: 4.5rem; background-image: var( --tg-logo, none ); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Before anything is dropped there is no artwork to show, so the slot holds a plain outline instead of collapsing and shifting the copy underneath. */ .tg-logo-drop__mark:not( [style] ) { border: 1px solid var( --tg-drop-line ); } .tg-has-logo .tg-logo-drop__mark { border: 0; } .tg-logo-drop__hint { font-family: var( --wp--preset--font-family--space-mono, monospace ); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var( --wp--preset--color--ti-accent-secondary, #6b6b6b ); } .tg-logo-drop__error { color: #b3261e; } .tg-logo-drop__tools { display: none; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.25rem; } .tg-has-logo .tg-logo-drop__tools { display: flex; } .tg-logo-drop__btn { font-family: var( --wp--preset--font-family--space-mono, monospace ); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 0.9rem; border: 1px solid var( --wp--preset--color--ti-fg, #111 ); border-radius: 2px; background: transparent; color: var( --wp--preset--color--ti-fg, #111 ); cursor: pointer; transition: background 180ms ease, color 180ms ease; } .tg-logo-drop__btn:hover, .tg-logo-drop__btn:focus-visible { background: var( --wp--preset--color--ti-fg, #111 ); color: var( --wp--preset--color--ti-bg-alt, #fff ); } /* Held while the model downloads and runs. Inference blocks the main thread, so without this the button looks clickable while nothing can happen. */ .tg-logo-drop__btn:disabled { opacity: 0.45; cursor: progress; background: transparent; color: var( --wp--preset--color--ti-fg, #111 ); } /* --------------------------------------- the placed print: category tiles */ /* * THIS is where the artwork is actually placed for the visitor, and the reason * is arithmetic. Placing a print means knowing where the garment sits in the * photograph, and that is a hand-tuned number per photograph. There are 11 * category tiles and 363 products. Eleven is a morning's work and it is already * done; 363 is not work, it is a permanent tax, and every blank added to the * catalog adds to it. * * So the tiles carry the placed print and the products do not. `tg-ghost-print.css` * has already worked out all 11 positions for our own ghost mark, keyed off the * archive link each tile carries. Feeding the visitor's logo through the same * `--tg-print-art` variable re-uses every one of them: 10 explicit rules plus * t-shirts on the chest-centre default. * * This also means touch needs no special case. The mark is already permanently * on for coarse pointers in tg-ghost-print.css, so a phone gets the visitor's * logo on 11 correctly-placed garments with no hover and no tap-to-place. */ .tg-has-logo .st-cat-card { --tg-print-art: var( --tg-logo ); } /* * The blend goes back to normal at the same time. `screen` is right for flat * white ink over dark fabric and would wash a colour logo out to nothing. */ .tg-has-logo .st-cat-card::after { mix-blend-mode: normal; aspect-ratio: var( --tg-logo-ratio, 1 ); } .tg-has-logo .st-cat-card:hover::after, .tg-has-logo .st-cat-card:focus-within::after { opacity: 1; }