/* ==================================================================== THE DECK — redesign v1 digital artifacts deserve an artifact-feeling presentation. ==================================================================== */ *,*::before,*::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } :root { --bg: #080b14; /* deep navy */ --bg-1: #101726; --bg-2: #182234; --bg-3: #202c42; --border: #26344c; --border-bright:#3a5478; --text: #e6e7dd; /* cool bone */ --text-muted: #8a92a2; --text-dim: #5c657a; --phosphor: #4aa8ff; /* azure — primary accent */ --amber: #f3a83b; /* archival amber */ --magenta: #e94f7e; /* rare highlight */ --blue: #6ab8ff; --font-display: 'VT323', 'Courier New', monospace; --font-body: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; --font-pixel: 'Silkscreen', 'VT323', monospace; /* smooth swap when theme changes */ --theme-transition: background-color .35s ease, color .35s ease, border-color .35s ease; /* hover-overlay tint used by .cards-strip__info — flips with theme */ --overlay-tint: rgba(8, 11, 20, 0.94); } html[data-theme="light"] { --overlay-tint: rgba(240, 235, 232, 0.96); } body, .status-bar, .site-nav, .hero, .specimen, .specimen-band, .section, .exhibit, .explore, .explore__card, .firsts, .firsts__item, .site-footer, .panel, .quote-block, .cards-strip, .cards-strip__cell { transition: var(--theme-transition); } /* ==================================================================== LIGHT THEME — QT cream background, dark text. Activated via . Toggle is in the status bar. ==================================================================== */ html[data-theme="light"] { --bg: #f0ebe8; /* original Breakout Wallet QT cream */ --bg-1: #e6dfd6; --bg-2: #d8d0c4; --bg-3: #c8bfb0; --border: #c0b6a4; --border-bright:#9c907a; --text: #1a1612; --text-muted: #5a4f3d; --text-dim: #8a7e68; --phosphor: #1d5fb2; /* deep azure for legibility on cream */ --amber: #b8741a; --magenta: #b83059; --blue: #2a6db8; } /* in light mode the scanlines+vignette become noise — drop them */ html[data-theme="light"] body::before { opacity: 0; } html[data-theme="light"] body::after { opacity: 0; } /* card-art containers (originally cream-on-dark) shift slightly so cards don't disappear into the page bg in light mode */ html[data-theme="light"] .specimen__art, html[data-theme="light"] .cards-strip__cell { background: #faf6f1; border: 1px solid var(--border-bright); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); } /* exhibit frame stays dark in both modes — frames the artwork */ html[data-theme="light"] .exhibit-large__frame, html[data-theme="light"] .exhibit__frame { background: #14110d; } html[data-theme="light"] ::selection { background: var(--phosphor); color: #fff; } /* ==================================================================== THEME TOGGLE — text-style, lives inside the status bar reads like an environmental control: "Display · Dark · Light" ==================================================================== */ .theme-toggle { margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-muted); line-height: 1; display: inline-flex; align-items: center; gap: .55rem; } .theme-toggle__label { color: var(--text-muted); } .theme-toggle__sep { color: var(--border-bright); margin: 0 -.32rem; } .theme-toggle__opt { color: var(--text-dim); /* inactive: clearly dim */ transition: color .2s ease; } /* active option: phosphor + bold weight (no extra width — won't wrap the bar) */ html:not([data-theme="light"]) .theme-toggle__opt--dark, html[data-theme="light"] .theme-toggle__opt--light { color: var(--phosphor); font-weight: 700; } /* on hover, the inactive option lifts toward full text color */ .theme-toggle:hover .theme-toggle__opt { color: var(--text); } html:not([data-theme="light"]) .theme-toggle:hover .theme-toggle__opt--dark { color: var(--phosphor); } html[data-theme="light"] .theme-toggle:hover .theme-toggle__opt--light { color: var(--phosphor); } .theme-toggle:focus-visible { outline: 1px solid var(--phosphor); outline-offset: 3px; } /* ==================================================================== ARROW REPLACEMENTS — used in CTAs and inline link arrows cursor block (▌) for primary CTAs, chevrons (›››) for inline links ==================================================================== */ .arrow-cursor { display: inline-flex; align-items: center; justify-content: center; width: 14px; font-family: var(--font-display); font-size: 22px; line-height: 1; color: currentColor; margin-left: .25rem; animation: arrow-cursor-blink 1.05s steps(2) infinite; transition: transform .15s ease, opacity .15s ease; } .arrow-cursor::before { content: '▌'; } @keyframes arrow-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* on hover the cursor stops blinking and slides right */ .btn:hover .arrow-cursor, .btn:focus-visible .arrow-cursor { animation: none; opacity: 1; transform: translateX(4px); } .arrow-chevrons { display: inline-flex; gap: 1px; font-family: var(--font-pixel); font-size: 14px; letter-spacing: 0.06em; line-height: 1; color: var(--phosphor); /* parents (.post-link, .btn) supply their own spacing via gap */ margin: 0; vertical-align: -1px; } .arrow-chevrons span { animation: arrow-chev-pulse 1.2s steps(1) infinite; opacity: .25; } .arrow-chevrons span:nth-child(1) { animation-delay: 0s; } .arrow-chevrons span:nth-child(2) { animation-delay: .2s; } .arrow-chevrons span:nth-child(3) { animation-delay: .4s; } @keyframes arrow-chev-pulse { 0%, 30% { opacity: .25; } 40%, 75% { opacity: 1; } 85%, 100% { opacity: .25; } } /* when used inside a button that fills phosphor on hover, the chevrons need to flip to bg-color or they'd disappear into the green */ .btn:hover .arrow-chevrons, .btn:focus-visible .arrow-chevrons { color: var(--bg); } /* ==================================================================== ANIMATION B — Pixel-dust assembly on card images scattered phosphor pixels converge, then dissolve as image reveals ==================================================================== */ .dust-target { position: relative; } .dust-target > img.dust-target__img { opacity: 0; transition: opacity 320ms ease; } .dust-target.is-revealed > img.dust-target__img { opacity: 1; } .dust-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .dust-pixel { position: absolute; width: 4px; height: 4px; background: var(--phosphor); box-shadow: 0 0 4px rgba(74, 168, 255, 0.6); will-change: transform, opacity; } /* light-mode pixels: deep azure to match the light-theme accent */ html[data-theme="light"] .dust-pixel { background: var(--phosphor); box-shadow: 0 0 4px rgba(29, 95, 178, 0.5); } /* (Boot sequence removed — was hiding the status bar when JS didn't complete cleanly. Status bar now renders immediately like before.) */ /* ----- subtle CRT scanlines, ~3% opacity ----- */ body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.025) 3px, rgba(255,255,255,0) 4px ); pointer-events: none; z-index: 9999; mix-blend-mode: overlay; } /* ----- subtle vignette so the corners feel like paper edges ----- */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 9998; } ::selection { background: var(--phosphor); color: var(--bg); } a { color: var(--phosphor); text-decoration: none; border-bottom: 1px dashed var(--border-bright); transition: color .15s, border-color .15s; } a:hover { color: var(--amber); border-color: var(--amber); } img { display: block; max-width: 100%; image-rendering: -webkit-optimize-contrast; } .pixelated { image-rendering: pixelated; } /* ==================================================================== LAYOUT PRIMITIVES ==================================================================== */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1.75rem; } .prose { max-width: 680px; margin: 0 auto; padding: 0 1.75rem; } .hr-pixel { height: 0; margin: 2.5rem 0; border: 0; border-top: 1px dashed var(--border-bright); } .hr-solid { height: 0; margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border); } .label { font-family: var(--font-pixel); font-size: 15px; letter-spacing: 0.14em; color: var(--amber); text-transform: uppercase; } .label.green { color: var(--phosphor); } .label.muted { color: var(--text-muted); } .label.magenta{ color: var(--magenta); } .mono-meta { font-family: var(--font-body); font-size: 16px; color: var(--text-muted); letter-spacing: 0.04em; } /* ==================================================================== STATUS BAR (sticky top, museum exhibit ID strip) ==================================================================== */ .status-bar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .status-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: .55rem 1.75rem; max-width: 1280px; margin: 0 auto; } .status-bar__dot { width: 7px; height: 7px; background: var(--phosphor); box-shadow: 0 0 4px var(--phosphor); animation: blink 1.4s infinite; flex-shrink: 0; } @keyframes blink { 0%,90%,100% {opacity:1;} 95% {opacity:.2;} } .status-bar__divider { color: var(--border-bright); } .status-bar__amber { color: var(--amber); } /* ==================================================================== NAV ==================================================================== */ .site-nav { border-bottom: 1px solid var(--border); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; max-width: 1280px; margin: 0 auto; } .site-nav__brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-decoration: none; border: 0; color: var(--text); white-space: nowrap; line-height: 1; } .site-nav__brand-text { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; letter-spacing: 0.04em; color: var(--text); } .site-nav__brand-sub { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } .site-nav__links { display: flex; gap: 0.9rem; margin-left: auto; /* always hug the right edge */ font-family: var(--font-body); font-size: 14px; letter-spacing: 0.01em; } .site-nav__links a { color: var(--text); border: 0; padding: .25rem 0; position: relative; white-space: nowrap; } .site-nav__links a::before { content:'['; color: var(--text-dim); margin-right: 4px; opacity: 0; transition: opacity .15s; } .site-nav__links a::after { content:']'; color: var(--text-dim); margin-left: 4px; opacity: 0; transition: opacity .15s; } .site-nav__links a:hover, .site-nav__links a.is-current { color: var(--phosphor); } .site-nav__links a:hover::before, .site-nav__links a:hover::after, .site-nav__links a.is-current::before, .site-nav__links a.is-current::after { opacity: 1; } /* ==================================================================== HERO ==================================================================== */ .hero { padding: 4.5rem 0 3.5rem; position: relative; } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; } /* coin page: stretch the text column to the specimen height so a bottom-pinned archive note (margin-top:auto) aligns with the card base */ .hero__primary--fill { align-self: stretch; display: flex; flex-direction: column; } .hero__eyebrow { margin-bottom: 1.5rem; display: flex; align-items: center; gap: .75rem; } .hero__title { font-family: var(--font-display); font-size: clamp(3.8rem, 7.5vw, 6rem); line-height: 0.92; letter-spacing: 0.01em; margin: 0 0 1.8rem; color: var(--text); } .hero__title .accent { color: var(--phosphor); } .hero__lede { font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: var(--text); max-width: 42ch; margin: 0 0 2.4rem; } .hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } /* ----- Intro video trigger (small monospace pill above the CTAs) ----- */ .hero__intro-trigger { display: inline-flex; align-items: center; gap: .8rem; padding: .6rem .95rem; margin: 0 0 1.4rem; background: transparent; border: 1px solid var(--border-bright); color: var(--phosphor); font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .hero__intro-trigger:hover, .hero__intro-trigger:focus-visible { background: var(--phosphor); color: var(--bg); border-color: var(--phosphor); outline: none; } .hero__intro-trigger__icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-size: 9px; line-height: 1; } .hero__intro-trigger__meta { color: var(--text-dim); font-size: 11px; letter-spacing: 0.2em; } .hero__intro-trigger:hover .hero__intro-trigger__meta, .hero__intro-trigger:focus-visible .hero__intro-trigger__meta { color: var(--bg); } /* ----- Intro video modal ----- */ .video-modal { margin: auto; padding: 0; border: 0; background: transparent; max-width: min(1200px, 92vw); max-height: 92vh; width: 100%; color: var(--text); } .video-modal::backdrop { background: rgba(10, 11, 13, 0.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .video-modal__frame-wrap { width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border-bright); } .video-modal__frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); } .video-modal__close { position: fixed; top: 1.4rem; right: 1.4rem; background: transparent; border: 1px solid var(--text); color: var(--text); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.22em; padding: .45rem .7rem; cursor: pointer; text-transform: uppercase; transition: background .15s ease, color .15s ease; } .video-modal__close:hover { background: var(--text); color: var(--bg); } .btn { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-body); font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; padding: 1rem 1.45rem; border: 1px solid var(--border-bright); color: var(--text); background: transparent; transition: background .15s, color .15s, border-color .15s; } .btn:hover { background: var(--phosphor); color: var(--bg); border-color: var(--phosphor); } .btn.btn--ghost { border-color: var(--border); color: var(--text-muted); } .btn.btn--ghost:hover { color: var(--bg); background: var(--amber); border-color: var(--amber); } .btn img.arrow { height: 14px; width: auto; } /* hero specimen card on the right */ .specimen { background: var(--bg-1); border: 1px solid var(--border); padding: 1.75rem; position: relative; } .specimen::before { content: ''; position: absolute; inset: -5px; border: 1px solid var(--border); pointer-events: none; } .specimen__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px dashed var(--border-bright); } .specimen__id { font-family: var(--font-display); font-size: 2.1rem; color: var(--amber); line-height: 1; } .specimen__sigil { font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.14em; color: var(--text-muted); } .specimen__art { background: #f0ebe8; /* original Breakout Wallet QT background */ border: 1px solid var(--border); padding: 1rem; display: grid; place-items: center; margin-bottom: 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; } .specimen__art img { max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; } .specimen__meta { font-family: var(--font-body); font-size: 15px; } .specimen__meta dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.25rem; } .specimen__meta dt { color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; font-size: 13px; } .specimen__meta dd { margin: 0 0 .55rem; color: var(--text); font-size: 15px; } .specimen__meta dd .green { color: var(--phosphor); } /* ==================================================================== SPECIMEN BAND (full-width metadata strip below hero) ==================================================================== */ .specimen-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(to bottom, var(--bg-1), var(--bg)); } .specimen-band__inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; max-width: 1280px; margin: 0 auto; } .specimen-band__cell { padding: 1.4rem 1.5rem; border-right: 1px solid var(--border); } .specimen-band__cell:last-child { border-right: 0; } .specimen-band__cell .label { display: block; margin-bottom: .5rem; color: var(--text-muted); } .specimen-band__cell .value { font-family: var(--font-display); font-size: 1.95rem; line-height: 1; color: var(--text); } .specimen-band__cell .value.green { color: var(--phosphor); } .specimen-band__cell .value.amber { color: var(--amber); } /* ==================================================================== CONTENT SECTIONS ==================================================================== */ .section { padding: 5rem 0; } .section--tight { padding: 3.5rem 0; } .section__head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 2.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .section__num { font-family: var(--font-display); font-size: 2.3rem; color: var(--amber); line-height: 1; } .section__title { font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 3.2rem); line-height: 1; color: var(--text); margin: 0; letter-spacing: 0.01em; } .section__kicker { margin-left: auto; color: var(--text-muted); } .prose-block p { margin: 0 0 1.2rem; } .prose-block p:last-child { margin-bottom: 0; } .prose-block strong { color: var(--phosphor); font-weight: 500; } /* ----- two-column "exhibit panel" layout (sticky label + reading column) ----- */ .section-2col { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 680px); gap: 64px; max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; } .section-2col__head { position: sticky; top: 96px; /* clear sticky status bar (~52px) + breathing room */ align-self: start; display: flex; flex-direction: column; gap: .75rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .section-2col__head .section__num { font-family: var(--font-display); font-size: 2.1rem; color: var(--amber); line-height: 1; } .section-2col__head .section__title { font-family: var(--font-display); font-size: clamp(2.1rem, 2.8vw, 2.6rem); line-height: 1; color: var(--text); margin: 0; letter-spacing: 0.01em; } .section-2col__head .section__kicker { margin: 0; } .section-2col__body > * + * { margin-top: 2rem; } .section-2col__body > .prose-block + .prose-block { margin-top: 1.2rem; } /* Wider variant — for sections whose body needs more horizontal room (e.g. the world's-firsts 2-column grid, the bitcointalk exhibit). */ .section-2col--wide { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); max-width: 1280px; } .section-2col__head .winner-trophy { margin: .8rem 0 0; height: 64px; width: auto; max-width: 80px; align-self: flex-start; } @media (max-width: 880px) { .section-2col, .section-2col--wide { grid-template-columns: 1fr; gap: 1.5rem; } .section-2col__head { position: static; } } .pull-callout { background: var(--bg-1); border-left: 3px solid var(--amber); padding: 1.5rem 1.7rem; margin: 2rem 0; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.25; color: var(--text); } .pull-callout__cite { display: block; margin-top: .95rem; font-family: var(--font-pixel); font-size: 13px; letter-spacing: 0.14em; color: var(--text-muted); } /* ==================================================================== EXHIBIT — for screenshot evidence with caption frame ==================================================================== */ .exhibit { border: 1px solid var(--border); background: var(--bg-1); padding: 1.5rem; margin: 2.5rem 0; } .exhibit__frame { background: #000; border: 1px solid var(--border); padding: .75rem; overflow: hidden; } .exhibit__frame img { max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; } .exhibit__caption { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border-bright); align-items: center; font-family: var(--font-body); font-size: 14px; color: var(--text-muted); } .exhibit__caption .label { margin: 0; } /* ==================================================================== FIRSTS — numbered list of innovations ==================================================================== */ .firsts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .firsts__item { padding: 1.4rem 1.5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .firsts__num { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--amber); width: 2.5ch; } .firsts__text { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text); } .firsts__text a { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } /* ==================================================================== CARDS PREVIEW — all 53 artifacts, auto-scrolling marquee ==================================================================== */ .cards-strip { margin: 2rem 0 1.5rem; position: relative; } .cards-strip__viewport { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%); } .cards-strip__track { display: flex; width: max-content; gap: .85rem; animation: cards-strip-scroll 220s linear infinite; } .cards-strip:hover .cards-strip__track, .cards-strip__track:has(.cards-strip__cellwrap:hover) { animation-play-state: paused; } @keyframes cards-strip-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .cards-strip__track { animation: none; } .cards-strip__viewport { overflow-x: auto; } } .cards-strip__cellwrap { display: block; width: 130px; flex-shrink: 0; border: 0; padding: 0; color: var(--text); } /* Hover swap — no animation. Card art replaced by spec sheet on hover. Theme-aware bg via --bg-1, no transitions on the swap. */ .cards-strip__cell { background: #f0ebe8; border: 1px solid var(--border); padding: .55rem; aspect-ratio: 3 / 4; display: grid; place-items: center; position: relative; overflow: hidden; transition: border-color .15s; } .cards-strip__cellwrap:hover .cards-strip__cell { border-color: var(--phosphor); } .cards-strip__cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; } .cards-strip__info { position: absolute; inset: 0; background: var(--bg-1); padding: .55rem .5rem; display: none; flex-direction: column; justify-content: center; pointer-events: none; } .cards-strip__cellwrap:hover .cards-strip__info { display: flex; } .cards-strip__info-name { font-family: var(--font-display); font-size: 0.95rem; line-height: 1; color: var(--text); text-align: center; margin-bottom: .55rem; letter-spacing: .01em; /* up to 2 lines, ellipsis if longer; prevents specs being cut off */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .cards-strip__info dl { margin: 0; display: grid; gap: .25rem; width: 100%; } .cards-strip__info dl > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--border-bright); padding-bottom: .12rem; } .cards-strip__info dl > div:last-child { border-bottom: 0; padding-bottom: 0; } .cards-strip__info dt { color: var(--text-muted); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } .cards-strip__info dd { margin: 0; color: var(--phosphor); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; } .cards-strip__ticker { display: block; text-align: center; margin-top: .5rem; font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); } /* ==================================================================== EXPLORE CTA — grid of links to the other pages ==================================================================== */ .explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .explore__card { display: block; padding: 1.75rem 1.5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); transition: background .15s, color .15s; color: var(--text); text-decoration: none; } /* unified hover (matches .anchor-grid__item) */ .explore__card:hover { background: var(--bg-2); color: var(--text); } .explore__card:hover .explore__num { color: var(--phosphor); } .explore__card:hover .explore__arrow { transform: translateX(6px); } .explore__num { font-family: var(--font-display); font-size: 1.8rem; color: var(--amber); line-height: 1; margin-bottom: .9rem; transition: color .15s; } .explore__title { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; margin: 0 0 1rem; color: var(--text); /* animated phosphor underline grows on hover */ background-image: linear-gradient(var(--phosphor), var(--phosphor)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size .3s ease; padding-bottom: 4px; display: inline-block; } .explore__card:hover .explore__title { background-size: 100% 2px; } .explore__desc { font-family: var(--font-body); font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0 0 1.2rem; } .explore__arrow { font-family: var(--font-display); font-size: 1.7rem; color: var(--phosphor); display: inline-block; transition: transform .2s ease; } /* ==================================================================== FOOTER ==================================================================== */ .site-footer { border-top: 1px solid var(--border); background: var(--bg); padding: 3rem 0 2rem; margin-top: 4rem; ; position: relative; z-index: 9999; } .site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; max-width: 1280px; margin: 0 auto; padding: 0 1.75rem; } .site-footer__sig { font-family: var(--font-display); font-size: 2.6rem; color: var(--text); line-height: 1; } .site-footer__sig .accent { color: var(--phosphor); } .site-footer__meta { display: flex; flex-direction: row; gap: 1.5rem; align-items: center; font-family: var(--font-body); font-size: 14px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; } .site-footer__meta a { color: var(--text-muted); border-color: var(--border); white-space: nowrap; } .site-footer__strip { margin-top: 2rem; padding: 1.2rem 1.75rem; border-top: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; } /* ==================================================================== RESPONSIVE ==================================================================== */ @media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; gap: 2rem; } .specimen-band__inner { grid-template-columns: repeat(3, 1fr); } .specimen-band__cell { border-bottom: 1px solid var(--border); } .specimen-band__cell:nth-child(3n) { border-right: 0; } .firsts { grid-template-columns: 1fr; border-left: 0; } .firsts__item:last-child { border-right: 0; } .firsts__item { border-right: 0; } .explore { grid-template-columns: repeat(2, 1fr); border-left: 0; } .explore__card { border-right: 1px solid var(--border); } .explore__card:nth-child(2n) { border-right: 0; } .cards-strip { grid-template-columns: repeat(4, 1fr); } .site-footer__inner { grid-template-columns: 1fr; } .section__head { flex-wrap: wrap; } .section__kicker { margin-left: 0; flex-basis: 100%; } } @media (max-width: 540px) { .site-nav__inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .site-nav__links { flex-wrap: wrap; gap: 1rem; } .specimen-band__inner { grid-template-columns: repeat(2, 1fr); } .cards-strip { grid-template-columns: repeat(2, 1fr); } } /* ----- highlight (mimics original mk-highlight inline-marker) ----- */ .mk-highlight { display: inline-block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.3; background: var(--amber); color: var(--bg); padding: .35rem 1rem .25rem; margin: 1.5rem 0; letter-spacing: 0.01em; } /* ----- cream-bg image pair (testnet wallet screenshots) ----- */ .image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.5rem auto; max-width: 760px; } .exhibit-cream { margin: 0; background: var(--bg-1); border: 1px solid var(--border); padding: .75rem; } .exhibit-cream__frame { background: #f0ebe8; border: 1px solid var(--border); padding: .85rem; display: flex; align-items: center; justify-content: center; height: 240px; /* equal heights so neither dominates the row */ overflow: hidden; } .exhibit-cream__frame img { max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; cursor: zoom-in; transition: opacity .15s; } .exhibit-cream__frame img:hover { opacity: .85; } /* ----- italic image descriptions ("An image from the testnet wallet...") ----- */ .exhibit-caption { max-width: 680px; margin: 1.5rem auto 0; font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.65; color: var(--text); } .exhibit-caption p { margin: 0 0 1rem; } .exhibit-caption p:last-child { margin: 0; } .exhibit-caption a { color: var(--phosphor); } /* ----- big exhibit frame for the bitcointalk first-flex screenshot ----- */ .exhibit-large { margin: 2rem auto 1.5rem; max-width: 720px; background: var(--bg-1); border: 1px solid var(--border); padding: .9rem; } .exhibit-large__frame { background: #f0ebe8; border: 1px solid var(--border); padding: 1.1rem; display: flex; justify-content: center; max-height: 520px; overflow: hidden; } .exhibit-large__frame img { max-width: 100%; max-height: 480px; height: auto; width: auto; cursor: zoom-in; transition: opacity .15s; } .exhibit-large__frame img:hover { opacity: .9; } /* ----- lightbox overlay (click image to enlarge) ----- */ .lightbox { position: fixed; inset: 0; background: rgba(6,6,8,0.94); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 3rem; cursor: zoom-out; animation: lightbox-fade .15s ease-out; } .lightbox img { max-width: 100%; max-height: 100%; background: #f0ebe8; padding: 1rem; border: 1px solid var(--border-bright); box-shadow: 0 0 60px rgba(0,0,0,0.7); } .lightbox__close { position: absolute; top: 1.5rem; right: 1.75rem; font-family: var(--font-display); font-size: 1.6rem; color: var(--text); background: transparent; border: 1px solid var(--border-bright); padding: .25rem .65rem; cursor: pointer; line-height: 1; } .lightbox__close:hover { color: var(--bg); background: var(--phosphor); border-color: var(--phosphor); } .lightbox__hint { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 540px) { .lightbox { padding: 1rem; } } /* ----- "Link to the Original Bitcointalk Post" inline link ----- */ .post-link { font-family: var(--font-body); font-size: 17px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: .7rem; margin: 1.75rem 0; } .post-link img { height: 16px; image-rendering: pixelated; } .post-link.center { width: 100%; justify-content: center; display: flex; } /* ----- decorative arrow strip before intro ----- */ .prose__decor { text-align: center; margin: 0 0 2rem; line-height: 0; } .prose__decor img { height: 30px; image-rendering: pixelated; display: inline-block; } /* ----- winner pixel trophy beside "History's first flex" heading ----- */ .first-flex-head { align-items: center; } .winner-trophy { height: 72px; width: auto; margin-left: auto; image-rendering: pixelated; } /* ----- "stunned" image after firsts ----- */ .stunned { display: block; margin: 1.5rem auto 0; max-height: 130px; image-rendering: pixelated; } /* === MOBILE-FINAL-FIXES:BEGIN === */ /* ----- Touch / tap target sizing on small screens (≥44px per WCAG/iOS HIG) The desktop hover affordance ([brackets]) wraps tightly, so we only bump touch surface in pointer:coarse environments. */ @media (max-width: 720px), (pointer: coarse) { .site-nav__links { gap: .25rem 1.25rem; row-gap: .25rem; } .site-nav__links a { min-height: 44px; padding: .65rem .25rem; display: inline-flex; align-items: center; } .site-footer__meta a { min-height: 44px; padding: .35rem 0; display: inline-flex; align-items: center; } .theme-toggle { min-height: 44px; padding: .35rem .25rem; } /* explorer / external links in the status bar — clearer hit area */ .status-bar a, .status-bar button { min-height: 36px; } } /* ----- Inline code & long-string safety on narrow viewports Without this, an unbroken token like `BreakoutCoin-1.2.4.2-Win32.zip` can blow past the 320px viewport and create horizontal scroll. */ @media (max-width: 720px) { .prose-block code, .prose-block a, .procedure code, .hash-block, p code, li code { overflow-wrap: anywhere; word-break: break-word; } } /* ----- Hero typography floor for very small phones Original clamp() floor of 3.8rem (~60px) is too aggressive at 320–360px. Pull it down on small screens while preserving the desktop ceiling. */ @media (max-width: 480px) { .hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem) !important; line-height: 0.98; } .hero { padding: 2.75rem 0 2rem; } .section__title { font-size: clamp(1.6rem, 6vw, 2rem); } .pull-callout { font-size: 1.4rem; padding: 1.1rem 1.2rem; } .mk-highlight { font-size: 1.3rem; } } /* ----- Container side-padding lift on mobile so content never kisses the viewport edge (a few sections were too tight). */ @media (max-width: 540px) { .site-nav__inner, .status-bar__inner, .site-footer__inner, .section-2col, .section-2col--wide { padding-left: 1.1rem; padding-right: 1.1rem; } .specimen-band__cell { padding: 1rem 0.85rem; } .firsts__item { padding: 1.1rem 1.1rem; } } /* ----- Image ergonomics: never overflow on small screens */ @media (max-width: 720px) { img { max-width: 100%; height: auto; } figure, .exhibit-large, .exhibit-cream { max-width: 100%; } .image-pair { grid-template-columns: 1fr !important; } .exhibit-cream__frame { height: auto !important; min-height: 180px; } } /* ----- Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ----- Print stylesheet — clean, ink-friendly */ @media print { body { background: #fff !important; color: #000 !important; } .status-bar, .site-nav, .site-footer, .cards-strip, .lightbox, .theme-toggle, .anchor-grid { display: none !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } h1, h2, h3 { page-break-after: avoid; break-after: avoid; } img { max-width: 100% !important; page-break-inside: avoid; } } /* === MOBILE-FINAL-FIXES:END === */ /* === BURGER-NAV:BEGIN === */ /* ============================================================ BURGER NAV — classic mobile pattern ============================================================ */ .nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 1px solid var(--border-bright); color: var(--text); cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s; } .nav-burger:hover, .nav-burger:focus-visible { border-color: var(--phosphor); color: var(--phosphor); } .nav-burger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--phosphor); } .nav-burger__box { position: absolute; top: 50%; left: 50%; width: 22px; height: 14px; transform: translate(-50%, -50%); } .nav-burger__bar { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .25s ease, opacity .15s ease, top .25s ease; } .nav-burger__bar:nth-child(1) { top: 0; } .nav-burger__bar:nth-child(2) { top: 6px; } .nav-burger__bar:nth-child(3) { top: 12px; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { top: 6px; transform: rotate(-45deg); } .nav-backdrop { position: fixed; inset: 0; background: rgba(6, 6, 8, 0.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90; } html[data-theme="light"] .nav-backdrop { background: rgba(240, 235, 232, 0.78); } /* ============================================================ MOBILE: hide inline links, show burger + slide-out drawer ============================================================ */ @media (max-width: 720px) { .nav-burger { display: inline-flex; align-items: center; justify-content: center; } .site-nav__inner { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 1rem; padding: 1rem 1.1rem; } /* the link bar becomes a slide-in drawer from the right */ .site-nav__links { position: fixed; top: 0; right: 0; height: 100dvh; height: 100vh; width: min(86vw, 340px); background: var(--bg-1); border-left: 1px solid var(--border-bright); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45); flex-direction: column; align-items: stretch; gap: 0; padding: 4.5rem 0 1.5rem; transform: translateX(100%); transition: transform .28s ease; z-index: 100; overflow-y: auto; overscroll-behavior: contain; } .site-nav__links a { display: flex; align-items: center; padding: 1.05rem 1.6rem; border-bottom: 1px solid var(--border); border-right: 0 !important; border-left: 0 !important; min-height: 56px; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: .02em; color: var(--text); background: transparent; } .site-nav__links a:hover, .site-nav__links a:focus-visible { color: var(--phosphor); background: var(--bg); } .site-nav__links a.is-current { color: var(--phosphor); background: var(--bg); border-left: 3px solid var(--phosphor) !important; padding-left: calc(1.6rem - 3px); } /* hide bracket affordance in drawer (looks weird stacked) */ .site-nav__links a::before, .site-nav__links a::after { content: none !important; } /* drawer-open state */ .site-nav.is-open .site-nav__links { transform: translateX(0); } .site-nav.is-open .nav-backdrop { opacity: 1; pointer-events: auto; } body.has-nav-open { overflow: hidden; } /* ============================================================ STATUS BAR — compact to a single line on phones ============================================================ */ .status-bar__inner { flex-wrap: nowrap !important; gap: .5rem !important; padding: .5rem 1.1rem !important; overflow: hidden; white-space: nowrap; } /* hide all dividers and unclass'd spans (verbose breadcrumb segments) */ .status-bar__divider { display: none !important; } .status-bar__inner > span:not(.status-bar__dot):not(.status-bar__amber) { display: none !important; } /* keep only the first amber label (section name) */ .status-bar__amber ~ .status-bar__amber { display: none !important; } .status-bar__amber { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* compact theme toggle: drop the "Display" prefix, show as small chip */ .theme-toggle { margin-left: auto; flex-shrink: 0; border: 1px solid var(--border-bright); padding: .3rem .55rem; min-height: 32px; font-size: 12px; } .theme-toggle__label { display: none !important; } } /* On 540-and-down, the link bar font scales a hair smaller */ @media (max-width: 380px) { .site-nav__links a { font-size: 1.35rem; padding: .9rem 1.3rem; } .site-nav__inner { padding: .85rem .9rem; } } /* === BURGER-NAV:END === */ /* === FOOTER-MODERN:BEGIN === */ /* ----- modern footer overrides the legacy site-footer styling ----- */ .site-footer { padding: 0 !important; margin-top: 5rem; } .site-footer__inner, .site-footer__strip { display: none !important; } .footer-modern { max-width: 1280px; margin: 0 auto; padding: 4.5rem 1.75rem 2rem; font-family: var(--font-body); color: var(--text); } /* ----- top: brand + columns ----- */ .footer-modern__top { display: grid; grid-template-columns: minmax(260px, 1.3fr) 2.2fr; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); } .footer-modern__brand { display: block; } .footer-modern__mark { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; letter-spacing: 0.02em; color: var(--text); margin-bottom: .5rem; } .footer-modern__sub { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.4rem; } .footer-modern__tagline { font-size: 14px; line-height: 1.65; color: var(--text-muted); margin: 0 0 1.5rem; max-width: 380px; } .footer-modern__chips { display: flex; gap: .5rem; flex-wrap: wrap; } .footer-modern__chip { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: .4rem .7rem; border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-1); } .footer-modern__chip--green { color: var(--phosphor); border-color: rgba(74, 168, 255, 0.32); } .footer-modern__chip__dot { display: inline-block; width: 6px; height: 6px; background: var(--phosphor); box-shadow: 0 0 4px var(--phosphor); margin-right: .45rem; vertical-align: 1px; } .footer-modern__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } .footer-modern__col { display: flex; flex-direction: column; gap: .65rem; } .footer-modern__col-title { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin: 0 0 .35rem; } .footer-modern__col a { color: var(--text-muted); text-decoration: none; font-family: var(--font-body); font-size: 15px; line-height: 1.4; border: 0; transition: color .15s ease, transform .15s ease; white-space: nowrap; } .footer-modern__col a:hover, .footer-modern__col a:focus-visible { color: var(--phosphor); outline: none; } .footer-modern__col a[target="_blank"]::after { content: " ↗"; color: var(--text-dim); font-size: 12px; margin-left: .15rem; } .footer-modern__col a:hover[target="_blank"]::after { color: var(--phosphor); } /* ----- bottom: copyright + counters ----- */ .footer-modern__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-family: var(--font-body); font-size: 13px; color: var(--text-dim); letter-spacing: 0.02em; } .footer-modern__copy { } .footer-modern__copy strong { color: var(--phosphor); font-weight: 500; font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; margin-left: .35rem; vertical-align: -1px; } .footer-modern__counters { display: flex; gap: 1.2rem; align-items: center; font-family: var(--font-pixel); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .footer-modern__counters span { display: inline-flex; align-items: center; gap: .35rem; } .footer-modern__counters strong { color: var(--text); font-weight: 700; font-family: var(--font-display); font-size: 15px; letter-spacing: 0; } /* ----- responsive ----- */ @media (max-width: 880px) { .footer-modern__top { gap: 3rem; } } @media (max-width: 720px) { .footer-modern { padding: 3rem 1.25rem 1.5rem; } .footer-modern__top { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2rem; } .footer-modern__cols { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.5rem; } .footer-modern__mark { font-size: 2rem; } .footer-modern__bottom { flex-direction: column; align-items: flex-start; gap: .85rem; padding-top: 1.5rem; } } @media (max-width: 400px) { .footer-modern__cols { grid-template-columns: 1fr; gap: 1.5rem; } } /* === FOOTER-MODERN:END === */ /* ==================================================================== BREAKOUT CHAIN — image-free additions (site carries no bitmap art; currency emblems are drawn in CSS) ==================================================================== */ .coin-token { aspect-ratio: 1 / 1; width: 100%; max-width: 260px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 32% 28%, rgba(74,168,255,0.20), transparent 55%), var(--bg-1); border: 2px solid var(--border-bright); box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px var(--border); color: var(--phosphor); font-family: var(--font-display); } .coin-token__ticker { font-size: clamp(48px, 9vw, 84px); line-height: 1; letter-spacing: 0.02em; } .coin-token__sub { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.18em; color: var(--text-muted); margin-top: .4rem; text-transform: uppercase; } .coin-token--brx { color: var(--amber); background: radial-gradient(circle at 32% 28%, rgba(243,168,59,0.18), transparent 55%), var(--bg-1); } .coin-token--sis { color: var(--blue); background: radial-gradient(circle at 32% 28%, rgba(106,184,255,0.18), transparent 55%), var(--bg-1); } .coin-token--bam { color: var(--magenta); background: radial-gradient(circle at 32% 28%, rgba(233,79,126,0.18), transparent 55%), var(--bg-1); } /* currency grid (specifications + home overview) */ .ccy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } /* specs page: force an even 3-then-2 split across 5 cards */ .ccy-grid--split { grid-template-columns: repeat(6, 1fr); } .ccy-grid--split > .ccy-card { grid-column: span 2; } /* row 1 → 3 cards */ .ccy-grid--split > .ccy-card:nth-child(4), .ccy-grid--split > .ccy-card:nth-child(5) { grid-column: span 3; } /* row 2 → 2 cards */ @media (max-width: 900px) { .ccy-grid--split { grid-template-columns: 1fr 1fr; } .ccy-grid--split > .ccy-card { grid-column: auto !important; } } @media (max-width: 560px) { .ccy-grid--split { grid-template-columns: 1fr; } } .ccy-card { border: 1px solid var(--border); background: var(--bg-1); padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .ccy-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--border-bright); padding-bottom: .75rem; } .ccy-card__name { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--text); white-space: nowrap; } .ccy-card__tk { font-family: var(--font-pixel); font-size: 13px; letter-spacing: .12em; color: var(--phosphor); } .ccy-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: 15px; } .ccy-card dt { color: var(--text-muted); } .ccy-card dd { margin: 0; text-align: right; color: var(--text); } .ccy-card dd .green { color: var(--phosphor); } /* generic prose section width helper reused across content pages */ .section__lead { max-width: 760px; color: var(--text-muted); font-size: 19px; } /* download / link tiles */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .tile { border: 1px solid var(--border); background: var(--bg-1); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; border-bottom-width: 3px; } .tile:hover { border-color: var(--border-bright); border-bottom-color: var(--phosphor); } .tile__k { font-family: var(--font-pixel); font-size: 12px; letter-spacing: .14em; color: var(--amber); text-transform: uppercase; } .tile__v { font-family: var(--font-display); font-size: 26px; color: var(--text); line-height: 1.1; } .tile__note { font-size: 14px; color: var(--text-muted); } /* archival notice strip */ .archive-note { border: 1px solid var(--border); border-left: 3px solid var(--amber); background: var(--bg-1); padding: 1rem 1.25rem; font-size: 15px; color: var(--text-muted); } .archive-note strong { color: var(--amber); font-family: var(--font-pixel); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } /* ==================================================================== REAL COIN LOGOS — poker-chip token art (assets/*.png) Hero specimen mounts the coin on a dark display-case glow; currency cards get a small color-coded chip beside the name. ==================================================================== */ /* SQUARE stage + object-fit contain → a round coin sits dead-center every time (equal padding on all four sides), regardless of viewport. */ .specimen__art--coin { aspect-ratio: 5 / 4 !important; display: flex !important; align-items: center; justify-content: center; padding: 10% !important; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(74,168,255,0.20), transparent 62%), #0a1018 !important; border: 1px solid var(--border-bright) !important; box-shadow: inset 0 0 60px rgba(0,0,0,0.5) !important; } .specimen__art--coin img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55)); } /* keep the dark display case in light mode too (overrides the cream rule) */ html[data-theme="light"] .specimen__art--coin { background: radial-gradient(circle at 50% 50%, rgba(74,168,255,0.22), transparent 62%), #0a1018 !important; border-color: var(--border-bright) !important; } /* per-currency glow tint on the hero stage */ .specimen__art--coin.is-brx { background: radial-gradient(circle at 50% 50%, rgba(140,205,60,0.20), transparent 62%), #0a1018 !important; } .specimen__art--coin.is-sis { background: radial-gradient(circle at 50% 50%, rgba(224,60,150,0.20), transparent 62%), #0a1018 !important; } .specimen__art--coin.is-bam { background: radial-gradient(circle at 50% 50%, rgba(224,60,60,0.20), transparent 62%), #0a1018 !important; } /* small chip beside a currency name */ .ccy-card__head { align-items: center; justify-content: flex-start; gap: .8rem; } .ccy-card__head .ccy-card__tk { margin-left: auto; } .ccy-card__coin { width: 46px; height: 46px; flex-shrink: 0; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); } /* ==================================================================== WALLET SIDECAR — slide-out drawer that docks the wallet on the site. The "Wallet" nav link opens this instead of navigating; it embeds the standalone /wallet/ app in an iframe (same origin → same wallet). ==================================================================== */ .wsc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 100000; } .wsc-backdrop.open { opacity: 1; pointer-events: auto; } .wsc-panel { position: fixed; top: 0; right: 0; height: 100dvh; height: 100vh; width: min(440px, 94vw); background: var(--bg-1); border-left: 1px solid var(--border-bright); box-shadow: -12px 0 44px rgba(0,0,0,0.55); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 100001; display: flex; flex-direction: column; } .wsc-panel.open { transform: translateX(0); } .wsc-panel { border-top: 2px solid var(--phosphor); } .wsc-bar { display: flex; align-items: center; gap: .8rem; padding: .55rem .85rem; border-bottom: 1px solid var(--border); font-family: var(--font-pixel); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; } .wsc-bar__full { color: var(--text-muted); text-decoration: none; border: 0; } .wsc-bar__full:hover { color: var(--phosphor); } .wsc-close { margin-left: auto; background: transparent; border: 1px solid var(--border-bright); color: var(--text-muted); cursor: pointer; padding: .3rem .55rem; font-family: var(--font-pixel); font-size: 10px; letter-spacing: .12em; } .wsc-close:hover { border-color: var(--phosphor); color: var(--phosphor); } .wsc-frame { flex: 1; width: 100%; border: 0; background: var(--bg); } /* ---- Floating "Wallet" button (opens the sidecar) ---- */ .wallet-fab { position: fixed; right: 22px; bottom: 22px; z-index: 10001; /* above the footer (9999) */ display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.2rem .5rem .5rem; background: var(--bg-1); border: 1.5px solid var(--phosphor); border-radius: 999px; box-shadow: 0 0 0 4px rgba(74,168,255,0.10), 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(74,168,255,0.30); color: var(--phosphor); font-family: var(--font-pixel); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; animation: fab-pulse 2.6s ease-in-out infinite; } .wallet-fab img { width: 34px; height: 34px; display: block; } .wallet-fab__label { color: var(--phosphor); } .wallet-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 4px rgba(74,168,255,0.18), 0 14px 38px rgba(0,0,0,0.6), 0 0 34px rgba(74,168,255,0.6); } @keyframes fab-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(74,168,255,0.10), 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(74,168,255,0.28); } 50% { box-shadow: 0 0 0 5px rgba(74,168,255,0.20), 0 10px 30px rgba(0,0,0,0.5), 0 0 32px rgba(74,168,255,0.55); } } @media (prefers-reduced-motion: reduce) { .wallet-fab { animation: none; } } /* hide the button while the drawer is open */ .wsc-showing .wallet-fab { opacity: 0; pointer-events: none; transform: scale(.85); } @media (max-width: 520px) { .wallet-fab { right: 14px; bottom: 14px; padding: .45rem; } .wallet-fab__label { display: none; } } /* === MOBILE-FIX-2026-07-10:BEGIN === */ /* .explore went 4 cols -> 2 cols and stopped. On a 375px screen the two cards need ~248px each, so the right-hand card was sliced in half. Every other page in the site already carries this 1-col rule. */ @media (max-width: 720px) { .explore { grid-template-columns: 1fr; border-left: 0; } .explore__card { border-right: 0; } } /* === MOBILE-FIX-2026-07-10:END === */