michaelschiemer/resources/css/styles.css

@layer reset, base, layout, components, utilities, overrides;

@import url('settings/colors.css') layer(settings);
@import url('settings/variables.css') layer(settings);
@import url('base/reset.css') layer(reset);
@import url('base') layer(base);
@import url('layout/container.css') layer(layout);
@import url('components/header.css') layer(components);
@import url('components/footer.css') layer(components);
@import url('components/nav.css') layer(components);
@import url('components/buttons.css') layer(components);
@import url('components/card.css') layer(components);
@import url('components/lightbox.css') layer(components);
@import url('components/csrf-status.css') layer(components);
@import url('components/form-autosave.css') layer(components);
@import url('components/image-manager.css') layer(components);
@import url('components/forms.css') layer(components);
@import url('components/badge.css') layer(components);
@import url('components/alert.css') layer(components);
@import url('components/button-group.css') layer(components);
@import url('components/container.css') layer(components);
@import url('forms/inputs.css') layer(components);

/* Admin Components */
@import url('components/admin/admin-layout.css') layer(components);
@import url('components/admin/admin-cards.css') layer(components);
@import url('components/admin/admin-tables.css') layer(components);
@import url('components/admin/admin-forms.css') layer(components);
@import url('components/admin/admin-buttons.css') layer(components);
@import url('utilities/helpers.css') layer(utilities);
@import url('utilities/animations.css') layer(utilities);
@import url('utilities/noise.css') layer(utilities);
@import url('utilities/scroll.css') layer(utilities);

@layer overrides {
    /* Benutzerdefinierte Styles */
}

:root {
    overscroll-behavior: none;

    accent-color: #412785;

    /* thumb = brighter brand-color */
    scrollbar-color: #5d37bc rgba(0 0 0 / 0); /* thumb + track */


    color-scheme: dark light;

    --duration-default: 0.2s;
    --duration-medium: 0.35s;
    --duration-slow: 0.5s;

    --easing-default: cubic-bezier(0.22, 0.61, 0.36, 1);
    --easing-bounce: linear(0 0%, 0 0.27%, 0.02 4,53%);
}

::selection {
    --_selection-bg-color: var(--selection-bg-color, #ff4081);
    --_selection-text-color: var(--selection-text-color, #fff);


    background-color: var(--_selection-bg-color); /* Pink */
    color: var(--_selection-text-color);

    text-shadow: 0 0 0.25rem var(--_selection-text-color);

    text-decoration: var(--selection-text-decoration, none);
}

::-webkit-scrollbar {
    /*width: 0.5rem;*/
}



@media(prefers-reduced-motion: no-preference) {
    :focus {
        transition: outline-offset .25s ease;
    }
    :focus:not(:active) {
        outline-offset: 5px;
    }
}

html {
    /* evtl per Mediaquery auf thin umschalten */
    scrollbar-width: auto;
    /*scrollbar-color: #412785 #412785;*/

    /* @link: https://moderncss.dev/12-modern-css-one-line-upgrades/#scrollbar-gutter */
    scrollbar-gutter: stable /*both-edges*/;
}

body {
    display: flex;
    flex-direction: column;

    overflow-x: clip;
    overscroll-behavior: contain;

    /* move body back in 3d:
    border-radius: 10px;
    overflow: hidden;
    scale: 95%;
    background-color: #2c1;

    * {
        visibility: hidden;
    }
    */
}


picture {
    user-select: none;
}

/*section,
.page-container > * {
    padding-inline: clamp(2.5rem, 20%, 10rem);
}*/

section.hero {
    display: flex;
    min-height: 100vh;
    /*height: 100%;
    width: 100%;*/
    /*background-color: #412785;*/
    background-color: var(--bg);
    color: var(--accent);
    padding-block-start: 10rem;

    /*background-image: url("https://localhost/assets/images/hero_small.jpg");
    background-size: cover;
    background-position: center;*/

    :where(:not(picture, img, h1)) {
        position: relative;
    }

    flex-direction: column;
    gap: 2ch;
}

.hero picture, .hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Lazy loading? */
section {
    content-visibility: auto;
}



h1 {
    user-select: none;
    padding-block-end: 3.33rem; /* front-size / 3 */
    /*text-align: center;*/


    text-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

    background: linear-gradient(
        90deg,
        oklch(70% 0.25 280),
        oklch(80% 0.3 340),
        oklch(70% 0.25 280)
    );
    background-size: 200% auto;

    /* Für Firefox */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;

    animation: shimmer 10s linear infinite;

    /*animation: shimmer 4s alternate-reverse infinite;*/
}



/*@keyframes shimmer {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}*/

@keyframes shimmer {
    0% { background-position: 0 center; }
    100% { background-position: -200% center; }
}

::backdrop {
    background-color: #412785;
    /*opacity: 0.7;*/
    background-color: rgba(0, 0, 0, 0.2);

    filter: blur(5px);
    backdrop-filter: blur(5px);
}



@starting-style {
    #mypopover {
        &:popover-open {
            opacity: 0;
            translate: 100% 0;
        }
    }
}

html:has(aside.show) {
    /*scrollbar-width: none;*/
}

.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}


/*body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: red;
    pointer-events: none;
    z-index: 9999;
}*/

[aria-current="page"] {}

form>div {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    border: 1px solid var(--muted);

    &:has(input:user-invalid:not(:placeholder-shown, :focus)) {
        [role="alert"] {
            visibility: visible;
        }
    }
}

[role="alert"] {
    visibility: hidden;
    min-height: 2rem;
    font-size: 1rem;

    background-color: red;
    border: darkred 2px solid;
    border-radius: 0.5em;
    padding: 0.25em;
    color: black;
}

span[id^="hint"] {
    color: var(--muted);
}