/* ============================================================ Intimacy Scenes — Frosted Glass / Glassmorphism Theme iOS 17 inspired. Visually distinct from any prior version. ============================================================ */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ---------- CSS Variables ---------- */ :root{ /* Glass */ --glass-bg:rgba(255,255,255,0.04); --glass-bg2:rgba(255,255,255,0.07); --glass-border:rgba(255,255,255,0.10); --glass-border-hover:rgba(255,255,255,0.18); --glass-blur:20px; --glass-blur-heavy:40px; /* Core palette — cooler tones for glass feel */ --bg:#08060e; --bg2:#0c0a14; --card:rgba(18,16,30,0.65); --card-solid:#161428; --card-hover:rgba(25,22,45,0.75); --border:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.16); /* Accent — Electric violet-pink */ --accent:#c471ed; --accent2:#f64f8c; --accent-subtle:rgba(196,113,237,0.10); --accent-glow:rgba(196,113,237,0.25); /* Gold */ --gold:#e0c88a; --gold2:#f0d89a; --gold-subtle:rgba(224,200,138,0.10); /* Text */ --text:#eeecf0; --text-d:#b8b4bc; --text-m:#7a7680; --text-f:#504c56; /* Alias used by ~44 pages. Nested var() resolves against the element's own scope, so the light-theme and high-contrast overrides of --text-d apply. */ --text-secondary:var(--text-d); /* Semantic */ --green:#34d399; --red:#f87171; --blue:#60a5fa; --yellow:#fbbf24; --purple:#a78bfa; --cyan:#22d3ee; /* Typography */ --font-body:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif; --font-display:'Inter',system-ui,sans-serif; /* Layout */ --nav-h:72px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); /* Nav foreground. --text-d is tuned for body copy sitting on a card; on the header's translucent glass it reads a shade too dim to scan. Derived from --text/--bg with color-mix rather than hard-coded, so the light theme and both high-contrast themes get the right value for free. */ --nav-fg:color-mix(in srgb,var(--text) 80%,var(--bg)); } /* ---------- Animated Gradient Background ---------- */ /* Background photo: couple silhouette under stars (Pexels, free license). https://www.pexels.com/photo/silhouette-of-couple-under-stars-at-night-10087474/ The starry sky is brighter than the older candlelight shot, so the darken gradient sits at .65 to keep light text readable on every page. bg-photo.jpg (candlelight) and bg.svg are kept in images/ as alternatives. */ body{ font-family:var(--font-body); color:var(--text); background-color:var(--bg); background-image:linear-gradient(rgba(8,6,14,.65),rgba(8,6,14,.65)),url('../images/bg-couple.jpg'); background-size:cover; background-position:center; background-attachment:fixed; line-height:1.6; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* Animated mesh gradient orbs */ body::before,body::after{ content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0; filter:blur(120px);opacity:.35; will-change:transform,opacity; } body::before{ width:600px;height:600px; background:radial-gradient(circle,var(--accent) 0%,transparent 70%); top:-200px;left:-100px; animation:orbFloat1 18s ease-in-out infinite; } body::after{ width:500px;height:500px; background:radial-gradient(circle,var(--accent2) 0%,transparent 70%); bottom:-150px;right:-100px; animation:orbFloat2 22s ease-in-out infinite; } /* Extra floating orb via pseudo on body — float + soft opacity breathing */ @keyframes orbFloat1{ 0%,100%{transform:translate(0,0) scale(1);opacity:.30} 33%{transform:translate(80px,60px) scale(1.1);opacity:.42} 66%{transform:translate(-40px,100px) scale(.95);opacity:.26} } @keyframes orbFloat2{ 0%,100%{transform:translate(0,0) scale(1);opacity:.30} 33%{transform:translate(-60px,-80px) scale(1.05);opacity:.40} 66%{transform:translate(70px,-40px) scale(.9);opacity:.24} } /* ---------- Ambient Breathing Glow ---------- A soft central halo that slowly pulses (breathes) over the background photo. Injected once per page by js/layout.js as .bg-glow. opacity+transform only, so the animation stays on the compositor thread. */ .bg-glow{ position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(circle at 50% 42%,rgba(196,113,237,.14),rgba(246,79,140,.07) 42%,transparent 72%); animation:breathGlow 12s ease-in-out infinite; } @keyframes breathGlow{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.12)} } /* ---------- Twinkling stars ---------- Three tiled SVG star fields (240/300/200px tiles, repeat) stacked on the starry background photo, each pulsing opacity on its own cycle so the shimmer feels organic. Injected once per page by js/layout.js as .bg-stars. Faint on purpose — 1-2px dots, low effective opacity. */ .bg-stars{ position:fixed;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Ccircle%20cx=%22120%22%20cy=%22226%22%20r=%221.1%22%20fill=%22%23fff%22%20opacity=%220.87%22%2F%3E%3Ccircle%20cx=%22124%22%20cy=%22120%22%20r=%221.1%22%20fill=%22%23fff%22%20opacity=%220.71%22%2F%3E%3Ccircle%20cx=%2252%22%20cy=%22210%22%20r=%221.1%22%20fill=%22%23fff%22%20opacity=%220.73%22%2F%3E%3Ccircle%20cx=%22208%22%20cy=%2252%22%20r=%220.8%22%20fill=%22%23fff%22%20opacity=%220.59%22%2F%3E%3Ccircle%20cx=%2228%22%20cy=%22142%22%20r=%221.3%22%20fill=%22%23fff%22%20opacity=%220.76%22%2F%3E%3Ccircle%20cx=%2215%22%20cy=%22157%22%20r=%221.5%22%20fill=%22%23fff%22%20opacity=%220.88%22%2F%3E%3Ccircle%20cx=%22172%22%20cy=%22194%22%20r=%221.2%22%20fill=%22%23fff%22%20opacity=%220.52%22%2F%3E%3C%2Fsvg%3E"); background-size:240px 240px; animation:twinkleA 5.5s ease-in-out infinite; } .bg-stars::before{ content:'';position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Ccircle%20cx=%22204%22%20cy=%2279%22%20r=%221.1%22%20fill=%22%23fff%22%20opacity=%220.38%22%2F%3E%3Ccircle%20cx=%22156%22%20cy=%2283%22%20r=%220.9%22%20fill=%22%23fff%22%20opacity=%220.56%22%2F%3E%3Ccircle%20cx=%2238%22%20cy=%22190%22%20r=%220.7%22%20fill=%22%23fff%22%20opacity=%220.53%22%2F%3E%3Ccircle%20cx=%2261%22%20cy=%22163%22%20r=%220.9%22%20fill=%22%23fff%22%20opacity=%220.36%22%2F%3E%3Ccircle%20cx=%2226%22%20cy=%22186%22%20r=%220.9%22%20fill=%22%23fff%22%20opacity=%220.36%22%2F%3E%3Ccircle%20cx=%22165%22%20cy=%22192%22%20r=%220.9%22%20fill=%22%23fff%22%20opacity=%220.66%22%2F%3E%3C%2Fsvg%3E"); background-size:300px 300px; animation:twinkleB 7.5s ease-in-out infinite; } .bg-stars::after{ content:'';position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Ccircle%20cx=%22179%22%20cy=%22160%22%20r=%220.5%22%20fill=%22%23fff%22%20opacity=%220.44%22%2F%3E%3Ccircle%20cx=%22220%22%20cy=%22196%22%20r=%220.9%22%20fill=%22%23fff%22%20opacity=%220.4%22%2F%3E%3Ccircle%20cx=%22166%22%20cy=%2299%22%20r=%220.7%22%20fill=%22%23fff%22%20opacity=%220.49%22%2F%3E%3Ccircle%20cx=%22179%22%20cy=%22121%22%20r=%220.8%22%20fill=%22%23fff%22%20opacity=%220.33%22%2F%3E%3Ccircle%20cx=%22101%22%20cy=%22193%22%20r=%220.7%22%20fill=%22%23fff%22%20opacity=%220.29%22%2F%3E%3Ccircle%20cx=%22209%22%20cy=%22219%22%20r=%220.5%22%20fill=%22%23fff%22%20opacity=%220.37%22%2F%3E%3Ccircle%20cx=%22144%22%20cy=%2278%22%20r=%221.0%22%20fill=%22%23fff%22%20opacity=%220.44%22%2F%3E%3Ccircle%20cx=%22115%22%20cy=%22216%22%20r=%220.8%22%20fill=%22%23fff%22%20opacity=%220.36%22%2F%3E%3C%2Fsvg%3E"); background-size:200px 200px; animation:twinkleC 10s ease-in-out infinite; } @keyframes twinkleA{ 0%,100%{opacity:.45} 30%{opacity:.85} 55%{opacity:.4} 80%{opacity:.7} } @keyframes twinkleB{ 0%,100%{opacity:.35} 35%{opacity:.75} 60%{opacity:.3} 85%{opacity:.6} } @keyframes twinkleC{ 0%,100%{opacity:.25} 40%{opacity:.55} 65%{opacity:.22} 90%{opacity:.45} } /* ---------- Nav — Frosted Glass ---------- */ /* The header holds six menus (Games / Talk & Quiz / Scripts / Learn / Tools / Blog), a Premium button and the utility cluster. Everything here exists to keep that on ONE row: it used to be `flex-wrap:wrap`, and because .nav has a fixed height the wrapped second row simply spilled out over the hero. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:1000; height:var(--nav-h); background:rgba(8,6,14,0.62); backdrop-filter:blur(var(--glass-blur-heavy)) saturate(180%); -webkit-backdrop-filter:blur(var(--glass-blur-heavy)) saturate(180%); border-bottom:1px solid rgba(255,255,255,0.07); box-shadow:inset 0 1px 0 rgba(255,255,255,0.03),0 10px 30px rgba(0,0,0,0.30); transition:transform .35s cubic-bezier(.4,0,.2,1),background .3s; } .nav.hidden{transform:translateY(-100%)} .nav-inner{ max-width:1200px;margin:0 auto;height:100%;padding:0 1.25rem; display:flex;align-items:center;gap:.9rem; } .nav-logo{ font-weight:700;font-size:1.02rem;color:var(--text); text-decoration:none;white-space:nowrap;letter-spacing:-.03em; flex:none; } /* Gradient wordmark. The gradient lives on the inner span, NOT on .nav-logo: background-clip:text + -webkit-text-fill-color:transparent turns every glyph into a silhouette of the gradient, which paints the 🔥 as a flat blob. The emoji has to stay outside it. Guarded too, because on a browser without background-clip:text the transparent fill would erase the text outright. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .nav-logo-t{ background:linear-gradient(100deg,var(--text) 30%,var(--accent) 78%,var(--accent2)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } } .nav-links{ display:flex;gap:2px;align-items:center; /* nowrap is deliberate — see the header comment. Below 1024px the whole bar collapses into the drawer instead of trying to fit. */ flex-wrap:nowrap; margin-left:auto;font-size:.84rem;min-width:0; } .nav-links>a{ padding:.4rem .6rem;border-radius:9px;color:var(--nav-fg); text-decoration:none;transition:color .18s,background .18s;white-space:nowrap; } .nav-links>a:hover{color:var(--text);background:rgba(255,255,255,0.07)} .nav-links>a.active{color:var(--accent);background:var(--accent-subtle)} /* The six menus are plain links to their homepage section (or blog.html) — see js/layout.js. They are styled by .nav-links>a above; there is no dropdown panel any more. */ .nav-toggle{ display:none;background:none;border:none;color:var(--text); cursor:pointer;padding:8px;border-radius:8px; } /* ---------- Nav utility cluster ---------- Theme / contrast / sound / privacy, plus the daily + search shortcuts, the points badge, the streak pill, the free-play pill and the Premium button. It gets its own left rule so the six menus read as one block and the utilities as another. */ .nav-tools{ display:flex;align-items:center;gap:1px;flex-wrap:nowrap; margin-left:.35rem;padding-left:.5rem; border-left:1px solid rgba(255,255,255,.09); } /* Explicit order. #langSwitch, #streakPill, #playPill and #installBtn are injected by OTHER scripts via insertBefore(firstChild), so DOM order depends on which script won the load race — `order` is what makes the row stable. */ .nav-tools>*{order:50} #navSearch{order:11} #streakPill{order:20} #playPill{order:21} #navPoints{order:22} #langSwitch{order:30} #installBtn{order:40} #themeToggle{order:41} #hcToggle{order:42} #soundToggle{order:43} #privacyBtn{order:44} /* The Premium button is the one thing in here we want clicked, so it sits last and alone on the right. */ #navPremium{order:90} .nav-cta{ display:inline-flex;align-items:center;gap:.32rem; margin-left:.35rem;padding:.36rem .6rem;border-radius:999px; font-size:.72rem;font-weight:700;letter-spacing:.01em; /* Dark ink on the bright gradient: white on #c471ed/#f64f8c only reaches ~2.6:1, which fails at this size. */ color:#1b0a24;text-decoration:none;white-space:nowrap; background:linear-gradient(120deg,var(--accent),var(--accent2)); box-shadow:0 4px 16px var(--accent-glow); transition:transform .18s,box-shadow .18s,filter .18s; } .nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 6px 22px var(--accent-glow)} .nav-cta:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .nav-points{ font-size:.76rem;padding:.3rem .6rem;border-radius:999px; background:var(--gold-subtle);color:var(--gold);font-weight:700; white-space:nowrap; } /* "⭐ 0" tells a first-time visitor nothing and costs ~52px in a row that has to hold six menus plus the Premium button. js/layout.js toggles this. */ .nav-points.is-zero{display:none} /* ---------- Favorite hearts ---------- Small round heart button placed on content cards (js/fav.js). Anchor to a positioned card with position:relative. */ .fav-btn{ position:absolute;top:.75rem;right:.75rem;z-index:2; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid var(--glass-border); color:var(--text-d);cursor:pointer;font-size:.95rem;line-height:1; display:flex;align-items:center;justify-content:center; transition:all .2s; } .fav-btn:hover{background:rgba(255,255,255,.14);transform:scale(1.1)} .fav-btn.faved{background:var(--accent-subtle);border-color:rgba(196,113,237,.35)} /* ---------- Nav icon button (theme / contrast / sound / privacy / daily / search) ---------- */ .nav-icon-btn{ background:none;border:none;cursor:pointer; font-size:.9rem;line-height:1;padding:.26rem .3rem;border-radius:9px; color:var(--nav-fg);opacity:.72;transition:opacity .18s,background .18s; display:inline-flex;align-items:center;justify-content:center; text-decoration:none; } .nav-icon-btn:hover{opacity:1;background:rgba(255,255,255,.07)} /* ---------- Privacy / discreet mode ---------- One click (or the P key) blurs everything except the nav, footer and the overlay itself — a quick screen-cover for public moments. */ .privacy-overlay{ position:fixed;inset:0;z-index:9999;display:none; flex-direction:column;align-items:center;justify-content:center;gap:.6rem; background:radial-gradient(circle at 50% 45%,rgba(8,6,14,.55),rgba(8,6,14,.92) 70%); pointer-events:none; } .privacy-overlay.on{display:flex} .privacy-overlay span{font-size:4rem} .privacy-overlay p{color:var(--text-d);font-size:.85rem} .privacy-overlay b{color:var(--text)} body.privacy-on > *:not(.nav):not(.footer):not(.privacy-overlay){ filter:blur(30px) saturate(.5);transition:filter .3s; } /* ---------- Page Hero ---------- */ .page-hero{ padding:calc(var(--nav-h) + 2rem) 1.25rem 2rem;text-align:center; position:relative;z-index:1; } .page-hero h1{ font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text;letter-spacing:-.03em; } .page-hero p{color:var(--text-d);margin-top:.5rem;font-size:1.05rem} /* ---------- Container ---------- */ .container{ max-width:1200px;margin:0 auto;padding:0 1.25rem; position:relative;z-index:1; } /* ---------- Glass Card ---------- */ .card,.section-card{ background:var(--card); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); border:1px solid var(--glass-border); border-radius:16px; transition:all .3s cubic-bezier(.4,0,.2,1); } .card:hover,.section-card:hover{ border-color:var(--glass-border-hover); background:var(--card-hover); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05); } /* ---------- Glass Button ---------- */ .btn-accent{ padding:.7rem 1.6rem;border-radius:12px;border:none; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;font-weight:600;cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); box-shadow:0 4px 20px rgba(196,113,237,.3); } .btn-accent:hover{ transform:translateY(-2px); box-shadow:0 8px 32px rgba(196,113,237,.45); } .btn-ghost{ padding:.7rem 1.6rem;border-radius:12px; border:1px solid var(--glass-border);background:rgba(255,255,255,.04); color:var(--text);cursor:pointer;font-weight:600; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:all .25s; } .btn-ghost:hover{ border-color:var(--accent);color:var(--accent); background:var(--accent-subtle); } /* ---------- Glass Grid ---------- */ .grid,.section-grid{ display:grid;gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } /* ---------- Glass Link Card (index page) ---------- */ a.link-card{ display:block;padding:1.5rem;border-radius:16px; background:var(--card); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); border:1px solid var(--glass-border); text-decoration:none;color:inherit; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative;overflow:hidden; } a.link-card::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(196,113,237,.06),rgba(246,79,140,.06)); opacity:0;transition:opacity .3s; } a.link-card:hover{ border-color:var(--glass-border-hover); transform:translateY(-3px); box-shadow:0 12px 40px rgba(196,113,237,.15),0 0 0 1px rgba(255,255,255,.05); } a.link-card:hover::before{opacity:1} a.link-card .icon{font-size:2rem;margin-bottom:.75rem;position:relative;z-index:1} a.link-card h3{margin:0 0 .3rem;font-size:1rem;font-weight:700;position:relative;z-index:1} a.link-card p{margin:0;font-size:.9rem;color:var(--text-d);position:relative;z-index:1} /* ---------- Semantic HTML helpers ---------- */ main{position:relative;z-index:1} section{position:relative} article{position:relative} /* Focus-visible outline for keyboard navigation */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } a:focus-visible,button:focus-visible{ box-shadow:0 0 0 3px rgba(196,113,237,.25); } /* Skip-to-content link (accessibility) */ .skip-link{ position:absolute;top:-100px;left:50%;transform:translateX(-50%); padding:.75rem 1.5rem;border-radius:0 0 12px 12px; background:var(--accent);color:#fff;font-weight:600;font-size:.9rem; text-decoration:none;z-index:10000;transition:top .2s; } .skip-link:focus{top:0} /* Visually hidden but screen-reader accessible */ .sr-only{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---------- Footer ---------- */ .footer{ padding:2rem;text-align:center;color:var(--text-m);font-size:.82rem; border-top:1px solid var(--border); background:rgba(8,6,14,.8); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); position:relative;z-index:1; } .footer a{color:var(--text-d);text-decoration:none} .footer a:hover{color:var(--accent)} /* Newsletter opt-in (wired in js/layout.js) */ .foot-sub{max-width:420px;margin:0 auto 1.25rem} .foot-sub label{display:block;font-size:.85rem;color:var(--text-m);margin-bottom:.5rem} .foot-sub-row{display:flex;gap:.5rem} .foot-sub-row input{ flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px; color:var(--text);padding:.6rem .75rem;font-size:.9rem;font-family:inherit; } .foot-sub-row button{ padding:.6rem 1.1rem;border-radius:10px;border:none;cursor:pointer;font-family:inherit; font-size:.9rem;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); } .foot-sub-msg{display:block;font-size:.78rem;margin-top:.4rem;min-height:1em;color:var(--text-f)} /* ---------- Animations ---------- */ @keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn{ from{opacity:0}to{opacity:1} } @keyframes glow{ 0%,100%{box-shadow:0 0 20px rgba(196,113,237,.2)} 50%{box-shadow:0 0 40px rgba(196,113,237,.35)} } @keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} } /* ---------- Toast ---------- */ .toast{ position:fixed;top:calc(var(--nav-h) + 1rem);right:1rem;z-index:10000; padding:.8rem 1.5rem;border-radius:12px;font-size:.9rem;font-weight:500; background:var(--card);border:1px solid var(--glass-border); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); color:var(--text); animation:slideInRight .3s ease,slideOutRight .3s ease 2.7s; box-shadow:0 8px 32px rgba(0,0,0,.4); } .toast.success{border-color:rgba(52,211,153,.3);color:var(--green)} .toast.error{border-color:rgba(248,113,113,.3);color:var(--red)} .toast.info{border-color:rgba(96,165,250,.3);color:var(--blue)} @keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}} /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)} /* ---------- Selection ---------- */ ::selection{background:rgba(196,113,237,.3);color:#fff} /* ---------- Forms (glass inputs) ---------- */ input,textarea,select{ background:rgba(255,255,255,.04); border:1px solid var(--glass-border); border-radius:10px;padding:.7rem 1rem;color:var(--text); font-family:var(--font-body);font-size:.95rem; transition:all .25s;outline:none; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } input:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(196,113,237,.15); background:rgba(255,255,255,.06); } /* ---------- Badge / Tag ---------- */ .badge{ display:inline-block;padding:.2rem .7rem;border-radius:99px; font-size:.72rem;font-weight:600; background:var(--accent-subtle);color:var(--accent); } /* ---------- Divider ---------- */ .divider{ height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent); margin:2rem 0; } /* ---------- Responsive ---------- */ @media(max-width:900px){ .page-hero h1{font-size:1.5rem} .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} } /* ---------- Nav → drawer ---------- Six menus plus the Premium button plus the utility cluster measure ~1125px of content, and .nav-inner caps at 1200px (it matches .container so the logo lines up with the page). Measured: 77px of slack at 1280, 35px on a game page that also carries the free-play pill and the PWA install button. Below 1280 it would wrap (it used to spill a second row over the hero) or cram, so the whole thing becomes a slide-in drawer instead. Kept separate from the 768px block so the rest of that breakpoint's mobile tuning is unaffected. */ @media(max-width:1279px){ /* Reduce heavy blur on the nav — 20px is enough for the glass feel */ .nav{backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)} .nav-toggle{display:block;margin-left:auto;position:relative;z-index:1002} /* The drawer (z-index 1001, 300px, pinned right) covers the hamburger at every width this breakpoint applies to, so without the z-index above there was no way to close it again. It reads as a ✕ while open — body.drawer-open is already toggled by the same click handler in js/layout.js. */ body.drawer-open .nav-toggle svg{display:none} body.drawer-open .nav-toggle::before{content:'✕';font-size:1.25rem;line-height:1} .nav-links{ /* top/right resolve against the viewport (the nav is fixed at 0,0 and spans the full width), but `bottom:0` does NOT: .nav carries backdrop-filter, which makes it the containing block for position:fixed descendants, so bottom resolved against the 72px bar and the drawer rendered as a 112px stub. An explicit viewport height sidesteps the whole question. js/layout.js also refuses to slide the nav away while this is open. */ position:fixed;top:0;right:0;width:300px; height:100vh;height:100dvh; background:rgba(8,6,14,.96); backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px); flex-direction:column;align-items:flex-start;padding:5rem 1.5rem 2rem; gap:2px;overflow-y:auto; transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1); border-left:1px solid var(--glass-border); z-index:1001; } .nav-links.open{transform:translateX(0)} .nav-links>a{ width:100%;padding:.7rem .8rem;border-radius:10px; font-size:.95rem; } .nav-links>a:hover,.nav-links>a.active{background:rgba(255,255,255,.06)} /* The utility cluster becomes its own rule-separated row at the drawer foot. order:99 puts it after the six section links (which default to order:0). */ .nav-tools{ order:99;flex-wrap:wrap;width:100%; margin:.9rem 0 0;padding:.9rem 0 0; border-left:0;border-top:1px solid var(--glass-border); } .nav-icon-btn{padding:.5rem;font-size:1.05rem} .nav-points{margin-top:0} .nav-cta{margin-left:0} } @media(max-width:768px){ /* Fixed backgrounds can jank on mobile — let the image scroll with content */ body{background-attachment:scroll} /* Disable expensive floating orbs on mobile for GPU savings */ body::before,body::after{display:none} .grid{grid-template-columns:1fr} .container{padding:0 1rem} } @media(max-width:520px){ .nav-inner{padding:0 .75rem} .page-hero{padding:calc(var(--nav-h) + 1.25rem) 1rem 1.5rem} .page-hero h1{font-size:1.3rem} /* Narrow screens keep the desktop type scale. These three rules used to shrink the copy a notch below desktop (.page-hero p 16.8 -> 14.4, a.link-card h3 16 -> 14.4, a.link-card p 13.6 -> 12.48), which made the phone the smallest-reading device on the site — backwards, since a phone is held closer. */ .page-hero p{font-size:1.05rem} a.link-card{padding:1.1rem;border-radius:14px} a.link-card .icon{font-size:1.5rem} a.link-card h3{font-size:1rem} a.link-card p{font-size:.9rem} } /* ---------- Mobile ergonomics ---------- Two floors the layout above used to break on phones and small tablets. 1. Touch targets >= 44px (WCAG 2.5.5 / Apple HIG). Measured at 390px before this block existed: .nav-icon-btn 32x27, .nav-logo 155x28, .nav-toggle 40x43, .fav-btn 34x34 — every one of them a control the thumb has to hit. min-width/min-height lifts them without changing their visual weight. 2. Card grids. .grid collapsed to a single column at <=768px, which made index.html 11.9 screens tall; its five grids were 8,116 of the page's 10,050px. Two columns at phone and small-tablet widths takes that back down ~30-43%. The cards are icon + title + one short line, so they stay readable at half width. !important is needed because several .grid elements carry an inline style attribute, and inline declarations outrank this stylesheet. */ @media(max-width:768px){ /* --- 0. the drawer was unusable --- .nav-links inherits `flex-wrap:wrap` from the desktop rule (line ~192) and the mobile block only flips it to `column`, so the column wrapped its items into extra COLUMNS that ran off-screen: measured scrollWidth 1211px against clientWidth 280px, i.e. only "Games" (and a sliver of "Scripts") was reachable — the other five entries and the four tool buttons sat ~930px to the right with no way to scroll to them. The panel also collapsed to 112px tall instead of the viewport. Reset the wrap and give it an explicit height (dvh so mobile browser chrome does not clip it). */ .nav-links{flex-wrap:nowrap;height:100vh;height:100dvh} .nav-logo{display:inline-flex;align-items:center;min-height:44px} .nav-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .nav-icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .fav-btn{width:44px;height:44px} .btn-accent,.btn-ghost{min-height:44px} .grid,.section-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.75rem!important} a.link-card{padding:1rem .85rem;border-radius:14px} a.link-card .icon{font-size:1.5rem;margin-bottom:.5rem} } /* ---------- Safe Area ---------- */ @supports(padding:env(safe-area-inset-top)){ .nav{top:0;padding-top:var(--safe-top)} .footer{padding-bottom:calc(1rem + var(--safe-bottom))} } /* ---------- No-scroll when drawer open ---------- */ body.drawer-open{overflow:hidden} /* ---------- Card shimmer effect on hover ---------- */ a.link-card::after{ content:'';position:absolute;top:-50%;left:-50%; width:200%;height:200%; background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%); transition:transform .6s;transform:translateX(-100%) rotate(0); } a.link-card:hover::after{transform:translateX(30%) rotate(0)} /* ---------- Reduced motion ---------- Respect prefers-reduced-motion: ambient infinite animations (orbs, breathing glow) are frozen as static layers so the atmosphere stays but nothing moves; all remaining animation/transition motion collapses to an instant .01ms. Toast delay is untouched, so it still appears/disappears on schedule. */ @media (prefers-reduced-motion: reduce){ body::before,body::after{animation:none} .bg-glow{animation:none;opacity:.75} .bg-stars,.bg-stars::before,.bg-stars::after{animation:none;opacity:.4} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } /* ---------- Print ---------- */ @media print{ .nav,.footer,.bg-glow,.bg-stars,.btn-accent,.btn-ghost,.nav-toggle{display:none!important} body::before,body::after{display:none!important} body{background:#fff;color:#000} } .fav-btn { position: relative; z-index: 5; } .mood-detail, .ld-card, .q36-card, .as-card, .ll-card { position: relative; } /* ============================================================ Nav toggles: theme + high contrast The buttons themselves are injected by js/layout.js (#themeToggle, #hcToggle) and wired by js/theme.js, which mirrors the state onto and . Everything below is driven by those two attributes — no JS reaches into styles. ============================================================ */ .nav-icon-btn[aria-pressed="true"]{ opacity:1;background:var(--accent-subtle);color:var(--accent); } /* ---------- Light theme ---------- Same layout, same glass language, inverted luminance. Accent colours are darkened (violet #8b2fc9 / rose #d61f6a) so they keep >=4.5:1 against the light surfaces, and the background photo is veiled harder (.86) because a light overlay over a night shot is far weaker than the dark one. */ :root[data-theme="light"]{ /* Glass */ --glass-bg:rgba(255,255,255,0.55); --glass-bg2:rgba(255,255,255,0.72); --glass-border:rgba(74,58,96,0.16); --glass-border-hover:rgba(74,58,96,0.30); /* Core palette */ --bg:#f4f0f7; --bg2:#ebe5f2; --card:rgba(255,255,255,0.72); --card-solid:#ffffff; --card-hover:rgba(255,255,255,0.90); --border:rgba(74,58,96,0.14); --border-hover:rgba(74,58,96,0.28); /* Accent */ --accent:#8b2fc9; --accent2:#d61f6a; --accent-subtle:rgba(139,47,201,0.10); --accent-glow:rgba(139,47,201,0.22); /* Gold */ --gold:#7d6216; --gold2:#9a7a24; --gold-subtle:rgba(125,98,22,0.12); /* Text */ --text:#1c1526; --text-d:#4a4256; --text-m:#6b6377; --text-f:#8a8295; /* Semantic — darkened so they stay readable on white glass */ --green:#047857; --red:#b91c1c; --blue:#1d4ed8; --yellow:#a16207; --purple:#6d28d9; --cyan:#0e7490; } :root[data-theme="light"] body{ background-color:var(--bg); background-image:linear-gradient(rgba(244,240,247,.86),rgba(244,240,247,.86)),url('../images/bg-couple.jpg'); color:var(--text); } /* The ambient orbs glow pink-on-dark; on light surfaces they read as muddy smudges, so dial them right back and drop the white star field entirely. */ :root[data-theme="light"] body::before, :root[data-theme="light"] body::after{opacity:.12} :root[data-theme="light"] .bg-stars{display:none} :root[data-theme="light"] .bg-glow{ background:radial-gradient(circle at 50% 42%,rgba(139,47,201,.10),rgba(214,31,106,.06) 42%,transparent 72%); } :root[data-theme="light"] .nav{ background:rgba(255,255,255,0.72); border-bottom-color:rgba(74,58,96,0.14); } :root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-links a.active, :root[data-theme="light"] .nav-icon-btn:hover, :root[data-theme="light"] .fav-btn:hover{background:rgba(74,58,96,0.08)} :root[data-theme="light"] .fav-btn{background:rgba(74,58,96,0.08)} :root[data-theme="light"] .footer{ background:rgba(255,255,255,0.82); border-top-color:var(--border); } :root[data-theme="light"] .card:hover, :root[data-theme="light"] .section-card:hover{ box-shadow:0 8px 32px rgba(30,20,50,0.14),0 0 0 1px rgba(255,255,255,0.6); } :root[data-theme="light"] a.link-card:hover{ box-shadow:0 12px 40px rgba(139,47,201,0.16),0 0 0 1px rgba(255,255,255,0.6); } :root[data-theme="light"] a.link-card::after{ background:linear-gradient(45deg,transparent 40%,rgba(74,58,96,.05) 50%,transparent 60%); } :root[data-theme="light"] .btn-ghost{background:rgba(255,255,255,0.6)} :root[data-theme="light"] .btn-ghost:hover{background:var(--accent-subtle)} :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select{background:rgba(255,255,255,0.75)} :root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus{background:#fff} :root[data-theme="light"] .toast{box-shadow:0 8px 32px rgba(30,20,50,0.18)} :root[data-theme="light"] .privacy-overlay{ background:radial-gradient(circle at 50% 45%,rgba(244,240,247,.60),rgba(244,240,247,.94) 70%); } :root[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(74,58,96,0.22)} :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(74,58,96,0.34)} :root[data-theme="light"] ::selection{background:rgba(139,47,201,0.22);color:#1c1526} /* The mobile drawer is a full-height panel painted with a hard-coded dark colour, so it needs its own light treatment. */ @media(max-width:768px){ :root[data-theme="light"] .nav-links{background:rgba(255,255,255,0.97)} :root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-links a.active{background:rgba(74,58,96,0.08)} } /* ---------- High contrast ---------- A real accessibility mode, not a brightness tweak: the backdrop photo, orbs, stars and glow are removed; every backdrop-filter is disabled (blur destroys contrast and costs GPU); surfaces become opaque; and borders go to full-strength on-colour so the glass edges are still visible. Colours are picked per theme (dark here, light in the next block) so the mode is available from either starting point. */ :root[data-hc="on"]{ --glass-blur:0px; --glass-blur-heavy:0px; /* HC canvas + ink, overridden for light in the next rule. */ --hc-bg:#000000; --hc-fg:#ffffff; --hc-fg-dim:#e8e8e8; --hc-line:#ffffff; --bg:var(--hc-bg); --bg2:var(--hc-bg); --card:var(--hc-bg); --card-solid:var(--hc-bg); --card-hover:var(--hc-bg); --text:var(--hc-fg); --text-d:var(--hc-fg-dim); --text-m:var(--hc-fg-dim); --text-f:var(--hc-fg-dim); --border:var(--hc-line); --border-hover:var(--hc-line); --glass-border:var(--hc-line); --glass-border-hover:var(--hc-line); /* Bright accents read on black. */ --accent:#e2a8ff; --accent2:#ff9ec4; --accent-subtle:rgba(226,168,255,0.16); --gold:#f2dfa8; --gold2:#f7e8bd; /* Semantic colours need to be light on a black canvas. */ --green:#86efac; --red:#fca5a5; --blue:#93c5fd; --yellow:#fde047; --purple:#c4b5fd; --cyan:#67e8f9; } :root[data-theme="light"][data-hc="on"]{ --hc-bg:#ffffff; --hc-fg:#000000; --hc-fg-dim:#1a1a1a; --hc-line:#000000; /* Deep accents read on white. */ --accent:#5c1591; --accent2:#a8073f; --accent-subtle:rgba(92,21,145,0.12); --gold:#5c4708; --gold2:#755b0f; } /* Kill the atmosphere. */ :root[data-hc="on"] body{background-image:none} :root[data-hc="on"] body::before, :root[data-hc="on"] body::after, :root[data-hc="on"] .bg-glow, :root[data-hc="on"] .bg-stars{display:none!important} /* Flatten every frosted surface to an opaque one. */ :root[data-hc="on"] .nav, :root[data-hc="on"] .footer, :root[data-hc="on"] .card, :root[data-hc="on"] .section-card, :root[data-hc="on"] a.link-card, :root[data-hc="on"] .toast, :root[data-hc="on"] .nav-links, :root[data-hc="on"] input, :root[data-hc="on"] textarea, :root[data-hc="on"] select{ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; background:var(--hc-bg); } :root[data-hc="on"] .card, :root[data-hc="on"] .section-card, :root[data-hc="on"] a.link-card, :root[data-hc="on"] .toast, :root[data-hc="on"] input, :root[data-hc="on"] textarea, :root[data-hc="on"] select{ border-color:var(--hc-line); } :root[data-hc="on"] .card:hover, :root[data-hc="on"] .section-card:hover, :root[data-hc="on"] a.link-card:hover{ background:var(--hc-bg); box-shadow:0 0 0 2px var(--hc-line); } :root[data-hc="on"] .nav-links a:hover, :root[data-hc="on"] .nav-links a.active, :root[data-hc="on"] .nav-icon-btn:hover, :root[data-hc="on"] .fav-btn:hover{ background:var(--hc-bg); outline:2px solid var(--hc-line); } :root[data-hc="on"] .nav-links a.active, :root[data-hc="on"] .nav-links a:hover{color:var(--hc-fg)} /* Gradient-filled text and buttons: keep the text legible on the fill. */ :root[data-hc="on"] .btn-accent, :root[data-hc="on"] .skip-link{color:var(--hc-bg)} :root[data-hc="on"] .btn-ghost{background:var(--hc-bg);border-color:var(--hc-line);color:var(--hc-fg)} :root[data-hc="on"] .badge, :root[data-hc="on"] .nav-points{ background:var(--hc-bg);border:1px solid var(--hc-line);color:var(--hc-fg); } :root[data-hc="on"] .fav-btn{ background:var(--hc-bg);border-color:var(--hc-line);color:var(--hc-fg); } :root[data-hc="on"] .fav-btn.faved{border-color:var(--accent);color:var(--accent)} :root[data-hc="on"] .nav-icon-btn[aria-pressed="true"]{ background:var(--hc-bg);color:var(--accent);outline:2px solid var(--accent); } :root[data-hc="on"] .privacy-overlay{background:var(--hc-bg)} :root[data-hc="on"] .divider{background:none;border-top:1px solid var(--hc-line)} :root[data-hc="on"] ::-webkit-scrollbar-thumb{background:var(--hc-line)} :root[data-hc="on"] ::selection{background:var(--accent);color:var(--hc-bg)} /* Thicker, always-visible focus ring — the main reason to turn HC on. */ :root[data-hc="on"] :focus-visible{ outline:3px solid var(--accent);outline-offset:2px; } :root[data-hc="on"] a:focus-visible, :root[data-hc="on"] button:focus-visible{ box-shadow:0 0 0 3px var(--hc-bg),0 0 0 6px var(--accent); } /* ---------- Mobile: keep the last footer line clear of the floating pill ---------- The fixed "Couples mode" button (135x44 at bottom:14px) sat directly on top of "...Consent is mandatory." at the very end of every page. You cannot scroll past the end of the document, so that line was permanently unreadable. Declared at the end of the file on purpose: the @supports safe-area block above sets .footer{padding-bottom} at the same specificity, so order decides. */ @media(max-width:768px){ .footer{padding-bottom:calc(4.5rem + var(--safe-bottom))} } /* ============================================================================ Play gate + free-play pill Added by js/play-gate.js. Kept in style.css so every page that loads the shared stylesheet gets them for free; the gate only ever renders on game pages, so non-game pages carry a few unused rules and nothing else. ========================================================================== */ html.play-gate-lock { overflow: hidden !important; } .nav-pill { display: inline-flex; align-items: center; min-height:28px; padding: 0 0.4rem; margin-right: 0.1rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 0.7rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .2s, transform .2s; } .nav-pill:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .nav-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .play-gate { position: fixed; inset: 0; z-index: 90000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(8, 6, 10, 0.82); backdrop-filter: blur(10px); font-family: system-ui, -apple-system, 'Segoe UI', Inter, sans-serif; animation: playGateIn .28s ease both; } @keyframes playGateIn { from { opacity: 0; } to { opacity: 1; } } .play-gate-box { width: 100%; max-width: 30rem; text-align: center; background: #14141b; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 20px; padding: 2rem 1.5rem 1.4rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); } .play-gate-badge { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 999px; padding: .3rem .9rem; } .play-gate-title { margin: 1rem 0 .55rem; font-size: clamp(1.15rem, 3.2vw, 1.45rem); font-weight: 800; letter-spacing: -.01em; color: var(--text, #f4eef1); } .play-gate-text { margin: 0 auto; max-width: 26rem; font-size: .88rem; line-height: 1.6; color: var(--text-f, #b9b2bd); } .play-gate-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; } .play-gate-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .72rem 1.3rem; border-radius: 12px; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: none; border: 1px solid transparent; } .play-gate-primary { background: linear-gradient(135deg, var(--accent), var(--gold)); color: #14090d; } .play-gate-primary:hover { filter: brightness(1.07); } .play-gate-primary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .play-gate-ghost { background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--text-f, #b9b2bd); } .play-gate-ghost:hover { border-color: rgba(255, 255, 255, .42); color: var(--text, #f4eef1); } .play-gate-ghost:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .play-gate-fine { margin: 1.2rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-m, #7d7783); } @media (max-width: 420px) { .play-gate-box { padding: 1.5rem 1.05rem 1.15rem; } .play-gate-row { flex-direction: column; } .play-gate-btn { width: 100%; } .nav-pill { display: none; } /* the nav is already tight on phones */ } /* Never let the offer print. */ @media print { .play-gate, .nav-pill { display: none !important; } } /* ============================================================================ Language selector (js/i18n.js) Lives in the nav tool cluster next to the theme/sound/privacy buttons, so it shares their 44px touch target and their mobile drawer behaviour. ========================================================================== */ .nav-lang{ min-height:30px; padding:0 1.05rem 0 .45rem; margin-right:.1rem; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.05); color:var(--nav-fg); font-size:.72rem; font-weight:600; cursor:pointer; /* Capped so a long endonym ("Português", "Русский") cannot stretch the row. */ max-width:76px; /* Native arrow is fine, but the dark palette needs it light. */ appearance:auto; } .nav-lang:hover{background:rgba(255,255,255,.1)} .nav-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .nav-lang option{background:#14141b;color:#f4eef1} @media (max-width:1279px){ .nav-lang{width:100%;max-width:none;min-height:44px;font-size:.9rem;margin:.2rem 0} } @media print{ .nav-lang{display:none !important} } /* ============================================================ Mobile UX enhancements (added) — targeted gaps on top of the existing responsive work above. Scoped so desktop is untouched. ============================================================ */ /* 1. iOS zooms in when a focused field renders text < 16px. Lift form controls to 16px on phones so focus never triggers a jarring zoom; desktop keeps the tighter .95rem scale set earlier. */ @media (max-width:768px){ input,textarea,select{font-size:16px} } /* 2. Remove the grey tap-flash on iOS/Android — the site has its own hover/active feedback already. */ a,button,summary,label.se-prop, .btn-accent,.btn-ghost,.nav-icon-btn,.fav-btn, .se-btn,.se-hint-btn,.play-gate-btn{-webkit-tap-highlight-color:transparent} /* 3. In-page #anchor jumps used to land hidden under the fixed nav. */ html{scroll-padding-top:calc(var(--nav-h) + 12px)} /* 4. Momentum scrolling inside the mobile drawer. */ @media (max-width:1279px){ .nav-links{-webkit-overflow-scrolling:touch} } /* 5. Long unbroken strings (emails, URLs, slugs) no longer force a sideways scroll on the narrowest screens. */ @media (max-width:520px){ p,li,.se-scene,.pr-note,.footer,.auth-card{overflow-wrap:anywhere} } /* ---- RTL (Arabic) ---------------------------------------------------------- js/i18n.js sets for Arabic. Flex and grid layouts mirror on their own; this only nudges the few rules anchored to a physical side. */ [dir="rtl"] .nav-lang{text-align:right} @media (max-width:1279px){ [dir="rtl"] .nav-links{right:auto;left:0;transform:translateX(-100%); border-left:none;border-right:1px solid var(--glass-border)} [dir="rtl"] .nav-links.open{transform:translateX(0)} } /* ---- Blog "Keep reading" + site search ------------------------------------- Both are generated/maintained by scripts/build-related.mjs and scripts/build-search-index.mjs; the styles live here so the per-page inline