| 1 | .store { width: var(--container); margin-inline: auto; padding-block: var(--section-pad) var(--section-gap); } |
| 2 | .hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } |
| 3 | .heroMedia { margin: 0; min-width: 0; } |
| 4 | .heroMedia figcaption { margin-block-start: 1rem; } |
| 5 | .heroArt, .art { display: block; width: 100%; height: auto; border-radius: var(--radius-surface); } |
| 6 | .heroText { display: grid; gap: 1.4rem; align-content: center; } |
| 7 | .heroText h1 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); max-width: 12ch; line-height: 1.04; margin: 0; } |
| 8 | .heroText p { max-width: 42ch; color: var(--muted); } |
| 9 | .heroText .actions { display: flex; flex-wrap: wrap; gap: 1rem; } |
| 10 | .heroText a { justify-self: start; } |
| 11 | .price { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } |
| 12 | .section { margin-block-start: var(--section-gap); scroll-margin-top: 6rem; } |
| 13 | .sectionHead { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; margin-block-end: 2rem; } |
| 14 | .sectionHead p { color: var(--muted); max-width: 48ch; } |
| 15 | .sectionHead h2 { max-width: 24ch; font-size: var(--text-section); } |
| 16 | .tableScroll { overflow-x: auto; border-block: 1px solid var(--line); margin-block-end: 1.4rem; } |
| 17 | .tableScroll:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } |
| 18 | .lineupTable { width: 100%; min-width: 36rem; border-collapse: collapse; line-height: 1.6; } |
| 19 | .lineupTable caption { text-align: start; padding-block: 1rem; font-weight: 600; } |
| 20 | .lineupTable :is(th, td) { text-align: start; vertical-align: top; padding: 1rem 1.2rem 1rem 0; border-block-end: 1px solid var(--line); } |
| 21 | .lineupTable td { color: var(--muted); } |
| 22 | .lineupTable tbody tr:last-child :is(th, td) { border-block-end: 0; } |
| 23 | .archive { border-block: 1px solid var(--line); padding-block: 1.4rem; } |
| 24 | .archive summary { cursor: pointer; font-weight: 600; padding-block: .5rem; } |
| 25 | .archive summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } |
| 26 | .archive > p { margin-block-start: 1rem; } |
| 27 | .designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } |
| 28 | .design { min-width: 0; } |
| 29 | .corePrint { aspect-ratio: 4 / 3; object-fit: contain; padding: 2rem; background: var(--panel); } |
| 30 | .design h3 { font-size: var(--text-title); margin-block: 1.2rem .4rem; } |
| 31 | .design p { color: var(--muted); margin-block-end: 1rem; } |
| 32 | .design button { margin-top: .5rem; } |
| 33 | .selected { color: var(--accent); font-weight: 600; } |
| 34 | .note { color: var(--muted); font-size: var(--text-ui); line-height: 1.6; max-width: 65ch; } |
| 35 | .notice { padding-block: .9rem; color: var(--muted); border-block: 1px solid var(--line); line-height: 1.6; } |
| 36 | .heroText .preparing { color: var(--text); font-weight: 600; border-block: 1px solid var(--line); padding-block: 1rem; } |
| 37 | .contributor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; border-block: 1px solid var(--line); padding-block: 2.5rem; } |
| 38 | .contributor h2 { font-size: var(--text-section); margin-block-end: 1rem; } |
| 39 | .contributor p { color: var(--muted); max-width: 50ch; margin-block-end: 1.2rem; } |
| 40 | .contributor .art { max-height: 22rem; object-fit: contain; } |
| 41 | .contributorPrint { margin: 0; display: grid; justify-items: center; gap: .65rem; padding: 3rem 1.5rem; border: 1px solid var(--ocean-line); border-radius: var(--radius-surface); background: var(--ocean-floor); color: var(--on-brand); text-align: center; } |
| 42 | .contributorPrint img { filter: brightness(0) invert(1); } |
| 43 | .contributorPrint p { color: inherit; font-size: var(--text-section); margin: 1rem 0; } |
| 44 | .contributorPrint span { font-size: var(--text-ui); } |
| 45 | .contributorPrint figcaption { margin-block-start: 1rem; color: var(--ocean-line-strong); } |
| 46 | .seasonal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; } |
| 47 | .seasonal h2 { font-size: var(--text-section); margin-block-end: 1rem; } |
| 48 | .seasonal p { color: var(--muted); max-width: 48ch; margin-block: 1rem; } |
| 49 | .deskItems { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-inline-start: 1.2rem; margin-block: 1rem; } |
| 50 | .laterGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } |
| 51 | .laterGrid h3 { margin-block: 1rem .3rem; } |
| 52 | .laterGrid .art { aspect-ratio: 1.3; object-fit: contain; background: var(--panel); } |
| 53 | .delivery { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); border-block-start: 1px solid var(--line); padding-block-start: 2.5rem; } |
| 54 | .delivery h2 { font-size: var(--text-section); margin-block-end: 1rem; } |
| 55 | .deliverySummary p { margin-block: 1rem; } |
| 56 | .deliverySummary .art { margin-block: 1.5rem; } |
| 57 | .checkout { min-width: 0; } |
| 58 | .store :global(.btn), .checkout :global(.btn) { min-height: 48px; white-space: normal; text-align: center; } |
| 59 | .checkout form { display: grid; gap: 1rem; } |
| 60 | .checkout fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; } |
| 61 | .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } |
| 62 | .field { display: grid; gap: .45rem; min-width: 0; } |
| 63 | .field label { font-weight: 600; font-size: var(--text-ui); } |
| 64 | .field input, .field select { min-width: 0; width: 100%; min-height: 48px; padding: .75rem .85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; caret-color: var(--accent); } |
| 65 | .field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } |
| 66 | .field input::placeholder { color: var(--muted); opacity: 1; } |
| 67 | .checkout :is(button, a):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } |
| 68 | .checkout button { justify-self: start; } |
| 69 | .checkout button:disabled { cursor: not-allowed; opacity: .65; } |
| 70 | .checkout fieldset:disabled { opacity: .7; } |
| 71 | .error { color: var(--danger); line-height: 1.6; } |
| 72 | .quote { margin-block-start: 1.6rem; padding-block-start: 1.6rem; border-top: 1px solid var(--line-strong); } |
| 73 | .quote h3 { font-size: var(--text-title); margin-block-end: .75rem; } |
| 74 | .quote dl { margin-block: 1rem; } |
| 75 | .quote dl div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .75rem; border-bottom: 1px solid var(--line); } |
| 76 | .quote dd { margin: 0; font-variant-numeric: tabular-nums; text-align: end; } |
| 77 | .quote .total { font-weight: 650; font-size: var(--text-title); border-bottom: 0; } |
| 78 | .back { display: inline-block; margin-block: 1rem 0; } |
| 79 | .store ::selection, .checkout ::selection { color: var(--on-brand); background: var(--accent); } |
| 80 | @media (max-width: 900px) { .hero { grid-template-columns: 1.1fr 1fr; } .designs { gap: 1.3rem; } .sectionHead { display: block; } .sectionHead p { margin-top: 1rem; } } |
| 81 | @media (max-width: 700px) { .hero, .contributor, .seasonal, .delivery { grid-template-columns: 1fr; gap: 1.5rem; } .heroText { grid-row: 1; } .heroText h1 { max-width: 17ch; } .designs, .laterGrid { grid-template-columns: 1fr; gap: 2.5rem; } .design .art { max-height: 25rem; object-fit: contain; } .contributor .art { max-height: 18rem; } .pair { grid-template-columns: 1fr; } .section { margin-block-start: 3.5rem; } } |
| 82 | @media (prefers-reduced-motion: reduce) { .store *, .checkout * { transition-duration: 0s !important; scroll-behavior: auto !important; } } |
| 83 |