/* Navigator MacUtils — naviutils.com */ /* ───────────────────────────────────────────────────────── Темы. Базовые значения = светлая; тёмная приходит из prefers-color-scheme, а ручной выбор (data-theme на ) перекрывает системный в обе стороны. ───────────────────────────────────────────────────────── */ :root{ --bg:#eef1f8; --bg2:#ffffff; --card:rgba(255,255,255,.66); --card2:rgba(255,255,255,.86); --line:rgba(12,20,40,.12); --line2:rgba(12,20,40,.20); --txt:#0d1422; --muted:#535e73; --accent:#1663d6; --accent2:#7c5cff; --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.88); --menu:#ffffff; --code-bg:rgba(12,20,40,.07); --code-fg:#1a4fa8; --dot:rgba(12,20,40,.20); --shadow-lg:0 24px 60px rgba(20,30,60,.16); --shadow-md:0 14px 34px rgba(20,30,60,.12); --btn-shadow:0 8px 24px rgba(22,99,214,.30); --wall:url(/img/bg-light.svg); --wall-op:.85; --wall-blur:26px; --scrim:linear-gradient(180deg,rgba(238,241,248,.55) 0%,rgba(238,241,248,.86) 42%,rgba(238,241,248,.95) 100%); --radius:18px; --wrap:1180px; color-scheme:light; } @media (prefers-color-scheme: dark){ :root{ --bg:#080a0f; --bg2:#0d1017; --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.08); --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18); --txt:#eef1f7; --muted:#98a2b6; --accent:#5b9bff; --accent2:#7c5cff; --glass:rgba(8,10,15,.72); --glass2:rgba(18,21,29,.86); --menu:#12151d; --code-bg:rgba(255,255,255,.08); --code-fg:#cfe0ff; --dot:rgba(255,255,255,.22); --shadow-lg:0 30px 80px rgba(0,0,0,.55); --shadow-md:0 18px 44px rgba(0,0,0,.45); --btn-shadow:0 8px 24px rgba(47,111,224,.35); --wall:url(/img/bg-dark.svg); --wall-op:.60; --wall-blur:34px; --scrim:linear-gradient(180deg,rgba(8,10,15,.55) 0%,rgba(8,10,15,.88) 44%,rgba(8,10,15,.96) 100%); color-scheme:dark; } } /* ручной выбор — сильнее системного */ :root[data-theme="light"]{ --bg:#eef1f8; --bg2:#ffffff; --card:rgba(255,255,255,.66); --card2:rgba(255,255,255,.86); --line:rgba(12,20,40,.12); --line2:rgba(12,20,40,.20); --txt:#0d1422; --muted:#535e73; --accent:#1663d6; --accent2:#7c5cff; --glass:rgba(255,255,255,.72); --glass2:rgba(255,255,255,.88); --menu:#ffffff; --code-bg:rgba(12,20,40,.07); --code-fg:#1a4fa8; --dot:rgba(12,20,40,.20); --shadow-lg:0 24px 60px rgba(20,30,60,.16); --shadow-md:0 14px 34px rgba(20,30,60,.12); --btn-shadow:0 8px 24px rgba(22,99,214,.30); --wall:url(/img/bg-light.svg); --wall-op:.85; --wall-blur:26px; --scrim:linear-gradient(180deg,rgba(238,241,248,.55) 0%,rgba(238,241,248,.86) 42%,rgba(238,241,248,.95) 100%); color-scheme:light; } :root[data-theme="dark"]{ --bg:#080a0f; --bg2:#0d1017; --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.08); --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18); --txt:#eef1f7; --muted:#98a2b6; --accent:#5b9bff; --accent2:#7c5cff; --glass:rgba(8,10,15,.72); --glass2:rgba(18,21,29,.86); --menu:#12151d; --code-bg:rgba(255,255,255,.08); --code-fg:#cfe0ff; --dot:rgba(255,255,255,.22); --shadow-lg:0 30px 80px rgba(0,0,0,.55); --shadow-md:0 18px 44px rgba(0,0,0,.45); --btn-shadow:0 8px 24px rgba(47,111,224,.35); --wall:url(/img/bg-dark.svg); --wall-op:.60; --wall-blur:34px; --scrim:linear-gradient(180deg,rgba(8,10,15,.55) 0%,rgba(8,10,15,.88) 44%,rgba(8,10,15,.96) 100%); color-scheme:dark; } *{box-sizing:border-box} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%; background:var(--bg); } body{ margin:0;background:transparent;color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Arabic","Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif; font-size:17px;line-height:1.6;letter-spacing:-.01em; overflow-x:hidden; } /* ── обои в стиле macOS ── */ .wall{ position:fixed;inset:0;z-index:-2;pointer-events:none; background:var(--wall) center/cover no-repeat; filter:blur(var(--wall-blur)) saturate(1.05); transform:scale(1.12); opacity:var(--wall-op); } body::before{ /* дымка поверх обоев — ради читаемости текста */ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:var(--scrim); } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{letter-spacing:-.03em;line-height:1.12;margin:0} h1{font-size:clamp(34px,5.4vw,62px);font-weight:700} h2{font-size:clamp(26px,3.4vw,40px);font-weight:650} h3{font-size:20px;font-weight:600} p{margin:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} .muted{color:var(--muted)} .small{font-size:14px} /* ── header ── */ .topbar{ position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px; padding:10px max(22px,calc((100vw - var(--wrap))/2 + 22px)); background:var(--glass);backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line); } .brand{display:flex;align-items:center;gap:10px;font-weight:620;text-decoration:none;font-size:15px;white-space:nowrap} .brand img{border-radius:7px} .nav{display:flex;gap:22px;margin-inline-start:12px;flex:1;min-width:0;overflow:hidden} .nav a{color:var(--muted);text-decoration:none;font-size:14.5px;white-space:nowrap;transition:color .15s} .nav a:hover{color:var(--txt)} .topbar-right{display:flex;align-items:center;gap:10px;margin-inline-start:auto} /* переключатель темы + язык */ .iconbtn,.langbtn{ display:flex;align-items:center;gap:7px;cursor:pointer; background:var(--card);border:1px solid var(--line);color:var(--txt); border-radius:10px;padding:7px 11px;font:inherit;font-size:14px; transition:background .18s,border-color .18s; } .iconbtn{padding:7px 9px} .iconbtn:hover,.langbtn:hover{background:var(--card2);border-color:var(--line2)} /* значок показывает, КУДА переключит клик: светлая тема → луна, тёмная → солнце */ .iconbtn .sun{display:none} :root[data-theme="dark"] .iconbtn .sun{display:block} :root[data-theme="dark"] .iconbtn .moon{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme]) .iconbtn .sun{display:block} :root:not([data-theme]) .iconbtn .moon{display:none} } .langpick{position:relative} .langmenu{ position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:6px; list-style:none;min-width:170px;max-height:60vh;overflow:auto; background:var(--menu);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow-lg);display:none;z-index:60; } .langmenu.open{display:block} .langmenu li{padding:8px 12px;border-radius:9px;cursor:pointer;font-size:14.5px;white-space:nowrap} .langmenu li:hover{background:var(--card2)} .langmenu li[aria-selected="true"]{color:var(--accent);background:rgba(59,130,246,.14)} /* ── buttons ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; background:linear-gradient(180deg,#4b8dfb,#2f6fe0);color:#fff;text-decoration:none; border:0;border-radius:12px;padding:11px 20px;font-weight:600;font-size:15px; box-shadow:var(--btn-shadow);transition:transform .12s,box-shadow .2s,filter .2s; } .btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(1px)} .btn-sm{padding:8px 14px;font-size:14px;border-radius:10px} .btn-lg{padding:14px 26px;font-size:16.5px;border-radius:14px} .btn-block{display:flex;width:100%} .btn-ghost{background:var(--card);border:1px solid var(--line);box-shadow:none;color:var(--txt)} .btn-ghost:hover{background:var(--card2);box-shadow:none} /* ── hero ── */ .hero{position:relative;padding:clamp(48px,7vw,96px) 0 10px} .hero-inner{position:relative;text-align:center} .pill{ display:inline-block;padding:6px 14px;border-radius:999px;font-size:13.5px; background:var(--card);border:1px solid var(--line);color:var(--muted);margin-bottom:22px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .hero h1{max-width:18ch;margin:0 auto} .hero .lead{max-width:62ch;margin:20px auto 0} .lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px)} .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} .chips{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0} .chips li{ font-size:13.5px;color:var(--muted);background:var(--card); border:1px solid var(--line);border-radius:999px;padding:6px 14px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } /* ── sections ── */ .section{padding:clamp(56px,8vw,110px) 0} .section > .lead{margin-top:14px;max-width:70ch} .kicker{ font-size:13px;font-weight:650;letter-spacing:.10em;text-transform:uppercase; color:var(--accent);margin-bottom:12px; } /* ── screenshots ── */ .shot{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); background:var(--bg2);box-shadow:var(--shadow-lg)} .shot img{width:100%} .shot figcaption{padding:12px 16px;font-size:14px;color:var(--muted);border-top:1px solid var(--line); background:var(--card2)} .hero-shot{margin-top:clamp(38px,5vw,62px)} .split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px} /* ── блок «Автопереключение раскладки» (показывается только на русской версии) ── */ .ru-only{display:none} body.lang-ru .ru-only{display:block} .hl{ position:relative;overflow:hidden; border:1px solid var(--line2);border-radius:28px; padding:clamp(28px,4vw,54px); background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(124,92,255,.20) 55%,rgba(236,72,153,.16)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-lg); } .hl-badge{ display:inline-block;padding:5px 13px;border-radius:999px; background:linear-gradient(180deg,#4b8dfb,#2f6fe0);color:#fff; font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin-bottom:16px; } .hl h2{font-size:clamp(28px,4vw,46px)} .hl-lead{color:var(--txt);opacity:.85;margin-top:16px;max-width:66ch;font-size:clamp(16px,1.6vw,19.5px)} .hl .bullets{margin-top:30px} .hl .bullets li{color:var(--txt);opacity:.82} .hl-demo{ margin-top:28px;padding:22px 24px;border-radius:18px; background:var(--card2);border:1px solid var(--line); } /* тёплый вариант яркого блока — «не спать при закрытой крышке» */ .hl-warm{ background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(59,130,246,.16) 50%,rgba(245,158,11,.18)); } .hl-badge-warm{background:linear-gradient(180deg,#28c76f,#16a34a)} .hl-demo-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .kaw-key{display:inline-flex;align-items:center} .kaw-item{font-size:16px;font-weight:600;color:var(--txt)} .warnbox{ display:flex;gap:16px;align-items:flex-start;margin-top:30px; padding:20px 22px;border-radius:18px; background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.42); } .warnbox-ic{font-size:22px;line-height:1.2} .warnbox h3{font-size:17px} .warnbox p{margin-top:8px;font-size:15.5px;color:var(--txt);opacity:.85;max-width:74ch} .demo-row{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(15px,1.7vw,20px);padding:7px 0; } .demo-bad{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;opacity:.75} .demo-arrow{color:var(--accent);font-weight:700} .demo-good{color:var(--txt);font-weight:600} .demo-note{margin-top:12px;font-size:14px;color:var(--muted)} /* ── выбор «Dock или панель задач» ── */ .choice{ margin-top:44px;padding:clamp(24px,3vw,38px);border-radius:24px; border:1px solid var(--line2); background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(59,130,246,.14)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .choice-head h3{margin-top:6px;font-size:clamp(20px,2.4vw,28px)} .choice-head .lead{margin-top:10px} .choice-grid{ display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:26px; } .choice-card{ background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:22px;height:100%; } .choice-card-alt{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .choice-ic{font-size:24px;line-height:1;margin-bottom:10px} .choice-card h4{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em} .choice-card p{margin-top:8px;font-size:15px;color:var(--muted)} .choice-or{ font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);padding:0 4px; } .choice-note{margin-top:18px;font-size:14.5px;color:var(--muted)} /* текст + скриншот в две колонки */ .feature-row{display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:center;margin-top:56px} .feature-row h3{font-size:clamp(20px,2.2vw,26px)} .feature-row .lead{margin-top:12px} .feature-row .bullets{margin-top:20px;gap:12px} /* ── grids / cards ── */ .grid{display:grid;gap:16px;margin-top:38px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:22px;transition:background .2s,transform .2s,border-color .2s,box-shadow .2s; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .card:hover{background:var(--card2);border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow-md)} .card .ic{font-size:22px;margin-bottom:12px;line-height:1} .card p{font-size:15.5px;color:var(--muted)} .card b,.bullets b{color:var(--txt);font-weight:620} .bullets{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px} .bullets li{position:relative;padding-inline-start:26px;font-size:15.5px;color:var(--muted)} .bullets li::before{ content:"";position:absolute;inset-inline-start:6px;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--accent); } code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} code{background:var(--code-bg);border-radius:6px;padding:1px 6px;font-size:.9em;color:var(--code-fg)} kbd{ display:inline-block;background:var(--card2);border:1px solid var(--line2); border-bottom-width:2px;border-radius:7px;padding:2px 7px;font-size:13px; margin-inline-end:3px;color:var(--txt); } /* ── carousel ── */ .carousel{position:relative;margin-top:40px} .track{ position:relative; /* slides' offsetLeft must be scroll-stable */ display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory; padding:6px max(22px,calc((100vw - min(760px,84vw))/2)) 18px; scrollbar-width:none;-ms-overflow-style:none;outline:none; } .track::-webkit-scrollbar{display:none} .slide{ flex:0 0 min(760px,84vw);margin:0;scroll-snap-align:center;border-radius:16px; overflow:hidden;border:1px solid var(--line);background:var(--bg2); box-shadow:var(--shadow-lg); opacity:.45;transform:scale(.965);transition:opacity .35s,transform .35s,border-color .35s; } .slide.active{opacity:1;transform:scale(1);border-color:var(--line2)} .slide img{width:100%} .arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center; background:var(--glass2);border:1px solid var(--line);color:var(--txt); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow-md);transition:background .2s,transform .15s; } .arrow:hover{border-color:var(--line2)} .arrow:active{transform:translateY(-50%) scale(.94)} .prev{inset-inline-start:max(14px,calc((100vw - var(--wrap))/2 - 8px))} .next{inset-inline-end:max(14px,calc((100vw - var(--wrap))/2 - 8px))} .caption{margin-top:12px;min-height:104px} .caption-idx{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:6px;font-weight:600} .caption p{color:var(--muted);margin-top:8px;max-width:64ch;font-size:15.5px} .dots{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px} .dots button{ width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer; background:var(--dot);transition:background .2s,transform .2s; } .dots button.on{background:var(--accent);transform:scale(1.3)} .hint{margin-top:16px;font-size:13.5px;color:var(--muted)} /* ── hotkeys table ── */ .keys-table{ margin-top:46px;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:24px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .keys-table table{width:100%;border-collapse:collapse;margin-top:14px} .keys-table td{padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted);vertical-align:top} .keys-table tr:first-child td{border-top:0} .keys-table td:first-child{width:210px;white-space:nowrap;color:var(--txt)} /* ── settings list ── */ .tabs-list{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:12px} .tabs-list li{ display:flex;gap:16px;align-items:flex-start;background:var(--card); border:1px solid var(--line);border-radius:14px;padding:18px 20px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .tabname{font-size:20px;line-height:1.3} .tabs-list p{font-size:15.5px;color:var(--muted)} /* ── privacy ── */ .privacy{ background:linear-gradient(140deg,rgba(59,130,246,.12),rgba(124,92,255,.10)); border:1px solid var(--line);border-radius:26px;padding:clamp(28px,4vw,52px); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } /* ── price ── */ .pricebox{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch} .pricebox-main,.pricebox-side{ background:var(--card);border:1px solid var(--line);border-radius:24px; padding:clamp(26px,3.4vw,40px); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .pricebox-main{background:linear-gradient(150deg,rgba(59,130,246,.16),var(--card))} .amount{font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-.03em;margin-top:18px} .trial{margin-top:10px;font-size:16px} .pricebox-main .muted{margin-top:16px;font-size:14.5px} .pricebox-side h3{margin-bottom:16px} .pricebox-side .btn{margin-bottom:12px} .steps{margin:22px 0 14px;padding-inline-start:20px;color:var(--muted);font-size:15px;display:grid;gap:8px} /* ── команды установки (curl без «карантина») ── */ .dl-block{margin-bottom:16px;padding:16px 18px;border-radius:16px;background:var(--card2);border:1px solid var(--line)} .dl-block-ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.10)} .dl-h{font-weight:650;font-size:15.5px;margin-bottom:6px} .dl-block .small{margin-bottom:10px} .cmd{display:flex;gap:10px;align-items:stretch} .cmd code{ flex:1;min-width:0;background:var(--code-bg);border-radius:10px;padding:10px 12px; font-size:12.5px;line-height:1.45;color:var(--txt); overflow-wrap:anywhere;user-select:all; } .copy{ flex:0 0 auto;width:42px;border-radius:10px;cursor:pointer; background:linear-gradient(180deg,#28c76f,#16a34a);border:0;color:#fff; display:grid;place-items:center;transition:filter .15s,transform .1s; } .copy:hover{filter:brightness(1.08)} .copy:active{transform:scale(.96)} .copy.done{background:linear-gradient(180deg,#4b8dfb,#2f6fe0)} .dl-direct{margin:18px 0 10px} /* ── footer ── */ .footer{border-top:1px solid var(--line);padding:44px 0;margin-top:40px;background:var(--card)} .footer-inner{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap} .footer .brand{margin-bottom:10px} .footer-links{text-align:end;display:grid;gap:6px} .footer a{color:var(--accent);text-decoration:none} .footer a:hover{text-decoration:underline} /* ── rtl ── */ [dir="rtl"] .arrow svg{transform:scaleX(-1)} /* ── responsive ── */ @media (max-width:900px){ .nav{display:none} .grid-3,.grid-2,.split,.pricebox,.feature-row,.choice-grid{grid-template-columns:1fr} .choice-or{text-align:center} .footer-links{text-align:start} .keys-table td:first-child{width:150px;white-space:normal} } @media (max-width:560px){ body{font-size:16px} .brand span{display:none} .slide{flex-basis:88vw} .prev{inset-inline-start:8px} .next{inset-inline-end:8px} .arrow{width:40px;height:40px} .keys-table{padding:18px} .langbtn span{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} } /* строка про автообновление под шагами установки */ .dl-autoupd{ margin-top:14px;padding:12px 14px;border-radius:12px; background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:var(--txt); }