/* ===================================================================== HOMEPAGE CARDS: SUNBURST MODULE File: /css/homepage-cards/sunburst.css A reusable rotating sunray effect for homepage postcard canvases. Attach to any card via class: hp-sunburst hp-sunburst--[colour] TWO MODES: - Default: Subtle rays on dark background with radial vignette fade - Vivid: Full-blast rays on coloured background (add hp-sunburst--vivid) TECHNIQUE CREDITS: - Border-wedge bowtie shapes derived from Akash Nimare (CodePen: DojEdg) - Colour density concept informed by Emin Gasimoff (CodePen: armdRp) - Centre glow overlay inspired by Eduard Mayer's SVG radialGradient sunrise - Rebuilt with absolute-centred positioning for full 360deg rotation, and CSS custom properties for reusable colour/speed control ===================================================================== */ /* ===================================================================== !! POSTMORTEM — DO NOT DELETE THIS COMMENT BLOCK !! This sunburst module took 5 attempts to get working. The lessons below prevent repeating the same mistakes. Keep this comment permanently in the file. CRITICAL RULES: 1. border-width does NOT accept percentages — always use px. Using 50% silently fails and renders zero-size rays. 2. The Akash Nimare block-stacking technique (display:block + padding-top + negative margin) places ray convergence at the LEFT EDGE (x=0) of the disc, NOT the centre. This is fine for tiny rotations (20deg) but BREAKS at 360deg — the rays orbit off-screen around the wrong axis. 3. For full 360deg rotation, rays MUST use position:absolute at left:50% top:50% with negative margins equal to half the border dimensions. This pins convergence to disc centre. 4. transform-origin MUST match the ray convergence point. If rays converge at centre, origin must be center center. 5. 20deg keyframes are for fast seamless loops only (the original reference spins 20deg in 2s). Slow speeds need 360deg or the rotation is imperceptible. 6. will-change:transform on the layer enables GPU acceleration for the large (3000px) rotating element. 7. Ray thickness = tan(half-angle) * border-side-width. For 12 bowties at 15deg intervals, equal ray/gap width requires border-top = tan(7.5deg) * 1500 = ~198px. The negative top margin MUST always equal the border-top value. !! DO NOT DELETE THIS COMMENT BLOCK !! ===================================================================== */ /* ===================================================================== SECTION 1: SUNBURST ENGINE (The Core Mechanism) ===================================================================== */ /* CodeNumber SB.1.1 — Custom Property Defaults */ .hp-sunburst { --sun-ray: #d4952a; --sun-bg: #1a1c20; --sun-card-bg: #1a1c20; --sun-speed: 45s; --sun-opacity: 0.35; --sun-haze-mid: rgba(225, 140, 20, 0.25); --sun-haze-edge: rgba(200, 100, 10, 0.45); } /* CodeNumber SB.1.2 — The Ray Container (The Disc) 3000x3000px square disc, centred on card via negative margins. Rays are absolutely positioned inside at the disc's true centre. Full 360deg rotation with GPU acceleration. */ .hp-sunburst .hp-sunburst-layer { position: absolute; width: 3000px; height: 3000px; top: 50%; left: 50%; margin: -1500px 0 0 -1500px; z-index: 1; pointer-events: none; opacity: var(--sun-opacity); animation: hp-sunburst-spin var(--sun-speed) linear infinite; transform-origin: center center; will-change: transform; } /* CodeNumber SB.1.3 — Individual Ray Wedges Position: absolute at 50%/50% with negative margins = half border size. This centres every bowtie on the disc's exact midpoint. 12 bowties at 15deg intervals = 24 visible stripes. For EQUAL width rays and gaps: border-top = tan(7.5deg) * 1500 = 198px margin-top MUST equal border-top (negative). */ .hp-sunburst .hp-ray { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-style: solid; border-width: 120px 1500px; border-color: transparent var(--sun-ray); margin: -120px 0 0 -1500px; } /* CodeNumber SB.1.4 — Ray Rotation Positions 12 rays at 15deg intervals. Each bowtie = 2 visible triangles, giving 24 evenly-spaced ray stripes around 360deg. */ .hp-sunburst .hp-ray:nth-child(1) { transform: rotate(0deg); } .hp-sunburst .hp-ray:nth-child(2) { transform: rotate(15deg); } .hp-sunburst .hp-ray:nth-child(3) { transform: rotate(30deg); } .hp-sunburst .hp-ray:nth-child(4) { transform: rotate(45deg); } .hp-sunburst .hp-ray:nth-child(5) { transform: rotate(60deg); } .hp-sunburst .hp-ray:nth-child(6) { transform: rotate(75deg); } .hp-sunburst .hp-ray:nth-child(7) { transform: rotate(90deg); } .hp-sunburst .hp-ray:nth-child(8) { transform: rotate(105deg); } .hp-sunburst .hp-ray:nth-child(9) { transform: rotate(120deg); } .hp-sunburst .hp-ray:nth-child(10) { transform: rotate(135deg); } .hp-sunburst .hp-ray:nth-child(11) { transform: rotate(150deg); } .hp-sunburst .hp-ray:nth-child(12) { transform: rotate(165deg); } /* CodeNumber SB.1.5 — Radial Fade Overlay (hidden in vivid mode) */ .hp-sunburst .hp-sunburst-fade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; background: radial-gradient( ellipse at center, transparent 20%, var(--sun-bg) 75% ); } /* CodeNumber SB.1.6 — Centre Glow Overlay Inspired by Eduard Mayer's SVG radialGradient sunrise effect. Soft white radial bloom at ray convergence point. Brightens and expands on hover. */ .hp-sunburst .hp-sunburst-glow { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient( circle at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70% ); transition: all 0.6s ease; } .hp-sunburst:hover .hp-sunburst-glow { background: radial-gradient( circle at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70% ); width: 600px; height: 600px; margin: -300px 0 0 -300px; } /* CodeNumber SB.1.7 — Rotation Keyframe (full 360deg) */ @keyframes hp-sunburst-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* CodeNumber SB.1.8 — Edge Haze Overlay Inspired by Eduard Mayer's gradient screen effect. Warm orange vignette that pushes inward from card edges on hover, creating a hazy atmospheric glow. */ .hp-sunburst .hp-sunburst-haze { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; background: radial-gradient( ellipse at center, transparent 30%, var(--sun-haze-mid) 65%, var(--sun-haze-edge) 100% ); } .hp-sunburst:hover .hp-sunburst-haze { opacity: 1; } /* ===================================================================== SECTION 2: VIVID MODE Full-blast rays on a coloured background. No vignette. Add class: hp-sunburst--vivid ===================================================================== */ /* CodeNumber SB.2.0 — Vivid Overrides */ .hp-sunburst.hp-sunburst--vivid { background: var(--sun-card-bg) !important; border-color: transparent !important; --sun-opacity: 1; } .hp-sunburst.hp-sunburst--vivid .hp-sunburst-fade { display: none; } .hp-sunburst.hp-sunburst--vivid:hover { border-color: transparent !important; } /* ===================================================================== SECTION 3: COLOUR VARIANTS sun-ray = the darker visible stripe colour sun-card-bg = the card background in vivid mode (also the "gap" colour) ===================================================================== */ /* SB.3.1 — Amber */ .hp-sunburst--amber { --sun-ray: #d4952a; --sun-card-bg: #f2c45c; --sun-haze-mid: rgba(225, 140, 20, 0.25); --sun-haze-edge: rgba(200, 100, 10, 0.45); } /* SB.3.2 — Crimson */ .hp-sunburst--crimson { --sun-ray: #8b2020; --sun-card-bg: #d04a4a; --sun-haze-mid: rgba(180, 30, 30, 0.25); --sun-haze-edge: rgba(140, 20, 20, 0.45); } /* SB.3.3 — Arcane */ .hp-sunburst--arcane { --sun-ray: #4a1880; --sun-card-bg: #7e3cad; --sun-haze-mid: rgba(80, 20, 140, 0.25); --sun-haze-edge: rgba(50, 10, 100, 0.45); } /* SB.3.4 — Venom */ .hp-sunburst--venom { --sun-ray: #1a5e1a; --sun-card-bg: #4a9e4a; --sun-haze-mid: rgba(20, 80, 20, 0.25); --sun-haze-edge: rgba(10, 50, 10, 0.45); } /* SB.3.5 — Frost */ .hp-sunburst--frost { --sun-ray: #1050a0; --sun-card-bg: #3a8ad4; --sun-haze-mid: rgba(15, 60, 150, 0.25); --sun-haze-edge: rgba(10, 40, 120, 0.45); } /* SB.3.6 — Void */ .hp-sunburst--void { --sun-ray: #1e1e22; --sun-card-bg: #333338; --sun-haze-mid: rgba(0, 0, 0, 0.2); --sun-haze-edge: rgba(0, 0, 0, 0.4); } /* SB.3.7 — Golden Sun */ .hp-sunburst--golden { --sun-ray: #c49520; --sun-card-bg: #f0d060; --sun-haze-mid: rgba(200, 150, 30, 0.25); --sun-haze-edge: rgba(170, 120, 10, 0.45); } /* SB.3.8 — Peach */ .hp-sunburst--peach { --sun-ray: #d4854a; --sun-card-bg: #f2c9a0; --sun-haze-mid: rgba(210, 130, 70, 0.25); --sun-haze-edge: rgba(180, 100, 40, 0.45); } /* ===================================================================== SECTION 4: SPEED MODIFIERS ===================================================================== */ /* CodeNumber SB.4.1 */ .hp-sunburst--slow { --sun-speed: 90s; } .hp-sunburst--fast { --sun-speed: 20s; } .hp-sunburst--crawl { --sun-speed: 180s; } /* ===================================================================== SECTION 5: VIVID MODE TEXT & BUTTON UTILITIES Use sb-text-dark / sb-btn-dark on bright backgrounds (amber, golden, peach). Use sb-text-light / sb-btn-light on dark backgrounds (crimson, arcane, frost). ===================================================================== */ /* CodeNumber SB.5.1 — Dark text on bright vivid backgrounds */ .hp-sunburst--vivid .sb-text-dark { color: rgba(60, 30, 0, 0.65); transition: all 0.4s ease; } .hp-sunburst--vivid .sb-text-dark:hover { color: rgba(40, 15, 0, 0.85); text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 220, 100, 0.25); } /* CodeNumber SB.5.2 — Light text on dark vivid backgrounds */ .hp-sunburst--vivid .sb-text-light { color: rgba(255, 255, 255, 0.85); transition: all 0.4s ease; } .hp-sunburst--vivid .sb-text-light:hover { color: rgba(255, 255, 255, 1); text-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.2); } /* CodeNumber SB.5.3 — Button on bright vivid backgrounds */ .hp-sunburst--vivid .sb-btn-dark { background: rgba(60, 30, 0, 0.55); color: #ffffff !important; border: 2px solid rgba(60, 30, 0, 0.15); padding: 1rem 2.5rem; border-radius: 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .hp-sunburst--vivid .sb-btn-dark:hover { background: rgba(40, 15, 0, 0.7); box-shadow: 0 0 25px rgba(255, 220, 100, 0.4), 0 0 50px rgba(255, 180, 50, 0.2), 0 6px 20px rgba(0, 0, 0, 0.15); transform: translateY(-3px); border-color: rgba(255, 220, 100, 0.35); } /* CodeNumber SB.5.4 — Button on dark vivid backgrounds */ .hp-sunburst--vivid .sb-btn-light { background: rgba(255, 255, 255, 0.12); color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.25); padding: 1rem 2.5rem; border-radius: 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .hp-sunburst--vivid .sb-btn-light:hover { background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.3); transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.45); } /* ===================================================================== SECTION 6: RESPONSIVE ADJUSTMENTS ===================================================================== */ /* CodeNumber SB.6.1 */ @media (max-width: 768px) { .hp-sunburst .hp-sunburst-layer { width: 2000px; height: 2000px; margin: -1000px 0 0 -1000px; } .hp-sunburst .hp-ray { border-width: 80px 1000px; margin: -80px 0 0 -1000px; } .hp-sunburst .hp-sunburst-glow { width: 300px; height: 300px; margin: -150px 0 0 -150px; } }