3dealer/resources/css/app.css

@import "tailwindcss";
@import "./fonts.css";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
@theme {
    /*--font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;*/
    --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
    /*--font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;*/
    --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;

    --color-brand: #18c28a;
    --color-brand-light: #69cba7;

    --text-h1: 60px;
    --text-h2: 48px;
    --text-h3: 36px;
    --text-h4: 27px;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
@layer base {
    body {
        background-color: theme(colors.neutral.200);
        font-family: var(--font-sans);
        font-size: 18px;
        line-height: 1.389;
        font-weight: 400;
        color: #000;
        -webkit-font-smoothing: antialiased;
    }
}

@keyframes back-to-top-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */
@layer components {
    /* ── Nav link — only the span underline-slide animation ──────── */
    .nav-link span {
        display: inline-block;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 5px;
        transition: background-size 0.35s cubic-bezier(0.61, 1, 0.88, 1);
        padding-bottom: 3px;
    }

    .nav-link:hover span,
    .nav-link.is-active span {
        background-size: 100% 5px;
    }

    /* ── Nav dropdown ─────────────────────────────────────────────── */
    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: -24px;
        min-width: 220px;
        background-color: theme(colors.neutral.200);
        border: 1px solid #000;
        border-top: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }

    .group:hover .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    .nav-dropdown a {
        display: block;
        padding: 10px 20px;
        font-family: var(--font-sans);
        font-size: 18px;
        font-weight: 400;
        color: #000;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    .nav-dropdown a:hover {
        background-color: #000;
        color: theme(colors.neutral.200);
    }

    /* ── Back to top ──────────────────────────────────────────────── */
    .back-to-top {
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.15s ease,
            visibility 0s 0.15s;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    .back-to-top-shape path {
        fill: theme(colors.brand-light);
        transform-origin: center;
        animation: back-to-top-spin 7s infinite linear;
        animation-play-state: paused;
    }

    .back-to-top a:hover .back-to-top-shape path {
        animation-play-state: running;
    }

    .back-to-top-arrow path {
        transition: transform 0.5s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .back-to-top a:hover .back-to-top-arrow path {
        transform: translateY(-5px);
    }

    /* ── Product lightbox (popover) ──────────────────────────────── */
    .product-lightbox {
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border: none;
        padding: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.3s ease,
            display 0.3s allow-discrete,
            overlay 0.3s allow-discrete;
    }

    .product-lightbox:popover-open {
        opacity: 1;
        pointer-events: auto;
    }

    @starting-style {
        .product-lightbox:popover-open {
            opacity: 0;
        }
    }

    .product-lightbox::backdrop {
        background-color: rgba(0, 0, 0, 0);
        transition:
            background-color 0.3s ease,
            display 0.3s allow-discrete,
            overlay 0.3s allow-discrete;
    }

    .product-lightbox:popover-open::backdrop {
        background-color: rgba(0, 0, 0, 0.8);
    }

    @starting-style {
        .product-lightbox:popover-open::backdrop {
            background-color: rgba(0, 0, 0, 0);
        }
    }

    /* ── Shared underline-slide animation ────────────────────────── */
    .underline-slide {
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 var(--slide-h, 2px);
        transition: background-size 0.35s cubic-bezier(0.61, 1, 0.88, 1);
        padding-bottom: 3px;
    }

    .underline-slide:hover,
    .underline-slide.is-active {
        background-size: 100% var(--slide-h, 2px);
    }

    /* ── Lightbox arrows + close ─────────────────────────────────── */
    .lightbox-arrow svg {
        transition: transform 0.25s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .lightbox-arrow[aria-label="Previous image"]:hover svg {
        transform: translateX(-6px);
    }

    .lightbox-arrow[aria-label="Next image"]:hover svg {
        transform: translateX(6px);
    }

    .lightbox-close svg {
        transition: stroke 0.2s ease;
    }

    .lightbox-close:hover svg {
        stroke: theme(colors.brand);
    }

    /* ── Gallery arrows ──────────────────────────────────────────── */
    .gallery-arrow svg {
        transition: transform 0.25s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .gallery-arrow:first-child:hover svg {
        transform: translateY(-4px);
    }

    .gallery-arrow:last-child:hover svg {
        transform: translateY(4px);
    }

    /* ── Checkbox ────────────────────────────────────────────────── */
    .checkbox:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: theme(colors.brand);
    }

    /* ── Color swatches ───────────────────────────────────────────── */
    .color-swatch {
        width: 32px;
        height: 32px;
        border: 1px solid #000;
        cursor: pointer;
        flex-shrink: 0;
        transition: border-width 0.1s ease;
    }

    .color-swatch.is-selected {
        border-width: 3px;
    }

    /* ── Button — ::before is the button bg, ::after is the shadow ── */
    .btn-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: theme(colors.neutral.200);
        z-index: 0;
    }

    .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: #000;
        z-index: -1;
        transform: translate(10px, 10px);
        transition: transform 0.35s cubic-bezier(0.2, 0.78, 0.12, 0.86);
    }

    .btn-primary:hover::after {
        transform: translate(0, 0);
    }
}