* { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: #ffffff; color: #000000; font-family: "Courier New", Courier, monospace; font-weight: 400; -webkit-font-smoothing: antialiased; height: 100%; } /* body is a flex column so the shared header/footer sit outside the views and the active view stretches to fill the viewport (replaces the old per-view min-height: 100vh, which would now overflow by the header height) */ body { display: flex; flex-direction: column; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ================= VIEW SWITCHING ================= */ /* Exactly one view is visible at a time, driven by the class on (set by showView() in app.js). The header is shared and always visible; the footer is hidden on home, matching the original full-viewport hero. */ #home-view, #shop-view, #journey-view, #info-view, #detail-view, #cart-view, #thanks-view { display: none; } body.view-home #home-view { display: flex; } body.view-shop #shop-view { display: block; } body.view-journey #journey-view { display: block; } body.view-info #info-view { display: block; } body.view-detail #detail-view { display: block; } body.view-cart #cart-view { display: block; } body.view-thanks #thanks-view { display: block; } body.view-home footer { display: none; } /* ================= HEADER ================= */ header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px; position: relative; z-index: 10; color: #000000; border-bottom: 1px solid #000000; } .brand { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; } nav { display: flex; gap: 24px; } nav a { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } nav a:hover { text-decoration: underline; } @media (max-width: 500px) { header { flex-direction: column; gap: 14px; } nav { gap: 16px; } } /* ================= HOME / HERO ================= */ #home-view { position: relative; flex: 1 0 auto; flex-direction: column; background: #ffffff; } /* ================= MARQUEE KARUSEL ================= */ .carousel-wrap { position: relative; z-index: 5; flex: 1; display: flex; align-items: center; overflow: hidden; touch-action: pan-y; /* horizontal gestures are ours, vertical scrolls the page */ padding: 2px 0; } /* The marquee is a CSS animation because the compositor runs it on the GPU and it stays perfectly smooth. Dragging is layered on top by app.js: during a drag the animation is switched off and a transform is set directly, then the animation is restarted with a negative delay so it picks up from wherever the finger let go. */ .carousel-track { display: flex; gap: 16px; width: max-content; animation: marquee 40s linear infinite; will-change: transform; } .carousel-track.paused { animation-play-state: paused; } /* set while dragging — no animation, app.js owns the transform */ .carousel-track.dragging { animation: none; cursor: grabbing; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .carousel-card { flex: 0 0 auto; width: 360px; background: #ffffff; border: 1px solid #000000; user-select: none; cursor: pointer; } .carousel-card img { width: 100%; height: 440px; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } .carousel-card .carousel-name { padding: 14px 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid #000000; background: #ffffff; /* Room for two lines whether the name needs them or not. Without this, a name that wraps makes its card taller than the rest, and since the cards are vertically centred one of them ends up on a half pixel — which shows as a top border drawn at half thickness. Equal heights, equal borders. */ line-height: 1.35; min-height: calc(2 * 1.35em + 28px); display: flex; align-items: center; } @media (max-width: 900px) { .carousel-card { width: 280px; } .carousel-card img { height: 340px; } } @media (max-width: 600px) { .carousel-card { width: 220px; } .carousel-card img { height: 270px; } } .hero-hint { position: relative; z-index: 5; color: #000000; text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 20px 24px 32px; border-top: 1px solid #000000; } /* ================= SHOP VIEW (grid of all products) ================= */ #shop-view { flex: 1 0 auto; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Cards only draw their right and bottom edges, so neighbours share a single line instead of doubling up. That leaves the outer left and top edges of the grid undrawn — most visible on mobile, where one column means every card is missing its left side. The grid closes them here. */ border-top: 1px solid #000000; border-left: 1px solid #000000; } @media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .shop-grid { grid-template-columns: 1fr; } } .shop-card { border-right: 1px solid #000000; border-bottom: 1px solid #000000; cursor: pointer; } .shop-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .shop-card-info { padding: 12px 14px 16px; } .shop-card-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .shop-card-price { font-size: 12px; margin-top: 4px; } /* ================= PRODUCT DETAIL VIEW ================= */ #detail-view { flex: 1 0 auto; } .back-link { display: inline-block; padding: 20px 24px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .back-link:hover { text-decoration: underline; } .detail-layout { display: grid; grid-template-columns: 420px 1fr; gap: 48px; padding: 24px; align-items: start; } @media (max-width: 850px) { .detail-layout { grid-template-columns: 1fr; gap: 24px; } } /* --- main image (smaller, single, no switching below it) --- */ .detail-gallery { display: flex; flex-direction: column; } .detail-main-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #000000; display: block; } /* --- info panel: view-angle thumbnails live here, right above the buy button --- */ .detail-info { display: flex; flex-direction: column; } .detail-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .detail-thumbs img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #000000; cursor: pointer; opacity: 0.45; } .detail-thumbs img.active { opacity: 1; } .detail-name { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .detail-price { font-size: 16px; margin-top: 8px; } .detail-description { font-size: 13px; line-height: 1.5; margin-top: 16px; color: #333333; } .detail-section-label { margin-top: 28px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .size-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .size-btn { border: 1px solid #000000; background: #ffffff; color: #000000; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; } .size-btn.selected { background: #000000; color: #ffffff; } .size-btn.sold-out { color: #aaaaaa; border-color: #aaaaaa; text-decoration: line-through; cursor: not-allowed; background: #ffffff; } .color-options { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; } .color-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; padding: 0; } .color-swatch .dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #000000; box-sizing: border-box; } .color-swatch.selected .dot { outline: 2px solid #000000; outline-offset: 3px; } .color-swatch .color-label { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .buy-btn { font-family: inherit; margin-top: 32px; display: block; width: 100%; padding: 16px 0; text-align: center; background: #000000; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid #000000; cursor: pointer; } .buy-btn:hover { background: #ffffff; color: #000000; } .buy-btn:disabled { cursor: default; background: #ffffff; color: #000000; } .detail-note { margin-top: 16px; font-size: 12px; color: #555555; } /* ================= CART VIEW ================= */ #cart-view { flex: 1 0 auto; } .cart-content { max-width: 900px; margin: 0 auto; padding: 0 24px 64px; } .cart-title { font-size: 22px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 24px; } .cart-empty { padding: 32px 0; font-size: 14px; border-top: 1px solid #000000; } .cart-line { display: grid; grid-template-columns: 72px 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid #000000; } .cart-line img { width: 72px; height: 72px; object-fit: cover; border: 1px solid #000000; } .cart-line-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cart-line-variant { font-size: 12px; color: #555555; margin-top: 4px; } .cart-line-unit { font-size: 12px; color: #555555; margin-top: 4px; } .cart-qty { display: flex; align-items: center; border: 1px solid #000000; } .cart-qty button { width: 28px; height: 28px; background: #ffffff; border: none; cursor: pointer; font-size: 14px; line-height: 1; } .cart-qty button:hover { background: #000000; color: #ffffff; } .cart-qty button:disabled { color: #aaaaaa; cursor: default; background: #ffffff; } .cart-qty-value { min-width: 28px; text-align: center; font-size: 13px; } .cart-line-total { font-size: 13px; font-weight: 700; min-width: 76px; text-align: right; } .cart-remove { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; } .cart-remove:hover { background: #000000; color: #ffffff; } .cart-summary { border-top: 1px solid #000000; padding-top: 24px; margin-top: 8px; } .cart-subtotal-row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cart-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid #000000; } .cart-zone-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; } .cart-zone-select { font-family: inherit; font-size: 13px; width: 100%; padding: 10px; background: #ffffff; border: 1px solid #000000; border-radius: 0; cursor: pointer; } .cart-shipping-row { margin-top: 16px; font-weight: 400; } .cart-total-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid #000000; font-size: 16px; } .cart-shipping-note { font-size: 12px; color: #555555; margin-top: 8px; } .checkout-btn { font-family: inherit; margin-top: 24px; display: block; width: 100%; padding: 16px 0; text-align: center; background: #000000; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid #000000; cursor: pointer; } .checkout-btn:hover { background: #ffffff; color: #000000; } .checkout-btn:disabled { cursor: default; background: #ffffff; color: #000000; } .checkout-error { display: none; margin-top: 12px; padding: 12px; border: 1px solid #000000; font-size: 12px; } @media (max-width: 600px) { .cart-line { grid-template-columns: 56px 1fr auto; grid-template-areas: "img info remove" "img qty total"; row-gap: 10px; } .cart-line img { grid-area: img; width: 56px; height: 56px; } .cart-line-info { grid-area: info; } .cart-qty { grid-area: qty; justify-self: start; } .cart-line-total { grid-area: total; } .cart-remove { grid-area: remove; justify-self: end; } } /* ================= THANK YOU VIEW ================= */ /* Styled as a paper receipt: the one piece of the site that gets to feel like an object rather than a page. Same brutalist rules — black on white, hard lines, Courier — just arranged like something you'd find in the box. */ #thanks-view { flex: 1 0 auto; } .thanks-content { max-width: 560px; margin: 0 auto; padding: 48px 24px 80px; } .thanks-receipt { position: relative; border: 1px solid #000000; padding: 40px 32px 32px; background: #ffffff; } .thanks-title { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 12px; } .thanks-subtitle { font-size: 14px; letter-spacing: 0.04em; margin-bottom: 28px; } /* Perforation, the way a receipt tears */ .thanks-rule { border-top: 1px dashed #000000; margin: 24px 0; } .thanks-steps-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; } .thanks-steps { list-style: none; font-size: 13px; line-height: 1.6; } .thanks-steps li { display: flex; gap: 12px; margin-bottom: 14px; } .thanks-steps li:last-child { margin-bottom: 0; } .thanks-num { flex: 0 0 auto; font-weight: 700; } .thanks-note { font-size: 13px; line-height: 1.6; color: #555555; } .thanks-signoff { margin-top: 28px; text-align: right; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; } .thanks-btn { font-family: inherit; margin-top: 24px; display: block; width: 100%; padding: 16px 0; text-align: center; background: #000000; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid #000000; cursor: pointer; } .thanks-btn:hover { background: #ffffff; color: #000000; } @media (max-width: 600px) { .thanks-content { padding: 32px 16px 56px; } .thanks-receipt { padding: 32px 20px 24px; } .thanks-title { font-size: 32px; } } /* ================= THE JOURNEY VIEW ================= */ #journey-view { flex: 1 0 auto; } .journey-content { max-width: 780px; margin: 0 auto; padding: 48px 24px 24px; } .journey-title { font-size: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 32px; } .journey-intro { font-size: 15px; line-height: 1.6; font-style: italic; margin-bottom: 40px; } .journey-entry { margin-bottom: 56px; } .journey-heading { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; } .journey-text { font-size: 13px; line-height: 1.6; font-style: italic; margin-bottom: 16px; color: #333333; } .journey-img-link { display: block; position: relative; cursor: pointer; } .journey-entry img { width: 100%; display: block; } .play-badge { position: absolute; top: 12px; right: 12px; background: #ffffff; border: 1px solid #000000; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; } .journey-caption { font-size: 12px; font-style: italic; color: #555555; margin-top: 10px; } .journey-signoff { margin-top: 48px; font-size: 13px; line-height: 1.6; } .journey-signoff strong { display: block; margin-top: 6px; font-style: italic; } /* ================= INFO VIEW (shipping, returns) ================= */ #info-view { flex: 1 0 auto; } .info-content { max-width: 780px; margin: 0 auto; padding: 48px 24px 24px; } .info-title { font-size: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 32px; } .info-section { margin-bottom: 48px; } .info-section-title { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; border-bottom: 1px solid #000000; padding-bottom: 8px; } .info-text { font-size: 13px; line-height: 1.6; color: #333333; } .info-placeholder-note { font-size: 12px; color: #999999; font-style: italic; } footer { padding: 24px; border-top: 1px solid #000000; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; display: flex; justify-content: space-between; background: #ffffff; } @media (max-width: 500px) { footer { flex-direction: column; gap: 8px; } }