/* ========================================================================== LUDO-10 — App shell -------------------------------------------------------------------------- The navy/gold chrome from the reference screens: a sticky app bar carrying the wordmark, theme toggle, wallet pill and bell; a scrollable chip row; a two-column game tile grid with corner ribbons; and a fixed bottom tab bar. Loaded LAST, after style.css and ludo-ui.css, so it wins on the chrome without !important. It deliberately does NOT repaint page bodies: the reference screens show light content under navy chrome, and eight legacy pages hardcode light card colours inline. Chrome is navy, content is not. Everything here is fluid. There is no fixed pixel width anywhere in this file, no horizontal scroll at 320px, and no rule that depends on the user being able to pinch-zoom in order to read it. Sections 01 Tokens 05 Tab bar 02 Shell / no overflow 06 WhatsApp FAB 03 App bar 07 Reduced motion + print 04 Chip row + tiles ========================================================================== */ /* ── 01 Tokens ─────────────────────────────────────────────────────────── */ :root { --sh-navy: #17244d; --sh-navy-2: #1d2c5c; --sh-navy-line: #2b3c74; --sh-gold: #f5c451; --sh-gold-deep: #e0a92c; --sh-orange: #f2762e; --sh-cream: #f6efdb; --sh-cream-line: #e3d7b6; /* Content surfaces. The page behind the game tiles is a warm off-white rather than #fff: the app bar above it is navy and the chip row is cream, and a stark white slab between them read as a different design. Tokens, not literals, so a dark theme has one place to change them. */ --sh-page: #fbf8f0; --sh-tile-bg: #ffffff; --sh-tile-foot: #fffdf7; --sh-tile-line: #e7e2d4; --sh-on-navy: #ffffff; --sh-on-navy-dim: #dfe6f7; /* 11:1 on --sh-navy */ --sh-wa: #25d366; /* Chrome heights. The body padding that keeps the last row of content clear of the fixed tab bar is computed FROM these, so changing a height moves the gap with it instead of leaving a second hardcoded number to drift. */ --sh-appbar-h: 56px; --sh-chipbar-h: 34px; --sh-tabbar-h: 58px; /* The phone-width column the whole app lives in, shared with ludo-ui.css's --ldx-shell so the app bar, the content and the tab bar cannot end up three different widths in a desktop browser. */ --sh-shell: var(--ldx-shell, 520px); } /* ── 02 Shell + never scroll sideways ──────────────────────────────────── */ /* `clip`, not the `hidden` that style.css sets. overflow-x:hidden on a root element silently promotes the OTHER axis to `auto`, which makes the element a scroll container and breaks position:sticky on the app bar. clip has no such side effect. */ html, body { overflow-x: clip; max-width: 100%; } html { /* Stop iOS inflating font sizes in landscape. That is what made the header wrap onto two lines and pushed the tiles out of their grid on a rotated phone -- the layout was correct, the text had simply been resized under it. Note this is NOT a zoom lock: pinch-zoom stays available. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Reserves the fixed tab bar's height in normal flow, so the last card can never end up underneath it. A real element rather than padding on , because the alternative needs either a body class applied by JS (which lands after first paint) or :has(), which the older Android WebViews a lot of these players are on do not support. env() adds the iPhone home-indicator strip on top. */ .ldx-tabbar-spacer { height: calc(var(--sh-tabbar-h) + env(safe-area-inset-bottom) + 12px); flex: 0 0 auto; } /* Anything genuinely wider than the screen -- a data table, a long code string -- scrolls INSIDE itself rather than pushing the whole page sideways and leaving every other element misaligned. */ .ldx-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Bootstrap's .container-fluid carries a 12px gutter on each side. Every page here nests a .container (which re-adds its own) inside it, so those 24px bought nothing but cost the app bar its full width -- it measured 296px on a 320px screen, which is most of why the wallet pill had to truncate the balance. The chrome is edge-to-edge in the reference design anyway. */ .main > .container-fluid { padding-inline: 0; } /* ── 03 App bar ────────────────────────────────────────────────────────── */ .ldx-appbar { position: sticky; top: 0; z-index: 1030; width: 100%; max-width: var(--sh-shell); margin-inline: auto; background: var(--sh-navy); color: var(--sh-on-navy); padding-top: env(safe-area-inset-top); } /* Five things have to fit across a 320px screen: menu, wordmark, theme, wallet and bell. At the sizes this started out with they summed to ~350px inside a 332px bar, and the wallet -- the one element with a shrinkable child -- was the one that gave, so the balance rendered as "₹ 5,...". The gap and the control sizes are therefore all fluid, and they are tuned so the longest realistic balance still fits at 320px rather than merely at 414px. */ .ldx-appbar__bar { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 8px); min-height: var(--sh-appbar-h); padding-inline: clamp(8px, 2.6vw, 14px); } /* The wordmark is set in text, not an image: it stays crisp at every pixel density and costs no request. The 500x500 PNG it replaces was being downscaled to 44px on every page load. */ .ldx-appbar__brand { display: inline-flex; align-items: baseline; gap: 1px; flex: 0 0 auto; font-weight: 800; font-size: clamp(17px, 5vw, 23px); letter-spacing: -.03em; line-height: 1; text-decoration: none; white-space: nowrap; } .ldx-appbar__brand b { color: var(--sh-gold); font-weight: 800; } .ldx-appbar__brand i { color: var(--sh-orange); font-weight: 800; font-style: normal; } /* Pushes everything after it against the right edge. */ .ldx-appbar__spacer { flex: 1 1 auto; min-width: 0; } .ldx-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(32px, 9.5vw, 38px); height: clamp(32px, 9.5vw, 38px); min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sh-gold); font-size: clamp(15px, 4.4vw, 17px); line-height: 1; cursor: pointer; transition: background 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1); } .ldx-iconbtn:hover { background: rgba(255,255,255,.10); color: var(--sh-gold); } .ldx-iconbtn:active { transform: scale(.92); } .ldx-iconbtn:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } .ldx-iconbtn__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; border: 2px solid var(--sh-navy); } /* The gold wallet chip. min-width:0 plus a shrinkable number means a seven-figure balance narrows the chip instead of shoving the bell off the right-hand edge of a 320px screen. */ .ldx-wallet { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 5px clamp(6px, 2vw, 11px); border: 2px solid var(--sh-gold); border-radius: 10px; background: rgba(245,196,81,.10); color: var(--sh-on-navy); font-weight: 700; /* Lining figures of equal width: the balance changes on every page load and proportional digits make the pill jitter between widths as it does. */ font-variant-numeric: tabular-nums; font-size: clamp(12px, 3.4vw, 15px); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1); } .ldx-wallet:hover { background: rgba(245,196,81,.20); color: var(--sh-on-navy); } .ldx-wallet:active { transform: scale(.97); } .ldx-wallet:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: 2px; } .ldx-wallet__icon { flex: 0 0 auto; color: var(--sh-gold); font-size: 1em; } /* On the narrowest phones the wallet glyph is the first thing to go. It is decorative -- the amount already begins with ₹ -- and dropping it buys ~18px, which is the difference between showing "₹ 5,000.00" and "₹ 5,00…". A balance the player cannot read is a worse app bar than one without a purse icon in it. */ @media (max-width: 360px) { .ldx-wallet__icon { display: none; } } .ldx-wallet__amt { overflow: hidden; text-overflow: ellipsis; } /* ── 04 Notice strip, chip row, tiles ──────────────────────────────────── */ /* The cream strip under the app bar. It is the operator's site-wide notice (tbl_commission row 2, echoed by after-header.php as .noti), which is exactly what the reference screens show sitting there. It was previously painted flat red with white text -- an alarm colour for a line that is almost always an ordinary announcement -- and carried its own inline background, so nothing in a stylesheet could restyle it. The inline style is gone from the PHP; this is now the only thing describing it. */ .noti { max-width: var(--sh-shell); margin-inline: auto; padding: 7px clamp(10px, 3vw, 14px) !important; background: var(--sh-cream); color: #4d3f1c; border-bottom: 1px solid var(--sh-cream-line); text-align: center; font-size: 13px; font-weight: 700; line-height: 1.35; } /* The commission / referral strip above the app bar. Part of the same piece of chrome, so it is navy too -- ludo-ui.css was painting it in the old purple brand gradient, which read as a third unrelated bar stacked on the first two. */ .top-header { max-width: var(--sh-shell); margin-inline: auto; background: var(--sh-navy-2) !important; color: var(--sh-gold) !important; padding: 5px clamp(10px, 3vw, 14px) !important; font-size: 12px; font-weight: 600; letter-spacing: .2px; } .ldx-chipbar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: var(--sh-shell); margin-inline: auto; min-height: var(--sh-chipbar-h); padding: 4px clamp(10px, 3vw, 14px); background: var(--sh-cream); border-bottom: 1px solid var(--sh-cream-line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ldx-chipbar::-webkit-scrollbar { display: none; } .ldx-chipbar.is-centred { justify-content: center; } .ldx-chip { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-height: 26px; padding: 3px 12px; border: 0; border-radius: 999px; background: transparent; color: #6b5a2e; font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer; } .ldx-chip i { color: var(--sh-gold-deep); font-size: 12px; } .ldx-chip.is-active { background: rgba(224,169,44,.18); color: #4d3f1c; } /* --- the games page ------------------------------------------------------ The grid was two columns at EVERY width, which on the 520px desktop shell made each tile 239px square -- a thumbnail the size of a playing card, so four games filled the screen and the rest were below the fold. The tiles are the smallest thing on the page that has to be recognisable, and 239px is far past the point where more pixels help. auto-fill with a minimum instead: three columns on the desktop shell (~156px) and two on a 360px phone (~165px), from one rule, with no breakpoints to keep in step. The art is square, so the tile is square at every column count. The tiles also used to sit as bare artwork on a white page. Each piece of art carries its own gold frame, so six of them on white read as stickers rather than as a set. They are now cards -- surface, border, radius, name -- and the page behind them is a soft tint rather than #fff, which is what lets the artwork be the brightest thing on screen. */ .ldx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(10px, 2.6vw, 14px); padding: clamp(10px, 3vw, 16px); margin: 0; list-style: none; } .ldx-tile { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; isolation: isolate; background: var(--sh-tile-bg, #fff); border: 1px solid var(--sh-tile-line, #e7e2d4); box-shadow: 0 1px 2px rgba(23,36,77,.05), 0 6px 16px rgba(23,36,77,.06); text-decoration: none; color: inherit; transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms linear; } a.ldx-tile:hover { transform: translateY(-3px); border-color: var(--sh-gold); box-shadow: 0 4px 10px rgba(23,36,77,.10), 0 14px 30px rgba(23,36,77,.14); color: inherit; text-decoration: none; } .ldx-tile:active { transform: scale(.98); } .ldx-tile:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 2px; } /* aspect-ratio, not a fixed height: the tile is square at 150px and at 200px, so the artwork can never letterbox at one width and crop at another. */ .ldx-tile__art { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* The name, which the grid never had. The artwork spells out LITE and RICH in a painted ribbon, but "Ludo Classic" appears on both, so the two live tiles were distinguishable only by a word baked into a picture -- unreadable at 156px and invisible to a screen reader. */ .ldx-tile__name { display: block; padding: 7px 9px 8px; border-top: 1px solid var(--sh-tile-line, #e7e2d4); background: var(--sh-tile-foot, #fffdf7); font-size: clamp(10.5px, 2.7vw, 12px); font-weight: 700; line-height: 1.25; letter-spacing: .01em; color: var(--sh-navy); text-align: center; /* Two lines, then ellipsis: a long name must not make one card taller than its neighbours and knock the row out of alignment. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .ldx-tile__badge { position: absolute; top: 0; left: 0; z-index: 2; padding: 3px 10px 4px; border-radius: 14px 0 10px 0; font-size: clamp(9px, 2.6vw, 11px); font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; color: #17244d; background: var(--sh-gold); } .ldx-tile__badge--trending { background: var(--sh-gold); color: #4a3608; } .ldx-tile__badge--new { background: #34d399; color: #05372a; } .ldx-tile__badge--soon { background: #94a3b8; color: #10182b; } /* Locked tiles are dimmed, not hidden, and are not links. A tile that looks identical to a live one and then does nothing when tapped reads as a bug, so the state is stated on the tile itself. The old treatment was grayscale(.55) brightness(.62), which turned bright artwork muddy brown -- it read as "broken image", not "not yet". A light wash over unfiltered art keeps the artwork legible and still reads clearly as unavailable. */ .ldx-tile.is-locked { cursor: not-allowed; } /* One veil, not two. Fading the art AND laying a white gradient over it washed the colour out twice over and the result read as a low-quality image rather than an unavailable game. A single tint in the page's own colour reads as "behind glass", which is the intended meaning. */ .ldx-tile.is-locked .ldx-tile__art { opacity: .72; } .ldx-tile.is-locked::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(251,248,240,.42); pointer-events: none; } .ldx-tile.is-locked .ldx-tile__name { color: #7c8399; } .ldx-tile.is-locked:hover { transform: none; } .ldx-tile.is-locked:active { transform: none; } /* A pill on the art, not a gradient band across the bottom: the band sat over the part of the artwork carrying the game's title. */ .ldx-tile__lock { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 9px 4px; border-radius: 999px; font-size: clamp(9px, 2.5vw, 10.5px); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(23,36,77,.82); backdrop-filter: blur(2px); } /* --- games page furniture ------------------------------------------------ The page behind the tiles. Not white: the app bar is navy and the chip row is cream, and a stark white slab between them made the chrome look like it belonged to a different design. A warm tint ties the three together and leaves the artwork as the brightest thing on the page. */ .games-tab, .games-header { background: var(--sh-page, #fbf8f0); } /* The tint has to reach the tab bar. Six tiles at three columns are ~420px tall, and the shell is a phone-width column inside a desktop window, so below the last row there were roughly 300 pixels of the BODY's pale lavender sitting between a cream page and a navy tab bar -- three colours in one column, which is what made the page look unfinished rather than short. The column now fills the viewport and carries the page colour down to the bar. Scoped to the games page by a body class: .left-box is the shell on every page in the app, and half of them set their own background inline. */ body.page-games { background: var(--sh-page, #fbf8f0); } body.page-games .left-box { min-height: 100vh; background: var(--sh-page, #fbf8f0); } /* NOT display:flex on .left-box, which was the first attempt and broke the chip row above the grid. ludo-ui.css gives .noti `margin-inline: auto`, and an auto margin on the cross axis cancels a flex container's default stretch -- so the full-width cream bar collapsed to a 67px pill floating in the middle of the page. Painting the column itself needs no flex context at all: the background shows through wherever the content does not reach. */ .games-header { border-bottom: 1px solid var(--sh-tile-line, #e7e2d4); } .games-header h1 { margin: 0; font-size: clamp(17px, 4.4vw, 20px); font-weight: 800; letter-spacing: -.01em; color: var(--sh-navy); } /* A short gold rule under the heading -- the same gold as the app bar's wordmark, so the page reads as one design rather than two. */ .games-header h1::after { content: ""; display: block; width: 30px; height: 3px; margin-top: 5px; border-radius: 2px; background: var(--sh-gold); } /* The GUIDE button was .btn-danger -- Bootstrap red, on a navy and gold page, for a link to a YouTube channel. Red is the strongest signal in this interface and it was spent on the least urgent control on the screen. */ .games-header .btn-danger { background: var(--sh-navy); border-color: var(--sh-navy); color: var(--sh-gold); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 7px 15px; box-shadow: none; } .games-header .btn-danger:hover, .games-header .btn-danger:focus { background: var(--sh-navy-2); border-color: var(--sh-navy-2); color: var(--sh-gold); } .games-header .btn-danger i { margin-right: 4px; } /* ── 05 Tab bar ────────────────────────────────────────────────────────── */ .ldx-tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1040; display: flex; width: 100%; max-width: var(--sh-shell); background: var(--sh-navy); border-top: 1px solid var(--sh-navy-line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 14px rgba(10,16,36,.28); } .ldx-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--sh-tabbar-h); padding: 6px 2px; color: var(--sh-on-navy-dim); font-size: clamp(9px, 2.8vw, 11px); font-weight: 600; line-height: 1.2; text-decoration: none; transition: color 160ms cubic-bezier(.2,.8,.2,1); } .ldx-tab i { font-size: clamp(15px, 4.4vw, 18px); line-height: 1; } .ldx-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ldx-tab:hover { color: #fff; } .ldx-tab.is-active { color: var(--sh-gold); } .ldx-tab.is-locked { opacity: .5; cursor: not-allowed; } .ldx-tab:focus-visible { outline: 2px solid var(--sh-gold); outline-offset: -3px; border-radius: 8px; } /* ── 06 WhatsApp FAB ───────────────────────────────────────────────────── */ /* Anchored to the SHELL's right edge, not the viewport's, so on a desktop browser it sits against the phone column instead of floating alone in the empty space beside it. */ .ldx-wa { position: fixed; z-index: 1035; right: max(14px, calc(50vw - var(--sh-shell) / 2 + 14px)); bottom: calc(var(--sh-tabbar-h) + env(safe-area-inset-bottom) + 14px); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sh-wa); color: #fff; font-size: 24px; text-decoration: none; box-shadow: 0 6px 18px rgba(37,211,102,.42); transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .ldx-wa:hover { transform: scale(1.07); color: #fff; } .ldx-wa:active { transform: scale(.94); } .ldx-wa:focus-visible { outline: 3px solid var(--sh-gold); outline-offset: 3px; } /* ── 05b Dark theme ────────────────────────────────────────────────────── */ /* The navy chrome is already dark and stays exactly as it is. Only the cream strip needs an answer: at #f6efdb it is a bright band across an otherwise dark screen. It is still the highlighted announcement it is meant to be, just at a brightness that belongs on the page around it. Both selectors are needed. [data-theme="dark"] is the explicit choice the toggle writes; the media query covers the default "system" setting, where nothing is stamped on the root element at all -- and it is guarded against [data-theme="light"] so choosing light on a dark OS still wins. */ :root[data-theme="dark"] .noti, :root[data-theme="dark"] .ldx-chipbar { background: #2a2410; color: #f0dfae; border-bottom-color: #453a1a; } :root[data-theme="dark"] .ldx-chip { color: #e3d09a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .noti, :root:not([data-theme="light"]) .ldx-chipbar { background: #2a2410; color: #f0dfae; border-bottom-color: #453a1a; } :root:not([data-theme="light"]) .ldx-chip { color: #e3d09a; } } /* ── 06a KYC status card ───────────────────────────────────────────────── */ /* The "Complete KYC" link sat inside a Bootstrap .btn wrapper AND carried .btn1, which style.css gives `margin-top: 30px`. ludo-ui.css then set every .btn to min-height:44px. The three together pushed the anchor down and out of its own wrapper, so on a phone the words "Complete" and "KYC" printed on top of the button's border with the box drawn around neither. */ .kyc-box .row { align-items: center; row-gap: 8px; } .kyc-box .btn { display: block; min-height: 0; padding: 0; border: 0; } .kyc-box .btn1 { display: inline-block; margin: 0; padding: 8px 14px; white-space: nowrap; line-height: 1.2; } /* ── 06b Stacking order ────────────────────────────────────────────────── */ /* The drawer was authored at 1021 and its scrim at 1020, back when the highest thing on the page was the 1030 app bar and neither had anything below them to clear. The tab bar sits at 1040, so without this the bar and the WhatsApp button paint straight through an open drawer -- and the scrim, whose entire job is to swallow the tap that closes it, ends up underneath both. The whole stack in one place, so the next element added to it has somewhere to look: app bar 1030 WhatsApp 1035 tab bar 1040 scrim 1050 drawer 1060 toasts 2000 (ludo-ui.css) */ .ldx-scrim { z-index: 1050; } #navigation-pane, .navigation-pane { z-index: 1060; } /* ── 06c Contrast: the chrome paints its own text ────────────────────────── Everything in this block exists because two rules in css/style.css reach across the whole application and repaint things dark, and the navy chrome inherits its colour rather than declaring it. Measured on games.php: .ldx-wallet__amt #474444 on navy 2.4:1 the balance .ldx-tab span #474444 on navy 2.4:1 all five tab labels .fa-gift / .fa-user #000000 on navy 1.3:1 Refer and Profile icons .toogle-box #0f172a on navy 1.2:1 the hamburger The two rules are: span { color: #474444; } -- a bare element selector with no scope whatsoever, so every in the application is dark grey. It beats the navy chrome's inherited white because inheritance loses to any rule that matches the element directly, however weak. That one line is why the wallet balance and every tab label were unreadable. .navigation-pane .fa-dice,.fa-headset,.fa-file,.fa-gift,.fa-user, .fa-clock,.fa-wallet { color: black; } -- intended as seven icons inside the drawer. A comma starts a NEW, COMPLETE selector, so `.navigation-pane` qualifies only `.fa-dice`; the other six are `.fa-gift`, `.fa-user`, … unqualified, painting those icons black everywhere in the app. That is fixed at source in style.css, and guarded here too. The fix is not "override the dark colour" but "stop depending on inheritance": a component with a background of its own is responsible for the colour of the text on it. Then no global rule -- this one or the next one somebody writes -- can make it unreadable. Ratios after this block: labels 12.0:1, icons 12.0:1, balance 12.9:1, hamburger 12.0:1. WCAG AA for body text is 4.5:1. */ .ldx-appbar, .ldx-appbar__bar { color: var(--sh-on-navy); } .ldx-appbar .ldx-iconbtn, .ldx-appbar .ldx-iconbtn i, .ldx-appbar .toogle-box, .ldx-appbar .toogle-box i { color: var(--sh-on-navy); } /* The balance is the one number in the bar somebody came to read. */ .ldx-wallet, .ldx-wallet__amt { color: var(--sh-on-navy); } .ldx-wallet i { color: var(--sh-gold); } /* `color: inherit`, not a literal: the tab's own rules already say what an inactive, active and locked tab look like, and repeating those colours here would be a second copy free to disagree with them. */ .ldx-tab i, .ldx-tab span { color: inherit; } /* ── 07 Reduced motion + print ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ldx-tile, .ldx-wallet, .ldx-iconbtn, .ldx-tab, .ldx-wa { transition: none; } .ldx-tile:hover { transform: none; } } @media print { .ldx-appbar, .ldx-chipbar, .ldx-tabbar, .ldx-wa { display: none; } .ldx-tabbar-spacer { height: 0; } }