portico: Isolate global plans-page styles in own file.

web/styles/portico/plans_pages.css

@@ -0,0 +1,14 @@
+/* While the portico pages design is in flux,
+   we need to limit globally scoped CSS like this
+   to its own file.
+
+   The bulk of styles as well as CSS variables are
+   in `pricing_plans.css`, which gets shared on
+   non-plans pages such as /for/business/ */
+
+html {
+    /* Set the background on HTML to the starting
+       color for the plans-page gradient, so that the
+       top overscroll is undetectable. */
+    background: var(--color-background-gradient-start);
+}

web/styles/portico/pricing_plans.css

@@ -1,3 +1,13 @@
+:root {
+    --color-background-gradient-start: hsl(209deg 40% 50%);
+    --color-background-gradient-end: hsl(210deg 48% 69%);
+
+    @media (prefers-color-scheme: dark) {
+        --color-background-gradient-start: hsl(209deg 63% 40%);
+        --color-background-gradient-end: hsl(238deg 28% 50%);
+    }
+}
+
 .portico-pricing {
     --font-ss3: "Source Sans 3 VF", sans-serif;
     --font-ops: "Open Sans Variable", sans-serif;

web/webpack.assets.json

@@ -72,6 +72,7 @@
         "./styles/portico/hello.css",
         "./styles/portico/navbar.css",
         "./styles/portico/footer.css",
+        "./styles/portico/plans_pages.css",
         "./styles/portico/pricing_plans.css",
         "./styles/portico/comparison_table.css"
     ],