/* * Homepage hero — typography and layout per Figma. * Desktop frame: node 4039:9193 (1440). Mobile frame: node 4002:5178 (390). * Loaded after pointer-by-shakuro.css; these override the Webflow export's * global h1 / .hero-description rules for the hero only, so the other pages' * headings keep the site-wide Aeonik Pro scale. * PP Pangaia is a licensed face; the woff2 lives in /fonts and is shared with * the app (pointer-frontends/app/public/fonts). Its @font-face is declared in * pointer-by-shakuro.css, alongside Aeonik — the validation quote uses it too. */ /* --------------------------------------------------------------------------- * Hero reveal — CSS only, on purpose. * * This used to be Webflow IX2 action list a-5 ("Page Loaded/Hero Screen"), * fired by event e-9 on PAGE_START. That made the hero text invisible until * js/pointer-by-shakuro.js (538 KB, unminified) had downloaded and booted: the * inline script stamps .w-mod-js on immediately, which activated * html.w-mod-js:not(.w-mod-ix) [data-w-id="…"] { opacity: 0 } * and only the IX2 engine ever removes the :not(.w-mod-ix) condition. Measured * on 1.6 Mbps / 150ms RTT: headline readable at 19.7s, against a 224ms paint. * * So the hero now animates itself. Keyframes run at CSS-parse time, need no JS, * and cannot be delayed by anything below. e-9 is deleted from the IX2 data and * the matching [data-w-id] preload rules are gone from index.html's — if * you restore any of those three, restore all three or the hero will animate * twice. Everything below the fold is still IX2 (scroll reveals, navbar). * * Values are carried over from a-5 so the look is unchanged; only the timing is * different — a-5 held the headline for 2000ms and then took 2300ms to unblur. * ------------------------------------------------------------------------- */ @keyframes hero-heading-in { from { opacity: 0; transform: translate3d(0, 15rem, 0) rotateZ(3deg); filter: blur(40px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes hero-description-in { from { opacity: 0; transform: translate3d(0, 20rem, 0) rotateZ(3deg); filter: blur(35px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes hero-benefit-in { from { opacity: 0; transform: translate3d(0, 12rem, 0); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-uncover { from { opacity: 1; } to { opacity: 0; } } /* The video's slow settle is ambient — it outlasts the text on purpose. */ @keyframes hero-video-settle { from { transform: scale3d(1.2, 1.2, 1); } to { transform: none; } } @media (prefers-reduced-motion: no-preference) { /* Black cover over the hero video. Previously faded by a jQuery addClass in index.html, so it also waited on the CDN jQuery request. */ .hero-bg-blur { animation: hero-uncover 600ms cubic-bezier(0.4, 0, 0.2, 1) both; } .dog-video { animation: hero-video-settle 2200ms cubic-bezier(0.16, 1, 0.3, 1) both; } h1.hero-heading { animation: hero-heading-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; } .hero-description { animation: hero-description-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both; } /* .first / .second / .third are already on these in the markup. */ .hero-benefit-text.first { animation: hero-benefit-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; } .hero-benefit-text.second { animation: hero-benefit-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both; } .hero-benefit-text.third { animation: hero-benefit-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 640ms both; } /* The dots that sit at the end of each connector line. */ .hero-benefits-lines .bullet { animation: hero-fade-in 400ms linear 700ms both; } } /* Reduced motion: no keyframes at all, so every element above renders in its natural final state. Nothing to undo. */ /* The hero video fills its wrapper and crops with object-fit, the same way the footer video does. The Webflow export instead sizes it with width: fit-content plus hand-tuned left/right offsets per breakpoint (pointer-by-shakuro.css, the 991 / 767 / 479 blocks). Those were calibrated for one viewport, so on a phone the 2560x1080 frame ended up ~2958px wide at left:-747px — almost entirely off-screen, leaving the hero looking black. */ .w-background-video > .hero-video, .hero-video { inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; } /* 40rem extra clearance below the nav bar, on top of whatever padding-top pointer-by-shakuro.css's .hero carries at each breakpoint — a margin here avoids having to duplicate every one of that file's breakpoint values. */ .hero-text { margin-top: 40rem; } /* Figma 1440: PP Pangaia Medium 80/88, no tracking. */ .hero-heading { font-family: 'PP Pangaia', Georgia, serif; /* The global h1 carries -2.76px, tuned for the sans face — far too tight here. */ letter-spacing: normal; font-size: 80rem; line-height: 88rem; /* Figma breaks the headline after "Health."; at 80rem that line measures 697rem and "…Health. Protect" 962rem, so cap between the two. */ max-width: 830rem; } @media screen and (min-width: 992px) { /* Figma pins the tagline to 246px so it breaks after "dogs". */ .hero-description { max-width: 246rem; } } @media screen and (min-width: 1920px) { /* rem stops scaling at 1920, so the hero steps up like the rest of the export. */ .hero-heading { font-size: 104rem; line-height: 114rem; /* same break, measured at 104rem: 906rem vs 1250rem */ max-width: 1080rem; } .hero-description { max-width: 300rem; } } @media screen and (max-width: 991px) { .hero-heading { font-size: 56rem; line-height: 62rem; /* same break, measured at 56rem: 488rem vs 673rem */ max-width: 560rem; } } @media screen and (max-width: 767px) { /* Figma 390: 48/56, breaking as "Predict Their / Health. Protect / Their Future." */ .hero-heading { font-size: 48rem; line-height: 56rem; /* the column itself is the constraint here — it wraps to Figma's three lines */ max-width: none; } /* Figma 390: full column width less the 16px right gutter; tagline 18/24. */ .hero-description { max-width: 342rem; } .hero-description .body-500 { font-size: 18rem; line-height: 24rem; } /* Figma 390: 64px below the title block + 40px section gap before the metrics. */ .hero-text { padding-bottom: 34rem; } }