/* ========================================================================== Europe Realtor — visual design system ========================================================================== Brief: a European-property reference site. Visitors are researching a large, unfamiliar, cross-border decision and almost everything they find is written by an agency that wants the commission. The design has to read as an INDEPENDENT REFERENCE, not a listings portal. Distinct from the balds.com skin on purpose — same structure, different skin, so the portfolio does not look like one template stamped repeatedly. Decisions and why: - Warm neutral paper, not clinical white-and-blue. Clinical blue is the house style of every hair-transplant landing page; avoiding it is positioning, not taste. - Deep evergreen accent. Trustworthy and health-adjacent without being medical-blue, and it sits well against the warm cream imagery the site generates. - Serif headings (Newsreader) over sans body (Inter). The standard editorial pairing — it signals "publication" in a way a single geometric sans does not. - Effects are restrained: 150ms transitions, small lifts, a slow image scale. This is an ad-supported reading site, so nothing may compete with the text or shift layout. - Fonts are SELF-HOSTED. A Google Fonts CDN call is a third-party request on every page load and a privacy disclosure we would then owe the reader. ========================================================================== */ /* ---------- fonts ---------- */ @font-face { font-family: 'Newsreader'; src: url('/wp-content/uploads/fonts/newsreader.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'InterVar'; src: url('/wp-content/uploads/fonts/inter.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- latin-ext faces ---------- Google splits each family into per-subset files with complementary unicode-ranges. Shipping only the `latin` file meant Łódź, Gdańsk, Brașov and Poznań fell back to a system font MID-WORD — invisible unless you happen to render one of those words. Shipping only `latin-ext` is worse: it has no a, e, o, comma or full stop at all. The correct construction is BOTH, sharing a family name, each with its own unicode-range — the browser downloads the ext file only when a page actually needs those glyphs. */ @font-face { font-family: 'Newsreader'; src: url('/wp-content/uploads/fonts/newsreader-ext.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'InterVar'; src: url('/wp-content/uploads/fonts/inter-ext.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- tokens ---------- */ :root { --b-paper: #f7f8fa; --b-surface: #ffffff; --b-surface-2: #eceff4; --b-ink: #16202b; --b-ink-2: #3d4a59; --b-muted: #6b7787; --b-rule: #dde3ea; --b-accent: #1f4e79; /* deep slate blue */ --b-accent-ink: #163a5c; --b-warm: #b5643c; /* terracotta, small accents only */ --b-radius: 4px; --b-shadow: 0 1px 2px rgba(30,28,25,.05), 0 6px 20px -8px rgba(30,28,25,.10); --b-shadow-lift:0 2px 4px rgba(30,28,25,.06), 0 14px 34px -10px rgba(30,28,25,.16); --b-ease: cubic-bezier(.22,.61,.36,1); } /* ---------- base ---------- */ body { background: var(--b-paper); color: var(--b-ink); font-family: 'InterVar', ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .site-title { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; color: var(--b-ink); letter-spacing: -0.005em; } h1 { font-weight: 600; line-height: 1.15; } h2, h3 { font-weight: 600; } a { color: var(--b-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover, a:focus { color: var(--b-accent-ink); } /* ---------- header ---------- */ .site-header { background: var(--b-surface); border-bottom: 1px solid var(--b-rule); } .site-title { font-size: 1.75rem !important; font-weight: 700; letter-spacing: -0.02em; } .site-title a { color: var(--b-ink) !important; text-decoration: none; } .site-description { font-family: 'InterVar', sans-serif; color: var(--b-muted); font-size: .875rem; letter-spacing: .01em; } .main-navigation { background: var(--b-surface); border-bottom: 1px solid var(--b-rule); } .main-navigation a { font-family: 'InterVar', sans-serif; font-size: .9375rem; font-weight: 500; color: var(--b-ink-2) !important; text-decoration: none; position: relative; transition: color .15s var(--b-ease); } .main-navigation a:hover { color: var(--b-accent) !important; } /* A sliding rule instead of a background swap — quieter, and it does not reflow. */ .main-navigation .main-nav > ul > li > a::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 2px; background: var(--b-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--b-ease); } .main-navigation .main-nav > ul > li > a:hover::after, .main-navigation .main-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); } .main-navigation .main-nav ul li.current-menu-item > a { color: var(--b-accent) !important; } .main-navigation .sub-menu { background: var(--b-surface); border: 1px solid var(--b-rule); box-shadow: var(--b-shadow); border-radius: var(--b-radius); padding: 6px 0; } .main-navigation .sub-menu a { color: var(--b-ink-2) !important; font-size: .9rem; } .main-navigation .sub-menu a:hover { background: var(--b-surface-2); } /* ---------- article container ---------- */ .site-content .content-area { padding-top: 8px; } .inside-article, .page .inside-article { background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: var(--b-radius); box-shadow: var(--b-shadow); padding: 0 0 34px; overflow: hidden; } .inside-article > *:not(.post-image):not(.featured-image) { padding-left: 34px; padding-right: 34px; } @media (max-width: 600px) { .inside-article > *:not(.post-image):not(.featured-image) { padding-left: 20px; padding-right: 20px; } } /* featured image = banner, capped (see balds.md: at natural size it pushed the title and the opening answer below the fold, and the first ad unit with them) */ .post-image, .featured-image { margin: 0 0 26px; overflow: hidden; } .post-image img, .featured-image img, .page-header-image img { max-height: 300px; width: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { .post-image img, .featured-image img { max-height: 200px; } } .entry-title { font-size: 2.15rem; margin: 26px 0 10px; } @media (max-width: 600px) { .entry-title { font-size: 1.6rem; } } .entry-meta { font-family: 'InterVar', sans-serif; font-size: .8125rem; color: var(--b-muted); letter-spacing: .01em; padding-bottom: 4px; } .entry-meta a { color: var(--b-muted); } .entry-meta a:hover { color: var(--b-accent); } /* ---------- article body rhythm ---------- */ .entry-content { font-size: 1.0625rem; line-height: 1.78; color: var(--b-ink-2); } .entry-content > p:first-of-type { font-size: 1.1875rem; line-height: 1.65; color: var(--b-ink); border-left: 3px solid var(--b-accent); padding-left: 18px !important; margin-left: 34px; margin-right: 34px; margin-bottom: 30px; } @media (max-width: 600px) { .entry-content > p:first-of-type { margin-left: 20px; margin-right: 20px; font-size: 1.09rem; } } .entry-content h2 { font-size: 1.5rem; margin-top: 2.4em; margin-bottom: .55em; padding-top: .7em; border-top: 1px solid var(--b-rule); } .entry-content h3 { font-size: 1.175rem; margin-top: 1.9em; margin-bottom: .4em; color: var(--b-ink); } .entry-content p { margin-bottom: 1.35em; } .entry-content ul, .entry-content ol { margin-bottom: 1.5em; } .entry-content li { margin-bottom: .55em; } .entry-content li::marker { color: var(--b-warm); } .entry-content strong { color: var(--b-ink); font-weight: 600; } .entry-content a { font-weight: 500; } .entry-content table { width: 100%; border-collapse: collapse; margin: 1.9em 0; font-size: .96rem; display: block; overflow-x: auto; /* wide tables scroll, page never does */ } .entry-content th, .entry-content td { border: 1px solid var(--b-rule); padding: .7em .85em; text-align: left; vertical-align: top; } .entry-content th { background: var(--b-surface-2); font-family: 'InterVar', sans-serif; font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--b-ink); } .entry-content figure { margin: 2em 0; } .entry-content figure img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--b-radius); border: 1px solid var(--b-rule); } /* The closing editorial disclaimer. Set apart so it reads as a standing commitment rather than boilerplate — it is the thing the About page promises appears on every article. */ .entry-content > p:last-child em, .entry-content > p:last-of-type em { display: block; padding: 16px 18px; background: var(--b-surface-2); border-left: 3px solid var(--b-warm); border-radius: 0 var(--b-radius) var(--b-radius) 0; font-style: normal; font-size: .9375rem; line-height: 1.65; color: var(--b-ink-2); } /* "Keep reading" / "Related reading" blocks appended by the agent */ .entry-content h2.wp-block-heading + p { font-size: 1rem; } /* ---------- hero (front page only — owner rule: never on inner pages) ---------- */ .er-hero { position: relative; margin: 0 0 30px; border-radius: var(--b-radius); overflow: hidden; border: 1px solid var(--b-rule); background: var(--b-surface-2); min-height: 260px; display: flex; align-items: flex-end; } .er-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .er-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,18,16,.06) 0%, rgba(20,18,16,.30) 42%, rgba(20,18,16,.74) 100%); } .er-hero__inner { position: relative; z-index: 2; padding: 40px 34px 30px; color: #fff; } .er-hero__eyebrow { font-family: 'InterVar', sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); margin: 0 0 10px; } .er-hero__title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.14; color: #fff; margin: 0 0 12px; text-wrap: balance; } .er-hero__sub { font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; max-width: 46ch; } @media (max-width: 600px) { .er-hero { min-height: 220px; } .er-hero__inner { padding: 28px 20px 22px; } } /* ---------- topic cards ---------- */ .er-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); gap: 16px; } .er-cards li { margin: 0; } .er-card { display: flex; flex-direction: column; height: 100%; background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: var(--b-radius); overflow: hidden; text-decoration: none; transition: transform .18s var(--b-ease), box-shadow .18s var(--b-ease), border-color .18s var(--b-ease); } .er-card:hover, .er-card:focus-visible { transform: translateY(-2px); box-shadow: var(--b-shadow-lift); border-color: #c6d0dc; } .er-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--b-surface-2); } .er-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--b-ease); } .er-card:hover .er-card__media img { transform: scale(1.04); } .er-card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 6px; } .er-card__title { font-family: 'Newsreader', Georgia, serif; font-size: 1.06rem; font-weight: 600; line-height: 1.28; color: var(--b-ink); margin: 0; } .er-card:hover .er-card__title { color: var(--b-accent); } .er-card__desc { font-size: .875rem; line-height: 1.55; color: var(--b-muted); margin: 0; } .er-card__count { font-family: 'InterVar', sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--b-warm); margin: 2px 0 0; } /* ---------- archive / blog post cards ---------- */ .blog .site-main, .archive .site-main, .page-template-blog .site-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 20px; } .blog .site-main > .post, .archive .site-main > .post { margin-bottom: 0 !important; border-bottom: 0 !important; } .blog .site-main .inside-article, .archive .site-main .inside-article { height: 100%; display: flex; flex-direction: column; padding-bottom: 20px; transition: transform .18s var(--b-ease), box-shadow .18s var(--b-ease), border-color .18s var(--b-ease); } .blog .site-main .post:hover .inside-article, .archive .site-main .post:hover .inside-article { transform: translateY(-2px); box-shadow: var(--b-shadow-lift); border-color: #c6d0dc; } .blog .site-main .post-image, .archive .site-main .post-image { margin-bottom: 16px; } .blog .site-main .post-image img, .archive .site-main .post-image img { max-height: 168px; transition: transform .5s var(--b-ease); } .blog .site-main .post:hover .post-image img, .archive .site-main .post:hover .post-image img { transform: scale(1.04); } .blog .site-main .entry-title, .archive .site-main .entry-title { font-size: 1.16rem; line-height: 1.3; margin: 0 0 8px; } .blog .site-main .entry-title a, .archive .site-main .entry-title a { color: var(--b-ink); text-decoration: none; } .blog .site-main .post:hover .entry-title a, .archive .site-main .post:hover .entry-title a { color: var(--b-accent); } .blog .site-main .entry-summary, .archive .site-main .entry-summary { font-size: .9rem; line-height: 1.6; color: var(--b-muted); } .blog .site-main .entry-summary p:last-child { margin-bottom: 0; } /* Grid children must not each try to be a full-width column. */ .blog .site-main > *, .archive .site-main > * { min-width: 0; } .blog .site-main .paging-navigation, .archive .site-main .paging-navigation { grid-column: 1 / -1; } /* ---------- archive headers ---------- */ .page-header, .archive .page-header { background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: var(--b-radius); padding: 24px 28px; margin-bottom: 22px; box-shadow: var(--b-shadow); } .page-header h1, .archive .page-header h1 { font-size: 1.8rem; margin: 0 0 6px; } .page-header .taxonomy-description p { margin: 0; color: var(--b-muted); font-size: .96rem; } /* ---------- pagination ---------- */ .paging-navigation .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px 8px 0; background: var(--b-surface); border: 1px solid var(--b-rule); border-radius: var(--b-radius); color: var(--b-ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: background .15s var(--b-ease), color .15s var(--b-ease), border-color .15s var(--b-ease); } .paging-navigation .page-numbers:hover { background: var(--b-surface-2); border-color: #c6d0dc; color: var(--b-accent); } .paging-navigation .page-numbers.current { background: var(--b-accent); border-color: var(--b-accent); color: #fff; } /* ---------- ads ---------- */ /* Ad units get a hairline and a quiet label so they are unmistakably not article content — that distinction is what "ads mistaken for content" enforcement is about. */ .sc-ad { border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); padding: 18px 0; background: var(--b-paper); } /* ---------- footer ---------- */ .er-footer-wrap, .site-info { background: var(--b-surface); border-top: 1px solid var(--b-rule); color: var(--b-muted); font-size: .875rem; } .site-info a { color: var(--b-ink-2); } .site-info a:hover { color: var(--b-accent); } .er-footer { max-width: 820px; margin: 0 auto; padding: 34px 20px 6px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; } @media (max-width: 600px) { .er-footer { grid-template-columns: 1fr; gap: 18px; } } .er-footer__brand { font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--b-ink); margin: 0 0 8px; } .er-footer__blurb { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--b-muted); } .er-footer__heading { font-family: 'InterVar', sans-serif; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink); margin: 0 0 10px; } .er-footer__links { list-style: none; margin: 0; padding: 0; } .er-footer__links li { margin-bottom: 7px; } .er-footer__links a { text-decoration: none; font-size: .9rem; } .er-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- accessibility + motion ---------- */ a:focus-visible, button:focus-visible, .er-card:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .er-card:hover { transform: none; } .er-card:hover .er-card__media img { transform: none; } } /* ---------- corrections found by looking at the rendered page ---------- */ /* The h2 top rule is a section divider between article sections. On the FIRST h2 it drew a stray line immediately under the card's top edge — a divider dividing nothing. */ .entry-content > h2:first-child, .entry-content > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.1em; } /* The homepage opens with an h2, not a paragraph, so the accented lead-paragraph treatment must not apply there — it was styling nothing and adding stray margin. */ .home .entry-content > p:first-of-type, .page-id-156 .entry-content > p:first-of-type { font-size: 1.0625rem; color: var(--b-ink-2); border-left: 0; padding-left: 0 !important; margin-left: 0; margin-right: 0; margin-bottom: 1.35em; } /* Hero legibility: the generated artwork is deliberately pale, so the eyebrow and title sat on a bright wall at roughly 2.5:1 contrast. Deepened top-to-bottom and given the text a faint shadow — measured, not guessed (see balds.md). */ .er-hero__scrim { background: linear-gradient(180deg, rgba(20,18,16,.42) 0%, rgba(20,18,16,.30) 30%, rgba(20,18,16,.52) 62%, rgba(20,18,16,.80) 100%); } .er-hero__title, .er-hero__eyebrow, .er-hero__sub { text-shadow: 0 1px 14px rgba(20,18,16,.34); } /* Cards on the homepage sit inside the article container, so they need breathing room from the heading above and the next section below. */ .entry-content .er-cards { margin-top: 1.1em; margin-bottom: 2.2em; } /* ---------- width: reading measure vs directory measure ---------- 820px is a READING measure, chosen for articles, and it is right there. But the homepage, /articles/ and the category archives are directories of cards, not prose — at 820px the topic grid collapsed to 2 columns (measured: 670px of usable grid width against a 212px card minimum). Listing pages get a wider container; article pages keep the narrow one. */ .home .grid-container, .blog .grid-container, .archive .grid-container, .page-template-blog .grid-container { max-width: 1120px; } /* With the extra room, let the grids use it. */ .home .er-cards { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 18px; } .home .er-cards:first-of-type { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } /* The article container's own inner padding is what actually squeezed the grid, so on the homepage the cards break out of it slightly rather than sitting inside two nested paddings. */ .home .inside-article > *:not(.post-image):not(.featured-image) { padding-left: 30px; padding-right: 30px; } /* ---------- archive card ordering ---------- GeneratePress renders the featured image AFTER the entry header, so cards read title → meta → image → excerpt. For a card the image should lead. The listing cards are already flex columns, so this is a pure ordering change: the image stays a direct child of .inside-article (and therefore flush to the card edge, unlike rehooking it inside the
, which would inherit the body padding). */ .blog .site-main .inside-article .post-image, .archive .site-main .inside-article .post-image { order: -1; margin: 0 0 16px; } .blog .site-main .inside-article .entry-header, .archive .site-main .inside-article .entry-header { order: 0; } .blog .site-main .inside-article .entry-summary, .archive .site-main .inside-article .entry-summary { order: 1; } .blog .site-main .inside-article .entry-meta, .archive .site-main .inside-article .entry-meta { order: 2; } /* Card titles carry the date+author already; the footer meta is just the category chip. */ .blog .site-main .entry-meta a, .archive .site-main .entry-meta a { text-decoration: none; } .blog .site-main .entry-meta a:hover, .archive .site-main .entry-meta a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- mobile overflow guard ---------- Measured on a 375px viewport: the two "Start here" cards used a 320px grid floor while only ~275px was available inside the article padding, so the grid track was wider than its container and the whole page scrolled sideways. Every card floor is now min(Xpx, 100%) so it can collapse. This is the belt-and-braces check that the symptom cannot come back via some other wide child (a long URL, a table, an embed). */ html, body { max-width: 100%; overflow-x: clip; } .entry-content > * { max-width: 100%; } /* ---------- specificity fix: card grids are not prose lists ---------- `.entry-content ul` (one class + one element = specificity 0,1,1) outranks `.er-cards` (0,1,0), so the prose list padding-left was winning and pushing every card grid ~24px to the right — measured on mobile as a 111px left gap against a 61px right gap. The grids are laid out with CSS grid, not list indentation, so the prose rules are reset here explicitly. */ .entry-content ul.er-cards { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; list-style: none; } .entry-content ul.er-cards > li { margin: 0; } .entry-content ul.er-cards > li::marker { content: none; } /* ---------- homepage intro ---------- The SEO/orientation lead. Sized up so it reads as an introduction rather than body copy, but with no accent bar: under a full-width hero, a second strong vertical rule is visual noise. Articles keep the barred lead treatment, where there is no hero above it. */ .er-intro { font-size: 1.15rem !important; line-height: 1.62; color: var(--b-ink) !important; margin-bottom: 1.1em !important; } .er-intro + p { color: var(--b-ink-2); } .home .entry-content > h2:first-of-type { margin-top: 1.9em; } @media (max-width: 600px) { .er-intro { font-size: 1.08rem !important; } } /* Pages with no featured image and (on the front page) no title have .entry-content as the very first child of the card, so the text sat flush against the card's top border. */ .inside-article > .entry-content:first-child { padding-top: 30px; } /* ---------- hero must never become a grid item ---------- On a posts-index front page the body carries the `blog` class, which turns .site-main into the archive CARD GRID — and the hero, being a child of .site-main, silently became a 333px grid cell beside the content instead of a full-width banner above it. Only showed up on europerealtor, whose front page is the post index; balds' static-page homepage never hit it. Spanning all columns is correct whether or not the grid rule applies. */ .site-main > .er-hero, .site-main > .er-hero { grid-column: 1 / -1; width: 100%; } /* Hero must be legible with NO image. The scrim + white text assume artwork behind them; before the image option is set (or if the attachment is ever deleted) the text would be white on a pale surface. A dark base colour underneath makes that state safe rather than invisible. */ .er-hero { background: linear-gradient(135deg, #1f4e79 0%, #16202b 100%); } /* GeneratePress paints a solid BACKGROUND on the current menu item from its own dynamic CSS, which fought the sliding-underline treatment and rendered as a dark filled block behind "Home". The underline plus the accent colour is the whole indicator; kill the slab. */ .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-item > a:hover, .main-navigation .main-nav ul li.current_page_item > a, .main-navigation .main-nav ul li[class*="current"] > a { background: transparent !important; } .main-navigation .main-nav ul li.current-menu-item > a { color: var(--b-accent) !important; } /* ---------- mobile menu toggle: white-on-white ---------- GeneratePress colours the nav text white (its default assumes a dark nav bar). This design makes the nav bar WHITE, and the