/* ============================================================ sudokuaz.com — portal skin. Modern reproduction of the 2016 "agario" theme (red top-nav, cartoon logo, green accents). Mobile-first. No jQuery / Bootstrap / Flash. ============================================================ */ :root { --red: #a83838; --red-hover: #8a2f2f; /* darker than the bar — hover/active deepen, not brighten */ --crimson: #dc143c; --green: #8ac007; --green-dark: #618605; --gold: #ffad33; --ink: #333; --muted: #555; --line: #ddd; --line-soft: #eee; --bg: #e9ebf3; --bg-soft: #eef0f6; --surface: #fff; --nav-h: 48px; --maxw: 1180px; --radius: 10px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.07); --font-body: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; --font-head: "Lato", "Segoe UI", Tahoma, sans-serif; /* Bridge: re-theme the embedded game's accent to the portal palette without touching the game's own code. */ --accent: var(--green); --accent-ink: var(--green-dark); } /* Dark theme — applied when . The skin is var-driven, so redefining these tokens cascades to header, sidebar, prose, footer, cards. Accents (red nav, green, gold) are kept for brand identity. Values match the embedded game's dark surface so game + portal read as one system. */ :root[data-theme="dark"] { --ink: #e8eaf3; --muted: #a6acc2; --line: #2c3142; --line-soft: #313749; --bg: #1e2130; --bg-soft: #272b3a; --surface: #272b3a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; /* no horizontal scroll, ever */ } body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: var(--green-dark); text-decoration: none; } a:hover { color: var(--red-hover); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.25; } /* ---- White header with centered logo ---------------------- */ /* ---- Single sticky bar: logo (left) + nav + hamburger (right) ---- One compact red bar carries the logo AND the menu, so there is no separate tall header — saves vertical height, which matters most on mobile. */ .topnav { position: sticky; top: 0; z-index: 900; background: var(--red); min-height: var(--nav-h); box-shadow: var(--shadow-sm); } .topnav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; /* logo left, controls right */ min-height: var(--nav-h); padding: 0 10px; } /* Logo, left side of the bar — clickable (goes home) */ .brand { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; } .brand img { height: 38px; width: auto; display: block; } /* Right-side cluster: theme toggle + hamburger */ .nav-right { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } .theme-btn { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease, border-color 0.15s ease; } .theme-btn:hover { background: rgba(255, 255, 255, 0.24); } /* Hamburger drawn as 3 wide bars (thicker/wider than the ☰ glyph); morphs into an X when .open. */ .nav-toggle { position: relative; width: 42px; height: 38px; background: none; border: 0; padding: 0; cursor: pointer; /* hand cursor on hover */ display: inline-flex; /* hamburger: always present on mobile */ } .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after { content: ""; position: absolute; left: 50%; width: 26px; /* wide bars */ height: 3.5px; /* thick bars */ background: #fff; border-radius: 3px; transform: translateX(-50%); transition: transform 0.25s ease, top 0.25s ease, background 0.15s ease; } .nav-toggle .bar { top: 50%; margin-top: -1.75px; } .nav-toggle .bar::before { top: -9px; } .nav-toggle .bar::after { top: 9px; } /* open → X */ .nav-toggle.open .bar { background: transparent; } .nav-toggle.open .bar::before { top: 0; transform: translateX(-50%) rotate(45deg); } .nav-toggle.open .bar::after { top: 0; transform: translateX(-50%) rotate(-45deg); } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; /* kept rendered so open/close can animate */ flex-direction: column; /* overlay: drops OVER the page content below the sticky bar — the layout underneath never moves (no shift, no iframe reflow) */ position: absolute; top: 100%; left: 0; right: 0; background: var(--red); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28); /* collapsed state */ max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: max-height 0.3s ease, opacity 0.22s ease, transform 0.25s ease, visibility 0s linear 0.3s; } .nav-links.open { max-height: 420px; /* > tallest menu; animates the slide */ opacity: 1; transform: none; visibility: visible; transition: max-height 0.3s ease, opacity 0.25s ease 0.05s, transform 0.25s ease; } @media (prefers-reduced-motion: reduce) { .nav-links, .nav-links.open { transition: none; } } .nav-links a { display: block; color: #f5f5f5; font-family: var(--font-head); letter-spacing: 0.3px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .nav-links a:hover { background: var(--red-hover); color: #fff; text-decoration: none; } .nav-links a.active { /* active page in a distinct colour */ background: var(--red-hover); color: #fff; box-shadow: inset 4px 0 0 var(--gold); } /* ---- Layout: sidebar + content ---------------------------- */ .layout { max-width: var(--maxw); margin: 0 auto; padding: 16px 12px 32px; display: flex; flex-direction: column; /* mobile-first: stacked */ gap: 20px; width: 100%; } /* Sidebar game menu. Mobile: the game is what matters — content (game + prose) renders first and the games menu drops BELOW it (visual order only; DOM/SEO order unchanged). */ .sidebar { width: 100%; order: 2; } .content { order: 1; } .sidebar h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: center; margin: 0 0 10px; } .game-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .game-menu a { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform 0.12s ease, border-color 0.12s ease; } .game-menu a:hover { border-color: var(--green); transform: translateY(-2px); text-decoration: none; } .game-menu a.active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; } .game-menu img { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; } .game-menu span { font-size: 13px; font-weight: 600; } /* Content column */ .content { width: 100%; min-width: 0; /* let flex children shrink; no overflow */ } /* Game slot — the central "board" area (was .showswf/Flash). Soft tone (matches the page + grid) so nothing is stark white; the white keypad / status tiles and filled cells pop against it. Dark override below. */ .game-slot { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 20px; transition: background 0.2s ease, border-color 0.2s ease; } /* When the embedded game is in dark mode, darken the whole window (slot frame included) so it reads as one cohesive dark panel — matches the game's own dark surface (#272b3a / #2c3142). The :root rule applies INSTANTLY from the pre-paint theme script (no white flash while the iframe boots); the .is-dark class from the iframe's message keeps it in sync afterwards. */ .game-slot.is-dark, :root[data-theme="dark"] .game-slot { background: #272b3a; border-color: #2c3142; } /* Page prose */ .prose { max-width: 760px; margin: 0 auto; } .prose h1 { font-size: 26px; text-align: center; margin: 8px 0 4px; } .prose .lede { text-align: center; color: var(--muted); margin: 0 0 20px; } .prose h2 { font-size: 20px; margin: 24px 0 8px; } .prose p, .prose li { color: var(--ink); } /* Related games row. Mobile: hidden — the full "Games" menu sits right below it there (the sidebar drops to the bottom on mobile), so the two would just duplicate each other. Desktop shows both: sidebar left, related in the content column. */ .related { display: none; } .related h2 { font-size: 18px; text-align: center; margin: 24px 0 12px; } .related-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; } .related-row a { display: block; text-align: center; color: var(--ink); font-size: 13px; } .related-row img { width: 76px; height: 76px; border-radius: var(--radius); margin: 0 auto 6px; box-shadow: var(--shadow-sm); } .related-row a:hover { color: var(--green-dark); text-decoration: none; } /* ---- Footer ----------------------------------------------- */ .site-footer { background: #2b2b2b; color: #ccc; text-align: center; padding: 24px 16px; font-size: 13px; } .site-footer a { color: var(--gold); } .site-footer .foot-links { margin: 0 0 8px; } .site-footer .foot-links a { margin: 0 8px; } :root[data-theme="dark"] .site-footer { background: #0d0f16; } /* ---- Back-to-top ------------------------------------------ */ .to-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 950; } .to-top.show { opacity: 1; pointer-events: auto; } .to-top:hover { background: var(--green-dark); } /* ============================================================ Tablet / desktop ============================================================ */ @media (min-width: 720px) { .nav-toggle { display: none; } .nav-links { display: flex; flex-direction: row; flex: 1 1 auto; /* fill the space between logo and theme */ width: auto; justify-content: center; /* links centered in that space */ /* undo the mobile overlay/collapsed/animated state */ position: static; background: none; box-shadow: none; max-height: none; overflow: visible; opacity: 1; transform: none; visibility: visible; transition: none; } .nav-links a { border-top: 0; } .nav-links a.active { box-shadow: inset 0 -4px 0 var(--gold); } .brand img { height: 44px; } /* a touch larger on desktop */ } @media (min-width: 960px) { .layout { flex-direction: row; align-items: flex-start; } .sidebar { order: 0; /* desktop: back to the left column */ width: 220px; flex: 0 0 220px; position: sticky; top: calc(var(--nav-h) + 12px); } .content { order: 0; } .related { display: block; } /* desktop: related row returns */ .game-menu { grid-template-columns: 1fr; } .content { flex: 1 1 auto; } } /* ============================================================ Mobile: give the game board as much width as possible so the cells are big and easy to tap. Trim the padding that squeezes it. ============================================================ */ @media (max-width: 560px) { .layout { padding: 10px 4px 26px; } .game-slot { padding: 4px; border-radius: 8px; } }