/* ===================================================================== WSVNET — styles.css Боевой статический сайт (вариант А). Источник вида — wsvnet.dc.html + README. Все inline-стили прототипа вынесены сюда классами. Ноль внешних запросов. ===================================================================== */ /* ---------- Fonts ---------- */ /* Локальные @font-face (self-host, подсеты latin/-ext + cyrillic/-ext) вынесены в assets/fonts/fonts.css и подключены в ДО styles.css. Ноль внешних запросов. */ /* ---------- Design tokens ---------- */ :root{ --bg:#0B0B0D; --panel:#0E0E12; --card-hover:#131316; --tx:#ECECEC; --white:#FFFFFF; --muted:#8A8A90; --nav-muted:#9A9AA0; --sec-muted:#9089A0; --faint:#5A5A61; --slash:#3A3A40; --border:#232327; --border-subtle:#17171B; --border-chip:#2E2E33; --sec-border:#241A33; --sec-border-hover:#3A2A5A; --accent:#6D28D9; --accent-hover:#5B21B6; --blue:#2E6BFF; --grid-line:rgba(155,160,175,0.22); --font-ui:'Archivo','Golos Text',system-ui,-apple-system,sans-serif; --font-display:'Archivo Black','Onest',sans-serif; --font-mono:'Space Mono','JetBrains Mono',ui-monospace,monospace; --ease:cubic-bezier(0.16,1,0.3,1); --maxw:1240px; --pad-x:clamp(18px,5vw,48px); --noise:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200.34%200.34%200.34%200%200'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url%28%23g%29'/%3E%3C/svg%3E"); --frost:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.7'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='300'%20height='300'%20filter='url%28%23f%29'/%3E%3C/svg%3E"); } /* ---------- Reset / base ---------- */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;background:var(--bg);color:var(--tx); font-family:var(--font-ui); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; overflow-x:clip; } img{display:block;max-width:100%;} button{font-family:inherit;} a{color:var(--tx);text-decoration:none;} a:hover{color:var(--white);} h1,h2,h3,p{margin:0;} p{text-wrap:pretty;} ::selection{background:var(--accent);color:var(--white);} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;} /* ---------- Fixed background layers ---------- */ .wsv-grid-bg{ position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none; filter:blur(0.8px); -webkit-mask-image:radial-gradient(135% 125% at 50% 50%, #000 44%, rgba(0,0,0,0.06) 100%); mask-image:radial-gradient(135% 125% at 50% 50%, #000 44%, rgba(0,0,0,0.06) 100%); } .wsv-vignette{ position:fixed;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,#0B0B0D 0%,rgba(11,11,13,0) 17%,rgba(11,11,13,0) 83%,#0B0B0D 100%); } .wsv-grain{ position:fixed;inset:0;z-index:200;pointer-events:none; background-image:var(--noise);background-size:160px 160px;opacity:0.11; } .wsv-root{position:relative;} /* ---------- Layout ---------- */ .wsv-container{ max-width:var(--maxw);margin:0 auto; padding-left:var(--pad-x);padding-right:var(--pad-x); } .wsv-section{ padding-top:clamp(72px,10vw,132px); padding-bottom:clamp(72px,10vw,132px); } section[id]{scroll-margin-top:80px;} /* ---------- Buttons ---------- */ .wsv-btn{ font-family:var(--font-ui);font-weight:600; display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:2px;cursor:pointer;text-decoration:none;line-height:1; transition:background .22s ease,border-color .22s ease; } .wsv-btn-primary{color:var(--white);background:var(--accent);border:1px solid var(--accent);} .wsv-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white);} .wsv-btn-lg{font-size:16px;padding:15px 26px;gap:10px;} /* ---------- Header ---------- */ .wsv-header{ position:sticky;top:0;z-index:50;background:var(--bg); border-bottom:1px solid var(--border); } .wsv-header-inner{ max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x); height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px; } .wsv-brand{display:flex;align-items:center;gap:11px;color:var(--tx);flex-shrink:0;} .wsv-brand-mark{height:26px;width:auto;} .wsv-brand-word{font-family:var(--font-ui);font-weight:700;font-size:19px;letter-spacing:-0.01em;} .wsv-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);} .wsv-nav a{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--nav-muted);transition:color .2s ease;} .wsv-nav a:hover{color:var(--white);} .wsv-header-right{display:flex;align-items:center;gap:12px;} .wsv-lang{display:inline-flex;border:1px solid var(--border);border-radius:2px;overflow:hidden;} .wsv-lang-btn{ border:0;background:transparent;cursor:pointer;line-height:1; font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;padding:6px 11px;color:var(--muted); } .wsv-lang-btn[aria-pressed="true"]{background:var(--accent);color:var(--white);} .wsv-burger{ display:none;align-items:center;justify-content:center;width:40px;height:40px; background:transparent;border:1px solid var(--border);border-radius:2px;color:var(--tx);cursor:pointer; } .wsv-burger-close{display:none;} .wsv-burger[aria-expanded="true"] .wsv-burger-open{display:none;} .wsv-burger[aria-expanded="true"] .wsv-burger-close{display:inline;} /* ---------- Mobile menu ---------- */ .wsv-mobile-menu{ position:fixed;top:64px;left:0;right:0;z-index:40;background:var(--bg); border-bottom:1px solid var(--border);max-height:calc(100vh - 64px);overflow-y:auto; } .wsv-mobile-menu[hidden]{display:none;} .wsv-mobile-menu nav{padding:10px var(--pad-x) 26px;display:flex;flex-direction:column;} .wsv-mobile-menu nav a:not(.wsv-btn){ display:block;padding:16px 2px;border-bottom:1px solid var(--border-subtle); font-family:var(--font-ui);font-weight:600;font-size:19px;color:var(--tx); } /* ---------- Reveal on scroll (progressive enhancement via .wsv-js) ---------- */ .wsv-js [data-reveal]{ opacity:0;transform:translateY(28px); transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);will-change:opacity,transform; } .wsv-js [data-reveal].is-revealed{opacity:1;transform:none;} /* ---------- Eyebrow + H2 ---------- */ .wsv-eyebrow{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase; display:flex;align-items:center;gap:10px; } .wsv-eyebrow-n{color:var(--accent);} .wsv-eyebrow-s{color:var(--slash);} .wsv-eyebrow-l{color:var(--muted);} .wsv-h2{ margin-top:16px;font-family:var(--font-display);font-weight:400; font-size:clamp(30px,4.4vw,54px);line-height:1.02;letter-spacing:-0.02em;color:var(--tx); } .wsv-h2-narrow{max-width:16ch;} .wsv-h2-wide{max-width:18ch;} .wsv-h2-security{font-size:clamp(32px,4.8vw,58px);} .wsv-accent{color:var(--accent);} /* ============ HERO ============ */ .wsv-hero-grid{ padding-top:clamp(20px,3vh,44px);padding-bottom:clamp(64px,10vh,120px); display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,0.85fr); gap:clamp(32px,6vw,80px);align-items:center; } .wsv-hero-title{ position:relative;display:inline-block;margin:0; font-family:var(--font-display);font-weight:400;font-size:clamp(50px,9.4vw,144px); line-height:0.88;letter-spacing:-0.04em;color:var(--tx); } .wsv-hero-ghost{position:absolute;left:0;top:0;mix-blend-mode:screen;pointer-events:none;} .wsv-hero-ghost-a{color:var(--accent);transform:translateX(2px);opacity:0.55;} .wsv-hero-ghost-b{color:var(--blue);transform:translateX(-2px);opacity:0.45;} .wsv-hero-main{position:relative;} .wsv-hero-bar{width:96px;height:3px;background:var(--accent);margin:clamp(22px,3vw,32px) 0;} .wsv-hero-slogan{ font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4.8vw,58px); line-height:0.98;letter-spacing:-0.02em;color:var(--tx); } .wsv-hero-sub{ margin-top:clamp(24px,3vw,32px);max-width:52ch; font-family:var(--font-ui);font-size:clamp(16px,1.4vw,18px);line-height:1.62;color:var(--muted); } .wsv-actions{ margin-top:clamp(30px,4vw,42px);display:flex;align-items:center; gap:clamp(14px,2vw,22px);flex-wrap:wrap; } /* hero visual */ .wsv-hero-show{position:relative;min-height:clamp(360px,44vw,540px);width:100%;} /* Без overflow:hidden — иначе щит режется по краю контейнера рублеными краями. Щит показываем целиком, с плавными родными краями. */ .wsv-hero-letter-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;} .wsv-hero-letter{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(200px,29vw,330px);height:auto;z-index:0;pointer-events:none;user-select:none; filter:brightness(0.66) contrast(1.04) drop-shadow(0 10px 26px rgba(0,0,0,0.55)); } .wsv-folder{ /* Высота папки: верхняя кромка зафиксирована — сумма (bottom + height) постоянна. Низ растянут вниз на ~35px от «короткого» вида — среднее между двумя вариантами. */ position:absolute;left:clamp(14px,5%,30px);right:clamp(14px,5%,30px);bottom:calc(clamp(16px,5%,36px) + 45px); height:calc(clamp(200px,54%,290px) + 24px - 45px); background:rgba(40,40,47,0.42); -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25); filter:drop-shadow(0 34px 60px rgba(0,0,0,0.5)); z-index:2;will-change:transform; } .wsv-folder-frost{ position:absolute;inset:0;background-image:var(--frost);background-size:300px 300px; opacity:0.5;mix-blend-mode:overlay;pointer-events:none;z-index:1; } .wsv-folder-sheen{ position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0) 34%); } .wsv-folder-border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;} .wsv-folder-label{ position:absolute;top:7px;left:clamp(18px,2.6vw,24px);z-index:2; font-family:var(--font-mono);font-size:13px;letter-spacing:0.04em;color:var(--tx); } .wsv-folder-body{ position:absolute;left:0;right:0;top:30px;bottom:0;z-index:2; display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.6vw,24px); } .wsv-folder-top{display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;} .wsv-folder-arrow{color:var(--tx);display:inline-flex;} .wsv-folder-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;} .wsv-folder-badge{ width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.28); display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; } .wsv-folder-badge img{width:17px;height:auto;opacity:0.92;} .wsv-folder-secure{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-mono);font-size:14px;letter-spacing:0.02em;color:var(--tx); } .wsv-folder-tick{width:2px;height:16px;background:rgba(255,255,255,0.5);display:inline-block;} /* ============ PLATFORM STRIP ============ */ .wsv-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .wsv-strip-inner{ padding-top:20px;padding-bottom:20px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .wsv-strip-label{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted); } .wsv-plat-icons{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;} .wsv-plat{display:inline-flex;align-items:center;gap:8px;color:var(--muted);} .wsv-plat span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;} /* ============ FEATURES (spotlight) ============ */ .wsv-features-grid{ margin-top:clamp(36px,5vw,56px); position:relative;overflow:hidden; background:var(--border);border:1px solid var(--border); display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px; } .wsv-spot-card{ position:relative;background:var(--bg);padding:clamp(26px,3vw,40px);min-height:196px; transition:background .3s ease,box-shadow .3s ease; } .wsv-spot-inner{ position:relative;z-index:2;display:flex;flex-direction:column;gap:15px; transition:opacity .4s ease,transform .35s ease; } .wsv-card-ic{color:var(--tx);display:block;transition:color .35s ease;} .wsv-card-title{font-family:var(--font-ui);font-weight:700;font-size:clamp(19px,1.7vw,22px);letter-spacing:-0.01em;color:var(--tx);} .wsv-card-desc{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--muted);} /* moving spotlight glow (desktop, screen-blended over the grid) */ .wsv-spot-glow{ position:absolute;left:var(--spot-x,50%);top:var(--spot-y,50%); width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%; pointer-events:none;z-index:4;opacity:0;transition:opacity .35s ease;mix-blend-mode:screen; background:radial-gradient(circle,rgba(109,40,217,0.20),rgba(109,40,217,0) 62%); } /* Desktop hover: dim others, light the hovered (только ≥901px — иначе на мобильных работает JS-режим «карточка по центру», а hover-эффекты не должны залипать при тапе) */ @media (hover:hover) and (pointer:fine) and (min-width:901px){ .wsv-spot-grid:hover .wsv-spot-inner{opacity:0.28;} .wsv-spot-card:hover .wsv-spot-inner{opacity:1;transform:translateY(-2px);} .wsv-features-grid:hover .wsv-spot-glow{opacity:1;} .wsv-features-grid .wsv-spot-card:hover{background:var(--card-hover);box-shadow:inset 0 2px 0 var(--accent);} .wsv-features-grid .wsv-spot-card:hover .wsv-card-ic{color:var(--accent);} } /* Touch / no-hover: highlight the card nearest screen center (JS-driven) */ .wsv-spot-grid.is-centered .wsv-spot-inner{opacity:0.28;} .wsv-spot-grid.is-centered .wsv-spot-card.is-active .wsv-spot-inner{opacity:1;} .wsv-features-grid.is-centered .wsv-spot-card.is-active{background:var(--card-hover);box-shadow:inset 0 2px 0 var(--accent);} .wsv-features-grid.is-centered .wsv-spot-card.is-active .wsv-card-ic{color:var(--accent);} /* ============ SECURITY ============ */ .wsv-security{ position:relative;overflow:hidden;background:rgba(12,9,18,0.62); border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding-top:clamp(80px,11vw,150px);padding-bottom:clamp(80px,11vw,150px); } .wsv-sec-bg{ position:absolute;right:-3%;top:50%;transform:translateY(-50%); width:clamp(280px,42vw,560px);height:auto;opacity:0.05;pointer-events:none; filter:grayscale(1);will-change:transform; } .wsv-security-inner{position:relative;} .wsv-sec-br{display:none;} .wsv-sec-grid{ margin-top:clamp(40px,5vw,64px); display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,24px); } .wsv-sec-card{ display:flex;flex-direction:column;gap:15px; background:rgba(16,11,24,0.42); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); border:1px solid var(--sec-border);padding:clamp(24px,3vw,34px); transition:box-shadow .3s ease,border-color .3s ease; } .wsv-sec-ic{color:var(--accent);display:block;} /* nowrap + clip: при scramble заголовок не переносится на 2-ю строку и не толкает вёрстку. Фикс. line-height + height: скрэмбл подставляет символы из запасного (более высокого) шрифта — без этого строка распухала на ~3px и дёргала карточку (заметно в EN, где база — латиница). */ .wsv-sec-title{font-family:var(--font-ui);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-0.01em;color:var(--tx);height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:clip;} .wsv-sec-desc{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--sec-muted);} .wsv-sec-card[data-sec] .wsv-sec-desc,.wsv-sec-card[data-sec] .wsv-reveal{min-height:3em;} @media (hover:hover) and (pointer:fine) and (min-width:901px){ .wsv-sec-card:hover{border-color:var(--sec-border-hover);box-shadow:inset 0 2px 0 var(--accent);} } .wsv-sec-card.is-centered{border-color:var(--sec-border-hover);box-shadow:inset 0 2px 0 var(--accent);} /* privacy blur-reveal */ .wsv-reveal{position:relative;} .wsv-reveal-blur{filter:blur(5px);opacity:0.85;transition:filter .4s ease,opacity .4s ease;color:var(--sec-muted);font-family:var(--font-ui);font-size:15px;line-height:1.6;} .wsv-reveal-sharp{ position:absolute;inset:0;color:var(--tx);font-family:var(--font-ui);font-size:15px;line-height:1.6; -webkit-mask-image:radial-gradient(circle 115px at var(--mx,-999px) var(--my,-999px),#000 0,#000 55%,transparent 82%); mask-image:radial-gradient(circle 115px at var(--mx,-999px) var(--my,-999px),#000 0,#000 55%,transparent 82%); } .wsv-reveal.is-revealed .wsv-reveal-blur{filter:none;opacity:1;} /* ============ TECHNOLOGY ============ */ .wsv-tech-body{margin-top:clamp(28px,4vw,40px);max-width:780px;display:flex;flex-direction:column;gap:26px;} .wsv-tech-lead{font-family:var(--font-ui);font-size:clamp(16px,1.4vw,18px);line-height:1.62;color:var(--tx);} .wsv-tech-note{padding-top:20px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--faint);} .wsv-proto{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;} .wsv-chip{ font-family:var(--font-mono);font-size:13px;white-space:nowrap;color:var(--tx); background:var(--card-hover);border:1px solid var(--border-chip);border-radius:2px;padding:9px 15px; transition:border-color .2s ease; } .wsv-chip:hover{border-color:var(--accent);} .wsv-proto-suffix{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:4px;} /* ============ DOWNLOADS ============ */ .wsv-downloads{background:rgba(12,12,15,0.55);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .wsv-dl-stack{margin-top:clamp(44px,5vw,64px);display:flex;flex-direction:column;gap:32px;max-width:780px;} .wsv-dlfolder{ position:relative;width:100%;height:90px;overflow:hidden; background:rgba(40,40,47,0.42); -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25); filter:drop-shadow(0 22px 40px rgba(0,0,0,0.4)); transition:height .5s var(--ease); } .wsv-dlfolder.is-open{height:220px;} .wsv-dl-head{ position:relative;z-index:2;display:block;width:100%;background:transparent;border:0;cursor:pointer; text-align:left;padding:9px clamp(16px,2.2vw,20px) 0;color:var(--tx); } .wsv-dl-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;} .wsv-dl-name{display:inline-flex;align-items:center;gap:9px;} .wsv-dl-ic{color:var(--tx);display:inline-flex;} .wsv-dl-name>span:last-child{font-family:var(--font-ui);font-weight:600;font-size:15px;letter-spacing:-0.01em;} .wsv-dl-chev{display:inline-flex;color:var(--muted);margin-top:18px;transition:transform .4s var(--ease);} .wsv-dlfolder.is-open .wsv-dl-chev{transform:rotate(180deg);} .wsv-dl-store{font-family:var(--font-mono);font-size:13px;letter-spacing:0.02em;color:var(--muted);margin-top:14px;} .wsv-dl-body{ position:relative;z-index:2;padding:14px clamp(16px,2.2vw,20px) 20px; opacity:0;transition:opacity .3s ease; } .wsv-dlfolder.is-open .wsv-dl-body{opacity:1;} .wsv-dl-details{border-top:1px solid rgba(255,255,255,0.10);padding-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:var(--muted);} .wsv-dl-btn{border-radius:3px;font-size:15px;padding:12px 22px;gap:10px;margin-top:14px;cursor:default;} .wsv-dl-note{margin-top:22px;font-family:var(--font-mono);font-size:12px;color:var(--faint);} /* ============ FAQ ============ */ .wsv-faq-container{max-width:900px;} .wsv-faq-list{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--border);} .wsv-faq-item{border-bottom:1px solid var(--border);} .wsv-faq-q{ width:100%;background:transparent;border:0;cursor:pointer; display:flex;align-items:center;gap:20px;padding:clamp(20px,2.5vw,26px) 0; text-align:left;color:var(--tx);transition:color .2s ease; } .wsv-faq-q:hover{color:var(--white);} .wsv-faq-num{font-family:var(--font-mono);font-size:13px;color:var(--accent);flex-shrink:0;width:26px;} .wsv-faq-text{flex:1;font-family:var(--font-ui);font-weight:600;font-size:clamp(16px,1.6vw,19px);letter-spacing:-0.01em;} .wsv-faq-chev{display:inline-flex;color:var(--muted);transition:transform .45s var(--ease);} .wsv-faq-item.is-open .wsv-faq-chev{transform:rotate(180deg);} .wsv-faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s var(--ease),opacity .4s ease;} .wsv-faq-item.is-open .wsv-faq-a{max-height:48em;opacity:1;} .wsv-faq-a p{padding:0 0 clamp(22px,2.5vw,28px) 46px;font-family:var(--font-ui);font-size:16px;line-height:1.62;color:var(--muted);max-width:64ch;} .wsv-faq-contact{margin-top:clamp(28px,4vw,40px);font-family:var(--font-ui);font-size:16px;color:var(--muted);} .wsv-faq-contact-link{color:var(--tx);border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .2s ease;} .wsv-faq-contact-link:hover{color:var(--white);} /* ============ FOOTER ============ */ .wsv-footer{border-top:1px solid var(--border);background:var(--bg);padding:clamp(56px,7vw,88px) 0 40px;} .wsv-foot-grid{display:grid;gap:clamp(28px,3.5vw,56px);grid-template-columns:1.5fr 1fr 1fr 1.15fr;} .wsv-foot-grid>div{min-width:0;} .wsv-foot-grid a{overflow-wrap:anywhere;} .wsv-foot-desc{margin-top:16px;max-width:34ch;font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--muted);} .wsv-foot-h{margin-bottom:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);font-weight:400;} .wsv-foot-links{display:flex;flex-direction:column;gap:12px;} .wsv-foot-links a{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--muted);transition:color .2s ease;} .wsv-foot-links a:hover{color:var(--tx);} .wsv-foot-contacts{display:flex;flex-direction:column;gap:16px;} .wsv-foot-contact{display:flex;flex-direction:column;gap:5px;} .wsv-foot-clabel{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);} .wsv-foot-email{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--muted);transition:color .2s ease;} .wsv-foot-email:hover{color:var(--tx);} .wsv-foot-bottom{ margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--border); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--font-mono);font-size:12px;color:var(--faint); } @media (max-width:600px){.wsv-foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:10px;}} /* ============ Keyframes ============ */ @keyframes wsvFade{from{opacity:0;}to{opacity:1;}} @keyframes wsvSlide{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}} /* ============ Responsive ============ */ @media (max-width:1024px){ .wsv-nav{display:none !important;} .wsv-burger{display:inline-flex !important;} } @media (min-width:1025px){ .wsv-mobile-menu{display:none !important;} } @media (max-width:980px){ .wsv-hero-grid{grid-template-columns:1fr !important;} .wsv-hero-show{display:none !important;} } @media (max-width:820px){ .wsv-foot-grid{grid-template-columns:repeat(2,1fr) !important;} } @media (max-width:600px){ .wsv-plat-icons{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:14px 12px !important;width:100%;} .wsv-proto{gap:7px;} .wsv-chip{font-size:11px !important;padding:7px 8px !important;flex:1 1 auto;text-align:center;} .wsv-proto-suffix{flex:1 1 100%;margin-left:0 !important;margin-top:12px;} .wsv-sec-br{display:block;} } @media (max-width:560px){ .wsv-actions{flex-direction:column !important;align-items:stretch !important;} .wsv-actions>*{width:100% !important;justify-content:center !important;} } @media (max-width:480px){ .wsv-foot-grid{grid-template-columns:1fr !important;} } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .wsv-js [data-reveal]{transition:none;opacity:1;transform:none;} .wsv-reveal-blur{filter:none !important;opacity:1 !important;} .wsv-dlfolder,.wsv-dl-chev,.wsv-dl-body,.wsv-faq-a,.wsv-faq-chev,.wsv-spot-inner,.wsv-spot-card{transition:none !important;} } /* ============ LEGAL PAGES (standalone: /privacy/ and /terms/) ============ */ .wsv-backhome{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--nav-muted); transition:color .2s ease; } .wsv-backhome:hover{color:var(--white);} .wsv-backhome svg{flex-shrink:0;} .wsv-legalpage{padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(64px,8vw,110px);} .wsv-legalpage-inner{max-width:56rem;} .wsv-doc-head{ margin-bottom:clamp(28px,4vw,44px);padding-bottom:clamp(20px,2.6vw,28px); border-bottom:1px solid var(--border); } .wsv-doc-eyebrow{ font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent); } .wsv-doc-title{ margin-top:12px;font-family:var(--font-display);font-weight:400; font-size:clamp(29px,4.2vw,50px);line-height:1.04;letter-spacing:-0.02em;color:var(--tx); } .wsv-doc-dates{ margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 22px; font-family:var(--font-mono);font-size:12px;color:var(--faint); } .wsv-doc-sec{margin-top:clamp(26px,3.4vw,42px);} .wsv-doc-sec>h2{ font-family:var(--font-ui);font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-0.01em;color:var(--tx); display:flex;gap:12px;align-items:baseline; } .wsv-doc-sec>h2 .n{color:var(--accent);font-family:var(--font-mono);font-size:13px;flex-shrink:0;} .wsv-doc-sub{margin-top:22px;} .wsv-doc-sub h3{font-family:var(--font-ui);font-weight:600;font-size:16px;letter-spacing:-0.01em;color:var(--tx);} .wsv-doc-sec p,.wsv-doc-sub p{ margin-top:12px;max-width:72ch; font-family:var(--font-ui);font-size:15px;line-height:1.75;color:var(--muted); } .wsv-doc ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;} .wsv-doc li{ position:relative;padding-left:22px;max-width:72ch; font-family:var(--font-ui);font-size:15px;line-height:1.7;color:var(--muted); } .wsv-doc li::before{content:"";position:absolute;left:2px;top:0.62em;width:6px;height:6px;background:var(--accent);border-radius:1px;} .wsv-doc a{color:var(--tx);border-bottom:1px solid var(--accent);padding-bottom:1px;transition:color .2s ease;overflow-wrap:anywhere;} .wsv-doc a:hover{color:var(--white);}