/* Theme Name: Bunky Jelšava Theme URI: https://bunkyjelsava.sk Description: Twenty Twenty-Five child theme for bunkyjelsava.sk. Colours, type scale, fonts and layout widths live in theme.json; block style variations live in functions/BlockStyles.php. This file holds only what neither can express. Author: Digitálka Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.7 Requires PHP: 8.5 Text Domain: bunkyjelsava */ /* The nav links to anchors on the front page, so sections must not land under the header. */ :where([id]) { scroll-margin-top: 3rem; } /* * One header part serves every page. The block itself carries no background, so * there is no preset colour class to fight: the front page leaves it * transparent over the hero, and subpages paint it black here. Which of the two * applies depends on the template being rendered, so it cannot be a block * attribute. */ body.home header.wp-block-group { position: absolute; inset-inline: 0; top: 0; z-index: 2; } /* * The admin bar adds a top margin to , which pushes the in-flow header on * subpages down but not the absolutely positioned one here — it would slide up * underneath the bar, so the header appeared to jump between pages when logged * in. Logged-out visitors never saw it. */ body.admin-bar.home header.wp-block-group { top: var(--wp-admin--admin-bar--height, 32px); } body:not(.home) header.wp-block-group { background-color: var(--wp--preset--color--accent-3); } /* * Open overlay. Core's own rules are scoped with :not(.disable-default-overlay), * so anything less specific than that is ignored. The extra .wp-block-navigation * puts these ahead of it. * * Core centres the close button in a band the width of wideSize, the same 1320px * band the header uses, so matching the overlay's padding to the header's is * enough to land the X exactly where the hamburger was. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: calc(2rem + var(--wp--preset--spacing--40)); align-items: flex-end; } /* * Pin the close button to exactly where the hamburger sits. Core nests it inside * a centred band and positions it there, which put it in the wrong place; fixed * positioning takes it out of that layout altogether. The right offset is the * header's padding, or the edge of the 1320px content band once the viewport is * wider than it — 50vw - 660px being half of 1320. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: var(--wp--preset--spacing--50); right: max(var(--wp--preset--spacing--30), 50vw - 660px); z-index: 3; } body.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(var(--wp--preset--spacing--50) + var(--wp-admin--admin-bar--height, 32px)); } /* * On narrow screens the list is centred horizontally instead of hugging the * right edge. It stays at the top of the overlay — only the horizontal axis is * centred. The close button is fixed, so this does not move it. */ @media (max-width: 781px) { .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { align-items: center; text-align: center; } } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.75rem; line-height: 1.3; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.5rem; } /* * Hamburger drawn as three thin bars, the way the old site's * hamburger--collapse-r looked, instead of core's heavier SVG. The SVG is * hidden rather than removed, so the button keeps its accessible label. */ .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { display: none; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { position: relative; width: 30px; height: 22px; } .wp-block-navigation__responsive-container-open::before, .wp-block-navigation__responsive-container-open::after, .wp-block-navigation__responsive-container-close::before, .wp-block-navigation__responsive-container-close::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .wp-block-navigation__responsive-container-open::before { top: 0; } .wp-block-navigation__responsive-container-open::after { bottom: 0; } /* Middle bar of the three. */ .wp-block-navigation__responsive-container-open { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-position: center; background-repeat: no-repeat; } /* The close button is the same two bars, crossed. */ .wp-block-navigation__responsive-container-close::before { top: 50%; transform: translateY(-50%) rotate(45deg); } .wp-block-navigation__responsive-container-close::after { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* * No focus, active or hover ring anywhere in the header or the open menu: * outline, box-shadow, border and underline all off, in every state. * !important is required because core and the parent theme both set these with * higher specificity than a plain descendant selector can reach. * * Trade-off, requested: keyboard users get no visible focus indicator here. */ header.wp-block-group :is(a, button), header.wp-block-group :is(a, button):hover, header.wp-block-group :is(a, button):focus, header.wp-block-group :is(a, button):focus-visible, header.wp-block-group :is(a, button):active, .wp-block-navigation__responsive-container :is(a, button):focus, .wp-block-navigation__responsive-container :is(a, button):focus-visible, .wp-block-navigation__responsive-container :is(a, button):active, .wp-block-navigation__responsive-close:focus, .wp-block-navigation__responsive-dialog:focus, a.custom-logo-link:focus, a.custom-logo-link:focus-visible, a.custom-logo-link:active { outline: none !important; box-shadow: none !important; border-color: transparent !important; text-decoration: none !important; } /* * The thank-you after a booking is not a unit page any more: it holds the heading, the news and one * sentence. The way back to the homepage belongs to somebody who is still deciding, so it goes. * * The class comes from the booking plugin (UnitPage::BOOKED_CLASS), which knows the booking went * through; what to put away is the theme's own business, which is why the rule is here. */ .bunky-booked .bunka-back { display: none; }