/* ═══════════════════════════════════════════════════════════════════════ EZ FLOW LABZ · Display settings Text size, high contrast, color-blind-safe colors and reduce motion. Loaded from by assets/display-settings.head.html (paste verbatim). Markup contract, events and API: see the comment at the top of assets/display-settings.js. State lives on , set before first paint by the head snippet: data-labz-text="100 | 115 | 130" .labz-contrast .labz-cvd .labz-reduce-motion ═══════════════════════════════════════════════════════════════════════ */ /* ─── 1. TEXT SIZE ─── rem/em text follows the root size. The pages' own px/vw font sizes are rewritten once by the script to calc(V + (var(--labz-text-scale) - 1) * min(V, 24px)) so body text grows by the full amount and big headlines by at most ~7px, which keeps them from overflowing a 375px screen. */ :root{--labz-text-scale:1} html[data-labz-text="115"]{font-size:115%;--labz-text-scale:1.15} html[data-labz-text="130"]{font-size:130%;--labz-text-scale:1.3} html[data-labz-text="115"] body, html[data-labz-text="130"] body{overflow-wrap:break-word} /* ─── 2. HIGH CONTRAST ─── Muted greys become near-white, borders get stronger. The script also lifts low-alpha white text/borders and faded text written as literals in the pages. */ html.labz-contrast{ --g6:#8e8ea4;--g7:#b4b4c8;--g8:#dedee8;--g9:#e6e6ee; --g10:#ededf3;--g11:#f4f4f8;--g12:#ffffff; --t-muted:#dedee8; --border:rgba(255,255,255,0.3);--border-h:rgba(255,255,255,0.46); } html.labz-contrast :focus-visible:not([tabindex="-1"]){outline:3px solid #fff!important;outline-offset:3px!important} html.labz-contrast body::before{opacity:0!important} /* both pages paint a noise texture here */ /* ─── 3. COLOR-BLIND-SAFE COLORS ─── Green/lime (booked, yes, live) → blue, cyan → light blue, amber → gold-orange. Blue vs orange stays distinct for protan, deutan and tritan vision. *-rgb tokens let new code write tints that swap too: rgba(var(--lime-rgb),0.08). */ :root{--ezflow-rgb:240,168,48;--ezlease-rgb:34,211,238;--lime-rgb:132,204,22} html.labz-cvd{ --ezflow:#ffb000;--ezflow-soft:rgba(255,176,0,0.05);--ezflow-glow:rgba(255,176,0,0.10);--ezflow-rgb:255,176,0; --ezlease:#9cc9ff;--ezlease-soft:rgba(156,201,255,0.05);--ezlease-glow:rgba(156,201,255,0.10);--ezlease-rgb:156,201,255; --lime:#4c9aff;--lime-soft:rgba(76,154,255,0.05);--lime-glow:rgba(76,154,255,0.10);--lime-rgb:76,154,255; } /* links inside running text never rely on color alone */ html.labz-contrast :where(p,li,dd,td,figcaption,blockquote) a:not([class]), html.labz-cvd :where(p,li,dd,td,figcaption,blockquote) a:not([class]){ text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:3px; } /* ─── 4. REDUCE MOTION ─── Same treatment the pages give prefers-reduced-motion, switched by a class so it works whatever the OS says. JS-driven motion (GSAP, globe, chat typing) is stopped by the pages themselves: they read window.__labzReduceMotion and listen for the 'labz:motion' event. */ html.labz-reduce-motion, html.labz-reduce-motion *, html.labz-reduce-motion *::before, html.labz-reduce-motion *::after{ animation-duration:0.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important; transition-duration:0.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important; } /* final states for the pages' reveal hooks (mirrors their prefers-reduced-motion blocks) */ html.labz-reduce-motion :is(.gs-reveal,.gs-reveal-scale,.hero-loc,.hero-sub,.hero-ctas,.hero-cred,.hero-in,.hero h1 .w){ opacity:1!important;transform:none!important;filter:none!important; } html.labz-reduce-motion .hero-scroll{opacity:1!important} html.labz-reduce-motion .chart-bar-fill{transform:scaleX(var(--target,1))!important} /* ─── 5. NAV BUTTON #labz-display-btn ─── A direct child of .nav-inner, right after #nav-links. Desktop: after the links, icon + "Display". Phones/tablets (≤900px): a 44px icon button just left of the menu button. The :has() rules line the row up on both pages without editing them. */ .labz-display-btn{ order:1;flex-shrink:0;position:relative; display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:40px;margin-left:28px;padding:8px 15px 8px 12px; font-family:var(--mono,'JetBrains Mono','SF Mono',ui-monospace,monospace); font-size:0.8125rem;font-weight:500;letter-spacing:0.02em;line-height:1; color:var(--g10,#b0b0c2);background:rgba(255,255,255,0.02); border:1px solid var(--border-h,rgba(255,255,255,0.08));border-radius:100px; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color .3s ease,border-color .3s ease,background-color .3s ease; } .labz-display-btn[hidden]{display:none} .labz-display-btn:hover, .labz-display-btn[aria-expanded="true"]{color:var(--g12,#eeeef2);border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.05)} .labz-display-btn:focus-visible{outline:2px solid var(--g12,#eeeef2);outline-offset:3px} .labz-display-btn svg{width:18px;height:18px;flex-shrink:0} .nav-inner:has(> .labz-display-btn:not([hidden])) > .nav-brand{margin-right:auto} .nav-inner:has(> .labz-display-btn) > .nav-toggle{order:2} @media (max-width:900px){ .labz-display-btn{width:44px;height:44px;min-height:0;margin:0 6px 0 16px;padding:0;border-radius:50%} .labz-display-btn svg{width:20px;height:20px} .labz-display-btn .labz-display-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} } /* visually hidden, still read out */ .labz-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} /* ─── 6. PANEL (built by the script) ─── */ .labz-display{ position:fixed;inset:auto;margin:0; top:var(--labz-panel-top,84px);right:var(--labz-panel-right,16px);left:auto;bottom:auto; width:min(400px,calc(100vw - 32px));max-width:calc(100vw - 24px); /* beats the UA dialog:modal max-width */ max-height:calc(100vh - var(--labz-panel-top,84px) - 16px); max-height:calc(100dvh - var(--labz-panel-top,84px) - 16px - env(safe-area-inset-bottom,0px)); overflow:auto;overscroll-behavior:contain; padding:0;color:var(--g12,#eeeef2);background:var(--g2,#15161c); border:1px solid var(--border-h,rgba(255,255,255,0.08));border-radius:var(--r,20px); box-shadow:0 32px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.02) inset; font-family:var(--sans,'Plus Jakarta Sans',system-ui,-apple-system,sans-serif); font-size:1rem;line-height:1.5;text-align:left; z-index:10001; /* only matters for the no- fallback; showModal() uses the top layer */ } .labz-display:not([open]){display:none} .labz-display.labz-center{inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 32px)} .labz-display::backdrop{background:rgba(5,5,8,0.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .labz-display[open]{animation:labz-panel-in .18s cubic-bezier(0.2,0.8,0.2,1)} @keyframes labz-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.labz-display[open]{animation:none}} @media (max-width:559px){ .labz-display:not(.labz-center){left:12px;right:12px;width:auto} .labz-d-head{padding:16px 16px 2px 18px} .labz-d-body{padding:6px 16px 2px 18px} .labz-d-size{min-height:68px} .labz-d-row{padding:10px 0 12px} .labz-d-foot{padding:12px 16px 14px 18px} } .labz-d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 4px 22px} .labz-d-title{ display:flex;align-items:center;gap:10px;margin:0; font-size:1.0625rem;font-weight:700;letter-spacing:-0.01em;line-height:1.3;color:var(--g12,#eeeef2); } .labz-d-title svg{width:20px;height:20px;flex-shrink:0;color:var(--g10,#b0b0c2)} .labz-d-desc{margin:6px 0 0;font-size:0.8125rem;line-height:1.55;color:var(--g9,#9898ad);text-wrap:pretty} .labz-d-close{ flex-shrink:0;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;margin:-8px -10px 0 0;padding:0;border-radius:50%; color:var(--g10,#b0b0c2);background:transparent;border:1px solid transparent;cursor:pointer; transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .labz-d-close:hover{color:var(--g12,#eeeef2);background:rgba(255,255,255,0.05);border-color:var(--border-h,rgba(255,255,255,0.08))} .labz-d-close svg{width:20px;height:20px} .labz-d-body{padding:8px 20px 4px 22px} .labz-d-group{margin:0;padding:12px 0 18px;border:0;border-bottom:1px solid var(--border,rgba(255,255,255,0.06))} .labz-d-label{ display:flex;align-items:center;gap:10px;margin:0 0 12px; font-family:var(--mono,'JetBrains Mono','SF Mono',ui-monospace,monospace); font-size:0.6875rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase; color:var(--t-muted,#8a8aa0); } .labz-d-label svg{width:18px;height:18px;flex-shrink:0;color:var(--g10,#b0b0c2)} .labz-d-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .labz-d-size{ display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px; min-height:76px;margin:0;padding:10px 4px 9px;border-radius:14px;cursor:pointer; font-family:inherit;font-size:0.8125rem;font-weight:600;line-height:1.2; color:var(--g11,#cdcdd8);background:var(--g3,#111117); border:1px solid var(--border-h,rgba(255,255,255,0.08)); transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .labz-d-size:hover{border-color:rgba(255,255,255,0.22);color:var(--g12,#eeeef2)} .labz-d-aa{font-weight:700;line-height:1;letter-spacing:-0.02em} .labz-d-size[data-labz-size="100"] .labz-d-aa{font-size:1rem} .labz-d-size[data-labz-size="115"] .labz-d-aa{font-size:1.25rem} .labz-d-size[data-labz-size="130"] .labz-d-aa{font-size:1.5rem} .labz-d-pct{font-family:var(--mono,'JetBrains Mono','SF Mono',ui-monospace,monospace);font-size:0.6875rem;font-weight:500;letter-spacing:0.04em;color:var(--g9,#9898ad)} .labz-d-size[aria-pressed="true"]{color:var(--g1,#050508);background:var(--g12,#eeeef2);border-color:var(--g12,#eeeef2)} .labz-d-size[aria-pressed="true"] .labz-d-pct{color:var(--g1,#050508)} .labz-d-row{padding:12px 0 14px;border-bottom:1px solid var(--border,rgba(255,255,255,0.06))} .labz-d-row:last-child{border-bottom:0} .labz-d-switch{ display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:0;padding:4px 0; font-family:inherit;font-size:0.9375rem;font-weight:600;line-height:1.3;text-align:left; color:var(--g12,#eeeef2);background:none;border:0;border-radius:10px;cursor:pointer; } .labz-d-switch > svg{width:20px;height:20px;flex-shrink:0;color:var(--g10,#b0b0c2)} .labz-d-switch-text{flex:1 1 auto;min-width:0} .labz-d-state{ flex-shrink:0;min-width:2.2em;text-align:right; font-family:var(--mono,'JetBrains Mono','SF Mono',ui-monospace,monospace); font-size:0.6875rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--g9,#9898ad); } .labz-d-switch[aria-pressed="true"] .labz-d-state{color:var(--g12,#eeeef2)} .labz-d-track{ flex-shrink:0;position:relative;width:46px;height:26px;border-radius:100px; background:var(--g4,#1a1a22);border:1px solid rgba(255,255,255,0.28); transition:background-color .2s ease,border-color .2s ease; } .labz-d-thumb{ position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--g10,#b0b0c2);color:var(--g12,#eeeef2); transition:transform .2s cubic-bezier(0.2,0.8,0.2,1),background-color .2s ease; } .labz-d-thumb svg{width:12px;height:12px;stroke-width:3;opacity:0} .labz-d-switch[aria-pressed="true"] .labz-d-track{background:var(--g12,#eeeef2);border-color:var(--g12,#eeeef2)} .labz-d-switch[aria-pressed="true"] .labz-d-thumb{transform:translateX(20px);background:var(--g1,#050508)} .labz-d-switch[aria-pressed="true"] .labz-d-thumb svg{opacity:1} .labz-d-hint{margin:2px 0 0 32px;font-size:0.8125rem;line-height:1.5;color:var(--g9,#9898ad);text-wrap:pretty} .labz-d-foot{ /* sticks to the panel's bottom edge, so Done stays in reach when big text makes the panel scroll */ position:sticky;bottom:0;z-index:1; display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:14px 20px 18px 22px;background:var(--g2,#15161c); border-top:1px solid var(--border,rgba(255,255,255,0.06)); } .labz-d-reset,.labz-d-done{ display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0; font-family:var(--mono,'JetBrains Mono','SF Mono',ui-monospace,monospace); font-size:0.8125rem;font-weight:500;letter-spacing:0.04em;line-height:1; border-radius:100px;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease; } .labz-d-reset{padding:0 16px 0 13px;color:var(--g10,#b0b0c2);background:none;border:1px solid var(--border-h,rgba(255,255,255,0.08))} .labz-d-reset:hover{color:var(--g12,#eeeef2);border-color:rgba(255,255,255,0.22)} .labz-d-reset svg{width:16px;height:16px} .labz-d-done{padding:0 26px;color:var(--g1,#050508);background:var(--g12,#eeeef2);border:1px solid var(--g12,#eeeef2)} .labz-d-done:hover{background:var(--g11,#cdcdd8)} .labz-display button:focus-visible{outline:2px solid var(--g12,#eeeef2);outline-offset:3px} html.labz-contrast .labz-display{border-color:rgba(255,255,255,0.5)}