/** * SF Footer Uno — front-end styles. * * Dynamic values (colours, sizes, section gap) arrive as CSS custom properties set inline on * .sffu-footer, so this file stays static and cacheable. Progressive enhancement: * if delayed by a cache the footer shows unstyled-but-visible (it is never hidden without JS). */ .sffu-footer { position: relative; overflow: hidden; box-sizing: border-box; background: var(--sffu-bg, #000); color: var(--sffu-text, #fff); padding: 6rem 2.5rem 3rem; font-family: inherit; } .sffu-footer * { box-sizing: border-box; } .sffu-inner { position: relative; z-index: 2; /* the footer content sits ABOVE the shapes canvas (z-index:1) */ width: 100%; max-width: 86rem; margin: 0 auto; } /* --- Top: tagline (left) + columns (right) -------------------------------- */ .sffu-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 3rem; align-items: start; } .sffu-tagline { margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; color: var(--sffu-text, #fff); } .sffu-cols { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; } /* Each filled column takes an equal share, so 1/2/3 menus fill the row with no empty columns. */ .sffu-col { flex: 1 1 0; min-width: 140px; } .sffu-col-title { margin-bottom: 0.9rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sffu-muted, #b6b5b2); } .sffu-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .sffu-menu a { display: inline-block; color: var(--sffu-link, #fff); font-size: 0.95rem; line-height: 1.4; font-weight: 500; text-decoration: none; position: relative; transition: color 0.2s ease; } .sffu-menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .sffu-menu a:hover { color: var(--sffu-hover, #628ad1); } .sffu-menu a:hover::after { transform: scaleX(1); } /* --- Bottom: logo (left) + legal/credit (right) --------------------------- */ /* Same 2-col grid as .sffu-top so the legal text lines up under the columns. */ .sffu-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem 3rem; align-items: end; margin-top: var(--sffu-gap, 48px); /* configurable distance between the top block and the bottom row */ } .sffu-bottom-left { display: flex; align-items: flex-end; } .sffu-bottom-right { display: flex; flex-direction: column; gap: 0.5rem; } .sffu-logo { display: inline-block; flex: 0 0 auto; max-width: var(--sffu-logo-w, 240px); line-height: 0; } .sffu-logo img { display: block; width: 100%; max-width: 100%; height: auto; } .sffu-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.35rem 1.25rem; font-size: 0.875rem; } .sffu-copy { color: var(--sffu-muted, #b6b5b2); } .sffu-legal-link { color: var(--sffu-muted, #b6b5b2); text-decoration: none; transition: color 0.2s ease; } .sffu-legal-link:hover { color: var(--sffu-text, #fff); } /* Credit / "Designed by …" line under the copyright row. */ .sffu-credit { font-size: 0.8125rem; color: var(--sffu-muted, #b6b5b2); } .sffu-credit-link { color: var(--sffu-muted, #b6b5b2); text-decoration: none; transition: color 0.2s ease; } a.sffu-credit-link:hover { color: var(--sffu-text, #fff); } /* --- Behind-content footer reveal (CodePen "fixed footer reveal") --------- */ /* JS pins the footer BEHIND the page (position:fixed; z-index:-1), gives a bottom margin = the footer height, and stops body→canvas background propagation so the opaque body masks the footer until that bottom gap. The footer stays hidden until the body has fully scrolled past, then the content slides up off the stationary footer and uncovers it (no overlap, no blank gap). Without JS / reduced motion the .sffu-uncover class is never added → footer stays static in normal flow at the bottom (fully visible). */ .sffu-footer.sffu-uncover { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; /* behind the page content; masked by the opaque body, shown only in the bottom gap */ } /* --- Animated shapes canvas (fills the whole footer background, BEHIND content) --- */ .sffu-shapes { position: absolute; inset: 0; z-index: 1; /* behind .sffu-inner (z-index:2), in front of the footer background */ display: block; width: 100%; height: 100%; pointer-events: none; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 991px) { .sffu-footer { padding: 4rem 1.5rem 2.5rem; } .sffu-top { grid-template-columns: 1fr; gap: 2rem; } .sffu-tagline { font-size: 2.25rem; } .sffu-cols { gap: 2rem 1.5rem; } .sffu-bottom { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; } /* keeps the configurable --sffu-gap */ /* Mobile: centre everything in the footer. */ .sffu-tagline { text-align: center; } .sffu-cols { justify-content: center; } .sffu-col { flex: 1 1 40%; align-items: center; text-align: center; } .sffu-col-title { text-align: center; } .sffu-menu { align-items: center; } .sffu-bottom { justify-items: center; } .sffu-bottom-left, .sffu-bottom-right { align-items: center; } .sffu-logo { margin-left: auto; margin-right: auto; } .sffu-legal { justify-content: center; text-align: center; } .sffu-credit { text-align: center; } } @media (max-width: 600px) { .sffu-col { flex-basis: 100%; } /* stack the columns one per row */ .sffu-legal { gap: 0.35rem 1rem; } } /* --- Reduced motion: hide the animated shapes (also gated in JS) ---------- */ @media (prefers-reduced-motion: reduce) { .sffu-shapes { display: none; } }