/* ========================================================== style.css — единый файл стилей сайта 1. Общее: темы, переменные, плавный скролл, reduced-motion 2. body.page-home — главная (поверх Bootstrap) 3. body.page-sub — внутренние страницы (about, contact) ========================================================== */ /* ---------- 1. ОБЩЕЕ ---------- */ :root{ color-scheme:dark; --bg:#1e2124; --card:#282b30; --hi:#36393e; --hi2:#40444b; --text:#cec8c8; --head:#f2f2f2; --border:#3f4348; --pc:#214f8d; --chip:#36393e; --chip-t:#e0e0e0; --hd:#36393e; --hd-t:#f2f2f2; --sh:0 4px 20px rgba(0,0,0,.3); --md-sys-color-background:#1e2124; --md-sys-color-surface-container:#282b30; --md-sys-color-surface-container-high:#36393e; --md-sys-color-surface-container-highest:#40444b; --md-sys-color-on-surface:#f2f2f2; --md-sys-color-on-surface-variant:#cec8c8; --md-sys-color-outline-variant:#3f4348; --md-sys-color-primary-container:#214f8d; --md-sys-color-on-primary-container:#ffffff; --md-sys-color-secondary-container:#36393e; --md-sys-color-on-secondary-container:#e0e0e0; --elevation-shadow:0 4px 20px rgba(0,0,0,.3); /* алиасы заданы один раз и пересчитываются при смене темы */ --bg-color:var(--md-sys-color-background); --card-bg:var(--md-sys-color-surface-container); --card-header-bg:var(--md-sys-color-surface-container-high); --text-color:var(--md-sys-color-on-surface-variant); --header-text-color:var(--md-sys-color-on-surface); --border-color:var(--md-sys-color-outline-variant); --btn-bg:var(--md-sys-color-surface-container-high); --btn-hover:var(--md-sys-color-surface-container-highest); --skill-bg:var(--md-sys-color-secondary-container); --skill-text:var(--md-sys-color-on-secondary-container); } [data-theme=light]{ color-scheme:light; --bg:#e4e4e4; --card:#f4f4f4; --hi:#e8e8e8; --hi2:#dedede; --text:#141414; --head:#141414; --border:#dedede; --pc:#3462a0; --chip:#dce6f2; --chip-t:#3462a0; --hd:linear-gradient(#5b80b3,#466fa8); --hd-t:#fff; --sh:0 2px 10px rgba(0,0,0,.12); --md-sys-color-background:#e4e4e4; --md-sys-color-surface-container:#f4f4f4; --md-sys-color-surface-container-high:#e8e8e8; --md-sys-color-surface-container-highest:#dedede; --md-sys-color-on-surface:#141414; --md-sys-color-on-surface-variant:#141414; --md-sys-color-outline-variant:#dedede; --md-sys-color-primary-container:#3462a0; --md-sys-color-on-primary-container:#ffffff; --md-sys-color-secondary-container:#dce6f2; --md-sys-color-on-secondary-container:#3462a0; --elevation-shadow:0 2px 10px rgba(0,0,0,.12); --card-header-bg:linear-gradient(#5b80b3,#466fa8); } html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- 2. ГЛАВНАЯ (body.page-home) ---------- */ [data-theme=light] body.page-home .card-header{color:#fff;border-bottom-color:#3d649c} html:not(.pl-done) body.page-home{overflow:hidden} body.page-home{background:var(--bg-color);color:var(--text-color);font-family:Inter,Roboto,-apple-system,"Segoe UI",Arial,sans-serif;padding:24px 0 40px;transition:background-color .3s,color .3s} /* Ширина страницы 1600px (двойной класс перебивает .container из Bootstrap) */ body.page-home .container.container-main{max-width:1600px;padding:0 16px} .pl-done body.page-home #preloader{display:none} /* Прелоадер */ body.page-home .preloader-skip{margin-top:14px} body.page-home #preloader{position:fixed;inset:0;z-index:100000;background:rgba(28,27,31,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;transition:opacity .4s,visibility .4s} body.page-home #preloader.hidden{opacity:0;visibility:hidden;pointer-events:none} body.page-home .preloader-box{max-width:460px;width:100%;background:var(--card-bg);border:1px solid var(--border-color);border-radius:28px;padding:36px 28px;text-align:center;box-shadow:0 24px 48px rgba(0,0,0,.4);margin:auto;animation:pop .4s cubic-bezier(.05,.7,.1,1) both} @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.95)}} body.page-home .preloader-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color);box-shadow:0 6px 18px rgba(0,0,0,.25);margin-bottom:16px} body.page-home .preloader-title{font-size:1.25rem;font-weight:700;color:var(--header-text-color);margin-bottom:12px} body.page-home .preloader-text{font-size:.92rem;line-height:1.55;margin-bottom:22px} body.page-home .preloader-spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--border-color);border-top-color:#4f8bd6;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px} @keyframes spin{to{transform:rotate(360deg)}} body.page-home .preloader-status{font-size:.82rem;min-height:20px} body.page-home .preloader-status span{color:var(--header-text-color);font-weight:600} body.page-home .preloader-footnote{margin-top:20px;font-size:.78rem;border-top:1px solid var(--border-color);padding-top:14px;opacity:.8} /* Карточки и кнопки */ body.page-home .card{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-color);box-shadow:var(--elevation-shadow);margin-bottom:20px;border-radius:24px;overflow:hidden;transition:transform .25s,box-shadow .25s,background-color .3s;animation:fadeInUp .5s cubic-bezier(.05,.7,.1,1) both} body.page-home .card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.25)} @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}} body.page-home .card-header{background:var(--card-header-bg);border-bottom:1px solid var(--border-color);color:var(--header-text-color);font-weight:600;padding:16px 20px;font-size:1.05rem} body.page-home .card-body{padding:20px} body.page-home .btn-secondary, body.page-home .start-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-weight:500;padding:0 16px;transition:all .2s} body.page-home .btn-secondary{background:var(--btn-bg);border:1px solid var(--border-color);color:var(--header-text-color)} body.page-home .btn-secondary:hover{background:var(--btn-hover);color:var(--header-text-color)} body.page-home .start-button{background:var(--md-sys-color-primary-container);border-color:transparent;color:var(--md-sys-color-on-primary-container)!important;font-weight:600} body.page-home .start-button:hover{filter:brightness(1.08)} body.page-home .avatar-container img{border-radius:20px;border:2px solid var(--border-color);max-width:100%;height:auto;box-shadow:0 8px 24px rgba(0,0,0,.2)} body.page-home .info-list{list-style:none;padding:0;margin:0} body.page-home .info-list li{padding:12px 0;border-bottom:1px solid var(--border-color);font-size:.95rem;color:var(--header-text-color)} body.page-home .info-list li:last-child{border:0} /* Соцсети — всегда в одну строку */ body.page-home .social-grid{display:flex;flex-wrap:nowrap;gap:12px} body.page-home .social-grid .btn{flex:1 1 0;min-width:0;white-space:nowrap} body.page-home .skill-badge{display:inline-block;background:var(--skill-bg);color:var(--skill-text);padding:6px 14px;border-radius:12px;font-size:.85rem;font-weight:500;margin:4px 3px} body.page-home .icon-16{width:18px;height:18px;vertical-align:middle;margin-right:8px} body.page-home .status-badge{display:inline-block;width:10px;height:10px;background:#34a853;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #34a853} body.page-home .taskbar{background:var(--card-bg);border:1px solid var(--border-color);padding:16px 20px;border-radius:24px;box-shadow:var(--elevation-shadow)} body.page-home .taskbar .time{display:flex;align-items:center;justify-content:flex-end;font-size:.88rem;opacity:.85;color:var(--header-text-color)} body.page-home #copy-toast{font-size:.85rem;color:#34a853;margin-left:10px;font-weight:600} body.page-home .art{border:1px solid var(--border-color);border-radius:20px;box-shadow:var(--elevation-shadow)} /* Плавающие элементы */ body.page-home #scroll-top{position:fixed;bottom:96px;right:24px;width:52px;height:52px;border-radius:18px;align-items:center;justify-content:center;z-index:9996;background:var(--card-bg);border:1px solid var(--border-color);color:var(--header-text-color);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25)} body.page-home #scroll-top:not([hidden]){display:flex} body.page-home .fab-telegram{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:20px;background:linear-gradient(135deg,#08c,#00aced);color:#fff!important;display:none;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 24px rgba(0,136,204,.4);z-index:9997} body.page-home .hero{display:flex;align-items:center;justify-content:center;gap:28px;color:var(--header-text-color);text-align:center;padding:24px 8px 32px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif} body.page-home .hero-img{width:140px;height:140px;object-fit:cover;flex-shrink:0;border-radius:28px;border:2px solid var(--border-color);box-shadow:var(--elevation-shadow)} body.page-home .hero-text{min-width:0} body.page-home .hero-sub{font-size:1rem;margin:0 0 20px} body.page-home .hero-title{font-size:clamp(1.8rem,8vw,4.2rem);font-weight:400;line-height:1.1;margin:0;word-break:break-word} body.page-home .about-q{font-size:1.05rem;font-weight:600;color:var(--header-text-color);margin:0 0 6px} body.page-home #about p{margin:0 0 16px;color:var(--header-text-color)} body.page-home #about s{opacity:.55} /* Поделиться */ body.page-home .share-buttons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px} body.page-home .share-label{font-size:.85rem;font-weight:600;color:var(--header-text-color);margin-right:4px} body.page-home .share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;font-size:1rem;color:#fff!important;text-decoration:none!important;cursor:pointer;transition:opacity .2s,transform .1s} body.page-home .share-btn:hover{opacity:.9;transform:translateY(-1px)} body.page-home .share-native{background:linear-gradient(135deg,#11998e,#38ef7d)} body.page-home .share-vk{background:#4c75a3} body.page-home .share-ok{background:#f4731c} body.page-home .share-tg{background:#08c} body.page-home .share-wa{background:#25d366} body.page-home .share-tw{background:#1da1f2} body.page-home .share-li{background:#0077b5} body.page-home .share-pi{background:#bd081c} body.page-home .share-mail{background:#7f8c8d} body.page-home .share-copy{background:var(--btn-bg);color:var(--header-text-color)!important;border:1px solid var(--border-color)} body.page-home #videoModal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.85);align-items:center;justify-content:center;padding:15px} body.page-home #videoModal:not([hidden]){display:flex} body.page-home .video-box{position:relative;width:100%;max-width:800px;background:#000;border-radius:28px;overflow:hidden} body.page-home .video-close{position:absolute;top:12px;right:18px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;z-index:2;line-height:1} @media (max-width:576px){ body.page-home{padding-top:12px} body.page-home .hero{flex-direction:column;gap:16px} body.page-home .hero-img{width:100px;height:100px;border-radius:22px} body.page-home .taskbar .time{justify-content:center;margin-top:10px} body.page-home .taskbar-actions{justify-content:center!important} body.page-home .fab-telegram{display:flex} body.page-home .preloader-box{padding:28px 20px} body.page-home .social-grid{gap:8px} body.page-home .social-grid .btn{padding:0 8px} } /* На узких экранах остаются только иконки, чтобы 5 кнопок поместились в строку */ @media (max-width:460px){ body.page-home .social-grid .lbl{display:none} body.page-home .social-grid .fa{margin-right:0!important;font-size:1.2rem} } /* ---------- 3. ВНУТРЕННИЕ СТРАНИЦЫ (body.page-sub) ---------- */ body.page-sub *{box-sizing:border-box} body.page-sub{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Roboto,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.55;transition:background-color .3s,color .3s} body.page-sub .wrap{max-width:1600px;margin:0 auto;padding:20px 16px 32px} body.page-sub .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} body.page-sub .btn{min-height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--border);background:var(--hi);color:var(--head);font:600 .85rem Inter,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .1s} body.page-sub .btn:hover{background:var(--hi2);transform:translateY(-1px);color:var(--head);text-decoration:none} body.page-sub .btn.main{background:var(--pc);border-color:transparent;color:#fff} body.page-sub .btn.block{width:100%;margin-bottom:8px} body.page-sub .card{background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--sh);margin-bottom:20px;overflow:hidden;animation:up .5s cubic-bezier(.05,.7,.1,1) both} @keyframes up{from{opacity:0;transform:translateY(14px)}} body.page-sub .ch{background:var(--hd);color:var(--hd-t);border-bottom:1px solid var(--border);padding:14px 20px;font-weight:600;font-size:1.05rem} body.page-sub .cb{padding:20px} body.page-sub .hero{display:flex;gap:20px;align-items:center;padding:24px} body.page-sub .ava{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--pc);flex:none} body.page-sub .sub{margin:0;font-size:.9rem;opacity:.8} body.page-sub h1{margin:2px 0 8px;color:var(--head);font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1;font-weight:700} body.page-sub h2{margin:0 0 6px;color:var(--head);font-size:1.05rem;font-weight:600} body.page-sub p{margin:0 0 12px} body.page-sub .chip{display:inline-block;background:var(--chip);color:var(--chip-t);padding:6px 14px;border-radius:12px;font-size:.85rem;font-weight:500;margin:3px 2px} body.page-sub .grid{display:grid;grid-template-columns:2fr 1fr;gap:20px} body.page-sub .music-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px} body.page-sub .fav{background:var(--hi);border:1px solid var(--border);border-radius:20px;padding:16px;display:flex;flex-direction:column} body.page-sub .fav p{flex:1} body.page-sub .cover{height:170px;border-radius:14px;margin-bottom:12px;display:flex;align-items:flex-end;padding:12px 14px;color:#fff;font-weight:700;letter-spacing:.12em;font-size:1.05rem;text-shadow:0 1px 6px rgba(0,0,0,.6);background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 65%),var(--photo,none),var(--grad);background-size:cover;background-position:center top} body.page-sub .cover.k{--grad:linear-gradient(135deg,#7a1fa2,#e91e8c)} body.page-sub .cover.q{--grad:linear-gradient(135deg,#8b1e1e,#d4a017)} body.page-sub .cover.cs{--grad:linear-gradient(135deg,#3a3f47,#d9822b)} body.page-sub .cover.gc{--grad:linear-gradient(135deg,#1f3d2b,#6a9f3a)} body.page-sub .cover.ow{--grad:linear-gradient(135deg,#1c3f7a,#f99e1a)} body.page-sub .cover.m{--grad:linear-gradient(135deg,#111,#2b2f36 60%,#4a5058)} body.page-sub .now{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} body.page-sub .cover.sm{height:150px} body.page-sub .tag{font-size:.75rem;opacity:.75;text-transform:uppercase;letter-spacing:.06em} body.page-sub .facts{list-style:none;margin:0;padding:0} body.page-sub .facts li{padding:9px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px} body.page-sub .facts li:last-child{border:0} body.page-sub .facts b{color:var(--head);font-weight:600;text-align:right} body.page-sub .tl{border-left:2px solid var(--pc);margin:20px 0 20px 26px;padding:0 20px} body.page-sub .tl div{margin-bottom:14px;position:relative} body.page-sub .tl div:last-child{margin-bottom:0} body.page-sub .tl div::before{content:"";position:absolute;left:-27px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--pc)} body.page-sub .tl b{color:var(--head)} body.page-sub footer{text-align:center;font-size:.85rem;opacity:.7;padding-top:8px} @media (max-width:760px){ body.page-sub .grid{grid-template-columns:1fr} body.page-sub .hero{flex-direction:column;text-align:center} } /* ========================================================== 4. СВЕТЛАЯ ТЕМА — ELEGANCE (XenForo, SuperXen) Значения взяты из экспорта style.xml (палитра, градиенты, тени, радиусы). Тёмная тема не затрагивается: всё ниже работает только при data-theme=light. ========================================================== */ [data-theme=light]{ /* палитра Elegance */ --eg-c1:#f0f4fa;--eg-c2:#cce0f9;--eg-c3:#7ca5e0;--eg-c4:#3462a0;--eg-c5:#23508b; --eg-a1:#fae7e6;--eg-a2:#b93329;--eg-a3:#9c271f;--eg-n1:#fcfcfc; --eg-page:#e4e4e4;--eg-content:#f6f6f6;--eg-footer:#20497f; /* границы и текст: в экспорте нет, значения как в стандартном XenForo (приближённо) */ --eg-border:#dedede;--eg-border-faint:#e9e9e9;--eg-text:#141414;--eg-muted:#8c8c8c; --eg-r:3px;--eg-r-lg:4px; /* градиенты и тени из ui.less */ --eg-vh1:linear-gradient(to bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%),linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 100%); --eg-v1:linear-gradient(to bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%); --eg-v2:linear-gradient(to bottom,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 100%); --eg-block:linear-gradient(to bottom,rgba(0,0,0,.04) 0%,rgba(0,0,0,.044) 10px,rgba(0,0,0,.005) 50px),linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%); --eg-shadow-block:0 0 1px 1px rgba(255,255,255,.5) inset,0 0 3px 1px rgba(128,128,128,.1) inset,1px 1px 3px rgba(0,0,0,.15),0 10px 10px -10px rgba(0,0,0,.2); --eg-shadow-header:0 0 2px rgba(0,0,0,.1),0 5px 5px -5px rgba(0,0,0,.2); --eg-shadow-btn:0 1px 4px 0 rgba(0,0,0,.15); --eg-shadow-nav:0 0 0 1px rgba(0,0,0,.03) inset,0 0 0 1px rgba(0,0,0,.03),0 10px 10px -10px rgba(0,0,0,.2); --eg-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; } /* --- Страница: фон, шрифт, базовый размер 13px --- */ [data-theme=light] body.page-home, [data-theme=light] body.page-sub{ background-color:var(--eg-page); background-image:linear-gradient(to bottom,rgba(255,255,255,.4),rgb(216,216,216) 400px); background-repeat:no-repeat; color:var(--eg-text); font-family:var(--eg-font); font-size:13px; } /* --- Блоки (.block-container) --- */ [data-theme=light] body.page-home .card, [data-theme=light] body.page-sub .card{ border:1px solid var(--eg-content); border-radius:var(--eg-r); background-color:var(--eg-content); background-image:var(--eg-block); box-shadow:var(--eg-shadow-block); color:var(--eg-text); position:relative; } [data-theme=light] body.page-home .card:hover{transform:none;box-shadow:var(--eg-shadow-block)} [data-theme=light] body.page-home .card-body, [data-theme=light] body.page-sub .cb{padding:10px} /* --- Заголовок блока (.block-header) --- */ [data-theme=light] body.page-home .card-header, [data-theme=light] body.page-sub .ch{ margin:-1px; padding:6px 6px 6px 10px; border-bottom:0; background:var(--eg-c4); background-image:var(--eg-vh1); box-shadow:var(--eg-shadow-header); color:var(--eg-n1); font-size:16px; font-weight:400; position:relative; } [data-theme=light] body.page-home .card-header h2{font-size:16px;font-weight:400;color:inherit} /* --- Навигационная панель (.p-nav) --- */ [data-theme=light] body.page-home .site-nav, [data-theme=light] body.page-sub .top{ gap:0!important; margin-bottom:14px; border-radius:var(--eg-r); background:var(--eg-c4); background-image:var(--eg-v1); box-shadow:var(--eg-shadow-nav); overflow:hidden; } [data-theme=light] body.page-home .site-nav .btn, [data-theme=light] body.page-sub .top .btn{ min-height:0; padding:10.5px 14px; border:0; border-radius:0; background:transparent; background-image:none; box-shadow:none; color:var(--eg-c1); font-size:13px; font-weight:400; transform:none; } [data-theme=light] body.page-home .site-nav .btn + .btn, [data-theme=light] body.page-sub .top .btn + .btn{border-left:1px solid rgba(255,255,255,.15)} [data-theme=light] body.page-home .site-nav .btn:hover, [data-theme=light] body.page-sub .top .btn:hover{background:#ededed;color:var(--eg-c4)} [data-theme=light] body.page-home .site-nav .btn:first-child, [data-theme=light] body.page-sub .top .btn:first-child{border-radius:var(--eg-r) 0 0 var(--eg-r)} [data-theme=light] body.page-home .site-nav .btn:last-child, [data-theme=light] body.page-sub .top .btn:last-child{border-radius:0 var(--eg-r) var(--eg-r) 0} /* --- Кнопки (.button, .button--primary) --- */ [data-theme=light] body.page-home .btn-secondary, [data-theme=light] body.page-sub .btn{ min-height:32px; border:0; border-radius:var(--eg-r); background-color:var(--eg-c2); background-image:var(--eg-vh1); box-shadow:var(--eg-shadow-btn); color:var(--eg-c5); font-size:13px; font-weight:400; } [data-theme=light] body.page-home .btn-secondary:hover, [data-theme=light] body.page-sub .btn:hover{background-color:#d8e7fb;color:var(--eg-c5);transform:none} [data-theme=light] body.page-home .start-button, [data-theme=light] body.page-sub .btn.main{ min-height:32px; border:0; border-radius:var(--eg-r); background-color:var(--eg-c4); background-image:var(--eg-vh1); box-shadow:var(--eg-shadow-btn); color:var(--eg-c1)!important; font-weight:400; } [data-theme=light] body.page-home .start-button:hover, [data-theme=light] body.page-sub .btn.main:hover{background-color:var(--eg-c5);filter:none} /* --- Метки (.label / .badge): бейджи навыков и чипы --- */ [data-theme=light] body.page-home .skill-badge, [data-theme=light] body.page-sub .chip{ padding:2px 9px; border-radius:var(--eg-r); background:var(--eg-c4); background-image:var(--eg-vh1); box-shadow:var(--eg-shadow-btn); color:var(--eg-c1); font-size:12px; font-weight:400; } /* --- Внутренние элементы --- */ [data-theme=light] body.page-home .info-list li{font-size:13px;color:var(--eg-text);border-bottom-color:var(--eg-border-faint)} [data-theme=light] body.page-sub .facts li{border-bottom-color:var(--eg-border-faint)} [data-theme=light] body.page-home .avatar-container img, [data-theme=light] body.page-home .hero-img, [data-theme=light] body.page-home .art, [data-theme=light] body.page-sub .ava{border-radius:var(--eg-r-lg);border-color:var(--eg-border)} [data-theme=light] body.page-sub .ava{border-color:var(--eg-c4)} [data-theme=light] body.page-home .art{border-radius:var(--eg-r);box-shadow:var(--eg-shadow-btn)} [data-theme=light] body.page-sub .fav{ border:1px solid var(--eg-border); border-radius:var(--eg-r); background:#eeeeee; box-shadow:0 0 1px 1px rgba(255,255,255,.5) inset; } [data-theme=light] body.page-sub .cover{border-radius:var(--eg-r)} [data-theme=light] body.page-sub .now{border-top-color:var(--eg-border-faint)} [data-theme=light] body.page-sub .tl{border-left-color:var(--eg-c4)} [data-theme=light] body.page-sub .tl div::before{background:var(--eg-c4)} [data-theme=light] body.page-sub .tag{color:var(--eg-muted);opacity:1} [data-theme=light] body.page-sub h1, [data-theme=light] body.page-sub h2{color:var(--eg-c4)} [data-theme=light] body.page-home .hero, [data-theme=light] body.page-home .hero-title, [data-theme=light] body.page-home .hero-sub{color:var(--eg-text)} [data-theme=light] body.page-home .about-q, [data-theme=light] body.page-home #about p{color:var(--eg-text)} [data-theme=light] body.page-home .about-q{color:var(--eg-c4)} /* --- Ссылки: c4, при наведении акцент (красный) --- */ [data-theme=light] body.page-sub a:not(.btn){color:var(--eg-c4);text-decoration:none} [data-theme=light] body.page-sub a:not(.btn):hover{color:var(--eg-a2);text-decoration:underline} [data-theme=light] body.page-home #telegram-card-container a:not(.btn){color:var(--eg-c4)} /* --- Футер (.p-footer) --- */ [data-theme=light] body.page-home .taskbar, [data-theme=light] body.page-sub footer{ border:0; border-top:5px solid var(--eg-c4); border-radius:var(--eg-r); background-color:var(--eg-footer); background-image:var(--eg-v2); box-shadow:0 6px 4px -4px rgba(0,0,0,.2) inset; color:var(--eg-c1); } [data-theme=light] body.page-sub footer{padding:14px 16px;opacity:1;color:var(--eg-c2)} [data-theme=light] body.page-home .taskbar .time{color:var(--eg-c2);opacity:.9} [data-theme=light] body.page-home .taskbar .share-label{color:var(--eg-c1)} /* --- Плавающие кнопки и мелочи --- */ [data-theme=light] body.page-home #scroll-top{ border:0;border-radius:var(--eg-r); background:var(--eg-c4);background-image:var(--eg-vh1); box-shadow:var(--eg-shadow-btn);color:var(--eg-c1); } [data-theme=light] body.page-home .preloader-box{border-radius:var(--eg-r-lg)} [data-theme=light] body.page-home .share-btn{border-radius:var(--eg-r)} /* ========================================================== 5. ТЁМНАЯ ТЕМА — GRANITE (XenForo, SuperXen) Значения взяты из экспорта style_1.xml. Работает для data-theme=dark и без JS (когда атрибута нет), светлая тема не затрагивается. Цвета, которых нет в экспорте (фон обычной кнопки, textColorDimmed), подобраны приближённо. ========================================================== */ html:not([data-theme=light]){ /* палитра Granite (производные посчитаны по формулам из экспорта) */ --gr-page:#3c4146; /* pageBg: фон блоков, навигации, футера */ --gr-content:#282b2e; /* contentBg: фон самой страницы */ --gr-alt:#303438; /* contentAltBg */ --gr-border:#33373b; /* borderColor */ --gr-border-faint:#41464b;/* borderColorFaint */ --gr-text:#dbdee0; /* textColor */ --gr-muted:#7c848d; /* textColorMuted */ --gr-dimmed:#b2b7bc; /* textColorDimmed (приближённо) */ --gr-link:#f6f7f8; /* linkColor */ --gr-c1:#ffffff;--gr-c2:#cce2f8;--gr-c3:#9ac5f2;--gr-c4:#196cc0;--gr-c5:#10467c; --gr-primary:#14599e; /* buttonPrimary = mix(c4, c5) */ --gr-a1:#f9e8e8;--gr-a2:#b23030;--gr-a3:#762020; --gr-btn:#4c5359;--gr-btn-hover:#565d64; /* фон обычной кнопки (приближённо) */ --gr-r:1px; --gr-vh1:linear-gradient(to bottom,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 100%),linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 100%); --gr-soft:linear-gradient(to bottom,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 100%); --gr-inset:0 0 0 1px rgba(0,0,0,.2) inset; --gr-tshadow:0 1px 1px rgba(0,0,0,.2); --gr-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; } /* --- Страница: фон, шрифт, 13px --- */ html:not([data-theme=light]) body.page-home, html:not([data-theme=light]) body.page-sub{ background:var(--gr-content); /* в оригинале поверх ещё текстура bg/02.png (в экспорте её нет) */ color:var(--gr-text); font-family:var(--gr-font); font-size:13px; } /* --- Блоки (.block-container): фон = pageBg, внутренняя рамка borderColor --- */ html:not([data-theme=light]) body.page-home .card, html:not([data-theme=light]) body.page-sub .card{ border:1px solid var(--gr-page); border-radius:var(--gr-r); background:var(--gr-page); box-shadow:0 0 0 1px var(--gr-border) inset; color:var(--gr-text); position:relative; } html:not([data-theme=light]) body.page-home .card:hover{transform:none;box-shadow:0 0 0 1px var(--gr-border) inset} html:not([data-theme=light]) body.page-home .card-body, html:not([data-theme=light]) body.page-sub .cb{padding:10px} /* --- Заголовок блока: без цветной плашки, светлый текст и линия снизу --- */ html:not([data-theme=light]) body.page-home .card-header, html:not([data-theme=light]) body.page-sub .ch{ padding:6px 6px 6px 10px; border-bottom:1px solid var(--gr-border); background:transparent; background-image:var(--gr-soft); color:var(--gr-link); font-size:16px; font-weight:400; position:relative; } html:not([data-theme=light]) body.page-home .card-header h2{font-size:16px;font-weight:400;color:inherit} html:not([data-theme=light]) body.page-home .card-header + .card-body, html:not([data-theme=light]) body.page-sub .ch + .cb{border-top:1px solid var(--gr-border-faint)} /* --- Навигация (.p-nav-inner): тёмная панель, вкладки подсвечиваются синим --- */ html:not([data-theme=light]) body.page-home .site-nav, html:not([data-theme=light]) body.page-sub .top{ gap:0!important; margin-bottom:14px; border:1px solid var(--gr-page); border-radius:var(--gr-r); background-color:var(--gr-page); background-image:var(--gr-soft); box-shadow:0 0 0 1px var(--gr-border) inset; overflow:hidden; } html:not([data-theme=light]) body.page-home .site-nav .btn, html:not([data-theme=light]) body.page-sub .top .btn{ min-height:0; padding:10px 12px 11px; border:0; border-radius:0; background:transparent; background-image:none; box-shadow:none; text-shadow:none; color:var(--gr-link); font-size:13px; font-weight:400; transform:none; } html:not([data-theme=light]) body.page-home .site-nav .btn:hover, html:not([data-theme=light]) body.page-sub .top .btn:hover{ background:var(--gr-c4); background-image:var(--gr-vh1); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset,0 0 0 1px var(--gr-c4); color:var(--gr-c1); } /* --- Кнопки (.button, .button--primary) --- */ html:not([data-theme=light]) body.page-home .btn-secondary, html:not([data-theme=light]) body.page-sub .btn{ min-height:32px; border:0; border-radius:var(--gr-r); background-color:var(--gr-btn); background-image:var(--gr-vh1); box-shadow:var(--gr-inset); text-shadow:var(--gr-tshadow); color:var(--gr-c1); font-size:13px; font-weight:400; } html:not([data-theme=light]) body.page-home .btn-secondary:hover, html:not([data-theme=light]) body.page-sub .btn:hover{background-color:var(--gr-btn-hover);color:var(--gr-c1);transform:none} html:not([data-theme=light]) body.page-home .start-button, html:not([data-theme=light]) body.page-sub .btn.main{ min-height:32px; border:0; border-radius:var(--gr-r); background-color:var(--gr-primary); background-image:var(--gr-vh1); box-shadow:var(--gr-inset); text-shadow:var(--gr-tshadow); color:var(--gr-c1)!important; font-weight:400; } html:not([data-theme=light]) body.page-home .start-button:hover, html:not([data-theme=light]) body.page-sub .btn.main:hover{background-color:var(--gr-c4);filter:none} /* --- Метки (.sx-labelPrimary) --- */ html:not([data-theme=light]) body.page-home .skill-badge, html:not([data-theme=light]) body.page-sub .chip{ padding:2px 9px; border:0; border-radius:var(--gr-r); background:var(--gr-c4); background-image:var(--gr-vh1); box-shadow:var(--gr-inset); text-shadow:var(--gr-tshadow); color:var(--gr-c1); font-size:12px; font-weight:400; } /* --- Внутренние элементы --- */ html:not([data-theme=light]) body.page-home .info-list li{font-size:13px;color:var(--gr-text);border-bottom-color:var(--gr-border-faint)} html:not([data-theme=light]) body.page-sub .facts li{border-bottom-color:var(--gr-border-faint)} html:not([data-theme=light]) body.page-home .avatar-container img, html:not([data-theme=light]) body.page-home .hero-img, html:not([data-theme=light]) body.page-home .art, html:not([data-theme=light]) body.page-sub .ava{border-radius:var(--gr-r);border-color:var(--gr-border)} html:not([data-theme=light]) body.page-sub .ava{border-color:var(--gr-c4)} html:not([data-theme=light]) body.page-sub .fav{ border:1px solid var(--gr-border-faint); border-radius:var(--gr-r); background:var(--gr-alt); box-shadow:none; } html:not([data-theme=light]) body.page-sub .cover{border-radius:var(--gr-r)} html:not([data-theme=light]) body.page-sub .now{border-top-color:var(--gr-border-faint)} html:not([data-theme=light]) body.page-sub .tl{border-left-color:var(--gr-c4)} html:not([data-theme=light]) body.page-sub .tl div::before{background:var(--gr-c4)} html:not([data-theme=light]) body.page-sub .tag{color:var(--gr-muted);opacity:1} html:not([data-theme=light]) body.page-sub h1, html:not([data-theme=light]) body.page-sub h2, html:not([data-theme=light]) body.page-home .about-q{color:var(--gr-link)} html:not([data-theme=light]) body.page-home .hero, html:not([data-theme=light]) body.page-home .hero-title, html:not([data-theme=light]) body.page-home .hero-sub, html:not([data-theme=light]) body.page-home #about p{color:var(--gr-text)} /* --- Ссылки: светлые, при наведении синий c4 (linkHoverColor в Granite) --- */ html:not([data-theme=light]) body.page-sub a:not(.btn){color:var(--gr-link);text-decoration:none} html:not([data-theme=light]) body.page-sub a:not(.btn):hover{color:var(--gr-c3);text-decoration:underline} html:not([data-theme=light]) body.page-home #telegram-card-container a:not(.btn){color:var(--gr-link)} /* --- Футер (.p-footer): тот же pageBg, верхняя линия 2px --- */ html:not([data-theme=light]) body.page-home .taskbar, html:not([data-theme=light]) body.page-sub footer{ border:1px solid var(--gr-page); border-top-width:2px; border-radius:var(--gr-r); background:var(--gr-page); box-shadow:0 0 0 1px var(--gr-border) inset; color:var(--gr-dimmed); } html:not([data-theme=light]) body.page-sub footer{padding:14px 16px;opacity:1} html:not([data-theme=light]) body.page-home .taskbar .time, html:not([data-theme=light]) body.page-home .taskbar .share-label{color:var(--gr-dimmed);opacity:1} /* --- Плавающие кнопки и мелочи --- */ html:not([data-theme=light]) body.page-home #scroll-top{ border:0;border-radius:var(--gr-r); background:var(--gr-c4);background-image:var(--gr-vh1); box-shadow:var(--gr-inset);color:var(--gr-c1); } html:not([data-theme=light]) body.page-home .preloader-box{border-radius:var(--gr-r);background:var(--gr-page)} html:not([data-theme=light]) body.page-home .share-btn{border-radius:var(--gr-r)} /* ========================================================== 6. ВНУТРЕННИЕ СТРАНИЦЫ: карусели (музыка, игры) и «Путь» со сворачиванием Раньше это лежало в