/* ========================================================================== EliteBrokers — PREMIUM MOTION LAYER Loaded after style.css on every page. Everything here is additive on top of the existing --house-* design system: no existing selector is overridden destructively, only extended. Every animated rule has a prefers-reduced-motion escape hatch. Paired with js/motion.js. ========================================================================== */ :root { --grad-gold-blue: linear-gradient(120deg, #c9a24b, #5ec8ff); --grad-royal: linear-gradient(120deg, #c9a24b 0%, #d16bff 100%); --grad-ticker-up: #39e07a; --grad-ticker-down: #ff4d4d; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Page curtain (branded load-in / route-change wipe) ---------- */ .page-curtain { position: fixed; inset: 0; z-index: 10000; background: var(--house-bg); display: flex; align-items: center; justify-content: center; pointer-events: none; } .page-curtain-mark { font-family: var(--mono); font-weight: 700; letter-spacing: 0.14em; font-size: 1.3rem; text-transform: uppercase; color: var(--house-accent); border: 1px solid var(--house-accent); padding: 10px 18px; border-radius: 4px; opacity: 0; } /* Route-exit wipe: added to briefly before an internal navigation */ html.page-exit body { opacity: 0; transform: translateY(-10px); transition: opacity 0.28s ease, transform 0.28s ease; } /* ---------- Scroll progress bar ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--house-accent2), var(--house-accent)); z-index: 500; pointer-events: none; box-shadow: 0 0 10px rgba(201, 162, 75, 0.55); } /* ---------- Cursor glow (fine pointers only, injected by motion.js) ---------- */ .cursor-glow { position: fixed; top: 0; left: 0; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; z-index: 4; background: radial-gradient(circle, rgba(201, 162, 75, 0.10), rgba(94, 200, 255, 0.05) 45%, transparent 72%); transform: translate(-50%, -50%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease; will-change: transform; } .cursor-glow.active { opacity: 1; } /* ---------- Nav: subtle tightening once scrolled ---------- */ .site-nav { transition: background 0.3s ease, box-shadow 0.3s ease; } .site-nav.scrolled { background: linear-gradient(to bottom, rgba(8, 8, 10, 0.98), rgba(8, 8, 10, 0.94)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* Animated underline for the active + hovered link (desktop) */ @media (min-width: 700px) { .site-nav-links a:not(.nav-wallet-btn) { position: relative; } .site-nav-links a:not(.nav-wallet-btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--house-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-premium); } .site-nav-links a.active::after, .site-nav-links a:hover::after { transform: scaleX(1); } } /* ---------- Ticker marquee (injected as the first child of
) ---------- */ .marquee-ticker { overflow: hidden; white-space: nowrap; background: #000; border-bottom: 1px solid var(--house-line); padding: 7px 0; } .marquee-track { display: inline-flex; gap: 40px; animation: marqueeScroll 34s linear infinite; will-change: transform; } .marquee-ticker:hover .marquee-track, .marquee-ticker:focus-within .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--house-fg-dim); } .mq-up { color: var(--grad-ticker-up); font-weight: 700; } .mq-down { color: var(--grad-ticker-down); font-weight: 700; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ---------- Gradient text utility ---------- */ .grad-text { background: var(--grad-gold-blue); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Aurora blobs (hero background wash, index only) ---------- */ .aurora-blob { position: absolute; z-index: 1; border-radius: 50%; filter: blur(70px); opacity: 0.32; pointer-events: none; animation: auroraDrift 20s ease-in-out infinite; will-change: transform; } .aurora-blob.b1 { width: 440px; height: 440px; background: var(--house-accent); top: -12%; left: -10%; } .aurora-blob.b2 { width: 380px; height: 380px; background: var(--house-accent2); bottom: -14%; right: -8%; animation-delay: -7s; } .aurora-blob.b3 { width: 300px; height: 300px; background: #d16bff; top: 34%; right: 18%; animation-delay: -13s; } @keyframes auroraDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -18px) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .aurora-blob { animation: none; } } /* ---------- Inner-page hero banners (Gallery/Divisions/Registry/Board/Statement/Whitelist/Mint) ---------- */ .hero-banner { position: relative; text-align: center; overflow: hidden; padding: 12px 16px 8px; margin: 0 -16px 8px; } .hero-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.16; background: var(--hb-tint, radial-gradient(ellipse 70% 60% at 50% 0%, var(--house-accent), transparent 70%)); } .hb-ghost { position: absolute; top: -0.28em; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-weight: 700; font-size: clamp(5rem, 22vw, 11rem); color: var(--house-fg); opacity: 0.045; letter-spacing: 0; z-index: 0; pointer-events: none; line-height: 1; white-space: nowrap; } .hb-eyebrow { position: relative; z-index: 1; display: inline-block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hb-accent, var(--house-accent)); border: 1px solid var(--hb-accent, var(--house-accent)); padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; } .hero-banner > h1, .hero-banner > .page-title { position: relative; z-index: 1; } .hb-gallery { --hb-tint: radial-gradient(ellipse 70% 60% at 50% 0%, var(--house-accent2), transparent 70%); --hb-accent: var(--house-accent2); } .hb-divisions { --hb-tint: radial-gradient(ellipse 80% 70% at 20% 0%, var(--house-accent), transparent 60%), radial-gradient(ellipse 80% 70% at 80% 0%, var(--house-accent2), transparent 60%); --hb-accent: var(--house-accent); } .hb-registry { --hb-tint: radial-gradient(ellipse 70% 60% at 50% 0%, #f0c419, transparent 70%); --hb-accent: #f0c419; } .hb-board { --hb-tint: radial-gradient(ellipse 70% 60% at 50% 0%, #d16bff, transparent 70%); --hb-accent: #d16bff; } .hb-statement { --hb-tint: radial-gradient(ellipse 60% 60% at 30% 0%, #39e07a, transparent 65%), radial-gradient(ellipse 60% 60% at 70% 0%, #ff4d4d, transparent 65%); --hb-accent: #39e07a; } .hb-wl { --hb-tint: radial-gradient(ellipse 70% 60% at 50% 0%, #39e07a, transparent 70%); --hb-accent: #39e07a; } .hb-mint { --hb-tint: radial-gradient(ellipse 70% 60% at 50% 0%, var(--house-accent), transparent 70%); --hb-accent: var(--house-accent); } /* ---------- Card tilt readiness (JS composes the full transform string) ---------- */ .nft-card, .board-card, .tier-card, .wn-item, .community-card, .preview-card, .stmt-card { transform-style: preserve-3d; } /* ---------- Magnetic-button readiness ---------- */ .hero-ctas .btn, #heroConnectBtn, .mint-btn-wrap .btn, #demoMintBtn, .wl-submit, .cta { will-change: transform; } /* ---------- Division scroll-storytelling (divisions.html) ---------- */ .division { will-change: transform, opacity; } .division-hero-wrap { will-change: transform; } @media (prefers-reduced-motion: reduce) { .cursor-glow, .aurora-blob { display: none; } html.page-exit body { opacity: 1; transform: none; transition: none; } } /* ========================================================================== THE GRAIL DESK — curated coverflow carousel, homepage only. Reuses the existing --house-* palette/radius so it reads as part of the original landing page, not a bolted-on new style. Real broker art only — sourced from BOARD_DATA (js/board.js). See js/grail-desk.js. ========================================================================== */ .grail-desk { padding: 48px 16px 56px; background: var(--house-bg2); border-top: 1px solid var(--house-line); border-bottom: 1px solid var(--house-line); text-align: center; overflow: hidden; } .grail-desk-eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--house-accent); display: inline-block; margin-bottom: 6px; } .grail-desk h2 { font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 6px; } .grail-desk .section-sub { margin-bottom: 12px; } .grail-frame { --grail-card: clamp(150px, 22vw, 260px); position: relative; margin: 28px auto 0; padding: 24px 0; cursor: grab; outline: none; touch-action: pan-y; } .grail-frame:active { cursor: grabbing; } .grail-frame:focus-visible { outline: 2px solid var(--house-accent2); outline-offset: 6px; } .grail-track { position: relative; height: var(--grail-card); transform-style: preserve-3d; perspective: calc(var(--grail-card) * 3); } .grail-card { position: absolute; left: 50%; top: 0; width: var(--grail-card); aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--house-line); background: var(--house-bg); box-shadow: 0 16px 40px rgba(0,0,0,0.45); will-change: transform; display: block; text-decoration: none; cursor: pointer; /* Belt-and-suspenders alongside the div-not-anchor fix in grail-desk.js: never let the browser interpret a drag on this card as text selection or a native image/link drag — both would swallow pointermove events. */ user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .grail-card img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .grail-nav { position: absolute; top: 50%; z-index: 200; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid var(--house-line); color: var(--house-fg); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .grail-nav:hover { background: rgba(0,0,0,0.8); border-color: var(--house-accent); color: var(--house-accent); } .grail-nav-prev { left: 4px; } .grail-nav-next { right: 4px; } @media (min-width: 700px) { .grail-nav-prev { left: -8px; } .grail-nav-next { right: -8px; } } .grail-caption { margin-top: 18px; } .grail-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin: 0; } .grail-subtitle { font-family: var(--mono); font-size: 0.78rem; color: var(--house-fg-dim); margin: 4px 0 0; text-transform: uppercase; letter-spacing: 0.06em; } .grail-meta { display: flex; justify-content: center; gap: 24px; margin: 12px 0 0; } .grail-meta div { display: flex; flex-direction: column; align-items: center; } .grail-meta dt { font-family: var(--mono); font-size: 0.62rem; color: var(--house-fg-dim); text-transform: uppercase; letter-spacing: 0.08em; } .grail-meta dd { font-family: var(--mono); font-size: 0.9rem; color: var(--house-accent); margin: 2px 0 0; font-weight: 700; } .grail-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .grail-pagination button { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--house-line); transition: background 0.2s ease, transform 0.2s ease; } .grail-pagination button[aria-current="true"] { background: var(--house-accent); transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .grail-card { transition: none; } } /* ---------- Whitelist Phase 1: video bg, countdown, compact one-look layout ---------- */ .wl-compact { position: relative; overflow: hidden; padding-top: 36px; padding-bottom: 28px; } .wl-bg-poster { position: absolute; inset: 0; z-index: 0; background: center/cover no-repeat, var(--house-bg2); background-image: url("../assets/video_characterworking_poster.jpg"); } .wl-bg-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { /* Poster (behind, always rendered) shows through once the video is gone. */ .wl-bg-video { display: none; } } .wl-bg-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(10, 10, 13, 0.86); /* ~86% ink — ambient motion only, never competes with the cards */ } .wl-content { position: relative; z-index: 3; } /* Ambient hourglass — no numbers, just perpetual motion. Replaces the countdown chip and the "registered so far" line to save vertical space. */ .wl-hourglass { display: flex; justify-content: center; margin: 0 auto 16px; } .wl-hourglass-svg { width: 34px; height: 51px; overflow: visible; } .wl-hg-spin { transform-origin: 20px 30px; animation: hgRoll 4s linear infinite; } .wl-hg-frame { fill: var(--house-accent); } .wl-hg-glass { fill: rgba(201,162,75,0.08); stroke: var(--house-accent); stroke-width: 1; } .wl-hg-sand-top, .wl-hg-sand-bottom { fill: var(--house-accent); } .wl-hg-sand-top { animation: hgSandTop 4s linear infinite; } .wl-hg-sand-bottom { animation: hgSandBottom 4s linear infinite; } .wl-hg-stream { fill: var(--house-fg); animation: hgStream 0.8s linear infinite; } @keyframes hgRoll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes hgSandTop { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0.25; } 100% { opacity: 1; } } @keyframes hgSandBottom { 0%, 45% { opacity: 0.25; } 50%, 95% { opacity: 1; } 100% { opacity: 0.25; } } @keyframes hgStream { 0% { opacity: 0; transform: translateY(-2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(3px); } } @media (prefers-reduced-motion: reduce) { .wl-hg-spin, .wl-hg-sand-top, .wl-hg-sand-bottom, .wl-hg-stream { animation: none; } .wl-hg-sand-top { opacity: 1; } .wl-hg-sand-bottom { opacity: 0.25; } .wl-hg-stream { opacity: 0; } } /* Compact step grid: 1 column (mobile, full-size touch targets) -> 2x2 (desktop) */ .wl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 640px; margin: 0 auto; } .wl-grid .wl-step { margin-bottom: 0; padding: 12px 14px; } .wl-grid .wl-step-head { margin-bottom: 6px; } .wl-grid .wl-step-desc { margin-bottom: 8px; font-size: 0.8rem; } .wl-grid .wl-step-actions { margin-bottom: 8px; } @media (min-width: 700px) { .wl-grid { grid-template-columns: 1fr 1fr; } .wl-grid .wl-input { min-height: 36px; font-size: 0.85rem; } .wl-grid .wl-step-title { font-size: 0.92rem; } } .wl-form-compact .wl-submit { max-width: 640px; margin: 14px auto 0; } .wl-form-compact .wl-status { max-width: 640px; margin: 8px auto 0; } .wl-compact .wl-backend-note { position: relative; z-index: 3; }