Mojeek - Ayu Dark with Raleway by Xifax

/* ==UserStyle==
@name           Mojeek - Ayu Dark with Raleway
@namespace      github.com/openstyles/stylus
@version        1.2.0
@description    An ayu-inspired dark theme for Mojeek with Raleway font
@author         Xifax
==/UserStyle== */
@-moz-document domain("mojeek.com") {
    /* Import Raleway font from Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

    /* Ayu Mirage color palette */
    :root {
        --ayu-background: #1F2430;
        --ayu-surface: #232834;
        --ayu-highlight: #2A3343;
        --ayu-highlight-light: #343F4F;
        --ayu-border: #3D4757;

        --ayu-foreground: #CBCCC6;
        --ayu-comment: #5C6773;
        --ayu-selection: #33415E;

        --ayu-red: #FF3333;
        --ayu-orange: #FFA759;
        --ayu-yellow: #FFD580;
        --ayu-green: #BAE67E;
        --ayu-cyan: #95E6CB;
        --ayu-blue: #73D0FF;
        --ayu-purple: #D4BFFF;
        --ayu-pink: #F29E74;

        --ayu-accent: #FFCC66;
    }

    /* Base styles with Raleway font */
    body {
        background-color: var(--ayu-background) !important;
        color: var(--ayu-foreground) !important;
        font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        font-weight: 400;
        line-height: 1.6;
    }

    /* Headers and titles */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .title,
    .results-count-container p {
        font-family: 'Raleway', sans-serif !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }

    /* Header */
    .header {
        background-color: var(--ayu-background) !important;
        border-bottom: 1px solid var(--ayu-border) !important;
        padding: 12px 0 !important;
    }

    .header-logo img {
        filter: brightness(1.1) contrast(0.9) !important;
    }


    /* Results */
    .result-col {
        background-color: var(--ayu-background) !important;
        padding: 20px !important;
    }

    .results-count-container p {
        color: var(--ayu-comment) !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* Result links */
    .title {
        color: var(--ayu-blue) !important;
        font-size: 20px !important;
        margin-bottom: 8px !important;
        transition: all 0.2s ease !important;
    }

    .title:visited {
        color: var(--ayu-purple) !important;
    }

    .title:hover {
        color: var(--ayu-cyan) !important;
        text-decoration: underline !important;
    }

    .url {
        color: var(--ayu-green) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .s {
        color: var(--ayu-foreground) !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Pagination */
    .pagination ul li span {
        background-color: var(--ayu-highlight) !important;
        color: var(--ayu-orange) !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }


    /* Footer */
    .footer-search {
        background-color: var(--ayu-surface) !important;
        border-top: 1px solid var(--ayu-border) !important;
        padding: 15px 0 !important;
    }

    .footer-loc,
    .footer a {
        color: var(--ayu-comment) !important;
        font-family: 'Raleway', sans-serif !important;
    }

    .footer a:hover {
        color: var(--ayu-accent) !important;
    }

    /* Hamburger menu */
    .hamburger span {
        background-color: var(--ayu-foreground) !important;
    }

    /* Modal */
    .modal-content {
        background-color: var(--ayu-surface) !important;
        border: 1px solid var(--ayu-border) !important;
        font-family: 'Raleway', sans-serif !important;
        border-radius: 8px !important;
    }

    .close-btn {
        color: var(--ayu-foreground) !important;
        font-size: 20px !important;
    }

    /* Highlighted text */
    strong {
        color: var(--ayu-orange) !important;
        font-weight: 600 !important;
    }

    /* Buttons */
    .js-clear-search-btn {
        color: var(--ayu-comment) !important;
        font-family: 'Raleway', sans-serif !important;
        transition: all 0.2s ease !important;
    }

    .js-clear-search-btn:hover {
        color: var(--ayu-red) !important;
        transform: scale(1.2) !important;
    }

    /* Navigation items */
    .main-nav a {
        font-family: 'Raleway', sans-serif !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
    }

    /* Add subtle animations */
    a {
        transition: color 0.2s ease !important;
    }

    /* Improve form elements */
    select,
    textarea {
        font-family: 'Raleway', sans-serif !important;
        background-color: var(--ayu-surface) !important;
        color: var(--ayu-foreground) !important;
        border: 1px solid var(--ayu-border) !important;
        border-radius: 4px !important;
        padding: 8px 12px !important;
    }

    /* Special accent elements */
    .infobox-right,
    .llm-ib a {
        color: var(--ayu-accent) !important;
    }

    /* Search options bar */
    .opts-bar {
        background-color: var(--ayu-surface) !important;
        border-bottom: 1px solid var(--ayu-border) !important;
    }

    .opts-bar .selected a {
        color: var(--ayu-accent) !important;
        border-bottom: 2px solid var(--ayu-accent) !important;
    }
}