/* ============================================================================ TechWafer 2026 — editorial-tech redesign Strategy: override the parent's design *tokens* (CSS custom properties) and add component styling. We never redefine theme.json palettes, so every ncmfse/* block keeps resolving its colors — it just gets new values. ========================================================================== */ /* ---- 1. Tokens ----------------------------------------------------------- */ :root { --tw-accent: hsl(221 83% 53%); --tw-accent-hover: hsl(221 83% 45%); --tw-accent-soft: hsl(221 83% 96%); --tw-ink: hsl(222 47% 11%); --tw-muted: hsl(215 16% 47%); --tw-faint: hsl(215 20% 65%); --tw-line: hsl(214 22% 90%); --tw-surface: hsl(210 20% 98%); --tw-card: hsl(0 0% 100%); --tw-radius: 16px; --tw-radius-sm: 10px; --tw-measure: 66ch; /* ~66 CPL — the readability optimum (Bringhurst / NN/g) */ --tw-shadow: 0 1px 2px hsl(222 47% 11% / .04), 0 8px 24px -12px hsl(222 47% 11% / .12); /* Fonts — distinctive editorial pairing (loaded in functions.php) */ --tw-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --tw-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Remap parent shadcn + editorial tokens (light) */ --wp--preset--color--shadcn-primary: var(--tw-accent); --wp--preset--color--shadcn-primary-foreground: hsl(0 0% 100%); --wp--preset--color--shadcn-foreground: var(--tw-ink); --wp--preset--color--shadcn-background: hsl(0 0% 100%); --wp--preset--color--shadcn-muted: var(--tw-surface); --wp--preset--color--shadcn-muted-foreground: var(--tw-muted); --wp--preset--color--shadcn-accent: var(--tw-surface); --wp--preset--color--shadcn-accent-foreground: var(--tw-ink); --wp--preset--color--shadcn-secondary: var(--tw-surface); --wp--preset--color--shadcn-border: var(--tw-line); --wp--preset--color--base: hsl(0 0% 100%); --wp--preset--color--base-2: hsl(0 0% 100%); --wp--preset--color--contrast: var(--tw-ink); --wp--preset--color--contrast-2: var(--tw-muted); --wp--preset--color--contrast-3: var(--tw-faint); --wp--preset--font-family--heading: var(--tw-font-display); --wp--preset--font-family--body: var(--tw-font-body); } /* Dark mode is driven by the theme's own toggle, which sets (shadcn/Tailwind pattern) — NOT the OS preference. Scope dark tokens to that class so the toggle actually controls light vs dark. */ .dark { --tw-ink: hsl(210 20% 96%); --tw-muted: hsl(215 16% 66%); --tw-faint: hsl(215 14% 50%); --tw-line: hsl(215 22% 20%); --tw-surface: hsl(222 30% 12%); --tw-card: hsl(222 32% 10%); --tw-accent-soft: hsl(221 60% 16%); --tw-shadow: 0 1px 2px hsl(0 0% 0% / .3), 0 10px 30px -12px hsl(0 0% 0% / .6); --wp--preset--color--shadcn-background: hsl(222 47% 7%); --wp--preset--color--base: hsl(222 47% 7%); --wp--preset--color--base-2: hsl(222 47% 7%); } /* ---- 2. Base + reading typography --------------------------------------- */ body { font-family: var(--tw-font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; letter-spacing: -0.003em; color: var(--tw-ink); } h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-heading { font-family: var(--tw-font-display); letter-spacing: -0.02em; line-height: 1.12; font-weight: 600; } /* Post title — bigger, tighter, editorial */ .wp-block-post-title, .single__content .wp-block-post-title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.06; } /* Article body: fluid size (mobile ~17px → desktop ~19px), comfortable measure and rhythm. Sizes/line-height per Material + NN/g readability research. */ .single__content .wp-block-post-content { font-size: clamp(1.0625rem, 1rem + 0.42vw, 1.1875rem); line-height: 1.68; color: var(--tw-ink); text-align: left; /* no justified text — kills word-spacing rivers */ --wp--style--block-gap: 1.15em; /* tame the flow gap between blocks */ } @media (max-width: 600px) { .single__content .wp-block-post-content { line-height: 1.72; } } .single__content .wp-block-post-content > * { max-width: var(--tw-measure); } .single__content .wp-block-post-content .alignwide, .single__content .wp-block-post-content .alignfull, .single__content .wp-block-post-content .wp-block-table, .single__content .wp-block-post-content .wp-block-image, .single__content .wp-block-post-content figure { max-width: 100%; } /* Never let media break out of the article column (sidebar layout). Ncmaz's alignfull uses a viewport-width breakout that overflows a 68% column and collides with the sidebar — clamp it back to the column. */ .tw-single-main .single__content .alignfull, .tw-single-main .single__content .alignwide, .tw-single-main .single__content .wp-block-post-content .alignfull, .tw-single-main .single__content .wp-block-post-content .alignwide { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important; transform: none !important; } .single__content img, .single__content figure, .single__content .wp-block-image img, .single__content .wp-block-gallery img { max-width: 100%; height: auto; } .single__content .wp-block-image, .single__content figure { overflow: hidden; } .single__content .wp-block-post-content p { margin-block: 0 1em; } .single__content .wp-block-post-content > h2 { margin-block: 1.5em 0.5em; font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.1rem); scroll-margin-top: 90px; } .single__content .wp-block-post-content > h3 { margin-block: 1.15em 0.4em; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.6rem); scroll-margin-top: 90px; } /* Collapse any empty paragraphs/spacers the old content left behind */ .single__content .wp-block-post-content > p:empty { display: none; } .single__content .wp-block-post-content a { color: var(--tw-accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--tw-accent) 40%, transparent); transition: text-decoration-color .15s ease, color .15s ease; } .single__content .wp-block-post-content a:hover { color: var(--tw-accent-hover); text-decoration-color: currentColor; } /* Accessible focus ring everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; border-radius: 4px; } /* ---- 3. Category pill + meta -------------------------------------------- */ .single__content .wp-block-post-terms.is-style-pill a, .wp-block-post-terms.is-style-pill a { background: var(--tw-accent); color: #fff; border: none; font-family: var(--tw-font-display); font-weight: 600; letter-spacing: 0.02em; } .tw-post-header .wp-block-post-excerpt { font-size: 1.15rem; line-height: 1.5; color: var(--tw-muted); } .tw-byline { align-items: center; row-gap: 0.5rem; } .tw-byline__author { align-items: center; } .tw-byline__author .wp-block-avatar img { width: 32px; height: 32px; border-radius: 999px; } .tw-byline__by { color: var(--tw-muted); margin: 0; } .tw-byline__name { margin: 0; } .tw-byline__name, .tw-byline__name a { color: var(--tw-ink); font-weight: 600; text-decoration: none; } .tw-byline__name a:hover { color: var(--tw-accent); } .tw-updated { color: var(--tw-muted); font-size: 0.85rem; align-items: center; } .tw-updated::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--price, #22c55e); display: inline-block; margin-right: 0.15rem; } /* ---- 4. Components ------------------------------------------------------- */ .wp-element-button, .wp-block-button__link { border-radius: 999px; font-family: var(--tw-font-display); font-weight: 600; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: var(--tw-shadow); } /* Data tables — critical for AEO extraction */ .wp-block-table { margin-inline: 0; } .wp-block-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.98rem; border: 1px solid var(--tw-line); border-radius: var(--tw-radius-sm); overflow: hidden; } .wp-block-table th, .wp-block-table td { padding: 0.72em 0.95em; border-bottom: 1px solid var(--tw-line); text-align: left; } .wp-block-table thead th { background: var(--tw-ink); color: hsl(0 0% 100%); font-family: var(--tw-font-display); font-weight: 600; letter-spacing: -0.01em; } .wp-block-table tbody tr:nth-child(even) td { background: var(--tw-surface); } .wp-block-table tbody tr:last-child td { border-bottom: 0; } /* ---- 5. Sidebar (fixed: 68/32 layout, sticky cards) --------------------- */ .tw-sidebar-sticky { align-self: start; } .tw-single-aside .wp-block-categories, .tw-single-aside .wp-block-navigation, .tw-single-aside .wp-block-search__inside-wrapper { font-size: 0.95rem; } .tw-single-aside h2 { font-family: var(--tw-font-display); font-size: 0.82rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tw-muted); } .tw-single-aside .wp-block-categories li { padding-block: 0.28rem; } .tw-single-aside .wp-block-categories a { color: var(--tw-ink); } .tw-single-aside .wp-block-categories a:hover { color: var(--tw-accent); } .tw-single-aside .wp-block-search__input { border: 1px solid var(--tw-line); border-radius: var(--tw-radius-sm); background: var(--tw-card); } .tw-single-aside .wp-block-avatar img { box-shadow: var(--tw-shadow); } /* ---- 6. AEO / E-E-A-T blocks -------------------------------------------- */ .tw-answer { background: var(--tw-accent-soft); border: 1px solid color-mix(in srgb, var(--tw-accent) 22%, transparent); border-left: 4px solid var(--tw-accent); border-radius: var(--tw-radius); padding: 1.15rem 1.35rem; margin-block: 1.6rem; font-size: 1.06rem; line-height: 1.62; max-width: var(--tw-measure); } .tw-answer__label { font-family: var(--tw-font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tw-accent-hover); margin: 0 0 0.35rem; } .tw-answer p:last-child { margin-bottom: 0; } /* TL;DR — front-loaded, scannable key takeaways for AEO/AIO passage retrieval. Placed right after the H1; each bullet a self-contained, specific point. */ .tw-tldr { background: var(--tw-card); border: 1px solid var(--tw-line); border-radius: var(--tw-radius); padding: 1.25rem 1.4rem 1.35rem; margin-block: 1.6rem; box-shadow: var(--tw-shadow); max-width: var(--tw-measure); } .tw-tldr__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--tw-font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tw-accent-hover); margin: 0 0 0.7rem; } .tw-tldr__label::before { content: ""; width: 22px; height: 2px; background: var(--tw-accent); border-radius: 2px; } .tw-tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .tw-tldr li { position: relative; padding-left: 1.7rem; font-size: 1.02rem; line-height: 1.5; color: var(--tw-ink); margin: 0; } .tw-tldr li::before { content: ""; position: absolute; left: 0.35rem; top: 0.18em; width: 0.42rem; height: 0.72rem; border: solid var(--tw-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .tw-verdict { border: 1px solid var(--tw-line); border-radius: var(--tw-radius); padding: 1.25rem 1.4rem; margin-block: 1.6rem; background: var(--tw-card); box-shadow: var(--tw-shadow); max-width: var(--tw-measure); } .tw-verdict h3 { margin-top: 0; } .tw-verdict .wp-block-columns { gap: 1.5rem; margin-top: 0.5rem; } .tw-verdict h4 { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tw-muted); } .tw-verdict ul { margin: 0.3rem 0 0; padding-left: 1.1rem; } .tw-verdict li { margin-block: 0.3rem; } .tw-faq { margin-block: 2.4rem; max-width: var(--tw-measure); } .tw-faq > h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); margin-bottom: 0.4rem; } .tw-faq__item { border-top: 1px solid var(--tw-line); padding-block: 1rem; } .tw-faq__item:last-child { border-bottom: 1px solid var(--tw-line); } .tw-faq__q { font-family: var(--tw-font-display); font-weight: 600; font-size: 1.1rem !important; color: var(--tw-ink); margin: 0 0 0.35rem; } .tw-faq__a { color: var(--tw-ink); line-height: 1.65; margin: 0; } .tw-author { display: flex; gap: 1.1rem; align-items: flex-start; border: 1px solid var(--tw-line); border-radius: var(--tw-radius); padding: 1.3rem 1.4rem; margin-top: 2.4rem; background: var(--tw-surface); max-width: var(--tw-measure); } .tw-author__avatar { border-radius: 999px; flex: 0 0 auto; width: 56px; height: 56px; } .tw-author__body { min-width: 0; } .tw-author__name { display: inline-block; font-family: var(--tw-font-display); font-weight: 600; font-size: 1.08rem; color: var(--tw-ink); text-decoration: none; margin: 0; } .tw-author__name:hover { color: var(--tw-accent); } .tw-author__bio { color: var(--tw-muted); font-size: 0.95rem; line-height: 1.6; margin: 0.3rem 0 0; } .tw-author__socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .tw-author__social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--tw-card); border: 1px solid var(--tw-line); color: var(--tw-muted); transition: color .15s ease, border-color .15s ease, transform .15s ease; } .tw-author__social:hover { color: var(--tw-accent); border-color: var(--tw-accent); transform: translateY(-1px); } /* ---- 7. Responsive ------------------------------------------------------ */ @media (max-width: 900px) { .tw-single-columns { flex-wrap: wrap; } .tw-single-main, .tw-single-aside { flex-basis: 100% !important; } .tw-sidebar-sticky { position: static !important; } .tw-single-aside { border-top: 1px solid var(--tw-line); margin-top: 1.5rem; padding-top: 1.5rem; } } /* ---- 8. Footer ---------------------------------------------------------- */ .tw-footer__brand { max-width: 320px; } .tw-footer__tagline { color: var(--tw-muted); line-height: 1.55; } .tw-footer__h { font-family: var(--tw-font-display); font-size: 0.78rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tw-muted); margin: 0 0 0.3rem; } .tw-footer__nav a { color: var(--tw-ink); text-decoration: none; } .tw-footer__nav a:hover { color: var(--tw-accent); } .tw-footer__bar { margin-top: 0.5rem; } .tw-footer__copy { color: var(--tw-muted); margin: 0; } .tw-footer .wp-block-social-links a { color: var(--tw-muted); } .tw-footer .wp-block-social-links a:hover { color: var(--tw-accent); } @media (max-width: 700px) { .tw-footer__col { flex-basis: 45%; } } /* ============================================================================ Sitewide branded header + footer (brand chrome on every page). The dark-mode toggle (ncmfse/toggle-dark-mode) is left untouched. ========================================================================== */ :root { --tw-brand-pink: #e6197f; --tw-brand-display: "Anton", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; } /* ---- Header ---- */ .tw-topbar { border-top: 3px solid var(--tw-brand-pink); } .global-header { border-bottom: 2px solid var(--tw-ink) !important; } .dark .global-header { border-bottom-color: var(--tw-line) !important; } .global-header .wp-block-navigation a, .global-header .wp-block-navigation .wp-block-navigation-item__content { text-transform: uppercase; font-weight: 600; letter-spacing: .035em; font-size: .92rem; transition: color .14s ease; } .global-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .global-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .global-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content { color: var(--tw-brand-pink) !important; } /* ---- Footer (brutalist brand band, black in both modes) ---- */ .tw-sfooter { background: #0a0a0a; color: #f5f5f7; border-top: 4px solid var(--tw-brand-pink); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; margin-top: clamp(2rem, 5vw, 4rem); } .tw-sfooter .tw-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); } .tw-sfooter__top { padding-bottom: 1.6rem; margin-bottom: 1.9rem; border-bottom: 2px solid rgba(255,255,255,.14); gap: 1.2rem; } .tw-sfooter__wordmark { font-family: var(--tw-brand-display) !important; text-transform: uppercase; font-weight: 400 !important; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem) !important; color: #fff !important; line-height: 1; margin: 0 !important; letter-spacing: .01em; } .tw-sfooter__pink { color: var(--tw-brand-pink); } .tw-sfooter__socials a { color: #fff !important; } .tw-sfooter__socials a:hover { color: var(--tw-brand-pink) !important; transform: translateY(-2px); } .tw-sfooter__cols { gap: 2rem; align-items: flex-start; } .tw-sfooter__brandcol { flex: 1 1 240px; max-width: 340px; } .tw-sfooter__col { flex: 1 1 140px; gap: .55rem !important; } .tw-sfooter__tagline { color: rgba(255,255,255,.6); font-size: .95rem; line-height: 1.55; margin: 0; } .tw-sfooter__h { font-family: var(--tw-brand-display) !important; text-transform: uppercase; font-weight: 400 !important; letter-spacing: .06em; font-size: 1rem !important; color: var(--tw-brand-pink) !important; margin: 0 0 .5rem !important; } .tw-sfooter__nav a { color: rgba(255,255,255,.72) !important; text-decoration: none; font-size: .92rem; transition: color .14s ease; } .tw-sfooter__nav a:hover { color: #fff !important; } .tw-sfooter__nav .wp-block-navigation__container { gap: .5rem !important; } .tw-sfooter__bar { border-top: 2px solid rgba(255,255,255,.14); margin-top: 2.2rem; padding-top: 1.2rem; gap: 1rem; } .tw-sfooter__copy { color: rgba(255,255,255,.5); font-size: .85rem; margin: 0; } @media (max-width: 720px) { .tw-sfooter__col { flex-basis: 44%; } }