first commit

media/templates/site/cassiopeia/css/editor.css

@@ -0,0 +1,93 @@
+/* STYLES FOR JOOMLA! EDITOR */
+body {
+  margin: 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #22262a;
+  background-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+}
+a:link {
+  color: #224faa;
+}
+a:hover {
+  color: #424077;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* STYLES FOR JOOMLA! EDITOR */
+hr#system-readmore {
+  color: #f00;
+  border: #f00 dashed 1px;
+}
+
+span[lang] {
+  padding: 2px;
+  border: 1px dashed #bbb;
+}
+span[lang]:after {
+  font-size: smaller;
+  color: #f00;
+  vertical-align: super;
+  content: attr(lang);
+}
+
+.float-start {
+  float: left;
+}
+
+.float-end {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.d-block {
+  display: block !important;
+}

media/templates/site/cassiopeia/css/editor.min.css

@@ -0,0 +1 @@
+body{background-color:#fff;color:#22262a;font-size:1rem;font-weight:400;line-height:1.5;margin:1rem}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}h1{font-size:calc(1.375rem + 1.5vw)}h2{font-size:calc(1.325rem + .9vw)}h3{font-size:calc(1.3rem + .6vw)}h4{font-size:calc(1.275rem + .3vw)}h5{font-size:1.25rem}h6{font-size:1rem}a{text-decoration:none}a:link{color:#224faa}a:hover{color:#424077}p{margin-bottom:1rem;margin-top:0}hr#system-readmore{border:1px dashed red;color:red}span[lang]{border:1px dashed #bbb;padding:2px}span[lang]:after{color:red;content:attr(lang);font-size:smaller;vertical-align:super}.float-start{float:left}.float-end{float:right}.float-none{float:none}.mx-auto{margin-left:auto!important;margin-right:auto!important}.d-block{display:block!important}

media/templates/site/cassiopeia/css/global/colors_alternative.css

@@ -0,0 +1,7 @@
+:root {
+  --cassiopeia-color-primary: hsl(351, 54%, 37%);
+  --cassiopeia-color-link: hsl(207, 49%, 37%);
+  --link-color: hsl(207, 49%, 37%);
+  --link-color-rgb: 48, 99, 141;
+  --cassiopeia-color-hover: hsl(351, 33%, 44%);
+}

media/templates/site/cassiopeia/css/global/colors_alternative.min.css

@@ -0,0 +1 @@
+:root{--cassiopeia-color-primary:#912b3b;--cassiopeia-color-link:#30638d;--link-color:#30638d;--link-color-rgb:48,99,141;--cassiopeia-color-hover:#954b56}

media/templates/site/cassiopeia/css/global/colors_standard.css

@@ -0,0 +1,7 @@
+:root {
+  --cassiopeia-color-primary: hsl(220, 67%, 20%);
+  --cassiopeia-color-link: hsl(220, 67%, 40%);
+  --link-color: hsl(220, 67%, 40%);
+  --link-color-rgb: 34, 79, 170;
+  --cassiopeia-color-hover: hsl(242, 30%, 36%);
+}

media/templates/site/cassiopeia/css/global/colors_standard.min.css

@@ -0,0 +1 @@
+:root{--cassiopeia-color-primary:#112855;--cassiopeia-color-link:#224faa;--link-color:#224faa;--link-color-rgb:34,79,170;--cassiopeia-color-hover:#424077}

media/templates/site/cassiopeia/css/global/fonts-local_roboto.css

@@ -0,0 +1,126 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2?v=73f0a8") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff?v=35b07e") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2?v=73f0a8") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff?v=35b07e") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2?v=4357be") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff?v=f5902d") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-RegularItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2?v=4357be") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff?v=f5902d") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2?v=d26871") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff?v=c73eb1") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Light";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2?v=d26871") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff?v=c73eb1") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2?v=e8eaae") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff?v=13efe6") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-LightItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2?v=e8eaae") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff?v=13efe6") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2?v=ad538a") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff?v=d3b473") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Thin";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2?v=ad538a") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff?v=d3b473") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2?v=5b4a33") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff?v=8a96ed") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-ThinItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2?v=5b4a33") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff?v=8a96ed") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2?v=90d167") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff?v=1d6594") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Medium";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2?v=90d167") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff?v=1d6594") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2?v=13ec0e") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff?v=83e114") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-MediumItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2?v=13ec0e") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff?v=83e114") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2?v=b52fac") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff?v=50d75e") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Bold";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2?v=b52fac") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff?v=50d75e") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2?v=94008e") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff?v=4fe0f7") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-BoldItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2?v=94008e") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff?v=4fe0f7") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2?v=59eb36") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff?v=313a65") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Roboto-Black";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2?v=59eb36") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff?v=313a65") format("woff");
+}
+@font-face {
+  font-family: "Roboto";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2?v=f75569") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff?v=cc2fad") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Roboto-BlackItalic";
+  src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2?v=f75569") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff?v=cc2fad") format("woff");
+}
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: 700;
+  --cassiopeia-font-weight-normal: 400;
+}

media/templates/site/cassiopeia/css/offline.css

@@ -0,0 +1,104 @@
+.outer {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.offline-card {
+  width: 100%;
+  max-width: 30em;
+  margin: 60px auto;
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid hsla(0, 0%, 0%, 0.1);
+  border-radius: 5px;
+  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
+          box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
+}
+
+.header {
+  position: relative;
+  padding: 1em 2em;
+  margin: 0;
+  color: hsl(0, 0%, 100%);
+  text-align: center;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
+  border-radius: 5px 5px 0 0;
+}
+[dir=rtl] .header {
+  background-image: linear-gradient(135deg, var(--cassiopeia-color-hover) 0%, var(--cassiopeia-color-primary) 100%);
+}
+
+.login {
+  padding: 40px 20px 20px;
+}
+
+.form-control {
+  max-width: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  margin: 15px 0;
+  border: 0;
+}
+
+form,
+fieldset {
+  padding: 0;
+  margin: 0;
+}
+
+label {
+  display: block;
+  margin: 0;
+}
+
+input[type=text],
+input[type=password] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: auto;
+}
+
+input {
+  margin: 0.5em 0 1em;
+}
+
+.logo-icon {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  z-index: 1;
+  padding: 12px;
+  margin-top: 2px;
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid hsla(0, 0%, 0%, 0.05);
+  border-radius: 50%;
+  -webkit-box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075);
+          box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.logo-icon svg {
+  display: block;
+  width: 38px;
+}

media/templates/site/cassiopeia/css/offline.min.css

@@ -0,0 +1 @@
+.outer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;padding:20px;position:relative;width:100%}.offline-card{background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:5px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.05);box-shadow:0 0 10px rgba(0,0,0,.05);margin:60px auto;max-width:30em;width:100%}.header{background-color:var(--cassiopeia-color-primary);background-image:linear-gradient(135deg,var(--cassiopeia-color-primary) 0,var(--cassiopeia-color-hover) 100%);border-radius:5px 5px 0 0;color:#fff;margin:0;padding:1em 2em;position:relative;text-align:center}[dir=rtl] .header{background-image:linear-gradient(135deg,var(--cassiopeia-color-hover) 0,var(--cassiopeia-color-primary) 100%)}.login{padding:40px 20px 20px}.form-control{max-width:none}img{border:0;height:auto;margin:15px 0;max-width:100%}fieldset,form{margin:0;padding:0}label{display:block;margin:0}input[type=password],input[type=text]{-webkit-box-sizing:border-box;box-sizing:border-box;height:auto;width:100%}input{margin:.5em 0 1em}.logo-icon{background-color:#fff;border:1px solid rgba(0,0,0,.05);border-radius:50%;-webkit-box-shadow:0 0 5px rgba(0,0,0,.075);box-shadow:0 0 5px rgba(0,0,0,.075);left:50%;margin-top:2px;padding:12px;position:absolute;top:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.logo-icon svg{display:block;width:38px}

media/templates/site/cassiopeia/css/system/searchtools/searchtools.css

@@ -0,0 +1,49 @@
+.js-stools-container-bar {
+  padding: 10px 20px;
+}
+.js-stools-container-bar .btn-toolbar {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+.js-stools-container-bar .btn-toolbar > * {
+  margin: 4px 0;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
+}
+.js-stools-container-bar .btn-toolbar .js-stools-btn-clear {
+  background-color: hsl(207, 49%, 37%);
+  border: 0;
+}
+.js-stools-container-bar .ordering-select {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.js-stools-container-filters {
+  display: none;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+.js-stools-container-filters-visible {
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  padding: 10px;
+  background-color: hsl(0, 0%, 100%);
+}
+.js-stools-container-filters > * {
+  margin: 4px 0;
+  -webkit-margin-end: 8px;
+          margin-inline-end: 8px;
+}
+
+.js-stools-field-list + .js-stools-field-list {
+  -webkit-margin-start: 8px;
+          margin-inline-start: 8px;
+}
+
+.js-stools-field-selector .form-select {
+  width: auto;
+}

media/templates/site/cassiopeia/css/system/searchtools/searchtools.min.css

@@ -0,0 +1 @@
+.js-stools-container-bar{padding:10px 20px}.js-stools-container-bar .btn-toolbar{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.js-stools-container-bar .btn-toolbar>*{-webkit-margin-end:8px;margin:4px 0;margin-inline-end:8px}.js-stools-container-bar .btn-toolbar .js-stools-btn-clear{background-color:#30638d;border:0}.js-stools-container-bar .ordering-select{display:-webkit-box;display:-ms-flexbox;display:flex}.js-stools-container-filters{display:none;margin-bottom:20px;padding:0 20px}.js-stools-container-filters-visible{grid-gap:8px;background-color:#fff;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:10px}.js-stools-container-filters>*{-webkit-margin-end:8px;margin:4px 0;margin-inline-end:8px}.js-stools-field-list+.js-stools-field-list{-webkit-margin-start:8px;margin-inline-start:8px}.js-stools-field-selector .form-select{width:auto}

media/templates/site/cassiopeia/css/vendor/choicesjs/choices.css

@@ -0,0 +1,499 @@
+@charset "UTF-8";
+/* ===============================
+=            Choices            =
+=============================== */
+.choices {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 24px;
+  font-size: 16px;
+}
+.choices:focus {
+  outline: none;
+}
+.choices:last-child {
+  margin-bottom: 0;
+}
+.choices.is-open {
+  overflow: initial;
+}
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.choices.is-disabled .choices__item {
+  cursor: not-allowed;
+}
+.choices [hidden] {
+  display: none !important;
+}
+
+.choices[data-type*=select-one] {
+  cursor: pointer;
+}
+.choices[data-type*=select-one] .choices__inner {
+  padding-bottom: 7.5px;
+}
+.choices[data-type*=select-one] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  background-color: #fff;
+  margin: 0;
+}
+.choices[data-type*=select-one] .choices__button {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.25;
+}
+.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
+  opacity: 1;
+}
+.choices[data-type*=select-one] .choices__button:focus {
+  -webkit-box-shadow: 0 0 0 2px #00bcd4;
+          box-shadow: 0 0 0 2px #00bcd4;
+}
+.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
+  display: none;
+}
+.choices[data-type*=select-one]::after {
+  content: "";
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  right: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none;
+}
+.choices[data-type*=select-one].is-open::after {
+  border-color: transparent transparent #333 transparent;
+  margin-top: -7.5px;
+}
+.choices[data-type*=select-one][dir=rtl]::after {
+  left: 11.5px;
+  right: auto;
+}
+.choices[data-type*=select-one][dir=rtl] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0;
+}
+
+.choices[data-type*=select-multiple] .choices__inner,
+.choices[data-type*=text] .choices__inner {
+  cursor: text;
+}
+.choices[data-type*=select-multiple] .choices__button,
+.choices[data-type*=text] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-right: -4px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  padding-left: 16px;
+  border-left: 1px solid #008fa1;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0;
+}
+.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
+.choices[data-type*=text] .choices__button:hover,
+.choices[data-type*=text] .choices__button:focus {
+  opacity: 1;
+}
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #ddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden;
+}
+.is-focused .choices__inner, .is-open .choices__inner {
+  border-color: #b7b7b7;
+}
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0;
+}
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px;
+}
+
+.choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%;
+}
+[dir=rtl] .choices__list--single {
+  padding-right: 4px;
+  padding-left: 16px;
+}
+.choices__list--single .choices__item {
+  width: 100%;
+}
+
+.choices__list--multiple {
+  display: inline;
+}
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #fff;
+  word-break: break-all;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px;
+}
+[dir=rtl] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px;
+}
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1;
+}
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191;
+}
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-left-radius: 2.5px;
+  border-bottom-right-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility;
+}
+.choices__list--dropdown.is-active {
+  visibility: visible;
+}
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7;
+}
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px;
+}
+[dir=rtl] .choices__list--dropdown .choices__item {
+  text-align: right;
+}
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-right: 100px;
+  }
+  .choices__list--dropdown .choices__item--selectable::after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+  }
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px;
+  }
+  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
+    right: auto;
+    left: 10px;
+  }
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2;
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
+  opacity: 0.5;
+}
+
+.choices__item {
+  cursor: default;
+}
+
+.choices__item--selectable {
+  cursor: pointer;
+}
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  opacity: 0.5;
+}
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray;
+}
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+.choices__button:focus {
+  outline: none;
+}
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 0 4px 2px;
+}
+.choices__input:focus {
+  outline: 0;
+}
+[dir=rtl] .choices__input {
+  padding-right: 2px;
+  padding-left: 0;
+}
+
+.choices__placeholder {
+  opacity: 0.5;
+}
+
+/* =====  End of Choices  ====== */
+.choices {
+  border: var(--border-width) solid hsl(210, 14%, 83%);
+  border-radius: var(--border-radius);
+}
+.choices.is-focused {
+  border-color: #8894aa;
+  -webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
+          box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
+}
+
+.choices__inner {
+  padding: 0.4rem 1rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0;
+}
+
+.choices__input {
+  padding: 0;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: transparent;
+}
+.choices__input::-webkit-input-placeholder {
+  color: hsl(210, 9%, 31%);
+  opacity: 1;
+}
+.choices__input::-moz-placeholder {
+  color: hsl(210, 9%, 31%);
+  opacity: 1;
+}
+.choices__input:-ms-input-placeholder {
+  color: hsl(210, 9%, 31%);
+  opacity: 1;
+}
+.choices__input::-ms-input-placeholder {
+  color: hsl(210, 9%, 31%);
+  opacity: 1;
+}
+.choices__input::placeholder {
+  color: hsl(210, 9%, 31%);
+  opacity: 1;
+}
+
+.choices__list--dropdown {
+  z-index: 1060;
+}
+
+.choices__list--multiple .choices__item {
+  position: relative;
+  margin: 2px;
+  background-color: var(--cassiopeia-color-primary);
+  -webkit-margin-end: 2px;
+          margin-inline-end: 2px;
+  border: 0;
+  border-radius: 0.25rem;
+}
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: var(--cassiopeia-color-primary);
+  opacity: 0.9;
+}
+
+.choices .choices__list--dropdown .choices__item {
+  -webkit-padding-end: 10px;
+          padding-inline-end: 10px;
+}
+.choices .choices__list--dropdown .choices__item--selectable::after {
+  display: none;
+}
+
+.choices__button_joomla {
+  position: relative;
+  padding: 0 10px;
+  color: inherit;
+  text-indent: -9999px;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  opacity: 0.5;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.choices__button_joomla::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  text-align: center;
+  text-indent: 0;
+  content: "×";
+}
+.choices__button_joomla:hover, .choices__button_joomla:focus {
+  opacity: 1;
+}
+.choices__button_joomla:focus {
+  outline: none;
+}
+
+.choices[data-type*=select-one] .choices__inner,
+.choices[data-type*=select-multiple] .choices__inner {
+  -webkit-padding-end: 3rem;
+          padding-inline-end: 3rem;
+  cursor: pointer;
+  background: url("../../../images/select-bg.svg?v=5ebba0") no-repeat 100%/116rem;
+  background-color: hsl(210, 16%, 93%);
+}
+[dir=rtl] .choices[data-type*=select-one] .choices__inner,
+[dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
+  background: url("../../../images/select-bg-rtl.svg?v=e50af2") no-repeat 0/116rem;
+  background-color: hsl(210, 16%, 93%);
+}
+
+.choices[data-type*=select-one] .choices__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.choices[data-type*=select-one] .choices__button_joomla {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  -webkit-margin-before: -10px;
+          margin-block-start: -10px;
+  -webkit-margin-end: 50px;
+          margin-inline-end: 50px;
+  border-radius: 10em;
+  opacity: 0.5;
+}
+.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
+  opacity: 1;
+}
+.choices[data-type*=select-one] .choices__button_joomla:focus {
+  -webkit-box-shadow: 0 0 0 2px #00bcd4;
+          box-shadow: 0 0 0 2px #00bcd4;
+}
+.choices[data-type*=select-one]::after {
+  display: none;
+}
+
+.choices[data-type*=select-multiple] .choices__input,
+.choices[data-type*=text] .choices__input {
+  padding: 0.2rem 0;
+}
+
+.choices__heading {
+  font-size: 1.2rem;
+}

