/* Base */ *{box-sizing:border-box} body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);margin:0} /* Outer frame (like your screenshots) */ .page{padding:10px} .shell{max-width: 1200px;margin:0 auto;background:#e9e9e9;border:4px solid var(--bg);border-radius:10px;padding:14px} /* Back button (mobile only) */ .back-btn{display:block;background: var(--btn);border:0;border-radius:4px;padding:10px 12px;font-weight:800;text-decoration:none;color: var(--btnText);text-align:center;margin:0 auto 10px;max-width:1200px} /* Common buttons */ .btn{background: var(--btn);border:0;border-radius:2px;padding:10px 14px;font-weight:700;cursor:pointer;text-decoration:none;color: var(--btnText);display:inline-block;line-height:1.1} .btn-wide{display:block;width:100%;text-align:center;padding:18px 14px;font-size:20px} .btn-search{background:#f3a43a} .btn-random{background:#f5cd18} .btn-muted{background:var(--hover);color:#fff;cursor:default;pointer-events:none;opacity:.75} /* Cards */ .card{background:#fff;border-radius:8px;padding:14px;margin:10px auto;max-width: 1200px;border:1px solid rgba(0,0,0,.08)} /* Search block */ .search-wrap{max-width: 1200px;margin:0 auto;text-align:center} .search-input{width:100%;padding:14px;border:1px solid #cfcfcf;border-radius:2px;font-size:18px;text-align:center} .search-actions{margin-top:12px;display:flex;flex-direction:column;gap:14px;align-items:center} .search-actions .btn{min-width:240px} /* Filter row (Genre / Park) */ .filter-row{margin-top:12px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .filter-select{min-width:240px;max-width:520px;width:100%;padding:12px;border:1px solid #cfcfcf;border-radius:2px;font-size:16px;background:#fff} @media (min-width:769px){ .filter-select{width:auto} } /* Table (desktop) */ table{width:100%;border-collapse:collapse;background:#fff} th,td{padding:10px;border-bottom:1px solid #e6e6e6;text-align:left;vertical-align:top} tr:nth-child(even){background:#f0f0f0} th{background:#dcdcdc;font-weight:800} .td-duration{font-weight:800;white-space:nowrap} .noreq{display:inline-block;background:var(--pill);color:#fff;padding:8px 10px;border-radius:2px;font-weight:700;white-space:nowrap} /* Pager */ .pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap} .pager a,.pager span{min-width:44px;text-align:center} .pager .dots{min-width:auto;background:transparent;padding:0 4px;font-weight:800} .pager .current{outline:2px solid rgba(0,0,0,.25)} /* Responsive: mobile turns table rows into white cards */ @media (max-width:768px){ .back-btn{display:block} .shell{padding:12px} .card{max-width:560px} .search-actions{gap:18px} .search-actions .btn{width:100%;max-width:560px} .search-wrap{max-width:560px} table, thead, tbody, th, td, tr{display:block;width:100%} thead{display:none} tr{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;margin:0 0 14px 0;overflow:hidden} tr:nth-child(even){background:#fff} td{border:0;border-top:1px solid #eee;padding:14px 12px;display:flex;gap:10px;align-items:flex-start} td:first-child{border-top:0} td::before{content:attr(data-label);font-weight:800;min-width:88px} .td-action{display:block} .td-action::before{display:none} .td-action a,.td-action span{display:block;width:100%;text-align:center} .td-action a{padding:18px 14px;font-size:20px} .pager{max-width: 1200px;margin:0 auto} .pager .next{flex-basis:100%;max-width:160px} } /* Red hover for ALL buttons (no other styling changes) */ .btn:hover{background:var(--pill)} .back-btn:hover{background:var(--pill)} /* Sticky top nav (desktop + mobile hamburger) */ .topbar{position:sticky;top:0;z-index:50;border-radius:18px;margin:12px auto 18px;max-width:1200px;background:var(--dmw-topbar);box-shadow:0 14px 28px rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);overflow:hidden} .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 14px} .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;text-decoration:none} .brand-logo{max-width:56px;max-height:56px;width:auto;height:auto;display:block} .navlinks{display:flex;gap:10px;align-items:center} .navlinks a{color:#fff;text-decoration:none;font-weight:900;padding:10px 14px;border-radius:999px} .navlinks a:hover{background:rgba(255,255,255,.14)} .navlinks a.active{background:rgba(255,255,255,.16);box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 12px rgba(0,0,0,.14)} .burger{display:none;background:transparent;border:0;cursor:pointer;padding:6px 8px;border-radius:12px} .burger .line{display:block;width:16px;height:2px;background:#fff;border-radius:2px;margin:2px 0} .mobilemenu{display:none;padding:8px 12px 12px;border-top:1px solid rgba(255,255,255,.18)} .mobilemenu.open{display:block;} .mobilemenu a{display:block;color:#fff;text-decoration:none;font-weight:900;padding:10px 8px;border-radius:999px} .mobilemenu a:hover{background:rgba(255,255,255,.14)} .mobilemenu a.active{background:rgba(255,255,255,.16);box-shadow: inset 0 0 0 1px rgba(255,255,255,.14)} @media (max-width:1100px){.navlinks{display:none}.burger{display:inline-flex;flex-direction:column;gap:4px}.mobilemenu.open{display:block}} .muted{opacity:.8;font-size:.92em;margin-top:6px} /* DMW logo sizing */ .brand-logo{max-width:56px;max-height:56px;width:auto;height:auto;display:block} /* Pills like "Up Next" */ .pill{ display:inline-flex; align-items:center; gap:8px; background: var(--dmw-pill); background-image: linear-gradient( 180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 45%, rgba(0,0,0,.10) 100% ); color:#fff; font-weight:900; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.18); box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 10px 22px rgba(0,0,0,.14); text-shadow: 0 1px 0 rgba(0,0,0,.18); } .pill:hover{ transform:translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,.20), 0 14px 26px rgba(0,0,0,.14); } /* Base overrides for request table */ table{width:100%;border-collapse:collapse;} th,td{padding:10px;border-bottom:1px solid #e6e6e6;text-align:left;vertical-align:top;} tr:nth-child(even){background:#f9f9f9;} th{background:#e8e8e8;font-weight:800;} .td-duration{font-weight:800;white-space:nowrap;} .noreq{display:inline-block;background:#2f63a0;color:#fff;padding:6px 10px;border-radius:4px;font-weight:700;white-space:nowrap;} .pager a,.pager span{min-width:44px;text-align:center;} .pager .dots{min-width:auto;background:transparent;padding:0 4px;font-weight:800;} .pager .current{outline:2px solid rgba(0,0,0,.25);} .filter-row{margin-top:12px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .filter-select{min-width:240px;max-width:520px;width:100%;padding:12px;border:1px solid #cfcfcf;border-radius:4px;font-size:16px;background:#fff;} .search-wrap{margin-bottom:14px;text-align:center;} .search-actions{margin-top:12px;display:flex;flex-direction:column;gap:14px;align-items:center;} .search-actions .btn{min-width:240px;} .btn-wide{display:block;width:100%;text-align:center;padding:18px 14px;font-size:18px;} @media(max-width:768px){ table,thead,tbody,th,td,tr{display:block;width:100%;} thead{display:none;} tr{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;margin:0 0 14px;overflow:hidden;} tr:nth-child(even){background:#fff;} td{border:0;border-top:1px solid #eee;padding:14px 12px;display:flex;gap:10px;align-items:flex-start;} td:first-child{border-top:0;} td::before{content:attr(data-label);font-weight:800;min-width:88px;} .search-actions .btn{width:100%;max-width:560px;} }