/* ============================================================ TYPOGRAPHY — custom properties (live-tweakable via dat.GUI) ============================================================ */ :root { --fg: #C2C2C2; --muted: #C2C2C2; --font-brand-family: "Inter Tight", system-ui, sans-serif; --font-brand-size: 12px; --font-brand-spacing: 0.05em; --font-brand-weight: 500; --font-ui-family: sans-serif; --font-gooey-size: 12px; --font-gooey-spacing: 0.6px; --font-gooey-weight: 500; --font-desc-size: 14px; --font-desc-lh: 20px; --font-desc-weight: 500; --font-cart-size: 12px; --font-ascii-family: monospace; --font-ascii-color: #ffffff; } /* ─── kill switch: add .no-transitions to via URL ?transitions=off or console toggleTransitions() ─── */ html.no-transitions *, html.no-transitions *::before, html.no-transitions *::after { transition: none !important; animation: none !important; animation-duration: 0s !important; } html.no-transitions::view-transition-group(root), html.no-transitions::view-transition-old(root), html.no-transitions::view-transition-new(root), html.no-transitions::view-transition-group(netzwerk-brand), html.no-transitions::view-transition-old(netzwerk-brand), html.no-transitions::view-transition-new(netzwerk-brand) { animation: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; border: none; background: none; font-family: var(--font-ui-family); } body { background: #fff; min-height: 100vh; } .page { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .col-left { display: flex; flex-direction: column; } .product-image { width: 100%; background: #f4f4f4; display: flex; align-items: center; justify-content: center; padding: 60px 0; } .col-right { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; gap: 49px; } .states { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; } .description { width: 292px; padding: 20px; font-size: var(--font-desc-size); color: rgba(193,193,193,0.76); text-align: center; line-height: var(--font-desc-lh); font-weight: var(--font-desc-weight); white-space: pre-line; } .pills { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; position: relative; padding: 20px 0; } .pills > * { position: relative; z-index: 1; } .bridge { background: #fff; flex-shrink: 0; } .hidden + .bridge { display: none; } .bridge:has(+ .hidden) { display: none; } /* bar shape */ .container-head, .toggle-size, .container-sizes, .toggle-chosen, .toggle-price { background: #fff; border: 1px solid #fff; border-radius: 16px; display: flex; align-items: center; padding: 8px 10px; } /* static containers */ .container-head { height: 34px; justify-content: center; } .container-sizes { gap: 4px; } /* clickable toggles */ .toggle-size, .toggle-price { height: 34px; justify-content: center; gap: 6px; cursor: pointer; } .toggle-chosen { justify-content: center; cursor: pointer; } /* container-cta-text */ .container-cta-text { font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; white-space: nowrap; color: var(--muted); font-weight: var(--font-gooey-weight); } /* container-pill + toggle-opt */ .container-pill, .toggle-opt { display: flex; align-items: center; justify-content: center; height: 18px; border-radius: 10px; position: relative; flex-shrink: 0; padding: 0 10px; } .toggle-opt { cursor: pointer; } /* container-pill children */ .container-pill-border { position: absolute; inset: 0; border-radius: 10px; border: 1px solid var(--fg); pointer-events: none; } .container-pill-text { font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; white-space: nowrap; color: var(--fg); font-weight: var(--font-gooey-weight); position: relative; z-index: 1; } /* container-pill variants */ .container-pill--tight, .toggle-opt--tight { width: 33px; padding: 0; } .container-pill--on { background: var(--fg); } .container-pill--on .container-pill-text { color: #fff; } .toggle-opt--on { background: var(--fg); } .toggle-opt--on .container-pill-text { color: #fff; } /* toggle-size: is-active = CHOOSE open, selected = size chosen */ .toggle-size .container-pill { padding: 0 12px; } .toggle-size .container-pill:last-of-type { display: none; } .toggle-size.is-active .container-cta-text { display: none; } .toggle-size.is-active:hover .container-pill:first-of-type { display: none; } .toggle-size.is-active:hover .container-pill:last-of-type { display: flex; } .toggle-size:not(.is-active):hover .container-cta-text { color: var(--fg); } .toggle-size.is-active .container-pill:first-of-type { background: var(--fg); } .toggle-size.is-active .container-pill:first-of-type .container-pill-text { color: #fff; } .toggle-size.is-active .container-pill:first-of-type .container-pill-border { border-color: #fff; } /* hover: fill pill + invert text */ .toggle-opt:hover, .toggle-size:hover .container-pill, .toggle-chosen:hover .container-pill, .toggle-price:hover .container-pill { background: var(--fg); } .toggle-opt:hover .container-pill-text, .toggle-size:hover .container-pill .container-pill-text, .toggle-chosen:hover .container-pill .container-pill-text, .toggle-price:hover .container-pill .container-pill-text { color: #fff; } /* container-brand */ .container-brand { font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: #fff; font-weight: var(--font-gooey-weight); text-align: center; } /* utility */ .hidden { display: none !important; } .toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--fg); color: #fff; padding: 10px 20px; border-radius: 16px; font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; z-index: 9999; pointer-events: none; transition: opacity 0.3s; } .cart-toggle { position: fixed; top: 20px; right: 24px; z-index: 3000; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 16px; background: #fff; border: 1px solid var(--fg); cursor: pointer; transition: background 0.2s; } .cart-toggle svg { width: 18px; height: 18px; stroke: var(--fg); } .cart-toggle:hover { background: var(--fg); } .cart-toggle:hover svg { stroke: #fff; } .cart-count { position: absolute; top: -6px; right: -6px; background: var(--fg); color: #fff; font-size: calc(var(--font-cart-size) * 0.83); font-weight: 600; width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .cart-drawer { position: fixed; top: 0; right: 0; width: 380px; max-width: 100vw; height: 100vh; z-index: 8000; background: #fff; border-left: 1px solid #e0e0e0; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .cart-drawer.open { transform: translateX(0); } .cart-drawer-backdrop { position: fixed; inset: 0; z-index: 7999; background: rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity 0.35s; } .cart-drawer-backdrop.open { opacity: 1; pointer-events: all; } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; } .cart-header-title { font-size: var(--font-cart-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--fg); font-weight: var(--font-gooey-weight); } .cart-header-close { font-size: var(--font-cart-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: color 0.2s; } .cart-header-close:hover { color: var(--fg); } .cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; } .cart-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e0e0e0; border-radius: 12px; } .cart-item-row { display: flex; align-items: center; justify-content: space-between; } .cart-item-info { display: flex; flex-direction: column; gap: 2px; } .cart-item-brand { font-size: calc(var(--font-cart-size) * 0.83); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); } .cart-item-name { font-size: var(--font-cart-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--fg); font-weight: var(--font-gooey-weight); } .cart-item-price { font-size: var(--font-cart-size); color: var(--fg); font-weight: var(--font-gooey-weight); } .cart-qty { display: flex; align-items: center; gap: 0; } .cart-qty-btn { width: 24px; height: 24px; border-radius: 8px; border: 1px solid #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--font-cart-size); color: var(--fg); background: #fff; transition: background 0.15s; } .cart-qty-btn:hover { background: #f4f4f4; } .cart-qty-value { width: 28px; text-align: center; font-size: var(--font-cart-size); color: var(--fg); font-weight: var(--font-gooey-weight); } .cart-remove { font-size: calc(var(--font-cart-size) * 0.83); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); cursor: pointer; } .cart-remove:hover { color: var(--fg); } .cart-item-checkout { width: 100%; height: 28px; border-radius: 10px; border: 1px solid var(--fg); background: #fff; cursor: pointer; font-size: calc(var(--font-cart-size) * 0.83); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--fg); font-weight: var(--font-gooey-weight); transition: all 0.15s; } .cart-item-checkout:hover { background: var(--fg); color: #fff; } .cart-empty { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--font-cart-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); } .cart-footer { padding: 16px 24px; border-top: 1px solid #e0e0e0; flex-shrink: 0; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cart-total-label { font-size: calc(var(--font-cart-size) * 0.83); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); } .cart-total-value { font-size: calc(var(--font-cart-size) * 1.17); color: var(--fg); font-weight: var(--font-gooey-weight); } .cart-checkout-all { width: 100%; height: 34px; border-radius: 12px; background: var(--fg); color: #fff; cursor: pointer; font-size: calc(var(--font-cart-size) * 0.92); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; font-weight: var(--font-gooey-weight); transition: opacity 0.15s; } .cart-checkout-all:hover { opacity: 0.85; } /* ascii item */ .media-ascii { position: relative; width: 100%; aspect-ratio: 2 / 3; cursor: zoom-in; overflow: hidden; display: block; opacity: 0; } .media-ascii-sizer { display: block; width: 100%; } .media-element { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; } .ascii-bg { position: absolute; z-index: 1; pointer-events: none; } .ascii-output { position: absolute; z-index: 2; margin: 0; white-space: pre; line-height: 1; pointer-events: none; overflow: hidden; } /* debug */ #debug-overlay { position: fixed; inset: 0; z-index: 4000; pointer-events: none; display: none; } #debug-overlay.visible { display: block; } #debug-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } #face-debug-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* gooey */ .gooey { filter: url(#goo); } /* popup */ .popup-overlay { position: fixed; inset: 0; z-index: 5000; background: #fff; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .popup-overlay.open { opacity: 1; pointer-events: all; } .popup-close { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 5100; font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--fg); font-weight: var(--font-gooey-weight); cursor: pointer; background: #fff; border: 1px solid var(--fg); border-radius: 100px; padding: 8px 14px; display: none; } .popup-close.visible { display: block; } .popup-media-list { display: flex; flex-direction: column; width: 100%; } .popup-item { width: 100%; flex-shrink: 0; cursor: zoom-out; } .popup-item .media-ascii { cursor: zoom-out; opacity: 1; } #gui-container { position: fixed; top: 10px; right: 10px; z-index: 6000; display: none; } /* index page */ .index-page { display: grid; grid-template-columns: var(--split, 61.8%) 1fr; height: 100vh; overflow: hidden; } .index-grid { display: flex; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; position: relative; scrollbar-width: none; -ms-overflow-style: none; } .index-grid::-webkit-scrollbar { display: none; } .index-tile { width: 50%; opacity: 1; cursor: pointer; display: flex; flex-direction: column; } .index-tile-image { flex: 1; overflow: hidden; display: block; background: #f4f4f4; min-height: 0; } .index-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .index-tile .media-ascii { cursor: pointer; } .index-tile-bar { height: 46px; display: flex; align-items: center; justify-content: flex-end; padding: 8px 7px; background: #fff; flex-shrink: 0; gap: 10px; } .index-tile-sku { font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; color: #A1A1A1; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); line-height: 16px; white-space: nowrap; } .index-tile-price { font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; color: #A1A1A1; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); line-height: 16px; white-space: nowrap; text-align: right; } .index-tile-mode { font-size: calc(var(--font-brand-size) * 0.83); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; color: var(--muted); font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); white-space: nowrap; } .index-tile-mode--soldout { color: #b33; } .index-brand { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 24px; } .index-brand-text { font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); line-height: 16px; text-decoration: none; white-space: nowrap; position: relative; } /* brand text */ .index-brand-text .brand-inner { color: #A1A1A1; } .index-brand-text:hover .brand-inner { color: #aaa; } /* shared view-transition identity */ .index-brand-text, .back-link { view-transition-name: netzwerk-brand; } /* back-link — fixed left, vertically centered over gallery */ .back-link { position: fixed; top: 50vh; left: 24px; z-index: 10; transform: translateY(-50%); font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; color: #fff; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); text-decoration: none; line-height: 16px; } /* view-transition duration */ ::view-transition-group(netzwerk-brand) { animation-duration: 0.6s; animation-timing-function: ease-in-out; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } @media (max-width: 768px) { .page { grid-template-columns: 1fr; } .col-right { position: static; height: auto; padding-top: 10vh; } .col-left { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .col-left::-webkit-scrollbar { height: 4px; } .col-left::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; } .ascii-gallery { display: flex; flex-direction: row; width: max-content; } .media-ascii { width: 82vw; min-width: 82vw; flex-shrink: 0; cursor: default; } .media-element { object-fit: cover; } .cart-drawer { width: 100vw; } .cart-toggle { top: 14px; right: 14px; } .index-page { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; } .index-brand { position: fixed; top: 38.2vh; left: 14px; z-index: 10; transform: translateY(-50%); display: block; height: auto; width: auto; padding: 0; background: none; border: none; } .index-brand-text.on-image { mix-blend-mode: difference; } .index-brand-text.on-image .brand-inner { color: #fff; } .index-grid { padding-top: calc(38.2vh + 1em); } .index-tile { width: 100%; } .index-tile .media-ascii { width: 100%; min-width: 0; flex-shrink: 1; cursor: pointer; } .back-link { top: 38.2vh; left: 14px; transform: translateY(-50%); color: var(--muted); } .back-link.on-image { color: #fff; } } /* ============================================================ NEW: mode-driven UI elements ============================================================ */ .mode-badge { font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; color: var(--muted); font-weight: var(--font-gooey-weight); } .toggle-opt--disabled { opacity: 0.3; pointer-events: none; } .toggle-opt--disabled:hover { background: transparent !important; } /* site footer */ .site-footer { padding: 40px 0; display: flex; justify-content: center; border-top: 1px solid #e0e0e0; } .footer-nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; } .footer-nav a { font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; color: #A1A1A1; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); text-decoration: none; line-height: 16px; } .footer-nav a:hover { color: var(--fg); } /* waitlist form */ .waitlist-form { display: flex; flex-direction: column; gap: 10px; width: 100%; } .waitlist-row { position: relative; display: flex; align-items: center; gap: 8px; } .waitlist-input { flex: 1; height: 34px; border: 1px solid var(--fg); border-radius: 16px; padding: 0 60px 0 14px; font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); color: var(--fg); font-weight: var(--font-gooey-weight); outline: none; background: #fff; } .waitlist-input::placeholder { color: var(--muted); } .waitlist-row .waitlist-submit { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 18px; border-radius: 10px; padding: 0 10px; border: none; cursor: pointer; flex-shrink: 0; } .waitlist-submit:disabled { opacity: 0.3; cursor: default; } .waitlist-consent { display: flex; align-items: flex-start; gap: 8px; font-size: calc(var(--font-gooey-size) * 0.83); color: var(--muted); line-height: 1.3; } .waitlist-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--fg); } .waitlist-consent a { color: var(--fg); text-decoration: underline; } .waitlist-msg { font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-align: center; } .waitlist-msg--ok { color: var(--fg); } .waitlist-msg--error { color: #b33; } .waitlist-interest { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; } /* waitlist */ .waitlist-form-wrapper { background: #fff; border: 1px solid #fff; border-radius: 16px; padding: 8px 10px; max-width: 340px; display: flex; flex-direction: column; align-items: center; } .waitlist-form-wrapper .waitlist-row { gap: 0; } .waitlist-helper { font-size: var(--font-brand-size); color: var(--muted); text-align: center; padding-top: 12px; } .waitlist-helper.hidden { display: none; } /* checkout success page */ .success-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 24px; padding: 40px; text-align: center; } .success-title { font-size: var(--font-desc-size); color: var(--fg); font-weight: var(--font-gooey-weight); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; } .success-sub { font-size: var(--font-brand-size); color: var(--muted); } .success-back { display: inline-flex; height: 34px; padding: 0 20px; border: 1px solid var(--fg); border-radius: 16px; color: var(--fg); font-size: var(--font-gooey-size); letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; font-weight: var(--font-gooey-weight); text-decoration: none; align-items: center; transition: all 0.15s; } .success-back:hover { background: var(--fg); color: #fff; } /* fallback landing page */ .fallback-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; gap: 40px; padding: 60px 40px; text-align: center; } .fallback-brand { font-size: var(--font-brand-size); letter-spacing: var(--font-brand-spacing); text-transform: uppercase; font-family: var(--font-brand-family); font-weight: var(--font-brand-weight); color: var(--fg); } .fallback-title { font-size: var(--font-desc-size); color: var(--fg); font-weight: var(--font-gooey-weight); letter-spacing: var(--font-gooey-spacing); line-height: 1.4; } .fallback-sub { font-size: var(--font-brand-size); color: var(--muted); max-width: 400px; line-height: 1.5; } .fallback-form-wrap { width: 100%; max-width: 420px; } .fallback-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20px; background: #fff; border-top: 1px solid #e0e0e0; } /* legal pages */ .legal-page { max-width: 640px; margin: 80px auto; padding: 0 24px; } .legal-page h1 { font-size: var(--font-desc-size); color: var(--fg); font-weight: var(--font-gooey-weight); margin-bottom: 24px; letter-spacing: var(--font-gooey-spacing); text-transform: uppercase; } .legal-page h2 { font-size: var(--font-brand-size); color: var(--fg); font-weight: var(--font-gooey-weight); margin-top: 32px; margin-bottom: 12px; letter-spacing: var(--font-brand-spacing); text-transform: uppercase; } .legal-page p, .legal-page li { font-size: var(--font-brand-size); color: var(--muted); line-height: 1.6; margin-bottom: 8px; } .legal-page a { color: var(--fg); } .legal-page ul { padding-left: 20px; margin-bottom: 16px; } @media (max-width: 768px) { .site-footer { padding: 24px 0; } .footer-nav { gap: 16px; } .legal-page { margin: 60px auto; } }