media/templates/site/cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css

@@ -0,0 +1,145 @@
+@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
+#system-message-container:empty {
+  display: none;
+  margin-top: 0;
+}
+
+#system-message-container joomla-alert {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  min-width: 16rem;
+  padding: 0;
+  margin-bottom: 0;
+  color: var(--gray-dark);
+  background-color: hsl(0, 0%, 100%);
+  border: 1px solid var(--alert-accent-color, transparent);
+  border-radius: 0.25rem;
+  -webkit-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+#system-message-container joomla-alert + * {
+  margin-top: 1rem;
+}
+#system-message-container joomla-alert .alert-heading {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  padding: 0.8rem;
+  color: var(--alert-heading-text);
+  background: var(--alert-accent-color, transparent);
+}
+#system-message-container joomla-alert .alert-heading .message::before,
+#system-message-container joomla-alert .alert-heading .success::before {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  content: "";
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
+  background-size: 100%;
+}
+#system-message-container joomla-alert .alert-heading .notice::before,
+#system-message-container joomla-alert .alert-heading .info::before {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  content: "";
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
+  background-size: 100%;
+}
+#system-message-container joomla-alert .alert-heading .warning::before {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  content: "";
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
+  background-size: 100%;
+}
+#system-message-container joomla-alert .alert-heading .error::before,
+#system-message-container joomla-alert .alert-heading .danger::before {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  content: "";
+  background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
+  background-size: 100%;
+}
+#system-message-container joomla-alert .alert-wrapper {
+  width: 100%;
+}
+#system-message-container joomla-alert .alert-link {
+  color: var(--success, inherit);
+}
+#system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] {
+  --alert-accent-color: var(--success);
+  --alert-heading-text: hsla(0, 0%, 100%, .95);
+  --alert-close-button: var(--success);
+  background-color: hsl(0, 0%, 100%);
+}
+#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
+  --alert-accent-color: var(--info);
+  --alert-heading-text: hsla(0, 0%, 100%, .95);
+  --alert-close-button: var(--info);
+  background-color: hsl(0, 0%, 100%);
+}
+#system-message-container joomla-alert[type=warning] {
+  --alert-accent-color: var(--warning);
+  --alert-heading-text: hsla(0, 0%, 100%, .95);
+  --alert-close-button: var(--warning);
+  background-color: hsl(0, 0%, 100%);
+}
+#system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] {
+  --alert-accent-color: var(--danger);
+  --alert-heading-text: hsla(0, 0%, 100%, .95);
+  --alert-close-button: var(--danger);
+  background-color: hsl(0, 0%, 100%);
+}
+#system-message-container joomla-alert .joomla-alert--close,
+#system-message-container joomla-alert .joomla-alert-button--close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.2rem 0.8rem;
+  font-size: 2rem;
+  color: var(--alert-close-button);
+  background: none;
+  border: 0;
+  opacity: 1;
+}
+#system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus,
+#system-message-container joomla-alert .joomla-alert-button--close:hover,
+#system-message-container joomla-alert .joomla-alert-button--close:focus {
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.75;
+}
+[dir=rtl] #system-message-container joomla-alert .joomla-alert--close,
+[dir=rtl] #system-message-container joomla-alert .joomla-alert-button--close {
+  right: auto;
+  left: 0;
+  padding: 0.2rem 0.6rem;
+}
+#system-message-container joomla-alert div {
+  font-size: 1rem;
+}
+#system-message-container joomla-alert div .alert-message {
+  padding: 0.3rem 2rem 0.3rem 0.3rem;
+  margin: 0.5rem;
+}
+[dir=rtl] #system-message-container joomla-alert div .alert-message {
+  padding: 0.3rem 0.3rem 0.3rem 2rem;
+}
+#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
+  border-top: 1px solid var(--alert-accent-color);
+}

media/templates/site/cassiopeia/images/logo.svg

@@ -0,0 +1,11 @@
+<svg width="288" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 647 70"><title>logo</title>
+<path d="M306,248h0c0-19,14-35,35-35s20,4,26,10l-9,11c-5-5-10-8-17-8s-19,9-19,21h0c0,12,8,21,19,21s12-3,17-8l9,10c-7,7-14,12-27,12S306,268,306,248Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M407,214h13l28,68H433l-6-15H399l-6,15H378Zm15,40-9-22-9,22Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M458,272l9-11c6,5,12,8,20,8s10-2,10-6h0c0-4-2-6-13-9s-22-7-22-21h0c0-12,10-20,23-20a38,38,0,0,1,25,9l-8,11c-6-4-12-7-17-7s-9,3-9,6h0c0,4,3,6,14,9s21,9,21,20h0c0,13-10,21-24,21A42,42,0,0,1,458,272Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M523,272l9-11c6,5,12,8,20,8s10-2,10-6h0c0-4-2-6-13-9s-22-7-22-21h0c0-12,10-20,23-20a38,38,0,0,1,25,9l-8,11c-6-4-12-7-17-7s-9,3-9,6h0c0,4,3,6,14,9s21,9,21,20h0c0,13-10,21-24,21A42,42,0,0,1,523,272Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M593,214h15v68H593Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M626,248h0c0-19,15-35,35-35s35,16,35,35h0c0,19-15,35-35,35S626,267,626,248Zm55,0h0c0-12-8-21-20-21s-20,9-20,21h0c0,12,8,21,20,21S682,260,682,248Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M715,214h27c16,0,25,10,25,23h0c0,16-12,24-27,24H729v20H715Zm26,34c7,0,12-4,12-10h0c0-7-5-10-12-10H729v21Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M783,214h50v13H797v14h31v13H797v14h36v13H783Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M852,214h15v68H852Z" transform="translate(-306 -213)" style="fill:#fff"/>
+<path d="M911,214h13l28,68H937l-6-15H903l-6,15H882Zm15,40-9-22-9,22Z" transform="translate(-306 -213)" style="fill:#fff"/></svg>

media/templates/site/cassiopeia/images/select-bg-active-rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="m14.47 145.7 6.898 6.899c0.102 0.101 0.199 0.101 0.3 0.101 0.102 0 0.2 0 0.302-0.101l6.898-6.899c0.102-0.1 0.102-0.2 0.102-0.3s0-0.2-0.102-0.3l-0.7-0.7c-0.101-0.1-0.198-0.1-0.3-0.1-0.101 0-0.2 0-0.301 0.1l-5.8 5.8-5.801-5.8c-0.101-0.1-0.199-0.1-0.301-0.1-0.101 0-0.199 0-0.301 0.1l-0.699 0.7c-0.101 0.1-0.101 0.2-0.101 0.3-0.294 0.1-0.194 0.2-0.094 0.3z" fill="#fff"/></svg>

media/templates/site/cassiopeia/images/select-bg-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/></svg>

media/templates/site/cassiopeia/images/select-bg-rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1854.539" height="295" preserveAspectRatio="xMinYMin meet"><path d="M13.573 145.7l6.9 6.9c.1.1.2.1.3.1s.2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-5.8 5.8-5.8-5.8c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-.7.7c-.1.1-.1.2-.1.3-.296.1-.195.2-.096.3h-.002z"/><path fill="#fff" d="M44.54 0h1810v295h-1810z"/></svg>

media/templates/site/cassiopeia/images/select-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#000"/><rect width="1810" height="295" fill="#fff"/></svg>

media/templates/site/cassiopeia/js/mod_menu/menu-metismenu.js

@@ -0,0 +1,24 @@
+/**
+ * @package     Joomla.Site
+ * @subpackage  Templates.cassiopeia
+ * @copyright   (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @since       4.0.0
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  const allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu');
+  allMenus.forEach(menu => {
+    // eslint-disable-next-line no-new, no-undef
+    const mm = new MetisMenu(menu, {
+      triggerElement: 'button.mm-toggler'
+    }).on('shown.metisMenu', event => {
+      window.addEventListener('click', function mmClick(e) {
+        if (!event.target.contains(e.target)) {
+          mm.hide(event.detail.shownElement);
+          window.removeEventListener('click', mmClick);
+        }
+      });
+    });
+  });
+});

media/templates/site/cassiopeia/js/mod_menu/menu-metismenu.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll("ul.mod-menu_dropdown-metismenu").forEach((e=>{const n=new MetisMenu(e,{triggerElement:"button.mm-toggler"}).on("shown.metisMenu",(e=>{window.addEventListener("click",(function t(o){e.target.contains(o.target)||(n.hide(e.detail.shownElement),window.removeEventListener("click",t))}))}))}))}));

media/templates/site/cassiopeia/js/template.js

@@ -0,0 +1,74 @@
+/**
+ * @package     Joomla.Site
+ * @subpackage  Templates.Cassiopeia
+ * @copyright   (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ * @since       4.0.0
+ */
+
+Joomla = window.Joomla || {};
+
+(function(Joomla, document) {
+  'use strict';
+
+  function initTemplate(event) {
+    var target = event && event.target ? event.target : document;
+
+    /**
+     * Prevent clicks on buttons within a disabled fieldset
+     */
+    var fieldsets = target.querySelectorAll('fieldset.btn-group');
+    for (var i = 0; i < fieldsets.length; i++) {
+      var self = fieldsets[i];
+      if (self.getAttribute('disabled') ===  true) {
+        self.style.pointerEvents = 'none';
+        var btns = self.querySelectorAll('.btn');
+        for (var ib = 0; ib < btns.length; ib++) {
+          btns[ib].classList.add('disabled');
+        }
+      }
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function (event) {
+    initTemplate(event);
+
+    /**
+     * Back to top
+     */
+    var backToTop = document.getElementById('back-top');
+
+    if (backToTop) {
+
+      function checkScrollPos() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+          backToTop.classList.add('visible');
+        } else {
+          backToTop.classList.remove('visible')
+        }
+      }
+
+      checkScrollPos();
+
+      window.onscroll = function() {
+        checkScrollPos();
+      };
+
+      backToTop.addEventListener('click', function(event) {
+        event.preventDefault();
+        window.scrollTo(0, 0);
+      });
+    }
+
+    [].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
+      .forEach(function($link){
+        $link.rel = "stylesheet";
+      });
+  });
+
+  /**
+   * Initialize when a part of the page was updated
+   */
+  document.addEventListener('joomla:updated', initTemplate);
+
+})(Joomla, document);

media/templates/site/cassiopeia/js/template.min.js

