/* Ставим в сайта */
html, body {
max-width: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
/* ================================
КАЛЬКУЛЯТОР БЕТОНА
================================ */
#beton-calculator{
--green:#8ab62d;
--light:#f2f2f2;
--black:#111111;
--white:#ffffff;
width:100% !important;
max-width:none !important;
margin:30px 0 !important;
font-family:Arial,Helvetica,sans-serif;
color:#111;
}
#beton-calculator,
#beton-calculator *{
box-sizing:border-box;
}
/* КАРТОЧКА */
#beton-calculator .bc-card{
width:100%;
background:#fff;
border:1px solid #dedede;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}
/* ШАПКА */
#beton-calculator .bc-header{
width:100%;
background:#111;
padding:38px 30px;
text-align:center;
}
#beton-calculator .bc-header h2{
margin:0 0 10px !important;
padding:0 !important;
color:#fff !important;
font-size:32px !important;
line-height:1.2 !important;
font-weight:700 !important;
text-align:center !important;
}
#beton-calculator .bc-header p{
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-size:17px !important;
line-height:1.5 !important;
text-align:center !important;
}
/* КОНТЕНТ */
#beton-calculator .bc-content{
width:100%;
padding:32px;
}
/* ЗАГОЛОВКИ */
#beton-calculator .bc-section-title{
margin:0 0 16px !important;
padding:0 !important;
color:#111 !important;
font-size:19px !important;
line-height:1.4 !important;
font-weight:700 !important;
}
/* ТИПЫ ФУНДАМЕНТА */
#beton-calculator .bc-types{
width:100%;
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:32px;
}
#beton-calculator .bc-type{
width:100%;
min-height:95px;
padding:15px 10px;
border:2px solid #ddd;
border-radius:14px;
background:#fff;
color:#111;
cursor:pointer;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:700;
text-align:center;
transition:
background .2s ease,
border-color .2s ease,
transform .2s ease;
}
#beton-calculator .bc-type:hover{
border-color:#8ab62d;
transform:translateY(-1px);
}
#beton-calculator .bc-type.active{
background:#8ab62d;
border-color:#8ab62d;
color:#fff;
}
#beton-calculator .bc-icon{
display:block;
height:30px;
margin-bottom:8px;
font-size:25px;
line-height:25px;
}
/* ПОЛЯ */
#beton-calculator .bc-fields{
width:100%;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:20px;
margin-bottom:25px;
}
#beton-calculator .bc-field{
width:100%;
}
#beton-calculator .bc-field label{
display:block;
margin:0 0 8px !important;
padding:0 !important;
color:#111 !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.4 !important;
}
#beton-calculator .bc-input-wrap{
position:relative;
width:100%;
}
#beton-calculator .bc-input{
display:block;
width:100% !important;
height:54px !important;
margin:0 !important;
padding:0 55px 0 16px !important;
border:1px solid #d3d3d3 !important;
border-radius:10px !important;
background:#fff !important;
color:#111 !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:17px !important;
outline:none !important;
box-shadow:none !important;
}
#beton-calculator .bc-input:focus{
border-color:#8ab62d !important;
box-shadow:
0 0 0 3px rgba(138,182,45,.14) !important;
}
#beton-calculator .bc-unit{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
color:#777;
font-size:14px;
pointer-events:none;
}
/* CHECKBOX */
#beton-calculator .bc-check-wrap{
margin-top:5px;
padding-top:22px;
border-top:1px solid #e4e4e4;
}
#beton-calculator .bc-check{
display:flex;
align-items:center;
gap:10px;
color:#333;
font-size:15px;
font-weight:600;
cursor:pointer;
}
#beton-calculator .bc-check input{
width:18px !important;
height:18px !important;
margin:0 !important;
padding:0 !important;
accent-color:#8ab62d;
cursor:pointer;
}
/* РЕЗУЛЬТАТЫ */
#beton-calculator .bc-results{
width:100%;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:18px;
margin-top:28px;
}
#beton-calculator .bc-result{
min-height:155px;
padding:27px;
border-radius:16px;
display:flex;
flex-direction:column;
justify-content:center;
}
#beton-calculator .bc-result-green{
background:#8ab62d;
color:#fff;
}
#beton-calculator .bc-result-black{
background:#111;
color:#fff;
}
#beton-calculator .bc-result-caption{
margin-bottom:11px;
font-size:15px;
line-height:1.4;
}
#beton-calculator .bc-result-black
.bc-result-caption{
color:#cfcfcf;
}
#beton-calculator .bc-result-number{
display:flex;
align-items:baseline;
gap:8px;
}
#beton-calculator .bc-number{
font-size:44px;
line-height:1;
font-weight:800;
}
#beton-calculator .bc-result-unit{
font-size:17px;
font-weight:600;
}
/* ДЕТАЛИЗАЦИЯ */
#beton-calculator .bc-breakdown{
margin-top:18px;
padding:21px 23px;
border-radius:14px;
background:#f2f2f2;
}
#beton-calculator .bc-breakdown-title{
margin-bottom:6px;
color:#111;
font-size:15px;
font-weight:700;
}
#beton-calculator .bc-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:10px 0;
border-bottom:1px solid #ddd;
color:#444;
font-size:14px;
}
#beton-calculator .bc-row:last-child{
border-bottom:0;
}
#beton-calculator .bc-row strong{
color:#111;
font-weight:700;
text-align:right;
}
/* ЦЕНА */
#beton-calculator .bc-price-area{
width:100%;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:18px;
margin-top:18px;
}
#beton-calculator .bc-price-box,
#beton-calculator .bc-total-box{
min-height:125px;
padding:22px;
border-radius:14px;
}
#beton-calculator .bc-price-box{
background:#f2f2f2;
}
#beton-calculator .bc-total-box{
background:#111;
color:#fff;
}
#beton-calculator .bc-price-label{
display:block;
margin-bottom:9px;
color:#111;
font-size:14px;
font-weight:700;
}
#beton-calculator .bc-price-input{
display:block;
width:100% !important;
height:48px !important;
margin:0 !important;
padding:0 14px !important;
border:1px solid #d0d0d0 !important;
border-radius:9px !important;
background:#fff !important;
color:#111 !important;
font-size:16px !important;
outline:none !important;
}
#beton-calculator .bc-price-hint{
margin-top:6px;
color:#777;
font-size:12px;
}
#beton-calculator .bc-total-label{
margin-bottom:9px;
color:#ccc;
font-size:14px;
}
#beton-calculator .bc-total{
color:#fff;
font-size:31px;
line-height:1.2;
font-weight:800;
}
/* ПРИМЕЧАНИЕ */
#beton-calculator .bc-note{
margin-top:18px;
padding:15px 17px;
border-left:4px solid #8ab62d;
border-radius:0 9px 9px 0;
background:#f2f2f2;
color:#555;
font-size:13px;
line-height:1.5;
}
/* ================================
АДАПТИВ
================================ */
@media(max-width:800px){
#beton-calculator .bc-content{
padding:24px;
}
#beton-calculator .bc-fields{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media(max-width:600px){
#beton-calculator .bc-header{
padding:28px 18px;
}
#beton-calculator .bc-header h2{
font-size:25px !important;
}
#beton-calculator .bc-header p{
font-size:14px !important;
}
#beton-calculator .bc-content{
padding:18px;
}
#beton-calculator .bc-types{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
#beton-calculator .bc-fields{
grid-template-columns:1fr;
}
#beton-calculator .bc-results{
grid-template-columns:1fr;
}
#beton-calculator .bc-price-area{
grid-template-columns:1fr;
}
}
@media(max-width:400px){
#beton-calculator .bc-content{
padding:14px;
}
#beton-calculator .bc-types{
gap:8px;
}
#beton-calculator .bc-type{
min-height:85px;
font-size:13px;
}
#beton-calculator .bc-number{
font-size:36px;
}
}