/* ══════════════════════════════════════════════ ШАПКА САЙТА · Surf Sports Общий файл для всех страниц. Режим задаётся атрибутом на : data-nav="over" — прозрачная поверх фото (главная, очки) data-nav="solid" — белая с самого начала (остальные страницы) ══════════════════════════════════════════════ */ /* Значения по умолчанию — нужны страницам, где нет инлайновых переменных первого экрана. */ :root{ --ink:#0A1A22; --amber:#C7E82F; --on-accent:#131A03; --f-display:'Archivo',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-data:'JetBrains Mono',ui-monospace,monospace; } /* ── Акцент шапки: следует за режимом ── поверх фото — лайм, на белом — синий сайта ── */ /* поверх фото — лайм */ body[data-nav="over"]{ --nav-accent:var(--amber); --nav-on-accent:var(--on-accent); } /* на белом фоне — синий сайта. Правило ниже, поэтому перебивает лайм при прокрутке. */ body[data-nav="solid"], body[data-nav="over"].is-scrolled{ --nav-accent:#0d6efd; --nav-on-accent:#fff; } /* ════════════════════ ШАПКА САЙТА — четыре варианта подачи Переключаются атрибутом data-nav на ════════════════════ */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:1000; transition:background .3s, border-color .3s, box-shadow .3s, transform .35s; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; } .nav-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; } .nav-logo-mark{ display:flex; width:26px; color:var(--nav-accent); transition:color .3s; } .nav-logo-mark svg{ width:100%; height:auto; } .nav-logo-text{ font-family:var(--f-display); font-size:19px; font-weight:800; letter-spacing:-.03em; text-transform:uppercase; } /* тайный вход в админку — буква ничем не выдаёт себя. !important нужен: подсветку могут задавать styles.css и Bootstrap. */ .nav-logo #secret-u, .nav-logo #secret-u:hover, .nav-logo #secret-u:focus, .nav-logo #secret-u:active, .nav-logo #secret-u:focus-visible{ color:inherit !important; background:none !important; background-color:transparent !important; text-decoration:none !important; text-shadow:none !important; border:none !important; outline:none !important; box-shadow:none !important; font:inherit !important; opacity:1 !important; transform:none !important; cursor:inherit !important; -webkit-tap-highlight-color:transparent !important; user-select:none; -webkit-user-select:none; transition:none !important; } .nav-logo #secret-u::before, .nav-logo #secret-u::after{ content:none !important; } .nav-logo:hover #secret-u{ color:inherit !important; } .nav-links{ display:flex; align-items:center; gap:30px; } /* на десктопе меню — часть шапки, поэтому позиционируем поверх ряда */ @media (min-width:992px){ .nav-links{ position:fixed; top:0; left:0; right:0; z-index:1001; height:72px; justify-content:center; pointer-events:none; padding:0 32px; } .nav-links a{ pointer-events:auto; } } .nav-links a{ position:relative; font-family:var(--f-body); font-size:14px; font-weight:500; text-decoration:none; padding:6px 0; transition:color .2s; white-space:nowrap; } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--nav-accent); transform:scaleX(0); transform-origin:left; transition:transform .25s; } .nav-links a:hover::after{ transform:scaleX(1); } .nav-links a i{ margin-right:8px; font-size:13px; } .nav-links a i.fa-glasses{ margin-right:8px; } .nav-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto; } .nav-cart{ position:relative; display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:2px; border:1px solid; background:transparent; font-family:var(--f-body); font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .nav-cart i{ font-size:13px; } .nav-cart-count{ font-family:var(--f-data); font-size:12px; font-weight:500; opacity:.55; } .nav-cart-count::before{ content:'· '; } .nav-admin{ padding:9px 15px; border-radius:2px; background:var(--amber); color:var(--on-accent); font-size:13px; font-weight:600; text-decoration:none; } .nav-close{ display:none; } .nav-burger{ display:none; width:38px; height:38px; padding:0; background:none; border:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .nav-burger span{ width:20px; height:1.5px; background:currentColor; transition:transform .3s, opacity .25s; } body.nav-open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } body.nav-open .nav-burger span:nth-child(2){ opacity:0; } body.nav-open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .nav-scrim{ position:fixed; inset:0; z-index:999; background:rgba(6,16,21,.5); opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(2px); } body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; } /* ── Шапка над фоновым экраном: прозрачная, белеет при прокрутке ── data-nav="over" — страницы с полноэкранным фото (главная) data-nav="solid" — обычные страницы на светлом фоне ── */ /* поверх фото */ body[data-nav="over"] .site-nav{ background:transparent; } body[data-nav="over"] .nav-logo-text, body[data-nav="over"] .nav-burger{ color:#fff; } @media (min-width:992px){ body[data-nav="over"] .nav-links a{ color:#fff; } } body[data-nav="over"] .nav-cart{ border-color:rgba(255,255,255,.45); color:#fff; } body[data-nav="over"] .nav-cart:hover{ background:rgba(255,255,255,.12); } /* прокрутили — та же белая шапка, что на обычных страницах */ body[data-nav="over"] .site-nav.is-stuck{ background:rgba(255,255,255,.97); box-shadow:0 1px 0 rgba(13,18,20,.09); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } body[data-nav="over"] .site-nav.is-stuck .nav-logo-text, body[data-nav="over"] .site-nav.is-stuck .nav-burger{ color:var(--ink); } @media (min-width:992px){ body[data-nav="over"].is-scrolled .nav-links a{ color:var(--ink); } } body[data-nav="over"] .site-nav.is-stuck .nav-cart{ border-color:rgba(13,18,20,.2); color:var(--ink); } body[data-nav="over"] .site-nav.is-stuck .nav-cart:hover{ background:var(--ink); color:#fff; } /* белая с самого начала — для страниц без фонового экрана */ body[data-nav="solid"] .site-nav{ background:rgba(255,255,255,.97); border-bottom:1px solid rgba(13,18,20,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } body[data-nav="solid"] .nav-logo-text, body[data-nav="solid"] .nav-burger{ color:var(--ink); } @media (min-width:992px){ body[data-nav="solid"] .nav-links a{ color:var(--ink); } } body[data-nav="solid"] .nav-cart{ border-color:var(--ink); color:var(--ink); } body[data-nav="solid"] .nav-cart:hover{ background:var(--ink); color:#fff; } body[data-nav="solid"] .site-nav.is-stuck{ box-shadow:0 1px 0 rgba(13,18,20,.09); } /* на обычных страницах контент не должен уходить под шапку */ body[data-nav="solid"]{ padding-top:72px; } /* ── Мобильное меню — панель сбоку ── */ @media (max-width:991px){ .nav-burger{ display:flex; } .nav-close{ display:block; } .nav-cart-label{ display:none; } .nav-cart{ padding:10px 13px; } .nav-links{ position:fixed; top:0; right:0; bottom:0; z-index:1001; width:min(78vw, 320px); flex-direction:column; align-items:flex-start; gap:0; padding:96px 28px 32px; background:#0E1A20; transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); overflow-y:auto; } body.nav-open .nav-links{ transform:translateX(0); } .nav-links a{ width:100%; padding:17px 0; font-family:var(--f-display); font-size:19px; font-weight:600; letter-spacing:-.02em; color:#fff !important; border-bottom:1px solid rgba(255,255,255,.1); } .nav-links a::after{ display:none; } .nav-links a i{ width:22px; } /* крестик закрытия */ .nav-close{ position:absolute; top:22px; right:22px; width:42px; height:42px; padding:9px; background:none; border:none; cursor:pointer; color:rgba(255,255,255,.65); transition:color .2s; } .nav-close:hover{ color:#fff; } .nav-close svg{ width:100%; height:100%; } /* контакты и соцсети в боковой панели */ .nav-panel-foot{ display:flex; flex-direction:column; flex:1; width:100%; margin-top:22px; /* кнопка сразу под пунктами меню */ padding-top:0; } .nav-panel-block{ margin-bottom:20px; } .nav-panel-label{ display:block; font-family:var(--f-data); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; } .nav-panel-line{ display:block; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78) !important; text-decoration:none; padding:0; border:none; font-family:var(--f-body); font-weight:400; } .nav-panel-line:hover{ color:#fff !important; } .nav-panel-line.is-plain{ pointer-events:none; } /* ── WhatsApp кнопкой ── */ .nav-wa{ display:flex !important; align-items:center; justify-content:center; gap:9px; width:100%; padding:12px 16px !important; margin:0 0 4px; background:var(--nav-accent); border:none !important; border-radius:2px; font-family:var(--f-body) !important; font-size:12.5px; font-weight:600; letter-spacing:.01em; /* текст в цвет панели — на лайме тёмный, читается */ color:var(--nav-on-accent) !important; text-decoration:none; transition:filter .2s; } .nav-wa:hover{ filter:brightness(1.08); } .nav-wa i{ width:auto !important; margin:0; font-size:17px; line-height:1; color:var(--nav-on-accent) !important; } /* текст в отдельном span — задаём напрямую, иначе его перебивают стили ссылок панели */ .nav-wa span{ font-family:var(--f-body) !important; font-size:12.5px !important; font-weight:600 !important; letter-spacing:.01em !important; text-transform:none !important; color:var(--nav-on-accent) !important; line-height:1.2; } .nav-social{ display:flex; gap:9px; margin:auto 0 20px; /* соцсети уходят к низу панели */ padding-top:40px; } .nav-social a{ width:38px; height:38px; padding:0 !important; margin:0; display:inline-flex !important; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:2px; color:rgba(255,255,255,.7) !important; font-size:14px; line-height:1; transition:border-color .2s, color .2s, background .2s; } /* иконка внутри — по центру, без наследуемых отступов */ .nav-social a i{ display:block; width:auto; margin:0; line-height:1; } .nav-social a:hover{ border-color:var(--amber); background:var(--amber); color:var(--on-accent) !important; } /* адрес — как реквизит, мелко и приглушённо */ .nav-panel-legal{ display:block; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); font-family:var(--f-body); font-size:10.5px; font-weight:400; line-height:1.65; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.3); } .nav-panel-note{ display:block; font-family:var(--f-data); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); line-height:1.7; } /* панель — колонка с прижатым низом */ .nav-links{ display:flex; justify-content:flex-start; padding-bottom:36px; transition:transform .34s cubic-bezier(.4,0,.2,1), background .3s, box-shadow .3s; } /* ── Светлая панель: когда шапка белая ── data-nav="solid" — всегда, data-nav="over" — после прокрутки ── */ body[data-nav="solid"] .nav-links, body[data-nav="over"].is-scrolled .nav-links{ background:#fff; box-shadow:-14px 0 40px rgba(13,18,20,.16); } body[data-nav="solid"] .nav-links a, body[data-nav="over"].is-scrolled .nav-links a{ color:var(--ink) !important; border-bottom-color:rgba(13,18,20,.1); } body[data-nav="solid"] .nav-close, body[data-nav="over"].is-scrolled .nav-close{ color:rgba(13,18,20,.45); } body[data-nav="solid"] .nav-close:hover, body[data-nav="over"].is-scrolled .nav-close:hover{ color:var(--ink); } body[data-nav="solid"] .nav-panel-label, body[data-nav="over"].is-scrolled .nav-panel-label{ color:var(--nav-accent); } body[data-nav="solid"] .nav-panel-line, body[data-nav="over"].is-scrolled .nav-panel-line{ color:var(--slate,#5E6B71) !important; } body[data-nav="solid"] .nav-panel-line:hover, body[data-nav="over"].is-scrolled .nav-panel-line:hover{ color:var(--ink) !important; } body[data-nav="solid"] .nav-social a, body[data-nav="over"].is-scrolled .nav-social a{ border-color:rgba(13,18,20,.18); color:rgba(13,18,20,.55) !important; } body[data-nav="solid"] .nav-social a:hover, body[data-nav="over"].is-scrolled .nav-social a:hover{ border-color:var(--nav-accent); background:var(--nav-accent); color:var(--nav-on-accent) !important; } body[data-nav="solid"] .nav-panel-note, body[data-nav="over"].is-scrolled .nav-panel-note{ color:rgba(13,18,20,.35); } body[data-nav="solid"] .nav-panel-legal, body[data-nav="over"].is-scrolled .nav-panel-legal{ color:rgba(13,18,20,.32); border-top-color:rgba(13,18,20,.1); } } @media (min-width:992px){ .nav-scrim{ display:none; } /* контакты, соцсети и крестик — только в мобильной панели. Правило в конце: выше стоят объявления с display:flex !important, которые иначе его перебивают. */ .nav-panel-foot, .nav-panel-foot *, .nav-close{ display:none !important; } }