/* ============================================================================ helisiapp lite — User Guide (wiki) shared stylesheet Two themes: dark (default, matches the app) and light. The active theme is set by a data-theme attribute on (data-theme="dark" | "light"). When absent, the prefers-color-scheme media query decides. wiki.js writes the attribute when the user toggles. No third-party requests; fonts are 100% system stacks. ========================================================================== */ /* ---- Fonts (identical stacks to the app, so the guide matches) ---- */ :root{ --font-head:'Avenir Next Condensed','Roboto Condensed','Arial Narrow', 'Helvetica Neue',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,'SF Mono','Cascadia Mono','Consolas', 'Roboto Mono','DejaVu Sans Mono','Liberation Mono',Menlo,monospace; --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue', Arial,'Noto Sans',sans-serif; /* flag colors are theme-independent (they mean the same thing in the app) */ --flag-blue:#00CFFF; --flag-red:#FF2A1F; --flag-pink:#FF8AE8; --alert-orange:#FF9E3D; --stn-dot:#7fa8cf; --bolt:#FFD147; } /* ---- DARK theme (default / matches the app) ---- */ :root, :root[data-theme="dark"]{ color-scheme: dark; --paper:#ECECEC; --ice:#B3EFFF; --cyan:#00CFFF; --teal:#046B99; --navy:#1C304A; --bg:#0a1422; /* page */ --bg-2:#07101c; /* deeper (sidebar rail) */ --panel:#11203a; /* cards */ --panel-2:#15294a; --code-bg:#0b1626; --line:rgba(179,239,255,.14); --line-strong:rgba(0,207,255,.35); --text:rgba(236,236,236,.90); --text-dim:rgba(236,236,236,.62); --text-faint:rgba(179,239,255,.7); --head:var(--ice); --link:var(--cyan); --link-hover:#ffffff; --demo-grad-top:#0a1422; --demo-grad-bot:#0d1b30; } /* ---- LIGHT theme (for comfortable reading) ---- */ :root[data-theme="light"]{ color-scheme: light; --paper:#12202f; --ice:#0b5f86; --cyan:#0784ad; /* darkened cyan so it passes contrast on white */ --teal:#046B99; --navy:#1C304A; --bg:#f5f8fb; /* page */ --bg-2:#eaf1f7; /* sidebar rail */ --panel:#ffffff; /* cards */ --panel-2:#f0f5fa; --code-bg:#eef3f8; --line:rgba(12,60,90,.16); --line-strong:rgba(7,132,173,.40); --text:#1e2b38; --text-dim:#4a5b6c; --text-faint:#5a7180; --head:#0b5f86; --link:#0784ad; --link-hover:#04364a; --demo-grad-top:#dfe9f2; --demo-grad-bot:#eef4f9; } /* When the user hasn't chosen, follow the OS preference for light. */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ color-scheme: light; --paper:#12202f; --ice:#0b5f86; --cyan:#0784ad; --bg:#f5f8fb; --bg-2:#eaf1f7; --panel:#ffffff; --panel-2:#f0f5fa; --code-bg:#eef3f8; --line:rgba(12,60,90,.16); --line-strong:rgba(7,132,173,.40); --text:#1e2b38; --text-dim:#4a5b6c; --text-faint:#5a7180; --head:#0b5f86; --link:#0784ad; --link-hover:#04364a; --demo-grad-top:#dfe9f2; --demo-grad-bot:#eef4f9; } } /* ============================================================================ Base layout ========================================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Top bar — ALWAYS dark, in both themes, so the dark-background logo always sits on a matching dark bar (mirrors the app, which is dark-only). These use fixed values, not theme vars, so light mode doesn't lighten the bar. */ .wiki-top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; padding:8px 18px; background:#07101c; border-bottom:1px solid rgba(179,239,255,.14); backdrop-filter:blur(4px); } .wiki-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); text-decoration:none; color:var(--ice); white-space:nowrap; } .wiki-brand img{height:30px; width:auto; display:block} .wiki-brand span{font-size:.82rem; color:rgba(236,236,236,.62); text-transform:uppercase; letter-spacing:.08em} .wiki-top-spacer{flex:1 1 auto} .wiki-app-link{ font-family:var(--font-head); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:#00CFFF; text-decoration:none; border:1px solid rgba(0,207,255,.35); padding:6px 12px; border-radius:8px; white-space:nowrap; } .wiki-app-link:hover{background:rgba(0,207,255,.18); color:#fff} /* theme toggle — sits on the dark bar, so it's dark-styled in both themes */ .theme-toggle{ display:inline-flex; align-items:center; gap:6px; background:#11203a; border:1px solid rgba(179,239,255,.14); color:rgba(236,236,236,.9); border-radius:8px; padding:6px 10px; cursor:pointer; font-family:var(--font-head); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; } .theme-toggle:hover{border-color:rgba(0,207,255,.35)} .theme-toggle svg{width:16px; height:16px; display:block} .theme-toggle .t-sun{display:none} :root[data-theme="light"] .theme-toggle .t-sun{display:block} :root[data-theme="light"] .theme-toggle .t-moon{display:none} @media (prefers-color-scheme: light){ :root:not([data-theme]) .theme-toggle .t-sun{display:block} :root:not([data-theme]) .theme-toggle .t-moon{display:none} } /* mobile nav toggle (hamburger) — on the dark bar too */ .nav-toggle{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; cursor:pointer; background:#11203a; border:1px solid rgba(179,239,255,.14); color:rgba(236,236,236,.9); } .nav-toggle svg{width:20px; height:20px} /* Shell: sidebar + content ------------------------------------------------- */ .wiki-shell{display:flex; align-items:flex-start; max-width:1240px; margin:0 auto} .wiki-nav{ flex:0 0 264px; width:264px; align-self:stretch; position:sticky; top:57px; height:calc(100vh - 57px); overflow-y:auto; padding:18px 12px 40px; border-right:1px solid var(--line); background:var(--bg); } .wiki-search{ width:100%; margin-bottom:14px; padding:9px 11px; background:var(--panel); border:1px solid var(--line); border-radius:8px; color:var(--text); font-family:var(--font-body); font-size:.9rem; } .wiki-search::placeholder{color:var(--text-faint)} .wiki-search:focus{outline:none; border-color:var(--cyan)} .nav-group{margin:0 0 6px} .nav-group-title{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--text-faint); margin:16px 8px 6px; } .wiki-nav a{ display:block; padding:6px 10px; border-radius:7px; margin:1px 0; color:var(--text-dim); text-decoration:none; font-size:.9rem; line-height:1.35; } .wiki-nav a:hover{background:var(--panel-2); color:var(--text)} .wiki-nav a.current{ background:var(--line-strong); color:var(--link-hover); font-weight:600; } .wiki-nav a .nav-ic{display:inline-block; width:18px; text-align:center; margin-right:6px; vertical-align:-2px} .nav-empty{color:var(--text-faint); font-size:.84rem; padding:8px 10px; display:none} .wiki-main{flex:1 1 auto; min-width:0; padding:26px 34px 80px; max-width:820px} /* breadcrumb + prev/next --------------------------------------------------- */ .crumbs{font-size:.82rem; color:var(--text-faint); margin:0 0 14px} .crumbs a{color:var(--link); text-decoration:none} .crumbs a:hover{text-decoration:underline} .crumbs .sep{margin:0 7px; opacity:.6} .prevnext{ display:flex; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); } .prevnext a{ flex:1 1 0; text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--panel); } .prevnext a:hover{border-color:var(--line-strong)} .prevnext .pn-label{font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; color:var(--text-faint); display:block; margin-bottom:3px} .prevnext .pn-title{color:var(--cyan); font-weight:600; font-size:.92rem} .prevnext .pn-next{text-align:right} .prevnext .pn-spacer{border:none; background:none} /* ============================================================================ Content typography ========================================================================== */ .wiki-main h1{ font-family:var(--font-head); font-size:1.9rem; line-height:1.15; color:var(--head); margin:0 0 6px; letter-spacing:.01em; } .wiki-main .lede{font-size:1.05rem; color:var(--text-dim); margin:0 0 22px} .wiki-main h2{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.05em; color:var(--cyan); font-size:1.15rem; margin:30px 0 10px; display:flex; align-items:center; gap:8px; } .wiki-main h3{color:var(--head); font-size:1.02rem; margin:22px 0 8px} .wiki-main p{margin:0 0 13px} .wiki-main a{color:var(--link); text-decoration:underline; text-underline-offset:2px} .wiki-main a:hover{color:var(--link-hover)} .wiki-main strong{color:var(--paper); font-weight:700} :root[data-theme="light"] .wiki-main strong{color:#0a1622} .wiki-main em{color:inherit} .wiki-main ul,.wiki-main ol{margin:0 0 14px; padding-left:22px} .wiki-main li{margin-bottom:7px} .wiki-main hr{border:none; border-top:1px solid var(--line); margin:26px 0} code{ font-family:var(--font-mono); background:var(--code-bg); color:var(--ice); padding:1px 6px; border-radius:5px; font-size:.84em; border:1px solid var(--line); } .eq{ font-family:var(--font-mono); background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; color:var(--ice); font-size:.88rem; display:inline-block; margin:2px 0 4px; } /* callout / note box */ .note{ border:1px solid var(--line-strong); border-left-width:3px; background:var(--panel); border-radius:8px; padding:12px 14px; margin:16px 0; font-size:.94rem; } .note.warn{border-color:var(--alert-orange)} .note .note-h{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; color:var(--text-faint); display:block; margin-bottom:4px; } /* ============================================================================ Reused visual components (mirrors of the app's guide) ========================================================================== */ /* flag dots */ .dot{width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:0 0 10px currentColor; vertical-align:-1px; margin-right:4px} .dot.blue{background:var(--flag-blue); color:var(--flag-blue)} .dot.red{background:var(--flag-red); color:var(--flag-red)} .dot.pink{background:var(--flag-pink); color:var(--flag-pink)} .dot.cyan{background:var(--cyan); color:var(--cyan)} .dot.amber{background:var(--alert-orange); color:var(--alert-orange)} /* age pills */ .age-pill{ display:inline-block; font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:6px; white-space:nowrap; } .age-pill.age-blue{color:var(--ice); background:#243b5e} :root[data-theme="light"] .age-pill.age-blue{color:#0b3350; background:#cfe4f5} .age-pill.age-yellow{color:#b58600; background:transparent; box-shadow:inset 0 0 0 1px #d8a200} :root[data-theme="dark"] .age-pill.age-yellow{color:#FFD147; box-shadow:inset 0 0 0 1px #FFD147} .age-pill.age-red{color:#fff; background:var(--flag-red); box-shadow:0 0 10px rgba(255,42,31,.4)} /* distance banners */ .caution-inline{color:#b26a1e; font-weight:700; background:rgba(255,158,61,.14); border:1px solid rgba(255,158,61,.55); border-radius:5px; padding:1px 6px; font-size:.82em; white-space:nowrap} :root[data-theme="dark"] .caution-inline{color:#FFCE9B} .far-inline{color:#c0271d; font-weight:700; background:rgba(255,42,31,.14); border:1px solid rgba(255,42,31,.55); border-radius:5px; padding:1px 6px; font-size:.82em; white-space:nowrap} :root[data-theme="dark"] .far-inline{color:#FFB3AE} /* the "Cus" mini-label */ .cus-label{font-family:var(--font-head); font-weight:700; border:1px solid var(--line-strong); border-radius:6px; padding:0 6px; color:var(--cyan); display:inline-block; line-height:1.5} /* inline alert glyphs */ .bolt-inline{color:var(--bolt); filter:drop-shadow(0 0 4px rgba(255,209,71,.5)); font-size:1rem} .flake-inline{color:var(--cyan); filter:drop-shadow(0 0 4px rgba(0,207,255,.5)); font-size:1rem} .sock-inline{color:var(--alert-orange); filter:drop-shadow(0 0 4px rgba(255,158,61,.5)); font-size:1rem} .mtn-inline{color:var(--alert-orange); filter:drop-shadow(0 0 4px rgba(255,158,61,.5)); display:inline-flex; vertical-align:-2px} /* icon chips used before list items (lookup buttons) */ .guide-ic{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; vertical-align:-7px; margin-right:6px; color:var(--cyan); border:1px solid var(--line); border-radius:7px; background:var(--panel-2)} .guide-ic svg{display:block} /* color words */ .c-blue{color:var(--flag-blue); font-weight:700} .c-red{color:var(--flag-red); font-weight:700} .c-pink{color:var(--flag-pink); font-weight:700} .c-orange{color:var(--alert-orange); font-weight:700} .c-cyan{color:var(--cyan); font-weight:700} .u-orange{text-decoration:underline; text-decoration-color:var(--alert-orange); text-underline-offset:2px; color:var(--alert-orange); font-weight:700} /* ---------------------------------------------------------------------------- LIGHT-MODE alert legibility. The app is a dark-only design, so its flag/alert colors (blue, red, pink, orange) are tuned to glow on a dark field and wash out on white. In light mode we therefore render every alert indicator on a small DARK chip — the same dark surface the app uses — so each one reads exactly as it does in the tool. Dark mode is untouched. -------------------------------------------------------------------------- */ :root[data-theme="light"] .c-blue, :root[data-theme="light"] .c-red, :root[data-theme="light"] .c-pink, :root[data-theme="light"] .c-orange, :root[data-theme="light"] .c-cyan, :root[data-theme="light"] .u-orange{ background:#0f2036; border:1px solid rgba(179,239,255,.18); border-radius:5px; padding:0 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* keep the app's exact bright hues on that dark chip */ :root[data-theme="light"] .c-blue{color:#00CFFF} :root[data-theme="light"] .c-red{color:#FF6A61} :root[data-theme="light"] .c-pink{color:#FF8AE8} :root[data-theme="light"] .c-orange{color:#FF9E3D} :root[data-theme="light"] .c-cyan{color:#00CFFF} :root[data-theme="light"] .u-orange{color:#FF9E3D; text-decoration-color:#FF9E3D} /* flag dots: give them the app's dark backing so the glow reads on white */ :root[data-theme="light"] .dot{ outline:3px solid #0f2036; outline-offset:0; box-shadow:0 0 8px currentColor; margin-left:2px; margin-right:6px; } /* age pills: restore the app's bright-on-dark look */ :root[data-theme="light"] .age-pill.age-blue{color:#B3EFFF; background:#243b5e} :root[data-theme="light"] .age-pill.age-yellow{color:#FFD147; background:#1a2740; box-shadow:inset 0 0 0 1px #FFD147} :root[data-theme="light"] .age-pill.age-red{color:#fff; background:#FF2A1F; box-shadow:0 0 8px rgba(255,42,31,.35)} /* distance banners: bright text on a dark chip, as in the app */ :root[data-theme="light"] .caution-inline{color:#FFCE9B; background:#2a1e10; border-color:rgba(255,158,61,.6)} :root[data-theme="light"] .far-inline{color:#FFB3AE; background:#2a1210; border-color:rgba(255,42,31,.6)} /* inline glyphs (⚡ ⚑ ❄) and the mountain icon: dark chip so the color pops */ :root[data-theme="light"] .bolt-inline, :root[data-theme="light"] .flake-inline, :root[data-theme="light"] .sock-inline, :root[data-theme="light"] .mtn-inline{ background:#0f2036; border-radius:5px; padding:1px 5px; border:1px solid rgba(179,239,255,.18); } :root[data-theme="light"] .bolt-inline{color:#FFD147} :root[data-theme="light"] .flake-inline{color:#00CFFF} :root[data-theme="light"] .sock-inline{color:#FF9E3D} :root[data-theme="light"] .mtn-inline{color:#FF9E3D; padding:2px 5px; --code-bg:#0f2036} /* the "Cus" chip and lookup-button icon chips: dark backing in light mode too */ :root[data-theme="light"] .cus-label{color:#00CFFF; background:#0f2036; border-color:rgba(0,207,255,.4)} :root[data-theme="light"] .guide-ic{color:#00CFFF; background:#11203a; border-color:rgba(179,239,255,.18)} /* ============================================================================ Interactive ceiling-adjustment demo (How it works page) ========================================================================== */ /* The demo is a self-contained DARK island in BOTH themes: the app is dark-only, its flag colors are tuned for a dark field, and the SVG's text fills reference these vars. Re-declaring the dark values locally makes the whole demo subtree (SVG + readout) render exactly like the app even on a light page. */ .ceil-demo{ --code-bg:#0b1626; --ice:#B3EFFF; --paper:#ECECEC; --cyan:#00CFFF; --line:rgba(179,239,255,.14); --line-strong:rgba(0,207,255,.35); --stn-dot:#7fa8cf; --text:rgba(236,236,236,.90); --text-faint:rgba(179,239,255,.7); --flag-blue:#00CFFF; --flag-red:#FF2A1F; --flag-pink:#FF8AE8; --demo-grad-top:#0a1422; --demo-grad-bot:#0d1b30; background:#0b1626; border:1px solid var(--line-strong); color:var(--text); border-radius:12px; padding:16px; margin:18px 0} .ceil-demo-instr{font-size:.82rem; line-height:1.55; color:var(--text-faint); margin-bottom:10px} .ceil-demo em{color:var(--text-faint)} .ceil-demo strong{color:#ECECEC} .ceil-demo svg{width:100%; height:auto; display:block; border-radius:8px; background:linear-gradient(180deg,var(--demo-grad-top) 0%,var(--demo-grad-bot) 100%)} .ceil-demo-controls{margin-top:12px} .ceil-demo-controls label{display:block; font-size:.84rem; color:var(--paper); margin-bottom:6px} .ceil-demo-controls label strong{color:var(--cyan)} .ceil-demo-controls input[type=range]{width:100%; accent-color:var(--cyan); cursor:pointer} .ceil-demo-readout{margin-top:12px; font-size:.82rem} .ceil-demo-readout .cr-row{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; border-bottom:1px solid var(--line)} .ceil-demo-readout .cr-row span{color:var(--text-faint)} .ceil-demo-readout .cr-row strong{font-family:var(--font-mono); color:var(--paper)} .ceil-demo-readout .cr-adj strong{color:var(--cyan); font-size:.95rem} .ceil-demo-readout .cr-alert{margin-top:10px; border-radius:8px; padding:7px 10px; font-size:.82rem; font-weight:600; display:none} .ceil-demo-readout .cr-alert.show{display:block} .ceil-demo-readout .cr-alert.t-blue{background:rgba(0,207,255,.14); color:var(--flag-blue); border:1px solid rgba(0,207,255,.4)} .ceil-demo-readout .cr-alert.t-red{background:rgba(255,42,31,.14); color:var(--flag-red); border:1px solid rgba(255,42,31,.45)} .ceil-demo-readout .cr-alert.t-pink{background:rgba(255,138,232,.14); color:var(--flag-pink); border:1px solid rgba(255,138,232,.55)} /* ToS specifics */ .tos-updated{color:var(--text-faint); font-size:.85rem; margin:0 0 14px} .tos-h{color:var(--head); margin:20px 0 6px; font-size:1rem; font-weight:700} .tos-caps{color:var(--text-dim); font-size:.9rem} .legal-link{color:var(--link); text-decoration:underline; cursor:pointer} .legal-link:hover{color:var(--link-hover)} /* topic index cards on the landing page */ .topic-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:18px 0} .topic-card{display:block; text-decoration:none; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 15px} .topic-card:hover{border-color:var(--line-strong)} .topic-card .tc-title{font-family:var(--font-head); color:var(--cyan); font-size:1rem; letter-spacing:.02em; margin-bottom:4px; display:flex; align-items:center; gap:7px} .topic-card .tc-desc{font-size:.85rem; color:var(--text-dim); line-height:1.45} /* FOD card */ .fod-card{display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin:16px 0} .fod-ic{flex:0 0 auto; color:var(--ice); opacity:.8; margin-top:2px} .fod-body p{margin:0 0 8px} /* footer */ .wiki-foot{border-top:1px solid var(--line); margin-top:20px; padding:22px 34px 60px; max-width:820px; color:var(--text-faint); font-size:.82rem} .wiki-foot a{color:var(--link)} /* ============================================================================ Responsive: collapse the sidebar into a drawer on narrow screens ========================================================================== */ /* Very narrow phones (~320px, iPhone SE class): the brand, hamburger and theme toggle together overflow the top bar and force horizontal scroll. The toggle's text label is the least necessary element — the sun/moon icon carries the same meaning, and the button keeps its aria-label and title for screen readers and hover. Only the redundant visible word is dropped. */ @media (max-width:400px){ .theme-toggle .t-label{display:none} .theme-toggle{padding:6px 8px} /* Also trim the bar's own padding/gap — with three items in a 320px bar the 18px sides and 14px gaps are themselves enough to overflow. */ .wiki-top{padding:8px 10px; gap:8px} .wiki-brand span{font-size:.72rem} } @media (max-width:860px){ .nav-toggle{display:inline-flex} /* These two spans reproduce the app's distance banners, which are nowrap there because the app sizes its own card. Inline in guide prose on a narrow phone the full banner text is wider than the column and pushed the page into horizontal scroll, so on mobile they are allowed to wrap. */ .caution-inline, .far-inline{white-space:normal} /* The "Open the tool" link is hidden on mobile, not removed: on a narrow screen the brand + theme toggle + this link overflow the fixed-height top bar and force horizontal scrolling across the whole guide. It stays on desktop (>=861px), where there is room and it is the only link back to the app for someone who landed on a guide page from search. */ .wiki-app-link{display:none} .wiki-shell{display:block} .wiki-nav{ position:fixed; top:57px; left:0; z-index:35; width:280px; max-width:86vw; height:calc(100vh - 57px); transform:translateX(-102%); transition:transform .22s ease; border-right:1px solid var(--line); box-shadow:2px 0 18px rgba(0,0,0,.35); /* Mobile browsers (Safari/Chrome) float a toolbar over the bottom of the viewport that 100vh does not account for, so the last one or two nav links sat underneath it and could not be tapped. The generous bottom padding scrolls those links clear of the chrome. env(safe-area-inset-bottom) adds the notch/home-indicator inset on top of that where the browser reports it, and resolves to 0 elsewhere. 200px was set from live-device testing: 120px measured fine in the sandbox but still did not clear the toolbar on a real phone. Real device wins. */ padding-bottom:calc(200px + env(safe-area-inset-bottom, 0px)); overscroll-behavior:contain; } body.nav-open .wiki-nav{transform:translateX(0)} /* width:100% (not just inset right:0) — the scrim is a fixed-position element and was measuring wider than the viewport on pages whose content overflowed, which itself contributed to the horizontal scroll. Pinning the width and clipping overflow keeps it exactly viewport-sized. */ .nav-scrim{ position:fixed; inset:57px 0 0 0; width:100%; max-width:100%; background:rgba(0,0,0,.45); z-index:34; opacity:0; pointer-events:none; transition:opacity .22s ease; } body.nav-open .nav-scrim{opacity:1; pointer-events:auto} .wiki-main{padding:20px 18px 70px; max-width:none} .wiki-foot{padding:22px 18px 60px; max-width:none} .wiki-main h1{font-size:1.6rem} } @media (min-width:861px){ .nav-scrim{display:none} }