/* Theme Name: Hywer Theme URI: https://hywer.no Author: Styrk Reklame AS Description: Hywer-spesifikt child theme av Styrk Theme. Vannkraft / vassdragskomponenter, Dale i Sunnfjord. Navy/teal/plum-palett, Nunito-font. Template: styrk-theme Version: 0.1.4 Text Domain: hywer-theme Requires at least: 6.4 Requires PHP: 8.3 */ /* ══════════════════════════════════════════════════════════════════════════ EDITOR PARITY — make the block-editor canvas behave like the front end style.css is injected into the editor via add_editor_style() (functions.php). `.editor-styles-wrapper` exists ONLY inside the editor iframe, so none of this touches the front end. Principle: the styrk section blocks are FULL-WIDTH sections on the front end, so in the editor they must (1) span the FULL canvas — not be capped at the theme contentSize (760px) and centered in a narrow box — and (2) keep ALL their content strictly INSIDE their own frame: nothing may trespass the block border. The editor canvas is narrower than a real browser, so content must stay responsive (wrap / shrink) within whatever width the canvas is. ══════════════════════════════════════════════════════════════════════════ */ /* IMPORTANT: in the editor the custom blocks render via their React edit * components, whose wrapper class is `wp-block-styrk-blocks-` — the * front-end `.cb-*` classes do NOT exist here. So target the block-type class. */ /* 1) Every styrk section block fills the full canvas (drop the contentSize cap * + centering) so it reads like the full-width front-end section — fixes the * hero being stuck at 808px in a narrow box. */ .editor-styles-wrapper [class*="wp-block-styrk-blocks-"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* 2) Containment WITHOUT distorting the design. Keep it minimal — the earlier * aggressive version caused two regressions: * • blanket flex-wrap stacked the Split Section's two columns; * • forcing every inner container to max-width:100% removed the design's * readable content cap, so on ultra-wide screens the hero content * stretched edge-to-edge instead of staying centered. * So we ONLY: * • box-sizing:border-box → padding (e.g. px-13) counts INSIDE the width * (that padding was the exact source of the Services overflow); * • min-width:0 → flex/grid children can shrink to fit. * The blocks' own inner containers (max-w-site-*, mx-auto) keep their design * max-width + centering — exactly like the front end at any screen width. */ .editor-styles-wrapper [class*="wp-block-styrk-blocks-"] *, .editor-styles-wrapper [class*="wp-block-styrk-blocks-"] *::before, .editor-styles-wrapper [class*="wp-block-styrk-blocks-"] *::after { box-sizing: border-box; } .editor-styles-wrapper [class*="wp-block-styrk-blocks-"] :where(*) { min-width: 0; } /* 3) Top-level CORE Group sections (e.g. the homepage Aktuelt block) are * full-bleed on the front end (the theme renders top-level blocks edge-to- * edge), but the editor caps them at the theme contentSize (760px) and * centres them in a narrow box → the 3-col card grid is squeezed to ~208px * columns with mid-word wrapping. alignfull does NOT widen them here. So mirror * the styrk-block rule: let the Aktuelt Group span the full canvas. Its own * `.cb-home-aktuelt > *` rule (loaded in the editor too) then re-centres the * heading + grid + CTA to the 1180px content column → editor matches the * front end. */ .editor-styles-wrapper .cb-home-aktuelt { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ══════════════════════════════════════════════════════════════════════════ HYWER — brand token swap (per offisiell Profilmanual_Hywer.pdf) Hovedfarge «Vannkraft» #00354F · «Drivkraft» teal #26B1BD · «Bærekraft» #0072A0 · «Urkraft» sand #DDD7CF · «Eng» plomme #AA6486 Font: Josefin Sans (overskrifter) + Lato (brødtekst) ══════════════════════════════════════════════════════════════════════════ */ /* Both brand fonts are now self-hosted (below) — zero Google Fonts CDN * requests: reliable, GDPR-safe, version-pinned. */ /* ── Josefin Sans — SELF-HOSTED (overskrifter) ────────────────────────────── * The brand heading font, served from the theme instead of Google Fonts CDN: * reliable (no render-block / Cloudflare/adblock failure), GDPR-safe (no * third-party request), and version-pinned. Variable font (one file per * subset covers weights 100–700, so light/regular/bold all work). Norwegian * æ/ø/å live in the latin subset; latin-ext covers the rest. */ @font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('assets/fonts/josefin-sans-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: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('assets/fonts/josefin-sans-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; } /* ── Lato — SELF-HOSTED (brødtekst + Lato bold versaler) ───────────────────── * Static weights 400 / 700 / 900, latin + latin-ext subsets. Same rationale * as Josefin above. */ /* 400 */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/lato-400-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: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/lato-400-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; } /* 700 */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lato-700-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: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/lato-700-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; } /* 900 */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/lato-900-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: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/lato-900-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; } /* ── CSS variable overrides (maps WP preset tokens → Hywer palette) ──────── */ :root { --wp--preset--font-family--base: 'Lato', system-ui, -apple-system, sans-serif; --wp--preset--font-family--display: 'Josefin Sans', system-ui, -apple-system, sans-serif; /* ── ONE shared content rail ──────────────────────────────────────────── * Every rail on the site — header, hero, section blocks, Aktuelt, footer — * snaps to this width + gutter so their left/right edges line up at every * viewport (no more 1440/1340/1280/1180 drift). 1280 is the width the styrk * section blocks (`max-w-site-md`) already use, so this brings the outliers * (header, footer, Aktuelt, breadcrumb) INTO line with them. * Gutter maxes at 3.25rem (52px) to match the blocks' `px-13` padding, and * clamps down on small screens. Any element that consumes both vars + * `box-sizing:border-box` aligns pixel-for-pixel with a section block. * The header reads its width from Settings → Header (set to 1280 / 52px). */ --cb-content-rail: 1280px; --cb-content-gutter: clamp(1.25rem, 4vw, 3.25rem); } /* The styrk section blocks (`max-w-site-md` + `px-13`) are content-box: the * 1280 cap is the CONTENT width and the 52px gutter sits OUTSIDE it, so their * content edge lands at the rail edge. Every theme rail below mirrors that exact * box model (content-box + 1280 cap + gutter) so their content edge lines up * with the sections at the same x — instead of being inset by the gutter. */ /* Header rail — the react-header inner div sets box-sizing:border-box + * padding inline as INLINE styles (so it needs !important to override). Flip it * to the shared content-box rail so the logo + nav sit on the SAME 1280 content * rail as every section below — the logo edge then aligns with section content, * footer content and the breadcrumb arrow at x = rail edge (not inset 52px). */ .site-header-react > div { box-sizing: content-box !important; max-width: var(--cb-content-rail) !important; } /* Normalize EVERY section block's inner rail to ONE 1280 content rail aligned * with the header logo, footer and Aktuelt. The plugin is internally * inconsistent (some inners content-box @1280, others border-box @1176). * * Use BORDER-BOX with the outer width = 1280 content + 2×52px (px-13) gutter * = 1384px. Border-box keeps the 52px gutter INSIDE that width, so: * • desktop ≥1384: content area = 1384 − 104 = 1280 → same rail as before; * • narrow screens (<1384, incl. mobile): the element is just viewport-wide * with the gutter inside it — it never overflows the screen. (The old * content-box rule added the 104px gutter ON TOP of the width, so on a * phone the section blew ~104px past the viewport and broke the layout.) */ .max-w-site-md { box-sizing: border-box !important; max-width: 1384px !important; } /* ── Project body rail = section-block rail ──────────────────────────────── * The styrk plugin sizes .cb-project-body__inner at 1440px and strips the * post-content max-width (it expects a parent-theme 720px reading-column rule * that this standalone theme doesn't define), so body paragraphs overshoot the * 1280-content / 1384-outer block rail. Snap the body inner to the SAME shared * rail the section blocks use so breadcrumbs, meta and paragraphs line up * edge-for-edge with the blocks above and below. */ .cb-project-body__inner { box-sizing: content-box !important; max-width: var(--cb-content-rail) !important; /* 1280 content */ padding-inline: var(--cb-content-gutter) !important; /* 52px gutter → 1384 outer */ } /* ── Ordinary page/post content → shared rail (not full viewport) ──────────── * post-content renders `is-layout-flow` (unconstrained), so a plain Gutenberg * paragraph / heading / list spans the WHOLE viewport (2560px+ on wide screens). * Cap bare flow text to the same content rail the section blocks use, centred, * so body copy lines up with the sections instead of running edge-to-edge. * Scoped to `main > .wp-block-post-content` (regular pages); the single-project * body is nested deeper and keeps its own rule above. Full-width styrk *
s and any alignfull/alignwide block are NOT in this list, so they * still break out. */ main > .wp-block-post-content > :where( p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure, table, .wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-table, .wp-block-image, .wp-block-buttons, .wp-block-embed, .wp-block-code, .wp-block-pullquote, .wp-block-columns ):not(.alignfull):not(.alignwide) { max-width: var(--cb-content-rail); margin-inline: auto; padding-inline: var(--cb-content-gutter); box-sizing: content-box; } /* Headings carry a `margin:0` reset that beats the `margin-inline:auto` above, * so a bare heading pins hard-left while the centred body copy sits up to 588px * to its right on wide screens. Force headings onto the SAME centred rail as the * paragraphs so the heading and its body share one left edge at every width. */ main > .wp-block-post-content > :where( h1, h2, h3, h4, h5, h6, .wp-block-heading ):not(.alignfull):not(.alignwide) { margin-inline: auto !important; } /* Vertical rhythm: bare flow children render with margin 0 (block-gap isn't * emitted for this post-content layout), so paragraphs/headings butt together. * Add a gap between CONSECUTIVE text blocks only — a heading right after a * full-width
is excluded (the section owns that spacing). */ main > .wp-block-post-content > :where( p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure, table, .wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-table, .wp-block-image, .wp-block-pullquote ):not(.alignfull):not(.alignwide) + :where( p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure, table, .wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote, .wp-block-table, .wp-block-image, .wp-block-pullquote ):not(.alignfull):not(.alignwide) { margin-top: 1.4rem; } /* ── Body ─────────────────────────────────────────────────────────────────── */ body { font-family: var(--wp--preset--font-family--base); background: var(--page-bg, #f2f0ea); color: #2e2e2b; -webkit-font-smoothing: antialiased; } /* ── Horizontal overflow (same fix as parent theme) ──────────────────────── */ html { overflow-x: clip; } /* ── Selection ────────────────────────────────────────────────────────────── */ ::selection { background: var(--wp--preset--color--secondary, #5ab4ba); color: #fff; } ::-moz-selection { background: var(--wp--preset--color--secondary, #5ab4ba); color: #fff; } /* ── Focus ring — teal on-brand ───────────────────────────────────────────── */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--secondary, #5ab4ba) !important; outline-offset: 3px; /* SQUARE keyboard-focus ring everywhere (Hywer is a squared brand). `0 * !important` overrides each element's own radius during focus — e.g. the * header search trigger is 6px, which otherwise gave a rounded ring while * neighbouring 0-radius controls stayed square (inconsistent). */ border-radius: 0 !important; } /* Mouse-clicking a button gives plain :focus, NOT :focus-visible, so the * square override above is skipped and the ring follows the element's own * radius. The header search trigger ships at 6px (styrk-blocks), so on click * its ring was rounded. Square the radius on plain :focus too — shape only, * no outline here, so we don't introduce mouse-focus rings on other controls. */ .rh-search-trigger:focus { border-radius: 0 !important; } /* ══════════════════════════════════════════════════════════════════════════ HYWER — styrk-blocks design-system token overrides Re-maps every --primary / --secondary / --accent / --surface token and the font families so all blocks render in Hywer brand colours. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Palette — offisiell Profilmanual ─────────────────────────────────── */ --primary: #00354F; /* Vannkraft — hovedfarge (mørk blå) */ --secondary: #26B1BD; /* Drivkraft — teal */ --accent: #AA6486; /* Eng — plomme */ --blue: #0072A0; /* Bærekraft — blå */ --surface: #DDD7CF; /* Urkraft — sand/greige */ --light-teal: #26B1BD; --muted: #c8c2b8; /* stone — hairlines, dividers */ --white: #ffffff; --page-bg: #f2f0ea; /* lys canvas (lettere enn Urkraft) */ /* RGB channels used for tint utilities inside the design system */ --primary-r: 0; --primary-g: 53; --primary-b: 79; --accent-r: 170; --accent-g: 100; --accent-b: 134; /* ── Dark-section treatment ──────────────────────────────────────────── */ --dark-bg: #00354F; --dark-text: #ffffff; --dark-sub: rgba(255,255,255,0.72); --dark-border: rgba(255,255,255,0.14); /* ── Foreground ──────────────────────────────────────────────────────── */ --fg1: #00354F; --fg2: #6b6963; --fg3: rgba(0, 53, 79, 0.60); /* ── Typography — Josefin Sans (overskrift) + Lato (brødtekst) ───────── */ --font-sans: 'Lato', system-ui, -apple-system, sans-serif; --font-display: 'Josefin Sans', system-ui, -apple-system, sans-serif; /* ── Geometry — Hywer uses near-flat sharp edges (2 px) ─────────────── */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 4px; --radius-2xl: 4px; --radius-pill: 2px; } /* ── Eyebrow / pill shape override ──────────────────────────────────────── */ .cb-eyebrow, .cb-eyebrow--pill { border-radius: 2px !important; } /* ── CTA buttons — sharp rectangle + uppercase ───────────────────────────── */ .cb-cta-btn { border-radius: 2px !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; } /* ── Hero slider dots — Hywer square dot style ───────────────────────────── */ .cb-hero__dot { border-radius: 2px; } /* ── Hero heading — Josefin Sans LIGHT, per Hywer profilmanual ─────────────── * The brand manual's OVERSKRIFT spec is Josefin Sans light // regular // bold, * and the website hero ("Mye kraft i god kunnskap") is set in light. The block * defaults the heading to font-normal (400); pin it to 300 here so the hero * heading matches the brand. (Weights 300/400/700 are all loaded, so * emphasis still renders bold.) */ .cb-hero h1, .cb-hero .text-hero { font-family: var(--wp--preset--font-family--display, 'Josefin Sans', sans-serif); font-weight: 300; } /* ── Lead / rich-text-section overlay effect ───────────────────────────── First rich-text-section after a hero floats over the hero's bottom edge with a transparent background and negative top margin. Apply class "is-lead" on the block via Additional CSS Class. ──── */ .cb-hero + .wp-block-styrk-blocks-rich-text-section.is-lead { position: relative; z-index: 5; background: transparent !important; /* Customer wants clear air between the hero and the ingress — no overlap. (The design's float-over-hero looked cramped over a busy photo.) */ margin-top: 0; padding-top: clamp(2.5rem, 5vw, 4rem) !important; } /* ── Footer — navy background ────────────────────────────────────────────── */ .hw-footer { background: var(--primary, #12364e); color: #ffffff; padding-block: clamp(3rem, 6vw, 4.5rem); /* No external top margin: it rendered as an 80px band of page background * above the footer (a "gap" with nothing in it). The footer's own * padding-block (≈72px) already gives the dark band its breathing room, so * the footer now sits flush under the page content. */ margin-top: 0; } .hw-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; max-width: var(--cb-content-rail); margin-inline: auto; padding-inline: var(--cb-content-gutter); box-sizing: content-box; } .hw-footer h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: #ffffff; margin: 1.9rem 0 0.6rem; /* air ABOVE each section heading (Kontakt, Følg oss) */ } /* …but the first heading in a column sits flush to the column top (no stray gap). */ .hw-footer .footer-col > h2:first-child { margin-top: 0; } .hw-footer p, .hw-footer address, .hw-footer a { font-size: 16px; color: rgba(255,255,255,0.88); line-height: 1.7; } /* [footer_contact] renders the address in an
, which browsers italicise by default. */ .hw-footer address { font-style: normal; margin: 0; } .hw-footer a:hover { color: #ffffff; } /* The social column is [social_links display="labels"] — a stack of named links, matching the address/contact stacks above it. `.footer-social` is the pre-shortcode class name, kept so nothing that referenced it breaks. */ .hw-footer .footer-social, .hw-footer .site-footer__social--labels { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; } .hw-footer .site-footer__social-link--labels { text-decoration: underline; text-underline-offset: 3px; } /* Footer logo — [footer_logo] outputs its own with an intrinsic 200x64 attribute pair, so the size is pinned here rather than left to the attributes (an SVG with no intrinsic ratio would otherwise render at the raw 200x64 box and letterbox). Matches the 170px width the hard-coded used. */ .hw-footer .site-footer__logo { margin: 0; } /* Brand column: logo, optional company heading, optional description. The heading sits closer to the logo than the other column headings do (it belongs to the mark above it, not to a list below it), and the description is held to a readable measure rather than the full column width. */ .hw-footer .footer-brand-col > .site-footer__col-heading { margin-top: 1.5rem; } .hw-footer .footer-brand-col p { max-width: 38ch; } .hw-footer .site-footer__logo-img { width: 170px; height: auto; max-width: 100%; filter: none; } /* The fallback path CSS-inverts a dark header logo for the dark bar. Hywer's footer logo is already white, so this only fires if the white-logo slot in Settings → Footer is ever emptied. */ .hw-footer .site-footer__logo-img--invert { filter: brightness(0) invert(1); } .hw-footer .footer-news p { font-size: 14.5px; max-width: 38ch; } .hw-footer .news-field { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 10px; margin-top: 1.2rem; } .hw-footer .news-field input { background: none; border: none; color: #fff; font-size: 15px; flex: 1; outline: none; font-family: var(--font-sans); } .hw-footer .news-field input::placeholder { color: rgba(255,255,255,0.55); } .hw-footer .arrow-circle { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--secondary, #5ab4ba); border: none; cursor: pointer; display: grid; place-items: center; color: #fff; } /* Footer logo — use white SVG directly, no filter */ .hw-footer .wp-block-image img { filter: none; } /* ── Certification badges (optional) ────────────────────────────────────── * Output by [footer_certs] (styrk-blocks). The .site-footer__certs element * only exists in the DOM when ≥1 badge is set under Settings → Footer, so this * whole block is invisible until an admin uploads one — no empty strip, no * stray divider. A full-width row sits below the footer columns, aligned to the * same content rail, with a hairline rule above (matches the styrk-blocks * default footer). Desktop justify follows the --cb-footer-cert-align var the * plugin emits from the same settings screen; mobile is always centred. */ .hw-footer .site-footer__certs { max-width: var(--cb-content-rail); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(2rem, 4vw, 2.75rem) var(--cb-content-gutter) 0; box-sizing: content-box; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 4vw, 3rem); justify-content: var(--cb-footer-cert-align, center); } .hw-footer .site-footer__cert { display: inline-flex; } .hw-footer .site-footer__cert-img { height: clamp(64px, 7vw, 88px); width: auto; } @media (max-width: 768px) { /* Always centre on mobile regardless of the desktop alignment setting. */ .hw-footer .site-footer__certs { justify-content: center !important; } } /* ── Bottom bar — copyright · legal links · credits ─────────────────────── * Structure and most of the styling come from styrk-blocks' shared sheet * (.site-footer__bar). All this does is pull the row onto Hywer's content * rail — the plugin aligns to --cb-content-max with a flat 24px gutter, * which sat ~28px inside the footer columns above it at desktop width, so * the hairline and the copyright line disagreed about where the page edge * was. The bar collapses to nothing when copyright, legal links and credits * are all empty, so the top border is suppressed in that case too. */ .hw-footer .site-footer__bar { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(255,255,255,0.14); } .hw-footer .site-footer__bar > .wp-block-group { max-width: var(--cb-content-rail); padding-inline: var(--cb-content-gutter); box-sizing: content-box; } .hw-footer .site-footer__bar:empty, .hw-footer .site-footer__bar > .wp-block-group:empty { border-top: 0; padding: 0; } /* The plugin turns the bar into a row from 768px. Hywer's copyright and credits strings are both long enough that the row is already wrapping mid-sentence at that width ("Utvikling og design av / [mark] Styrk Reklame AS"), so the stack is held until there is room for one clean line. */ @media (max-width: 900px) { .hw-footer .site-footer__bar > .wp-block-group { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* The certification strip already draws a hairline and its own top margin; two stacked rules read as a double divider. */ .hw-footer .site-footer__certs + .site-footer__bar { margin-top: clamp(2rem, 4vw, 2.75rem); } /* ══════════════════════════════════════════════════════════════════════════ HYWER — Design-specific components Chip-tabs, arrow-links, split rows, people grid, office cards, quotes (used on Tjenester, Karriere, Kontakt pages via core/html blocks) ══════════════════════════════════════════════════════════════════════════ */ /* ── Page section wrapper ─────────────────────────────────────────────── */ .hw-section { padding-block: clamp(3.5rem,7vw,6rem); } .hw-section--tight { padding-block: clamp(2.5rem,5vw,4rem); } .hw-container { width:100%; max-width:var(--cb-content-rail); margin-inline:auto; padding-inline:var(--cb-content-gutter); box-sizing:content-box; } /* ── Typography ─────────────────────────────────────────────────────────── */ .hw-display { font-family: var(--font-sans,'Nunito',system-ui,sans-serif); font-weight: 800; line-height: 1.04; letter-spacing: -0.015em; color: var(--primary,#12364e); margin: 0; font-size: clamp(2.1rem,4.4vw,3.2rem); } .hw-serif-head { font-family: var(--font-sans,'Nunito',system-ui,sans-serif); font-weight: 400; line-height: 1.12; color: var(--primary,#12364e); margin: 0; font-size: clamp(1.65rem,3.1vw,2.5rem); } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .hw-btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; padding: 14px 26px; border: none; border-radius: 2px; cursor: pointer; text-decoration: none; } .hw-btn--teal { background: var(--secondary,#5ab4ba); color: var(--primary,#12364e); } .hw-btn--teal:hover { background: #4a9ea4; color: var(--primary,#12364e); } /* ── Arrow-circle link ───────────────────────────────────────────────────── */ .hw-arrow-link { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary,#12364e); text-decoration: none; transition: gap 0.15s; } .hw-arrow-circle { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--secondary,#5ab4ba); color: #fff; } .hw-arrow-circle svg { width:14px; height:14px; } .hw-arrow-link--plum .hw-arrow-circle { background: var(--accent,#96607e); } .hw-arrow-link:hover { gap: 18px; } /* ── Chip tabs (Tjenester services selector) ─────────────────────────────── */ .hw-chips { display:flex; flex-wrap:wrap; gap:10px; max-width:880px; margin-top:2.2rem; } .hw-chip { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--primary,#12364e); background: var(--secondary,#5ab4ba); border:none; border-radius:2px; padding:11px 16px; cursor:pointer; transition: background .15s, color .15s; } .hw-chip:hover { background: #4a9ea4; } .hw-chip.is-active { background: var(--accent,#96607e); color:#fff; } .hw-panel { margin-top:clamp(2.5rem,5vw,4rem); display:none; } .hw-panel.is-active { display:block; } .hw-panel.anim { animation: hw-fadeup .4s ease; } @keyframes hw-fadeup { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .hw-panel-body { max-width:64ch; color:#2e2e2b; } .hw-product-links { display:flex; flex-direction:column; gap:1.1rem; margin-top:2rem; align-items:flex-start; } /* ── Split rows (Karriere) ───────────────────────────────────────────────── */ .hw-splits { display:flex; flex-direction:column; gap:clamp(3rem,6vw,5rem); } .hw-split { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; } .hw-split__text { max-width:46ch; } .hw-split__text .hw-display, .hw-split__text .hw-serif-head { margin-bottom:1.3rem; } .hw-split__text .hw-arrow-link { margin-top:1.6rem; display:inline-flex; } .hw-split__img { aspect-ratio:4/3; background:var(--muted,#cdc9c0); overflow:hidden; } @media (max-width:820px) { .hw-split { grid-template-columns:1fr; } } /* ── People/contact grid ─────────────────────────────────────────────────── */ .hw-divider { height:1px; background:var(--primary,#12364e); opacity:.5; margin-bottom:2.5rem; } .hw-people { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,4rem); margin-top:2.5rem; max-width:880px; } .hw-person { display:grid; grid-template-columns:110px 1fr; gap:1.5rem; align-items:start; } .hw-person__photo { width:110px; height:130px; background:var(--muted,#cdc9c0); overflow:hidden; } .hw-person__name { font-weight:800; color:var(--primary,#12364e); font-size:1.05rem; } .hw-person__role { color:#6b6963; font-size:14px; margin-bottom:1rem; } .hw-person__contact { font-size:14px; color:#2e2e2b; line-height:1.6; } .hw-person__contact a { color:inherit; text-decoration:none; } .hw-person__contact a:hover { color:var(--accent,#96607e); } @media (max-width:640px) { .hw-people { grid-template-columns:1fr; } } /* ── Office cards (Kontakt) ──────────────────────────────────────────────── */ .hw-office-cards { display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:1.5rem; } .hw-office-card { background:var(--primary,#12364e); color:#fff; padding:clamp(1.6rem,3vw,2.4rem); } .hw-office-card h3 { font-weight:800; font-size:1.7rem; margin:0 0 1rem; color:#fff; } .hw-office-card p { color:rgba(255,255,255,.8); font-size:15px; line-height:1.7; margin:0; } @media (max-width:640px) { .hw-office-cards { grid-template-columns:1fr; } } /* ── Testimonial / quote ─────────────────────────────────────────────────── */ .hw-quote-wrap { position:relative; padding-block:clamp(3rem,7vw,6rem); } .hw-quote-block { position:relative; z-index:1; max-width:620px; margin-inline:auto; } .hw-quote-block blockquote { font-weight:600; color:var(--primary,#12364e); font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.3; margin:0 0 1.4rem; } .hw-quote-block cite { font-style:normal; font-size:14px; color:#6b6963; line-height:1.4; display:block; } .hw-quote-block cite strong { color:var(--primary,#12364e); font-weight:700; display:block; } .hw-quote-rule { width:56px; height:3px; background:var(--accent,#96607e); margin-top:1.4rem; } /* ── Aktuelt card grid ───────────────────────────────────────────────────── */ .hw-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-top:2.5rem; } .hw-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; } .hw-card__media { aspect-ratio:4/3; overflow:hidden; background:var(--muted,#cdc9c0); margin-bottom:1.3rem; } .hw-card__title { font-weight:700; font-size:1.2rem; line-height:1.2; color:var(--primary,#12364e); margin:0 0 1rem; } .hw-les-mer { display:inline-flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--primary,#12364e); } .hw-les-mer .hw-arrow-circle { width:26px; height:26px; } @media (max-width:980px) { .hw-card-grid { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .hw-card-grid { grid-template-columns:1fr; } } @media (max-width: 980px) { .hw-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .hw-footer__grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ HYWER — Aktuelt news grid (Query Loop) — equal-height cards ══════════════════════════════════════════════════════════════════════════ */ /* ── Consistent content container for listing pages ────────────────────── Heading + grid share ONE 1180 container with a gutter, so they align with each other (and the header) and never bleed to the viewport edge. Fixes the "title shifted out of the parent template" break. */ .hw-listing-head, .cb-page-main .wp-block-query { max-width: var(--cb-content-rail); margin-inline: auto; padding-inline: var(--cb-content-gutter); box-sizing: content-box; } /* Aktuelt listing top — small left-aligned title (no big hero), per XD. */ .hw-listing-head { padding-top: clamp(48px, 7vw, 84px); } .hw-listing-title { font-family: var(--wp--preset--font-family--display, 'Josefin Sans', sans-serif); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -0.015em; color: #161616; /* design: heavy near-black display, not navy */ margin: 0; } /* Spacing between the listing title and the news grid. */ .cb-page-main .wp-block-query { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); } .wp-block-query .wp-block-post-template.is-layout-grid { gap: clamp(1.5rem, 3vw, 2rem); align-items: stretch; } .wp-block-query .wp-block-post-template > li { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; background: transparent; /* de-chromed per design — image + text on the page bg */ overflow: hidden; } /* Whole-card click target — stretch the title's link over the entire card, so the full card (image + title + Les mer) is clickable, not just the text. */ .wp-block-query .wp-block-post-template > li .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wp-block-query .wp-block-post-template > li:hover .wp-block-post-featured-image img { transform: scale(1.04); } /* Keep the explicit "Les mer" above the stretched link for its own hover. */ .wp-block-query .wp-block-post-template > li .wp-block-read-more { position: relative; z-index: 2; } /* Image placeholder — same box size as a real featured image, with a dimmed Hywer logo centred, so cards never look broken when a post has no photo. */ .wp-block-query .wp-block-post-template > li::before { content: ""; display: block; width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(rgba(221, 215, 207, 0.72), rgba(221, 215, 207, 0.72)), url("/wp-content/themes/hywer-theme/assets/logo.png") center / 132px auto no-repeat, var(--surface, #DDD7CF); } /* Real featured image present → drop the placeholder. */ .wp-block-query .wp-block-post-template > li:has(.wp-block-post-featured-image img)::before { display: none; } .wp-block-query .wp-block-post-template > li .wp-block-post-featured-image { display: block; margin: 0; aspect-ratio: 4 / 3; background: var(--surface, #eaeae4); overflow: hidden; } .wp-block-query .wp-block-post-template > li .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .wp-block-query .wp-block-post-template > li .wp-block-post-title { margin: 0; padding: 1.1rem 0 0; /* de-chromed: align to the image's left edge */ font-size: 1.3rem; line-height: 1.22; font-weight: 700; } .wp-block-query .wp-block-post-template > li .wp-block-post-title a { color: #161616; /* design: near-black card title, not navy */ text-decoration: none; } /* "Les mer" → design treatment: uppercase tracked label + teal arrow-circle. */ .wp-block-query .wp-block-post-template > li .wp-block-read-more { margin: 1rem 0 0; margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 12px; color: #161616; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .wp-block-query .wp-block-post-template > li .wp-block-read-more .hw-arrow-circle { width: 26px; height: 26px; } .wp-block-query .wp-block-post-template > li .wp-block-read-more:hover .hw-arrow-circle { transform: translateX(2px); } .hw-arrow-circle { transition: transform 0.15s ease; } /* Sitater: «...» legges på automatisk av styrk-blocks (::before/::after). Plugin-en strippar bort eventuelle manuelt skrivne «» i teksten først, så vi får nøyaktig eitt par — difor ingen override her lenger. */ /* Fjern stjerne-rating på testimonial — ikke i Hywer-designet (off-brand). */ .cb-testimonial-figure::before { content: none !important; } /* The decorative «vass-dråpe» behind the quote is no longer hardcoded here. * It is now an author-chosen background shape (image + placement) on the * testimonial block itself (SectionBgShape → cb_render_bg_shape), like the * other section blocks. Keep position:relative so that shape (absolutely * positioned, clipped by the block's overflow:hidden) layers behind content. */ .cb-block-testimonial { position: relative; } .cb-block-testimonial > * { position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════════════════ HYWER — Article (single post), matches hywer-nytt-nettside-design/Artikkel.html ══════════════════════════════════════════════════════════════════════════ */ .hw-breadcrumb-bar { background: var(--surface, #DDD7CF); /* Air between the sticky header and the back-toggle (forced — core's constrained-layout styles otherwise flatten the vertical padding). */ padding-top: clamp(28px, 4vw, 44px) !important; padding-bottom: 16px !important; } /* Align the back-link under the site logo: both the breadcrumb and the header now ride the shared content rail, so matching the rail here puts the arrow circle directly beneath the logo at every width. */ .hw-breadcrumb-bar > .hw-backlink { margin: 0 auto; max-width: var(--cb-content-rail) !important; box-sizing: content-box; padding-inline: var(--cb-content-gutter); } .hw-backlink a { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary, #12364e); text-decoration: none; } .hw-backlink a::before { content: "←"; width: 30px; height: 30px; border-radius: 50%; background: var(--primary, #12364e); color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; transition: background 0.2s ease; } .hw-backlink a:hover::before { background: var(--accent, #96607e); } /* Article column — centred, with breathing room below the sticky header */ .hw-article { padding-block: clamp(2.5rem, 5vw, 4.5rem); } /* Article image banner placeholder (dimmed logo) when the post has no photo, so the article never starts bare/“heroless”. Hidden once a real image set. */ .hw-article::before { content: ""; display: block; width: 100%; max-width: 820px; margin-inline: auto; aspect-ratio: 16 / 9; margin-bottom: clamp(2rem, 4vw, 3.5rem); border-radius: 2px; background: linear-gradient(rgba(221, 215, 207, 0.72), rgba(221, 215, 207, 0.72)), url("/wp-content/themes/hywer-theme/assets/logo.png") center / 160px auto no-repeat, var(--surface, #DDD7CF); } .hw-article:has(.wp-block-post-featured-image img)::before { display: none; } .hw-article__img { margin-bottom: clamp(2rem, 4vw, 3.5rem); border-radius: 2px; overflow: hidden; background: var(--surface, #eaeae4); } .hw-article__img img { width: 100%; height: 100%; object-fit: cover; } .hw-article__title { font-family: var(--wp--preset--font-family--display, 'Nunito', sans-serif); font-weight: 400; line-height: 1.12; letter-spacing: 0; font-size: clamp(2rem, 4vw, 3rem); color: var(--primary, #12364e); margin: 0 0 1.6rem; } .hw-article .wp-block-post-content { color: #3a3a36; font-size: 1.05rem; line-height: 1.75; } .hw-article .wp-block-post-content > * + * { margin-top: 1.2rem; } /* Prev / next — teal buttons per fasit */ .hw-article__nav { display: flex; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; } .hw-btn--teal, .hw-article__nav a { display: inline-flex; align-items: center; gap: 0.6em; background: var(--secondary, #5ab4ba); color: var(--primary, #12364e); font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; padding: 14px 26px; border-radius: 2px; text-decoration: none; white-space: nowrap; } .hw-article__nav a:hover { filter: brightness(0.95); } /* Hide an empty prev/next slot when there is no adjacent article */ .hw-article__nav a:empty, .hw-article__nav .wp-block-post-navigation-link:empty { display: none; } /* ── Megamenu — Hywer turbine (rotating symbol mark), brand-specific ────────── * * Painted on the megamenu's OWN ::before rather than on a div the plugin * renders. The turbine is Hywer branding; styrk-blocks is shared across every * client site and should not carry a `__turbine` class for us. It did, and when * a plugin PR removed that div the mark silently vanished from the live site * with no error anywhere — the theme was styling markup it did not own. * * ::before needs no cooperation from the plugin: `.rh-megamenu` is * `position:fixed`, so it is already the containing block. `pointer-events:none` * keeps it clear of menu clicks, and z-index 0 puts it behind the panel (which * this file raises to z-index 1 below). */ .rh-megamenu::before { content: ""; position: absolute; inset: 0; margin: auto; pointer-events: none; z-index: 0; background: url(/wp-content/themes/hywer-theme/assets/symbol-white.png) center / contain no-repeat; opacity: 0.13; animation: hw-turbine-spin 38s linear infinite; } @keyframes hw-turbine-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rh-megamenu::before { animation: none; } } /* MOBILE: one big centred whirl behind the whole overlay. (Centre with width + * negative margins, not transform — transform drives the spin.) */ @media (max-width: 860px) { /* matches the plugin's mobile-column megamenu breakpoint */ .rh-megamenu::before { width: 130vw; height: 130vw; inset: auto auto auto 50%; top: 50%; margin: -65vw 0 0 -65vw; /* Match the desktop watermark (0.06). At 130vw the mobile whirl covers the * whole overlay, so the previous 0.12 read as noisy background clutter. */ opacity: 0.06; } .rh-megamenu__panel { position: relative; z-index: 1; } /* Align the menu's left gutter with the site gutter (logo + hero sit at 16px; * the panel was 24px → menu items didn't line up under the logo). */ .rh-megamenu__panel { padding-left: 16px !important; padding-right: 16px !important; } } /* DESKTOP megamenu (Hywer): Hywer's header is ~132px (top-bar + nav) while the * plugin only pads the overlay down 100px, so the first row sat ~24px under the * bar and read as clipped. ONE faint full-bleed whirl behind the whole menu + * full-width, centred, evenly-aligned columns with a real gap below the header. */ @media (min-width: 861px) { .rh-megamenu { padding-top: 0 !important; } /* One big, faint, centred watermark (fainter than mobile → less noisy). */ .rh-megamenu::before { width: 86vh; height: 86vh; left: 50%; top: 50%; right: auto; bottom: auto; margin: -43vh 0 0 -43vh; opacity: 0.06; } /* Panel fills the screen; content contained, centred, clears the 132px * header with a comfortable gap. */ .rh-megamenu__panel { position: relative; z-index: 1; padding: 176px clamp(40px, 6vw, 96px) 72px !important; } .rh-megamenu__groups { /* Center ALL the menu columns as one cluster, with truly equal margins * left + right. The grid shrink-wraps to its 3 content-sized columns * (width:max-content) and margin-inline:auto centres that block exactly in * the panel — independent of any scrollbar bias that left justify-content * ~8px off-centre. max-width:100% keeps it safe on the narrowest desktop. */ width: max-content; max-width: 100%; margin-inline: auto; grid-template-columns: repeat(3, max-content) !important; justify-content: center !important; gap: clamp(44px, 6vh, 76px) clamp(64px, 7vw, 150px) !important; align-content: start; } /* Reserve scrollbar space on both edges so the centred cluster doesn't shift * left when the panel (or page behind the fixed overlay) shows a scrollbar. */ .rh-megamenu__panel { scrollbar-gutter: stable both-edges; } } /* Desktop nav + hamburger/megamenu trigger together (customer structure: main nav + søk + hamburger→megameny) is now driven by Settings → Header → "Desktop navigation" = "Menu + megamenu icon", not a theme hardcode — so it's editable and other sites can pick a different mode. (Plugin owns the show/hide CSS.) */ /* The spinning turbine does NOT belong inside the "Produktene & tjenestene * våre" section — it is not in the design. Removed. (The turbine lives only in * the megamenu brand panel.) */ /* ── Employee / contact cards (Kontakt + Tjenester) ────────────────────────── * Match the design: clean HORIZONTAL cards — square photo left, text right — * with NO white-card chrome (the default grid card is a vertical white card). * Hywer-specific; other sites keep the default card. */ /* These cards run in FULL mode (trigger is a