first commit

services/web/frontend/stylesheets/bootstrap-5/base/base.scss

@@ -0,0 +1,47 @@
+.grecaptcha-badge {
+  visibility: hidden;
+  height: 0 !important; // Prevent layout shift
+}
+
+@keyframes bounce {
+  0%,
+  10%,
+  26%,
+  40% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  20%,
+  21% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  35% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  45% {
+    transform: translate3d(0, -2px, 0);
+  }
+
+  50% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounce {
+  animation-duration: 2s;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  animation-name: bounce;
+  transform-origin: center bottom;
+}
+
+.recaptcha-branding {
+  padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
+  text-align: center;
+  font-size: var(--font-size-01);
+}

services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss

@@ -0,0 +1,54 @@
+// Only include the parts of Bootstrap we need to minimize bundle size
+
+// Include functions first (enabling manipulation of colors, SVGs, calc, etc. in the variable overrides)
+@import 'bootstrap-5/scss/functions';
+
+// Overrides for Bootstrap 5 Sass variables. These have to be included before
+// Bootstrap itself because Bootstrap uses them to create the CSS variables it
+// uses, and in calculations to determine, for example, what color text to use
+// on a button based on contrast.
+@import '../foundations/all';
+@import '../abstracts/all';
+
+// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import 'bootstrap-5/scss/variables';
+@import 'bootstrap-5/scss/variables-dark';
+
+// Include remainder of required parts
+@import 'bootstrap-5/scss/maps';
+@import 'bootstrap-5/scss/mixins';
+@import 'bootstrap-5/scss/utilities';
+
+// Layout & components
+@import 'bootstrap-5/scss/root';
+@import 'bootstrap-5/scss/reboot';
+@import 'bootstrap-5/scss/transitions';
+@import 'bootstrap-5/scss/type';
+@import 'bootstrap-5/scss/images';
+@import 'bootstrap-5/scss/containers';
+@import 'bootstrap-5/scss/grid';
+@import 'bootstrap-5/scss/tables';
+@import 'bootstrap-5/scss/forms';
+@import 'bootstrap-5/scss/buttons';
+@import 'bootstrap-5/scss/dropdown';
+@import 'bootstrap-5/scss/button-group';
+@import 'bootstrap-5/scss/badge';
+@import 'bootstrap-5/scss/list-group';
+@import 'bootstrap-5/scss/modal';
+@import 'bootstrap-5/scss/tooltip';
+@import 'bootstrap-5/scss/popover';
+@import 'bootstrap-5/scss/spinners';
+@import 'bootstrap-5/scss/card';
+@import 'bootstrap-5/scss/close';
+@import 'bootstrap-5/scss/nav';
+@import 'bootstrap-5/scss/navbar';
+@import 'bootstrap-5/scss/offcanvas';
+
+// Helpers
+@import 'bootstrap-5/scss/helpers';
+
+// Utilities
+@import 'bootstrap-5/scss/utilities/api';
+
+// Mixins
+@import 'bootstrap-5/scss/mixins/breakpoints';

services/web/frontend/stylesheets/bootstrap-5/base/colors.scss

@@ -0,0 +1,20 @@
+/* Website redesign */
+$vivid-tangerine: #f1a695;
+$ceil: #9597c9;
+$caramel: #f9d38f;
+$dark-jungle-green: #0f271a;
+$sapphire-blue: #4354a3;
+$sapphire-blue-dark: #3c4c93;
+$purple-bright: #939aff;
+$green-bright: #13c965;
+
+:root {
+  --vivid-tangerine: #{$vivid-tangerine};
+  --ceil: #{$ceil};
+  --caramel: #{$caramel};
+  --dark-jungle-green: #{$dark-jungle-green};
+  --sapphire-blue: #{$sapphire-blue};
+  --sapphire-blue-dark: #{$sapphire-blue-dark};
+  --green-bright: #{$green-bright};
+  --purple-bright: #{$purple-bright};
+}

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

@@ -0,0 +1,80 @@
+html {
+  height: 100%;
+}
+
+// Prevent potential for layout shifts on a page with fixed 100% height. This
+// can happen, for example, with the Grammarly extension in Firefox.
+html.fixed-size-document {
+  position: fixed;
+  width: 100%;
+}
+
+body {
+  position: relative;
+  min-height: 100%;
+}
+
+.content {
+  min-height: 100vh;
+  padding-top: $header-height + $spacing-08;
+  padding-bottom: $spacing-08;
+
+  .thin-footer & {
+    min-height: calc(100vh - #{$thin-footer-height});
+  }
+
+  .container-top-padded {
+    padding-top: var(--spacing-16);
+  }
+}
+
+.content-alt {
+  background-color: $bg-light-secondary;
+}
+
+// Page header/separator
+.page-separator,
+.page-header {
+  padding-bottom: $spacing-05;
+  border-bottom: 1px solid $border-divider;
+  margin: 0;
+
+  // Apply margin above or below this header/separator only when it has a sibling
+  * > * + &,
+  * > & + * {
+    margin-top: $spacing-08;
+  }
+}
+
+// Horizontal rule. Override Bootstrap's 25% opacity, which we don't want
+hr {
+  opacity: unset;
+}
+
+.horizontal-divider {
+  border-top: 1px solid var(--border-divider);
+}
+
+.hidden {
+  @extend .d-none;
+}
+
+.hidden-print {
+  @extend .d-print-none;
+}
+
+.row-spaced {
+  margin-top: var(--line-height-03);
+}
+
+.row-spaced-small {
+  margin-top: calc(var(--line-height-03) / 2);
+}
+
+.row-spaced-large {
+  margin-top: calc(var(--line-height-03) * 2);
+}
+
+.row-spaced-extra-large {
+  margin-top: calc(var(--line-height-03) * 4);
+}

services/web/frontend/stylesheets/bootstrap-5/base/links.scss

@@ -0,0 +1,61 @@
+// Links
+
+// Use CSS variables for link colors to make it easy to override in marketing page
+:root {
+  --link-color: var(--link-ui);
+  --link-hover-color: var(--link-ui-hover);
+  --link-visited-color: var(--link-ui-visited);
+  --link-color-dark: var(--link-ui-dark);
+  --link-hover-color-dark: var(--link-ui-hover-dark);
+  --link-visited-color-dark: var(--link-ui-visited-dark);
+  --link-text-decoration: underline;
+  --link-hover-text-decoration: none;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: var(--link-text-decoration);
+
+  &:visited {
+    color: var(--link-visited-color);
+  }
+
+  &:hover {
+    color: var(--link-hover-color);
+    text-decoration: var(--link-hover-text-decoration);
+  }
+}
+
+.link-monospace {
+  @include font-mono;
+
+  font-weight: 500;
+  color: var(--green-50);
+
+  &:hover {
+    color: var(--green-60);
+  }
+}
+
+.link-black-text {
+  color: var(--neutral-90);
+  text-decoration: none;
+  font-weight: 600;
+
+  &:visited {
+    color: var(--neutral-90);
+  }
+
+  &:hover {
+    color: var(--neutral-90);
+    text-decoration: underline;
+  }
+}
+
+.link-black-full-width {
+  @extend .link-black-text;
+
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}

services/web/frontend/stylesheets/bootstrap-5/base/typography.scss

@@ -0,0 +1,98 @@
+// Typography
+
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility; /* stylelint-disable-line value-keyword-case */
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  // Apply margin above the heading only when it has a preceding sibling or is inside a row with a preceding sibling
+  * > * + &,
+  * + .row & {
+    margin-top: $spacing-08;
+  }
+}
+
+h1,
+.h1 {
+  @include heading-xl;
+}
+
+h2,
+.h2 {
+  @include heading-md;
+}
+
+h3,
+.h3 {
+  @include heading-sm;
+}
+
+h4,
+.h4 {
+  @include heading-xs;
+}
+
+h5,
+.h5 {
+  @include body-base;
+}
+
+h6,
+.h6 {
+  @include body-sm;
+}
+
+// Miscellaneous
+.small {
+  @include body-sm;
+}
+
+// Peformatted text, sample output, code, keyboard input elements
+// E.g.: Git authentication token
+pre {
+  @include body-base;
+}
+
+code,
+kbd,
+samp {
+  font-size: 1em;
+}
+
+.list-style-check-green {
+  list-style-image: url('../../../../public/img/fa-check-green.svg');
+}
+
+.text-muted {
+  color: var(--content-disabled) !important;
+}
+
+.dm-mono {
+  @include font-mono;
+}
+
+@include media-breakpoint-up(lg) {
+  .text-center-only-desktop {
+    text-align: center;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .text-center-only-mobile {
+    text-align: center;
+  }
+}