/* Styles for the personal start page (index.html + app.js). Layout notes: - Light and dark are driven entirely by CSS custom properties, swapped by a data-theme attribute on (set by app.js / the inline script). Every color below is a var(), never a literal. - --cell / --gap / --cols size the grid squares. app.js overrides them inline on desktop to make the continuous grid fill the viewport; the media queries near the bottom are the small-screen fallback. Sections below are marked with block comments. */ :root { --accent: #005588; /* SLUH Blue */ --accent-rgb: 0, 85, 136; --cell: 16px; --gap: 3px; } :root, [data-theme="dark"] { --bg: #0b0b0d; --panel: #17181c; --border: #232429; --track: #1c1d21; --text: #e7e7ea; --text-dim: #6c6d74; --done: #35363d; --today-upcoming: #1e1f24; --overlay-bg: rgba(0, 0, 0, 0.55); color-scheme: dark; } /* SLUH brand palette: Navy #003366 (anchor -> text), Blue #005588 (accent), Spirit Blue #88ccec, Dark Gray #777777, Light Gray #eeeeee, Warm Gray #ccccbb */ [data-theme="light"] { --bg: #ffffff; --panel: #ffffff; --border: #dcdcd6; --track: #eeeeee; --text: #003366; --text-dim: #777777; --done: #ccccbb; --today-upcoming: #eeeeee; --overlay-bg: rgba(0, 51, 102, 0.35); color-scheme: light; } * { box-sizing: border-box; } html { /* keep the scrollbar gutter reserved always, so switching to a tab with less content (and no scrollbar) doesn't shift the whole centered layout sideways */ overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 0 1.5rem 2.5rem; } .topbar { position: sticky; top: 0; z-index: 5; max-width: 720px; margin: 0 auto; padding: 1rem 0 0.5rem; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text); } .header-controls { display: flex; gap: 0.5rem; } .icon-btn { appearance: none; background: none; border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.85rem; cursor: pointer; line-height: 1; } .icon-btn:hover { color: var(--text); border-color: var(--text-dim); } #settings-btn { font-size: 1.15rem; } /* --- tabs --- */ .tabs { max-width: 720px; margin: 0 auto; padding: 0.6rem 0 0; display: flex; gap: 1.1rem; border-bottom: 1px solid var(--border); } .tab { appearance: none; background: none; border: none; padding: 0 0 0.5rem; margin-bottom: -1px; color: var(--text-dim); font-size: 0.82rem; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--accent); } /* --- debug bar --- */ .debug-bar { max-width: 720px; margin: 0 auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; font-size: 0.68rem; color: var(--text-dim); } .debug-bar[hidden] { display: none; } .debug-label { display: flex; align-items: center; gap: 0.4rem; } .debug-input { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; color: var(--text-dim); font-size: 0.68rem; font-family: inherit; padding: 0.15rem 0.35rem; } .ghost-btn { appearance: none; background: none; border: 1px solid var(--border); border-radius: 5px; padding: 0.2rem 0.55rem; color: var(--text-dim); font-size: 0.72rem; font-family: inherit; cursor: pointer; } .ghost-btn:hover { color: var(--text); border-color: var(--text-dim); } main { max-width: 720px; margin: 0 auto; } .tab-panel[hidden] { display: none; } /* --- progress tab --- */ .progress-list { display: flex; flex-direction: column; max-width: 420px; margin: 0 auto; gap: 0.9rem; padding: 1rem 0 2rem; } .bar-row .bar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.35rem; } .bar-label { font-size: 0.85rem; color: var(--text); } .bar-pct { font-size: 0.85rem; color: var(--accent); font-variant-numeric: tabular-nums; } .bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; } .bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent); border-radius: 999px; } .bar-sub { margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .is-celebrating .bar-fill { background: linear-gradient(90deg, #f59e0b, #fb7185, #a78bfa, #34d399); background-size: 300% 100%; animation: celebrate-shift 3s ease infinite; } .is-celebrating .bar-pct { color: #f59e0b; } @keyframes celebrate-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bar-row.is-live .bar-fill { background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.5), var(--accent)); background-size: 300% 100%; animation: current-period-shift 4s ease infinite; } .bar-row.is-live .bar-label { color: var(--accent); font-weight: 700; } @keyframes current-period-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bar-wave-toggle { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.4rem; } .bar-wave-label { font-size: 0.68rem; color: var(--text-dim); } .wave-pill { appearance: none; background: var(--track); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.6rem; color: var(--text-dim); font-size: 0.68rem; font-family: inherit; cursor: pointer; } .wave-pill.active { color: var(--text); border-color: var(--accent); } /* --- confetti (a period just finished) --- */ .confetti-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 200; } .confetti-piece { position: absolute; top: -12px; width: 8px; height: 14px; opacity: 0.9; animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--drift), 105vh) rotate(var(--rot)); opacity: 0.7; } } /* --- current period (solo) tab --- */ .current-solo { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 6rem); padding: 1rem 0 2rem; } .current-solo .bar-row { width: 100%; max-width: 420px; } .current-solo .bar-label { font-size: 1.3rem; } .current-solo .bar-pct { font-size: 1.3rem; } .current-solo .bar-track { height: 22px; } .current-solo .bar-sub { margin-top: 0.6rem; font-size: 1rem; } .current-solo .bar-wave-label { font-size: 0.85rem; } .current-solo .wave-pill { font-size: 0.85rem; padding: 0.2rem 0.9rem; } /* --- dashboard tab (big 16:9 screen) --- */ .dashboard { display: flex; flex-direction: column; gap: 2.5rem; padding: 1.5rem 0 2rem; max-width: 1100px; margin: 0 auto; } .dashboard-daily { text-align: center; } .daily-bar-wrap { position: relative; } .daily-bar { display: grid; gap: 6px; height: 200px; } .daily-segment { position: relative; display: flex; align-items: flex-end; justify-content: center; background: var(--track); border: 2px solid var(--border); border-radius: 10px; overflow: hidden; } .daily-segment.is-live { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); } .daily-segment-fill { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; background: var(--done); } .daily-segment.is-live .daily-segment-fill { background: var(--accent); } .daily-segment-label { position: relative; z-index: 1; padding-bottom: 0.6rem; font-size: 1.8rem; font-weight: 700; color: var(--text); } .daily-gap { background: transparent; } .daily-now-marker { position: absolute; top: -10px; bottom: -10px; width: 3px; background: var(--accent); border-radius: 999px; } .daily-status { margin-top: 1.5rem; font-size: 2rem; color: var(--text-dim); } .daily-countdown { margin-top: 1.5rem; } .daily-countdown-label { font-size: 1.3rem; color: var(--text-dim); } .daily-countdown-clock { font-size: 5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.15; } .daily-countdown-sub { font-size: 1.1rem; color: var(--text-dim); } .dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .dashboard-stats .bar-label { font-size: 1.1rem; } .dashboard-stats .bar-pct { font-size: 1.1rem; } .dashboard-stats .bar-track { height: 14px; } .dashboard-stats .bar-sub { font-size: 0.9rem; margin-top: 0.5rem; } @media (max-width: 900px) { .dashboard-stats { grid-template-columns: 1fr; } .daily-bar { height: 140px; } .daily-segment-label { font-size: 1.3rem; } .daily-countdown-clock { font-size: 3.5rem; } } /* --- grid (continuous + weekly) --- */ .grid { padding-top: 1rem; } .grid.mode-continuous { display: grid; grid-template-columns: repeat(var(--cols, auto-fill), var(--cell)); justify-content: center; gap: 0; } .grid.mode-weekly { display: flex; flex-direction: column; gap: calc(var(--gap) * 3); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .grid.mode-weekly::-webkit-scrollbar { display: none; } .week-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--gap) * 2); } .day-content { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--gap); width: fit-content; /* Never let a day's squares reach the column edge: at certain grid-cell sizes a 5-period day fills the column to within ~1px, and fractional browser zoom then rounds the last square past the edge instead of wrapping it. The few px of slack keep the wrap decision stable. */ max-width: calc(100% - 3px); padding-bottom: 3px; } .day-content.is-today-window { box-shadow: inset 0 -2px 0 var(--accent); } .no-school-slot { width: 100%; height: var(--cell); cursor: default; border: 1px solid transparent; border-radius: 3px; } .no-school-slot.is-active { border-color: var(--accent); } @media (max-width: 640px) { :root { --cell: 12px; --gap: 2px; } } @media (max-width: 420px) { :root { --cell: 9px; --gap: 2px; } } .period { position: relative; width: var(--cell); height: var(--cell); border-radius: 3px; border: 1px solid var(--border); background: transparent; overflow: hidden; flex: 0 0 auto; cursor: default; } .period.is-filtered { display: none; } .period-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: var(--done); z-index: 0; } .period.is-live { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); } .period.is-live .period-fill { background: var(--accent); } .period.is-today-upcoming { background: var(--today-upcoming); } .period .letter { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 600; color: transparent; transition: color 0.1s ease; pointer-events: none; } .period.is-group-hover { border-color: rgba(var(--accent-rgb), 0.35); } .period.is-group-hover .letter { color: var(--text-dim); } .period:hover { border-color: var(--accent); } .period:hover .letter { color: var(--accent); } .semester-divider { grid-column: 1 / -1; height: 0; border-top: 1px solid var(--border); margin: 1.4rem 0; } .grid.mode-weekly .semester-divider { margin: 0.3rem 0 0.7rem; } /* --- hover info panel --- */ .info-panel { position: fixed; z-index: 50; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; font-size: 0.72rem; line-height: 1.55; color: var(--text-dim); min-width: 220px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .info-panel[hidden] { display: none; } .info-date { color: var(--text); font-weight: 600; margin-bottom: 0.15rem; } .info-period { color: var(--text); margin-bottom: 0.4rem; } .info-period .info-cycle { color: var(--text-dim); font-weight: 400; } .info-row { display: flex; justify-content: space-between; gap: 1.2rem; } .info-row + .info-row { margin-top: 0.1rem; } .info-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; } /* --- settings / help overlay --- */ .overlay { position: fixed; inset: 0; z-index: 100; background: var(--overlay-bg); display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem; overflow-y: auto; } .overlay[hidden] { display: none; } .panel { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem 1.2rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .panel[hidden] { display: none; } .panel-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.9rem; } .panel-section { margin-top: 1.1rem; } .panel-section:first-of-type { margin-top: 0; } .panel-label { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; } .panel-label label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--text-dim); } .panel-label input[type="checkbox"] { accent-color: var(--accent); } .panel-hint { font-size: 0.68rem; line-height: 1.5; color: var(--text-dim); margin-bottom: 0.5rem; } .theme-row { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; } .mode-btn { appearance: none; flex: 1; background: var(--track); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0; color: var(--text-dim); font-size: 0.78rem; font-family: inherit; cursor: pointer; } .mode-btn.active { color: var(--text); border-color: var(--accent); } .accent-row { display: flex; gap: 0.55rem; } .accent-dot { appearance: none; width: 22px; height: 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; } .accent-dot.active { border-color: var(--text); } .letter-row { display: flex; gap: 0.4rem; flex-wrap: wrap; } .letter-chip { appearance: none; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--track); color: var(--text-dim); font-size: 0.78rem; font-family: inherit; cursor: pointer; } .letter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } .help-body { font-size: 0.8rem; line-height: 1.6; color: var(--text-dim); } .help-body p { margin: 0 0 0.8rem; } .help-body p:last-child { margin-bottom: 0; } .help-body strong { color: var(--text); } .help-body code { background: var(--track); border-radius: 3px; padding: 0.05rem 0.3rem; font-size: 0.75rem; color: var(--text); } /* --- footer (quiet feature-request / bug link) --- */ .site-footer { max-width: 720px; margin: 3rem auto 0; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center; } .site-footer a { color: var(--text-dim); font-size: 0.7rem; text-decoration: none; } .site-footer a:hover { color: var(--text); text-decoration: underline; }