@sp-days-framework/docusaurus-frontpage-collection 1.0.0

package/lib/components/HeroBanner/DotCrossGrid.js

@@ -0,0 +1,283 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotCrossGrid = void 0;
+const react_1 = __importStar(require("react"));
+const gsap_1 = require("gsap");
+const DotCrossGrid_module_css_1 = __importDefault(require("./DotCrossGrid.module.css"));
+/**
+ * DotCrossGrid - Simple implementation
+ *
+ * User interaction: Mouse creates crosses that auto-fade after 500ms
+ * Idle animation: Crosses appear in edges, fade after 2500ms
+ */
+const DotCrossGrid = ({ dotSize = 6, gap = 5, color = '#ffffff', pointerRadius = 80, pointerInnerIntensity = 0.008, pointerOuterIntensity = 0.002, maxOpacity = 0.7, minOpacity = 0.1, randomOpacity = true, idleEnabled = true, idleAreaWidth = 220, idleInterval = 2500, idleIntensity = 42, }) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const dotsMapRef = (0, react_1.useRef)(new Map());
+    const rafRef = (0, react_1.useRef)();
+    const idleIntervalRef = (0, react_1.useRef)();
+    const idleTimeoutsRef = (0, react_1.useRef)([]);
+    const gridSpacing = dotSize + gap;
+    /**
+     * Get or create dot at grid position
+     */
+    const getOrCreateDot = (gridX, gridY) => {
+        const key = `${gridX},${gridY}`;
+        let dot = dotsMapRef.current.get(key);
+        if (!dot) {
+            dot = {
+                x: gridX * gridSpacing,
+                y: gridY * gridSpacing,
+                gridX,
+                gridY,
+                opacity: 0,
+            };
+            dotsMapRef.current.set(key, dot);
+        }
+        return dot;
+    };
+    /**
+     * Create a cross pattern (5 dots) at grid position
+     */
+    const createCross = (gridX, gridY, isIdle) => {
+        const dots = [
+            getOrCreateDot(gridX, gridY),
+            getOrCreateDot(gridX, gridY - 1),
+            getOrCreateDot(gridX, gridY + 1),
+            getOrCreateDot(gridX - 1, gridY),
+            getOrCreateDot(gridX + 1, gridY),
+        ];
+        // Calculate target opacity ONCE for the entire cross
+        let targetOpacity;
+        if (randomOpacity) {
+            // Random opacity between min and max for this cross
+            targetOpacity = minOpacity + Math.random() * (maxOpacity - minOpacity);
+        }
+        else {
+            targetOpacity = isIdle ? minOpacity : maxOpacity;
+        }
+        const fadeDelay = isIdle ? 2500 : 500;
+        // Apply the same opacity to all 5 dots in this cross
+        dots.forEach(dot => {
+            // Clear existing fade timeout
+            if (dot.fadeTimeout) {
+                clearTimeout(dot.fadeTimeout);
+            }
+            // Fade in to the SAME target opacity for all dots
+            gsap_1.gsap.to(dot, {
+                opacity: targetOpacity,
+                duration: 0.3,
+                ease: 'power2.out',
+                overwrite: true,
+            });
+            // Schedule fade out (store the target for reference)
+            const finalTarget = targetOpacity;
+            dot.fadeTimeout = setTimeout(() => {
+                gsap_1.gsap.to(dot, {
+                    opacity: 0,
+                    duration: 0.6,
+                    ease: 'power2.out',
+                    overwrite: true,
+                });
+            }, fadeDelay);
+        });
+    }; /**
+     * Handle mouse move - create crosses around mouse with intensity falloff
+     */
+    const handleMouseMove = (e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const centerGridX = Math.floor(mouseX / gridSpacing);
+        const centerGridY = Math.floor(mouseY / gridSpacing);
+        // Create crosses probabilistically based on distance from mouse (including center)
+        const searchRadius = Math.ceil(pointerRadius / gridSpacing);
+        for (let dx = -searchRadius; dx <= searchRadius; dx++) {
+            for (let dy = -searchRadius; dy <= searchRadius; dy++) {
+                const distance = Math.sqrt(dx * dx + dy * dy) * gridSpacing;
+                if (distance <= pointerRadius) {
+                    // Calculate intensity based on distance (linear falloff)
+                    const normalizedDistance = distance / pointerRadius;
+                    const intensity = pointerInnerIntensity +
+                        (pointerOuterIntensity - pointerInnerIntensity) * normalizedDistance;
+                    // Random chance based on intensity (including center position)
+                    if (Math.random() < intensity) {
+                        createCross(centerGridX + dx, centerGridY + dy, false);
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * Idle animation - create random crosses at edges sequentially
+     */
+    const idlePulse = () => {
+        if (!idleEnabled)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        // Clear any existing scheduled timeouts
+        idleTimeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+        idleTimeoutsRef.current = [];
+        // Calculate delay between each cross
+        const delayBetweenCrosses = idleInterval / idleIntensity;
+        // Create crosses one-by-one with calculated delays
+        for (let i = 0; i < idleIntensity; i++) {
+            const timeout = setTimeout(() => {
+                const isLeft = Math.random() < 0.5;
+                const maxAreaWidth = Math.min(idleAreaWidth, rect.width * 0.2);
+                // Generate a weighted random position within the idle area
+                // Use power distribution to favor edges (far from center)
+                // Higher values = more edge-weighted (2.5 gives roughly 80/20 distribution)
+                const randomFactor = Math.pow(Math.random(), 2.5);
+                const distanceFromEdge = randomFactor * maxAreaWidth;
+                const x = isLeft
+                    ? distanceFromEdge
+                    : rect.width - distanceFromEdge;
+                const y = Math.random() * rect.height;
+                const gridX = Math.floor(x / gridSpacing);
+                const gridY = Math.floor(y / gridSpacing);
+                createCross(gridX, gridY, true);
+            }, i * delayBetweenCrosses);
+            idleTimeoutsRef.current.push(timeout);
+        }
+    };
+    /**
+     * Render loop
+     */
+    const render = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Clear using CSS pixel dimensions (context is already scaled by DPR)
+        const parent = canvas.parentElement;
+        if (!parent)
+            return;
+        const rect = parent.getBoundingClientRect();
+        ctx.clearRect(0, 0, rect.width, rect.height);
+        // Draw all dots
+        dotsMapRef.current.forEach(dot => {
+            if (dot.opacity > 0.01) {
+                ctx.fillStyle = color;
+                ctx.globalAlpha = dot.opacity;
+                ctx.beginPath();
+                ctx.arc(dot.x, dot.y, dotSize / 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        });
+        ctx.globalAlpha = 1;
+        rafRef.current = requestAnimationFrame(render);
+    };
+    /**
+     * Setup
+     */
+    (0, react_1.useEffect)(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        // Size canvas
+        const resizeCanvas = () => {
+            const parent = canvas.parentElement;
+            if (!parent)
+                return;
+            // Clear all existing dots and animations before resize
+            dotsMapRef.current.forEach(dot => {
+                if (dot.fadeTimeout) {
+                    clearTimeout(dot.fadeTimeout);
+                }
+                gsap_1.gsap.killTweensOf(dot);
+            });
+            dotsMapRef.current.clear();
+            const rect = parent.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            canvas.style.width = `${rect.width}px`;
+            canvas.style.height = `${rect.height}px`;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.scale(dpr, dpr);
+            }
+        };
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        // Event listeners
+        canvas.addEventListener('mousemove', handleMouseMove);
+        // Start render loop
+        rafRef.current = requestAnimationFrame(render);
+        // Start idle animation
+        if (idleEnabled) {
+            idleIntervalRef.current = setInterval(idlePulse, idleInterval);
+        }
+        return () => {
+            window.removeEventListener('resize', resizeCanvas);
+            canvas.removeEventListener('mousemove', handleMouseMove);
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+            if (idleIntervalRef.current) {
+                clearInterval(idleIntervalRef.current);
+            }
+            // Clear all scheduled idle timeouts
+            idleTimeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+            idleTimeoutsRef.current = [];
+            // Clear all timeouts
+            dotsMapRef.current.forEach(dot => {
+                if (dot.fadeTimeout) {
+                    clearTimeout(dot.fadeTimeout);
+                }
+            });
+            // Kill all GSAP animations
+            dotsMapRef.current.forEach(dot => {
+                gsap_1.gsap.killTweensOf(dot);
+            });
+        };
+    }, [idleEnabled, idleInterval, idleIntensity, gridSpacing, pointerRadius, pointerInnerIntensity, pointerOuterIntensity, maxOpacity, minOpacity, randomOpacity]);
+    return react_1.default.createElement("canvas", { ref: canvasRef, className: DotCrossGrid_module_css_1.default.dotCrossGrid });
+};
+exports.DotCrossGrid = DotCrossGrid;
+exports.default = exports.DotCrossGrid;
+//# sourceMappingURL=DotCrossGrid.js.map

package/lib/components/HeroBanner/DotCrossGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCrossGrid.js","sourceRoot":"","sources":["../../../src/components/HeroBanner/DotCrossGrid.tsx"],"names":[],"mappings":"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"}

package/lib/components/HeroBanner/DotCrossGrid.module.css

@@ -0,0 +1,9 @@
+.dotCrossGrid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: auto;
+}

package/lib/components/HeroBanner/index.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { IconifyConfig, CustomSvgConfig, CustomImageConfig, IconColorConfig } from '../../utils/types';
+export interface HeroBannerProps {
+    bannerText?: string;
+    bannerFullWidth?: boolean;
+    iconify?: IconifyConfig | string;
+    customSvg?: CustomSvgConfig;
+    customImage?: CustomImageConfig;
+    iconColors?: IconColorConfig;
+    enableDotCrossEffect?: boolean;
+    dotCrossColor?: string;
+    dotCrossSize?: number;
+    dotCrossGap?: number;
+    pointerRadius?: number;
+    pointerInnerIntensity?: number;
+    pointerOuterIntensity?: number;
+    maxOpacity?: number;
+    minOpacity?: number;
+    randomOpacity?: boolean;
+    idleEnabled?: boolean;
+    idleAreaWidth?: number;
+    idleInterval?: number;
+    idleIntensity?: number;
+}
+/**
+ * HeroBanner Component
+ *
+ * A full-width banner component with animated dot cross grid background.
+ * Automatically uses site title and tagline from Docusaurus config.
+ *
+ * @example
+ * ```tsx
+ * <HeroBanner
+ *   bannerText="Build amazing documentation sites"
+ *   iconify="mdi:rocket-launch"
+ *   enableDotCrossEffect={true}
+ * />
+ * ```
+ */
+export declare const HeroBanner: React.FC<HeroBannerProps>;
+export default HeroBanner;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/HeroBanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HeroBanner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAG5G,MAAM,WAAW,eAAe;IAE9B,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,UAAU,CAAC,EAAE,eAAe,CAAC;IAG7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsHhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/HeroBanner/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroBanner = void 0;
+const react_1 = __importStar(require("react"));
+const useDocusaurusContext_1 = __importDefault(require("@docusaurus/useDocusaurusContext"));
+const ThemedIcon_1 = require("../../utils/ThemedIcon");
+const DotCrossGrid_1 = require("./DotCrossGrid");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * HeroBanner Component
+ *
+ * A full-width banner component with animated dot cross grid background.
+ * Automatically uses site title and tagline from Docusaurus config.
+ *
+ * @example
+ * ```tsx
+ * <HeroBanner
+ *   bannerText="Build amazing documentation sites"
+ *   iconify="mdi:rocket-launch"
+ *   enableDotCrossEffect={true}
+ * />
+ * ```
+ */
+const HeroBanner = ({ bannerText, bannerFullWidth = true, iconify, customSvg, customImage, iconColors, enableDotCrossEffect = true, dotCrossColor, dotCrossSize, dotCrossGap, pointerRadius, pointerInnerIntensity, pointerOuterIntensity, maxOpacity, minOpacity, randomOpacity, idleEnabled, idleAreaWidth, idleInterval, idleIntensity, }) => {
+    const { siteConfig } = (0, useDocusaurusContext_1.default)();
+    const { title, tagline } = siteConfig;
+    const bannerRef = (0, react_1.useRef)(null);
+    // Set banner width to window width (only for full-width mode)
+    (0, react_1.useEffect)(() => {
+        if (!bannerFullWidth)
+            return;
+        const updateWidth = () => {
+            if (bannerRef.current) {
+                // Set width to window width minus 4px 
+                bannerRef.current.style.width = `${window.innerWidth - 4}px`;
+            }
+        };
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return () => {
+            window.removeEventListener('resize', updateWidth);
+        };
+    }, [bannerFullWidth]);
+    // Build iconify config with colors if provided
+    const iconifyWithColors = iconify && iconColors
+        ? (typeof iconify === 'string'
+            ? { icon: iconify, colors: iconColors }
+            : { ...iconify, colors: { ...iconify.colors, ...iconColors } })
+        : iconify
+            ? (typeof iconify === 'string'
+                ? { icon: iconify, colors: { light: '#ffffff', dark: '#ffffff' } }
+                : { ...iconify, colors: { light: '#ffffff', dark: '#ffffff', ...iconify.colors } })
+            : iconify;
+    // For Iconify icons, ensure they fill the container if no explicit size is set
+    const iconifyWithSize = iconifyWithColors
+        ? (typeof iconifyWithColors === 'string'
+            ? { icon: iconifyWithColors, width: '100%', height: '100%' }
+            : {
+                ...iconifyWithColors,
+                width: iconifyWithColors.width || '100%',
+                height: iconifyWithColors.height || '100%',
+            })
+        : iconifyWithColors;
+    // Check if we have any icon to render
+    const hasIcon = iconify || customSvg || customImage;
+    // Determine which CSS class to use based on icon type
+    const logoClassName = customImage ? styles_module_css_1.default.heroLogoImage : styles_module_css_1.default.heroLogo;
+    return (react_1.default.createElement("div", { ref: bannerRef, className: `${styles_module_css_1.default.heroBanner} ${!bannerFullWidth ? styles_module_css_1.default.heroBannerContained : ''}` },
+        enableDotCrossEffect && (react_1.default.createElement(DotCrossGrid_1.DotCrossGrid, { dotSize: dotCrossSize, gap: dotCrossGap, color: dotCrossColor, pointerRadius: pointerRadius, pointerInnerIntensity: pointerInnerIntensity, pointerOuterIntensity: pointerOuterIntensity, maxOpacity: maxOpacity, minOpacity: minOpacity, randomOpacity: randomOpacity, idleEnabled: idleEnabled, idleAreaWidth: idleAreaWidth, idleInterval: idleInterval, idleIntensity: idleIntensity })),
+        react_1.default.createElement("div", { className: styles_module_css_1.default.heroContent },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.heroTextContainer },
+                react_1.default.createElement("h1", { className: styles_module_css_1.default.heroTitle }, title),
+                bannerText && react_1.default.createElement("p", { className: styles_module_css_1.default.heroBannerText }, bannerText),
+                tagline && react_1.default.createElement("p", { className: styles_module_css_1.default.heroTagline }, tagline)),
+            hasIcon && (react_1.default.createElement("div", { className: styles_module_css_1.default.heroLogoContainer },
+                react_1.default.createElement(ThemedIcon_1.ThemedIcon, { iconify: iconifyWithSize, customSvg: customSvg, customImage: customImage, alt: `${title} icon`, className: logoClassName, supportsHover: false }))))));
+};
+exports.HeroBanner = HeroBanner;
+exports.default = exports.HeroBanner;
+//# sourceMappingURL=index.js.map

