@cagovweb/state-template 6.3.0-beta.1 → 6.3.0-beta.2

package/dist/css/cagov.core.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-/*! State Web Template Version 6.3.0-beta.1 */
+/*! State Web Template Version 6.3.0-beta.2 */
 /*!
  * Bootstrap  v5.3.0 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
@@ -11909,36 +11909,36 @@ textarea.form-control-lg {
 ----------------------------------------- */
 :root {
   --color-p1: #fdb81e;
-  --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
-  --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
-  --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
-  --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
-  --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
-  --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
+  --color-p1-dark: #fdb20a;
+  --color-p1-darker: #f5aa02;
+  --color-p1-darkest: #d29102;
+  --color-p1-light: #fdc64b;
+  --color-p1-lighter: #fed478;
+  --color-p1-lightest: #fee3a5;
   --color-p2: #046b99;
-  --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
-  --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
-  --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
-  --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
-  --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
-  --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
+  --color-p2-dark: #035d85;
+  --color-p2-darker: #035376;
+  --color-p2-darkest: #023a53;
+  --color-p2-light: #3689ad;
+  --color-p2-lighter: #68a6c2;
+  --color-p2-lightest: #9bc4d6;
   --color-p3: #323a45;
-  --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
-  --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
-  --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
-  --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
-  --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
-  --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
+  --color-p3-dark: #293039;
+  --color-p3-darker: #232930;
+  --color-p3-darkest: #14171c;
+  --color-p3-light: #5b616a;
+  --color-p3-lighter: #84898f;
+  --color-p3-lightest: #adb0b5;
   --color-s1: #eef8fb;
-  --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
-  --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
+  --color-s1-darker: #e2f3f8;
+  --color-s1-lighter: #f7fcfd;
   --color-s2: #87b8ce;
-  --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
-  --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
+  --color-s2-dark: #6ea9c4;
+  --color-s2-darker: #549ab9;
   --color-s3: #4993b5;
-  --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
-  --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
-  --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
+  --color-s3-dark: #3f7e9c;
+  --color-s3-light: #92bed3;
+  --color-s3-lighter: #b6d4e1;
   --sub-nav-bg: var(--color-s1-lighter);
   --mobile-drawer: var(--color-p2-darker);
   --mobile-drawer-active: var(--color-p2);
@@ -14187,9 +14187,7 @@ textarea.form-control-lg {
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 body {
-  font-family: "Public Sans", sans-serif;
-  font-size: 1.125rem;
-  line-height: 1.5;
+  font: 1.125rem/1.5 "Public Sans", sans-serif;
   color: var(--gray-900, #3b3a48);
   overflow-y: scroll;
 }
@@ -14803,10 +14801,8 @@ a.list-group-item {
 /* .container custom width  */
 .container {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 @media (min-width: 576px) {
   .container {
@@ -14975,10 +14971,8 @@ a.list-group-item {
 .main-content > .section,
 .two-column .main-content > .section {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 @media (min-width: 576px) {
   .main-content > .section,
@@ -15242,10 +15236,8 @@ h2, .h2 {
 ----------------------------------------- */
 .branding {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  margin: 0 auto;
+  padding: 0 1rem;
   padding-left: 0;
   padding-right: 0;
   position: relative;
@@ -15335,8 +15327,7 @@ h2, .h2 {
   padding-left: 5px;
 }
 .branding .header-organization-banner a .logo-assets .logo-text .logo-state {
-  font-size: 1rem;
-  font-family: "Public Sans", sans-serif;
+  font: 1rem "Public Sans", sans-serif;
   margin: 0;
   padding: 0;
   color: var(--gray-900, #3b3a48);
@@ -15351,9 +15342,7 @@ h2, .h2 {
   }
 }
 .branding .header-organization-banner a .logo-assets .logo-text .logo-dept {
-  font-size: 1.75rem;
-  font-family: "Public Sans", sans-serif;
-  font-weight: 700;
+  font: 700 1.75rem "Public Sans", sans-serif;
   margin: 0;
   padding: 0;
   color: var(--color-p3, #323a45);
@@ -15666,8 +15655,8 @@ input[type=search].search-textfield {
   border-radius: 5px 0 0 5px;
 }
 @media (max-width: 991px) {
-  input[type=search].search-textfield {
-    border-color: var(--white, #fff) !important;
+  .search-container input[type=search].search-textfield {
+    border-color: var(--white, #fff);
   }
 }
 
@@ -15906,8 +15895,7 @@ input[type=search].search-textfield {
 }
 @media (max-width: 991px) {
   .search-container.featured-search {
-    padding-right: 1rem;
-    padding-left: 1rem;
+    padding: 0 1rem;
     max-height: 100%;
   }
 }
@@ -16224,7 +16212,6 @@ table.gsc-search-box td {
     width: 32%;
   }
   .full-width-nav .featured-search input.search-textfield {
-    border-radius: 5px 0 0 5px;
     padding: 0 8px;
   }
   /* full width featured search hack for IE */
@@ -16417,8 +16404,7 @@ input[type=search]::-webkit-search-results-decoration {
 .navigation-search {
   border: none;
   position: relative;
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
   z-index: 26;
 }
 @media (max-width: 991px) {
@@ -16442,13 +16428,12 @@ input[type=search]::-webkit-search-results-decoration {
 
 .main-navigation {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  margin: 0 auto;
+  padding: 0 1rem;
   position: relative;
   margin-top: -82px;
   padding-left: 80px;
+  display: flex;
 }
 @media (min-width: 576px) {
   .main-navigation {
@@ -16890,8 +16875,7 @@ input[type=search]::-webkit-search-results-decoration {
     color: var(--white, #fff);
     display: block;
     padding: 1rem 0 1rem 1rem;
-    margin-right: 2px;
-    margin-left: 2px;
+    margin: 0 2px;
     text-decoration: none;
   }
   .top-level-nav .nav-item .first-level-link span[class^=ca-gov-icon]:not(.carrot),
@@ -16950,9 +16934,7 @@ input[type=search]::-webkit-search-results-decoration {
   .top-level-nav .nav-item .sub-nav .second-level-link.active:hover, .top-level-nav .nav-item .sub-nav .second-level-link.active:focus {
     background-color: var(--mobile-drawer, #214a68);
   }
-  .nav-item .sub-nav.secondary-open {
-    display: block;
-  }
+  .nav-item .sub-nav.secondary-open,
   .nav-item.focus .sub-nav {
     display: block;
   }
@@ -17001,10 +16983,7 @@ input[type=search]::-webkit-search-results-decoration {
     padding-left: 350px;
   }
 }
-.nav-item .toggle-sub-nav.closed .ca-gov-icon-menu-toggle-open {
-  display: none;
-}
-.nav-item .toggle-sub-nav.open .ca-gov-icon-menu-toggle-closed {
+.nav-item .toggle-sub-nav.closed .ca-gov-icon-menu-toggle-open, .nav-item .toggle-sub-nav.open .ca-gov-icon-menu-toggle-closed {
   display: none;
 }
 @media (min-width: 992px) {
@@ -17626,8 +17605,7 @@ header.nav-overlay::after {
   color: var(--white, #fff);
   min-width: 2.5rem;
   min-height: 2.5rem;
-  margin-top: 1.3rem;
-  margin-left: auto;
+  margin: 1.3rem 0 0 auto;
 }
 .toggle-menu span {
   height: 2px;
@@ -17703,13 +17681,10 @@ header.nav-overlay::after {
   color: var(--gray-600, #72717c);
   background: var(--white, #fff);
   top: 0;
-  padding-right: 0;
   height: 0;
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 @media (min-width: 576px) {
   .mobile-controls {
@@ -18029,8 +18004,7 @@ header.nav-overlay::after {
   padding-top: 0;
 }
 .utility-header .flex-row .social-media-links .official-tag {
-  margin: 0;
-  margin-right: 1rem;
+  margin: 0 1rem 0 0;
   font-size: 0.95rem;
 }
 @media (max-width: 767px) {
@@ -26377,8 +26351,7 @@ a.sidenav.back::after {
   border-radius: 5px;
   font-size: 1.4rem;
   font-weight: 700;
-  padding: 1rem;
-  padding-right: 2.25rem;
+  padding: 1rem 2.25rem 1rem 1rem;
   position: relative;
   text-decoration: none !important;
   height: 100%;