/* ========================================================================== TriKdanG — fold-diagram motif The same visual language as an origami instruction sheet: dashed crease lines and a folded dog-ear corner with a red underside. Used sparingly — on the hero, section dividers, and card corners only. ========================================================================== */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :root { --dog-ear-size: var(--wp--custom--motif--dog-ear-size, 56px); --crease-dash: var(--wp--custom--motif--crease-dash, 6px); /* ---- Animation settings — adjust these to tune motion sitewide ---- Each has a var(--wp--custom--motion--*, fallback) form, so these can also be overridden per-site from Site Editor → Styles → Additional CSS, or by adding a "motion" key under "custom" in theme.json, without touching this file. */ --reveal-duration: var(--wp--custom--motion--reveal-duration, 0.6s); --reveal-distance: var(--wp--custom--motion--reveal-distance, 16px); --reveal-tilt: var(--wp--custom--motion--reveal-tilt, -6deg); --reveal-easing: var(--wp--custom--motion--reveal-easing, cubic-bezier(0.2, 0.8, 0.2, 1)); --reveal-delay-base: var(--wp--custom--motion--reveal-delay-base, 0.05s); --reveal-stagger-step: var(--wp--custom--motion--reveal-stagger-step, 0.1s); } /* ========================================================================== Light / dark mode — adaptive palette Works together with the TriKdanG Theme Toggle plugin, which sets data-theme="light" or "dark" on . Re-pointing these four preset color custom properties — instead of touching every pattern, template, and card individually — means every section, card, and text block built with the "night-flight" / "surface" / "paper" / "paper-dim" palette colors switches automatically, including the header and hero. Signature red and steel are fixed brand accents and stay identical in both modes. If the Theme Toggle plugin isn't active, data-theme is never set and the site looks exactly as it always has (dark). ========================================================================== */ :root[data-theme='light'] { --wp--preset--color--night-flight: #F7F5EF; --wp--preset--color--surface: #FFFFFF; --wp--preset--color--paper: #17181C; --wp--preset--color--paper-dim: #4A4A4E; } /* Dog-ear corner: a folded paper corner, red underside showing through. Apply to any section/card that needs a "this is a TriKdanG page" mark. */ .dog-ear { position: relative; } .dog-ear::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 var(--dog-ear-size) var(--dog-ear-size) 0; border-color: transparent var(--wp--preset--color--signature-red, #E4002B) transparent transparent; filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.45)); pointer-events: none; z-index: 2; } .dog-ear::before { content: ""; position: absolute; top: 0; right: var(--dog-ear-size); width: var(--dog-ear-size); height: 2px; background: transparent; border-top: 2px dashed rgba(243, 239, 228, 0.25); transform-origin: right top; transform: rotate(90deg) translateX(0); pointer-events: none; } /* This decorative crease line (and the ambient .fold-field texture below) are tinted to match "paper" (near-white), which reads fine on the theme's default dark background but nearly disappears on a light one. Re-tint darker whenever light mode is active. This only matters if the TriKdanG Theme Toggle plugin is installed; otherwise these rules simply never match, and the theme looks exactly as it did before. */ :root[data-theme='light'] .dog-ear::before { border-top-color: rgba(20, 21, 26, 0.2); } .dog-ear--sm { --dog-ear-size: 34px; } .dog-ear--bottom-left::after { top: auto; right: auto; bottom: 0; left: 0; border-width: var(--dog-ear-size) 0 0 var(--dog-ear-size); border-color: transparent transparent transparent var(--wp--preset--color--signature-red, #E4002B); filter: drop-shadow(3px -3px 5px rgba(0, 0, 0, 0.45)); } .dog-ear--bottom-left::before { display: none; } /* Crease line: a dashed fold mark used as a section divider, with a small valley-fold arrow — read left to right the way a diagram reads. */ .fold-crease { position: relative; display: flex; align-items: center; gap: 0.75rem; border: none; margin: 0; height: 1px; background: none; } .fold-crease::before { content: ""; flex: 1 1 auto; height: 0; border-top: 2px dashed var(--wp--preset--color--steel, #8B9199); } .fold-crease::after { content: ""; flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--wp--preset--color--steel, #8B9199); } .fold-crease--label { font-family: var(--wp--preset--font-family--spec-mono); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--steel); white-space: nowrap; } /* Flight-spec numbers: mono, letter-spaced label above a large numeral. */ .flight-spec { display: flex; flex-direction: column; gap: 0.35rem; } .flight-spec__label { font-family: var(--wp--preset--font-family--spec-mono); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--steel); } .flight-spec__value { font-family: var(--wp--preset--font-family--spec-mono); font-size: var(--wp--preset--font-size--x-large); font-weight: 500; color: var(--wp--preset--color--paper); line-height: 1; } .flight-spec__value .unit { font-size: 0.5em; color: var(--wp--preset--color--steel); margin-left: 0.25em; } /* Stat blocks separated by dashed crease lines, like panels on a fold sheet */ .flight-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: center; /* keep every stat block vertically centered in its row, not just top-aligned */ } .flight-spec { justify-content: center; } .flight-stats-row > * { padding: 0 2rem; border-left: 1px dashed rgba(139, 145, 153, 0.4); /* Neutralize WordPress core's automatic flow-layout block-gap margin, which it adds to every sibling after the first. Without this, items 2-4 sit lower than item 1 because only item 1 (as :first-child) is exempt from that auto-margin — !important because our selector and core's ".wp-block-group-is-layout-flow > * + *" share specificity, so this is the only way to guarantee we win regardless of stylesheet load order. */ margin-top: 0 !important; margin-block-start: 0 !important; } .flight-stats-row > *:first-child { border-left: none; padding-left: 0; } @media (max-width: 680px) { .flight-stats-row { /* force a single column — auto-fit was letting two narrow stat blocks share a row at phone widths, which broke the alignment between labels and numbers */ grid-template-columns: 1fr; } .flight-stats-row > * { border-left: none; border-top: 1px dashed rgba(139, 145, 153, 0.4); padding: 1.5rem 0; margin-top: 0 !important; margin-block-start: 0 !important; } .flight-stats-row > *:first-child { border-top: none; padding-top: 0; } .flight-stats-row > *:last-child { padding-bottom: 0; } } /* Hero backdrop: barely-there diagonal crease field, ambient not decorative */ .fold-field { position: relative; overflow: hidden; } .fold-field::before { content: ""; position: absolute; inset: -20%; background-image: repeating-linear-gradient( -35deg, rgba(243, 239, 228, 0.035) 0px, rgba(243, 239, 228, 0.035) 1px, transparent 1px, transparent 64px ); pointer-events: none; } /* Re-tint the ambient texture darker in light mode too, for the same legibility reason as the dog-ear crease line above. */ :root[data-theme='light'] .fold-field::before { background-image: repeating-linear-gradient( -35deg, rgba(20, 21, 26, 0.05) 0px, rgba(20, 21, 26, 0.05) 1px, transparent 1px, transparent 64px ); } /* Fold-tab button: primary CTA styled like a fold instruction tab */ .wp-block-button.is-style-fold-tab .wp-block-button__link { position: relative; background-color: var(--wp--preset--color--signature-red); color: var(--wp--preset--color--paper); border-radius: 2px 2px 2px 14px; font-family: var(--wp--preset--font-family--spec-mono); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.9em 1.6em; transition: transform 0.15s ease, background-color 0.15s ease; } .wp-block-button.is-style-fold-tab .wp-block-button__link:hover { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--night-flight); transform: translateY(-2px); } /* Motion: a JS-driven reveal (IntersectionObserver toggles .is-visible), not CSS scroll-timelines alone — those still aren't supported in every browser, which is why nothing was animating before. Elements "unfold" into place: a slight tilt that settles flat, echoing the fold motif rather than a generic fade. */ .reveal-on-scroll { opacity: 1; transform: none; } html.has-reveal-js .reveal-on-scroll { opacity: 0; transform: perspective(700px) rotateX(var(--reveal-tilt)) translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--reveal-easing); transition-delay: var(--reveal-delay, 0s); } html.has-reveal-js .reveal-on-scroll.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } } /* Stagger helpers for groups of siblings (stat blocks, buttons) — each step is --reveal-delay-base plus N × --reveal-stagger-step, so widening or tightening the stagger is one variable instead of four edits. */ .reveal-on-scroll--1 { --reveal-delay: var(--reveal-delay-base); } .reveal-on-scroll--2 { --reveal-delay: calc(var(--reveal-delay-base) + var(--reveal-stagger-step)); } .reveal-on-scroll--3 { --reveal-delay: calc(var(--reveal-delay-base) + var(--reveal-stagger-step) * 2); } .reveal-on-scroll--4 { --reveal-delay: calc(var(--reveal-delay-base) + var(--reveal-stagger-step) * 3); } /* Scroll-driven (scrubbed) animation — opt-in via .parallax-on-scroll. Different from .reveal-on-scroll above: that one is JS-triggered (IntersectionObserver) and plays once, forward, when an element enters view. This one uses the CSS scroll-driven animations spec (animation-timeline: view()) so progress is tied directly to scroll position — scrub up and down and the animation scrubs with it, no JS. Wrapped in @supports so unsupported browsers just show the element normally; no fallback needed since it's a bonus effect, not load-bearing. To use: add class="parallax-on-scroll" to any block in the editor (Advanced → Additional CSS class(es)). Tune per-element with inline style, e.g. style="--parallax-distance:60px; --parallax-range:entry 0% cover 60%;" */ @supports (animation-timeline: view()) { .parallax-on-scroll { animation: trikdang-parallax-in linear both; animation-timeline: view(); animation-range: var(--parallax-range, entry 0% cover 40%); } @keyframes trikdang-parallax-in { from { opacity: var(--parallax-opacity-from, 0); transform: translateY(var(--parallax-distance, 40px)) scale(var(--parallax-scale-from, 1)); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .parallax-on-scroll { animation: none; } } } /* Hover motion — quiet, not decorative: a photo you can tell is clickable, a card that lifts slightly off the page like a loose sheet. */ .featured-media img { transition: transform 0.4s ease; } .featured-media:hover img { transform: scale(1.03); } .post-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .post-card .wp-block-post-featured-image { margin: 0; } .post-card .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Editors can pick 1, 2, or 3 (or more) columns on the Post Template block's "Columns" control in the sidebar — this just makes sure the chosen count still collapses to a single column on small screens. */ @media (max-width: 680px) { .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; } } /* Footer alignment: explicit flex rules rather than relying on the block editor's generated utility classes, so the two columns line up on the same baseline regardless of how each renders its default spacing. */ .footer-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; } .footer-row .wp-block-navigation { margin: 0; } .footer-row .wp-block-navigation__container { margin: 0; gap: 0.6rem !important; } .footer-row .wp-block-navigation-item .wp-block-navigation-item__content { padding: 0; } .footer-row > * { margin: 0; } /* Focus visibility, kept crisp against the dark ground */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--paper); outline-offset: 3px; } /* ========================================================================== Homepage v2 — flight hero, blueprint spec, latest build, workshop, channel network, newsletter bar. Everything below is additive and only touches the front page + shared header/footer; blog templates (archive/single/index/page) are untouched. ========================================================================== */ /* ---- Hero: starfield + jet scene ---- */ .hero-flight { position: relative; overflow: hidden; } .starfield-bg { position: relative; } .starfield-bg::before { content: ""; position: absolute; inset: -10% -10%; background-image: radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.9) 0, transparent 60%), radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.7) 0, transparent 60%), radial-gradient(1.5px 1.5px at 48% 14%, rgba(255,255,255,.85) 0, transparent 60%), radial-gradient(1px 1px at 68% 52%, rgba(255,255,255,.6) 0, transparent 60%), radial-gradient(1.5px 1.5px at 84% 28%, rgba(255,255,255,.9) 0, transparent 60%), radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.5) 0, transparent 60%), radial-gradient(1px 1px at 14% 88%, rgba(255,255,255,.6) 0, transparent 60%), radial-gradient(1.5px 1.5px at 44% 44%, rgba(255,255,255,.5) 0, transparent 60%); background-repeat: repeat; background-size: 380px 380px; pointer-events: none; opacity: 0.8; z-index: 0; } .hero-flight > * { position: relative; z-index: 1; } /* The starfield reads as a night sky against the hero's original dark backdrop, but the same white dots on a light background just look like stray specks — fade it out once the hero switches to light mode. */ :root[data-theme='light'] .starfield-bg::before { opacity: 0; } /* Large faded jet render sitting behind the copy, bleeding off the right edge — decorative only, so it's pulled out of flow and doesn't affect the height or wrapping of the text column. */ .hero-flight__bg-figure { position: absolute; top: 50%; right: -6%; transform: translateY(-50%); width: min(52%, 620px); max-width: 620px; opacity: 0.16; z-index: 0; pointer-events: none; } .hero-flight__bg-figure img { display: block; width: 100%; height: auto; } @media (max-width: 900px) { .hero-flight__bg-figure { opacity: 0.1; width: 78%; right: -18%; } } .hero-flight__content { position: relative; z-index: 1; max-width: 640px; } .logo-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0; } .logo-badge::before { content: ""; width: 22px; height: 1px; background: var(--wp--preset--color--signature-red); flex-shrink: 0; } .logo-badge p { margin: 0; } .logo-badge__mark { font-size: 0.95rem; line-height: 1; color: var(--wp--preset--color--signature-red); } .logo-badge__label { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--wp--preset--color--signature-red); } /* Thumbnail carousel — a compact "recent builds" strip beneath the CTA, contained within the content column so it can never overlap the background figure or overflow the section. */ .fold-carousel { max-width: 100%; } .fold-carousel__eyebrow { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--steel); } .fold-carousel__row { position: relative; display: flex; align-items: center; gap: 0.6rem; } .fold-carousel__track { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.15rem 0.1rem; max-width: 280px; } .fold-carousel__track::-webkit-scrollbar { display: none; } .fold-carousel__track > * { scroll-snap-align: start; flex: 0 0 76px; margin: 0; } .fold-carousel__track img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; border: 1px solid rgba(139, 145, 153, 0.25); display: block; } .fold-carousel__btn { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(139, 145, 153, 0.4); background: rgba(18, 19, 22, 0.75); color: var(--wp--preset--color--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .fold-carousel__btn svg { width: 14px; height: 14px; } .fold-carousel__dots { display: flex; gap: 0.4rem; margin-top: 0.85rem; } .fold-carousel__dots span { width: 18px; height: 2px; background: rgba(139, 145, 153, 0.4); display: block; } .fold-carousel__dots span.is-active { background: var(--wp--preset--color--signature-red); } @media (max-width: 500px) { .fold-carousel__track > * { flex-basis: 64px; } } /* ---- Blueprint / spec section ---- */ .blueprint-figure { position: relative; --parallax-distance: 30px; } .blueprint-figure img { width: 100%; height: auto; display: block; opacity: 0.92; } .spec-callouts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; margin-top: 1.5rem; border-top: 1px solid rgba(139, 145, 153, 0.2); padding-top: 1.25rem; } .spec-callout { flex: 1 1 0; min-width: 120px; padding: 0 1.25rem; border-left: 1px solid rgba(139, 145, 153, 0.2); } .spec-callout:first-child { padding-left: 0; border-left: none; } @media (max-width: 480px) { .spec-callouts { row-gap: 1rem; } .spec-callout { flex: 1 1 40%; border-left: none; padding-left: 0; } } .spec-callout__label { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--steel); } .spec-callout__value { font-family: var(--wp--preset--font-family--spec-mono); font-size: 1.25rem; color: var(--wp--preset--color--paper); margin-top: 0.15rem; } .fold-sequence { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--signature-red); } /* ---- Stat icons (flight-stats row) ---- */ .flight-spec__icon { width: 20px; height: 20px; color: var(--wp--preset--color--signature-red); margin-bottom: 0.4rem; } /* ---- Latest build feature card ---- */ .build-feature__media { position: relative; } .build-feature__media img { width: 100%; display: block; border-radius: 2px; } .build-feature__badge-text { position: absolute; top: 1.25rem; right: 1.25rem; text-align: right; color: #14151a; } .build-feature__badge-text strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; line-height: 1.15; } .build-feature__stat { font-family: var(--wp--preset--font-family--spec-mono); font-size: 1.9rem; line-height: 1; margin-top: 0.5rem; } .build-feature__stat small { font-size: 0.55rem; display: block; letter-spacing: 0.1em; margin-top: 0.2rem; } .build-feature__play { position: absolute; bottom: 1rem; left: 1rem; width: 34px; height: 34px; border-radius: 2px; background: var(--wp--preset--color--signature-red); display: flex; align-items: center; justify-content: center; color: #fff; } .build-feature__play svg { width: 14px; height: 14px; } /* ---- Workshop / about section ---- */ .workshop-grid { display: grid; grid-template-columns: 0.9fr 1.3fr 0.8fr; gap: 2.5rem; align-items: start; } @media (max-width: 900px) { .workshop-grid { grid-template-columns: 1fr; } } .workshop-photo { height: 100%; } .workshop-photo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 2px; display: block; filter: grayscale(1) contrast(1.05); } .workshop-icon-list { display: flex; flex-direction: column; gap: 1.4rem; list-style: none; margin: 0; padding: 0; } .workshop-icon-list li { display: flex; gap: 0.85rem; align-items: flex-start; } .workshop-icon-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--wp--preset--color--signature-red); margin-top: 0.2rem; } .workshop-icon-list strong { display: block; font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--paper); } .workshop-icon-list span { color: var(--wp--preset--color--steel); font-size: 0.85rem; } /* ---- Channel network cards ---- */ .channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(139, 145, 153, 0.25); } /* Explicit column counts instead of auto-fit: auto-fit resolves to 3 columns at tablet/iPad widths, splitting 4 cards into 3+1 and leaving empty grid tracks next to the orphaned 4th card. Fixed steps avoid that orphan-row gap at every size. */ @media (max-width: 900px) { .channel-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .channel-grid { grid-template-columns: 1fr; } } /* Neutralize WordPress core's automatic flow-layout block-gap margin, which it adds to every sibling after the first. Without this, cards 2-4 sit lower than card 1 because only card 1 (as :first-child) is exempt from that auto-margin — !important because our selector and core's ".wp-block-group-is-layout-flow > * + *" share specificity, so this is the only way to guarantee we win regardless of stylesheet load order. (Same fix already used for .flight-stats-row above.) */ .channel-grid > * { margin-top: 0 !important; margin-block-start: 0 !important; } .channel-card { background: var(--wp--preset--color--night-flight); padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; } .channel-card__icon { width: 26px !important; height: 26px !important; flex-shrink: 0; color: var(--wp--preset--color--signature-red); } .channel-card h3 { font-size: 1rem; margin: 0; font-family: var(--wp--preset--font-family--display); } .channel-card p { color: var(--wp--preset--color--steel); font-size: 0.85rem; margin: 0; } .channel-card .wp-block-buttons { margin-top: 0.2rem; justify-content: center; } .channel-card .wp-block-button__link.is-style-outline, .channel-card .is-style-outline .wp-block-button__link { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 2px; padding: 0.6em 1.1em; } /* ---- Newsletter bar ---- */ .newsletter-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .newsletter-bar__copy { display: flex; align-items: center; gap: 1.5rem; } .newsletter-bar__copy .newsletter-bar__thumb { margin: 0; flex-shrink: 0; } .newsletter-bar__copy .newsletter-bar__thumb img { width: 90px; height: auto; opacity: 0.85; display: block; } .newsletter-bar__eyebrow { margin: 0; } .newsletter-bar__heading { margin: 0.2rem 0 0; font-weight: 700; font-size: 1.15rem; color: var(--wp--preset--color--paper); } .newsletter-bar__subtext { margin: 0.3rem 0 0; font-size: 0.9rem; } .newsletter-bar__form { display: flex; gap: 0.6rem; flex-wrap: wrap; } .newsletter-bar__message { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; } .newsletter-bar__message--success { color: var(--wp--preset--color--paper); } .newsletter-bar__message--error { color: var(--wp--preset--color--signature-red); } .newsletter-bar input[type="email"] { background: transparent; border: 1px solid rgba(139, 145, 153, 0.4); border-radius: 2px; padding: 0.75em 1em; color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--body); min-width: 220px; } .newsletter-bar button { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--wp--preset--color--signature-red); color: #fff; border: none; border-radius: 2px; padding: 0.8em 1.4em; cursor: pointer; } /* ---- Header: sticky to top on scroll, matching the shop reference. A "site-header--scrolled" class is toggled by JS once the page has scrolled past the header's own height, adding a hairline border and a touch of shadow so the fixed bar reads as separated from content rather than a plain transparent overlay. ---- */ .site-header { position: sticky; top: 0; z-index: 150; transition: box-shadow 0.2s ease, border-color 0.2s ease; border-bottom: 1px solid transparent; } .site-header--scrolled { border-bottom-color: rgba(139, 145, 153, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } /* ---- Header background override — light mode only ---- The header uses the shared "night-flight" variable, same as most other sections, so it automatically follows the light/dark toggle. In light mode that variable resolves to a warm cream (#F7F5EF), which is shared with the hero/footer sections too. This gives the header its own value (pure white) without touching what those other sections use — dark mode is untouched, since --trikdang-header-bg just falls back to the regular night-flight value there. */ :root { --trikdang-header-bg: var(--wp--preset--color--night-flight); } :root[data-theme='light'] { --trikdang-header-bg: #FFFFFF; } .site-header.has-night-flight-background-color { background-color: var(--trikdang-header-bg) !important; } /* ---- Kill the seam between the header and the first block below it ---- The root-level block gap WordPress adds between the header template part and the first pattern on the page (margin-block-start on that first block) sits between two elements rather than as either one's own padding, so it exposes raw / background underneath — visible as a plain white bar. Two fixes together close it for good: zero that specific margin, and lock / to the same background color the header itself resolves to (--trikdang-header-bg above, so this keeps tracking the header's actual color in both modes, including the light-mode white override). This is CSS-only — the Theme Toggle plugin doesn't need any changes for this. */ .site-header + * { margin-block-start: 0 !important; } html, body { background-color: var(--trikdang-header-bg); } /* ---- Header: logo left / nav centered / icons right (desktop), hamburger left / logo centered / shop icon right (mobile) ---- */ .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* Set from Appearance -> Customize -> Header -> Header height. This is the FULL visible header height now — the outer .site-header no longer adds its own top/bottom padding on top of it (that was what made the bar taller than the number in the Customizer implied). Falls back to 64px if the value hasn't printed for any reason. */ min-height: var(--trikdang-header-height, 64px); } /* Belt-and-suspenders: guarantees the three header groups sit on one row even if a flow-layout block-gap margin ever gets reintroduced here. */ .site-header__bar > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .site-header__left, .site-header__center, .site-header__right { display: flex; align-items: center; flex: 1 1 0; } .site-header__left { justify-content: flex-start; gap: 0.75rem; } .site-header__center { justify-content: center; gap: 2.25rem; } .site-header__right { justify-content: flex-end; gap: 1.25rem; } .site-header__logo.wp-block-site-logo { display: flex; align-items: center; } .site-header__logo.wp-block-site-logo a { display: flex; align-items: center; } .site-header__logo.wp-block-site-logo img { display: block; height: 38px; width: auto; max-height: 100%; } @media (max-width: 860px) { .site-header__logo.wp-block-site-logo img { height: 34px; } } /* The logo renders twice (left slot for desktop, center slot for mobile) so it can recenter between the hamburger and the shop icon on small screens without any JS — only one copy is ever visible at a time. */ .site-header__logo--mobile { display: none; } /* ---- Primary nav (core/navigation block) ---- Desktop: renders inline, centered, matching the old .site-nav look. Mobile: collapses to just the toggle button (repositioned to the far left, see the 860px block below) which opens the block's own native overlay — restyled below to stay on-brand. ---- */ .site-primary-nav.wp-block-navigation { align-items: center; gap: 1.75rem; } .site-primary-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0 0 0.3rem; border-bottom: 2px solid transparent; /* Match the footer nav's dim -> paper hover effect. Set explicitly (with !important) because the site's global link color otherwise wins on the itself and overrides the inherited paper-dim tone, leaving nothing for :hover to visibly change from. */ color: var(--wp--preset--color--paper-dim) !important; transition: color 0.15s ease; } .site-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: var(--wp--preset--color--paper) !important; } .site-primary-nav .wp-block-navigation-item.is-current .wp-block-navigation-item__content, .site-primary-nav .is-current > .wp-block-navigation-item__content { color: var(--wp--preset--color--paper) !important; border-bottom-color: var(--wp--preset--color--signature-red); } /* Brand label + social icons are only meant for the mobile overlay — hidden in the desktop inline row, revealed once the overlay opens. */ .site-primary-nav .nav-overlay-only { display: none; } .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open .nav-overlay-only { display: flex; } .site-primary-nav__brand.nav-overlay-only { display: none; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--paper); margin: 0 0 1.5rem; } .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open .site-primary-nav__brand.nav-overlay-only { display: block; } .site-primary-nav__social.nav-overlay-only { margin-top: auto; padding-top: 2rem; } .site-primary-nav__social .wp-block-social-links { gap: 1.1rem; } .site-primary-nav__social .wp-social-link { background: none !important; width: 26px !important; height: 26px !important; } .site-primary-nav__social .wp-social-link a { padding: 0 !important; } .site-primary-nav__social.nav-overlay-only .wp-social-link, .site-primary-nav__social.nav-overlay-only .wp-social-link a, .site-primary-nav__social.nav-overlay-only .wp-social-link svg { /* --tktt-icon-color is the toggle plugin's own mode-aware icon variable (white in dark mode, near-black in light mode) — using it here, instead of the fixed paper-dim tan, is what makes these icons flip with the rest of the page. Both color and fill are set because the social-links block's SVGs use fill="currentColor". */ color: var( --tktt-icon-color, var(--wp--preset--color--paper-dim) ) !important; fill: var( --tktt-icon-color, var(--wp--preset--color--paper-dim) ) !important; } .site-primary-nav__social .wp-social-link svg { width: 20px; height: 20px; } .site-primary-nav__social.nav-overlay-only .wp-social-link:hover a, .site-primary-nav__social.nav-overlay-only .wp-social-link:hover svg { color: var( --tktt-accent, var(--wp--preset--color--paper) ) !important; fill: var( --tktt-accent, var(--wp--preset--color--paper) ) !important; } /* ---- "Overlay only" block style ---- Registered (see functions.php) on Social Links, Group, Paragraph, Heading, Buttons, Image, and HTML — pick it from that block's own Styles panel while it lives inside the primary nav, and it's hidden in the desktop inline row, only appearing once the mobile overlay is open. This is a fallback for the classic (non-template) overlay path; if you're using the newer WP "Overlay Template" (a real separate template part), you don't need this at all — anything placed in that canvas is already overlay-only by construction. "display: revert" (rather than a hardcoded flex/block) hands display back to whatever the block's own CSS already wants, so this works the same for flex blocks (Social Links, Buttons, Group) and block blocks (Paragraph, Heading) without fighting either. */ .site-primary-nav .is-style-overlay-only { display: none; } .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open .is-style-overlay-only { display: revert !important; } /* Optional pairing: add "nav-overlay-bottom" as an Additional CSS class (block's Advanced panel) on any overlay-only block to pin it to the bottom of the overlay, the way the built-in social row already sits. See patterns/nav-overlay-social.php for a ready-made example that combines both. */ .site-primary-nav .nav-overlay-bottom { margin-top: auto; padding-top: 2rem; } .header-social .wp-block-social-links { gap: 0.75rem; } .header-social .wp-social-link { background: none !important; } .header-social .wp-social-link a { color: var(--wp--preset--color--paper-dim); } .header-social .wp-social-link:hover a { color: var(--wp--preset--color--paper); } .header-icon-link { display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--paper); width: 20px; height: 20px; flex-shrink: 0; } .header-icon-link svg { width: 20px; height: 20px; } .header-icon-link:hover { color: var(--wp--preset--color--signature-red); } /* ---- Mobile nav trigger + overlay (native core/navigation block) ---- The block renders its own toggle button + overlay markup and JS (WP core Interactivity API — no theme script needed). We reskin its colors/typography to match the brand and force it to switch at the same 860px breakpoint the rest of the header uses, since the block's own built-in breakpoint doesn't line up with ours. ---- */ .site-primary-nav .wp-block-navigation__responsive-container-open { width: 36px; height: 36px; color: var(--wp--preset--color--paper); } .site-primary-nav .wp-block-navigation__responsive-container-open svg, .site-primary-nav .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; } .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open, .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, /* Un-scoped duplicate of the same rule, in case WP core ever renders the overlay somewhere that isn't a DOM descendant of .site-primary-nav (e.g. a future dialog-based overlay) — belt-and-suspenders so the overlay never silently falls back to a plain white box. */ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { /* Falls back to the theme's fixed night-flight color if the TriKdanG Theme Toggle plugin isn't active, but tracks the current light/dark mode when it is — this is what makes the overlay match the rest of the page instead of always being one fixed color (or, previously, no color at all — see note below). */ background-color: var( --tktt-bg-surface, var(--wp--preset--color--night-flight) ) !important; color: var( --tktt-text-primary, var(--wp--preset--color--paper) ) !important; } .site-primary-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--body); text-decoration: none; } /* Un-scoped, !important fallback: the native WP "Overlay Template" preview (Site Editor -> Navigation block -> Overlay panel) doesn't always inherit the "site-primary-nav" scoped rule above, which is what leaves a plain browser-default underline visible under each link in that preview even though the rest of the theme already removes it. This guarantees no-underline everywhere the item content class appears, regardless of which overlay rendering path WP is using. */ .wp-block-navigation-item__content { text-decoration: none !important; } .site-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; font-weight: 500; padding: 0.85rem 0; color: var( --tktt-text-primary, var(--wp--preset--color--paper) ) !important; } .site-primary-nav__brand.nav-overlay-only { color: var( --tktt-text-primary, var(--wp--preset--color--paper) ) !important; } /* ---- Overlay style variations ---- Pick one from the Navigation block's Styles panel (Site Editor -> click the menu -> right sidebar -> Styles) when you want a specific menu's mobile overlay to stay one fixed look regardless of the site-wide light/dark toggle. These use literal colors rather than the toggle plugin's variables, so they always render correctly even if the toggle plugin is deactivated or a variable fails to resolve. Leave the block on its default style (no is-style-* class) to keep the automatic behavior that follows the site's current mode. */ .wp-block-navigation.is-style-dark-overlay .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation.is-style-dark-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { background-color: #121316 !important; color: #f5f1e6 !important; } .wp-block-navigation.is-style-dark-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation.is-style-dark-overlay .site-primary-nav__brand.nav-overlay-only { color: #f5f1e6 !important; } .wp-block-navigation.is-style-dark-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link, .wp-block-navigation.is-style-dark-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link a, .wp-block-navigation.is-style-dark-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link svg { color: #ffffff !important; fill: #ffffff !important; } .wp-block-navigation.is-style-dark-overlay .wp-block-navigation__responsive-container-open, .wp-block-navigation.is-style-dark-overlay .wp-block-navigation__responsive-container-close { color: #f5f1e6 !important; } .wp-block-navigation.is-style-light-overlay .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation.is-style-light-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { background-color: #ffffff !important; color: #16161a !important; } .wp-block-navigation.is-style-light-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation.is-style-light-overlay .site-primary-nav__brand.nav-overlay-only { color: #16161a !important; } .wp-block-navigation.is-style-light-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link, .wp-block-navigation.is-style-light-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link a, .wp-block-navigation.is-style-light-overlay .site-primary-nav__social.nav-overlay-only .wp-social-link svg { color: #16161a !important; fill: #16161a !important; } .wp-block-navigation.is-style-light-overlay .wp-block-navigation__responsive-container-open, .wp-block-navigation.is-style-light-overlay .wp-block-navigation__responsive-container-close { color: #16161a !important; } @media (min-width: 861px) { /* Force the desktop-inline state above our breakpoint, overriding the block's own (narrower) default breakpoint. */ .site-primary-nav .wp-block-navigation__responsive-container-open { display: none !important; } .site-primary-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) { display: flex !important; position: static !important; } } @media (max-width: 860px) { .site-header__bar { position: relative; } .site-header__left .site-header__logo--desktop { display: none; } .site-header__center .site-primary-nav > .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } .site-header__center .site-header__logo--mobile { display: block; } .header-social { display: none; } .site-header__left { flex: 0 0 auto; } .site-header__center { flex: 1 1 auto; } .site-header__right { flex: 0 0 auto; } /* The header's left/right padding is set inline (spacing|30 = 1.5rem) to match the desktop layout's wide margins. On phone-width screens that reads as a big dead gap next to the hamburger/shop icons, so pull it down here. !important is required because it's overriding an inline style attribute, not just another stylesheet rule. */ .site-header { padding-left: var(--wp--preset--spacing--20) !important; padding-right: var(--wp--preset--spacing--20) !important; } /* Force the toggle below our breakpoint too, and pull it out of the centered nav position to sit at the far-left edge of the header bar, matching the original hamburger-left / logo-center layout. */ .site-primary-nav .wp-block-navigation__responsive-container-open { display: flex !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /* Close (X) icon: core's overlay markup pins this top-right by default, which reads as a different control than the hamburger it replaces. Moving it to the same top-left spot (matching the overlay's own content inset — adjust the 24px if you change the overlay's own padding) makes open/close feel like one fixed control instead of swapping sides. inset-inline-* is set alongside left/right so this still moves correctly if the site ever adds a right-to-left language. If you build a custom overlay template (see the Overlay panel in the Navigation block), the close button is still rendered by core outside your canvas, so this same rule is what repositions it there too. */ .site-primary-nav .wp-block-navigation__responsive-container-close { position: absolute; top: 24px; left: 24px; right: auto; inset-inline-start: 24px; inset-inline-end: auto; } } /* On phones the fixed 1.5rem side padding on the main content column eats too much of a narrow viewport, forcing the reading column down to a width that wraps every line and makes posts feel much longer than they are. Trim it back below 600px so more of the screen is usable text. */ @media (max-width: 600px) { .site-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* WordPress core gives every background-colored Group block padding: 1.25em 2.375em by default — the 2.375em (~38px) side padding is what was blowing out the reading column on phones for any section built with a background-colored Group block. Trim the sides only; keep the vertical rhythm core already sets. */ .wp-block-group.has-background { padding-left: 1em !important; padding-right: 1em !important; } } /* ---- Footer columns ---- */ .footer-columns { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } /* Below 780px a 2-col CSS grid pairs columns row-by-row: the short brand block ends up in the same row as the 6-link Navigation list, so the whole row stretches to match it, leaving a big empty gap before Resources/Company start below. Multi-column flow instead lets each column's height follow only its own content — brand + Navigation stack in column 1, Resources + Company stack in column 2, each column only as tall as it needs to be. */ @media (max-width: 780px) { .footer-columns { display: block; column-count: 2; column-gap: 2rem; } .footer-col { break-inside: avoid; margin-bottom: 2rem; } } .footer-col h4 { font-family: var(--wp--preset--font-family--spec-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--steel); margin: 0 0 0.9rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .footer-col ul a { color: var(--wp--preset--color--paper-dim); text-decoration: none; font-size: 0.9rem; } .footer-col ul a:hover { color: var(--wp--preset--color--paper); } /* Copyright line + social icons: center both on mobile instead of the default space-between (which left-aligns the copyright text and right-aligns the icons on their own line once wrapped). */ @media (max-width: 600px) { .footer-bottom-row { justify-content: center; text-align: center; } .footer-bottom-row .wp-block-social-links { justify-content: center; } } /* Standard WP visually-hidden utility — used for accessible labels on icon-only links (e.g. the overlay social icons) that shouldn't show visible text but must still read out to screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }