:root{ --pf-bg:#f3f6fa; --pf-deep:#0a2f4f; --pf-deeper:#072033; --pf-blue:#216aa1; --bs-primary: #216aa1; --bs-primary-rgb: 33, 106, 161; --pf-white:#ffffff; --pf-sep:#e3eaf3; /* высота «первой большой» карточки и расчёт для мелких */ --opt-row-h: 460px; --opt-gap: 24px; } html,body{height:100%} body{font-family:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;background:var(--pf-bg);color:#152335} /* без скруглений, как на рефе */ .card,.btn,.form-control,.navbar,.badge,.dropdown-menu{border-radius:0!important} /* ===== Topbar ===== */ .topbar{background:rgba(10,47,79,.92);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid rgba(255,255,255,.1)} .util-btn{color:#fff;border:1px solid rgba(255,255,255,.35);padding:.45rem .8rem;font-weight:700;font-size:.85rem;display:inline-flex;gap:.45rem;align-items:center;text-decoration:none} .util-btn:hover{background:rgba(255,255,255,.08)} .lang a{color:#cfe2ff;text-decoration:none;font-weight:700;font-size:.85rem;opacity:.85;margin-left:.6rem} .lang a.active{color:#fff;opacity:1} .lang .divider{opacity:.4;margin:0 .35rem} /* HERO и NAVBAR единое целое */ .hero { position: relative; min-height: 800px; color: #fff; display: flex; align-items: center; background: linear-gradient(135deg, #0d6efd 0%, var(--pf-deep) 65%); overflow: hidden; } /* подложка */ .hero::before { content: ""; position: absolute; inset: 0; background: url('img/hero_bg.webp') center/cover no-repeat; opacity: 0.45; } /* убираем корабль и кольца */ .hero-ship, .hero-rings { display: none !important; } /* точечный паттерн (оставляем только его) */ .hero-dots { position: absolute; right: 40px; bottom: 35px; width: 140px; height: 140px; background-image: radial-gradient(rgba(255,255,255,0.4) 1.6px, transparent 1.6px); background-size: 14px 14px; opacity: 0.6; pointer-events: none; } /* ссылки в навбаре белые */ .navbar .nav-link { color: rgba(255,255,255,0.9) !important; font-weight: 700; } .navbar .nav-link:hover { color: #fff !important; } /* логотип белый */ .navbar-brand { color: #fff !important; } /* адаптация */ /* ===== About (как на скриншоте, с разделителями) ===== */ #about{background:var(--pf-white);border-top:1px solid var(--pf-sep);border-bottom:1px solid var(--pf-sep)} .stats-row{display:flex;gap:0} .stat-item{flex:1;position:relative;padding:28px 12px;text-align:center} .stat-item:not(:last-child)::after{content:"";position:absolute;top:10px;bottom:10px;right:0;width:1px;background:var(--pf-sep)} .stat-icon{font-size:2.75rem;color:#9fb4cc;opacity:.6;line-height:1} .stat-value{color:var(--pf-blue);font-weight:900;font-size:1.6rem;letter-spacing:.02em;margin-top:6px} .stat-label{color:#6b7e92;font-weight:600;margin-top:2px} /* на мобильном — горизонтальные разделители */ /* ===== Delivery Options (как «новости» из рефа) ===== */ .news-grid .tile{position:relative;overflow:hidden;background:#0b2842;color:#fff;box-shadow:0 14px 30px rgba(3,22,45,.12)} .news-grid .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(20%) contrast(1.05) brightness(.85);transform:scale(1.06);transition:transform .5s ease} .news-grid .tile:hover .bg{transform:scale(1.12)} .news-grid .overlay-blue{position:absolute;inset:0;background:rgb(34 105 161 / 78%)} .news-grid .overlay-grad{position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,15,28,.15) 0%, rgba(4,15,28,.78) 100%)} .news-grid .meta{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.18);padding:.25rem .5rem;font-weight:700} .news-grid .content{position:absolute;left:18px;right:18px;bottom:16px} .news-grid .title{font-weight:800;text-transform:uppercase;line-height:1.2;margin-bottom:.25rem} .news-grid .bullet{margin:0} .news-grid .action{font-weight:800;letter-spacing:.02em} /* ===== Procedure ===== */ .procedure ol{font-size:1.05rem} .procedure li{margin:.35rem 0} /* ===== Contact & Footer ===== */ .contact .card{border:1px solid var(--pf-sep)} footer{background:linear-gradient(0deg,#0b2238,#0e2e4f);color:#c9d6e5} footer a{color:#e6f0ff} .footer-logo{height:34px} .subfooter{border-top:1px solid rgba(255,255,255,.12);color:#a9b7c7} .hero h1, .hero .lead { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .navbar-toggler{ display: none!important; } /* ===== PROCEDURE BLOCK (ref-style) ===== */ .procedure { background: #fff; position: relative; overflow: hidden; } .procedure h2 { color: #0a2137; font-weight: 800; letter-spacing: -0.02em; } .procedure ol { color: #1a2e45; line-height: 1.7; font-weight: 500; } .procedure-image-wrapper { position: relative; display: inline-block; z-index: 2; } /* Синяя подложка .procedure-image-wrapper::after { content: ""; position: absolute; right: -12px; bottom: -12px; width: 94%; height: 92%; background-color: #2269a1; z-index: -1; } */ /* Фото */ .procedure-image-wrapper img { display: block; width: 100%; height: auto; object-fit: cover; box-shadow: 0 12px 28px rgba(0,0,0,0.1); } .link-primary{ color: var(--pf-blue)!important; text-decoration: none; } .btn-primary{ background: var(--pf-blue); border-color: var(--pf-blue); } .contact-card i, .contact-card a{ color: var(--pf-blue)!important; } /* ===== COMPANY HERO MASK ===== */ .company-hero { position: relative; background: #fff; text-align: center; } .company-mask-title { font-size: clamp(4rem, 12vw, 10rem); font-weight: 900!important; text-transform: uppercase; background: url('img/translux_mask.webp') center/cover no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; letter-spacing: 0.05em; } /* ===== LOGISTICS & ADVANTAGES (ref-style like #about) ===== */ #logistics .stats-row { display: flex; gap: 0; background: var(--pf-white); border: 1px solid var(--pf-sep); } #logistics .stat-item { flex: 1; position: relative; padding: 28px 12px; text-align: center; background: var(--pf-white); } #logistics .stat-item:not(:last-child)::after { content: ""; position: absolute; top: 10px; bottom: 10px; right: 0; width: 1px; background: var(--pf-sep); } #logistics .stat-icon { font-size: 2.4rem; color: var(--pf-blue); opacity: 0.8; line-height: 1; } #logistics .stat-value { color: var(--pf-deep); font-weight: 900; font-size: 1.4rem; margin-top: 6px; } #logistics .stat-label { color: #6b7e92; font-weight: 600; margin-top: 2px; } /* ===== PRODUCT HERO STYLE (DESERT BACKGROUND) ===== */ #product.product-hero { position: relative; color: #fff; padding: 140px 0; overflow: hidden; background: #0b2238; } #product .product-bg { position: absolute; inset: 0; background: url('img/product_bg.webp') bottom center/cover no-repeat; z-index: 1; } #product .overlay-dark { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 25, 45, 0.85) 0%, rgba(10, 25, 45, 0.25) 100%); z-index: 1; } #product .container { position: relative; z-index: 3; } #product h2 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,0.4); } #product p, #product li { text-shadow: 0 1px 6px rgba(0,0,0,0.45); font-size: 1.05rem; } #product ul { list-style: disc; padding-left: 1.2rem; } #product .btn-primary { background: var(--pf-blue); border-color: var(--pf-blue); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; } #product .btn-primary:hover { background: #1a5b8d; border-color: #1a5b8d; } /* ===== GEOGRAPHY COLUMNS (even 4-column flow) ===== */ .geography-columns { columns: 4; -webkit-columns: 4; -moz-columns: 4; column-gap: 2rem; list-style: none; padding-left: 0; margin-bottom: 0; font-size: 1rem; color: #1a2e45; } .geography-columns li { margin-bottom: 0.45rem; break-inside: avoid; } .geography-columns a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .geography-columns a:hover { color: var(--pf-blue); text-decoration: underline; } /* стили заголовков регионов */ .geography-columns .region { font-weight: 700; color: var(--pf-blue); margin-top: 0.8rem; margin-bottom: 0.3rem; text-transform: uppercase; font-size: 1.05rem; break-inside: avoid; } /* адаптив */ @media (max-width: 991.98px) { .geography-columns { columns: 2; } } @media (max-width: 575.98px) { .geography-columns { columns: 1; } } /* ===== FOOTER LINKS SECTION ===== */ .footer-links { background: #0b2238; /* тёмно-синий как в hero/footer */ border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); } .footer-title { font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.03em; position: relative; margin-bottom: 0.8rem; padding-bottom: 0.35rem; } .footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--pf-blue); } .footer-list { list-style: none; padding-left: 0; margin-bottom: 0; } .footer-list li { margin-bottom: 0.45rem; } .footer-list a { color: rgba(255,255,255,0.75); font-size: 0.95rem; text-decoration: none; transition: color 0.2s ease; } .footer-list a:hover { color: var(--pf-blue); } /* адаптив */ @media (max-width: 767.98px) { .footer-links { text-align: left; } .footer-title { margin-top: 1rem; } } /* уменьшить отступы на мобильных */ @media (max-width: 767.98px){ .company-mask-title { font-size: 14vw; } #logistics .stats-row { flex-direction: column; } #logistics .stat-item:not(:last-child)::after { display: none; } #logistics .stat-item:not(:last-child)::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--pf-sep); } .stats-row{flex-direction:column} .stat-item:not(:last-child)::after{display:none} .stat-item:not(:last-child)::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--pf-sep)} } @media (min-width: 992px){ .tile.big{height:var(--opt-row-h)} .tile.half{height:calc((var(--opt-row-h) - var(--opt-gap))/2)} } @media (max-width: 991.98px){ .tile.big,.tile.half{min-height:240px} .hero{min-height:640px} .hero-ship{ right:-10%; width:105vw; opacity:.9; position:absolute; z-index:0; /* ✅ теперь под синим градиентом */ } .hero-rings{ right:-18%; width:520px; height:520px; opacity:.45; } .hero-steps{ right:3%; top:56%; } .procedure-image-wrapper::after { right: -12px; bottom: -12px; width: 95%; height: 95%; } .hero { min-height: 640px; } #product { text-align: center; padding: 100px 0; } #product .product-bg { background-position: center; } #product .overlay-dark { background: rgba(10, 25, 45, 0.75); } #product ul { text-align: left; display: inline-block; margin: 0 auto 1.5rem; } } /* ===== TYPOGRAPHY SYSTEM ===== */ :root { --pf-font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --pf-font-size-base: 1rem; /* 16px */ --pf-font-size-sm: 0.9rem; /* мелкий текст */ --pf-font-size-lg: 1.1rem; /* lead / крупный */ --pf-line-height: 1.7; } body, p, li { font-family: var(--pf-font-base); font-size: var(--pf-font-size-base); line-height: var(--pf-line-height); color: var(--pf-text-color); font-weight: 400; } /* lead-параграф (замена bootstrap .lead) */ .lead { font-size: var(--pf-font-size-lg); line-height: 1.75; font-weight: 400; color: var(--pf-text-color); } /* small — единый стиль для мелких подписей */ .small, small { font-size: var(--pf-font-size-sm); color: #6b7e92 !important; font-weight: 400; } /* italic — курсив */ .em, em { font-style: italic; font-weight: 400; } /* strong — только усиливает вес, без увеличения размера */ strong { font-weight: 600; color: inherit; } /* убираем “запутанные” варианты Bootstrap */ .text-secondary { color: var(--pf-text-color) !important; opacity: 0.9; }