/* ============================================================ ArianWait — "Mystic Collection" dark theme Drop-in stylesheet for the Laravel/Blade site. Prefixed .aw-* so it never collides with Bootstrap / RS-theme classes. Load AFTER the existing stylesheets in your layout, e.g.: and add the fonts (see README). ============================================================ */ :root { --aw-navy-900: #0b1228; --aw-navy-800: #131c3a; --aw-teal-500: #1ba39c; --aw-teal-400: #2bc4ba; --aw-emerald-500: #1f8a5b; --aw-coral-500: #ff6b6b; --aw-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --aw-font-serif: 'Playfair Display', 'Times New Roman', serif; --aw-font-display: 'Cinzel', 'Times New Roman', serif; --aw-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.08)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23g)'/%3E%3C/svg%3E"); } /* Scope the dark background to pages that opt in via */ body.aw-dark { background: var(--aw-navy-900); color: rgba(255,255,255,0.75); font-family: var(--aw-font-sans); } body.aw-dark main { background: var(--aw-navy-900); } .aw-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .aw-kicker { font-family: var(--aw-font-display); text-transform: uppercase; letter-spacing: 0.28em; font-size: 12px; font-weight: 600; color: var(--aw-teal-400); } .aw-serif { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; line-height: 1.12; margin: 0; } /* ---------- Header (dark, sticky) ---------- */ .aw-header { position: sticky; top: 0; z-index: 50; background: rgba(11,18,40,0.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(43,196,186,0.18); } .aw-header .aw-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; height: 76px; display: flex; align-items: center; justify-content: space-between; } .aw-header .aw-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .aw-header .aw-logo img { height: 52px; width: auto; } .aw-header .aw-logo span { font-family: var(--aw-font-display); text-transform: uppercase; letter-spacing: 0.14em; color: #fff; font-weight: 700; font-size: 15px; } .aw-nav { display: flex; gap: 8px; } .aw-nav a { font-family: var(--aw-font-sans); font-weight: 600; font-size: 0.98rem; padding: 8px 16px; border-radius: 50px; color: rgba(255,255,255,0.82); text-decoration: none; transition: all 0.3s ease; } .aw-nav a:hover { color: #fff; } .aw-nav a.active { color: #04201d; background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); } /* ---------- Buttons ---------- */ .aw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--aw-font-sans); font-weight: 600; padding: 1rem 2rem; border-radius: 50px; text-decoration: none; cursor: pointer; border: none; transition: all 0.3s ease; font-size: 1.05rem; } .aw-btn-sm { padding: 8px 20px; font-size: 0.85rem; } .aw-btn-teal { background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); color: #04201d; } .aw-btn-teal:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(27,163,156,0.45); color: #04201d; } .aw-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); } .aw-btn-ghost:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); color: #fff; } /* ---------- Filter chips ---------- */ .aw-chip { display: inline-block; padding: 9px 20px; margin: 4px; border-radius: 25px; font-family: var(--aw-font-sans); font-size: 0.9rem; font-weight: 600; text-decoration: none; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: all 0.3s ease; } .aw-chip:hover { color: #fff; border-color: rgba(43,196,186,0.5); } .aw-chip.active { color: #04201d; background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); border-color: rgba(43,196,186,0.5); } /* ---------- Hero ---------- */ .aw-hero { position: relative; overflow: hidden; min-height: 720px; background: radial-gradient(120% 90% at 80% 6%, rgba(27,163,156,0.22) 0%, rgba(11,18,40,0) 52%), linear-gradient(180deg, #0b1228 0%, #0e1733 58%, #0b1228 100%); } .aw-hero .aw-moon { position: absolute; top: -120px; right: 60px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(214,234,255,0.30), rgba(43,196,186,0.10) 46%, rgba(11,18,40,0) 70%); pointer-events: none; } .aw-hero .aw-grain { position: absolute; inset: 0; background-image: var(--aw-grain); background-size: 180px; opacity: 0.6; pointer-events: none; } .aw-hero .aw-figure { position: absolute; right: max(24px, calc((100% - 1140px)/2 - 10px)); bottom: 0; top: 0; width: 540px; pointer-events: none; } .aw-hero .aw-figure .aw-glow { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(27,163,156,0.34), rgba(11,18,40,0) 66%); filter: blur(6px); } .aw-hero .aw-figure img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 34px rgba(27,163,156,0.25)); } .aw-hero .aw-hero-inner { position: relative; display: flex; align-items: center; min-height: 720px; } .aw-hero-content { max-width: 560px; padding: 30px 0; } .aw-hero-content h1 { font-family: var(--aw-font-serif); font-weight: 800; color: #fff; font-size: 4rem; line-height: 1.05; margin: 22px 0 26px; } .aw-hero-content h1 em { font-style: italic; color: var(--aw-teal-400); } .aw-hero-content .aw-lead { color: rgba(255,255,255,0.7); font-size: 1.15rem; line-height: 1.7; margin: 0 0 40px; max-width: 470px; } .aw-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .aw-stats { display: flex; gap: 40px; margin-top: 52px; } .aw-stats .aw-stat b { display: block; font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 30px; } .aw-stats .aw-stat span { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 2px; } /* ---------- Page hero (inner pages) ---------- */ .aw-page-hero { position: relative; overflow: hidden; background: radial-gradient(110% 90% at 50% -10%, rgba(27,163,156,0.20) 0%, rgba(11,18,40,0) 55%), linear-gradient(180deg, #0b1228 0%, #0e1733 100%); } .aw-page-hero .aw-grain { position: absolute; inset: 0; background-image: var(--aw-grain); background-size: 180px; opacity: 0.55; pointer-events: none; } .aw-page-hero .aw-ph-inner { position: relative; text-align: center; padding: 64px 24px 56px; } .aw-page-hero h1 { font-family: var(--aw-font-serif); font-weight: 800; color: #fff; font-size: 3.2rem; line-height: 1.1; margin: 0 auto; max-width: 860px; } .aw-page-hero .aw-desc { color: rgba(255,255,255,0.65); font-size: 1.1rem; line-height: 1.6; margin: 18px auto 0; max-width: 620px; } .aw-crumbs { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 18px; } .aw-crumbs a { color: var(--aw-teal-400); text-decoration: none; } .aw-crumbs .sep { opacity: 0.4; margin: 0 8px; } /* ---------- Section heads ---------- */ .aw-section { padding: 96px 0 88px; } .aw-section-head { margin-bottom: 44px; max-width: 640px; } .aw-section-head .aw-kicker { margin-bottom: 16px; } .aw-section-head h2 { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 2.4rem; line-height: 1.12; margin: 0; } .aw-section-head .aw-desc { color: rgba(255,255,255,0.6); font-size: 1.05rem; line-height: 1.7; margin: 16px 0 0; max-width: 540px; } /* ---------- Character mosaic / grid cards ---------- */ .aw-char-mosaic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; } .aw-char-col { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; } .aw-char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .aw-char-card { position: relative; display: block; border-radius: 20px; overflow: hidden; height: 340px; text-decoration: none; background: var(--aw-navy-800); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 14px 34px rgba(0,0,0,0.4); transition: all 0.3s ease; } .aw-char-card.tall { height: 460px; } .aw-char-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aw-char-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,18,40,0.95) 4%, rgba(11,18,40,0.35) 42%, rgba(11,18,40,0) 70%); } .aw-char-card:hover { transform: translateY(-8px); border-color: rgba(43,196,186,0.55); box-shadow: 0 24px 50px rgba(0,0,0,0.5), 0 0 40px rgba(27,163,156,0.25); } .aw-char-card:hover img { transform: scale(1.06); } .aw-char-card .aw-cc-body { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; } .aw-char-card .aw-cc-race { display: inline-block; font-family: var(--aw-font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: var(--aw-teal-400); margin-bottom: 8px; } .aw-char-card .aw-cc-name { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 22px; line-height: 1.1; } .aw-char-card.tall .aw-cc-name { font-size: 30px; } .aw-char-card .aw-cc-desc { color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.55; margin: 10px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; } .aw-char-card:hover .aw-cc-desc { max-height: 90px; opacity: 1; } /* ---------- Atmospheric banner ---------- */ .aw-banner { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; } .aw-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aw-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,40,0.97) 0%, rgba(11,18,40,0.92) 40%, rgba(11,18,40,0.6) 75%, rgba(11,18,40,0.35) 100%); } .aw-banner .aw-wrap { position: relative; } .aw-banner blockquote { font-family: var(--aw-font-serif); font-style: italic; font-weight: 500; color: #fff !important; background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 2rem; line-height: 1.4; margin: 0 0 28px; max-width: 600px; text-shadow: 0 2px 18px rgba(11,18,40,0.75); } .aw-banner blockquote p { color: #fff !important; font-size: inherit; margin: 0; } /* ---------- Character detail hero ---------- */ .aw-detail-hero { position: relative; overflow: hidden; background: radial-gradient(110% 90% at 78% 0%, rgba(27,163,156,0.20) 0%, rgba(11,18,40,0) 55%), linear-gradient(180deg, #0b1228 0%, #0e1733 100%); } .aw-detail-hero .aw-grain { position: absolute; inset: 0; background-image: var(--aw-grain); background-size: 180px; opacity: 0.55; } .aw-detail-grid { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; padding: 56px 24px; } .aw-detail-portrait { position: relative; } .aw-detail-portrait .aw-glow { position: absolute; inset: -6%; border-radius: 20px; background: radial-gradient(circle, rgba(27,163,156,0.30), rgba(11,18,40,0) 70%); filter: blur(4px); } .aw-detail-portrait img { position: relative; width: 100%; max-height: 440px; object-fit: cover; border-radius: 20px; border: 1px solid rgba(43,196,186,0.35); box-shadow: 0 24px 50px rgba(0,0,0,0.5); } .aw-detail-info h1 { font-family: var(--aw-font-serif); font-weight: 800; color: #fff; font-size: 3.6rem; line-height: 1.05; margin: 0 0 22px; } .aw-detail-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; } .aw-detail-meta span { color: rgba(255,255,255,0.8); } .aw-detail-meta i { color: var(--aw-teal-400); margin-right: 8px; } .aw-detail-info .aw-desc { font-size: 1.15rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin: 0 0 32px; } /* ---------- Gallery tiles (works by authors) ---------- */ .aw-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .aw-tile { margin: 0; border-radius: 15px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; } .aw-tile:hover { transform: translateY(-6px); border-color: rgba(43,196,186,0.4); } .aw-tile .aw-tile-img { position: relative; height: 240px; overflow: hidden; } .aw-tile .aw-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aw-tile:hover .aw-tile-img img { transform: scale(1.07); } .aw-tile .aw-tile-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11,18,40,0.55); opacity: 0; transition: opacity 0.3s ease; } .aw-tile:hover .aw-tile-overlay { opacity: 1; } .aw-tile .aw-zoom { width: 50px; height: 50px; border-radius: 50%; background: var(--aw-teal-400); color: #04201d; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .aw-tile .aw-author-badge { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 25px; background: rgba(11,18,40,0.7); backdrop-filter: blur(8px); border: 1px solid rgba(43,196,186,0.3); color: var(--aw-teal-400); font-size: 12px; font-weight: 600; } .aw-tile figcaption { padding: 14px 16px; } .aw-tile figcaption .aw-tile-title { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 15px; } .aw-tile figcaption .aw-tile-author { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; } /* ---------- Related characters ---------- */ .aw-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* ---------- CTA ---------- */ .aw-cta { position: relative; overflow: hidden; padding: 88px 0; text-align: center; background: radial-gradient(80% 120% at 50% 0%, rgba(27,163,156,0.18), rgba(11,18,40,0) 60%); } .aw-cta .aw-grain { position: absolute; inset: 0; background-image: var(--aw-grain); background-size: 180px; opacity: 0.5; } .aw-cta .aw-wrap { position: relative; } .aw-cta img.aw-emblem { height: 96px; width: auto; margin: 0 auto 8px; filter: drop-shadow(0 0 24px rgba(27,163,156,0.4)); } .aw-cta .aw-desc { color: rgba(255,255,255,0.65); font-size: 1.1rem; margin: 18px auto 34px; max-width: 520px; } .aw-cta .aw-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- Footer ---------- */ .aw-footer { background: var(--aw-navy-900); color: rgba(255,255,255,0.75); } .aw-footer .aw-inner { max-width: 1140px; margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .aw-footer .aw-fbrand { display: flex; align-items: center; gap: 14px; } .aw-footer .aw-fbrand img { height: 64px; width: auto; } .aw-footer .aw-fbrand .aw-fname { font-family: var(--aw-font-display); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; font-weight: 700; font-size: 20px; line-height: 1.1; } .aw-footer .aw-fbrand .aw-fname small { font-size: 13px; font-weight: 500; color: var(--aw-teal-400); display: block; } .aw-footer .aw-fnote { margin: 0; font-size: 13px; max-width: 460px; line-height: 1.6; text-align: right; } /* ---------- Mobile burger ---------- */ .aw-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 0; cursor: pointer; } .aw-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; } .aw-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .aw-burger.is-open span:nth-child(2) { opacity: 0; } .aw-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Focus visibility (a11y) ---------- */ body.aw-dark a:focus-visible, body.aw-dark button:focus-visible, body.aw-dark input:focus-visible, body.aw-dark textarea:focus-visible, body.aw-dark select:focus-visible, body.aw-dark [tabindex]:focus-visible { outline: 2px solid var(--aw-teal-400) !important; outline-offset: 2px; border-radius: 6px; } .aw-search:focus-within { outline: 2px solid var(--aw-teal-400); outline-offset: 2px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { body.aw-dark *, body.aw-dark *::before, body.aw-dark *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.aw-dark .aw-char-card:hover, body.aw-dark .aw-post-card:hover, body.aw-dark .aw-tile:hover, body.aw-dark .aw-btn:hover { transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .aw-hero .aw-figure { display: none; } .aw-hero-content { max-width: 100%; } .aw-char-mosaic, .aw-char-grid, .aw-gallery, .aw-related-grid { grid-template-columns: 1fr 1fr; } .aw-detail-grid { grid-template-columns: 1fr; } .aw-hero-content h1, .aw-page-hero h1, .aw-detail-info h1 { font-size: 2.6rem; } /* Burger + collapsible nav */ .aw-burger { display: flex; } .aw-header .aw-nav { position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch; background: rgba(11,18,40,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(43,196,186,0.18); max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .aw-header .aw-nav.is-open { max-height: 320px; } .aw-header .aw-nav a { border-radius: 0; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.06); } .aw-header .aw-nav a.active { background: rgba(43,196,186,0.16); color: var(--aw-teal-400); } } @media (max-width: 575px) { .aw-char-mosaic, .aw-char-grid, .aw-gallery, .aw-related-grid { grid-template-columns: 1fr; } .aw-footer .aw-fnote { text-align: center; } } /* ============================================================ Page-specific: catalog, blog, games detail/download ============================================================ */ /* Layout helpers */ .aw-two-col { display: grid; grid-template-columns: 1fr 320px; gap: 40px; } .aw-blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-content: start; } .aw-search { max-width: 520px; margin: 0 auto 22px; display: flex; border-radius: 50px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .aw-search input { flex: 1; border: none; outline: none; padding: 1rem 1.5rem; font-size: 1.05rem; font-family: var(--aw-font-sans); color: var(--aw-navy-900); background: transparent; } .aw-search button { border: none; cursor: pointer; padding: 1rem 1.5rem; font-size: 1.05rem; background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); color: #04201d; } .aw-filter-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* Post card (blog) */ .aw-post-card { display: flex; flex-direction: column; border-radius: 15px; overflow: hidden; text-decoration: none; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; height: 100%; } .aw-post-card:hover { transform: translateY(-6px); border-color: rgba(43,196,186,0.4); } .aw-post-card .aw-pc-img { position: relative; height: 180px; overflow: hidden; } .aw-post-card .aw-pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aw-post-card:hover .aw-pc-img img { transform: scale(1.06); } .aw-post-card .aw-pc-cat { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 25px; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; } .aw-post-card .aw-pc-body { padding: 22px; flex: 1; display: flex; flex-direction: column; } .aw-post-card .aw-pc-meta { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .aw-post-card .aw-pc-meta i { color: var(--aw-teal-400); margin-right: 4px; } .aw-post-card .aw-pc-title { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 18px; line-height: 1.3; margin-bottom: 10px; } .aw-post-card .aw-pc-excerpt { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; margin: 0 0 14px; flex: 1; } .aw-post-card .aw-pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .aw-read-more { color: var(--aw-teal-400); font-weight: 600; font-size: 13px; text-decoration: none; } /* Tag chips (blog) */ .aw-tag { display: inline-block; padding: 5px 12px; border-radius: 25px; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .aw-tag:hover { transform: translateY(-2px); } /* Sidebar widgets */ .aw-sidebar { position: sticky; top: 96px; } .aw-widget { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 26px; margin-bottom: 24px; } .aw-widget-title { font-family: var(--aw-font-serif); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 18px; padding-bottom: 12px; position: relative; } .aw-widget-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 46px; height: 3px; border-radius: 2px; background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); } .aw-cat-list { list-style: none; padding: 0; margin: 0; } .aw-cat-list li { margin-bottom: 8px; } .aw-cat-link { display: flex; align-items: center; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); text-decoration: none; transition: all 0.3s ease; } .aw-cat-link:hover { background: rgba(43,196,186,0.12); color: #fff; transform: translateX(4px); } .aw-cat-color { width: 10px; height: 10px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; } .aw-cat-name { flex: 1; font-weight: 500; } .aw-cat-count { font-size: 12px; opacity: 0.5; } .aw-popular { display: flex; flex-direction: column; gap: 12px; } .aw-popular-item { display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.04); text-decoration: none; transition: all 0.3s ease; } .aw-popular-item:hover { background: rgba(43,196,186,0.12); } .aw-popular-item .aw-pi-img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .aw-popular-item .aw-pi-img img { width: 100%; height: 100%; object-fit: cover; } .aw-popular-item .aw-pi-title { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.4; margin: 0 0 4px; } .aw-popular-item .aw-pi-meta { font-size: 11px; color: rgba(255,255,255,0.5); } .aw-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; } .aw-author-widget { text-align: center; } .aw-author-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; font-weight: 700; } .aw-author-name { font-family: var(--aw-font-serif); font-size: 1.1rem; color: #fff; margin: 0; } /* Blog post prose */ .aw-post { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 36px; } .aw-post-featured { border-radius: 15px; overflow: hidden; margin-bottom: 32px; } .aw-post-featured img { width: 100%; display: block; } .aw-post-excerpt { background: rgba(43,196,186,0.08); border-left: 4px solid var(--aw-teal-500); border-radius: 12px; padding: 22px 26px; margin-bottom: 32px; } .aw-post-excerpt p { font-family: var(--aw-font-serif); font-style: italic; font-size: 1.15rem; line-height: 1.6; color: #fff; margin: 0; } .aw-prose { line-height: 1.85; color: rgba(255,255,255,0.78); font-size: 1.05rem; } .aw-prose h2 { font-family: var(--aw-font-serif); color: #fff; margin: 2rem 0 1rem; font-size: 1.7rem; } .aw-prose h3 { font-family: var(--aw-font-serif); color: var(--aw-teal-400); margin: 1.5rem 0 1rem; font-size: 1.35rem; } .aw-prose a { color: var(--aw-teal-400); } .aw-prose img { border-radius: 12px; margin: 1.5rem 0; } .aw-prose p { margin: 0 0 1rem; } .aw-prose blockquote { background: rgba(255,255,255,0.05) !important; color: rgba(255,255,255,0.85) !important; border-left: 4px solid var(--aw-teal-400) !important; border-color: var(--aw-teal-400) !important; margin: 1.5rem 0 !important; padding: 1.25rem 1.75rem !important; border-radius: 0 12px 12px 0; font-style: italic; font-family: var(--aw-font-serif); } .aw-prose blockquote p { color: rgba(255,255,255,0.85) !important; } /* Share buttons */ .aw-post-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; margin-top: 40px; } .aw-post-footer h5 { color: #fff; margin: 0 0 14px; } .aw-share-buttons { display: flex; gap: 12px; } .aw-share-btn { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; text-decoration: none; transition: all 0.3s ease; } .aw-share-btn:hover { transform: translateY(-3px); color: #fff; } .aw-share-btn.vk { background: #4a76a8; } .aw-share-btn.tw { background: #1da1f2; } .aw-share-btn.fb { background: #4267b2; } /* Related posts */ .aw-related-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .aw-rp-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; text-decoration: none; transition: all 0.3s ease; } .aw-rp-card:hover { transform: translateY(-5px); border-color: rgba(43,196,186,0.4); } .aw-rp-card .aw-rp-img { height: 130px; overflow: hidden; } .aw-rp-card .aw-rp-img img { width: 100%; height: 100%; object-fit: cover; } .aw-rp-card .aw-rp-body { padding: 14px; } .aw-rp-card .aw-rp-title { font-family: var(--aw-font-serif); font-weight: 700; color: #fff; font-size: 14px; margin: 0 0 6px; } .aw-rp-card .aw-rp-meta { font-size: 11px; color: rgba(255,255,255,0.5); } /* Games detail hero */ .aw-game-hero { position: relative; overflow: hidden; padding: 96px 0; background-size: cover; background-position: center; } .aw-game-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(11,18,40,0.94), rgba(30,60,114,0.82) 60%, rgba(43,196,186,0.18)); } .aw-game-hero .aw-wrap { position: relative; } .aw-game-hero .aw-back { color: rgba(255,255,255,0.7); text-decoration: none; } .aw-game-hero h1 { font-family: var(--aw-font-serif); font-weight: 800; color: #fff; font-size: 3.2rem; margin: 16px 0 18px; } .aw-game-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; color: rgba(255,255,255,0.8); } .aw-game-meta i { color: var(--aw-teal-400); margin-right: 6px; } /* Status badges (games) */ .aw-status { display: inline-block; padding: 5px 14px; border-radius: 25px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .aw-status.published { background: #d4edda; color: #155724; } .aw-status.coming-soon { background: #fff3cd; color: #856404; } .aw-status.game { background: var(--aw-teal-400); color: #04201d; } .aw-status.tool { background: #9b59b6; color: #fff; } /* Description + sysreq */ .aw-about-game { font-size: 1.05rem; line-height: 1.85; color: rgba(255,255,255,0.78); } .aw-sysreq { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px; } .aw-sysreq h4 { color: #fff; margin: 0 0 14px; } .aw-sysreq pre { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 14px; white-space: pre-wrap; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0; } /* Screenshots */ .aw-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .aw-shot { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; display: block; } .aw-shot:hover { transform: translateY(-4px); border-color: rgba(43,196,186,0.4); } .aw-shot img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.5s ease; } .aw-shot:hover img { transform: scale(1.05); } /* Download platform groups */ .aw-platform-group { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; overflow: hidden; margin-bottom: 22px; } .aw-platform-header { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); } .aw-platform-header .aw-pf-icon { font-size: 1.3rem; color: var(--aw-teal-400); } .aw-platform-header h4 { margin: 0; color: #fff; font-size: 1.05rem; } .aw-version-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; } .aw-version-item:last-child { border-bottom: none; } .aw-version-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .aw-version-number { font-weight: 700; color: #fff; } .aw-latest-tag { padding: 2px 10px; border-radius: 12px; background: rgba(43,196,186,0.2); color: var(--aw-teal-400); font-size: 11px; font-weight: 700; text-transform: uppercase; } .aw-version-meta { color: rgba(255,255,255,0.5); font-size: 13px; } .aw-changelog-toggle { color: var(--aw-teal-400); font-size: 13px; text-decoration: none; cursor: pointer; } .aw-changelog { padding: 14px 22px; background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.9rem; color: rgba(255,255,255,0.65); white-space: pre-wrap; } .aw-btn-dl-sm { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 25px; background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); color: #04201d; font-weight: 600; font-size: 0.85rem; text-decoration: none; } /* Info card (download sidebar) */ .aw-info-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; padding: 24px; margin-bottom: 22px; } .aw-info-card img { width: 100%; border-radius: 10px; margin-bottom: 14px; } .aw-info-card h4 { color: #fff; margin: 0 0 8px; font-family: var(--aw-font-serif); } .aw-info-card p { color: rgba(255,255,255,0.6); margin: 0 0 6px; font-size: 14px; } .aw-info-card i { color: var(--aw-teal-400); margin-right: 6px; } /* No-results empty state */ .aw-empty { text-align: center; padding: 70px 20px; } .aw-empty .aw-empty-icon { font-size: 3rem; color: rgba(255,255,255,0.2); margin-bottom: 18px; } .aw-empty h3 { color: #fff; margin: 0 0 10px; font-family: var(--aw-font-serif); } .aw-empty p { color: rgba(255,255,255,0.5); margin: 0 0 22px; } /* Laravel pagination */ .aw-pagination { display: flex; justify-content: center; margin-top: 56px; } .aw-pagination nav > div:first-child { display: none; } /* hide "showing x of y" text row */ .aw-pagination .pagination { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; } .aw-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); text-decoration: none; transition: all 0.3s ease; } .aw-pagination .page-link:hover { background: rgba(43,196,186,0.15); color: #fff; } .aw-pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--aw-teal-500), var(--aw-teal-400)); color: #04201d; border-color: transparent; } .aw-pagination .page-item.disabled .page-link { opacity: 0.4; } @media (max-width: 991px) { .aw-two-col, .aw-blog-grid, .aw-related-posts, .aw-shots { grid-template-columns: 1fr; } .aw-sidebar { position: static; } .aw-game-hero h1 { font-size: 2.4rem; } }