/* ════════════════════════════════════════════════════════════════════ Tenderly blog footer — aligned to the tenderly.co (Astro) site footer. Theme-aware: LIGHT tokens by default, dark overrides under [data-theme="dark"] (the blog toggles data-theme on ). Namespaced under .tndr-footer with locally-scoped custom properties so it never collides with Bootstrap. Sharp corners (brand). ════════════════════════════════════════════════════════════════════ */ .tndr-footer { /* LIGHT (default — matches website [data-theme="light"] .footer #EDEDEA) */ --tf-bg: #EDEDEA; --tf-txt-1: #0C0C0F; --tf-txt-2: #3A3A42; --tf-txt-3: #6E6E78; --tf-txt-4: #9A9AA4; --tf-pur: #6837EC; --tf-pur-2: #5228CC; --tf-pur-3: #6837EC; --tf-border-1: rgba(12,12,15,0.08); --tf-border-2: rgba(12,12,15,0.13); --tf-border-3: rgba(12,12,15,0.20); --tf-card: #FFFFFF; --tf-row: #FFFFFF; --tf-social: rgba(0,0,0,0.04); --tf-social-hover: rgba(0,0,0,0.07); --tf-input-focus: rgba(104,55,236,0.05); --tf-ghost-hover: rgba(0,0,0,0.04); --tf-btn2-bg: #FFFFFF; /* Explorer CTA — opaque white in light */ --tf-btn2-fg: #0C0C0F; --tf-btn2-hover: #F4F4F1; --tf-scrim: rgba(237,237,234,0.82); /* readability scrim over footer grid */ --tf-pad: 32px; --tf-max: 1280px; --tf-mono: 'JetBrains Mono', ui-monospace, monospace; --tf-sans: 'DM Sans', system-ui, sans-serif; --tf-body: 'Inter', system-ui, -apple-system, sans-serif; position: relative; isolation: isolate; background: var(--tf-bg); color: var(--tf-txt-2); padding: 0 0 32px; margin-top: 80px; overflow: hidden; border-top: 1px solid var(--tf-border-1); } [data-theme="dark"] .tndr-footer { background: #08080A; /* beat legacy [data-theme=dark] footer{background:#000} */ border-top: 1px solid rgba(255,255,255,0.06); /* beat legacy 2px #313347 top border */ --tf-bg: #08080A; --tf-txt-1: #F5F5F7; --tf-txt-2: #A8A8B0; --tf-txt-3: #6E6E78; --tf-txt-4: #48484F; --tf-pur: #8F73FF; --tf-pur-2: #6837EC; --tf-pur-3: #CCBDFF; --tf-border-1: rgba(255,255,255,0.06); --tf-border-2: rgba(255,255,255,0.10); --tf-border-3: rgba(255,255,255,0.14); --tf-card: #101016; --tf-row: #1C1C24; --tf-social: rgba(255,255,255,0.06); --tf-social-hover: rgba(255,255,255,0.12); --tf-input-focus: #20202A; --tf-ghost-hover: rgba(255,255,255,0.03); --tf-btn2-bg: #000000; /* Explorer CTA — opaque black in dark */ --tf-btn2-fg: #F5F5F7; --tf-btn2-hover: #16161C; --tf-scrim: rgba(8,8,10,0.82); } /* Animated grid-fx canvas backdrop (drawn by grid-fx.js — follows theme) */ .tndr-footer .tndr-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 100%); } .tndr-footer-inner { position: relative; z-index: 1; max-width: var(--tf-max); margin: 0 auto; padding: 0 var(--tf-pad); } /* ── Meta / CTA band ─────────────────────────────────────────────── */ .tndr-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding: 56px 0 36px; } .tndr-footer-meta-left { flex: 0 1 560px; background: var(--tf-scrim); /* scrim so CTA + lede stay readable over the grid */ padding: 18px 22px; } .tndr-footer-meta-title { font-family: var(--tf-sans); font-size: clamp(24px, 2.6vw, 42px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--tf-txt-1); max-width: 560px; } .tndr-footer-meta-sub { font-family: var(--tf-body); font-size: 16px; line-height: 1.5; color: var(--tf-txt-2); margin: 14px 0 0; max-width: 520px; text-wrap: pretty; } .tndr-footer-meta-right { display: flex; gap: 10px; flex-shrink: 0; align-items: center; } /* ── Buttons (sharp corners — brand) ─────────────────────────────── */ .tndr-footer .tndr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--tf-sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; line-height: 1.1; padding: 11px 18px; border-radius: 0 !important; border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform 240ms cubic-bezier(.2,.7,.3,1), box-shadow 240ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .tndr-footer .tndr-btn-ghost { background: var(--tf-btn2-bg); /* opaque: white (light) / black (dark) */ color: var(--tf-btn2-fg); border-color: var(--tf-border-2); } .tndr-footer .tndr-btn-ghost:hover { border-color: var(--tf-border-3); background: var(--tf-btn2-hover); } .tndr-footer .tndr-btn-primary { background: var(--tf-pur); border-color: var(--tf-pur); color: #fff; } .tndr-footer .tndr-btn-primary:hover { background: var(--tf-pur-2); border-color: var(--tf-pur-2); transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(104,55,236,0.45); color: #fff; } /* ── Newsletter (left) + link columns (right) ────────────────────── */ .tndr-footer-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 56px; padding: 38px 0 40px; border-top: 1px solid var(--tf-border-1); border-bottom: 1px solid var(--tf-border-1); align-items: start; } /* Newsletter card (opaque) */ .tndr-footer-newsletter { position: relative; padding: 26px; background: var(--tf-card); border: 1px solid var(--tf-border-2); overflow: hidden; } .tndr-footer-newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,115,255,0.5), transparent); } .tndr-footer-newsletter-eyebrow { font-family: var(--tf-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tf-pur); margin-bottom: 14px; } .tndr-footer-newsletter-title { font-family: var(--tf-sans); font-size: 22px; font-weight: 600; color: var(--tf-txt-1); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; } .tndr-footer-newsletter-copy { font-family: var(--tf-body); font-size: 13px; line-height: 1.55; color: var(--tf-txt-3); margin: 0 0 16px; max-width: 300px; text-wrap: pretty; } .tndr-footer-newsletter-row { display: flex; gap: 6px; background: var(--tf-row); border: 1px solid var(--tf-border-2); padding: 4px; transition: border-color 150ms, background 150ms; } .tndr-footer-newsletter-row:focus-within { border-color: rgba(104,55,236,0.55); background: var(--tf-input-focus); } .tndr-footer-newsletter-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--tf-txt-1); font: 500 13px/1.4 var(--tf-body); padding: 8px 10px; } .tndr-footer-newsletter-input::placeholder { color: var(--tf-txt-4); } .tndr-footer-newsletter-btn { background: var(--tf-pur); color: #fff; border: 0; padding: 0 16px; font: 600 13px/1 var(--tf-sans); cursor: pointer; white-space: nowrap; transition: background 150ms, transform 150ms; } .tndr-footer-newsletter-btn:hover { background: var(--tf-pur-2); } .tndr-footer-newsletter-btn:active { transform: scale(0.98); } .tndr-footer-newsletter-msg { font-family: var(--tf-body); font-size: 12px; color: var(--tf-txt-3); margin: 8px 0 0; min-height: 1em; } /* Link columns */ .tndr-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; } .tndr-footer-col-title { font-family: var(--tf-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tf-txt-3); font-weight: 500; margin: 0 0 16px; } .tndr-footer-col-list { list-style: none; margin: 0; padding: 0; } .tndr-footer-col-list li { margin: 0; } .tndr-footer-col-list a { display: block; font-family: var(--tf-body); font-size: 14px; line-height: 1.4; color: var(--tf-txt-1); padding: 6px 0; text-decoration: none; transition: color 150ms; } .tndr-footer-col-list a:hover { color: var(--tf-pur); } /* ── Bottom bar ──────────────────────────────────────────────────── */ .tndr-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 24px; } .tndr-footer-bottom-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .tndr-footer-logo { display: inline-flex; align-items: center; } .tndr-footer-logo img { display: block; opacity: 0.95; height: auto; } /* Theme-aware logo: black wordmark on the light footer, white on the dark footer */ .tndr-footer .tndr-logo-light { display: block; } .tndr-footer .tndr-logo-dark { display: none; } [data-theme="dark"] .tndr-footer .tndr-logo-light { display: none; } [data-theme="dark"] .tndr-footer .tndr-logo-dark { display: block; } .tndr-footer-copy { font-family: var(--tf-mono); font-size: 12px; color: var(--tf-txt-3); } /* "All systems operational" status pill — matches the website footer */ .tndr-footer-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px !important; /* rounded pill (beats the global sharp-corner rule) */ background: rgba(62,213,152,0.10); border: 1px solid rgba(62,213,152,0.25); color: #3A7A5A; font-family: var(--tf-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background 150ms, border-color 150ms; } .tndr-footer-status:hover { background: rgba(62,213,152,0.16); border-color: rgba(62,213,152,0.4); } .tndr-status-dot { width: 6px; height: 6px; border-radius: 999px !important; background: #3ED598; flex-shrink: 0; } /* !important beats legacy [data-theme="dark"] footer a { color:#fff !important } */ [data-theme="dark"] .tndr-footer .tndr-footer-status { color: #7FE7B8 !important; } [data-theme="dark"] .tndr-status-dot { box-shadow: 0 0 10px #3ED598; } .tndr-footer-bottom-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } .tndr-footer-socials { display: flex; gap: 10px; } .tndr-footer-socials a { width: 32px; height: 32px; border-radius: 0 !important; display: grid; place-items: center; background: var(--tf-social); border: 1px solid var(--tf-border-2); color: var(--tf-txt-2); font-size: 16px; text-decoration: none; transition: all 150ms; } .tndr-footer-socials a:hover { color: var(--tf-txt-1); border-color: var(--tf-border-3); background: var(--tf-social-hover); } .tndr-footer-socials svg { display: block; } .tndr-footer-divider { width: 1px; height: 16px; background: var(--tf-border-2); } .tndr-footer-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tndr-footer-legal a { font-family: var(--tf-mono); font-size: 12px; color: var(--tf-txt-3); text-decoration: none; transition: color 150ms; } .tndr-footer-legal a:hover { color: var(--tf-txt-1); } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 991px) { .tndr-footer-grid { grid-template-columns: 1fr; gap: 40px; } .tndr-footer-newsletter { max-width: 460px; } .tndr-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } } @media (max-width: 575px) { .tndr-footer { margin-top: 56px; } .tndr-footer-meta { padding: 40px 0 28px; gap: 24px; } .tndr-footer-meta-right { width: 100%; } .tndr-footer-meta-right .tndr-btn { flex: 1 1 auto; } .tndr-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .tndr-footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; } .tndr-footer-bottom-right { justify-content: flex-start; } } .tndr-footer #scroll-to-top-btn { z-index: 5; }