/** * Page hero — wide title + breadcrumb banner on internal pages. * Also keeps the legacy .bread-bg strip for templates that call * gastroline_render_breadcrumb_strip() directly. */ /* ═══════════════════════════════════════════════════════════ Premium page hero ═══════════════════════════════════════════════════════════ */ .gl-page-hero { position: relative; /* Rendered as a direct child of , which is already the full content width. 100vw would include the vertical scrollbar and overshoot the viewport by its width (~15px) on desktop. */ width: auto; max-width: 100%; margin-inline: 0; overflow: hidden; padding: 40px 0; color: #fff; } /* Hero background image with dark overlay Image is set via inline style (category thumbnail or fallback) */ .gl-page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } /* Dark overlay — ensures 4.5:1 contrast on white text */ .gl-page-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(7,15,26,0.88) 0%, rgba(12,28,46,0.78) 50%, rgba(10,37,64,0.72) 100%); pointer-events: none; } /* Accent line at the bottom */ .gl-page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--hdr-red, #b80000) 0%, var(--hdr-navy, #003b6b) 100%); z-index: 2; } .gl-page-hero__inner { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); box-sizing: border-box; } /* Page title */ .gl-page-hero__title { margin: 0 0 clamp(10px, 1.5vw, 16px); font-size: clamp(22px, 3.5vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #fff; } /* Breadcrumb trail */ .gl-page-hero__breadcrumb { font-size: 13px; font-weight: 500; } .gl-page-hero__breadcrumb #breadcrumbs { margin: 0; padding: 0; color: rgba(255, 255, 255, 0.55); line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .gl-page-hero__breadcrumb #breadcrumbs a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .gl-page-hero__breadcrumb #breadcrumbs a:hover, .gl-page-hero__breadcrumb #breadcrumbs a:focus-visible { color: #fff; text-decoration: underline; } .gl-page-hero__breadcrumb .breadcrumb_last { color: rgba(255, 255, 255, 0.45); font-weight: 400; } /* Yoast separator (» or ›) */ .gl-page-hero__breadcrumb #breadcrumbs .separator { color: rgba(255, 255, 255, 0.3); margin: 0 2px; } /* ── Responsive ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .gl-page-hero__breadcrumb #breadcrumbs a { transition: none; } } /* ═══════════════════════════════════════════════════════════ Legacy .bread-bg strip Used by templates that call gastroline_render_breadcrumb_strip() directly (service page, single product fallback, etc.). ═══════════════════════════════════════════════════════════ */ .bread-bg { background: var(--hdr-bg, #f4f6f9); border-bottom: 1px solid var(--hdr-border, #e2e6ea); font-size: 0.9375rem; font-weight: 600; } .bread-bg .wrapper { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); } .bread-bg #breadcrumbs { margin: 0; padding: clamp(10px, 2vw, 14px) 0; color: var(--hdr-muted, #5d6b7a); line-height: 1.5; } .bread-bg #breadcrumbs a { color: var(--hdr-navy, #003b6b); text-decoration: none; font-weight: 600; } .bread-bg #breadcrumbs a:hover, .bread-bg #breadcrumbs a:focus-visible { color: var(--hdr-red, #b80000); text-decoration: underline; } .bread-bg .breadcrumb_last { color: var(--hdr-muted, #5d6b7a); font-weight: 500; }