-------------------------------------------------------------------------------- DOCUMENT CONTROL (HEADER) -------------------------------------------------------------------------------- Document ID : DARX_TECH_INV_001 Title : Hero and Overlay Element Inventory Current Live Properties, Values, and Cycling Content Version : 1.0 Status : Active Classification : Internal — Reference Date Created : 2026-05-23 Department : TECH Style : BPGP Owner : PYB / Daralbeida Group : DARALBEIDA — TECHNOLOGY / WEB PLATFORM -------------------------------------------------------------------------------- OUTLINE -------------------------------------------------------------------------------- 1. Purpose and Scope 2. Overlay Elements 3. Cycling Engine 4. Cycling Content Matrix 5. Containers and Background 6. Observations 7. Acronyms 8. Glossary 9. Document Control ================================================================================ 1. PURPOSE AND SCOPE ================================================================================ This document records the current live properties, values, and text content of every element in the homepage hero and its cycling overlay. Values were read directly from the hero element file, its style sheet, and the cycle logic in the homepage script, as of May 23, 2026. Token resolution used throughout: gold is B8832A, the display family is Cormorant Garamond, the mono family is DM Mono, ivory is F6F1E7, and the dark brand color is 1C1410. ================================================================================ 2. OVERLAY ELEMENTS ================================================================================ The glass overlay box stacks its children vertically. The visible order is B, C, D, E, F, G, then A. -------------------------------------------------------------------------------- 2.1 Element B, Large Cycling Word -------------------------------------------------------------------------------- Selector ov-main, nine instances. Cycles every step. Family Cormorant, size 28px, weight 500, spacing 0.06em. Color rgba(246,241,231,0.97). Line height 1.0. Container minimum height 60px. Flanking gold hairlines fade in with the active state. Opacity moves from 0 to 1 over 0.90s. -------------------------------------------------------------------------------- 2.2 Element C, Cycling Verb -------------------------------------------------------------------------------- Selector ov-verb, nine instances. Cycles every step. Family DM Mono, size 20px, weight 400, italic, spacing 0.04em. Color gold B8832A. Container minimum height 36px. Opacity 0 to 1 over 0.90s. -------------------------------------------------------------------------------- 2.3 Element D, Cycling Sub-Tagline -------------------------------------------------------------------------------- Selector ov-subtag, nine instances. Cycles every step. Family Cormorant, size 28px, weight 300. Color rgba(246,241,231,0.75). Line height 1.70. Container minimum height 90px. Opacity over 1.17s, so it trails the verb. A text-transform of capitalize is set; see Section 6, sub-section 6.1. -------------------------------------------------------------------------------- 2.4 Element E, Botanical -------------------------------------------------------------------------------- Selector hero-botanical. A decorative olive-branch vector, width 56px, centered. Gold stroke, draw-on animation from 0.30s to 1.25s. Does not cycle. -------------------------------------------------------------------------------- 2.5 Element F, Gold Rule -------------------------------------------------------------------------------- Selector hero-rule. An ornamental line, diamond, line. Width 160px, height 10px, diamond 5px gold at 45 degrees, line color rgba(184,131,42,0.55). -------------------------------------------------------------------------------- 2.6 Element G, Permanent Tagline -------------------------------------------------------------------------------- Selector ov-tagline. Never cycles. Family Cormorant, size 28px, weight 400, italic. Color rgba(246,241,231,0.52). Line height 1.70. Text: daralbeida exists to protect, elevate, and share the excellence of Moroccan terroir. -------------------------------------------------------------------------------- 2.7 Element A, Indicator Strip -------------------------------------------------------------------------------- Selector ov-indicator, three instances, with dot separators. The active word changes every three steps. Family DM Mono, size 16px, weight 500, spacing 0.20em, uppercase. Inactive color rgba(246,241,231,0.28), active color gold B8832A. Links: index 0 to /_devt/00, index 1 to /_devt/01, index 2 to /_devt/02. The dot separator is 16px wide at 14px size. ================================================================================ 3. CYCLING ENGINE ================================================================================ The cycle is driven by the homepage script, section nine. Parameter Value ------------- ----------------------------------------------- CYCLE_MS 5000 milliseconds per step CYCLE_START 1400 milliseconds before first activation Each step removes the active state from all four sets and adds it to the element whose data index matches. The index math is as follows. a. Element B advances by index modulo nine, every step. b. Element C advances by index modulo nine, every step. c. Element D advances by index modulo nine, every step. d. Element A advances by floor of index over three, modulo three. The full loop is nine steps, which is 45 seconds, then it repeats. Under a reduced-motion preference the transitions are disabled and the cycle still runs as an instant switch. ================================================================================ 4. CYCLING CONTENT MATRIX ================================================================================ Each step sets the active pillar A, the main word B, the verb C, and the sub-tagline D. Step 0. Pillar Authentic. Main word Authentic. Verb Taste. Sub-tagline: Pure Moroccan olive oil. Nothing else. Step 1. Pillar Authentic. Main word Authentic. Verb Trust. Sub-tagline: Every drop, traceable to its grove. Step 2. Pillar Authentic. Main word Authentic. Verb Savor. Sub-tagline: Real flavor, honestly sourced. Step 3. Pillar Artisanal. Main word Artisanal. Verb Craft. Sub-tagline: Cold-pressed in small batches. Step 4. Pillar Artisanal. Main word Artisanal. Verb Cherish. Sub-tagline: Made by hands that know the grove. Step 5. Pillar Artisanal. Main word Artisanal. Verb Elevate. Sub-tagline: Artisan craft in every bottle. Step 6. Pillar Ancestral. Main word Ancestral. Verb Inherit. Sub-tagline: Centuries of Moroccan tradition. Step 7. Pillar Ancestral. Main word Ancestral. Verb Discover. Sub-tagline: An ancient harvest, now yours. Step 8. Pillar Ancestral. Main word Ancestral. Verb Share. Sub-tagline: The heart of the Mediterranean diet. ================================================================================ 5. CONTAINERS AND BACKGROUND ================================================================================ -------------------------------------------------------------------------------- 5.1 Overlay Box -------------------------------------------------------------------------------- Selector overlay. Background rgba(5,3,1,0.82), a dark glass. Border 5px rgba(184,131,42,0.14). Outline 1px rgba(255,255,255,0.35), offset 4px. Child gap 20px. A breathe animation runs 5s ease-in-out with a 3s delay, infinite, pulsing the gold border. -------------------------------------------------------------------------------- 5.2 Hero Section -------------------------------------------------------------------------------- Selector hero. Minimum height 100vh. The photo layer runs a Ken Burns scale from 1.00 to 1.50 over 30s, blur 0px. The color stack is an ivory fade from 62 to 100 percent, a terracotta wash at alpha 0.03, and a dark vignette at 0.45, 0.30, and 0.10 fading to transparent. ================================================================================ 6. OBSERVATIONS ================================================================================ -------------------------------------------------------------------------------- 6.1 Root Cause of the Title-Case Problem -------------------------------------------------------------------------------- Element D carries a text-transform of capitalize in the style sheet. The source sentences are written in correct sentence case, but capitalize forces an uppercase first letter on every word, producing Centuries Of Moroccan Olive Culture, Carried Forward With Discipline. The fix is to remove the capitalize transform from the sub-tagline. The text already carries the correct casing. -------------------------------------------------------------------------------- 6.2 Script Comment Versus Code -------------------------------------------------------------------------------- The cycle section comment states that B and A advance through three items, but the code advances B by index modulo nine. The visible result is correct only because the first three main words are Authentic, the next three Artisanal, and the last three Ancestral. The comment should be corrected. -------------------------------------------------------------------------------- 6.3 Two Display Lines Stacked -------------------------------------------------------------------------------- Element D and Element G are both 28px Cormorant and sit close together, competing visually. If the redesign direction is adopted, reduce the size or weight of G so it recedes beneath D. ================================================================================ 7. ACRONYMS ================================================================================ COA Certificate of Analysis CSS Cascading Style Sheets JS JavaScript ONSSA Office National de Securite Sanitaire des Produits Alimentaires SGS Societe Generale de Surveillance (inspection company) TM Trademark ================================================================================ 8. GLOSSARY ================================================================================ Active State The class added by the cycle script to the element that should be visible at the current step. Removing it returns opacity to zero. Cycle Step One interval of the overlay timer. At each step the script updates the four cycling sets to their next values. Ken Burns A slow zoom applied to a still image to add gentle motion. Here a scale from 1.00 to 1.50 over thirty seconds. Scrim A semi-transparent dark layer over the photo that raises the contrast of the overlay text. Sub-Tagline The cycling sentence, element D, that describes the active pillar. ================================================================================ 9. DOCUMENT CONTROL ================================================================================ Document ID: DARX-TECH-INV-001 Title: Hero and Overlay Element Inventory Version: 1.0 Status: Active Date Created: 2026-05-23 Prepared by: PYB / Daralbeida Style: BPGP Department: TECH Classification: Internal — Reference Related Docs: DAB-WEB-HP-MAP-001 Last Modified: 2026-05-23 Review Cycle: On any change to the hero element or its style or script Retention: Duration of the daralbeida.com hero Owner: PYB / Daralbeida Distribution: Internal COMPLIANCE: Values reflect a point-in-time read. Reconfirm against the live files before acting on any value. -------------------------------------------------------------------------------- END OF DOCUMENT — DARX-TECH-INV-001 --------------------------------------------------------------------------------