/* ========================================================================= Simpit theme — component styles. theme.json already handles colors/typography/spacing tokens for Gutenberg blocks. This file covers everything the block style engine can't reach: dark/light mode switching, card components, hero, sticky TOC, ad slots, verdict box, comparison table, micro-animations, and responsive rules. Mobile-first: base styles target 375px, then min-width breakpoints layer on for 768 / 1024 / 1440. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Theme mode variables Dark is the default (matches theme.json root styles). Light mode is applied by toggling data-theme="light" on via dark-mode-toggle.js. prefers-color-scheme is intentionally NOT auto-applied: the toggle state is user-chosen and persisted in localStorage so it doesn't flip on the user unexpectedly; see assets/js/dark-mode-toggle.js. ------------------------------------------------------------------------- */ /* Contrast notes (WCAG 2.1 AA, computed against sRGB relative luminance, not eyeballed): - --simpit-accent (#3B82F6) as TEXT: 4.84:1 on navy-900, but only 3.53:1 on cloud-50 — fails AA (4.5:1) in light mode. That's why link color uses a separate --simpit-link variable that swaps to the darker #2563EB (4.94:1 on cloud-50) in light mode instead of reusing accent. - --simpit-accent / --simpit-cta as a BUTTON BACKGROUND with WHITE text: 3.69:1 and 2.80:1 respectively — both fail AA even for large text. Buttons therefore use dark navy text (--simpit-button-text, always #0F172A regardless of mode) on the accent background instead: 4.84:1 and 6.37:1 — both pass. Dark text on a bright indicator color also reads as more "cockpit instrument panel" than white-on-color would. */ :root, html[data-theme="dark"] { --simpit-bg: var(--wp--preset--color--navy-900, #0F172A); --simpit-surface: var(--wp--preset--color--navy-800, #1E293B); --simpit-border: var(--wp--preset--color--navy-700, #334155); --simpit-text: var(--wp--preset--color--mist-100, #E2E8F0); --simpit-text-muted: #94A3B8; --simpit-accent: var(--wp--preset--color--signal-blue, #3B82F6); --simpit-accent-hover: var(--wp--preset--color--signal-blue-dark, #2563EB); --simpit-link: var(--wp--preset--color--signal-blue, #3B82F6); --simpit-button-text: #0F172A; --simpit-cta: var(--wp--preset--color--warning-orange, #F97316); --simpit-pros: var(--wp--preset--color--success-green, #22C55E); --simpit-cons: var(--wp--preset--color--alert-red, #EF4444); --simpit-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } html[data-theme="light"] { --simpit-bg: var(--wp--preset--color--cloud-50, #F8FAFC); --simpit-surface: var(--wp--preset--color--cloud-100, #F1F5F9); --simpit-border: var(--wp--preset--color--cloud-300, #CBD5E1); --simpit-text: var(--wp--preset--color--ink-900, #0F172A); --simpit-text-muted: #475569; --simpit-accent: var(--wp--preset--color--signal-blue, #3B82F6); --simpit-accent-hover: var(--wp--preset--color--signal-blue-dark, #2563EB); --simpit-link: var(--wp--preset--color--signal-blue-dark, #2563EB); --simpit-button-text: #0F172A; --simpit-cta: var(--wp--preset--color--warning-orange, #F97316); --simpit-pros: #16A34A; --simpit-cons: #DC2626; --simpit-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } body { background-color: var(--simpit-bg); color: var(--simpit-text); transition: background-color 200ms ease, color 200ms ease; } /* ------------------------------------------------------------------------- 2. Accessibility basics ------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 0.75rem 1.25rem; background: var(--simpit-accent); color: #fff; font-weight: 600; border-radius: 0 0 8px 0; text-decoration: none; } .skip-link:focus { left: 0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--simpit-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- 3. Dark/light mode toggle button (in header) ------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--simpit-border); border-radius: 999px; background: var(--simpit-surface); color: var(--simpit-text); cursor: pointer; transition: transform 150ms ease, background-color 150ms ease; } .theme-toggle:hover { transform: scale(1.06); } /* Buttons keep a constant background on hover (darkening it would cut into the contrast margin against the dark button text) and signal interactivity with a lift + shadow instead. */ .wp-element-button, .wp-block-button__link { transition: transform 180ms ease, box-shadow 180ms ease; } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--simpit-shadow); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } html[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ------------------------------------------------------------------------- 4. Mobile nav The burger + overlay menu is handled natively by core/navigation (overlayMenu:"mobile" in parts/header.html) — WordPress core supplies the accessible toggle button, focus trap, and Escape-to-close behavior, so no custom JS or CSS is needed here. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 5. Card grid (featured posts, category showcase, related posts) ------------------------------------------------------------------------- */ .simpit-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 1.5rem); } @media (min-width: 768px) { .simpit-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .simpit-card-grid { grid-template-columns: repeat(3, 1fr); } .simpit-card-grid.is-4-col { grid-template-columns: repeat(4, 1fr); } } .simpit-card { display: flex; flex-direction: column; background: var(--simpit-surface); border: 1px solid var(--simpit-border); border-radius: 12px; overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease; height: 100%; } .simpit-card:hover, .simpit-card:focus-within { transform: translateY(-4px) scale(1.01); box-shadow: var(--simpit-shadow); } .simpit-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } /* Wraps core/post-featured-image. When a post has no featured image, that block renders nothing at all — no element, nothing to style — so this wrapper carries its own on-brand placeholder graphic as a background. Once a real featured image is set, its fully covers this area and the placeholder is simply never seen. */ .simpit-card-media { aspect-ratio: 16 / 10; background-image: url('../images/card-placeholder.jpg'); background-size: cover; background-position: center; } /* Same idea as .simpit-card-media, for the full-width image at the top of a single post — a wider aspect ratio and the higher-resolution hero graphic, since this renders much larger on screen. */ .simpit-article-media { aspect-ratio: 21 / 9; border-radius: 12px; overflow: hidden; background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center; } .simpit-article-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .simpit-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; } .simpit-card__badge { display: inline-block; align-self: flex-start; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--simpit-bg); background: var(--simpit-accent); padding: 0.2rem 0.6rem; border-radius: 999px; } .simpit-card__title { font-size: 1.15rem; line-height: 1.3; margin: 0; } .simpit-card__title a { color: var(--simpit-text); text-decoration: none; } .simpit-card__title a:hover { color: var(--simpit-accent); } .simpit-card__excerpt { color: var(--simpit-text-muted); font-size: 0.925rem; margin: 0; } .simpit-card__meta { margin-top: auto; display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--simpit-text-muted); } /* ------------------------------------------------------------------------- 6. Hero (home) ------------------------------------------------------------------------- */ .simpit-hero { position: relative; padding: var(--wp--preset--spacing--60, 4.5rem) var(--wp--preset--spacing--20, 1rem); border-radius: 16px; overflow: hidden; color: #F8FAFC; text-align: center; isolation: isolate; /* Bundled default background so the hero looks finished out of the box. It sits on the block's own background layer, BELOW the core/cover dim overlay (span.wp-block-cover__background, which has its own navy gradient + 70% dim set in patterns/hero-home.php) and below the text content — so it reads as a dimmed photo, per the original brief. Replace it any time via the block editor's own "media" picker on the Cover block; that image renders on the span itself and will simply sit in front of this CSS fallback. */ background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center; } .simpit-hero__title { font-size: clamp(1.75rem, 5vw, 3.25rem); margin: 0 0 1rem; } .simpit-hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 42rem; margin: 0 auto 1.75rem; color: #CBD5E1; } /* ------------------------------------------------------------------------- 7. Category showcase tiles ------------------------------------------------------------------------- */ .simpit-category-tile { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--simpit-surface); border: 1px solid var(--simpit-border); border-radius: 12px; text-decoration: none; color: var(--simpit-text); transition: transform 180ms ease, border-color 180ms ease; } .simpit-category-tile:hover { transform: translateY(-3px); border-color: var(--simpit-accent); } .simpit-category-tile__icon { font-size: 2rem; line-height: 1; } /* ------------------------------------------------------------------------- 8. Review verdict box ------------------------------------------------------------------------- */ .simpit-verdict { display: grid; grid-template-columns: 1fr; gap: 1.5rem; background: var(--simpit-surface); border: 1px solid var(--simpit-border); border-left: 4px solid var(--simpit-accent); border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0 2rem; } @media (min-width: 768px) { .simpit-verdict { grid-template-columns: 1fr 1fr; } } .simpit-verdict__rating { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2rem; color: var(--simpit-accent); } .simpit-verdict__rating small { font-size: 1rem; color: var(--simpit-text-muted); font-weight: 500; } .simpit-verdict__pros, .simpit-verdict__cons { list-style: none; margin: 0; padding: 0; } .simpit-verdict__pros li, .simpit-verdict__cons li { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.95rem; } .simpit-verdict__pros li::before { content: "+"; color: var(--simpit-pros); font-weight: 700; } .simpit-verdict__cons li::before { content: "−"; color: var(--simpit-cons); font-weight: 700; } .simpit-verdict__cta { grid-column: 1 / -1; } /* ------------------------------------------------------------------------- 9. Table of contents (sticky on desktop) ------------------------------------------------------------------------- */ .simpit-toc { background: var(--simpit-surface); border: 1px solid var(--simpit-border); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .simpit-toc__title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--simpit-text-muted); margin: 0 0 0.75rem; } .simpit-toc ol { margin: 0; padding-left: 1.1rem; } .simpit-toc a { color: var(--simpit-text); text-decoration: none; } .simpit-toc a:hover { color: var(--simpit-accent); } @media (min-width: 1024px) { .simpit-toc.is-sticky { position: sticky; top: 1.5rem; } } /* ------------------------------------------------------------------------- 10. Comparison table pattern ------------------------------------------------------------------------- */ .simpit-comparison-table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; margin: 1.5rem 0; } .simpit-comparison-table table { width: 100%; border-collapse: collapse; min-width: 480px; } .simpit-comparison-table th, .simpit-comparison-table td { border: 1px solid var(--simpit-border); padding: 0.75rem 1rem; text-align: left; font-size: 0.9rem; } .simpit-comparison-table thead th { background: var(--simpit-surface); font-family: var(--wp--preset--font-family--heading); } /* ------------------------------------------------------------------------- 11. Affiliate disclosure inline notice ------------------------------------------------------------------------- */ .simpit-affiliate-notice { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--simpit-surface); border: 1px dashed var(--simpit-border); border-radius: 8px; padding: 0.85rem 1rem; font-size: 0.85rem; color: var(--simpit-text-muted); margin: 1.25rem 0; } .simpit-affiliate-notice a { color: var(--simpit-accent); } /* ------------------------------------------------------------------------- 12. Ad slots Each slot is labelled visually only in the editor context; on the front end it renders exactly what the admin pasted, with a fixed-height reservation to reduce CLS while the ad script loads. ------------------------------------------------------------------------- */ .simpit-ad-slot { display: flex; align-items: center; justify-content: center; min-height: 100px; margin: 2rem auto; overflow: hidden; } .simpit-ad-slot[data-empty="true"] { display: none; } /* ------------------------------------------------------------------------- 13. Author box ------------------------------------------------------------------------- */ .simpit-author-box { display: flex; gap: 1rem; align-items: flex-start; background: var(--simpit-surface); border: 1px solid var(--simpit-border); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; } .simpit-author-box img { width: 64px; height: 64px; border-radius: 999px; flex-shrink: 0; } /* ------------------------------------------------------------------------- 14. Responsive container padding refinements ------------------------------------------------------------------------- */ @media (min-width: 1440px) { :root { --wp--style--global--wide-size: 1320px; } } /* ------------------------------------------------------------------------- 15. Extra micro-interactions Everything here is deliberately kept OUT of the hero / first viewport — scroll-triggered reveals only target below-the-fold elements (category tiles, trust columns, related posts) so the LCP element never starts hidden. All of it is progressive enhancement: assets/js/scroll-reveal.js adds the .reveal class itself (see that file), so with JS disabled every element is simply visible, full stop — no animation-dependent content. The global prefers-reduced-motion rule in section 2 already zeroes out every transition/animation duration on this page, so nothing here needs its own reduced-motion override. ------------------------------------------------------------------------- */ /* Scroll reveal (card grids, category tiles, trust columns, related posts) */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; transition-delay: calc(var(--reveal-index, 0) * 70ms); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Card photo zoom on hover, in addition to the existing card lift */ .simpit-card { overflow: hidden; } .simpit-card img { transition: transform 400ms ease; } .simpit-card:hover img { transform: scale(1.06); } /* Nav link underline sweep (core/navigation block markup) */ .wp-block-navigation-item__content { position: relative; } .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--simpit-accent); transition: right 200ms ease; } .wp-block-navigation-item__content:hover::after, .wp-block-navigation-item__content:focus-visible::after { right: 0; } /* TOC scroll-spy active link (assets/js/table-of-contents.js toggles this) */ .simpit-toc a.is-active { color: var(--simpit-accent); font-weight: 700; } /* Dark/light toggle: a quick spin the instant it's clicked (assets/js/dark-mode-toggle.js adds/removes .is-spinning) */ @keyframes simpit-toggle-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } .theme-toggle.is-spinning { animation: simpit-toggle-spin 300ms ease; } /* Hero CTA: a slow, subtle pulse to draw the eye without being obnoxious */ @keyframes simpit-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); } } .simpit-hero .wp-block-button__link { animation: simpit-cta-pulse 2.6s ease-in-out infinite; } .simpit-hero .wp-block-button__link:hover { animation-play-state: paused; } /* Back-to-top button (injected by assets/js/back-to-top.js) */ .simpit-back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--simpit-border); background: var(--simpit-surface); color: var(--simpit-text); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease; box-shadow: var(--simpit-shadow); } .simpit-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .simpit-back-to-top:hover { background: var(--simpit-accent); color: var(--simpit-button-text); }