/* * ============================================================ * FEARANN ALBA — time-travel.css (NEW build) * ============================================================ * Styles for the NEW Time Travel page (templates/page-time-travel.php): * * 1. The fixed, full-screen scroll-scrubbed background video * (.ftt-bg) and its darkening overlay * 2. The page wrapper that floats every section above it * 3. The five sections: hero, what we do, how it works, * why it works, get in touch * * It reuses the brand tokens from main.css (colours, fonts, the * .btn styles) and ports the proven .tt-compare comparison-slider * frame for the "What We Do" section. The Historic Site page keeps * its own copy of those slider styles in historic-site.css — the * two stylesheets never load on the same page, so the shared class * names never collide. * * Everything new here is namespaced .ftt-* (Fearann Time Travel) * so it can't clash with the Historic Site page's .tt-* classes. * ============================================================ */ /* * ============================================================ * 1. FIXED SCROLL-SCRUBBED BACKGROUND VIDEO * ============================================================ * Pinned to the viewport just below the fixed 70px header, filling * the rest of the screen at all times. z-index:0 places it above * the black background but behind the page content * (.ftt-page, z-index:1). Every section scrolls over the top of it. * ============================================================ */ .ftt-bg { position: fixed; top: 70px; /* sit below the fixed header */ left: 0; width: 100%; height: calc(100vh - 70px); /* full screen, minus the nav */ z-index: 0; overflow: hidden; background-color: #000; /* black until the video paints */ pointer-events: none; /* never intercept clicks/scroll */ } /* Dynamic viewport height where supported — keeps the video filling the screen as mobile browser chrome expands/retracts */ @supports (height: 100dvh) { .ftt-bg { height: calc(100dvh - 70px); } } .ftt-bg__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* fill the frame, crop as needed */ object-position: center; } /* * Darkening overlay — a touch heavier top and bottom so the title, * the closing CTA and the nav all stay readable over bright daylight * frames and the busy reconstruction alike. */ .ftt-bg__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.4) 65%, rgba(0, 0, 0, 0.62) 100% ); } /* * ============================================================ * 2. PAGE WRAPPER — floats all content above the video * ============================================================ */ .ftt-page { position: relative; z-index: 1; } /* * The footer is a sibling of the background (it comes from * parts/footer.php, outside .ftt-page), so give it its own * opaque backdrop and lift it above the video too. Scoped here, * this only affects the Time Travel page. */ .site-footer { position: relative; z-index: 1; background-color: var(--color-bg); } /* * Each major section is given a full screen of height and its * content vertically centred, so the background video scrubs * steadily as the visitor passes through — the pacing seen in * the reference videos. (The hero is handled separately below.) */ .ftt-what, .ftt-how, .ftt-why, .ftt-cta { position: relative; display: flex; align-items: center; min-height: calc(100vh - 70px); } @supports (height: 100dvh) { .ftt-what, .ftt-how, .ftt-why, .ftt-cta { min-height: calc(100dvh - 70px); } } .ftt-what > .container, .ftt-how > .container, .ftt-why > .container, .ftt-cta > .container { width: 100%; } /* * ============================================================ * 3. HERO * ============================================================ * Title + subtitle centred up top; intro copy and the "Get in * touch" button lower-left; the hand-holding-phone graphic * lower-right; a scroll cue at the foot. * ============================================================ */ .ftt-hero { position: relative; min-height: calc(100vh - 70px); display: flex; flex-direction: column; } @supports (height: 100dvh) { .ftt-hero { min-height: calc(100dvh - 70px); } } .ftt-hero__top { padding-top: clamp(2rem, 8vh, 6rem); text-align: center; } .ftt-hero__title { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: var(--weight-light); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; margin: 0; } .ftt-hero__subtitle { margin: 1rem auto 0; font-size: clamp(1rem, 2.2vw, 1.6rem); font-weight: var(--weight-regular); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); max-width: none; } .ftt-hero__subtitle-em { color: var(--color-gold); font-weight: var(--weight-bold); } /* The middle band: intro on the left, graphic on the right */ .ftt-hero__lower { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; } .ftt-hero__intro { max-width: 32rem; } .ftt-hero__intro p { margin: 0 0 1.75rem; max-width: 36ch; font-size: 1.05rem; color: var(--color-text); } .ftt-hero__intro strong { font-weight: var(--weight-bold); color: #fff; } .ftt-hero__graphic { display: flex; justify-content: flex-end; align-items: center; } .ftt-hand { width: clamp(120px, 16vw, 200px); height: auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5)); } /* Scroll cue */ .ftt-hero__scroll { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding-bottom: 1.75rem; color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); text-decoration: none; } .ftt-hero__scroll svg { width: 16px; height: 16px; animation: ftt-bob 1.8s ease-in-out infinite; } .ftt-hero__scroll:hover { color: var(--color-gold); } @keyframes ftt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* * ============================================================ * 4. WHAT WE DO (+ ported comparison slider) * ============================================================ * Copy on the left, the before/after comparison slider on the * right. On mobile the column collapses: title/copy, then slider. * ============================================================ */ .ftt-what__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .ftt-what__title { font-weight: var(--weight-bold); margin: 0 0 1.5rem; } .ftt-what__text p { margin: 0 0 1.25rem; max-width: none; /* override main.css 65ch + auto-centre */ color: rgba(255, 255, 255, 0.85); text-align: left; } .ftt-what__text p:last-child { margin-bottom: 0; } .ftt-what__text strong { color: #fff; font-weight: var(--weight-bold); } .ftt-what__media { width: 100%; } /* --- PORTED COMPARISON SLIDER FRAME (.tt-compare*) ---------- */ .tt-compare__slider { --tt-pos: 50%; /* divider position — JS drives this */ position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; cursor: ew-resize; touch-action: pan-y; /* vertical swipes still scroll the page */ user-select: none; -webkit-user-select: none; } .tt-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } /* OVER layer (modern) — clipped to show only the LEFT --tt-pos */ .tt-compare__over { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--tt-pos)) 0 0); pointer-events: none; } .tt-compare__divider { position: absolute; top: 0; bottom: 0; left: var(--tt-pos); transform: translateX(-50%); width: 2px; background: #ffffff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.55); cursor: ew-resize; outline: none; } .tt-compare__divider:focus-visible .tt-compare__grip { box-shadow: 0 0 0 3px var(--color-gold-glow); } .tt-compare__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.35rem; color: #ffffff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); pointer-events: none; } .tt-compare__grip { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid #ffffff; border-radius: 50%; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background-color 0.2s ease, color 0.2s ease; } .tt-compare__hand { width: 22px; height: 22px; } .tt-compare__chevron { width: 14px; height: 14px; opacity: 0.9; } .tt-compare__slider.is-dragging .tt-compare__grip { background: #ffffff; color: #111111; } .tt-compare__slider.is-dragging { cursor: grabbing; } /* * ============================================================ * 5. HOW IT WORKS — four hover cards * ============================================================ * A centred title above four cards. Each card has its title * ABOVE a bordered, translucent box (icon + copy). The box is * the hover target: it lifts, its border turns gold and the icon * picks up the brand glow — the same gold-glow language as the * site's buttons. * ============================================================ */ .ftt-how__title { font-weight: var(--weight-bold); margin: 0 0 clamp(2.5rem, 6vw, 4rem); } .ftt-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .ftt-card { display: flex; flex-direction: column; } .ftt-card__title { font-size: 1.05rem; font-weight: var(--weight-bold); text-align: center; margin: 0 0 1rem; /* Bottom-align titles so every box starts on the same line, even when a title wraps onto two rows */ min-height: 2.8em; display: flex; align-items: flex-end; justify-content: center; } .ftt-card__box { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 1.5rem; border: 1px solid var(--color-border); background: rgba(11, 11, 11, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .ftt-card__box:hover { transform: translateY(-6px); border-color: var(--color-gold); background: rgba(11, 11, 11, 0.72); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 20px var(--color-gold-glow); } .ftt-card__icon { display: inline-flex; color: #ffffff; margin-bottom: 1.25rem; transition: color 0.25s ease, transform 0.25s ease; } .ftt-card__icon svg { width: 48px; height: 48px; } .ftt-card__box:hover .ftt-card__icon { color: var(--color-gold); transform: scale(1.08); } .ftt-card__text { margin: 0; max-width: none; font-size: 0.9rem; line-height: 1.6; color: var(--color-text-muted); } /* * ============================================================ * 6. WHY IT WORKS — intro + two configurable buttons * ============================================================ */ .ftt-why__title { font-weight: var(--weight-bold); margin: 0 0 1.5rem; } .ftt-why__lead { text-align: center; margin: 0 auto 0.75rem; font-size: 1.1rem; max-width: none; } .ftt-why__lead strong { font-weight: var(--weight-bold); color: #fff; } .ftt-why__intro { color: var(--color-text-muted); max-width: 62ch; margin: 0 auto clamp(2.5rem, 6vw, 4rem); } .ftt-why__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); } .ftt-why__col { display: flex; flex-direction: column; align-items: center; text-align: center; } .ftt-why__eyebrow { display: block; margin-bottom: 0.85rem; } .ftt-why__btn { min-width: 240px; margin-bottom: 2.25rem; } .ftt-why__points { text-align: center; } .ftt-why__points h4 { margin: 1.75rem 0 0.5rem; font-size: 1.05rem; font-weight: var(--weight-bold); color: #fff; } .ftt-why__points h4:first-child { margin-top: 0; } .ftt-why__points p { margin: 0 auto; max-width: 44ch; font-size: 0.9rem; color: var(--color-text-muted); } /* * ============================================================ * 7. GET IN TOUCH — closing call to action * ============================================================ */ .ftt-cta__title { font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 1.5rem; } .ftt-cta__body { color: var(--color-text-muted); max-width: 55ch; margin: 0 auto 2.5rem; font-size: clamp(1rem, 2vw, 1.25rem); } .ftt-cta__em { color: var(--color-gold); } /* * ============================================================ * 8. SCROLL REVEAL * ============================================================ * time-travel.js adds .ftt-reveal to the cards and columns, then * .is-visible as they enter the viewport. Because the base class * is added BY the JS, the content is fully visible if JS is off. * ============================================================ */ .ftt-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .ftt-reveal.is-visible { opacity: 1; transform: none; } /* * ============================================================ * 9. RESPONSIVE — max-width 768px * ============================================================ */ @media (max-width: 768px) { /* Hero: stack, centre, phone above the intro */ .ftt-hero__lower { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; } .ftt-hero__graphic { order: -1; justify-content: center; } .ftt-hero__intro { margin: 0 auto; } .ftt-hero__intro p { margin-left: auto; margin-right: auto; } /* What we do: single column, centred copy */ .ftt-what__inner { grid-template-columns: 1fr; row-gap: 2rem; } .ftt-what__title { text-align: center; } .ftt-what__text p { text-align: center; font-size: 0.95rem; } /* How it works: stack the four cards */ .ftt-how__grid { grid-template-columns: 1fr; gap: 1.5rem; } .ftt-card__title { min-height: 0; /* no need to align across a single column */ } /* Why it works: stack the two columns */ .ftt-why__cols { grid-template-columns: 1fr; gap: 3rem; } /* Smaller slider handle on small screens */ .tt-compare__grip { width: 40px; height: 40px; } .tt-compare__hand { width: 19px; height: 19px; } } /* * ============================================================ * 10. REDUCED MOTION * ============================================================ */ @media (prefers-reduced-motion: reduce) { .ftt-hero__scroll svg { animation: none; } .ftt-reveal { opacity: 1 !important; transform: none !important; transition: none; } .ftt-card__box, .ftt-card__icon { transition: none; } }