ba-thesis/assets/css/styles.css

@import "./fonts.css";
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

h1, h2, h3, h4, h5, h6 {
  font-family: Kanit;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  line-height: 1;
}

h1 {
  font-size: 3rem;
  @apply text-primary-200;
}

h1.title {
  @apply font-title font-bold;
  @apply underline text-primary-200/90;
}

h2 {
  font-size: 2.6rem;
}

h3 {
  font-size: 2.2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.4rem;
}

h6 {
  font-size: 1rem;
}

p {
  @apply text-center sm:text-start;
}

input {
  @apply rounded rounded-md drop-shadow-sm px-2 py-1;
  @apply bg-secondary/25;
  @apply w-full;
}

input[type="submit"] {
  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
  @apply bg-secondary hover:bg-secondary-600;
  @apply cursor-pointer;
  @apply font-semibold;
  @apply hover:drop-shadow-xl;
}

select {
  @apply rounded rounded-md drop-shadow-sm px-2 py-1;
  @apply bg-secondary/25;
  @apply w-full;
}

select.error {
  @apply border-2 border-failure/50;
}

input.error {
  @apply border-2 border-failure/50;
}

fieldset {
  @apply border border-secondary p-4;
}
legend {
  @apply text-sm text-secondary px-2;
}
label {
  @apply text-sm text-secondary/75 font-semibold;
}

a:not(.btn, .btn-outline) {
  @apply underline text-secondary-300;
}
div.call-to-action-box a {
  @apply text-secondary-200;
}

ul, ol {
  list-style-position: outside;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
li {
  @apply text-start;
}

code {
  @apply bg-neutral-800/75 rounded-md;
  @apply px-1 py-0.5;
  @apply text-neutral-200 font-mono;
}

.btn {
  text-align: center;
  @apply rounded rounded-lg drop-shadow-md px-2 py-1;
  @apply bg-accent hover:bg-accent-600;
  @apply font-semibold text-primary-100 hover:text-primary-200;
  @apply hover:drop-shadow-xl;
  @apply border-2 border-accent hover:border-accent-700;
  @apply transition-all;
}

.btn-outline {
  text-align: center;
  @apply rounded rounded-lg drop-shadow-md px-2 py-1;
  @apply bg-transparent hover:bg-accent-600;
  @apply font-semibold text-accent hover:text-primary-100;
  @apply hover:drop-shadow-xl;
  @apply border-2 border-accent hover:border-accent-700;
  @apply transition-all;
}

body.global {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  @apply bg-gradient-to-b from-primary-900/75 via-background to-primary-900/75;
}

header.global, main.global, footer.global {
  width: 100%;
}

main.global {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}

div.status-message {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

div.status-message.error {
  @apply italic text-failure-300 bg-failure/50 border border-failure;
}

div.call-to-action-box {
  @apply bg-gradient-to-r from-secondary-300/75 to-secondary-500/75;
  @apply rounded-md py-4 px-6;
  @apply text-center sm:text-start;
}

.loader {
  overflow: hidden;
}
.loader.loader-bar {
  @apply h-1 bg-accent rounded rounded-full;
}
.loader.loader-value {
  @apply font-bold text-end;
}

.loader--loading {
  animation: loading 2s infinite linear;
}
.loader--finished {
  animation: finished 1.5s ease-in both;
}
.loader--value {
  animation: loaded 1s ease-out both;
}

@keyframes loading {
  0% {
    transform: scaleX(0%) translateX(-100%);
    transform-origin: left;
  }

  50% {
    transform: scaleX(50%);
    transform-origin: center;
  }

  100% {
    transform: scaleX(0%) translateX(100%);
    transform-origin: right;
  }
}

@keyframes finished {
  0% {
    transform: scaleX(0%);
    transform-origin: center;
  }

  50% {
    transform: scaleX(100%);
    transform-origin: center;
    opacity: 1;
  }

  100% {
    transform: scaleX(100%) translateX(1000%);
    transform-origin: right;
    opacity: 0;
  }
}

@keyframes loaded {
  0% {
    transform: translateX(1000%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

#logo-wings {
  animation: logowings 2s ease-in-out infinite alternate;
}
#logo-wings--subtle {
  animation: logowings-subtle 2s ease-in-out infinite alternate;
}
#logo-heart {
  animation: logoheart 1s linear infinite;
  transform-origin: center;
}
#logo-heart--subtle {
  animation: logoheart-subtle 1s linear infinite;
  transform-origin: center;
}
#logo-blips {
  animation: logoblips 6s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}
#logo-blips--subtle {
  animation: logoblips-subtle 6s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

@keyframes logowings {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(5%);
  }
}
@keyframes logowings-subtle {
  0% {
    transform: translateY(5%);
  }

  100% {
    transform: translateY(8%);
  }
}

@keyframes logoheart {
  0%, 25%, 50%, 100% {
    transform: scale(100%);
  }

  12%, 37% {
    transform: scale(105%);
  }
}
@keyframes logoheart-subtle {
  0%, 25%, 50%, 100% {
    transform: scale(100%);
  }

  12%, 37% {
    transform: scale(102%);
  }
}

@keyframes logoblips {
  0% {
    transform: rotateY(0deg)
  }

  5%, 100% {
    transform: rotateY(360deg);
  }
}
@keyframes logoblips-subtle {
  0% {
    transform: rotateY(0deg)
  }

  5%, 100% {
    transform: rotateY(360deg);
  }
}

path.hamburger-path {
  @apply fill-secondary stroke-secondary;
}

#hamburger-content.hamburger--closed {
  @apply hidden sm:flex;
}
#hamburger-content.hamburger--open {
  @apply flex;
}
#hamburger-svg.hamburger--open {
  transform-origin: center;
  transform: rotate(90deg);
}
#hamburger-svg.hamburger--closed {
  transform-origin: center;
  transform: rotate(0deg);
}

.help-div--changing p.fadeout {
  animation: 1s fadeout ease-in-out both;
}
.help-div--changing p.fadein, a.fadein {
  animation: 1s fadein ease-in-out 1s both;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  } 

  100% {
    opacity: 0;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  } 

  100% {
    opacity: 1;
  }
}