-------------------------------------------------------------------------------- Document ID : DAB-WEB-HP-SPEC-001 Title : Daralbeida Homepage — Site Specification, Component Inventory, Tuning System, and Deployment Reference Version : 1.0 Status : ACTIVE Date Created : 2026-05-21 Prepared by : PYB / Daralbeida Style : BPGP Department : WEB Classification: Internal — Operational Reference Related Docs : darx_style_master.css, darx_tokens.css, 20260512_DARX_STRAT_PLATFORM_VISION_001.TXT, DARX-COMM-BPGP-001.txt -------------------------------------------------------------------------------- OUTLINE -------------------------------------------------------------------------------- 1. Purpose and Scope 2. Site Identity and Deployment Environment 3. Page Sections in Order 4. File Inventory 5. CSS Architecture and Load Order 6. Tuning System — CSS Custom Properties 7. Centralized Data — Single Sources of Truth 8. Component Descriptions 9. Inline Script Inventory 10. Visual FX Layer 11. Deployment Protocol 12. Known Limitations and Pending Work 13. Acronyms 14. Glossary 15. Document Control ================================================================================ 1. PURPOSE AND SCOPE ================================================================================ This document is the authoritative operational reference for the Daralbeida homepage as built and deployed in the _devt development environment during May 2026. It inventories every file, describes every page section, documents the CSS tuning system, and establishes the centralized data sources that govern visual and brand consistency across deployments. This document applies to the _devt mirror only. Production deployment follows the same architecture but occupies public_html/ without the _devt/ prefix. See Section 11 for deployment protocol. Any AI system, contractor, or team member modifying the homepage must read this document before making changes. Changes to centralized token files affect the entire page; they must be verified across all sections before deployment. This document does not govern the business plan HTML, BI dashboard, document viewer, quiz, producer intake form, or any other page hosted under daralbeida.com. Those pages have separate specifications. ================================================================================ 2. SITE IDENTITY AND DEPLOYMENT ENVIRONMENT ================================================================================ HOSTING Hosting provider: GoDaddy Server type: Apache shared hosting, cPanel Operating system: Linux (case-sensitive file paths) Root directory: public_html/ DEPLOYMENT MIRRORS Mirror Path Purpose --------------------------------------------------------------- Development public_html/_devt/ All active development Production public_html/ Live public site Both mirrors are structurally identical. All paths within each mirror are relative — no leading slash — so either mirror is self-contained and deployable by extracting the zip at the server root. ENTRY POINT The homepage entry point is index.php in the mirror root. It assembles the page by including PHP elements and loading CSS in the correct order. No other file serves as a homepage entry point. DOMAIN AND PATHS Primary domain: daralbeida.com Dev mirror URL: daralbeida.com/_devt/ Hero image path: /_devt/img/moroccan_table.png (absolute path used in CSS; must be updated to /img/moroccan_table.png before production deployment) LANGUAGES SUPPORTED English (default), French, Spanish, Darija (Arabic script). Language switching is handled client-side via module_lang_switcher.php and a JSON translation file. The lang switcher is loaded as a PHP module and its CSS is loaded as a module stylesheet. ================================================================================ 3. PAGE SECTIONS IN ORDER ================================================================================ The homepage renders the following sections from top to bottom. Each section is produced by one or more PHP elements included from index.php. Position Section Element File --------------------------------------------------------------- 1 Header element_webpage_home_header.php 2 Hero element_webpage_home_hero.php 3 Triptych Band element_webpage_home_cards.php 4 Manifesto element_webpage_home_cards.php 5 Three Pillar Cards element_webpage_home_cards.php 6 Signup element_webpage_home_cards.php (includes module_forms_sign_up.php) 7 Chef Carousel element_webpage_home_cards.php 8 People Who Chose Morocco element_webpage_home_cards.php 9 Footer element_webpage_home_footer.php Sections 3 through 8 are all produced by element_webpage_home_cards.php, which is the most complex element on the page. Each sub-section within it is controlled by a PHP visibility variable (e.g., $show_cards, $show_story). Section descriptions and tuning locations are detailed in Section 8. ================================================================================ 4. FILE INVENTORY ================================================================================ 4.1 PHP ENTRY POINT --------------------------------------------------------------- File Path (relative to mirror root) --------------------------------------------------------------- index.php index.php 4.2 PHP ELEMENTS --------------------------------------------------------------- Elements are partial page templates. Each element is a self-contained HTML fragment. They are included by index.php in page-section order. File Path --------------------------------------------------------------- element_webpage_home_header.php api/elements/ element_webpage_home_hero.php api/elements/ element_webpage_home_cards.php api/elements/ element_webpage_home_footer.php api/elements/ 4.3 PHP MODULES --------------------------------------------------------------- Modules are reusable functional components included by elements. File Path Included by --------------------------------------------------------------- module_forms_sign_up.php api/modules/ cards element module_lang_switcher.php api/modules/ header element 4.4 CSS FILES --------------------------------------------------------------- Listed in load order (see Section 5 for load order rules). File Path --------------------------------------------------------------- darx_tokens.css css/ module_lang_switcher.css css/modules/ webpage_home.css css/ element_webpage_home_header.css css/elements/ element_webpage_home_hero.css css/elements/ element_webpage_home_cards.css css/elements/ element_webpage_home_footer.css css/elements/ element_webpage_home_fx.css css/elements/ module_forms_sign_up.css css/modules/ 4.5 JAVASCRIPT FILES --------------------------------------------------------------- File Path Loading --------------------------------------------------------------- homepage_fx.js js/ defer attribute on script tag 4.6 IMAGE FILES --------------------------------------------------------------- File Path Purpose --------------------------------------------------------------- moroccan_table.png img/ Hero section background photo favicon.ico img/ Browser tab icon (16px + 32px) favicon.svg img/ Scalable browser tab icon favicon-192.png img/ Android home screen icon apple-touch-icon.png img/ iOS home screen icon (180px) 4.7 ERROR PAGES --------------------------------------------------------------- Error pages live at public_html/ root (not inside _devt/). They have their own minimal CSS folder. htaccess ErrorDocument directives point to /403.html, /404.html, /500.html, /503.html. ================================================================================ 5. CSS ARCHITECTURE AND LOAD ORDER ================================================================================ CSS LOAD ORDER IS MANDATORY. Loading files in any other sequence will produce visual breakage. The order in index.php is: 1. css/darx_tokens.css Global brand tokens — colors, typography families, spacing constants. Defines all --var-name custom properties used site-wide. Must load first; everything else depends on it. 2. css/modules/module_lang_switcher.css Lang switcher trigger and dropdown styling. Loaded early because the switcher is in the header and must render before scroll events. 3. css/webpage_home.css Page-level tokens and body defaults. Defines --section-padding-h, --hero-image path, scrollbar-gutter, and other page-scope variables. Depends on darx_tokens.css. Must precede all element CSS. 4. css/elements/element_webpage_home_header.css Header styles. Depends on tokens. Loaded before hero to prevent layout shift during initial paint. 5. css/elements/element_webpage_home_hero.css Hero section styles including tuning panel (§0), hero overlay, Ken Burns animation, triptych (now removed to cards CSS), and stagger animation keyframes. 6. css/elements/element_webpage_home_cards.css The largest CSS file. Contains styles for: triptych band, manifesto, pillar cards, signup, chef carousel, and celebrity strip. Also contains all sub-section tuning panels. 7. css/elements/element_webpage_home_footer.css Footer styles. 8. css/elements/element_webpage_home_fx.css Visual effects layer. Must load last among element CSS files so FX overrides do not conflict with base element styles. Contains: scroll progress bar, scroll-aware header, parallax, and pillar entrance animations. 9. css/modules/module_forms_sign_up.css Signup form styles. Self-loading: included by the module PHP. Relies on tokens from darx_tokens.css being already in scope. SEPARATION OF CONCERNS darx_tokens.css Brand constants — change here to change globally webpage_home.css Page scope — hero image path, page padding element_*.css Section scope — layout, typography, spacing module_*.css Component scope — reusable UI components element_*_fx.css Effects scope — animations, transitions only ================================================================================ 6. TUNING SYSTEM — CSS CUSTOM PROPERTIES ================================================================================ Every section of the page has a tuning panel: a :root block at the top of the relevant CSS section containing CSS custom properties (--variable-name). Changing a value in the tuning panel changes it everywhere that property is used. No other changes are needed. THE RULE: Never hard-code a value that is controlled by a tuning panel. If a pixel value, opacity, color, or timing appears more than once, it belongs in the tuning panel. 6.1 GLOBAL TOKEN LOCATIONS --------------------------------------------------------------- These tokens affect the entire page. Edit in darx_tokens.css. Token Controls --------------------------------------------------------------- --gold Brand gold (#B8832A) — used everywhere --ivory Page background (#F6F1E7) --ink Primary text color --ink-muted Secondary text color --f-display Display typeface (Cormorant Garamond) --f-landing Body typeface (Noto Serif) --f-mono Monospace typeface (DM Mono) 6.2 PAGE-LEVEL TOKEN LOCATION --------------------------------------------------------------- Edit in css/webpage_home.css. Token Controls --------------------------------------------------------------- --hero-image Hero background image path (absolute) --overlay-max-w Max width of hero glass overlay box --section-padding-h Horizontal padding for all content sections 6.3 HERO SECTION TUNING PANEL --------------------------------------------------------------- Location: top of element_webpage_home_hero.css, labeled §0. Token Default Controls --------------------------------------------------------------- --hero-bg-blur 2px Hero photo blur intensity --hero-terra-a 0.12 Terracotta tint opacity --hero-box-bg see file Glass overlay background --hero-box-border see file Glass overlay border color --hero-h1-size-min 3.8rem H1 minimum size (clamp) --hero-h1-size-fluid 7.2vw H1 fluid size --hero-h1-size-max 7.2rem H1 maximum size (clamp) --hero-h1-weight 400 H1 font weight --hero-tagline-size 1.22rem Tagline paragraph size --hero-tagline-opacity see file Tagline text opacity --hero-rule-w 64px Gold hairline rule width 6.4 TRIPTYCH BAND TUNING PANEL --------------------------------------------------------------- Location: §0b block in element_webpage_home_cards.css. Token Default Controls --------------------------------------------------------------- --tri-bg #1C1410 Panel background (dark) --tri-border see file Gold border opacity --tri-padding-v calculated Vertical padding (auto-derived) --tri-num-size 0.65rem Roman numeral font size --tri-ttl-size 0.92rem Panel title font size --tri-body-size 0.80rem Body copy font size --tri-num-opacity 0.85 Gold numeral opacity --tri-title-opacity 1.00 Title opacity --tri-body-opacity 1.00 Body text opacity --tri-fade-h 180px Ivory-to-dark gradient height 6.5 PILLAR CARDS TUNING PANEL --------------------------------------------------------------- Location: GRAND MAISON PILLAR CARDS block in element_webpage_home_cards.css. Token Default Controls --------------------------------------------------------------- --card-face #ffffff Card background color --card-face-hover #fffdf9 Card hover background --card-border see file Card border color/opacity --card-shadow see file Resting card shadow --card-shadow-hover see file Hover card shadow (deeper) --card-padding see file Card internal padding --card-gap 28px Gap between cards --card-ghost-size 10rem Ghost numeral size --card-ghost-opacity 0.055 Ghost numeral opacity --card-illus-w 48px SVG illustration width --card-illus-opacity 0.80 SVG illustration opacity --card-num-size 0.74rem Card numeral (. i .) size --card-title-size 1.90rem Card title (ORIGIN etc) size --card-body-size 1.0rem Card body text size --card-body-lh 1.90 Card body line height 6.6 CHEF CAROUSEL TUNING PANEL --------------------------------------------------------------- Location: §8 block in element_webpage_home_cards.css. Token Default Controls --------------------------------------------------------------- --chef-card-w 340px Active card width --chef-card-gap 24px Gap between cards --chef-fade-h 100px Top gradient fade height --chef-peek-scale 0.88 Non-active card scale --chef-peek-opacity 0.38 Non-active card opacity --chef-transition see file Slide animation easing --chef-name-size 1.70rem Chef name font size --chef-fact-size 0.80rem Fact line font size 6.7 CELEBRITY STRIP TUNING PANEL --------------------------------------------------------------- Location: §9 block in element_webpage_home_cards.css. Token Default Controls --------------------------------------------------------------- --celeb-fade-h 90px Top gradient fade height --celeb-quote-size 1.10rem Quote font size --celeb-choice-size 0.82rem Context text font size 6.8 SIGNUP SECTION TUNING PANEL --------------------------------------------------------------- Location: §5 block in element_webpage_home_cards.css. Token Default Controls --------------------------------------------------------------- --signup-pad-v 80px Vertical padding ================================================================================ 7. CENTRALIZED DATA — SINGLE SOURCES OF TRUTH ================================================================================ The following values must never be duplicated. Each has exactly one source in the codebase. To change the value, edit only that source. Data Point Single Source Location --------------------------------------------------------------- Brand color --gold darx_tokens.css Global Brand color --ivory darx_tokens.css Global Brand dark #1C1410 element_webpage_home_cards.css Inline value (Note: not yet tokenized. Candidate for darx_tokens.css) Display typeface darx_tokens.css (--f-display) Global Body typeface darx_tokens.css (--f-landing) Global Mono typeface darx_tokens.css (--f-mono) Global Hero image path css/webpage_home.css Page scope Section padding css/webpage_home.css Page scope Manifesto text element_webpage_home_cards.php PHP element Signup statement element_webpage_home_cards.php PHP element Chef card content element_webpage_home_cards.php PHP element Celebrity card content element_webpage_home_cards.php PHP element Chef record viewer URLs element_webpage_home_cards.php PHP element Celeb record viewer URLs element_webpage_home_cards.php PHP element PRICING NOTE: Retail prices (0.5L = $26, 1L = $32) do not appear on the homepage in its current state. If added at any future stage, the sole source must be a token in darx_tokens.css, not inline HTML. ================================================================================ 8. COMPONENT DESCRIPTIONS ================================================================================ 8.1 HEADER --------------------------------------------------------------- File: api/elements/element_webpage_home_header.php CSS: css/elements/element_webpage_home_header.css Contains the DARALBEIDA wordmark (2.85rem Cormorant Garamond) flanked by fading gold lines via ::before and ::after pseudo-elements. A gold shimmer sweep animation fires every 5 seconds via background-clip: text. Scroll behavior: transparent at rest, transitions to rgba(18,12,6,0.85) with backdrop-filter: blur after 60px of scroll. Controlled by the .scrolled class applied by homepage_fx.js (§3). Lang switcher is included as a module and floats top-right. 8.2 HERO --------------------------------------------------------------- File: api/elements/element_webpage_home_hero.php CSS: css/elements/element_webpage_home_hero.css Background: moroccan_table.png with 2px blur, 12% terracotta tint, and an ivory gradient fade at the bottom. The blur and tint are applied via stacked ::before and ::after pseudo-elements on .hero. Ken Burns animation runs on the ::before layer at 30s cycle. Parallax is applied via --hero-parallax-y CSS variable updated by homepage_fx.js (§4) on each animation frame. The glass overlay (.overlay) contains in order: (a) .hero-brand-sub — brandSub tagline (translatable via data-i18n) (b) h1 — main headline (Authentic. Ancestral. Artisanal.) (c) .hero-rule — 64px gold hairline (d) .tagline — single sentence brand statement 8.3 TRIPTYCH BAND --------------------------------------------------------------- File: api/elements/element_webpage_home_cards.php (first section) CSS: element_webpage_home_cards.css §0b and §0c Three dark glass panels (Origin / Integrity / Refinement) on a background that fades from ivory at top to brand dark at center and back to ivory at bottom. The fade height is controlled by --tri-fade-h. Padding is auto-derived as calc(var(--tri-fade-h) + 56px) so text always sits in the darkest zone regardless of fade height setting. Each panel contains: a fine gold thread (::before), roman numeral ornament, spaced uppercase title, gold hairline (title ::after), and body copy. 8.4 MANIFESTO SECTION --------------------------------------------------------------- File: api/elements/element_webpage_home_cards.php CSS: element_webpage_home_cards.css §0d A centered text column (max-width 680px) above the pillar cards. Opens with a large italic Cormorant sentence. Two body paragraphs in Noto Serif. Closes with a bridge paragraph separated by a gold hairline, ending in italic gold: "Three convictions guide everything we do." data-i18n is intentionally omitted from all manifesto paragraphs. Brand positioning text is reviewed before translation. 8.5 THREE PILLAR CARDS --------------------------------------------------------------- File: api/elements/element_webpage_home_cards.php CSS: element_webpage_home_cards.css (GRAND MAISON section) Three white floating cards on ivory background arranged in a 3-column grid. Each card contains: (a) Inline SVG botanical illustration (currentColor = gold) Card 1: Olive branch (Authentic / Origin) Card 2: Olive fruit with leaf (Artisanal / Philosophy) Card 3: Compass rose (Ancestral / Vision) (b) Roman numeral ornament (. i .) (c) Dual heading: .card-h-attr (italic gold attribute word) + gold hairline + .card-h-cat (uppercase category word) (d) Body text paragraph Ghost roman numeral (I / II / III) is generated by CSS ::after on .card:nth-child(n) at 5.5% gold opacity. Cards have lift-on-hover via translateY(-8px). Gold top accent line via ::before. Visibility of each card is controlled by $show_card_origin, $show_card_philos, and $show_card_vision PHP variables. 8.6 SIGNUP SECTION --------------------------------------------------------------- File: api/elements/element_webpage_home_cards.php CSS: element_webpage_home_cards.css §5 Module: api/modules/module_forms_sign_up.php Occupies the card-contact div (grid-column: 1 / -1). Ivory background, gold hairline top border. One italic invitation sentence in Cormorant (.signup-statement). A 28px gold micro-rule. Below it, the signup module renders an underline-only email input and a gold arrow button. The module's own h3 title is suppressed via display:none in the card-contact context. The arrow button uses font-size: 0 to hide the translated text; the visual arrow is generated by ::after content. 8.7 CHEF CAROUSEL --------------------------------------------------------------- File: api/elements/element_webpage_home_cards.php (chef-section) CSS: element_webpage_home_cards.css §8 JS: Inline