Put the landing sections on one white surface

Case Studies through Contact share a white background, separated by a
full-width rule at each boundary. The footer matches the header, so the
page opens and closes on the same tone.

viewport-fit=cover with theme-color lets iOS paint its status bar to
match the header, and the footer pads for the home indicator.

Author: IntellyCode

index.html

@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#f9fbfa">
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

src/components/Section.scss

@@ -8,12 +8,8 @@
 .section-white {
   background: t.$white;
   border-top: 1px solid t.$line;
-  border-bottom: 1px solid t.$line;
 
-  &:last-child {
-    flex-grow: 1;
-    border-bottom: 0;
-  }
+  &:last-child { flex-grow: 1; }
 }
 
 .section-pale {

src/layout/Footer.scss

@@ -2,5 +2,6 @@
 
 .site-footer {
   padding-block: 1.25rem;
-  background: t.$tint;
+  background: t.$paper;
+  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
 }

src/sections/Contact.tsx

@@ -2,7 +2,7 @@ import { site } from '../site'
 
 export default function Contact() {
   return (
-    <section id="contact" className="py-5 section-pale">
+    <section id="contact" className="py-5 section-white">
       <div className="container py-md-5 reveal">
         <h2 className="section-title mb-3">Contact</h2>
         <p className="hero-tagline text-body-secondary mb-4" style={{ maxWidth: '34em' }}>

src/sections/Testimonials.tsx

@@ -18,7 +18,7 @@ export default function Testimonials() {
   }
 
   return (
-    <Section id="testimonials" tone="pale" title="What clients say" subtitle="From the reference letters of people I worked with directly.">
+    <Section id="testimonials" tone="white" title="What clients say" subtitle="From the reference letters of people I worked with directly.">
       <div className="swipe-row" ref={row} onScroll={onScroll}>
         {testimonials.map((item) => (
           <figure key={item.name} className="reveal quote-card card p-4 mb-0">