/* ========================================================================= ACC — Shared Motion System (motion.css) Premium, restrained scroll/entrance motion. Reuses existing design tokens and easings. Motion is OPT-IN via the `.motion` class on , which is added by an inline head snippet only when the browser supports it AND the user has not requested reduced motion. If anything fails, content stays fully visible — never a blank page. Existing easings reused from the site: --ease-smooth : cubic-bezier(0.22, 1, 0.36, 1) (reveals) --ease-spring : cubic-bezier(0.34, 1.56, 0.64, 1) (hover lift) ========================================================================= */ :root { --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-dur: 0.7s; --motion-rise: 28px; } /* ========================================================================= BRAND / LOGO — the real Alabama Custom Cabins emblem (acc-logo.png) shown as a circular cream "stamp" badge with a thin gold ring, so the logo's cream background reads as an intentional badge on the dark theme. Applies regardless of motion (logo must always show). ========================================================================= */ img[src="acc-logo.png"] { border-radius: 50%; background: #f5f0e4; object-fit: contain; box-shadow: 0 0 0 1.5px rgba(201, 168, 76, 0.5); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } /* nav badge */ .nav-logo img[src="acc-logo.png"] { width: 42px !important; height: 42px !important; } .nav-logo:hover img[src="acc-logo.png"] { transform: rotate(-4deg) scale(1.05); box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.85); } /* footer badge (larger) */ .footer-logo-img[src="acc-logo.png"] { width: 76px !important; height: 76px !important; opacity: 1 !important; } @media (max-width: 768px) { .nav-logo img[src="acc-logo.png"] { width: 38px !important; height: 38px !important; } } /* ------------------------------------------------------------------------- SAFETY: if motion is off (no JS, unsupported, or reduced-motion), force every animated element to its final, visible state. This overrides the per-page inline `.reveal { opacity:0 }` rule so content can't get stuck hidden. ------------------------------------------------------------------------- */ html:not(.motion) .reveal, html:not(.motion) [data-reveal], html:not(.motion) .hero-content > * { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------------------- REVEAL — fade + rise as elements enter the viewport. Drives the existing `.reveal` hook plus a new `[data-reveal]` hook. motion.js toggles `.is-visible`. ------------------------------------------------------------------------- */ html.motion .reveal, html.motion [data-reveal] { opacity: 0; transform: translateY(var(--motion-rise)); filter: blur(6px); transition: opacity var(--motion-dur) var(--ease-smooth), transform var(--motion-dur) var(--ease-smooth), filter var(--motion-dur) var(--ease-smooth); will-change: opacity, transform, filter; } html.motion .reveal.is-visible, html.motion .reveal.visible, html.motion [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } /* Stagger: motion.js sets --stagger-i (item index) on grouped children. */ html.motion [data-reveal-group] > * { transition-delay: calc(var(--stagger-i, 0) * 90ms); } /* ------------------------------------------------------------------------- HERO ENTRANCE — staggered fade + rise on load. eyebrow -> h1 -> sub -> note -> buttons. ------------------------------------------------------------------------- */ html.motion .hero-content > * { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth); } html.motion .hero-content.hero-in > * { opacity: 1; transform: none; } html.motion .hero-content.hero-in > *:nth-child(1) { transition-delay: 0.10s; } html.motion .hero-content.hero-in > *:nth-child(2) { transition-delay: 0.22s; } html.motion .hero-content.hero-in > *:nth-child(3) { transition-delay: 0.34s; } html.motion .hero-content.hero-in > *:nth-child(4) { transition-delay: 0.46s; } html.motion .hero-content.hero-in > *:nth-child(5) { transition-delay: 0.58s; } /* ------------------------------------------------------------------------- PARALLAX — subtle. motion.js writes --parallax (px) per frame. Foreground hero content drifts; only applied on desktop (see media query). ------------------------------------------------------------------------- */ html.motion [data-parallax] { will-change: transform; } /* ------------------------------------------------------------------------- MICRO-INTERACTIONS — smooth, GPU-friendly hover polish layered on top of the existing card/button transitions (kept consistent with site easings). ------------------------------------------------------------------------- */ html.motion .btn-primary, html.motion .btn-ghost, html.motion .model-card { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-smooth), background 0.25s ease, border-color 0.25s ease, color 0.2s ease; } html.motion .btn-primary:hover, html.motion .btn-ghost:hover { transform: translateY(-2px); } html.motion .model-card:hover { transform: translateY(-4px); } /* ------------------------------------------------------------------------- MOBILE — light motion (per brief). The per-page inline stylesheet disables reveals entirely on <=768px with !important; re-enable a gentler version here (this sheet loads after the inline styles, so it wins). Parallax and pinning stay OFF on mobile/touch. ------------------------------------------------------------------------- */ @media (max-width: 768px) { html.motion .reveal, html.motion [data-reveal] { opacity: 0 !important; transform: translateY(16px) !important; transition: opacity 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth) !important; } html.motion .reveal.is-visible, html.motion .reveal.visible, html.motion [data-reveal].is-visible { opacity: 1 !important; transform: none !important; } /* No parallax drift on touch — neutralize any JS-applied transform. */ html.motion [data-parallax] { transform: none !important; } } /* ========================================================================= MODEL-PAGE ENHANCEMENTS (CSS-only; hook into existing markup) ========================================================================= */ /* ------------------------------------------------------------------------- KEN BURNS — the active carousel slide slowly drifts/zooms for a cinematic, "video-like" feel using the real photos. Contained by the stage's overflow:hidden. Independent of the slide's opacity crossfade. ------------------------------------------------------------------------- */ html.motion .carousel-slide.active { animation: accKenBurns 14s var(--ease-smooth) forwards; } @keyframes accKenBurns { from { transform: scale(1.0); } to { transform: scale(1.06); } } /* ------------------------------------------------------------------------- LIGHTBOX POLISH — gentle zoom + fade on the image as the lightbox opens, layered on the existing #lightbox opacity transition. ------------------------------------------------------------------------- */ html.motion #lightbox-img { transition: transform 0.4s var(--ease-smooth), opacity 0.4s ease; transform: scale(0.94); opacity: 0; } html.motion #lightbox.open #lightbox-img { transform: scale(1); opacity: 1; } /* ------------------------------------------------------------------------- MICRO-INTERACTIONS — spec cards lift + gold accent on hover. ------------------------------------------------------------------------- */ html.motion .spec-item { transition: transform 0.3s var(--ease-spring), border-color 0.25s ease, box-shadow 0.3s var(--ease-smooth); } html.motion .spec-item:hover { transform: translateY(-3px); border-color: var(--c-gold, #c9a84c); box-shadow: 0 10px 28px rgba(13, 26, 13, 0.10); } /* ------------------------------------------------------------------------- LINE-DRAW ACCENT — a gold underline draws in beneath section headings the first time they scroll into view. motion.js adds `.accent-in`. Centered so it works under left- or center-aligned headings. ------------------------------------------------------------------------- */ html.motion .specs-heading, html.motion .section-title, html.motion [data-accent] { position: relative; } html.motion .specs-heading::after, html.motion .section-title::after, html.motion [data-accent]::after { content: ''; position: absolute; left: 50%; bottom: -14px; height: 2px; width: 0; background: var(--c-gold, #c9a84c); transform: translateX(-50%); transition: width 0.9s var(--ease-smooth) 0.15s; } html.motion .specs-heading.accent-in::after, html.motion .section-title.accent-in::after, html.motion [data-accent].accent-in::after { width: 60px; } /* ========================================================================= MODERN POLISH — site-wide ========================================================================= */ /* ------------------------------------------------------------------------- SCROLL PROGRESS BAR — thin gold bar at the very top, scales with scroll. Element is injected by motion.js. transform-only. ------------------------------------------------------------------------- */ html.motion .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-gold, #c9a84c), var(--c-gold-light, #dfc07a)); z-index: 2000; pointer-events: none; will-change: transform; } /* ------------------------------------------------------------------------- WORD-RISE HEADLINE — words rise out of a mask, staggered. Applied to the hero headline by motion.js (per-word transition-delay set inline). ------------------------------------------------------------------------- */ html.motion .words .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } html.motion .words .word-i { display: inline-block; transform: translateY(115%); transition: transform 0.85s var(--ease-smooth); will-change: transform; } html.motion .words.in .word-i { transform: translateY(0); } /* let word-rise own the hero headline so the container entrance doesn't double up */ html.motion .hero-content > h1.words { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------------------- MAGNETIC CARD TILT — gentle 3D tilt toward the cursor (desktop only). motion.js writes the transform; this just smooths it. ------------------------------------------------------------------------- */ @media (min-width: 769px) and (pointer: fine) { html.motion .model-card { transform-style: preserve-3d; } } /* ========================================================================= MODERN — site-wide glassmorphism cards, glow, and dark-section aurora. Additive (mostly box-shadow / hover) so it layers on existing card styles without breaking layouts. Applies on all pages via this shared sheet. ========================================================================= */ /* Full frosted-glass on standalone cards (have their own border/radius) */ .investor-stat-box, .faq-item, .review-card { background: rgba(245,240,228,0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05); } /* Glow + lift on all dark-section cards */ .investor-stat-box, .spec-item, .faq-item, .review-card, .speed-step { transition: transform 0.3s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .investor-stat-box:hover, .spec-item:hover, .faq-item:hover, .review-card:hover, .speed-step:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.32), 0 0 26px rgba(201,168,76,0.13); border-color: rgba(201,168,76,0.45); } /* Model cards — stronger glow on hover (transform handled by tilt/existing) */ .model-card:hover { box-shadow: 0 20px 54px rgba(0,0,0,0.42), 0 0 34px rgba(201,168,76,0.16); } /* Aurora glow behind dark content sections */ .specs-section, .faq-section, .cta-strip { position: relative; isolation: isolate; overflow: hidden; } .specs-section::before, .faq-section::before, .cta-strip::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42% 60% at 12% 16%, rgba(201,168,76,0.10), transparent 70%), radial-gradient(46% 64% at 90% 88%, rgba(60,96,52,0.28), transparent 72%); } .specs-section > *, .faq-section > *, .cta-strip > * { position: relative; z-index: 1; } /* ========================================================================= PANNING IMAGE BANDS — full-bleed cinematic Ken Burns bands (hero-style). Use:

…

========================================================================= */ .pan-band { position: relative; height: 62vh; min-height: 440px; max-height: 680px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pan-band-img { position: absolute; inset: -2%; background-size: cover; background-position: center; transform: scale(1.08); transform-origin: center; will-change: transform; } html.motion .pan-band-img { animation: panBand 26s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; } @keyframes panBand { from { transform: scale(1.06) translate(-1.5%, -1%); } to { transform: scale(1.18) translate(1.5%, 1%); } } .pan-band-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,26,13,0.58), rgba(13,26,13,0.38) 50%, rgba(13,26,13,0.72)); } .pan-band-content { position: relative; z-index: 2; text-align: center; max-width: 780px; padding: 0 24px; } .pan-band-content .eyebrow { justify-content: center; color: var(--c-gold); } .pan-band-content h2 { font-family: var(--font-serif); font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 700; color: var(--c-warm-white); letter-spacing: -0.02em; line-height: 1.12; margin-top: 6px; text-shadow: 0 2px 34px rgba(0,0,0,0.45); } .pan-band-content h2 em { font-style: italic; color: var(--c-gold); } @media (max-width: 768px) { .pan-band { height: 52vh; min-height: 360px; } } @media (prefers-reduced-motion: reduce) { .pan-band-img { animation: none !important; } } /* Mobile readability: spec boxes read as one clean column on phones (95% of traffic) */ @media (max-width: 560px) { .specs-grid { grid-template-columns: 1fr !important; } } /* Mobile: center the whole footer cleanly (was mixing centered text + left columns) */ @media (max-width: 768px) { footer .footer-grid > div { display: flex !important; flex-direction: column; align-items: center; text-align: center; } footer .footer-logo-img { margin-left: auto !important; margin-right: auto !important; } footer .footer-links { align-items: center; } footer .footer-contact-info { align-items: center !important; } footer .footer-contact-item { justify-content: center; } footer .footer-social { justify-content: center; } footer .footer-bottom { justify-content: center !important; text-align: center; flex-wrap: wrap; } } /* Page-header turned into a panning hero (about / contact / models headers) */ .page-header.pan-hero { position: relative; overflow: hidden; } .page-header.pan-hero::after { display: none; } .page-header.pan-hero > *:not(.pan-band-img):not(.pan-band-overlay) { position: relative; z-index: 2; } /* ------------------------------------------------------------------------- REDUCED MOTION — hard off. Belt-and-suspenders alongside the inline head snippet that withholds the `.motion` class entirely. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html .reveal, html [data-reveal], html .hero-content > *, html .words .word-i { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } html [data-parallax] { transform: none !important; } html .scroll-progress { display: none !important; } } /* ── COOKIE CONSENT BANNER ── */ .cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200; max-width: 720px; margin: 0 auto; background: rgba(13,26,13,0.98); border: 1px solid rgba(201,168,76,0.35); border-radius: 10px; padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); transform: translateY(160%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); } .cookie-consent.show { transform: translateY(0); } .cookie-consent-text { flex: 1 1 260px; font-size: 0.85rem; line-height: 1.5; color: #f5f0e4; margin: 0; } .cookie-consent-text a { color: #c9a84c; } .cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-btn { font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 9px 18px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(201,168,76,0.5); min-height: 40px; } .cookie-accept { background: #c9a84c; color: #0d1a0d; border-color: #c9a84c; } .cookie-decline { background: transparent; color: #f5f0e4; } @media (max-width: 768px) { .cookie-consent { bottom: 84px; } } @media (max-width: 600px) { .cookie-consent { flex-direction: column; align-items: stretch; } .cookie-consent-actions { justify-content: flex-end; } }