absorbs any slack space above the footer. */ body:has(> [data-partial="public-footer-lite"]) { /* +280px keeps the lite footer just below the fold on app shells with short content (saved-files with 1-2 rows, etc.) so it's not in the initial viewport.

absorbs the slack. */ min-height: calc(100vh + 280px); display: flex; flex-direction: column; } body:has(> [data-partial="public-footer-lite"]) > main, body:has(> [data-partial="public-footer-lite"]) > .shell { flex: 1 0 auto; } body:has(> [data-partial="public-footer-lite"]) > [data-partial="public-footer-lite"] { margin-top: auto; flex-shrink: 0; } /* ── Strip ──────────────────────────────────────────────────────────── Single-row footer, same layout at every viewport width. Used on auth pages where the full .footer--brand block would bloat a single-screen surface. Wraps gracefully when the viewport narrows; never collapses into a stacked multi-row layout. ───────────────────────────────────────────────────────────────────── */ .footer--strip { background: #1C1C1E; color: #AEAEB2; padding: 14px 24px; } .footer--strip a { color: inherit; text-decoration: none; } .footer--strip a:hover { color: #F5F5F7; } .footer__strip-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; } .footer--strip .footer__brand img { height: 18px; display: block; } .footer--strip .footer__rtco { height: 20px; width: auto; display: block; } .footer--strip .footer__rsm img { height: 14px; display: block; /* Force monochromatic white to match the strip's mono aesthetic. */ filter: brightness(0) invert(1); opacity: 0.75; transition: opacity 150ms ease; } .footer--strip .footer__rsm:hover img { opacity: 1; } .footer--strip .footer__copy { margin: 0; color: #636366; flex: 1 1 200px; } .footer--strip .footer__legal { display: inline-flex; gap: 12px; color: #636366; } /* ── Full ────────────────────────────────────────────────────────────── */ .footer--full { background: #1D1D1F; color: #F5F5F7; padding: 64px 24px 32px; } .footer--full .footer__inner { max-width: 1200px; margin: 0 auto; } .footer--full .footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer--full .footer__brand-block img { height: 28px; margin-bottom: 16px; } .footer--full .footer__story { font-size: 13px; line-height: 1.65; color: #A1A1A6; max-width: 32ch; } .footer--full .footer__col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #FFF; font-weight: 600; margin-bottom: 16px; } .footer--full .footer__col ul li { list-style: none; margin-bottom: 10px; } .footer--full .footer__col a { font-size: 13px; color: #A1A1A6; transition: color .15s ease; } .footer--full .footer__col a:hover { color: #FFF; text-decoration: none; } .footer--full .footer__certs { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer--full .footer__cert { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #A1A1A6; } .footer--full .footer__cert img { height: 32px; opacity: 0.85; } .footer--full .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; } .footer--full .footer__copy { font-size: 12px; color: #86868B; line-height: 1.6; } .footer--full .footer__copy strong { color: #F5F5F7; font-weight: 600; } .footer--full .footer__social { display: flex; gap: 16px; } .footer--full .footer__social a { font-size: 12px; color: #A1A1A6; } @media (max-width: 900px) { .footer--full .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer--full .footer__top { grid-template-columns: 1fr; gap: 32px; } } /* ── Brand (dark, marketing) ────────────────────────────────────────── */ .footer--brand { background: #1C1C1E; padding: 80px 0 48px; box-shadow: inset 0 8px 16px rgba(0,0,0,0.4); color: #AEAEB2; } .footer--brand .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .footer--brand a { color: inherit; text-decoration: none; } .footer--brand a:hover { text-decoration: none; } .footer--brand .footer__brand { margin-bottom: 32px; text-align: center; } .footer--brand .footer__brand-logo { margin-bottom: 20px; } .footer--brand .footer__brand-logo img { height: 52px; width: auto; display: inline-block; } .footer--brand .footer__brand-text { font-size: 15px; color: #AEAEB2; line-height: 1.7; max-width: 560px; margin: 0 auto; } .footer--brand .footer__separator { height: 1px; background: #38383A; margin: 40px auto; max-width: 640px; } .footer--brand .footer__rtco-logo { margin: 0 auto 20px; width: 100%; max-width: 1280px; text-align: center; } .footer--brand .footer__rtco-logo img { height: 44px; width: auto; max-width: 100%; display: inline-block; } .footer--brand .footer__rtco-body { display: flex; flex-direction: column; gap: 4px; align-items: stretch; justify-content: flex-start; margin: 0 auto 34px; max-width: 1280px; } .footer--brand .footer__rtco-text { font-size: 13px; color: #636366; line-height: 1.6; width: 100%; text-align: justify; text-justify: inter-word; } .footer--brand .footer__certs { display: flex; align-items: center; justify-content: center; gap: 24px; } .footer--brand .footer__certs a { display: block; flex-shrink: 0; } .footer--brand .footer__certs a:first-child img { height: 50px; width: auto; } .footer--brand .footer__certs a:last-child img { height: 108px; width: auto; } .footer--brand .footer__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; margin-bottom: 48px; } .footer--brand .footer__col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #AEAEB2; margin-bottom: 16px; } .footer--brand .footer__col-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #636366; margin-top: 20px; margin-bottom: 10px; } .footer--brand .footer__col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; } .footer--brand .footer__col li { list-style: none; } .footer--brand .footer__col a { font-size: 14px; color: #AEAEB2; transition: color 150ms; } .footer--brand .footer__col a:hover { color: #F5F5F7; } .footer--brand .footer__address { font-size: 14px; color: #AEAEB2; font-style: normal; line-height: 1.7; margin-bottom: 16px; } .footer--brand .footer__contact-link { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #AEAEB2; margin-bottom: 8px; transition: color 150ms; } .footer--brand .footer__contact-link:hover { color: #F5F5F7; } .footer--brand .footer__contact-link svg { width: 14px; height: 14px; flex-shrink: 0; color: #636366; } .footer--brand .footer__social { display: flex; gap: 8px; margin-top: 20px; } .footer--brand .footer__social a { width: 32px; height: 32px; border-radius: var(--radius-md, 8px); border: 1px solid #48484A; display: flex; align-items: center; justify-content: center; color: #AEAEB2; transition: all 150ms; } .footer--brand .footer__social a:hover { color: #F5F5F7; border-color: #636366; } .footer--brand .footer__rfp-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 24px; border: 1px solid #636366; border-radius: var(--radius-md, 8px); color: #F5F5F7; font-size: 14px; font-weight: 600; transition: all 150ms; } .footer--brand .footer__rfp-btn svg { width: 14px; height: 14px; } .footer--brand .footer__rfp-btn:hover { color: #F5F5F7; border-color: #AEAEB2; background: rgba(255,255,255,0.05); } .footer--brand .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 0; border-top: 1px solid #2C2C2E; flex-wrap: wrap; } .footer--brand .footer__bottom p { font-size: 12px; color: #636366; margin: 0; } .footer--brand .footer__bottom-links { display: flex; gap: 16px; } .footer--brand .footer__bottom-links a { font-size: 12px; color: #636366; transition: color 150ms; } .footer--brand .footer__bottom-links a:hover { color: #AEAEB2; } @media (max-width: 900px) { .footer--brand .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } } @media (max-width: 768px) { .footer--brand .footer__rtco-logo, .footer--brand .footer__rtco-body { max-width: 560px; } } @media (max-width: 640px) { .footer--brand .footer__rtco-logo img { height: 32px; } .footer--brand .footer__rtco-body { flex-direction: column; gap: 12px; align-items: flex-start; } } @media (max-width: 480px) { .footer--brand .footer__grid { grid-template-columns: 1fr; } } /* ── Module (dark to match the rest of the footer system) ────────────── */ .footer--module { background: #1D1D1F; border-top: 1px solid rgba(255,255,255,0.06); padding: 24px 24px 28px; font-size: 12px; line-height: 1.65; color: #8E8E93; } .footer--module .footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; } .footer--module .footer__copy { color: #F5F5F7; font-weight: 600; } .footer--module .footer__legal { color: #B8B8BD; } .footer--module .footer__legal strong { color: #F5F5F7; font-weight: 600; } .footer--module .footer__rsm { color: #8E8E93; }