:root { --cream: #fff6e9; --cream-soft: #fff0da; --ink: #3d2712; --ink-soft: #5a3a1a; --maple: #b5651d; --butter: #f4c542; --berry: #d42f4d; --mint: #ccff00; /* Robinhood Chain accent green (docs.robinhood.com/chain) */ --paw-pink: #ff8fb1; --font-display: "Titan One", cursive; --font-accent: "Bowlby One SC", cursive; --font-mono: "VT323", monospace; --shadow-hard: 4px 4px 0px 0px var(--ink); --shadow-hard-sm: 3px 3px 0px 0px var(--ink); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: var(--font-mono); font-size: 20px; background-image: radial-gradient(var(--ink-soft) 1px, transparent 1px); background-size: 22px 22px; background-attachment: fixed; background-blend-mode: overlay; opacity: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- In-app browser warning ---------- */ .inapp-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: var(--berry); color: var(--cream); padding: 10px 40px 10px 14px; font-size: 14px; line-height: 1.5; text-align: center; } .inapp-banner p { margin: 0; } .inapp-banner__btn { background: var(--cream); color: var(--berry); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 10px; font-weight: bold; font-size: 13px; cursor: pointer; margin: 0 6px; } .inapp-banner__close { position: absolute; right: 8px; top: 8px; background: none; border: none; color: var(--cream); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 6px; } /* ---------- GTD status banner ---------- */ .gtd-status-banner { background: var(--ink); color: var(--cream); text-align: center; padding: 10px 14px; font-size: 15px; line-height: 1.5; border-bottom: 3px solid var(--berry); } .gtd-status-banner p { margin: 0; } .gtd-status-banner strong { color: var(--cream); } /* ---------- Wallet select modal ---------- */ .wallet-modal { position: fixed; inset: 0; z-index: 900; background: rgba(20, 12, 5, 0.75); display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .wallet-modal__card { position: relative; background: var(--cream); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); max-width: 380px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 26px 24px; text-align: center; } .wallet-modal__close { position: absolute; right: 12px; top: 12px; background: none; border: none; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; } .wallet-modal__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .wallet-modal__item { display: flex; align-items: center; gap: 12px; width: 100%; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--cream-soft); padding: 10px 14px; font-size: 16px; font-weight: bold; color: var(--ink); cursor: pointer; text-align: left; box-shadow: var(--shadow-hard-sm); transition: transform 0.08s ease; } .wallet-modal__item:hover { transform: translate(-1px, -1px); } .wallet-modal__item:disabled { opacity: 0.6; cursor: default; transform: none; } .wallet-modal__icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; object-fit: contain; } .wallet-modal__empty { color: var(--ink-soft); font-size: 15px; margin: 14px 0 0; } /* ---------- Entry gate ---------- */ .gate { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 5, 0.86); display: flex; align-items: center; justify-content: center; padding: 24px 16px; } /* Set instantly by the inline script in , before first paint, so a returning visitor's already-accepted gate never flashes on screen. */ html.gate-accepted #gate { display: none; } .gate__card { background: var(--cream); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); max-width: 620px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 26px 26px 30px; } .gate__title { font-family: var(--font-display); font-size: clamp(20px, 4vw, 26px); color: var(--berry); margin: 0 0 16px; text-align: center; } .gate__body p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; } .gate__quote { font-family: var(--font-accent); font-size: 18px; color: var(--ink); text-align: center; margin: 0 0 14px; } .gate__finePrint { font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-align: center; margin: 0 0 14px; } .gate__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--ink); margin: 18px 0 18px; cursor: pointer; } .gate__checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--berry); cursor: pointer; flex-shrink: 0; } .gate__enter { width: 100%; font-size: 16px; } .gate__enter:disabled { opacity: 0.45; cursor: not-allowed; } .gate__enter:disabled:hover { transform: none; } body.gate-locked { overflow: hidden; } /* ---------- Ticker ---------- */ .ticker { background: var(--ink); color: var(--cream); overflow: hidden; white-space: nowrap; padding: 6px 0; font-family: var(--font-mono); letter-spacing: 1px; font-size: 16px; } .ticker__track { display: inline-block; animation: ticker-scroll 18s linear infinite; } .ticker__track span { padding-right: 0; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Nav ---------- */ .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 5vw; gap: 12px; } .nav__logo { font-family: var(--font-display); font-size: 26px; color: var(--ink); justify-self: start; } .nav__links { display: flex; gap: 24px; font-size: 18px; justify-self: center; } .nav__links a { color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; } .nav__links a:hover { border-bottom-color: var(--berry); color: var(--ink); } .nav__actions { display: flex; align-items: center; gap: 10px; justify-self: end; } .nav__social { font-family: var(--font-mono); font-size: 15px; color: var(--ink-soft); text-decoration: none; padding: 5px 10px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--cream-soft); box-shadow: var(--shadow-hard-sm); transition: transform 0.08s ease; } .nav__social:hover { transform: translate(-1px, -1px); color: var(--ink); } .nav__music { font-size: 17px; line-height: 1; width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream-soft); box-shadow: var(--shadow-hard-sm); cursor: pointer; transition: transform 0.08s ease; } .nav__music:hover { transform: translate(-1px, -1px); } .nav__music:disabled { cursor: not-allowed; opacity: 0.5; } .nav__music:disabled:hover { transform: none; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-accent); font-size: 15px; letter-spacing: 0.5px; text-decoration: none; padding: 16px 26px; border-radius: var(--radius-md); border: 3px solid var(--ink); box-shadow: var(--shadow-hard); cursor: pointer; transition: transform 0.08s ease; } .btn:hover { transform: translate(-2px, -2px); } .btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0px 0px var(--ink); } .btn-cherry { background: var(--berry); color: var(--cream); } .btn-mint { background: var(--mint); color: var(--ink); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn:disabled:hover { transform: none; } /* ---------- X connect (start overlay + whitelist ticket) ---------- */ .handle-connect { width: 100%; } .handle-connect__btn { width: 100%; max-width: 240px; font-size: 14px; } .handle-connect__status { font-family: var(--font-mono); font-size: 16px; color: var(--ink-soft); background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; } .handle-connect__name { color: var(--berry); } .handle-connect__disconnect { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; margin-left: 4px; } .handle-connect__disconnect:hover { color: var(--berry); } .handle-connect--ticket { margin-bottom: 14px; } /* ---------- Leaderboard ---------- */ .leaderboard { width: 100%; max-width: 280px; background: var(--cream-soft); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 10px 14px; } .leaderboard__title { font-family: var(--font-accent); font-size: 13px; color: var(--berry); margin: 0 0 6px; text-align: center; } .leaderboard__list { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 16px; text-align: left; } .leaderboard__list li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--ink-soft); } .leaderboard__list li.leaderboard__me { color: var(--berry); font-weight: bold; } .leaderboard__list li.leaderboard__empty { display: block; text-align: center; color: var(--ink-soft); font-size: 15px; } .leaderboard--board { max-width: 420px; margin: 22px auto 0; padding: 14px 20px; } .leaderboard--board .leaderboard__title { font-size: 16px; } .leaderboard--board .leaderboard__list { font-size: 17px; } /* ---------- Hero ---------- */ .hero { position: relative; text-align: center; padding: 60px 5vw 40px; max-width: 900px; margin: 0 auto; } .hero__badge { display: inline-block; background: var(--berry); color: var(--cream); font-family: var(--font-accent); font-size: 13px; padding: 8px 16px; border-radius: var(--radius-sm); border: 2px solid var(--ink); box-shadow: var(--shadow-hard-sm); transform: rotate(-4deg); margin-bottom: 18px; } .hero__title { margin: 0; line-height: 1; } .hero__title-img { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; } .hero__tagline { font-size: 22px; color: var(--ink-soft); max-width: 560px; margin: 22px auto 30px; line-height: 1.4; } .hero__cta { font-size: 16px; } /* ---------- NFT Gate promo banner (links to nft-whitelist.html) ---------- */ .nft-promo { padding: 10px 5vw 30px; display: flex; justify-content: center; } .nft-promo__card { position: relative; width: 100%; max-width: 480px; background: linear-gradient(135deg, var(--paw-pink) 0%, var(--butter) 100%); border: 3px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-hard); padding: 30px 26px 28px; text-align: center; } .nft-promo__badge { position: absolute; top: -16px; right: 18px; background: var(--mint); color: var(--ink); font-family: var(--font-accent); font-size: 13px; padding: 6px 14px; border-radius: var(--radius-sm); border: 2px solid var(--ink); box-shadow: var(--shadow-hard-sm); animation: nft-promo-wobble 2.2s ease-in-out infinite; } .nft-promo__kicker { font-family: var(--font-accent); font-size: 12px; letter-spacing: 2px; color: var(--berry); margin: 0 0 8px; } .nft-promo__title { font-family: var(--font-display); font-size: 28px; color: var(--ink); margin: 0 0 10px; } .nft-promo__sub { color: var(--ink-soft); font-size: 16px; line-height: 1.4; margin: 0 auto 22px; max-width: 380px; } .nft-promo__cta { font-size: 15px; animation: nft-promo-pulse 1.8s ease-in-out infinite; } @keyframes nft-promo-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } @keyframes nft-promo-pulse { 0%, 100% { box-shadow: var(--shadow-hard); } 50% { box-shadow: 4px 4px 0px 0px var(--mint), 0 0 0 5px rgba(204, 255, 0, 0.35); } } @media (prefers-reduced-motion: reduce) { .nft-promo__badge, .nft-promo__cta { animation: none; } } /* ---------- Holder GTD standalone page hero (nft-whitelist.html) ---------- */ .holder-gtd-hero { text-align: center; padding: 50px 5vw 20px; max-width: 700px; margin: 0 auto; } .holder-gtd-hero__back { display: inline-block; color: var(--ink-soft); text-decoration: none; font-size: 15px; margin-bottom: 22px; border-bottom: 2px solid transparent; } .holder-gtd-hero__back:hover { color: var(--ink); border-bottom-color: var(--berry); } .holder-gtd-hero__kicker { font-family: var(--font-accent); font-size: 13px; letter-spacing: 2px; color: var(--berry); margin: 0 0 10px; } .holder-gtd-hero__title { font-family: var(--font-display); font-size: clamp(28px, 6vw, 42px); color: var(--ink); margin: 0 0 14px; -webkit-text-stroke: 1px var(--ink); } .holder-gtd-hero__sub { color: var(--ink-soft); font-size: 18px; line-height: 1.5; margin: 0 auto; max-width: 560px; } /* ---------- Run / Game ---------- */ .run { padding: 40px 5vw 20px; text-align: center; } .run__heading h2 { font-family: var(--font-display); color: var(--berry); font-size: clamp(28px, 5vw, 40px); margin-bottom: 6px; -webkit-text-stroke: 1px var(--ink); } .run__heading p { color: var(--ink-soft); font-size: 19px; margin-top: 0; } .run__scarcity { color: var(--berry); font-weight: bold; font-size: 16px; margin-top: 4px; } .cabinet { max-width: 820px; margin: 24px auto 0; background: var(--cream-soft); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard); padding: 16px; } .cabinet__hud { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 22px; padding: 0 6px 8px; color: var(--ink); } .cabinet__screen { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 400px; border: 3px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); } /* While actually running, drop the reserved overlay-menu height so the canvas isn't surrounded by dead space during play. */ .cabinet__screen--playing { min-height: 0; } #gameCanvas { display: block; width: 100%; height: auto; touch-action: manipulation; } .overlay { position: absolute; inset: 0; background: rgba(255, 246, 233, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; overflow-y: auto; } .overlay--hidden { display: none; } .overlay__title { font-family: var(--font-display); font-size: 34px; color: var(--ink); margin: 0; } .overlay__hint { font-size: 18px; color: var(--ink-soft); margin: 0 0 6px; } .overlay__score { font-size: 24px; margin: 0; } .overlay__msg { font-size: 18px; max-width: 340px; color: var(--ink-soft); margin: 0 0 6px; } /* ---------- Whitelist Ticket ---------- */ .whitelist { padding: 50px 5vw; display: flex; justify-content: center; } .ticket { position: relative; width: 100%; max-width: 480px; background: #fffdf5; border: 3px dashed var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-hard); padding: 30px 28px; text-align: center; } .ticket__lock { position: absolute; inset: 0; background: rgba(255, 246, 233, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-md); padding: 20px; } .lock__icon { font-size: 40px; margin: 0; } .lock__text { font-size: 18px; color: var(--ink-soft); max-width: 300px; margin: 0; } .ticket__kicker { font-family: var(--font-accent); font-size: 12px; letter-spacing: 2px; color: var(--berry); margin: 0 0 6px; } .ticket__title { font-family: var(--font-display); font-size: 30px; margin: 0 0 8px; } .ticket__sub { color: var(--ink-soft); font-size: 17px; margin: 0 0 18px; } #walletInput { width: 100%; font-family: var(--font-mono); font-size: 20px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink); margin-bottom: 8px; } #walletInput:focus { outline: 3px solid var(--mint); } .ticket__tasks { position: absolute; inset: 0; background: rgba(255, 246, 233, 0.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-md); padding: 24px 22px; overflow-y: auto; } /* .ticket__tasks is an inset:0 overlay, so it can only be as tall as its parent .ticket already is - only stretch the card itself while the 3-item checklist is the thing actually showing, so every other state (locked, form, success) stays its own natural, shorter height. */ .ticket:has(> .ticket__tasks:not(.ticket--hidden)) { min-height: 560px; } .tasks__list { list-style: none; margin: 6px 0 4px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; } .tasks__item { border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--cream); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .tasks__item--done { background: var(--mint); } .tasks__label { margin: 0; font-size: 15px; font-weight: bold; flex: 1 1 140px; text-align: left; } .tasks__actions { display: flex; gap: 6px; flex-wrap: wrap; } .tasks__open, .tasks__done { font-size: 13px; padding: 8px 12px; } .tasks__done:disabled { opacity: 0.6; cursor: default; } .tasks__hint { color: var(--ink-soft); font-size: 14px; margin: 4px 0 0; } .tasks__warning { background: var(--cream-soft); border: 2px dashed var(--berry); border-radius: var(--radius-sm); color: var(--berry); font-size: 13px; font-weight: bold; padding: 8px 12px; margin: 0 0 10px; } .ticket__error { color: var(--berry); font-size: 15px; min-height: 18px; margin: 0 0 10px; } .ticket__submit { width: 100%; font-size: 16px; } .ticket__success .success__stamp { font-family: var(--font-accent); color: var(--mint); -webkit-text-stroke: 1px var(--ink); font-size: 14px; letter-spacing: 1px; } .ticket__success h3 { font-family: var(--font-display); font-size: 26px; margin: 6px 0 10px; } .ticket__success p { color: var(--ink-soft); font-size: 17px; } #savedWallet { color: var(--berry); font-weight: bold; word-break: break-all; } /* ---------- Sneak Peek ---------- */ .sneak { position: relative; padding: 10px 5vw 20px; display: flex; justify-content: center; } .sneak__panel { position: relative; width: 100%; max-width: 480px; background: #fffdf5; border: 3px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-hard); padding: 26px 28px; text-align: center; } /* The Holder GTD panel holds 22 collection tiles - the regular 480px sneak-peek card width (sized for a short GTD ticket) leaves them cramped into 4 narrow columns. Give it more room on desktop. */ #nft-gate .sneak__panel { max-width: 760px; } .gtd__counter { font-family: var(--font-mono); font-size: 19px; font-weight: bold; color: var(--berry); text-align: center; margin: 0 0 14px; } .sneak__lock, .sneak__limit { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Caution-tape X slapped across the whole card whenever its sold-out state (.sneak__limit) is the one showing. .sold-out-tape is a dedicated clipping layer sized to exactly match .sneak__panel (inset: 0), separate from the decorative floating character (.member--blue) - so the tape reaches the card's real edges while the character (z-index 2, above this layer's z-index 1) still renders in front of it uncropped. */ .sold-out-tape { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .sneak__panel:has(> .sneak__limit:not(.ticket--hidden)) .sold-out-tape::before, .sneak__panel:has(> .sneak__limit:not(.ticket--hidden)) .sold-out-tape::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150%; height: 30px; margin-top: -15px; margin-left: -75%; background: repeating-linear-gradient( 45deg, var(--butter) 0px, var(--butter) 16px, var(--ink) 16px, var(--ink) 32px ); border: 2px solid var(--ink); } .sneak__panel:has(> .sneak__limit:not(.ticket--hidden)) .sold-out-tape::before { transform: rotate(25deg); } .sneak__panel:has(> .sneak__limit:not(.ticket--hidden)) .sold-out-tape::after { transform: rotate(-25deg); } /* The lock__icon emoji was peeking through right at the X's crossing point - the tape already communicates "closed" on its own. */ .sneak__panel:has(> .sneak__limit:not(.ticket--hidden)) .lock__icon { visibility: hidden; } .sneak__reveal .success__stamp { font-family: var(--font-accent); color: var(--mint); -webkit-text-stroke: 1px var(--ink); font-size: 14px; letter-spacing: 1px; } .sneak__reveal h3 { font-family: var(--font-display); font-size: 26px; margin: 6px 0 10px; } .sneak__reveal p { color: var(--ink-soft); font-size: 17px; margin: 0; } .nftgate__collections { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px; } .nftgate__card { display: flex; flex-direction: column; align-items: center; gap: 6px; } .nftgate__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--cream-soft); box-shadow: var(--shadow-hard-sm); } .nftgate__card span { font-family: var(--font-mono); font-size: 15px; font-weight: bold; color: var(--ink); text-align: center; line-height: 1.25; } .nftgate__holds { color: var(--ink-soft); font-size: 15px; margin: 0 0 14px; } /* ---------- Stats ---------- */ .stats { padding: 10px 5vw 10px; display: flex; justify-content: center; } .stats__row { width: 100%; max-width: 560px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .stats__item { flex: 1 1 140px; background: var(--cream-soft); border: 3px solid var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-hard-sm); padding: 14px 10px; text-align: center; } .stats__label { font-family: var(--font-accent); font-size: 12px; letter-spacing: 1.5px; color: var(--berry); margin: 0 0 6px; } .stats__value { font-family: var(--font-mono); font-size: 26px; color: var(--ink); margin: 0; } /* ---------- Why Pawffle ---------- */ .why { position: relative; padding: 30px 5vw 70px; text-align: center; } .why h2 { font-family: var(--font-display); color: var(--ink); font-size: clamp(26px, 5vw, 36px); margin-bottom: 8px; } .why__sub { color: var(--ink-soft); font-size: 19px; margin: 0 auto 10px; max-width: 480px; } .why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1100px; margin: 30px auto 0; } @media (min-width: 820px) { .why__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } } .why__card { position: relative; background: var(--cream-soft); border: 3px solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-hard-sm); padding: 22px 18px; text-align: left; } .why__icon { font-size: 30px; margin: 0 0 6px; } .why__card h3 { margin: 0 0 8px; font-size: 21px; } .why__card p { margin: 0; color: var(--ink-soft); font-size: 17px; } .why__outro { margin: 34px auto 0; max-width: 480px; color: var(--ink-soft); font-size: 17px; font-style: italic; } /* ---------- Decorative collection members ---------- */ .member { position: absolute; pointer-events: none; user-select: none; z-index: 2; } .member--orange { /* Sits in normal document flow right after the CTA, pulled up with a negative margin so its raised hand overlaps the button - it reads as the character holding it up, rather than a fixed pixel offset that only lined up with the old (shorter) CSS-text hero title. */ position: static; display: block; width: 130px; margin: -18px auto 0; } .member--blue { width: 190px; top: -10px; right: -155px; } .member--mba { width: 170px; top: -265px; left: 50%; transform: translateX(-50%); } @media (max-width: 1000px) { .member { display: none; } /* The hero character stays visible on mobile - just smaller, with a lighter overlap onto the CTA than the desktop size uses. Needs its own display:block since the .member rule above hides it by default and wins ties on source order otherwise. */ .member--orange { display: block; width: 110px; margin: -12px auto 0; } /* Same idea for the MBA character: shown in normal flow at the top of its card instead of the desktop absolute overlap, which doesn't translate to arbitrary mobile widths. The blue character stays hidden on mobile (via the .member rule above) — it looked out of place stacked above the GTD counter. */ .member--mba { display: block; position: static; width: 110px; margin: 0 auto 10px; transform: none; } } @media (max-width: 850px) { .nav { display: flex; flex-direction: column; align-items: center; gap: 12px; } .nav__links { justify-content: center; flex-wrap: wrap; } .nav__actions { justify-content: center; flex-wrap: wrap; } } @media (max-width: 560px) { body { font-size: 18px; } } /* Utility hide class — kept last so it always wins the cascade regardless of what component-specific rule (e.g. .sneak__lock's display: flex) is also applied to the same element. */ .ticket--hidden { display: none; }