/* 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.7.2 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; } /* * 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); } .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); background-color: rgba(15, 118, 110, 0.35); border: 1px solid rgba(15, 118, 110, 0.6); 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; } .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; box-shadow: 0 10px 25px -8px rgba(15, 118, 110, 0.6); 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 rgba(15, 118, 110, 0.75); } .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); } .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; 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. */ a.stat.stat--linked::after { content: ""; position: absolute; top: 1.5rem; right: 1.5rem; width: 22px; height: 22px; border-radius: 50%; background-color: var(--ak-surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f766e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4V10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px; transition: transform 0.15s ease, background-color 0.15s ease; } a.stat.stat--linked:hover::after { transform: translate(2px, -2px); background-color: var(--wp--preset--color--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M12 4H6M12 4V10'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { 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; } /* === cards / "Keşfedin" section === */ .cards-section { max-width: none; } .cards-section__inner { max-width: var(--wp--style--global--content-size, 1280px); margin-inline: auto; padding-block: var(--wp--preset--spacing--80, 6rem); padding-inline: var(--wp--preset--spacing--50, 2rem); } .cards-section h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 0.5rem; } .cards-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.75rem; } .info-card { background-color: var(--ak-surface); border: 1px solid var(--ak-border); border-radius: 18px; padding: 1.85rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .info-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.14); } .info-card h3 { font-size: 1.2rem; margin-top: 0; margin-bottom: 0.6rem; } .info-card h3 a { color: var(--ak-text); text-decoration: none; } .info-card h3 a:hover { color: var(--wp--preset--color--accent); } .info-card p { font-size: 0.95rem; color: var(--ak-text-2); margin-bottom: 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); background-color: rgba(15, 118, 110, 0.35); border: 1px solid rgba(15, 118, 110, 0.6); 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 .info-card table th { background-color: transparent; } /* === 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); } a.pub-entry.pub-entry--linked { display: block; color: inherit; text-decoration: none; position: relative; cursor: pointer; } /* The [hidden] attribute is how the list-filter JS hides non-matching cards — without this override the higher-specificity "display: block" above always wins and linked cards (e.g. publications/resources with a URL) never actually disappear when filtered out. Kept !important so any future "display" rule on a filterable card can never re-break this. */ [hidden] { display: none !important; } a.pub-entry.pub-entry--linked .pub-entry__title { transition: color 0.15s ease; } a.pub-entry.pub-entry--linked:hover .pub-entry__title { color: var(--wp--preset--color--accent); } a.pub-entry.pub-entry--linked::after { content: "→"; position: absolute; top: 1.5rem; right: 1.75rem; font-size: 1.1rem; color: var(--wp--preset--color--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.15s ease, transform 0.15s ease; } a.pub-entry.pub-entry--linked:hover::after { opacity: 1; transform: translateX(0); } .pub-entry:last-child { margin-bottom: 0; } .pub-entry__year { display: inline-block; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; } .pub-entry__title { font-size: 1.02rem; margin: 0 0 0.35rem; max-width: 62ch; } .pub-entry__meta { font-size: 0.82rem; color: var(--ak-text-2); margin: 0; } /* === photo grid (tc_photos shortcode) === */ .tc-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .tc-photo-grid__item { margin: 0; border-radius: 14px; overflow: hidden; background-color: var(--ak-surface-2); border: 1px solid var(--ak-border); } .tc-photo-grid__item .tc-photo-trigger { display: block; cursor: pointer; overflow: hidden; } .tc-photo-grid__item img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.25s ease; } .tc-photo-grid__item .tc-photo-trigger:hover img { transform: scale(1.05); } .tc-photo-grid__item figcaption { padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--ak-text-2); } @media (max-width: 782px) { .tc-photo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tc-photo-grid { grid-template-columns: 1fr; } } /* === project grid (tc_projects shortcode) === */ .tc-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* === photo lightbox (tc_photos shortcode) === */ body.tc-lightbox-lock { overflow: hidden; } .tc-lightbox { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, 0.92); align-items: center; justify-content: center; } .tc-lightbox.is-open { display: flex; } .tc-lightbox__figure { margin: 0; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; } .tc-lightbox__img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .tc-lightbox__caption { margin-top: 1rem; color: var(--wp--preset--color--paper); font-size: 0.95rem; text-align: center; max-width: 70vw; } .tc-lightbox__close, .tc-lightbox__prev, .tc-lightbox__next { position: absolute; background: transparent; border: none; color: var(--wp--preset--color--paper); cursor: pointer; line-height: 1; transition: opacity 0.15s ease; opacity: 0.75; } .tc-lightbox__close:hover, .tc-lightbox__prev:hover, .tc-lightbox__next:hover { opacity: 1; } .tc-lightbox__close { top: 1.5rem; right: 1.75rem; font-size: 2.5rem; } .tc-lightbox__prev, .tc-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 0.5rem 1rem; } .tc-lightbox__prev { left: 0.5rem; } .tc-lightbox__next { right: 0.5rem; } @media (max-width: 600px) { .tc-lightbox__close { top: 0.75rem; right: 1rem; font-size: 2rem; } .tc-lightbox__prev, .tc-lightbox__next { font-size: 2.25rem; padding: 0.25rem 0.5rem; } } @media (prefers-reduced-motion: reduce) { .tc-photo-grid__item .tc-photo-trigger:hover img { transform: none; } } /* === self-contained contact form (tc_contact_form shortcode) === */ .tc-contact-form__field { margin: 0 0 1.1rem; } .tc-contact-form__field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--ak-text); } .tc-contact-form__field input[type=text], .tc-contact-form__field input[type=email], .tc-contact-form__field textarea { width: 100%; font-family: inherit; font-size: 0.95rem; padding: 0.6rem 0.75rem; border: 1px solid var(--ak-border); border-radius: 8px; background: var(--ak-surface); color: var(--ak-text); } .tc-contact-form__field input[type=text]:focus, .tc-contact-form__field input[type=email]:focus, .tc-contact-form__field textarea:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; } .tc-contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tc-contact-form__submit { margin: 0.5rem 0 0; } .tc-contact-form__notice { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1.25rem; } .tc-contact-form__notice--ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .tc-contact-form__notice--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .tc-contact-form__consent { font-size: 0.85rem; line-height: 1.5; color: var(--ak-text-2); } .tc-contact-form__consent label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; } .tc-contact-form__consent input[type=checkbox] { margin-top: 0.2rem; flex-shrink: 0; } .tc-contact-form__consent label > span { flex: 1 1 auto; min-width: 0; } .tc-contact-form__consent a { color: var(--ak-text); text-decoration: underline; } @media (max-width: 782px) { .tc-project-grid { grid-template-columns: 1fr; } .skill-bar { grid-template-columns: 110px 1fr 40px; gap: 0.6rem; } } /* === announcement email subscribe box (tc_subscribe_form shortcode) === */ .tc-subscribe-box { background: var(--ak-surface-2); border: 1px solid var(--ak-border); border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 2rem; } .tc-subscribe-box__lede { font-weight: 600; margin: 0 0 1rem; color: var(--ak-text); } .tc-subscribe-box__form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; } .tc-subscribe-box__field { margin: 0; flex: 1 1 200px; } .tc-subscribe-box__field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--ak-text); } .tc-subscribe-box__field input[type=text], .tc-subscribe-box__field input[type=email] { width: 100%; font-family: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ak-border); border-radius: 6px; background: var(--ak-surface); color: var(--ak-text); box-sizing: border-box; } .tc-subscribe-box__field input:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; } .tc-subscribe-box__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tc-subscribe-box__submit { margin: 0; flex: 0 0 auto; } .tc-subscribe-box__notice { margin: 0; font-size: 0.95rem; color: var(--ak-text); } .tc-subscribe-box__notice--ok { color: #047857; font-weight: 600; } .tc-subscribe-box__notice--error { color: #b91c1c; font-weight: 600; } @media (max-width: 600px) { .tc-subscribe-box__form { flex-direction: column; align-items: stretch; } }