/* Blog-only baseline for the shared marketing toolbar. * * toolbar.css is a VERBATIM copy of the main app's file, so it deliberately * contains no resets: on lingocard.com the global stylesheet already supplies * (a) the Mulish body font every non-heading element inherits, and (b) the * `a { text-decoration: none }` reset. The blog's own globals instead set Roboto * (components/layout/styles.js) and leave anchors browser-underlined, which made * the header render with the wrong font and underlined "Blog"/"Pricing"/language * names. Re-supply just those two things, scoped to the shared markup, so * toolbar.css can keep being re-copied from the main app unchanged. */ /* (a) Body font: matches the main app's , so anything that does not set var(--font-head) explicitly (language names, dropdown descriptions, mobile menu copy) inherits Mulish instead of the blog's Roboto. */ .site-header { font-family: var(--font-body); /* The main app's global normalize sets these on (line-height 1.5 + antialiased smoothing). Without them the identical fonts render heavier and tighter in the blog. Matched exactly: the main app sets only the -webkit smoothing property, so we do the same. */ line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Form controls do not inherit font by default; the toolbar's own .nav-trigger / .mm-acc-head rules are more specific and still win. */ .site-header button { font-family: inherit; } /* (c) Smart header on BOTH mobile and desktop. toolbar.css hides the header only under @media (max-width:999px) via .hp-hidden; this is the same slide-up, ungated, driven by toolbar-blog.js. The transition (.site-header{transition:transform .25s ease}) already applies at every width in toolbar.css, so the animation matches the main app's. */ .site-header.blog-hdr-hidden { transform: translateY(-100%); } /* (b) Anchor reset: the main app's global reset, scoped to the toolbar. */ .site-header a, .site-header a:hover, .site-header a:focus { text-decoration: none; }