/* Footer component — signup band, link columns, wordmark, bottom bar and the information/policy links, plus the home-page footer variant (.footer-preview: footer-home.html) with its viewport-fill and mobile layouts. Moved verbatim from the former monolithic style.css (Phase 1: structure only, no rule was edited). */ /* on the accent-orange footer-signup band an accent-colored em would vanish into the background, so it swaps to a light tint there instead of losing the italic treatment altogether. */ .footer-signup .section-title em{color:var(--surface);} /* footer — scoped to .site-footer (homepage only) so it can't collide with the plain footer{} rule article pages use further down. Dark background gives the page a proper close instead of fading out on the same cream tone everything above it already used. */ .site-footer{background:var(--panel-dark);color:rgba(255,255,255,.85);border-top:2px solid var(--accent);overflow:hidden;} /* The one section on the page that uses the brand accent as a full background rather than a small detail — reserved for this because it's the site's clearest call-to-action (subscribe), so the bold treatment reads as deliberate rather than decorative. */ .footer-signup{background:var(--accent);padding:56px 0;} /* Capped max-width so the label and the form stay visually related on wide screens — without this, space-between across the full 1400px .wrap pushes the form far to the right, disconnected from the label it belongs with. */ .footer-signup-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;} .footer-signup .section-label{color:#FCFAF7;margin-bottom:14px;} .footer-signup .section-label::before{background:var(--panel-dark);} .footer-signup .section-title{color:var(--panel-dark);font-size:clamp(20px,2.4vw,28px);max-width:22ch;} .signup-form{display:flex;border:1px solid var(--panel-dark);flex-shrink:0;background:#FCFAF7;} .signup-form input{background:transparent;border:none;padding:14px 18px;color:var(--panel-dark);font-family:var(--sans);font-size:14px;min-width:220px;} .signup-form input::placeholder{color:rgba(36,36,36,.45);} .signup-form input:focus{outline:none;} .signup-form .btn{border:none;border-left:1px solid var(--panel-dark);padding:14px 24px;background:var(--panel-dark);color:#FCFAF7;} .signup-form .btn:hover{background:#3a3a3a;} .footer-top{padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;border-bottom:1px solid rgba(255,255,255,.12);} .site-footer .logo{margin-bottom:22px;} /* The uploaded logo is drawn mostly in dark charcoal (only one small accent path is orange), so on the dark footer it would have almost no contrast. brightness(0) invert(1) renders it as a white silhouette instead — the trade-off is it loses the orange accent detail here; a dedicated light/reversed logo file would preserve that if one becomes available. */ .footer-logo .logo-mark{height:58px;filter:brightness(0) invert(1);opacity:.95;} .footer-brand p{font-family:var(--serif);font-size:15px;line-height:1.65;color:rgba(255,255,255,.55);max-width:34ch;} .footer-col h5{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:20px;} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;} .footer-col a{font-size:14.5px;color:rgba(255,255,255,.55);transition:color .2s ease;} .footer-col a:hover{color:var(--accent);} /* giant low-opacity wordmark — a quiet closing flourish rather than decoration for its own sake; common in editorial mastheads as a "back cover" moment. Kept faint so it reads as texture, not noise. */ /* overflow:hidden is a hard guarantee this can never bleed past the same 48px inset every other row in the footer respects — unlike small text elsewhere, this is large fluid type with nowrap, so it's the one element that could actually overflow its own .wrap padding on some viewport widths without this. */ .footer-word{overflow:hidden;font-family:var(--sans);font-weight:700;font-size:clamp(56px,12vw,160px);line-height:1;color:rgba(255,255,255,.05);letter-spacing:-0.03em;text-align:center;padding-top:8px;white-space:nowrap;user-select:none;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px;padding-top:28px;padding-bottom:40px;} @media (max-width:980px){ /* Tablet footer: previously split into a full-width logo row above an even 3-column row of links — technically balanced, but it made the top row read as mostly empty space (a small logo alone against the full row width) sitting above a much busier row. At 912px there's still room to run it as a single row like desktop, just with narrower columns — one cohesive band instead of two mismatched-weight rows stacked on each other. */ .footer-signup-inner{flex-direction:column;align-items:flex-start;} .signup-form{width:100%;} .signup-form input{min-width:0;flex:1;} } @media (max-width:560px){ /* Mobile footer: a single stacked column made every link list run the full screen height, and left-aligning everything under a centered hero above it read as unfinished. Two columns side by side (Explore/Follow) roughly halves that height, the logo and Journal list are centered as their own full-width rows, and link text is centered within each column so the whole block reads as one composed unit rather than a left-hung list dump. */ .footer-top{grid-template-columns:1fr 1fr;gap:36px 20px;text-align:center;} .footer-brand{grid-column:1/-1;display:flex;justify-content:center;} .footer-top .footer-col:last-child{grid-column:1/-1;} .footer-col ul{align-items:center;} .footer-bottom{justify-content:center;text-align:center;} } footer{padding:64px 0 40px;} /* Footer bottom bar — copyright on the left, information & policy links on the right, separated by thin pipes. A
(not