/* ───────────────────────────────────────────────── CogniBump shared UI (header, footer, “more games”) SAFE: homepage keeps its own grid; games stack cleanly ───────────────────────────────────────────────── */ /* reset margins on root */ html, body { margin: 0; } /* include wrappers layout-neutral */ [data-include] { display:block; width:100%; } /* =============== HEADER =============== */ .cb-header { position: sticky; /* stick to top */ top: 0; z-index: 1000; width: 100%; background:#111; border-bottom:1px solid rgba(255,255,255,.10); } .cb-header-inner { max-width: 1100px; margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; min-height: 56px; /* clamps vertical size on desktop */ } /* Logo: fixed height, never fluid */ .cb-logo { display:flex; align-items:center; } .cb-logo img { height: 36px !important; /* desktop/tablet */ width: auto !important; max-width: none !important; display: block; } @media (max-width: 600px) { .cb-logo img { height: 30px !important; } /* mobile */ } /* Nav */ .cb-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1rem; } .cb-nav a { color:#fff; text-decoration:none; white-space:nowrap; font-weight:600; line-height:1.2; opacity:.9; } .cb-nav a:hover { opacity:1; } /* =============== FOOTER =============== */ .cb-footer { width:100%; background:#181818; border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; } .cb-footer-inner { max-width:1100px; margin:0 auto; padding:1rem; color:#ccc; text-align:center; font-size:.95rem; } .cb-footer-links { display:flex; gap:.5rem; justify-content:center; align-items:center; } .cb-footer a { color:#fff; text-decoration:none; } /* =============== “PLAY ANOTHER GAME” PANEL =============== */ .cb-more-games { margin:2rem auto; max-width:1100px; padding:0 1rem; } .cb-more-games h3 { margin:0 0 .75rem; font-size:1.25rem; text-align:center; color:#ffc107; } .cb-more-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; } .cb-more-card { background:#1e1e1e; border-radius:10px; overflow:hidden; text-decoration:none; color:#fff; display:flex; flex-direction:column; align-items:center; padding:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .2s; } .cb-more-card:hover { transform:translateY(-2px); } .cb-more-card img { width:100%; height:90px; object-fit:cover; border-radius:8px; } .cb-more-card span { margin-top:.5rem; font-size:.95rem; text-align:center; } /* =============== PAGE LAYOUT GUARDS =============== */ /* Homepage keeps its own layout; add class="home" on homepage */ body.home { /* no overrides here; your homepage CSS governs */ } /* Non-home (game) pages: stack header → content → footer and center content */ body:not(.home) { display:block !important; /* undo body flex from style.css */ align-items: initial !important; justify-content: initial !important; padding: 0 !important; /* remove global body padding from around header */ } /* Give padding to the main content instead */ body:not(.home) main.quiz-container { width: 100% !important; max-width: 560px !important; /* 520–600 works nicely */ margin: 0 auto !important; padding: 1rem; /* content padding lives here */ } /* Card never exceeds container width */ body:not(.home) .quiz-card.glass { width: 100% !important; max-width: 560px !important; margin-left: auto; margin-right: auto; display: block; } /* Prevent horizontal scroll from inner elements */ body:not(.home) .quiz-container, body:not(.home) .quiz-card, body:not(.home) .quiz-body, body:not(.home) .quiz-header, body:not(.home) .quiz-answers { max-width: 100%; overflow-x: hidden; } /* Make only content images fluid; NOT the header logo */ body:not(.home) .quiz-container img, body:not(.home) .cb-more-games img, body:not(.home) #postGameLinks img { max-width:100%; height:auto; } /* Dropdown trigger */ .cb-menu { position: relative; } .cb-menu-trigger { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; cursor: pointer; list-style: none; /* hide marker space */ user-select: none; padding: .4rem .5rem; border-radius: .4rem; } .cb-menu-trigger:hover { background: rgba(255,255,255,.08); } .cb-menu > summary::-webkit-details-marker { display:none; } /* hide default arrow */ /* Panel */ .cb-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); background: #1b1b1b; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); min-width: 240px; padding: .5rem; display: grid; gap: .25rem; z-index: 1200; } /* Items */ .cb-menu-panel a { color: #fff; text-decoration: none; padding: .6rem .75rem; border-radius: .4rem; font-weight: 600; line-height: 1.2; } .cb-menu-panel a:hover { background: rgba(255,255,255,.08); } /* Mobile: make the panel easy to read & tap */ @media (max-width: 700px) { .cb-menu-panel { left: 0; right: 0; top: calc(100% + 6px); min-width: unset; padding: .5rem; } .cb-menu-panel a { padding: .8rem .9rem; font-size: 1.05rem; } } /* Align "Home" and "Games" nicely */ .cb-header-inner { align-items: center; } .cb-nav { display:flex; align-items:center; gap:1rem; } .cb-nav a, .cb-menu-trigger { display:inline-flex; align-items:center; height: 36px; /* same visual height as logo */ padding: 0 .5rem; line-height: 1; /* keeps them vertically centered */ font-weight: 700; } /* Tidy the summary trigger */ .cb-menu { position: relative; } .cb-menu > summary::-webkit-details-marker { display:none; } .cb-menu-trigger { cursor: pointer; border-radius: .4rem; } .cb-menu-trigger:hover { background: rgba(255,255,255,.08); } /* ---- CENTERED DROPDOWN (desktop & mobile) ---- */ .cb-menu-panel { position: absolute; top: calc(100% + 8px); left: 50%; /* center on trigger */ transform: translateX(-50%); /* center on trigger */ background: #1b1b1b; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: .5rem; display: grid; gap: .25rem; z-index: 1200; min-width: 240px; max-width: 92vw; /* never exceed viewport */ } /* Items */ .cb-menu-panel a { color:#fff; text-decoration:none; padding:.6rem .75rem; border-radius:.4rem; font-weight:600; line-height:1.2; } .cb-menu-panel a:hover { background: rgba(255,255,255,.08); } /* Mobile: keep it fully on-screen and comfy to tap */ @media (max-width: 700px) { .cb-menu-panel { left: 50%; transform: translateX(-50%); width: calc(100vw - 24px); /* breathing room left/right */ max-width: 420px; /* readable width cap */ top: calc(100% + 6px); } .cb-menu-panel a { padding: .8rem .9rem; font-size: 1.05rem; } } /* Avoid accidental horizontal scroll on small screens */ html, body { overflow-x: hidden; } /* Make page fill screen height and push footer down */ html, body { height: 100%; /* full viewport height */ } body { display: flex; flex-direction: column; } /* Main content grows to fill space before footer */ main { flex: 1 0 auto; } /* Footer stays at bottom when content is short */ .cb-footer { flex-shrink: 0; } /* Sticky footer layout for all non-home pages */ html, body { height:100%; } body:not(.home) { display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; min-height:100vh; padding:0 !important; /* keep header snug */ } body:not(.home) main { flex:1 0 auto; } body:not(.home) .cb-footer { margin-top:auto; flex-shrink:0; } :root { --cb-header-h: 56px; /* match your header clamp */ --cb-footer-h: 64px; /* adjust to your footer’s real height */ } /* Make main exactly the remaining height (also respects the iOS safe-area) */ body:not(.home) main { min-height: calc(100vh - var(--cb-header-h) - var(--cb-footer-h) - env(safe-area-inset-bottom, 0px)); padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); } /* --- Sticky footer: safe, simple version --- */ html, body { height: 100%; } body:not(.home) { display: flex !important; flex-direction: column !important; min-height: 100vh; padding: 0 !important; /* keep header snug */ } body:not(.home) main { flex: 1 1 auto !important; min-height: auto !important; /* override the previous calc() rule */ } body:not(.home) .cb-footer { margin-top: auto; flex-shrink: 0; /* small safe-area breathing room on iOS without layout math */ padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); }