/* Theme Name: Christina Skei Theme URI: https://christinaskei.no Author: Codehouse Author URI: https://codehouse.no Description: Editorial block-based theme for Christina Skei — personlig trener, online coach, yogainstruktør. Version: 0.1.0 Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: christinaskei Tags: block-theme, editorial, full-site-editing, one-column, custom-colors, custom-menu */ /* ------------------------------------------------------------------------- * Fixed header * * Targets the outer template-part wrapper so the inner group can stay * style-able from the editor. JS toggles `is-header-transparent` on body * for home: starts transparent over the hero, fades to solid bone+blur * once user scrolls past 60px. Sub-pages skip the toggle and stay solid. * * Alternative considered: always solid bone+blur from the first paint * (literal prototype spec, no JS). Simpler. Trade-off is loss of editorial * full-bleed feel on the hero. See PLAN.md for the toggle. * ------------------------------------------------------------------------- */ .wp-site-blocks > header.wp-block-template-part { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 100; } .wp-site-blocks > header.wp-block-template-part .wp-block-site-logo a, .wp-site-blocks > header.wp-block-template-part .wp-block-site-logo a:hover { text-decoration: none; } .wp-site-blocks > header.wp-block-template-part > header.wp-block-group { background-color: rgba(246, 241, 232, 0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--wp--preset--color--sand); transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease; } /* When the mobile menu is open, drop the header's backdrop-filter — it * creates a containing block for fixed descendants (per spec), which traps * the overlay (.wp-block-navigation__responsive-container) at the header's * dimensions instead of letting it span the viewport. WP toggles * .has-modal-open on when the overlay opens. */ html.has-modal-open .wp-site-blocks > header.wp-block-template-part > header.wp-block-group { -webkit-backdrop-filter: none; backdrop-filter: none; } body.is-header-transparent .wp-site-blocks > header.wp-block-template-part > header.wp-block-group { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } body.is-header-transparent .wp-site-blocks > header.wp-block-template-part .wp-block-site-logo img { filter: brightness(0) invert(1); transition: filter 200ms ease; } body.is-header-transparent .wp-site-blocks > header.wp-block-template-part .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--bone); transition: color 200ms ease; } body.is-header-transparent:not(.has-modal-open) .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a { color: var(--wp--preset--color--bone); transition: color 200ms ease; } .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a { transition: color 200ms ease; } .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a:hover, body.is-header-transparent:not(.has-modal-open) .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a:hover { color: var(--wp--preset--color--terracotta); } .wp-site-blocks > header.wp-block-template-part .wp-block-navigation a:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 4px; } /* "Kom i gang" CTA — straight-edge terracotta button, sits next to the nav * with breathing room and stays visible at mobile widths (the nav itself * collapses to a hamburger). Hover flips to ink. */ .cs-header-end { gap: 48px; flex-wrap: nowrap; } .cs-header-cta .wp-block-button__link { background-color: var(--wp--preset--color--terracotta) !important; color: var(--wp--preset--color--bone) !important; border-radius: 0; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; } /* Hide the CTA on narrow viewports — needs a better mobile placement * (e.g. inside the menu overlay or below the nav). Tracked in PLAN. */ @media (max-width: 600px) { .cs-header-cta { display: none; } } .cs-header-cta .wp-block-button__link:hover { background-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--bone) !important; } /* ------------------------------------------------------------------------- * Responsive grid collapse * * WP's grid layout serializes columnCount inline as * grid-template-columns: repeat(N, minmax(0, 1fr)) — inline + high specificity. * To stack on narrow viewports without rewriting every pattern, override with * !important at our breakpoints. Below 600px → 1 col. 601–900px → 2 cols. * Above 900px the pattern's authored columnCount stands. * ------------------------------------------------------------------------- */ @media (max-width: 600px) { .wp-site-blocks .wp-block-group.is-layout-grid, .wp-site-blocks .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; } } @media (min-width: 601px) and (max-width: 900px) { .wp-site-blocks .wp-block-group.is-layout-grid, .wp-site-blocks .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr 1fr !important; } } /* Defensive horizontal-clip on root: any future content block that exceeds * viewport width will be clipped instead of forcing horizontal scroll * (which detaches the fixed header from the document edge). `clip` (not * `hidden`) doesn't create a scroll container, so it doesn't interfere with * position:fixed/sticky descendants. */ html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(86px + var(--wp-admin--admin-bar--height, 0px)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ------------------------------------------------------------------------- * Mobile navigation overlay * * WP serves the responsive overlay as * .wp-block-navigation__responsive-container.is-menu-open. Default styling * is white bg / Inter — replace with brand-correct bone bg + Fraunces * italic so it reads like the rest of the site. The body.is-header-transparent * rule (which paints nav links bone over the hero) leaks into the overlay * and is overridden here. * ------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--bone) !important; padding-inline: var(--wp--preset--spacing--pad-x); padding-block: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; width: 100%; justify-content: flex-start; } .wp-block-navigation__responsive-container.is-menu-open::before { content: "Christina Skei"; display: block; position: absolute; top: 40px; left: var(--wp--preset--spacing--pad-x); font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--muted); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 24px; align-items: flex-start !important; width: 100%; padding-top: 120px; padding-bottom: var(--wp--preset--spacing--60); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(28px, 8vw, 40px); font-style: italic; font-weight: 300; letter-spacing: -0.01em; line-height: 1.1; color: var(--wp--preset--color--ink) !important; padding-block: 4px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); padding: 0; width: 24px; height: 24px; top: 31px; right: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; fill: currentColor; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--terracotta); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--terracotta) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 4px; } /* ------------------------------------------------------------------------- * Blog category filter row * ------------------------------------------------------------------------- */ .cs-blog-filter { gap: 32px; } .cs-blog-filter a { color: var(--wp--preset--color--muted); text-decoration: none; transition: color 200ms ease; } .cs-blog-filter a:hover, .cs-blog-filter a:focus-visible { color: var(--wp--preset--color--terracotta); } .cs-blog-filter a:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 4px; } /* ------------------------------------------------------------------------- * Hero bottom row — scroll cue * ------------------------------------------------------------------------- */ .cs-scroll-hint { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 0; } .cs-scroll-hint a { color: inherit; text-decoration: none; transition: opacity 200ms ease; } .cs-scroll-hint:hover a, .cs-scroll-hint a:focus-visible { opacity: 1; } .cs-scroll-hint a:focus-visible { outline: 2px solid var(--wp--preset--color--bone); outline-offset: 4px; } .cs-scroll-hint::after { content: ""; display: block; width: 1px; height: 40px; background: var(--wp--preset--color--bone); opacity: 0.5; animation: cs-scroll-pulse 2s ease-in-out infinite; transform-origin: top; transition: opacity 200ms ease, height 200ms ease; } .cs-scroll-hint:hover::after { opacity: 0.9; height: 48px; } @keyframes cs-scroll-pulse { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .cs-scroll-hint::after { animation: none; transform: scaleY(0.7); } } /* Tighten eyebrow letter-spacing on small viewports so the long * "PERSONLIG TRENER · ONLINE COACH · YOGAINSTRUKTØR" tag stops * wrapping mid-word. */ @media (max-width: 480px) { .is-style-eyebrow { font-size: 10px; letter-spacing: 0.08em; line-height: 1.6; } /* Hero cover uses 64px each side for padding which leaves ~247px of * content room on a 375px viewport — too narrow for the long * "online coach · yogainstruktør" eyebrow. Match the rest of the * site's responsive pad-x token. */ .wp-block-cover.alignfull { padding-left: var(--wp--preset--spacing--pad-x) !important; padding-right: var(--wp--preset--spacing--pad-x) !important; } } /* Sub-pages need top clearance so first content block clears the fixed * header. Home is exempt — hero is 100vh and overlaying is intentional. * * Apply on `.wp-site-blocks` itself rather than its first child so the * offset is additive to whatever padding the template's
declares * (otherwise an inline `padding-top:var(--wp--preset--spacing--80)` on *
beats our rule and the first content row hides under the * header). The 86px matches the header's rendered height; any admin-bar * height is already absorbed by html { margin-top } that WP applies. */ body:not(.home) .wp-site-blocks { padding-top: 86px; } /* ------------------------------------------------------------------------- * Button hover + focus states * * Brand-correct interaction language for the three solid bg variants the * site uses (bone, ink, terracotta) — all hover/focus to terracotta or ink * with bone text. Plus a unified terracotta :focus-visible outline so * keyboard users get a clear, on-brand ring instead of the browser default. * * WP serializes button bg + color as both inline styles AND .has-X classes. * Inline wins without !important, so the hover overrides need it. * ------------------------------------------------------------------------- */ .wp-block-button__link { transition: background-color 200ms ease, color 200ms ease, outline-offset 200ms ease; } .wp-block-button__link.has-bone-background-color:hover, .wp-block-button__link.has-ink-background-color:hover { background-color: var(--wp--preset--color--terracotta) !important; color: var(--wp--preset--color--bone) !important; } .wp-block-button__link.has-terracotta-background-color:hover { background-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--bone) !important; } .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 4px; } .wp-block-button.is-style-ghost .wp-block-button__link:hover { color: var(--wp--preset--color--terracotta) !important; border-bottom-color: var(--wp--preset--color--terracotta); opacity: 1; } .wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 6px; } /* * Home hero — mobile compaction. * Hides the lead paragraph and the secondary (ghost) CTA below 768px so * the eyebrow + h1 + primary CTA dominate the small-screen frame. */ @media (max-width: 767px) { body.home .wp-block-cover.alignfull.is-position-bottom-left .is-style-lead, body.home .wp-block-cover.alignfull.is-position-bottom-left .wp-block-buttons > .wp-block-button:nth-child(2) { display: none; } }