/* * The picker. Loads after catalog.css and uses its tokens -- --ink, --paper, * --line, --accent, the two faces -- so a category's theme (set on by * pick-page.mjs once one is chosen) recolours the cover exactly as it does on * that category's own page. */ .pick-main { background: var(--paper); } /* --- the cover ---------------------------------------------------------- */ .pick-cover { position: relative; display: grid; gap: 18px; overflow: hidden; padding: 26px 20px 30px; color: var(--accent-ink); background-color: var(--accent); border-bottom: var(--line); isolation: isolate; } /* The ::before dot screen is drawn by catalog.css, grouped with .category-cover::before -- the two blocks were byte-identical. */ .pick-cover-copy { max-width: 1220px; width: 100%; margin-inline: auto; } .pick-step { margin: 0 0 10px; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .pick-step:empty { display: none; } .pick-cover h1 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.67rem, 10.12vw, 5.7rem); font-weight: 400; line-height: .9; letter-spacing: 0; text-transform: uppercase; } /* Focus lands here on every step. The site ring is for controls; a headline taking it would look like a button. */ .pick-cover h1:focus { outline: none; } .pick-cover h1:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 10px; } .pick-mascot { position: relative; z-index: 1; order: -1; justify-self: end; width: min(34vw, 140px); transform: rotate(5deg); filter: drop-shadow(10px 13px 0 var(--ink)); } .pick-mascot img { width: 100%; max-height: 200px; object-fit: contain; } .pick-mascot span { position: absolute; z-index: 2; left: -48px; top: 14px; padding: 12px 14px 9px; color: #fff; background: var(--ink); border: 3px solid #fff; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .08em; transform: rotate(-10deg); } /* --- the questions ------------------------------------------------------ */ .pick-body { padding: 32px 16px 80px; background: linear-gradient(90deg, transparent 0 49.7%, rgba(17,16,21,.08) 49.8% 50.2%, transparent 50.3%), var(--paper); } #pickMount { max-width: 1220px; margin-inline: auto; } .pick-form { margin: 0; } .pick-options { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; } .pick-option { /* Big enough for a thumb from across the counter: the whole card is the target, and 68px is what the checkout's submit already uses. */ min-height: 68px; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 18px 20px; color: var(--ink); border: var(--line); background: #fff; box-shadow: 5px 5px 0 var(--ink); transition: transform 120ms ease, box-shadow 120ms ease; } .pick-option strong { font-family: var(--font-display); font-size: clamp(1.66rem, 5.52vw, 2.21rem); font-weight: 400; line-height: 1; text-transform: uppercase; } .pick-option small { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5e5861; } .pick-option:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); } .pick-option:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); } /* A pressed one is the answer already on the URL, shown when Back brings the question up again. Filled so it reads at arm's length, like a pressed chip. */ .pick-option[aria-pressed="true"] { color: var(--paper); background: var(--ink); } .pick-option[aria-pressed="true"] small { color: var(--paper); opacity: .8; } .pick-nav { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 28px 0 0; } .pick-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } /* --- the results -------------------------------------------------------- */ .pick-results { display: grid; gap: 22px; } .pick-results .catalog-stack { width: 100%; } .pick-see-all { display: inline-flex; gap: 24px; align-items: center; min-height: 50px; padding: 0 18px; color: #fff; background: var(--ink); border: var(--line); box-shadow: 5px 5px 0 var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .pick-see-all:hover { color: var(--ink); background: var(--accent); box-shadow: 5px 5px 0 var(--ink); } .pick-results .pick-nav { margin-top: 4px; } /* --- one step to the next ----------------------------------------------- */ .pick-enter { animation: pick-enter 220ms ease-out both; } @keyframes pick-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pick-enter { animation: none; } .pick-option { transition: none; } } @media (min-width: 760px) { .pick-cover { grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 300px; padding: 40px clamp(28px, 5vw, 72px) 44px; } .pick-cover-copy { margin-inline: 0; } .pick-mascot { order: 0; width: min(22vw, 220px); align-self: end; } .pick-mascot img { max-height: 300px; } .pick-body { padding: 44px clamp(28px, 5vw, 72px) 110px; } .pick-options { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pick-option { min-height: 120px; align-content: end; } .pick-results .catalog-stack.is-condensed { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } } /* --- the shuffle ---------------------------------------------------------- * * A toy that sits beside a form, and everything here is about it not competing * with one. The three questions are the page; this is the way past them. */ /* Under the first question's options, set as an aside rather than a fourth option. It must not be a .pick-option -- a fourth big white card would read as a fourth answer to "how do you want it", which it is not. */ .pick-shuffle-offer { margin: 22px 0 0; text-align: center; } .pick-shuffle-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .pick-shuffle-link:hover, .pick-shuffle-link:focus-visible { text-decoration-thickness: 4px; } /* The result page's own subtitle. It says the throw was random, on purpose: a toy that lets somebody believe it is a recommendation engine is a toy they stop trusting the second time. */ .pick-shuffle-note { margin: 0 0 22px; color: #5e5861; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* Throw again. This one IS the loud control -- it is the whole point of the page it is on -- so it takes the option card's slab shadow and its press. */ .pick-shuffle-again { margin: 26px 0 0; min-height: 60px; padding: 16px 28px; color: var(--paper); background: var(--ink); border: var(--line); box-shadow: 5px 5px 0 var(--brand, #877ebc); font-family: var(--font-display); font-size: clamp(1.3rem, 4.2vw, 1.72rem); font-weight: 400; line-height: 1; text-transform: uppercase; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .pick-shuffle-again:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--brand, #877ebc); } .pick-shuffle-again:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--brand, #877ebc); } @media (prefers-reduced-motion: reduce) { .pick-shuffle-again { transition: none; } }