/* Neverlift — supporting styles for the native block theme. * * Almost all design lives in theme.json (palette, fonts, sizes, spacing, element/ * block styles). This file only covers the few things core blocks + theme.json * can't express: the rotating hero, the gallery crop/hover, and the two-tone * accent word. It is loaded on the front end AND in the editor (add_editor_style), * so it must be editor-safe — no dark `body` rule, nothing that hides content. */ /* ---- Two-tone accent words ------------------------------------------------- Accent words in headings use (the native inline-color format bound to the theme palette). defaults to a yellow highlight — neutralize it so only the accent text colour shows. */ mark.has-inline-color { background-color: transparent; } /* ---- Landing hero: rotating cross-fading photos --------------------------- The photos are native Image blocks (.nlm-hero-slide) the editor can swap; hero.js cross-fades them. On the front end they stack as full-bleed slides; in the editor (no .nlm-hero-landing height) they remain a normal vertical list of images so each is easy to select and replace. */ .nlm-hero-landing { position: relative; min-height: 100dvh; overflow: hidden; } .nlm-hero-landing .nlm-hero-slides { position: absolute; inset: 0; margin: 0; } /* All hero overlays fill via inset:0 — strip the blockGap top-margin WordPress adds to the non-first group children, which pushed the scrim (and name/dots) ~24px down and exposed an undimmed strip of the photo at the very top. */ .nlm-hero-landing > * { margin: 0; } .nlm-hero-landing .nlm-hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s ease-in-out; } .nlm-hero-landing .nlm-hero-slide.is-active { opacity: 1; } .nlm-hero-landing .nlm-hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .nlm-hero-landing .nlm-hero-slide.is-active img { animation: nlm-kenburns 28s ease-in-out infinite; will-change: transform; } @keyframes nlm-kenburns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.08) translate(-1.5%,-1%); } 100% { transform: scale(1) translate(0,0); } } @media (prefers-reduced-motion: reduce) { .nlm-hero-landing .nlm-hero-slide img { animation: none !important; } } /* Scrim so the white name + tabs stay legible over any photo. */ .nlm-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.68)); } .nlm-hero-content { position: relative; z-index: 2; } .nlm-hero-content :where(h1, .wp-block-heading) { text-shadow: 0 2px 24px rgba(0,0,0,0.6); } /* Rotation dots (generated by hero.js). */ .nlm-hero-dots { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 3; display: flex; gap: 0.375rem; } @media (min-width: 781px) { .nlm-hero-dots { right: 2.5rem; bottom: 2rem; } } .nlm-hero-dot { height: 4px; width: 12px; border: 0; padding: 0; border-radius: 9999px; background: rgba(245,243,240,0.4); transition: all 0.3s ease; cursor: pointer; } .nlm-hero-dot:hover { background: rgba(245,243,240,0.7); } .nlm-hero-dot.is-active { width: 28px; background: var(--wp--preset--color--accent, #e54648); } /* Centered name + tabs overlaid on the full-screen hero. */ .nlm-hero-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; gap: 1.5rem; } .nlm-hero-content .wp-block-buttons { justify-content: center; } .nlm-hero-content .wp-block-button__link { text-shadow: 0 1px 8px rgba(0,0,0,0.5); } /* Mobile: at most 3 tabs per line, so the 5 links split 3 + 2 (never 4 + a lonely 1), each line centered. A full-width flex break (order:2) forces the wrap after the 3rd tab. */ @media (max-width: 600px) { .nlm-hero-content .wp-block-buttons { flex-wrap: wrap; } .nlm-hero-content .wp-block-buttons > .wp-block-button:nth-child(-n+3) { order: 1; } .nlm-hero-content .wp-block-buttons::before { content: ""; order: 2; flex-basis: 100%; width: 100%; height: 0; } .nlm-hero-content .wp-block-buttons > .wp-block-button:nth-child(n+4) { order: 3; } } /* Hide the sticky header + footer on the front page so the hero owns the screen. */ body:has(.nlm-hero-landing) .wp-site-blocks > header, body:has(.nlm-hero-landing) .wp-site-blocks > footer { display: none; } /* The header is hidden on the landing page, but WordPress still gives
the blockGap top margin meant to separate it from the header — that left a ~24px dark strip above the hero (and pushed the hero below the fold). Zero it on the landing only. */ body:has(.nlm-hero-landing) .wp-site-blocks > main { margin-block-start: 0; } /* Sticky footer so the footer sits at the bottom on short pages. */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100dvh; } .wp-site-blocks > main { flex: 1 0 auto; } /* "Underline" button style — the text-link tabs (hero) + inline links. */ .wp-block-button.is-style-underline > .wp-block-button__link { background-color: transparent !important; color: var(--wp--preset--color--foreground, #f5f3f0) !important; border: 0 !important; border-bottom: 1px solid rgba(245,243,240,0.7) !important; border-radius: 0 !important; padding: 0 0 0.25rem !important; } .wp-block-button.is-style-underline > .wp-block-button__link:hover { color: var(--wp--preset--color--accent, #e54648) !important; border-bottom-color: var(--wp--preset--color--accent, #e54648) !important; } /* ---- Category galleries: uniform 3:2 grid + hover zoom -------------------- Core Gallery lays images in a flex grid; enforce a tidy responsive 1/2/3-col grid of 3:2 tiles (full photo opens in the native lightbox on click), with the slow hover-zoom from the original design. */ .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); } } .wp-block-gallery.has-nested-images > figure.wp-block-image { margin: 0 !important; width: auto !important; overflow: hidden; background: var(--wp--preset--color--surface, #181615); } .wp-block-gallery.has-nested-images > figure.wp-block-image img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s ease; } .wp-block-gallery.has-nested-images > figure.wp-block-image:hover img { transform: scale(1.03); } /* ---- WPForms (contact) — match the dark theme ----------------------------- */ /* !important: WPForms' own stylesheet loads after this and sets labels to a near-black default; without it, labels are unreadable on the dark theme. White (foreground) to match the site's other headings; the required-field asterisk stays WPForms' default red. */ .wpforms-container .wpforms-field-label { color: var(--wp--preset--color--foreground, #f5f3f0) !important; font-family: var(--wp--preset--font-family--display, "Bebas Neue"), sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.85rem; font-weight: 400; } /* Sublabels, field descriptions, and the confirmation message also default to dark from WPForms — keep them legible (muted) on the dark background. */ .wpforms-container .wpforms-field-sublabel, .wpforms-container .wpforms-field-description, .wpforms-container .wpforms-confirmation-container-full, .wpforms-container .wpforms-confirmation-container-full p { color: var(--wp--preset--color--muted, #a8a39d) !important; } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="url"], .wpforms-container textarea, .wpforms-container select { background-color: transparent !important; color: var(--wp--preset--color--foreground, #f5f3f0) !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--border, #2a2826) !important; border-radius: 0 !important; padding: 0.6rem 0 !important; box-shadow: none !important; } .wpforms-container input:focus, .wpforms-container textarea:focus, .wpforms-container select:focus { border-bottom-color: var(--wp--preset--color--accent, #e54648) !important; outline: none !important; box-shadow: none !important; } .wpforms-container ::placeholder { color: var(--wp--preset--color--muted-2, #6e6863); } .wpforms-container button[type="submit"] { background-color: var(--wp--preset--color--accent, #e54648) !important; color: #fff !important; border: 0 !important; border-radius: 2px !important; font-family: var(--wp--preset--font-family--display, "Bebas Neue"), sans-serif; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.9rem 1.9rem !important; transition: background-color 0.2s ease; } .wpforms-container button[type="submit"]:hover { background-color: var(--wp--preset--color--accent-strong, #f15859) !important; } /* ---- Sticky header polish ------------------------------------------------- The header template part is a Group with the .nlm-header class; keep it sticky + above content. (Colours/blur via theme.json + block settings.) */ /* No backdrop-filter: the header background is already opaque (so blur added nothing visible), and a backdrop-filter ancestor makes itself the containing block for the mobile nav's position:fixed overlay — which trapped the hamburger menu inside the header box and caused gray repaint bands on iOS. */ .nlm-header { position: sticky; top: 0; z-index: 50; } .admin-bar .nlm-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .nlm-header { top: 46px; } } /* ---- WooCommerce (shop) — dark-theme form controls ------------------------ The variation