/* ========================================================================= * element_webpage_home_hero.css * Daralbeida.com — Hero section + Overlay content * v3.0 May 2026 * * DOCUMENT MAP * ───────────────────────────────────────────────────────────────────── * §0 TUNING PANEL All editable values in one place * §1 HERO CONTAINER .hero layout and keyframes * §2 BACKGROUND LAYERS .hero::before (photo) · .hero::after (tints) * §3 OVERLAY BOX .overlay position / background / flex * §4 OVERLAY BREATHING @keyframes overlay-breathe + animation * §5 BOTANICAL .hero-botanical SVG draw sequence * §6 ELEMENT A .ov-indicator-row — always-on three-word strip * §7 ELEMENT B .ov-main-wrap — large cycling word * §8 ELEMENT C .ov-verb-wrap — cycling verb * §9 ELEMENT D .ov-subtag-wrap — cycling sub-tagline * §10 ELEMENT F .hero-rule — ornamental gold rule * §11 ELEMENT G .ov-tagline — permanent tagline * §12 RESPONSIVE Padding adjustments at narrow viewports * §13 REDUCED MOTION Honour user preference * * OVERLAY ELEMENT NAMES (use these to give instructions) * ───────────────────────────────────────────────────────────────────── * A .ov-indicator small always-on three-word strip + .ov-dot separators * B .ov-main large cycling word (Authentic / Artisanal / Ancestral) * C .ov-verb cycling verb (Safeguard / Elevate / Transmit) * D .ov-subtag cycling sub-tagline (one sentence per cycle) * E .hero-botanical botanical SVG (positioned in PHP between D and F) * F .hero-rule ornamental gold rule line ◆ line * G .ov-tagline permanent tagline (always visible, never cycles) * * CYCLING BEHAVIOUR * JS homepage_fx.js §9 adds .active to matching data-idx elements. * Cycle duration: 15 000 ms (edit CYCLE_MS in homepage_fx.js §9) * ========================================================================= */ /* ========================================================================= §0 TUNING PANEL ───────────────────────────────────────────────────────────────────────── Edit values HERE. Do not hunt through the rest of the file. Every value below is referenced by name — nothing is hardcoded elsewhere. ========================================================================= */ /* Applied to .hero so tokens scope to the hero section only */ .hero, .overlay-section { /* ── OVERLAY FONT SIZES ────────────────────────────────────────────── Scale reference: XS=14 S=18 M=28 L=48 XL=72 XXL=110 XXXL=160 */ --ov-A-size: 10px; /* A: indicator strip (small label) */ --ov-B-size: 19px; /* B: large cycling word (main display) */ --ov-C-size: 13px; /* C: cycling verb (medium display) */ --ov-D-size: 19px; /* D: cycling sub-tagline */ --ov-G-size: 19px; /* G: permanent tagline */ --ov-dot-size: 9px; /* dot separator between A indicators */ /* ── OVERLAY COLOURS ─────────────────────────────────────────────────*/ --ov-A-color: rgba(28, 20, 16, 0.40); /* A: inactive indicator */ --ov-A-active: var(--gold); /* A: active indicator */ --ov-B-color: rgba(28, 20, 16, 0.97); /* B: main word */ --ov-C-color: #8A5E1A; /* C: verb — deeper gold for contrast on the light card */ --ov-D-color: rgba(28, 20, 16, 0.80); /* D: sub-tagline */ --ov-G-color: rgba(28, 20, 16, 0.58); /* G: permanent tagline */ --ov-dot-color: rgba(184, 131, 42, 0.35); /* separator dot */ /* ── OVERLAY FONT STYLES ─────────────────────────────────────────────*/ --ov-A-weight: 500; --ov-A-spacing: 0.20em; --ov-B-weight: 500; --ov-B-spacing: 0.06em; --ov-C-weight: 400; /* verb is always italic — set below */ --ov-C-spacing: 0.04em; --ov-D-weight: 300; --ov-G-weight: 400; /* ── OVERLAY TRANSITION ──────────────────────────────────────────────*/ --ov-fade: 0.90s; /* opacity cross-fade between cycle states */ /* ── OVERLAY BOX ─────────────────────────────────────────────────────*/ --hero-box-bg: rgba(255, 255, 255, 0.96); /* light glass background */ --hero-box-border: rgba(184, 131, 42, 0.14); /* gold border, very subtle*/ --hero-box-white: rgba(255, 255, 255, 0.35); /* outer soft-white border */ /* ── HERO BACKGROUND ─────────────────────────────────────────────────*/ --hero-bg-blur: 0px; /* photo blur — increase for dreamier look */ --hero-terra-a: 0.03; /* terracotta wash intensity (0 = off, 1 = full)*/ /* ── DARK VIGNETTE — three-stop gradient for text legibility ───────── These are rgba variants of --brand-dark (#1C1410) at different opacities. INLINE EXCEPTION: used inside .hero::after gradient — CSS does not support custom properties inside gradient stop positions. */ --hero-dark-0: rgba(10, 8, 4, 0.45); /* top of hero — darkest */ --hero-dark-48: rgba(10, 8, 4, 0.30); /* midpoint */ --hero-dark-82: rgba(10, 8, 4, 0.10); /* lower — fading out */ /* ── SPACING ─────────────────────────────────────────────────────────*/ --ov-gap: 13px; /* gap between overlay flex children */ --ov-rule-w: 160px; /* width of the ornamental gold rule (F) */ --ov-rule-h: 10px; /* height of the rule container (clears diamond)*/ --ov-diamond-sz: 5px; /* size of the diamond ornament in rule F */ --ov-subtag-mh: 60px; /* min-height of D container — prevents jump */ } /* ========================================================================= §1 HERO CONTAINER + KEYFRAMES ========================================================================= */ /* Keyframes at top level — suppressed via animation:none in §13 */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Ken Burns: 12% zoom over 22s — clearly visible, not distracting */ @keyframes hero-ken-burns { from { transform: scale(1.00); } to { transform: scale(1.50); } } .hero { /* Fit one screen: body padding-top (60) + hero + footer reserve (80) = 100vh. The 60px top gap lives on body padding-top (not a hero margin, which would leak into the page scroll height). */ min-height: calc(100vh - 140px); margin-top: 0; position: relative; isolation: isolate; /* contain hero layers so they can't cover the overlay below */ direction: ltr; /* isolate from RTL language switch — prevents image shift */ overflow: hidden; display: flex; align-items: flex-start; justify-content: center; text-align: center; /* Top padding places the carousel card ~140px from the page top (hero margin 60 + padding 10 + slider top-padding 70 = 140). */ padding: 10px 30px 40px; background: none; color: white; } /* ========================================================================= §2 BACKGROUND LAYERS Layer order (z-index): 0 .hero::before — raw photo (blurred, Ken Burns) 1 .hero::after — colour overlays (vignette + terracotta + ivory fade) 2 .hero-grain — film grain texture (defined in element_webpage_home_fx.css) 3 .overlay — glass box with text (§3 below) ========================================================================= */ /* Layer 0 — photo */ .hero::before { content: ''; position: absolute; inset: -50px; /* extended so blur feather never shows at edges */ background: var(--hero-image) center calc(50% + var(--hero-parallax-y, 0px)) / cover no-repeat; filter: blur(var(--hero-bg-blur)) brightness(1.0); z-index: 0; animation: hero-ken-burns 30s ease-in-out infinite alternate; } /* Layer 1 — colour stack (bottom-up: ivory fade → terracotta → vignette) */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: /* Top layer: ivory gradient feathering BOTH edges of the photo into ivory. Top edge (0→38%) mirrors the bottom edge (62→100%). Uses ivory-with-0 alpha (not plain "transparent") so the fade never greys out. */ linear-gradient( var(--ivory) 0%, rgba(246, 241, 231, 0) 38%, rgba(246, 241, 231, 0) 62%, var(--ivory) 100% ), /* Middle: terracotta wash — warm Moroccan colour cast */ linear-gradient( rgba(175, 82, 42, var(--hero-terra-a)), rgba(175, 82, 42, var(--hero-terra-a)) ), /* Base: dark vignette — keeps text readable against the photo INLINE EXCEPTION: CSS custom properties cannot be used inside gradient colour stops in all browsers. Values are in §0 as --hero-dark-0/48/82 for documentation — edit them there. */ linear-gradient( var(--hero-dark-0) 0%, var(--hero-dark-48) 48%, var(--hero-dark-82) 82%, transparent 100% ); } /* ========================================================================= §3 OVERLAY BOX Glass panel centred in the hero. z-index: 3 — above grain (z:2). Flex column: every overlay element is a child, stacked and centred. ========================================================================= */ .overlay { position: relative; z-index: 3; /* must stay above .hero-grain (z:2) */ max-width: var(--overlay-max-w); /* set in css/webpage_home.css */ padding: var(--overlay-padding); /* set in css/webpage_home.css */ background: var(--hero-box-bg); border: none; /* Light card: a single thin gold hairline + soft drop shadow reads clean on white. The dark-card brown/ivory/gold ring stack was removed (the ivory ring vanished on white and the gold glow muddied it). */ box-shadow: inset 0 0 0 1px rgba(184, 131, 42, 0.55), 0 18px 50px rgba(20, 10, 4, 0.22); /* Flex column — all overlay children are centred automatically */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ov-gap); text-align: center; } /* Robust overlay styling — explicit values so the box is ALWAYS visible in .overlay-section, even if the scoped tokens fail to load. Specificity (0,2,0) beats the base .overlay rule. */ .overlay-section .overlay { background: rgba(255, 255, 255, 0.96); border: none; outline: none; color: rgba(28, 20, 16, 0.92); } /* (inner border now part of the box-shadow ring stack on .overlay) */ /* ========================================================================= §4 OVERLAY BREATHING Slow gold pulse on the border and shadow. Starts after load animations. Edit the timing on the .overlay animation line below. ========================================================================= */ @keyframes overlay-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(184, 131, 42, 0.45), 0 18px 50px rgba(20, 10, 4, 0.20); } 50% { box-shadow: inset 0 0 0 1px rgba(184, 131, 42, 0.75), 0 22px 58px rgba(20, 10, 4, 0.26); /* Subtle pulse of the gold hairline + drop shadow on the light card. */ } } /* 7s cycle — slow breathing feels premium. Change first value to adjust speed. */ .overlay { animation: overlay-breathe 5s ease-in-out 3s infinite; } /* ========================================================================= §5 BOTANICAL — SVG olive branch draw sequence Stroke-dashoffset animation: each path draws from invisible to full. Edit animation-delay values to change the draw order timing. ========================================================================= */ @keyframes bot-draw { to { stroke-dashoffset: 0; } } .bot-stem { stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; animation: bot-draw 0.60s ease forwards 0.30s; /* draws first */ } .bot-leaf { stroke: var(--gold); stroke-width: 1.2; fill: rgba(184, 131, 42, 0.08); stroke-dasharray: 80; stroke-dashoffset: 80; } /* Leaf draw delays — edit these to change sequence timing */ .bot-l1 { animation: bot-draw 0.45s ease forwards 0.70s; } .bot-l2 { animation: bot-draw 0.45s ease forwards 0.95s; } .bot-l3 { animation: bot-draw 0.45s ease forwards 1.20s; } .bot-olive { stroke: var(--gold); stroke-width: 1.0; fill: rgba(184, 131, 42, 0.15); stroke-dasharray: 40; stroke-dashoffset: 40; } /* Olive draw delays */ .bot-o1 { animation: bot-draw 0.30s ease forwards 1.10s; } .bot-o2 { animation: bot-draw 0.30s ease forwards 1.25s; } /* ========================================================================= §6 ELEMENT A — Indicator strip Three always-on words. Active one turns gold (via JS .active class). Font size: --ov-A-size (set in §0) ========================================================================= */ .ov-indicator-row { display: flex; align-items: center; justify-content: center; gap: 0.6em; } .ov-indicator { text-decoration: none; cursor: pointer; font-family: var(--f-mono); font-size: var(--ov-A-size); font-weight: var(--ov-A-weight); letter-spacing: var(--ov-A-spacing); text-transform: uppercase; color: var(--ov-A-color); transition: color var(--ov-fade) ease; text-shadow: 0 1px 2px rgba(0,0,0,0.12); -webkit-font-smoothing: antialiased; } /* JS adds .active to the matching data-idx indicator each cycle */ .ov-indicator.active { color: var(--ov-A-active); } .ov-indicator:hover { color: var(--gold); opacity: 0.80; } /* Dot separator between indicators */ .ov-dot { font-size: var(--ov-dot-size); color: var(--ov-dot-color); line-height: 1; } /* ========================================================================= §7 ELEMENT B — Large cycling word One word visible at a time. JS adds .active to the current data-idx. Font size: --ov-B-size (set in §0) min-height is fixed so the container never collapses between cycles. INLINE EXCEPTION: 60px = --ov-B-size (48px) × 1.25 line-height buffer. Update this if --ov-B-size changes: new value = B-size × 1.25 ========================================================================= */ .ov-main-wrap { position: relative; width: 100%; min-height: 40px; /* = --ov-B-size × 1.25 — update if B-size changes */ } .ov-main { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--f-display); font-size: var(--ov-B-size); font-weight: var(--ov-B-weight); font-style: normal; letter-spacing: var(--ov-B-spacing); color: var(--ov-B-color); margin: 0; line-height: 1.0; opacity: 0; transition: opacity var(--ov-fade) ease; text-shadow: 0 1px 2px rgba(0,0,0,0.16); -webkit-font-smoothing: antialiased; } .ov-main.active { opacity: 1; } /* Flanking gold rules left and right of B */ .ov-main::before, .ov-main::after { content: ''; flex: 1; max-width: 140px; height: 1px; opacity: 0; transition: opacity var(--ov-fade) ease; /* INLINE EXCEPTION: gradient fades rule from transparent edge inward. Direction reverses on ::after — no token needed, fixed decorative values. */ } .ov-main::before { background: linear-gradient(to right, transparent, rgba(255,255,255,0.65)); } .ov-main::after { background: linear-gradient(to left, transparent, rgba(255,255,255,0.65)); } .ov-main.active::before, .ov-main.active::after { opacity: 1; } /* ========================================================================= §8 ELEMENT C — Cycling verb Appears italic gold, below the active main word. Font size: --ov-C-size (set in §0) min-height: INLINE EXCEPTION: 36px = --ov-C-size (28px) × 1.28 buffer. Update if --ov-C-size changes: new value = C-size × 1.28 ========================================================================= */ .ov-verb-wrap { position: relative; width: 100%; min-height: 24px; /* = --ov-C-size × 1.28 — update if C-size changes */ } .ov-verb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: var(--ov-C-size); font-weight: var(--ov-C-weight); font-style: italic; /* always italic — distinguishes verb from noun */ letter-spacing: var(--ov-C-spacing); color: var(--ov-C-color); margin: 0; line-height: 1.0; opacity: 0; transition: opacity var(--ov-fade) ease; text-shadow: 0 1px 2px rgba(0,0,0,0.14); -webkit-font-smoothing: antialiased; } .ov-verb.active { opacity: 1; } /* ========================================================================= §9 ELEMENT D — Cycling sub-tagline One sentence per cycle. Fades in with the verb. Font size: --ov-D-size (set in §0) ========================================================================= */ .ov-subtag-wrap { position: relative; width: 100%; min-height: var(--ov-subtag-mh); /* prevents container collapse between cycles */ } .ov-subtag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: var(--ov-D-size); font-weight: var(--ov-D-weight); font-style: normal; text-transform: capitalize; line-height: 1.70; text-align: center; color: var(--ov-D-color); margin: 0; opacity: 0; /* Slightly slower than --ov-fade so it trails in after the verb */ transition: opacity calc(var(--ov-fade) * 1.3) ease; text-shadow: 0 1px 2px rgba(0,0,0,0.12); -webkit-font-smoothing: antialiased; } .ov-subtag.active { opacity: 1; } /* ========================================================================= §10 ELEMENT E — Botanical container Width controls the size of the SVG illustration. The SVG itself is defined in element_webpage_home_hero.php. ========================================================================= */ .hero-botanical { width: 56px; /* increase to make botanical larger */ margin: 0 auto; display: block; } .hero-botanical svg { width: 100%; height: auto; overflow: visible; } /* ========================================================================= §11 ELEMENT F — Ornamental gold rule Structure: left line ◆ right line, built with CSS ::before / ::after. Width: --ov-rule-w Diamond size: --ov-diamond-sz (both in §0) INLINE EXCEPTION: The gradient percentages (18%, 44%, 56%, 82%) define where the gap for the diamond sits. If --ov-diamond-sz or --ov-rule-w change significantly, re-tune these percentages so the gap aligns. ========================================================================= */ .hero-rule { position: relative; width: var(--ov-rule-w); height: var(--ov-rule-h); flex-shrink: 0; } .hero-rule::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; /* Gold lines with gap in centre for the diamond */ background: linear-gradient(to right, transparent 0%, rgba(184,131,42,0.55) 18%, rgba(184,131,42,0.55) 44%, /* ← left line ends here */ transparent 44%, transparent 56%, /* ← right line starts here */ rgba(184,131,42,0.55) 56%, rgba(184,131,42,0.55) 82%, transparent 100% ); /* INLINE EXCEPTION: gradient values are percentages that position the gap. They match the diamond size in ::after. Adjust if --ov-rule-w changes. */ } .hero-rule::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--ov-diamond-sz); height: var(--ov-diamond-sz); background: var(--gold); opacity: 0.65; transform: translate(-50%, -50%) rotate(45deg); /* INLINE EXCEPTION: rotate(45deg) is fixed — it makes a square into a diamond shape. This value should never change. */ } /* ========================================================================= §11b OVERLAY SECTION — band that holds the overlay below the hero The overlay box carries its own dark-glass background, so it stays readable on the ivory page. This band just centres it and adds spacing. ========================================================================= */ .overlay-section { display: flex; justify-content: center; padding: 90px 30px 96px; /* extra top padding = more distance below the dots */ background: var(--ivory); } /* ========================================================================= §12 ELEMENT G — Permanent tagline Always visible. Never cycles. Styled to be quieter than D. Font size: --ov-G-size (set in §0) ========================================================================= */ .ov-tagline { font-family: var(--f-display); font-size: var(--ov-G-size); font-weight: var(--ov-G-weight); font-style: italic; line-height: 1.70; text-align: center; color: var(--ov-G-color); margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.12); -webkit-font-smoothing: antialiased; } /* ========================================================================= §13 RESPONSIVE Reduce padding on narrow viewports — font sizes stay the same. Edit --overlay-max-w and --overlay-padding in css/webpage_home.css. ========================================================================= */ @media (max-width: 900px) { .overlay { padding: 32px 27px; } } @media (max-width: 600px) { .overlay { padding: 27px 19px; } } /* ========================================================================= §14 REDUCED MOTION Respects the user's OS-level "reduce motion" preference. All CSS transitions and animations are disabled. JS cycle still runs (instant opacity switch rather than fade). ========================================================================= */ @media (prefers-reduced-motion: reduce) { .ov-main, .ov-verb, .ov-subtag, .ov-indicator { transition: none; } .overlay { animation: none; } .hero::before { animation: none; } /* Ken Burns off */ .bot-stem, .bot-leaf, .bot-l1, .bot-l2, .bot-l3, .bot-olive, .bot-o1, .bot-o2 { animation: none; stroke-dashoffset: 0; } }