/* ========================================================= IdeaFloat — Site Chrome (editorial header + footer) Shared across all pages. Source: redesign/redesign.css (.rd-top* / .rd-foot*) from the Claude Design bundle. Loaded site-wide via header.php after base.css. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap'); /* ---------- Override the old theme header rules ---------- header.css sets header{ position:fixed; ... }. The editorial chrome replaces the whole

content with .rd-top. Use display:contents so the

wrapper forms no box — then .rd-top is sticky relative to and stays pinned for the full page scroll (a sticky element can only stick within its parent's box, so the wrapper must not constrain it). */ body > header, header { display: contents !important; position: static !important; border-bottom: 0 !important; background: transparent !important; } /* ---------- Shell (matches homepage .rd-shell) ---------- */ .rd-top, .rd-top *, .rd-foot, .rd-foot * { box-sizing: border-box; } .rd-top-shell { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 56px; position: relative; } /* ---------- Header ---------- */ .rd-top { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(21,21,21,0.06); } .rd-top-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .rd-top-logo { display: flex; align-items: center; gap: 10px; color: #151515; text-decoration: none; } .rd-top-logo span { font-family: Satoshi, sans-serif; font-weight: 900; font-size: 18px; line-height: 1; letter-spacing: -.02em; color: #151515; } .rd-top-logo img { height: 22px; width: auto; display: block; } .rd-top-nav { display: flex; gap: 28px; align-items: center; } .rd-top-nav a { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 13px; color: #4b5563; transition: color .2s; position: relative; text-decoration: none; } .rd-top-nav a:hover { color: #3d61df; } .rd-top-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: #3d61df; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .rd-top-nav a:hover::after { transform: scaleX(1); } .rd-top-actions { display: flex; align-items: center; gap: 18px; } .rd-top-cta { display: inline-flex; align-items: center; gap: 8px; font-family: Satoshi, sans-serif; font-weight: 700; font-size: 13px; color: #151515; border-bottom: 1px solid #151515; padding-bottom: 2px; text-decoration: none; transition: color .2s, border-color .2s; } .rd-top-cta:hover { color: #3d61df; border-bottom-color: #3d61df; } .rd-top-signin { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 13px; color: #6b7280; text-decoration: none; transition: color .2s; } .rd-top-signin:hover { color: #151515; } /* ---------- Mobile toggle ---------- */ .rd-top-burger { display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; cursor: pointer; padding: 8px; margin: -8px; } .rd-top-burger span { display: block; width: 22px; height: 2px; background: #151515; transition: transform .25s ease, opacity .25s ease; } .rd-top.is-open .rd-top-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rd-top.is-open .rd-top-burger span:nth-child(2) { opacity: 0; } .rd-top.is-open .rd-top-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rd-top-mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 56px 24px; border-top: 1px solid rgba(21,21,21,0.06); background: rgba(251,250,246,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .rd-top.is-open .rd-top-mobile { display: flex; } .rd-top-mobile a { font-family: Satoshi, sans-serif; font-weight: 700; font-size: 16px; color: #151515; padding: 12px 0; border-bottom: 1px solid rgba(21,21,21,0.06); text-decoration: none; } .rd-top-mobile a.rd-top-mobile-cta { color: #3d61df; border-bottom: 0; margin-top: 8px; } @media (max-width: 920px) { .rd-top-shell { padding: 0 24px; } .rd-top-nav, .rd-top-actions { display: none; } .rd-top-burger { display: flex; } .rd-top-mobile { padding-left: 24px; padding-right: 24px; } } /* ========================================================= Footer ========================================================= */ .rd-foot { padding: 64px 0 28px; background: #151515; color: #fbfaf6; margin-top: 0; } .rd-foot-shell { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 56px; } .rd-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .rd-foot h5 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 18px; font-weight: 500; } .rd-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .rd-foot li { padding: 0; } .rd-foot li::before { content: none !important; } .rd-foot li a { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; color: rgba(255,255,255,0.7); text-decoration: none; transition: color .2s; } .rd-foot li a:hover { color: #fbfaf6; } .rd-foot-brand img { height: 24px; filter: brightness(0) invert(1); } .rd-foot-brand p { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 18px 0 0; max-width: 360px; } .rd-foot-signup p { font-family: Satoshi, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 0 0 14px; } .rd-foot-signup input[type="email"], .rd-foot-signup input[type="text"] { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 11px 13px; color: #fbfaf6; font-family: Satoshi, sans-serif; font-size: 14px; margin-bottom: 10px; } .rd-foot-signup input::placeholder { color: rgba(255,255,255,0.4); } .rd-foot-signup input[type="submit"], .rd-foot-signup button { background: #21dd90; color: #151515; border: 0; border-radius: 6px; padding: 11px 20px; font-family: Satoshi, sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s; } .rd-foot-signup input[type="submit"]:hover, .rd-foot-signup button:hover { background: #1bc47e; } .rd-foot-signup .wpcf7 { margin: 0; } .rd-foot-bottom { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .rd-foot-fine { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: .04em; display: flex; gap: 24px; flex-wrap: wrap; } .rd-foot-fine a { color: rgba(255,255,255,0.4); text-decoration: none; } .rd-foot-fine a:hover { color: rgba(255,255,255,0.7); } .rd-foot-social { display: flex; gap: 14px; align-items: center; } .rd-foot-social a { display: inline-flex; opacity: .6; transition: opacity .2s; } .rd-foot-social a:hover { opacity: 1; } .rd-foot-social img { height: 18px; width: 18px; filter: brightness(0) invert(1); } @media (max-width: 920px) { .rd-foot-shell { padding: 0 24px; } .rd-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .rd-foot-brand { grid-column: 1 / -1; } .rd-foot-signup { grid-column: 1 / -1; } } @media (max-width: 560px) { .rd-foot-grid { grid-template-columns: 1fr; } .rd-foot-bottom { flex-direction: column; align-items: flex-start; } }