/* Theme Name: Toastmasters Business Poznań Theme URI: https://toastmasters-poznan.example Author: Karol Wolski Author URI: https://toastmasters-poznan.example Description: Motyw dla klubu wystąpień publicznych Toastmasters Business Poznań. Wierne odwzorowanie projektu graficznego strony - strona główna, baza wiedzy, galeria i zarząd. Klasyczny motyw bez zależności od wtyczek, z typami treści i danymi startowymi. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: toastmasters-poznan Tags: custom-colors, custom-menu, custom-logo, featured-images, translation-ready, blog, one-column */ /* ============================================================ 1. Design tokens ============================================================ */ :root { --tm-cream: #f6f3ec; --tm-cream-alt: #efeade; --tm-navy: #10233f; --tm-maroon: #7d2b3a; --tm-gold: #c9a24a; --tm-ink: #2b2823; --tm-ink-2: #54504a; --tm-ink-3: #6a655c; --tm-ink-4: #3f3b35; --tm-ink-5: #4a463f; --tm-muted: #9a948a; --tm-slot: #7a7466; --tm-white: #ffffff; --tm-line: rgba(16, 35, 63, .1); --tm-line-2: rgba(16, 35, 63, .08); --tm-line-3: rgba(16, 35, 63, .12); --tm-line-18: rgba(16, 35, 63, .18); --tm-foot-text: #b8c0cc; --tm-foot-link: #dfe4ea; --tm-foot-head: #7d8aa0; --tm-serif: 'Spectral', Georgia, 'Times New Roman', serif; --tm-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --tm-mono: 'Space Grotesk', ui-monospace, 'SFMono-Regular', Menlo, monospace; --tm-container: 1240px; --tm-pad-x: 40px; } /* ============================================================ 2. Reset / base ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--tm-cream); color: var(--tm-ink); font-family: var(--tm-sans); font-size: 16px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } button { font-family: inherit; cursor: pointer; } /* Accessibility helpers */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .tm-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--tm-navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; } .tm-skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--tm-maroon); outline-offset: 2px; } .tm-site { min-height: 100vh; display: flex; flex-direction: column; } .tm-main { flex: 1 0 auto; } /* Guard: some maintenance / coming-soon / custom-error-page plugins (or a stale cache) inject WordPress's wp_die()/error-page skeleton into the front page - an id="error-page" on plus a boxed style (body{max-width:700px; margin:2em auto; border; box-shadow; background:#fff}). Fully neutralise it so the theme renders edge-to-edge; full-width sections keep their own inner max-width via .tm-container. */ body#error-page, body.tm-section-home, body.home { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--tm-cream) !important; } /* ============================================================ 3. Layout primitives ============================================================ */ .tm-container { max-width: var(--tm-container); margin-left: auto; margin-right: auto; padding-left: var(--tm-pad-x); padding-right: var(--tm-pad-x); } .tm-container--flush { padding-left: 0; padding-right: 0; } .tm-container--narrow { max-width: 760px; } .tm-eyebrow { font-family: var(--tm-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tm-maroon); } /* Buttons & links */ .tm-btn { display: inline-block; font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: 9px; text-decoration: none; border: 1.5px solid transparent; transition: transform .12s ease, background .18s ease, color .18s ease, box-shadow .18s ease; cursor: pointer; } .tm-btn:hover { transform: translateY(-1px); } .tm-btn--navy { background: var(--tm-navy); color: #fff; } .tm-btn--navy:hover { background: #17325a; } .tm-btn--maroon { background: var(--tm-maroon); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; } .tm-btn--maroon:hover { background: #6a2531; } .tm-btn--outline { background: transparent; color: var(--tm-navy); border-color: var(--tm-navy); } .tm-btn--outline:hover { background: var(--tm-navy); color: #fff; } .tm-btn--sm { padding: 12px 24px; font-size: 15px; } .tm-btn--xs { padding: 12px 22px; font-size: 14px; } .tm-link-underline { font-weight: 600; color: var(--tm-navy); text-decoration: none; border-bottom: 2px solid var(--tm-gold); padding-bottom: 2px; align-self: flex-start; transition: color .15s ease; } .tm-link-underline:hover { color: var(--tm-maroon); } /* Image slot placeholders (shown until a real photo is set) */ .tm-ph { background: repeating-linear-gradient(135deg, #e4dece, #e4dece 12px, #ddd6c4 12px, #ddd6c4 24px); position: relative; } .tm-ph--1 { background: repeating-linear-gradient(135deg, #d9d3c6, #d9d3c6 14px, #d1cabb 14px, #d1cabb 28px); } .tm-ph--2 { background: repeating-linear-gradient(135deg, #ccd5d2, #ccd5d2 14px, #c2cdc9 14px, #c2cdc9 28px); } .tm-ph--3 { background: repeating-linear-gradient(135deg, #dbd0cb, #dbd0cb 14px, #d2c6c0 14px, #d2c6c0 28px); } .tm-ph--4 { background: repeating-linear-gradient(135deg, #d5d3c1, #d5d3c1 14px, #ccc9b6 14px, #ccc9b6 28px); } .tm-ph--5 { background: repeating-linear-gradient(135deg, #e2dccb, #e2dccb 12px, #dad3c0 12px, #dad3c0 24px); } .tm-ph--6 { background: repeating-linear-gradient(135deg, #d7d5c4, #d7d5c4 12px, #cfcdb9 12px, #cfcdb9 24px); } .tm-ph--7 { background: repeating-linear-gradient(135deg, #d3d4c3, #d3d4c3 12px, #cbccb8 12px, #cbccb8 24px); } .tm-ph--8 { background: repeating-linear-gradient(135deg, #ddd2cd, #ddd2cd 12px, #d4c8c2 12px, #d4c8c2 24px); } .tm-ph--9 { background: repeating-linear-gradient(135deg, #dcd6c6, #dcd6c6 12px, #d4cdbb 12px, #d4cdbb 24px); } /* Board member slots reuse the two-tone pattern from the original design. */ .tm-ph--board1 { background: repeating-linear-gradient(135deg, #e4dece, #e4dece 14px, #dcd5c2 14px, #dcd5c2 28px); } .tm-ph--board2 { background: repeating-linear-gradient(135deg, #d6dcd9, #d6dcd9 14px, #ccd3cf 14px, #ccd3cf 28px); } /* real image inside a slot */ .tm-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ 4. Header / navigation ============================================================ */ .tm-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 243, 236, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--tm-line); } .tm-header__inner { max-width: var(--tm-container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--tm-pad-x); gap: 20px; } .tm-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; } .tm-brand__logo { height: 46px; width: auto; display: block; } .tm-brand__text { padding-left: 14px; border-left: 1px solid var(--tm-line-18); } .tm-brand__name { font-family: var(--tm-serif); font-weight: 600; font-size: 16px; color: var(--tm-navy); line-height: 1.1; } .tm-brand__sub { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tm-maroon); } .tm-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; flex-wrap: wrap; justify-content: flex-end; } .tm-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .tm-nav__menu li { margin: 0; } .tm-nav__link { color: var(--tm-ink-5); text-decoration: none; transition: color .15s ease; } .tm-nav__link:hover { color: var(--tm-maroon); } .tm-nav__link.is-active, .current-menu-item > .tm-nav__link, .current_page_item > .tm-nav__link, .current-menu-parent > .tm-nav__link { color: var(--tm-maroon); } .tm-nav__cta { background: var(--tm-maroon); color: #fff; padding: 10px 20px; border-radius: 8px; text-decoration: none; transition: background .18s ease; white-space: nowrap; flex-shrink: 0; } .tm-nav__cta:hover { background: #6a2531; color: #fff; } .tm-nav-toggle { display: none; border: 1px solid var(--tm-line-18); background: transparent; border-radius: 8px; width: 44px; height: 40px; padding: 0; align-items: center; justify-content: center; color: var(--tm-navy); } .tm-nav-toggle svg { display: block; } .tm-nav-toggle .tm-icon-close { display: none; } .tm-nav-toggle[aria-expanded="true"] .tm-icon-open { display: none; } .tm-nav-toggle[aria-expanded="true"] .tm-icon-close { display: block; } /* ============================================================ 5. Hero ============================================================ */ .tm-hero { max-width: var(--tm-container); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch; } .tm-hero__content { padding: 76px var(--tm-pad-x) 72px; } .tm-badge { display: inline-block; font-family: var(--tm-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tm-maroon); border: 1px solid rgba(125, 43, 58, .3); padding: 6px 12px; border-radius: 100px; margin-bottom: 26px; } .tm-hero__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; margin: 0 0 22px; color: var(--tm-navy); letter-spacing: -.5px; } .tm-hero__text { font-size: 17px; line-height: 1.65; color: var(--tm-ink-2); margin: 0 0 34px; max-width: 440px; } .tm-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .tm-hero__scroll { color: var(--tm-navy); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--tm-gold); padding-bottom: 2px; text-decoration: none; white-space: nowrap; } .tm-hero__scroll:hover { color: var(--tm-maroon); } .tm-hero__media { position: relative; min-height: 480px; overflow: hidden; } /* Slideshow */ .tm-slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1s ease; } .tm-slide.is-active { opacity: 1; z-index: 2; } .tm-slide__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(to top, rgba(16, 35, 63, .55), transparent); color: var(--tm-cream); font-family: var(--tm-serif); font-size: 18px; } .tm-slot { position: absolute; top: 20px; left: 20px; font-family: var(--tm-mono); font-size: 11px; letter-spacing: 1px; color: var(--tm-slot); background: rgba(246, 243, 236, .85); padding: 4px 8px; border-radius: 5px; } .tm-slot--sm { top: 12px; left: 12px; font-size: 10px; padding: 3px 7px; } .tm-slot--md { top: 14px; left: 14px; } .tm-dots { position: absolute; z-index: 5; bottom: 24px; right: 24px; display: flex; gap: 8px; } .tm-dot { width: 9px; height: 9px; border-radius: 100px; cursor: pointer; border: 0; padding: 0; background: rgba(255, 255, 255, .55); transition: background .2s ease; } .tm-dot.is-active { background: var(--tm-gold); } .tm-dots--center { position: static; justify-content: center; margin-top: 12px; } .tm-dots--light .tm-dot { background: rgba(246, 243, 236, .4); } .tm-dots--light .tm-dot.is-active { background: var(--tm-gold); } /* Carousel pause/play control (WCAG 2.2.2) */ .tm-carousel-pause { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(16, 35, 63, .5); color: #f6f3ec; margin-right: 2px; transition: background .18s ease; } .tm-carousel-pause:hover { background: rgba(16, 35, 63, .72); } .tm-carousel-pause__icon { display: inline-block; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; } .tm-carousel-pause[aria-pressed="true"] .tm-carousel-pause__icon { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; } /* ============================================================ 6. Stats bar ============================================================ */ .tm-stats { max-width: var(--tm-container); margin: 0 auto; } .tm-stats__grid { background: var(--tm-navy); color: var(--tm-cream); display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; } .tm-stat { padding: 30px 20px; border-right: 1px solid rgba(255, 255, 255, .1); } .tm-stat:last-child { border-right: 0; } .tm-stat__value { font-family: var(--tm-serif); font-size: 34px; color: var(--tm-gold); } .tm-stat__label { font-size: 12px; letter-spacing: .5px; color: var(--tm-foot-text); margin-top: 4px; } /* ============================================================ 7. About ============================================================ */ .tm-about { max-width: var(--tm-container); margin: 0 auto; padding: 72px var(--tm-pad-x); display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .tm-about__media { min-height: 300px; border-radius: 12px; overflow: hidden; } .tm-about__body .tm-eyebrow { display: block; margin-bottom: 16px; } .tm-h2 { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; color: var(--tm-navy); } .tm-about__body h2 { margin: 0 0 20px; } .tm-about__body p { font-size: 16px; line-height: 1.7; color: var(--tm-ink-2); margin: 0 0 16px; } .tm-about__body p:last-child { margin-bottom: 0; } /* ============================================================ 8. How it works ============================================================ */ .tm-how { max-width: var(--tm-container); margin: 0 auto; padding: 8px var(--tm-pad-x) 72px; } .tm-how__head { text-align: center; max-width: 560px; margin: 0 auto 48px; } .tm-how__head .tm-eyebrow { display: block; margin-bottom: 12px; } .tm-how__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(24px, 3.2vw, 34px); color: var(--tm-navy); margin: 0; } .tm-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tm-step { background: #fff; border: 1px solid var(--tm-line); border-radius: 12px; padding: 34px 30px; } .tm-step__num { font-family: var(--tm-serif); font-size: 26px; color: var(--tm-gold); margin-bottom: 14px; } .tm-step__title { font-family: var(--tm-serif); font-weight: 600; font-size: 20px; margin: 0 0 10px; color: var(--tm-navy); } .tm-step__text { font-size: 14px; line-height: 1.65; color: var(--tm-ink-3); margin: 0; } /* ============================================================ 9. Section heads (shared) & article cards ============================================================ */ .tm-section-alt { background: var(--tm-cream-alt); border-top: 1px solid var(--tm-line-2); } .tm-kb-preview__inner { padding: 72px 0; } .tm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .tm-section-head__text { max-width: 560px; } .tm-section-head__text .tm-eyebrow { display: block; margin-bottom: 12px; } .tm-section-head__text h2 { margin: 0 0 12px; } .tm-section-head__text p { font-size: 16px; line-height: 1.65; color: var(--tm-ink-2); margin: 0; } .tm-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tm-article-card { background: #fff; border: 1px solid var(--tm-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .tm-article-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 35, 63, .1); border-color: var(--tm-line-3); } .tm-article-card__thumb { height: 150px; position: relative; overflow: hidden; } .tm-article-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .tm-article-card--plain .tm-article-card__body { padding: 28px; } .tm-article-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .tm-article-card__cat { font-family: var(--tm-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tm-maroon); } .tm-article-card__read { font-size: 12px; color: var(--tm-ink-3); } .tm-article-card__title { font-family: var(--tm-serif); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0 0 8px; color: var(--tm-navy); } .tm-article-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--tm-ink-3); margin: 0 0 18px; } .tm-article-card__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--tm-navy); border-bottom: 2px solid var(--tm-gold); align-self: flex-start; padding-bottom: 2px; } .tm-article-card:hover .tm-article-card__more { color: var(--tm-maroon); } /* ============================================================ 10. Testimonials ============================================================ */ .tm-testi { background: var(--tm-maroon); color: var(--tm-cream); padding: 72px var(--tm-pad-x); text-align: center; } .tm-testi__inner { max-width: 760px; margin: 0 auto; } .tm-testi__mark { font-family: var(--tm-serif); font-size: 60px; line-height: 0; color: var(--tm-gold); height: 30px; } .tm-testi__track { position: relative; min-height: 170px; } .tm-quote { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity .8s ease; display: flex; flex-direction: column; align-items: center; } .tm-quote.is-active { opacity: 1; z-index: 2; } .tm-quote__text { font-family: var(--tm-serif); font-weight: 500; font-size: 26px; line-height: 1.5; margin: 0 0 24px; } .tm-quote__author { font-size: 14px; color: #e6c9cf; } /* ============================================================ 11. CTA + meeting details ============================================================ */ .tm-cta { max-width: var(--tm-container); margin: 0 auto; padding: 72px var(--tm-pad-x); display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .tm-cta__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 18px; color: var(--tm-navy); } .tm-cta__text { font-size: 16px; line-height: 1.7; color: var(--tm-ink-2); margin: 0 0 30px; } .tm-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; } .tm-meeting { background: #fff; border: 1px solid var(--tm-line-3); border-radius: 14px; padding: 32px; } .tm-meeting__label { display: block; margin-bottom: 18px; } .tm-meeting__row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--tm-line-2); } .tm-meeting__row:last-child { border-bottom: 0; padding-bottom: 0; } .tm-meeting__row:first-of-type { padding-top: 0; } .tm-meeting__arrow { font-family: var(--tm-serif); font-size: 22px; color: var(--tm-gold); width: 32px; flex-shrink: 0; } .tm-meeting__title { font-weight: 600; color: var(--tm-navy); } .tm-meeting__sub { font-size: 13px; color: var(--tm-ink-3); } .tm-meeting__sub a { color: var(--tm-maroon); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(125, 43, 58, .35); } /* ============================================================ 12. Footer ============================================================ */ .tm-footer { background: var(--tm-navy); color: var(--tm-foot-text); margin-top: auto; } .tm-footer__grid { max-width: var(--tm-container); margin: 0 auto; padding: 48px var(--tm-pad-x); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .tm-footer__brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .tm-footer__logo { background: var(--tm-cream); border-radius: 10px; padding: 8px; display: inline-flex; } .tm-footer__logo img { height: 44px; width: auto; display: block; } .tm-footer__brand-name { color: var(--tm-cream); font-family: var(--tm-serif); font-size: 17px; } .tm-footer__about { font-size: 14px; line-height: 1.6; margin: 0; max-width: 340px; } .tm-footer__heading { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tm-foot-head); margin-bottom: 14px; } .tm-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .tm-footer__links a { color: var(--tm-foot-link); text-decoration: none; transition: color .15s ease; } .tm-footer__links a:hover { color: #fff; } .tm-footer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--tm-foot-link); } .tm-footer__contact a { color: var(--tm-foot-link); text-decoration: none; } .tm-footer__contact a:hover { color: #fff; } .tm-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); } .tm-footer__bottom-inner { max-width: var(--tm-container); margin: 0 auto; padding: 20px var(--tm-pad-x); font-size: 12px; color: var(--tm-foot-head); } /* ============================================================ 13. Page header (archives / listings) ============================================================ */ .tm-page-head { max-width: 640px; margin-bottom: 44px; } .tm-page-head--wide { max-width: 640px; } .tm-page-head .tm-eyebrow { display: block; margin-bottom: 14px; } .tm-page-head__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; margin: 0 0 16px; color: var(--tm-navy); } .tm-page-head__text { font-size: 17px; line-height: 1.65; color: var(--tm-ink-2); margin: 0; } .tm-listing { padding: 64px 0 80px; } /* Filters (knowledge base) */ .tm-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; } .tm-filter { font-size: 13px; font-weight: 500; color: var(--tm-ink-3); padding: 8px 16px; border-radius: 100px; text-decoration: none; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .tm-filter:hover { color: var(--tm-navy); } .tm-filter.is-active { font-weight: 600; color: var(--tm-navy); background: #fff; border-color: var(--tm-line-3); } /* ============================================================ 14. Single article ============================================================ */ .tm-article { padding: 48px 0 80px; } .tm-article__back { font-size: 14px; font-weight: 600; color: var(--tm-maroon); display: inline-block; margin-bottom: 28px; text-decoration: none; } .tm-article__back:hover { text-decoration: underline; } .tm-article__meta { font-family: var(--tm-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tm-maroon); margin-bottom: 14px; } .tm-article__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; margin: 0 0 20px; color: var(--tm-navy); } .tm-article__excerpt { font-size: 19px; line-height: 1.6; color: var(--tm-ink-2); margin: 0 0 32px; font-style: italic; } .tm-article__hero { height: 300px; border-radius: 12px; margin-bottom: 40px; position: relative; overflow: hidden; } .tm-article__body h2 { font-family: var(--tm-serif); font-weight: 600; font-size: 26px; margin: 36px 0 14px; color: var(--tm-navy); } .tm-article__body h3 { font-family: var(--tm-serif); font-weight: 600; font-size: 21px; margin: 28px 0 12px; color: var(--tm-navy); } .tm-article__body p, .tm-article__body li { font-size: 17px; line-height: 1.75; color: var(--tm-ink-4); } .tm-article__body p { margin: 0 0 18px; } .tm-article__body ul, .tm-article__body ol { margin: 0 0 18px; padding-left: 22px; } .tm-article__body a { color: var(--tm-maroon); } .tm-article__body img { border-radius: 10px; } .tm-article__body blockquote { margin: 0 0 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--tm-gold); font-style: italic; color: var(--tm-ink-2); } .tm-article__foot { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--tm-line-3); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .tm-article__foot-note { font-size: 15px; color: var(--tm-ink-2); } .tm-article__foot-note strong { color: var(--tm-navy); } /* ============================================================ 15. Gallery (masonry) ============================================================ */ .tm-gallery { columns: 3; column-gap: 16px; } .tm-gallery__item { break-inside: avoid; margin-bottom: 16px; border-radius: 12px; overflow: hidden; position: relative; } .tm-gallery__img { display: block; width: 100%; height: auto; } .tm-gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(to top, rgba(16, 35, 63, .5), transparent); color: var(--tm-cream); font-size: 13px; font-weight: 500; } /* ============================================================ 16. Board (Zarząd) ============================================================ */ .tm-board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tm-member { background: #fff; border: 1px solid var(--tm-line); border-radius: 14px; overflow: hidden; } .tm-member__photo { height: 240px; position: relative; overflow: hidden; } .tm-member__body { padding: 24px; } .tm-member__role { font-family: var(--tm-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tm-maroon); margin-bottom: 8px; } .tm-member__name { font-family: var(--tm-serif); font-weight: 600; font-size: 22px; margin: 0 0 10px; color: var(--tm-navy); } .tm-member__bio { font-size: 14px; line-height: 1.6; color: var(--tm-ink-3); margin: 0; } /* ============================================================ 17. Generic page / content (page.php, 404, comments) ============================================================ */ .tm-page { padding: 64px 0 80px; } .tm-page__title { font-family: var(--tm-serif); font-weight: 600; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; margin: 0 0 24px; color: var(--tm-navy); } .tm-prose { max-width: 760px; } .tm-prose p, .tm-prose li { font-size: 17px; line-height: 1.75; color: var(--tm-ink-4); } .tm-prose p { margin: 0 0 18px; } .tm-prose h2 { font-family: var(--tm-serif); font-weight: 600; font-size: 28px; color: var(--tm-navy); margin: 32px 0 14px; } .tm-prose h3 { font-family: var(--tm-serif); font-weight: 600; font-size: 22px; color: var(--tm-navy); margin: 26px 0 12px; } .tm-prose a { color: var(--tm-maroon); } .tm-prose img { border-radius: 10px; } .tm-prose ul, .tm-prose ol { margin: 0 0 18px; padding-left: 22px; } .tm-empty { font-size: 16px; color: var(--tm-ink-2); background: #fff; border: 1px solid var(--tm-line); border-radius: 12px; padding: 40px; text-align: center; } /* Standard blog loop (index / search / date & category archives) */ .tm-loop { display: flex; flex-direction: column; gap: 34px; } .tm-loop__item { border-bottom: 1px solid var(--tm-line); padding-bottom: 34px; } .tm-loop__item:last-child { border-bottom: 0; padding-bottom: 0; } .tm-loop__meta { font-family: var(--tm-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--tm-maroon); margin-bottom: 10px; } .tm-loop__title { font-family: var(--tm-serif); font-weight: 600; font-size: 26px; line-height: 1.2; margin: 0 0 10px; color: var(--tm-navy); } .tm-loop__title a { text-decoration: none; color: inherit; } .tm-loop__title a:hover { color: var(--tm-maroon); } .tm-loop__excerpt { font-size: 16px; line-height: 1.7; color: var(--tm-ink-2); margin: 0 0 14px; } /* WordPress core alignment / caption helpers */ .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: 6px 24px 12px 0; } .alignright { float: right; margin: 6px 0 12px 24px; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 13px; color: var(--tm-ink-3); text-align: center; } .sticky, .gallery-caption, .bypostauthor { display: block; } /* Pagination */ .tm-pagination { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--tm-line-3); background: #fff; color: var(--tm-navy); font-weight: 600; font-size: 14px; text-decoration: none; } .tm-pagination .page-numbers.current { background: var(--tm-navy); color: #fff; border-color: var(--tm-navy); } .tm-pagination .page-numbers.dots { border: 0; background: transparent; } /* ============================================================ 18. Responsive ============================================================ */ @media (max-width: 1040px) { :root { --tm-pad-x: 28px; } .tm-hero__content { padding-top: 60px; padding-bottom: 56px; } } @media (max-width: 900px) { /* Header: switch to toggle menu */ .tm-nav-toggle { display: inline-flex; } .tm-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--tm-cream); border-bottom: 1px solid var(--tm-line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--tm-pad-x) 20px; display: none; box-shadow: 0 18px 30px rgba(16, 35, 63, .08); } .tm-nav.is-open { display: flex; } .tm-nav { justify-content: flex-start; } .tm-nav__menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .tm-nav__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--tm-line-2); font-size: 16px; } .tm-nav__cta { margin-top: 14px; text-align: center; } .tm-header__inner { position: relative; } /* Hero stacks */ .tm-hero { grid-template-columns: 1fr; } .tm-hero__content { padding: 48px var(--tm-pad-x) 40px; } .tm-hero__media { min-height: 340px; order: -1; } /* Stats -> 2 cols */ .tm-stats__grid { grid-template-columns: repeat(2, 1fr); } .tm-stat:nth-child(2) { border-right: 0; } .tm-stat:nth-child(1), .tm-stat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .1); } /* About / CTA stack */ .tm-about { grid-template-columns: 1fr; gap: 32px; padding: 56px var(--tm-pad-x); } .tm-cta { grid-template-columns: 1fr; gap: 36px; padding: 56px var(--tm-pad-x); } /* Grids -> 2 cols */ .tm-how__grid, .tm-card-grid, .tm-board-grid { grid-template-columns: repeat(2, 1fr); } /* Gallery -> 2 cols */ .tm-gallery { columns: 2; } .tm-kb-preview__inner { padding: 56px 0; } .tm-testi { padding: 56px var(--tm-pad-x); } } @media (max-width: 600px) { :root { --tm-pad-x: 20px; } .tm-brand__logo { height: 40px; } .tm-hero__content { padding: 40px var(--tm-pad-x) 32px; } .tm-hero__media { min-height: 280px; } /* Stats -> 1 col */ .tm-stats__grid { grid-template-columns: 1fr; } .tm-stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } .tm-stat:last-child { border-bottom: 0; } /* Everything single column */ .tm-how__grid, .tm-card-grid, .tm-board-grid { grid-template-columns: 1fr; } .tm-gallery { columns: 1; } .tm-section-head { flex-direction: column; align-items: flex-start; } .tm-quote__text { font-size: 21px; } .tm-article__excerpt { font-size: 17px; } .tm-article__body p, .tm-article__body li { font-size: 16px; } .tm-footer__grid { grid-template-columns: 1fr; gap: 32px; } .tm-listing { padding: 44px 0 60px; } .tm-article { padding: 32px 0 60px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .tm-slide, .tm-quote { transition: opacity .01ms !important; } }