Template:SearchTrigger/Styles.css: Difference between revisions

Latest revision as of 00:45, 12 March 2026

@keyframes rotateSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes glowHue {
    0%   { filter: blur(8px) hue-rotate(0deg);   opacity: 0.45; }
    33%  { filter: blur(8px) hue-rotate(-20deg);  opacity: 0.55; }
    66%  { filter: blur(8px) hue-rotate(20deg);   opacity: 0.5;  }
    100% { filter: blur(8px) hue-rotate(0deg);   opacity: 0.45; }
}

@keyframes iconBob {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(calc(-50% - 3px)); }
}

.citizen-search-outer {
    position: relative;
    max-width: 600px;
    margin: 2em auto;
    border-radius: 999px;
    overflow: hidden;
    padding: 3px;
}

.citizen-search-outer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 180%;
    background: var(--accent-color-base);
    animation: rotateSpin 12s linear infinite, glowHue 6s ease-in-out infinite;
    pointer-events: none;
    border-radius: 999px;
    z-index: 0;
}

.citizen-search-trigger {
    position: relative;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-surface-1);
    border-radius: 999px;
    text-align: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-base);
    border: none;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 1;
}

.citizen-search-trigger:hover {
    background: var(--color-surface-2);
    transform: translateY(-1px);
}

.citizen-search-outer:hover::before {
    opacity: 0.75;
}


.citizen-search-trigger img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.3em;
}