/* Theme Name: Federico Bresciani Description: Black-and-white minimal child theme of Twenty Twenty-Five for federicobresciani.com. Template: twentytwentyfive Author: Federico Bresciani Version: 1.0.42 Text Domain: federico-bresciani */ /* * Fixed site header: removed from document flow and pinned to the * viewport, so page content scrolls up and disappears behind it. Because * it's out of flow, every page needs compensating top padding on its main * content area (below) so nothing loads hidden underneath it. */ .site-header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background-color: #ffffff; /* * Hide-on-scroll-down / show-on-scroll-up, on every viewport. The * .header-hidden class is toggled by a small scroll listener * (federico_bresciani_mobile_header_scroll_script() in functions.php, * despite the mobile-specific name it now runs site-wide) that adds it * once the user scrolls down past the header's own height, and removes * it the moment they scroll back up. */ transition: transform 0.3s ease; } .site-header-fixed.header-hidden { transform: translateY(-100%); } /* * Compensates for the fixed header's height on every template's

, * so content doesn't render underneath it on load. --site-header-height * is set by federico_bresciani_header_height_var_script() in * functions.php from the header's own real, current rendered height * (it's no longer a fixed value now that the site title is a fluid * clamp()) — 84px remains only as the fallback for the brief moment * before that script runs, or if JS is disabled. */ main { padding-top: var(--site-header-height, 84px); /* * WordPress's own default spacing between top-level blocks * (`main` isn't 's first child — the header comes before it — * so it isn't exempt from the generic sibling-spacing margin) adds an * extra ~1.2rem on top of the padding above, which already fully * handles clearing the fixed header on its own. That stray margin is * incidental, not a deliberate part of this layout, and specifically * broke the homepage hero's "fit exactly within one screen" sizing by * pushing everything ~19px further down than accounted for. */ margin-top: 0 !important; } /* * Biography (EN 6, DE 15, PL 16, IT 17) and Media (EN 182, DE 183, PL 184, * IT 185) pages: warm grey background matching the homepage, centered * title matching the federicobresciani.com reference layout. Scoped to * these specific page IDs rather than site-wide so Concerts/Contact are * unaffected. */ .page-id-6, .page-id-15, .page-id-16, .page-id-17, .page-id-182, .page-id-183, .page-id-184, .page-id-185 { background-color: #f5f5f3; } .page-id-6 .wp-block-post-title, .page-id-15 .wp-block-post-title, .page-id-16 .wp-block-post-title, .page-id-17 .wp-block-post-title, .page-id-182 .wp-block-post-title, .page-id-183 .wp-block-post-title, .page-id-184 .wp-block-post-title, .page-id-185 .wp-block-post-title { text-align: center; /* Pure black, distinct from the #111111 body text. */ color: #000000; margin-bottom: 4rem !important; } /* * Noticeably tighter gap under the header than the original centered * design (which balanced margin-top against the 4rem margin-bottom above * — main's margin-top (1rem) + the alignfull wrapper's padding-top * (0.5rem) + this 2.5rem used to sum to 4rem, matching the space below). * Reduced on request for both Media and Biography; no longer meant to * preserve that top/bottom symmetry. */ .page-id-6 .wp-block-post-title, .page-id-15 .wp-block-post-title, .page-id-16 .wp-block-post-title, .page-id-17 .wp-block-post-title, .page-id-182 .wp-block-post-title, .page-id-183 .wp-block-post-title, .page-id-184 .wp-block-post-title, .page-id-185 .wp-block-post-title { margin-top: 0.5rem !important; } /* Biography: page-title heading removed entirely on request (the page opens directly into the bio text/photo instead). display:none takes it fully out of layout, so its margin-top/bottom above don't add any space either — nothing else needed to close the gap they'd otherwise leave. */ .page-id-6 .wp-block-post-title, .page-id-15 .wp-block-post-title, .page-id-16 .wp-block-post-title, .page-id-17 .wp-block-post-title { display: none; } /* * "Concert Host & Moderator" subheading, matched exactly to the * "Biography" title above it: same color, and (since by default an

* renders smaller than an

per the theme's own h1/h2 font-size rules) * the same font-size explicitly. font-weight is left alone here — both * headings already share the same default weight (400) from the theme's * global h1–h6 rule, so no override is needed to match it. / .page-id-6 .bio-subheading-wrap .wp-block-heading, .page-id-15 .bio-subheading-wrap .wp-block-heading, .page-id-16 .bio-subheading-wrap .wp-block-heading, .page-id-17 .bio-subheading-wrap .wp-block-heading { color: #000000 !important; font-size: var(--wp--preset--font-size--xx-large); font-weight: 400; } / * Pulls the "Biography" heading closer to the header: the shared * page.html template stacks
's own margin-top with its inner * full-width group's padding-top above the title (used as-is by * Concerts/Contact), so both are reduced here, scoped to Biography only. / .page-id-6 main, .page-id-15 main, .page-id-16 main, .page-id-17 main, .page-id-182 main, .page-id-183 main, .page-id-184 main, .page-id-185 main { margin-top: 1rem !important; } .page-id-6 main > .wp-block-group.alignfull, .page-id-15 main > .wp-block-group.alignfull, .page-id-16 main > .wp-block-group.alignfull, .page-id-17 main > .wp-block-group.alignfull, .page-id-182 main > .wp-block-group.alignfull, .page-id-183 main > .wp-block-group.alignfull, .page-id-184 main > .wp-block-group.alignfull, .page-id-185 main > .wp-block-group.alignfull { padding-top: 0.5rem !important; } / * Biography two-column sections: raw HTML (Custom HTML blocks), no * WordPress block classes involved at all — core/columns' own static CSS * (`.wp-block-columns.are-vertically-aligned-center`, * `.wp-block-column.is-vertically-aligned-center`, setting * align-items/align-self:center) kept fighting every sticky override * regardless of !important, so this removes that fight entirely. * * No overflow is set anywhere in this chain or on any ancestor. * align-items:flex-start (not stretch/center) is the standard sticky- * sidebar recipe: a flex item's sticky range is bounded by its * container's height, not its own box, so the container's natural * height (set by the taller text column) already gives .bio-photo-col * room to stick regardless of the photo column's own (shorter, * shrink-wrapped) height — flex-start just keeps it flush at the top, * matching "sticks right below the header" exactly, with no need to * artificially stretch the photo column's own box. / .bio-section, .bio-subheading-wrap { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 8%; padding-right: 8%; box-sizing: border-box; background-color: #f5f5f3; } .bio-section { display: flex; flex-direction: row; align-items: flex-start; } .bio-photo-col { width: 40%; position: sticky; / A sticky element engages once scrolling brings it up to this offset from the viewport top — raising it from 0px makes it lock into place after less scrolling (sooner), at the cost of resting slightly lower than flush against the top edge instead of exactly at it. / top: 32px; align-self: flex-start; } .bio-text-col { width: 60%; padding-left: 6%; box-sizing: border-box; } / * Without this, the browser's default
top margin pushes the text down * relative to the image (which has no such default margin and sits flush * at the top of the row), making the photo look like it starts higher up * / a different size than it actually is. Aligns both to the same * starting line. / .bio-text-col p:first-child { margin-top: 0; } / * Section 2: photo on the right, text on the left. The row stays * flex-direction:row (not reversed) — the mirrored layout comes from * DOM order (text markup first, photo markup second); this just swaps * the text's padding to its right edge, away from the photo beside it. / .bio-section--s2 .bio-text-col { padding-left: 0; padding-right: 6%; } .bio-photo { width: 100%; height: auto; border-radius: 12px !important; filter: grayscale(100%); display: block; } / * Softer filter for the Section 2 photo only (Tczew_fot.-Marta-Papis-30): * still grayscale, but reduced contrast and slightly lifted brightness. * Compound selector (both classes) so it beats the base .bio-photo rule * on specificity regardless of source order. Section 1's photo is * untouched. / .bio-photo.bio-photo--soft { filter: grayscale(100%) contrast(0.75) brightness(1.1); } @media (max-width: 781px) { .bio-section { flex-direction: column; padding-left: 6%; padding-right: 6%; } / * Two real causes, neither of which the previous attempt actually * reached: * 1. The wrapper carries an INLINE style baked into the page content * itself (style="padding-top:1rem;padding-bottom:1rem") — an * inline style always wins over any external rule that lacks * !important, on every viewport, so the earlier non-!important * 1.5rem override here never had any effect at all. * 2. .bio-subheading-wrap is a direct child of .entry-content (which * carries is-layout-constrained), so WordPress's own global flow * rule (`:where(.is-layout-constrained) > `) also adds its own margin-block-start:1.2rem on top of the wrapper's padding — a * second, separate source of space above it that was never * targeted before. * The heading's own default browser margin (scaling with its * xx-large font-size) was already correctly zeroed by the rule below * and did not need to change. / .bio-subheading-wrap { margin-top: 0 !important; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .bio-subheading-wrap .wp-block-heading { margin: 0; } .bio-photo-col, .bio-text-col { width: 100%; position: static; padding-left: 0; padding-right: 0; } / * Section 1 stacks photo-then-text on mobile (DOM order), so its photo * needs its own bottom spacing before the first paragraph below it. * Section 2's DOM order is text-then-photo, so its photo already ends * the section with nothing stacking directly beneath it — no gap * needed there. / .bio-section:not(.bio-section--s2) .bio-photo-col { margin-bottom: 2.5rem; } } / * Media page (EN 182, DE 183, PL 184, IT 185): curated 3-column grid of * video/photo thumbnails, full-bleed with the same 8% inset used by the * homepage hero and Biography sections. / .media-page-wrap { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 8%; padding-right: 8%; padding-bottom: 4rem; box-sizing: border-box; background-color: #f5f5f3; } .media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } / * .media-card is the actual grid cell (thumbnail/banner button + title * below it, for the photo item); .media-item is just the clickable button * itself, so a title paragraph can sit outside it as a plain sibling (a *