/* Base style — simple layout, team-color theme via CSS vars.
docs/migration/03 §2: no Nubank, one screen ≈ one form. --bg-color /
--fg-color vars come from the block in base.html (controlled team). */
:root {
--bg-color: #1a1a2e;
--fg-color: #e8e8e8;
--gray: #444;
--gray-light: #ddd;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Visually hidden but readable by screen readers/SEO — for cases like the
opening screen where a logo stands in for the heading visually,
but a real
should still exist for accessibility. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg-color);
color: var(--fg-color);
line-height: 1.5;
}
a { color: inherit; }
/* --- Flash ---
Inverted team colors (background=--fg-color, text=--bg-color), matching
.button--primary/.menubar__link--primary/.hub .card__title, with a
colored left-border stripe to keep the error/success/warning/info
meaning readable regardless of the current team's own color pair. */
.flash { list-style: none; margin: 0; padding: 0.5rem 1.25rem; flex: 0 0 auto; }
.flash__item {
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
border-radius: 4px;
background: var(--fg-color);
color: var(--bg-color);
border-left: 4px solid transparent;
}
.flash__item--error { border-left-color: #d94141; }
.flash__item--success { border-left-color: #2fae55; }
.flash__item--warning { border-left-color: #d9a441; }
.flash__item--info { border-left-color: #4189d9; }
/* --- Content ---
flex:1 + min-height:0 makes this area take exactly "viewport minus topbar/
flash" and scroll internally (rather than the whole page growing past the
viewport) — most screens never fill it, so this is a no-op look-wise for
them; the live-race screen relies on it to fit in one viewport (see
.race below). */
.content {
flex: 1;
min-height: 0;
overflow-y: auto;
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
h1 { margin-top: 0; }
/* --- Tables ---
VB: DataGridView controls (classificacaoPilDG, displayContratos1/2,
displayCorrida, historicoDG, etc.) always set .ForeColor = Black over the
default white grid background, regardless of the form's own team-color
theme — only specific cells (team chips) carried team colors. `.table` is
the shared port of that component, so it stays white/black everywhere. */
.table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
background: #fff;
color: #1a1a1a;
border-radius: 6px;
}
.table th, .table td {
text-align: left;
padding: 0.4rem 0.6rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.table th { font-weight: 700; }
.table a { color: #0b5fa3; }
/* --- Driver market ---
VB stacked two fixed-height DataGridViews (contracted / free agents), each
independently scrollable so both are visible without paging. Mirrors the
.race viewport-fit pattern: .market fills .content's height, each section
scrolls its own table body instead of the whole page growing. */
.market {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.market h1 { flex: 0 0 auto; }
.market__section {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-height: 0;
}
.market__section h2 { flex: 0 0 auto; margin: 0.5rem 0; }
.market__filter {
flex: 0 0 auto;
margin-bottom: 0.5rem;
padding: 0.35rem 0.6rem;
border-radius: 6px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
}
.market__filter::placeholder { color: inherit; opacity: 0.6; }
/* VB: displayContratos1/2.ForeColor = Black — the grids themselves are
always white/black regardless of the page's team-color theme; only the
team/next-team chips inside them carry team colors. */
.market__grid-wrapper {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
background: #fff;
color: #1a1a1a;
border-radius: 6px;
}
.market__grid { width: 100%; border-collapse: collapse; background: #fff; color: #1a1a1a; }
/* Row density tuned to match the qualifying/race driver-grid: tight enough
that the full driver list fits one screen without internal scrolling. The
team chips inside carry their own line-height, so they get compacted here
too (same idea as .panorama .chip-team) to keep the rows short. */
.market__grid th, .market__grid td {
text-align: left;
padding: 0.12rem 0.6rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 0.8rem;
line-height: 1.25;
}
.market__grid .chip-team { line-height: 1.15; padding: 0 0.5rem; font-size: 0.78rem; }
.market__grid thead th {
position: sticky;
top: 0;
background: #fff;
font-weight: 700;
}
.market__back { flex: 0 0 auto; margin-top: 0.75rem; }
.chip-team--retirement { background: #e28a00; color: #fff; }
/* VB: contrataPiloto.vb used a TabControl (Contracted / Free agents) instead
of stacking both grids. Reuses the generic .tabbed__radio/.tabbed__tab
toggle; the show/hide here stays display:flex (not the generic block) so
.market__section keeps its own internal scroll layout. */
.market__section--b { display: none; }
.market:has(.tabbed__radio--b:checked) .market__section--a { display: none; }
.market:has(.tabbed__radio--b:checked) .market__section--b { display: flex; }
@media (max-width: 700px) {
.market { height: auto; }
.market__section { flex: none; }
.market__grid-wrapper { overflow-y: visible; }
}
/* --- Investments (VB: investForm.vb, a compact 332x308 modal) ---
Kept as a narrow centered card rather than a full-width page — the VB
form only ever had 6 rows and a button, no reason to stretch it. */
.investments {
max-width: 26rem;
margin: 0 auto;
}
.investments__title {
text-align: center;
text-decoration: underline;
margin-bottom: 0;
}
.investments__subtitle {
text-align: center;
font-style: italic;
font-weight: 700;
text-decoration: underline;
margin-top: 0.15rem;
opacity: 0.9;
}
.investments__cash { text-align: center; margin-bottom: 1rem; }
.investments__row {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0;
}
.investments__label {
flex: 1 1 auto;
font-weight: 700;
text-decoration: underline;
text-align: right;
}
.investments__level {
flex: 0 0 3rem;
font-weight: 700;
text-align: right;
font-variant-numeric: tabular-nums;
}
.investments__sep { opacity: 0.7; }
.investments__currency { font-weight: 700; }
.investments__input {
flex: 0 0 4.5rem;
padding: 0.25rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
font-variant-numeric: tabular-nums;
text-align: center;
}
.investments__unit { font-weight: 700; }
.investments__divider {
border: none;
border-top: 1px solid var(--fg-color);
opacity: 0.6;
margin: 0.35rem 0;
}
.investments__save { display: block; width: 100%; margin-top: 1rem; }
.investments__back { text-align: center; margin-top: 0.5rem; }
/* --- Bank (VB: bancoForm.vb, a compact 321x256 modal) --- */
.bank { max-width: 24rem; margin: 0 auto; }
.bank__title { text-align: center; text-decoration: underline; margin-bottom: 1rem; }
.bank__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.3rem 0;
}
.bank__label { font-weight: 700; }
.bank__value { font-variant-numeric: tabular-nums; }
.bank__divider {
border: none;
border-top: 1px solid var(--fg-color);
opacity: 0.6;
margin: 0.5rem 0 1rem;
}
.bank__actions { display: flex; gap: 0.6rem; }
.bank__action { flex: 1 1 0; }
.bank__unavailable {
flex: 1 1 0;
margin: 0;
padding: 0.6rem;
text-align: center;
font-size: 0.85rem;
opacity: 0.75;
}
.bank__back { text-align: center; margin-top: 1rem; }
/* --- Engines (VB: motorForm.vb, 391x558) --- */
.engines { max-width: 32rem; margin: 0 auto; }
.engines__title { text-align: center; text-decoration: underline; }
.engines__form { display: flex; flex-direction: column; }
.engines .market__grid-wrapper { max-height: 20rem; }
.engines__divider {
border: none;
border-top: 1px solid var(--fg-color);
opacity: 0.6;
margin: 0.75rem 0;
}
.engines__summary { margin-bottom: 0.75rem; }
.engines__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.engines__label { font-weight: 700; text-decoration: underline; }
.engines__submit { display: block; width: 100%; }
.engines__closed { text-align: center; font-weight: 700; opacity: 0.85; }
.engines__back { display: block; width: 100%; text-align: center; margin-top: 0.5rem; }
/* --- Strategy (VB: defineEstratForm) ---
Neutral page, one team-colored panel per commanded driver side by side,
full-width Confirm button. See race/strategy.html. */
.strategy { max-width: 40rem; margin: 0 auto; }
.strategy__title { text-align: center; text-decoration: underline; margin: 0 0 0.3rem; }
.strategy__flag { text-align: center; margin: 0 0 0.9rem; font-size: 1.5rem; }
.strategy__cars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.strategy__car { border-radius: 8px; padding: 0.85rem 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.strategy__car-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.strategy__driver-name { font-weight: 700; font-size: 1.05rem; }
.strategy__row { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.strategy__label { font-weight: 700; text-decoration: underline; }
.strategy__tyre { flex: 0 0 auto; }
.strategy__autopit { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; cursor: pointer; }
/* Team-colored (bg/fg set inline from team.cores in the template, like the
driver panels); the border keeps it defined against the neutral page. */
.strategy__confirm {
display: block;
width: 100%;
margin-top: 1.2rem;
padding: 0.7rem 1.2rem;
border: 1px solid rgba(0, 0, 0, 0.3);
font-weight: 700;
}
.strategy__confirm:hover { filter: brightness(1.08); border-color: rgba(0, 0, 0, 0.5); }
@media (max-width: 600px) {
.strategy__cars { grid-template-columns: 1fr; }
}
/* --- Finances (VB: financasForm) — income/expense per category over the
current season + previous two. Centered, team-themed like the VB form. --- */
.finances { max-width: 34rem; margin: 0 auto; }
.finances__title { text-align: center; text-decoration: underline; margin: 0 0 0.5rem; }
.finances__table { margin: 0 auto; border-collapse: collapse; }
.finances__table th { font-weight: 700; padding: 0 0.9rem 0.2rem; }
.finances__cat { text-align: right; white-space: nowrap; padding: 0.05rem 0.9rem 0.05rem 0; }
.finances__val {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
padding: 0.05rem 0.9rem;
min-width: 6rem;
}
.finances__section-row td {
text-align: center;
text-decoration: underline;
font-weight: 700;
padding-top: 0.5rem;
}
.finances__balance-row { font-weight: 700; }
.finances__balance-row td { padding-top: 0.7rem; }
.finances__balance-row .finances__cat { text-decoration: underline; }
.finances__unit { text-align: center; font-size: 0.8rem; opacity: 0.85; margin: 0.35rem 0 0.75rem; }
.finances__cash-line { text-align: center; font-weight: 700; margin: 0 0 0.5rem; }
.finances__cash-label { text-decoration: underline; }
.finances__back { display: block; width: 100%; text-align: center; margin-top: 1rem; }
/* --- Sponsorships (VB: comercial.vb, 612x291 — 3 side-by-side columns) --- */
.sponsors__title { text-align: center; text-decoration: underline; }
.sponsors__none { text-align: center; font-weight: 700; margin: 2rem 0; }
.sponsors__grid {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.sponsors__card {
flex: 1 1 14rem;
border: 1px solid var(--fg-color);
border-radius: 6px;
padding: 0.75rem;
}
.sponsors__slot-title {
font-size: 0.95rem;
text-decoration: underline;
text-align: center;
margin: 0 0 0.5rem;
}
.sponsors__company { font-weight: 700; text-align: center; margin: 0 0 0.5rem; }
.sponsors__row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.15rem 0;
font-size: 0.9rem;
}
.sponsors__label { opacity: 0.85; }
.sponsors__empty { text-align: center; opacity: 0.7; margin: 1rem 0; }
.sponsors__back { text-align: center; margin-top: 0.75rem; }
/* --- Contract proposal (VB: ofereceContrato.vb, 316x225) --- */
.offer { max-width: 22rem; margin: 0 auto; }
.offer__title { text-align: center; text-decoration: underline; margin-bottom: 0.15rem; }
.offer__subtitle { text-align: center; opacity: 0.85; margin-top: 0; margin-bottom: 1rem; }
.offer__form { display: flex; flex-direction: column; gap: 0.5rem; }
.offer__row { display: flex; align-items: center; gap: 0.5rem; }
.offer__label { flex: 0 0 6rem; font-weight: 700; text-align: right; }
.offer__input {
flex: 0 0 5.5rem;
padding: 0.25rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
text-align: center;
}
.offer__select {
flex: 1 1 auto;
padding: 0.25rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
}
.offer__unit { flex: 1 1 auto; font-size: 0.85rem; opacity: 0.8; }
.offer__submit { display: block; width: 100%; margin-top: 0.75rem; }
.offer__cancel { display: block; width: 100%; text-align: center; margin-top: 0.5rem; }
/* Contract-proposal outcome panel — clear accepted/rejected feedback in place
of the old top flash banner. Inverted team colors with a status stripe, same
readable-regardless-of-team pattern as .flash. */
.offer__result {
background: var(--fg-color);
color: var(--bg-color);
border-radius: 6px;
border-left: 5px solid transparent;
padding: 0.9rem 1rem;
margin-bottom: 1rem;
text-align: center;
}
.offer__result--ok { border-left-color: #2fae55; }
.offer__result--no { border-left-color: #d94141; }
.offer__result-title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 700; }
.offer__result-detail { margin: 0; font-size: 0.95rem; }
/* --- Bankruptcy (VB: faliu.vb, 346x358) --- */
.bankrupt { max-width: 22rem; margin: 3rem auto 0; text-align: center; }
.bankrupt__face { font-size: 3.5rem; font-weight: 700; line-height: 1; margin: 0; }
.bankrupt__title { font-size: 1.3rem; margin: 0.75rem 0; }
.bankrupt__body { margin: 0.5rem 0; }
.bankrupt__exit { display: block; width: 100%; margin-top: 1.5rem; }
/* --- Sponsorship proposal (VB: aceitaPatrocinio.vb, 327x266) --- */
.sponsor-offer { max-width: 22rem; margin: 0 auto; }
.sponsor-offer__title { text-align: center; text-decoration: underline; margin-bottom: 1rem; }
.sponsor-offer__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.25rem 0;
}
.sponsor-offer__label { font-weight: 700; text-decoration: underline; }
.sponsor-offer__form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.sponsor-offer__action { display: block; width: 100%; }
.sponsor-offer__back { text-align: center; margin-top: 0.75rem; }
/* --- About (VB: sobre.vb, 345x315). Fixed dark teal, not team-themed —
VB shows this before any team is picked. --- */
.about {
max-width: 22rem;
margin: 2rem auto 0;
background: #004040;
color: #fff;
padding: 1.25rem;
border-radius: 8px;
text-align: center;
}
.about__title { font-size: 1.6rem; margin: 0 0 1rem; }
.about__box {
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 6px;
padding: 1rem;
margin-bottom: 1.25rem;
}
.about__link { color: #fff; font-weight: 700; text-decoration: underline; font-size: 1.05rem; }
.about__version { font-style: italic; margin: 0.5rem 0 0; }
.about__blurb { font-style: italic; font-weight: 700; margin: 0.75rem 0; }
.about__credit { font-style: italic; font-weight: 700; margin: 0.75rem 0; }
.about__email { margin-top: 0.75rem; }
.about__email-label { font-weight: 700; text-decoration: underline; }
.about__ok {
display: block;
width: 100%;
background: #fff;
color: #000;
border-color: #fff;
font-weight: 700;
}
.about__ok:hover { background: #e6e6e6; }
/* --- Options (VB: opcoesForm.vb, 329x353) --- */
.options { max-width: 24rem; margin: 0 auto; }
.options__title { text-align: center; text-decoration: underline; }
.options__form { display: flex; flex-direction: column; gap: 1rem; }
.options__group {
border: 1px solid var(--fg-color);
border-radius: 6px;
padding: 0.75rem;
}
.options__group legend { padding: 0 0.4rem; font-weight: 700; }
.options__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.options__label { flex: 0 0 8rem; text-decoration: underline; }
.options__select {
flex: 1 1 auto;
padding: 0.3rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
}
.options__check {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0;
}
.options__save { display: block; width: 100%; }
.options__back { text-align: center; margin-top: 0.5rem; }
/* --- Found a new team (VB: criaEquipeNova.vb, 301x262) --- */
.create-team { max-width: 24rem; margin: 0 auto; }
.create-team__title { text-align: center; text-decoration: underline; }
.create-team__form { display: flex; flex-direction: column; gap: 0.6rem; }
.create-team__row { display: flex; align-items: center; gap: 0.5rem; }
.create-team__label { flex: 0 0 8rem; text-align: right; }
.create-team__input {
flex: 1 1 auto;
padding: 0.3rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
}
.create-team__name-preview { text-align: center; font-weight: 700; }
.create-team__colors { display: flex; align-items: center; gap: 0.5rem; }
.create-team__colors input[type="color"] { width: 2.4rem; height: 2rem; padding: 0; border-radius: 4px; border: 1px solid var(--fg-color); }
.create-team__swap { padding: 0.3rem 0.6rem; }
.create-team__back, .create-team__submit { display: block; width: 100%; margin-top: 0.4rem; }
/* --- Save game (VB: salvaJogoForm.vb, 307x234) --- */
.save { max-width: 22rem; margin: 0 auto; }
.save__title { text-align: center; text-decoration: underline; margin-bottom: 0.25rem; }
.save__instruction { text-align: center; margin-top: 0; margin-bottom: 1.25rem; }
.save__form { display: flex; flex-direction: column; gap: 0.5rem; }
.save__row { display: flex; align-items: center; gap: 0.5rem; }
.save__label { flex: 0 0 6rem; }
.save__input {
flex: 1 1 auto;
padding: 0.3rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--fg-color);
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
}
.save__ext { opacity: 0.7; }
.save__back, .save__submit { display: block; width: 100%; margin-top: 0.5rem; }
/* --- Past winners (VB: vencedoresAnteriores.vb) --- */
.winners__title { text-align: center; }
.winners__team-chip {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-weight: 600;
}
/* --- Hall of Fame (VB: hallFamaForm.vb) --- */
/* Narrow, centered card like the VB form (378px) — the full-width .table made
the 8 compact columns sprawl across the page. */
.history--hall-of-fame { max-width: 28rem; margin: 0 auto; }
.hall-of-fame__title { text-align: center; text-decoration: underline; }
/* Tighter than the generic .table default so all 20 fixed rows fit one
screen without scrolling (a bounded list, same idea as achievements'
fixed 5x2 grid — not an open-ended list like the driver market). */
.hall-of-fame__table { margin: 0.5rem 0; }
.hall-of-fame__table th, .hall-of-fame__table td {
padding: 0.08rem 0.35rem;
line-height: 1.1;
font-size: 0.8rem;
text-align: center;
}
/* Name column stays left-aligned and takes the slack; numeric columns snug. */
.hall-of-fame__table th:nth-child(3), .hall-of-fame__name { text-align: left; width: 100%; }
.hall-of-fame__name { text-align: left; }
.hall-of-fame__back { display: block; width: 100%; text-align: center; margin-top: 0.75rem; flex: 0 0 auto; }
/* --- Calendar (VB: cForm.vb) --- */
.circuits__title { text-decoration: underline; }
.circuits-list { list-style: none; margin: 0; padding: 0; }
.circuits__item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0.5rem;
border-radius: 6px;
line-height: 1.15;
font-size: 0.92rem;
}
.circuits__item--next { background: rgba(255, 192, 0, 0.18); }
.circuits__round { flex: 0 0 1.6rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.circuits__name { opacity: 0.8; }
.circuits__badge {
margin-left: auto;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: #ffc000;
color: #1a1a1a;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
/* --- Teams list (web-only adaptation of eqForm.vb's team combo) --- */
.teams-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.teams-list__item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.teams-list__item:hover { filter: brightness(1.1); }
.teams-list__name { flex: 1 1 auto; }
/* --- New season (VB: fimAnoForm2.vb, 491x268) --- */
.year-start { max-width: 38rem; margin: 0 auto; }
.year-start__title { text-align: center; text-decoration: underline; margin-bottom: 0.25rem; }
.year-start__welcome { text-align: center; margin-top: 0; margin-bottom: 1.25rem; }
.year-start__panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.year-start__panel {
border: 1px solid var(--fg-color);
border-radius: 6px;
padding: 0.6rem 0.75rem;
}
.year-start__panel:first-child { grid-column: 1 / -1; }
.year-start__panel-title {
font-size: 0.85rem;
text-decoration: underline;
text-align: center;
margin: 0 0 0.4rem;
}
.year-start__row {
display: flex;
justify-content: flex-start;
gap: 0.5rem;
padding: 0.15rem 0;
font-size: 0.9rem;
}
/* Label on one line ("Piloto de testes:" was wrapping); value sits left of it,
left-aligned instead of pushed to the right edge. */
.year-start__label { opacity: 0.85; white-space: nowrap; }
.year-start__hint { text-align: center; font-style: italic; opacity: 0.8; font-size: 0.9rem; }
.year-start__continue { display: block; width: 100%; margin-top: 0.5rem; }
@media (max-width: 600px) {
.year-start__panels { grid-template-columns: 1fr; }
.year-start__panel:first-child { grid-column: auto; }
}
/* --- Year-end recap: champions hero --- */
.year-end__title { text-align: center; text-decoration: underline; margin: 0 0 0.6rem; flex: 0 0 auto; }
.year-end__champions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.9rem; flex: 0 0 auto; }
.year-end__champion {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.7rem 1.25rem;
border: 1px solid var(--fg-color);
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
min-width: 14rem;
}
.year-end__champion-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
.year-end__champion-name { font-size: 1.25rem; font-weight: 700; }
.year-end__champion-pts { font-weight: 700; }
.year-end__continue { display: block; width: 100%; max-width: 24rem; margin: 1rem auto 0; text-align: center; flex: 0 0 auto; }
/* --- Viewport-fit pages (long/growing lists & tables) ---
Generalizes the .market/.race pattern to every screen with a list or
table that can grow past one viewport (news box, standings, history,
calendar, saved games, ...): the page frame (title, back link, filters,
tabs) stays fixed at the top and only the list/table body scrolls, so the
whole game fits 1024x768 without the page itself ever needing to scroll.
Below 700px, reverts to normal document flow (mobile scrolls normally). */
.viewport-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.viewport-page > h1 { flex: 0 0 auto; }
.viewport-page__head { flex: 0 0 auto; }
.viewport-page__scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
@media (max-width: 700px) {
.viewport-page { height: auto; }
.viewport-page__scroll { overflow-y: visible; }
}
/* --- News --- */
ul.news { list-style: none; margin: 0; padding: 0 0.25rem 0 0; }
.news__item {
padding: 0.6rem 0.75rem;
margin-bottom: 0.5rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
border-left: 3px solid transparent;
}
.news__item--unread { border-left-color: var(--fg-color); background: rgba(255, 255, 255, 0.1); }
.news__item--unread .news__subject { font-weight: 700; }
.news__subject { margin: 0 0 0.25rem; font-size: 1rem; }
.news__title { text-align: center; }
.news__meta { margin: 0 0 0.35rem; font-size: 0.8rem; opacity: 0.7; }
.news__content { margin: 0; white-space: pre-line; font-size: 0.9rem; }
.news__action { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; }
/* --- Card grid --- */
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
gap: 1rem;
}
.card {
background: rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 0.75rem 1rem;
}
.card__title { margin: 0 0 0.5rem; font-size: 1rem; }
/* Hub cards get a border in the team's foreground color. */
.hub .card { border: 1px solid var(--fg-color); }
/* --- Hub --- */
.hub__header {
text-align: center;
margin-bottom: 1.5rem;
}
.hub__manager {
margin: 0;
opacity: 0.8;
font-size: 0.95rem;
}
.hub__team-name {
margin: 0.25rem 0 0;
font-size: 2rem;
font-style: italic;
}
.hub__resume {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin: 0 0 1rem;
padding: 0.6rem 1rem;
border: 1px solid var(--fg-color);
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
}
.hub__superuser {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0 0 1rem;
padding: 0.5rem 1rem;
border: 1px dashed var(--fg-color);
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
}
.hub__superuser-label { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; opacity: 0.8; }
.hub__superuser form { margin: 0; }
.hub__team-country {
margin: 0.25rem 0 0;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hub__continue-hint { opacity: 0.6; font-size: 0.8rem; font-style: italic; }
.hub__next-race-link {
display: block;
margin: -0.25rem -0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 6px;
color: inherit;
text-decoration: none;
}
.hub__next-race-link:hover { background: rgba(255, 255, 255, 0.1); }
.hub__next-race-link p { margin: 0.3rem 0; }
.hub .card__title {
background: var(--fg-color);
color: var(--bg-color);
margin: -0.75rem -1rem 0.75rem;
padding: 0.5rem 1rem;
border-radius: 6px 6px 0 0;
}
.stat-row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.2rem 0;
font-size: 0.9rem;
}
.stat-row__label { opacity: 0.75; }
.stat-row__value { font-weight: 600; text-align: right; }
.stat-row__hint { font-weight: 400; opacity: 0.7; }
/* --- Driver profile --- */
.driver__header {
text-align: center;
margin-bottom: 1.5rem;
}
.driver__name {
margin: 0;
font-size: 2rem;
font-style: italic;
font-weight: 700;
}
.driver__team-name {
margin: 0.25rem 0 0;
opacity: 0.8;
font-size: 1.1rem;
font-style: italic;
}
.driver .card__title,
.race .card__title {
background: var(--fg-color);
color: var(--bg-color);
margin: -0.75rem -1rem 0.75rem;
padding: 0.5rem 1rem;
border-radius: 6px 6px 0 0;
}
/* Tight enough that all four cards (Personal data/Qualities/Career/
Contract, the tallest — Qualities — has 8 rows) fit one screen without
scrolling the whole page, same idea as .race's own scoped overrides
just above. */
.driver__header { margin-bottom: 0.5rem; }
.driver__name { font-size: 1.6rem; }
.driver .grid { gap: 0.5rem; }
.driver .card { padding: 0.3rem 0.75rem; }
.driver .card__title { margin: -0.3rem -0.75rem 0.3rem; padding: 0.25rem 0.75rem; font-size: 0.88rem; }
.driver .stat-row { padding: 0 0; font-size: 0.8rem; line-height: 1.2; }
.driver__subtitle {
margin: 0.4rem 0 0.25rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.75;
border-top: 1px solid currentColor;
padding-top: 0.35rem;
}
.driver__next-note { font-size: 0.9rem; opacity: 0.85; }
.driver__history-link { color: inherit; font-weight: 600; }
.driver__back { margin-top: 1.5rem; }
/* --- Standings --- */
.standings__title {
text-align: center;
text-decoration: underline;
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 1rem;
}
.standings__radio { display: none; }
.standings__tabs {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.standings__tab {
flex: 1;
text-align: center;
padding: 0.85rem 1rem;
border-radius: 6px;
font-weight: 700;
font-size: 1.05rem;
cursor: pointer;
border: 1px solid var(--fg-color);
background: transparent;
color: var(--fg-color);
}
.standings:has(#view-drivers:checked) .standings__tab--drivers,
.standings:has(#view-constructors:checked) .standings__tab--constructors {
background: var(--fg-color);
color: var(--bg-color);
}
.standings__points-link { text-align: center; margin-bottom: 1rem; }
.standings__points-link a { color: inherit; text-decoration: underline; }
.standings__panel--constructors { display: none; }
.standings:has(#view-constructors:checked) .standings__panel--drivers { display: none; }
.standings:has(#view-constructors:checked) .standings__panel--constructors { display: block; }
.standings__panel-title { display: none; }
/* The VB window was narrow enough to need a tab switch between the two
championships; a browser window has room to show both side by side, so
above a two-column-friendly width we drop the tabs entirely instead of
just widening one narrow table. */
@media (min-width: 900px) {
.standings__tabs { display: none; }
.standings__panels {
display: grid;
/* Each table sized to its own content instead of stretched to fill an
even 1fr/1fr split — with fixed column widths gone (below), a driver
table and a team table settle at different natural widths. Centered
as a pair rather than spread across the full page width.
align-items stays at the default (stretch) so both columns take the
FULL height .viewport-page__scroll actually has available (driven by
the page's real flex layout, not a content-based guess) — with
align-items:start each column only ever got its own content height,
so a long drivers table could overflow the page even though the grid
row itself had plenty of room left in the shorter constructors
column. */
grid-template-columns: max-content max-content;
justify-content: center;
gap: 1.5rem;
}
.standings__panel--drivers,
.standings:has(#view-constructors:checked) .standings__panel--drivers,
.standings__panel--constructors,
.standings:has(#view-constructors:checked) .standings__panel--constructors {
display: block;
}
.standings__panels .standings-table { width: auto; }
.standings__panel-title {
display: block;
text-align: center;
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
}
/* --- Generic CSS-only tabs (VB TabControl port) ---
Same radio+label pattern as .standings above, generalized so any page
with a two-way split (champions: drivers/constructors, market:
contracted/free) can reuse it instead of stacking both panels. */
.tabbed__radio { display: none; }
.tabbed__tabs { display: flex; gap: 1rem; margin-bottom: 1rem; flex: 0 0 auto; }
.tabbed__tab {
flex: 1;
text-align: center;
padding: 0.75rem 1rem;
border-radius: 6px;
font-weight: 700;
cursor: pointer;
border: 1px solid var(--fg-color);
background: transparent;
color: var(--fg-color);
}
.tabbed__panel--b { display: none; }
.tabbed:has(.tabbed__radio--a:checked) .tabbed__tab--a,
.tabbed:has(.tabbed__radio--b:checked) .tabbed__tab--b {
background: var(--fg-color);
color: var(--bg-color);
}
.tabbed:has(.tabbed__radio--b:checked) .tabbed__panel--a { display: none; }
.tabbed:has(.tabbed__radio--b:checked) .tabbed__panel--b { display: block; }
.standings-table {
width: 100%;
border-collapse: collapse;
margin: 0 0 0.35rem;
background: #fff;
color: #1a1a1a;
border-radius: 6px;
}
.standings-table th, .standings-table td {
text-align: center;
padding: 0.05rem 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 0.8rem;
line-height: 1;
}
.standings-table th { font-weight: 700; }
.standings-table a { color: #0b5fa3; }
.standings-table__pos { width: 3rem; }
.standings-table th.standings-table__name,
.standings-table td.standings-table__name {
text-align: left;
white-space: nowrap;
}
.standings-table__name a { color: inherit; }
.standings-table__name-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* VB: classificacaoPilDG's team column fills the whole cell edge-to-edge —
same treatment as the live race grid's team chip, not an inset pill.
min-width (not a % of the table) so it fits the longest real team names
("Scuderia Toro Rosso", "Red Bull Racing") without wrapping, but doesn't
reserve that much space when the current save's names are shorter. */
.standings-table__team { padding: 0 !important; white-space: nowrap; min-width: 11rem; }
/* Constructors panel's team-name cell (colspan of what would otherwise be
name+team columns) - same fixed min-width as the drivers panel's team
chip, so it doesn't just auto-size to whatever's in the current save. */
.standings-table__name--team { min-width: 11rem; }
.standings-team {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
padding: 0.22rem 0.5rem;
font-weight: 700;
}
.standings__back {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
margin-top: 1rem;
padding: 0.9rem 1rem;
font-size: 1.05rem;
}
.standings__prize { font-weight: 600; }
/* --- Achievements (VB: achievements.vb, 578x503) — fixed 5x2 icon grid +
ONE details panel below that shows whichever badge is selected, instead
of a scrolling list with every description expanded (which is what made
the previous version taller than one screen). Click instead of VB's
hover (MouseEnter) — same idea, works for keyboard/touch too — via the
same CSS-only :has() pattern as the team-selection screen. */
.achievements { max-width: 32rem; margin: 0 auto; }
.achievements__title { text-align: center; text-decoration: underline; margin-bottom: 0.15rem; }
.achievements__progress { text-align: center; margin-top: 0; margin-bottom: 1rem; opacity: 0.85; }
.achievements__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.achievements__radio { position: absolute; opacity: 0; pointer-events: none; }
.achievements__icon-slot {
display: block;
aspect-ratio: 1 / 1;
border-radius: 8px;
border: 2px solid transparent;
padding: 0.3rem;
cursor: pointer;
}
.achievements__radio:checked + .achievements__icon-slot {
border-color: var(--fg-color);
background: rgba(255, 255, 255, 0.1);
}
.achievements__icon-slot:hover { background: rgba(255, 255, 255, 0.08); }
.achievements__icon { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.achievements__icon--locked { opacity: 0.4; filter: grayscale(1); }
.achievements__detail {
min-height: 8rem;
border: 1px solid var(--fg-color);
border-radius: 6px;
padding: 1rem;
}
.achievements__placeholder, .achievements__default { text-align: center; opacity: 0.8; font-style: italic; margin: 0; }
.achievements__detail-panel { display: none; }
.achievements__name { margin: 0 0 0.35rem; font-size: 1.1rem; text-align: center; }
.achievements__description { margin: 0 0 0.5rem; font-weight: 600; text-align: center; }
.achievements__trivia { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.achievements__back { display: block; max-width: 20rem; margin: 1rem auto 0; text-align: center; }
/* Ícone de clima na corrida ao vivo (sun.png / rain.png). */
.weather-icon { vertical-align: middle; image-rendering: pixelated; }
@media (max-width: 700px) {
.grid { grid-template-columns: 1fr; }
}
/* Chip da team nas telas de treino/corrida: pílula com as cores da própria
team (fundo=cores(0), texto=cores(1)), aplicadas inline por linha. */
.chip-team {
display: inline-block;
box-sizing: border-box;
/* Largura FIXA e uniforme, dimensionada para caber o maior name plausível
(ex.: "Red Bull Racing"); names curtos ficam centralizados. */
width: 9.5rem;
text-align: center;
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.5;
border: 1px solid rgba(0, 0, 0, 0.18);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Destaque da linha do driver que parou nos boxes / abandonou (VB: "Pit stop!"). */
/* Explicit dark text: the page background/foreground are team-colored (often
light-on-dark), so a light static highlight needs its own guaranteed-
readable text color rather than inheriting var(--fg-color). */
.linha-pit { background: #fff3cd; color: #1a1a1a; font-weight: 600; }
.linha-pit td { color: #1a1a1a; }
.linha-retired { color: #999; text-decoration: line-through; }
/* Circuit results grid (VB: cForm.desenhaGrid) — top-3 medal colors,
points-scoring rows highlighted, retired rows flagged red/white. */
.circuit-results__row--pos1 td:first-child { background: #ffc000; color: #fff; font-weight: 700; }
.circuit-results__row--pos2 td:first-child { background: #b2b2b2; color: #fff; font-weight: 700; }
.circuit-results__row--pos3 td:first-child { background: #c5af0b; color: #fff; font-weight: 700; }
.circuit-results__row--scored td:first-child { font-weight: 700; }
.circuit-results__row--retired td:first-child { background: #e20000; color: #fff; }
/* --- Circuit profile (VB: cInfoForm.vb, 367x261) --- */
.circuit__title { text-decoration: underline; }
.circuit__info { margin-bottom: 0.75rem; }
.circuit__row {
display: flex;
gap: 0.5rem;
padding: 0.15rem 0;
}
.circuit__label { flex: 0 0 6rem; font-weight: 700; text-decoration: underline; }
.circuit__winners-link { font-weight: 700; }
.circuit__back { display: block; width: 100%; margin-top: 0.75rem; text-align: center; }
/* --- Team profile (VB: eqForm.vb, boxed panels) ---
Two columns, each a stack of boxed panels: LEFT = team data / drivers / last
season, RIGHT = team selector / car stats / engine (mirrors the VB form). */
.team__header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-bottom: 0.4rem;
}
.team__title { text-align: left; font-style: italic; margin: 0; }
.team__badge { font-style: italic; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.team__panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
align-items: start;
margin: 0.4rem 0;
}
.team__col { display: flex; flex-direction: column; gap: 0.5rem; }
.team__selector {
width: 100%;
padding: 0.35rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.35);
background: #fff;
color: #1a1a1a;
font: inherit;
}
.team__panel-box {
border: 1px solid var(--fg-color);
border-radius: 6px;
padding: 0.4rem 0.75rem;
}
.team__panel-box--wide { grid-column: 1 / -1; }
.team__panel-title {
font-size: 0.9rem;
text-decoration: underline;
margin: 0 0 0.25rem;
}
.team__row {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.03rem 0;
font-size: 0.9rem;
}
/* The Car table reuses the shared .table component (white/black DataGridView
look everywhere else) but this page needs it noticeably tighter to fit
alongside the other four boxed panels without scrolling. */
.team__panel-box--wide .table { margin: 0.3rem 0 0; }
.team__panel-box--wide .table th,
.team__panel-box--wide .table td { padding: 0.2rem 0.5rem; }
.team__row-label { font-weight: 700; opacity: 0.85; }
.team__history-link { font-weight: 700; }
.team__back { display: block; max-width: 20rem; margin: 0.5rem auto 0; text-align: center; }
@media (max-width: 700px) {
.team__panels { grid-template-columns: 1fr; }
}
/* --- Team/driver history (VB: hEquipesForm.vb / hPilotosForm.vb) --- */
.team-history__title, .driver-history__title { text-align: center; text-decoration: underline; }
.team-history__back, .driver-history__back {
display: block;
max-width: 20rem;
margin: 0.75rem auto 0;
text-align: center;
}
.driver-history__team-chip {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 4px;
font-weight: 600;
}
/* Season panorama grid (VB: panoramaForm.feedDatagrid) — one column per
race, cell colored by finishing tier; italic = pole position that race. */
.panorama-wrapper { overflow-x: auto; }
.panorama { color: #1a1a1a; margin: 0.5rem 0; }
/* Tight enough that the full driver list (up to 22 rows) fits one screen
vertically without scrolling — VB's own panoramaForm.vb scrolled both
ways in a fixed 745x510 window, so horizontal scroll for many circuit
columns still matches it; this only removes the VERTICAL scroll. */
.panorama th, .panorama td { text-align: center; white-space: nowrap; padding: 0.04rem 0.4rem; line-height: 1.05; font-size: 0.8rem; }
.panorama .chip-team { line-height: 1.1; padding: 0 0.4rem; font-size: 0.78rem; }
.panorama__col-header { font-size: 0.85rem; }
.panorama__pts { font-weight: 700; }
.panorama-cell--p1 { background: #fffbc2; font-weight: 700; }
.panorama-cell--p2 { background: #dfdfdf; font-weight: 700; }
.panorama-cell--p3 { background: #ffdf9f; font-weight: 700; }
.panorama-cell--scored { background: #dfffdf; }
.panorama-cell--unscored { background: #cfcfff; }
.panorama-cell--retired { background: #f0cfff; }
.panorama-cell--pole { font-style: italic; font-weight: 700; }
/* Constructors' panorama: two driver rows per team, team cell spans both.
A heavier top border separates one team group from the next. */
.panorama__group-start td { border-top: 2px solid rgba(0, 0, 0, 0.35); }
.panorama__team-pos { font-weight: 700; }
.panorama__driver { text-align: left; }
/* Team total (sum of both drivers), merged across the team's two rows. */
.panorama__team-pts { font-weight: 700; font-size: 0.9rem; }
/* --- Live race ---
Sized to fit one viewport (no page scroll): .race fills .content's
flex area exactly, .race__main is a column with only the grid wrapper
allowed to grow/scroll internally, so header/banner/sidebar always
stay visible. */
/* Reclaims some of .content's page-wide padding for the live race screen
specifically — every other screen has room to breathe, but this one is
the tightest fit against the 1024x768 viewport-fit target. */
.content:has(> .race) { padding: 0.75rem 1rem; }
.race {
display: grid;
grid-template-columns: 1fr 280px;
gap: 1rem;
align-items: stretch;
height: 100%;
min-height: 0;
}
.race__main {
display: flex;
flex-direction: column;
min-height: 0;
}
.race__header { text-align: center; margin-bottom: 0.2rem; flex: 0 0 auto; }
.race__title { margin: 0; text-decoration: underline; font-size: 1.1rem; }
.race__circuit-name { margin: 0.05rem 0 0; font-style: italic; opacity: 0.85; font-size: 0.85rem; }
.race__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 0.2rem 0 0.4rem;
font-size: 0.8rem;
}
.race__country { letter-spacing: 0.5px; }
.race__extra-cols-toggle { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; cursor: pointer; }
.flag { font-size: 1.2em; }
.race .flag { font-size: 1.05em; }
/* VB: displayCorrida.ForeColor = Black (corridaForm's live grid) — white/
black regardless of the page's team-color theme, matching every other
ported DataGridView; team chips inside carry the actual team colors. */
.driver-grid-wrapper {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
background: #fff;
color: #1a1a1a;
border-radius: 6px;
}
/* The grid scales with viewport HEIGHT so it fills the wrapper on tall/hi-res
displays instead of staying a fixed pixel size (which looked small relative
to a big screen). One vh-based font-size on the table drives everything;
padding and the position badge are in `em`, so they scale together. The
clamp() floor equals the old fixed values, preserving the tuned ~768px fit
on laptops — only taller screens grow past it. */
.driver-grid { width: 100%; border-collapse: collapse; font-size: clamp(0.7rem, 1.3vh, 1.4rem); }
.driver-grid th, .driver-grid td {
padding: 0.17em 0.5em;
text-align: left;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-size: inherit;
line-height: 1.25;
}
.driver-grid thead th {
position: sticky;
top: 0;
background: #fff;
}
.driver-grid th { font-weight: 700; }
/* Zebra striping on the plain (non pit/retired) rows, matching the VB grid's
alternating white/pale-mint look. */
.driver-grid tbody tr:nth-child(even):not(.linha-pit):not(.linha-retired) {
background: #f2f9f2;
}
/* "See pit stops/tyres" toggle (#chk-extra-cols in race.js) shows/hides
these two columns client-side only — the data was already in every tick
payload (tire/pit_stops), just not rendered here by default. */
.driver-grid__extra-col { display: none; }
#driver-grid.driver-grid--extra-cols .driver-grid__extra-col { display: table-cell; }
.driver-pos {
display: inline-flex;
align-items: center;
justify-content: center;
/* em-based so the badge scales with the grid's viewport-driven font-size */
width: 1.8em;
height: 1.8em;
border-radius: 3px;
font-weight: 700;
font-size: 0.97em;
color: #1a1a1a;
}
.driver-pos--1 { background: #e6c34a; }
.driver-pos--2 { background: #c7cdd6; }
.driver-pos--3 { background: #d3a065; }
.driver-pos--other { background: rgba(255, 255, 255, 0.15); color: inherit; }
.driver-pos--retired { background: #c0392b; color: #fff; }
/* Team column fills the whole cell (VB's grid cell background), rather than
a centered pill. */
.driver-grid__team { padding: 0 !important; }
.driver-grid__team-chip {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0.12rem 0.35rem;
font-size: 0.7rem;
line-height: 1.25;
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.race__banner {
flex: 0 0 auto;
margin-top: 0.4rem;
padding: 0.35rem 0.75rem;
min-height: 1rem;
background: #16213e;
border: 2px solid #7a1f1f;
border-radius: 6px;
color: #e05555;
font-weight: 700;
font-size: 0.85rem;
text-align: center;
}
.race__sidebar {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
min-height: 0;
overflow-y: auto;
}
.race__lap-counter { margin: 0 0 0.4rem; text-align: center; font-size: 1.3rem; font-weight: 700; }
.race-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.race-controls .button { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.controle-speed { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.75rem; flex: 1 1 auto; }
/* --- Practice/qualifying session (VB: treinoForm's crono_Tick) ---
Team-themed like the live race screen (bg/fg = commanded team's colors);
the .button/.button--secondary/.button--primary defaults already assume
a dark, team-colored page, so no page-specific overrides are needed here. */
/* treinoForm was a narrow dialog (unlike the wider corridaForm/
classificacao.vb); stretching its grid across the full page width (as
wide as the race screen's own grid+sidebar) left a lot of empty space in
short cells. Capped and centered instead of width:100% of .content. */
.practice { max-width: 34rem; margin: 0 auto; }
/* Tight enough that the full 22-driver grid fits one screen without
internal scrolling — the grid's own row height already matches the
live race screen's tuned value (see .driver-grid), so all the slack
needed comes from this header/controls stack instead. */
.practice__header { text-align: center; margin-bottom: 0.15rem; flex: 0 0 auto; }
.practice__header h1 { margin: 0; text-decoration: underline; font-size: 1.15rem; }
.practice__circuit-name { margin: 0.05rem 0 0; font-style: italic; opacity: 0.9; font-size: 0.9rem; }
.practice__race-name { margin: 0 0 0.05rem; opacity: 0.8; font-size: 0.78rem; }
.practice__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin: 0 0 0.15rem;
font-size: 0.78rem;
}
.practice__weather { display: flex; align-items: center; gap: 0.3rem; }
.practice-controls { margin-bottom: 0.2rem; }
.practice__minute { margin: 0; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Reserve a fixed 2-digit width for the ticking minute so the counter never
changes width (1 → 90) and stops nudging the Play/Pause buttons beside it. */
.practice__minute #minute { display: inline-block; min-width: 2ch; text-align: right; }
.hidden { display: none; }
.practice__progress-wrapper { margin-bottom: 0.15rem; }
.practice__progress-bar {
height: 0.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.practice__progress-fill {
height: 100%;
background: var(--fg-color);
transition: width 0.2s linear;
}
.practice__advance-form { margin-top: 0.3rem; flex: 0 0 auto; }
.practice__advance-btn { width: 100%; padding: 0.45rem 1rem; font-size: 0.95rem; }
/* A little tighter than the live race grid's own row height (which already
has its own tuned value) — practice's extra header chrome (time
remaining/weather/progress bar/speed controls) leaves less room, so the
last bit of margin needed comes from the grid itself. */
/* em-based (like the base grid) so practice scales with viewport height too,
just tighter — practice's extra header chrome leaves less room per row. */
.practice .driver-grid th, .practice .driver-grid td { padding: 0.03em 0.5em; line-height: 1.05; }
.practice .driver-pos { width: 1.75em; height: 1.75em; font-size: 0.89em; }
/* Row-flash: brief highlight when a driver's grid position changes (race.js
and practice.js both toggle this class on the affected
). */
@keyframes row-flash {
from { background: rgba(255, 235, 59, 0.55); }
to { background: transparent; }
}
.row-flash { animation: row-flash 1s ease-out; }
.commanded__name { margin: 0 0 0.3rem; font-weight: 600; font-size: 0.9rem; }
.commanded__country { font-weight: 400; }
.commanded__status--retired {
display: inline-block;
margin-left: 0.35rem;
padding: 0.03rem 0.4rem;
border-radius: 999px;
background: #c0392b;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
}
.tire-bar {
height: 0.45rem;
border-radius: 3px;
background: #c7cdd6;
overflow: hidden;
margin: 0.25rem 0 0.5rem;
}
.tire-bar__fill {
height: 100%;
width: 100%;
background: #4caf50;
transition: width 0.3s ease;
}
.commanded__autopit { display: block; margin-top: 0.35rem; font-size: 0.78rem; }
.race .card select { width: 100%; margin-top: 0.1rem; font-size: 0.82rem; }
.race .btn-pit { width: 100%; margin-top: 0.35rem; padding: 0.45rem 0.75rem; font-size: 0.85rem; }
/* VB: corridaForm's driver panels and lap counter were bordered boxes with a
solid title bar; the generic .card is borderless everywhere else in the
app, so the border stays scoped to the race sidebar. */
.race .card { padding: 0.4rem 0.6rem; border: 1px solid var(--fg-color); }
.race .card__title { margin: -0.4rem -0.6rem 0.3rem; padding: 0.3rem 0.6rem; font-size: 0.82rem; border-radius: 5px 5px 0 0; }
.race .stat-row { padding: 0.05rem 0; font-size: 0.78rem; }
/* Some team color pairs are inherently low-contrast (e.g. Red Bull's navy bg +
red fg ≈ 2.3:1), so team-fg text on the team-colored card was unreadable —
notably the pit-stops count. Put the values in a neutral high-contrast pill
(dark text on near-white) so they read on ANY team, light or dark. */
.race .stat-row__value {
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
padding: 0 0.4rem;
border-radius: 3px;
min-width: 1.4rem;
}
@media (max-width: 900px) {
/* Stacked layout no longer fits one viewport - fall back to normal
page scroll instead of the internal-scroll/fixed-height trick. */
.race { grid-template-columns: 1fr; height: auto; }
.race__main { height: auto; }
.driver-grid-wrapper { overflow-y: visible; }
.race__sidebar { height: auto; overflow-y: visible; }
}
/* --- Top bar: dropdown menus + game info ---
NOT an OS window — just the header. VB: every form painted Me.BackColor/
ForeColor from the commanded team's own colors, and every button on that
form used the INVERSE pair (Button.BackColor = Me.ForeColor / ForeColor =
Me.BackColor) so it stood out against the form. The topbar follows the
same rule here: bg/fg = the page's own --bg-color/--fg-color (team
colors, or the neutral default on screens with no team), and the
Continue CTA uses the inverted pair via .menubar__link--primary. */
.breadcrumbs {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background: var(--bg-color);
color: var(--fg-color);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.85rem;
}
.breadcrumbs a { color: inherit; opacity: 0.75; text-decoration: none; }
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.breadcrumbs__sep { opacity: 0.5; }
.breadcrumbs__current { font-weight: 700; }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--bg-color);
color: var(--fg-color);
border-bottom: 1px solid var(--fg-color);
padding: 0 0.5rem;
flex: 0 0 auto;
}
.topbar__info {
font-size: 0.85rem;
color: var(--fg-color);
opacity: 0.85;
white-space: nowrap;
padding-right: 0.35rem;
}
.menubar { flex: 1; }
.menubar__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: stretch;
}
.menubar__top { position: relative; }
.menubar__button,
.menubar__link {
display: inline-block;
border: 1px solid transparent;
background: transparent;
color: var(--fg-color);
font: inherit;
padding: 0.4rem 0.75rem;
cursor: pointer;
text-decoration: none;
}
.menubar__button:hover,
.menubar__link:hover,
.menubar__top.open .menubar__button {
border-color: var(--fg-color);
background: rgba(255, 255, 255, 0.15);
}
/* Current-section highlight: the dropdown button whose section contains the
page you're on, the direct-link item that IS the current page, and the
matching entry inside an open dropdown. */
.menubar__top--active .menubar__button {
border-bottom: 2px solid var(--fg-color);
font-weight: 700;
}
.menubar__link--current {
border-bottom: 2px solid var(--fg-color);
font-weight: 700;
}
.menubar__action--active {
font-weight: 700;
}
.menubar__action--active::before {
content: "\2713\0020";
}
/* Prominent header "Continue" CTA — always visible without scrolling,
only rendered by menu.py when the current phase is actually HUB. Sized to
match its siblings exactly (no extra margin/padding that would grow the
topbar) and colored with the commanded team's own colors, inverted —
same convention as .button--primary/.hub .card__title. */
.menubar__link--primary {
background: var(--fg-color);
color: var(--bg-color);
font-weight: 700;
border-color: var(--fg-color);
}
.menubar__link--primary:hover {
background: var(--bg-color);
color: var(--fg-color);
border-color: var(--fg-color);
}
/* Dropdowns: hidden by default, opened via .open (JS). */
.menubar__dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
margin: 0;
padding: 3px;
list-style: none;
background: #ffffff;
border: 1px solid #b7c2d0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
z-index: 50;
}
.menubar__top.open .menubar__dropdown { display: block; }
.menubar__action {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
border: 0;
background: transparent;
color: #1f2937;
font: inherit;
padding: 0.4rem 0.8rem;
cursor: pointer;
text-decoration: none;
}
.menubar__action:hover {
background: #3b82d6;
color: #fff;
}
.menubar__sep {
height: 1px;
margin: 3px 6px;
background: #dce4ee;
}
/* Unread news badge. */
.badge {
display: inline-block;
min-width: 1.1em;
padding: 0 0.35em;
border-radius: 999px;
background: #d94141;
color: #fff;
font-size: 0.72rem;
line-height: 1.4;
text-align: center;
}
/* Language switcher: small pill buttons next to game info. */
.topbar__lang {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
align-items: center;
}
.topbar__lang-btn {
border: 1px solid transparent;
background: transparent;
color: var(--fg-color);
opacity: 0.7;
font: inherit;
font-size: 0.78rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
cursor: pointer;
}
.topbar__lang-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); }
.topbar__lang-btn--active {
background: var(--fg-color);
color: var(--bg-color);
opacity: 1;
}
@media (max-width: 640px) {
.topbar { flex-wrap: wrap; }
.menubar__list { flex-wrap: wrap; }
}
/* --- Opening screen (VB: abertura.vb) --- */
.opening {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 3rem;
gap: 0.5rem;
}
/* VB: abertura.vb's own BackColor showed through around this image
(BackgroundImageLayout=None, drawn at native size) — same idea here,
just as an sized to the column instead of a CSS background so it
scales cleanly and keeps real alt text. */
.opening__splash {
width: 100%;
max-width: 420px;
border-radius: 8px;
}
.opening .menu { width: 100%; max-width: 320px; margin-top: 1.5rem; }
.opening .menu__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* VB: abertura.vb's 4 menu buttons (new_btn/load_btn/conq_btn/reg_btn) were
image-based orange pills (btnIntro/1/2/21.png — sampled gradient below)
with a black outline; text was black by default, turning white on
MouseEnter (see sair_btn_MouseEnter, applied to all 5 buttons) rather
than the button itself changing color. Replicated as a CSS gradient
pill instead of the raw images so it stays crisp at any size/locale. */
.opening .menu__item {
display: block;
padding: 0.85rem 1.5rem;
background: linear-gradient(to bottom, #fce2c1 0%, #fdbd6d 35%, #fdb14e 65%, #fb9f26 100%);
border: 2px solid #000;
border-radius: 999px;
color: #000;
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
text-align: center;
transition: color 0.15s ease;
}
.opening .menu__item:hover {
color: #fff;
}
.opening__copyright { margin-top: 2.5rem; opacity: 0.5; font-size: 0.8rem; }
/* --- Season selection (VB: escolheDB.vb) --- */
.season { max-width: 420px; margin: 0 auto; }
.season__list {
list-style: none;
margin: 1.5rem 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.season__item {
padding: 0.6rem 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
}
.season__item label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.season__double-points { margin: 1rem 0; }
.season__title { text-align: center; text-decoration: underline; }
.season__actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.season__back, .season__continue { display: block; width: 100%; text-align: center; }
/* --- Seleção de team (novo-jogo/team) ---
The action bar (manager name + Start game/Create/Back) is sticky to the
top of .content instead of trailing after the team grid — previously the
player had to scroll all the way down past every team card just to reach
"Start game" after picking one. */
.team__topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1.5rem;
padding: 0.5rem 0 0.6rem;
margin-bottom: 0.75rem;
background: var(--bg-color);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.team__topbar-title {
margin: 0;
font-size: 1.3rem;
flex: 1 1 auto;
white-space: nowrap;
}
.team__label-manager {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
flex: 1 1 auto;
}
.team__label-manager input {
width: 100%;
max-width: 220px;
padding: 0.5rem;
border: 1px solid var(--fg-color);
border-radius: 4px;
background: var(--bg-color);
color: var(--fg-color);
font: inherit;
}
.team__label-manager input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.3);
}
/* Team list (left) + single preview panel (right), matching VB's
RadioButton-bar list + Panel1/Panel2 preview (escolheEquipe.vb). Only
the checked radio's preview panel is shown, via the per-team :has()
rules the template generates inline (no JS). */
.team__layout {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
gap: 1.5rem;
margin: 0.5rem 0;
min-height: 0;
}
.team__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
min-height: 0;
overflow-y: auto;
}
.team__list-item { position: relative; flex: 0 0 auto; }
.team__radio {
position: absolute;
top: 50%;
left: 0.6rem;
transform: translateY(-50%);
cursor: pointer;
z-index: 1;
}
.team__bar {
display: block;
padding: 0.25rem 0.75rem 0.25rem 2rem;
border-radius: 6px;
font-weight: 700;
line-height: 1.15;
cursor: pointer;
border: 2px solid transparent;
}
.team__radio:checked + .team__bar {
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.team__preview { position: sticky; top: 0.5rem; }
.team__preview-panel {
display: none;
flex-direction: column;
gap: 0.75rem;
padding: 1.5rem;
border-radius: 8px;
}
.team__preview-name { margin: 0; font-size: 1.4rem; word-break: break-word; }
.team__preview-row {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.95rem;
}
.team__label {
font-weight: 500;
opacity: 0.7;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
}
@media (max-width: 700px) {
.team__layout { grid-template-columns: 1fr; }
.team__list { overflow-y: visible; }
.team__preview { position: static; }
.team__topbar-title { flex: 1 1 100%; white-space: normal; }
}
.team__value {
font-weight: 500;
word-break: break-word;
}
.team__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.button {
display: inline-block;
padding: 0.6rem 1.2rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: var(--fg-color);
font: inherit;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
}
.button:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.button--secondary {
background: rgba(255, 255, 255, 0.08);
/* currentColor (= --fg-color) so the outline stays visible on the light-grey
new-game screens too, where a translucent-white border vanished. */
border-color: currentColor;
}
.button--secondary:hover {
background: rgba(255, 255, 255, 0.12);
}
/* --- Stylish dropdown (shared