package/lib/components/HeroBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/HeroBanner/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/HeroBanner/styles.module.css

@@ -0,0 +1,204 @@
+.heroBanner {
+  position: relative;
+  /* Width set dynamically via JavaScript */
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  margin-top: -32px;
+  min-height: 280px;
+  background: var(--hero-background-color, var(--ifm-color-primary));
+  overflow: hidden;
+  padding: 3rem 2rem;
+  --hero-background-color: var(--ifm-color-primary);
+}
+
+/* Contained mode - stays within document flow */
+.heroBannerContained {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  width: 100% !important;
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .heroBanner {
+  --hero-background-color: var(--ifm-color-primary-darker);
+}
+
+.heroContent {
+  position: relative;
+  z-index: 4;
+  max-width: 1000px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 70% 30%;
+  gap: 2rem;
+  align-items: center;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* Text container */
+.heroTextContainer {
+  position: relative;
+  color: var(--ifm-font-color-base-inverse);
+  pointer-events: none;
+}
+
+.heroTitle {
+  position: relative;
+  font-size: 3rem;
+  font-weight: 800;
+  line-height: 1.2;
+  margin: 0 0 1rem 0;
+  color: #ffffff;
+  pointer-events: none;
+  z-index: 4;
+  filter: drop-shadow(0 0 20px var(--hero-background-color))
+    drop-shadow(0 0 40px var(--hero-background-color))
+    drop-shadow(0 0 60px var(--hero-background-color))
+    drop-shadow(2px 2px 2px #00000063);
+}
+
+.heroBannerText {
+  position: relative;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.4;
+  margin: 0 0 1.5rem 0;
+  color: rgba(255, 255, 255, 0.95);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  z-index: 4;
+  filter: drop-shadow(0 0 20px var(--hero-background-color))
+    drop-shadow(0 0 40px var(--hero-background-color))
+    drop-shadow(0 0 60px var(--hero-background-color))
+    drop-shadow(2px 2px 2px #00000063);
+}
+
+.heroTagline {
+  position: relative;
+  font-size: 1.125rem;
+  font-style: italic;
+  line-height: 1.6;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.9);
+
+  /* Truncate with ellipsis after 3 lines */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  z-index: 4;
+  filter: drop-shadow(0 0 20px var(--hero-background-color))
+    drop-shadow(0 0 40px var(--hero-background-color))
+    drop-shadow(0 0 60px var(--hero-background-color))
+    drop-shadow(2px 2px 2px #00000063);
+}
+
+/* Logo container */
+.heroLogoContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  pointer-events: none;
+}
+
+.heroLogo {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 200px;
+  object-fit: contain;
+  pointer-events: none;
+  z-index: 4;
+  filter: drop-shadow(0 0 20px var(--hero-background-color))
+    drop-shadow(0 0 40px var(--hero-background-color))
+    drop-shadow(0 0 60px var(--hero-background-color))
+    drop-shadow(2px 2px 2px #00000063);
+}
+
+/* Logo for custom images (PNG/JPEG) - no shadow, optimized sizing */
+.heroLogoImage {
+  position: relative;
+  max-width: 100%;
+  max-height: 200px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* Tablet (768px - 996px) */
+@media (max-width: 996px) {
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+  .heroBannerText {
+    font-size: 1.25rem;
+    -webkit-line-clamp: 2; /* Truncate after 2 lines on tablet */
+    line-clamp: 2;
+  }
+
+  .heroTagline {
+    font-size: 1rem;
+    -webkit-line-clamp: 2; /* Truncate after 2 lines on tablet */
+    line-clamp: 2;
+  }
+}
+
+/* Mobile (<576px) */
+@media (max-width: 576px) {
+  .heroBanner {
+    min-height: auto;
+    padding: 2rem 1rem;
+  }
+
+  .heroContent {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .heroTextContainer {
+    text-align: center;
+  }
+
+  .heroTitle {
+    font-size: 2rem;
+  }
+
+  .heroBannerText {
+    font-size: 0.95rem;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+  }
+
+  .heroTagline {
+    font-size: 1.125rem;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+  }
+
+  /* Show logo on mobile at smaller size, centered at top */
+  .heroLogoContainer {
+    order: -1;
+    min-height: 80px;
+  }
+
+  .heroLogo {
+    max-width: 80px;
+  }
+
+  .heroLogoImage {
+    max-width: 80px;
+  }
+}