Something went wrong. Try again.
dominationchronicles.com mirror
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358/* Larger podcast cards for homepage grid */.card.card-podcast { min-height: 420px;}.card-podcast .card-img-top { height: 260px; object-fit: cover;}/* ========================================== PALET WARNA "GRIDIRON" ==========================================*/:root { --color-bg-primary: #1a1a1a; /* Arang pekat */ --color-bg-secondary: #2c2c2e; /* Abu-abu gelap (untuk kartu) */ --color-text-primary: #f5f5f7; /* Putih gading */ --color-text-secondary: #8a8a8e; /* Abu-abu medium */ --color-accent: #ff9d63; /* Oranye Tembaga */ --color-accent-hover: #ff7a29; /* Oranye lebih cerah */ --color-btn-bg: #eb7932;}
/* ========================================== PENGATURAN DASAR & TIPOGRAFI ==========================================*/.visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}body { background-color: var(--color-bg-primary); color: var(--color-text-primary); font-family: 'Roboto', sans-serif;}a {color: var(--color-accent); text-decoration: none; font-weight: bold;}h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--color-text-primary);}
.text-accent { color: var(--color-accent) !important;}
/* ========================================== OVERRIDE & KUSTOMISASI BOOTSTRAP ==========================================*/.bg-dark { background-color: var(--color-bg-primary) !important;}
.bg-dark-secondary { background-color: var(--color-bg-secondary) !important;}
.btn-primary { background-color: #ff9d63; border-color: var(--color-accent); font-weight: 700; text-transform: uppercase; color: #1a1a1a; letter-spacing: 0.5px; padding: 0.75rem 1.5rem;}
.btn-primary:hover { background-color: #ffae82; border-color: var(--color-accent-hover); transform: translateY(-2px); color: #1a1a1a; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.btn-outline-primary { color: var(--color-accent); border-color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.75rem 1.5rem;}
.btn-outline-primary:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-primary); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.btn-outline-light { padding: 0.75rem 1.5rem; font-weight: 700;}
/* ========================================== STYLING PER BAGIAN ==========================================*/
/* 1. Navbar */.navbar { transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; background-color: transparent; }
.navbar.navbar-scrolled { background-color: var(--color-bg-primary) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.navbar .nav-link { font-weight: 700; margin: 0 0.5rem;}
.navbar .nav-link.active,.navbar .nav-link:hover{ color: var(--color-accent-hover);}
.platform-logo { filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease-in-out; max-height: 60px; width: auto; }
.platform-link:hover .platform-logo { filter: grayscale(0%); opacity: 1; transform: scale(1.1);}
.episode-list-item { background-color: var(--color-bg-secondary); border-radius: 8px; margin-bottom: 1.5rem; padding: 1.5rem; transition: background-color 0.3s, transform 0.3s; } .episode-list-item:hover { background-color: #3a3a3d; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .episode-list-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 6px; } .pagination-container .page-link { background-color: var(--color-bg-secondary); border-color: var(--color-bg-secondary); color: var(--color-text-primary); transition: background-color 0.3s, color 0.3s; } .pagination-container .page-link:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg-primary); } .pagination-container .page-item.disabled .page-link { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); opacity: 0.5; } .embed-container { position: relative; padding-bottom: 56.25%; /* Rasio 16:9 */ height: 0; overflow: hidden; max-width: 100%; background: var(--color-bg-secondary); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .notes-card { background-color: var(--color-bg-secondary); } .host-info-card { background-color: var(--color-bg-secondary); } /* ========================================== 6. PODCAST / INSTAGRAM FEED GRID (Lazy Load) ==========================================*/
.instagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 0; list-style: none; max-width: 1200px; margin: 0 auto;}
.podcast-feed-item { display: block; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; line-height: 0;}
.podcast-feed-item:hover { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);}
.podcast-feed-item img { width: 100%; height: auto; display: block; object-fit: cover; transition: opacity 0.5s ease; }
.ig-placeholder { background-color: var(--color-bg-secondary); border-radius: 8px; min-height: 250px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
/* ------------------------------------------ * FONT AWESOME CDN OPTIMAZATION * ------------------------------------------ */
.icon-svg { display: inline; vertical-align: middle; height: 1em; width: 1em;}
/* ------------------------------------------ * Footer Social Icons Grid (two rows) * ------------------------------------------ */.footer-social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 0.75rem;}@media (max-width: 480px) { .footer-social-grid { grid-template-columns: repeat(4, 1fr); row-gap: 0.5rem; }}.footer-social-grid .btn-social { padding: 0.4rem 0.5rem; display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; min-width: 42px; max-width: 100%;}.footer-social-grid .btn-social i { font-size: 1.1rem;}
/* ------------------------------------------ * Subscribe grid cards * ------------------------------------------ */.headerpadding { padding-top: clamp(3rem, 8vw, 6rem);}
.subscribe-section { margin: 2rem 0 3rem;}
.subscribe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;}
@media (max-width: 1200px) { .subscribe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@media (max-width: 768px) { .subscribe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 500px) { .subscribe-grid { grid-template-columns: 1fr; }}
.subscribe-card { background: #ffffff; border-radius: 0.85rem; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease;}
.subscribe-card:hover,.subscribe-card:focus-within { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(15, 23, 42, 0.25);}
.subscribe-card__link { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; text-decoration: none; color: #0f172a;}
.subscribe-card__link img { width: 100%; height: auto; object-fit: contain;}
.subscribe-card__link span { font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: #475569;}