/* ============================================================ ShepherdXR — The Split Design tokens: #0a0a0a bg, #7B2FBE accent, white text Fonts: Playfair Display (display) + Inter 300 (body) ============================================================ */ /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: #0a0a0a; color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(123, 47, 190, 0.45); color: #ffffff; } /* ===== VIDEO LAYER ===== */ #video-layer { position: fixed; inset: 0; z-index: 0; background-color: #0a0a0a; /* fallback when all URLs are empty */ } .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } /* videos.js adds/removes .active to crossfade */ .bg-video.active { opacity: 1; } /* ===== VIDEO OVERLAY ===== */ /* Dark gradient over the video so text is always legible */ #video-overlay { position: fixed; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.4) 40%, rgba(10, 10, 10, 0.4) 60%, rgba(10, 10, 10, 0.65) 100% ); pointer-events: none; } /* ===== SCROLL CONTAINER ===== */ #scroll-container { position: relative; z-index: 2; } /* ===== BEAT SECTIONS ===== */ .beat { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } .beat-content { text-align: center; max-width: 820px; width: 100%; } /* scroll.js adds .scroll-ready to on init, enabling entrance animations without a flash on first load */ .scroll-ready .beat-content { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .scroll-ready .beat.active .beat-content { opacity: 1; transform: translateY(0); } /* Hero is always visible — ID specificity (1,1,0) beats .scroll-ready .beat-content (0,2,0) */ #beat-hero .beat-content { opacity: 1; transform: translateY(0); animation: heroEntrance 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes heroEntrance { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* After scroll-ready activates, freeze the hero in place (animation already done) */ .scroll-ready #beat-hero .beat-content { opacity: 1; transform: translateY(0); animation: none; transition: none; } /* ===== TYPOGRAPHY ===== */ .brand-logo { display: block; width: clamp(70px, 17vw, 148px); height: auto; margin: 0 auto 1.75rem; /* PNG should be white/light so it reads on dark backgrounds. Drop a subtle shadow so it lifts off dark video frames. */ filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.5)); } .beat-tagline { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: rgba(255, 255, 255, 0.85); line-height: 1.4; margin-bottom: 2.5rem; } .beat-tagline-sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(0.85rem, 1.6vw, 1.05rem); color: rgba(255, 255, 255, 0.5); line-height: 1.6; margin-top: -1rem; } .beat-headline { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4.5vw, 3.5rem); font-weight: 400; line-height: 1.2; margin-bottom: 1.25rem; } .beat-sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.8; color: rgba(255, 255, 255, 0.78); margin-bottom: 0.5rem; } /* Force beat number indicator — outlined circle above the headline */ .force-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto 1.5rem; border: 1.5px solid rgba(123, 47, 190, 0.7); border-radius: 50%; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.3rem; color: rgba(123, 47, 190, 0.7); letter-spacing: 0.02em; } /* Inline keyword highlight — used in force beats (AI, Digital, etc.) */ .accent { color: #7B2FBE; font-weight: 700; } .shepherd-accent { color: #7B2FBE; } .shepherd-closer { font-style: italic; color: rgba(255, 255, 255, 0.65); margin-top: 1rem; } .beat-sub--spaced { margin-top: 1.5rem; } /* ===== HERO SCROLL INDICATOR ===== */ .scroll-hint { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-top: 2.5rem; } .scroll-indicator { width: 22px; height: 22px; border-right: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); transform: rotate(45deg); margin: 1.25rem auto 0; animation: chevronBounce 2.2s ease-in-out infinite; } @keyframes chevronBounce { 0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.35; } 50% { transform: rotate(45deg) translateY(8px); opacity: 0.8; } } /* ===== BEAT 7 — SPLIT SCREEN ===== */ .beat-split { position: relative; /* 200vh gives the user scroll room to experience the split. The split-screen is sticky inside it, so it pins to the viewport while the user scrolls through — no scroll-jacking, just natural hold. */ min-height: 200vh; display: block; /* override .beat's flex so sticky works correctly */ padding: 0; /* No overflow:hidden — sticky children need a scrolling ancestor, not a clipping one. clip-path on the panels is self-contained so nothing bleeds. */ } .split-screen { position: sticky; top: 0; width: 100%; height: 100vh; display: flex; opacity: 0; z-index: 1; pointer-events: none; transition: opacity 0.3s ease; } /* split.js adds .open when the animation triggers */ .split-screen.open { opacity: 1; z-index: 3; pointer-events: auto; } /* ── Panel reveal: each panel clip-paths open from the centre outward ── */ /* Initial: fully clipped (hidden) */ .split-left { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .split-right { clip-path: inset(0 0 0 100%); transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* Open: panels expand to fill their half */ .split-screen.open .split-left { clip-path: inset(0 0% 0 0); } .split-screen.open .split-right { clip-path: inset(0 0 0 0%); } /* Slam-shut: same specificity as .open rules but comes later in the sheet, so these win when both classes are present. The easing is front-loaded (ease-in) to feel violent. */ .split-screen.slam .split-left { clip-path: inset(0 100% 0 0); transition: clip-path 0.2s cubic-bezier(0.5, 0, 1, 1); } .split-screen.slam .split-right { clip-path: inset(0 0 0 100%); transition: clip-path 0.2s cubic-bezier(0.5, 0, 1, 1); } /* Hide panel text instantly on slam so it doesn't linger while panels close */ .split-screen.slam .split-text { opacity: 0; transition: none; } .split-panel { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* per-panel videos (wolves left, sheep right) */ .split-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } .split-video.active { opacity: 1; } /* colour tints over each panel's video */ .split-tint { position: absolute; inset: 0; z-index: 1; } .split-tint-left { background: rgba(160, 20, 20, 0.45); } .split-tint-right { background: rgba(40, 70, 130, 0.45); } .split-text { position: relative; z-index: 2; text-align: center; max-width: 360px; padding: 2rem; /* entrance: fades in after panels have mostly opened (0.45s delay) */ opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s; } .split-screen.open .split-text { opacity: 1; transform: translateY(0); } .split-title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400; margin-bottom: 1rem; } .split-sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: clamp(0.875rem, 1.5vw, 1.05rem); line-height: 1.65; color: rgba(255, 255, 255, 0.78); } /* vertical divider between panels */ .split-screen::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.15); transform: translateX(-50%); z-index: 4; } /* ===== CTA ===== */ .beat-cta .beat-headline { margin-bottom: 2rem; } .cta-button--spaced { margin-top: 0.5rem; } .cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .cta-button--outline { background-color: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.45); box-shadow: none; } .cta-button--outline:hover, .cta-button--outline:focus-visible { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 30px rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .cta-button { display: inline-block; padding: 1rem 2.75rem; background-color: #7B2FBE; color: #ffffff; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: 0.06em; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 28px rgba(123, 47, 190, 0.35); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .cta-button:hover, .cta-button:focus-visible { background-color: #9340e0; transform: translateY(-2px); box-shadow: 0 0 50px rgba(147, 64, 224, 0.55); outline: none; } .cta-button:focus-visible { box-shadow: 0 0 50px rgba(147, 64, 224, 0.55), 0 0 0 3px rgba(123, 47, 190, 0.6); } /* ===== CUSTOM SCROLLBAR ===== */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #7B2FBE; border-radius: 2px; } /* ===== MOBILE ===== */ @media (max-width: 600px) { .beat { padding: 1.5rem 1.25rem; } .beat-headline { font-size: clamp(1.5rem, 6vw, 2.2rem); } .split-title { font-size: 1.4rem; } .split-sub { font-size: 0.875rem; } .scroll-indicator { width: 16px; height: 16px; } /* Stack split panels vertically on narrow screens */ .split-screen { flex-direction: column; position: sticky; /* maintain sticky on mobile */ top: 0; height: 100vh; } /* Clip-path direction flips to vertical: top panel reveals downward, bottom panel reveals upward */ .split-left { clip-path: inset(0 0 100% 0); } .split-right { clip-path: inset(100% 0 0 0); } .split-screen.open .split-left, .split-screen.open .split-right { clip-path: inset(0); } .split-screen.slam .split-left { clip-path: inset(0 0 100% 0); transition: clip-path 0.2s cubic-bezier(0.5, 0, 1, 1); } .split-screen.slam .split-right { clip-path: inset(100% 0 0 0); transition: clip-path 0.2s cubic-bezier(0.5, 0, 1, 1); } /* Centre divider becomes a horizontal rule on mobile */ .split-screen::after { top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 1px; transform: translateY(-50%); } } /* ===== SHEPHERDS — STAGGERED LINE ENTRANCE ===== */ /* Both shepherd beats use the same stagger pattern. ID specificity (1,x,0) overrides the generic .scroll-ready .beat-content rules. */ .scroll-ready #beat-shepherds .beat-content, .scroll-ready #beat-shepherds-body .beat-content { opacity: 1; transform: none; transition: none; } .scroll-ready #beat-shepherds .beat-content > *, .scroll-ready #beat-shepherds-body .beat-content > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .scroll-ready #beat-shepherds.active .beat-content > *:nth-child(1), .scroll-ready #beat-shepherds-body.active .beat-content > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .scroll-ready #beat-shepherds.active .beat-content > *:nth-child(2), .scroll-ready #beat-shepherds-body.active .beat-content > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } .scroll-ready #beat-shepherds.active .beat-content > *:nth-child(3), .scroll-ready #beat-shepherds-body.active .beat-content > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } .scroll-ready #beat-shepherds.active .beat-content > *:nth-child(4), .scroll-ready #beat-shepherds-body.active .beat-content > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.85s; } .scroll-ready #beat-shepherds.active .beat-content > *:nth-child(5), .scroll-ready #beat-shepherds-body.active .beat-content > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 1.1s; } /* ===== ACCESSIBILITY — REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } /* Skip videos entirely for reduced-motion users */ .bg-video, .split-video { display: none; } /* Ensure content is always visible without animations */ .scroll-ready .beat-content, .scroll-ready #beat-shepherds .beat-content > * { opacity: 1 !important; transform: none !important; } }