121 lines
14 KiB
CSS
121 lines
14 KiB
CSS
/* Layar VS (vs.js, RENCANA 2.2) dan layar hasil (RENCANA 2.3). Tinggi minimum yang didukung: 520 px; ada aturan ringkas untuk ponsel lanskap (<= 420 px). */
|
|
#vs-screen{--pl:#16857f;--pr:#c4602a;--ah:min(86vh,40vw);--aw:calc(var(--ah)*.767);position:fixed;inset:0;z-index:40;overflow:hidden;background:#07131c;color:#f6eedb;font-family:Rajdhani,Arial,sans-serif;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
|
|
#vs-screen.out{opacity:0;transition:opacity .26s ease-in;pointer-events:none}
|
|
#vs-screen:after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:#fff;opacity:0;animation:vs-flash .4s .5s ease-out both}
|
|
#vs-screen>*{margin:0}
|
|
.vs-bg{position:absolute;inset:-3%;background:#0e202c center/cover no-repeat;will-change:transform;animation:vs-zoom 2.6s ease-out both}
|
|
.vs-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#050f17b8 25%,#04101af2 100%)}
|
|
.vs-panel{position:absolute;inset:0;z-index:1;pointer-events:none}
|
|
.vs-panel.l{clip-path:polygon(0 0,58% 0,42% 100%,0 100%);background:linear-gradient(100deg,var(--pl) 0%,#0c1c28cc 85%);opacity:.85;animation:vs-panel-l .44s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-panel.r{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);background:linear-gradient(260deg,var(--pr) 0%,#0c1c28cc 85%);opacity:.85;animation:vs-panel-r .44s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-panel:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 26px,#ffffff10 26px 28px)}
|
|
.vs-slash{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:polygon(58.2% 0,59.4% 0,43.4% 100%,42.2% 100%);background:linear-gradient(180deg,#fff8dc,#e0bf85);box-shadow:0 0 20px #ffe5ae;transform-origin:50% 0;animation:vs-slash .3s .26s ease-out both}
|
|
.vs-top{position:absolute;z-index:6;top:clamp(8px,2.4vh,22px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:700;font-size:clamp(11px,1.5vh + 3px,15px);letter-spacing:3px;color:#e9dcb6;text-shadow:0 2px 6px #000a;animation:vs-fade .4s .2s both}
|
|
.vs-top span{padding:2px 12px;background:#06121bc4}.vs-top i{width:6px;height:6px;background:#e0bf85;transform:rotate(45deg)}
|
|
.vs-side{position:absolute;inset:0;z-index:3;pointer-events:none}
|
|
.vs-art{position:absolute;bottom:0;height:var(--ah);width:auto;max-width:none;filter:drop-shadow(0 14px 18px #000b)}
|
|
.vs-side.l .vs-art{right:calc(50% - 1.5vw);animation:vs-art-l .56s .1s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-side.r .vs-art{left:calc(50% - 1.5vw);transform:scaleX(-1);animation:vs-art-r .56s .1s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-info{position:absolute;bottom:clamp(14px,5vh,48px);width:calc(50% - var(--aw) - 3.5vw - 14px)}
|
|
.vs-side.l .vs-info{left:3.5vw;animation:vs-info-l .42s .36s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-side.r .vs-info{right:3.5vw;text-align:right;animation:vs-info-r .42s .36s cubic-bezier(.2,.9,.25,1) both}
|
|
.vs-who{display:inline-block;font-weight:700;font-size:clamp(10px,1.4vh + 2px,13px);letter-spacing:3px;padding:2px 9px;background:var(--c);color:#0b1620;transform:skewX(-10deg)}
|
|
.vs-name{display:block;margin:8px 0 2px;font:700 italic clamp(24px,3.4vw,52px)/.92 Rajdhani,'Arial Narrow',sans-serif;letter-spacing:1px;text-shadow:3px 3px 0 #0009;overflow-wrap:anywhere}
|
|
.vs-tag{display:block;font:700 normal clamp(10px,1.3vh + 2px,13px) Rajdhani,sans-serif;letter-spacing:3px;color:#d8c394}
|
|
.vs-quote{margin:clamp(6px,1.8vh,16px) 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--c);font:600 italic clamp(15px,2.2vh + 3px,21px)/1.22 Rajdhani,sans-serif;color:#fff3d4;text-shadow:0 1px 4px #000a;animation:vs-quote .45s .95s both}
|
|
.vs-side.r .vs-quote{padding:2px 12px 2px 0;border-left:0;border-right:3px solid var(--c)}
|
|
.vs-mark{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
|
|
.vs-mark b{display:block;font:700 italic clamp(70px,24vh,190px)/.8 Rajdhani,'Arial Narrow',sans-serif;letter-spacing:-4px;color:#fff0c4;-webkit-text-stroke:2px #1a1205;text-shadow:5px 6px 0 #b8862e,0 0 40px #ffcf6e99;animation:vs-slam .44s .48s cubic-bezier(.2,1.5,.4,1) both,vs-pulse 1.1s 1s ease-in-out infinite}
|
|
.vs-skip{position:absolute;z-index:6;bottom:clamp(6px,1.6vh,14px);left:0;right:0;text-align:center;font-weight:700;font-size:11px;letter-spacing:3px;color:#b9c9cc;animation:vs-fade .5s .9s both}
|
|
.vs-timer{position:absolute;z-index:7;left:0;right:0;bottom:0;height:3px;background:#ffffff1c}.vs-timer i{display:block;height:100%;background:#e0bf85;transform-origin:0 50%;animation:vs-timer var(--vs-run,1900ms) linear both}
|
|
@keyframes vs-flash{0%{opacity:.75}100%{opacity:0}}
|
|
@keyframes vs-zoom{from{transform:scale(1.14)}to{transform:scale(1.02)}}
|
|
@keyframes vs-panel-l{from{transform:translateX(-100%)}to{transform:none}}
|
|
@keyframes vs-panel-r{from{transform:translateX(100%)}to{transform:none}}
|
|
@keyframes vs-slash{from{transform:scaleY(0)}to{transform:scaleY(1)}}
|
|
@keyframes vs-art-l{from{transform:translateX(-62vw);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes vs-art-r{from{transform:translateX(62vw) scaleX(-1);opacity:0}to{transform:scaleX(-1);opacity:1}}
|
|
@keyframes vs-info-l{from{transform:translateX(-30vw);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes vs-info-r{from{transform:translateX(30vw);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes vs-quote{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
@keyframes vs-fade{from{opacity:0}to{opacity:1}}
|
|
@keyframes vs-slam{from{transform:scale(3.4) skewX(-8deg);opacity:0}60%{opacity:1}to{transform:scale(1) skewX(-8deg);opacity:1}}
|
|
@keyframes vs-pulse{0%,100%{transform:scale(1) skewX(-8deg)}50%{transform:scale(1.04) skewX(-8deg)}}
|
|
@keyframes vs-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
|
|
/* Layar sempit / pendek: nama dan kutipan menumpuk di bawah tiap potret. */
|
|
@media(max-width:760px),(max-height:420px){
|
|
#vs-screen{--ah:min(80vh,44vw)}
|
|
.vs-side.l .vs-art{right:calc(50% - 4vw)}.vs-side.r .vs-art{left:calc(50% - 4vw)}
|
|
.vs-info{bottom:clamp(8px,3vh,24px);width:calc(50% - var(--aw) + 1vw - 3vw)}
|
|
.vs-side.l .vs-info{left:2.5vw}.vs-side.r .vs-info{right:2.5vw}
|
|
.vs-name{font-size:clamp(17px,3.2vw,30px);margin:5px 0 1px}.vs-tag{letter-spacing:1px;font-size:9px}.vs-who{font-size:9px;letter-spacing:2px}
|
|
.vs-quote{font-size:clamp(11px,1.7vw,14px);padding-left:7px}.vs-side.r .vs-quote{padding-right:7px}
|
|
.vs-mark b{font-size:clamp(54px,22vh,120px)}.vs-skip{display:none}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){#vs-screen,#vs-screen *{animation:none!important}#vs-screen:after{display:none}.vs-timer i{transform:none}}
|
|
|
|
/* ---- Layar hasil (menu.js screen 'result' memakai ResultView) ---- */
|
|
#front-menu[data-screen=result]{display:flex;flex-direction:column;overflow:hidden}
|
|
.rs{--cw:#e0bf85;--cl:#7a8f95;position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.75fr) minmax(0,.62fr);column-gap:clamp(8px,2vw,32px);align-items:stretch;width:100%;max-width:1700px;margin:0 auto;padding:0 3vw}
|
|
.rs:focus{outline:0}
|
|
.rs-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
|
|
.rs-confetti i{position:absolute;top:-16px;left:var(--x);width:var(--w);height:calc(var(--w)*1.6);background:var(--c);opacity:0;animation:rs-fall var(--t) var(--d) ease-in both}
|
|
.rs-fighter{position:relative;min-width:0;min-height:0}
|
|
.rs-fighter.win{display:flex;align-items:flex-end;justify-content:center}
|
|
.rs-glow{position:absolute;left:50%;bottom:0;width:140%;height:92%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 60%,var(--cw),transparent 62%);opacity:.34;animation:rs-glow 2.4s ease-in-out infinite alternate}
|
|
.rs-fighter.win .rs-art{position:relative;display:block;height:min(100%,880px);max-width:130%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 16px 20px #000a);animation:rs-pop .62s cubic-bezier(.2,.9,.3,1.15) both}
|
|
.rs-fighter.win .rs-plate{position:absolute;left:0;right:0;bottom:0;padding:22px 6px 8px;text-align:center;background:linear-gradient(0deg,#07131cf2 25%,transparent);animation:rs-up .5s .45s both}
|
|
.rs-plate small{display:block;font-weight:700;font-size:11px;letter-spacing:4px;color:var(--cw)}
|
|
.rs-plate strong{display:block;font:700 italic clamp(22px,3vw,42px)/.95 Rajdhani,sans-serif;letter-spacing:1px;text-shadow:3px 3px 0 #0009}
|
|
.rs-fighter.lose{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;padding-bottom:0}
|
|
.rs-fighter.lose .rs-art{display:block;height:min(56%,560px);max-width:100%;object-fit:contain;transform:scaleX(-1);filter:grayscale(.92) brightness(.48) contrast(.9) drop-shadow(0 10px 12px #0008);opacity:.78;animation:rs-sink .7s .2s both}
|
|
.rs-fighter.lose .rs-plate{width:100%;padding:0 4px 10px;text-align:center;color:#8d9fa4;animation:rs-up .5s .9s both}
|
|
.rs-fighter.lose .rs-plate small{color:#7d9096;letter-spacing:3px}
|
|
.rs-fighter.lose .rs-plate p{margin:5px 0 0;font:600 italic clamp(13px,1.9vh + 2px,17px)/1.25 Rajdhani,sans-serif;color:#9fb0b4}
|
|
.rs-main{position:relative;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.6vh,14px);min-width:0;padding:0 0 clamp(6px,2vh,22px)}
|
|
.rs-kicker{display:block;font-weight:700;font-size:clamp(10px,1.4vh + 2px,13px);letter-spacing:4px;color:#d8c394}
|
|
.rs-head h1{margin:2px 0 0;font:700 italic clamp(40px,10vh,120px)/.92 Rajdhani,'Arial Narrow',sans-serif;letter-spacing:2px;color:#f3d796;text-shadow:3px 4px 0 #6a4a14,0 0 30px #ffd47a55;animation:rs-title .55s cubic-bezier(.2,1.4,.4,1) both}
|
|
.rs[data-tone=lose] .rs-head h1{color:#e8a597;text-shadow:3px 4px 0 #5a2218,0 0 26px #ff6a4a33}
|
|
.rs-score{display:flex;align-items:baseline;gap:14px;font-weight:700;line-height:1;margin-top:clamp(2px,.8vh,8px)}
|
|
.rs-score b{font-size:clamp(28px,6.4vh,72px);color:#8da2a8}.rs-score b.w{color:#f3d796}.rs-score i{font-style:normal;font-size:clamp(16px,3vh,26px);color:#6e868c}
|
|
.rs-score.run b{font-size:clamp(34px,7vh,60px);color:#f3d796}.rs-score.run span{font-size:clamp(11px,1.6vh + 2px,15px);letter-spacing:3px;color:#b7dacb}
|
|
.rs-quote{margin:0;padding:clamp(4px,1vh,9px) 14px;border-left:3px solid var(--cw);background:linear-gradient(90deg,#0b1b25cc,#0b1b2500);animation:rs-up .5s .35s both}
|
|
.rs-quote p{margin:0;font:600 italic clamp(15px,2.3vh + 2px,28px)/1.2 Rajdhani,sans-serif;color:#fff3d4}
|
|
.rs-quote cite{display:block;margin-top:3px;font:700 normal 11px Rajdhani,sans-serif;letter-spacing:3px;color:var(--cw)}
|
|
.rs-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
|
|
.rs-cols:has(.rs-coins:only-child),.rs-cols>.rs-stats:only-child{grid-template-columns:1fr}
|
|
.rs-coins,.rs-stats{padding:clamp(6px,1.2vh,10px) 12px;background:#0b1c26d9;border:1px solid #7fa6a533;border-top:2px solid #e0bf85;min-width:0}
|
|
.rs-cols h3{margin:0 0 4px;font-size:11px;letter-spacing:4px;color:#d8c394}
|
|
.rs-coins ul{list-style:none;margin:0;padding:0}
|
|
.rs-coins li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:1px 0;font-weight:600;font-size:clamp(13px,1.9vh + 2px,20px);color:#d6e0dc;animation:rs-row .36s calc(.55s + var(--i)*.16s) both}
|
|
.rs-coins li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rs-coins li small{display:inline;margin-left:7px;font-weight:500;font-size:11px;letter-spacing:.5px;color:#93a9ad}
|
|
.rs-coins li b{color:#ffe08a;font-variant-numeric:tabular-nums}
|
|
.rs-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:3px;padding-top:3px;border-top:1px solid #e0bf8566;font-weight:700;letter-spacing:2px;font-size:12px;color:#d8c394;animation:rs-row .36s calc(.55s + var(--i)*.16s) both}
|
|
.rs-total b{font-size:clamp(20px,3.2vh + 4px,40px);letter-spacing:1px;color:#ffe08a;font-variant-numeric:tabular-nums}
|
|
.rs-stats dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3px,.8vh,8px) 12px;margin:0;animation:rs-up .5s .6s both}
|
|
.rs-stats dt{font-weight:700;font-size:10px;letter-spacing:1px;color:#8fa9ac;text-transform:uppercase;overflow-wrap:anywhere}
|
|
.rs-stats dd{margin:0;font-weight:700;font-size:clamp(15px,min(2.4vh + 2px,2vw),28px);line-height:1.1;color:#f2ead3;overflow-wrap:anywhere}
|
|
.rs-actions{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:8px;animation:rs-up .5s .8s both}
|
|
.rs-actions .menu-primary,.rs-actions .result-secondary{margin:0;width:100%;min-width:0;padding:clamp(7px,1.5vh,12px) 8px;font-size:clamp(12px,1.8vh + 2px,19px);letter-spacing:1.5px;text-align:center;justify-content:center;gap:8px}
|
|
.rs-actions .result-secondary{cursor:pointer;display:block}.rs-actions .result-secondary:hover,.rs-actions .result-secondary:focus-visible{background:#24505e;color:#fff}
|
|
.rs-actions .menu-primary b{font-size:18px}
|
|
@keyframes rs-fall{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}100%{opacity:.9;transform:translateY(105vh) rotate(var(--r))}}
|
|
@keyframes rs-glow{from{opacity:.24}to{opacity:.42}}
|
|
@keyframes rs-pop{from{transform:translateY(40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes rs-sink{from{transform:translateY(24px) scaleX(-1);opacity:0}to{transform:scaleX(-1);opacity:.78}}
|
|
@keyframes rs-up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes rs-row{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes rs-title{from{transform:scale(1.5) skewX(-6deg);opacity:0}to{transform:none;opacity:1}}
|
|
@media(max-width:900px){.rs{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}.rs-fighter.lose{display:none}}
|
|
@media(max-width:700px),(max-height:420px){
|
|
.rs{grid-template-columns:minmax(0,.7fr) minmax(0,1.7fr);padding:0 2.5vw}
|
|
.rs-fighter.lose,.rs-fighter.win .rs-plate small{display:none}
|
|
.rs-main{gap:4px;padding-bottom:6px}.rs-head h1{font-size:clamp(30px,11vh,52px)}.rs-score b{font-size:clamp(22px,8vh,34px)}
|
|
.rs-quote{padding:3px 10px}.rs-quote p{font-size:13px}.rs-quote cite{display:none}
|
|
.rs-cols{gap:6px}.rs-coins,.rs-stats{padding:4px 8px}.rs-cols h3{display:none}.rs-coins li{font-size:12px;padding:0}.rs-coins li small{display:none}.rs-total b{font-size:18px}.rs-stats dt{font-size:8px;letter-spacing:1px}.rs-stats dd{font-size:13px}.rs-stats dl{gap:2px 8px}
|
|
.rs-actions{gap:5px}.rs-actions .menu-primary,.rs-actions .result-secondary{padding:6px 4px;font-size:11px;letter-spacing:.5px}.rs-actions .menu-primary b{display:none}
|
|
.rs-fighter.win .rs-plate{padding-top:12px}.rs-plate strong{font-size:clamp(16px,5vh,26px)}
|
|
}
|
|
@media(max-height:420px){.rs-quote p{font-size:12px}.rs-head h1{font-size:34px}.rs-score{margin-top:0}.rs-stats dd{font-size:12px}}
|
|
@media(prefers-reduced-motion:reduce){.rs *{animation:none!important}.rs-confetti{display:none}}
|