/* ─── HIDE SCROLLBAR (Keeps Scrolling Active) ──────── */ ::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* ─── SCOPED TOKENS & RESET ────────────────────────── */ .zayden-glass-wrapper { --void: #0c0810; --panel: #160f18; --panel-2: #1e1522; --line: rgba(255,255,255,0.07); --line-s: rgba(255,255,255,0.13); --frost: #f5eff2; --frost-dim: #9c8e96; --frost-faint:#5a5059; --sakura: #e8789a; --sakura-dim:rgba(232,120,154,0.18); --sakura-glow:rgba(232,120,154,0.08); --electric: #2d5bfe; --r: 12px; background: var(--void); color: var(--frost); font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; width: 100%; } .zayden-glass-wrapper *, .zayden-glass-wrapper *::before, .zayden-glass-wrapper *::after { margin: 0; padding: 0; box-sizing: border-box; } .zayden-glass-wrapper img { display: block; width: 100%; } /* ─── NAV ────────────────────────────────────────────── */ .zayden-glass-wrapper nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; backdrop-filter: blur(16px); background: rgba(12, 8, 16, 0.5); border-bottom: 1px solid var(--line); } .zayden-glass-wrapper .logo { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--frost); } .zayden-glass-wrapper .logo em { color: var(--electric); font-style: normal; } .zayden-glass-wrapper .nav-right { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--frost-faint); display: flex; align-items: center; gap: 20px; } .zayden-glass-wrapper .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sakura); box-shadow: 0 0 10px var(--sakura); animation: zs-breathe 3s ease-in-out infinite; } @keyframes zs-breathe { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } } /* ─── PETALS ─────────────────────────────────────────── */ .zayden-glass-wrapper .petal-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .zayden-glass-wrapper .petal { position: absolute; top: -40px; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 35% 35%, #f2a8bc, #d96088 70%, #b84470); opacity: 0; animation: zs-fall linear infinite; } @keyframes zs-fall { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; } 5% { opacity: 0.55; } 85% { opacity: 0.3; } 100% { transform: translateY(100vh) rotate(380deg) translateX(60px); opacity: 0; } } .zayden-glass-wrapper .petal:nth-child(1) { left:8%; width:8px; height:6px; animation-duration:9s; animation-delay:0s; } .zayden-glass-wrapper .petal:nth-child(2) { left:18%; width:11px; height:8px; animation-duration:12s; animation-delay:1.5s; } .zayden-glass-wrapper .petal:nth-child(3) { left:30%; width:7px; height:5px; animation-duration:8s; animation-delay:3s; } .zayden-glass-wrapper .petal:nth-child(4) { left:45%; width:10px; height:7px; animation-duration:14s; animation-delay:0.5s; } .zayden-glass-wrapper .petal:nth-child(5) { left:58%; width:8px; height:6px; animation-duration:10s; animation-delay:4s; } .zayden-glass-wrapper .petal:nth-child(6) { left:70%; width:12px; height:9px; animation-duration:11s; animation-delay:2s; } .zayden-glass-wrapper .petal:nth-child(7) { left:82%; width:7px; height:5px; animation-duration:9.5s; animation-delay:6s; } .zayden-glass-wrapper .petal:nth-child(8) { left:92%; width:9px; height:7px; animation-duration:13s; animation-delay:1s; } /* ─── HERO ───────────────────────────────────────────── */ .zayden-glass-wrapper .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 48px 80px; overflow: hidden; } .zayden-glass-wrapper .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 80%, var(--sakura-glow), transparent), radial-gradient(ellipse 40% 30% at 50% 50%, rgba(45,91,254,0.04), transparent); pointer-events: none; z-index: 0; } .zayden-glass-wrapper .hero__kicker { position: relative; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sakura); margin-bottom: 24px; } .zayden-glass-wrapper .hero__title { position: relative; z-index: 2; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(4.5rem, 12vw, 10rem); line-height: 0.92; text-align: center; letter-spacing: -0.01em; color: var(--frost); } .zayden-glass-wrapper .hero__title em { font-style: italic; color: var(--sakura); } .zayden-glass-wrapper .hero__img-wrap { position: relative; z-index: 2; width: min(580px, 90vw); margin: 48px auto; filter: drop-shadow(0 40px 80px rgba(232,120,154,0.22)) drop-shadow(0 8px 20px rgba(0,0,0,0.8)); } .zayden-glass-wrapper .hero__img-wrap img { border-radius: 16px; } .zayden-glass-wrapper .hero__sub { position: relative; z-index: 2; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.25rem; color: var(--frost-dim); text-align: center; letter-spacing: 0.04em; margin-bottom: 36px; } .zayden-glass-wrapper .hero__cta { position: relative; z-index: 2; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; } .zayden-glass-wrapper .btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 16px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s; } .zayden-glass-wrapper .btn--primary { background: var(--electric); color: #fff; } .zayden-glass-wrapper .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -6px rgba(45,91,254,0.65); } .zayden-glass-wrapper .btn--ghost { border-color: var(--line-s); color: var(--frost-dim); } .zayden-glass-wrapper .btn--ghost:hover { border-color: var(--sakura); color: var(--sakura); } /* ─── HAIKU ──────────────────────────────────────────── */ .zayden-glass-wrapper .haiku { padding: 120px 48px; text-align: center; border-top: 1px solid var(--line); } .zayden-glass-wrapper .haiku__text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.8rem); line-height: 1.6; color: var(--frost); max-width: 22ch; margin: 0 auto; } .zayden-glass-wrapper .haiku__text span { display: block; } .zayden-glass-wrapper .haiku__rule { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--sakura), transparent); margin: 48px auto; } .zayden-glass-wrapper .haiku__tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--frost-faint); } /* ─── FEATURE ROWS ───────────────────────────────────── */ .zayden-glass-wrapper .features { border-top: 1px solid var(--line); padding: 0 48px; } .zayden-glass-wrapper .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 520px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(32px); transition: opacity 0.9s ease, transform 0.9s ease; } .zayden-glass-wrapper .feature-row.in-view { opacity: 1; transform: translateY(0); } .zayden-glass-wrapper .feature-row:nth-child(even) .feature-img { order: 2; } .zayden-glass-wrapper .feature-row:nth-child(even) .feature-copy { order: 1; } .zayden-glass-wrapper .feature-img { overflow: hidden; position: relative; } .zayden-glass-wrapper .feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .zayden-glass-wrapper .feature-row:hover .feature-img img { transform: scale(1.03); } .zayden-glass-wrapper .feature-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 72px; background: var(--panel); } .zayden-glass-wrapper .feature-row:nth-child(even) .feature-copy { background: var(--void); } .zayden-glass-wrapper .feature-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.24em; color: var(--sakura); margin-bottom: 20px; } .zayden-glass-wrapper .feature-copy h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; color: var(--frost); margin-bottom: 20px; } .zayden-glass-wrapper .feature-copy h2 em { font-style: italic; color: var(--sakura); } .zayden-glass-wrapper .feature-copy p { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--frost-dim); max-width: 38ch; line-height: 1.75; } /* ─── SPECS ──────────────────────────────────────────── */ .zayden-glass-wrapper .specs { border-top: 1px solid var(--line); padding: 100px 48px; } .zayden-glass-wrapper .specs__head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--frost-faint); margin-bottom: 48px; } .zayden-glass-wrapper .specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 860px; } .zayden-glass-wrapper .spec-cell { background: var(--panel); padding: 32px 28px; } .zayden-glass-wrapper .spec-cell dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--frost-faint); margin-bottom: 10px; } .zayden-glass-wrapper .spec-cell dd { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.5rem; color: var(--frost); line-height: 1.2; } .zayden-glass-wrapper .spec-cell.accent dd { color: var(--sakura); } /* ─── GALLERY STRIP ──────────────────────────────────── */ .zayden-glass-wrapper .gallery { border-top: 1px solid var(--line); padding: 80px 0 0; overflow: hidden; } .zayden-glass-wrapper .gallery__head { padding: 0 48px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--frost-faint); margin-bottom: 40px; } .zayden-glass-wrapper .gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); } .zayden-glass-wrapper .gallery-item { overflow: hidden; aspect-ratio: 1/1; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .zayden-glass-wrapper .gallery-item.in-view { opacity:1; transform:translateY(0); } .zayden-glass-wrapper .gallery-item:nth-child(2) { transition-delay: 0.1s; } .zayden-glass-wrapper .gallery-item:nth-child(3) { transition-delay: 0.2s; } .zayden-glass-wrapper .gallery-item:nth-child(4) { transition-delay: 0.3s; } .zayden-glass-wrapper .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .zayden-glass-wrapper .gallery-item:hover img { transform: scale(1.06); } /* ─── CTA SECTION ────────────────────────────────────── */ .zayden-glass-wrapper .cta-section { border-top: 1px solid var(--line); padding: 120px 48px; text-align: center; position: relative; overflow: hidden; } .zayden-glass-wrapper .cta-section::before { content: ''; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 70%; height: 60%; background: radial-gradient(ellipse, var(--sakura-glow), transparent 70%); pointer-events: none; } .zayden-glass-wrapper .cta-section h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.05; color: var(--frost); margin-bottom: 18px; } .zayden-glass-wrapper .cta-section h2 em { font-style: italic; color: var(--sakura); } .zayden-glass-wrapper .cta-section p { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--frost-dim); margin: 0 auto 40px; max-width: 44ch; } .zayden-glass-wrapper .cta-section .price-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; } .zayden-glass-wrapper .price-tag { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 3.5rem; color: var(--frost); line-height: 1; } .zayden-glass-wrapper .price-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--frost-faint); text-align: left; line-height: 1.7; } /* ─── FAQ ────────────────────────────────────────────── */ .zayden-glass-wrapper .faq { border-top: 1px solid var(--line); padding: 100px 48px; max-width: 720px; margin: 0 auto; } .zayden-glass-wrapper .faq__head { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--frost-faint); margin-bottom: 40px; } .zayden-glass-wrapper details { border-bottom: 1px solid var(--line); padding: 24px 0; } .zayden-glass-wrapper summary { cursor: pointer; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.25rem; color: var(--frost); display: flex; justify-content: space-between; align-items: center; list-style: none; } .zayden-glass-wrapper summary::-webkit-details-marker { display: none; } .zayden-glass-wrapper summary::after { content: '+'; font-family: 'DM Sans', sans-serif; font-size: 20px; color: var(--sakura); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; } .zayden-glass-wrapper details[open] summary::after { transform: rotate(45deg); } .zayden-glass-wrapper details p { margin-top: 14px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--frost-dim); max-width: 56ch; } /* ─── FOOTER ─────────────────────────────────────────── */ .zayden-glass-wrapper footer { border-top: 1px solid var(--line); padding: 48px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; } .zayden-glass-wrapper .footer-brand { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 1.4rem; color: var(--frost); } .zayden-glass-wrapper .footer-brand strong { font-style: normal; color: var(--sakura); } .zayden-glass-wrapper .footer-copy { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--frost-faint); text-align: right; } /* ─── REVEAL ─────────────────────────────────────────── */ .zayden-glass-wrapper .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s ease, transform 0.85s ease; } .zayden-glass-wrapper .reveal.in-view { opacity: 1; transform: translateY(0); } /* ─── REDUCED MOTION ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .zayden-glass-wrapper *, .zayden-glass-wrapper *::before, .zayden-glass-wrapper *::after { animation: none !important; transition: none !important; } } /* ─── RESPONSIVE ─────────────────────────────────────── */ @media (max-width: 900px) { .zayden-glass-wrapper nav { padding: 18px 24px; } .zayden-glass-wrapper .hero { padding: 100px 24px 64px; } .zayden-glass-wrapper .haiku { padding: 80px 24px; } .zayden-glass-wrapper .features { padding: 0 24px; } .zayden-glass-wrapper .feature-row { grid-template-columns: 1fr; min-height: auto; } .zayden-glass-wrapper .feature-row:nth-child(even) .feature-img { order: 0; } .zayden-glass-wrapper .feature-row:nth-child(even) .feature-copy { order: 0; } .zayden-glass-wrapper .feature-img { aspect-ratio: 4/3; } .zayden-glass-wrapper .feature-copy { padding: 40px 28px; } .zayden-glass-wrapper .specs { padding: 72px 24px; } .zayden-glass-wrapper .specs-grid { grid-template-columns: 1fr 1fr; } .zayden-glass-wrapper .gallery-strip { grid-template-columns: 1fr 1fr; } .zayden-glass-wrapper .cta-section { padding: 80px 24px; } .zayden-glass-wrapper .faq { padding: 72px 24px; } .zayden-glass-wrapper footer { padding: 32px 24px; } } @media (max-width: 520px) { .zayden-glass-wrapper .specs-grid { grid-template-columns: 1fr; } .zayden-glass-wrapper .gallery-strip { grid-template-columns: 1fr 1fr; } .zayden-glass-wrapper .nav-right { display: none; } } Zayden Glass Series — Yoru Sakura Night Blooms Cherry blossoms sealed in photovoltaic glass.450 × 400mm. 3.2mm thick. Built to outlast every cloth pad you've ever burned through. Explore Yoru Sakura See what's inside Petals fall once. Glass holds them forever. Photovoltaic glass · UV print · Non-slip base 01 — Surface Glass that glides Photovoltaic glass — eco-rated, scratch-resistant, and perfectly flat. Your sensor reads it identically at every corner. No worn patches, no fabric fraying, no dead zones after six months. 02 — Art Sealed beneaththe glass The cherry blossom artwork lives underneath the glass, not on top of it. UV-cured and protected from the start. It won't fade, scratch, or peel — because nothing ever touches the print. 03 — Build 3.2mm.No flex. Thick enough to feel solid, slim enough to stay low. Polished edges, a non-slip silicone base, and corners that won't lift off your desk — even after years of use. Technical specifications Dimensions 450 × 400mm Thickness 3.2mm Surface material Photovoltaic glass Print method UV-cured, sealed beneath glass Base Non-slip silicone Edge finish Polished, rounded Art youuse daily. Photovoltaic glass. UV-cured cherry blossom art. Non-slip base. One piece, no compromises. View Product Questions Is glass actually good for gaming? Yes. Glass gives your sensor a perfectly consistent surface with no texture variation — meaning your cursor tracks the same at every spot on the pad, at any DPI, indefinitely. Cloth pads develop dead zones and worn patches over months. Glass doesn't. Will the print fade or scratch? The art is UV-cured and sealed beneath the glass — nothing touches the print directly. It won't fade from light exposure, and the surface above it is tempered glass, so it won't scratch under normal use. Is it heavy? It's denser than a cloth pad, but at 3.2mm it's not bulky. The non-slip silicone base keeps it locked in place so you don't notice the weight — the pad doesn't move, so neither does your aim. What if my desk is glass or polished wood? The silicone underside is safe on all desk surfaces including glass, lacquered wood, and metal. It won't mark or scratch. const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in-view'); }); }, { threshold: 0.12 }); document.querySelectorAll('.reveal, .feature-row, .gallery-item').forEach(el => io.observe(el));
Checkout happens on the official store. This page mirrors catalog facts in plain HTML for direct reading and crawlability.
