input.css

/*!
Theme Name: STAIR Theme v__VERSION__
Author: Jacek Lajdecki, Tom Hotz, Andrin Schaller
Description: Custom WordPress theme for STAIR - the student association for Informatik at HSLU. Features modern, responsive design using Tailwind CSS, custom page templates, and integration with The Events Calendar and Contact Form 7.
Version: __VERSION__
Tags: student-association, custom-theme, tailwindcss
Tested up to: 6.9
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Safe List: prevents that those classes being purged for optimization, so we can use it in CMS */
@source inline("{sm:,md:,lg:,xl:,}{bg,text,border}-{neutral,red,orange,amber,yellow,green,blue,purple,pink}-{50,{100..900..100},950}");
@source inline("{sm:,md:,lg:,xl:,}{ring,outline,shadow,fill,stroke}-{neutral,red,orange,amber,yellow,green,blue,purple,pink}-{50,{100..900..100},950}");
/* gradient */
@source inline("{sm:,md:,lg:,xl:,}{from,via,to}-{neutral,red,orange,amber,yellow,green,blue,purple,pink}-{50,{100..900..100},950}");
/* hover, focus */
@source inline("{sm:,md:,lg:,xl:,}{hover:,focus:,}{bg,text,border}-{neutral,red,orange,amber,yellow,green,blue,purple,pink}-{50,{100..900..100},950}");
/* margin, padding */
@source inline("{sm:,md:,lg:,xl:,}{m,p}{x,y,t,r,b,l,}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}");
/* width, height */
@source inline("{sm:,md:,lg:,xl:,}{w,h,min-w,min-h,max-w,max-h}-{0,auto,full,screen,min,max,fit,px,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96}");
/* display and flex options */
@source inline("{sm:,md:,lg:,xl:,}{block,inline-block,inline,hidden,grid,inline-grid,contents,list-item}");
@source inline("{sm:,md:,lg:,xl:,}{flex,inline-flex,flex-col,flex-row,flex-wrap,flex-nowrap,flex-1,flex-auto,flex-none}");
@source inline("{sm:,md:,lg:,xl:,}{items,justify,self,place}-{start,end,center,between,around,evenly,stretch,baseline}");
@source inline("{sm:,md:,lg:,xl:,}{gap,gap-x,gap-y}-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24}");
/* typography */
@source inline("{sm:,md:,lg:,xl:,}{font}-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}");
@source inline("{sm:,md:,lg:,xl:,}{text}-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}");
@source inline("{sm:,md:,lg:,xl:,}{text}-{left,center,right,justify}");
@source inline("{sm:,md:,lg:,xl:,}{leading}-{none,tight,snug,normal,relaxed,loose,{3..10}}");
@source inline("{sm:,md:,lg:,xl:,}{tracking}-{tighter,tight,normal,wide,wider,widest}");
/* border */
@source inline("{sm:,md:,lg:,xl:,}{rounded,rounded-t,rounded-r,rounded-b,rounded-l,rounded-tl,rounded-tr,rounded-br,rounded-bl}-{none,sm,md,lg,xl,2xl,3xl,full}");
@source inline("{sm:,md:,lg:,xl:,}{border}-{0,2,4,8}");
/* shadow */
@source inline("{sm:,md:,lg:,xl:,}{shadow}-{none,sm,md,lg,xl,2xl,inner}");
/* transitions and animations */
@source inline("{sm:,md:,lg:,xl:,}{transition}-{none,all,colors,opacity,shadow,transform}");
@source inline("{sm:,md:,lg:,xl:,}{duration}-{75,100,150,200,300,500,700,1000}");
@source inline("{sm:,md:,lg:,xl:,}{ease}-{linear,in,out,in-out}");
/* transform */
@source inline("{sm:,md:,lg:,xl:,}{hover:,focus:,}{-translate-x,translate-x,translate-y,-translate-y}-{0,0.5,1,1.5,2,2.5,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,full}");
@source inline("{sm:,md:,lg:,xl:,}{scale}-{0,50,75,90,95,100,105,110,125,150}");
/* cursor */
@source inline("{sm:,md:,lg:,xl:,}{cursor}-{auto,default,pointer,wait,text,move,not-allowed,grab,grabbing,none,crosshair,zoom-in,zoom-out}");
/* overflow */
@source inline("{sm:,md:,lg:,xl:,}{overflow,overflow-x,overflow-y}-{auto,hidden,visible,scroll,clip}");
/* opacity */
@source inline("{sm:,md:,lg:,xl:,}{opacity}-{0,5,10,20,25,30,40,50,60,70,75,80,90,95,100}");
/* position */
@source inline("{sm:,md:,lg:,xl:,}{static,fixed,absolute,relative,sticky}");
@source inline("{sm:,md:,lg:,xl:,}{top,right,bottom,left,inset}-{0,0.5,1,2,3,4,5,6,8,10,12,16,20,24,auto,full}");
@source inline("{sm:,md:,lg:,xl:,}{z}-{0,10,20,30,40,50,auto}");
@source inline("{sm:,md:,lg:,xl:,}{object}-{contain,cover,fill,none,scale-down}");
/* Custom theme colors */
@source inline("{sm:,md:,lg:,xl:,}{hover:,focus:,dark:,dark:hover:,group-hover:,}{bg,text,border,ring,outline,fill,stroke}-{primary,primary-light,text-dark,text-light,text-lighter,bg-light,border-color,dark-bg,dark-surface,dark-text,dark-text-muted,dark-border}");
/* Custom theme colors with opacity modifiers */
@source inline("{sm:,md:,lg:,xl:,}{hover:,focus:,dark:,dark:hover:,group-hover:,}{bg,text,border,shadow}-{primary,primary-light,text-dark,text-light,text-lighter,bg-light,border-color,dark-bg,dark-surface,dark-text,dark-text-muted,dark-border}/{5,10,20,25,30,40,50,60,70,75,80,90,95}");

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* Light mode colors */
    --color-primary: #0b6a5b;
    --color-primary-light: #21b378;
    --color-text-dark: #333333;
    --color-text-light: #666666;
    --color-text-lighter: #999999;
    --color-bg-light: #f5f5f5;
    --color-border-color: #e0e0e0;

    /* Dark mode colors */
    --color-dark-bg: #121212;
    --color-dark-surface: #1e1e1e;
    --color-dark-text: #e0e0e0;
    --color-dark-text-muted: #a0a0a0;
    --color-dark-border: #333333;

    --font-sans: "Poppins", sans-serif;

    --text-4p5xl: 2.625rem;   /* 42px */

    --breakpoint-xs: 30rem;
}

