/* laila-nightlife.com - the public site. Self-contained: no fonts, no third-party anything, so the CSP stays at default-src 'self'. Logical properties throughout so the Hebrew page (dir=rtl) is the same stylesheet, mirrored. Colours are the brand's (docs/BRAND.md, tools/marketing/assets/README.md): deep navy, magenta, violet, cyan. Accessibility (IS 5568 / WCAG 2.0 AA): every text colour below clears 4.5:1 on the surface it sits on; focus is always visible; nothing moves for people who asked it not to; and the a11y-* classes are what the accessibility menu (site.js) toggles on . */ :root { color-scheme: dark; --bg: #0b0d1a; --bg-2: #10132a; --card: #151936; --card-2: #1b2044; --line: #2b3264; --ink: #f4f5fb; --muted: #b9bcd4; /* 9.9:1 on --bg */ --link: #cfc7ff; /* 11:1 on --bg */ --magenta: #ff4fa3; --violet: #8b7cff; --cyan: #35e0ff; --focus: #35e0ff; --radius: 18px; --max: 72rem; --gutter: clamp(1rem, 4vw, 2rem); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans", sans-serif; } /* ---- accessibility menu states (toggled on ) ---------------------- */ html.a11y-contrast { --bg: #000; --bg-2: #000; --card: #0a0a0a; --card-2: #111; --line: #fff; --ink: #fff; --muted: #f2f2f2; --link: #ffe14d; --magenta: #ffe14d; --violet: #ffe14d; --cyan: #ffe14d; } html.a11y-contrast img, html.a11y-contrast .hero::before { filter: contrast(1.15); } html.a11y-contrast .btn-primary { background: #ffe14d; color: #000; } html.a11y-contrast .hero::after { background: rgba(0,0,0,.82); } html.a11y-links a { text-decoration: underline !important; text-underline-offset: .15em; } html.a11y-font { --font: Arial, Helvetica, "Noto Sans Hebrew", sans-serif; } html.a11y-font body { letter-spacing: .01em; word-spacing: .06em; line-height: 1.75; } html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,") 6 4, auto !important; } /* ---- base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font: 1.0625rem/1.6 var(--font); min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration-thickness: from-font; text-underline-offset: .12em; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--magenta); color: #0b0d1a; } h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } h3 { font-size: 1.2rem; font-weight: 700; } p { margin: 0 0 1em; } .muted { color: var(--muted); } .wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; } .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section-alt { background: var(--bg-2); } .eyebrow { display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .75rem; } .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 46rem; } .center { text-align: center; } .center .lede { margin-inline: auto; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- skip link ----------------------------------------------------------- */ .skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--cyan); color: #0b0d1a; font-weight: 700; border-radius: 10px; transition: top .15s; } .skip:focus { top: 1rem; outline-color: #fff; } /* ---- header -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 13, 26, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } html.a11y-contrast .site-header { background: #000; } .site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: .1em; font-size: 1.25rem; } .brand img { width: 2rem; height: 2rem; border-radius: 8px; } .brand .word { background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } html.a11y-contrast .brand .word { background: none; color: #ffe14d; } .site-nav { margin-inline-start: auto; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; } .site-nav a { display: inline-block; padding: .55rem .8rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; } .site-nav a:hover { background: var(--card); text-decoration: none; } .lang-switch { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; } .lang-switch:hover { border-color: var(--cyan); text-decoration: none; } .nav-toggle { display: none; margin-inline-start: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; font: inherit; font-weight: 600; cursor: pointer; } @media (max-width: 62rem) { .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; } .site-nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: .75rem var(--gutter) 1rem; margin: 0; } .site-nav.open { display: block; } .site-nav ul { flex-direction: column; gap: 0; } .site-nav a { display: block; padding: .8rem .6rem; font-size: 1.05rem; } .lang-switch { order: 2; } } /* ---- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: linear-gradient(90deg, var(--magenta), var(--cyan)); color: #0b0d1a; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(21, 25, 54, .6); } .btn-ghost:hover { border-color: var(--cyan); } .btn svg { width: 1.25em; height: 1.25em; flex: none; } .stores { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1rem; } .store { display: inline-flex; align-items: center; gap: .7rem; min-height: 3.4rem; padding: .5rem 1.1rem .5rem .9rem; border-radius: 14px; background: #f4f5fb; color: #0b0d1a; text-decoration: none; border: 1px solid #f4f5fb; } .store:hover { text-decoration: none; background: #fff; } .store svg { width: 1.7rem; height: 1.7rem; flex: none; } .store .l { display: flex; flex-direction: column; line-height: 1.1; } .store .l small { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; } .store .l strong { font-size: 1.1rem; } .store.soon { background: var(--card); color: var(--ink); border-color: var(--line); } .store.soon .badge { margin-inline-start: .35rem; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: var(--magenta); color: #0b0d1a; align-self: center; } /* ---- hero ---------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem); min-height: 78vh; display: flex; align-items: center; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/img/hero-mobile.webp") center / cover no-repeat; } @media (min-width: 60rem) { .hero::before { background-image: url("/img/hero.webp"); } } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,13,26,.82) 0%, rgba(11,13,26,.9) 55%, var(--bg) 100%); } @media (min-width: 60rem) { .hero::after { background: linear-gradient(90deg, rgba(11,13,26,.94) 0%, rgba(11,13,26,.88) 48%, rgba(11,13,26,.55) 100%); } [dir="rtl"] .hero::after { background: linear-gradient(270deg, rgba(11,13,26,.94) 0%, rgba(11,13,26,.88) 48%, rgba(11,13,26,.55) 100%); } } .hero .wrap { display: grid; gap: 3rem; align-items: center; } @media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } } .hero h1 { max-width: 14ch; } .hero h1 .glow { background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } html.a11y-contrast .hero h1 .glow { background: none; color: #ffe14d; } .hero .lede { max-width: 38rem; } .trust { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--muted); font-size: .95rem; } .trust li { display: inline-flex; align-items: center; gap: .45rem; } .trust svg { width: 1.1em; height: 1.1em; color: var(--cyan); } /* the live venue card, drawn in CSS so it is text, not a picture */ .live-card { background: rgba(21, 25, 54, .88); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; max-width: 24rem; margin-inline: auto; box-shadow: 0 30px 80px rgba(0,0,0,.45); } .live-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .live-card .name { margin: 0; font-size: 1.15rem; font-weight: 800; } .live-card .pill { font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: rgba(255, 79, 163, .18); color: #ffb3d6; border: 1px solid rgba(255,79,163,.4); } html.a11y-contrast .live-card .pill { color: #ffe14d; border-color: #ffe14d; background: none; } .live-card .count { font-size: 3rem; font-weight: 800; line-height: 1; margin: .5rem 0 .15rem; } .live-card .count small { font-size: 1rem; font-weight: 600; color: var(--muted); margin-inline-start: .35rem; } .live-card .mix { display: flex; gap: 1rem; font-size: .9rem; color: var(--muted); margin-bottom: .75rem; } .live-card .mix i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-inline-end: .35rem; } .live-card .ages { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .82rem; color: var(--muted); } .live-card .ages li { display: grid; grid-template-columns: 3.25rem 1fr 1.5rem; gap: .6rem; align-items: center; } .live-card .bar { height: .5rem; background: var(--card-2); border-radius: 999px; overflow: hidden; } .live-card .bar b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--magenta)); } .live-card .live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(53,224,255,.6); animation: pulse 1.8s infinite; vertical-align: middle; margin-inline-end: .4rem; } @keyframes pulse { to { box-shadow: 0 0 0 .7rem rgba(53,224,255,0); } } .live-card footer { margin-top: .9rem; font-size: .85rem; color: var(--muted); } /* ---- problem strip ------------------------------------------------------- */ .scenes { display: grid; gap: 1.25rem; margin-top: 2rem; } @media (min-width: 48rem) { .scenes { grid-template-columns: repeat(3, 1fr); } } .scene { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); } .scene img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .scene .cap { padding: 1.1rem 1.25rem 1.25rem; } .scene h3 { margin-bottom: .25rem; } .scene p { margin: 0; color: var(--muted); } /* ---- features ------------------------------------------------------------ */ .features { display: grid; gap: 1.25rem; margin-top: 2.5rem; } @media (min-width: 48rem) { .features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 72rem) { .features { grid-template-columns: repeat(3, 1fr); } } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .feature.wide { grid-column: span 1; } @media (min-width: 48rem) { .feature.wide { grid-column: span 2; } } .feature img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .feature .body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .feature .icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139,124,255,.25), rgba(53,224,255,.2)); color: var(--cyan); margin-bottom: .35rem; } .feature .icon svg { width: 1.4rem; height: 1.4rem; } .feature h3 { margin: 0; } .feature p { margin: 0; color: var(--muted); } .feature .tag { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); border: 1px solid currentColor; border-radius: 999px; padding: .15rem .55rem; } /* ---- screens ------------------------------------------------------------- */ .screens { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1.5rem .25rem 1.25rem; scroll-snap-type: x mandatory; scroll-padding-inline: .25rem; -webkit-overflow-scrolling: touch; } .screens:focus-visible { outline-offset: 0; } .screens figure { flex: 0 0 min(17rem, 78vw); margin: 0; scroll-snap-align: start; } .screens .phone { border-radius: 2rem; padding: .5rem; background: linear-gradient(160deg, #2a3164, #0f1230); border: 1px solid var(--line); box-shadow: 0 25px 50px rgba(0,0,0,.45); } .screens .phone img { border-radius: 1.55rem; width: 100%; } .screens figcaption { margin-top: .85rem; color: var(--muted); font-size: .95rem; } .screens figcaption strong { color: var(--ink); display: block; } .scroll-hint { color: var(--muted); font-size: .9rem; } /* ---- steps --------------------------------------------------------------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.25rem; } @media (min-width: 48rem) { .steps { grid-template-columns: repeat(4, 1fr); } } .steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; } .steps li::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--violet)); color: #0b0d1a; font-weight: 800; margin-bottom: .9rem; } html.a11y-contrast .steps li::before { background: #ffe14d; } .steps h3 { margin-bottom: .3rem; } .steps p { margin: 0; color: var(--muted); } /* ---- plus ---------------------------------------------------------------- */ .plus-grid { display: grid; gap: 2.5rem; margin-top: 2.5rem; align-items: start; } @media (min-width: 60rem) { .plus-grid { grid-template-columns: 1fr 1.1fr; } } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .checklist li { display: flex; gap: .75rem; align-items: flex-start; } .checklist svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--cyan); margin-top: .15rem; } .checklist strong { display: block; } .checklist span { color: var(--muted); } .plans { display: grid; gap: 1rem; } @media (min-width: 40rem) { .plans { grid-template-columns: repeat(3, 1fr); } } .plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .25rem; } .plan.best { border-color: var(--magenta); background: linear-gradient(160deg, rgba(255,79,163,.16), rgba(139,124,255,.12)), var(--card); } .plan .ribbon { position: absolute; top: -.8rem; inset-inline-start: 1.1rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--magenta); color: #0b0d1a; padding: .25rem .6rem; border-radius: 999px; } .plan h3 { margin: 0; font-size: 1.05rem; } .plan .price { font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .35rem; } .plan .price small { display: block; font-size: .95rem; font-weight: 600; color: var(--muted); margin-top: .15rem; } .plan p { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; } .fine { font-size: .9rem; color: var(--muted); margin-top: 1.25rem; } /* ---- venues -------------------------------------------------------------- */ .venues { display: grid; gap: 2rem; align-items: center; margin-top: 2rem; } @media (min-width: 60rem) { .venues { grid-template-columns: 1fr 1fr; } } .venues img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 1px solid var(--line); } .venues ul { padding-inline-start: 1.2rem; color: var(--muted); } .venues li { margin: .35rem 0; } /* ---- safety strip -------------------------------------------------------- */ .safety { display: grid; gap: 1rem; margin-top: 2rem; } @media (min-width: 48rem) { .safety { grid-template-columns: repeat(4, 1fr); } } .safety div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.15rem; } .safety strong { display: block; margin-bottom: .2rem; } .safety span { color: var(--muted); font-size: .95rem; } /* ---- faq ----------------------------------------------------------------- */ .faq { margin-top: 2rem; max-width: 52rem; margin-inline: auto; display: grid; gap: .75rem; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .faq details[open] { border-color: var(--violet); } .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-radius: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--cyan); flex: none; } .faq details[open] summary::after { content: "−"; } .faq .answer { padding: 0 1.2rem 1.2rem; color: var(--muted); } .faq .answer p:last-child { margin-bottom: 0; } /* ---- contact ------------------------------------------------------------- */ .contact { display: grid; gap: 2.5rem; margin-top: 2rem; } @media (min-width: 60rem) { .contact { grid-template-columns: .9fr 1.1fr; } } .contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .contact-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; } .contact-card dt { font-weight: 700; } .contact-card dd { margin: 0; color: var(--muted); } .contact-card .big { font-size: 1.15rem; font-weight: 700; word-break: break-all; } .form { display: grid; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .form .row { display: grid; gap: 1rem; } @media (min-width: 40rem) { .form .row { grid-template-columns: 1fr 1fr; } } .form label { display: grid; gap: .35rem; font-weight: 600; } .form label small { font-weight: 400; color: var(--muted); } .form input, .form select, .form textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; min-height: 3rem; width: 100%; } .form textarea { min-height: 8rem; resize: vertical; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--cyan); outline: 3px solid var(--focus); outline-offset: 1px; } .form [aria-invalid="true"] { border-color: var(--magenta); } .form .error { color: #ffb3d6; font-size: .9rem; margin: 0; } html.a11y-contrast .form .error { color: #ffe14d; } .form .note { font-size: .88rem; color: var(--muted); margin: 0; } .form .status { margin: 0; font-weight: 600; } .form .hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; } .form { position: relative; } /* ---- cities strip -------------------------------------------------------- */ .cities { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(3rem, 7vw, 5rem); } .cities::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/img/skyline.webp") center / cover; } .cities::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11,13,26,.72); } .cities ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; } .cities li { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(21,25,54,.8); font-weight: 600; } /* ---- footer -------------------------------------------------------------- */ .site-footer { margin-top: auto; border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; color: var(--muted); font-size: .93rem; } .site-footer .cols { display: grid; gap: 2rem; } @media (min-width: 48rem) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer h2 { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .75rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .site-footer a { color: var(--link); } .site-footer .legal-line { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; } /* ---- accessibility menu -------------------------------------------------- */ .a11y-btn { position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 90; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid #fff; background: #1d3fbf; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); } .a11y-btn svg { width: 2rem; height: 2rem; } .a11y-btn:hover { background: #2a52e0; } .a11y-panel { position: fixed; inset-inline-start: 1rem; bottom: 5.1rem; z-index: 91; width: min(20rem, calc(100vw - 2rem)); background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-size: 1.05rem; margin: 0 0 .75rem; display: flex; justify-content: space-between; align-items: center; } .a11y-panel .close { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.1rem; } .a11y-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .a11y-panel button.opt { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; font: inherit; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .65rem .85rem; cursor: pointer; text-align: start; min-height: 2.75rem; } .a11y-panel button.opt[aria-pressed="true"] { border-color: var(--cyan); background: rgba(53,224,255,.12); } .a11y-panel button.opt[aria-pressed="true"]::after { content: "✓"; color: var(--cyan); font-weight: 800; } .a11y-panel .links { margin-top: .75rem; font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; } .a11y-panel .reset { margin-top: .5rem; } /* ---- motion -------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } @media print { .site-header, .a11y-btn, .a11y-panel, .hero::before, .hero::after, .cities::before, .cities::after { display: none !important; } html { background: #fff; color: #000; } a { color: #000; } }