/* ========================================================================== home-motion.css Cinematic homepage layer for hoa180.com. Loads AFTER /css/redesign.css. Every class is namespaced hm- so nothing in the shared design system is overridden by accident. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Motion primitives (reveal on scroll) The .hm-js class is set by an inline script in . Without JS the content renders fully visible, never hidden. -------------------------------------------------------------------------- */ .hm-js .hm-reveal{ opacity:0; transform:translate3d(0,26px,0); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .hm-js .hm-reveal.hm-in{opacity:1;transform:none;will-change:auto} /* staggered children */ .hm-js .hm-reveal[data-hm-delay="1"]{transition-delay:.09s} .hm-js .hm-reveal[data-hm-delay="2"]{transition-delay:.18s} .hm-js .hm-reveal[data-hm-delay="3"]{transition-delay:.27s} .hm-js .hm-reveal[data-hm-delay="4"]{transition-delay:.36s} /* scroll progress rail */ .hm-progress{ position:fixed;top:0;left:0;height:3px;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--gold),var(--stamp)); z-index:60;pointer-events:none; } /* -------------------------------------------------------------------------- 2. Video hero -------------------------------------------------------------------------- */ .hm-hero{ position:relative; min-height:calc(100svh - 72px); min-height:calc(100vh - 72px); display:flex;align-items:flex-end; overflow:hidden; background:#0E1721; border-bottom:1px solid var(--line); isolation:isolate; } @supports (min-height:100svh){ .hm-hero{min-height:calc(100svh - 72px)} } .hm-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hm-hero-media video, .hm-hero-media img{ position:absolute;top:50%;left:50%; width:100%;height:100%; min-width:100%;min-height:100%; object-fit:cover; transform:translate3d(-50%,-50%,0); backface-visibility:hidden; transition:none; pointer-events:none; } .hm-scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg, rgba(10,18,26,.62) 0%, rgba(10,18,26,.16) 34%, rgba(10,18,26,.58) 72%, rgba(10,18,26,.9) 100%), linear-gradient(90deg, rgba(10,18,26,.6) 0%, rgba(10,18,26,.12) 62%, rgba(10,18,26,0) 100%); } .hm-hero-inner{ position:relative;z-index:2;width:100%; padding-top:120px;padding-bottom:76px; } .hm-hero-copy{max-width:44rem} .hm-hero .hm-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.09em; text-transform:uppercase;color:#F0C97A;display:block;margin-bottom:20px; } .hm-hero h1{ color:#FBF8F1; margin-bottom:22px; text-shadow:0 2px 26px rgba(6,12,18,.55); max-width:19ch; } .hm-hero h1 em{font-style:normal;color:#F3C56F} .hm-hero-p{ font-size:1.12rem;line-height:1.6;color:#DCE3E9;max-width:38rem;margin-bottom:30px; text-shadow:0 1px 16px rgba(6,12,18,.5); } .hm-hero .cta-row{margin-bottom:20px} .hm-hero .btn{border-color:#FBF8F1} .hm-hero .btn-primary{background:#FBF8F1;color:var(--ink);border-color:#FBF8F1} .hm-hero .btn-primary:hover{box-shadow:0 4px 0 var(--gold)} .hm-hero .btn-ghost{ background:rgba(12,20,28,.34);color:#FBF8F1; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .hm-hero .btn-ghost:hover{background:rgba(12,20,28,.62)} .hm-hero-note{ font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.03em; color:#C3CDD6;margin:0; } .hm-hero-note strong{color:#FBF8F1;font-weight:500} .hm-cue{ position:absolute;left:50%;bottom:22px;z-index:2; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.22em; text-transform:uppercase;color:rgba(251,248,241,.72); text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:7px; } .hm-cue span.hm-cue-rail{ display:block;width:1px;height:34px; background:linear-gradient(180deg,rgba(251,248,241,.66),rgba(251,248,241,0)); animation:hm-cue-drop 2.4s ease-in-out infinite; } @keyframes hm-cue-drop{ 0%,100%{transform:translateY(0);opacity:.35} 50%{transform:translateY(6px);opacity:1} } .hm-cue:hover{color:#FBF8F1} /* -------------------------------------------------------------------------- 3. Dusk band (the 9pm question -> 24/7 AI assistant) -------------------------------------------------------------------------- */ .hm-band{ position:relative; background:#141F2B;color:#E4EAEF; padding:96px 0;border-bottom:none; overflow:hidden; } .hm-band-grid{ display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center; } .hm-media{ position:relative; aspect-ratio:16/9; width:100%; border-radius:5px; overflow:hidden; background:#0E1721; border:1px solid rgba(216,210,196,.22); box-shadow:0 22px 60px rgba(0,0,0,.42); } .hm-media video,.hm-media img{ position:absolute;left:0;top:0;width:100%;height:100%; object-fit:cover;display:block; transform:translateZ(0);backface-visibility:hidden; } .hm-media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,20,28,.05),rgba(12,20,28,.42)); pointer-events:none; } .hm-media-cap{ position:absolute;left:14px;bottom:12px;z-index:2; font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:rgba(251,248,241,.86); } .hm-kicker{ font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:#F0C97A;display:block;margin-bottom:16px; } .hm-band h2{color:#FBF8F1;max-width:20ch} .hm-band p{color:#B9C6D1;max-width:34rem;margin-bottom:16px} .hm-band p strong{color:#FBF8F1;font-weight:600} .hm-priceline{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; border-top:1px solid rgba(216,210,196,.22); border-bottom:1px solid rgba(216,210,196,.22); padding:18px 0;margin:26px 0 26px; } .hm-price-num{ font-family:'Bricolage Grotesque',sans-serif;font-weight:700; font-size:clamp(2.1rem,4.4vw,3rem);line-height:1;color:#F3C56F;letter-spacing:-.02em; } .hm-price-unit{font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:#A9B7C4;letter-spacing:.03em} .hm-band .cta-row{gap:14px} .hm-band .btn{border-color:#FBF8F1} .hm-band .btn-primary{background:#FBF8F1;color:var(--ink);border-color:#FBF8F1} .hm-band .btn-ghost{background:transparent;color:#FBF8F1} .hm-band .btn-ghost:hover{background:rgba(251,248,241,.1)} /* the answered-question card, sitting on the dark band */ .hm-proof{margin-top:64px;display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center} .hm-proof-note{font-family:'IBM Plex Mono',monospace;font-size:.8rem;line-height:1.9;color:#8FA0AE;letter-spacing:.03em} .hm-proof-note b{display:block;color:#F0C97A;font-weight:500;margin-bottom:6px} .hm-band .doc-card{transform:rotate(-.7deg)} /* -------------------------------------------------------------------------- 4. Resources strip (the newly shipped pages) -------------------------------------------------------------------------- */ .hm-res-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px;margin-top:40px; } .hm-res-card{ display:block;text-decoration:none; background:#FFFDF8;border:1px solid var(--line);border-radius:4px; padding:22px 22px 20px; box-shadow:4px 4px 0 var(--paper-deep); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height:100%; } .hm-res-card:hover{transform:translateY(-3px);box-shadow:4px 7px 0 var(--paper-deep);border-color:var(--gold)} .hm-res-num{ font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em; color:var(--stamp);display:block;margin-bottom:12px; } .hm-res-card h3{ font-family:'Bricolage Grotesque',sans-serif;font-size:1.08rem;font-weight:600; letter-spacing:-.01em;margin-bottom:8px;line-height:1.25; } .hm-res-card p{font-size:.92rem;color:var(--ink-soft);margin:0} .hm-res-card .hm-res-go{ display:inline-block;margin-top:14px;font-size:.86rem;font-weight:600; border-bottom:2px solid var(--gold);padding-bottom:2px; } /* -------------------------------------------------------------------------- 5. Price chips on the service rows -------------------------------------------------------------------------- */ .hm-chip{ display:inline-block; font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.05em; color:var(--approve);border:1.5px solid var(--approve);border-radius:99px; padding:5px 13px;margin-bottom:14px;white-space:nowrap; } .hm-linkrow{display:flex;gap:26px;flex-wrap:wrap;align-items:center} /* subtle parallax host for section media */ .hm-par{transition:transform .1s linear} /* -------------------------------------------------------------------------- 6. Footer navigation groups -------------------------------------------------------------------------- */ .hm-foot-nav{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px;padding-bottom:30px; } .hm-foot-nav h4{ font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.11em; text-transform:uppercase;color:#8E9AA7;font-weight:500;margin-bottom:12px; } .hm-foot-nav ul{list-style:none;margin:0;padding:0} .hm-foot-nav li{margin-bottom:9px} .hm-foot-nav a{margin-left:0;display:inline-block;line-height:1.4} /* -------------------------------------------------------------------------- 7. Responsive -------------------------------------------------------------------------- */ @media(max-width:960px){ .hm-band-grid{grid-template-columns:1fr;gap:38px} .hm-band-grid .hm-band-copy{order:0} .hm-band-grid .hm-media{order:1} .hm-proof{grid-template-columns:1fr;gap:32px;margin-top:48px} } @media(max-width:860px){ .hm-hero{min-height:76svh;min-height:76vh} .hm-hero-inner{padding-top:84px;padding-bottom:66px} .hm-hero h1{max-width:none} .hm-hero-media video,.hm-hero-media img{transform:translate3d(-50%,-50%,0) scale(1.02)} } @media(max-width:620px){ .hm-hero{min-height:72svh;min-height:72vh} .hm-hero-inner{padding-top:60px;padding-bottom:56px} .hm-hero-p{font-size:1rem} .hm-hero .cta-row{gap:10px} .hm-hero .cta-row .btn{flex:1 1 100%;text-align:center} .hm-cue{display:none} .hm-band{padding:64px 0} .hm-priceline{margin:20px 0} .hm-band .doc-card{transform:none;max-width:100%} .hm-band .cta-row .btn{flex:1 1 100%;text-align:center} .hm-res-grid{grid-template-columns:1fr;margin-top:30px} .hm-foot-nav{gap:22px} } /* nothing may push the page sideways. Applied to body only: overflow propagates to the viewport while html keeps overflow:visible, so the sticky header in redesign.css keeps working. */ body{max-width:100%;overflow-x:hidden} /* -------------------------------------------------------------------------- 8. Reduced motion: no movement anywhere, posters stay put, content visible -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .hm-js .hm-reveal, .hm-js .hm-reveal.hm-in{opacity:1!important;transform:none!important;transition:none!important} .hm-progress{display:none} .hm-cue span.hm-cue-rail{animation:none!important} .hm-hero-media video,.hm-hero-media img, .hm-media video,.hm-media img, .hm-par{transform:translate3d(-50%,-50%,0) scale(1)!important} .hm-media video,.hm-media img{transform:none!important} .hm-res-card:hover{transform:none} }