brewpi/web/style.css

:root {
    --bg:          #121212;
    --surface:     #1e1e1e;
    --surface-2:   #2a2a2a;
    --border:      #383838;
    --text:        #e0e0e0;
    --text-muted:  #9e9e9e;
    --accent:      #ff7043;
    --green:       #4caf50;
    --green-dim:   #1b5e20;
    --orange:      #ffa726;
    --orange-dim:  #6d3b00;
    --red:         #f44336;
    --led-off:     #444444;
    --led-green:       var(--green);
    --led-green-dim:   var(--green-dim);
    --led-orange:      var(--orange);
    --led-orange-dim:  var(--orange-dim);
}

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

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 0.5em 1em 4em 1em;
    background: var(--bg);
    color: var(--text);
}

/* --- Inputs & buttons --- */

input[type="text"],
input[type="number"] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 0.3em 0.5em;
}
input[type="text"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

button {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    padding: 0.3em 0.8em;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
button:hover:not(:disabled) {
    background: #333;
    border-color: #555;
}
button:disabled { opacity: 0.4; cursor: default; }

/* --- Header --- */

header#connection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--border);
}

.status-connected    { color: var(--green); font-weight: bold; }
.status-disconnected { color: var(--text-muted); }

/* --- Sud controls section --- */

#sud-controls {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding-left: 1em;
    border-left: 1px solid var(--border);
}

/* --- Transport buttons (circular, coloured) --- */

.transport-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.transport-btn:not(:disabled):hover {
    filter: brightness(1.25);
    box-shadow: 0 0 10px rgba(255,255,255,0.18);
}
.transport-btn:disabled { opacity: 0.35; cursor: default; }

.transport-start { background: var(--green);  color: #fff; }
.transport-pause { background: var(--orange); color: #fff; }
.transport-stop  { background: var(--red);    color: #fff; }

/* --- LCD panel --- */

#lcd-panel {
    display: grid;
    grid-template-columns: 11em 6em 6em;
    gap: 0.25em 1em;
    max-width: 32em;
}
.lcd-row    { display: contents; }
.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
.lcd-label  { color: var(--text-muted); font-size: 0.9em; align-self: center; }
.lcd {
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 1.1em;
    background: #091209;
    border: 1px solid #2a6e2a;
    padding: 0.15em 0.4em;
    text-align: right;
    color: #7dfa7d;
    text-shadow: 0 0 6px rgba(100,255,100,0.45);
    border-radius: 3px;
}

/* --- LCD + pot row --- */

#lcd-pot-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5em;
    margin: 1em 0;
    font-size: 2em;
}

/* --- Pot visualization --- */

#pot-view {
    flex-shrink: 0;
}
#pot-svg {
    width: 288px;
    height: auto;
    display: block;
}

/* Stirrer animation */
@keyframes stir-rotate {
    to { transform: rotate(360deg); }
}
#stirrer-blades {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: stir-rotate var(--stir-duration, 1s) linear infinite paused;
}
#stirrer-blades.spinning {
    animation-play-state: running;
}

/* Fire animations */
@keyframes flicker-1 {
  0%, 100% { transform: scaleY(1.00) scaleX(1.00); }
  25%       { transform: scaleY(1.09) scaleX(0.93); }
  50%       { transform: scaleY(0.93) scaleX(1.06); }
  75%       { transform: scaleY(1.06) scaleX(0.96); }
}
@keyframes flicker-2 {
  0%, 100% { transform: scaleY(0.95) scaleX(1.04); }
  30%       { transform: scaleY(1.10) scaleX(0.92); }
  65%       { transform: scaleY(0.91) scaleX(1.07); }
}
@keyframes flicker-3 {
  0%, 100% { transform: scaleY(1.05) scaleX(0.95); }
  40%       { transform: scaleY(0.89) scaleX(1.08); }
  70%       { transform: scaleY(1.12) scaleX(0.91); }
}

.flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
#flame-outer { animation: flicker-1 0.70s ease-in-out infinite; }
#flame-mid   { animation: flicker-2 0.55s ease-in-out infinite 0.08s; }
#flame-inner { animation: flicker-3 0.45s ease-in-out infinite 0.15s; }

#fire-group {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    opacity: 0;
    transition: opacity 0.4s;
}

/* --- Tabs --- */

nav#tabs {
    margin-top: 1em;
    border-bottom: 1px solid var(--border);
}
.tab-btn {
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--text-muted);
    padding: 0.4em 1.1em;
    cursor: pointer;
    position: relative;
    top: 1px;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s;
}
.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
.tab-btn.active {
    background: var(--surface);
    color: var(--text);
    font-weight: bold;
    border-color: var(--border);
    border-bottom: 1px solid var(--surface);
}

.tab-content        { display: none; padding: 1em 0; }
.tab-content.active { display: block; }

/* --- Manual tab panels --- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.8em 1.1em;
    margin-bottom: 0.8em;
    max-width: 30em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.panel h3 {
    margin: 0 0 0.5em 0;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35em;
}
.panel label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0.4em 0;
}
.panel input[type="range"]    { flex: 1; accent-color: var(--accent); }
.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.panel input[type="number"]   { width: 6em; }

#pot-reset-row { display: flex; align-items: center; gap: 0.6em; margin: 0.4em 0; }

/* --- Hidden --- */
.hidden { display: none !important; }

/* --- Progress tab: step plates --- */

#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }

.step-plate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.55em 0.9em;
    display: grid;
    grid-template-columns: 1.4em 1fr auto;
    gap: 0.2em 0.6em;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.step-plate .led {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--led-off);
    border: 1px solid #555;
}
.step-plate .title {
    font-weight: bold;
    grid-column: 2;
}
.step-plate .remaining {
    font-weight: bold;
    text-align: right;
    font-family: 'Courier New', monospace;
    color: var(--accent);
}
.step-plate .field {
    color: var(--text-muted);
    font-size: 0.88em;
}
.step-plate .span2 { grid-column: span 2; }

/* --- Message dialog --- */

#sud-message-dialog {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2em 1.6em;
    max-width: 24em;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
#sud-message-dialog::backdrop { background: rgba(0,0,0,0.65); }
#sud-message-dialog form { margin-top: 1em; text-align: right; }

/* --- Footer --- */

footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.35em 1em;
    display: flex;
    justify-content: space-between;
    font-size: 0.82em;
    color: var(--text-muted);
}