primo commit

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

@@ -0,0 +1,35 @@
+// 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);
+  }
+}
+
+/* Only apply margin when #system-message-container contains a visible joomla-alert */
+#system-message-container:has(joomla-alert) {
+  margin-top: 1em;
+}
+
+/* Remove margin when no <joomla-alert> exists */
+#system-message-container:not(:has(joomla-alert)) {
+  margin-top: 0;
+}

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

@@ -0,0 +1,29 @@
+/**
+* Back to Top
+*/
+
+.back-to-top-link {
+  position: fixed;
+  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,45 @@
+// 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:not(.btn), .btn-link {
+    color: currentColor;
+
+    &:hover,
+    &:focus {
+      color: var(--gray-200);
+    }
+  }
+
+  .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,223 @@
+// 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;
+    }
+  }
+}
+
+// Subform - non table layout
+div.subform-repeatable-group {
+  position: relative;
+  padding: 32px 32px 16px 28px;
+  margin-top: 20px;
+  margin-left: 32px;
+  border: $input-border-width solid $input-border-color;
+  @include border-radius($border-radius);
+
+  > .control-group {
+    margin-top: 0;
+  }
+
+  > .btn-toolbar {
+
+    .btn-group {
+      position: static;
+      margin: 0;
+    }
+
+    .btn {
+      position: absolute;
+
+      &.group-add {
+        right: -1px;
+        bottom: -1px;
+        border-radius: $border-radius 0 $border-radius 0;
+      }
+      &.group-remove {
+        top: -1px;
+        right: -1px;
+        border-radius: 0 $border-radius 0 $border-radius;
+      }
+      &.group-move {
+        top: 50%;
+        right: 100%;
+        padding: 0;
+        border-radius: $border-radius 0 0 $border-radius;
+        transform: translateY(-50%);
+
+        span {
+          padding: 1.5rem .5rem;
+        }
+      }
+      &.group-move-up {
+        top: 50%;
+        right: 100%;
+        margin-top: -45px;
+        border-radius: 0;
+        transform: translateY(-50%);
+      }
+      &.group-move-down {
+        top: 50%;
+        right: 100%;
+        margin-top: 45px;
+        border-radius: 0;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+
+// Highlight draggable section
+.subform-repeatable-group[draggable="true"] {
+  // For non table layout
+  background-color: $teal;
+
+  // For table layout
+  > td {
+    background-color: $teal;
+  }
+}

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,253 @@
+// 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);
+
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+  }
+
+  &:not([class]) {
+    text-decoration: underline;
+  }
+
+  &.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,238 @@
+@use "sass:color";
+
+// 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;
+    }
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  .container-search {
+    margin-top: $cassiopeia-grid-gutter * .5;
+  }
+
+  .mod-finder {
+    color: $white;
+
+    a:not(.jmodedit) {
+      color: $white;
+
+      &:hover, &:focus {
+        color: color.adjust($white, $lightness: -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,126 @@
+// 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:not(.btn), .btn-link {
+    color: currentColor;
+
+    &:hover,
+    &:focus {
+      color: var(--gray-200);
+    }
+  }
+}
+
+.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,179 @@
+.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;
+    }
+
+    > * {
+      pointer-events: none;
+    }
+  }
+
+  .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;
+}