minerva-lite / static /styles.css
Yujie Chen
Initial commit for Hugging Face Space
45f12d7
:root{
--brand:#b70000;
--brand-dark:#7a0000;
--bg:#f1f3f8;
--text:#1d1d1f;
--muted:#4e5a6b;
--border:#d4d8e0;
--surface:#fff;
--accent:#0d4f9a;
--notice-bg:#fff7c2;
--nav:#0c2340;
}
*{box-sizing:border-box}
body{
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
margin:0;
color:var(--text);
background:var(--bg);
}
.minerva-skin{
min-height:100vh;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,#e7ebf5 0%,#f7f8fb 160%);
}
.container{
max-width:1280px;
width:92vw;
margin:0 auto;
padding:0 18px;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0;
}
.minerva-header{
box-shadow:0 2px 6px rgba(12,19,31,.2);
background:#dcdfe6;
}
.hero-strip{
background:linear-gradient(135deg,#cfd4de 10%,#edf0f6 60%);
border-bottom:2px solid #b8bec8;
}
.hero-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:90px;
padding:.85rem 16px;
gap:1.5rem;
}
.hero-brand{display:flex;align-items:center;gap:1rem}
.hero-logo{
background:#c02827;
color:#fff;
font-weight:600;
font-size:1.1rem;
padding:.5rem 1.1rem;
border-radius:6px;
text-transform:uppercase;
letter-spacing:.05em;
box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.hero-wordmark-main{
font-size:1.8rem;
color:#1e1e1e;
font-weight:600;
}
.hero-wordmark-sub{
font-size:.8rem;
text-transform:uppercase;
letter-spacing:.08em;
color:#4b4f5a;
}
.hero-figure{
flex:0 0 180px;
height:90px;
background:linear-gradient(120deg,#920707,#f8c4c4);
border-radius:999px 0 0 999px;
box-shadow:inset 0 0 25px rgba(0,0,0,.2);
}
.tab-row{
background:linear-gradient(180deg,#f5f6fb 0%,#e1e6f0 100%);
border-bottom:1px solid #c2c7d3;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
padding-bottom:.5rem;
margin-bottom:1.5rem;
}
.tab-nav{
display:flex;
align-items:center;
justify-content:center;
padding:0 16px;
}
.tab-links{
display:flex;
gap:.25rem;
flex-wrap:wrap;
justify-content:center;
}
.tab-links a{
min-width:150px;
text-align:center;
padding:.6rem 0;
text-transform:uppercase;
font-weight:600;
font-size:.85rem;
letter-spacing:.05em;
color:#1f2a44;
text-decoration:none;
border:1px solid #cfd5e2;
border-bottom:3px solid transparent;
border-top-left-radius:6px;
border-top-right-radius:6px;
background:linear-gradient(180deg,#fcfcff 0%,#eef1f6 100%);
box-shadow:0 1px 1px rgba(14,23,39,.08);
transition:all .2s ease;
}
.tab-links a:hover{
color:#b00000;
border-bottom-color:#b00000;
}
.tab-links a.is-active{
color:#960000;
background:#fff;
border-color:#b00000;
border-bottom-color:#fff;
box-shadow:0 4px 10px rgba(13,25,44,.12);
}
main{
padding:2rem 0;
flex:1;
}
.page{
background:var(--surface);
border:1px solid var(--border);
border-top:4px solid #f4c542;
box-shadow:0 8px 20px rgba(12,19,31,.12);
margin-top:-20px;
padding:2.25rem 1.5rem;
}
.page-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-bottom:1.5rem;
flex-wrap:wrap;
}
.page-heading h1{margin:0;color:#a10f0f}
.term-chip{
border:1px solid #d2d7e5;
background:#f4f5fb;
padding:.35rem .85rem;
border-radius:999px;
font-size:.85rem;
font-weight:600;
color:#1c2750;
text-transform:uppercase;
letter-spacing:.04em;
}
.term-footer{
background:#e0e4f0;
border-top:1px solid #c3c8d5;
margin-top:auto;
}
.term-footer-inner{
display:flex;
justify-content:center;
gap:.6rem;
font-size:.85rem;
padding:.65rem 16px;
color:#1f2a44;
flex-wrap:wrap;
}
.term-footer-inner a{
color:#940b0b;
font-weight:600;
text-decoration:none;
}
.term-footer-inner a:hover{text-decoration:underline}
.page-lead{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.page-title{margin:0;color:#a10f0f;font-size:1.8rem;font-weight:700}
.term-gate{
border:1px solid var(--border);
background:#fff;
padding:2rem;
box-shadow:0 8px 20px rgba(15,23,38,.08);
}
.term-gate h1{margin-top:0;color:#a10f0f}
.term-gate-form{
display:flex;
flex-direction:column;
gap:1rem;
max-width:320px;
margin-top:1rem;
}
.highlight-panel{
border:1px solid var(--border);
padding:1rem;
border-radius:4px;
display:flex;
gap:1rem;
align-items:center;
font-size:.95rem;
line-height:1.5;
}
.highlight-blue{background:#e4f1ff;border-color:#b4d4fa}
.highlight-yellow{background:#fff8d9;border-color:#f3d98c}
.highlight-link{
color:#0c3f91;
font-weight:700;
text-decoration:none;
}
.highlight-link:hover{text-decoration:underline}
.content-panel{
border:1px solid var(--border);
padding:1.5rem;
margin-bottom:2rem;
background:#fff;
}
.guidance p{margin-top:0;margin-bottom:1rem;line-height:1.6}
.guidance a{color:#0d4f9a}
.inline-callout{
background:#fff3a6;
border-left:4px solid #f5c400;
padding:.75rem 1rem;
font-weight:600;
}
.step-grid{
display:flex;
flex-direction:column;
gap:1.2rem;
margin-bottom:2rem;
}
.step-card{
border:1px solid #cfd6e4;
background:#fdfdff;
padding:1.25rem;
box-shadow:0 2px 6px rgba(15,33,55,.08);
display:flex;
flex-direction:column;
gap:.75rem;
}
.step-card header{display:flex;gap:.8rem;align-items:center}
.step-number{
background:#f4c542;
color:#381d00;
font-weight:700;
min-width:54px;
text-align:center;
border-radius:999px;
padding:.3rem 0;
}
.step-card h2{
margin:0;
font-size:1.05rem;
color:#092352;
}
.step-card p{margin:0;line-height:1.45;font-size:.92rem;color:#2f3847}
.step-link{
margin-top:auto;
font-weight:600;
color:var(--accent);
text-decoration:none;
}
.step-link:hover{text-decoration:underline}
.support h3{margin-top:0;color:#0c2340}
.notice{background:var(--notice-bg);border:1px solid var(--border);padding:.6rem .8rem;border-radius:4px}
.muted{color:var(--muted)}
/* Forms */
label{font-size:.9rem;color:var(--muted);display:flex;flex-direction:column;gap:.25rem}
input[type=text], select{
border:1px solid var(--border);
padding:.45rem .5rem;border-radius:6px;background:var(--surface);
}
.form-grid{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin:.75rem 0 1rem}
.btn{border:1px solid var(--border);border-radius:6px;padding:.45rem .7rem;cursor:pointer;background:#fff}
.btn:hover{filter:brightness(0.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-danger{background:#a61b1b;border-color:#a61b1b;color:#fff}
/* Tables */
table{border-collapse:collapse;width:100%;background:var(--surface);border:1px solid var(--border)}
thead th{background:#f1f3f5;color:#111;text-align:left}
th,td{padding:.55rem .6rem;border-bottom:1px solid var(--border)}
tbody tr:nth-child(even){background:#fafbfc}
tbody tr:hover{background:#f5f7fb}
.seat-pill{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.78rem;border:1px solid var(--border)}
.seat-pill.open{background:#e8fff1;border-color:#a7e4bf;color:#186a3b}
.seat-pill.full{background:#ffe8e8;border-color:#f1b3b3;color:#7d1b1b}
/* Weekly schedule */
.week-grid{
display:grid;
grid-template-columns:80px 1fr;
gap:12px;
width:100%;
}
/* Left time rail: 10 rows (08:00–18:00) each 80px tall */
.times{display:grid;grid-template-rows:repeat(10,80px);padding-top:48px}
.time{font-size:.85rem;color:var(--muted);display:flex;align-items:center;justify-content:center}
.days{display:grid;grid-template-rows:48px 800px}
.days>.hdr{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:center}
.days>.hdr>div{font-weight:600;color:#111;display:flex;align-items:center;justify-content:center;height:48px}
.grid-body{position:relative;border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden}
.grid-body{display:grid;grid-template-columns:repeat(5,1fr)}
.grid-body>.col{position:relative}
.grid-body>.col:not(:last-child){border-right:1px solid #e7edf5}
.grid-body::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom, transparent 95%, #eef2f7 96%);background-size:100% 80px;pointer-events:none}
.grid-body{height:800px}
.event{position:absolute;left:0;right:0;margin:0 8px;border-radius:8px;padding:.3rem .4rem;background:#eef5ff;border:1px solid #cfe0ff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.event-title{font-size:.85rem;font-weight:600;line-height:1.1}
.event-sub{font-size:.78rem;color:var(--muted);line-height:1.1}
.event-time{font-size:.78rem;line-height:1.1}
.event-title,.event-sub,.event-time{overflow-wrap:anywhere}
/* Responsive adjustments */
@media (max-width: 1100px){
.container{
width:100%;
max-width:1100px;
padding:0 14px;
}
.hero-figure{flex:0 0 120px;height:70px}
}
@media (max-width: 900px){
.hero-inner{flex-direction:column;align-items:flex-start;text-align:left}
.hero-brand{flex-wrap:wrap}
.hero-figure{display:none}
.tab-nav{justify-content:flex-start}
.tab-links{
flex-wrap:nowrap;
overflow-x:auto;
justify-content:flex-start;
padding-bottom:.5rem;
}
.tab-links a{min-width:140px;font-size:.78rem}
.side-panel{flex-direction:row;flex-wrap:wrap;max-width:none}
.callout{flex:1 1 240px}
.highlight-panel{flex:1 1 260px}
}
@media (max-width: 700px){
.container{padding:0 12px}
.hero-wordmark-main{font-size:1.4rem}
.hero-wordmark-sub{font-size:.7rem}
.hero-logo{font-size:1rem}
.form-grid{flex-direction:column;align-items:stretch}
table{display:block;overflow-x:auto}
thead,tbody,tr,th,td{white-space:nowrap}
.step-card{padding:1rem}
.callout{flex-direction:column;align-items:flex-start}
.term-footer-inner{flex-direction:column;gap:.4rem;text-align:center}
}
@media (max-width: 520px){
.hero-brand{align-items:flex-start}
.tab-links a{min-width:120px;padding:.5rem .3rem}
.week-grid{grid-template-columns:1fr}
.times{display:none}
.grid-body{grid-template-columns:repeat(5, minmax(120px,1fr));overflow-x:auto}
.grid-body>.col:not(:last-child){border-right:1px solid #e7edf5}
}