/* ================================================================== FOOTER Custom 4-column info block, newsletter form, and disclaimer strip, injected via overrides/partials/footer.html. Extracted out of extra.css into its own file — nothing here is used outside the footer, so it lives on its own. ================================================================== */ /* ---- 4-column footer info block ---- */ .ctc-footer-columns { background-color: var(--md-footer-bg-color, #10151c); padding: 3rem 0 2rem; } .ctc-footer-columns__inner { display: grid; /* TheoChem | Developed By | Last Updated | Newsletter */ grid-template-columns: 300px 170px 170px 360px; column-gap: 5.25rem; max-width: 70rem; /* was 61rem */ padding: 0 2rem; align-items: start; } /* FIX: grid columns declared with a fixed px width (or 1fr on the mobile breakpoints below) still won't let their content shrink below its own intrinsic width by default. The newsletter box has a fixed width, so without this, its column gets forced wider than the viewport instead of shrinking — combined with `overflow-x: clip` on / (see extra.css), that overflow was being clipped rather than made scrollable, which is why the newsletter box was disappearing off-screen on mobile with no way to scroll to it. This, together with the width fix on .newsletter-section below, is what actually fixes it. */ .ctc-footer-columns__inner > .ctc-footer-col { min-width: 0; } .ctc-footer-columns__inner > .ctc-footer-col:first-child .ctc-footer-col__text { font-size: 0.70rem; line-height: 1.8; max-width: 300px; } .ctc-footer-col__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 0.75rem; } .ctc-footer-col__text { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin: 0; } .ctc-footer-col__list { list-style: none; margin: 0; padding: 0; } .ctc-footer-col__list li { margin-bottom: 0.5rem; margin-top: -0.50rem; } .ctc-footer-col__list a { font-size: 0.775rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; } .ctc-footer-col__list a:hover { color: var(--brand-accent); } .ctc-footer-newsletter { align-self: start; justify-self: end; } /* ---- Newsletter form ---- */ .newsletter-section{ /* FIX: was a fixed `width: 420px`, wider than its own 360px grid column even on desktop, and impossible to shrink on mobile. `width: 100%` lets it fill whatever its grid column actually is at any screen size, capped at the original 420px so it never grows unexpectedly large either. */ width: 100%; max-width: 420px; box-sizing: border-box; padding:20px 22px; border-radius:12px; background:rgb(39,42,49); margin-bottom:0.85rem } .newsletter-section h2 { font-size: 0.90rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 0.75rem; } .newsletter-section p { margin: 0 0 1rem; font-size: 0.80rem; line-height: 1.6; /* FIX: was var(--md-default-fg-color--light), which follows the *page's* light/dark scheme. This box's background stays dark in both schemes, so in light mode that variable resolved to a dark, page-appropriate gray — dark text on a dark box. Use the footer-scoped variable instead, same as .ctc-footer-col__text and .ctc-footer-disclaimer__text below, which both already stay light in both schemes for exactly this reason. */ color: var(--md-footer-fg-color--light, rgba(255, 255, 255, 0.7)); } .newsletter-form{ display:flex; align-items:center; /* FIX: lets the button drop below the input instead of forcing the row wider than its (now-shrinkable) container on narrow screens. */ flex-wrap: wrap; gap: 0.5rem; } .newsletter-form input{ padding:7px 10px; font-size:0.85rem; /* FIX: was a fixed `width: 260px`, which doesn't shrink on narrow screens. flex:1 fills the available space in the row instead, down to whatever room is actually left. */ flex: 1; min-width: 0; } .newsletter-form button{ padding:7px 14px; border:none; background:#1976d2; color:white; font-size:0.85rem; font-weight:600; /* FIX: was `0 6px 6px 0` (rounded only on the side attached to the input), which only makes sense when the two sit flush on one line. Now that the row can wrap on narrow screens, a uniform radius looks correct either way. */ border-radius: 6px; cursor:pointer; } .newsletter-message { margin-top: 0.75rem; font-size: 0.82rem; line-height: 1.5; color: #7cb342; } /* ---- Disclaimer strip ---- */ .ctc-footer-disclaimer { border-top: 1px solid rgba(255, 255, 255, 0.1); } .ctc-footer-disclaimer__inner { padding: 1rem 0.8rem; } .ctc-footer-disclaimer__text { font-size: 0.7rem; line-height: 1.5; color: var(--md-footer-fg-color--light, rgba(255, 255, 255, 0.7)); margin-top: 0; } .ctc-footer-disclaimer__link { display: inline-block; margin-left: 0.4rem; white-space: nowrap; color: var(--md-footer-fg-color, #fff); text-decoration: underline; } .ctc-footer-disclaimer__link:hover { color: var(--md-accent-fg-color, #7c4dff); } /* ---- Responsive ---- */ @media screen and (max-width: 44.9375em) { .ctc-footer-columns__inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } } @media screen and (max-width: 30em) { .ctc-footer-columns__inner { grid-template-columns: 1fr; } }