/* ========================================================================== Mutual blog header — brand match with mutual.app -------------------------------------------------------------------------- Where this goes: WP Admin → Appearance → Customize → Additional CSS Theme it targets: Recap (child theme "recap-child" is active) Tested live against blog.mutual.app in light mode, dark mode, and mobile. Logo URLs are already filled in with the live Media Library paths. This version supersedes the first one: SECTION 5 replaces the old prefers-color-scheme block, which keyed dark mode off the visitor's OS instead of the blog's own toggle. ========================================================================== */ /* --- SECTION 1 ------------------------------------------------------------- Flatten the floating rounded card into a flat, full-width white bar, which is how mutual.app's header is built. Note: the rounded white card is painted by an ::after pseudo-element, not by a background on the element itself — hence the ::after reset. -------------------------------------------------------------------------- */ .cs-header__inner-desktop::after, .cs-header__inner-mobile::after { display: none !important; } .cs-header__outer { background: #fff !important; border-bottom: 1px solid #ececec !important; } .cs-header .cs-container { max-width: 1080px !important; /* mutual.app content width */ } .cs-header__inner-desktop { min-height: 84px !important; /* mutual.app header height */ } /* --- SECTION 2 ------------------------------------------------------------- Replace the "Mutual Blog" text logo with the Mutual wordmark. The text stays in the markup (indented off-screen) so search engines and screen readers still read it. DELETE THIS SECTION if you use the theme Customizer's Logo field instead. -------------------------------------------------------------------------- */ .cs-logo, .cs-logo-mobile { margin: 0 !important; } .cs-header__logo, .cs-header__logo-mobile { display: block !important; width: 158px; height: 36px; background: url('https://blog.mutual.app/wp-content/uploads/2026/07/mutual-logo.png') no-repeat left center; background-size: contain; text-indent: -9999px; overflow: hidden; white-space: nowrap; } @media (max-width: 782px) { .cs-header__logo-mobile { width: 132px; height: 30px; } } /* --- SECTION 3 ------------------------------------------------------------- Nav typography to match mutual.app (Lato 600 / 15px). The blog already loads Lato, so no extra font request is added. Lato 600 isn't in the loaded set, so browsers render the nearest weight (700) — which is what mutual.app's nav visually reads as anyway. -------------------------------------------------------------------------- */ .cs-menu-primary__nav > li > a { font-family: Lato, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; } /* --- SECTION 4 ------------------------------------------------------------- Pink "Download App" button. This auto-targets whichever menu item points at mutual.go.link, so there is nothing to configure — just add the menu item and it styles itself. -------------------------------------------------------------------------- */ .cs-header__nav li:has(> a[href*="mutual.go.link"]) { display: flex !important; align-items: center !important; /* stops the button filling header height */ margin-left: 14px !important; } .cs-header__nav a[href*="mutual.go.link"] { background: #f60063 !important; /* Mutual pink — already the blog's accent */ border-radius: 6px !important; padding: 11px 22px !important; height: auto !important; align-self: center !important; line-height: 1.2 !important; } .cs-header__nav a[href*="mutual.go.link"] > div { padding: 0 !important; } .cs-header__nav a[href*="mutual.go.link"] span { color: #fff !important; } .cs-header__nav a[href*="mutual.go.link"]:hover { background: #d90057 !important; } /* The theme fades every non-hovered nav item to 50% when you hover the nav. That reads fine on text links but makes a solid button look disabled, so keep the CTA at full strength. */ .cs-header__nav-inner:hover > .menu-item:not(:hover) a[href*="mutual.go.link"] { opacity: 1 !important; } /* --- DROPDOWNS ------------------------------------------------------------- No CSS needed. The Recap theme already styles WordPress sub-menus as hover dropdowns (white rounded panel + shadow) and adds the chevron to parent items automatically. Verified live: nothing clips them, and they inherit the theme's dark-mode panel styling. Just nest the menu items. -------------------------------------------------------------------------- */ /* --- SECTION 5: DARK MODE -------------------------------------------------- IMPORTANT: this must key off the blog's OWN light/dark state, NOT the visitor's operating system. The theme writes the resolved scheme onto the header as data-scheme="light" | "dark", and updates it when a visitor clicks the sun/moon toggle. `prefers-color-scheme` only reports the OS setting. The two disagree the moment anyone uses the toggle — which produced a dark bar on a light page, and a dark hamburger icon on a dark bar (invisible). Keying off the theme's attribute keeps the bar, the nav text, the hamburger, and the search icon in agreement, because the theme already colours its own text and icons per scheme. That's why there is no nav colour override here — adding one is what broke the icons. -------------------------------------------------------------------------- */ .cs-header[data-scheme="dark"] .cs-header__outer { background: #161616 !important; border-bottom-color: #2a2a2a !important; } /* Covers all three logos: desktop header, mobile header, and the slide-out drawer — the drawer's logo lives outside .cs-header, so this is scoped to the scheme attribute rather than to the header. */ [data-scheme="dark"] .cs-header__logo, [data-scheme="dark"] .cs-header__logo-mobile { background-image: url('https://blog.mutual.app/wp-content/uploads/2026/07/mutual-logo-white.png') !important; } /* First paint, before the theme's JS resolves "auto" to a concrete scheme. */ @media (prefers-color-scheme: dark) { .cs-header[data-scheme="auto"] .cs-header__outer { background: #161616 !important; border-bottom-color: #2a2a2a !important; } [data-scheme="auto"] .cs-header__logo, [data-scheme="auto"] .cs-header__logo-mobile { background-image: url('https://blog.mutual.app/wp-content/uploads/2026/07/mutual-logo-white.png') !important; } } /* --- SECTION 6: MOBILE DOWNLOAD BUTTON ------------------------------------- A pink circular download button beside the hamburger, mobile only. This styles the theme's own header button (.cs-header__custom-button). The theme already places that element next to the toggles and then hides it on mobile; these rules un-hide it and turn it into an icon button. You must first make the button exist — see "Mobile download button" in the README. The pink works on both light and dark bars, so there's no dark variant. The label text stays in the markup for screen readers and is hidden visually with font-size:0, so the button is not an unlabelled icon. -------------------------------------------------------------------------- */ /* Desktop already has the pink "Download" pill in the nav — don't double up. */ .cs-header__inner-desktop .cs-header__custom-button { display: none !important; } .cs-header__inner-mobile .cs-col-right { display: flex; align-items: center; } .cs-header__inner-mobile .cs-header__custom-button { display: flex !important; /* theme hides it on mobile by default */ align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; margin-left: 10px; order: 2; /* set to 0 to sit LEFT of search + burger */ background-color: #f60063 !important; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; font-size: 0 !important; /* hides the label visually, keeps it for AT */ line-height: 0; color: transparent !important; } .cs-header__inner-mobile .cs-header__toggles { order: 1; } /* --- SECTION 7: FOOTER LOGO ------------------------------------------------ Swaps the footer's "Mutual Blog" text for the wordmark, same technique as the header. Note the footer carries data-scheme="dark" permanently — it's a dark footer even while the rest of the page is light — so in practice it always picks up the white wordmark from the second rule. The first rule is the correct fallback if the footer is ever switched to a light scheme. -------------------------------------------------------------------------- */ .cs-footer__logo { display: inline-block !important; width: 158px; height: 36px; background: url('https://blog.mutual.app/wp-content/uploads/2026/07/mutual-logo.png') no-repeat left center; background-size: contain; text-indent: -9999px; overflow: hidden; white-space: nowrap; } [data-scheme="dark"] .cs-footer__logo { background-image: url('https://blog.mutual.app/wp-content/uploads/2026/07/mutual-logo-white.png') !important; } /* --- SECTION 8: FOOTER LAYOUT (DESKTOP) ------------------------------------ The footer columns are generated from the SAME "Main Menu" as the header — it renders as menu-main-menu-2. Six top-level items squeezed into a 608px middle column meant headings wrapped onto 2-3 lines, link text wrapped, and the sixth column dropped onto a row of its own. These rules widen the middle column, tighten the gap, stop headings wrapping, and push the social icons to the bottom of their column. This is a layout patch, not a cure. The real fix is giving the footer its own menu — see the README. Four of the six headings currently have no links under them, and no amount of CSS makes that look intentional. -------------------------------------------------------------------------- */ .cs-footer__inner { grid-template-columns: 200px minmax(0, 1fr) 170px !important; } .cs-footer-columns__nav { gap: 28px 36px !important; } .cs-footer-columns__nav > li > a { white-space: nowrap !important; } /* Social icons drop to the bottom of the right column, level with the last row of links, instead of floating at the top. This uses the grid's own align-self rather than turning the column into a flex column. The theme's .cs-social lives inside and manages its own flex-direction, so making the parent a flex column is unnecessary and invites the two to fight. */ .cs-footer__inner .cs-col-right { align-self: end !important; } /* The theme stacks footer social icons VERTICALLY by default (.cs-social has flex-direction: column in the base stylesheet). That was invisible with a single icon; with three it becomes a tall strip pinned to the right edge. A row sits better beside the copyright line. */ .cs-footer__social .cs-social { flex-direction: row !important; } /* --- SECTION 9: TIKTOK ICON ------------------------------------------------ The theme has no TikTok preset — its icon font ships 35 glyphs and TikTok isn't among them. Rather than uploading a PNG, this draws the TikTok mark as a vector mask on any social link pointing at tiktok.com. The mask is filled with currentColor, so it inherits the theme's own icon colour and hover state and stays sharp on every screen. Size comes from the theme, so it matches the other icons automatically. The theme's custom-social field requires an uploaded icon, so upload tiktok.png + tiktok@2x.png (included in this folder) to create the entry. These rules then paint over whatever the theme renders — img or svg — so the icon follows the theme's colour instead of being a fixed white PNG. That matters more than first assumed: the footer is NOT permanently dark — it follows the light/dark toggle, as does the mobile drawer. In light mode the chip is white and the theme draws its icons in #161616. A fixed white PNG would be invisible there. currentColor tracks the theme in both schemes; verified white-on-#232323 in dark and #161616-on-white in light. -------------------------------------------------------------------------- */ .cs-social__link[href*="tiktok.com"] span > svg, .cs-social__link[href*="tiktok.com"] span > img { display: none !important; } .cs-social__link[href*="tiktok.com"] span { justify-content: center !important; align-items: center !important; } /* Paint the glyph on a pseudo-element, NOT on the span. The span carries the theme's chip background — putting currentColor on it wipes that out, which is what made TikTok render as a bare blob next to Instagram and Facebook. Mask size is 20px, not 24px, and that is deliberate. The theme's own icons are drawn with ~2 units of padding inside their 24-unit viewBox — measured inked area: Instagram 19.98, Facebook 19.87. The simple-icons TikTok path has no padding and inks the full 24, so at 24px it rendered visibly larger than its neighbours. Scaling the mask to 20px gives it a 20px inked height, matching the other two. */ .cs-social__link[href*="tiktok.com"] span::after { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12.525.02c1.31-.02%202.61-.01%203.91-.02.08%201.53.63%203.09%201.75%204.17%201.12%201.11%202.7%201.62%204.24%201.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01%202.92.01%205.84-.02%208.75-.08%201.4-.54%202.79-1.35%203.94-1.31%201.92-3.58%203.17-5.91%203.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9%201.12-3.72%202.58-4.96%201.66-1.44%203.98-2.13%206.15-1.72.02%201.48-.04%202.96-.04%204.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11%201.04-1.36%201.75-.21.51-.15%201.07-.14%201.61.24%201.64%201.82%203.02%203.5%202.87%201.12-.01%202.19-.66%202.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 20px 20px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12.525.02c1.31-.02%202.61-.01%203.91-.02.08%201.53.63%203.09%201.75%204.17%201.12%201.11%202.7%201.62%204.24%201.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01%202.92.01%205.84-.02%208.75-.08%201.4-.54%202.79-1.35%203.94-1.31%201.92-3.58%203.17-5.91%203.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9%201.12-3.72%202.58-4.96%201.66-1.44%203.98-2.13%206.15-1.72.02%201.48-.04%202.96-.04%204.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11%201.04-1.36%201.75-.21.51-.15%201.07-.14%201.61.24%201.64%201.82%203.02%203.5%202.87%201.12-.01%202.19-.66%202.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 20px 20px; }