/* Shared custom styles for buschfeuer. Relies on Tailwind colors defined in assets/js/tailwind-config.js. */ html { scroll-behavior: smooth; } body { font-feature-settings: "ss01"; overflow-x: hidden; } /* — Eyebrow labels — */ .eyebrow { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; } .eyebrow-dark { color: #c2410c; } .eyebrow-light { color: rgb(255 255 255 / 0.75); } /* — Body text on dark surfaces — */ .text-fine-on-dark { color: rgb(255 255 255 / 0.80); } .text-faint-on-dark { color: rgb(255 255 255 / 0.55); } /* — Frosted-glass nav / overlays — */ .glass-light { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* — Dark surface with moss glow — */ .surface-dark { background: #0f2d24; position: relative; overflow: hidden; } .surface-dark > .moss-glow-primary, .surface-dark > .moss-glow-anchor { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(110px); } .moss-glow-primary { background: #5a9323; opacity: 0.55; width: 480px; height: 480px; top: -80px; right: -80px; } .moss-glow-anchor { background: #2d6b2a; opacity: 0.40; width: 360px; height: 360px; bottom: -100px; left: -60px; } /* — Card hover — */ .card-hover { transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .card-hover:hover { transform: translateY(-4px); } /* — Section divider with fade — */ .section-divider { border-top: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(26, 77, 62, 0.18), transparent) 1; } /* — Hide default

marker — */ details > summary::-webkit-details-marker { display: none; } details > summary { list-style: none; } /* — Hero kicker with ember pulse dot — */ .pulse-dot { position: relative; } .pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 9999px; background: rgba(249, 115, 22, 0.35); animation: pulse 2.2s ease-out infinite; z-index: -1; } @keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } /* — Spark motif (decorative) — */ .spark-rays { position: absolute; inset: 0; pointer-events: none; opacity: 0.25; background-image: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(249, 115, 22, 0.3) 0%, transparent 45%); } /* — Logo als monochromer Hintergrund-Watermark — Nutzt buschfeuer_logo_mono.svg als Alpha-Maske; Farbe via background-color, Dezentheit per opacity am Container. */ .logo-watermark { -webkit-mask-image: url('../img/buschfeuer_logo_mono.svg'); mask-image: url('../img/buschfeuer_logo_mono.svg'); mask-mode: alpha; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* — Mobile nav drawer — Overlay + drawer panel. Hidden by default; activated by [data-drawer-open] on . */ body.drawer-open { overflow: hidden; } .mobile-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; } .mobile-drawer[data-open="true"] { visibility: visible; opacity: 1; transition: opacity 200ms ease, visibility 0s linear 0s; } .mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 45, 36, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .mobile-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88%, 360px); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: -12px 0 40px -12px rgba(15, 45, 36, 0.25); transform: translateX(24px); transition: transform 200ms ease; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .mobile-drawer[data-open="true"] .mobile-drawer__panel { transform: translateX(0); } /* Hamburger button reset */ .nav-hamburger { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: #0f2d24; transition: background-color 160ms ease; } .nav-hamburger:hover { background: rgba(15, 45, 36, 0.06); } /* Hero moss glow — softer footprint on mobile so white text stays readable. Desktop values (set inline on each page) are intentionally untouched. */ @media (max-width: 767px) { #hero > .moss-glow-primary { width: 380px !important; height: 380px !important; top: -100px !important; right: -120px !important; opacity: 0.5 !important; } #hero > .moss-glow-anchor { display: none !important; } #hero > .logo-watermark { opacity: 0.035 !important; /* halve mobile presence to reduce noise behind text */ } }