website: p3 color and updarte to vf note on front page

2 files changed, 13 insertions, 5 deletions

diff --git a/docs/index.html b/docs/index.html
index 76fe23cbb..989963315 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -195,8 +195,7 @@ html { font-family: 'Inter', sans-serif; }
 <script src="index-var.js?v={{ index_var_js_v }}"></script>
 <div class="row white"><div>
   <p>
-    Variable fonts is a new technology and support is somewhat in flux at
-    the time of writing this (fall 2018.)<br>
+    Variable fonts is a new and emerging technology.<br>
     <a href="var-test.html">This test</a> can be used to discover
     what a web browser is capable of.
   </p>
diff --git a/docs/res/base.css b/docs/res/base.css
index 3bab3837b..5a7e5a5c3 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -10,9 +10,18 @@
 
   --columnGap: 2rem;
 
-  --red: #F03009;
-  --yellow: #FFE310;
-  --blue: rgb(3, 102, 214);
+  /* P3 wide gamut colors */
+  --red:    color(display-p3 0.94 0.19 0.04);
+  --yellow: color(display-p3 1 0.87 0.05);
+  --blue:   rgb(3, 102, 214);
+}
+
+@supports not (color: color(display-p3 1 1 1)) {
+  /* sRGB colors */
+  :root {
+    --red: #F03009;
+    --yellow: #FFE310;
+  }
 }
 
 * { margin:0; padding:0; font-synthesis: none; }