/* Theme Name: Neve Child Template: neve */ /* ========================================================================== OsloPixel — typography system Self-hosted display/text face wired through a single token (--op-font). Loaded after neve-style-inline-css (see functions.php dependency chain), so redefining Neve's font vars here is enough for headings and body; the explicit rules below cover the hand-built .op-* sections. ========================================================================== */ /* Schibsted Grotesk — variable (wght 400–700), self-hosted woff2. An editorial Nordic grotesk: tightens cleanly at display sizes, stays readable at text sizes. Covers Norwegian (æ ø å live in the latin range). */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); 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; } :root { --op-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Neve consumes these in its own selectors — override them and every heading / body rule follows without a specificity fight. */ --nv-fallback-ff: var(--op-font); --bodyfontfamily: var(--op-font); --h1fontfamily: var(--op-font); --h2fontfamily: var(--op-font); --h3fontfamily: var(--op-font); --h4fontfamily: var(--op-font); --h5fontfamily: var(--op-font); --h6fontfamily: var(--op-font); } /* Belt-and-braces: the custom homepage sections set no font-family of their own, so a low-specificity rule is enough to bring them onto the system. */ body, button, input, select, optgroup, textarea, h1, h2, h3, h4, h5, h6, [class^="op-"], [class*=" op-"] { font-family: var(--op-font); } /* -------------------------------------------------------------------------- Hero headline — second line contrast The .op-muted line ("Den digitale tilstedeværelsen din bør vise det.") is the value proposition and was set at #999 on cream (~2.0:1 — fails AA even for large text). Move it onto the site's established secondary-text token (--op-mid, #555, ~6.8:1). Hierarchy is still carried by weight: 700 vs 400. Specificity 0,3,1 so it wins over the Additional-CSS rule regardless of source order. -------------------------------------------------------------------------- */ .op-hero .op-hero-left h1 .op-muted { color: var(--op-mid, #555555); } /* -------------------------------------------------------------------------- Keyboard focus — a visible ring on every interactive element (WCAG 2.4.7) Neither Neve nor the Additional CSS authors a focus state, so keyboard and switch users get at most a faint UA outline. Draw one from the palette; :focus-visible keeps it off mouse clicks. This sheet loads after neve-style, so it wins over Neve's own a:focus rules without !important. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--op-accent, #2b4f3d); outline-offset: 2px; } /* Green button on cream: an accent ring would sink into the fill — ring it in near-black and push it out so the cream reads as a gap. */ .op-btn:focus-visible, .builder-item--button_base a:focus-visible { outline: 2px solid var(--op-dark, #1a1a1a); outline-offset: 3px; } /* Dark surfaces (CTA band, footer) and the white pill button: light ring. */ .op-cta-band a:focus-visible, .op-cta-band button:focus-visible, .op-footer a:focus-visible, .op-btn-white:focus-visible { outline-color: #ffffff; } /* -------------------------------------------------------------------------- Hero image — decouple its box from the photo's aspect ratio. The Additional CSS sizes the hero-right with height:100%, which only resolves against a definite parent; with the previous near-square photo the column happened to look right, but a portrait frame stretches the whole hero row to ~1140px and pushes the CTA below the fold. Pin the image to the column box (which the grid stretches to the text side + min-height) so any crop just covers. Specificity 0,3,1 beats the Additional-CSS rule. -------------------------------------------------------------------------- */ .op-hero .op-hero-right { position: relative; } .op-hero .op-hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; /* keep the hand + slice in frame on tight crops */ } /* -------------------------------------------------------------------------- Contrast — bring the remaining secondary / fine-print styles to >= WCAG AA on their own surface. Run-1 fixed only the H1; #999 on light and low-alpha white on the #1A1A1A footer still fail (2.3-3.8:1). Italic + smaller size keep these a clear step below body-secondary text without needing #999. Specificity 0,2,x so these win over the Additional-CSS / footer.php rules. -------------------------------------------------------------------------- */ .op-hero .op-hero-note, .op-hero .op-trust-label, .op-price .op-price-note { color: var(--op-mid, #555555); /* ~6.9:1 on the cream/white surfaces */ } .op-footer .op-footer-brand p, .op-footer .op-footer-col h4 { color: rgba(255, 255, 255, 0.6); /* ~7:1 on #1A1A1A, matches the footer links */ } .op-footer .op-footer-bottom span { color: rgba(255, 255, 255, 0.52); /* ~5.4:1 — quietest line, still legible */ } /* -------------------------------------------------------------------------- Layout — the closing CTA band was a `1fr auto` grid with a small button in the auto column, leaving the right half empty. Make it a single centred column (matching the price section as the page's two "big moment" blocks), give the button more presence, and bring the band's padding onto the same 80px scale as every other section. -------------------------------------------------------------------------- */ section.op-cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; padding-top: 80px; padding-bottom: 80px; } section.op-cta-band h2, section.op-cta-band p, section.op-cta-band .op-cta-note { margin-left: auto; margin-right: auto; } section.op-cta-band .op-btn-white { padding: 17px 38px !important; font-size: 1.02rem !important; } /* -------------------------------------------------------------------------- Polish — replace the bare Unicode "↑" in the portfolio result line with a drawn trend-up mark in the accent colour (masked SVG, so it inherits one consistent weight and colour instead of a font glyph). -------------------------------------------------------------------------- */ .op-portfolio .op-portfolio-result::before { content: ""; flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; background-color: var(--op-accent, #2b4f3d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 19 4'/%3E%3Cpath d='M9 4h10v10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 19 4'/%3E%3Cpath d='M9 4h10v10'/%3E%3C/svg%3E") center / contain no-repeat; }