@@ -0,0 +1 @@
+Joomla=window.Joomla||{},function(e,t){"use strict";function l(e){for(var l=(e&&e.target?e.target:t).querySelectorAll("fieldset.btn-group"),o=0;o<l.length;o++){var n=l[o];if(!0===n.getAttribute("disabled")){n.style.pointerEvents="none";for(var i=n.querySelectorAll(".btn"),r=0;r<i.length;r++)i[r].classList.add("disabled")}}}t.addEventListener("DOMContentLoaded",(function(e){l(e);var o=t.getElementById("back-top");if(o){function n(){t.body.scrollTop>20||t.documentElement.scrollTop>20?o.classList.add("visible"):o.classList.remove("visible")}n(),window.onscroll=function(){n()},o.addEventListener("click",(function(e){e.preventDefault(),window.scrollTo(0,0)}))}[].slice.call(t.head.querySelectorAll('link[rel="lazy-stylesheet"]')).forEach((function(e){e.rel="stylesheet"}))})),t.addEventListener("joomla:updated",l)}(Joomla,document);

media/templates/site/cassiopeia/scss/blocks/_alerts.scss

@@ -0,0 +1,25 @@
+// Alerts
+
+.j-main-container {
+  .alert {
+    margin: .75rem;
+  }
+
+}
+
+.alert-heading {
+  font-size: $h4-font-size;
+}
+
+@keyframes fadeIn {
+
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_back-to-top.scss

@@ -0,0 +1,29 @@
+/**
+* Back to Top
+*/
+
+.back-to-top-link {
+  position: absolute;
+  inset-inline-end: 1rem;
+  bottom: 1rem;
+  z-index: 10000;
+  padding: $cassiopeia-grid-gutter * .5;
+  color: var(--cassiopeia-color-primary, $standard-color-primary);
+  pointer-events: all;
+  background-color: var(--white, $white);
+  border: 1px solid var(--cassiopeia-color-primary, $standard-color-primary);
+  border-radius: $border-radius;
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--white, $white);
+    background-color: var(--cassiopeia-color-hover);
+    border-color: var(--white, $white);
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_banner.scss

@@ -0,0 +1,47 @@
+// Banner
+
+.container-banner {
+  img {
+    display: block;
+    margin: auto;
+  }
+
+  .banner-overlay {
+    height: 70vh;
+    color: $white;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: top,center;
+    background-size: cover;
+
+    .overlay {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: $cassiopeia-grid-gutter;
+      text-align: center;
+      background-color: hsla(0, 0%, 0%, .5);
+
+      .text-thin {
+        font-weight: $font-weight-lighter;
+        &::after {
+          display: block;
+          width: 30%;
+          height: 4px;
+          margin: 1rem auto 2rem;
+          content: "";
+          background: $white;
+        }
+        .lead {
+          font-size: 150vh;
+        }
+      }
+    }
+
+    @media screen and (max-height: 740px) {
+      height: 100vh;
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_css-grid.scss

@@ -0,0 +1,116 @@
+// CSS Grid
+
+body {
+  display: flex;
+  flex-direction: column;
+
+  &.wrapper-fluid {
+
+    .site-grid {
+      grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
+      grid-gap: 0 ($cassiopeia-grid-gutter*2);
+    }
+
+    .grid-child {
+      max-width: none;
+    }
+
+    header > .grid-child,
+    footer > .grid-child {
+      padding-right: $cassiopeia-grid-gutter*2;
+      padding-left: $cassiopeia-grid-gutter*2;
+    }
+  }
+
+  &:not(.has-sidebar-left) .site-grid .container-component {
+    grid-column-start: main-start;
+  }
+
+  &:not(.has-sidebar-right) .site-grid .container-component {
+    grid-column-end: main-end;
+  }
+}
+
+.site-grid {
+  margin-bottom: auto;
+}
+
+@supports (display: grid) {
+  .site-grid {
+    display: grid;
+    grid-template-areas: ". banner banner banner banner ."
+      ". top-a top-a top-a top-a ."
+      ". top-b top-b top-b top-b ."
+      ". comp comp comp comp ."
+      ". side-r side-r side-r side-r ."
+      ". side-l side-l side-l side-l ."
+      ". bot-a bot-a bot-a bot-a ."
+      ". bot-b bot-b bot-b bot-b .";
+    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
+    grid-gap: 0 $cassiopeia-grid-gutter;
+
+    > [class^="container-"],
+    > [class*=" container-"] {
+      width: 100%;
+      max-width: none;
+      column-gap: $cassiopeia-grid-gutter;
+    }
+
+    > .full-width {
+      grid-column: full-start / full-end;
+    }
+
+    @include media-breakpoint-up(lg) {
+      grid-template-areas: ". banner banner banner banner ."
+        ". top-a top-a top-a top-a ."
+        ". top-b top-b top-b top-b ."
+        ". side-l comp comp side-r ."
+        ". bot-a bot-a bot-a bot-a ."
+        ". bot-b bot-b bot-b bot-b .";
+    }
+  }
+}
+
+.container-banner {
+  grid-area: banner;
+}
+
+.container-top-a {
+  grid-area: top-a;
+}
+
+.container-top-b {
+  grid-area: top-b;
+}
+
+.container-component {
+  grid-area: comp;
+}
+
+.container-sidebar-left {
+  grid-area: side-l;
+}
+
+.container-sidebar-right {
+  grid-area: side-r;
+}
+
+.container-main-top {
+  grid-area: main-t;
+}
+
+.container-main-bottom {
+  grid-area: main-b;
+}
+
+.container-breadcrumbs {
+  grid-area: bread;
+}
+
+.container-bottom-a {
+  grid-area: bot-a;
+}
+
+.container-bottom-b {
+  grid-area: bot-b;
+}

media/templates/site/cassiopeia/scss/blocks/_footer.scss

@@ -0,0 +1,40 @@
+// Footer
+
+.footer {
+  margin-top: $cassiopeia-grid-gutter;
+  color: $white;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad #{"/* rtl:"}$cassiopeia-header-grad-rtl #{"*/"};
+
+  .grid-child {
+    align-items: center;
+    justify-content: space-between;
+    padding: 2.5rem ($cassiopeia-grid-gutter * .5);
+  }
+
+  a {
+    color: currentColor;
+  }
+
+  .mod-menu {
+    position: relative;
+  }
+
+  @if $metismenu==true {
+    .metismenu.mod-menu {
+      .mm-collapse {
+        background: var(--cassiopeia-color-primary);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .grid-child {
+      flex-direction: column;
+
+      .mod-footer {
+        margin: .375rem 0;
+      }
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_form.scss

@@ -0,0 +1,150 @@
+// Form
+
+.form-control {
+  max-width: $input-max-width;
+  background-color: $white;
+
+  &.input-xlarge {
+    max-width: 21.875rem;
+  }
+
+  &.input-xxlarge {
+    max-width: 34.375rem;
+  }
+
+  &.input-full {
+    max-width: 100%;
+  }
+}
+
+.spacer hr {
+  width: 23.75rem;
+}
+
+.form-select {
+  max-width: $input-max-width;
+}
+
+// Bootstrap 4 b/c on form-inline
+.form-inline .form-select {
+  display: inline-block;
+  width: auto;
+}
+
+@include media-breakpoint-down(lg) {
+  .form-inline .form-select {
+    width: 100%;
+  }
+}
+
+td .form-control {
+  display: inline-block;
+  width: auto;
+}
+
+.checkboxes {
+  padding-top: 5px;
+
+  .checkbox input {
+    position: static;
+    margin-left: 0;
+  }
+}
+
+.modal label {
+  width: 100%;
+}
+
+// Validation
+.invalid {
+  color: $danger;
+  border-color: $danger;
+}
+
+.valid {
+  border-color: $success;
+}
+
+.form-control-feedback {
+  display: block;
+}
+
+// set up hidden tooltip
+[role="tooltip"]:not(.show) {
+  right: 5em;
+  z-index: $zindex-tooltip;
+  display: none;
+  max-width: 100%;
+  padding: .5em;
+  margin: .5em;
+  color: $black;
+  text-align: start;
+  background: $white;
+  border: 1px solid $gray-600;
+  border-radius: $border-radius;
+  box-shadow: 0 0 .5rem rgba(0, 0, 0, .8);
+
+  &[id^=editarticle-] {
+    right: auto;
+    margin-inline-start: -10em;
+  }
+
+  &[id^=editcontact-] {
+    right: auto;
+    margin-inline-start: -10em;
+  }
+
+  &[id^=id-skip-] {
+    right: auto;
+  }
+
+  &[id^=cbunpublish] {
+    right: auto;
+  }
+}
+
+// reveal associated tooltip on focus
+:focus + [role="tooltip"],
+:hover + [role="tooltip"] {
+  position: absolute;
+  display: block;
+}
+
+.filter-search-bar__description {
+  bottom: 100%;
+}
+
+fieldset {
+  margin-bottom: $cassiopeia-grid-gutter*2;
+  + fieldset {
+    margin-top: $cassiopeia-grid-gutter*2;
+  }
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.control-group {
+  margin: $cassiopeia-grid-gutter 0;
+}
+.container-popup .filter-search-bar__description {
+  top: 100%;
+  bottom: auto;
+}
+
+.com-users-login__options {
+  margin-top: $cassiopeia-grid-gutter*2;
+}
+
+.com-users-profile__edit,
+.com-users-registration {
+  #jform_privacyconsent_privacy,
+  #jform_profile_tos,
+  #jform_terms_terms {
+    .radio {
+      display: inline-flex;
+      gap: 1rem;
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss

@@ -0,0 +1,14 @@
+// Frontend Editing
+
+.btn.jmodedit {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
+  z-index: 900;
+  color: var(--#{$prefix}link-color);
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid #58595a;
+  border-radius: .25rem;
+}
+

media/templates/site/cassiopeia/scss/blocks/_global.scss

@@ -0,0 +1,254 @@
+// Global
+:root {
+  scroll-behavior: smooth;
+  font-size: $font-size-root;
+
+  // Disable smooth scroll when the user has set "prefers-reduced-motion"
+  @media screen and (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+html {
+  background-color: $white;
+}
+
+body {
+  position: relative;
+  min-height: 100vh;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--cassiopeia-font-family-headings, $font-family-sans-serif);
+  font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
+}
+
+.display-1 {
+  font-size: clamp(2.7rem, 8vw, 5.5rem);
+}
+
+.display-2 {
+  font-size: clamp(2.3rem, 7vw, 4.5rem);
+}
+
+.display-3 {
+  font-size: clamp(1.9rem, 6vw, 3.5rem);
+}
+
+.display-4 {
+  font-size: clamp(1.5rem, 5vw, 2.5rem);
+}
+
+.lead {
+  font-size: clamp(1.1rem, 3vw, 1.25rem);
+}
+
+a {
+  color: var(--#{$prefix}link-color);
+
+  &:not([class]) {
+    text-decoration: underline;
+  }
+
+  &:not(.btn):hover,
+  &:not(.btn):focus {
+    color: var(--cassiopeia-color-hover);
+  }
+
+  &.navbar-brand {
+    color: var(--cassiopeia-color-brand);
+  }
+}
+
+.btn-primary {
+  background-color: var(--cassiopeia-color-primary);
+  border-color: var(--cassiopeia-color-primary);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cassiopeia-color-hover);
+    border-color: var(--cassiopeia-color-hover);
+  }
+}
+
+.btn-group {
+  margin-bottom: $cassiopeia-grid-gutter;
+  > input {
+    padding: $cassiopeia-grid-gutter * .5;
+    border: 1px solid $gray-400;
+    @include border-start-radius($border-radius);
+    @include border-end-radius(0);
+  }
+  > .btn-group {
+    margin-bottom: 0;
+  }
+}
+
+.com-content-article {
+  ol,
+  ul {
+    overflow: hidden;
+  }
+}
+
+.com-content-category__pagination {
+  margin-bottom: $cassiopeia-grid-gutter;
+}
+
+small,
+.small {
+  font-size: $font-size-sm;
+}
+
+dd {
+  padding: 0;
+  word-wrap: break-word;
+}
+
+th dd {
+  font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
+}
+
+.com-contact__thumbnail {
+  text-align: left;
+}
+
+@include media-breakpoint-up(xl) {
+  dl.dl-horizontal {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    dt {
+      grid-column-start: 1;
+      grid-column-end: 2;
+    }
+
+    dd {
+      grid-column-start: 2;
+      grid-column-end: 3;
+      padding: 0 0 0 $cassiopeia-grid-gutter;
+      margin-bottom: 0;
+    }
+  }
+
+  .com-contact__container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, auto);
+    grid-gap: 1rem;
+    margin-bottom: $cassiopeia-grid-gutter;
+
+    h3 {
+      grid-column: 1 / 5;
+    }
+
+    .com-contact__thumbnail {
+      grid-column: 3 / 5;
+      grid-row: 2 / 5;
+      margin-bottom: $cassiopeia-grid-gutter;
+      text-align: right;
+    }
+
+    .com-contact__position {
+      grid-column: 1 / 3;
+      grid-row: 2 / 3;
+    }
+
+    .com-contact__info {
+      grid-column: 1 / 3;
+      grid-row: 3 / 4;
+    }
+  }
+
+  .com-users-profile {
+    dt {
+      min-width: 180px;
+    }
+  }
+}
+
+figure {
+  margin: 0 0 ($cassiopeia-grid-gutter*2);
+  &.float-start {
+    margin-right: $cassiopeia-grid-gutter;
+  }
+  &.float-end {
+    margin-left: $cassiopeia-grid-gutter;
+  }
+}
+
+figcaption {
+  font-size: .9em;
+  color: $gray-600;
+}
+
+.mod-menu {
+  flex-direction: column;
+}
+
+// meter element
+meter {
+  width: 100%;
+}
+
+.pagenavigation,
+.pager {
+  clear: both;
+  .pagination {
+    justify-content: space-between;
+    padding: 0;
+    margin: $cassiopeia-grid-gutter 0;
+
+    .next:only-child {
+      margin-left: auto;
+    }
+  }
+}
+
+.page-link {
+  color: var(--#{$prefix}link-color);
+  &:hover {
+    color: var(--#{$prefix}link-color);
+  }
+}
+
+.pager {
+  .pagination {
+    justify-content: center;
+  }
+}
+
+[dir="rtl"] li.next .page-link {
+  border-top-left-radius: .25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: .25rem;
+}
+
+[dir="rtl"] li.previous .page-link {
+  border-top-left-radius: 0;
+  border-top-right-radius: .25rem;
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: 0;
+}
+
+.article-index {
+  .toclink.active {
+    color: currentColor;
+  }
+}
+
+// Bootstrap 4 b/c
+.sr-only {
+  @extend .visually-hidden;
+}

media/templates/site/cassiopeia/scss/blocks/_header.scss

@@ -0,0 +1,232 @@
+// Header
+
+.container-header {
+  position: relative;
+  z-index: 10;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad;
+  box-shadow: 0 5px 5px hsla(0, 0%, 0%, .03) inset;
+
+  @include media-breakpoint-down(lg) {
+    position: relative !important;
+  }
+
+  .grid-child {
+    padding: $cassiopeia-grid-gutter * .5;
+  }
+
+  nav {
+    padding: 0;
+    margin-top: $cassiopeia-grid-gutter * .5;
+  }
+
+  .site-description {
+    font-size: 1rem;
+    color: $white;
+    white-space: normal;
+  }
+
+  .navbar-brand {
+    position: relative;
+    display: inline-block;
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+    font-size: 2rem;
+    color: $white;
+    margin-inline-end: auto;
+
+    a {
+      color: $white;
+    }
+
+    &:hover,
+    &:focus {
+      color: scale-color($white, $lightness: -6%);
+    }
+  }
+
+  .container-nav {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: $cassiopeia-grid-gutter;
+
+    @include media-breakpoint-down(md) {
+      .container-search,
+      nav {
+        margin-top: $cassiopeia-grid-gutter;
+      }
+    }
+
+    .container-search:only-child {
+      margin-left: auto;
+    }
+  }
+
+  .navbar-collapse {
+    &.show {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  .mod-menu {
+    flex: 1 0 100%;
+    padding: 0;
+    margin: 0;
+    color: $white;
+    list-style: none;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      flex: 1 1 0%;
+      flex-direction: row;
+    }
+
+    > li {
+      position: relative;
+
+      @include media-breakpoint-up(lg) {
+        + li {
+          margin-left: 1.55em;
+        }
+      }
+
+      > a,
+      > span {
+        position: relative;
+        color: currentColor;
+        text-decoration: none;
+      }
+
+      &::after {
+        @include media-breakpoint-up(lg) {
+          position: absolute;
+          right: 50%;
+          bottom: 0;
+          left: 50%;
+          display: block;
+          height: 2px;
+          margin: auto;
+          content: "";
+          background: transparent;
+          opacity: .2;
+          transition: all .2s ease, background-color .2s ease;
+        }
+      }
+
+      &.active::after,
+      &:hover::after {
+        right: 2px;
+        left: 0;
+        background: $white;
+      }
+
+      @include media-breakpoint-down(lg) {
+        &.active > a,
+        &.active > span,
+        > a:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .parent {
+      > ul {
+        display: none;
+        color: $gray-900;
+      }
+    }
+  }
+
+  @if $metismenu==true {
+    .metismenu > li {
+      + li {
+        margin-left: 0;
+      }
+
+      > a::after,
+      > button::before {
+
+        @include media-breakpoint-up(lg) {
+          position: absolute;
+          right: 50%;
+          bottom: 0;
+          left: 50%;
+          display: block;
+          height: 2px;
+          margin: auto;
+          content: "";
+          background: transparent;
+          opacity: .2;
+          transition: all .2s ease, background-color .2s ease;
+        }
+      }
+
+      > a:hover::after,
+      > button:hover::before,
+      &.active > a::after,
+      &.active > button::before {
+        right: 0;
+        left: 0;
+        background: $white;
+      }
+
+      > button.mm-toggler-link:hover::before,
+      &.active > button.mm-toggler-link::before {
+        right: 0;
+        left: .5em;
+      }
+    }
+
+    .metismenu > li.level-1 {
+      &.active > a,
+      &.active > button,
+      > a:hover,
+      > button:hover {
+
+        @include media-breakpoint-up(lg) {
+          text-decoration: none;
+        }
+      }
+
+      > ul {
+        min-width: 12rem;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    color: $white;
+    cursor: pointer;
+    border: 1px solid $white;
+
+    .fas {
+      font-size: 1.5rem;
+    }
+  }
+
+  .container-search {
+    margin-top: $cassiopeia-grid-gutter * .5;
+  }
+
+  .mod-finder {
+    color: $white;
+
+    a {
+      color: $white;
+
+      &:hover, &:focus {
+        color: darken($white, 10%);
+      }
+    }
+
+    .awesomplete {
+      color: var(--body-color);
+
+      > ul {
+        background: linear-gradient(to bottom right, $white, hsla(0,0%,100%,.9));
+      }
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_icons.scss

@@ -0,0 +1,76 @@
+// Icons
+
+.#{$jicon-css-prefix}-white {
+  color: $white;
+}
+
+.input-group-text {
+  &::before {
+    min-width: 16px;
+  }
+}
+
+.tbody-icon {
+  padding: 0 3px;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+
+  [class^="#{$jicon-css-prefix}-"],
+  [class*=" #{$jicon-css-prefix}-"],
+  [class^="#{$fa-css-prefix}-"],
+  [class*=" #{$fa-css-prefix}-"] {
+    width: 26px;
+    height: 26px;
+    font-size: 1.1rem;
+    line-height: 22px;
+    color: $gray-400;
+    border: 2px solid var(--border);
+    border-radius: 50%;
+  }
+
+  .#{$jicon-css-prefix}-publish,
+  .#{$jicon-css-prefix}-check,
+  .#{$fa-css-prefix}-check {
+    color: $success;
+    border-color: $success;
+  }
+
+  .#{$jicon-css-prefix}-checkedout,
+  .#{$jicon-css-prefix}-lock,
+  .#{$fa-css-prefix}-lock {
+    width: auto;
+    height: auto;
+    font-size: 1.2rem;
+    line-height: 1rem;
+    color: $gray-700;
+    border: 0;
+  }
+
+  &.home-disabled,
+  &.featured-disabled,
+  &.color-featured-disabled,
+  &.#{$jicon-css-prefix}-star-disabled,
+  &.#{$fa-css-prefix}-star-disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+}
+
+.tbody-icon .icon-delete,
+.tbody-icon .fa-delete,
+.tbody-icon .icon-times,
+.tbody-icon .fa-times {
+  color: $danger;
+  border-color: $danger;
+}
+
+// WebAuthn
+.plg_system_webauthn_login_button svg {
+  width: 30px;
+  margin: 4px;
+}
+
+.plg_system_webauthn_login_button svg path, .plg_system_webauthn_login_button svg circle {
+  fill: var(--black);
+}

media/templates/site/cassiopeia/scss/blocks/_iframe.scss

@@ -0,0 +1,9 @@
+// Iframe
+
+iframe {
+  border: 0;
+}
+
+.modal iframe {
+  width: 100%;
+}

media/templates/site/cassiopeia/scss/blocks/_layout.scss

@@ -0,0 +1,120 @@
+// Layout
+
+.grid-child {
+  display: flex;
+  width: 100%;
+  max-width: max-width(xxl);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mod-custom {
+  position: relative;
+}
+
+.container-topbar,
+.container-below-top {
+  color: $white;
+  a {
+    color: currentColor;
+  }
+}
+
+.container-banner {
+  display: block;
+  margin: 0 0 2rem;
+}
+
+.container-top-a,
+.container-top-b,
+.container-bottom-a,
+.container-bottom-b {
+  position: relative;
+  > * {
+    flex: 1;
+    margin: ($cassiopeia-grid-gutter * .5) 0;
+  }
+
+  @include media-breakpoint-down(lg) {
+    flex-direction: column;
+
+    > * {
+      flex: 0 1 auto;
+    }
+  }
+}
+
+.container-component nav {
+  position: relative;
+}
+
+.container-component,
+.container-sidebar-left,
+.container-sidebar-right {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: 0;
+
+    &:first-child {
+      margin-top: $cassiopeia-grid-gutter;
+    }
+  }
+
+  > * + * {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+}
+
+.container-sidebar-left,
+.container-sidebar-right {
+  flex: 0 0 auto;
+  width: calc(100% - #{$cassiopeia-grid-gutter});
+  order: 1;
+
+  @include media-breakpoint-up(md) {
+    width: calc(25% - #{$cassiopeia-grid-gutter});
+    order: 0;
+  }
+}
+
+.container-sidebar-left {
+  .sidebar-left:first-child {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+  .sidebar-left:last-child {
+    margin-bottom: $cassiopeia-grid-gutter;
+  }
+}
+.container-sidebar-right {
+  .sidebar-right:first-child {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+  .sidebar-right:last-child {
+    margin-bottom: $cassiopeia-grid-gutter;
+  }
+}
+
+.system-debug {
+  display: block;
+}
+
+.options-form {
+  width: 100%;
+  padding: 1vw 2vw;
+  margin-bottom: 1rem;
+  color: #495057;
+  background-color: $white;
+  border: 1px solid #b2bfcd;
+
+  > legend {
+    float: none;
+    width: auto;
+    padding: 0 .5rem;
+    font-weight: 700;
+    color: #495057;
+    background-color: $white;
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_legacy.scss

@@ -0,0 +1,8 @@
+// Legacy
+
+.left.item-image {
+  float: left;
+}
+.right.item-image {
+  float: right;
+}

media/templates/site/cassiopeia/scss/blocks/_modals.scss

@@ -0,0 +1,216 @@
+// Modals
+
+.modal {
+  .btn {
+    margin-right: .5rem;
+  }
+
+  .btn-primary:not([href]),
+  .btn-success:not([href]) {
+    color: $white;
+
+    &:hover {
+      color: $white;
+    }
+  }
+}
+
+.modal-header {
+  padding: 0 15px;
+}
+
+.modal-title {
+  font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
+  line-height: $modal-header-height;
+}
+
+.contentpane {
+  padding: 15px;
+
+  .main-card {
+    margin: -10px;
+    box-shadow: none;
+  }
+}
+
+// Styling for joomla-dialog element
+joomla-dialog {
+  dialog {
+    width: 96vw;
+    max-width: 1700px;
+    height: 96vh;
+    padding: 0;
+    border: 1px solid var(--border-color-translucent);
+    border-radius: .3rem;
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+
+    @include media-breakpoint-up(xxl) {
+      width: 80vw;
+      height: 80vh;
+    }
+
+    // Override display to flex, to scale the content to full height
+    &[open] {
+      display: flex;
+    }
+  }
+
+  &[type="image"] {
+    dialog {
+      width: fit-content;
+      height: fit-content;
+    }
+  }
+
+  &[type="iframe"] {
+    dialog {
+      overflow: hidden;
+    }
+  }
+
+  iframe.iframe-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  // Extra loading animation for iframe and ajax types
+  &[type="iframe"],
+  &[type="ajax"] {
+    &.loading {
+      dialog:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 66px;
+        height: 66px;
+        content: "";
+        background: url("../../../../system/images/ajax-loader.gif") no-repeat center;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+// Dialog animation
+joomla-dialog dialog[open] {
+  animation: dialog-show .4s ease normal;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+@keyframes dialog-show {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+// Dialog elements
+.joomla-dialog-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+
+  .buttons-holder {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+
+    button {
+      margin-inline: .375rem;
+    }
+  }
+}
+.joomla-dialog-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+
+  h3 {
+    margin: 0;
+  }
+
+  .header-icon {
+    margin-inline-end: .375rem;
+    font-size: $h3-font-size;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+.joomla-dialog-body {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+
+  .buttons-holder {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  // Apply overflow for potentially large content
+  joomla-dialog[type="inline"],
+  joomla-dialog[type="ajax"] & {
+    overflow: auto;
+  }
+
+  // Content basic loading animation
+  joomla-dialog.loading & {
+    opacity: 0;
+  }
+  joomla-dialog.loaded & {
+    opacity: 1;
+    transition: opacity .4s ease;
+  }
+}
+.joomla-dialog-footer {
+  position: relative;
+  padding: 1rem;
+  border-top: 1px solid var(--border-color);
+
+  .buttons-holder button {
+    padding-inline: 22px;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+
+// Dialog alert and confirm
+.joomla-dialog-alert,
+.joomla-dialog-confirm {
+  dialog {
+    width: 600px;
+    max-width: 80vw;
+    height: fit-content;
+  }
+
+  .joomla-dialog-body {
+    padding: 1rem;
+  }
+}
+
+// Dialog for content select field
+.joomla-dialog-content-select-field {
+  dialog {
+    @include media-breakpoint-up(xxl) {
+      width: 90vw;
+      height: 90vh;
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_modifiers.scss

@@ -0,0 +1,330 @@
+// Modifiers
+
+// error page
+
+.error_site {
+  .page-header {
+    margin-top: $cassiopeia-grid-gutter;
+  }
+}
+
+// com_modules
+[class^="container-"],
+[class*=" container-"] {
+  .span-col-2 {
+    flex: 0 0 50%;
+    max-width: calc(50% - #{$cassiopeia-grid-gutter});
+  }
+
+  .span-col-3 {
+    flex: 0 0 33.333%;
+    max-width: calc(33.333% - #{$cassiopeia-grid-gutter});
+  }
+
+  .span-col-4 {
+    flex: 0 0 25%;
+    max-width: calc(25% - #{$cassiopeia-grid-gutter});
+  }
+}
+
+@supports (display: grid) {
+
+  [class^="span-"],
+  [class*=" span-"] {
+    grid-column-end: auto;
+    grid-row-end: auto;
+  }
+
+  [class^="span-col"],
+  [class*=" span-col"] {
+    @include media-breakpoint-up(md) {
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .span-col-2 {
+      grid-column-end: span 2;
+    }
+
+    .span-col-3 {
+      grid-column-end: span 3;
+    }
+
+    .span-col-4 {
+      grid-column-end: span 4;
+    }
+
+    .span-row-2 {
+      grid-row-end: span 2;
+    }
+
+    .span-row-3 {
+      grid-row-end: span 3;
+    }
+
+    .span-row-4 {
+      grid-row-end: span 4;
+    }
+  }
+
+  [class^="container-"],
+  [class*=" container-"] {
+
+    [class^="span-"],
+    [class*=" span-"] {
+      flex: 0 1 auto;
+      max-width: none;
+    }
+  }
+}
+
+// com_content
+.blog-items {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 0;
+  margin-right: -($cassiopeia-grid-gutter * .5);
+  margin-bottom: $cassiopeia-grid-gutter;
+  margin-left: -($cassiopeia-grid-gutter * .5);
+
+  @include media-breakpoint-up(lg) {
+    &.columns-2 {
+      > div {
+        width: 50%;
+      }
+    }
+
+    &.columns-3 {
+      > div {
+        width: 33.33333%;
+      }
+    }
+
+    &.columns-4 {
+      > div {
+        width: 25%;
+      }
+    }
+  }
+}
+
+.blog-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0 ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
+  overflow: hidden;
+
+  .boxed & {
+    background-color: $white;
+    box-shadow: 0 0 2px hsla(216, 13%, 23%, .1), 0 2px 5px hsla(216, 13%, 23%, .08), 0 5px 15px hsla(216, 13%, 23%, .08), inset 0 3px 0 var(--cassiopeia-color-primary);
+
+    .item-content {
+      padding: 25px;
+    }
+  }
+
+  .item-image {
+    margin-top: 3px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    .boxed & {
+      margin-bottom: 0;
+    }
+
+    @include media-breakpoint-up(lg) {
+      .image-right & {
+        order: 1;
+      }
+    }
+
+    .image-bottom & {
+      margin-top: -15px;
+      order: 1;
+    }
+  }
+
+  .item-content {
+    .image-left & {
+      padding-left: 25px;
+    }
+
+    .image-right & {
+      padding-right: 25px;
+    }
+  }
+
+  .image-left &,
+  .image-right & {
+    flex-direction: column;
+
+    @include media-breakpoint-up(lg) {
+      flex-direction: row;
+      .item-image {
+        flex: 1 0 40%;
+      }
+      .item-content {
+        flex: 1 0 60%;
+      }
+    }
+  }
+}
+
+.article-info {
+  dd {
+    padding: 0;
+  }
+}
+
+@supports (display: grid) {
+  .blog-items {
+    display: grid;
+    margin: 0 0 $cassiopeia-grid-gutter;
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    grid-gap: $cassiopeia-grid-gutter;
+
+    .blog-item {
+      padding: 0;
+    }
+
+    &[class^="columns-"],
+    &[class*=" columns-"] {
+      > div {
+        flex: 0 1 auto;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      &.columns-2 {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      &.columns-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      &.columns-4 {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+      }
+    }
+  }
+}
+
+.blog-items {
+
+  &[class^="masonry-"],
+  &[class*=" masonry-"] {
+    display: block;
+    column-gap: $cassiopeia-grid-gutter;
+
+    .blog-item {
+      display: inline-flex;
+      margin-bottom: $cassiopeia-grid-gutter;
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.masonry-2 {
+      column-count: 2;
+    }
+
+    &.masonry-3 {
+      column-count: 3;
+    }
+
+    &.masonry-4 {
+      column-count: 4;
+    }
+  }
+}
+
+.image-alternate {
+  .blog-item:nth-of-type(2n+1) {
+    .item-image {
+      order: 0;
+    }
+  }
+
+  &.image-left {
+    .blog-item:nth-of-type(2n+1) {
+      .item-image {
+        margin-right: 0;
+        margin-left: 25px;
+        order: 1;
+      }
+    }
+  }
+
+  &.image-top {
+    .blog-item:nth-of-type(2n+1) {
+      .item-image {
+        order: 1;
+      }
+    }
+  }
+}
+
+// Modules
+
+.breadcrumb {
+  margin-bottom: 0;
+  background-color: hsla(0, 0%, 0%, .03);
+}
+
+.no-card {
+  .newsflash-horiz {
+    li {
+      padding: 0 1rem 1rem;
+      border: 1px solid $gray-300;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      @include border-bottom-start-radius($border-radius);
+      @include border-bottom-end-radius($border-radius);
+      box-shadow: $cassiopeia-box-shadow;
+
+      figure {
+        margin: 0 -1rem 1rem;
+      }
+    }
+  }
+}
+
+.mod-list {
+  padding-inline-start: 0;
+  list-style: none;
+
+  li {
+    padding: .25em 0;
+
+    a {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+
+        @at-root .container-header & {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.active > a {
+      text-decoration: underline;
+
+      @at-root .container-header & {
+        text-decoration: none;
+      }
+    }
+
+    .mod-menu__sub {
+      padding-left: $cassiopeia-grid-gutter;
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_tags.scss

@@ -0,0 +1,15 @@
+// Tags
+
+.tags {
+  .list-inline-item {
+    margin: .25rem .25rem .5rem;
+  }
+  a.btn {
+    font-weight: 700;
+  }
+}
+
+.tag {
+  display: inline-block;
+  padding: .5rem .5rem .5rem 0;
+}

media/templates/site/cassiopeia/scss/blocks/_toolbar.scss

@@ -0,0 +1,175 @@
+.subhead {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-toolbar;
+  width: auto;
+  min-height: 43px;
+  padding: .25rem;
+  color: #495057; //#0c192e;
+  background: $white;
+  box-shadow: -3px -2px 22px #ddd;
+
+  .row {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &.noshadow {
+    box-shadow: none;
+  }
+
+  joomla-toolbar-button,
+  .btn-group {
+    margin-inline-start: .75rem;
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+  }
+
+  joomla-toolbar-button {
+
+    .btn > span,
+    .dropdown-item > span {
+      margin-inline-end: .5rem;
+      width: 1.25em;
+      text-align: center;
+    }
+  }
+
+  .btn {
+    --subhead-btn-accent: #495057;
+    padding: 0 1rem;
+    margin: 5px 0;
+    font-size: 1rem;
+    line-height: 2.45rem;
+    color: #495057;
+    background: $white;
+    border-color: $gray-500;
+
+    > span {
+      display: inline-block;
+      color: var(--subhead-btn-accent);
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      color: rgba(255, 255, 255, .9);
+      background-color: var(--subhead-btn-accent);
+      border-color: var(--subhead-btn-accent);
+
+      > span {
+        color: rgba(255, 255, 255, .9);
+      }
+    }
+
+    &.btn-success {
+      --subhead-btn-accent: var(--success);
+    }
+
+    &.btn-danger {
+      --subhead-btn-accent: var(--danger);
+    }
+
+    &.btn-primary {
+      --subhead-btn-accent: #2a69b8;
+    }
+
+    &.btn-secondary {
+      --subhead-btn-accent: #001b4c;
+    }
+
+    &.btn-info {
+      --subhead-btn-accent: #132f53;
+    }
+
+    &.btn-action {
+      --subhead-btn-accent: #132f53;
+      display: flex;
+      align-items: center;
+
+      &::after {
+        width: 2.375rem;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f078";
+        border: 0;
+
+      }
+    }
+
+    &[disabled],
+    &.dropdown-toggle[disabled] {
+      --subhead-btn-accent: #132f53;
+      background: rgba($gray-300, .8);
+      opacity: .5;
+
+      &:hover,
+      &:active,
+      &:focus {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .dropdown-toggle {
+    &.btn {
+      padding-inline-end: 0;
+    }
+  }
+
+  .btn-group:not(:last-child) > .dropdown-toggle-split {
+    order: 1;
+    margin-inline-start: -$border-radius;
+    border-radius: 0 $border-radius $border-radius 0;
+  }
+
+  .dropdown-menu joomla-toolbar-button,
+  .btn-group joomla-toolbar-button {
+    margin-inline-start: 0;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  joomla-tab[view=accordion] .col-md-9,
+  joomla-tab[view=accordion] .col-md-3 {
+    padding: .5rem 1rem !important;
+  }
+
+  #myTab {
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  joomla-tab[view=accordion] ul li {
+    width: 100%;
+  }
+
+  .subhead {
+
+    joomla-toolbar-button,
+    .btn-group,
+    .btn {
+      width: 100%;
+      margin-left: 0;
+      text-align: left;
+    }
+
+    .btn-toolbar > .btn-group,
+    .btn-toolbar > joomla-toolbar-button {
+      margin-left: 0;
+    }
+
+    .btn.btn-action::after {
+      text-align: center;
+      margin-inline-start: auto;
+    }
+
+    .dropdown-toggle-split {
+      width: auto;
+    }
+  }
+}

media/templates/site/cassiopeia/scss/blocks/_utilities.scss

@@ -0,0 +1,31 @@
+// Utilities
+
+// Keep B/C
+.element-invisible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.table-row {
+  display: table-row;
+}
+
+joomla-alert {
+  display: none;
+}
+
+.editor-xtd-buttons .btn {
+  margin-bottom: 5px;
+}

media/templates/site/cassiopeia/scss/editor.scss

@@ -0,0 +1,93 @@
+/* STYLES FOR JOOMLA! EDITOR */
+body {
+  margin: 1rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #22262a;
+  background-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+h2 {
+  font-size: calc(1.325rem + .9vw);
+}
+
+h3 {
+  font-size: calc(1.3rem + .6vw);
+}
+
+h4 {
+  font-size: calc(1.275rem + .3vw);
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+a {
+  text-decoration: none;
+  &:link {
+    color: #224faa;
+  }
+  &:hover {
+    color: #424077;
+  }
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* STYLES FOR JOOMLA! EDITOR */
+hr#system-readmore {
+  color: #f00;
+  border: #f00 dashed 1px;
+}
+
+span[lang] {
+  padding: 2px;
+  border: 1px dashed #bbb;
+  &:after {
+    font-size: smaller;
+    color: #f00;
+    vertical-align: super;
+    content: attr(lang);
+  }
+}
+
+.float-start {
+  float: left;
+}
+
+.float-end {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.d-block {
+  display: block !important;
+}

media/templates/site/cassiopeia/scss/global/colors_alternative.scss

@@ -0,0 +1,12 @@
+// Variables, Functions and Mixins
+@import "../tools/tools";
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+:root {
+  --cassiopeia-color-primary: #{$alternative-color-primary};
+  // @deprecated --casiopeia-color-link is deprecated in favour of --link-color
+  --cassiopeia-color-link: #{$alternative-color-link};
+  --link-color: #{$alternative-color-link};
+  --link-color-rgb: #{to-rgb($alternative-color-link)};
+  --cassiopeia-color-hover: #{$alternative-color-hover};
+}

media/templates/site/cassiopeia/scss/global/colors_standard.scss

@@ -0,0 +1,12 @@
+// Variables, Functions and Mixins
+@import "../tools/tools";
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+:root {
+  --cassiopeia-color-primary: #{$standard-color-primary};
+  // @deprecated --casiopeia-color-link is deprecated in favour of --link-color
+  --cassiopeia-color-link: #{$standard-color-link};
+  --link-color: #{$standard-color-link};
+  --link-color-rgb: #{to-rgb($standard-color-link)};
+  --cassiopeia-color-hover: #{$standard-color-hover};
+}

media/templates/site/cassiopeia/scss/global/fonts-local_roboto.scss

@@ -0,0 +1,10 @@
+// Fonts
+$roboto-font-path: "../../../../../vendor/roboto-fontface/fonts" !default;
+@import "../../../../../vendor/roboto-fontface/scss/roboto/sass/roboto-fontface";
+
+:root {
+  --cassiopeia-font-family-body: "Roboto", sans-serif;
+  --cassiopeia-font-family-headings: "Roboto", sans-serif;
+  --cassiopeia-font-weight-headings: 700;
+  --cassiopeia-font-weight-normal: 400;
+}

media/templates/site/cassiopeia/scss/offline.scss

@@ -0,0 +1,98 @@
+// Bootstrap functions
+@import "../../../../vendor/bootstrap/scss/functions";
+
+// Variables, Functions and Mixins
+@import "tools/tools";
+
+.outer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.offline-card {
+  width: 100%;
+  max-width: 30em;
+  margin: 60px auto;
+  background-color: $white;
+  border: 1px solid hsla(0, 0%, 0%, .1);
+  border-radius: 5px;
+  box-shadow: 0 0 10px hsla(0, 0%, 0%, .05);
+}
+
+.header {
+  position: relative;
+  padding: $cassiopeia-grid-gutter ($cassiopeia-grid-gutter*2);
+  margin: 0;
+  color: $white;
+  text-align: center;
+  background-color: var(--cassiopeia-color-primary);
+  background-image: $cassiopeia-header-grad;
+  border-radius: 5px 5px 0 0;
+
+  [dir=rtl] & {
+    background-image: $cassiopeia-header-grad-rtl;
+  }
+}
+
+.login {
+  padding: 40px 20px 20px;
+}
+
+.form-control {
+  max-width: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  margin: 15px 0;
+  border: 0;
+}
+
+form,
+fieldset {
+  padding: 0;
+  margin: 0;
+}
+
+label {
+  display: block;
+  margin: 0;
+}
+
+input[type="text"],
+input[type="password"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+}
+
+input {
+  margin: .5em 0 1em;
+}
+
+.logo-icon {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  z-index: 1;
+  padding: 12px;
+  margin-top: 2px;
+  background-color: $white;
+  border: 1px solid hsla(0, 0%, 0%, .05);
+  border-radius: 50%;
+  box-shadow: 0 0 5px hsla(0, 0%, 0%, .075);
+  transform: translate(-50%, -50%);
+}
+
+.logo-icon svg {
+  display: block;
+  width: 38px;
+}

media/templates/site/cassiopeia/scss/system/searchtools/searchtools.scss

@@ -0,0 +1,56 @@
+@import "../../tools/tools";
+
+// Search tools
+
+.js-stools-container-bar {
+  padding: 10px 20px;
+
+  .btn-toolbar {
+    justify-content: flex-end;
+
+    > * {
+      margin: 4px 0;
+      margin-inline-end: 8px;
+    }
+
+    .js-stools-btn-clear {
+      background-color: $cyan;
+      border: 0;
+    }
+  }
+
+  .ordering-select {
+    display: flex;
+  }
+}
+
+.js-stools-container-filters {
+  display: none;
+  padding: 0 20px;
+  margin-bottom: 20px;
+
+  &-visible {
+    display: grid;
+    grid-gap: 8px;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    padding: 10px;
+    background-color: $white;
+  }
+
+  > * {
+    margin: 4px 0;
+    margin-inline-end: 8px;
+  }
+}
+
+.js-stools-field-list {
+  + .js-stools-field-list {
+    margin-inline-start: 8px;
+  }
+}
+
+.js-stools-field-selector {
+  .form-select {
+    width: auto;
+  }
+}

media/templates/site/cassiopeia/scss/template-rtl.scss

@@ -0,0 +1,2 @@
+// This file is a placeholder for the rtl template
+@import "template";

media/templates/site/cassiopeia/scss/template.scss

@@ -0,0 +1,186 @@
+// Bootstrap functions
+@import "../../../../vendor/bootstrap/scss/functions";
+@import "tools/variables/variables";
+@import "../../../../vendor/bootstrap/scss/variables";
+@import "../../../../vendor/bootstrap/scss/variables-dark";
+@import "../../../../vendor/bootstrap/scss/maps";
+@import "../../../../vendor/bootstrap/scss/mixins";
+@import "../../../../vendor/bootstrap/scss/utilities";
+
+// Variables, Functions and Mixins
+@import "tools/tools";
+
+// Bootstrap
+@import "../../../../vendor/bootstrap/scss/bootstrap";
+
+// jQuery Minicolors
+@import "../../../../system/scss/jquery-minicolors";
+
+// Blocks
+@import "blocks/global"; // Leave this first
+@import "blocks/alerts";
+@import "blocks/back-to-top";
+@import "blocks/banner";
+@import "blocks/footer";
+@import "blocks/form";
+@import "blocks/frontend-edit";
+@import "blocks/header";
+@import "blocks/icons";
+@import "blocks/iframe";
+@import "blocks/layout";
+@import "blocks/modals";
+@import "blocks/modifiers";
+@import "blocks/utilities";
+@import "blocks/toolbar";
+@import "blocks/legacy";
+@import "blocks/tags";
+@import "blocks/css-grid"; // Last to allow fallback
+
+// Vendor overrides
+@import "vendor/awesomplete";
+@import "vendor/bootstrap/buttons";
+@import "vendor/bootstrap/custom-forms";
+@import "vendor/bootstrap/collapse";
+@import "vendor/bootstrap/dropdown";
+@import "vendor/bootstrap/forms";
+@import "vendor/bootstrap/lists";
+@import "vendor/bootstrap/modal";
+@import "vendor/bootstrap/nav";
+@import "vendor/bootstrap/pagination";
+@import "vendor/bootstrap/table";
+@import "vendor/chosen";
+@import "vendor/dragula";
+@import "vendor/metismenu/metismenu";
+@import "vendor/minicolors";
+@import "vendor/tinymce";
+
+// Finally add the cassiopeia colours
+:root {
+  @each $color, $value in $cassiopeia-colors {
+    --#{$color}: #{$value};
+  }
+}
+
+.border-primary {
+  border-color: var(--primary) !important;
+}
+
+.border-secondary {
+  border-color: var(--secondary) !important;
+}
+
+.border-success {
+  border-color: var(--success) !important;
+}
+
+.border-info {
+  border-color: var(--info) !important;
+}
+
+.border-warning {
+  border-color: var(--warning) !important;
+}
+
+.border-danger {
+  border-color: var(--danger) !important;
+}
+
+.border-light {
+  border-color: var(--light) !important;
+}
+
+.border-dark {
+  border-color: var(--dark) !important;
+}
+
+.border-white {
+  border-color: var(--white) !important;
+}
+
+.text-primary {
+  color: var(--primary) !important;
+}
+
+.text-secondary {
+  color: var(--secondary) !important;
+}
+
+.text-success {
+  color: var(--success) !important;
+}
+
+.text-info {
+  color: var(--info) !important;
+}
+
+.text-warning {
+  color: var(--warning) !important;
+}
+
+.text-danger {
+  color: var(--danger) !important;
+}
+
+.text-light {
+  color: var(--light) !important;
+}
+
+.text-dark {
+  color: var(--dark) !important;
+}
+
+.text-black {
+  color: var(--black) !important;
+}
+
+.text-white {
+  color: var(--white) !important;
+}
+
+.text-body {
+  color: var(--body-color) !important;
+}
+
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
+}
+
+.bg-success {
+  background-color: var(--success) !important;
+}
+
+.bg-info {
+  background-color: var(--info) !important;
+}
+
+.bg-warning {
+  background-color: var(--warning) !important;
+}
+
+.bg-danger {
+  background-color: var(--danger) !important;
+}
+
+.bg-light {
+  background-color: var(--light) !important;
+}
+
+.bg-dark {
+  background-color: var(--dark) !important;
+}
+
+.bg-black {
+  background-color: var(--black) !important;
+}
+
+.bg-white {
+  background-color: var(--white) !important;
+}
+
+.bg-body {
+  background-color: var(--body-bg) !important;
+}

media/templates/site/cassiopeia/scss/tools/_tools.scss

@@ -0,0 +1,10 @@
+// Vendor
+@import "../../../../../vendor/bootstrap/scss/functions";
+
+
+// Variables
+@import "variables/variables";
+
+
+// Functions
+@import "functions/max-width";

media/templates/site/cassiopeia/scss/tools/functions/_max-width.scss

@@ -0,0 +1,4 @@
+// Retrieve the max-width
+@function max-width($key: "md") {
+  @return map-get($container-max-widths, $key);
+}

media/templates/site/cassiopeia/scss/tools/variables/_variables.scss

@@ -0,0 +1,285 @@
+// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
+$prefix: "";
+
+// Disable dark mode in J4.4 - it's going to cause major b/c breaks to introduce. We will enable it in 5.0
+$enable-dark-mode: false;
+
+// Global
+$cassiopeia-container-main-bg:        hsl(0, 0%, 95%) !default;
+$cassiopeia-border-color:             hsl(210, 14%, 89%) !default;
+$cassiopeia-box-shadow:               1px 1px 4px hsla(0, 0%, 0%, .1) !default;
+$cassiopeia-block-header-bg:          hsl(0, 0%, 96%) !default;
+$cassiopeia-header-grad:              linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%) !default;
+$cassiopeia-header-grad-rtl:          linear-gradient(135deg, var(--cassiopeia-color-hover) 0%, var(--cassiopeia-color-primary) 100%) !default;
+$cassiopeia-inverted-text-color:      var(--cassiopeia-color-hover) !default;
+
+// Color system
+
+// Standard
+$standard-color-primary:              hsl(220, 67%, 20%) !default;
+$standard-color-link:                 hsl(220, 67%, 40%) !default;
+$standard-color-hover:                hsl(242, 30%, 36%) !default;
+
+// Alternative
+$alternative-color-primary:           hsl(351, 54%, 37%) !default;
+$alternative-color-link:              hsl(207, 49%, 37%) !default;
+$alternative-color-hover:             hsl(351, 33%, 44%) !default;
+
+$white:                               hsl(0, 0%, 100%) !default;
+$gray-100:                            hsl(210, 17%, 98%) !default;
+$gray-200:                            hsl(210, 16%, 93%) !default;
+$gray-300:                            hsl(210, 14%, 89%) !default;
+$gray-400:                            hsl(210, 14%, 83%) !default;
+$gray-500:                            hsl(210, 11%, 71%) !default;
+$gray-600:                            hsl(210, 7%, 46%) !default;
+$gray-700:                            hsl(210, 9%, 31%) !default;
+$gray-800:                            hsl(210, 10%, 23%) !default;
+$gray-900:                            hsl(210, 11%, 15%) !default;
+$black:                               hsl(0, 0%, 0%) !default;
+
+$grays: (
+  100:                                $gray-100,
+  200:                                $gray-200,
+  300:                                $gray-300,
+  400:                                $gray-400,
+  500:                                $gray-500,
+  600:                                $gray-600,
+  700:                                $gray-700,
+  800:                                $gray-800,
+  900:                                $gray-900
+) !default;
+
+$blue:                                hsl(240, 98%, 17%) !default;
+$indigo:                              hsl(263, 90%, 51%) !default;
+$purple:                              hsl(261, 51%, 51%) !default;
+$pink:                                hsl(332, 79%, 58%) !default;
+$red:                                 hsl(3, 75%, 37%) !default;
+$orange:                              hsl(27, 98%, 54%) !default;
+$yellow:                              hsl(34, 100%, 34%) !default;
+$green:                               hsl(120, 32%, 39%) !default;
+$teal:                                hsl(194, 66%, 61%) !default;
+$cyan:                                hsl(207, 49%, 37%) !default;
+
+$colors: (
+  "blue":                             $blue,
+  "black":                            $black,
+  "indigo":                           $indigo,
+  "purple":                           $purple,
+  "pink":                             $pink,
+  "red":                              $red,
+  "orange":                           $orange,
+  "yellow":                           $yellow,
+  "green":                            $green,
+  "teal":                             $teal,
+  "cyan":                             $cyan,
+  "white":                            $white
+) !default;
+
+$primary:                             $blue !default;
+$secondary:                           $gray-600 !default;
+$success:                             $green !default;
+$info:                                $cyan !default;
+$warning:                             $yellow !default;
+$danger:                              $red !default;
+$light:                               $gray-100 !default;
+$dark:                                $gray-800 !default;
+
+
+$theme-colors: (
+  primary:                            $blue,
+  secondary:                          $secondary,
+  success:                            $success,
+  info:                               $info,
+  warning:                            $warning,
+  danger:                             $danger,
+  light:                              $light,
+  dark:                               $dark
+) !default;
+
+$colors: (
+  card-bg:                         rgba(255, 255, 255, .7),
+  bluegray:                        #b2bfcd,
+  lightbluegray:                   #f6f9fc,
+  toolbar-bg:                      $white,
+  success-border:                  var(--success),
+  info-border:                     var(--info),
+  warning-border:                  var(--warning),
+  danger-border:                   var(--danger),
+  border:                          $gray-400,
+  "white":                         $white, // the key here must be in quotes to avoid scss compilation warnings.
+  white-offset:                    #fefefe,
+  focus:                           #39f,
+  focus-shadow:                    0 0 0 .2rem #eaeaea,
+  toggle-color:                    $white, //used in sidebar
+) !default;
+
+$cassiopeia-colors: (
+  template-sidebar-bg:                 var(--template-bg-dark-80),
+  template-sidebar-font-color:         $white,
+  template-sidebar-link-color:         $white,
+  template-bg-light:                   #f0f4fb, //light background color, frontend dashboard background
+  template-text-light:                 $white,
+  template-special-color:              #132f53,
+  template-link-color:                 #2a69b8,
+  template-link-hover-color:           darken(#2a69b8, 20%),
+  template-contrast:                   #2a69b8,
+  template-bg-dark:                    hsl(var(--hue), 40%, 20%),
+  template-bg-dark-3:                  hsl(var(--hue), 40%, 97%),
+  template-bg-dark-5:                  hsl(var(--hue), 40%, 95%),
+  template-bg-dark-7:                  hsl(var(--hue), 40%, 93%),
+  template-bg-dark-10:                 hsl(var(--hue), 40%, 90%),
+  template-bg-dark-15:                 hsl(var(--hue), 40%, 85%),
+  template-bg-dark-20:                 hsl(var(--hue), 40%, 80%),
+  template-bg-dark-30:                 hsl(var(--hue), 40%, 70%),
+  template-bg-dark-40:                 hsl(var(--hue), 40%, 60%),
+  template-bg-dark-50:                 hsl(var(--hue), 40%, 50%),
+  template-bg-dark-60:                 hsl(var(--hue), 40%, 40%),
+  template-bg-dark-65:                 hsl(var(--hue), 40%, 35%),
+  template-bg-dark-70:                 hsl(var(--hue), 40%, 30%),
+  template-bg-dark-75:                 hsl(var(--hue), 40%, 25%),
+  template-bg-dark-80:                 hsl(var(--hue), 40%, 20%),
+  template-bg-dark-90:                 hsl(var(--hue), 40%, 10%)
+) !default;
+
+// Links
+$link-color:                          $standard-color-link !default;
+$link-hover-color:                    $standard-color-hover !default;
+
+// Breadcrumbs
+$breadcrumb-active-color:             $gray-700 !default;
+
+// Grid columns
+$grid-gutter-width:                   1em !default;
+$cassiopeia-grid-gutter:              $grid-gutter-width !default;
+
+// Components
+$fa-font-path:                        "../../../media/vendor/fontawesome-free/webfonts" !default;
+
+// Treeselect
+$treeselect-line-height:              2.2rem !default;
+
+// MetisMenu
+$metismenu:                           true !default;
+
+// Toolbar
+$cassiopeia-toolbar-line-height:      1.8rem !default;
+
+// Typography
+$font-family-sans-serif:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-base:                    var(--cassiopeia-font-family-body, $font-family-sans-serif) !default;
+
+// Icons
+$jicon-css-prefix:                    icon !default;
+$fa-css-prefix:                       fa !default;
+
+// Tables
+$table-bg-scale:                      -80% !default;
+
+// This should be the same as bootstrap's default. But we override primary colour from $primary (which is a CSS Var)
+// to the SCSS variable matching
+$table-variants: (
+  "primary":    shift-color($standard-color-primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
+) !default;
+
+// Forms
+$input-border-color:                  $gray-400 !default;
+$input-padding:                       .6rem 1rem !default;
+$input-btn-padding-y:                 .6rem !default;
+$input-btn-padding-x:                 1rem !default;
+$input-max-width:                     100% !default;
+$input-focus-border-color:            tint-color($standard-color-primary, 50%) !default;
+
+$form-select-indicator-padding:     3rem !default;
+$form-select-bg:                    $gray-200 !default;
+$form-select-bg-size:               116rem !default;
+$form-select-bg-size-sm:            75rem !default;
+$form-select-indicator:             url("../images/select-bg.svg") !default;
+$form-select-indicator-rtl:         url("../images/select-bg-rtl.svg") !default;
+$form-select-indicator-active:      url("../../../images/select-bg.svg") !default;
+$form-select-indicator-active-rtl:  url("../../../images/select-bg-rtl.svg") !default;
+$form-select-background:            $form-select-indicator no-repeat right center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$form-select-background-rtl:        $form-select-indicator-rtl no-repeat left center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$form-select-multiple-padding-y:    .3rem !default;
+
+$form-range-thumb-active-bg:        tint-color($standard-color-primary, 70%) !default;
+
+// Z-index source list
+$zindex-negative:                     -1 !default;
+$zindex-actions:                      auto !default;
+$zindex-toolbar:                      1000 !default;
+$zindex-sidebar:                      1010 !default;
+$zindex-header:                       1020 !default;
+$zindex-alerts:                       1030 !default;
+$zindex-modal-backdrop:               1040 !default;
+$zindex-modal:                        1050 !default;
+$zindex-popover:                      1060 !default;
+$zindex-tooltip:                      1070 !default;
+$zindex-mobile-bottom:                8000 !default;
+$zindex-mobile-toggle:                9999 !default;
+$zindex-mobile-menu:                  9000 !default;
+
+// Navs
+$nav-link-padding-y:                  .5rem !default;
+
+// Navs
+$cassiopeia-tabs-header-bg:           $cassiopeia-block-header-bg !default;
+$cassiopeia-tabs-active-bg:           hsla(0, 0%, 0%, .3) !default;
+$cassiopeia-tabs-active-highlight:    var(--cassiopeia-color-primary) !default;
+
+// Navbar
+$nav-link-height:                     1.5rem + $nav-link-padding-y * 2 !default;
+
+// Cards
+$cassiopeia-card-title-bg:            $cassiopeia-block-header-bg !default;
+$cassiopeia-card-title-icon-bg:       $cassiopeia-block-header-bg !default;
+$cassiopeia-card-title-icon-bg-hover: scale-color($cassiopeia-card-title-bg, $lightness: 2%) !default;
+$card-bg-color-light:                 $gray-100 !default;
+$card-bg-color-dark:                  var(--cassiopeia-color-primary) !default;
+$card-border-color:                   $cassiopeia-border-color !default;
+
+// Badges
+$badge-default-bg:                    $gray-600 !default;
+
+// Modals
+$modal-header-height:                 3rem !default;
+
+// Accordion
+$accordion-button-active-bg:          tint-color($standard-color-primary, 90%) !default;
+$accordion-button-active-color:       shade-color($standard-color-primary, 10%) !default;
+
+// Alerts
+$state-success-text:                  $white !default;
+$state-success-bg:                    $success !default;
+$state-success-border:                scale-color($success, $lightness: -5%) !default;
+
+$state-info-text:                     $white !default;
+$state-info-bg:                       $info !default;
+$state-info-border:                   scale-color($info, $lightness: -7%) !default;
+
+$state-warning-text:                  $white !default;
+$state-warning-bg:                    $warning !default;
+$state-warning-border:                scale-color($warning, $lightness: -5%) !default;
+
+$state-danger-text:                   $white !default;
+$state-danger-bg:                     $danger !default;
+$state-danger-border:                 scale-color($danger, $lightness: -5%) !default;
+
+// Mark element
+$mark-padding: .1875em 0;
+$mark-bg: #fbeea8 !default;
+
+// scss-docs-start border-radius-variables
+$btn-border-radius: .25rem !default;
+$border-radius: .25rem !default;
+$border-radius-sm: .2rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-xl: .3rem !default;
+$border-radius-2xl: .3rem !default;
+// scss-docs-end border-radius-variables

media/templates/site/cassiopeia/scss/vendor/_awesomplete.scss

@@ -0,0 +1,30 @@
+// Awesomplete
+
+.mod-finder__search.input-group {
+  flex-wrap: nowrap;
+  .awesomplete {
+    input {
+      @include border-end-radius(0);
+    }
+  }
+  button {
+    display: flex;
+    align-items: center;
+    .icon-search {
+      margin-inline-end: .2em;
+    }
+  }
+}
+
+.awesomplete {
+  > input {
+    max-width: 200px;
+
+    @include media-breakpoint-up(lg) {
+      max-width: none;
+    }
+  }
+  > ul {
+    z-index: $zindex-dropdown !important;
+  }
+}

media/templates/site/cassiopeia/scss/vendor/_chosen.scss

@@ -0,0 +1,121 @@
+// Chosen
+
+$chosen-select-padding-y: $form-select-padding-y + .21;
+
+.chosen-container.chosen-container-single {
+  max-width: $input-max-width;
+  font-size: $font-size-base;
+
+  .chosen-single {
+    display: inline-block;
+    height: #{$input-height};
+    padding: $chosen-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $chosen-select-padding-y $form-select-padding-x;
+    line-height: 1.5;
+    color: $form-select-color;
+    vertical-align: middle;
+    background: $form-select-bg $form-select-indicator no-repeat right $form-select-padding-x center;
+    background-image: none \9;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    box-shadow: none;
+    appearance: none;
+    @include border-radius($form-select-border-radius, 0);
+
+    abbr {
+      top: 10px;
+    }
+
+    &:focus {
+      @include box-shadow($form-select-focus-box-shadow);
+      border-color: $form-select-focus-border-color;
+      outline: none;
+    }
+
+    &:disabled {
+      color: $form-select-disabled-color;
+      cursor: not-allowed;
+      background-color: $form-select-disabled-bg;
+    }
+
+    div b {
+      background: none !important;
+    }
+  }
+
+  .chosen-drop {
+    background: $white;
+    border: $form-select-border-width solid $form-select-border-color;
+  }
+
+  .chosen-results li {
+    line-height: calc(#{$font-size-base} + .3rem);
+  }
+
+  &.chosen-container-active .chosen-single {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.chosen-container.chosen-container-multi {
+  .chosen-choices {
+    max-width: $input-max-width;
+    min-height: #{$input-height};
+    font-size: $font-size-base;
+    line-height: $input-line-height;
+    background-image: $white;
+
+    li.search-choice {
+      $chosen-multi-close-width: 20px;
+
+      padding: 5px (13 + $chosen-multi-close-width) 5px 10px;
+      color: $white;
+      background: var(--primary);
+      border: 0;
+      box-shadow: $cassiopeia-box-shadow;
+
+      @if $enable-rounded {
+        border-radius: $form-select-border-radius;
+      } @else {
+        border-radius: 0;
+      }
+
+      .search-choice-close {
+        top: 0;
+        right: 0;
+        width: $chosen-multi-close-width;
+        height: 100%;
+        background: hsla(0, 0%, 0%, .2);
+        background-image: none !important;
+
+        &::before {
+          position: absolute;
+          top: 6px;
+          right: $chosen-multi-close-width * .25;
+          font-size: $font-size-base;
+          color: $white;
+          content: "\00d7";
+        }
+      }
+    }
+  }
+}
+
+.chosen-container-active.chosen-with-drop .chosen-single {
+  box-shadow: none;
+}
+
+// TEMPORARY
+.chosen-container-single {
+  width: auto !important;
+}
+
+// END TEMPORARY
+
+.card .chosen-container.chosen-container-single {
+  width: 100% !important;
+
+  .chosen-single {
+    width: 100% !important;
+  }
+}

media/templates/site/cassiopeia/scss/vendor/_dragula.scss

@@ -0,0 +1,19 @@
+// Dragula
+
+.gu-mirror {
+  position: fixed !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  background-color: hsl(120, 73%, 75%);
+  opacity: .8;
+
+  &.table {
+    display: table;
+
+    td {
+      display: table-cell;
+    }
+
+  }
+
+}

media/templates/site/cassiopeia/scss/vendor/_minicolors.scss

@@ -0,0 +1,17 @@
+// Minicolours
+
+.minicolors-theme-bootstrap {
+
+  .minicolors-input {
+    width: 120px;
+  }
+
+  .rgb {
+    width: 175px;
+  }
+
+  .rgba {
+    width: 220px;
+  }
+
+}

media/templates/site/cassiopeia/scss/vendor/_tinymce.scss

@@ -0,0 +1,23 @@
+// TinyMCE
+
+.editor {
+
+  .toggle-editor {
+    margin-top: 1rem;
+  }
+
+  .mce-tinymce {
+    border: 1px solid $card-border-color;
+    @include border-radius($card-border-radius);
+  }
+
+  .mce-btn,
+  .mce-panel {
+    background: $card-bg-color-light;
+  }
+
+}
+
+.tox {
+  white-space: nowrap !important;
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_buttons.scss

@@ -0,0 +1,57 @@
+// Buttons
+
+.btn:focus,
+.btn.focus,
+.btn:active:focus,
+.btn.focus:active,
+.btn.active:focus,
+.btn.active.focus {
+  text-decoration: none;
+}
+
+.btn.group-move {
+  cursor: move;
+}
+
+.btn-secondary {
+  color: $gray-800;
+  background-color: $white;
+  border-color: $gray-400;
+
+  &:hover,
+  &:focus {
+    color: $gray-800;
+    background-color: $gray-100;
+  }
+}
+
+.article-info .association,
+.cat-list-association {
+  .btn-secondary {
+    font-weight: 700;
+    color: $white;
+    background-color: $gray-600;
+    border-color: $gray-400;
+
+    &:hover,
+    &:focus {
+      color: $white;
+      background-color: $gray-800;
+    }
+  }
+
+  .btn-sm {
+    padding: 0 .25rem;
+    font-size: .8rem;
+    border-radius: .2rem;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .btn {
+    margin-bottom: .25rem;
+  }
+  .input-group .btn {
+    margin-bottom: 0;
+  }
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_collapse.scss

@@ -0,0 +1,16 @@
+// Collapse
+
+.accordion {
+
+  .card-header {
+    display: block;
+    font-size: $h5-font-size;
+    font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
+    line-height: $headings-line-height;
+  }
+
+  .list-group-item {
+    color: $link-color;
+  }
+
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_custom-forms.scss

@@ -0,0 +1,72 @@
+// Custom Forms
+
+.custom-select {
+  @extend .form-select;
+}
+
+.form-select {
+  max-width: $input-max-width;
+  cursor: pointer;
+  background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};
+  background-color: $form-select-bg;
+  border: $input-border-width solid $input-border-color;
+  @include box-shadow($form-select-box-shadow);
+
+  &:focus {
+    border-color: #000;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+  }
+
+  &[multiple] {
+    padding: 0;
+    background-color: $white;
+
+    option {
+      padding: $form-select-multiple-padding-y $form-select-padding-x;
+      background-color: $white;
+
+      &:checked {
+        color: $white;
+        background-color: var(--cassiopeia-color-primary) !important;
+      }
+    }
+  }
+
+  &.form-select-success,
+  &.custom-select-success {
+    color: $success;
+    background-color: $success;
+
+    option {
+      color: $form-select-color;
+      background-color: $white;
+    }
+  }
+
+  &.form-select-danger,
+  &.custom-select-danger {
+    color: $danger;
+    background-color: $danger;
+
+    option {
+      color: $form-select-color;
+      background-color: $white;
+    }
+  }
+
+  optgroup,
+  option {
+    color: var(--dark);
+    background-color: $white;
+  }
+}
+
+// Backwards compat with BS4
+.form-group {
+  @extend .mb-3;
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_dropdown.scss

@@ -0,0 +1,17 @@
+// Dropdown
+
+.dropdown-menu {
+  padding: .2rem 0;
+  margin-top: .5rem;
+  background-color: $white;
+  border-color: $cassiopeia-border-color;
+}
+
+.dropdown-menu-end {
+
+  &::after {
+    right: .9rem;
+    left: auto;
+  }
+
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_forms.scss

@@ -0,0 +1,14 @@
+.field-media-wrapper {
+  display: block;
+  width: 100%;
+  max-width: calc(50vw - 5rem);
+
+  .field-media-preview {
+    width: 100%;
+    max-width: none;
+  }
+
+  @include media-breakpoint-down(lg) {
+    min-width: 100%;
+  }
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_lists.scss

@@ -0,0 +1,9 @@
+// Lists
+
+.list-group-item {
+  background-color: $list-group-bg;
+}
+
+.list-unstyled .list-unstyled {
+  padding-left: 20px;
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_modal.scss

@@ -0,0 +1,99 @@
+// Modal
+
+.jviewport-height {
+  &10 {
+    height: 10vh;
+  }
+
+  &20 {
+    height: 20vh;
+  }
+
+  &30 {
+    height: 30vh;
+  }
+
+  &40 {
+    height: 40vh;
+  }
+
+  &50 {
+    height: 50vh;
+  }
+
+  &60 {
+    height: 60vh;
+  }
+
+  &70 {
+    height: 70vh;
+  }
+
+  &80 {
+    height: 80vh;
+  }
+
+  &90 {
+    height: 90vh;
+  }
+
+  &100 {
+    height: 100vh;
+  }
+}
+
+[class*=jviewport-height] iframe {
+  height: 100%;
+}
+
+.modal-dialog.jviewport-width {
+  &10 {
+    width: 10vw;
+    max-width: none;
+  }
+
+  &20 {
+    width: 20vw;
+    max-width: none;
+  }
+
+  &30 {
+    width: 30vw;
+    max-width: none;
+  }
+
+  &40 {
+    width: 40vw;
+    max-width: none;
+  }
+
+  &50 {
+    width: 50vw;
+    max-width: none;
+  }
+
+  &60 {
+    width: 60vw;
+    max-width: none;
+  }
+
+  &70 {
+    width: 70vw;
+    max-width: none;
+  }
+
+  &80 {
+    width: 80vw;
+    max-width: none;
+  }
+
+  &90 {
+    width: 90vw;
+    max-width: none;
+  }
+
+  &100 {
+    width: 100vw;
+    max-width: none;
+  }
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_nav.scss

@@ -0,0 +1,78 @@
+// Tabs
+
+.nav.nav-tabs {
+  padding: 0;
+  margin: 0;
+  background-color: $cassiopeia-tabs-header-bg;
+  border: 1px solid $cassiopeia-border-color;
+  border-bottom: 0;
+  border-radius: $border-radius $border-radius 0 0;
+  box-shadow: 0 1px $white inset, 0 2px 3px -3px hsla(0, 0%, 0%, .15), 0 -4px 0 hsla(0, 0%, 0%, .05) inset, $cassiopeia-box-shadow;
+
+  .nav-item {
+    margin-bottom: 0;
+    margin-left: 0;
+
+    &:first-of-type .nav-link {
+
+      &.active {
+        border-radius: $border-radius 0 0;
+        box-shadow: -1px 0 1px -1px hsla(0, 0%, 0%, .06), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+      }
+
+    }
+
+    &:last-of-type .nav-link {
+      box-shadow: -1px 0 0 hsla(0, 0%, 0%, .05), 1px 0 0 hsla(0, 0%, 0%, .05);
+
+      &.active {
+        box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, .08), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+      }
+
+    }
+
+  }
+
+  .nav-link {
+    position: relative;
+    padding: .75em 1em;
+    color: var(--cassiopeia-color-primary);
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: -1px 0 0 hsla(0, 0%, 0%, .05);
+
+    &.active {
+      background-color: $cassiopeia-tabs-active-bg;
+      background-image: linear-gradient(to bottom, hsla(0, 0%, 0%,0), hsla(0, 0%, 0%, .05) 100%);
+      border-right: 0;
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      box-shadow: inset 2px 0 1px -1px hsla(0, 0%, 0%, .08), inset -2px 0 1px -1px hsla(0, 0%, 0%, .08), inset 0 1px 0 hsla(0, 0%, 0%, .02);
+
+      &::after {
+        position: absolute;
+        right: 0;
+        bottom: -1px;
+        left: 0;
+        height: 5px;
+        content: "";
+        background-color: $cassiopeia-tabs-active-highlight;
+        opacity: .8;
+      }
+
+    }
+
+  }
+
+}
+
+.nav-tabs + .tab-content {
+  padding: 15px;
+  background: $white;
+  border: 1px solid;
+  border-color: $cassiopeia-border-color;
+  border-radius: 0 0 $border-radius $border-radius;
+  box-shadow: $cassiopeia-box-shadow;
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_pagination.scss

@@ -0,0 +1,5 @@
+// Pagination
+
+.pagination {
+  margin: 1rem;
+}

media/templates/site/cassiopeia/scss/vendor/bootstrap/_table.scss

@@ -0,0 +1,24 @@
+// Table
+
+.table {
+
+  th {
+    font-weight: 500;
+  }
+
+  thead th {
+    white-space: nowrap;
+    border-bottom-width: 1px;
+  }
+
+  th,
+  td {
+    vertical-align: middle;
+
+    label {
+      margin-bottom: 0;
+    }
+
+  }
+
+}

media/templates/site/cassiopeia/scss/vendor/choicesjs/choices.scss

@@ -0,0 +1,167 @@
+@import "../../../../../../vendor/bootstrap/scss/functions";
+@import "../../../../../../templates/site/cassiopeia/scss/tools/variables/variables";
+@import "../../../../../../vendor/bootstrap/scss/variables";
+@import "../../../../../../vendor/bootstrap/scss/mixins";
+
+// choices.js
+@import "../../../../../../vendor/choicesjs/scss/choices";
+
+// Cassiopea Variables, Functions and Mixins
+@import "../../tools/tools";
+
+.choices {
+  border: $form-select-border-width solid $form-select-border-color;
+  @include border-radius($form-select-border-radius, 0);
+  @include box-shadow($form-select-box-shadow);
+
+  &.is-focused {
+    border-color: $form-select-focus-border-color;
+
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+  }
+}
+
+.choices__inner {
+  padding: .4rem 1rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0;
+}
+
+.choices__input {
+  padding: 0;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: transparent;
+
+  &::placeholder {
+    color: $gray-700;
+    opacity: 1;
+  }
+}
+
+.choices__list--dropdown {
+  z-index: $zindex-popover;
+}
+
+.choices__list--multiple .choices__item {
+  position: relative;
+  margin: 2px;
+  background-color: var(--cassiopeia-color-primary);
+  margin-inline-end: 2px;
+  border: 0;
+  @include border-radius($border-radius, 0);
+
+  &.is-highlighted {
+    background-color: var(--cassiopeia-color-primary);
+    opacity: .9;
+  }
+}
+
+.choices .choices__list--dropdown {
+  .choices__item {
+    padding-inline-end: 10px;
+  }
+
+  .choices__item--selectable::after {
+    display: none;
+  }
+}
+
+.choices__button_joomla {
+  position: relative;
+  padding: 0 10px;
+  color: inherit;
+  text-indent: -9999px;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  opacity: .5;
+  appearance: none;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    text-align: center;
+    text-indent: 0;
+    content: "\00d7";
+  }
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.choices[data-type*="select-one"],
+.choices[data-type*="select-multiple"] {
+  .choices__inner {
+    padding-inline-end: 3rem;
+    cursor: pointer;
+    background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
+    background-color: $form-select-bg;
+
+    [dir="rtl"] & {
+      background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
+      background-color: $form-select-bg;
+    }
+  }
+}
+
+.choices[data-type*="select-one"] {
+  .choices__item {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .choices__button_joomla {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 0;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    margin-block-start: -10px;
+    margin-inline-end: 50px;
+    border-radius: 10em;
+    opacity: .5;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px #00bcd4;
+    }
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.choices[data-type*="select-multiple"],
+.choices[data-type*="text"] {
+  .choices__input {
+    padding: .2rem 0;
+  }
+}
+
+.choices__heading {
+  font-size: 1.2rem;
+}

media/templates/site/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss

@@ -0,0 +1,158 @@
+@import "../../tools/tools";
+@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
+
+// The following is a restyle for the system alerts
+#system-message-container {
+  &:empty {
+    display: none;
+    margin-top: 0;
+  }
+}
+
+#system-message-container joomla-alert {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 16rem;
+  padding: 0;
+  margin-bottom: 0;
+  color: var(--gray-dark);
+  background-color: $white;
+  border: 1px solid var(--alert-accent-color, transparent);
+  border-radius: .25rem;
+  transition: opacity .15s linear;
+
+  + * {
+    margin-top: 1rem;
+  }
+
+  .alert-heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    padding: .8rem;
+    color: var(--alert-heading-text);
+    background: var(--alert-accent-color, transparent);
+
+    .message::before,
+    .success::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
+      background-size: 100%;
+    }
+
+    .notice::before,
+    .info::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
+      background-size: 100%;
+    }
+
+    .warning::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
+      background-size: 100%;
+    }
+
+    .error::before,
+    .danger::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      content: "";
+      background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
+      background-size: 100%;
+    }
+  }
+
+  .alert-wrapper {
+    width: 100%;
+  }
+
+  .alert-link {
+    color: var(--success, inherit);
+  }
+
+  &[type="success"],
+  &[type="message"] {
+    --alert-accent-color: var(--success);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--success);
+    background-color: $white;
+  }
+
+  &[type="info"],
+  &[type="notice"] {
+    --alert-accent-color: var(--info);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--info);
+    background-color: $white;
+  }
+
+  &[type="warning"] {
+    --alert-accent-color: var(--warning);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--warning);
+    background-color: $white;
+  }
+
+  &[type="error"],
+  &[type="danger"] {
+    --alert-accent-color: var(--danger);
+    --alert-heading-text: hsla(0, 0%, 100%, .95);
+    --alert-close-button: var(--danger);
+    background-color: $white;
+  }
+
+  .joomla-alert--close,
+  .joomla-alert-button--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .2rem .8rem;
+    font-size: 2rem;
+    color: var(--alert-close-button);
+    background: none;
+    border: 0;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: .75;
+    }
+
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      padding: .2rem .6rem;
+    }
+  }
+
+  div {
+    font-size: 1rem;
+    .alert-message {
+      padding: .3rem 2rem .3rem .3rem;
+      margin: .5rem;
+
+      [dir=rtl] & {
+        padding: .3rem .3rem .3rem 2rem;
+      }
+    }
+
+    .alert-message:not(:first-of-type) {
+      border-top: 1px solid var(--alert-accent-color);
+    }
+  }
+}

media/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss

@@ -0,0 +1,218 @@
+@if $metismenu==true {
+  .metismenu {
+    &.menu-horizontal {
+      flex: 1 0 100%;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      @include media-breakpoint-up(lg) {
+        display: flex;
+        flex: 1 1 0%;
+        flex-direction: row;
+      }
+
+      > li {
+        position: relative;
+      }
+
+      .level-1 {
+        > ul {
+          min-width: 12rem;
+        }
+      }
+    }
+
+    &.mod-menu {
+      margin: 0;
+
+      .metismenu-item {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
+        font-size: 1.1rem;
+        line-height: 1.5;
+
+        &.parent {
+          position: relative;
+        }
+
+        > ul {
+          position: absolute;
+          top: 100%;
+          z-index: 1001;
+          display: block;
+          padding: 0;
+          list-style: none;
+          box-shadow: 0 0 .5em hsla(0, 0%, 0%, .1);
+        }
+
+        > span,
+        > a,
+        > button {
+          overflow: hidden;
+          text-decoration: none;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        > a:focus,
+        > button:focus {
+          outline: 1px dotted $gray-400;
+          outline-offset: 2px;
+        }
+
+        &.active > a,
+        &.active > button,
+        > a:hover,
+        > button:hover {
+          text-decoration: underline;
+        }
+
+        &::after {
+          content: none;
+        }
+
+        &:not(.level-1) > ul,
+        &:not(.level-2) > ul {
+          margin-inline-end: -1em;
+        }
+
+        &.divider:not(.parent) {
+          width: 1px;
+          padding: 0;
+          margin: .25em;
+          overflow: hidden;
+          border-right: 1px solid $gray-400;
+
+          @include media-breakpoint-down(lg) {
+            width: auto;
+            height: 1px;
+            border-bottom: 1px solid $gray-400;
+          }
+
+        }
+      }
+
+      .mm-collapsing {
+        height: 0;
+        overflow: hidden;
+        transition-timing-function: ease;
+        transition-duration: .35s;
+        transition-property: color, background-color, height, visibility;
+      }
+
+      .mm-collapse {
+        position: absolute;
+        background-color: hsl(0, 0%, 100%);
+        box-shadow: $cassiopeia-box-shadow;
+
+        &:not(.mm-show) {
+          display: none;
+        }
+
+        > li {
+          > a {
+            display: inline-flex;
+          }
+
+          &.divider:not(.parent) {
+            width: auto;
+            height: 1px;
+            border-bottom: 1px solid $gray-400;
+          }
+        }
+
+        > li.parent {
+          .mm-toggler {
+            display: inline-flex;
+          }
+
+          > ul {
+            position: relative;
+            top: 0;
+            flex-basis: calc(100% + #{$cassiopeia-grid-gutter});
+            margin-top: $cassiopeia-grid-gutter * .5;
+            margin-bottom: $cassiopeia-grid-gutter * -.5;
+            background-color: hsla(0, 0%, 0%, .03);
+            box-shadow: none;
+          }
+        }
+      }
+
+      .mm-toggler {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0;
+        color: currentColor;
+        user-select: none;
+        background: none;
+        border: none;
+        box-shadow: none;
+
+        &:after {
+          width: 0;
+          height: 0;
+          margin-inline-start: .5em;
+          content: "";
+          border-top: .5em solid currentColor;
+          border-right: .5em solid transparent;
+          border-left: .5em solid transparent;
+          transition: all .3s ease-out;
+
+          @at-root .mm-active > & {
+            transform: rotateX(-180deg);
+          }
+        }
+
+        &[aria-expanded="true"]:after {
+          transform: rotateX(-180deg);
+        }
+      }
+
+      .parent {
+        > ul {
+          color: $gray-900;
+        }
+      }
+    }
+  }
+
+  .sidebar-right,
+  .sidebar-left {
+    .metismenu {
+      .mm-collapse {
+        position: relative;
+        background-color: hsla(0, 0%, 0%, .03);
+      }
+
+      li.parent {
+        > ul {
+          position: relative;
+          top: 0;
+          box-shadow: none;
+
+          @include media-breakpoint-down(xl) {
+            width: 100%;
+          }
+        }
+      }
+
+      .metismenu-item {
+        > span,
+        > a {
+          white-space: inherit;
+        }
+
+        &.divider:not(.parent) {
+          width: auto;
+          height: 1px;
+          border-bottom: 1px solid $gray-400;
+        }
+      }
+    }
+  }
+}