/* fuelcalc.css Page-specific styles for the SimracerHQ fuel calculator. Requires theme.css to be loaded first. Recommended HTML: ... shared header ...

...

... shared footer ... */ .fuel-page { --fuel-panel: rgba(15, 15, 15, 0.96); --fuel-panel-soft: rgba(255, 255, 255, 0.03); --fuel-border: rgba(255, 255, 255, 0.08); --fuel-border-strong: rgba(204, 255, 0, 0.25); --fuel-danger: #ff3d6e; --fuel-warning-bg: rgba(255, 61, 110, 0.12); --fuel-warning-border: rgba(255, 61, 110, 0.4); --fuel-glow-green: 0 0 14px rgba(204, 255, 0, 0.35); --fuel-glow-pink: 0 0 14px rgba(255, 0, 102, 0.3); --fuel-glow-gold: 0 0 18px rgba(220, 179, 96, 0.28); } /* Page intro */ .fuel-page .sub { max-width: 900px; padding: 2rem 3rem 0; color: var(--text-muted); line-height: 1.6; } .fuel-page .sub::before { content: "FUEL AND PIT CALCULATOR"; display: block; margin-bottom: 0.8rem; color: var(--neon-pink); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; } .fuel-page .sub strong, .fuel-page .sub b { color: var(--neon-green); } /* Calculator layout */ .fuel-page .grid { display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 3rem; } /* Override the generic theme card only inside the fuel page */ .fuel-page .card { padding: 0; overflow: hidden; border-top-color: var(--neon-green); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), var(--fuel-panel); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .fuel-page .card h1, .fuel-page .card h2 { margin: 0; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--fuel-border); background: linear-gradient(90deg, rgba(220,179,96,0.14), rgba(204,255,0,0.07), transparent); color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .fuel-page .body { padding: 1.5rem; } .fuel-page .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } /* Forms */ .fuel-page .field { margin-bottom: 1rem; } .fuel-page label { display: block; margin-bottom: 0.45rem; color: var(--text-main); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .fuel-page input, .fuel-page select { width: 100%; padding: 0.85rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; outline: none; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)), #0b0b0b; color: var(--text-main); font: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .fuel-page input::placeholder { color: rgba(255, 255, 255, 0.38); } .fuel-page input:focus, .fuel-page select:focus { border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(204, 255, 0, 0.12), var(--fuel-glow-green); } .fuel-page .section-title { margin: 1.5rem 0 0.9rem; padding-top: 1.2rem; border-top: 1px solid var(--fuel-border); color: var(--gold); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* Summary metrics */ .fuel-page .summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .fuel-page .metric { padding: 1rem 0.8rem; border: 1px solid var(--fuel-border); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), #090909; text-align: center; } .fuel-page .metric .label { margin-bottom: 0.55rem; color: var(--text-muted); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .fuel-page .metric .value { color: var(--gold); font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1; text-shadow: var(--fuel-glow-gold); } .fuel-page .metric.bad { border-color: rgba(255, 61, 110, 0.55); box-shadow: 0 0 18px rgba(255, 61, 110, 0.15); } /* Strategy banner */ .fuel-page .strategy-banner { position: relative; display: flex; align-items: center; min-height: 96px; margin-bottom: 1.25rem; padding: 1.4rem 1.8rem; overflow: hidden; border: 1px solid rgba(220, 179, 96, 0.35); border-radius: 8px; background: linear-gradient(135deg, rgba(204,255,0,0.16), rgba(0,0,0,0.88) 48%, rgba(255,0,102,0.16)); color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--fuel-glow-green), var(--fuel-glow-pink); } .fuel-page .strategy-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 10px); opacity: 0.35; } .fuel-page .strategy-banner.staggered { border-color: rgba(255, 0, 102, 0.4); } /* Table */ .fuel-page table { width: 100%; border: 1px solid var(--fuel-border); border-collapse: collapse; border-radius: 8px; overflow: hidden; background: #080808; } .fuel-page th, .fuel-page td { padding: 0.85rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: center; } .fuel-page th { background: linear-gradient(180deg, rgba(220,179,96,0.12), rgba(255,255,255,0.02)); color: var(--gold); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .fuel-page td { color: var(--text-main); font-size: 0.92rem; font-weight: 600; } .fuel-page tr:last-child td { border-bottom: 0; } .fuel-page tr:hover td { background: rgba(204, 255, 0, 0.03); } /* Status styles used by fuel.js */ .fuel-page .negative { background: rgba(255, 61, 110, 0.22) !important; color: #fff !important; } .fuel-page .dropamount { color: var(--neon-green); font-weight: 700; text-shadow: var(--fuel-glow-green); } .fuel-page .dropamount.bad { color: var(--fuel-danger); text-shadow: none; } .fuel-page .tag { display: inline-block; padding: 0.35rem 0.6rem; border: 1px solid var(--fuel-border); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-main); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .fuel-page .tag.sc { border-color: rgba(255, 0, 102, 0.35); background: rgba(255, 0, 102, 0.16); color: #ffd8eb; } .fuel-page .note { margin-top: 1.1rem; padding: 1rem 1.1rem; border-left: 3px solid var(--neon-green); border-radius: 6px; background: var(--fuel-panel-soft); color: var(--text-muted); line-height: 1.65; } .fuel-page .errors { display: none; margin-bottom: 1.1rem; padding: 0.9rem 1rem; border: 1px solid var(--fuel-warning-border); border-radius: 6px; background: var(--fuel-warning-bg); color: #ffd2dc; font-weight: 700; line-height: 1.5; } /* Responsive */ @media (max-width: 1100px) { .fuel-page .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { .fuel-page .grid { grid-template-columns: 1fr; padding: 2rem 1.25rem; } .fuel-page .sub { padding: 2rem 1.25rem 0; } } @media (max-width: 640px) { .fuel-page .row, .fuel-page .summary { grid-template-columns: 1fr; } .fuel-page .body { padding: 1rem; } .fuel-page .strategy-banner { min-height: auto; padding: 1.1rem; font-size: 1.05rem; } .fuel-page table { display: block; overflow-x: auto; white-space: nowrap; } }