/* * Central Game Hub — brand layer on top of SmartMag. * * Loaded after the theme by mu-plugins/centralgamehub-theme.php. It works * through SmartMag's own custom properties wherever one exists, so the dark * scheme and every block follow along; selectors are only used for shape * (radius, spacing, hover) that the theme has no token for. * * Everything is scoped under body.cgh, which the mu-plugin adds. */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ body.cgh { --c-main: #12b886; /* the logo's green, a touch brighter */ --c-main-rgb: 18, 184, 134; --cgh-radius: 14px; --cgh-radius-sm: 8px; --cgh-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18); --cgh-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 36px -14px rgba(15, 23, 42, .28); --cgh-ease: cubic-bezier(.2, .7, .2, 1); --c-links: #0e9f75; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* SmartMag marks the dark scheme on , not . */ html.s-dark body.cgh, body.cgh .s-dark { --c-links: #3ddc9f; } /* Page ground: barely-off-white reads calmer than pure white next to art. */ html:not(.s-dark) body.cgh { background: #f6f7f9; } html:not(.s-dark) body.cgh .main-wrap { background: transparent; } html.s-dark body.cgh { background: #0b0c0f; } body.cgh ::selection { background: rgba(var(--c-main-rgb), .28); } body.cgh :focus-visible { outline: 2px solid var(--c-main); outline-offset: 2px; border-radius: 4px; } /* ── Header ─────────────────────────────────────────────────────────────── */ body.cgh .smart-head-main .smart-head-mid, body.cgh .smart-head-mobile .smart-head-mid { --head-h: 84px; background: #000; /* the logo art sits on pure black */ } /* backdrop-filter makes this row a stacking context. Without a z-index of its own the row paints in document order, so the dropdowns (inside it) end up under the page — the Games panel was cut off by the article image. Keep the z-index whenever the blur is here; the header's search and off-canvas overlays sit above it on their own layers. */ body.cgh .smart-head-main .smart-head-bot { position: relative; z-index: 300; background: rgba(17, 19, 23, .92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); } body.cgh .navigation-main .menu > li > a { font-weight: 600; letter-spacing: .06em; font-size: 13px; transition: color .2s var(--cgh-ease); } /* An underline that grows from the centre instead of a colour jump. On ::before — the theme draws the dropdown caret with ::after. */ body.cgh .navigation-main .menu > li > a::before { content: ""; position: absolute; left: 50%; right: 50%; bottom: 12px; height: 2px; border-radius: 2px; background: var(--c-main); transition: left .25s var(--cgh-ease), right .25s var(--cgh-ease); } body.cgh .navigation-main .menu > li:hover > a::before, body.cgh .navigation-main .menu > li.current-menu-item > a::before, body.cgh .navigation-main .menu > li.current-menu-ancestor > a::before { left: 16px; right: 16px; } /* Dropdowns: a floating rounded panel, two columns when it is the 24 hubs. */ body.cgh .navigation-main .menu .sub-menu { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--cgh-radius); padding: 8px; background: #14161b; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6); overflow: hidden; } body.cgh .navigation-main .menu .sub-menu li { border: 0; } body.cgh .navigation-main .menu .sub-menu a { border-radius: var(--cgh-radius-sm); padding: 9px 14px; transition: background .15s, color .15s, padding-left .2s var(--cgh-ease); } body.cgh .navigation-main .menu .sub-menu a:hover { background: rgba(var(--c-main-rgb), .14); color: #fff; padding-left: 18px; } @media (min-width: 941px) { body.cgh .navigation-main .menu > li > .sub-menu:has(> li:nth-child(12)) { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); column-gap: 4px; width: auto; min-width: 420px; } } /* ── Category labels: pills ─────────────────────────────────────────────── */ body.cgh .cat-labels .category, body.cgh .cat-labels a { border-radius: 999px; padding: 0 11px; line-height: 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; box-shadow: 0 4px 12px -4px rgba(var(--c-main-rgb), .7); } body.cgh .cat-labels-overlay { margin: 12px; bottom: 0; left: 0; } /* ── Cards ──────────────────────────────────────────────────────────────── */ body.cgh .l-post .media, body.cgh .l-post .image-link, body.cgh .single-featured .featured, body.cgh .single-featured img { border-radius: var(--cgh-radius); overflow: hidden; } body.cgh .l-post .media { box-shadow: var(--cgh-shadow); transition: box-shadow .35s var(--cgh-ease), transform .35s var(--cgh-ease); } body.cgh .l-post:hover .media { box-shadow: var(--cgh-shadow-hover); transform: translateY(-3px); } body.cgh .l-post .media .img { transition: transform .6s var(--cgh-ease); } body.cgh .l-post:hover .media .img { transform: scale(1.045); } /* Small list thumbs: a smaller radius, no lift. */ body.cgh .loop-small .l-post .media, body.cgh .loop-small .l-post .image-link { border-radius: var(--cgh-radius-sm); } body.cgh .loop-small .l-post:hover .media { transform: none; } body.cgh .post-title, body.cgh .post-title a { letter-spacing: -.012em; } body.cgh .l-post .post-title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--cgh-ease), color .2s; } body.cgh .l-post:hover .post-title a { background-size: 100% 1.5px; } body.cgh .l-post .excerpt { line-height: 1.65; } /* Overlay cards and the hero grid: rounded tiles with a real gradient. */ body.cgh .grid-overlay .l-post, body.cgh .overlay-post, body.cgh .feat-grid .item-large, body.cgh .feat-grid .item-medium, body.cgh .feat-grid .item-small { border-radius: var(--cgh-radius); overflow: hidden; } body.cgh .overlay-post .media, body.cgh .grid-overlay .l-post .media { box-shadow: none; transform: none !important; } body.cgh .grid-overlay .l-post .content-wrap, body.cgh .overlay-post .content-wrap { background: linear-gradient(to top, rgba(6, 8, 12, .92) 0%, rgba(6, 8, 12, .55) 45%, rgba(6, 8, 12, 0) 100%); } /* Rounded tiles need air between them; the theme butts them together (2px). */ body.cgh .loop-overlay { --grid-gutter: 14px; } body.cgh .feat-grid { --grid-gap: 14px; } body.cgh .feat-grid-equals.static .slides { gap: var(--grid-gap); } /* A full-bleed row of equal tiles (eq3) keeps its outer tiles off the screen edge; the single-post hero (eq1) stays edge to edge and square. */ body.cgh .feat-grid-eq3-full { padding: 0 var(--grid-gap); } /* The full-width hero keeps square corners: it runs edge to edge. */ body.cgh .feat-grid-eq1-full, body.cgh .feat-grid-eq1-full .item { border-radius: 0; } /* The "author" is the import account; the source is credited on the post. */ body.cgh .post-meta .post-author, body.cgh .post-meta .post-author + .meta-sep { display: none; } /* ── Section headings ───────────────────────────────────────────────────── */ body.cgh .block-head .heading { font-size: 15px; font-weight: 800; letter-spacing: .09em; } body.cgh .block-head-c { border-bottom: 1px solid var(--c-separator); padding-bottom: 12px; } body.cgh .block-head-c .heading { position: relative; padding-left: 14px; } body.cgh .block-head-c .heading::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 1.05em; border-radius: 3px; background: var(--c-main); transform: translateY(-50%); } body.cgh .widget-title, body.cgh .block-head-g { border-radius: var(--cgh-radius-sm); overflow: hidden; } /* ── Buttons ────────────────────────────────────────────────────────────── */ body.cgh .ts-button, body.cgh .load-button, body.cgh input[type="submit"], body.cgh button[type="submit"] { border-radius: 999px; font-weight: 700; letter-spacing: .06em; transition: transform .2s var(--cgh-ease), box-shadow .2s, background .2s, color .2s, border-color .2s; } body.cgh .load-button { padding-left: 28px; padding-right: 28px; border-color: var(--c-separator); background: var(--c-contrast-0); } body.cgh .load-button:hover { border-color: var(--c-main); color: var(--c-main); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(var(--c-main-rgb), .8); } /* ── Sidebar ────────────────────────────────────────────────────────────── */ body.cgh .main-sidebar .widget { background: var(--c-contrast-0); border: 1px solid var(--c-separator); border-radius: var(--cgh-radius); padding: 18px; } html.s-dark body.cgh .main-sidebar .widget { background: rgba(255, 255, 255, .02); } body.cgh .main-sidebar .widget .widget-title, body.cgh .main-sidebar .widget .block-head { margin-top: -2px; } /* ── Single post ────────────────────────────────────────────────────────── */ body.cgh.single-post .the-post-header .post-title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.13; letter-spacing: -.022em; } body.cgh.single-post .post-content { font-size: 18px; line-height: 1.75; max-width: 720px; } body.cgh.single-post .post-content > p:first-of-type { font-size: 1.08em; color: var(--c-contrast-850, inherit); } /* Who wrote it — we did not. */ body.cgh .cgh-via { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px 6px 8px; border: 1px solid var(--c-separator); border-radius: 999px; background: var(--c-contrast-0); font-size: 13px; line-height: 1.4; } body.cgh .cgh-via-label { padding: 2px 9px; border-radius: 999px; background: rgba(var(--c-main-rgb), .14); color: var(--c-main); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } body.cgh .cgh-via-host { color: var(--c-contrast-450, #8a8f98); font-size: 12px; } /* The way out to the full story is the point of the page: make it a button. */ body.cgh .post-content .cgh-source { margin-top: 28px; } body.cgh .post-content .cgh-source a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--c-main); color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-decoration: none !important; box-shadow: 0 12px 26px -12px rgba(var(--c-main-rgb), .9); transition: transform .2s var(--cgh-ease), box-shadow .2s, filter .2s; } body.cgh .post-content .cgh-source a:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 32px -14px rgba(var(--c-main-rgb), 1); } body.cgh .post-share-bot, body.cgh .navigate-posts, body.cgh .related-posts { border-color: var(--c-separator); } body.cgh .post-share-b .service, body.cgh .post-share-bot .share-links a { border-radius: var(--cgh-radius-sm); } /* Archive headings ("Browsing: World of Warcraft") */ body.cgh .archive-heading, body.cgh .main-heading { letter-spacing: -.01em; } /* ── Footer ─────────────────────────────────────────────────────────────── */ body.cgh .main-footer { border-top: 1px solid rgba(255, 255, 255, .06); } body.cgh .main-footer .upper-footer { background: #0e1014; } body.cgh .main-footer .lower-footer { background: #090a0d; } body.cgh .main-footer .lower-footer .copyright { opacity: .7; font-size: 13px; } body.cgh .main-footer .footer-links a, body.cgh .main-footer .lower-footer .menu a { letter-spacing: .08em; font-weight: 600; transition: color .2s; } /* ── Motion: respect the visitor's setting ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.cgh *, body.cgh *::before, body.cgh *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } body.cgh .l-post:hover .media, body.cgh .l-post:hover .media .img { transform: none; } } /* ── Small screens ──────────────────────────────────────────────────────── */ @media (max-width: 767px) { body.cgh { --cgh-radius: 12px; } body.cgh.single-post .post-content { font-size: 17px; } body.cgh .post-content .cgh-source a { display: flex; justify-content: center; width: 100%; box-sizing: border-box; } body.cgh .main-sidebar .widget { padding: 16px; } }