/* * Connecter Suite footer — SHARED, page-agnostic. * * The footer partial (DesktopApp/templates/footer.htm) renders the `suite_footer` * block — `

` inside the shared `

` * — whenever a module passes `variant:'suite'` to getPartial('footer', …). * * This sheet styles that block WITHOUT depending on any page's class, by * keying the wrapper off `:has(.footer-suite)`. Load it LAST in a decorator's * (after the page's legacy footer CSS) and pass `variant:'suite'` in the * module. Pages currently wired: Home (server), Aistudio (aistudio), Guide/Blog/ * Credits (index). * * NOTE: the desktop-app (download-redesign.css, body.dc-download) and pricing * (pricing-redesign.css, body.cnnctr-pricing) pages carry their own copies of * this footer and do NOT load this sheet — they can be migrated here later. * * Tokens are hardcoded (these pages have no `.dc-redesign` var scope). */ /* ── Wrapper: blue aurora bg + watermark + padding. `:has(.footer-suite)` limits it to footers actually rendering the suite block, so home_footer/page_footer footers on other routes are untouched. Double-class-equivalent specificity (0,2,0) beats the legacy `footer{}` / `.x footer` rules; loaded last too. ── */ .dl-footer:has(.footer-suite) { position: relative; z-index: 1; overflow: hidden; margin: 0; min-height: 0; padding: 64px 48px 120px; background: url(../../../img/cnnctr/download/footer-bg.png) no-repeat center center; background-size: cover; color: #cfd6ee; } /* Large faint "Connecter" wordmark clipped along the bottom edge. */ .dl-footer:has(.footer-suite)::after { content: "Connecter"; position: absolute; left: 0; right: 0; bottom: -.18em; z-index: 0; text-align: center; font-family: "Rubik", "LINE Seed JP", sans-serif; font-weight: 700; font-size: 22vw; line-height: 1; color: #fff; opacity: .06; pointer-events: none; user-select: none; } /* ── 2×2 grid: logo / links · divider · copyright / social ─────────────────── */ .dl-footer .footer-suite { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 32px; row-gap: 28px; } .dl-footer .footer-suite .fs-logo-link { display: inline-block; justify-self: start; } .dl-footer .footer-suite .fs-logo { height: 72px; width: auto; display: block; } .dl-footer .footer-suite .fs-links, .dl-footer .footer-suite .fs-social { justify-self: end; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; } /* Reset any legacy `footer ul li{border-left…;padding…}` pipe separators (present in new_style.css and style.css). */ .dl-footer .footer-suite .fs-links li, .dl-footer .footer-suite .fs-social li { border: 0; padding: 0; margin: 0; } .dl-footer .footer-suite .fs-divider { grid-column: 1 / -1; height: 1px; border: 0; margin: 0; background: rgba(255, 255, 255, .15); } .dl-footer .footer-suite .fs-links a { font-family: "LINE Seed JP", "Nunito Sans", Arial, sans-serif; color: #fff; opacity: .9; font-size: 15px; font-weight: 400; text-decoration: none; white-space: nowrap; border: 0; } .dl-footer .footer-suite .fs-links a:hover, .dl-footer .footer-suite .fs-links a:focus { opacity: 1; color: #fff; } .dl-footer .footer-suite .fs-copyright { font-family: "LINE Seed JP", "Nunito Sans", Arial, sans-serif; color: #cfd6ee; font-size: 13px; font-weight: 400; } .dl-footer .footer-suite .fs-social img { height: 24px; width: auto; display: block; /* icons are inline-extracted SVG (fill=currentColor) → render black as ; whiten uniformly for the blue bg. */ filter: brightness(0) invert(1); } /* ── Mobile: single column, centered, doubled group gap, divider full-width ── */ @media screen and (max-width: 900px) { .dl-footer:has(.footer-suite) { padding: 48px 20px 96px; } .dl-footer .footer-suite { grid-template-columns: 1fr; row-gap: 40px; text-align: center; } .dl-footer .footer-suite .fs-logo-link, .dl-footer .footer-suite .fs-copyright, .dl-footer .footer-suite .fs-links, .dl-footer .footer-suite .fs-social { justify-self: center; } .dl-footer .footer-suite .fs-links, .dl-footer .footer-suite .fs-social { flex-wrap: wrap; justify-content: center; gap: 20px; } } @media screen and (max-width: 480px) { .dl-footer:has(.footer-suite) { padding: 40px 16px 72px; } .dl-footer .footer-suite .fs-logo { height: 60px; } .dl-footer .footer-suite .fs-social { gap: 18px; } .dl-footer .footer-suite .fs-social a { display: inline-flex; padding: 6px; margin: -6px; } }