/* * WPN overrides for the vendored Huruma theme. * * Kept in one file, loaded last, so the theme's own style.css and responsive.css * stay untouched and a future theme update is a file swap rather than a merge. * Several rules carry an extra class or !important on purpose: responsive.css * loads after style.css and the theme sets the sticky background with * !important, so matching its specificity would lose. */ :root { --wpn-purple: #752781; /* What the theme uses for its own sticky nav links. */ --wpn-ink: #2f2c52; --wpn-navbar-height: 84px; --wpn-logo-height: 68px; } /* ============================================================ The strip above the navbar ============================================================ */ /* * The language switcher's wrapper sits at the top of in normal flow. Its * button is position: fixed and its menu absolute, so it paints nothing there — * but as an inline-level box it still generated a line box, which is 24px of * space above the strip. line-height: 0 is not enough, because the line box also * takes height from the containing block's strut, so it comes out of flow * entirely. Bootstrap positions the dropdown from the toggle's own rect, so the * menu still opens beside its button. */ body > .btn-group.dropstart { position: absolute; top: 0; left: 0; line-height: 0; } /* 20px of padding either side of 17px of content. */ .header-section { padding-top: 8px; padding-bottom: 8px; } /* ============================================================ The language switcher ============================================================ */ /* * The theme pinned this inline at top: 12% — a percentage of viewport height, * so it drifted onto the navbar or the hero depending on the window. A pixel * offset puts it inside the bar and keeps it there. */ body > .btn-group.dropstart > .btn.dropdown-toggle { position: fixed !important; top: 46px !important; right: 0; z-index: 1001; padding: 4px 12px; font-size: 14px; line-height: 1.4; } /* ============================================================ Navbar ============================================================ */ .navbar-area { background-color: var(--wpn-purple) !important; } /* * The sticky bar is white, which is the theme's own behaviour. Every mark drawn * on it is white at rest, so each one has to be darkened when the bar sticks or * it disappears entirely — the failure mode is invisible, not merely wrong, so * each state below is measured rather than eyeballed. * * The theme darkens the inactive links itself. The rest are here. */ .navbar-area.is-sticky { background-color: #ffffff !important; } /* The grid button carries an inline colour, so this needs !important to win. */ .navbar-area.is-sticky .others-options .burger-menu, .navbar-area.is-sticky .others-options .burger-menu i { color: var(--wpn-ink) !important; } /* * The active link. The theme paints it #d7a8df from a 0,5,0 selector, which * outranks its own 0,4,1 sticky rule — so on a white bar it stayed a pale pink at * 1.99:1. This is 0,6,0 to win, and the brand purple gives 8.88:1: the exact * mirror of white-on-purple at rest. */ .navbar-area.is-sticky .huruma-nav .navbar .navbar-nav .nav-item a.active, .navbar-area.is-sticky .huruma-nav .navbar .navbar-nav .nav-item a:hover, .navbar-area.is-sticky .huruma-nav .navbar .navbar-nav .nav-item a:focus { color: var(--wpn-purple); } .huruma-nav .navbar { min-height: var(--wpn-navbar-height); } /* * The logo was 170px tall in an 84px bar and absolutely positioned at * bottom: -10px, so it burst out above into the white strip and below over the * hero. Inline and vertically centred, at a height that fits the bar. */ .huruma-nav .navbar .navbar-brand { position: static; bottom: auto; display: flex; align-items: center; margin-right: 0; } .huruma-nav .navbar .navbar-brand img, .huruma-responsive-nav .logo img { height: var(--wpn-logo-height) !important; width: auto; } /* * The mark is the same in both themes, so the theme's white-logo/black-logo swap * has nothing to swap between: show one and keep it shown, including when the * bar sticks. */ .huruma-nav .navbar .navbar-brand .white-logo, .navbar-area.is-sticky .navbar .navbar-brand .white-logo, .huruma-responsive-nav .logo .white-logo { display: block; } /* * The theme hides the second of a pair with * .huruma-nav .navbar .navbar-brand img:last-child * which is specificity 0,4,1 — one pseudo-class more than a four-class selector, * so it outranked the rule below and hid the only image there now is. Undone at * matching specificity; the sticky rule above is 0,5,0 and never had the problem, * which is why the logo appeared on scroll but not at rest. */ .huruma-nav .navbar .navbar-brand img:last-child { display: block; } .huruma-nav .navbar .navbar-brand .black-logo, .navbar-area.is-sticky .navbar .navbar-brand .black-logo, .huruma-responsive-nav .logo .black-logo { display: none; } /* The links sit in the middle of the space left over beside the logo. */ .huruma-nav .navbar .navbar-collapse { justify-content: center; } .huruma-nav .navbar .navbar-nav { margin-left: auto; margin-right: auto; } /* ============================================================ The mobile bar and its burger ============================================================ */ @media only screen and (max-width: 991px) { /* The row is already stacked here; the margin only adds height. */ .top-header-social { margin-top: 0; } /* The injected bar defaults to white inside a bar the site paints purple. */ .huruma-responsive-nav .mean-container .mean-bar { background-color: transparent; } .huruma-responsive-nav .logo { width: auto; } /* * The language switcher is position: fixed at the right edge with z-index 1001, * which is exactly where the burger lands — measured overlapping it, and a tap * on the top half of the burger hit the switcher instead. * * Two things are needed. The offset holds the burger clear, and it has to be * !important because meanmenu injects the reveal with an inline style * attribute that a stylesheet rule cannot outrank. The z-index is belt and * braces: the switcher's label is a different width in each of the three * locales, so if it ever does reach the burger, the burger still takes the tap. */ .mean-container a.meanmenu-reveal { right: 92px !important; left: auto !important; z-index: 1002; } /* * The burger follows the bar. Its three bars are a span background and its * close X is the anchor's own colour, so both have to be set in both states. * * At rest the bar is purple and the theme paints the burger #2f2c52 from * ".huruma-responsive-nav .mean-container a.meanmenu-reveal" — measured at * 1.47:1, effectively invisible. These selectors match that specificity and * come later, so they win. */ .huruma-responsive-nav .mean-container a.meanmenu-reveal { color: #ffffff; } .huruma-responsive-nav .mean-container a.meanmenu-reveal span { background: #ffffff; } /* Sticky turns the bar white at every width, including here. */ .navbar-area.is-sticky .huruma-responsive-nav .mean-container a.meanmenu-reveal { color: var(--wpn-ink); } .navbar-area.is-sticky .huruma-responsive-nav .mean-container a.meanmenu-reveal span { background: var(--wpn-ink); } /* The bar has to outrank the switcher too, or it clips its own child. */ .mean-container .mean-bar { z-index: 1002; } } /* ============================================================ Footer ============================================================ */ .copyright-logo img { height: 64px; width: auto; } /* ============================================================ Covers ============================================================ */ /* * The theme has no rule for the blog card image at all, so every cover rendered * at its own intrinsic size and no two cards lined up. These give each context * one fixed box. * * object-fit: cover crops to fill rather than distorting, so a portrait and a * landscape photo both come out the same size with their subject still the right * shape — which is what "same size without stretching" needs. */ .wpn-cover { display: block; width: 100%; object-fit: cover; object-position: center; /* Shows through while the file loads, and behind a transparent placeholder. */ background-color: #f2ebf4; } .wpn-cover--card { height: 240px; } .wpn-cover--hero { height: 460px; border-radius: 10px; } .wpn-cover--thumb { width: 100px; height: 70px; flex: 0 0 auto; } /* * The placeholder is contained rather than cropped: its glyph is the whole point * of it, so trimming the edges off would defeat it. The box is the same size * either way, which is what keeps a row of cards level. */ .wpn-cover.is-placeholder { object-fit: contain; padding: 28px; } .wpn-cover--thumb.is-placeholder { padding: 8px; } @media only screen and (max-width: 767px) { .wpn-cover--card { height: 200px; } .wpn-cover--hero { height: 240px; } }