speedclimbing/website

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Roboto';
    font-weight: 'medium';
    src: url('/fonts/Roboto-Medium.ttf');
}

@font-face {
    font-family: 'Roboto';
    font-weight: 'regular';
    src: url('/fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-VariableFont_wght.ttf');
}

:root {
    --fc-page-bg-color: transparent;
}

h1,
h2,
h3,
h4 {
    font-family: 'Roboto', 'sans-serif';
    color: '#111827';
    @apply dark:text-white font-Roboto;
}

p {
    font-family: 'Raleway', 'sans-serif';
    color: '#111827';
    @apply dark:text-white font-Raleway;
}

body {
    @apply dark:bg-dark-grey;
    padding-top: 4.75rem;
}

section {
    @apply px-[10%] lg:px-[15%];
}

nav > div {
    max-width: unset !important;
}

a {
    @apply text-red;
}

.fc-col-header-cell-cushion,
.fc-daygrid-day-number {
    @apply text-black dark:text-white;
}

.fc-customnext-button.fc-button.fc-button-primary,
.fc-customprev-button.fc-button.fc-button-primary,
.fc-subscribeToCalendar-button.fc-button.fc-button-primary {
    @apply bg-red;
    border: none;
}

.fc-customnext-button.fc-button.fc-button-primary:active,
.fc-customprev-button.fc-button.fc-button-primary:active,
.fc-subscribeToCalendar-button.fc-button.fc-button-primary:active {
    @apply bg-red/80;
}

.fc-customnext-button.fc-button.fc-button-primary:focus,
.fc-customprev-button.fc-button.fc-button-primary:focus,
.fc-subscribeToCalendar-button.fc-button.fc-button-primary:active,
.fc-customnext-button.fc-button.fc-button-primary:active:focus,
.fc-customprev-button.fc-button.fc-button-primary:active:focus,
.fc-subscribeToCalendar-button.fc-button.fc-button-primary:active:focus {
    box-shadow: 0 0 0 0.2rem rgba(218, 60, 43, 0.5);
}

.custom-tooltip {
    transform: translate(-50%, 0);
    transition: all 0.25s ease-in-out;
    box-shadow: 0 10px 50px 0 rgba(17, 24, 39, 0.1);
    @apply pointer-events-none absolute;
    @apply mt-[15px] py-[10px] px-5 rounded-md;
    @apply text-black dark:text-white;
    @apply bg-white dark:bg-black;
}

.carousel-nav,
.carousel-control {
    pointer-events: all;
}

.carousel-container:hover .carousel-control {
    @apply opacity-100 -z-10;
}

@each $i in 1, 2, 3, 4, 5, 6, 7, 8 {
    .carousel-selector:nth-child($i):checked ~ .carousel-container .carousel-item:nth-child($i) {
        @apply opacity-100 z-10;
        pointer-events: auto;
    }
    .carousel-selector:nth-child($i):checked
        ~ .carousel-container
        .carousel-nav
        > label:nth-child($i) {
        @apply opacity-100;
    }
}