/* ===================================================== HOODSEA -- styles == */ /* Dark is the default theme. data-theme is stamped on by an inline script in before first paint, so a light reload never flashes dark. --lime is the raw brand fill; --accent is the accent used *against* the page background, which has to darken in light mode to stay readable. */ :root { --lime: #c9f42e; --lime-dim: #a3c923; --lime-glow: rgba(201, 244, 46, .16); --accent: var(--lime); --danger: #ff6b6b; --bg: #090909; --bg-alt: #0d0d0d; --panel: #111111; --panel-2: #151515; --line: #202020; --line-soft: #1a1a1a; --text: #ececec; --muted: #8c8c8c; --dim: #5f5f5f; --nav-bg: rgba(9, 9, 9, .82); --scrim: rgba(5, 5, 5, .92); --chip-bg: rgba(0, 0, 0, .72); --brand-ink: var(--lime); --shadow: rgba(0, 0, 0, .55); /* Rarity hues, tuned for a dark backdrop. app.js reads these by name. */ --r-common: #9aa4ae; --r-rare: #3ba7ff; --r-epic: #a855f7; --r-legendary: #f5a524; --r-mythic: #ff4d6d; --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; --pad: clamp(20px, 5vw, 48px); --radius: 4px; } :root[data-theme="light"] { --accent: #55730a; --lime-dim: #a3c923; --lime-glow: rgba(201, 244, 46, .38); --danger: #c0342f; --bg: #f7f8f2; --bg-alt: #eef1e6; --panel: #ffffff; --panel-2: #f2f5ea; --line: #d8dccb; --line-soft: #e5e8d9; --text: #14160e; --muted: #565a4c; --dim: #6f7365; --nav-bg: rgba(247, 248, 242, .86); --scrim: rgba(26, 28, 20, .62); --chip-bg: rgba(255, 255, 255, .88); --brand-ink: #1a1d12; --shadow: rgba(40, 44, 30, .18); /* Same hues, darkened to stay readable on a light backdrop. */ --r-common: #5c6772; --r-rare: #0b6cbd; --r-epic: #7a2fc4; --r-legendary: #8f5a04; --r-mythic: #c41e42; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.65 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Chromium pins a transitioned property at its old value when the new one arrives through a changed custom property, which leaves half the page on the previous theme. Suppress every transition for the frame in which the theme flips, then hand them back. */ :root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Generated art is 32px and must stay crisp when scaled up; uploaded artwork is already high-res and should be resampled normally. */ img { image-rendering: pixelated; } img[data-real] { image-rendering: auto; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--lime); color: #000; padding: 10px 16px; } .skip:focus { left: 12px; top: 12px; } .wrap { width: min(1180px, 100% - var(--pad) * 2); margin-inline: auto; } .wrap--narrow { width: min(760px, 100% - var(--pad) * 2); } /* ------------------------------------------------------------------ brand -- */ .brand { display: flex; align-items: center; gap: 11px; } .brand__mark { width: 30px; height: 30px; flex: none; background: var(--brand-ink); -webkit-mask: url(assets/logo.svg) center / contain no-repeat; mask: url(assets/logo.svg) center / contain no-repeat; } /* An uploaded full-colour logo replaces the mask entirely. The supplied file is the full lockup (emblem over wordmark), which is unreadable at 30px, so the background is zoomed and offset to crop down to just the emblem. */ body.has-logo .brand__mark { background: var(--brand-logo) 51% 31% / 216% 204% no-repeat; border-radius: 3px; -webkit-mask: none; mask: none; } .brand__text { display: grid; line-height: 1.15; } .brand__text b { font-size: 15px; letter-spacing: .22em; font-weight: 700; } .brand__text i { font-style: normal; font-size: 9px; letter-spacing: .28em; color: var(--dim); text-transform: uppercase; } /* -------------------------------------------------------------------- nav -- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; } .nav__links { display: flex; gap: 26px; margin-inline: auto; } .nav__links a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .18s; } .nav__links a:hover { color: var(--accent); } .nav__right { display: flex; align-items: center; gap: 12px; } .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); transition: .18s; cursor: pointer; background: none; } .icon-btn svg { width: 15px; height: 15px; grid-area: 1 / 1; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } /* One toggle, two glyphs: show the mode you'd switch *to*. */ .icon-sun { display: none; } :root[data-theme="light"] .icon-sun { display: block; } :root[data-theme="light"] .icon-moon { display: none; } /* ---------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent; background: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; transition: .18s; white-space: nowrap; } .btn small { font-size: 11px; letter-spacing: .08em; opacity: .72; text-transform: none; } .btn small em { font-style: normal; color: inherit; } .btn--primary { background: var(--lime); color: #0a0a0a; } .btn--primary:hover { background: #d7ff45; box-shadow: 0 0 0 4px var(--lime-glow); } .btn--ghost { border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--outline { border-color: var(--accent); color: var(--accent); } .btn--outline:hover { background: var(--lime-glow); } .btn--lg { padding: 15px 22px; font-size: 13px; flex-direction: column; gap: 3px; } .btn--tiny { padding: 6px 12px; font-size: 10px; border-color: var(--line); color: var(--muted); } .btn--tiny:hover { border-color: var(--accent); color: var(--accent); } .btn[disabled] { opacity: .45; pointer-events: none; } /* ------------------------------------------------------------------- hero -- */ .hero { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); position: relative; } .hero::before { content: ""; position: absolute; inset: -20% 40% 30% -10%; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); pointer-events: none; } .hero__inner { position: relative; display: grid; gap: clamp(36px, 6vw, 72px); grid-template-columns: 1.15fr .85fr; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero h1 { margin: 0; font-size: clamp(52px, 10vw, 108px); line-height: .92; letter-spacing: -.03em; font-weight: 700; } .hero h1 span { color: var(--accent); } .hero__tag { margin: 20px 0 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .hero__lede { margin: 18px 0 0; max-width: 46ch; color: var(--muted); } .hero__lede b { color: var(--text); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 44px 0 0; background: var(--line-soft); border: 1px solid var(--line-soft); } .stats > div { background: var(--bg); padding: 16px 14px; } .stats dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .stats dd { margin: 6px 0 0; font-size: 19px; font-weight: 700; } .stats dd small { font-size: 11px; color: var(--muted); font-weight: 400; } /* showcase */ .hero__art { display: grid; gap: 18px; justify-items: center; } .showcase { margin: 0; width: 100%; max-width: 360px; border: 1px solid var(--line); background: var(--panel); animation: float 7s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .showcase img { width: 100%; aspect-ratio: 1; border-bottom: 1px solid var(--line); background: var(--panel-2); } .showcase figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .showcase figcaption b { font-size: 14px; } .rarity { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; } .showcase__dots { display: flex; gap: 8px; } .showcase__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--dim); background: none; transition: .2s; } .showcase__dots button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); } /* ---------------------------------------------------------------- marquee -- */ .marquee { border-block: 1px solid var(--line-soft); background: var(--bg-alt); overflow: hidden; padding: 13px 0; } .marquee__track { display: flex; gap: 30px; width: max-content; animation: slide 34s linear infinite; } .marquee__track span { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); } .marquee__track span:nth-child(even) { color: var(--accent); } @keyframes slide { to { transform: translateX(-50%); } } /* ---------------------------------------------------------------- section -- */ .section { padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid var(--line-soft); } .section--alt { background: var(--bg-alt); } .section__head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); } .section__num { margin: 0 0 16px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .section h2 { margin: 0; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; } .section__lede { margin: 20px 0 0; color: var(--muted); max-width: 58ch; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .kicker { margin: 0 0 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); } .badge { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .badge--live { color: var(--accent); border-color: var(--accent); } .badge--warn { color: #f5a524; border-color: #f5a524; } /* ---------------------------------------------------------- mode banner -- */ .mode { margin: 0; padding: 9px var(--pad); text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); } .mode--live { color: var(--accent); } /* -------------------------------------------------------- pending pulls -- */ .pending { display: grid; gap: 10px; } .pending__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--lime-glow); } .pending__row b { display: block; font-size: 13px; } .pending__row span { font-size: 11px; color: var(--muted); letter-spacing: .06em; } .machine__status { margin: 0; min-height: 16px; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .ladder__table tr.is-you td { background: var(--lime-glow); } .ladder__table tr.is-you em { font-style: normal; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .toast a { color: var(--accent); text-decoration: underline; } /* ------------------------------------------------------------------ gacha -- */ .gacha { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; } .machine { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 18px; justify-items: center; } .machine__glass { position: relative; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .1), transparent 46%), var(--panel-2); border: 3px solid var(--line); overflow: hidden; } .machine__balls { position: absolute; inset: 0; background-image: radial-gradient(circle 13px at 26% 62%, var(--lime) 98%, transparent), radial-gradient(circle 13px at 56% 74%, #d8402c 98%, transparent), radial-gradient(circle 13px at 76% 58%, #2f6bd8 98%, transparent), radial-gradient(circle 13px at 41% 84%, #e8d53a 98%, transparent), radial-gradient(circle 13px at 66% 90%, #f5f3ec 98%, transparent), radial-gradient(circle 13px at 22% 86%, #a855f7 98%, transparent); opacity: .82; } .machine.is-spinning .machine__balls { animation: jitter .18s linear infinite; } @keyframes jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); } 100% { transform: translate(0, 0); } } .capsule { position: absolute; left: 50%; top: 42%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #0a0a0a, 0 12px 22px var(--shadow); transition: transform .3s; } .capsule__top { height: 50%; background: var(--lime); } .capsule__bottom { height: 50%; background: #f0f0f0; } .machine.is-spinning .capsule { animation: shake .32s ease-in-out infinite; } @keyframes shake { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-7px); } } .machine__body { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); } .machine__label { font-size: 11px; letter-spacing: .28em; color: var(--accent); } .machine__slot { width: 58px; height: 20px; border-radius: 3px; background: #050505; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9); } /* banner panel */ .banner { padding: 26px; display: grid; gap: 20px; } .banner__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .banner__head h3 { margin: 0; font-size: 25px; letter-spacing: -.01em; } .banner__note { margin: 0; color: var(--muted); font-size: 14px; } .banner__note b { color: var(--accent); } .pity { display: grid; gap: 8px; } .pity__bar { height: 5px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .pity__bar span { display: block; height: 100%; width: 0%; background: var(--lime); transition: width .35s ease; } .pity__text { margin: 0; font-size: 11px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; } .pity__text b { color: var(--text); } .banner__buy { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rates { width: 100%; border-collapse: collapse; font-size: 12px; } .rates caption { text-align: left; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding-bottom: 10px; } .rates th, .rates td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--line-soft); } .rates th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 400; border-top: 0; } .rates td:last-child, .rates th:last-child { text-align: right; } .rates .r-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; } /* vault */ .vault { margin-top: 34px; border-top: 1px solid var(--line-soft); padding-top: 26px; } .vault__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .vault__head h3 { margin: 0; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; } .vault__head span { color: var(--dim); } .vault__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); } .empty { grid-column: 1 / -1; margin: 0; color: var(--dim); font-size: 13px; } .chip-card { border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: .18s; text-align: left; padding: 0; display: block; width: 100%; } .chip-card:hover { border-color: var(--accent); transform: translateY(-2px); } .chip-card img { width: 100%; aspect-ratio: 1; } .chip-card { position: relative; } .chip-card.is-listed { border-color: var(--accent); } .chip-card__flag { position: absolute; top: 8px; left: 8px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--lime); color: #0a0a0a; } .chip-card__meta { padding: 9px 10px; border-top: 1px solid var(--line); } .chip-card__meta b { display: block; font-size: 11px; } .chip-card__meta span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } /* ----------------------------------------------------------------- market -- */ .market__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 26px; } .market__stats div { background: var(--bg-alt); padding: 15px 16px; } .market__stats p:first-child { margin: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .market__stats p:last-child { margin: 6px 0 0; font-size: 18px; font-weight: 700; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips button { padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: .18s; } .chips button:hover { color: var(--text); border-color: var(--dim); } .chips button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0a0a0a; } .sort { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .sort select, .sort input { font: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .card { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; overflow: hidden; transition: .2s; } .card:hover { border-color: var(--accent); transform: translateY(-3px); } .card__art { position: relative; background: none; border: 0; padding: 0; cursor: pointer; display: block; } .card__art img { width: 100%; aspect-ratio: 1; } .card__rarity { position: absolute; top: 10px; left: 10px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--chip-bg); backdrop-filter: blur(4px); } .card__body { padding: 13px 14px 15px; display: grid; gap: 11px; border-top: 1px solid var(--line); } .card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .card__title b { font-size: 13px; } .card__title span { font-size: 11px; color: var(--dim); } .card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .card__price b { font-size: 16px; } .card__price b small { font-size: 10px; color: var(--muted); font-weight: 400; margin-left: 3px; } .card__price span { font-size: 10px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; } .card .btn { width: 100%; } /* --------------------------------------------------------------- benefits -- */ .perks { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .perk { background: var(--bg); padding: 26px 24px; } .perk i { display: block; font-style: normal; margin-bottom: 12px; font-size: 11px; letter-spacing: .18em; color: var(--accent); } .perk h3 { margin: 0 0 9px; font-size: 15px; letter-spacing: .01em; } .perk p { margin: 0; font-size: 14px; color: var(--muted); } .ladder { margin-top: 34px; padding: 30px; border: 1px solid var(--line); background: var(--panel); display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: center; } .ladder__copy h3 { margin: 0 0 14px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .ladder__copy p { margin: 0 0 12px; color: var(--muted); font-size: 14px; max-width: 52ch; } .ladder__note { font-size: 13px !important; color: var(--dim) !important; margin-bottom: 0 !important; } .ladder__table { align-self: start; } .ladder__table td:nth-child(2), .ladder__table th:nth-child(2) { text-align: right; } /* ------------------------------------------------------------- collection -- */ .notes { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .notes article { background: var(--bg); padding: 28px 26px; } .notes h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: .02em; display: flex; align-items: baseline; gap: 12px; } .notes h3 i { font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--accent); } .notes p { margin: 0; color: var(--muted); font-size: 14px; } .mission { margin-top: 34px; padding: 34px 30px; border: 1px solid var(--line); background: var(--panel); } .mission h3 { margin: 0 0 20px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .mission ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; } .mission li { padding-left: 26px; position: relative; color: var(--muted); } .mission li::before { content: "\25C6"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 11px; } /* -------------------------------------------------------------------- faq -- */ .faq { border-top: 1px solid var(--line-soft); } .faq details { border-bottom: 1px solid var(--line-soft); } .faq summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-size: 15px; transition: color .18s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 18px; } .faq details[open] summary::after { content: "\2212"; } .faq p { margin: 0 0 22px; color: var(--muted); font-size: 14px; max-width: 64ch; } /* ----------------------------------------------------------------- footer -- */ .footer { border-top: 1px solid var(--line-soft); padding: 52px 0 40px; background: var(--bg-alt); } .footer__inner { display: grid; gap: 26px; } .footer__brand { display: flex; align-items: flex-start; gap: 13px; } .footer__brand b { font-size: 14px; letter-spacing: .22em; } .footer__brand p { margin: 5px 0 0; color: var(--dim); font-size: 13px; } .footer__links { display: flex; flex-wrap: wrap; gap: 22px; } .footer__links a { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .footer__links a:hover { color: var(--accent); } .footer__legal { margin: 0; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--dim); max-width: 70ch; line-height: 1.8; } /* ----------------------------------------------------------------- reveal -- */ .reveal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--scrim); backdrop-filter: blur(6px); padding: var(--pad); } .reveal[hidden] { display: none; } .reveal__inner { display: grid; gap: 26px; justify-items: center; width: 100%; max-width: 880px; } .reveal__kicker { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } .reveal__cards { display: grid; gap: 14px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); max-height: 58vh; overflow-y: auto; } .reveal__cards.is-single { grid-template-columns: minmax(0, 260px); justify-content: center; } .pull-card { margin: 0; border: 1px solid var(--line); background: var(--panel); opacity: 0; transform: translateY(14px) scale(.94); animation: pop .42s cubic-bezier(.2, .9, .3, 1.3) forwards; } @keyframes pop { to { opacity: 1; transform: none; } } .pull-card img { width: 100%; aspect-ratio: 1; } .pull-card__meta { padding: 10px 11px; border-top: 1px solid var(--line); display: grid; gap: 4px; } .pull-card__meta b { font-size: 12px; } .pull-card__meta span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; } .pull-card[data-tier="Legendary"], .pull-card[data-tier="Mythic"] { box-shadow: 0 0 0 1px currentColor, 0 0 26px -4px currentColor; } /* ------------------------------------------------------------------ modal -- */ .modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--pad); } .modal[hidden] { display: none; } .modal__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(5px); } .modal__box { position: relative; width: min(640px, 100%); max-height: 86vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); } .modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--line); background: var(--chip-bg); color: var(--muted); } .modal__x:hover { color: var(--accent); border-color: var(--accent); } .detail { display: grid; grid-template-columns: 240px 1fr; } .detail__art { width: 100%; aspect-ratio: 1; border-right: 1px solid var(--line); } .detail__body { padding: 24px 24px 26px; display: grid; gap: 16px; align-content: start; } .detail__body h3 { margin: 0; font-size: 22px; } .detail__id { margin: 0; font-size: 12px; color: var(--dim); letter-spacing: .1em; } .detail__lore { margin: 0; font-size: 13px; color: var(--muted); } .detail__traits { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin: 0; } .detail__traits div { background: var(--panel); padding: 10px 12px; display: flex; justify-content: space-between; gap: 12px; } .detail__traits dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .detail__traits dd { margin: 0; font-size: 12px; } .detail__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ------------------------------------------------------------------ toast -- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 95; background: var(--panel); border: 1px solid var(--accent); color: var(--text); padding: 12px 20px; border-radius: var(--radius); font-size: 13px; opacity: 0; pointer-events: none; transition: .26s; box-shadow: 0 10px 30px var(--shadow); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ------------------------------------------------------------- responsive -- */ @media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; } .gacha { grid-template-columns: 1fr; } .machine { justify-self: center; width: min(380px, 100%); } .detail { grid-template-columns: 1fr; } .detail__art { border-right: 0; border-bottom: 1px solid var(--line); max-width: 260px; } /* Nav wraps to a second, scrollable row rather than dropping the links. */ html { scroll-padding-top: 112px; } .nav__inner { flex-wrap: wrap; height: auto; gap: 12px; padding-top: 12px; } .nav__links { order: 3; width: 100%; margin: 0; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; } .nav__links::-webkit-scrollbar { display: none; } .nav__right { margin-left: auto; } .brand__mark { width: 26px; height: 26px; } .brand__text b { font-size: 13px; letter-spacing: .16em; } #connect { padding: 9px 13px; font-size: 11px; letter-spacing: .1em; } } @media (max-width: 860px) { .ladder { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 620px) { .stats, .market__stats { grid-template-columns: repeat(2, 1fr); } .banner__buy { grid-template-columns: 1fr; } .toolbar { flex-direction: column; align-items: stretch; } .brand__text i { display: none; } } /* ============================================ whitelist-only display mode == */ /* Set from Supabase (and cached in localStorage so repeat visitors do not see the full site flash before it collapses). Everything except the signup is hidden; the marketplace script never needs to know this mode exists. */ :root.wl-only .hero, :root.wl-only .marquee, :root.wl-only #gacha, :root.wl-only #market, :root.wl-only #benefits, :root.wl-only #collection, :root.wl-only #faq, :root.wl-only .nav__links { display: none; } :root.wl-only #whitelist { border-top: 0; min-height: 78vh; display: grid; align-content: center; }