/* * NTR Games — Custom Theme CSS * File: ntr-custom.css * Place in: wp-content/themes/YOUR-CHILD-THEME/ntr-custom.css * Then enqueue via child theme's functions.php (see Step 3 instructions) * * Structure: * 1. CSS Variables (dark + light) * 2. Reset / Base * 3. Fixed Navbar * 4. Hero Banner * 5. Filter Bar * 6. Daily Recommended section * 7. Gameplay section * 8. Recent Updates section * 9. All Games grid * 10. Pagination * 11. Site Footer * 12. Single Post — layout * 13. Single Post — info table * 14. Single Post — unified blocks (desc/screenshots/install) * 15. Single Post — download section * 16. Single Post — tags * 17. Single Post — related games * 18. Single Post — sidebar * 19. Redirect page * 20. Ad slots * 21. Dark / Light mode toggle button * 22. Live search dropdown * 23. Responsive (mobile) */ /* ══════════════════════════════════════════════════════════ 1. CSS VARIABLES ══════════════════════════════════════════════════════════ */ :root { /* backgrounds */ --ntrg-bg: #0d0d0f; --ntrg-bg2: #141416; --ntrg-bg3: #1c1c20; --ntrg-bg4: #242428; /* borders */ --ntrg-border: rgba(255,255,255,.075); --ntrg-border2: rgba(255,255,255,.15); /* text */ --ntrg-text: #f0eff4; --ntrg-text2: #a09fb8; --ntrg-text3: #6b6a80; /* accent (pink/crimson) */ --ntrg-accent: #c84b7a; --ntrg-accent2: #a03760; --ntrg-abg: rgba(200,75,122,.10); --ntrg-abdr: rgba(200,75,122,.22); /* blue */ --ntrg-blue: #4a9eff; --ntrg-bbg: rgba(74,158,255,.09); /* green */ --ntrg-green: #4fd6a0; --ntrg-gbg: rgba(79,214,160,.09); --ntrg-gbdr: rgba(79,214,160,.22); /* amber */ --ntrg-amber: #f5a623; --ntrg-ambg: rgba(245,166,35,.09); /* purple */ --ntrg-purple: #9b7fd4; --ntrg-pubg: rgba(155,127,212,.09); /* section label colour (teal-blue) */ --ntrg-sec: #38bdf8; --ntrg-sec-bg: rgba(56,189,248,.07); --ntrg-sec-bdr: rgba(56,189,248,.16); /* table key column colour (soft purple) */ --ntrg-key: #a78bfa; --ntrg-key-bg: rgba(167,139,250,.06); --ntrg-key-bdr: rgba(167,139,250,.14); /* filter chip unified (teal-blue) */ --ntrg-chip: #38bdf8; --ntrg-chip-bg: rgba(56,189,248,.09); --ntrg-chip-bdr: rgba(56,189,248,.20); /* daily section tint */ --ntrg-daily-bg: #160d12; --ntrg-daily-bdr: rgba(200,75,122,.15); /* nav */ --ntrg-nav-hover: rgba(255,255,255,.05); /* dimensions */ --ntrg-w: 1060px; --ntrg-nav-h: 64px; --ntrg-foot-h: 46px; --ntrg-r: 8px; --ntrg-rl: 12px; --ntrg-rxl: 16px; } /* Light mode overrides — applied when has class "ntrg-light" */ html.ntrg-light { --ntrg-bg: #f0eff5; --ntrg-bg2: #ffffff; --ntrg-bg3: #eae9f0; --ntrg-bg4: #dddce8; --ntrg-border: rgba(0,0,0,.065); --ntrg-border2: rgba(0,0,0,.13); --ntrg-text: #1a1a2e; --ntrg-text2: #56546e; --ntrg-text3: #9896aa; --ntrg-daily-bg: #fdf0f6; --ntrg-daily-bdr: rgba(200,75,122,.15); --ntrg-nav-hover: rgba(0,0,0,.05); --ntrg-sec: #0284c7; --ntrg-sec-bg: rgba(2,132,199,.06); --ntrg-sec-bdr: rgba(2,132,199,.14); --ntrg-key: #7c3aed; --ntrg-key-bg: rgba(124,58,237,.05); --ntrg-key-bdr: rgba(124,58,237,.12); --ntrg-chip: #0284c7; --ntrg-chip-bg: rgba(2,132,199,.08); --ntrg-chip-bdr: rgba(2,132,199,.18); } /* ══════════════════════════════════════════════════════════ 2. RESET / BASE ══════════════════════════════════════════════════════════ */ html, body { background: var(--ntrg-bg) !important; color: var(--ntrg-text) !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.55; min-height: 100vh; } *, *::before, *::after { box-sizing: border-box; } a { color: var(--ntrg-accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* site wrapper — flex column so footer sticks to bottom */ .ntrg-site { display: flex; flex-direction: column; min-height: 100vh; background: var(--ntrg-bg); } .ntrg-site-content { flex: 1; background: var(--ntrg-bg); } /* centred content wrapper */ .ntrg-cx { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; } /* ══════════════════════════════════════════════════════════ 3. FIXED / STICKY NAVBAR ══════════════════════════════════════════════════════════ */ .ntrg-navbar { background: var(--ntrg-bg2); border-bottom: 1px solid var(--ntrg-border); position: sticky; top: 0; z-index: 1000; width: 100%; } .ntrg-navbar-inner { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; height: var(--ntrg-nav-h); gap: 6px; } /* Logo */ .ntrg-logo { font-weight: 800; font-size: 17px; color: var(--ntrg-text) !important; display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-right: 10px; text-decoration: none !important; } .ntrg-logo-dot { width: 9px; height: 9px; background: var(--ntrg-accent); border-radius: 50%; flex-shrink: 0; } /* Nav links */ .ntrg-nav-links { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; } .ntrg-nav-link { padding: 7px 13px; border-radius: var(--ntrg-r); color: var(--ntrg-text2); font-size: 14px; cursor: pointer; transition: color .15s, background .15s; white-space: nowrap; font-weight: 500; letter-spacing: .01em; text-decoration: none !important; position: relative; } .ntrg-nav-link:hover { color: var(--ntrg-accent); background: var(--ntrg-nav-hover); text-decoration: none !important; } .ntrg-nav-link.active, .ntrg-nav-link.current-menu-item { color: var(--ntrg-accent); background: var(--ntrg-abg); font-weight: 700; } /* Active underline */ .ntrg-nav-link.active::after, .ntrg-nav-link.current-menu-item::after { content: ''; position: absolute; bottom: 5px; left: 13px; right: 13px; height: 2px; background: var(--ntrg-accent); border-radius: 1px; } /* Surprise me pill */ .ntrg-surprise { padding: 7px 14px; border-radius: 20px; color: var(--ntrg-accent); background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); font-size: 14px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; font-weight: 600; margin-left: 4px; text-decoration: none !important; } .ntrg-surprise:hover { background: var(--ntrg-accent); color: #fff !important; text-decoration: none !important; } /* Right side of navbar */ .ntrg-nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Search box */ .ntrg-search { display: flex; align-items: center; gap: 6px; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-r); padding: 7px 13px; width: 200px; transition: border-color .15s, background .15s; position: relative; } .ntrg-search:focus-within { border-color: var(--ntrg-accent); background: var(--ntrg-abg); } .ntrg-search input { background: none; border: none; outline: none; color: var(--ntrg-text); font-size: 13px; width: 100%; } .ntrg-search input::placeholder { color: var(--ntrg-text3); } .ntrg-search-icon { color: var(--ntrg-text3); font-size: 14px; flex-shrink: 0; } /* Theme toggle button */ .ntrg-theme-btn { width: 34px; height: 34px; border-radius: var(--ntrg-r); background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; flex-shrink: 0; transition: border-color .15s, background .15s; color: var(--ntrg-text2); } .ntrg-theme-btn:hover { border-color: var(--ntrg-accent); background: var(--ntrg-abg); } /* ══════════════════════════════════════════════════════════ 4. HERO BANNER ══════════════════════════════════════════════════════════ */ .ntrg-hero { background: var(--ntrg-bg2); border-bottom: 1px solid var(--ntrg-border); padding: 16px 0; } .ntrg-hero h1 { font-size: 20px; font-weight: 700; color: var(--ntrg-text) !important; margin-bottom: 4px; line-height: 1.2; } .ntrg-hero p { font-size: 12px; color: var(--ntrg-text2); margin: 0; } /* ══════════════════════════════════════════════════════════ 5. FILTER BAR ══════════════════════════════════════════════════════════ */ .ntrg-filter-bar { background: var(--ntrg-bg2); border-bottom: 1px solid var(--ntrg-border); padding: 10px 0; } .ntrg-filter-inner { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .ntrg-filter-label { font-size: 11px; color: var(--ntrg-text3); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-right: 2px; flex-shrink: 0; } .ntrg-chip { padding: 5px 13px; border-radius: 20px; border: 1px solid var(--ntrg-border); background: var(--ntrg-bg3); color: var(--ntrg-text2); font-size: 12px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; white-space: nowrap; font-weight: 500; text-decoration: none !important; display: inline-flex; align-items: center; } .ntrg-chip:hover { border-color: var(--ntrg-chip-bdr); color: var(--ntrg-chip); background: var(--ntrg-chip-bg); text-decoration: none !important; } .ntrg-chip.active, .ntrg-chip.current { background: var(--ntrg-chip-bg); border-color: var(--ntrg-chip-bdr); color: var(--ntrg-chip); font-weight: 700; } .ntrg-filter-sep { width: 1px; height: 14px; background: var(--ntrg-border2); margin: 0 2px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ 6. SECTION COMMON ══════════════════════════════════════════════════════════ */ .ntrg-section { padding: 18px 0; } .ntrg-section-inner { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; } .ntrg-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ntrg-section-title { font-size: 13px; font-weight: 700; color: var(--ntrg-text); display: flex; align-items: center; gap: 8px; } .ntrg-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; } .ntrg-badge-accent { background: var(--ntrg-accent); color: #fff; } .ntrg-badge-green { background: var(--ntrg-green); color: #083020; } .ntrg-view-all { font-size: 11px; color: var(--ntrg-accent); cursor: pointer; white-space: nowrap; transition: opacity .15s; } .ntrg-view-all:hover { opacity: .75; text-decoration: none !important; } /* ══════════════════════════════════════════════════════════ 6b. DAILY RECOMMENDED ══════════════════════════════════════════════════════════ */ .ntrg-daily-section { background: var(--ntrg-daily-bg); border-top: 1px solid var(--ntrg-daily-bdr); border-bottom: 1px solid var(--ntrg-daily-bdr); padding: 18px 0; } .ntrg-daily-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .ntrg-daily-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; text-decoration: none !important; display: block; } .ntrg-daily-card:hover { border-color: var(--ntrg-accent); transform: scale(1.04); text-decoration: none !important; } .ntrg-daily-thumb { width: 100%; aspect-ratio: 2/3; background: var(--ntrg-bg4); overflow: hidden; position: relative; } .ntrg-daily-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ntrg-daily-name { padding: 6px 8px; font-size: 11px; font-weight: 600; color: var(--ntrg-text); line-height: 1.3; } /* ══════════════════════════════════════════════════════════ 7. GAMEPLAY SECTION ══════════════════════════════════════════════════════════ */ .ntrg-gameplay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ntrg-gameplay-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; cursor: pointer; transition: border-color .15s; display: block; text-decoration: none !important; } .ntrg-gameplay-card:hover { border-color: var(--ntrg-border2); } .ntrg-gameplay-thumb { width: 100%; height: 120px; background: var(--ntrg-bg4); position: relative; overflow: hidden; } .ntrg-gameplay-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ntrg-play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; } .ntrg-play-btn { width: 32px; height: 32px; background: var(--ntrg-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; transition: transform .15s; } .ntrg-gameplay-card:hover .ntrg-play-btn { transform: scale(1.1); } .ntrg-gameplay-name { padding: 8px 11px; font-size: 12px; font-weight: 600; color: var(--ntrg-text); } /* ══════════════════════════════════════════════════════════ 8. RECENT UPDATES & ALL GAMES SHARED CARD COVER ══════════════════════════════════════════════════════════ */ /* Unified 16:9 cover for both Recent Updates and All Games */ .ntrg-card-cover { width: 100%; aspect-ratio: 16/9; background: var(--ntrg-bg4); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--ntrg-text3); } .ntrg-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Recent Updates grid */ .ntrg-updates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ntrg-update-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; text-decoration: none !important; } .ntrg-update-card:hover { border-color: var(--ntrg-border2); transform: translateY(-2px); text-decoration: none !important; } .ntrg-update-info { padding: 10px 12px; flex: 1; } .ntrg-update-title { font-size: 12px; font-weight: 700; color: var(--ntrg-text); margin-bottom: 5px; line-height: 1.3; } .ntrg-update-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; } .ntrg-update-date { font-size: 10px; color: var(--ntrg-text3); } /* version badge */ .ntrg-ver-badge { font-size: 9px; background: var(--ntrg-gbg); color: var(--ntrg-green); padding: 2px 6px; border-radius: 4px; font-weight: 700; border: 1px solid var(--ntrg-gbdr); } /* ══════════════════════════════════════════════════════════ 9. ALL GAMES GRID ══════════════════════════════════════════════════════════ */ .ntrg-games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .ntrg-game-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; position: relative; text-decoration: none !important; display: block; } .ntrg-game-card:hover { border-color: var(--ntrg-border2); transform: translateY(-2px); text-decoration: none !important; } /* Sponsored card */ .ntrg-game-card.ntrg-sponsored { border-color: var(--ntrg-amber) !important; } .ntrg-sponsored-label { position: absolute; top: 6px; right: 6px; background: var(--ntrg-amber); color: #2a1400; font-size: 8px; font-weight: 700; padding: 2px 5px; border-radius: 3px; z-index: 2; text-transform: uppercase; } .ntrg-game-info { padding: 9px 11px; } .ntrg-game-title { font-size: 12px; font-weight: 600; color: var(--ntrg-text); line-height: 1.3; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ntrg-game-meta { display: flex; gap: 3px; flex-wrap: wrap; } /* pills */ .ntrg-pill { font-size: 9px; padding: 2px 5px; border-radius: 4px; font-weight: 600; } .ntrg-pill-blue { background: var(--ntrg-bbg); color: var(--ntrg-blue); } .ntrg-pill-green { background: var(--ntrg-gbg); color: var(--ntrg-green); } .ntrg-pill-amber { background: var(--ntrg-ambg); color: var(--ntrg-amber); } .ntrg-pill-gray { background: var(--ntrg-bg4); color: var(--ntrg-text3); } .ntrg-pill-accent { background: var(--ntrg-abg); color: var(--ntrg-accent); } /* ══════════════════════════════════════════════════════════ 10. PAGINATION ══════════════════════════════════════════════════════════ */ .ntrg-pagination { display: flex; gap: 4px; justify-content: center; align-items: center; padding: 22px 0; flex-wrap: wrap; } .ntrg-page-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--ntrg-r); border: 1px solid var(--ntrg-border); background: var(--ntrg-bg2); color: var(--ntrg-text2); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; text-decoration: none !important; } .ntrg-page-btn:hover { border-color: var(--ntrg-border2); color: var(--ntrg-text); text-decoration: none !important; } .ntrg-page-btn.current, .ntrg-page-btn.active { background: var(--ntrg-accent); border-color: var(--ntrg-accent); color: #fff; font-weight: 700; } .ntrg-page-dots { color: var(--ntrg-text3); font-size: 12px; padding: 0 4px; } /* ══════════════════════════════════════════════════════════ 11. SITE FOOTER (fixed/sticky to bottom) ══════════════════════════════════════════════════════════ */ .ntrg-footer { background: var(--ntrg-bg2); border-top: 1px solid var(--ntrg-border); width: 100%; } .ntrg-footer-inner { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; height: var(--ntrg-foot-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .ntrg-footer-links { display: flex; gap: 14px; flex-wrap: wrap; } .ntrg-footer-link { font-size: 11px; color: var(--ntrg-text3); cursor: pointer; transition: color .15s; text-decoration: none !important; } .ntrg-footer-link:hover { color: var(--ntrg-accent); text-decoration: none !important; } /* ══════════════════════════════════════════════════════════ 12. SINGLE POST — LAYOUT (main + sidebar) ══════════════════════════════════════════════════════════ */ .ntrg-post-body { max-width: var(--ntrg-w); margin: 0 auto; padding: 24px 20px; display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: start; } .ntrg-post-main { min-width: 0; } /* breadcrumb */ .ntrg-crumb { font-size: 11px; color: var(--ntrg-text3); margin-bottom: 10px; } .ntrg-crumb a { color: var(--ntrg-accent); } /* post header title row */ .ntrg-post-title-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ntrg-border); } .ntrg-post-cover { width: 110px; min-width: 110px; height: 78px; border-radius: var(--ntrg-rl); overflow: hidden; background: var(--ntrg-bg4); flex-shrink: 0; } .ntrg-post-cover img { width: 100%; height: 100%; object-fit: cover; } .ntrg-post-meta { flex: 1; } .ntrg-post-title { font-size: 22px; font-weight: 700; color: var(--ntrg-text) !important; margin-bottom: 8px; line-height: 1.3; } .ntrg-post-pills { display: flex; gap: 5px; flex-wrap: wrap; } .ntrg-post-pill { font-size: 11px; padding: 4px 10px; border-radius: var(--ntrg-r); font-weight: 600; } /* ══════════════════════════════════════════════════════════ 13. SINGLE POST — INFO TABLE ══════════════════════════════════════════════════════════ */ .ntrg-info-table { border: 1px solid var(--ntrg-key-bdr); border-radius: var(--ntrg-rl); overflow: hidden; margin-bottom: 18px; } .ntrg-info-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--ntrg-key-bdr); } .ntrg-info-row:last-child { border-bottom: none; } .ntrg-info-key { font-size: 11px; color: var(--ntrg-key); font-weight: 700; width: 120px; min-width: 120px; padding: 11px 14px; border-right: 1px solid var(--ntrg-key-bdr); background: var(--ntrg-key-bg); display: flex; align-items: center; } .ntrg-info-val { font-size: 13px; color: var(--ntrg-text); padding: 11px 14px; flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--ntrg-bg2); } .ntrg-info-row:nth-child(even) .ntrg-info-val { background: var(--ntrg-bg3); } /* version highlight — green */ .ntrg-version-badge { font-size: 11px; font-weight: 700; color: var(--ntrg-green); background: var(--ntrg-gbg); border: 1px solid var(--ntrg-gbdr); padding: 3px 10px; border-radius: var(--ntrg-r); } /* developer platform links */ .ntrg-dev-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .ntrg-dev-link { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--ntrg-r); font-size: 10px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; border: 1px solid; text-decoration: none !important; } .ntrg-dev-link img { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; } /* per-service colours */ .ntrg-dev-patreon { background:rgba(255,66,77,.09); color:#ff424d; border-color:rgba(255,66,77,.22); } .ntrg-dev-patreon:hover { background:#ff424d; color:#fff; } .ntrg-dev-pixiv { background:rgba(0,150,250,.09); color:#0096fa; border-color:rgba(0,150,250,.22); } .ntrg-dev-pixiv:hover { background:#0096fa; color:#fff; } .ntrg-dev-dlsite { background:rgba(255,107,0,.09); color:#ff6b00; border-color:rgba(255,107,0,.22); } .ntrg-dev-dlsite:hover { background:#ff6b00; color:#fff; } .ntrg-dev-cien { background:rgba(0,168,168,.09); color:#00a8a8; border-color:rgba(0,168,168,.22); } .ntrg-dev-cien:hover { background:#00a8a8; color:#fff; } .ntrg-dev-vndb { background:rgba(61,107,153,.09); color:#3d6b99; border-color:rgba(61,107,153,.22); } .ntrg-dev-vndb:hover { background:#3d6b99; color:#fff; } .ntrg-dev-twitter { background:rgba(29,155,240,.09); color:#1d9bf0; border-color:rgba(29,155,240,.22); } .ntrg-dev-twitter:hover { background:#1d9bf0; color:#fff; } .ntrg-dev-discord { background:rgba(88,101,242,.09); color:#5865f2; border-color:rgba(88,101,242,.22); } .ntrg-dev-discord:hover { background:#5865f2; color:#fff; } .ntrg-dev-steam { background:rgba(26,159,255,.09); color:#1a9fff; border-color:rgba(26,159,255,.22); } .ntrg-dev-steam:hover { background:#1a9fff; color:#fff; } .ntrg-dev-subscribestar { background:rgba(0,188,140,.09); color:#00bc8c; border-color:rgba(0,188,140,.22); } .ntrg-dev-subscribestar:hover { background:#00bc8c; color:#fff; } /* ══════════════════════════════════════════════════════════ 14. SINGLE POST — UNIFIED BLOCKS (desc / screenshots / install) ══════════════════════════════════════════════════════════ */ .ntrg-unified-block { background: var(--ntrg-sec-bg); border: 1px solid var(--ntrg-sec-bdr); border-radius: var(--ntrg-rl); padding: 15px 17px; margin-bottom: 18px; } /* section label with left accent bar */ .ntrg-sec-label { font-size: 11px; font-weight: 700; color: var(--ntrg-sec); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .ntrg-sec-label::before { content: ''; width: 3px; height: 14px; background: var(--ntrg-sec); border-radius: 2px; flex-shrink: 0; } /* description text */ .ntrg-desc-text { font-size: 13px; color: var(--ntrg-text2); line-height: 1.75; } /* screenshots slider */ .ntrg-ss-row { display: flex; gap: 12px; overflow: hidden; } .ntrg-ss-slide { flex: 0 0 48%; border-radius: var(--ntrg-rl); border: 1px solid var(--ntrg-sec-bdr); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s; background: var(--ntrg-bg4); position: relative; } .ntrg-ss-slide:hover { border-color: var(--ntrg-sec); transform: scale(1.01); } .ntrg-ss-slide img { width: 100%; height: 210px; object-fit: cover; display: block; } /* enlarge hint */ .ntrg-ss-slide::after { content: '🔍 Click to enlarge'; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; border-radius: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; } .ntrg-ss-slide:hover::after { opacity: 1; } /* dot indicators */ .ntrg-ss-dots { display: flex; gap: 5px; margin-top: 10px; justify-content: center; } .ntrg-ss-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ntrg-border2); transition: background .2s, width .2s; cursor: pointer; } .ntrg-ss-dot.active { background: var(--ntrg-sec); width: 18px; border-radius: 3px; } /* installation steps */ .ntrg-install-step { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 7px; font-size: 13px; color: var(--ntrg-text2); } .ntrg-install-step:last-child { margin-bottom: 0; } .ntrg-step-num { width: 20px; min-width: 20px; height: 20px; background: var(--ntrg-sec); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* ══════════════════════════════════════════════════════════ 15. SINGLE POST — DOWNLOAD SECTION ══════════════════════════════════════════════════════════ */ .ntrg-dl-section { border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; margin-bottom: 18px; } .ntrg-dl-header { background: var(--ntrg-accent); padding: 12px 16px; } .ntrg-dl-header span { font-size: 14px; font-weight: 700; color: #fff; } .ntrg-dl-row { padding: 11px 16px; border-bottom: 1px solid var(--ntrg-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ntrg-dl-row:last-child { border-bottom: none; } .ntrg-dl-row:nth-child(odd) { background: var(--ntrg-bg2); } .ntrg-dl-row:nth-child(even) { background: var(--ntrg-bg3); } /* platform name column */ .ntrg-dl-platform { display: flex; align-items: center; gap: 8px; min-width: 120px; } /* platform icon badge */ .ntrg-plat-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .ntrg-plat-icon img { width: 20px; height: 20px; object-fit: contain; } /* per-platform icon colours (used as fallback bg when no img) */ .ntrg-plat-win { background: rgba(0,120,212,.12); } .ntrg-plat-mac { background: rgba(200,200,210,.12); } .ntrg-plat-linux { background: rgba(233,80,0,.10); } .ntrg-plat-android { background: rgba(61,220,132,.12); } .ntrg-plat-html { background: rgba(227,76,38,.10); } .ntrg-plat-html5 { background: rgba(227,76,38,.10); } .ntrg-plat-label { font-size: 12px; font-weight: 700; color: var(--ntrg-text2); } /* host buttons */ .ntrg-dl-buttons { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } .ntrg-dl-btn { display: flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: var(--ntrg-r); border: 1px solid var(--ntrg-border2); background: var(--ntrg-bg4); color: var(--ntrg-text); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s; font-weight: 600; white-space: nowrap; text-decoration: none !important; } .ntrg-dl-btn:hover { border-color: var(--ntrg-accent); color: var(--ntrg-accent); background: var(--ntrg-abg); transform: translateY(-1px); text-decoration: none !important; } /* host icon inside button */ .ntrg-host-icon { width: 17px; height: 17px; border-radius: 3px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ntrg-host-icon img { width: 17px; height: 17px; object-fit: contain; } .ntrg-or-sep { font-size: 10px; color: var(--ntrg-text3); } /* warning box */ .ntrg-warning-box { background: var(--ntrg-ambg); border: 1px solid var(--ntrg-amber); border-radius: var(--ntrg-r); padding: 11px 15px; margin-bottom: 18px; font-size: 12px; color: var(--ntrg-amber); line-height: 1.65; } /* ══════════════════════════════════════════════════════════ 16. SINGLE POST — TAGS (colorized) ══════════════════════════════════════════════════════════ */ .ntrg-tags-wrap { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; } .ntrg-tag { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; border: 1px solid; text-decoration: none !important; } /* colour families — applied via PHP based on tag slug */ .ntrg-tag-pink { background: var(--ntrg-abg); color: var(--ntrg-accent); border-color: var(--ntrg-abdr); } .ntrg-tag-pink:hover { background: var(--ntrg-accent); color: #fff; } .ntrg-tag-blue { background: var(--ntrg-bbg); color: var(--ntrg-blue); border-color: rgba(74,158,255,.22); } .ntrg-tag-blue:hover { background: var(--ntrg-blue); color: #fff; } .ntrg-tag-green { background: var(--ntrg-gbg); color: var(--ntrg-green); border-color: var(--ntrg-gbdr); } .ntrg-tag-green:hover { background: var(--ntrg-green); color: #083020; } .ntrg-tag-purple { background: var(--ntrg-pubg); color: var(--ntrg-purple); border-color: rgba(155,127,212,.22); } .ntrg-tag-purple:hover { background: var(--ntrg-purple); color: #fff; } .ntrg-tag-amber { background: var(--ntrg-ambg); color: var(--ntrg-amber); border-color: rgba(245,166,35,.22); } .ntrg-tag-amber:hover { background: var(--ntrg-amber); color: #2a1a00; } /* ══════════════════════════════════════════════════════════ 17. SINGLE POST — RELATED GAMES ══════════════════════════════════════════════════════════ */ .ntrg-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; margin-bottom: 26px; } .ntrg-related-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; text-decoration: none !important; display: block; } .ntrg-related-card:hover { border-color: var(--ntrg-border2); transform: translateY(-2px); text-decoration: none !important; } .ntrg-related-cover { width: 100%; aspect-ratio: 16/9; background: var(--ntrg-bg4); overflow: hidden; position: relative; } .ntrg-related-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ntrg-related-info { padding: 9px 11px; } .ntrg-related-title { font-size: 13px; font-weight: 600; color: var(--ntrg-text); margin-bottom: 4px; line-height: 1.3; } .ntrg-related-meta { display: flex; gap: 3px; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════ 18. SINGLE POST — SIDEBAR ══════════════════════════════════════════════════════════ */ .ntrg-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--ntrg-nav-h) + 16px); } .ntrg-scard { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rl); overflow: hidden; } .ntrg-scard-title { font-size: 11px; font-weight: 700; color: var(--ntrg-text3); text-transform: uppercase; letter-spacing: .5px; padding: 10px 14px; border-bottom: 1px solid var(--ntrg-border); background: var(--ntrg-bg3); } .ntrg-scard-body { padding: 10px 14px; } /* developer card */ .ntrg-dev-card { padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; } .ntrg-dev-row { display: flex; align-items: center; gap: 10px; } .ntrg-dev-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; overflow: hidden; } .ntrg-dev-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ntrg-dev-name { font-size: 13px; font-weight: 700; color: var(--ntrg-text); } .ntrg-dev-sub { font-size: 11px; color: var(--ntrg-text3); } .ntrg-dev-btn { width: 100%; padding: 9px; border-radius: var(--ntrg-r); background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); color: var(--ntrg-accent); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: background .15s, color .15s; text-decoration: none !important; display: block; } .ntrg-dev-btn:hover { background: var(--ntrg-accent); color: #fff !important; text-decoration: none !important; } /* more from dev — bigger thumbnails */ .ntrg-sidebar-game { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ntrg-border); cursor: pointer; transition: opacity .15s; text-decoration: none !important; } .ntrg-sidebar-game:last-child { border-bottom: none; } .ntrg-sidebar-game:hover { opacity: .78; text-decoration: none !important; } .ntrg-sg-thumb { width: 70px; min-width: 70px; height: 46px; border-radius: 6px; background: var(--ntrg-bg4); overflow: hidden; position: relative; flex-shrink: 0; } .ntrg-sg-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ntrg-sg-info { flex: 1; min-width: 0; } .ntrg-sg-title { font-size: 12px; font-weight: 600; color: var(--ntrg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; transition: color .15s; } .ntrg-sidebar-game:hover .ntrg-sg-title { color: var(--ntrg-accent); } .ntrg-sg-meta { display: flex; gap: 3px; flex-wrap: wrap; } /* popular tags in sidebar */ .ntrg-sidebar-tags { display: flex; gap: 5px; flex-wrap: wrap; padding: 10px 14px; } .ntrg-sidebar-tag { padding: 4px 9px; border-radius: 12px; font-size: 10px; font-weight: 600; cursor: pointer; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border); color: var(--ntrg-text2); transition: border-color .15s, color .15s; text-decoration: none !important; } .ntrg-sidebar-tag:hover { border-color: var(--ntrg-accent); color: var(--ntrg-accent); text-decoration: none !important; } /* ══════════════════════════════════════════════════════════ 19. REDIRECT PAGE ══════════════════════════════════════════════════════════ */ .ntrg-redirect-page { background: var(--ntrg-bg); min-height: 100vh; display: flex; flex-direction: column; } .ntrg-redirect-body { flex: 1; background: var(--ntrg-bg); display: flex; align-items: center; justify-content: center; padding: 40px 20px 60px; } .ntrg-redirect-card { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: var(--ntrg-rxl); padding: 28px 26px; width: 100%; max-width: 400px; text-align: center; } .ntrg-redirect-logo { font-size: 14px; font-weight: 700; color: var(--ntrg-text); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 16px; } .ntrg-redirect-cover { width: 100%; height: 140px; background: var(--ntrg-bg4); border-radius: var(--ntrg-rl); overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .ntrg-redirect-cover img { width: 100%; height: 100%; object-fit: cover; } .ntrg-redirect-game-name { font-size: 15px; font-weight: 700; color: var(--ntrg-text); margin-bottom: 5px; } .ntrg-redirect-host-row { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--ntrg-text2); margin-bottom: 22px; } .ntrg-host-badge { display: flex; align-items: center; gap: 5px; background: var(--ntrg-bbg); border: 1px solid var(--ntrg-blue); border-radius: var(--ntrg-r); padding: 3px 9px; font-size: 10px; color: var(--ntrg-blue); font-weight: 700; } .ntrg-host-badge img { width: 14px; height: 14px; object-fit: contain; } /* countdown ring */ .ntrg-ring-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; } .ntrg-ring-wrap svg { display: block; transform: rotate(-90deg); } .ntrg-ring-bg { fill: none; stroke: var(--ntrg-border2); stroke-width: 8; } .ntrg-ring-fg { fill: none; stroke: var(--ntrg-accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1s linear; } .ntrg-ring-fg.done { stroke: var(--ntrg-green); } .ntrg-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .ntrg-ring-num { font-size: 28px; font-weight: 700; color: var(--ntrg-text); line-height: 1; } .ntrg-ring-check { font-size: 24px; color: var(--ntrg-green); display: none; line-height: 1; } /* download button */ .ntrg-redirect-btn { width: 100%; padding: 14px; background: var(--ntrg-accent); color: #fff; border: none; border-radius: var(--ntrg-rl); font-size: 14px; font-weight: 700; cursor: pointer; display: none; margin-bottom: 10px; transition: background .15s, transform .15s; } .ntrg-redirect-btn:hover { background: var(--ntrg-accent2); transform: translateY(-1px); } .ntrg-redirect-note { font-size: 10px; color: var(--ntrg-text3); margin-bottom: 10px; } .ntrg-redirect-enc { font-size: 10px; color: var(--ntrg-text3); background: var(--ntrg-bg3); border-radius: var(--ntrg-r); padding: 7px 10px; margin-bottom: 12px; word-break: break-all; font-family: monospace; text-align: left; } .ntrg-redirect-socials { display: flex; gap: 6px; justify-content: center; padding-top: 12px; border-top: 1px solid var(--ntrg-border); } .ntrg-social-btn { padding: 5px 12px; border-radius: var(--ntrg-r); border: 1px solid var(--ntrg-border); background: var(--ntrg-bg3); font-size: 11px; color: var(--ntrg-text2); cursor: pointer; transition: border-color .15s, color .15s; text-decoration: none !important; display: inline-flex; align-items: center; gap: 5px; } .ntrg-social-btn:hover { border-color: var(--ntrg-accent); color: var(--ntrg-accent); text-decoration: none !important; } /* ══════════════════════════════════════════════════════════ 20. AD SLOTS — invisible until filled ══════════════════════════════════════════════════════════ */ .ntrg-ad-slot { width: 100%; display: none; /* hidden by default */ } .ntrg-ad-slot.has-content { display: block; /* PHP adds this class when ad code is present */ margin: 14px 0; text-align: center; } /* ══════════════════════════════════════════════════════════ 21. DARK/LIGHT MODE TOGGLE ICON ══════════════════════════════════════════════════════════ */ .ntrg-theme-icon-sun { display: none; } .ntrg-theme-icon-moon { display: inline; } html.ntrg-light .ntrg-theme-icon-sun { display: inline; } html.ntrg-light .ntrg-theme-icon-moon { display: none; } /* ══════════════════════════════════════════════════════════ 22. LIVE SEARCH DROPDOWN ══════════════════════════════════════════════════════════ */ .ntrg-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border2); border-radius: var(--ntrg-rl); box-shadow: 0 8px 32px rgba(0,0,0,.35); z-index: 500; overflow: hidden; display: none; } .ntrg-search-dropdown.open { display: block; } .ntrg-search-result { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--ntrg-border); text-decoration: none !important; } .ntrg-search-result:last-child { border-bottom: none; } .ntrg-search-result:hover { background: var(--ntrg-bg3); text-decoration: none !important; } .ntrg-sr-thumb { width: 44px; height: 30px; border-radius: 5px; background: var(--ntrg-bg4); overflow: hidden; flex-shrink: 0; } .ntrg-sr-thumb img { width: 100%; height: 100%; object-fit: cover; } .ntrg-sr-info { flex: 1; min-width: 0; } .ntrg-sr-title { font-size: 12px; font-weight: 600; color: var(--ntrg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .ntrg-sr-meta { display: flex; gap: 4px; flex-wrap: wrap; } .ntrg-search-no-results { padding: 12px; font-size: 12px; color: var(--ntrg-text3); text-align: center; } .ntrg-search-loading { padding: 12px; font-size: 12px; color: var(--ntrg-text3); text-align: center; } /* ══════════════════════════════════════════════════════════ 23. RESPONSIVE (MOBILE) ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .ntrg-post-body { grid-template-columns: 1fr; } .ntrg-sidebar { position: static; } .ntrg-daily-grid { grid-template-columns: repeat(3, 1fr); } .ntrg-games-grid, .ntrg-updates-grid, .ntrg-gameplay-grid { grid-template-columns: repeat(2, 1fr); } .ntrg-related-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { :root { --ntrg-nav-h: 54px; } .ntrg-navbar-inner { padding: 0 14px; gap: 8px; } /* hide nav links on mobile — show only logo + search + toggle */ .ntrg-nav-links, .ntrg-surprise { display: none; } .ntrg-search { width: 130px; } .ntrg-daily-grid { grid-template-columns: repeat(2, 1fr); } .ntrg-games-grid, .ntrg-updates-grid { grid-template-columns: 1fr; } .ntrg-gameplay-grid { grid-template-columns: 1fr; } .ntrg-post-title-row { flex-direction: column; } .ntrg-post-cover { width: 100%; min-width: 0; height: 130px; } .ntrg-ss-row { flex-direction: column; } .ntrg-ss-slide { flex: 0 0 100%; } .ntrg-redirect-body { padding: 20px 14px 40px; align-items: flex-end; } .ntrg-redirect-card { border-radius: 20px 20px 0 0; max-width: 100%; } .ntrg-footer-inner { flex-direction: column; height: auto; padding: 10px 14px; gap: 6px; } } /* ══════════════════════════════════════════════════════════ GRIDLOVE HOMEPAGE OVERRIDES These target Gridlove's own HTML classes to apply our design without replacing the template files. ══════════════════════════════════════════════════════════ */ /* Page background */ body, #page, .site, #content, .site-content, .content-area { background: var(--ntrg-bg) !important; color: var(--ntrg-text) !important; } /* Gridlove header override */ #masthead, .site-header, .meks-header { background: var(--ntrg-bg2) !important; border-bottom: 1px solid var(--ntrg-border) !important; box-shadow: none !important; } /* Gridlove logo */ .site-branding .site-title a, .site-branding .site-title { color: var(--ntrg-text) !important; } /* Gridlove nav menu */ .main-navigation, .nav-menu { background: transparent !important; } .main-navigation a, .nav-menu > li > a { color: var(--ntrg-text2) !important; font-size: 14px !important; font-weight: 500 !important; transition: color .15s !important; } .main-navigation a:hover, .nav-menu > li > a:hover, .main-navigation .current-menu-item > a, .nav-menu > .current-menu-item > a { color: var(--ntrg-accent) !important; } /* Gridlove post cards */ .meks-module-post, .meks-module article, .meks-pf-item, article.post { background: var(--ntrg-bg2) !important; border: 1px solid var(--ntrg-border) !important; border-radius: var(--ntrg-rl) !important; overflow: hidden !important; transition: border-color .15s, transform .15s !important; } .meks-module-post:hover, .meks-module article:hover, .meks-pf-item:hover { border-color: var(--ntrg-border2) !important; transform: translateY(-2px) !important; } /* Card titles */ .meks-module-post .entry-title a, .meks-module article .entry-title a, .meks-pf-item .entry-title a, .entry-title a { color: var(--ntrg-text) !important; font-weight: 600 !important; } .meks-module-post .entry-title a:hover, .entry-title a:hover { color: var(--ntrg-accent) !important; text-decoration: none !important; } /* Card meta */ .meks-module-post .entry-meta, .entry-meta, .cat-links, .posted-on { color: var(--ntrg-text3) !important; font-size: 11px !important; } /* Category labels */ .cat-links a, .entry-meta .cat-links a { background: var(--ntrg-abg) !important; color: var(--ntrg-accent) !important; border-radius: 4px !important; padding: 2px 6px !important; font-size: 10px !important; font-weight: 700 !important; text-decoration: none !important; } /* Thumbnails — object-fit cover for all aspect ratios */ .meks-module-post .post-thumbnail img, .meks-module article .post-thumbnail img, .meks-pf-item .post-thumbnail img, .post-thumbnail img, .wp-post-image { object-fit: cover !important; width: 100% !important; } /* Gridlove module section headers */ .meks-module-header, .meks-module-title, .widget-title { color: var(--ntrg-text) !important; font-size: 13px !important; font-weight: 700 !important; border-bottom: 1px solid var(--ntrg-border) !important; padding-bottom: 10px !important; margin-bottom: 14px !important; } /* Gridlove sidebar */ #secondary, .widget-area, .sidebar { background: transparent !important; } .widget { background: var(--ntrg-bg2) !important; border: 1px solid var(--ntrg-border) !important; border-radius: var(--ntrg-rl) !important; padding: 16px !important; margin-bottom: 16px !important; } /* Gridlove footer */ #colophon, .site-footer { background: var(--ntrg-bg2) !important; border-top: 1px solid var(--ntrg-border) !important; color: var(--ntrg-text3) !important; } #colophon a, .site-footer a { color: var(--ntrg-text3) !important; } #colophon a:hover, .site-footer a:hover { color: var(--ntrg-accent) !important; } /* Gridlove pagination */ .page-numbers { background: var(--ntrg-bg2) !important; border: 1px solid var(--ntrg-border) !important; color: var(--ntrg-text2) !important; border-radius: var(--ntrg-r) !important; padding: 6px 12px !important; transition: border-color .15s !important; } .page-numbers.current, .page-numbers:hover { background: var(--ntrg-accent) !important; border-color: var(--ntrg-accent) !important; color: #fff !important; } /* Gridlove cover area / hero */ .meks-cover, .meks-cover-area { background: var(--ntrg-bg2) !important; border-bottom: 1px solid var(--ntrg-border) !important; } /* Search form */ .search-field { background: var(--ntrg-bg3) !important; border: 1px solid var(--ntrg-border) !important; color: var(--ntrg-text) !important; border-radius: var(--ntrg-r) !important; } /* Links globally */ a { color: var(--ntrg-accent); } a:hover { color: var(--ntrg-accent2); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--ntrg-bg3); } ::-webkit-scrollbar-thumb { background: var(--ntrg-border2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ntrg-accent); } /* ══════════════════════════════════════════════════════════ HERO + FILTER — injected above Gridlove modules via hook ══════════════════════════════════════════════════════════ */ .ntrg-hp-top { background: var(--ntrg-bg); } .ntrg-hp-top .ntrg-hero { background: var(--ntrg-bg2); border-bottom: 1px solid var(--ntrg-border); padding: 16px 0; } .ntrg-hp-top .ntrg-hero h1 { font-size: 20px; font-weight: 700; color: var(--ntrg-text); margin-bottom: 4px; } .ntrg-hp-top .ntrg-hero p { font-size: 12px; color: var(--ntrg-text2); margin: 0; } /* ══════════════════════════════════════════════════════════ 24. v2.0 ADDITIONS — slider (single-slide mode), lightbox, floating dark/light toggle ══════════════════════════════════════════════════════════ */ /* ── Screenshot slider: peek carousel (~1.5 slides visible) ── */ .ntrg-ss-view { overflow: hidden; border-radius: 10px; } .ntrg-ss-track { display: flex; gap: 12px; transition: transform .35s ease; will-change: transform; } .ntrg-ss-view .ntrg-ss-slide { flex: 0 0 64%; margin: 0; } .ntrg-ss-view .ntrg-ss-slide img { width: 100%; height: 215px; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in; } /* arrows + dots row */ .ntrg-ss-arrows { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; } .ntrg-ss-ab { background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); color: var(--ntrg-accent); border-radius: 8px; padding: 5px 16px; cursor: pointer; font-size: 18px; line-height: 1; transition: background .15s, color .15s; } .ntrg-ss-ab:hover { background: var(--ntrg-accent); color: #fff; } /* ── Lightbox ── */ .ntrg-lb { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 99999; align-items: center; justify-content: center; } .ntrg-lb.open { display: flex; } .ntrg-lb img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; } .ntrg-lb-x, .ntrg-lb-p, .ntrg-lb-n { position: absolute; color: #fff; cursor: pointer; background: rgba(0,0,0,.4); border: none; border-radius: 8px; } .ntrg-lb-x { top: 14px; right: 18px; font-size: 34px; background: none; } .ntrg-lb-p, .ntrg-lb-n { top: 50%; transform: translateY(-50%); font-size: 40px; padding: 8px 14px; } .ntrg-lb-p { left: 10px; } .ntrg-lb-n { right: 10px; } /* ── Floating dark/light toggle (FAB) ── */ .ntrg-fab { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border2); box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; z-index: 99990; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; padding: 0; transition: transform .15s, border-color .15s; } .ntrg-fab:hover { transform: scale(1.08); border-color: var(--ntrg-accent); } /* show sun in dark mode (click → light), moon in light mode */ html.ntrg-dark .ntrg-fab-moon { display: none; } html.ntrg-dark .ntrg-fab-sun { display: inline; } html.ntrg-light .ntrg-fab-moon { display: inline; } html.ntrg-light .ntrg-fab-sun { display: none; } @media (max-width: 600px) { .ntrg-fab { right: 12px; bottom: 12px; width: 42px; height: 42px; } .ntrg-ss-stage .ntrg-ss-slide img { height: 200px; } } /* ══════════════════════════════════════════════════════════ 25. v2.1 — replace Gridlove chrome, uniform listing thumbs ══════════════════════════════════════════════════════════ */ /* Hide Gridlove header/footer when NTR navbar+footer are active */ body.ntrg-chrome #header.gridlove-site-header, body.ntrg-chrome #gridlove-header-responsive, body.ntrg-chrome #footer.gridlove-footer { display: none !important; } /* keep the injected navbar above page content, sticky under admin bar */ body.ntrg-chrome #ntrg-nav-src { position: sticky; top: 0; z-index: 1000; } body.admin-bar.ntrg-chrome #ntrg-nav-src { top: 32px; } @media (max-width: 782px) { body.admin-bar.ntrg-chrome #ntrg-nav-src { top: 46px; } } /* Uniform thumbnails on homepage / archive listing cards (every cover same box, cropped, regardless of original ratio) */ .gridlove-post .entry-image a { display: block; } .gridlove-post .entry-image { background: var(--ntrg-bg3); } .gridlove-post .entry-image img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; object-fit: contain; /* full image visible, letterboxed — no crop */ } /* same treatment for our own card grids */ .ntrg-daily-cover, .ntrg-related-cover { background: var(--ntrg-bg3); border-radius: 10px 10px 0 0; overflow: hidden; } .ntrg-daily-cover img, .ntrg-related-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; height: auto; display: block; } /* mobile: slightly taller peek slides */ @media (max-width: 600px) { .ntrg-ss-view .ntrg-ss-slide { flex: 0 0 78%; } .ntrg-ss-view .ntrg-ss-slide img { height: 170px; } } /* ══════════════════════════════════════════════════════════ 26. v2.2 — chrome polish, carousels, page styling ══════════════════════════════════════════════════════════ */ /* Hide Rank Math breadcrumb on the homepage/blog */ body.home .rank-math-breadcrumb, body.blog .rank-math-breadcrumb { display: none !important; } /* ── Listing category buttons: small pills, not full-width bars ── */ .gridlove-post .entry-category { display: flex; flex-wrap: wrap; gap: 5px; } .gridlove-post .entry-category a.gridlove-cat, .gridlove-post .entry-category a { display: inline-block !important; width: auto !important; padding: 3px 11px !important; font-size: 10px !important; font-weight: 700; letter-spacing: .04em; border-radius: 20px !important; background: var(--ntrg-accent) !important; color: #fff !important; line-height: 1.5 !important; text-transform: uppercase; } .gridlove-post .entry-category a:hover { filter: brightness(1.12); } /* ── Navbar dropdown (sub-menus) ── */ .ntrg-nav-item { position: relative; display: inline-flex; } .ntrg-nav-caret { font-size: 9px; opacity: .6; margin-left: 3px; } .ntrg-sub { position: absolute; top: 100%; left: 0; min-width: 170px; background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border2); border-radius: 10px; padding: 6px; display: none; z-index: 1200; box-shadow: 0 10px 28px rgba(0,0,0,.35); } .ntrg-nav-item:hover .ntrg-sub, .ntrg-nav-item:focus-within .ntrg-sub { display: block; } .ntrg-sub a { display: block; padding: 8px 12px; border-radius: 7px; font-size: 13px; color: var(--ntrg-text); text-decoration: none; white-space: nowrap; } .ntrg-sub a:hover { background: var(--ntrg-abg); color: var(--ntrg-accent); } /* ── Section labels: bigger, clearer ── */ .ntrg-sec-label { font-size: 15px !important; } .ntrg-tgs .ntrg-sec-label, .ntrg-related-grid ~ .ntrg-sec-label { font-size: 17px !important; } .ntrg-tgs > .ntrg-sec-label { font-size: 17px !important; } /* 'You Might Also Like' label bigger (it sits right before the grid) */ div[style*="padding-bottom:26px"] > .ntrg-sec-label { font-size: 17px !important; } /* ── Filter: label highlight ── */ .ntrg-filter-label { background: var(--ntrg-accent); color: #fff !important; padding: 4px 13px; border-radius: 18px; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } /* ── Developer links inline beside the name ── */ .ntrg-dev-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .ntrg-dev-cell .ntrg-dev-links { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; } /* ── Download rows: bold platform labels with colon ── */ .ntrg-plat-label strong { font-weight: 800; color: var(--ntrg-text); } .ntrg-dl-platform { min-width: 170px; } .ntrg-dl-section + .ntrg-dl-section { margin-top: 14px; } /* ── Notes & codes block ── */ .ntrg-notes .ntrg-note-line { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ntrg-text); background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border); border-radius: 7px; padding: 7px 12px; margin-bottom: 6px; } .ntrg-notes .ntrg-note-line:last-child { margin-bottom: 0; } /* ── Daily Recommended: peek carousel (3.5 per view) + header spacing ── */ .ntrg-daily-wrap { margin-top: 30px; } .ntrg-daily-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ntrg-daily-label { font-size: 19px !important; margin-bottom: 0 !important; } .ntrg-daily-arrows { display: flex; gap: 8px; } .ntrg-daily-view { overflow: hidden; } .ntrg-daily-track { display: flex; gap: 14px; transition: transform .35s ease; will-change: transform; } .ntrg-daily-track .ntrg-daily-card { flex: 0 0 calc((100% - 3 * 14px) / 3.5); min-width: 0; } @media (max-width: 900px) { .ntrg-daily-track .ntrg-daily-card { flex-basis: calc((100% - 2 * 14px) / 2.5); } } @media (max-width: 560px) { .ntrg-daily-track .ntrg-daily-card { flex-basis: calc((100% - 14px) / 1.5); } } /* ── Static pages (terms, privacy, tags) + CF7 pages — match the design ── */ .page .gridlove-content .gridlove-box { background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); border-radius: 14px; } .page .entry-content h1, .page .entry-content h2, .page .entry-content h3 { color: var(--ntrg-text); } .page .entry-content h2 { font-size: 20px; border-left: 3px solid var(--ntrg-accent); padding-left: 12px; } .page .entry-content p, .page .entry-content li { color: var(--ntrg-text2); } .page .entry-content a { color: var(--ntrg-accent); border-bottom-color: var(--ntrg-accent); } /* tag cloud → our pill style */ .entry-content .wp-block-tag-cloud a, .page .tagcloud a { display: inline-block; background: var(--ntrg-bg3) !important; border: 1px solid var(--ntrg-border2); color: var(--ntrg-text) !important; border-radius: 18px; padding: 5px 14px !important; margin: 0 6px 8px 0; font-size: 12px !important; transition: .15s; } .entry-content .wp-block-tag-cloud a:hover, .page .tagcloud a:hover { background: var(--ntrg-accent) !important; border-color: var(--ntrg-accent); color: #fff !important; } /* Contact Form 7 styling */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { width: 100%; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border2); color: var(--ntrg-text); border-radius: 9px; padding: 11px 14px; font-size: 14px; transition: border-color .15s; } .wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--ntrg-accent); outline: none; } .wpcf7 input[type="submit"] { background: var(--ntrg-accent); color: #fff; border: none; border-radius: 10px; padding: 12px 30px; font-weight: 700; font-size: 14px; cursor: pointer; transition: .15s; } .wpcf7 input[type="submit"]:hover { filter: brightness(1.1); } .wpcf7 label { color: var(--ntrg-text2); font-size: 13px; font-weight: 600; } .wpcf7 form > p { margin-bottom: 14px; } /* ══════════════════════════════════════════════════════════ 27. v2.3 — menu polish, footer-at-bottom, search quick-view, daily highlight, DMCA card ══════════════════════════════════════════════════════════ */ /* ── Daily Recommended: lite highlight on the whole section ── */ .ntrg-daily-wrap { background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); border-radius: 14px; padding: 18px 18px 20px; } /* ── Tighter, single-line navbar ── */ .ntrg-navbar-inner { flex-wrap: nowrap; gap: 14px; } .ntrg-nav-links { flex-wrap: nowrap; gap: 2px; overflow: visible; white-space: nowrap; } .ntrg-nav-link { font-size: 13px; padding: 7px 10px; } .ntrg-nav-right { gap: 8px; flex-shrink: 0; } .ntrg-search input { width: 150px; font-size: 13px; } .ntrg-search input:focus { width: 190px; } .ntrg-surprise { font-size: 12px; padding: 7px 13px; white-space: nowrap; } @media (max-width: 1100px) { .ntrg-search input { width: 110px; } .ntrg-nav-link { padding: 7px 7px; } } /* ── Footer pinned to the bottom on short pages ── */ body.ntrg-chrome { min-height: 100vh; display: flex; flex-direction: column; } body.ntrg-chrome > #ntrg-foot-src { margin-top: auto; } body.ntrg-chrome > #ntrg-nav-src { flex-shrink: 0; } /* ── Live search: much smaller dropdown, titles only ── */ .ntrg-search-dropdown { width: 290px; right: 0; left: auto; max-height: 280px; overflow-y: auto; border-radius: 10px; } .ntrg-search-dropdown .ntrg-search-result { display: flex; align-items: center; gap: 9px; padding: 7px 10px; } .ntrg-search-dropdown .ntrg-sr-thumb { width: 34px; height: 24px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: var(--ntrg-bg3); } .ntrg-search-dropdown .ntrg-sr-thumb img { width: 100%; height: 100%; object-fit: cover; } .ntrg-search-dropdown .ntrg-sr-title { font-size: 12.5px; font-weight: 600; color: var(--ntrg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ntrg-search-loading, .ntrg-search-no-results { padding: 10px 12px; font-size: 12px; } /* ── Quick-view popup: upper-middle of the screen ── */ .ntrg-qv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 99995; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .ntrg-qv-card { position: relative; width: min(92vw, 380px); background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border2); border-radius: 16px; padding: 16px 16px 18px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: ntrgqv .18s ease; } @keyframes ntrgqv { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .ntrg-qv-x { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--ntrg-text2); cursor: pointer; } .ntrg-qv-x:hover { color: var(--ntrg-accent); } .ntrg-qv-cover { border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--ntrg-bg3); } .ntrg-qv-cover img { width: 100%; height: 180px; object-fit: cover; display: block; } .ntrg-qv-title { font-size: 16px; font-weight: 800; color: var(--ntrg-text); margin-bottom: 6px; } .ntrg-qv-meta { margin-bottom: 14px; min-height: 18px; } .ntrg-qv-btn { display: inline-block; background: var(--ntrg-accent); color: #fff !important; border-radius: 10px; padding: 10px 26px; font-weight: 700; font-size: 14px; text-decoration: none; } .ntrg-qv-btn:hover { filter: brightness(1.1); } /* ── DMCA contact card ── */ .ntrg-dmca-contact { background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); border-radius: 14px; padding: 20px; margin-top: 24px; } .ntrg-dmca-contact p { color: var(--ntrg-text2); margin-bottom: 14px; } .ntrg-dmca-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ══════════════════════════════════════════════════════════ 28. v2.4 — neon extras divider, one-row menu, relocated compact search ══════════════════════════════════════════════════════════ */ /* ── Neon divider between platform rows and extras (Patch/Walkthrough/…) ── */ .ntrg-dl-divider { height: 2px; margin: 12px 16px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ntrg-accent) 18%, var(--ntrg-accent) 82%, transparent); box-shadow: 0 0 8px var(--ntrg-accent), 0 0 20px var(--ntrg-accent); opacity: .8; } /* ── Menu: every item on ONE row, full navbar width ── */ .ntrg-navbar-inner { max-width: 100%; padding: 0 22px; gap: 12px; } .ntrg-nav-links { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 0; } .ntrg-nav-link { font-size: 12.5px; padding: 7px 9px; white-space: nowrap; } @media (max-width: 1280px) { .ntrg-nav-link { font-size: 12px; padding: 6px 7px; } .ntrg-surprise { font-size: 11px; padding: 6px 10px; } } @media (max-width: 1080px) { .ntrg-nav-link { font-size: 11.5px; padding: 6px 5px; } .ntrg-logo { font-size: 15px; } } /* ── Search box: smaller everywhere ── */ .ntrg-search input { width: 120px; font-size: 12px; padding-top: 6px; padding-bottom: 6px; } .ntrg-search input:focus { width: 160px; } /* relocated search (filter bar on homepage / breadcrumb row on posts) */ .ntrg-search-inline { margin-left: auto; flex-shrink: 0; } .ntrg-search-inline input { width: 140px; } .ntrg-search-inline input:focus { width: 180px; } .ntrg-search-inline .ntrg-search-dropdown { right: 0; left: auto; } /* breadcrumb + search on one row (single posts, archives) */ .ntrg-bc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; } .ntrg-bc-row .rank-math-breadcrumb { flex: 1; min-width: 0; margin-bottom: 0 !important; } /* ══════════════════════════════════════════════════════════ 29. v2.5 — header aligned with body, hover-zoom thumbs, mobile drawer menu + scroll-hide navbar ══════════════════════════════════════════════════════════ */ /* ── Header content aligned with the body container ── */ .ntrg-navbar-inner { max-width: var(--ntrg-w); margin: 0 auto; padding: 0 20px; } /* ── Homepage/archive cards: thumbnail pops to full size on hover ── */ .gridlove-post .entry-image { overflow: visible; position: relative; z-index: 1; } .gridlove-post .entry-image img { transition: transform .25s ease, box-shadow .25s ease; transform-origin: center center; } @media (hover: hover) { .gridlove-post .entry-image:hover img { transform: scale(1.5); position: relative; z-index: 60; box-shadow: 0 18px 50px rgba(0,0,0,.55); border-radius: 8px; background: var(--ntrg-bg2); } } /* phones: press & hold to zoom, releases back */ @media (hover: none) { .gridlove-post .entry-image:active img { transform: scale(1.45); position: relative; z-index: 60; box-shadow: 0 18px 50px rgba(0,0,0,.55); border-radius: 8px; background: var(--ntrg-bg2); } .gridlove-post .entry-image img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } /* ── Hamburger (hidden on desktop) ── */ .ntrg-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 36px; padding: 0 8px; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border2); border-radius: 9px; cursor: pointer; } .ntrg-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ntrg-text); } /* ── Drawer (slides in from the left) ── */ .ntrg-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(78vw, 320px); background: var(--ntrg-bg2); border-right: 1px solid var(--ntrg-border2); z-index: 99998; transform: translateX(-102%); transition: transform .28s ease; display: flex; flex-direction: column; overflow-y: auto; } html.ntrg-drawer-open .ntrg-drawer { transform: translateX(0); } .ntrg-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99997; opacity: 0; pointer-events: none; transition: opacity .25s; } html.ntrg-drawer-open .ntrg-drawer-overlay { opacity: 1; pointer-events: auto; } html.ntrg-drawer-open { overflow: hidden; } .ntrg-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ntrg-border); } .ntrg-drawer-x { background: none; border: none; font-size: 30px; line-height: 1; color: var(--ntrg-text2); cursor: pointer; } .ntrg-drawer-nav { padding: 10px 12px 24px; } .ntrg-drawer-nav a { display: block; padding: 12px 14px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ntrg-text); text-decoration: none; } .ntrg-drawer-nav a:hover { background: var(--ntrg-abg); color: var(--ntrg-accent); } .ntrg-drawer-nav a.ntrg-drawer-sub { padding-left: 30px; font-size: 13.5px; font-weight: 500; color: var(--ntrg-text2); } .ntrg-drawer-nav .ntrg-drawer-surprise { margin-top: 14px; background: var(--ntrg-abg); border: 1px solid var(--ntrg-abdr); color: var(--ntrg-accent); text-align: center; } /* ── Mobile navbar behavior ── */ .ntrg-navbar { transition: transform .25s ease; } @media (max-width: 820px) { .ntrg-nav-links, .ntrg-surprise { display: none; } /* menu lives in the drawer */ .ntrg-burger { display: flex; } .ntrg-navbar.ntrg-nav-hidden { transform: translateY(-110%); } } /* ══════════════════════════════════════════════════════════ 30. v2.5.1 — breadcrumb/search row aligned with body ══════════════════════════════════════════════════════════ */ /* The breadcrumb + search row (single posts & archives) aligns with the body: it carries Gridlove's own .gridlove-wrapper class, so it always matches the exact site width from Theme Options. */ .ntrg-bc-row { margin: 0 auto 10px; padding: 8px 25px; } /* fallback width only when the Gridlove class is absent */ .ntrg-bc-row:not(.gridlove-wrapper) { max-width: 1220px; } /* with the Gridlove class, the theme's own max-width rule applies untouched; we only re-assert the row layout */ .ntrg-bc-row.gridlove-wrapper { width: auto; float: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* guard: menu can never overlap the Surprise/search/toggle buttons (clips horizontal overflow but keeps dropdowns visible) */ .ntrg-nav-links { overflow-x: clip; overflow-y: visible; } /* ══════════════════════════════════════════════════════════ 31. v2.6 — title color fix (dark mode) ══════════════════════════════════════════════════════════ */ /* The single-post H1 title had no color rule of its own, so it fell back to Gridlove's light-mode default (black) even in dark mode. Force it to follow our theme variable everywhere. */ .entry-title, h1.entry-title, .gridlove-cover-content .entry-title { color: var(--ntrg-text) !important; } .ntrg-ad-sidebar { margin-bottom: 18px; }