/* ================================================
WALLBOX.GURU — Custom CSS
Odoo 19 Community · Website → Customize → Custom CSS
================================================ */
/* ----- CSS VARIABLES ----- */
:root {
--wbx-radius: 12px;
--wbx-shadow-sm: 0 4px 16px rgba(0,0,0,.07);
--wbx-shadow-md: 0 8px 32px rgba(0,0,0,.11);
--wbx-shadow-hover: 0 12px 36px rgba(0,0,0,.15);
--wbx-transition: .22s ease;
}
/* ================================================
1. HERO ТИПОГРАФИЯ — мащабиране за мобилни
================================================ */
@media (max-width: 991.98px) {
h1 span[style*="font-size: 50px"] { font-size: 34px !important; }
h1 span[style*="font-size: 55px"] { font-size: 28px !important; }
}
@media (max-width: 575.98px) {
h1 span[style*="font-size: 50px"] { font-size: 26px !important; }
h1 span[style*="font-size: 55px"] { font-size: 22px !important; }
.s_title .col-12.col-lg-7 h1 { line-height: 1.2; }
}
/* ================================================
2. FREEGRID HERO — мобилен изглед
================================================ */
@media (max-width: 991.98px) {
.s_freegrid .o_grid_item:not(.o_snippet_mobile_invisible) {
display: flex !important;
justify-content: center;
}
.s_freegrid .o_grid_item:not(.o_snippet_mobile_invisible) img {
max-height: 300px;
width: auto !important;
object-fit: contain;
}
.s_freegrid.pt80 {
padding-top: 40px !important;
padding-bottom: 16px !important;
}
}
/* ================================================
3. ЦЕНОВИ КАРТИ — wbx-price-card
================================================ */
.wbx-price-card {
border-color: #e4e4e4 !important;
transition: box-shadow var(--wbx-transition), border-color var(--wbx-transition),
transform var(--wbx-transition);
}
.wbx-price-card:hover {
box-shadow: var(--wbx-shadow-sm);
border-color: #ccc !important;
transform: translateY(-2px);
}
.wbx-price-card .badge {
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
.wbx-price-card { padding: .75rem !important; }
.wbx-price-card [style*="font-size:2rem"] { font-size: 1.65rem !important; }
}
/* ================================================
4. ФОРМА ЗА ЗАЯВКА
================================================ */
#wrap .card.shadow-sm {
border-radius: var(--wbx-radius) !important;
box-shadow: var(--wbx-shadow-md) !important;
}
#wbx-submit-btn {
background-color: #2e7d32 !important;
border-color: #2e7d32 !important;
color: #fff !important;
font-weight: 700;
letter-spacing: .05em;
padding: .8rem 1rem;
font-size: 1rem;
transition: background-color var(--wbx-transition), border-color var(--wbx-transition);
}
#wbx-submit-btn:hover:not(:disabled) {
background-color: #1b5e20 !important;
border-color: #1b5e20 !important;
}
#wbx-submit-btn:disabled {
opacity: .6;
cursor: not-allowed;
}
#wbx-lead-form .form-control:focus {
border-color: var(--o-color-1, #6c757d);
box-shadow: 0 0 0 .2rem rgba(108,117,125,.15);
}
@media (max-width: 575.98px) {
#wbx-lead-form .mb-3 { margin-bottom: .75rem !important; }
.card-body.p-4 { padding: 1.25rem !important; }
}
/* ================================================
5. СТЪПКИ — мобилен layout
================================================ */
@media (max-width: 575.98px) {
.s_key_images .row > .col-6:not(.col-lg-4) {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 2rem;
}
.s_key_images .h1-fs {
font-size: 2.5rem !important;
margin-bottom: .25rem !important;
}
}
/* ================================================
6. CARDS GRID — hover + мобилен image
================================================ */
.s_cards_grid .s_card {
border-radius: var(--wbx-radius) !important;
box-shadow: var(--wbx-shadow-sm);
transition: transform var(--wbx-transition), box-shadow var(--wbx-transition);
overflow: hidden;
margin-bottom: 1.25rem;
}
.s_cards_grid .s_card:hover {
transform: translateY(-4px);
box-shadow: var(--wbx-shadow-hover);
}
@media (max-width: 991.98px) {
.s_cards_grid .o_card_img_horizontal {
flex-direction: column !important;
}
.s_cards_grid .o_card_img_wrapper {
max-height: 200px;
overflow: hidden;
border-radius: var(--wbx-radius) var(--wbx-radius) 0 0 !important;
width: 100% !important;
flex: none !important;
}
.s_cards_grid .o_card_img_wrapper img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
/* ================================================
7. MASONRY — мобилен fallback
================================================ */
@media (max-width: 991.98px) {
.s_masonry_block .o_grid_mode {
display: flex !important;
flex-direction: column;
gap: 12px;
flex-wrap: wrap;
}
.s_masonry_block .o_grid_item {
grid-area: auto !important;
width: 100%;
flex: 0 0 100%;
border-radius: var(--wbx-radius);
min-height: auto !important;
}
.s_masonry_block .o_grid_item_image {
min-height: 240px;
overflow: hidden;
}
.s_masonry_block .o_grid_item_image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.s_masonry_block .o_grid_item.o_cc2,
.s_masonry_block .o_grid_item.o_cc4 {
flex: 0 0 calc(50% - 6px) !important;
}
}
/* ================================================
8. REVIEWS
================================================ */
.s_reviews_wall .s_blockquote {
border-radius: var(--wbx-radius) !important;
box-shadow: var(--wbx-shadow-sm);
transition: box-shadow var(--wbx-transition);
}
.s_reviews_wall .s_blockquote:hover {
box-shadow: var(--wbx-shadow-md);
}
.s_blockquote_avatar {
width: 48px !important;
height: 48px !important;
object-fit: cover;
flex-shrink: 0;
}
@media (max-width: 991.98px) {
.s_reviews_wall [data-name="Review"] {
padding-top: .5rem !important;
padding-bottom: .5rem !important;
}
}
/* ================================================
9. ACCORDION
================================================ */
.s_accordion .accordion-item {
border: none;
border-bottom: 1px solid rgba(0,0,0,.09);
}
.s_accordion .accordion-button {
padding: .9rem .25rem;
font-size: .95rem;
}
.s_accordion .accordion-button:focus {
box-shadow: none;
}
.s_accordion .accordion-body {
padding: .25rem .25rem 1rem;
color: #555;
font-size: .93rem;
line-height: 1.6;
}
/* ================================================
10. SPACING — мобилен
================================================ */
@media (max-width: 991.98px) {
.pt80 { padding-top: 44px !important; }
.pt88 { padding-top: 44px !important; }
.pt48 { padding-top: 28px !important; }
.pt40 { padding-top: 24px !important; }
.pb96 { padding-bottom: 52px !important; }
.pb64 { padding-bottom: 36px !important; }
.pb48 { padding-bottom: 28px !important; }
.pb32 { padding-bottom: 20px !important; }
}
/* ================================================
11. CTA БУТОН
================================================ */
.s_striped_top .btn-primary {
padding: 1rem 2rem;
font-size: 1.1rem;
border-radius: var(--wbx-radius);
box-shadow: var(--wbx-shadow-sm);
transition: transform var(--wbx-transition), box-shadow var(--wbx-transition);
}
.s_striped_top .btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--wbx-shadow-md);
}
