131 lines
35 KiB
CSS
131 lines
35 KiB
CSS
/* Front-end menu: tipografi arcade, seni petarung dan panel roster. Latar menu utama (kolase) ada di bagian Merek, paling bawah. */
|
|
#front-menu{position:fixed;inset:0;z-index:20;overflow:auto;background:#0b1b25;color:#f6eedb;font-family:Rajdhani,Arial,sans-serif;isolation:isolate}
|
|
#front-menu[hidden]{display:none}#front-menu[data-screen=home]{overflow:hidden}#front-menu button{font-family:inherit}#front-menu button:focus-visible,#front-menu a:focus-visible{outline:2px solid #fff0c5;outline-offset:4px}
|
|
.in-menu .combat-header,.in-menu .match-actions,.in-menu .bottom-hud,.in-menu .combo-counter,.in-menu .form-timers,.in-menu #announcement,.in-menu #ultimate-cutin{visibility:hidden}
|
|
.in-menu .training-only,.in-versus .training-only{display:none}.round-wins{color:#f1d39d;letter-spacing:5px;font-size:14px}.in-versus .fighter-mark>i{display:none}
|
|
#round-call{position:absolute;left:0;right:0;top:34%;z-index:8;text-align:center;pointer-events:none;text-shadow:4px 5px 0 #142733,0 12px 30px #0008}#round-call[hidden]{display:none}#round-call small{display:block;font:700 13px Rajdhani;letter-spacing:4px;color:#ffe5ae;text-shadow:0 2px 6px #102b35}#round-call strong{display:block;font:700 italic clamp(70px,11vw,145px)/1 Rajdhani;color:#fff0ce;letter-spacing:5px;animation:round-strike .28s ease-out both}#round-call[data-phase=ko] strong{color:#efad77}
|
|
@keyframes round-strike{from{transform:scale(1.3) skew(-10deg);opacity:0}to{transform:scale(1) skew(-5deg);opacity:1}}
|
|
.home-art,.selection-backdrop,.arena-screen-bg,.result-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}.menu-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0 3px,#94cdb912 3px 4px)}
|
|
.home-top{display:flex;justify-content:space-between;padding:27px 4.5%}.eyebrow,.build-tag{font-weight:700;letter-spacing:3px;font-size:11px}.eyebrow{color:#d8c394}.build-tag{font-size:10px;color:#d4e1df}
|
|
.home-content{width:42%;max-width:540px;margin:clamp(8px,4vh,42px) 0 80px 7%}.home-title>span{color:#a7d9cc;font-size:12px;font-weight:700;letter-spacing:4px}.home-title h1{font-size:clamp(64px,8.5vw,130px);line-height:.77;font-style:italic;letter-spacing:-3px;margin:21px 0 20px;position:relative;text-shadow:4px 5px 0 #05151e7a}.home-title h1 em{font-style:italic;color:#ecd7a6;letter-spacing:10px}.home-title h1 i{font-size:35px;position:absolute;top:12%;margin-left:17px;color:#86d6c7}.home-title p{color:#c3d1d3;font-size:17px;letter-spacing:2px;margin:0 0 30px}
|
|
.home-nav{display:flex;flex-direction:column;gap:8px;max-width:420px}.home-nav button{display:flex;align-items:center;gap:17px;text-align:left;background:#102b37a6;border:1px solid #7dada144;border-left:3px solid #7fa69866;padding:11px 17px 11px 15px;color:#e6e6d7;transform:skewX(-7deg);transition:background .14s,border-color .14s,transform .14s;font-weight:700}.home-nav button>*{transform:skewX(7deg)}.home-nav .nav-index{font-size:12px;color:#8eb5b6;align-self:flex-start;padding-top:7px}.home-nav button>span:nth-child(2){font-size:27px;letter-spacing:1px;flex:1;line-height:1.05}.home-nav small{display:block;font-size:11px;font-weight:500;letter-spacing:.4px;margin-top:5px;color:#a8c2c5}.home-nav b{font-size:26px;font-weight:500}.home-nav button:first-child{background:#d2b57d;color:#102734;border-color:#f1dba5;box-shadow:0 5px 20px #050d1955}.home-nav button:first-child small,.home-nav button:first-child .nav-index{color:#24444c}.home-nav button:hover,.home-nav button:focus-visible{background:#f0d49d;color:#122837;border-color:#fff0c8;transform:skewX(-7deg) translateX(8px)}.home-nav button:hover small,.home-nav button:focus-visible small{color:#2e5156}
|
|
.home-title h1 i{display:none}
|
|
.home-title h1 em{letter-spacing:3px}.home-caption{font-size:24px;letter-spacing:3px}.home-caption i{font-size:17px;margin:0 12px}.wordmark>span{letter-spacing:3px}
|
|
.home-caption{position:absolute;right:8%;bottom:13%;font-weight:700;font-size:33px;letter-spacing:5px;text-shadow:2px 3px #102c37}.home-caption i{font-style:normal;color:#dcb783;margin:0 20px;font-size:22px}.home-caption small{display:block;font-size:10px;letter-spacing:4px;color:#cfdfd6;text-align:center;margin-top:5px}.home-footer{position:absolute;left:4.5%;right:4.5%;bottom:22px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#a6c0c6}.home-footer b{color:#e7c88d;margin:0 11px}.home-footer>span:last-child{color:#cbe0bc}
|
|
.selection-backdrop{background:radial-gradient(ellipse at 20% 60%,#2b514e77,transparent 40%),radial-gradient(ellipse at 82% 60%,#79534355,transparent 40%),linear-gradient(160deg,#142e3d,#0b1926 70%)}.selection-backdrop:after{content:'';position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(125deg,transparent 0 60px,#a6dbd32a 61px 62px)}
|
|
.select-header{height:107px;display:flex;align-items:center;gap:25px;padding:18px 3.5%;border-bottom:1px solid #a4c7c022;background:#0b1d2980}.menu-back{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #8cadb14d;color:#e9e6cd;padding:8px 13px;font-size:24px}.menu-back span{font-size:11px;font-weight:700;letter-spacing:1px}.select-header h1{font-size:clamp(25px,3.1vw,43px);font-weight:700;font-style:italic;line-height:1;margin:6px 0 0;letter-spacing:1.3px}.wordmark{margin-left:auto;font-weight:700;font-style:italic;font-size:22px;letter-spacing:1px;line-height:.82;position:relative;padding-right:22px;color:#f3e5bd}.wordmark>span{display:block;letter-spacing:9px;color:#a1d5c9}.wordmark i{position:absolute;right:0;top:4px;font-size:20px;color:#e8bf7c}
|
|
.selection-steps{display:flex;justify-content:center;align-items:center;gap:13px;padding-top:18px;font-size:12px;letter-spacing:1px;color:#58757d}.selection-steps span{display:flex;gap:7px;align-items:center}.selection-steps b{font-size:10px;letter-spacing:2px}.selection-steps .current{color:#f4d8a3}.selection-steps .done{color:#8bd4c3}.selection-steps>i{height:1px;width:35px;background:#55707a77}
|
|
.select-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1fr);height:calc(100vh - 188px);max-width:1540px;margin:0 auto;padding:0 24px;align-items:center;gap:5px}
|
|
#player-preview,#enemy-preview{height:100%;min-height:410px;min-width:0;position:relative}.fighter-plinth{position:relative;height:100%;overflow:visible}.side-tag{position:absolute;top:7%;left:12%;font-size:11px;letter-spacing:2px;font-weight:700;color:#8cdacc}.fighter-plinth.enemy .side-tag{left:auto;right:12%;color:#eeb281}.plinth-light{position:absolute;left:10%;right:0;bottom:100px;top:10%;background:linear-gradient(145deg,#79d7c214,transparent);clip-path:polygon(30% 0,100% 0,75% 100%,0 100%)}.enemy .plinth-light{background:linear-gradient(220deg,#f4b77817,transparent);transform:scaleX(-1)}
|
|
.selection-art{position:absolute;left:50%;bottom:116px;height:clamp(220px,49vh,525px);max-width:130%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 16px 16px #020d18a6);animation:fighter-in .2s ease-out both}.enemy .selection-art{transform:translateX(-50%) scaleX(-1)}.unknown .selection-art{height:clamp(210px,39vh,370px);opacity:.45;filter:drop-shadow(0 0 12px #718c8b22)}
|
|
@keyframes fighter-in{from{opacity:.3;filter:drop-shadow(0 16px 16px #020d18a6) brightness(1.4)}to{opacity:1;filter:drop-shadow(0 16px 16px #020d18a6) brightness(1)}}
|
|
.fighter-copy{position:absolute;left:11%;right:0;bottom:9px}.enemy .fighter-copy{left:0;right:11%;text-align:right}.fighter-copy>span{font-size:10px;font-weight:700;letter-spacing:2px;color:#a0d5c9}.enemy .fighter-copy>span{color:#edbd95}.fighter-copy h2{font-size:clamp(42px,5vw,72px);font-style:italic;margin:3px 0 0;line-height:.88;letter-spacing:2px}.fighter-copy p{font-size:12px;letter-spacing:3px;font-weight:700;margin:9px 0;color:#b4c8c6}.fighter-copy small{font-size:12px;color:#839fa8}
|
|
.roster-center{padding-top:8px;position:relative;z-index:2}.roster-caption{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.roster-caption strong{font-size:12px;letter-spacing:2px;color:#f1cf95}.roster-caption>span{font-size:9px;letter-spacing:1.5px;color:#9cb2b7}.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.roster-tile{aspect-ratio:.83;min-width:0;padding:0;position:relative;overflow:hidden;border:1px solid #58787d88;background:#172b35;transform:skewX(-4deg);transition:border-color .1s,box-shadow .1s,filter .1s}.roster-tile img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transform:skewX(4deg) scale(1.08);pointer-events:none}.roster-tile>span{position:absolute;bottom:0;left:0;right:0;padding:8px 2px 4px;background:linear-gradient(transparent,#081720);font-size:12px;letter-spacing:1px;font-weight:700;color:#e7e8d5}.roster-tile>b{position:absolute;top:4px;left:4px;background:#86d9c4;color:#09202b;font-size:10px;padding:2px 4px}.roster-tile>b:empty{display:none}.roster-tile.locked{filter:saturate(.35);border-color:#334953}.roster-tile.locked span{font-size:8px;color:#7b969d;letter-spacing:2px}.roster-tile.locked img{opacity:.65}.roster-tile.soon img{filter:saturate(.85) brightness(.88)}.roster-tile.highlight{border:2px solid #efce91;box-shadow:0 0 0 2px #c9954b44,0 0 18px #d7aa6524;filter:none}.roster-tile.highlight:after{content:'';position:absolute;inset:3px;border:1px solid #fff2bc66;pointer-events:none}
|
|
.fighter-moves{height:53px;text-align:center;padding-top:12px}.fighter-moves>span{display:block;font-size:10px;color:#93afa9;letter-spacing:1px;text-transform:uppercase}.fighter-moves b{display:block;font-size:14px;letter-spacing:2px;margin-top:3px;color:#eddfbc}.menu-primary{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #ffe8b4;background:#e0bf85;color:#10252f;font-size:17px;font-weight:700;letter-spacing:1.5px;padding:13px 21px;cursor:pointer;transition:background .15s,transform .15s}.menu-primary:hover,.menu-primary:focus-visible{background:#ffe4b0;transform:translateY(-2px)}.menu-primary b{font-size:23px;line-height:.7}.confirm-fighter{width:100%;margin-top:11px}.roster-notice{height:16px;text-align:center;font-size:10px;color:#839fa8;letter-spacing:1px;margin:9px 0 0}.menu-primary[aria-disabled=true]{background:#536265;border-color:#718486;color:#bac2b8}.menu-primary:disabled{cursor:wait;filter:grayscale(1);opacity:.6}
|
|
.menu-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 3.5%;font-size:10px;color:#8ea8ae;letter-spacing:1px;border-top:1px solid #8fbaaa22;background:#0b1c269c}.menu-footer kbd{font:700 10px Rajdhani;border:1px solid #647c8188;padding:2px 4px;color:#d6decb}.menu-footer i{display:inline-block;width:5px;height:5px;margin:0 10px;background:#91c9ae;transform:rotate(45deg)}
|
|
.arena-screen-bg{filter:brightness(.5) saturate(.85)}.arena-screen-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0a1d2bf5,transparent 60%,#0b243388)}.arena-content{width:min(980px,88%);margin:20px auto 80px}.versus-strip{display:flex;align-items:center;justify-content:center;gap:34px;height:57px}.versus-strip>div{display:flex;align-items:center;gap:12px;min-width:175px}.versus-strip>div:last-child{justify-content:flex-end;text-align:right}.versus-strip img{width:48px;height:48px;object-fit:cover;border:1px solid #dec89c}.versus-strip span{font-size:9px;letter-spacing:2px;color:#99d2c4}.versus-strip strong{display:block;font-size:25px;font-style:italic;color:#ffedd0;line-height:1}.versus-strip>b{font-size:25px;font-style:italic;color:#e8bf7b}.arena-window{height:clamp(115px,23vh,265px);margin:17px 0 12px;border:1px solid #cde0be55;position:relative;background:linear-gradient(0deg,#07131dd6,transparent 66%);box-shadow:0 8px 35px #05172233}.arena-window>div{position:absolute;left:22px;bottom:17px}.arena-window small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#d5e4ca}.arena-window h2{font-size:36px;font-style:italic;font-weight:700;line-height:1;margin:4px 0 0;text-transform:uppercase}.arena-number{position:absolute;top:13px;left:16px;font-size:11px;letter-spacing:3px}.arena-day{position:absolute;right:17px;bottom:18px;font-size:10px;letter-spacing:1.5px;color:#f5dfb3}.arena-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.arena-tile{height:90px;border:1px solid #a6c6ba66;padding:0;background:#152e38;position:relative;overflow:hidden}.arena-tile img{width:100%;height:100%;object-fit:cover;opacity:.7}.arena-tile>span{position:absolute;bottom:0;left:0;right:0;padding:15px 8px 6px;background:linear-gradient(transparent,#071720);font-size:14px;text-transform:uppercase;font-weight:700;letter-spacing:1px}.arena-tile.selected{border:2px solid #ebc487;box-shadow:0 0 0 2px #e6b97544}.arena-tile.selected img{opacity:1}.match-options{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}.difficulty-buttons{display:flex;gap:6px;margin-top:9px}.difficulty-buttons button{min-width:85px;background:#142d38;color:#c4d3cf;border:1px solid #789a984d;padding:7px 11px;font-size:14px;font-weight:700;text-transform:uppercase}.difficulty-buttons i{display:block;font-style:normal;font-size:9px;letter-spacing:2px;color:#718f97}.difficulty-buttons button.selected{background:#c19b60;color:#0c242e;border-color:#e8cd91}.difficulty-buttons .selected i{color:#193b3d}.match-rules{text-align:right;font-size:13px;letter-spacing:1.2px;color:#f1dab2}.match-rules span{display:block;font-size:9px;letter-spacing:1px;color:#a9c2c3;margin-top:5px}.training-note{font-size:15px;color:#d2e4d3;margin-bottom:0}.start-battle{margin-left:auto;min-width:280px}.arena-content #setup-error{font-size:12px;color:#ffcd9e;text-align:right;margin:6px 0 0}
|
|
.home-art.dim{filter:brightness(.32)}.about-panel{width:min(660px,87%);margin:35px 0 70px 12%;padding:27px 35px;background:#112935dc;border-left:3px solid #d7b87d}.about-panel h2{font-size:50px;line-height:.95;letter-spacing:1px;margin:15px 0}.about-panel em{color:#dbbd85;font-style:italic}.about-panel>p{font-size:17px;line-height:1.45;color:#b9d0d0;max-width:530px}.about-fighters{display:flex;gap:28px;border-top:1px solid #678c8655;padding-top:12px}.about-fighters p{flex:1;font-size:12px;color:#d1c497}.about-fighters span{display:block;font-size:13px;color:#9fb8bc;margin-top:6px;line-height:1.4}.about-stats{display:flex;gap:40px;margin:18px 0;color:#98b3b8;font-size:10px;letter-spacing:1px}.about-stats b{display:block;font-size:34px;line-height:1;color:#f0d49e}.about-panel>small{display:block;font-size:11px;line-height:1.7;color:#7b9ca7}.about-panel .menu-primary{margin-top:23px;width:100%}
|
|
.result-bg{background:radial-gradient(ellipse at 30% 60%,#6486756e,transparent 52%),linear-gradient(130deg,#163443,#0a1a26)}.result-layout{display:flex;align-items:center;justify-content:center;gap:7%;height:calc(100vh - 110px);padding:30px 7%}.result-fighter{height:min(75vh,680px);max-width:44%;object-fit:contain;filter:drop-shadow(0 20px 25px #0007)}.result-copy{width:390px;max-width:47%}.result-copy h1{font-size:clamp(48px,7vw,98px);font-style:italic;letter-spacing:1px;line-height:1;color:#edcd92;margin:12px 0}.result-copy>p{font-size:20px;letter-spacing:5px;color:#b7dacb}.final-score{display:flex;gap:25px;align-items:center;font-size:72px;font-weight:700;line-height:1.15}.final-score i{font-size:28px;font-style:normal;color:#748f95}.result-copy>small{display:block;font-size:12px;color:#98b3b7;margin:8px 0 30px}.result-copy>.menu-primary{width:100%}.result-secondary{display:block;width:100%;margin-top:10px;border:1px solid #8ba89d66;padding:11px;background:#183440;color:#cbddd4;font-size:14px;font-weight:700;letter-spacing:2px}
|
|
@media(min-width:1600px){.home-content{margin-top:7vh}.home-nav button{padding:15px 21px}.home-title p{margin-bottom:40px}.select-stage{grid-template-columns:1fr 440px 1fr}.roster-grid{gap:10px}.roster-tile{aspect-ratio:.94}.selection-art{height:55vh}.arena-content{margin-top:30px}}
|
|
@media(max-height:700px) and (min-width:800px){.home-content{margin-top:0;margin-bottom:50px}.home-title h1{font-size:76px;margin:14px 0}.home-title p{margin-bottom:20px}.home-nav button{padding:9px 14px}.home-nav button>span:nth-child(2){font-size:23px}.select-header{height:82px}.selection-steps{padding-top:12px}.select-stage{height:calc(100vh - 151px);grid-template-columns:1fr 300px 1fr}.roster-tile{aspect-ratio:1}.selection-art{height:43vh;bottom:104px}.fighter-copy h2{font-size:47px}.fighter-copy small{font-size:10px}.fighter-copy p{font-size:10px}.confirm-fighter{padding:10px 14px;font-size:14px}.fighter-moves{height:44px}.roster-caption{margin-bottom:8px}.arena-content{margin-top:8px;margin-bottom:50px}.arena-window{height:19vh;margin:10px 0}.arena-tiles .arena-tile{height:71px}.match-options{padding:12px 0}.menu-footer{padding:10px 3.5%}.about-panel{margin-top:20px;padding:20px 28px}.about-panel h2{font-size:40px}.about-panel>p{font-size:15px}.about-stats{margin:10px 0}}
|
|
@media(max-width:800px){.home-content{width:65%;margin-left:8%;margin-top:7vh}.home-title h1{font-size:83px}.home-title>span{font-size:10px}.home-caption{display:none}.home-top{padding:20px 6%}.build-tag{display:none}.home-footer{font-size:9px}.select-header{height:89px;padding:12px 3%;gap:14px}.select-header .wordmark{display:none}.select-header h1{font-size:28px}.select-header .eyebrow{font-size:9px;letter-spacing:2px}.select-stage{height:auto;min-height:calc(100vh - 170px);grid-template-columns:1fr minmax(248px,340px) 1fr;padding:0 12px;gap:0}#player-preview,#enemy-preview{min-height:430px}.selection-art{height:32vh;max-width:210%;bottom:142px}.fighter-copy{left:0;right:-30px;bottom:42px}.enemy .fighter-copy{left:-30px;right:0}.fighter-copy h2{font-size:33px}.fighter-copy>span,.fighter-copy small{display:none}.fighter-copy p{font-size:8px;letter-spacing:1px}.side-tag{font-size:8px;left:0;top:12%;max-width:74px}.fighter-plinth.enemy .side-tag{right:0}.roster-tile{aspect-ratio:.87}.roster-caption>span{display:none}.menu-footer{font-size:8px;padding:11px 3%}.menu-footer>span:last-child{display:none}.menu-footer kbd{font-size:8px}.arena-content{width:91%;margin-top:10px}.match-options{align-items:flex-start;gap:10px}.difficulty-buttons{gap:4px}.difficulty-buttons button{min-width:60px;padding:7px;font-size:11px}.match-rules{font-size:10px}.arena-window h2{font-size:29px}.arena-day{display:none}.arena-tile span{font-size:11px}.versus-strip{gap:15px}.versus-strip>div{min-width:130px}.start-battle{width:100%}.about-panel{margin:25px auto;width:90%;padding:25px}.result-layout{gap:4%;padding:20px 4%}.result-copy{max-width:55%}.result-copy h1{font-size:55px}.result-copy .eyebrow{font-size:9px}.result-copy>p{font-size:15px}.result-fighter{max-width:40%}}
|
|
@media(max-width:550px){.home-content{width:80%;margin-top:8vh}.home-title h1{font-size:77px}.home-nav button>span:nth-child(2){font-size:23px}.home-title p{font-size:14px}.home-footer{letter-spacing:1px}.home-top .eyebrow{font-size:9px;letter-spacing:2px}.select-stage{grid-template-columns:1fr 1fr;padding:0 16px;align-items:start}.roster-center{grid-column:1/-1;grid-row:2;padding:0 8px 70px}#player-preview,#enemy-preview{height:26vh;min-height:180px}.selection-art{height:22vh;bottom:3px;max-width:100%}.fighter-copy{left:0;bottom:0;right:auto}.enemy .fighter-copy{right:0;left:auto;bottom:0}.fighter-copy h2{font-size:28px;text-shadow:2px 2px #132e33}.fighter-copy p{margin:3px 0}.side-tag{top:3%;font-size:8px;max-width:none}.fighter-plinth.enemy .side-tag{right:0}.selection-steps{padding-top:13px}.roster-grid{gap:6px}.roster-tile{aspect-ratio:1.2}.roster-caption{margin:5px 0 8px}.roster-caption strong{font-size:10px}.fighter-moves{height:40px;padding-top:8px}.fighter-moves b{font-size:12px}.confirm-fighter{padding:10px 15px;margin-top:6px}.roster-notice{font-size:9px;margin-top:7px}.menu-footer{position:fixed}.arena-content{margin-bottom:65px}.arena-window{height:22vh}.arena-window h2{font-size:24px}.arena-window>div{left:12px;bottom:12px}.arena-tiles{gap:6px;grid-template-columns:repeat(3,1fr)}.arena-tile{height:73px}.arena-tile span{font-size:10px;letter-spacing:.2px}.match-options{display:block}.match-rules{text-align:left;margin-top:15px}.difficulty-buttons button{flex:1}.difficulty-buttons{width:100%}.difficulty-area .eyebrow{font-size:9px}.versus-strip strong{font-size:22px}.versus-strip img{width:39px;height:39px}.versus-strip>div{min-width:110px}.result-layout{position:relative;justify-content:flex-end}.result-fighter{position:absolute;left:-13%;opacity:.5;height:65vh;max-width:80%}.result-copy{position:relative;max-width:82%;width:82%}.result-copy h1{font-size:62px}.about-panel h2{font-size:39px}.about-fighters{display:block}.about-stats{gap:30px}}
|
|
@media(prefers-reduced-motion:reduce){#front-menu *,#round-call strong{animation:none!important;transition:none!important}}
|
|
@media(max-height:650px) and (max-width:800px){.home-content{margin-top:2vh}.home-title h1{font-size:65px;margin:14px 0}.home-title p{font-size:14px;margin-bottom:18px}.home-nav button{padding:9px 13px}.home-nav button>span:nth-child(2){font-size:22px}}
|
|
@media(max-height:520px){.home-top{padding:14px 4.5%}.home-content{margin-top:0}.home-title h1{font-size:62px;margin:13px 0 18px}.home-title>span{font-size:9px}.home-title p,.home-nav small{display:none}.home-nav button{padding:7px 13px}.home-nav button>span:nth-child(2){font-size:20px}.home-caption{bottom:18%}.home-footer{bottom:12px;font-size:9px}}
|
|
|
|
/* Faction-wide branding, independent from individual roster members. */
|
|
.home-caption{font-size:clamp(16px,2.1vw,26px);letter-spacing:2px}.home-caption i{font-size:17px;margin:0 12px}.wordmark>span{letter-spacing:3px}
|
|
.roster-tile img.portrait-image{transform:skewX(4deg) scale(1.08) scaleX(var(--portrait-direction,1))}
|
|
html.touch .menu-footer>span:first-child{visibility:hidden}
|
|
/* Phone landscape (about 375-420 px tall): the four home buttons, title and footer must all fit. */
|
|
@media(max-height:420px){.home-top{padding:9px 4.5%}.home-title h1{font-size:46px;margin:8px 0 10px;letter-spacing:-2px}.home-title>span{font-size:8px;letter-spacing:3px}.home-nav{gap:5px;max-width:340px}.home-nav button{padding:4px 12px}.home-nav button>span:nth-child(2){font-size:16px}.home-caption{font-size:18px;bottom:16%}.home-footer{bottom:6px;font-size:8px}}
|
|
@media(max-height:420px){.select-header{height:50px;padding:6px 3%;gap:14px}.select-header h1{font-size:21px;margin-top:2px}.selection-steps{padding-top:5px;font-size:9px;gap:9px}.selection-steps b{font-size:8px}.select-stage{height:calc(100vh - 104px);grid-template-columns:minmax(0,1fr) minmax(250px,290px) minmax(0,1fr);padding:0 12px}.roster-center{padding-top:0}.roster-caption{margin-bottom:4px}.roster-caption strong{font-size:10px}.roster-caption>span{font-size:8px}.roster-grid{gap:4px}.roster-tile{aspect-ratio:1.3}.roster-tile>span{font-size:9px;padding:5px 2px 2px}.roster-tile.locked span{font-size:7px}.fighter-moves{height:30px;padding-top:3px}.fighter-moves>span{font-size:8px}.fighter-moves b{font-size:11px;margin-top:1px}.confirm-fighter{margin-top:3px;padding:6px 12px;font-size:12px}.roster-notice{font-size:9px;margin:2px 0 0}.selection-art{height:56vh;bottom:62px}.unknown .selection-art{height:44vh}.side-tag{top:1%;font-size:9px}.fighter-copy{bottom:2px}.fighter-copy>span{font-size:8px}.fighter-copy h2{font-size:30px}.fighter-copy p{font-size:8px;margin:3px 0;letter-spacing:2px}.fighter-copy small{font-size:8px}.menu-footer{padding:5px 3%;font-size:8px}.menu-footer kbd{font-size:8px;padding:1px 3px}.arena-content{margin:4px auto 34px}.arena-window{height:24vh;margin:5px 0}.arena-window>div{left:14px;bottom:8px}.arena-window h2{font-size:22px}.arena-window small{font-size:8px}.arena-tiles{gap:6px}.arena-tiles .arena-tile{height:44px}.match-options{padding:6px 0;gap:10px}.difficulty-buttons{margin-top:4px}.difficulty-buttons button{min-width:62px;padding:4px 7px;font-size:12px}.about-panel{margin:8px 0 36px 7%;padding:12px 20px}.about-panel h2{font-size:28px;margin:6px 0}.about-panel>p{font-size:12px;margin:6px 0}.about-panel .menu-primary{margin-top:10px}.result-layout{height:calc(100vh - 50px);padding:8px 5%}}
|
|
@media(max-height:420px){.select-stage{grid-template-rows:minmax(0,1fr);align-items:stretch}.roster-center{align-self:center}.fighter-copy small{display:none}.selection-art{bottom:58px;height:54vh}.roster-notice{height:12px}}
|
|
@media(max-height:420px){#player-preview,#enemy-preview{min-height:0;height:100%}}
|
|
@media(max-height:420px){.menu-footer{display:none}.versus-strip{height:36px;gap:22px}.versus-strip img{width:30px;height:30px}.versus-strip strong{font-size:18px}.versus-strip>b{font-size:18px}.arena-window{height:17vh}.arena-tile>span{font-size:10px;padding:8px 4px 3px}.match-rules{font-size:11px}.match-rules span{margin-top:2px}.arena-content .menu-primary{padding:7px 16px;font-size:14px}.arena-content .menu-primary b{font-size:18px}.arena-content{margin-bottom:10px}.select-stage{height:calc(100vh - 76px)}}
|
|
@media(max-height:420px){.arena-number{display:none}}
|
|
/* Phone landscape result screen: art, title, score and the three buttons all above the fold. */
|
|
@media(max-height:420px){.result-layout{height:calc(100vh - 50px);padding:6px 6%;gap:5%}.result-fighter{height:min(78vh,300px)}.result-copy{width:330px}.result-copy .eyebrow{font-size:9px}.result-copy h1{font-size:40px;margin:4px 0}.result-copy>p{font-size:13px;letter-spacing:3px;margin:2px 0}.final-score{font-size:40px;gap:16px;line-height:1.05}.final-score i{font-size:18px}.result-copy>small{font-size:10px;margin:2px 0 8px}.result-copy>.menu-primary{padding:7px 16px;font-size:14px}.result-copy>.menu-primary b{font-size:18px}.result-secondary{margin-top:5px;padding:6px;font-size:11px}}
|
|
.home-top-right{display:flex;align-items:center}
|
|
/* Out of the flow so the header keeps its height; the build tag makes room for it. */
|
|
html.touch .home-top{padding-right:calc(4.5% + 50px)}
|
|
.menu-fullscreen{position:absolute;top:8px;right:4.5%;z-index:3;width:38px;height:38px;padding:0;display:grid;place-items:center;border:1px solid #e8d4a399;background:#0b1d29c7;color:#f5e6c2;cursor:pointer;touch-action:manipulation}
|
|
.menu-fullscreen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
|
|
.menu-fullscreen:active{transform:scale(.92);background:#1a3342}
|
|
.menu-fullscreen.hinted{border-color:#ffd66b;box-shadow:0 0 0 3px #ffd66b66;animation:fullscreen-glow 1.4s ease-in-out infinite}
|
|
@keyframes fullscreen-glow{0%,100%{box-shadow:0 0 0 0 #ffd66b00}50%{box-shadow:0 0 0 5px #ffd66b88}}
|
|
@media (prefers-reduced-motion:reduce){.menu-fullscreen.hinted{animation:none}}
|
|
|
|
/* Confirmed fighter: the picture brightens 3 times (0.3 s each, within the 3-flashes-per-second limit) before the next step; no glow. */
|
|
.roster-tile.picked{animation:pick-tile .3s steps(1,end) 3}
|
|
#player-preview.picked .selection-art,#enemy-preview.picked .selection-art{animation:pick-art .3s steps(1,end) 3}
|
|
#front-menu[data-picking] .roster-tile,#front-menu[data-picking] button{pointer-events:none}
|
|
@keyframes pick-tile{0%{filter:brightness(1.6)}50%,100%{filter:none}}
|
|
@keyframes pick-art{0%{filter:brightness(1.6) drop-shadow(0 16px 16px #020d18a6)}50%,100%{filter:drop-shadow(0 16px 16px #020d18a6)}}
|
|
@media (prefers-reduced-motion:reduce){.roster-tile.picked,#player-preview.picked .selection-art,#enemy-preview.picked .selection-art{animation:none;filter:brightness(1.35)}}
|
|
|
|
/* ===== Merek (RENCANA 2.5, 2.7, 2.8) =====
|
|
Latar menu utama dan About: kolase potret tujuh petarung (assets/menu/<id>-select.webp, disusun menu.js collageHtml) dengan
|
|
lapisan miring, cahaya, dan gerak lambat. Hanya CSS dan gambar yang sudah ada. Gerak berhenti lewat .bg-still (Pengaturan,
|
|
tab tersembunyi) dan prefers-reduced-motion. */
|
|
.home-art{overflow:hidden;background:linear-gradient(112deg,#071b29 0%,#0c2c3a 44%,#2a2f36 100%)}
|
|
.hc-sky{position:absolute;inset:0;background:radial-gradient(ellipse 44% 78% at 70% 62%,#f3c97c4d,transparent 70%),radial-gradient(ellipse 52% 46% at 92% 6%,#6ad3c23d,transparent 72%),radial-gradient(ellipse 40% 50% at 52% 100%,#d6282833,transparent 70%)}
|
|
.hc-stripes{position:absolute;inset:-10% -30%;opacity:.55;transform:skewX(-22deg);background:repeating-linear-gradient(90deg,transparent 0 54px,#f1d39d12 54px 58px,transparent 58px 112px,#86d6c70e 112px 114px);animation:hc-slide 48s linear infinite;will-change:transform}
|
|
.hc-dots{position:absolute;inset:0;opacity:.5;background:radial-gradient(#ffffff1c 1.2px,transparent 1.6px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 78%);mask-image:linear-gradient(100deg,transparent 40%,#000 78%)}
|
|
.hc-row{position:absolute;left:0;right:0;top:0;bottom:0}
|
|
.hc-slot{--h:calc(88vh - var(--a) * 7vh);position:absolute;margin:0;bottom:2%;left:calc(70% + var(--p) * 10.2%);width:calc(var(--h) * .768);height:var(--h);margin-left:calc(var(--h) * -.384);z-index:calc(10 - var(--a) * 2);animation:hc-bob 7s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -1.3s);will-change:transform}
|
|
.hc-beam{position:absolute;left:50%;bottom:-2%;width:74%;height:112%;margin-left:-37%;transform:skewX(-13deg);background:linear-gradient(0deg,var(--cA),var(--cB) 82%);border-left:2px solid var(--cA);opacity:calc(1 - var(--a) * .1)}
|
|
.hc-slot:before{content:'';position:absolute;left:2%;right:2%;bottom:-1.2%;height:5.5%;background:radial-gradient(ellipse at center,#000c,transparent 70%)}
|
|
.hc-fighter{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:scaleX(var(--f,1));filter:brightness(calc(1 - var(--a) * .1)) drop-shadow(0 12px 14px #020d18c0);-webkit-user-drag:none;user-select:none}
|
|
.hc-floor{position:absolute;left:0;right:0;bottom:0;height:17%;background:linear-gradient(0deg,#03101a,#03101a00)}
|
|
.home-art:after{content:'';position:absolute;inset:0;z-index:30;pointer-events:none;background:linear-gradient(90deg,#061a29f5 0%,#071d2dd9 26%,#0a203666 46%,transparent 64%),linear-gradient(0deg,#061520d9,transparent 26%,transparent 80%,#07182666)}
|
|
#front-menu.bg-still .home-art *{animation-play-state:paused}
|
|
@keyframes hc-bob{from{transform:translateY(0)}to{transform:translateY(-1.8%)}}
|
|
@keyframes hc-slide{to{transform:skewX(-22deg) translateX(-114px)}}
|
|
@media(max-width:800px){.hc-slot{left:calc(76% + var(--p) * 9.5%);--h:calc(80vh - var(--a) * 8vh)}}
|
|
@media(max-height:420px){.hc-slot{--h:calc(84vh - var(--a) * 8vh)}}
|
|
|
|
/* Semboyan di atas kolase: pelat gelap supaya tetap terbaca di atas kaki petarung. */
|
|
.home-caption{right:4.5%;bottom:34px;padding:8px 18px 7px;background:linear-gradient(90deg,#071827d9,#071827a6);border-left:3px solid #d7b87d;z-index:40}
|
|
|
|
@media(max-height:420px){.home-caption{bottom:20px;padding:5px 12px 4px}.home-caption small{font-size:8px;letter-spacing:2px;margin-top:2px}}
|
|
|
|
/* Kutipan layar loading (#boot dan #load-state). */
|
|
.boot-quote,.load-quote{margin:0 auto;max-width:34ch;text-align:center;font-style:italic;font-size:15px;line-height:1.35;color:#d9e7e1}
|
|
.boot-quote{margin-top:16px;min-height:2.7em}.boot-quote:empty,.load-quote:empty{display:none}
|
|
.load-quote{color:#b9cfd0}
|
|
|
|
/* Layar About: panel kredit dan panel "Yang baru" berdampingan; menumpuk di layar sempit. */
|
|
#front-menu[data-screen=about]{display:grid;grid-template-columns:minmax(16px,1fr) minmax(0,640px) minmax(0,420px) minmax(16px,1fr);align-content:start;padding-bottom:16px}
|
|
#front-menu[data-screen=about]>.select-header{grid-column:1/-1}
|
|
#front-menu[data-screen=about]>.about-panel{grid-column:2;width:auto;margin:26px 0 0;align-self:start}
|
|
.about-link{color:#e8d19c;text-decoration:underline;text-underline-offset:2px}.about-link:hover,.about-link:focus-visible{color:#fff0c5}
|
|
.whatsnew-panel{grid-column:3;margin:26px 0 0 26px;padding:22px 24px 14px;background:#112935dc;border-left:3px solid #86d6c7;display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 150px);align-self:start}
|
|
.wn-head h2{font-size:30px;line-height:1;margin:8px 0 12px;letter-spacing:.5px}
|
|
.wn-scroll{overflow:auto;min-height:0;padding-right:8px;margin-right:-6px;scrollbar-width:thin;scrollbar-color:#6f9a9a #0b1d29}.wn-scroll:focus-visible{outline:2px solid #fff0c5;outline-offset:2px}
|
|
.wn-entry{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid #678c8644}.wn-entry:last-child{border-bottom:0;margin-bottom:0}
|
|
.wn-entry h3{display:flex;align-items:baseline;gap:10px;margin:0;font-size:20px;letter-spacing:1px;color:#f3e5bd}.wn-entry h3 small{font-size:12px;font-weight:500;letter-spacing:1px;color:#9fb8bc}
|
|
.wn-badge{font-style:normal;font-size:10px;font-weight:700;letter-spacing:2px;color:#10252f;background:#ffd66b;padding:2px 6px;transform:skewX(-8deg)}
|
|
.wn-title{margin:3px 0 6px;font-size:14px;font-weight:700;letter-spacing:.5px;color:#a6dccf}
|
|
.wn-entry ul{margin:0;padding-left:18px}.wn-entry li{font-size:14px;line-height:1.38;color:#c6d6d4;margin:0 0 4px}
|
|
.wn-entry.latest h3 b{color:#ffe29a}
|
|
@media(max-width:1100px){#front-menu[data-screen=about]{grid-template-columns:16px minmax(0,1fr) 16px;row-gap:16px}#front-menu[data-screen=about]>.about-panel,.whatsnew-panel{grid-column:2}.whatsnew-panel{margin:0 0 34px;max-height:none}.wn-scroll{overflow:visible}#front-menu[data-screen=about]>.about-panel{margin-top:20px}}
|
|
@media(max-height:640px) and (min-width:1101px){
|
|
#front-menu[data-screen=about]>.about-panel{padding:16px 24px;margin-top:16px}.about-panel h2{font-size:32px;margin:6px 0 4px}.about-panel h2 br{display:none}.about-panel h2 br+em{margin-left:.28em}.about-panel>p{font-size:14px;line-height:1.35;margin:6px 0 8px}
|
|
.about-fighters{gap:20px;padding-top:8px}.about-fighters span{font-size:12px;margin-top:3px}.about-stats{gap:28px;margin:10px 0}.about-panel>small{font-size:11px;line-height:1.35}.about-panel .menu-primary{padding:8px 16px;font-size:14px;margin-top:8px}
|
|
.whatsnew-panel{margin-top:16px;padding:16px 20px 10px;max-height:calc(100vh - 100px)}.wn-head h2{font-size:24px;margin:4px 0 8px}
|
|
}
|
|
@media(max-height:420px){.wn-entry li{font-size:12px}.wn-head h2{font-size:20px}.whatsnew-panel{max-height:calc(100vh - 62px)}}
|
|
|
|
/* Toast "Ada yang baru": sekali per versi, muncul di menu utama. */
|
|
.brand-toast{position:fixed;left:50%;bottom:18px;z-index:95;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:9px 10px 9px 16px;background:#101923f2;border:1px solid #e8b84a;border-left-width:4px;border-radius:6px;color:#f6eedb;font:600 15px/1.25 Rajdhani,Arial,sans-serif;box-shadow:0 8px 24px #0009;animation:bt-in .35s ease-out both;transition:opacity .4s,transform .4s}
|
|
.brand-toast.out{opacity:0;transform:translateX(-50%) translateY(10px)}
|
|
.bt-text{display:flex;flex-direction:column;min-width:0}.bt-text b{color:#ffd66b;letter-spacing:2px;font-size:12px}
|
|
.bt-look,.bt-close{font:700 14px Rajdhani,Arial,sans-serif;cursor:pointer;touch-action:manipulation}
|
|
.bt-look{padding:6px 14px;background:#e0bf85;color:#10252f;border:1px solid #ffe8b4;letter-spacing:1px}.bt-look:hover,.bt-look:focus-visible{background:#ffe4b0}
|
|
.bt-close{padding:6px 9px;background:transparent;color:#bcd0d0;border:1px solid #8cadb14d}.bt-close:hover,.bt-close:focus-visible{color:#fff;border-color:#fff8}
|
|
@keyframes bt-in{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}}
|
|
@media(max-height:420px){.brand-toast{bottom:8px;font-size:13px;padding:6px 8px 6px 12px}}
|
|
@media(prefers-reduced-motion:reduce){.hc-stripes,.hc-slot,.brand-toast{animation:none!important}.brand-toast{opacity:1}}
|