/* THE BOTTOM OF THE DOCUMENT, RESERVED ONCE, HERE. `.footer` is the last thing in every page's flow, so it is the only element that can reserve the fixed furniture: a padding anywhere further up reserves space in the MIDDLE of a page, and -- measured at the foot of a match page -- pushes the real reserve up into view instead of sitting behind the bar. That is exactly what two blocks on the match page were doing, 53px each, on top of the 40 here and the 10 `.content` carries. Both are gone; this is the figure. It follows the measurement rather than staying a constant, because 40px is only right while the navigation is the tallest thing down there -- with the action bar up, p_ga_ma_custom_bottomReserve reports 88 and this was never enough. max() means it can only ever grow: no measurement, and the page keeps the 40px it has had since 2017. The 10px is what `.content` already contributes, so the two together come to exactly the figure measured. NO env(safe-area-inset-bottom) HERE OR ANYWHERE ELSE ON THIS PATH: the reserve is computed as `window.innerHeight - top + 12`, and innerHeight is the visual viewport, so a phone's home indicator is already inside the number. Adding env() counted it twice. */ /* THE BAR'S HEIGHT, NAMED ONCE. Four other stylesheets sit on this bar and were written against 40 by hand (the ticket button, the open slip, the share sheet, the consent banner); each now reads this with a 40px fallback, so a page that has not loaded p-f.css keeps exactly the geometry it has today. Why 64 and not 40: 8 of air, a 26 icon box, 5, an 11 label, 4, a 3px line, 6 under it. Every one of those was measured on the preview, not chosen. */ :root{--xw-nav-h:64px} :root{--xw-foot-tail:max(40px, calc(var(--xw-bottom-reserve, 40px) - 10px))} .footer{margin-bottom:var(--xw-foot-tail)} .p_f_m{position:fixed;width:100%;height:var(--xw-nav-h);font-size:12px;background:var(--color-1);display:inline-block;z-index:999;bottom:0;max-width:502px;left:50%;transform:translateX(-50%);border-top:0;box-shadow:0 -1px 0 var(--color-3),0 -10px 22px -16px rgba(0,0,0,.55)} .p_f_m a{color:var(--color-6);position:relative;-webkit-tap-highlight-color:#0000;transition:color .18s ease} .p_f_m a.active{color:var(--color-9);animation:none;opacity:1} html.xi-dark .p_f_m a.active{color:var(--mainColor)} .p_f_m a:focus-visible{outline:2px solid var(--mainColor);outline-offset:-3px;border-radius:8px} .p_f_m .t{display:inline-block;flex:1 1 0;min-width:0;cursor:pointer;position:relative} .p_f_m a.t2.active{box-shadow:0 -25px 0 -21px #79b93f inset!important} .p_f_m a.active::after{content:"";height:3px;width:24px;position:absolute;background:var(--mainColor);bottom:6px;left:50%;transform:translateX(-50%);border-radius:2px;z-index:1} .p_f_m a.active .na{font-weight:600} .p_f_m a.active .b{background:none} /* t1 is drawn now; its PNG mask retired 2026-09-21 */ .p_f_m a.t2.active .im{background:#000;filter:brightness(1);-webkit-mask-box-image:url(/images/menu-trophy-30.png);mask-image:image(url(mask.png),skyblue);mask:url(/images/menu-trophy-30.png);mask-size:cover} /* t3 is drawn now; its PNG mask retired 2026-09-21 */ .p_f_m a.t4.active .im{background:#000;filter:brightness(1);-webkit-mask-box-image:url(/images/menu-leaderboard-26.png);mask-image:image(url(mask.png),skyblue);mask:url(/images/menu-leaderboard-26.png);mask-size:cover} .p_f_m a.t6.active .im{background:#000;filter:brightness(1);-webkit-mask-box-image:url(/images/menu-v-bucks-50.png);mask-image:image(url(mask.png),skyblue);mask:url(/images/menu-v-bucks-50.png);mask-size:cover} .p_f_m a.t6.active .na{color:#000} .p_f_m a.t6.active::after{content:"";height:4px;position:absolute;background:#79b93f;bottom:-1px;left:0;z-index:1;width:100%} .p_f_m .t.t6.active .b{background:var(--virtualColor)} /* t7 is drawn now; its PNG mask retired 2026-09-21 */ /* t8 is drawn now; its PNG mask retired 2026-09-21 */ /* t9 is drawn now; its PNG mask retired 2026-09-21 */ .p_f_m .m{width:100%;max-width:600px;text-align:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center} .p_f_m .se{float:left;width:1px;height:40px;background:#292929;display:inline-block} /* "Register | Login" is 87px at 10.5px and a 330px bar gives a four-tab bar 83 per tab. The other three never needed 83, so this one takes the slack rather than the label being cut or the copy being changed. */ .p_f_m[login="0"] .t.t5{flex:1.25 1 0} .p_f_m .t:last-child{border-right:none} .p_f_m .t .b{margin:0 auto;display:block;position:relative;width:100%;height:var(--xw-nav-h)} .p_f_m .t .im{width:26px;height:26px;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:8px;transform:translateX(-50%);filter:none;transition:transform .1s ease} .p_f_m .t .im i[data-xi]{--xi-size:24px;display:block;color:inherit} /* a press is felt on a phone, where there is no hover to say the tap landed */ .p_f_m .t:active .im{transform:translateX(-50%) scale(.9)} /* THE DRAWN ICONS, FLAT. The library draws depth -- a tonal gradient, a raw black, greys -- and at 24px on a bar that is mud. A navigation glyph is one colour with its detail cut out of the shape. These rules are the ones the preview was approved with, and nothing more: a seam and tone-as-opacity were both tried on top of them and both taken out, because what helped the die eroded the ticket. Colour AND fill: the library colours its parts by setting `color` and the shapes paint with currentColor, so forcing fill alone loses to that. Strokes are kept and take the cut colour -- nav-sports draws its pitch markings as fill="none" stroked paths, and stroke:none deleted the pitch. Matched on [stroke-width]: the markup carries the width as an attribute and the colour comes from the stylesheet, so [stroke] matches nothing. */ .p_f_m .im i[data-xi] svg *{color:inherit !important;fill:currentColor !important} .p_f_m .im i[data-xi] svg [stroke-width]{stroke:var(--color-1) !important} .p_f_m .im i[data-xi] svg [fill^="url("]{display:none} .p_f_m .im i[data-xi] svg :is(.xi-tint,.xi-lens,.xi-glint,.xi-shade){display:none} .p_f_m .im i[data-xi] svg :is(.xi-gk,.xi-gh,.xi-gg,.xi-gf,.xi-gp,.xi-gw,.xi-ge,.xi-gs,.xi-gws){fill:var(--color-1) !important} .p_f_m .im i[data-xi] svg [fill="none"]{fill:none !important} .p_f_m .t .im::before{content:"";width:100%;height:14px;position:absolute;z-index:2;background:linear-gradient(0deg,var(--color-1) 20%,#3330 100%);bottom:0;left:0;display:none} /* t1's PNG retired 2026-09-21 */ .p_f_m .t.t2 .im{background:url(/images/menu-trophy-30.png) no-repeat scroll center / cover} /* t3's PNG retired 2026-09-21 */ .p_f_m .t.t4 .im{background:url(/images/menu-leaderboard-26.png) no-repeat scroll center / cover} .p_f_m .t.t5{position:relative} /* the picture is a transparent PNG of a character (/images/avatar/...), so the disc behind it is not decoration: without it the face floats. --color-3 rather than the #141414 that was here, because a literal cannot follow 22 themes. The ring is what makes it "you" rather than a picture that happens to be there, and it is also where the active state goes. */ .p_f_m .t.t5 .im{background-color:var(--color-3);background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:50%;box-shadow:0 0 0 1.5px var(--color-4);transition:box-shadow .2s ease,transform .1s ease} .p_f_m .t.t5.active .im{box-shadow:0 0 0 2px var(--mainColor)} .p_f_m .t.t5 .im i[data-xi]{--xi-size:16px} .p_f_m .t.t6 .im{background:url(/images/menu-v-bucks-50.png) no-repeat scroll center / cover} /* t7's and t8's PNGs retired 2026-09-21 */ /* t9's PNG retired 2026-09-21 */ .p_f_m .t .na{position:absolute;width:100%;text-align:center;bottom:14px;font-size:10.5px;line-height:1;letter-spacing:.01em;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bottomMenuLoading { background: var(--mainBackground); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1005; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; contain: layout style paint; } .bottomMenuLoading.active { opacity: 1; pointer-events: auto; } /* Spinner - فقط زمانی فعال باشه */ .bottomMenuLoading::before { content: ""; width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.2); border-top: 5px solid var(--mainColor); border-radius: 50%; animation: spin 1s linear infinite; animation-play-state: paused; margin-bottom: 150px; } .bottomMenuLoading.active::before { animation-play-state: running; } @keyframes spin { to { transform: rotate(360deg); } } /* متن‌ها - فقط زمانی انیمیشن بخورن */ .bottomMenuLoading .textOne, .bottomMenuLoading .textTwo { opacity: 0; text-align: center; padding: 2px 10px; border-radius: var(--surface-radius-xs, 2px); text-transform: uppercase; margin: 3px 0; transform: translateY(15px); will-change: opacity, transform; } .bottomMenuLoading.active .textOne, .bottomMenuLoading.active .textTwo { animation: fadeIn 0.3s ease-out forwards; } .bottomMenuLoading.active .textOne { background: white; color: black; animation-delay: 0.5s; } .bottomMenuLoading.active .textTwo { background: var(--mainColor); color: black; animation-delay: 0.7s; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* متن لودینگ */ .bottomMenuLoading .loadingText { color: var(--color-9); font-size: 28px; text-transform: uppercase; margin-top: 150px; opacity: 0; } .bottomMenuLoading.active .loadingText { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* لوگو */ .bottomMenuLoading .loadingSiteLogo { margin: 0 0 10px 0; opacity: 0; transform:scale(5); } .bottomMenuLoading.active .loadingSiteLogo { animation: fadeIn 0.5s ease-out forwards; } .bottomMenuLoading .loadingSiteLogo .logoFirst { fill: var(--mainColor) !important; } .bottomMenuLoading .loadingSiteLogo .logoSecond { fill: var(--color-9) !important; } /* پاک کردن conflict های قدیمی */ .bottomMenuLoading .loadingText, .bottomMenuLoading .textOne, .bottomMenuLoading .textTwo, .bottomMenuLoading .loadingSiteLogo { } .und-dev{background:var(--color-3);position:absolute;bottom:60px;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:var(--surface-radius, 10px);display:block;background-image:linear-gradient(135deg,#fff3,#0000001a);border:1px solid var(--color-3);box-shadow:0 0 30px var(--color-2);width:220px} .und-dev img{width:40px;aspect-ratio:1;display:inline-block;float:left;margin-top:7px;filter:invert(.5)} .und-dev p{display:inline-block;width:calc(100% - 60px)} @-webkit-keyframes textOne { 0%{transform:skew(0deg,-20deg) translateX(-50%) scale(.7);opacity:0} } @-webkit-keyframes textTwo { 0%{transform:skew(0deg,-20deg) translateX(-50%) scale(.6);opacity:0} } @media only screen and (max-width:320px) { .p_f_m{border-radius:0} .p_f_m .t .na{font-size:10px;white-space:nowrap} }