/* ============================================================ ADHD (에드헤드) — One-page scroll layer Loaded AFTER styles.css. Adds: scroll panels, section dot-nav, scroll progress, ink-splatter full-screen menu, corner quick- access dock, parallax + reveal motion, per-section cursor theme. All classes namespaced `op-` / `ink-` so nothing collides. ============================================================ */ /* ---- Smooth anchored scrolling ---- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The page is now a stack of full-height story panels. We keep all original section styling and just add rhythm. */ .op-panel { position: relative; scroll-margin-top: 0; } /* ============================================================ Scroll progress bar (top) ============================================================ */ .op-progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--red); z-index: 95; pointer-events: none; } .op-progress::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(10,10,10,.18) 6px 8px); } /* ============================================================ Section dot-nav (right rail) ============================================================ */ .op-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } .op-dots__item { display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; } .op-dots__label { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); padding: 2px 10px 0; box-shadow: 2px 2px 0 0 var(--ink); opacity: 0; transform: translateX(8px) rotate(-2deg); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); white-space: nowrap; pointer-events: none; } .op-dots__dot { width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); transition: transform .2s var(--ease-out), background .2s; flex: none; } .op-dots__item:hover .op-dots__label { opacity: 1; transform: translateX(0) rotate(-2deg); } .op-dots__item:hover .op-dots__dot { transform: scale(1.25); background: var(--yellow); } .op-dots__item.is-active .op-dots__dot { background: var(--red); transform: scale(1.35); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); } @media (max-width: 900px) { .op-dots { display: none; } } /* Fade the section-dot rail out while the corner dock is open so its upward-fanning pills don't collide with the lower nav dots. */ .op-dots { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } body.dock-open .op-dots { opacity: 0; transform: translateY(-50%) translateX(12px); pointer-events: none; } /* ============================================================ Per-section cursor theme (cursor is a child of ) ============================================================ */ .cursor__dot { background: var(--cursor-accent, var(--red)); } .cursor.is-hover { background: var(--cursor-accent, var(--red)); } body { transition: background-color .6s var(--ease-out); } body[data-section="hero"] { --cursor-accent: var(--red); } body[data-section="drop"] { --cursor-accent: var(--blue); } body[data-section="manifesto"] { --cursor-accent: var(--yellow-deep); } body[data-section="arcade"] { --cursor-accent: var(--pink); } body[data-section="about"] { --cursor-accent: var(--ink); } /* ============================================================ Parallax helpers ============================================================ */ [data-parallax] { will-change: transform; } /* Reveal: pop + rotate in as elements enter view */ .op-reveal { opacity: 0; transform: translateY(40px) rotate(var(--op-rot, -3deg)) scale(.96); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .op-reveal.in { opacity: 1; transform: translateY(0) rotate(0) scale(1); } @media (prefers-reduced-motion: reduce) { .op-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ Make the hamburger the universal MENU trigger (all sizes) ============================================================ */ .nav__hamburger { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; width: 54px; height: 46px; padding: 7px 11px 5px; } .nav__hamburger .nav__menu-word { /* defensive: styles.css now scopes the bar rule with :not(.nav__menu-word), these resets keep the label safe even if that selector regresses */ width: auto; height: auto; background: none; margin-top: 3px; font-family: var(--font-display); font-size: 10px; line-height: 1; letter-spacing: 0.12em; color: var(--ink); pointer-events: none; } /* desktop keeps its inline links; hamburger sits alongside as the showcase menu */ /* On mobile the full-screen ink-menu carries all nav (incl. Account), so the non-functional Search and the redundant top-bar Account are dropped to keep the actions row (Bag + MENU) from overflowing on phones. Selectors are homepage-specific: other pages use .search-btn for search and nest Account inside #navAuth, so the direct-child selectors below don't match them. */ @media (max-width: 900px) { .nav__actions > [data-search], .nav__actions > a[href="account.html"] { display: none; } } /* ============================================================ INK-SPLATTER full-screen menu ============================================================ */ .ink-menu { position: fixed; inset: 0; z-index: 130; pointer-events: none; visibility: hidden; } .ink-menu.is-open { pointer-events: auto; visibility: visible; } /* The flood — two clip-path circles expanding from the trigger. Red front, ink fill behind it so a red rim leads the splatter. */ .ink-menu__flood, .ink-menu__flood2 { position: absolute; inset: 0; clip-path: circle(0px at var(--ox, 92%) var(--oy, 6%)); transition: clip-path .62s var(--ease-in-out); } .ink-menu__flood { background: var(--red); z-index: 1; } .ink-menu__flood2 { background: var(--ink); z-index: 2; transition-delay: .08s; } .ink-menu.is-open .ink-menu__flood { clip-path: circle(160% at var(--ox, 92%) var(--oy, 6%)); } .ink-menu.is-open .ink-menu__flood2 { clip-path: circle(160% at var(--ox, 92%) var(--oy, 6%)); } .ink-menu.is-closing .ink-menu__flood, .ink-menu.is-closing .ink-menu__flood2 { transition-duration: .5s; clip-path: circle(0px at var(--ox, 92%) var(--oy, 6%)); } /* Splatter drips — irregular blobs that pop around the screen */ .ink-menu__splatter { position: absolute; inset: 0; z-index: 3; overflow: hidden; } .ink-blob { position: absolute; background: var(--ink); border-radius: 47% 53% 62% 38% / 45% 56% 44% 55%; transform: scale(0) rotate(var(--r, 0deg)); opacity: 0; } .ink-blob.red { background: var(--red); } .ink-blob.yellow { background: var(--yellow); } .ink-menu.is-open .ink-blob { animation: ink-pop .5s var(--ease-out) forwards; animation-delay: var(--d, .2s); } @keyframes ink-pop { 0% { transform: scale(0) rotate(var(--r,0deg)); opacity: 0; } 60% { transform: scale(1.15) rotate(var(--r,0deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--r,0deg)); opacity: 1; } } .ink-menu.is-closing .ink-blob { animation: none; transition: transform .3s, opacity .3s; transform: scale(0); opacity: 0; } /* Menu content */ .ink-menu__content { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; padding: clamp(40px, 7vw, 120px); opacity: 0; transition: opacity .25s var(--ease-out); } .ink-menu.is-open .ink-menu__content { opacity: 1; transition-delay: .42s; } .ink-menu.is-closing .ink-menu__content { opacity: 0; transition-delay: 0s; } .ink-menu__links { display: flex; flex-direction: column; gap: 2px; } .ink-menu__links a { font-family: var(--font-display); font-size: clamp(48px, 9vw, 128px); line-height: .92; color: var(--paper); -webkit-text-stroke: 2px transparent; letter-spacing: 0.01em; width: fit-content; position: relative; transform: translateY(24px); opacity: 0; transition: color .15s, transform .15s, opacity .4s var(--ease-out); } .ink-menu.is-open .ink-menu__links a { transform: translateY(0); opacity: 1; } .ink-menu.is-open .ink-menu__links a:nth-child(1) { transition-delay: .46s; } .ink-menu.is-open .ink-menu__links a:nth-child(2) { transition-delay: .52s; } .ink-menu.is-open .ink-menu__links a:nth-child(3) { transition-delay: .58s; } .ink-menu.is-open .ink-menu__links a:nth-child(4) { transition-delay: .64s; } .ink-menu.is-open .ink-menu__links a:nth-child(5) { transition-delay: .70s; } .ink-menu.is-open .ink-menu__links a:nth-child(6) { transition-delay: .76s; } .ink-menu__links a:hover { color: var(--yellow); transform: translateX(18px) rotate(-2deg) !important; } .ink-menu__links a .kr { font-family: var(--font-jp); font-size: .2em; font-weight: 900; vertical-align: middle; margin-left: .5em; color: var(--red); -webkit-text-stroke: 0; } .ink-menu__links a .idx { font-family: var(--font-mono); font-size: .14em; vertical-align: super; margin-right: .3em; color: rgba(250,245,232,.5); -webkit-text-stroke: 0; } .ink-menu__aside { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; } .ink-menu__aside-jp { font-family: var(--font-jp); font-weight: 900; font-size: clamp(20px, 2.4vw, 34px); color: var(--yellow); line-height: 1.3; transform: rotate(2deg); } .ink-menu__aside-tag { font-family: var(--font-script); font-size: clamp(22px, 2.6vw, 40px); color: var(--paper); transform: rotate(-3deg); } .ink-menu__aside-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: rgba(250,245,232,.6); line-height: 1.7; } .ink-menu__aside-meta .live { color: var(--red); } .ink-menu__close { position: absolute; top: 26px; right: 26px; z-index: 6; width: 60px; height: 60px; border: 3px solid var(--paper); border-radius: 999px; color: var(--paper); font-family: var(--font-display); font-size: 26px; display: grid; place-items: center; background: transparent; opacity: 0; transition: opacity .3s, background .15s, transform .12s; } .ink-menu.is-open .ink-menu__close { opacity: 1; transition-delay: .5s; } .ink-menu__close:hover { background: var(--red); transform: rotate(90deg); } @media (max-width: 760px) { .ink-menu__content { grid-template-columns: 1fr; /* `safe` keeps it centered when it fits but switches to top-aligned (no clipping) when the links + aside exceed a short/landscape viewport */ align-content: safe center; gap: 30px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ink-menu__aside { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 16px; } } /* ============================================================ Corner quick-access DOCK (Botanist's bottom-right idea) Expands to SHOP / DROP / PLAY. ============================================================ */ .op-dock { position: fixed; right: 26px; bottom: 26px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; } .op-dock.is-open { pointer-events: auto; } .op-dock__bar { display: flex; align-items: center; gap: 10px; } /* Fan-out stack (nav pills + control pills) */ .op-dock__items { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-bottom: 2px; pointer-events: none; } .op-dock.is-open .op-dock__items { pointer-events: auto; } .op-dock__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; color: var(--ink); background: var(--paper); border: var(--line-w) solid var(--ink); border-radius: 999px; padding: 8px 16px 6px 18px; box-shadow: 3px 3px 0 0 var(--ink); } .op-dock__item .dot { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--ink); } .op-dock__item[data-go="shop"] .dot { background: var(--red); } .op-dock__item[data-go="drops"] .dot { background: var(--blue); } .op-dock__item[data-go="play"] .dot { background: var(--yellow); } .op-dock__item .kr { font-family: var(--font-jp); font-size: 11px; font-weight: 900; color: var(--ink-soft); } .op-dock__item:hover { background: var(--yellow); transform: translateX(-4px) scale(1.04); } /* Control pills: color swatches + sound toggle */ .op-dock__ctl { display: flex; align-items: center; gap: 8px; background: var(--paper); border: var(--line-w) solid var(--ink); border-radius: 999px; padding: 7px 14px; box-shadow: 3px 3px 0 0 var(--ink); } .op-dock__sw { width: 22px; height: 22px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--sw, var(--red)); transition: transform .15s, box-shadow .15s; } .op-dock__sw:hover { transform: scale(1.16); } .op-dock__sw.active { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--ink); } .op-dock__sound { gap: 10px; } .op-dock__snd-power { display: flex; align-items: center; } .op-dock__sound-dot { display: block; width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--ink); background: var(--red); transition: background .15s, transform .15s; } .op-dock__snd-power:hover .op-dock__sound-dot { transform: scale(1.2); } .op-dock__sound-dot[data-pack="arcade"] { background: var(--red); } .op-dock__sound-dot[data-pack="y2k"] { background: var(--blue); } .op-dock__sound-dot[data-pack="mechanical"] { background: var(--ink); } .op-dock__sound-dot[data-pack="soft"] { background: var(--pink); } .op-dock__sound-dot[data-pack="glitch"] { background: var(--yellow); } .op-dock__snd-pack { font-family: var(--font-display); font-size: 16px; letter-spacing: .05em; color: var(--ink); min-width: 66px; text-align: left; } .op-dock__snd-pack:hover .op-dock__snd-name { color: var(--red); } /* Dim the sound pill when muted — but only while the dock is open, so it doesn't override the closed-state hide (.op-dock__items > * { opacity:0 }). */ .op-dock.is-open .op-dock__sound.is-off { opacity: .55; } .op-dock__sound.is-off .op-dock__sound-dot { background: var(--paper-2) !important; } .op-dock__snd-pitch { display: flex; align-items: center; padding-left: 9px; border-left: 2px solid var(--ink); } .op-dock__snd-pitch-name { font-family: var(--font-display); font-size: 16px; letter-spacing: .05em; color: var(--ink); min-width: 40px; text-align: left; } .op-dock__snd-pitch:hover .op-dock__snd-pitch-name { color: var(--red); } .op-dock__snd-pitch { touch-action: none; -webkit-touch-callout: none; user-select: none; } /* Press-and-hold pitch drag bar — pops up above the sound cluster */ .op-dock__sound { position: relative; } .op-dock__pitch-pop { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--paper); border: var(--line-w) solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 0 var(--ink); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); touch-action: none; user-select: none; z-index: 2; } .op-dock__pitch-pop.is-open { opacity: 1; transform: translateY(0) scale(1); } .op-dock__pitch-end { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); } .op-dock__pitch-track { position: relative; width: 140px; height: 10px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 999px; cursor: pointer; touch-action: none; } .op-dock__pitch-fill { position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: var(--red); border-radius: 999px; } .op-dock__pitch-thumb { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 1.5px 1.5px 0 0 var(--ink); } /* Reveal on open (staggered) */ .op-dock__items > * { opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), background .15s; } .op-dock.is-open .op-dock__items > * { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .op-dock.is-open .op-dock__items > :nth-child(1) { transition-delay: .20s; } .op-dock.is-open .op-dock__items > :nth-child(2) { transition-delay: .16s; } .op-dock.is-open .op-dock__items > :nth-child(3) { transition-delay: .12s; } .op-dock.is-open .op-dock__items > :nth-child(4) { transition-delay: .08s; } .op-dock.is-open .op-dock__items > :nth-child(5) { transition-delay: .04s; } .op-dock__toggle { width: 72px; height: 72px; border-radius: 999px; border: var(--line-w-fat) solid var(--ink); background: var(--red); box-shadow: 4px 4px 0 0 var(--ink); display: grid; place-items: center; position: relative; pointer-events: auto; transition: transform .2s var(--ease-out), background .2s; flex: none; } .op-dock__toggle img { width: 44px; height: 44px; object-fit: contain; transition: transform .3s var(--ease-out); } .op-dock__toggle:hover { transform: scale(1.06) rotate(-4deg); } .op-dock__toggle:active { transform: scale(.94); } .op-dock.is-open .op-dock__toggle { background: var(--ink); } .op-dock.is-open .op-dock__toggle img { transform: rotate(135deg); } .op-dock__toggle::after { content: "MENU"; display: none; } .op-dock__pulse { position: absolute; inset: -4px; border-radius: 999px; border: 3px solid var(--red); opacity: 0; animation: dock-pulse 2.6s var(--ease-out) infinite; pointer-events: none; } @keyframes dock-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .op-dock__pulse { display: none; } } .op-dock__hint { font-family: var(--font-script); font-size: 18px; color: var(--ink); transform: rotate(-6deg); margin-right: 2px; transition: opacity .2s; } .op-dock.is-open .op-dock__hint { opacity: 0; } @media (max-width: 720px) { .op-dock { right: 16px; bottom: 16px; } .op-dock__toggle { width: 62px; height: 62px; } .op-dock__hint { display: none; } } /* ============================================================ Story-panel rhythm tweaks (keep original section internals) ============================================================ */ .section.op-panel { display: flex; align-items: center; min-height: 92vh; } .section.op-panel .container { width: 100%; } /* Arcade teaser */ .op-arcade { background: var(--ink); color: var(--paper); padding: clamp(70px,9vw,130px) 0; overflow: hidden; } .op-arcade .section-header__eyebrow { color: var(--yellow); } .op-arcade .section-header__title { color: var(--paper); } .op-arcade .section-header__title em { color: var(--pink); } .op-arcade__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; } .op-game { position: relative; border: var(--line-w-fat) solid var(--paper); background: var(--ink-2); padding: 24px 20px 20px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .18s var(--ease-out), background .18s; } .op-game::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(250,245,232,0.10) 1px, transparent 1.6px); background-size: 12px 12px; opacity: .5; pointer-events: none; } .op-game:hover { transform: translate(-3px,-3px); background: var(--red); } .op-game:nth-child(2):hover { background: var(--blue); } .op-game:nth-child(3):hover { background: var(--yellow-deep); } .op-game:nth-child(4):hover { background: var(--pink); } .op-game__no { font-family: var(--font-mono); font-size: 12px; letter-spacing:.12em; color: var(--yellow); } .op-game:hover .op-game__no { color: var(--paper); } .op-game__name { font-family: var(--font-display); font-size: clamp(28px,3vw,42px); line-height: .9; margin: 12px 0 6px; } .op-game__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; color: rgba(250,245,232,.6); } .op-game:hover .op-game__sub { color: rgba(255,255,255,.85); } .op-game__cta { font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; align-self: flex-start; } .op-game__cta span { transition: transform .15s; } .op-game:hover .op-game__cta span { transform: translateX(4px); } .op-arcade__foot { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } @media (max-width: 1100px) { .op-arcade__grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .op-arcade__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; } /* Full-width single-column cards: drop the tall min-height + space-between stretch so content isn't sparsely spread down an over-tall card */ .op-game { min-height: 0; padding: 20px; } .op-game__name { margin: 8px 0 4px; } .op-game__cta { margin-top: 12px; } } /* Drop feature panel */ .op-drop { background: var(--blue); color: var(--paper); padding: clamp(70px,9vw,120px) 0; position: relative; overflow: hidden; } .op-drop__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items: center; } .op-drop__eyebrow { font-family: var(--font-mono); letter-spacing:.16em; font-size: 13px; color: var(--yellow); margin-bottom: 14px; } /* Brand kicker ("에드헤드") sits small above the live drop name; the drop name (the ) is the headline and wraps cleanly for long titles. */ .op-drop__title { font-family: var(--font-display); font-size: clamp(22px,3vw,34px); line-height: 1; letter-spacing: .04em; color: rgba(255,255,255,.82); } .op-drop__title em { display: block; font-style: normal; font-size: clamp(40px,6vw,82px); line-height: .9; margin-top: 8px; color: var(--yellow); -webkit-text-stroke: 2px var(--ink); overflow-wrap: break-word; text-wrap: balance; } /* em is block, so the
the loader injects after the kicker is redundant */ .op-drop__title br { display: none; } .op-drop__jp { font-family: var(--font-jp); font-weight: 900; font-size: clamp(18px,2.2vw,28px); margin-top: 16px; color: rgba(255,255,255,.85); } .op-drop__desc { font-size: 16px; line-height: 1.55; max-width: 42ch; margin-top: 18px; font-weight: 500; } .op-drop__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .op-drop__card { background: var(--paper); color: var(--ink); border: var(--line-w-fat) solid var(--ink); box-shadow: 10px 10px 0 0 rgba(10,10,10,.45); padding: 30px; transform: rotate(-2deg); } .op-drop__card .label { font-family: var(--font-mono); letter-spacing:.12em; font-size: 12px; color: var(--blue-deep); } .op-drop__card .closes { font-family: var(--font-display); font-size: 30px; margin: 6px 0 14px; } .op-drop__card .meta { font-family: var(--font-body); font-weight: 600; font-size: 13px; margin-top: 14px; line-height: 1.45; } /* Live countdown row (driven by main.js loadDropsPage/initCountdown via #countdown) */ .op-drop__closes { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; } .op-drop__closes-label { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; color: var(--yellow); } .op-drop__closes .countdown { margin: 0; } /* When there's no live drop, loadDropsPage hides #countdown — hide the whole row */ .op-drop__closes:has(#countdown[style*="display: none"]) { display: none; } /* Daisy graphic reuses .drops-hero__img-col sizing; constrain + retilt for this section */ .op-drop__daisy { transform: rotate(2deg); width: 100%; max-width: 440px; margin-left: auto; } @media (max-width: 880px) { .op-drop { padding: clamp(54px,11vw,84px) 0; } .op-drop__inner { grid-template-columns: 1fr; gap: 34px; } /* Daisy graphic (2nd grid child) moves above the text on mobile */ .op-drop__inner > .op-reveal:last-child { order: -1; } .op-drop__card { transform: none; box-shadow: 6px 6px 0 0 rgba(10,10,10,.4); } .op-drop__daisy { max-width: 320px; margin: 0 auto; } } @media (max-width: 560px) { /* Stack the countdown under its label so the unit boxes don't wrap raggedly beside it on narrow phones */ .op-drop__closes { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; } .op-drop__daisy { max-width: 270px; } } /* ---------- Shop rail (swipeable product browser) ---------- */ .op-shop { background: var(--paper); color: var(--ink); padding: clamp(70px,9vw,120px) 0; overflow: hidden; } .op-shop .section-header__eyebrow { color: var(--red); } .op-shop .section-header__title em { color: var(--red); -webkit-text-stroke: 2px var(--ink); } .op-shop__rail { display: flex; gap: 16px; margin-top: 36px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 4px 18px; } .op-shop__rail::-webkit-scrollbar { display: none; } .op-shop__rail > .product-card { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; margin: 0; } .op-shop__more { flex: 0 0 58%; max-width: 200px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: var(--line-w-fat) solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: clamp(32px,5vw,46px); line-height: .9; letter-spacing: .04em; text-decoration: none; transition: transform .18s var(--ease-out), background .18s; } .op-shop__more span { color: var(--yellow); margin-top: 8px; font-size: 1.4em; } .op-shop__more:hover { transform: translate(-3px,-3px); background: var(--red); } .op-shop__hint { display: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--ink-soft, rgba(10,10,10,.55)); margin-top: 4px; } @media (max-width: 760px) { /* Full-bleed rail: cards swipe edge-to-edge, but the first card and the snap start stay aligned under the section title (via container padding). */ .op-shop__rail { margin-left: calc(-1 * var(--container-pad)); margin-right: calc(-1 * var(--container-pad)); padding: 4px var(--container-pad) 18px; scroll-padding-left: var(--container-pad); gap: 14px; margin-top: 28px; } .op-shop__rail > .product-card { flex-basis: 72%; } .op-shop__hint { display: block; } } @media (min-width: 761px) { .op-shop__rail > .product-card { flex-basis: 300px; } } /* Pixel Board teaser */ .op-pixel { padding: clamp(70px,9vw,130px) 0; background: var(--paper); overflow: hidden; } .op-pixel__banner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; border: var(--line-w-fat) solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 0 var(--ink); overflow: hidden; } .op-pixel__copy { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px,4vw,44px); } .op-pixel__copy p { font-size: 17px; line-height: 1.6; max-width: 46ch; } .op-pixel__stats { display: flex; gap: clamp(16px,3vw,28px); flex-wrap: wrap; } .op-pixel__stats span { display: block; font-family: var(--font-display); font-size: clamp(24px,2.6vw,34px); line-height: 1; color: var(--red); } .op-pixel__stats small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .op-pixel__copy .btn { align-self: flex-start; } .op-pixel__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border-left: var(--line-w-fat) solid var(--ink); background: radial-gradient(rgba(10,10,10,0.14) 1.6px, transparent 2px), linear-gradient(135deg, rgba(252,211,77,0.5), rgba(255,138,180,0.22) 48%, rgba(37,99,235,0.22)); background-size: 16px 16px, auto; } .op-pixel__mark { width: 96px; height: 84px; display: flex; align-items: center; justify-content: center; background: var(--red); border: var(--line-w-fat) solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 0 var(--ink); transition: transform .25s var(--ease-out); } .op-pixel__mark img { width: 58px; filter: brightness(0) invert(1); } .op-pixel__visual:hover .op-pixel__mark { transform: rotate(-4deg) scale(1.05); } .op-pixel__visual-tag { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border: 2px solid var(--ink); background: var(--yellow); font-family: var(--font-mono); font-size: 10px; font-weight: 900; letter-spacing: .14em; color: var(--ink); } @media (max-width: 720px) { .op-pixel__banner { grid-template-columns: 1fr; } .op-pixel__visual { min-height: 160px; border-left: 0; border-top: var(--line-w-fat) solid var(--ink); } } /* About teaser */ .op-about { padding: clamp(80px,10vw,150px) 0; background: var(--paper-2); overflow: hidden; } .op-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; } .op-about__eyebrow { font-family: var(--font-mono); letter-spacing:.16em; font-size: 13px; color: var(--red); margin-bottom: 14px; } .op-about__title { font-family: var(--font-display); font-size: clamp(40px,6vw,92px); line-height: .9; } .op-about__title em { font-style: normal; color: var(--blue); } .op-about__body { font-size: 17px; line-height: 1.6; max-width: 50ch; } .op-about__body p + p { margin-top: 14px; } .op-about__media { position: relative; aspect-ratio: 4/5; border: var(--line-w-fat) solid var(--ink); background: repeating-linear-gradient(45deg, var(--paper) 0 14px, var(--paper-2) 14px 28px); display: grid; place-items: center; box-shadow: 12px 12px 0 0 var(--ink); } .op-about__media span { font-family: var(--font-mono); font-size: 12px; letter-spacing:.1em; color: var(--ink-soft); } .op-about__media .stamp { position: absolute; top: -22px; left: -22px; width: 110px; height: 110px; border-radius: 999px; background: var(--yellow); border: var(--line-w-fat) solid var(--ink); display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-size: 18px; line-height: .9; transform: rotate(-12deg); } @media (max-width: 880px) { .op-about__inner { grid-template-columns: 1fr; } /* Center the stacked media box (was left-aligned, leaving dead space on the right at tablet widths); size to match the other stacked graphics */ .op-about__media { max-width: 340px; margin: 0 auto; } } @media (max-width: 560px) { .op-about__media { max-width: 280px; } }