home-display/index.css

:root{
  --bg: #0b0f16;
  --border: rgba(255,255,255,.1);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --accent: #4cc9f0;
  --accent-2: #a78bfa;

  --outer-pad: 16px;
  --gap: 14px;
  --radius: 18px;
  --radius-sm: 12px;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;

  --time-size: clamp(40px, 2.55vh, 62px);
  --date-size: clamp(16px, 1.25vh, 22px);
  --h2-size: clamp(15px, 1.05vh, 19px);
  --cond-size: clamp(16px, 1.25vh, 21px);
  --info-size: clamp(12px, 1vh, 17px);

  --table-head: clamp(12px, 1vh, 15px);
  --table-cell: clamp(12px, 1.05vh, 16px);
}

*{box-sizing:border-box}
html,body{height:100%;width:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%,rgba(76,201,240,.12),transparent 60%),
    radial-gradient(900px 500px at 85% 20%,rgba(167,139,250,.1),transparent 55%),
    radial-gradient(800px 600px at 50% 100%,rgba(255,255,255,.06),transparent 55%),
    var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision
}

.grid{
  height:100vh;
  width:100vw;
  padding:var(--outer-pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap);
  filter:brightness(.98)
}
.grid>*{min-width:0;min-height:0}

.topLeft,.topRight,.bottomLeft,.bottomRight{
  position:relative;
  min-width:0;
  min-height:0;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#ffffff0f,#ffffff08);
  border:1px solid var(--border);
  box-shadow:0 10px 30px #00000059,inset 0 1px #ffffff0f;
  overflow:hidden
}

/* -------- Top Left -------- */
.topLeft{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:12px;
  gap:10px
}

.dateTime{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:#00000038;
  border:1px solid rgba(255,255,255,.08)
}

#date{
  margin:0;
  font-size:var(--date-size);
  letter-spacing:.35px;
  color:var(--muted)
}

#time{
  margin:0;
  font-size:var(--time-size);
  font-weight:760;
  letter-spacing:.8px;
  line-height:1.02;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.weather{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex
}

.weatherBlock{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  padding:10px;
  border-radius:var(--radius-sm);
  background:radial-gradient(600px 240px at 20% 10%,rgba(76,201,240,.1),transparent 60%),#0000002e;
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:8px
}

.weatherBlock h2:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px #4cc9f059
}

.condition{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  background:#ffffff0a;
  border:1px solid rgba(255,255,255,.06);
  min-width:0
}

.condition img{
  width:clamp(34px,2.2vh,48px);
  height:clamp(34px,2.2vh,48px);
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  flex:0 0 auto
}

.conditionText{
  margin:0;
  font-size:var(--cond-size);
  font-weight:700;
  letter-spacing:.15px;
  color:var(--text);
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.10
}

/* FIX 1: make weatherInfo a strict 2x2 grid so the last two rows can't get clipped */
.weatherInfo{
  min-width:0;
  min-height:50px;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:6px 8px;

  align-content:stretch;
  align-items:stretch;
}

.weatherInfo p{
  margin:0;
  padding:6px 9px;             /* slightly tighter */
  border-radius:14px;
  background:#ffffff09;
  border:1px solid rgba(255,255,255,.06);
  font-size:var(--info-size);
  line-height:1.00;            /* tighter to stop bottom clipping */
  color:var(--muted);

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-width:0;
  min-height:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

#temp,#feels,#wind,#humidity{color:var(--text);font-weight:650}

/* -------- Top Right (Radar) -------- */
.topRight{
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(800px 520px at 70% 10%,rgba(167,139,250,.09),transparent 55%),#0000001a
}

/* FIX 2: slight zoom, clip a bit top/bottom */
#radar{
  width:100%;
  height:100%;

  object-fit:scale-down;             /* crop instead of letterbox */
  object-position:center 55%;   /* trims a touch more top/bottom */
  transform:scale(1.5);        /* very slight zoom */
  transform-origin:center;

  border-radius:calc(var(--radius) - 6px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 40px #00000073;
  background:#00000038;
  display:block
}

.topRight:after{
  content:"Radar";
  position:absolute;
  top:12px;
  left:14px;
  padding:6px 10px;
  font-size:14px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#ffffffb8;
  background:#0006;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px
}

/* -------- Bottom Left (Forecast) -------- */
.bottomLeft{padding:12px;display:flex;min-width:0;min-height:0}

table{
  width:100%;
  height:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:calc(var(--radius) - 6px);
  background:#0000002e;
  border:1px solid rgba(255,255,255,.08);
  table-layout:fixed
}

thead th{
  padding:8px;
  font-size:var(--table-head);
  line-height:1.1;
  color:#ffffffd1;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:linear-gradient(90deg,#4cc9f01a,#a78bfa14);
  border-bottom:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

tbody td{
  padding:6px 8px;
  font-size:var(--table-cell);
  line-height:1.1;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

tbody td:first-child{
  width:44%;
  color:#ffffffe0;
  font-weight:760;
  letter-spacing:.15px;
  background:#ffffff08;
  border-right:1px solid rgba(255,255,255,.06)
}

tbody td:not(:first-child),thead th:not(:first-child){text-align:center}
tbody tr:nth-child(odd) td{background:#ffffff05}
tbody tr:nth-child(2n) td{background:#ffffff07}
tbody tr:nth-child(odd) td:first-child{background:#ffffff0a}
tbody tr:nth-child(2n) td:first-child{background:#ffffff0e}
tbody tr:last-child td{border-bottom:none}

/* -------- Bottom Right -------- */
.bottomRight{
  padding:12px;
  background:radial-gradient(900px 600px at 20% 20%,rgba(76,201,240,.08),transparent 55%),#0000001a;
  min-width:0;
  min-height:0
}

.bottomRight iframe{
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:calc(var(--radius) - 6px);
  box-shadow:0 18px 50px #0000008c;
  background:#000;
  display:block
}

:focus{outline:2px solid rgba(76,201,240,.55);outline-offset:2px}