input.css

@import "tailwindcss";

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-200.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-300.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-500.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-600.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/oswald/oswald-v53-latin_latin-ext-700.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/lora/lora-v35-latin_latin-ext-regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/lora/lora-v35-latin_latin-ext-500.woff2")
  format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/lora/lora-v35-latin_latin-ext-600.woff2")
  format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/lora/lora-v35-latin_latin-ext-700.woff2")
  format("woff2");
}

@theme {
  --color-main: oklch(0.68 0.17 45.63);
  --color-secondary: #999;
  --font-oswald: "Oswald", sans-serif;
  --font-lora: "Lora", serif;
}
/* create class aliases like bg-main for example */

@source './*.php';
/* This allow to scan php file, 
if you wanna use tailwind classes in php files */

/* @plugin "@tailwindcss/typography"; */
/* Adds plugins?
'Use the @plugin directive to load 
a legacy JavaScript-based plugin'
*/

@utility c-main {
  @apply bg-main;
  @variant md {
    @apply bg-amber-300;
  }
  @variant lg {
    @apply bg-amber-950;
  }
  @variant xl {
    @apply bg-blue-900;
  }
}
/* Example how to create a class / alias class 

Also contains @apply which is just 
tailwind classes instead of real css

Also contains medias queries, it's mobile first.

sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

Can be used in classed directly too 
instead of with this class / alias :

Width of 16 by default, 
32 on medium screens, 
and 48 on large screens :

<img class="w-16 md:w-32 lg:w-48" src="..." />
*/

/* my-0 mx-auto  */

@utility stack-* {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * --value(integer));
}
/* Another example how to create a class / alias class 
   NGL this is pretty crazy, that's really really good !
*/

@utility articles {
  @apply flex 
  flex-col 
  w-[calc(50%-2.5rem)];
}

@utility article-footer {
  @apply text-secondary 
  pt-[12px] 
  border-t-[3px] 
  border-double 
  border-t-[#ddd];
}

@utility inputs {
  @apply w-full 
  px-4 
  py-2.5 
  text-[#999] 
  bg-[#f5f5f5] 
  border 
  border-[#ddd] 
  rounded-[3px] 
  shadow-sm 
  placeholder-gray-400
  focus:outline-none 
  focus:ring-2
  focus:ring-gray-400 
  focus:border-transparent;
}
@utility sub-icons {
  @apply inline-block
  bg-[url("./imgs/modern_icon_sprite_2024_2.svg")]
  bg-no-repeat
  bg-size-[50px]
  h-[38px]
  w-[50px]
  mt-[4px];
}

@utility sub-texts {
  @apply flex
  p-[12px];
}

@utility arrows {
  @apply flex
  relative
  border-t-[1px]
  border-r-[1px]
  border-b-[1px]
  border-l-[3px]
  border-solid
  after:content-[url('./imgs/arrow.svg')]
  after:absolute
  after:top-[14px]
  after:right-[12px]
  after:w-[20px]
  after:h-[20px]
  hover:bg-[#b6b6b62f]
  hover:underline
}

@utility podcast-container {
  @apply flex 
  flex-col 
  gap-[20px];
}

@utility h4 {
  @apply font-oswald
  text-[14px]
  leading-[16.8px]
  tracking-[1px]
  uppercase
  pb-[6px]
  mb-[16px]
}

@utility h2-alt {
  @apply font-lora
  font-bold
  text-[16px] 
  leading-[1.2] 
  my-[15px]
}

@utility h2 {
  @apply font-oswald
  mb-[16px]
  text-[24px]
  leading-[28.8px]
  hover:text-main
  tracking-[1px]
}

@utility asterisk {
  @apply text-red-600
}

@utility btn-submit {
  @apply w-auto 
  flex 
  justify-center 
  py-2 
  px-6 
  my-2
  border 
  border-transparent 
  rounded-md 
  shadow-sm 
  text-sm 
  font-medium 
  uppercase
  font-oswald
  text-white 
  bg-[#aaa] 
  hover:bg-[#777] 
  focus:outline-none 
  focus:ring-2 
  focus:ring-offset-2 
  focus:ring-gray-500
}

@utility paypal-blue {
  @apply w-full 
  bg-[#0070ba] 
  hover:bg-[#005ea6] 
  text-white 
  py-3 
  px-4 
  rounded-[3px] 
  flex 
  items-center 
  justify-center 
  text-lg 
  shadow-sm 
  hover:shadow-md 
  transition-shadow
}

@utility paypal-gray {
  @apply w-full 
  bg-[#303134] 
  hover:bg-[#202124] 
  text-white 
  py-3 
  px-4 
  rounded-[3px] 
  flex 
  items-center 
  justify-center 
  text-lg 
  shadow-sm 
  hover:shadow-md 
  transition-shadow
}

@utility footer-li {
  @apply border-b
  border-solid
  border-b-[#333]
  hover:underline
  pb-[8px]
  mb-[8px]
}



/* PAYPAL CSS */

.paypal-powered-by {
  text-align: center;
  margin: 10px auto;
  height: 14px;
  font-family: PayPal Plain, system-ui, 
  -apple-system, Roboto, "Segoe UI",
    Helvetica-Neue, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
  color: #7b8388;
  position: relative;
  margin-right: 3px;
  bottom: 3px;
}

.paypal-powered-by > .paypal-button-text,
.paypal-powered-by > .paypal-logo {
  display: inline-block;
  vertical-align: middle;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
}