/* Theme Name: Nittsjö Keramik Theme URI: https://nittsjokeramik.se/ Author: Balonka Description: Block theme for Nittsjö Keramik — a fast, responsive full-site-editing theme for the handcrafted ceramics factory in Rättvik. Layout, colour and typography live in theme.json; this file carries only the rules blocks cannot express. Version: 1.0.0 Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: nittsjokeramik Tags: e-commerce, full-site-editing, block-patterns, custom-colors, custom-logo, wide-blocks, accessibility-ready */ /* ------------------------------------------------------------------------- * Base * ---------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; /* Must be `clip`, not `hidden`: `hidden` turns into a scroll container, which silently stops the sticky header from sticking. `clip` prevents sideways scrolling without creating that container. */ overflow-x: clip; /* So in-page anchors do not land underneath the sticky header. Measured header row is 121px on desktop and 81px once the menu collapses. */ --nk-header-height: 121px; scroll-padding-top: calc(var(--nk-header-height) + 1rem); } @media (max-width: 1139px) { html { --nk-header-height: 81px; } } /* Logged-in editors also have the admin bar above the sticky header. */ html:has(body.admin-bar) { scroll-padding-top: calc(var(--nk-header-height) + 32px + 1rem); } @media screen and (max-width: 782px) { html:has(body.admin-bar) { scroll-padding-top: calc(var(--nk-header-height) + 46px + 1rem); } } @media screen and (max-width: 600px) { html:has(body.admin-bar) { scroll-padding-top: calc(var(--nk-header-height) + 1rem); } } /* Nothing should ever make the page scroll sideways. Wide content (tables, galleries) gets its own scroll container instead -- see further down. */ body { overflow-x: clip; max-width: 100vw; } /* Long unbroken words (Swedish compounds, URLs) must not push the layout out. */ h1, h2, h3, h4, h5, h6, p, li, a { overflow-wrap: break-word; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Visible, on-brand focus ring for keyboard users only. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--clay); outline-offset: 2px; } /* Visually hidden, still read by screen readers and still in the document outline. Used for the page h1 on templates that show no visible title. */ .screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — hidden until focused. */ .nk-skip-link { position: absolute; left: -9999px; z-index: 999999; padding: 0.85rem 1.5rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); font-size: 0.875rem; text-decoration: none; } .nk-skip-link:focus { left: 1rem; top: 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- * Announcement bar * ---------------------------------------------------------------------- */ .nk-announcement { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } .nk-announcement p { margin: 0; } /* ------------------------------------------------------------------------- * Sticky header * * The whole header block sticks, announcement strip included. A sticky element * can only move within its own parent's box, so sticking just the logo/menu row * would pin it for the height of the announcement bar and then release -- * making the outer wrapper the sticky element is what keeps it fixed for the * whole page. Requires to use overflow-x: clip rather than hidden. * ---------------------------------------------------------------------- */ /* Collapse the template-part wrapper so it generates no box of its own. Its two children -- the announcement strip and the header row -- then become direct children of .wp-site-blocks, which spans the whole page. That is what gives the sticky row room to travel: a sticky box can only move within its parent's box, and any wrapper here would be exactly as tall as the header. The class comes from the template's template-part call, so the footer part is unaffected. Safe on a plain div -- no background, border or semantics are lost, and the

landmark still generates its own box below. */ .wp-block-template-part.nk-header-part { display: contents; } /* Height of the WordPress admin bar, so the sticky header pins below it rather than underneath it when an editor is logged in. WordPress uses 32px from 783px up, 46px below that, and switches the bar from fixed to absolute at 600px and under -- where it scrolls away, so the header goes back to 0. */ body { --nk-admin-bar: 0px; } body.admin-bar { --nk-admin-bar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --nk-admin-bar: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --nk-admin-bar: 0px; } } /* Only the logo/menu/icons row pins; the announcement strip scrolls away. */ .wp-block-group.nk-header { position: sticky; top: var(--nk-admin-bar, 0px); /* Above page content and the hero video, below WooCommerce's cart drawer and the navigation overlay, which set their own much higher values. */ z-index: 100; } /* The strip sits in normal flow above it, with no block-gap of its own. */ .wp-block-group.nk-announcement { margin-block-start: 0; margin-block-end: 0; } /* Separates the header from the page content below it, and gives the sticky bar a defined edge as content passes underneath. */ .nk-header { border-bottom: 1px solid var(--wp--preset--color--stone); /* Restated here so the sticky row is never transparent over scrolling content, whatever the block attribute says. */ background-color: var(--wp--preset--color--white); } /* The header row is a sibling of the announcement bar inside the same group, so WordPress's block gap lands 1.5rem of margin-block-start on it and nothing below -- which reads as extra space above the logo. Zero the gap and own the vertical rhythm here instead, so the padding above and below is genuinely equal. Padding lives in CSS rather than as an inline block style so this rule does not have to fight an inline declaration. */ .wp-block-group.nk-header { margin-block-start: 0; margin-block-end: 0; padding-top: 1.25rem; padding-bottom: 1.25rem; } /* ------------------------------------------------------------------------- * Buttons — the "quiet link" variant used for editorial CTAs * ---------------------------------------------------------------------- */ .wp-block-button.is-style-underline-link .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); padding: 0 0 0.35rem; border-bottom: 1px solid var(--wp--preset--color--ink); border-radius: 0; } .wp-block-button.is-style-underline-link .wp-block-button__link:hover, .wp-block-button.is-style-underline-link .wp-block-button__link:focus { background: transparent; color: var(--wp--preset--color--clay); border-bottom-color: var(--wp--preset--color--clay); } /* Outline buttons sit on photography, so they need a solid border. */ .wp-block-button.is-style-outline .wp-block-button__link { border-width: 1px; } /* ------------------------------------------------------------------------- * Editorial helpers * ---------------------------------------------------------------------- */ /* Small uppercase eyebrow label above a heading. */ .nk-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--stone-dark); } /* Images that should fill their column edge to edge at any aspect ratio. */ .nk-image-cover img { width: 100%; height: 100%; object-fit: cover; } /* Closing photograph on the front page: fills the width, held to a band proportion rather than the image's own tall ratio. */ .nk-closing-image img { display: block; width: 100%; aspect-ratio: 16 / 7; max-height: 620px; object-fit: cover; } @media (max-width: 781px) { .nk-closing-image img { aspect-ratio: 3 / 2; max-height: 360px; } } /* ------------------------------------------------------------------------- * Feature bands — the five two-column sections between hero and products * ---------------------------------------------------------------------- */ /* Full-bleed halves, matching the bands on Produktion: the photograph runs to the band edge and fills the full height, the copy carries the padding. */ /* Desktop only. None of this applies once the band stacks -- absolute positioning and a column flex context both fight the stacked layout, so the phone simply gets ordinary block flow instead. */ @media (min-width: 782px) { .nk-feature .nk-feature-media { display: flex; flex-direction: column; padding: 0; align-self: stretch; } /* The photograph is taken out of flow so it contributes no intrinsic height: the copy decides how tall the band is and the image crops to fill it. Left in flow, an keeps its own aspect (a 720px-wide portrait stands 1080px tall) and drags the whole band with it -- flex-basis:0 on the figure is not enough, because the height comes from the image itself. */ .nk-feature .nk-feature-image { margin: 0; position: relative; flex: 1 1 auto; /* A portrait-leaning crop: the band was reading wide and shallow when its height came only from the copy. aspect-ratio gives the picture its own say again, and the floor keeps short-copy bands from collapsing. */ aspect-ratio: 6 / 5; min-height: 600px; width: 100%; } .nk-feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .nk-feature .nk-feature-body { max-width: none; padding-top: clamp(2.5rem, 4vw, 4.5rem); padding-bottom: clamp(2.5rem, 4vw, 4.5rem); padding-left: clamp(1.5rem, 3vw, 3.5rem); padding-right: clamp(1.5rem, 3vw, 3.5rem); } /* Hold the copy to a readable measure inside its half. */ .nk-feature .nk-feature-body > * { max-width: 34rem; } } .nk-feature-body p:last-of-type { margin-bottom: 0; } /* Links inside a dark band need to pick up the light text colour. */ .nk-feature--dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--white); } @media (max-width: 781px) { /* Stacked: the photograph leads, then the copy. Nothing else is needed -- the desktop rules are gated behind min-width: 782px. */ .nk-feature .nk-feature-media { order: 1; } .nk-feature .nk-feature-body { order: 2; /* The desktop padding lives behind min-width:782px, so the stacked copy needs its own or it runs flush to the screen edge. Same clamps as desktop, which bottom out at 40px / 24px on a phone. */ padding-top: clamp(2.5rem, 4vw, 4.5rem); padding-bottom: clamp(2.5rem, 4vw, 4.5rem); padding-left: clamp(1.5rem, 3vw, 3.5rem); padding-right: clamp(1.5rem, 3vw, 3.5rem); } .nk-feature .nk-feature-image { margin: 0; } .nk-feature-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } } /* Editorial images in a two-column band: hold a portrait crop so a very tall source photograph cannot stretch the whole section. */ .nk-portrait img { aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover; } @media (max-width: 781px) { .nk-portrait img { aspect-ratio: 3 / 2; max-height: 340px; } } /* Subtle zoom on hover for linked editorial imagery. */ .nk-zoom-on-hover { overflow: hidden; } .nk-zoom-on-hover img { transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1); } .nk-zoom-on-hover:hover img { transform: scale(1.04); } /* ------------------------------------------------------------------------- * Header layout * * Desktop: one row -- [logo] [centred nav] [icons], matching the current site. * Mobile: one row -- [hamburger] [logo] [icons]. * * NOTE ON SPECIFICITY * WordPress prints its per-block layout rules (.wp-container-core-group-is- * layout-xxxx { display:flex }) as inline