/* Theme Name: Adviko Light Theme URI: https://adviko.by/blog/ Author: Andrew Golubev Author URI: https://adviko.by Description: Light editorial blog theme for adviko.by — monochrome palette, soft-gray canvas, white cards, 3-column feed, cover hero on posts, built-in light/dark toggle. Design ported from the Quark2-based look of docs.agenteum.top. Version: 1.0.4 Requires at least: 6.4 Tested up to: 7.1 Requires PHP: 7.4 License: MIT License URI: https://opensource.org/licenses/MIT Text Domain: adviko-light */ /*! * Adviko Light Blog — design system * ---------------------------------------------------------------- * A monochrome editorial blog look, ported for WordPress from the * Quark2 (Grav) design used on docs.agenteum.top/blog: * - whisper-soft canvas, white cards, shadow-first depth * - Inter for body AND headings (full Cyrillic coverage) * - Cal Sans kept in the font set for Latin-only display use; * it has no Cyrillic, so it is not first in the stack here * - light / dark themes via [data-theme] on * * Colour is foreign: the palette is monochrome, with a single * brand accent (#E83087) reserved for hover and focus moments. */ /* ---------- Fonts (self-hosted, no third-party requests) ---------- */ /* Inter — variable 100–900, four subsets. Latin files ship with the * theme; the cyrillic subsets are the Google Fonts builds. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Cal Sans — display font, single 400 weight (browsers synthesize * bolder). Latin-only: vendored for English content and future use. */ @font-face { font-family: "Cal Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cal-sans/cal-sans-latin.woff2") format("woff2"); } @font-face { font-family: "Cal Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cal-sans/cal-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Design tokens ---------- */ :root, :root[data-theme="light"] { --bl-bg: #fbfbfc; /* page canvas — whisper-soft gray */ --bl-bg-elev: #ffffff; /* cards / content surface */ --bl-bg-muted: #f2f2f4; /* recessed / chip fill */ --bl-bg-inverse: #111111; --bl-text: #242424; --bl-text-strong: #111111; --bl-text-muted: #6f6f6f; /* WCAG AA (>=4.5:1) on #fbfbfc and #ffffff */ --bl-text-inverse: #ffffff; --bl-ring: rgba(34, 42, 53, 0.08); --bl-border-strong: rgba(34, 42, 53, 0.14); --bl-divider: rgba(34, 42, 53, 0.08); --bl-shadow-card: rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.08) 0 0 0 1px, rgba(34, 42, 53, 0.05) 0 4px 8px 0; --bl-shadow-raised: rgba(19, 19, 22, 0.7) 0 1px 5px -4px, rgba(34, 42, 53, 0.1) 0 0 0 1px, rgba(34, 42, 53, 0.08) 0 12px 28px -8px; --bl-shadow-hl: inset 0 2px 0 rgba(255, 255, 255, 0.15); --bl-radius-xs: 4px; --bl-radius-sm: 6px; --bl-radius: 8px; --bl-radius-md: 12px; --bl-radius-lg: 16px; --bl-radius-pill: 9999px; --bl-nav-bg: rgba(255, 255, 255, 0.78); --bl-nav-border: rgba(34, 42, 53, 0.08); --bl-header-height: 72px; --bl-accent: #e83087; /* brand pink — hover/focus moments only */ --bl-accent-contrast: #ffffff; --bl-link: var(--bl-text); /* neutral links; set to #e83087 for pink */ --bl-focus-ring: color-mix(in oklab, #e83087 45%, transparent); --bl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* For a Latin-only (English) blog, put "Cal Sans" first here. */ --bl-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --bl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } :root[data-theme="dark"] { --bl-bg: #08090b; --bl-bg-elev: #1d1f25; /* card surface — lifted for visibility */ --bl-bg-muted: #2a2d34; /* recessed / hover state */ --bl-bg-inverse: #f5f5f5; --bl-text: #f2f2f3; --bl-text-strong: #ffffff; --bl-text-muted: #9a9aa0; --bl-text-inverse: #111111; --bl-ring: rgba(255, 255, 255, 0.14); --bl-border-strong: rgba(255, 255, 255, 0.2); --bl-divider: rgba(255, 255, 255, 0.1); --bl-shadow-card: rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px, rgba(0, 0, 0, 0.55) 0 4px 12px 0; --bl-shadow-raised: rgba(0, 0, 0, 0.85) 0 1px 5px -4px, rgba(255, 255, 255, 0.14) 0 0 0 1px, rgba(0, 0, 0, 0.65) 0 14px 32px -8px; --bl-shadow-hl: inset 0 1px 0 rgba(255, 255, 255, 0.06); --bl-nav-bg: rgba(11, 11, 12, 0.78); --bl-nav-border: rgba(255, 255, 255, 0.06); } /* Let the browser render native controls (checkboxes, scrollbars, the * textarea grabber) for the active theme, not just the OS preference. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bl-bg); color-scheme: light dark; } body { margin: 0; font-family: var(--bl-font-sans); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--bl-text); background-color: var(--bl-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; min-height: 100vh; display: flex; flex-direction: column; } #page-wrapper { flex: 1 0 auto; } img { max-width: 100%; height: auto; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--bl-font-display); color: var(--bl-text); letter-spacing: -0.01em; line-height: 1.15; margin-top: 0; margin-bottom: 0.4em; } /* h1 — airy, display scale, lighter weight */ h1 { font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; } /* h2 — confident, tighter, bolder, subtle accent bar */ h2 { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--bl-text-strong); position: relative; } h2::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--bl-text-strong); margin-bottom: 0.7rem; opacity: 0.9; } /* h3 — workhorse section heads, medium weight */ h3 { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; } h4 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; } h5 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; } h6 { font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bl-text-muted); } /* Headings that immediately follow another heading — don't double-space */ :is(h1, h2, h3) + :is(h1, h2, h3) { margin-top: 0.25em; } /* Generous top margin when headings follow body content — section rhythm */ :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, iframe, .card) + h1 { margin-top: 1.75em; } :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, iframe, .card) + h2 { margin-top: 1.65em; } :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, iframe, .card) + h3 { margin-top: 1.55em; } :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, iframe, .card) + h4 { margin-top: 1.45em; } :is(p, ul, ol, dl, blockquote, pre, table, figure, hr, iframe, .card) + :is(h5, h6) { margin-top: 1.35em; } /* Drop the accent bar when h2 acts as a subtitle or is centered */ h1 + h2::before, .hero h2::before, .text-center h2::before { display: none; } h1 + h2 { margin-top: -0.25em; color: var(--bl-accent); } p, li { font-size: 1rem; line-height: 1.7; color: var(--bl-text); } p { margin: 0 0 1rem; } .lead { font-size: 1.125rem; font-weight: 300; color: var(--bl-text-muted); letter-spacing: -0.2px; line-height: 1.55; } .text-muted { color: var(--bl-text-muted); } .text-center { text-align: center; } a { color: var(--bl-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.15s ease; } a:hover { color: var(--bl-text-strong); text-decoration-thickness: 2px; } strong, b { font-weight: 600; color: inherit; } code, pre, kbd, samp { font-family: var(--bl-font-mono); font-size: 0.9em; } pre { background: var(--bl-bg-muted); border-radius: var(--bl-radius); padding: 1rem 1.25rem; box-shadow: var(--bl-shadow-card); overflow-x: auto; } code:not(pre code) { background: var(--bl-bg-muted); padding: 0.12em 0.35em; border-radius: var(--bl-radius-xs); } hr { border: 0; border-top: 1px solid var(--bl-divider); margin: 2.5rem 0; } blockquote { border-left: 2px solid var(--bl-text); margin: 1.75rem 0; padding: 0.25rem 1.25rem; color: var(--bl-text); font-family: var(--bl-font-display); font-size: 1.25rem; line-height: 1.4; letter-spacing: 0; } blockquote cite, blockquote footer { display: block; font-family: var(--bl-font-sans); font-size: 0.875rem; color: var(--bl-text-muted); margin-top: 0.5rem; letter-spacing: 0; } /* ---------- Layout ---------- */ .container { max-width: 1200px; width: 100%; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .section { padding-block: clamp(3rem, 8vw, 6rem); } .section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); } #body-wrapper { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--bl-bg); } /* ---------- Header / Navigation ---------- */ #header { position: relative; top: 0; z-index: 50; padding-block: 0; background: var(--bl-nav-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--bl-nav-border); } #header .navbar { display: flex; align-items: center; gap: 1.5rem; min-height: var(--bl-header-height); } .navbar-section { display: flex; align-items: center; gap: 1rem; } .navbar-section.logo { flex: 0 0 auto; } .navbar-section.actions { margin-left: auto; gap: 0.75rem; } .navbar-brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--bl-text-strong); text-decoration: none; font-family: var(--bl-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; } .navbar-brand:hover { color: var(--bl-text-strong); text-decoration: none; } .navbar-brand img { height: 28px; width: auto; display: block; } /* The logo is a dark monochrome PNG — invert it on the dark theme */ :root[data-theme="dark"] .navbar-brand img { filter: brightness(0) invert(1); } /* Desktop nav */ .desktop-menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; } .navigation { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .navigation li { display: block; margin: 0; padding: 0; } .navigation a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.9375rem; font-family: var(--bl-font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--bl-text-strong); text-decoration: none; border-radius: var(--bl-radius-sm); letter-spacing: -0.1px; line-height: 1.35; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .navigation a:hover { background: var(--bl-bg-muted); color: var(--bl-text-strong); text-decoration: none; } .navigation a.active { color: var(--bl-text-inverse); background: var(--bl-text); font-weight: 600; } .navigation a.active:hover { background: var(--bl-text-strong); color: var(--bl-text-inverse); } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 0; margin: 0; padding: 0; border: 1.5px solid rgba(128, 128, 128, 0.5); border-radius: var(--bl-radius-pill); background: rgba(128, 128, 128, 0.12); color: var(--bl-text-strong); cursor: pointer; line-height: 0; font-size: 0; box-shadow: none; flex: 0 0 auto; transition: background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { background: var(--bl-bg-muted); border-color: var(--bl-accent); color: var(--bl-text-strong); } .theme-toggle:focus-visible { outline: 2px solid var(--bl-focus-ring); outline-offset: 2px; } .theme-toggle .icon { width: 18px; height: 18px; display: none; font-size: 16px; line-height: 1; } :root[data-theme-preference="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme-preference="dark"] .theme-toggle .icon-moon { display: block; } /* Mobile hamburger */ .mobile-menu { display: none; position: fixed; top: 14px; right: 14px; z-index: 70; } .button_container { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--bl-radius-pill); background: var(--bl-bg-elev); color: var(--bl-text-strong); box-shadow: var(--bl-shadow-card); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; font-size: 0; line-height: 0; } .button_container:hover { background: var(--bl-bg-muted); } .button_container:focus-visible { outline: 2px solid var(--bl-focus-ring); outline-offset: 2px; } .button_container span { display: block; width: 18px; height: 1.5px; background: var(--bl-text-strong); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .button_container.active .top { transform: translateY(6.5px) rotate(45deg); } .button_container.active .middle { opacity: 0; } .button_container.active .bottom { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile overlay */ .mobile-container { display: none; } .overlay { position: fixed; inset: 0; background: var(--bl-bg); z-index: 60; display: flex; flex-direction: column; padding: 5rem 2rem 2rem; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); overflow-y: auto; } .overlay.open { transform: translateX(0); } .overlay .mobile-logo { margin-bottom: 2rem; } .overlay-menu { list-style: none; margin: 0; padding: 0; width: 100%; } .overlay-menu li { display: block; width: 100%; margin: 0; padding: 0; } .overlay-menu a { display: block; width: 100%; margin: 0; padding: 0.625rem 0; font-family: var(--bl-font-display); font-size: 1.5rem; font-weight: 600; color: var(--bl-text-strong); text-decoration: none; letter-spacing: -0.01em; line-height: 1.25; } .overlay-menu a:hover { color: var(--bl-text-strong); text-decoration: none; } .overlay-menu a.active { color: var(--bl-accent); } body.overlay-open { overflow: hidden; } @media (max-width: 860px) { .desktop-menu { display: none; } .mobile-menu { display: block; } .mobile-container { display: block; } #header .navbar { min-height: 64px; } .navbar-section.actions { display: none; } } /* ---------- Hero (post cover) ---------- */ .hero { position: relative; padding-block: clamp(5rem, 12vw, 9rem); background-color: var(--bl-bg); background-size: cover; background-position: center; overflow: hidden; isolation: isolate; } .hero[style*="background-image"] { color: var(--bl-text-inverse); background-color: var(--bl-bg-inverse); } .hero .image-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100% ); z-index: -1; } .hero[style*="background-image"] h1, .hero[style*="background-image"] h2, .hero[style*="background-image"] h3 { color: #ffffff; } .hero .container { position: relative; z-index: 1; text-align: center; } .hero h1 { margin-bottom: 1rem; } .hero .blog-date { color: rgba(255, 255, 255, 0.8); } .hero .tags { margin-top: 0.75rem; } .hero .label { background: rgba(255, 255, 255, 0.92); /* Fixed dark: --bl-bg-inverse flips to near-white in dark mode */ color: #111111; box-shadow: none; } .hero .label:hover { background: #ffffff; color: #111111; } #to-start { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); background: none; border: 0; padding: 0; cursor: pointer; animation: bl-bob 2.4s ease-in-out infinite; z-index: 2; line-height: 0; } #to-start svg { width: 26px; height: 26px; } @keyframes bl-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0; margin: 0 0 1.5rem; color: var(--bl-text-muted); font-size: 0.875rem; } .breadcrumbs li + li::before { content: "›"; margin-right: 0.375rem; opacity: 0.6; } .breadcrumbs a { color: var(--bl-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--bl-text-strong); } /* Align breadcrumbs with the centered content card */ #body-wrapper > .container > .breadcrumbs { max-width: 960px; margin-inline: auto; } /* ---------- Blog listing ---------- */ /* Blog page header (rendered when there's no hero image) */ .blog-page-header { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); } .blog-page-header h1 { margin: 0 0 0.5rem; } .blog-page-header .lead { margin: 0; } /* Blog card grid — capped at 3 cols max so cards have room to breathe */ .blog-grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 560px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .blog-grid > .card { height: 100%; align-self: stretch; } /* ---------- Cards ---------- */ .card { display: flex; flex-direction: column; background: var(--bl-bg-elev); border-radius: var(--bl-radius-md); box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.06) 0 8px 24px -8px; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; break-inside: avoid; } .card:hover { box-shadow: rgba(19, 19, 22, 0.06) 0 1px 2px, rgba(19, 19, 22, 0.1) 0 14px 32px -8px; transform: translateY(-2px); } :root[data-theme="dark"] .card { box-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px, rgba(0, 0, 0, 0.55) 0 10px 28px -8px; } :root[data-theme="dark"] .card:hover { box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px, rgba(0, 0, 0, 0.65) 0 16px 36px -8px; } .card-image { display: block; } .card-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bl-bg-muted); } .card-header { padding: 1.25rem 1.375rem 0.625rem; } .card-body { padding: 0 1.375rem 0.75rem; flex: 1; } .card-footer { padding: 0.5rem 1.375rem 1.25rem; margin-top: auto; } .card-subtitle { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--bl-text-muted); } .card-subtitle .blog-date { font-size: 0.8125rem; } .card-title { margin-top: 0.5rem; } .card-title :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--bl-font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--bl-text-strong); } .card-title :is(h1, h2)::before { display: none; } .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { color: var(--bl-accent); text-decoration: none; } .card-body :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 0.25rem; font-family: var(--bl-font-sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--bl-text); } .card-body :is(h1, h2)::before { display: none; } .card-body p { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--bl-text-muted); /* Keep every card the same height: four lines of summary max */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .card-body p:last-child { margin-bottom: 0; } .card-body > :first-child { margin-top: 0; } /* ---------- Date / Tags / Labels ---------- */ .blog-date { font-size: 0.875rem; color: var(--bl-text-muted); } .blog-date svg { width: 13px; height: 13px; margin-right: 0.375rem; opacity: 0.7; vertical-align: -1px; } /* Post meta row: date + author on single posts */ .post-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; } .blog-author { display: inline-flex; align-items: center; font-size: 0.875rem; color: var(--bl-text-muted); } .blog-author svg { width: 13px; height: 13px; margin-right: 0.375rem; opacity: 0.7; } .blog-author a { color: inherit; text-decoration: none; } .blog-author a:hover { color: var(--bl-text-strong); } .hero .blog-author { color: rgba(255, 255, 255, 0.8); } .hero .blog-author a:hover { color: #ffffff; } .tags { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; } .label { display: inline-flex; align-items: center; font-family: var(--bl-font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; padding: 0.25rem 0.625rem; border-radius: var(--bl-radius-pill); background: var(--bl-bg-muted); color: var(--bl-text-strong); text-decoration: none; box-shadow: inset 0 0 0 1px var(--bl-ring); } .label:hover { background: var(--bl-bg); text-decoration: none; color: var(--bl-text-strong); } /* ---------- Article (single post) ---------- */ .content-item { max-width: 960px; margin-inline: auto; background: var(--bl-bg-elev); border-radius: var(--bl-radius-lg); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem); box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.04) 0 8px 24px -8px; } :root[data-theme="dark"] .content-item { box-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px, rgba(0, 0, 0, 0.45) 0 10px 30px -10px, inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .content-item > :first-child, .e-content > :first-child { margin-top: 0; } .content-item > :last-child, .e-content > :last-child { margin-bottom: 0; } /* Post header used when the post has no cover image */ .content-title { margin-bottom: 2rem; } .content-title h1 { margin-bottom: 0.5rem; } .content-title .post-meta { margin-top: 0.5rem; } .content-title .tags { margin-top: 0.75rem; } /* Prose lists */ .e-content ul, .e-content ol { margin: 0 0 1rem; padding-left: 1.35rem; } .e-content li { margin-bottom: 0.35rem; } .e-content li:last-child { margin-bottom: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.125rem; font-family: var(--bl-font-sans); font-size: 0.9375rem; font-weight: 600; line-height: 1; letter-spacing: -0.1px; color: var(--bl-accent-contrast); background: var(--bl-accent); border: 0; border-radius: var(--bl-radius); cursor: pointer; text-decoration: none; box-shadow: var(--bl-shadow-hl); transition: opacity 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .btn:hover { opacity: 0.9; color: var(--bl-accent-contrast); text-decoration: none; } .btn:active { transform: translateY(0.5px); } .btn:focus-visible { outline: 2px solid var(--bl-focus-ring); outline-offset: 2px; } .btn svg { width: 14px; height: 14px; flex: 0 0 auto; } .btn.btn-ghost { color: var(--bl-text-strong); background: var(--bl-bg-elev); box-shadow: var(--bl-shadow-card); } .btn.btn-ghost:hover { background: var(--bl-bg-muted); opacity: 1; } /* ---------- Prev / next ---------- */ .prev-next { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 3rem; } .prev-next .btn { flex: 1; max-width: 48%; } /* ---------- Pagination ---------- */ .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.375rem; margin: 2rem 0 0; list-style: none; padding: 0; } .pagination li { list-style: none; } /* Direct children only: the prev/next links contain a visually-hidden * label span (.screen-reader-text) that must not receive button styles. */ .pagination > li > a, .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 0.625rem; border-radius: var(--bl-radius-sm); text-decoration: none; color: var(--bl-text); background: var(--bl-bg-elev); box-shadow: var(--bl-shadow-card); font-size: 0.875rem; } .pagination > li > a:hover { background: var(--bl-bg-muted); color: var(--bl-text-strong); } .pagination > li.active > a, .pagination > li.active > span { background: var(--bl-text); color: var(--bl-text-inverse); } .pagination > li.disabled > span { color: var(--bl-text-muted); } .pagination svg { width: 14px; height: 14px; } /* ---------- Footer ---------- */ #footer { border-top: 1px solid var(--bl-divider); padding-block: 2.5rem; background: var(--bl-bg); color: var(--bl-text-muted); font-size: 0.875rem; text-align: center; } #footer p { margin: 0; } #footer a { color: var(--bl-text); text-decoration: none; font-weight: 500; } #footer a:hover { text-decoration: underline; } /* ---------- Pulse icon ---------- */ .pulse { animation: bl-pulse 1.8s ease-in-out infinite; display: inline-block; } @keyframes bl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } } /* ---------- Accessibility / utilities ---------- */ :focus-visible { outline: 2px solid var(--bl-focus-ring); outline-offset: 2px; border-radius: var(--bl-radius-xs); } ::selection { background: var(--bl-text); color: var(--bl-text-inverse); } @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; } } /* ================================================================ * WordPress integration layer * (menu markup, admin bar, comments, search, block content, a11y) * ================================================================ */ /* ---------- Skip link / screen reader text ---------- */ .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 !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--bl-bg-elev); border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: var(--bl-text-strong); display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } .skip-link:focus { position: fixed; } /* ---------- WP menu markup (nav wraps ul.menu) ---------- */ .overlay-menu ul { list-style: none; margin: 0; padding: 0; width: 100%; } .overlay-menu li { display: block; width: 100%; margin: 0; padding: 0; } /* ---------- Admin bar offsets ---------- */ body.admin-bar .mobile-menu { top: 46px; } @media screen and (max-width: 782px) { body.admin-bar .mobile-menu { top: 60px; } } /* ---------- Block content compatibility ---------- */ .e-content figure { margin: 1.75rem 0; } .e-content figcaption { font-size: 0.875rem; color: var(--bl-text-muted); margin-top: 0.5rem; text-align: center; } .e-content .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; } .e-content .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; } .e-content .aligncenter { display: block; margin-inline: auto; } .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.125rem; font-family: var(--bl-font-sans); font-size: 0.9375rem; font-weight: 600; line-height: 1; color: var(--bl-accent-contrast); background: var(--bl-accent); border-radius: var(--bl-radius); text-decoration: none; box-shadow: var(--bl-shadow-hl); } .wp-block-button__link:hover { opacity: 0.9; color: var(--bl-accent-contrast); text-decoration: none; } .wp-block-separator { border: 0; border-top: 1px solid var(--bl-divider); margin: 2.5rem auto; max-width: 100%; } /* ---------- Inline Related Posts (third-party plugin) ---------- */ /* The plugin injects a light-gray box with hardcoded light colours and a * PER-BLOCK random class (u + 32 hex chars, e.g. uff427bc…). In dark mode the * box kept its light background while inheriting the theme's light text, so * the link was unreadable. Re-tints the box for dark; light mode keeps the * plugin's own look. Selector matches the random wrapper via [class^="u"]. */ :root[data-theme="dark"] .e-content a[class^="u"] { background-color: var(--bl-bg-muted) !important; } :root[data-theme="dark"] .e-content a[class^="u"] .ctaText { color: #e5534b; } /* ---------- No results / search ---------- */ .no-results { text-align: center; padding: 2rem 0 3rem; color: var(--bl-text-muted); } .search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto 0; } .search-form .search-field { width: 100%; background: var(--bl-bg-elev); color: var(--bl-text); border: 1px solid rgba(34, 42, 53, 0.18); border-radius: var(--bl-radius); padding: 0.625rem 0.75rem; font-family: inherit; font-size: 0.9375rem; } :root[data-theme="dark"] .search-form .search-field { border-color: rgba(255, 255, 255, 0.14); } .search-form .search-field:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--bl-focus-ring), 0 0 0 3px var(--bl-bg); } .search-form .search-submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.125rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; color: var(--bl-accent-contrast); background: var(--bl-accent); border: 0; border-radius: var(--bl-radius); cursor: pointer; box-shadow: var(--bl-shadow-hl); } .search-form .search-submit:hover { opacity: 0.9; } /* ---------- 404 ---------- */ #error { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1rem; } #error h1 { font-size: clamp(3rem, 10vw, 6rem); margin-bottom: 0.5rem; } #error p { max-width: 52ch; margin-inline: auto; color: var(--bl-text-muted); } /* ---------- Comments ---------- */ .comments-area { max-width: 960px; margin: 3rem auto 0; } .comments-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; } .comment-list { list-style: none; margin: 0 0 2rem; padding: 0; } .comment-list ol.children { list-style: none; margin: 0; padding-left: 1.5rem; } .comment-body { border-top: 1px solid var(--bl-divider); padding: 1.25rem 0; } .comment-meta { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .comment-author { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9375rem; } .comment-author .avatar { border-radius: var(--bl-radius-pill); display: block; } .comment-author .says { display: none; } .comment-metadata { font-size: 0.8125rem; color: var(--bl-text-muted); } .comment-metadata a { color: inherit; text-decoration: none; } .comment-metadata a:hover { color: var(--bl-text-strong); } .comment-content { font-size: 0.9375rem; line-height: 1.6; } .comment-content p:last-child { margin-bottom: 0; } .reply { margin-top: 0.5rem; } .reply a { font-size: 0.8125rem; font-weight: 500; text-decoration: none; color: var(--bl-text-muted); } .reply a:hover { color: var(--bl-text-strong); } .comment-respond { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bl-divider); } .comment-reply-title { font-size: 1.25rem; font-weight: 600; } .comment-reply-title small a { font-size: 0.875rem; font-weight: 400; color: var(--bl-text-muted); } .comment-notes { font-size: 0.875rem; color: var(--bl-text-muted); } .comment-form p { margin: 0 0 1rem; } .comment-form label { display: block; font-weight: 500; font-size: 0.9375rem; margin-bottom: 0.375rem; color: var(--bl-text-strong); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; box-sizing: border-box; background: var(--bl-bg-elev); color: var(--bl-text); border: 1px solid rgba(34, 42, 53, 0.18); border-radius: var(--bl-radius); padding: 0.625rem 0.75rem; font-family: inherit; font-size: 0.9375rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; } :root[data-theme="dark"] .comment-form input[type="text"], :root[data-theme="dark"] .comment-form input[type="email"], :root[data-theme="dark"] .comment-form input[type="url"], :root[data-theme="dark"] .comment-form textarea { border-color: rgba(255, 255, 255, 0.14); } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--bl-focus-ring), 0 0 0 3px var(--bl-bg); } .comment-form textarea { min-height: 140px; resize: vertical; } .form-submit { margin-bottom: 0; } .form-submit input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; padding: 0.625rem 1.125rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; color: var(--bl-accent-contrast); background: var(--bl-accent); border: 0; border-radius: var(--bl-radius); cursor: pointer; box-shadow: var(--bl-shadow-hl); transition: opacity 0.15s ease; } .form-submit input[type="submit"]:hover { opacity: 0.9; } .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--bl-text-muted); } .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; } .comment-form-cookies-consent input { margin-top: 0.2rem; accent-color: var(--bl-accent); } .comment-navigation { margin-bottom: 1.5rem; } .comment-navigation a { font-size: 0.875rem; font-weight: 500; }