/* The Liming — shared: tokens, dark mode, marks, nav, sections, buttons, footer */ :root { --ground: #fbfbfd; --surface: #f2f2f5; --ink: #16171b; --muted: #62656f; --hair: #e2e3e9; --mark: #111114; --mark-rgb: 17, 17, 20; --bolt: url("data:image/png;base64,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"); --display: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --body: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --gutter: clamp(16px, 5vw, 56px); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:not([data-mode="light"]) { --ground: #07080a; --surface: #0f1114; --ink: #eef0ea; --muted: #8f958a; --hair: #1f2226; --mark: #f4f5f0; --mark-rgb: 244, 245, 240; color-scheme: dark; } } :root[data-theme="dark"] body:not([data-mode="light"]), body[data-mode="dark"] { --ground: #07080a; --surface: #0f1114; --ink: #eef0ea; --muted: #8f958a; --hair: #1f2226; --mark: #f4f5f0; --mark-rgb: 244, 245, 240; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--ink); color: var(--ground); } a { color: inherit; } .mk { display: inline-block; flex: none; background: var(--mark); -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; } #field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 9; pointer-events: none; } body { touch-action: manipulation; } [hidden] { display: none !important; } @keyframes rise { 0% { opacity: .45; transform: translateY(18px); } 100% { opacity: 1; transform: none; } } .label .mk.spin { animation: spin .7s cubic-bezier(.2,1.3,.4,1); } @keyframes spin { 0% { transform: rotate(-180deg) scale(.4); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .rise, h2.lit, .label .mk.spin { animation: none; } } @keyframes lit { 0% { opacity: .35; letter-spacing: -0.01em; } 100% { opacity: 1; } } .brand .mk.charged { animation: charged .5s ease; } /* the logo's four energy marks, right after "Liming" (on every page) */ .brand-bolts { display: inline-flex; align-items: center; gap: 1px; margin: 0 .5em 0 .3em; } .brand-bolts .mk { width: 7px; height: 13px; background: #3fae70; } .brand-bolts .mk:nth-child(1) { rotate: -20deg; } .brand-bolts .mk:nth-child(2) { width: 6px; height: 11px; rotate: 25deg; } .brand-bolts .mk:nth-child(3) { width: 8px; height: 15px; } .brand-bolts .mk:nth-child(4) { width: 6px; height: 11px; rotate: -35deg; } .brand .x { margin-right: .35em; } @keyframes charged { 40% { transform: scale(1.6) rotate(-8deg); } } /* ---------- Nav ---------- */ .nav { position: fixed; z-index: 10; left: 0; right: 0; top: 0; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; } .nav.solid { background: color-mix(in srgb, var(--ground) 96%, transparent); border-bottom-color: var(--hair); } .brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none; font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; } /* the logo: three bolts in a row, the same glyph as the energy-count game's own icon */ .brand-mark { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; } .brand-mark .mk { width: 6px; height: 13px; } .brand-mark .mk:nth-child(2) { width: 8px; height: 17px; } .brand-mark .mk:nth-child(3) { width: 6px; height: 13px; } .brand .full { display: inline-flex; align-items: center; gap: .4em; margin-left: .4em; } .brand .x { color: var(--muted); font-weight: 400; } .links { display: flex; gap: 28px; font-size: 14px; } .links a { text-decoration: none; color: var(--muted); transition: color .2s; } .links a:hover { color: var(--ink); } .tools { display: flex; align-items: center; gap: 10px; } .seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; padding: 3px; background: var(--ground); } .seg button { font: 500 12px/1 var(--body); letter-spacing: .04em; color: var(--muted); background: none; border: 0; padding: 7px 9px; border-radius: 999px; cursor: pointer; } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); } .mode { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 8.6em; /* fixed width: switching language never moves the header */ padding: 8px 13px; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); font: 400 14px/1 var(--body); cursor: pointer; } .mode .mk { width: 7px; height: 12px; } .mode:hover, .seg:not(.glass-seg):hover { border-color: var(--muted); } button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } @media (max-width: 860px) { .links { display: none; } } @media (max-width: 420px) { .brand .full { display: none; } .mode .lbl { display: none; } .mode { width: auto; } } /* ---------- Sections ---------- */ section.block { position: relative; z-index: 1; background: var(--ground); padding-inline: var(--gutter); padding-block: clamp(72px, 11vw, 140px); border-top: 1px solid var(--hair); } .wrap { max-width: 1120px; margin: 0 auto; } .label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .label .mk { width: 7px; height: 12px; } h2 { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; max-width: 22ch; } h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; } p { margin: 0; } /* nothing on the site is selectable/copyable except the contact details */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .row .v, input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .row .v { user-select: all; -webkit-user-select: all; } img, svg, canvas { -webkit-user-drag: none; } .vortex, .vortex:focus { outline: none; -webkit-tap-highlight-color: transparent; } button.vortex:focus-visible { outline: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--ground); font: 400 16px/1 var(--body); letter-spacing: 0; cursor: pointer; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); } .btn .mk { width: 9px; height: 16px; background: currentColor; } .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--hair); } .btn.ghost:hover { border-color: var(--muted); } .btn.lg { min-height: 56px; padding: 0 28px; font-size: 18px; } .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; pointer-events: auto; } /* ---------- Pages: page transitions, skip link, language flash guard ---------- */ .lang-pending main, .lang-pending .links, .lang-pending .menu, .lang-pending .foot { visibility: hidden; } .skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--ground); text-decoration: none; font-size: 14px; } .skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); } /* ---------- Nav: real links, current page, phone menu ---------- */ .nav { display: grid; grid-template-columns: auto 1fr auto; } .links { justify-self: center; } .links a { position: relative; padding: 6px 2px; } .links a[aria-current="page"] { color: var(--ink); } .links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 9px; transform: translateX(-50%); background: var(--mark); -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; } .brand { justify-self: start; } .tools { justify-self: end; } .menu-btn { display: none; position: relative; width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); cursor: pointer; } .menu-btn span { position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.2,.8,.2,1), top .3s; } .menu-btn span:first-child { top: 15px; } .menu-btn span:last-child { top: 22px; } .nav.open .menu-btn span:first-child { top: 18.5px; transform: rotate(45deg); } .nav.open .menu-btn span:last-child { top: 18.5px; transform: rotate(-45deg); } .menu-btn:hover { border-color: var(--muted); } .menu { position: fixed; z-index: 9; inset: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--ground); overflow-y: auto; overscroll-behavior: contain; } .menu-in { display: grid; gap: 4px; max-width: 520px; margin: 0 auto; } .menu a { display: flex; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--hair); text-decoration: none; font-family: var(--display); font-size: clamp(28px, 8vw, 40px); letter-spacing: -.035em; line-height: 1.1; color: var(--ink); } .menu a .ni { width: 26px; height: 26px; flex: none; color: var(--muted); } .menu a[aria-current="page"] .ni { color: var(--ink); } .menu a[aria-current="page"]::after { content: ""; width: 8px; height: 14px; margin-left: auto; background: var(--mark); -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; } .menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 14px; } .menu-more a { font-size: 19px; letter-spacing: -.01em; gap: 10px; border-bottom: 0; color: var(--muted); } .menu-more a .ni { width: 20px; height: 20px; } body.menu-open { overflow: hidden; } @media (max-width: 860px) { .menu-btn { display: inline-block; } .nav { grid-template-columns: 1fr auto; } } @media (min-width: 861px) { .menu { display: none !important; } } /* ---------- Page head (every page except home) ---------- */ .page-head { border-top: 0; padding-top: calc(clamp(120px, 16vw, 200px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(40px, 6vw, 72px); } .ph-title { margin: 18px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 104px); line-height: 1; letter-spacing: -.05em; max-width: 16ch; text-wrap: balance; } .ph-lede { margin-top: 22px; max-width: 34rem; color: var(--muted); font-size: clamp(17px, 2vw, 20px); text-wrap: pretty; } section.block.tight { padding-top: 0; border-top: 0; } /* ---------- Footer ---------- */ .foot { position: relative; z-index: 1; background: var(--ground); border-top: 1px solid var(--hair); padding: 34px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 22px; font-size: 14px; color: var(--muted); } .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; max-width: 1120px; width: 100%; margin: 0 auto; } .foot-row.small { font-size: 13px; } .foot-brand { font-size: 16px; color: var(--ink); gap: .35em; } .foot-brand .mk { margin-right: 6px; } .foot-links { display: flex; gap: 8px 22px; flex-wrap: wrap; } .foot a { color: inherit; text-decoration: none; } .foot a:hover, .foot a[aria-current="page"] { color: var(--ink); } .foot .secret { opacity: .7; } .page-head .wrap > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; } .page-head .wrap > :nth-child(2) { animation-delay: .06s; } .page-head .wrap > :nth-child(3) { animation-delay: .12s; } .page-head .wrap > :nth-child(4) { animation-delay: .18s; } @media (prefers-reduced-motion: reduce) { .page-head .wrap > * { animation: none; } } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Language switch: liquid glass ---------- A clear glass track; the chosen language sits under a glass drop you can tap or drag (see core/seg.js). */ .seg.glass-seg { --sg-tint-a: rgba(255,255,255,.45); --sg-tint-b: rgba(255,255,255,.25); --sg-rim: rgba(255,255,255,.95); --sg-rim-soft: rgba(255,255,255,.35); --sg-edge: rgba(20,22,40,.12); --sg-drop: rgba(20,22,40,.18); --th-a: rgba(255,255,255,.95); --th-b: rgba(255,255,255,.8); --th-drop: rgba(20,22,40,.16); position: relative; isolation: isolate; border: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; background: linear-gradient(180deg, var(--sg-tint-a), var(--sg-tint-b)); -webkit-backdrop-filter: brightness(1.04); backdrop-filter: brightness(1.04); box-shadow: inset 0 1px 0 var(--sg-rim), inset 0 -1px 1px var(--sg-rim-soft), inset 0 -6px 10px -8px var(--sg-rim), 0 0 0 .5px var(--sg-edge), 0 6px 16px -8px var(--sg-drop); } .seg.glass-seg.dragging { cursor: grabbing; z-index: 30; } /* the lifted lens floats over the neighbouring buttons */ .seg.glass-seg button { position: relative; z-index: 1; transition: color .25s; } .seg.glass-seg button[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 600; } .seg-thumb { position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 30px; border-radius: 999px; pointer-events: none; /* under the labels at rest */ transform-origin: center; will-change: transform, width; background: linear-gradient(180deg, var(--th-a), var(--th-b)); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.8), 0 0 0 .5px rgba(20,22,40,.08), 0 3px 8px -3px var(--th-drop); transition: width .45s cubic-bezier(.3,1.5,.45,1), box-shadow .3s, background .3s, border-radius .25s; } /* at rest the drop is a clean white pill; lifted, it turns into a fully clear bubble (just its bright rim and shadow) */ .seg.glass-seg.dragging .seg-thumb { z-index: 2; -webkit-backdrop-filter: none; backdrop-filter: none; } /* lifted: a fully clear bubble over the labels */ .seg-thumb.free { transition: box-shadow .3s, background .3s, border-radius .25s; } /* grabbed: the drop swells a little above the track, like lifting a bead of water */ .seg.glass-seg.dragging .seg-thumb { border-radius: 48% 48% 52% 52% / 42% 42% 58% 58%; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 -6px 10px -6px rgba(255,255,255,.95), 0 0 0 .5px rgba(20,22,40,.12), 0 10px 20px -6px var(--th-drop); } .seg.glass-seg.dragging .seg-thumb { background: transparent; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.7), inset 0 -4px 7px -5px rgba(255,255,255,.95), inset 0 0 0 .5px rgba(255,255,255,.6), 0 0 0 .5px rgba(20,22,40,.14), 0 12px 24px -8px rgba(20,22,40,.3); } @media (prefers-color-scheme: dark) { body:not([data-mode="light"]) .seg.glass-seg { --sg-tint-a: rgba(255,255,255,.1); --sg-tint-b: rgba(255,255,255,.03); --sg-rim: rgba(255,255,255,.55); --sg-rim-soft: rgba(255,255,255,.14); --sg-edge: rgba(255,255,255,.08); --sg-drop: rgba(0,0,0,.5); --th-a: rgba(255,255,255,.26); --th-b: rgba(255,255,255,.08); --th-drop: rgba(0,0,0,.5); } } body[data-mode="dark"] .seg.glass-seg { --sg-tint-a: rgba(255,255,255,.1); --sg-tint-b: rgba(255,255,255,.03); --sg-rim: rgba(255,255,255,.55); --sg-rim-soft: rgba(255,255,255,.14); --sg-edge: rgba(255,255,255,.08); --sg-drop: rgba(0,0,0,.5); --th-a: rgba(255,255,255,.26); --th-b: rgba(255,255,255,.08); --th-drop: rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } } /* header buttons as clear glass: theme switch and menu */ :root.glass .nav .mode, :root.glass .nav .menu-btn { --nb-tint-a: rgba(255,255,255,.14); --nb-tint-b: rgba(255,255,255,.02); --nb-rim: rgba(255,255,255,.95); --nb-rim-soft: rgba(255,255,255,.35); --nb-edge: rgba(20,22,40,.12); --nb-drop: rgba(20,22,40,.18); border: 0; color: var(--ink); isolation: isolate; background: linear-gradient(180deg, var(--nb-tint-a), var(--nb-tint-b)); -webkit-backdrop-filter: saturate(1.7) brightness(1.06); backdrop-filter: saturate(1.7) brightness(1.06); box-shadow: inset 0 1px 0 var(--nb-rim), inset 0 -1px 1px var(--nb-rim-soft), inset 0 -6px 10px -8px var(--nb-rim), 0 0 0 .5px var(--nb-edge), 0 6px 16px -8px var(--nb-drop); transition: box-shadow .3s, background .3s, scale .4s cubic-bezier(.3,1.6,.5,1); } :root.glass .nav .mode.lens, :root.glass .nav .menu-btn.lens { -webkit-backdrop-filter: var(--lens) saturate(1.7) brightness(1.06); backdrop-filter: var(--lens) saturate(1.7) brightness(1.06); } :root.glass .nav .mode:hover, :root.glass .nav .menu-btn:hover { --nb-tint-a: rgba(255,255,255,.4); scale: 1.04; } :root.glass .nav .mode:active, :root.glass .nav .menu-btn:active { scale: .96; } @media (prefers-color-scheme: dark) { :root.glass body:not([data-mode="light"]) .nav :is(.mode, :root.glass .menu-btn) { --nb-tint-a: rgba(255,255,255,.1); --nb-tint-b: rgba(255,255,255,.03); --nb-rim: rgba(255,255,255,.55); --nb-rim-soft: rgba(255,255,255,.14); --nb-edge: rgba(255,255,255,.08); --nb-drop: rgba(0,0,0,.5); } :root.glass body:not([data-mode="light"]) .nav :is(.mode, :root.glass .menu-btn):hover { --nb-tint-a: rgba(255,255,255,.18); } } :root.glass body[data-mode="dark"] .nav :is(.mode, :root.glass .menu-btn) { --nb-tint-a: rgba(255,255,255,.1); --nb-tint-b: rgba(255,255,255,.03); --nb-rim: rgba(255,255,255,.55); --nb-rim-soft: rgba(255,255,255,.14); --nb-edge: rgba(255,255,255,.08); --nb-drop: rgba(0,0,0,.5); } :root.glass body[data-mode="dark"] .nav :is(.mode, :root.glass .menu-btn):hover { --nb-tint-a: rgba(255,255,255,.18); } /* ---------- Glass mode switch ---------- */ .glass-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); font: 400 14px/1 var(--body); cursor: pointer; } .glass-toggle svg { width: 16px; height: 16px; flex: none; } .glass-toggle:hover { border-color: var(--muted); } .glass-toggle[aria-pressed="true"] { background: #16171b; color: #fff; border-color: #16171b; } /* Glass mode is light only: the dark/light switch steps aside */ :root.glass .nav .mode { display: none; } :root.mode-switching body { opacity: 0; transition: opacity .2s; } @media (max-width: 640px) { .glass-toggle .lbl { display: none; } .glass-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; } } /* behind the glass: flat, full-colour 2D shapes that drift and spin (CSS transforms only — cheap on phones) */ .gsx { display: none; } :root.glass .gsx { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } :root.glass .gsx .shp { position: absolute; width: var(--s, 56px); aspect-ratio: 1; animation: shp-float var(--t, 16s) ease-in-out infinite alternate; } :root.glass .gsx .shp svg { width: 100%; height: 100%; display: block; animation: shp-spin var(--r, 7s) linear infinite; } :root.glass .gsx .s1 { --s: 64px; left: 8%; top: 24%; --t: 14s; --r: 6s; --mx: 18vw; --my: 10vh; } :root.glass .gsx .s2 { --s: 52px; left: 62%; top: 14%; --t: 17s; --r: 5s; --mx: -16vw; --my: 14vh; } :root.glass .gsx .s3 { --s: 58px; left: 80%; top: 46%; --t: 15s; --r: 7s; --mx: -22vw; --my: -8vh; } :root.glass .gsx .s4 { --s: 60px; left: 30%; top: 52%; --t: 19s; --r: 4.5s; --mx: 20vw; --my: 12vh; } :root.glass .gsx .s5 { --s: 48px; left: 12%; top: 76%; --t: 13s; --r: 8s; --mx: 26vw; --my: -10vh; } :root.glass .gsx .s6 { --s: 54px; left: 50%; top: 82%; --t: 16s; --r: 3.8s; --mx: -18vw; --my: -14vh; } :root.glass .gsx .s7 { --s: 44px; left: 70%; top: 68%; --t: 12s; --r: 5.5s; --mx: 12vw; --my: 8vh; } :root.glass .gsx .shp:nth-child(even) svg { animation-direction: reverse; } @keyframes shp-float { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--mx) * .55), calc(var(--my) * -.6)); } 100% { transform: translate(var(--mx), var(--my)); } } @keyframes shp-spin { to { transform: rotate(360deg); } } /* ---------- Language switch, glass vibe ---------- the track is a thick piece of clear glass: bright top edge, a glossy band across its upper half, light pooling at the bottom; the drop at rest is a small bead of glass (not a flat white pill) with its own shine; lifted, it becomes a clear bubble with a polished, uneven rim */ .seg.glass-seg { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.1)); -webkit-backdrop-filter: saturate(1.8) brightness(1.08); backdrop-filter: saturate(1.8) brightness(1.08); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -7px 10px -8px rgba(255,255,255,.95), inset 0 6px 10px -8px rgba(20,22,40,.07), 0 0 0 .5px rgba(20,22,40,.12), 0 8px 20px -10px rgba(20,22,40,.28), 0 1px 2px rgba(20,22,40,.08); } .seg.glass-seg::before { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; top: 2px; height: 42%; border-radius: 999px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); opacity: .7; } .seg-thumb { background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.38)); -webkit-backdrop-filter: saturate(1.8) brightness(1.1); backdrop-filter: saturate(1.8) brightness(1.1); box-shadow: inset 0 1.5px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.95), inset 0 -5px 7px -5px rgba(255,255,255,.95), inset 0 3px 5px -3px rgba(20,22,40,.07), 0 0 0 .5px rgba(20,22,40,.12), 0 4px 10px -3px rgba(20,22,40,.25), 0 1px 2px rgba(20,22,40,.14); } /* a small highlight on the bead, like light caught on a drop */ .seg-thumb::after { content: ""; position: absolute; left: 22%; right: 22%; top: 2px; height: 34%; border-radius: 999px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); } /* lifted: polished uneven rim (a thin conic ring) around the clear bubble */ .seg-thumb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s; background: conic-gradient(from 210deg, #fff, rgba(255,255,255,.2) 18%, #fff 36%, rgba(255,255,255,.1) 52%, #fff 70%, rgba(255,255,255,.25) 86%, #fff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .seg.glass-seg.dragging .seg-thumb::before { opacity: 1; } .seg.glass-seg.dragging .seg-thumb::after { opacity: .8; left: 18%; right: 30%; } .seg.glass-seg button[aria-pressed="true"] { text-shadow: 0 1px 0 rgba(255,255,255,.8); } :root.glass .gsx.paused .shp, :root.glass .gsx.paused .shp svg { animation-play-state: paused; } /* ===================================================================================================== Glass mode: everything else becomes glass too (default mode untouched — every rule is under :root.glass) - a soft, static candy light behind the whole page, so the glass has colour to show - clear white glass for cards, panels, chips and fields; smoky dark glass for the main buttons ===================================================================================================== */ :root.glass { --gl-fill: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); --gl-rim: inset 0 1.5px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 -14px 20px -16px rgba(255,255,255,.95); --gl-edge: 0 0 0 .5px rgba(20,22,40,.12); --gl-drop: 0 14px 30px -18px rgba(20,22,40,.3); --gl-ink: linear-gradient(180deg, rgba(22,23,27,.9), rgba(22,23,27,.74)); } :root.glass body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 35% at 6% 10%, rgba(255,79,168,.14), transparent 70%), radial-gradient(45% 40% at 94% 28%, rgba(10,124,255,.14), transparent 70%), radial-gradient(50% 40% at 26% 96%, rgba(46,204,64,.1), transparent 70%), radial-gradient(40% 35% at 86% 92%, rgba(139,92,255,.12), transparent 70%); } :root.glass section.block, :root.glass .foot, :root.glass .gallery { background: transparent; } :root.glass .foot { box-shadow: inset 0 1px 0 rgba(255,255,255,.9); border-top-color: rgba(20,22,40,.08); } /* the header bar once you scroll, and the phone menu */ :root.glass .nav.solid { background: rgba(251,251,253,.66); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); border-bottom-color: rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(20,22,40,.06); } :root.glass .menu { background: rgba(251,251,253,.78); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); } :root.glass .menu a { border-bottom-color: rgba(20,22,40,.08); } /* buttons: main = smoky glass, ghost = clear glass */ :root.glass .btn:not(.gl) { border: 0; background: var(--gl-ink); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12), 0 0 0 .5px rgba(20,22,40,.3), var(--gl-drop); } :root.glass .btn.ghost:not(.gl), :root.glass .snd-btn, :root.glass .chip-btn:not(.gl), :root.glass .glass-toggle:not([aria-pressed="true"]) { border: 0; background: var(--gl-fill); color: var(--ink); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .snd-btn:hover, :root.glass .btn.ghost:not(.gl):hover { box-shadow: var(--gl-rim), 0 0 0 .5px rgba(20,22,40,.2), 0 16px 32px -16px rgba(20,22,40,.35); } /* Learn */ :root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg, :root.glass .ln-more-a, :root.glass .ln-tablewrap, :root.glass .ln-article .ll, :root.glass .ln-article .ln-fact, :root.glass .ln-fact { border: 0; background: linear-gradient(170deg, color-mix(in srgb, var(--acc, #fff) 14%, rgba(255,255,255,.8)), rgba(255,255,255,.5)); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .ln-folder:hover, :root.glass .ln-topic:hover, :root.glass .ln-pg:hover { box-shadow: var(--gl-rim), 0 0 0 .5px rgba(20,22,40,.18), 0 22px 40px -18px rgba(20,22,40,.35); } :root.glass .ln-folder:hover .lf-arrow, :root.glass .ln-folder:focus-visible .lf-arrow { color: var(--ink); } :root.glass .ln-soon { border: 0; background: rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), var(--gl-edge); } :root.glass .ll-n, :root.glass .ln-soon .lf-ic { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(20,22,40,.1), 0 4px 10px -6px rgba(20,22,40,.25); } :root.glass .ln-folder .lf-ic, :root.glass .ln-bigic, :root.glass .ln-steps .ls-n, :root.glass .ln-topic .lt-ic { background: linear-gradient(160deg, color-mix(in srgb, var(--acc, #16171b) 70%, #16171b), color-mix(in srgb, var(--acc, #16171b) 40%, #0b0b0f)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -1px 1px rgba(255,255,255,.15), 0 8px 18px -10px color-mix(in srgb, var(--acc, #000) 60%, transparent); } :root.glass .ln-key { background: var(--gl-ink); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 0 0 .5px rgba(20,22,40,.3), var(--gl-drop); } /* Contact and Facts */ :root.glass .msg { background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .fld input, :root.glass .fld textarea, :root.glass .mp-in { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.9); box-shadow: inset 0 2px 4px rgba(20,22,40,.06), 0 0 0 .5px rgba(20,22,40,.12); } :root.glass .fact { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); border-radius: 18px; padding: 24px; border: 0; margin: 6px; box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .facts-grid { border-top: 0; } :root.glass .rows .row { border-bottom-color: rgba(20,22,40,.08); } /* inside the games: controls, fields, room screens, results */ :root.glass .g-card .btn:not(.ghost):not(.it-start) { background: linear-gradient(170deg, color-mix(in srgb, var(--k0) 80%, rgba(255,255,255,.3)), color-mix(in srgb, var(--k0) 90%, #16171b)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.2), 0 0 0 .5px rgba(255,255,255,.5), 0 12px 24px -12px color-mix(in srgb, var(--k0) 60%, transparent); } :root.glass .g-card .btn.ghost { background: var(--gl-fill); color: #16171b; box-shadow: var(--gl-rim), var(--gl-edge); } :root.glass .stepper button, :root.glass .mp-codebig span, :root.glass .mp-who-list li, :root.glass .mp-board li, :root.glass .mp-seg, :root.glass .field { border: 0; background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge), 0 8px 18px -12px rgba(20,22,40,.25); } :root.glass .mp-seg button[aria-selected="true"] { background: #16171b; color: #fff; } :root.glass .res-list { border-top: 0; padding: 4px 14px; border-radius: 16px; background: var(--gl-fill); box-shadow: var(--gl-rim), var(--gl-edge); } :root.glass .res-list div { border-bottom-color: rgba(20,22,40,.07); } :root.glass .res-list div:last-child { border-bottom: 0; } :root.glass .g-packmenu .pi { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(20,22,40,.1); } :root.glass .g-packmenu button[aria-checked="true"] .pi { background: #16171b; color: #fff; } /* ---------- Glass mode, one recipe everywhere: the same glass as the game cards and their icon tiles ---------- colour-tinted see-through body · bright top edge · light along the left side · light pooling at the bottom · a white hairline edge · soft shadow. Surfaces with their own colour (--acc, --fill) use it; neutral ones are white glass with the same edges. Icon tiles everywhere are small pieces of coloured glass, like the game icons. */ :root.glass { --gl-rim: inset 0 1.5px 0 rgba(255,255,255,.92), inset 0 -1px 1px rgba(255,255,255,.5), inset 14px 0 24px -20px rgba(255,255,255,.85), inset 0 -22px 30px -24px rgba(255,255,255,.65); --gl-edge: 0 0 0 .5px rgba(255,255,255,.6), 0 0 0 1px rgba(20,22,40,.06); --gl-drop: 0 18px 36px -20px rgba(20,22,40,.32); } /* tinted glass cards (like the game cards) */ :root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-article .ll, :root.glass .ln-article .ln-fact, :root.glass .ln-pg, :root.glass .ln-tablewrap { --tint: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .msg { --tint: #8b5cff; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); } :root.glass .fact { background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), var(--gl-drop); } :root.glass .fact:nth-child(6n + 1) { --tint: #0a7cff; } :root.glass .fact:nth-child(6n + 2) { --tint: #ff4fa8; } :root.glass .fact:nth-child(6n + 3) { --tint: #2ecc40; } :root.glass .fact:nth-child(6n + 4) { --tint: #8b5cff; } :root.glass .fact:nth-child(6n + 5) { --tint: #22c8ff; } :root.glass .fact:nth-child(6n) { --tint: #ff2e44; } :root.glass .res-list, :root.glass .mp-board li, :root.glass .mp-who-list li, :root.glass .mp-codebig span, :root.glass .stepper button, :root.glass .field, :root.glass .mp-seg { --tint: var(--k0, #fff); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #fff) 30%, rgba(255,255,255,.62)), color-mix(in srgb, var(--tint, #fff) 44%, rgba(255,255,255,.22))); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); } /* neutral pieces: white glass with the same edges */ :root.glass .btn.ghost:not(.gl), :root.glass .snd-btn, :root.glass .chip-btn:not(.gl), :root.glass .glass-toggle:not([aria-pressed="true"]), :root.glass .back-home, :root.glass .g-packmenu, :root.glass .game .g-pack, :root.glass .game .g-close, :root.glass .g-tabs .dk:not([aria-current="true"]) { background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.46)); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); } :root.glass .btn:not(.gl):not(.ghost) { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 12px 0 18px -14px rgba(255,255,255,.35), inset 0 -12px 18px -14px rgba(255,255,255,.25), 0 0 0 .5px rgba(255,255,255,.3), var(--gl-drop); } /* icon tiles everywhere: small coloured glass, like the icons on the game cards */ :root.glass .ln-folder .lf-ic, :root.glass .ln-bigic, :root.glass .ln-topic .lt-ic, :root.glass .ln-steps .ls-n, :root.glass .ll-n { --tint: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); } :root.glass .ln-soon .lf-ic { --tint: #8f95a3; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); } :root.glass .g-packmenu .pi { --tint: #8f95a3; background: linear-gradient(160deg, color-mix(in srgb, var(--tint, #16171b) 55%, rgba(255,255,255,.45)), color-mix(in srgb, var(--tint, #16171b) 72%, transparent)); color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.5), inset 10px 0 16px -12px rgba(255,255,255,.8), inset 0 -12px 18px -12px rgba(255,255,255,.65), 0 0 0 .5px rgba(255,255,255,.6), 0 12px 24px -12px color-mix(in srgb, var(--tint, #000) 70%, transparent); } :root.glass .g-packmenu button[aria-checked="true"] .pi { --tint: #16171b; } :root.glass .menu a .ni { color: var(--ink); } /* glass mode, Learn: the cards themselves are WHITE glass — only their icons carry the colour; pressing / hovering a topic card or a pager link fills it a little with its colour from the bottom (like light soaking into the glass). The folder cards use the same liquid fill as the home doors instead (see the "Hover: the glass fills with liquid" block above and .gl-card on the .ln-folder markup). */ :root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(170deg, rgba(255,255,255,.88), rgba(255,255,255,.5)); } :root.glass .ln-topic::after, :root.glass .ln-pg::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--tint, #8b5cff) 30%, transparent), color-mix(in srgb, var(--tint, #8b5cff) 8%, transparent) 70%, transparent); transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.3,1.3,.5,1); } :root.glass .ln-topic:hover::after, :root.glass .ln-pg:hover::after, :root.glass .ln-topic:active::after, :root.glass .ln-pg:active::after, :root.glass .ln-topic:focus-visible::after, :root.glass .ln-pg:focus-visible::after { transform: scaleY(1); } :root.glass .ln-folder, :root.glass .ln-topic, :root.glass .ln-pg { --tint: var(--acc); } @media (prefers-reduced-motion: reduce) { :root.glass .ln-topic::after, :root.glass .ln-pg::after { transition: none; } } /* ---------- Hover: the glass fills with liquid (generic — any .gl / .gl-card element, on any page; JS adds the .gl-fill markup via core/liquid.js's fill()). Home's doors add their own edge/rim styling in home.css. ---------- */ :root.glass .gl, :root.glass .gl-card { --fill: #8b5cff; --lvl: 118%; --lvl-on: 42%; } :root.glass .gl-card { --lvl-on: 30%; } :root.glass .gl > .gl-fill, :root.glass .gl-card > .gl-fill { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; } :root.glass .gl-fill i { position: absolute; left: -60%; width: 220%; aspect-ratio: 1; top: var(--lvl); border-radius: 43%; background: color-mix(in srgb, var(--fill) 34%, transparent); box-shadow: inset 0 3px 0 -1px rgba(255,255,255,.55), inset 0 10px 18px -12px rgba(255,255,255,.6); /* the bright meniscus */ transition: top .9s cubic-bezier(.34,1.35,.5,1); animation: gl-wave 7s linear infinite paused; } :root.glass .gl-card .gl-fill i { left: -110%; width: 320%; border-radius: 46%; } :root.glass .gl-card .gl-fill i.w2 { border-radius: 44%; } :root.glass .gl-fill i.w2 { border-radius: 40%; background: color-mix(in srgb, var(--fill) 16%, transparent); box-shadow: none; animation-duration: 11s; animation-direction: reverse; transition-delay: .06s; top: calc(var(--lvl) - 3%); } @keyframes gl-wave { to { transform: rotate(360deg); } } /* bubbles */ :root.glass .gl-fill b { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.35) 60%, transparent 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.35); } :root.glass .gl-fill b:nth-of-type(1) { left: 18%; } :root.glass .gl-fill b:nth-of-type(2) { left: 42%; width: 4px; height: 4px; } :root.glass .gl-fill b:nth-of-type(3) { left: 66%; width: 8px; height: 8px; } :root.glass .gl-fill b:nth-of-type(4) { left: 84%; width: 5px; height: 5px; } /* filled */ :root.glass .gl:hover, :root.glass .gl:focus-visible, :root.glass .gl-card:hover, :root.glass .gl-card:focus-visible { --lvl: var(--lvl-on); } :root.glass .gl:hover .gl-fill b, :root.glass .gl:focus-visible .gl-fill b, :root.glass .gl-card:hover .gl-fill b, :root.glass .gl-card:focus-visible .gl-fill b { animation: gl-bubble 2.2s ease-in infinite; } :root.glass .gl-fill b:nth-of-type(2) { animation-delay: .5s !important; } :root.glass .gl-fill b:nth-of-type(3) { animation-delay: 1.1s !important; } :root.glass .gl-fill b:nth-of-type(4) { animation-delay: 1.6s !important; } @keyframes gl-bubble { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(4px, calc(-1 * var(--rise, 60px))); } } :root.glass .gl-card { --rise: 170px; } :root.glass .gl { --rise: 40px; } /* draining is slower and calmer than filling */ :root.glass .gl:not(:hover):not(:focus-visible) .gl-fill i, :root.glass .gl-card:not(:hover):not(:focus-visible) .gl-fill i { transition: top 1.2s cubic-bezier(.5,0,.3,1); } @media (prefers-reduced-motion: reduce) { :root.glass .gl-fill i, :root.glass .gl-fill b { animation: none !important; } :root.glass .gl-fill i { transition: none !important; } } /* a glossy sheen over the coloured glass (does not spin with the waves) */ :root.glass .gl-fill::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: linear-gradient(180deg, transparent 35%, rgba(255,255,255,.18) 60%, transparent 62%, transparent 80%, rgba(255,255,255,.12)); } :root.glass .gl:hover .gl-fill::after, :root.glass .gl-card:hover .gl-fill::after { opacity: 1; } /* waves only move while the glass is filled */ :root.glass .gl:hover .gl-fill i, :root.glass .gl:focus-visible .gl-fill i, :root.glass .gl-card:hover .gl-fill i, :root.glass .gl-card:focus-visible .gl-fill i { animation-play-state: running; } /* Learn folder cards join the same liquid-fill system as the home doors, tinted with each folder's own accent — the icon and text sit in their own stacking context so the rising fill passes behind them, never over them */ :root.glass .ln-folder.gl-card { --fill: var(--acc); } :root.glass .ln-folder.gl-card > *:not(.gl-fill) { position: relative; z-index: 2; } /* ===================================================================================================== Low-power devices (phones, low RAM/CPU — .lowfx, set once in BOOT before first paint): the costly live blur is dropped everywhere in this one place, instead of chasing it card by card in every stylesheet. The tint/gradient background stays, so the glass look survives — just without a backdrop-filter that has to be recomputed every frame anything behind it moves. The rim/edge/drop shadows also collapse to a single cheap layer each, since a multi-layer box-shadow is repainted every frame during a hover/scale transition too. ===================================================================================== */ :root.lowfx, :root.lowfx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root.lowfx .gsx .shp, :root.lowfx .gsx .shp svg { animation: none !important; } :root.lowfx { --gl-rim: inset 0 1px 0 rgba(255,255,255,.6); --gl-edge: 0 0 0 .5px rgba(20,22,40,.14); --gl-drop: 0 8px 16px -10px rgba(20,22,40,.28); } /* ---------- Settings: gear button + glass panel (core/settings.js) ---------- */ .set-wrap { position: relative; display: inline-flex; } .set-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--hair); background: var(--ground); color: var(--ink); cursor: pointer; transition: transform .4s cubic-bezier(.3,1.6,.5,1); } .set-btn[aria-expanded="true"] svg { transform: rotate(60deg); } .set-btn svg { transition: transform .4s cubic-bezier(.3,1.6,.5,1); } :root.glass .set-btn { border: 0; background: linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.46)); box-shadow: var(--gl-rim), var(--gl-edge), 0 10px 22px -14px rgba(20,22,40,.3); } .set-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 260px; padding: 16px; border-radius: 20px; display: grid; gap: 14px; background: var(--ground); border: 1px solid var(--hair); box-shadow: 0 24px 48px -20px rgba(20,22,40,.4); color: var(--ink); } :root.glass .set-pop { border: 0; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--gl-rim), var(--gl-edge), 0 24px 48px -20px rgba(20,22,40,.4); } .set-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; } .set-sw { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; border: 0; cursor: pointer; background: var(--hair); transition: background .25s; } .set-sw i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,22,40,.3); transition: transform .3s cubic-bezier(.3,1.5,.5,1); } .set-sw[aria-checked="true"] { background: #16171b; } .set-sw[aria-checked="true"] i { transform: translateX(18px); } /* Settings → "Wake sound": a small black pill; it turns green for a moment once the sound is back */ .set-fix { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: #fff; background: #16171b; transition: background .25s; } .set-fix.done { background: #3fae70; } .set-btn:focus-visible, .set-sw:focus-visible, .set-fix:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* header / footer link to the Contact page */ .nav-link { font-size: 14px; text-decoration: none; color: var(--ink); opacity: .75; padding: 8px 12px; border-radius: 999px; transition: opacity .2s, background .2s; } .nav-link:hover { opacity: 1; background: rgba(255,255,255,.6); } .foot-link { padding: 0; opacity: .8; text-decoration: underline; text-underline-offset: 3px; } /* Ray blinks (only faces with open eyes carry .blinks) */ svg.blob .eyes.blinks { transform-box: fill-box; transform-origin: center; animation: ray-blink 5.6s infinite; animation-delay: var(--bd, 0s); } /* a natural blink: one quick blink, a pause, then now and then a double blink */ @keyframes ray-blink { 0%, 38%, 42.5%, 88%, 91%, 93%, 96%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.08); } 89.5% { transform: scaleY(.08); } 94.5% { transform: scaleY(.08); } } @media (prefers-reduced-motion: reduce) { svg.blob .eyes.blinks { animation: none; } } /* an angry cloud rumbles */ svg.blob.ex-angry, svg.blob.ex-fury { animation: ray-rumble .18s linear infinite; } svg.blob.ex-fury { animation-duration: .09s; } @keyframes ray-rumble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .5px); } 50% { transform: translate(1.5px, -.5px); } 75% { transform: translate(-1px, -.5px); } } @media (prefers-reduced-motion: reduce) { svg.blob.ex-angry, svg.blob.ex-fury { animation: none; } } /* ---------- Ray, bottom right on every page: small, silent, removable ---------- */ .rb { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 64px; height: 64px; } .rb-ray { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; pointer-events: none; } /* only the cloud itself is Ray: clicks and hovers on the empty corners of his button do nothing */ .rb-ray svg { pointer-events: none; } .rb-ray svg :is(rect, circle, ellipse, path) { pointer-events: visiblePainted; cursor: pointer; } .rb-ray:focus-visible { outline: 2px solid #4fb584; outline-offset: 2px; border-radius: 16px; } .rb-art, .rb-art svg { display: block; width: 100%; height: 100%; overflow: visible; } .rb-art svg { filter: drop-shadow(0 6px 8px rgba(20,22,30,.18)); } .rb.boing .rb-art { animation: rb-boing .45s cubic-bezier(.3,1.6,.5,1); } @keyframes rb-boing { 30% { transform: scale(1.15, .85); } 60% { transform: scale(.92, 1.08); } } .rb-x { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: 600 13px/20px system-ui, sans-serif; color: #16171b; background: rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(20,22,30,.2); opacity: 0; transition: opacity .2s; } .rb:hover .rb-x, .rb:focus-within .rb-x { opacity: 1; } @media (hover: none) { .rb-x { opacity: .75; } } /* he flashes like lightning */ .rb.flash .rb-art svg { animation: rb-bolt 1.6s steps(1) both; } @keyframes rb-bolt { 0%, 20%, 44% { filter: brightness(6) drop-shadow(0 0 18px #fff); } 10%, 32%, 60% { filter: invert(1) drop-shadow(0 0 10px #4fb584); } 80%, 100% { filter: none; } } /* the storm (a canvas the lightning is drawn on): the screen under it loses its colour for a moment */ .rb-storm { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; -webkit-backdrop-filter: grayscale(1) contrast(1.35); backdrop-filter: grayscale(1) contrast(1.35); } @media (prefers-reduced-motion: reduce) { .rb.flash .rb-art svg, .rb.boing .rb-art { animation: none; } } /* he leans toward the cursor */ .rb-art { transform-origin: 50% 85%; transition: transform .18s cubic-bezier(.3,1.4,.5,1); } .rb.asleep .rb-art { transform: translateY(4px) !important; transition: transform .6s ease; } .rb-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; } html.rb-wreck body * { pointer-events: none !important; } html.rb-wreck .rb-x, html.rb-wreck .rb-ray svg :is(rect, circle, ellipse, path) { pointer-events: auto !important; } /* Ray pops back in */ .rb.pop { animation: rb-pop .6s cubic-bezier(.3,1.6,.5,1) both; } @keyframes rb-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } } /* the button that brings him back, in his corner */ .rb-back { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; color: #16171b; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 20px -12px rgba(20,22,40,.4); animation: rb-pop .5s cubic-bezier(.3,1.6,.5,1) both; } .rb-back:hover { background: rgba(255,255,255,.9); } .rb-back-ic, .rb-back-ic svg { display: block; width: 26px; height: 26px; } @media (prefers-reduced-motion: reduce) { .rb.pop, .rb-back { animation: none; } } /* Ray's newer faces move a little: hearts beat, spirals spin, stars circle his head, tears roll, hearts float up */ svg.blob .beat { transform-box: fill-box; transform-origin: center; animation: ray-beat 1s ease-in-out infinite; } /* shock: one jolt up, then he stays tall and wide-eyed */ svg.blob.ex-shock { animation: ray-jolt .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 78%; } @keyframes ray-jolt { 0% { transform: scale(1.06, .9); } 45% { transform: translateY(-4%) scale(.96, 1.05); } 100% { transform: none; } } @keyframes ray-beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.1); } 55% { transform: scale(.97); } } svg.blob .spin { transform-box: fill-box; transform-origin: center; animation: ray-spin 1.1s linear infinite; } @keyframes ray-spin { to { transform: rotate(360deg); } } svg.blob .tears { animation: ray-tears 1.2s ease-in infinite; } @keyframes ray-tears { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } svg.blob .float { animation: ray-float 1.6s ease-out infinite; } @keyframes ray-float { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } } /* dizzy: he sways from his base like a spinning top running down — lean, squash, lean the other way — and the orbit over his head tips with him */ svg.blob.ex-dizzy { animation: ray-sway 1.5s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 50% 78%; } @keyframes ray-sway { 0%, 100% { transform: rotate(-7deg) scale(1, 1); } 25% { transform: rotate(0) scale(1.05, .95); } 50% { transform: rotate(7deg) scale(1, 1); } 75% { transform: rotate(0) scale(1.05, .95); } } svg.blob .halo { transform-box: view-box; transform-origin: 52px 14px; animation: ray-halo 1.5s cubic-bezier(.45,0,.55,1) infinite; } @keyframes ray-halo { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } } @media (prefers-reduced-motion: reduce) { svg.blob .beat, svg.blob .spin, svg.blob .halo, svg.blob .tears, svg.blob.ex-shock, svg.blob.ex-dizzy { animation: none; } }