/* ========================================================================== TECH pool — dark theme Design tokens live in :root and are reused by dropdown.css and wallethistory.css, both of which load after this file. ========================================================================== */ :root { /* Surfaces, darkest to lightest */ --bg: #0a0d13; --bg-2: #0d111a; --surface: #141a26; --surface-2: #1a2130; --border: #222b3a; --border-hi: #303c50; /* Type */ --text: #c3cddf; --text-dim: #8593aa; --heading: #f0f5ff; /* Brand accents, matched to the dark logo */ --blue: #4d8bff; --blue-soft: #7aa8ff; --teal: #38d6c0; --red: #ff5c63; --gradient: linear-gradient(120deg, var(--blue) 0%, var(--teal) 100%); --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); --shadow-lift: 0 16px 44px rgba(0, 0, 0, 0.6); --ring: 0 0 0 3px rgba(77, 139, 255, 0.35); --ease: cubic-bezier(0.22, 0.7, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; color-scheme: dark; font-family: 'Rubik', system-ui, -apple-system, Segoe UI, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--text); overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 5em; -webkit-font-smoothing: antialiased; } /* The page background lives on so it paints on the viewport canvas. Keeping transparent lets the negative z-index particle canvas and the ambient glow below show through instead of being covered. */ html { background-color: var(--bg); } body { background-color: transparent; } /* Ambient glow behind the hero so the page does not read as a flat black box. */ body::before { content: ""; position: fixed; inset: -20% 0 auto 0; height: 900px; pointer-events: none; z-index: -2; background: radial-gradient(60% 55% at 22% 12%, rgba(77, 139, 255, 0.16), transparent 70%), radial-gradient(50% 50% at 82% 4%, rgba(56, 214, 192, 0.10), transparent 70%); } ::selection { background: rgba(77, 139, 255, 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- Top navigation -------------------------------------------------------------------------- */ #topsticky { z-index: 20; position: relative; } #top { position: relative; z-index: 20; height: 80px; margin: 0; padding: 0; background: rgba(13, 17, 26, 0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .sticky { position: fixed; top: 0; width: 100%; } .sticky #top { background: rgba(10, 13, 19, 0.88); border-bottom-color: var(--border-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .sticky + #top_stats { padding-top: 80px; } #topwrapper { width: min(1240px, 88%); margin: 0 auto; padding: 18px 0 0 0; } #toplogo { position: relative; float: left; width: 150px; margin: 0; padding: 0; } #toplogo img { display: block; width: 150px; height: auto; transition: transform 0.3s var(--ease), filter 0.3s var(--ease); } #toplogo img:hover { transform: translateY(-1px); filter: drop-shadow(0 0 12px rgba(77, 139, 255, 0.5)); } #social { float: right; width: auto; margin-top: 7px; padding: 0; } #twitter, #discord, #github { display: inline-block; height: 40px; } #twitter { width: 25px; margin-right: 20px; } #discord { width: 38px; margin-right: 10px; } #github { width: 25px; } #social a { color: var(--text-dim); display: inline-block; transition: color 0.25s var(--ease), transform 0.25s var(--ease); } #social a:hover { color: var(--heading); transform: translateY(-2px); } #social svg { fill: currentColor; } .nav { float: right; margin: 3px 30px 0 0; text-decoration: none; } #opennav { position: relative; float: left; display: block; width: 40px; margin-top: 8px; color: var(--red); transition: color 0.25s var(--ease); } #opennav:hover { color: var(--blue); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ #header { position: relative; z-index: 1; width: min(900px, 90%); height: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } #headerlogo { position: relative; width: 600px; max-width: 100%; margin: 0 auto; } #headerlogo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 34px rgba(77, 139, 255, 0.28)); animation: rise 0.9s var(--ease) both; } #totalrefunds { position: relative; width: 100%; margin: 0 auto; padding: 10px; text-align: center; font-weight: 400; color: var(--text-dim); animation: rise 0.9s 0.12s var(--ease) both; } #totalrefunds .text { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } #counter { margin: 0 auto; text-align: center; } #counter span { font-size: 62px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Stat strip under the top bar -------------------------------------------------------------------------- */ /* Layer order in the page, low to high: particles (-1) < hero (1) < stat strip (10) < sticky top bar (20) < dropdown panels (30) < mobile overlay (40). The strip has to outrank the hero or the fixed-fee tooltip is painted over by the logo, whose finished rise animation leaves an identity transform behind and so forms its own stacking context. */ #top_stats { position: relative; z-index: 10; width: 100%; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; } #top_stats .wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 0; } #top_stats .wrapper > div { width: auto; padding: 8px 22px; text-align: left; line-height: 1.45; font-size: 19px; font-weight: 500; color: var(--heading); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } #top_stats .wrapper > div:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--border-hi); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .section, .ada-wrapper { position: relative; width: 100%; height: auto; padding: 72px 0; clear: both; overflow: hidden; } .section-alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .content { width: min(1240px, 88%); height: auto; margin: 0 auto; padding: 0; } /* Pool summary card + intro copy */ #adapool { width: 100%; display: flex; justify-content: center; gap: 28px; } #adapool #about_short { float: right; width: 100%; padding: 0; background: transparent; border-radius: var(--radius); } #adapool #stats { float: left; display: none; width: 380px; margin: 0; padding: 14px 26px; font-size: 20px; line-height: 2.4; font-weight: 400; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } #stats span { color: var(--blue-soft); font-weight: 500; } /* -------------------------------------------------------------------------- Headings and links -------------------------------------------------------------------------- */ h1 { position: relative; margin: 0 0 42px; padding: 0 0 20px; font-size: clamp(30px, 4vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-align: center; color: var(--heading); } h1::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 60px; height: 3px; margin: 0 auto; border-radius: 3px; background: var(--gradient); } h2 { margin: 2em 0 0.6em; font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading); } #about_short h1 { text-align: left; font-size: clamp(26px, 3vw, 34px); } #about_short h1::after { left: 0; right: auto; margin: 0; } a { color: var(--blue); text-decoration: none; transition: color 0.2s var(--ease); } a:hover { color: var(--teal); } .note { padding-bottom: 15px; border: 0; font-size: 13px; line-height: 1.4; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } .note a { color: var(--blue); text-transform: none; letter-spacing: 0; } .strikethrough { text-decoration: line-through; } /* -------------------------------------------------------------------------- Relay globe — full-bleed band The embedded globe clears its canvas transparent, so there is no frame to blend and no edge to fade: the sphere sits straight on the page background, with the hero's particle field and ambient glow carrying on behind it. -------------------------------------------------------------------------- */ #globe { position: relative; width: 100%; /* Closes the gap left by the hero's bottom padding so the band reads as a continuation of it rather than a section of its own. */ margin-top: -40px; } .globe-band { position: relative; display: block; width: 100%; /* The globe is fitted to the band's height, so capping the height at the width keeps the sphere from being cropped on narrow screens. */ height: min(110vw, clamp(440px, 69vh, 770px)); } .globe-band iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; /* Interactive, as on the full-screen page: the globe can be dragged and its relays hovered. Zoom is turned off inside the frame instead (see globe.js), so the wheel keeps scrolling the page. */ } /* The only thing in the band that is clickable, so it stays visible rather than appearing on hover. Sits on the content column's right edge rather than the viewport's, so the band's one piece of chrome lines up with the rest of the page. */ .globe-band-hint { position: absolute; right: max(6%, calc(50% - 620px)); bottom: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 14px; font-weight: 400; color: var(--text); background: rgba(13, 17, 26, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 999px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .globe-band-hint:hover, .globe-band-hint:focus-visible { color: var(--heading); background: rgba(13, 17, 26, 0.8); border-color: var(--border-hi); } /* Charts and other full-width figures */ .chart { display: block; width: 100%; height: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: var(--radius); } /* -------------------------------------------------------------------------- Tooltip -------------------------------------------------------------------------- */ .tooltip { position: relative; display: inline-block; cursor: help; } .bi-info-circle-fill { font-size: 15px; color: var(--text-dim); } .tooltip .tooltiptext { visibility: hidden; opacity: 0; position: absolute; z-index: 5; top: 150%; left: 50%; width: 220px; margin-left: -110px; padding: 10px 15px; font-size: 12px; line-height: 1.6; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); box-shadow: var(--shadow); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); transform: translateY(-4px); } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent var(--border-hi) transparent; } /* :focus-within covers tapping on touch devices and tabbing to it, where there is no hover to rely on. */ .tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext { visibility: visible; opacity: 1; transform: none; } /* "#stats span" styles the value cells and would otherwise win on specificity over .tooltiptext for the same tooltip inside the mobile summary card. */ #stats .tooltiptext { color: var(--text); font-weight: 400; } #stats .tooltiptext a { color: var(--blue); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ table { width: 100%; border-spacing: 0; font-size: 16px; } #stats_table td { border-bottom: 1px solid var(--border); } #stats_table .no_border { border: 0; } #refund_table th, #refunds_table th, #donations_table th { position: sticky; top: 0; text-align: left; font-weight: 500; letter-spacing: 0.03em; color: var(--heading); background-color: var(--surface-2); } #refund_table td, #refunds_table td, #donations_table td { border-bottom: 1px solid var(--border); } #refund_table tr, #refunds_table tbody tr, #donations_table tr { transition: background 0.18s var(--ease); } #refunds_table tbody tr:hover, #donations_table tr:hover { background: rgba(77, 139, 255, 0.07); } #donations_table th:first-child, #refund_table th:first-child, #refunds_table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } #donations_table th:last-child, #refund_table th:last-child, #refunds_table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } #donations_table td, #donations_table th, #refund_table td, #refund_table th, #refunds_table td, #refunds_table th { padding: 8px 12px; } /* Scrollable table */ .tableFixHead { overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead table { width: 100%; border-collapse: collapse; } #refunds_table_container { height: 420px; } #wallethistory_table_container { height: 100%; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--blue); } ::-webkit-scrollbar-button { height: 0; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ form { width: 100%; } #form, form { display: flex; flex-direction: row; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } #form:focus-within, form:focus-within { outline: none; border-color: var(--blue); box-shadow: var(--ring); } input, textarea, button { font-family: inherit; font-size: 16px; margin: 0; padding: 10px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text); background: transparent; } input { flex-grow: 2; min-width: 0; padding: 10px 0 10px 12px; border: none; color: var(--heading); } input::placeholder { color: var(--text-dim); } input:focus { outline: none; } button { margin: 0; padding: 10px 22px; border: 0; font-weight: 500; color: #06121f; background: var(--gradient); cursor: pointer; transition: transform 0.2s var(--ease), filter 0.2s var(--ease), opacity 0.2s var(--ease); } button:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.1); } button[disabled] { opacity: 0.45; cursor: not-allowed; } #results { color: var(--heading); } /* -------------------------------------------------------------------------- About gallery -------------------------------------------------------------------------- */ .responsive { float: left; width: 25%; padding: 0 6px; } div.gallery { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } div.gallery:hover { transform: translateY(-4px); border-color: var(--border-hi); box-shadow: var(--shadow-lift); } div.gallery img { display: block; width: 100%; height: auto; border-radius: inherit; transition: transform 0.5s var(--ease); } div.gallery:hover img { transform: scale(1.04); } div.gallery, .responsive, div.gallery img { box-sizing: border-box; } .clearfix::after { content: ""; display: table; clear: both; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ #footer { position: relative; display: block; clear: both; width: 100%; margin: 0 auto; padding: 40px 0; color: var(--text-dim); background: var(--bg-2); border-top: 1px solid var(--border); } #footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--gradient); opacity: 0.6; } #footer a { display: inline-block; padding: 4px 0; color: var(--text-dim); transition: color 0.2s var(--ease); } #footer a:hover { color: var(--heading); } #footer svg { fill: currentColor !important; vertical-align: -2px; } /* -------------------------------------------------------------------------- Icons -------------------------------------------------------------------------- */ .bi-discord::before, .bi-twitter::before, .bi-github::before { font-size: 18px; margin-bottom: 3px; } #social .bi::before { font-size: 38px; } #footer .bi { margin-bottom: -2px; padding-right: 5px; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media screen and (max-width: 1080px) { body { font-size: 17px; line-height: 1.7; } .section, .ada-wrapper { padding: 52px 0; } #twitter { margin-right: 15px; } #discord { margin-right: 5px; } #header, .content, #topwrapper { width: 90%; } #headerlogo { width: 300px; } #header { height: 250px; } #counter span { font-size: 46px; } #tsparticles { height: 1300px; } .nav { display: none; } #top { height: 80px; } #adapool { display: block; width: 100%; padding: 0; } #adapool #about_short { width: 100%; margin: 0 0 24px 0; } #adapool #stats { display: inline-block; width: 100%; margin: 0; } #top_stats .wrapper { display: none; } input, textarea { width: 100%; } table { width: 100%; } } @media only screen and (max-width: 700px) { .responsive { width: 50%; margin: 6px 0; } .globe-band-hint { right: 6%; bottom: 0; padding: 5px 11px; font-size: 12px; } } @media screen and (min-width: 1081px) { #myNav, #opennav { display: none; } } @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }