:root{ --paper:#EEF0E7; --paper-card:#FBFBF7; --ink:#171A24; --ink-soft:#4B4E58; --muted:#7C7C6E; --accent:#2F3EE4; --accent-soft:#E4E6FB; --amber:#C97E1D; --amber-soft:#F7E7CF; --moss:#3C7A56; --moss-soft:#E1EFE6; --brick:#A23F2E; --brick-soft:#F3E1DC; --violet:#6B4FA0; --violet-soft:#EBE4F5; --line:#D9D8CC; --line-strong:#B9B8A8; --line-inverse:#3a3d4a; --accent-contrast:#fff; --muted-inverse:#b7bad8; --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace; --radius:8px; --radius-lg:14px; --radius-pill:20px; /* Shared elevation scale — every card-like surface (.side-card, .form-card, .stat, .article-card, .ledger-scroll, .promo-slot) should pick up one of these rather than relying on a border alone, so the whole product reads as one consistent, slightly raised system instead of flat bordered boxes. */ --shadow-sm:0 1px 2px rgba(23,26,36,.04), 0 1px 1px rgba(23,26,36,.03); --shadow-md:0 4px 16px rgba(23,26,36,.07), 0 1px 2px rgba(23,26,36,.04); --shadow-lg:0 12px 32px rgba(23,26,36,.12), 0 2px 6px rgba(23,26,36,.06); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} /* Safety net for a specific, well-documented browser quirk, not a band-aid for navigation overflow (that's handled properly by the hamburger menu / mobile drawer CSS elsewhere in this file). A position:fixed element positioned off-screen via transform (like .drawer below, closed by default) can still expand document.body.scrollWidth in Chrome/Blink, even though it never visually causes a scrollbar or is reachable by scrolling. Confirmed directly: .drawer's own getBoundingClientRect() correctly reflects its transformed, off-screen position, yet body.scrollWidth still grew to include it until this was added. */ body{overflow-x:hidden;} html{overflow-x:hidden;} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--accent-soft);} .eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--muted); } .hairline{border:none;border-top:1px solid var(--line);margin:0;} /* ===== Masthead ===== */ .masthead{ background:var(--paper-card); border-bottom:2px solid var(--ink); } .masthead-top{ max-width:1600px;margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 24px 14px; border-bottom:1px solid var(--line); } .brand{display:flex;align-items:baseline;gap:12px;flex-shrink:0;} .brand-mark{ font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-0.01em; } .brand-mark em{font-style:italic;color:var(--accent);} .brand-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;} .brand-logo{max-height:48px;max-width:220px;width:auto;display:block;} .masthead-banner-slot{flex:1 1 auto;display:flex;justify-content:center;min-width:0;} .masthead-banner-img{max-width:728px;width:100%;height:auto;max-height:90px;object-fit:contain;border-radius:4px;} .masthead-right{display:flex;align-items:center;gap:14px;flex-shrink:0;} .contact-btns{display:flex;gap:8px;} .contact-btn{ font-family:var(--font-mono);font-size:11px;font-weight:600;padding:7px 12px;border-radius:4px; text-decoration:none;white-space:nowrap;border:1px solid transparent; } .contact-btn-telegram{background:#26A5E4;color:#fff;} .contact-btn-telegram:hover{background:#1f8dc4;} .contact-btn-whatsapp{background:#25D366;color:#fff;} .contact-btn-whatsapp:hover{background:#20b858;} @media(max-width:920px){ .masthead-top{flex-wrap:wrap;justify-content:center;text-align:center;} .masthead-banner-slot{order:3;flex-basis:100%;} .masthead-right{order:2;} } @media(max-width:520px){ .masthead-right{flex-direction:column;align-items:center;gap:8px;} } .navbar{ max-width:1600px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2px;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .navbar::-webkit-scrollbar{display:none;} .navbar-hamburger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;margin:0 auto;padding:0;background:none;border:1px solid var(--line-strong);border-radius:var(--radius); cursor:pointer; } .navbar-hamburger span{display:block;width:18px;height:2px;background:var(--ink);margin:0 auto;} /* Below the point where every nav item, the account link, and the search box can no longer fit in one row without scrolling (verified against this nav's actual item count — see header.php's $NAV_ITEMS — not an arbitrary guess), the row is replaced entirely by a hamburger-toggled vertical drawer, so every item is reachable with a tap and no horizontal scrolling anywhere is required. Above this width, nothing here changes from the existing desktop row. */ @media(max-width:920px){ .masthead{position:relative;} .navbar-hamburger{display:flex;} .navbar-scroll-wrap{ display:none;position:absolute;top:100%;left:0;right:0;z-index:70; background:var(--paper);border-bottom:1px solid var(--line); max-height:calc(100vh - 60px);overflow-y:auto; box-shadow:0 12px 24px rgba(0,0,0,.12); } .navbar-scroll-wrap.mobile-open{display:block;} .navbar{ max-width:none;overflow-x:visible;flex-direction:column;align-items:stretch;gap:0;padding:8px 0; } .navbtn{ padding:13px 24px;border-bottom:1px solid var(--line);width:100%;text-align:left; } .navbtn.active{border-bottom:1px solid var(--line);background:var(--accent-soft);} .navbtn-group{flex-direction:row;flex-wrap:wrap;align-items:stretch;width:100%;border-bottom:1px solid var(--line);} .navbtn-group > .navbtn{flex:1;border-bottom:none;} .navbtn-caret{width:44px;flex-shrink:0;text-align:center;padding:0;border-bottom:none;} .navbtn-dropdown{flex-basis:100%;} .navbtn-dropdown{ display:none;position:static;box-shadow:none;border:none;background:var(--paper-card); padding:0;min-width:0; } .navbtn-group.open .navbtn-dropdown{display:block;} .navbtn-dropdown a{padding:12px 24px 12px 40px;border-bottom:1px solid var(--line);} .navbar-spacer{display:none;} .search-wrap{width:100%;padding:12px 24px;margin:0;box-sizing:border-box;} .search-input{width:100%;box-sizing:border-box;} } .navbtn{ padding:13px 14px;font-size:13px;font-weight:600;color:var(--ink-soft); border-bottom:2px solid transparent;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none; } .navbtn:hover{color:var(--ink);} .navbtn.active{color:var(--accent);border-bottom-color:var(--accent);} .navbar-spacer{flex:1;} /* ===== Nav dropdown (e.g. Advertise > Promotion & Marketing) ===== position:fixed on purpose — .navbar scrolls horizontally, and any element with overflow-x set to something other than visible also clips vertical overflow in every major browser. A dropdown positioned relative to the nav (position:absolute) would get clipped by that. Fixed positioning escapes it entirely; JS sets the actual top/left. */ .navbtn-group{position:relative;display:flex;align-items:center;} .navbtn-caret{ padding:13px 6px 13px 0;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer; } .navbtn-caret:hover{color:var(--ink);} .navbtn-dropdown{ display:none;position:fixed;min-width:210px;z-index:80; background:var(--paper-card);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.08); padding:6px; } .navbtn-dropdown a{ display:block;padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink-soft);border-radius:3px;white-space:nowrap; } .navbtn-dropdown a:hover{background:var(--accent-soft);color:var(--accent);} .navbtn-dropdown a.active{color:var(--accent);} .navbtn-group.open .navbtn-dropdown{display:block;} .notif-badge{ position:absolute;top:6px;right:2px;background:var(--brick);color:#fff;font-size:10px;font-weight:700; line-height:1;padding:2px 5px;border-radius:10px;min-width:15px;text-align:center;font-family:var(--font-mono); } .notif-item{display:block;padding:10px 12px;border-radius:3px;white-space:normal;} .notif-item:hover{background:var(--accent-soft);} .notif-item.unread{background:var(--accent-soft);} .notif-item .notif-title{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4;} .notif-item .notif-body{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;} .notif-item .notif-time{font-size:10.5px;color:var(--muted);margin-top:4px;font-family:var(--font-mono);} .search-wrap{position:relative;margin:8px 0;} .search-input{ font-family:var(--font-body);font-size:13px;padding:7px 10px 7px 28px; border:1px solid var(--field-border);border-radius:var(--radius);background:var(--field-bg);color:var(--field-text);width:190px; } .search-wrap svg{position:absolute;left:8px;top:9px;width:13px;height:13px;stroke:var(--muted);} /* ===== Dateline ticker ===== */ .dateline{ background:var(--ink);color:var(--paper); overflow:hidden;white-space:nowrap; } .dateline-inner{ display:inline-flex;gap:0; animation:ticker 38s linear infinite; padding:8px 0; } .dateline:hover .dateline-inner{animation-play-state:paused;} @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} .dateline-item{ font-family:var(--font-mono);font-size:11.5px;padding:0 22px;border-right:1px solid var(--line-inverse); display:flex;gap:8px;align-items:center; } .dateline-item .dl-date{color:var(--amber);} @media(prefers-reduced-motion:reduce){.dateline-inner{animation:none;overflow-x:auto;}} /* ===== Layout ===== */ .wrap{max-width:1600px;margin:0 auto;padding:32px 24px 80px;} /* ===== Top banner ad(s) (1000×150 recommended each) — sit just under the dateline ticker, with a small gap above the first and between each additional stacked slot ===== */ .top-banner-stack{margin-top:14px;} .top-banner-wrap{ max-width:1600px;margin:0 auto;padding:0 24px;text-align:center; } .top-banner-wrap + .top-banner-wrap{margin-top:12px;} .top-banner-img{width:100%;height:auto;border-radius:4px;display:inline-block;} /* ===== Right sidebar ad (300×300 recommended) — every page except Home, toggleable per page from Admin → Banners ===== */ .page-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;} .page-sidebar{position:sticky;top:20px;} .sidebar-banner-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;} /* ===== Left sidebar ad (200×200 recommended) — the left rail, toggleable per page from Admin → Banners. Same square treatment as the right sidebar banner, kept as its own class in case the left rail ever needs different sizing. ===== */ .left-rail-banner-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;} @media(max-width:920px){ .page-with-sidebar{grid-template-columns:minmax(0,1fr);} .page-sidebar{position:static;} } /* ===== Left rail — reserved column on a specific page list (see partials/header.php's $showLeftRail), no content yet. Two shapes: with the right ad sidebar too (.page-with-left-and-sidebar, most pages) or alone (.page-with-left-rail, on the pages that also drop the right ad sidebar for their own reasons — Home, Account — see $showSidebar's own comment). Collapses before the right sidebar does (1200px vs. the right sidebar's existing 920px) since losing a left-nav/filter column costs less than losing the ad column or the main content itself. ===== */ .page-with-left-and-sidebar{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:32px;align-items:start;} .page-with-left-rail{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start;} .page-left-rail{position:sticky;top:20px;} /* The left rail never disappears: below 1200px it drops BELOW the main content (spanning the full row, cards laid out in a responsive grid), so its stats, promoted spots, airdrops and its 200x200 banner stay reachable on tablet and phone instead of being display:none'd. */ @media(max-width:1200px){ .page-with-left-and-sidebar{grid-template-columns:minmax(0,1fr) 300px;} .page-with-left-rail{grid-template-columns:minmax(0,1fr);} .page-left-rail{ position:static;grid-column:1/-1;order:3;display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:start; } } @media(max-width:920px){ .page-with-left-and-sidebar{grid-template-columns:minmax(0,1fr);} .page-sidebar{order:2;} } /* minmax(0,1fr) rather than a bare 1fr on both grids above and below — a bare 1fr track can't shrink past its content's min-content width (e.g. a wide table), so on a narrow viewport that content would force the whole grid, and the page, wider than the viewport instead of the track just shrinking. minmax(0,1fr) removes that floor; .ledger-scroll below is the backstop for the table itself if it's still too wide to fit even at that point. */ .grid-2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;} @media(max-width:920px){.grid-2{grid-template-columns:minmax(0,1fr);}} /* ===== Hero (home) ===== */ .hero{padding:10px 0 34px;border-bottom:1px solid var(--line);margin-bottom:30px;} .hero-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;} .hero h1{ font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1.06;letter-spacing:-0.01em; margin:0 0 16px;max-width:760px; } .hero h1 em{font-style:italic;color:var(--accent);} .hero p{font-size:16px;color:var(--ink-soft);max-width:560px;line-height:1.55;margin:0 0 22px;} .hero-actions{display:flex;gap:12px;} .btn{ font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--ink); background:var(--ink);color:var(--paper-card);display:inline-flex;align-items:center;gap:6px; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease, color .12s ease; } .btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow-sm);} .btn:active{transform:translateY(0);box-shadow:none;} .btn-outline{background:transparent;color:var(--ink);} .btn-outline:hover{background:var(--ink);color:var(--paper-card);opacity:1;} .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);box-shadow:0 2px 8px rgba(47,62,228,.22);} .btn-accent:hover{box-shadow:0 4px 14px rgba(47,62,228,.32);} .statbar{ display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line); margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm); } .stat{background:var(--paper-card);padding:14px 16px;position:relative;transition:background .15s ease;} .stat:hover{background:var(--accent-soft);} .stat .n{font-family:var(--font-mono);font-size:23px;font-weight:700;color:var(--ink);} .stat .l{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;} /* Vertical variant — same .stat/.n/.l cells, stacked in a single column. Used for the left-rail "At a Glance" and right-sidebar "Market Pulse" cards on Home, where the strip is a narrow (220px/320px) column rather than the full-width hero. */ .statbar-vertical{grid-template-columns:1fr;margin-top:12px;} .next-launch-countdown{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px; background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);font-size:13.5px; } .next-launch-countdown #countdownTimer{margin-left:auto;color:var(--accent);font-size:15px;} .how-it-works{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 30px;padding:20px 0; border-bottom:1px solid var(--line); } .hiw-step{display:flex;gap:12px;align-items:flex-start;} .hiw-num{ font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--accent); border:1px solid var(--accent);border-radius:50%;width:26px;height:26px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } /* Centered variant — icon stacked above text, each step centered in its column, used on Home. */ .how-it-works.centered .hiw-step{flex-direction:column;align-items:center;text-align:center;} /* Centered variant of a section header — used where a section (e.g. Premium Listings on Home) is meant to read as its own standalone block rather than sitting flush with a right-aligned "view all" link. */ .section-head.centered{justify-content:center;text-align:center;} .chain-breakdown{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;} .chain-breakdown .chip{cursor:default;} .chain-breakdown .chip .muted{margin-left:5px;} @media(max-width:760px){ .how-it-works{grid-template-columns:1fr;gap:16px;} .next-launch-countdown #countdownTimer{margin-left:0;} } /* ===== Section headers ===== */ .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;} /* ===== Admin panel: left sidebar + top function tabs + content ===== .admin-shell is a two-column flex layout on desktop (sidebar fixed width, main area flexible) and stacks vertically on narrow screens — the sidebar becomes a horizontally-scrollable strip of category groups above the top tab bar and content, rather than a true collapsing drawer, so it stays simple and fully usable on mobile without extra toggle/overlay JS. */ .admin-shell{display:flex;gap:24px;align-items:flex-start;} .admin-sidebar{ width:210px;flex-shrink:0;background:var(--paper-card);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 10px;position:sticky;top:16px; } .nav-icon{display:inline-block;width:18px;text-align:center;margin-right:6px;opacity:.75;font-size:12px;} .admin-sidebar-standalone{display:block;width:100%;text-align:left;background:none;border:none; font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:6px; cursor:pointer;margin-bottom:2px;transition:background .12s ease; } .admin-sidebar-standalone:hover{background:var(--paper);} .admin-sidebar-standalone.active{background:var(--ink);color:var(--paper-card);} .admin-sidebar-standalone.active .nav-icon{opacity:.9;} .admin-sidebar-divider{height:1px;background:var(--line);margin:10px 4px;} .admin-sidebar-cat{padding:10px 10px 4px;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase; letter-spacing:.07em;color:var(--muted); } .admin-sidebar-cat .nav-icon{opacity:.6;font-size:11px;} .admin-sidebar-link{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit; font-size:13px;color:var(--ink-soft);padding:7px 10px;border-radius:6px;cursor:pointer;margin-bottom:1px; transition:background .12s ease; } .admin-sidebar-link:hover{background:var(--paper);color:var(--ink);} .admin-sidebar-link.active{background:var(--ink);color:var(--paper-card);font-weight:600;} .admin-main{flex:1;min-width:0;} .admin-toptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:20px;padding-bottom:0;} .admin-toptab{background:none;border:none;font-family:inherit;font-size:13px;color:var(--ink-soft); padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap; } .admin-toptab:hover{color:var(--ink);} .admin-toptab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);} .admin-sidebar-select{display:none;} @media(max-width:760px){ .admin-shell{flex-direction:column;gap:14px;} .admin-sidebar-scroll-wrap,.admin-sidebar{display:none;} .admin-sidebar-select{ display:block;width:100%;box-sizing:border-box;padding:12px 14px;font-size:14px;font-weight:600; font-family:inherit;color:var(--ink);background:var(--paper-card);border:1px solid var(--line-strong); border-radius:var(--radius); } .admin-toptabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:none;-ms-overflow-style:none;} .admin-toptabs::-webkit-scrollbar{display:none;} .admin-main{width:100%;min-width:0;} } .section-head h2{font-family:var(--font-display);font-size:24px;font-weight:600;margin:0;} .section-head .num{font-family:var(--font-mono);color:var(--accent);font-style:normal;margin-right:8px;} .tabs{display:flex;gap:4px;flex-wrap:wrap;} .tab{ font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em; padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper-card);color:var(--ink-soft); } .tab.active{background:var(--ink);color:var(--paper-card);border-color:var(--ink);} .filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;} .chip{ font-family:var(--font-mono);font-size:11px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:20px; background:transparent;color:var(--ink-soft); } .chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);} /* ===== Calendar page: centered, prominent stage toggle ===== */ .stage-toggle{ display:flex;justify-content:center;gap:16px;flex-wrap:wrap; margin:4px 0 26px; } .stage-btn{ font-family:var(--font-mono);font-size:15px;text-transform:uppercase;letter-spacing:.06em;font-weight:600; padding:16px 28px;border:2px solid var(--line-strong);border-radius:var(--radius); background:var(--paper-card);color:var(--ink-soft); flex:1 1 220px;max-width:280px;text-align:center; } .stage-btn.active{background:var(--ink);color:var(--paper-card);border-color:var(--ink);} @media(max-width:640px){ .stage-btn{flex:1 1 100%;max-width:none;} } /* ===== Calendar page: centered, larger dropdown filters ===== */ .filter-row-select{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;} .filter-select{ font-family:var(--font-mono);font-size:14px;padding:13px 16px;border:1.5px solid var(--field-border); border-radius:var(--radius);background:var(--field-bg);color:var(--field-text);min-width:220px;flex:1 1 240px;max-width:320px; } @media(max-width:640px){ .filter-select{flex:1 1 100%;max-width:none;} } /* ===== Ledger table ===== */ /* Backstop for ledgerTable()'s output: if the table's own min-content width (long project names, badges, the raised/community/details columns) still doesn't fit the space the grid track above gives it, the table scrolls horizontally inside this wrapper instead of forcing .grid-2 / .page-with-left-rail wider than the viewport. */ .ledger-scroll{ width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch; border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line); } .ledger{width:100%;border-collapse:collapse;background:var(--paper-card);} .ledger thead th{ text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted); padding:11px 12px;border-bottom:1.5px solid var(--ink);font-weight:600;background:var(--paper-card); } .ledger tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s;} .ledger tbody tr:nth-child(even){background:rgba(23,26,36,.015);} .ledger tbody tr:hover{background:var(--accent-soft);} .ledger tbody tr:last-child{border-bottom:none;} .ledger td{padding:12px;vertical-align:middle;font-size:13.5px;} .proj-name{display:flex;align-items:center;gap:10px;} .proj-logo{ width:32px;height:32px;border-radius:9px;color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:14px;flex-shrink:0; box-shadow:0 1px 3px rgba(23,26,36,.18), inset 0 0 0 1px rgba(255,255,255,.14); background:var(--ink); /* overridden per-project by an inline style from logoHtml() */ } img.proj-logo{border-radius:9px;box-shadow:0 1px 3px rgba(23,26,36,.18);background:var(--paper-card);} .proj-title{font-weight:600;font-size:13.5px;} .proj-ticker{font-family:var(--font-mono);font-size:11px;color:var(--muted);} .tag{ font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:capitalize;letter-spacing:.04em; padding:3px 9px 3px 8px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:5px; box-shadow:inset 0 0 0 1px currentColor; } .tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.85;} .tag-active{background:var(--moss-soft);color:var(--moss);} .tag-upcoming{background:var(--amber-soft);color:var(--amber);} .tag-verified{background:var(--accent-soft);color:var(--accent);} .comment-row{padding:14px 0;border-bottom:1px solid var(--line);} .comment-row:last-child{border-bottom:none;} .comment-head{display:flex;align-items:center;gap:10px;} .comment-delete{ margin-left:auto;background:none;border:none;color:var(--muted);font-size:11px; font-family:var(--font-mono);cursor:pointer;padding:2px 6px; } .comment-delete:hover{color:var(--brick);} .comment-body{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word;} .tag-ended{background:var(--brick-soft);color:var(--brick);} .tag-presale{background:var(--accent-soft);color:var(--accent);} .tag-launched{background:var(--violet-soft);color:var(--violet);} .chaintag{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);} .mono{font-family:var(--font-mono);font-size:12.5px;} .muted{color:var(--muted);} .right{text-align:right;} /* star / watchlist */ .star-btn{background:none;border:none;font-size:16px;color:var(--line-strong);padding:2px;} .star-btn.on{color:var(--amber);} /* ink stamp vote */ .stamp-btn{ position:relative;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em; border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:20px; padding:5px 12px;display:inline-flex;align-items:center;gap:6px;min-width:78px;justify-content:center; } .stamp-btn:hover{background:var(--accent-soft);} .stamp-btn.stamped{ border-color:var(--moss);color:var(--moss); animation:stamp .28s ease-out; } .stamp-btn.locked{opacity:.55;cursor:default;} @keyframes stamp{ 0%{transform:scale(1.6) rotate(-14deg);opacity:0;} 60%{transform:scale(0.94) rotate(-4deg);opacity:1;} 100%{transform:scale(1) rotate(-3deg);} } .stamp-btn.stamped{transform:rotate(-3deg);} .vote-count{font-family:var(--font-mono);font-size:11px;color:var(--muted);} .view-link{font-family:var(--font-mono);font-size:11px;color:var(--accent);white-space:nowrap;} .view-link:hover{text-decoration:underline;} /* ===== Sidebar cards ===== */ /* Content-container background convention: any element that displays substantial text/content directly on the page (not just spacing or a row inside another container) must use one of these classes, or be nested inside one — never rely on the bare page background: .side-card, .form-card, .article-card, .article-content, .price-card, .ledger (table), .stat, .navbtn-dropdown Row-level helpers like .comment-row, .mini-row, .drawer-section, and .field-hint intentionally have no background of their own — they are meant to sit inside one of the containers above, not stand alone. If you add a new content container, give it one of the backgrounds above (or a new rule following the same background/border/padding pattern) rather than a bare `
` with only inline spacing. */ .side-card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px;margin-bottom:20px;transition:box-shadow .15s ease;} .side-card:hover{box-shadow:var(--shadow-md);} .side-card h3{font-family:var(--font-display);font-size:16px;margin:0 0 12px;font-weight:600;} .mini-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;} .mini-row:last-child{border-bottom:none;} .mini-rank{font-family:var(--font-mono);color:var(--accent);font-size:11px;width:18px;} .promo-slot{ border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);padding:22px 20px;text-align:center; color:var(--muted);font-size:12px;font-family:var(--font-mono);line-height:1.6; background:linear-gradient(135deg, var(--paper) 0%, var(--paper-card) 100%); transition:border-color .15s ease, background .15s ease; } .promo-slot:hover{border-color:var(--accent);background:var(--accent-soft);} .promo-slot a{font-weight:600;} /* ===== Detail drawer ===== */ .overlay{position:fixed;inset:0;background:rgba(23,26,36,.4);z-index:40;display:none;} .overlay.open{display:block;} .drawer{ position:fixed;top:0;right:0;width:440px;max-width:92vw;height:100%;background:var(--paper-card); z-index:41;box-shadow:-8px 0 30px rgba(0,0,0,.15);transition:transform .25s ease;overflow-y:auto; border-left:2px solid var(--ink);transform:translateX(100%); } .drawer.open{transform:translateX(0);} .drawer-head{padding:22px;border-bottom:1px solid var(--line);} .drawer-close{float:right;background:none;border:none;font-size:20px;color:var(--muted);line-height:1;} .drawer-body{padding:22px;} .drawer-body h2{font-family:var(--font-display);font-size:26px;margin:14px 0 4px;} .drawer-section{margin-bottom:20px;} .drawer-section h4{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px;} .backer-pill{ display:inline-block;font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:20px; padding:4px 10px;margin:0 6px 6px 0; } .social-row{display:flex;gap:10px;margin-top:6px;} .social-row a{font-family:var(--font-mono);font-size:12px;color:var(--accent);border-bottom:1px solid var(--accent-soft);} /* ===== Forms ===== */ .form-card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:28px;max-width:640px;} .field{margin-bottom:16px;} .field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--field-label);margin-bottom:6px;} .field input,.field select,.field textarea{ width:100%;padding:9px 11px;border:1px solid var(--field-border);border-radius:var(--radius);font-family:var(--font-body);font-size:13.5px;background:var(--field-bg);color:var(--field-text); } .field textarea{resize:vertical;min-height:80px;} .field input[type="file"]{ padding:8px;background:var(--paper);cursor:pointer; } .field-hint{font-family:var(--font-mono);font-size:11px;color:var(--field-label);margin-top:5px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:520px){.field-row{grid-template-columns:1fr;}} .form-section-title{ font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent); margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--line); } .form-section-title:first-child{margin-top:0;padding-top:0;border-top:none;} .toast{ position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper); padding:12px 20px;border-radius:var(--radius);font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:60; font-family:var(--font-mono); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* ===== Pricing / advertise ===== */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);} @media(max-width:760px){.price-grid{grid-template-columns:1fr;}} .price-card{background:var(--paper-card);padding:26px 22px;} .price-card.featured{background:var(--ink);color:var(--paper-card);} .price-card .tier{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);} .price-card.featured .tier{color:var(--muted-inverse);} .price-card .amt{font-family:var(--font-display);font-size:34px;margin:6px 0 16px;} .price-card ul{padding-left:18px;margin:0 0 18px;font-size:13px;line-height:1.9;} /* ===== Journal ===== */ .article-card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;} .article-card-row{display:flex;gap:20px;align-items:flex-start;} .article-card-text{flex:1;min-width:0;} .article-date{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:6px;} .article-card h3{font-family:var(--font-display);font-size:19px;margin:0 0 6px;font-weight:600;} .article-card p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;} .article-thumb{width:160px;height:110px;object-fit:cover;border-radius:6px;display:block;flex-shrink:0;} @media(max-width:560px){ .article-card-row{flex-direction:column;} .article-thumb{width:100%;height:160px;} } /* ===== Article body content (rendered HTML from the rich text editor) ===== background is set here deliberately, not left to inherit the plain page background — content pasted into the editor from Word, Google Docs, or another site frequently carries its own inline background/color styles, and sanitize_article_html() strips dangerous tags/attributes but doesn't touch style="" (by design, so legitimate formatting like bold/italic/ color survives). Giving this container its own solid, opaque background and forcing every element inside it back to that background and the theme's own text color closes that gap for any content already saved with a bad style, not just new content going forward. */ .article-content{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;font-size:15px;line-height:1.75;color:var(--ink);} .article-content *{background-color:transparent!important;color:inherit!important;} .article-content p{margin:0 0 18px;} .article-content h2{font-family:var(--font-display);font-size:24px;font-weight:600;margin:32px 0 14px;} .article-content h3{font-family:var(--font-display);font-size:19px;font-weight:600;margin:26px 0 12px;} .article-content ul,.article-content ol{margin:0 0 18px;padding-left:24px;} .article-content li{margin-bottom:6px;} .article-content a{color:var(--accent)!important;text-decoration:underline;} .article-content blockquote{ margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--accent); color:var(--ink-soft)!important;font-style:italic; } .article-content img{max-width:100%;border-radius:6px;margin:10px 0;} .article-content table{border-collapse:collapse;margin:0 0 18px;width:100%;} .article-content td,.article-content th{border:1px solid var(--line);padding:8px 10px;font-size:13.5px;} .article-content code{font-family:var(--font-mono);background-color:var(--paper)!important;padding:2px 5px;border-radius:3px;font-size:13px;} .article-content pre{background-color:var(--paper)!important;padding:14px;border-radius:6px;overflow-x:auto;margin:0 0 18px;} /* ===== Rich text editor toolbar (admin article form) ===== */ .editor-toolbar{ display:flex;flex-wrap:wrap;align-items:center;gap:2px; border:1px solid var(--line-strong);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0; background:var(--paper);padding:6px; } .editor-btn{ font-family:var(--font-mono);font-size:12px;padding:6px 9px;border:1px solid transparent;border-radius:3px; background:transparent;color:var(--ink-soft); } .editor-btn:hover{background:var(--paper-card);border-color:var(--line-strong);} .editor-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px;} .rich-editor{ min-height:260px;border:1px solid var(--field-border);border-radius:0 0 var(--radius) var(--radius); padding:14px;font-family:var(--font-body);font-size:14px;line-height:1.6;background:var(--field-bg);color:var(--field-text);caret-color:var(--field-text); } .rich-editor:focus{outline:2px solid var(--field-focus);outline-offset:1px;border-color:var(--field-focus);} .rich-editor h2{font-family:var(--font-display);font-size:20px;margin:16px 0 8px;} .rich-editor h3{font-family:var(--font-display);font-size:17px;margin:14px 0 6px;} .rich-editor blockquote{margin:0 0 12px;padding-left:14px;border-left:3px solid var(--accent);color:var(--ink-soft);} .rich-editor ul,.rich-editor ol{padding-left:22px;} /* empty state */ .empty{ padding:46px 20px;text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:13px; border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--paper); } .empty::before{ content:"◇";display:block;font-size:20px;color:var(--line-strong);margin-bottom:10px;font-family:var(--font-body); } footer{border-top:2px solid var(--ink);background:var(--paper-card);padding:30px 24px;margin-top:40px;} .footer-inner{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);} .footer-legal-links a{color:var(--muted);text-decoration:none;} .footer-legal-links a:hover{color:var(--accent);text-decoration:underline;} .cookie-notice{ position:fixed;left:0;right:0;bottom:0;z-index:200; background:var(--ink);color:var(--paper); box-shadow:0 -4px 16px rgba(0,0,0,.15); } .cookie-notice-inner{ max-width:1600px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .cookie-notice p{margin:0;font-size:12.5px;line-height:1.5;color:var(--paper);} .cookie-notice a{color:var(--paper);text-decoration:underline;} @media(max-width:560px){ .cookie-notice-inner{flex-direction:column;align-items:stretch;text-align:center;} } /* Floating/overlay ad module (migrate_v71) — position:fixed throughout, so none of these ever affect page layout or contribute to layout shift. z-index sits just below .cookie-notice (200) so a legal/ compliance notice always wins if both are visible at once. */ .float-ad-close{ position:absolute;top:-12px;right:-12px;width:28px;height:28px;border-radius:50%; background:var(--ink);color:var(--paper);border:2px solid var(--paper); font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; z-index:2;padding:0; } .float-ad-close:hover{background:var(--brick);} .float-ad-footer{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:190; justify-content:center;pointer-events:none; } .float-ad-footer.is-visible{display:flex;} .float-ad-footer .float-ad-inner{ position:relative;pointer-events:auto;max-width:1000px;width:100%; box-shadow:0 -4px 20px rgba(0,0,0,.2); } .float-ad-footer .float-ad-img{display:block;width:100%;height:auto;max-height:150px;object-fit:contain;background:var(--paper);} @media(max-width:640px){ .float-ad-footer .float-ad-img{max-height:80px;} .float-ad-footer .float-ad-close{width:24px;height:24px;top:-10px;right:6px;font-size:15px;} } .float-ad-left{ display:none;position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:190; } .float-ad-left.is-visible{display:block;} .float-ad-left .float-ad-inner{position:relative;} .float-ad-left .float-ad-img{display:block;width:120px;height:600px;object-fit:contain;background:var(--paper);border-radius:var(--radius);} /* Hidden below tablet width rather than shrunk — a 120px-wide column permanently pinned to the side of a phone screen costs a meaningful share of the viewport for the whole session. The footer placement already covers the mobile ad-presence role. This rule must win regardless of the JS-toggled .is-visible class above (both are plain stylesheet rules now, not inline styles, so normal cascade order applies and this later, equally-specific rule takes effect when the viewport matches it). */ @media(max-width:768px){ .float-ad-left.is-visible{display:none;} } .float-ad-popup{ display:none;position:fixed;inset:0;z-index:195;align-items:center;justify-content:center; } .float-ad-popup.is-visible{display:flex;} .float-ad-popup .float-ad-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);} .float-ad-popup .float-ad-inner{ position:relative;width:500px;height:500px;max-width:90vw;max-height:90vh; background:var(--paper);border-radius:var(--radius);overflow:hidden; display:flex;align-items:center;justify-content:center; } .float-ad-popup .float-ad-img{display:block;width:100%;height:100%;object-fit:contain;} .float-ad-popup .float-ad-close{top:-14px;right:-14px;} @media(max-width:560px){ .float-ad-popup .float-ad-close{top:-10px;right:0;} } @media(max-width:640px){ .hero h1{font-size:32px;} .statbar{grid-template-columns:repeat(2,1fr);} .field-row{grid-template-columns:1fr;} .ledger thead{display:none;} .ledger td{display:block;padding:4px 12px;} .ledger tr{padding:10px 0;display:block;} } /* ===== Added for live backend version ===== */ .form-error{ background:var(--brick-soft);color:var(--msg-error-text,var(--brick));border:1px solid var(--brick); padding:9px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;font-family:var(--font-mono); } .form-note{ background:var(--accent-soft);color:var(--msg-note-text,var(--accent));border:1px solid var(--accent); padding:9px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:14px;font-family:var(--font-mono); } .btn[disabled],.btn:disabled{ opacity:1;background:var(--field-disabled-bg);background-image:none;color:var(--field-disabled-text); border-color:var(--field-border);box-shadow:none;transform:none;cursor:not-allowed; } .small-link{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-top:10px;display:inline-block;cursor:pointer;} /* ===================================================================== Global form-control contrast layer --------------------------------------------------------------------- One place that decides how EVERY form control looks in EVERY theme, so no individual form (or future form) has to remember to set colors. Browsers default typed text to black (and dropdown/autofill/file buttons to light-mode system colors), which is unreadable on dark themes. Everything here is derived from the active theme's tokens. Measurable requirements (WCAG 2.1 AA) — verified for every theme by tests/contrast_audit.js: • typed text, selected dropdown text,