/* Theme Name: KevinWHerron — TT5 Child Theme URI: https://kevinwherron.com Description: Child theme for Twenty Twenty-Five with custom light/dark palette, pill nav, and simplified link hover. Includes tightened blockquote with prominent citation. Author: Kevin W. Herron Author URI: https://kevinwherron.com Template: twentytwentyfive Version: 1.3.9 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kh-tt5-child Tags: blog, one-column, accessibility-ready, block-theme, custom-colors, editor-style */ /* ===================== Root Variables (Light Default) ===================== */ :root { --kh-paper: #FBFAF7; --kh-ink: #2B2E41; --kh-meta: #575B78; --kh-accent: #3B6E4E; --kh-link: #1F5C6B; --kh-link-hover: #1E6B85; /* --kh-focus-ring defined once here; same value in both modes */ --kh-focus-ring: 2px solid var(--kh-accent); --kh-radius: 14px; --kh-radius-sm: 10px; --kh-shadow: 0 8px 24px rgba(0,0,0,.08); --kh-shadow-sm: 0 4px 16px rgba(0,0,0,.06); --kh-border: rgba(0,0,0,.12); --kh-surface: #FFFFFF; --kh-surface-alt: #F3EFE6; } /* OS dark mode */ @media (prefers-color-scheme: dark) { :root { --kh-paper: #11131A; --kh-ink: #E9EAF2; --kh-meta: #8892B5; --kh-accent: #7BC09A; --kh-link: #6DB8D4; --kh-link-hover: #96CDD9; --kh-border: rgba(255,255,255,.16); --kh-surface: #1A1D27; --kh-surface-alt: #212634; --kh-shadow: none; --kh-shadow-sm: none; } } /* Manual dark toggle via .is-dark class on or wrapper */ .is-dark { --kh-paper: #11131A; --kh-ink: #E9EAF2; --kh-meta: #8892B5; --kh-accent: #7BC09A; --kh-link: #6DB8D4; --kh-link-hover: #96CDD9; --kh-border: rgba(255,255,255,.16); --kh-surface: #1A1D27; --kh-surface-alt: #212634; --kh-shadow: none; --kh-shadow-sm: none; } /* These override OS preference when data-theme is set manually on :root */ :root[data-theme="light"] { --kh-paper: #FBFAF7; --kh-ink: #2B2E41; --kh-meta: #575B78; --kh-accent: #3B6E4E; --kh-link: #1F5C6B; --kh-link-hover: #1E6B85; --kh-border: rgba(0,0,0,.12); --kh-surface: #FFFFFF; --kh-surface-alt: #F3EFE6; --kh-shadow: 0 8px 24px rgba(0,0,0,.08); --kh-shadow-sm: 0 4px 16px rgba(0,0,0,.06); } :root[data-theme="dark"] { --kh-paper: #11131A; --kh-ink: #E9EAF2; --kh-meta: #8892B5; --kh-accent: #7BC09A; --kh-link: #6DB8D4; --kh-link-hover: #96CDD9; --kh-border: rgba(255,255,255,.16); --kh-surface: #1A1D27; --kh-surface-alt: #212634; --kh-shadow: none; --kh-shadow-sm: none; } /* ===================== Base ===================== */ body { background: var(--kh-paper); color: var(--kh-ink); margin: 0; font-size: 1.05rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; letter-spacing: 0.005em; margin-top: 1.6rem; margin-bottom: .6rem; color: var(--kh-ink); } p { margin: 0 0 1rem; } ul, ol { margin: 0 0 1rem 1.25rem; } em, i { color: var(--kh-meta); } small, .has-small-font-size, .comment-metadata, .comment-author { color: var(--kh-meta); } /* ===================== Blockquotes ===================== */ /* Fix #2: Consolidated into a single authoritative definition. Previous duplicate block (with border-left and italic) has been removed. */ blockquote { margin: 1.25rem auto; padding: 1rem 1.25rem; max-width: 65ch; background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: var(--kh-radius-sm); color: var(--kh-ink); line-height: 1.4; } blockquote p { margin: .4rem 0; } blockquote cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 600; color: var(--kh-accent); text-align: right; } blockquote cite::before { content: "— "; } /* ===================== Links ===================== */ a { color: var(--kh-link); transition: color .2s ease; } a:hover, a:focus-visible { color: var(--kh-link-hover); outline: none; } a:focus-visible { outline: var(--kh-focus-ring); border-radius: 2px; } /* ===================== Header Navigation ===================== */ .wp-block-navigation__container a, .wp-block-navigation-item a { display: inline-block; padding: 0.35rem 0.85rem; margin: 0 0.15rem; background-color: transparent; border: 2px solid var(--kh-link); border-radius: 9999px; font-weight: 500; color: var(--kh-link); transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .wp-block-navigation__container a:hover, .wp-block-navigation-item a:hover { background-color: var(--kh-link); color: #fff; border-color: var(--kh-link); box-shadow: var(--kh-shadow-sm); } .wp-block-navigation-item .current-menu-item > a, .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"] { background-color: var(--kh-link); color: #fff; border-color: var(--kh-link); box-shadow: var(--kh-shadow-sm); } /* ===================== Buttons ===================== */ button, .wp-element-button, .wp-block-button__link { background: var(--kh-link); color: #fff; border: 2px solid var(--kh-link); border-radius: var(--kh-radius); padding: .55rem 1rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease; } button:hover, .wp-element-button:hover, .wp-block-button__link:hover { background: transparent; color: var(--kh-link-hover); border-color: var(--kh-link-hover); box-shadow: var(--kh-shadow-sm); } button:active, .wp-element-button:active, .wp-block-button__link:active { transform: translateY(1px); } .is-style-outline .wp-block-button__link { background: transparent; color: var(--kh-link); border-color: var(--kh-link); } .is-style-outline .wp-block-button__link:hover { color: var(--kh-link-hover); border-color: var(--kh-link-hover); } .is-style-ghost .wp-block-button__link { background: transparent; color: var(--kh-link); border-color: transparent; } .is-style-ghost .wp-block-button__link:hover { background: var(--kh-surface-alt); color: var(--kh-link-hover); border-color: var(--kh-border); } /* ===================== Forms ===================== */ input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], textarea, select { width: 100%; padding: .6rem .75rem; border: 1px solid var(--kh-border); border-radius: var(--kh-radius-sm); background: var(--kh-surface); color: var(--kh-ink); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } input::placeholder, textarea::placeholder { color: var(--kh-meta); opacity: .9; } input:focus, textarea:focus, select:focus { outline: var(--kh-focus-ring); box-shadow: var(--kh-shadow-sm); border-color: var(--kh-link); } /* ===================== Tables & Code ===================== */ table { border-collapse: collapse; width: 100%; margin: 1rem 0; background: var(--kh-surface); color: var(--kh-ink); } th, td { border: 1px solid var(--kh-border); padding: .6rem .75rem; } thead th { background: var(--kh-surface-alt); text-align: left; } pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } pre { background: var(--kh-surface-alt); padding: 1rem; border-radius: var(--kh-radius-sm); overflow-x: auto; color: var(--kh-ink); border: 1px solid var(--kh-border); } /* ===================== Comments ===================== */ .comment-list .comment-meta, .comment-list .comment-author, .comment-list .comment-metadata a { color: var(--kh-meta); } .comment-list .comment-metadata a:hover { color: var(--kh-link-hover); } /* ===================== Footer ===================== */ .site-footer { color: var(--kh-meta); background: transparent; } .site-footer a { color: var(--kh-link); } .site-footer a:hover { color: var(--kh-link-hover); } /* ===================== WP Specific Fixes ===================== */ /* Consolidated: suppress gradient background-image TT5 applies to links/buttons */ .wp-block-navigation a, .wp-block-navigation__container a, .wp-block-navigation-item a, .wp-block-post-navigation-link a, .wp-element-button, .wp-block-button__link, .page-links a { background-image: none; } .wp-block-group.is-style-card, .wp-block-columns.is-style-card { background: var(--kh-surface); border: 1px solid var(--kh-border); border-radius: var(--kh-radius); box-shadow: var(--kh-shadow); padding: 1rem; } figure, .wp-block-image img { border-radius: var(--kh-radius-sm); } ::selection { background: color-mix(in oklab, var(--kh-accent) 35%, transparent); } /* ===================== Accessibility & UX ===================== */ a, button, [role="button"], input, select, textarea { outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--kh-focus-ring); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html:focus-within { scroll-behavior: auto; } } /* Skip link utility */ .skip-link { position: absolute; left: -9999px; top: auto; } .skip-link:focus { left: .5rem; top: .5rem; z-index: 1000; background: var(--kh-surface); color: var(--kh-ink); border: 2px solid var(--kh-accent); padding: .4rem .6rem; border-radius: .5rem; } /* Optional: Theme toggle button */ .kh-theme-toggle { border: 1px solid var(--kh-border); background: var(--kh-surface); color: var(--kh-ink); border-radius: var(--kh-radius-sm); padding: .35rem .6rem; cursor: pointer; } .kh-theme-toggle:focus-visible { outline: var(--kh-focus-ring); } /* ===================== Body Text Links (Always Underlined) ===================== */ .entry-content a, .comment-content a, .page-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .entry-content a:hover, .comment-content a:hover, .page-content a:hover, .entry-content a:focus-visible, .comment-content a:focus-visible, .page-content a:focus-visible { color: var(--kh-link-hover); text-decoration-thickness: 2px; } /* Fix #3: De-duplicated — was repeated twice verbatim. */ .archive .wp-block-post-excerpt p, .archive .wp-block-post-content p, .search .wp-block-post-excerpt p, .search .wp-block-post-content p { font-size: 1.05rem; line-height: 1.6; }