/* ========================================================= ALCOTEXA — Egyptian Cotton History page Page markup uses Tailwind (tw- prefixed) utility classes directly in history_page.xml for everything that's static (layout, spacing, typography, static color/backgrounds). What stays here is only what can't safely move: the color tokens (referenced from the markup via tw-*-[var(--*)]), the `` base rule (the tag itself is rendered by website.layout, outside this page's own markup), the fixed cinematic backdrop/vignette/grain/progress-bar/fiber-rail system (driven by inline styles set from history.js), the three @keyframes animations (Tailwind utilities can't define new keyframes without editing the shared tailwind.config.js), and the full scroll-reveal choreography. The reveal choreography is intentionally left untouched as one unit: each chapter (`[data-theme="1..4"]`) drives a different transform/ opacity/filter/clip-path animation for the same `.reveal`/`.reveal- stagger` classes via more-specific plain-CSS selectors. Since Tailwind utilities compile with `!important` (see tailwind.config.js), adding a utility for any of those animated properties here would unconditionally override the plain-CSS reveal rule regardless of selector specificity — so transform/opacity/filter/clip-path/letter-spacing/text-shadow/ transition are deliberately never touched by a tw- utility anywhere a reveal rule can reach that element for that property. ========================================================= */ :root{ /* ALCOTEXA brand */ --navy: #0d1f4c; --navy-2: #0a1838; --gold: #d4af37; --gold-bright: #e8cd7a; /* luminous tint of the brand gold — accents & glow */ --cream: #f5f1e4; --green: #2f6a3e; --blue: #2c6e8f; --parchment: #f5f1e4; /* per-chapter palettes — all re-derived from the brand system. Gold stays the shared accent (the fiber thread); only the mood shifts. */ /* Ch.1 — Origin: brand navy */ --c1-bg: #0a1838; --c1-bg2: #0d1f4c; --c1-text: #f5f1e4; --c1-sub: #bcc4da; /* Ch.2 — Growth: brand green */ --c2-bg: #0d2318; --c2-bg2: #143120; --c2-text: #eef4ee; --c2-sub: #a6c6b2; /* Ch.3 — The Mills: navy + steel blue */ --c3-bg: #081327; --c3-bg2: #102344; --c3-text: #eef1f9; --c3-sub: #a3b4d2; /* Ch.4 — Bloom: brand gold (light) */ --c4-bg: #e0dbc9; --c4-bg2: #f6eccd; --c4-text: #0d1f4c; --c4-sub: #4f5878; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: 'Poppins', sans-serif; color: var(--c1-text); overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation: none !important; transition: none !important; } } /* Fixed cinematic backdrop that morphs color per chapter */ .backdrop{ position: fixed; inset: 0; z-index: -2; overflow: hidden; background-color: var(--bg1, #0a1838); background-image: radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,0.10), rgba(13,31,76,0) 55%); transition: background-color 1.4s ease; } /* Material textures: woven cotton + laid paper. soft-light lets one texture set read correctly over every chapter, dark or light. Kept very light. */ .backdrop::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,"), url("data:image/svg+xml,"); background-size: 46px 46px, 320px 320px; background-repeat: repeat, repeat; mix-blend-mode: soft-light; opacity: 0.14; } /* subtle film grain / vignette for cinematic mood */ .vignette{ position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 100%); } .grain{ position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* Top progress thread */ .progress-bar{ position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); z-index: 50; transition: width 0.1s linear; } /* Vertical fiber thread (desktop signature element) */ .fiber-rail{ position: fixed; top: 0; left: 34px; width: 2px; height: 100%; z-index: 40; display: none; } .fiber-rail::before{ content: ""; position: absolute; inset: 0; background: rgba(245,241,228,0.14); } .fiber-fill{ position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 10px rgba(212,175,55,0.6); transition: height 0.05s linear; } .fiber-node{ position: absolute; left: 50%; transform: translate(-50%, -50%) scale(0.7); width: 13px; height: 13px; border-radius: 50%; background: rgba(245,241,228,0.5); transition: transform 0.5s cubic-bezier(.22,.61,.36,1), background 0.5s ease, box-shadow 0.5s ease; } .fiber-node.active{ background: var(--gold-bright); box-shadow: 0 0 0 6px rgba(232,205,122,0.18), 0 0 16px rgba(232,205,122,0.7); transform: translate(-50%, -50%) scale(1.15); } .fiber-node span{ position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 1px; white-space: nowrap; color: rgba(245,241,228,0.45); transition: color 0.5s ease; } .fiber-node.active span{ color: var(--gold-bright); } @media (min-width: 992px){ .fiber-rail{ display: block; } } /* Chapter 4 (Bloom) is a light background — flip the fixed thread UI to navy ink so the rail, nodes and year labels stay legible. */ body[data-chapter="4"] .fiber-rail::before{ background: rgba(13,31,76,0.18); } body[data-chapter="4"] .fiber-node{ background: rgba(13,31,76,0.4); } body[data-chapter="4"] .fiber-node span{ color: rgba(13,31,76,0.5); } body[data-chapter="4"] .fiber-node.active{ background: var(--gold); box-shadow: 0 0 0 6px rgba(212,175,55,0.18), 0 0 16px rgba(212,175,55,0.55); } /* Intro fade-in choreography (fadeUp keyframe drives opacity + transform; a static transform on .intro-scroll competes with the keyframe's, so both properties stay here rather than splitting across Tailwind and CSS). */ .intro-eyebrow{ opacity: 0; animation: fadeUp 1s ease 0.2s forwards; } .intro-title{ opacity: 0; animation: fadeUp 1.1s ease 0.4s forwards; } .intro-sub{ margin-top: 26px; max-width: 520px; color: var(--green); font-size: 1rem; line-height: 1.8; opacity: 0; animation: fadeUp 1.1s ease 0.65s forwards; } .intro-scroll{ transform: translateX(-50%); opacity: 0; animation: fadeUp 1s ease 1s forwards; } .intro-scroll::after{ content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold-bright), transparent); animation: threadPulse 2s ease-in-out infinite; } @keyframes fadeUp{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: translateY(0); } } @keyframes threadPulse{ 0%, 100%{ opacity: 0.4; } 50%{ opacity: 1; } } /* Chapter figure: the Ken Burns pan/zoom is a permanent infinite animation driving transform + filter, so the whole rule stays together here. */ .chapter-figure img{ display: block; width: 100%; height: auto; filter: sepia(0.28) saturate(0.95) contrast(1.05); transform: scale(1.08); animation: kenBurns 14s ease-in-out infinite alternate; } @keyframes kenBurns{ from{ transform: scale(1.08) translate(0,0); } to{ transform: scale(1.16) translate(-1.5%, -1%); } } /* Chapter stamp's resting rotation: always overridden by the more specific per-chapter `.chapter-stamp.reveal` transform below, but kept here (not as a tw- utility) so it never fights that animated transform. */ .chapter-stamp{ transform: rotate(-2deg); } /* Per-chapter text colors — keeps each section legible over its own backdrop. Left as CSS so every descendant that doesn't set its own color (title, text, quote, stamp) keeps inheriting it, exactly as before. */ .chapter[data-theme="1"]{ color: var(--c1-text); } .chapter[data-theme="2"]{ color: var(--c2-text); } .chapter[data-theme="3"]{ color: var(--c3-text); } .chapter[data-theme="4"]{ color:var(--c4-text); } .finale[data-theme="4"]{ color: var(--c4-text); } /* On the light gold chapter, flip the gold stamp to navy so it stays readable */ .chapter[data-theme="4"] .chapter-stamp{ color: #e8cd7a} /* ============ Reveal on scroll: base (used by intro + finale) ============ */ .reveal{ opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); } .reveal.is-visible{ opacity: 1; transform: none; } .reveal-stagger > *{ opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal-stagger.is-visible > *{ opacity: 1; transform: none; } .reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0.05s; } .reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 0.2s; } .reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 0.35s; } .reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 0.5s; } /* ============ Chapter One — "unfurl": a curtain draws back off the garden ============ */ .chapter[data-theme="1"] .chapter-figure.reveal{ transform: none; opacity: 1; /* clip-path: inset(0 100% 0 0); */ transition: clip-path 1.3s cubic-bezier(.65,0,.2,1); } .chapter[data-theme="1"] .chapter-figure.reveal.is-visible{ clip-path: inset(0 0% 0 0); } .chapter[data-theme="1"] .chapter-stamp.reveal{ transform: rotate(-2deg) translateX(-26px); opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1); } .chapter[data-theme="1"] .chapter-stamp.reveal.is-visible{ transform: rotate(-2deg) translateX(0); opacity: 1; } .chapter[data-theme="1"] .chapter-title.reveal{ opacity: 1; transform: none; /* clip-path: inset(0 100% 0 0); */ transition: clip-path 1s cubic-bezier(.65,0,.2,1) 0.15s; } .chapter[data-theme="1"] .chapter-title.reveal.is-visible{ /* clip-path: inset(0 0% 0 0); */ } .chapter[data-theme="1"] .chapter-text.reveal-stagger > *{ transform: translateY(0) translateX(-24px); filter: blur(3px); } .chapter[data-theme="1"] .chapter-text.reveal-stagger.is-visible > *{ transform: none; filter: blur(0); } .chapter[data-theme="1"] .chapter-quote.reveal{ transform: none; transform-origin: top left; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: opacity 0.1s linear 0.4s, clip-path 0.9s cubic-bezier(.22,.61,.36,1) 0.4s; } .chapter[data-theme="1"] .chapter-quote.reveal.is-visible{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* ============ Chapter Two — "growth": elements rise out of the ground like a crop ============ */ .chapter[data-theme="2"] .chapter-stamp.reveal, .chapter[data-theme="2"] .chapter-title.reveal{ transform-origin: bottom center; transform: scaleY(0.4) translateY(30px); opacity: 0; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.34,1.56,.64,1); } .chapter[data-theme="2"] .chapter-stamp.reveal.is-visible, .chapter[data-theme="2"] .chapter-title.reveal.is-visible{ transform: scaleY(1) translateY(0); opacity: 1; } .chapter[data-theme="2"] .chapter-text.reveal-stagger > *{ transform-origin: bottom center; transform: scaleY(0.3) translateY(24px); opacity: 0; transition: opacity 0.75s ease, transform 0.85s cubic-bezier(.3,1.4,.5,1); } .chapter[data-theme="2"] .chapter-text.reveal-stagger.is-visible > *{ transform: scaleY(1) translateY(0); opacity: 1; } /* ============ Chapter Three — "the press": mechanical, alternating impact from left/right ============ */ .chapter[data-theme="3"] .chapter-stamp.reveal{ transform: translateX(-50px) rotate(-6deg) scale(1.15); opacity: 0; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.2,.9,.3,1.2); } .chapter[data-theme="3"] .chapter-stamp.reveal.is-visible{ transform: translateX(0) rotate(-2deg) scale(1); opacity: 1; } .chapter[data-theme="3"] .chapter-title.reveal{ transform: translateX(60px); opacity: 0; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.9,.3,1.15); } .chapter[data-theme="3"] .chapter-title.reveal.is-visible{ transform: translateX(0); opacity: 1; } .chapter[data-theme="3"] .chapter-text.reveal-stagger > *{ opacity: 0; transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2,.9,.3,1.2); } .chapter[data-theme="3"] .chapter-text.reveal-stagger > *:nth-child(odd){ transform: translateX(-46px) rotate(-1.5deg); } .chapter[data-theme="3"] .chapter-text.reveal-stagger > *:nth-child(even){ transform: translateX(46px) rotate(1.5deg); } .chapter[data-theme="3"] .chapter-text.reveal-stagger.is-visible > *{ transform: translateX(0) rotate(0); opacity: 1; } /* ============ Chapter Four — "bloom": a golden glow blooms open, unhurried ============ */ .chapter[data-theme="4"] .chapter-stamp.reveal, .finale .reveal.reveal-zoom{ transform: scale(0.6); opacity: 0; transition: opacity 1s ease, transform 1.2s cubic-bezier(.22,.61,.36,1); } .chapter[data-theme="4"] .chapter-stamp.reveal.is-visible, .finale .reveal.reveal-zoom.is-visible{ transform: scale(1); opacity: 1; } .chapter[data-theme="4"] .chapter-title.reveal, .finale .finale-title.reveal{ transform: scale(0.94); opacity: 0; letter-spacing: 3px; filter: blur(4px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.22,.61,.36,1), letter-spacing 1.3s ease, filter 1.1s ease; } .chapter[data-theme="4"] .chapter-title.reveal.is-visible, .finale .finale-title.reveal.is-visible{ transform: scale(1); opacity: 1; letter-spacing: normal; filter: blur(0); text-shadow: 0 0 26px rgba(255,238,197,0.35); } .chapter[data-theme="4"] .chapter-text.reveal-stagger > *{ transform: translateY(18px) scale(0.97); opacity: 0; filter: blur(3px); transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease; } .chapter[data-theme="4"] .chapter-text.reveal-stagger.is-visible > *{ transform: none; opacity: 1; filter: blur(0); } .finale-sub.reveal{ transition: opacity 1.3s ease 0.3s, transform 1.3s ease 0.3s; }