/* ============================================================ TYPOGRAPHY — custom properties (live-tweakable via dat.GUI) ============================================================ */ :root { --fg: #C2C2C2; --muted: #C2C2C2; /* primary — Matrix Sans Raster (14px, 120% lh, 5% ls) */ --font-brand-family: "Matrix Sans Raster", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-brand-size: 14px; --font-brand-size-lg: 14px; --font-brand-spacing: 0.05em; --font-brand-lh: 1.2; --font-brand-weight: 400; /* fallback / UI */ --font-ui-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-gooey-size: 14px; --font-gooey-spacing: 0.05em; --font-gooey-weight: 400; /* secondary — Helvetica Neue (12px, 130% lh, 2% ls) */ --font-desc-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-desc-size: 12px; --font-desc-spacing: 0.02em; --font-desc-lh: 1.3; --font-desc-weight: 400; --font-cart-size: 12px; --font-ascii-family: monospace; --font-ascii-color: #ffffff; /* fixed left wordmark ("Netzwerk") — gallery detail text aligns to its right edge */ --wordmark-x: 24px; --wordmark-w: 83px; /* checkout bar gradient (design 1.4: 5EI-0 / 59Q-0 / 5AZ-0) */ --checkout-bar-gradient: linear-gradient(in oklab 180deg, oklab(94% -0.111 0.193 / 0%) 0%, oklab(94% -0.112 0.193 / 72%) 41.64%, oklab(94% -0.112 0.193) 71.26%, oklab(93.9% -0.112 0.193) 100%); } /* ─── 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(--el-global-base-family, var(--font-ui-family)); font-synthesis: none; } html { background: #fff; } body { background: #fff; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .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 clamp(20px, 5vw, 40px); gap: clamp(24px, 5vh, 49px); overflow-y: auto; scrollbar-width: none; } .col-right::-webkit-scrollbar { display: none; } .states { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%; margin: auto 0; } .description { width: min(292px, 100%); padding: 20px; font-size: var(--el-product-description-size, var(--font-desc-size)); color: rgba(193,193,193,0.76); text-align: center; line-height: var(--el-product-description-lh, var(--font-desc-lh)); font-weight: var(--el-product-description-weight, var(--font-desc-weight)); font-family: var(--el-product-description-family, var(--font-desc-family)); letter-spacing: var(--el-product-description-spacing, var(--font-desc-spacing)); white-space: pre-line; } /* gallery detail blocks — paper design 1OS-0 (details) + 1SS-0 (material) */ .product-details, .product-material { background: #F4F4F4; width: 100%; padding: 15px 0; overflow: hidden; display: flex; align-items: center; } .product-details { aspect-ratio: 2 / 3; position: relative; background: #C2C2C2; } .product-details .pd-text, .product-material .pd-columns { flex: 1; padding: 12px 20px 12px calc(var(--wordmark-x, 24px) + var(--wordmark-w, 83px) + 2em); } .product-details .pd-text { font-family: var(--el-product-details-family, var(--font-brand-family)); font-size: var(--el-product-details-size, 14px); line-height: var(--el-product-details-lh, 1.14); letter-spacing: var(--el-product-details-spacing, 0.03em); text-transform: none; color: var(--el-product-details-color, #909090); white-space: pre-wrap; text-align: right; padding-right: 12px; } /* desc background variant — image fills the 2:3 block, text overlays like an alt-tile caption and reacts to background luminance (white / gray). */ .product-details--bg { background-color: #C2C2C2; } .product-details--bg .media-ascii { position: absolute; inset: 0; } .product-details--bg .pd-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 12px 12px 12px calc(var(--wordmark-x, 24px) + var(--wordmark-w, 83px) + 2em); text-align: right; color: var(--el-product-details-color, #909090); z-index: 5; } .product-details--bg.on-dark .pd-text { color: #fff; } /* ascii-only (media: false + ascii: true) — keep the gray canvas behind the chars */ .product-details--ascii { background-color: #C2C2C2; } .product-material .pd-columns { display: flex; flex-wrap: wrap; gap: 12px; } .product-material .pd-column { flex: 1 1 calc(50% - 6px); min-width: 180px; } .product-material .pd-name { font-family: var(--el-product-material-family, var(--font-brand-family)); font-size: var(--el-product-material-size, 14px); line-height: var(--el-product-material-lh, 1.14); letter-spacing: var(--el-product-material-spacing, 0.05em); text-transform: uppercase; color: var(--el-product-material-name-color, #C1C1C1); } .product-material .pd-body { font-family: var(--el-product-material-family, var(--font-brand-family)); font-size: var(--el-product-material-size, 14px); line-height: var(--el-product-material-lh, 1.14); letter-spacing: var(--el-product-material-spacing, 0.05em); text-transform: uppercase; color: var(--el-product-material-body-color, #909090); white-space: pre-wrap; } .product-head { width: 292px; padding: 20px; text-align: center; font-family: var(--el-product-title-family, var(--font-brand-family)); text-transform: uppercase; display: flex; flex-direction: column; gap: 0; } .product-head p { margin: 0; } .product-head .ph-kicker { font-size: var(--el-product-kicker-size, var(--font-brand-size)); line-height: var(--el-product-kicker-lh, var(--font-brand-lh)); font-weight: var(--el-product-kicker-weight, var(--font-brand-weight)); color: rgba(193,193,193,0.76); letter-spacing: var(--el-product-kicker-spacing, var(--font-brand-spacing)); font-family: var(--el-product-kicker-family, var(--font-brand-family)); } .product-head .ph-title { font-size: var(--el-product-title-size, var(--font-brand-size-lg)); line-height: var(--el-product-title-lh, var(--font-brand-lh)); font-weight: var(--el-product-title-weight, var(--font-brand-weight)); color: #A1A1A1; letter-spacing: var(--el-product-title-spacing, var(--font-brand-spacing)); font-family: var(--el-product-title-family, var(--font-brand-family)); } .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; width: var(--bridge-w, 15px); height: 0; overflow: hidden; } .bridge--open { height: var(--bridge-h, 15px); } .hidden + .bridge { display: none; } .bridge:has(+ .hidden) { display: none; } /* ─── gooey sequential reveal ─── */ .gooey-reveal { opacity: 0; pointer-events: none; transform: scaleX(0); transform-origin: left center; } .gooey-reveal--open { opacity: 1; pointer-events: all; transform: scaleX(1); } /* 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(--el-product-cta-label-size, var(--font-gooey-size)); letter-spacing: var(--el-product-cta-label-spacing, var(--font-gooey-spacing)); text-transform: uppercase; white-space: nowrap; color: var(--muted); font-weight: var(--el-product-cta-label-weight, var(--font-gooey-weight)); font-family: var(--el-product-cta-label-family, var(--font-brand-family)); line-height: var(--el-product-cta-label-lh, 1.2); } /* 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(--el-product-pill-label-size, var(--font-gooey-size)); letter-spacing: var(--el-product-pill-label-spacing, var(--font-gooey-spacing)); text-transform: uppercase; white-space: nowrap; color: var(--fg); font-weight: var(--el-product-pill-label-weight, var(--font-gooey-weight)); position: relative; z-index: 1; font-family: var(--el-product-pill-label-family, var(--font-brand-family)); line-height: var(--el-product-pill-label-lh, 1.2); } /* 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(--el-product-wordmark-size, var(--font-gooey-size)); letter-spacing: var(--el-product-wordmark-spacing, var(--font-gooey-spacing)); text-transform: uppercase; color: #fff; font-weight: var(--el-product-wordmark-weight, var(--font-gooey-weight)); text-align: center; font-family: var(--el-product-wordmark-family, var(--font-brand-family)); line-height: var(--el-product-wordmark-lh, 1.2); } /* 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(--el-global-toast-size, var(--font-gooey-size)); letter-spacing: var(--el-global-toast-spacing, var(--font-gooey-spacing)); text-transform: uppercase; z-index: 9999; pointer-events: none; transition: opacity 0.3s; font-family: var(--el-global-toast-family, var(--font-brand-family)); line-height: var(--el-global-toast-lh, 1.2); font-weight: var(--el-global-toast-weight, var(--font-gooey-weight)); } /* checkout bar — bottom edge of the right column (design 1.4: gradient, 104px, text bottom) */ .checkout-bar { position: absolute; bottom: 0; right: 0; left: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; gap: 7px; width: 100%; height: 74px; padding: 16px 32px; background: var(--checkout-bar-gradient); cursor: pointer; font-size: var(--el-checkout-bar-size, var(--font-gooey-size)); letter-spacing: var(--el-checkout-bar-spacing, var(--font-gooey-spacing)); text-transform: uppercase; color: #000; font-weight: var(--el-checkout-bar-weight, var(--font-gooey-weight)); font-family: var(--el-checkout-bar-family, var(--font-brand-family)); line-height: var(--el-checkout-bar-lh, var(--font-brand-lh)); overflow: clip; } .checkout-bar span { font-family: var(--el-checkout-bar-family, var(--font-brand-family)); white-space: pre; flex-shrink: 0; } /* index: checkout bar is a body-level fixed element spanning the right (brand) column width */ @media (min-width: 769px) { body.is-index .checkout-bar { position: fixed; bottom: 0; right: 0; left: auto; width: calc(100% - var(--split, 61.8%)); } } /* checkout page — overview (checkout 1.0) */ .page-checkout { min-height: 100vh; align-items: stretch; --bridge-w: 12px; --bridge-h: 8px; } /* left column: brand at bottom of 353px zone, info at bottom of column */ .co-col-left { display: flex; flex-direction: column; } .co-left-top { display: flex; flex-direction: column; justify-content: flex-end; height: clamp(240px, 40vh, 353px); padding-left: 24px; } .co-brand { font-size: var(--el-checkout-wordmark-size, var(--font-brand-size)); letter-spacing: var(--el-checkout-wordmark-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #A1A1A1; font-family: var(--el-checkout-wordmark-family, var(--font-brand-family)); font-weight: var(--el-checkout-wordmark-weight, 400); line-height: var(--el-checkout-wordmark-lh, 1.33); text-decoration: none; } .co-brand:hover { color: var(--fg); } .co-left-bottom { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 24px 24px; } .co-info { font-size: var(--el-checkout-info-size, 12px); letter-spacing: var(--el-checkout-info-spacing, 0); color: #A1A1A1; font-family: var(--el-checkout-info-family, var(--font-desc-family)); font-weight: var(--el-checkout-info-weight, 400); line-height: var(--el-checkout-info-lh, 1.33); white-space: pre-line; } /* right column: top zone — continue top-left, overview bottom-left */ .co-col-right { display: flex; flex-direction: column; } .co-top { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: clamp(240px, 40vh, 353px); padding-top: 36px; } .co-continue { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; padding: 7.45px 10px; border-radius: calc(infinity * 1px); gap: 4px; background: #FFFFFF1F; outline: 1px solid #C2C2C2; font-size: var(--el-checkout-continue-link-size, 12px); letter-spacing: var(--el-checkout-continue-link-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #C2C2C2; font-family: var(--el-checkout-continue-link-family, var(--font-brand-family)); font-weight: var(--el-checkout-continue-link-weight, 400); line-height: var(--el-checkout-continue-link-lh, 1.33); text-decoration: none; } .co-continue:hover { color: var(--fg); } .co-overview { align-self: flex-start; font-size: var(--el-checkout-overview-size, var(--font-brand-size)); letter-spacing: var(--el-checkout-overview-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #A1A1A1; font-family: var(--el-checkout-overview-family, var(--font-brand-family)); font-weight: var(--el-checkout-overview-weight, 400); line-height: var(--el-checkout-overview-lh, 1.29); padding: 30px 0 0; } /* co-back — mobile-only back pill in the left-column header row */ .co-back { display: none; } /* desktop order: cta-bar (in co-top) → height section → overview → summary → items */ .co-col-right > .co-top { order: 1; } .co-col-right > .co-cta-note { order: 2; } .co-col-right > .co-overview { order: 3; } .co-col-right > .co-summary { order: 4; } .co-col-right > .co-items { order: 5; } .co-summary { display: flex; flex-direction: column; gap: 4px; padding: 30px 0; } .co-summary-row { display: flex; width: 100%; } .co-summary-cell { flex: 1; font-size: var(--el-checkout-summary-size, var(--font-desc-size)); letter-spacing: var(--el-checkout-summary-spacing, var(--font-desc-spacing)); color: #A1A1A1; font-family: var(--el-checkout-summary-family, var(--font-desc-family)); font-weight: var(--el-checkout-summary-weight, 500); line-height: var(--el-checkout-summary-lh, 1.33); } .co-summary-cell:first-child { color: #C1C1C1; } .co-cta-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; } .co-cta-note { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 15px 20px; background: #F4F4F4; overflow: clip; } .co-height-note { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; } .co-height-title { font-size: var(--el-checkout-height-title-size, 12px); letter-spacing: var(--el-checkout-height-title-spacing, 0.05em); text-transform: uppercase; color: #A1A1A1; font-family: var(--el-checkout-height-title-family, var(--font-brand-family)); font-weight: var(--el-checkout-height-title-weight, 400); line-height: var(--el-checkout-height-title-lh, 1.33); } .co-height-text { font-size: var(--el-checkout-height-note-size, 10px); line-height: var(--el-checkout-height-note-lh, 1.2); color: #C1C1C1; font-family: var(--el-checkout-height-note-family, var(--font-desc-family)); font-weight: var(--el-checkout-height-note-weight, 500); letter-spacing: var(--el-checkout-height-note-spacing, 0); } .co-bar-pills { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-end; gap: 6px; min-width: 0; } .co-bar-pills .container-sizes { gap: 6px; } .co-bar-pills .toggle-opt { height: 24px; border-radius: 999px; } .co-bar-pills .container-pill-border { border-radius: 999px; border-color: #C2C2C2; } .co-bar-pills .container-pill-text { font-size: var(--el-checkout-pill-label-size, 12px); letter-spacing: var(--el-checkout-pill-label-spacing, 0.05em); color: #B4B4B4; font-family: var(--el-checkout-pill-label-family, var(--font-brand-family)); font-weight: var(--el-checkout-pill-label-weight, 400); line-height: var(--el-checkout-pill-label-lh, 1.33); } .co-cta-btn { flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 74px; padding: 16px 32px; background: var(--checkout-bar-gradient); cursor: pointer; font-size: var(--el-checkout-cta-button-size, var(--font-gooey-size)); letter-spacing: var(--el-checkout-cta-button-spacing, var(--font-gooey-spacing)); text-transform: uppercase; color: #000; font-weight: var(--el-checkout-cta-button-weight, 400); font-family: var(--el-checkout-cta-button-family, var(--font-brand-family)); line-height: var(--el-checkout-cta-button-lh, 1.29); overflow: clip; } .co-cta-btn #cta-label { font-family: var(--el-checkout-cta-button-family, var(--font-brand-family)); white-space: pre; } .co-cta-btn.is-locked, .co-cta-btn:disabled { opacity: 0.5; cursor: default; } /* item rows: media + gooey segment pills (product-page look) */ .co-items { display: flex; flex-direction: column; gap: 14px; padding: 14px 24px 14px 0; } .co-item { display: flex; align-items: center; gap: 16px; padding: 8px 0; } .co-item-media { width: 100px; height: 100px; flex-shrink: 0; background: #f4f4f4; overflow: hidden; display: flex; align-items: center; justify-content: center; } .co-item-img { width: 100%; height: 100%; object-fit: cover; display: block; } .co-item-segments { flex: 1; display: flex; align-items: center; gap: 13px; min-width: 0; } /* gooey pills component — product-page look (bars + toggle-opt), two orientations */ .gooey-pills { filter: url(#goo); display: flex; } .gooey-pills--horizontal { flex-direction: row; align-items: center; } .gooey-pills--horizontal .container-pill-text { font-size: var(--el-product-pill-label-h-size, 12px); letter-spacing: var(--el-product-pill-label-h-spacing, 0.05em); color: #C2C2C2; font-family: var(--el-product-pill-label-h-family, var(--font-brand-family)); font-weight: var(--el-product-pill-label-h-weight, 400); line-height: var(--el-product-pill-label-h-lh, 1.2); } .gooey-pills--vertical { flex-direction: column; align-items: center; } /* checkout item title — first capsule in the gooey chain (like product page SKU bar) */ .co-item-title { display: block; font-size: var(--el-checkout-item-title-size, 12px); letter-spacing: var(--el-checkout-item-title-spacing, 0.05em); text-transform: uppercase; color: #C1C1C1; font-weight: var(--el-checkout-item-title-weight, var(--font-gooey-weight)); font-family: var(--el-checkout-item-title-family, var(--font-brand-family)); line-height: var(--el-checkout-item-title-lh, var(--font-brand-lh)); white-space: nowrap; } /* checkout: pills reuse product-page classes; static pills get no hover fill */ .gooey-pills .toggle-opt { cursor: default; } .gooey-pills .toggle-opt:hover { background: transparent; } .gooey-pills .toggle-opt:hover .container-pill-text { color: var(--fg); } .gooey-pills .toggle-opt--x { cursor: pointer; } .gooey-pills .toggle-opt--x .container-pill-border { border-color: #FE5B27; } .gooey-pills .toggle-opt--x .container-pill-text { color: #FE5B27; } .gooey-pills .toggle-opt--x .container-pill-text { color: #FE5B27; text-transform: none; font-variant: small-caps; } .gooey-pills .toggle-opt--x:hover { background: #FE5B27; } .gooey-pills .toggle-opt--x:hover .container-pill-text { color: #fff; } .gooey-pills .toggle-opt--qty { padding: 0; } .gooey-pills .toggle-opt--qty select { appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; font-size: var(--el-checkout-qty-select-size, 12px); font-weight: var(--el-checkout-qty-select-weight, var(--font-gooey-weight)); font-family: var(--el-checkout-qty-select-family, var(--font-brand-family)); letter-spacing: var(--el-checkout-qty-select-spacing, var(--font-gooey-spacing)); text-transform: none; color: var(--fg); text-align: center; width: 34px; padding: 0 8px 0 10px; cursor: pointer; line-height: var(--el-checkout-qty-select-lh, 1.2); } .gooey-pills .toggle-opt--qty:hover { background: var(--fg); } .gooey-pills .toggle-opt--qty:hover select { color: #fff; } /* 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; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0s linear 0.3s; } .popup-overlay.open { opacity: 1; visibility: visible; pointer-events: all; transition: opacity 0.3s; } .popup-close { position: fixed; top: 50%; right: 24px; transform: translateY(-50%); z-index: 5100; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--el-popup-close-size, 12px); letter-spacing: var(--el-popup-close-spacing, 0.05em); text-transform: uppercase; color: #FFFFFF; font-weight: var(--el-popup-close-weight, 400); cursor: pointer; background: #FFFFFF1F; border: 1px solid #FFFFFF; border-radius: 999px; padding: 7.45px 10px; display: none; font-family: var(--el-popup-close-family, var(--font-brand-family)); line-height: var(--el-popup-close-lh, 1.3); } .popup-close.visible { display: flex; } .popup-brand { position: fixed; top: 50%; left: 24px; transform: translateY(-50%); z-index: 5100; display: flex; flex-direction: row; align-items: baseline; gap: 8px; cursor: pointer; } .popup-brand-name { font-size: var(--el-popup-wordmark-size, var(--font-brand-size)); letter-spacing: var(--el-popup-wordmark-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #FFFFFF; font-family: var(--el-popup-wordmark-family, var(--font-brand-family)); font-weight: var(--el-popup-wordmark-weight, var(--font-brand-weight)); line-height: var(--el-popup-wordmark-lh, var(--font-brand-lh)); } .popup-brand-copy { font-size: var(--el-popup-wordmark-copy-size, var(--font-brand-size)); letter-spacing: var(--el-popup-wordmark-copy-spacing, 0.05em); text-transform: uppercase; color: #FFFFFF; font-family: var(--el-popup-wordmark-copy-family, var(--font-brand-family)); font-weight: var(--el-popup-wordmark-copy-weight, 400); line-height: var(--el-popup-wordmark-copy-lh, var(--font-brand-lh)); } .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; } /* popup closed: never composite the hidden ascii-bg layers (iOS Safari ghost-layer fix) */ .popup-overlay:not(.open) .ascii-bg { display: none !important; } .popup-overlay:not(.open) .media-ascii { opacity: 0 !important; } /* 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%; min-width: 0; opacity: 1; cursor: pointer; display: flex; flex-direction: column; } .index-tile-image { flex: 1; overflow: hidden; display: block; background: #f4f4f4; min-height: 0; position: relative; } .index-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .index-tile .media-ascii { cursor: pointer; height: 100% !important; } .index-tile-bar { height: 46px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px 7px; background: #fff; flex-shrink: 0; gap: 10px; } .index-tile-label { flex: 1; font-size: var(--el-index-label-size, var(--font-brand-size)); letter-spacing: var(--el-index-label-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: var(--el-index-label-color, #C2C2C2); font-family: var(--el-index-label-family, var(--font-brand-family)); font-weight: var(--el-index-label-weight, var(--font-brand-weight)); line-height: var(--el-index-label-lh, var(--font-brand-lh)); white-space: nowrap; text-align: right; } .index-tile-item { flex-shrink: 0; font-size: var(--el-index-item-size, var(--font-brand-size)); letter-spacing: var(--el-index-item-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: var(--el-index-item-color, #555555); font-family: var(--el-index-item-family, var(--font-brand-family)); font-weight: var(--el-index-item-weight, var(--font-brand-weight)); line-height: var(--el-index-item-lh, var(--font-brand-lh)); white-space: nowrap; } .index-tile--look { cursor: default; } .index-tile--look .media-ascii { cursor: default; } /* every index tile (look/piece/product/alt/empty) renders inside the fixed 2:3 box driven by data-ratio — identical to the product gallery. */ .index-tile--look, .index-tile--piece, .index-tile--product { align-self: flex-start; } .index-tile--alt.index-tile--message .index-tile-image { background: #F4F4F4; display: flex; } .index-tile-message { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6.28px; padding: 12px; font-size: var(--el-index-message-size, var(--font-brand-size)); letter-spacing: var(--el-index-message-spacing, 0.05em); color: var(--el-index-message-color, #C2C2C2); font-family: var(--el-index-message-family, var(--font-brand-family)); font-weight: var(--el-index-message-weight, var(--font-brand-weight)); line-height: var(--el-index-message-lh, var(--font-brand-lh)); text-align: right; white-space: pre-wrap; } .index-tile-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 12px; font-size: var(--el-index-message-size, var(--font-brand-size)); letter-spacing: var(--el-index-message-spacing, 0.05em); color: #fff; font-family: var(--el-index-message-family, var(--font-brand-family)); font-weight: var(--el-index-message-weight, var(--font-brand-weight)); line-height: var(--el-index-message-lh, var(--font-brand-lh)); text-align: right; white-space: pre-wrap; pointer-events: none; z-index: 3; } .index-tile-sku { font-size: var(--el-index-sku-size, var(--font-brand-size)); letter-spacing: var(--el-index-sku-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #C2C2C2; font-family: var(--el-index-sku-family, var(--font-brand-family)); font-weight: var(--el-index-sku-weight, var(--font-brand-weight)); line-height: var(--el-index-sku-lh, var(--font-brand-lh)); white-space: nowrap; } .index-tile-price { font-size: var(--el-index-price-size, var(--font-brand-size)); letter-spacing: var(--el-index-price-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #555555; font-family: var(--el-index-price-family, var(--font-brand-family)); font-weight: var(--el-index-price-weight, var(--font-brand-weight)); line-height: var(--el-index-price-lh, var(--font-brand-lh)); white-space: nowrap; text-align: right; } .index-tile-mode { font-size: var(--el-index-mode-size, var(--font-brand-size)); letter-spacing: var(--el-index-mode-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #C2C2C2; font-family: var(--el-index-mode-family, var(--font-brand-family)); font-weight: var(--el-index-mode-weight, var(--font-brand-weight)); line-height: var(--el-index-mode-lh, var(--font-brand-lh)); white-space: nowrap; } .index-tile-mode--soldout { color: #b33; } .index-tile--legal { width: 100%; height: calc(50vh + 56.4px); cursor: default; } .index-tile--spacer { width: 50%; height: 0; visibility: hidden; pointer-events: none; cursor: default; } .index-tile--empty { cursor: default; } .index-tile--empty .index-tile-image { pointer-events: none; background: transparent; } .index-tile--empty .index-tile-blank { width: 100%; aspect-ratio: 2 / 3; display: block; } .index-tile--empty .index-tile-bar { pointer-events: none; background: transparent; } /* site footer — legal line aligned with brand title (design 4BO-0 / 4QM-0) */ /* desktop only: sticky so the legal line snaps exactly onto the brand-title line */ @media (min-width: 769px) { .footer-brand-line { position: sticky; top: calc(50vh - 8.4px); } /* checkout bar text left-aligned + bottom-aligned to brand title line (design 1.4) */ .co-cta-bar { bottom: -15px; } .co-cta-btn { justify-content: flex-start; padding: 16px 20px; } .co-cta-note { margin-top: 15px; } /* 20px inline alignment across the right column (matches tell-us-your-height) */ .co-top { padding-left: 20px; } .co-overview { padding-left: 20px; } .co-summary { padding-inline: 20px; } .co-items { padding-inline: 20px; } } .site-footer-legal { display: flex; flex-direction: column; align-items: start; gap: 6px; padding: 48px 1px; background: #FFFFFF; overflow: clip; height: 100%; } .footer-brand-line { display: flex; align-items: start; align-self: stretch; padding-inline: 7px; gap: 12px; } .footer-brand-copy { display: flex; align-items: start; flex: 1; } .footer-brand { font-size: var(--el-footer-wordmark-size, 14px); line-height: var(--el-footer-wordmark-lh, var(--font-brand-lh)); letter-spacing: var(--el-footer-wordmark-spacing, 0.05em); text-transform: uppercase; font-family: var(--el-footer-wordmark-family, var(--font-brand-family)); font-weight: var(--el-footer-wordmark-weight, 400); white-space: pre; color: #DAFF0000; padding-left: 16px; } .footer-copy { font-size: var(--el-footer-copy-size, 14px); line-height: var(--el-footer-copy-lh, var(--font-brand-lh)); letter-spacing: var(--el-footer-copy-spacing, 0.05em); text-transform: uppercase; font-family: var(--el-footer-copy-family, var(--font-brand-family)); font-weight: var(--el-footer-copy-weight, 400); white-space: pre; color: #A1A1A1; flex: 1; } .footer-links { display: flex; align-items: start; gap: 12px; justify-content: center; } .footer-links a { font-size: var(--el-footer-link-size, 14px); line-height: var(--el-footer-link-lh, var(--font-brand-lh)); letter-spacing: var(--el-footer-link-spacing, 0.05em); text-transform: uppercase; font-family: var(--el-footer-link-family, var(--font-brand-family)); font-weight: var(--el-footer-link-weight, 400); white-space: pre; color: #A1A1A1; text-decoration: none; flex-shrink: 0; } .footer-links a:hover { color: var(--fg); } .index-brand { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0 24px; } .index-brand-text { font-size: var(--el-index-wordmark-size, var(--font-brand-size)); letter-spacing: var(--el-index-wordmark-spacing, var(--font-brand-spacing)); text-transform: uppercase; font-family: var(--el-index-wordmark-family, var(--font-brand-family)); font-weight: var(--el-index-wordmark-weight, var(--font-brand-weight)); line-height: var(--el-index-wordmark-lh, var(--font-brand-lh)); text-decoration: none; white-space: nowrap; position: relative; } /* brand text */ .index-brand-text .brand-inner { color: #A1A1A1; font-family: var(--el-index-wordmark-family, var(--font-brand-family)); } .index-brand-text:hover .brand-inner { color: #aaa; } /* index left brand — like product back-link, fixed left center; white over images on scroll */ .index-brand-left { position: fixed; top: 50vh; left: 24px; z-index: 10; transform: translateY(-50%); font-size: var(--el-index-wordmark-side-size, var(--font-brand-size)); letter-spacing: var(--el-index-wordmark-side-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #A1A1A1; font-family: var(--el-index-wordmark-side-family, var(--font-brand-family)); font-weight: var(--el-index-wordmark-side-weight, var(--font-brand-weight)); text-decoration: none; line-height: var(--el-index-wordmark-side-lh, var(--font-brand-lh)); white-space: nowrap; } .index-brand-left.on-image { color: #fff; } /* 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(--el-product-back-link-size, var(--font-brand-size)); letter-spacing: var(--el-product-back-link-spacing, var(--font-brand-spacing)); text-transform: uppercase; color: #A1A1A1; font-family: var(--el-product-back-link-family, var(--font-brand-family)); font-weight: var(--el-product-back-link-weight, var(--font-brand-weight)); text-decoration: none; line-height: var(--el-product-back-link-lh, var(--font-brand-lh)); } .back-link.on-image { color: #fff; } /* back-btn — pill back button (design 1.2: ask.button pill) */ .back-btn { position: absolute; top: 36px; left: 32px; z-index: 10; display: inline-flex; align-items: center; justify-content: center; padding: 7.45px 10px; border-radius: calc(infinity * 1px); gap: 4px; background: #FFFFFF1F; outline: 1px solid #C2C2C2; font-size: var(--el-product-back-btn-size, 12px); letter-spacing: var(--el-product-back-btn-spacing, 0.05em); text-transform: uppercase; color: var(--el-product-back-btn-color, #C2C2C2); font-family: var(--el-product-back-btn-family, var(--font-brand-family)); font-weight: var(--el-product-back-btn-weight, 400); line-height: var(--el-product-back-btn-lh, 1.3); text-decoration: none; } .back-btn:hover { color: var(--fg); } /* product-header — Container für Brand+Back; Desktop transparent (display:contents), Mobile weißer fixer Header */ .product-header { display: contents; } /* Desktop: back-btn im rechten Column (fixed links oben) — Header ist display:contents */ .back-btn { position: fixed; top: 36px; left: calc(50% + 32px); } /* 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; padding-bottom: 94px; } .col-left { overflow-x: scroll; -webkit-overflow-scrolling: touch; padding-top: 66px; } .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; } .product-details, .product-material { width: 82vw; min-width: 82vw; flex-shrink: 0; height: auto; } .product-details .pd-text, .product-material .pd-columns { padding-left: 20px; } .media-element { object-fit: cover; } .checkout-bar { position: fixed; bottom: 0; right: 0; left: 0; width: 100%; } .page-checkout { grid-template-columns: 1fr; } .co-left-top { height: 147px; padding-left: 14px; display: flex; flex-direction: column; justify-content: flex-end; padding-right: 14px; padding-bottom: 10px; } .co-left-top-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .co-back { display: inline-flex; align-items: center; justify-content: center; padding: 7.45px 10px; border-radius: calc(infinity * 1px); gap: 4px; background: #FFFFFF1F; outline: 1px solid #C2C2C2; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #C2C2C2; font-family: var(--font-brand-family); font-weight: 400; line-height: 1.33; text-decoration: none; } .co-back:hover { color: var(--fg); } .co-left-bottom { padding: 42px 14px 24px; align-items: flex-start; } .co-info { width: 100%; max-width: 100%; } .co-top { height: auto; padding: 0; } .co-continue { display: none; } .co-items { gap: 0; padding: 14px 0 94px; } .co-summary { padding: 30px 14px; } .co-overview { order: 1; padding: 42px 14px 0; } .co-cta-note { padding: 15px 14px; } .co-cta-bar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; } /* mobile order: overview → summary → cta-note → items; cta-bar stays fixed bottom */ .co-col-right > .co-overview { order: 1; } .co-col-right > .co-summary { order: 2; } .co-col-right > .co-cta-note { order: 3; } .co-col-right > .co-items { order: 4; } .co-col-right > .co-cta-bar { order: 5; } .co-item { flex-direction: column; align-items: center; gap: 13px; padding: 24px 0; } .co-item-media { width: 190px; height: 229px; } .co-item-segments { flex: none; width: 122px; flex-direction: column; align-items: center; gap: 13px; padding: 20px 0; } .co-item-segments .gooey-pills { flex-direction: column; align-items: center; } .index-page { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; } .index-brand { position: fixed; top: 38.2vh; left: 20px; z-index: 10; transform: translateY(-50%); display: block; height: auto; width: auto; padding: 0; background: none; border: none; } .index-brand-text.on-image .brand-inner { color: #fff; } .index-brand-left { display: none; } .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; } /* product 1.4 mobile header — weißer fixer Header mit Brand links + Back-Button rechts */ .product-header { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 66px; z-index: 100; background: #fff; align-items: flex-end; justify-content: space-between; padding: 0 14px 10px; } .back-link { position: static; top: auto; left: auto; transform: none; color: #C2C2C2 !important; z-index: auto; } .back-link.on-image { color: #fff !important; } .back-btn { position: static; top: auto; right: auto; left: auto; z-index: auto; } .container-brand { display: none; } /* mobile footer — stacked brand/copy line above links (design 4QM-0) */ .index-tile--legal { height: calc(61.8vh + 56.4px); } .site-footer-legal { padding-inline: 0; } .footer-brand-line { flex-direction: column; justify-content: start; align-self: stretch; padding-inline: 20px; top: calc(38.2vh - 8.4px); } .footer-brand { font-size: var(--el-footer-wordmark-size, var(--font-brand-size)); line-height: var(--el-footer-wordmark-lh, var(--font-brand-lh)); } .footer-copy { font-size: var(--el-footer-copy-size, var(--font-brand-size)); line-height: var(--el-footer-copy-lh, var(--font-brand-lh)); } .footer-links a { font-size: var(--el-footer-link-size, var(--font-brand-size)); line-height: var(--el-footer-link-lh, var(--font-brand-lh)); } .footer-brand { padding-left: 0; } .footer-brand-copy { align-self: stretch; } .footer-links { justify-content: start; } } /* ============================================================ NEW: mode-driven UI elements ============================================================ */ .mode-badge { font-size: var(--el-product-mode-badge-size, var(--font-gooey-size)); letter-spacing: var(--el-product-mode-badge-spacing, var(--font-gooey-spacing)); text-transform: uppercase; color: var(--muted); font-weight: var(--el-product-mode-badge-weight, var(--font-gooey-weight)); font-family: var(--el-product-mode-badge-family, var(--font-brand-family)); line-height: var(--el-product-mode-badge-lh, 1.2); } .toggle-opt--disabled { opacity: 0.3; pointer-events: none; } .toggle-opt--disabled:hover { background: transparent !important; } /* color pills: flex-to-text width (same toggle logic as size/price — no background fill) */ .toggle-opt--color { width: auto; padding: 0 10px; } /* single color: no border stroke, not interactive */ .container-sizes--single .toggle-opt--color .container-pill-border { display: none; } .container-sizes--single .toggle-opt--color:hover { background: transparent; } .container-sizes--single .toggle-opt--color:hover .container-pill-text { color: var(--fg); } .container-sizes--single .toggle-opt--color { cursor: default; pointer-events: none; } /* 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(--el-waitlist-input-size, var(--font-gooey-size)); letter-spacing: var(--el-waitlist-input-spacing, var(--font-gooey-spacing)); color: var(--fg); font-weight: var(--el-waitlist-input-weight, var(--font-gooey-weight)); outline: none; background: #fff; font-family: var(--el-waitlist-input-family, var(--font-brand-family)); line-height: var(--el-waitlist-input-lh, 1.3); } .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(--el-waitlist-consent-size, var(--font-gooey-size)) * 0.83); color: var(--muted); line-height: var(--el-waitlist-consent-lh, 1.3); font-family: var(--el-waitlist-consent-family, var(--font-brand-family)); letter-spacing: var(--el-waitlist-consent-spacing, var(--font-gooey-spacing)); font-weight: var(--el-waitlist-consent-weight, var(--font-gooey-weight)); } .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(--el-waitlist-status-size, var(--font-gooey-size)); letter-spacing: var(--el-waitlist-status-spacing, var(--font-gooey-spacing)); text-align: center; font-family: var(--el-waitlist-status-family, var(--font-brand-family)); font-weight: var(--el-waitlist-status-weight, var(--font-gooey-weight)); line-height: var(--el-waitlist-status-lh, 1.3); } .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(--el-waitlist-note-size, var(--font-brand-size)); color: var(--muted); text-align: center; padding-top: 12px; font-family: var(--el-waitlist-note-family, var(--font-brand-family)); letter-spacing: var(--el-waitlist-note-spacing, var(--font-brand-spacing)); font-weight: var(--el-waitlist-note-weight, var(--font-brand-weight)); line-height: var(--el-waitlist-note-lh, 1.3); } .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(--el-success-title-size, var(--font-desc-size)); color: var(--fg); font-weight: var(--el-success-title-weight, var(--font-desc-weight)); letter-spacing: var(--el-success-title-spacing, var(--font-desc-spacing)); text-transform: uppercase; font-family: var(--el-success-title-family, var(--font-desc-family)); line-height: var(--el-success-title-lh, var(--font-desc-lh)); } .success-sub { font-size: var(--el-success-note-size, var(--font-brand-size)); color: var(--muted); font-family: var(--el-success-note-family, var(--font-brand-family)); letter-spacing: var(--el-success-note-spacing, var(--font-brand-spacing)); font-weight: var(--el-success-note-weight, 400); line-height: var(--el-success-note-lh, 1.5); } .success-back { display: inline-flex; height: 34px; padding: 0 20px; border: 1px solid var(--fg); border-radius: 16px; color: var(--fg); font-size: var(--el-success-back-link-size, var(--font-gooey-size)); letter-spacing: var(--el-success-back-link-spacing, var(--font-gooey-spacing)); text-transform: uppercase; font-weight: var(--el-success-back-link-weight, var(--font-gooey-weight)); text-decoration: none; align-items: center; transition: all 0.15s; font-family: var(--el-success-back-link-family, var(--font-brand-family)); line-height: var(--el-success-back-link-lh, 1.3); } .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(--el-fallback-wordmark-size, var(--font-brand-size)); letter-spacing: var(--el-fallback-wordmark-spacing, var(--font-brand-spacing)); text-transform: uppercase; font-family: var(--el-fallback-wordmark-family, var(--font-brand-family)); font-weight: var(--el-fallback-wordmark-weight, var(--font-brand-weight)); line-height: var(--el-fallback-wordmark-lh, var(--font-brand-lh)); color: var(--fg); } .fallback-title { font-size: var(--el-fallback-title-size, var(--font-desc-size)); color: var(--fg); font-weight: var(--el-fallback-title-weight, var(--font-desc-weight)); letter-spacing: var(--el-fallback-title-spacing, var(--font-desc-spacing)); text-transform: uppercase; font-family: var(--el-fallback-title-family, var(--font-desc-family)); line-height: var(--el-fallback-title-lh, var(--font-desc-lh)); } .fallback-sub { font-size: var(--el-fallback-note-size, var(--font-brand-size)); color: var(--muted); max-width: 400px; line-height: var(--el-fallback-note-lh, 1.5); font-family: var(--el-fallback-note-family, var(--font-brand-family)); letter-spacing: var(--el-fallback-note-spacing, var(--font-brand-spacing)); font-weight: var(--el-fallback-note-weight, 400); } .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; } /* ============================================================ COLOR EDITOR — override block (js/color.js) Each rule falls back to the original color when the --el--color variable is unset. ============================================================ */ .description { color: var(--el-product-description-color, rgba(193,193,193,0.76)); } .product-head .ph-kicker { color: var(--el-product-kicker-color, rgba(193,193,193,0.76)); } .product-head .ph-title { color: var(--el-product-title-color, #A1A1A1); } .container-cta-text { color: var(--el-product-cta-label-color, #C2C2C2); } .container-pill-text { color: var(--el-product-pill-label-color, #C2C2C2); } .gooey-pills--horizontal .container-pill-text { color: var(--el-product-pill-label-h-color, #C2C2C2); } .container-brand { color: var(--el-product-wordmark-color, #fff); } .toast { color: var(--el-global-toast-color, #fff); } .checkout-bar { color: var(--el-checkout-bar-color, #000); } .co-brand { color: var(--el-checkout-wordmark-color, #A1A1A1); } .co-info { color: var(--el-checkout-info-color, #A1A1A1); } .co-continue { color: var(--el-checkout-continue-link-color, #A1A1A1); } .co-overview { color: var(--el-checkout-overview-color, #A1A1A1); } .co-summary-cell { color: var(--el-checkout-summary-color, #A1A1A1); } .co-height-title { color: var(--el-checkout-height-title-color, #A1A1A1); } .co-height-text { color: var(--el-checkout-height-note-color, #C1C1C1); } .co-bar-pills .container-pill-text { color: var(--el-checkout-pill-label-color, #B4B4B4); } .co-cta-btn { color: var(--el-checkout-cta-button-color, #000); } .co-item-title { color: var(--el-checkout-item-title-color, #C1C1C1); } .gooey-pills .toggle-opt--qty select { color: var(--el-checkout-qty-select-color, #C2C2C2); } .popup-close { color: var(--el-popup-close-color, #FFFFFF); } .popup-brand-name { color: var(--el-popup-wordmark-color, #FFFFFF); } .popup-brand-copy { color: var(--el-popup-wordmark-copy-color, #FFFFFF); } .index-tile-sku { color: var(--el-index-sku-color, #C2C2C2); } .index-tile-price { color: var(--el-index-price-color, #555555); } .index-tile-mode { color: var(--el-index-mode-color, #C2C2C2); } .footer-brand { color: var(--el-footer-wordmark-color, #DAFF0000); } .footer-copy { color: var(--el-footer-copy-color, #A1A1A1); } .footer-links a { color: var(--el-footer-link-color, #A1A1A1); } .index-brand-text .brand-inner { color: var(--el-index-wordmark-color, #A1A1A1); } .index-brand-left { color: var(--el-index-wordmark-side-color, #A1A1A1); } .back-link { color: var(--el-product-back-link-color, #A1A1A1); } .mode-badge { color: var(--el-product-mode-badge-color, #C2C2C2); } .waitlist-input { color: var(--el-waitlist-input-color, #C2C2C2); } .waitlist-consent { color: var(--el-waitlist-consent-color, #C2C2C2); } .waitlist-msg { color: var(--el-waitlist-status-color, #000); } .waitlist-helper { color: var(--el-waitlist-note-color, #C2C2C2); } .success-title { color: var(--el-success-title-color, #C2C2C2); } .success-sub { color: var(--el-success-note-color, #C2C2C2); } .success-back { color: var(--el-success-back-link-color, #C2C2C2); } .fallback-brand { color: var(--el-fallback-wordmark-color, #C2C2C2); } .fallback-title { color: var(--el-fallback-title-color, #C2C2C2); } .fallback-sub { color: var(--el-fallback-note-color, #C2C2C2); } @media (max-width: 768px) { .back-link { color: #C2C2C2 !important; } } /* ============================================================ about page — marquee gallery ============================================================ */ /* ============================================================ CHECKOUT height section — selected (lime) state Active pill: black fill + white text + black stroke. Inactive pills: transparent (lime shows through) + #90B100 stroke + #90B100 text. Hover (only while selected): #90B100 fill + stroke + lime text. Deselect returns to neutral. ============================================================ */ .co-cta-note.is-selected { background: #D9FF00; } .co-cta-note.is-selected .co-height-title, .co-cta-note.is-selected .co-height-text { color: #90B100; } .co-cta-note.is-selected .co-bar-pills .toggle-opt--on { background: #000; } .co-cta-note.is-selected .co-bar-pills .toggle-opt--on .container-pill-text { color: #fff; } .co-cta-note.is-selected .co-bar-pills .toggle-opt--on .container-pill-border { border-color: #000; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:not(.toggle-opt--on) { background: transparent; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:not(.toggle-opt--on) .container-pill-text { color: #90B100; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:not(.toggle-opt--on) .container-pill-border { border-color: #90B100; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:hover { background: #90B100; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:hover .container-pill-border { border-color: #90B100; } .co-cta-note.is-selected .co-bar-pills .toggle-opt:hover .container-pill-text { color: #D9FF00; } /* ============================================================ ABOUT page (paper design 1AC-0 desktop / 8O-0 mobile) Layout retrofit of the product page: left gallery (ASCII + slow linear seamless marquee), right text column. Folder principle: content/about/about.yaml + 01.webp … 05.webp. ============================================================ */ .page-about { height: 100vh; min-height: 100vh; overflow: hidden; } .page-about .col-left { height: 100vh; overflow: hidden; position: sticky; top: 0; } .page-about .col-right { position: static; height: 100vh; overflow-y: auto; justify-content: flex-start; padding: 36px 40px 0; } /* height-fit fallback (class toggled by page.js): when the right column doesn't fit 100vh the whole page scrolls instead — the gallery stays vertical/sticky, only the height/scroll properties change. */ body.is-page-scroll .page-about { height: auto; min-height: 100vh; overflow: visible; } body.is-page-scroll .page-about .col-right { height: auto; overflow: visible; } /* marquee gallery — a fixed viewport containing the moving strip. Natively scrollable (hidden scrollbar) so the user can scroll manually; the strip's CSS animation drives the auto-scroll when idle. */ .page-about .ascii-gallery { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; user-select: none; } .page-about .ascii-gallery::-webkit-scrollbar { display: none; } .page-about .ascii-marquee-strip { display: flex; flex-direction: column; /* desktop: vertical drift */ will-change: transform; animation: marquee-y var(--marquee-duration, 180s) linear infinite; } .page-about [data-marquee="horizontal"] .ascii-marquee-strip { animation-name: marquee-x; } /* manual scroll: the animation is disabled while the user interacts */ .page-about .ascii-gallery.is-manual .ascii-marquee-strip { animation: none; } @keyframes marquee-y { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .page-about .ascii-marquee-strip { animation: none; } } .page-about .ascii-marquee-strip .media-ascii { width: 100%; min-width: 100%; aspect-ratio: 3 / 4; /* design 3:4 (pre-load box; data-ratio wins after layout) */ flex-shrink: 0; cursor: default; } .page-about .ascii-marquee-strip .about-placeholder { background: #F4F4F4; } /* right column — sticky, about text block rebuilt from the design (1AC-0): 218px label column + 423px text column, rows 48px apart. Fonts/props exact: Matrix Sans Raster labels 14px/.7px/18px; manifesto ui-monospace 10px/14px #C2C2C2; names Matrix Sans Raster 10px/.5px/12px ("and," #C2C2C2, names #505050). */ .page-about .col-right { padding: 36px clamp(20px, 4vw, 40px) 0; } .about { display: flex; flex-direction: column; gap: clamp(28px, 6vh, 48px); width: min(641px, 100%); } .about-row { display: flex; width: 100%; } .about-label { flex: 0 0 clamp(150px, 30%, 218px); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .about-text { flex: 1 1 0; min-width: 0; } .about-kicker { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 7px; font-family: var(--el-about-kicker-family, var(--font-brand-family)); font-size: var(--el-about-kicker-size, var(--font-brand-size)); font-weight: var(--el-about-kicker-weight, var(--font-brand-weight)); letter-spacing: var(--el-about-kicker-spacing, var(--font-brand-spacing)); line-height: var(--el-about-kicker-lh, var(--font-brand-lh)); text-transform: uppercase; color: rgba(194, 194, 194, 0.99); white-space: pre; } .about-kicker-brand, .about-kicker-year { font-family: inherit; } .about-kicker-year { text-align: right; } .about-title { font-family: var(--el-about-title-family, var(--font-brand-family)); font-size: var(--el-about-title-size, var(--font-brand-size-lg)); font-weight: var(--el-about-title-weight, var(--font-brand-weight)); letter-spacing: var(--el-about-title-spacing, var(--font-brand-spacing)); line-height: var(--el-about-title-lh, var(--font-brand-lh)); color: rgba(194, 194, 194, 0.98); white-space: pre-wrap; } .about-intro { font-family: var(--el-about-intro-family, ui-monospace, "SF Mono", Menlo, monospace); font-size: var(--el-about-intro-size, var(--font-desc-size)); font-weight: var(--el-about-intro-weight, var(--font-desc-weight)); letter-spacing: var(--el-about-intro-spacing, var(--font-desc-spacing)); line-height: var(--el-about-intro-lh, var(--font-desc-lh)); color: var(--el-about-intro-color, rgb(194, 194, 194)); white-space: pre-wrap; } .about-intro a { color: inherit; text-decoration: underline; } /* names — "and," column left, names right (design layout) */ .about-names { display: flex; flex-wrap: wrap; gap: 15px; } .about-names-and, .about-names-list { font-family: var(--el-about-names-family, var(--font-brand-family)); font-size: var(--el-about-names-size, var(--font-gooey-size)); font-weight: var(--el-about-names-weight, var(--font-gooey-weight)); letter-spacing: var(--el-about-names-spacing, var(--font-gooey-spacing)); line-height: var(--el-about-names-lh, 1.2); } .about-names-and { color: rgb(194, 194, 194); white-space: pre-wrap; } .about-names-list { color: rgb(80, 80, 80); white-space: pre; } .about-names-and-first { opacity: 0; } /* back pill — in-flow at the top of the right column (design 5K9-0), not absolute/fixed so it never overlaps the gallery or the wordmark. Desktop: the header copy is hidden, the right-column copy is static. Mobile: the right-column copy is hidden, the header pill stays. */ @media (min-width: 769px) { body.is-about .back-btn--header, body.is-legal .back-btn--header { display: none; } .page-about .about > .back-btn--about { position: static; display: inline-flex; align-self: flex-start; } .about-names { padding-bottom: 100px; } } @media (max-width: 768px) { body.is-about .page-about .about > .back-btn--about, body.is-legal .page-about .about > .back-btn--about { display: none; } } @media (max-width: 768px) { .page-about { height: auto; overflow: visible; display: block; } .page-about .col-left { height: auto; overflow: hidden; padding-top: 66px; position: static; } .page-about .ascii-gallery { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; } .page-about .ascii-marquee-strip { flex-direction: row; /* mobile: horizontal drift */ width: max-content; } .page-about .ascii-marquee-strip .media-ascii { width: 82vw; min-width: 82vw; /* design 2:3, matches product mobile gallery */ aspect-ratio: 2 / 3; flex-shrink: 0; } .page-about .col-right { position: static; height: auto; padding: 36px 14px 127px; } .about { width: 100%; gap: 33px; } .about-row { flex-direction: column; gap: 36px; } .about-label, .about-text { flex: none; width: 100%; } .about-names { justify-content: flex-start; } }