@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font-sans: "Inter", system-ui, sans-serif; --font-display: "Space Grotesk", sans-serif; --font-mono: "Space Grotesk", sans-serif; --color-bg-dark: #07080a; --color-text-primary: #fff; --color-text-secondary: #ffffff80; --color-accent-red: #e61b33; --color-accent-gold: #d4af37; --glass-border: #ffffff14; --poster-size-large: 440px; --poster-size-small: 140px; --active-x: 18vw; --active-y: 2vh; --br-x: 36vw; --br-y: 24vh; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* One "screen" of height. dvh tracks the mobile browser's collapsing toolbars, plain vh doesn't (it makes every section taller than what's visible). */ --app-h: 100vh; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } @supports (height: 100dvh) { :root { --app-h: 100dvh; } } @media (width <= 1024px) { :root { --poster-size-large: 340px; --poster-size-small: 100px; --active-x: 12vw; --active-y: 2vh; --br-x: 30vw; --br-y: 26vh; } } @media (width <= 768px) { :root { --poster-size-large: 260px; --poster-size-small: 85px; --active-x: 0vw; --active-y: -14vh; --br-x: 25vw; --br-y: 6vh; } } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { background-color: var(--color-bg-dark); width: 100vw; height: var(--app-h); font-family: var(--font-sans); color: var(--color-text-primary); overscroll-behavior: none; overflow: hidden; } #root { width: 100%; height: 100%; } .app-root { z-index: 1; width: 100vw; height: var(--app-h); position: relative; overflow: hidden; } /* ---------- Boot intro (3D ball) ---------- */ /* Layers, back to front: black stage (fades out) -> transparent WebGL canvas (the ball, which flies off over the revealed site). carries .is-booting while the intro is running and .no-intro when it is skipped/aborted. */ .boot-loader { position: fixed; inset: 0; z-index: 10000; cursor: pointer; } .no-intro .boot-loader { display: none; } .boot-loader.is-revealing { pointer-events: none; } .boot-backdrop { position: absolute; inset: 0; background: #000; } .boot-load { position: absolute; left: 50%; top: 50%; width: 72px; height: 2px; margin: -1px 0 0 -36px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; transition: opacity 0.25s; } .boot-load::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--color-accent-red); animation: bootLoad 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .boot-loader.is-playing .boot-load { opacity: 0; } @keyframes bootLoad { from { transform: translateX(-100%); } to { transform: translateX(250%); } } #boot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .boot-skip { position: absolute; right: 28px; bottom: 24px; pointer-events: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2.5px; color: rgba(255, 255, 255, 0.28); } html.is-booting .navbar { opacity: 0; pointer-events: none; } .full-site { will-change: transform; width: 100%; position: absolute; top: 0; left: 0; transition: transform 0.5s var(--ease-premium); } .site-section { width: 100vw; height: var(--app-h); position: relative; overflow: hidden; } /* ---------- Navbar ---------- */ .navbar { z-index: 100; pointer-events: auto; background: rgba(10, 11, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; justify-content: space-between; align-items: center; width: calc(100% - 48px); max-width: 1200px; height: 68px; padding: 0 28px; display: flex; position: fixed; top: 24px; left: 50%; transform: translateX(-50%); box-shadow: rgba(0, 0, 0, 0.3) 0 10px 40px; transition: background 0.5s var(--ease-premium), opacity 0.7s ease; } .nav-logo-group { cursor: pointer; align-items: center; gap: 12px; display: flex; text-decoration: none; } .nav-logo-icon { opacity: 0.95; width: auto; height: 28px; display: block; object-fit: contain; } .nav-logo-text { opacity: 0.95; width: auto; height: 12px; margin-top: 1px; display: block; object-fit: contain; } @media (width <= 768px) { .nav-logo-icon { height: 22px; } .nav-logo-text { height: 10px; } } .shop-nav-btn { color: #fff; font-family: var(--font-mono); letter-spacing: 1.5px; cursor: pointer; background: var(--color-accent-red); border: none; border-radius: 50px; align-items: center; gap: 8px; padding: 10px 22px; font-size: 11.5px; font-weight: 700; text-decoration: none; transition: 0.3s var(--ease-premium); display: flex; box-shadow: rgba(230, 27, 51, 0.25) 0 4px 15px; } .shop-nav-btn:hover { color: #121212; background: #fff; transform: translateY(-1px); box-shadow: rgba(255, 255, 255, 0.2) 0 4px 20px; } .nav-actions { display: flex; align-items: center; gap: 14px; } .nav-3d-link { color: #fff; font-family: var(--font-mono); letter-spacing: 1.5px; font-size: 11.5px; font-weight: 700; text-decoration: none; padding: 10px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.18); transition: 0.3s var(--ease-premium); } .nav-3d-link:hover, .nav-3d-link.is-current { color: #121212; background: #fff; } .theme-light .nav-3d-link { color: #121212; border-color: rgba(18,18,18,0.18); } .theme-light .nav-3d-link:hover, .theme-light .nav-3d-link.is-current { color: #fff; background: #121212; } .theme-light .shop-nav-btn { color: #fff; background: #121212; box-shadow: rgba(18, 18, 18, 0.15) 0 4px 15px; } .theme-light .shop-nav-btn:hover { color: #fff; background: var(--color-accent-red); box-shadow: rgba(230, 27, 51, 0.25) 0 4px 20px; } .theme-light .nav-logo-text, .theme-light .nav-logo-icon { filter: invert(1) brightness(0.1); } /* navbar while the white hero is showing (class toggled on by main.js) */ html.hero-light .navbar { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.08); box-shadow: rgba(20, 30, 60, 0.10) 0 10px 40px; } html.hero-light .nav-logo-text, html.hero-light .nav-logo-icon { filter: invert(1) brightness(0.1); } html.hero-light .nav-3d-link { color: #121212; border-color: rgba(18, 18, 18, 0.2); } html.hero-light .nav-3d-link:hover { color: #fff; background: #121212; } /* ---------- Section 1: Hero ---------- */ .hero-section { background: #fff; position: relative; } /* White stage; the only motion is sparse smoke drifting right -> left along the bottom, painted on the canvas by js/hero-bg.js. */ .hero-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f2f4f8 100%); } .hero-waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-overlay { display: none; } .hero-product { pointer-events: none; user-select: none; width: auto; height: 84vh; position: absolute; top: 50%; right: -4%; transform: translateY(-50%); filter: drop-shadow(0 24px 30px rgba(20, 30, 60, 0.28)); } .hero-content { z-index: 5; max-width: 600px; position: absolute; top: 50%; left: 8vw; transform: translateY(-50%); } .hero-eyebrow { font-family: var(--font-mono); letter-spacing: 4px; text-transform: uppercase; color: rgba(18, 18, 26, 0.55); margin-bottom: 22px; font-size: 10px; font-weight: 600; } .hero-brand-text { filter: invert(1) brightness(0.08); width: auto; height: 30px; margin-bottom: 28px; display: block; } .hero-tagline { font-family: var(--font-display); color: #0c0c12; letter-spacing: -1.5px; margin-bottom: 34px; font-size: 58px; font-weight: 700; line-height: 1.08; } .hero-divider { background: var(--color-accent-red); border-radius: 2px; width: 52px; height: 3px; margin-bottom: 36px; } .hero-cta-btn { color: #fff; font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; background: var(--color-accent-red); border-radius: 50px; align-items: center; gap: 10px; padding: 15px 30px; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: 0.3s var(--ease-premium); display: inline-flex; box-shadow: rgba(230, 27, 51, 0.45) 0 8px 32px; } .hero-cta-btn:hover { background: #ff2244; transform: translateY(-3px); box-shadow: rgba(230, 27, 51, 0.6) 0 14px 44px; } .hero-scroll-hint { cursor: pointer; color: rgba(18, 18, 26, 0.45); font-family: var(--font-mono); letter-spacing: 2.5px; text-transform: uppercase; z-index: 10; user-select: none; flex-direction: column; align-items: center; gap: 6px; font-size: 9.5px; transition: color 0.3s; animation: heroScrollBounce 2.2s ease-in-out infinite; display: flex; position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); } .hero-scroll-hint:hover { color: rgba(18, 18, 26, 0.85); } @keyframes heroScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } @media (width <= 1024px) { .hero-tagline { font-size: 44px; } .hero-content { left: 6vw; } } @media (width <= 768px) { .hero-tagline { letter-spacing: -0.5px; font-size: 34px; } .hero-content { max-width: 100%; left: 5vw; right: 5vw; } .hero-brand-text { height: 22px; } .hero-product { display: none; } } /* ---------- Section 2: Slideshow (ball-line carousel) ---------- */ .vertical-explore-tag { transform-origin: 0 center; font-family: var(--font-mono); letter-spacing: 3px; color: rgba(255, 255, 255, 0.45); z-index: 10; pointer-events: none; white-space: nowrap; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; transition: color 0.8s; display: flex; position: absolute; top: 50%; left: 24px; transform: translateY(-50%) rotate(-90deg); } .theme-light .vertical-explore-tag { color: rgba(18, 18, 18, 0.45); } .explore-dot { background-color: currentColor; border-radius: 50%; width: 6px; height: 6px; animation: exploreDotPulse 2s ease-in-out infinite; } @keyframes exploreDotPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } } @media (width <= 768px) { .vertical-explore-tag { letter-spacing: 2px; font-size: 9px; left: 12px; } } .background-wrapper { pointer-events: none; z-index: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.8s ease-in-out; } .bg-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } .slideshow-watermark { pointer-events: none; z-index: 0; width: 68vh; height: 68vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slideshow-watermark img { width: 100%; height: 100%; object-fit: contain; transition: filter 1.2s, opacity 1.2s, transform 1.5s var(--ease-premium); } @media (width <= 768px) { .slideshow-watermark { width: 95vw; height: 95vw; top: 42%; left: auto; right: -42vw; transform: translateY(-50%); } } .ball-stage-container { z-index: 9; pointer-events: none; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; } .ball-wrapper { pointer-events: auto; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; transition: transform 0.75s var(--ease-premium), opacity 0.6s var(--ease-premium); } .ball-wrapper[data-role="active"] { transform: translate(var(--active-x), var(--active-y)) scale(1); opacity: 1; z-index: 10; } .ball-wrapper[data-role="br"] { transform: translate(var(--br-x), var(--br-y)) scale(0.25); opacity: 1; z-index: 5; } .ball-wrapper[data-role="hidden"] { transform: translate(var(--br-x), var(--br-y)) scale(0.1); opacity: 0; z-index: 5; } .ball-element { width: var(--poster-size-large); height: var(--poster-size-large); object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 25px 45px); z-index: 2; will-change: transform, filter; transition: filter 0.35s var(--ease-premium), transform 0.35s var(--ease-premium); } .ball-wrapper:hover .ball-element { filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 35px 60px); transform: translateY(-8px) scale(1.03); } .text-stage-container { z-index: 10; pointer-events: none; width: 340px; position: absolute; top: 50%; left: 7vw; transform: translateY(-50%); } @media (width <= 1024px) { .text-stage-container { width: 280px; left: 40px; } } @media (width <= 768px) { .text-stage-container { text-align: center; width: 88%; top: auto; bottom: 96px; left: 50%; transform: translateX(-50%); } } .text-slide { pointer-events: auto; flex-direction: column; gap: 18px; width: 100%; display: flex; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.5s var(--ease-premium); } .text-slide.is-active { opacity: 1; } @media (width <= 768px) { .text-slide { align-items: center; position: relative; top: auto; transform: none; gap: 12px; } .slide-desc { font-size: 13px; line-height: 1.55; } } .slide-bg-number { font-family: var(--font-display); color: rgba(0, 0, 0, 0); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08); z-index: -1; user-select: none; font-size: 150px; font-weight: 300; line-height: 0.8; position: absolute; top: -95px; left: -20px; } @media (width <= 768px) { .slide-bg-number { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05); font-size: 110px; top: -85px; left: 50%; transform: translateX(-50%); } } .slide-tag { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 3px; align-self: flex-start; font-size: 10px; font-weight: 600; } @media (width <= 768px) { .slide-tag { align-self: center; } } .slide-title { font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(rgb(255, 255, 255) 30%, rgb(162, 168, 178) 100%) text; -webkit-text-fill-color: transparent; font-size: 52px; font-weight: 700; line-height: 1.05; } @media (width <= 1024px) { .slide-title { letter-spacing: 1px; font-size: 38px; } } .slide-divider-wrapper { align-items: center; width: 100%; height: 15px; display: flex; position: relative; } .slide-divider-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%); width: 100%; height: 1px; } .slide-divider-dot { border-radius: 50%; width: 6px; height: 6px; position: absolute; left: 0; transition: background-color 0.5s, box-shadow 0.5s; } @media (width <= 768px) { .slide-divider-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%); } .slide-divider-dot { left: 50%; transform: translateX(-50%); } } .slide-desc { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.84); font-size: 14.5px; font-weight: 400; line-height: 1.8; } .slide-cta { font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; align-items: center; margin-top: 6px; font-size: 11.5px; font-weight: 600; text-decoration: none; transition: 0.3s; display: inline-flex; background: none; border: none; } .slide-cta svg { transition: transform 0.3s; } .slide-cta:hover svg { transform: translateX(6px); } .theme-light .slide-title { background: linear-gradient(rgb(18, 18, 18) 30%, rgb(90, 95, 104) 100%) text; } .theme-light .slide-desc { color: rgba(18, 18, 18, 0.62); } .theme-light .slide-bg-number { -webkit-text-stroke: 1px rgba(18, 18, 18, 0.08); } .theme-light .slide-divider-line { background: linear-gradient(90deg, rgba(18, 18, 18, 0.2) 0%, rgba(18, 18, 18, 0) 100%); } .scroll-footer { z-index: 10; pointer-events: none; flex-direction: column; align-items: center; gap: 8px; display: flex; position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); transition: opacity 0.5s var(--ease-premium); } .scroll-text { letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-secondary); font-size: 10px; font-weight: 500; } .mouse-icon { border: 1.5px solid var(--color-text-secondary); border-radius: 10px; width: 18px; height: 28px; position: relative; } .mouse-wheel { background: var(--color-text-primary); border-radius: 1.5px; width: 3px; height: 6px; animation: scrollWheel 1.8s ease-in-out infinite; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); } @keyframes scrollWheel { 0% { opacity: 1; top: 5px; } 50% { opacity: 0; top: 12px; } 100% { opacity: 1; top: 5px; } } /* ---------- Section 3: About / Workshop card ---------- */ .about-section { background: rgb(7, 8, 10); align-items: stretch; display: flex; position: relative; overflow: hidden; } .about-bg-glow { pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(230, 27, 51, 0.067) 0%, rgba(0, 0, 0, 0) 70%); width: 500px; height: 500px; position: absolute; top: 30%; right: 10%; } .about-left { z-index: 2; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 80px 24px; gap: 28px; display: flex; position: relative; } /* ---- Workshop header ---- */ .workshop-header { text-align: center; flex-direction: column; align-items: center; gap: 6px; display: flex; } /* ---- 3 full ball-line cards, carousel ---- */ .workshop-carousel { position: relative; width: 100%; max-width: 900px; height: 500px; display: flex; align-items: center; justify-content: center; } .ball-card { flex-direction: column; display: flex; position: absolute; top: 50%; left: 50%; cursor: pointer; width: 280px; height: 440px; border-radius: 28px; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.1); box-shadow: rgba(0, 0, 0, 0.55) 0 25px 45px; transition: transform 0.6s var(--ease-premium), opacity 0.6s var(--ease-premium), box-shadow 0.4s; } .ball-card-bg { position: absolute; inset: 0; z-index: 0; } .ball-card[data-offset="0"] { transform: translate(-50%, -50%) scale(1.08); opacity: 1; z-index: 3; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.65) 0 35px 65px; } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(255px) scale(0.82); opacity: 0.45; z-index: 2; } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-255px) scale(0.82); opacity: 0.45; z-index: 2; } .ball-card[data-offset="1"]:hover, .ball-card[data-offset="-1"]:hover { opacity: 0.75; } .g-crimson { background: linear-gradient(160deg, rgb(58, 13, 24) 0%, rgb(12, 4, 6) 45%, rgb(230, 27, 51) 130%); } .g-silver { background: linear-gradient(160deg, rgb(42, 46, 53) 0%, rgb(11, 14, 11) 45%, rgb(84, 242, 99) 130%); } .g-rose { background: linear-gradient(160deg, rgb(58, 13, 40) 0%, rgb(12, 4, 8) 45%, rgb(234, 51, 126) 130%); } .ball-card-content { z-index: 1; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 100%; height: 100%; padding: 32px 26px; display: flex; } .ball-card-img { object-fit: contain; height: 110px; filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 15px 30px); animation: cardImgFloat 4s ease-in-out infinite; margin-bottom: 4px; } @keyframes cardImgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ball-card-tag { font-family: var(--font-mono); letter-spacing: 2px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; font-size: 9.5px; font-weight: 700; } .ball-card-tag-dark { color: rgba(18, 18, 18, 0.5); } .ball-card-title-sm { font-family: var(--font-display); color: #fff; font-size: 24px; font-weight: 800; } .ball-card-title-dark { color: #121212; } .ball-card-desc { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.65); font-size: 12.5px; line-height: 1.6; flex-grow: 1; } .ball-card-desc-dark { color: rgba(18, 18, 18, 0.65); } .ball-card-link { font-family: var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-primary); font-size: 10.5px; font-weight: 700; text-decoration: none; align-items: center; gap: 6px; display: inline-flex; margin-top: auto; } .ball-card-link-dark { color: #121212; } .ball-card[data-offset="0"] .ball-card-link { pointer-events: auto; } .ball-card[data-offset="1"] .ball-card-link, .ball-card[data-offset="-1"] .ball-card-link { pointer-events: none; } /* ---- shared craft strip ---- */ .craft-strip { z-index: 1; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 440px; display: flex; position: relative; } .labs-card-header { justify-content: space-between; align-items: flex-start; margin-bottom: 12px; display: flex; } .labs-card-eyebrow { font-family: var(--font-mono); letter-spacing: 2px; color: var(--color-accent-red); font-size: 8.5px; font-weight: 700; } .labs-card-title { font-family: var(--font-display); color: #fff; margin-top: 2px; font-size: 22px; font-weight: 800; } .labs-status-dot-wrapper { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; align-items: center; gap: 6px; padding: 4px 10px; display: flex; } .labs-status-dot { background: var(--color-accent-red); border-radius: 50%; width: 6px; height: 6px; animation: pulseGlow 2s ease infinite; box-shadow: var(--color-accent-red) 0 0 6px; } @keyframes pulseGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .labs-status-text { font-family: var(--font-mono); color: #fff; font-size: 8px; font-weight: 700; } .labs-card-short-desc { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.7); margin-bottom: 22px; font-size: 13.5px; line-height: 1.65; } .labs-card-pills { flex-wrap: wrap; gap: 8px; margin-bottom: 24px; display: flex; } .card-pill { font-family: var(--font-mono); color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 6px 12px; font-size: 9.5px; font-weight: 700; transition: 0.3s; } .card-pill:hover { background: rgba(230, 27, 51, 0.15); border-color: rgba(230, 27, 51, 0.4); } .labs-card-toggle-btn { font-family: var(--font-mono); letter-spacing: 1px; color: #fff; cursor: pointer; text-align: center; background: none; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 12px; width: 100%; padding: 12px; font-size: 10px; font-weight: 700; transition: 0.3s; } .labs-card-toggle-btn:hover { color: var(--color-accent-red); background: rgba(230, 27, 51, 0.08); border-color: var(--color-accent-red); } .labs-card-drawer { max-height: 0; transition: max-height 0.5s var(--ease-premium); overflow: hidden; } .labs-card-drawer.expanded { max-height: 320px; } .drawer-content { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 18px; padding-top: 18px; } .drawer-content p { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.55); font-size: 12px; line-height: 1.6; } @media (width <= 1024px) { .about-left { padding: 60px 24px; } .craft-strip { max-width: 100%; } .workshop-carousel { max-width: 100%; height: 460px; } .ball-card { width: 230px; height: 380px; } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(190px) scale(0.78); } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-190px) scale(0.78); } } @media (width <= 768px) { .about-section { overflow-y: auto; } .about-left { padding: 56px 20px 40px; gap: 18px; } .workshop-carousel { height: 340px; } .ball-card { width: 190px; height: 290px; } .ball-card[data-offset="0"] { transform: translate(-50%, -50%) scale(1.04); } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(88px) scale(0.62); } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-88px) scale(0.62); } .ball-card-content { padding: 20px 16px; gap: 6px; } .ball-card-img { height: 62px; margin-bottom: 2px; } .ball-card-title-sm { font-size: 18px; } .ball-card-desc { font-size: 11px; line-height: 1.5; } .ball-card-tag { font-size: 8.5px; } .ball-card-link { font-size: 9px; } } /* ---------- Section 4: Reviews ---------- */ .reviews-section-new { color: #121212; z-index: 10; background-color: rgb(250, 247, 240); flex-direction: column; justify-content: center; align-items: center; width: 100%; height: var(--app-h); padding: 108px 48px 32px; display: flex; position: relative; overflow: hidden; } .reviews-header { text-align: center; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; margin-bottom: 8px; display: flex; } .reviews-tag { font-family: var(--font-mono); letter-spacing: 4px; color: var(--color-accent-red); text-transform: uppercase; font-size: 10px; font-weight: 700; } .reviews-title { font-family: var(--font-display); letter-spacing: -1.5px; text-transform: uppercase; color: #121212; font-size: 52px; font-weight: 800; line-height: 1.1; } .reviews-desc { font-family: var(--font-sans); color: #555; font-size: 14.5px; line-height: 1.6; } .swiper-container-wrapper { justify-content: center; align-items: center; gap: 20px; width: 100%; max-width: 1200px; display: flex; position: relative; } .reels-swiper-track { --fc-row: clamp(150px, calc((var(--app-h) - 470px) / 2), 250px); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--fc-row)); gap: 14px; width: 100%; padding: 8px 0; scrollbar-width: none; scroll-behavior: smooth; } .reels-swiper-track::-webkit-scrollbar { display: none; } .factory-card { --p: 0; scroll-snap-align: start; min-width: 0; min-height: 0; position: relative; overflow: hidden; isolation: isolate; background: #0d0d10; border-radius: 32px; box-shadow: rgba(0, 0, 0, 0.14) 0 16px 32px; transition: transform 0.5s var(--ease-premium), box-shadow 0.45s; } .factory-card:hover { transform: scale(1.025); box-shadow: rgba(230, 27, 51, 0.22) 0 20px 40px; z-index: 3; } /* bento placement + shapes */ .fc-a { grid-column: 1 / 3; grid-row: 1 / 3; } .fc-b { grid-column: 3 / 5; grid-row: 1; } .fc-e { grid-column: 5 / 7; grid-row: 1 / 3; border-radius: 150px 32px 32px 32px; } .factory-team { grid-column: 7 / 10; grid-row: 1; } .fc-d { grid-column: 3 / 5; grid-row: 2; border-radius: 32px 120px 32px 32px; } .fc-c { grid-column: 7 / 9; grid-row: 2; border-radius: 999px 999px 32px 32px; } .factory-stat { grid-column: 9; grid-row: 2; } .reels-swiper-track:has(.factory-team[hidden]) .fc-c { grid-row: 1 / 3; } .reels-swiper-track:has(.factory-team[hidden]) .factory-stat { grid-row: 1 / 3; } .factory-team[hidden] { display: none !important; } .factory-team { position: relative; overflow: hidden; isolation: isolate; min-width: 0; min-height: 0; margin: 0; scroll-snap-align: start; background: #0d0d10; border-radius: 32px 32px 120px 32px; box-shadow: rgba(0, 0, 0, 0.14) 0 16px 32px; transition: transform 0.5s var(--ease-premium); } .factory-team:hover { transform: scale(1.025); z-index: 3; } .ft-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; } .factory-team .fc-shade { background: linear-gradient(to top, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.4) 34%, rgba(8, 8, 10, 0) 60%); } .factory-team .fc-info { bottom: 22px; } .fc-a .fc-title { font-size: 28px; } .fc-a .fc-desc { font-size: 13.5px; max-width: 30ch; } .fc-c .fc-top { top: 56px; left: 12px; right: 12px; justify-content: center; } .fc-c .fc-info { text-align: center; align-items: center; left: 16px; right: 16px; bottom: 30px; } .fc-c .fc-title { font-size: 18px; } .fc-e .fc-top { top: 22px; left: 84px; } .fc-e .fc-title { font-size: 28px; } .fc-e .fc-desc { font-size: 13.5px; max-width: 28ch; } .fc-e .fc-video, .fc-e .fc-poster { filter: brightness(1.18) contrast(1.06) saturate(1.08); } .fc-e .fc-shade { background: linear-gradient(to top, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.4) 24%, rgba(8, 8, 10, 0) 44%), linear-gradient(to bottom, rgba(8, 8, 10, 0.35) 0%, rgba(8, 8, 10, 0) 18%); } .factory-stat { position: relative; overflow: hidden; isolation: isolate; min-width: 0; min-height: 0; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 16px; border-radius: 32px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #ff4d63 0%, var(--color-accent-red) 45%, #8f0c1f 100%); box-shadow: rgba(230, 27, 51, 0.28) 0 18px 36px; } .factory-stat::before { content: ""; position: absolute; inset: 9px; border-radius: 24px; z-index: 1; pointer-events: none; border: 1.5px dashed rgba(255, 255, 255, 0.5); } .fs-mark { position: absolute; z-index: 0; right: -26px; top: -6px; width: 96px; height: auto; opacity: 0.16; transform: rotate(14deg); filter: brightness(0) invert(1); pointer-events: none; } .fs-kicker { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 2px; opacity: 0.85; } .fs-num { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(46px, 4.6vw, 66px); font-weight: 800; line-height: 0.95; letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1.5px #fff; } .fs-unit { position: relative; z-index: 2; margin-top: 6px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; line-height: 1.35; max-width: 11ch; } .fc-poster, .fc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fc-video { opacity: 0; transition: opacity 0.5s; } .factory-card[data-state="playing"] .fc-video { opacity: 1; } .fc-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8, 8, 10, 0.94) 0%, rgba(8, 8, 10, 0.6) 30%, rgba(8, 8, 10, 0) 58%), linear-gradient(to bottom, rgba(8, 8, 10, 0.5) 0%, rgba(8, 8, 10, 0) 24%); } .fc-top { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 8px; pointer-events: none; } .fc-step { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #fff; background: var(--color-accent-red); padding: 5px 9px; border-radius: 99px; } .fc-kicker { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; background: rgba(8, 8, 10, 0.4); border: 1px solid rgba(255, 255, 255, 0.16); padding: 5px 10px; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .fc-info { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 26px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .fc-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; color: #fff; } .fc-desc { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.74); } .fc-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.16); pointer-events: none; } .fc-progress i { display: block; height: 100%; background: var(--color-accent-red); transform-origin: left; transform: scaleX(var(--p)); } .fc-toggle { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; background: none; border: 0; border-radius: inherit; cursor: pointer; } .fc-toggle:focus-visible { outline: 3px solid var(--color-accent-red); outline-offset: -3px; } .fc-icon { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: rgba(0, 0, 0, 0.3) 0 8px 24px; opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.4s var(--ease-premium), background 0.3s; } .fc-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #121212; } .factory-card[data-state="idle"] .fc-icon, .factory-card[data-state="paused"] .fc-icon { opacity: 1; transform: none; } .factory-card[data-state="playing"] .fc-icon::before { width: 4px; height: 16px; margin: -8px 0 0 -8px; border: 0; background: #121212; box-shadow: 8px 0 0 #121212; } .factory-card[data-state="playing"]:hover .fc-icon { opacity: 0.9; transform: none; } .factory-card:hover .fc-icon { background: var(--color-accent-red); } .factory-card:hover .fc-icon::before { border-left-color: #fff; } .factory-card[data-state="playing"]:hover .fc-icon::before { background: #fff; box-shadow: 8px 0 0 #fff; } .swiper-nav-btn { color: #121212; cursor: pointer; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 48px; height: 48px; transition: 0.3s; display: flex; box-shadow: rgba(0, 0, 0, 0.04) 0 4px 15px; } .swiper-nav-btn:hover { color: #fff; background: #121212; border-color: #121212; transform: scale(1.05); } @media (width <= 768px) { .reviews-section-new { padding: 60px 20px 40px; } .reviews-title { font-size: 36px; } .swiper-nav-btn { z-index: 25; border: 1px solid rgba(0, 0, 0, 0.1); width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.85); } .swiper-nav-btn.prev { left: 12px; } .swiper-nav-btn.next { right: 12px; } } /* ---------- Section 5: Story ---------- */ .founder-section-new { color: #121212; z-index: 10; background-color: rgb(250, 247, 240); flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: var(--app-h); padding: 80px 48px; display: flex; position: relative; overflow: hidden; } .founder-section-new::before { content: ""; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(18, 18, 18, 0.02) 0%, rgba(0, 0, 0, 0) 70%); width: 700px; height: 700px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .founder-grid-new { z-index: 1; justify-content: center; align-items: center; gap: 60px; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; } .founder-info-left { color: #121212; flex-direction: column; flex: 1.2; align-items: flex-start; display: flex; } .founder-eyebrow-new { font-family: var(--font-mono); letter-spacing: 3px; color: var(--color-accent-red); margin-bottom: 12px; font-size: 10px; font-weight: 700; } .founder-heading-new { font-family: var(--font-display); color: #121212; letter-spacing: -1.5px; margin-bottom: 20px; font-size: 52px; font-weight: 800; line-height: 1.1; } .heading-sub-new { color: rgba(18, 18, 18, 0.35); } .founder-bio-new { font-family: var(--font-sans); color: rgba(18, 18, 18, 0.65); max-width: 460px; margin-bottom: 30px; font-size: 14.5px; line-height: 1.7; } .founder-actions-new { gap: 12px; margin-bottom: 40px; display: flex; } .founder-btn-primary { color: #fff; font-family: var(--font-sans); cursor: pointer; background: #121212; border: none; border-radius: 30px; padding: 12px 28px; font-size: 13.5px; font-weight: 600; transition: 0.3s; text-decoration: none; display: inline-block; } .founder-btn-primary:hover { background: var(--color-accent-red); transform: translateY(-2px); box-shadow: rgba(230, 27, 51, 0.2) 0 8px 20px; } .founder-btn-secondary { color: #121212; font-family: var(--font-sans); text-align: center; background: #e9ecef; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 30px; padding: 12px 28px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: 0.3s; display: inline-block; } .founder-btn-secondary:hover { background: #dee2e6; transform: translateY(-2px); } .founder-stats-new { gap: 36px; display: flex; } .founder-stat-item { flex-direction: column; gap: 4px; display: flex; } .stat-value-new { font-family: var(--font-display); color: #121212; font-size: 32px; font-weight: 700; } .stat-label-new { font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: rgba(18, 18, 18, 0.45); font-size: 9px; font-weight: 600; } .founder-portrait-right { flex: 0.9; justify-content: center; align-items: center; display: flex; position: relative; } .portrait-image-container { width: 320px; height: 380px; position: relative; overflow: visible; } .founder-portrait-img { object-fit: contain; width: 100%; height: 100%; z-index: 1; } .founder-floating-card { z-index: 10; background: rgba(18, 18, 18, 0.88); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; justify-content: space-between; align-items: flex-end; width: 250px; padding: 16px 20px; display: flex; position: absolute; bottom: 24px; left: -40px; box-shadow: rgba(0, 0, 0, 0.25) 0 20px 40px; } .floating-card-content { color: #fff; flex-direction: column; gap: 4px; display: flex; } .floating-card-tag { font-family: var(--font-mono); letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); font-size: 8px; font-weight: 700; } .floating-card-content h4 { font-family: var(--font-display); color: #fff; margin: 0; font-size: 14px; font-weight: 700; } .floating-card-content p { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 11px; line-height: 1.4; } .founder-footer-copyright { font-family: var(--font-mono); letter-spacing: 1.5px; color: rgba(18, 18, 18, 0.25); text-transform: uppercase; z-index: 2; font-size: 10px; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); } @media (width <= 1024px) { .founder-heading-new { font-size: 42px; } .founder-grid-new { gap: 40px; } } @media (width <= 992px) { .founder-section-new { padding: 80px 24px 60px; overflow-y: auto; } .founder-grid-new { flex-direction: column-reverse; align-items: center; gap: 50px; max-width: 500px; } .founder-info-left { text-align: center; align-items: center; width: 100%; } .founder-bio-new { max-width: 100%; } .founder-actions-new, .founder-stats-new { justify-content: center; width: 100%; } .founder-portrait-right { width: 100%; } .founder-floating-card { width: 100%; max-width: 280px; bottom: -15px; left: 50%; transform: translateX(-50%); } } @media (width <= 480px) { .founder-heading-new { font-size: 34px; } .portrait-image-container { width: 260px; height: 310px; } .founder-actions-new { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; } .founder-stats-new { gap: 20px; } .stat-value-new { font-size: 24px; } } /* ---------- Detail pages (/red /white /pink) ---------- */ .ball-detail-page-container { color: #121212; width: 100%; min-height: 100vh; font-family: var(--font-sans); background-color: rgb(250, 247, 240); } .detail-navbar { z-index: 100; background-color: rgba(250, 247, 240, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); justify-content: space-between; align-items: center; height: 80px; padding: 0 48px; display: flex; position: sticky; top: 0; } .detail-nav-left { cursor: pointer; color: #121212; align-items: center; gap: 10px; transition: color 0.3s, transform 0.3s; display: flex; text-decoration: none; } .detail-nav-left:hover { color: var(--color-accent-red); transform: translateX(-4px); } .back-btn-text { font-family: var(--font-mono); letter-spacing: 2px; font-size: 11.5px; font-weight: 700; } .detail-nav-logo { cursor: pointer; filter: invert(1) brightness(0.1); align-items: center; gap: 12px; display: flex; text-decoration: none; } .detail-logo-icon { width: auto; height: 28px; } .detail-logo-text { width: auto; height: 12px; } .detail-nav-shop-btn { color: #121212; font-family: var(--font-mono); letter-spacing: 1.5px; border: 1px solid #121212; border-radius: 30px; align-items: center; padding: 8px 20px; font-size: 10px; font-weight: 700; text-decoration: none; transition: 0.3s; display: inline-flex; } .detail-nav-shop-btn:hover { color: #fff; background-color: #121212; } .detail-content { max-width: 1200px; margin: 0 auto; padding: 60px 24px; } .detail-intro { text-align: center; flex-direction: column; align-items: center; gap: 16px; max-width: 700px; margin: 0 auto 60px; display: flex; } .detail-intro-tag { font-family: var(--font-mono); letter-spacing: 4px; font-size: 11px; font-weight: 700; } .detail-intro-title { font-family: var(--font-display); letter-spacing: -1px; color: #121212; text-transform: uppercase; font-size: 46px; font-weight: 800; } .detail-intro-desc { color: #555; font-size: 15px; line-height: 1.65; } .bulk-promo { align-items: center; gap: 12px; max-width: 640px; margin: 24px auto 0; background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 16px; padding: 14px 20px; display: flex; } .bulk-promo-icon { font-size: 18px; flex-shrink: 0; } .bulk-promo p { color: #665a2c; font-size: 12.5px; line-height: 1.5; text-align: left; } .bulk-promo code { font-family: var(--font-mono); background: rgba(212, 175, 55, 0.18); border-radius: 4px; padding: 1px 6px; font-weight: 700; color: #4d420f; } @media (width <= 768px) { .bulk-promo { flex-direction: column; text-align: center; } .bulk-promo p { text-align: center; } } .variations-grid { gap: 40px; margin-top: 40px; display: grid; } .variations-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .variations-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-left: auto; margin-right: auto; } .variation-card { text-align: center; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 24px; flex-direction: column; align-items: center; padding: 32px; transition: transform 0.4s var(--ease-premium), box-shadow 0.4s; display: flex; box-shadow: rgba(0, 0, 0, 0.03) 0 10px 30px; } .variation-card:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.06) 0 20px 45px; } .variation-img-wrapper { justify-content: center; align-items: center; width: 220px; height: 220px; margin-bottom: 24px; display: flex; position: relative; } .variation-img { object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 15px 30px); z-index: 2; width: 100%; height: 100%; transition: transform 0.4s; } .variation-card:hover .variation-img { transform: translateY(-5px) scale(1.03); } .variation-info { flex-direction: column; align-items: center; gap: 12px; width: 100%; display: flex; } .variation-tag { font-family: var(--font-mono); color: #777; letter-spacing: 2px; font-size: 9px; font-weight: 700; } .variation-title { font-family: var(--font-display); color: #121212; letter-spacing: -0.5px; font-size: 22px; font-weight: 800; } .variation-tagline { font-family: var(--font-sans); letter-spacing: 0.5px; font-size: 13.5px; font-weight: 600; } .variation-desc { color: #666; font-size: 13px; line-height: 1.6; } .feature-list { text-align: left; list-style: none; width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; } .feature-list li { font-family: var(--font-sans); color: #555; font-size: 12px; line-height: 1.45; padding-left: 14px; position: relative; } .feature-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.45; position: absolute; left: 0; top: 0.55em; } .packaging-band { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: center; margin: 0 0 64px; padding: 28px; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; box-shadow: rgba(0,0,0,0.03) 0 10px 30px; } .packaging-copy { display: flex; flex-direction: column; gap: 12px; } .packaging-kicker { font-family: var(--font-mono); letter-spacing: 2px; font-size: 10px; font-weight: 700; color: #888; } .packaging-copy h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.5px; } .packaging-copy p { color: #555; font-size: 14px; line-height: 1.65; } .packaging-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .packaging-photos img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; background: #f3f1eb; } .craft-hero { max-width: 820px; margin: 0 auto 48px; text-align: center; } .craft-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 960px; margin: 0 auto 56px; } .craft-stat { background: #fff; border-radius: 18px; padding: 22px 16px; text-align: center; border: 1px solid rgba(0,0,0,0.05); } .craft-stat strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: 6px; } .craft-stat span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: #888; font-weight: 700; } .craft-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0 56px; } .craft-gallery img, .craft-gallery video { width: 100%; height: 220px; object-fit: cover; border-radius: 18px; background: #eee; } .craft-gallery figure:nth-child(1), .craft-gallery figure:nth-child(6) { grid-column: span 2; } .craft-gallery figure:nth-child(1) img, .craft-gallery figure:nth-child(6) img { height: 320px; } .craft-gallery figcaption { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: #999; margin-top: 8px; text-align: center; } @media (width <= 1024px) { .packaging-band, .craft-stats { grid-template-columns: 1fr 1fr; } .craft-gallery { grid-template-columns: 1fr 1fr; } .craft-gallery figure:nth-child(1), .craft-gallery figure:nth-child(6) { grid-column: span 1; } .craft-gallery figure:nth-child(1) img, .craft-gallery figure:nth-child(6) img { height: 220px; } } @media (width <= 768px) { .packaging-band, .packaging-photos, .craft-stats, .craft-gallery { grid-template-columns: 1fr; } } .variation-price { align-items: baseline; gap: 6px; display: flex; } .variation-price-value { font-family: var(--font-display); color: #121212; font-size: 26px; font-weight: 800; } .variation-price-note { font-family: var(--font-mono); color: #999; letter-spacing: 0.5px; font-size: 9px; } .variation-specs-list { flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 20px; display: flex; } .spec-pill { font-family: var(--font-mono); color: #555; background-color: #f3f1eb; border-radius: 12px; padding: 6px 12px; font-size: 9px; font-weight: 700; } .variation-shop-btn { color: #fff; width: 100%; font-family: var(--font-mono); letter-spacing: 1.5px; background-color: #121212; border: none; border-radius: 16px; justify-content: center; align-items: center; gap: 8px; padding: 12px 24px; font-size: 11px; font-weight: 700; text-decoration: none; transition: 0.3s var(--ease-premium); display: flex; } .variation-shop-btn:hover { background-color: var(--color-accent-red); transform: translateY(-1px); box-shadow: rgba(255, 51, 68, 0.25) 0 8px 24px; } .shop-arrow { transition: transform 0.3s; } .variation-shop-btn:hover .shop-arrow { transform: translateX(4px); } .detail-footer { text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 40px 24px 20px; } .detail-footer span { font-family: var(--font-mono); letter-spacing: 1.5px; color: #999; font-size: 9px; } @media (width <= 1024px) { .variations-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (width <= 768px) { .detail-navbar { padding: 0 24px; } .back-btn-text, .detail-logo-text { display: none; } .detail-intro-title { font-size: 32px; } .variations-grid.cols-3, .variations-grid.cols-2 { grid-template-columns: 1fr; gap: 30px; } .variation-card { padding: 24px; } .variation-desc { min-height: auto; } } /* ---------- 3D inspect page (/3dball) ---------- */ .ball3d-page, .ball3d-page html, .ball3d-page body { background: #07080a; overflow: hidden; } .ball3d-root { background: #07080a; } #ball-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } #ball-canvas.is-dragging { cursor: grabbing; } .ball3d-copy-stage { z-index: 12; } .ball3d-copy-stage .text-slide { pointer-events: auto; } .ball3d-note { font-family: var(--font-sans); color: rgba(255, 255, 255, 0.45); font-size: 12px; line-height: 1.55; max-width: 320px; margin-top: 4px; } .theme-light .ball3d-note { color: rgba(18, 18, 18, 0.5); } .ball3d-picker { z-index: 12; position: absolute; right: 48px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; } .ball3d-pick { position: relative; width: 86px; height: 86px; padding: 8px; cursor: pointer; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.18); transition: transform 0.35s var(--ease-premium), border-color 0.35s, box-shadow 0.35s; } .ball3d-pick img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(rgba(0,0,0,0.35) 0 8px 12px); } .ball3d-pick span { position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 100%); font-family: var(--font-mono); letter-spacing: 1px; font-size: 9px; font-weight: 700; color: rgba(255, 255, 255, 0.55); } .ball3d-pick:hover { transform: translateY(-4px) scale(1.04); } .ball3d-pick.is-active { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.35) 0 12px 28px; } .theme-light .ball3d-pick { border-color: rgba(18, 18, 18, 0.16); background: rgba(255,255,255,0.35); } .theme-light .ball3d-pick span { color: rgba(18, 18, 18, 0.5); } .theme-light .ball3d-pick.is-active { border-color: rgba(18, 18, 18, 0.7); box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.08), rgba(0, 0, 0, 0.12) 0 12px 28px; } .ball3d-status { z-index: 4; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); letter-spacing: 2px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.72); transition: opacity 0.4s var(--ease-premium); } .ball3d-status.is-hidden { opacity: 0; } .ball3d-status.is-error { color: #ff8a96; } .theme-light .ball3d-status { color: rgba(18, 18, 18, 0.55); } @media (width <= 768px) { .ball3d-picker { flex-direction: row; right: auto; top: auto; bottom: 22px; left: 50%; transform: translateX(-50%); gap: 14px; } .ball3d-pick { width: 62px; height: 62px; } .ball3d-pick span { display: none; } .ball3d-note { max-width: 88%; } } /* ===================================================================== PHONES & TOUCH Everything below is the phone/touch layer. It comes last on purpose so it wins over the desktop defaults above. Breakpoints: <= 992 story section stacks + scrolls <= 768 phone layout (hero, slideshow, workshop, reviews) <= 640 navbar collapses to a menu button plus a short-landscape block (phones on their side). ===================================================================== */ /* ---- interaction basics (all sizes) ---- */ a, button, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #1a73ff; border-radius: 6px; } .hint-touch { display: none; } @media (hover: none) and (pointer: coarse) { .hint-mouse { display: none; } .hint-touch { display: inline; } .ball-wrapper:hover .ball-element { transform: none; } /* no sticky hover on touch */ .factory-card:hover, .stat-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- navbar menu (hidden on desktop) ---- */ .nav-menu-btn, .nav-menu-backdrop, .nav-menu-panel { display: none; } /* ---- story section: scrolls inside its own frame whenever it is taller than the screen ---- */ @media (width <= 992px) { .founder-section-new { height: var(--app-h); min-height: 0; justify-content: flex-start; padding: calc(var(--safe-top) + 92px) 24px calc(var(--safe-bottom) + 28px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .founder-grid-new { margin: auto; gap: 36px; } .founder-footer-copyright { position: static; transform: none; margin-top: 28px; text-align: center; color: rgba(18, 18, 18, 0.42); } } /* ---- navbar collapses ---- */ @media (width <= 640px) { .navbar { top: calc(var(--safe-top) + 10px); width: calc(100% - 20px); height: 56px; padding: 0 6px 0 16px; } .nav-actions { gap: 8px; } .nav-3d-link { display: none; } .shop-nav-btn { padding: 0 16px; min-height: 40px; font-size: 11px; letter-spacing: 1.2px; } .nav-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; cursor: pointer; transition: background 0.3s, color 0.3s; } html.hero-light .nav-menu-btn { color: #121212; background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } .nav-menu-bars { position: relative; width: 18px; height: 12px; display: block; } .nav-menu-bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease-premium), opacity 0.2s, top 0.35s var(--ease-premium); } .nav-menu-bars i:nth-child(1) { top: 0; } .nav-menu-bars i:nth-child(2) { top: 5px; } .nav-menu-bars i:nth-child(3) { top: 10px; } html.menu-open .nav-menu-bars i:nth-child(1) { top: 5px; transform: rotate(45deg); } html.menu-open .nav-menu-bars i:nth-child(2) { opacity: 0; } html.menu-open .nav-menu-bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); } .nav-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 98; background: rgba(4, 6, 12, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .nav-menu-panel { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 99; left: 10px; right: 10px; top: calc(var(--safe-top) + 74px); max-height: calc(var(--app-h) - var(--safe-top) - 90px); overflow-y: auto; padding: 10px; border-radius: 24px; background: rgba(14, 15, 20, 0.95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: rgba(0, 0, 0, 0.5) 0 24px 60px; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity 0.28s, transform 0.35s var(--ease-premium), visibility 0.28s; } html.menu-open .nav-menu-backdrop { opacity: 1; visibility: visible; } html.menu-open .nav-menu-panel { opacity: 1; visibility: visible; transform: none; } .nav-menu-link { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 16px; border-radius: 16px; color: #fff; text-decoration: none; font-family: var(--font-sans); font-size: 16px; font-weight: 600; transition: background 0.2s; } .nav-menu-link:active, .nav-menu-link:hover { background: rgba(255, 255, 255, 0.08); } .nav-menu-link span { margin-left: auto; font-size: 11px; font-weight: 500; opacity: 0.5; text-align: right; } .nav-menu-ball { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); } .nav-menu-plain { padding-left: 70px; } .nav-menu-sep { height: 1px; margin: 6px 12px; background: rgba(255, 255, 255, 0.1); } .nav-menu-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; margin: 8px 4px 4px; border-radius: 16px; background: var(--color-accent-red); color: #fff; text-decoration: none; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } } /* ---- phone layout ---- */ @media (width <= 768px) { /* hero: keep the packaging shot on phones - text on top, product bottom-right, smoke underneath */ .hero-content { top: calc(var(--safe-top) + 90px); transform: none; left: 22px; right: 22px; max-width: none; } .hero-eyebrow { letter-spacing: 2.4px; font-size: 10px; line-height: 1.7; margin-bottom: 14px; } .hero-brand-text { height: 20px; margin-bottom: 16px; } .hero-tagline { font-size: clamp(34px, 10.4vw, 46px); letter-spacing: -1px; margin-bottom: 18px; } .hero-divider { margin-bottom: 22px; } .hero-cta-btn { min-height: 50px; padding: 0 26px; } .hero-product { display: block; width: auto; max-width: none; height: min(42dvh, 96vw); top: auto; bottom: calc(var(--safe-bottom) + 56px); right: -14vw; transform: none; } .hero-scroll-hint { bottom: calc(var(--safe-bottom) + 14px); font-size: 10px; padding: 6px 12px; } /* slideshow */ :root { --poster-size-large: min(70vw, 42dvh, 320px); } .vertical-explore-tag { display: none; } .text-stage-container { bottom: calc(var(--safe-bottom) + 78px); width: min(92%, 430px); } .slide-tag { font-size: 11px; letter-spacing: 2.2px; line-height: 1.5; text-align: center; } .slide-title { font-size: clamp(34px, 10vw, 46px); } .slide-desc { font-size: 14px; line-height: 1.6; } .theme-light .slide-desc { color: rgba(18, 18, 18, 0.78); } .slide-cta { min-height: 44px; font-size: 12px; margin-top: 2px; padding: 0 6px; } .scroll-footer { bottom: calc(var(--safe-bottom) + 14px); } .scroll-text { font-size: 10.5px; } /* workshop */ .about-section { align-items: flex-start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .about-left { justify-content: safe center; flex: 1 0 auto; min-height: 100%; padding: calc(var(--safe-top) + 86px) 16px calc(var(--safe-bottom) + 28px); gap: 18px; } .labs-card-eyebrow { font-size: 10px; letter-spacing: 1.6px; } .labs-card-title { font-size: 24px; } .workshop-carousel { height: 392px; max-width: 100%; touch-action: pan-y; flex-shrink: 0; } .ball-card { width: 224px; height: 350px; } .ball-card[data-offset="0"] { transform: translate(-50%, -50%) scale(1.02); } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(112px) scale(0.6); } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-112px) scale(0.6); } .ball-card-content { padding: 22px 18px; gap: 7px; } .ball-card-img { height: 70px; } .ball-card-tag { font-size: 10px; } .ball-card-title-sm { font-size: 21px; } .ball-card-desc { font-size: 12.5px; line-height: 1.5; } .ball-card-link { font-size: 11px; min-height: 40px; } .card-pill { font-size: 11px; padding: 8px 12px; } .labs-card-toggle-btn { font-size: 11px; min-height: 48px; } .drawer-content p { font-size: 13px; } /* reviews: native swipe with snap, arrows are pointless on touch */ .reviews-section-new { padding: calc(var(--safe-top) + 84px) 0 calc(var(--safe-bottom) + 24px); } .reviews-header { padding: 0 22px; margin-bottom: 18px; } .reviews-title { font-size: clamp(32px, 9.4vw, 40px); } .reviews-desc { font-size: 14px; } .swiper-nav-btn { display: none; } .reels-swiper-track { scroll-snap-type: x mandatory; scroll-padding-inline: 22px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 14px 22px 24px; gap: 14px; touch-action: pan-x pan-y; } /* story */ .founder-eyebrow-new { font-size: 11px; } .founder-heading-new { font-size: clamp(30px, 9.2vw, 40px); margin-bottom: 14px; } .founder-bio-new { font-size: 15px; margin-bottom: 22px; } .portrait-image-container { width: min(62vw, 250px); height: min(74vw, 300px); } .founder-floating-card { width: 100%; max-width: 270px; padding: 14px 16px; } .floating-card-tag { font-size: 9.5px; } .floating-card-content p { font-size: 12px; } .founder-actions-new { flex-direction: row; align-items: stretch; width: 100%; max-width: 360px; gap: 10px; margin-bottom: 28px; } .founder-btn-primary, .founder-btn-secondary { flex: 1; min-height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .founder-stats-new { gap: 26px; } .stat-value-new { font-size: 26px; } .stat-label-new { font-size: 10px; } .founder-footer-copyright { font-size: 10px; } } @media (width <= 360px) { .hero-tagline { font-size: 32px; } .ball-card { width: 206px; } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(102px) scale(0.6); } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-102px) scale(0.6); } .nav-logo-text { display: none; } } /* ---- phones held sideways (short + wide) ---- */ @media (max-height: 520px) and (orientation: landscape) { :root { --poster-size-large: min(46dvh, 240px); --active-x: 16vw; --active-y: 4vh; --br-x: 33vw; --br-y: 22vh; } .navbar { top: calc(var(--safe-top) + 8px); height: 48px; } .nav-menu-btn { width: 38px; height: 38px; } .shop-nav-btn { min-height: 34px; } .nav-3d-link { padding: 7px 12px; } .hero-content { top: calc(var(--safe-top) + 72px); transform: none; left: 5vw; right: 45vw; } .hero-eyebrow { display: none; } .hero-brand-text { height: 16px; margin-bottom: 10px; } .hero-tagline { font-size: clamp(26px, 6.6vw, 34px); margin-bottom: 12px; } .hero-divider { margin-bottom: 14px; } .hero-cta-btn { min-height: 42px; padding: 0 22px; font-size: 11.5px; } .hero-product { display: block; height: min(70dvh, 330px); width: auto; top: auto; bottom: calc(var(--safe-bottom) + 12px); right: -2vw; transform: none; } .hero-scroll-hint { display: none; } .vertical-explore-tag { display: none; } .text-stage-container { top: 50%; bottom: auto; left: 5vw; width: 42vw; transform: translateY(-50%); text-align: left; } .text-slide { align-items: flex-start; gap: 8px; } .slide-tag { align-self: flex-start; text-align: left; font-size: 10px; } .slide-title { font-size: clamp(26px, 5.6vw, 36px); } .slide-desc { font-size: 12.5px; line-height: 1.5; } .slide-divider-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%); } .slide-divider-dot { left: 0; transform: none; } .slide-bg-number { display: none; } .scroll-footer { display: none; } .about-left { justify-content: flex-start; height: auto; padding-top: calc(var(--safe-top) + 74px); gap: 10px; } .workshop-header { display: none; } .workshop-header, .craft-strip { flex-shrink: 0; } .workshop-header .labs-card-eyebrow { display: none; } .workshop-header .labs-card-title { font-size: 18px; } .workshop-carousel { height: 262px; flex-shrink: 0; } .ball-card { width: 190px; height: 250px; } .ball-card-img { height: 64px; } .ball-card-desc { display: none; } .ball-card[data-offset="1"] { transform: translate(-50%, -50%) translateX(140px) scale(0.6); } .ball-card[data-offset="-1"] { transform: translate(-50%, -50%) translateX(-140px) scale(0.6); } .reviews-section-new { padding-top: calc(var(--safe-top) + 66px); } .reviews-header { margin-bottom: 8px; } .reviews-desc { display: none; } .reels-swiper-track { --fc-row: min(150px, 30dvh); } .founder-section-new { padding-top: calc(var(--safe-top) + 70px); } } /* ---- touch: comfortable tap targets ---- */ @media (pointer: coarse) { .nav-logo-group { min-height: 44px; } .ball-card-link { min-height: 44px; display: inline-flex; align-items: center; } .drawer-content a { display: inline-block; padding: 14px 0; } } /* ---- factory bento: below 1000px it becomes a swipeable strip ---- */ @media (width > 1000px) { .swiper-nav-btn { display: none; } } @media (width <= 1000px) { .reels-swiper-track { grid-template-columns: repeat(9, 150px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 10px 22px 18px; scroll-padding-inline: 22px; } .fc-c .fc-desc { display: none; } .factory-team .fc-desc { display: none; } } @media (width <= 768px) { .reels-swiper-track { --fc-row: clamp(150px, calc((var(--app-h) - 400px) / 2), 260px); scroll-snap-type: x mandatory; } .fc-a .fc-title { font-size: 24px; } } @media (width <= 768px) and (max-height: 520px) { .reels-swiper-track { --fc-row: min(150px, 30dvh); } } /* ---- craft page: the factory bento at page width ---- */ .factory-process { margin: 8px auto 56px; max-width: 1200px; } .factory-bento { --fc-row: clamp(190px, 22vw, 300px); display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--fc-row)); gap: 14px; } @media (width <= 900px) { .factory-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(170px, 46vw, 260px); } .factory-bento > * { grid-column: auto; grid-row: auto; } .factory-bento .fc-a, .factory-bento .fc-e { grid-column: 1 / 3; grid-row: span 2; } .factory-bento .fc-b, .factory-bento .fc-d, .factory-bento .factory-team { grid-column: 1 / 3; } .factory-bento .fc-a .fc-desc, .factory-bento .fc-b .fc-desc, .factory-bento .fc-d .fc-desc, .factory-bento .fc-e .fc-desc, .factory-bento .factory-team .fc-desc { display: block; } .factory-bento .fc-c, .factory-bento .factory-stat { grid-column: 1 / 3; } .factory-bento .fc-c { border-radius: 160px 160px 32px 32px; grid-row: span 2; } .factory-bento .fc-icon { top: 18px; left: auto; right: 18px; width: 42px; height: 42px; margin: 0; } .factory-bento .fc-icon::before { margin: -7px 0 0 -4px; border-width: 7px 0 7px 11px; } .factory-bento .factory-card[data-state="playing"] .fc-icon::before { width: 3px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 6px 0 0 #121212; } .factory-bento .factory-card[data-state="playing"] .fc-icon { opacity: 0.85; transform: none; } .factory-bento .fc-c .fc-top { top: 64px; } .factory-bento .fc-c .fc-icon { top: 64px; right: auto; left: 50%; margin-left: 96px; } .factory-bento .fc-a .fc-top, .factory-bento .fc-b .fc-top, .factory-bento .fc-d .fc-top { right: 70px; } .factory-bento .fc-c .fc-desc { display: block; } .factory-bento .fc-a { order: 1; } .factory-bento .fc-b { order: 2; } .factory-bento .fc-c { order: 3; } .factory-bento .fc-d { order: 4; } .factory-bento .fc-e { order: 5; } .factory-bento .factory-team { order: 6; } .factory-bento .factory-stat { order: 7; } .factory-bento .factory-stat { flex-direction: column; justify-content: center; } .factory-bento .fc-a .fc-title, .factory-bento .fc-e .fc-title { font-size: 26px; } .factory-bento .fc-e { border-radius: 110px 32px 32px 32px; } .factory-bento .fc-e .fc-top { left: 66px; } }