static/css/styles.css

/* Laptop Advisor — custom styles layered on top of Bootstrap 5.
   Kept intentionally small; Bootstrap handles the RTL/LTR flip via its
   logical properties, so we avoid hard-coded left/right where possible. */

:root {
    --la-accent: #0d6efd;
    --la-accent-soft: #e7f1ff;
}

body {
    background-color: #f6f8fb;
}

.brand-mark {
    font-size: 1.4rem;
    line-height: 1;
}

/* Accessibility: skip-to-content link */
.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: .5rem;
    z-index: 2000;
    background: #fff;
    padding: .5rem .9rem;
    border-radius: .4rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}

/* Landing hero */
.hero {
    padding-block: 4rem;
}

.hero h1 {
    font-weight: 700;
}

/* Entry-point cards on the landing page */
.entry-card {
    display: block;
    height: 100%;
    border: 1px solid #e3e8ef;
    border-radius: 1rem;
    background: #fff;
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.entry-card:hover,
.entry-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(13, 110, 253, .12);
    border-color: var(--la-accent);
}

.entry-card .entry-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.entry-card.entry-card--advisor {
    background: linear-gradient(160deg, var(--la-accent-soft), #fff);
}

/* Catalog cards */
.laptop-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.laptop-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(13, 110, 253, .12) !important;
}

.laptop-card__media img {
    max-height: 100%;
    max-width: 100%;
}

/* Score bars: subtle highlight for an emphasized row (e.g. the chosen use case) */
.score-row--highlight {
    background: var(--la-accent-soft);
    border-radius: .4rem;
    padding: .35rem .5rem;
    margin-inline: -.5rem;
}

/* Plotly charts: keep them inside their card and responsive */
.chart-wrap {
    width: 100%;
    overflow-x: auto;
}

.chart-wrap .plotly-graph-div {
    width: 100% !important;
}

/* Sticky compare bar on the catalog */
.compare-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
}

/* Compare table */
.compare-table .compare-rowhead {
    position: sticky;
    inset-inline-start: 0;
    background: #fff;
    min-width: 8rem;
    z-index: 1;
}

.compare-table .compare-col {
    min-width: 11rem;
}

/* "Our pick" highlighted column */
.compare-col--pick {
    background: var(--la-accent-soft) !important;
}

.compare-table th.compare-col--pick {
    border-top: 3px solid var(--la-accent);
}

/* Advisor chat */
.advisor-log {
    max-height: 60vh;
    overflow-y: auto;
    padding: .5rem;
    background: #f0f3f8;
    border-radius: .75rem;
}

.advisor-bubble {
    display: inline-block;
    max-width: min(90%, 42rem);
    padding: .6rem .9rem;
    border-radius: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.advisor-msg--user .advisor-bubble {
    border-bottom-right-radius: .25rem;
}

.advisor-msg--bot .advisor-bubble {
    border-bottom-left-radius: .25rem;
}

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity .2s ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}