/* Theme Name: Akademist Description: Akademisyenler ve araştırmacılar için kod yazmadan yönetilebilen bir WordPress blok teması. Profil, Makaleler, Konferanslar, Projeler, Kaynaklar, Duyurular ve Fotoğraflar için hazır form tabanlı içerik türleri (özel eklenti ile birlikte gelir), tek ekrandan doldurulan "Site Ayarları" ile kimlik/iletişim bilgileri, sürükle-bırak sıralama, DOI'den otomatik makale bilgisi çekme ve ücretsiz Türkçe/İngilizce çeviri yardımcısı sunar. Sadece formları doldurarak, herhangi bir blok düzenleyici bilgisine gerek kalmadan çok dilli bir akademik web sitesi oluşturabilirsiniz. Author: Metin Turgay Author URI: https://metinturgay.net Requires at least: 6.7 Tested up to: 6.9 Requires PHP: 7.2 Version: 1.18.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: akademist Tags: education, blog, portfolio, one-column, two-columns, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, translation-ready, threaded-comments, rtl-language-support */ /* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the template's top-level sections (header part, main, footer part) — a gap that exists even when no markup asks for it. Zero it so sections butt edge-to-edge and own their vertical rhythm via padding; this does not affect block gaps inside nested layouts. */ .wp-site-blocks > * + * { margin-block-start: 0; } * { box-sizing: border-box; } /* WordPress core's own button-block stylesheet (wp-includes/blocks/button/ style.css) normally sets `.wp-block-button__link { display: inline-block; }` so the link's own padding is counted in the flow (like a real box) instead of just being painted over neighbors the way inline elements' vertical padding is. That stylesheet isn't guaranteed to be enqueued on every request this theme serves, so don't depend on it — declare the same `display` directly here. Without it, buttons with enough vertical padding to make two stacked buttons touch (as this hero does) visually overlap instead of sitting the intended gap apart, because the browser's default `display: inline` on doesn't reserve any box height for top/bottom padding. */ .wp-element-button { display: inline-block; } /* * Dark mode. The theme's hero, footer, and page-header sections are * intentionally dark in BOTH modes already, so they're left untouched * below. Only the "light chrome" surfaces — header bar, stat tiles, info * cards, tables, forms, photo grid — need a dark counterpart. These are * defined as their own custom properties (defaulting to the existing * light-mode preset colors) so light mode is pixel-identical to before. * * Two ways to end up in dark mode: * 1. No explicit visitor choice yet: the @media query below follows the * OS/browser prefers-color-scheme setting automatically. * 2. The visitor clicked the sun/moon toggle in the header (see * assets/js/theme-toggle.js): it sets data-theme="dark"/"light" on * and remembers the choice, which the html[data-theme="..."] * rules below force regardless of the OS setting — they're placed * after the media query and carry higher specificity, so an explicit * choice always wins over the system default. */ :root { --ak-surface: var(--wp--preset--color--paper); --ak-surface-2: var(--wp--preset--color--mist); --ak-border: var(--wp--preset--color--line); --ak-text: var(--wp--preset--color--ink); --ak-text-2: var(--wp--preset--color--ink-2); --ak-header-bg: rgba(255, 255, 255, 0.85); } @media (prefers-color-scheme: dark) { :root { --ak-surface: #161f2e; --ak-surface-2: #0f1723; --ak-border: #29344a; --ak-text: #e7ebf3; --ak-text-2: #9aa5bd; --ak-header-bg: rgba(15, 23, 42, 0.85); } body { background-color: var(--ak-surface-2); color: var(--ak-text); } /* theme.json hardcodes heading/link colors to the light-mode ink/accent preset colors (needed so users who pick "İnk" text on a light card in the editor still get that exact color) — override just the DEFAULT heading color here so headings stay legible on the dark background. Headings inside sections that are dark in both modes (hero, page-header, footer) already force white via !important and are unaffected. */ :where(.wp-site-blocks) h1, :where(.wp-site-blocks) h2, :where(.wp-site-blocks) h3, :where(.wp-site-blocks) h4, :where(.wp-site-blocks) h5, :where(.wp-site-blocks) h6 { color: var(--ak-text); } } /* Explicit visitor choice via the header toggle — wins over the OS setting in either direction. */ html[data-theme="dark"] { --ak-surface: #161f2e; --ak-surface-2: #0f1723; --ak-border: #29344a; --ak-text: #e7ebf3; --ak-text-2: #9aa5bd; --ak-header-bg: rgba(15, 23, 42, 0.85); } html[data-theme="dark"] body { background-color: var(--ak-surface-2); color: var(--ak-text); } html[data-theme="dark"] :where(.wp-site-blocks) h1, html[data-theme="dark"] :where(.wp-site-blocks) h2, html[data-theme="dark"] :where(.wp-site-blocks) h3, html[data-theme="dark"] :where(.wp-site-blocks) h4, html[data-theme="dark"] :where(.wp-site-blocks) h5, html[data-theme="dark"] :where(.wp-site-blocks) h6 { color: var(--ak-text); } html[data-theme="light"] { --ak-surface: var(--wp--preset--color--paper); --ak-surface-2: var(--wp--preset--color--mist); --ak-border: var(--wp--preset--color--line); --ak-text: var(--wp--preset--color--ink); --ak-text-2: var(--wp--preset--color--ink-2); --ak-header-bg: rgba(255, 255, 255, 0.85); } html[data-theme="light"] body { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); } /* === header === */ .site-header { max-width: none; position: sticky; top: 0; z-index: 100; background-color: var(--ak-header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ak-border); } /* The mobile nav's full-screen overlay is `position: fixed` and relies on the viewport as its containing block (top/left/right/bottom: 0) to cover the whole screen. A `backdrop-filter` on an ancestor creates a NEW containing block for fixed descendants (per spec) — so with the filter left on `.site-header` while the menu is open, the overlay was positioning itself relative to the (short, narrow) header bar instead of the viewport, squeezing every nav item into a tiny scrolling column instead of the intended full-screen menu. WordPress core adds `has-modal-open` to while the overlay is open — drop the filter only then, restoring the viewport as the containing block. */ html.has-modal-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Core's default full-screen mobile menu is plain white-on-black (it only themes itself from a `has-background`/`has-text-color` class on the navigation block, which this site's nav doesn't use) — restyle it to match the site's own light/dark-aware surface + text colors instead of leaving it looking like an unstyled default. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { /* Semi-transparent + blurred, matching the header's own glass-panel look instead of a flat opaque fill — more transparent than the header itself (0.6 vs. the header's 0.85) since the menu covers the whole screen and reads better with more of the page still visible through it. The filter is safe HERE because it's on the fixed element itself, not an ancestor, so it can't recreate the containing-block bug the header fix above addresses. */ background-color: color-mix(in srgb, var(--ak-surface) 60%, transparent) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: var(--ak-text) !important; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content { color: var(--ak-text); } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-close { color: var(--ak-text); } /* Center the menu items on screen (both the list itself and each link's text) instead of the default left-aligned column — reads better as a deliberate full-screen menu rather than a stray list stuck in a corner. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { align-items: center !important; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container { align-items: center !important; text-align: center; } .site-header__inner { max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; width: 100%; padding-block: 1.1rem; padding-inline: var(--wp--preset--spacing--50, 2rem); align-items: center; } .site-header__title a { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ak-text); text-decoration: none; } .site-header__nav-row { align-items: center; gap: var(--wp--preset--spacing--40, 1.5rem); } .site-header__nav a { font-size: 0.9rem; font-weight: 600; color: var(--ak-text-2); text-decoration: none; padding: 0.4rem 0.15rem; transition: color 0.15s ease; } .site-header__nav a:hover { color: var(--wp--preset--color--accent); } /* CV download link in the header nav row — a small pill, visually distinct from plain nav text links so it reads as an action, not another page. */ .site-header__cv-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--accent); border: 1.5px solid var(--wp--preset--color--accent); border-radius: 999px; padding: 0.35rem 0.9rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .site-header__cv-link:hover { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper); } .site-header__cv-link svg { flex-shrink: 0; } /* Light/dark toggle button in the header — a circular icon button matching the size/weight of the language switcher next to it. Both sun and moon icons are always in the markup; only one is shown at a time via opacity/ display driven by data-theme on , so there's no layout jump when toggling and the button works even before JS finishes loading (defaults to showing the sun, i.e. "click to go dark"). */ .site-header__theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1.5px solid var(--ak-border); border-radius: 50%; background-color: transparent; color: var(--ak-text-2); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .site-header__theme-toggle:hover { background-color: var(--ak-surface-2); color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } .site-header__theme-icon--moon { display: none; } html[data-theme="dark"] .site-header__theme-icon--sun { display: none; } html[data-theme="dark"] .site-header__theme-icon--moon { display: block; } ul.site-header__lang { display: flex; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } ul.site-header__lang li { margin: 0; display: flex; align-items: center; gap: 0.35rem; } ul.site-header__lang li + li::before { content: "|"; color: var(--ak-border); font-weight: 400; } .site-header__lang a { color: var(--wp--preset--color--accent); text-decoration: none; padding: 0.3rem 0.6rem; border-radius: 999px; transition: background-color 0.15s ease; } .site-header__lang a:hover { background-color: var(--ak-surface-2); } /* === footer === */ .site-footer { max-width: none; background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding-block: 1rem; padding-inline: var(--wp--preset--spacing--50, 2rem); row-gap: 0.5rem; align-items: center; } .site-footer__meta { margin: 0; font-size: 0.85rem; opacity: 0.6; } /* Academic profile icon row (ORCID, Google Scholar, ResearchGate, LinkedIn, X) — populated from Site Ayarları; renders nothing when no link is set. */ .site-footer__social { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* No outer circle wrapper — the brand PNG itself (with its own small white rounded backdrop, see below) is the entire visual. Removing the extra 38px circle avoids the dead/empty ring of padding that used to sit around each logo. */ .site-footer__social-link { display: flex; align-items: center; justify-content: center; opacity: 1; transition: transform 0.15s ease; } .site-footer__social-link svg { width: 19px; height: 19px; object-fit: contain; } /* These are the platforms' actual full-color brand PNGs (assets/icons/), not currentColor glyphs — they never invert to white-on-accent on hover. A small white rounded backdrop keeps marks with transparent/dark strokes legible against the footer's dark background. */ .site-footer__social-link img { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #fff; padding: 4px; box-sizing: border-box; } .site-footer__social-link:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .site-footer__social-link:hover { transform: none; } } /* === hero === */ .hero-section { max-width: none; position: relative; background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); overflow: hidden; } .hero-section::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 640px; height: 640px; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent), transparent 70%); filter: blur(10px); pointer-events: none; } .hero-section::after { content: ""; position: absolute; inset: auto auto -30% -10%; width: 480px; height: 480px; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, transparent), transparent 70%); filter: blur(10px); pointer-events: none; } .hero-section__inner { position: relative; z-index: 1; max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; padding-block: var(--wp--preset--spacing--80, 6rem) var(--wp--preset--spacing--70, 5rem); padding-inline: var(--wp--preset--spacing--50, 2rem); } .hero-section__inner--split { align-items: center; gap: var(--wp--preset--spacing--60, 3rem); } .hero-section__text { flex: 1 1 480px; min-width: 0; } .hero-section__photo { flex: 0 0 auto; margin: 0; } .hero-section__photo img { width: 300px; height: 300px; border-radius: 28px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5); } .hero-section__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--paper); /* Tinted/bordered with the site's own accent color (via the color preset system in color-presets.php) instead of a fixed teal, so switching color themes in Site Ayarları actually recolors this badge too. */ background-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent); padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: 1.25rem; } .hero-section__title { color: var(--wp--preset--color--paper) !important; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; margin: 0 0 0.5rem; } .hero-section__subtitle { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.15rem; color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, white); margin-bottom: 1.5rem; } @media (max-width: 600px) { /* Stack photo above the name/text (not below it — column-reverse flips the visual order without touching the DOM order the markup already has: text block, then photo), and center everything so the whole hero reads as one tidy column instead of left-aligned text next to a bottom-stuck photo. */ .hero-section__inner--split { flex-direction: column-reverse; text-align: center; } .hero-section__text { display: flex; flex-direction: column; align-items: center; } .hero-section__lede { max-width: 100%; } .hero-section .wp-block-buttons { justify-content: center; /* The two hero buttons wrap onto separate lines at this width; the block's own gap is meant to cover that but read as too tight in testing, so add a bit more breathing room between them specifically on mobile. */ row-gap: 1rem; } } .hero-section__lede { max-width: 58ch; font-size: 1.05rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 2.25rem; } .hero-section .wp-block-button.is-style-fill .wp-element-button, .page-header .wp-block-button.is-style-fill .wp-element-button { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper); border-radius: 10px; font-weight: 700; padding: 0.9rem 1.6rem; /* Glow shadow tinted with the site's own accent color, not a fixed teal. */ box-shadow: 0 10px 25px -8px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; } .hero-section .wp-block-button.is-style-fill .wp-element-button:hover, .page-header .wp-block-button.is-style-fill .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--wp--preset--color--accent) 75%, transparent); } .hero-section .wp-block-button.is-style-outline .wp-element-button, .page-header .wp-block-button.is-style-outline .wp-element-button { border: 1px solid rgba(255, 255, 255, 0.35); color: var(--wp--preset--color--paper); border-radius: 10px; font-weight: 700; padding: 0.9rem 1.6rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .hero-section .wp-block-button.is-style-outline .wp-element-button:hover, .page-header .wp-block-button.is-style-outline .wp-element-button:hover { border-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.06); } /* === stats === */ .stats-section { max-width: none; background-color: var(--ak-surface-2); } /* All 5 tiles (Makale/Konferans/Proje/Komite + opsiyonel Atıf) are individually toggleable from Site Ayarları (see [tc_stats] in shortcodes.php). If every tile is off, [tc_stats] prints nothing and .stats-section__inner ends up empty — collapse the whole band instead of showing an empty gray strip between the hero and the rest of the page. */ .stats-section:has(.stats-section__inner:empty) { display: none; } .stats-section__inner { max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; padding-block: var(--wp--preset--spacing--60, 3rem); padding-inline: var(--wp--preset--spacing--50, 2rem); gap: var(--wp--preset--spacing--50, 1.5rem); flex-wrap: wrap; } .stat { flex: 1 1 200px; /* Capped so a tile left alone on the last row (e.g. only 1 or 3 of the 5 possible tiles enabled in Site Ayarları → Anasayfa İstatistik Kutucukları) doesn't stretch to fill the whole row — it stays a normal card and the row's justify-content:space-between spacing takes over instead of flex-grow. */ max-width: 320px; display: block; background-color: var(--ak-surface); border: 1px solid var(--ak-border); border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; } .stat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.1); } a.stat.stat--linked { color: inherit; text-decoration: none; cursor: pointer; position: relative; padding-right: 2.75rem; /* room for the affordance arrow, below */ } a.stat.stat--linked:hover { border-color: var(--wp--preset--color--accent); } /* A quiet arrow affordance so the stat tiles read as clickable at a glance, not just on hover — discoverable without relying on a mouseover cue. Two layered pseudo-elements: `::before` paints the plain circle backdrop, `::after` paints the arrow glyph itself via `mask-image` (an SVG data URI used ONLY as an alpha mask — its own hardcoded stroke color is irrelevant and never actually shown) filled with `background-color`. That lets the arrow's color follow the site's chosen accent color preset, instead of a fixed teal baked into the SVG. */ a.stat.stat--linked::before, a.stat.stat--linked::after { content: ""; position: absolute; top: 1.5rem; right: 1.5rem; width: 22px; height: 22px; border-radius: 50%; transition: transform 0.15s ease, background-color 0.15s ease; } a.stat.stat--linked::before { background-color: var(--ak-surface-2); } a.stat.stat--linked::after { background-color: var(--ak-text-2); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4V10'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 11px; mask-size: 11px; } a.stat.stat--linked:hover::before, a.stat.stat--linked:hover::after { transform: translate(2px, -2px); } /* On hover the circle itself becomes the accent color (matching the original design's swap), so the arrow glyph flips to white/paper for contrast against that now-solid accent backdrop — mirrors exactly what the old two-separate-SVGs version did, just driven by the color preset instead of a second hardcoded-color data URI. */ a.stat.stat--linked:hover::before { background-color: var(--wp--preset--color--accent); } a.stat.stat--linked:hover::after { background-color: var(--wp--preset--color--paper); } @media (prefers-reduced-motion: reduce) { a.stat.stat--linked:hover::before, a.stat.stat--linked:hover::after { transform: none; } } a.stat.stat--linked .stat__num, a.stat.stat--linked .stat__label { display: block; } .stat__num { font-family: var(--wp--preset--font-family--display); font-size: 2.5rem; font-weight: 800; color: var(--wp--preset--color--accent); line-height: 1; margin: 0 0 0.4rem; } .stat__label { font-size: 0.78rem; font-weight: 600; color: var(--ak-text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } /* === page header === */ .page-header { max-width: none; background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 480px; height: 480px; background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent), transparent 70%); pointer-events: none; } .page-header > * { position: relative; z-index: 1; max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; width: 100%; } .page-header { padding-block: var(--wp--preset--spacing--70, 4.5rem) var(--wp--preset--spacing--60, 3rem); padding-inline: var(--wp--preset--spacing--50, 2rem); } .page-header__eyebrow { display: inline-flex; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--paper); /* Same accent-tinted badge treatment as .hero-section__eyebrow above — follows the site's chosen color preset instead of a fixed teal. */ background-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent); padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: 1.1rem; } .page-header__title { color: var(--wp--preset--color--paper) !important; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; margin: 0 0 0.5rem; } .page-header__subtitle { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.05rem; color: rgba(255, 255, 255, 0.68); margin: 0; } /* === prose === */ .prose-section { max-width: none; } /* The İletişim (Contact) page is the one prose-section that IS a columns row itself (wp:columns with className "prose-section") instead of wrapping a single child — every other prose-section relies on the `.prose-section > *` rule below to center ITS single child, but here the two columns themselves are that direct child, so the general `max-width: none` above would otherwise let the whole row stretch edge-to-edge on wide screens (unlike every other section, which stays centered at the same content width) — visibly inconsistent "leaning" toward the left/right edges. Center this specific row the same way. */ .wp-block-columns.prose-section { max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; } .prose-section > * { max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; } .prose-section { padding-block: var(--wp--preset--spacing--70, 4rem); padding-inline: var(--wp--preset--spacing--50, 2rem); } .prose-section:not(:last-of-type) { border-bottom: 1px solid var(--ak-border); } .prose-section h2 { font-size: 1.7rem; margin-bottom: 1.5rem; } .prose-section p { max-width: 68ch; } .prose-section li { margin-bottom: 0.4rem; } .prose-section .wp-block-table { margin-bottom: 1.75rem; } .prose-section table { border-collapse: collapse; width: 100%; max-width: 640px; font-size: 0.95rem; background-color: var(--ak-surface); border: 1px solid var(--ak-border); border-radius: 12px; overflow: hidden; } .prose-section table th, .prose-section table td { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--ak-border); text-align: left; } .prose-section table th { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--ak-text-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; background-color: var(--ak-surface-2); } /* === prose section variants === */ .section-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--wp--preset--color--accent); margin-bottom: 0.6rem; } .prose-section--tint { background-color: var(--ak-surface-2); } /* === skill bars === */ .skill-bars { max-width: 640px; } .skill-bar { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 1rem; padding-block: 0.5rem; } .skill-bar__label { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--ak-text); } .skill-bar__track { height: 8px; border-radius: 999px; background-color: var(--ak-border); overflow: hidden; } .skill-bar__fill { height: 100%; border-radius: 999px; background-color: var(--wp--preset--color--accent); } .skill-bar__fill--4 { width: 40%; } .skill-bar__fill--5 { width: 50%; } .skill-bar__fill--6 { width: 60%; } .skill-bar__fill--7 { width: 70%; } .skill-bar__fill--8 { width: 80%; } .skill-bar__fill--9 { width: 90%; } .skill-bar__fill--10 { width: 100%; } .skill-bar__value { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--ak-text-2); text-align: right; font-family: var(--wp--preset--font-family--display); } /* === list search/filter bar (Publications, Conferences, Projects, Resources) === */ .tc-list-filter { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .tc-list-filter__search { flex: 1 1 260px; padding: 0.65rem 1rem; border: 1.5px solid var(--ak-border); border-radius: 10px; background-color: var(--ak-surface); color: var(--ak-text); font-size: 0.95rem; font-family: inherit; } .tc-list-filter__year { flex: 0 0 auto; padding: 0.65rem 1rem; border: 1.5px solid var(--ak-border); border-radius: 10px; background-color: var(--ak-surface); color: var(--ak-text); font-size: 0.95rem; font-family: inherit; } .tc-list-filter__search:focus, .tc-list-filter__year:focus { outline: none; border-color: var(--wp--preset--color--accent); } .tc-list-filter__empty { padding: 1.5rem; text-align: center; color: var(--ak-text-2); background-color: var(--ak-surface-2); border-radius: 14px; } /* === publication / conference entries === */ .pub-entry { padding: 1.5rem 1.75rem; background-color: var(--ak-surface); border: 1px solid var(--ak-border); border-radius: 14px; margin-bottom: 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pub-entry:hover { border-color: var(--wp--preset--color--accent); box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.12); } /* Card top row: year label on the left, Share/Cite action buttons on the right — replaces the old "whole card is a link" pattern (the outbound link now lives on the title itself, see .pub-entry__title a below) so a card can host real