/* ACBIZ GLOBAL ENTERTAINMENT — Surprise Theme
Modern entertainment UI — Light + Dark (v1.0)
Use with the preview HTML provided.
*/
/* ---------------------------
Root variables (light)
----------------------------*/
:root{
/* Surprise gradient */
--g1: #ff2d95; /* magenta */
--g2: #8a2be2; /* electric purple */
--g3: #00e6c3; /* teal/cyan */
--accent: linear-gradient(135deg,var(--g1),var(--g2),var(--g3));
--accent-solid: #8a2be2;
--gold: #f5c34a;
--bg: #f7f8fb;
--bg-soft: rgba(255,255,255,0.85);
--card-bg: rgba(255,255,255,0.75);
--text: #0f1724;
--muted: #62707a;
--border: rgba(15,23,36,0.08);
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--glass-blur: 10px;
--transition: 260ms cubic-bezier(.2,.9,.2,1);
--shadow-1: 0 6px 20px rgba(18,22,28,0.08);
--shadow-2: 0 20px 60px rgba(18,22,28,0.12);
--max-width: 1300px;
--container-gutter: 20px;
}
/* ---------------------------
Dark theme variables
----------------------------*/
.dark{
--bg: #07070a;
--bg-soft: rgba(10,12,16,0.6);
--card-bg: rgba(12,14,20,0.55);
--text: #e7eef6;
--muted: #9aa4b2;
--border: rgba(255,255,255,0.04);
--shadow-1: 0 6px 24px rgba(0,0,0,0.6);
--shadow-2: 0 28px 80px rgba(0,0,0,0.7);
}
/* ---------------------------
Base styles
----------------------------*/
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: radial-gradient(1200px 600px at 10% 10%, rgba(138,43,226,0.05), transparent 8%),
radial-gradient(900px 400px at 95% 90%, rgba(0,230,195,0.03), transparent 6%),
var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition: background var(--transition), color var(--transition);
line-height:1.45;
padding-bottom:60px;
}
/* container */
.container{
width:calc(100% - (var(--container-gutter) * 2));
max-width:var(--max-width);
margin:36px auto;
}
/* helpers */
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.col{flex:1 1 0}
.center{display:flex;align-items:center;justify-content:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.h1{font-size:28px;font-weight:700;margin:0}
.h2{font-size:20px;font-weight:700;margin:0}
/* ---------------------------
Top Navbar
----------------------------*/
.nav{
position:sticky;
top:12px;
z-index:60;
display:flex;
align-items:center;
gap:18px;
padding:12px;
border-radius:18px;
background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
backdrop-filter: blur(var(--glass-blur));
box-shadow:var(--shadow-1);
border:1px solid var(--border);
margin:16px auto;
width:calc(100% - (var(--container-gutter) * 2));
max-width:var(--max-width);
}
.dark .nav{
background: linear-gradient(180deg, rgba(12,14,20,0.48), rgba(12,14,20,0.28));
}
/* logo area */
.brand{
display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:0.6px;
}
.brand .logo{
width:44px;height:44px;border-radius:10px;
background:var(--accent);
display:grid;place-items:center;color:white;font-weight:800;
box-shadow: 0 6px 18px rgba(138,43,226,0.18);
transform:translateZ(0);
}
.brand .title{font-size:14px}
.brand .subtitle{font-size:11px;color:var(--muted);font-weight:600}
/* nav actions */
.nav-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.icon-btn{
border:1px solid var(--border);
background:var(--bg-soft);
padding:8px;border-radius:10px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:all var(--transition);
}
.icon-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
/* search */
.search{
display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
border:1px solid var(--border);width:420px;
}
.dark .search{background: linear-gradient(180deg, rgba(12,14,20,0.48), rgba(12,14,20,0.28));}
.search input{border:0;background:transparent;outline:none;color:var(--text);width:100%;padding:6px}
/* ---------------------------
Hero
----------------------------*/
.hero{
display:grid;grid-template-columns: 1fr 420px;gap:26px;align-items:start;margin-top:10px;
}
.hero-card{
padding:28px;border-radius:var(--radius-lg);
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
backdrop-filter: blur(var(--glass-blur));
box-shadow:var(--shadow-2);
border:1px solid var(--border);
}
.dark .hero-card{
background: linear-gradient(160deg, rgba(12,14,20,0.6), rgba(12,14,20,0.45));
}
/* CTA button */
.btn{
display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:0;cursor:pointer;
font-weight:700;transition:all var(--transition);
}
.btn-primary{
background:var(--accent);
color:#fff;
box-shadow:0 8px 30px rgba(138,43,226,0.14);
transform:translateZ(0);
}
.btn-primary:hover{filter:brightness(1.03);transform:translateY(-3px)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
/* pill tabs */
.tabs{display:flex;gap:10px;margin:14px 0}
.tab{padding:8px 12px;border-radius:999px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.tab.active{background:var(--card-bg);border:1px solid var(--border);color:var(--text);font-weight:700;box-shadow:var(--shadow-1)}
/* ---------------------------
Card grid & movie card
----------------------------*/
.grid {
display:grid;
grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
gap:18px;
margin-top:18px;
}
.card-movie{
border-radius:14px;overflow:hidden;background:var(--card-bg);border:1px solid var(--border);
box-shadow:var(--shadow-1);transition:all var(--transition);display:flex;flex-direction:column;
}
.card-movie:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.card-movie .poster{height:320px;background:linear-gradient(180deg, rgba(0,0,0,0.08), transparent);display:block;background-size:cover;background-position:center}
.card-movie .meta{padding:14px;display:flex;flex-direction:column;gap:8px}
.title{font-weight:800;font-size:15px;margin:0}
.sub{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
/* rating badge */
.badge{
display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--g1),var(--g2));color:white;font-weight:700;font-size:13px;
box-shadow:0 6px 18px rgba(138,43,226,0.18)
}
/* meta footer */
.card-footer{padding:12px;border-top:1px dashed var(--border);display:flex;gap:10px;align-items:center;justify-content:space-between}
/* small button */
.btn-sm{padding:8px 10px;border-radius:10px;font-weight:700}
/* ---------------------------
Podcast card (compact)
----------------------------*/
.card-podcast{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--card-bg);border:1px solid var(--border)}
.podcast-cover{width:72px;height:72px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center;box-shadow:var(--shadow-1)}
/* ---------------------------
Modal (lightbox)
----------------------------*/
.modal{
position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:36px;z-index:90;
}
.modal.show{display:flex}
.modal .overlay{position:absolute;inset:0;background:rgba(3,6,10,0.6);backdrop-filter: blur(4px)}
.modal .box{position:relative;z-index:2;background:var(--card-bg);padding:20px;border-radius:16px;max-width:960px;width:100%;box-shadow:var(--shadow-2);border:1px solid var(--border)}
/* ---------------------------
Review widget
----------------------------*/
.reviews{display:flex;flex-direction:column;gap:12px}
.review-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:transparent;border:1px solid var(--border)}
.review-item .avatar{width:44px;height:44px;border-radius:999px;background:linear-gradient(90deg,var(--g2),var(--g3));display:inline-block}
.review-item .body{flex:1}
.review-form textarea{width:100%;min-height:90px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text)}
/* ---------------------------
Footer
----------------------------*/
.site-footer{padding:30px;margin-top:40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;align-items:center}
.site-footer .links{display:flex;gap:14px}
/* ---------------------------
Responsive tweaks
----------------------------*/
@media (max-width:980px){
.hero{grid-template-columns:1fr;gap:14px}
.search{width:100%}
.nav{padding:10px;border-radius:12px}
.brand .title{display:none}
}