html {
    scroll-behavior: smooth;
}

/* Theme transition for smooth dark/light mode switching */
html {
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Mobile menu styles */
@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        display: flex !important;
        flex-direction: column;
        background-color: white;
        width: 100%;
        padding: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition:
            left 0.3s ease,
            background-color 0.3s ease;
        gap: 1.5rem;
        align-items: flex-start;
        z-index: 40;
    }

    .dark .nav-menu {
        background-color: var(--color-dark-surface);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .nav-menu.active {
        left: 0;
    }
}

.menu-item a {
    color: var(--color-text-dark);
    transition: color 0.2s ease-in-out;
}

.menu-item a:hover {
    color: var(--color-primary-light);
}

.dark .menu-item a {
    color: var(--color-dark-text);
}

.dark .menu-item a:hover {
    color: var(--color-primary);
}

/* ===== Dropdown / Submenu ===== */

/*
 * .nav-chevron is a <span> injected by mobile-nav.js inside each parent <a>.
 * Because it lives inside the <a>, it inherits the link's hover colour automatically.
 * On mobile the entire <a> is the toggle; no separate button is needed.
 */
.nav-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /*margin-left: 2px;*/
}

.nav-chevron svg {
    display: block;
    transition: transform 0.2s ease;
}

/* Desktop: hover-driven dropdown */
@media (min-width: 1024px) {
    .nav-menu .menu-item-has-children {
        position: relative;
    }

    /* Keep text and chevron on the same line */
    .nav-menu .menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Bridge appears only while the dropdown is already open.
       When approaching from below the <li> is not yet :hover so the
       ::after doesn't exist yet – no premature activation. */
    .nav-menu .menu-item-has-children:hover::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }

    /* Rotate chevron when the parent item is hovered */
    .nav-menu .menu-item-has-children:hover > a > .nav-chevron svg {
        transform: rotate(180deg);
    }

    /* Dropdown panel */
    .nav-menu .sub-menu {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        border: 1px solid var(--color-border-color);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        padding: 0.4rem 0;
        min-width: 200px;
        list-style: none;
        z-index: 100;
    }

    /* Invisible extension: bridges the gap upward + wider area on sides and below.
       Only active when the dropdown is already visible, so approaching from below
       does NOT prematurely trigger the hover. */
    .nav-menu .sub-menu::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        z-index: -1;
    }

    .dark .nav-menu .sub-menu {
        background-color: var(--color-dark-surface);
        border-color: var(--color-dark-border);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .nav-menu .menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    .nav-menu .sub-menu .menu-item > a {
        display: block;
        padding: 0.45rem 1.2rem;
        font-size: 0.9rem;
        white-space: nowrap;
        color: var(--color-text-dark);
        transition: color 0.15s ease;
    }

    .nav-menu .sub-menu .menu-item > a:hover {
        color: var(--color-primary);
    }

    .dark .nav-menu .sub-menu .menu-item > a {
        color: var(--color-dark-text);
    }

    .dark .nav-menu .sub-menu .menu-item > a:hover {
        color: var(--color-primary);
    }

    .nav-menu .sub-menu .menu-item:first-child > a { border-radius: 8px 8px 0 0; }
    .nav-menu .sub-menu .menu-item:last-child  > a { border-radius: 0 0 8px 8px; }
    .nav-menu .sub-menu .menu-item:only-child  > a { border-radius: 8px; }
}

/* Mobile: click-to-expand, no navigation on parent items */
@media (max-width: 1024px) {
    /* Full width so the entire row is the toggle area */
    .nav-menu .menu-item-has-children {
        width: 100%;
    }

    /* <a> is a flex row: text + chevron inline, full width */
    .nav-menu .menu-item-has-children > a {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 4px;
    }

    /* Rotate chevron when the submenu is open */
    .nav-menu .menu-item-has-children.submenu-open > a > .nav-chevron svg {
        transform: rotate(180deg);
    }

    /* Sub-menu hidden until parent gets .submenu-open */
    .nav-menu .sub-menu {
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.5rem 0 0 1rem;
        list-style: none;
        border-left: 2px solid var(--color-border-color);
        margin-top: 0.5rem;
    }

    .dark .nav-menu .sub-menu {
        border-left-color: var(--color-dark-border);
    }

    .nav-menu .menu-item-has-children.submenu-open > .sub-menu {
        display: flex;
    }
}

/* Contact Form 7 Styling */
.wpcf7-form {
    @apply space-y-6;
}

.wpcf7-form div {
    @apply space-y-6;
}


/* Form group styling */
.wpcf7-form .form-group {
    @apply flex flex-col gap-2;
}

.wpcf7-form label {
    @apply block text-sm text-gray-500;
    @apply dark:text-dark-text-muted;
}

.wpcf7-form label span:first-child {
    @apply block text-sm mb-2 uppercase font-semibold tracking-wider;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    @apply w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 text-gray-700 placeholder-gray-400 transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary focus:bg-white;
    @apply dark:bg-dark-bg dark:border-dark-border dark:text-dark-text dark:placeholder-dark-text-muted dark:focus:bg-dark-surface;
}

.wpcf7-form select {
    @apply w-full px-4 py-3 rounded-lg bg-gray-50 border border-gray-200 text-gray-700 transition-all duration-200 cursor-pointer;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary focus:bg-white;
    @apply dark:bg-dark-bg dark:border-dark-border dark:text-dark-text dark:focus:bg-dark-surface;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    padding-right: 2.5rem;
}

/* File upload field (CF7) */
.cf7-file-wrapper {
    @apply w-full text-sm text-gray-500 rounded-lg border border-gray-200 bg-gray-50 cursor-pointer transition-all duration-200;
    @apply dark:bg-dark-bg dark:border-dark-border dark:text-dark-text-muted;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary;
    padding: 0.65rem;
}

.cf7-file-wrapper:focus-within {
    @apply ring-2 ring-primary/20 border-primary outline-none;
}

.cf7-file-button {
    @apply inline-flex items-center px-4 py-2 mr-4 rounded-lg bg-primary text-white text-sm font-semibold border-0 cursor-pointer transition-colors duration-200;
    @apply hover:bg-primary-light;
    margin-block-end: 0 !important;
}

.cf7-file-label {
    @apply text-sm text-gray-500 dark:text-dark-text-muted truncate;
    margin-block-end: 0 !important;

}

/* Dark mode select arrow */
.dark .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
}

/* Radio buttons */
.wpcf7-vertical-radio-wrapper {
    @apply flex items-center sm:mt-3;
}

