scrolling, scaling, sleeping...

Author: shamikkarkhanis

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#006662" />
     <title>CAPY</title>
     <meta name="description" content="All-in-one student involvement utility." />
     <link rel="preconnect" href="https://fonts.googleapis.com" />

src/index.css

@@ -15,13 +15,12 @@ body,
 html,
 body {
   overflow: hidden;
+  background: var(--c-bg);
+  transition: background-color 200ms ease;
 }
 
-@media (max-width: 768px) {
-  html,
-  body {
-    background: var(--c-bg);
-  }
+body.rail-active {
+  background: var(--c-surface-light);
 }
 
 body {

src/lander/Lander.module.css

@@ -79,15 +79,16 @@
 @media (max-width: 768px) {
   .appRoot {
     overflow: hidden;
-    height: 100svh;
-    min-height: 100svh;
+    height: 100dvh;
+    min-height: 100dvh;
     padding: 0;
+    background: var(--c-bg);
   }
 
   .mobileSnapScroller {
     display: block;
     width: 100%;
-    height: 100svh;
+    height: 100dvh;
     overflow-y: scroll;
     overflow-x: hidden;
     scroll-snap-type: y mandatory;
@@ -101,8 +102,8 @@
 
   :global(.panel) {
     width: 100%;
-    height: 100svh;
-    min-height: 100svh;
+    height: 100dvh;
+    min-height: 100dvh;
     border-radius: 0;
     border: none;
     scroll-snap-align: start;

src/lander/Lander.tsx

@@ -51,8 +51,6 @@ function Lander() {
           <main className={styles.mobileSnapScroller}>
             <HeroSection />
             <FeaturesSection />
-            <InterfaceSection />
-            <ContactSection />
             <CapyRailSection />
           </main>
         ) : (

src/lander/sections/CapyRailSection.module.css

@@ -132,16 +132,20 @@
 @media (max-width: 768px) {
   .capyRailPanel {
     width: 100%;
-    height: 100svh;
+    height: 100dvh;
     border: none;
     border-radius: 0;
     background: var(--c-surface-light);
   }
 
   .railContent {
     width: calc(100% - var(--space-32));
-    margin: var(--space-50) var(--space-16) var(--space-32);
-    height: calc(100svh - var(--space-50) - var(--space-32));
+    margin: calc(var(--space-50) + env(safe-area-inset-top)) var(--space-16)
+      calc(var(--space-32) + env(safe-area-inset-bottom));
+    height: calc(
+      100dvh - var(--space-50) - var(--space-32) - env(safe-area-inset-top) -
+        env(safe-area-inset-bottom)
+    );
   }
 
   .railLinks {

src/lander/sections/CapyRailSection.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { AnimatedPanel } from '@/shared/components/AnimatedPanel'
 import { AspectImage } from '@/shared/components/AspectImage'
 import { StaggerWords } from '@/shared/components/StaggerWords'
@@ -15,6 +16,22 @@ const socialAssets = [
 ]
 
 export function CapyRailSection() {
+  useEffect(() => {
+    const el = document.getElementById('more')
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        document.body.classList.toggle('rail-active', entry.intersectionRatio >= 0.85)
+      },
+      { threshold: [0, 0.85, 1] },
+    )
+    observer.observe(el)
+    return () => {
+      observer.disconnect()
+      document.body.classList.remove('rail-active')
+    }
+  }, [])
+
   return (
     <AnimatedPanel className={`panel ${styles.capyRailPanel}`} id="more" staggerIndex={4}>
       <div className={styles.verticalMarkWrap} aria-hidden="true">

src/lander/sections/ContactSection.module.css

@@ -74,8 +74,9 @@
 @media (max-width: 768px) {
   .contactPanel {
     width: 100%;
-    height: 100svh;
-    padding: var(--space-50) var(--space-24) var(--space-32);
+    height: 100dvh;
+    padding: calc(var(--space-50) + env(safe-area-inset-top)) var(--space-24)
+      calc(var(--space-32) + env(safe-area-inset-bottom));
     backdrop-filter: none;
   }
 

src/lander/sections/FeaturesSection.module.css

@@ -45,20 +45,25 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100svh;
+    height: 100dvh;
     overflow-y: auto;
     gap: var(--space-16);
-    padding: var(--space-50) var(--space-24) var(--space-32);
+    padding: calc(var(--space-50) + env(safe-area-inset-top)) var(--space-24)
+      calc(var(--space-32) + env(safe-area-inset-bottom));
   }
 
-  .card-col1-row1,
   .card-col2-row1,
   .card-col2-row2,
-  .card-col1-row2-span2,
+  .card-col1-row2-span2 {
+    display: none;
+  }
+
+  .card-col1-row1,
   .card-col2-row3 {
     grid-column: unset;
     grid-row: unset;
-    min-height: 200px;
-    flex-shrink: 0;
+    min-height: 100px;
+    flex: 1 1 0;
+    flex-shrink: 1;
   }
 }

src/lander/sections/HeroSection.module.css

@@ -1,4 +1,5 @@
 .heroPanel {
+  position: relative;
   width: min(1415px, calc(100vw - var(--space-24) * 2));
   border: 1px solid var(--c-surface-border);
   background: linear-gradient(180deg, rgba(56, 171, 162, 0.2), rgba(43, 137, 130, 0.16));
@@ -11,6 +12,10 @@
   overflow: hidden;
 }
 
+.heroLogoMark {
+  display: none;
+}
+
 .heroRows {
   display: flex;
   flex-direction: column;
@@ -29,6 +34,10 @@
   line-height: 0.92;
 }
 
+.heroTitleLead {
+  white-space: nowrap;
+}
+
 .heroRowTitle h1 span:last-child {
   justify-self: end;
   text-align: right;
@@ -148,14 +157,27 @@
 @media (max-width: 768px) {
   .heroPanel {
     width: 100%;
-    height: 100svh;
-    padding: var(--space-50) var(--space-24) var(--space-32);
+    height: 100dvh;
+    padding: calc(var(--space-50) + env(safe-area-inset-top)) var(--space-24)
+      calc(var(--space-32) + env(safe-area-inset-bottom));
     justify-content: center;
     backdrop-filter: none;
+    border: none;
+    background: transparent;
+  }
+
+  .heroLogoMark {
+    display: block;
+    position: absolute;
+    top: calc(var(--space-24) + env(safe-area-inset-top));
+    right: var(--space-24);
+    width: clamp(72px, 22vw, 112px);
+    height: auto;
+    pointer-events: none;
   }
 
   .heroRowTitle h1 {
-    font-size: clamp(52px, 16vw, 80px);
+    font-size: clamp(42px, 13vw, 68px);
   }
 
   .heroDescription {

src/lander/sections/HeroSection.tsx

@@ -5,6 +5,7 @@ import { useExitNavigation } from '@/shared/hooks/useExitNavigation'
 import { StaggerWords } from '@/shared/components/StaggerWords'
 import { TypewriterWord } from '@/shared/components/TypewriterWord'
 import { PillButton } from '@/shared/components/PillButton'
+import { assets } from '@/shared/data/content'
 import styles from './HeroSection.module.css'
 
 export function HeroSection() {
@@ -40,10 +41,11 @@ export function HeroSection() {
   return (
     <>
       <AnimatedPanel className={`panel ${styles.heroPanel}`} id="home" staggerIndex={0}>
+        <img src={assets.logo} alt="CAPY" className={styles.heroLogoMark} aria-hidden="true" />
         <div className={styles.heroRows}>
           <div className={styles.heroRowTitle}>
             <h1>
-              <span>
+              <span className={styles.heroTitleLead}>
                 more <TypewriterWord words={HERO_WORDS} />
               </span>
               <span>