/* /bigo-live-clone — AISHTMLNEWDESIGN-447
Page-owned styles. EVERY selector is scoped to #page-bigo-live-clone or a
blc- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
VISUAL DIRECTION — TALLY LIGHT
The vocabulary of a broadcast gallery: the warm dark of a control room, a
lamp bezel that says which feed is on air, an amber token colour for the
gift economy, and hairline cue rules instead of card outlines. Nothing
glows, nothing blinks, nothing moves on its own (rule 26) — the lamp is a
painted, static object, not a status indicator.
Deliberately NOT the BIGO LIVE blue/cyan gradient livery. */
#page-bigo-live-clone{
--blc-ink:#16110f;
--blc-ink-2:#241b17;
--blc-ink-3:#33261f;
--blc-paper:#f7f2ec;
--blc-paper-2:#ece2d6;
--blc-tally:#c4321a;
--blc-lamp:#e8452a;
--blc-amber:#f2a93b;
--blc-cue:#2f5d54;
--blc-text:#1b1512;
--blc-text-2:#4a3f38;
--blc-line:#d5c9ba;
--blc-line-dk:rgba(247,242,236,.16);
--blc-on-dark:#f7f2ec;
--blc-on-dark-2:#d6c8ba;
--blc-shell:min(1240px,100% - 48px);
font-family:"Inter",system-ui,sans-serif;
font-size:16px;
line-height:1.6;
color:var(--blc-text);
background:var(--blc-paper);
overflow-x:hidden;
}
#page-bigo-live-clone,
#page-bigo-live-clone *,
#page-bigo-live-clone *::before,
#page-bigo-live-clone *::after{box-sizing:border-box;}
#page-bigo-live-clone p{margin:0 0 18px;}
#page-bigo-live-clone p:last-child{margin-bottom:0;}
#page-bigo-live-clone ul{margin:0;padding:0;list-style:none;}
#page-bigo-live-clone img{max-width:100%;height:auto;display:block;}
#page-bigo-live-clone h1,
#page-bigo-live-clone h2,
#page-bigo-live-clone h3,
#page-bigo-live-clone h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12;}
#page-bigo-live-clone :focus-visible{
outline:3px solid var(--blc-amber);
outline-offset:3px;
border-radius:2px;
}
/* ── shell ─────────────────────────────────────────────────────────── */
#page-bigo-live-clone .blc-shell{width:var(--blc-shell);margin-inline:auto;}
#page-bigo-live-clone .blc-band{padding:clamp(56px,7vw,104px) 0;}
#page-bigo-live-clone .blc-band--paper{background:var(--blc-paper);}
#page-bigo-live-clone .blc-band--paper2{background:var(--blc-paper-2);}
#page-bigo-live-clone .blc-band--ink{background:var(--blc-ink);color:var(--blc-on-dark);}
#page-bigo-live-clone .blc-band--ink2{background:var(--blc-ink-2);color:var(--blc-on-dark);}
/* ── the tally lamp: a painted bezel + lens. Static by contract. ───── */
#page-bigo-live-clone .blc-lamp{
width:18px;height:18px;flex:0 0 18px;border-radius:50%;
background:var(--blc-lamp);
box-shadow:0 0 0 4px rgba(232,69,42,.16),inset 0 -3px 5px rgba(0,0,0,.35);
}
#page-bigo-live-clone .blc-lamp--amber{
background:var(--blc-amber);
box-shadow:0 0 0 4px rgba(242,169,59,.18),inset 0 -3px 5px rgba(0,0,0,.3);
}
#page-bigo-live-clone .blc-lamp--sm{width:11px;height:11px;flex-basis:11px;box-shadow:inset 0 -2px 3px rgba(0,0,0,.35);}
/* ── section headings ──────────────────────────────────────────────── */
#page-bigo-live-clone .blc-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
#page-bigo-live-clone .blc-head__rule{flex:1;height:2px;background:var(--blc-line);}
#page-bigo-live-clone .blc-band--ink .blc-head__rule,
#page-bigo-live-clone .blc-band--ink2 .blc-head__rule{background:var(--blc-line-dk);}
#page-bigo-live-clone .blc-h2{
font-size:clamp(30px,3.6vw,46px);
max-width:20ch;
}
#page-bigo-live-clone .blc-h2--wide{max-width:26ch;}
#page-bigo-live-clone .blc-h3{font-size:clamp(24px,2.4vw,32px);}
/* ── CTA — an ink block with an amber token square, or its inverse ─── */
#page-bigo-live-clone .blc-cta{
display:inline-flex;align-items:center;gap:12px;
min-height:56px;padding:0 30px;
background:var(--blc-ink);color:var(--blc-paper);
border:0;border-radius:4px;
font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
cursor:pointer;text-align:left;
transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;
box-shadow:0 3px 0 0 var(--blc-tally);
}
#page-bigo-live-clone .blc-cta::before{
content:"";width:12px;height:12px;flex:0 0 12px;border-radius:2px;
background:var(--blc-amber);
}
#page-bigo-live-clone .blc-cta:hover{background:var(--blc-ink-3);transform:translateY(-2px);box-shadow:0 5px 0 0 var(--blc-tally);}
#page-bigo-live-clone .blc-cta:active{transform:translateY(1px);box-shadow:0 2px 0 0 var(--blc-tally);}
#page-bigo-live-clone .blc-cta--light{
background:var(--blc-paper);color:var(--blc-text);
box-shadow:0 3px 0 0 var(--blc-amber);
}
#page-bigo-live-clone .blc-cta--light:hover{background:#fff;box-shadow:0 5px 0 0 var(--blc-amber);}
#page-bigo-live-clone .blc-cta--light:active{box-shadow:0 2px 0 0 var(--blc-amber);}
/* ── in-copy links ─────────────────────────────────────────────────── */
#page-bigo-live-clone a.blc-link{
color:var(--blc-tally);
font-weight:600;
border-bottom:2px solid rgba(196,50,26,.35);
transition:border-color .16s ease,color .16s ease;
}
#page-bigo-live-clone a.blc-link:hover{color:var(--blc-ink);border-bottom-color:var(--blc-ink);}
#page-bigo-live-clone .blc-band--ink a.blc-link,
#page-bigo-live-clone .blc-band--ink2 a.blc-link{
color:var(--blc-amber);border-bottom-color:rgba(242,169,59,.4);
}
#page-bigo-live-clone .blc-band--ink a.blc-link:hover,
#page-bigo-live-clone .blc-band--ink2 a.blc-link:hover{color:var(--blc-paper);border-bottom-color:var(--blc-paper);}
/* ── HERO — full-bleed, image-free, static gradient (rule 24) ──────── */
#page-bigo-live-clone .blc-hero{
width:100%;
padding:clamp(72px,9vw,132px) 24px clamp(60px,7vw,96px);
background:
linear-gradient(180deg,#241b17 0%,#16110f 62%,#16110f 100%),
var(--blc-ink);
color:var(--blc-on-dark);
border-bottom:6px solid var(--blc-tally);
}
#page-bigo-live-clone .blc-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-bigo-live-clone .blc-hero__bezel{
width:96px;height:26px;margin:0 auto 30px;
border:2px solid rgba(247,242,236,.28);border-radius:14px;
display:flex;align-items:center;justify-content:center;gap:9px;
}
#page-bigo-live-clone .blc-hero h1{
font-size:clamp(38px,5.4vw,66px);
line-height:1.06;
margin-bottom:26px;
}
#page-bigo-live-clone .blc-hero p{
font-size:clamp(17px,1.35vw,19px);
color:var(--blc-on-dark-2);
max-width:74ch;margin:0 auto 34px;
}
#page-bigo-live-clone .blc-hero .blc-cta{font-size:18px;min-height:60px;}
/* ── breadcrumb ────────────────────────────────────────────────────── */
#page-bigo-live-clone .blc-crumb{background:var(--blc-ink-2);color:var(--blc-on-dark-2);}
#page-bigo-live-clone .blc-crumb ol{
list-style:none;margin:0;padding:14px 0;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px;
}
#page-bigo-live-clone .blc-crumb__back{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;
background:rgba(247,242,236,.1);
transition:background-color .16s ease;
}
#page-bigo-live-clone .blc-crumb__back:hover{background:rgba(247,242,236,.24);}
#page-bigo-live-clone .blc-crumb__back img{width:16px;height:16px;filter:invert(1) brightness(2);}
#page-bigo-live-clone .blc-crumb a.blc-crumb__home{color:var(--blc-amber);font-weight:600;}
#page-bigo-live-clone .blc-crumb a.blc-crumb__home:hover{color:var(--blc-paper);}
#page-bigo-live-clone .blc-crumb__now{color:var(--blc-on-dark);font-weight:600;}
/* ── FEATURES — bezel panel + cue-sheet grid ──────────────────────── */
#page-bigo-live-clone .blc-feat__top{
display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
gap:clamp(28px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,72px);
}
#page-bigo-live-clone .blc-bezel{
background:var(--blc-ink);border-radius:14px;padding:14px;
box-shadow:0 22px 44px -28px rgba(22,17,15,.6);
}
#page-bigo-live-clone .blc-bezel__bar{
display:flex;align-items:center;gap:8px;padding:0 6px 12px;
}
#page-bigo-live-clone .blc-bezel__track{flex:1;height:2px;background:var(--blc-line-dk);}
#page-bigo-live-clone .blc-bezel img{width:100%;height:auto;border-radius:8px;background:var(--blc-paper);}
#page-bigo-live-clone .blc-feat__lead{font-size:18px;color:var(--blc-text-2);max-width:46ch;}
#page-bigo-live-clone .blc-cuegrid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 clamp(28px,3.4vw,56px);
border-top:2px solid var(--blc-line);
}
#page-bigo-live-clone .blc-cue{
padding:26px 0 28px;border-bottom:1px solid var(--blc-line);
}
#page-bigo-live-clone .blc-cue__hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
#page-bigo-live-clone .blc-cue h3{font-size:19px;font-weight:700;letter-spacing:-.01em;}
#page-bigo-live-clone .blc-cue p{font-size:16px;color:var(--blc-text-2);margin:0;}
/* ── GAMES — token tiles on ink ────────────────────────────────────── */
#page-bigo-live-clone .blc-games__grid{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:14px;margin:clamp(30px,4vw,48px) 0 clamp(34px,4vw,52px);
}
#page-bigo-live-clone .blc-tile{
background:var(--blc-ink-2);border:1px solid var(--blc-line-dk);border-radius:10px;
padding:14px;display:flex;align-items:center;justify-content:center;
transition:border-color .16s ease,transform .16s ease,background-color .16s ease;
}
#page-bigo-live-clone .blc-tile:hover{border-color:var(--blc-amber);transform:translateY(-3px);background:var(--blc-ink-3);}
#page-bigo-live-clone .blc-tile img{width:100%;height:auto;}
#page-bigo-live-clone .blc-games__foot{display:flex;justify-content:flex-start;}
/* ── LAUNCH — centred statement over a wide strip ─────────────────── */
#page-bigo-live-clone .blc-launch__inner{max-width:820px;margin-inline:auto;text-align:center;}
#page-bigo-live-clone .blc-launch .blc-head{justify-content:center;}
#page-bigo-live-clone .blc-launch .blc-h2{max-width:none;margin-inline:auto;}
#page-bigo-live-clone .blc-launch__say{
font-size:clamp(20px,2.2vw,26px);font-weight:700;color:var(--blc-tally);
margin:20px 0 30px;
}
/* 2026-09-12 — .blc-launch__strip (the record's collaborate-bg.webp band) was
REMOVED AT THE REVIEWER'S REQUEST; its rules are deleted with it. Do not
re-add — this is deliberate, not a conversion defect. */
/* ── USES — transcript column beside a framed still ───────────────── */
#page-bigo-live-clone .blc-uses__grid{
display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
gap:clamp(30px,4.4vw,72px);align-items:start;
}
#page-bigo-live-clone .blc-uses__still{
background:var(--blc-paper);border:1px solid var(--blc-line);border-radius:12px;
padding:20px;
}
#page-bigo-live-clone .blc-uses__still img{width:100%;height:auto;}
#page-bigo-live-clone .blc-uses__body{
border-left:3px solid var(--blc-tally);padding-left:clamp(20px,2.6vw,34px);
margin-top:clamp(20px,3vw,34px);
}
#page-bigo-live-clone .blc-uses__body p{font-size:17px;color:var(--blc-text-2);}
/* ── BOOST — offering index beside an ink still ───────────────────── */
#page-bigo-live-clone .blc-boost__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
gap:clamp(30px,4vw,64px);align-items:start;
}
#page-bigo-live-clone .blc-offers{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(20px,2.4vw,40px);
margin:clamp(24px,3vw,38px) 0 clamp(28px,3.4vw,44px);
}
#page-bigo-live-clone .blc-offers li{border-bottom:1px solid var(--blc-line-dk);}
#page-bigo-live-clone a.blc-offers__a{
display:flex;align-items:center;gap:11px;
padding:13px 4px;font-size:16px;font-weight:500;
color:var(--blc-on-dark-2);
transition:color .16s ease,padding-left .16s ease;
}
#page-bigo-live-clone a.blc-offers__a::before{
content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
background:var(--blc-amber);opacity:.55;transition:opacity .16s ease;
}
#page-bigo-live-clone a.blc-offers__a:hover{color:var(--blc-paper);padding-left:10px;}
#page-bigo-live-clone a.blc-offers__a:hover::before{opacity:1;}
#page-bigo-live-clone .blc-boost__still{
border:1px solid var(--blc-line-dk);border-radius:12px;padding:18px;background:var(--blc-ink-2);
}
#page-bigo-live-clone .blc-boost__still img{width:100%;height:auto;border-radius:8px;}
/* ── UNIQUE — editorial slab, then the powerful-tool spread ───────── */
#page-bigo-live-clone .blc-unique__lead{
font-size:clamp(18px,1.7vw,21px);color:var(--blc-text);max-width:74ch;line-height:1.66;
}
#page-bigo-live-clone .blc-tool{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
gap:clamp(28px,4vw,64px);align-items:center;
margin-top:clamp(44px,5.5vw,80px);
padding-top:clamp(36px,4vw,56px);border-top:2px solid var(--blc-line);
}
#page-bigo-live-clone .blc-tool p{font-size:17px;color:var(--blc-text-2);margin-top:18px;}
#page-bigo-live-clone .blc-tool__still{
background:var(--blc-paper-2);border-radius:12px;padding:22px;
}
#page-bigo-live-clone .blc-tool__still img{width:100%;height:auto;}
/* ── HIRE — talent bay ────────────────────────────────────────────── */
#page-bigo-live-clone .blc-hire__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
gap:clamp(30px,4.4vw,72px);align-items:center;
}
#page-bigo-live-clone .blc-hire p{font-size:18px;color:var(--blc-on-dark-2);max-width:52ch;}
#page-bigo-live-clone .blc-hire__more{margin:22px 0 30px;font-size:17px;}
#page-bigo-live-clone .blc-hire__still{
border-radius:12px;overflow:hidden;border:1px solid var(--blc-line-dk);background:var(--blc-ink);
}
#page-bigo-live-clone .blc-hire__still img{width:100%;height:auto;}
/* ── WHY SCRIPT — four bays with lamp bezels ─────────────────────── */
#page-bigo-live-clone .blc-bays{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(22px,2.6vw,34px);margin-top:clamp(30px,3.6vw,48px);
}
#page-bigo-live-clone .blc-bay{
background:var(--blc-paper);border:1px solid var(--blc-line);
border-left:5px solid var(--blc-tally);border-radius:10px;
padding:clamp(22px,2.4vw,32px);
transition:transform .16s ease,box-shadow .16s ease;
}
#page-bigo-live-clone .blc-bay:hover{transform:translateY(-3px);box-shadow:0 16px 32px -24px rgba(22,17,15,.6);}
#page-bigo-live-clone .blc-bay h3{font-size:21px;margin-bottom:12px;}
#page-bigo-live-clone .blc-bay p{font-size:16px;color:var(--blc-text-2);}
#page-bigo-live-clone .blc-checks li{
display:flex;gap:12px;align-items:flex-start;
font-size:16px;color:var(--blc-text-2);
}
#page-bigo-live-clone .blc-checks img{width:22px;height:22px;flex:0 0 22px;margin-top:3px;}
/* ── WHY AIS — reading column ─────────────────────────────────────── */
#page-bigo-live-clone .blc-ais__col{max-width:74ch;margin-top:clamp(26px,3vw,40px);}
#page-bigo-live-clone .blc-ais__q{
font-size:clamp(19px,1.9vw,23px);font-weight:700;color:var(--blc-text);
line-height:1.45;
padding-left:22px;border-left:4px solid var(--blc-amber);
margin-bottom:26px;
}
#page-bigo-live-clone .blc-ais__col p{font-size:17px;color:var(--blc-text-2);}
/* ── INDEX — the dense offerings register ─────────────────────────── */
#page-bigo-live-clone .blc-index{
columns:3;column-gap:clamp(26px,3vw,48px);
margin-top:clamp(26px,3vw,40px);
}
#page-bigo-live-clone .blc-index li{break-inside:avoid;margin-bottom:2px;}
#page-bigo-live-clone a.blc-index__a{
display:block;padding:9px 0 10px;font-size:16px;
color:var(--blc-on-dark-2);
border-bottom:1px solid var(--blc-line-dk);
transition:color .16s ease,border-color .16s ease;
}
#page-bigo-live-clone a.blc-index__a:hover{color:var(--blc-amber);border-bottom-color:var(--blc-amber);}
/* ── NEWS — the record carries this heading with nothing behind it ── */
#page-bigo-live-clone .blc-news{padding:clamp(34px,4vw,54px) 0;background:var(--blc-paper-2);}
#page-bigo-live-clone .blc-news .blc-h2{font-size:clamp(24px,2.4vw,30px);}
/* ── AREA WE SERVE — four desks ───────────────────────────────────── */
#page-bigo-live-clone .blc-area__grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(22px,2.6vw,36px);margin-top:clamp(28px,3.4vw,46px);
}
#page-bigo-live-clone .blc-desk{
border-top:3px solid var(--blc-amber);padding-top:20px;
}
#page-bigo-live-clone .blc-desk h3{
font-size:16px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--blc-amber);margin-bottom:14px;
}
#page-bigo-live-clone a.blc-desk__tel{
display:inline-block;font-size:18px;font-weight:700;color:var(--blc-on-dark);
margin-bottom:12px;transition:color .16s ease;
}
#page-bigo-live-clone a.blc-desk__tel:hover{color:var(--blc-amber);}
#page-bigo-live-clone .blc-desk__addr{display:flex;gap:11px;align-items:flex-start;}
#page-bigo-live-clone .blc-desk__addr img{width:14px;height:20px;flex:0 0 14px;margin-top:4px;}
#page-bigo-live-clone .blc-desk__addr p{font-size:16px;color:var(--blc-on-dark-2);margin:0;}
/* ── CTA modal ────────────────────────────────────────────────────── */
#page-bigo-live-clone .blc-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(22,17,15,.72);
padding:24px;overflow-y:auto;
}
#page-bigo-live-clone .blc-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-bigo-live-clone .blc-modal__box{
position:relative;width:100%;max-width:640px;margin:auto;
background:var(--blc-paper);border-radius:12px;overflow:hidden;
box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
#page-bigo-live-clone .blc-modal__x{
position:absolute;top:12px;right:12px;z-index:2;
width:40px;height:40px;min-height:40px;
display:flex;align-items:center;justify-content:center;
border:0;border-radius:50%;cursor:pointer;
background:var(--blc-ink);color:var(--blc-paper);
transition:background-color .16s ease;
}
#page-bigo-live-clone .blc-modal__x:hover{background:var(--blc-tally);}
#page-bigo-live-clone .blc-modal iframe{
display:block;width:100%;min-height:860px;border:0;background:var(--blc-paper);
}
/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:1080px){
#page-bigo-live-clone .blc-cuegrid{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-bigo-live-clone .blc-games__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
#page-bigo-live-clone .blc-index{columns:2;}
#page-bigo-live-clone .blc-area__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
#page-bigo-live-clone{--blc-shell:min(1240px,100% - 32px);}
#page-bigo-live-clone .blc-feat__top,
#page-bigo-live-clone .blc-uses__grid,
#page-bigo-live-clone .blc-boost__grid,
#page-bigo-live-clone .blc-tool,
#page-bigo-live-clone .blc-hire__grid{grid-template-columns:minmax(0,1fr);}
#page-bigo-live-clone .blc-boost__still,
#page-bigo-live-clone .blc-tool__still{order:-1;}
#page-bigo-live-clone .blc-bays{grid-template-columns:minmax(0,1fr);}
#page-bigo-live-clone .blc-h2{max-width:none;}
}
@media (max-width:600px){
#page-bigo-live-clone .blc-cuegrid{grid-template-columns:minmax(0,1fr);}
#page-bigo-live-clone .blc-games__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
#page-bigo-live-clone .blc-offers{grid-template-columns:minmax(0,1fr);}
#page-bigo-live-clone .blc-index{columns:1;}
#page-bigo-live-clone .blc-area__grid{grid-template-columns:minmax(0,1fr);}
#page-bigo-live-clone .blc-cta{width:100%;justify-content:center;text-align:center;}
#page-bigo-live-clone .blc-modal{padding:12px;}
}
@media (max-width:400px){
#page-bigo-live-clone .blc-games__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
#page-bigo-live-clone *,
#page-bigo-live-clone *::before,
#page-bigo-live-clone *::after{transition-duration:.01ms !important;}
}