/* IATown Templates — Entertainment Magazine UI (Bootstrap 5) Merged & polished: light theme (default) + dark/neon theme toggle Modules covered: Hero/Feature, Trending Grid, Video Hub, Shorts, Podcast, Live Banner, Events (grid/timeline), Reviews, Gallery (grid/strip), Merch Carousel, Newsletter, Poll/Quiz, Editors, Author, Paywall, Ad Break, Filters, News Ticker (legacy + new), Billboard, Weekend Artist, Artist Album, Post News (legacy), Event Map (legacy + glow), Rich Content. */ /* ========================= 1) TOKENS ========================= */ :root{ /* Primary palette (your light theme) */ --iat-pink:#F48FB1; --iat-blue:#4FC3F7; --iat-yellow:#FFF176; --iat-green:#81C784; --iat-purple:#BA68C8; --iat-orange:#FFB74D; --iat-bg:#fafafa; --iat-ink:#212121; --iat-muted:#6c757d; --iat-surface:#ffffff; --iat-surface-2:#f7f7f9; --iat-card:#ffffff; --iat-border: #e8e9ef; --iat-chip:#f0f1f5; --iat-radius:.75rem; --iat-radius-lg:1rem; --iat-shadow-sm:0 .25rem .75rem rgba(0,0,0,.06); --iat-shadow:0 .5rem 1.25rem rgba(0,0,0,.10); --iat-shadow-lg:0 .75rem 2rem rgba(0,0,0,.16); --iat-g1: linear-gradient(135deg, var(--iat-pink), var(--iat-purple)); --iat-g2: linear-gradient(135deg, var(--iat-blue), var(--iat-green)); --iat-g3: linear-gradient(135deg, var(--iat-yellow), var(--iat-pink)); /* Neon accents (used across both themes) */ --iat-primary: #8a2be2; /* electric violet */ --iat-secondary: #ff3366; /* pop magenta */ --iat-accent: #00e0ff; /* neon cyan */ --iat-grad-1: linear-gradient(90deg,var(--iat-primary),var(--iat-secondary)); --iat-grad-2: linear-gradient(90deg,var(--iat-accent),var(--iat-secondary)); } /* Dark / neon theme toggle (apply .theme-dark on or a wrapper) */ .theme-dark{ --iat-bg:#0e0f13; --iat-ink:#e9ecf2; --iat-muted:#a5adbd; --iat-surface: rgba(255,255,255,0.05); --iat-surface-2: rgba(255,255,255,0.07); --iat-card:#171a21; --iat-border: rgba(255,255,255,0.15); --iat-chip: rgba(255,255,255,0.10); --iat-shadow-sm: 0 10px 25px rgba(0,0,0,.25); --iat-shadow: 0 16px 35px rgba(0,0,0,.35); --iat-shadow-lg: 0 24px 60px rgba(0,0,0,.45); } /* ==================== 2) BASE & UTILITIES ==================== */ body{background:var(--iat-bg);color:var(--iat-ink);} h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.02em;margin:0 0 .25rem;} a{text-decoration:none;transition:color .2s ease, opacity .2s ease, transform .18s ease;} a:hover{opacity:.92} .iat-muted{color:var(--iat-muted)!important} .iat-surface{background:var(--iat-surface);border-radius:var(--iat-radius);box-shadow:var(--iat-shadow);border:1px solid var(--iat-border);backdrop-filter: saturate(140%) blur(8px);} .iat-surface-lg{background:var(--iat-surface);border-radius:var(--iat-radius-lg);box-shadow:var(--iat-shadow-lg);border:1px solid var(--iat-border);} .iat-chip{display:inline-flex;align-items:center;padding:.35rem .7rem;border-radius:999px;background:var(--iat-chip);font-size:.8125rem;color:inherit;border:1px solid var(--iat-border);} .iat-chip--on{background:#e7d6ff;color:#5a1ea1} .iat-blur{backdrop-filter:saturate(140%) blur(8px)} .iat-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;gap:.75rem} .iat-scroll-x>*{scroll-snap-align:start} .iat-cover img,.iat-cover video{object-fit:cover;width:100%;height:100%} .ratio-4x5{--bs-aspect-ratio:calc(5/4*100%)} .ratio-9x16{--bs-aspect-ratio:calc(16/9*100%)} /* Sections */ .iat-section{padding: clamp(20px,2.5vw,36px) 0; margin-bottom:0;} .iat-section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem} .iat-title{font-size:clamp(1.15rem,1vw + .9rem,1.6rem);font-weight:800;letter-spacing:.2px} .iat-gradient{background:var(--iat-grad-1);-webkit-background-clip:text;background-clip:text;color:transparent} /* Cards */ .iat-card{border:1px solid var(--iat-border);border-radius:var(--iat-radius);overflow:hidden;box-shadow:var(--iat-shadow);background:var(--iat-card);transition:transform .18s ease, box-shadow .18s ease} .iat-card:hover{transform:translateY(-3px);box-shadow:var(--iat-shadow-lg)} .iat-card__body{padding:1rem} .iat-card__meta{font-size:.8125rem;color:var(--iat-muted)} .iat-badge{display:inline-block;padding:.25rem .5rem;border-radius:.35rem;background:#ececec;border:1px solid var(--iat-border);font-size:.75rem;color:inherit} /* Buttons */ .btn-iat{border:none;border-radius:999px;padding:.55rem 1.1rem;font-weight:700;background:var(--iat-g3);color:#212121} .btn-iat:hover{transform:translateY(-1px)} .theme-dark .btn-iat{background:var(--iat-grad-1);color:#fff} .btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff} /* ===================== 3) COMPONENTS ===================== */ /* HERO / FEATURE SLIDER */ .iat-hero{position:relative;border-radius:var(--iat-radius-lg);overflow:hidden} .iat-hero__img{height:clamp(220px,35vw,480px);border-radius:12px} .iat-hero .carousel-caption{left:0;right:0;text-align:left} .iat-hero__caption{background:linear-gradient(180deg,rgba(0,0,0,.0) 0, rgba(0,0,0,.6) 60%, rgba(0,0,0,.7) 100%);padding:1.25rem;border-radius:0} .iat-hero__caption h3{color:#fff;font-weight:800} .iat-feature-slider .carousel-item{padding-bottom:6px} .carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))} /* TRENDING GRID */ .iat-grid{--gap:1rem;--cols:4;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)} .iat-grid .ratio{background:#0000000a} .theme-dark .iat-grid .ratio{background:rgba(255,255,255,.06)} @media (max-width:991.98px){.iat-grid{--cols:3}} @media (max-width:767.98px){.iat-grid{--cols:2}} @media (max-width:479.98px){.iat-grid{--cols:1}} /* VIDEO HUB */ .iat-video-grid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:1rem} @media (max-width:991.98px){.iat-video-grid{--cols:2}} @media (max-width:575.98px){.iat-video-grid{--cols:1}} .iat-masonry{column-count:3;column-gap:1rem} @media (max-width:991.98px){.iat-masonry{column-count:2}} @media (max-width:575.98px){.iat-masonry{column-count:1}} .iat-masonry .iat-card{break-inside:avoid} /* SHORTS / REELS */ .iat-shorts{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:.75rem} @media (max-width:991.98px){.iat-shorts{--cols:3}} @media (max-width:575.98px){.iat-shorts{--cols:2}} .iat-short{position:relative;border-radius:var(--iat-radius);overflow:hidden;background:#000} .iat-short__cap{position:absolute;bottom:.5rem;left:.5rem;right:.5rem;color:#fff;background:rgba(0,0,0,.35);padding:.35rem .5rem;border-radius:.35rem;font-size:.8125rem} /* PODCAST */ .iat-podcast .provider a{margin-right:.5rem} .iat-podcast .list-group-item{border:none;border-bottom:1px solid var(--iat-border);background:transparent;color:inherit} /* LIVE BANNER */ .iat-live{border-radius:var(--iat-radius);padding:1.1rem 1.25rem;color:#fff;background:var(--iat-g1);box-shadow:var(--iat-shadow)} .iat-live .badge{background:#fff;color:#d32f2f} /* EVENTS */ .iat-events .iat-card{min-height:100%} .iat-timeline{position:relative;padding-left:1.5rem} .iat-timeline:before{content:"";position:absolute;left:.5rem;top:0;bottom:0;width:2px;background:#e7e7ea} .theme-dark .iat-timeline:before{background:var(--iat-border)} .iat-tl-item{position:relative;margin-bottom:1rem} .iat-tl-item:before{content:"";position:absolute;left:-.2rem;top:.35rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--iat-purple)} /* REVIEWS */ .iat-score{position:absolute;top:.5rem;right:.5rem} .iat-score .badge{font-weight:800} /* GALLERY */ .iat-gallery-grid{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:.5rem} @media (max-width:991.98px){.iat-gallery-grid{--cols:3}} @media (max-width:575.98px){.iat-gallery-grid{--cols:2}} .iat-filmstrip{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory} .iat-filmstrip img{scroll-snap-align:center;border-radius:.5rem} /* MERCH */ .iat-merch .carousel-item .card{box-shadow:var(--iat-shadow-sm)} /* NEWSLETTER */ .iat-newsletter.iat-surface,.iat-newsletter .card{background:linear-gradient(180deg,#ffffff,#f9fbff)} .theme-dark .iat-newsletter.iat-surface,.theme-dark .iat-newsletter .card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))} .iat-newsletter .privacy{color:var(--iat-muted)} /* POLL / QUIZ */ .iat-poll .form-check-input:checked{background:var(--iat-purple);border-color:var(--iat-purple)} .iat-poll .js-poll-result{color:var(--iat-muted)} /* EDITORS */ .iat-editors .iat-card h3{font-weight:700} /* AUTHOR */ .iat-author .avatar{border-radius:50%} .iat-author .social a{margin-right:.5rem} /* PAYWALL */ .iat-paywall{background:var(--iat-surface);border-radius:var(--iat-radius);box-shadow:var(--iat-shadow);padding:1.25rem;border:1px solid var(--iat-border)} .iat-paywall .benefits li{margin:.25rem 0} /* AD */ .iat-ad{border:1px dashed #b9c1c9;border-radius:var(--iat-radius);background:#f5f7fa} .theme-dark .iat-ad{border-color:var(--iat-border);background:var(--iat-surface)} /* FILTERS */ .iat-filters .btn{border-radius:999px} .iat-filters .btn-light{border:1px solid #e6e6ea} .theme-dark .iat-filters .btn-light{background:var(--iat-surface);border-color:var(--iat-border);color:#fff} /* ================== NEWS TICKER (both) ================== */ /* compact bar (light theme default) */ .iat-news-ticker{border-radius:var(--iat-radius);padding:.5rem .75rem;display:flex;gap:.75rem;align-items:center;background:var(--iat-g2);color:#fff} .iat-news-ticker .items{display:flex;gap:.5rem;overflow-x:auto;white-space:nowrap} .iat-news-ticker a{color:#fff} /* marquee/track variant (neon style) */ .iat-news-ticker__title{font-weight:700;padding-right:10px;border-right:1px solid var(--iat-border)} .iat-news-ticker__track{display:flex;gap:.5rem;align-items:center;overflow:hidden;white-space:nowrap;animation:iat-ticker 35s linear infinite} .iat-news-ticker:hover .iat-news-ticker__track{animation-play-state:paused} @keyframes iat-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ===================== BILLBOARD ===================== */ .iat-billboard{border-radius:var(--iat-radius);padding:1rem;background:var(--iat-surface);border:1px solid var(--iat-border);box-shadow:var(--iat-shadow)} .theme-dark .iat-billboard{background:var(--iat-surface);} .iat-billboard .iat-chart{padding:14px;border-radius:16px;border:1px solid var(--iat-border);background:var(--iat-surface)} .iat-chart__title{font-weight:800;letter-spacing:.3px;margin-bottom:10px;background:var(--iat-grad-1);-webkit-background-clip:text;background-clip:text;color:transparent} .iat-chart__list .list-group-item{background:transparent;color:inherit;border-color:var(--iat-border)} .iat-chart__list .list-group-item:nth-child(1){border-left:4px solid var(--iat-secondary)} .iat-chart__list .list-group-item:nth-child(2){border-left:4px solid var(--iat-accent)} .iat-chart__list .list-group-item:nth-child(3){border-left:4px solid var(--iat-primary)} /* ================= WEEKEND / ALBUM ================= */ .iat-weekend-artist,.iat-album{box-shadow:var(--iat-shadow);border-radius:var(--iat-radius);overflow:hidden;background:var(--iat-surface);border:1px solid var(--iat-border)} .iat-weekend .iat-weekend__art{width:120px;max-width:30vw;border-radius:12px;overflow:hidden} .theme-dark .iat-weekend .iat-surface{ background: radial-gradient(700px 700px at 100% 0%, rgba(0,224,255,.15), transparent 40%), var(--iat-surface); } /* ============== ARTIST ALBUM LAYOUT BLOCK ============== */ .iat-album-block .iat-album{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:12px} @media (max-width:768px){.iat-album-block .iat-album{grid-template-columns:1fr}} /* ==================== POST NEWS (legacy) ==================== */ .iat-postnews .list-group-item{border:none;border-bottom:1px solid var(--iat-border);background:transparent;color:inherit} .theme-dark .iat-postnews .list-group-item:hover{background:rgba(255,255,255,.04)} .iat-card--feature .iat-card__body{padding:16px 16px 18px} /* ===================== EVENT MAP ===================== */ .iat-eventmap{background:var(--iat-surface-2);border:1px solid var(--iat-border);border-radius:var(--iat-radius);padding:1rem} .theme-dark .iat-eventmap{ padding:16px 18px; border-radius:16px; position:relative; background: radial-gradient(1200px 1200px at 0% 0%, rgba(138,43,226,.18), transparent 40%), var(--iat-surface); border:1px solid var(--iat-border); } .iat-eventmap__eyebrow{color:var(--iat-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.06em;margin-bottom:6px} .iat-eventmap__link{font-weight:700;text-decoration:none;background:var(--iat-grad-2);-webkit-background-clip:text;background-clip:text;color:transparent} /* ==================== RICH CONTENT ==================== */ .iat-rich .iat-surface{transition:transform .15s ease} .iat-rich .iat-surface:hover{transform:translateY(-2px)} /* ================= 4) RESPONSIVE TUNING ================= */ @media (max-width:991.98px){ .iat-hero__img{height:360px} } @media (max-width:767.98px){ .iat-hero__img{height:280px} } .iat-progress-badge{ --p:0%; position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; font:600 12px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:#0b1426; background:#f3f5f8; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); overflow:hidden; } .iat-progress-badge__fill{ position:absolute; inset:0; width:var(--p); max-width:100%; background:linear-gradient(90deg,#0d6efd,#20c997); opacity:.18; transition:width .3s ease; } .iat-progress-badge__text{ position:relative; z-index:1; } .iat-progress-badge__scope{ position:relative; z-index:1; opacity:.7; font-weight:600; letter-spacing:.02em; text-transform:capitalize; } .iat-card .iat-progress-badge, .card .iat-progress-badge{ position:absolute; top:.5rem; right:.5rem; backdrop-filter:saturate(140%) blur(4px); } /* Simple quick links grid */ .iat-qlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3-up on mobile */ gap: 8px 16px; list-style: none; margin: 0; padding: 0; } .iat-qlist-grid li { margin: 0; } .iat-qlist-grid a { display: block; line-height: 1.4; color: inherit; text-decoration: underline; } .iat-qlist-grid a:hover { text-decoration-thickness: 2px; } /* bump to 6 per row on tablets/desktop */ @media (min-width: 768px) { .iat-qlist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }