now sits above the footer in the stacking order (see .rd-footer-grid below). --------------------------------------------------------------------------- */ .rd-dark { position: relative; } .rd-dark::before { content: ""; position: absolute; z-index: -1; top: -77px; bottom: var(--rd-footer-overlap); /* Bleed to the page edges using % of the wrapper width (which excludes the scrollbar), so it lands exactly at x=0 / x=clientWidth with no overflow. */ left: calc(var(--rd-bleed) * -1); right: calc(var(--rd-bleed) * -1); background: #0C0F14; } /* --------------------------------------------------------------------------- Footer backdrop + grid. The lower dark area starts partway UP the info box rather than below it, so the box's bottom edge overlaps the footer's background instead of clearing it. --rd-footer-overlap is how far above the info box's bottom that boundary sits; --rd-footer-rise is the same boundary measured from the footer's own top edge (the overlap plus

's 48px pb-12 and the footer's 48px mt-12). For the box to sit ON TOP of the grid,

(z-10) has to win over the footer, so the footer drops to z-0 — see the `z-0` class in inc/footer.php. That means the footer can no longer rely on .rd-dark bleeding down into it, hence the ::after backdrop below. --------------------------------------------------------------------------- */ :root { --rd-footer-overlap: 40px; --rd-footer-rise: 136px; /* 40 overlap + 48 main pb-12 + 48 footer mt-12 */ } .rd-footer-grid { position: relative; } /* Solid dark backdrop, extended up past the footer's top edge to the boundary. Unmasked, so it stays opaque where the grid above it fades out. */ .rd-footer-grid::after { content: ""; position: absolute; z-index: -1; top: calc(var(--rd-footer-rise) * -1); bottom: 0; left: 0; right: 0; background: #0C0F14; pointer-events: none; } /* Decorative grid pattern — same 118px cells / line colour as the hero + reviews grids, anchored to the content column's left edge and fading out toward the bottom-right. Sits above the backdrop (z-0 vs -1) but below the footer content (which is z-10). */ .rd-footer-grid::before { content: ""; position: absolute; top: calc(var(--rd-footer-rise) * -1); height: calc(100% + var(--rd-footer-rise)); left: min(0px, calc(var(--rd-gutter) - 118px)); width: min(720px, 100%); z-index: 0; pointer-events: none; background-image: linear-gradient(to right, #16191E 1px, transparent 1px), linear-gradient(to bottom, #16191E 1px, transparent 1px); background-size: 118px 118px; -webkit-mask-image: radial-gradient(120% 130% at top left, #000 0%, #000 30%, transparent 80%); mask-image: radial-gradient(120% 130% at top left, #000 0%, #000 30%, transparent 80%); } /* --------------------------------------------------------------------------- Full-bleed band behind the SEO info container, in the page colour (#11141A) — the same background the server list sits on up top. This lifts the area out of the darker lower band (#0C0F14) so the info box shares the servers' bg. Full-bleed to the page edges using the same %-maths as .rd-dark. It ends --rd-footer-overlap ABOVE the info box's bottom edge, so the box's last stretch sits over the darker footer background + grid rather than on its own lighter band. */ .rd-article-band { position: relative; } .rd-article-band::before { content: ""; position: absolute; z-index: -1; top: -44px; bottom: var(--rd-footer-overlap); left: calc(var(--rd-bleed) * -1); right: calc(var(--rd-bleed) * -1); background: #11141A; } /* --------------------------------------------------------------------------- Fluid hero typography. The layout width is a percentage (see --rd-gutter), so the hero text must scale with the viewport too, or it looks proportionally small on wide screens. Each `calc(vw + px)` is a linear fluid size that equals the 1440px design value at 1440px and grows ~1.2x by 2560px (clamped so it's flat below 1440 and above 2560). This lifts the hero block from ~201px (scaled to 1440) toward the design's 237px on a 2560px screen. --------------------------------------------------------------------------- */ .rd-hero { padding-top: clamp(32px, calc(0.5143vw + 24.59px), 37.76px); padding-bottom: clamp(32px, calc(0.5143vw + 24.59px), 37.76px); } .rd-hero-title { font-size: clamp(36px, calc(0.5786vw + 27.67px), 42.48px); } .rd-hero-para { font-size: clamp(19px, calc(0.3054vw + 14.6px), 22.42px); max-width: clamp(655px, calc(10.527vw + 503.4px), 772.9px); } .rd-tag-label { font-size: clamp(19px, calc(0.31vw + 14.54px), 22.48px); } .rd-tag-chip { font-size: clamp(16px, calc(0.257vw + 12.3px), 18.88px); padding: clamp(7px, calc(0.1125vw + 5.38px), 8.26px) clamp(14px, calc(0.225vw + 10.76px), 16.52px); } /* --------------------------------------------------------------------------- Bottom SEO article ($txt['bottom_seo_article']['index']) The content (headings, paragraphs, lists, links) is preserved verbatim for SEO; we just restyle it to the new theme and hide the old Semantic ToC accordion (the new design omits it). --------------------------------------------------------------------------- */ .rd-article { color: var(--text-body); font-size: 15px; line-height: 1.7; } /* Neutralise the article's own Semantic "inverted segment" wrapper so it sits flat inside our Feature-BG panel. */ .rd-article .ui.inverted.segment, .rd-article .ui.segment { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* Hide the old Table-of-Contents accordion (not in the new design). */ .rd-article .ui.accordion { display: none !important; } .rd-article h2 { color: var(--text-head); font-weight: 800; font-size: 1.5rem; line-height: 1.25; margin: 1.75rem 0 0.75rem; } .rd-article h2:first-child { margin-top: 0; } .rd-article h3 { color: var(--text-head); font-weight: 700; font-size: 1.2rem; margin: 1.25rem 0 0.5rem; } .rd-article p { margin: 0 0 0.9rem; } .rd-article strong { color: var(--text-head); font-weight: 700; } .rd-article ul, .rd-article ol { margin: 0 0 1rem; padding-left: 1.25rem; } .rd-article ul { list-style: disc; } .rd-article ol { list-style: decimal; } .rd-article li { margin: 0.35rem 0; } .rd-article a { color: var(--accent); text-decoration: none; font-weight: 600; } .rd-article a:hover { text-decoration: underline; } .rd-article img { border-radius: 6px; max-width: 320px; height: auto; margin: 0.5rem 0 1rem; display: block; } @media (min-width: 768px) { .rd-article img { float: right; margin: 0.25rem 0 1rem 1.75rem; } } /* Copy-IP "copied" state */ .copy-btn.is-copied { background-color: var(--accent); } /* --------------------------------------------------------------------------- Go-to-page popover, opened from the "…" gap in the pagination bar. Written as plain CSS on the design tokens rather than Tailwind utilities, because the markup is built in JS at runtime — a compiled Tailwind build (see README TODO 1) only scans the source files, so utility classes created in script would be purged. --------------------------------------------------------------------------- */ .rd-pg-jump { cursor: pointer; background: none; border: 0; font: inherit; line-height: inherit; } .rd-pg-pop { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--card-border); border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); } .rd-pg-pop input { width: 7em; height: 38px; padding: 0 10px; background: var(--splash-black); border: 1px solid var(--feature-border); border-radius: 4px; color: var(--text-head); font: inherit; font-size: 16px; /* Hide the number spinners — they crowd a field this narrow. */ -moz-appearance: textfield; } .rd-pg-pop input::-webkit-outer-spin-button, .rd-pg-pop input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rd-pg-pop input::placeholder { color: var(--text-subtle); } .rd-pg-pop input:focus { outline: 0; border-color: var(--accent); } .rd-pg-pop.is-invalid input { border-color: var(--accent); background: rgba(226, 77, 102, .12); } .rd-pg-pop button { height: 38px; padding: 0 16px; background: var(--accent); border: 0; border-radius: 4px; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s; } .rd-pg-pop button:hover { background: var(--accent-border); } /* =========================================================================== SUB-PAGES (blog + tools) =========================================================================== */ /* --------------------------------------------------------------------------- Blog article body (.rd-prose) The stored article_body is real HTML written for the old theme:
,
, , plus its own inline