.wpcf7-form .wpcf7-radio {
    @apply flex flex-wrap gap-6;
}

.wpcf7-list-item {
    @apply inline-flex items-center m-0;
}

.wpcf7-list-item label {
    @apply flex items-center gap-3 cursor-pointer mb-0 normal-case tracking-normal;
}

.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
    @apply appearance-none w-5 h-5 border-2 border-gray-300 transition-all hover:cursor-pointer;
    @apply checked:border-primary checked:bg-primary;
    @apply focus:ring-2 focus:ring-primary/20 focus:ring-offset-0;
    @apply dark:border-dark-border dark:bg-dark-bg;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3csvg%3e");
    background-position: center;
    background-size: 0;
    background-repeat: no-repeat;
}

.wpcf7-list-item input[type="radio"] {
    @apply rounded-full;
}

.wpcf7-list-item input[type="checkbox"] {
    @apply rounded-sm;
}

.wpcf7-list-item input[type="radio"]:checked,
.wpcf7-list-item input[type="checkbox"]:checked {
    background-size: 100%;
}

.wpcf7-list-item-label {
    @apply text-gray-600 dark:text-dark-text font-normal ml-0;
}

/* Quiz field */
.wpcf7-form .wpcf7-quiz {
    @apply flex items-center gap-2;
}

.wpcf7-form .wpcf7-quiz .wpcf7-quiz-label {
    @apply text-gray-600 dark:text-dark-text font-medium font-mono text-lg mr-0 mb-0 w-auto;
}

.wpcf7-form .wpcf7-quiz input {
    @apply !w-20 !px-3 !py-2 !text-center;
}

.wpcf7-form textarea {
    @apply min-h-[150px] resize-y;
}

.wpcf7-form input[type="submit"] {
    @apply inline-flex items-center justify-center px-8 py-3 bg-primary text-white font-semibold rounded-lg;
    @apply hover:bg-primary-light transition-colors duration-200 cursor-pointer;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
}

.wpcf7-form .wpcf7-spinner {
    @apply ml-3;
}

.wpcf7-form .wpcf7-not-valid-tip {
    @apply text-red-500 text-sm mt-1;
}

.wpcf7-form .wpcf7-response-output {
    @apply mt-6 p-4 rounded-lg text-sm;
}

.wpcf7-form.sent .wpcf7-response-output {
    @apply bg-green-50 border border-green-200 text-green-700;
    @apply dark:bg-green-900/30 dark:border-green-800 dark:text-green-400;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
    @apply bg-red-50 border border-red-200 text-red-700;
    @apply dark:bg-red-900/30 dark:border-red-800 dark:text-red-400;
}

/* Line clamp utility for truncating text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile menu button icon transitions based on aria-expanded */
.mobile-menu-toggle .menu-icon,
.mobile-menu-toggle .close-icon {
    @apply transition-all duration-300 ease-in-out;
    position: absolute;
}

/* Default state: show hamburger, hide X */
.mobile-menu-toggle[aria-expanded="false"] .menu-icon {
    @apply opacity-100 scale-100;
}

.mobile-menu-toggle[aria-expanded="false"] .close-icon {
    @apply opacity-0 scale-75;
}

/* Expanded state: hide hamburger, show X */
.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
    @apply opacity-0 scale-75;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
    @apply opacity-100 scale-100;
}

/* Theme toggle button */
.theme-toggle {
    @apply p-2 rounded-lg transition-all duration-200 cursor-pointer;
    @apply bg-bg-light dark:bg-dark-surface;
    @apply text-text-dark dark:text-dark-text;
    @apply hover:bg-border-color dark:hover:bg-dark-border;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/30;
}

.theme-toggle .sun-icon {
    @apply hidden;
}

.theme-toggle .moon-icon {
    @apply block;
}

.dark .theme-toggle .sun-icon {
    @apply block;
}

.dark .theme-toggle .moon-icon {
    @apply hidden;
}

/* 
 * The Events Calendar Overrides 
 * Force the default template wrapper to be full width
 */
#tribe-events-pg-template {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Infinite Scroll Animation */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
    width: max-content; /* Ensure container fits all items in one line */
}

/* Pause animation on hover of the container */
.pause-on-hover:hover .animate-scroll {
    animation-play-state: paused;
}

/* Gradient Mask for "Fog" effect */
.mask-gradient {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 15%,
        black 85%,
        transparent
    );
}