/* Theme Name: NickedEye (T2025 Child) Theme URI: https://nickedeye.com Description: WhooshPro child theme for NickedEye, built on WordPress core's Twenty Twenty-Five (no third-party parent, deliberately — see agentic-workflow/wordpress-builder-evaluate.md). Customizes palette and typography via theme.json where possible; site-wide chrome (header/footer/hero) below ported from the confirmed design-mockup wireframe (design-mockup/wireframe-mid-fi/home.html). Author: WhooshPro Template: twentytwentyfive Version: 0.1.1 Text Domain: twentytwentyfive-child-nickedeye */ :root { --nav-h: 84px; } /* the shared 1080px content column — was only ever applied via a repeated inline style on individual elements (front-page.html), never as a real rule for the .ne-wrap class name itself. Any new template markup using class="ne-wrap" without also copying that exact inline style silently got no width constraint at all (full-bleed instead of the centered column) — caught on the pillar/single templates, which used the bare class. Making it a real rule here so the class actually does what its name promises, with or without an inline style duplicating it. */ .ne-wrap { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* base link reset — ported from the confirmed mockup's global `a` rule. Applies sitewide, including future post/page body content, matching the confirmed design (color-coded, no underline) rather than WordPress core's default underlined links. Revisit only if long-form prose content later wants underlines back for readability/accessibility — not decided yet. */ a { color: var(--wp--preset--color--trust-blue); text-decoration: none; } /* the mockup's own comment on this element: "this top bar stays in production, repurposed as a ticker/announcement slot — not just a wireframe note." Kept as a real, permanent site-wide slot — currently showing the wireframe disclaimer since Tier 2/3 art is still placeholder, swap for real rotating announcement copy once that's decided. Deliberately NOT part of the sticky header wrapper (.ne-header-outer) — it scrolls away normally, matching the mockup, rather than staying pinned. */ .ne-announcement-bar { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cloud-dancer); text-align: center; font-size: 12px; padding: 8px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.02em; } /* also ported from the mockup's global reset — without this, elements with both a percentage width and their own padding/border (e.g. the search input) render wider than their container, since the padding/border get added on top of the percentage instead of being included in it. */ * { box-sizing: border-box; } /* WordPress's block-theme root applies automatic margin-top between top-level template blocks (theme.json's blockGap). Our raw wp:html sections manage their own spacing, so opt them out of that automatic gap rather than fighting it with more margin adjustments. */ .ne-hero-band, .ne-wrap, .ne-header-outer, .ne-pillar-hero, .ne-post-cover, .ne-content-page { margin-block-start: 0; } /* placeholder art blocks — Tier 2/3 illustration slots not yet built */ .ne-placeholder { background: repeating-linear-gradient(45deg, #E4E0D6, #E4E0D6 10px, #DAD6CC 10px, #DAD6CC 20px); border: 1px dashed #B8B2A2; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #7A7568; font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-align: center; padding: 8px; } /* nav */ /* the sticky positioning lives on .ne-header-outer (the WP-generated wp:template-part wrapper), not .ne-header itself — WordPress shrink-wraps that outer wrapper to exactly match its child's height, so a sticky child nested inside it has no room to actually stick as the page scrolls (it can only stick within its own parent's bounds, and that parent is barely taller than the child). Sticking the outer wrapper instead gives it the full page as its containing block, which is what "stay pinned while scrolling the whole page" actually requires. */ .ne-header-outer { position: sticky; top: 0; z-index: 200; } /* logged-in-admin-only: the WP admin toolbar is fixed at the very top (32px desktop, 46px on WP's own <=782px breakpoint), so a sticky header at top:0 sticks partially underneath/behind it. Real site visitors never see the admin bar, so this only matters for the editing experience. */ body.admin-bar .ne-header-outer { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .ne-header-outer { top: 46px; } } .ne-header { height: var(--nav-h); border-bottom: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--cloud-dancer); transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .ne-header.scrolled { height: 56px; box-shadow: 0 2px 24px rgba(44, 74, 110, 0.12); border-bottom-color: transparent; } .ne-header .ne-wrap { height: 100%; } .ne-nav { height: 100%; display: flex; align-items: center; justify-content: space-between; } .ne-wordmark { font-size: 22px; color: var(--wp--preset--color--ink); display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 600; transition: font-size 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .ne-wordmark img { width: 30px; height: 30px; transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .ne-header.scrolled .ne-wordmark { font-size: 18px; } .ne-header.scrolled .ne-wordmark img { width: 22px; height: 22px; } .ne-pillar-nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; } .ne-pillar-nav a.lifestyle { color: var(--wp--preset--color--warm-clay); } .ne-pillar-nav a.tech { color: var(--wp--preset--color--trust-blue); } .ne-pillar-nav a.finance { color: var(--wp--preset--color--pine); } .ne-pillar-nav a { transition: opacity 0.2s ease; } .ne-pillar-nav a:hover { opacity: 0.65; } /* mark the current pillar's nav link, matching the mockup's a.current state — done via body.category-{slug} (which WP adds automatically on a category archive) rather than a PHP "is_category()" check, consistent with the other body-class-keyed styling already in this file. */ body.category-lifestyle .ne-pillar-nav a.lifestyle, body.category-tech .ne-pillar-nav a.tech, body.category-finance .ne-pillar-nav a.finance { opacity: 0.65; } /* single-post cover fallback (no featured image set) — the branded pillar-color background, matched by category the same way as the recent- feed thumbnail fallback, and the pillar-hero rays/nav-dimming above. Deliberately not a personal photo by default; a real featured image can still override this per-post via the normal Featured Image panel. Note: unlike a category archive, WordPress does NOT add a body.category-{slug} class on single post pages — so this reads the category further down the page (the post-head tag chip's link) via :has(), the same "look forward" trick used for tag-chip colors, just anchored at the body level instead of a single card. */ body:has(.ne-post-head .wp-block-post-terms a[href$="/lifestyle/"]) .ne-post-cover-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-lifestyle.webp); } body:has(.ne-post-head .wp-block-post-terms a[href$="/tech/"]) .ne-post-cover-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-tech.webp); } body:has(.ne-post-head .wp-block-post-terms a[href$="/finance/"]) .ne-post-cover-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-finance.webp); } .ne-nav-right { display: flex; align-items: center; gap: 2px; } .ne-icon-dot-wrap { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .ne-icon-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--wp--preset--color--border); display: inline-block; transition: background 0.2s ease; } .ne-icon-dot-wrap:hover .ne-icon-dot { background: var(--wp--preset--color--soft-blue); } .ne-icon-linkedin { width: 20px; height: 20px; color: var(--wp--preset--color--border); transition: color 0.2s ease; } .ne-icon-dot-wrap:hover .ne-icon-linkedin { color: var(--wp--preset--color--soft-blue); } .ne-icon-brand { width: 20px; height: 20px; border-radius: 4px; display: block; filter: grayscale(1) opacity(0.5); transition: filter 0.2s ease; } .ne-icon-dot-wrap:hover .ne-icon-brand { filter: none; } .ne-nav-search-icon { position: relative; background: none; border: none; cursor: pointer; padding: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--ink); transition: color 0.2s ease; } .ne-nav-search-icon:hover { color: var(--wp--preset--color--trust-blue); } .ne-search-sparkle { position: absolute; top: 2px; right: 5px; width: 10.8px; height: 10.8px; color: var(--wp--preset--color--trust-blue); animation: neSparkleTwinkle 2.6s ease-in-out infinite; pointer-events: none; } @keyframes neSparkleTwinkle { 0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } } /* mobile nav — hamburger + drawer */ .ne-nav-burger { display: none; background: none; border: none; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; padding: 2px; flex-shrink: 0; } .ne-nav-burger span { display: block; height: 1.5px; background: var(--wp--preset--color--ink); transition: transform 0.25s, opacity 0.2s; } .ne-nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .ne-nav-burger.open span:nth-child(2) { opacity: 0; } .ne-nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .ne-nav-drawer { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--wp--preset--color--cloud-dancer); border-bottom: 3px solid var(--wp--preset--color--border); z-index: 199; padding: 16px 0; transition: top 0.2s ease; } .ne-nav-drawer.open { display: block; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; } .ne-nav-drawer a { position: relative; display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; line-height: 1; padding: 10px 24px; transition: opacity 0.15s; } .ne-nav-drawer a:not(:last-child)::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; border-bottom: 1px dashed var(--wp--preset--color--border); } .ne-nav-drawer a:hover { opacity: 0.65; } .ne-nav-drawer a.lifestyle { color: var(--wp--preset--color--warm-clay); } .ne-nav-drawer a.tech { color: var(--wp--preset--color--trust-blue); } .ne-nav-drawer a.finance { color: var(--wp--preset--color--pine); } /* hero */ .ne-hero-band { position: relative; background: #FAF9F5; overflow: hidden; } .ne-hero { position: relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 64px 24px; } .ne-hero > * { position: relative; z-index: 1; } .ne-hero h1 { font-size: 40px; line-height: 1.15; margin-bottom: 16px; font-family: 'Fraunces', serif; font-weight: 600; } .ne-hero p { font-size: 17px; line-height: 26.8px; color: #4A473F; max-width: 46ch; } .ne-hero .ne-credential { font-size: 13px; color: var(--wp--preset--color--trust-blue); margin-top: 16px; font-weight: 500; } .ne-hero .ne-placeholder { height: 260px; font-size: 13px; } /* mockup stand-in photos — placeholder stock images used during build/preview so sections don't sit empty before real Tier 2/3 illustration is commissioned. Swap out src/background-image for the final art later; the .ne-placeholder sizing/border scaffolding stays the same either way. */ .ne-placeholder.ne-has-image { background-image: var(--ne-placeholder-img); background-size: cover; background-position: center; background-repeat: no-repeat; } /* radiating rays, anchored to the eye mark */ .ne-ray-bg { position: absolute; top: -640px; left: -601px; width: 1340px; height: 1340px; z-index: 0; pointer-events: none; } .ne-ray-bg line { stroke-width: 1; transform-box: view-box; transform-origin: 120px 120px; animation-name: neRaySweep; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: backwards; } @keyframes neRaySweep { 0%, 100% { opacity: 0.1; transform: rotate(var(--rot-from, -4deg)) scale(var(--scale-from, 0.7)); } 50% { opacity: 0.6; transform: rotate(var(--rot-to, 4deg)) scale(var(--scale-to, 1.2)); } } .ne-search-cta { max-width: 640px; margin: 40px auto 0; padding: 18px 20px; background: #FAF9F5; border: 1px solid var(--wp--preset--color--border); border-radius: 5px; } .ne-search-cta .ne-search-row { position: relative; } .ne-search-cta input { width: 100%; border: 1px solid var(--wp--preset--color--border); border-radius: 5px; padding: 10px 54px 10px 14px; font-family: 'Public Sans', sans-serif; font-size: 14px; background: var(--wp--preset--color--cloud-dancer); color: var(--wp--preset--color--ink); } .ne-search-cta button { position: absolute; top: 6px; right: 6px; bottom: 6px; width: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; background: var(--wp--preset--color--trust-blue); color: var(--wp--preset--color--cloud-dancer); border-radius: 5px; cursor: pointer; transition: background 0.2s ease; } .ne-search-cta button:hover { background: var(--wp--preset--color--soft-blue); } .ne-powered-by { display: block; text-align: center; margin-top: 12px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: #8A8578; } .ne-powered-by strong { color: var(--wp--preset--color--trust-blue); font-weight: 500; } /* pillar landing page hero — same ray-bg technique/keyframes as the homepage hero (defined further down under "radiating rays"), single-toned to the current pillar's color instead of cycling all 3 (see site.js initRays, which keys off the body.category-{slug} class WordPress adds automatically on a category archive — this one template serves all 3 pillars). */ .ne-pillar-hero { position: relative; background: #FAF9F5; padding: 64px 24px 96px; border-bottom: 1px solid var(--wp--preset--color--border); overflow: hidden; } .ne-pillar-hero-inner { position: relative; z-index: 1; max-width: 780px; } .ne-pillar-hero .wp-block-query-title { font-size: 40px; margin: 0; } .ne-pillar-hero .wp-block-term-description p:first-child { font-size: 17px; line-height: 1.6; color: #4A473F; margin: 14px 0 0; max-width: 56ch; } .ne-pillar-hero .wp-block-term-description p:last-child { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.6; margin: 18px 0 0; max-width: 50ch; } body.category-lifestyle .ne-pillar-hero .wp-block-query-title, body.category-lifestyle .ne-pillar-hero .wp-block-term-description p:last-child { color: var(--wp--preset--color--warm-clay); } body.category-tech .ne-pillar-hero .wp-block-query-title, body.category-tech .ne-pillar-hero .wp-block-term-description p:last-child { color: var(--wp--preset--color--trust-blue); } body.category-finance .ne-pillar-hero .wp-block-query-title, body.category-finance .ne-pillar-hero .wp-block-term-description p:last-child { color: var(--wp--preset--color--pine); } .ne-empty-state { font-size: 15px; color: #6B675C; grid-column: 1 / -1; } /* pillar cards */ .ne-section-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8578; margin: 48px 0 16px; } /* per-pillar archive section label — wireframe (pillar-lifestyle/tech/finance.html) specifies "{Category} at a glance", not the generic "Recent posts" used on the homepage's own feed. category.html is one shared template for all three archives, so the label text is driven by WordPress's own category-{slug} body class rather than duplicating the template per pillar. */ .category-lifestyle .ne-section-label-pillar::before { content: "Lifestyle at a glance"; } .category-tech .ne-section-label-pillar::before { content: "Tech at a glance"; } .category-finance .ne-section-label-pillar::before { content: "Finance at a glance"; } .ne-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ne-pillar-card { background: #FAF9F5; border: 1px solid var(--wp--preset--color--border); border-radius: 5px; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .ne-pillar-card:hover { border-color: #C7C1B2; box-shadow: 0 4px 16px rgba(33, 31, 27, 0.06); transform: translateY(-2px); } .ne-pillar-card-image-link { display: block; } .ne-pillar-card .ne-placeholder { aspect-ratio: 3 / 2; border-radius: 0; border-left: none; border-right: none; border-top: none; transition: transform 0.3s ease; } /* subtle zoom-on-hover, scoped to card images specifically clickable via the card's own stretched-link/click-target — not applied to static, non-linked images (e.g. the single-post's own cover, the About page bio photo). */ .ne-pillar-card:hover .ne-placeholder { transform: scale(1.06); } .ne-pillar-card .ne-body { padding: 20px; } .ne-pillar-card h3 { font-size: 20px; margin-top: 0; margin-bottom: 8px; } .ne-pillar-card h3 a { color: inherit; display: flex; align-items: center; gap: 8px; } .ne-card-eye { width: 22px; height: auto; flex-shrink: 0; transition: transform 0.2s ease; } .ne-pillar-card:hover .ne-card-eye { transform: translateX(3px); } .ne-pillar-card.lifestyle h3 { color: var(--wp--preset--color--warm-clay); } .ne-pillar-card.tech h3 { color: var(--wp--preset--color--trust-blue); } .ne-pillar-card.finance h3 { color: var(--wp--preset--color--pine); } .ne-pillar-card .ne-desc { font-size: 13px; color: #5A564A; margin-bottom: 14px; } .ne-pillar-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .ne-pillar-card ul li { margin-block-start: 0; margin-block-end: 0; } .ne-pillar-card li a { font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--ink); transition: color 0.2s ease; display: flex; align-items: flex-start; gap: 6px; } .ne-pillar-card li a::before { margin-top: 5px; flex-shrink: 0; } .ne-pillar-card li a .ne-link-pencil { margin-top: 5px; } .ne-pillar-card li a:hover { color: var(--wp--preset--color--trust-blue); } .ne-link-pencil { width: 12px; height: 12px; flex-shrink: 0; color: #A39D8C; transform-origin: 16% 88%; } a:hover .ne-link-pencil { animation: nePencilWiggle 0.5s ease-in-out infinite; } @keyframes nePencilWiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } } /* recent feed — .ne-feed is the OUTER Query Loop wrapper (single child: .wp-block-post-template), not the grid itself; the actual grid lives on that inner child (see the ne-feed .wp-block-post-template rule below). Do not make .ne-feed a grid container — a 3-column grid with one unspanned child only renders that child at 1/3 width. */ .ne-feed { display: block; } .ne-post-card { position: relative; height: 100%; border: 1px solid var(--wp--preset--color--border); border-radius: 5px; overflow: hidden; background: #FAF9F5; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .ne-post-card:hover { border-color: #C7C1B2; box-shadow: 0 4px 16px rgba(33, 31, 27, 0.06); transform: translateY(-2px); } .ne-post-card .ne-placeholder { aspect-ratio: 3 / 2; border-radius: 0; border-left: none; border-right: none; border-top: none; } .ne-post-card > * { margin-block-start: 0; margin-block-end: 0; } .ne-tag-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 5px; margin-bottom: 10px; font-family: 'IBM Plex Mono', monospace; } .ne-tag-chip.lifestyle { background: #F3E3D6; color: var(--wp--preset--color--warm-clay); } .ne-tag-chip.tech { background: #E4EBF1; color: var(--wp--preset--color--trust-blue); } .ne-tag-chip.finance { background: #DCEBE3; color: var(--wp--preset--color--pine); } .ne-post-card h4 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; margin: 0 0 8px; transition: color 0.2s ease; } .ne-post-card h4 a { color: inherit; display: flex; align-items: flex-start; gap: 6px; } .ne-post-card h4 .ne-link-pencil { margin-top: 7px; } .ne-post-card h4 a::after { content: ''; position: absolute; inset: 0; } .ne-post-card:hover h4 { color: var(--wp--preset--color--trust-blue); } .ne-post-meta { font-size: 12px; color: #8A8578; font-family: 'IBM Plex Mono', monospace; margin-bottom: 6px; } /* footer */ .ne-footer { margin-top: 64px; border-top: 1px solid var(--wp--preset--color--border); padding: 32px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6B675C; flex-wrap: wrap; gap: 16px; } .ne-footer-social { display: flex; gap: 2px; } .ne-footer-credential { font-size: 12px; color: #8A8578; margin-top: 4px; } .ne-footer-links a { color: inherit; } .ne-footer-links a:hover { color: var(--wp--preset--color--trust-blue); } @media (max-width: 760px) { .ne-hero { grid-template-columns: 1fr; } .ne-pillars { grid-template-columns: 1fr; } .ne-pillar-nav { display: none; } .ne-nav-burger { display: flex; } /* no real :hover on touch — show icons at full/original color by default rather than the dimmed desktop resting state, since there's no hover interaction to reveal it. */ .ne-icon-linkedin { color: var(--wp--preset--color--soft-blue); } .ne-icon-brand { filter: none; } } /* pencil affordance for Query Loop–generated links (dynamic content, so the two-tone SVG is applied as a CSS background image instead of inline markup per item — same visual result, works with native WordPress blocks). */ .ne-link-pencil-css a::before, a.ne-link-pencil-css::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background-image: url('assets/images/pencil.svg'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; transition: transform 0.15s ease; } .ne-link-pencil-css a:hover::before, a.ne-link-pencil-css:hover::before { animation: nePencilWiggle 0.5s ease-in-out infinite; transform-origin: 16% 88%; } /* style native Query Loop output to match the confirmed design — pillar card "latest posts" list (List layout: ul > li > post-title) */ .ne-pillar-query ul.wp-block-post-template { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .ne-pillar-query .wp-block-post-title { font-size: 14px; font-family: 'Public Sans', sans-serif; font-weight: 400; margin: 0; } .ne-pillar-query .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; transition: color 0.2s ease; } .ne-pillar-query .wp-block-post-title a:hover { color: var(--wp--preset--color--trust-blue); } /* recent feed grid (native Query Loop, grid layout). !important because WordPress generates its own grid-template-columns for this block (fixed px values based on its own width assumption, not our 1080px container), loaded after our stylesheet — confirmed via computed styles showing 197.5px columns instead of filling the actual 1080px parent. */ .ne-feed .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; } /* .ne-feed itself is display:block, not the grid — the actual grid lives on its child .wp-block-post-template above. That rule uses !important to beat WordPress's own generated column widths, and !important always wins over a plain rule regardless of media query — so this override needs its own !important, AND (since both rules then tie on specificity+importance) must come AFTER the desktop rule in source order to win that tie at narrow viewports. Placing it earlier in the file, even inside its own media query, silently loses to the later desktop rule. */ @media (max-width: 760px) { .ne-feed .wp-block-post-template { grid-template-columns: 1fr !important; } } /* thumbnail: a static placeholder always renders (via .ne-post-thumb-fallback), with the real wp:post-featured-image block layered on top via absolute positioning. wp:post-featured-image renders NOTHING in the DOM at all when a post has no featured image (confirmed — no element to target with a CSS :empty/:not(:has()) fallback), so the placeholder is a separate always-present element underneath, not a CSS fallback state of the block itself. Once real featured images exist, the block covers the placeholder completely (same inset:0 sizing) rather than needing conditional logic. */ .ne-post-thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; transition: transform 0.3s ease; } .ne-post-card:hover .ne-post-thumb { transform: scale(1.06); } .ne-post-thumb-fallback { position: absolute; inset: 0; z-index: 0; border-radius: 0; } .ne-post-card .wp-block-post-featured-image { position: absolute; inset: 0; z-index: 1; margin: 0; } .ne-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } .ne-post-card .ne-body { padding: 16px 16px 22px; font-size: 14px; line-height: 1.4; } .ne-post-card .wp-block-post-terms { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 5px; margin-bottom: 10px; font-family: 'IBM Plex Mono', monospace; background: #EFEEEA; color: var(--wp--preset--color--ink); } .ne-post-card .wp-block-post-terms a { color: inherit; } /* per-pillar tag-chip color, matched by category slug in the term link's own href (wp:post-terms doesn't expose a per-term CSS class to target directly, but it does render a real link to the category archive, which is enough to select on). */ .ne-post-card .wp-block-post-terms:has(a[href$="/lifestyle/"]), .ne-post-head .wp-block-post-terms:has(a[href$="/lifestyle/"]) { background: #F3E3D6; color: var(--wp--preset--color--warm-clay); } .ne-post-card .wp-block-post-terms:has(a[href$="/tech/"]), .ne-post-head .wp-block-post-terms:has(a[href$="/tech/"]) { background: #E4EBF1; color: var(--wp--preset--color--trust-blue); } .ne-post-card .wp-block-post-terms:has(a[href$="/finance/"]), .ne-post-head .wp-block-post-terms:has(a[href$="/finance/"]) { background: #DCEBE3; color: var(--wp--preset--color--pine); } /* same category-match trick, applied to pick a stand-in cover photo per pillar for the (currently empty) featured-image slot — :has() looks forward at the post-terms link further down the card to identify the category, since the thumbnail itself has no category info of its own. */ .ne-post-card:has(.wp-block-post-terms a[href$="/lifestyle/"]) .ne-post-thumb-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-lifestyle.webp); } .ne-post-card:has(.wp-block-post-terms a[href$="/tech/"]) .ne-post-thumb-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-tech.webp); } .ne-post-card:has(.wp-block-post-terms a[href$="/finance/"]) .ne-post-thumb-fallback { --ne-placeholder-img: url(/wp-content/themes/twentytwentyfive-child-nickedeye/assets/images/placeholders/post-finance.webp); } .ne-post-card .wp-block-post-date { display: block; font-size: 12px; color: #8A8578; font-family: 'IBM Plex Mono', monospace; margin-bottom: 6px; } .ne-post-card .wp-block-post-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; line-height: 1.6; margin: 0; } .ne-post-card .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; display: flex; align-items: flex-start; gap: 6px; } .ne-post-card .wp-block-post-title a::before { margin-top: 7px; flex-shrink: 0; } .ne-post-card .wp-block-post-title a::after { content: ''; position: absolute; inset: 0; } .ne-post-card:hover .wp-block-post-title a { color: var(--wp--preset--color--trust-blue); } /* archive pagination — sits below .ne-feed on category.html */ .ne-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; } .ne-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--ink); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .ne-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--trust-blue); color: var(--wp--preset--color--trust-blue); } .ne-pagination .page-numbers.current { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #FAF9F5; } .ne-pagination .page-numbers.dots { border: none; color: #8A8578; } /* single post template */ .ne-post-cover { max-width: 1080px; margin: 40px auto 0; padding: 0 24px; position: relative; height: 360px; } .ne-post-cover-fallback { position: absolute; inset: 0 24px; border-radius: 5px; height: 360px; } .ne-post-cover .wp-block-post-featured-image.ne-post-cover-image { position: absolute; inset: 0 24px; margin: 0; z-index: 1; height: 360px; border-radius: 5px; } .ne-post-cover .wp-block-post-featured-image.ne-post-cover-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .ne-post-head { max-width: 720px; margin: 32px auto 0; padding: 0 24px; } .ne-post-head .wp-block-post-terms { margin-bottom: 14px; } .ne-post-head .wp-block-post-title { font-size: 36px; line-height: 1.2; margin: 0; } .ne-post-meta-row .wp-block-post-date { font-size: 13px; color: #8A8578; font-family: 'IBM Plex Mono', monospace; margin-top: 14px; display: block; } .ne-post-body { max-width: 720px; margin: 32px auto 0; padding: 0 24px 64px; font-size: 17px; } .ne-post-body p { margin: 0 0 20px; } .ne-post-body h2 { font-size: 22px; margin: 40px 0 16px; } /* Core's own block-library image CSS (max-width:100%) only gets enqueued when WordPress recognizes a real `wp:image` block comment in the content — raw
HTML (e.g. bulk-inserted via wp-cli, bypassing the block editor) matches the class name but never triggers that conditional asset load, so it renders unconstrained without this explicit rule. */ .ne-post-body .wp-block-image { margin: 0 0 32px; } .ne-post-body .wp-block-image img { max-width: 100%; height: auto; border-radius: 5px; display: block; } .ne-post-body .wp-block-image figcaption { font-size: 14px; color: var(--wp--preset--color--ink); opacity: 0.65; margin-top: 8px; } .ne-post-body pre { font-family: 'IBM Plex Mono', monospace; font-size: 14px; line-height: 1.6; background: var(--wp--preset--color--cloud-dancer); border: 1px solid var(--wp--preset--color--border); border-radius: 5px; padding: 16px 20px; margin: 0 0 24px; overflow-x: auto; } .ne-post-body code { font-family: 'IBM Plex Mono', monospace; font-size: 0.9em; background: var(--wp--preset--color--cloud-dancer); border: 1px solid var(--wp--preset--color--border); border-radius: 3px; padding: 1px 5px; } .ne-post-body pre code { background: none; border: none; padding: 0; } .ne-post-body ol, .ne-post-body ul { margin: 0 0 20px; padding-left: 24px; } .ne-post-body li { margin-bottom: 8px; } .ne-post-body blockquote { font-family: 'Fraunces', serif; font-style: italic; font-size: 22px; color: var(--wp--preset--color--trust-blue); border-left: 3px solid var(--wp--preset--color--border); margin: 32px 0; padding: 4px 0 4px 24px; } /* in-body links — the sitewide `a` reset (flat trust-blue, no underline) reads as barely-distinguishable from body text inside a paragraph of prose, per user spot-check. Add a dotted underline so links are obviously clickable inline, colored per pillar rather than a flat trust-blue — same body:has() category-detection trick as the post-cover-fallback rule above, since .ne-post-body has no post-terms of its own to key off. */ .ne-post-body a { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 1px; text-underline-offset: 3px; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0%; transition: background-size 0.15s ease; } .ne-post-body a:hover { background-size: 100% 33%; } body:has(.ne-post-head .wp-block-post-terms a[href$="/lifestyle/"]) .ne-post-body a { color: var(--wp--preset--color--warm-clay); background-image: linear-gradient(rgba(199, 123, 74, 0.18), rgba(199, 123, 74, 0.18)); } body:has(.ne-post-head .wp-block-post-terms a[href$="/tech/"]) .ne-post-body a { color: var(--wp--preset--color--trust-blue); background-image: linear-gradient(rgba(44, 74, 110, 0.18), rgba(44, 74, 110, 0.18)); } body:has(.ne-post-head .wp-block-post-terms a[href$="/finance/"]) .ne-post-body a { color: var(--wp--preset--color--pine); background-image: linear-gradient(rgba(31, 109, 76, 0.18), rgba(31, 109, 76, 0.18)); } /* generic content page (About, Privacy Policy) */ .ne-content-page { max-width: 680px; margin: 0 auto; padding: 56px 24px 64px; } .ne-content-page .wp-block-post-title { font-size: 34px; margin: 0 0 24px; } .ne-content-page p { font-size: 17px; line-height: 1.6; margin: 0 0 20px; } /* the "Tech Enthusiast, WhooshPro" credential line — a lone bolded run inside its own paragraph, styled distinctly rather than needing a dedicated block/class for one line of page copy. */ .ne-content-page p:has(> strong:only-child) { color: var(--wp--preset--color--trust-blue); font-weight: 500; font-size: 14px; margin: 28px 0; } .ne-content-page h2 { font-size: 22px; margin: 40px 0 16px; } /* the bio/section figure — mockup shows a Tier 2 illustration slot here ("hint-of-Nicholas"); using the real photo already in use for the hero, since it's genuinely appropriate content for an About-page portrait, not just a stand-in. Page-specific content (only About needs this, not Privacy Policy), so it lives in the page's own post content, not the shared page.html template. */ .ne-content-page .wp-block-image { margin: 0 0 32px; } .ne-content-page .wp-block-image img { width: 100%; height: 220px; object-fit: cover; border-radius: 5px; display: block; } @media (prefers-reduced-motion: reduce) { .ne-ray-bg line { animation: none; opacity: 0.25; } .ne-pillar-card:hover, .ne-post-card:hover { transform: none; } .ne-pillar-card:hover .ne-placeholder, .ne-post-card:hover .ne-post-thumb { transform: none; } }