/* --------------------------------------------------------------------------- SECONDARY TEXT LIFTED FROM #B8B8B8 TO #C8C8C8 — 17 September 2026, Joe's call. THIS IS A DELIBERATE DIVERGENCE FROM THE LIVE SITE, not a porting fix. Every text colour was measured on both pages first and they were identical, so nothing was broken; the live page simply runs a little dim against #0A0A0A. #B8B8B8 on #0A0A0A is about 10:1 contrast. #C8C8C8 is about 11.8:1 — a visible lift that still sits clearly below the pure-white headings and subtitles, so the hierarchy holds. Going much lighter starts competing with #FFFFFF and flattens it. To go back to matching live exactly, swap #C8C8C8 for #B8B8B8 in this file. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- theme-black.css — the black shell: design tokens, base type, buttons, section headings and the footer. Extracted 17 September 2026 from the live page mirror at ~/riddimbank-crawl-2026-09-17/pages/main-page.html (style block #5). Rules are ported AS THEY ARE, !important and all. Cleanup is Phase 9. --------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-green: #00A651; /* also in buttons.css, kept in step */ --accent-gold: #FFD700; --deep-red: #D62828; --dark-bg: #0A0A0A; --card-bg: #1A1A1A; --text-primary: #FFFFFF; --text-secondary: #C8C8C8; } body { font-family: HelveticaNeue, Arial, 'Open Sans', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* CORRECTED 17 Sept 2026, measured on the live page rather than on the crawl. main-page's stylesheet asks for 'DM Sans', but DM Sans never loads on riddimbank.com and Simvoly's own stack wins for body text, so what is actually on screen today is HelveticaNeue. Loading DM Sans here made the preview wider and heavier than the real thing. Headings are untouched: Archivo Black IS loaded on the live site and is correct. */ background: var(--dark-bg); color: var(--text-primary); overflow-x: hidden; line-height: 1.6; } h1 { font-family: 'Archivo Black', sans-serif; font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */ font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.15; margin-bottom: 20px; color: #FFFFFF !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .section-header { text-align: center; margin-bottom: 60px; } .section-badge { display: inline-block; color: #00A651 !important; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .section-title { font-family: 'Archivo Black', sans-serif; font-weight: 400; /* Archivo Black ships ONE weight. Without this, h1-h4 inherit the browser's bold and it gets SYNTHESISED — smeared thicker. That is the 'blockier' look. */ font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; color: #FFFFFF !important; } /* Footer */ /* --------------------------------------------------------------------------- SLIM FOOTER — 17 September 2026, Joe's call after seeing three densities. The four-column footer measured 268px, a THIRD of an 800px browser window. This one is ~108px on black. Brand name at the left, every link in one row at the right, copyright underneath. WHAT IT GIVES UP, knowingly: the column headings and the blurb. The headings are NOT display:none — they are visually hidden, so screen readers and crawlers still get "Quick Links / Support / Connect" as group labels while sighted visitors see one clean row. Deleting them from the markup would have thrown that away for nothing. The links come from site.footer. in site/_data/site.json, so the row is whatever that file says. Black carries 9, white 12; the row wraps rather than overflowing. On phones the row wraps to centred lines and every link keeps a 44px tap target — same rule the previous footer had, and it still matters more here because the links now sit side by side rather than stacked. --------------------------------------------------------------------------- */ .footer { background: var(--card-bg); border-top: 1px solid rgba(0, 166, 81, 0.2); padding: 18px 24px; } .footer-container { max-width: 1400px; margin: 0 auto; } .footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-bottom: 12px; } .footer-column { flex: 0 0 auto; } .footer-column:first-child { margin-right: auto; } /* The blurb is marketing copy nobody reads at the bottom of a page. It stays in site.json (the description still uses it) and is simply not shown. */ .footer-column:first-child p { display: none; } /* Visually hidden, NOT display:none — see the note above. */ .footer-column h4 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .footer-column:first-child h4 { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; font-family: 'Archivo Black', sans-serif; font-weight: 400; font-synthesis: none; font-size: 1rem; color: #00A651 !important; } .footer-links { display: flex; flex-direction: row; gap: 20px; } .footer-link { color: #C8C8C8 !important; text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease; white-space: nowrap; } .footer-link:hover { color: #00A651 !important; } .footer-bottom { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } /* .footer-bottom-sep / -link rules removed 17 Sept 2026: License Agreement moved into the link row, so the bottom bar is the copyright alone. */ .footer-bottom p { color: #8f8f8f !important; font-size: 0.8125rem; } @media (max-width: 768px) { h1 { font-size: 2rem; } } /* --------------------------------------------------------------------------- FONT SMOOTHING — added 17 September 2026 after measuring both pages. The live site computes -webkit-font-smoothing: antialiased; the port computed 'auto'. On macOS 'auto' means SUBPIXEL antialiasing, which renders light text on a dark background noticeably heavier and with colour fringing on the glyph edges. That fringing is what reads as "blurry", and the extra weight is what reads as "bolder". Same font, same size, same weight — different rasteriser. Simvoly's platform stylesheet sets this, which is why the live page looks cleaner. Do not remove these two lines: they are the difference. --------------------------------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* The live page also sets this. It turns on the font's proper kerning and ligatures, which tightens letter pairs instead of leaving them on the browser's rough default spacing. Second of the two properties that differed between live and this port; nothing else did. */ text-rendering: optimizeLegibility; } /* --------------------------------------------------------------------------- NEVER LET THE BROWSER FAKE A BOLD. Added 17 September 2026. Archivo Black ships one weight. Poiret One ships one weight. Ask either for bold and the browser cannot load a heavier file, so it SYNTHESISES one by inflating every stroke outward. The strokes grow into the counters — the enclosed white spaces — and the gap inside an 'S' or an 'e' closes up. That is what "blurry" looked like on /main-page: not the rasteriser, a fake bold. Headings default to bold, so this was happening everywhere by default. Each rule now pins font-weight: 400, and this belt-and-braces line means that even if someone later adds a or a bold utility class inside one of these elements, the browser refuses to fake it rather than smearing the glyphs. Deliberately NOT global: body text is Helvetica Neue, which HAS a real bold, and there should keep working normally. --------------------------------------------------------------------------- */ h1, h2, h3, h4, .section-title, .step-title, .style-name, .final-cta h2, .footer-column h4, .cta-primary, .rb-404 h1 { font-synthesis: none; } /* --------------------------------------------------------------------------- PHONE TAP TARGETS — measured 17 September 2026 on a 375px viewport. Footer links were rendering 24px tall. They are fine with a mouse and awkward with a thumb, so they get real height on small screens only. Desktop spacing is unchanged. --------------------------------------------------------------------------- */ @media (max-width: 767px) { /* The row becomes centred wrapped lines. Tap targets stay 44px — this matters MORE in the slim footer than it did in the stacked one, because the links now sit shoulder to shoulder and a miss hits the neighbour. */ .footer-grid { flex-direction: column; align-items: center; gap: 4px; } .footer-column:first-child { margin-right: 0; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 0 18px; } .footer-link { display: inline-flex; align-items: center; min-height: 44px; } } /* ⚠️ .footer-bottom-link HAD NO CSS AT ALL until 19 September 2026. The footer template has referenced it since it was written, for the legal links beside the copyright — but `legalLinks` was empty for both themes, so nothing ever rendered with the class and nobody saw that it did nothing. The Cookie choices control was the first thing to use it, and it arrived as browser-default blue on black: effectively unreadable. A latent bug of the worst kind, because it was invisible until the feature that needed it shipped. */ .footer-bottom-link { color: #8f8f8f; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 1px; transition: color .15s, border-color .15s; } .footer-bottom-link:hover { color: #1DB954; border-bottom-color: #1DB954; } .footer-bottom-sep { margin: 0 8px; color: #555; }