/* ============================================================ AnimeFusion — Aniwave-style frontend theme Every visual is driven by CSS variables so the Theme admin page can override them at runtime (inline :root block). ============================================================ */ :root { /* Brand */ --af-primary: #5a2e98; --af-primary-hover: #6f3eb3; --af-accent: #ffc107; /* yellow rating */ --af-success: #28a745; --af-danger: #dc3545; --af-info: #17a2b8; /* Surfaces */ --af-bg: #1c1c1c; /* page */ --af-surface: #232323; /* cards */ --af-surface-2: #303030; /* hover/popups */ --af-border: rgba(255,255,255,0.06); --af-border-strong: rgba(255,255,255,0.12); /* Text */ --af-text: #e8e8ea; --af-muted: #a0a0a8; --af-muted-2: #777; /* Typography */ /* System font stack — no external font dependency. Matches the look of the prior Nunito/Archivo on every modern OS (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android, system fallback elsewhere). */ --af-font: -apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --af-radius: 8px; --af-radius-lg: 14px; /* Layout */ --af-container: 100%; --af-container-pad: 28px; --af-gap: 18px; --af-card-aspect: 2 / 3; } /* Light mode overrides applied when admin selects light theme. */ .af-theme--light { --af-bg: #f6f6f8; --af-surface: #ffffff; --af-surface-2: #eeeef2; --af-border: rgba(0,0,0,0.08); --af-border-strong: rgba(0,0,0,0.16); --af-text: #1c1c1c; --af-muted: #555; --af-muted-2: #888; } /* ── Reset / Base ───────────────────────────────────────────── */ body.af-frontend { margin: 0; background: var(--af-bg); color: var(--af-text); font-family: var(--af-font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } body.af-frontend a { color: inherit; text-decoration: none; } body.af-frontend a:hover { color: var(--af-primary); } body.af-frontend img { max-width: 100%; display: block; } body.af-frontend h1,h2,h3,h4 { font-weight: 800; margin: 0 0 .4em; } body.af-frontend ::selection { background: var(--af-primary); color: #fff; } /* Scrollbars (WebKit) */ body.af-frontend ::-webkit-scrollbar { width: 10px; height: 10px; } body.af-frontend ::-webkit-scrollbar-track { background: var(--af-surface); } body.af-frontend ::-webkit-scrollbar-thumb { background: var(--af-surface-2); border-radius: 6px; } body.af-frontend ::-webkit-scrollbar-thumb:hover { background: var(--af-primary); } .af-container { max-width: var(--af-container); margin: 0 auto; padding: 0 var(--af-container-pad); width: 100%; box-sizing: border-box; } /* ── Header ─────────────────────────────────────────────────── */ .af-header { position: sticky; top: 0; z-index: 80; background: rgba(28,28,28,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--af-border); } .af-theme--light .af-header { background: rgba(255,255,255,0.92); } .af-header__inner { display: flex; align-items: center; gap: 24px; height: 64px; } .af-header__logo { font-weight: 900; font-size: 1.25rem; color: var(--af-primary); letter-spacing: -0.5px; } .af-header__logo img { max-height: 36px; width: auto; } .af-nav { display: flex; gap: 20px; } .af-nav a { font-size: .92rem; font-weight: 600; color: var(--af-text); padding: 6px 4px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .af-nav a:hover, .af-nav a.is-active { color: var(--af-primary); border-bottom-color: var(--af-primary); } .af-header__search { flex: 1; max-width: 520px; position: relative; margin-left: auto; } .af-header__search input { width: 100%; height: 40px; border-radius: 999px; background: var(--af-surface); border: 1px solid var(--af-border); color: var(--af-text); padding: 0 42px 0 42px; font-size: .92rem; outline: none; } .af-header__search input:focus { border-color: var(--af-primary); } .af-header__search .af-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--af-muted); pointer-events: none; } .af-header__search .af-search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: var(--af-surface-2); border: 1px solid var(--af-border-strong); border-radius: var(--af-radius); max-height: 60vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.4); display: none; } .af-header__search.is-open .af-search-results { display: block; } .af-search-results__item { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--af-border); } .af-search-results__item:hover { background: rgba(255,255,255,0.04); } .af-search-results__item img { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; } .af-search-results__title { font-size: .9rem; font-weight: 600; } .af-search-results__meta { font-size: .72rem; color: var(--af-muted); } /* Mobile-only search toggle (magnifier). Hidden on desktop; the inline search field is always visible there. On mobile it becomes the right-hand icon that expands the field. */ .af-header__search-toggle { display: none; background: transparent; border: 0; padding: 8px; margin-left: auto; color: var(--af-text); cursor: pointer; border-radius: 8px; transition: background .15s; } .af-header__search-toggle:hover { background: rgba(255,255,255,0.06); } .af-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--af-primary); color: #fff; font-weight: 700; cursor: pointer; transition: background .15s; text-decoration: none; } .af-btn:hover { background: var(--af-primary-hover); color: #fff; } .af-btn--ghost { background: transparent; border: 1px solid var(--af-border-strong); color: var(--af-text); } .af-btn--ghost:hover { border-color: var(--af-primary); color: var(--af-primary); background: transparent; } /* Variant aliases so any markup using --primary/--outline matches the one purple theme (these names exist in the legacy frontend.css; map them here so aniwave.css — which loads last — wins and everything stays consistent). */ .af-btn--primary { background: var(--af-primary); color: #fff; border: 0; } .af-btn--primary:hover { background: var(--af-primary-hover); color: #fff; } .af-btn--outline { background: transparent; border: 1px solid var(--af-primary); color: var(--af-primary); } .af-btn--outline:hover { background: var(--af-primary); color: #fff; } .af-btn--sm { padding: 5px 12px; font-size: .8rem; } /* ── Hero swiper ────────────────────────────────────────────── */ /* ── Hero spotlight slider ────────────────────────────────────── Two-column slide: TEXT on the left, crisp poster on the right. A blurred copy of the cover sits in the back as ambient mood colour, but the foreground poster is a real so detail stays sharp. */ .af-hero { margin: 18px 0 30px; border-radius: var(--af-radius-lg); overflow: hidden; } .af-hero .swiper-slide { position: relative; background: var(--af-surface); overflow: hidden; isolation: isolate; } .af-hero__backdrop { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(36px) saturate(1.15) brightness(.45); z-index: 0; transform: scale(1.1); } .af-hero__backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,0.96) 0%, rgba(20,20,22,0.85) 38%, rgba(20,20,22,0.55) 70%, rgba(20,20,22,0.35) 100%), linear-gradient(180deg, rgba(20,20,22,0.30) 0%, rgba(20,20,22,0.65) 100%); } .af-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 46%, 580px); gap: 44px; align-items: stretch; height: 420px; min-height: 420px; padding: 40px 56px 40px 56px; } .af-hero__info { min-width: 0; max-width: 720px; } .af-hero__title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.1; margin: 0 0 14px; font-weight: 900; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); } .af-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .af-hero__chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); padding: 4px 10px; border-radius: 999px; color: var(--af-text); font-size: .78rem; font-weight: 700; backdrop-filter: blur(6px); } .af-hero__chip--rating { background: var(--af-accent); border-color: var(--af-accent); color: #1c1c1c; } .af-hero__chip--rating i { color: #1c1c1c; } .af-hero__chip--live { background: var(--af-danger); border-color: var(--af-danger); color: #fff; letter-spacing: .08em; } .af-hero__synopsis { font-size: .94rem; color: rgba(232,232,234,0.85); margin: 0 0 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; } .af-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; } .af-hero__cta .af-btn i { margin-right: 4px; } /* Right-side poster — real , no blur. Fills the column edge-to-edge with object-fit: cover (crops top/bottom slightly so no letterbox bars). */ .af-hero__poster { display: block; position: relative; width: 100%; height: 100%; align-self: stretch; border-radius: var(--af-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); transform: translateZ(0); transition: transform .35s ease; } .af-hero__poster:hover { transform: translateY(-2px) scale(1.01); } .af-hero__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; image-rendering: -webkit-optimize-contrast; } /* Slider controls — pull them inside the rounded edge. */ .af-hero .swiper-button-prev, .af-hero .swiper-button-next { width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .af-hero .swiper-button-prev:hover, .af-hero .swiper-button-next:hover { background: var(--af-primary); } .af-hero .swiper-button-prev::after, .af-hero .swiper-button-next::after { font-size: 16px; font-weight: 900; } .af-hero .swiper-pagination-bullet { background: rgba(255,255,255,0.55); opacity: 1; } .af-hero .swiper-pagination-bullet-active { background: var(--af-primary); width: 22px; border-radius: 4px; } /* ── Hero: "Spotlight" style (HiAnime/Zoro-inspired) ────────────────────────── Reuses .af-hero (so the same Swiper init drives it). Full-bleed darkened backdrop with left-to-right + bottom gradient; left-aligned text stack. */ .af-spotlight .swiper-slide { min-height: clamp(360px, 46vw, 560px); display: flex; align-items: center; } .af-spotlight__bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; z-index: 0; } /* Gradient scrim: dark on the left for text legibility, fading right; plus a bottom fade. Sits above the image, below the text. */ .af-spotlight__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,20,24,0.96) 0%, rgba(20,20,24,0.82) 32%, rgba(20,20,24,0.35) 64%, rgba(20,20,24,0.15) 100%), linear-gradient(0deg, rgba(20,20,24,0.85) 0%, rgba(20,20,24,0) 45%); } .af-theme--light .af-spotlight__scrim { background: linear-gradient(90deg, rgba(245,245,248,0.96) 0%, rgba(245,245,248,0.8) 34%, rgba(245,245,248,0.25) 70%, rgba(245,245,248,0) 100%), linear-gradient(0deg, rgba(245,245,248,0.85) 0%, rgba(245,245,248,0) 45%); } .af-spotlight__inner { position: relative; z-index: 2; width: 100%; } .af-spotlight__info { max-width: 620px; } .af-spotlight__title { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 900; line-height: 1.1; margin: 0 0 14px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.5); } .af-theme--light .af-spotlight__title { color: #15151a; text-shadow: none; } .af-spotlight__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; font-size: .86rem; font-weight: 600; color: var(--af-text); } .af-spotlight__dot { display: inline-flex; align-items: center; gap: 5px; } .af-spotlight__dot + .af-spotlight__dot::before { content: "•"; margin-right: 14px; color: var(--af-muted); /* visual separator */ } .af-spotlight__dot--score { color: var(--af-accent); } .af-spotlight__dot--score i { color: var(--af-accent); } .af-spotlight__badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; } .af-spotlight__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: #fff; } .af-spotlight__badge--hd { background: rgba(255,255,255,0.16); } .af-spotlight__badge--sub { background: #2e7d32; } .af-spotlight__badge--dub { background: #1565c0; } .af-spotlight__badge--live { background: var(--af-danger); } .af-spotlight__synopsis { margin: 0 0 20px; color: var(--af-text); opacity: .92; font-size: .92rem; line-height: 1.55; max-width: 560px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .af-spotlight__cta { display: flex; gap: 12px; flex-wrap: wrap; } /* Spotlight responsive: shrink + keep text legible on phones. */ @media (max-width: 640px) { .af-spotlight .swiper-slide { min-height: clamp(320px, 76vw, 420px); } .af-spotlight__title { font-size: clamp(1.3rem, 6vw, 1.9rem); } .af-spotlight__synopsis { -webkit-line-clamp: 2; font-size: .86rem; } .af-spotlight__bg { background-position: center 18%; } } /* Responsive: stack on narrow screens, keep poster smaller above text. */ @media (max-width: 880px) { .af-hero__inner { grid-template-columns: 1fr; padding: 28px 22px; min-height: 0; gap: 18px; } .af-hero__poster { order: -1; max-width: 240px; margin: 0 auto; } .af-hero__title { -webkit-line-clamp: 3; } } /* ── Section heading ────────────────────────────────────────── */ .af-section { margin: 40px 0; } .af-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .af-section__title { font-size: 1.25rem; font-weight: 800; position: relative; padding-left: 14px; } .af-section__title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; background: var(--af-primary); } .af-section__link { font-size: .82rem; color: var(--af-muted); } .af-section__link:hover { color: var(--af-primary); } /* ── Anime card grid ────────────────────────────────────────── */ .af-grid { display: grid; gap: var(--af-gap); grid-template-columns: repeat(6, 1fr); } .af-grid--5 { grid-template-columns: repeat(5, 1fr); } .af-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1200px) { .af-grid, .af-grid--5, .af-grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .af-grid, .af-grid--5, .af-grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .af-grid, .af-grid--5, .af-grid--4 { grid-template-columns: repeat(2, 1fr); } } .af-card { position: relative; display: block; } .af-card__poster { position: relative; aspect-ratio: var(--af-card-aspect); border-radius: var(--af-radius); overflow: hidden; background: var(--af-surface); } .af-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .af-card:hover .af-card__poster img { transform: scale(1.05); } .af-card__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7)); opacity: 0; transition: opacity .25s; } .af-card:hover .af-card__poster::after { opacity: 1; } .af-card__ticks { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; } .af-card__tick { font-size: .68rem; font-weight: 800; line-height: 1; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,0.65); color: #fff; text-transform: uppercase; } .af-card__tick--sub { background: var(--af-success); } .af-card__tick--dub { background: var(--af-info); } .af-card__tick--ep { background: var(--af-primary); } .af-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--af-primary); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .25s; } .af-card:hover .af-card__play { opacity: 1; } .af-card__title { margin: 10px 0 4px; font-size: .9rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--af-text); } .af-card:hover .af-card__title { color: var(--af-primary); } .af-card__meta { display: flex; gap: 8px; font-size: .72rem; color: var(--af-muted); } .af-card__meta span { display: inline-flex; align-items: center; gap: 4px; } .af-card__meta .dot { width: 3px; height: 3px; background: var(--af-muted); border-radius: 50%; } /* ── Horizontal carousel row (used on homepage) ─────────────── */ .af-row { position: relative; } .af-row .swiper { overflow: hidden; padding: 4px 2px; } .af-row .swiper-slide { width: calc((100% - (var(--af-gap) * 5)) / 6); height: auto; } @media (max-width: 1440px) { .af-row .swiper-slide { width: calc((100% - (var(--af-gap) * 4)) / 5); } } @media (max-width: 1200px) { .af-row .swiper-slide { width: calc((100% - (var(--af-gap) * 3)) / 4); } } @media (max-width: 900px) { .af-row .swiper-slide { width: calc((100% - (var(--af-gap) * 2)) / 3); } } @media (max-width: 640px) { .af-row .swiper-slide { width: calc((100% - var(--af-gap)) / 2.3); } } .af-row__slider--ep .swiper-slide { width: 280px; } @media (max-width: 640px) { .af-row__slider--ep .swiper-slide { width: 220px; } } .af-row__nav { position: absolute; top: calc(50% - 30px); transform: translateY(-50%); width: 38px; height: 60px; border-radius: 6px; background: rgba(0,0,0,0.7); color: #fff; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1; display: grid; place-items: center; z-index: 5; opacity: 0; transition: opacity .2s, background .2s; } .af-row:hover .af-row__nav { opacity: 1; } .af-row__nav:hover { background: var(--af-primary); } .af-row__nav--prev { left: -8px; } .af-row__nav--next { right: -8px; } .af-row__nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; } /* ── Top10 (ranked list, sidebar) ───────────────────────────── */ .af-top10 { display: flex; flex-direction: column; gap: 10px; } .af-top10__item { display: grid; grid-template-columns: 40px 60px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 6px; } .af-top10__item:hover { background: var(--af-surface-2); } .af-top10__rank { font-size: 1.6rem; font-weight: 900; color: var(--af-primary); text-align: center; } .af-top10__poster { width: 60px; aspect-ratio: var(--af-card-aspect); border-radius: 4px; overflow: hidden; background: var(--af-surface); } .af-top10__poster img { width: 100%; height: 100%; object-fit: cover; } .af-top10__title { font-size: .85rem; font-weight: 700; line-height: 1.25; } .af-top10__meta { font-size: .72rem; color: var(--af-muted); } /* ── Watch / single anime page ──────────────────────────────── */ .af-watch { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 24px; } @media (max-width: 1100px) { .af-watch { grid-template-columns: 1fr; } } .af-anime-banner { position: relative; border-radius: var(--af-radius-lg); overflow: hidden; padding: 32px; min-height: 320px; background: var(--af-surface); } .af-anime-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(40px) brightness(0.4); transform: scale(1.1); } .af-anime-banner__inner { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 24px; } .af-anime-banner__poster { aspect-ratio: var(--af-card-aspect); border-radius: var(--af-radius); overflow: hidden; } .af-anime-banner__poster img { width: 100%; height: 100%; object-fit: cover; } .af-anime-banner__title { font-size: 1.8rem; } .af-anime-banner__alt { color: var(--af-muted); font-size: .9rem; margin-bottom: 12px; } .af-anime-banner__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .af-anime-banner__meta i { background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 4px; color: var(--af-text); font-style: normal; font-size: .78rem; font-weight: 600; } .af-anime-banner__meta i.rating { background: var(--af-accent); color: #1c1c1c; } .af-anime-banner__meta i.score { background: var(--af-success); color: #fff; } .af-anime-banner__synopsis { color: var(--af-text); font-size: .92rem; line-height: 1.6; max-width: 720px; } .af-anime-banner__actions { display: flex; gap: 10px; margin-top: 16px; } .af-info-table { width: 100%; border-collapse: collapse; margin-top: 18px; } .af-info-table th, .af-info-table td { padding: 8px 0; border-bottom: 1px solid var(--af-border); font-size: .85rem; text-align: left; } .af-info-table th { color: var(--af-muted); font-weight: 600; width: 130px; } .af-player { background: #000; border-radius: var(--af-radius-lg); aspect-ratio: 16/9; overflow: hidden; } .af-player iframe, .af-player video { width: 100%; height: 100%; border: 0; } .af-servers { background: var(--af-surface); padding: 14px; border-radius: var(--af-radius); margin-top: 14px; } .af-servers__row { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: center; padding: 8px 0; } .af-servers__row + .af-servers__row { border-top: 1px solid var(--af-border); } .af-servers__label { font-size: .78rem; font-weight: 700; color: var(--af-primary); text-transform: uppercase; } .af-servers__list { display: flex; flex-wrap: wrap; gap: 8px; } .af-server-btn { padding: 6px 14px; border-radius: 999px; background: var(--af-surface-2); font-size: .8rem; font-weight: 600; cursor: pointer; border: 0; color: var(--af-text); } .af-server-btn:hover, .af-server-btn.is-active { background: var(--af-primary); color: #fff; } .af-episodes-panel { background: var(--af-surface); border-radius: var(--af-radius); padding: 14px; } .af-episodes-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .af-episodes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 600px; overflow-y: auto; padding-right: 4px; } .af-episode-chip { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: var(--af-surface-2); color: var(--af-text); font-weight: 700; font-size: .8rem; text-decoration: none; transition: background .12s; } .af-episode-chip:hover { background: var(--af-primary-hover); color: #fff; } .af-episode-chip.is-active { background: var(--af-primary); color: #fff; } .af-episode-chip.is-filler { color: var(--af-accent); } /* ── Filter / search results page ───────────────────────────── */ .af-filter { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin-top: 24px; } @media (max-width: 900px) { .af-filter { grid-template-columns: 1fr; } } .af-filter__sidebar { background: var(--af-surface); border-radius: var(--af-radius); padding: 16px; height: max-content; position: sticky; top: 80px; } .af-filter__group { margin-bottom: 18px; } .af-filter__group label { display: block; font-size: .78rem; font-weight: 700; color: var(--af-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .af-filter__group select, .af-filter__group input { width: 100%; background: var(--af-bg); border: 1px solid var(--af-border-strong); color: var(--af-text); border-radius: 6px; padding: 8px 10px; font-size: .85rem; } .af-filter__results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .af-filter__count { color: var(--af-muted); font-size: .85rem; } /* ── Pagination ─────────────────────────────────────────────── */ .af-pagination { display: flex; gap: 6px; justify-content: center; margin: 30px 0; } .af-pagination a, .af-pagination span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--af-surface); border-radius: 6px; font-size: .85rem; font-weight: 600; } .af-pagination a:hover { background: var(--af-primary); color: #fff; } .af-pagination .is-active { background: var(--af-primary); color: #fff; } /* ── Footer ─────────────────────────────────────────────────── */ .af-footer { margin-top: 60px; padding: 40px 0 30px; background: var(--af-surface); border-top: 1px solid var(--af-border); } .af-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } @media (max-width: 768px) { .af-footer__cols { grid-template-columns: 1fr 1fr; } } .af-footer h4 { font-size: .9rem; color: var(--af-muted); text-transform: uppercase; letter-spacing: 1px; } .af-footer a { display: block; padding: 4px 0; font-size: .85rem; color: var(--af-text); } .af-footer a:hover { color: var(--af-primary); } .af-footer__bottom { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--af-border); color: var(--af-muted); font-size: .82rem; } /* ── Homepage stack wrapper from [af_homepage] ──────────────── */ .af-homepage__section { margin: 30px 0; } /* ============================================================ ANIWAVE-STYLE PRIMITIVES — match aniwaves.ru class names ============================================================ */ /* Two-column layout: aside.main (wide content) + aside.sidebar (right rail). */ .af-aside-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 24px; } @media (max-width: 1100px) { .af-aside-wrapper { grid-template-columns: 1fr; } } .af-aside-wrapper > .af-main { min-width: 0; } .af-aside-wrapper > .af-sidebar { min-width: 0; } /* Section head with title + sub-tabs + paging arrows */ .af-block { margin-bottom: 28px; } .af-block__head { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--af-primary); padding-left: 10px; margin-bottom: 14px; } .af-block__title { font-size: 1.15rem; font-weight: 800; margin: 0; } /* "View all →" header link — small ghost pill so it matches the theme buttons (previously unstyled / browser-default). */ .af-block__link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--af-muted); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--af-border-strong); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .af-block__link:hover { color: #fff; background: var(--af-primary); border-color: var(--af-primary); } .af-block__tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .af-block__tabs .af-tab { font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--af-surface); color: var(--af-muted); cursor: pointer; border: 0; transition: background .15s, color .15s; } .af-block__tabs .af-tab:hover { color: var(--af-text); } .af-block__tabs .af-tab.is-active { background: var(--af-primary); color: #fff; } .af-block__paging { display: flex; gap: 4px; margin-left: 8px; } .af-block__paging button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: var(--af-surface); color: var(--af-text); } .af-block__paging button:hover { background: var(--af-primary); color: #fff; } /* Poster grid (.ani.items in aniwave) — used by Latest Episode, genre list */ .af-ani-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--af-gap); } @media (max-width: 768px) { .af-ani-items { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; } } @media (max-width: 480px) { .af-ani-items { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 10px; } } /* Individual aniwave-style card */ .af-ani-card { position: relative; } .af-ani-card__poster { position: relative; aspect-ratio: var(--af-card-aspect); border-radius: var(--af-radius); overflow: hidden; background: var(--af-surface); display: block; } .af-ani-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .af-ani-card:hover .af-ani-card__poster img { transform: scale(1.06); } /* Bottom-left metadata strip on poster — sub/dub/total episode counts */ .af-ep-wrap { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; font-size: .68rem; font-weight: 800; line-height: 1; } .af-ep-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; color: #fff; background: rgba(0,0,0,0.75); } .af-ep-status.sub { background: var(--af-success); } .af-ep-status.dub { background: var(--af-info); } .af-ep-status.total { background: var(--af-primary); } /* Poster-top type pill (TV / Movie / OVA) */ .af-ani-card__type { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,0.75); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 6px; border-radius: 4px; text-transform: uppercase; z-index: 2; } /* Poster-top score badge (left). */ .af-ani-card__score { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.78); color: var(--af-accent); font-size: .7rem; font-weight: 800; padding: 3px 7px; border-radius: 4px; z-index: 2; } .af-ani-card__score i { font-size: .65rem; } /* Play overlay on hover. */ .af-ani-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; font-size: 2rem; opacity: 0; transition: opacity .15s ease; pointer-events: none; } .af-ani-card:hover .af-ani-card__play { opacity: 1; } .af-ani-card__poster-empty { width: 100%; height: 100%; background: linear-gradient(135deg, var(--af-surface-2), var(--af-surface)); } /* Type chip inside meta row */ .af-ani-card__meta-type { background: var(--af-surface-2); color: var(--af-text); padding: 1px 7px; border-radius: 4px; font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; } .af-ani-card__name { margin: 10px 0 4px; font-size: .9rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .af-ani-card:hover .af-ani-card__name { color: var(--af-primary); } .af-ani-card__meta { display: flex; gap: 8px; font-size: .72rem; color: var(--af-muted); flex-wrap: wrap; } .af-ani-card__meta .dot { width: 3px; height: 3px; background: var(--af-muted); border-radius: 50%; align-self: center; } /* ── Scaff (compact horizontal items: top-tables + sidebar Top Anime) ── */ .af-scaff-items { display: flex; flex-direction: column; gap: 10px; } .af-scaff-item { display: grid; grid-template-columns: 50px 60px 1fr; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: var(--af-surface); } .af-scaff-item:hover { background: var(--af-surface-2); } .af-scaff-item__rank { font-size: 1.8rem; font-weight: 900; color: var(--af-primary); text-align: center; font-style: italic; line-height: 1; } .af-scaff-item.rank1 .af-scaff-item__rank { color: var(--af-accent); } .af-scaff-item.rank2 .af-scaff-item__rank { color: #c0c0c0; } .af-scaff-item.rank3 .af-scaff-item__rank { color: #cd7f32; } .af-scaff-item__poster { width: 60px; aspect-ratio: var(--af-card-aspect); border-radius: 4px; overflow: hidden; } .af-scaff-item__poster img { width: 100%; height: 100%; object-fit: cover; } .af-scaff-item__info { min-width: 0; } .af-scaff-item__name { font-size: .85rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .af-scaff-item:hover .af-scaff-item__name { color: var(--af-primary); } .af-scaff-item__meta { display: flex; gap: 5px; font-size: .68rem; color: var(--af-muted); margin-top: 4px; align-items: center; flex-wrap: wrap; } .af-scaff-item__meta .af-ep-status { padding: 2px 5px; font-size: .62rem; } .af-scaff-pill { background: var(--af-surface-2); color: var(--af-text); padding: 1px 6px; border-radius: 3px; font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; } .af-scaff-score { display: inline-flex; align-items: center; gap: 3px; color: var(--af-accent); font-weight: 800; font-size: .68rem; } .af-scaff-score i { font-size: .58rem; } .af-scaff-year { color: var(--af-muted-2); font-weight: 600; } /* No-rank variant: drop the rank column entirely (used by sidebar "New Added"). */ .af-scaff-item--norank { grid-template-columns: 60px 1fr; } /* Two-column grid variant for the top-tables panels (when not wide enough for full cards). */ .af-ani-items--compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } /* Load-more button (latest-episode panel footer). */ .af-load-more-wrap { display: flex; justify-content: center; margin-top: 18px; } .af-load-more-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--af-surface); color: var(--af-text); border: 1px solid var(--af-border-strong); border-radius: 999px; padding: 10px 24px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .af-load-more-btn:hover:not(:disabled) { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-load-more-btn:disabled { opacity: .6; cursor: default; } .af-load-more-btn__spinner i { font-size: .85rem; } /* Continue Watching rail — landscape thumb cards with progress bar. */ .af-continue { margin-top: 8px; } .af-continue__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .af-continue__card { display: block; border-radius: var(--af-radius); overflow: hidden; background: var(--af-surface); transition: transform .15s ease; } .af-continue__card:hover { transform: translateY(-2px); } .af-continue__poster { position: relative; aspect-ratio: 16 / 9; background: var(--af-surface-2); overflow: hidden; } .af-continue__poster img { width: 100%; height: 100%; object-fit: cover; } .af-continue__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 50%); pointer-events: none; } .af-continue__play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #fff; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity .15s ease; } .af-continue__card:hover .af-continue__play { opacity: 1; } .af-continue__ep-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--af-primary); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; } .af-continue__time { position: absolute; bottom: 12px; right: 8px; z-index: 2; background: rgba(0,0,0,0.78); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 7px; border-radius: 4px; } .af-continue__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: rgba(255,255,255,0.12); } .af-continue__bar-fill { height: 100%; background: var(--af-primary); } .af-continue__info { padding: 10px 12px 12px; } .af-continue__name { margin: 0; font-size: .88rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .af-continue__card:hover .af-continue__name { color: var(--af-primary); } @media (max-width: 640px) { .af-continue__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } } /* Three side-by-side panels under Latest Episode (New Release / New Added / Just Completed). */ .af-top-tables-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--af-gap); margin: 22px 0; } .af-top-tables-row__col { background: var(--af-surface); border-radius: var(--af-radius); padding: 14px 14px 12px; } .af-top-tables-row__col .af-block__head { margin-bottom: 10px; } .af-top-tables-row__col .af-scaff-item { background: var(--af-surface-2); } .af-top-tables-row__col .af-scaff-item:hover { background: rgba(255,255,255,0.06); } @media (max-width: 1100px) { .af-top-tables-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .af-top-tables-row { grid-template-columns: 1fr; } } .af-block__more { margin-left: auto; font-size: .78rem; color: var(--af-muted); font-weight: 600; } .af-block__more:hover { color: var(--af-primary); } /* A-Z block: letter row + grid. */ .af-az__letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; } .af-az__letter { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 9px; border-radius: 6px; background: var(--af-surface); color: var(--af-muted); font-weight: 800; font-size: .78rem; text-transform: uppercase; border: 1px solid var(--af-border); transition: background .15s, color .15s, border-color .15s; } .af-az__letter:hover { background: var(--af-surface-2); color: var(--af-text); } .af-az__letter.is-active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* Browse by Genre — wrapped multi-row chip cloud. Compact pills, no scroll. */ .af-genres { position: relative; } .af-genres__grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 6px; } .af-genres .af-genre-chip { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--af-surface); border: 1px solid var(--af-border-strong); color: var(--af-text); font-size: .78rem; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 5px; } .af-genres .af-genre-chip:hover { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-genres .af-genre-chip__count { background: rgba(255,255,255,0.12); border-radius: 999px; padding: 1px 7px; font-size: .66rem; } /* Sub-tabs container (top-tables NEW RELEASE / NEW ADDED / JUST COMPLETED) */ .af-top-tables { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 14px; } .af-top-tables__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; /* Vertical accent bar matches all the other block headings. */ border-left: 4px solid var(--af-primary); padding-left: 10px; } .af-top-tables__nav-btn { font-size: .78rem; font-weight: 700; padding: 6px 14px; cursor: pointer; background: var(--af-surface-2); color: var(--af-muted); border: 0; border-radius: 999px; transition: background .15s, color .15s; } .af-top-tables__nav-btn:hover { color: var(--af-text); } .af-top-tables__nav-btn.is-active{ background: var(--af-primary); color: #fff; } .af-top-tables__panel { display: none; } .af-top-tables__panel.is-active { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 768px) { .af-top-tables__panel.is-active { grid-template-columns: 1fr; } } /* ── Sidebar Top Anime block ── */ .af-sidebar-block { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 14px; } .af-sidebar-block + .af-sidebar-block { margin-top: 18px; } /* The sidebar variant must keep title + Day/Week/Month tabs on a single row even at narrow widths — the panel is only ~320px wide. */ .af-sidebar-top-anime .af-block__head { flex-wrap: nowrap; gap: 8px; } .af-sidebar-top-anime .af-block__title { font-size: 1rem; white-space: nowrap; } .af-sidebar-top-anime .af-block__tabs { flex-wrap: nowrap; gap: 2px; } .af-sidebar-top-anime .af-block__tabs .af-tab { padding: 3px 9px; font-size: .72rem; } /* ── Aniwave-style header (.af-header overrides + extras) ── */ .af-header__random { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--af-surface); font-size: .8rem; font-weight: 700; color: var(--af-text); text-decoration: none; transition: background .15s, color .15s; } .af-header__random:hover { background: var(--af-primary); color: #fff; } .af-header__lang { display: inline-flex; background: var(--af-surface); border-radius: 999px; padding: 3px; } .af-header__lang span { font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; cursor: pointer; color: var(--af-muted); user-select: none; } .af-header__lang span.is-active { background: var(--af-primary); color: #fff; } /* Search popup with preview cards */ .af-search-popup { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--af-surface-2); border: 1px solid var(--af-border-strong); border-radius: var(--af-radius); max-height: 70vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.5); display: none; z-index: 90; } .af-search-popup.is-open { display: block; } .af-search-popup__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--af-border); font-size: .8rem; font-weight: 700; color: var(--af-muted); } .af-search-popup__body { padding: 6px; } .af-search-popup__item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 6px; text-decoration: none; color: var(--af-text); } .af-search-popup__item:hover { background: rgba(255,255,255,0.06); color: var(--af-text); } .af-search-popup__item img { width: 48px; height: 66px; object-fit: cover; border-radius: 4px; } .af-search-popup__title { font-size: .9rem; font-weight: 700; line-height: 1.2; } .af-search-popup__meta { font-size: .72rem; color: var(--af-muted); margin-top: 2px; } .af-search-popup__foot { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--af-border); font-size: .75rem; color: var(--af-muted); } .af-search-popup__more { color: var(--af-primary); font-weight: 700; } /* Keyboard focus + "/" hint chip */ .af-search-popup__item.is-focused { background: rgba(90,46,152,0.18); outline: 1px solid var(--af-primary); } .af-search-popup__item--empty { color: var(--af-muted); justify-content: center; text-align: center; padding: 18px 8px; } .af-search-popup__item--recent .af-search-popup__chip { width: 48px; height: 48px; border-radius: 50%; background: var(--af-surface); display: flex; align-items: center; justify-content: center; color: var(--af-muted); } .af-search-popup__item--recent .af-search-popup__title { color: var(--af-muted); } .af-search-popup__item--recent.is-focused .af-search-popup__title { color: var(--af-text); } .af-search-popup__body-text { min-width: 0; } /* Sub/Dub mini badges + score pill in result row */ .af-search-popup__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .af-search-popup__meta > span { padding: 1px 6px; background: var(--af-surface); border-radius: 3px; font-weight: 600; } .af-search-popup__badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 3px; font-weight: 700; color: #fff; font-size: .65rem; line-height: 1.5; } .af-search-popup__badge.sub { background: var(--af-success); } .af-search-popup__badge.dub { background: var(--af-info); } .af-search-popup__score { display: inline-flex; align-items: center; gap: 4px; color: var(--af-accent); font-size: .85rem; font-weight: 800; } .af-search-popup__score i { font-size: .7rem; } /* "Recent searches" header strip */ .af-search-popup__section { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--af-muted-2); font-weight: 800; } .af-search-popup__clear { background: transparent; border: 0; color: var(--af-muted); cursor: pointer; font-size: .7rem; font-weight: 700; } .af-search-popup__clear:hover { color: var(--af-primary); } /* "/" focus hint chip inside the search input */ .af-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: var(--af-surface-2); border: 1px solid var(--af-border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 2px 7px; font-family: var(--af-font); font-size: .72rem; font-weight: 800; color: var(--af-muted); pointer-events: none; line-height: 1; transition: opacity .15s ease; } .af-header__search:focus-within .af-search-kbd { opacity: 0; } /* ── Filter bar (#filter-block) ── */ .af-filter-bar { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 16px; margin-bottom: 24px; } .af-filter-bar__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } @media (max-width: 1100px) { .af-filter-bar__row { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .af-filter-bar__row { grid-template-columns: repeat(2, 1fr); } } .af-filter-bar__row + .af-filter-bar__row { margin-top: 10px; } .af-filter-bar select, .af-filter-bar input[type="text"], .af-filter-bar input[type="number"] { width: 100%; background: var(--af-bg); border: 1px solid var(--af-border-strong); color: var(--af-text); border-radius: 8px; padding: 9px 12px; font-size: .9rem; outline: none; } .af-filter-bar select:focus, .af-filter-bar input:focus { border-color: var(--af-primary); } .af-filter-bar__multi { position: relative; background: var(--af-bg); border: 1px solid var(--af-border-strong); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: .9rem; } .af-filter-bar__multi::after { content: '⌄'; position: absolute; right: 12px; top: 6px; color: var(--af-muted); } .af-filter-bar__multi-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--af-surface-2); border: 1px solid var(--af-border-strong); border-radius: 8px; padding: 10px; max-height: 280px; overflow-y: auto; display: none; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .af-filter-bar__multi.is-open .af-filter-bar__multi-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } @media (max-width: 768px) { .af-filter-bar__multi.is-open .af-filter-bar__multi-menu { grid-template-columns: repeat(2, 1fr); } } .af-filter-bar__multi-menu label { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; font-size: .82rem; cursor: pointer; } .af-filter-bar__multi-menu label:hover { background: rgba(255,255,255,0.06); } .af-filter-bar__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; } /* ── Watch page (#w-info, #w-servers etc.) ── */ .af-binfo { display: grid; grid-template-columns: 220px 1fr; gap: 24px; } @media (max-width: 768px) { .af-binfo { grid-template-columns: 1fr; } .af-binfo__poster { max-width: 260px; margin: 0 auto; } } .af-binfo__poster { aspect-ratio: var(--af-card-aspect); border-radius: var(--af-radius); overflow: hidden; } .af-binfo__poster img { width: 100%; height: 100%; object-fit: cover; } .af-binfo__title { font-size: 1.6rem; margin: 0 0 6px; } .af-binfo__alt { color: var(--af-muted); font-style: italic; font-size: .9rem; margin-bottom: 10px; } .af-binfo__icons { display: flex; gap: 8px; margin-bottom: 12px; } .af-binfo__icons i { background: rgba(255,255,255,0.08); color: var(--af-text); font-style: normal; padding: 3px 9px; border-radius: 4px; font-size: .78rem; font-weight: 700; } .af-binfo__icons i.rating { background: var(--af-accent); color: #1c1c1c; } .af-binfo__icons i.quality { background: var(--af-success); color: #fff; } .af-binfo__icons i.sub { background: var(--af-info); color: #fff; } .af-binfo__icons i.dub { background: var(--af-primary); color: #fff; } .af-binfo__synopsis { font-size: .92rem; color: var(--af-muted); line-height: 1.6; margin-bottom: 16px; } .af-bmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; } @media (max-width: 768px) { .af-bmeta { grid-template-columns: 1fr; } } .af-bmeta div { font-size: .85rem; color: var(--af-muted); padding: 4px 0; border-bottom: 1px solid var(--af-border); } .af-bmeta span { color: var(--af-text); font-weight: 600; margin-left: 6px; } .af-bmeta a { color: var(--af-primary); } /* Server tabs (#w-servers) */ .af-servers-block { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 14px; margin-top: 16px; } .af-servers-block__lang-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; padding: 6px 0; gap: 12px; } .af-servers-block__lang-row + .af-servers-block__lang-row { border-top: 1px solid var(--af-border); } .af-servers-block__lang { font-size: .78rem; font-weight: 800; color: var(--af-primary); text-transform: uppercase; letter-spacing: .5px; } .af-servers-block__btns { display: flex; flex-wrap: wrap; gap: 8px; } .af-server-btn { padding: 6px 14px; border-radius: 999px; background: var(--af-surface-2); color: var(--af-text); font-size: .8rem; font-weight: 700; border: 0; cursor: pointer; } .af-server-btn:hover { background: var(--af-primary-hover); color: #fff; } .af-server-btn.is-active { background: var(--af-primary); color: #fff; } /* Episode chips (#w-episodes) — server-side rendered */ .af-w-episodes { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 14px; margin-top: 16px; } .af-w-episodes__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .af-w-episodes__title { font-size: 1rem; font-weight: 800; } .af-w-episodes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 380px; overflow-y: auto; } .af-w-chip { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: var(--af-surface-2); color: var(--af-text); font-weight: 700; font-size: .8rem; text-decoration: none; } .af-w-chip:hover { background: var(--af-primary-hover); color: #fff; } .af-w-chip.is-active { background: var(--af-primary); color: #fff; } .af-w-chip.is-filler { color: var(--af-accent); } .af-w-chip.is-watched { background: rgba(40, 167, 69, 0.15); color: var(--af-success); position: relative; } .af-w-chip.is-watched::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--af-success); box-shadow: 0 0 0 1.5px var(--af-surface); } .af-w-chip.is-next { outline: 1.5px dashed var(--af-primary); outline-offset: -2px; } .af-w-chip.is-active.is-watched::after { display: none; } /* Episode list head — count subscript + tool buttons */ .af-w-episodes__count { margin-left: 8px; font-size: .72rem; color: var(--af-muted); font-weight: 600; } .af-w-episodes__tools { display: flex; gap: 6px; } /* Capsule buttons — same pill treatment as the header "Random" button. */ .af-w-episodes__btn { display: inline-flex; align-items: center; gap: 6px; background: var(--af-surface-2); color: var(--af-text); border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .75rem; font-weight: 700; transition: background .15s, color .15s; } .af-w-episodes__btn:hover { background: var(--af-primary); color: #fff; } .af-w-episodes__btn:hover i, .af-w-episodes__btn:hover span { color: #fff; } .af-w-episodes__btn i { font-size: .8rem; } /* Server toolbar (Pick a server + Autoplay) */ .af-servers-block__toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--af-border); } .af-servers-block__hint { color: var(--af-muted); font-size: .8rem; font-weight: 700; } .af-servers-block__hint i { margin-right: 5px; color: var(--af-primary); } .af-servers-block__lang--sub { color: var(--af-success); } .af-servers-block__lang--dub { color: var(--af-info); } .af-servers-block__lang--raw { color: var(--af-muted); } .af-servers-block__count { color: var(--af-muted); margin-left: 6px; font-weight: 600; font-size: .7rem; } .af-server-btn { display: inline-flex; align-items: center; gap: 6px; } .af-server-btn i { font-size: .75rem; opacity: .8; } .af-server-btn.is-active { box-shadow: 0 0 0 2px rgba(90,46,152,0.45); } /* Autoplay-next toggle */ .af-autoplay { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--af-muted); } .af-autoplay input { position: absolute; opacity: 0; pointer-events: none; } .af-autoplay__track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--af-surface-2); transition: background .15s ease; } .af-autoplay__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--af-muted); transition: transform .15s ease, background .15s ease; } .af-autoplay input:checked ~ .af-autoplay__track { background: rgba(90,46,152,0.35); } .af-autoplay input:checked ~ .af-autoplay__track::after { transform: translateX(14px); background: var(--af-primary); } .af-autoplay__label { line-height: 1; } .af-autoplay:hover { color: var(--af-text); } /* Watch page wrapper */ .af-watch-page { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 18px; } @media (max-width: 1100px) { .af-watch-page { grid-template-columns: 1fr; } } .af-watch-page__main { min-width: 0; } .af-watch-page__aside { min-width: 0; } .af-watch-page__player { background: #000; border-radius: var(--af-radius-lg); aspect-ratio: 16/9; overflow: hidden; /* Slightly shorter player: cap the 16/9 box so on wide screens it doesn't dominate the page — keeps the episode list/server bar above the fold. */ max-height: 62vh; } .af-watch-page__player iframe { width: 100%; height: 100%; border: 0; } @media (max-width: 1100px) { /* Single-column layout: let the aspect-ratio rule alone (no vh cap), the player is already compact relative to the viewport. */ .af-watch-page__player { max-height: none; } } /* HiAnime-style watch layout (desktop): episodes rail on the LEFT of the player. The DOM order stays player-first (mobile keeps the stacked flow); grid re-places the two into one row. Everything else (servers, prev/next, info, recommendations) spans the full main column below. */ @media (min-width: 1101px) { .af-watch-page__main { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; } .af-watch-page__main > * { grid-column: 1 / -1; min-width: 0; } .af-watch-page__main > #w-media { grid-column: 2; grid-row: 1; } .af-watch-page__main > #w-episodes { grid-column: 1; grid-row: 1; margin-top: 0; /* height:0 keeps the list from defining the row height; min-height:100% then stretches it to EXACTLY the player's height. The chip grid takes the remaining space and scrolls. */ height: 0; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; } .af-watch-page__main > #w-episodes .af-w-episodes__grid { flex: 1; max-height: none; min-height: 0; } } /* Recommendations rail */ .af-recs { background: var(--af-surface); border-radius: var(--af-radius-lg); padding: 14px; margin-top: 24px; } .af-recs__head { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; border-left: 4px solid var(--af-primary); padding-left: 10px; } /* ── Anime detail page (/anime/{slug}/?info=1) ──────────────────────────── */ .af-anime-banner { position: relative; border-radius: var(--af-radius-lg); overflow: hidden; margin: 8px 0 24px; isolation: isolate; background: var(--af-surface); } .af-anime-banner__backdrop { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(36px) saturate(1.15) brightness(.45); z-index: 0; transform: scale(1.1); } .af-anime-banner__backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,0.96) 0%, rgba(20,20,22,0.85) 40%, rgba(20,20,22,0.55) 70%, rgba(20,20,22,0.35) 100%), linear-gradient(180deg, rgba(20,20,22,0.30) 0%, rgba(20,20,22,0.65) 100%); } .af-anime-banner__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 28%, 320px); gap: 40px; align-items: center; padding: 36px 48px; min-height: 360px; } .af-anime-banner__info { min-width: 0; } .af-anime-banner__title { font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.1; margin: 0 0 8px; font-weight: 900; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .af-anime-banner__alt { color: var(--af-muted); font-size: .95rem; font-weight: 600; margin-bottom: 12px; } .af-anime-banner__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .af-anime-banner__synopsis { color: rgba(232,232,234,0.88); font-size: .94rem; line-height: 1.55; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .af-anime-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; } .af-anime-banner__actions .af-btn i { margin-right: 5px; } .af-anime-banner__poster { border-radius: var(--af-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06); aspect-ratio: 2 / 3; } .af-anime-banner__poster img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: -webkit-optimize-contrast; } @media (max-width: 880px) { .af-anime-banner__inner { grid-template-columns: 1fr; padding: 22px 18px; gap: 16px; } .af-anime-banner__poster { order: -1; max-width: 200px; margin: 0 auto; aspect-ratio: 2 / 3; } } .af-anime-synopsis { color: var(--af-text); line-height: 1.7; margin: 0; white-space: pre-line; } /* Characters grid */ .af-anime-chars__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .af-anime-char { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; background: var(--af-surface-2); padding: 8px; border-radius: 8px; transition: background .15s ease; } .af-anime-char:hover { background: rgba(255,255,255,0.06); } .af-anime-char__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--af-surface); } .af-anime-char__avatar img { width: 100%; height: 100%; object-fit: cover; } .af-anime-char__name { font-size: .82rem; font-weight: 700; line-height: 1.2; } .af-anime-char__role { font-size: .68rem; color: var(--af-muted); text-transform: uppercase; letter-spacing: .04em; } /* Info aside (.af-bmeta variant) */ .af-anime-info__h { margin: 18px 0 8px; font-size: .78rem; color: var(--af-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; } .af-anime-info__pills { display: flex; flex-wrap: wrap; gap: 6px; } .af-anime-info__pill { display: inline-flex; align-items: center; background: var(--af-surface-2); color: var(--af-text); padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; transition: background .15s ease, color .15s ease; } .af-anime-info__pill:hover { background: var(--af-primary); color: #fff; } /* Watchlist button + status dropdown */ .af-watchlist-btn { display: inline-flex; align-items: center; gap: 6px; } .af-watchlist-btn i { font-size: .85rem; } .af-watchlist-btn.is-added { background: var(--af-success); border-color: var(--af-success); color: #fff; } .af-watchlist-btn.is-added:hover { background: var(--af-success); } .af-watchlist-menu { position: absolute; z-index: 1000; min-width: 200px; padding: 6px; background: var(--af-surface-2); border: 1px solid var(--af-border-strong); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,0.55); } .af-watchlist-menu button { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; color: var(--af-text); border: 0; cursor: pointer; padding: 8px 10px; border-radius: 6px; font-size: .85rem; font-weight: 600; text-align: left; } .af-watchlist-menu button:hover { background: rgba(255,255,255,0.06); } .af-watchlist-menu button i { width: 16px; color: var(--af-muted); } .af-watchlist-menu button:hover i { color: var(--af-primary); } .af-watchlist-menu button.is-current { background: rgba(90,46,152,0.18); } .af-watchlist-menu button.is-current i { color: var(--af-primary); } .af-watchlist-menu__remove { color: var(--af-danger) !important; } .af-watchlist-menu__remove i { color: var(--af-danger) !important; } .af-watchlist-menu__remove:hover { background: rgba(220,53,69,0.15) !important; } /* ── Loading / utility ──────────────────────────────────────── */ .af-loading { color: var(--af-muted); padding: 20px; text-align: center; } .af-empty { color: var(--af-muted); padding: 30px; text-align: center; background: var(--af-surface); border-radius: var(--af-radius); } /* ── Watchlist page ─────────────────────────────────────────── */ .af-watchlist { margin-bottom: 60px; } .af-watchlist__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .af-watchlist__title { font-size: 1.4rem; font-weight: 800; margin: 0; display: inline-flex; align-items: center; } .af-watchlist__tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--af-border); margin-bottom: 22px; padding-bottom: 0; } .af-watchlist__tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px 8px 0 0; font-size: .88rem; font-weight: 600; color: var(--af-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s, background .15s; } .af-watchlist__tab:hover { color: var(--af-text); background: rgba(255,255,255,0.04); } .af-watchlist__tab.is-active { color: var(--af-primary); border-bottom-color: var(--af-primary); background: rgba(90,46,152,0.10); } .af-watchlist__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; background: rgba(255,255,255,0.08); color: var(--af-text); border-radius: 10px; font-size: .72rem; font-weight: 700; } .af-watchlist__tab.is-active .af-watchlist__count { background: var(--af-primary); color: #fff; } @media (max-width: 640px) { .af-watchlist__head { flex-direction: column; align-items: flex-start; } .af-watchlist__tab { padding: 8px 12px; font-size: .82rem; } } /* ── Auth modal (login + signup) ───────────────────────────── */ .af-auth-modal[hidden] { display: none; } .af-auth-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .af-auth-modal__backdrop { position: absolute; inset: 0; background: rgba(5,5,12,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .af-auth-modal__dialog { position: relative; width: 100%; max-width: 420px; background: var(--af-surface); border: 1px solid var(--af-border-strong); border-radius: var(--af-radius-lg); padding: 32px 28px 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(90,46,152,0.05); animation: af-auth-pop .18s ease-out; overflow: hidden; } .af-auth-modal__dialog::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--af-primary), var(--af-primary-hover)); } @keyframes af-auth-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .af-auth-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 0; color: var(--af-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; } .af-auth-modal__close:hover { background: rgba(255,255,255,0.14); } .af-auth-modal__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; margin-bottom: 18px; } .af-auth-modal__tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--af-surface-2); padding: 4px; border-radius: 999px; border: 1px solid var(--af-border); } .af-auth-modal__tab { flex: 1; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--af-muted); font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .15s, color .15s; } .af-auth-modal__tab:hover { color: var(--af-text); } .af-auth-modal__tab.is-active { background: var(--af-primary); color: #fff; } .af-auth-form { display: none; } .af-auth-form.is-active { display: block; } .af-auth-field { display: block; margin-bottom: 12px; } .af-auth-field > span { display: block; font-size: .78rem; color: var(--af-muted); margin-bottom: 5px; font-weight: 600; } .af-auth-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .af-auth-field__aside { color: var(--af-primary); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; } .af-auth-field__aside:hover { text-decoration: underline; color: var(--af-primary-hover); } /* Password show/hide toggle. The wrapper is position:relative so the eye button can sit absolutely inside; the input gets padding-right to make room for the button. */ .af-pw-wrap { position: relative; display: block; } .af-pw-wrap input { padding-right: 42px !important; } .af-pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 0; color: var(--af-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .af-pw-toggle:hover { color: var(--af-text); background: rgba(255,255,255,0.06); } .af-pw-toggle.is-on { color: var(--af-primary); } /* Armed state for sign-out confirm — flips the row red so the user sees "this click commits". Animates the background subtly. */ [data-af-auth-logout].is-confirming { background: rgba(220,53,69,0.18) !important; color: var(--af-danger) !important; } [data-af-auth-logout].is-confirming i { color: var(--af-danger) !important; } /* One-shot toast — used by the post-signup welcome. Bottom-right, slides up + fades. Fixed positioning so it floats over any layout. */ .af-toast { position: fixed; right: 20px; bottom: 20px; z-index: 99998; display: inline-flex; align-items: center; gap: 10px; background: var(--af-surface); border: 1px solid var(--af-border-strong); border-radius: 10px; padding: 12px 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); font-size: .9rem; font-weight: 600; color: var(--af-text); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; max-width: calc(100vw - 40px); } .af-toast.is-in { opacity: 1; transform: translateY(0); } .af-toast i { color: var(--af-success); font-size: 1.1rem; } .af-toast--welcome { border-left: 3px solid var(--af-success); } .af-toast strong { color: var(--af-primary); font-weight: 800; } .af-auth-field input { width: 100%; padding: 11px 14px; background: var(--af-surface-2); border: 1px solid var(--af-border); border-radius: var(--af-radius); color: var(--af-text); font-size: .92rem; transition: border-color .15s, box-shadow .15s, background .15s; } .af-auth-field input::placeholder { color: var(--af-muted-2); } .af-auth-field input:hover { border-color: var(--af-border-strong); } .af-auth-field input:focus { outline: 0; border-color: var(--af-primary); box-shadow: 0 0 0 3px rgba(90,46,152,0.22); background: var(--af-surface); } .af-auth-remember { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; cursor: pointer; color: var(--af-muted); font-size: .84rem; } .af-auth-remember input { accent-color: var(--af-primary); } .af-auth-error { background: rgba(220,53,69,0.12); border: 1px solid rgba(220,53,69,0.35); color: #ff8a92; padding: 9px 11px; border-radius: 8px; font-size: .82rem; margin-bottom: 12px; } .af-auth-submit { width: 100%; justify-content: center; gap: 8px; padding: 12px 18px; font-size: .95rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(90,46,152,0.35); transition: background .15s, box-shadow .15s, transform .1s; } .af-auth-submit:hover { box-shadow: 0 8px 24px rgba(90,46,152,0.5); } .af-auth-submit:active { transform: translateY(1px); } .af-auth-submit[disabled] { opacity: .7; cursor: not-allowed; box-shadow: none; } .af-auth-submit__spin { display: inline-flex; } .af-auth-switch { text-align: center; margin: 14px 0 0; color: var(--af-muted); font-size: .82rem; } .af-auth-switch a { color: var(--af-primary); font-weight: 600; } body.af-auth-open { overflow: hidden; } /* ── Header user menu (logged-in) ──────────────────────────── */ .af-user-menu { position: relative; } .af-user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--af-border); border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--af-text); cursor: pointer; transition: border-color .15s, background .15s; } .af-user-menu__trigger:hover { border-color: var(--af-primary); background: rgba(255,255,255,0.07); } .af-user-menu__trigger img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; } .af-user-menu__name { font-size: .85rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .af-user-menu__trigger i { font-size: .7rem; color: var(--af-muted); } .af-user-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 200; } .af-user-menu__panel[hidden] { display: none; } .af-user-menu__panel a, .af-user-menu__panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 6px; color: var(--af-text); font-size: .87rem; text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left; } .af-user-menu__panel a:hover, .af-user-menu__panel button:hover { background: rgba(255,255,255,0.06); } .af-user-menu__panel i { width: 16px; color: var(--af-muted); } .af-user-menu__panel a:hover i, .af-user-menu__panel button:hover i { color: var(--af-primary); } .af-user-menu__logout { color: var(--af-danger) !important; } .af-user-menu__logout i { color: var(--af-danger) !important; } @media (max-width: 640px) { .af-user-menu__name { display: none; } } /* ── Account dashboard (/account/) ─────────────────────────── */ .af-account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; margin-bottom: 60px; } .af-account__side { background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 12px; padding: 18px; height: fit-content; position: sticky; top: 80px; } .af-account__user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--af-border); margin-bottom: 12px; } .af-account__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--af-primary); } .af-account__user-meta { min-width: 0; flex: 1; } .af-account__user-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .af-account__user-handle { color: var(--af-muted); font-size: .78rem; } .af-account__badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; background: var(--af-primary); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: background .15s; } .af-account__badge:hover { background: var(--af-primary-hover); color: #fff; } .af-account__badge i { font-size: .7rem; } .af-account__nav { display: flex; flex-direction: column; gap: 2px; } .af-account__nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--af-text); font-size: .88rem; font-weight: 500; text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%; transition: background .15s, color .15s; } .af-account__nav-link:hover { background: rgba(255,255,255,0.05); } .af-account__nav-link i { width: 18px; color: var(--af-muted); font-size: .9rem; } .af-account__nav-link:hover i { color: var(--af-primary); } .af-account__nav-link.is-active { background: rgba(90,46,152,0.16); color: var(--af-primary); } .af-account__nav-link.is-active i { color: var(--af-primary); } .af-account__nav-logout { color: var(--af-danger) !important; margin-top: 6px; border-top: 1px solid var(--af-border); border-radius: 0 0 8px 8px; padding-top: 12px; } .af-account__nav-logout i { color: var(--af-danger) !important; } .af-account__main { min-width: 0; } .af-account__head { margin-bottom: 22px; } .af-account__title { font-size: 1.55rem; font-weight: 800; margin: 0 0 4px; } .af-account__subtitle { color: var(--af-muted); margin: 0; font-size: .92rem; } .af-account__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; } .af-account__stat { display: block; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 10px; padding: 18px 16px; text-decoration: none; color: var(--af-text); transition: border-color .15s, transform .15s; } .af-account__stat:hover { border-color: var(--af-primary); transform: translateY(-2px); } .af-account__stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--af-primary); } .af-account__stat-lbl { font-size: .78rem; color: var(--af-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; } /* Continue-watching + history cards (horizontal rows). */ .af-account__cw { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .af-cw-card { display: flex; gap: 12px; background: var(--af-surface); border: 1px solid var(--af-border); border-radius: 10px; padding: 8px; text-decoration: none; color: var(--af-text); transition: border-color .15s, transform .15s; } .af-cw-card:hover { border-color: var(--af-primary); transform: translateY(-2px); } .af-cw-card__thumb { position: relative; width: 130px; height: 76px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--af-bg); } .af-cw-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .af-cw-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; opacity: 0; background: rgba(0,0,0,0.45); transition: opacity .15s; } .af-cw-card:hover .af-cw-card__play { opacity: 1; } .af-cw-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); } .af-cw-card__bar span { display: block; height: 100%; background: var(--af-primary); } .af-cw-card__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; } .af-cw-card__title { font-weight: 700; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .af-cw-card__ep { font-size: .76rem; color: var(--af-muted); margin-top: 4px; } /* Profile form */ .af-profile-form { max-width: 640px; } .af-profile-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .af-profile-form__sep { border: 0; border-top: 1px solid var(--af-border); margin: 22px 0 16px; } .af-profile-form__hint { color: var(--af-muted); font-size: .82rem; margin: 0 0 14px; } .af-profile-form input:disabled { opacity: .55; cursor: not-allowed; } .af-profile-form__locked { display: inline-flex; align-items: center; gap: 6px; color: var(--af-muted-2); font-size: .72rem; margin-top: 4px; font-weight: 500; } .af-profile-form__locked i { font-size: .68rem; } .af-auth-success { background: rgba(40,167,69,0.14); border: 1px solid rgba(40,167,69,0.4); color: #6cf08a; padding: 9px 11px; border-radius: 8px; font-size: .82rem; margin-bottom: 12px; } @media (max-width: 880px) { .af-account { grid-template-columns: 1fr; } .af-account__side { position: static; } .af-profile-form__row { grid-template-columns: 1fr; } } /* ── Favorite heart toggle on cards ────────────────────────── */ .af-fav-btn { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, background .15s, color .15s; z-index: 3; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .af-ani-card:hover .af-fav-btn, .af-fav-btn.is-fav, .af-fav-btn:focus-visible { opacity: 1; transform: translateY(0); } .af-fav-btn:hover { background: var(--af-danger); border-color: var(--af-danger); } .af-fav-btn.is-fav { background: var(--af-danger); border-color: var(--af-danger); color: #fff; } .af-fav-btn.is-fav:hover { background: rgba(220,53,69,0.7); } .af-fav-btn i { font-size: .92rem; } .af-fav-btn.is-loading { opacity: .6; pointer-events: none; } @keyframes af-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } .af-fav-btn.is-bumping i { animation: af-fav-pop .3s ease; } /* Touch devices have no :hover state → heart would never appear. Show it always, slightly dimmed so it doesn't fight the poster, full-opacity when favorited or pressed. */ @media (hover: none) { .af-fav-btn { opacity: .85; transform: translateY(0); } .af-fav-btn.is-fav { opacity: 1; } } /* ────────────────────────────────────────────────────────────────────── Button harmonization Re-themes legacy frontend.css controls (search, episode sort, schedule tabs, etc.) to use the aniwave primary purple instead of the yellow accent. Keeps every CTA visually consistent with .af-btn. ────────────────────────────────────────────────────────────────────── */ /* Search box submit button */ .af-search-btn, button.af-search-btn { background: var(--af-primary); color: #fff; transition: background .15s; } .af-search-btn:hover { background: var(--af-primary-hover); } .af-search-input:focus { border-color: var(--af-primary); } /* Episode list sort toggle (anime page) */ .af-episode-list__sort-btn { border-radius: 999px; transition: background .15s, border-color .15s, color .15s; } .af-episode-list__sort-btn:hover { border-color: var(--af-primary); color: var(--af-primary); } .af-episode-list__sort-btn.active, .af-episode-list__sort-btn.is-active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* Schedule tabs */ .af-schedule__tab:hover { border-color: var(--af-primary); color: var(--af-primary); } .af-schedule__tab--active, .af-schedule__tab.is-active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } .af-schedule__item:hover { border-color: var(--af-primary); } .af-schedule__title:hover { color: var(--af-primary); } /* Genre chips on schedule/legacy pages */ .af-genre-chip:hover { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* Episode card hover/active */ .af-episode-card:hover, .af-episode-card--active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* Search results dropdown highlights */ .af-search-results__item:hover { background: rgba(90,46,152,0.18); } /* Filter form submit (search page) */ .af-filter-form button[type="submit"], .af-filter-form .af-btn { background: var(--af-primary); color: #fff; } .af-filter-form button[type="submit"]:hover, .af-filter-form .af-btn:hover { background: var(--af-primary-hover); } /* Anime banner action row — give every banner button the same pill shape and primary fill, regardless of which compound class it carries. */ .af-anime-banner__actions .af-btn, .af-anime-banner__actions button { border-radius: 999px; font-weight: 700; } .af-anime-banner__actions .af-watchlist-btn.is-in-list, .af-anime-banner__actions .af-watchlist-btn[data-in="1"] { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* Episode page sort/jump controls */ .af-w-episodes__btn:hover { background: var(--af-primary); border-color: var(--af-primary); color: #fff; } /* ── Global hover text-color fix ───────────────────────────────────────── Every button that flips to the primary purple fill on hover must ALSO flip its descendants (icons, spans, counts) to white — child elements often carry their own muted/accent color which otherwise stays dark on the purple background and becomes unreadable. One sweep rule instead of patching each block. */ .af-btn:hover *, .af-btn--primary:hover *, .af-btn--outline:hover *, .af-load-more-btn:hover:not(:disabled) *, .af-server-btn:hover *, .af-server-btn.is-active *, .af-w-episodes__btn:hover *, .af-block__paging button:hover *, .af-anime-info__pill:hover *, .af-genre-chip:hover *, .af-search-btn:hover *, .af-header__random:hover *, .af-episode-chip:hover *, .af-w-chip:hover * { color: #fff; } /* Ghost/outline-on-transparent buttons highlight with primary TEXT instead of a fill — their children follow the accent, not white. */ .af-btn--ghost:hover *, .af-episode-list__sort-btn:hover * { color: var(--af-primary); } .af-episode-list__sort-btn.active:hover *, .af-episode-list__sort-btn.is-active:hover * { color: #fff; } /* Sort dropdowns on genre/search pages */ .af-filter__results-head select, .af-filter__results-head input { background: var(--af-surface-2); color: var(--af-text); border: 1px solid var(--af-border-strong); border-radius: 8px; padding: 6px 10px; transition: border-color .15s; } .af-filter__results-head select:focus, .af-filter__results-head input:focus { border-color: var(--af-primary); outline: none; } /* Generic CTA inside auth modal extra slots (forgot, switch tab) */ .af-auth-modal__switch a, .af-auth-modal__switch button { color: var(--af-primary); background: transparent; border: 0; cursor: pointer; font-weight: 700; } .af-auth-modal__switch a:hover, .af-auth-modal__switch button:hover { color: var(--af-primary-hover); } /* Focus ring across every interactive element — same purple, accessible. */ .af-btn:focus-visible, .af-tab:focus-visible, .af-pagination a:focus-visible, .af-load-more-btn:focus-visible, .af-search-btn:focus-visible, .af-episode-list__sort-btn:focus-visible, .af-schedule__tab:focus-visible, .af-genre-chip:focus-visible, .af-row__nav:focus-visible, .af-w-episodes__btn:focus-visible, .af-account__nav-link:focus-visible, .af-auth-modal__tab:focus-visible, .af-pw-toggle:focus-visible, .af-fav-btn:focus-visible { outline: 2px solid var(--af-primary); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────── Auth modal — helper text + fine print + polish ────────────────────────────────────────────────────────────────────── */ .af-auth-field__hint { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.45; color: var(--af-muted); } .af-auth-fine { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; background: rgba(90,46,152,0.08); border: 1px solid rgba(90,46,152,0.22); border-radius: 10px; color: var(--af-muted); font-size: .76rem; line-height: 1.5; } .af-auth-fine i { color: var(--af-primary); font-size: .85rem; margin-top: 2px; flex-shrink: 0; } .af-auth-remember { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font-size: .82rem; color: var(--af-muted); cursor: pointer; user-select: none; } .af-auth-remember input { accent-color: var(--af-primary); } /* Submit button: gradient sheen matching .af-btn but slightly elevated. */ .af-auth-submit { background: linear-gradient(135deg, var(--af-primary), var(--af-primary-hover)); } .af-auth-submit:hover { background: linear-gradient(135deg, var(--af-primary-hover), var(--af-primary)); } /* ────────────────────────────────────────────────────────────────────── Mobile navigation The desktop bar packs logo + 7 links + search + Random + lang + auth into a single row. Below ~900px that's no longer feasible — we hide the heavy bits and reveal a hamburger that opens a slide-in drawer. ────────────────────────────────────────────────────────────────────── */ /* Hamburger button — hidden on desktop, becomes the leftmost element on mobile. */ .af-header__menu-btn { display: none; background: transparent; border: 0; padding: 8px; margin-right: 8px; color: var(--af-text); cursor: pointer; border-radius: 8px; transition: background .15s; } .af-header__menu-btn:hover { background: rgba(255,255,255,0.06); } .af-header__menu-bars { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; } .af-header__menu-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; } /* Drawer — fixed full-height panel sliding from the left. */ .af-mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; opacity: 0; transition: opacity .2s; } .af-mobile-backdrop[hidden] { display: none; } .af-mobile-backdrop.is-open { opacity: 1; } .af-mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); background: var(--af-surface); border-right: 1px solid var(--af-border); z-index: 9999; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .af-mobile-drawer[hidden] { display: none; } .af-mobile-drawer.is-open { transform: translateX(0); } .af-mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--af-border); } .af-mobile-drawer__brand { font-weight: 900; font-size: 1.1rem; color: var(--af-primary); text-decoration: none; } .af-mobile-drawer__brand img { max-height: 30px; width: auto; display: block; } .af-mobile-drawer__close { background: transparent; border: 0; color: var(--af-muted); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: background .15s, color .15s; } .af-mobile-drawer__close:hover { background: rgba(255,255,255,0.08); color: var(--af-text); } .af-mobile-drawer__nav, .af-mobile-drawer__shortcuts { display: flex; flex-direction: column; padding: 8px 0; } .af-mobile-drawer__shortcuts { border-top: 1px solid var(--af-border); margin-top: auto; /* push shortcuts to the bottom of the drawer */ } .af-mobile-drawer__link { display: flex; align-items: center; gap: 12px; padding: 13px 18px; color: var(--af-text); text-decoration: none; font-size: .95rem; font-weight: 500; background: transparent; border: 0; text-align: left; cursor: pointer; transition: background .15s, color .15s; } .af-mobile-drawer__link i { width: 18px; color: var(--af-muted); font-size: .9rem; } .af-mobile-drawer__link:hover { background: rgba(90,46,152,0.12); color: #fff; } .af-mobile-drawer__link:hover i { color: var(--af-primary); } .af-mobile-drawer__link.is-active { color: var(--af-primary); background: rgba(90,46,152,0.12); font-weight: 700; } .af-mobile-drawer__link.is-active i { color: var(--af-primary); } .af-mobile-drawer__link--logout { color: var(--af-danger); } .af-mobile-drawer__link--logout i { color: var(--af-danger); } /* EN/JP toggle inside the drawer shortcuts. */ .af-mobile-drawer__lang { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--af-muted); font-weight: 700; font-size: .85rem; } .af-mobile-drawer__lang i { width: 18px; text-align: center; } .af-mobile-drawer__lang span { cursor: pointer; padding: 2px 8px; border-radius: 6px; transition: background .15s, color .15s; } .af-mobile-drawer__lang span.is-active { background: var(--af-primary); color: #fff; } /* Body lock when drawer is open. */ body.af-menu-open { overflow: hidden; } /* Responsive header — kicks in below 900px. Clean 3-zone bar: [menu] …… [logo, centered] …… [search icon]. Everything else (nav, lang, random, login/signup, user name) moves into the hamburger drawer. The search field is collapsed to an icon; tapping it drops the full-width field below the bar (.af-header__search.is-expanded). */ @media (max-width: 900px) { .af-header__menu-btn { display: inline-flex; align-items: center; } .af-header__inner { gap: 8px; position: relative; } /* Logo dead-centre, regardless of the side elements' widths. */ .af-header__logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } /* Hide all the bar clutter on mobile — it lives in the drawer now. */ .af-header__inner .af-nav, .af-header__inner .af-header__lang, .af-header__inner .af-header__random, .af-header__inner .af-btn, .af-header__inner .af-user-menu { display: none; } /* Right-hand search: show the toggle, collapse the field by default. */ .af-header__search-toggle { display: inline-flex; align-items: center; } .af-header__search { position: static; margin-left: 0; flex: 0 0 auto; max-width: none; } .af-header__search:not(.is-expanded) { display: none; } /* Expanded: full-width field dropping below the bar. */ .af-header__search.is-expanded { display: block; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 16px; background: var(--af-surface); border-bottom: 1px solid var(--af-border); box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index: 79; } .af-header__search.is-expanded .af-search-input { width: 100%; } /* Hide the keyboard hint on the expanded mobile field. */ .af-header__search.is-expanded .af-search-kbd { display: none; } } /* Desktop (≥901px): force the mobile-only controls hidden. The Hello Elementor theme + Elementor stylesheets load AFTER aniwave.css, and a generic `header button {…}` rule there can out-cascade the base `display:none` above, leaking the hamburger / search-toggle onto laptop screens. Pinning them here with an ancestor selector (higher specificity) + !important makes the desktop bar immune to whatever loads later. */ @media (min-width: 901px) { .af-header .af-header__menu-btn, .af-header .af-header__search-toggle { display: none !important; } }