SimoSearch/static/main.css

/* OmniSearch - Windows 98 theme
   - No external assets required
   - Classic 3D bevel controls, gray workspace, teal titlebars
   - Works for: home, results, images
*/

:root {
    /* Win98-ish palette */
    --w98-face: #c0c0c0;
    --w98-face-2: #dfdfdf;
    --w98-shadow: #808080;
    --w98-dkshadow: #000000;
    --w98-hilight: #ffffff;
    --w98-text: #000000;
    --w98-blue: #000080;
    --w98-teal: #008080;

    /* Link colors reminiscent of old browsers */
    --w98-link: #0000ee;
    --w98-visited: #551a8b;

    /* Layout */
    --content-max: none;
    --content-pad: 16px;

    /* Focus */
    --focus-ring: 1px dotted #000000;
}

@media (prefers-color-scheme: dark) {
    /* Keep the Win98 look even if the user prefers dark mode */
    :root {
        color-scheme: light;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--w98-face);
    color: var(--w98-text);
    font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
}

img[src=""] {
    display: none;
}

/* ---------- Utilities: Win98 Bevels ---------- */

.w98-bevel {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-shadow);
    border-bottom: 2px solid var(--w98-shadow);
}

.w98-sunken {
    background: var(--w98-face-2);
    border-top: 2px solid var(--w98-shadow);
    border-left: 2px solid var(--w98-shadow);
    border-right: 2px solid var(--w98-hilight);
    border-bottom: 2px solid var(--w98-hilight);
}

.w98-inset {
    background: var(--w98-hilight);
    border: 1px solid var(--w98-dkshadow);
    box-shadow:
        inset 1px 1px 0 var(--w98-shadow),
        inset -1px -1px 0 var(--w98-hilight);
}

.w98-titlebar {
    background: var(--w98-blue);
    color: var(--w98-hilight);
    padding: 6px 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

/* Visually classic “window” container */
.w98-window {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-dkshadow);
    border-bottom: 2px solid var(--w98-dkshadow);
    box-shadow:
        1px 1px 0 var(--w98-shadow),
        2px 2px 0 var(--w98-shadow);
}

/* ---------- Links ---------- */

a {
    color: var(--w98-link);
    text-decoration: underline;
}

a:visited {
    color: var(--w98-visited);
}

a:hover {
    filter: contrast(110%);
}

a:focus {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* ---------- Form controls (classic) ---------- */

input[type="text"],
input[type="search"],
.search-box {
    font-family: inherit;
    font-size: 14px;
    color: var(--w98-text);

    background: var(--w98-hilight);
    border: 1px solid var(--w98-dkshadow);
    box-shadow:
        inset 1px 1px 0 var(--w98-shadow),
        inset -1px -1px 0 var(--w98-hilight);

    border-radius: 0;
    padding: 6px 8px;
    width: 100%;
}

.search-box::placeholder {
    color: #505050;
}

.search-box:focus {
    outline: var(--focus-ring);
    outline-offset: 0;
}

/* Buttons: raised with pressed active state */
button,
.pagination-btn,
.overlay-btn {
    font-family: inherit;
    font-size: 14px;
    color: var(--w98-text);

    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-shadow);
    border-bottom: 2px solid var(--w98-shadow);

    border-radius: 0;
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    touch-action: manipulation;
}

button:hover,
.pagination-btn:hover,
.overlay-btn:hover {
    filter: brightness(1.02);
}

button:active,
.pagination-btn:active,
.overlay-btn:active {
    border-top: 2px solid var(--w98-shadow);
    border-left: 2px solid var(--w98-shadow);
    border-right: 2px solid var(--w98-hilight);
    border-bottom: 2px solid var(--w98-hilight);
    padding: 7px 11px 5px 13px; /* tiny pressed illusion */
}

button:focus,
.pagination-btn:focus,
.overlay-btn:focus {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* Preserve existing semantic classes from templates */
.view-home .btn-primary,
.view-home .btn-secondary {
    /* Same in Win98, just classic raised buttons */
    font-weight: 700;
}

.view-home a {
    text-decoration: none;
}

/* ---------- Page chrome ---------- */

header {
    /* Turn the header into a classic “window” titlebar row + form row feel */
    padding: 10px 12px;
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}

h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

h1 span {
    color: var(--w98-blue);
}

/* Search form in header */
.search-form {
    flex: 1;
    max-width: 680px;
}

/* ---------- Home view (centered "dialog") ---------- */

.view-home {
    min-height: 100vh;
    padding: 22px;
    display: grid;
    place-items: center;
    background: var(--w98-teal); /* desktop-like backdrop */
}

/* Embed mode: when URL fragment contains #embed, the homepage toggles this on <body> */
body.embed .view-home {
    padding: 0;
}

.view-home .container {
    width: 100%;
    max-width: 560px;
    padding: 0;
}

/* Make the home “card” look like a window */
.view-home .container {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-dkshadow);
    border-bottom: 2px solid var(--w98-dkshadow);
    box-shadow:
        1px 1px 0 var(--w98-shadow),
        2px 2px 0 var(--w98-shadow);
    padding: 0;
}

/* Fake titlebar via hero logo area */
.view-home .hero-logo {
    margin: 0;
    padding: 8px 10px;
    background: var(--w98-blue);
    color: var(--w98-hilight);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
}

