/* The shop page, wearing the Nova design. * * Loaded after nova.css and only by /shop/, so it inherits every Nova token * and adds nothing to the weight of the landing page. Nothing here invents a * palette: every tile uses --gold / --gold-mid, and every panel sits on * --panel over --void like the rest of the site. Crownfall has one currency, * so there is no second accent colour here for a second one. * * CF-540 rewrote the layout. What changed and why: * * - The catalogue is four tabs rather than four stacked sections, so a * visitor comparing two gold packs never scrolls past seven other * products to do it. The tab strip is sticky under the header, so * changing tab is never a scroll either. * - Tiles are rows, not posters. The art slot went from 168px to 56-64px * and the text moved beside it instead of under it. The previous tile was * roughly a phone screen tall; three of these fit in one. * - Every tile carries a quantity stepper and an add control, and there is * a basket docked to the bottom of the viewport. See shop.js and the * comment above the basket markup for the hard rule: it is a list in the * visitor's own browser, it is posted nowhere, and it must never grow a * field that takes a payment detail. * * The shop is not open. There is still no "buy" style in this file: the add * control is a basket control, and when a real checkout exists its button * gets its own state here rather than this one being quietly repurposed. */ .shop-page { --bar-top: 82px; padding-top: clamp(104px, 12vw, 148px); padding-bottom: clamp(56px, 8vw, 96px); } /* Room for the docked basket, which overlays the end of the page. Set by * shop.js on only once the basket has something in it, so a page with * an empty basket carries no dead space at the bottom. */ body.has-basket .shop-page { padding-bottom: clamp(160px, 20vw, 220px); } /* ---------- Intro ---------- */ .shop-intro { max-width: 860px; margin-inline: auto; padding-bottom: clamp(1.6rem, 4vw, 2.6rem); text-align: center; } .shop-intro .overline { display: inline-flex; align-items: center; } /* Deliberately smaller than the landing page's h1. This page is a shelf and * the visitor came to read it, so the title takes a third of the screen * rather than all of it. */ .shop-intro h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5rem); } .shop-lede { max-width: 620px; margin: 1.2rem auto 0; color: #d5e1ed; font-size: clamp(.94rem, 1.2vw, 1.05rem); line-height: 1.6; } .shop-intro .status-strip { justify-content: center; margin: 1.4rem 0 0; } /* ---------- Tabs ---------- * * Sticky under the fixed header. Without scripting the strip is inert and * every panel is open, which is why the tab buttons carry no styling that * implies a closed panel until shop.js marks the strip live. */ .tabstrip { position: sticky; top: var(--bar-top); z-index: 40; display: flex; gap: .4rem; margin: 0 0 clamp(1.4rem, 3vw, 2rem); padding: .45rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 11, 24, .92); backdrop-filter: blur(18px); overflow-x: auto; scrollbar-width: none; } .tabstrip::-webkit-scrollbar { display: none; } .tab { flex: 1 1 auto; min-height: 46px; padding: 0 .9rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #cfe0f0; font-family: var(--display); font-size: 1.02rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; } .tab:hover { color: var(--ink); background: rgba(69, 210, 255, .08); } .tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Only applied once the strip is live, so a no-script page never shows one * tab as chosen while all four panels are open. */ .tabstrip.is-live .tab[aria-selected="true"] { border-color: rgba(217, 168, 62, .55); background: rgba(217, 168, 62, .14); color: var(--gold); } .tabpanel { padding: 0 0 clamp(1.2rem, 3vw, 2rem); } .tabpanel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; } /* With scripting off the four panels stack, so they need a rule between * them. With scripting on only one is ever in the document flow and the * sibling selector never matches. */ .tabpanel + .tabpanel { padding-top: clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid rgba(238, 192, 103, .12); } .panel-title { margin: 0 0 .5rem; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; } .panel-lede { max-width: 760px; margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem); color: var(--muted); font-size: .92rem; line-height: 1.6; } .panel-note { max-width: 760px; margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0; padding: .95rem 1.1rem; border-left: 2px solid var(--gold-mid); border-radius: 0 7px 7px 0; background: rgba(6, 16, 31, .55); color: #8fa4ba; font-size: .85rem; line-height: 1.65; } .panel-note strong { color: var(--gold); } /* ---------- Tile grid ---------- */ .shop-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(.7rem, 1.4vw, 1rem); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .shop-tile { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-content: start; padding: 1.05rem 1.1rem 1rem; border: 1px solid rgba(238, 192, 103, .2); background: linear-gradient(165deg, rgba(30, 24, 14, .5), rgba(6, 18, 34, .78)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: border-color .25s ease, box-shadow .25s ease; } .shop-tile::after { position: absolute; left: 1.1rem; right: 1.1rem; top: 0; height: 1px; content: ""; background: linear-gradient(90deg, var(--gold-mid), transparent 78%); } .shop-tile:hover { border-color: rgba(238, 192, 103, .4); box-shadow: 0 16px 30px rgba(0, 0, 0, .28); } .shop-tile.is-added { border-color: rgba(69, 210, 255, .5); } /* ---------- Tile art ---------- * * The art slot is a fixed box and the illustration is fitted into it, because * the marks are drawn separately from this page and nothing here knows what * viewBox any of them will arrive with. Both dimensions are given the same * explicit length -- not a percentage -- since a percentage height against a * grid item is indefinite, and an SVG with no intrinsic size then falls back * to its own default and spills out of the tile. That is exactly what * happened the first time this was rendered against a real file. * * CF-540 shrank it from 168px to 64px. Karl: "instead of one per full screen, * less than that." */ .tile-art { --art-h: 64px; position: relative; width: var(--art-h); height: var(--art-h); display: grid; place-items: center; } .tile-art img { position: relative; z-index: 1; width: 100%; height: var(--art-h); object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); } .tile-art::before { position: absolute; inset: 50% auto auto 50%; width: 74px; height: 74px; content: ""; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(217, 168, 62, .2), transparent 66%); } /* Artwork missing. shop.js sets this when an fails, so a file that has * not landed yet degrades to a marked plate rather than a broken-image icon. * The alt text is promoted to visible text, so the tile still says what it is. */ .tile-art.is-artless img { display: none; } .tile-art.is-artless { border: 1px dashed rgba(238, 192, 103, .3); border-radius: 8px; background: rgba(6, 16, 31, .5); } .tile-art.is-artless::before { display: none; } .tile-art.is-artless .art-fallback { max-width: 92%; color: #8ea3b9; font-size: .48rem; font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-align: center; text-transform: uppercase; } /* ---------- Tile text ---------- */ .tile-body { min-width: 0; } .tile-title { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; } .tile-grant { margin: 0 0 .45rem; color: var(--gold); font-family: var(--display); font-size: .95rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* The free rename is the reason that product exists, so it is the one grant * line that gets a rule around it rather than sitting in the same gold as a * quantity of coins. */ .tile-grant-free { display: inline-block; padding: .18rem .6rem; border: 1px solid rgba(69, 210, 255, .45); border-radius: 999px; color: #9de6ff; font-size: .68rem; letter-spacing: .14em; } .tile-copy { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; } .tile-caveat { margin: .6rem 0 0; color: #7d92a8; font-size: .78rem; font-style: italic; line-height: 1.5; } /* ---------- Tile buy row ---------- */ .tile-buy { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; padding-top: .85rem; border-top: 1px solid rgba(238, 192, 103, .16); } .tile-price { margin: 0; margin-right: auto; } .price-value { color: var(--ink); font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; } /* Not an error state. The price genuinely has not been decided, and the tile * has to say so in a way that reads as a deliberate blank rather than a value * that failed to load. */ .price-unset { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px dashed rgba(217, 168, 62, .45); border-radius: 999px; color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .price-unset::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--gold-mid); } /* The whole tile is "not yet on sale", so this repeats on every one of them * and is sized as a footnote rather than a badge. It takes a full row at the * end of the buy row so it sits under the controls at every width. */ .tile-state { flex: 1 0 100%; margin: .1rem 0 0; color: #7d92a8; font-size: .55rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } /* ---------- Quantity ---------- * * 44px on both steppers and the field, because this is the one control on the * site a person will use repeatedly with a thumb. The number input keeps its * type so a phone raises the numeric keypad, and loses its spinners so the * two explicit buttons are the only way up and down at a touch size. */ .qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 7px; background: var(--void); overflow: hidden; } .qty-step { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--gold); font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease; } .qty-step:hover { background: rgba(217, 168, 62, .14); } .qty-step[disabled] { color: #4a5b6e; cursor: default; background: transparent; } .qty-step:focus-visible, .qty-input:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; } .qty-input { width: 46px; min-height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--display); font-size: 1.05rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tile-add { min-height: 44px; padding: 0 1rem; border: 1px solid rgba(217, 168, 62, .55); border-radius: 7px; background: rgba(217, 168, 62, .12); color: var(--gold); font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .tile-add:hover { background: rgba(217, 168, 62, .22); border-color: var(--gold-mid); } .tile-add:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .tile-add.is-done { border-color: rgba(69, 210, 255, .6); background: rgba(69, 210, 255, .14); color: #9de6ff; } /* ---------- The basket ---------- * * Docked to the bottom of the viewport rather than placed at the end of the * page, because the whole point of the rebuild was that a person deciding * what to buy should never have to scroll to find out what they have already * chosen. Hidden entirely until something is in it. */ .basket { position: fixed; inset: auto 0 0; z-index: 90; display: flex; flex-direction: column; } .basket[hidden] { display: none; } .basket-bar { border-top: 1px solid rgba(238, 192, 103, .35); background: rgba(4, 11, 24, .95); backdrop-filter: blur(20px); box-shadow: 0 -12px 34px rgba(0, 0, 0, .45); } .basket-bar-inner { min-height: 66px; display: flex; align-items: center; gap: 1rem; padding-block: .7rem; padding-bottom: max(.7rem, env(safe-area-inset-bottom)); } .basket-toggle { min-height: 46px; display: inline-flex; align-items: center; gap: .7rem; padding: 0 1.1rem; border: 1px solid rgba(217, 168, 62, .55); border-radius: 7px; background: rgba(217, 168, 62, .14); color: var(--gold); font-family: var(--display); font-size: 1.05rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .basket-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .basket-count { min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 .35rem; border-radius: 999px; background: var(--gold); color: #140c02; font-family: var(--sans); font-size: .78rem; font-variant-numeric: tabular-nums; } .basket-sum { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; } .basket-sum b { color: var(--ink); font-variant-numeric: tabular-nums; } .basket-panel { max-height: min(58vh, 480px); overflow-y: auto; border-top: 1px solid var(--line); background: rgba(4, 11, 24, .97); backdrop-filter: blur(20px); } .basket-panel[hidden] { display: none; } .basket-inner { padding-block: 1.1rem 1.3rem; } .basket-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .basket-heading { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; } .basket-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 7px; background: rgba(6, 16, 31, .7); color: var(--gold); font-size: 1.4rem; line-height: 1; cursor: pointer; } .basket-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .basket-list { margin: 1rem 0 0; padding: 0; list-style: none; } .basket-line { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid rgba(160, 186, 213, .13); } .basket-line-name { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: .92rem; } .basket-line-name small { display: block; color: #7d92a8; font-size: .72rem; } .basket-line-price { color: var(--gold); font-family: var(--display); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .basket-line-price.is-unset { color: #7d92a8; font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: normal; text-align: right; max-width: 8.5rem; } .basket-line-remove { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: #9fb2c9; font-size: 1.1rem; line-height: 1; cursor: pointer; } .basket-line-remove:hover { color: var(--gold); border-color: var(--gold-mid); } .basket-line-remove:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .basket-totals { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(238, 192, 103, .25); color: var(--ink); font-size: .95rem; line-height: 1.6; } .basket-totals b { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; } /* The honest half of the basket, and it is not fine print: it is the same * size as the rest of the panel. */ .basket-truth { margin: .8rem 0 0; color: #8fa4ba; font-size: .85rem; line-height: 1.65; } .basket-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.1rem; } .basket-clear { min-height: 44px; padding: 0 1rem; border: 1px solid rgba(160, 186, 213, .25); border-radius: 7px; background: transparent; color: #9fb2c9; font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .basket-clear:hover { color: var(--ink); border-color: rgba(160, 186, 213, .5); } .basket-clear:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ---------- The line ---------- */ .shop-section { padding-block: clamp(2.4rem, 6vw, 4rem); } .shop-section .section-heading h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); } .never-list { margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .never-list li { padding: 1.1rem 1.2rem; border: 1px solid rgba(160, 186, 213, .16); border-radius: 8px; background: rgba(5, 14, 28, .5); color: var(--muted); font-size: .86rem; line-height: 1.6; } .never-list strong { display: block; margin-bottom: .3rem; color: var(--gold); } .never-note { max-width: 660px; margin: 1.4rem 0 2rem; color: #8fa4ba; font-size: .9rem; line-height: 1.7; } /* ---------- Narrow ---------- */ @media (max-width: 740px) { .shop-page { --bar-top: 70px; } .shop-intro { text-align: left; } .shop-intro .status-strip { justify-content: flex-start; } .shop-lede { margin-inline: 0; } .tab { flex: 0 0 auto; font-size: .95rem; } .shop-grid { grid-template-columns: 1fr; } .shop-tile { padding: .95rem 1rem; } .tile-art { --art-h: 56px; } .tile-art::before { width: 64px; height: 64px; } .basket-panel { max-height: 62vh; } .basket-bar-inner { flex-wrap: wrap; gap: .5rem .8rem; } .basket-sum { flex-basis: 100%; order: 3; font-size: .74rem; } .shop-closing .button { width: 100%; justify-content: center; } } /* The buy row wraps rather than squeezes: a 44px target that has been * compressed to fit is not a 44px target. */ @media (max-width: 400px) { .tile-price { margin-right: 0; flex: 1 0 100%; } .tile-add { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .shop-tile, .tab, .tile-add, .qty-step { transition: none; } }