/* =========================================================================== NEON NIGHT — app bar + command palette. DEMO ONLY (/_preview/bangkok). Loaded only by resources/views/_preview/bangkok.blade.php. SPECIFICITY NOTE — this file deliberately shares NO class name with the production bar. bangkok.css carries `.sticky-app-bar a` (1,1,1) and `.sticky-app-bar.sticky-app-bar--mobile .appbar-segment a` (1,3,1). Rather than fight those, the new bar is `.em-appbar` / `.em-*`, which none of them can match. No !important is needed anywhere. TOKEN NOTE — bangkok.css declares --accent/--body/--ink inside a the demo page block. The palette is portaled to , outside that scope, so `.em-pop` redeclares every token it uses. Do not "tidy" this by deleting the duplicate block: the sheet renders unstyled without it. =========================================================================== */ .em-appbar, .em-pop{ --em-pink:#FF738D; --em-pink-hi:#FF8098; --em-pink-lo:#FB6683; --em-wine:#9e0f36; --em-accent:#ff375c; --em-deep:#c2153e; --em-ink:#221420; --em-onair:#25e07f; --em-stage:#150a12; --em-stage-hi:#2a1522; --em-body:'Figtree',-apple-system,'Segoe UI',Roboto,sans-serif; --em-display:'Fraunces',Georgia,serif; --em-ease:cubic-bezier(.2,.9,.25,1); } /* =========================== THE BAR ================================== */ .em-appbar{ position:fixed; left:0; right:0; bottom:0; z-index:1050; font-family:var(--em-body); padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,var(--em-pink-hi) 0%,var(--em-pink) 38%,var(--em-pink-lo) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 -10px 28px -8px rgba(60,4,20,.45); } .em-appbar__inner{ display:flex; flex-direction:column; gap:6px; max-width:1400px; margin:0 auto; } /* The country chip is a desktop affordance. Below 992px the palette's default view carries the same destination, so nothing is lost. */ .em-place{display:none} /* --- row 1: segmented control ------------------------------------------- */ /* padding 2px, not 3: Ben wants every horizontal pixel back (2026-08-27) */ .em-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:2px; border-radius:10px; background:rgba(120,8,34,.16); border:1px solid rgba(255,255,255,.26); } .em-seg a{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:30px; padding:4px 8px; min-width:0; border:1px solid rgba(255,255,255,.55); border-radius:6px; font:800 11.5px/1 var(--em-body); letter-spacing:.02em; color:#fff; text-decoration:none; background:transparent; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background .16s ease,border-color .16s ease; } .em-seg a:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.8); color:#fff} .em-seg a.is-active{ background:var(--em-wine); border-color:rgba(255,255,255,.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 10px -2px rgba(90,6,28,.7); } .em-seg__i{font-size:13px;line-height:1} /* --- row 2: true 20 / 60 / 20 ------------------------------------------- */ /* 1fr 3fr 1fr, not percentages: 20%+60%+20% plus two 6px gaps overflows a 360px phone. fr divides what is actually left after the gaps. At 360px: 66.4 / 199.2 / 66.4. */ .em-row2{ display:grid; grid-template-columns:1fr 3fr 1fr; gap:6px; align-items:stretch; } .em-key{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:6px 2px; margin:0; min-width:0; border:1px solid rgba(255,255,255,.46); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)); color:#fff; font-family:var(--em-body); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; transition:background .18s ease,border-color .18s ease,transform .1s ease; } .em-key:hover{ background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.18)); border-color:#fff; color:#fff; } .em-key:active{transform:translateY(1px)} .em-key svg{ width:21px;height:21px;display:block;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } .em-key b{ font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; line-height:1;opacity:.96; } /* the bar shows palette state: the key inverts while its sheet is open */ .em-key[aria-expanded="true"]{background:#fff;color:var(--em-wine);border-color:#fff} /* focus must survive a pink background: #ff375c on #FF738D is invisible */ .em-appbar :focus-visible{ outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px rgba(158,15,54,.6); } /* ===================== THE MONEY BUTTON =============================== */ /* The only dark object on a lit pink rail. Three layers, none of which animate an expensive property: .em-live::before the bloom -> opacity only .em-live__sweep the glint -> transform only, clips ITSELF .em-pip the on-air lamp -> transform + opacity The button itself must NOT get overflow:hidden. Clipping the sweep there also clips the outer bloom and leaves a flat dark rectangle. */ .em-live, .em-pop .em-live{ position:relative; z-index:0; /* stacking context for ::before */ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; padding:7px 10px; min-width:0; /* or the nowrap label steals the side keys' width */ /* same border colour as .em-key: the three row-2 controls read as one family (Ben, 2026-08-27). The neon ::before bloom still separates the money button. */ border:1px solid rgba(255,255,255,.46); border-radius:12px; text-decoration:none; color:#fff; font-family:var(--em-body); -webkit-tap-highlight-color:transparent; background: radial-gradient(130% 150% at 50% -35%, rgba(255,55,92,.46) 0%, rgba(255,55,92,0) 60%), linear-gradient(168deg,var(--em-stage-hi) 0%,var(--em-stage) 56%,#0c0409 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -14px 22px -14px rgba(255,55,92,.9); transition:transform .14s var(--em-ease),border-color .18s ease; } .em-live::before, .em-pop .em-live::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; box-shadow:0 0 20px 2px rgba(255,55,92,.78), 0 0 46px 10px rgba(255,55,92,.30); opacity:.62; } .em-live__sweep, .em-pop .em-live__sweep{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; } .em-live__sweep::before, .em-pop .em-live__sweep::before{ content:''; position:absolute; top:-30%; bottom:-30%; left:0; width:38%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 42%, rgba(255,190,205,.30) 52%, rgba(255,255,255,0) 100%); transform:translateX(-160%) skewX(-16deg); } .em-pip, .em-pop .em-pip{ position:relative; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--em-onair); box-shadow:0 0 8px 1px rgba(37,224,127,.85); } .em-pip::after, .em-pop .em-pip::after{ content:''; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid rgba(37,224,127,.9); opacity:0; } .em-live__top, .em-pop .em-live__top{ display:flex; align-items:center; gap:7px; max-width:100%; font-size:13px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; line-height:1.05; text-shadow:0 0 14px rgba(255,120,150,.55); /* no overflow:hidden here: it clipped the pip's ping ring at the left edge (Ben's screenshot, 2026-08-27). The label is the fixed string "Watch Girls Live", never dynamic, so nothing needs to ellipsize. */ white-space:nowrap; } .em-live__sub, .em-pop .em-live__sub{ max-width:100%; font-size:10.5px; font-weight:600; letter-spacing:.03em; line-height:1; color:rgba(255,214,224,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .em-live:hover, .em-pop .em-live:hover{transform:translateY(-2px); border-color:#fff; color:#fff} /* hover is a STABLE brighter state, not a moving target under the cursor */ .em-live:hover::before, .em-pop .em-live:hover::before{opacity:1; animation:none} .em-live:active, .em-pop .em-live:active{transform:translateY(0)} .em-live:focus-visible, .em-pop .em-live:focus-visible{outline:2px solid #fff; outline-offset:3px} /* --- motion. The glint crosses in the first 38% of a 4.6s cycle and then parks off canvas: a catch of light, not a conveyor belt. ------------ */ @keyframes emBreathe{0%,100%{opacity:.5}50%{opacity:1}} @keyframes emSweep{ 0%{transform:translateX(-160%) skewX(-16deg)} 38%,100%{transform:translateX(330%) skewX(-16deg)} } @keyframes emPipRing{0%{transform:scale(.55);opacity:.9}75%,100%{transform:scale(2.9);opacity:0}} @media (prefers-reduced-motion:no-preference){ .em-live::before, .em-pop .em-live::before{animation:emBreathe 3.6s ease-in-out infinite} .em-live__sweep::before, .em-pop .em-live__sweep::before{animation:emSweep 4.6s cubic-bezier(.4,0,.2,1) infinite} .em-pip::after, .em-pop .em-pip::after{animation:emPipRing 2.4s ease-out infinite} } @media (prefers-reduced-motion:reduce){ .em-live::before, .em-pop .em-live::before{opacity:.85} .em-live__sweep, .em-pop .em-live__sweep{display:none} } /* --- narrow phones ------------------------------------------------------ */ @media (max-width:359.98px){ .em-seg a{font-size:10.5px;padding:4px 5px;gap:4px} .em-seg__i{font-size:12px} .em-live__top{font-size:12px;letter-spacing:.04em;gap:6px} .em-live__sub{font-size:9.5px} .em-key b{font-size:9px} } /* --- desktop: one row, and the country chip comes back ------------------ */ /* bangkok.css sets body{padding-bottom:58px} from 992px, so the bar must collapse to a single ~56px row there or it covers page content. */ @media (min-width:992px){ .em-appbar{padding:6px 12px} .em-appbar__inner{flex-direction:row; align-items:stretch; gap:10px} .em-place{ display:flex; align-items:center; gap:9px; flex:0 0 auto; max-width:210px; padding:6px 12px; border-radius:10px; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.40); background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08)); transition:background .18s ease,border-color .18s ease; } .em-place:hover{background:rgba(255,255,255,.30);border-color:#fff;color:#fff} .em-place__txt{display:flex;flex-direction:column;gap:1px;min-width:0} .em-place__title{ font:800 13.5px/1.1 var(--em-body);letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .em-place__sub{ font:700 9.5px/1 var(--em-body);letter-spacing:.07em;text-transform:uppercase; color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .em-seg{flex:1 1 40%; min-width:0} .em-seg a{font-size:13px;min-height:32px} .em-seg__i{font-size:14px} .em-row2{flex:1 1 46%; min-width:0; gap:8px} .em-key, .em-live{min-height:44px} .em-live__top{font-size:14px} .em-live__sub{font-size:10.5px} .em-key svg{width:19px;height:19px} } /* ======================== THE COMMAND PALETTE ========================== */ /* z-index sits above Tidio's launcher (master.blade.php:1106 loads Tidio, whose widget mounts around 999999999). A modal search must win over a chat bubble, so this clears it deliberately. */ .em-pop{ position:fixed; inset:0; z-index:2147483000; font-family:var(--em-body); color:#fff; } .em-pop[hidden]{display:none} /* While the sheet animates out it is still in the DOM and still hit-testable, so for 240ms after dismissal every tap would land on an invisible scrim instead of the page. That dead zone is invisible in code review and obvious on a phone. */ .em-pop:not(.is-open){pointer-events:none} .em-sr{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .em-pop__scrim{ position:absolute; inset:0; background:rgba(9,3,7,.74); -webkit-backdrop-filter:blur(7px) saturate(1.1); backdrop-filter:blur(7px) saturate(1.1); opacity:0; transition:opacity .22s ease; } .em-pop.is-open .em-pop__scrim{opacity:1} /* MOBILE = FULL-SCREEN TAKEOVER, not a bottom sheet. A bottom sheet sized against visualViewport breaks under third-party keyboards (SwiftKey on iOS reported broken by Ben's colleague, 2026-08-27): the keyboard rises, the viewport numbers lie, and the title collapses onto the field. Anchoring the whole dialog to the TOP of the layout viewport makes the head and the field visible by construction, whatever the keyboard does; only results scroll under it. Desktop (>=768px) keeps the floating dialog. */ .em-pop__sheet{ position:absolute; inset:0; display:flex; flex-direction:column; padding:env(safe-area-inset-top,0px) 0 calc(10px + env(safe-area-inset-bottom,0px)); background: radial-gradient(120% 70% at 50% 0%, rgba(255,55,92,.24) 0%, rgba(255,55,92,0) 58%), linear-gradient(180deg,#20101a 0%,#150a12 34%,#100710 100%); border-top:1px solid rgba(255,140,168,.5); box-shadow:0 -20px 60px -18px rgba(255,55,92,.45), inset 0 -2px 0 rgba(255,255,255,.06); transform:translate3d(0,14px,0); opacity:0; transition:transform .24s var(--em-ease), opacity .2s ease; } .em-pop.is-open .em-pop__sheet{transform:translate3d(0,0,0); opacity:1} /* the one decorative flourish: a lit hairline across the lip */ .em-pop__sheet::before{ content:''; position:absolute; top:-1px; left:12%; right:12%; height:2px; border-radius:2px; background:linear-gradient(90deg,rgba(255,55,92,0),var(--em-accent) 30%,#ffd0da 50%,var(--em-accent) 70%,rgba(255,55,92,0)); box-shadow:0 0 14px 1px rgba(255,55,92,.85); pointer-events:none; } .em-pop__head{ display:flex; align-items:flex-start; gap:12px; flex:0 0 auto; padding:16px 16px 10px; } .em-pop__title{ flex:1 1 auto; margin:0; font:600 19px/1.2 var(--em-display); letter-spacing:-.01em; color:#fff; } .em-pop__x{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; cursor:pointer; padding:0; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); -webkit-appearance:none; appearance:none; transition:background .16s ease,border-color .16s ease,color .16s ease; } .em-pop__x:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff} .em-pop__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .em-field{ position:relative; display:flex; align-items:center; gap:10px; flex:0 0 auto; margin:0 16px 10px; padding:0 12px; height:52px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } .em-field:focus-within{ background:rgba(255,255,255,.09); border-color:rgba(255,120,150,.9); box-shadow:0 0 0 3px rgba(255,55,92,.22), 0 0 22px -4px rgba(255,55,92,.6); } .em-field__i{ width:19px;height:19px;flex:0 0 auto; fill:none;stroke:rgba(255,160,185,.95);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } .em-field input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent; color:#fff; font:600 16.5px/1 var(--em-body); /* >=16px or iOS zooms the whole page on focus */ -webkit-appearance:none; appearance:none; } .em-field input::placeholder{color:rgba(255,255,255,.42);font-weight:500} .em-clear{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; padding:0; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; -webkit-appearance:none; appearance:none; } .em-clear:hover{background:rgba(255,255,255,.28)} .em-clear svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} .em-scroll{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; min-height:0; /* --em-kb (visualViewport keyboard height) pads the scroller so the last result can always scroll clear of the keyboard. Progressive enhancement: with a lying keyboard it degrades to nothing worse than extra scrolling. */ padding:0 10px calc(6px + var(--em-kb,0px)); } /* every nested list too: role="group" wrappers and .em-subs are