/* * HoreZdar theme styles. * Colors are read from CSS custom properties written into by * inc/customizer.php (horezdar_color_vars) so Customizer changes apply * without editing this file; the values below are just the defaults. */ :root { --horezdar-accent: #fb8b24; --horezdar-accent-dark: #e07a1a; --horezdar-dark: #1e1e1e; --horezdar-gray-light: #f1f1f1; --horezdar-white: #ffffff; --horezdar-radius: 16px; --horezdar-max-width: 1180px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* Belt-and-suspenders against horizontal page scroll on mobile: post * content can contain third-party shortcode/plugin output (galleries, * affiliate banners, embeds - some of it, in practice, genuinely * malformed HTML from older posts/plugins) that a theme has no control * over and can't "fix" from here. Rather than trust every such thing to * behave, clip anything that tries to render wider than the viewport at * the document level, so it can never force the whole page to pan * sideways - the specific oversized element still gets clipped locally * (see also the img/table/pre/iframe rules further down), this is the * outermost safety net for anything those don't already catch. */ body { margin: 0; max-width: 100vw; overflow-x: hidden; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--horezdar-dark); background: var(--horezdar-white); line-height: 1.55; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0 0 .5em; } p { margin: 0 0 1em; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--horezdar-accent); color: #fff; padding: 10px 16px; z-index: 10000; } .skip-link:focus { top: 0; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--horezdar-accent); outline-offset: 2px; } /* Buttons - each variant defines its own bg/fg pair; hovering (and * keyboard focus) swaps them, so the hover state is always an inverse of * that same button, never a generic browser-default blue. The border * keeps the original bg color at all times so the pill stays visible * even when its hover background turns white. */ .btn { --btn-bg: var(--horezdar-accent); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 14px 32px; border-radius: 50px; font-weight: 700; font-size: .95rem; letter-spacing: .03em; background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bg); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .btn:hover, .btn:focus { background: var(--btn-fg); color: var(--btn-bg); outline: none; } .btn:focus-visible { outline: 3px solid var(--btn-bg); outline-offset: 3px; } .btn--accent { --btn-bg: var(--horezdar-accent); --btn-fg: #fff; } .btn--dark { --btn-bg: var(--horezdar-dark); --btn-fg: #fff; } .btn--light { --btn-bg: #fff; --btn-fg: var(--horezdar-dark); } .btn--small { padding: 8px 22px; font-size: .82rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--horezdar-dark); } .site-header__inner { max-width: var(--horezdar-max-width); margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-branding a, .site-title { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; } .site-branding img, .site-branding .custom-logo { max-height: 40px; width: auto; } .main-navigation { flex: 1; } .nav-menu { display: flex; align-items: center; gap: 28px; } .nav-menu li { position: relative; } .nav-menu a { display: block; color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; padding: 18px 0; } .nav-menu a:hover, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { color: var(--horezdar-accent); } /* Submenu indicator on desktop parent items */ .nav-menu .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); vertical-align: middle; } /* Desktop dropdown: shown on hover and on keyboard focus-within so it * stays reachable via Tab, not just a mouse. */ .nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--horezdar-dark); border-radius: 12px; padding: 8px 0; margin-top: 4px; box-shadow: 0 16px 32px rgba(0, 0, 0, .25); z-index: 200; } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { display: block; } .nav-menu .sub-menu a { padding: 10px 20px; font-size: .8rem; white-space: nowrap; } .nav-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-top: 0; margin-left: 4px; } /* Keep dropdowns for the right-most items from overflowing the viewport */ .nav-menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; } .nav-menu > li:nth-last-child(-n+2) > .sub-menu .sub-menu { left: auto; right: 100%; margin-left: 0; margin-right: 4px; } .social-navigation { display: flex; } .social-menu { display: flex; gap: 10px; } .social-menu a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; color: #fff; } .social-menu a:hover, .social-menu a:focus-visible { border-color: var(--horezdar-accent); color: var(--horezdar-accent); } .social-menu__icon { display: block; color: inherit; } .menu-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; } .menu-toggle__bar { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; } /* Hero - a stack of full-bleed .hero__slide layers crossfades via * opacity; js/hero-slider.js toggles .is-active every N ms (see * data-interval, written from HOREZDAR_HERO_SLIDE_INTERVAL_MS). With a * single slide (or none) there's simply nothing to animate. */ .hero { position: relative; min-height: 70vh; display: flex; align-items: center; background: var(--horezdar-dark); overflow: hidden; } .hero__slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease; } .hero__slide.is-active { opacity: 1; z-index: 1; } .hero__overlay { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .4); } .hero__inner { position: relative; z-index: 3; max-width: var(--horezdar-max-width); margin: 0 auto; padding: 48px 24px; width: 100%; } .hero__dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 10px; } .hero__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .25); padding: 0; cursor: pointer; } .hero__dot.is-active { background: var(--horezdar-accent); border-color: var(--horezdar-accent); } .hero__title { color: #fff; font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 32px; } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Sections */ .section { padding: 56px 0; } .section__inner { max-width: var(--horezdar-max-width); margin: 0 auto; padding: 0 24px; } .section__inner--with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; /* stretch (the default), not align-items:start: the sidebar column * needs to span the full row height for the sticky skyscraper ad slot * inside it to actually have room to follow the scroll. */ } .section__heading { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 32px; } /* Article grid + cards */ .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .article-card { background: var(--horezdar-gray-light); border-radius: var(--horezdar-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease; } .article-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .12); } .article-card__media { display: block; aspect-ratio: 16 / 10; background: #d9d9d9; overflow: hidden; } .article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .article-card:hover .article-card__media img { transform: scale(1.05); } .article-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .pill { display: inline-block; align-self: flex-start; background: var(--horezdar-accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 6px 14px; border-radius: 50px; margin-bottom: 12px; } .article-card__title { font-size: 1.1rem; margin-bottom: 8px; flex: 1; } .article-card__meta { font-size: .82rem; font-weight: 300; color: rgba(30, 30, 30, .65); margin-bottom: 4px; } .article-card__excerpt { font-size: .88rem; color: rgba(30, 30, 30, .75); margin-bottom: 16px; } .article-card__body .btn { align-self: flex-start; } /* Latest-articles carousel */ .latest-carousel__viewport { overflow: hidden; border-radius: var(--horezdar-radius); } .latest-carousel__track { display: flex; transition: transform .4s ease; } .latest-carousel__slide { flex: 0 0 100%; display: flex; align-items: center; gap: 40px; background: var(--horezdar-gray-light); padding: 32px; } .latest-carousel__media { flex: 0 0 42%; max-width: 42%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #d9d9d9; display: block; } .latest-carousel__media img { width: 100%; height: 100%; object-fit: cover; } .latest-carousel__body { flex: 1; min-width: 0; } .latest-carousel__title { font-size: 1.5rem; margin-bottom: 10px; } .latest-carousel__title a:hover { color: var(--horezdar-accent); } .latest-carousel__meta { font-size: .85rem; color: rgba(30, 30, 30, .6); margin-bottom: 12px; } .latest-carousel__perex { color: rgba(30, 30, 30, .75); margin-bottom: 20px; } .latest-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; } .latest-carousel__arrow { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--horezdar-dark); background: #fff; color: var(--horezdar-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .latest-carousel__arrow:hover, .latest-carousel__arrow:focus-visible { background: var(--horezdar-dark); color: #fff; } .latest-carousel__dots { display: flex; gap: 8px; } .latest-carousel__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--horezdar-dark); background: transparent; padding: 0; cursor: pointer; } .latest-carousel__dot.is-active { background: var(--horezdar-accent); border-color: var(--horezdar-accent); } /* Promo banners (editable from the Customizer) */ .promo-banner--card .promo-banner__inner { max-width: var(--horezdar-max-width); margin: 0 auto; padding: 0 24px 56px; display: flex; flex-wrap: wrap; gap: 24px; background: var(--horezdar-white); } .promo-banner--card .promo-banner__inner { background: var(--horezdar-white); border-radius: var(--horezdar-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); overflow: hidden; padding: 0; } .promo-banner__media { flex: 0 0 260px; max-width: 260px; background: #d9d9d9; } .promo-banner__media img { width: 100%; height: 100%; object-fit: cover; } .promo-banner__body { flex: 1; min-width: 240px; padding: 28px; } .promo-banner__eyebrow { display: block; color: var(--horezdar-accent); font-weight: 800; font-size: .78rem; letter-spacing: .08em; margin-bottom: 8px; } .promo-banner__heading { font-size: 1.4rem; margin-bottom: 10px; } .promo-banner__text { color: rgba(30, 30, 30, .75); margin-bottom: 18px; } .promo-banner--wide { position: relative; padding: 100px 0; background: var(--horezdar-dark) center / cover no-repeat; overflow: hidden; } .promo-banner--wide__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .promo-banner--wide__inner { position: relative; z-index: 1; max-width: var(--horezdar-max-width); margin: 0 auto; padding: 0 24px; color: #fff; } .promo-banner--wide .promo-banner__heading { font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; } .promo-banner--wide .promo-banner__text { color: rgba(255, 255, 255, .85); max-width: 640px; } .promo-banner__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* Topic filter */ .topic-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 32px; } .topic-filter__label { font-weight: 800; font-size: 1.05rem; margin-right: 8px; } .topic-filter__pill { padding: 10px 22px; border-radius: 20px; font-weight: 700; background: rgba(251, 139, 36, .15); color: rgba(30, 30, 30, .55); } .topic-filter__pill:hover, .topic-filter__pill.is-active { background: var(--horezdar-accent); color: #fff; } /* Archive / single headers */ .archive-header, .single-article__header { max-width: 780px; margin: 0 auto 32px; } .archive-header__title, .single-article__title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } .single-article__meta { color: rgba(30, 30, 30, .6); font-size: .88rem; } .single-article__media { max-width: 900px; margin: 0 auto 32px; border-radius: var(--horezdar-radius); overflow: hidden; } .single-article__media img { border-radius: var(--horezdar-radius); } .single-article__content { max-width: 780px; margin: 0 auto; font-size: 1.05rem; } /* Pages use the same width as the rest of the site (article grids, * banners, etc.) instead of the narrower blog-post reading column. */ .single-page__content { max-width: 100%; font-size: 1.05rem; } .single-article__content p, .single-page__content p { margin-bottom: 1.2em; } /* Long unbroken strings (URLs, code) and wide embedded elements (tables, * embeds) in post/page content should never force horizontal scrolling * of the whole page - break/scroll the offending element itself instead. */ .single-article__content, .single-page__content { overflow-wrap: break-word; word-break: break-word; } /* Post/page content can include plugin/shortcode output (galleries, * affiliate banners, embeds - including, in at least one real post, * genuinely malformed third-party HTML) that a theme has no control * over and cannot predict the markup of. Rather than let any of it be * wider than the reading column and either force page scroll or - if * scroll is blocked - get clipped and made invisible, cap *every* * element in here to 100% of its own parent's width. Each descendant is * then capped relative to an already-capped parent, so nothing in the * chain can ever exceed the column width: content actually reflows and * stays fully visible, instead of merely being hidden by overflow. */ .single-article__content *, .single-page__content * { max-width: 100% !important; box-sizing: border-box; } .single-article__content table, .single-page__content table, .single-article__content pre, .single-page__content pre, .single-article__content iframe, .single-page__content iframe { display: block; overflow-x: auto; } /* Rounded corners on every image an author drops into the post/page body * itself, not just the featured image, so inline photos match the rest * of the site's rounded visual language. */ .single-article__content img, .single-page__content img { border-radius: var(--horezdar-radius); } /* Static-page banner ("flag" of its top-level menu section + breadcrumb), * rendered full width by template-parts/page-banner.php. Falls back to a * plain dark background when the page has no featured image. */ .page-banner { position: relative; padding: 64px 0; background: var(--horezdar-dark) center / cover no-repeat; color: #fff; } .page-banner__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } .page-banner__inner { position: relative; z-index: 1; max-width: var(--horezdar-max-width); margin: 0 auto; padding: 0 24px; } .page-banner__flag { margin-bottom: 14px; } .page-banner__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 12px; } .breadcrumbs { font-size: .82rem; color: rgba(255, 255, 255, .7); } .breadcrumbs a { color: rgba(255, 255, 255, .7); } .breadcrumbs a:hover { color: var(--horezdar-accent); } .breadcrumbs__sep { margin: 0 8px; color: rgba(255, 255, 255, .4); } .breadcrumbs__current { color: #fff; font-weight: 700; } .single-article__tags { max-width: 780px; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px; } .single-article__tags a { display: inline-flex; align-items: center; background: var(--horezdar-accent); border: 2px solid var(--horezdar-accent); color: #fff; padding: 6px 16px; border-radius: 50px; font-size: .78rem; font-weight: 700; transition: background-color .15s ease, color .15s ease; } .single-article__tags a:hover, .single-article__tags a:focus-visible { background: #fff; color: var(--horezdar-accent); } /* the_post_navigation() wraps both links in a single .nav-links div, so * that's what needs display:flex - the outer