html{
scroll-behavior:smooth;
}
body{
font-family:'Inter',sans-serif;
color:var(--text);
background:#fff;
overflow-x:hidden;
}
section{
padding:90px 0;
}
h1{
font-size:56px;
font-weight:800;
}
h2{
font-size:42px;
font-weight:700;
}
p{
color:var(--text-light);
line-height:1.8;
}
.btn-primary{
background:var(--primary);
border:none;
padding:14px 34px;
border-radius:10px;
}
.btn-primary:hover{
background:var(--primary-dark);
}
.shadow-box{
box-shadow:var(--shadow);
border-radius:var(--radius);
}
/* ================= HEADER ================= */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: .3s;
}
.site-header.scrolled {
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
box-shadow: 0 5px 20px rgba(0,0,0,.08);
}
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255,255,255,.95);
backdrop-filter: blur(12px);
transition: .3s;
}
.navbar {
padding: 18px 0;
}
.logo {
text-decoration: none;
font-size: 28px;
font-weight: 800;
}
.logo-main {
color: var(--primary);
}
.logo-accent {
color: var(--accent);
}
.nav-link {
color: var(--text);
font-weight: 500;
margin: 0 14px;
transition: .25s;
}
.nav-link:hover {
color: var(--primary);
}
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
.phone {
color: var(--text);
text-decoration: none;
font-weight: 700;
}
.phone:hover {
color: var(--primary);
}
/* ================= HERO ================= */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 140px;
background: linear-gradient(
180deg,
#f8fbff 0%,
#ffffff 100%
);
}
.hero-subtitle {
display: inline-block;
color: var(--primary);
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 1px;
text-transform: uppercase;
}
.hero h1 {
margin-bottom: 25px;
line-height: 1.1;
}
.hero-text {
font-size: 18px;
margin-bottom: 35px;
}
.hero-list {
list-style: none;
padding: 0;
margin: 0 0 40px;
}
.hero-list li {
margin-bottom: 14px;
font-size: 18px;
display: flex;
align-items: center;
}
.hero-list i {
color: #28a745;
margin-right: 12px;
font-size: 20px;
}
.hero-buttons {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.btn-outline-primary {
border: 2px solid var(--primary);
color: var(--primary);
padding: 14px 34px;
border-radius: 10px;
font-weight: 600;
}
.btn-outline-primary:hover {
background: var(--primary);
color: white;
}
.hero-image {
display: flex;
justify-content: center;
}
.hero-image img {
width:100%;
max-width:620px;
height:650px;
object-fit:cover;
border-radius:20px;
box-shadow:var(--shadow);
}
/* ================= CATALOG ================= */
.catalog {
background: var(--background);
}
.section-header {
max-width:700px;
margin:0 auto 60px;
}
.section-subtitle {
display:inline-block;
color:var(--primary);
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:15px;
}
.section-header h2 {
margin-bottom:20px;
}
.product-card {
height:100%;
background:#fff;
padding:35px 30px;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:.35s;
position:relative;
overflow:hidden;
cursor:pointer;
}
.product-card::before {
content:"";
position:absolute;
top:0;
left:0;
height:4px;
width:0;
background:var(--primary);
transition:.35s;
}
.product-card:hover {
transform:translateY(-8px);
}
.product-card:hover::before {
width:100%;
}
.product-icon {
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
background:#edf4ff;
color:var(--primary);
border-radius:12px;
font-size:28px;
margin-bottom:25px;
}
.product-card h3 {
font-size:22px;
font-weight:700;
margin-bottom:15px;
}
.product-card p {
margin:0;
}
/* ================= ABOUT ================= */
.about {
background:#fff;
}
.advantages {
display:flex;
flex-direction:column;
gap:20px;
}
.advantage-card {
display:flex;
align-items:flex-start;
gap:20px;
padding:25px;
background:#fff;
border-radius:var(--radius);
box-shadow:var(--shadow);
transition:.3s;
}
.advantage-card:hover {
transform:translateX(8px);
}
.advantage-icon {
min-width:55px;
height:55px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:#edf4ff;
color:var(--primary);
font-size:25px;
}
.advantage-card h3 {
font-size:20px;
margin-bottom:8px;
font-weight:700;
}
.advantage-card p {
margin:0;
}
/* ================= FEEDBACK ================= */
.feedback {
background:var(--background);
}
.feedback-wrapper {
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
background:#fff;
padding:50px;
border-radius:20px;
box-shadow:var(--shadow);
}
.feedback-text h2 {
margin-bottom:20px;
}
.feedback-info {
margin-top:35px;
}
.feedback-info div {
display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;
font-weight:600;
}
.feedback-info i {
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#edf4ff;
color:var(--primary);
border-radius:10px;
}
.feedback-form .form-control {
padding:15px;
border-radius:10px;
border:1px solid var(--border);
}
.feedback-form textarea {
resize:none;
}
.feedback-form .form-control:focus {
border-color:var(--primary);
box-shadow:0 0 0 .2rem rgba(30,78,140,.15);
}
/* ================= CONTACTS ================= */
.contacts {
background:#fff;
}
.contact-card {
height:100%;
padding:40px;
background:#fff;
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.contact-item {
display:flex;
gap:20px;
margin-bottom:30px;
}
.contact-item:last-child {
margin-bottom:0;
}
.contact-icon {
min-width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:#edf4ff;
color:var(--primary);
border-radius:12px;
font-size:22px;
}
.contact-item h3 {
font-size:18px;
margin-bottom:5px;
font-weight:700;
}
.contact-item p {
margin:0;
}
.contact-item a {
color:var(--text);
text-decoration:none;
}
.contact-item a:hover {
color:var(--primary);
}
.map-wrapper {
height:100%;
overflow:hidden;
border-radius:20px;
box-shadow:var(--shadow);
}
.map-wrapper iframe {
display:block;
border:0;
}
/* ================= FOOTER ================= */
.footer {
background:#10243f;
color:#fff;
padding:50px 0 20px;
}
.footer-content {
display:flex;
justify-content:space-between;
gap:30px;
}
.footer-logo {
max-width:300px;
}
.footer-logo .logo-main {
color:#fff;
}
.footer-logo p {
color:#cbd5e1;
margin-top:15px;
}
.footer-links {
display:flex;
gap:25px;
align-items:center;
}
.footer-links a {
color:#fff;
text-decoration:none;
opacity:.8;
}
.footer-links a:hover {
opacity:1;
}
.footer-bottom {
margin-top:35px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.15);
}
.footer-bottom p {
margin:0;
color:#cbd5e1;
font-size:14px;
}
.logo {
display: inline-flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #a8c99a; /* цвет с картинки */
line-height: 1;
user-select: none;
}
.logo-frame {
border: 1.5px solid currentColor;
padding: 8px 18px;
font-size: 22px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
white-space: nowrap;
}
.logo-tagline {
display: flex;
align-items: center;
width: 100%;
margin-top: 6px;
font-size: 9px;
letter-spacing: 1.2px;
text-transform: uppercase;
white-space: nowrap;
}
.logo-tagline::before,
.logo-tagline::after {
content: "";
flex: 1;
height: 1px;
background: currentColor;
}
.logo-tagline span {
padding: 0 8px;
}
/* Чтобы логотип нормально выглядел в навбаре */
.navbar-brand.logo {
margin-right: 1.5rem;
}
.privacy-text{
margin-top:15px;
font-size:14px;
color:#6c757d;
line-height:1.5;
}
.privacy-text a{
color:var(--primary);
text-decoration:none;
}
.privacy-text a:hover{
text-decoration:underline;
}
.success-icon{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:#28a745;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
font-weight:bold;
}