/* * * HTBHL Schedule — Mobile Expandable Rows CSS * * * Add to your : * * * Only activates on screens ≤ 768px. * Desktop tables are completely untouched. */ @media (max-width: 768px) { /* ── Game card ── */ .m-game { background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; margin-bottom: 8px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .m-game.open { border-color: #c5ccd6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* ── Collapsed header ── */ .m-game-header { display: grid; grid-template-columns: 46px 1fr auto 1fr 20px; align-items: center; padding: 11px 12px; cursor: pointer; gap: 6px; -webkit-tap-highlight-color: transparent; user-select: none; } .m-game-header:active { background: #f7f8fa; } .m-time { font-size: 0.78rem; color: #6b7a8d; font-weight: 600; line-height: 1.2; } .m-away { text-align: right; font-weight: 600; font-size: 0.85rem; color: #1a2332; line-height: 1.2; padding-right: 4px; } .m-away-team { display: block; } .m-away a, .m-home a { color: inherit; text-decoration: none; } .m-scores { display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; font-size: 1.1rem; min-width: 52px; text-align: center; } .m-scores .sep { font-size: 0.8rem; color: #a0aab4; font-weight: 400; } .m-score-w { color: #16a34a; } .m-score-l { color: #9ca3af; } .m-score-tie { color: #1a2332; } .m-home { font-weight: 600; font-size: 0.85rem; color: #1a2332; line-height: 1.2; padding-left: 4px; } .m-chevron { color: #a0aab4; font-size: 0.65rem; transition: transform 0.25s ease; text-align: center; } .m-game.open .m-chevron { transform: rotate(180deg); } /* ── OT badge ── */ .m-ot-badge { display: inline-block; background: #fbbf24; color: #000; font-weight: 700; font-size: 0.55rem; padding: 1px 4px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 2px; vertical-align: middle; } /* ── Expanded details ── */ .m-details { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .m-game.open .m-details { max-height: 160px; } .m-detail-inner { padding: 0 12px 12px; border-top: 1px solid #eef0f3; } .m-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 10px; font-size: 0.72rem; color: #8899ab; font-weight: 500; } .m-info-row a { color: #8899ab; text-decoration: none; } .m-info-row strong { font-weight: 600; } /* ── Three stars ── */ .m-stars { display: flex; gap: 4px; } .m-star { flex: 1; text-align: center; font-size: 0.72rem; color: #4b5b6e; line-height: 1.3; } .m-star-label { font-weight: 700; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .m-star-1 .m-star-label { color: #d97706; } .m-star-2 .m-star-label { color: #6b7280; } .m-star-3 .m-star-label { color: #92400e; } .m-star a { color: inherit; text-decoration: none; } .m-star a:hover { text-decoration: underline; } /* ── Location divider (Franco Cite, etc.) ── */ .m-location-divider { font-size: 0.7rem; font-weight: 600; color: #6b7a8d; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 4px 6px; border-bottom: 1px solid #e2e5e9; margin-bottom: 8px; } .m-location-divider a { color: #6b7a8d; text-decoration: none; } /* ── Upcoming / unplayed games ── */ .m-game.upcoming .m-scores { font-size: 0.8rem; color: #a0aab4; font-weight: 500; } /* ── View Recap link ── */ .m-recap-link { display: block; text-align: center; font-size: 0.78rem; font-weight: 600; padding: 8px 0 4px; margin-bottom: 16px; } .m-recap-link a { color: #3b82f6; text-decoration: none; } .m-recap-link a:hover { text-decoration: underline; } /* ── BYE row ── */ .m-bye-row { font-size: 0.78rem; color: #6b7a8d; padding: 8px 12px; margin-bottom: 8px; background: #f7f8fa; border-radius: 6px; } .m-bye-label { font-weight: 700; color: #1a2332; } }