/* Ensure the <span> inside logo doesn't change titlebar legibility */
.view-home .hero-logo span {
    color: var(--w98-hilight);
}

/* Body of the window */
.home-search-form {
    padding: 14px 12px 12px 12px;
}

.view-home .search-input-wrapper {
    margin-bottom: 12px;
}

.view-home .search-box {
    box-shadow:
        inset 1px 1px 0 var(--w98-shadow),
        inset -1px -1px 0 var(--w98-hilight);
    padding: 6px 8px;
}

.view-home .buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.view-home .buttons a {
    display: inline-flex;
}

/* ---------- Nav tabs -> classic flat toolbar links ---------- */

.nav-tabs {
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-shadow);
    padding: 6px 12px;
}

.nav-container {
    max-width: var(--content-max);
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-tabs a {
    color: var(--w98-text);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid transparent;
}

.nav-tabs a:hover {
    border-top: 1px solid var(--w98-hilight);
    border-left: 1px solid var(--w98-hilight);
    border-right: 1px solid var(--w98-shadow);
    border-bottom: 1px solid var(--w98-shadow);
    background: var(--w98-face);
}

.nav-tabs a.active {
    background: var(--w98-face-2);
    border-top: 1px solid var(--w98-shadow);
    border-left: 1px solid var(--w98-shadow);
    border-right: 1px solid var(--w98-hilight);
    border-bottom: 1px solid var(--w98-hilight);
    font-weight: 700;
}

/* ---------- Results layout ---------- */

.content-layout {
    max-width: var(--content-max);
    margin: 0;
    padding: var(--content-pad);
    display: grid;
    grid-template-columns: minmax(0, 2.8fr) minmax(320px, 1.1fr);
    gap: 16px;
}

/* Left spacer not used in full-width layout */
.sidebar-spacer {
    display: none;
}

.results-container {
    min-width: 0;
}

.result {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-shadow);
    border-bottom: 2px solid var(--w98-shadow);
}

.result a {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    margin: 4px 0 3px 0;
    color: var(--w98-link);
}

.url {
    color: #004000;
    font-size: 12px;
    display: block;
    overflow-wrap: anywhere;
}

.desc {
    margin: 0;
    color: var(--w98-text);
}

/* ---------- Infobox sidebar (right “window”) ---------- */

.infobox-sidebar {
    min-width: 0;
}

.infobox {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-dkshadow);
    border-bottom: 2px solid var(--w98-dkshadow);
    box-shadow: 1px 1px 0 var(--w98-shadow);
    margin-bottom: 12px;
}

.infobox-header {
    background: var(--w98-blue);
    color: var(--w98-hilight);
    padding: 8px 10px;
    border-bottom: 1px solid var(--w98-dkshadow);
}

.infobox-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.infobox-main {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.infobox-image {
    width: 96px;
    height: 96px;
    min-width: 96px;
    object-fit: cover;

    background: var(--w98-hilight);
    border: 1px solid var(--w98-dkshadow);
    box-shadow:
        inset 1px 1px 0 var(--w98-shadow),
        inset -1px -1px 0 var(--w98-hilight);
}

.infobox-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.infobox-summary {
    margin: 0;
    font-size: 13px;
    color: var(--w98-text);
}

.read-more {
    align-self: flex-start;
    font-weight: 700;
    text-decoration: underline;
    color: var(--w98-link);
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0 0 0;
    justify-content: flex-start;
}

.pagination-current {
    color: var(--w98-text);
    font-size: 13px;
    padding: 2px 6px;
    background: var(--w98-face-2);
    border-top: 1px solid var(--w98-shadow);
    border-left: 1px solid var(--w98-shadow);
    border-right: 1px solid var(--w98-hilight);
    border-bottom: 1px solid var(--w98-hilight);
}

/* ---------- Images view ---------- */

.image-results-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--content-pad);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.image-card {
    background: var(--w98-face);
    border-top: 2px solid var(--w98-hilight);
    border-left: 2px solid var(--w98-hilight);
    border-right: 2px solid var(--w98-shadow);
    border-bottom: 2px solid var(--w98-shadow);
    overflow: hidden;
}

.image-wrapper {
    position: relative;
    background: #000;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay: Win98-ish tooltip panel instead of modern blur */
.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(192, 192, 192, 0.92);
    opacity: 0;
    transition: opacity 0.12s linear;
    display: grid;
    place-items: center;
}

.image-card:hover .image-overlay {
    opacity: 1;
}

.overlay-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 78%;
}

.overlay-btn {
    width: 100%;
    font-weight: 700;
    color: var(--w98-text);
}

.overlay-btn.primary,
.overlay-btn.secondary {
    /* identical classic button look */
    background: var(--w98-face);
}

.image-info {
    padding: 8px 10px;
    background: var(--w98-face);
    border-top: 1px solid var(--w98-shadow);
}

.image-caption {
    display: block;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-source {
    display: block;
    font-size: 12px;
    color: #404040;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .content-layout {
        grid-template-columns: 1fr;
    }
    .infobox-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: stretch;
    }
    .search-form {
        max-width: none;
    }
    .view-home {
        padding: 14px;
    }
    .view-home .buttons {
        justify-content: stretch;
        flex-direction: column;
    }
    .view-home .buttons button,
    .view-home .buttons a {
        width: 100%;
    }
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}