Update mission page

Author: wkirby

src/components/PageHeader.tsx

@@ -4,10 +4,11 @@ import styles from "styles/components/PageHeader.module.scss";
 export const PageHeader: React.FC<{
   title: React.ReactNode;
   subtitle?: React.ReactNode;
+  center?: boolean;
   className?: string;
-}> = ({ title, subtitle, className }) => {
+}> = ({ title, subtitle, center, className }) => {
   return (
-    <header className={clsx(styles.page_header, className)}>
+    <header className={clsx(styles.page_header, center && styles["page_header--center"], className)}>
       <h1 className={styles.page_header__title}>{title}</h1>
       {subtitle && <h2 className={styles.page_header__subtitle}>{subtitle}</h2>}
       <hr className="divider" />

src/pages/_app.tsx

@@ -1,11 +1,12 @@
 import Router from "next/router";
 import Script from "next/script";
 import NProgress from "nprogress";
-import smartquotes from 'smartquotes';
+import smartquotes from "smartquotes";
 
-import { IBM_Plex_Mono, Inter } from "next/font/google";
+import { IBM_Plex_Mono, Inter, Noto_Serif } from "next/font/google";
 
 export const inter = Inter({ subsets: ["latin"], display: "swap" });
+export const noto = Noto_Serif({ subsets: ["latin"], display: "swap" });
 export const mono = IBM_Plex_Mono({
   weight: ["400", "700"],
   style: ["normal", "italic"],
@@ -31,6 +32,7 @@ export default function MyApp({ Component, pageProps }) {
         :root {
           --font-inter: ${inter.style.fontFamily};
           --font-mono: ${mono.style.fontFamily};
+          --font-noto: ${noto.style.fontFamily};
         }
       `}</style>
 
@@ -40,8 +42,16 @@ export default function MyApp({ Component, pageProps }) {
         src="https://plausible.io/js/script.js"
       />
 
-      <meta name="theme-color" media="(prefers-color-scheme: light)" content="#2173aa" />
-      <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2c3e50" />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: light)"
+        content="#2173aa"
+      />
+      <meta
+        name="theme-color"
+        media="(prefers-color-scheme: dark)"
+        content="#2c3e50"
+      />
 
       <div id="wrapper">
         <Component {...pageProps} />

src/pages/mission.tsx

@@ -7,12 +7,7 @@ import { SiteLayout } from "components/SiteLayout";
 import { getPostData, getRandomCta } from "lib/posts";
 import { Post } from "lib/types";
 import { NextPage } from "next";
-
-const Disclaimer = () => (
-  <MarkdownContent
-    content={`>[!NOTE]\n>This originally appeared as a [blog post](/blog/2015/04/23/work-sustainably/) way back in 2015. We've migrated the content here to make it easier to find, and reaffirm our commitment even a decade on.`}
-  />
-);
+import Link from "next/link";
 
 export async function getStaticProps() {
   const content = await getPostData({
@@ -46,21 +41,82 @@ const MissionPage: NextPage<{ cta: CtaProps; content: Post }> = ({
         <article className="stack gap-md">
           <PageHeader
             title="Our Mission"
+            center
             subtitle={
-              <>
-                Work <s>hard</s>{" "}
-                <span className="text-primary">sustainably</span>.
-              </>
+              <span className="text-muted">Good code. Sustainable work.</span>
             }
           />
 
-          <Disclaimer />
-
           <div className="stack gap-lg">
-            <PostImage post={content} />
-
             <section className="typography">
-              <MarkdownContent content={content.contentHtml} />
+              <p>
+                When we started Apsis Labs,{" "}
+                <Link href="/blog/2015/04/23/work-sustainably/">
+                  we didn't draw a line between our personal values and the
+                  company's values
+                </Link>{" "}
+                — they were one and the same. And for over a decade, that's
+                worked for us: we strive to build a company where people want to
+                work: one that prioritizes{" "}
+                <strong>
+                  quality, sustainability, and respect that life happens away
+                  from the computer.
+                </strong>
+              </p>
+              <p>
+                When faced with a decision to make, we always come back to one
+                simple idea:
+              </p>
+
+              <h1 className="text-primary pullquote text-center">
+                <em>Work sustainably</em>.
+              </h1>
+
+              <p>
+                This is harder than it sounds, and the{" "}
+                <Link href="/blog/2025/04/02/burnout-and-recovery/">
+                  burnout rate in software is no joke
+                </Link>
+                . Software is creative work, and creativity is hard to come by
+                when you're exhausted and constantly behind. When thinking about
+                what kind of company we wanted to be, we started from a very
+                basic premise:{" "}
+                <strong>
+                  you can only expect 20 hours of creative output in a week.
+                </strong>
+              </p>
+              <p>
+                At your typical 40-hours a week gig, once your 20 hours are up,
+                you've got another 10 of okay work, and then another 10 of bad
+                work. Then, when you come back on Monday, you spend your 20 good
+                hours fixing last week's mistakes. At Apsis, we asked ourselves:{" "}
+                <strong>
+                  what if we just stopped when the good work stops?
+                </strong>
+              </p>
+              <p>
+                So that's what we do: we ask our team for 20 hours. That's it.
+                Beyond that, your time is your own. After a decade, we're more
+                confident than ever that this approach works. Our metrics show
+                that{" "}
+                <strong>
+                  our 20-hour approach retains approximately 85% of the
+                  productivity of our 40-hour peers
+                </strong>
+                , whether you measure by story points closed, KPIs met, or
+                features delivered.
+              </p>
+
+              <p>
+                And as it turns out, what's good for our developers is good for
+                our clients. Capping development time keeps our team performing
+                at their peak—and our customers see exceptional results while
+                saving money by avoiding diminishing returns.
+              </p>
+
+              <p>
+                Curious? <Link href="/hire">Come see for yourself.</Link>
+              </p>
             </section>
           </div>
         </article>

src/styles/_global.scss

@@ -40,6 +40,10 @@
   opacity: 0.75;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -80,17 +84,22 @@
 }
 
 .link {
-  color: var(--apsis_blue);
-  text-decoration: none;
+  color: var(--link_color);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: var(--apsis_blue_light);
+  text-shadow: 0 0 2px rgba(0,0,0,0.05);
+  transition: all var(--easing) var(--timing_sm);
 
   &:visited {
-    color: var(--apsis_blue);
+    color: var(--link_color);
   }
 
   &:hover,
   &:visited:hover {
     text-decoration: underline;
-    color: var(--apsis_blue);
+    color: var(--link_color_hover);
+    text-decoration-color: var(--apsis_blue_dark);
   }
 }
 
@@ -128,140 +137,7 @@
   }
 }
 
-.typography {
-  a {
-    @extend .link;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    line-height: var(--heading_line_height);
-    margin-bottom: var(--space);
-    margin-top: var(--space-m);
-    font-weight: 700;
-  }
-
-  h1 {
-    font-size: var(--font_size_h1);
-  }
-
-  h2 {
-    font-size: var(--font_size_h2);
-  }
-
-  h3 {
-    font-size: var(--font_size_h3);
-  }
-
-  h4 {
-    font-size: var(--font_size_h4);
-  }
-
-  h5 {
-    font-size: var(--font_size_h5);
-  }
-
-  //= BLOCK ELEMENTS
-
-  p,
-  ul,
-  ol,
-  pre {
-    margin-bottom: var(--space);
-  }
-
-  ul,
-  ol {
-    ul,
-    ol {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    li {
-      margin-bottom: var(--space-xs);
-    }
-  }
-
-  hr {
-    width: 20%;
-    margin: var(--space) 0;
-    border: 0;
-    border-top: 1px solid var(--border);
-  }
-
-  sup {
-    font-weight: normal;
-  }
 
-  strong {
-    font-weight: 600;
-  }
-
-  iframe {
-    border: 0;
-  }
-
-  blockquote {
-    border-left: 2px solid var(--border);
-    padding-left: var(--space);
-    padding-top: var(--space-xs);
-    padding-bottom: var(--space-xs);
-    margin-bottom: var(--space);
-
-    *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  //= PARAGRAPH ELEMENTS
-
-  .lead {
-    font-size: var(--font_size_lg);
-  }
-
-  p > pre,
-  p > code {
-    font-family: var(--mono);
-    background-color: var(--gray_lightest);
-    padding: 0 var(--space-2xs);
-  }
-
-  div > pre {
-    width: 100%;
-    overflow-x: scroll;
-  }
-
-  p > a {
-    @media (min-width: var(--tablet)) {
-      white-space: nowrap;
-    }
-  }
-
-  p > img,
-  figure > img {
-    max-width: 100%;
-  }
-
-  figure > figcaption {
-    font-size: var(--font_size_xs);
-    color: var(--apsis_gray);
-    text-align: center;
-    max-width: 80%;
-    margin: 0 auto;
-  }
-
-  #footnote-label {
-    font-size: var(--font_size_lg);
-  }
-}
 
 
 .markdown-alert,

src/styles/_theme.scss

@@ -22,7 +22,8 @@
   --section_background: var(--white);
   --text_color: var(--apsis_dark);
   --text_muted: var(--apsis_gray_dark);
-  --link_color: var(--apsis_blue);
+  --link_color: var(--apsis_dark_darker);
+  --link_color_hover: var(--apsis_dark_darkest);
   --link_color_dark: var(--apsis_gray_dark);
 
   --guide_color: var(--border);
@@ -31,19 +32,22 @@
   //= FONTS
   --sans: var(--font-inter), sans-serif;
   --mono: var(--font-mono), monospace;
+  --serif: Var(--font-noto), serif;
 
   // Steps from Utopia
-  --step--3: clamp(0.651rem, 0.6259rem + 0.1258vw, 0.7234rem);
-  --step--2: clamp(0.7813rem, 0.7511rem + 0.151vw, 0.8681rem);
-  --step--1: clamp(0.9375rem, 0.9013rem + 0.1812vw, 1.0417rem);
-  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --step-1: clamp(1.35rem, 1.2978rem + 0.2609vw, 1.5rem);
-  --step-2: clamp(1.62rem, 1.5574rem + 0.313vw, 1.8rem);
-  --step-3: clamp(1.944rem, 1.8689rem + 0.3757vw, 2.16rem);
-  --step-4: clamp(2.3328rem, 2.2426rem + 0.4508vw, 2.592rem);
-  --step-5: clamp(2.7994rem, 2.6912rem + 0.5409vw, 3.1104rem);
-  --step-6: clamp(3.3592rem, 3.2294rem + 0.6491vw, 3.7325rem);
-  --step-7: clamp(4.0311rem, 3.8753rem + 0.779vw, 4.479rem);
+  /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1440,20,1.2,8,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --step--3: clamp(0.651rem, 0.6304rem + 0.1033vw, 0.7234rem);
+  --step--2: clamp(0.7813rem, 0.7564rem + 0.124vw, 0.8681rem);
+  --step--1: clamp(0.9375rem, 0.9077rem + 0.1488vw, 1.0417rem);
+  --step-0: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
+  --step-1: clamp(1.35rem, 1.3071rem + 0.2143vw, 1.5rem);
+  --step-2: clamp(1.62rem, 1.5686rem + 0.2571vw, 1.8rem);
+  --step-3: clamp(1.944rem, 1.8823rem + 0.3086vw, 2.16rem);
+  --step-4: clamp(2.3328rem, 2.2587rem + 0.3703vw, 2.592rem);
+  --step-5: clamp(2.7994rem, 2.7105rem + 0.4443vw, 3.1104rem);
+  --step-6: clamp(3.3592rem, 3.2526rem + 0.5332vw, 3.7325rem);
+  --step-7: clamp(4.0311rem, 3.9031rem + 0.6399vw, 4.479rem);
+  --step-8: clamp(4.8373rem, 4.6837rem + 0.7678vw, 5.3748rem);
 
   --font_size: var(--font_size_0);
   --line_height: 1.6125;
@@ -94,6 +98,8 @@
     --text_color: var(--apsis_gray_lightest);
     --text_muted: var(--apsis_gray_lighter);
     --link_color_dark: var(--apsis_gray_lighter);
+    --link_color: var(--apsis_gray_lightest);
+    --link_color_hover: var(--white);
 
     --border: var(--apsis_gray_darker);
     --apsis_gray_border: var(--border);