Document ID : DARX-TECH-CAROUSEL-001 Title : Homepage Carousel and Mirror Portability Change Record Version : 1.0 Status : ACTIVE Date Created : 2026-05-27 Prepared by : PYB / Daralbeida Style : BPGP Department : TECH Classification: Internal KB Category : WEB-FRONTEND Filename : DARX_TECH_CAROUSEL_CHANGELOG_20260527.txt Related Docs : DAB-WEB-HP-SPEC-001 OUTLINE -------------------------------------------------------------------------------- 1. Purpose and Scope 2. Summary of Work Completed 3. Navigation Defects Resolved 3.1 Click Capture by the Slider 3.2 Perceived Click Latency 4. Dots Assembly Redesign 4.1 Segmented Proportional Bar 4.2 Arrow Bookends 4.3 Upcoming Dot Treatment 4.4 Vertical Centering 5. Frame and Mat Treatment 5.1 Brown Mat and Gold Line 5.2 Inner Tile Face 5.3 Thin Line and Drop Shadow 6. Shimmer and Animation Timing 6.1 Foil Synchronization 6.2 Vertical Rail Shimmer 6.3 Pause Behavior 7. Mirror Portability Fixes 7.1 Hero Background Image 7.2 Cache Versioning 8. File Change Inventory 8.1 Files Edited 8.2 Files Created 8.3 Files Deleted 9. Technical Notes and Risks 10. Deployment Readiness 11. Acronyms 12. Glossary DOCUMENT CONTROL -------------------------------------------------------------------------------- ================================================================================ 1. PURPOSE AND SCOPE ================================================================================ This document records the engineering work performed on the Daralbeida consumer homepage on May 27, 2026. It covers the homepage key-cards carousel, with particular focus on the progression dots assembly, the framing and finish work applied to that assembly, two navigation defects that were diagnosed and fixed, and the mirror-portability corrections needed before deployment. The work was carried out in the development mirror. The scope is limited to the consumer homepage and its included partials, stylesheets, and scripts. It does not cover the back-office tools, knowledge-base viewers, or any hidden homepage sections, except where those are named as outstanding risks in Section 9. This record also inventories every file edited, created, or deleted during the session. See Section 8. ================================================================================ 2. SUMMARY OF WORK COMPLETED ================================================================================ The session delivered the following outcomes: - Resolved a defect where clicks on the carousel arrows and dots did nothing. - Removed the perceived lag between clicking a dot and seeing a response. - Reworked the progression dots into a framed, gilded assembly that matches the key-card frame. - Restyled the upcoming dots as an antique bronze patina to lift their finish. - Synchronized and slowed the gilded foil shimmer, and made the rail shimmer sweep vertically. - Vertically centered every piece of the assembly. - Fixed a hardcoded mirror path in the hero background image so the homepage is portable across the development and production mirrors. Detailed entries follow in Sections 3 through 7. The first item is described in Section 3.1. ================================================================================ 3. NAVIGATION DEFECTS RESOLVED ================================================================================ 3.1 CLICK CAPTURE BY THE SLIDER The dots assembly is lifted upward with a negative top margin so it tucks under the card. That lift placed the assembly inside the box of the slider element. The slider is a positioned element and the assembly bar was not, so by the CSS painting order the slider painted on top of the bar and absorbed every click on the arrows and dots. Programmatic clicks still worked, which masked the fault during earlier testing. The fix gives the assembly bar its own positioning and a higher stacking value, so it paints above the slider and receives clicks again. All arrows and dots were re-verified as clickable. 3.2 PERCEIVED CLICK LATENCY When a dot was clicked, the navigation routine first faded the current card out over roughly four-tenths of a second and only then updated the dot states and switched cards. The clicked dot therefore did not react for that whole interval, which read as lag. The fix adds an instant-feedback step at the start of the navigation routine. It lights up the clicked dot and updates the played and upcoming states at once, while the card keeps its slower cinematic cross-fade. ================================================================================ 4. DOTS ASSEMBLY REDESIGN ================================================================================ 4.1 SEGMENTED PROPORTIONAL BAR The dots form a single proportional bar. Each segment grows in proportion to its card dwell time, with a fixed minimum width and a fixed gap. Segment height encodes the card type. All corners are square. 4.2 ARROW BOOKENDS The previous and next arrows sit as bookends at the two ends of the bar. Each arrow is slightly larger than before, carries a thin black border to match the dots, and stays visible at all times. Clicking an arrow restarts the show in addition to moving one step. The back arrow reads gold; the forward arrow reads the upcoming colour until the last slide, where it also turns gold. 4.3 UPCOMING DOT TREATMENT The upcoming, unplayed dots were changed from a flat brown to an antique bronze patina, so they read as the same gilded metal lying dormant rather than as an unfinished element. See Section 5 for the surrounding frame and Section 6.3 for why these dots carry no foil. 4.4 VERTICAL CENTERING Every piece of the assembly is vertically centered on a common midline: both arrows, the dots of all heights, and the faint rail behind them. The active segment scales from its centre so it never drifts off the line. ================================================================================ 5. FRAME AND MAT TREATMENT ================================================================================ 5.1 BROWN MAT AND GOLD LINE The whole assembly sits on a framed plaque that mirrors the key-card frame: an espresso-brown mat, a thin outer gold line at the mat edge, and a layered float shadow so the plaque appears to hover above the hero. 5.2 INNER TILE FACE Inside the mat is a raised white tile face, ringed by the same gilded band used on the card tile and casting a real shadow onto the mat. The controls sit above this tile. The plaque is sized to the card width, so its left and right edges align with the card above it. 5.3 THIN LINE AND DROP SHADOW A thin gold line frames the dot strip itself, echoing the frame line around the card picture, and the strip carries a soft drop shadow so it reads as raised on the white tile. ================================================================================ 6. SHIMMER AND ANIMATION TIMING ================================================================================ 6.1 FOIL SYNCHRONIZATION The gilded foil sheen on the played dots, the arrows, and the rail previously ran at different speeds and sweep distances, so they drifted out of phase. They were unified to a single duration and sweep distance and now shimmer together. 6.2 VERTICAL RAIL SHIMMER The shimmer on the faint rail behind the dots was changed to sweep vertically, top to bottom, while the dot and arrow sheens continue to sweep horizontally. A static horizontal mask feathers the rail at its left and right ends. 6.3 PAUSE BEHAVIOR The foil shimmer is a continuous animation and keeps moving while the slideshow is paused; only the active image zoom and the fill timing freeze on pause. The shimmer duration was also slowed for a calmer, more refined effect. ================================================================================ 7. MIRROR PORTABILITY FIXES ================================================================================ 7.1 HERO BACKGROUND IMAGE The hero background photo was defined in a stylesheet with a hardcoded mirror path, which would have failed on the production mirror. Because a relative path inside a CSS custom property mis-resolves against the consuming stylesheet, the value is now injected inline by the hero partial using the SITE_BASE constant, which always resolves to the current mirror. The image was confirmed to load. 7.2 CACHE VERSIONING The cache-bust token on the homepage stylesheet and script links was advanced with each change so browsers refetch the updated assets. It ended the session at token v=052715. ================================================================================ 8. FILE CHANGE INVENTORY ================================================================================ 8.1 FILES EDITED The following files were modified during the session: - _devt/index.php — SITE_BASE wiring on asset links; cache-bust token advanced to v=052715. - _devt/api/elements/element_webpage_home_carousel_key_cards.php — instant dot-click feedback added to the navigation routine. - _devt/api/elements/element_webpage_home_hero.php — hero image variable set inline from SITE_BASE. - _devt/api/elements/element_webpage_home_header.php — SITE_BASE on links and script source. - _devt/api/elements/element_webpage_home_footer.php — SITE_BASE on the sub-brand link. - _devt/css/elements/element_webpage_home_carousel_key_cards.css — the bulk of the assembly work: square gradients, antique bronze patina, plaque frame and mat, thin gold line, drop shadow, vertical centering, synced and slowed foil, vertical rail shimmer, and the click-capture stacking fix. - _devt/css/webpage_home.css — removed the hardcoded mirror path from the hero image variable. - _devt/css/elements/element_webpage_home_header.css — square-corner and finish adjustments. - _devt/css/elements/element_webpage_home_fx.css — square-corner adjustments and sub-brand visibility. - _devt/css/modules/module_lang_switcher.css — square-corner adjustments. - _devt/js/module_lang_switcher.js — open-on-click behaviour and no-cache fetch. - _devt/js/homepage_fx.js — reveal-handler exclusions. - _devt/img/kc/keycard_content.csv — mirror-relative image paths. - _devt/img/kc/keycard_content_README.txt — authoring-guide updates. 8.2 FILES CREATED The following files were added: - _devt/api/_base.php — defines the SITE_BASE mirror-root constant. - _devt/_revert/ — timestamped backup copies of edited files, kept for rollback. 8.3 FILES DELETED No deployable files were deleted. A temporary launch configuration at the path .claude/launch.json was created and removed repeatedly as a transient preview-verification artifact; it is not part of the deployable codebase. ================================================================================ 9. TECHNICAL NOTES AND RISKS ================================================================================ Two CSS behaviours drove defects this session and are worth remembering: - A positioned element paints above a non-positioned sibling regardless of source order. This caused the click-capture defect in Section 3.1. - A relative URL inside a CSS custom property resolves against the stylesheet that consumes the variable, not the one that defines it. This caused the hero-image regression in Section 7.1. Outstanding risks before enabling more of the page: - Hidden homepage sections, including the pillar-cards partial and the section navigation module, still contain hardcoded mirror paths. They are inert while hidden but must be corrected before they are enabled on production. - The assembly does not yet shrink for very narrow viewports; below roughly the card width the plaque overflows and the arrows can fall off-screen. - Foil and shimmer animations are disabled under reduced-motion preferences by design. ================================================================================ 10. DEPLOYMENT READINESS ================================================================================ The actively rendered homepage, meaning the hero and the key-cards carousel with its header and footer, is mirror-portable and ready to publish. All asset and link paths in those files resolve through SITE_BASE, and no production mirror folder is hardcoded in the rendered output. Two steps remain for a clean deployment: - Synchronize the edited files from the development mirror to the production mirror, since production is served from the production mirror. - Correct the hardcoded paths in the hidden sections noted in Section 9 before those sections are turned on. ================================================================================ 11. ACRONYMS ================================================================================ The following acronyms appear in this document: Acronym Expansion ──────── ──────────────────────────────────────────── BPGP Bullet-Proof Ground-Plane CSS Cascading Style Sheets CSV Comma-Separated Values DOM Document Object Model HTML HyperText Markup Language JS JavaScript KB Knowledge Base MAMP Apache, MySQL, and PHP local server stack PHP PHP: Hypertext Preprocessor SVG Scalable Vector Graphics URL Uniform Resource Locator ================================================================================ 12. GLOSSARY ================================================================================ Key terms used in this document: Term Definition ───────────────── ────────────────────────────────────────────────────── Cache-bust token Asset URL suffix that forces a fresh browser fetch. Foil sheen Animated gilded highlight that sweeps across gold. Keycard A single slide in the homepage carousel. Ken Burns Slow zoom and pan applied to the active image. Mat Brown plate that frames the raised tile. Mirror A site deployment copy: development or production. Plaque The framed container holding the dots assembly. SITE_BASE PHP constant for the current mirror root path. Tile Raised inner face that the content sits upon. Upcoming dot An unplayed segment of the progression bar. DOCUMENT CONTROL Document ID : DARX-TECH-CAROUSEL-001 Title : Homepage Carousel and Mirror Portability Change Record Version : 1.0 Status : ACTIVE Style : BPGP Department : TECH Date Created : 2026-05-27 Date Revised : 2026-05-27 Last Modified : 2026-05-27 KB Category : WEB-FRONTEND Filename : DARX_TECH_CAROUSEL_CHANGELOG_20260527.txt Review Cycle : On next homepage carousel or mirror-structure change. Retention : Life of the homepage codebase plus one year. Owner : PYB / Daralbeida Distribution : Daralbeida web engineering and site maintainers. COMPLIANCE : Rendered homepage paths resolve via SITE_BASE, not hardcoded. Revision History: Ver Date Summary of Changes 1.0 2026-05-27 Initial issue END OF DOCUMENT