/* WhenIsThe shared stylesheet — event pages, hubs, and site chrome. Loaded by every generated page; per-page CSS is only the blurred backdrop. */ :root { --bg-color: #1a1a1d; --card-color: #2c2c30; --primary-accent: #f4f4f5; --text-color: #f4f4f5; --subtle-text: #9e9e9e; --accent: #f4f4f5; /* overridden per category on */ --border: #444; } * { box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: 'Inter', sans-serif; margin: 0; min-height: 100vh; background-image: radial-gradient(circle, #2a2a2d, #1a1a1d 70%); } a { color: inherit; } /* ---------- Site header ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; position: relative; z-index: 5; } .wordmark { font-weight: 900; font-size: 1.25rem; letter-spacing: -0.5px; text-decoration: none; color: var(--text-color); } .wordmark span { color: var(--accent); } .site-nav { display: flex; gap: 6px; flex-wrap: wrap; } .site-nav a { color: var(--subtle-text); text-decoration: none; font-size: 0.9rem; padding: 8px 12px; border-radius: 8px; transition: color .2s ease, background-color .2s ease; white-space: nowrap; } .site-nav a:hover { color: var(--text-color); background-color: rgba(255,255,255,0.06); } /* ---------- Page scaffolding ---------- */ .page { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; position: relative; z-index: 1; } .breadcrumb { font-size: 0.85rem; color: var(--subtle-text); margin: 6px 2px 14px; } .breadcrumb a { color: var(--subtle-text); text-decoration: none; } .breadcrumb a:hover { color: var(--text-color); } .breadcrumb .sep { margin: 0 6px; opacity: .6; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } @media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } } /* ---------- Main event card ---------- */ .card { background-color: var(--card-color); border-radius: 16px; padding: clamp(20px, 4vw, 44px); text-align: center; width: 100%; box-shadow: 0 15px 35px rgba(0,0,0,0.25); border: 1px solid var(--border); border-top: 3px solid var(--accent); position: relative; } .hero { width: calc(100% + 2 * clamp(20px, 4vw, 44px)); margin: calc(-1 * clamp(20px, 4vw, 44px)) calc(-1 * clamp(20px, 4vw, 44px)) 22px; max-height: 280px; object-fit: cover; border-radius: 13px 13px 0 0; display: block; } h1 { font-size: clamp(1.5rem, 4.5vw, 2.4rem); font-weight: 900; margin: 0 0 6px 0; color: var(--text-color); } .subtitle { font-size: 1.05rem; margin: 0 0 8px; color: var(--subtle-text); font-weight: 400; } .answer { font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.55; margin: 10px auto 26px; max-width: 640px; } .answer strong { color: var(--accent); } .answer .status-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--subtle-text); vertical-align: 2px; margin-left: 8px; } .local-line { font-size: 0.9rem; margin-top: -16px; margin-bottom: 26px; } /* ---------- Timer ---------- */ #timer { display: flex; justify-content: center; gap: clamp(8px, 2vw, 20px); flex-wrap: wrap; } .time-box { background-color: var(--bg-color); padding: clamp(12px, 2.5vw, 20px); border-radius: 10px; min-width: clamp(70px, 18vw, 120px); flex: 0 1 120px; } .time-box span { display: block; font-size: clamp(2rem, 8vw, 4rem); font-weight: 900; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .time-box .label { font-size: .8rem; text-transform: uppercase; color: var(--subtle-text); margin-top: 10px; letter-spacing: 1px; } #released-message { font-size: clamp(1.6rem, 6vw, 3rem); font-weight: 700; color: var(--accent); display: none; } body.state-released #timer, body.state-window #timer { display: none; } body.state-released #released-message { display: block; } .window-note { font-size: clamp(1.4rem, 5vw, 2.4rem); font-weight: 900; color: var(--accent); background-color: var(--bg-color); border-radius: 10px; padding: 24px; display: inline-block; } .window-note small { display: block; font-size: 0.85rem; font-weight: 400; color: var(--subtle-text); margin-top: 10px; letter-spacing: 1px; text-transform: uppercase; } /* ---------- Description & content sections ---------- */ .event-description { margin-top: 36px; font-size: 1rem; color: var(--subtle-text); line-height: 1.65; max-width: 680px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--border); padding-top: 28px; text-align: left; } .event-description p { margin: 0; } .event-description p + p { margin-top: 14px; } .event-description strong { color: var(--text-color); } .content-section { margin-top: 34px; max-width: 680px; margin-left: auto; margin-right: auto; text-align: left; } .content-section h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; color: var(--text-color); } .content-section p { color: var(--subtle-text); line-height: 1.65; margin: 0 0 12px; } .content-section p strong, .content-section td strong { color: var(--text-color); } .data-table-wrap { overflow-x: auto; } table.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } table.data-table th, table.data-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); color: var(--subtle-text); white-space: nowrap; } table.data-table th { color: var(--text-color); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; } table.data-table tr.past td { opacity: 0.55; } table.data-table td.highlight, table.data-table tr.next td { color: var(--text-color); } table.data-table a { color: var(--text-color); } .faq-block h3 { font-size: 1rem; color: var(--text-color); margin: 18px 0 6px; } .faq-block p { margin: 0; } /* ---------- Related events ---------- */ .related-section { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 26px; text-align: left; } .related-section h2 { font-size: 1.15rem; margin: 0 0 16px; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .related-card { background-color: var(--bg-color); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .related-card:hover { border-color: var(--accent); transform: translateY(-2px); } .related-card img { width: 100%; height: 76px; object-fit: cover; display: block; } .related-card .rc-body { padding: 10px 12px; } .related-card .rc-name { font-size: 0.85rem; font-weight: 700; color: var(--text-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .related-card .rc-date { font-size: 0.75rem; color: var(--subtle-text); margin-top: 4px; display: block; } .related-more { display: inline-block; margin-top: 14px; font-size: 0.9rem; color: var(--subtle-text); text-decoration: none; } .related-more:hover { color: var(--accent); } /* ---------- Info box (key facts aside) ---------- */ .info-box { background-color: var(--card-color); border-radius: 16px; padding: 25px; width: 100%; box-shadow: 0 15px 35px rgba(0,0,0,0.25); border: 1px solid var(--border); display: flex; flex-direction: column; text-align: left; gap: 10px; } .info-box:empty { display: none; } .info-box h4 { margin: 0; font-size: 1.2rem; color: var(--primary-accent); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 5px; } .info-box h5 { margin: 10px 0 5px 0; font-size: 0.9rem; text-transform: uppercase; color: var(--subtle-text); } .info-box p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-color); } .info-box-img { width: 100%; border-radius: 8px; margin-bottom: 5px; } .info-box-systems { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--subtle-text); margin-bottom: 10px; } .info-box-systems svg { height: 20px; fill: currentColor; } .info-box-categories-container { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .category-icon { height: 22px; width: auto; } .category-overflow { font-size: 0.85rem; color: var(--subtle-text); background-color: #3a3a3e; padding: 4px 8px; border-radius: 6px; cursor: default; } .info-box-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { background-color: #3a3a3e; padding: 5px 10px; border-radius: 6px; font-size: 0.85rem; } .info-box-scrollable-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .info-box-scrollable-list .list-item { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--subtle-text); } .info-box-scrollable-list .list-item strong { color: var(--text-color); } .info-box-steam-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background-color: #2a475e; color: #66c0f4; text-align: center; padding: 12px; border-radius: 8px; text-decoration: none; font-weight: 700; margin-top: auto; transition: all 0.2s ease; } .info-box-steam-link:hover { background-color: #66c0f4; color: #1b2838; } .info-box-steam-link svg { width: 20px; height: 20px; } /* Tooltips (hover devices only; touch devices see plain icons) */ .tooltip-wrapper { position: relative; display: inline-flex; } @media (hover: hover) { .tooltip-wrapper[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: var(--bg-color); color: var(--primary-accent); padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid var(--border); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.1s ease-out, visibility 0.1s ease-out; z-index: 100; } .tooltip-wrapper[data-tooltip]:hover::after { opacity: 1; visibility: visible; } } /* ---------- Share row & utility buttons ---------- */ .home-link { margin-top: 36px; display: inline-block; color: var(--subtle-text); text-decoration: none; font-size: .9rem; transition: color .2s ease; } .home-link:hover { color: var(--primary-accent); } .share-container { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .share-button { display: flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 8px; background-color: var(--bg-color); border: 1px solid var(--border); color: var(--subtle-text); text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; } .share-button:hover { color: var(--primary-accent); border-color: #bbb; } .share-button svg { width: 20px; height: 20px; } #copy-link { min-width: 125px; justify-content: center; } #copy-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .share-button.copied { color: var(--subtle-text); cursor: default; transition-duration: 0s; } .share-button.copied:hover { border-color: var(--border); color: var(--subtle-text); } button.share-button { font-family: inherit; cursor: pointer; } #save-event.saved svg { fill: #f5c518; stroke: #f5c518; } #save-event.saved { color: var(--primary-accent); } .overlay-hint { margin: 18px 0 0 0; font-size: .85rem; } .overlay-hint a { color: var(--subtle-text); text-decoration: none; transition: color .2s ease; } .overlay-hint a:hover { color: var(--primary-accent); } #popout-button { position: absolute; top: 15px; right: 15px; width: 44px; height: 44px; padding: 9px; color: var(--subtle-text); border-radius: 12px; background-color: var(--card-color); cursor: pointer; border: 1px solid #38383a; box-shadow: 0px 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); transition: color 0.2s ease; display: flex; align-items: center; justify-content: center; z-index: 10; } #popout-button:hover { color: var(--primary-accent); } #popout-button svg { width: 100%; height: 100%; } @media (hover: none) { #popout-button { display: none; } } /* ---------- Hub pages ---------- */ .hub-intro { max-width: 760px; margin: 0 auto 8px; color: var(--subtle-text); line-height: 1.65; text-align: left; } .hub-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; } .hub-list li a { display: flex; align-items: center; gap: 14px; background-color: var(--card-color); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; text-decoration: none; transition: border-color .2s ease; } .hub-list li a:hover { border-color: var(--accent); } .hub-list img { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-color); } .hub-list .hub-name { font-weight: 700; color: var(--text-color); flex: 1 1 auto; min-width: 0; } .hub-list .hub-date { color: var(--subtle-text); font-size: 0.88rem; white-space: nowrap; } .hub-list .days-chip { font-size: 0.78rem; font-weight: 700; color: var(--accent); background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; white-space: nowrap; } /* ---------- Footer ---------- */ .site-footer { margin-top: 48px; border-top: 1px solid var(--border); padding: 28px 4px 8px; font-size: 0.85rem; color: var(--subtle-text); line-height: 1.7; } .site-footer .footer-cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; text-align: left; } .site-footer .footer-col { min-width: 150px; } .site-footer h6 { margin: 0 0 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-color); } .site-footer a { color: var(--subtle-text); text-decoration: none; display: inline-block; } .site-footer a:hover { color: var(--text-color); } .site-footer .footer-note { margin-top: 22px; font-size: 0.8rem; opacity: 0.85; text-align: left; } .source-line { margin-top: 30px; font-size: 0.8rem; color: var(--subtle-text); opacity: 0.85; }